@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Chakra+Petch:wght@400;500;700&display=swap";:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}:root{--bg-main:#f9c8d6;--bg-dots:#efb5c8;--card-bg:#f7f7f7;--ink:#121212;--accent:#ff5f6d;--accent-dark:#d74b58;--muted:#555;--shadow:6px 6px 0 #111;--radius:6px}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background-color:var(--bg-main);background-image:radial-gradient(var(--bg-dots) 1px, transparent 2px);background-size:12px 12px;margin:0;font-family:Chakra Petch,sans-serif}button,input{font:inherit}.app-shell{place-items:center;gap:1rem;min-height:100dvh;padding:clamp(.75rem,2vw,1.5rem);display:grid}.clock-card{background:var(--card-bg);border:4px solid var(--ink);width:min(100%,680px);box-shadow:var(--shadow);padding:clamp(.9rem,2.2vw,1.25rem)}.mode-switch{flex-wrap:wrap;align-items:center;gap:.7rem;display:flex}.mode-gif{object-fit:contain;flex-shrink:0;width:clamp(42px,8vw,60px);height:clamp(42px,8vw,60px)}.mode-pill{border:3px solid var(--ink);cursor:pointer;background:#fff;padding:.7rem 1rem;font-weight:700;box-shadow:3px 3px #111}.mode-pill.active{background:var(--accent);color:#fff}.mode-pill:focus-visible,.primary:focus-visible,.secondary:focus-visible,.timer-inputs input:focus-visible{outline:3px dashed var(--accent-dark);outline-offset:2px}.panel{gap:clamp(.85rem,2.5vw,1.5rem);margin-top:1.2rem;display:grid}.panel-wrap{justify-content:center;align-items:center;min-height:clamp(270px,52vw,360px);display:flex;position:relative;overflow:clip}.panel-animate{animation:.26s cubic-bezier(.2,.75,.3,1) panel-enter}@keyframes panel-enter{0%{opacity:0;transform:translateY(8px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}.display{text-align:center;letter-spacing:.05em;margin:0;font-family:"Press Start 2P",monospace;font-size:clamp(1.4rem,7vw,3rem);line-height:1.2}.display.complete{color:var(--accent-dark)}.timer-inputs{border:3px solid var(--ink);grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:0;padding:.85rem;display:grid}.timer-inputs label{gap:.4rem;font-size:.9rem;font-weight:700;display:grid}.timer-inputs input{border:3px solid var(--ink);text-align:center;background:#fff;width:100%;padding:.55rem .45rem;font-size:1.1rem;font-weight:700;box-shadow:2px 2px #111}.controls{flex-wrap:wrap;justify-content:center;gap:.7rem;display:flex}.primary,.secondary{border:3px solid var(--ink);cursor:pointer;min-width:110px;padding:.75rem 1.1rem;font-weight:700;transition:transform .12s;box-shadow:3px 3px #111}.primary{background:var(--accent);color:#fff}.secondary{background:#fff}.primary:active,.secondary:active{transform:translate(2px,2px)}.primary:disabled,.secondary:disabled{cursor:not-allowed;opacity:.52}.progress-track{border:3px solid var(--ink);background:#fff;height:14px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#ff8f98 0%,#ff5f6d 100%);height:100%;transition:width .16s linear}.status{text-align:center;color:var(--accent-dark);margin:0;font-weight:700}.app-footer{border:3px solid var(--ink);background:var(--accent);color:#fff;text-align:center;padding:.55rem 1rem;font-size:clamp(.82rem,2.7vw,1rem);font-weight:700;box-shadow:4px 4px #111}@media (width<=900px){.clock-card{width:min(100%,760px)}.mode-pill{flex:120px}}@media (width<=640px){.app-shell{align-content:start;padding-top:1rem}.clock-card{border-width:3px;padding:1rem;box-shadow:4px 4px #111}.panel-wrap{min-height:420px}.timer-inputs{grid-template-columns:1fr}.display{letter-spacing:.02em}.primary,.secondary{width:100%;min-width:0}}@media (width<=420px){.app-shell{gap:.7rem;padding:.65rem}.clock-card{border-width:2px;padding:.75rem;box-shadow:3px 3px #111}.mode-switch{gap:.5rem}.mode-pill{border-width:2px;padding:.58rem .7rem;font-size:.95rem;box-shadow:2px 2px #111}.timer-inputs{border-width:2px;padding:.65rem}.timer-inputs input,.primary,.secondary,.progress-track{border-width:2px;box-shadow:2px 2px #111}.panel-wrap{min-height:395px}.app-footer{border-width:2px;width:100%;box-shadow:3px 3px #111}}