@layer base, layout, components, responsive;

@layer base {
  :root {
    color-scheme:light;
    --bg:#f6f8fb; --surface:#ffffff; --sidebar:#eff3f8;
    --text:#1b2838; --muted:#526277; --border:#ccd6e2; --border-strong:#92a3b8;
    --accent:#006b63; --accent-hover:#00564f; --accent-ink:#ffffff;
    --active:#e0f0ed; --soft:#edf2f7; --link:#006b63;
    --code:#f0f4f8; --code-ink:#22354a; --code-header:#e4ebf3;
    --success:#176544; --warning:#974612;
    --map:#f7fafc; --map-node:#f8f5ea; --map-node-ink:#6e511b;
    --map-policy:#edf5e8; --map-policy-ink:#3f621e;
    --map-blue:#eaf2fc; --map-blue-ink:#285b90;
    --map-selected:#dbefe9; --map-dot:#cbd5e1;
    --overlay:#0c1424ad; --shadow:#162a4212;
    --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  }
  :root[data-theme=dark] {
    color-scheme:dark;
    --bg:#101820; --surface:#18232f; --sidebar:#131d27;
    --text:#e6edf4; --muted:#b2bfcd; --border:#3b4c5e; --border-strong:#687c92;
    --accent:#72ddd0; --accent-hover:#99e9df; --accent-ink:#082f2b;
    --active:#1d403e; --soft:#202e3e; --link:#72ddd0;
    --code:#0d151f; --code-ink:#dfebf7; --code-header:#192635;
    --success:#99d5a9; --warning:#ffc18f;
    --map:#111c27; --map-node:#302c20; --map-node-ink:#e8c889;
    --map-policy:#223223; --map-policy-ink:#b8dc91;
    --map-blue:#1e2f44; --map-blue-ink:#a7c9f0;
    --map-selected:#1c3d3c; --map-dot:#314255;
    --overlay:#03080dc9; --shadow:#00000033;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:90px; }
  body { margin:0; background:var(--bg); color:var(--text); font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  button,input { font:inherit; }
  button,a,input { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; }
  button { color:inherit; }
  a { color:inherit; text-decoration:none; }
  button:disabled { opacity:.35; cursor:default; }
  button,input,a { outline-offset:4px; }
  :focus-visible { outline:2px solid var(--link); }
  ::selection { background:var(--accent); color:var(--accent-ink); }
  h1,h2,h3,p { margin:0; }
  h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; font-weight:600; }
  h2 { font-size:27px; }
  h3 { font-size:19px; }
  .icon { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
  .skip-link { position:fixed; top:-100px; left:20px; background:var(--accent); color:var(--accent-ink); z-index:100; padding:12px 20px; border-radius:6px; }
  .skip-link:focus { top:10px; }
  code { font-family:var(--mono); font-size:.9em; color:var(--text); background:var(--soft); border:1px solid var(--border); border-radius:4px; padding:1px 5px; overflow-wrap:anywhere; }
  kbd { font-family:var(--mono); font-size:13px; border:1px solid var(--border); border-radius:4px; padding:2px 5px; color:var(--muted); white-space:nowrap; }
}

@layer layout {
  .sidebar { position:fixed; inset:0 auto 0 0; width:280px; background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:30; }
  .brand { height:88px; flex-shrink:0; display:flex; align-items:center; gap:10px; padding:0 25px; font-size:26px; line-height:1; letter-spacing:-1.1px; }
  .brand-mark { position:relative; display:grid; place-items:center; width:36px; height:39px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-weight:800; font-size:32px; padding-bottom:5px; }
  .brand-mark>span { position:absolute; right:5px; top:18px; font-size:20px; }
  .brand-trivy { font-weight:700; }
  .brand small { display:block; margin-top:9px; font-family:var(--mono); font-size:12px; letter-spacing:.07em; color:var(--muted); }
  .sidebar-search { margin:0 18px 14px; min-height:44px; padding:0 9px; border:1px solid var(--border); background:var(--surface); border-radius:6px; color:var(--muted); display:flex; align-items:center; gap:7px; font-size:14px; }
  .sidebar-search>.icon { width:15px; height:15px; }
  .sidebar-search kbd { margin-left:auto; background:var(--bg); }
  .sidebar nav { overflow-y:auto; padding:0 16px 20px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  .nav-group { margin-bottom:14px; }
  .nav-group:last-child { margin-bottom:0; }
  .nav-group-title { display:flex; align-items:center; gap:8px; padding:0 10px 5px; color:var(--muted); font-size:13px; font-weight:650; letter-spacing:.04em; }
  .nav-group-title>.icon { height:14px; width:14px; }
  .nav-link { display:flex; align-items:center; justify-content:space-between; min-height:32px; padding:5px 12px 5px 32px; gap:10px; line-height:1.5; font-size:14px; border-radius:5px; color:var(--muted); transition:background .15s,color .15s; }
  .nav-link:hover { color:var(--text); background:var(--soft); }
  .nav-link.active { background:var(--active); color:var(--text); font-weight:600; box-shadow:inset 3px 0 0 var(--link); }
  .active-dot { width:5px; height:5px; border-radius:50%; background:var(--link); }
  .nav-check { width:13px; height:13px; color:var(--link); }
  .sidebar-progress { margin-top:auto; padding:12px 24px 8px; border-top:1px solid var(--border); background:var(--sidebar); }
  .progress-label { display:flex; justify-content:space-between; font-size:13px; font-weight:500; }
  .progress-label>span:last-child { font-family:var(--mono); color:var(--muted); font-size:12px; }
  .progress-track { height:4px; background:var(--border); border-radius:3px; margin:9px 0; overflow:hidden; }
  .progress-track>span { display:block; height:100%; background:var(--link); border-radius:3px; }
  .sidebar-progress p { color:var(--muted); font-size:12px; }
  .sidebar-foot { display:flex; align-items:center; gap:8px; padding:6px 24px 10px; font-size:12px; color:var(--muted); }
  .sidebar-foot>.icon { width:10px; height:10px; }
  .workspace { margin-left:280px; }
  .topbar { position:sticky; top:0; gap:16px; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 43px; border-bottom:1px solid var(--border); background:var(--bg); z-index:20; }
  .breadcrumbs { display:flex; align-items:center; gap:13px; font-size:14px; min-width:0; }
  .breadcrumbs>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .breadcrumbs>.icon { width:12px; height:12px; color:var(--muted); }
  .breadcrumb-root { color:var(--muted); }
  .header-actions { display:flex; flex-shrink:0; align-items:center; gap:16px; }
  .header-actions>a { display:flex; align-items:center; gap:8px; font-size:14px; }
  .header-actions>a>.icon { width:12px; height:12px; }
  .header-divider { height:18px; width:1px; background:var(--border); }
  .icon-button { width:44px; height:44px; padding:6px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:6px; }
  .icon-button:hover { background:var(--soft); }
  .theme-toggle { width:auto; gap:8px; padding:0 12px; border:1px solid var(--border); background:var(--surface); font-size:13px; }
  .icon-button>.icon { width:17px; height:17px; }
  .mobile-menu,.header-search,.nav-backdrop { display:none; }
  main { min-height:calc(100vh - 60px); outline:none; }
  .overview { max-width:1480px; margin:0 auto; padding:28px 36px 0; }
  .page-footer { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--border); padding:16px 0 20px; margin-top:24px; font-size:13px; color:var(--muted); }
  .page-footer a { display:flex; align-items:center; gap:7px; }
  .page-footer .icon { width:13px; height:13px; }
  .footer-dot { margin:0 6px; }
}

@layer components {
  .eyebrow,.section-eyebrow { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:1.1px; color:var(--muted); display:flex; align-items:center; gap:10px; }
  .tiny-square { display:inline-block; width:7px; height:7px; background:var(--link); border-radius:2px; }
  .hero { position:relative; padding:0 0 24px; }
  .hero h1 { font-size:clamp(38px,4.2vw,60px); line-height:1.09; font-weight:600; margin:14px 0 12px; letter-spacing:-.052em; position:relative; z-index:1; }
  .hero h1>span { color:var(--muted); }
  .hero-description { color:var(--muted); font-size:18px; max-width:62ch; line-height:1.6; position:relative; z-index:1; }
  .hero-actions { display:flex; align-items:center; gap:16px; margin-top:16px; }
  .button { min-height:44px; display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:10px 17px; border-radius:5px; font-size:14px; font-weight:600; line-height:1.5; border:1px solid transparent; transition:background .15s,transform .15s; }
  .button>.icon { width:16px; height:16px; }
  .button:hover { transform:translateY(-1px); }
  .primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  .secondary { background:var(--surface); border-color:var(--border); }
  .text-button { padding-left:0; padding-right:0; color:var(--text); }
  .text-button>.icon { width:13px; height:13px; }
  .hero-stats { display:flex; align-items:center; gap:25px; color:var(--muted); font-size:13px; margin-top:16px; }
  .hero-stats>span { display:flex; align-items:center; gap:7px; }
  .hero-stats .icon { width:14px; height:14px; }
  .hero-decoration { position:absolute; right:22px; top:18px; width:190px; height:190px; color:var(--border); }
  .orbit { position:absolute; inset:0; border:1px solid; border-radius:50%; }
  .orbit-two { inset:25px; }
  .orbit-three { inset:50px; }
  .hero-glyph { position:absolute; inset:70px; color:var(--link); }
  .hero-glyph .icon { width:50px; height:50px; stroke-width:1; }
  .hero-decoration i { position:absolute; width:9px; height:9px; background:var(--accent); border:1px solid var(--link); border-radius:50%; top:26px; right:23px; }
  .home-section { margin-top:12px; }
  .section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:12px; }
  .section-heading h2 { margin-top:8px; font-size:24px; }
  .section-heading>p,.subtle { color:var(--muted); font-size:13px; margin-bottom:3px; }
  .system-map { background:var(--map); border:1px solid var(--border); border-radius:12px; overflow:hidden; color:var(--text); box-shadow:0 4px 20px var(--shadow); }
  .map-toolbar { display:flex; justify-content:space-between; align-items:center; padding:6px 12px; border-bottom:1px solid var(--border); background:var(--surface); gap:12px; }
  .map-tabs { display:flex; gap:4px; }
  .map-tabs button { border:1px solid transparent; color:var(--muted); background:transparent; padding:9px 12px; min-height:44px; border-radius:6px; font-size:14px; font-weight:500; }
  .map-tabs button.selected { background:var(--active); color:var(--link); border-color:var(--link); }
  .map-tabs button:hover { color:var(--text); background:var(--soft); }
  .map-live { display:flex; gap:6px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--muted); }
  .map-live>span { width:4px; height:4px; background:var(--link); border-radius:50%; }
  .map-body { display:block; }
  .map-scroll { overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--border-strong) var(--map); }
  .map-canvas { position:relative; width:100%; aspect-ratio:750/430; min-width:750px; background-image:radial-gradient(var(--map-dot) .8px,transparent .8px); background-size:20px 20px; }
  .map-axis { display:flex; position:absolute; top:12px; left:4%; right:6%; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em; }
  .map-edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; color:var(--muted); }
  .map-edge { stroke:var(--muted); stroke-width:1.2; fill:none; stroke-dasharray:4 3; }
  .map-edges text { font-family:var(--mono); font-size:12px; fill:var(--muted); paint-order:stroke; stroke:var(--map); stroke-width:4px; stroke-linejoin:round; }
  .map-node { position:absolute; display:flex; align-items:center; gap:8px; width:24%; height:17.67%; padding:10px; border:1px solid var(--border-strong); background:var(--map-node); border-radius:6px; text-align:left; transition:border-color .15s,background .15s; }
  .map-node strong { display:block; font-size:14px; font-weight:650; letter-spacing:-.02em; line-height:1.35; }
  .map-node small { display:block; margin-top:5px; font-size:12px; line-height:1.4; color:var(--muted); }
  .node-icon { color:var(--map-node-ink); }
  .node-icon>.icon { width:20px; height:20px; }
  .map-node.blue { background:var(--map-blue); }
  .map-node.blue .node-icon { color:var(--map-blue-ink); }
  .map-node.lime { background:var(--map-policy); }
  .map-node.lime .node-icon { color:var(--map-policy-ink); }
  .map-node.is-selected { border-color:var(--link); background:var(--map-selected); box-shadow:0 0 0 1px var(--link); }
  .map-node:hover { border-color:var(--link); }
  .map-node:focus-visible,.map-tabs button:focus-visible { outline-color:var(--link); }
  .map-inspector { border-top:1px solid var(--border); padding:16px 20px; background:var(--surface); display:grid; grid-template-columns:minmax(140px,1fr) 2fr; gap:6px 20px; }
  .inspector-kicker { grid-column:1/-1; font-family:var(--mono); font-size:12px; letter-spacing:.07em; color:var(--muted); }
  .inspector-icon { display:none; }
  .map-inspector h3 { font-size:20px; letter-spacing:-.02em; align-self:start; }
  .map-inspector p { grid-column:2; grid-row:2/5; font-size:15px; line-height:1.6; color:var(--muted); margin:0; }
  .inspector-role { padding-top:8px; margin:0; }
  .inspector-role small { display:block; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em; margin-bottom:4px; }
  .inspector-role>span { font-size:13px; }
  .map-inspector>a { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--link); margin-top:8px; text-decoration:underline; text-underline-offset:3px; }
  .map-inspector>a>.icon { width:13px; height:13px; }
  .map-caption { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; padding:11px 15px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
  .map-caption>span:first-child { display:flex; align-items:center; gap:6px; }
  .map-caption .icon { width:12px; height:12px; }
  .map-legend { display:flex; align-items:center; gap:5px; white-space:nowrap; }
  .map-legend i { width:5px; height:5px; border-radius:50%; background:var(--map-node-ink); margin-left:8px; }
  .map-legend i:nth-of-type(2) { background:var(--map-policy-ink); }
  .map-legend i:nth-of-type(3) { background:var(--map-blue-ink); }
  .home-section+.home-section { margin-top:24px; }
  .path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .path-card { padding:16px; border:1px solid var(--border); border-radius:10px; box-shadow:0 2px 8px var(--shadow); background:var(--surface); transition:border-color .15s,transform .15s; }
  .path-card:hover { border-color:var(--link); transform:translateY(-3px); }
  .path-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .path-icon { display:grid; place-items:center; width:32px; height:32px; background:var(--soft); border:1px solid var(--border); border-radius:5px; color:var(--link); }
  .path-icon .icon { width:18px; height:18px; }
  .path-number { font-family:var(--mono); font-size:13px; color:var(--muted); }
  .path-card h3 { font-size:20px; letter-spacing:-.025em; }
  .path-card p { font-size:15px; line-height:1.6; color:var(--muted); margin-top:6px; min-height:0; }
  .path-bottom { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-top:14px; color:var(--muted); }
  .path-bottom>span>span { margin:0 5px; }
  .path-bottom .icon { width:16px; height:16px; color:var(--text); }
  .field-note { display:flex; align-items:center; gap:22px; padding:18px 20px; border:1px solid var(--border); border-left:3px solid var(--link); background:var(--soft); margin:20px 0; border-radius:5px; }
  .field-note-icon { align-self:flex-start; margin-top:5px; color:var(--link); }
  .field-note h3 { margin:6px 0; font-size:17px; }
  .field-note p { color:var(--muted); font-size:14px; line-height:1.6; }
  .round-link { width:35px; height:35px; border:1px solid var(--border); display:grid; place-items:center; border-radius:50%; margin-left:auto; flex-shrink:0; }
  .round-link:hover { background:var(--surface); }
  .round-link .icon { width:16px; height:16px; }
  .source-note { color:var(--muted); font-size:13px; }
  .source-note a { color:var(--link); }
  .source-note .icon { width:10px; height:10px; }
  .resume-strip { display:flex; align-items:center; justify-content:space-between; margin:16px 0; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); gap:20px; }
  .resume-strip>div { display:flex; gap:13px; align-items:center; }
  .resume-strip strong { display:block; font-size:15px; }
  .resume-strip small { display:block; color:var(--muted); font-size:14px; margin-top:3px; }

  .lesson-layout { max-width:1280px; margin:auto; padding:28px 36px 0; display:grid; grid-template-columns:minmax(0,78ch) 200px; gap:32px; }
  .lesson { min-width:0; overflow-wrap:anywhere; }
  .lesson-header h1 { font-size:clamp(30px,3.1vw,46px); line-height:1.15; margin:14px 0 10px; }
  .lesson-header>p { font-size:19px; line-height:1.6; color:var(--muted); max-width:650px; }
  .eyebrow-separator { color:var(--border); margin:0 4px; }
  .lesson-meta { display:flex; flex-wrap:wrap; gap:20px; margin:14px 0 18px; font-size:13px; color:var(--muted); }
  .lesson-meta>span { display:flex; align-items:center; gap:6px; }
  .lesson-meta .icon { width:14px; height:14px; }
  .completed-label { color:var(--link); }
  .takeaway { background:var(--soft); border:1px solid var(--border); border-left:3px solid var(--link); border-radius:5px; padding:14px 18px; margin-bottom:22px; }
  .takeaway>span { font-family:var(--mono); font-size:12px; letter-spacing:1px; display:flex; gap:8px; align-items:center; color:var(--link); }
  .takeaway .icon { width:15px; height:15px; }
  .takeaway p { margin-top:6px; font-size:17px; line-height:1.6; }
  .lesson-section { margin:28px 0; scroll-margin-top:95px; }
  .lesson-section h2 { position:relative; font-size:27px; margin-bottom:10px; }
  .section-anchor { position:absolute; left:-20px; color:var(--muted); opacity:0; font-size:16px; top:5px; }
  .lesson-section h2:hover .section-anchor,.section-anchor:focus-visible { opacity:1; }
  .lesson-section p { margin:8px 0; font-size:17px; line-height:1.6; }
  .lesson-section p a { color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
  .lesson-section li { font-size:17px; line-height:1.6; padding:3px 0; }
  .lesson-section ul { padding-left:20px; margin:8px 0; }
  .technical-table-scroll { overflow-x:auto; margin:16px 0; border:1px solid var(--border); border-radius:6px; }
  .technical-table { width:100%; border-collapse:collapse; min-width:600px; text-align:left; font-size:14px; line-height:1.6; }
  .technical-table caption { text-align:left; padding:10px 14px; background:var(--soft); font-weight:600; font-size:14px; }
  .technical-table th,.technical-table td { vertical-align:top; padding:8px 12px; border-top:1px solid var(--border); }
  .technical-table thead { background:var(--surface); font-size:13px; }
  .technical-table tbody th { font-weight:500; width:27%; }
  .technical-table tbody td { color:var(--text); }
  .technical-table a { color:var(--link); text-decoration:underline; }
  .sequence-figure { margin:16px 0; border:1px solid var(--border); border-radius:7px; overflow:hidden; background:var(--surface); }
  .boundary-map { margin:16px 0; border:1px solid var(--border); border-radius:7px; overflow:hidden; background:var(--surface); }
  .boundary-map figcaption { padding:10px 14px; font-size:14px; background:var(--soft); border-bottom:1px solid var(--border); }
  .boundary-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:10px; padding:12px; }
  .boundary-group { min-width:0; padding:10px; border:1px dashed var(--border-strong); border-radius:5px; }
  .boundary-group h3 { font-size:17px; letter-spacing:-.02em; }
  .boundary-group>p { font-size:13px; line-height:1.6; color:var(--muted); margin:6px 0 10px; }
  .boundary-group>div { display:grid; gap:8px; }
  .lesson-section a.boundary-node { display:block; padding:9px 10px; border:1px solid var(--border); border-radius:4px; text-decoration:none; background:var(--soft); }
  .boundary-node>span { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
  .boundary-node .icon { flex-shrink:0; width:12px; height:12px; }
  .boundary-node small { display:block; margin-top:6px; color:var(--muted); font-size:14px; line-height:1.6; }
  .lesson-section a.boundary-node:hover { border-color:var(--link); }
  .architecture-entry { margin:20px 0; padding:18px 20px; border:1px solid var(--border); border-radius:8px; background:var(--soft); display:flex; align-items:center; gap:16px; }
  .architecture-entry h2 { margin:6px 0; font-size:25px; }
  .architecture-entry p { color:var(--muted); font-size:14px; max-width:620px; line-height:1.6; }
  .architecture-entry>.button { flex-shrink:0; margin-left:auto; }
  .sequence-figure figcaption { padding:10px 14px; font-size:14px; background:var(--soft); border-bottom:1px solid var(--border); }
  .sequence-scroll { overflow-x:auto; padding:10px 8px 0; }
  .sequence-scroll svg { display:block; width:100%; color:var(--link); }
  .sequence-actor { fill:var(--soft); stroke:var(--border); }
  .sequence-actor-label { fill:var(--text); font-size:14px; font-weight:600; }
  .sequence-lifeline { stroke:var(--border-strong); stroke-dasharray:4 4; }
  .sequence-message { fill:none; stroke:var(--link); stroke-width:1.2; }
  .sequence-label { fill:var(--text); font-size:13px; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round; }
  .sequence-transcript { padding:10px 14px; border-top:1px solid var(--border); font-size:14px; }
  .sequence-transcript summary { cursor:pointer; color:var(--link); }
  .sequence-transcript li { font-size:15px; }
  .reasoning-exercise { margin:16px 0; background:var(--soft); border:1px solid var(--border); border-radius:6px; padding:12px 16px; }
  .reasoning-exercise summary { cursor:pointer; font-size:16px; line-height:1.6; }
  .reasoning-exercise summary>span { display:block; color:var(--link); font-family:var(--mono); font-size:12px; letter-spacing:1px; margin-bottom:4px; }
  .reasoning-exercise>p { border-top:1px solid var(--border); padding-top:10px; font-size:16px; }
  .section-evidence { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:14px; padding-top:8px; border-top:1px dashed var(--border); align-items:flex-start; }
  .section-evidence>span { font-family:var(--mono); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; padding-top:2px; }
  .section-evidence>a { font-size:14px; text-decoration:underline; text-underline-offset:3px; color:var(--link); max-width:300px; }
  .section-evidence small { display:block; color:var(--muted); font-size:12px; }
  .toc { max-height:calc(100vh - 108px); overflow-y:auto; scrollbar-width:thin; }
  .inline-note { padding:10px 14px; display:flex; gap:10px; background:var(--soft); border-radius:5px; margin-top:12px; }
  .inline-note>.icon { width:15px; height:15px; margin-top:4px; color:var(--muted); }
  .inline-note>p { margin:0; font-size:14px; line-height:1.6; color:var(--muted); }
  .download-link { display:inline-flex; align-items:center; gap:8px; color:var(--link); font-size:14px; margin:8px 0; }
  .download-link .icon { width:15px; height:15px; }
  .code-block { border-radius:8px; overflow:hidden; background:var(--code); color:var(--code-ink); margin:16px 0; border:1px solid var(--border); }
  .code-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 12px; background:var(--code-header); border-bottom:1px solid var(--border); font-size:13px; color:var(--text); }
  .code-header>span { display:flex; align-items:center; gap:8px; }
  .code-header .icon { width:13px; height:13px; }
  .code-header button { display:flex; align-items:center; gap:6px; flex-shrink:0; min-height:36px; padding:5px 10px; border:1px solid var(--border-strong); border-radius:5px; background:var(--surface); color:var(--text); font-size:13px; }
  .code-header button:hover { background:var(--active); border-color:var(--link); }
  .code-block pre { margin:0; overflow:auto; padding:14px 16px; tab-size:2; font-size:14px; line-height:1.6; scrollbar-color:var(--border-strong) var(--code); overflow-wrap:normal; scrollbar-width:thin; }
  .code-block pre:focus-visible,.technical-table-scroll:focus-visible,.sequence-scroll:focus-visible,.map-scroll:focus-visible { outline-offset:-3px; }
  .code-block code { padding:0; background:none; border:0; overflow-wrap:normal; color:inherit; font-size:inherit; }
  .toc { position:sticky; top:84px; height:fit-content; border-left:1px solid var(--border); padding-left:20px; margin-top:6px; }
  .toc>span { font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--muted); display:block; margin-bottom:10px; }
  .toc>a { font-size:13px; color:var(--muted); line-height:1.7; display:block; padding:4px 0; }
  .toc>a:hover { color:var(--link); }
  .toc-note { margin-top:18px; padding-top:12px; border-top:1px solid var(--border); }
  .toc-note>.icon { width:18px; height:18px; color:var(--link); }
  .toc-note p { margin:6px 0; color:var(--muted); font-size:13px; line-height:1.6; }
  .toc-note>a { font-size:12px; color:var(--link); }
  .toc-note>a>.icon { width:12px; height:12px; }
  .lesson-map .map-body { display:block; }
  .lesson-map .map-inspector { padding:16px 20px; }
  .lesson-map .inspector-kicker,.lesson-map .inspector-icon,.lesson-map .inspector-role { display:none; }
  .lesson-map .map-inspector p { grid-column:2; grid-row:1/3; margin:0; }
  .lesson-map .map-inspector>a { margin:0; justify-content:flex-start; gap:15px; }
  .lesson-map .map-caption { font-size:12px; }
  .lesson-map .map-legend { display:none; }
  .mini-diagram { margin:18px 0; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:6px; }
  .mini-diagram figcaption { font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:1px; margin-bottom:12px; }
  .mini-diagram>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .mini-diagram span { font-size:14px; line-height:1.6; max-width:23%; }
  .mini-diagram small { display:block; font-family:var(--mono); color:var(--link); font-size:12px; margin-bottom:5px; }
  .mini-diagram .icon { width:16px; height:16px; color:var(--muted); }
  .flow-player { background:var(--map); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:16px; }
  .flow-top { display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:1px; }
  .flow-top>span:first-child { display:flex; align-items:center; gap:8px; }
  .flow-top .icon { width:14px; height:14px; }
  .flow-track { display:flex; justify-content:space-between; position:relative; margin:18px 0 16px; }
  .flow-track:before { content:''; position:absolute; top:20px; left:8%; width:84%; height:1px; background:var(--border-strong); }
  .flow-stop { z-index:1; border:0; background:none; color:var(--muted); width:19%; padding:0 3px; min-height:44px; overflow-wrap:anywhere; display:flex; align-items:center; flex-direction:column; gap:9px; }
  .flow-stop>span { width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); display:grid; place-items:center; font-family:var(--mono); font-size:14px; }
  .flow-stop.selected>span { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .flow-stop.selected { color:var(--text); font-weight:600; }
  .flow-stop.passed>span { color:var(--link); border-color:var(--link); }
  .flow-stop .icon { width:13px; height:13px; }
  .flow-stop small { font-size:12px; line-height:1.6; }
  .flow-detail { display:flex; gap:16px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:6px; min-height:0; }
  .flow-step-number { color:var(--link); font-family:var(--mono); font-size:38px; line-height:1; }
  .flow-detail h3 { font-size:19px; }
  .flow-detail p { font-size:16px; color:var(--muted); margin:8px 0; line-height:1.6; }
  .flow-detail a { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--link); text-decoration:underline; text-underline-offset:3px; }
  .flow-detail a .icon { width:13px; height:13px; }
  .flow-controls { display:flex; justify-content:space-between; align-items:center; padding-top:8px; }
  .flow-controls>span { color:var(--muted); font-size:12px; }
  .flow-controls>div { display:flex; align-items:center; gap:12px; }
  .previous-icon { transform:rotate(180deg); }
  .flow-controls .icon-button:hover { background:var(--soft); }
  .next-step { display:flex; gap:10px; align-items:center; border:0; background:none; color:var(--link); min-height:44px; font-size:13px; }
  .next-step>.icon { width:15px; height:15px; }
  .knowledge-test { padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:7px; margin-top:24px; }
  .knowledge-test h2 { font-size:20px; line-height:1.5; margin:10px 0 14px; letter-spacing:-.02em; }
  .quiz-options { display:flex; flex-direction:column; gap:6px; }
  .quiz-option { width:100%; border:1px solid var(--border); border-radius:5px; background:var(--bg); text-align:left; padding:10px 12px; font-size:16px; display:flex; align-items:center; gap:12px; }
  .quiz-option:hover { border-color:var(--link); }
  .quiz-option>span { display:grid; place-items:center; border:1px solid var(--border); border-radius:3px; width:23px; height:23px; flex-shrink:0; font-size:13px; font-family:var(--mono); color:var(--muted); }
  .quiz-option>.icon { margin-left:auto; width:15px; height:15px; }
  .quiz-option.correct { border-color:var(--success); background:var(--soft); }
  .quiz-option.incorrect { border-color:var(--warning); }
  .quiz-feedback,.quiz-hint { font-size:15px; color:var(--muted); line-height:1.6; margin-top:10px; }
  .quiz-feedback.correct { color:var(--link); }
  .quiz-feedback.incorrect { color:var(--warning); }
  .lesson-sources { margin-top:24px; }
  .lesson-sources h2 { font-size:22px; }
  .lesson-sources p { font-size:14px; color:var(--muted); margin:8px 0 12px; }
  .lesson-sources>div { display:flex; flex-direction:column; gap:4px; }
  .lesson-sources a { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--link); padding:6px 0; border-bottom:1px solid var(--border); }
  .lesson-sources a .icon { width:13px; height:13px; }
  .lesson-sources a .icon:last-child { margin-left:auto; }
  .lesson-sources a small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
  .upstream-link { font-size:14px; color:var(--muted); margin-top:16px; overflow-wrap:anywhere; }
  .upstream-link a { color:var(--link); }
  .upstream-link .icon { width:11px; height:11px; }
  .completion-panel { margin-top:24px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .completion-panel h3 { font-size:16px; }
  .completion-panel p { color:var(--muted); font-size:13px; margin-top:4px; }
  .completion-panel .button { flex-shrink:0; }
  .lesson-pagination { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
  .lesson-pagination a { padding:12px 14px; border:1px solid var(--border); border-radius:5px; background:var(--surface); }
  .lesson-pagination a:hover { border-color:var(--link); }
  .lesson-pagination small { display:block; font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
  .lesson-pagination a:last-child { text-align:right; }
  .lesson-pagination span { font-size:14px; }
  .lesson-pagination .icon { width:14px; height:14px; margin-left:9px; }

  .reference-page { max-width:960px; margin:auto; padding:28px 36px 0; }
  .reference-page h1 { font-size:46px; margin:14px 0 10px; }
  .reference-intro { color:var(--muted); font-size:16px; line-height:1.6; margin-bottom:20px; }
  .glossary-search { display:flex; align-items:center; gap:13px; border:1px solid var(--border); padding:10px 14px; border-radius:6px; background:var(--surface); margin-bottom:14px; }
  .glossary-search>.icon { color:var(--muted); width:17px; height:17px; }
  .glossary-search input { background:none; border:0; outline:none; color:var(--text); width:100%; font-size:16px; }
  .glossary-search:focus-within { outline:2px solid var(--link); outline-offset:2px; }
  .glossary-term { display:grid; grid-template-columns:145px 1fr 24px; gap:18px; align-items:start; padding:14px 0; border-bottom:1px solid var(--border); }
  .glossary-term h2 { font-size:17px; line-height:1.5; }
  .glossary-term p { font-size:15px; color:var(--muted); line-height:1.6; }
  .glossary-term>a { color:var(--link); }
  .glossary-term .icon { width:17px; height:17px; }
  .source-page section { margin:24px 0; }
  .source-page section h2 { margin-bottom:10px; font-size:24px; }
  .source-page section p { font-size:17px; line-height:1.6; margin:8px 0; }
  .source-page section p a { color:var(--link); text-decoration:underline; }
  .source-directory { display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; }
  .source-directory>a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .source-directory small { display:block; font-size:13px; color:var(--muted); margin-top:5px; }
  .source-directory .icon,.repo-list .icon { width:13px; height:13px; color:var(--muted); }
  .repo-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; font-size:14px; color:var(--link); margin-top:14px; }
  .reset-explanation { display:block; font-size:13px; color:var(--muted); margin-top:10px; }
  .empty-state { font-size:15px; color:var(--muted); padding:30px 20px; }

  #search-dialog { width:min(660px,calc(100vw - 32px)); max-height:75vh; margin:12vh auto auto; padding:0; border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 80px var(--shadow); color:var(--text); background:var(--surface); overflow:hidden; }
  #search-dialog::backdrop { background:var(--overlay); backdrop-filter:blur(3px); }
  .search-input-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); }
  .search-input-row>.icon { color:var(--muted); }
  .search-input-row input { width:100%; border:0; background:transparent; outline:none; color:var(--text); font-size:17px; }
  .search-close { background:none; border:0; padding:3px; }
  .search-results { padding:12px; max-height:calc(75vh - 120px); overflow-y:auto; }
  .search-caption { padding:4px 10px 10px; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.5px; }
  .search-result { display:flex; gap:14px; align-items:center; padding:10px 12px; border-radius:5px; }
  .search-result:hover,.search-result:focus { background:var(--soft); }
  .search-result>span { flex:1; }
  .search-result>.icon { color:var(--link); width:18px; height:18px; }
  .search-result strong { display:block; font-size:16px; font-weight:500; }
  .search-result small { display:block; font-size:14px; line-height:1.7; color:var(--muted); margin-top:3px; }
  .search-result em { color:var(--muted); font-size:13px; font-style:normal; padding-left:8px; }
  .search-footer { padding:11px 22px; display:flex; justify-content:space-between; gap:15px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
  .search-footer>span>span { margin:0 5px; }
  #toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,15px); max-width:calc(100vw - 32px); background:var(--text); color:var(--bg); border:1px solid var(--border); border-radius:6px; padding:12px 20px; z-index:100; font-size:14px; opacity:0; transition:opacity .15s,transform .15s; pointer-events:none; }
  #toast.show { opacity:1; transform:translate(-50%,0); }
}

