:root{--night:#141828;--panel:#141828d1;--panel-border:#ffffff1f;--text:#f4f1ea;--muted:#b9bfd3;--accent:#ffd166;--accent-text:#1b2340;--warning:#ffb454;--refused:#e63946;color:var(--text);background:var(--night);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.splash,.overlay{place-items:center;height:100%;padding:16px;display:grid}.overlay{background:#0a0c1699;position:absolute;inset:0}.card{text-align:center;background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;width:min(360px,100%);padding:28px}.card h1{letter-spacing:-.01em;margin:0 0 8px;font-size:26px}.card p{color:var(--muted);margin:0 0 20px}.card button{color:var(--accent-text);background:var(--accent);border:0;border-radius:10px;padding:10px 18px;font-weight:600}.office,.game{height:100%;position:relative}.game canvas{width:100%;height:100%;display:block}.hud{pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;inset:12px 12px auto}.hud .spacer{flex:1}.pill{color:var(--text);background:var(--panel);border:1px solid var(--panel-border);pointer-events:auto;border-radius:999px;padding:6px 12px}.pill.brand{font-weight:700}.pill.notice{color:var(--accent)}.pill.dead{white-space:nowrap;border-color:color-mix(in srgb, var(--warning) 55%, transparent);align-items:center;gap:8px;min-width:0;display:flex}.pill.dead svg{color:var(--warning);flex:none}.pill.dead b{text-overflow:ellipsis;font-weight:600;overflow:hidden}.pill.dead span{color:var(--muted)}button.pill:hover{border-color:var(--accent)}.keys{--unit:38px;width:calc(var(--unit) * 8.5);height:calc(var(--unit) * 2);pointer-events:none;position:absolute;bottom:14px;left:14px}.key{top:0;left:calc(var(--unit) * var(--at));width:34px;height:34px;color:var(--text);background:var(--panel);border:1px solid var(--panel-border);border-bottom-width:4px;border-radius:7px;justify-content:center;align-items:center;font:600 13px system-ui,sans-serif;transition:transform 60ms,border-bottom-width 60ms,background-color .12s;display:flex;position:absolute}.key.cancel{--at:0;width:42px;font-size:11px}.key.up{--at:2.25}.key.use{--at:3.25}.key.turn{--at:4.25}.key.remove{--at:7;width:50px;font-size:11px}.key.left,.key.down,.key.right,.key.edit{top:var(--unit)}.key.left{--at:1.5}.key.down{--at:2.5}.key.right{--at:3.5}.key.edit{--at:6}.key.held{border-bottom-width:1px;transform:translateY(3px)}.key.usable{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}.voice{align-items:flex-end;gap:8px;display:flex;position:absolute;bottom:14px;left:347px}.voice.offline{opacity:.45}.voice button{cursor:pointer}.voice button:disabled{cursor:default}.key.space{width:150px;color:var(--muted);gap:8px;position:static}.key.space.opening{color:var(--text)}.key.space.open{color:var(--accent-text);background:var(--accent);border-color:#c99a2e}.key.space.refused{color:#ff8f8f}.key.space:active{border-bottom-width:1px;transform:translateY(3px)}.waves{align-items:center;gap:2px;height:12px;display:inline-flex}.waves b{background:currentColor;border-radius:1px;width:2px;height:100%;transform:scaleY(.25)}.speaking .waves b{animation:.7s ease-in-out infinite alternate wave}.speaking .waves b:nth-child(2){animation-delay:.2s}.speaking .waves b:nth-child(3){animation-delay:.4s}@keyframes wave{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}.voice .sound{width:36px;height:36px;color:var(--text);background:var(--panel);border:1px solid var(--panel-border);border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.voice .sound:hover:not(:disabled){border-color:var(--accent)}.voice .sound.off{color:#ff8f8f}.voice .sound.blocked{animation:1s ease-in-out infinite alternate blocked}@keyframes blocked{0%{color:var(--muted);border-color:var(--panel-border)}to{color:var(--accent);border-color:var(--accent)}}.pill.tool{padding:7px 9px;display:flex}.pill.tool.on{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}.pill.tool.off{color:var(--muted)}.pill.tool .gap{stroke:var(--night)}.catalog{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:8px;width:366px;padding:10px;display:flex;position:absolute;bottom:12px;right:12px}.catalog .categories{align-items:center;gap:4px;display:flex}.catalog input{height:28px;color:var(--text);font:inherit;border:1px solid var(--panel-border);background:#ffffff14;border-radius:8px;outline:none;padding:0 10px}.catalog input:focus{border-color:var(--accent)}.catalog .items{grid-template-columns:repeat(6,1fr);gap:4px;max-height:290px;display:grid;overflow-y:auto}.catalog button{aspect-ratio:1;background:#ffffffeb;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;width:100%;padding:0;display:flex}.catalog .categories button{background:#ffffff8c;width:34px}.catalog .categories .fold{width:24px;color:var(--text);background:0 0}.catalog .items[hidden]{display:none}.catalog button:hover{border-color:#ffd16699}.catalog button.on{border-color:var(--accent);background:#fff}.timeline{background:var(--panel);border:1px solid var(--panel-border);scrollbar-width:thin;border-radius:14px;align-items:center;gap:14px;max-width:calc(100% - 370px);padding:14px 16px;display:flex;position:absolute;bottom:12px;right:12px;overflow-x:auto}.timeline .moment{width:46px;height:46px;color:var(--accent-text);background:#ffffffeb;border:2px solid #0000;border-radius:9px;flex:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.timeline .moment+.moment:before{background:var(--muted);content:"";width:14px;height:1px;position:absolute;top:50%;right:calc(100% + 2px)}.timeline .moment:hover{border-color:#ffd16699}.timeline .moment.older{width:30px;color:var(--text);border-color:var(--panel-border);background:0 0}.timeline .moment.now{border-color:var(--text)}.timeline .moment.on{background:var(--accent);border-color:var(--accent)}.timeline .action,.timeline .by{border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute}.timeline .action{color:var(--text);background:var(--accent-text);top:-8px;right:-8px}.timeline .by{color:var(--accent-text);background:var(--accent);font-size:10px;font-weight:700;bottom:-8px;left:-8px}.piece-tools{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;gap:4px;padding:4px;display:none;position:absolute;top:-8px;left:0}.piece-tools:empty{visibility:hidden}.piece-tools button{color:var(--text);background:0 0;border:1px solid #0000;border-radius:7px;padding:6px;display:flex}.piece-tools button:hover{border-color:var(--accent)}.piece-tools button.on{color:var(--accent-text);background:var(--accent)}.piece-tools .gauge{grid-template-columns:repeat(var(--row), 8px);align-self:center;gap:3px;padding:0 6px;display:grid}.piece-tools .gauge i{background:#ffffff2e;border-radius:2px;width:8px;height:8px}.piece-tools .gauge .held{background:var(--accent)}.piece-tools .gauge .adds{background:color-mix(in srgb, var(--accent) 45%, transparent);box-shadow:inset 0 0 0 1px var(--accent)}.piece-tools .gauge .refused{background:var(--refused)}.piece-tools .gauge .beyond{box-shadow:inset 0 0 0 1.5px var(--refused);background:0 0}.chat{border:1px solid var(--panel-border);background:#1418288c;border-radius:14px;flex-direction:column;gap:6px;width:340px;padding:8px;transition:background .15s;display:flex;position:absolute;bottom:128px;left:14px}.chat.on,.chat:hover{background:var(--panel)}.chat ol{scrollbar-width:thin;flex-direction:column;gap:3px;max-height:210px;margin:0;padding:0 2px;list-style:none;display:flex;overflow-y:auto}.chat li{overflow-wrap:anywhere;text-shadow:0 1px 2px #0009;line-height:1.4}.chat .sign{vertical-align:-2px;width:14px;height:14px;margin-right:4px;display:inline-block}.chat .sign.plain{color:#ffffff52}.chat .sign.verified{color:#7bd88f}.chat .sign.changed{color:var(--warning)}.chat li.unheard{color:var(--muted);opacity:.7;font-style:italic}.chat form{color:var(--muted);background:#ffffff14;border:1px solid #0000;border-radius:9px;align-items:center;gap:6px;padding:0 8px;display:flex}.chat.on form{border-color:var(--accent);background:#ffffff24}.chat input{min-width:0;color:var(--text);font:inherit;background:0 0;border:0;outline:0;flex:1;padding:6px 0}.chat .keep,.chat .keeps button{color:var(--muted);border:1px solid var(--panel-border);background:0 0;border-radius:5px;align-items:center;gap:3px;padding:1px 5px;font-size:12px;display:flex}.chat .keep:hover,.chat .keeps button:hover{border-color:var(--accent)}.chat .keep.on{color:var(--accent);border-color:var(--accent)}.chat .keeps{background:#ffffff1a;border-radius:9px;align-self:flex-end;gap:4px;padding:4px;display:flex}.chat .keeps button{color:var(--text);border-color:#0000;padding:3px 8px}.chat .keeps button.on{color:var(--accent-text);background:var(--accent)}.chat kbd{font:inherit;border:1px solid var(--panel-border);border-radius:5px;padding:0 5px;font-size:12px}.chat.on kbd{color:var(--accent)}.peer{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:10px;padding:12px 14px;display:flex;position:absolute;top:60px;right:12px}.peer header{justify-content:space-between;align-items:center;gap:12px;display:flex}.peer header button{color:var(--muted);background:0 0;border:0;padding:4px;display:flex}.peer ol{letter-spacing:.04em;grid-template-columns:repeat(4,auto);gap:4px 12px;margin:0;padding:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:15px;list-style:none;display:grid}.peer .actions{gap:8px;display:flex}.peer .check,.peer .copy{color:var(--muted);border:1px solid var(--panel-border);background:#ffffff14;border-radius:9px;padding:6px 10px;display:flex}.peer .check:hover,.peer .copy:hover{border-color:var(--accent)}.peer .copy.refused{color:var(--refused);border-color:var(--refused)}.peer .check.on{color:#1b2340;background:#7bd88f;border-color:#7bd88f}.code,.self .secret{min-width:0;color:var(--accent);border:1px dashed var(--accent);border-radius:9px;align-items:center;gap:6px;margin:0;padding:7px 9px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;display:flex}.code svg,.self .secret svg{flex:none}.code input{min-width:0;color:inherit;font:inherit;background:0 0;border:0;outline:0;flex:1;padding:0}.code.refused{color:var(--refused);border-color:var(--refused)}.gate .user,.self .user{clip-path:inset(50%);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.gate{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:10px;width:min(300px,100%);padding:14px;display:flex;position:relative}.gate .choice{gap:8px;display:flex}.gate button,.self button{color:var(--muted);border:1px solid var(--panel-border);background:#ffffff14;border-radius:9px;justify-content:center;align-items:center;padding:6px 12px;display:flex}.gate button:hover:not(:disabled),.self button:hover:not(:disabled){border-color:var(--accent)}.gate .enter{flex:1}.gate .enter:not(:disabled),.self .enter:not(:disabled),.self .copy{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}.gate .fresh{color:var(--warning);border-color:var(--warning)}.pill.name.on{color:var(--accent);border-color:var(--accent)}.self{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:10px;width:300px;padding:12px 14px;display:flex;position:absolute;top:60px;right:12px}.self header,.self .actions,.self form{align-items:center;gap:8px;display:flex}.self header{justify-content:space-between}.self header button{background:0 0;border:0;padding:4px}.self .secret span{overflow-wrap:anywhere;min-width:0}.self .actions .spacer,.self form .code{flex:1}.self .actions button{padding:6px 10px}.self button.on{color:var(--accent);border-color:var(--accent)}.self .actions button:disabled{opacity:.4}.self .revoke{color:var(--refused);background:0 0;border-color:#0000}.self .revoke.asked{color:var(--text);background:var(--refused);border-color:var(--refused)}.self button.refused{color:var(--refused);border-color:var(--refused);background:0 0}.chat form.refused{border-color:var(--refused)}
