:root{--accent:#00a8ff;--accent-soft:#00a8ff59;--accent-glow:#00a8ff38;--accent-2:#0fc;--accent-3:#90f;--on-accent:#04070f;--bg:#04050c;--bg-deep:#02030a;--panel:#ffffff0b;--panel-strong:#ffffff13;--border:#ffffff1a;--border-strong:#fff3;--text:#f2f5ff;--text-2:#a7b1c9;--text-3:#6b7590;--r-lg:26px;--r-md:16px;--r-sm:10px;--shadow:0 24px 60px #0000008c;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.4, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:var(--text);-webkit-font-smoothing:antialiased;background:#04050c;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;position:relative;overflow-x:hidden}.aurora{z-index:-1;background:radial-gradient(120% 90% at 50% -20%,#171041 0%,#0000 55%),radial-gradient(90% 70% at 85% 15%,#0a1c3a 0%,#0000 60%),radial-gradient(100% 80% at 10% 90%,#0d1226 0%,#0000 65%),#04050c;position:fixed;inset:0;overflow:hidden}.aurora-blob{filter:blur(110px);opacity:.34;will-change:transform;border-radius:50%;width:58vw;min-width:460px;height:58vw;min-height:460px;position:absolute}.blob-1{background:radial-gradient(circle, var(--accent) 0%, transparent 68%);animation:drift-a 26s var(--ease-out) infinite alternate;top:-22%;left:8%}.blob-2{background:radial-gradient(circle, var(--accent-3) 0%, transparent 68%);opacity:.26;animation:drift-b 32s var(--ease-out) infinite alternate;bottom:-28%;right:2%}.blob-3{background:radial-gradient(circle, var(--accent-2) 0%, transparent 70%);opacity:.16;animation:drift-c 38s var(--ease-out) infinite alternate;top:42%;left:52%}.aurora-grain{opacity:.5;background-image:radial-gradient(1.2px 1.2px at 20% 30%,#ffffff80 50%,#0000 51%),radial-gradient(1px 1px at 68% 12%,#fff6 50%,#0000 51%),radial-gradient(1.4px 1.4px at 42% 78%,#ffffff73 50%,#0000 51%),radial-gradient(1px 1px at 88% 62%,#ffffff59 50%,#0000 51%),radial-gradient(1.1px 1.1px at 12% 84%,#fff6 50%,#0000 51%);background-size:340px 340px,270px 270px,400px 400px,310px 310px,360px 360px;animation:200s linear infinite grain-drift;position:absolute;inset:-50%}@keyframes drift-a{0%{transform:translate(0,0)scale(1)}to{transform:translate(9vw,7vh)scale(1.16)}}@keyframes drift-b{0%{transform:translate(0,0)scale(1.1)}to{transform:translate(-11vw,-6vh)scale(.94)}}@keyframes drift-c{0%{transform:translate(-6vw,4vh)scale(.9)}to{transform:translate(7vw,-8vh)scale(1.2)}}@keyframes grain-drift{0%{transform:translate(0,0)}to{transform:translate(-340px,-340px)}}#app{flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem);width:100%;max-width:1360px;margin:0 auto;padding:clamp(1.5rem,4vw,3.25rem) clamp(1rem,3vw,2.25rem) 3.5rem;display:flex}main{grid-template-columns:minmax(0,1fr) 372px;align-items:stretch;gap:1.6rem;display:grid}main>*{min-width:0}.site-header{text-align:center;animation:rise-in .9s var(--ease-out) both}.site-header h1{letter-spacing:-.045em;background:linear-gradient(100deg, #fff 0%, var(--accent) 38%, var(--accent-2) 62%, #fff 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 34px var(--accent-glow));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;margin-bottom:.75rem;font-family:Space Grotesk,Outfit,sans-serif;font-size:clamp(2.6rem,7vw,4.5rem);font-weight:700;line-height:1;animation:9s linear infinite sheen}.site-header p{color:var(--text-2);max-width:46ch;margin:0 auto;font-size:clamp(.95rem,1.6vw,1.1rem);font-weight:300}@keyframes sheen{0%{background-position:0%}to{background-position:220%}}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.glass-panel{background:var(--panel);-webkit-backdrop-filter:blur(26px)saturate(140%);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow), inset 0 1px 0 #ffffff17;transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);animation:rise-in .8s var(--ease-out) both;padding:1.5rem;position:relative}.glass-panel:before{content:"";border-radius:inherit;opacity:.6;pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff73,#0000);height:1px;position:absolute;inset:0 0 auto}.glass-panel:hover{border-color:var(--border-strong);box-shadow:var(--shadow), 0 0 44px -8px var(--accent-glow), inset 0 1px 0 #ffffff24}.sidebar>.glass-panel:first-child{animation-delay:80ms}.sidebar>.glass-panel:nth-child(2){animation-delay:.16s}.sidebar>.glass-panel:nth-child(3){animation-delay:.24s}.panel-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.15rem;display:flex}h2{letter-spacing:-.01em;color:#fff;font-family:Space Grotesk,sans-serif;font-size:1.02rem;font-weight:500}.badge{letter-spacing:.04em;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);border-radius:999px;padding:.24rem .62rem;font-size:.7rem;font-weight:500;transition:color .5s,background .5s,border-color .5s}.badge.subtle{color:var(--text-3);border-color:var(--border);text-align:center;background:#ffffff0d;min-width:1.6rem}.controls{flex-wrap:wrap;align-items:center;gap:.85rem 1.6rem;margin-bottom:1.35rem;display:flex}.control-group{align-items:center;gap:.7rem;min-width:0;display:flex}.speed-group{margin-left:auto}.control-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;font-size:.78rem;font-weight:500}.base-swatch{border:1px solid var(--border);cursor:pointer;color:var(--text);transition:all .3s var(--ease-out);background:#ffffff0f;border-radius:999px;align-items:center;gap:.55rem;padding:.4rem .85rem .4rem .45rem;font-family:JetBrains Mono,monospace;font-size:.8rem;display:inline-flex}.base-swatch:hover{border-color:color-mix(in srgb, var(--accent) 55%, transparent);box-shadow:0 0 20px -4px var(--accent-glow);transform:translateY(-1px)}.base-swatch-dot{background:var(--accent);width:22px;height:22px;box-shadow:0 0 14px var(--accent-soft), inset 0 0 0 1px #ffffff47;border-radius:50%;transition:background .5s,box-shadow .5s}select,.btn{color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all .28s var(--ease-out);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0f;outline:none;padding:.5rem 1rem;font-family:inherit;font-size:.88rem}select{appearance:none;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b1c9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right .85rem center;background-repeat:no-repeat;min-width:0;max-width:100%;padding-right:2.4rem}select:hover,.btn:hover{border-color:var(--border-strong);background:#ffffff1f;transform:translateY(-1px)}select:focus-visible,.btn:focus-visible,.base-swatch:focus-visible,.speed-slider:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}select option{color:#fff;background:#0a0d17}.btn{align-items:center;gap:.5rem;font-weight:500;display:inline-flex}.btn.primary{background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #7c3aed) 100%);color:var(--on-accent);box-shadow:0 8px 26px -8px var(--accent-soft);border-color:#0000;font-weight:600}.btn.primary:hover{filter:brightness(1.1);box-shadow:0 12px 32px -8px var(--accent-soft);transform:translateY(-2px)}.btn.primary:active{transform:translateY(0)}.btn.small{border-radius:8px;padding:.32rem .8rem;font-size:.78rem}.speed-slider{appearance:none;background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill,33%), #ffffff24 var(--fill,33%), #ffffff24 100%);cursor:pointer;border-radius:999px;outline:none;width:128px;height:5px}.speed-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px var(--accent-soft);cursor:pointer;transition:transform .2s var(--ease-spring);background:#fff;border-radius:50%}.speed-slider::-webkit-slider-thumb:hover{transform:scale(1.25)}.speed-slider::-moz-range-thumb{width:16px;height:16px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);cursor:pointer;background:#fff;border:none;border-radius:50%}.speed-value{color:var(--accent);min-width:3.1rem;font-family:JetBrains Mono,monospace;font-size:.82rem;transition:color .5s}.orbit-section{flex-direction:column;padding:1.35rem;display:flex}.orbit-container{background:radial-gradient(circle at 50% 45%,#080d1c 0%,#02030a 100%);border:1px solid #ffffff12;border-radius:20px;flex:1;width:100%;min-height:clamp(420px,54vh,620px);position:relative;overflow:hidden;box-shadow:inset 0 0 90px #000000e6}.orbit-container:after{content:"";pointer-events:none;border-radius:inherit;z-index:2;background:radial-gradient(circle,#0000 52%,#0000008c 100%);position:absolute;inset:0}.webgl-container{z-index:1;cursor:grab;position:absolute;inset:0}.webgl-container:active{cursor:grabbing}.webgl-container canvas{display:block}.hidden-picker{opacity:0;pointer-events:none;border:none;width:1px;height:1px;position:absolute;bottom:12px;left:12px}.orbit-hint{white-space:nowrap;color:var(--text-2);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none;z-index:3;background:#060912ad;border-radius:999px;align-items:center;gap:.7rem;max-width:calc(100% - 2rem);padding:.5rem 1.1rem;font-size:.76rem;display:flex;position:absolute;bottom:1rem;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 8px 26px #00000080}.orbit-hint b{color:#fff;font-weight:500}.orbit-hint i{background:var(--border-strong);flex-shrink:0;width:1px;height:11px}.orbit-tooltip{z-index:4;color:#fff;border:1px solid var(--tip-color,var(--border-strong));box-shadow:0 0 20px -4px var(--tip-color,transparent), 0 6px 18px #00000080;pointer-events:none;opacity:0;white-space:nowrap;background:#060912e6;border-radius:8px;padding:.3rem .7rem;font-family:JetBrains Mono,monospace;font-size:.76rem;font-weight:500;transition:opacity .18s;position:absolute;top:0;left:0}.orbit-tooltip.visible{opacity:1}.sidebar{flex-direction:column;gap:1.35rem;display:flex;position:sticky;top:1.5rem}.palette-cards{grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1.2rem;display:grid}.color-card{cursor:pointer;height:104px;transition:transform .32s var(--ease-spring), box-shadow .32s var(--ease-out);animation:card-in .5s var(--ease-spring) both;border:1px solid #ffffff29;border-radius:13px;justify-content:center;align-items:flex-end;padding-bottom:.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 6px 18px #00000059}@keyframes card-in{0%{opacity:0;transform:translateY(14px)scale(.9)}to{opacity:1;transform:none}}.color-card:after{content:"";pointer-events:none;background:linear-gradient(#ffffff29 0%,#0000 45%,#00000038 100%);position:absolute;inset:0}.color-card:hover{z-index:2;box-shadow:0 16px 34px #00000080, 0 0 26px -4px var(--card-color,transparent);transform:translateY(-8px)scale(1.05)}.color-card span{z-index:1;letter-spacing:.01em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff2e;border-radius:5px;padding:3px 6px;font-family:JetBrains Mono,monospace;font-size:.63rem;font-weight:500;transition:background .2s;position:relative}.color-card.on-light span{color:#0b0f19;background:#ffffff8c}.color-card.on-dark span{color:#fff;background:#00000061}.palette-actions{justify-content:flex-end;display:flex}pre{border-radius:var(--r-md);color:#b8c9ff;background:#0000006b;border:1px solid #ffffff12;padding:1rem 1.1rem;font-family:JetBrains Mono,Consolas,monospace;font-size:.78rem;line-height:1.75;overflow-x:auto}pre::-webkit-scrollbar{height:6px}.saved-list{flex-direction:column;gap:.55rem;max-height:236px;padding-right:4px;display:flex;overflow-y:auto}.saved-list::-webkit-scrollbar{width:6px}pre::-webkit-scrollbar{width:6px}.saved-list::-webkit-scrollbar-track{background:0 0}pre::-webkit-scrollbar-track{background:0 0}.saved-list::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:999px}pre::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:999px}.saved-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}pre::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.saved-item{border:1px solid var(--border);cursor:pointer;transition:all .28s var(--ease-out);animation:card-in .4s var(--ease-out) both;background:#ffffff0a;border-radius:12px;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem .7rem;display:flex}.saved-item:hover{border-color:var(--border-strong);background:#ffffff17;transform:translate(4px)}.saved-colors{gap:5px;display:flex}.saved-color-dot{width:19px;height:19px;transition:transform .28s var(--ease-spring);border-radius:50%;box-shadow:0 2px 8px #0006,inset 0 0 0 1px #fff3}.saved-item:hover .saved-color-dot{transform:scale(1.18)}.saved-item:hover .saved-color-dot:nth-child(2){transition-delay:30ms}.saved-item:hover .saved-color-dot:nth-child(3){transition-delay:60ms}.saved-item:hover .saved-color-dot:nth-child(4){transition-delay:90ms}.saved-item:hover .saved-color-dot:nth-child(5){transition-delay:.12s}.saved-meta{color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;margin-left:auto;font-size:.68rem}.delete-btn{width:24px;height:24px;color:var(--text-3);cursor:pointer;opacity:0;background:#ffffff0d;border:1px solid #0000;border-radius:7px;flex-shrink:0;place-items:center;font-size:1.05rem;line-height:1;transition:all .22s;display:grid}.saved-item:hover .delete-btn{opacity:1}.delete-btn:hover{color:#ff6b6b;background:#ff6b6b24;border-color:#ff6b6b59}.empty-state{text-align:center;color:var(--text-3);border:1px dashed var(--border);border-radius:var(--r-md);padding:1.6rem .5rem;font-size:.85rem}.toast-stack{z-index:999;pointer-events:none;flex-direction:column;align-items:flex-end;gap:.6rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.toast{color:var(--text);border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 14px 40px #0000008c, 0 0 30px -10px var(--accent-glow);animation:toast-in .4s var(--ease-spring) both;background:#0a0e1ae0;border-radius:14px;align-items:center;gap:.6rem;padding:.7rem 1.1rem;font-size:.87rem;font-weight:500;display:flex}.toast.leaving{animation:toast-out .3s var(--ease-out) forwards}.toast-dot{background:var(--toast-color,var(--accent));width:9px;height:9px;box-shadow:0 0 12px var(--toast-color,var(--accent));border-radius:50%;flex-shrink:0}@keyframes toast-in{0%{opacity:0;transform:translateY(18px)scale(.94)}to{opacity:1;transform:none}}@keyframes toast-out{to{opacity:0;transform:translate(24px)scale(.96)}}@media (width<=1080px){main{grid-template-columns:1fr}.sidebar{position:static}.palette-cards{grid-template-columns:repeat(5,1fr)}}@media (width<=720px){.controls{gap:.7rem 1rem}.control-group{width:100%}.speed-group{margin-left:0}select{flex:1}.speed-slider{flex:1;width:auto}.orbit-container{min-height:max(52vh,340px)}.orbit-hint{white-space:normal;border-radius:16px;flex-wrap:wrap;justify-content:center;gap:.45rem;padding:.45rem .85rem;font-size:.68rem}.orbit-hint i,.orbit-hint .hint-optional{display:none}.palette-cards{gap:.35rem}.color-card{border-radius:10px;height:78px}.color-card span{padding:2px 4px;font-size:.55rem}.toast-stack{align-items:stretch;left:1rem;right:1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}