/* Bobby — inherits styles.css (v1 Black Index tokens). Orange appears once per view: the index at twelve.
   Stage states on <body data-stage>: intro (turntable) → zoom (camera pushes into the face) → greet (face types) → ready. */
.bobby-page{--ease-out:cubic-bezier(.16,1,.3,1);--ease-cam:cubic-bezier(.65,0,.25,1);--hair:rgba(245,243,238,.14);--chat-w:420px;--sheet-h:50svh}
.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}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#0B0B0C;padding:10px 14px;border-radius:10px;font-size:14px}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--ink);margin-top:3px}
.foot-mark{width:22px;height:22px}
.lang-menu li{white-space:nowrap}

/* ---------------------------------------------------------------- stage */
.stage{position:relative;height:100svh;min-height:600px;padding:0;overflow:hidden;isolation:isolate;background:var(--bg)}
.theatre{position:absolute;inset:0}
.turn{position:absolute;left:50%;top:50%;height:min(80vh,calc(100vw * .56));width:auto;max-width:none;transform:translate(-50%,-50%) scale(var(--vs,1));opacity:1;mix-blend-mode:lighten;transition:opacity .9s var(--ease-out),transform 1.8s var(--ease-cam),filter .9s;pointer-events:none}
@media(max-width:979px){.turn{height:62svh}}
body:not([data-stage="intro"]) .turn{opacity:0;filter:blur(8px)}

/* the watch: positioned by JS through --wx/--wy (px offsets from centre) and --ws (scale) */
.bwatch{position:absolute;left:50%;top:50%;width:var(--ww,560px);aspect-ratio:1;background:var(--bg);perspective:1500px;perspective-origin:50% 40%;
  transform:translate(-50%,-50%) translate(var(--wx,0px),var(--wy,0px)) scale(var(--ws,1));transition:transform 1.8s var(--ease-cam),opacity .9s var(--ease-out),filter .9s}