@layer responsive {
  @media (min-width:1650px) {
    .map-body { display:grid; grid-template-columns:minmax(0,1fr) 260px; }
    .map-inspector { display:block; border-top:0; border-left:1px solid var(--border); }
    .inspector-kicker { display:block; margin-bottom:12px; }
    .map-inspector p { margin-top:10px; }
    .inspector-role { margin-top:12px; }
    .map-inspector>a { margin-top:12px; }
    .lesson-map .map-body { display:block; }
    .lesson-map .map-inspector { display:grid; border-left:0; border-top:1px solid var(--border); }
  }
  @media (max-width:1280px) {
    .sidebar { width:256px; }
    .workspace { margin-left:256px; }
    .brand { padding:0 20px; }
    .brand small { font-size:12px; }
    .overview { padding:24px 28px 0; }
    .topbar { padding:0 30px; }
    .breadcrumb-root,.breadcrumbs>.icon { display:none; }
    .hero-decoration { display:none; }
    .lesson-layout { display:block; max-width:880px; padding:24px 28px 0; }
    .toc { display:none; }
    .path-grid { gap:14px; }
    .path-card { padding:16px; }
    .section-heading>p,.section-heading>.subtle { max-width:220px; text-align:right; }
  }
  @media (max-width:1000px) {
    .path-grid { grid-template-columns:1fr; }
    .path-top { margin-bottom:12px; }
    .path-card p { min-height:0; }
    .path-bottom { margin-top:12px; }
    .hero h1 { font-size:48px; }
    .hero-stats { flex-wrap:wrap; gap:12px 20px; }
    .map-live { display:none; }
    .architecture-entry { flex-direction:column; align-items:flex-start; }
    .architecture-entry>.button { margin-left:0; }
  }
  @media (max-width:800px) {
    .sidebar { transform:translateX(-100%); visibility:hidden; transition:transform .2s,visibility .2s; width:280px; max-width:calc(100vw - 48px); z-index:60; }
    .workspace { margin-left:0; }
    .topbar { padding:0 20px; height:60px; gap:12px; }
    .mobile-menu,.header-search { display:inline-flex; }
    .header-actions { gap:4px; }
    .breadcrumbs { gap:6px; }
    .menu-open .sidebar { transform:translateX(0); visibility:visible; }
    .menu-open .nav-backdrop { display:block; position:fixed; inset:0; border:0; z-index:50; background:var(--overlay); }
    .menu-open { overflow:hidden; }
    .overview { padding:24px 24px 0; }
    .hero { padding-bottom:24px; }
    .lesson-layout { padding:24px 24px 0; }
    .reference-page { padding:24px 24px 0; }
    .reference-page h1 { font-size:40px; }
    .sidebar nav { padding-bottom:12px; }
    .sidebar .nav-group { margin-bottom:12px; }
    .sidebar-progress { padding-top:10px; }
    .field-note p br { display:none; }
  }
  @media (max-width:540px) {
    .overview,.lesson-layout,.reference-page { padding:20px 18px 0; }
    .hero .eyebrow { font-size:12px; letter-spacing:.04em; gap:8px; }
    .hero h1 { font-size:40px; margin-top:14px; }
    .hero-description { font-size:17px; }
    .desktop-break { display:none; }
    .hero-actions { align-items:flex-start; flex-direction:column; gap:8px; margin-top:14px; }
    .hero-stats { font-size:13px; margin-top:14px; }
    .section-heading { align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:12px; }
    .section-heading>p,.section-heading>.subtle { max-width:none; text-align:left; }
    .section-heading h2 { font-size:25px; }
    .map-toolbar { padding:8px; }
    .map-tabs { flex-wrap:wrap; gap:4px; }
    .map-tabs button { font-size:13px; padding:8px; }
    .map-inspector,.lesson-map .map-inspector { display:block; padding:16px; }
    .inspector-kicker { display:block; margin-bottom:12px; }
    .map-inspector p,.lesson-map .map-inspector p { margin:8px 0; }
    .map-caption { padding:12px; line-height:1.7; }
    .field-note { padding:16px; gap:12px; align-items:flex-start; }
    .field-note-icon { display:none; }
    .field-note h3 { font-size:18px; line-height:1.5; }
    .page-footer { flex-direction:column; gap:10px; margin-top:22px; }
    .header-actions>a,.header-divider { display:none; }
    .topbar { padding:0 8px; }
    .resume-strip,.completion-panel { align-items:flex-start; flex-direction:column; }
    .lesson-header h1,.reference-page h1 { font-size:34px; }
    .lesson-header>p,.reference-intro { font-size:18px; }
    .eyebrow { letter-spacing:.04em; gap:8px; flex-wrap:wrap; }
    .lesson-meta { gap:12px; }
    .takeaway { padding:12px 14px; }
    .lesson-section { margin:24px 0; }
    .lesson-section h2 { font-size:25px; line-height:1.35; }
    .section-anchor { display:none; }
    .mini-diagram { padding:14px; }
    .mini-diagram>div { flex-direction:column; align-items:stretch; gap:12px; }
    .mini-diagram span { max-width:none; display:flex; gap:18px; align-items:center; }
    .mini-diagram small { margin:0; }
    .mini-diagram .icon { transform:rotate(90deg); margin-left:28px; }
    .flow-player { padding:14px 12px 10px; }
    .flow-top { letter-spacing:0; flex-wrap:wrap; gap:8px; }
    .flow-track { gap:4px; }
    .flow-stop { padding:0; }
    .flow-detail { padding:14px; gap:12px; flex-direction:column; }
    .flow-step-number { font-size:25px; }
    .flow-controls { flex-wrap:wrap; gap:8px; }
    .flow-controls>div { margin-left:auto; gap:4px; }
    .knowledge-test { padding:16px 14px; }
    .knowledge-test h2 { font-size:20px; }
    .quiz-option { padding:10px; gap:9px; }
    .lesson-pagination { gap:10px; }
    .lesson-pagination a { padding:14px; }
    .lesson-pagination .icon { margin-left:3px; }
    .glossary-term { grid-template-columns:1fr 24px; gap:8px 14px; padding:14px 0; }
    .glossary-term p { grid-column:1; grid-row:2; }
    .glossary-term>a { grid-column:2; grid-row:1/3; align-self:center; }
    .source-directory,.repo-list { grid-template-columns:1fr; }
    .search-input-row { gap:10px; padding:16px 12px; }
    .search-result { gap:10px; padding:12px 8px; }
    .search-footer { padding:12px; flex-wrap:wrap; }
    .architecture-entry { padding:16px; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { transition:none!important; animation:none!important; }
  }
  @media print {
    .sidebar,.topbar,.toc,.hero-decoration,.nav-backdrop,.completion-panel,.lesson-pagination,.code-header button,#toast { display:none!important; }
    .workspace { margin:0; }
    .lesson-layout,.overview,.reference-page { display:block; padding:0; max-width:none; }
    .lesson-section,.code-block,.knowledge-test { break-inside:avoid; }
    .page-footer { margin-top:14px; }
  }
}