:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #233b34; background: #f7f8f4; font-synthesis: none; color-scheme: light;
  --paper:#f7f8f4; --ink:#233b34; --muted:#677970; --green:#24654f; --deep:#214e3e;
  --line:#e1e7df; --soft:#edf2eb; --white:#fff; --danger:#a3393a;
  --safe-bottom:env(safe-area-inset-bottom,0px); --keyboard-inset:0px;
}
* { box-sizing:border-box }
body { margin:0; min-width:0; -webkit-text-size-adjust:100% }
button,input,select,textarea { font:inherit }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent }
button { border:0; cursor:pointer; color:inherit; touch-action:manipulation }
button:disabled { opacity:.5; cursor:not-allowed }
button { transition:background .16s ease,box-shadow .16s ease,transform .16s ease }
button:active:not(:disabled) { transform:scale(.98) }
a { color:inherit }
button:focus-visible,a:focus-visible { outline:3px solid #8abbaa; outline-offset:3px }
input:focus,select:focus,textarea:focus { outline:2px solid #7ca791; outline-offset:2px }
h1,h2,h3,p { margin:0 }
[hidden] { display:none!important }
svg.icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none }
.color-dot { width:9px; height:9px; flex:none }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; transform:translateY(-200%); background:white; padding:12px; border-radius:10px }
.skip-link:focus { transform:none }
.header { height:calc(92px + env(safe-area-inset-top,0px)); max-width:1224px; margin:auto; padding:env(safe-area-inset-top,0px) 48px 0; display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-size:23px; font-weight:700; letter-spacing:-1px; flex:none }
.brand img { border-radius:11px; flex:none }
.brand-dot { color:#77a381 }
.header-actions { display:flex; gap:8px; align-items:center }
.header-button,.icon-button { background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; min-height:44px; min-width:44px; padding:10px; font-size:13px; font-weight:550 }
.header-button { padding:10px 14px }
.header-button:hover,.icon-button:hover { background:#e8eee7 }
main { max-width:1224px; margin:auto; padding:32px 48px 36px; outline:none }
.intro { display:flex; gap:24px; justify-content:space-between; align-items:center; padding:15px 0 38px }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:1.8px; font-weight:650; margin-bottom:12px }
h1 { font-size:clamp(34px,4vw,48px); line-height:1.1; letter-spacing:-2px; font-weight:620 }
h1>span { color:#70a07e }
.subtitle { font-size:14px; color:var(--muted); line-height:1.6; margin-top:12px }
.primary,.secondary,.danger { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:13px 19px; border-radius:14px; font-size:14px; line-height:1.4; font-weight:600; text-decoration:none }
.primary { background:var(--deep); color:#fff; box-shadow:0 3px 7px #234b3a10 }
.primary:hover { background:#163e2e; box-shadow:0 5px 12px #234b3a16 }
.secondary { background:var(--soft); color:var(--green) }
.secondary:hover { background:#e1ebdf }
.danger { background:#f8ecea; color:var(--danger) }
.text-button { background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 2px; min-height:44px; color:var(--green); font-size:13px; font-weight:600 }
.text-button:hover { color:#142f25; text-decoration:underline; text-underline-offset:3px }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line) }
.tabs { display:flex; align-items:center; gap:6px; max-width:100% }
.tabs button { display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--muted); padding:11px 15px; min-height:46px; border-radius:12px; font-size:14px; font-weight:550; white-space:nowrap }
.tabs button[aria-selected=true] { background:#e8eee4; color:var(--ink) }
.tabs span { font-variant-numeric:tabular-nums; font-size:11px; background:#ffffff90; padding:3px 6px; border-radius:6px; min-width:20px; text-align:center }
.filter-heading { display:flex; align-items:center; justify-content:space-between; margin:12px 0 1px; font-size:12px; color:var(--muted) }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; min-width:0 }
.filter { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 13px; min-height:42px; background:transparent; border:1px solid var(--line); border-radius:100px; font-size:12px; line-height:1.4; max-width:100%; overflow-wrap:anywhere }
.filter:hover { background:#eef2ea }
.filter[aria-pressed=true] { background:#fff; border-color:#98b19d; box-shadow:0 2px 3px #234b3a05; color:#214e3e }
.filter[aria-pressed=true]::after { content:''; width:4px; height:4px; border-radius:50%; background:var(--green); flex:none }
.search-box { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:4px 7px 4px 14px; border-radius:14px; margin-top:16px }
.search-box input { border:0; margin:0; padding:10px 0; background:transparent; width:100%; min-width:0; outline-offset:0 }
.hero { position:relative; isolation:isolate; background:#e7eedf; border:1px solid #dde5d5; border-radius:24px; padding:28px 32px; overflow:hidden }
.hero::after { content:''; z-index:-1; position:absolute; width:360px; height:360px; border:1px solid #b4c7a74a; border-radius:50%; right:-65px; top:-100px; box-shadow:0 0 0 46px #c9d8bf21,0 0 0 92px #c9d8bf14; pointer-events:none }
.hero-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px }
.hero-label { display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:1.4px; color:#4f6d51; font-weight:650 }
.hero-label .icon { width:17px; height:17px }
.hero .icon-button { margin:-8px -10px -8px 0 }
.hero .icon-button:hover { background:#d7e3ce }
.hero-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.8fr); gap:36px; align-items:center }
.hero-copy { min-width:0 }
.badge { display:inline-flex; gap:7px; align-items:center; font-size:11px; color:var(--muted); line-height:1.4; max-width:100%; overflow-wrap:anywhere }
.hero .badge { color:#4f6652 }
.hero h2 { font-size:clamp(27px,3vw,35px); font-weight:620; letter-spacing:-1px; line-height:1.2; margin:11px 0; overflow-wrap:anywhere }
.event-date { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--muted); font-size:12px; line-height:1.6 }
.event-date .icon { width:15px; height:15px }
.hero .event-date { color:#566d53 }
.note { font-size:13px; line-height:1.6; margin-top:12px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted) }
.note-preview { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap }
.countdown-panel { min-width:0; border-left:1px solid #c6d4be; padding-left:34px }
.countdown { display:flex; align-items:baseline; gap:18px; font-variant-numeric:tabular-nums; letter-spacing:-1px }
.count-unit { display:flex; flex-direction:column; gap:7px; min-width:30px }
.count-unit strong { font-size:30px; line-height:1; font-weight:450 }
.count-unit:first-child strong { font-size:64px; letter-spacing:-3px; font-weight:500 }
.count-unit small { font-size:10px; font-weight:450; letter-spacing:0; color:#657b5b }
.countdown-caption { font-size:10px; color:#667d5c; margin-top:16px }
.countdown-today { font-size:26px; letter-spacing:-.6px; line-height:1.3; font-weight:550 }
.reminders-button { display:inline-flex; align-items:center; gap:6px; background:transparent; font-size:11px; color:var(--muted); min-height:44px; text-align:left; line-height:1.4; padding:9px 0; overflow-wrap:anywhere }
.reminders-button .icon { width:15px; height:15px }
.hero .reminders-button { color:#466749; margin-top:14px }
.reminders-button:hover { text-decoration:underline; text-underline-offset:3px }
.section-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:28px 0 14px }
.section-label h2 { font-size:14px; font-weight:600 }
.section-label>span { color:var(--muted); font-size:12px }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.event-card { background:#fff; border:1px solid var(--line); border-radius:19px; padding:19px 22px 11px; min-width:0; transition:border-color .2s ease,box-shadow .2s ease }
.event-card:hover { border-color:#bbccbd; box-shadow:0 4px 16px #213e3006 }
.card-top { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:11px; min-width:0 }
.card-top .icon-button { margin:-8px -10px -8px 0; flex:none; color:var(--muted) }
.card-main { display:flex; align-items:center; gap:15px; min-width:0 }
.date-tile { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:51px; min-height:58px; border-radius:12px; background:#f3f5ef; border:1px solid #ebeee5 }
.date-tile strong { font-size:24px; font-weight:520; letter-spacing:-1px; line-height:1.1; font-variant-numeric:tabular-nums }
.date-tile span { font-size:9px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.6px }
.card-copy { min-width:0; flex:1 }
.event-title { text-align:left; padding:0; min-height:28px; background:transparent; font-size:17px; line-height:1.4; letter-spacing:-.4px; font-weight:600; overflow-wrap:anywhere }
.event-title:hover { color:var(--green) }
.card-copy .event-date { font-size:11px; margin-top:2px }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #edf0e9; margin-top:16px; min-height:44px }
.mini-countdown { color:var(--green); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; flex:none; text-align:right }
.event-card.is-past .mini-countdown { color:var(--muted); font-weight:400 }
.sync-status { text-align:center; font-size:11px; color:var(--muted); margin:26px 0 0; line-height:1.6 }
.sync-status::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#8aa77f; margin-right:7px; vertical-align:middle }
.empty { text-align:center; padding:54px 16px; border:1px dashed #cdd8cb; border-radius:20px; background:#ffffff55 }
.empty>.icon { width:35px; height:35px; color:#7e9c7d; margin-bottom:18px }
.empty h2 { font-size:22px; font-weight:550; letter-spacing:-.6px; margin-bottom:9px }
.empty p { font-size:13px; color:var(--muted); line-height:1.6; max-width:320px; margin:auto }
.empty button { margin-top:22px }
.connection,.update-banner { max-width:1128px; margin:0 auto 12px; padding:12px 18px; background:#f4ebd8; color:#75602f; font-size:12px; line-height:1.5; border-radius:12px }
.update-banner { background:#e8efdf; color:var(--green); display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:4px }
.loading { max-width:650px; margin:50px auto; padding:24px; text-align:center }
.loading h1 { font-size:28px; letter-spacing:-.8px; margin-top:20px }
.loading p { color:var(--muted); font-size:14px; line-height:1.6; margin-top:12px }
.loading-mark img { border-radius:14px }
.skeleton { height:180px; border-radius:24px; background:linear-gradient(100deg,#e8eee3 20%,#f0f4eb 50%,#e8eee3 80%); background-size:200% 100%; animation:shimmer 1.8s ease-in-out infinite; margin:30px 0 20px }
.loading.failed .skeleton { display:none }
.loading .secondary { margin-top:20px }
.no-script { margin:30px; text-align:center }
.toast { position:fixed; z-index:30; left:50%; bottom:calc(24px + var(--safe-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); background:#243e33; color:white; box-shadow:0 6px 24px #163c2826; padding:14px 19px; font-size:13px; line-height:1.5; border-radius:14px; text-align:center; pointer-events:none; animation:toast-in .2s ease-out }
/* A single scrollable sheet, with controls kept outside the scrolling content. */
dialog { padding:0; width:min(540px,calc(100% - 40px)); max-width:100%; max-height:min(88dvh,var(--viewport-height,88dvh)); border:1px solid #e4e9df; border-radius:24px; color:var(--ink); background:var(--paper); box-shadow:0 24px 100px #132f2530; overflow:hidden; overscroll-behavior:contain }
dialog::backdrop { background:#18362b66; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
dialog[open] { animation:dialog-in .2s ease-out }
#modal-content { display:flex; flex-direction:column; max-height:min(88dvh,var(--viewport-height,88dvh)); min-height:0 }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 22px 15px; border-bottom:1px solid var(--line); flex:none }
.modal-head h2 { font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.7px; overflow-wrap:anywhere; outline:none }
.modal-head .icon-button { flex:none; background:#eaf0e6 }
.modal-body { padding:22px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; scroll-padding:20px; padding-bottom:max(22px,var(--safe-bottom)) }
body:has(dialog[open]) { overflow:hidden }
label.field { display:block; font-size:12px; font-weight:600; line-height:1.6; margin-bottom:18px; min-width:0 }
.optional { color:var(--muted); font-weight:400; font-size:11px; margin-left:4px }
input:not([type=radio]):not([type=checkbox]):not([type=color]),select,textarea { display:block; min-width:0; width:100%; max-width:100%; margin-top:6px; padding:12px 13px; min-height:48px; border:1px solid #d7e0d3; border-radius:12px; font-size:16px; color:var(--ink); background:#fff; box-shadow:none }
input::placeholder,textarea::placeholder { color:#94a091; opacity:1 }
input[type=date],input[type=time] { -webkit-appearance:none; appearance:none; text-align:left; min-width:0 }
input::-webkit-date-and-time-value { text-align:left; min-height:1.4em }
textarea { resize:vertical; min-height:90px!important; line-height:1.5 }
.two-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px }
.help { color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:16px; overflow-wrap:anywhere }
.help strong { color:var(--ink); font-weight:600 }
.auto-reminders { display:flex; gap:10px; align-items:flex-start; padding:13px; border:1px solid #dde6d5; background:#edf3e7; border-radius:12px; color:#526e48; font-size:12px; line-height:1.6; margin:4px 0 16px }
.auto-reminders>.icon { width:17px; margin-top:2px }
.modal-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap; padding:17px 0 0; margin-top:12px; border-top:1px solid var(--line) }
.modal-actions>.primary { flex:1; min-width:150px }
.modal-actions>.danger,.modal-actions>.secondary { flex:none }
.form-error { color:var(--danger); font-size:13px; line-height:1.5; margin:10px 0; overflow-wrap:anywhere }
.busy { pointer-events:none }
button.is-loading::after { content:''; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite }
.color-options { border:0; padding:0; margin:0 0 20px; min-width:0 }
.color-options legend { font-size:12px; font-weight:600; margin-bottom:8px }
.color-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
.color-choice { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; background:white; padding:11px 4px; border-radius:12px; border:1px solid var(--line); font-size:10px; cursor:pointer }
.color-choice:has(input:checked) { border-color:var(--green); outline:1px solid var(--green); background:#f0f5ea }
.color-choice:has(input:focus-visible) { outline:3px solid #8abbaa; outline-offset:2px }
.color-choice input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer }
.color-choice .color-dot { width:20px; height:20px }
.custom-color { display:flex; gap:10px; align-items:center; margin-top:10px; font-size:12px; color:var(--muted) }
input[type=color] { width:44px; height:38px; padding:4px; border:1px solid var(--line); background:white; border-radius:10px }
.category-row { display:flex; gap:12px; align-items:center; width:100%; text-align:left; min-height:64px; border-bottom:1px solid var(--line); background:transparent; padding:12px 2px }
.category-row:hover { color:var(--green) }
.category-row .color-dot { width:12px; height:12px }
.category-row .category-name { flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; font-weight:550 }
.category-row small { font-size:11px; font-weight:400; color:var(--muted); display:block; margin-top:4px }
.category-row>.icon { width:16px; color:var(--muted); flex:none }
.wide { width:100%; margin-top:20px }
.detail-title { font-size:28px; line-height:1.25; letter-spacing:-.8px; overflow-wrap:anywhere; margin:8px 0 10px }
.detail-summary { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:18px }
.detail-summary .note { white-space:pre-wrap }
.detail-reminders-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; margin-bottom:12px }
.count-pill { color:var(--green); background:#e8f0e0; font-size:11px; padding:5px 8px; border-radius:7px; white-space:nowrap; font-weight:500 }
.reminder-list { list-style:none; margin:0 0 18px; padding:0 }
.reminder-list li { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.5 }
.reminder-list li::before { content:''; width:6px; height:6px; background:#729b69; border-radius:50%; flex:none }
.reminder-list li.done::before { background:#c4cec0 }
.reminder-list li.done { color:var(--muted) }
.reminder-list li>span { flex:1 }
.reminder-list small { color:var(--muted); font-size:11px; text-align:right; max-width:100px }
.notice { background:#f3eddf; color:#75663c; padding:12px 14px; border-radius:12px; font-size:12px; line-height:1.6; margin:14px 0 }
.status-card { display:flex; gap:13px; align-items:flex-start; padding:16px; background:#eaf1e3; border-radius:16px; margin-bottom:20px }
.status-card>.icon { margin-top:1px; color:var(--green) }
.status-card strong { display:block; font-size:14px; font-weight:600; margin-bottom:5px }
.status-card p { color:var(--muted); font-size:12px; line-height:1.6 }
.check-label { display:flex; gap:11px; align-items:center; font-size:13px; line-height:1.5; min-height:48px; padding:11px 0; cursor:pointer }
.check-label input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--green) }
#push-categories { border-top:1px solid var(--line); padding-top:6px }
.install-steps { list-style:none; counter-reset:step; margin:20px 0; padding:0 }
.install-steps li { display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.7; margin:18px 0 }
.install-steps li::before { counter-increment:step; content:counter(step); display:grid; place-items:center; flex:none; background:#e8f0e0; color:var(--green); width:28px; height:28px; border-radius:9px; font-size:12px; font-weight:600 }
.menu-item { display:flex; align-items:center; gap:14px; background:transparent; width:100%; text-align:left; min-height:58px; border-bottom:1px solid var(--line); font-size:14px; padding:12px 0 }
.menu-item>.icon { color:var(--green) }
.about-brand { display:flex; align-items:center; gap:15px; margin:0 0 20px }
.about-brand img { border-radius:16px }
.about-brand strong { font-size:24px; letter-spacing:-.8px }
.about-brand small { display:block; font-size:12px; color:var(--muted); margin-top:4px }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes shimmer { 0%,100% { background-position:100% 0 } 50% { background-position:0 0 } }
@keyframes dialog-in { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes toast-in { from { opacity:0; margin-bottom:-6px } to { opacity:1; margin-bottom:0 } }
@media(min-width:1000px) { .hero { padding-block:30px }.hero-main { grid-template-columns:minmax(0,1fr) 360px }.countdown { gap:23px }.count-unit strong{font-size:34px}.count-unit:first-child strong{font-size:72px} }
@media(max-width:800px) {
  .header { padding-inline:28px; height:calc(80px + env(safe-area-inset-top,0px)) }
  main { padding:20px 28px 32px }
  .hero { padding:24px }.hero-main { gap:24px; grid-template-columns:minmax(0,1fr) minmax(230px,.8fr) }
  .countdown-panel { padding-left:24px }.countdown{gap:12px}.count-unit strong{font-size:26px}.count-unit:first-child strong{font-size:52px}
  .event-card { padding:17px 17px 8px }.card-bottom { gap:8px }.card-bottom .reminders-button{font-size:10px}
  .connection,.update-banner{margin-inline:28px}
}
@media(max-width:620px) {
  .header { padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px)); height:calc(76px + env(safe-area-inset-top,0px)); gap:10px }
  .brand { font-size:21px; gap:9px }.brand img{width:33px;height:33px;border-radius:10px}
  .header-actions{gap:2px}.nav-label{display:none}.header-button{padding:10px}
  main{padding:15px max(20px,env(safe-area-inset-right,0px)) calc(112px + var(--safe-bottom)) max(20px,env(safe-area-inset-left,0px))}
  .intro { display:block; padding:7px 0 28px }.eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:12px}h1{font-size:38px;letter-spacing:-1.6px}.subtitle{font-size:13px;margin-top:10px}
  .add-dock { position:fixed; z-index:5; bottom:0; left:0; right:0; padding:12px max(20px,env(safe-area-inset-right,0px)) calc(12px + var(--safe-bottom)) max(20px,env(safe-area-inset-left,0px)); background:#f7f8f4ed; border-top:1px solid #e2e7de; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
  .add-dock .primary { width:100%; min-height:50px; border-radius:15px; font-size:14px }
  body:has(dialog[open]) .add-dock { visibility:hidden }
  .list-toolbar { padding-bottom:8px }.tabs{gap:3px}.tabs button{padding:11px 12px;font-size:13px;gap:7px}
  .filter-heading { margin-top:8px }.filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;max-width:100%;padding:3px 2px 4px;margin-bottom:20px}.filters::-webkit-scrollbar{display:none}.filter{flex:none;max-width:240px;white-space:nowrap;min-height:44px;font-size:11px;padding:10px 13px;overflow:hidden}.filter .filter-name{overflow:hidden;text-overflow:ellipsis}
  .hero { padding:22px; border-radius:22px }.hero-top{margin-bottom:15px}.hero-label{font-size:9px;letter-spacing:1.2px}
  .hero-main { display:block }.hero h2{font-size:29px;letter-spacing:-.9px;margin-block:10px}.hero .event-date{font-size:12px}
  .countdown-panel{border-left:0;border-top:1px solid #c9d7c1;padding:21px 0 0;margin-top:24px}.countdown{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:12px;align-items:end}.count-unit{gap:7px;min-width:0}.count-unit:first-child strong{font-size:44px;letter-spacing:-2px}.count-unit strong{font-size:29px;letter-spacing:-.7px}.count-unit small{font-size:10px}.countdown-caption{margin-top:12px;font-size:10px}
  .hero .reminders-button{margin-top:9px;min-height:40px}.hero .note-preview{font-size:12px}
  .section-label{margin:25px 0 12px}.section-label h2{font-size:13px}.section-label>span{font-size:11px}
  .cards{grid-template-columns:minmax(0,1fr);gap:12px}.event-card{padding:18px 19px 8px;border-radius:18px}.card-main{gap:13px}.event-title{font-size:16px}.card-copy .event-date{font-size:11px}.card-bottom .reminders-button{font-size:11px}.mini-countdown{font-size:11px}
  .connection,.update-banner{margin-inline:20px;font-size:12px}.update-banner .text-button{flex:none}.sync-status{font-size:10px;margin-top:23px}
  .toast { bottom:calc(89px + var(--safe-bottom));font-size:12px }
  body:has(dialog[open]) .toast { bottom:calc(18px + var(--safe-bottom) + var(--keyboard-inset)) }
  dialog{width:100%;max-width:100%;border:0;border-radius:25px 25px 0 0;margin:auto 0 0;bottom:var(--keyboard-inset);max-height:min(92dvh,calc(var(--viewport-height,100dvh) - 12px))}
  #modal-content{max-height:min(92dvh,calc(var(--viewport-height,100dvh) - 12px))}
  .modal-head{padding:17px max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px));position:relative}.modal-head::before{content:'';position:absolute;left:calc(50% - 17px);top:6px;width:34px;height:4px;border-radius:4px;background:#d2ddce}.modal-head h2{font-size:21px}
  .modal-body{padding:20px max(20px,env(safe-area-inset-right,0px)) calc(24px + var(--safe-bottom)) max(20px,env(safe-area-inset-left,0px))}
  label.field{margin-bottom:16px}.two-fields{gap:12px}.modal-actions{gap:10px}.modal-actions>.primary{min-width:120px}.modal-actions>.danger,.modal-actions>.secondary{padding-inline:14px}
  .detail-title{font-size:25px}.color-grid{gap:6px}.reminder-list li{font-size:12px}.reminder-list small{font-size:10px}
  .loading{margin-top:22px}.loading h1{font-size:26px}.skeleton{height:210px}
}
@media(max-width:359px) {
  .header{padding-inline:16px}.brand{font-size:19px;gap:7px}.brand img{width:30px;height:30px}.header-actions{gap:0}
  main{padding-inline:16px}h1{font-size:34px}.tabs button{padding-inline:10px}.hero{padding:19px}.hero h2{font-size:26px}.countdown{gap:8px}.count-unit strong{font-size:25px}.count-unit:first-child strong{font-size:40px}.mini-countdown{font-size:10px}.event-card{padding-inline:15px}.card-bottom{gap:6px}.card-bottom .reminders-button{font-size:10px}.two-fields{grid-template-columns:minmax(0,1fr)}.modal-body{padding-inline:18px}
}
@media(display-mode:standalone) { html{overscroll-behavior-y:none}.header{background:var(--paper)} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }
/* Keep readable metadata and compact the first mobile moment. */
.countdown.long-days .count-unit:first-child strong { font-size:40px; letter-spacing:-1.5px }
@media(max-width:620px) {
  .filter { font-size:12px }
  .hero { padding:20px }
  .hero-top { margin-bottom:12px }
  .badge { font-size:12px }
  .hero .reminders-button,.card-bottom .reminders-button { font-size:12px }
  .countdown-panel { margin-top:17px; padding-top:18px }
  .countdown.long-days .count-unit:first-child strong { font-size:24px; letter-spacing:-.8px }
}
@media(max-width:359px) { .hero { padding:18px }.card-bottom .reminders-button { font-size:11px } }