body[data-stage="intro"] .bwatch{opacity:0;filter:blur(6px)}
body.no-cam .bwatch,body.no-cam .turn{transition:none}
.case{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;user-select:none;pointer-events:none;transition:filter .9s var(--ease-out),transform .9s var(--ease-out)}
.bwatch.exploded .case{filter:brightness(.3) saturate(.6);transform:scale(.94)}
.screen{position:absolute;left:18.6%;top:18.3%;width:62.7%;height:64.6%;border-radius:12.6% / 12.2%;background:#000;opacity:0;transition:opacity .7s var(--ease-out)}
body:not([data-stage="intro"]) .screen{opacity:1}
.dial{position:absolute;left:19%;top:18.667%;width:61.917%;height:63.833%;transform-style:preserve-3d;container-type:size}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s var(--ease-out)}
.bwatch.exploded .stack{transform:translateY(4%) rotateX(58deg) rotateZ(-34deg) scale(.74)}
.layer{position:absolute;inset:0;border-radius:12.6% / 12.2%;transform:translateZ(0);transition:transform 1.1s var(--ease-out),opacity .6s var(--ease-out),box-shadow .8s;transition-delay:calc(var(--i) * 40ms)}
.layer .art{position:absolute;inset:0;border-radius:inherit}
.layer.ground .art{overflow:hidden}
.layer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;border-radius:inherit}
.bwatch.exploded .layer{transform:translateZ(calc(var(--i) * 46px));box-shadow:0 0 0 1px var(--hair)}
.bwatch.exploded .layer:not(.ground){background:rgba(245,243,238,.025)}
.ltag{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .5s var(--ease-out),color .3s}
.bwatch.exploded .ltag{opacity:1}
.layer.writing .ltag{color:var(--ink)}
.layer.motion{opacity:0}
.bwatch.exploded .layer.motion{opacity:1}
.layer .loop,.layer .fx,.layer .vscrim{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.layer .loop{object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease-out)}
.layer .loop.on{opacity:1}
.layer .vscrim{opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.1) 42%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.55));transition:opacity 1.2s}
.layer.has-vid .vscrim{opacity:1}
.layer.fresh svg{animation:paint .7s var(--ease-out) both}
@keyframes paint{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.bwatch.sent .layer.ground{animation:land .9s var(--ease-out)}
@keyframes land{30%{filter:brightness(1.8)}}

/* the greeting typed on the face */
.greet{position:absolute;inset:0;margin:0;display:flex;align-items:center;padding:0 11cqw;font-family:var(--display);font-weight:600;font-size:7.6cqw;line-height:1.18;letter-spacing:-.02em;color:var(--ink);opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none;text-wrap:pretty}
.greet.on{opacity:1}
.greet .caret{display:inline-block;width:.08em;height:.95em;background:var(--accent);margin-left:.06em;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
:lang(zh) .greet{font-size:7cqw;line-height:1.3}

/* motion classes used inside the face SVG */
.m-pulse{animation:mPulse 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.m-breathe{animation:mBreathe 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.m-blink{animation:mBlink 1s steps(1) infinite}
.m-glow{animation:mGlow 2.4s ease-in-out infinite}
.m-sweep{animation:mSweep 2.6s linear infinite}
.m-fill{animation:mFill 2.2s var(--ease-out) both}
.m-scroll{animation:mScroll 9s linear infinite}
@keyframes mPulse{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}}
@keyframes mBreathe{0%,100%{transform:scale(.86);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@keyframes mBlink{50%{opacity:.25}}
@keyframes mGlow{50%{opacity:.6}}
@keyframes mSweep{to{stroke-dashoffset:-40}}
@keyframes mFill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* bar under the watch */
.watch-bar{position:absolute;left:0;width:calc(100% - var(--chat-w) - 48px);bottom:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);pointer-events:none}
body[data-stage="ready"] .watch-bar{opacity:1;transform:none;pointer-events:auto}
.status{display:inline-flex;align-items:center;gap:9px;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status[data-state="building"] .dot,.status[data-state="sending"] .dot,.status[data-state="painting"] .dot,.status[data-state="animating"] .dot{background:var(--ink);animation:blink .8s infinite}
.status[data-state="preview"] .dot{background:var(--ink)}
.status[data-state="sent"] .dot{background:var(--ink);box-shadow:0 0 0 4px rgba(245,243,238,.12)}
.watch-actions{display:flex;gap:8px}
.watch-actions .btn:disabled{opacity:.35;cursor:default;transform:none}
.gens{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px}
.gen{border:0;background:none;color:var(--muted);font:500 12px/1 var(--mono);letter-spacing:.08em;padding:7px 10px;border-radius:999px;cursor:pointer}
.gen.on{background:var(--panel);color:var(--ink)}
.gen:disabled{cursor:default;opacity:.55}
.gen-soon{font-size:12px;color:var(--muted);padding:0 8px 0 4px}
.bt{position:absolute;left:50%;bottom:-10px;width:min(60%,300px);height:1px;background:var(--line);transform:translateX(-50%);overflow:hidden;opacity:0;transition:opacity .3s}
.bt i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.bt.go{opacity:1}
.bt.go i{transition:transform 1.3s cubic-bezier(.65,0,.35,1);transform:scaleX(1)}

.skip{position:absolute;right:20px;bottom:22px;z-index:5;border:1px solid var(--line);background:rgba(11,11,12,.6);color:var(--ink-2);font:500 13px/1 var(--text);padding:10px 14px;border-radius:999px;cursor:pointer;transition:opacity .4s,color .25s}
.skip:hover{color:var(--ink)}
body[data-stage="ready"] .skip{opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- chat: right column (desktop) */
.chat{position:absolute;z-index:6;top:76px;right:24px;bottom:24px;width:var(--chat-w);display:flex;flex-direction:column;background:#111113;border:1px solid var(--line);border-radius:24px;padding:18px 18px 14px;
  transform:translateX(calc(100% + 40px));opacity:0;transition:transform .9s var(--ease-out),opacity .6s var(--ease-out),height .5s var(--ease-out)}
body[data-stage="ready"] .chat{transform:none;opacity:1}
.sheet-grip{display:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{flex:none;width:38px;height:38px;border-radius:12px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.avatar svg{width:22px;height:22px}
.chat-name{font-size:18px;letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.head-actions{display:flex;gap:2px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--ink-2);font:500 12.5px/1 var(--text);padding:8px;border-radius:10px;cursor:pointer;white-space:nowrap}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{background:var(--panel);color:var(--ink)}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1599px){.icon-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

.rename{padding:12px 0;border-bottom:1px solid var(--line)}
.rename label{font-size:13px;color:var(--ink-2)}
.rename-row{display:flex;gap:8px;margin-top:8px}
.rename input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:500 15px var(--text);padding:9px 12px}
.rename .hint{font-size:12px;color:var(--muted);margin-top:6px}
.spec-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:12px 0}
.spec-pane[hidden]{display:none}
.spec-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.spec-pane pre{flex:1;margin:0;overflow:auto;background:#0B0B0C;border:1px solid var(--line);border-radius:14px;padding:12px;font:12px/1.5 var(--mono);color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.chat.spec-open .thread,.chat.spec-open .ideas{display:none}

.thread{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 2px 10px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#2a2a2e transparent}
.bmsg{max-width:90%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45;animation:msgIn .5s var(--ease-out) both;overflow-wrap:anywhere}
.bmsg.me{align-self:flex-end;background:var(--ink);color:#0B0B0C;border-bottom-right-radius:6px}
.bmsg.bob{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:6px}
.bmsg.bob .face-tag{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bmsg.err{border-color:#3a2a26}
.bmsg .retry{margin-top:8px}
.typing{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px}
.typing .dots{display:inline-flex;gap:4px}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}
.typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ideas{flex:none;padding:10px 0 4px;border-top:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);visibility:hidden}
.ideas.on{opacity:1;transform:none;visibility:visible}
.ideas-label{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;border:1px solid var(--line);background:none;color:var(--ink-2);font:500 12.5px/1 var(--text);padding:8px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s,border-color .2s}
.cat:hover{color:var(--ink)}
.cat[aria-selected="true"]{background:var(--ink);color:#0B0B0C;border-color:var(--ink)}
.prompts{display:flex;flex-direction:column;gap:6px;margin-top:4px;max-height:176px;overflow-y:auto;scrollbar-width:thin}
.prompt{text-align:left;border:1px solid var(--line);background:#141416;color:var(--ink);font:400 14px/1.35 var(--text);padding:9px 12px;border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s;animation:msgIn .45s var(--ease-out) both}
.prompt:hover{border-color:#45454b;background:#18181b}
.prompt:disabled{opacity:.45;cursor:default}

.composer{flex:none;display:flex;align-items:flex-end;gap:8px;margin-top:10px;padding:6px 6px 6px 16px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.composer:focus-within{border-color:#4a4a50}
.composer textarea{flex:1;min-width:0;resize:none;max-height:120px;background:none;border:0;outline:0;color:var(--ink);font:400 16px/1.4 var(--text);padding:9px 0}
.composer textarea::placeholder{color:#7d7a74}
.send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:#0B0B0C;display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--ease-out),opacity .25s}
.send:hover{transform:scale(1.05)}
.send:disabled{opacity:.35;cursor:default;transform:none}
.send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-note{font-size:11.5px;line-height:1.45;color:var(--muted);margin:10px 2px 0}

/* ---------------------------------------------------------------- phone: bottom sheet */
@media(max-width:979px){
  .stage{min-height:560px}
  .chat{top:auto;left:0;right:0;bottom:0;width:auto;height:var(--sheet-h);border-radius:24px 24px 0 0;border-bottom:0;padding:6px 14px calc(10px + env(safe-area-inset-bottom));transform:translateY(105%)}
  .chat.expanded{height:88svh}
  .sheet-grip{display:block;align-self:center;width:100%;height:20px;border:0;background:none;cursor:pointer;flex:none}
  .sheet-grip i{display:block;width:40px;height:4px;margin:6px auto;border-radius:2px;background:#3a3a3f}
  .chat-head{padding-bottom:8px}
  .avatar{width:32px;height:32px;border-radius:10px}
  .chat-name{font-size:16px}
  .chat-sub{display:none}
  .prompts{max-height:132px}
  .ideas.used .prompts,.ideas.used .ideas-label{display:none}
  .chat-note{display:none}
  .watch-bar{width:100%;bottom:calc(var(--sheet-h) + 8px);gap:6px 10px}
  .gens,.gen-soon{display:none}
  .watch-actions .btn.small{padding:7px 12px;font-size:13px}
  .status{font-size:11px}
  .skip{bottom:auto;top:76px;right:14px}
}

/* ---------------------------------------------------------------- sections below */
.sensors{border-top:1px solid var(--line)}
.sensors-head{display:grid;gap:18px;max-width:880px}
.sensors h2,.anatomy h2,.ways h2,.nots h2,.bclose h2{font-size:clamp(36px,5.2vw,72px);text-wrap:balance}
.sensors .lede,.anatomy .lede{font-size:clamp(17px,1.6vw,20px);max-width:60ch}
.sensor-grid{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
@media(min-width:700px){.sensor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1100px){.sensor-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sensor-grid li{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:118px;padding:16px 14px 16px 0;border-bottom:1px solid var(--line)}
.sensor-grid .sn{font-size:14px;color:var(--ink-2);line-height:1.3}
.sensor-grid .sv{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sensor-grid .su{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:4px;letter-spacing:.04em}
.fine{margin-top:22px;font-size:13px;color:var(--muted);max-width:70ch}

.anatomy,.ways,.nots,.bclose{border-top:1px solid var(--line)}
.anatomy-grid{display:grid;gap:40px}
@media(min-width:980px){.anatomy-grid{grid-template-columns:5fr 7fr;gap:80px;align-items:start}.anatomy-head{position:sticky;top:120px}}
.anatomy .lede{margin-top:20px}
.layer-list{list-style:none;margin:0;padding:0}
.layer-list li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.layer-list li:last-child{border-bottom:1px solid var(--line)}
.layer-list .ln{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:8px}
.layer-list h3{font-size:clamp(22px,2.4vw,30px)}
.layer-list p{margin-top:8px;color:var(--ink-2);max-width:52ch}
@media(max-width:560px){.layer-list li{grid-template-columns:1fr;gap:8px}.layer-list .ln{padding-top:0}}
.ways h2 .dim{color:var(--muted)}
.ways-grid{display:grid;gap:24px;margin-top:48px}
@media(min-width:860px){.ways-grid{grid-template-columns:1fr 1fr;gap:32px}}
.way{margin:0}
.way-media{border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/5}
.way-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.way:hover .way-media img{transform:scale(1.03)}
.way figcaption{padding:22px 4px 0}
.way p{margin-top:10px;color:var(--ink-2);max-width:46ch}
.ways-foot{margin-top:40px;color:var(--muted);max-width:70ch;font-size:15px}
.not-list{list-style:none;margin:48px 0 0;padding:0;display:grid}
.not-list li{display:grid;gap:8px;padding:28px 0;border-top:1px solid var(--line)}
@media(min-width:860px){.not-list li{grid-template-columns:7fr 5fr;gap:48px;align-items:baseline}}
.not-list b{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;line-height:1.12}
.not-list span{color:var(--ink-2);max-width:46ch}
.bclose .lede{margin-top:20px}
.bcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .turn{display:none}
}

/* v2 canvas: per-element motion + transitions */
.layer svg g.el{transform-box:fill-box;transform-origin:center}
.m-spin{animation:mSpin 6s linear infinite;transform-box:fill-box;transform-origin:center}
.m-flicker{animation:mFlicker 2.2s steps(1) infinite}
.m-float{animation:mFloat 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mSpin{to{transform:rotate(360deg)}}
@keyframes mFlicker{0%,100%{opacity:1}12%{opacity:.45}14%{opacity:1}60%{opacity:.85}62%{opacity:1}}
@keyframes mFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sweep-clip{position:absolute;inset:0;overflow:hidden;border-radius:12.6% / 12.2%;pointer-events:none;z-index:4}
.glass-sweep{position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.05) 55%,transparent 62%);mix-blend-mode:screen;border-radius:12.6% / 12.2%}
.ghosts,.burst{position:absolute;inset:0;pointer-events:none;z-index:3;width:100%;height:100%}
.ghosts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial{overflow:visible}

/* partner demo mode (bobby-partners.html) */
.demo-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(6,6,8,.92);backdrop-filter:blur(10px)}
.demo-gate[hidden]{display:none}
.demo-form{width:min(92vw,420px);background:#141416;border:1px solid #2a2a2e;border-radius:22px;padding:26px}
.demo-kicker{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.demo-form h2{font-size:24px;margin:0 0 18px}
.demo-form label{font-size:13px;color:var(--ink-2)}
.demo-row{display:flex;gap:8px;margin-top:8px}
.demo-row input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:500 16px var(--text);padding:11px 12px}
.demo-err{color:#FF8A75;font-size:13px;margin:10px 0 0}
.demo-disclaimer{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:150;margin:0;padding:6px 12px;border-radius:999px;background:rgba(11,11,12,.72);border:1px solid #2a2a2e;font:500 11px var(--text);letter-spacing:.02em;color:var(--ink-2);white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
.showcase{display:flex;flex-direction:column;gap:2px}
.showcase b{font:600 15px var(--display);letter-spacing:-.01em}
.showcase span{font-size:12.5px;color:var(--muted)}
@media(max-width:979px){.demo-disclaimer{bottom:auto;top:60px;font-size:10.5px;white-space:normal;text-align:center;width:max-content;max-width:92vw;line-height:1.35;border-radius:12px}}