:root {
  --paper: #f3eee4;
  --paper-deep: #eae1d2;
  --ink: #383b38;
  --muted: #625f58;
  --sage: #526a59;
  --sage-soft: #c9d1c4;
  --blue: #526971;
  --blue-soft: #cbd6d8;
  --terra: #964d38;
  --terra-soft: #e4c2b6;
  --line: rgba(61, 62, 57, .15);
  --shadow: 0 18px 60px rgba(64, 54, 43, .12);
  --sans: "DM Sans", "Noto Sans TC", system-ui, sans-serif;
  --hand: "Patrick Hand", "Noto Sans TC", cursive;
  --journal: "LXGW WenKai TC", "Noto Sans TC", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-body-height: 70px;
}

* { box-sizing: border-box; }
html { background: #d9d1c4; color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.38), transparent 27rem),
    #d9d1c4;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  position: relative;
  width: min(100%, 760px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(rgba(83,75,63,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,75,63,.025) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
  box-shadow: var(--shadow);
}
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 80;
}

.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top) 20px 0;
  border-bottom: 1px solid rgba(61,62,57,.08);
}
.brand { display:flex; align-items:center; gap:9px; font-size:1.125rem; font-weight:600; letter-spacing:-.02em; }
.brand-mark { width:11px; height:15px; border:1.5px solid var(--ink); border-radius:1px 4px 4px 1px; box-shadow: inset 3px 0 0 var(--terra-soft); transform:rotate(-3deg); }
.quiet-icon { width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent; border-radius:50%; cursor:pointer; }
.quiet-icon svg { width:20px; fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.quiet-icon[aria-pressed="true"] { background:rgba(120,143,128,.12); }
.quiet-icon[aria-pressed="true"] svg { stroke:var(--sage); }
.quiet-icon .tiny-star { stroke-width:1.2; }

main { padding-bottom: calc(var(--nav-body-height) + var(--safe-bottom) + 44px); }
.view { animation: pageIn .35s cubic-bezier(.2,.8,.2,1); }
.view[hidden] { display:none !important; }
[hidden] { display:none !important; }
body.first-use main, body.first-use .bottom-nav { display:none; }
body.first-use #ambienceToggle { visibility:hidden; }
.first-page { max-width:580px; margin:auto; padding:30px 24px calc(30px + var(--safe-bottom)); }
.first-page h1 { margin:12px 0 16px; font:500 2rem/1.4 var(--journal); }
.first-page h1:focus, #todayTitle:focus { outline:none; }
.first-intro { margin:14px 0; font-size:1rem; line-height:1.85; }
.first-book { width:172px; height:204px; margin:27px auto 30px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; border:1px solid #6f8170; border-radius:3px 9px 9px 3px; background:var(--sage); color:#fff9ee; box-shadow:inset 8px 0 rgba(38,56,42,.14),3px 3px var(--paper-deep),5px 5px #b9b2a5,0 14px 24px rgba(50,57,43,.14); transform:rotate(-4deg); }
.first-book span { font:1.75rem var(--hand); }
.first-book i { font:0.875rem var(--journal); }
.first-traces { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 20px; margin:25px 0; padding:16px 0; border-block:1px solid var(--line); color:#5a6d5e; font-family:var(--journal); font-size:1rem; }
.first-footnote { margin:16px 0; color:#66675f; font-size:0.875rem; line-height:1.8; }
.first-storage { margin:20px 0 0; text-align:center; color:var(--muted); font-size:0.75rem; line-height:1.6; }
.first-next { width:100%; min-height:50px; display:flex; justify-content:center; gap:16px; align-items:center; margin-top:24px; font-size:1rem; }
.first-later { display:block; min-height:48px; margin:12px auto 0; font-size:0.875rem; }
.first-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0; }
.first-choices button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:7px; padding:15px 12px; min-height:84px; border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.23); cursor:pointer; }
.first-choices button[aria-pressed="true"] { border-color:#637766; background:rgba(120,143,128,.17); box-shadow:inset 3px 0 #637766; }
.first-choices strong { font-size:0.9375rem; font-weight:600; }
.first-choices small { font-size:0.875rem; line-height:1.6; color:#66675f; }
.first-preview { padding:20px 16px; }
.first-preview .library-field { margin:16px 0; }
.first-preview .library-field > span { font-size:0.875rem; }
.first-preview .library-field small { margin-left:8px; font-size:0.75rem; color:var(--muted); }
.first-preview input, .first-preview textarea { font-size:1rem; }
.first-plan-summary { border-top:1px solid var(--line); margin-top:20px; padding-top:4px; font-size:0.875rem; line-height:1.8; }
.first-plan-summary p > span { display:block; color:var(--muted); margin-bottom:5px; }
.first-plan-summary strong { font-weight:500; }
.first-plan-summary ul { padding-left:20px; margin:5px 0; }
.first-page button:focus-visible, .first-page input:focus-visible, .first-page textarea:focus-visible { outline:2px solid #637766; outline-offset:4px; }
.journey-empty { padding:22px; margin:18px 0; }
.journey-empty h2 { font:500 1.375rem/1.5 var(--journal); margin:0; }
.journey-empty p { font-size:1rem; line-height:1.8; }
@media (prefers-reduced-motion:reduce) { .first-page { animation:none; } }
@keyframes pageIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

.mood-window {
  position: relative;
  overflow: hidden;
  width: calc(100% - 30px);
  aspect-ratio: 2.06 / 1;
  margin: 14px auto 0;
  border: 0;
  border-radius: 2px 4px 3px 2px;
  background:#303837;
  box-shadow: 0 9px 22px rgba(45,39,33,.2), 0 1px 0 rgba(255,255,255,.45);
  isolation:isolate;
}
.mood-window::before {
  content:""; position:absolute; z-index:7; left:44%; top:-8px; width:61px; height:20px;
  background:rgba(211,199,175,.74); box-shadow:inset 0 0 10px rgba(126,109,81,.12);
  transform:rotate(-1.5deg); opacity:.92; pointer-events:none;
}
.mood-window::after {
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.035), transparent 28%, transparent 78%, rgba(239,185,103,.05));
  box-shadow:inset 0 -14px 28px rgba(16,19,18,.16), inset 0 1px rgba(255,255,255,.06);
}
.mood-window > svg { display:none; }
.room-reference {
  position:absolute; z-index:0; width:113.3%; max-width:none; height:auto;
  left:-6.7%; top:-28.2%; filter:saturate(.92) contrast(1.02) brightness(.97);
  user-select:none; pointer-events:none;
}
.ambient-rain { position:absolute; z-index:3; left:0; top:0; width:53%; height:79%; overflow:hidden; opacity:.18; pointer-events:none; }
.ambient-rain::before,
.ambient-rain::after {
  content:""; position:absolute; inset:-35% 0;
  background:repeating-linear-gradient(105deg,transparent 0 16px,rgba(192,220,229,.8) 17px 18px,transparent 19px 31px);
  transform:translateY(-18%); animation:assetRain 2.8s linear infinite;
}
.ambient-rain::after { opacity:.46; background-size:70% 70%; animation-duration:4.1s; animation-delay:-1.2s; }
@keyframes assetRain { to { transform:translate(-7px,18%); } }
.scene-lighting {
  position:absolute; z-index:2; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 77% 54%,rgba(255,192,98,.2),transparent 27%),
    radial-gradient(ellipse at 61% 56%,rgba(105,154,171,.12),transparent 23%);
  animation:assetGlow 5.8s ease-in-out infinite;
}
@keyframes assetGlow { 50% { opacity:.66; filter:brightness(1.08); } }
.scene-steam {
  position:absolute; z-index:4; left:68%; top:69%; width:2px; height:17px; opacity:.55;
  border-left:2px solid rgba(238,225,207,.68); border-radius:50%;
  animation:assetSteam 3s ease-in-out infinite; pointer-events:none;
}
.scene-steam::after { content:""; position:absolute; left:5px; top:4px; width:2px; height:12px; border-left:2px solid rgba(238,225,207,.45); border-radius:50%; }
@keyframes assetSteam { 50% { transform:translate(2px,-5px) rotate(5deg); opacity:.18; } }
.weather-note {
  display:none;
}
.mood-window { aspect-ratio:80 / 39; background:#d8d0c2; }
.room-stage { position:absolute; z-index:0; inset:0; overflow:hidden; }
.room-layer { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:fill; user-select:none; pointer-events:none; }
.room-environment { z-index:0; }
.room-shell { z-index:10; }
.room-stage .scene-lighting { z-index:20; }
.room-stage .scene-steam { z-index:40; left:77%; top:58%; }
.room-stage .window-reflection { z-index:40; left:10%; width:42.2%; height:67.3%; }
.room-clock {
  position:absolute; z-index:50; left:2.2%; bottom:3.8%; display:flex; align-items:baseline; gap:9px;
  max-width:31.25%; min-height:30px; padding:4px 8px; border-radius:2px;
  background:rgba(239,229,211,.82); color:#403d37; box-shadow:0 1px 8px rgba(55,45,37,.12);
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.room-clock time { font:600 clamp(.75rem,3.2vw,1rem)/1 var(--sans); letter-spacing:.06em; }
.room-clock span { overflow:hidden; color:#71695e; font:600 clamp(.5rem,2.15vw,.6875rem)/1.2 var(--sans); letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.room-environment-status { position:absolute; z-index:50; top:4%; right:2.2%; max-width:44%; margin:0; padding:4px 7px; border-radius:2px; background:rgba(44,48,48,.56); color:#f2eadc; font:600 clamp(.5rem,2vw,.625rem)/1.35 var(--sans); letter-spacing:.04em; text-align:right; }
.mood-window[data-daypart="morning"] .scene-lighting { background:radial-gradient(circle at 38% 25%,rgba(255,223,174,.24),transparent 32%),radial-gradient(circle at 77% 54%,rgba(255,192,98,.16),transparent 27%); }
.mood-window[data-daypart="day"] .scene-lighting { background:radial-gradient(circle at 35% 18%,rgba(255,244,210,.2),transparent 35%),radial-gradient(circle at 77% 54%,rgba(255,192,98,.15),transparent 27%); }
.mood-window[data-daypart="evening"] .scene-lighting { background:radial-gradient(circle at 42% 32%,rgba(240,150,112,.18),transparent 34%),radial-gradient(circle at 77% 54%,rgba(255,175,91,.28),transparent 30%); }
.mood-window[data-daypart="night"] .scene-lighting { background:radial-gradient(circle at 77% 54%,rgba(255,180,88,.3),transparent 30%),linear-gradient(rgba(31,42,55,.16),rgba(31,42,55,.16)); }
.mood-window .pixel-spark { z-index:60; }
.mood-window .room-moment { z-index:60; }
.mood-window.win-response .room-stage, .mood-window.gold-response .room-stage { animation:roomBreathe 1.6s ease; }
.weather-dot { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#b9c8c4; animation:weather 2.2s ease-in-out infinite; }
@keyframes weather { 50% { opacity:.35; } }
.rain-back { animation:rainBack 1.4s steps(3) infinite; }
.rain-front { animation:rainFront .88s steps(3) infinite; }
.rain-trail { animation:trail 3.8s ease-in-out infinite; }
@keyframes rainBack { 50% { transform:translate(1px,5px); opacity:.32; } }
@keyframes rainFront { 50% { transform:translate(1px,7px); opacity:.3; } }
@keyframes trail { 50% { stroke-dashoffset:-18; opacity:.5; } }
.city-lights { animation:cityFlicker 6s steps(2) infinite; }
@keyframes cityFlicker { 33% { opacity:.65; } 66% { opacity:.92; } }
.steam { animation:steam 2.9s ease-in-out infinite; transform-origin:center; }
@keyframes steam { 50% { transform:translateY(-4px) translateX(1px); opacity:.3; } }
.lamp-glow { animation:lamp 5s ease-in-out infinite; }
@keyframes lamp { 50% { opacity:.16; transform:scale(1.03); transform-origin:310px 105px; } }
.monitor-screen { animation:monitorGlow 5.4s steps(4) infinite; }
.monitor-lines { animation:monitorLines 4s steps(3) infinite; }
@keyframes monitorGlow { 50% { fill:#839d9e; } }
@keyframes monitorLines { 50% { transform:translateY(1px); opacity:.68; } }
.person { animation:breathe 4.2s steps(3) infinite; transform-origin:294px 141px; }
.typing-hands { animation:typeHands 1.2s steps(2) infinite; transform-origin:278px 125px; }
.eye { animation:blink 5.8s steps(1) infinite; transform-origin:center; }
.plant { animation:plantSway 6.4s steps(4) infinite; transform-origin:335px 50px; }
@keyframes breathe { 50% { transform:translateY(1px); } }
@keyframes typeHands { 50% { transform:translate(1px,-1px); } }
@keyframes blink { 0%,94%,100% { transform:scaleY(1); } 96% { transform:scaleY(.08); } }
@keyframes plantSway { 50% { transform:rotate(1.8deg); } }
.window-reflection { position:absolute; z-index:4; left:2%; top:0; width:49%; height:76%; border-radius:1px; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.045) 43%,transparent 52%); pointer-events:none; }
.mood-window.soft-response .scene-lighting { animation:warmPulse .9s ease; }
.mood-window.win-response .scene-lighting { animation:winGlow 1.5s ease; }
.mood-window.gold-response .scene-lighting { animation:goldWarmth 1.8s ease; }
.mood-window.win-response .room-reference { animation:roomBreathe 1.5s ease; }
.mood-window.gold-response .room-reference { animation:roomBreathe 1.8s ease; }
@keyframes plantHello { 35% { transform:rotate(-5deg); } 70% { transform:rotate(4deg); } }
@keyframes warmPulse { 45% { opacity:1.45; } }
@keyframes winGlow { 45% { opacity:1; filter:brightness(1.22) saturate(1.08); } }
@keyframes roomBreathe { 50% { filter:saturate(1.03) contrast(1.02) brightness(1.04); } }
@keyframes restHands { 45% { transform:translate(5px,-5px) rotate(-5deg); } }
@keyframes smallSip { 45% { transform:translate(-18px,-28px) rotate(-9deg); } }
@keyframes gentleStretch { 45% { transform:translateY(-7px) rotate(-2deg); } }
@keyframes goldWarmth { 50% { opacity:1.6; } }
.mood-window.motion-paused * { animation-play-state:paused !important; }
.pixel-spark { position:absolute; z-index:5; right:19px; top:16px; color:#f1d38c; font-size:1.5rem; opacity:0; text-shadow: 8px 9px #d9966f, -10px 5px #b7c8be; }
.pixel-spark.pop { animation:sparkPop .65s steps(4); }
@keyframes sparkPop { 0%{opacity:0;transform:scale(.25) rotate(0)} 35%{opacity:1;transform:scale(1.2) rotate(18deg)} 100%{opacity:0;transform:scale(.7) translateY(-10px)} }

.page-heading { position:relative; padding: 28px 22px 13px; }
.date-label, .eyebrow { margin:0 0 7px; font-size:0.75rem; font-weight:600; letter-spacing:.14em; color:var(--terra); }
.page-heading h1 { margin:0; font-family:var(--journal); font-size:2.125rem; font-weight:500; line-height:1.22; letter-spacing:.02em; }
.heading-scribble { position:absolute; right:21px; top:48px; width:105px; color:#96938a; font-family:var(--hand); font-size:1rem; line-height:1.05; text-align:right; transform:rotate(-4deg); }
.page-heading h1::after { content:""; display:block; width:140px; height:4px; margin-top:4px; border-radius:70% 30% 60% 40%; background:rgba(120,143,128,.46); transform:rotate(-1deg); }
.focus-line { display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--muted); font-size:0.8125rem; }
.focus-line span { padding:3px 7px; border:1px solid rgba(120,143,128,.18); border-radius:2px; background:rgba(207,219,204,.5); color:#425646; font-size:0.6875rem; text-transform:uppercase; letter-spacing:.08em; transform:rotate(-1deg); }
.focus-line strong { padding:3px 7px; border-radius:2px; background:rgba(207,219,204,.5); color:#425646; font-weight:600; }
.plan-link { width:max-content; max-width:100%; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.plan-link i { color:var(--terra); font-style:normal; font-size:0.75rem; }
.soft-copy { max-width:32rem; margin:13px 0 0; color:var(--muted); font-size:0.9375rem; line-height:1.7; }

.feeling-section, .journal-list-section { padding: 17px 22px; }
.section-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section-label-row h2 { margin:0; font-size:1rem; font-weight:600; letter-spacing:.02em; }
.hand-note { color:var(--terra); font-family:var(--hand); font-size:1.0625rem; transform:rotate(-2deg); }
.feeling-picker { display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:8px; padding:4px 2px 10px; border-bottom:1px solid var(--line); }
.paper-note {
  --note-paper:rgba(239,231,216,.68);
  background:
    linear-gradient(118deg,rgba(255,255,255,.22),transparent 42%),
    var(--note-paper);
  border:1px solid rgba(98,91,79,.09);
  box-shadow:1px 2px 5px rgba(70,60,48,.045), inset 0 0 12px rgba(255,255,255,.18);
}
.feeling {
  position:relative; min-width:0; min-height:64px; padding:8px 2px 7px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:2px 4px 3px 2px; color:#4e514d;
  clip-path:polygon(2% 3%,98% 0,100% 96%,4% 100%);
  font-size:0.75rem; cursor:pointer; transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
.feeling:nth-child(1) { min-height:61px; transform:rotate(-1.1deg); --note-paper:rgba(238,228,211,.65); }
.feeling:nth-child(2) { min-height:66px; transform:rotate(.55deg); --note-paper:rgba(228,233,220,.67); }
.feeling:nth-child(3) { min-height:63px; transform:rotate(-.45deg); --note-paper:rgba(239,232,217,.58); }
.feeling:nth-child(4) { min-height:65px; transform:rotate(.8deg); --note-paper:rgba(233,229,219,.64); }
.feeling span { font-family:var(--journal); font-size:1.4375rem; color:#59636a; line-height:1; }
.feeling[aria-pressed="true"] { border-color:rgba(103,132,110,.32); background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 45%),rgba(213,225,210,.82); color:var(--ink); transform:translateY(-1px) rotate(-.35deg); }
.feeling[aria-pressed="true"]::after { content:"✓"; position:absolute; right:4px; top:3px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:rgba(120,143,128,.9); color:white; font-size:0.625rem; box-shadow:none; }
.energy-note { min-height:37px; margin:10px 2px 0; color:var(--muted); font-size:0.75rem; line-height:1.55; }
.energy-note.gentle { color:#425646; }

.pencil-count { font-family:var(--hand); font-size:1.0625rem; color:var(--muted); }
.journal-list { border-top:1px solid var(--line); }
.journal-item {
  position:relative; display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:10px;
  width:100%; min-height:66px; padding:9px 2px;
  border:0; border-bottom:1px solid var(--line); background:transparent;
  text-align:left; cursor:pointer; overflow:hidden;
}
.journal-item::after { content:""; position:absolute; z-index:0; left:31px; right:-12px; top:15px; height:36px; border-radius:9px 3px 7px 2px; background:var(--fill, var(--sage-soft)); opacity:0; clip-path:polygon(0 15%,97% 0,100% 73%,4% 100%); transform:scaleX(0) skewX(-5deg); transform-origin:left; transition:opacity .15s; }
.journal-item.completing::after { opacity:.4; animation:markerFill .46s cubic-bezier(.3,.7,.2,1) forwards; }
.journal-item.completed::after { opacity:.08; transform:scaleX(1) skewX(-5deg); }
@keyframes markerFill { to { transform:scaleX(1) skewX(-5deg); } }
.journal-box, .journal-copy, .item-mark, .item-sprite { position:relative; z-index:1; }
.ink-mark { position:relative; overflow:hidden; }
.journal-box { width:21px; height:21px; border:1.5px solid #777a73; border-radius:3px 1px 4px 2px; background:rgba(255,255,255,.18); display:grid; place-items:center; transform:rotate(-2deg); box-shadow:1px 1px 0 rgba(61,62,57,.08); transition:border-color .24s ease,transform .32s ease; }
.journal-box::after { content:""; position:absolute; z-index:0; inset:-2px; background:linear-gradient(112deg,#6f8878,#839989 68%,#728a79); transform:scaleY(0); transform-origin:bottom; transition:transform .3s cubic-bezier(.35,.05,.2,1); }
.journal-box::before { content:""; position:relative; z-index:1; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px) scale(.65); opacity:0; transition:opacity .16s ease,transform .2s ease; }
.journal-item.completing .journal-box::after { animation:inkSet .38s cubic-bezier(.3,.7,.2,1) forwards; }
.completed .journal-box { border-color:var(--sage); transform:rotate(1.5deg); }
.completed .journal-box::after { transform:scaleY(1); }
.completed .journal-box::before { opacity:1; transform:rotate(-45deg) translate(1px,-1px) scale(1); transition-delay:.08s; }
@keyframes inkSet { 0% { transform:scaleY(0); } 62% { transform:scaleY(.84); } 100% { transform:scaleY(1); } }
.journal-copy strong { display:block; font-size:0.9375rem; font-weight:500; }
.journal-copy small { display:block; margin-top:3px; color:var(--muted); font-size:0.75rem; }
.item-mark { display:none; }
.item-sprite { position:absolute; right:11px; top:10px; color:var(--sprite-color,var(--terra)); font-size:1.125rem; opacity:0; pointer-events:none; }
.journal-item.completing .item-sprite { animation:tinyTrace .48s steps(4); }
@keyframes tinyTrace { 0%{opacity:0;transform:translate(0,5px) scale(.7)} 40%{opacity:.75;transform:translate(-2px,0) scale(.92)} 100%{opacity:0;transform:translate(-8px,-7px) scale(.8)} }

.practice-section {
  position:relative; margin:28px 22px 23px; padding:29px 16px 17px;
  display:grid; grid-template-columns:1fr 64px auto; align-items:end; gap:10px;
  --note-paper:rgba(249,245,237,.78);
  border-radius:2px 4px 3px 2px;
  box-shadow:0 6px 13px rgba(70,60,48,.09), 2px 3px 0 rgba(127,149,158,.08);
}
.practice-section::after { content:""; position:absolute; right:14px; top:-11px; width:10px; height:34px; border:2px solid #76746d; border-radius:9px; transform:rotate(13deg); opacity:.8; }
.tape { position:absolute; top:-10px; left:16px; padding:4px 13px; background:rgba(218,205,179,.72); color:#574c40; font-size:0.625rem; font-weight:600; letter-spacing:.12em; transform:rotate(-1.5deg); }
.practice-copy h2 { margin:0 0 3px; font-size:1.25rem; font-weight:500; }
.practice-copy p:last-child { margin:0; color:var(--muted); font-size:0.8125rem; }
.practice-copy { min-width:0; }
.practice-visual { position:relative; width:60px; height:54px; align-self:center; opacity:.8; }
.practice-visual i { position:absolute; display:block; }
.chair-back { left:13px; top:5px; width:27px; height:24px; border:5px solid #718577; border-bottom:0; }
.chair-seat { left:10px; top:28px; width:38px; height:6px; background:#718577; }
.chair-leg { top:32px; width:5px; height:20px; background:#665d51; }
.chair-leg.left { left:13px; }.chair-leg.right { left:41px; }
.move-arrow { right:0; top:12px; color:#6f7e77; font-family:var(--hand); font-size:1.5rem; }
.text-action { align-self:end; padding:7px 0 3px 6px; border:0; border-bottom:1px solid var(--terra); background:transparent; color:var(--terra); font-size:0.8125rem; font-weight:600; cursor:pointer; }

.day-ending { margin:30px 22px 0; padding:0 0 24px; border-bottom:1px solid var(--line); }
.ink-progress { display:none; }
.ink-progress span { display:block; width:0; height:100%; border-radius:3px 7px 4px 2px; background:linear-gradient(90deg,var(--sage),#9daa91); box-shadow:0 1px 0 rgba(120,143,128,.14); transition:width .55s cubic-bezier(.2,.8,.2,1); }
.ending-copy { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; }
.ending-status { margin:0; font-size:1rem; font-weight:600; }
.ending-note { margin:5px 0 0; color:var(--muted); font-size:0.8125rem; }
.stamp { width:63px; height:63px; display:grid; place-items:center; align-content:center; border:2px double var(--blue); border-radius:50%; color:var(--blue); font-size:0.9375rem; font-weight:600; letter-spacing:.08em; line-height:1.1; text-align:center; opacity:.45; transform:rotate(7deg); transition:.4s ease; }
.stamp small { font-size:0.5rem; letter-spacing:.05em; }
.stamp.win { color:var(--sage); border-color:var(--sage); opacity:.9; transform:rotate(-7deg) scale(1.05); }
.stamp.gold { color:var(--terra); border-color:var(--terra); opacity:1; transform:rotate(-4deg) scale(1.08); box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--terra); }
.stamp.arrive { animation:stampArrive .52s cubic-bezier(.2,.85,.25,1.2); }
@keyframes stampArrive { 0% { opacity:0; transform:rotate(-14deg) scale(1.35); } 62% { opacity:1; transform:rotate(-5deg) scale(.97); } }

.one-line-note { display:block; margin:25px 22px 12px; }
.one-line-note > span { display:block; margin-bottom:6px; color:var(--muted); font-family:var(--hand); font-size:1.0625rem; }
.one-line-note textarea { width:100%; min-height:68px; padding:10px 3px; resize:none; border:0; border-bottom:1px solid rgba(87,91,83,.3); outline:0; background:transparent; font-size:0.9375rem; line-height:1.6; }
.one-line-note textarea:focus { border-color:var(--sage); }
.one-line-note textarea::placeholder { color:var(--muted); }
.deeper-note { margin:0 22px 24px; border-bottom:1px solid var(--line); }
.deeper-note summary { padding:12px 0; color:var(--muted); font-family:var(--hand); font-size:1rem; cursor:pointer; list-style:none; }
.deeper-note summary::-webkit-details-marker { display:none; }
.deeper-note summary::before { content:"＋"; display:inline-block; width:20px; color:var(--terra); }
.deeper-note[open] summary::before { content:"−"; }
.deeper-note summary span { margin-left:5px; font-family:var(--sans); font-size:0.5625rem; letter-spacing:.12em; text-transform:uppercase; }
.deeper-note label > span { display:block; margin:2px 0 5px; color:var(--muted); font-size:0.75rem; }
.deeper-note textarea { width:100%; min-height:92px; padding:9px 2px 14px; resize:vertical; border:0; outline:0; background:transparent; color:var(--ink); font-size:1rem; line-height:1.6; }
.deeper-note textarea::placeholder { color:var(--muted); }

.week-heading, .journey-heading { padding-top:40px; }
.week-switcher { display:grid; grid-template-columns:36px 1fr 36px; align-items:center; width:100%; margin:0 0 7px; }
.week-switcher .date-label { margin:0; text-align:center; }
.week-switcher button { width:34px; height:34px; border:0; border-radius:50%; background:rgba(61,62,57,.05); color:var(--muted); cursor:pointer; }
.week-switcher button:disabled { opacity:.24; cursor:default; }
.week-caption { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; font-size:0.6875rem; font-weight:600; letter-spacing:.12em; color:var(--blue); }
.weekly-spread { margin:22px 16px 0; padding:18px 6px 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.week-grid { display:block; }
.week-date-grid, .week-grid-table { display:grid; grid-template-columns:minmax(84px,1.7fr) repeat(7,minmax(27px,1fr)); gap:6px 4px; align-items:center; }
.week-plan-block + .week-plan-block { margin-top:7px; }
.week-plan-label { margin:13px 0 7px 88px; display:flex; align-items:baseline; justify-content:space-between; gap:9px; color:var(--muted); }
.week-plan-label span { min-width:0; font-size:0.625rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.week-plan-label strong { color:var(--terra); font-family:var(--hand); font-size:0.8125rem; font-weight:400; text-align:right; }
.plan-change-strip { position:relative; margin:16px 0 10px 88px; padding:7px 8px 7px 11px; display:grid; grid-template-columns:auto 1fr; gap:2px 7px; border-left:2px solid var(--terra); background:rgba(185,105,81,.055); transform:rotate(-.25deg); }
.plan-change-strip span { color:var(--terra); font-size:0.5rem; font-weight:600; letter-spacing:.12em; }
.plan-change-strip strong { min-width:0; font-size:0.6875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-change-strip small { grid-column:2; color:var(--muted); font-size:0.5625rem; }
.day-head { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; color:var(--muted); text-transform:uppercase; }
.day-head b { font-size:0.625rem; font-weight:500; }
.day-head small { font-family:var(--hand); font-size:0.75rem; }
.day-head.today { color:var(--terra); font-weight:600; }
.tracker-name { min-width:0; padding-right:4px; font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid-cell { position:relative; aspect-ratio:1; max-height:31px; border:1px solid rgba(61,62,57,.18); border-radius:2px; background:rgba(255,255,255,.18); cursor:pointer; transition:.15s ease; }
.grid-cell::after { content:""; position:absolute; inset:3px; border-radius:1px; background:var(--cell-color,var(--sage)); transform:scale(.2) rotate(-4deg); opacity:0; transition:.28s cubic-bezier(.2,.9,.3,1.3); }
.grid-cell.filled::after { transform:scale(1) rotate(var(--tilt,-2deg)); opacity:.75; }
.grid-cell.today { outline:1px dashed rgba(185,105,81,.42); outline-offset:2px; }
.grid-cell.future { opacity:.24; cursor:default; }
.grid-cell.inactive { border-color:transparent; background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(61,62,57,.035) 5px 6px); opacity:.34; }
.grid-hint { margin:14px 0 0; text-align:right; color:var(--muted); font-family:var(--hand); font-size:0.9375rem; }
.week-notes { margin:26px 22px 0; }
.note-line { display:grid; grid-template-columns:32px 1fr; gap:8px; padding:17px 0; border-bottom:1px solid var(--line); }
.note-symbol { color:var(--terra); font-family:var(--hand); font-size:1.75rem; }
.note-line small { color:var(--muted); font-size:0.6875rem; letter-spacing:.08em; }
.note-line p { margin:5px 0 0; font-size:0.875rem; line-height:1.6; }
.quote-line .note-symbol { color:var(--blue); }
.week-wins { display:flex; align-items:center; justify-content:space-between; padding:22px 0; color:var(--muted); font-size:0.8125rem; }
#winDots { display:flex; gap:7px; }
.win-dot { width:14px; height:14px; border:1px solid rgba(61,62,57,.23); border-radius:50%; }
.win-dot.won { border-color:var(--terra); background:var(--terra-soft); box-shadow:inset 0 0 0 3px var(--paper); }
.week-reflection { margin:8px 0 28px; padding:20px 16px 12px; --note-paper:rgba(249,245,237,.7); }
.week-reflection label { display:block; padding:12px 0; border-top:1px solid var(--line); }
.week-reflection label > span { display:block; margin-bottom:4px; font-size:0.8125rem; font-weight:500; }
.week-reflection textarea { width:100%; min-height:48px; padding:5px 0; resize:vertical; border:0; outline:0; background:transparent; color:var(--ink); font-size:1rem; line-height:1.55; }
.week-reflection textarea::placeholder { color:var(--muted); }
.week-reflection textarea:focus { background:rgba(255,255,255,.16); }

.current-chapter { position:relative; margin:22px; padding:20px 18px; display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; border:1px solid rgba(61,62,57,.18); border-radius:4px 9px 5px 8px; background:rgba(120,143,128,.08); }
.chapter-leaf { border:0; background:transparent; color:var(--sage); font-family:var(--hand); font-size:1.875rem; cursor:pointer; transform:rotate(-18deg); }
.chapter-index { align-self:start; color:var(--sage); font-family:var(--hand); font-size:1.5625rem; }
.current-chapter h2 { margin:0; font-size:1.3125rem; font-weight:500; }
.current-chapter p:last-child { margin:5px 0 0; color:var(--muted); font-size:0.8125rem; }
.timeline { position:relative; margin:35px 22px 20px; }
.timeline::before { content:""; position:absolute; top:10px; bottom:0; left:36px; width:1px; background:rgba(61,62,57,.17); }
.timeline-entry { position:relative; display:grid; grid-template-columns:73px 1fr; gap:18px; padding-bottom:45px; }
.timeline-date { position:relative; z-index:1; width:73px; height:73px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(61,62,57,.19); border-radius:50%; background:var(--paper); line-height:1; }
.timeline-date span { color:var(--muted); font-size:0.5625rem; letter-spacing:.1em; }
.timeline-date strong { margin:3px 0; font-family:var(--hand); font-size:1.6875rem; font-weight:400; }
.timeline-date small { color:var(--muted); font-size:0.5rem; }
.entry-body { min-width:0; padding-top:5px; }
.entry-body h2 { margin:9px 0 7px; font-size:1.1875rem; font-weight:500; line-height:1.35; }
.entry-body > p { margin:0; color:#65665f; font-size:0.875rem; line-height:1.7; }
.entry-tag { display:inline-block; padding:3px 8px; border-radius:2px; background:var(--terra-soft); color:#6e3d2d; font-family:var(--hand); font-size:0.875rem; transform:rotate(-1deg); }
.entry-tag.sage { background:var(--sage-soft); color:#3e5243; }
.entry-tag.blue { background:var(--blue-soft); color:#3f535c; }
.entry-tag.paper { background:#ded4c4; color:#534b40; }
.tiny-facts { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.tiny-facts span { padding:4px 7px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:0.625rem; }
.memory-photo { position:relative; height:142px; margin:0 0 16px; overflow:hidden; border:7px solid #eee9df; border-bottom-width:22px; box-shadow:1px 4px 11px rgba(61,55,46,.15); transform:rotate(1.2deg); background:#cfb78f; }
.walk-photo { background:linear-gradient(#9aa8a0 0 55%, #9c8f77 55%); }
.photo-sun { position:absolute; top:19px; right:28px; width:30px; height:30px; border-radius:50%; background:#efd28d; opacity:.8; }
.photo-hill { position:absolute; bottom:0; width:155px; height:73px; border-radius:50% 50% 0 0; background:#65796d; }
.photo-hill.one { left:-28px; transform:rotate(8deg); }
.photo-hill.two { right:-49px; bottom:-12px; background:#566a62; }
.photo-person { position:absolute; left:48%; bottom:17px; width:6px; height:31px; background:#404844; box-shadow: -5px 29px #404844, 5px 29px #404844; }
.photo-person::before { content:""; position:absolute; top:-8px; left:-2px; width:10px; height:10px; border-radius:50%; background:#404844; }
.photo-label { position:absolute; right:5px; bottom:-20px; color:#5f625c; font-family:var(--hand); font-size:0.8125rem; }
.milestone-mark { margin-top:15px; display:flex; align-items:center; gap:9px; color:var(--sage); }
.milestone-mark strong { font-family:var(--hand); font-size:2.625rem; font-weight:400; line-height:1; }
.milestone-mark span { font-size:0.6875rem; line-height:1.25; text-transform:uppercase; letter-spacing:.08em; }
.chapter-divider { position:relative; z-index:1; margin:4px 0 36px 74px; border-top:1px dashed rgba(61,62,57,.2); text-align:right; }
.chapter-divider span { position:relative; top:-11px; padding-left:10px; background:var(--paper); color:var(--muted); font-family:var(--hand); font-size:0.9375rem; }
.faded-memory { opacity:.78; }
.today-memory .timeline-date { border-color:rgba(120,143,128,.42); box-shadow:inset 0 0 0 5px rgba(120,143,128,.07); }
.reflection-lines p { margin:10px 0 0; padding-bottom:9px; border-bottom:1px solid var(--line); color:#65665f; font-size:0.8125rem; line-height:1.6; }
.reflection-lines small { display:block; margin-bottom:2px; color:var(--blue); font-size:0.625rem; letter-spacing:.08em; }
.plan-change-memory .timeline-date strong { color:var(--terra); }
.visual-checkin { margin:2px 22px 34px; padding:18px; display:grid; grid-template-columns:86px 1fr; gap:16px; align-items:center; --note-paper:rgba(232,235,224,.58); }
.visual-checkin h2 { margin:2px 0 11px; font-size:1.0625rem; font-weight:500; line-height:1.45; }
.visual-check-photo { height:106px; padding:8px; display:flex; flex-direction:column; justify-content:space-between; border:6px solid #eee9df; border-bottom-width:18px; background:linear-gradient(150deg,#99a7a0,#63736d); color:rgba(255,255,255,.72); transform:rotate(-1.5deg); box-shadow:1px 3px 8px rgba(61,55,46,.12); }
.visual-check-photo.has-image { background-size:cover; background-position:center; color:white; text-shadow:0 1px 3px rgba(0,0,0,.45); }
.visual-check-photo span { font-size:0.5625rem; letter-spacing:.08em; }
.visual-check-photo i { align-self:center; font-family:var(--hand); font-size:0.9375rem; font-style:normal; text-align:center; }
.checkin-chips { display:flex; flex-wrap:wrap; gap:6px; }
.checkin-chips button { padding:6px 8px; border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.18); color:var(--muted); font-size:0.6875rem; cursor:pointer; }
.checkin-chips button.selected { border-color:rgba(120,143,128,.45); background:rgba(120,143,128,.16); color:#52685a; }
.photo-action { margin-top:10px; padding:6px 0 3px; border:0; border-bottom:1px solid var(--terra); background:transparent; color:var(--terra); font-size:0.6875rem; cursor:pointer; }
.prototype-note { display:block; margin-top:7px; color:var(--muted); font-size:0.5625rem; line-height:1.4; }

.bottom-nav {
  position:fixed; z-index:50; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%,760px); min-height:calc(var(--nav-body-height) + var(--safe-bottom)); height:auto;
  padding:7px 22px calc(7px + var(--safe-bottom));
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  border-top:1px solid rgba(61,62,57,.11);
  background:linear-gradient(to bottom,rgba(243,238,228,.9),rgba(243,238,228,.98) 28%); backdrop-filter:blur(16px);
}
.nav-item { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; background:transparent; color:var(--muted); font-size:0.6875rem; cursor:pointer; }
.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.nav-item.active { color:var(--ink); }
.nav-item.active::after { content:""; position:absolute; bottom:0; width:22px; height:3px; border-radius:10px; background:var(--terra); transform:rotate(-2deg); }

.sheet-backdrop { position:fixed; z-index:90; inset:0; background:rgba(45,43,38,.35); backdrop-filter:blur(2px); opacity:0; transition:opacity .25s; }
.sheet-backdrop.visible { opacity:1; }
.page-sheet { position:fixed; z-index:100; left:50%; bottom:0; width:min(100%,760px); max-height:min(92dvh,820px); padding:15px 22px calc(24px + var(--safe-bottom)); overflow:auto; overscroll-behavior:contain; border-radius:22px 22px 0 0; background:var(--paper); box-shadow:0 -16px 50px rgba(50,46,40,.25); transform:translate(-50%,105%); transition:transform .34s cubic-bezier(.2,.75,.2,1); }
.page-sheet.open { transform:translate(-50%,0); }
.page-sheet:not(.open) { visibility:hidden; pointer-events:none; }
:where(button,input,select,textarea,summary,a):focus-visible { outline:3px solid #526971; outline-offset:3px; }
.page-sheet > .sheet-close { position:sticky; top:0; float:right; right:auto; width:44px; height:44px; margin:0 -8px -44px 10px; z-index:5; background:#e3ddcf; }
.page-sheet > .sheet-close ~ div > .eyebrow { padding-right:44px; }
.page-sheet input, .page-sheet select, .page-sheet textarea { max-width:100%; min-width:0; }
.page-sheet .form-pair, .page-sheet fieldset, .page-sheet label { min-width:0; }
.app-shell h1, .app-shell h2, .page-sheet h2, .page-sheet h3 { overflow-wrap:anywhere; }
.topbar-actions { display:flex; align-items:center; }
.daily-adjust-link { display:block; margin:15px 0 0; min-height:44px; font-size:0.875rem; }
.practice-state { display:block; margin:10px 0; color:#5b6d61; font-size:0.875rem; }
.journal-item[data-status="rest"], .journal-item[data-status="na"], .journal-item[data-status="off"] { opacity:.76; }
.journal-item[data-status="rest"] .journal-box::after { content:'☾'; display:grid; place-items:center; }
.journal-item[data-status="na"] .journal-box::after { content:'—'; display:grid; place-items:center; }
.grid-cell[data-status="rest"], .grid-cell[data-status="na"], .grid-cell[data-status="off"] { font-size:0.9375rem; color:#536858; background:rgba(120,143,128,.08); }
.grid-cell[data-status="off"] { opacity:.45; }
.room-memory-summary { margin:16px 22px; color:#66675f; font:1rem/1.8 var(--journal); }
.room-moment { position:absolute; bottom:12px; left:14px; z-index:8; max-width:calc(100% - 28px); padding:8px 12px; min-height:40px; border:1px solid rgba(249,237,209,.5); border-radius:3px; background:rgba(43,48,42,.85); color:#fff1d3; font:0.875rem/1.5 var(--journal); text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.room-moment:focus-visible { outline:3px solid #fff1d3; outline-offset:3px; }
.moment-action { margin:0 22px 24px; min-height:44px; font-size:0.875rem; }
.empty-hint { padding:12px 0; font-size:0.875rem; line-height:1.8; color:#68685f; }
.adjustment-sheet, .closing-sheet, .milestone-sheet, .journal-menu-sheet { padding-top:44px; }
.page-sheet h2 { font-family:var(--journal); line-height:1.5; }
.page-sheet h2:focus { outline:none; }
.adjustment-section { padding:18px 0; border-bottom:1px solid var(--line); }
.adjustment-section h3 { font-size:1rem; margin:0 0 12px; }
.choice-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.choice-row button { padding:9px 12px; min-height:44px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.2); font-size:0.875rem; cursor:pointer; }
.choice-row button[aria-pressed="true"] { border-color:#637766; background:rgba(120,143,128,.17); }
.anchor-adjustment { padding:16px 0 4px; }
.anchor-adjustment > span { margin-left:12px; color:var(--muted); font-size:0.875rem; }
.pause-practice { margin-top:20px; }
.pause-practice p, .closing-fields p, .storage-help p, .clear-data p, .restore-preview p { font-size:0.875rem; line-height:1.8; }
.closing-fields { margin:22px 0; border:1px solid var(--line); padding:16px; min-width:0; }
.closing-fields legend { font-family:var(--journal); }
.menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0; }
.menu-actions button { font-size:0.875rem; min-width:0; }
.storage-summary { color:var(--muted); font-size:0.875rem; }
.inline-warning { color:#924d38; font-size:0.875rem; line-height:1.8; }
.restore-preview { padding:18px; margin:20px 0; }
.storage-help, .clear-data { margin:25px 0; font-size:0.875rem; line-height:1.8; }
.hidden-moment { display:block; width:100%; margin:8px 0; padding:12px; text-align:left; border:1px solid var(--line); background:transparent; font-size:0.875rem; }
.danger-button { min-height:44px; padding:10px; border:1px solid #ab6049; border-radius:4px; color:#8c4535; background:transparent; font-size:0.875rem; cursor:pointer; }
.storage-warning { position:fixed; z-index:110; top:10px; left:50%; transform:translateX(-50%); width:min(92%,540px); padding:14px; border:1px solid #ab6049; background:var(--paper); color:#8c4535; border-radius:4px; font-size:0.875rem; }
.weekday-picker { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 20px; }
.weekday-picker label { flex:1; min-width:30px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; border:1px solid var(--line); border-radius:3px; font-size:0.875rem; }
.weekday-picker input { width:17px !important; height:17px; padding:0 !important; margin:0; accent-color:var(--sage); }
.weekday-picker label:has(input:checked) { background:rgba(120,143,128,.18); border-color:#637766; }
.anchor-schedule { grid-column:1/-1; width:100%; }
.anchor-schedule > span, .field-hint { font-size:0.875rem; line-height:1.8; color:var(--muted); }
.phase-edit-block { padding:18px 0; border-bottom:1px solid var(--line); }
.page-sheet button:disabled { cursor:default; opacity:.5; }
.page-sheet p, .page-sheet input, .page-sheet textarea { overflow-wrap:anywhere; }
.plan-actions { flex-wrap:wrap; }
.sheet-handle { width:42px; height:4px; margin:0 auto 22px; border-radius:99px; background:#c9c1b5; }
.sheet-close { position:absolute; right:17px; top:16px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(61,62,57,.07); font-size:1.5625rem; line-height:1; cursor:pointer; }
.guide-sheet h2 { margin:0 0 16px; font-size:1.6875rem; font-weight:500; }
.guide-sheet h2 span { color:var(--terra); font-family:var(--hand); font-weight:400; }
.guide-meta { display:flex; justify-content:space-between; gap:12px; margin:-9px 0 17px; color:var(--muted); font-size:0.75rem; }
.movement-demo { position:relative; height:150px; overflow:hidden; border-radius:8px; background:linear-gradient(#d3dcda 0 72%,#b6a18a 72%); }
.movement-demo > span { position:absolute; right:11px; top:10px; padding:4px 8px; background:rgba(243,238,228,.8); color:var(--muted); font-family:var(--hand); font-size:0.9375rem; }
.movement-glyph { position:absolute; inset:0; display:none; place-items:center; color:#526d66; font-family:var(--hand); font-size:2.625rem; letter-spacing:.12em; }
.movement-demo.movement-walk .demo-chair, .movement-demo.movement-walk .demo-person,
.movement-demo.movement-heel .demo-chair, .movement-demo.movement-heel .demo-person,
.movement-demo.movement-row .demo-chair, .movement-demo.movement-row .demo-person { display:none; }
.movement-demo.movement-walk .movement-glyph, .movement-demo.movement-heel .movement-glyph, .movement-demo.movement-row .movement-glyph { display:grid; }
.demo-floor { position:absolute; left:0; right:0; bottom:28%; height:2px; background:#85725e; }
.demo-chair { position:absolute; left:31%; bottom:28%; width:54px; height:46px; border:7px solid #67594c; border-top-width:9px; border-bottom:0; }
.demo-chair::before { content:""; position:absolute; left:-7px; top:-38px; width:7px; height:38px; background:#67594c; }
.demo-person { position:absolute; left:47%; bottom:28%; width:44px; height:83px; animation:squat 2.8s steps(6) infinite; transform-origin:bottom; }
.demo-person i { position:absolute; display:block; background:#5f7770; }
.demo-person .head { width:19px; height:19px; left:11px; top:0; border-radius:50%; background:#c99c79; }
.demo-person .body { width:19px; height:38px; left:10px; top:20px; }
.demo-person .leg { width:8px; height:35px; top:54px; transform-origin:top; }
.demo-person .leg.one { left:10px; transform:rotate(9deg); }
.demo-person .leg.two { left:23px; transform:rotate(-11deg); }
@keyframes squat { 0%,25% { transform:translateY(0) rotate(0); } 55%,72% { transform:translate(-15px,19px) rotate(11deg); } 100% { transform:none; } }
.guide-steps { list-style:none; padding:8px 0 0; margin:0; }
.guide-steps li { display:grid; grid-template-columns:34px 1fr; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }
.guide-steps span { color:var(--terra); font-family:var(--hand); font-size:1.125rem; }
.guide-steps p { margin:0; font-size:0.875rem; line-height:1.6; }
.effort-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:16px 0 7px; }
.effort-choices button { min-width:0; padding:10px 7px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:4px 7px 5px 3px; background:rgba(255,255,255,.16); text-align:left; cursor:pointer; }
.effort-choices button:nth-child(2) { transform:rotate(.4deg); }
.effort-choices button:nth-child(3) { transform:rotate(-.5deg); }
.effort-choices small { color:var(--terra); font-family:var(--hand); font-size:0.875rem; }
.effort-choices strong { font-size:0.75rem; font-weight:600; }
.effort-choices span { color:var(--muted); font-size:0.625rem; line-height:1.35; }
.effort-choices button.selected { border-color:rgba(120,143,128,.52); background:rgba(120,143,128,.13); box-shadow:inset 0 0 0 1px rgba(120,143,128,.12); }
.guide-note { margin:15px 0; padding:12px 14px; border-left:3px solid var(--blue); background:rgba(127,149,158,.09); }
.guide-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.guide-detail-grid .guide-note { margin:7px 0; }
.guide-note.terra { border-color:var(--terra); background:rgba(185,105,81,.07); }
.guide-note strong { font-size:0.75rem; letter-spacing:.06em; }
.guide-note p { margin:4px 0 0; color:var(--muted); font-size:0.8125rem; line-height:1.55; }
.safety-note { margin:10px 0 18px; padding:13px 14px; border:1px dashed rgba(61,62,57,.22); border-radius:3px; }
.safety-note strong { font-size:0.8125rem; }
.safety-note p { margin:5px 0 0; color:var(--muted); font-size:0.8125rem; line-height:1.55; }
.done-button { width:100%; min-height:50px; border:0; border-radius:7px; background:var(--sage); color:white; font-weight:600; cursor:pointer; box-shadow:0 3px 0 #64796a; }
.done-button:active { transform:translateY(2px); box-shadow:0 1px 0 #64796a; }
.toast { position:fixed; z-index:120; left:50%; bottom:calc(var(--nav-body-height) + var(--safe-bottom) + 16px); padding:9px 14px; border-radius:999px; background:#424640; color:#f5f1e8; font-size:0.8125rem; opacity:0; transform:translate(-50%,10px); transition:.25s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.plan-sheet h2 { margin:0 0 8px; font-family:var(--journal); font-size:1.875rem; font-weight:500; }
.plan-intro { margin:0 0 19px; color:var(--muted); font-size:0.875rem; line-height:1.65; }
.upcoming-plan-note { margin:-5px 0 18px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:2px 8px; border-left:3px solid var(--blue); background:rgba(127,149,158,.08); }
.upcoming-plan-note > span { grid-column:1 / -1; color:var(--blue); font-size:0.5rem; font-weight:600; letter-spacing:.11em; }
.upcoming-plan-note strong { font-size:0.75rem; font-weight:500; }
.upcoming-plan-note small { color:var(--muted); font-size:0.625rem; }
.upcoming-plan-note[hidden] { display:none; }
.plan-now { padding:17px; --note-paper:rgba(218,228,214,.55); }
.plan-now > div { display:flex; align-items:center; gap:12px; }
.phase-number { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--sage); border-radius:50%; color:var(--sage); font-family:var(--hand); font-size:1.4375rem; }
.plan-now p { margin:0; }
.plan-now small { display:block; color:var(--sage); font-size:0.625rem; letter-spacing:.1em; }
.plan-now strong { display:block; margin-top:3px; font-size:1rem; font-weight:500; }
.plan-now > p { margin:13px 0 0; color:var(--muted); font-size:0.8125rem; line-height:1.65; }
.plan-section { margin:25px 0; }
.plan-section h3 { margin:0; font-size:1rem; font-weight:600; }
.plan-today-list { border-top:1px solid var(--line); }
.plan-today-list > div { display:grid; grid-template-columns:20px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.plan-today-list > div > span { width:14px; height:14px; margin-top:3px; border-radius:2px; background:var(--anchor-color); opacity:.76; transform:rotate(-2deg); }
.plan-today-list p { margin:0; }
.plan-today-list strong { display:block; font-size:0.875rem; font-weight:500; }
.plan-today-list small { display:block; margin-top:2px; color:var(--muted); font-size:0.75rem; line-height:1.45; }
.phase-path { position:relative; margin:28px 0 18px; }
.phase-path::before { content:""; position:absolute; left:17px; top:20px; bottom:23px; width:1px; background:var(--line); }
.phase-path-item { position:relative; width:100%; display:grid; grid-template-columns:36px 1fr 18px; gap:13px; padding:0 0 22px; border:0; background:transparent; color:inherit; text-align:left; opacity:1; cursor:pointer; }
.phase-path-item > span { position:relative; z-index:1; width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--muted); font-family:var(--hand); font-size:1.1875rem; }
.phase-path-item > i { align-self:center; color:var(--terra); font-style:normal; }
.phase-path-item.active { opacity:1; }
.phase-path-item.active > span { border-color:var(--sage); color:var(--sage); box-shadow:inset 0 0 0 5px rgba(120,143,128,.09); }
.phase-path small { color:var(--terra); font-size:0.5625rem; letter-spacing:.12em; }
.phase-path h3 { margin:2px 0 4px; font-size:1.0625rem; font-weight:500; }
.phase-path p { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.55; }
.plan-boundary { margin:8px 0 20px; padding:13px 14px; border-left:3px solid var(--terra); background:rgba(185,105,81,.07); }
.plan-boundary strong { font-size:0.75rem; }
.plan-boundary p { margin:5px 0 0; color:var(--muted); font-size:0.75rem; line-height:1.55; }
.plan-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.secondary-button, .quiet-button { min-height:46px; padding:0 16px; border:1px solid rgba(61,62,57,.22); border-radius:5px; background:rgba(255,255,255,.22); color:var(--ink); font-weight:500; cursor:pointer; }
.secondary-button { width:100%; }
.edit-plan label, .edit-plan fieldset { display:block; margin:16px 0; padding:0; border:0; }
.edit-plan label > span, .edit-plan legend { display:block; margin-bottom:6px; color:var(--muted); font-size:0.75rem; font-weight:600; letter-spacing:.04em; }
.edit-plan input, .edit-plan select, .edit-plan textarea { width:100%; min-height:44px; padding:10px 11px; border:1px solid rgba(61,62,57,.2); border-radius:4px; outline:0; background:rgba(255,255,255,.2); color:var(--ink); font:1rem/1.4 var(--sans); }
.edit-plan textarea { resize:vertical; }
.edit-plan input:focus, .edit-plan select:focus, .edit-plan textarea:focus { border-color:var(--sage); box-shadow:0 0 0 2px rgba(120,143,128,.1); }
.anchor-edit-row { display:grid; grid-template-columns:25px 1fr; gap:7px; align-items:start; margin:10px 0; padding-bottom:10px; border-bottom:1px solid var(--line); }
.anchor-edit-row > span { padding-top:24px; font-family:var(--hand); color:var(--terra); font-size:1rem; }
.anchor-edit-row label { margin:0; }
.anchor-edit-row label:last-child { grid-column:2; }
.anchor-row-actions { grid-column:2; display:flex; gap:6px; justify-content:flex-end; }
.anchor-row-actions button { min-width:34px; min-height:30px; padding:0 8px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--muted); font-size:0.6875rem; cursor:pointer; }
.anchor-row-actions button:last-child { color:var(--terra); }
.anchor-row-actions button:disabled { opacity:.25; cursor:default; }
.anchor-edit-row small { display:block; margin-bottom:4px; color:var(--muted); font-size:0.625rem; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form-pair label { min-width:0; }
.edit-guide-copy { margin:12px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.edit-guide-copy summary { padding:12px 0; color:var(--terra); font-family:var(--hand); font-size:1rem; cursor:pointer; }
.edit-plan fieldset > small, .advanced-hidden { color:var(--muted); font-size:0.6875rem; line-height:1.5; }
.advanced-hidden { padding:10px 0; border-top:1px dashed var(--line); }
.form-actions { display:grid; grid-template-columns:1fr 1.6fr; gap:8px; margin-top:18px; }
.form-actions .done-button { min-width:0; }
.inline-add, .inline-remove { padding:8px 0; border:0; border-bottom:1px solid var(--sage); background:transparent; color:var(--sage); font-size:0.75rem; cursor:pointer; }
.inline-remove { border-color:var(--terra); color:var(--terra); }
.practice-edit-actions { display:flex; justify-content:space-between; gap:14px; margin:12px 0; }
.practice-edit-actions button:disabled { opacity:.3; cursor:default; }
.practice-visual b { display:none; position:absolute; inset:0; place-items:center; color:#61786d; font-family:var(--hand); font-size:1.4375rem; font-weight:400; letter-spacing:.08em; }
.practice-visual[data-visual="walk"] i, .practice-visual[data-visual="heel"] i, .practice-visual[data-visual="row"] i { display:none; }
.practice-visual[data-visual="walk"] b, .practice-visual[data-visual="heel"] b, .practice-visual[data-visual="row"] b { display:grid; }

.timeline-entry-button { width:100%; padding:0 0 45px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.timeline-entry-button .entry-open { display:block; margin-top:11px; color:var(--terra); font-family:var(--hand); font-size:0.875rem; }
.entry-sheet h2 { margin:0 0 11px; font-family:var(--journal); font-size:1.6875rem; font-weight:500; line-height:1.35; }
.entry-intro { margin:0 0 20px; color:var(--muted); font-size:0.9375rem; line-height:1.7; }
.entry-mood { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:0.8125rem; }
.entry-mood strong { color:var(--sage); font-weight:500; }
.entry-anchor-list { margin:12px 0 20px; }
.entry-anchor-list > div { display:grid; grid-template-columns:23px 1fr; gap:9px; padding:9px 0; opacity:.52; }
.entry-anchor-list > div > span { width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line); border-radius:3px; color:white; font-size:0.6875rem; }
.entry-anchor-list > div.done { opacity:1; }
.entry-anchor-list > div.done > span { border-color:var(--sage); background:var(--sage); }
.entry-anchor-list p, .entry-practice p { margin:0; }
.entry-anchor-list strong { display:block; font-size:0.875rem; font-weight:500; }
.entry-anchor-list small { display:block; margin-top:2px; color:var(--muted); font-size:0.6875rem; line-height:1.45; }
.entry-practice { margin:0 0 20px; padding:13px 14px; border-left:3px solid var(--blue); background:rgba(127,149,158,.08); }
.entry-practice small { color:var(--muted); font-size:0.625rem; letter-spacing:.08em; }
.entry-practice p { margin-top:4px; font-size:0.8125rem; }
.entry-reflection p { margin:0 0 12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.875rem; line-height:1.6; }
.entry-reflection small { display:block; margin-bottom:4px; color:var(--blue); font-size:0.625rem; letter-spacing:.08em; }
.entry-stamp { margin:24px auto 10px; }

.plan-library-sheet h2, .phase-sheet h2, .photo-archive-sheet h2, .photo-editor-sheet h2 { margin:0 0 8px; font-family:var(--journal); font-size:1.8125rem; font-weight:500; }
.sheet-intro { margin:0 0 19px; color:var(--muted); font-size:0.875rem; line-height:1.65; }
.plan-library-list { display:grid; gap:9px; }
.plan-library-card { padding:15px 14px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.13); }
.plan-library-card.active { border-color:rgba(120,143,128,.45); background:rgba(120,143,128,.1); }
.plan-library-card span { color:var(--terra); font-size:0.5rem; font-weight:600; letter-spacing:.12em; }
.plan-library-card h3 { margin:4px 0 3px; font-size:1rem; font-weight:600; }
.plan-library-card p { margin:0; max-width:390px; color:var(--muted); font-size:0.6875rem; line-height:1.45; }
.plan-card-actions { display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.plan-card-actions button { padding:5px 0; border:0; border-bottom:1px solid var(--terra); background:transparent; color:var(--terra); font-size:0.6875rem; cursor:pointer; }
.plan-card-actions em { color:var(--sage); font-family:var(--hand); font-size:0.875rem; font-style:normal; }
.new-plan-button { width:100%; min-height:47px; margin-top:14px; border:1px dashed rgba(61,62,57,.28); border-radius:5px; background:rgba(255,255,255,.12); color:var(--terra); font-weight:500; cursor:pointer; }
.scheduled-plan-note { margin:0 0 15px; padding:11px 13px; border-left:3px solid var(--blue); background:rgba(127,149,158,.08); }
.scheduled-plan-note > span { color:var(--blue); font-size:0.5625rem; font-weight:600; letter-spacing:.1em; }
.scheduled-plan-note p { margin:5px 0 0; display:flex; justify-content:space-between; gap:8px; }
.scheduled-plan-note strong { font-size:0.75rem; }
.scheduled-plan-note small { color:var(--muted); font-size:0.625rem; }
.switch-plan-confirm { margin:15px 0 0; padding:16px; --note-paper:rgba(249,245,237,.8); }
.switch-plan-confirm h3 { margin:4px 0 6px; font-family:var(--journal); font-size:1.25rem; font-weight:500; }
.switch-plan-confirm > p:not(.eyebrow) { color:var(--muted); font-size:0.75rem; line-height:1.5; }
.switch-plan-confirm label, .library-field, .phase-start-date { display:block; margin:15px 0; }
.switch-plan-confirm label > span, .library-field > span, .phase-start-date > span { display:block; margin-bottom:6px; color:var(--muted); font-size:0.6875rem; font-weight:600; }
.switch-plan-confirm select, .library-field input, .library-field textarea, .library-field select, .phase-start-date select { width:100%; min-height:44px; padding:9px 10px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.18); color:var(--ink); font:1rem/1.4 var(--sans); }
.library-note { margin:-4px 0 14px; color:var(--blue); font-size:0.6875rem; line-height:1.5; }
.plan-template-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:15px 0 19px; }
.plan-template-grid button { min-width:0; min-height:122px; padding:11px 8px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.13); text-align:left; cursor:pointer; }
.plan-template-grid button.selected { border-color:rgba(120,143,128,.55); background:rgba(120,143,128,.12); }
.plan-template-grid span { color:var(--terra); font-family:var(--hand); font-size:1.25rem; }
.plan-template-grid strong { font-size:0.75rem; }
.plan-template-grid small { display:-webkit-box; color:var(--muted); font-size:0.5625rem; line-height:1.35; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.archived-plans { margin-top:18px; border-top:1px solid var(--line); }
.archived-plans summary { padding:13px 0; color:var(--muted); font-size:0.75rem; cursor:pointer; }
.archived-plans > div { padding:8px 0; display:flex; justify-content:space-between; border-top:1px solid var(--line); font-size:0.75rem; }
.archived-plans button { border:0; background:transparent; color:var(--terra); font-size:0.6875rem; cursor:pointer; }
.phase-sheet-line { margin:0 0 16px; color:var(--terra); font-family:var(--hand); font-size:1.125rem; }
.phase-purpose { padding:16px; --note-paper:rgba(218,228,214,.45); }
.phase-purpose span { color:var(--sage); font-size:0.5625rem; font-weight:600; letter-spacing:.1em; }
.phase-purpose p { margin:6px 0 0; color:var(--muted); font-size:0.8125rem; line-height:1.6; }
.phase-detail-section { margin:23px 0; }
.phase-detail-section h3, .readiness-list h3 { margin:0 0 9px; font-size:0.9375rem; }
.phase-detail-section > p { margin:7px 0; display:grid; grid-template-columns:16px 1fr; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.phase-detail-section > p span { color:var(--terra); }
.phase-practice-list { border-top:1px solid var(--line); }
.phase-practice-list > div { padding:10px 0; border-bottom:1px solid var(--line); }
.phase-practice-list strong { display:block; font-size:0.8125rem; }
.phase-practice-list small { display:block; margin-top:3px; color:var(--muted); font-size:0.6875rem; }
.readiness-list { margin:24px 0 15px; }
.readiness-list button { width:100%; padding:11px 0; display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:start; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; font-size:0.75rem; line-height:1.5; cursor:pointer; }
.readiness-list button > span { width:21px; height:21px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:white; }
.readiness-list button.checked > span { border-color:var(--sage); background:var(--sage); }
.phase-current-stamp { margin:24px auto 8px; width:max-content; padding:9px 13px; border:1px solid var(--sage); border-radius:50%; color:var(--sage); font-family:var(--hand); transform:rotate(-3deg); }
.readiness-note { color:var(--muted); font-size:0.625rem; line-height:1.45; text-align:center; }
.phase-return-note { margin:20px 0 8px; padding:11px 13px; border-left:3px solid var(--blue); background:rgba(127,149,158,.08); color:var(--muted); font-size:0.75rem; line-height:1.5; }
.phase-sheet .done-button:disabled { opacity:.35; box-shadow:none; cursor:default; }
.photo-archive-link { display:block; margin-top:9px; padding:5px 0; border:0; border-bottom:1px solid var(--sage); background:transparent; color:var(--sage); font-size:0.6875rem; cursor:pointer; }
.photo-archive-link span { display:inline-grid; min-width:18px; height:18px; place-items:center; margin-left:4px; border-radius:50%; background:rgba(120,143,128,.14); }
.photo-editor-preview, .photo-detail-image { height:min(52vh,430px); border:8px solid #eee9df; border-bottom-width:25px; background-size:cover; background-position:center; box-shadow:1px 4px 12px rgba(61,55,46,.16); }
.photo-editor-preview { transform:rotate(-.5deg); }
.photo-editor-tags, .photo-detail-tags { display:flex; flex-wrap:wrap; gap:6px; margin:15px 0; }
.photo-editor-tags button, .photo-detail-tags span { padding:7px 9px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:0.6875rem; }
.photo-editor-tags button { cursor:pointer; }
.photo-editor-tags button.selected { border-color:rgba(120,143,128,.5); background:rgba(120,143,128,.13); color:var(--ink); }
.photo-caption { display:block; margin:16px 0; }
.photo-caption span { display:block; margin-bottom:6px; font-size:0.75rem; font-weight:600; }
.photo-caption textarea { width:100%; min-height:78px; padding:10px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.15); color:var(--ink); font-size:1rem; line-height:1.5; resize:vertical; }
.photo-privacy-note { color:var(--muted); font-size:0.625rem; }
.photo-archive-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 10px; }
.photo-archive-grid button { min-width:0; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }
.photo-archive-grid button > span { display:block; aspect-ratio:4/5; border:6px solid #eee9df; border-bottom-width:17px; background-size:cover; background-position:center; box-shadow:1px 3px 9px rgba(61,55,46,.14); }
.photo-archive-grid button:nth-child(3n+2) > span { transform:rotate(1deg); }
.photo-archive-grid strong { display:block; margin-top:6px; font-size:0.6875rem; }
.photo-archive-grid small { display:block; margin-top:2px; color:var(--muted); font-size:0.625rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.photo-archive-empty { padding:28px 18px; text-align:center; }
.photo-archive-empty > span { color:var(--terra); font-family:var(--hand); font-size:1.8125rem; }
.photo-archive-empty h3 { margin:8px 0 5px; font-family:var(--journal); font-size:1.1875rem; font-weight:500; }
.photo-archive-empty p { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.archive-back { margin:0 0 14px; padding:5px 0; border:0; background:transparent; color:var(--terra); font-size:0.75rem; cursor:pointer; }
.photo-detail-caption { margin:18px 0 8px; font-family:var(--journal); font-size:1.0625rem; line-height:1.6; }
.photo-detail-actions { display:flex; flex-wrap:wrap; gap:8px 15px; margin-top:18px; padding-top:13px; border-top:1px solid var(--line); }
.photo-detail-actions button { padding:7px 0; border:0; border-bottom:1px solid var(--terra); background:transparent; color:var(--terra); font-size:0.6875rem; cursor:pointer; }
.delete-photo-note { color:var(--muted); font-size:0.6875rem; }
.delete-photo-note button { border:0; background:transparent; color:var(--sage); cursor:pointer; }
.photo-compare { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.photo-compare figure { margin:0; }
.photo-compare figure > div { aspect-ratio:4/5; border:5px solid #eee9df; border-bottom-width:15px; background-size:cover; background-position:center; }
.photo-compare figcaption { margin-top:5px; color:var(--muted); font-size:0.625rem; }
.compare-notes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.compare-notes p { margin:0; padding:10px; background:rgba(255,255,255,.14); font-size:0.75rem; line-height:1.5; }
.compare-notes small { display:block; margin-bottom:5px; color:var(--terra); font-size:0.5625rem; }
.mood-window .milestone-objects { opacity:.18; transition:opacity 1.2s ease,filter 1.2s ease; }
.mood-window[data-memory-level="1"] .milestone-objects { opacity:.38; }
.mood-window[data-memory-level="2"] .milestone-objects { opacity:.58; }
.mood-window[data-memory-level="3"] .milestone-objects { opacity:.78; filter:saturate(1.08); }

.day-head { min-width:0; min-height:36px; padding:4px 0 5px; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.day-head:hover, .day-head:focus-visible { background:rgba(120,143,128,.09); outline:0; }
.day-head.future { cursor:default; }
.historical-day-sheet { max-height:100dvh; height:100dvh; padding-top:18px; border-radius:0; background-color:var(--paper); background-image:linear-gradient(rgba(112,105,91,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(112,105,91,.045) 1px,transparent 1px); background-size:20px 20px; }
.historical-day-toolbar { position:sticky; z-index:3; top:-18px; margin:-18px -22px 25px; padding:calc(12px + env(safe-area-inset-top,0px)) 64px 10px 14px; display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:7px; border-bottom:1px solid rgba(61,62,57,.09); background:rgba(243,238,228,.94); backdrop-filter:blur(14px); }
.historical-day-toolbar > div { text-align:center; }
.historical-day-toolbar small { display:block; color:var(--terra); font-size:0.5625rem; letter-spacing:.14em; }
.historical-day-toolbar strong { display:block; margin-top:2px; font-size:0.75rem; font-weight:600; letter-spacing:.06em; }
.history-day-arrow { width:36px; height:36px; border:0; border-radius:50%; background:rgba(61,62,57,.06); color:var(--ink); cursor:pointer; }
.history-day-arrow:disabled { opacity:.2; cursor:default; }
.historical-day-sheet > .sheet-close { z-index:4; top:calc(11px + env(safe-area-inset-top,0px)); }
.history-page-heading { position:relative; padding:0 0 21px; border-bottom:1px solid var(--line); }
.history-page-heading .date-label { margin:0 0 8px; }
.history-page-heading h2 { margin:0 0 8px; font-family:var(--journal); font-size:1.625rem; font-weight:500; }
.history-page-heading > span { display:inline-block; padding:4px 8px; border-radius:3px; background:rgba(120,143,128,.12); color:#425646; font-size:0.6875rem; }
.history-empty { margin:18px 0 0; padding:14px; display:grid; grid-template-columns:24px 1fr; gap:9px; --note-paper:rgba(249,245,237,.78); }
.history-empty > span { color:var(--terra); font-family:var(--hand); font-size:1.1875rem; }
.history-empty p { margin:0; }
.history-empty strong { display:block; font-size:0.875rem; font-weight:500; }
.history-empty small { display:block; margin-top:4px; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.history-section { padding:24px 0 3px; }
.history-section h3, .history-checkin h3 { margin:0; font-size:1rem; font-weight:600; }
.history-moods { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }
.history-moods button { min-width:0; padding:9px 3px; border:1px solid rgba(61,62,57,.12); border-radius:4px; background:rgba(255,255,255,.14); color:var(--ink); font-size:0.6875rem; cursor:pointer; }
.history-moods button:nth-child(2) { transform:rotate(.5deg); }
.history-moods button:nth-child(3) { transform:rotate(-.5deg); }
.history-moods span { display:block; margin-bottom:4px; font-family:var(--hand); font-size:1.125rem; }
.history-moods button.selected { border-color:rgba(120,143,128,.55); background:rgba(120,143,128,.14); box-shadow:inset 0 0 0 1px rgba(120,143,128,.1); }
.history-anchor-list { margin-top:8px; border-top:1px solid var(--line); }
.history-anchor-list button { width:100%; padding:11px 0; display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:start; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; text-align:left; cursor:pointer; }
.history-anchor-list p { margin:0; }
.history-anchor-list strong { display:block; font-size:0.875rem; font-weight:500; }
.history-anchor-list small { display:block; margin-top:2px; color:var(--muted); font-size:0.6875rem; line-height:1.45; }
.history-ink-mark { width:23px; height:23px; display:grid; place-items:center; border:1px solid rgba(61,62,57,.42); border-radius:3px 2px 4px 2px; color:white; font-size:0.75rem; transition:background .35s,border-color .35s; }
.history-anchor-list button.completed .history-ink-mark { border-color:var(--history-ink); background:var(--history-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.history-practice { margin:25px 0 0; padding:17px; --note-paper:rgba(249,245,237,.74); }
.history-practice h3 { margin:3px 0 2px; font-family:var(--journal); font-size:1.3125rem; font-weight:500; }
.history-practice > div > span { color:var(--muted); font-size:0.75rem; }
.history-efforts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:15px 0 8px; }
.history-efforts button { min-width:0; padding:8px 6px; border:1px solid var(--line); border-radius:4px; background:transparent; text-align:left; cursor:pointer; }
.history-efforts small { display:block; color:var(--terra); font-family:var(--hand); font-size:0.8125rem; text-transform:capitalize; }
.history-efforts strong { display:block; margin-top:3px; font-size:0.625rem; font-weight:500; line-height:1.3; }
.history-efforts button.selected { border-color:rgba(120,143,128,.52); background:rgba(120,143,128,.12); }
.history-practice-detail { margin:10px 0 14px; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.history-practice-detail summary { padding:10px 0; color:var(--terra); font-family:var(--hand); font-size:0.875rem; cursor:pointer; }
.history-practice-detail ol { margin:0 0 10px; padding-left:21px; color:var(--muted); font-size:0.75rem; line-height:1.55; }
.history-practice-detail p { margin:8px 0; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.history-practice-toggle { width:100%; min-height:42px; border:1px solid rgba(120,143,128,.42); border-radius:5px; background:rgba(120,143,128,.08); color:var(--sage); font-weight:600; cursor:pointer; }
.history-practice-toggle.done { background:var(--sage); color:white; }
.history-writing { margin:27px 0 0; }
.history-writing label { display:block; padding:15px 0; border-top:1px solid var(--line); }
.history-writing label > span { display:block; margin-bottom:7px; font-size:0.875rem; font-weight:500; }
.history-writing label small { color:var(--muted); font-size:0.625rem; font-weight:400; }
.history-writing textarea { width:100%; min-height:54px; padding:7px 0; resize:vertical; border:0; outline:0; background:transparent; color:var(--ink); font:1rem/1.6 var(--journal); }
.history-writing textarea::placeholder { color:var(--muted); }
.history-checkin { padding:20px 0; border-top:1px solid var(--line); }
.history-checkin .checkin-chips { margin-top:11px; }
.history-photo-section { padding:20px 0; border-top:1px solid var(--line); }
.history-photo-section h3 { margin:0; font-size:1rem; }
.history-photo-section > p { color:var(--muted); font-size:0.75rem; }
.history-photo-row { display:flex; gap:8px; margin:11px 0 5px; overflow:auto; }
.history-photo-row button { flex:0 0 92px; aspect-ratio:4/5; border:5px solid #eee9df; border-bottom-width:14px; background-size:cover; background-position:center; box-shadow:1px 3px 8px rgba(61,55,46,.13); cursor:pointer; }
.history-footer { min-height:56px; padding:14px 0 5px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.history-footer > span:first-child { color:var(--muted); font-size:0.6875rem; opacity:.32; transition:opacity .2s; }
.history-footer > span:first-child.visible { opacity:1; }
.history-footer button { padding:8px 0; border:0; border-bottom:1px solid var(--terra); background:transparent; color:var(--terra); cursor:pointer; }
.history-kept-stamp { color:var(--sage); font-family:var(--hand); font-size:1.0625rem; letter-spacing:.08em; transform:rotate(-3deg); }

@media (min-width: 600px) {
  .app-shell { min-height:calc(100vh - 32px); margin:16px auto; border-radius:12px; }
  .bottom-nav { bottom:16px; border-radius:0 0 12px 12px; }
  main { padding-bottom:134px; }
  .mood-window { width:calc(100% - 44px); margin-top:22px; }
  .page-heading, .feeling-section, .journal-list-section { padding-left:34px; padding-right:34px; }
  .practice-section, .day-ending, .one-line-note, .current-chapter, .week-notes, .visual-checkin { margin-left:34px; margin-right:34px; }
  .weekly-spread { margin-left:28px; margin-right:28px; }
  .timeline { margin-left:34px; margin-right:34px; }
}

@media (max-width: 380px) {
  .practice-section { grid-template-columns:1fr 54px; }
  .practice-section .text-action { grid-column:1 / -1; justify-self:end; }
  .guide-detail-grid { grid-template-columns:1fr; }
  .visual-checkin { grid-template-columns:72px 1fr; gap:12px; padding:14px; }
  .form-pair { grid-template-columns:1fr; gap:0; }
}

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

/* Text resizing, visible keyboard focus, and comfortable interaction targets. */
:is(button,input,select,textarea,summary,a):focus-visible { outline:3px solid #526971; outline-offset:3px; }
:where(button,summary) { touch-action:manipulation; }
.inline-add, .inline-remove, .plan-card-actions button, .archive-back { min-height:44px; }
.anchor-row-actions button, .chapter-leaf, .history-day-arrow { min-width:44px; min-height:44px; }
.weekday-picker label { min-height:52px; }
.form-actions { flex-wrap:wrap; }
.form-actions > button { flex:1; min-width:110px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.storage-warning { position:relative; top:auto; left:auto; transform:none; display:block; width:calc(100% - 40px); margin:12px auto; z-index:auto; }
/* A seven-day comparison keeps its two-dimensional structure in its own region. */
.week-grid { overflow-x:auto; padding:5px; }
.week-date-grid, .week-grid-table { grid-template-columns:minmax(5.25rem,1.7fr) repeat(7,minmax(1.75rem,1fr)); min-width:19rem; }
.tracker-name { white-space:normal; overflow-wrap:anywhere; }
.day-head { min-height:44px; border:0; background:transparent; cursor:pointer; }
.grid-cell { min-height:28px; max-height:none; }
.week-plan-label span, .plan-change-strip strong { white-space:normal; overflow-wrap:anywhere; }
.heading-scribble { position:static; display:block; margin:10px 0 0 auto; }
.bottom-nav { min-height:calc(4.375rem + var(--safe-bottom)); height:auto; }
:is(button,input,select,textarea,summary,a,[tabindex="0"]):focus-visible { outline:3px solid #526971; outline-offset:3px; }
.current-chapter { grid-template-columns:44px minmax(0,1fr) auto; }
.form-actions, .section-label-row, .guide-meta, .week-caption { flex-wrap:wrap; }
.week-switcher { grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; }
.week-switcher button { width:44px; height:44px; padding:0; }
.feeling-picker, .history-moods { grid-template-columns:repeat(auto-fit,minmax(min(100%,3.6rem),1fr)); }
@media (max-width:380px) {
  .practice-section { grid-template-columns:minmax(0,1fr); }
  .practice-visual { display:none; }
}