/* Jarvis · the demo tour (scene 0.3, A6) and the sample world it plays in: people chat, weekend, Files, Go.
   Colours come from tokens.css only. */

/* ── the sample panels appear while exploring ── */
body.explore .panel.soon[data-tab="files"],body.explore .panel.soon[data-tab="go"]{display:flex;flex:1 1 100%}
body.explore .panel.soon[data-tab="chats"]{display:none}
.sample{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 8px;background:var(--warn);color:var(--warn-ink)}
.panel h2 em{font:italic 400 1em var(--serif)}

/* ── people chat (free, never calls the AI) ── */
.people{display:flex;flex-direction:column;gap:12px}
.threads{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.threads::-webkit-scrollbar{display:none}
.th{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:5px;width:70px;flex:none;font-size:12px;position:relative;padding:0;color:var(--ink)}
.th .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:800 17px var(--display);color:var(--av-ink);border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line)}
.th[aria-pressed="true"] .av{box-shadow:0 0 0 2px var(--ink)}
.th .un{position:absolute;top:0;right:6px;font:400 10px var(--mono);background:var(--ink);color:var(--paper);border-radius:999px;padding:1px 6px}
.th .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.th.add .av{background:transparent;border:1.5px dashed var(--muted);box-shadow:none;color:var(--muted);font-weight:400;font-size:24px}
.thead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.thead b{font:700 17px var(--display)}
.thead span{font-size:12.5px;color:var(--muted)}
.free{font:400 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 9px;background:color-mix(in srgb,var(--acc) 25%,transparent)}
.pmsgs{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding:2px}
.pm{max-width:84%;display:flex;flex-direction:column;gap:3px;align-self:flex-start;position:relative}
.pm.mine{align-self:flex-end;align-items:flex-end}
.pm .who{font-size:11.5px;color:var(--muted);padding:0 6px}
.pm .bb{padding:10px 14px;border-radius:20px;font-size:14.5px;line-height:1.4;border:1px solid var(--line);background:var(--card);border-bottom-left-radius:6px;text-align:left;color:var(--ink)}
.pm.mine .bb{background:var(--ink);color:var(--paper);border-color:var(--ink);border-bottom-left-radius:20px;border-bottom-right-radius:6px}
.pm.ai .bb{border-color:color-mix(in srgb,var(--acc) 60%,var(--line));background:color-mix(in srgb,var(--acc) 10%,var(--card))}
.rx{display:flex;gap:4px;flex-wrap:wrap}
.rx span{font-size:12px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:2px 8px}
.rxpick{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 8px 20px -10px var(--shadow-deep)}
.rxpick button{border:0;background:transparent;border-radius:999px;padding:5px 9px;font-size:13px;color:var(--ink)}
.tok{font:400 10px var(--mono);letter-spacing:.06em;color:var(--warn-ink);background:var(--warn);border-radius:999px;padding:2px 8px;align-self:flex-start}
.vn{display:flex;align-items:center;gap:10px}
.vn .pb{width:34px;height:34px;border-radius:50%;border:0;background:var(--acc);color:var(--acc-ink);font-size:12px;flex:none}
.vn .wv{display:flex;gap:2px;align-items:center;height:24px}
.vn .wv i{width:3px;border-radius:2px;background:currentColor;opacity:.55}
.vn .tt{font-size:12.5px;opacity:.75;margin-top:6px;font-style:italic}
.poll{display:flex;flex-direction:column;gap:6px;min-width:220px}
.poll button{position:relative;border:1px solid var(--line);background:transparent;border-radius:12px;padding:8px 10px;text-align:left;font-size:13.5px;overflow:hidden;color:inherit}
.poll button i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--acc) 30%,transparent);transition:width .8s var(--ease)}
.poll button span{position:relative;display:flex;justify-content:space-between;gap:8px}
.slst{display:flex;flex-direction:column;gap:4px;min-width:200px}
.slst label{display:flex;gap:8px;align-items:center;font-size:14px}
.slst input,.pack input{accent-color:var(--acc);width:16px;height:16px}
.compose{display:flex;gap:8px;align-items:center}
.compose input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:12px 16px;font:300 15px var(--body);color:var(--ink)}
.sugg{display:flex;gap:6px;flex-wrap:wrap}
.sugg button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 11px;font-size:12.5px;color:var(--ink)}
.sugg button.ai{border-color:color-mix(in srgb,var(--acc) 60%,var(--line))}
.meter{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.meter b{font:500 12.5px var(--mono);color:var(--ink)}
.mic.on{background:var(--acc);border-color:transparent;color:var(--acc-ink);animation:mpulse 1.2s ease-out infinite}
@keyframes mpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.dictbar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.dictbar .w{display:flex;gap:2px;align-items:center;height:16px}
.dictbar .w i{width:3px;height:16px;border-radius:2px;background:var(--acc);animation:dbar .8s ease-in-out infinite}
@keyframes dbar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* ── the weekend view ── */
.wkx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wkx div{border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:var(--card)}
.wkx span{font:400 10px var(--mono);letter-spacing:.12em;color:var(--muted)}
.wkx b{font:700 18px var(--display)}
.wkx em{font-style:normal;font-size:12.5px;color:var(--ink2)}
.wplan{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wp{border:1px solid var(--line);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.wp .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.wp h3{font-size:16px;font-weight:700}
.wp .when{font:400 11.5px var(--mono);color:var(--muted)}
.wp p{margin:0;font-size:13.5px;color:var(--ink2)}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.act{border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--card)}
.act b{font-weight:500;font-size:14px}
.act span{font-size:12.5px;color:var(--muted)}
.pack{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px}
.pack label{display:flex;gap:8px;align-items:center;font-size:13.5px}
.pack label i{font:normal 400 10.5px var(--mono);color:var(--muted);margin-left:auto}
.sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.site{border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.site b{font-size:14px;font-weight:600}
.site.pick{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 40%,transparent)}

/* ── Go: the offline map and the SIM ── */
.sig{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 14px;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.sig i{width:9px;height:9px;border-radius:50%;background:var(--signal-on)}
.sig[aria-pressed="true"] i{background:var(--signal-off)}
.gogrid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.mapcol{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.simcol{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px}
.mapbox{position:relative;width:100%;aspect-ratio:1000/640;max-width:100%;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--map-bg)}
.mapbox canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.route path{stroke:var(--acc-deep);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 12;fill:none}
:root[data-theme="dark"] .route path{stroke:var(--acc)}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;padding:0}
.pin .p{width:38px;height:38px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 6px 12px -4px var(--pin-shadow);border:3px solid var(--pin-line)}
.pin .p svg{width:18px;height:18px;transform:rotate(45deg);fill:none;stroke:var(--pin-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pin b{font-size:11.5px;font-weight:600;background:var(--pin-label);color:var(--pin-ink);border-radius:999px;padding:2px 8px;white-space:nowrap}
.pin.hl .p{animation:bob 1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(3px,-3px)}}
.medot{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);transition:left 1.2s linear,top 1.2s linear}
.medot i{position:absolute;inset:4px;border-radius:50%;background:var(--me-dot);border:3px solid var(--me-line)}
.medot::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:var(--me-halo);animation:mepulse 2s ease-out infinite}
@keyframes mepulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.3);opacity:0}}
.offline{position:absolute;left:12px;top:12px;right:12px;max-width:360px;background:var(--overlay);color:var(--overlay-ink);border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.offline b{font-size:14px;font-weight:600}
.mapcap{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;pointer-events:none}
.mapcap span{font:400 10.5px var(--mono);letter-spacing:.06em;background:var(--pin-label);color:var(--pin-ink);border-radius:999px;padding:4px 10px}
.mapcap .ok{background:var(--tour);color:var(--vault-ink)}
.bigbtns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.big{border:2px solid var(--line);background:var(--card);border-radius:22px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;font:700 15px var(--display);color:var(--ink)}
.big svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.big.on{background:var(--acc);border-color:transparent;color:var(--acc-ink)}
.nav{display:flex;align-items:center;gap:14px;background:var(--tour);color:var(--tour-ink);border-radius:22px;padding:14px 16px}
.nav .arrow{width:56px;height:56px;border-radius:16px;background:var(--acc);color:var(--acc-ink);font-size:32px;font-weight:800;display:grid;place-items:center;flex:none}
.nav > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nav b{font:800 20px var(--display)}
.nav span{font-size:13.5px;opacity:.8}
.pill2{border:0;border-radius:999px;padding:10px 16px;background:var(--tour-btn);color:var(--tour-ink);font-weight:500}
.simcard,.dl{border:1px solid var(--line);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--card)}
.simtop{display:flex;gap:12px;align-items:center}
.simtop b{font:800 20px var(--display);display:block;letter-spacing:-.02em}
.simtop span{font-size:13px;color:var(--muted)}
.flag{width:46px;height:32px;border-radius:7px;flex:none;box-shadow:0 0 0 1px var(--line);background:var(--flag-sc)}
.flag.ca{background:var(--flag-ca)}
.chipsw{display:flex;flex-direction:column;gap:8px}
.sim{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:10px 12px;transition:background .6s,border-color .6s}
.sim .chip3{width:30px;height:24px;border-radius:6px;background:var(--chip-gold);position:relative;flex:none}
.sim .chip3::after{content:"";position:absolute;inset:6px 8px;border:1.5px solid var(--chip-gold-line);border-radius:3px}
.sim > div{flex:1;min-width:0;display:flex;flex-direction:column}
.sim b{font-size:14.5px;font-weight:600}
.sim span{font-size:12.5px;color:var(--muted)}
.sim em{font:normal 400 10px var(--mono);letter-spacing:.12em;border-radius:999px;padding:3px 9px;border:1px solid var(--line);color:var(--muted)}
.sim.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--card))}
.sim.on em{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.data{display:flex;flex-direction:column;gap:6px}
.data .l{display:flex;justify-content:space-between;font-size:14px}
.data .l b{font:500 12.5px var(--mono)}
.small{font-size:12.5px;color:var(--muted)}
.rowx{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:500}
.sw2{width:52px;height:30px;border-radius:999px;border:0;background:var(--switch-off);position:relative;padding:0;flex:none}
.sw2 i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--knob);transition:left .3s}
.sw2[aria-checked="true"]{background:var(--ink)}
.sw2[aria-checked="true"] i{left:25px}
.dlrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dlrow > div{display:flex;flex-direction:column}
.dlrow b{font-size:15px;font-weight:600}
.dlrow span{font-size:12.5px;color:var(--muted)}
.okp{font:400 11px var(--mono);letter-spacing:.08em;background:color-mix(in srgb,var(--acc) 25%,transparent);color:var(--ink);border-radius:999px;padding:5px 10px;white-space:nowrap}
.landing{position:fixed;inset:0;z-index:35;background:var(--landing-scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.landing .lb{background:var(--card);border-radius:28px;padding:24px;width:min(420px,100%);display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.landing .lb h3{font-size:24px;font-weight:800}
.landing .lb p{margin:0;color:var(--ink2);font-size:15px}
.swap{display:flex;align-items:center;gap:14px;height:70px}
.swap .c{width:56px;height:44px;border-radius:10px;background:var(--chip-gold);display:grid;place-items:center;font:600 10px var(--mono);color:var(--chip-gold-ink);transition:transform .9s var(--ease),opacity .9s}
.swap .c.out{transform:translateY(24px) scale(.8);opacity:.35}
.swap .c.in2{transform:translateY(-6px) scale(1.12);box-shadow:0 0 0 3px var(--acc)}
.swap .ar{font-size:22px;color:var(--muted)}

/* ── Files ── */
.fsearch{display:flex;gap:8px;align-items:center}
.fsearch input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:14px 18px;font:300 16px var(--body);color:var(--ink)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.fold2{border:2px solid var(--line);background:var(--card);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;color:var(--ink);transition:transform .2s,border-color .2s}
.fold2:hover{border-color:var(--fc);transform:translateY(-2px)}
.fold2 b{font:700 17px/1.2 var(--display)}
.fold2 > span:last-child{font-size:13px;color:var(--muted)}
.fic{width:52px;height:52px;border-radius:16px;background:var(--fc);display:grid;place-items:center}
.fic svg{width:28px;height:28px;fill:none;stroke:var(--pin-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fold2[data-id="vault"] .fic svg,.locked .fic svg{stroke:var(--vault-ink)}
.fic.big{width:72px;height:72px;border-radius:22px}
.fhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.fhead b{font:800 20px var(--display);flex:1}
.flist{display:flex;flex-direction:column}
.frow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ft{font:500 10px var(--mono);letter-spacing:.06em;width:40px;height:46px;border-radius:9px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;flex:none;background:var(--paper);border:1px solid var(--line)}
.ft-pdf{background:var(--ft-pdf-bg);color:var(--ft-pdf);border-color:transparent}
.ft-img{background:var(--ft-img-bg);color:var(--ft-img);border-color:transparent}
.ft-rec{background:var(--ft-rec-bg);color:var(--ft-rec);border-color:transparent}
.ft-key,.ft-doc{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--ink);border-color:transparent}
.fi{flex:1;min-width:0;display:flex;flex-direction:column}
.fi b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offl{font:400 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 8px;background:color-mix(in srgb,var(--acc) 25%,transparent);white-space:nowrap}
.fbtn{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink)}
.exp{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:20px;padding:14px 16px;background:color-mix(in srgb,var(--acc) 8%,var(--card));margin-bottom:6px}
.exp > div{display:flex;flex-direction:column;gap:2px}
.exp b{font:800 28px var(--display);letter-spacing:-.02em}
.exp span:last-child{font-size:13px;color:var(--muted)}
.locked{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 0;text-align:center}
.locked b{font:800 22px var(--display)}
.locked > span{color:var(--muted)}

/* ── what the tour adds to the conversation ── */
#feed{display:flex;flex-direction:column;gap:10px}
.oncard,.bub{transition:opacity .5s ease,transform .7s var(--ease)}
.enter{opacity:0;transform:translateY(18px)}
.bub{max-width:88%;padding:11px 15px;border-radius:20px;font-size:14.5px;line-height:1.45}
.bub.mine{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:6px}
.bub.j{align-self:flex-start;border:1px solid var(--line);border-bottom-left-radius:6px}
.bub .who{display:block;font:400 10px var(--mono);letter-spacing:.14em;opacity:.6;margin-bottom:3px}
.receipt{font:400 11.5px var(--mono);color:var(--muted);opacity:0;transition:opacity .5s}
.receipt.in{opacity:1}
.count{font:800 44px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fold{display:flex;flex-direction:column;gap:6px}
.fold .row{display:flex;justify-content:space-between;font-size:14px}
.fold .row b{font:500 14px var(--mono)}
.track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width 1.4s var(--ease)}
.tag.r{background:var(--risk-bg);color:var(--risk-ink);border-color:transparent}
.oncard ul.warn li::before{content:"!  ";color:var(--danger)}
.flight{display:flex;justify-content:space-between;align-items:center}
.flight .ap{font:800 30px/1 var(--display);letter-spacing:-.02em}
.flight .ap small{display:block;font:400 10.5px var(--mono);letter-spacing:.1em;color:var(--muted);margin-top:4px}
.flight .ln{flex:1;height:2px;margin:0 12px;background:repeating-linear-gradient(90deg,var(--muted) 0 4px,transparent 4px 8px);position:relative}
.flight .ln i{position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--acc);transition:left 2.4s var(--ease)}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kv div{border:1px solid var(--line);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column}
.kv span{font:400 9.5px var(--mono);letter-spacing:.12em;color:var(--muted)}
.kv b{font:700 17px var(--display)}
.slist{display:flex;flex-direction:column;gap:5px;font-size:14px}
.slist div{display:flex;gap:8px;align-items:center}
.slist .bx{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--ink);display:inline-grid;place-items:center;font-size:11px;flex:none}
.slist .bx.on{background:var(--ink);color:var(--paper)}
.files{display:flex;flex-direction:column;gap:3px;font:400 11.5px var(--mono);color:var(--muted);max-height:120px;overflow:hidden;transition:max-height .6s ease}
.files div{transition:opacity .4s,transform .5s}
.files div.go{opacity:0;transform:translateX(30px)}
.tree{display:flex;flex-direction:column;gap:5px;font-size:14px}
.tree div{display:flex;justify-content:space-between;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s}
.tree div.in{opacity:1;transform:none}
.tree b{font:500 12.5px var(--mono)}
.scan{position:relative;height:120px;border-radius:16px;background:var(--scan-bg);overflow:hidden}
.scan .doc{position:absolute;top:14px;bottom:14px;left:30%;right:30%;background:var(--doc);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:5px}
.scan .doc i{height:4px;border-radius:2px;background:var(--doc-line);display:block}
.scan .beam{position:absolute;left:24%;right:24%;height:2px;background:var(--acc);box-shadow:0 0 12px var(--acc);top:14px;transition:top 1.6s ease-in-out}
.callc{display:flex;align-items:center;gap:14px}
.callc .av{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--orb-light),var(--acc) 60%,var(--acc-deep));flex:none;animation:callring 1.2s ease-out infinite}
@keyframes callring{0%{box-shadow:0 0 0 0 var(--acc)}100%{box-shadow:0 0 0 16px transparent}}
.flash{animation:flash 1.2s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--acc)}40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.press{transform:scale(.94)!important;transition:transform .15s}

