*{box-sizing:border-box;margin:0;padding:0}:root{--panel-width:320px;--bg-panel:#fff8e1;--bg-card:#fff;--green:#44af35;--green-light:#55c944;--green-dark:#3a9a2e;--red:#e62310;--yellow:#fccf00;--blue:#009bd9;--text:#2d2d2d;--text-muted:#7a7a7a;--border:#e0e0e0;--border-panel:#e0d8c0;--bg-btn:#f8f8f8;--bg-btn-hover:#e0e0e0;--shadow-card:0 2px 8px #0000000f, 0 4px 16px #0000000a, inset 0 1px 0 #ffffffe6;--shadow-btn:0 2px 4px #00000014, inset 0 1px 0 #fffc}html,body{height:100%;color:var(--text);background:#e8f5e9;font-family:Jua,Fredoka,sans-serif;overflow:hidden}#app{height:100vh;display:flex}.controls-panel{width:var(--panel-width);min-width:var(--panel-width);background:var(--bg-panel);border-right:3px solid var(--border-panel);scrollbar-width:thin;background-image:repeating-linear-gradient(45deg,#0000,#0000 10px,#00000004 10px 11px);flex-direction:column;gap:14px;height:100vh;padding:20px 16px;display:flex;overflow-y:auto}.controls-panel::-webkit-scrollbar{width:6px}.controls-panel::-webkit-scrollbar-track{background:0 0}.controls-panel::-webkit-scrollbar-thumb{background:#c8c0a8;border-radius:3px}.panel-title{text-align:center;color:var(--green);text-shadow:2px 2px #00000014;border-bottom:3px dashed var(--yellow);letter-spacing:-.5px;padding-bottom:6px;font-size:28px;font-weight:700}.panel-title span{color:var(--red)}.control-section{background:var(--bg-card);box-shadow:var(--shadow-card);border-radius:16px;padding:14px}.section-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;align-items:center;gap:6px;margin-bottom:12px;font-size:13px;font-weight:600;display:flex}.section-label .emoji{font-size:16px}.control-label{color:#555;margin-bottom:10px;font-size:13px;font-weight:500;display:block}.arrow-row{align-items:center;gap:8px;margin-top:4px;display:flex}.arrow-btn{color:#555;cursor:pointer;width:34px;height:34px;box-shadow:var(--shadow-btn);background:#f0f0f0;border:none;border-radius:12px;justify-content:center;align-items:center;font-family:Jua,Fredoka,sans-serif;font-size:14px;transition:all .15s;display:flex}.arrow-btn:hover{background:var(--bg-btn-hover);transform:scale(1.08)}.arrow-btn:active{transform:scale(.95);box-shadow:0 1px 2px #0000001a}.arrow-value{text-align:center;color:var(--text);background:#fafafa;border:2px solid #eee;border-radius:10px;flex:1;padding:6px 10px;font-size:16px;font-weight:700}.section-sub-header{color:var(--text-muted);margin:8px 0 2px;padding-left:2px;font-size:13px;font-weight:600}.slider-row{align-items:center;gap:8px;margin-top:4px;display:flex}.slider-value{color:var(--green);text-align:right;min-width:60px;font-size:12px;font-weight:600}input[type=range]{-webkit-appearance:none;background:linear-gradient(to right, #c8e6c9, var(--green));border-radius:4px;outline:none;flex:1;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--green);cursor:pointer;background:#fff;border-radius:50%;width:26px;height:26px;transition:transform .15s;box-shadow:0 2px 6px #00000026}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 10px #44af354d}input[type=range]::-moz-range-thumb{border:3px solid var(--green);cursor:pointer;background:#fff;border-radius:50%;width:26px;height:26px;box-shadow:0 2px 6px #00000026}.speed-toggle-row{gap:4px;margin-bottom:6px;display:flex}.toggle-btn{border:2px solid var(--border);background:var(--bg-btn);color:var(--text-muted);cursor:pointer;border-radius:12px;flex:1;padding:8px 6px;font-family:Jua,Fredoka,sans-serif;font-size:12px;font-weight:500;transition:all .15s;box-shadow:0 2px 4px #0000000a,inset 0 1px #fffc}.toggle-btn:hover{border-color:var(--green);color:var(--green)}.toggle-btn.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 3px 8px #44af354d,inset 0 1px #fff3}.toggle-btn:active{transform:scale(.96)}.option-buttons{gap:4px;margin-top:6px;display:flex}.opt-btn{border:2px solid var(--border);background:var(--bg-btn);color:var(--text-muted);cursor:pointer;border-radius:10px;flex:1;padding:6px 4px;font-family:Jua,Fredoka,sans-serif;font-size:12px;font-weight:500;transition:all .15s;box-shadow:0 1px 3px #0000000a}.opt-btn:hover{border-color:var(--green);color:var(--green)}.opt-btn.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 6px #44af3540}.opt-btn:active{transform:scale(.95)}.stimp-presets{gap:4px;margin-top:6px;display:flex}.preset-btn{border:2px solid var(--border);background:var(--bg-btn);color:var(--text-muted);cursor:pointer;border-radius:10px;flex:1;padding:6px 4px;font-family:Jua,Fredoka,sans-serif;font-size:11px;font-weight:500;transition:all .15s;box-shadow:0 1px 3px #0000000a}.preset-btn:hover{border-color:var(--green);color:var(--green)}.preset-btn.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 6px #44af3540}.preset-btn:active{transform:scale(.95)}.clock-container{justify-content:center;margin:8px 0;display:flex}.clock-label{text-align:center;color:var(--text-muted);font-size:11px}.mode-toggle{gap:4px;margin-bottom:10px;display:flex}.mode-btn{background:var(--bg-btn);border:2px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:12px;flex:1;padding:8px;font-family:Jua,Fredoka,sans-serif;font-size:12px;font-weight:600;transition:all .15s;box-shadow:0 2px 4px #0000000a,inset 0 1px #fffc}.mode-btn:hover{border-color:var(--green);color:var(--green)}.mode-btn.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 3px 8px #44af354d,inset 0 1px #fff3}.mc-options{margin-top:8px}.hidden{display:none}.action-buttons{flex-direction:column;gap:8px;display:flex;box-shadow:none!important;background:0 0!important;padding:0!important}.btn-primary{background:linear-gradient(180deg, var(--green-light) 0%, var(--green) 50%, var(--green-dark) 100%);color:#fff;cursor:pointer;letter-spacing:1px;border:none;border-radius:16px;width:100%;padding:16px;font-family:Jua,Fredoka,sans-serif;font-size:22px;font-weight:700;transition:all .15s;box-shadow:0 4px 12px #44af3559,0 2px 4px #0000001a,inset 0 2px #ffffff40,inset 0 -2px #0000001a}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 18px #44af3566,0 3px 6px #0000001f,inset 0 2px #ffffff40}.btn-primary:active{transform:translateY(1px);box-shadow:0 2px 6px #44af3540,inset 0 2px #0000001a}.btn-secondary{border:2px solid var(--border);background:var(--bg-btn);width:100%;color:var(--text-muted);cursor:pointer;border-radius:12px;padding:10px;font-family:Jua,Fredoka,sans-serif;font-size:14px;font-weight:600;transition:all .15s;box-shadow:0 2px 4px #0000000a}.btn-secondary:hover{border-color:var(--red);color:var(--red)}.btn-secondary:active{transform:scale(.97)}#stats-panel{background:var(--bg-card);box-shadow:var(--shadow-card);border-radius:16px;margin-top:0;padding:14px}.stats-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;font-weight:600;display:flex}.stats-body{color:var(--text-muted);font-size:13px}.stat-row{border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;padding:6px 0;display:flex}.stat-row:last-child{border-bottom:none}.stat-row.stat-big{padding:8px 0}.stat-row.stat-big .stat-value{color:var(--green);font-size:24px;font-weight:700}.stat-label{color:var(--text-muted);font-size:13px}.stat-value{color:var(--text);font-size:14px;font-weight:600}.stat-divider{background:#f0f0f0;height:1px;margin:4px 0}.viewport{flex:1;position:relative}.toast{opacity:0;z-index:1000;pointer-events:none;border-radius:16px;padding:12px 24px;font-family:Jua,Fredoka,sans-serif;font-size:18px;font-weight:700;transition:all .3s;position:fixed;top:20px;left:50%;transform:translate(-50%)translateY(-20px);box-shadow:0 4px 16px #0003}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.toast-success{background:var(--green);color:#fff}.toast-miss{background:var(--red);color:#fff}