/* Layout: one column on phones with a thumb bar at the bottom; on wide screens the bar sits under the header
   and the word card stands beside its tree. Paper, bark and leaf colours from the doodler's palette. */
:root {
  --paper: #f6f0e2; --card: #fffaf0; --ink: #23180f; --soft: #5e4a38; --line: #e2d4b8;
  --red: #9a2a1f; --gold: #d99a22; --green: #2f7a46; --indigo: #24507a; --plum: #7a3a6e; --rose: #b04870;
  --bark: #6b4426; --leaf: #4f9a4a; --chip: #f2e6cc; --chip-ink: #3a2a18; --on-red: #fff8ec; --scrim: rgba(35,24,15,.45);
  --shadow: 0 2px 0 rgba(60,40,20,.12), 0 6px 18px rgba(60,40,20,.1);
  --th: "Mitr", "Sarabun", system-ui, sans-serif; --body: "Sarabun", "Noto Sans", system-ui, sans-serif;
  --navh: 64px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #1a1612; --card: #26201a; --ink: #f4ead6; --soft: #c9b79a; --line: #3d3328; --chip: #3a3026; --chip-ink: #f4ead6;
  --red: #e8735f; --gold: #f0b84a; --green: #6cc283; --indigo: #7fb0e0; --plum: #d08ac4; --rose: #e888aa; --bark: #c08a5a; --leaf: #7cc06a;
  --on-red: #1a1612; --scrim: rgba(0,0,0,.6); --shadow: 0 2px 0 rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35); color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #1a1612; --card: #26201a; --ink: #f4ead6; --soft: #c9b79a; --line: #3d3328; --chip: #3a3026; --chip-ink: #f4ead6;
  --red: #e8735f; --gold: #f0b84a; --green: #6cc283; --indigo: #7fb0e0; --plum: #d08ac4; --rose: #e888aa; --bark: #c08a5a; --leaf: #7cc06a;
  --on-red: #1a1612; --scrim: rgba(0,0,0,.6); --shadow: 0 2px 0 rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35); color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.55 var(--body); overflow-x: hidden; padding-bottom: calc(var(--navh) + env(safe-area-inset-bottom, 0px)); }
body.has-sheet, body.has-guide { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
canvas { display: block; }
small { font-size: .72em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--th); font-weight: 500; line-height: 1.2; margin: 0; text-wrap: balance; }
h3 { font-size: 18px; color: var(--soft); margin: 14px 0 8px; }
.muted { color: var(--soft); }
.lede { font-size: 19px; max-width: 62ch; }

/* ---------------------------------------------------------------- top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; gap: 8px; align-items: center; padding: 8px 16px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.brand b { font: 600 24px/1 var(--th); color: var(--red); display: block; }
.brand small { display: block; color: var(--soft); font-size: 12px; letter-spacing: .04em; }
.brand-pic { width: 44px; height: 44px; }
.iconbtn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); font: 600 22px/1 var(--th); cursor: pointer; display: grid; place-items: center; padding: 0; }
.iconbtn.back { font-size: 32px; padding-bottom: 4px; }
.find { position: relative; flex: 1; min-width: 0; }
.find input, .bigfind input { width: 100%; font: 18px var(--body); padding: 10px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); }
.find input:focus, .bigfind input:focus { outline: none; border-color: var(--gold); }
.hits { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); max-height: 65vh; overflow: auto; padding: 6px; min-width: min(420px, calc(100vw - 32px)); }
.hits a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "t r k" "t e e"; gap: 0 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.hits a:hover, .hits a.on { background: var(--chip); }
.hits .t { grid-area: t; font: 500 24px var(--th); align-self: center; }
.hits .r { grid-area: r; color: var(--soft); font-size: 15px; }
.hits .e { grid-area: e; font-size: 15px; }
.hits .kind { grid-area: k; font-size: 12px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.hits .kind.tree { background: var(--green); color: var(--on-red); }
.hits .kind.leaf { background: var(--chip); border: 1px solid var(--line); }
.hits-head { font-size: 13px; color: var(--soft); padding: 4px 10px; }
.hits-none { padding: 12px; font-size: 16px; }
.wander { display: flex; align-items: center; gap: 4px; border: 0; background: var(--gold); color: #2a1a08; border-radius: 999px; padding: 2px 14px 2px 4px; cursor: pointer; flex: none; box-shadow: var(--shadow); font-family: var(--th); line-height: 1.05; min-height: 44px; }
.wander canvas { width: 40px; height: 40px; }
.wander small { display: block; font-size: 11px; }

/* ---------------------------------------------------------------- the five places */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding: 4px 4px env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 16px rgba(40,25,10,.08); }
.nav a { display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 2px 0 4px; border-radius: 12px; line-height: 1.1; min-height: 56px; color: var(--soft); }
.nav a canvas { width: 30px; height: 30px; }
.nav a b { font: 500 15px var(--th); color: var(--ink); }
.nav a small { font-size: 11px; }
.nav a.on { background: var(--chip); }
.nav a.on b { color: var(--red); }

