.video-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 16px}.video-grid figure:nth-child(1),.video-grid figure:nth-child(2),.video-grid figure:nth-child(3){grid-column:span 2}.video-grid figure:nth-child(4){grid-column:2/span 2}.video-grid figure:nth-child(5){grid-column:4/span 2}.video-grid video{border-radius:14px;aspect-ratio:1.28;object-fit:cover}.video-grid figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:800px){.video-grid{grid-template-columns:repeat(2,1fr)}.video-grid figure:nth-child(n){grid-column:auto}.video-grid figure:last-child{grid-column:1/-1;max-width:50%}}
.studio-template-layout{min-width:0}.studio-template-layout>*{min-width:0}@media(max-width:1200px) and (min-width:801px){.studio-template-layout{grid-template-columns:220px minmax(280px,1fr) minmax(380px,1fr)}.studio-template-layout .glasses-frame{width:min(36vh,360px);height:min(36vh,360px)}}
.studio-template-layout .sim-wrap{background:#101522!important}.studio-template-layout .glasses-frame{background:#05070b!important}.lens-background{position:absolute;inset:15px;overflow:hidden;border-radius:13px 13px 78px 78px;background:#000;z-index:0}.lens-background[data-scene="workshop"]{background:linear-gradient(135deg,#b58d68 0 22%,#4b5b68 22% 25%,#1d2a38 25% 67%,#d8c2a5 67%)}.lens-background[data-scene="street"]{background:linear-gradient(160deg,#90a6bb 0 43%,#e7c184 43% 57%,#69737e 57%)}.lens-background[data-scene="night"]{background:radial-gradient(circle at 72% 24%,#fff1b2 0 3%,transparent 4%),linear-gradient(145deg,#07162e,#102c50 48%,#101522)}.lens-background[data-scene="webcam"]{background:#111}.lens-background:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 30%,rgba(0,0,0,.18));pointer-events:none}.lens-background.is-opaque{background:#000}.lens-background.is-opaque[data-scene="workshop"],.lens-background.is-opaque[data-scene="street"],.lens-background.is-opaque[data-scene="night"],.lens-background.is-opaque[data-scene="webcam"]{background:#000}.lens-background #webcamVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.studio-template-layout .sim-screen{position:relative;z-index:1;background:#000;mix-blend-mode:screen}.lens-background.is-opaque~.sim-screen{mix-blend-mode:normal}.studio-template-layout .scene-grid{z-index:4}.product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.product{min-width:0}.product h3{font-size:14px}.product p{font-size:11px}.audio-only .glasses:after{border-color:#7a8799}.oakley:before,.oakley:after{border-radius:18px 18px 28px 28px}
.studio-template-layout .glasses-frame{width:min(44vh,440px)!important;height:min(44vh,440px)!important;max-height:none!important;aspect-ratio:1/1;overflow:hidden;flex:0 0 auto}
.studio-template-layout .glasses-frame{overflow:hidden;position:relative;width:min(44vh,440px);height:min(44vh,440px);max-width:calc(100% - 40px);max-height:none;flex:0 0 auto}.studio-template-layout .sim-screen{transform-origin:top left;max-width:none;max-height:none}
.studio-template-layout{min-width:0}.studio-template-layout>*{min-width:0}@media(max-width:800px){.studio-template-layout{display:flex!important;flex-direction:column;width:100%;min-width:0}.studio-template-layout .template-rail,.studio-template-layout .editor-panel,.studio-template-layout .sim-panel{width:100%;min-width:0;max-width:100%}.studio-template-layout .editor-panel{height:420px;min-height:420px}.studio-template-layout .sim-panel{height:650px;min-height:650px}.studio-template-layout .glasses-frame{width:min(72vw,320px)}}
.media-intro{display:flex;justify-content:space-between;align-items:flex-end;margin:clamp(24px,5vh,60px) 0 28px}.media-intro h2{font-size:clamp(42px,5vw,68px)}.media-note{font:10px/1.6 var(--mono);color:var(--muted);text-align:right}.video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.video-grid figure{min-width:0}.video-grid video{display:block;width:100%;aspect-ratio:1.15;object-fit:cover;background:#101522;border:1px solid var(--line)}.video-grid figcaption{font:9px var(--mono);color:var(--muted);margin-top:9px}.video-grid figcaption b{color:var(--blue);margin-right:7px}.media-slide .slide-bottom{margin-top:auto}@media(max-width:800px){.media-intro{display:block;margin:42px 0 25px}.media-note{margin-top:20px;text-align:left}.video-grid{grid-template-columns:repeat(2,1fr);gap:16px}.video-grid video{aspect-ratio:1.25}.video-grid figure:last-child{grid-column:1/-1;max-width:50%}}
.studio-template-layout{display:grid;grid-template-columns:minmax(0,250px) minmax(320px,.8fr) minmax(520px,1.2fr);flex:1;min-height:0}
@media(max-width:800px){.studio-template-layout{display:flex;flex-direction:column}.studio-template-layout .template-rail{flex:0 0 auto}.studio-template-layout .editor-panel{height:420px;min-height:420px}.studio-template-layout .sim-panel{height:650px;min-height:650px}.studio-template-layout .glasses-frame{width:min(72vw,320px)}}
.lab-main{max-width:none!important;width:100%!important;min-width:0}.lab-main #labContent{grid-template-columns:minmax(0,1.2fr) minmax(420px,.9fr)!important;column-gap:clamp(40px,5vw,88px)}
.boilerplate-picker{display:flex;align-items:center;gap:8px;color:var(--muted);font:9px var(--mono);white-space:nowrap}.boilerplate-picker select{border:1px solid var(--line);background:var(--white);color:var(--ink);padding:10px 28px 10px 10px;font:10px var(--body);cursor:pointer}.studio-actions{flex-wrap:wrap}
.view#studio{height:calc(100vh - 124px);display:none;flex-direction:column}.view#studio.is-visible{display:flex}.view#studio .studio-head{flex:0 0 auto;padding-top:clamp(28px,4vh,55px);padding-bottom:clamp(20px,3vh,42px)}.view#studio .studio-head h2{font-size:clamp(42px,4.7vw,68px)}.view#studio .studio-grid{flex:1;min-height:0;height:auto}.view#studio .editor-panel,.view#studio .sim-panel{min-height:0;height:100%;display:flex;flex-direction:column}.view#studio .editor-wrap,.view#studio #codeEditor{height:auto;flex:1;min-height:0}.view#studio .sim-wrap{height:auto;flex:1;min-height:0}.view#studio .glasses-frame{width:min(54vh,440px);max-width:68%;max-height:calc(100% - 40px)}.view#studio .display-controls,.view#studio .sim-controls{flex:0 0 auto}
.view#studio .glasses-frame{height:auto;min-height:0;aspect-ratio:1/1;flex:none}.view#studio .sim-screen{aspect-ratio:1/1;height:100%;width:100%}.view#studio .sim-wrap{isolation:isolate}.view#studio .scene-grid,.view#studio .sim-wrap:before{pointer-events:auto}
.studio-template-layout{display:grid;grid-template-columns:250px minmax(320px,.8fr) minmax(520px,1.2fr);flex:1;min-height:0;border-top:1px solid var(--line);background:var(--line);gap:1px}.template-rail{background:var(--white);padding:22px 18px;min-width:0}.template-rail p{font-size:12px;line-height:1.45;color:var(--muted);margin:8px 0 18px}.template-card{width:100%;display:flex;gap:10px;text-align:left;border:1px solid var(--line);background:var(--paper);padding:13px 10px;margin-top:7px;color:var(--ink);cursor:pointer}.template-card b{font:10px var(--mono);color:var(--blue)}.template-card strong,.template-card small{display:block}.template-card strong{font-size:11px}.template-card small{font-size:10px;color:var(--muted);margin-top:3px}.template-card.is-active{border-color:var(--blue);background:var(--meta-blue-subtle,#e8f3ff)}.template-note{border-top:1px solid var(--line);margin-top:25px;padding-top:15px;display:grid;gap:7px;font-size:10px;color:var(--muted);line-height:1.4}.template-note strong{font:9px var(--mono);color:var(--blue)}.studio-template-layout .editor-panel,.studio-template-layout .sim-panel{height:100%;min-height:0;display:flex;flex-direction:column}.studio-template-layout .editor-wrap,.studio-template-layout #codeEditor{height:auto;flex:1;min-height:0}.studio-template-layout .sim-wrap{height:auto;flex:1;min-height:0}.studio-template-layout .glasses-frame{width:min(54vh,440px);height:auto}.studio-template-layout .sim-screen{display:block;border:0;padding:0;background:#000;mix-blend-mode:screen}.studio-template-layout .sim-wrap.is-opaque .sim-screen{mix-blend-mode:normal}.studio-template-layout .display-controls,.studio-template-layout .sim-controls{flex:0 0 auto}
.studio-grid{grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr)}.sim-panel{min-width:0}.sim-wrap{position:relative;height:clamp(430px,52vh,560px);overflow:hidden;background:#26374d}.sim-wrap:before{content:"ENVIRONMENT PREVIEW";position:absolute;left:24px;top:20px;color:rgba(255,255,255,.72);font:10px var(--mono);letter-spacing:.1em;z-index:1}.sim-wrap[data-scene="workshop"]{background:linear-gradient(135deg,#c9a681 0 18%,#47596b 18% 20%,#1d2a38 20% 65%,#d9c2a5 65%)}.sim-wrap[data-scene="street"]{background:linear-gradient(160deg,#94a7bb 0 45%,#e9c58e 45% 57%,#6d7481 57% 100%)}.sim-wrap[data-scene="night"]{background:radial-gradient(circle at 72% 24%,#fff1b2 0 3%,transparent 4%),linear-gradient(145deg,#07162e,#102c50 48%,#101522)}.sim-wrap[data-scene="webcam"]{background:#111}.sim-wrap[data-scene="webcam"] .scene-grid{display:none}.sim-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 28%,rgba(0,0,0,.18));pointer-events:none}.scene-grid{position:absolute;right:20px;top:16px;z-index:3;display:flex;gap:5px}.scene-grid button,.sim-option,.segmented{font:9px var(--mono);letter-spacing:.04em}.scene-grid button,.sim-option{border:1px solid rgba(255,255,255,.35);background:rgba(16,21,34,.52);color:#fff;padding:8px 9px;cursor:pointer}.scene-grid button.is-active,.sim-option:hover{background:var(--blue);border-color:var(--blue)}#webcamVideo{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.8) contrast(1.05)}#webcamVideo.is-visible{display:block}.glasses-frame{z-index:2;width:min(58%,440px);aspect-ratio:1/1;border:10px solid #dbe4ec;border-radius:30px 30px 110px 110px;padding:15px;background:#05070b;box-shadow:0 25px 60px rgba(0,0,0,.38)}.sim-screen{height:100%;aspect-ratio:1/1;background:#000;mix-blend-mode:screen;border-radius:13px 13px 78px 78px}.sim-wrap.is-opaque .sim-screen{mix-blend-mode:normal}.display-controls{min-height:66px;display:flex;align-items:center;gap:12px;padding:12px 18px;background:#151e2d;border-top:1px solid #283144;color:#a7b1c1;font:9px var(--mono)}.segmented{display:flex;border:1px solid #40516b}.segmented button{border:0;background:transparent;color:#a7b1c1;padding:8px 9px;font:9px var(--mono);cursor:pointer}.segmented button.is-active{background:var(--blue);color:#fff}.display-controls label{display:flex;align-items:center;gap:8px}.display-controls input{width:80px;accent-color:var(--cyan)}.sim-option{margin-left:auto}.sim-controls{border-top:1px solid #283144}.studio-grid{min-height:0}.studio-grid .editor-panel,.studio-grid .sim-panel{min-height:0}@media(max-width:1000px) and (min-width:801px){.studio-grid{grid-template-columns:1fr}.sim-panel{min-height:650px}}@media(max-width:800px){.studio-grid{grid-template-columns:1fr}.sim-wrap{height:430px}.glasses-frame{width:min(70vw,320px)}.display-controls{flex-wrap:wrap}.display-controls label{margin-left:auto}}
@media(min-width:801px){.deck-layout{align-items:center}.slide-stage{height:min(calc(100vh - 150px),calc((100vw - 235px)*.5625));min-height:0;aspect-ratio:16/9}}
.lab-code{margin-top:30px;padding:18px 20px;background:#101522;color:#d6e4f4;overflow:auto;font:12px/1.6 var(--mono);white-space:pre-wrap;border-left:3px solid var(--blue)}
.lab-code-panel{grid-column:2;grid-row:3 / span 2;align-self:start;margin-top:38px;background:#101522;box-shadow:0 18px 40px rgba(16,21,34,.12)}.lab-code-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #283144;color:#a7b1c1;font:10px var(--mono);letter-spacing:.08em}.copy-step-code{border:1px solid #40516b;background:transparent;color:#fff;padding:7px 9px;font:10px var(--mono);cursor:pointer}.copy-step-code:hover{border-color:var(--cyan);color:var(--cyan)}.lab-code-panel .lab-code{margin:0;min-height:142px;border-left:0}.lab-main #labContent{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);column-gap:5vw;align-items:start}.lab-main #labContent h1,.lab-main #labContent>.lab-lede{grid-column:1/-1}.lab-main #labContent>.lab-lede{max-width:650px}.lab-main #labContent>.checklist{grid-column:1}.lab-main #labContent>.lab-callout{grid-column:1/-1}.lab-main #labContent>.lab-footer{grid-column:1/-1}@media(max-width:800px){.lab-main #labContent{display:block}.lab-code-panel{margin-top:30px}.lab-code-panel .lab-code{min-height:0}.lab-main #labContent>.checklist{margin-top:30px}}
.lab-main{max-width:none}.lab-main #labContent{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
.lab-main{width:100%;min-width:0;padding-left:clamp(32px,5vw,76px);padding-right:clamp(32px,5vw,76px)}.lab-main #labContent{width:100%;grid-template-columns:minmax(0,1.2fr) minmax(420px,.9fr);column-gap:clamp(40px,5vw,88px)}.lab-main #labContent>.checklist{min-width:0}.lab-code-panel{width:100%;min-width:0}
.slide{position:relative}.hero-signal{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:14px;margin-top:clamp(38px,7vh,80px);color:var(--muted);font:10px var(--mono);letter-spacing:.08em}.hero-signal i{height:1px;background:var(--line);position:relative}.hero-signal i:after{content:"";position:absolute;left:18%;right:18%;top:-1px;height:3px;background:var(--blue)}.hero-signal b{grid-column:1/-1;color:var(--blue);font:10px var(--mono);letter-spacing:.08em;margin-top:9px}.slide:first-child .hero-copy{margin-top:7%;}.slide:first-child .slide-bottom{margin-top:auto}@media(max-width:800px){.hero-signal{grid-template-columns:auto 1fr auto;gap:8px;margin-top:35px}.hero-signal i:nth-of-type(2){display:none}.hero-signal span:nth-of-type(3){display:none}.hero-signal b{font-size:8px}.slide:first-child .hero-copy{margin-top:12%}}
.app-shell{height:100vh;overflow:hidden}.view{height:calc(100vh - 124px);min-height:0}.deck-layout,.lab-layout{height:100%;min-height:0}.slide-stage{height:100%;min-height:0;aspect-ratio:auto}.slide{height:100%;min-height:0}.global-footer{flex:0 0 46px}@media(max-width:800px){.app-shell{height:auto;min-height:100vh;overflow:visible}.view{height:auto;min-height:calc(100vh - 124px)}.deck-layout,.lab-layout{height:auto;min-height:0}.slide-stage{height:auto;min-height:650px}.slide{height:auto;min-height:530px}}
:root{--paper:#f4f6f8;--white:#fff;--ink:#101522;--muted:#718096;--line:#d9e0e8;--blue:#0878f9;--blue-dark:#0556bf;--cyan:#17d4e4;--yellow:#e5f46b;--display:"Syne",sans-serif;--body:"Space Grotesk",sans-serif;--mono:"DM Mono",monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}body{background-image:linear-gradient(rgba(16,21,34,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,21,34,.035) 1px,transparent 1px);background-size:32px 32px}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:rgba(244,246,248,.88);backdrop-filter:blur(12px);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}.brand-mark{font:700 13px var(--mono);background:var(--blue);color:#fff;padding:9px 7px;border-radius:2px;letter-spacing:-.08em}.brand strong,.brand small{display:block}.brand strong{font:800 12px var(--display);letter-spacing:.04em}.brand small{font:10px var(--mono);color:var(--muted);margin-top:3px}.mode-nav{display:flex;gap:7px}.mode-btn,.event-link,.secondary-action,.primary-action,.icon-btn,.sim-controls button{font:700 11px var(--mono);border:0;background:none;color:var(--muted);cursor:pointer}.mode-btn{padding:11px 12px}.mode-btn.is-active{color:var(--blue);border-bottom:2px solid var(--blue)}.event-link{color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:12px 14px;background:var(--white)}.event-link span{color:var(--blue);font-size:15px;margin-left:6px}.view{display:none;min-height:calc(100vh - 124px)}.view.is-visible{display:block}.deck-layout{display:grid;grid-template-columns:235px 1fr;min-height:calc(100vh - 124px)}.deck-rail{border-right:1px solid var(--line);padding:36px 28px 24px;display:flex;flex-direction:column}.rail-label,.slide-top,.slide-bottom,.lab-header,.panel-bar,.global-footer{font:10px var(--mono);letter-spacing:.08em}.slide-list{display:grid;gap:5px;margin-top:37px}.slide-nav{display:grid;grid-template-columns:28px 1fr;gap:9px;text-align:left;border:0;background:transparent;color:var(--muted);padding:10px 0;cursor:pointer;font:11px var(--body)}.slide-nav span{font:10px var(--mono)}.slide-nav strong{font-weight:500}.slide-nav.is-active{color:var(--ink)}.slide-nav.is-active span{color:var(--blue)}.slide-nav.is-active strong{font-weight:700}.rail-foot{font:10px var(--mono);line-height:1.7;color:var(--muted);margin-top:auto}.rail-foot span:last-child{font-size:9px}.live-dot{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-right:6px;box-shadow:0 0 0 4px rgba(8,120,249,.11)}.slide-stage{position:relative;overflow:hidden;min-height:650px;padding:36px 5.2vw 75px}.slide{display:none;min-height:530px;animation:rise .45s ease both}.slide.is-active{display:flex;flex-direction:column}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.slide-top,.slide-bottom{display:flex;justify-content:space-between;color:var(--muted)}.slide-top span:first-child{color:var(--blue)}.slide-bottom{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}.hero-copy{margin:auto 0}.eyebrow{font:700 10px var(--mono);letter-spacing:.1em;color:var(--blue);margin-bottom:22px}.hero-copy h1,.slide h2,.lab-sidebar h2,.studio-head h2{font:800 clamp(55px,8vw,112px)/.88 var(--display);letter-spacing:-.06em}.slide em,.lab-sidebar em,.studio-head em{color:var(--blue);font-style:normal}.hero-note{font:500 18px/1.4 var(--body);margin-top:32px;margin-left:6px}.split-slide{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw;flex:1}.slide h2{font-size:clamp(43px,5.8vw,78px)}.lede{max-width:430px;color:var(--muted);font-size:16px;line-height:1.55;margin-top:28px}.spectrum{padding-top:50px}.spectrum-line{display:flex;align-items:center;justify-content:space-between;border-top:3px solid var(--ink);position:relative}.spectrum-line:before{content:"";position:absolute;left:0;right:0;top:-8px;border-top:1px solid var(--blue)}.spectrum-line i{display:block;width:16px;height:16px;border:3px solid var(--blue);background:var(--paper);border-radius:50%;margin-top:-10px;position:relative}.spectrum-line i:last-child{background:var(--blue)}.spectrum-labels{display:flex;justify-content:space-between;margin-top:20px}.spectrum-labels span{font:700 13px var(--mono)}.spectrum-labels small{font:11px var(--body);font-weight:400;color:var(--muted)}.comparison{display:flex;flex-direction:column;justify-content:center;flex:1}.comparison h2{font-size:clamp(40px,5vw,66px)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:42px}.product{border-top:1px solid var(--line);padding:17px 8px 0;position:relative}.product.featured{border-top:3px solid var(--blue);background:rgba(255,255,255,.55);padding:15px 15px 17px}.product-tag{color:var(--blue);font:10px var(--mono)}.product h3{font:700 17px var(--display);margin-top:20px}.product p{font-size:12px;color:var(--muted);line-height:1.45;margin-top:8px}.glasses{height:70px;width:145px;margin:20px auto 0;position:relative}.glasses:before,.glasses:after{content:"";display:block;position:absolute;width:55px;height:40px;border:4px solid var(--ink);border-radius:9px 9px 17px 17px;top:12px}.glasses:before{left:5px}.glasses:after{right:5px}.glasses.display:after{border-color:var(--blue);box-shadow:inset 0 0 12px rgba(8,120,249,.23)}.glasses.orion:before,.glasses.orion:after{border-color:var(--cyan);border-radius:50% 50% 12px 12px}.principles{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center;flex:1}.principle-list{border-top:1px solid var(--line)}.principle-list div{display:grid;grid-template-columns:45px 1fr;gap:13px;padding:17px 0;border-bottom:1px solid var(--line)}.principle-list b,.loop-grid b{font:11px var(--mono);color:var(--blue)}.principle-list span{font-size:14px;color:var(--muted)}.principle-list strong{display:block;color:var(--ink);font-weight:700;margin-bottom:4px}.loop-slide{flex:1;padding-top:60px}.loop-slide h2{font-size:clamp(44px,6vw,80px)}.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:65px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.loop-grid div{min-height:145px;padding:17px 15px;border-right:1px solid var(--line);display:flex;flex-direction:column}.loop-grid div:last-child{border-right:0}.loop-grid strong{font:700 21px var(--display);margin-top:25px}.loop-grid span{color:var(--muted);font-size:12px;margin-top:8px}.loop-caption{color:var(--muted);font-size:14px;margin-top:25px}.final-slide{display:grid;grid-template-columns:1fr 1fr;align-items:center;flex:1;gap:7vw}.final-slide h2{font-size:clamp(43px,5.8vw,78px)}.final-image{position:relative;background:#dfe8f0;padding:25px;min-height:300px;display:flex;align-items:center;justify-content:center}.final-image img{width:100%;max-width:400px;mix-blend-mode:multiply}.final-image span{position:absolute;bottom:12px;left:15px;font:10px var(--mono);color:var(--blue)}.slide-controls{position:absolute;bottom:24px;left:5.2vw;right:5.2vw;display:flex;align-items:center;gap:9px}.icon-btn{width:32px;height:32px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:17px}.progress{height:2px;background:var(--line);flex:1;margin:0 10px}.progress i{display:block;height:100%;background:var(--blue);width:16.66%;transition:.35s}.lab-layout{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 124px)}.lab-sidebar{background:var(--blue);color:#fff;padding:62px 48px;display:flex;flex-direction:column}.lab-sidebar .eyebrow{color:var(--yellow)}.lab-sidebar h2{font-size:53px}.lab-sidebar em{color:var(--yellow)}.side-copy{font-size:14px;line-height:1.5;opacity:.78;margin-top:22px}.lab-steps{margin-top:55px;display:grid}.lab-steps button{display:flex;align-items:center;gap:15px;text-align:left;border:0;border-top:1px solid rgba(255,255,255,.22);background:none;color:rgba(255,255,255,.65);padding:15px 0;cursor:pointer;font:13px var(--body)}.lab-steps button span{font:10px var(--mono)}.lab-steps button.is-active{color:#fff}.lab-steps button.is-active span{color:var(--yellow)}.docs-link{font:10px var(--mono);color:var(--yellow);text-decoration:none;margin-top:auto}.lab-main{max-width:790px;padding:62px 7vw;display:flex;flex-direction:column}.lab-header{display:flex;justify-content:space-between;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:18px}.lab-header span:first-child{color:var(--blue)}#labContent{padding-top:65px}#labContent h1{font:800 clamp(47px,6vw,78px)/.95 var(--display);letter-spacing:-.05em}.lab-lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:580px;margin-top:25px}.checklist{display:grid;gap:0;margin-top:42px}.checklist label{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding:15px 0;font-size:14px}.checklist input{appearance:none;width:18px;height:18px;border:1px solid var(--blue);background:var(--white);cursor:pointer}.checklist input:checked{background:var(--blue);box-shadow:inset 0 0 0 4px var(--white)}.checklist label:has(input:checked) span{text-decoration:line-through;color:var(--muted)}.lab-callout{display:grid;grid-template-columns:90px 1fr;gap:20px;margin-top:34px;padding:19px 20px;background:var(--yellow);font-size:13px;line-height:1.45}.lab-callout span{font:10px var(--mono);color:var(--blue)}.lab-footer{margin-top:auto;padding-top:35px;display:flex;justify-content:space-between}.secondary-action{background:var(--white);color:var(--ink);border-color:var(--line)}.secondary-action:disabled{opacity:.3;cursor:not-allowed}.studio-head{display:flex;justify-content:space-between;align-items:flex-end;padding:55px 5.2vw 42px}.studio-head h2{font-size:clamp(44px,5.8vw,76px)}.studio-actions{display:flex;align-items:center;gap:10px}.save-status{font:10px var(--mono);color:var(--muted);margin-right:12px}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:480px}.editor-panel,.sim-panel{background:#101522}.panel-bar{height:47px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;color:#a7b1c1;border-bottom:1px solid #283144}.file-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-right:8px}.sim-state .live-dot{background:var(--cyan);box-shadow:0 0 0 4px rgba(23,212,228,.1)}#codeEditor{display:block;width:100%;height:433px;border:0;resize:none;background:#101522;color:#d6e4f4;padding:25px;font:14px/1.7 var(--mono);outline:0}.sim-wrap{height:387px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,#223755,#101522)}.glasses-frame{position:relative;width:320px;height:205px;border:8px solid #dbe4ec;border-radius:28px 28px 85px 85px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:12px}.sim-screen{height:100%;background:#000;color:#fff;overflow:hidden;padding:20px;font:12px/1.3 var(--body);border-radius:12px 12px 65px 65px}.sim-screen .glance-card{border:1px solid var(--blue);border-radius:12px;padding:19px;background:rgba(8,120,249,.18);height:100%;display:flex;flex-direction:column;justify-content:center}.sim-screen .eyebrow{font:8px var(--mono);color:var(--cyan);margin-bottom:14px}.sim-screen h1{font:700 29px var(--display)}.sim-screen p{color:#a7b1c1;margin:8px 0 18px}.sim-screen button{align-self:flex-start;background:var(--blue);border:0;color:#fff;padding:8px 10px;font:8px var(--mono)}.lens-glint{position:absolute;width:45px;height:3px;background:var(--cyan);right:27px;top:32px;transform:rotate(-40deg);opacity:.7}.sim-controls{height:46px;display:flex;align-items:center;gap:8px;padding:0 18px;color:#a7b1c1;font:9px var(--mono)}.sim-controls span{margin-right:auto}.sim-controls button{color:#fff;border:1px solid #36445b;padding:7px 9px}.pulse{animation:pulse .35s}@keyframes pulse{50%{box-shadow:0 0 20px var(--cyan)}}.global-footer{height:46px;display:flex;justify-content:space-between;align-items:center;padding:0 38px;color:var(--muted);border-top:1px solid var(--line);margin-top:auto}.global-footer strong{color:var(--blue)}@media(max-width:800px){.topbar{height:auto;min-height:72px;padding:14px 18px;flex-wrap:wrap;gap:12px}.mode-nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:8px}.event-link{font-size:9px;padding:9px}.deck-layout,.lab-layout{display:block}.deck-rail{border-right:0;border-bottom:1px solid var(--line);padding:18px}.slide-list{display:flex;overflow:auto;margin-top:18px;gap:18px}.slide-nav{min-width:135px}.rail-foot{display:none}.slide-stage{padding:24px 20px 75px;min-height:650px}.slide-top,.slide-bottom{font-size:8px}.split-slide,.principles,.final-slide{grid-template-columns:1fr;gap:34px;padding:50px 0}.hero-copy h1{font-size:65px}.spectrum{padding-top:10px}.product-grid{grid-template-columns:1fr;gap:15px;margin-top:25px}.product{display:grid;grid-template-columns:100px 1fr;column-gap:10px;padding-top:12px}.product-tag{grid-column:1/-1}.product .glasses{grid-row:2/4;margin:10px 0;width:95px;transform:scale(.72);transform-origin:left center}.product h3{margin-top:12px}.product p{margin-top:5px}.loop-slide{padding-top:45px}.loop-grid{grid-template-columns:1fr 1fr;margin-top:35px}.loop-grid div:nth-child(2){border-right:0}.loop-grid div{min-height:115px}.lab-sidebar{padding:38px 24px}.lab-sidebar h2{font-size:48px}.lab-steps{margin-top:30px}.docs-link{margin-top:30px}.lab-main{padding:30px 24px;min-height:590px}#labContent{padding-top:45px}.lab-callout{grid-template-columns:1fr;gap:8px}.studio-head{display:block;padding:35px 20px}.studio-actions{margin-top:25px;flex-wrap:wrap}.studio-grid{grid-template-columns:1fr}.editor-panel{min-height:400px}.sim-panel{min-height:480px}.global-footer{height:auto;min-height:46px;padding:13px 18px;gap:8px;flex-wrap:wrap;font-size:8px}.global-footer span:last-child{display:none}}
@media(min-width:801px){
  .media-slide .media-intro{
    margin:clamp(10px,2.2vh,26px) 0 clamp(14px,2vh,22px);
  }

  .media-slide .media-intro h2{
    font-size:clamp(34px,3.8vw,56px);
  }

  .media-slide .lede{
    margin-top:14px;
  }

  .media-slide .video-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(8px,.8vw,14px);
    width:100%;
    max-width:none;
    margin:0;
  }

  .media-slide .video-grid figure{
    min-width:0;
    width:100%;
    justify-self:center;
  }

  .media-slide .video-grid figure:nth-child(1),
  .media-slide .video-grid figure:nth-child(2),
  .media-slide .video-grid figure:nth-child(3){
    grid-column:auto;
  }

  .media-slide .video-grid figure:nth-child(4){
    grid-column:auto;
  }

  .media-slide .video-grid figure:nth-child(5){
    grid-column:auto;
  }

  .media-slide .video-grid video{
    aspect-ratio:1080 / 1434;
    height:auto;
    object-fit:contain;
    border-radius:14px;
  }

  .media-slide .video-grid figure:first-child video{
    aspect-ratio:1080 / 1446;
  }

  .media-slide .media-action-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:clamp(14px,1.8vh,22px);
    font:10px/1.4 var(--mono);
    letter-spacing:.08em;
    color:var(--muted);
  }

  .media-slide .media-action-row p{
    max-width:520px;
  }

  .media-slide .media-action-row .primary-action{
    flex:0 0 auto;
    background:var(--blue);
    color:#fff;
    padding:18px 24px;
    min-width:260px;
    justify-content:center;
    font-size:12px;
    box-shadow:0 14px 30px rgba(8,120,249,.18);
  }
}

/* Studio action bar cleanup: template selection lives in the sidebar. */
.view#studio .studio-head{
  gap:24px;
}

.view#studio .studio-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
  margin-top:0;
}

.view#studio .studio-actions .save-status{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--muted);
  margin-right:0;
  white-space:nowrap;
}

.view#studio .studio-actions .save-status .live-dot{
  margin-right:0;
}

.view#studio .studio-actions .secondary-action,
.view#studio .studio-actions .primary-action{
  min-height:52px;
  min-width:0;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.view#studio .studio-actions .primary-action{
  min-width:210px;
  gap:8px;
}

