:root {
  --paper: #f7f0df;
  --paper-deep: #eadfc6;
  --paper-light: #fffaf0;
  --ink: #173b54;
  --ink-soft: #466171;
  --terracotta: #c66f52;
  --mustard: #d0a84b;
  --olive: #6f7d56;
  --sky: #a7ccd3;
  --rose: #b66e7c;
  --line: #cfc1a4;
  --shadow: 0 14px 34px rgba(43, 52, 48, .18);
  --display: cursive;
  --body: serif;
  --utility: "sans-serif-condensed", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; }
body {
  background-color: #4c2e1d;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, rgba(44,22,12,.05) 2px 5px, transparent 5px 145px), linear-gradient(90deg, #402416, #68452c 48%, #3d2317);
  color: var(--ink);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(198, 111, 82, .55); outline-offset: 2px; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.app-shell { min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(72px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
.topbar {
  height: 62px; padding: 8px clamp(12px, 2vw, 28px); display: flex; align-items: center; justify-content: space-between;
  background: rgba(247, 240, 223, .93); border-bottom: 1px solid rgba(23, 59, 84, .17); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 30;
}
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; padding: 0; text-align: left; }
.brand b { display: block; font-family: var(--display); font-size: 23px; line-height: 1; letter-spacing: .02em; }
.brand small { display: block; margin-top: 2px; font: 9px/1 var(--utility); letter-spacing: .13em; color: var(--ink-soft); }
.brand-mark { width: 34px; height: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px 4px; background: var(--ink); border-radius: 6px 6px 10px 10px; box-shadow: 0 4px 0 var(--terracotta); }
.brand-mark span { background: var(--paper); border-radius: 2px; }
.topbar-date { text-align: center; font: 12px/1.1 var(--utility); letter-spacing: .06em; }
.topbar-date small { display: block; margin-top: 3px; color: var(--terracotta); font-size: 9px; letter-spacing: .12em; }
.icon-button, .back-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(23, 59, 84, .2); border-radius: 50%; background: rgba(255,255,255,.42); }

.views { min-height: calc(100dvh - 134px); }
.view { display: none; }
.view.is-active { display: block; animation: page-in .32s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(9px) scale(.995); } }

