:root { --ink:#f8f6ff; --muted:#a7a4b6; --line:rgba(255,255,255,.11); --panel:#181824; --purple:#9a75ff; --pink:#ee7abb; --mint:#77ddb3; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); font-family:Outfit,Arial,sans-serif; background:#0d0e15; } button,input { font:inherit; } button { cursor:pointer; color:inherit; } .noise { position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); z-index:-1; }
.topbar { height:76px; border-bottom:1px solid var(--line); padding:0 clamp(22px,4vw,62px); display:flex; align-items:center; justify-content:space-between; background:rgba(13,14,21,.82); backdrop-filter:blur(20px); } .brand { display:flex; gap:10px; align-items:center; color:#fff; text-decoration:none; font-size:24px; font-weight:800; letter-spacing:-1px; } .brand>span:last-child span { color:#a983ff; } .brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,#b18aff,#f079ba); box-shadow:0 0 23px #a675ff77; font-size:20px; } .top-actions { display:flex; align-items:center; gap:12px; }.ghost-button,.shortcut-button,.icon-button,.text-button,.secondary-button { border:0; background:transparent; }.ghost-button { color:var(--muted); padding:10px 14px; }.shortcut-button { border:1px solid var(--line); background:#191924; padding:9px 13px; border-radius:10px; color:#dedbea; font-size:14px; }.shortcut-button kbd,.panel-footer kbd { padding:2px 5px; border-radius:4px; color:#f3f0fa; font-family:inherit; font-size:12px; background:#302d3c; border:1px solid #484253; }
.app-shell { min-height:calc(100vh - 76px); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,395px); }.stage { position:relative; min-height:calc(100vh - 76px); overflow:hidden; padding:clamp(30px,5vw,72px); background:radial-gradient(circle at 55% 42%,#292145 0, #151725 34%,#0d151b 76%); }.stage:before { content:""; position:absolute; width:600px; height:600px; left:25%; top:15%; border-radius:50%; background:#9264f51c; filter:blur(80px); }.stage-copy { position:relative; z-index:1; max-width:280px; }.eyebrow { margin:0 0 9px; letter-spacing:1.7px; font-size:10px; font-weight:700; color:#c4a9ff; }.stage h1 { margin:0; font-size:clamp(30px,3.2vw,52px); line-height:.96; letter-spacing:-2.5px; }.stage-copy>p:last-child { color:#aeadbb; line-height:1.45; font-size:15px; max-width:245px; }.wheel-area { position:absolute; left:50%; top:51%; transform:translate(-44%,-48%); width:min(61vw,690px); display:grid; place-items:center; }.wheel-wrap { width:100%; aspect-ratio:1; position:relative; filter:drop-shadow(0 28px 24px #0008); }.wheel-wrap:after { content:""; position:absolute; inset:3%; border-radius:50%; border:1px solid #ffffff44; pointer-events:none; }.wheel-wrap canvas { width:100%; height:100%; display:block; border-radius:50%; cursor:pointer; }.pointer { position:absolute; right:-12px; top:50%; z-index:3; transform:translateY(-50%); filter:drop-shadow(3px 4px 2px #0008); }.pointer:before { content:""; display:block; width:0; height:0; border-top:28px solid transparent; border-bottom:28px solid transparent; border-right:57px solid #fbf8ff; }.pointer span { position:absolute; top:-23px; right:0; width:9px; height:46px; background:#a879ff; border-radius:5px; }.spin-button { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24%; aspect-ratio:1; border:8px solid #fff; border-radius:50%; color:#fff; background:linear-gradient(145deg,#6e4dcc,#e168a9); font-weight:800; font-size:clamp(12px,1.6vw,20px); box-shadow:inset 0 2px 5px #fff5, 0 5px 16px #0006; letter-spacing:.4px; }.spin-button span { display:block; font-size:1.2em; line-height:1; }.spin-button:hover { filter:brightness(1.15); }.spin-hint { margin:14px 0 0; text-transform:uppercase; letter-spacing:2px; font-size:10px; color:#aaa2bc; }.status-card { position:absolute; left:clamp(30px,5vw,72px); bottom:35px; display:flex; align-items:center; gap:9px; color:#c4c1cd; font-size:13px; }.status-dot { width:8px; height:8px; border-radius:50%; background:#76ddb2; box-shadow:0 0 12px #76ddb2; }
.entries-panel { min-height:calc(100vh - 76px); padding:30px 25px 20px; background:#171720; border-left:1px solid var(--line); display:flex; flex-direction:column; }.panel-heading { display:flex; align-items:center; justify-content:space-between; }.panel-heading h2 { margin:0; font-size:23px; letter-spacing:-.6px; }.panel-heading h2 span { color:#898595; font:500 13px 'DM Mono',monospace; margin-left:5px; vertical-align:middle; }.icon-button { width:35px; height:35px; border-radius:9px; color:#c9c5d6; font-size:22px; background:#272634; }.icon-button:hover { background:#3a384c; }.entry-note { margin:16px 0; color:#9e9aa9; font-size:13px; line-height:1.4; }.entry-list { overflow:auto; flex:1; min-height:160px; padding-right:3px; }.entry-row { display:flex; align-items:center; gap:9px; padding:8px 7px 8px 12px; margin-bottom:5px; border-radius:10px; background:#20202b; border:1px solid transparent; }.entry-row:hover { border-color:#484456; }.entry-color { flex:0 0 10px; width:10px; height:10px; border-radius:50%; }.entry-name { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; }.entry-weight { color:#96919f; font:11px 'DM Mono',monospace; }.remove-entry { border:0; background:none; color:#7d788a; font-size:20px; line-height:1; padding:1px 3px; }.remove-entry:hover { color:#f292ad; }.add-entry { display:flex; gap:8px; margin:14px 0 18px; }.add-entry input { min-width:0; flex:1; border:1px solid #3a3848; background:#20202b; border-radius:9px; padding:12px; color:#fff; outline:none; }.add-entry input:focus { border-color:#a781ff; }.add-entry button { width:43px; border:0; border-radius:9px; background:#9b76ff; font-size:25px; line-height:1; }.panel-footer { padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#95909f; font-size:12px; }.panel-footer button { color:#c9b6ff; border:0; background:none; font-weight:600; }.panel-footer button span { font-size:16px; margin-left:4px; }
dialog { color:var(--ink); border:0; } dialog::backdrop { background:#06060bc9; backdrop-filter:blur(6px); }.rig-modal { width:min(740px,calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; border-radius:20px; padding:28px; background:#1b1a26; box-shadow:0 30px 100px #000b; }.modal-top { display:flex; justify-content:space-between; align-items:start; }.modal-top h2 { margin:0; letter-spacing:-1px; font-size:29px; }.modal-intro { color:#a8a4b4; line-height:1.45; margin:13px 0 22px; max-width:580px; }.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.mode-card { padding:17px; border:1px solid #3c3948; border-radius:14px; }.favor-card { background:linear-gradient(135deg,#352b51,#24212e); border-color:#7656aa; }.avoid-card { background:linear-gradient(135deg,#382535,#26212b); border-color:#884d69; }.mode-label { display:flex; gap:10px; align-items:center; }.mode-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#ffffff15; color:#d8baff; }.mode-label h3,.weight-section h3 { margin:0; font-size:16px; }.mode-label p,.weight-section p { margin:2px 0 0; color:#aaa5b4; font-size:12px; }.choice-list { margin-top:14px; display:grid; gap:6px; max-height:150px; overflow:auto; }.choice-option { display:flex; gap:9px; align-items:center; font-size:13px; cursor:pointer; }.choice-option input { accent-color:#a77cff; width:15px; height:15px; }.avoid-card .choice-option input { accent-color:#ed7eaa; }.chance-control { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:16px; color:#ddd8e8; font-size:13px; }.chance-control output { color:#dbbeff; font-family:'DM Mono',monospace; }.chance-control input { grid-column:1 / -1; accent-color:#b68cff; width:100%; }.weight-section { margin-top:13px; padding:17px; border-radius:14px; background:#22212c; border:1px solid #3c3a48; }.weight-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }.weight-field { min-width:0; display:flex; align-items:center; gap:7px; padding:7px 8px; background:#2d2b38; border-radius:8px; }.weight-field span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; font-size:12px; }.weight-field input { width:40px; border:0; padding:3px; text-align:center; border-radius:4px; color:#fff; background:#454151; outline:none; font:12px 'DM Mono',monospace; }.modal-footer { margin-top:22px; display:flex; justify-content:space-between; align-items:center; }.modal-footer>div { display:flex; gap:9px; }.text-button { color:#c3bdd0; font-size:13px; }.secondary-button,.primary-button { padding:10px 15px; border-radius:9px; border:1px solid #4c4858; font-weight:600; }.secondary-button { background:#2b2934; }.primary-button { border:0; background:linear-gradient(135deg,#a984ff,#dc70b3); box-shadow:0 7px 18px #9f6fe144; }.primary-button span { margin-left:5px; }.result-modal { width:min(400px,calc(100vw - 28px)); padding:42px 30px 30px; text-align:center; border-radius:22px; background:radial-gradient(circle at 50% 0,#4b376d,#1e1b29 62%); box-shadow:0 30px 100px #000b; }.result-modal h2 { margin:10px 0 8px; font-size:48px; line-height:1; letter-spacing:-2px; word-break:break-word; }.result-modal p:not(.eyebrow) { color:#bbb5c7; margin:0 0 24px; }.result-close { position:absolute; right:14px; top:10px; border:0; background:none; color:#c9c2d5; font-size:25px; }.result-modal .primary-button { width:100%; font-size:15px; }
@media (max-width:900px) { .app-shell { grid-template-columns:1fr; }.stage { min-height:650px; }.entries-panel { min-height:450px; border-left:0; border-top:1px solid var(--line); }.wheel-area { top:53%; left:51%; width:min(88vw,590px); transform:translate(-50%,-42%); }.stage-copy { position:absolute; top:32px; left:30px; }.stage h1 { font-size:34px; }.stage-copy>p:last-child { display:none; } }. @media(max-width:530px) { .topbar { height:62px; padding:0 15px; }.brand { font-size:20px; }.brand-mark { width:28px; height:28px; }.ghost-button { display:none; }.shortcut-button { font-size:11px; padding:8px; }.app-shell,.stage,.entries-panel { min-height:calc(100vh - 62px); }.stage { padding:25px 20px; min-height:500px; }.wheel-area { width:96vw; top:54%; }.spin-hint { display:none; }.pointer { right:-3px; }.pointer:before { border-top-width:18px; border-bottom-width:18px; border-right-width:37px; }.pointer span { top:-15px; height:30px; width:6px; }.status-card { left:20px; bottom:15px; }.mode-grid { grid-template-columns:1fr; }.weight-list { grid-template-columns:repeat(2,1fr); }.rig-modal { padding:20px; }.modal-footer { gap:13px; align-items:flex-start; flex-direction:column; }.modal-footer>div { width:100%; }.modal-footer>div button { flex:1; }.panel-footer { font-size:11px; } }