.demo-section .demo-frame {
    aspect-ratio: 1200 / 800;
    container-type: inline-size;
    overflow: visible;
    perspective: 1600px;
}

.demo-hero {
    
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 800px;
    transform-origin: center center;
    
    transform:
        translate(-50%, -50%)
        scale(calc(min(1, 100cqw / 1200px) * 0.9566))
        rotateX(10deg);

    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 12px;
    padding: 12px;
    border-radius: 32px;
    background: #131313;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;

    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
}

@media (prefers-color-scheme: dark) {
    .demo-hero {
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 1024px) {
    .demo-hero,
    .demo-hero * {
        pointer-events: none !important;
    }
}

.demo-hero-page {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

@media (prefers-color-scheme: dark) {
    .demo-hero-page {
        background: #0d0d0d;
    }

    .demo-hero-page::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 100;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

.demo-hero-page,
.demo-hero-panel {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mock-page-header {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--stroke);
    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: var(--primary);
    color: var(--background);
    font-size: 13px;
    font-weight: 500;
}

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

.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;
}

.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: 48px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--primary);
    max-width: 720px;
    margin: 0;
}

.mock-subtitle {
    font-size: 18px;
    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: var(--system-font-sans, var(--font-sans));
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

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

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

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

.mock-element-tag {
    left: 0;
    
    top: -17px;
}

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

.demo-hero-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: 98px;       
}

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

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

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

.demo-hero-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;
}

.demo-hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 100;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

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

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

.demo-hero-panel[data-variant="edit"] #edit-view {
    overflow: hidden;
}

.demo-hero-panel-stack {
    position: relative;
}

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

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

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

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

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

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

.demo-hero[data-state="inspect"] .overlay-selected-nhfijjhgedockmiocgmhlbiebgpcimdm,
.demo-hero[data-state="inspect"] .alignment-line-nhfijjhgedockmiocgmhlbiebgpcimdm,
.demo-hero[data-state="inspect"] .measurement-line-nhfijjhgedockmiocgmhlbiebgpcimdm,
.demo-hero[data-state="inspect"] .dimensions-tag-nhfijjhgedockmiocgmhlbiebgpcimdm,
.demo-hero[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;
}

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

.mock-cursor {
    position: absolute;
    top: calc(50% + 12px);
    left: calc(100% - 232px);
    width: 60px;
    height: 60px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

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

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

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

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

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

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

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