.book { width: min(1420px, calc(100vw - 30px)); min-height: calc(100dvh - 150px); margin: 10px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); padding: 7px; background: linear-gradient(125deg,#74543b,#4a2e20 48%,#79583e); border: 2px solid rgba(38,20,12,.7); border-radius: 31px; box-shadow: inset 0 0 0 3px rgba(238,207,161,.12), 0 20px 32px rgba(25,13,8,.38); }
.paper-page { position: relative; min-width: 0; padding: clamp(18px, 2.2vw, 32px); background-color: var(--paper); background-image: radial-gradient(rgba(23,59,84,.035) .7px, transparent .7px), linear-gradient(90deg, transparent 97%, rgba(23,59,84,.035)); background-size: 8px 8px, 22px 100%; overflow: hidden; }
.left-page { border-radius: 22px 3px 3px 22px; box-shadow: inset 10px 0 18px rgba(120,84,47,.08); }
.right-page { border-radius: 3px 22px 22px 3px; box-shadow: inset -10px 0 18px rgba(120,84,47,.08); }
.page-rule { position: absolute; inset: 15px; border: 1px solid rgba(23,59,84,.09); border-radius: 18px; pointer-events: none; }
.book-spine { background: linear-gradient(90deg, rgba(60,52,41,.2), rgba(255,255,255,.34) 44%, rgba(44,40,35,.17)); box-shadow: inset 2px 0 5px rgba(0,0,0,.12), inset -2px 0 5px rgba(0,0,0,.08); z-index: 3; }
.paper-card { position: relative; background: rgba(255, 250, 240, .76); border: 1px solid rgba(68, 86, 81, .17); box-shadow: 0 5px 0 rgba(91,74,49,.05); }
.eyebrow { display: block; font: 10px/1.2 var(--utility); letter-spacing: .16em; color: var(--terracotta); }
.section-heading { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; border-bottom: 1px solid rgba(23,59,84,.16); }
.section-heading > span { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 17px; }
.section-heading svg { width: 17px; }
.section-heading small { font: 10px var(--utility); color: var(--ink-soft); }
.text-button { border: 0; background: transparent; color: var(--terracotta); padding: 5px; font: 11px var(--utility); text-decoration: underline; text-underline-offset: 3px; }

.weather-card { height: 124px; display: grid; grid-template-columns: 160px minmax(130px, .75fr) minmax(160px, .85fr); align-items: stretch; overflow: hidden; border-radius: 4px 18px 5px 5px; background: linear-gradient(115deg, #8dbcc5, #d8e2d2 58%, #f2d294); border: 1px solid rgba(23,59,84,.15); box-shadow: 0 8px 18px rgba(75,95,89,.18); }
.lift-card { transition: transform .24s ease, box-shadow .24s ease; }
.lift-card:active, .lift-card:focus { transform: translateY(-4px) rotate(-.2deg); box-shadow: 0 14px 28px rgba(75,95,89,.24); }
.weather-visual { position: relative; overflow: hidden; min-width: 0; background: linear-gradient(#7eb0c0, #d0e1d7 62%, #859a68 63%, #647a50); }
.sun { position: absolute; width: 47px; height: 47px; border-radius: 50%; background: #f2cb61; top: 16px; left: 24px; box-shadow: 0 0 0 10px rgba(242,203,97,.18); }
.cloud { position: absolute; width: 86px; height: 26px; border-radius: 24px; background: #ecede2; box-shadow: 22px -16px 0 2px #ecede2, 48px -6px 0 -3px #ecede2; }
.cloud-a { left: 58px; top: 57px; }
.cloud-b { left: 5px; top: 92px; transform: scale(.6); opacity: .67; }
.weather-main { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; border-right: 1px solid rgba(23,59,84,.14); }
.weather-main strong { font: 48px/.95 var(--utility); letter-spacing: -.06em; }
.weather-main > span:last-child { margin-top: 5px; font-size: 13px; }
.weather-stats { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 8px 10px; padding: 12px 16px; font: 12px var(--utility); }
.weather-stats span:nth-child(3), .weather-stats small { grid-column: 1 / -1; }
.weather-stats small { color: var(--ink-soft); font-size: 9px; }

.news-card { margin-top: 12px; padding: 9px 13px 11px; transform: rotate(.18deg); }
.news-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.news-item { min-width: 0; display: grid; grid-template-columns: 54px 1fr; align-items: center; border: 0; border-bottom: 1px dashed var(--line); background: transparent; text-align: left; padding: 4px 7px; }
.news-item:last-child { border-bottom: 0; }
.news-item small { display: block; color: var(--terracotta); font: 9px var(--utility); letter-spacing: .08em; }
.news-item b { display: block; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.35; font-size: 11px; }

.today-card { margin-top: 12px; padding: 9px 13px 10px; transform: rotate(-.12deg); }
.completed-toggle { border: 1px solid rgba(23,59,84,.22); border-radius: 15px; background: transparent; padding: 4px 9px; font: 10px var(--utility); }
.completed-toggle.is-active { color: var(--paper-light); background: var(--ink); }
.today-list { display: grid; }
.task-row { min-height: 36px; display: grid; grid-template-columns: 32px 46px 1fr auto; align-items: center; border-bottom: 1px solid rgba(23,59,84,.1); }
.task-row:last-child { border-bottom: 0; }
.task-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; }
.task-check svg { width: 14px; opacity: 0; }
.task-check.is-done { color: var(--olive); background: rgba(111,125,86,.13); }
.task-check.is-done svg { opacity: 1; }
.task-time { font: 11px var(--utility); color: var(--ink-soft); }
.task-open { min-width: 0; border: 0; background: transparent; padding: 8px 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row.is-done .task-open { text-decoration: line-through; opacity: .5; }
.category-tag { padding: 3px 6px; border-radius: 2px; color: var(--paper-light); font: 8px var(--utility); letter-spacing: .05em; }
.category-tag.self { background: var(--terracotta); }.category-tag.family { background: #d48a50; }.category-tag.children { background: #4d7fa8; }.category-tag.maru { background: var(--olive); }.category-tag.work { background: var(--ink-soft); }
.empty-state { padding: 22px; text-align: center; color: var(--ink-soft); font-style: italic; }
.upcoming-toggle { display: none; width: 100%; margin-top: 6px; padding: 7px 8px; border: 0; border-top: 1px solid rgba(23,59,84,.17); background: transparent; justify-content: space-between; }
.cover-upcoming { display: none; }

.favorites { display: flex; align-items: center; justify-content: center; gap: clamp(13px, 2.2vw, 27px); margin: 14px 72px 0 0; }
.favorites button { width: 54px; border: 0; background: transparent; padding: 0; }
.favorites small { display: block; margin-top: 4px; font: 8px var(--utility); }
.app-tile { width: 42px; height: 42px; margin: auto; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.7); border-radius: 13px 13px 8px 8px; color: white; font: 700 16px var(--utility); box-shadow: 0 4px 7px rgba(46,53,49,.16); }
.youtube { background: #bd594d; }.line { background: #64875c; }.maps { background: #527b95; }.camera { background: #7d6b8f; }.mail { background: #b48a48; }
.page-fold-actions { position: absolute; right: 0; bottom: 0; width: 80px; height: 80px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; padding: 0 8px 9px 0; background: linear-gradient(135deg, transparent 50%, #dfcfad 51%, #f7eacb 100%); }
.page-fold-actions button { width: 29px; height: 29px; border: 1px solid rgba(23,59,84,.18); border-radius: 50%; background: rgba(255,250,240,.74); display: grid; place-items: center; }
.page-fold-actions svg { width: 15px; }

.right-header { min-height: 84px; display: flex; justify-content: space-between; align-items: flex-start; padding-right: 102px; }
.right-header h1, .detail-header h1 { margin: 2px 0 0; font: 31px/1.1 var(--display); letter-spacing: .02em; }
.mini-photo { position: absolute; border: 7px solid var(--paper-light); background: var(--paper-deep); box-shadow: 0 5px 12px rgba(64,54,41,.19); overflow: hidden; z-index: 2; }
.mini-photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.mini-photo.has-photo img { display: block; }.mini-photo.has-photo .photo-placeholder { display: none; }
.photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-soft); }
.top-photo { width: 92px; height: 78px; top: 17px; right: 24px; transform: rotate(3deg); }
.bottom-photo { width: 96px; height: 82px; position: relative; right: auto; bottom: auto; flex: 0 0 auto; transform: rotate(-4deg); }
.category-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.category-filter { border: 1px solid currentColor; border-radius: 16px; background: transparent; padding: 5px 9px; font: 10px var(--utility); opacity: .48; }
.category-filter.is-active { opacity: 1; color: white; }
.category-filter.self.is-active { background: var(--terracotta); }.category-filter.family.is-active { background: #d48a50; }.category-filter.children.is-active { background: #4d7fa8; }.category-filter.maru.is-active { background: var(--olive); }.category-filter.work.is-active { background: var(--ink-soft); }
.calendar-card { background: rgba(255,250,240,.66); border: 1px solid rgba(23,59,84,.16); padding: 8px; }
.calendar-controls { height: 29px; display: flex; justify-content: space-between; align-items: center; font-family: var(--display); }
.calendar-controls button { width: 32px; height: 27px; border: 0; background: transparent; font-size: 24px; }
.week-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.week-row span { padding: 5px 0; text-align: center; color: var(--ink-soft); font: 9px var(--utility); }
.calendar-day { position: relative; aspect-ratio: 1.18; min-height: 35px; border: 0; border-top: 1px solid rgba(23,59,84,.1); border-right: 1px solid rgba(23,59,84,.07); background: transparent; font: 12px var(--utility); }
.calendar-day.is-other { opacity: .25; }
.calendar-day.is-today::before { content: ""; position: absolute; inset: 4px; border: 1.5px solid var(--terracotta); border-radius: 50%; }
.calendar-day.is-selected { background: rgba(167,204,211,.37); }
.day-dots { position: absolute; bottom: 3px; left: 3px; right: 3px; display: flex; justify-content: center; gap: 2px; }
.day-dots i { width: 4px; height: 4px; border-radius: 50%; }
.day-agenda { margin-top: 9px; }
.agenda-row { min-height: 34px; display: grid; grid-template-columns: 8px 45px 1fr; align-items: center; gap: 7px; border-bottom: 1px dashed rgba(23,59,84,.14); }
.agenda-row i { width: 7px; height: 23px; border-radius: 3px; }
.agenda-row time { font: 10px var(--utility); color: var(--ink-soft); }
.agenda-row button { min-width: 0; border: 0; background: transparent; padding: 7px 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.right-bottom-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-right: 8px; }
.quick-memo { min-width: 0; flex: 1; min-height: 66px; display: flex; align-items: center; gap: 12px; border: 0; padding: 10px 12px; text-align: left; transform: rotate(.5deg); }
.quick-memo > svg { width: 27px; height: 27px; color: var(--terracotta); }
.quick-memo span { min-width: 0; }.quick-memo b, .quick-memo small { display: block; }.quick-memo small { margin-top: 3px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-tabs { position: absolute; right: 0; top: 108px; display: grid; gap: 5px; z-index: 5; }
.index-tabs button { width: 48px; height: 27px; padding: 5px 3px; border: 0; color: white; font: 8px var(--utility); letter-spacing: .03em; writing-mode: horizontal-tb; border-radius: 6px 0 0 6px; transform: translateX(17px); }
.index-tabs button:nth-child(1){background:var(--terracotta)}.index-tabs button:nth-child(2){background:var(--olive)}.index-tabs button:nth-child(3){background:var(--ink)}.index-tabs button:nth-child(4){background:var(--mustard);color:var(--ink)}.index-tabs button:nth-child(5){background:#8a6650}.index-tabs button:nth-child(6){background:#5f5964}

.bottom-nav { position: fixed; z-index: 40; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(430px, calc(100vw - 22px)); height: 59px; display: flex; justify-content: space-around; align-items: center; padding: 5px 10px; border: 1px solid rgba(247,240,223,.35); border-radius: 22px; background: rgba(16,44,62,.95); box-shadow: 0 12px 30px rgba(16,44,62,.35); backdrop-filter: blur(18px); }
.bottom-nav button { min-width: 65px; border: 0; background: transparent; color: #d8e1dd; opacity: .67; }
.bottom-nav button.is-active { color: #f7f0df; opacity: 1; }
.bottom-nav svg { width: 21px; height: 21px; display: block; margin: auto; }
.bottom-nav span { display: block; margin-top: 3px; font: 9px var(--utility); }
.more-sheet { position: fixed; z-index: 39; left: 50%; bottom: calc(73px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(430px, calc(100vw - 22px)); padding: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.more-sheet button { border: 0; background: transparent; padding: 8px 2px; }
.more-sheet svg { display: block; width: 23px; height: 23px; margin: 0 auto 5px; }
.more-sheet span { font: 9px var(--utility); }

.detail-view { padding: 10px; }
.detail-paper { width: min(1180px, 100%); min-height: calc(100dvh - 154px); margin: auto; padding: clamp(16px, 3vw, 38px); background-color: var(--paper); background-image: linear-gradient(rgba(23,59,84,.045) 1px, transparent 1px); background-size: 100% 31px; border-radius: 24px; box-shadow: var(--shadow); }
.detail-header { min-height: 58px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 12px; margin-bottom: 19px; border-bottom: 2px solid var(--ink); }
.detail-header h1 { font-size: 32px; }
.autosave { font: 10px var(--utility); color: var(--olive); }
.primary-small { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 3px; background: var(--ink); color: white; padding: 9px 13px; font: 11px var(--utility); }
.memo-layout { position: relative; display: grid; grid-template-columns: .75fr 1.25fr; gap: 18px; }
.coffee-cup { position: absolute; z-index: 4; width: 100px; height: 100px; right: 18px; top: -7px; border-radius: 50%; background: radial-gradient(circle at center,#2a160e 0 29%,#b48052 30% 38%,#f3e4c5 39% 55%,#7c563d 56% 58%,transparent 59%); filter: drop-shadow(7px 9px 8px rgba(67,43,27,.26)); pointer-events: none; }
.coffee-cup::after { content:""; position:absolute; width:34px; height:24px; border:8px solid #e8d7b6; border-left:0; border-radius:0 22px 22px 0; right:-10px; top:35px; transform:rotate(13deg); }
.coffee-cup span { position:absolute; width:120px; height:34px; left:-10px; bottom:-13px; border-radius:50%; background:rgba(82,52,31,.2); filter:blur(7px); }
.text-memo, .drawing-memo { padding: 14px; }
.text-memo textarea { width: 100%; height: 390px; resize: none; border: 0; background: repeating-linear-gradient(transparent 0 30px, rgba(23,59,84,.12) 30px 31px); font: 17px/31px var(--display); outline: 0; }
.voice-button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(23,59,84,.2); border-radius: 16px; background: transparent; padding: 5px 9px; font: 10px var(--utility); }
.voice-button svg { width: 14px; }
.drawing-tools { display: flex; gap: 5px; }
.drawing-tools button { border: 1px solid currentColor; background: transparent; border-radius: 12px; padding: 4px 8px; font: 9px var(--utility); }
.drawing-tools button.is-active { background: var(--ink); color: white; }
#drawingCanvas { width: 100%; height: 390px; display: block; background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(23,59,84,.1) 30px 31px), linear-gradient(90deg, transparent 45px, rgba(198,111,82,.18) 45px 46px, transparent 46px); touch-action: none; }
.drawing-memo > small { display: block; margin-top: 8px; color: var(--ink-soft); font: 10px var(--utility); }

.chart-paper { background: #102c3e; color: #e8eadf; background-image: radial-gradient(rgba(167,204,211,.12) 1px, transparent 1px); background-size: 21px 21px; }
.chart-paper .detail-header { border-color: #8eaeb3; }.chart-paper .eyebrow { color: #efb665; }.chart-paper .back-button { color: white; border-color: rgba(255,255,255,.2); }
.symbol-strip { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; }
.symbol-strip button { flex: 0 0 auto; border: 1px solid rgba(232,234,223,.24); border-radius: 16px; background: transparent; color: #dfe6df; padding: 7px 14px; font: 10px var(--utility); }
.symbol-strip button.is-active { background: #d0a84b; color: #102c3e; border-color: #d0a84b; }
.chart-stage { height: min(610px, calc(100dvh - 270px)); min-height: 390px; padding: 15px; border: 1px solid rgba(167,204,211,.25); background: rgba(4,20,30,.58); }
.chart-topline { display: grid; grid-template-columns: 1fr auto; gap: 3px 20px; align-items: end; }
.chart-topline div { display: flex; gap: 10px; align-items: center; }.chart-topline b { font: 22px var(--utility); }.chart-topline span { color: #9fb5b7; font: 10px var(--utility); }.chart-topline strong { color: #d7c26e; font: 25px var(--utility); }.chart-topline small { grid-column: 1 / -1; color: #89a6aa; font: 9px var(--utility); }
#chartCanvas { width: 100%; height: calc(100% - 52px); display: block; }

.news-page-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.news-page-card { min-height: 150px; border: 1px solid rgba(23,59,84,.15); background: rgba(255,250,240,.78); padding: 16px; text-align: left; box-shadow: 4px 6px 0 rgba(198,111,82,.09); }
.news-page-card small { color: var(--terracotta); font: 9px var(--utility); }.news-page-card h2 { margin: 8px 0; font: 19px/1.45 var(--display); }.news-page-card p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.news-detail { margin-top: 18px; padding: 22px; }.news-detail h2 { font: 25px/1.4 var(--display); }.news-detail p { line-height: 1.9; }.news-detail button { border: 0; background: transparent; color: var(--terracotta); padding: 0; }
.photo-page-grid { min-height: 490px; display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 30px; background: radial-gradient(circle at 20% 30%, rgba(167,204,211,.23), transparent 35%), radial-gradient(circle at 80% 60%, rgba(208,168,75,.2), transparent 30%); }
.large-polaroid { width: min(330px, 85%); aspect-ratio: 4/5; padding: 14px 14px 48px; border: 0; background: var(--paper-light); box-shadow: 0 15px 30px rgba(65,55,42,.23); transform: rotate(-2deg); }
.large-polaroid.tilt { transform: rotate(3deg); }.large-polaroid img { width: 100%; height: 100%; object-fit: cover; background: var(--paper-deep); }.large-polaroid span { display: block; margin-top: 14px; font: 17px var(--display); }
.large-polaroid img:not([src]) { opacity: 0; }
.family-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 17px; }
.family-card { min-height: 118px; padding: 13px; color: white; transform: rotate(var(--tilt)); }.family-card b { display: block; font: 20px var(--display); }.family-card strong { display: block; margin-top: 20px; font: 25px var(--utility); }.family-card small { font: 9px var(--utility); opacity: .8; }
.history { padding: 15px; }.history-row { display: grid; grid-template-columns: 90px 65px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px dashed rgba(23,59,84,.15); }.history-row time, .history-row span { font: 10px var(--utility); }.history-row span { color: var(--terracotta); }
.widget-editor { display: grid; grid-template-columns: 1fr 340px; gap: 25px; }
.lock-preview { min-height: 570px; border-radius: 34px; padding: 45px 26px 25px; background: linear-gradient(145deg,#28475a,#6e8e88 55%,#c39a67); color: #fffaf0; box-shadow: inset 0 0 0 8px #162832, var(--shadow); }
.lock-time { text-align: center; font: 65px/1 var(--utility); letter-spacing: -.05em; }.lock-date { text-align: center; margin: 5px 0 65px; font: 15px var(--display); }
.lock-card { padding: 18px; border: 1px solid rgba(255,255,255,.33); border-radius: 22px; background: rgba(247,240,223,.88); color: var(--ink); backdrop-filter: blur(18px); }.lock-card > div:first-child { display: grid; grid-template-columns: 1fr auto; }.lock-card strong { font: 38px var(--utility); }.lock-card small { grid-column: 1 / -1; }
#lockTodos { min-height: 85px; margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(23,59,84,.15); line-height: 1.8; }
.lock-apps { display: flex !important; justify-content: space-between; gap: 7px; }.lock-apps span { flex: 1; padding: 8px 3px; border-radius: 9px; background: var(--paper-deep); text-align: center; font: 8px var(--utility); }
.widget-options { padding: 15px; align-self: start; }.widget-options h2 { margin-top: 0; font: 22px var(--display); }.widget-options label { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(23,59,84,.12); }.widget-options p { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.settings-list { padding: 6px 18px; }.settings-list > button, .settings-list > label { width: 100%; min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border: 0; border-bottom: 1px solid rgba(23,59,84,.14); background: transparent; padding: 12px 0; text-align: left; }.settings-list b, .settings-list small { display: block; }.settings-list small { margin-top: 5px; color: var(--ink-soft); }.settings-list input[type="text"] { width: 130px; border: 1px solid rgba(23,59,84,.2); background: var(--paper-light); padding: 8px; }.settings-list svg { width: 21px; }
.version-note { text-align: center; color: var(--ink-soft); font: 10px/1.7 var(--utility); }

dialog { width: min(520px, calc(100vw - 28px)); border: 0; padding: 0; color: var(--ink); background: transparent; }
dialog::backdrop { background: rgba(16,44,62,.65); backdrop-filter: blur(3px); }
#taskForm { position: relative; padding: 26px; background-color: var(--paper); background-image: repeating-linear-gradient(transparent 0 31px, rgba(23,59,84,.09) 31px 32px); border-radius: 3px 16px 4px 7px; box-shadow: var(--shadow); }
.tape { position: absolute; width: 110px; height: 27px; left: 50%; top: -10px; transform: translateX(-50%) rotate(-2deg); background: rgba(208,168,75,.47); }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; }.dialog-heading h2 { margin: 2px 0 13px; font: 26px var(--display); }.dialog-heading > button { border: 0; background: transparent; font-size: 26px; }
#taskForm > label, .form-row label { display: grid; gap: 5px; margin: 11px 0; font: 11px var(--utility); }
#taskForm input:not([type="checkbox"]), #taskForm textarea, #taskForm select { width: 100%; border: 1px solid rgba(23,59,84,.18); border-radius: 2px; background: rgba(255,250,240,.72); padding: 10px; font-family: var(--body); }
#taskForm textarea { min-height: 68px; resize: vertical; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.check-label { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }.check-label input { width: 20px; height: 20px; accent-color: var(--olive); }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 17px; }.dialog-actions .danger { margin-right: auto; color: #a54d42; }.dialog-actions > button { min-height: 38px; }.dialog-actions .primary { border: 0; background: var(--ink); color: white; padding: 8px 20px; }.danger { border: 0; background: transparent; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: calc(100vw - 30px); padding: 10px 17px; border-radius: 18px; background: var(--ink); color: var(--paper-light); opacity: 0; pointer-events: none; transition: .2s ease; font: 11px var(--utility); }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

body.dark { --paper:#162f3d; --paper-deep:#233f4d; --paper-light:#294957; --ink:#edf0e6; --ink-soft:#b6c8c9; --line:#506b70; --shadow:0 14px 34px rgba(0,0,0,.35); color-scheme:dark; background:#0b202c; }
body.dark .paper-page, body.dark .detail-paper { background-image: radial-gradient(rgba(232,234,223,.04) .7px, transparent .7px); }
body.dark .topbar { background: rgba(22,47,61,.94); }.dark .weather-card { color:#173b54 }.dark input,.dark textarea,.dark select { color: var(--ink); }

@media (min-width: 840px) {
  .app-shell { padding: 0 0 8px; }
  .topbar { display: none; }
  .views { min-height: 100dvh; }
  .book { min-height: calc(100dvh - 16px); margin-top: 8px; }
  .bottom-nav, .more-sheet { display: none !important; }
  .detail-view { min-height: 100dvh; padding: 9px; }
  .detail-paper { min-height: calc(100dvh - 18px); border: 8px solid #674833; border-radius: 24px; box-shadow: inset 0 0 0 2px rgba(255,247,225,.6), 0 20px 36px rgba(26,14,8,.4); }
}

@media (max-width: 839px) {
  .app-shell { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .topbar { height: 55px; }
  .brand small { display: none; }.brand-mark { width: 30px; height: 32px; }.brand b { font-size: 20px; }
  .views { min-height: calc(100dvh - 125px); }
  .book { display: block; width: 100%; min-height: calc(100dvh - 126px); margin-top: 0; filter: none; }
  .paper-page { padding: 10px 11px 18px; border-radius: 0; min-height: calc(100dvh - 126px); }
  .right-page, .book-spine { display: none; }
  .page-rule { inset: 6px; border-radius: 10px; }
  .weather-card { height: 92px; grid-template-columns: 105px 1fr 1fr; border-radius: 4px 12px 4px 4px; }
  .weather-main { padding: 8px 10px; }.weather-main strong { font-size: 37px; }.weather-main > span:last-child { font-size: 10px; }.weather-stats { padding: 8px 9px; gap: 4px 7px; font-size: 9px; }.weather-visual { min-width: 0; }.sun { width: 35px; height: 35px; top: 12px; left: 16px; }.cloud { transform: scale(.7); transform-origin: left top; }.cloud-a { left: 35px; top: 48px; }.cloud-b { display: none; }
  .news-card, .today-card { margin-top: 8px; padding: 6px 9px 7px; }
  .section-heading { min-height: 28px; margin-bottom: 3px; }.section-heading > span { font-size: 15px; }
  .news-item { padding: 3px 6px; }.news-item:nth-child(3) { display: none; }.news-list { grid-template-columns: repeat(2,1fr); }.news-item:nth-child(2) { border-right: 0; }.news-item b { font-size: 10px; line-height: 1.3; }.news-item small { font-size: 8px; }
  .task-row { min-height: 33px; grid-template-columns: 29px 42px 1fr auto; }.task-open { padding: 6px 3px; font-size: 12px; }.category-tag { font-size: 7px; }
  .upcoming-toggle { display: flex; }.cover-upcoming.is-open { display: block; }.cover-upcoming .agenda-row { grid-template-columns: 62px 1fr; }.cover-upcoming .agenda-row i { display: none; }
  .favorites { gap: 11px; margin: 9px 62px 0 0; justify-content: space-around; }.favorites button { width: 44px; }.app-tile { width: 34px; height: 34px; border-radius: 10px 10px 6px 6px; font-size: 13px; }.favorites small { font-size: 7px; }
  .page-fold-actions { width: 65px; height: 65px; }.page-fold-actions button { width: 26px; height: 26px; }
  .detail-view { padding: 0; }.detail-paper { min-height: calc(100dvh - 125px); padding: 13px 11px 22px; border-radius: 0; }.detail-header { min-height: 50px; margin-bottom: 12px; grid-template-columns: 38px 1fr auto; gap: 7px; }.detail-header h1 { font-size: 25px; }.back-button { width: 34px; height: 34px; }
  .memo-layout { grid-template-columns: 1fr; gap: 10px; }.text-memo textarea { height: 170px; }.drawing-memo { min-height: 350px; }#drawingCanvas { height: 270px; }
  .chart-stage { height: calc(100dvh - 250px); min-height: 350px; padding: 10px; }.primary-small { padding: 7px 9px; font-size: 9px; }
  .news-page-list { grid-template-columns: 1fr; gap: 8px; }.news-page-card { min-height: 105px; padding: 12px; }.news-page-card h2 { font-size: 16px; margin: 5px 0; }
  .photo-page-grid { min-height: calc(100dvh - 210px); grid-template-columns: 1fr 1fr; gap: 5px; }.large-polaroid { width: 92%; padding: 7px 7px 32px; }.large-polaroid span { font-size: 12px; margin-top: 8px; }
  .family-grid { grid-template-columns: repeat(2, 1fr); }.family-card:last-child { grid-column: 1 / -1; }.history-row { grid-template-columns: 65px 50px 1fr; }
  .widget-editor { grid-template-columns: 1fr; }.lock-preview { min-height: 440px; padding-top: 32px; }.lock-time { font-size: 55px; }.lock-date { margin-bottom: 35px; }
}

@media (max-width: 430px) {
  .topbar-date { font-size: 10px; }.icon-button { width: 36px; height: 36px; }
  .weather-card { grid-template-columns: 92px .9fr 1.05fr; }.weather-main strong { font-size: 32px; }.weather-main .eyebrow { font-size: 7px; }.weather-stats { font-size: 8px; }
  .today-list .task-row:nth-child(n+5) { display: none; }
  .bottom-nav { height: 57px; bottom: calc(6px + env(safe-area-inset-bottom)); }
}

@media (max-height: 720px) and (max-width: 839px) {
  .weather-card { height: 80px; }.news-card, .today-card { margin-top: 6px; }.news-card .section-heading { display: none; }.news-item b { -webkit-line-clamp: 1; }.task-row { min-height: 29px; }.today-list .task-row:nth-child(n+4) { display: none; }.favorites { margin-top: 5px; }.app-tile { width: 30px; height: 30px; }.favorites small { display: none; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .topbar { height: 48px; }.app-shell { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }.book { min-height: calc(100dvh - 108px); }.paper-page { min-height: calc(100dvh - 108px); }
  .bottom-nav { height: 50px; }.weather-card { height: 72px; }.news-card { display: none; }.task-row { min-height: 28px; }.today-list .task-row:nth-child(n+4) { display:none; }
}

@media (min-width: 840px) and (max-height: 900px) {
  .book { height: calc(100dvh - 16px); min-height: 0; }.paper-page { padding-top: 17px; padding-bottom: 15px; }.weather-card { height: 100px; }.news-card,.today-card { margin-top: 8px; }.news-item { padding-top: 2px; padding-bottom: 2px; }.task-row { min-height: 31px; }.calendar-day { min-height: 0; height: 34px; aspect-ratio: auto; }.right-header { min-height: 70px; }.top-photo { height: 64px; }.agenda-row { min-height: 30px; }.right-bottom-row { margin-top: 4px; }.quick-memo { min-height: 48px; }.bottom-photo { width: 76px; height: 61px; }
}

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