:root {
  color-scheme: light;
  --paper: #f2efe7;
  --paper-translucent: rgba(242, 239, 231, .82);
  --ink: #171815;
  --ink-soft: #53534d;
  --line: rgba(23, 24, 21, .2);
  --seal: #91372e;
  --season: #4f765a;
  --season-dark: #31543d;
  --light: 1;
}
[data-season="spring"] { --season: #aa5d73; --season-dark: #657444; }
[data-season="summer"] { --season: #4f765a; --season-dark: #31543d; }
[data-season="autumn"] { --season: #b26228; --season-dark: #74411f; }
[data-season="winter"] { --season: #6f8790; --season-dark: #435f69; }
[data-dayphase="dawn"] { --light: .94; }
[data-dayphase="day"] { --light: 1; }
[data-dayphase="dusk"] { --light: .78; }
[data-dayphase="night"] { --light: .48; --paper: #151917; --paper-translucent: rgba(21, 25, 23, .78); --ink: #f0eadc; --ink-soft: #d0c9bb; --line: rgba(240,234,220,.25); --season-dark: #d6c7a3; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: "Songti SC", "STSong", "Noto Serif CJK TC", serif; }
body { margin: 0; min-height: 100svh; overflow: hidden; background: var(--paper); }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 50; top: 1rem; left: 1rem; padding: .6rem .9rem; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
#main, .tree-stage { position: relative; width: 100vw; height: 100svh; }
.season-art { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
.season-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; filter: brightness(var(--light)); transition: opacity 1.8s ease, filter 1.5s ease; }
[data-season="spring"] [data-art="spring"],
[data-season="summer"] [data-art="summer"],
[data-season="autumn"] [data-art="autumn"],
[data-season="winter"] [data-art="winter"] { opacity: 1; }
[data-dayphase="dawn"] .season-art img { filter: brightness(var(--light)) sepia(.08) saturate(.92); }
[data-dayphase="dusk"] .season-art img { filter: brightness(var(--light)) sepia(.25) saturate(1.08); }
[data-dayphase="night"] .season-art img { filter: brightness(var(--light)) saturate(.72) contrast(1.08); }
#ambient { position: fixed; z-index: 8; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tree-nav { position: absolute; z-index: 10; inset: 0; }
.branch { position: absolute; inset: 0; pointer-events: none; }
.branch a { position: absolute; z-index: 1; display: block; width: 2.4rem; height: 1.15rem; transform: translate(-50%, -50%) rotate(var(--leaf-turn)); text-decoration: none; opacity: 0; pointer-events: auto; animation: leaf-write .64s cubic-bezier(.2,.8,.25,1) var(--delay) forwards, leaf-sway 6.4s ease-in-out calc(var(--delay) + .7s) infinite alternate; transition: filter .3s; }
.branch a span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ink); font-size: clamp(.68rem, .8vw, .88rem); font-weight: 700; letter-spacing: .012em; white-space: nowrap; pointer-events: none; -webkit-text-stroke: .3px color-mix(in srgb, var(--paper) 88%, transparent); paint-order: stroke fill; text-shadow: 0 0 1px var(--paper), 0 0 3px color-mix(in srgb, var(--paper) 72%, transparent); transition: color .25s, text-shadow .25s; }
.branch a:hover, .branch a:focus, .branch a.active, .branch.match a, .branch a.match { z-index: 4; animation-play-state: paused; transform: translate(-50%, -58%) rotate(var(--leaf-turn)) scale(1.12); filter: saturate(1.18); }
.branch a:hover span, .branch a:focus span, .branch a.active span { color: var(--season-dark); text-shadow: 0 0 3px var(--paper), 0 0 8px var(--paper); }
@keyframes leaf-write { from { opacity: 0; transform: translate(-50%, 10%) scale(.7); filter: blur(2px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; } }
@keyframes leaf-sway { from { transform: translate(-50%, -50%) rotate(calc(var(--leaf-turn) - .45deg)); } to { transform: translate(-49%, -53%) rotate(calc(var(--leaf-turn) + .55deg)); } }
.controls { position: fixed; z-index: 30; top: 1.25rem; right: 1.5rem; display: flex; gap: 1rem; }
.controls button, .controls a { min-height: 44px; display: inline-flex; align-items: center; border: 0; border-bottom: 1px solid var(--line); padding: .35rem .05rem; background: transparent; color: var(--ink-soft); font-size: .68rem; letter-spacing: .18em; text-decoration: none; cursor: pointer; text-shadow: 0 0 7px var(--paper); }
.chronicle { position: fixed; z-index: 9; left: 1.5rem; bottom: 1.25rem; width: 15rem; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .6rem; text-shadow: 0 0 6px var(--paper); }
.chronicle > div { display: flex; justify-content: space-between; align-items: baseline; margin: .28rem 0; }
.chronicle #clock { color: var(--ink); font: 1.15rem ui-monospace, monospace; }
.chronicle strong { font-weight: 400; color: var(--ink); }
.progress { display: block !important; margin-top: .6rem !important; }
.progress label { display: grid; grid-template-columns: 1rem 1fr 2.8rem; gap: .4rem; align-items: center; margin: .25rem 0; }
.progress i { height: 1px; background: var(--line); }
.progress b { display: block; height: 2px; background: var(--season); transition: width .7s; }
.progress output { text-align: right; }
.progress progress { position: absolute; opacity: 0; }
.chronicle details { padding-top: .4rem; border-top: 1px solid var(--line); }
.chronicle summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; }
.chronicle pre { max-height: 7rem; overflow: auto; font: .56rem/1.5 ui-monospace, monospace; }
.semantic-tree { position: fixed; z-index: 35; inset: 0; display: none; overflow: auto; padding: 5rem 8vw 4rem; background: var(--paper); grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.semantic-tree section { border-top: 1px solid var(--ink); }
.semantic-tree section div { display: grid; }
.semantic-tree a { padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; }
.noscript-nav { padding: 5rem; }
@media (max-width: 900px) {
  .branch a span { font-size: .64rem; }
  .chronicle { left: 1rem; }
}
@media (max-width: 640px) {
  body { overflow: auto; }
  #main { width: 100%; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .tree-stage { width: 100%; height: auto; display: flex; flex-direction: column; }
  .season-art { position: relative; width: 100%; height: 42svh; }
  .tree-nav { display: none; }
  .semantic-tree { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; order: 2; padding: .7rem 1.2rem 2rem; gap: 1.5rem 1rem; background: var(--paper); }
  .semantic-tree a { min-height: 44px; font-size: .72rem; }
  .controls { top: .8rem; left: .9rem; right: .9rem; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .65rem; }
  .chronicle { position: relative; inset: auto; order: 3; width: auto; margin: 0 1.2rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .branch a { opacity: 1; }
  #ambient { display: none; }
}