/* Washi and ink. Pages are built from overlapping layers, each a different
   paper tone with an uneven leaf edge, like leaves or sheets laid on top of
   one another. Light is rice paper in morning light; dark is a lantern-lit
   garden at night, warm plum and ink, not blue-black.

   Colour-blind safety: text and controls rely on light/dark contrast, and every
   state also has a tick, a label or a change of weight. Hue is decoration. */
:root {
  --l0: #f5eee3; --l1: #efe2d0; --l2: #ecd9d3; --l3: #e3e1cf;
  --field: #fcf8f1;
  --card: rgb(255 252 246 / 0.62);
  --ink: #2e2a33;
  --muted: #5f565d;
  --line: rgb(46 42 51 / 0.14);
  --line-strong: rgb(46 42 51 / 0.36);
  --accent: #7b3f5e;
  --accent-ink: #fffaf6;
  --accent-soft: #f0d7de;
  --warm: #8f5216;
  --warm-soft: #f6e4c6;
  --bark: #3d3238;
  --petal-0: #f2b3c3; --petal-1: #e895ac; --petal-2: #f8d6dd; --petal-3: #dc7b98; --bud: #b4567a;
  --moon: #fbe3cf; --moon-o: 0.85;
  --stage: radial-gradient(120% 90% at 72% 22%, #fbf1e6 0%, #f3e6dc 55%, #ecdcd3 100%);
  --wax: #f6eedf; --flame: #f0a63c; --flame-core: #fff1c9;
  --edge-shadow: rgb(70 40 50 / 0.1);
  --serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --leaf: 18px 5px 18px 5px;
  --leaf-sm: 12px 4px 12px 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --l0: #221c27; --l1: #2c2331; --l2: #36293a; --l3: #2b2b38;
    --field: #2c2430; --card: rgb(255 238 232 / 0.055);
    --ink: #f2e8dd; --muted: #bfb1b0;
    --line: rgb(242 232 221 / 0.13); --line-strong: rgb(242 232 221 / 0.34);
    --accent: #efb1c3; --accent-ink: #2b1823; --accent-soft: #48303d;
    --warm: #e8bd7e; --warm-soft: #3e3122; --bark: #8f7c7c;
    --petal-0: #f6c0cd; --petal-1: #ee9db5; --petal-2: #fbe1e6; --petal-3: #e283a0; --bud: #c46c8c;
    --moon: #f6e2bd; --moon-o: 0.16;
    --stage: radial-gradient(120% 90% at 72% 22%, #3a2c3d 0%, #241c29 50%, #18131c 100%);
    --wax: #e6dccb; --edge-shadow: rgb(0 0 0 / 0.28);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --l0: #221c27; --l1: #2c2331; --l2: #36293a; --l3: #2b2b38;
  --field: #2c2430; --card: rgb(255 238 232 / 0.055);
  --ink: #f2e8dd; --muted: #bfb1b0;
  --line: rgb(242 232 221 / 0.13); --line-strong: rgb(242 232 221 / 0.34);
  --accent: #efb1c3; --accent-ink: #2b1823; --accent-soft: #48303d;
  --warm: #e8bd7e; --warm-soft: #3e3122; --bark: #8f7c7c;
  --petal-0: #f6c0cd; --petal-1: #ee9db5; --petal-2: #fbe1e6; --petal-3: #e283a0; --bud: #c46c8c;
  --moon: #f6e2bd; --moon-o: 0.16;
  --stage: radial-gradient(120% 90% at 72% 22%, #3a2c3d 0%, #241c29 50%, #18131c 100%);
  --wax: #e6dccb; --edge-shadow: rgb(0 0 0 / 0.28);
  color-scheme: dark;
}
:root[data-contrast='more'] { --ink: #17131b; --muted: #37303a; --line: rgb(23 19 27 / 0.42); --line-strong: rgb(23 19 27 / 0.75); --accent: #5c2743; --warm: #693a08; }
@media (prefers-color-scheme: dark) {
  :root[data-contrast='more']:not([data-theme='light']) { --ink: #ffffff; --muted: #e4d9d6; --line: rgb(255 255 255 / 0.4); --line-strong: rgb(255 255 255 / 0.72); --accent: #ffd0dc; --warm: #f7d39b; }
}
:root[data-contrast='more'][data-theme='dark'] { --ink: #ffffff; --muted: #e4d9d6; --line: rgb(255 255 255 / 0.4); --line-strong: rgb(255 255 255 / 0.72); --accent: #ffd0dc; --warm: #f7d39b; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--l0); color: var(--ink);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  min-height: 100dvh; overscroll-behavior-y: none;
}
h1, h2, h3, p { margin: 0; }
h1 { font: 500 1.9rem/1.15 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font: italic 500 1.15rem/1.3 var(--serif); color: var(--ink); }
h3 { font: 600 1.05rem/1.3 var(--sans); }
a { color: var(--accent); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.app { display: flex; flex-direction: column; min-height: 100dvh; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 18px; }
.top { position: sticky; top: 0; z-index: 5; background: var(--l0); padding-top: env(safe-area-inset-top); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.brand { font: italic 500 1.05rem var(--serif); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand svg { width: 20px; height: 20px; }
.support-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--leaf-sm);
  border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 600;
}
.support-btn svg { width: 16px; height: 16px; }

/* ---------- layers ---------- */
#view { flex: 1; display: flex; flex-direction: column; }
#results, #liblist { display: contents; }
.layer { position: relative; background: var(--tone); padding: 22px 0 70px; filter: drop-shadow(0 -5px 6px var(--edge-shadow)); }
.layer::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 46px; background: var(--tone);
  -webkit-mask: var(--edge) center / 100% 100% no-repeat; mask: var(--edge) center / 100% 100% no-repeat;
}
.layer.t0 { --tone: var(--l0); filter: none; padding-top: 6px; }
.layer.t0::before { display: none; }
.layer.t1 { --tone: var(--l1); --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V27C58 7 128 6 200 22S342 40 400 19V48Z'/%3E%3C/svg%3E"); --keyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -14 400 62' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='black' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 27C58 7 128 6 200 22S342 40 400 19' transform='translate(0 -5)' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 27C58 7 128 6 200 22S342 40 400 19' transform='translate(0 -11)' stroke-width='.7' stroke-opacity='.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); }
.layer.t2 { --tone: var(--l2); --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V15C68 34 142 38 212 24S332 3 400 13V48Z'/%3E%3C/svg%3E"); --keyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -14 400 62' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='black' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 15C68 34 142 38 212 24S332 3 400 13' transform='translate(0 -5)' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 15C68 34 142 38 212 24S332 3 400 13' transform='translate(0 -11)' stroke-width='.7' stroke-opacity='.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); }
.layer.t3 { --tone: var(--l3); --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V31C52 15 112 8 172 18S292 44 400 8V48Z'/%3E%3C/svg%3E"); --keyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -14 400 62' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='black' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 31C52 15 112 8 172 18S292 44 400 8' transform='translate(0 -5)' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 31C52 15 112 8 172 18S292 44 400 8' transform='translate(0 -11)' stroke-width='.7' stroke-opacity='.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); }
#view > .layer:last-child, #results > .layer:last-child, #liblist > .layer:last-child { flex: 1; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

.page-head { position: relative; padding: 78px 0 2px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.page-head.plain { padding-top: 6px; }
.sprig { position: absolute; top: -18px; right: -18px; width: 250px; height: 130px; pointer-events: none; }
.sprig .twig { fill: none; stroke: var(--bark); stroke-linecap: round; }
.sprig .f0 { fill: var(--petal-0); } .sprig .f1 { fill: var(--petal-1); } .sprig .f2 { fill: var(--petal-2); } .sprig .f3 { fill: var(--petal-3); }
.sprig .eye { fill: var(--bud); }
.lead { color: var(--muted); max-width: 58ch; }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--l0); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs-in { max-width: 680px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; text-decoration: none; color: var(--muted); font-size: 0.7rem; font-weight: 500; }
.tab svg { width: 22px; height: 22px; }
.tab[aria-current='page'] { color: var(--accent); font-weight: 700; }
.tab[aria-current='page']::after { content: ''; width: 16px; height: 3px; border-radius: 3px 1px 3px 1px; background: var(--accent); margin-top: 1px; }
.tab:not([aria-current='page'])::after { content: ''; height: 3px; margin-top: 1px; }

svg.i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap-row { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }

/* ---------- fold-away panels ---------- */
.fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 6px 0; min-height: 40px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .hint { font-size: 0.84rem; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fold > summary .chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform 0.2s; }
.fold[open] > summary .chev { transform: rotate(90deg); }
.fold[open] > summary .hint { display: none; }
.fold > summary h2 { flex: 1; }
.fold-body { padding-top: 12px; display: flex; flex-direction: column; gap: 16px; }
.fold + .fold { border-top: 1px solid var(--line); padding-top: 4px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--leaf); padding: 16px; }
.card:nth-of-type(even) { border-radius: 5px 18px 5px 18px; }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--line-strong); }
.card .ex-line { color: var(--muted); font-size: 0.93rem; margin-top: 6px; }
.card .why { margin-top: 10px; font-size: 0.8rem; color: var(--muted); }
.card.flush { padding: 2px 16px; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 8px 3px 8px 3px; border: 1px solid var(--line-strong); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.mark { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.mark svg { width: 14px; height: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 13px; border-radius: 14px 4px 14px 4px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; }
.chip:nth-child(even) { border-radius: 4px 14px 4px 14px; }
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip[aria-pressed='true']::before { content: '✓'; font-size: 0.8em; }

.field { width: 100%; padding: 12px 14px; border-radius: var(--leaf-sm); border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); resize: vertical; }
textarea.field { min-height: 92px; line-height: 1.5; }
.field::placeholder { color: var(--muted); opacity: 0.8; }
.lbl { font-size: 0.86rem; font-weight: 600; display: block; margin-bottom: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; min-height: 44px; border-radius: var(--leaf-sm); border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent); padding-inline: 8px; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 0.88rem; }
.btn.block { width: 100%; }
.btn.begin { min-height: 54px; font: 500 1.2rem var(--serif); letter-spacing: 0.02em; border-radius: 22px 6px 22px 6px; }
.btn[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.btn svg { width: 18px; height: 18px; }
.btn.danger { color: var(--warm); border-color: var(--warm); }

.seg { display: inline-flex; align-self: flex-start; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--leaf-sm); overflow: hidden; background: var(--field); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 9px 14px; min-height: 42px; font-size: 0.92rem; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.switch:last-child { border-bottom: 0; }
.switch .t { font-weight: 500; }
.switch .d { font-size: 0.84rem; color: var(--muted); }
.switch input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; flex: none; border-radius: 999px; background: var(--line-strong); position: relative; transition: background 0.2s; margin: 0; cursor: pointer; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--field); transition: transform 0.2s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(20px); }

.callout { border-left: 3px solid var(--warm); background: var(--warm-soft); padding: 12px 14px; border-radius: 0 14px 4px 0; font-size: 0.93rem; }
.callout b { display: block; margin-bottom: 2px; }
.support-card { border: 1.5px solid var(--warm); background: var(--warm-soft); border-radius: var(--leaf); padding: 16px; }
.support-card p { margin-bottom: 12px; }

.back { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 6px 0; color: var(--accent); font-weight: 600; }
.back svg { width: 18px; height: 18px; }
.gist { font: 400 1.14rem/1.6 var(--serif); }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
ol.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 13px 4px 13px 4px; border: 1px solid var(--line-strong); display: grid; place-items: center; font: italic 500 0.9rem var(--serif); color: var(--muted); }
.ex { padding: 14px 0; border-top: 1px solid var(--line); }
.ex:first-child { border-top: 0; padding-top: 0; }
.ex:last-child { padding-bottom: 0; }
.k { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.passage blockquote { margin: 0; font: italic 400 1.1rem/1.65 var(--serif); }
.passage cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.84rem; color: var(--muted); }
.passage .plain { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.list { display: flex; flex-direction: column; }
.list > a, .list > .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.list > :last-child { border-bottom: 0; }
.list .n { font-weight: 500; }
.list .s { font-size: 0.84rem; color: var(--muted); }
.list .chev { color: var(--muted); flex: none; width: 16px; height: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.check .done { text-decoration: line-through; color: var(--muted); }
.icon-btn { border: 0; background: none; color: var(--muted); padding: 8px; border-radius: 8px; flex: none; }
.icon-btn svg { width: 18px; height: 18px; display: block; }

/* ---------- sit ---------- */
.picker { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.pick { border: 1px solid var(--line-strong); border-radius: var(--leaf); background: var(--card); padding: 8px 6px 10px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.pick:nth-child(2) { border-radius: 5px 18px 5px 18px; }
.pick svg.visual { width: 100%; height: 100px; display: block; }
.pick[aria-pressed='true'] { border: 2px solid var(--accent); padding: 7px 5px 9px; background: var(--accent-soft); }
.pick[aria-pressed='true'] span::before { content: '✓ '; }
.minutes { display: flex; align-items: baseline; gap: 10px; }
.minutes output { font: 400 3.6rem/1 var(--serif); font-variant-numeric: tabular-nums; }
input[type='range'] { width: 100%; accent-color: var(--accent); }

.stage { position: fixed; inset: 0; z-index: 20; background: var(--stage); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); user-select: none; -webkit-user-select: none; }
.stage svg.visual { width: min(92vw, 64dvh, 500px); max-height: 66dvh; height: auto; flex: none; }
.stage .time { font: 400 1.5rem var(--serif); font-variant-numeric: tabular-nums; color: var(--muted); min-height: 2.2rem; margin-top: 8px; transition: opacity 0.4s; }
.stage .time.off { opacity: 0; }
.stage .controls { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 16px; transition: opacity 0.5s; }
.stage.bare .controls { opacity: 0; pointer-events: none; }
.stage .tip { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font-size: 0.82rem; color: var(--muted); transition: opacity 0.5s; }
.stage.bare .tip { opacity: 0; }
.pacer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; min-height: 64px; }
.pacer i { display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent-soft); }
.pacer span { font-size: 0.8rem; color: var(--muted); min-height: 1.2em; }

/* ---------- visuals ---------- */
svg.visual .moon { fill: var(--moon); opacity: var(--moon-o); }
svg.visual .ground { fill: none; stroke: var(--bark); stroke-width: 2.4; stroke-linecap: round; opacity: 0.55; }
svg.visual .wood path { fill: none; stroke: var(--bark); stroke-linecap: round; }
.leaf { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.leaf.tone0 .petals { fill: var(--petal-0); } .leaf.tone1 .petals { fill: var(--petal-1); }
.leaf.tone2 .petals { fill: var(--petal-2); } .leaf.tone3 .petals { fill: var(--petal-3); }
.leaf .bud { fill: var(--bud); }
.tree.bloom .petals { transform: scale(0); opacity: 0; transition: transform 4.5s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 2.5s ease-out; }
.tree.bloom .leaf.on .petals { transform: scale(1); opacity: 1; }
.tree.fall .leaf { transition: transform var(--dur) cubic-bezier(0.4, 0.05, 0.7, 0.6), opacity var(--dur); }
.tree.fall .leaf.fallen { transform: translate(calc(var(--x) + var(--dx)), var(--gy)) rotate(calc(var(--r) + 260deg)); opacity: 0.8; }
.instant .leaf, .instant .petals { transition: none !important; }

.candle .wax { fill: var(--wax); stroke: var(--line-strong); stroke-width: 1.5; }
.candle .pool { fill: var(--field); stroke: var(--line-strong); stroke-width: 1; }
.candle .dish { fill: var(--bark); opacity: 0.5; }
.candle .wick { fill: none; stroke: var(--bark); stroke-width: 2.5; stroke-linecap: round; }
.candle .flame { transform-origin: 0 -10px; animation: flicker 3.2s ease-in-out infinite; transition: opacity 2.5s, transform 2.5s; }
.candle .flame-outer { fill: var(--flame); } .candle .flame-inner { fill: var(--flame-core); }
.candle .flame.out { opacity: 0; transform: scale(0.2); animation: none; }
.candle .glow { transition: opacity 2.5s; }
.candle .glow.out { opacity: 0; }
.candle .glow-a { stop-color: var(--flame); stop-opacity: 0.34; } .candle .glow-b { stop-color: var(--flame); stop-opacity: 0; }
.candle .smoke { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.candle .smoke.on { animation: smoke 7s ease-out forwards; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); } 22% { transform: scale(0.97, 1.04) skewX(1.6deg); }
  47% { transform: scale(1.02, 0.97) skewX(-1.2deg); } 71% { transform: scale(0.98, 1.03) skewX(0.8deg); }
}
@keyframes smoke { 0% { opacity: 0; } 20% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-18px); } }

.enso .guide { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 1 9; stroke-linecap: round; }
.enso .ink { fill: none; stroke: var(--ink); stroke-width: 20; stroke-linecap: round; transition: stroke-dasharray 0.3s linear; }
.enso .ink.wash { stroke-width: 30; opacity: 0.14; }
.enso .ink.dry { stroke-width: 4; opacity: 0.35; stroke: var(--l0); }

/* ---------- sheet, toast, lock ---------- */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgb(20 12 18 / 0.5); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; background: var(--l1); border-radius: 26px 8px 0 0; padding: 24px 18px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; max-height: 88dvh; overflow: auto; }
@media (min-width: 600px) { .scrim { align-items: center; } .sheet { border-radius: 26px 8px 26px 8px; } }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; background: var(--ink); color: var(--l0); padding: 10px 16px; border-radius: var(--leaf-sm); font-size: 0.9rem; font-weight: 500; max-width: calc(100vw - 32px); }
.lock { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.lock form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .tree.bloom .petals { transition: opacity 1.5s !important; }
  .tree.fall .leaf { transition: opacity 1.5s !important; }
  .candle .flame { animation: none; }
  .switch input, .switch input::after, .fold > summary .chev { transition: none; }
}

