:root{--bg: #0c0d11;--surface: #14161c;--surface-2: #1a1d25;--border: #262a35;--text: #eceef3;--muted: #99a0b0;--accent: #8b5cf6;--accent-2: #22d3ee;--danger: #f2555a;--ok: #34d399;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.page{max-width:560px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:16px}.streamer{display:flex;align-items:center;gap:14px}.streamer__avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface-2);font-size:28px}.streamer__name{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}.streamer__slug{color:var(--muted);font-size:14px}.card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.card__title{margin:0;font-size:15px;font-weight:650}.card__hint{margin:-6px 0 0;color:var(--muted);font-size:13px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.progress__head{display:flex;justify-content:space-between;gap:12px;font-size:14px}.progress__bar{height:10px;border-radius:999px;background:#ffffff1f;overflow:hidden}.progress__fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s cubic-bezier(.2,.8,.2,1)}.sectors{display:flex;flex-wrap:wrap;gap:6px}.sector{padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:13px}.sector__chance{color:var(--muted)}.field{display:flex;flex-direction:column;gap:6px}.field__label{color:var(--muted);font-size:13px}.input,.textarea{width:100%;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;font-size:16px}.textarea{min-height:88px;resize:vertical}.input:focus-visible,.textarea:focus-visible,.button:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.counter{align-self:flex-end;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.counter--over{color:var(--danger)}.amounts{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:10px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text);font:inherit;font-size:15px;cursor:pointer}.chip--on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,var(--surface-2))}.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);cursor:pointer;font-size:15px}.switch input{width:18px;height:18px;accent-color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border:none;border-radius:12px;background:var(--accent);color:#0c0d11;font:inherit;font-size:17px;font-weight:700;cursor:pointer}.button:disabled{opacity:.55;cursor:default}.button--ghost{border:1px solid var(--border);background:transparent;color:var(--text);font-size:15px;font-weight:500}.frame{position:relative;width:100%;aspect-ratio:16 / 9;border:1px dashed var(--border);border-radius:12px;background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,repeating-linear-gradient(45deg,transparent 0 8px,rgb(255 255 255 / 3%) 8px 16px);cursor:crosshair;touch-action:manipulation}.frame__aim{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--accent);border-radius:50%;background:color-mix(in srgb,var(--accent) 25%,transparent);pointer-events:none}.frame__hint{position:absolute;inset:auto 0 8px;color:var(--muted);font-size:13px;text-align:center;pointer-events:none}.projectiles{display:flex;gap:8px;flex-wrap:wrap}.alert{padding:12px 14px;border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--danger) 10%,transparent);font-size:14px}.alert--ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:13px}.badge--ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}.badge--wait{background:color-mix(in srgb,var(--accent-2) 18%,transparent);color:var(--accent-2)}.muted{color:var(--muted);font-size:13px}.center{text-align:center}.thanks__amount{font-size:32px;font-weight:800}