/* the finger that shows what the tour taps */
#finger{position:fixed;width:42px;height:42px;border-radius:50%;background:var(--finger);border:2px solid var(--finger-line);box-shadow:0 0 0 1px var(--finger-edge);pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%);transition:left .6s var(--ease),top .6s var(--ease),opacity .3s,transform .15s}
#finger.tap{transform:translate(-50%,-50%) scale(.7)}

/* ── the tour bar ── */
#tour{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:min(720px,calc(100vw - 32px));background:var(--tour);color:var(--tour-ink);border:1px solid var(--tour-line);border-radius:24px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 50px -20px var(--shadow-deep)}
#tour .row{display:flex;align-items:center;gap:8px}
#tour button{border:0;border-radius:999px;font-weight:500;font-size:14px;padding:9px 14px;background:var(--tour-btn);color:inherit;white-space:nowrap}
#tour button.go{background:var(--acc);color:var(--acc-ink);font:800 14px var(--display)}
#tour .cap{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
#tour .cap b{font:500 11px var(--mono);letter-spacing:.14em;opacity:.7;display:block;text-transform:uppercase}
#tour .pg{height:3px;border-radius:2px;background:var(--tour-track);overflow:hidden}
#tour .pg i{display:block;height:100%;width:0;background:var(--acc)}
#tour .steps{display:flex;gap:4px;flex-wrap:wrap}
#tour .steps button{padding:5px 9px;font:400 11.5px var(--mono);background:transparent;border:1px solid var(--tour-chip-line)}
#tour .steps button[aria-current="true"]{background:var(--acc);color:var(--acc-ink);border-color:transparent}
#tour.mini .steps,#tour.mini .pg{display:none}
body.touring .chats{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.wrap{padding-bottom:200px}

@media (max-width:760px){
  .bigbtns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big{flex-direction:row;justify-content:flex-start;padding:14px;font-size:16px}
  .big svg{width:30px;height:30px}
  .mapbox{aspect-ratio:auto;height:330px}
  .wkx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fold2{padding:14px}
  .fbtn{display:none}
  body.explore .grid > .panel.soon{display:none}
  body.explore .grid > .panel.soon.show{display:flex}
  #tour{bottom:calc(74px + env(safe-area-inset-bottom,0px));border-radius:20px;padding:8px 10px}
  #tour .row{flex-wrap:wrap;gap:6px}
  #tour .cap{order:-1;flex:1 1 100%;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #tour .sound{margin-left:auto}
  #tour .steps{display:none}
  .wrap{padding-bottom:calc(230px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.medot::before,.pin.hl .p,.callc .av,.mic.on,.dictbar .w i{animation:none}}
.sr{position:absolute;left:-9999px}
body.explore .panel[data-tab="files"]:not([data-sample]){display:none!important}