@font-face{font-family:"YLD";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(fonts/display-thai.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"YLD";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(fonts/display-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"YLB";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(fonts/body-thai.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
:root{--ink:#0A1012;--ink2:#121B1E;--ink3:#1D2A2E;--line:#2A3A3F;--bone:#F5F2EA;--bone2:#E7E3D8;--mut:#93A5A8;--mut2:#5B6B6E;--lime:#C9FF2F;--red:#E3261B;--emer:#00735A;--amber:#FFD267;--disp:"YLD","Noto Sans Thai",system-ui,sans-serif;--body:"YLB","YLD","Noto Sans Thai Looped","Noto Sans Thai",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;padding:0}
a{color:inherit}
ol,ul{list-style:none;padding:0}
h1,h2{font-family:var(--disp);font-weight:800;line-height:1.22}
small{font-size:.82em}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* kinetic type and odometers */
.kl{display:inline}.kl.out{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.kw{display:inline-block;overflow:hidden;vertical-align:top;padding:.3em .05em .36em;margin:-.3em -.05em -.36em}
.ki{display:inline-block;will-change:transform}
.odo{position:relative;display:inline-flex;font-variant-numeric:tabular-nums;align-items:flex-start}
.odo-box{display:inline-flex;align-items:flex-start}
.od{display:inline-block;height:1.2em;overflow:hidden;line-height:1.2}
.od-c{display:block;will-change:transform}.od-c i{display:block;font-style:normal;height:1.2em;line-height:1.2em}
.od-s{line-height:1.2;white-space:pre}

/* map layers */
#gl,#top{position:fixed;inset:0;width:100%;height:100%;display:block}
#top{cursor:grab;touch-action:none}
#top:active{cursor:grabbing}
body.placing #top{cursor:none}
#pins{position:fixed;inset:0;pointer-events:none;overflow:hidden;clip-path:inset(58px 0 0 0)}
.tether{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.tether path{fill:none;stroke:var(--sel,#D8231A);stroke-width:1.8;stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--sel,#D8231A));opacity:0}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;height:60px;display:flex;align-items:center;gap:14px;padding:0 20px;background:linear-gradient(180deg,rgba(7,12,14,.92),rgba(7,12,14,0));z-index:5;white-space:nowrap}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--bone)}
.brand em{font-style:normal;font-weight:500;color:var(--mut);font-size:14px;margin-left:6px;padding-left:12px;border-left:1px solid var(--line)}
.mark{width:26px;height:26px;display:block;flex:none}
.banner{display:inline-block;padding:3px 10px;border-radius:7px;background:var(--amber);color:var(--ink);font-size:13px;font-weight:700;font-family:var(--disp)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(18,27,30,.88);box-shadow:inset 0 0 0 1px var(--line)}
.tabs button{padding:6px 15px;border-radius:9px;font-size:14.5px;font-weight:600;color:#C5D2D4;min-height:36px;transition:background .18s,color .18s}
.tabs button:hover{color:#fff}
.tabs button.on{background:var(--lime);color:var(--ink)}
.links{display:flex;gap:14px}
.tool{font-size:13.5px;color:#AEBCBE;text-decoration:none}
.tool:hover{color:#fff}
.out{text-decoration:underline;text-underline-offset:3px}
.grow{flex:1}
.conn{display:inline-flex;align-items:center;font-size:13.5px;color:#C5D2D4}
.conn::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:#FF7A66}
.conn.on::before{background:var(--lime);animation:live 2.4s ease-in-out infinite}
.conn.off{color:#FF9D8C}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(201,255,47,.5)}55%{box-shadow:0 0 0 7px rgba(201,255,47,0)}}
.clock{font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;min-width:66px}
.who{font-size:13.5px;color:#C5D2D4}

/* panels */
.panel,.reg{position:fixed;background:rgba(10,16,18,.94);box-shadow:inset 0 0 0 1px var(--line),0 18px 50px rgba(0,0,0,.45);border-radius:18px;z-index:4}
.left{left:14px;top:66px;bottom:14px;width:348px;display:flex;flex-direction:column;overflow:hidden}
.right{right:14px;top:66px;bottom:14px;width:372px;padding:18px;overflow:auto;scrollbar-width:none;will-change:transform}
.close{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;color:var(--mut);font-size:22px;line-height:1;text-align:center;z-index:1}
.close:hover{background:var(--ink3);color:#fff}

/* queue */
.q-h{display:flex;align-items:center;gap:8px;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.q-h h2{font-size:18px}
.q-n{font-family:var(--disp);font-weight:800;color:var(--lime);font-size:18px}
.q-f{margin-left:auto;display:flex;gap:2px;font-size:13px}
.q-f button{padding:5px 9px;border-radius:7px;color:#AEBCBE;min-height:30px}
.q-f .on{background:var(--ink3);color:#fff}
.q-list{flex:1;overflow:auto;padding:6px;scrollbar-width:none;position:relative}
.qrow{position:relative;display:block;width:100%;padding:8px 10px 9px 16px;border-radius:12px;margin-bottom:3px;overflow:hidden;background:rgba(255,255,255,.015);will-change:transform;transition:background .15s,opacity .4s}
.qrow:hover{background:rgba(255,255,255,.05)}
.qrow.sel{background:var(--ink3);box-shadow:inset 0 0 0 1.5px var(--c)}
.q-bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.q-1{display:flex;align-items:baseline;gap:8px}
.q-1 b{font-family:var(--disp);font-size:17px;font-weight:800}
.q-code{font-family:var(--disp);font-size:12.5px;font-weight:600;color:#AEBCBE}
.q-1 time{margin-left:auto;font-size:12.5px;color:#AEBCBE;font-variant-numeric:tabular-nums}
.q-2{display:block;font-size:13.5px;color:#B8C5C7;line-height:1.35;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px}
.q-3{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.q-wait{margin-left:auto;font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.chip{display:inline-block;padding:3px 9px;border-radius:7px;font-size:12.5px;font-weight:600;background:var(--ink3);color:#C8D5D7;line-height:1.35}
.chip.tone-new{background:#E3261B;color:#fff}
.chip.tone-wait{background:var(--amber);color:var(--ink)}
.chip.tone-go{background:var(--lime);color:var(--ink)}
.chip.tone-done{background:var(--ink3);color:#C8D5D7}
.chip.alert{background:#E3261B;color:#fff}
.chip.warn{background:#4A3A10;color:#FFD77A}
.chip.sim{background:#123A52;color:#9FDCFF}
.qrow.tone-done{opacity:.66}
.qrow.fresh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c),transparent 70%);opacity:0;animation:fresh 1.5s ease-out 1;pointer-events:none}
@keyframes fresh{0%{opacity:.55}100%{opacity:0}}
.q-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center}
.q-empty strong{font-family:var(--disp);font-size:20px;font-weight:800;margin-top:88px}
.q-empty small{font-size:13.5px;color:var(--mut);line-height:1.5;max-width:240px}
.e-rings{position:relative;width:0;height:0}
.e-rings i{position:absolute;left:-60px;top:12px;width:120px;height:120px;border-radius:50%;border:1.5px solid var(--lime);opacity:0;animation:lc 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.e-rings i:nth-child(2){animation-delay:1.2s}.e-rings i:nth-child(3){animation-delay:2.4s}
.e-rings b{position:absolute;left:-5px;top:67px;width:10px;height:10px;border-radius:50%;background:var(--lime)}
@keyframes lc{0%{transform:scale(.1);opacity:.9}100%{transform:scale(1);opacity:0}}

/* inspector */
.i-head{padding-left:12px;border-left:5px solid var(--c);padding-right:30px}
.i-ref{font-family:var(--disp);font-size:14px;font-weight:700;color:#AEBCBE}
.i-h{position:relative;font-size:38px;font-weight:900;font-stretch:88%;line-height:1.2;min-height:46px}
.i-place{font-size:15.5px;color:#C5D2D4;line-height:1.4;min-height:22px}
.i-st{margin:12px 0 8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.i-tags{display:contents}
.kv{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4}
.kv>span{flex:none;width:58px;color:var(--mut)}.kv b{font-weight:500;overflow-wrap:anywhere;min-width:0}.kv small{color:var(--mut)}
.kv a{color:var(--lime);font-weight:700;font-size:16px;font-family:var(--disp)}
.cancelreq{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:#E3261B;color:#fff;font-weight:700;font-family:var(--disp)}
.cancelreq .acts{margin:8px 0 0}
.cancelreq button{padding:6px 12px;border-radius:9px;background:#fff;color:#111;font-weight:700;font-size:14px}
.ava{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--emer);color:#fff;font-family:var(--disp);font-weight:800;font-size:17px;transition:background .2s}
.ava.dim{background:var(--ink3);color:var(--mut)}
.c-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.c-t b{font-family:var(--disp);font-size:16px}.c-t small{font-size:12.5px;color:#AEBCBE;overflow:hidden;text-overflow:ellipsis}
.c-t small.flag{color:#FFC58A;white-space:normal}
.c-d{flex:none;font-family:var(--disp);font-weight:800;font-size:15px}

/* live card */
.i-live{margin-top:10px;padding:12px 14px 14px;border-radius:14px;background:rgba(201,255,47,.07);box-shadow:inset 0 0 0 1.5px var(--lime)}
.i-live.stale{background:rgba(255,210,103,.07);box-shadow:inset 0 0 0 1.5px var(--amber)}
.i-live.idle{background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.l-who{display:flex;align-items:center;gap:10px}
.l-big{display:flex;align-items:flex-end;gap:8px;margin-top:8px;font-family:var(--disp)}
.l-eta{font-weight:900;font-size:66px;line-height:1;color:var(--lime)}
.l-word{font-weight:800;font-size:30px;line-height:1.25;color:var(--lime)}
.i-live.idle .l-word{color:#C5D2D4}
.i-live.stale .l-word{color:var(--amber)}
.l-unit{font-size:21px;font-weight:700;padding-bottom:7px;line-height:1.15}
.l-km{display:inline-flex;align-items:baseline;gap:5px;margin-left:auto;font-weight:800;font-size:27px;padding-bottom:6px}
.l-km small{font-size:15px;font-weight:600;color:var(--mut)}
.l-note{font-size:13.5px;color:#AEBCBE;margin-top:4px;min-height:0}
.l-note:empty{display:none}

/* waiting for an answer */
.i-wait{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,210,103,.1);box-shadow:inset 0 0 0 1.5px var(--amber);transition:background .3s,box-shadow .3s}
.i-wt{font-family:var(--disp);font-weight:800;font-size:21px;color:var(--amber)}
.i-wait.late{background:rgba(227,38,27,.16);box-shadow:inset 0 0 0 2px #FF5A4C}
.i-wait.late .i-wt{color:#FF8A7D}
.w-late{margin-top:8px;font-size:14px;line-height:1.45;color:#FFD2CC;font-weight:600}
.w-late a{color:#fff;font-weight:800}

/* state chain */
.chain{position:relative;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.chain li{position:relative;display:flex;justify-content:space-between;gap:8px;padding:3px 0 3px 22px;font-size:14px;line-height:1.5;color:var(--mut2);transition:color .25s}
.chain li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--mut2);background:transparent;transition:background .2s,box-shadow .2s,transform .35s cubic-bezier(.3,1.8,.5,1)}
.chain li:not(:last-child)::after{content:"";position:absolute;left:5px;top:20px;bottom:-9px;width:1.5px;background:var(--line);transition:background .25s}
.chain li.done{color:var(--bone)}
.chain li.done::before{background:var(--lime);box-shadow:inset 0 0 0 2px var(--lime)}
.chain li.done:not(:last-child)::after{background:var(--lime)}
.chain li.now{font-weight:700}
.chain li.now::before{box-shadow:0 0 0 4px rgba(201,255,47,.2)}
.chain time{font-size:13px;color:#AEBCBE;font-variant-numeric:tabular-nums}
.flag{font-size:13px;color:#FFC58A;line-height:1.4;margin-top:6px}

/* staff */
.i-staff{margin-top:12px}
.i-lbl{font-family:var(--disp);font-weight:800;font-size:17px;margin-bottom:6px}
.cands{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.cand{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);min-height:56px;transition:box-shadow .15s}
.cand:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px #C5D2D4}
.cand.sel{box-shadow:inset 0 0 0 2px var(--lime)}
.cand:disabled{opacity:.5;cursor:not-allowed}
.fine{font-size:13.5px;line-height:1.5;color:var(--mut)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:10px 16px;border-radius:14px;font-family:var(--disp);font-size:18px;font-weight:800;text-align:center;text-decoration:none;transition:filter .12s}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:disabled{background:var(--ink3);color:var(--mut);cursor:default}
.lnk{display:block;font-size:14.5px;padding-top:10px;color:#C5D2D4;text-decoration:underline;text-underline-offset:3px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.acts:empty{display:none}
.acts button{padding:7px 12px;border-radius:9px;font-size:14px;font-weight:600;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);color:#C5D2D4}
.acts button:hover{box-shadow:inset 0 0 0 1px #C5D2D4;color:#fff}
.acts button.warn{color:#FFB3A8}

/* pins */
.pin{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.pin .dot{position:absolute;left:-14px;top:-14px;width:28px;height:28px;padding:0;pointer-events:auto;border-radius:50%}
.pin .dot i{position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--c);border:2.5px solid #fff;transition:left .2s,top .2s,width .2s,height .2s,border-color .2s,box-shadow .2s}
.pin .code{position:absolute;left:13px;top:-11px;font-size:13px;font-weight:600;white-space:nowrap;color:#D4DFE1;font-family:var(--disp);text-shadow:0 1px 3px #000}
.pin.hot .dot i{left:0;top:0;width:28px;height:28px;border-width:3.5px;box-shadow:0 0 20px var(--c)}
.pin.held .dot i{left:1px;top:1px;width:26px;height:26px;border-color:var(--lime);border-width:3.5px}
.pin.hot .code,.pin.held .code,.pin.sel .code{font-size:16px;color:#fff;left:-30px;width:60px;text-align:center;top:-42px;font-weight:800}
.pin.sel .code{top:-70px}
.pin.past .dot i{left:4px;top:4px;width:20px;height:20px;opacity:.75}
.pin .drop{position:absolute;left:-18px;top:-46px;width:36px;height:48px;display:block;pointer-events:none;color:var(--c);transform-origin:50% 96%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.pin.past .drop{color:color-mix(in srgb,var(--c) 62%,#7E9094)}
.staff{color:var(--lime)}
.staff.off{color:#7E9094}
.staff .arrow{position:absolute;left:-11px;top:-11px;width:22px;height:22px;filter:drop-shadow(0 1px 2px #000);display:block}
.staff .nm{position:absolute;left:14px;top:-11px;font-size:12.5px;white-space:nowrap;font-weight:600;color:#D9F6A0;text-shadow:0 1px 3px #000}
.staff.off .nm{color:#9BADB0}
.staff.waiting .arrow{animation:wait 1s ease-in-out infinite}
@keyframes wait{0%,100%{scale:1}50%{scale:1.32}}
.staff.trip .arrow{left:-20px;top:-20px;width:40px;height:40px;filter:none}
.staff.trip .halo{display:block}
.staff .halo{display:none}
.staff.trip.mine .nm{display:none}
.staff.trip.stale{filter:grayscale(1);opacity:.65}
.staff.trip.stale .nm{display:block}

/* legend */
.legend{position:fixed;left:376px;bottom:18px;display:flex;align-items:center;gap:13px;padding:7px 13px;border-radius:10px;background:rgba(10,16,18,.82);font-size:12.5px;color:#C5D2D4;z-index:3}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.legend .tri{border-radius:0;background:var(--lime);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%)}
.legend .sep{width:1px;height:14px;background:var(--line)}
.zoom{position:fixed;left:376px;bottom:60px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:rgba(10,16,18,.9);box-shadow:inset 0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.4);z-index:3}
.zoom button{display:grid;place-items:center;width:44px;height:44px;color:#E7EEF0;transition:background .18s,color .18s,opacity .18s}
.zoom button+button{border-top:1px solid var(--line)}
.zoom button:hover{background:var(--ink3);color:#fff}
.zoom button:focus-visible{outline-offset:-3px}
.zoom button.end{opacity:.35}
.zoom svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* placing a test SOS */
.cross{position:fixed;inset:0;pointer-events:none;z-index:3}
.cross .ch{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(201,255,47,.55)}
.cross .cv{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(201,255,47,.55)}
.cross .cr{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:2px solid var(--lime);box-shadow:0 0 0 3px rgba(10,16,18,.5)}
.hint,.types{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:6;border-radius:16px;background:rgba(10,16,18,.94);box-shadow:inset 0 0 0 1px var(--line),0 18px 50px rgba(0,0,0,.45)}
.hint{padding:10px 18px;font-size:15px;font-family:var(--disp);font-weight:600;color:var(--lime)}
.types{display:flex;align-items:center;gap:8px;padding:12px}
.types .where{font-size:13.5px;color:#C5D2D4;padding:0 8px;line-height:1.3;white-space:nowrap}
.types .where small{display:block;color:var(--mut);font-variant-numeric:tabular-nums}
.types .t{min-height:58px;padding:8px 20px;border-radius:14px;font-family:var(--disp);font-size:20px;font-weight:800;color:#fff;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:filter .12s}
.types .t:hover{filter:brightness(1.1)}
.types .t.dk{color:var(--ink)}
.types .x{padding:8px 12px;font-size:14.5px;color:#C5D2D4;text-decoration:underline;text-underline-offset:3px}

/* registry */
.reg{left:376px;top:66px;width:min(800px,calc(100% - 780px));min-width:520px;padding:20px;max-height:calc(100% - 86px);overflow:auto;scrollbar-width:none;z-index:7}
.reg h2{font-size:26px;font-weight:900;font-stretch:88%}
.reg h3{font-family:var(--disp);font-size:15px;font-weight:800;margin:18px 0 6px;color:var(--bone)}
.reg table{width:100%;border-collapse:collapse;font-size:14px}
.reg td,.reg th{padding:7px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.reg th{color:var(--mut);font-weight:500;border-top:0;font-size:13px}
.reg td a{color:var(--lime)}
.reg small{color:var(--mut)}
.reg form{display:flex;flex-wrap:wrap;gap:6px}
.reg input{width:128px;min-height:38px;padding:0 10px;border-radius:10px;background:var(--ink2);border:1px solid var(--line);color:#fff;font:inherit;font-size:14px;min-width:0}
.reg input:focus{border-color:var(--lime);outline:0}
.reg select{min-height:38px;padding:0 8px;border-radius:10px;background:var(--ink2);border:1px solid var(--line);color:#fff;font:inherit;font-size:14px;min-width:0}
.reg select:focus{border-color:var(--lime);outline:0}
.reg option{background:var(--ink2);color:#fff}
.reg form .brk{flex-basis:100%;height:0}
.chk{position:relative;display:inline-flex;cursor:pointer}
.chk input{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0}
.chk span{display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:10px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:#C5D2D4;transition:background .18s,color .18s,box-shadow .18s}
.chk:hover span{color:#fff}
.chk input:checked+span{background:rgba(201,255,47,.14);box-shadow:inset 0 0 0 1.5px var(--lime);color:var(--lime)}
.chk input:focus-visible+span{outline:3px solid var(--lime);outline-offset:3px}
.reg-from{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13.5px;color:var(--lime)}
.reg-from button{font-size:13.5px;color:var(--mut);text-decoration:underline}
.reg .use{min-height:32px;padding:0 10px;border-radius:9px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--lime)}
.reg .go{min-height:38px;padding:0 14px;border-radius:10px;background:var(--lime);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:14.5px}
.reg .warn{min-height:32px;padding:0 10px;border-radius:9px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:#FFB3A8}
.reg .err{color:#FF8A7D;font-size:14px;min-height:20px;margin-top:6px}
.reg .chip{padding:1px 7px}

/* loading */
.load{position:fixed;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;color:var(--lime);transition:opacity .3s}
.load .mark{width:44px;height:44px}
.load .l-t{font-family:var(--disp);font-weight:600;font-size:15px;color:#C5D2D4}
.l-bar{display:block;width:180px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.l-bar i{display:block;width:100%;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.load.err{color:#FF8A7D;max-width:380px;text-align:center}
.load.err .l-bar{display:none}

/* login: ink, the mark, a slow ripple, one lime button */
.login{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--ink);overflow:hidden}
.lg-rings{position:absolute;left:50%;top:50%;width:0;height:0}
.lg-rings i{position:absolute;left:-55vmax;top:-55vmax;width:110vmax;height:110vmax;border-radius:50%;border:2.5px solid var(--lime);opacity:0;animation:lg 8.1s cubic-bezier(.2,.6,.3,1) infinite}
.lg-rings i:nth-child(2){animation-delay:2.7s}.lg-rings i:nth-child(3){animation-delay:5.4s}
@keyframes lg{0%{transform:scale(.06);opacity:.8}60%{opacity:.26}100%{transform:scale(1);opacity:0}}
.lg-box{position:relative;display:flex;flex-direction:column;align-items:center;width:min(420px,88vw);text-align:center}
.lg-mark{width:68px;height:68px;color:var(--lime)}
.login h1{position:relative;margin-top:20px;font-size:44px;font-weight:900;font-stretch:88%}
.login p{margin:12px 0 28px;color:#C5D2D4;font-size:17px;line-height:1.5}
.login .btn{min-height:64px;border-radius:20px;font-size:22px}
.login .banner{margin-top:22px}
.lg-back{margin-top:16px;font-size:14.5px;color:var(--mut);text-underline-offset:3px}

/* narrower screens: the top bar gives way before anything clips */
@media (max-width:1500px){.brand b{display:none}.brand em{margin-left:0;padding-left:0;border-left:0;color:var(--bone)}}
@media (max-width:1400px){.conn{font-size:0}.conn::before{margin-right:0}.bar{gap:10px;padding:0 14px}}
@media (max-width:1300px){.who{display:none}.tabs button{padding:6px 10px;font-size:13.5px}.tool{font-size:12.5px}.links{gap:10px}}
@media (max-width:1100px){.left{width:280px}.right{width:310px}.legend{display:none}.zoom{left:294px;bottom:18px}.reg{left:12px;right:12px;width:auto;min-width:0}.banner{font-size:12px;padding:2px 7px}.brand em{display:none}}

/* Reduced motion keeps every state and removes movement. */
@media (prefers-reduced-motion:reduce){
  .e-rings i,.lg-rings i,.conn.on::before,.staff.waiting .arrow{animation:none}
  .e-rings i{opacity:.35;transform:scale(1)}
  .e-rings i:nth-child(2){transform:scale(.66)}.e-rings i:nth-child(3){transform:scale(.33)}
  .lg-rings i{opacity:.14;transform:scale(.5)}.lg-rings i:nth-child(2){transform:scale(.3)}.lg-rings i:nth-child(3){transform:scale(.14)}
  .qrow.fresh::after{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}