/* LLD Forge — X.com visual world.
   Layout: 3 columns like X — left rail (275 / 88), 600px timeline, 350px sidebar; the workbench takes the
   timeline+sidebar width. Tokens measured from x.com/home: #000 ground, #E7E9EA text, #71767B secondary,
   #2F3336 hairlines, 15/20 body, 40px avatars, 16px gutters, 53px tabs with a 4px #1D9BF0 indicator. */
:root {
  --bg: #000000; --surface: #16181c; --surface-2: #202327; --line: #2f3336;
  --fg: #e7e9ea; --muted: #71767b; --faint: #536471;
  --accent: #1d9bf0; --accent-hover: #1a8cd8; --accent-soft: rgba(29,155,240,.12);
  --primary-bg: #eff3f4; --primary-fg: #0f1419; --primary-hover: #d7dbdc;
  --hover: rgba(231,233,234,.1); --row-hover: rgba(255,255,255,.03);
  --easy: #00ba7c; --medium: #ffd400; --hard: #f4212e;
  --ok: #00ba7c; --bad: #f4212e; --warn: #ffad1f;
  --code-bg: #0b0c0e; --overlay: rgba(0,0,0,.65);
  --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --rail: 275px; --col: 600px; --side: 350px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --surface: #f7f9f9; --surface-2: #eff3f4; --line: #eff3f4;
  --fg: #0f1419; --muted: #536471; --faint: #8b98a5;
  --accent: #1d9bf0; --accent-hover: #1a8cd8; --accent-soft: rgba(29,155,240,.1);
  --primary-bg: #0f1419; --primary-fg: #ffffff; --primary-hover: #272c30;
  --hover: rgba(15,20,25,.1); --row-hover: rgba(0,0,0,.03);
  --easy: #00a06a; --medium: #a68a00; --hard: #e0245e;
  --ok: #00a06a; --bad: #e0245e; --warn: #c77700;
  --code-bg: #f7f9f9; --overlay: rgba(255,255,255,.85);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/20px var(--f-ui); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
code, pre, .mono { font-family: var(--f-mono); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.ic { display: inline-flex; width: 26px; height: 26px; flex: none; }
.ic svg { width: 100%; height: 100%; }

/* ---------------- shell ---------------- */
.shell { display: flex; justify-content: center; min-height: 100%; padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right)); }
.rail { width: var(--rail); flex: none; display: flex; justify-content: flex-end; }
.rail-inner { position: sticky; top: 0; height: 100vh; height: 100dvh; width: var(--rail); padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.rail-logo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 9999px; color: var(--fg); margin: 2px 0; transition: background .2s; }
.rail-logo:hover { background: var(--hover); text-decoration: none; }
.rail-logo svg { width: 30px; height: 30px; }
.rail-nav { display: flex; flex-direction: column; gap: 4px; }
.rail-nav a, .rail-nav button { display: inline-flex; align-items: center; gap: 20px; padding: 12px; border-radius: 9999px; color: var(--fg); font-size: 20px; line-height: 24px; width: max-content; max-width: 100%; transition: background .2s; text-align: left; }
.rail-nav a:hover, .rail-nav button:hover { background: var(--hover); text-decoration: none; }
.rail-nav a.active { font-weight: 700; }
.rail-nav a.active .ic svg [data-fill] { fill: currentColor; }
.rail-cta { margin: 16px 0 0; width: 90%; height: 52px; font-size: 17px; }
.rail-cta .ic-only { display: none; }
.rail-account { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 9999px; }
.acct-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font: 700 14px/1 var(--f-ui); flex: none; }
.acct-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.acct-meta b { font-weight: 700; }
.acct-sub { display: flex; align-items: center; gap: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xp-bar { width: 64px; height: 4px; border-radius: 9999px; background: var(--surface-2); overflow: hidden; }
.xp-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s cubic-bezier(.16,1,.3,1); }
main#app { flex: 0 1 calc(var(--col) + var(--side) + 32px); min-width: 0; display: flex; }
.tabbar { display: none; }