@media(max-width:1100px){
  .view#studio .studio-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .view#studio .studio-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media(max-width:800px){
  .view#studio .studio-actions .secondary-action,
  .view#studio .studio-actions .primary-action,
  .view#studio .studio-actions .save-status{
    width:100%;
  }
}

.hero-image-slide{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-image-slide:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.7) 8%,rgba(244,246,248,.28) 20%,rgba(244,246,248,0) 36%,rgba(244,246,248,0) 68%,rgba(244,246,248,.22) 82%,rgba(244,246,248,.66) 94%,rgba(244,246,248,.98) 100%),
    linear-gradient(180deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.66) 9%,rgba(244,246,248,.22) 23%,rgba(244,246,248,0) 38%,rgba(244,246,248,0) 66%,rgba(244,246,248,.2) 82%,rgba(244,246,248,.72) 95%,rgba(244,246,248,.98) 100%),
    linear-gradient(90deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.88) 32%,rgba(244,246,248,.3) 58%,rgba(244,246,248,.04) 80%),
    linear-gradient(0deg,rgba(244,246,248,.75),rgba(244,246,248,0) 40%);
  pointer-events:none;
}

.hero-image-slide .hero-bg{
  position:absolute;
  inset:-24px;
  z-index:0;
  background:transparent;
}

