@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courier+Prime:wght@400;700&family=DM+Sans:wght@400;450;500;550;600;650;700&family=DM+Serif+Display:ital@0;1&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Nunito:wght@400..900&display=swap');

:root { color-scheme: light; --page:#fbf8ef; --card:#fffdf7; --ink:#593b29; --muted:#806855; --border:#e9dfcc; --accent:#f5d576; --accent-strong:#e7bc51; --scene:#f8edca; --soft:#f7efdc; --button:#644431; --button-text:#fff9ec; --glow:#f3dfaa; --font-body:'DM Sans',sans-serif; --font-serif:'DM Serif Display',Georgia,serif; --font-clock:var(--font-body); --clock-weight:450; --clock-tracking:-.075em; font-family:var(--font-body); color:var(--ink); background:var(--page); }
:root[data-theme="strawberry"] { --page:#fff7f5; --card:#fffdfb; --ink:#6d3f45; --muted:#88616b; --border:#efdbdc; --accent:#efb3ba; --accent-strong:#da8898; --scene:#f9e0df; --soft:#fbeaec; --button:#824f5d; --glow:#f6c9ce; }
:root[data-theme="matcha"] { --page:#f5f7ef; --card:#fdfef8; --ink:#41533c; --muted:#63705b; --border:#dfe5d3; --accent:#c4d4a0; --accent-strong:#9caf7c; --scene:#e4ebd4; --soft:#edf2e3; --button:#526b46; --glow:#d1dfb6; }
:root[data-theme="moonlight"] { color-scheme:dark; --page:#27283e; --card:#33344e; --ink:#f6ecdc; --muted:#bdb9d1; --border:#4b4b68; --accent:#b5abd8; --accent-strong:#c1b3e6; --scene:#3d3c5b; --soft:#42405e; --button:#d0bff0; --button-text:#35304d; --glow:#514d76; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
/* The page color lives on :root so these fixed layers can sit between the canvas and the content. */
body { margin:0; }
/* Two fixed layers behind the page: a themed backdrop (gradients, patterns) and a repeating official line-art motif. */
body::before,body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; }
body::before { background:var(--backdrop,none); }
body::after { background-image:var(--motif,none); background-size:var(--motif-size,320px 320px); background-position:var(--motif-position,0 0); opacity:var(--motif-opacity,0); filter:var(--motif-filter,none); mix-blend-mode:var(--motif-blend,normal); }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
button,a,input { touch-action:manipulation; }
button { transition:background .18s,border-color .18s,transform .18s; }
button:active { transform:translateY(1px); }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--accent-strong); outline-offset:4px; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
h1,h2,p { margin-top:0; }
.page-shell { max-width:1500px; padding:0 48px; margin:auto; }
.site-header { display:flex; align-items:center; gap:24px; height:92px; }
.wordmark { display:flex; gap:9px; align-items:center; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-.7px; font-size:22px; }
.wordmark img { width:40px; height:40px; }
.wordmark-light { font-weight:450; }
.wordmark-dot { color:var(--accent-strong); }
.header-note { margin:auto; font-size:11px; color:var(--muted); letter-spacing:.5px; }
.header-note span { display:none; }
.tools { display:flex; gap:8px; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); background:transparent; border-radius:50%; }
.icon-button:hover,.reset-button:hover { background:var(--soft); }
.timer-card { position:relative; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; padding:23px 0 34px; }
.timer-content { container-type:inline-size; display:flex; flex-direction:column; min-width:0; align-items:flex-start; padding:24px 0 45px; }
.timer-face { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.status-pill { order:3; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin:0 0 30px 5px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent-strong); }
[data-status="running"] .status-dot { animation:breathe 2s infinite; }
.intention-label { margin:0 0 12px 5px; font-size:10px; letter-spacing:2px; font-weight:600; color:var(--muted); }
.intention { border:0; background:transparent; color:var(--ink); width:100%; padding:3px 5px; border-radius:4px; font-family:var(--font-serif); font-weight:400; font-size:clamp(20px,4.5cqi,30px); }
.intention::placeholder { color:var(--ink); opacity:1; }
.time-display { font-family:var(--font-clock); font-size:clamp(90px,32cqi,240px); font-weight:var(--clock-weight); letter-spacing:var(--clock-tracking); line-height:1.18; font-variant-numeric:tabular-nums; white-space:nowrap; margin:9px 0 0 -6px; color:var(--ink); min-height:1.18em; }
.time-display span { font-weight:400; opacity:.42; }
.time-display.long-duration { font-size:clamp(52px,21cqi,157px); min-height:1.8em; display:flex; align-items:center; }
.presets { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:5px; border:1px solid var(--border); border-radius:100px; }
.presets button { border:0; min-height:40px; padding:9px 16px; border-radius:40px; background:transparent; color:var(--muted); font-size:12px; }
.presets button:hover { background:var(--soft); }
.presets button[aria-pressed="true"] { background:var(--ink); color:var(--page); }
.presets button span { margin-left:3px; }
.timer-actions { display:flex; align-items:center; gap:13px; margin-top:22px; width:100%; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:12px; min-height:58px; min-width:230px; padding:15px 27px; border:0; border-radius:40px; background:var(--button); color:var(--button-text); font-size:15px; font-weight:600; }
.primary-button:hover { filter:brightness(1.07); }
.primary-button .icon { width:19px; height:19px; }
.reset-button { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:transparent; border:1px solid var(--border); }
.progress-row { display:flex; flex-direction:column; align-items:flex-start; gap:11px; width:100%; max-width:310px; margin:27px 0 0 5px; }
.progress-track { height:3px; background:var(--border); width:100%; border-radius:4px; overflow:hidden; }
#progress-fill { width:0; height:100%; background:var(--accent-strong); transition:width .2s linear; }
#progress-caption { font-size:11px; color:var(--muted); }
.scene { min-width:0; margin:0; }
.scene-art-window { position:relative; width:100%; max-width:calc(640px * var(--art-ratio)); aspect-ratio:var(--art-ratio); margin:auto; overflow:hidden; }
/* --art-zoom and --art-x-shift trim side margins the same way --art-ratio and --art-shift trim the top and bottom. */
.scene-art { position:absolute; inset:0 auto auto 0; width:calc(100% * var(--art-zoom,1)); height:auto; display:block; transform:translate(var(--art-x-shift,0%),var(--art-shift)); }
.scene-caption { margin:17px 0 0; text-align:center; font-family:var(--font-serif); font-style:italic; color:var(--muted); font-size:18px; }
.theme-section { border-top:1px solid var(--border); padding-top:23px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; }
.section-heading h2 { font-size:13px; font-weight:600; margin:0; }
.section-heading>span { color:var(--muted); font-size:11px; }
.collection-heading { display:flex; align-items:baseline; gap:8px; margin:0 0 10px 7px; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.3px; }
.collection-heading span { font-weight:400; opacity:.75; }
.collection-heading span::before { content:'·'; margin-right:8px; }
.theme-list+.collection-heading { margin-top:22px; }
.theme-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.theme-option { position:relative; display:flex; align-items:center; gap:10px; min-width:0; padding:7px; text-align:left; border:1px solid transparent; border-radius:15px; background:transparent; }
.theme-option:hover { background:var(--soft); }
.theme-option[aria-pressed="true"] { background:var(--card); border-color:var(--accent-strong); }
.theme-preview { position:relative; display:block; flex-shrink:0; width:54px; height:58px; background:transparent; }
.theme-preview img { width:100%; height:100%; display:block; object-fit:contain; }
/* Gallery swatches preview each theme's palette behind the character. */
.gallery-list .theme-preview { border-radius:14px; overflow:hidden; background:var(--swatch,var(--soft)); }
.gallery-list .theme-preview img { padding:6px; }
.theme-text strong { display:block; font-size:11px; line-height:1.4; font-weight:600; }
.theme-text small,.theme-check { display:none; }
.classic-themes { margin-top:15px; }
.classic-themes summary { width:fit-content; padding:7px 0; font-size:11px; color:var(--muted); cursor:pointer; }
.classic-themes summary span { margin-left:6px; opacity:.7; }
.classic-themes[open] summary { margin-bottom:12px; }
.classic-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 0; color:var(--muted); font-size:10px; }
footer p { margin:0; display:flex; align-items:center; gap:7px; }
footer .icon { width:12px; height:12px; }
kbd { border:1px solid var(--border); border-radius:4px; padding:3px 5px; font-family:inherit; font-size:9px; }
.keyboard-hints span { margin:0 5px; }
.fan-note { font-size:9px; }
.completion { margin-top:22px; width:100%; max-width:520px; display:flex; align-items:center; gap:14px; padding:17px 20px; background:var(--card); border:1px solid var(--accent-strong); box-shadow:0 8px 32px #0001; border-radius:18px; z-index:2; }
.completion>span { font-size:26px; color:var(--accent-strong); }
.completion strong { font-size:14px; }
.completion p { font-size:11px; margin:4px 0 0; color:var(--muted); }
.completion button,.close-button { display:grid; place-items:center; flex-shrink:0; min-width:44px; min-height:44px; margin-left:auto; background:none; border:0; font-size:24px; }
.eyebrow { font-size:10px; letter-spacing:1.6px; color:var(--muted); }
@keyframes breathe { 50% { opacity:.35; } }
@media(min-width:1500px) { .timer-card { padding:35px 0 45px; } }
@media(max-width:1100px) {
 .page-shell { padding:0 30px; }
 .timer-card { gap:30px; }
 .presets { gap:2px; }
 .presets button { padding:9px 12px; }
 .theme-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .theme-option { gap:12px; }
 .theme-preview { width:48px; height:49px; }
 .keyboard-hints { display:none; }
}
@media(max-width:760px) {
 .page-shell { max-width:600px; padding:0 24px; }
 .site-header { height:77px; gap:10px; }
 .wordmark { font-size:21px; gap:6px; }
 .wordmark img { width:35px; height:35px; }
 .header-note { display:none; }
 .tools { margin-left:auto; gap:5px; }
 .icon-button { width:40px; height:40px; }
 .timer-card { grid-template-columns:1fr; gap:35px; padding:24px 0 28px; }
 .timer-content { padding:0; align-items:center; }
 .timer-face { align-items:center; }
 .intention-label { font-size:9px; margin:0 0 10px; }
 .intention { text-align:center; font-size:25px; }
 .time-display { margin:8px 0 0; font-size:32cqi; }
 .time-display.long-duration { font-size:21cqi; }
 .status-pill { margin:0 0 23px; }
 .presets { padding:4px; gap:2px; }
 .presets button { padding:8px 12px; min-height:40px; font-size:11px; }
 .timer-actions { justify-content:center; margin-top:18px; }
 .primary-button { min-width:220px; min-height:56px; }
 .reset-button { width:56px; height:56px; }
 .progress-row { align-items:center; max-width:265px; margin:23px 0 0; }
 .scene-art-window { max-width:420px; }
 .scene-caption { font-size:16px; margin-top:14px; }
 .section-heading>span,.collection-heading span { display:none; }
 .theme-list { gap:7px; }
 .theme-option { flex-direction:column; gap:8px; padding:7px 4px; text-align:center; }
 .theme-preview { width:100%; height:90px; }
 .theme-text strong { font-size:10px; }
 .classic-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .classic-list .theme-option { flex-direction:row; text-align:left; gap:9px; }
 .classic-list .theme-preview { width:48px; height:48px; }
 footer { flex-wrap:wrap; justify-content:center; gap:12px; font-size:9px; }
 .fan-note { width:100%; justify-content:center; font-size:8px; }
 .completion { padding:12px; }
}
@media(max-width:365px) {
 .page-shell { padding:0 16px; }
 .site-header { height:70px; }
 .wordmark { font-size:19px; }
 .wordmark img { width:30px; height:30px; }
 .icon-button { width:37px; height:37px; }
 .intention { font-size:22px; }
 .presets button { padding:8px 9px; font-size:10px; }
 .primary-button { min-width:205px; padding:15px 20px; font-size:13px; }
 .timer-actions { gap:9px; }
 .scene-caption { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
dialog { width:min(460px,calc(100% - 32px)); padding:28px; border:1px solid var(--border); border-radius:24px; background:var(--card); color:var(--ink); box-shadow:0 20px 80px #0002; }dialog::backdrop { background:#241c2a70; backdrop-filter:blur(5px); }.dialog-heading { display:flex; align-items:center; }.dialog-heading .eyebrow { margin:0; font-size:9px; }dialog h2 { font-family:var(--font-serif); font-size:31px; font-weight:400; margin:22px 0 8px; }dialog p { font-size:12px; color:var(--muted); }.duration-fields { display:flex; align-items:center; gap:12px; margin:25px 0 8px; }.duration-fields label { flex:1; min-width:0; font-size:10px; color:var(--muted); }.duration-fields input { display:block; width:100%; margin-top:8px; background:var(--soft); border:1px solid var(--border); border-radius:10px; color:var(--ink); padding:13px 5px; text-align:center; font-size:27px; font-variant-numeric:tabular-nums; }.duration-fields>span { padding-top:18px; color:var(--muted); }dialog .primary-button { width:100%; margin-top:10px; }#duration-error { min-height:18px; margin:0; color:var(--ink); font-size:11px; }
.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; }