:root{--bg: #0b0d12;--panel: #161a23;--panel-2: #1e2331;--line: #2a3040;--line-soft: #222836;--text: #eef1f7;--dim: #98a1b5;--go: #4fd67a;--go-deep: #2fa858;--focus: #6cc6ff;--r: 14px;--ease: .14s cubic-bezier(.2, .6, .3, 1)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}#app,#stage{position:absolute;inset:0}#ui{position:absolute;inset:0;padding:20px;display:flex;align-items:center;justify-content:center;overflow:auto;background:radial-gradient(120% 90% at 50% 0%,#1c2436b3,#06080ce6)}#ui[hidden]{display:none}.panel{width:min(440px,100%);padding:26px 24px 22px;text-align:center;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:0 30px 70px #0000008c,inset 0 1px #ffffff0f}.panel h1{margin:0;font-size:44px;font-weight:800;letter-spacing:.16em;background:linear-gradient(180deg,#fff,#8fd3ff);-webkit-background-clip:text;background-clip:text;color:transparent}.panel h2{margin:0 0 16px;font-size:24px;font-weight:700;letter-spacing:.06em}.tag{margin:6px 0 20px;color:var(--dim);font-size:13px}.nick,.pick{width:100%;height:44px;padding:0 12px;font:inherit;color:var(--text);background:#10141c;border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--ease),box-shadow var(--ease)}.nick{height:50px;font-size:18px;text-align:center}.nick::placeholder{color:#5d6679}.nick:focus,.pick:focus,.seg:focus-visible,.btn:focus-visible,.sw:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px #6cc6ff38}.colors{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:14px 0 16px}.sw{aspect-ratio:1;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px #00000059;transition:transform var(--ease),box-shadow var(--ease)}.sw:hover{transform:scale(1.08)}.sw.on{transform:scale(1.14);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--text)}.segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;margin-bottom:12px;background:#10141c;border:1px solid var(--line);border-radius:var(--r)}.seg{padding:9px 6px;cursor:pointer;color:var(--dim);font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;background:transparent;border:0;border-radius:10px;transition:background var(--ease),color var(--ease)}.seg:hover{color:var(--text)}.seg.on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.picks label{display:block;text-align:left}.picks label:first-child{grid-column:1 / -1}.picks span{display:block;margin:0 0 4px 2px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.sel{margin:10px 2px 0;font-size:12px;line-height:1.5;color:var(--dim);text-align:left}.sel b{color:var(--text);font-weight:600}.sel:empty{display:none}.btn{width:100%;height:46px;margin-top:10px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);transition:background var(--ease),border-color var(--ease),transform var(--ease)}.btn:hover{background:#262d3d;border-color:#384054}.btn:active{transform:translateY(1px)}.btn.primary{height:56px;margin-top:16px;font-size:19px;letter-spacing:.14em;color:#06210f;border-color:transparent;background:linear-gradient(180deg,var(--go),var(--go-deep));box-shadow:0 8px 22px #2fa85847}.btn.primary:hover{filter:brightness(1.06)}.btn.ghost{background:transparent;border-color:transparent;color:var(--dim)}.btn.ghost:hover{color:var(--text);background:transparent}.row{display:flex;gap:8px}.row .btn{font-size:11px;letter-spacing:.08em}.results{margin:0 0 16px;padding:0;list-style:none;font-variant-numeric:tabular-nums}.results li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;margin-bottom:6px;text-align:left;border:1px solid var(--line-soft);border-radius:12px;background:#10141c}.results li:first-child{border-color:#6a5a1e;background:#17150f;color:#ffd45e}.results small{display:block;color:var(--dim);font-size:11px}.results b{font-size:15px;white-space:nowrap}.note{margin:12px 0 0;color:#ff9a78;font-size:13px}.note:empty{display:none}.hint{margin:16px 0 0;color:#7c8598;font-size:12px;line-height:1.7}.hint b{color:var(--dim);font-weight:600}@media(max-height:720px){.panel{padding:18px 20px 16px}.panel h1{font-size:34px}.tag{margin:4px 0 14px}.nick{height:44px}.colors{margin:10px 0 12px}.btn.primary{height:50px;margin-top:12px}}