:root{--bg:#f2f5f7;--fg:#1e1826;--panel:#f2f5f7;--accent:#00d2ff;--onAccent:#1e1826;--edge:#1e1826;--r:14px;--bw:1px;--gap:12px;--tap:48px;--joy:88px;color-scheme:light dark}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{background:var(--bg);color:var(--fg)}
body{margin:0;font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
#map{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:0;display:block}
.face{position:relative;z-index:1;height:100vh;height:100dvh;max-width:1280px;margin:0 auto;padding:var(--gap);display:grid;gap:var(--gap);overflow:hidden}
.card{border:var(--bw) solid var(--edge);border-radius:var(--r);padding:12px;background:var(--panel);min-width:0;min-height:0}
.hello{grid-area:hello;display:flex;align-items:center;gap:10px;padding:8px 12px}
.map{grid-area:map;padding:0;background:transparent;border:0;min-height:0}
#mapwin{width:100%;height:100%;min-height:80px;border-radius:var(--r);touch-action:none;cursor:pointer;box-shadow:inset 0 0 0 2px var(--edge)}
.side{grid-area:side;display:flex;flex-direction:column;gap:6px;overflow:hidden;min-height:0;min-width:0}
.tabs{display:flex;gap:6px;flex:none}
.tabs [role=tab]{flex:1 1 0;text-align:center;min-height:44px;padding:4px 8px}
.tabs [role=tab][aria-selected=true]{background:var(--accent);color:var(--onAccent)}
.sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;flex:none;font-size:.9rem}
.seal{font-size:.68rem;font-weight:800;letter-spacing:.06em;border:1px solid var(--edge);border-radius:999px;padding:0 8px}
.sheet-head .small{width:100%;margin:0;opacity:.85}
.side .say{flex:none}
.sheets{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;position:relative}
.sheets [role=tabpanel]{display:flex;flex-direction:column;gap:8px}
.sheets [hidden]{display:none}
.worm{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
#b-receipt{font-size:.68rem;margin:0}
h1{font-size:1.15rem;line-height:1.15;margin:0;font-weight:700}
.how{margin:2px 0 0;font-size:.85rem}
#head{width:46px;height:46px;flex:none}
.log{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.log li{border:var(--bw) solid var(--edge);border-radius:12px 12px 12px 4px;padding:6px 10px;max-width:98%}
.log li.me{justify-self:end;border-radius:12px 12px 4px 12px;background:var(--accent);color:var(--onAccent)}
.who{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.say{margin:0;padding:6px 10px;border-left:4px solid var(--accent);font-weight:600;font-size:.95rem}
button,input{font:inherit;color:inherit;min-height:var(--tap);border-radius:12px}
button{cursor:pointer;border:var(--bw) solid var(--edge);background:var(--panel);font-weight:650;padding:6px 12px;touch-action:manipulation;text-align:left;min-width:44px}
button:disabled{opacity:.5;cursor:default}
button[aria-pressed=true],.go:not(:disabled){background:var(--accent);color:var(--onAccent)}
.counter[hidden]{display:none}
.counter dt{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.counter dd{margin:0;font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}
.counter .wide dd{font-size:.75rem;font-weight:600}
.counter p{margin:0;font-size:.7rem;width:100%}
.tasks{display:none}
.ask{margin:0 0 8px}
.ask label{display:block;font-weight:700;margin-bottom:4px;font-size:.9rem}
.ask div{display:flex;gap:8px}
input{flex:1;min-width:0;border:var(--bw) solid var(--edge);background:var(--bg);padding:6px 10px}
.tools{display:flex;flex-wrap:wrap;gap:6px}
.small{font-size:.8rem;margin:4px 0 0}
.skins{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.skins a{color:inherit;font-weight:700;min-height:44px;display:inline-flex;align-items:center;padding:0 10px;border:1px dashed var(--edge);border-radius:12px;font-size:.9rem}
.skins a[aria-current=page]{background:var(--accent);color:var(--onAccent);border-style:solid}
details{margin-top:8px;border-top:1px dashed var(--edge);padding-top:4px}
summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
details ul{padding-left:1.1em;margin:4px 0;font-size:.85rem}
code,pre{font:.75rem/1.3 ui-monospace,"Cascadia Mono",Menlo,monospace}
pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0}
:focus-visible{outline:4px solid var(--accent);outline-offset:2px}
#joy{width:var(--joy);height:var(--joy);border-radius:50%;touch-action:none;display:block}
.map{position:relative}
.pad{position:absolute;right:8px;bottom:8px;z-index:3;padding:0;border:0;background:transparent;display:block}
:root{--joy:88px;--icon:48px}
.mapbtns{position:absolute;left:8px;bottom:8px;z-index:3;display:flex;gap:6px}
button.icon{width:var(--icon);height:var(--icon);min-height:0;padding:2px;display:grid;place-items:center;border-radius:50%;background:var(--panel)}
button.icon canvas{width:calc(var(--icon) - 10px);height:calc(var(--icon) - 10px);display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.counter{position:absolute;left:8px;top:8px;z-index:3;margin:0;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 16px);padding:4px 8px;border:var(--bw) solid var(--edge);border-radius:12px;background:var(--panel)}
.counter div{display:flex;gap:4px;align-items:baseline}
.toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;margin:0;padding:8px 14px;max-width:80%;text-align:center;font-weight:800;border:var(--bw) solid var(--edge);border-radius:14px;background:var(--panel);color:var(--fg);cursor:pointer}
.offer{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:5;width:min(90%,360px);padding:12px;border:var(--bw) solid var(--edge);border-radius:16px;background:var(--panel);color:var(--fg);box-shadow:0 8px 0 var(--edge)}
.offer p{margin:0 0 8px;font-weight:700}
.offer[hidden],.toast[hidden]{display:none}
.face{grid-template-columns:minmax(0,1fr)}
[data-layout=quiet] .face{max-width:1000px;grid-template-rows:auto minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"hello" "map" "side"}
[data-layout=quiet] .hello{padding:4px 12px}
body[data-layout=zones]{--r:24px;--bw:4px;--tap:56px;--joy:96px;--icon:56px;font-size:18px}
[data-layout=zones] .face{grid-template-columns:minmax(0,1fr) minmax(220px,.32fr);grid-template-rows:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"map hello" "side hello"}
[data-layout=zones] .hello{flex-direction:column;justify-content:center;text-align:center}
[data-layout=zones] #head{width:120px;height:120px}
[data-layout=zones] h1{font-size:1.5rem}
body[data-layout=terminal]{--r:4px;--bw:3px;--gap:8px;--joy:84px;font-family:ui-monospace,"Cascadia Mono",Menlo,monospace}
[data-layout=terminal] .face{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"hello map" "hello side"}
[data-layout=terminal] .hello{writing-mode:vertical-rl;transform:rotate(180deg);padding:10px 6px}
[data-layout=terminal] .hello .how{display:none}
[data-layout=terminal] button.icon{border-radius:4px}
[data-layout=terminal] .map{padding:6px;border:5px ridge var(--edge);border-radius:6px}
[data-layout=quiet] .card{border-color:color-mix(in srgb,var(--edge) 22%,transparent)}
[data-layout=zones] .card{box-shadow:0 6px 0 var(--edge)}
[data-layout=zones] button{border-radius:20px;text-align:center}
[data-layout=terminal] .card{border-style:ridge;border-width:5px;background:radial-gradient(circle at 9px 9px,var(--edge) 3px,transparent 4px),radial-gradient(circle at calc(100% - 9px) 9px,var(--edge) 3px,transparent 4px),radial-gradient(circle at 9px calc(100% - 9px),var(--edge) 3px,transparent 4px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),var(--edge) 3px,transparent 4px),var(--panel)}
[data-layout=terminal] #mapwin{border-radius:16px;box-shadow:inset 0 0 0 5px var(--accent),inset 0 0 40px rgba(0,0,0,.45)}
[data-layout=terminal] .chat::before{content:"Radio log · channel 1" / "";display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;border-bottom:2px dashed var(--edge)}
[data-layout=terminal] .log li{border:0;border-left:3px solid var(--edge);border-radius:0;padding:3px 8px}
[data-layout=terminal] .log li.me{border-left-color:var(--accent);background:none;color:var(--fg)}
[data-layout=terminal] button{border-radius:2px;text-transform:uppercase;letter-spacing:.02em;font-size:.85rem}
[data-layout=terminal] h1{text-transform:uppercase;letter-spacing:.08em;text-shadow:0 0 6px var(--accent)}
@media (max-width:760px) and (orientation:portrait){
.face{padding:6px;gap:6px}.how{display:none}.card{padding:8px}
.sheet-head .small{display:none}
:root{--joy:76px;--icon:46px}
[data-layout=quiet] .hello{display:none}
[data-layout=quiet] .face{grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"map" "side"}
body[data-layout=zones]{--joy:84px;--icon:50px;font-size:17px}
[data-layout=zones] .face{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"map" "side" "hello"}
[data-layout=zones] .hello{flex-direction:row;padding:4px 10px}[data-layout=zones] #head{width:40px;height:40px}[data-layout=zones] h1{font-size:1.1rem}
body[data-layout=terminal]{--joy:72px}
[data-layout=terminal] .face{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hello" "map" "side"}
[data-layout=terminal] .hello{writing-mode:horizontal-tb;transform:none;padding:4px 10px}[data-layout=terminal] #head{width:30px;height:30px}[data-layout=terminal] h1{font-size:.95rem}
}
@media (orientation:landscape) and (max-height:560px){
.face{padding:6px;gap:6px}.how{display:none}.card{padding:6px 8px}.hello{padding:4px 8px}#head{width:30px;height:30px}h1{font-size:.95rem}
:root{--joy:min(30vh,76px);--icon:44px}
body[data-layout=zones]{--joy:min(30vh,80px);--icon:44px;font-size:16px}
body[data-layout=terminal]{--joy:min(28vh,72px)}
[data-layout=quiet] .face{max-width:none;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"map" "side"}
[data-layout=quiet] .hello{display:none}
[data-layout=zones] .face{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"map hello" "side hello"}
[data-layout=zones] .hello{flex-direction:column;max-width:110px}[data-layout=zones] #head{width:44px;height:44px}[data-layout=zones] h1{font-size:.9rem}
[data-layout=terminal] .face{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hello map" "hello side"}
.counter p{display:none}.counter{font-size:.8rem}
.side .say{font-size:.8rem;line-height:1.25;padding:4px 8px;max-height:4em;overflow:hidden}.sheet-head .small{display:none}.tabs [role=tab]{min-height:44px;padding:2px 6px;font-size:.85rem}.side{gap:4px}
}
.side .say{order:-1}
.side{position:relative}
.worm{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media (prefers-contrast:more){.card,button,.log li{border-width:4px}}
@media (forced-colors:active){button[aria-pressed=true],.go{outline:3px solid CanvasText}.card{box-shadow:none;background:Canvas}}
.toast,.offer{border:3px solid var(--edge);box-shadow:6px 6px 0 var(--edge);border-radius:14px}
.toast::after,.offer::after{content:"";position:absolute;left:28px;bottom:-14px;border:12px solid transparent;border-top-color:var(--edge);border-bottom:0}
@media (max-height:300px){.sheet-head{display:none}.side .say{max-height:2.6em}.tabs [role=tab]{min-height:44px}}
.hello{justify-content:center;padding:4px}
[data-layout=zones] .face{grid-template-columns:minmax(0,1fr) auto}
[data-layout=zones] .hello{max-width:96px}
[data-layout=zones] #head{width:72px;height:72px}
@media (max-width:760px) and (orientation:portrait){.hello{padding:2px}#head,[data-layout=zones] #head,[data-layout=terminal] #head{width:34px;height:34px}[data-layout=zones] .hello{max-width:none}}
@media (max-width:760px) and (orientation:portrait){.hello,[data-layout=zones] .hello,[data-layout=terminal] .hello{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}}
.sheet-head{align-items:center}
button.speak{--icon:44px;margin-left:auto}
.radio{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 8px;border:2px dashed var(--accent);border-radius:12px;max-height:5.2em;overflow:auto}
.radio[hidden]{display:none}
.radio b{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.radio button{min-height:44px;padding:2px 10px;font-size:.85rem}
@media (max-height:300px){.sheet-head{display:flex}.sheet-head #sheet-seal,.sheet-head .small{display:none}.radio{max-height:2.6em}}
.radio-line{flex:1 1 60%;font-size:.8rem;line-height:1.3;max-height:2.6em;overflow:hidden}
.side .say{position:absolute;width:1px;height:1px;max-height:none;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;border:0}
.viewbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:none}
.viewbar .tabs{display:flex;gap:6px;flex:1 1 auto}
.viewbar [role=tab]{flex:0 0 auto;width:48px;height:48px;min-height:0;padding:3px;display:grid;place-items:center;border-radius:14px}
.viewbar [role=tab] canvas{width:38px;height:38px;display:block}
.viewbar [role=tab][aria-selected=true]{background:var(--accent);box-shadow:0 0 0 3px var(--edge)}
.viewbar .radio{flex:1 1 100%}
.chatbox{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}
.chatbox .log{flex:1 1 auto;min-height:0;overflow:auto;max-height:none;margin:0}
.chatbox .ask{margin:0;flex:none}