@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg:#131419;--bg-2:#0f1014;--surface:#1b1d23;--surface-2:#22252d;--surface-3:#2a2e37;--border:#292c35;--border-strong:#383c47;--text:#ecedf1;--text-muted:#9ca0ad;--text-faint:#6b6f7b;--accent:#aeb6df;--accent-soft:#2b3042;--accent-line:#4a5170;--danger:#cf8686;--judging:#5b5d64;--radius:14px;--radius-sm:9px;--radius-xs:6px;--shadow-sm:0 1px 2px #00000059;--shadow:0 6px 24px -10px #0009;--maxw:1040px;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:"SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;font-family:var(--font);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:radial-gradient(1200px 600px at 50% -10%, #1b1d26 0%, transparent 60%), var(--bg);font-size:15px;line-height:1.55}h1,h2,h3{letter-spacing:-.012em;margin:0;font-weight:600}h1{font-size:1.45rem}h2{font-size:1.06rem}h3{font-size:.92rem}p{margin:0}a{color:var(--accent)}button{font-family:inherit;font-size:inherit}label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);margin-bottom:7px;font-size:.7rem;font-weight:500;display:block}.muted{color:var(--text-muted)}.faint{color:var(--text-faint)}.small{font-size:.84rem}.mono{font-family:var(--mono);font-size:.86em}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#111217d1;align-items:center;gap:22px;padding:13px 24px;display:flex;position:sticky;top:0}.brand{letter-spacing:.01em;align-items:center;gap:11px;font-size:1.02rem;font-weight:600;display:flex}.brand-dot{filter:saturate(.78);background:conic-gradient(from 210deg,#d08a8a,#d3b483,#9fc69a,#8fb6e0,#b59fd6,#d08a8a);border-radius:50%;width:20px;height:20px;box-shadow:0 0 0 1px #ffffff14}.nav{flex-wrap:wrap;gap:2px;display:flex}.nav button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:7px 13px;transition:background .16s,color .16s}.nav button:hover{color:var(--text);background:var(--surface-2)}.nav button[aria-current=true]{color:var(--text);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}.main{width:100%;max-width:var(--maxw);flex:1;margin:0 auto;padding:30px 24px 96px}.spacer{flex:1}.card{background:linear-gradient(180deg, var(--surface) 0%, #191b21 100%);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px}.card+.card{margin-top:16px}.card-title{justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:18px;display:flex}.stack{flex-direction:column;gap:16px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.between{justify-content:space-between}.divider{background:var(--border);border:none;height:1px;margin:2px 0}.btn{background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:8px;padding:9px 15px;transition:background .15s,border-color .15s,transform 60ms;display:inline-flex}.btn:hover{background:var(--surface-3)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent-soft);border-color:var(--accent-line);color:#eef0fb}.btn-primary:hover{background:#333a52}.btn-ghost{color:var(--text-muted);background:0 0;border-color:#0000;padding:7px 11px}.btn-ghost:hover{color:var(--text);background:var(--surface-2)}.btn-danger{color:var(--danger);background:0 0;border-color:#0000}.btn-danger:hover{background:#cf86861f}input[type=text],input[type=number],textarea,select{background:var(--bg-2);border:1px solid var(--border-strong);width:100%;color:var(--text);border-radius:var(--radius-sm);font-family:inherit;font-size:inherit;padding:10px 12px;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;min-height:58px;line-height:1.5}select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca0ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-position:right 11px center;background-repeat:no-repeat;padding-right:30px}input:focus,textarea:focus,select:focus{border-color:var(--accent-line);outline:none;box-shadow:0 0 0 3px #7884b42e}.field-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;display:grid}.segmented{background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.segmented button{color:var(--text-muted);border-radius:var(--radius-xs);cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:7px;padding:6px 13px;transition:background .13s,color .13s;display:inline-flex}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:var(--accent-soft);color:#eef0fb;box-shadow:inset 0 0 0 1px var(--accent-line)}.dot{border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 1px #ffffff40}.chip{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.78rem;display:inline-flex}.chip-fn{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}.banner{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);color:var(--text-muted);padding:13px 15px;font-size:.88rem}.toast{background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);z-index:60;border-radius:999px;padding:11px 19px;animation:.18s toast-in;position:fixed;bottom:26px;left:50%;transform:translate(-50%);box-shadow:0 10px 36px #0000008c}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.swatch{border-radius:var(--radius);align-items:flex-end;padding:10px;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff24}.judging{background:var(--judging);border-radius:var(--radius);background-image:linear-gradient(135deg,#ffffff0a,#0000000f);flex-wrap:wrap;align-items:center;gap:20px;padding:22px;display:flex}.colorfield{flex-direction:column;gap:18px;display:flex}.picker{flex-direction:column;gap:12px;max-width:420px;display:flex}.picker-sv{border-radius:var(--radius-sm);cursor:crosshair;touch-action:none;width:100%;height:156px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.picker-sv-white{border-radius:inherit;background:linear-gradient(90deg,#fff,#fff0);position:absolute;inset:0}.picker-sv-black{border-radius:inherit;background:linear-gradient(#0000,#000);position:absolute;inset:0}.picker-thumb{pointer-events:none;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #0006}.picker-hue{cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:999px;height:16px;position:relative;box-shadow:inset 0 0 0 1px #ffffff1a}.picker-hue-thumb{pointer-events:none;background:#fff;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #00000073}.picker-foot{align-items:center;gap:10px;display:flex}.picker-swatch{border-radius:var(--radius-xs);flex-shrink:0;width:36px;height:36px;box-shadow:inset 0 0 0 1px #ffffff2e}.picker-hex{font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em;flex:1}.picker-eye{border-radius:var(--radius-xs);background:var(--surface-2);border:1px solid var(--border-strong);width:38px;height:38px;color:var(--text-muted);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:inline-flex}.picker-eye:hover{color:var(--text);background:var(--surface-3)}.slider{cursor:pointer;touch-action:none;align-items:center;height:22px;display:flex;position:relative}.slider:focus-visible{outline:none}.slider:focus-visible .slider-thumb{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-line)}.slider-track{background:var(--surface-3);border-radius:999px;width:100%;height:8px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f}.slider-fill{background:var(--accent);border-radius:999px;position:absolute;inset:0}.slider-thumb{pointer-events:none;background:#fff;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%);box-shadow:0 1px 3px #00000080,inset 0 0 0 1px #0000001a}.piano{-webkit-user-select:none;user-select:none;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);height:158px;padding:9px;display:flex;overflow-x:auto}.piano-keys{height:100%;display:flex;position:relative}.key-white{cursor:pointer;color:#8b8f99;background:linear-gradient(#f4f5f7 0%,#e3e5ea 100%);border:1px solid #b7bbc4;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;width:38px;height:100%;margin-right:-1px;padding-bottom:7px;font-size:.6rem;transition:background .1s;display:flex}.key-white:hover{background:linear-gradient(#fff 0%,#dfe2e8 100%)}.key-white.selected{color:#2a2e44;background:linear-gradient(#c4cbf0 0%,#aeb6df 100%)}.key-black{cursor:pointer;z-index:2;background:linear-gradient(#34373f 0%,#1c1e23 100%);border:1px solid #0a0b0e;border-radius:0 0 5px 5px;width:25px;height:62%;transition:background .1s;position:absolute;box-shadow:0 3px 5px #0006}.key-black:hover{background:linear-gradient(#43464f 0%,#25282e 100%)}.key-black.selected{background:linear-gradient(#8b93c0 0%,#6a72a0 100%)}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}