.demo .demo-frame {
    /* shorter than the mock's scaled height on purpose: the mock runs past the
       bottom edge and is clipped, so it reads as chopped rather than as a
       whole floating window with rounded corners */
    /* .demo-frame in styles.css caps width at --container-max; the frame is a
       fixed box that gets scaled, so that cap has to be lifted here */
/* transforms do not shrink the layout box, so an in-flow frame would still
       reserve its full 790px and leave a gap under the scaled art. Taking it
       out of flow lets .demo-rails' aspect-ratio define the height. */
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    max-width: none;
    height: 750px;
    transform-origin: top left;
    transform: scale(min(1, 100cqw / 1280px));
    overflow: hidden;

    /* dithered backdrop: the mock is absolutely positioned and scales by
       100cqw, and container-type: inline-size measures the CONTENT box, so
       padding here insets the mock automatically without touching the scale
       maths. Padding is in vw rather than cqw to avoid querying the container
       whose own padding we are setting. */
}

/* HERO ONLY, scoped to .demo-frame so the bento tiles keep the rule above.

   The whole composition scales as one unit: the frame is a fixed 1312x790
   (1200 mock + 56 inset either side, 790 tall for the bottom chop), the mock
   sits inside it at true 1:1, and the frame itself is scaled to fit. The
   dither, the insets and the mock therefore stay in exact proportion at every
   width, instead of the mock scaling inside a fluid frame. */
.demo-frame .mock-window {
    top: 40px;
    left: 40px;
    right: auto;
    width: 1200px;
    height: 724px;
    transform: none;
}


/* HERO ONLY: the hero mock now renders unscaled, so its fake page title reads
   larger than it did. The bento tiles keep the 64px above. */
.demo-frame .mock-title {
    font-size: 52px;
}


.mock-window {
    --frame-pad: 0px;

    position: absolute;
    /* padding does not inset an absolutely positioned child, so the top inset
       is restated here to match the frame's padding */
    top: clamp(16px, 4vw, 56px);
    left: 50%;
    width: 1200px;
    height: 764px;
    transform-origin: top center;

    transform:
        translateX(-50%)
        scale(min(1, 100cqw / 1200px));

    border-radius: 0;
    box-sizing: border-box;

    isolation: isolate;
}

.mock-window-inner {
    position: absolute;
    inset: var(--frame-pad);
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--background);
    box-shadow: 0 0 0 1px var(--stroke);
}

.mock-window-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 300;
}

.mock-window-left {
    padding: 8px 0 8px 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.demo-frame .mock-page > .dock-host {
    z-index: 400;
}

.demo-frame .mock-page .control-bar-nhfijjhgedockmiocgmhlbiebgpcimdm {
    bottom: 40px;
}

.mock-window-left > .mock-page {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

@media (prefers-color-scheme: dark) {
    .mock-window-inner {
        background: #131313;
        box-shadow: none;
    }

    .mock-window-inner::after {
        box-shadow: inset 0 0 0 1px var(--stroke);
    }
}


.mock-page {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--primary);
    font-family: "Geist", system-ui, sans-serif;
}

.mock-page::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
    pointer-events: none;
    z-index: 300;
}

@media (prefers-color-scheme: dark) {
    .mock-page {
        background: var(--background);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .mock-page::after {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

.mock-page > * {
    position: relative;
    z-index: 1;
}

.mock-page-header {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.mock-brand {
    font-weight: 600;
    font-size: 18px;
    color: var(--primary);
}

.mock-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}

.mock-nav-link {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary);
}

.mock-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 100px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--stroke);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

.mock-page-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 0 72px 64px;
    text-align: left;
}

.mock-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 0 1px var(--stroke);
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--secondary);
    line-height: 1.4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mock-eyebrow svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--secondary);
}

.mock-eyebrow strong {
    color: var(--primary);
    font-weight: 600;
}

.mock-title {
    font-size: 64px;
    line-height: 1.0;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: var(--primary);
    max-width: 800px;
    margin: 0;
}

.mock-subtitle {
    font-size: 20px;
    color: var(--secondary);
    line-height: 1.4;
    max-width: 560px;
    margin: 0;
}

.mock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 245px;
    height: 52.5px;
    padding: 15px 26px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--primary);
    color: var(--background);
    font-family: "Geist", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.mock-buttons {
    display: inline-flex;
    align-items: center;
    gap: 32px;
}

.mock-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 52.5px;
    padding: 15px 26px;
    box-sizing: border-box;
    background: transparent;
    color: var(--primary);
    font-family: "Geist", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.mock-selection-wrap,
.mock-hover-wrap {
    position: relative;
    display: inline-block;
}

.mock-hover-wrap {
    padding: 0;
}

.mock-hover-title {
    display: block;
    max-width: 800px;
}

.mock-padding-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
}

.mock-padding-right {
    top: 0;
    right: 0;
    width: 26px;
    height: 100%;
}

.mock-padding-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
}

.mock-padding-left {
    top: 0;
    left: 0;
    width: 26px;
    height: 100%;
}

.mock-page .padding-overlay-nhfijjhgedockmiocgmhlbiebgpcimdm {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--highlight-opacity, 0.65);
}

.mock-selection-wrap > .overlay-selected-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-hover-wrap > .overlay-hovered-nhfijjhgedockmiocgmhlbiebgpcimdm {
    inset: 0;
}

.mock-element-tag {
    left: 0;
    top: -17px;
    width: max-content;
    white-space: nowrap;
}

.mock-margin-bottom {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 24px;
}

.mock-margin-left {
    position: absolute;
    top: 0;
    right: 100%;
    width: 32px;
    height: 100%;
}