.hero-image-slide .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  display:block;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 44%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.5) 82%,rgba(0,0,0,.14) 96%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 44%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.5) 82%,rgba(0,0,0,.14) 96%,transparent 100%);
}

.hero-image-slide .slide-top,
.hero-image-slide .hero-copy,
.hero-image-slide .hero-signal,
.hero-image-slide .slide-bottom{
  position:relative;
  z-index:2;
}

.hero-image-slide .hero-copy{
  max-width:min(820px,55vw);
}

.hero-image-slide .hero-signal{
  max-width:min(760px,50vw);
}

@media(max-width:800px){
  .hero-image-slide:before{
    background:linear-gradient(180deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.76) 52%,rgba(244,246,248,.18) 100%);
  }

  .hero-image-slide .hero-bg img{
    object-position:center bottom;
  }

  .hero-image-slide .hero-copy,
  .hero-image-slide .hero-signal{
    max-width:100%;
  }
}

.handoff-slide{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.handoff-slide .slide-top,
.handoff-slide .slide-bottom{
  position:relative;
  z-index:3;
}

.handoff-slide .final-slide{
  position:absolute;
  inset:0;
  display:block;
  padding:clamp(70px,10vh,110px) 5.2vw clamp(70px,9vh,100px);
  z-index:1;
}

.handoff-slide .final-slide:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.7) 8%,rgba(244,246,248,.28) 20%,rgba(244,246,248,0) 36%,rgba(244,246,248,0) 68%,rgba(244,246,248,.22) 82%,rgba(244,246,248,.66) 94%,rgba(244,246,248,.98) 100%),
    linear-gradient(180deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.66) 9%,rgba(244,246,248,.22) 23%,rgba(244,246,248,0) 38%,rgba(244,246,248,0) 66%,rgba(244,246,248,.2) 82%,rgba(244,246,248,.72) 95%,rgba(244,246,248,.98) 100%),
    linear-gradient(90deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.9) 28%,rgba(244,246,248,.42) 52%,rgba(244,246,248,.06) 76%),
    linear-gradient(0deg,rgba(244,246,248,.82),rgba(244,246,248,0) 34%);
  pointer-events:none;
}

.handoff-slide .final-slide > div:first-child{
  position:relative;
  z-index:2;
  max-width:min(760px,50vw);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.handoff-slide .final-slide h2{
  font-size:clamp(62px,7.6vw,118px);
}

.handoff-slide .final-slide .lede{
  max-width:620px;
  color:#66758d;
}

.handoff-slide .final-slide .primary-action{
  align-self:flex-start;
  margin-top:32px;
}

.handoff-slide .final-image{
  position:absolute;
  inset:-24px;
  min-height:0;
  padding:0;
  background:transparent;
  display:block;
  z-index:0;
}

.handoff-slide .final-image img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center right;
  mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 44%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.5) 82%,rgba(0,0,0,.14) 96%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 44%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.5) 82%,rgba(0,0,0,.14) 96%,transparent 100%);
}

.handoff-slide .final-image span{
  z-index:3;
  left:auto;
  right:5.2vw;
  bottom:clamp(54px,7vh,82px);
  color:var(--blue);
}