/* ---------- print layer: grain, wave lines, shadows ----------
   Old woodblock-print touches under clean modern layers: paper grain on every
   sheet, long sea-wave edges with fine echo lines, a band of wave scales
   (seigaiha) behind the first fold, a sun behind the blossom branch. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0 0.12 0.34 0 0 0 -0.13'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0 0.12 0.24 0 0 0 -0.137'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20'%3E%3Cg fill='%23f5eee3' stroke='%2334557a' stroke-opacity='0.34' stroke-width='.75'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='0' cy='0' r='14.5' fill='none'/%3E%3Ccircle cx='0' cy='0' r='9' fill='none'/%3E%3Ccircle cx='0' cy='0' r='3.5' fill='none'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='14.5' fill='none'/%3E%3Ccircle cx='40' cy='0' r='9' fill='none'/%3E%3Ccircle cx='40' cy='0' r='3.5' fill='none'/%3E%3Ccircle cx='20' cy='10' r='20'/%3E%3Ccircle cx='20' cy='10' r='14.5' fill='none'/%3E%3Ccircle cx='20' cy='10' r='9' fill='none'/%3E%3Ccircle cx='20' cy='10' r='3.5' fill='none'/%3E%3Ccircle cx='0' cy='20' r='20'/%3E%3Ccircle cx='0' cy='20' r='14.5' fill='none'/%3E%3Ccircle cx='0' cy='20' r='9' fill='none'/%3E%3Ccircle cx='0' cy='20' r='3.5' fill='none'/%3E%3Ccircle cx='40' cy='20' r='20'/%3E%3Ccircle cx='40' cy='20' r='14.5' fill='none'/%3E%3Ccircle cx='40' cy='20' r='9' fill='none'/%3E%3Ccircle cx='40' cy='20' r='3.5' fill='none'/%3E%3Ccircle cx='20' cy='30' r='20'/%3E%3Ccircle cx='20' cy='30' r='14.5' fill='none'/%3E%3Ccircle cx='20' cy='30' r='9' fill='none'/%3E%3Ccircle cx='20' cy='30' r='3.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  --seal: #b5452f; --sun: #d8694f; --sun-o: 0.5; --key: rgb(46 42 51 / 0.34);
  --shadow-a: rgb(70 35 45 / 0.1); --shadow-b: rgb(70 35 45 / 0.08); --lift: 0 1px 1px rgb(70 35 45 / 0.06), 0 10px 20px -13px rgb(70 35 45 / 0.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.88 0.3 0 0 0 -0.115'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.88 0.21 0 0 0 -0.121'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20'%3E%3Cg fill='%23221c27' stroke='%23a9bbdc' stroke-opacity='0.26' stroke-width='.75'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='0' cy='0' r='14.5' fill='none'/%3E%3Ccircle cx='0' cy='0' r='9' fill='none'/%3E%3Ccircle cx='0' cy='0' r='3.5' fill='none'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='14.5' fill='none'/%3E%3Ccircle cx='40' cy='0' r='9' fill='none'/%3E%3Ccircle cx='40' cy='0' r='3.5' fill='none'/%3E%3Ccircle cx='20' cy='10' r='20'/%3E%3Ccircle cx='20' cy='10' r='14.5' fill='none'/%3E%3Ccircle cx='20' cy='10' r='9' fill='none'/%3E%3Ccircle cx='20' cy='10' r='3.5' fill='none'/%3E%3Ccircle cx='0' cy='20' r='20'/%3E%3Ccircle cx='0' cy='20' r='14.5' fill='none'/%3E%3Ccircle cx='0' cy='20' r='9' fill='none'/%3E%3Ccircle cx='0' cy='20' r='3.5' fill='none'/%3E%3Ccircle cx='40' cy='20' r='20'/%3E%3Ccircle cx='40' cy='20' r='14.5' fill='none'/%3E%3Ccircle cx='40' cy='20' r='9' fill='none'/%3E%3Ccircle cx='40' cy='20' r='3.5' fill='none'/%3E%3Ccircle cx='20' cy='30' r='20'/%3E%3Ccircle cx='20' cy='30' r='14.5' fill='none'/%3E%3Ccircle cx='20' cy='30' r='9' fill='none'/%3E%3Ccircle cx='20' cy='30' r='3.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    --seal: #d06a52; --sun: #c9634f; --sun-o: 0.42; --key: rgb(242 232 221 / 0.3);
    --shadow-a: rgb(0 0 0 / 0.3); --shadow-b: rgb(0 0 0 / 0.22); --lift: 0 1px 1px rgb(0 0 0 / 0.25), 0 10px 20px -12px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme='dark'] {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.88 0.3 0 0 0 -0.115'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.88 0.21 0 0 0 -0.121'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20'%3E%3Cg fill='%23221c27' stroke='%23a9bbdc' stroke-opacity='0.26' stroke-width='.75'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='0' cy='0' r='14.5' fill='none'/%3E%3Ccircle cx='0' cy='0' r='9' fill='none'/%3E%3Ccircle cx='0' cy='0' r='3.5' fill='none'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='14.5' fill='none'/%3E%3Ccircle cx='40' cy='0' r='9' fill='none'/%3E%3Ccircle cx='40' cy='0' r='3.5' fill='none'/%3E%3Ccircle cx='20' cy='10' r='20'/%3E%3Ccircle cx='20' cy='10' r='14.5' fill='none'/%3E%3Ccircle cx='20' cy='10' r='9' fill='none'/%3E%3Ccircle cx='20' cy='10' r='3.5' fill='none'/%3E%3Ccircle cx='0' cy='20' r='20'/%3E%3Ccircle cx='0' cy='20' r='14.5' fill='none'/%3E%3Ccircle cx='0' cy='20' r='9' fill='none'/%3E%3Ccircle cx='0' cy='20' r='3.5' fill='none'/%3E%3Ccircle cx='40' cy='20' r='20'/%3E%3Ccircle cx='40' cy='20' r='14.5' fill='none'/%3E%3Ccircle cx='40' cy='20' r='9' fill='none'/%3E%3Ccircle cx='40' cy='20' r='3.5' fill='none'/%3E%3Ccircle cx='20' cy='30' r='20'/%3E%3Ccircle cx='20' cy='30' r='14.5' fill='none'/%3E%3Ccircle cx='20' cy='30' r='9' fill='none'/%3E%3Ccircle cx='20' cy='30' r='3.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    --seal: #d06a52; --sun: #c9634f; --sun-o: 0.42; --key: rgb(242 232 221 / 0.3);
    --shadow-a: rgb(0 0 0 / 0.3); --shadow-b: rgb(0 0 0 / 0.22); --lift: 0 1px 1px rgb(0 0 0 / 0.25), 0 10px 20px -12px rgb(0 0 0 / 0.6);
}

body, .top, .tabs, .sheet { background-image: var(--grain); }
.stage { background-image: var(--grain), var(--stage); }
.layer { background-image: var(--grain); filter: drop-shadow(0 -1.5px 1px var(--shadow-a)) drop-shadow(0 -9px 11px var(--shadow-b)); }
.layer::before { background-image: var(--grain); }
.layer > .wrap { position: relative; z-index: 1; }

/* Two fine lines ride just ahead of each wave edge, like the keylines of a print. */
.layer::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 60px; background: var(--key); pointer-events: none;
  -webkit-mask: var(--keyline) center / 100% 100% no-repeat; mask: var(--keyline) center / 100% 100% no-repeat;
}

