/* Tracks (tracks.html, tracks/<id>.html) and the glossary (glossary.html). Pages: courses/build-tracks.js,
   runtime: src/tracks.js. Built on study.css (sheets, buttons, folders) and games.css (the instrument, its keys,
   the lamp and the thermal slip). Flat where you read, physical where you press. Phone first. */

/* ---------- Shared ---------- */
.tr-head { padding: 8px 4px 0; }
.tr-head .st-h1 { font-size: clamp(40px, 5vw, 64px); }
.tr-head .st-lede { max-width: 58ch; }
.tr-bar { display: block; flex: 0 1 200px; min-width: 60px; height: 6px; border-radius: 6px; background: var(--rule); overflow: hidden; }
.tr-bar i { display: block; width: 0; height: 100%; border-radius: 6px; background: var(--green); transition: width .6s var(--enter); }
.tr-words { font-size: 14px; color: var(--ink-2); }
.tr-card-k { margin: 0; font-size: 13px; color: var(--ink-3); }

/* the stamp on a folder: a green tick when done, an inked tick when known; an orange light where you are */
.tr-stamp { position: absolute; z-index: 2; top: -7px; right: -11px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; }
.tr-stamp::after { content: ""; width: 8px; height: 4.5px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.is-done > .tr-cs-f > .tr-stamp, .is-done > .tr-cover > .tr-stamp { display: grid; background: var(--green); color: #fff; box-shadow: 0 0 0 2.5px var(--card); }
.is-known > .tr-cs-f > .tr-stamp, .is-known > .tr-cover > .tr-stamp { display: grid; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2.5px var(--card); }

/* the game's stop: a small instrument instead of a folder */
.tr-mini {
  position: relative; display: block; width: 100%; aspect-ratio: 240 / 300; border-radius: 7px;
  background: linear-gradient(170deg, #E4E1DA 0%, #D6D2CA 55%, #CBC7BE 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(60, 48, 30, .14), 0 1px 2px rgba(60, 48, 30, .12), 0 10px 20px -6px rgba(60, 48, 30, .25);
}
.tr-mini-grill { position: absolute; left: 10%; top: 8%; width: 36%; height: 11%; background-image: radial-gradient(circle, rgba(40, 34, 26, .55) 1px, transparent 1.4px); background-size: 4.5px 4.5px; opacity: .7; }
.tr-mini-scr { position: absolute; left: 10%; right: 10%; top: 26%; height: 40%; border-radius: 4px; background: #131210; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); display: grid; place-items: center; }
.tr-mini-scr b { font: 800 clamp(10px, 1.6vw, 20px)/1 "Doto", ui-monospace, monospace; color: #FF5A1F; text-shadow: 0 0 5px rgba(255, 90, 31, .55); letter-spacing: .04em; }
.tr-mini-lamp { position: absolute; right: 12%; bottom: 10%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #CFCAC1, #B5B0A6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.tr-mini-lamp::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: #6E665A; }
.is-done .tr-mini-lamp::after { background: #23885A; box-shadow: 0 0 6px rgba(35, 136, 90, .8); }
.is-progress .tr-mini-lamp::after { background: #D0652C; box-shadow: 0 0 6px rgba(255, 90, 31, .5); }
[data-theme="dark"] .tr-mini { background: linear-gradient(170deg, #3B3935 0%, #33312D 55%, #2C2A27 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .4); }

/* ---------- Tracks home: four routes ---------- */
/* Two tracks, one per subject, side by side. */
.tr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tr-card {
  display: flex; flex-direction: column; padding: 28px 30px 24px; border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--lift-1); color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tr-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.tr-card:hover .st-folder-face { transform: perspective(800px) rotateY(-6deg); }
/* Both routes use the same folder size, small enough for the AI route's eight stops to sit in one row. */
.tr-cards .tr-chain { --f: 46px; }
.tr-chain.is-long { margin-left: -10px; margin-right: -10px; }
@media (max-width: 1320px) { .tr-cards .tr-chain { --f: 42px; } .tr-cards .tr-cs-n { font-size: 11px; letter-spacing: -.01em; } }
.tr-card-t { margin-top: 6px; font: 380 clamp(30px, 3vw, 40px)/1.05 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.tr-card-t i { font-style: italic; }
.tr-card-who { margin-top: 8px; max-width: 46ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* the route: small folders on one hand-drawn line, solid as far as you've come, dotted after */
.tr-chain { --f: 54px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: min(100% + 12px, var(--n) * 132px); margin: 28px -6px 22px; }
.tr-chain-line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: calc(var(--f) * 1.25 / 2 - 10px); height: 20px; }
.tr-chain-line > span { position: absolute; inset: 0; }
.tr-chain-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tr-chain-line path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tr-chain-ahead path { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 1 6; opacity: .8; }
.tr-chain-done { clip-path: inset(0 calc((1 - var(--done, 0)) * 100%) 0 0); }
.tr-chain-done path { stroke: var(--ink); stroke-width: 2.2; }
.tr-cs { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 9px; min-width: 0; }
.tr-cs-f { position: relative; width: var(--f); }
.tr-cs .st-folder { width: 100%; height: auto; }
.tr-cs-n { padding: 0 2px; font-size: 12.5px; line-height: 1.2; text-align: center; color: var(--ink-2); }
/* where you are: the same orange ribbon as on the track's page */
.tr-cs.is-here .tr-cs-f::after {
  content: ""; position: absolute; z-index: 2; right: 14%; top: -4px; width: 9px; height: 19px; border-radius: 1.5px 1.5px 0 0;
  background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.tr-cs.is-here .tr-cs-n { color: var(--ink); font-weight: 500; }
.tr-card-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 6px; }
.tr-card-foot .tr-bar { flex: 1 1 auto; max-width: 200px; }
.tr-card-foot .tr-words { flex: none; white-space: nowrap; }
.tr-foot-note { margin: 12px 4px 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- One track: the route, top to bottom ---------- */
/* One track: a band across the top (the name, the bar and the next lesson), then the route under it. */
.tr-page { --col: 112px; --cw: 82px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 920px; width: 100%; margin: 0 auto; padding: 24px 0 24px; align-items: start; }
.tr-side { padding: 8px 4px 0; }
.tr-band { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: end; }
.tr-band .tr-next { margin-top: 0; }
.tr-side .st-h1 { margin-top: 8px; font-size: clamp(40px, 4.4vw, 58px); }
.tr-side .st-lede { font-size: 16.5px; }
.tr-prog { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.tr-next { position: relative; display: grid; gap: 4px; margin-top: 20px; padding: 20px 20px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--lift-1); }
.tr-next-mark { position: absolute; right: 20px; top: -5px; width: 16px; height: 36px; border-radius: 2px 2px 0 0; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.tr-next.is-all .tr-next-mark { background: var(--green); }
.tr-next-k { font-size: 13px; color: var(--ink-3); }
.tr-next-t { padding-right: 30px; font: 500 21px/1.25 var(--sans); letter-spacing: -.015em; }
.tr-next-s { font-size: 14px; color: var(--ink-2); }
.tr-next .st-btn { width: 100%; height: 50px; margin-top: 14px; font-size: 15.5px; }
.tr-hint { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.tr-route { list-style: none; margin: 0; padding: 12px 0 0; }
.tr-stop { position: relative; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: 0 26px; padding-bottom: 52px; }
.tr-stop:last-child { padding-bottom: 8px; }
.tr-cover { position: relative; z-index: 1; justify-self: center; align-self: start; width: var(--cw); }
.tr-cover .st-folder { width: 100%; height: auto; }
.tr-cover:hover .st-folder-face { transform: perspective(800px) rotateY(-6deg); }
.tr-wire { position: absolute; z-index: 0; left: calc(var(--col) / 2 - 20px); top: calc(var(--cw) * 0.625); width: 40px; height: 100%; overflow: visible; }
.tr-stop:last-child .tr-wire { display: none; }
.tr-wire path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tr-wire-a { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 1 7; opacity: .85; }
.tr-wire-b { stroke: var(--ink); stroke-width: 2.2; display: none; }
.is-walked > .tr-wire .tr-wire-a { display: none; }
.is-walked > .tr-wire .tr-wire-b { display: inline; }
/* where you are: an orange ribbon on the folder */
.tr-pin { position: absolute; z-index: 2; right: 14%; top: -5px; width: 13px; height: 28px; border-radius: 2px 2px 0 0; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); display: none; }
.is-here > .tr-cover > .tr-pin { display: block; }

.tr-info { min-width: 0; padding-top: 4px; }
.tr-state { display: flex; align-items: center; gap: 10px; min-height: 22px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.tr-state .tr-bar { flex: 0 0 72px; height: 4px; display: none; }
.is-progress .tr-state { color: var(--orange-ink); }
.is-progress .tr-state .tr-bar { display: block; }
.is-done .tr-state { color: var(--green); }
.is-known .tr-state { color: var(--ink); }
.tr-unmark { margin: -11px 0; padding: 11px 6px; border: 0; background: none; cursor: pointer; font: 400 13px var(--sans); color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.tr-unmark:hover { color: var(--ink); }
.tr-t { margin: 6px 0 0; font: 380 clamp(28px, 2.6vw, 36px)/1.08 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.tr-t i { font-style: italic; }
.tr-t a { transition: color .16s var(--ease); }
.tr-t a:hover { color: var(--ink-2); }
.tr-why { margin: 8px 0 0; max-width: 54ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.tr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tr-acts .st-btn { height: 44px; font-size: 14.5px; }
.tr-acts .st-btn[hidden] { display: none; }

/* ---------- The check: a small instrument ---------- */
.tr-ck { --dots: "Doto", ui-monospace, monospace; --scr: #131210; --scr-dim: rgba(255, 140, 90, .5); position: relative; z-index: 1; max-width: 580px; margin-top: 18px; animation: st-in .32s var(--enter); }
.tr-ck[hidden] { display: none; }
.tr-inst .mmx-top { margin-bottom: 12px; }
.tr-inst .mmx-id small { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-leds { display: flex; gap: 6px; margin-left: auto; }
.tr-leds i { width: 9px; height: 9px; border-radius: 50%; background: #9C958A; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.tr-leds i.on { background: #FF6A2B; box-shadow: 0 0 7px rgba(255, 90, 31, .8); }
.tr-leds i.ok { background: #3FB37A; box-shadow: 0 0 7px rgba(63, 179, 122, .8); }
.tr-leds i.miss { background: #D23F2A; box-shadow: 0 0 7px rgba(210, 63, 42, .7); }
.tr-inst .mmx-lamp { margin-left: 4px; }
.tr-screen { min-height: 92px; padding: 14px 16px 15px; display: flex; align-items: center; }
.tr-q { position: relative; z-index: 1; margin: 0; font: 500 16px/1.5 var(--sans); color: #EFE9DE; text-wrap: pretty; }
.tr-q code { font: 13.5px/1.4 var(--mono); padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: #FFD3BF; }
.tr-q strong { color: #fff; }
.tr-big { display: block; font: 800 34px/1 var(--dots); letter-spacing: .04em; color: #FF5A1F; text-shadow: 0 0 8px rgba(255, 90, 31, .5); }
.tr-inst.ended .tr-screen { min-height: 72px; justify-content: center; }
.tr-keys { display: grid; gap: 8px; margin-top: 12px; }
.tr-keys:empty { display: none; }
.tr-key { justify-content: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 11px 14px 12px; text-align: left; font: 500 15px/1.4 var(--sans); white-space: normal; }
.tr-key .tr-opt { min-width: 0; }
.tr-key code { font: 13px/1.4 var(--mono); }
.tr-letter { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px/1 var(--sans); box-shadow: inset 0 0 0 1.5px rgba(29, 28, 26, .22); }
.tr-keys.locked .tr-key { cursor: default; }
.mmx-key.tr-key.is-right { color: #1C7A4E; }
.tr-key.is-right .tr-letter { background: #23885A; color: #fff; box-shadow: none; }
.mmx-key.tr-key.is-wrong { color: #B8341F; }
.tr-key.is-wrong .tr-letter { background: #D23F2A; color: #fff; box-shadow: none; }
.tr-key.is-dim { opacity: .5; }
[data-theme="dark"] .mmx-key.tr-key.is-right { color: #6FD9A3; }
[data-theme="dark"] .mmx-key.tr-key.is-wrong { color: #FF8E7E; }
[data-theme="dark"] .tr-letter { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.tr-say { min-height: 1.5em; margin: 12px 2px 0; font-size: 15px; line-height: 1.5; color: #2A2723; }
.tr-say b { font-weight: 700; }
[data-theme="dark"] .tr-say { color: #EDE8DF; }
.tr-fill { display: block; height: 2px; margin: 8px 2px 0; border-radius: 2px; background: rgba(42, 39, 35, .12); overflow: hidden; }
.tr-fill i { display: block; width: 0; height: 100%; background: #2A2723; }
.tr-fill.go i { animation: tr-fill var(--ms, 1.5s) linear forwards; }
[data-theme="dark"] .tr-fill { background: rgba(255, 255, 255, .1); }
[data-theme="dark"] .tr-fill i { background: #EDE8DF; }
@keyframes tr-fill { to { width: 100%; } }
.tr-inst.ended .tr-say, .tr-inst.ended .tr-fill { display: none; }
.tr-out { padding: 0 16px; }
.tr-out:empty { display: none; }
.tr-slip .sl-part { margin: 6px 0 4px; }
.tr-slip .sl-now { margin: 0; }
.tr-after { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px -16px 0; }
.tr-after .mmx-key { min-height: 48px; padding: 6px 16px; font-size: 14.5px; text-decoration: none; }
.tr-after .mmx-key.dark { flex: 1 1 200px; }

/* ---------- Glossary ---------- */
.gl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 4px; }
.gl-find {
  flex: 1 1 320px; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--rule-2); background: var(--card); cursor: text;
  transition: border-color .16s var(--ease);
}
.gl-find:focus-within { border-color: var(--ink-3); }
.gl-find svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.gl-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 16px var(--sans); outline: none; }
.gl-find input::placeholder { color: var(--ink-3); }
.gl-find input::-webkit-search-cancel-button { cursor: pointer; }
.gl-pills button { min-height: 42px; }
.gl-page.is-filtering .gl-pills { opacity: .6; }

.gl-sheet { min-width: 0; padding: 4px 40px 40px; }
.gl-page > * { min-width: 0; }
.gl-sub[hidden], .gl-results[hidden] { display: none; }
.gl-subh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gl-az {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--rule);
}
.gl-az::-webkit-scrollbar { display: none; }
.gl-az a, .gl-az span { flex: 1 0 34px; height: 40px; display: grid; place-items: center; border-radius: 10px; font: 500 14.5px/1 var(--sans); }
.gl-az a { color: var(--ink); transition: background-color .16s var(--ease); }
.gl-az a:hover { background: var(--card-2); }
.gl-az span { color: var(--ink-3); opacity: .45; }
.gl-letter { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 20px; padding: 26px 0 10px; scroll-margin-top: 62px; }
.gl-letter + .gl-letter { border-top: 1px solid var(--rule); }
.gl-L { position: sticky; top: 72px; align-self: start; margin: 4px 0 0; font: 380 46px/1 var(--serif); font-variation-settings: "opsz" 144; color: var(--ink-3); }
.gl-e { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 6px 28px; padding: 16px 0; scroll-margin-top: 80px; transition: background-color .4s var(--ease); }
.gl-list > .gl-e + .gl-e, .gl-results > .gl-e + .gl-e { border-top: 1px solid var(--rule); }
.gl-t { margin: 0; font: 600 17px/1.4 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.gl-in { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.gl-s + .gl-s { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule-2); }
.gl-d { margin: 0; max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.gl-d strong { font-weight: 600; }
.gl-d code { font: 13.5px/1.4 var(--mono); background: var(--card-2); border: 1px solid var(--rule); padding: 1px 5px; border-radius: 5px; }
.gl-src { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; min-height: 36px; margin-top: 4px; font-size: 14px; color: var(--ink-2); transition: color .16s var(--ease); }
.gl-src span { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.gl-src small { font-size: 13.5px; color: var(--ink-3); }
.gl-src:hover span { text-decoration-color: var(--ink-3); }
.gl-lock { font-weight: 400; }
.st-member .gl-lock { display: none; }
.gl-e.is-lit { margin: 0 -16px; padding: 16px; border-radius: 12px; background: rgba(255, 90, 31, .07); }
.gl-results { padding-top: 12px; }
.gl-none { margin: 0; padding: 32px 0 12px; font-size: 15.5px; color: var(--ink-2); }
.gl-none .st-link { padding: 0; border: 0; border-bottom: 1px solid var(--rule-2); background: none; cursor: pointer; font: inherit; color: var(--ink); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .tr-cards { grid-template-columns: 1fr; }
  .tr-page { gap: 36px; max-width: 720px; }
  .tr-band { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  .tr-mback { margin-left: max(-4px, calc((100% - 720px) / 2 - 4px)); }
  .tr-page { padding-top: 10px; }
}
@media (max-width: 700px) {
  .gl-sheet { padding: 0 18px 24px; }
  .gl-az { margin: 0 -18px; padding: 6px 10px; }
  .gl-az a, .gl-az span { flex: 0 0 40px; height: 44px; }
  .gl-letter { grid-template-columns: minmax(0, 1fr); padding-top: 22px; scroll-margin-top: 58px; }
  .gl-L { position: static; font-size: 34px; margin-bottom: 4px; }
  .gl-e { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; scroll-margin-top: 70px; }
  .gl-e.is-lit { margin: 0 -10px; padding: 14px 10px; }
  .gl-pills { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .gl-find { flex-basis: 100%; max-width: none; }
}
@media (max-width: 620px) {
  .tr-head { padding-top: 4px; }
  .tr-head .st-h1 { font-size: 44px; }
  .tr-head .st-lede { font-size: 16px; }
  .tr-card { padding: 22px 18px 18px; }
  .tr-card-t { font-size: 32px; }
  .tr-card-who { font-size: 15px; }
  .tr-chain { --f: 40px; margin: 22px -8px 20px; }
  .tr-cs { gap: 8px; }
  .tr-cs-n { font-size: 11px; letter-spacing: -.01em; }
  /* phones: a long route wraps into rows of four; the line can't follow a wrap, so it goes */
  .tr-chain.is-long { --f: 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; margin-left: -8px; margin-right: -8px; }
  .tr-chain.is-long .tr-chain-line { display: none; }
  .tr-stamp { width: 18px; height: 18px; top: -6px; right: -9px; }
  .tr-stamp::after { width: 6.5px; height: 3.5px; }
  .tr-page { --col: 68px; --cw: 58px; }
  .tr-side .st-h1 { font-size: 46px; }
  .tr-side .st-lede { font-size: 16px; }
  .tr-stop { gap: 0 16px; padding-bottom: 44px; }
  .tr-cover .tr-stamp { width: 20px; height: 20px; }
  .tr-t { font-size: 28px; }
  .tr-why { font-size: 15px; }
  .tr-acts .st-btn { flex: 1 1 auto; }
  /* the check takes the full width under the folder column */
  .tr-ck { margin-left: calc(-1 * (var(--col) + 16px)); }
  .tr-inst { padding: 12px 12px 14px; }
  .tr-inst .mmx-grill { display: none; }
  .tr-q { font-size: 15.5px; }
  .tr-key { font-size: 14.5px; }
  .tr-out { padding: 0 10px; }
  .tr-after { margin: 14px -10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-ck { animation: none; }
  .tr-bar i { transition: none; }
}


/* ---------------------------------------------------------------- tracks home v5: a panel per track, a shelf of folders */
.tr-home5 .tr-panels { display: grid; gap: 26px; }
.tr-panel { padding: 40px 44px 0; border-radius: 28px; overflow: hidden; }
/* The home hides the shelf (2026-11-05), so the panel needs its own bottom edge. */
.tr-home .tr-panel { padding-bottom: 40px; }
.tr-panel-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: stretch; }
.tr-panel-t { margin: 0; font: 380 clamp(40px, 4.6vw, 60px)/1.02 var(--serif); letter-spacing: -.025em; } .tr-panel-t i { font-style: italic; } .tr-panel-t a { color: inherit; }
.tr-panel-who { margin: 12px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.tr-home5 .tr-prog { margin-top: 26px; } .tr-home5 .tr-prog .tr-bar { flex: 0 0 220px; }
.tr-panel-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
.tr-go { height: 56px; padding: 0 28px; border-radius: 14px; font-size: 16px; }
.tr-panel-next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 26px; padding: 22px 26px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); color: inherit; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tr-panel-next:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--rule), var(--lift-2); }
.tr-panel-cover { display: block; height: 170px; } .tr-panel-cover .st-folder { height: 100%; transform: rotate(-3deg); filter: drop-shadow(0 14px 18px rgba(29, 28, 26, .18)); }
.tr-panel-next:hover .st-folder-face { transform: perspective(800px) rotateY(-6deg); }
.tr-panel-nt { display: grid; gap: 4px; min-width: 0; }
.tr-panel-nt .tr-next-k { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tr-panel-nt .tr-next-t { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; padding: 0; }
.tr-panel-nt .tr-next-s { font-size: 14px; color: var(--ink-2); }
/* The shelf: every stop's folder, standing in order on a drawn plank. */
.tr-shelf { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(96px, 1fr)); align-items: end; gap: 10px; margin: 40px -44px 0; padding: 26px 44px 0; overflow-x: auto; scrollbar-width: none; }
.tr-shelf::-webkit-scrollbar { display: none; }
.tr-shelf::after { content: ""; grid-column: 1 / -1; grid-row: 2; height: 22px; margin: 0 -44px; border-top: 2px solid var(--ink); background: linear-gradient(color-mix(in srgb, var(--bg) 82%, var(--ink) 10%), var(--bg) 70%); }
.tr-home5 .tr-cs { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 12px; color: inherit; text-decoration: none; }
.tr-home5 .tr-cs-f { position: relative; display: block; height: 128px; transition: transform .35s cubic-bezier(.2, .8, .2, 1.1); }
.tr-home5 .tr-cs-f .st-folder { height: 100%; }
.tr-home5 .tr-cs:hover .tr-cs-f { transform: translateY(-8px); }
.tr-home5 .tr-cs.is-here .tr-cs-f { transform: translateY(-18px) rotate(-3deg); filter: drop-shadow(0 14px 14px rgba(29, 28, 26, .2)); }
.tr-home5 .tr-cs-n { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.tr-home5 .tr-cs.is-here .tr-cs-n { color: var(--ink); font-weight: 500; }
.tr-home5 .tr-tick { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: none; }
.tr-home5 .tr-tick::after { content: ""; position: absolute; left: 7px; top: 6px; width: 7px; height: 4px; border: 2px solid var(--card); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.tr-home5 .tr-cs.is-done .tr-tick, .tr-home5 .tr-cs.is-known .tr-tick { display: block; }
.tr-home5 .tr-cs:not(.is-done):not(.is-known):not(.is-here) .tr-cs-f { filter: saturate(.8); }
.tr-home5 .tr-cs .tr-stamp { display: none; }
.tr-home5 .tr-cs.is-here .tr-stamp { display: block; }
.tr-home5 .tr-cs.is-final .tr-cs-f { display: grid; place-items: end center; }
@media (max-width: 860px) {
  .tr-panel { padding: 26px 20px 0; border-radius: 24px; }
  .tr-home .tr-panel { padding-bottom: 26px; }
  .tr-panel-top { grid-template-columns: 1fr; gap: 22px; }
  .tr-panel-next { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px; } .tr-panel-cover { height: 110px; }
  .tr-panel-nt .tr-next-t { font-size: 21px; }
  .tr-shelf { grid-template-columns: repeat(var(--n), 104px); margin: 26px -20px 0; padding: 22px 20px 0; scroll-snap-type: x mandatory; }
  .tr-home5 .tr-cs { scroll-snap-align: start; } .tr-home5 .tr-cs-f { height: 104px; }
  .tr-shelf::after { margin: 0 -20px; }
  .tr-go { width: 100%; }
}
.tr-go { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .tr-home5 .tr-prog .tr-bar { flex: 1 1 auto; } .tr-home5 .tr-prog .tr-words { white-space: nowrap; } }
/* Phones: no sideways swiping. The whole route shows at once, three folders to a row. */
@media (max-width: 860px) {
  .tr-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px 8px; margin: 22px 0 0 !important; padding: 18px 0 24px !important; overflow: visible; scroll-snap-type: none; }
  .tr-shelf::after { display: none; }
  .tr-home5 .tr-cs { grid-row: auto; padding-bottom: 0; } .tr-home5 .tr-cs-f { height: 92px; }
  .tr-home5 .tr-cs-n { font-size: 12.5px; white-space: normal; text-align: center; line-height: 1.25; }
  .tr-home5 .tr-cs.is-here .tr-cs-f { transform: translateY(-8px) rotate(-3deg); }
}


/* ---------------------------------------------------------------- v3 (2026-11-03): FIG. 1 and the parts list */
.tr-page.tr-v3 { max-width: 1120px; gap: 24px; }
.tr-fig { margin: 0; padding: 18px; border-radius: 24px; background: var(--card); overflow-x: auto; }
.tr-fig .fig { display: block; width: 100%; min-width: 760px; height: auto; }
.fig-housing { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fig-plate { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.fig-plate-t, .fig-zone-t { font: 600 12px var(--mono); letter-spacing: .12em; fill: var(--ink); }
.fig-zone-t { fill: var(--ink-3); }
.fig-wire { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .35; }
.fig-cable { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 6; opacity: .3; }
.fig-wire.is-on, .fig-cable.is-on { stroke-dasharray: none; opacity: .75; }
.fig-plug { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; opacity: .5; }
.fig-pt { cursor: pointer; }
.fig-pt .fig-art { transition: opacity .3s var(--ease), filter .3s var(--ease); }
.fig-pt.is-new .fig-art { opacity: .28; filter: grayscale(1); }
.fig-pt.is-progress .fig-art { opacity: .7; }
.fig-pt:hover .fig-art { opacity: 1; filter: none; }
.fig-n { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.fig-nt { font: 600 11px var(--mono); fill: var(--ink); }
.fig-l { font: 600 10.5px var(--mono); letter-spacing: .1em; fill: var(--ink-2); }
.fig-pt.is-new .fig-n { stroke-opacity: .35; } .fig-pt.is-new .fig-nt, .fig-pt.is-new .fig-l { fill: var(--ink-3); }
.fig-pt.is-done .fig-n { fill: var(--ink); } .fig-pt.is-done .fig-nt { fill: var(--card); }
.fig-pt.is-done .fig-art [fill="#FF5A1F"] { fill: var(--ink); }
.fig-pt .fig-art .pulse { animation: none; }
.fig-pt.is-here .fig-art .pulse { animation: fig-pulse 1.8s ease-in-out infinite; }
.fig-pt.is-here .fig-n { fill: var(--orange); stroke: var(--orange); } .fig-pt.is-here .fig-nt { fill: #fff; }
.fig-here { display: none; } .fig-pt.is-here .fig-here { display: inline; }
.fig-here path { fill: var(--orange); } .fig-here text { font: 700 10px var(--mono); letter-spacing: .14em; fill: var(--orange); }
@keyframes fig-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fig-pt.is-here .fig-art .pulse { animation: none; } }
.fig-tb-box { fill: none; stroke: var(--ink); stroke-width: 1.2; } .fig-tb-rule { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.fig-tb-k { font: 600 10px var(--mono); letter-spacing: .12em; fill: var(--ink-3); }
.fig-tb-v { font: 400 22px var(--serif); fill: var(--ink); }
.fig-tb-s { font-size: 12px; fill: var(--ink-3); }
.fig-tb-bar { fill: var(--rule); } .fig-tb-fill { fill: var(--ink); transition: width .6s var(--ease); }
/* The parts list: the route, without its folders and wires. */
.tr-parts { padding: 30px 36px 18px; border-radius: 24px; }
.tr-parts-h { margin: 0; font: 380 34px/1.1 var(--serif); letter-spacing: -.01em; } .tr-parts-h i { font-style: italic; }
.tr-parts-sub { margin: 8px 0 14px; color: var(--ink-2); }
.tr-v3 .tr-route { counter-reset: part; padding: 0; }
.tr-v3 .tr-stop { counter-increment: part; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; padding: 18px 0; border-top: 1px solid var(--rule); }
.tr-v3 .tr-stop:last-child { padding-bottom: 12px; }
.tr-v3 .tr-cover, .tr-v3 .tr-wire { display: none; }
.tr-v3 .tr-num::before { content: counter(part, decimal-leading-zero); font: 600 12px var(--mono); color: var(--ink-3); }
.tr-v3 .tr-stop.is-here .tr-num::before { color: var(--orange); }
.tr-v3 .tr-num { padding-top: 6px; }
.tr-v3 .tr-info { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-areas: "t s" "w a" "c c"; gap: 2px 24px; padding-top: 0; }
.tr-v3 .tr-t { grid-area: t; margin: 0; font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; } .tr-v3 .tr-t i { font-style: normal; }
.tr-v3 .tr-why { grid-area: w; margin: 3px 0 0; font-size: 14.5px; }
.tr-v3 .tr-state { grid-area: s; justify-content: flex-end; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.tr-v3 .tr-state .tr-bar { display: block; }
.tr-v3 .tr-acts { grid-area: a; justify-content: flex-end; margin-top: 4px; }
.tr-v3 .tr-acts .st-btn { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink-3); font-size: 14px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.tr-v3 .tr-acts .st-btn:hover { color: var(--ink); }
.tr-v3 .tr-ck { grid-area: c; }
@media (max-width: 760px) {
  .tr-v3 .tr-info { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "w" "s" "a" "c"; }
  .tr-v3 .tr-state, .tr-v3 .tr-acts { justify-content: flex-start; }
  .tr-parts { padding: 24px 20px 12px; }
}

/* Track page on phones: the wide FIG. 1 would need sideways scrolling, so phones get the parts list with each part's
   folder beside it instead, status and Test out on one line. */
@media (max-width: 760px) {
  .tr-v3 .tr-fig { display: none; }
  .tr-v3 .tr-stop { grid-template-columns: 60px minmax(0, 1fr); gap: 0 16px; padding: 18px 0; }
  .tr-v3 .tr-num { display: none; }
  .tr-v3 .tr-cover { display: block; --cw: 60px; width: 60px; } .tr-v3 .tr-cover .st-folder { height: 76px; }
  .tr-v3 .tr-stop.is-new .tr-cover, .tr-v3 .tr-stop:not(.is-done):not(.is-here):not(.is-progress) .tr-cover { filter: saturate(.75); }
  .tr-v3 .tr-info { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "w w" "s a" "c c"; gap: 2px 16px; }
  .tr-v3 .tr-state { justify-content: flex-start; margin-top: 8px; } .tr-v3 .tr-acts { justify-content: flex-end; align-self: end; margin-top: 8px; }
}
/* Wide screens: the track page uses the room (user, 2026-11-03: "space at right side"). */
@media (min-width: 1500px) { .tr-page.tr-v3 { max-width: 1320px; } }
/* Dark mode: parts not started are drawn as faint chalk lines (the paper turns dark), not grey boxes. */
[data-theme="dark"] .fig-pt.is-new .fig-art { filter: grayscale(1) invert(.9); opacity: .5; }
[data-theme="dark"] .fig-pt.is-new:hover .fig-art, [data-theme="dark"] .fig-pt.is-new:focus-visible .fig-art { filter: none; opacity: 1; }


/* ---------------------------------------------------------------- track page v4 (2026-11-03): one view, card system
   Left (sticky on wide screens): the track, your progress, the module you're on as a big folder, Continue.
   Right: the route as tiles on a numbered line, in two stages. The tiles are the shared .st-tile on the module's tint. */
.tr-page.tr-v4 { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; max-width: 1320px; margin: 0 auto; padding-top: 8px; }
.tr-aside { position: sticky; top: 24px; align-self: start; }
.tr-aside .st-h1 { margin: 6px 0 0; font-size: clamp(44px, 4.4vw, 62px); line-height: 1; }
.tr-aside .st-lede { margin-top: 14px; font-size: 16.5px; }
.tr-aside .tr-prog { margin-top: 22px; } .tr-aside .tr-prog .tr-bar { flex: 1 1 auto; max-width: 180px; }
.tr-now { position: relative; display: block; margin-top: 26px; overflow: hidden; border-radius: 24px; background: var(--card); box-shadow: var(--lift-1), 0 0 0 1px var(--rule); }
.tr-now-art { position: relative; display: grid; place-items: center; height: 210px; background: var(--tint, var(--frame)); }
.tr-now-art .st-folder { height: 168px; width: auto; transform: rotate(-4deg); filter: drop-shadow(0 14px 16px rgba(60, 48, 30, .2)); transition: transform .35s var(--ease); }
.tr-now:hover .tr-now-art .st-folder { transform: rotate(-2deg) translateY(-4px); }
.tr-now-pin { position: absolute; right: 26px; top: 0; width: 16px; height: 40px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.tr-now.is-all .tr-now-pin { background: var(--green); }
.tr-now-body { display: grid; gap: 4px; padding: 20px 22px 22px; }
.tr-now .tr-next-k { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tr-now .tr-next-t { padding: 0; font: 400 24px/1.18 var(--serif); letter-spacing: -.015em; }
.tr-now .tr-next-s { font-size: 14px; color: var(--ink-2); }
.tr-now .tr-go { width: 100%; height: 52px; margin-top: 14px; border-radius: 14px; font-size: 15.5px; }
.tr-note { margin: 16px 4px 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* the route: a numbered line down the left, stage headings on it, tiles beside it */
.tr-v4 .tr-route { position: relative; padding: 0 0 0 64px; list-style: none; }
.tr-v4 .tr-route::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 60px; width: 2px; background: repeating-linear-gradient(var(--rule-2, var(--rule)) 0 4px, transparent 4px 10px); }
.tr-stage + .tr-stage { margin-top: 44px; }
.tr-stage-head { position: relative; padding: 14px 0 18px; }
.tr-stage-mark { position: absolute; left: -52px; top: 16px; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); box-shadow: 0 0 0 6px var(--frame); }
.tr-stage-h { margin: 0; font: 380 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.02em; }
.tr-stage-h i { font-style: italic; }
.tr-stage-sub { margin: 8px 0 0; font-size: 15.5px; color: var(--ink-2); }
.tr-stops { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tr-v4 .tr-stop { display: block; padding: 0; position: relative; }
.tr-node { position: absolute; left: -64px; top: 26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--frame); box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)), 0 0 0 6px var(--frame); }
.tr-node b { font: 600 12px var(--mono); color: var(--ink-3); }
.tr-v4 .is-progress .tr-node { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 6px var(--frame); } .tr-v4 .is-progress .tr-node b { color: var(--ink); }
.tr-v4 .is-done .tr-node, .tr-v4 .is-known .tr-node { background: var(--ink); box-shadow: 0 0 0 6px var(--frame); }
.tr-v4 .is-done .tr-node b, .tr-v4 .is-known .tr-node b { font-size: 0; }
.tr-v4 .is-done .tr-node b::after, .tr-v4 .is-known .tr-node b::after { content: ""; display: block; width: 12px; height: 7px; margin-top: -3px; border: 2.2px solid var(--card); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.tr-v4 .is-here .tr-node { background: var(--orange); box-shadow: 0 0 0 6px var(--frame), 0 0 0 7.5px rgba(255, 90, 31, .35); }
.tr-v4 .is-here .tr-node b { color: #fff; font-size: 12px; }
.tr-v4 .is-here .tr-node b::after { display: none; }

/* the tile */
.tr-v4 .tr-tile { gap: 26px; padding: 22px 24px 22px 22px; align-items: flex-start; }
.tr-v4 .tr-tile:hover { transform: translateY(-2px); }
.tr-v4 .tr-cover { position: relative; flex: none; width: 116px; }
.tr-v4 .tr-cover .st-folder { width: 100%; }
.tr-v4 .is-new:not(.is-here) .tr-cover .st-folder { filter: saturate(.75); }
.tr-v4 .tr-pin { display: none; position: absolute; z-index: 2; right: 16%; top: -6px; width: 13px; height: 30px; border-radius: 0; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.tr-v4 .is-here .tr-pin { display: block; }
.tr-v4 .is-here .tr-cover .st-folder { transform: translateY(-6px) rotate(-4deg); filter: drop-shadow(0 12px 14px rgba(60, 48, 30, .22)); }
.tr-v4 .is-here .tr-tile { box-shadow: 0 0 0 2px #1D1C1A, var(--lift-2); }
.tr-v4 .tr-tick { display: none; position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: #1D1C1A; }
.tr-v4 .tr-tick::after { content: ""; position: absolute; left: 8px; top: 7px; width: 9px; height: 5px; border: 2px solid #FCFBF8; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.tr-v4 .is-done .tr-tick, .tr-v4 .is-known .tr-tick { display: block; }
.tr-v4 .tr-info { flex: 1; min-width: 0; padding-top: 2px; }
.tr-v4 .tr-state { min-height: 20px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(29, 28, 26, .55); }
.tr-v4 .is-progress .tr-state { color: #B4380B; } .tr-v4 .is-done .tr-state, .tr-v4 .is-known .tr-state { color: #1D1C1A; }
.tr-v4 .tr-state .tr-bar { flex: 0 0 90px; background: rgba(255, 255, 255, .6); } .tr-v4 .tr-state .tr-bar i { background: #1D1C1A; }
.tr-v4 .tr-unmark { font-family: var(--sans); letter-spacing: 0; text-transform: none; color: rgba(29, 28, 26, .6); }
.tr-v4 .tr-t { margin: 6px 0 0; font: 380 clamp(26px, 2.3vw, 32px)/1.08 var(--serif); color: #1D1C1A; }
.tr-v4 .tr-t a { color: inherit; }
.tr-v4 .tr-why { margin-top: 8px; max-width: 60ch; font-size: 15px; color: rgba(29, 28, 26, .7); }
.tr-v4 .tr-acts { align-items: center; gap: 18px; margin-top: 16px; }
.tr-v4 .tr-stopgo { height: 42px; padding: 0 20px; border-radius: 12px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .1); color: #1D1C1A; font-size: 14.5px; }
.tr-v4 .tr-stopgo:hover { background: rgba(255, 255, 255, .9); }
.tr-v4 .tr-stopgo.dark { background: #1D1C1A; color: #FCFBF8; box-shadow: none; }
.tr-v4 .tr-skip { height: auto; padding: 4px 0; border: 0; background: none; box-shadow: none; cursor: pointer; color: rgba(29, 28, 26, .7); font: 500 14.5px var(--sans); text-decoration: underline; text-decoration-color: rgba(29, 28, 26, .25); text-underline-offset: 5px; }
.tr-v4 .tr-skip:hover { color: #1D1C1A; }
.tr-v4 .tr-skip[hidden] { display: none; }
.tr-v4 .tr-ck { max-width: none; }

/* one column under 1100px: the aside becomes the top of the page, its "up next" card side by side */
@media (max-width: 1100px) {
  .tr-page.tr-v4 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tr-aside { position: static; }
  .tr-now { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
  .tr-now-art { height: auto; min-height: 200px; }
}
@media (max-width: 640px) {
  .tr-now { grid-template-columns: minmax(0, 1fr); }
  .tr-now-art { min-height: 170px; } .tr-now-art .st-folder { height: 138px; }
  .tr-v4 .tr-route { padding-left: 40px; }
  .tr-v4 .tr-route::before { left: 13px; }
  .tr-node { left: -40px; top: 20px; width: 28px; height: 28px; } .tr-node b { font-size: 10px; }
  .tr-v4 .is-here .tr-node b { font-size: 10px; }
  .tr-stage-mark { left: -34px; width: 14px; height: 14px; border-radius: 4px; top: 20px; }
  .tr-v4 .tr-tile { gap: 16px; padding: 16px; }
  .tr-v4 .tr-cover { width: 70px; }
  .tr-v4 .tr-t { font-size: 23px; }
  .tr-v4 .tr-why { font-size: 14px; }
  .tr-v4 .tr-acts { gap: 14px; }
  .tr-v4 .tr-stopgo { height: 38px; padding: 0 16px; }
}
.tr-node { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent), 0 0 0 6px var(--frame); }
.tr-node { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent), 0 0 0 6px var(--frame); }
.tr-v4 .is-progress .tr-node { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 6px var(--frame); }
.tr-v4 .is-done .tr-node, .tr-v4 .is-known .tr-node { box-shadow: 0 0 0 6px var(--frame); }
.tr-v4 .is-here .tr-node { box-shadow: 0 0 0 6px var(--frame), 0 0 0 7.5px rgba(255, 90, 31, .35); }
.tr-side.tr-aside { padding: 0; }
.fig-l, .fig-here text { paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
/* Tracks home (2026-11-04): with eleven modules the shelf must fit without sideways scrolling. Each folder takes an
   equal share of the width and scales with it; names wrap under their folder. */
@media (min-width: 861px) {
  .tr-shelf { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .tr-home5 .tr-cs-f { height: auto; width: 100%; max-width: 112px; }
  .tr-home5 .tr-cs-f .st-folder { width: 100%; height: auto; }
  .tr-home5 .tr-cs-n { white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.25; }
}