:root{color-scheme:dark only;--ink:#f3eeeb;--red:#ff1510;--dark:#0a0a0a;--muted:#bca7a2;--app-height:100svh;--display:'Barlow Condensed','Arial Narrow',sans-serif;--body:Manrope,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#0a0a0a;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ff8b87;outline-offset:5px}.icon{width:22px;height:22px;fill:none;stroke:currentColor;flex:none;display:block}.experience{height:100svh;height:min(100svh,var(--app-height));min-height:0;display:grid;grid-template-rows:88px minmax(0,1fr)92px;padding:0 max(5%,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 76% 46%,#39070877,transparent 59%),#0a0a0a;position:relative;isolation:isolate}.nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #48262870;z-index:4}.brand{font:600 25px Manrope,sans-serif;letter-spacing:-1.3px;display:flex;align-items:center;gap:10px;white-space:nowrap}.brand-mark{width:32px;height:36px;flex:none}.pause{height:42px;width:42px;border:1px solid #b17a714a;border-radius:50%;display:grid;place-items:center;background:linear-gradient(130deg,#ffe6dc12,#ffffff02);box-shadow:inset 0 1px 0 #ffe7df24;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#eedcd6}.pause .icon{width:18px;height:18px}.pause:hover{border-color:#ff756a9c;background:#351416}.hero{min-width:0;min-height:0;position:relative;display:grid;grid-template-columns:40% 60%;grid-template-rows:1fr;align-items:center}.hero-copy{grid-column:1;grid-row:1;z-index:2;align-self:center;padding-bottom:90px;pointer-events:none}h1{font:600 clamp(88px,9vw,156px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.025em;margin:0}h1 em{font-style:normal;white-space:nowrap;color:var(--red)}.stage{grid-column:2;grid-row:1;position:relative;min-height:0;height:100%;min-width:0;margin-left:-80px;margin-right:-5vw;overflow:hidden}#world{width:100%;height:100%;display:block;color-scheme:dark;filter:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0a0a0a;font-size:13px;color:#c4b3ae;transition:opacity .5s;z-index:9}#loading.done{opacity:0;pointer-events:none}.narration{grid-row:1;grid-column:1;align-self:center;margin-top:300px;z-index:3;position:relative;height:92px;max-width:400px}.glass-card{position:absolute;inset:auto 0;top:0;min-height:80px;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;border:1px solid #e9bcb53b;color:#fff6f0;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#fff2ee16,#6f38300d 35%,#09080dd4 80%),#15111670;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:inset 0 1px 0 #fff4eb5c,inset 1px 0 0 #ffffff21,inset 0 -1px 0 #cd5c4845,0 16px 40px #0005;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}.glass-card::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(ellipse at var(--glass-x,10%) 0%,#ffeae12b,transparent 53%),linear-gradient(118deg,transparent 24%,#fff8ec0a 25%,transparent 54%);pointer-events:none}.glass-card::after{content:'';position:absolute;left:15%;right:15%;top:0;height:1px;background:linear-gradient(90deg,transparent,#fff4e8b3,transparent)}.speech p{font:500 16px/1.5 Manrope;letter-spacing:-.03em;margin:0;flex:1}.message-icon{width:25px;height:25px;fill:none;stroke:#ff695a;flex:none}.sound-bars{height:22px;display:flex;align-items:center;gap:3px}.sound-bars i{display:block;width:2px;height:9px;border-radius:4px;background:#ff5a54;animation:voice 1s ease-in-out infinite alternate}.sound-bars i:nth-child(2n){height:18px;animation-delay:-.35s}.sound-bars i:nth-child(3n){height:13px;animation-delay:-.7s}@keyframes voice{to{transform:scaleY(.35)}}.result{opacity:0;transform:translateY(9px)}.result.show{opacity:1;transform:translateY(0)}.result-icon{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#75241f8c,#301211);border:1px solid #c1786559;box-shadow:inset 0 1px 1px #ffd7c140;color:#ffe2d9}.result p{font:500 16px/1.25 Manrope;letter-spacing:-.035em;margin:0 0 5px}.result-detail,#result-detail{font:400 11px/1.4 Manrope;color:#cfafa7;white-space:nowrap}.confirmation{margin-left:auto;width:19px;color:#ff786b}.story-controls{align-self:center;display:flex;gap:9px;position:relative;z-index:5;max-width:580px;width:100%;margin:0 auto}.story{position:relative;overflow:hidden;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:11px;min-height:54px;background:#120d0f9c;border:1px solid #59353070;border-radius:15px;padding:13px 22px;font:500 13px Manrope;color:#bba7a1;transition:background .3s,border-color .3s,color .3s}.story:hover{background:#2b1113}.story.active{border-color:#ae413bd0;color:#fff0eb;background:linear-gradient(130deg,#5c111280,#211013b0);box-shadow:inset 0 1px 0 #d782692b}.story .icon{width:20px;height:20px}.progress{position:absolute;bottom:0;left:0;height:2px;background:#ff3930;width:0;opacity:0}.story.active .progress{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.paused .sound-bars i{animation-play-state:paused}
@media(min-width:1700px){.experience{grid-template-rows:104px minmax(0,1fr)112px}.hero-copy{padding-bottom:120px}.narration{margin-top:370px}h1{font-size:164px}.story{font-size:14px}}
@media(max-width:1100px) and (min-width:721px){h1{font-size:100px}.hero-copy{padding-bottom:120px}.narration{margin-top:250px}.speech p,.result p{font-size:14px}.stage{margin-left:-40px}.glass-card{padding:16px;gap:10px}}
@media(max-width:720px){.experience{padding:0 max(20px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom));grid-template-rows:60px minmax(0,1fr)70px}.nav{border:0}.brand{font-size:23px;gap:8px}.brand-mark{width:28px;height:32px}.pause{width:36px;height:36px}.pause .icon{width:16px;height:16px}.hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)78px;gap:0}.hero-copy{grid-column:1;grid-row:1;align-self:start;justify-self:center;text-align:center;padding:6px 0 0}.hero-copy h1{font-size:clamp(48px,8.9svh,78px);line-height:.9;letter-spacing:-.022em}.hero-copy h1 br{display:block}.stage{grid-column:1;grid-row:2;height:100%;width:calc(100% + 40px);margin:0 -20px;min-height:0}.narration{grid-column:1;grid-row:3;align-self:start;margin:0;width:100%;height:78px;max-width:none}.glass-card{min-height:66px;padding:13px 16px;border-radius:19px;gap:11px}.speech p{font-size:14px;line-height:1.45}.message-icon{width:22px;height:22px}.result p{font-size:14px;margin-bottom:4px}#result-detail{font-size:10px}.result-icon{width:34px;height:34px;border-radius:11px}.result-icon .icon{width:21px;height:21px}.confirmation{width:17px}.story-controls{max-width:none;gap:7px}.story{padding:12px 8px;min-height:48px;border-radius:13px;gap:7px;font-size:12px}.story .icon{width:19px;height:19px}}
@media(max-width:720px) and (max-height:650px){.experience{grid-template-rows:52px minmax(0,1fr)61px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.hero{grid-template-rows:auto minmax(0,1fr)68px}.hero-copy{padding-top:3px}h1{font-size:clamp(43px,8.5svh,57px)!important}.glass-card{min-height:60px;padding:10px 14px}.narration{height:68px}.story{min-height:44px}.brand{font-size:21px}.brand-mark{width:25px;height:28px}.speech p{font-size:13px}.result p{font-size:13px}.pause{height:33px;width:33px}}
@media(max-height:550px) and (min-width:721px){.experience{grid-template-rows:62px minmax(0,1fr)64px;padding-bottom:8px}h1{font-size:76px}.hero-copy{padding-bottom:64px}.narration{margin-top:170px;height:70px}.glass-card{min-height:66px;padding:12px 15px}.story{min-height:44px}}
@media(max-height:420px){.experience{grid-template-rows:44px minmax(0,1fr)52px}.hero{grid-template-columns:42% 58%;grid-template-rows:1fr}.hero-copy{grid-column:1;grid-row:1;text-align:left;align-self:start;padding-top:15px}.hero-copy h1{font-size:44px!important}.stage{grid-column:2;grid-row:1;width:100%;margin:0}.narration{grid-row:1;grid-column:1;align-self:end;height:62px}.glass-card{padding:9px;min-height:50px;gap:7px}.speech p,.result p{font-size:11px}.message-icon,.result-icon{display:none}#result-detail{font-size:8px}.story{min-height:38px;font-size:11px}.brand{font-size:20px}.brand-mark{height:25px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.sound-bars i{animation:none}}
@supports not (backdrop-filter:blur(10px)){.glass-card{background:#211518f0}}

/* Normal-flow copy stack prevents title/card overlap at every desktop height. */
@media(min-width:721px){.hero{grid-template-rows:auto auto;align-content:center}.hero-copy{grid-row:1;align-self:auto;padding-bottom:0}.hero-copy h1{font-size:clamp(72px,8vw,144px)}.hero-copy h1 span,.hero-copy h1 em{display:block;white-space:nowrap}.narration{grid-row:2;align-self:auto;margin-top:28px;height:92px}.stage{position:absolute;inset:0 0 0 40%;height:100%;width:auto;grid-column:auto;grid-row:auto}}
@media(max-width:720px){h1 span,h1 em{display:block}}
@media(max-height:550px) and (min-width:721px){.hero-copy h1{font-size:72px}.narration{margin-top:20px;height:70px}}
@media(max-height:420px){.hero-copy h1 span,.hero-copy h1 em{display:block}.hero-copy{padding-bottom:65px}.narration{margin-top:0}}

/* Obsidian panels: quiet, architectural and free of decorative shimmer. */
.nav{justify-content:flex-start}.glass-card{border-radius:6px;background:#151115ed;border:1px solid #60505270;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 12px 30px #0003;overflow:visible}.glass-card::before{display:block;inset:14px auto 14px -1px;width:2px;height:auto;background:#de0401;border-radius:0;z-index:1}.glass-card::after{display:none}.result-icon{border-radius:3px;background:#260f12;border:1px solid #8c34335c;box-shadow:none;color:#eee1dc}.confirmation{color:#c1a5a0}.story{border-radius:5px;background:#100c0ecc;box-shadow:none}.story.active{background:#2a0d10;border-color:#9b2925;box-shadow:none}.story .icon,.result-icon .icon{stroke-linecap:square;stroke-linejoin:miter}.result p{letter-spacing:-.02em}.speech p{letter-spacing:-.02em}
@media(max-width:720px){.glass-card{border-radius:5px}.result-icon{border-radius:2px}.story{border-radius:4px}}

/* Crimson light on black glass: a precision edge, with light confined to the perimeter. */
@property --edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.experience{background:radial-gradient(ellipse at 82% 18%,#5b080c40 0%,transparent 43%),radial-gradient(ellipse at 68% 84%,#fa17171b 0%,transparent 43%),linear-gradient(125deg,#08090c 4%,#111115 52%,#16090d 100%)}
.experience::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(118deg,transparent 0 56%,#ff292906 56.1%,#ff292910 56.3%,transparent 56.5% 76%,#ff17170c 76.1%,transparent 76.4%),linear-gradient(0deg,#08080bd9,transparent 25%);opacity:.9}
.nav{border-bottom-color:#ff262619}
.glass-card{background:linear-gradient(118deg,#281014e8,#100d12f5 45%,#190d12f0);border:1px solid #ff292952;box-shadow:inset 0 1px 0 #ff6a5e16,0 0 16px #ff171719,0 12px 34px #0007;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.glass-card::before{inset:-1px;width:auto;border-radius:inherit;padding:1px;background:conic-gradient(from var(--edge-angle),#ff171708 0deg,#ff171714 235deg,#ff1510 278deg,#ffb1a0 286deg,#ff1510 294deg,#ff171710 322deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;animation:edge-travel 7s linear infinite;pointer-events:none;z-index:1}
.glass-card::after{display:block;top:auto;bottom:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#ff1b12 50%,transparent);box-shadow:0 0 9px 1px #ff161a65;opacity:.8;pointer-events:none}
.result-icon{color:#ff4b3b;background:linear-gradient(135deg,#ff161626,#160b10);border-color:#ff2a205c;box-shadow:inset 0 0 12px #ff1b1212,0 0 12px #ff17171c}
.result-icon .icon,.message-icon{filter:drop-shadow(0 0 4px #ff211c65)}
.confirmation{color:#ff4435;filter:drop-shadow(0 0 3px #ff171766)}
.story{background:linear-gradient(125deg,#181015dd,#0e0b0ff0);border-color:#ff262629}
.story.active{background:linear-gradient(125deg,#4b0c14bf,#200d14e8);border-color:#ff342caa;box-shadow:inset 0 0 16px #ff1b1214,0 0 14px #ff15101c;color:#fff2ed}
.story.active .icon{color:#ff6454;filter:drop-shadow(0 0 4px #ff171760)}
.story.active .progress{background:#ff3227;box-shadow:0 0 8px #ff1b16}
@keyframes edge-travel{to{--edge-angle:360deg}}
@media(max-width:720px){.nav{justify-content:center}.experience{background:radial-gradient(ellipse at 75% 32%,#6b0b1536,transparent 51%),radial-gradient(ellipse at 20% 72%,#ff181815,transparent 45%),linear-gradient(145deg,#08090d,#130b12 70%,#08090d)}}
@media(prefers-reduced-motion:reduce){.glass-card::before{animation:none;--edge-angle:125deg}}
body.paused .glass-card::before{animation-play-state:paused}

/* Secondary status is readable at real embedded-browser sizes. */
#result-detail,.result-detail{font-size:13px;font-weight:500;line-height:1.45;color:#eadbd7;letter-spacing:.005em}
.narration{will-change:opacity,transform}
@media(max-width:720px){#result-detail,.result-detail{font-size:12px}}
@media(max-height:420px){#result-detail,.result-detail{font-size:11px}}

/* Only the card's content changes; its neon frame and geometry remain continuous. */
.status-shell{display:block;min-height:84px}
.status-viewport{position:relative;height:46px;overflow:hidden;isolation:isolate}
.status-content{position:absolute;inset:0;display:flex;align-items:center;gap:14px;width:100%;will-change:transform,opacity}
.status-copy{min-width:0}
.status-title{font:500 16px/1.25 Manrope;margin:0 0 5px;letter-spacing:-.02em}
.status-quote{font:500 16px/1.45 Manrope;margin:0;letter-spacing:-.02em;flex:1}
.status-voice{width:37px;height:37px;display:grid;place-items:center;flex:none;color:#ff493b}
.status-voice .icon{width:25px;height:25px;filter:drop-shadow(0 0 4px #ff211c65)}
.status-content .result-detail{font-size:13px;font-weight:500;color:#eadbd7;white-space:nowrap}
.status-content .sound-bars{margin-left:auto;flex:none}
@media(max-width:1100px) and (min-width:721px){.status-content{gap:10px}.status-title,.status-quote{font-size:14px}}
@media(max-width:720px){.status-shell{min-height:66px}.status-viewport{height:40px}.status-content{gap:11px}.status-title,.status-quote{font-size:14px}.status-content .result-detail{font-size:12px}.status-voice{width:34px;height:34px}.status-title{margin-bottom:4px}}
@media(max-width:720px) and (max-height:650px){.status-shell{min-height:60px}.status-title,.status-quote{font-size:13px}}
@media(max-height:420px){.status-shell{min-height:56px}.status-viewport{height:38px}.status-title,.status-quote{font-size:12px}.status-content .result-detail{font-size:11px}.status-voice{display:none}}

/* Composite-only progress: no per-frame layout mutation. */
.progress{width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform}

/* A single illuminated selection surface travels between scenarios. */
.story-selection{position:absolute;left:0;top:0;bottom:0;border:1px solid #ff342caa;border-radius:5px;background:linear-gradient(125deg,#4b0c14bf,#200d14e8);box-shadow:inset 0 0 16px #ff1b1214,0 0 14px #ff15101c;pointer-events:none;transition:transform 520ms cubic-bezier(.4,0,.2,1),width 520ms cubic-bezier(.4,0,.2,1);will-change:transform}
.story{z-index:1;background:transparent}
.story.active{background:transparent;border-color:transparent;box-shadow:none}
.story:not(.active){background:#0e0b0f66}
@media(max-width:720px){.story-selection{border-radius:4px}}

/* Voice sources live in one compact rail beside the product, independent of scenarios. */
.device-controls{position:absolute;right:24px;top:24px;z-index:6;display:flex;flex-direction:column;gap:5px;padding:5px;background:#100c12d9;border:1px solid #ff302c29;border-radius:7px;backdrop-filter:blur(10px)}
.device{display:grid;place-items:center;width:42px;height:42px;padding:8px;background:transparent;border:1px solid transparent;border-radius:3px;color:#ad999b;transition:color .3s,background .3s,border-color .3s}
.device:hover{color:#fff;background:#42151c80}.device.active{color:#ff675c;background:#51101b8c;border-color:#ff373c70;box-shadow:inset 0 0 12px #ff242415}.device .icon{width:25px;height:25px}.device[aria-busy=true]{animation:source-loading .8s ease-in-out infinite alternate}.device:disabled{opacity:.3;cursor:default}
@keyframes source-loading{to{opacity:.4}}
.status-copy .status-quote{font-size:14px;line-height:1.25;margin-bottom:4px}
@media(max-width:720px){.device-controls{right:12px;top:9px;padding:3px;gap:3px}.device{width:36px;height:36px;padding:6px}.device .icon{width:23px;height:23px}.status-copy .status-quote{font-size:13px}}
@media(prefers-reduced-motion:reduce){.device[aria-busy=true]{animation:none}}

/* Independently clipped text controls: the status shell and icons stay fixed. */
.status-copy .status-title,.status-copy .result-detail{position:relative;overflow:hidden;display:block}
.status-copy .status-title>span,.status-copy .result-detail>span{will-change:transform,opacity}

.status-content .status-copy{flex:1}
.status-content .confirmation{flex:none}

.voice-checking{animation:voice-proof 1s ease-in-out infinite alternate}@keyframes voice-proof{from{opacity:.55;filter:drop-shadow(0 0 0 #ff302700)}to{opacity:1;filter:drop-shadow(0 0 5px #ff3027aa)}}@media(prefers-reduced-motion:reduce){.voice-checking{animation:none}}
.paused .voice-checking{animation-play-state:paused}

/* Intent left, live state right: equal fixed slots and matching optical weight. */
.status-content .status-source,.status-content .status-indicator{display:grid;place-items:center;flex:0 0 37px;width:37px;min-width:37px;height:37px;margin:0;border-radius:3px;background:#1d0d10;border:1px solid #6f2a2c60;box-shadow:none;filter:none;color:#ff5147}
.status-content .status-source .icon,.status-content .status-indicator .icon{width:24px;height:24px;stroke-width:1.5;filter:none}
.status-content .status-indicator .sound-bars{display:flex;align-items:center;flex:none;width:22px;min-width:22px;height:22px;margin:0;gap:3px}
.status-indicator .sound-bars i{flex:0 0 2px;width:2px;min-width:2px}
.status-working .progress-trace{animation:status-trace 1.2s linear infinite}
.status-verifying .icon{animation:status-proof .8s ease-in-out infinite alternate}
.status-complete .icon,.status-verified .icon{color:#fff2ef}
@keyframes status-trace{to{stroke-dashoffset:-51}}
@keyframes status-proof{from{opacity:.5}to{opacity:1}}
.paused .status-indicator *{animation-play-state:paused}
@media(max-width:720px){.status-content .status-source,.status-content .status-indicator{flex-basis:34px;width:34px;min-width:34px;height:34px}.status-content .status-source .icon,.status-content .status-indicator .icon{width:23px;height:23px}}
@media(prefers-reduced-motion:reduce){.status-indicator *{animation:none!important}}
.status-complete .icon,.status-verified .icon{animation:status-resolve .28s ease-out both}
@keyframes status-resolve{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.status-complete .icon,.status-verified .icon{animation:none}}

#world{transition:opacity .65s cubic-bezier(.2,.8,.2,1)}
#loading{background:transparent;pointer-events:none}
.enable-3d{position:absolute;bottom:18px;right:24px;z-index:8;background:#1b0e12;border:1px solid #ff4c4270;border-radius:5px;padding:10px 14px;color:#ffecea;font-size:13px}
.no-script{position:fixed;bottom:10%;left:10%;right:10%;font:16px/1.5 Arial;color:#e6d4d4}
@media(prefers-reduced-motion:reduce){#world{transition:none}.first-wave i{animation:none}}

#loading{inset:14px 85px 16px 20px;background:transparent;pointer-events:none}
.watch-start-svg{height:100%;max-height:490px;max-width:100%;width:auto;aspect-ratio:5/7;overflow:visible}
.watch-screen-skeleton{animation:watch-skeleton 1.6s ease-in-out infinite alternate}
@keyframes watch-skeleton{from{opacity:.65}to{opacity:1}}
#world{transition:opacity .95s cubic-bezier(.2,.8,.2,1)}
@media(max-width:720px){#loading{inset:6px 60px 8px 15px}}
@media(max-height:420px){#loading{inset:3px 57px 5px 6px}}
@media(prefers-reduced-motion:reduce){.watch-screen-skeleton{animation:none}#world{transition:none}}

@media(max-width:720px){.story-controls{--story-gaps:14px}}
#loading{padding-bottom:30px}
@media(max-width:720px){#loading{padding-bottom:25px}}
@media(max-height:420px){#loading{padding-bottom:21px}}

/* The HTML skeleton is retired permanently once live Canvas owns the view. */
#loading.done{visibility:hidden}

/* A full-resolution display plane bypasses the scene's mobile framebuffer cap. */
.crisp-screen-layer{opacity:0;transition:opacity .95s cubic-bezier(.2,.8,.2,1)}
html[data-render-mode="webgl"] .crisp-screen-layer{opacity:1}
@media(prefers-reduced-motion:reduce){.crisp-screen-layer{transition:none}}