@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 img { width:28px;height:28px;object-fit:contain;display:block;flex-shrink:0; } .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%; } } 
/* The chick uses one complete four-frame atlas, at half the other runners' size. */
.scene[data-animal=chick] .animal-scene { --animal-size:calc(var(--runner-size) * .5); }
@media(max-width:620px) { .brand { font-size:1.25rem;gap:8px; } .brand img { 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 .setting-section { 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 .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 { --animal-size:var(--runner-size);position:absolute;z-index:2;width:var(--animal-size);height:var(--animal-size);left:calc(50% - var(--animal-size) / 2);top:calc(94.84375% - var(--animal-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); }
/* Add breathing room as the ring grows; compact six-week months keep their clearance. */
.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);--calendar-gap:clamp(0px,calc((var(--scene-size) - 210px) * .05),4px); }
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:calc(clamp(4px,calc(var(--scene-size) * .025 - 1.25px),10px) + var(--calendar-gap)) 0 calc(2px + var(--calendar-gap));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:calc(clamp(7px,calc(var(--scene-size) * .035 - .35px),15px) + var(--calendar-gap)) 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; } }

/* Content modes reserve a separate control bar, including mobile safe areas. */
.media-options { margin:0 0 20px; }
.media-options label { display:block;font-weight:700;margin-bottom:8px; }
.media-options input { display:block;width:100%;min-width:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--soft);color:var(--ink); }
.media-options p { font-size:.8125rem;margin:8px 0; }
#image-preview { display:block;max-width:100%;height:100px;margin:12px auto 0;border-radius:10px;object-fit:contain; }
#image-name { overflow-wrap:anywhere; }
html.media-open,html.media-open body { overflow:hidden; }
html.media-open .page-shell { visibility:hidden; }
.media-view { position:fixed;inset:0;z-index:10;width:100%;height:100dvh;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top); }
.media-stage { position:relative;flex:1;min-height:0;overflow:hidden;background:#10151c; }
.media-stage img,.media-stage iframe { display:block;width:100%;height:100%;border:0; }
.media-stage img { object-fit:contain; }
.media-stage iframe { background:#fff; }
.media-bar { position:relative;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:4px max(16px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--border);background:var(--surface); }
.media-summary { display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;font-size:.75rem; }
#media-remaining { font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums; }
#media-status { color:var(--muted); }
#media-status[data-state=active] { color:var(--accent); }
#media-status[data-state=error],#media-status[data-state=released] { color:#b75046; }
.media-bar button,.image-navigation button { min-height:36px;min-width:36px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:.75rem;font-weight:700;line-height:1.5; }
.media-bar button:hover { background:var(--soft); }
.media-bar button:focus-visible { outline-offset:1px; }
.media-actions { grid-column:3;display:flex;justify-content:flex-end;gap:4px;flex-wrap:wrap; }
.media-actions button { white-space:nowrap; }
#media-hide-controls { color:var(--muted); }
#media-more-toggle[aria-expanded=true] { background:var(--soft); }
.media-floating-controls { position:absolute;z-index:2;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;pointer-events:none; }
.media-floating-controls > * { pointer-events:auto; }
.media-show-controls { margin-left:auto;min-height:36px;padding:6px 10px;border:1px solid #63758b;border-radius:8px;background:#1d2a3d;color:#fff;font-size:.75rem;font-weight:600;box-shadow:0 2px 12px #0004; }
.media-show-controls:hover { background:#293c55; }
.image-navigation.is-floating { padding:0 4px;border:1px solid #63758b;border-radius:8px;background:#1d2a3d;color:#fff;box-shadow:0 2px 12px #0004; }
.image-navigation.is-floating button { color:inherit; }
.image-navigation.is-floating button:hover { background:#293c55; }
.image-navigation.is-floating button:focus-visible { outline-offset:0; }
.media-more { position:absolute;z-index:3;right:max(12px,env(safe-area-inset-right));bottom:calc(100% + 8px);width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 8px 32px #0003; }
.media-more-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.8125rem;font-weight:800; }
#media-more-close { color:var(--muted);font-weight:600; }
.media-zoom-row { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:.8125rem;color:var(--muted); }
.media-zoom { display:flex;align-items:center;background:var(--soft);border-radius:8px; }
.media-zoom button { min-width:38px;font-size:.875rem; }
#media-zoom-reset { min-width:54px;font-size:.75rem;font-variant-numeric:tabular-nums; }
.media-more-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
.media-more-actions button { background:var(--soft);font-size:.8125rem;padding:8px; }
.media-more-actions button:hover { background:var(--mint-soft); }
#media-pan[aria-pressed=true] { color:var(--accent);background:var(--mint-soft);box-shadow:inset 0 0 0 1px var(--ring); }
.media-note { padding:12px max(16px,env(safe-area-inset-left));font-size:.875rem;max-height:25dvh;overflow:auto;background:var(--soft); }
@media(max-width:680px) {
  .media-bar { grid-template-columns:auto minmax(0,1fr);gap:2px 8px;padding:5px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .media-summary { grid-column:1/-1;justify-content:center;gap:8px; }
  .media-actions { grid-column:2; }
  .media-bar:not(:has(#image-navigation:not([hidden]))) .media-actions { grid-column:1/-1; }
  .media-bar:not(:has(#image-navigation:not([hidden]))) #media-back { margin-right:auto; }
}
@media(pointer:coarse) {
  .media-bar button,.image-navigation button,.media-show-controls { min-height:40px; }
}

/* Session picker: distinct display cards, a quiet duration grid and fixed actions. */
#duration-dialog { max-width:480px;padding:0;overflow:hidden;border-radius:26px;box-shadow:0 24px 80px #12233826; }
#duration-form { display:flex;flex-direction:column;max-height:calc(100dvh - 36px); }
#duration-dialog .dialog-top { flex-shrink:0;margin:0;padding:22px 24px 8px;gap:10px; }
#duration-dialog h2 { font-size:1.3rem;letter-spacing:-.035em; }
#duration-close { width:44px;height:44px;background:transparent;color:var(--muted); }
#duration-close:hover { background:var(--soft); }
.picker-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 8px;scroll-padding:12px; }
#duration-hint { margin:0 0 24px;font-size:.8125rem;line-height:1.6; }
#duration-dialog legend { margin-bottom:10px;font-size:.8125rem;font-weight:800;color:var(--ink); }
#duration-dialog .mode-section { margin-bottom:24px; }
#duration-dialog .mode-picker { gap:8px; }
#duration-dialog .mode-picker button { position:relative;display:flex;align-items:center;gap:10px;min-height:66px;padding:12px;border-radius:15px;text-align:left;font-weight:700;transition:background .15s,border-color .15s; }
#duration-dialog .mode-picker svg { width:23px;height:23px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
#duration-dialog .mode-picker button:hover { background:var(--soft); }
#duration-dialog .mode-picker button[aria-pressed=true] { background:var(--mint-soft);border-color:var(--ring);color:var(--accent);box-shadow:inset 0 0 0 1px var(--ring); }
#duration-dialog .runner-section { margin-top:24px; }
#animal-picker .choice-row { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; }
#animal-picker .choice-row button { display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;min-height:62px;padding:8px 4px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--muted);font-size:.75rem;white-space:normal;overflow-wrap:anywhere; }
#animal-picker .choice-row button > [aria-hidden] { font-size:1.25rem;line-height:1.3; }
#animal-picker .choice-row button[aria-pressed=true] { background:var(--mint-soft);border-color:var(--ring);color:var(--accent); }
#duration-dialog .duration-picker { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px; }
#duration-dialog .duration-picker button { grid-column:span 2;min-width:0;min-height:44px;padding:9px 6px;border:1px solid transparent;border-radius:12px;background:var(--soft);font-size:.8125rem;white-space:normal; }
#duration-dialog .duration-picker button:nth-last-child(-n+2) { grid-column:span 3; }
#duration-dialog .duration-picker button[aria-pressed=true] { background:var(--mint-soft);border-color:var(--ring);color:var(--accent); }
#duration-dialog .media-options { padding:14px;margin:-10px 0 24px;border:1px solid var(--border);border-radius:15px;background:var(--bg); }
#duration-dialog .media-options label { font-size:.8125rem; }
#duration-dialog .media-options input { background:var(--surface);font-size:.8125rem;min-height:44px; }
#duration-dialog .media-options input[type=file] { padding:6px;overflow:hidden; }
#image-file::file-selector-button { font:inherit;font-weight:700;border:0;border-radius:8px;padding:8px 10px;margin-right:8px;background:var(--soft);color:var(--ink);cursor:pointer; }
#duration-dialog .media-options p { font-size:.75rem;line-height:1.6; }
#image-name:empty { display:none; }
#duration-dialog .custom-duration { padding:12px;background:var(--bg);border-radius:12px;gap:8px; }
#duration-dialog .custom-duration input { min-height:44px;flex:1;min-width:80px;width:90px;background:var(--surface);border-radius:9px; }
#duration-dialog .custom-duration span { font-size:.75rem; }
#duration-dialog .dialog-actions { flex-shrink:0;margin:16px 0 0;padding:16px 24px 22px;gap:10px;border-top:1px solid var(--border);background:var(--surface); }
#duration-dialog .dialog-actions button { border-radius:14px;min-height:48px; }
#duration-dialog .dialog-actions .quiet-button { border-color:transparent;background:var(--soft);color:var(--muted); }
#duration-dialog .input-error { color:#b75046;font-size:.8125rem; }
@media(max-width:360px) {
  #duration-dialog .dialog-top { padding:16px 18px 6px; }
  .picker-body { padding-right:18px;padding-left:18px; }
  #duration-dialog .dialog-actions { padding:14px 18px 18px; }
  #duration-dialog .mode-picker button { padding:10px;gap:8px;font-size:.8125rem; }
  #duration-dialog .mode-picker svg { width:20px;height:20px; }
}

.media-content { position:absolute;inset:0;transform-origin:center; }
.media-gestures { position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none; }
.media-gestures.dragging { cursor:grabbing; }
.media-gestures:focus-visible { outline:2px solid var(--ring);outline-offset:-4px; }
.media-pan-hint { position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:7px 12px;border-radius:12px;background:#17263ae6;color:white;font-size:.75rem;text-align:center;pointer-events:none; }
#help-dialog .usage-steps { padding-left:22px;font-size:.875rem;line-height:1.65; }
#help-dialog .usage-steps li { margin-bottom:14px;padding-left:4px; }
#storage-note { font-size:.8125rem;color:var(--muted); }
#help-dialog .dialog-top { margin-bottom:16px; }
.help-intro { margin-bottom:20px; }
#help-dialog .help-lead { font-size:1rem;font-weight:800;color:var(--ink);margin:0 0 8px; }
.help-intro p { margin:0;font-size:.875rem;line-height:1.7; }
.help-features { list-style:none;padding:0;margin:0 0 18px;display:grid;gap:12px; }
.help-features li { display:flex;flex-direction:column;gap:3px; }
.help-features strong { font-size:.875rem;color:var(--ink); }
.help-features span { font-size:.8125rem;color:var(--muted);line-height:1.6; }
#help-dialog .dialog-note { font-size:.8125rem; }

/* Session actions share a row so extending and repeating stay easy to reach. */
.session-buttons { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(340px,100%);margin:24px auto 0;flex-shrink:0; }
.session-shortcuts { display:contents; }
.session-buttons .start-button { width:100%;margin:0;min-height:56px; }
#last-setup { grid-column:1/-1;margin:0 0 3px;color:var(--muted);font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere; }
#quick-start,#session-restart { grid-column:1/-1;font-size:1rem;padding:8px 12px; }
#toggle { grid-column:1/-1; }
.session-extend { grid-column:2;grid-row:1;min-height:56px;font-size:1rem; }
.session-buttons:has(.session-extend:not([hidden])) #toggle { grid-column:1;grid-row:1;font-size:1.2rem; }
.session-storage-note { max-width:430px;margin:8px auto;font-size:.8125rem;color:var(--muted); }
.image-list { list-style:none;margin:12px 0;padding:0;display:grid;gap:8px; }
.image-list li,.image-drag-ghost { display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px; }
.image-list img,.image-drag-ghost img { object-fit:contain;border-radius:6px;background:var(--soft); }
.image-list-name { font-size:.75rem;overflow-wrap:anywhere;line-height:1.4; }
.image-list-actions { display:flex;gap:2px; }
.image-list-actions button { min-width:44px;min-height:44px;padding:4px;border-radius:8px;font-size:1.1rem; }
.image-navigation { display:flex;align-items:center;justify-content:center;gap:4px; }
#image-position { min-width:30px;max-width:80px;text-align:center;font-size:.75rem;font-variant-numeric:tabular-nums; }
#media-restart { background:var(--mint-soft);border-color:var(--mint);color:var(--accent); }
@media(max-width:620px) { .session-buttons { width:min(300px,100%);margin-top:16px; } }
@media(max-width:420px) {
  .image-list li { grid-template-columns:44px minmax(0,1fr); }
  .image-list img { grid-row:span 2; }
  .image-list-actions { grid-column:2;justify-content:flex-end; }
}
@media(max-width:620px) and (max-height:600px) {
  .session-buttons { margin-top:12px; }
  .session-buttons .start-button,.session-extend { min-height:48px; }
}

.image-drag-handle { touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none; }
.image-drag-handle svg { width:20px;height:24px;display:block;margin:auto;fill:currentColor; }
.image-list .is-dragging { opacity:.3;border-style:dashed; }
.image-list .keyboard-moving { outline:2px solid var(--accent);outline-offset:2px; }
.image-drag-ghost { position:fixed;z-index:5;pointer-events:none;list-style:none;box-shadow:0 10px 30px #17263a35;border-color:var(--accent);opacity:.96; }
@media(max-width:420px) {
  .image-list li,.image-drag-ghost { grid-template-columns:44px minmax(0,1fr) auto; }
  .image-list img { grid-row:auto; }
  .image-list-actions { grid-column:auto; }
}

#last-setup { display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:center;border:0;background:transparent;padding:4px 12px;min-height:36px;color:var(--muted);font:inherit;font-size:.8125rem;cursor:pointer; }
#last-setup::after { content:'';width:6px;height:6px;flex-shrink:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg); }
#last-setup:hover { color:var(--ink); }
.image-list-actions .image-drag-handle { border:0;background:transparent;color:var(--muted); }
.image-list-actions [data-action=remove] { border:0;background:transparent;color:var(--muted); }
.image-list-actions button:hover { background:var(--soft); }