.bg-grid{position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,var(--grid-dot) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 32%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 70% 55% at 50% 32%,#000 25%,transparent 78%);pointer-events:none;z-index:0}.glow{position:fixed;z-index:0;pointer-events:none;width:560px;height:560px;left:50%;top:36%;transform:translate(-50%,-50%);background:var(--accent);filter:blur(130px);opacity:var(--glow-opacity);border-radius:50%;transition:background .4s ease}.glow.is-running{animation:pulse 6s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.glow{animation:none}}.page{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}.window{width:100%;max-width:520px;background:var(--window-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--window-shadow);overflow:hidden}.window-bar{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line-2)}.traffic-lights{display:flex;gap:6px;padding-left:2px}.traffic-lights span{width:8px;height:8px;border-radius:50%;display:block}.traffic-lights span:nth-child(1){background:var(--traffic-1)}.traffic-lights span:nth-child(2){background:var(--traffic-2)}.traffic-lights span:nth-child(3){background:var(--traffic-3)}.tabs{display:flex;gap:2px;flex:1;font-family:Space Mono,monospace;font-size:12px}.tab{background:transparent;border:none;color:var(--fg-3);padding:5px 8px;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap}.tab:hover{color:var(--fg-2);background:var(--surface)}.tab.active{color:var(--accent-text);background:var(--surface-hover)}.badge{font-family:Space Mono,monospace;font-size:11px;color:var(--fg-4);border:1px solid var(--line);padding:2px 6px;border-radius:4px;flex-shrink:0}.window-body{padding:30px 24px 26px}.panel{display:flex;flex-direction:column;align-items:center;gap:22px}.panel-title{align-self:flex-start;font-family:Space Mono,monospace;font-size:12px;color:var(--fg-3)}.panel-title b{color:var(--accent-text);font-weight:400}.mode-switch{display:flex;gap:4px;background:var(--surface);border-radius:8px;padding:4px;width:100%}.mode-btn{flex:1;padding:9px 0;border-radius:6px;border:none;cursor:pointer;font-family:IBM Plex Sans,sans-serif;font-size:14px;font-weight:600;background:transparent;color:var(--fg-2);transition:background .15s ease,color .15s ease}.mode-btn.active{background:var(--accent);color:var(--on-accent)}.ring-wrap{position:relative;width:208px;height:208px}.ring-wrap svg{transform:rotate(-90deg)}.ring-track{fill:none;stroke:var(--ring-track);stroke-width:4}.ring-progress{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;transition:stroke-dasharray 1s linear,stroke .3s ease}.time-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Space Mono,monospace;font-weight:700;font-size:42px;letter-spacing:-.02em}.brace{font-size:22px;font-weight:400;opacity:.32;margin:0 1px;vertical-align:2px}.controls{display:flex;align-items:center;justify-content:center;gap:18px}.icon-btn{width:38px;height:38px;border-radius:8px;border:1px solid var(--line-3);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}.icon-btn:hover{background:var(--surface-hover)}.play-btn{width:128px;height:46px;border-radius:8px;border:none;cursor:pointer;background:var(--accent);color:var(--on-accent);font-family:IBM Plex Sans,sans-serif;font-size:15px;font-weight:700;letter-spacing:.02em;transition:background .15s ease}.play-btn:hover{background:var(--accent-hover)}.swatch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.swatch-item{display:flex;flex-direction:column;align-items:center;gap:7px}.swatch{width:44px;height:44px;border-radius:10px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center;transition:transform .12s ease}.swatch:hover{transform:translateY(-1px)}.swatch.selected{border-color:var(--swatch-selected)}.hue-label{font-family:Space Mono,monospace;font-size:11px;color:var(--fg-5)}.mode-row{display:flex;align-items:center;gap:6px;width:100%}.yaml-form{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}.yaml{width:100%;display:flex;flex-direction:column;gap:12px}.yaml-row{display:flex;align-items:center;justify-content:space-between;font-family:Space Mono,monospace;font-size:14px}.yaml-key{color:var(--fg-2)}.yaml-key:after{content:":"}.yaml-input{width:64px;text-align:right;background:var(--surface-2);border:1px solid var(--line-3);border-radius:6px;color:var(--accent-text);font-family:Space Mono,monospace;font-size:15px;font-weight:700;padding:7px 9px}.yaml-input:focus{outline:1px solid var(--accent);outline-offset:1px}.yaml-input.is-invalid{border-color:var(--danger);color:var(--danger)}.yaml-error{font-family:Space Mono,monospace;font-size:12px;color:var(--danger);margin:0;align-self:flex-start}.save-btn{width:100%;height:42px;border-radius:8px;border:none;cursor:pointer;background:var(--accent);color:var(--on-accent);font-family:IBM Plex Sans,sans-serif;font-size:15px;font-weight:700;transition:background .15s ease}.save-btn:hover{background:var(--accent-hover)}.caption{font-family:Space Mono,monospace;font-size:13px;color:var(--fg-4);text-align:center}.caption .cmt{color:var(--accent-text);opacity:.75}.credit{font-size:13px;color:var(--fg-6)}.credit a{color:var(--link);text-decoration:underline;text-underline-offset:2px}.credit a:hover{color:var(--fg)}@media (max-width: 440px){.page{padding:16px}.window-body{padding:24px 16px 22px}.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.mode-btn{font-size:13px}.controls{gap:12px}.badge{display:none}.tab{padding:5px 6px;font-size:12px}}:root,:root[data-theme=dark]{--bg: #08080a;--fg: #f2f2f3;--fg-2: #9a9a9e;--fg-3: #68686d;--fg-4: #57575c;--fg-5: #5c5c60;--fg-6: #48484c;--link: #6b6b70;--on-accent: #0a0a0b;--window-bg: rgba(15, 15, 17, .92);--window-shadow: 0 30px 60px -25px rgba(0, 0, 0, .65);--line: rgba(255, 255, 255, .08);--line-2: rgba(255, 255, 255, .06);--line-3: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .04);--surface-2: rgba(255, 255, 255, .045);--surface-hover: rgba(255, 255, 255, .06);--grid-dot: rgba(255, 255, 255, .055);--ring-track: rgba(255, 255, 255, .07);--glow-opacity: .22;--glow-pulse-lo: .16;--glow-pulse-hi: .26;--traffic-1: #635a54;--traffic-2: #67624c;--traffic-3: #4d5c50;--swatch-selected: #f2f2f3;--selection: rgba(255, 255, 255, .2);--danger: oklch(.65 .2 25);--accent-l: .68;--accent-hover-l: .6;--accent-text-l: .68;--accent-h: 20;--accent: oklch(var(--accent-l) .19 var(--accent-h));--accent-hover: oklch(var(--accent-hover-l) .19 var(--accent-h));--accent-text: oklch(var(--accent-text-l) .19 var(--accent-h))}:root[data-theme=light]{--bg: #f4f4f5;--fg: #131316;--fg-2: #5f5f66;--fg-3: #7a7a80;--fg-4: #8a8a90;--fg-5: #85858b;--fg-6: #9a9a9f;--link: #6b6b70;--on-accent: #0a0a0b;--window-bg: rgba(255, 255, 255, .92);--window-shadow: 0 30px 60px -25px rgba(0, 0, 0, .25);--line: rgba(0, 0, 0, .08);--line-2: rgba(0, 0, 0, .06);--line-3: rgba(0, 0, 0, .1);--surface: rgba(0, 0, 0, .04);--surface-2: rgba(0, 0, 0, .045);--surface-hover: rgba(0, 0, 0, .06);--grid-dot: rgba(0, 0, 0, .07);--ring-track: rgba(0, 0, 0, .08);--glow-opacity: .18;--glow-pulse-lo: .12;--glow-pulse-hi: .22;--traffic-1: #c9b8ae;--traffic-2: #c8c09a;--traffic-3: #a8bba9;--swatch-selected: #131316;--selection: rgba(0, 0, 0, .15);--danger: oklch(.55 .2 25);--accent-l: .6;--accent-hover-l: .52;--accent-text-l: .5}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg);font-family:IBM Plex Sans,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit}button{font-family:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--selection)}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@keyframes pulse{0%,to{opacity:var(--glow-pulse-lo)}50%{opacity:var(--glow-pulse-hi)}}