/* The first sheet ends in a band of wave scales that the next sheet washes over. */
.layer.t0 { filter: none; padding-bottom: 112px; }
.layer.t0::after {
  bottom: 0; height: 124px; background: var(--seigaiha) 50% 100% / 44px 22px;
  -webkit-mask: linear-gradient(to top, #000 34%, transparent); mask: linear-gradient(to top, #000 34%, transparent);
}
#view > .layer.t0:last-child::after { display: none; }

.card, .pick { box-shadow: var(--lift); }
.chip, .btn, .seg, .support-btn, .field { box-shadow: 0 1px 2px var(--shadow-a); }
.btn.quiet, .back { box-shadow: none; }
.btn.primary, .chip[aria-pressed='true'] { box-shadow: 0 1px 1px var(--shadow-a), 0 7px 14px -9px var(--accent); }
.tabs { box-shadow: 0 -6px 14px -10px var(--shadow-a); }

/* A small petal marks each section heading. */
.layer h2::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 60% 60% 60% 0; background: var(--seal);
  transform: translateY(-1px) rotate(-45deg); opacity: 0.85;
}

.brand svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px var(--shadow-a)); }
.brand .seal-bg { fill: var(--seal); }
.brand .seal-ink { fill: none; stroke: var(--l0); stroke-width: 2.1; stroke-linecap: round; }

.sprig { top: -22px; right: -18px; width: 270px; height: 140px; }
.sprig .sun { fill: var(--sun); opacity: var(--sun-o); }
.sprig .bl { filter: drop-shadow(0 1.5px 1.5px rgb(60 20 40 / 0.22)); }
.sprig .bl path { stroke: var(--bud); stroke-width: 0.45; stroke-opacity: 0.6; }
.sprig .twig { filter: drop-shadow(0 1.5px 1px rgb(40 20 30 / 0.2)); }
.page-head { padding-top: 96px; }
.page-head.plain { padding-top: 6px; }

svg.visual .wood { filter: drop-shadow(0 2px 2px rgb(30 15 25 / 0.22)); }
svg.visual .moon { filter: drop-shadow(0 0 10px var(--moon)); }