:root{color-scheme:light;--bg:#fafaf9;--card:#fff;--fg:#202124;--muted:#7c7f85;--line:#e2e3e5;--accent:#0879ed;--row-a:#f3f3f2;--row-b:#eaeaea;--hover:#f0f1f2;--button:#24262a;--button-text:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#17191c;--card:#202225;--fg:#f2f2f3;--muted:#9b9fa6;--line:#393c41;--accent:#6aaeff;--row-a:#202225;--row-b:#27292d;--hover:#282b30;--button:#ededee;--button-text:#202124}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#17191c;--card:#202225;--fg:#f2f2f3;--muted:#9b9fa6;--line:#393c41;--accent:#6aaeff;--row-a:#202225;--row-b:#27292d;--hover:#282b30;--button:#ededee;--button-text:#202124}
*{box-sizing:border-box}html{background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-synthesis:none}body{margin:0;min-height:100svh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}.header{height:104px;position:relative;display:flex;align-items:center;justify-content:center;padding:25px 32px}.wordmark{font-size:26px;font-weight:700;letter-spacing:-1.1px;line-height:1}.theme-toggle{position:absolute;right:31px;top:30px;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.theme-toggle:hover{background:var(--hover);color:var(--fg)}.theme-toggle svg{width:21px;height:21px}.sun{display:none}:root[data-theme="dark"] .moon{display:none}:root[data-theme="dark"] .sun{display:block}main{padding:42px 28px 65px}.app{max-width:628px;margin:auto}.intro{text-align:center;margin-bottom:56px}h1{font-size:35px;line-height:1.2;letter-spacing:-1.25px;font-weight:650;margin:0 0 12px}.intro p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px}.picker{min-width:0}.reel{height:260px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;isolation:isolate;background:var(--card)}.reel:after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg),transparent 38%,transparent 62%,var(--bg));opacity:.65;pointer-events:none;z-index:1}.track{will-change:transform}.reel-row{height:52px;display:flex;align-items:center;justify-content:center;padding:0 24px;background:var(--row-a);font-size:21px;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reel-row:nth-child(even){background:var(--row-b)}.reel-row.selected{font-weight:650}.selection{position:absolute;z-index:2;top:104px;left:0;right:0;height:52px;border:1px solid var(--muted);border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:var(--muted);pointer-events:none}.selection span{font-size:15px}.spin-button{margin-top:17px;width:100%;min-height:46px;border:0;border-radius:12px;background:var(--button);color:var(--button-text);font-size:17px;font-weight:600;transition:opacity .15s,transform .15s}.spin-button:hover{opacity:.87}.spin-button:active{transform:scale(.985)}.spin-button:disabled{opacity:.5}.result{min-height:20px;margin:10px 0 0;text-align:center;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.editor{min-width:0}.editor-heading{display:flex;align-items:center;gap:10px;height:31px;margin-bottom:8px}h2{font-size:16px;font-weight:600;letter-spacing:-.3px;margin:0}.count{background:var(--hover);color:var(--muted);border-radius:6px;min-width:23px;padding:3px 6px;text-align:center;font-size:12px}.options{margin:0;padding:0;list-style:none;max-height:260px;overflow:auto;scrollbar-width:thin}.option{display:flex;align-items:center;border-bottom:1px solid var(--line);min-height:38px;gap:4px}.option:first-child{border-top:1px solid var(--line)}.option input{min-width:0;flex:1;color:var(--fg);background:none;border:0;padding:9px 7px;font-size:14px;border-radius:5px}.option input:focus{background:var(--hover);outline:none}.delete{flex:none;border:0;background:none;color:var(--muted);font-size:21px;font-weight:300;width:30px;height:33px;border-radius:6px}.delete:hover{background:var(--hover);color:var(--fg)}.add-form{display:flex;align-items:center;margin-top:10px}.add-form input{width:100%;min-width:0;background:none;border:0;color:var(--fg);padding:10px 7px;font-size:14px;border-radius:6px}.add-form input::placeholder{color:var(--muted);opacity:1}.add-button{color:var(--muted);border:0;background:none;border-radius:6px;width:30px;height:34px}.add-button:hover{background:var(--hover)}.editor-hint{font-size:10px;color:var(--muted);line-height:1.5;margin:2px 7px}.error{font-size:12px;color:var(--muted);margin:7px;min-height:16px}.remove-setting{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;color:var(--muted);font-size:13px;cursor:pointer}.remove-setting input{appearance:none;width:17px;height:17px;border:1.5px solid var(--muted);border-radius:4px;background:none;margin:0;display:grid;place-items:center;cursor:pointer}.remove-setting input:checked{background:var(--fg);border-color:var(--fg)}.remove-setting input:checked:after{content:"✓";color:var(--bg);font-size:13px}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.empty-options{color:var(--muted);font-size:14px;padding:17px 7px;line-height:1.6}
@media(max-width:560px){.header{height:86px;padding:22px}.wordmark{font-size:24px}.theme-toggle{right:17px;top:21px}main{padding:27px 24px 45px}.app{max-width:350px}h1{font-size:29px;letter-spacing:-1px}.intro p{font-size:14px}.intro{margin-bottom:32px}.workspace{grid-template-columns:1fr;gap:22px}.reel{height:220px}.reel-row{height:44px;font-size:20px}.selection{top:88px;height:44px}.options{max-height:230px}.remove-setting{margin-top:19px}.result{margin-bottom:0}.editor-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