@media(max-width:800px){
  .handoff-slide .final-slide{
    padding:78px 20px 82px;
  }

  .handoff-slide .final-slide:before{
    background:linear-gradient(180deg,rgba(244,246,248,.98) 0%,rgba(244,246,248,.78) 55%,rgba(244,246,248,.18) 100%);
  }

  .handoff-slide .final-slide > div:first-child{
    max-width:100%;
    justify-content:flex-start;
    padding-top:42px;
  }

  .handoff-slide .final-slide h2{
    font-size:clamp(52px,18vw,78px);
  }

  .handoff-slide .final-image img{
    object-position:center bottom;
  }
}

.spectrum{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.spectrum .spectrum-line{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:0;
  border-top:0;
  padding-top:18px;
}

.spectrum .spectrum-line:before{
  top:26px;
  z-index:0;
}

.spectrum-point{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  display:grid;
  justify-items:center;
  gap:12px;
  cursor:pointer;
  position:relative;
  z-index:1;
  font:700 10px var(--mono);
  letter-spacing:.08em;
}

.spectrum-point i{
  width:18px;
  height:18px;
  margin:0;
  border:3px solid var(--blue);
  border-radius:50%;
  background:var(--paper);
  transition:background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.spectrum-point span{
  padding:4px 6px;
  background:rgba(244,246,248,.86);
}

.spectrum-point:hover,
.spectrum-point:focus-visible,
.spectrum-point.is-active{
  color:var(--blue);
}

.spectrum-point:hover i,
.spectrum-point:focus-visible i,
.spectrum-point.is-active i{
  background:var(--blue);
  box-shadow:0 0 0 8px rgba(8,120,249,.1);
}

.spectrum .spectrum-labels{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:0;
}

.spectrum .spectrum-labels span{
  min-width:0;
  font-size:11px;
}

.spectrum .spectrum-labels small{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.25;
}

.spectrum-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  padding:18px;
  box-shadow:0 16px 34px rgba(16,21,34,.08);
  min-height:216px;
}

.spectrum-card span{
  display:block;
  color:var(--blue);
  font:700 10px var(--mono);
  letter-spacing:.1em;
  margin-bottom:12px;
}

.spectrum-card h3{
  font:800 clamp(22px,2.4vw,34px)/.95 var(--display);
  letter-spacing:-.05em;
  margin:0;
}

.spectrum-card p{
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.spectrum-card dl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.spectrum-card dt{
  color:var(--blue);
  font:700 9px var(--mono);
  letter-spacing:.08em;
  margin-bottom:6px;
}

.spectrum-card dd{
  color:var(--ink);
  font-size:12px;
  line-height:1.35;
}

.spectrum-device-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border:1px solid var(--line);
  background:rgba(255,255,255,.46);
}

.spectrum-device-groups section{
  min-width:0;
  padding:11px 12px;
  border-right:1px solid var(--line);
}

.spectrum-device-groups section:last-child{
  border-right:0;
}

.spectrum-device-groups b,
.spectrum-device-groups span{
  display:block;
}

.spectrum-device-groups b{
  color:var(--blue);
  font:700 8px var(--mono);
  letter-spacing:.12em;
  margin-bottom:9px;
  text-transform:uppercase;
}

.spectrum-device-groups span{
  color:var(--muted);
  font:500 10px/1.25 var(--body);
  letter-spacing:0;
  padding:5px 0;
  border-top:1px solid rgba(217,224,232,.68);
}

.spectrum-device-groups span:first-of-type{
  border-top:0;
  padding-top:0;
}

.spectrum-device-groups span:last-child{
  padding-bottom:0;
}

@media(max-width:800px){
  .spectrum{
    padding-top:0;
  }

  .spectrum .spectrum-line,
  .spectrum .spectrum-labels{
    grid-template-columns:repeat(4,minmax(72px,1fr));
    overflow-x:auto;
    padding-bottom:4px;
  }

  .spectrum-card{
    min-height:0;
  }

  .spectrum-card dl{
    grid-template-columns:1fr;
  }

  .spectrum-device-groups{
    grid-template-columns:1fr;
  }
}

.studio-head{
  gap:24px;
}

.studio-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}

.studio-actions .save-status{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--muted);
  margin-right:0;
  white-space:nowrap;
}

.studio-actions .save-status .live-dot{
  margin-right:0;
}

.studio-actions .secondary-action,
.studio-actions .primary-action{
  min-height:52px;
  min-width:0;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.studio-actions .primary-action{
  min-width:210px;
  gap:8px;
}

@media(max-width:1100px){
  .studio-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .studio-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media(max-width:800px){
  .studio-actions .secondary-action,
  .studio-actions .primary-action,
  .studio-actions .save-status{
    width:100%;
  }
}

@media(max-width:800px){
  .media-slide .video-grid video{
    aspect-ratio:1080 / 1434;
    height:auto;
    object-fit:contain;
  }

  .media-slide .video-grid figure:first-child video{
    aspect-ratio:1080 / 1446;
  }

  .media-slide .media-action-row{
    display:grid;
    gap:14px;
    margin-top:18px;
    font:9px/1.45 var(--mono);
    letter-spacing:.06em;
    color:var(--muted);
  }

  .media-slide .media-action-row .primary-action{
    width:100%;
    justify-content:center;
    background:var(--blue);
    color:#fff;
    padding:16px 18px;
  }
}

.primary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  min-width:220px;
  padding:18px 24px;
  border:1px solid var(--blue);
  background:var(--blue);
  color:#fff;
  font:700 12px var(--mono);
  letter-spacing:.06em;
  box-shadow:0 14px 30px rgba(8,120,249,.18);
}

.primary-action:hover{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
}

.primary-action span{
  color:#fff;
}

body.has-glance-cursor,
body.has-glance-cursor *{
  cursor:none!important;
}

body.has-glance-cursor textarea,
body.has-glance-cursor input,
body.has-glance-cursor select{
  cursor:text!important;
}

.glance-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .16s ease;
}

.glance-cursor.is-visible{
  opacity:1;
}

.glance-cursor:before,
.glance-cursor:after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:0;
}

.glance-cursor:before{
  border:1px solid rgba(8,120,249,.72);
  box-shadow:0 0 0 6px rgba(8,120,249,.08),0 0 22px rgba(23,212,228,.24);
}

.glance-cursor:after{
  inset:12px;
  background:var(--blue);
  box-shadow:0 0 12px rgba(8,120,249,.72);
}

.glance-cursor span{
  position:absolute;
  left:50%;
  top:50%;
  width:54px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(23,212,228,.75),transparent);
  transform:translate(-50%,-50%);
}

.glance-cursor span:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:54px;
  background:linear-gradient(180deg,transparent,rgba(23,212,228,.75),transparent);
  transform:translate(-50%,-50%);
}

.glance-cursor.is-pinching:before{
  transform:scale(.68);
  border-color:var(--yellow);
  box-shadow:0 0 0 10px rgba(229,244,107,.12),0 0 24px rgba(229,244,107,.34);
}

.glance-cursor.is-pinching:after{
  background:var(--yellow);
}

.gesture-slide .gesture-layout{
  flex:1;
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(520px,1.08fr);
  gap:clamp(38px,5vw,72px);
  align-items:center;
  padding:clamp(24px,4vh,46px) 0;
}

.gesture-copy h2{
  font-size:clamp(46px,5.1vw,74px);
  max-width:660px;
}

.gesture-copy .lede{
  max-width:560px;
}

.input-stack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.input-stack span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  color:var(--blue);
  padding:9px 11px;
  font:10px var(--mono);
  letter-spacing:.08em;
}

.gesture-board{
  display:grid;
  grid-template-rows:auto auto;
  gap:16px;
  min-width:0;
}

.signal-visualizer{
  position:relative;
  min-height:250px;
  background:#101522;
  color:#fff;
  border:1px solid #283144;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(16,21,34,.12);
}

.signal-visualizer[data-gesture="scroll"]{--signal-angle:4deg;--signal-color:var(--cyan)}
.signal-visualizer[data-gesture="drag"]{--signal-angle:-4deg;--signal-color:var(--blue)}
.signal-visualizer[data-gesture="back"]{--signal-angle:8deg;--signal-color:var(--yellow)}
.signal-visualizer[data-gesture="wake"]{--signal-angle:-8deg;--signal-color:#fff}
.signal-visualizer[data-gesture="twist"]{--signal-angle:16deg;--signal-color:var(--cyan)}
.signal-visualizer[data-gesture="ai"]{--signal-angle:-16deg;--signal-color:var(--yellow)}

.signal-head,
.signal-footer{
  position:absolute;
  left:18px;
  right:18px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:10px var(--mono);
  letter-spacing:.1em;
}

.signal-head{
  top:16px;
  color:#a7b1c1;
}

.signal-head b{
  color:var(--yellow);
}

.signal-footer{
  bottom:16px;
  color:#a7b1c1;
}

.signal-footer strong{
  color:var(--cyan);
}

.signal-field{
  position:absolute;
  inset:48px 26px;
  overflow:hidden;
}

.signal-field:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(23,212,228,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,212,228,.12) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.45;
}

.signal-field i{
  position:absolute;
  left:-8%;
  right:-8%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--signal-color,var(--yellow)),var(--cyan),transparent);
  opacity:.72;
  filter:drop-shadow(0 0 10px rgba(23,212,228,.45));
  transform-origin:center;
  animation:signalSweep 2.4s linear infinite;
}

.signal-field i:nth-of-type(1){transform:translateY(-62px) rotate(calc(2deg + var(--signal-angle,0deg)));animation-delay:-.2s}
.signal-field i:nth-of-type(2){transform:translateY(-34px) rotate(calc(-1deg + var(--signal-angle,0deg)));animation-delay:-.55s}
.signal-field i:nth-of-type(3){transform:translateY(-8px) rotate(calc(1deg + var(--signal-angle,0deg)));animation-delay:-.9s}
.signal-field i:nth-of-type(4){transform:translateY(20px) rotate(calc(-2deg + var(--signal-angle,0deg)));animation-delay:-1.25s}
.signal-field i:nth-of-type(5){transform:translateY(48px) rotate(calc(1.5deg + var(--signal-angle,0deg)));animation-delay:-1.6s}
.signal-field i:nth-of-type(6){transform:translateY(74px) rotate(calc(-1.5deg + var(--signal-angle,0deg)));animation-delay:-1.95s}

.signal-node{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 10px rgba(229,244,107,.08),0 0 28px rgba(229,244,107,.56);
  z-index:1;
}

.node-a{left:16%;top:30%}
.node-b{left:56%;top:48%}
.node-c{right:12%;bottom:22%}

.pinch-burst{
  position:absolute;
  left:50%;
  top:50%;
  width:84px;
  height:84px;
  border:1px solid var(--yellow);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:pinchBurst 1.6s ease-out infinite;
}

@keyframes signalSweep{
  0%{clip-path:inset(0 100% 0 0)}
  45%,65%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 0 100%)}
}

@keyframes pinchBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  28%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}

.gesture-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.gesture-list button{
  min-width:0;
  border:1px solid var(--line);
  background:rgba(255,255,255,.68);
  color:inherit;
  padding:14px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  text-align:left;
  cursor:pointer;
}

.gesture-list button:hover,
.gesture-list button.is-active{
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 12px 26px rgba(8,120,249,.1);
}

.gesture-list b{
  color:var(--blue);
  font:11px var(--mono);
}

.gesture-list strong{
  display:block;
  color:var(--ink);
  font:700 17px var(--display);
  letter-spacing:-.02em;
  white-space:normal;
}

.gesture-list span{
  display:block;
  min-width:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.gesture-list button.is-active span{
  color:var(--ink);
}

.docs-links{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22);
  display:grid;
  gap:8px;
}

.docs-links span{
  color:var(--yellow);
  font:700 9px var(--mono);
  letter-spacing:.1em;
}

.docs-links a{
  color:rgba(255,255,255,.76);
  font:10px var(--mono);
  letter-spacing:.06em;
  text-decoration:none;
}

.docs-links a:hover{
  color:var(--yellow);
}

@media(max-width:800px){
  .primary-action{
    width:100%;
    min-width:0;
    min-height:52px;
    padding:16px 18px;
  }

  .glance-cursor{
    display:none;
  }

  .gesture-slide .gesture-layout{
    grid-template-columns:1fr;
    gap:32px;
    padding:44px 0;
  }

  .gesture-board{
    grid-template-columns:1fr;
  }

  .signal-visualizer{
    min-height:220px;
  }

  .gesture-list{
    grid-template-columns:1fr;
  }

  .gesture-list strong{
    font-size:16px;
  }
}

