:root {
  color-scheme: light;
  --background: #ffffff;
  --surface: #ffffff;
  --foreground: #17191a;
  --muted: #727b7e;
  --border: #e2e6e7;
  --primary: #1d2021;
  --primary-foreground: #ffffff;
  --task-tint: #eaf3f3;
  --task-border: #c9d9da;
  --accent: #426b70;
  --warm: #f4e2b9;
  --warm-text: #855d20;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #171b1c;
  --surface: #202627;
  --foreground: #f0f2f2;
  --muted: #a9b4b5;
  --border: #384244;
  --primary: #e5eded;
  --primary-foreground: #182021;
  --task-tint: #263a3c;
  --task-border: #3d5a5d;
  --accent: #a2c8ca;
  --warm: #493c26;
  --warm-text: #e8ca8e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--background); color: var(--foreground); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin-top: 0; }

.app-frame { display: flex; flex-direction: column; width: min(100%, 390px); height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--background); }
.app-scroll { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: var(--safe-top) 16px 0; overscroll-behavior-y: contain; scrollbar-width: none; }
.app-scroll::-webkit-scrollbar, .category-filters::-webkit-scrollbar { display: none; }
.topbar { display: flex; flex: 0 0 62px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.app-frame:not([data-screen="home"]) .topbar { display: none; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 780; letter-spacing: -.035em; white-space: nowrap; }
.brand svg { width: 21px; height: 21px; flex: 0 0 auto; }
.preview-badge { padding: 3px 5px; border-radius: 5px; background: var(--warm); color: var(--warm-text); font-size: 8px; letter-spacing: 0; }
.header-month { color: var(--muted); font-size: 11px; font-weight: 610; text-transform: capitalize; }
.notice { flex: 0 0 auto; margin: 11px 0 0; padding: 10px 12px; border: 1px solid var(--task-border); border-radius: 10px; background: var(--task-tint); color: var(--foreground); font-size: 12px; line-height: 1.4; }
.notice.error { border-color: #d4a4a4; background: #fff0f0; color: #9e3333; }
:root[data-theme="dark"] .notice.error { background: #482b2b; color: #f0b7b7; }
.screen { display: none; }
.screen.active { display: block; flex: 1 0 auto; padding-bottom: 24px; }

.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 18px 0; border-bottom: 1px solid var(--border); }
.day-cell { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 610; }
.day-cell strong { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 630; }
.day-cell.is-today { color: var(--foreground); }
.day-cell.is-today strong { background: var(--primary); color: var(--primary-foreground); font-weight: 760; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section-heading h2, .screen h2 { margin: 0; font-size: 17px; font-weight: 730; letter-spacing: -.025em; }
.section-heading > span { overflow: hidden; max-width: 45%; color: var(--muted); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.light-section { margin-top: 22px; }
.light-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 11px; border-left: 3px solid #c69a4e; border-radius: 11px; background: var(--surface); }
.light-item.blue { border-color: #7493ad; }
.light-icon { display: grid; flex: 0 0 auto; place-items: center; width: 37px; height: 37px; border-radius: 9px; background: var(--warm); color: var(--warm-text); }
.light-item.blue .light-icon { background: #e5eef3; color: #537d98; }
:root[data-theme="dark"] .light-item.blue .light-icon { background: #344955; color: #b6d4e8; }
.light-icon svg { width: 20px; height: 20px; }
.light-text { min-width: 0; }
.light-text strong { display: block; font-size: 13px; }
.light-text span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.light-item time { margin-left: auto; font-size: 15px; font-weight: 780; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.light-content > .muted-copy { padding: 12px 0; border-top: 1px solid var(--border); }

.task-section { margin-top: 23px; }
.category-badge { min-height: 28px; padding: 4px 9px; border: 0; border-radius: 14px; background: var(--surface); color: var(--foreground); font-size: 10px; font-weight: 650; white-space: nowrap; }
.category-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 -16px 11px; padding: 1px 16px 5px; scrollbar-width: none; }
.filter-chip { flex: 0 0 auto; min-height: 34px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 11px; }
.filter-chip.active { border-color: var(--task-border); background: var(--task-tint); color: var(--foreground); font-weight: 700; }
.task-card { overflow: hidden; border: 1px solid var(--task-border); border-radius: 15px; background: var(--surface); }
.task-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 18px 18px 16px; background: var(--task-tint); }
.task-symbol { display: grid; grid-column: 1; grid-row: 1; place-items: center; width: 42px; height: 42px; border: 1px solid var(--task-border); border-radius: 10px; background: var(--surface); color: var(--accent); }
.task-symbol svg { width: 21px; height: 21px; }
.task-head h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 24px; font-weight: 760; letter-spacing: -.045em; line-height: 1.1; overflow-wrap: anywhere; }
.task-meta { display: flex; grid-column: 1 / -1; grid-row: 2; align-items: center; gap: 5px; margin: 13px 0 0; color: var(--accent); font-size: 11px; font-weight: 580; }
.task-meta svg { width: 13px; height: 13px; }
.task-body { padding: 18px 18px 15px; }
.task-copy { margin: 0; font-size: 13px; line-height: 1.52; }
.challenge-note { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.challenge-note strong { color: var(--accent); font-weight: 720; }
.task-loading { margin: 0; padding: 20px 18px; color: var(--muted); font-size: 13px; }
.task-action { padding: 0 18px 18px; }
.primary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 11px 14px; border: 0; border-radius: 10px; background: var(--primary); color: var(--primary-foreground); font-size: 13px; font-weight: 720; }
.main-cta { width: 100%; justify-content: center; position: relative; }
.cta-icon, .cta-arrow { position: absolute; font-size: 17px; font-weight: 500; }
.cta-icon { left: 14px; }.cta-arrow { right: 14px; }
.text-action { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 680; }
.text-action span { font-size: 17px; }

.view-heading { padding-top: 29px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 710; letter-spacing: .08em; text-transform: uppercase; }
.view-heading h1 { margin: 0; font-size: 30px; font-weight: 760; letter-spacing: -.045em; line-height: 1.08; }
.view-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.idea-form { display: grid; gap: 16px; margin-top: 23px; }
.app-frame[data-screen="idea"] .view-heading { padding-top: 20px; }
.idea-form .form-field { margin-bottom: 0; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend, .form-field { display: block; margin-bottom: 9px; color: var(--foreground); font-size: 12px; font-weight: 700; }
.choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice-pill { position: relative; display: grid; place-items: center; min-height: 46px; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.choice-pill:has(input:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.choice-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-pill input { position: absolute; opacity: 0; }
.idea-form select, .place-section input { display: block; width: 100%; min-height: 48px; margin-top: 9px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--foreground); font-size: 13px; }
.form-submit { width: 100%; }
.form-submit span { font-size: 18px; font-weight: 500; }
.idea-result { margin-top: 25px; padding: 20px 0 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.idea-result h2 { font-size: 22px; }
.idea-result-meta { margin: 7px 0 0; color: var(--accent); font-size: 11px; font-weight: 650; }
.idea-result-copy { margin: 13px 0 0; font-size: 13px; line-height: 1.5; }
.idea-limit { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.progress-content { margin-top: 26px; }
.practice-section .section-heading { margin-bottom: 12px; }
.progress-label { display: flex; justify-content: space-between; gap: 9px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.progress-label strong { color: var(--foreground); font-weight: 660; }
.progress-track, .category-track { display: block; height: 6px; overflow: hidden; border-radius: 6px; background: var(--border); }
.progress-track i, .category-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.category-progress, .gallery-section, .recent-section { margin-top: 30px; }
.category-progress h2, .recent-section h2 { margin-bottom: 15px; }
.category-row + .category-row { margin-top: 13px; }
.category-row > div { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 12px; }
.category-row strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.category-track { height: 5px; }
.category-track i { background: var(--accent); }
.gallery-empty { display: flex; gap: 13px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gallery-empty > svg { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 2px; color: var(--accent); }
.gallery-empty strong { font-size: 13px; }
.gallery-empty p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 11px; }
.gallery-tile { min-width: 0; padding: 0; border: 0; background: none; color: var(--foreground); text-align: left; }
.gallery-cover { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 11px; background: var(--task-tint); }
.gallery-cover img { width: 100%; height: 100%; object-fit: cover; }
.gallery-cover svg { color: var(--accent); }
.gallery-count-badge { position: absolute; right: 7px; bottom: 7px; min-width: 26px; padding: 4px 6px; border-radius: 6px; background: #1d2021; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.gallery-tile strong { display: block; overflow: hidden; margin-top: 7px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gallery-tile small { color: var(--muted); font-size: 11px; }
.gallery-unlock { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); }
.gallery-unlock p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.gallery-unlock button { width: fit-content; }
.recent-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 12px; }
.recent-row time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.empty-progress { padding: 14px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5; }

.profile-person { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding-bottom: 19px; border-bottom: 1px solid var(--border); }
.profile-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--task-tint); color: var(--accent); font-size: 19px; font-weight: 750; }
.profile-person > div { display: grid; gap: 3px; }
.profile-person strong { font-size: 14px; }
.profile-person > div span { color: var(--muted); font-size: 11px; }
.appearance-section { margin-top: 24px; }
.appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 58px; margin-top: 8px; padding: 8px 0; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: none; color: var(--foreground); text-align: left; }
.appearance-row > span:first-child { display: grid; gap: 3px; }
.appearance-row strong { font-size: 12px; }
.appearance-row small { color: var(--muted); font-size: 11px; }
.theme-switch { position: relative; flex: 0 0 auto; width: 42px; height: 25px; border-radius: 15px; background: var(--border); transition: background .18s ease; }
.theme-switch::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px #0002; content: ""; transition: transform .18s ease; }
.appearance-row[aria-checked="true"] .theme-switch { background: var(--accent); }
.appearance-row[aria-checked="true"] .theme-switch::after { transform: translateX(17px); }
@media (prefers-reduced-motion: reduce) { .theme-switch, .theme-switch::after { transition: none; } }
.place-section, .profile-light { margin-top: 27px; }
.place-section > p { margin: 8px 0 19px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.place-section .form-field { margin-bottom: 0; }
.place-section .form-submit { margin-top: 12px; }
.geo-option { display: flex; align-items: center; width: 100%; min-height: 59px; gap: 12px; margin-top: 11px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--foreground); text-align: left; }
.geo-option > svg { width: 21px; height: 21px; color: var(--accent); }
.geo-option span:not(.geo-arrow) { display: grid; gap: 3px; }
.geo-option strong { font-size: 12px; }
.geo-option small { color: var(--muted); font-size: 11px; }
.geo-arrow { margin-left: auto; color: var(--muted); font-size: 17px; }
.saved-place { overflow: hidden; max-width: 45%; text-overflow: ellipsis; }
.light-window { display: flex; align-items: center; gap: 9px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 12px; }
.light-window svg { width: 17px; height: 17px; color: var(--warm-text); }
.light-window.blue svg { color: #537d98; }
.light-window time { margin-left: auto; font-size: 12px; font-weight: 670; font-variant-numeric: tabular-nums; white-space: nowrap; }
.access-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; margin-top: 27px; padding: 10px 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--foreground); text-align: left; }
.access-link > span:first-child { display: grid; gap: 4px; }
.access-link strong { font-size: 12px; }
.access-link small { color: var(--muted); font-size: 11px; }
.access-link > span:last-child { color: var(--muted); font-size: 17px; }
.legal-section { margin-top: 27px; padding-top: 21px; border-top: 1px solid var(--border); }
.legal-section > p { margin: 8px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.legal-section > a { display: flex; justify-content: space-between; align-items: center; min-height: 47px; border-top: 1px solid var(--border); color: var(--foreground); font-size: 12px; font-weight: 650; text-decoration: none; }
.legal-section > a span { color: var(--muted); }
.legal-section .legal-operator { margin: 10px 0 0; font-size: 11px; }
.danger-link { min-height: 44px; padding: 9px 0; border: 0; background: none; color: #a64d4d; font-size: 12px; font-weight: 650; text-align: left; }
:root[data-theme="dark"] .danger-link { color: #e49b9b; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; align-items: end; justify-items: center; background: rgba(13, 20, 21, .55); }
.modal-panel { width: min(100%, 390px); max-height: calc(100dvh - var(--safe-top) - 24px); overflow-y: auto; padding: 25px 18px calc(22px + var(--safe-bottom)); border-radius: 16px 16px 0 0; background: var(--background); }
.modal-panel h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
.modal-panel p { font-size: 13px; line-height: 1.52; }
.modal-panel a { color: var(--accent); }
.intro-panel .intro-copy { margin: 0; color: var(--muted); }
.intro-features { margin: 19px 0 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.intro-features li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.intro-features strong { font-size: 13px; font-weight: 700; }
.intro-features span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.intro-panel .intro-data-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; }
.intro-panel .intro-docs { margin: 13px 0 0; font-size: 11px; }
.intro-docs a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.modal-primary { width: 100%; margin-top: 15px; }
.ack-row { display: flex; align-items: center; gap: 11px; min-height: 48px; margin-top: 14px; font-size: 12px; }
.ack-row input { width: 19px; height: 19px; accent-color: var(--accent); }
.recovery-key { display: block; overflow-wrap: anywhere; margin: 15px 0; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: 13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; user-select: all; }
.key-input { width: 100%; min-height: 49px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--foreground); font: 13px ui-monospace,SFMono-Regular,Consolas,monospace; }
.key-secondary { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 650; }
.modal-error { color: #a64d4d; }
.viewer-panel { display: flex; flex-direction: column; width: min(100%, 390px); height: 100dvh; overflow-y: auto; padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 20px); background: var(--background); }
.viewer-panel .back-link { flex: 0 0 auto; align-self: flex-start; margin: 0 0 20px; }
.viewer-panel .eyebrow { margin-bottom: 4px; }
.viewer-panel h2 { margin: 0; font-size: 25px; line-height: 1.15; letter-spacing: -.035em; }
.viewer-task { margin: 10px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.48; }
.viewer-image { display: grid; flex: 0 0 auto; place-items: center; min-height: 250px; max-height: 55vh; overflow: hidden; background: var(--task-tint); }
.viewer-image img { max-width: 100%; max-height: 55vh; object-fit: contain; }
.viewer-thumbs { display: flex; gap: 8px; min-height: 72px; overflow-x: auto; padding: 10px 0; }
.viewer-thumbs button { flex: 0 0 58px; height: 58px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 7px; background: var(--task-tint); }
.viewer-thumbs button.active { border-color: var(--accent); }
.viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.viewer-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 20px; }
.viewer-actions .primary { width: 100%; }
.back-link { min-height: 44px; margin-top: 13px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 680; }
#screen-pro .view-heading { padding-top: 13px; }
.pro-year { margin-top: 24px; padding: 17px 16px 14px; border: 1px solid var(--task-border); border-radius: 15px; background: var(--task-tint); }
.pro-recommended { color: var(--accent); font-size: 11px; font-weight: 720; }
.pro-year h2 { margin: 12px 0 3px; font-size: 23px; }
.pro-year-rate { margin: 0; font-size: 28px; font-weight: 770; letter-spacing: -.04em; }
.pro-year-rate span { color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.pro-year-total { margin: 5px 0 16px; color: var(--muted); font-size: 12px; }
.pro-buy { width: 100%; min-height: 48px; }
.pro-renew-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.pro-monthly { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.pro-monthly > div { display: grid; gap: 3px; min-width: 0; }
.pro-monthly strong { font-size: 14px; }
.pro-monthly span { color: var(--muted); font-size: 11px; }
.pro-monthly .text-action { flex: 0 0 auto; min-height: 44px; }
.pro-benefits { margin-top: 16px; }
.pro-benefits > div { display: grid; gap: 4px; padding: 15px 0; border-top: 1px solid var(--border); }
.pro-benefits strong { font-size: 13px; }
.pro-benefits span, .pro-state { color: var(--muted); font-size: 12px; line-height: 1.5; }
.pro-state { margin: 23px 0 0; line-height: 1.5; }

.bottom-nav { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: calc(65px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); border-top: 1px solid var(--border); background: var(--background); }
.nav-item { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 65px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 580; }
.nav-item.active { color: var(--foreground); font-weight: 760; }
.nav-item svg { width: 18px; height: 18px; }

@media (min-width: 520px) { .app-frame { box-shadow: 0 0 0 1px var(--border); } }
@media (max-width: 350px) {
  .app-scroll { padding-inline: 13px; }
  .day-cell strong { width: 35px; height: 35px; }
  .task-head { grid-template-columns: 38px minmax(0, 1fr); padding-inline: 15px; }
  .task-symbol { width: 38px; height: 38px; }
  .task-head h3 { font-size: 22px; }
  .task-body, .task-action { padding-inline: 15px; }
  .category-filters { margin-inline: -13px; padding-inline: 13px; }
}
@media (max-height: 750px) {
  .screen.active { padding-bottom: 16px; }
  .week-strip { padding-block: 13px; }
  .light-section { margin-top: 19px; }
  .task-section { margin-top: 20px; }
}