Constant FRAME_STYLE 

pub const FRAME_STYLE: &str = r#"
.studio-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    max-width: 1600px;
    height: 720px;
    margin: 0 auto;
    background: var(--studio-bg);
    color: var(--studio-text);
    border: 1px solid var(--studio-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    scrollbar-color: var(--studio-border-hover) transparent;
}

.studio-frame .studio-content {
    --col-sidebar: 240px;
    --col-left: 35%;
    --col-right: 25%;
}

.studio-frame .studio-sidebar {
    border-right: 1px solid var(--studio-border);
}

.studio-frame .studio-main > .col-left,
.studio-frame .studio-main > .col-right {
    min-width: 200px;
}

/* The way into the Studio, at the toolbar's end, in the toolbar's quieter text. */
.studio-frame .studio-open {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    color: var(--studio-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.studio-frame .studio-open:hover {
    background: var(--accent-primary);
    color: #fff;
}

@media (min-width: 720px) {
    .studio-frame {
        width: calc(100% - 48px);
    }
}

/* The way into the Studio is a finger wide wherever a finger may press it. */
@media (max-width: 768px), (pointer: coarse), (max-height: 500px) and (orientation: landscape) {
    .studio-frame .studio-open {
        min-height: 44px;
    }
}

/* The frame's height in each band, set by the stylesheet alone, so the server's render is the first
   frame at every width: some page always shows above or below it on a phone, where a swipe scrolls
   the page. */
@media (min-width: 769px) and (min-height: 501px) and (pointer: coarse) {
    .studio-frame {
        height: min(720px, 85svh);
    }
}

@media (min-width: 601px) and (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
    .studio-frame {
        height: min(960px, 85svh);
    }
}

@media (max-width: 600px) {
    .studio-frame {
        height: min(640px, 75svh);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .studio-frame {
        height: 85svh;
    }
}
"#;

What a frame lays out itself, every rule inside the frame: its box on the page and its height in each band, its columns in the proportions the Studio first opens with, which hold until the reader drags a column bar (from then on the frame draws the columns as the Studio page does, in its own width), and the link into the Studio.