/* Common demo site theme for Bootstrap 6 (alpha). Pure CSS on top of
   Bootstrap's design tokens. Dark by default; the ☾ / ☀ link in the nav
   switches to light (a remembered value, still no JS). The header puts the
   choice on <body data-theme>, and light-dark() does the rest. */

body[data-theme="dark"]  { color-scheme: dark; }
body[data-theme="light"] { color-scheme: light; }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root, :host {
  /* brand: indigo, with a cyan accent for the hero glow */
  --bs-primary-base:        light-dark(#4f46e5, #818cf8);
  --bs-primary-bg:          light-dark(#4f46e5, #6366f1);
  --bs-primary-fg:          light-dark(#4338ca, #a5b4fc);
  --bs-primary-fg-emphasis: light-dark(#312e81, #c7d2fe);
  --bs-primary-bg-subtle:   light-dark(#e0e7ff, #1e1b4b);
  --bs-primary-bg-muted:    light-dark(#c7d2fe, #312e81);
  --bs-primary-border:      light-dark(#a5b4fc, #4338ca);
  --bs-primary-contrast:    #ffffff;
  --bs-primary-focus-ring:  color-mix(in oklch, var(--bs-primary-base) 50%, var(--bs-bg-body));
  --accent:                 light-dark(#06b6d4, #22d3ee);

  /* surfaces and text */
  --bs-bg-body:  light-dark(#fafafa, #0b0f1a);
  --bs-bg-1:     light-dark(#f4f4f5, #121828);
  --bs-bg-2:     light-dark(#ececef, #1a2030);
  --bs-bg-3:     light-dark(#e4e4e7, #232a3d);
  --bs-fg-body:  light-dark(#18181b, #e4e4e7);
  --bs-fg-1:     light-dark(#27272a, #d4d4d8);
  --bs-fg-2:     light-dark(#52525b, #a1a1aa);
  --bs-fg-3:     light-dark(#71717a, #71717a);
  --bs-heading-color: light-dark(#111827, #f4f4f5);
  --bs-border-color:  light-dark(#e4e4e7, #262d40);
  --bs-code-color:    light-dark(#be185d, #f9a8d4);

  /* type */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-body-line-height: 1.6;

  /* ours */
  --card-shadow:       light-dark(0 1px 2px rgba(17,24,39,.04), 0 1px 2px rgba(0,0,0,.4)),
                       light-dark(0 8px 24px -12px rgba(17,24,39,.12), 0 8px 24px -12px rgba(0,0,0,.6));
  --card-shadow-hover: light-dark(0 1px 2px rgba(17,24,39,.06), 0 1px 2px rgba(0,0,0,.5)),
                       light-dark(0 16px 32px -12px rgba(17,24,39,.2), 0 16px 32px -12px rgba(0,0,0,.8));
  --code-bg:   light-dark(#0f172a, #060913);
  --code-fg:   #e2e8f0;
  --code-head: light-dark(#1e293b, #1c2436);
  --hero-glow: radial-gradient(60rem 30rem at 20% -10%, color-mix(in oklch, var(--bs-primary-base) light-dark(18%, 35%), transparent), transparent 60%),
               radial-gradient(40rem 24rem at 90% 10%, color-mix(in oklch, var(--accent) light-dark(16%, 22%), transparent), transparent 60%);
}

/* ---- type ---- */
h1, h2, h3, .fs-4xl, .fs-5xl, .fs-6xl { letter-spacing: -0.02em; font-weight: 700; }
.fs-5xl { font-weight: 800; }
code { font-size: .9em; }

/* ---- buttons ---- */
.btn { font-weight: 500; }

/* ---- navbar ---- */
.site-nav {
  background: color-mix(in oklch, var(--bs-bg-body) 80%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.site-nav .navbar-brand { font-weight: 800; letter-spacing: -0.02em; color: var(--bs-heading-color); }
.site-nav .navbar-brand::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .45em; border-radius: 50%; background: linear-gradient(135deg, var(--bs-primary-base), var(--accent)); vertical-align: 0.05em; }
.site-nav .nav-link { color: var(--bs-fg-2); font-weight: 500; padding: .35rem .7rem; border-radius: var(--bs-radius-pill); }
.site-nav .nav-link:hover { color: var(--bs-fg-body); background: var(--bs-bg-2); }
.site-nav .nav-link.active { color: var(--bs-primary-fg); background: color-mix(in oklch, var(--bs-primary-base) 12%, transparent); }

/* ---- hero ---- */
.hero { background: var(--hero-glow); border-bottom: 1px solid var(--bs-border-color-translucent); }
.hero .form-control-lg { border-radius: var(--bs-radius-pill); padding-inline: 1.25rem; }
.hero .btn-lg { border-radius: var(--bs-radius-pill); padding-inline: 1.5rem; }

/* ---- cards ---- */
/* v6 makes card-body and card-header flex columns; these pages were written for block flow */
.card-body, .card-header, .card-footer { display: block; }
.card { --bs-card-border-color: var(--bs-border-color-translucent); box-shadow: var(--card-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color-translucent); font-weight: 600; }
.card-footer { background: transparent; border-top: 1px solid var(--bs-border-color-translucent); }
a.card { transition: transform .15s ease, box-shadow .15s ease; color: inherit; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }

/* ---- code cards ---- */
.code-card { --bs-card-bg: var(--code-bg); --bs-card-color: var(--code-fg); background: var(--code-bg); color: var(--code-fg); border: 0; }
.code-card .card-header { background: var(--code-head); color: #cbd5e1; border: 0; font-weight: 500; }
.code-card .card-header code { color: #7dd3fc; }
.code-card pre, pre.code-card { background: var(--code-bg); color: var(--code-fg); font-family: var(--bs-font-mono); font-size: .875rem; line-height: 1.6; margin: 0; white-space: pre-wrap; }
pre.card-body { border-radius: 0 0 var(--bs-radius-7) var(--bs-radius-7); }
.card > pre.code-card:first-child { border-radius: var(--bs-radius-7) var(--bs-radius-7) 0 0; }

/* ---- bits ---- */
.badge { font-weight: 600; letter-spacing: .01em; }
.table > :not(caption) > * > * { padding: .9rem .75rem; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-fg-2); font-weight: 600; }
.list-group-item { background: transparent; }
.error-out { font-family: var(--bs-font-mono); font-size: .85rem; }
.site-footer { border-top: 1px solid var(--bs-border-color-translucent); color: var(--bs-fg-2); }
.stat { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--bs-primary-base), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avatar { background: linear-gradient(135deg, var(--bs-primary-base), var(--accent)); }

/* Common's own error messages, readable on both backgrounds */
.cl-error { color: light-dark(#c62828, #fca5a5) !important; }

/* ---- Common code samples (<cl-code> blocks, highlighted by the interpreter) ---- */
:root, :host { --electric: #2ea8ff; }
.cl-word { color: var(--electric); font-weight: 500; }
.cl-hole { color: #7dd3fc; }
.cl-text { color: #a7f3d0; }
.cl-note { color: #7c8aa5; font-style: italic; }
.cl-tag  { color: #94a3b8; }

/* ---- flash cards ---- */
.flash { cursor: pointer; }
.flash summary { padding: 1rem 1.25rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .75rem; }
.flash summary::before { content: "?"; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: color-mix(in oklch, var(--bs-primary-base) 14%, transparent); color: var(--bs-primary-fg); font-size: .8rem; flex-shrink: 0; }
.flash[open] summary::before { content: "✓"; background: var(--bs-primary-bg); color: var(--bs-primary-contrast); }
.flash summary::-webkit-details-marker { display: none; }
.flash pre, .flash cl-code { display: block; margin: 0; padding: 1rem 1.25rem; background: var(--code-bg); color: var(--code-fg); font-family: var(--bs-font-mono); font-size: .85rem; line-height: 1.6; white-space: pre-wrap; border-radius: 0 0 var(--bs-radius-7) var(--bs-radius-7); }

/* ---- brand ---- */
.site-nav .navbar-brand::before { content: none; }
.brand-mark { width: 1.75rem; height: 1.75rem; border-radius: .45rem; box-shadow: 0 2px 8px color-mix(in oklch, var(--bs-primary-base) 40%, transparent); }
.brand-name { font-weight: 800; letter-spacing: -0.02em; color: var(--bs-heading-color); }
.brand-tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .15rem .45rem; border-radius: var(--bs-radius-pill); background: color-mix(in oklch, var(--bs-primary-base) 14%, transparent); color: var(--bs-primary-fg); }

/* ---- wiki ---- */
.wiki-toc { position: sticky; top: 4.5rem; display: flex; flex-direction: column; gap: 1.25rem; padding-right: 1rem; }
.toc-group { display: flex; flex-direction: column; gap: .1rem; }
.toc-head { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-fg-3); padding: 0 .6rem .35rem; }
.wiki-toc a { display: flex; align-items: baseline; gap: .6rem; color: var(--bs-fg-2); text-decoration: none; padding: .35rem .6rem; border-radius: var(--bs-radius-5); font-size: .9rem; line-height: 1.3; border-left: 2px solid transparent; }
.wiki-toc a span { min-width: 1.4rem; font-size: .75rem; font-weight: 600; color: var(--bs-fg-3); font-variant-numeric: tabular-nums; }
.wiki-toc a:hover { color: var(--bs-fg-body); background: var(--bs-bg-2); border-left-color: var(--bs-primary-base); }
.wiki-toc a:hover span { color: var(--bs-primary-fg); }
@media (width < 1024px) {
  .wiki-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
  .toc-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem; }
  .toc-head { width: 100%; padding: 0 0 .25rem; }
  .wiki-toc a { border: 1px solid var(--bs-border-color-translucent); border-radius: var(--bs-radius-pill); padding: .25rem .7rem; font-size: .85rem; }
  .wiki-toc a:hover { border-left-color: var(--bs-border-color-translucent); }
}
.wiki h1 { margin-bottom: .5rem; }
.wiki h2 { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color-translucent); scroll-margin-top: 4.5rem; }
.wiki h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.wiki p, .wiki li { max-width: 46rem; }
.wiki pre { background: var(--code-bg); color: var(--code-fg); font-family: var(--bs-font-mono); font-size: .875rem; line-height: 1.6; padding: 1rem 1.25rem; border-radius: var(--bs-radius-7); margin: 1rem 0 1.5rem; white-space: pre-wrap; }
.wiki .table { margin: 1rem 0 1.5rem; }
.wiki .table td, .wiki .table th { padding: .55rem .6rem; vertical-align: top; }
.wiki .table code { white-space: nowrap; }

/* narrow screens: let the nav wrap instead of overflowing (v6 has no CSS-only collapse) */
@media (width < 1100px) {
  .site-nav .container { flex-wrap: wrap; row-gap: .25rem; }
  .site-nav .navbar-nav { flex-wrap: wrap; margin-left: 0 !important; width: 100%; }
}

/* ---- sign-in link ---- */
.site-nav .nav-admin { margin-left: .5rem; border: 1px solid var(--bs-border-color-translucent); }

/* ---- section sub-nav ---- */
.subnav { background: var(--bs-bg-1); border-bottom: 1px solid var(--bs-border-color-translucent); }
.subnav .navbar-nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; padding: .4rem 0; }
.subnav .nav-link { color: var(--bs-fg-2); font-size: .9rem; font-weight: 500; padding: .3rem .7rem; border-radius: var(--bs-radius-pill); }
.subnav .nav-link:hover { color: var(--bs-fg-body); background: var(--bs-bg-2); }
.subnav .nav-link.active { color: var(--bs-primary-fg); background: color-mix(in oklch, var(--bs-primary-base) 12%, transparent); }

/* ---- glossary ---- */
.jump { display: flex; flex-wrap: wrap; gap: .3rem; }
.jump a { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: var(--bs-radius-5); border: 1px solid var(--bs-border-color-translucent); color: var(--bs-fg-2); text-decoration: none; font-weight: 600; font-size: .85rem; }
.jump a:hover { color: var(--bs-primary-fg); border-color: var(--bs-primary-border); background: color-mix(in oklch, var(--bs-primary-base) 10%, transparent); }
.glossary h2, .entry + h2 { scroll-margin-top: 7rem; }
.entry { padding: 1.1rem 0; border-top: 1px solid var(--bs-border-color-translucent); display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1.5rem; align-items: start; }
.entry-head { grid-row: 1 / span 3; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.entry-word { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--electric); font-family: var(--bs-font-mono); }
.entry-form code { font-size: .95rem; color: var(--bs-fg-body); background: var(--bs-bg-2); padding: .2rem .5rem; border-radius: var(--bs-radius-4); }
.entry-meaning { margin: .35rem 0 .5rem; color: var(--bs-fg-2); max-width: 44rem; }
.entry-example { margin: 0; padding: .75rem 1rem; background: var(--code-bg); color: var(--code-fg); font-family: var(--bs-font-mono); font-size: .85rem; line-height: 1.6; border-radius: var(--bs-radius-5); white-space: pre-wrap; }
@media (width < 700px) { .entry { grid-template-columns: 1fr; } .entry-head { grid-row: auto; flex-direction: row; align-items: center; } }

/* ---- glossary: the two kinds of word ---- */
.kind-card { border-left: 4px solid var(--bs-primary-base); }
.kind-card.kind-value { border-left-color: var(--bs-fg-3); }
.rule { font-size: 1.1rem; padding: .9rem 1.2rem; border-radius: var(--bs-radius-7); background: color-mix(in oklch, var(--bs-primary-base) 10%, transparent); border: 1px solid var(--bs-primary-border); }

/* ---- practice ---- */
.task-list { display: flex; flex-direction: column; gap: .15rem; }
.task { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: var(--bs-radius-5); color: var(--bs-fg-2); text-decoration: none; font-size: .95rem; }
.task span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bs-bg-2); color: var(--bs-fg-3); font-size: .75rem; font-weight: 700; }
.task:hover { color: var(--bs-fg-body); background: var(--bs-bg-2); }
.task.active { color: var(--bs-primary-fg); background: color-mix(in oklch, var(--bs-primary-base) 12%, transparent); }
.task.active span { background: var(--bs-primary-bg); color: var(--bs-primary-contrast); }
.editor { font-family: var(--bs-font-mono); font-size: .9rem; line-height: 1.6; background: var(--code-bg); color: var(--code-fg); border-color: var(--bs-border-color-translucent); tab-size: 2; }
.editor:focus { background: var(--code-bg); color: var(--code-fg); }
.result { width: 100%; height: 19rem; border: 1px solid var(--bs-border-color-translucent); border-radius: var(--bs-radius-7); background: #fff; }
.result-empty { height: 19rem; display: grid; place-items: center; border: 1px dashed var(--bs-border-color); border-radius: var(--bs-radius-7); color: var(--bs-fg-3); }
@media (width < 1024px) { .task-list { flex-direction: row; flex-wrap: wrap; } }

/* ---- practice: the three rules ---- */
.rules { padding: .9rem 1.2rem; border-radius: var(--bs-radius-7); background: color-mix(in oklch, var(--bs-primary-base) 8%, transparent); border: 1px solid var(--bs-primary-border); }
.rules ol { padding-left: 1.25rem; display: grid; gap: .25rem; }
.rules code { color: var(--bs-fg-body); }

/* ---- learn ---- */
.ten { border-left: 4px solid var(--electric); }
.ten-words { display: flex; flex-wrap: wrap; gap: .4rem; }
.ten-words code { font-size: .95rem; padding: .3rem .6rem; border-radius: var(--bs-radius-5); background: var(--code-bg); color: var(--electric); }
.lesson-output { white-space: pre-wrap; }
.lesson-output table td { padding: .15rem .6rem; text-align: center; }
.lesson-output ol, .lesson-output p { white-space: normal; }

/* ---- practice tabs and compact rules ---- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.tab { padding: .55rem 1rem; color: var(--bs-fg-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--bs-fg-body); }
.tab.active { color: var(--bs-primary-fg); border-bottom-color: var(--bs-primary-base); }
.rules-compact { border: 1px solid var(--bs-border-color-translucent); border-radius: var(--bs-radius-7); padding: .6rem 1rem; }
.rules-compact summary { cursor: pointer; color: var(--bs-fg-2); font-weight: 500; font-size: .9rem; }
.rules-compact ol { padding-left: 1.25rem; display: grid; gap: .25rem; }

/* ---- practice: compact status lines and the hint box ---- */
.status { font-size: .9rem; padding: .45rem .8rem; border-radius: var(--bs-radius-5); border: 1px solid var(--bs-border-color-translucent); background: var(--bs-bg-1); color: var(--bs-fg-1); }
.status.ok { border-color: var(--bs-success-border); color: var(--bs-success-fg); }
.status.warn { border-color: var(--bs-warning-border); color: var(--bs-warning-fg-emphasis); }
.status.info { border-color: var(--bs-info-border); color: var(--bs-info-fg); }
.status a { color: inherit; font-weight: 600; }
.hint { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-radius-5); padding: .5rem .9rem; font-size: .9rem; color: var(--bs-fg-2); }
.hint summary { cursor: pointer; font-weight: 600; color: var(--bs-fg-1); }
.hint[open] summary { margin-bottom: .25rem; }

/* ---- practice: snippet chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip { font: inherit; font-size: .8rem; font-weight: 500; padding: .25rem .6rem; border-radius: var(--bs-radius-pill); border: 1px solid var(--bs-border-color); background: var(--bs-bg-1); color: var(--bs-fg-2); cursor: pointer; }
.chip:hover { color: var(--bs-primary-fg); border-color: var(--bs-primary-border); background: color-mix(in oklch, var(--bs-primary-base) 10%, transparent); }

/* the theme toggle in the nav */
.nav-theme { font-size: 1.1rem; line-height: 1; padding-top: .55rem; }

/* ---- quest: the learning game ---- */
.quest-hero { background: var(--hero-glow); border-bottom: 1px solid var(--bs-border-color-translucent); }
.quest-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.quest-title { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; background: linear-gradient(135deg, var(--bs-heading-color) 30%, var(--bs-primary-base), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quest-stats { display: flex; gap: .75rem; flex-wrap: wrap; }
.quest-rank { display: flex; flex-direction: column; min-width: 7.5rem; padding: .6rem 1rem; border-radius: var(--bs-radius-7); background: color-mix(in oklch, var(--bs-bg-body) 70%, transparent); border: 1px solid var(--bs-border-color-translucent); }
.quest-rank strong { font-size: 1.15rem; color: var(--bs-heading-color); }
.xp-bar { height: .6rem; border-radius: var(--bs-radius-pill); background: var(--bs-bg-3); overflow: hidden; }
.xp-bar > div { height: 100%; min-width: .6rem; border-radius: inherit; background: linear-gradient(90deg, var(--bs-primary-base), var(--accent)); box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 60%, transparent); transition: width .6s ease; }

.quest-map { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; counter-reset: none; }
.node a, .node.locked { display: flex; align-items: center; gap: .55rem; height: 100%; padding: .55rem .7rem; border-radius: var(--bs-radius-7); border: 1px solid var(--bs-border-color-translucent); background: color-mix(in oklch, var(--bs-bg-body) 75%, transparent); color: var(--bs-fg-2); text-decoration: none; font-size: .82rem; line-height: 1.25; transition: transform .15s ease, border-color .15s ease; }
.node a:hover { transform: translateY(-2px); border-color: var(--bs-primary-border); color: var(--bs-fg-body); }
.node-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.node.beaten a { border-color: var(--bs-success-border); }
.node.beaten .node-name::after { content: " ✓"; color: var(--bs-success-fg); font-weight: 700; }
.node.locked { opacity: .45; cursor: not-allowed; }
.node.here a { border-color: var(--bs-primary-base); color: var(--bs-heading-color); font-weight: 600; box-shadow: 0 0 0 3px color-mix(in oklch, var(--bs-primary-base) 25%, transparent), 0 0 24px -6px var(--accent); }
.node.open:not(.here) a { animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 50% { border-color: var(--bs-primary-border); } }

.level-card { border-top: 4px solid var(--bs-primary-base); }
.level-place { font-size: 3rem; line-height: 1; margin-bottom: .75rem; filter: drop-shadow(0 6px 14px color-mix(in oklch, var(--accent) 35%, transparent)); }
.lore { font-size: 1.05rem; color: var(--bs-fg-1); font-style: italic; }
.spell { padding: 1rem 1.1rem; border-radius: var(--bs-radius-7); background: color-mix(in oklch, var(--bs-primary-base) 8%, transparent); border: 1px solid var(--bs-primary-border); }
.spell-head { font-weight: 700; margin-bottom: .4rem; color: var(--bs-heading-color); }
.spell code { color: var(--electric); }
.goal-box { padding: .75rem 1rem; border-radius: var(--bs-radius-7); background: var(--bs-bg-1); border: 1px solid var(--bs-border-color-translucent); font-weight: 500; }

.editor-shell { border-radius: var(--bs-radius-7); overflow: visible; background: var(--code-bg); box-shadow: var(--card-shadow-hover); }
.editor-bar { display: flex; align-items: center; gap: .35rem; padding: .5rem .8rem; background: var(--code-head); color: #94a3b8; font-family: var(--bs-font-mono); font-size: .78rem; border-radius: var(--bs-radius-7) var(--bs-radius-7) 0 0; }
.editor-bar .dot { width: .65rem; height: .65rem; border-radius: 50%; background: #475569; }
.editor-bar .dot:nth-child(1) { background: #f87171; } .editor-bar .dot:nth-child(2) { background: #fbbf24; } .editor-bar .dot:nth-child(3) { background: #34d399; }
.editor-bar .keys { color: #64748b; }
@media (width < 700px) { .editor-bar .keys { display: none; } }
.editor-wrap { position: relative; display: flex; }
.gutter { flex-shrink: 0; width: 2.6rem; padding: .375rem .5rem .375rem 0; text-align: right; font-family: var(--bs-font-mono); font-size: .9rem; line-height: 1.6; color: #475569; white-space: pre; overflow: hidden; user-select: none; border-right: 1px solid #1e293b; }
.quest-editor { flex: 1; border: 0; border-radius: 0; resize: vertical; min-height: 18rem; box-shadow: none !important; white-space: pre-wrap; }
.quest-editor:focus { outline: none; }
.ac { position: absolute; z-index: 20; width: min(30rem, 92%); max-height: 18rem; overflow-y: auto; margin: 0; padding: .3rem; list-style: none; background: #111827; border: 1px solid #334155; border-radius: var(--bs-radius-5); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); font-size: .82rem; }
.ac li { display: grid; grid-template-columns: auto 1fr; gap: 0 .75rem; padding: .35rem .55rem; border-radius: var(--bs-radius-4); cursor: pointer; color: #cbd5e1; }
.ac li.on { background: color-mix(in oklch, var(--bs-primary-base) 35%, #111827); }
.ac-word { font-family: var(--bs-font-mono); font-weight: 600; color: var(--electric); }
.ac li.mine .ac-word { color: #a7f3d0; }
.ac-form { font-family: var(--bs-font-mono); color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-meaning { grid-column: 1 / -1; color: #64748b; font-size: .76rem; display: none; }
.ac li.on .ac-meaning { display: block; color: #a5b4fc; }
.sig { padding: .5rem .85rem; border-top: 1px solid #1e293b; font-size: .82rem; color: #cbd5e1; border-radius: 0 0 var(--bs-radius-7) var(--bs-radius-7); min-height: 2.3rem; }
.sig code { color: var(--electric); background: none; font-size: .85rem; }
.lint { display: grid; gap: .3rem; }
.lint-note { font-size: .85rem; padding: .35rem .7rem; border-radius: var(--bs-radius-5); background: color-mix(in oklch, var(--bs-warning-base, #f59e0b) 10%, transparent); border: 1px solid var(--bs-warning-border, #f59e0b55); color: var(--bs-fg-1); }
.win { font-size: 1rem; animation: glow 1.2s ease-out 1; }
@keyframes glow { from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); transform: scale(.98); } to { box-shadow: 0 0 0 14px transparent; transform: none; } }
.victory { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: var(--bs-radius-7); background: linear-gradient(135deg, color-mix(in oklch, var(--bs-primary-base) 18%, transparent), color-mix(in oklch, var(--accent) 14%, transparent)); border: 1px solid var(--bs-primary-border); }
.victory-crown { font-size: 3.5rem; line-height: 1; }

.spellbook { display: flex; flex-wrap: wrap; gap: .5rem; }
.spell-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: var(--bs-radius-pill); border: 1px dashed var(--bs-border-color); color: var(--bs-fg-3); text-decoration: none; font-size: .85rem; }
.spell-chip code { color: inherit; }
.spell-chip.learned { border-style: solid; border-color: var(--bs-primary-border); background: color-mix(in oklch, var(--bs-primary-base) 10%, transparent); color: var(--bs-fg-body); }
.spell-chip.learned code { color: var(--electric); }
@media (prefers-reduced-motion: reduce) { .node.open:not(.here) a, .win, .xp-bar > div { animation: none; transition: none; } }
.quest-callout { border-left: 4px solid var(--accent); text-decoration: none; }

/* ---- structure: the include chain and the folder ---- */
.chain { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: 1.6rem; max-width: 46rem; }
.chain li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; padding: .75rem 1rem; border-radius: var(--bs-radius-7); border: 1px solid var(--bs-border-color-translucent); background: var(--bs-bg-1); }
.chain li:not(:last-child)::after { content: "↓ include"; position: absolute; left: 1.1rem; bottom: -1.45rem; font-size: .72rem; font-family: var(--bs-font-mono); color: var(--accent); }
.chain li:nth-child(2) { margin-left: 1.5rem; } .chain li:nth-child(3) { margin-left: 3rem; } .chain li:nth-child(4) { margin-left: 4.5rem; }
.chain-file { font-family: var(--bs-font-mono); font-weight: 600; color: var(--electric); }
.chain-note { color: var(--bs-fg-2); font-size: .9rem; }
@media (width < 600px) { .chain li:nth-child(n) { margin-left: 0; } }
.tree { display: grid; gap: .5rem; margin: 1rem 0 1.5rem; }
.tree-group { padding: .65rem 1rem; border-left: 3px solid var(--bs-primary-border); background: var(--bs-bg-1); border-radius: 0 var(--bs-radius-5) var(--bs-radius-5) 0; color: var(--bs-fg-2); }
.tree-group.private { border-left-color: var(--bs-danger-border, #f87171); }
.tree-head { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-fg-1); margin-bottom: .2rem; }

/* ---- result bars (poll, rsvp) ---- */
.poll-bar { height: .75rem; border-radius: 999px; background: var(--bs-bg-2); overflow: hidden; }
.poll-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bs-primary-base), var(--accent)); }

/* ---- the cleaning quote: radio buttons drawn as cards ---- */
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice label { display: block; height: 100%; padding: .8rem 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-5, .5rem); cursor: pointer; }
.choice label small { display: block; color: var(--bs-fg-2); font-size: .8rem; }
.choice input:checked + label { border-color: var(--bs-primary-base); background: var(--bs-primary-bg-subtle); }
.choice input:focus-visible + label { outline: 2px solid var(--bs-primary-base); outline-offset: 2px; }
.quote-total { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bs-primary-base); line-height: 1.1; }