/* buttons (X pill buttons) */
.xbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 9999px; font-weight: 700; font-size: 15px; white-space: nowrap; border: 1px solid transparent; transition: background .2s, border-color .2s, opacity .2s; }
.xbtn-primary { background: var(--primary-bg); color: var(--primary-fg); }
.xbtn-primary:hover { background: var(--primary-hover); }
.xbtn-outline { color: var(--fg); border-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.xbtn-outline:hover { background: var(--hover); }
.xbtn-sm { height: 32px; padding: 0 14px; font-size: 14px; }
.xbtn:disabled { opacity: .5; cursor: progress; }

/* ---------------- timeline column ---------------- */
.col-main { width: var(--col); max-width: 100%; flex: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; }
.col-side { width: var(--side); flex: none; margin-left: 32px; }
.side-inner { position: sticky; top: 0; padding: 0 0 64px; display: flex; flex-direction: column; gap: 16px; }
.sticky-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.head-title { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 53px; }
.head-title h1 { font-size: 20px; line-height: 24px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.head-title .sub { color: var(--muted); font-size: 13px; line-height: 16px; display: block; font-weight: 400; }
.xtabs { display: flex; }
.xtab { flex: 1; height: 53px; display: flex; justify-content: center; color: var(--muted); font-weight: 500; transition: background .2s; }
.xtab:hover { background: var(--hover); }
.xtab span { display: inline-flex; align-items: center; height: 100%; position: relative; }
.xtab[aria-selected="true"] { color: var(--fg); font-weight: 700; }
.xtab[aria-selected="true"] span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 9999px; background: var(--accent); }
.xtab .count { color: var(--muted); font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* composer row */
.composer { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.composer .avatar { margin-top: 4px; }
.composer-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.composer-input { width: 100%; background: none; border: 0; color: var(--fg); font: 20px/28px var(--f-ui); padding: 8px 0; outline: none; }
.composer-input::placeholder { color: var(--muted); }
.composer-tools { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; flex-wrap: wrap; }
.chip { height: 32px; padding: 0 12px; border-radius: 9999px; color: var(--accent); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: background .2s; }
.chip:hover { background: var(--accent-soft); }
.chip[aria-pressed="true"] { background: var(--accent-soft); }
.composer-tools .xbtn { margin-left: auto; }

/* post (problem row) */
.post { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.post:hover { background: var(--row-hover); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 14px/1 var(--f-ui); letter-spacing: -.02em; color: #fff; }
.avatar.easy { background: color-mix(in srgb, var(--easy) 80%, #000); }
.avatar.medium { background: color-mix(in srgb, var(--medium) 80%, #000); color: #111; }
.avatar.hard { background: color-mix(in srgb, var(--hard) 82%, #000); }
.avatar.me { background: var(--surface-2); color: var(--fg); }
.post-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.post-head { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.post-head .name { font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.post-head .verified { width: 18px; height: 18px; color: var(--accent); align-self: center; flex: none; }
.post-head .handle, .post-head .dot { color: var(--muted); }
.post-head .handle { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.post-head .lvl { font-weight: 500; flex: none; }
.lvl.easy { color: var(--easy); } .lvl.medium { color: var(--medium); } .lvl.hard { color: var(--hard); }
.post-text { color: var(--fg); margin: 0; }
.hashtags { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--accent); margin-top: 2px; }
.actions { display: flex; justify-content: space-between; max-width: 425px; margin-top: 8px; margin-left: -8px; }
.act { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; transition: color .2s; }
.act .ic { width: 34px; height: 34px; padding: 8px; border-radius: 9999px; transition: background .2s; }
.act:hover { color: var(--accent); }
.act:hover .ic { background: var(--accent-soft); }
.act.good, .act.good:hover { color: var(--ok); }
.act.good:hover .ic { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.act.mark[aria-pressed="true"] { color: var(--accent); }
.act.mark[aria-pressed="true"] .ic svg [data-fill] { fill: currentColor; }
.empty-feed { padding: 40px 32px; display: flex; flex-direction: column; gap: 8px; max-width: 400px; margin: 0 auto; }
.empty-feed h2 { font-size: 31px; line-height: 36px; font-weight: 800; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.empty-feed p { color: var(--muted); margin: 0; }

/* sidebar */
.side-search { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 6px 0 6px; }
.search-pill { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: 9999px; background: var(--surface-2); border: 1px solid transparent; color: var(--muted); }
.search-pill:focus-within { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.search-pill .ic { width: 18px; height: 18px; }
.search-pill input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font: 15px var(--f-ui); }
.search-pill input::placeholder { color: var(--muted); }
.side-box { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.side-box h2 { font-size: 20px; line-height: 24px; font-weight: 800; margin: 0; padding: 12px 16px; letter-spacing: -.01em; }
.side-box .box-pad { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.side-box .box-pad p { margin: 0; }
.side-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; transition: background .2s; cursor: pointer; }
.side-row:hover { background: var(--row-hover); }
.side-row .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-row .meta small { color: var(--muted); font-size: 13px; line-height: 16px; }
.side-row .meta b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-more { display: block; padding: 16px; color: var(--accent); transition: background .2s; }
.side-more:hover { background: var(--row-hover); text-decoration: none; }
.prog-rows { display: grid; gap: 10px; }
.prog-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-variant-numeric: tabular-nums; }
.prog-row .bar { height: 6px; border-radius: 9999px; background: var(--surface-2); overflow: hidden; }
.prog-row .bar i { display: block; height: 100%; border-radius: 9999px; }
.prog-row .n { color: var(--muted); font-size: 13px; }
.side-foot { color: var(--muted); font-size: 13px; line-height: 16px; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* progress page */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.stat { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font-size: 23px; line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13px; }

/* ---------------- workbench (problem page) ---------------- */
body.bench-mode { --rail: 88px; }
body.bench-mode .rail .lbl, body.bench-mode .rail-account .acct-meta { display: none; }
body.bench-mode .rail-cta { width: 52px; padding: 0; }
body.bench-mode .rail-cta .ic-only { display: inline-flex; width: 24px; height: 24px; }
body.bench-mode .rail-inner { align-items: center; }
body.bench-mode .rail-account { padding: 6px; }
body.bench-mode main#app { flex: 1 1 auto; height: 100vh; height: 100dvh; }
.bench { flex: 1; min-height: 0; display: flex; padding: 8px 8px 8px 0; border-left: 1px solid var(--line); }
.pane { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.left { flex: 0 0 46%; margin-left: 8px; }
.right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gutter-v { flex: 0 0 8px; cursor: col-resize; position: relative; }
.gutter-h { flex: 0 0 8px; cursor: row-resize; position: relative; }
.gutter-v::after, .gutter-h::after { content: ""; position: absolute; background: var(--accent); border-radius: 9px; opacity: 0; transition: opacity .15s; }
.gutter-v::after { left: 3px; top: 42%; width: 2px; height: 16%; }
.gutter-h::after { top: 3px; left: 45%; height: 2px; width: 10%; }
.gutter-v:hover::after, .gutter-h:hover::after { opacity: 1; }
.tabs { flex: none; display: flex; height: 53px; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 0 4px; }
.tab { position: relative; padding: 0 14px; color: var(--muted); font-weight: 500; white-space: nowrap; transition: background .2s; }
.tab:hover { background: var(--hover); }
.tab[aria-selected="true"] { color: var(--fg); font-weight: 700; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; border-radius: 9999px; background: var(--accent); }
.pane-body { flex: 1; overflow: auto; padding: 16px 20px 40px; min-height: 0; }
.prob-title { font-size: 23px; line-height: 28px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.015em; text-wrap: balance; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 16px; color: var(--muted); }
.pill { font-weight: 700; }
.pill.easy { color: var(--easy); } .pill.medium { color: var(--medium); } .pill.hard { color: var(--hard); }
.tag { color: var(--accent); }
.md { max-width: 68ch; }
.md p { margin: 0 0 12px; }
.md ul { margin: 0 0 12px; padding-left: 20px; }
.md li { margin: 4px 0; }
.md code, .inline-code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.section-h { font-size: 17px; line-height: 20px; font-weight: 800; margin: 28px 0 10px; letter-spacing: -.01em; }
.example { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; font: 13px/1.55 var(--f-mono); }
.example .lbl { color: var(--muted); font: 700 13px/1 var(--f-ui); margin-top: 10px; display: block; }
.example .lbl:first-child { margin-top: 0; }
.example pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; padding: 12px 0; font-weight: 700; list-style: none; display: flex; gap: 10px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "+"; color: var(--accent); font-weight: 800; width: 12px; flex: none; }
.qa[open] summary::before { content: "\2212"; }
.qa div { padding: 0 0 12px 22px; color: var(--muted); }
.req { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.req li { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.req li span:first-child { font: 700 12px/20px var(--f-mono); color: var(--accent); }
.plist { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 68ch; }
.plist b { color: var(--fg); }
.steps { display: flex; flex-direction: column; }
.step { border-bottom: 1px solid var(--line); padding: 14px 0; }
.step-head { display: flex; gap: 12px; align-items: flex-start; }
.step-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--f-ui); background: var(--surface-2); flex: none; }
.step.done .step-num { background: var(--ok); color: #fff; }
.step-head h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.step-head p { margin: 2px 0 0; color: var(--muted); }
.step-body { padding: 12px 0 0 44px; display: flex; flex-direction: column; gap: 10px; }
.step textarea { width: 100%; min-height: 76px; resize: vertical; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 14px/1.5 var(--f-ui); }
.step textarea:focus { border-color: var(--accent); outline: none; }
.reveal { color: var(--muted); }
.reveal ul { margin: 6px 0 0; padding-left: 18px; color: var(--fg); }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 9999px; font-weight: 700; font-size: 14px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); color: var(--fg); transition: background .2s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ok { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
.btn.ok:hover { background: var(--primary-hover); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sig { width: 100%; border-collapse: collapse; font-size: 13px; }
.sig td { border-top: 1px solid var(--line); padding: 7px 8px; font-family: var(--f-mono); vertical-align: top; }
.sig td:first-child { color: var(--muted); font-family: var(--f-ui); width: 92px; }
.lock { text-align: center; padding: 48px 16px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lock b { color: var(--fg); font-size: 20px; line-height: 24px; font-weight: 800; }
.codeblock { background: var(--code-bg); border: 1px solid var(--line); border-radius: 16px; overflow: auto; }
.codeblock pre { margin: 0; padding: 14px 16px; font-size: 13px; line-height: 1.55; }
.seg { display: inline-flex; gap: 2px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 9999px; color: var(--muted); font-weight: 700; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); }
.subs { width: 100%; border-collapse: collapse; }
.subs td, .subs th { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.subs th { font-size: 13px; color: var(--muted); font-weight: 500; }
.subs tbody tr { cursor: pointer; }
.subs tbody tr:hover td { background: var(--row-hover); }
.v-ok { color: var(--ok); font-weight: 700; } .v-bad { color: var(--bad); font-weight: 700; } .v-warn { color: var(--warn); font-weight: 700; }
.uml { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; overflow-x: auto; text-align: center; }
.uml svg { max-width: none; height: auto; }
.reveal.uml { color: var(--fg); }

.editor-pane { flex: 1 1 62%; }
.editor-bar { flex: none; height: 53px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.editor-bar select { height: 32px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 9999px; padding: 0 12px; font: 700 14px var(--f-ui); }
.editor-bar .spacer { flex: 1; }
.editor-host { flex: 1; min-height: 0; position: relative; }
.editor-host textarea.fallback { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; resize: none; background: var(--code-bg); color: var(--fg); font: 13px/1.6 var(--f-mono); padding: 12px; tab-size: 4; }
.console-pane { flex: 1 1 38%; }
.console-body { flex: 1; overflow: auto; padding: 12px 16px; min-height: 0; }
.console-foot { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); justify-content: flex-end; align-items: center; }
.console-foot .note { margin-right: auto; color: var(--muted); font-size: 13px; }
.case-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.case-tab { height: 30px; padding: 0 12px; border-radius: 9999px; font-size: 13px; font-weight: 700; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; transition: background .2s; }
.case-tab:hover { background: var(--hover); }
.case-tab[aria-selected="true"] { background: var(--surface-2); color: var(--fg); }
.case-tab .d { width: 7px; height: 7px; border-radius: 50%; }
.field-lbl { font-size: 13px; color: var(--muted); font-weight: 700; margin: 10px 0 4px; display: block; }
.field-lbl:first-child { margin-top: 0; }
.io { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font: 13px/1.5 var(--f-mono); color: var(--fg); white-space: pre-wrap; word-break: break-all; margin: 0; }
textarea.io { resize: vertical; min-height: 42px; }
textarea.io:focus { border-color: var(--accent); outline: none; }
.io .hit { background: color-mix(in srgb, var(--bad) 22%, transparent); border-radius: 4px; outline: 1px solid var(--bad); }
.verdict { font-size: 23px; line-height: 28px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.015em; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); } .verdict.warn { color: var(--warn); }
.vmeta { color: var(--muted); font-size: 13px; margin-bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.err { background: color-mix(in srgb, var(--bad) 8%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); color: var(--fg); border-radius: 12px; padding: 10px 12px; font: 12px/1.5 var(--f-mono); white-space: pre-wrap; overflow-x: auto; margin: 0 0 10px; }
.stdout { color: var(--muted); }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }
.spin { width: 16px; height: 16px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } * { transition: none !important; } }

#toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(16px); background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 6px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.16,1,.3,1); z-index: 99; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------------- responsive (X breakpoints) ---------------- */
@media (max-width: 1264px) {
  :root { --rail: 88px; }
  .rail .lbl, .rail-account .acct-meta { display: none; }
  .rail-cta { width: 52px; padding: 0; }
  .rail-cta .ic-only { display: inline-flex; width: 24px; height: 24px; }
  .rail-inner { align-items: center; }
  .rail-account { padding: 6px; }
}
@media (max-width: 1080px) { .col-side { display: none; } main#app { flex: 0 1 var(--col); } }
@media (max-width: 900px) {
  body.bench-mode main#app { height: auto; }
  .bench { flex-direction: column; padding: 8px; }
  .left { flex: none !important; height: 70vh; margin: 0; }
  .right { flex: none; }
  .editor-pane { flex: none !important; height: 70vh; }
  .console-pane { flex: none !important; height: 60vh; }
  .gutter-v, .gutter-h { cursor: default; }
}
@media (max-width: 700px) {
  .rail { display: none; }
  main#app, body.bench-mode main#app { flex: 1 1 auto; }
  .col-main { width: 100%; border: 0; }
  .bench { border: 0; }
  .shell { padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(53px + env(safe-area-inset-bottom, 0px)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tabbar a { flex: 1; display: grid; place-items: center; color: var(--fg); }
  .tabbar a.active .ic svg [data-fill] { fill: currentColor; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 500px) { .composer-input { font-size: 17px; line-height: 24px; } }

/* ---------------- System Design: "learn" world ----------------
   Structure follows hldmastery.com/learn: an indexed concept library with collapsible groups of lesson cards,
   and a split lesson view whose diagram stays pinned beside the text and changes frame as you scroll.
   Warm near-black ground, one amber accent, mono only for numbers, tags and diagram captions (data). */
body.learn-mode {
  --l-bg: #0b0a08; --l-panel: #0f0e0c; --l-raise: #15130f; --l-line: #26231d; --l-line-2: #363229;
  --l-fg: #f0ebe0; --l-muted: #a8a194; --l-dim: #857f72;
  --l-amber: #e8a020; --l-amber-text: #f0b23e; --l-amber-ink: #1a1000; --l-amber-soft: rgba(232,160,32,.12);
  --l-good: #6fd391; --l-good-bg: rgba(111,211,145,.10); --l-bad: #f0745e;
  --f-display: "Unbounded", "Geist", system-ui, sans-serif; --f-body: "Geist", "Inter", system-ui, sans-serif;
  /* re-point shared tokens so toast, spinner and scrollbars match */
  --bg: var(--l-bg); --fg: var(--l-fg); --line: var(--l-line-2); --muted: var(--l-muted); --accent: var(--l-amber);
  --ok: var(--l-good); --bad: var(--l-bad); --hover: rgba(240,235,224,.06);
  background: var(--l-bg); color: var(--l-fg); font: 16px/1.6 var(--f-body);
}
:root[data-theme="light"] body.learn-mode {
  --l-bg: #f7f3ea; --l-panel: #fffdf8; --l-raise: #f1ebde; --l-line: #e4dccb; --l-line-2: #d3c8b2;
  --l-fg: #1c1a16; --l-muted: #59534a; --l-dim: #6e675b;
  --l-amber: #e8a020; --l-amber-text: #8f5800; --l-amber-ink: #1a1000; --l-amber-soft: rgba(232,160,32,.16);
  --l-good: #1f7a43; --l-good-bg: rgba(31,122,67,.10); --l-bad: #b5361f; --hover: rgba(28,26,22,.05);
}
body.learn-mode .rail, body.learn-mode .tabbar { display: none; }
body.learn-mode .shell { display: block; padding: 0; }
body.learn-mode main#app { display: block; width: 100%; max-width: none; }
body.learn-mode ::selection { background: var(--l-amber); color: var(--l-amber-ink); }
body.learn-mode :focus-visible { outline: 2px solid var(--l-amber); outline-offset: 2px; border-radius: 4px; }
body.learn-mode a { color: var(--l-amber-text); }
.lx { min-height: 100vh; min-height: 100dvh; background: var(--l-bg); }
.lx .mono, .lx code, .lx pre { font-family: var(--f-mono); }
.lx svg { flex: none; }

/* top bar */
.lx-top { position: sticky; top: 0; z-index: 20; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 24px;
  background: color-mix(in srgb, var(--l-bg) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--l-line); }
.lx-brand { display: flex; align-items: center; gap: 8px; color: var(--l-fg) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.lx-brand svg { width: 22px; height: 22px; color: var(--l-amber); }
.lx-crumb { display: flex; align-items: center; gap: 8px; font: 13px var(--f-mono); color: var(--l-dim); min-width: 0; }
.lx-crumb a { color: var(--l-muted) !important; }
.lx-crumb [aria-current] { color: var(--l-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.lx-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lx-links a { color: var(--l-muted) !important; font-size: 14px; padding: 6px 10px; border-radius: 6px; text-decoration: none !important; transition: color .15s, background .15s; }
.lx-links a:hover { color: var(--l-fg) !important; background: var(--hover); }
.lx-links .lx-out { border: 1px solid var(--l-line-2); margin-left: 6px; }
.lx-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: var(--l-muted); transition: color .15s, background .15s; }
.lx-icon:hover { color: var(--l-fg); background: var(--hover); }
.lx-icon svg { width: 18px; height: 18px; }
.lx-icon[aria-pressed="true"] { color: var(--l-amber); background: var(--l-amber-soft); }

/* buttons, tags */
.lx-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; background: var(--l-amber); color: var(--l-amber-ink) !important;
  font: 700 14px var(--f-body); text-decoration: none !important; border: 1px solid transparent; transition: filter .15s, background .15s; white-space: nowrap; }
.lx-btn:hover { filter: brightness(1.08); }
.lx-btn svg { width: 16px; height: 16px; }
.lx-btn.ghost { background: transparent; color: var(--l-fg) !important; border-color: var(--l-line-2); }
.lx-btn.ghost:hover { background: var(--hover); filter: none; }
.lx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-tags span { font: 11.5px/1 var(--f-mono); color: var(--l-muted); border: 1px solid var(--l-line-2); border-radius: 3px; padding: 5px 7px; }

/* library layout */
.lx-body { display: grid; grid-template-columns: 264px minmax(0, 1000px); gap: 40px; justify-content: center; padding: 32px 24px 80px; }
.lx-index { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; border: 1px solid var(--l-line); border-radius: 8px;
  background: var(--l-panel); padding: 14px 12px 12px; }
.lx-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px 12px; border-bottom: 1px solid var(--l-line); margin-bottom: 10px; }
.lx-index-head b { font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.lx-index-head span { font: 11.5px var(--f-mono); color: var(--l-dim); }
.lx-ig + .lx-ig { margin-top: 10px; }
.lx-ig-head { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; font: 600 11.5px var(--f-mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--l-fg) !important; text-decoration: none !important; border-radius: 4px; }
.lx-ig-head:hover { background: var(--hover); }
.lx-ig-head span:last-child { color: var(--l-dim); font-weight: 400; flex: none; }
.lx-ig ol { list-style: none; margin: 2px 0 0 6px; padding: 0 0 0 8px; border-left: 1px solid var(--l-line); }
.lx-ig li a { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 4px; color: var(--l-muted) !important; font-size: 13.5px; line-height: 1.35; text-decoration: none !important; }
.lx-ig li a:hover { color: var(--l-fg) !important; background: var(--hover); }
.lx-ig li .n { font: 11px var(--f-mono); color: var(--l-dim); flex: none; }
.lx-ig li .t { flex: 1; }
.lx-ig li .ok { width: 14px; height: 14px; color: var(--l-good); align-self: center; }
.lx-ig li .ok svg { width: 14px; height: 14px; }
.lx-ig li a.is-read .t { color: var(--l-dim); }

.lx-hero { margin: 8px 0 28px; }
.lx-hero h1 { font: 700 clamp(28px, 4vw, 42px)/1.12 var(--f-display); letter-spacing: -.03em; margin: 0 0 12px; text-wrap: balance; }
.lx-hero > p { color: var(--l-muted); font-size: 17px; line-height: 1.6; max-width: 66ch; margin: 0 0 22px; }
.lx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lx-seg { display: inline-flex; border: 1px solid var(--l-line-2); border-radius: 8px; padding: 3px; background: var(--l-panel); }
.lx-seg a { padding: 6px 12px; border-radius: 5px; color: var(--l-muted) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; display: flex; gap: 6px; align-items: baseline; }
.lx-seg a span { font: 11.5px var(--f-mono); color: var(--l-dim); }
.lx-seg a[aria-selected="true"] { background: var(--l-raise); color: var(--l-fg) !important; box-shadow: inset 0 0 0 1px var(--l-line-2); }
.lx-seg a[aria-selected="true"] span { color: var(--l-amber-text); }
.lx-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--l-line-2); border-radius: 8px; background: var(--l-panel); flex: 1 1 200px; max-width: 320px; color: var(--l-dim); }
.lx-search:focus-within { border-color: var(--l-amber); color: var(--l-amber-text); }
.lx-search .ic { width: 16px; height: 16px; }
.lx-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--l-fg); font: 14px var(--f-body); }
.lx-search input::placeholder { color: var(--l-dim); }
.lx-progress { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12.5px; color: var(--l-muted); }
.lx-progress .bar { width: 96px; height: 4px; border-radius: 4px; background: var(--l-line-2); overflow: hidden; }
.lx-progress .bar i { display: block; height: 100%; background: var(--l-amber); border-radius: 4px; }

/* category groups */
.lx-cat { border: 1px solid var(--l-line); border-radius: 8px; background: var(--l-panel); margin-bottom: 12px; scroll-margin-top: 72px; }
.lx-cat > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; border-radius: 8px; }
.lx-cat > summary::-webkit-details-marker { display: none; }
.lx-cat > summary:hover { background: var(--hover); }
.lx-cat-name { font: 600 13px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.lx-cat-count { font: 12px var(--f-mono); color: var(--l-dim); white-space: nowrap; }
.lx-rule { flex: 1; height: 1px; background: var(--l-line); }
.lx-chev { width: 18px; height: 18px; color: var(--l-dim); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.lx-chev svg { width: 18px; height: 18px; }
.lx-cat[open] .lx-chev { transform: rotate(90deg); }
.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 4px 16px 16px; }

/* lesson card */
.lx-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--l-line); border-radius: 8px; background: var(--l-raise);
  color: var(--l-fg) !important; text-decoration: none !important; transition: border-color .18s, transform .18s cubic-bezier(.2,.8,.2,1); }
.lx-card:hover { border-color: color-mix(in srgb, var(--l-amber) 55%, var(--l-line)); transform: translateY(-2px); }
.lx-card:hover .lx-start { filter: brightness(1.1); }
.lx-card[hidden] { display: none; }
.lx-card-top { display: flex; justify-content: space-between; align-items: center; }
.lx-num { font: 12.5px var(--f-mono); color: var(--l-dim); }
.lx-pill { display: inline-flex; align-items: center; gap: 4px; font: 11px/1 var(--f-mono); color: var(--l-muted); border: 1px solid var(--l-line-2); border-radius: 999px; padding: 4px 8px; }
.lx-pill.done { color: var(--l-good); border-color: color-mix(in srgb, var(--l-good) 45%, transparent); background: var(--l-good-bg); }
.lx-pill svg { width: 12px; height: 12px; }
.lx-glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--l-amber-soft); color: var(--l-amber-text); border: 1px solid color-mix(in srgb, var(--l-amber) 25%, transparent); }
.lx-glyph svg { width: 22px; height: 22px; }
.lx-card h3 { font: 600 17px/1.3 var(--f-display); letter-spacing: -.01em; margin: 2px 0 0; text-wrap: balance; }
.lx-card p { margin: 0; color: var(--l-muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.lx-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; gap: 8px; }
.lx-sub { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--f-mono); color: var(--l-dim); }
.lx-sub svg { width: 14px; height: 14px; }
.lx-start { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 5px; background: var(--l-amber); color: var(--l-amber-ink); font-weight: 700; font-size: 13.5px; }
.lx-start svg { width: 14px; height: 14px; }
.lx-links-list { padding: 0 8px 10px; }
.lx-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; border-top: 1px solid var(--l-line); color: var(--l-fg) !important; text-decoration: none !important; border-radius: 4px; }
.lx-link:hover { background: var(--hover); }
.lx-link span:first-child { display: flex; flex-direction: column; gap: 2px; }
.lx-link b { font-weight: 600; font-size: 15px; }
.lx-link small { color: var(--l-muted); font-size: 13px; }
.lx-link .ic { width: 16px; height: 16px; color: var(--l-dim); }
.lx-link[hidden] { display: none; }
.lx-empty, .lx-note { color: var(--l-muted); font-size: 14px; padding: 8px 4px; }
.lx-loading { display: grid; place-items: center; height: 60vh; }

/* lesson split view */
.ls-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); min-height: calc(100vh - 52px); }
.ls-split.no-diagram { grid-template-columns: minmax(0, 820px); justify-content: center; }
.ls-text { min-width: 0; border-right: 1px solid var(--l-line); }
.ls-split.no-diagram .ls-text { border-right: 0; }
.ls-head { padding: 40px 40px 28px; border-bottom: 1px solid var(--l-line); }
.ls-head h1 { font: 700 clamp(28px, 3.6vw, 44px)/1.1 var(--f-display); letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
.ls-sum { color: var(--l-muted); font-size: 18px; line-height: 1.55; margin: 0 0 16px; max-width: 62ch; }
.ls-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--l-dim); margin-bottom: 12px; }
.ls-meta .mono { color: var(--l-amber-text); }
.ls-meta .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--l-good); }
.ls-meta .ok svg { width: 14px; height: 14px; }
.ls-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ls-body { padding: 8px 40px 8px; font-size: 16.5px; line-height: 1.75; }
.ls-body > div > *, .quiz, .ls-foot { max-width: 72ch; }
.ls-body h2 { font: 600 24px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--l-amber-text); margin: 44px 0 14px; }
.ls-body h3 { font: 600 18px/1.3 var(--f-body); margin: 28px 0 10px; }
.ls-body p, .ls-body ul, .ls-body ol { margin: 0 0 16px; }
.ls-body ul, .ls-body ol { padding-left: 22px; }
.ls-body li { margin: 6px 0; }
.ls-body li::marker { color: var(--l-dim); }
.ls-body strong, .ls-body b { color: var(--l-fg); font-weight: 650; }
.ls-body code { font-size: .86em; background: var(--l-raise); border: 1px solid var(--l-line); padding: 1px 5px; border-radius: 4px; }
.ls-body pre { background: var(--l-panel); border: 1px solid var(--l-line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 18px; }
.ls-body pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.6; }
.ls-body pre code.language-text { color: var(--l-good); }
.ls-body .table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--l-line-2); border-radius: 6px; }
.ls-body table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5; }
.ls-body th, .ls-body td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--l-line); }
.ls-body th { font: 600 11.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); background: var(--l-panel); }
.ls-body tr:last-child td { border-bottom: 0; }
.ls-body td:first-child { white-space: nowrap; }
.ls-newhere { margin: 32px 0 8px; }
.ls-newhere h2 { font: 600 13px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--l-amber-text); margin: 0 0 10px; }
.ls-newhere > p { font-size: 17.5px; line-height: 1.7; color: var(--l-fg); }
.ls-analogy { margin: 18px 0 24px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--l-amber) 30%, var(--l-line)); background: var(--l-amber-soft); border-radius: 8px; }
.ls-analogy p { margin: 0; }
.ls-analogy strong { color: var(--l-amber-text); }
.ls-matters { margin: 40px 0 8px; padding: 20px 22px; border: 1px solid var(--l-line-2); border-radius: 8px; background: var(--l-panel); }
.ls-matters h2 { margin-top: 0; font-size: 19px; color: var(--l-fg); }
.ls-matters p:last-child { margin-bottom: 0; }

