:root {
  --screen-w: 1872px;
  --screen-h: 1404px;
  --ink: #171717;
  --ink-2: #292929;
  --ink-3: #3d3d3d;
  --muted: #666666;
  --soft: #8b8b8b;
  --rule: #b7b7b7;
  --rule-soft: #d8d8d8;
  --wash: #eeeeee;
  --wash-2: #f5f5f5;
  --paper: #fbfbfb;
  --white: #ffffff;
  --outer-pad: 34px;
  --gap: 22px;
  --radius: 18px;
  --radius-small: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: var(--screen-w); height: var(--screen-h); overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
body { position: relative; }
.screen {
  width: var(--screen-w); height: var(--screen-h); padding: var(--outer-pad);
  background: radial-gradient(circle at 12% 8%, #ffffff 0, #ffffff 18%, transparent 42%), linear-gradient(180deg, #fbfbfb 0%, #f4f4f4 100%);
  display: grid; grid-template-columns: 0.95fr 1.18fr 1.05fr; gap: var(--gap);
}
.column { min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.panel {
  min-height: 0; overflow: hidden; border: 2px solid var(--rule); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 0 0 1px #f7f7f7; display: flex; flex-direction: column;
}
.panel.hidden { display: none; }
.weather { flex: 1 1 66%; min-height: 440px; }
.shopping { flex: 0 1 auto; max-height: 56%; min-height: 245px; }
.calendar { flex: 1 1 70%; min-height: 510px; }
.reminders { flex: 0 1 auto; max-height: 46%; min-height: 230px; }
.subway { flex: 0 0 auto; min-height: 215px; }
.feature { flex: 1 1 auto; }
.pad { padding: 25px 27px; }
.small-heading {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 13px 8px 11px; margin-bottom: 18px;
  border: 1.7px solid var(--rule); border-radius: 999px; background: var(--wash-2); color: var(--ink-3);
  font-size: 20px; line-height: 1; font-weight: 780; letter-spacing: .15px;
}
.small-heading .icon { font-size: 22px; line-height: 1; transform: translateY(-1px); }

.weather .pad { height: 100%; display: flex; flex-direction: column; }
.weather-main { display: grid; grid-template-columns: 132px 1fr auto; gap: 20px; align-items: center; padding-bottom: 20px; border-bottom: 1.7px solid var(--rule-soft); }
.weather-icon { width: 132px; height: 132px; border-radius: 50%; background: var(--wash-2); border: 2px solid var(--rule-soft); display: flex; align-items: center; justify-content: center; }
.weather-icon svg { width: 94px; height: 94px; stroke: var(--ink-2); fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.weather-temp { font-size: 108px; line-height: .88; letter-spacing: -6px; font-weight: 860; }
.weather-condition { margin-top: 8px; font-size: 33px; line-height: 1.05; font-weight: 760; letter-spacing: -0.5px; color: var(--ink-3); }
.weather-meta { text-align: right; font-size: 24px; line-height: 1.35; font-weight: 680; color: var(--muted); white-space: nowrap; }
.umbrella-alert { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 18px 0 0; padding: 14px 17px; border: 1.7px solid var(--rule); border-radius: var(--radius-small); background: #ededed; }
.umbrella-alert .umbrella { font-size: 34px; line-height: 1; }
.umbrella-alert .text { font-size: 25px; line-height: 1.18; font-weight: 760; }
.hour-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 22px; }
.hour { text-align: center; padding: 11px 6px 10px; border-radius: 12px; background: var(--wash-2); border: 1.5px solid var(--rule-soft); min-width: 0; }
.hour .time { font-size: 16px; line-height: 1; font-weight: 760; color: var(--muted); margin-bottom: 8px; }
.hour .temp { font-size: 27px; line-height: .95; font-weight: 840; letter-spacing: -0.5px; }
.hour .rain { margin-top: 7px; font-size: 15px; line-height: 1; font-weight: 740; color: var(--soft); }
.forecast-list { flex: 1 1 auto; min-height: 0; margin-top: 12px; padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.forecast-day { flex: 0 0 auto; display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; gap: 12px; padding: 9px 4px 10px; border-bottom: 1.2px solid var(--rule-soft); font-size: 22px; line-height: 1.05; }
.forecast-day:last-child { border-bottom: none; }
.forecast-day .day { font-weight: 850; }
.forecast-day .desc { color: var(--ink-3); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forecast-day .range { font-weight: 820; color: var(--ink-2); }
.weather-density-full .forecast-day { padding-top: 12px; padding-bottom: 13px; }
.weather-density-roomy .forecast-day { padding-top: 11px; padding-bottom: 12px; }
.weather-density-normal .forecast-day { padding-top: 10px; padding-bottom: 11px; }
.weather-density-compact .forecast-list { justify-content: flex-start; gap: 6px; }
.weather-density-compact .forecast-day { padding-top: 8px; padding-bottom: 9px; }
.conditions-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 0 0 auto;
}
.condition-box {
  border: 1.5px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--wash-2);
  padding: 10px 11px 9px;
  min-width: 0;
}
.condition-title {
  font-size: 14px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
}
.condition-main {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.02;
  font-weight: 820;
  color: var(--ink-2);
  white-space: nowrap;
}
.condition-detail {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.08;
  font-weight: 660;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping .pad, .reminders .pad { height: 100%; }
.shopping-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; margin: 0; padding: 0; list-style: none; }
.shopping-grid li { display: grid; grid-template-columns: 23px 1fr; gap: 10px; align-items: baseline; padding: 7px 0 8px; border-bottom: 1.2px solid var(--rule-soft); font-size: 22px; line-height: 1.12; font-weight: 650; min-width: 0; }
.check { width: 17px; height: 17px; border: 1.8px solid var(--ink-3); border-radius: 4px; transform: translateY(3px); background: var(--white); }
.more { margin-top: 14px; padding-top: 12px; border-top: 1.7px solid var(--rule); font-size: 18px; line-height: 1; font-weight: 760; color: var(--muted); letter-spacing: .3px; }

.calendar .pad { height: 100%; display: flex; flex-direction: column; }
.calendar-date { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: end; padding-bottom: 19px; border-bottom: 1.7px solid var(--rule-soft); }
.date-num { font-size: 104px; line-height: .82; font-weight: 780; letter-spacing: -6px; color: var(--ink); }
.date-text .weekday { font-size: 45px; line-height: .98; font-weight: 780; letter-spacing: -1.7px; }
.date-text .month { margin-top: 8px; font-size: 25px; line-height: 1; font-weight: 680; color: var(--muted); }
.today-events { flex: 0 0 auto; padding: 18px 0 13px; border-bottom: 1.7px solid var(--rule-soft); }
.calendar-no-events-today {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 620;
  color: var(--muted);
  padding: 6px 0 2px;
}
.event.big { display: grid; grid-template-columns: 91px 1fr; gap: 18px; padding: 12px 0; }
.event.big .time { font-size: 26px; line-height: 1.05; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.event.big .title { font-size: 31px; line-height: 1.08; font-weight: 760; letter-spacing: -0.5px; }
.event.big .meta { margin-top: 5px; font-size: 20px; line-height: 1.1; font-weight: 620; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.future-days { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 16px; }
.day-block { display: grid; grid-template-columns: 94px 1fr; gap: 18px; padding: 12px 0 14px; border-bottom: 1.2px solid var(--rule-soft); }
.day-block:last-child { border-bottom: none; }
.day-label { font-size: 21px; line-height: 1.05; font-weight: 800; color: var(--ink-3); }
.day-label span { display: block; margin-top: 5px; font-size: 17px; font-weight: 650; color: var(--soft); }
.mini-event { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 3px 0 6px; font-size: 20px; line-height: 1.12; align-items: baseline; }
.mini-event .time { font-weight: 780; color: var(--ink-3); }
.mini-event-body { min-width: 0; }
.mini-event .title { color: var(--ink-2); font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta { margin-top: 2px; font-size: 16px; line-height: 1.1; font-weight: 620; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reminder-list { display: flex; flex-direction: column; gap: 0; }
.reminder { display: grid; grid-template-columns: 8px 1fr; gap: 14px; padding: 10px 0 12px; border-bottom: 1.2px solid var(--rule-soft); }
.reminder:last-child { border-bottom: none; }
.pin { width: 8px; height: 8px; margin-top: 11px; border-radius: 50%; background: var(--ink-3); }
.reminder-main { font-size: 24px; line-height: 1.14; font-weight: 690; letter-spacing: -0.15px; }
.reminder-sub { margin-top: 4px; font-size: 17px; line-height: 1.12; font-weight: 620; color: var(--soft); }

.subway .pad { padding-bottom: 20px; }
.subway-top { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; margin-bottom: 16px; }
.station { font-size: 37px; line-height: .95; font-weight: 760; letter-spacing: -1px; }
.route-pill { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink-2); display: inline-flex; justify-content: center; align-items: center; font-size: 25px; line-height: 1; font-weight: 820; background: var(--wash-2); }
.train-times { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.train-time { border: 1.6px solid var(--rule); border-radius: 999px; padding: 8px 14px 9px; background: var(--wash-2); font-size: 30px; line-height: 1; font-weight: 760; letter-spacing: -0.7px; white-space: nowrap; }
.service-alert { margin-top: 15px; padding-top: 13px; border-top: 1.4px solid var(--rule-soft); font-size: 20px; line-height: 1.22; font-weight: 690; color: var(--ink-3); }

.feature .pad { height: 100%; padding: 20px; display: flex; flex-direction: column; }
.feature-frame { flex: 1; min-height: 0; border-radius: 14px; border: 1.7px solid var(--rule); background: radial-gradient(circle at 26% 22%, #ffffff 0, #ffffff 10%, transparent 25%), linear-gradient(135deg, #eeeeee 0%, #f9f9f9 42%, #e7e7e7 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 30px; }
.comic-card { width: 88%; min-height: 58%; border: 2px solid var(--ink-3); border-radius: 12px; background: var(--white); padding: 34px; display: grid; grid-template-rows: 1fr auto; gap: 30px; }
.comic-art { border: 1.7px solid var(--rule); border-radius: 10px; background: linear-gradient(90deg, transparent 0 47%, #dedede 47% 53%, transparent 53% 100%), linear-gradient(0deg, transparent 0 47%, #ededed 47% 53%, transparent 53% 100%), #f8f8f8; background-size: 48px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
.bubble { align-self: start; border: 1.6px solid var(--ink-3); border-radius: 18px; background: var(--white); padding: 18px; font-family: var(--serif); font-size: 25px; line-height: 1.18; font-weight: 700; }
.comic-caption { font-family: var(--serif); font-size: 29px; line-height: 1.18; font-weight: 700; text-align: center; color: var(--ink-2); }

.feature.news-mode .feature-frame,
.feature.poem-mode .feature-frame,
.feature.message-mode .feature-frame,
.feature.comic-mode .feature-frame { align-items: stretch; justify-content: stretch; padding: 26px; }
.feature-comic-layout { display: none; flex: 1; min-height: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 18px; }
.feature.comic-mode .feature-comic-layout { display: flex; }
.comic-zone { flex: 1 1 58%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.comic-image-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-start; justify-content: center; }
.comic-image-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: top center; }
.comic-placeholder { font-size: 22px; font-weight: 640; color: var(--muted); text-align: center; padding: 20px 12px; }
.feature-secondary { flex: 0 1 auto; min-height: 0; width: 100%; border-top: 1.4px solid var(--rule-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.secondary-item { padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
.secondary-item:last-child { border-bottom: none; padding-bottom: 0; }
.secondary-title { font-size: 20px; line-height: 1.15; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.secondary-text { font-size: 19px; line-height: 1.22; font-weight: 620; color: var(--muted); }
.feature-news-secondary { gap: 8px; }
.secondary-heading { font-size: 17px; line-height: 1; font-weight: 760; letter-spacing: 0.6px; color: var(--soft); margin-bottom: 2px; text-transform: uppercase; }
.feature-news-secondary .secondary-item { padding-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.secondary-headline-title { font-size: 18px; line-height: 1.16; font-weight: 700; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.secondary-headline-description { font-size: 16px; line-height: 1.16; font-weight: 590; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.news-list, .poem-card, .message-card { display: none; width: 100%; height: 100%; overflow: hidden; }
.feature.news-mode .news-list,
.feature.poem-mode .poem-card,
.feature.message-mode .message-card { display: block; }
.feature.news-mode .comic-card,
.feature.poem-mode .comic-card,
.feature.message-mode .comic-card,
.feature.comic-mode .comic-card { display: none; }
.headline { padding: 18px 0 20px; border-bottom: 1.5px solid var(--rule-soft); }
.headline:first-child { padding-top: 0; }
.headline:last-child { border-bottom: none; }
.headline h2 { margin: 0; font-size: 35px; line-height: 1.06; letter-spacing: -1px; font-weight: 760; }
.headline p { margin: 8px 0 0; font-size: 22px; line-height: 1.22; color: var(--muted); font-weight: 620; }
.poem-card, .message-card { border: 1.6px solid var(--rule); border-radius: 12px; background: var(--white); padding: 30px; }
.poem-title, .message-title { font-size: 34px; line-height: 1.05; margin: 0 0 16px; font-weight: 760; }
.poem-lines { font-family: var(--serif); font-size: 30px; line-height: 1.3; white-space: pre-line; }
.message-body { font-size: 30px; line-height: 1.28; font-weight: 650; }

@media screen and (max-width: 1871px) {
  body.preview-scale { transform-origin: top left; transform: scale(calc(100vw / 1872)); }
}