:root {
  color-scheme: dark;
  --ink: #f4f8fc;
  --muted: #a8b7c8;
  --faint: #72869a;
  --line: rgba(174, 210, 232, .18);
  --panel: rgba(8, 24, 38, .78);
  --blue: #4d91ff;
  --cyan: #7de5e4;
  --mint: #62e0b4;
  --shadow: 0 28px 80px rgba(0, 0, 0, .36);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #07131f; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: #07131f; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 73% 22%, rgba(255,173,152,.18), transparent 25rem), radial-gradient(circle at 16% 12%, rgba(77,145,255,.18), transparent 30rem), linear-gradient(145deg, #0a2032 0%, #0a1725 48%, #111b2b 100%); }
.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmosphere__glow { position: absolute; width: min(58vw, 820px); aspect-ratio: 1; right: -9vw; top: -25vw; border-radius: 50%; background: rgba(255,188,166,.2); filter: blur(70px); }
.atmosphere__horizon { position: absolute; left: -10%; right: -10%; bottom: -32%; height: 67%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(68,108,147,.16), rgba(3,12,20,.7)); transform: rotate(-4deg); }
.atmosphere__grain { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.site-header, .workspace { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand__mark { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 13px; background: #f8fbff; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__name { font-size: 1.02rem; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.toolkit-link, .header-button, .theme-toggle { min-height: 44px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; color: #dce6ef; background: transparent; text-decoration: none; font-weight: 650; cursor: pointer; }
.toolkit-link:hover, .header-button:hover, .theme-toggle:hover { border-color: var(--line); background: rgba(255,255,255,.055); }
.workspace { min-height: calc(100svh - 92px); display: grid; align-items: center; padding: 52px 0; }
.prepare-layout { min-width: 0; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.eyebrow, .step-label { margin: 0 0 18px; color: var(--cyan); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.prepare-intro h1 { margin: 0; max-width: 7ch; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4rem, 8vw, 7.3rem); font-weight: 500; line-height: .88; letter-spacing: -.065em; text-wrap: balance; }
.prepare-intro__copy { max-width: 29rem; margin: 28px 0 34px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.method { display: flex; gap: 10px; padding: 0; margin: 0; list-style: none; color: #c8d3dd; }
.method li { flex: 0 1 120px; border-top: 1px solid var(--line); padding-top: 12px; font-weight: 650; }
.method span { display: block; margin-bottom: 5px; color: var(--faint); font-size: .68rem; letter-spacing: .12em; }
.prepare-card { position: relative; min-width: 0; padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(174,210,232,.2); border-radius: 28px; background: linear-gradient(145deg, rgba(14,37,55,.92), rgba(6,22,35,.84)); box-shadow: var(--shadow); backdrop-filter: blur(26px); }
.prepare-card::before { content: ""; position: absolute; inset: 0 auto auto 38px; width: 130px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.prepare-card__heading h2 { margin: 0; font-size: clamp(1.75rem, 2.35vw, 2.2rem); line-height: 1.08; letter-spacing: -.035em; }
.prepare-card__heading > p:last-child { margin: 12px 0 28px; color: var(--muted); line-height: 1.55; }
.field-label, .choice-group legend { display: block; padding: 0; margin: 0 0 10px; color: #dce7f0; font-size: .88rem; font-weight: 750; }
.task-field { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(3,14,24,.54); }
.task-field:focus-within { border-color: rgba(98,224,180,.66); box-shadow: 0 0 0 4px rgba(98,224,180,.1); }
.task-field span { color: var(--mint); }
.task-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1rem; }
.task-field input::placeholder { color: #718295; }
.field-error { margin: 9px 0 0; color: #ffc0b2; font-size: .86rem; }
.choice-group { min-width: 0; padding: 0; margin: 24px 0 0; border: 0; }
.segmented, .duration-grid { display: grid; gap: 8px; }
.segmented { grid-template-columns: repeat(2, 1fr); }
.duration-grid { grid-template-columns: repeat(5, 1fr); }
.segmented input, .duration-grid input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span, .duration-grid span { min-height: 48px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; color: #bac8d5; background: rgba(9,25,39,.64); cursor: pointer; font-size: .9rem; font-weight: 700; }
.segmented input:checked + span, .duration-grid input:checked + span { border-color: rgba(77,145,255,.85); color: white; background: linear-gradient(135deg, #3986ff, #315bf5); box-shadow: 0 8px 24px rgba(49,91,245,.25); }
.segmented input:focus-visible + span, .duration-grid input:focus-visible + span { outline: 3px solid rgba(125,229,228,.5); outline-offset: 2px; }
.cycle-note { margin-top: 12px; padding: 13px 15px; border: 1px solid rgba(125,229,228,.13); border-radius: 12px; color: #adc4d2; background: rgba(125,229,228,.05); font-size: .86rem; line-height: 1.5; }
.custom-duration { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); }
.custom-duration input { width: 100px; min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; color: var(--ink); background: rgba(3,14,24,.54); }
.custom-error { margin-bottom: 0; }
.primary-action { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 28px; border: 0; border-radius: 15px; color: white; background: linear-gradient(120deg, #4db7ff, #315cf5 72%); box-shadow: 0 14px 34px rgba(49,92,245,.3); font-weight: 800; cursor: pointer; }
.primary-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-action:focus-visible, .toolkit-link:focus-visible, .header-button:focus-visible, .theme-toggle:focus-visible { outline: 3px solid rgba(125,229,228,.62); outline-offset: 3px; }
.prepare-utility { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.sound-toggle { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(174,210,232,.14); border-radius: 999px; color: #93a6b7; background: rgba(4,18,29,.34); font-size: .75rem; font-weight: 700; cursor: pointer; }
.sound-toggle:hover { color: #dce7ef; border-color: var(--line); background: rgba(255,255,255,.05); }
.sound-toggle:focus-visible { outline: 3px solid rgba(125,229,228,.5); outline-offset: 2px; }
.audio-note { margin: 0; color: var(--faint); font-size: .75rem; line-height: 1.45; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.button { min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 13px; font-weight: 760; cursor: pointer; }
.button--quiet { color: #d6e1eb; background: rgba(255,255,255,.05); }
.button--quiet:hover { background: rgba(255,255,255,.09); }
.button--danger { color: #fff2ee; border-color: rgba(255,154,130,.24); background: rgba(185,75,61,.24); }
.button--primary { color: white; border: 0; background: linear-gradient(120deg, #4db7ff, #315cf5); }
.button:focus-visible, .round-control:focus-visible, .distraction-viewer__trigger:focus-visible { outline: 3px solid rgba(125,229,228,.62); outline-offset: 3px; }

body[data-scene="focus"] .app-shell { background: radial-gradient(circle at 73% 26%, rgba(77,145,255,.13), transparent 28rem), linear-gradient(145deg, #071b2a 0%, #06131f 55%, #091723 100%); }
body[data-scene="break"] .app-shell { background: radial-gradient(circle at 72% 20%, rgba(255,179,149,.34), transparent 28rem), radial-gradient(circle at 21% 78%, rgba(87,117,218,.22), transparent 30rem), linear-gradient(150deg, #17283c, #38344a 58%, #152437); }
body[data-scene="complete"] .app-shell { background: radial-gradient(circle at 50% 23%, rgba(98,224,180,.2), transparent 26rem), linear-gradient(150deg, #0b2630, #071824 62%, #08131f); }
body[data-scene="focus"] .site-header, body[data-scene="break"] .site-header { min-height: 72px; border-color: transparent; opacity: .7; }
body[data-scene="focus"] .brand__name, body[data-scene="focus"] .toolkit-link, body[data-scene="break"] .brand__name, body[data-scene="break"] .toolkit-link { opacity: .65; }
body[data-scene="focus"] .workspace, body[data-scene="break"] .workspace { min-height: calc(100svh - 72px); padding-block: 18px 34px; }

.timer-stage { width: min(100%, 690px); margin: auto; display: grid; justify-items: center; text-align: center; }
.stage-heading { justify-self: stretch; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; text-align: left; }
.stage-heading h1 { margin: 0; font-size: 1.8rem; letter-spacing: -.03em; }
.stage-heading__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; color: #c5d3df; font-size: .88rem; font-weight: 700; order: 2; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px rgba(98,224,180,.72); }
.timer-stage--break .status-dot { background: #ffb49c; box-shadow: 0 0 16px rgba(255,180,156,.72); }
.timer-ring { --angle: 360deg; width: clamp(292px, 54vh, 510px); aspect-ratio: 1; display: grid; place-items: center; margin: 8px 0 24px; border-radius: 50%; background: conic-gradient(from 0deg, var(--mint) var(--angle), rgba(151,190,214,.13) 0); box-shadow: 0 0 70px rgba(49,127,158,.09); }
.timer-stage--break .timer-ring { background: conic-gradient(from 0deg, #8fb2ff var(--angle), rgba(255,255,255,.14) 0); box-shadow: 0 0 90px rgba(255,173,147,.18); }
.timer-ring__inside { width: calc(100% - 18px); height: calc(100% - 18px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 36%, rgba(25,62,79,.8), rgba(3,15,24,.96) 70%); box-shadow: inset 0 0 65px rgba(87,179,195,.09); }
.timer-stage--break .timer-ring__inside { background: radial-gradient(circle at 50% 35%, rgba(255,186,162,.22), rgba(22,34,53,.82) 62%, rgba(14,25,40,.95)); }
.timer-output { font-size: clamp(4rem, 11vw, 7.8rem); font-variant-numeric: tabular-nums; font-weight: 250; line-height: .95; letter-spacing: -.07em; text-shadow: 0 12px 45px rgba(0,0,0,.35); }
.timer-task { max-width: 30ch; margin: 20px 24px 0; color: #f4f8fc; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 680; line-height: 1.4; }
.break-copy { margin: 20px 24px 0; color: #fff6f1; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 700; }
.break-copy span { display: block; margin-top: 7px; color: #d5cad0; font-size: .86rem; font-weight: 500; }
.paused-label { margin-top: 15px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: #bdd0df; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.timer-controls { display: flex; justify-content: center; gap: clamp(18px, 5vw, 38px); }
.round-control { width: 76px; min-height: 90px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; }
.round-control > span { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(180,214,232,.25); border-radius: 50%; color: #eff8ff; background: rgba(8,27,42,.8); box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: 1.35rem; }
.round-control--accent > span { color: #071a25; border-color: transparent; background: linear-gradient(135deg, #a2f0dc, #55d8ad); }
.round-control small { color: #b7c6d2; font-size: .78rem; }
.distraction-viewer { width: min(100%, 420px); min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 20px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; color: #dce8f0; background: rgba(4,18,29,.58); }
.distraction-viewer__trigger { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; font-weight: 650; cursor: pointer; }
.distraction-viewer__trigger > span:first-child { color: var(--mint); }
.distraction-viewer__count { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: #092033; background: var(--mint); font-size: .78rem; }

.transition-card, .completion-card { width: min(100%, 690px); margin: auto; padding: clamp(28px, 6vw, 64px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, rgba(14,37,55,.91), rgba(6,22,35,.86)); box-shadow: var(--shadow); text-align: center; backdrop-filter: blur(24px); }
.transition-card h1, .completion-card > h1 { margin: 10px 0 14px; font-size: clamp(2.35rem, 6vw, 4.7rem); line-height: 1; letter-spacing: -.055em; }
.transition-card--break-ready { width: min(100%, 620px); padding-block: clamp(30px, 5vw, 52px); }
.transition-card--break-ready .completion-mark { width: 60px; height: 60px; margin-bottom: 18px; font-size: 1.7rem; }
.transition-card--break-ready h1 { max-width: 16ch; margin: 8px auto 12px; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.12; letter-spacing: -.025em; }
.transition-card--break-ready .transition-action { margin-top: 24px; }
.finished-card .button { min-width: min(100%, 220px); margin-top: 24px; }
.transition-card > p:not(.step-label), .completion-card > p:not(.step-label) { margin: 0 auto; max-width: 34rem; color: var(--muted); font-size: 1.04rem; line-height: 1.6; }
.completion-card > p strong { color: var(--ink); }
.completion-mark { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; color: #062119; background: linear-gradient(135deg, #a4f1d7, #52d8a8); box-shadow: 0 0 50px rgba(82,216,168,.22); font-size: 2.2rem; font-weight: 850; }
.transition-action { width: min(100%, 330px); margin: 30px auto 0; }
.captures-review { margin-top: 34px; border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: rgba(3,15,24,.48); text-align: left; }
.captures-review h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 1rem; }
.captures-review h2 span { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: #082033; background: var(--mint); font-size: .75rem; }
.capture-list { padding: 0; margin: 0; list-style: none; }
.capture-list li { padding: 10px 0; border-top: 1px solid rgba(174,210,232,.1); color: #d0dce6; }
.empty-captures { margin: 0; color: var(--muted); line-height: 1.5; }
.completion-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.completion-actions .primary-action { margin: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.summary-grid--two { grid-template-columns: repeat(2, 1fr); }
.summary-grid div { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; background: rgba(4,18,29,.85); }
.summary-grid strong { font-size: 1.65rem; }
.summary-grid span { margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.what-now { margin: 28px 0 0; font-size: 1.25rem; }

.dialog { width: min(calc(100% - 30px), 500px); padding: 0; border: 1px solid rgba(174,210,232,.22); border-radius: 24px; color: var(--ink); background: #0a1c2b; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.dialog::backdrop { background: rgba(1,8,14,.74); backdrop-filter: blur(8px); }
.dialog form { position: relative; padding: 30px; }
.dialog h2 { margin: 0 0 12px; font-size: 1.7rem; letter-spacing: -.035em; }
.dialog form > p:not(.step-label) { margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.dialog input { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 13px; padding: 0 15px; outline: 0; color: var(--ink); background: rgba(2,13,21,.62); font-size: 1rem; }
.dialog input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(98,224,180,.1); }
.dialog__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.5rem; cursor: pointer; }
.dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; color: #eaf4fb; background: rgba(5,20,31,.94); box-shadow: 0 14px 42px rgba(0,0,0,.35); font-size: .88rem; }

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #132b3b;
  --muted: #52697a;
  --faint: #5b7180;
  --line: rgba(43, 78, 101, .2);
  --panel: rgba(250, 252, 253, .82);
  --cyan: #087d86;
  --mint: #28ad84;
  --shadow: 0 28px 80px rgba(41, 65, 82, .16);
}
:root[data-theme="light"], :root[data-theme="light"] body { background: #e9eff3; }
:root[data-theme="light"] .app-shell { background: radial-gradient(circle at 75% 18%, rgba(239,177,157,.36), transparent 27rem), radial-gradient(circle at 12% 10%, rgba(80,145,218,.2), transparent 31rem), linear-gradient(145deg, #eef4f7 0%, #e5edf2 50%, #edf0f2 100%); }
:root[data-theme="light"] .atmosphere__glow { background: rgba(239,174,154,.3); }
:root[data-theme="light"] .atmosphere__horizon { background: linear-gradient(180deg, rgba(89,132,169,.1), rgba(185,204,216,.55)); }
:root[data-theme="light"] .site-header { border-color: rgba(43,78,101,.17); }
:root[data-theme="light"] .toolkit-link, :root[data-theme="light"] .header-button, :root[data-theme="light"] .theme-toggle { color: #29495d; }
:root[data-theme="light"] .brand__name { color: #19384b; }
:root[data-theme="light"] body[data-scene="focus"] .site-header, :root[data-theme="light"] body[data-scene="break"] .site-header { opacity: .9; }
:root[data-theme="light"] body[data-scene="focus"] .brand__name, :root[data-theme="light"] body[data-scene="focus"] .toolkit-link, :root[data-theme="light"] body[data-scene="break"] .brand__name, :root[data-theme="light"] body[data-scene="break"] .toolkit-link { opacity: .95; }
:root[data-theme="light"] .toolkit-link:hover, :root[data-theme="light"] .header-button:hover, :root[data-theme="light"] .theme-toggle:hover { background: rgba(255,255,255,.58); }
:root[data-theme="light"] .method { color: #38566a; }
:root[data-theme="light"] .prepare-card, :root[data-theme="light"] .transition-card, :root[data-theme="light"] .completion-card { border-color: rgba(43,78,101,.19); background: linear-gradient(145deg, rgba(253,254,255,.9), rgba(238,244,247,.86)); }
:root[data-theme="light"] .field-label, :root[data-theme="light"] .choice-group legend { color: #29485b; }
:root[data-theme="light"] .task-field, :root[data-theme="light"] .custom-duration input { background: rgba(255,255,255,.66); }
:root[data-theme="light"] .field-error { color: #a23f2e; }
:root[data-theme="light"] .segmented span, :root[data-theme="light"] .duration-grid span { color: #405c6e; background: rgba(247,250,252,.82); }
:root[data-theme="light"] .task-field input::placeholder { color: #627887; }
:root[data-theme="light"] .segmented input:checked + span, :root[data-theme="light"] .duration-grid input:checked + span { color: white; border-color: rgba(49,91,245,.72); background: linear-gradient(135deg, #2472e8, #315bf5); }
:root[data-theme="light"] .primary-action { background: linear-gradient(120deg, #2472e8, #315bf5 72%); }
:root[data-theme="light"] .cycle-note { color: #3f6571; background: rgba(8,125,134,.06); border-color: rgba(8,125,134,.2); }
:root[data-theme="light"] .sound-toggle { color: #526b7a; background: rgba(255,255,255,.48); border-color: rgba(43,78,101,.16); }
:root[data-theme="light"] .sound-toggle:hover { color: #19394d; background: rgba(255,255,255,.78); }
:root[data-theme="light"] .button--quiet { color: #29495d; background: rgba(255,255,255,.48); }
:root[data-theme="light"] .button--quiet:hover { background: rgba(255,255,255,.78); }
:root[data-theme="light"] .button--danger { color: #7a2d24; border-color: rgba(153,65,52,.28); background: rgba(199,105,88,.16); }
:root[data-theme="light"] body[data-scene="focus"] .app-shell { background: radial-gradient(circle at 73% 25%, rgba(60,135,212,.16), transparent 29rem), linear-gradient(145deg, #eef4f7, #e3edf2 58%, #eaf1f4); }
:root[data-theme="light"] body[data-scene="break"] .app-shell { background: radial-gradient(circle at 72% 18%, rgba(232,154,129,.3), transparent 28rem), radial-gradient(circle at 20% 78%, rgba(109,132,207,.15), transparent 30rem), linear-gradient(150deg, #f2eceb, #e8e9f0 58%, #e7eef2); }
:root[data-theme="light"] body[data-scene="complete"] .app-shell { background: radial-gradient(circle at 50% 22%, rgba(40,173,132,.14), transparent 27rem), linear-gradient(150deg, #edf5f3, #e6eff1 62%, #e9eff3); }
:root[data-theme="light"] .stage-heading__eyebrow { color: #3e5a6d; }
:root[data-theme="light"] .timer-ring { background: conic-gradient(from 0deg, #28ad84 var(--angle), rgba(62,104,128,.15) 0); box-shadow: 0 0 70px rgba(38,112,135,.1); }
:root[data-theme="light"] .timer-stage--break .timer-ring { background: conic-gradient(from 0deg, #557dd8 var(--angle), rgba(63,86,111,.14) 0); box-shadow: 0 0 80px rgba(208,136,113,.16); }
:root[data-theme="light"] .timer-ring__inside { background: radial-gradient(circle at 50% 36%, rgba(228,245,242,.98), rgba(239,247,248,.98) 68%, rgba(224,235,240,.98)); box-shadow: inset 0 0 60px rgba(52,130,148,.08); }
:root[data-theme="light"] .timer-stage--break .timer-ring__inside { background: radial-gradient(circle at 50% 35%, rgba(252,225,216,.96), rgba(241,238,241,.98) 62%, rgba(225,234,240,.98)); }
:root[data-theme="light"] .timer-output { color: #173448; text-shadow: 0 12px 38px rgba(72,96,111,.14); }
:root[data-theme="light"] .timer-task, :root[data-theme="light"] .break-copy { color: #19384b; }
:root[data-theme="light"] .break-copy span, :root[data-theme="light"] .round-control small { color: #5b6f7c; }
:root[data-theme="light"] .paused-label { color: #345669; background: rgba(255,255,255,.46); }
:root[data-theme="light"] .round-control > span { color: #24475c; border-color: rgba(43,78,101,.22); background: rgba(250,252,253,.82); box-shadow: 0 12px 28px rgba(49,76,94,.12); }
:root[data-theme="light"] .round-control--accent > span { color: #09251d; background: linear-gradient(135deg, #9ce7d2, #45c799); }
:root[data-theme="light"] .distraction-viewer, :root[data-theme="light"] .captures-review { color: #27495c; background: rgba(249,252,253,.7); }
:root[data-theme="light"] .capture-list li { color: #405d6e; border-color: rgba(43,78,101,.12); }
:root[data-theme="light"] .summary-grid div { background: rgba(248,251,252,.88); }
:root[data-theme="light"] .dialog { color: var(--ink); background: #f2f6f8; border-color: rgba(43,78,101,.22); box-shadow: 0 30px 90px rgba(37,55,68,.3); }
:root[data-theme="light"] .dialog::backdrop { background: rgba(24,42,54,.42); }
:root[data-theme="light"] .dialog input { background: rgba(255,255,255,.76); }
:root[data-theme="light"] .toast { color: #f2f8fb; background: rgba(25,52,68,.94); }

@media (min-width: 1200px) {
  .prepare-card__heading h2 { white-space: nowrap; }
}
@media (max-width: 820px) {
  .site-header, .workspace { width: min(100% - 28px, 620px); }
  .site-header { min-height: 76px; }
  .prepare-layout { grid-template-columns: 1fr; gap: 34px; }
  .prepare-intro h1 { max-width: none; font-size: clamp(3.5rem,16vw,5.4rem); }
  .prepare-intro__copy { margin: 22px 0; }
  .method { display: none; }
  .workspace { align-items: start; padding: 34px 0 48px; }
}
@media (max-width: 540px) {
  .brand__name { font-size: .94rem; }
  .site-header__actions { gap: 2px; }
  .toolkit-link, .header-button, .theme-toggle { padding-inline: 9px; }
  .theme-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .prepare-intro h1 { font-size: 3.7rem; }
  .prepare-card { padding: 24px 18px; border-radius: 22px; }
  .prepare-utility { flex-direction: column; gap: 7px; }
  .duration-grid { grid-template-columns: repeat(3, 1fr); }
  .duration-grid label:last-child { grid-column: span 2; }
  .timer-stage { min-height: calc(100svh - 105px); align-content: center; }
  .stage-heading { width: 100%; padding-inline: 4px; }
  .timer-ring { width: min(78vw, 380px); margin-block: 10px 18px; }
  .timer-output { font-size: clamp(3.75rem, 19vw, 5.7rem); }
  .timer-task { margin-top: 15px; font-size: .96rem; }
  .round-control { min-height: 82px; }
  .round-control > span { width: 56px; height: 56px; }
  .distraction-viewer { margin-top: 14px; }
  .transition-card, .completion-card { padding: 30px 20px; border-radius: 24px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid div { min-height: 84px; }
  .completion-actions, .dialog__actions { grid-template-columns: 1fr; }
  .completion-actions .button--quiet { order: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }