:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color-scheme:light;--bg:#f7f6f3;--paper:#ffffff;--paper2:#f2f1ee;--ink:#24272b;--dim:#666971;--muted:#8a8b90;--line:#e2e1dd;--strong:#24272b;--strongText:#fff;--focus:#6779b8;--header:#f7f6f3;--wheelEdge:#313540;--wheelStroke:#f9f8f6}
html[data-theme="dark"]{color-scheme:dark;--bg:#171a1d;--paper:#21252a;--paper2:#282c31;--ink:#f4f2ed;--dim:#c2c0bc;--muted:#95969d;--line:#393d42;--strong:#f5f2ec;--strongText:#202126;--focus:#a9b7ec;--header:#171a1d;--wheelEdge:#4f5463;--wheelStroke:#fcfaf6}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--bg);color:var(--ink);margin:0;min-width:290px;-webkit-font-smoothing:antialiased}body,header{transition:background-color .22s,color .22s}button,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:disabled{cursor:wait}::selection{background:#d9e6e4;color:#162623}
header{position:sticky;top:0;z-index:30;background:var(--header);border-bottom:1px solid var(--line)}.nav{max-width:1272px;padding:0 48px;margin:0 auto;height:75px;display:flex;align-items:center;justify-content:space-between;gap:16px}.identity{display:flex;align-items:center;gap:12px;min-width:0}.mark{width:35px;height:35px;flex:0 0 35px}.brand{font-weight:750;letter-spacing:-.045em;font-size:17px;white-space:nowrap}.byline{border-left:1px solid var(--line);padding-left:14px;margin-left:3px;font-size:12px;color:var(--dim);font-weight:500;white-space:nowrap}.nav-right{display:flex;align-items:center;gap:18px}.nav-anchor{font-size:13px;font-weight:600;color:var(--dim);padding:8px 0}.nav-anchor:hover{color:var(--ink)}.theme{display:flex;align-items:center;gap:2px;padding:3px;background:var(--paper2);border:1px solid var(--line);border-radius:999px}.theme button{width:31px;height:29px;display:grid;place-items:center;background:transparent;border:0;border-radius:999px;color:var(--muted);transition:background .15s,color .15s}.theme button:hover{color:var(--ink)}.theme button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #00000012}.theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
main{max-width:1272px;margin:0 auto;padding:0 48px}.workspace{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-areas:"intro wheel" "editor wheel";column-gap:clamp(36px,5vw,90px);padding:77px 0 88px;align-items:start}.intro{grid-area:intro;min-width:0;padding:28px 0 34px}.intro h1{font-size:clamp(53px,5.15vw,78px);font-weight:710;line-height:1.035;letter-spacing:-.071em;margin:0;max-width:610px}.intro .accent{font-weight:450;color:var(--dim)}.intro p{color:var(--dim);font-size:17px;line-height:1.65;letter-spacing:-.015em;margin:25px 0 0;max-width:405px}.line-sign{display:block;width:43px;height:3px;background:#e68771;border-radius:999px;margin-bottom:23px}
.editor{grid-area:editor;max-width:505px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 0 13px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:19px;letter-spacing:-.045em;font-weight:690;margin:0}.counter{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.editor-sub{font-size:13px;color:var(--dim);margin:12px 0 16px;line-height:1.5}.choices{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:1px}.choice{display:flex;align-items:center;min-width:0;height:41px;border-bottom:1px solid var(--line);gap:8px}.swatch{flex:0 0 9px;width:9px;height:9px;border-radius:50%}.choice input{width:100%;min-width:0;background:transparent;border:0;border-radius:3px;padding:7px 2px;color:var(--ink);font-size:13px;font-weight:540;letter-spacing:-.005em;text-overflow:ellipsis}.choice input:focus{outline:0;box-shadow:inset 0 -2px var(--focus)}.remove{flex:0 0 27px;width:27px;height:27px;padding:0;border:0;color:var(--muted);background:transparent;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:300}.remove:hover{background:var(--paper2);color:var(--ink)}.remove:disabled{opacity:.28;cursor:default}.addrow{margin-top:17px;display:flex;gap:9px}.addrow input{min-width:0;flex:1;height:45px;border:1px solid var(--line);border-radius:11px;background:var(--paper);padding:0 15px;color:var(--ink);font-size:14px;box-shadow:0 1px 2px #00000004}.addrow input::placeholder{color:var(--muted)}.add-btn{height:45px;padding:0 20px;border-radius:11px;background:var(--ink);border:1px solid var(--ink);color:var(--bg);font-size:13px;font-weight:650}.add-btn:hover:not(:disabled){opacity:.87}.tools{margin-top:13px;display:flex;align-items:center;flex-wrap:wrap;gap:9px}.tool{padding:8px 12px 8px 0;border:0;background:transparent;font-size:12px;font-weight:560;color:var(--dim)}.tool:hover{color:var(--ink)}.tool:disabled{opacity:.4}.tool svg{vertical-align:-2px;margin-right:5px;width:14px;height:14px}.message{color:var(--muted);font-size:11px;margin-top:12px;min-height:1.5em}
.wheel-column{grid-area:wheel;min-width:0;display:flex;flex-direction:column;align-items:center;padding-top:0}.wheel-stage{width:100%;max-width:606px;aspect-ratio:1;position:relative;display:grid;place-items:center;isolation:isolate}.wheel-shadow{position:absolute;inset:auto 10% 4%;height:13%;border-radius:50%;background:radial-gradient(ellipse,rgba(35,35,45,.25),rgba(35,35,45,.08) 45%,transparent 72%);z-index:-1;pointer-events:none}.wheel-shell{position:absolute;inset:5.7%;border-radius:50%;background:linear-gradient(145deg,#eceef1 2%,#5d6473 19%,#fbfcfc 39%,#7b8390 58%,#e1e3e7 77%,#505664 100%);box-shadow:0 5px 0 #707681,0 11px 0 #383d49,0 23px 26px rgba(24,27,37,.18),0 42px 55px rgba(24,27,37,.085),inset 0 2px 1px #fff,inset 0 -2px 3px #3b4350}.wheel-shell::after{content:"";position:absolute;inset:9px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff9,inset 0 0 0 5px #545d6e55;pointer-events:none}.wheel-button{position:absolute;inset:9%;border-radius:50%;padding:0;border:5px solid #f5f4f0;overflow:hidden;background:#e0ad7e;box-shadow:0 0 0 2px #3e4350,0 2px 15px #0002;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2}.wheel-button:not(:disabled):hover{filter:saturate(1.05)}.wheel-button:disabled{cursor:progress}.wheel-svg{display:block;width:100%;height:100%;transform-origin:50% 50%;will-change:auto}.wheel-button[aria-busy="true"] .wheel-svg{will-change:transform}.wheel-highlight{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 75% 48% at 31% 12%,#ffffff5e,transparent 89%),radial-gradient(ellipse 70% 48% at 72% 104%,#07102126,transparent 90%);z-index:3}.wheel-center{pointer-events:none;position:absolute;z-index:5;left:50%;top:50%;width:9.8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 34% 26%,#fff 0%,#f7f8f8 20%,#9aa1ac 56%,#4c5260 95%);border:3px solid #eceef0;box-shadow:0 4px 10px #1b223c65,0 0 0 3px #525a65,inset 0 1px 2px #fff9}.wheel-center::after{content:"";position:absolute;inset:30%;background:#4e5563;border-radius:50%;box-shadow:inset 0 1px 3px #2228,0 1px 1px #fff}.pointer{z-index:7;position:absolute;top:2.7%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:34px solid #272b34;filter:drop-shadow(0 4px 2px #0003);pointer-events:none}.pointer::after{content:"";position:absolute;left:-6px;top:-31px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:15px solid #eff0f1}.wheel-caption{color:var(--dim);font-size:12px;margin-top:-2px;letter-spacing:.005em}.spin{margin-top:21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:241px;height:56px;padding:0 27px;border:0;border-radius:14px;background:var(--strong);color:var(--strongText);font-size:15px;font-weight:690;letter-spacing:-.015em;box-shadow:0 5px 0 #0003,0 12px 20px #00000012;transform:translateY(0);transition:transform .16s,box-shadow .16s,opacity .16s}.spin:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #0003,0 15px 22px #00000016}.spin:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #0003,0 4px 7px #00000010}.spin:disabled{opacity:.76;cursor:wait}.spin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.result{height:46px;display:flex;justify-content:center;align-items:center;font-size:15px;font-weight:560;letter-spacing:-.018em;text-align:center;color:var(--dim)}.result strong{font-size:22px;color:var(--ink);font-weight:720;letter-spacing:-.035em}.result.show strong{animation:appear .38s cubic-bezier(.2,.9,.15,1) both}@keyframes appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}
.secondary{border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:36px;padding:34px 0 72px}.secondary h2{font-size:clamp(21px,3vw,35px);letter-spacing:-.05em;line-height:1.15;font-weight:640;margin:0;max-width:400px}.secondary p{font-size:14px;line-height:1.7;color:var(--dim);max-width:440px;margin:0}.secondary a{text-decoration:underline;text-underline-offset:4px}.footer{border-top:1px solid var(--line);max-width:1272px;padding:24px 48px 30px;margin:auto;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
@media(max-width:900px){.nav{padding:0 28px}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:25px;padding-top:53px}.intro{padding-top:8px}.intro h1{font-size:clamp(42px,5.4vw,60px)}.editor .choices{grid-template-columns:1fr}.wheel-stage{max-width:520px}main{padding:0 28px}.footer{padding-inline:28px}}
@media(max-width:660px){.nav{height:64px;padding:0 19px}.brand{font-size:15px}.mark{width:30px;height:30px;flex-basis:30px}.identity{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;row-gap:0}.identity>a:first-child{grid-row:1 / 3;grid-column:1;align-self:center}.brand{grid-column:2;grid-row:1;line-height:1.15}.byline{grid-column:2;grid-row:2;font-size:10px;padding:0;margin:0;border:0;line-height:1.18;white-space:nowrap}.nav-anchor{display:none}.nav-right{gap:0}main{padding:0 21px}.workspace{display:flex;flex-direction:column;gap:0;padding:36px 0 51px}.intro{order:0;padding:11px 0 15px}.intro h1{font-size:clamp(43px,10vw,65px);max-width:570px}.intro p{margin-top:17px;font-size:15px}.line-sign{margin-bottom:17px}.wheel-column{order:1;width:100%;padding-top:0}.wheel-stage{max-width:530px}.pointer{border-left-width:14px;border-right-width:14px;border-top-width:27px}.pointer::after{left:-5px;top:-24px;border-left-width:5px;border-right-width:5px;border-top-width:11px}.spin{margin-top:14px;width:min(100%,310px);height:53px}.result{height:43px}.editor{order:2;max-width:none;width:100%;margin-top:23px}.editor .choices{grid-template-columns:1fr 1fr}.secondary{padding:30px 0 50px;display:block}.secondary p{margin-top:14px}.footer{padding:20px 21px 25px}}
@media(max-width:375px){.identity{column-gap:6px}.byline{font-size:9px;max-width:none;white-space:nowrap;line-height:1.13}.editor .choices{grid-template-columns:1fr 1fr;column-gap:11px}.choice input{font-size:12px}.intro h1{font-size:clamp(39px,11.5vw,46px)}.nav{padding-inline:13px}.theme button{width:28px;height:28px}main{padding-inline:16px}.footer{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.wheel-svg{will-change:auto}}
.guide-links{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:15px!important}.guide-links a{font-size:13px;font-weight:600;text-underline-offset:4px}.foot-links{display:flex;flex-wrap:wrap;gap:16px}.nav-right{gap:14px}@media(max-width:1050px){.nav-right .nav-anchor:nth-of-type(3){display:none}}@media(max-width:660px){.guide-links{flex-direction:column;align-items:flex-start}.foot-links{gap:10px 16px}}

/* 2026 visual refinement: depth without continuously animated decorative effects */
:root{--button-rim:#20252c;--button-face:#353b45;--button-highlight:rgba(255,255,255,.18)}
html[data-theme="dark"]{--button-rim:#060709;--button-face:#f6f3ee;--button-highlight:rgba(255,255,255,.26)}
/* More balanced, editorial headline leading and tracking. */
.intro h1{line-height:1.115;letter-spacing:-.048em;text-wrap:balance}
.intro .accent{display:block;margin-top:.18em;font-size:.8em;letter-spacing:-.043em;line-height:1.14}
.intro p{margin-top:28px}
/* The stationary rim is layered; only the SVG inside is transformed when spinning. */
.wheel-shadow{inset:auto 8% 2%;height:16%;background:radial-gradient(ellipse,rgba(24,32,42,.22),rgba(24,32,42,.09) 45%,transparent 75%)}
.wheel-shell{background:conic-gradient(from -55deg,#f7f8fa 0deg,#a7aebb 34deg,#555e6a 57deg,#eceef2 90deg,#69717c 125deg,#f5f5f4 155deg,#757d8b 191deg,#eef0f2 225deg,#5c6270 260deg,#dfe2e6 301deg,#fafbfc 330deg,#a6adb9 360deg);border:1px solid rgba(255,255,255,.62);box-shadow:0 5px 0 #a4a9b0,0 10px 0 #676e7a,0 16px 0 #444b58,0 24px 28px rgba(28,34,42,.17),0 41px 58px rgba(23,28,40,.075),inset 0 2px 1px #fff,inset 0 -3px 4px #343b46}
.wheel-shell::before{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(255,255,255,.62);box-shadow:inset 0 2px 3px rgba(32,44,52,.26),0 2px 2px rgba(0,0,0,.10);pointer-events:none}
.wheel-shell::after{inset:11px;box-shadow:inset 0 0 0 2px #ffffff94,inset 0 0 0 5px #535b6a50}
.wheel-button{border:5px solid #f8f8f4;box-shadow:0 0 0 2px #616979,0 3px 10px #0002,inset 0 2px 6px rgba(255,255,255,.38)}
.wheel-center{background:radial-gradient(circle at 31% 21%,#fff 2%,#e9edf0 21%,#a6adb9 55%,#5f6776 85%,#323946 100%);border:3px solid #f6f5f1;box-shadow:0 2px 0 #313844,0 5px 8px #19213361,0 0 0 3px #545d69,inset 0 1px 2px #fff}
.pointer{filter:drop-shadow(0 4px 2px #0004)}
/* Raised physical buttons: resting depth, subtle hover lift, tactile press-down. */
.spin{border:1px solid var(--button-rim);border-bottom-color:#161a1e;background:linear-gradient(180deg,var(--button-face),var(--strong) 70%);box-shadow:0 1px 0 var(--button-highlight) inset,0 5px 0 var(--button-rim),0 10px 13px #00000015,0 16px 28px #0000000a;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s,filter .16s}
.spin:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 1px 0 var(--button-highlight) inset,0 7px 0 var(--button-rim),0 14px 17px #00000016,0 21px 32px #0000000b}
.spin:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--button-highlight) inset,0 1px 0 var(--button-rim),0 4px 6px #00000019}
.add-btn{background:linear-gradient(180deg,var(--button-face),var(--ink));border:1px solid var(--button-rim);border-radius:12px;box-shadow:inset 0 1px 0 var(--button-highlight),0 3px 0 var(--button-rim),0 5px 9px #00000012;transition:transform .15s,box-shadow .15s,filter .15s}
.add-btn:hover:not(:disabled){opacity:1;filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--button-highlight),0 4px 0 var(--button-rim),0 7px 10px #00000016}
.add-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--button-rim),0 2px 4px #00000015}
.theme{box-shadow:0 2px 3px #0000000a,inset 0 1px 2px #0000000a}
.theme button[aria-pressed="true"]{box-shadow:0 2px 5px #00000018,inset 0 1px 0 #ffffff44}
.addrow input{box-shadow:inset 0 2px 4px #00000009,0 1px 0 #ffffff59}
.tool{border-radius:8px;transition:color .15s,transform .15s}.tool:hover:not(:disabled){transform:translateY(-1px)}
/* Provide a consistent noscript message without unsafe inline styles. */
.noscript-note{padding:20px;font:16px system-ui;text-align:center}.fine-print-spaced{margin-top:15px}
@media(max-width:660px){.intro h1{line-height:1.12;letter-spacing:-.047em}.intro .accent{margin-top:.17em;font-size:.8em}.intro p{margin-top:20px}.wheel-shell{box-shadow:0 3px 0 #a4a9b0,0 7px 0 #676e7a,0 11px 0 #444b58,0 14px 21px rgba(28,34,42,.18)}}
@media(prefers-reduced-motion:reduce){.spin,.add-btn,.tool{transition:none!important}}