.big-demo-page{overflow-x:hidden}.big-demo-intro{padding:34px 0 18px}.big-demo-intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:24px;align-items:center}.big-demo-logo{width:100%;max-height:270px;object-fit:contain}.big-demo-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 2px 16px}.big-demo-flow span{flex:0 0 auto;padding:9px 12px;border:1px solid rgba(255,255,255,.1);background:var(--ss-bg-dark-elevated);border-radius:999px;color:var(--ss-text-on-dark-muted);font-size:.82rem;font-weight:800}.big-demo-flow i{color:var(--ss-primary-border);font-style:normal}.big-demo-launch-panel{padding:18px;border:1px solid var(--ss-primary-a25);background:var(--ss-primary-a09);border-radius:22px}.big-demo-launch-panel .actions{margin-top:12px}.demo-director-shell{position:relative;margin:16px auto 38px;border:1px solid var(--ss-primary-a28);background:var(--ss-bg-dark);border-radius:26px;box-shadow:0 30px 100px rgba(0,0,0,.45);overflow:hidden}.demo-director-shell.is-fullscreen{border-radius:0;min-height:100vh}.demo-director-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,12,20,.96)}.demo-director-brand{display:flex;align-items:center;gap:10px}.demo-director-brand img{width:42px;height:42px;object-fit:contain}.demo-director-brand strong,.demo-director-brand small{display:block}.demo-director-brand small{color:var(--ss-text-on-dark-muted)}.demo-step-status{text-align:center}.demo-step-status strong,.demo-step-status span{display:block}.demo-step-status span{color:var(--ss-text-on-dark-muted);font-size:.82rem}.demo-exit{white-space:nowrap}.demo-progress-wrap{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:var(--ss-bg-dark-secondary)}.demo-progress{display:grid;grid-template-columns:repeat(10,minmax(22px,1fr));gap:6px;max-width:1000px;margin:auto}.demo-progress button{position:relative;height:8px;padding:0;border:0;border-radius:999px;background:var(--ss-divider-dark);cursor:pointer}.demo-progress button.active{background:var(--ss-primary)}.demo-progress button.complete{background:var(--ss-primary-border)}.demo-progress button::after{content:attr(data-label);position:absolute;left:50%;top:16px;transform:translateX(-50%);padding:4px 7px;border-radius:8px;background:var(--ss-bg-dark-secondary);color:var(--ss-text-on-dark-muted);font-size:.68rem;white-space:nowrap;opacity:0;pointer-events:none;z-index:8}.demo-progress button:hover::after,.demo-progress button:focus-visible::after{opacity:1}.demo-viewport-wrap{min-height:590px;background:var(--ss-bg-dark);overflow:auto}.demo-stage-inner{width:100%;min-height:590px;padding:24px;transition:transform .25s ease,width .25s ease,margin .25s ease}.demo-view-fit .demo-stage-inner{transform-origin:top center}.demo-scene{max-width:1120px;margin:auto;animation:demoSceneIn .35s ease}.demo-scene-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.demo-scene-header h2{font-size:clamp(1.7rem,4vw,3rem);margin:.12em 0}.demo-scene-header p{max-width:760px;color:var(--ss-text-on-dark-muted);margin:0}.demo-scene-number{width:70px;height:70px;display:grid;place-items:center;border-radius:22px;background:var(--ss-primary-a14);border:1px solid var(--ss-primary-a28);font-size:1.7rem;font-weight:950;color:var(--ss-primary);flex:0 0 auto}.demo-rich-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.demo-panel{grid-column:span 4;padding:18px;border:1px solid rgba(255,255,255,.09);background:var(--ss-bg-dark-secondary);border-radius:20px;min-width:0}.demo-panel.wide{grid-column:span 8}.demo-panel.full{grid-column:1/-1}.demo-panel.half{grid-column:span 6}.demo-panel h3{margin:.1em 0 .55em}.demo-panel p{color:var(--ss-text-on-dark-muted)}.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.demo-metric{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:var(--ss-bg-dark-secondary)}.demo-metric strong,.demo-metric span{display:block}.demo-metric strong{font-size:1.35rem;color:var(--ss-primary-border)}.demo-metric span{color:var(--ss-text-on-dark-muted);font-size:.8rem;margin-top:4px}.demo-vex-row{display:grid;grid-template-columns:145px 1fr;gap:18px;align-items:center}.demo-vex-row img{width:100%;max-height:250px;object-fit:contain}.demo-lesson-portal{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.7fr);gap:16px}.demo-lesson-stage-list{display:grid;gap:8px}.demo-lesson-stage{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:var(--ss-bg-dark-elevated)}.demo-lesson-stage b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--ss-primary-a13);color:var(--ss-primary-border)}.demo-visual-board{min-height:220px;border:1px solid var(--ss-info-a30);border-radius:18px;background:var(--ss-bg-dark-secondary);display:grid;place-items:center;padding:20px;text-align:center}.demo-visual-board .formula{font-size:clamp(2rem,6vw,4.4rem);font-weight:950;color:var(--ss-primary);line-height:1}.demo-visual-board .subformula{margin-top:12px;color:var(--ss-primary-border);font-weight:800}.demo-slide{padding:18px;border-radius:18px;border:1px solid var(--ss-primary-a28);background:var(--ss-bg-dark)}.demo-slide-head{display:flex;justify-content:space-between;gap:12px}.demo-slide-screen{margin-top:12px;aspect-ratio:16/8;border-radius:16px;background:var(--ss-bg-dark-secondary);border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;padding:22px;text-align:center}.demo-slide-screen strong{font-size:clamp(1.5rem,4vw,2.7rem);color:var(--ss-primary)}.demo-student-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.demo-student{padding:10px;border-radius:12px;background:var(--ss-bg-dark-elevated);border:1px solid rgba(255,255,255,.07);text-align:center}.demo-student.ready{border-color:var(--ss-primary-a38)}.demo-student span,.demo-student small{display:block}.demo-student small{color:var(--ss-text-on-dark-muted)}.demo-table-wrap{overflow:auto}.demo-table{width:100%;border-collapse:collapse;min-width:640px}.demo-table th,.demo-table td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.demo-table th{color:var(--ss-primary);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}.demo-status{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--ss-primary-a13);color:var(--ss-primary-border);font-size:.75rem;font-weight:900}.demo-status.amber{background:var(--ss-primary-a14);color:var(--ss-warning-text)}.demo-status.purple{background:var(--ss-info-a14);color:var(--ss-info-text)}.demo-chain{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:8px;align-items:center}.demo-chain article{position:relative;padding:12px;border:1px solid rgba(255,255,255,.08);background:var(--ss-bg-dark-elevated);border-radius:14px;text-align:center}.demo-chain article:not(:last-child)::after{content:'→';position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--ss-primary-border);font-weight:950;z-index:2}.demo-chain strong,.demo-chain small{display:block}.demo-chain small{color:var(--ss-text-on-dark-muted);margin-top:4px}.demo-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-scope-card{padding:14px;border:1px solid rgba(255,255,255,.08);background:var(--ss-bg-dark-elevated);border-radius:15px}.demo-scope-card strong,.demo-scope-card span,.demo-scope-card code{display:block}.demo-scope-card span{color:var(--ss-text-on-dark-muted);margin:5px 0}.demo-scope-card code{font-size:.73rem;color:var(--ss-info);word-break:break-all}.demo-caption{min-height:48px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:var(--ss-bg-dark-secondary);color:var(--ss-text-on-dark);text-align:center}.demo-caption.hidden{display:none}.demo-controls{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:14px;background:var(--ss-bg-dark)}.demo-controls .btn[aria-pressed=true]{border-color:var(--ss-primary-border);color:var(--ss-primary-border)}.demo-layout-controls{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding:0 14px 14px;background:var(--ss-bg-dark)}.demo-scene-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}.demo-ready{padding:44px 18px;text-align:center}.demo-ready img{width:min(320px,76vw);max-height:300px;object-fit:contain}.demo-ready h2{font-size:clamp(2rem,6vw,4rem);margin:.25em 0}.demo-ready p{max-width:800px;margin:0 auto 20px;color:var(--ss-text-on-dark-muted)}.demo-complete-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.demo-benefit{padding:16px;border:1px solid rgba(255,255,255,.08);background:var(--ss-bg-dark-elevated);border-radius:16px}.demo-benefit strong{display:block;color:var(--ss-primary)}.demo-benefit span{display:block;color:var(--ss-text-on-dark-muted);margin-top:5px}.demo-view-mobile .demo-stage-inner{max-width:430px;margin:auto}.demo-view-mobile .demo-rich-grid{display:block}.demo-view-mobile .demo-panel{margin-bottom:12px}.demo-view-mobile .demo-metrics{grid-template-columns:repeat(2,1fr)}.demo-view-mobile .demo-chain{grid-template-columns:1fr}.demo-view-mobile .demo-chain article:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%)}.demo-view-mobile .demo-scope-grid{grid-template-columns:1fr}.demo-view-mobile .demo-lesson-portal{grid-template-columns:1fr}.demo-view-mobile .demo-student-grid{grid-template-columns:repeat(2,1fr)}
@keyframes demoSceneIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (min-width:950px){.demo-view-fit .demo-stage-inner{transform:scale(.82);width:121.95%;margin-left:-10.975%;margin-bottom:-100px}.demo-view-desktop .demo-stage-inner{max-width:1320px;margin:auto}}
@media (max-width:900px){.big-demo-intro-grid{grid-template-columns:1fr}.demo-director-top{grid-template-columns:1fr auto}.demo-step-status{grid-column:1/-1;grid-row:2;text-align:left}.demo-scene-header{display:block}.demo-scene-number{margin-bottom:12px}.demo-panel,.demo-panel.wide,.demo-panel.half{grid-column:1/-1}.demo-metrics{grid-template-columns:repeat(2,1fr)}.demo-chain{grid-template-columns:1fr}.demo-chain article:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%)}.demo-scope-grid,.demo-complete-grid{grid-template-columns:1fr 1fr}.demo-lesson-portal{grid-template-columns:1fr}.demo-progress button::after{display:none}}
@media (max-width:560px){.demo-stage-inner{padding:14px}.demo-director-shell{border-radius:0;margin-left:-14px;margin-right:-14px}.demo-vex-row{grid-template-columns:90px 1fr}.demo-metrics,.demo-scope-grid,.demo-complete-grid{grid-template-columns:1fr}.demo-student-grid{grid-template-columns:repeat(2,1fr)}.demo-controls .btn,.demo-layout-controls .btn{flex:1 1 135px}.demo-progress{gap:3px}.demo-progress button{height:7px}.demo-scene-header h2{font-size:1.75rem}}
@media (prefers-reduced-motion:reduce){.demo-scene{animation:none}.demo-stage-inner{transition:none}}