/* diagram anchors in the text: chip on wide screens, the full diagram on narrow ones */
.ls-fig { margin: 8px 0 20px; }
.ls-fig-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px dashed var(--l-line-2); border-radius: 6px; font: 12px var(--f-mono); color: var(--l-muted); }
.ls-fig-chip:hover { color: var(--l-amber-text); border-color: var(--l-amber); }
.ls-fig-chip svg { width: 15px; height: 15px; }
.ls-fig-uml { display: none; }

.ls-diagram { position: sticky; top: 52px; height: calc(100vh - 52px); height: calc(100dvh - 52px); display: flex; flex-direction: column; background: var(--l-panel); }
.ld-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--l-line); }
.ld-label { font: 600 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.ld-frame { font-size: 12px; color: var(--l-dim); margin-left: auto; }
.ld-stage { flex: 1; min-height: 0; position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, var(--l-line-2) 1px, transparent 0); background-size: 22px 22px; }
.ld-pane { position: absolute; inset: 0; display: grid; place-items: safe center; padding: 28px; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
.ld-pane.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ld-pane svg { max-width: 100%; max-height: 100%; }
.ld-stage.zoomed { overflow: auto; cursor: grab; }
.ld-stage.zoomed:active { cursor: grabbing; }
.ld-stage.zoomed .ld-pane { position: absolute; inset: auto; display: block; min-width: 100%; }
.ld-stage.zoomed .ld-pane svg { max-width: none; max-height: none; width: auto; transform-origin: 0 0; }
.ld-stage.zoomed .ld-pane:not(.on) { display: none; }
.ld-foot { border-top: 1px solid var(--l-line); padding: 12px 16px 16px; }
.ld-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.ld-dots button { width: 22px; height: 6px; border-radius: 3px; background: var(--l-line-2); transition: background .2s, width .2s; }
.ld-dots button[aria-selected="true"] { background: var(--l-amber); width: 34px; }
.ld-cap { margin: 0; font: 13px/1.6 var(--f-mono); color: var(--l-muted); min-height: 3.2em; }
.ld-cap b { color: var(--l-fg); font-weight: 600; margin-right: 6px; }

/* quiz + footer */
.lx .quiz { margin: 48px 40px 0; border-top: 1px solid var(--l-line); padding-top: 12px; }
.lx .quiz h2 { font: 600 22px var(--f-display); letter-spacing: -.02em; margin: 18px 0 8px; }
.lx .qq { padding: 14px 0 18px; border-bottom: 1px solid var(--l-line); }
.lx .qq-q { font-weight: 650; margin: 0 0 12px; }
.lx .qq-opts { display: flex; flex-direction: column; gap: 8px; }
.lx .qq-opt { text-align: left; padding: 11px 14px; border-radius: 6px; border: 1px solid var(--l-line-2); background: var(--l-panel); transition: background .15s, border-color .15s; font-size: 15px; line-height: 1.45; }
.lx .qq-opt:hover:not(:disabled) { border-color: var(--l-amber); }
.lx .qq-opt:disabled { cursor: default; }
.lx .qq-opt.right { border-color: var(--l-good); background: var(--l-good-bg); }
.lx .qq-opt.wrong { border-color: var(--l-bad); background: color-mix(in srgb, var(--l-bad) 10%, transparent); }
.lx .qq-why { margin: 12px 0 0; color: var(--l-muted); font-size: 15px; }
.lx .v-ok { color: var(--l-good); } .lx .v-bad { color: var(--l-bad); }
.ls-foot { margin: 32px 40px 0; padding: 0 0 64px; display: flex; flex-direction: column; gap: 22px; }
.ls-foot #mark-read { align-self: flex-start; }
.ls-nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--l-line); padding-top: 20px; }
.ls-nav a { display: flex; flex-direction: column; gap: 2px; color: var(--l-fg) !important; text-decoration: none !important; max-width: 48%; }
.ls-nav a.next { text-align: right; margin-left: auto; }
.ls-nav small { font: 12px var(--f-mono); color: var(--l-dim); }
.ls-nav b { font-weight: 600; font-size: 15px; }
.ls-nav a:hover b { color: var(--l-amber-text); }

