/* Vani app chrome. Standalone app.html and the /talk island share this file. Do not rewrite. */
:root, :host{
    --paper:#FFFFFF;--mist:#F6F8FB;--hair:#E8ECF2;--dot:#EDF0F5;
    --ink:#0E1116;--muted:#6E7684;--faint:#9AA2AE;
    --violet:#3B2BFF;--mint:#00C2A0;--forest:#0f3e17;--cream:#fffefc;
    --font-display:"Bricolage Grotesque","Baloo 2",system-ui,sans-serif;
    --font-body:"Instrument Sans","Baloo 2",system-ui,-apple-system,sans-serif;
    --font-mono:"DM Mono",ui-monospace,Menlo,monospace;
    --font-deva:"Baloo 2",sans-serif;
    --lift:0 1px 2px rgba(16,19,23,.04),0 8px 24px -16px rgba(16,19,23,.18);--lift-lg:0 2px 6px rgba(16,19,23,.05),0 22px 48px -28px rgba(16,19,23,.28);
    --warn-bg:#FDEEF0;--warn-ink:#B03A46;--amber-bg:#FFF9F0;--amber-line:#F0E2CC;--amber-ink:#8A6A2F;
    --pad:clamp(12px,3vw,34px);
    --safe-t:env(safe-area-inset-top,0px);
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-l:env(safe-area-inset-left,0px);
    --safe-r:env(safe-area-inset-right,0px);
  }
  /* Island host is a shadow root — html/body rules never apply. Paint the host instead.
     Do not set position:relative here: it fights the light-DOM position:fixed and
     makes position:fixed sheets/scrims resolve against the wrong box. */
  :host{
    display:block;position:absolute;inset:0;width:auto;height:auto;
    color:var(--ink);background:var(--paper);
    background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px;
    font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased;
    pointer-events:auto;
  }
  :host .shell{position:absolute;inset:0;height:100%;height:100dvh}
  /* Devanagari needs Baloo 2 - Instrument Sans has no Devanagari glyphs */
  h1,.sub,.deva,.chip,.pass li,.msg,.toast,.foot,.core,.end,.back,.typebar input,.talk,.hint{font-family:var(--font-lang,"Baloo 2"),"Instrument Sans",system-ui,sans-serif}
  h1{font-family:var(--font-display),var(--font-lang,"Baloo 2"),sans-serif}
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;height:100dvh;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html{overscroll-behavior:none}
  body{font-family:var(--font-body);color:var(--ink);background:var(--paper);
    background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px;
    overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:8px}
  h1,.sub,.caption .her,.caption .you,.hint,.msg,.chip,.pass .sub,.fine,.toast,.core{
    overflow-wrap:break-word;word-wrap:break-word;word-break:normal}

  .shell{position:fixed;inset:0;height:100%;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;
    padding:calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l));
    gap:8px;width:100%}
  @supports (height:100svh){
    html,body,.shell{height:100svh}
  }
  .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;position:relative;z-index:4;pointer-events:auto}
  .left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
  .brand{display:flex;align-items:center;border:1px solid var(--hair);border-radius:999px;padding:9px 16px;background:#fff;box-shadow:var(--lift);min-width:0;flex:none;max-width:100%;color:inherit;text-decoration:none}
  .spark{width:32px;height:32px;flex:none;object-fit:contain}
  .brand b{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,4vw,19px);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand b span{color:var(--muted);font-weight:400}
  .lang{display:flex;align-items:center;gap:6px;border:1px solid var(--hair);border-radius:999px;
    background:#fff;padding:8px 12px;flex:none;font-size:13px;color:var(--muted);box-shadow:var(--lift);
    font-family:var(--font-lang,"Baloo 2"),"Instrument Sans",sans-serif;white-space:nowrap;transition:.2s;max-width:42vw;position:relative;z-index:4;pointer-events:auto;cursor:pointer}
  .lang span{overflow:hidden;text-overflow:ellipsis}
  .lang:hover{color:var(--ink);border-color:var(--violet)}
  .langgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,110px),1fr));gap:7px;margin-top:4px}
  .langgrid button{border:1px solid var(--hair);border-radius:12px;padding:11px 12px;font-size:14px;
    text-align:left;background:#fff;transition:.15s;line-height:1.3;min-width:0;overflow-wrap:anywhere}
  .langgrid button:hover{border-color:var(--violet)}
  .langgrid button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .langgrid small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
    text-transform:uppercase;opacity:.55;margin-top:3px}
  .nav{display:flex;align-items:center;margin-left:auto;margin-right:4px;gap:18px;font-size:14px;color:var(--muted);font-family:"Baloo 2",sans-serif;min-width:0;position:relative;z-index:4;pointer-events:auto}
  .nav button{white-space:nowrap}
  .nav button:hover{color:var(--ink)}
  .navm{display:none;gap:6px;margin-left:auto;flex:none}
  .cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:999px;padding:9px 10px 9px 16px;font-size:clamp(12.5px,3.4vw,15px);font-weight:500;transition:transform .18s,box-shadow .18s,opacity .18s;font-family:var(--font-lang,"Baloo 2"),sans-serif;white-space:nowrap;box-shadow:var(--lift-lg);flex:none;max-width:46vw}
  .cta #cta-label{overflow:hidden;text-overflow:ellipsis}
  .cta:hover{transform:translateY(-1px)}
  .cta .disc{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:12px;flex:none;font-family:var(--font-body)}

  .stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden}
  .view{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(8px,1.6vh,18px);text-align:center;opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .45s,transform .45s,visibility .45s;padding:2px 0;overflow:hidden;
    overscroll-behavior:none;width:100%;pointer-events:none;z-index:0;scrollbar-width:none}
  .view::-webkit-scrollbar{width:0;height:0;display:none}
  .view > *{flex:none;max-width:100%;min-width:0}
  .view.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:1}
  .ring{position:relative;width:min(40vh,68vw,410px);aspect-ratio:1;flex:none;cursor:pointer}
  .ring:focus-visible{outline:2px solid var(--violet);outline-offset:6px;border-radius:50%}
  #view-live .ring{width:min(26vh,48vw,290px);cursor:default}
  #view-live{gap:clamp(6px,1.2vh,14px);justify-content:flex-start;padding-top:4px;padding-bottom:8px;overflow-y:auto}
  .ring canvas{width:100%;height:100%;display:block}
  .ring .core{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:clamp(11.5px,3.2vw,12.5px);color:var(--muted);text-align:center;padding:0 18%;line-height:1.35;
    overflow:hidden}

  h1{font-weight:600;letter-spacing:-.03em;line-height:1.18;font-size:clamp(22px,6.4vw,48px);max-width:min(22em,94vw);padding:0 4px;overflow-wrap:normal;word-break:keep-all;-webkit-hyphens:none;hyphens:none}
  h1 em{font-style:normal;background:linear-gradient(96deg,var(--forest),#2a7a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:var(--muted);font-size:clamp(13.5px,3.7vw,16.5px);max-width:min(47ch,94vw);line-height:1.55;padding:0 6px}
  .chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:min(94vw,520px);padding:0 4px}
  .chip{border:1px solid var(--hair);background:#fff;border-radius:999px;padding:6px 12px;font-size:clamp(12px,3.2vw,13px);color:var(--muted);max-width:100%;line-height:1.3;cursor:pointer}
  .chip:hover{border-color:var(--violet);color:var(--ink)}
  .chip b{color:var(--ink);font-weight:500}
  .waitlist-cta{margin-top:2px;max-width:none;padding:11px 12px 11px 18px;position:relative;z-index:2;pointer-events:auto;cursor:pointer}
  .waitlist-count{font-size:13px;color:var(--faint);letter-spacing:.01em;line-height:1.4}
  .waitlist-form{width:min(480px,94vw);display:grid;gap:8px;position:relative;z-index:2}
  .waitlist-form .typebar{width:100%}
  .waitlist-form .typebar button{min-height:48px;min-width:4.8em;padding:0 20px}
  .waitlist-err{color:var(--warn-ink);margin-top:0}
  .waitlist-ok{max-width:min(42ch,94vw);font-size:15px;line-height:1.55;color:var(--ink)}
  .waitlist-cred{font-size:12.5px;color:var(--faint);letter-spacing:.01em;line-height:1.45;margin-top:2px}
  #view-home.is-waitlist{justify-content:center;gap:clamp(6px,1.2vh,12px);padding:0;overflow:hidden}
  #view-home.is-waitlist .ring{width:min(32vh,48vw,280px)}
  #view-home.is-waitlist .ring .core{font-size:clamp(13px,2vh,16px);color:var(--ink);font-weight:500}
  #view-home.is-waitlist h1{font-size:clamp(20px,4.2vw,34px);max-width:min(18em,94vw)}
  #view-home.is-waitlist .sub{font-size:clamp(13px,3.2vw,15px);line-height:1.45}
  .shell:has(#view-home.is-waitlist.on) .foot{display:none}
  .iday{margin:2px 0 0;max-width:min(36ch,94vw);font-family:var(--font-display);font-weight:600;font-size:clamp(14px,3.4vw,17px);letter-spacing:-.02em;line-height:1.35;color:var(--ink);animation:iday-in .7s ease both}
  .iday-flag{display:inline-flex;align-items:center;gap:5px;margin-right:6px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;font-style:normal;font-size:1.25em;line-height:1;vertical-align:-.1em;animation:iday-wave 1.8s ease-in-out infinite}
  .iday-svg{width:1.05em;height:.7em;flex:none;border-radius:1px;box-shadow:0 0 0 1px rgba(14,17,22,.12)}
  .iday-from{display:block;margin-top:3px;font-family:var(--font-body);font-weight:400;font-size:12.5px;letter-spacing:0;color:var(--muted);animation:iday-in .7s .18s ease both}
  @keyframes iday-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes iday-wave{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-2px)}}
  @media (prefers-reduced-motion:reduce){.iday,.iday-flag,.iday-from{animation:none}}

  .pstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
    border:1px dashed var(--hair);background:#fff;border-radius:16px;padding:8px 14px;
    font-size:12.5px;color:var(--muted);max-width:min(62ch,94vw);line-height:1.45;
    font-family:"Baloo 2",sans-serif;transition:border-color .2s;text-align:center}
  .pstrip:hover{border-color:var(--violet);color:var(--ink);box-shadow:var(--lift)}
  .pstrip b{color:var(--ink);font-weight:500}
  .pstrip .sep{opacity:.45}

  .pf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;font-size:14px;align-items:baseline}
  .pf dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .pf dd{line-height:1.5;min-width:0;overflow-wrap:anywhere}
  .dictrow{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 0;border-bottom:1px solid var(--hair)}
  .dictrow .h{color:var(--muted);flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
  .dictrow .arw{color:var(--muted);flex:none}
  .dictrow .c{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
  .dictrow .x{color:var(--muted);font-size:15px;line-height:1;padding:4px;flex:none}
  .dictrow .x:hover{color:var(--warn-ink)}
  .dictadd{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
  .dictadd input{flex:1 1 40%;min-width:0;font-size:14px;padding:10px 14px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink);font-family:"Baloo 2",sans-serif}
  .dictadd button{background:var(--ink);color:#fff;border-radius:999px;padding:0 18px;font-size:13.5px;flex:none}
  .danger{color:var(--warn-ink);background:var(--warn-bg);border-radius:999px;padding:9px 18px;font-size:13.5px;margin-top:6px;font-family:"Baloo 2",sans-serif}

  .talk{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
    border-radius:999px;padding:14px 26px;font-size:15px;font-weight:500;
    font-family:var(--font-lang,"Baloo 2"),sans-serif;position:relative;touch-action:none;user-select:none;
    box-shadow:var(--lift-lg);transition:transform .12s ease, background .25s, box-shadow .25s;max-width:94vw}
  .talk:hover{transform:translateY(-1px)}
  .talk.rec{background:linear-gradient(96deg,var(--violet),var(--mint));transform:scale(1.03)}
  .talk.rec::after{content:"";position:absolute;inset:-6px;border-radius:999px;
    border:2px solid var(--mint);opacity:.55;animation:halo 1.3s ease-out infinite}
  @keyframes halo{0%{transform:scale(.98);opacity:.55}100%{transform:scale(1.12);opacity:0}}
  .talk.off{background:var(--mist);color:#A6ADB8;cursor:not-allowed;transform:none;box-shadow:none;border:1px solid var(--hair)}
  .talk.busy{background:linear-gradient(96deg,var(--violet),var(--mint));pointer-events:none;cursor:wait}
  .talk.busy .talk-ico{animation:spin .85s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .icon-btn.act{background:var(--ink);color:#fff;border-color:var(--ink)}
  .hint{display:flex;align-items:flex-start;gap:9px;justify-content:center;font-size:12.5px;color:var(--muted);
    max-width:min(52ch,94vw);line-height:1.45;font-family:var(--font-lang,"Baloo 2"),sans-serif;min-height:1.4em;padding:0 4px}
  .hint span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;min-width:0}
  .hint.bad{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);
    border-radius:12px;padding:9px 14px;text-align:left}
  .hint.bad::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber-ink);flex:none;opacity:.7;margin-top:6px}
  .hint .fix{flex:none;border:1px solid currentColor;border-radius:999px;padding:3px 11px;font-size:11.5px;
    opacity:.75;transition:.15s;font-family:inherit}
  .hint .fix:hover{opacity:1;background:#fff}

  .fixnote{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);
    border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
  .diag{display:grid;gap:7px;margin-top:4px}
  .diag div{display:flex;justify-content:space-between;gap:12px;font-size:13px;align-items:baseline;min-width:0}
  .diag span:first-child{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none}
  .diag .ok{color:var(--mint)}
  .diag .no{color:var(--warn-ink);min-width:0;text-align:right;overflow-wrap:anywhere}
  .meter{height:7px;border-radius:999px;background:var(--mist);overflow:hidden;margin-top:10px}
  .meter i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--mint));transition:width .08s linear}
  .tbtn{background:var(--ink);color:#fff;border-radius:999px;padding:9px 18px;font-size:13.5px;margin-top:12px;font-family:"Baloo 2",sans-serif}

  .timer{font-family:var(--font-mono);font-size:12.5px;color:#9AA2AE;letter-spacing:.14em}
  .controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;max-width:100%;padding:0 4px}
  .icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:#fff;display:grid;place-items:center;transition:.2s;flex:none;box-shadow:var(--lift)}
  .icon-btn:hover{background:var(--mist)}
  .icon-btn.muted{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
  .end{background:var(--warn-bg);color:var(--warn-ink);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:500}
  .end:hover{filter:brightness(.97)}
  .back{color:var(--muted);font-size:14px;border:1px solid var(--hair);border-radius:999px;padding:10px 18px;background:#fff}
  .back:hover{color:var(--ink)}
  .intents{display:flex;gap:7px;max-width:min(76ch,100%);width:100%;overflow-x:auto;padding:3px 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .intents::-webkit-scrollbar{display:none}
  .intents button{flex:none;border:1px solid var(--hair);background:#fff;border-radius:999px;padding:8px 14px;
    font-size:12.5px;color:var(--muted);white-space:nowrap;transition:.16s cubic-bezier(.4,0,.2,1);
    font-family:var(--font-lang,"Baloo 2"),sans-serif}
  .intents button:hover{border-color:var(--violet);color:var(--ink);transform:translateY(-1px)}
  .intents button.on{background:var(--ink);color:#fff;border-color:var(--ink);
    box-shadow:0 4px 14px -6px rgba(16,19,23,.5)}
  .caption{min-height:3.2em;max-width:min(56ch,94vw);width:100%;display:flex;flex-direction:column;gap:6px;padding:0 6px;min-width:0}
  .caption .you{font-size:13px;color:var(--muted);opacity:.85;overflow-wrap:anywhere}
  .caption .her{font-size:clamp(15px,4.2vw,20px);line-height:1.55;letter-spacing:-.005em;color:var(--ink);overflow-wrap:anywhere}
  .caption .her.is-typing::after{content:"";display:inline-block;width:1.5px;height:.82em;margin-left:.08em;background:currentColor;border-radius:1px;vertical-align:-.06em}
  .prov{align-self:flex-start;margin:0;padding:0;border:0;background:transparent;cursor:pointer;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--muted);
    line-height:1.45;text-align:left;max-width:100%;overflow-wrap:anywhere}
  .prov:hover,.prov:focus-visible{color:var(--ink);outline:none}
  .prov .prov-detail{display:none;margin-top:6px;padding:8px 10px;border-radius:10px;
    background:var(--mist);border:1px solid var(--hair);color:var(--muted);font-size:11.5px;line-height:1.5;
    white-space:pre-wrap;font-family:var(--font-mono);overflow-wrap:anywhere}
  .prov.open .prov-detail{display:block}
  .msg .prov{margin-top:6px;display:block}
  .typebar{display:flex;gap:8px;width:min(520px,94vw)}
  .typebar input{flex:1;min-width:0;font-size:16px;padding:13px 18px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink);box-shadow:var(--lift);transition:border-color .2s}
  .typebar input:focus{outline:none;border-color:var(--violet)}
  .typebar input::placeholder{color:#AEB5C0}
  .typebar button{background:var(--ink);color:#fff;border-radius:999px;padding:0 18px;font-size:14px;white-space:nowrap;font-family:"Baloo 2",sans-serif;flex:none}
  .confirm{display:flex;gap:8px;justify-content:center;width:min(520px,94vw);margin:8px 0 0}
  .confirm button{border:1px solid var(--hair);background:#fff;color:var(--ink);border-radius:999px;padding:10px 18px;font-size:14px;font-family:"Baloo 2",sans-serif;box-shadow:var(--lift)}
  .confirm button.yes{background:var(--ink);color:#fff;border-color:transparent}
  .hide{display:none !important}

  .pass{border:1px solid var(--hair);border-radius:20px;background:#fff;box-shadow:var(--lift-lg);padding:clamp(18px,4vw,30px);width:min(430px,94vw);text-align:left;min-width:0}
  .price{font-family:var(--font-display);font-size:clamp(36px,10vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1}
  .price s{font-family:"Baloo 2",sans-serif;font-size:14px;font-weight:400;color:var(--muted);text-decoration:none;margin-left:8px}
  .pass ul{list-style:none;margin:18px 0;display:grid;gap:9px;font-size:14.5px;color:var(--muted)}
  .pass li{display:flex;gap:9px;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
  .pass li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:9px;flex:none;background:linear-gradient(var(--violet),var(--mint))}
  .pass .cta{width:100%;justify-content:center;padding:13px;max-width:none}
  .fine{margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}

  .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);min-width:0}
  .foot .quota,.quota{display:none}
  .foot .mid{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dotline{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--hair);animation:pulse 1.9s infinite;flex:none}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

  .sheet{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);background:#fff;border-left:1px solid var(--hair);transform:translateX(101%);transition:transform .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;z-index:30;
    padding-top:var(--safe-t);padding-bottom:var(--safe-b);padding-right:var(--safe-r);pointer-events:none}
  .sheet.on{transform:none;pointer-events:auto}
  .sheet header{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);border-bottom:1px solid var(--hair);gap:10px}
  .sheet h2{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.02em;min-width:0;overflow-wrap:anywhere}
  .log{flex:1;overflow-y:auto;padding:18px var(--pad);display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch}
  .msg{font-size:14.5px;line-height:1.65;max-width:93%;overflow-wrap:anywhere}
  .msg small{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
  .msg.u{align-self:flex-end;text-align:right;color:var(--muted)}
  .sw{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px}
  .sw input{width:17px;height:17px;accent-color:var(--violet);flex:none;cursor:pointer}
  .note{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.6;overflow-wrap:anywhere}
  .sheet footer{padding:14px var(--pad);border-top:1px solid var(--hair);font-size:12px;color:var(--muted);line-height:1.6;font-family:"Baloo 2",sans-serif;overflow-wrap:anywhere}
  .scrim{position:fixed;inset:0;background:rgba(16,19,23,.18);opacity:0;visibility:hidden;transition:.3s;z-index:29;pointer-events:none}
  .scrim.on{opacity:1;visibility:visible;pointer-events:auto}
  .toast{position:fixed;left:50%;bottom:calc(16px + var(--safe-b));transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13.5px;padding:10px 18px;border-radius:999px;opacity:0;transition:.3s;pointer-events:none;z-index:40;max-width:min(92vw,420px);text-align:center;line-height:1.5;overflow-wrap:anywhere}
  .toast.on{opacity:1;transform:translate(-50%,0)}
  /* Shadow island: fixed descendants resolve against the host / transformed ancestors
     and get clipped. Pin overlay chrome to the host instead. */
  :host .sheet,:host .scrim{position:absolute}
  :host .sheet{width:min(430px,100%)}
  :host .toast{position:absolute}

  @media (max-width:760px){
    .nav{display:none}.navm{display:flex}
    .brand{padding:7px 10px 7px 11px}.brand b{font-size:15px}.brand b span{display:none}
    .lang{padding:7px 10px;font-size:12px;max-width:34vw}
    .lang svg{display:none}
    .cta{padding:8px 8px 8px 12px;font-size:12.5px;max-width:38vw}.cta .disc{width:22px;height:22px;font-size:11px}
    .navm .icon-btn{width:40px;height:40px}
    .foot .mid{display:none}.foot{font-size:11.5px;gap:8px}
    .ring{width:min(36vh,74vw)}
    #view-live .ring{width:min(22vh,50vw)}
    #view-home.is-waitlist .ring{width:min(28vh,56vw,240px)}
    #view-home.is-waitlist{gap:clamp(6px,1.2vh,10px)}
    .talk{padding:13px 22px;font-size:14.5px}
    .intents button{padding:7px 12px;font-size:12px}
    .caption .her{font-size:15.5px}
    .typebar input{font-size:16px} /* prevents iOS zoom */
    .shell{gap:6px}
  }
  @media (max-width:420px){
    #view-home.is-waitlist .typebar{flex-direction:column;align-items:stretch;gap:10px}
    #view-home.is-waitlist .typebar button{width:100%;border-radius:999px;padding:14px 18px}
  }
  @media (max-width:380px){
    .left{gap:6px}
    .cta #cta-label{display:none}
    .cta{padding:8px;max-width:none}
    .lang{max-width:40vw}
    h1{font-size:22px;max-width:14ch}
    #view-home.is-waitlist .ring{width:min(26vh,70vw,220px)}
  }
  @media (orientation:landscape) and (max-height:500px){
    .shell{gap:4px;padding-top:calc(6px + var(--safe-t));padding-bottom:calc(6px + var(--safe-b))}
    .ring{width:min(28vh,34vw)}
    #view-live .ring{width:min(20vh,28vw)}
    #view-home{justify-content:flex-start;padding-top:2px}
    #view-home.is-waitlist{justify-content:center;gap:4px;padding-top:0}
    #view-home.is-waitlist .ring{width:min(30vh,28vw,200px)}
    h1{font-size:clamp(18px,5vh,28px)}
    .sub{font-size:13px;line-height:1.4}
    .chips{display:none}
    .view{gap:6px}
    .caption{min-height:2.4em}
    .caption .her{font-size:14.5px;line-height:1.4}
  }
  @media (display-mode:standalone), (display-mode:fullscreen){
    body{background:#fff}
  }
  @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}