:root{--purple-50:#f6f3ff;--purple-100:#ede7ff;--purple-200:#dacfff;--purple-300:#bfa9fb;--purple-400:#9c7cf6;--purple-500:#7f5af0;--purple-600:#6a45e0;--purple-700:#5733c9;--purple-800:#43269e;--purple-900:#2c1968;--brand:var(--purple-500);--brand-hover:var(--purple-600);--brand-press:var(--purple-700);--sun-400:#ffc56b;--sun-500:#f4a259;--moss-400:#5fb389;--moss-500:#3f9a6e;--night-900:#15121f;--night-800:#1e1a2b;--night-700:#2a2540;--on-night:#efeafb;--muted:#8b8499;--faint:#b6afc4;--success:#3f9a6e;--warning:#e0863a;--danger:#d9485b;--fg-on-brand:#fff;--font-display:"Caesar Dressing", "Trebuchet MS", system-ui, sans-serif;--font-sans:"Outfit Variable", "Outfit", system-ui, -apple-system, sans-serif;--font-mono:"Space Mono", ui-monospace, "SFMono-Regular", monospace;--tracking-tight:-.02em;--tracking-caps:.12em;--r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--shell:var(--night-900);--panel:#1a1626;--sunken:var(--night-800);--raised:var(--night-700);--line:#282238;--line-soft:#1f1b2d;--line-2:#3b3457;--fg1:var(--on-night);--fg2:var(--faint);--fg3:var(--muted);--accent:var(--purple-400);--accent-fill:var(--brand);--accent-fill-hover:var(--brand-hover);--on-accent:var(--fg-on-brand);--accent-wash:#7f5af029;--danger-fg:#f0798a;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{background:var(--shell);color:var(--fg1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:14px;line-height:1.45}h1,h2,h3,p,figure{margin:0}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}::selection{background:var(--brand);color:var(--on-accent)}.eyebrow{font-family:var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);font-size:10.5px;font-weight:700}.field-label{font-family:var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg3);margin-bottom:7px;font-size:10px;font-weight:400;display:block}.field{margin-bottom:var(--sp-4)}.field:last-child{margin-bottom:0}.row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.hint{color:var(--fg3);font-size:11.5px;line-height:1.5}.perf{background:repeating-linear-gradient(to right, var(--line) 0 5px, transparent 5px 11px);height:1px;margin:20px -18px;position:relative}.perf:before,.perf:after{content:"";border-radius:var(--r-pill);background:var(--shell);width:13px;height:13px;position:absolute;top:50%;transform:translate(-50%,-50%)}.perf:before{left:0}.perf:after{left:100%}input[type=text],input[type=number],input[type=date],select{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);width:100%;color:var(--fg1);font-family:var(--font-sans);padding:8px 11px;font-size:13px;transition:border-color .12s,background .12s}input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,select:hover{border-color:var(--line-2)}input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,select:focus{border-color:var(--accent);background:var(--raised);outline:none}input.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);background-position:calc(100% - 15px),calc(100% - 10px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:28px}input[type=range]{appearance:none;cursor:ew-resize;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--line-2);border-radius:2px;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--r-pill);background:var(--fg1);border:none;width:13px;height:13px;margin-top:-5.5px;transition:background .12s}input[type=range]:hover::-webkit-slider-thumb{background:var(--accent)}input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--accent)}input[type=range]::-moz-range-track{background:var(--line-2);border-radius:2px;height:2px}input[type=range]::-moz-range-thumb{border-radius:var(--r-pill);background:var(--fg1);border:none;width:13px;height:13px}input[type=range]:hover::-moz-range-thumb{background:var(--accent)}.btn{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;justify-content:center;align-items:center;gap:7px;padding:9px 15px;font-size:13px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.btn:hover{background:var(--raised);border-color:var(--line-2)}.btn:active{transform:translateY(.5px)}.btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);font-weight:600;box-shadow:0 8px 22px #7f5af042}.btn-primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}.btn-primary:active{background:var(--brand-press);border-color:var(--brand-press)}.btn-primary:disabled{opacity:.5;cursor:progress;box-shadow:none}.btn-block{width:100%}.btn-quiet{color:var(--fg2);box-shadow:none;background:0 0;border-color:#0000;padding:5px 9px;font-size:12px}.btn-quiet:hover{background:var(--sunken);color:var(--fg1);border-color:#0000}.check{cursor:pointer;color:var(--fg2);-webkit-user-select:none;user-select:none;align-items:center;gap:9px;padding:6px 0;font-size:13px;transition:color .12s;display:flex}.check:hover{color:var(--fg1)}.check input{opacity:0;width:0;height:0;position:absolute}.check .box{border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--sunken);flex:none;place-items:center;width:16px;height:16px;transition:background .12s,border-color .12s;display:grid}.check .box:after{content:"";background:var(--on-accent);border-radius:2px;width:7px;height:7px;transition:transform .12s;transform:scale(0)}.check input:checked+.box{background:var(--accent-fill);border-color:var(--accent-fill)}.check input:checked+.box:after{transform:scale(1)}.check input:checked~.check-text{color:var(--fg1)}.check input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