main { max-width: 1100px; margin: 0 auto; padding: 10px 16px 32px; outline: none; }
.loading { text-align: center; padding: 48px 0; color: var(--soft); font: 500 28px var(--th); }
.loading canvas { margin: 0 auto; width: 120px; height: 120px; }

/* ---------------------------------------------------------------- shared pieces */
h2 { font-size: 26px; margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; }
h2 small { color: var(--soft); font: 16px var(--body); }
h2 canvas { width: 44px; height: 44px; flex: none; }
.card { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; flex-direction: column; text-decoration: none; background: var(--chip); color: var(--chip-ink); border-radius: 14px; padding: 7px 12px; line-height: 1.2; cursor: pointer; border: 2px solid transparent; text-align: left; min-height: 44px; justify-content: center; }
.chip b { font: 500 22px var(--th); }
.chip i { font-style: normal; font-size: 13px; opacity: .8; }
.chip span { font-size: 14px; }
.chip:hover { border-color: var(--gold); }
.chip.on { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--chip)); }
.chip.sm b { font-size: 19px; }
.pill { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: var(--chip); color: var(--chip-ink); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 15px; min-height: 38px; }
.pill canvas { width: 30px; height: 30px; }
.btn { white-space: normal; max-width: 100%; text-align: center; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--red); color: var(--on-red); border-radius: 999px; padding: 10px 18px; font: 500 17px var(--th); text-decoration: none; cursor: pointer; min-height: 44px; }
.btn.ghost { background: var(--chip); color: var(--chip-ink); }
.lnk { border: 0; background: none; padding: 0; color: var(--red); text-decoration: underline; cursor: pointer; font: inherit; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tile { text-decoration: none; display: block; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.tile canvas { width: 100%; height: 150px; }
.tile .cap { padding: 8px 14px 12px; }
.tile .cap b { font: 500 26px var(--th); display: block; }
.tile .cap span { color: var(--soft); font-size: 15px; display: block; }
.tile .cap small { color: var(--soft); font-size: 13px; }
.tile .sub { font-size: 14px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; margin: 0 0 4px; }
.crumbs.top { margin-top: 4px; }
.crumbs a { text-decoration: none; background: var(--chip); border-radius: 999px; padding: 4px 12px; font-family: var(--th); display: inline-flex; align-items: center; gap: 6px; }
.crumbs a i { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--bark)); display: inline-block; }
.crumbs small { color: var(--soft); font-family: var(--body); }
.thai-link { color: var(--red); text-decoration: none; border-bottom: 1px dotted var(--red); font-family: var(--th); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--soft); margin: 8px 2px 0; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; }
.empty { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.empty canvas { width: 90px; height: 90px; flex: none; }

/* folded sections: the heading says what is inside */
.fold { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); margin: 12px 0; overflow: hidden; }
.fold summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; min-height: 56px; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary canvas { width: 38px; height: 38px; flex: none; }
.fold summary span { flex: 1; min-width: 0; }
.fold summary b { font: 500 21px var(--th); }
.fold summary small { color: var(--soft); font-size: 15px; }
.fold summary em { font-style: normal; font: 600 17px var(--th); background: var(--chip); border-radius: 999px; padding: 2px 10px; }
.fold summary::after { content: "›"; font: 600 26px var(--th); color: var(--soft); transition: transform .2s; }
.fold[open] summary::after { transform: rotate(90deg); }
.fold-in { padding: 0 16px 16px; min-width: 0; }
.fold-in > .card { box-shadow: none; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- home */
.home-hero { display: grid; gap: 18px; grid-template-columns: 1.15fr 1fr; align-items: stretch; margin-top: 8px; }
.hh-text h1 { font-size: 46px; color: var(--red); }
.hh-text h1 small { font: 600 22px var(--body); color: var(--ink); }
.bigfind { position: relative; margin: 14px 0 8px; }
.bigfind input { font-size: 21px; padding: 14px 18px; border-width: 3px; }
.starter-h { font-size: 14px; color: var(--soft); margin: 12px 0 6px; }
.starters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.starter { text-decoration: none; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 6px 4px 8px; text-align: center; line-height: 1.15; }
.starter canvas { width: 100%; height: 64px; }
.starter b { font: 500 24px var(--th); display: block; color: var(--red); }
.starter span { font-size: 13px; color: var(--soft); }
.today { position: relative; display: block; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); min-height: 360px; text-decoration: none; }
.today canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.today .tag { position: absolute; left: 12px; top: 12px; background: rgba(255,250,240,.94); color: #23180f; border-radius: 14px; padding: 6px 14px 8px; line-height: 1.2; }
.today .tag small { display: block; color: #5e4a38; font-size: 13px; }
.today .tag b { font: 600 34px var(--th); color: #9a2a1f; display: block; }
.today .tag span { font-size: 15px; }
.invite { display: flex; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; border: 2px solid var(--gold); }
.invite canvas { width: 64px; height: 64px; flex: none; }
.invite div { flex: 1; min-width: 200px; }
.invite p { margin: 2px 0 0; }
.invite b { font: 500 21px var(--th); }
.continue { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; text-decoration: none; }
.continue small { color: var(--soft); width: 100%; font-size: 14px; }
.continue b { font: 500 30px var(--th); color: var(--red); }
.continue em { margin-left: auto; font: 600 28px var(--th); font-style: normal; color: var(--soft); }
.topics { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.topic { position: relative; text-decoration: none; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 8px 12px 12px; line-height: 1.2; }
.topic canvas { width: 100%; height: 84px; }
.topic b { font: 500 20px var(--th); display: block; }
.topic span { font-size: 14px; color: var(--soft); }
.topic em { position: absolute; top: 8px; right: 10px; font: 600 15px var(--th); font-style: normal; background: var(--chip); border-radius: 999px; padding: 0 9px; }
.ways { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.way { display: flex; gap: 12px; align-items: center; text-decoration: none; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 16px; }
.way canvas { width: 64px; height: 64px; flex: none; }
.way b { font: 500 21px var(--th); }
.way b small { font: 15px var(--body); color: var(--soft); }
.way p { margin: 2px 0 0; font-size: 15px; color: var(--soft); }

/* ---------------------------------------------------------------- a head word */
.word-head { display: flex; gap: 16px; align-items: center; margin-top: 6px; }
.wh-pic { flex: none; width: 110px; height: 110px; border-radius: 50%; background: var(--chip); overflow: hidden; }
.wh-pic canvas { width: 110px; height: 110px; }
.wh-id { min-width: 0; flex: 1; }
.wh-id .th { font: 500 64px/1.05 var(--th); color: var(--red); margin: 0; word-break: break-word; }
.say { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; margin: 4px 0; }
.say .rtgs { font: 600 24px var(--body); }
.say .pb, .say .ipa { color: var(--soft); font-size: 16px; }
.wh-id .en { font-size: 22px; margin: 4px 0 8px; }
.wh-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.speak { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--chip); color: var(--chip-ink); border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; font-size: 15px; min-height: 40px; }
.speak canvas { width: 32px; height: 32px; }
.speak.sm { padding: 2px; min-height: 36px; }
.stage-wrap { margin-top: 14px; scroll-margin-top: 70px; }
.seg { display: inline-flex; background: var(--chip); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 8px 16px; font: 500 16px var(--th); cursor: pointer; color: var(--chip-ink); min-height: 40px; }
.seg button[aria-selected="true"] { background: var(--card); box-shadow: var(--shadow); color: var(--red); }
.tree-stage { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); height: min(72vh, 640px); min-height: 360px; touch-action: manipulation; }
.tree-stage canvas.tree { width: 100%; height: 100%; cursor: pointer; }
.tree-stage .hint { position: absolute; left: 12px; top: 12px; background: rgba(255,250,240,.92); color: #4a3a28; border-radius: 999px; padding: 4px 12px; font-size: 14px; pointer-events: none; }
.senses { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sense-row { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 14px; cursor: pointer; border-left: 8px solid var(--c, var(--bark)); min-height: 60px; }
.sense-row .n, .sh-top .n { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--c, var(--bark)); color: #fffaf0; display: grid; place-items: center; font: 600 19px var(--th); }
.sense-row .sx { flex: 1; min-width: 0; line-height: 1.25; }
.sense-row .sx b { font-size: 19px; display: block; }
.sense-row .sx small { color: var(--soft); font-size: 14px; }
.sense-row .cnt { font: 600 18px var(--th); color: var(--green); white-space: nowrap; }
.sense-row .cnt small { font: 13px var(--body); color: var(--soft); }
.sense-row .go { font: 600 26px var(--th); color: var(--soft); }
.rule { font-size: 18px; margin: 0; }
.weed { text-decoration: none; box-shadow: none; border: 1px solid var(--line); }
.weed b { font: 500 24px var(--th); }
.notes .note { border-left: 4px solid var(--line); padding: 4px 0 4px 14px; margin: 10px 0; font-size: 17px; }
.notes .note .d { font-size: 13px; color: var(--soft); }
.notes pre { white-space: pre-wrap; font: 15px/1.45 ui-monospace, Menlo, monospace; background: var(--chip); padding: 8px; border-radius: 8px; overflow-x: auto; }
.roots-list { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.roots-list h3 { margin-top: 0; }
.cog { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 16px; }
.cog .f { font: 600 21px "Sarabun", "Noto Sans", "Noto Sans Lao", "Noto Sans Tai Tham", "Noto Sans Tai Viet", "Noto Sans New Tai Lue", "Noto Sans Myanmar", "Noto Sans Tai Le", "Noto Sans Ahom", "Noto Sans Devanagari", "Noto Sans Khmer", sans-serif; }
.tr-knot { border-left: 6px solid var(--gold); }
.tr-root { font: 600 30px var(--th); color: var(--red); }

/* ---------------------------------------------------------------- the branch panel */
.sheet { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: 0; width: min(640px, 100%); max-height: 78vh; overflow: auto; background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(30,20,10,.3); padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; animation: rise .2s ease-out; }
@keyframes rise { from { transform: translate(-50%, 30px); opacity: .4; } to { transform: translate(-50%, 0); opacity: 1; } }
.sh-grab { width: 48px; height: 5px; border-radius: 3px; background: var(--line); margin: 2px auto 8px; }
.sh-close { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--chip); font: 600 26px/1 var(--th); cursor: pointer; }
.sh-top { display: flex; gap: 12px; align-items: center; padding: 4px 64px 8px 18px; }
.sh-top b { font: 600 24px var(--body); display: block; line-height: 1.2; }
.sh-top small { color: var(--soft); font-size: 14px; }
.sh-body { padding: 0 18px; }
.sh-body .gth { color: var(--soft); font-size: 17px; margin: 4px 0 8px; }
.grew { font-size: 16px; background: var(--chip); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.grew i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.picked { border: 2px solid var(--red); border-radius: 16px; padding: 10px 14px; margin: 12px 0; }
.pk-word { display: flex; align-items: center; gap: 10px; }
.pk-word b { font: 500 40px/1.1 var(--th); color: var(--red); }
.pk-en { font-size: 20px; margin: 2px 0; }
.picked .btn { margin-top: 10px; }
.say-big { font-size: 20px; }
.sh-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px 0; position: sticky; bottom: 0; background: var(--card); }

/* ---------------------------------------------------------------- a compound */
.build .equation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.equation .op { color: var(--soft); font: 600 28px var(--th); }
.chip.whole { background: color-mix(in srgb, var(--red) 14%, var(--chip)); }
.build, .where { margin-top: 12px; }
.build h3, .where h3 { margin-top: 0; }
.k-pic { display: block; position: relative; border-radius: 18px; overflow: hidden; margin: 10px 0; text-decoration: none; }
.k-pic canvas { width: 100%; height: min(70vh, 480px); }
.k-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(255,250,240,.94); color: #23180f; border-radius: 12px; padding: 6px 12px; font-size: 15px; }
.where .gth { color: var(--soft); }
.verdict { margin-top: 12px; }
.verdict b { font: 500 21px var(--th); }

/* ---------------------------------------------------------------- browsing */
.via-card { text-decoration: none; border-left: 6px solid var(--c); }
.via-card .vt { font: 500 28px var(--th); color: var(--red); }
.vflow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 17px; margin: 6px 0; }
.vflow span { background: var(--chip); border-radius: 10px; padding: 2px 8px; }
.vflow em { font-style: normal; color: var(--c); font-weight: 700; }
.shape { text-decoration: none; }
.shape b { font: 500 21px var(--th); color: var(--red); }
.shape .ex { font: 500 18px var(--th); margin-top: 4px; }

/* ---------------------------------------------------------------- net */
.net-stage { position: relative; height: 66vh; min-height: 380px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); touch-action: none; }
.net-stage canvas { width: 100%; height: 100%; }
.net-tools { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.net-tools button { flex: none; border: 0; background: var(--chip); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 15px; min-height: 40px; }
.net-tools button.on { background: var(--red); color: var(--on-red); }
.net-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.net-zoom button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--chip); font: 600 22px var(--th); cursor: pointer; box-shadow: var(--shadow); }
.net-card { position: absolute; left: 10px; right: 64px; bottom: 10px; background: color-mix(in srgb, var(--card) 96%, transparent); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 14px; font-size: 15px; max-height: 45%; overflow: auto; }
.nc-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 6px; }
.nc-top b { font: 500 28px var(--th); color: var(--red); }
.nc-top .btn { margin-left: auto; }

/* ---------------------------------------------------------------- trail */
.trail { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 12px; }
.trail a { text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 82px; min-height: 64px; padding: 6px 12px; border-radius: 50% 46% 52% 48% / 55% 50% 50% 45%; background: #c9b896; color: #23180f; line-height: 1.15; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.trail a:nth-child(odd) { transform: rotate(-3deg); }
.trail a b { font: 500 21px var(--th); }
.trail a span { font-size: 12px; }
.trail a:first-child { background: var(--gold); }
.foot { max-width: 1100px; margin: 0 auto; padding: 10px 16px 24px; color: var(--soft); font-size: 14px; }

/* ---------------------------------------------------------------- play */
.game { margin-top: 6px; }
.q-head { font-size: 17px; }
.q { font: 500 60px/1.15 var(--th); color: var(--red); margin-top: 6px; word-break: break-word; }
.answers { display: grid; gap: 10px; margin-top: 14px; }
.answers.two { grid-template-columns: 1fr 1fr; }
.answers button { text-align: left; border: 2px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 14px; cursor: pointer; font-size: 18px; display: flex; gap: 12px; align-items: center; min-height: 60px; }
.answers button b { display: block; }
.answers button small { color: var(--soft); font-size: 14px; display: block; }
.answers button .n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 17px var(--th); }
.answers button.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--card)); }
.answers button.wrong { opacity: .55; }
.verdict.ok { border-left: 6px solid var(--green); padding-left: 12px; margin-top: 14px; }
.verdict.no { border-left: 6px solid var(--red); padding-left: 12px; margin-top: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.score { font: 500 18px var(--th); color: var(--soft); }

/* ---------------------------------------------------------------- the guide */
.guide { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: grid; place-items: center; padding: 16px; }
.g-box { width: min(520px, 100%); max-height: 100%; background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; }
.g-box canvas { width: 100%; height: min(52vh, 420px); flex: none; }
.g-text { padding: 14px 18px 4px; min-height: 150px; }
.g-text b { font: 500 26px var(--th); color: var(--red); }
.g-text p { margin: 4px 0 0; font-size: 18px; }
.g-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px 16px; }
#gdots { display: flex; gap: 6px; }
.g-nav .btn, .sh-nav .btn, .row .btn { white-space: nowrap; }
#gdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
#gdots i.on { background: var(--red); }