.mock-page .margin-overlay-nhfijjhgedockmiocgmhlbiebgpcimdm {
    opacity: var(--highlight-opacity, 0.65);
}

.mock-align-h,
.mock-align-v {
    position: absolute;
    pointer-events: none;
}

.mock-align-h {
    left: -2000px;
    right: -2000px;
    height: 1px;
}

.mock-align-v {
    top: -2000px;
    bottom: -2000px;
    width: 1px;
}

.mock-align-h-top    { top: 0; }
.mock-align-h-bottom { top: 100%; }
.mock-align-v-left   { left: 0; }
.mock-align-v-right  { left: 100%; }

.mock-measurement-line {
    top: 100%;
    left: 50%;
    height: 24px;
}

.mock-measurement-line-h {
    top: 50%;
    right: 100%;
    width: 32px;
    height: 1px;
}

.mock-measurement-line .mock-measurement-tag {
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.mock-measurement-line-h .mock-measurement-tag {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.mock-page .control-bar-nhfijjhgedockmiocgmhlbiebgpcimdm {
    position: absolute;
    top: auto;
    bottom: 24px;
    right: 50%;
    transform: translateX(50%);
    z-index: 3;
}

.mock-page .control-bar-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-page .control-bar-nhfijjhgedockmiocgmhlbiebgpcimdm * {
    cursor: default;
}

.mock-panel {
    position: relative;
    overflow: hidden;
    background: var(--background);
    border-radius: 20px;

    color: var(--primary);
    
    font-weight: 400;
    
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}


.mock-panel #element-tab,
.mock-panel #page-tab,
.mock-panel #edit-view,
.mock-panel .container {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: auto;
    min-height: 0;
}

.mock-panel.sp-host {
    overscroll-behavior: auto;
}

.mock-panel[data-variant="edit"] #edit-view {
    overflow-y: auto;
}

.mock-panel .decl-toggle {
    pointer-events: none;
}

.mock-panel-stack {
    position: relative;
}

.mock-panel-stack > .mock-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.mock-window[data-state="measure"] .mock-panel[data-variant="measure"],
.mock-window[data-state="inspect"] .mock-panel[data-variant="inspect"],
.mock-window[data-state="edit"]    .mock-panel[data-variant="edit"] {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .mock-panel-stack > .mock-panel {
        transition: none;
        filter: none;
    }
}

.mock-window:not([data-state="edit"]) .control-bar-nhfijjhgedockmiocgmhlbiebgpcimdm[data-dock-variant="edit"],
.mock-window[data-state="edit"]       .control-bar-nhfijjhgedockmiocgmhlbiebgpcimdm[data-dock-variant="default"] {
    display: none;
}

.mock-window[data-state="measure"] [data-action-id="selectParent"].disabled-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="measure"] [data-action-id="takeScreenshot"].disabled-nhfijjhgedockmiocgmhlbiebgpcimdm {
    pointer-events: auto;
}

.mock-window[data-state="measure"] [data-action-id="selectParent"].disabled-nhfijjhgedockmiocgmhlbiebgpcimdm > span,
.mock-window[data-state="measure"] [data-action-id="takeScreenshot"].disabled-nhfijjhgedockmiocgmhlbiebgpcimdm > span {
    opacity: 1;
}

.mock-window[data-state="inspect"] .overlay-selected-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="inspect"] .alignment-line-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="inspect"] .dimensions-tag-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="inspect"] .mock-selection-wrap .element-tag-nhfijjhgedockmiocgmhlbiebgpcimdm {
    display: none;
}

.mock-inspector {
    position: absolute;
    top: calc(50% + 48px);
    left: calc(100% - 176px);
    transform: translateY(-50%);
    pointer-events: none;
    text-align: left;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.mock-window[data-state="inspect"] .mock-inspector {
    opacity: 1;
    filter: blur(0);
}

.mock-cursor {
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.mock-cursor-title {
    top: calc(50% + 12px);
    left: calc(100% - 232px);
}

.mock-cursor-cta {
    top: 15px;
    left: 45px;
}

.mock-window[data-state="inspect"] .mock-cursor-title,
.mock-window[data-state="measure"] .mock-cursor-cta {
    opacity: 1;
    filter: blur(0);
}

.mock-window[data-state="inspect"] [data-action-id="toggleInspect"] {
    background: var(--primary);
}

.mock-window[data-state="inspect"] [data-action-id="toggleInspect"] .action-icon-nhfijjhgedockmiocgmhlbiebgpcimdm svg {
    fill: var(--material);
}

.mock-window[data-state="edit"] .overlay-hovered-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="edit"] .measurement-line-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="edit"] .margin-overlay-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="edit"] .mock-hover-wrap .element-tag-nhfijjhgedockmiocgmhlbiebgpcimdm {
    display: none;
}

.mock-window[data-state="inspect"] .mock-hover-cta > .element-tag-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="inspect"] .mock-hover-cta > .overlay-hovered-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="measure"] .mock-hover-title > .element-tag-nhfijjhgedockmiocgmhlbiebgpcimdm,
.mock-window[data-state="measure"] .mock-hover-title > .overlay-hovered-nhfijjhgedockmiocgmhlbiebgpcimdm {
    display: none;
}

.mock-panel .section-title {
    font-size: var(--text-normal);
    font-weight: 500;
    text-align: left;
    max-width: none;
    margin: 0;
    line-height: 1.5;
}

.mock-panel .sticky-top {
    z-index: 50;
}

.mock-panel .input-select,
.mock-panel .state-select-overlay {
    display: flex;
    align-items: center;
}