:root{--bg:#fff6ea;--card:#fffaf3;--ink:#4b3f63;--ink-2:#7d7193;--line:#eadfce;--a:#ef5b55;--b:#086b3a;--accent:#ff8fab;--grass:#a8dd8c;--radius:18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;margin:0;font-family:Fredoka,system-ui,sans-serif}body{padding:0 12px calc(150px + env(safe-area-inset-bottom));max-width:1500px;margin:0 auto}button,select,input{font:inherit;color:inherit}.top{justify-content:space-between;align-items:center;gap:8px;padding:10px 2px 8px;display:flex}.top h1{letter-spacing:.2px;white-space:nowrap;margin:0;font-size:22px;font-weight:700}.logo{animation:1.6s ease-in-out infinite bob;display:inline-block}@keyframes bob{50%{transform:translateY(-3px)rotate(-4deg)}}.top-actions{gap:8px;display:flex}select{text-overflow:ellipsis;min-width:0;max-width:calc(100vw - 290px)}.top-actions{min-width:0}.icon-btn{flex:none}select,.icon-btn{border:2px solid var(--line);background:var(--card);cursor:pointer;border-radius:999px;height:38px;padding:0 14px;font-weight:600}.icon-btn{width:38px;padding:0;font-size:20px}.panes{grid-template-columns:1fr;gap:10px;display:grid}.pane{border-radius:var(--radius);background:var(--grass);box-shadow:0 3px 0 var(--line), 0 8px 24px #785aa01f;aspect-ratio:1000/760;position:relative;overflow:hidden}.pane[data-side=a]{outline:3px solid color-mix(in srgb, var(--a) 35%, transparent);outline-offset:-3px}.pane[data-side=b]{outline:3px solid color-mix(in srgb, var(--b) 35%, transparent);outline-offset:-3px}.stage,.stage canvas{width:100%;height:100%;position:absolute;inset:0}.stage canvas{display:block}.tag,.stats{pointer-events:none;font-size:12.5px;font-weight:600;position:absolute}.tag{background:#ffffffeb;border-radius:999px;align-items:center;gap:6px;padding:4px 10px 4px 8px;display:flex;top:8px;left:8px}.pane:after{content:"";border-radius:var(--radius);pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 #0000}.pane[data-alert=amber]:after{--ring:#f5a524;animation:1.1s ease-in-out infinite flash}.pane[data-alert=red]:after{--ring:#e5484d;animation:.7s ease-in-out infinite flash}@keyframes flash{0%,to{box-shadow:inset 0 0 0 6px var(--ring), inset 0 0 28px 6px color-mix(in srgb, var(--ring) 45%, transparent)}50%{box-shadow:inset 0 0 0 2px var(--ring)}}@media (prefers-reduced-motion:reduce){.pane[data-alert]:after{box-shadow:inset 0 0 0 6px var(--ring);animation:none}}.alert{pointer-events:none;color:#fff;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:700;position:absolute;top:8px;right:8px}.pane[data-alert=amber] .alert{background:#8a5300}.pane[data-alert=red] .alert{background:#c62f36}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot.a{background:var(--a)}.dot.b{background:var(--b)}.stats{flex-wrap:wrap;gap:4px;display:flex;bottom:8px;left:8px;right:8px}.stats span{white-space:nowrap;background:#ffffffeb;border-radius:999px;padding:3px 8px}.stats span b{font-weight:700}.stats .warn{color:#b5304a;background:#ffe1e6}.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);margin-top:10px;padding:12px 14px}.card h2{margin:0 0 6px;font-size:16px;font-weight:600}.about p{color:var(--ink-2);margin:6px 0;font-size:14px;line-height:1.45}.about b{color:var(--ink)}.chart-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;display:flex}.chart-head h2{margin:0}.tabs{gap:4px;display:flex}.tabs button{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;height:30px;padding:0 10px;font-size:13px;font-weight:600}.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.summary{color:var(--ink-2);margin:8px 0 0;font-size:14px}.summary b{color:var(--ink)}.legend{color:var(--ink-2);gap:14px;margin-top:6px;margin-bottom:6px;font-size:13px;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.chart-wrap{height:170px;position:relative}#chart{touch-action:pan-y;width:100%;height:100%;display:block}.tip{pointer-events:none;border:2px solid var(--line);white-space:nowrap;background:#fff;border-radius:10px;padding:5px 8px;font-size:12.5px;position:absolute;top:4px;box-shadow:0 4px 12px #785aa026}.tip div{align-items:center;gap:6px;display:flex}.dock{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid var(--line);width:min(100%,640px);padding:10px 14px calc(10px + env(safe-area-inset-bottom));z-index:10;background:#fffaf3f5;border-bottom:0;border-radius:22px 22px 0 0;gap:6px;display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -6px 24px #785aa01f}.row{align-items:center;gap:8px;display:flex}.play,.toggle,.speeds button{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;min-width:36px;height:36px;font-weight:600}.play{background:var(--accent);color:#fff;border-color:#0000;width:48px;font-size:15px}.speeds{gap:4px;display:flex}.speeds button{padding:0 8px}.speeds button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.toggle{opacity:.45;font-size:18px}.toggle.on{opacity:1;background:#f1fbe9;border-color:#c9e9b5}.clock{font-variant-numeric:tabular-nums;color:var(--ink-2);margin-left:auto;font-weight:600}.slider{grid-template-columns:112px 1fr;align-items:center;gap:8px;font-size:14px;display:grid}.slider span{white-space:nowrap}.slider b{font-weight:700}input[type=range]{appearance:none;touch-action:none;background:0 0;width:100%;height:28px}input[type=range]::-webkit-slider-runnable-track{background:#eadff5;border-radius:99px;height:10px}input[type=range]::-moz-range-track{background:#eadff5;border-radius:99px;height:10px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--ink);background:#fff;border-radius:50%;width:26px;height:26px;margin-top:-8px;box-shadow:0 2px 4px #0000001f}input[type=range]::-moz-range-thumb{border:3px solid var(--ink);background:#fff;border-radius:50%;width:22px;height:22px}.slider.b input::-webkit-slider-thumb{border-color:var(--b)}.slider.b input::-moz-range-thumb{border-color:var(--b)}@media (width>=900px){body{padding-bottom:170px}.panes{grid-template-columns:1fr 1fr}.top h1{font-size:26px}select{max-width:none}.tag,.stats{font-size:14px}.bottom-grid{grid-template-columns:2fr 1fr;gap:10px;display:grid}}.brand{align-items:center;gap:8px;min-width:0;display:flex}.why-btn{border:2px solid var(--line);background:var(--card);height:30px;color:var(--ink-2);cursor:pointer;border-radius:999px;flex:none;padding:0 12px;font-size:14px;font-weight:600}.why-btn:hover{color:var(--ink);border-color:var(--accent)}.why{border:2px solid var(--line);border-radius:var(--radius);background:var(--card);width:min(560px,100vw - 32px);max-height:calc(100dvh - 48px);color:var(--ink);padding:20px 22px 18px;box-shadow:0 12px 40px #4b3f6340}.why::backdrop{background:#4b3f6359}.why h2{margin:0 44px 10px 0;font-size:22px}.why p{color:var(--ink-2);margin:0 0 10px;font-size:15px;line-height:1.5}.why .who{color:var(--ink);margin:14px 0 0}.why a{color:var(--b);font-weight:600}.why-close{font-size:16px;position:absolute;top:14px;right:14px}@media (width<=420px){.brand{gap:6px}.brand .logo{display:none}.top h1{font-size:20px}.why-btn{padding:0 10px}select{max-width:calc(100vw - 236px)}}