/* ---------------------------------------------------------------- wide screens */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .nav { position: sticky; top: calc(61px + env(safe-area-inset-top, 0px)); bottom: auto; display: flex; justify-content: center; gap: 6px; box-shadow: none; border-top: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); padding: 4px 16px; }
  .nav a { flex-direction: row; gap: 6px; padding: 4px 14px; min-height: 44px; }
  .nav a canvas { width: 26px; height: 26px; }
  .nav a small { font-size: 13px; }
  .stage-wrap { display: block; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .home-hero { grid-template-columns: 1fr; }
  .today { min-height: 300px; }
  .hh-text h1 { font-size: 38px; }
  .starters { grid-template-columns: repeat(5, 1fr); }
  .starter canvas { height: 52px; }
  .starter b { font-size: 21px; }
  .brand small, .wander span { display: none; }
  .brand b { font-size: 21px; }
  .wander { padding: 2px; }
  .word-head { flex-direction: row; align-items: flex-start; }
  .wh-pic, .wh-pic canvas { width: 76px; height: 76px; }
  .wh-id .th { font-size: 52px; }
  .tree-stage { height: min(64vh, 112vw); min-height: 340px; }
  .wh-row .pill { font-size: 13px; padding: 2px 10px 2px 2px; min-height: 32px; }
  .wh-row .pill canvas { width: 24px; height: 24px; }
  .wh-row .pill + .pill + .pill { display: none; }
  .word-head { padding: 12px; gap: 10px; }
  .sheet { max-height: 54vh; }
  .roots-list { grid-template-columns: 1fr; }
  .answers.two { grid-template-columns: 1fr; }
  .q { font-size: 48px; }
  .net-stage { height: 62vh; }
  .net-card { right: 10px; bottom: 10px; }
  .net-zoom { top: 10px; }
}
@media (max-width: 420px) {
  .brand span { display: none; }
  .starters { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .starter span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; } }

