:root{--text-color: #2c3e50;--bg-startup: #fff9c4;--bg-warmup: #d1f2eb;--bg-practice: #d6eaf8;--bg-review: #f5eef8;--bg-end: #fdf2e9;--button-bg: #ffffff;--button-selected: #aed6f1}body,html,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-color)}.app-container{width:100%;height:100%;display:flex;flex-direction:column;transition:background-color .8s ease;text-align:center}.startup{background-color:var(--bg-startup)}.warmup{background-color:var(--bg-warmup)}.practice{background-color:var(--bg-practice)}.review{background-color:var(--bg-review)}.end{background-color:var(--bg-end)}.startup-screen{padding:40px 20px;overflow-y:auto;flex:1}h1,h2,h3{margin-top:0}.option-group{margin-bottom:30px}.button-grid,.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:10px}button{background-color:var(--button-bg);border:2px solid transparent;border-radius:12px;padding:12px 20px;font-size:1rem;color:var(--text-color);cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .2s ease}button:active{transform:scale(.95)}button.selected{background-color:var(--button-selected);border-color:var(--text-color)}.estimate{font-size:1.3rem;font-weight:600;margin:30px 0}.begin-btn{font-size:1.5rem;padding:15px 40px;background-color:#a9dfbf;border-radius:30px}.timer-screen{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.phase-title{font-size:2.5rem;margin-bottom:20px}.countdown{font-size:25vw;font-weight:700;font-family:Courier New,Courier,monospace;margin:20px 0;line-height:1}.skip-btn{font-size:1.2rem;padding:10px 25px;background-color:#ffffff80}.status-corner{position:fixed;bottom:20px;right:20px;background:#ffffffe6;padding:15px;border-radius:15px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 15px #0000001a;z-index:100}.total-remaining{font-size:.9rem;font-weight:700;margin-bottom:8px}.pause-btn{width:44px;height:44px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.5rem;padding:0;line-height:1}.end-screen{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.reset-btn{font-size:1.3rem;padding:12px 30px;margin-top:30px}.credit{margin-top:40px;font-size:.9rem;opacity:.8}@media (min-width: 768px){.countdown{font-size:15vw}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#2c3e50;background-color:#f0f4f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;height:100vh;margin:0 auto;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}button{border-radius:12px;border:1px solid #ccc;padding:12px 24px;font-size:1.1em;font-weight:500;font-family:inherit;background-color:#fff;cursor:pointer;transition:all .2s;margin:8px;box-shadow:0 2px 4px #0000000d}button:hover{border-color:#646cff;background-color:#f0f0f0}button:active{transform:translateY(1px)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.pastel-bg{background-color:#fdfcf0}h1,h2{color:#5d5d5d}