@font-face { font-family:Nunito; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/nunito-latin-variable.woff2') format('woff2'); }
:root { color-scheme:light; --bg:#f5f8fc; --surface:#fff; --ink:#213650; --muted:#6f7e90; --border:#e2eaf0; --soft:#eaf0f5; --accent:#258b73; --mint:#d8f4e9; --mint-soft:#f0faf6; --ring:#69bea7; font-family:Nunito,ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,sans-serif; }
html[data-theme=dark] { color-scheme:dark; --bg:#121c2b; --surface:#1d2a3d; --ink:#edf4fc; --muted:#a8b7ca; --border:#344156; --soft:#253347; --accent:#a0ead1; --mint:#305c52; --mint-soft:#233e3d; --ring:#83ddbe; }
@media(prefers-color-scheme:dark) { html[data-theme=system] { color-scheme:dark; --bg:#121c2b; --surface:#1d2a3d; --ink:#edf4fc; --muted:#a8b7ca; --border:#344156; --soft:#253347; --accent:#a0ead1; --mint:#305c52; --mint-soft:#233e3d; --ring:#83ddbe; } }
* { box-sizing:border-box; } body { margin:0;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.5; } button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:default;opacity:.5; } button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--ring);outline-offset:4px; } [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; }
.site-header { display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; } .brand { display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:1.45rem;font-weight:800;letter-spacing:-.025em; } .brand svg { width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round; } .brand-dot { color:var(--accent); } .settings-button { display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 14px;background:transparent;color:var(--muted);font-size:.9375rem;font-weight:700; } .settings-button:hover { background:var(--soft); } .settings-button svg { width:20px;height:20px;fill:var(--bg);stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }
.header-actions { display:flex;align-items:center;gap:4px;flex-shrink:0; }
.help-button { display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted); }
.help-button:hover { background:var(--soft); }
.help-button svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round; }
.help-button .help-dot { fill:currentColor;stroke:none; }
.retry-button { display:block;width:100%;min-height:44px;margin-top:16px;border-radius:16px; }
@media(max-width:380px) { .site-header { gap:8px; } .settings-button { width:44px;padding:0;justify-content:center; } .settings-button > span { display:none; } }
.countdown-ring { position:absolute;inset:0;overflow:visible;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:7; } .ring-track { stroke:var(--soft); } .ring-progress { stroke:var(--ring);stroke-linecap:round;transition:stroke-dashoffset .25s linear; } .runner-sprite { width:100%;height:100%;background-image:url('animals/squirrel-run.webp');background-size:200% 200%;background-position:0 0;background-repeat:no-repeat;animation:run-cycle .5s step-end infinite;animation-play-state:paused; }
.scene.running .runner-sprite { animation-play-state:running; } .time-face { position:absolute;inset:15%;display:flex;flex-direction:column;align-items:center;justify-content:center; } .countdown { display:flex;flex-direction:column;align-items:center; } #time-caption { color:var(--muted);font-size:1rem;margin-top:5px; } 
.start-button { display:flex;align-items:center;justify-content:center;gap:0;width:min(340px,100%);margin:24px auto 0;min-height:64px;flex-shrink:0;border:0;border-radius:999px;background:var(--ink);color:var(--surface);font-size:1.6rem;font-weight:800;box-shadow:0 7px 16px #2136500a; } .start-button:hover { filter:brightness(1.1); } .start-button.session-on { background:var(--mint);color:var(--ink);box-shadow:none; } .status { display:flex;align-items:center;justify-content:center;gap:0;font-size:1rem;font-weight:700;margin-top:14px; } .status[data-state=active] { color:var(--accent); } .status[data-state=error],.status[data-state=unsupported] { color:#b75046; } .status-detail { max-width:430px;margin:4px auto 0;min-height:2.9em;color:var(--muted);font-size:.875rem;line-height:1.6; }
dialog { width:calc(100% - 32px);max-width:460px;max-height:calc(100dvh - 36px);background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:28px;padding:27px; } dialog::backdrop { background:#17263a70;backdrop-filter:blur(3px); } .dialog-top { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px; } h2 { font-size:1.5rem;font-weight:800;letter-spacing:-.015em;margin:0; } .close-button { border:0;width:35px;height:35px;border-radius:50%;flex-shrink:0;background:var(--soft);color:var(--ink);font-size:1.6rem;line-height:1; } fieldset { border:0;margin:0;padding:0;min-width:0; } legend { display:block;font-size:1rem;font-weight:700;margin-bottom:10px; } .setting-section { margin-top:24px; } .duration-picker,.choice-row { display:flex;gap:7px;flex-wrap:wrap; } .duration-picker button,.choice-row button { border:1px solid transparent;border-radius:999px;background:var(--soft);color:var(--muted);padding:10px 13px;font-size:.875rem;font-weight:700;flex:1;white-space:nowrap; } .duration-picker button[aria-pressed=true],.choice-row button[aria-pressed=true] { background:var(--mint-soft);border-color:var(--mint);color:var(--accent); } .animal-picker .choice-row button { display:flex;gap:6px;align-items:center;justify-content:center; } .custom-duration { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:15px;font-size:.875rem; } .custom-duration input { width:105px;padding:8px 12px;background:var(--soft);color:var(--ink);border:1px solid var(--border);border-radius:14px; } .custom-duration span { color:var(--muted); } .input-error { font-size:.875rem;color:#b75046; } .quiet-button { border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.875rem;font-weight:700;padding:9px 14px; } .quiet-button:hover { background:var(--soft); } .done-button { display:block;width:100%;min-height:48px;background:var(--ink);color:var(--surface);border:0;border-radius:999px;font-weight:800;margin-top:24px; } dialog p { color:var(--muted);font-size:.9375rem;line-height:1.7; } .dialog-note { background:var(--soft);padding:13px 16px;border-radius:16px; }
.launch-notice { margin:28px 0;padding:23px 27px;border-radius:25px;background:var(--mint-soft);border:1px solid var(--mint); } .launch-notice h2 { font-size:1.3rem; } .launch-notice p { font-size:.9375rem;color:var(--muted);margin:9px 0; } .launch-notice a { display:inline-block;background:var(--ink);color:var(--surface);padding:10px 19px;border-radius:999px;text-decoration:none;font-weight:800;margin:7px 0; } .launch-notice .launch-small { font-size:.875rem; }
@keyframes run-cycle { 0%,100% { background-position:0 0; } 25% { background-position:100% 0; } 50% { background-position:0 100%; } 75% { background-position:100% 100%; } } 
/* One unchanged body behind the generated orange blur. The foreground tiles
   share a 62.5% x 19% footprint and an 85% floor; no JavaScript animation. */
.scene[data-animal=chick] .animal-scene::before { content:'';position:absolute;inset:0;z-index:0;transform:translateX(4%);background:url('animals/chick-body.webp?v=1.4.0') center/100% 100% no-repeat; }
.scene[data-animal=chick] .runner-sprite { position:relative;z-index:1;transform-origin:0 0;animation-name:chick-blur;transform:translate(12.811086%,23.121622%) scale(0.72398190,0.65729730); }
@keyframes chick-blur {
  0%,100% { background-position:0 0;transform:translate(12.811086%,23.121622%) scale(0.72398190,0.65729730); }
  25% { background-position:100% 0;transform:translate(12.989631%,23.440000%) scale(0.73732719,0.64853333); }
  50% { background-position:0 100%;transform:translate(12.784091%,24.647059%) scale(0.72727273,0.71529412); }
  75% { background-position:100% 100%;transform:translate(12.989631%,28.260274%) scale(0.73732719,0.66630137); }
}
@media(max-width:620px) { .brand { font-size:1.25rem;gap:8px; } .brand svg { width:25px; } .settings-button { padding:8px 10px;font-size:.875rem; } .start-button { width:min(300px,100%);font-size:1.5rem; } .status-detail { max-width:330px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }

#duration-hint { margin:0 0 22px; } .dialog-actions { display:flex;gap:12px;margin-top:26px;align-items:stretch; } .dialog-actions .quiet-button { flex:1; } .dialog-actions .done-button { flex:2;margin:0;min-height:50px;padding:10px 16px; } #duration-dialog .duration-picker button { min-height:44px; } #duration-dialog { overflow-y:auto; } html[lang=ko],html[lang=ja],html[lang=zh-Hans] { word-break:normal;overflow-wrap:anywhere; }

#settings-dialog .animal-picker { margin-top:0; } #settings-dialog .setting-section + .setting-section { padding-top:24px;border-top:1px solid var(--border); } .usage-steps { padding-left:25px;color:var(--muted);font-size:.9375rem;line-height:1.7; } .usage-steps li { padding-left:5px;margin:0 0 16px; } .usage-steps li::marker { color:var(--accent);font-weight:800; } .install-section { border-top:1px solid var(--border);padding-top:18px;margin-top:20px;font-size:.9375rem;color:var(--muted); } .install-section summary { cursor:pointer;font-weight:700;color:var(--ink); }

#settings-dialog { max-width:420px;padding:24px; } #settings-dialog .dialog-top { margin-bottom:20px; } #settings-dialog h2 { font-size:1.35rem; } #settings-dialog legend { font-size:.875rem; } #settings-dialog .animal-picker .choice-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } #settings-dialog .animal-picker button { min-height:46px;background:var(--surface);border-color:var(--border);border-radius:16px; } #settings-dialog .animal-picker button[aria-pressed=true] { background:var(--mint-soft);border-color:var(--ring);color:var(--accent); } #settings-dialog .setting-section + .setting-section { margin-top:16px;padding-top:16px; } #settings-dialog .theme-row { display:block; } #settings-dialog .done-button { margin-top:20px;min-height:46px; }

button.time-face { border:0;background:transparent;color:var(--ink);font:inherit;padding:0;border-radius:32px; } button.time-face:hover { opacity:.9; } 

.theme-picker { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; } .theme-picker button { min-width:0;min-height:44px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--muted);padding:9px 6px;font-size:.875rem;font-weight:700;overflow-wrap:anywhere; } .theme-picker button[aria-pressed=true] { background:var(--mint-soft);border-color:var(--ring);color:var(--accent); }

/* Reserve room for controls and the advertisement/support footer. svh uses the
   smaller viewport when mobile browser bars are visible; content can still
   grow and scroll at extreme heights or enlarged text sizes. */
.page-shell {
  width:min(100%,1120px);margin:auto;
  --scene-size:max(180px,min(440px,calc(100svh - 360px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 58px)));
  --runner-size:min(72px,calc(var(--scene-size) * .2));
  min-height:100svh;display:flex;flex-direction:column;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
}
.site-header { min-height:44px;flex-shrink:0; }
.settings-button { min-height:44px; }
main { max-width:650px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column; }
.awake-surface { text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0 8px; }
.scene { position:relative;isolation:isolate;max-width:calc(100vw - 58px);aspect-ratio:1;margin:0 auto;width:var(--scene-size);flex-shrink:0; }
.animal-scene { position:absolute;z-index:2;width:var(--runner-size);height:var(--runner-size);left:calc(50% - var(--runner-size) / 2);top:calc(94.84375% - var(--runner-size) * .85); }
#time-left,#current-clock { font-weight:800;line-height:1.15;letter-spacing:-.025em;font-variant-numeric:tabular-nums;font-size:min(5.4rem,max(2.5rem,calc(var(--scene-size) * .195))); }
#time-left[data-long=true] { font-size:min(3.9rem,max(1.9rem,calc(var(--scene-size) * .142))); }
.page-footer { display:flex;justify-content:space-between;gap:12px;margin-top:16px;flex-shrink:0; }
.footer-banner { display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(220px,calc((100% - 12px) / 2));min-width:0;min-height:52px;padding:7px 9px;border:1px dashed var(--border);border-radius:16px;background:transparent;color:var(--muted);text-align:center;line-height:1.45; }
.footer-banner-title { font-size:.8125rem;font-weight:700; }
.support-banner { padding:0;border:0; }
.support-banner .btn-container { width:100%;min-width:0;white-space:normal; }
.support-fallback,.support-banner a.kofi-button { display:flex!important;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;padding:8px!important;border-radius:7px;background:#777777;color:#fff;text-decoration:none;line-height:1.35!important; }
.support-fallback,.support-banner .kofitext { font-family:Nunito,system-ui,sans-serif;font-size:.8125rem;font-weight:700;line-height:1.35!important; }
.support-fallback:hover { opacity:.85; }
@media(max-width:620px) {
  .page-shell {
    --scene-size:max(180px,min(320px,calc(100svh - 316px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 58px)));
    --runner-size:min(64px,calc(var(--scene-size) * .2));
    padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }
  .awake-surface { padding-top:16px; }
  #time-left,#current-clock { font-size:min(4rem,max(2.5rem,calc(var(--scene-size) * .195))); }
  #time-left[data-long=true] { font-size:min(2.9rem,max(1.9rem,calc(var(--scene-size) * .142))); }
  #time-caption { font-size:.875rem; }
  .start-button { min-height:56px;margin-top:16px; }
  .status { margin-top:12px; }
}
@media(max-width:620px) and (max-height:600px) {
  .page-shell { --scene-size:max(180px,min(320px,calc(100svh - 304px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 58px))); }
  .awake-surface { padding:12px 0 4px; }
  .start-button { margin-top:12px; }
  .status { margin-top:10px; }
  .status-detail { min-height:2em; }
  .page-footer { margin-top:12px; }
  .footer-banner { min-height:48px; }
}

html[data-theme=black] { color-scheme:dark;--bg:#000000;--surface:#000000;--ink:#cdd8e3;--muted:#929eac;--border:#29333d;--soft:#11171d;--accent:#80c9af;--mint:#11251d;--mint-soft:#0a1711;--ring:#528d77; }
html[data-theme=black] .start-button,html[data-theme=black] .done-button { background:#111c16;color:var(--ink);border:1px solid var(--border);box-shadow:none; }
html[data-theme=black] .start-button.session-on { background:var(--mint);color:var(--accent); }
html[data-theme=black] .start-button:hover { filter:none;background:#182a20; }
.mode-section { margin-bottom:22px; }
.mode-picker { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.mode-picker button { min-width:0;min-height:44px;padding:10px 8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--muted);font-size:.875rem;font-weight:700; }
.mode-picker button[aria-pressed=true] { color:var(--accent);border-color:var(--ring);background:var(--mint-soft); }
.calendar-face { position:absolute;left:50%;top:50%;width:60%;transform:translate(-50%,-50%);text-align:center;--calendar-cell:clamp(13px,calc(var(--scene-size) * .054),22px); }
html[data-mode=calendar] .animal-scene { display:none; }
html[data-mode=calendar] .scene .runner-sprite { animation:none; }
.calendar-clock-row { display:flex;align-items:baseline;justify-content:center;gap:5px;white-space:nowrap; }
#calendar-clock { font-size:clamp(1.5rem,calc(var(--scene-size) * .115),3rem);line-height:1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums; }
#calendar-period { font-size:clamp(10px,calc(var(--scene-size) * .034),13px);color:var(--muted); }
#calendar-month { margin:clamp(4px,calc(var(--scene-size) * .025 - 1.25px),10px) 0 2px;font-size:clamp(12px,calc(var(--scene-size) * .043),17px);line-height:1.2;font-weight:700; }
.month-grid { width:100%;table-layout:fixed;border-spacing:0;border-collapse:separate;font-variant-numeric:tabular-nums; }
.month-grid th { height:max(11px,calc(var(--calendar-cell) - 2px));padding:0;color:var(--muted);font-weight:500;font-size:clamp(11px,calc(var(--scene-size) * .039),13px);line-height:1; }
.month-grid td { padding:0;height:var(--calendar-cell);font-size:clamp(12px,calc(var(--scene-size) * .043),16px);line-height:1; }
.month-grid td span { display:flex;align-items:center;justify-content:center;margin:auto;width:min(100%,24px);height:var(--calendar-cell);border:1px solid transparent;border-radius:7px;white-space:nowrap; }
.month-grid [aria-current=date] { color:var(--accent);background:var(--mint-soft);border-color:var(--ring);font-weight:800; }
#calendar-remaining { margin:clamp(7px,calc(var(--scene-size) * .035 - .35px),15px) 0 0;color:var(--muted);font-size:clamp(12px,calc(var(--scene-size) * .038),13px);line-height:1.1;white-space:nowrap; }
html[data-mode=calendar] .page-shell { --scene-size:max(210px,min(440px,calc(100svh - 360px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 58px))); }
@media(max-width:620px) { html[data-mode=calendar] .page-shell { --scene-size:max(210px,min(320px,calc(100svh - 316px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 58px))); } }
@media(max-width:620px) and (max-height:600px) {
  html[data-mode=calendar] .page-shell { --scene-size:max(210px,min(320px,calc(100svh - 288px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 58px))); }
  html[data-mode=calendar] .awake-surface { padding-top:6px; }
  html[data-mode=calendar] .start-button { margin-top:6px; }
  html[data-mode=calendar] .status { margin-top:6px; }
  html[data-mode=calendar] .page-footer { margin-top:8px; }
}

html[data-theme=black] dialog::backdrop { background:rgba(0,0,0,.72); }

@media(max-width:620px) and (max-height:600px) { html[data-mode=calendar] .status-detail { font-size:.75rem;line-height:1.4;min-height:1.4em; } }