/* ---------------------------------------------------------------- built words: whole word · parts · literal · meaning */
.summary { font-size: 19px; margin: 12px 2px 0; max-width: 62ch; }
.crows { display: grid; gap: 6px; }
.crow { display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "b w s" "b w e"; gap: 0 14px; align-items: center; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; min-height: 56px; }
.crow:hover { border-color: var(--gold); }
.crow .nb { grid-area: b; }
.crow .cw { grid-area: w; line-height: 1.15; min-width: 0; }
.crow .cw b { font: 500 23px var(--th); display: block; word-break: break-word; }
.crow .cw small { color: var(--soft); font-size: 13px; }
.crow .cs { grid-area: s; min-width: 0; line-height: 1.25; }
.crow .cs small { display: block; color: var(--soft); font-size: 13px; }
.crow .ce { grid-area: e; font-size: 16px; min-width: 0; }
.split { font: 500 18px var(--th); }
.split i { font-style: normal; color: var(--soft); margin: 0 5px; font-family: var(--body); }
.split .hp { color: var(--soft); }
.split .xp { color: var(--red); }
.split.big { font-size: 24px; margin: 4px 0; }
.nb { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--bark)); color: #fffaf0; display: grid; place-items: center; font: 600 14px var(--th); }
.wgroup { margin: 0 0 12px; }
.mgroup { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 8px 10px 10px; margin: 0 0 12px; border-left: 8px solid var(--c, var(--line)); }
.mhead { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: none; padding: 6px 4px 10px; cursor: pointer; }
.mhead.plain { cursor: default; }
.mhead .n { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--c, var(--bark)); color: #fffaf0; display: grid; place-items: center; font: 600 19px var(--th); }
.mhead .sx { flex: 1; min-width: 0; line-height: 1.25; }
.mhead .sx b { font-size: 20px; display: block; }
.mhead .sx small { color: var(--soft); font-size: 14px; }
.mhead .cnt { font: 600 17px var(--th); background: var(--chip); border-radius: 999px; padding: 2px 10px; }
.mgroup .none { margin: 0 4px 4px; font-size: 15px; }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; margin: 10px 2px 0; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key .kn { width: 22px; height: 22px; border-radius: 50%; background: var(--bark); color: #fffaf0; font: 600 12px var(--th); font-style: normal; display: grid; place-items: center; }
.key .kl { width: 20px; height: 11px; border-radius: 0 100% 0 100%; background: var(--leaf); display: inline-block; }
.key .kw { width: 14px; height: 16px; background: linear-gradient(transparent 30%, #4a6a2a 30%); clip-path: polygon(0 100%, 20% 20%, 40% 100%, 60% 0, 80% 100%, 100% 30%, 100% 100%); display: inline-block; }

/* sorting */
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.sortbar span { font-size: 14px; color: var(--soft); margin-right: 2px; }
.sortbar button { border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 15px; cursor: pointer; min-height: 40px; }
.sortbar button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--on-red); }
.tablewrap { overflow-x: auto; border-radius: 16px; box-shadow: var(--shadow); }
.wtable { width: 100%; border-collapse: collapse; background: var(--card); font-size: 16px; }
.wtable th { text-align: left; font: 500 15px var(--th); padding: 10px 12px; border-bottom: 2px solid var(--line); position: sticky; top: 0; background: var(--card); white-space: nowrap; }
.wtable th small { display: block; font: 12px var(--body); color: var(--soft); }
.wtable th.sortable { cursor: pointer; }
.wtable th.on { color: var(--red); }
.wtable td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wtable td a { text-decoration: none; display: block; line-height: 1.15; }
.wtable td a b { font: 500 24px var(--th); color: var(--red); display: block; }
.wtable td a small { color: var(--soft); font-size: 13px; }
.wtable .num2 { font: 600 18px var(--th); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wtable .bar { display: inline-block; width: 60px; height: 8px; background: var(--chip); border-radius: 4px; margin-right: 8px; vertical-align: middle; position: relative; overflow: hidden; }
.wtable .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--green); }
@media (max-width: 760px) {
  .crow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "b w" "b s" "b e"; gap: 2px 10px; }
  .crow .cw b { font-size: 22px; display: inline; margin-right: 8px; }
  .crow { padding: 6px 10px; }
  .wtable td:nth-child(5), .wtable th:nth-child(5) { display: none; }
  .wtable td, .wtable th { padding: 8px; }
  .summary { font-size: 17px; }
  .wtable td:nth-child(6), .wtable th:nth-child(6) { display: none; }
  .wtable .bar { display: none; }
}