.flow-board{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.lab-main{
  max-width:none;
}

.lab-workbench{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(220px,.76fr);
  gap:16px;
  margin-top:34px;
}

.lab-main #labContent>.lab-workbench,
.lab-main #labContent>.flow-board{
  grid-column:1/-1;
}

.lab-workbench .lab-code-panel{
  grid-column:auto;
  grid-row:auto;
  align-self:stretch;
  margin-top:0;
  min-width:0;
}

.lab-code-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.lab-code{
  min-height:360px;
  max-height:430px;
  overflow:auto;
}

.lab-code code{
  white-space:pre-wrap;
}

.lab-code mark{
  background:rgba(229,244,107,.2);
  color:var(--yellow);
  border-bottom:1px solid rgba(229,244,107,.75);
}

.lab-code .code-tag{
  color:#54b5ff;
}

.lab-code .code-attr{
  color:var(--yellow);
}

.lab-code .code-value{
  color:#8be9a6;
}

.sample-display{
  min-height:360px;
  padding:18px;
  background:#101522;
  border:1px solid #283144;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}

.sample-display:before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(23,212,228,.28);
  border-radius:28px 28px 74px 74px;
  pointer-events:none;
}

.sample-screen{
  width:min(100%,280px);
  aspect-ratio:1;
  border:1px solid rgba(23,212,228,.44);
  background:#000;
  color:#fff;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.sample-kicker{
  color:var(--cyan);
  font:9px var(--mono);
  letter-spacing:.12em;
}

.sample-screen h3{
  font:800 32px/.92 var(--display);
  letter-spacing:-.04em;
  margin-top:18px;
}

.sample-screen p{
  color:#a7b1c1;
  font-size:13px;
  line-height:1.45;
  margin-top:12px;
}

.sample-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:24px;
}

.sample-badges span{
  border:1px solid rgba(23,212,228,.42);
  color:var(--cyan);
  padding:6px 7px;
  font:8px var(--mono);
  letter-spacing:.08em;
}

.sample-display[data-phase="preflight"] .sample-screen{
  background:linear-gradient(145deg,#02050b,#071b2f);
}

.sample-display[data-phase="display"] .sample-screen,
.sample-display[data-phase="input"] .sample-screen{
  border-color:var(--blue);
}

.sample-display[data-phase="ship"] .sample-screen{
  border-color:var(--yellow);
}

.flow-meter{
  grid-column:1/-1;
  display:grid;
  gap:9px;
  color:var(--muted);
  font:10px var(--mono);
  letter-spacing:.08em;
}

.flow-meter span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.flow-meter b,
.flow-meter em{
  font:inherit;
  font-style:normal;
}

.flow-meter em{
  color:var(--blue);
}

.flow-meter i{
  display:block;
  height:4px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}

.flow-meter i:after{
  content:"";
  position:absolute;
  inset:0;
  width:var(--flow-progress);
  background:var(--blue);
  transition:width .25s ease;
}

.flow-card{
  min-height:108px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.58);
  color:var(--ink);
  padding:15px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr auto;
  gap:9px 12px;
  text-align:left;
  cursor:pointer;
}

.flow-card b{
  color:var(--blue);
  font:10px var(--mono);
}

.flow-card span{
  grid-column:2;
  font-size:13px;
  line-height:1.35;
}

.flow-card em{
  grid-column:2;
  color:var(--muted);
  font:9px var(--mono);
  letter-spacing:.08em;
  font-style:normal;
  text-transform:uppercase;
}

.flow-card:hover,
.flow-card.is-active{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
  box-shadow:0 14px 28px rgba(8,120,249,.18);
}

.flow-card:hover b,
.flow-card:hover em,
.flow-card.is-active b,
.flow-card.is-active em{
  color:#fff;
}

@media(max-width:800px){
  .docs-links{
    margin-top:30px;
  }

  .lab-workbench{
    grid-template-columns:1fr;
  }

  .flow-board{
    grid-template-columns:1fr;
  }
}

/* Lab layout cleanup */
.app-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.app-container>main{
  flex:1 0 auto;
}

#lab.view.is-visible{
  display:block;
  height:auto;
  min-height:calc(100vh - 124px);
  overflow:visible;
}

#lab .lab-layout{
  min-height:calc(100vh - 124px);
  height:auto;
  align-items:stretch;
}

#lab .lab-main{
  display:flex;
  flex-direction:column;
  padding:clamp(34px,4vw,58px) clamp(32px,5vw,72px) 48px;
}

#lab #labContent{
  display:block!important;
  padding-top:clamp(28px,4vh,46px);
  width:100%;
}

#lab #labContent h1{
  max-width:980px;
  font-size:clamp(42px,4.4vw,66px);
}

#lab .lab-lede{
  max-width:880px;
  margin-top:18px;
  font-size:16px;
}

#lab .lab-workbench{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  margin-top:30px;
  align-items:stretch;
}

#lab .lab-workbench .lab-code-panel{
  margin:0;
  min-width:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);
  height:clamp(520px,58vh,720px);
  overflow:hidden;
  transition:grid-template-rows .35s ease;
}

#lab .lab-workbench .lab-code-panel[data-expanded="split"]{
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);
}

#lab .lab-workbench .lab-code-panel[data-expanded="code"]{
  grid-template-rows:auto minmax(0,1fr) auto;
}

#lab .lab-workbench .lab-code-panel[data-expanded="prompt"]{
  grid-template-rows:auto 0fr minmax(0,1fr);
}

#lab .lab-code-head{
  min-height:58px;
  padding:12px 16px;
}

#lab .lab-code-head,
.ai-prompt-head{
  cursor:pointer;
  user-select:none;
}

#lab .lab-code-head span,
.ai-prompt-head span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1;
}

.panel-chevron{
  position:relative;
  width:14px;
  height:14px;
  flex:0 0 14px;
  opacity:.62;
  transition:opacity .28s ease,color .28s ease,transform .28s ease;
  animation:chevronNudgeDown 1.8s ease-in-out infinite;
}

.panel-chevron:before,
.panel-chevron:after{
  content:"";
  position:absolute;
  top:6px;
  width:8px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

.panel-chevron:before{
  left:1px;
  transform:rotate(45deg);
}

.panel-chevron:after{
  right:1px;
  transform:rotate(-45deg);
}

.ai-prompt-head .panel-chevron{
  transform:rotate(180deg);
  animation-name:chevronNudgeUp;
}

@keyframes chevronNudgeDown{
  0%,100%{translate:0 0}
  50%{translate:0 1.5px}
}

@keyframes chevronNudgeUp{
  0%,100%{translate:0 0}
  50%{translate:0 -1.5px}
}

#lab .lab-code-head:focus-visible,
.ai-prompt-head:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:-2px;
}

#lab .lab-code-panel[data-expanded="code"] .lab-code-head,
#lab .lab-code-panel[data-expanded="prompt"] .ai-prompt-head{
  color:#fff;
}

#lab .lab-code-panel[data-expanded="code"] .lab-code-head .panel-chevron,
#lab .lab-code-panel[data-expanded="prompt"] .ai-prompt-head .panel-chevron{
  color:var(--yellow);
  opacity:1;
}

#lab .lab-code-panel[data-expanded="code"] .lab-code-head .panel-chevron{
  transform:rotate(180deg);
}

#lab .lab-code-panel[data-expanded="prompt"] .ai-prompt-head .panel-chevron{
  transform:rotate(0deg);
}

#lab .lab-code-panel[data-expanded="code"] .lab-code-head span:after,
#lab .lab-code-panel[data-expanded="prompt"] .ai-prompt-head span:after{
  content:" · EXPANDED";
  color:var(--yellow);
}

#lab .lab-code-panel[data-expanded="prompt"] .lab-code,
#lab .lab-code-panel[data-expanded="code"] .ai-prompt{
  padding-top:0;
  padding-bottom:0;
  opacity:0;
}

#lab .lab-code-panel[data-expanded="code"] .ai-prompt{
  flex:0 1 0;
  height:0;
  min-height:0;
  border-top:0;
  overflow:hidden;
}

#lab .lab-code-panel[data-expanded="prompt"] .lab-code{
  height:0;
  min-height:0;
  border-left-width:0;
  overflow:hidden;
}

#lab .copy-step-code{
  flex:0 0 auto;
  min-width:104px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#lab .copy-ai-prompt{
  flex:0 0 auto;
  min-width:120px;
  min-height:34px;
  border:1px solid #40516b;
  background:transparent;
  color:#fff;
  padding:7px 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:10px var(--mono);
  cursor:pointer;
}

#lab .copy-ai-prompt:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

#lab .lab-code{
  min-height:0;
  height:auto;
  max-height:none;
  padding:18px;
  font-size:clamp(10px,.72vw,12px);
  line-height:1.55;
}

.ai-prompt-panel{
  border-top:1px solid #283144;
  background:#0d1420;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.ai-prompt-head{
  min-height:48px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#a7b1c1;
  font:10px var(--mono);
  letter-spacing:.08em;
}

.ai-prompt{
  flex:1 1 auto;
  min-height:0;
  height:100%;
  margin:0;
  padding:14px 18px 18px;
  overflow:auto;
  color:#d8e3f0;
  font:11px/1.55 var(--mono);
  white-space:pre-wrap;
  border-top:1px solid #1f2a3c;
}

#lab .lab-code,
.ai-prompt{
  transition:opacity .24s ease,padding .35s ease;
}

#lab .sample-display{
  min-height:0;
  height:clamp(520px,58vh,720px);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#lab .sample-display:before{
  inset:20px;
  border-radius:42px 42px 92px 92px;
}

.lab-preview-meta{
  width:min(100%,560px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  color:#a7b1c1;
  font:9px var(--mono);
  letter-spacing:.08em;
  position:relative;
  z-index:1;
}

.lab-preview-meta strong{
  color:var(--yellow);
  font:inherit;
}

.lab-preview-viewport{
  width:min(100%,560px);
  height:auto;
  aspect-ratio:1;
  flex:0 0 auto;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(23,212,228,.48);
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
}

.lab-preview-frame{
  width:600px;
  height:600px;
  max-width:none;
  max-height:none;
  border:0;
  display:block;
  transform-origin:top left;
  background:#000;
}

#lab .sample-screen{
  width:min(100%,360px);
  max-height:100%;
  padding:22px;
  justify-content:flex-start;
  overflow:hidden;
}

.sample-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.sample-count{
  color:var(--yellow);
  font:10px var(--mono);
  letter-spacing:.08em;
}

#lab .sample-screen h3{
  font-size:clamp(30px,2.5vw,46px);
  line-height:.96;
  margin-top:18px;
}

#lab .sample-screen p{
  margin-top:10px;
  font-size:12px;
}

.sample-checks{
  display:grid;
  gap:8px;
  margin-top:18px;
  list-style:none;
}

.sample-checks li{
  display:grid;
  grid-template-columns:14px 1fr;
  align-items:center;
  gap:8px;
  color:#8190a6;
  font:9px/1.25 var(--mono);
  letter-spacing:.03em;
}

.sample-checks i{
  width:12px;
  height:12px;
  border:1px solid rgba(23,212,228,.55);
  display:block;
}

.sample-checks li.is-active{
  color:#fff;
}

.sample-checks li.is-active i{
  background:var(--cyan);
  box-shadow:0 0 14px rgba(23,212,228,.52);
}

#lab .sample-badges{
  margin-top:auto;
  padding-top:18px;
}

.sample-controls{
  display:flex;
  gap:8px;
  margin-top:14px;
}

.sample-controls span{
  border:1px solid rgba(255,255,255,.22);
  color:#a7b1c1;
  padding:6px 8px;
  font:8px var(--mono);
}

#lab .flow-board{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}

#lab .flow-card{
  min-height:96px;
  padding:14px;
}

#lab .flow-card span{
  font-size:12px;
}

#lab .lab-callout{
  margin-top:24px;
  align-items:center;
  min-height:76px;
  overflow:hidden;
}

#lab .lab-footer{
  margin-top:38px;
  padding-top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

#lab .lab-footer .secondary-action,
#lab .lab-footer .primary-action{
  width:auto;
  min-width:190px;
  min-height:58px;
  padding:18px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#lab .lab-footer .secondary-action{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  box-shadow:none;
}

