:root{--speed: 3s;--play: running;--step: 30deg;--count: 4;--radius: 4.4em;--c1: #7c3aed;--c2: #06b6d4;--c3: #f43f5e;--c4: #facc15;--c5: #34d399;--c6: #f97316;--bg: #05050f;--text: #ffffff;--text-dim: rgba(255, 255, 255, 0.45);--ctrl-bg: rgba(255, 255, 255, 0.05);--ctrl-bdr: rgba(255, 255, 255, 0.08);--ctrl-hover: rgba(255, 255, 255, 0.1);--active-bg: rgba(255, 255, 255, 0.14);--tag-bg: rgba(255, 255, 255, 0.06);--tag-bdr: rgba(255, 255, 255, 0.1);--top-bg: rgba(5, 5, 15, 0.8);--kbd-bg: rgba(255, 255, 255, 0.07)}body.light{--bg: #f0f0f5;--text: #0a0a10;--text-dim: rgba(0, 0, 0, 0.42);--ctrl-bg: rgba(0, 0, 0, 0.04);--ctrl-bdr: rgba(0, 0, 0, 0.1);--ctrl-hover: rgba(0, 0, 0, 0.08);--active-bg: rgba(0, 0, 0, 0.12);--tag-bg: rgba(0, 0, 0, 0.05);--tag-bdr: rgba(0, 0, 0, 0.1);--top-bg: rgba(240, 240, 245, 0.85);--kbd-bg: rgba(0, 0, 0, 0.07)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;transition:background .4s,color .4s;overflow:hidden}.topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:3rem;display:flex;align-items:center;gap:1rem;padding:0 1.4rem;background:var(--top-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--ctrl-bdr);transition:background .4s,border-color .4s}.tb__brand{display:flex;align-items:baseline;gap:.4rem}.tb__name{font-size:.7rem;color:var(--text-dim)}.tb__sep{font-size:.7rem;color:var(--text-dim);opacity:.5}.tb__title{font-size:.82rem;font-weight:600}.tb__right{display:flex;align-items:center;gap:.5rem;margin-left:auto}.tb__tag{padding:.18rem .5rem;border-radius:99px;border:1px solid var(--tag-bdr);background:var(--tag-bg);font-size:.68rem;color:var(--text-dim);transition:all .3s}.tb__toggle{width:2rem;height:2rem;border:1px solid var(--tag-bdr);border-radius:7px;background:var(--tag-bg);color:var(--text-dim);cursor:pointer;display:grid;place-items:center;transition:all .2s}.tb__toggle:hover{color:var(--text);border-color:var(--c1)}body.dark .icon-sun{display:none}body.dark .icon-moon{display:block}body.light .icon-moon{display:none}body.light .icon-sun{display:block}.main{height:100vh;display:flex;align-items:center;justify-content:center}.scene{display:flex;flex-direction:column;align-items:center;gap:2.5rem}.scene__label{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);transition:color .4s;user-select:none}.ring-wrap{font-size:clamp(2rem,5vw,3rem);position:relative;width:10em;height:10em;display:flex;align-items:center;justify-content:center}.ring{position:absolute;inset:0;animation:spin var(--speed) linear infinite;animation-play-state:var(--play)}@keyframes spin{to{transform:rotate(360deg)}}.ring__arm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:rotate(calc(var(--i, 0) * var(--step)))}.ring__circle{position:absolute;top:.5em;width:1em;height:1em;border-radius:50%;animation:pulse calc(var(--speed)*1.6) ease-in-out infinite;animation-play-state:var(--play);animation-delay:calc(var(--i, 0)*var(--speed)/var(--count)*-1);will-change:transform,opacity}.ring__arm:nth-child(1) .ring__circle{background:var(--c1);box-shadow:0 0 .6em .15em var(--c1),0 0 1.8em .4em rgba(0,0,0,.2)}.ring__arm:nth-child(2) .ring__circle{background:var(--c2);box-shadow:0 0 .6em .15em var(--c2),0 0 1.8em .4em rgba(0,0,0,.2)}.ring__arm:nth-child(3) .ring__circle{background:var(--c3);box-shadow:0 0 .6em .15em var(--c3),0 0 1.8em .4em rgba(0,0,0,.2)}.ring__arm:nth-child(4) .ring__circle{background:var(--c4);box-shadow:0 0 .6em .15em var(--c4),0 0 1.8em .4em rgba(0,0,0,.2)}.ring__arm:nth-child(5) .ring__circle{background:var(--c5);box-shadow:0 0 .6em .15em var(--c5),0 0 1.8em .4em rgba(0,0,0,.2)}.ring__arm:nth-child(6) .ring__circle{background:var(--c6);box-shadow:0 0 .6em .15em var(--c6),0 0 1.8em .4em rgba(0,0,0,.2)}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(0.35);opacity:.45}}.ring-wrap::after{content:"";position:absolute;inset:15%;border-radius:50%;background:radial-gradient(ellipse at 30% 30%, var(--c1), transparent 60%),radial-gradient(ellipse at 70% 70%, var(--c3), transparent 60%);opacity:.09;filter:blur(12px);animation:glow-rot calc(var(--speed)*4) linear infinite;animation-play-state:var(--play);pointer-events:none;transition:opacity .4s}body.light .ring-wrap::after{opacity:.12}@keyframes glow-rot{to{transform:rotate(-360deg)}}.controls{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem 1.6rem;padding:.75rem 1.4rem;background:var(--top-bg);backdrop-filter:blur(12px);border-top:1px solid var(--ctrl-bdr);transition:background .4s,border-color .4s}.ctrl-group{display:flex;align-items:center;gap:.5rem}.ctrl-label{font-size:.68rem;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;white-space:nowrap}.ctrl-row{display:flex;gap:.3rem}.ctrl-btn{padding:.3rem .7rem;border:1px solid var(--ctrl-bdr);border-radius:6px;background:var(--ctrl-bg);color:var(--text-dim);font-size:.75rem;cursor:pointer;transition:all .18s}.ctrl-btn:hover{background:var(--ctrl-hover);color:var(--text)}.ctrl-btn.active{background:var(--active-bg);color:var(--text);border-color:var(--c1)}.ctrl-swatch{width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid rgba(0,0,0,0);cursor:pointer;transition:all .18s;outline:none}.ctrl-swatch:hover{transform:scale(1.15)}.ctrl-swatch.active{border-color:var(--text);transform:scale(1.1)}.ctrl-play{display:flex;align-items:center;gap:.4rem;padding:.3rem .85rem;border:1px solid var(--ctrl-bdr);border-radius:6px;background:var(--ctrl-bg);color:var(--text-dim);font-size:.75rem;cursor:pointer;transition:all .18s}.ctrl-play:hover{background:var(--ctrl-hover);color:var(--text)}body:not(.paused) .icon-pause{display:block}body:not(.paused) .icon-play{display:none}body.paused .icon-pause{display:none}body.paused .icon-play{display:block}.kbd-hint{position:fixed;bottom:4.2rem;left:50%;transform:translateX(-50%);font-size:.64rem;color:var(--text-dim);white-space:nowrap;pointer-events:none;opacity:.7;transition:color .4s}.kbd-hint kbd{display:inline-block;padding:.1rem .35rem;border:1px solid var(--ctrl-bdr);border-radius:3px;background:var(--kbd-bg);font-family:inherit;font-size:inherit;transition:all .4s}@media(max-width: 600px){.kbd-hint{display:none}.tb__right .tb__tag{display:none}}