/* ---------------------------------------------------------------- path bar, hints, jump buttons */
.crumbbar { max-width: 1100px; margin: 0 auto; padding: 10px 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.backto { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: var(--red); color: var(--on-red); border-radius: 999px; padding: 8px 16px 8px 12px; font: 500 16px var(--th); min-height: 44px; max-width: 100%; }
.backto span { font-size: 26px; line-height: 1; }
.backto b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.crumb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.crumbbar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; min-width: 0; }
.crumbbar li { display: inline-flex; align-items: center; }
.crumbbar li + li::before { content: "›"; color: var(--soft); margin: 0 6px; font-weight: 700; }
.crumbbar li a { text-decoration: none; background: var(--chip); color: var(--chip-ink); border-radius: 999px; padding: 4px 10px; font-family: var(--th); }
.crumbbar li b { font: 600 15px var(--th); color: var(--red); }
.crumbbar li.gap { color: var(--soft); }
.hintbar { max-width: 1100px; margin: 8px auto 0; padding: 0 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--soft); }
.hintbar .i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); color: var(--on-red); display: grid; place-items: center; font: italic 700 14px Georgia, serif; margin-top: 1px; }
.hintbar b { color: var(--ink); }
.jump { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 8px 16px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); align-items: center; }
.jump::-webkit-scrollbar { display: none; }
.jump span { flex: none; font-size: 13px; color: var(--soft); }
.jump button { flex: none; border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font: 500 15px var(--th); cursor: pointer; min-height: 40px; }
.jump button em { font-style: normal; background: var(--chip); border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 13px; }
.jump button:hover { border-color: var(--gold); }
#sec-pic, #sec-origin, #sec-words, #sec-look, #sec-rule, #sec-notes { scroll-margin-top: 130px; }
.origin .lede { margin-top: 0; }
.ety { margin-top: 10px; font-size: 15px; }
.ety summary { cursor: pointer; color: var(--soft); min-height: 40px; display: flex; align-items: center; }
@media (min-width: 900px) {
  .jump { top: calc(115px + env(safe-area-inset-top, 0px)); }
  #sec-pic, #sec-origin, #sec-words, #sec-look, #sec-rule, #sec-notes { scroll-margin-top: 180px; }
}