.global-footer{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  overflow:hidden;
}

.global-footer span{
  white-space:nowrap;
}

.global-footer a{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
}

.global-footer a:hover{
  text-decoration:underline;
}

@media(max-width:1100px){
  #lab .lab-workbench{
    grid-template-columns:1fr;
  }

  #lab .lab-workbench .lab-code-panel,
  #lab .sample-display{
    height:auto;
    min-height:520px;
  }

  #lab .lab-code{
    min-height:300px;
  }

  .ai-prompt{
    min-height:180px;
  }

  #lab .flow-board{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:800px){
  #lab .lab-main{
    padding:30px 20px 42px;
  }

  #lab .flow-board{
    grid-template-columns:1fr;
  }

  #lab .lab-footer{
    display:grid;
  }

  #lab .lab-footer .secondary-action,
  #lab .lab-footer .primary-action{
    width:100%;
  }
}

@media(min-width:801px){
  #lab.view.is-visible{
    display:block;
    height:calc(100vh - 124px);
    min-height:0;
    overflow:hidden;
  }

  #lab .lab-layout{
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  #lab .lab-sidebar{
    min-height:0;
    overflow:hidden;
    padding-top:clamp(26px,3vh,42px);
    padding-bottom:clamp(20px,3vh,34px);
  }

  #lab .lab-sidebar h2{
    font-size:clamp(40px,4vw,52px);
  }

  #lab .side-copy{
    margin-top:16px;
  }

  #lab .lab-steps{
    margin-top:clamp(24px,4vh,42px);
  }

  #lab .lab-steps button{
    padding:10px 0;
  }

  #lab .docs-links{
    padding-top:14px;
    gap:6px;
  }

  #lab .lab-main{
    height:100%;
    min-height:0;
    overflow:hidden;
    padding:clamp(22px,3vh,34px) clamp(28px,4.2vw,60px) clamp(20px,3vh,34px);
  }

  #lab .lab-header,
  #lab .lab-footer{
    flex:0 0 auto;
  }

  #lab .lab-header{
    padding-bottom:14px;
  }

  #lab #labContent{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    row-gap:clamp(10px,1.6vh,18px);
    padding-top:clamp(16px,2vh,26px);
  }

  #lab #labContent h1{
    font-size:clamp(32px,3.4vw,52px);
    line-height:.94;
  }

  #lab .lab-lede{
    margin-top:0;
    max-width:820px;
    font-size:clamp(13px,1vw,15px);
    line-height:1.35;
  }

  #lab .lab-workbench{
    height:100%;
    min-height:0;
    margin-top:0;
    gap:18px;
    align-items:stretch;
  }

  #lab .lab-workbench .lab-code-panel,
  #lab .sample-display{
    height:100%;
    min-height:0;
  }

  #lab .lab-workbench .lab-code-panel{
    grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);
  }

  #lab .lab-workbench .lab-code-panel[data-expanded="split"]{
    grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);
  }

  #lab .lab-workbench .lab-code-panel[data-expanded="code"]{
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  #lab .lab-workbench .lab-code-panel[data-expanded="prompt"]{
    grid-template-rows:auto 0fr minmax(0,1fr);
  }

  #lab .lab-code-head,
  .ai-prompt-head{
    min-height:44px;
    padding:9px 14px;
  }

  #lab .copy-step-code,
  #lab .copy-ai-prompt{
    min-height:32px;
  }

  #lab .lab-code,
  .ai-prompt{
    min-height:0;
    height:100%;
    overflow:auto;
    padding:12px 14px;
    font-size:10px;
    line-height:1.42;
  }

  #lab .sample-display{
    padding:14px;
  }

  #lab .sample-display:before{
    inset:14px;
  }

  .lab-preview-meta{
    margin-bottom:8px;
  }

  .lab-preview-viewport{
    width:min(100%,42vh,430px);
  }

  #lab .flow-board{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:0;
  }

  #lab .flow-card{
    min-height:66px;
    padding:10px;
  }

  #lab .flow-card span{
    font-size:11px;
    line-height:1.2;
  }

  #lab .flow-card em{
    font-size:8px;
  }

  #lab .lab-callout{
    min-height:54px;
    margin-top:0;
    padding:12px 16px;
    font-size:12px;
  }

  #lab .lab-footer{
    margin-top:clamp(14px,2vh,24px);
  }

  #lab .lab-footer .secondary-action,
  #lab .lab-footer .primary-action{
    min-height:48px;
    min-width:170px;
    padding:14px 20px;
  }
}

/* Studio action bar cleanup: template selection lives in the sidebar. */
.view#studio .studio-head{
  gap:24px;
}

.view#studio .studio-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
  margin-top:0;
}

.view#studio .studio-actions .save-status{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--muted);
  margin-right:0;
  white-space:nowrap;
}

.view#studio .studio-actions .save-status .live-dot{
  margin-right:0;
}

.view#studio .studio-actions .secondary-action,
.view#studio .studio-actions .primary-action{
  min-height:52px;
  min-width:0;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.view#studio .studio-actions .primary-action{
  min-width:210px;
  gap:8px;
}

@media(max-width:1100px){
  .view#studio .studio-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .view#studio .studio-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media(max-width:800px){
  .view#studio .studio-actions .secondary-action,
  .view#studio .studio-actions .primary-action,
  .view#studio .studio-actions .save-status{
    width:100%;
  }
}

/* Mobile polish: preserve the desktop deck, but let small screens stack cleanly. */
@media(max-width:800px){
  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

  .app-container{
    min-height:100svh;
    overflow-x:hidden;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:20;
    min-height:0;
    padding:12px 14px;
    gap:10px;
  }

  .brand{
    min-width:0;
  }

  .brand strong{
    font-size:11px;
  }

  .brand small{
    font-size:8px;
  }

  .event-link{
    margin-left:auto;
    padding:9px 10px;
  }

  .mode-nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    gap:2px;
    padding-top:8px;
    scrollbar-width:none;
  }

  .mode-nav::-webkit-scrollbar{
    display:none;
  }

  .mode-btn{
    flex:0 0 auto;
    padding:10px 9px;
    font-size:9px;
    white-space:nowrap;
  }

  .view,
  .view.is-visible{
    min-height:calc(100svh - 118px);
  }

  .deck-layout,
  .lab-layout{
    display:block;
    min-height:0;
  }

  .deck-rail{
    position:sticky;
    top:118px;
    z-index:10;
    padding:12px 14px;
    background:rgba(244,246,248,.94);
    backdrop-filter:blur(14px);
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .rail-label{
    display:none;
  }

  .slide-list{
    display:flex;
    gap:10px;
    margin-top:0;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .slide-list::-webkit-scrollbar{
    display:none;
  }

  .slide-nav{
    min-width:126px;
    grid-template-columns:auto 1fr;
    gap:7px;
    padding:8px 10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.72);
  }

  .slide-nav.is-active{
    border-color:var(--blue);
    background:var(--white);
  }

  .slide-nav strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .slide-stage{
    min-height:0;
    height:auto;
    overflow:visible;
    padding:20px 16px 74px;
  }

  .slide{
    min-height:calc(100svh - 230px);
  }

  .slide-top,
  .slide-bottom{
    gap:12px;
    font-size:8px;
    line-height:1.35;
  }

  .slide-top span:last-child,
  .slide-bottom span:last-child{
    text-align:right;
  }

  .hero-copy{
    margin:58px 0 30px;
  }

  .hero-copy h1,
  .slide h2{
    font-size:clamp(42px,18vw,68px);
    line-height:.92;
  }

  .hero-note,
  .lede{
    margin-top:20px;
    font-size:15px;
    line-height:1.48;
  }

  .eyebrow{
    margin-bottom:16px;
    font-size:9px;
  }

  .split-slide,
  .principles,
  .final-slide{
    grid-template-columns:1fr;
    gap:26px;
    padding:34px 0;
  }

  .hero-image-slide .hero-bg{
    inset:-10px;
  }

  .hero-image-slide .hero-copy,
  .hero-image-slide .hero-signal{
    max-width:100%;
  }

  .hero-signal{
    margin-top:30px;
  }

  .spectrum .spectrum-line,
  .spectrum .spectrum-labels{
    grid-template-columns:repeat(4,minmax(86px,1fr));
    overflow-x:auto;
  }

  .spectrum-card{
    padding:15px;
  }

  .spectrum-card h3{
    font-size:28px;
  }

  .spectrum-card dl{
    grid-template-columns:1fr;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .product{
    min-height:0;
  }

  .loop-grid{
    grid-template-columns:1fr 1fr;
    margin-top:30px;
  }

  .loop-grid div{
    border-bottom:1px solid var(--line);
  }

  .gesture-slide .gesture-layout{
    grid-template-columns:1fr;
    gap:22px;
    padding:30px 0;
  }

  .gesture-copy .lede{
    max-width:none;
  }

  .input-stack{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .signal-visualizer{
    min-height:320px;
  }

  .gesture-list{
    max-height:none;
    overflow:visible;
  }

  .media-intro{
    display:block;
    margin:34px 0 20px;
  }

  .media-intro h2{
    font-size:clamp(38px,15vw,58px);
  }

  .media-note{
    display:block;
    margin-top:14px;
    text-align:left;
  }

  .video-grid{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .video-grid figure:nth-child(n),
  .video-grid figure:last-child{
    grid-column:auto;
    max-width:none;
  }

  .video-grid video{
    aspect-ratio:1080 / 1434;
    object-fit:cover;
    border-radius:12px;
  }

  .video-grid figcaption{
    white-space:normal;
    line-height:1.35;
  }

  .media-action-row{
    margin-top:18px;
    font-size:9px;
  }

  .handoff-slide .final-slide{
    position:relative;
    inset:auto;
    padding:34px 0;
  }

  .handoff-slide .final-slide > div:first-child{
    max-width:100%;
    height:auto;
    padding-top:0;
  }

  .handoff-slide .final-slide .primary-action{
    width:100%;
    justify-content:center;
  }

  .handoff-slide .final-image{
    position:relative;
    inset:auto;
    aspect-ratio:16/10;
    margin-top:18px;
    overflow:hidden;
  }

  .handoff-slide .final-image img{
    object-position:center;
  }

  .slide-controls{
    position:fixed;
    left:14px;
    right:14px;
    bottom:12px;
    z-index:30;
    padding:8px;
    background:rgba(244,246,248,.92);
    backdrop-filter:blur(14px);
    border:1px solid var(--line);
  }

  .lab-sidebar{
    padding:26px 18px 20px;
  }

  .lab-sidebar h2{
    font-size:clamp(38px,13vw,52px);
  }

  .side-copy{
    margin-top:14px;
  }

  .lab-steps{
    display:flex;
    overflow-x:auto;
    gap:8px;
    margin-top:22px;
    scrollbar-width:none;
  }

  .lab-steps::-webkit-scrollbar{
    display:none;
  }

  .lab-steps button{
    flex:0 0 150px;
    align-items:flex-start;
    border:1px solid rgba(255,255,255,.22);
    padding:12px;
  }

  .docs-links{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:18px;
  }

  .lab-main{
    min-height:0;
    padding:24px 16px 30px;
  }

  #labContent{
    padding-top:28px;
  }

  #labContent h1{
    font-size:clamp(36px,13vw,54px);
  }

  .lab-lede{
    font-size:15px;
  }

  #lab .lab-workbench{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  #lab .lab-workbench .lab-code-panel{
    min-height:440px;
  }

  #lab .lab-workbench .lab-code-panel[data-expanded="code"],
  #lab .lab-workbench .lab-code-panel[data-expanded="prompt"]{
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  #lab .lab-workbench .lab-code-panel[data-expanded="prompt"]{
    grid-template-rows:auto 0fr minmax(0,1fr);
  }

  #lab .lab-code-panel[data-expanded="prompt"] .lab-code{
    height:0;
    min-height:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
    border-left-width:0;
  }

  #lab .lab-code-panel[data-expanded="code"] .ai-prompt{
    height:0;
    min-height:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
  }

  #lab .sample-display{
    min-height:0;
    padding:12px;
  }

  .lab-preview-viewport{
    width:min(100%,360px);
  }

  #lab .flow-board{
    grid-template-columns:1fr;
    gap:8px;
  }

  #lab .flow-card{
    min-height:58px;
  }

  #lab .lab-footer{
    position:sticky;
    bottom:0;
    z-index:15;
    gap:10px;
    padding-top:16px;
    padding-bottom:10px;
    background:linear-gradient(180deg,rgba(244,246,248,0),var(--paper) 24%);
  }

  .studio-template-layout{
    display:flex!important;
    flex-direction:column;
    min-height:0;
  }

  .view#studio{
    height:auto;
    min-height:calc(100svh - 118px);
  }

  .view#studio .studio-head{
    padding:30px 16px 22px;
  }

  .view#studio .studio-head h2{
    font-size:clamp(38px,13vw,56px);
  }

  .template-rail{
    padding:16px;
  }

  .template-card{
    min-height:58px;
  }

  .studio-template-layout .editor-panel{
    min-height:420px;
  }

  .studio-template-layout .sim-panel{
    min-height:580px;
  }

  .studio-template-layout .sim-wrap{
    min-height:390px;
  }

  .studio-template-layout .glasses-frame,
  .view#studio .glasses-frame{
    width:min(86vw,360px)!important;
    max-width:calc(100vw - 36px);
  }

  .display-controls,
  .sim-controls{
    height:auto;
    min-height:54px;
    flex-wrap:wrap;
  }

  .sim-controls button{
    min-width:44px;
    min-height:36px;
  }

  .global-footer{
    padding:12px 16px;
    gap:8px 14px;
  }
}