@media (prefers-reduced-motion: reduce) { .ld-pane, .lx-card, .lx-chev { transition: none !important; } .lx-card:hover { transform: none; } }
@media (max-width: 1100px) {
  .lx-body { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 64px; }
  .lx-index { display: none; }
  .lx-links a:not(.lx-out) { display: none; }
}
@media (max-width: 960px) {
  .ls-split, .ls-split.no-diagram { grid-template-columns: minmax(0, 1fr); }
  .ls-text { border-right: 0; }
  .ls-diagram { display: none; }
  .ls-fig-chip { display: none; }
  .ls-fig-uml { display: block; overflow-x: auto; border: 1px solid var(--l-line); border-radius: 8px; padding: 16px; background: var(--l-panel); }
  .ls-fig-uml svg { max-width: none; height: auto; }
  .ls-body table { min-width: 460px; }
  .ls-body td, .ls-body th { overflow-wrap: normal; word-break: normal; }
}
@media (max-width: 640px) {
  .lx-top { padding: 0 14px; gap: 10px; }
  .lx-brand span { display: none; }
  .ls-head { padding: 28px 16px 22px; }
  .ls-body { padding: 4px 16px; font-size: 16px; }
  .lx .quiz, .ls-foot { margin-left: 16px; margin-right: 16px; }
  .lx-progress { margin-left: 0; width: 100%; }
  .lx-search { max-width: none; }
  .lx-grid { grid-template-columns: minmax(0, 1fr); padding: 4px 10px 12px; }
  .lx-cat > summary { padding: 14px 12px; gap: 8px; }
  .lx-cat-name { letter-spacing: .08em; font-size: 12px; }
  .ls-body td:first-child { white-space: normal; }
}
.prog-row { grid-template-columns: 76px 1fr auto; }
code, pre, .mono, .io, .example, .codeblock { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.lesson-body .uml svg { max-width: 100%; height: auto; }