:root{--accent:aquamarine;--bg:#000;--fg:#e8fff8;--muted:#7fa79a;--card:#0d1513;--line:#1f3530;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0}[hidden]{display:none!important}button,input{font:inherit;border:1px solid var(--line);border-radius:10px;padding:.7em 1em}button{background:var(--accent);color:#000;cursor:pointer;font-weight:600}button.secondary{color:var(--accent);border-color:var(--accent);background:0 0}input{color:var(--fg);-webkit-user-select:text;user-select:text;background:#000;min-width:0}#landing{flex-direction:column;gap:16px;max-width:420px;height:100%;margin:0 auto;padding:24px 16px 40px;display:flex;overflow-y:auto}#landing .logo{align-self:center;width:min(400px,96%);height:auto;margin:8px 0}.howto{flex-direction:column;gap:18px;margin-top:-4px;display:flex}.tagline{text-align:center;color:#f2f2f2;text-shadow:2px 2px #050505,3px 3px #f3256c;margin:0;font-size:1.15rem;font-weight:900;line-height:1.3}.acid{background:linear-gradient(90deg,#ff8018,#f3256c,#9900ca,#3f25fd,#197fe7,#3fda93,#99ff35,#f3da02,#ff8018) 0 0/200% 100%;color:#0000;text-shadow:none;-webkit-text-stroke:.6px #050505;-webkit-background-clip:text;background-clip:text;animation:3s steps(24,end) infinite acid}@keyframes acid{to{background-position:200% 0}}.steps{gap:16px;margin:0;padding:0 6px 0 0;list-style:none;display:grid}.sticker{--r:-2deg;--fill:#f3da02;--hot:#f3256c;color:#050505;background:var(--fill);box-shadow:5px 5px 0 0 var(--hot), 5px 5px 0 3px #050505;transform:rotate(var(--r));border:3px solid #050505;border-radius:12px;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:10px 14px;animation:.55s cubic-bezier(.2,1.6,.4,1) backwards pop;display:grid}.sticker.s2{--r:1.5deg;--fill:#3fda93;--hot:#9900ca;animation-delay:.12s}.sticker.s3{--r:-1deg;--fill:#f3256c;--hot:#197fe7;animation-delay:.24s}.sticker.s1{animation-delay:0s}.sticker .num{width:38px;height:38px;color:var(--fill);background:#050505;border-radius:50%;grid-row:span 2;place-items:center;font-size:1.35rem;font-weight:900;display:grid}.sticker b{text-transform:uppercase;letter-spacing:-.01em;font-size:1rem;font-weight:900}.sticker span:not(.num){font-size:.85rem;font-weight:600}.sticker:active{animation:.3s steps(4,end) wiggle}@keyframes pop{0%{opacity:0;transform:translateY(18px) scale(.4) rotate(calc(var(--r) * 6))}}@keyframes wiggle{33%{transform:rotate(calc(var(--r) * -2)) scale(1.04)}66%{transform:rotate(calc(var(--r) * 2)) scale(1.04)}}.zigzag{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpolyline points='0,10 6,2 12,10 18,2 24,10' fill='none' stroke='%23FFE61A' stroke-width='3'/%3E%3C/svg%3E") 0 0/24px 12px repeat-x;height:12px;animation:1s steps(8,end) infinite zig}@keyframes zig{to{background-position:24px 0}}@media (prefers-reduced-motion:reduce){.acid,.sticker,.zigzag{animation:none}}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:10px;padding:16px;display:flex}.card h2{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 4px;font-size:1rem}.row{gap:8px;display:flex}.row input{flex:1}.fine{color:var(--muted);text-align:center;margin:0;font-size:.85rem}footer.fine{padding-top:4px}.tested{font-size:.75rem;animation:1.5s 6s forwards tested-fade}@keyframes tested-fade{to{opacity:0;visibility:hidden}}.extras{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:auto;padding-top:16px;display:flex}a.button{border:1px solid var(--accent);border-radius:10px;padding:.7em 1em;font-weight:600;text-decoration:none;display:inline-block}a.button.secondary,.fine a{color:var(--accent)}#present,#paint{position:fixed;inset:0;overflow:hidden}#board{width:100%;height:100%;display:block;position:absolute;inset:0}#present-bar{white-space:nowrap;background:#0009;border:1px solid #7fffd433;border-radius:10px;align-items:center;gap:10px;max-width:calc(100% - 16px);height:72px;padding:6px 14px 6px 6px;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}#qr{image-rendering:pixelated;border-radius:4px;flex:none;width:60px!important;height:60px!important}.code-box{flex-direction:column;line-height:1;display:flex}.code-label{color:var(--muted);letter-spacing:.1em;margin-bottom:2px;font-size:.65rem}.code{letter-spacing:.08em;color:var(--accent);font-family:ui-monospace,Menlo,monospace;font-size:1.9rem;font-weight:800}.bar-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.url{color:var(--fg);opacity:.85;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.peers{color:var(--muted);font-size:.72rem}.fs-toggle{width:34px;height:34px;color:var(--accent);background:0 0;border:1px solid #7fffd459;border-radius:8px;flex:none;place-items:center;padding:0;display:grid}.fs-toggle svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.fs-toggle .fs-exit,.fs-toggle.on .fs-enter{display:none}.fs-toggle.on .fs-exit{display:inline}#paint{touch-action:none;background:#000}#pad{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.status{bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);pointer-events:none;font-size:.85rem;position:absolute;left:0;right:0}.hold{--p:0;background:radial-gradient(closest-side, #0b1210 82%, transparent 83%), conic-gradient(var(--me,var(--accent)) calc(var(--p) * 360deg), #7fffd42e 0);width:96px;height:96px;color:var(--accent);touch-action:none;opacity:.7;border:none;border-radius:50%;place-items:center;padding:0;font-size:2rem;display:grid;position:absolute}.hold.holding{opacity:1}.hold canvas{border-radius:50%;width:70px;height:70px}.corner.tl{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}.corner.tr{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}.corner.br{bottom:calc(40px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right))}.hold.small{width:64px;height:64px;font-size:1.3rem}.hold.small svg{width:24px;height:24px}.hold.ready{opacity:1;box-shadow:0 0 0 3px var(--me,var(--accent))}#toast{left:50%;bottom:calc(80px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);color:var(--fg);overflow-wrap:anywhere;opacity:0;pointer-events:none;z-index:50;background:#000000d9;border:1px solid #7fffd459;border-radius:10px;padding:8px 14px;font-size:.9rem;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,12px)}#toast.show{opacity:1;transform:translate(-50%)}#picker{padding:calc(12px + env(safe-area-inset-top)) 16px 16px;touch-action:pan-y;background:#000000f0;flex-direction:column;display:flex;position:absolute;inset:0}.picker-head{color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}#picker-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));align-content:start;gap:10px;display:grid;overflow-y:auto}.thumb{aspect-ratio:1;background-color:#0d1513;background-repeat:no-repeat;border:2px solid #0000;border-radius:12px;padding:0}.thumb.selected{border-color:var(--accent)}.debug{color:var(--accent);background:#000000b3;border-radius:6px;padding:4px 8px;font:12px ui-monospace,Menlo,monospace;position:absolute;bottom:8px;left:8px}