@media(max-width:520px){
  .topbar{
    top:0;
  }

  .deck-rail{
    top:112px;
  }

  .slide{
    min-height:calc(100svh - 220px);
  }

  .hero-copy h1,
  .slide h2{
    font-size:clamp(38px,17vw,58px);
  }

  .hero-copy{
    margin-top:42px;
  }

  .video-grid{
    grid-template-columns:1fr;
  }

  .video-grid video{
    max-height:70svh;
  }

  .principle-list div{
    grid-template-columns:34px 1fr;
  }

  .loop-grid{
    grid-template-columns:1fr;
  }

  .loop-grid div{
    border-right:0;
  }

  .lab-header{
    gap:10px;
    flex-direction:column;
  }

  .docs-links{
    grid-template-columns:1fr;
  }

  #lab .lab-footer{
    flex-direction:column;
  }

  #lab .lab-footer .secondary-action,
  #lab .lab-footer .primary-action{
    width:100%;
  }

  .studio-actions{
    width:100%;
  }

  .scene-grid{
    left:12px;
    right:12px;
    top:12px;
    flex-wrap:wrap;
  }

  .scene-grid button{
    flex:1 1 30%;
  }
}

/* Responsive hardening: keep every surface inside the viewport without changing the desktop composition. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

*{
  min-width:0;
}

img,
video,
canvas,
iframe:not(.lab-preview-frame),
svg{
  max-width:100%;
}

button,
a,
input,
select,
textarea{
  max-width:100%;
}

.app-container,
.app-container > main,
.view,
.deck-layout,
.slide-stage,
.slide,
.lab-layout,
.lab-main,
#labContent,
.lab-workbench,
.lab-code-panel,
.studio-template-layout,
.editor-panel,
.sim-panel,
.template-rail{
  min-width:0;
}

.slide h1,
.slide h2,
.hero-copy h1,
.lab-header h1,
.lab-sidebar h2,
.studio-head h2,
.template-card strong,
.video-caption,
.global-footer span{
  overflow-wrap:anywhere;
}

.lede,
.hero-note,
.side-copy,
.principle-list p,
.spectrum-card p,
.lab-copy,
.field-note,
.studio-head p{
  overflow-wrap:break-word;
}

.view{
  display:none;
}

.view.is-visible{
  display:block;
}

#deck.view.is-visible,
#lab.view.is-visible,
#studio.view.is-visible,
#simulator.view.is-visible{
  display:block;
}

.media-slide .video-grid{
  width:100%;
}

.media-slide .video-grid figure{
  min-width:0;
}

.media-slide .video-grid video{
  width:100%;
  height:auto;
  aspect-ratio:1080 / 1434;
  object-fit:cover;
}

@media (max-width:1300px) and (min-width:801px){
  .topbar{
    padding:0 clamp(18px,2.2vw,34px);
    gap:clamp(10px,1.4vw,20px);
  }

  .brand small{
    display:none;
  }

  .mode-nav{
    max-width:58vw;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }

  .mode-nav::-webkit-scrollbar{
    display:none;
  }

  .mode-nav button{
    flex:0 0 auto;
  }

  .event-link{
    white-space:nowrap;
    padding:14px 16px;
  }

  .deck-layout{
    grid-template-columns:clamp(170px,17vw,230px) minmax(0,1fr);
  }

  .slide-stage{
    padding-inline:clamp(24px,3.8vw,58px);
  }

  .hero-copy h1{
    font-size:clamp(62px,8vw,108px);
  }

  .slide h2{
    font-size:clamp(44px,5.8vw,76px);
  }

  .split-slide,
  .principles,
  .final-slide{
    gap:clamp(24px,4vw,58px);
  }

  .spectrum-detail{
    padding:clamp(22px,3vw,42px);
  }

  .spectrum-device-groups{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .media-slide .video-grid{
    gap:clamp(8px,1vw,14px);
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .gesture-layout{
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
    gap:clamp(22px,3vw,52px);
  }

  .gesture-copy h2{
    font-size:clamp(54px,7.4vw,112px);
  }

  .gesture-list button{
    grid-template-columns:42px minmax(0,1fr);
  }

  .studio-template-layout{
    grid-template-columns:minmax(150px,0.42fr) minmax(300px,0.88fr) minmax(360px,1.05fr);
  }

  .template-card{
    padding:14px;
  }

  .template-card strong{
    font-size:clamp(10px,1vw,14px);
  }

  .studio-actions{
    flex-wrap:wrap;
  }
}

@media (max-width:1000px) and (min-width:801px){
  .topbar{
    grid-template-columns:auto minmax(0,1fr) auto;
  }

  .deck-layout{
    grid-template-columns:150px minmax(0,1fr);
  }

  .deck-rail{
    padding-inline:18px 14px;
  }

  .slide-nav,
  .rail-list button{
    grid-template-columns:32px minmax(0,1fr);
    gap:10px;
    font-size:12px;
  }

  .slide-stage{
    padding-inline:24px;
  }

  .media-slide .video-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .media-slide .video-grid figure:nth-child(n){
    grid-column:auto;
  }

  .studio-template-layout{
    grid-template-columns:160px minmax(0,1fr);
  }

  .studio-template-layout .sim-panel{
    grid-column:1 / -1;
  }

  .global-footer{
    height:auto;
    min-height:46px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding-block:12px;
    text-align:left;
  }

  .global-footer span{
    white-space:normal;
  }
}

@media (max-width:800px){
  .topbar{
    position:sticky;
    top:0;
    z-index:60;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    height:auto;
    min-height:0;
    padding:12px 14px;
    gap:12px;
  }

  .brand{
    min-width:0;
  }

  .brand strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .brand small{
    display:none;
  }

  .event-link{
    justify-self:end;
    padding:10px 12px;
    white-space:nowrap;
  }

  .mode-nav{
    grid-column:1 / -1;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .mode-nav::-webkit-scrollbar{
    display:none;
  }

  .mode-nav button{
    flex:0 0 auto;
    padding-inline:12px;
  }

  .deck-layout{
    display:block;
  }

  .deck-rail{
    position:sticky;
    top:111px;
    z-index:30;
    width:100%;
    height:auto;
    max-height:none;
    padding:10px 14px;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:rgba(246,248,251,0.96);
    backdrop-filter:blur(10px);
  }

  .rail-label,
  .rail-eyebrow,
  .live-mode,
  .scroll-note{
    display:none;
  }

  .slide-list,
  .rail-list{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .slide-list::-webkit-scrollbar,
  .rail-list::-webkit-scrollbar{
    display:none;
  }

  .slide-nav,
  .rail-list button{
    flex:0 0 auto;
    width:auto;
    grid-template-columns:auto;
    padding:8px 12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.82);
    font-size:11px;
  }

  .slide-nav span:first-child,
  .rail-list button span:first-child{
    display:none;
  }

  .slide-stage{
    width:100%;
    min-height:0;
    height:auto;
    padding:18px 16px 92px;
    overflow:visible;
  }

  .slide{
    width:100%;
    height:auto !important;
    min-height:calc(100svh - 210px);
    padding:18px 0 20px;
    overflow:visible;
  }

  .slide.is-active{
    display:flex;
  }

  .slide-top,
  .slide-bottom{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    margin-bottom:18px;
    overflow:hidden;
  }

  .slide-top span,
  .slide-bottom span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .slide-bottom{
    margin-top:24px;
    margin-bottom:0;
    border-top:1px solid var(--line);
    padding-top:14px;
  }

  .hero-image-slide,
  .handoff-slide{
    min-height:calc(100svh - 210px);
  }

  .hero-image-slide .hero-bg,
  .handoff-slide .final-image{
    inset:0;
    width:100%;
  }

  .hero-copy,
  .handoff-slide .final-slide{
    position:relative;
    max-width:100%;
  }

  .hero-copy h1,
  .slide h2{
    font-size:clamp(40px,15vw,68px);
    line-height:0.84;
    max-width:100%;
  }

  .hero-note,
  .slide p.lede{
    font-size:clamp(18px,4.8vw,22px);
    line-height:1.35;
  }

  .hero-note{
    max-width:min(100%,340px);
    margin-left:0;
  }

  .split-slide,
  .principles,
  .final-slide,
  .gesture-layout,
  .field-grid,
  .studio-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:28px;
  }

  .spectrum{
    gap:18px;
  }

  .spectrum-line,
  .spectrum-labels{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .spectrum-line::-webkit-scrollbar,
  .spectrum-labels::-webkit-scrollbar{
    display:none;
  }

  .spectrum-point{
    min-width:78px;
  }

  .spectrum-detail{
    padding:22px;
  }

  .spectrum-card dl,
  .spectrum-device-groups{
    grid-template-columns:1fr !important;
  }

  .product-grid,
  .loop-grid,
  .docs-links{
    grid-template-columns:1fr !important;
  }

  .principle-list div{
    grid-template-columns:34px minmax(0,1fr);
  }

  .media-slide .video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }

  .media-slide .video-grid figure,
  .media-slide .video-grid figure:nth-child(n),
  .media-slide .video-grid figure:last-child{
    grid-column:auto !important;
    max-width:none !important;
  }

  .media-slide .video-grid video{
    max-height:none;
  }

  .media-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .media-action-row{
    width:100%;
  }

  .media-action-row .primary-action{
    width:100%;
  }

  .gesture-copy h2{
    font-size:clamp(46px,15vw,72px);
  }

  .gesture-signal-card{
    min-height:320px;
  }

  .gesture-list button{
    grid-template-columns:38px minmax(0,1fr);
    gap:12px;
  }

  .gesture-list p{
    max-width:none;
  }

  .handoff-slide .final-slide{
    inset:auto !important;
    padding:24px 0 !important;
  }

  .handoff-slide .final-copy{
    max-width:100%;
  }

  .slide-controls{
    left:12px;
    right:12px;
    bottom:12px;
    gap:8px;
  }

  .slide-controls .progress{
    min-width:80px;
    margin-inline:2px;
  }

  #slideCounter{
    white-space:nowrap;
  }

  #lab.view.is-visible,
  #studio.view.is-visible{
    height:auto !important;
    min-height:0;
    overflow:visible !important;
  }

  #lab .lab-layout{
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }

  #lab .lab-sidebar{
    position:relative;
    width:100%;
    height:auto;
    padding:18px 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow:visible;
  }

  #lab .lab-sidebar h2{
    font-size:clamp(38px,12vw,50px);
  }

  #lab .side-copy{
    max-width:calc(100vw - 32px);
    font-size:14px;
  }

  #lab .lab-sidebar > *,
  #lab .lab-main > *,
  #lab #labContent > *{
    max-width:calc(100vw - 32px);
  }

  #lab .lab-sidebar .lab-steps,
  #lab .lab-sidebar .lab-step-list{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
  }

  #lab .lab-sidebar .docs-links{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px;
    overflow:visible;
    padding-bottom:4px;
  }

  #lab .lab-sidebar .docs-links span{
    grid-column:1 / -1;
  }

  #lab .lab-sidebar .lab-steps button,
  #lab .lab-sidebar .lab-step{
    flex:0 0 min(78vw,270px);
  }

  #lab .lab-sidebar .docs-links a{
    flex:0 0 auto;
  }

  #lab .lab-main{
    height:auto !important;
    padding:18px 16px 84px;
    overflow:visible !important;
  }

  #lab #labContent h1{
    font-size:clamp(32px,10.5vw,42px);
    line-height:0.96;
  }

  #lab #labContent{
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }

  #lab .lab-workbench{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px;
  }

  #lab .lab-code-panel{
    height:min(76svh,640px) !important;
    min-height:420px;
    overflow:hidden;
  }

  #lab .code-body,
  #lab .prompt-body{
    overflow:auto;
  }

  #lab .sample-display{
    min-height:0 !important;
    height:auto !important;
    padding:14px;
  }

  #lab .lab-preview-viewport{
    width:min(100%,420px) !important;
    aspect-ratio:1 / 1;
  }

  #lab .flow-board{
    grid-template-columns:1fr !important;
  }

  #lab .lab-footer{
    position:relative;
    inset:auto;
    margin-top:22px;
    padding:0;
    flex-direction:column;
    gap:10px;
  }

  #lab .lab-footer .primary-action,
  #lab .lab-footer .secondary-action{
    width:100%;
  }

  .studio-head{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    padding:22px 16px;
  }

  .studio-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }

  .studio-template-layout{
    display:flex !important;
    flex-direction:column;
    gap:16px;
    padding:0 16px 86px;
  }

  .template-rail{
    width:100%;
    max-height:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .editor-panel,
  .sim-panel{
    width:100%;
  }

  .editor-panel{
    min-height:360px;
  }

  .editor-body{
    overflow:auto;
  }

  .sim-panel{
    min-height:0;
  }

  .sim-wrap{
    height:auto;
    min-height:360px;
    padding:54px 12px 24px;
  }

  .glasses-frame{
    width:min(86vw,420px) !important;
    height:auto !important;
    aspect-ratio:1 / 1;
  }

  .scene-grid{
    left:12px;
    right:12px;
    top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .scene-grid button{
    flex:1 1 30%;
  }

  .display-controls,
  .sim-controls{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .global-footer{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:18px 16px;
    text-align:left;
  }

  .global-footer span{
    white-space:normal;
  }
}

@media (max-width:520px){
  .topbar{
    padding-inline:12px;
  }

  .brand strong{
    max-width:180px;
  }

  .event-link{
    max-width:132px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .deck-rail{
    top:109px;
  }

  .slide-stage{
    padding-inline:12px;
  }

  .slide{
    min-height:calc(100svh - 202px);
  }

  .hero-copy h1,
  .slide h2{
    font-size:clamp(38px,17vw,58px);
  }

  .media-slide .video-grid{
    grid-template-columns:1fr !important;
  }

  .media-slide .video-grid video{
    max-height:72svh;
  }

  .template-rail{
    grid-template-columns:1fr;
  }

  #lab .lab-sidebar h2{
    font-size:clamp(32px,9.5vw,36px);
    line-height:.9;
  }

  #lab .side-copy,
  #lab .lab-lede{
    max-width:min(100%,330px);
    font-size:12px;
    line-height:1.45;
  }

  #lab #labContent h1{
    max-width:calc(100vw - 36px);
    font-size:34px;
    line-height:1;
    letter-spacing:-.04em;
  }

  .slide-controls{
    gap:6px;
  }

  .slide-controls button{
    width:42px;
    height:42px;
  }

  .slide-controls .progress{
    min-width:52px;
  }
}

@media (max-width:380px){
  .mode-nav button{
    font-size:10px;
    padding-inline:10px;
  }

  .event-link{
    display:none;
  }

  .topbar{
    grid-template-columns:1fr;
  }

  .deck-rail{
    top:106px;
  }

  .hero-copy h1,
  .slide h2{
    font-size:clamp(34px,16vw,50px);
  }
}

@media (max-height:760px) and (min-width:801px){
  .slide-stage{
    height:calc(100dvh - 118px);
    overflow:auto;
    padding-bottom:88px;
  }

  .slide{
    min-height:620px;
  }

  .deck-rail{
    overflow:auto;
  }

  .hero-copy h1{
    font-size:clamp(58px,8.2vw,98px);
  }

  .slide h2{
    font-size:clamp(42px,5.6vw,72px);
  }
}

/* Studio codelab controls */
.zip-input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}

