@font-face { font-family: HudSans; src: url(./fonts/Inter-Regular.otf); font-display: swap; }
@font-face { font-family: HudSansBold; src: url(./fonts/Inter-Bold.otf); font-display: swap; }
@font-face { font-family: HudMono; src: url(./fonts/DejaVuSansMono.ttf); font-display: swap; }
@font-face { font-family: HudMonoBold; src: url(./fonts/DejaVuSansMono-Bold.ttf); font-display: swap; }
:root { color-scheme: dark; --a: 0, 224, 255; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04060c; overflow: hidden; font-family: HudSans, system-ui, sans-serif; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#msg { position: fixed; inset: auto 0 50% 0; text-align: center; color: rgba(255,255,255,.75); font: 600 clamp(14px, 2.4vw, 20px) HudSansBold, system-ui; padding: 0 24px; pointer-events: none; transition: opacity .3s; }
#msg:empty, #msg.hide { opacity: 0; }
#bar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 18px; background: rgba(8, 12, 22, .72); border: 1px solid rgba(var(--a), .35); box-shadow: 0 0 24px rgba(var(--a), .18); backdrop-filter: blur(10px); max-width: calc(100vw - 16px); }
#bar[hidden], #chips[hidden] { display: none; }
#bar button { appearance: none; border: 0; border-radius: 12px; width: clamp(34px, 6vw, 46px); height: clamp(34px, 6vw, 46px); font-size: clamp(15px, 2.6vw, 20px); color: #fff; background: rgba(255,255,255,.08); cursor: pointer; transition: background .15s, transform .08s; }
#bar button:hover { background: rgba(var(--a), .28); }
#bar button:active { transform: scale(.93); }
#bar button.danger:hover { background: rgba(237, 66, 69, .55); }
#bar button:focus-visible, #chips button:focus-visible { outline: 2px solid rgb(var(--a)); outline-offset: 2px; }
#bar .sep { width: 1px; height: 24px; background: rgba(255,255,255,.18); margin: 0 4px; }
#chips { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 6px; padding: 6px 8px; border-radius: 14px; background: rgba(8, 12, 22, .6); backdrop-filter: blur(8px); }
#chips button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
#chips button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 8px currentColor; }
@media (prefers-reduced-motion: reduce) { #msg { transition: none; } }