/* v1.6.0 guided-demo movement and internal navigation */
.demo-director-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}.demo-menu-backdrop{display:none;position:absolute;inset:0;border:0;background:rgba(0,0,0,.62);z-index:48}.demo-menu-backdrop.open{display:block}.demo-menu-panel{display:none;position:absolute;right:12px;top:76px;width:min(420px,calc(100% - 24px));max-height:calc(100% - 92px);overflow:auto;padding:16px;border:1px solid var(--ss-primary-a40);border-radius:20px;background:var(--ss-bg-dark-secondary);box-shadow:0 24px 90px rgba(0,0,0,.75);z-index:49}.demo-menu-panel.open{display:block}.demo-menu-head{display:flex;justify-content:space-between;gap:12px;align-items:start;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.09)}.demo-menu-head strong,.demo-menu-head small{display:block}.demo-menu-head strong{color:var(--ss-primary);font-size:1.15rem}.demo-menu-head small{color:var(--ss-text-on-dark-muted)}.demo-menu-step-list{display:grid;gap:7px;margin:13px 0}.demo-menu-step-list button{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:var(--ss-bg-dark-elevated);color:var(--ss-text-on-dark);cursor:pointer}.demo-menu-step-list button:hover,.demo-menu-step-list button:focus-visible{border-color:var(--ss-primary-border);background:var(--ss-primary-a08)}.demo-menu-step-list span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--ss-info-a15);color:var(--ss-info-text);font-weight:900}.demo-menu-utilities{display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-director-shell{position:relative}.demo-viewport-wrap{scroll-behavior:smooth;overscroll-behavior:contain}.demo-scene.demo-motion-next{animation:demoSceneNext .4s ease}.demo-scene.demo-motion-prev{animation:demoScenePrev .4s ease}.demo-director-shell.is-fullscreen{overflow:auto}.demo-director-shell.is-fullscreen .demo-director-top{position:sticky;top:0;z-index:42}.demo-director-shell.is-fullscreen .demo-progress-wrap{position:sticky;top:76px;z-index:41}.demo-director-shell.is-fullscreen .demo-viewport-wrap{height:calc(100dvh - 292px);min-height:320px;overflow:auto}.demo-director-shell.is-fullscreen .demo-controls{position:sticky;bottom:0;z-index:42;box-shadow:0 -12px 35px rgba(0,0,0,.42)}
@keyframes demoSceneNext{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}@keyframes demoScenePrev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media(max-width:720px){.demo-director-top{grid-template-columns:1fr auto}.demo-director-actions{grid-column:2;grid-row:1}.demo-step-status{grid-column:1/-1;grid-row:2}.demo-director-actions .btn{padding:10px 12px}.demo-menu-panel{top:72px}.demo-menu-utilities{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.demo-scene.demo-motion-next,.demo-scene.demo-motion-prev{animation:none}}