.studio-template-layout .template-rail.editor-panel{
  padding:0;
  background:#101522;
  color:#d8e3f0;
}

.template-body{
  min-height:0;
  overflow:auto;
  padding:18px;
}

.studio-template-layout .template-rail p{
  margin:0 0 16px;
  color:#a7b1c1;
}

.studio-template-layout .template-card{
  background:#0d1420;
  border-color:#283144;
  color:#fff;
}

.studio-template-layout .template-card small{
  color:#a7b1c1;
}

.studio-template-layout .template-card:hover,
.studio-template-layout .template-card.is-active{
  border-color:var(--cyan);
  background:#132133;
}

.studio-template-layout .template-note{
  border-color:#283144;
  color:#a7b1c1;
}

.panel-copy{
  min-height:32px;
  border:1px solid #40516b;
  background:transparent;
  color:#fff;
  padding:7px 11px;
  font:10px var(--mono);
  cursor:pointer;
}

.panel-copy:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

.studio-warnings{
  flex:0 0 auto;
  display:grid;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid #283144;
  background:#0d1420;
}

.studio-warnings[hidden]{
  display:none;
}

.studio-warning{
  display:grid;
  gap:3px;
  border-left:3px solid var(--yellow);
  background:rgba(229,244,107,.08);
  padding:9px 11px;
  color:#d8e3f0;
}

.studio-warning.is-danger{
  border-left-color:#ff4d5f;
  background:rgba(255,77,95,.12);
}

.studio-warning strong{
  font:700 10px var(--mono);
  letter-spacing:.08em;
  color:#fff;
  text-transform:uppercase;
}

.studio-warning span{
  font-size:12px;
  line-height:1.35;
  color:#c7d3e3;
}

.studio-warning a{
  color:var(--yellow);
  text-decoration:none;
  white-space:nowrap;
}

.editor-input{
  resize:none;
}

.editor-wrap{
  position:relative;
  overflow:hidden;
  flex:1 1 auto;
  min-height:0;
}

#codeEditor.editor-input,
.code-highlight{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:25px;
  font:14px/1.7 var(--mono);
  letter-spacing:0;
  word-spacing:0;
  tab-size:2;
  white-space:pre;
  overflow:auto;
  border:0;
  outline:0;
}

#codeEditor.editor-input{
  z-index:2;
  resize:none;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:transparent;
  caret-color:#fff;
}

.code-highlight{
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  color:#d6e4f4;
}

.code-highlight span{
  font:inherit;
  letter-spacing:inherit;
  word-spacing:inherit;
  font-style:normal;
  font-weight:400;
}

.syn-comment{
  color:#718096;
}

.syn-meta{
  color:#a7b1c1;
}

.syn-tag{
  color:#54b5ff;
}

.syn-attr,
.syn-property{
  color:#e5f46b;
}

.syn-string{
  color:#8be9a6;
}

.syn-keyword{
  color:#ff8fb8;
}

.syn-api{
  color:#7bdcff;
}

.syn-number{
  color:#f9c46b;
}

.syn-color,
.syn-css-var{
  color:#c7f85f;
}

.syn-selector{
  color:#bba7ff;
}

.syn-punctuation{
  color:#8ea0b8;
}

.syn-css-token,
.syn-js-ident{
  color:#d6e4f4;
}

.gyro-orbit{
  --gyro-pitch:0deg;
  --gyro-roll:0deg;
  position:absolute;
  left:24px;
  bottom:20px;
  z-index:4;
  width:168px;
  min-height:158px;
  display:grid;
  grid-template-rows:1fr auto auto;
  place-items:center;
  gap:7px;
  padding:16px 12px 12px;
  border:1px solid rgba(23,212,228,.28);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(16,21,34,.72),rgba(6,10,18,.48));
  box-shadow:0 18px 42px rgba(0,0,0,.22), inset 0 0 24px rgba(23,212,228,.06);
  cursor:grab;
  touch-action:none;
  user-select:none;
  perspective:520px;
}

.gyro-orbit:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
}

.gyro-orbit.is-dragging{
  cursor:grabbing;
  border-color:rgba(229,244,107,.7);
}

.gyro-stage{
  position:relative;
  width:112px;
  height:104px;
  transform:rotateX(var(--gyro-pitch)) rotateY(var(--gyro-roll));
  transform-style:preserve-3d;
  transition:transform .08s linear;
}

.axis-ring,
.gyro-capsule{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform-style:preserve-3d;
}

.axis-ring{
  width:108px;
  height:108px;
  border:1px solid rgba(23,212,228,.46);
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:.8;
}

.axis-x{
  border-color:rgba(229,244,107,.58);
  transform:translate(-50%,-50%) rotateY(70deg);
}

.axis-y{
  transform:translate(-50%,-50%) rotateX(68deg);
}

.axis-z{
  border-color:rgba(255,255,255,.24);
  transform:translate(-50%,-50%) rotateZ(38deg);
}

.gyro-capsule{
  width:32px;
  height:76px;
  border-radius:999px;
  transform:translate(-50%,-50%) rotateZ(-18deg);
  background:linear-gradient(90deg,#151b27 0 12%,#273143 38%,#0a0d13 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 8px 0 14px rgba(255,255,255,.08), inset -8px 0 18px rgba(0,0,0,.5), 0 0 30px rgba(23,212,228,.16);
}

.gyro-capsule i{
  position:absolute;
  left:50%;
  top:11px;
  width:13px;
  height:13px;
  border-radius:50%;
  transform:translateX(-50%);
  background:var(--yellow);
  box-shadow:0 0 22px rgba(229,244,107,.72);
}

.gyro-orbit small{
  position:relative;
  z-index:2;
  color:var(--cyan);
  font:9px var(--mono);
  letter-spacing:.14em;
  line-height:1;
}

.gyro-orbit:after{
  content:"PITCH + ROLL";
  position:static;
  transform:none;
  color:rgba(255,255,255,.44);
  font:8px var(--mono);
  letter-spacing:.12em;
  white-space:nowrap;
}

.gyro-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}

.gyro-controls>span{
  color:var(--yellow);
}

.gyro-controls input{
  width:68px;
  accent-color:var(--yellow);
}

@media(max-width:1200px){
  .gyro-controls{
    width:100%;
    margin-left:0;
  }
}

@media(max-width:800px){
  .studio-template-layout .template-rail.editor-panel{
    max-height:none;
  }

  .template-body{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .template-body p,
  .template-body .template-note{
    grid-column:1 / -1;
  }

  .studio-template-layout .template-card{
    margin-top:0;
  }

  .gyro-orbit{
    width:86px;
    height:86px;
    left:16px;
    bottom:16px;
  }
}

@media(max-width:520px){
  .template-body{
    grid-template-columns:1fr;
  }

  .gyro-controls{
    display:grid;
    grid-template-columns:1fr;
  }

  .gyro-controls label,
  .gyro-controls input{
    width:100%;
  }
}

/* Keep Studio attached to the footer on desktop. */
@media(min-width:801px){
  .app-container{
    height:100dvh;
    overflow:hidden;
  }

  .app-container>main{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  #studio.view.is-visible{
    display:flex !important;
    flex:1 1 auto;
    height:calc(100dvh - 124px) !important;
    min-height:0 !important;
    overflow:hidden;
  }

  #studio .studio-template-layout{
    flex:1 1 auto;
    height:auto;
    min-height:0;
  }

  #studio .editor-panel,
  #studio .sim-panel,
  #studio .template-rail{
    min-height:0;
  }

  #studio .sim-wrap{
    min-height:0;
  }

  .global-footer{
    margin-top:0;
  }
}

#webcamToggle.is-active{
  background:var(--blue);
  border-color:var(--blue);
}

.display-controls .sim-option{
  margin-left:0;
}