:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #26394a;
  background: #fff8e8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #26394a;
  --muted: #526777;
  --line: #dbe6ec;
  --paper: #fff;
  --green: #23705d;
  --green-dark: #174f42;
  --soft-green: #e0f4eb;
  --amber: #76510a;
  --soft-amber: #fff1c8;
  --red: #b23a3c;
  --soft-red: #ffeded;
  --shadow: 0 12px 32px rgb(45 71 84 / 9%);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #fff8e8; }
.app-loading { width: min(1120px, 100%); margin: 0 auto; padding: 28px clamp(14px, 3vw, 34px); color: var(--muted); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.app-shell { width: min(1120px, 100%); min-height: 100svh; min-height: 100dvh; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) clamp(14px, 3vw, 34px) max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.eyebrow { margin: 0 0 2px; color: var(--green); font-size: .66rem; font-weight: 850; letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.18rem, 4vw, 1.7rem); letter-spacing: .01em; }
h2 { font-size: 1.35rem; margin-bottom: 14px; }
h3 { font-size: 1rem; margin-bottom: 9px; }
.save-indicator { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.tab-nav { display: flex; gap: 7px; margin: 0 0 12px; overflow-x: auto; padding: 0 0 3px; scrollbar-width: none; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav button { flex: 0 0 auto; border: 1px solid #d6e4e9; border-radius: 999px; background: #fff; color: #405a69; padding: 8px 13px; font-weight: 750; }
.tab-nav button[aria-current="page"] { border-color: var(--green); background: var(--green); color: white; }
.tab-panel[hidden] { display: none; }
.panel-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: clamp(16px, 3vw, 24px); }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.hero-card { background: linear-gradient(145deg, #e1f5ee 0%, #f1f8ff 58%, #fff 100%); }
.metric { font-size: clamp(1.6rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.1; margin: 4px 0; }
.metric small { font-size: .46em; font-weight: 650; color: var(--muted); }
.muted, .help, .eyebrow-small { color: var(--muted); }
.help { font-size: .88rem; line-height: 1.55; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #edf3f7; color: #344f60; padding: 5px 10px; font-size: .82rem; font-weight: 750; }
.pill.good { background: var(--soft-green); color: var(--green-dark); }
.pill.warn { background: var(--soft-amber); color: var(--amber); }
.pill.bad { background: var(--soft-red); color: var(--red); }
.warning-box, .info-box { border-radius: 12px; padding: 12px 14px; line-height: 1.5; }
.warning-box { color: #714600; background: var(--soft-amber); border: 1px solid #f1d38e; }
.info-box { color: #285d48; background: var(--soft-green); border: 1px solid #c6e4d2; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.button { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: white; color: var(--ink); font-weight: 750; }
.button:hover { border-color: #9bb9a9; }
.button.primary { border-color: var(--green); background: var(--green); color: white; }
.button.primary:hover { background: var(--green-dark); }
.button.danger { color: var(--red); border-color: #e9c4c0; background: #fffafa; }
.button.finish-confirm { border-color: #862e28; background: var(--red); color: #fff; min-height: 54px; }
.button.finish-confirm:hover { border-color: #74251f; background: #862e28; }
.button.small { padding: 7px 10px; font-size: .86rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, label.field { color: #38564a; font-size: .88rem; font-weight: 700; }
.field input, .field select { min-width: 0; width: 100%; border: 1px solid #bdcec3; border-radius: 10px; background: #fff; color: var(--ink); padding: 10px 11px; }
.field input:focus, .field select:focus, button:focus-visible { outline: 3px solid #8ac9a8; outline-offset: 2px; }
.form-section { display: grid; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.finish-session-form { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 88%); }
.finish-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.finish-actions .button { width: 100%; min-width: 0; min-height: 48px; white-space: normal; line-height: 1.35; }
.finish-status { min-height: 1.4em; margin: 0; }
.finish-status.error { color: var(--red); }
.finish-status.success { color: var(--green-dark); }
.finish-session-empty { margin-top: 14px; }
.time-input-row { display: grid; grid-template-columns: 1fr 1fr 88px; gap: 8px; }
.seconds-field { display: grid; gap: 5px; font-size: .78rem; color: var(--muted); }
.seconds-field input { width: 100%; }
.record-list { display: grid; gap: 10px; }
.record-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }
.record-main { min-width: 0; }
.record-title { margin: 0 0 4px; font-weight: 800; overflow-wrap: anywhere; }
.record-subtitle { margin: 0; color: var(--muted); font-size: .86rem; }
.record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.calendar-month { font-size: 1.2rem; font-weight: 800; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.weekday { padding: 4px 0; color: var(--muted); text-align: center; font-size: .78rem; font-weight: 750; }
.calendar-day { min-height: 166px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fff; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 4px; }
.calendar-day.empty { background: transparent; border-color: transparent; }
.calendar-day.today { outline: 2px solid #5aaa7a; outline-offset: -2px; }
.calendar-date { display: flex; justify-content: space-between; align-items: center; margin: 0; font-weight: 850; }
.calendar-date small { color: var(--muted); font-size: .68rem; }
.calendar-rabbit, .calendar-rabbit-placeholder { display: block; width: min(100%, 82px); height: 78px; margin: 0 auto; border-radius: 10px; }
.calendar-rabbit { object-fit: contain; }
.calendar-day .pill { justify-self: start; max-width: 100%; padding: 3px 7px; font-size: .67rem; white-space: normal; }
.calendar-day p { min-width: 0; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; }
.calendar-warning { color: var(--red) !important; font-weight: 800; }
.calendar-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.calendar-legend-item { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbfc; }
.calendar-legend-item img { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; border-radius: 9px; }
.calendar-legend-item span { min-width: 0; display: grid; gap: 2px; }
.calendar-legend-item strong { font-size: .9rem; }
.calendar-legend-item small { color: var(--muted); font-size: .76rem; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rate-card { background: #f7faf8; border-radius: 14px; padding: 16px; }
.rate-card .metric { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.history-list { display: grid; gap: 8px; }
.history-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f6f9f7; }
.app-message { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--soft-green); color: var(--green-dark); }
.app-message.error { background: var(--soft-red); color: var(--red); }
footer { margin-top: 26px; color: var(--muted); font-size: .76rem; line-height: 1.6; }
footer p { margin: 0; }
.workflow-dialog { width: min(600px, calc(100% - 24px)); max-height: min(90vh, 850px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 18px; padding: 0; box-shadow: 0 24px 90px rgb(0 0 0 / 28%); }
.workflow-dialog::backdrop { background: rgb(20 40 31 / 48%); }
.dialog-body { padding: 22px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.day-input-row { display: grid; grid-template-columns: 1fr minmax(90px, 140px); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fatal-error { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; padding: 28px; background: #fff8e8; color: var(--red); text-align: center; font-weight: 750; line-height: 1.6; }
.fatal-error[hidden] { display: none; }

/* The today card is the primary interaction surface on both phone and desktop. */
main { flex: 1 0 auto; }
footer { margin-top: 24px; }
.today-layout { gap: 12px; align-items: stretch; }
.today-hero { padding: clamp(15px, 2.4vw, 25px); border-color: #cce5dc; }
.today-time-card { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 12px; padding: clamp(13px, 2.5vw, 20px); border: 1px solid #efd7e8; border-radius: 24px; background: linear-gradient(145deg, #fffaf0 0%, #fff2f8 58%, #f4f0ff 100%); box-shadow: 0 7px 18px rgb(113 73 112 / 9%); text-align: center; }
.today-time-card::before, .today-time-card::after { position: absolute; z-index: -1; color: #e6b9d8; font-size: 1rem; line-height: 1; content: "✦"; }
.today-time-card::before { top: 16px; left: 16px; }
.today-time-card::after { right: 18px; bottom: 16px; color: #e5cf8c; font-size: .82rem; }
.today-time-caption { margin: 0 0 2px; color: #66536c; font-size: .9rem; font-weight: 800; letter-spacing: .04em; }
.today-time-value { display: flex; align-items: baseline; justify-content: center; gap: .04em; margin: 0; color: #764983; font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", ui-rounded, system-ui, sans-serif; font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1.13; white-space: nowrap; }
.today-time-number { color: #78478c; }
.today-time-unit { color: #775d83; font-size: .42em; font-weight: 750; letter-spacing: 0; }
.today-live-duration { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 3px 0 0; color: #365d50; font-size: .9rem; font-weight: 750; }
.today-live-duration strong { font-variant-numeric: tabular-nums; }
.today-live-duration small { color: #526777; font-size: .78rem; font-weight: 600; }
.today-cheer { margin: 2px 0 0; color: #5c536b; font-size: .86rem; font-weight: 700; }
.goal-progress-card { margin-top: 11px; padding: 10px 13px 8px; border: 1px solid #e2d9ee; border-radius: 18px; background: rgb(255 255 255 / 78%); text-align: left; }
.goal-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #5e4c70; font-size: .83rem; font-weight: 750; }
.goal-progress-heading strong { color: #4c735f; font-variant-numeric: tabular-nums; font-size: .92rem; }
.goal-progress-track { position: relative; height: 15px; margin: 11px 17px 15px 3px; border: 1px solid #e8d6e8; border-radius: 999px; background: #f8eaf5; }
.goal-progress-fill { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, #bdebd6, #a8dfc8); transition: width .28s ease; }
.goal-progress-rabbit { position: absolute; z-index: 1; bottom: -11px; width: 36px; height: 36px; object-fit: contain; transform: translateX(-50%); transition: left .28s ease; pointer-events: none; }
.goal-progress-star { position: absolute; z-index: 2; top: 50%; right: -18px; font-size: 1.42rem; line-height: 1; transform: translateY(-55%); filter: drop-shadow(0 1px 1px rgb(120 91 34 / 17%)); transition: filter .2s ease, transform .2s ease; }
.goal-progress-star.reached { filter: drop-shadow(0 0 6px rgb(255 199 75 / 72%)); transform: translateY(-55%) scale(1.08); }
.goal-progress-message { margin: 0; color: #5d4a6b; font-size: .87rem; font-weight: 750; text-align: center; }
.goal-progress-target { margin: 3px 0 0; color: #60746c; font-size: .76rem; font-weight: 700; text-align: center; }
.goal-progress-no-target { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; min-height: 64px; background: #faf7ff; }
.goal-progress-no-target img { width: 44px; height: 44px; object-fit: contain; }
.goal-progress-no-target p { margin: 0; color: #5d4a6b; font-size: .84rem; font-weight: 750; }
.today-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.today-heading-row .eyebrow-small { margin: 0; color: #426b64; font-size: .8rem; font-weight: 750; }
.today-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.today-status .pill { padding: 4px 9px; font-size: .76rem; }
.today-pill { background: #fff1c8; color: #664a09; }
.today-title { margin: 0 0 11px; color: #263f50; font-size: clamp(1.3rem, 4vw, 1.75rem); line-height: 1.2; }
.today-snapshot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.snapshot-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 11px; border-radius: 14px; background: #fff; border: 1px solid #e0ebef; }
.snapshot-item span { color: #506878; font-size: .82rem; font-weight: 700; }
.snapshot-item strong { font-size: 1rem; text-align: right; }
.today-warning { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #ecd188; border-radius: 12px; background: var(--soft-amber); color: #684600; font-size: .86rem; font-weight: 750; }
.start-prompt { display: grid; justify-items: center; gap: 8px; padding: 6px 0 2px; text-align: center; }
.start-sparkle { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff0bf; font-size: 1.7rem; }
.start-cta { width: min(100%, 420px); min-height: 64px; border-radius: 18px !important; font-size: clamp(1.15rem, 4vw, 1.4rem); box-shadow: 0 6px 0 #14503e; }
.start-prompt p { margin: 0; color: #4e6574; font-size: .9rem; }
.active-summary { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; padding: 9px 12px; border: 1px solid #c8e6d7; border-radius: 14px; background: #e9f7ed; color: #244f42; }
.active-clock { font-size: 1.4rem; }
.active-summary div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.active-summary strong { font-size: 1rem; }
.active-summary small { color: #49665c; font-size: .79rem; }
.finish-session-form { gap: 8px; margin-top: 0; padding: 10px 0 0; border: 0; border-top: 1px solid #cfe3dd; border-radius: 0; background: transparent; }
.finish-session-form h3 { margin: 0; font-size: 1rem; }
.finish-session-form .time-input-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) 62px; gap: 7px; }
.finish-session-form .field { gap: 3px; color: #405d6c; font-size: .77rem; font-weight: 750; }
.finish-session-form .field input { min-height: 42px; padding: 7px 8px; border-radius: 11px; }
.finish-session-form .seconds-field { gap: 3px; color: #405d6c; font-size: .77rem; font-weight: 750; }
.finish-session-form .seconds-field input { min-height: 42px; padding: 7px 5px; border-radius: 11px; }
.finish-help { margin: 0; color: #506878; font-size: .82rem; }
.finish-session-form .finish-status { min-height: 0; margin: 0; font-size: .82rem; line-height: 1.35; }
.finish-actions { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 8px; }
.finish-actions .button { min-height: 54px; border-radius: 14px; font-size: .92rem; }
.button.unknown-time-button { background: #fff; border-color: #a8c9bf; color: #285e50; }
.today-total-card { background: #fff4d7; border-color: #efdfa9; }
.today-total-card h3 { color: #62501f; }
.today-total-card .metric { color: #394d59; }
.finish-session-empty { margin: 0; }
.workflow-dialog { border-color: #d7e5e8; border-radius: 22px; max-height: min(90vh, 850px); max-height: min(90dvh, 850px); }
.dialog-body { padding: clamp(16px, 4vw, 24px); }
.day-input-row { border-color: #e0e9ec; }

@media (max-width: 760px) {
  .app-shell { padding-top: max(8px, env(safe-area-inset-top)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); }
  .app-header { margin-bottom: 7px; }
  .app-header .eyebrow { display: none; }
  h1 { font-size: 1.2rem; }
  .save-indicator { font-size: .72rem; }
  .tab-nav { margin-bottom: 8px; gap: 5px; }
  .tab-nav button { min-height: 38px; }
  .span-8, .span-6, .span-4 { grid-column: span 12; }
  .today-layout { gap: 10px; }
  .today-hero { padding: 14px; border-radius: 20px; }
  .today-time-card { margin-bottom: 9px; padding: 12px; border-radius: 20px; }
  .today-time-value { font-size: clamp(2.5rem, 10vw, 3.2rem); }
  .goal-progress-card { margin-top: 8px; padding: 8px 10px 7px; }
  .goal-progress-track { margin-top: 9px; margin-bottom: 13px; }
  .goal-progress-rabbit { width: 34px; height: 34px; }
  .today-total-card { padding: 14px; }
  .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 135px; padding: 5px 3px; border-radius: 9px; gap: 3px; }
  .calendar-date { font-size: .76rem; }
  .calendar-date small { font-size: .48rem; }
  .calendar-rabbit, .calendar-rabbit-placeholder { width: 100%; height: 44px; border-radius: 6px; }
  .calendar-day p { font-size: .58rem; }
  .calendar-day .pill { width: 100%; justify-self: stretch; justify-content: center; text-align: center; font-size: .56rem; line-height: 1.15; padding: 2px 1px; }
  .calendar-legend { gap: 5px; }
  .calendar-legend-item { flex-direction: column; gap: 3px; padding: 6px 3px; text-align: center; border-radius: 10px; }
  .calendar-legend-item img { width: 38px; height: 38px; }
  .calendar-legend-item span { justify-items: center; }
  .calendar-legend-item strong { font-size: .7rem; line-height: 1.2; }
  .calendar-legend-item small { font-size: .62rem; line-height: 1.2; }
  .record-row { align-items: flex-start; flex-direction: column; }
  .record-actions { justify-content: flex-start; }
}

@media (max-width: 430px) {
  .field-grid, .stats-grid { grid-template-columns: 1fr; }
  .time-input-row { grid-template-columns: 1fr 1fr 72px; gap: 5px; }
  .finish-session-form { padding: 9px 0 0; }
  .finish-actions { gap: 7px; }
  .finish-actions .button { padding: 8px 7px; font-size: .86rem; }
  .tab-nav { gap: 5px; }
  .tab-nav button { padding: 7px 10px; font-size: .82rem; }
  .today-heading-row .eyebrow-small { font-size: .72rem; }
  .today-status .pill { font-size: .69rem; padding: 4px 7px; }
  .today-title { margin-bottom: 8px; font-size: 1.28rem; }
  .today-time-card { padding: 10px 9px; }
  .today-time-value { font-size: clamp(2.5rem, 11vw, 3rem); }
  .today-time-caption { font-size: .82rem; }
  .today-cheer { font-size: .8rem; }
  .goal-progress-message { font-size: .81rem; }
  .goal-progress-target { font-size: .72rem; }
  .today-snapshot { gap: 6px; margin-bottom: 8px; }
  .snapshot-item { padding: 7px 8px; }
  .snapshot-item span { font-size: .72rem; }
  .snapshot-item strong { font-size: .88rem; }
  .active-summary { padding: 7px 9px; margin-bottom: 7px; }
  .start-prompt { gap: 6px; padding-top: 2px; }
  .start-sparkle { width: 42px; height: 42px; font-size: 1.45rem; }
  .start-cta { min-height: 58px; }
  .finish-help { font-size: .76rem; }
  .finish-session-form .time-input-row { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr) 54px; gap: 5px; }
  .finish-session-form .field input { min-height: 40px; padding: 6px; font-size: .91rem; }
  .finish-session-form .seconds-field input { min-height: 40px; }
  .finish-actions .button { min-height: 50px; }
  .calendar-day { min-height: 124px; }
  .calendar-day p:nth-of-type(2) { display: none; }
  .day-input-row { grid-template-columns: 1fr 110px; }
}

@media (max-width: 360px) {
  .finish-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finish-actions .button { font-size: .8rem; }
  .today-hero { padding: 12px; }
  .snapshot-item { align-items: flex-start; flex-direction: column; gap: 2px; }
  .today-time-value { font-size: 2.5rem; }
  .goal-progress-card { padding-left: 8px; padding-right: 8px; }
}

@media (max-height: 700px) and (max-width: 760px) {
  .app-shell { padding-top: max(6px, env(safe-area-inset-top)); }
  .app-header { margin-bottom: 5px; }
  .tab-nav { margin-bottom: 6px; }
  .today-hero { padding-top: 10px; padding-bottom: 10px; }
  .today-heading-row { margin-bottom: 2px; }
  .today-title { font-size: 1.2rem; margin-bottom: 6px; }
  .today-time-card { padding-top: 8px; padding-bottom: 8px; margin-bottom: 7px; }
  .today-time-value { font-size: 2.5rem; }
  .today-live-duration { margin-top: 0; font-size: .82rem; }
  .today-cheer { font-size: .75rem; }
  .goal-progress-card { margin-top: 6px; padding-top: 6px; padding-bottom: 5px; }
  .goal-progress-track { height: 13px; margin-top: 7px; margin-bottom: 11px; }
  .goal-progress-rabbit { width: 30px; height: 30px; bottom: -9px; }
  .goal-progress-message { font-size: .76rem; }
  .goal-progress-target { font-size: .68rem; }
  .today-snapshot { margin-bottom: 6px; }
  .active-summary { padding-top: 5px; padding-bottom: 5px; }
  .finish-session-form { gap: 6px; padding-top: 7px; }
  .finish-session-form .time-input-row { gap: 5px; }
  .finish-session-form .field input, .finish-session-form .seconds-field input { min-height: 36px; }
  .finish-actions .button { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}