:root{color-scheme:light dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #f4f0e8;--surface: #fffaf1;--text: #202322;--muted: #656a66;--line: rgba(32, 35, 34, .18);--accent: #e5553f;--accent-text: #fffaf7;--area-empty: #e4dddd;--fill: #e7656c;--fill-edge: #ffc1c4;--shadow: 0 16px 50px rgba(50, 43, 32, .16)}:root[data-theme=dark]{--bg: #151718;--surface: #1d2021;--text: #f1ede4;--muted: #a7aca8;--line: rgba(241, 237, 228, .18);--accent: #f06b55;--accent-text: #171818;--area-empty: #2b2223;--fill: #e7656c;--fill-edge: #ffc1c4;--shadow: 0 16px 50px rgba(0, 0, 0, .38)}@media(prefers-color-scheme:dark){:root[data-theme=system]{--bg: #151718;--surface: #1d2021;--text: #f1ede4;--muted: #a7aca8;--line: rgba(241, 237, 228, .18);--accent: #f06b55;--accent-text: #171818;--area-empty: #2b2223;--fill: #e7656c;--fill-edge: #ffc1c4;--shadow: 0 16px 50px rgba(0, 0, 0, .38)}}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{min-width:320px;min-height:100svh;overflow:hidden;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text)}button{padding:.65rem 1rem;cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:hover{border-color:var(--accent)}button.primary,button.selected{border-color:var(--accent);background:var(--accent);color:var(--accent-text)}#app{position:relative;min-height:100svh;background:var(--bg)}.timer-pane,.area-pane{position:relative;min-width:0;min-height:0;overflow:hidden}.timer-pane{position:absolute;z-index:2;inset:0;container-type:size;padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}.time{position:absolute;z-index:2;top:50%;left:50%;padding:.08em .18em .14em;border:1px solid rgba(255,255,255,.2);border-radius:.2em;background:#0a0d0cc7;box-shadow:0 .08em .35em #0000004d;color:#fff;font-size:clamp(4rem,min(22cqi,36cqb),15rem);font-weight:650;font-variant-numeric:tabular-nums;line-height:.9;letter-spacing:-.07em;white-space:nowrap;transform:translate(-50%,-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.idle-controls{position:absolute;z-index:3;bottom:max(1.25rem,env(safe-area-inset-bottom));left:50%;display:grid;gap:.8rem;width:min(calc(100% - 2.5rem),34rem);padding:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:1.25rem;background:#0a0d0cc7;color:#fff;box-shadow:var(--shadow);transform:translate(-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.presets,.adjustments{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}.start{width:100%;font-size:1.1rem}.settings-toggle{position:absolute;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right))}.settings-panel{position:absolute;z-index:5;top:calc(max(1rem,env(safe-area-inset-top)) + 3.3rem);right:max(1rem,env(safe-area-inset-right));width:min(22rem,calc(100% - 2rem));padding:3.5rem 1rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:1.25rem;background:#0a0d0cc7;color:#fff;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.settings-close{position:absolute;top:.65rem;right:.65rem;width:44px;min-height:44px;padding:0;font-size:1.6rem;line-height:1}.settings-panel h2{position:absolute;top:1rem;left:1rem;margin:0;font-size:1.05rem;line-height:1.5}.settings-panel label{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:1rem}.settings-panel input{width:1.4rem;height:1.4rem;accent-color:var(--accent)}.settings-panel select{padding:0 .8rem}.settings-note{margin:.5rem 0 0;color:#ffffffb8;font-size:.85rem}.area-pane{position:absolute;z-index:1;inset:0;background:var(--bg)}.remaining-area{position:absolute;inset:auto 0 0;width:100%;height:var(--remaining, 100%);background:var(--bg);box-shadow:none;transition:height .24s linear,width .24s linear}#app[data-status=running] .area-pane,#app[data-status=paused] .area-pane,#app[data-status=finished] .area-pane{background:var(--area-empty)}#app[data-status=running] .remaining-area,#app[data-status=paused] .remaining-area,#app[data-status=finished] .remaining-area{background:var(--fill);box-shadow:inset 0 5px 0 var(--fill-edge)}.run-overlay{position:absolute;z-index:4;bottom:max(1.25rem,env(safe-area-inset-bottom));left:50%;grid-template-columns:repeat(2,minmax(7.5rem,10rem));gap:.8rem;padding:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:1.25rem;background:#0a0d0cc7;box-shadow:var(--shadow);transform:translate(-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.run-overlay:not([hidden]){display:grid}.finished-controls{position:absolute;z-index:3;bottom:max(2rem,env(safe-area-inset-bottom));left:50%;width:min(calc(100% - 2.5rem),21rem);padding:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:1.25rem;background:#0a0d0cc7;color:#fff;text-align:center;box-shadow:var(--shadow);transform:translate(-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.finished-controls p{margin:0 0 1rem;font-size:1.35rem}.finished-controls button{width:100%}#app[data-status=running],#app[data-status=paused]{cursor:pointer}#app[data-status=running] .time,#app[data-status=paused] .time,#app[data-status=finished] .time{font-size:clamp(4rem,min(31cqi,72cqb),24rem)}[hidden]{display:none!important}@media(orientation:landscape){.remaining-area{inset:0 auto 0 0;width:var(--remaining, 100%);height:100%}#app[data-status=running] .remaining-area,#app[data-status=paused] .remaining-area,#app[data-status=finished] .remaining-area{box-shadow:inset -5px 0 0 var(--fill-edge)}}@media(max-width:560px){.timer-pane{padding:1rem}.idle-controls{gap:.5rem}.presets,.adjustments{gap:.35rem}button{padding-inline:.6rem}}@media(prefers-reduced-motion:reduce){.remaining-area{transition:none}}