:root{color-scheme:dark;--glass: rgba(14, 12, 24, .62);--line: rgba(255, 255, 255, .09);--text: #f3f1fa;--dim: #a7a2bd;--accent: #ffffff;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#07060d;color:var(--text)}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;opacity:0;transition:opacity .8s ease}.ready #stage{opacity:1}.loading{position:fixed;inset:0;background:radial-gradient(60% 50% at 40% 45%,#2a1446,#07060d 70%);transition:opacity .8s ease;pointer-events:none}.ready .loading{opacity:0}.no-webgl #stage{display:none}#panel{position:fixed;top:16px;right:16px;bottom:16px;width:372px;display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--glass);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 20px 60px #00000073;overflow:hidden}.head h1{margin:0;font-size:26px;letter-spacing:-.02em;font-weight:800}.head h1 span{margin-left:6px;font-weight:300;color:var(--dim)}.head p{margin:4px 0 0;font-size:13px;color:var(--dim)}.result{display:flex;gap:14px;align-items:center}.swatch{--c: transparent;position:relative;flex:none;width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:var(--c);box-shadow:0 0 36px var(--c),inset 0 -10px 20px #00000040,inset 0 8px 14px #ffffff40;cursor:copy;transition:background .6s ease,box-shadow .6s ease,transform .15s ease;display:grid;place-items:center}.swatch:active{transform:scale(.96)}.swatch .hex{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 6px;border-radius:6px;background:#00000073}.swatch.is-empty{background:repeating-conic-gradient(rgba(255,255,255,.06) 0 25%,transparent 0 50%) 0 0 / 14px 14px;box-shadow:none}.swatch.copied .hex:after{content:" ✓"}.result-meta{flex:1;min-width:0}.result-name{font-size:18px;font-weight:700}.result-rgb{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim);margin:2px 0 10px}.fill,.bar{height:6px;border-radius:6px;background:#ffffff14;overflow:hidden}.fill i,.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8a7dff,#ff6fae);transition:width .35s ease}.fill-label{font-size:12px;color:var(--dim);margin-top:6px}.paints{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:0 -6px;padding:0 6px;scrollbar-width:thin}.row{--c: #fff;display:grid;grid-template-columns:28px 1fr auto 22px;grid-template-areas:"dot meta amt x" "steps steps steps steps";align-items:center;gap:8px 10px;padding:10px 12px;border-radius:14px;background:#ffffff0a;border:1px solid var(--line)}.row.flash{animation:flash .9s ease}@keyframes flash{0%{background:color-mix(in srgb,var(--c) 35%,transparent)}}.dot{grid-area:dot;width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 -4px 8px #0000004d,inset 0 3px 6px #ffffff4d,0 0 14px color-mix(in srgb,var(--c) 50%,transparent)}.meta{grid-area:meta;min-width:0}.name{font-weight:650;font-size:14px}.sub{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim);margin:2px 0 6px}.bar{height:4px}.bar i{background:var(--c)}.amt{grid-area:amt;font:700 18px ui-monospace,SFMono-Regular,Menlo,monospace;min-width:52px;text-align:right}.steps{grid-area:steps;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}button{font:inherit;color:inherit;border:0;cursor:pointer}.steps button{padding:7px 0;border-radius:10px;background:#ffffff12;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;transition:background .15s ease,transform .08s ease}.steps button:hover:not(:disabled){background:#ffffff24}.steps button:active:not(:disabled){transform:scale(.95)}.steps button:disabled{opacity:.3;cursor:default}.x{grid-area:x;background:none;color:var(--dim);font-size:20px;line-height:1}.x:hover{color:var(--text)}.add{display:flex;flex-direction:column;gap:10px}.add-row{display:flex;gap:10px}.picker{position:relative;width:44px;height:44px;flex:none;cursor:pointer}.picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.picker span{--c: #fff;display:block;width:100%;height:100%;border-radius:12px;background:var(--c);border:2px solid rgba(255,255,255,.25);pointer-events:none}.add-btn{flex:1;border-radius:12px;background:linear-gradient(135deg,#7b6cff,#ff5fa2);font-weight:700;font-size:14px;box-shadow:0 6px 20px #ff5fa240}.add-btn:active{transform:scale(.98)}.quick{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.chip{--c: #fff;aspect-ratio:1;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.18);transition:transform .12s ease}.chip:hover{transform:scale(1.12)}.foot{display:flex;gap:10px}.foot button{flex:1;padding:9px;border-radius:12px;background:#ffffff0f;color:var(--dim);font-size:13px}.foot button:hover{color:var(--text);background:#ffffff1a}button:focus-visible,.picker:focus-within span{outline:2px solid #fff;outline-offset:2px}@media(max-width:820px){#panel{inset:auto 0 0;width:auto;height:52vh;height:52dvh;border-radius:22px 22px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));gap:10px}.head p{display:none}.head h1{font-size:20px}.swatch{width:60px;height:60px}.result-name{font-size:16px}.result-rgb{margin-bottom:6px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}