:root{--ink:#0b1b24;--blue:#62c9ff;--blue-dark:#2d91be;--cream:#f3eee5;--paper:#fffdf8;--orange:#ff705f;--muted:#667f8b;--line:rgba(11,27,36,.16)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0}
body{overflow:hidden;color:var(--ink);background:var(--cream);font-family:"DM Sans",Arial,sans-serif}
button{font:inherit;color:inherit}
.topbar{height:58px;padding:0 clamp(22px,4vw,60px);display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand>span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:var(--blue);font:800 14px "Syne",Arial,sans-serif}
.brand strong{font:800 12px "Syne",Arial,sans-serif;letter-spacing:.12em}
.back{padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.08em}
.header-actions{display:flex;align-items:center;gap:8px}.icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;font-size:15px}.icon-button[aria-pressed="false"]{opacity:.5}
.timer-shell{height:calc(100vh - 58px);display:grid;place-items:center;padding:clamp(18px,3vh,32px) clamp(24px,4vw,46px);background:var(--cream)}
.timer-panel{width:min(820px,100%);height:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
h1{max-width:760px;margin:clamp(14px,2.5vh,28px) 0 13px;font-family:"DM Sans",Arial,sans-serif;font-size:clamp(28px,3.55vw,46px);font-weight:700;line-height:1.22;letter-spacing:-.04em}
.save-question{margin:0 0 clamp(20px,3vh,30px);padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;font-size:10px;font-weight:700}.save-question.saved{border-color:var(--orange);color:var(--ink);background:#fff3ef}
.practice-controls{width:100%;display:flex;flex-direction:column;align-items:center;flex:none}
.eyebrow{margin:0 0 12px;color:var(--blue-dark);font-size:8px;font-weight:800;letter-spacing:.16em}
.presets{width:min(440px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.presets button{height:42px;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;font-size:10px;font-weight:800}
.presets button.active{border-color:var(--blue);background:var(--blue)}
.clock-row{width:min(560px,100%);margin:clamp(18px,2.5vh,26px) 0 14px;display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:16px}
.clock-row button{height:42px;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;font-size:10px;font-weight:800}
.clock{text-align:center;font:700 clamp(78px,9vw,112px)/.9 "Syne",Arial,sans-serif;letter-spacing:-.08em}
.track{width:min(500px,100%);height:6px;margin-bottom:20px;overflow:hidden;border-radius:999px;background:rgba(11,27,36,.12)}
.track span{display:block;width:100%;height:100%;border-radius:inherit;background:var(--orange);transition:width 1s linear}
.start{width:min(410px,100%);height:58px;border:0;border-radius:999px;color:var(--ink);background:var(--blue);box-shadow:0 7px 0 var(--blue-dark);cursor:pointer;font:800 12px "Syne",Arial,sans-serif;letter-spacing:.05em}
.reset{margin-top:13px;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:9px}
.timer-note{margin:13px 0 0;color:var(--muted);font-size:9px}
.permission-note{margin:auto 0 6px;padding:12px 18px;border-left:4px solid var(--orange);border-radius:8px;color:var(--muted);background:var(--paper);font-size:13px;line-height:1.5}
.permission-note strong{color:var(--ink);font-size:14px}
.finish-panel{width:min(620px,100%);margin:auto 0;display:flex;flex-direction:column;align-items:center}.finish-panel[hidden]{display:none!important}.finish-panel h2{margin:0 0 12px;font:800 clamp(32px,5vw,50px) "Syne",Arial,sans-serif}.finish-panel label{margin-bottom:8px;font-size:13px;font-weight:700}.finish-panel textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;resize:none;background:var(--paper);font:14px/1.45 "DM Sans",Arial,sans-serif}.save-reflection{margin:10px 0 20px;padding:9px 16px;border:0;border-radius:999px;background:var(--blue);cursor:pointer;font-size:10px;font-weight:800}.finish-actions{width:100%;display:flex;justify-content:center;gap:10px}.finish-actions a,.finish-actions button{min-width:180px;padding:15px 18px;border:0;border-radius:999px;text-decoration:none;cursor:pointer;font:800 10px "Syne",Arial,sans-serif;letter-spacing:.04em}.finish-actions a{color:var(--ink);background:var(--blue);box-shadow:0 5px 0 var(--blue-dark)}.finish-actions button{border:1px solid var(--line);background:var(--paper)}
.timer-panel.urgent .clock{color:var(--orange)}
.timer-panel.done{animation:pulse .55s 2}
@keyframes pulse{50%{transform:scale(1.01)}}
button:focus-visible,.back:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(max-width:600px){body{overflow:auto}.topbar{height:54px;padding:0 14px}.timer-shell{min-height:calc(100vh - 54px);height:auto;padding:28px 18px}.timer-panel{min-height:650px}h1{font-size:32px}.clock{font-size:82px}.back{display:none}.clock-row{grid-template-columns:48px 1fr 48px;gap:8px}.finish-actions{flex-direction:column}.finish-actions a,.finish-actions button{width:100%}}
.save-status{max-width:480px;margin:-10px 0 18px;color:var(--muted);font-size:10px;line-height:1.45}