/* ---------------------------------------------------------------- the map */
.mapfab { position: fixed; z-index: 35; right: 14px; bottom: calc(var(--navh) + 14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--indigo); color: var(--on-red); padding: 6px 16px 6px 6px; box-shadow: 0 6px 20px rgba(20,30,60,.35); cursor: pointer; font-family: var(--th); line-height: 1.05; min-height: 52px; }
.mapfab canvas { width: 40px; height: 40px; background: var(--card); border-radius: 50%; }
.mapfab span { font-size: 17px; font-weight: 500; text-align: left; }
.mapfab small { display: block; font-size: 11px; opacity: .85; }
body.has-sheet .mapfab, body.has-guide .mapfab { display: none; }
.mapto { border: 2px solid var(--indigo); background: var(--card); color: var(--indigo); border-radius: 999px; padding: 6px 14px; font: 500 15px var(--th); min-height: 44px; cursor: pointer; }
.mapov { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: grid; place-items: center; padding: 10px; }
.map-box { width: min(920px, 100%); height: min(100%, 94vh); background: var(--card); border-radius: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; }
.map-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 16px 6px; position: relative; }
.map-top small { display: block; color: var(--soft); font-size: 13px; }
.map-top b { font: 500 24px var(--th); }
.map-top b span { color: var(--red); }
.map-top .sh-close { position: static; flex: none; }
.map-kinds, .map-sort { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 16px 8px; flex: none; align-items: center; }
.map-kinds::-webkit-scrollbar, .map-sort::-webkit-scrollbar { display: none; }
.map-kinds button, .map-sort button { flex: none; border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 14px; cursor: pointer; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.map-kinds button i, .map-list i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.map-kinds button em { font-style: normal; background: var(--chip); border-radius: 999px; padding: 0 6px; font-size: 12px; }
.map-kinds button[aria-pressed="true"], .map-sort button[aria-pressed="true"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--card)); }
.map-sort span { flex: none; font-size: 13px; color: var(--soft); }
.map-stage { flex: none; height: 42vh; min-height: 260px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.map-stage canvas { width: 100%; height: 100%; cursor: pointer; }
.map-list { overflow: auto; padding: 4px 16px 16px; flex: 1; min-height: 0; overscroll-behavior: contain; }
.map-list h3 { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.map-list h3 small { background: var(--chip); border-radius: 999px; padding: 0 8px; font-size: 13px; }
.mrow { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; text-decoration: none; padding: 8px 10px; border-radius: 12px; min-height: 48px; }
.mrow:hover { background: var(--chip); }
.mrow b { font: 500 21px var(--th); }
.mrow span { font-size: 15px; min-width: 0; }
.mrow small { color: var(--soft); }
.mrow em { font-style: normal; font: 600 14px var(--th); background: var(--chip); border-radius: 999px; padding: 0 8px; }
.map-list .more { margin: 6px 0; }
@media (min-width: 900px) { .mapfab { bottom: 24px; right: 24px; } .map-stage { height: 46vh; } }
@media (max-width: 760px) { .mapfab span small { display: none; } .mapov { padding: 0; } .map-box { height: 100%; border-radius: 0; } .map-stage { height: 38vh; } }