:root{
  --bg:#E6EAEF; --surface:#F7F9FB; --ink:#161C26; --rule:#C7CED8; --pain:#C8325F; --steel:#3B4552; --edge:#8D99A6;
  box-sizing:border-box;color-scheme:light dark;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0E1117;--surface:#171C25;--ink:#E4E8EE;--rule:#2A3240;--pain:#E9678C;--steel:#B9C2CC;--edge:#FFFFFF}}
:root[data-theme="dark"]{--bg:#0E1117;--surface:#171C25;--ink:#E4E8EE;--rule:#2A3240;--pain:#E9678C;--steel:#B9C2CC;--edge:#FFFFFF}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:system-ui,sans-serif;overflow-x:hidden;padding-top:env(safe-area-inset-top,0px)}
body.locked{overflow:hidden}
:focus-visible{outline:2px solid var(--pain);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stage{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:18px clamp(26px,4vw,52px);padding:78px 16px 130px;max-width:1240px;margin:0 auto}
#cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.station{--w:clamp(112px,15vw,168px);position:relative;width:var(--w);padding-top:calc(var(--w)*1.05)}
.scene{position:relative;width:100%;aspect-ratio:100/92}
.prop{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.prop.front{z-index:2}
.bot{position:absolute;left:20%;top:0;width:60%;aspect-ratio:1;background:none;border:0;padding:0;cursor:pointer;border-radius:50%;display:block}
span.bot{cursor:default}
.bot .body{position:absolute;inset:0;z-index:1;transform-origin:50% 88%;will-change:transform}
.bot img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.bot .acc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.burst{position:absolute;z-index:6;right:84%;top:4%;width:58%;opacity:0;pointer-events:none;transition:opacity .08s}
.burst.on{opacity:1}
.burst svg{display:block;width:100%;height:auto;overflow:visible}

.tagrow{position:relative;display:flex;justify-content:center;margin-top:12px}
.tag{display:block;max-width:100%;padding:4px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font:600 13px/1.25 system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine .tag{border-color:var(--pain);color:var(--pain)}
.flag{position:absolute;right:-30px;top:50%;translate:0 -50%;width:26px;height:26px;border-radius:50%;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.station:hover .flag,.flag:focus-visible{opacity:.55}
.flag:hover{opacity:1!important;border-color:var(--rule)}
.flag[aria-pressed="true"]{opacity:.9;color:var(--pain);cursor:default}
@media (hover:none){.flag{opacity:.35}}

.pager{flex-basis:100%;display:flex;justify-content:center;gap:14px;padding-top:26px}
.pager[hidden],.pager .ic[hidden]{display:none}

.info{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;text-decoration:none}
.info.ic{width:44px;height:44px;background:var(--surface)}
.info.x{left:calc(66px + env(safe-area-inset-left,0px))}

.fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));height:58px;padding:0 22px 0 18px;gap:10px;border-radius:999px;font:700 16px system-ui,sans-serif;border:0;background:var(--ink);color:var(--bg);cursor:pointer;z-index:20;box-shadow:0 8px 26px rgba(0,0,0,.35);display:flex;align-items:center}
.fab[hidden],.ic[hidden],[hidden]{display:none!important}

.modal{position:fixed;inset:0;z-index:30;background:rgba(5,8,12,.62);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:18px;width:min(440px,100%);display:grid;gap:16px;max-height:100%;overflow:auto}
.preview{display:flex;justify-content:center;padding-top:34px}
.preview .station{--w:180px;padding-top:0}
.row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.opt{width:50px;height:50px;border-radius:14px;border:1.5px solid var(--rule);background:var(--bg);cursor:pointer;display:grid;place-items:center;padding:5px}
.opt[aria-pressed="true"]{border-color:var(--pain);box-shadow:0 0 0 2px var(--pain)}
.opt svg{width:100%;height:100%;overflow:visible}
.acts{display:flex;justify-content:space-between;align-items:center}
.acts div{display:flex;gap:10px}
.ic{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--rule);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.ic.go{background:var(--pain);border-color:var(--pain);color:#fff}
.ic:disabled{opacity:.4;cursor:wait}

.send{display:flex;gap:10px;align-items:flex-start}
.send .to{flex:none;margin-top:6px}
.msg{flex:1;margin:0;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--bg);border:1.5px dashed var(--rule);font:500 14px/1.5 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere;user-select:all}
#copy .c2,#copy.done .c1{display:none}#copy.done .c2{display:block}
a.ic{text-decoration:none}
.arrive{animation:arrive .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes arrive{from{transform:translateY(-40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.arrive{animation:none}}

.ca{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;z-index:20;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.ca button,.ca a{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;text-decoration:none;font:600 13px system-ui,sans-serif;white-space:nowrap}
.ca a{padding:0 10px}
.ca button:hover,.ca a:hover{background:var(--bg)}
.ca .tk{color:var(--pain);font-weight:800}
.ca .addr{font:500 13px ui-monospace,Menlo,monospace;opacity:.8}
.ca .c2,.ca .done .c1{display:none}.ca .done .c2{display:block;color:#2FA46A}
