:root{--bg:#000;--surface:#050505;--line:#1f1f1f;--line-strong:#333;--ink:#fff;--ink-soft:#c8c8c8;--muted:#7a7a7a;--dim:#444;--signal:#ff2d2d;--success:#3ddc84;--success-line:#1c3a29;--rail-done:#2a2a2a;--font:"Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;--tracking-wide:.22em;--faded:.18;--faded-done:.45;--ease:.35s ease;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);color:var(--ink-soft);background:radial-gradient(ellipse at center, #0d0d0d 0%, var(--bg) 62%) fixed, var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}:focus-visible{outline:1px solid var(--ink);outline-offset:3px}#root{width:100%;min-width:0}.container{width:100%;min-width:0;max-width:1400px}.timers-container{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;flex-wrap:nowrap;justify-content:safe center;align-items:center;gap:16px;padding:48px 12px;display:flex;overflow-x:auto}.timer-card{perspective:1200px;min-width:236px;transition:opacity var(--ease), transform var(--ease), filter var(--ease);animation:.3s ease-out slideIn;position:relative}.card-flipper{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1);position:relative}.card-face{border:1px solid var(--line);backface-visibility:hidden;transition:border-color var(--ease);background:0 0;border-radius:2px;padding:34px 24px 26px;position:relative}.card-back{border-color:var(--success-line);background:radial-gradient(circle at 50% 42%,#3ddc8412,#0000 70%);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0;transform:rotateY(180deg)}.timer-card.completed .card-flipper{transform:rotateY(180deg)}@keyframes slideIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.timers-container:has(.timer-card.running) .timer-card:not(.running){opacity:var(--faded);filter:blur(.6px)}.timers-container:has(.timer-card.running) .arrow{opacity:var(--faded);filter:blur(.6px)}.timers-container:has(.timer-card.running) .stack-icon{opacity:var(--faded);filter:blur(.6px)}.timers-container:has(.timer-card.running) .add-timer-btn{opacity:var(--faded);filter:blur(.6px)}:is(.timers-container:has(.timer-card.running) .timer-card.completed,.timers-container:has(.timer-card.running) .arrow.done,.timers-container:has(.timer-card.running) .stack-icon.done){opacity:var(--faded-done);filter:none}.timers-container:has(.timer-card.running) .timer-card:not(.running):hover{opacity:.75;filter:none}.timers-container:has(.timer-card.running) .stack-icon:hover{opacity:.75;filter:none}.timers-container:has(.timer-card.running) .add-timer-btn:hover{opacity:.75;filter:none}.timer-display{letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink-soft);text-align:center;transition:color var(--ease), font-size var(--ease);margin:18px 0;font-size:52px;font-weight:800}.timer-card.running:before,.timer-card.paused:before{z-index:2;letter-spacing:var(--tracking-wide);white-space:nowrap;font-size:10px;font-weight:700;position:absolute;top:12px;left:50%;transform:translate(-50%)}.timer-card.running{transform:scale(1.06)}.timer-card.running .card-front{border-color:#0000}.timer-card.running .timer-display{color:var(--ink);font-size:64px}.timer-card.running:before{content:"";background:var(--signal);width:8px;height:8px;box-shadow:0 0 12px var(--signal);border-radius:50%;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.timer-card.paused .card-front{border-color:var(--line-strong)}.timer-card.paused:before{content:"PAUSED";color:var(--signal)}.timer-card.paused .timer-display{color:var(--muted)}.done-task{justify-content:center;align-items:center;width:100%;min-height:120px;display:flex;position:relative}.done-text{letter-spacing:.02em;text-transform:uppercase;text-align:center;color:var(--ink-soft);overflow-wrap:anywhere;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:22px;font-weight:800;line-height:1.15;display:-webkit-box;overflow:hidden}.done-slash{pointer-events:none;width:150px;height:150px;position:absolute;top:50%;left:50%;overflow:visible;transform:translate(-50%,-50%)}.done-slash path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.done-slash .cut{stroke:var(--bg);stroke-width:15px}.done-slash .mark{stroke:var(--success);stroke-width:8px;filter:drop-shadow(0 0 6px #3ddc8473)}.timer-card.completed .done-slash path{animation:.32s cubic-bezier(.6,0,.3,1) .55s both slice}@keyframes slice{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.done-time{letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--success);font-size:10px;font-weight:700}.again-btn{color:var(--ink-soft);border-color:var(--line-strong);background:0 0}.again-btn:hover{color:var(--ink);border-color:var(--ink)}.progress-rail{z-index:2;background:repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);height:2px;position:absolute;bottom:-1px;left:-1px;right:-1px}.progress-fill{height:100%;width:calc(var(--progress,0) * 100%);background:var(--ink);transition:width 1s linear}.timer-card.running .progress-fill{box-shadow:0 0 8px #ffffff80}.timer-card.paused .progress-fill{background:var(--muted)}.timer-card.completed .progress-rail{background:var(--rail-done)}.timer-card.completed .progress-fill{display:none}.close-btn{border:1px solid var(--line-strong);width:26px;height:26px;color:var(--muted);letter-spacing:0;background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:15px;font-weight:400;line-height:1;display:flex;position:absolute;top:10px;right:10px}.close-btn:hover{border-color:var(--signal);color:var(--signal);transform:rotate(90deg)}.replay-icon{width:26px;height:26px;color:var(--muted);justify-content:center;align-items:center;font-size:16px;display:flex;position:absolute;top:10px;left:10px}.description-input{border:none;border-bottom:1px solid var(--line-strong);width:100%;min-height:40px;color:var(--ink-soft);font-family:var(--font);letter-spacing:.14em;text-transform:uppercase;text-align:center;resize:vertical;transition:border-color var(--ease);background:0 0;border-radius:0;margin:10px 0;padding:8px 4px;font-size:12px;font-weight:600}.description-input::placeholder{color:var(--dim)}.description-input:focus{border-color:var(--ink);outline:none}.time-inputs{color:var(--dim);justify-content:center;align-items:center;gap:8px;margin:18px 0;display:flex}.time-input{border:none;border-bottom:1px solid var(--line-strong);width:60px;color:var(--ink-soft);font-family:var(--font);font-variant-numeric:tabular-nums;text-align:center;transition:border-color var(--ease);background:0 0;border-radius:0;padding:8px 4px;font-size:18px}.time-input:focus{border-color:var(--ink);outline:none}.time-input:disabled,.description-input:disabled{color:var(--dim);border-color:var(--line);cursor:not-allowed}button{font-family:var(--font);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;transition:all var(--ease);border:1px solid #0000;border-radius:0;padding:11px 20px;font-size:11px;font-weight:700}.controls,.advanced-controls{justify-content:center;gap:8px;display:flex}.controls{margin-top:20px}.advanced-controls{margin-top:8px}.start-btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}.start-btn:hover,.timer-card.running .start-btn{color:var(--ink);background:0 0}.timer-card.running .start-btn:hover{background:var(--ink);color:var(--bg)}.stop-btn{color:var(--muted);border-color:var(--line-strong);background:0 0}.stop-btn:hover{color:var(--signal);border-color:var(--signal)}.add-minute-btn,.oops-btn{color:var(--muted);border-color:var(--line);background:0 0;padding:7px 14px;font-size:10px}.add-minute-btn:hover,.oops-btn:hover{color:var(--ink);border-color:var(--ink-soft)}.arrow{color:var(--dim);transition:opacity var(--ease), filter var(--ease);font-size:28px;font-weight:200}.add-timer-btn{border:1px solid var(--line-strong);width:52px;min-width:52px;height:52px;color:var(--ink-soft);letter-spacing:0;background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:28px;font-weight:300;display:flex}.add-timer-btn:hover{border-color:var(--ink);color:var(--ink);transform:scale(1.08)}.add-timer-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.stack-icon{cursor:pointer;opacity:.6;width:60px;min-width:60px;height:80px;transition:opacity var(--ease), transform var(--ease), filter var(--ease);position:relative}.stack-icon:hover{opacity:1;transform:scale(1.05)}.stack-layer{background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;width:100%;height:60px;position:absolute}.stack-layer:first-child{opacity:.4;top:0;left:-6px}.stack-layer:nth-child(2){opacity:.7;top:5px;left:-3px}.stack-layer:nth-child(3){color:var(--ink);justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex;top:10px;left:0}.stack-icon.done .stack-layer{border-color:var(--success-line)}.stack-icon.done .stack-layer:nth-child(3){color:var(--success);font-size:13px}.hamburger-menu{border:1px solid var(--line-strong);background:var(--bg);cursor:pointer;z-index:1000;width:46px;height:46px;transition:border-color var(--ease);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:fixed;top:20px;left:20px}.hamburger-menu:hover{border-color:var(--ink)}.hamburger-menu .line{background:var(--muted);width:18px;height:1.5px;transition:all var(--ease)}.hamburger-menu:hover .line,.hamburger-menu.open .line{background:var(--ink)}.hamburger-menu.open .line:first-child{transform:translateY(6.5px)rotate(45deg)}.hamburger-menu.open .line:nth-child(2){opacity:0}.hamburger-menu.open .line:nth-child(3){transform:translateY(-6.5px)rotate(-45deg)}.menu-panel{background:var(--surface);border-right:1px solid var(--line);z-index:999;width:320px;height:100vh;transition:left var(--ease);padding:96px 30px 30px;position:fixed;top:0;left:-320px}.menu-panel.open{left:0}.menu-overlay{z-index:998;opacity:0;pointer-events:none;transition:opacity var(--ease);background:#000c;position:fixed;inset:0}.menu-overlay.open{opacity:1;pointer-events:auto}.menu-item{border-bottom:1px solid var(--line);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:11px;font-weight:600;display:flex}.menu-item label{cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch{border:1px solid var(--line-strong);cursor:pointer;width:42px;height:22px;transition:background var(--ease), border-color var(--ease);background:0 0;border-radius:11px;flex-shrink:0;position:relative}.toggle-switch:after{content:"";background:var(--muted);width:14px;height:14px;transition:left var(--ease), background var(--ease);border-radius:50%;position:absolute;top:3px;left:3px}.toggle-switch.active{background:var(--ink);border-color:var(--ink)}.toggle-switch.active:after{background:var(--bg);left:23px}.wave-container{text-align:center;animation:.5s ease-in fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.wave-image{aspect-ratio:16/9;object-fit:cover;filter:grayscale()brightness(.45)contrast(1.15);border-radius:2px;width:min(400px,80vw);display:block}.wave-text{color:var(--muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-top:22px;font-size:12px;font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.teach-target{display:contents}.teach-hovered>:first-child{outline-offset:4px;outline:3px solid gold}.teach-panel{color:#e6edf3;z-index:2000;background:#0d1117;width:min(48vw,720px);height:100vh;padding:16px;font-size:13px;position:fixed;top:0;overflow:auto;box-shadow:-4px 0 20px #0006}.teach-panel.right{right:0}.teach-panel.left{left:0;box-shadow:4px 0 20px #0006}.teach-panel h2{color:gold;margin-bottom:12px;font-size:16px}.teach-panel pre{white-space:pre;margin:0}.tour-launcher{z-index:1001;border:1px solid var(--line-strong);background:var(--bg);height:46px;transition:border-color var(--ease);border-radius:23px;align-items:center;padding:0 6px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.tour-launcher:hover{border-color:var(--ink-soft)}.tour-launch-btn,.tour-hide-btn{white-space:nowrap;background:0 0;border:none;border-radius:17px;padding:8px 14px}.tour-launch-btn{color:var(--ink-soft)}.tour-launch-btn span{text-align:center;border:1px solid;border-radius:50%;width:18px;height:18px;margin-right:6px;font-size:10px;line-height:16px;display:inline-block}.tour-launch-btn:hover{color:var(--ink)}.tour-hide-btn{color:var(--dim);border-left:1px solid var(--line);border-radius:0 17px 17px 0;font-size:9px}.tour-hide-btn:hover{color:var(--signal)}@media (width<=520px){.tour-launcher{padding:0 4px}.tour-launch-btn,.tour-hide-btn{padding:8px 10px}.tour-hide-long{display:none}}.tour-root{z-index:2000;pointer-events:none;position:fixed;inset:0}.tour-backdrop{background:#000000b8;position:absolute;inset:0}.tour-spotlight{border:1px solid var(--ink);border-radius:6px;transition:top .3s,left .3s,width .3s,height .3s;animation:1.8s ease-in-out infinite tourGlow;position:fixed;box-shadow:0 0 0 9999px #000000b8,0 0 24px #ffffff40}@keyframes tourGlow{0%,to{border-color:var(--ink)}50%{border-color:var(--muted)}}.tour-card{background:var(--surface);border:1px solid var(--line-strong);width:340px;max-width:calc(100vw - 24px);color:var(--ink-soft);pointer-events:auto;border-radius:4px;padding:26px 24px 18px;animation:.25s ease-out fadeIn;position:fixed;box-shadow:0 18px 50px #000000b3}.tour-close{border:1px solid var(--line-strong);width:26px;height:26px;color:var(--muted);letter-spacing:0;background:0 0;border-radius:50%;padding:0;font-size:15px;line-height:1;position:absolute;top:10px;right:10px}.tour-close:hover{color:var(--ink);border-color:var(--ink)}.tour-count{letter-spacing:var(--tracking-wide);color:var(--muted);font-size:10px;font-weight:700}.tour-title{color:var(--ink);margin:8px 0 10px;font-size:18px;font-weight:800}.tour-body{font-size:14px;line-height:1.55}.tour-missing{border-left:2px solid var(--signal);color:var(--muted);margin-top:10px;padding-left:10px;font-size:13px}.tour-nav{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.tour-arrow,.tour-finish{border:1px solid var(--line-strong);height:40px;color:var(--ink-soft);letter-spacing:0;background:0 0}.tour-arrow{border-radius:50%;width:40px;padding:0;font-size:18px}.tour-finish{background:var(--ink);border-color:var(--ink);color:var(--bg);letter-spacing:var(--tracking-wide);border-radius:20px;padding:0 18px}.tour-arrow:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}.tour-arrow:disabled{opacity:.3;cursor:default}.tour-dots{gap:6px;display:flex}.tour-dot{background:var(--line-strong);width:6px;height:6px;transition:background var(--ease), transform var(--ease);border-radius:50%}.tour-dot.on{background:var(--ink);transform:scale(1.3)}
