:root{--hue:280;--glass-top:oklch(29% .045 288/.84);--glass-bottom:oklch(22% .035 262/.84);--glass-solid:oklch(22% .035 275);--card:oklch(100% 0 0/.045);--card-hover:oklch(100% 0 0/.085);--line:oklch(100% 0 0/.09);--line-strong:oklch(100% 0 0/.17);--track:oklch(100% 0 0/.14);--text:oklch(96% .012 var(--hue));--muted:oklch(82% .02 var(--hue));--subtle:oklch(70% .03 var(--hue));--accent:oklch(85% .12 84);--accent-strong:oklch(79% .14 72);--accent-soft:oklch(85% .12 84/.15);--accent-line:oklch(85% .12 84/.55);--rose:oklch(77% .09 12);--sage:oklch(82% .08 160);--on-accent:oklch(24% .04 var(--hue));--font-ui:Inter, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--font-display:"Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;--text-2xs:10px;--text-xs:11px;--text-sm:12px;--text-md:14px;--text-lg:18px;--text-xl:20px;--text-display:30px;--space-1:4px;--space-2:6px;--space-3:8px;--space-4:10px;--space-5:12px;--space-6:16px;--radius-ctl:9px;--radius-card:12px;--radius-panel:18px;--radius-full:999px;--shadow-panel:inset 0 1px 0 oklch(100% 0 0/.07), 0 2px 8px oklch(14% .04 var(--hue) / .22), 0 18px 48px oklch(14% .04 var(--hue) / .34);--glow:0 0 0 1px var(--accent-line), 0 0 16px oklch(85% .12 84/.22);--blur:blur(18px) saturate(1.35);--ease:cubic-bezier(.2, .7, .2, 1);--dur:.18s}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font-ui);color:var(--text);-webkit-font-smoothing:antialiased;background:oklch(91% .02 260);margin:0;overflow:hidden}#app canvas{touch-action:none;width:100vw;height:100vh;display:block}button,select,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}.panel,.hud,.focus,.pomo,.toast,.pomo-toast{background:linear-gradient(160deg, var(--glass-top), var(--glass-bottom));border:1px solid var(--line);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-panel)}.title{pointer-events:none;color:oklch(98% .015 85);text-shadow:0 1px 2px oklch(20% .04 var(--hue) / .35), 0 4px 18px oklch(20% .04 var(--hue) / .35);position:fixed;top:18px;left:22px}.title h1{font:700 var(--text-display) / 1 var(--font-display);letter-spacing:.01em;margin:0}.title p{margin:var(--space-1) 0 0;font-size:var(--text-2xs);letter-spacing:.3em;text-transform:uppercase;opacity:.9;font-weight:600}.panel{border-radius:var(--radius-panel);width:260px;max-height:calc(100vh - 32px);font-size:var(--text-sm);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:fixed;top:16px;right:16px}.panel-head{align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);cursor:pointer;letter-spacing:.2em;font-weight:600;font-size:var(--text-xs);display:flex}.panel-head .dot,.focus-head .dot{background:radial-gradient(circle at 35% 35%, oklch(97% .05 90), var(--accent-strong));border-radius:50%;width:8px;height:8px;box-shadow:0 0 10px oklch(85% .12 84/.7)}.panel-head .chev{color:var(--subtle);transition:transform var(--dur) var(--ease);margin-left:auto}.panel.collapsed .chev{transform:rotate(-90deg)}.panel-body{padding:0 var(--space-4) var(--space-4);overflow-y:auto}.panel.collapsed .panel-body,.panel.collapsed .panel-foot{display:none}.section{padding:var(--space-4) var(--space-5) var(--space-3);margin-bottom:var(--space-3);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card)}.section:last-child{margin-bottom:0}.section-title{align-items:center;gap:var(--space-2);font-size:var(--text-2xs);letter-spacing:.18em;color:var(--subtle);margin-bottom:var(--space-4);font-weight:600;display:flex}.section-title:before{content:"";background:linear-gradient(90deg, var(--accent), var(--rose));border-radius:2px;width:14px;height:2px}.row{margin-bottom:var(--space-2);color:var(--muted);justify-content:space-between;align-items:baseline;display:flex}.row .value{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text)}.pair{gap:var(--space-5);grid-template-columns:1fr 1fr;display:grid}.control{margin-bottom:var(--space-4)}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--accent-strong), var(--accent) var(--fill,50%), var(--track) var(--fill,50%));height:4px}input[type=range]::-moz-range-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--accent-strong), var(--accent) var(--fill,50%), var(--track) var(--fill,50%));height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--accent);width:14px;height:14px;box-shadow:0 0 0 4px oklch(85% .12 84/.18), 0 2px 6px oklch(14% .04 var(--hue) / .4);transition:transform var(--dur) var(--ease);background:oklch(98% .01 90);border-radius:50%;margin-top:-5px}input[type=range]::-moz-range-thumb{border:2px solid var(--accent);background:oklch(98% .01 90);border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 4px oklch(85% .12 84/.18)}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}input[type=range].light-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,oklch(80% .07 15),oklch(92% .04 90) 32%,oklch(96% .01 240) 45%,oklch(84% .12 75) 62%,oklch(65% .12 330) 80%,oklch(32% .08 275))}input[type=range].light-range::-moz-range-track{background:linear-gradient(90deg,oklch(80% .07 15),oklch(92% .04 90) 32%,oklch(96% .01 240) 45%,oklch(84% .12 75) 62%,oklch(65% .12 330) 80%,oklch(32% .08 275))}.segmented{gap:var(--space-1);border-radius:calc(var(--radius-ctl) + 3px);background:oklch(0% 0 0/.16);grid-template-columns:repeat(4,1fr);padding:3px;display:grid}.segmented.two{grid-template-columns:1fr 1fr}.segmented.five{grid-template-columns:repeat(5,1fr)}.segmented.five .chip{font-size:var(--text-md);padding:3px 0}.segmented .chip{padding-inline:2px}.chip,.btn{color:var(--muted);border-radius:var(--radius-ctl);font-size:var(--text-xs);cursor:pointer;transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);background:0 0;border:1px solid #0000;padding:6px 4px}.chip:hover{color:var(--text);background:var(--card-hover)}.chip.on{color:var(--on-accent);background:linear-gradient(180deg, oklch(90% .1 88), var(--accent));font-weight:600;box-shadow:0 1px 6px oklch(85% .12 84/.35)}.btn-grid{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:var(--card);border-color:var(--line);min-height:38px;color:var(--text);line-height:1.15;display:flex}.btn svg{color:var(--accent);flex:none}.btn:hover{background:var(--card-hover);border-color:var(--line-strong);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.on{background:var(--accent-soft);box-shadow:var(--glow);border-color:#0000}.btn.wide{width:100%;margin-bottom:var(--space-5)}.compass{align-items:center;gap:var(--space-6);margin-top:var(--space-2);display:flex}.compass svg{color:var(--accent);flex:none}.compass circle{stroke:var(--line-strong)}.compass .from{color:var(--subtle);font-size:var(--text-xs)}.compass .dir{font-size:var(--text-md);font-weight:600}.panel-foot{padding:var(--space-3) var(--space-6) var(--space-5);border-top:1px solid var(--line);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--subtle);line-height:1.5}.hud{align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-6) var(--space-4) var(--space-5);border-radius:var(--radius-full);display:flex;position:fixed;bottom:18px;left:18px}.hud svg{color:var(--accent)}.hud .speed{font-family:var(--font-mono);font-size:var(--text-lg)}.hud .speed small{font-size:var(--text-xs);color:var(--subtle);margin-left:var(--space-1)}.hud .meter{border-radius:var(--radius-full);background:var(--track);width:120px;height:3px;margin:var(--space-1) 0 3px;overflow:hidden}.hud .meter i{border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--rose));height:100%;display:block}.hud .state{letter-spacing:.22em;color:var(--subtle);font-size:9px;font-weight:600}.house-panel{width:280px;padding:var(--space-6);left:16px;right:auto;overflow-y:auto}.house-panel.hidden,body.editing .title{display:none}.hp-head{justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-2);display:flex}.hp-name{font-size:var(--text-md);font-weight:600;line-height:1.3}.hp-close{color:var(--subtle);font-size:var(--text-lg);cursor:pointer;border-radius:var(--radius-ctl);background:0 0;border:0;padding:2px 6px;line-height:1}.hp-close:hover{color:var(--text);background:var(--card-hover)}.hp-section{margin-top:var(--space-5)}.hp-section .section-title{margin-bottom:var(--space-3)}.house-panel select{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-ctl);border:1px solid var(--line-strong);background:var(--card)}.house-panel select option,.house-panel select optgroup,.pomo-preset option{background:var(--glass-solid)}.hp-floors{gap:var(--space-1);grid-template-columns:repeat(7,1fr);display:grid}.hp-roofs{gap:var(--space-1);grid-template-columns:repeat(4,1fr);display:grid}.hp-floors .chip,.hp-roofs .chip,.hp-section>.hp-two .chip{background:var(--card);border-color:var(--line)}.hp-floors .chip.on,.hp-roofs .chip.on,.hp-section>.hp-two .chip.on{background:linear-gradient(180deg, oklch(90% .1 88), var(--accent));border-color:#0000}.hp-roofs .chip{font-size:var(--text-2xs)}.hp-two{gap:var(--space-2);margin-top:var(--space-5);grid-template-columns:1fr 1fr;display:grid}.hp-section .hp-two{margin-top:0}.hp-swatches{gap:var(--space-2);grid-template-columns:repeat(8,1fr);display:grid}.swatch{aspect-ratio:1;cursor:pointer;color:var(--subtle);transition:transform var(--dur) var(--ease);background:0 0;border:1px solid oklch(0% 0 0/.2);border-radius:7px;padding:0}.swatch:hover{transform:scale(1.08)}.swatch.on{box-shadow:0 0 0 2px var(--glass-solid), 0 0 0 4px var(--accent)}.swatch.none{border:1px dashed var(--line-strong)}.hp-note{margin-top:var(--space-3);font-size:var(--text-2xs);color:var(--subtle)}.hp-wide{width:100%;margin-top:var(--space-5)}.toast,.pomo-toast{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);border-color:var(--accent-line);font-size:var(--text-sm);pointer-events:none;position:fixed;left:50%;transform:translate(-50%)}.toast{bottom:22px}.pomo-toast{z-index:6;top:70px}.toast.hidden,.pomo-toast.hidden{display:none}.focus{width:384px;max-height:calc(100vh - 32px);padding:var(--space-5) var(--space-6) var(--space-6);border-radius:var(--radius-panel);font-size:var(--text-sm);z-index:5;position:fixed;bottom:16px;right:16px;overflow-y:auto}.focus.hidden,.focus .hidden{display:none}.focus-head{align-items:center;gap:var(--space-3);letter-spacing:.2em;font-weight:600;font-size:var(--text-xs);margin-bottom:var(--space-4);display:flex}.focus-head .hp-close{margin-left:auto}.focus-video{margin-top:var(--space-4);border-radius:var(--radius-card);background:oklch(10% .02 var(--hue));width:356px;height:200px;box-shadow:0 0 0 1px var(--line);overflow:hidden}.focus-video iframe{display:block}.focus-now{margin-top:var(--space-4)}.focus-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.focus-channel{color:var(--subtle);font-size:var(--text-xs)}.focus-controls{gap:var(--space-2);margin:var(--space-4) 0 var(--space-5);grid-template-columns:40px 40px 40px 1fr;align-items:center;display:grid}.focus-controls .btn{min-height:32px;padding:var(--space-1)}.focus-seasons .chip{font-size:var(--text-2xs)}.focus-list{counter-reset:track;margin:var(--space-4) 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);max-height:210px;padding:0;list-style:none;overflow-y:auto}.focus-list li{counter-increment:track;gap:var(--space-2);padding:7px var(--space-4);border-bottom:1px solid var(--line);cursor:pointer;color:var(--muted);transition:background var(--dur) var(--ease), color var(--dur) var(--ease);grid-template-columns:22px 1fr auto;display:grid}.focus-list li:last-child{border-bottom:0}.focus-list li:before{content:counter(track);color:var(--subtle);font-family:var(--font-mono);font-size:var(--text-2xs)}.focus-list li .t{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.focus-list li .d{color:var(--subtle);font-family:var(--font-mono);font-size:var(--text-2xs)}.focus-list li:hover{background:var(--card-hover);color:var(--text)}.focus-list li.on{color:var(--accent);background:var(--accent-soft)}.focus-list li.on:before{content:"♪";color:var(--accent)}.focus-ambient{margin:var(--space-5) 0 var(--space-1);color:var(--subtle)}.focus-rain{gap:var(--space-4);margin-top:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);grid-template-columns:auto 1fr;align-items:center;display:grid}.focus-switch{gap:var(--space-2);cursor:pointer;align-items:center;display:flex}.focus-switch input{accent-color:var(--accent-strong)}.pomo{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-6);border-radius:var(--radius-full);z-index:6;font-size:var(--text-sm);display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.pomo.hidden{display:none}.pomo-phase{font-size:var(--text-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}.pomo[data-phase=break] .pomo-phase,.pomo[data-phase=long] .pomo-phase{color:var(--sage)}.pomo-time{font-family:var(--font-mono);font-size:var(--text-xl);text-align:center;min-width:68px}.pomo-dots{letter-spacing:2px;color:var(--accent)}.pomo-preset{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-ctl);padding:3px var(--space-1);font-size:var(--text-xs)}.pomo-btn{border:1px solid var(--line);background:var(--card);cursor:pointer;width:32px;height:32px;transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);border-radius:50%;place-items:center;display:grid}.pomo-btn:hover{background:var(--card-hover)}.pomo-btn[data-act=toggle]{color:var(--on-accent);background:linear-gradient(180deg, oklch(90% .1 88), var(--accent));border-color:#0000;box-shadow:0 1px 8px oklch(85% .12 84/.4)}@media (prefers-reduced-motion:reduce){*{transition:none!important}}@media (width<=640px){.panel{width:calc(100vw - 32px);max-height:55vh}.title{display:none}.focus{width:auto;left:16px;right:16px}.focus-video,.focus-video iframe{width:100%}.pomo{top:auto;bottom:84px}.pomo-dots{display:none}}