@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;450;500;550;600;650;700;750;800;900&display=swap');
:root{--bg:#f6f5f0;--ink:#283c33;--muted:#858a80;--green:#284b3b;--orange:#e88d68;--border:#e4e5dc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Golos Text',Arial,sans-serif;font-size:14px}button,textarea,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #dc9d53;outline-offset:4px}header{height:91px;margin:auto;padding:0 4.6%;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.brand{font-size:29px;font-weight:750;color:var(--ink);text-decoration:none;letter-spacing:-1.5px;display:flex;align-items:center;gap:9px}.brand-icon{font-size:43px;color:var(--green);line-height:1}.brand-dot{color:var(--orange);margin-left:-8px}.header-note{font-size:12px;color:#7e877d;display:flex;align-items:center;gap:9px}.header-note i,.live-dot{width:6px;height:6px;background:#8a9c76;display:inline-block;border-radius:50%}.icon-button{background:transparent;border:1px solid #dcded4;border-radius:22px;padding:10px 14px;color:#6f796e;font-size:11px}main{max-width:1280px;margin:auto;padding:45px 48px 20px}.intro{position:relative;margin-bottom:37px}.eyebrow{font-size:10px;letter-spacing:2.2px;color:#8b927e;font-weight:650}h1{font-size:54px;letter-spacing:-2.8px;font-weight:550;margin:13px 0 14px;line-height:1.12}h1 em{font-style:normal;color:#b27452}h1 .spark{color:var(--orange);font-size:43px;display:inline-block;vertical-align:top;margin:0 0 0 17px;transform:rotate(13deg)}.intro p{color:#858a80;font-size:14px;margin:0}.workspace{display:grid;grid-template-columns:370px 1fr;gap:26px}.panel{background:#fffefa;border:1px solid var(--border);border-radius:19px}.settings{padding:25px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}h2{font-size:15px;font-weight:650;margin:0;display:flex;gap:10px;align-items:center}.step{color:#9da694;font-size:10px;font-weight:500;margin-right:3px}.badge{background:#eeefe7;color:#7c8571;border-radius:6px;padding:5px 7px;font-size:10px;font-weight:500}.field-label{font-size:11px;display:block;color:#8e9287;margin-bottom:10px}.input-wrap{position:relative}textarea{width:100%;height:177px;resize:vertical;min-height:90px;max-height:360px;border:1px solid #e5e6dc;background:#f8f9f3;border-radius:10px;line-height:1.7;color:#425045;padding:12px 14px;font-size:13px}textarea:disabled{opacity:.7}.input-decoration{position:absolute;right:13px;bottom:15px;color:#b1b8a7}.input-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:7px;font-size:9px;color:#a2a697}.text-button{background:none;border:none;color:#8a927e;padding:0;font-size:10px;white-space:nowrap}.text-button:hover{color:#344f3d;text-decoration:underline}.divider{border-top:1px solid #eeeee5;margin:22px 0}.modes{display:grid;gap:8px}.mode{display:flex;gap:11px;align-items:center;text-align:left;width:100%;border:1px solid #e8e9df;border-radius:10px;padding:11px;background:transparent;color:var(--ink)}.mode.selected{border-color:#57745a;background:#edf1e8;box-shadow:0 0 0 1px #57745a10}.mode-symbol{width:29px;height:29px;display:grid;place-items:center;border-radius:6px;background:#f0f1e9;color:#859079;font-size:22px}.selected .mode-symbol{background:#dee7d5;color:#476443}.mode strong{font-size:11px;font-weight:550;display:block;margin-bottom:4px}.mode small{display:block;font-size:9px;color:#8b9483}.radio{width:13px;height:13px;border-radius:50%;border:1px solid #d9ddce;margin-left:auto;flex-shrink:0}.selected .radio{border:4px solid #55724c;background:#fff}.mode-help{font-size:10px;color:#949b89;line-height:1.6;margin:12px 0 0;min-height:32px}.duration-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:550}.duration-heading output{font-size:17px;color:#4b6349}.duration-heading output span{font-size:10px;font-weight:400;color:#8d9786}input[type=range]{width:100%;margin:19px 0 9px;accent-color:#526d45;height:4px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#a0a594}.wheel-panel{border:1px solid var(--border);border-radius:19px;background:radial-gradient(ellipse at 50% 30%,#fffefa 0%,#f2f2e9 75%);display:flex;align-items:center;flex-direction:column;padding:25px 28px 0;position:relative;overflow:hidden}.wheel-meta{display:flex;gap:8px;align-items:center;letter-spacing:1.8px;font-size:9px;color:#8b937f}.wheel-stage{position:relative;width:min(100%,470px);aspect-ratio:1;margin:28px 0 15px;display:grid;place-items:center}.orbit{position:absolute;border:1px dashed #dfe3d4;border-radius:50%;inset:0;pointer-events:none}.orbit-two{inset:14px;border-style:solid;border-color:#e5e6da}canvas{width:88%;height:88%;border-radius:50%;box-shadow:0 10px 22px #36482b14;border:8px solid #fffefa;z-index:1}.pointer{position:absolute;top:3.8%;left:calc(50% - 12px);width:24px;height:35px;background:var(--green);clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 50%);z-index:4;filter:drop-shadow(0 2px 3px #0003)}.hub{position:absolute;background:#fffefa;border:7px solid #ffffff55;background-clip:padding-box;border-radius:50%;width:77px;height:77px;display:grid;place-items:center;z-index:2;box-shadow:0 2px 12px #17351e20}.hub span{font-size:41px;color:#294734}.tiny-star{position:absolute;color:#d3a26f;font-size:32px}.star-one{top:7%;right:2%}.star-two{bottom:7%;left:0%;font-size:22px;color:#abb799}.wheel-bottom{width:100%;max-width:345px;text-align:center;margin-bottom:25px}.spin-button{width:100%;display:flex;justify-content:center;align-items:center;gap:24px;background:var(--green);border:none;border-radius:10px;color:#fffefa;padding:17px 22px;font-weight:550;font-size:14px;box-shadow:0 5px 8px #26452d0b;transition:background .2s,transform .2s}.spin-button:hover{background:#3c6048;transform:translateY(-1px)}.spin-button:disabled{opacity:.6;cursor:default;transform:none}.button-arrow{font-size:20px}.wheel-bottom p{font-size:9px;color:#9aa18f;margin:12px 0 0}.stats{margin-top:auto;display:flex;align-items:center;justify-content:space-evenly;border-top:1px solid #e3e5d9;width:calc(100% + 56px);padding:21px 12px}.stats>div{display:flex;flex-direction:column;text-align:center;gap:7px}.stats strong{font-size:20px;font-weight:550}.stats span{font-size:9px;color:#959d88}.stat-separator{height:28px;width:1px;background:#e0e4d6}.history{padding:23px 25px;margin-top:24px}.history-heading{display:flex;align-items:center;justify-content:space-between}.history-icon{font-size:23px;color:#8c9a7d}.history-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:19px}.empty-history{font-size:11px;color:#a5ab9a;padding:3px 0}.history-item{background:#f0f2e8;border:1px solid #e6eadc;padding:10px 13px;border-radius:8px;display:flex;align-items:center;gap:10px;max-width:100%}.history-item b{font-size:12px;overflow-wrap:anywhere}.history-item small{color:#9ba48e;font-size:9px}.history-item .history-number{font-size:10px;color:#a0aa91}footer{display:flex;justify-content:space-between;color:#a1a794;font-size:9px;padding:25px 0;align-items:center}.footer-star{font-size:19px;margin-left:12px;color:#94a180}dialog{background:#fffefa;color:var(--ink);border:1px solid var(--border);border-radius:22px;max-width:470px;width:calc(100% - 32px);padding:40px 35px 25px;text-align:center;box-shadow:0 20px 100px #1c352d33}dialog::backdrop{background:#243b3355;backdrop-filter:blur(5px)}dialog h2{justify-content:center;font-size:24px;margin:15px 0}.winner-icon{font-size:65px;color:#de986a;margin-bottom:15px}.winner-name{font-size:38px;font-weight:750;color:var(--green);overflow-wrap:anywhere;margin:20px 0}.winner-name:empty{display:none}dialog p{color:#919b83;font-size:11px;margin-bottom:26px}.close-button{position:absolute;right:15px;top:10px;background:none;border:none;font-size:27px;color:#9da58f}.remove-button{font-size:11px;border:0;background:none;color:#879375;margin-top:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.confetti{position:fixed;top:-20px;width:9px;height:15px;pointer-events:none;z-index:1000;animation:fall 2.6s ease-in forwards}@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(600deg);opacity:0}}@media(min-width:1400px){main{padding-top:50px}.workspace{grid-template-columns:390px 1fr}.wheel-stage{width:480px}}@media(max-width:950px){main{padding:35px 25px}.workspace{grid-template-columns:320px 1fr;gap:16px}.settings{padding:20px}.wheel-panel{padding:25px 15px 0}.wheel-stage{margin-top:65px}.stats{width:calc(100% + 30px)}.wheel-bottom{margin-top:20px}.stats span{font-size:8px}}@media(max-width:720px){header{height:75px;padding:0 20px}.header-note{display:none}main{padding:30px 18px 5px}.eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:38px;letter-spacing:-2px}h1 .spark{font-size:30px;margin-left:10px}.intro p{font-size:11px}.intro{margin-bottom:26px}.workspace{display:flex;flex-direction:column}.settings{padding:23px}.wheel-panel{padding:24px 20px 0}.wheel-stage{max-width:430px;margin:25px 0 14px}.wheel-bottom{margin-top:0}.stats{width:calc(100% + 40px)}.stats span{font-size:9px}.history{padding:20px}footer{gap:20px;font-size:8px;line-height:1.5}footer>span{max-width:48%}textarea{height:150px}.history-heading h2{font-size:13px}dialog h2{font-size:21px}}
.mode-symbol{font-family:Arial,sans-serif}.mode[data-mode=weighted] .mode-symbol,.mode[data-mode=inverse] .mode-symbol,.button-arrow,#again>span{font-size:0}.mode[data-mode=weighted] .mode-symbol:before,.mode[data-mode=inverse] .mode-symbol:before,.button-arrow:before,#again>span:before{content:'';display:inline-block;width:12px;height:12px;background:currentColor;clip-path:polygon(0 15%,100% 15%,100% 100%,83% 100%,83% 44%,12% 100%,0 86%,70% 32%,0 32%)}.mode[data-mode=inverse] .mode-symbol:before{transform:rotate(90deg)}
.logout-form{margin-left:auto;margin-right:12px}.header-note{margin-left:auto;margin-right:auto}.login-main{min-height:100vh;display:grid;place-items:center}.login-panel{width:100%;max-width:440px;padding:35px;text-align:center}.login-panel h1{font-size:30px;letter-spacing:-1px}.login-panel p{color:var(--muted);font-size:12px;line-height:1.6}.login-panel form{text-align:left;margin-top:26px}.login-panel input{width:100%;padding:13px;border:1px solid var(--border);border-radius:8px;background:var(--bg);margin-bottom:18px}.login-panel .login-error{color:#a63838}.login-note{margin-top:22px}.login-panel .winner-icon{margin-top:0}


/* Scoped dark theme. */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101715;
    --ink: #e6eeea;
    --muted: #a0b1a8;
    --green: #88d4af;
    --orange: #e7b68d;
    --border: #304039;
    --surface: #19231f;
    --surface-raised: #202e27;
    --text-soft: #a6b7ad;
    --accent-ink: #10261b;
}html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }html[data-theme="dark"] ::selection { background: #35604a; color: #f3fff8; }html[data-theme="dark"] header { background: #121b17; border-color: var(--border); }html[data-theme="dark"] .brand-icon { color: var(--green); }html[data-theme="dark"] .brand-dot, html[data-theme="dark"] h1 em, html[data-theme="dark"] h1 .spark { color: var(--orange); }html[data-theme="dark"] .header-note { color: var(--text-soft); }html[data-theme="dark"] .header-note i, html[data-theme="dark"] .live-dot { background: var(--green); box-shadow: 0 0 10px #88d4af30; }html[data-theme="dark"] .icon-button { border-color: #43594b; color: #c2d3c9; background: #1b2921; }html[data-theme="dark"] .icon-button:hover { background: #2a3d31; color: #effbf3; }html[data-theme="dark"] .eyebrow { color: #b3c9b9; }html[data-theme="dark"] .intro p { color: var(--text-soft); }html[data-theme="dark"] .panel { background: var(--surface); border-color: var(--border); box-shadow: 0 10px 30px #00000012; }html[data-theme="dark"] .step { color: #9db5a4; }html[data-theme="dark"] .badge { background: #293b30; color: #c1d6c7; }html[data-theme="dark"] .field-label { color: #b1c1b8; }html[data-theme="dark"] textarea { color: #e2eee6; background: #111c16; border-color: #3a4e40; caret-color: var(--green); }html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] .login-panel input::placeholder { color: #80968a; }html[data-theme="dark"] textarea:focus, html[data-theme="dark"] .login-panel input:focus { border-color: var(--green); }html[data-theme="dark"] .input-decoration { color: #90a99a; }html[data-theme="dark"] .input-footer { color: #a4b7aa; }html[data-theme="dark"] .text-button { color: #b2cbbb; }html[data-theme="dark"] .text-button:hover { color: #c7f1d8; }html[data-theme="dark"] .text-button:disabled { color: #82958a; cursor: default; }html[data-theme="dark"] .divider { border-color: var(--border); }html[data-theme="dark"] .mode { border-color: #36483c; background: #1a261f; }html[data-theme="dark"] .mode:hover:not(:disabled) { border-color: #708d79; background: #223328; }html[data-theme="dark"] .mode.selected { background: #273e2f; border-color: #8bc4a0; box-shadow: 0 0 0 1px #88d4af10; }html[data-theme="dark"] .mode-symbol { background: #293b2f; color: #acc8b4; }html[data-theme="dark"] .selected .mode-symbol { background: #385c43; color: #d3f1dc; }html[data-theme="dark"] .mode small { color: #adbfaf; }html[data-theme="dark"] .radio { border-color: #637f6c; }html[data-theme="dark"] .selected .radio { border-color: var(--green); background: #183123; }html[data-theme="dark"] .mode-help { color: #acbfae; }html[data-theme="dark"] .duration-heading output { color: #b2e5c4; }html[data-theme="dark"] .duration-heading output span { color: #a8bdaa; }html[data-theme="dark"] input[type=range] { accent-color: var(--green); }html[data-theme="dark"] .range-labels { color: #a3b7a8; }html[data-theme="dark"] .wheel-panel { background: radial-gradient(ellipse at 50% 34%, #24372b 0%, #18251d 52%, #142019 100%); border-color: var(--border); }html[data-theme="dark"] .wheel-meta { color: #b3cab7; }html[data-theme="dark"] .orbit { border-color: #425846; }html[data-theme="dark"] .orbit-two { border-color: #334b38; }html[data-theme="dark"] canvas { border-color: #293c2e; box-shadow: 0 12px 38px #00000050, 0 0 0 1px #415943; }html[data-theme="dark"] .pointer { background: #d6efb4; filter: drop-shadow(0 3px 4px #00000055); }html[data-theme="dark"] .hub { background: #18291d; border-color: #b2d6ba30; box-shadow: 0 3px 16px #00000055; }html[data-theme="dark"] .hub span { color: #a5ddac; }html[data-theme="dark"] .tiny-star { color: #d8af79; }html[data-theme="dark"] .star-two { color: #90b591; }html[data-theme="dark"] .spin-button { background: #95d4ac; color: var(--accent-ink); box-shadow: 0 6px 22px #00000026; }html[data-theme="dark"] .spin-button:hover { background: #b0e7c4; }html[data-theme="dark"] .spin-button:disabled { opacity: .5; }html[data-theme="dark"] .wheel-bottom p { color: #aec3af; }html[data-theme="dark"] .stats { border-color: #374f3d; }html[data-theme="dark"] .stats strong { color: #e1eee1; }html[data-theme="dark"] .stats span { color: #aec2af; }html[data-theme="dark"] .stat-separator { background: #3d5542; }html[data-theme="dark"] .history-icon { color: #add1b2; }html[data-theme="dark"] .empty-history { color: #adbeaf; }html[data-theme="dark"] .history-item { background: #23372a; border-color: #3b5241; }html[data-theme="dark"] .history-item small, html[data-theme="dark"] .history-item .history-number { color: #b2c8b6; }html[data-theme="dark"] footer { color: #a0b4a4; }html[data-theme="dark"] .footer-star { color: #9cc4a3; }html[data-theme="dark"] dialog { background: #1a2920; border-color: #4a6751; box-shadow: 0 22px 110px #00000088; }html[data-theme="dark"] dialog::backdrop { background: #030a07bd; }html[data-theme="dark"] .winner-icon { color: #dcbb8c; }html[data-theme="dark"] .winner-name { color: #b6ebc7; }html[data-theme="dark"] dialog p { color: #b1c7b5; }html[data-theme="dark"] .close-button, html[data-theme="dark"] .remove-button { color: #bad4bf; }html[data-theme="dark"] .close-button:hover, html[data-theme="dark"] .remove-button:hover { color: #edfff0; }html[data-theme="dark"] .login-panel input { background: #101d15; border-color: #415a48; color: #e7f3e9; caret-color: var(--green); }html[data-theme="dark"] .login-panel p { color: #afc4b3; }html[data-theme="dark"] .login-panel .login-error { color: #ffb2aa; }html[data-theme="dark"] .login-panel input:-webkit-autofill { -webkit-text-fill-color: #e7f3e9; box-shadow: 0 0 0 1000px #101d15 inset; }html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] textarea:focus-visible { outline-color: #e7bf8c; }html[data-theme="dark"] * { scrollbar-width: thin; scrollbar-color: #557660 #16221a; }
@media (prefers-reduced-motion: reduce) {html[data-theme="dark"] .spin-button { transition: none; }
}


/* Canvas colors shared with app.js. */
:root {
    color-scheme: light;
    --wheel-0: #56765a;
    --wheel-1: #e7ae86;
    --wheel-2: #d6dcae;
    --wheel-3: #7f9a7c;
    --wheel-4: #edc8a6;
    --wheel-5: #a6b891;
    --wheel-6: #e9d9b3;
    --wheel-7: #385d49;
    --wheel-empty: #dfe5d4;
    --wheel-stroke: #fffefa90;
    --wheel-text: #3c4b37;
    --wheel-text-light: #fffef4;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --wheel-0: #24594e;
    --wheel-1: #725039;
    --wheel-2: #454f78;
    --wheel-3: #5b4265;
    --wheel-4: #3a615c;
    --wheel-5: #684b4c;
    --wheel-6: #525c38;
    --wheel-7: #344b68;
    --wheel-empty: #25302e;
    --wheel-stroke: #ffffff28;
    --wheel-text: #f2f5f3;
    --wheel-text-light: #f2f5f3;
}
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-right: 10px; }
.theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-toggle-floating { position: fixed; top: 22px; right: 22px; z-index: 10; margin-right: 0; }
@media(max-width:720px) {
    header { gap: 8px; padding-inline: 14px; }
    .brand { font-size: 24px; }
    .brand-icon { font-size: 32px; }
    .theme-toggle { margin-right: 0; padding: 10px; }
    header .theme-toggle-label { display: none; }
    .logout-form { margin-left: auto; margin-right: 0; }
    header .icon-button { font-size: 10px; }
    .theme-toggle-floating { top: 14px; right: 14px; }
}
.icon-credit {
    color: inherit;
    font-size: 10px;
    text-decoration: none;
}

.icon-credit:hover {
    text-decoration: underline;
}

footer {
    flex-wrap: wrap;
    gap: 12px;
}