/* ============================================================
   rraushan.blog — single shared stylesheet
   Generated/maintained: edit the palette below to re-skin the
   whole site. Light, warm-parchment, professional (no vibrant
   colours). The same tokens drive every standalone HTML note;
   the MkDocs Material theme mirrors them in stylesheets/extra.css.
   ============================================================ */

:root {
  /* ---- surfaces & ink ---- */
  --bg:            #f7f5f0;   /* page background (warm parchment) */
  --surface:       #fffefb;   /* cards / raised surfaces        */
  --surface2:      #f0ede6;
  --bg-elevated:   #fffefb;
  --bg-subtle:     #f0ede6;
  --bg-code:       #f0ede6;
  --bg2:           #fffefb;
  --bg3:           #f0ede6;
  --principle-bg:  #faf8f5;

  --ink:           #1a1816;   /* primary text  */
  --ink2:          #4a4540;   /* secondary     */
  --ink3:          #8a8278;   /* muted / labels*/
  --text:          #1a1816;
  --text2:         #4a4540;
  --text3:         #8a8278;
  --text-muted:    #6a6560;
  --text-faint:    #b0aaa0;

  /* ---- accents (muted, professional) ---- */
  --accent:        #c84b2f;   /* terracotta — primary / links   */
  --accent2:       #2a5f8f;   /* blue   */
  --accent3:       #2a7a4f;   /* green  */
  --accent4:       #8a6a3e;   /* amber  */
  --amber:         #8a6a3e;
  --teal:          #357a6e;
  --rose:          #a8554a;
  --blue:          #2a5f8f;
  --cold:          #a8554a;
  --derive:        #357a6e;
  --revision:      #2a5f8f;
  --interview:     #8a6a3e;
  --purple:        #7c5cbf;
  --warn:          #c84b2f;

  /* tints */
  --accent-bg:     rgba(200,75,47,0.07);
  --accent-bd:     rgba(200,75,47,0.20);
  --accent-soft:   rgba(200,75,47,0.10);
  --accent-glow:   rgba(200,75,47,0.05);
  --accent2-bg:    rgba(42,95,143,0.07);
  --accent2-bd:    rgba(42,95,143,0.20);
  --accent3-bg:    rgba(42,122,79,0.07);
  --accent3-bd:    rgba(42,122,79,0.20);
  --teal-soft:     rgba(53,122,110,0.10);
  --rose-soft:     rgba(168,85,74,0.10);
  --blue-soft:     rgba(42,95,143,0.10);

  /* ---- borders ---- */
  --border:        rgba(26,24,22,0.10);
  --border2:       rgba(26,24,22,0.06);
  --border-soft:   rgba(26,24,22,0.06);
  --border-solid:  #e5e3de;

  /* ---- code (kept dark — easy on the eyes & consistent) ---- */
  --code-bg:       #f0ede6;
  --dark-code:     #1e1c1a;
  --dark-code-fg:  #d4cfc8;
  --dark-border:   rgba(255,255,255,0.08);
  --dark-header:   rgba(255,255,255,0.04);

  /* ---- highlights / misc ---- */
  --yellow:        #f5e6a3;
  --yellow-ink:    #7a5c00;
  --mental-bg:     #f0edf8;
  --mental-border: #7c5cbf;
  --mental-ink:    #3a2060;
  --nav-muted:     rgba(247,245,240,0.60);
  --mac-yellow:    #c8a44a;
  --shadow:        0 2px 10px rgba(26,24,22,0.07);

  /* ---- type & metrics ---- */
  --font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:    'Instrument Serif', Georgia, serif;
  --font-mono:     'DM Mono', 'Fira Code', monospace;
  --radius:        8px;
  --radius-lg:     14px;
  --content-w:     720px;
  --wide-w:        900px;
}


/* ============================================================
   GLOBAL BASE + COMPONENT VOCABULARY (for new notes)
   ============================================================ */
/* ============================================================
   K8s Notes — shared stylesheet
   Design language: warm paper background, blue/green/amber accents
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 28px;
}

.page.narrow {
  max-width: 860px;
}

/* ============ TYPOGRAPHY ============ */

h1 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
  margin-top: 8px;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  margin-top: 20px;
}

h4 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  margin-top: 16px;
}

p { margin-bottom: 12px; }

a {
  color: var(--accent2);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent2);
}
a:hover { border-bottom-style: solid; }

strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; color: var(--ink); }

/* Section heading: small caps with rule extending right */
.section-heading {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent2);
  margin: 32px 0 18px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-solid);
}

/* ============ HEADER ============ */

.page-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-solid);
}

.page-header .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  color: var(--ink3);
}

.page-header .subtitle {
  color: var(--ink3);
  font-size: 0.95rem;
  margin-top: 6px;
}

/* Chapter label pill */
.chapter-pill {
  display: inline-block;
  background: var(--code-bg);
  color: var(--ink3);
  font-size: 0.69rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  border-radius: 20px;
}

/* ============ CARDS ============ */

.card {
  background: var(--surface);
  border: 1px solid var(--border-solid);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.card.tight { padding: 18px 22px; }

/* ============ CALLOUTS ============ */

.callout {
  border-radius: 0 5px 5px 0;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.92rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout .label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  display: block;
}

.callout.key {
  background: var(--accent2-bg);
  border-left: 3px solid var(--accent2);
}
.callout.key .label { color: var(--accent2); }

.callout.tip {
  background: var(--accent3-bg);
  border-left: 3px solid var(--accent3);
}
.callout.tip .label { color: var(--accent3); }

.callout.warn {
  background: var(--accent-bg);
  border-left: 3px solid var(--amber);
}
.callout.warn .label { color: var(--amber); }

/* ============ CODE ============ */

code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--code-bg);
  border: 1px solid var(--border-solid);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink);
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border-solid);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 14px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
}
pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Syntax highlighting */
.kw { color: var(--accent2); font-weight: 600; }
.fn { color: var(--accent3); }
.str { color: var(--amber); }
.cm { color: var(--ink3); font-style: italic; }
.cl { color: var(--mental-border); }
.nm { color: var(--ink); }

/* ============ LISTS ============ */

ul, ol {
  margin: 8px 0 14px 0;
  padding-left: 22px;
}
ul li, ol li { margin-bottom: 6px; }

ul.bare {
  list-style: none;
  padding-left: 0;
}
ul.bare li {
  padding-left: 16px;
  position: relative;
}
ul.bare li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent2);
}

/* Definition-style list */
.deflist {
  list-style: none;
  padding-left: 0;
}
.deflist > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-solid);
}
.deflist > li:last-child { border-bottom: none; }
.deflist .term {
  font-weight: 600;
  color: var(--accent2);
  margin-right: 8px;
}

/* ============ TABLES ============ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.88rem;
  border: 1px solid var(--border-solid);
  border-radius: 6px;
  overflow: hidden;
}

th {
  background: var(--code-bg);
  color: var(--ink3);
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-solid);
}

td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-solid);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }

td.better { color: var(--accent3); font-weight: 600; }
td.worse { color: var(--accent); }
td.same { color: var(--ink3); }
td.mono { font-family: var(--font-mono); font-size: 0.8rem; }

/* ============ PILLS ============ */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 500;
  margin: 0 2px;
}
.pill.lib {
  background: var(--accent2-bg);
  color: var(--accent2);
}
.pill.alt {
  background: var(--accent3-bg);
  color: var(--accent3);
}
.pill.warn {
  background: var(--accent-bg);
  color: var(--amber);
}

/* ============ FLOW DIAGRAM ============ */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  background: var(--code-bg);
  border: 1px solid var(--border-solid);
  border-radius: 6px;
}

.flow .box {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid #d4d1ca;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
}

.flow .box.hl { background: var(--accent2-bg); border-color: var(--accent2); color: var(--accent2); }
.flow .box.grn { background: var(--accent3-bg); border-color: var(--accent3); color: var(--accent3); }
.flow .box.amb { background: var(--accent-bg); border-color: var(--amber); color: var(--amber); }
.flow .box.src { background: var(--code-bg); border-color: var(--ink3); color: var(--ink3); }

.flow .arrow {
  color: var(--ink3);
  font-size: 1.1rem;
}

/* ============ SVG containers ============ */

.diagram {
  margin: 18px 0;
  padding: 16px;
  background: var(--code-bg);
  border: 1px solid var(--border-solid);
  border-radius: 6px;
  overflow-x: auto;
}
.diagram svg { display: block; margin: 0 auto; max-width: 100%; }
.diagram .caption {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink3);
  margin-top: 10px;
  font-style: italic;
}

/* ============ NAV ============ */

.toc-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-solid);
  font-size: 0.85rem;
}
.toc-nav a {
  color: var(--accent2);
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.toc-nav a:hover { color: var(--ink); }
.toc-nav .home {
  color: var(--ink3);
}

/* ============ NUMBERED RULES (counter list) ============ */

ol.rules {
  list-style: none;
  counter-reset: rule;
  padding-left: 0;
}
ol.rules li {
  counter-increment: rule;
  padding: 14px 0 14px 52px;
  position: relative;
  border-bottom: 1px solid var(--border-solid);
}
ol.rules li:last-child { border-bottom: none; }
ol.rules li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 14px;
  width: 32px;
  height: 32px;
  background: var(--accent2);
  color: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ============ MISC ============ */

hr {
  border: none;
  border-top: 1px solid var(--border-solid);
  margin: 24px 0;
}

.muted { color: var(--ink3); }
.subtle { color: var(--ink3); }
.small { font-size: 0.85rem; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 16px 0;
}
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.kv {
  font-size: 0.85rem;
}
.kv .k {
  color: var(--ink3);
  font-weight: 500;
  min-width: 100px;
  display: inline-block;
}


/* ============================================================
   PER-NOTE SCOPED STYLES (existing notes; each kept intact,
   recoloured from the shared palette above)
   ============================================================ */

/* ===== dsa/1-Arrays-Memory-Complexity.html  (scope .n-arrays) ===== */
.n-arrays * {box-sizing: border-box; margin: 0; padding: 0;}
.n-arrays {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-arrays .page {max-width: 780px;
    margin: 0 auto;
    padding: 56px 32px 96px;}
.n-arrays .doc-title {font-family: 'Instrument Serif', serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: 6px;}
.n-arrays .doc-subtitle {font-size: 14px;
    color: var(--ink3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 48px;}
.n-arrays .section {margin-bottom: 56px;}
.n-arrays .section-title {font-family: 'Instrument Serif', serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border);}
.n-arrays .section-title .tag {font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--ink3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;}
.n-arrays p {margin-bottom: 14px; color: var(--ink2);}
.n-arrays p:last-child {margin-bottom: 0;}
.n-arrays .callout {background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    margin: 20px 0;
    font-size: 14px;
    color: var(--ink2);}
.n-arrays .callout strong {color: var(--ink); font-weight: 500;}
.n-arrays .callout-blue {border-left-color: var(--accent2);}
.n-arrays .callout-green {border-left-color: var(--accent3);}
.n-arrays .note {background: var(--yellow);
    color: var(--yellow-ink);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 13px;
    font-weight: 400;}
.n-arrays code {font-family: 'DM Mono', monospace;
    font-size: 13px;
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--accent);}
.n-arrays .ops-table {width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;}
.n-arrays .ops-table th {font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink3);
    font-weight: 400;
    text-align: left;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);}
.n-arrays .ops-table td {padding: 10px 14px;
    border-bottom: 1px solid var(--border2);
    color: var(--ink2);}
.n-arrays .ops-table tr:last-child td {border-bottom: none;}
.n-arrays .ops-table .o1 {font-family: 'DM Mono', monospace;
    font-size: 13px;
    color: var(--accent3);
    font-weight: 500;}
.n-arrays .ops-table .on {font-family: 'DM Mono', monospace;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;}
.n-arrays .amort-table {width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
    font-family: 'DM Mono', monospace;}
.n-arrays .amort-table th {font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink3);
    font-weight: 400;
    text-align: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);}
.n-arrays .amort-table td {padding: 7px 10px;
    border-bottom: 1px solid var(--border2);
    text-align: center;
    color: var(--ink2);}
.n-arrays .amort-table .resize-row td {color: var(--accent);}
.n-arrays .amort-table tr:last-child td {border-bottom: none;}
.n-arrays .fig-row {display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0;}
.n-arrays .fig-label {font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--ink3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-width: 56px;
    padding-top: 2px;}
.n-arrays svg.inline-fig {display: block;
    width: 100%;
    max-width: 620px;
    margin: 20px 0;}
.n-arrays .graph-wrap {margin: 20px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;}
.n-arrays hr {border: none;
    border-top: 1px solid var(--border);
    margin: 40px 0;}
.n-arrays .def-row {display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 14px;}
.n-arrays .def-term {font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--ink3);
    min-width: 90px;
    padding-top: 1px;}
.n-arrays .def-body {color: var(--ink2);}
.n-arrays .steps {counter-reset: step; list-style: none; margin: 14px 0;}
.n-arrays .steps li {counter-increment: step;
    position: relative;
    padding-left: 32px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--ink2);}
.n-arrays .steps li::before {content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px; height: 20px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 50%;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500;
    margin-top: 2px;}
.n-arrays .contrast-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;}
.n-arrays .contrast-card {background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13px;}
.n-arrays .contrast-card .cc-title {font-family: 'DM Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;}
.n-arrays .contrast-card.good .cc-title {color: var(--accent3);}
.n-arrays .contrast-card.bad .cc-title {color: var(--accent);}
@media (max-width: 520px) {
.n-arrays .contrast-grid {grid-template-columns: 1fr;}
.n-arrays .page {padding: 32px 20px 64px;}
.n-arrays .doc-title {font-size: 32px;}
}
.n-arrays-i1 { font-weight:500; }
.n-arrays-i2 { margin-top:4px; }
.n-arrays-i3 { font-family:'Instrument Serif',serif;font-size:20px;font-weight:400;margin:28px 0 12px; }
.n-arrays-i4 { font-size:13px;color:var(--ink2);margin:0; }
.n-arrays-i5 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== dsa/100-temperament.html  (scope .n-temperament) ===== */
.n-temperament * {box-sizing: border-box; margin: 0; padding: 0;}
.n-temperament {font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.8; font-size: 15px; font-weight: 300;}
.n-temperament .page {max-width: 760px; margin: 0 auto; padding: 56px 32px 96px;}
.n-temperament .doc-title {font-family: 'Instrument Serif', serif; font-size: 38px; font-weight: 400; letter-spacing: -0.5px; margin-bottom: 6px;}
.n-temperament .doc-meta {font-size: 13px; color: var(--ink3); letter-spacing: 0.04em; margin-bottom: 8px;}
.n-temperament .doc-note {font-size: 13px; color: var(--ink3); font-style: italic; margin-bottom: 52px; border-left: 2px solid var(--border); padding-left: 12px;}
.n-temperament .principle {background: var(--principle-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;}
.n-temperament .principle-header {display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border2);}
.n-temperament .principle-num {font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink3);
    min-width: 24px;}
.n-temperament .principle-title {font-family: 'Instrument Serif', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--ink);}
.n-temperament .principle-body {padding: 16px 22px 18px 60px;}
.n-temperament .principle-body p {font-size: 14px;
    color: var(--ink2);
    margin-bottom: 10px;
    line-height: 1.7;}
.n-temperament .principle-body p:last-child {margin-bottom: 0;}
.n-temperament .root-cause {display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #fee8e8;
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 10px;}
.n-temperament .root-cause.good {background: #e8f4ec;
    color: var(--accent3);}
.n-temperament .example-block {background: var(--code-bg);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--ink2);
    border-left: 3px solid var(--accent2);}
.n-temperament .example-block .ex-label {font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: 6px;}
.n-temperament code {font-family: 'DM Mono', monospace; font-size: 13px; background: rgba(26,24,22,0.07); padding: 1px 5px; border-radius: 3px; color: var(--accent);}
.n-temperament hr {border: none; border-top: 1px solid var(--border); margin: 36px 0;}
.n-temperament .section-label {font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; color: var(--ink3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; margin-top: 40px;}
@media (max-width: 520px) {
.n-temperament .page {padding: 32px 18px 64px;}
.n-temperament .doc-title {font-size: 28px;}
.n-temperament .principle-body {padding: 14px 16px;}
}
.n-temperament-i1 { border-color: rgba(200,75,47,0.3); }
.n-temperament-i2 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== dsa/2-Stack-Linked List-Doubly Linked List.html  (scope .n-stack) ===== */
.n-stack * {box-sizing: border-box; margin: 0; padding: 0;}
.n-stack {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-stack .page {max-width: 780px; margin: 0 auto; padding: 56px 32px 96px;}
.n-stack .doc-title {font-family: 'Instrument Serif', serif; font-size: 42px; font-weight: 400; letter-spacing: -0.5px; margin-bottom: 6px;}
.n-stack .doc-subtitle {font-size: 14px; color: var(--ink3); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 48px;}
.n-stack .section {margin-bottom: 60px;}
.n-stack .section-title {font-family: 'Instrument Serif', serif;
    font-size: 26px; font-weight: 400;
    margin-bottom: 20px; padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border);}
.n-stack .section-title .tag {font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400;
    color: var(--ink3); letter-spacing: 0.08em; text-transform: uppercase;
    display: block; margin-bottom: 4px;}
.n-stack .subsection {margin: 32px 0 0;}
.n-stack .subsection-title {font-family: 'Instrument Serif', serif; font-style: italic;
    font-size: 19px; font-weight: 400; color: var(--ink);
    margin-bottom: 14px;}
.n-stack p {margin-bottom: 14px; color: var(--ink2);}
.n-stack p:last-child {margin-bottom: 0;}
.n-stack .callout {background: var(--surface); border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 20px 0;
    font-size: 14px; color: var(--ink2);}
.n-stack .callout strong {color: var(--ink); font-weight: 500;}
.n-stack .callout-blue {border-left-color: var(--accent2);}
.n-stack .callout-green {border-left-color: var(--accent3);}
.n-stack .mental-model {background: var(--mental-bg);
    border: 1px solid rgba(124,92,191,0.25);
    border-left: 3px solid var(--mental-border);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin: 24px 0;}
.n-stack .mental-model .mm-title {font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mental-border); margin-bottom: 10px;}
.n-stack .mental-model ul {list-style: none; padding: 0;}
.n-stack .mental-model ul li {position: relative; padding-left: 20px;
    font-size: 14px; color: var(--mental-ink);
    margin-bottom: 7px; line-height: 1.6;}
.n-stack .mental-model ul li::before {content: '◆'; position: absolute; left: 0; top: 1px;
    font-size: 8px; color: var(--mental-border);}
.n-stack .mental-model ul li:last-child {margin-bottom: 0;}
.n-stack code {font-family: 'DM Mono', monospace; font-size: 13px;
    background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--accent);}
.n-stack pre {font-family: 'DM Mono', monospace; font-size: 13px;
    background: #1e1c1a; color: #d4cfc8;
    border-radius: 8px; padding: 20px 22px;
    line-height: 1.65; overflow-x: auto; margin: 16px 0;}
.n-stack pre .kw {color: #c084fc;}
.n-stack pre .fn {color: #60d4a8;}
.n-stack pre .st {color: #f5c068;}
.n-stack pre .cm {color: #6a6560; font-style: italic;}
.n-stack pre .num {color: #7ec8e3;}
.n-stack pre .cl {color: #fbbf24;}
.n-stack .data-table {width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px;}
.n-stack .data-table th {font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink3); font-weight: 400;
    text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border);}
.n-stack .data-table td {padding: 10px 14px; border-bottom: 1px solid var(--border2); color: var(--ink2);}
.n-stack .data-table tr:last-child td {border-bottom: none;}
.n-stack .o1 {font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent3); font-weight: 500;}
.n-stack .on {font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent); font-weight: 500;}
.n-stack .o1a {font-family: 'DM Mono', monospace; font-size: 13px; color: #2a7a9f; font-weight: 500;}
.n-stack .highlight-row td {background: rgba(42,95,143,0.05);}
.n-stack .winner {font-size: 11px; font-family: 'DM Mono', monospace;}
.n-stack .win-arr {color: var(--accent3);}
.n-stack .win-ll {color: var(--accent2);}
.n-stack .patterns-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0;}
.n-stack .pattern-card {background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;}
.n-stack .pattern-card .pc-title {font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px;}
.n-stack .pattern-card .pc-desc {font-size: 12px; color: var(--ink3); line-height: 1.5;}
.n-stack hr {border: none; border-top: 1px solid var(--border); margin: 40px 0;}
.n-stack svg.inline-fig {display: block; width: 100%; max-width: 640px; margin: 20px 0;}
.n-stack .steps {counter-reset: step; list-style: none; margin: 14px 0;}
.n-stack .steps li {counter-increment: step; position: relative;
    padding-left: 32px; margin-bottom: 8px; font-size: 14px; color: var(--ink2);}
.n-stack .steps li::before {content: counter(step); position: absolute; left: 0; top: 0;
    width: 20px; height: 20px; background: var(--ink); color: var(--bg);
    border-radius: 50%; font-family: 'DM Mono', monospace; font-size: 11px;
    display: flex; align-items: center; justify-content: center; font-weight: 500; margin-top: 2px;}
@media (max-width: 520px) {
.n-stack .patterns-grid {grid-template-columns: 1fr;}
.n-stack .page {padding: 32px 20px 64px;}
.n-stack .doc-title {font-size: 32px;}
}
.n-stack-i1 { color:var(--ink3); }
.n-stack-i2 { font-weight:500; }
.n-stack-i3 { font-size:13px;color:var(--ink3);margin-top:6px; }
.n-stack-i4 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== dsa/3-Queue-Recursion-Fibonacci.html  (scope .n-queue) ===== */
.n-queue * {box-sizing: border-box; margin: 0; padding: 0;}
.n-queue {font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.75; font-size: 15px; font-weight: 300;}
.n-queue .page {max-width: 780px; margin: 0 auto; padding: 56px 32px 96px;}
.n-queue .doc-title {font-family: 'Instrument Serif', serif; font-size: 42px; font-weight: 400; letter-spacing: -0.5px; margin-bottom: 6px;}
.n-queue .doc-subtitle {font-size: 14px; color: var(--ink3); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 48px;}
.n-queue .section {margin-bottom: 60px;}
.n-queue .section-title {font-family: 'Instrument Serif', serif; font-size: 26px; font-weight: 400; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1.5px solid var(--border);}
.n-queue .section-title .tag {font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; color: var(--ink3); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 4px;}
.n-queue .subsection {margin-top: 30px;}
.n-queue .subsection-title {font-family: 'Instrument Serif', serif; font-style: italic; font-size: 19px; font-weight: 400; color: var(--ink); margin-bottom: 12px;}
.n-queue p {margin-bottom: 14px; color: var(--ink2);}
.n-queue p:last-child {margin-bottom: 0;}
.n-queue .callout {background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 20px 0; font-size: 14px; color: var(--ink2);}
.n-queue .callout strong {color: var(--ink); font-weight: 500;}
.n-queue .callout-blue {border-left-color: var(--accent2);}
.n-queue .callout-green {border-left-color: var(--accent3);}
.n-queue .mental-model {background: var(--mental-bg); border: 1px solid rgba(124,92,191,0.25); border-left: 3px solid var(--mental-border); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 24px 0;}
.n-queue .mental-model .mm-title {font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mental-border); margin-bottom: 10px;}
.n-queue .mental-model ul {list-style: none; padding: 0;}
.n-queue .mental-model ul li {position: relative; padding-left: 20px; font-size: 14px; color: var(--mental-ink); margin-bottom: 7px; line-height: 1.6;}
.n-queue .mental-model ul li::before {content: '◆'; position: absolute; left: 0; top: 1px; font-size: 8px; color: var(--mental-border);}
.n-queue .mental-model ul li:last-child {margin-bottom: 0;}
.n-queue code {font-family: 'DM Mono', monospace; font-size: 13px; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--accent);}
.n-queue pre {font-family: 'DM Mono', monospace; font-size: 13px; background: #1e1c1a; color: #d4cfc8; border-radius: 8px; padding: 20px 22px; line-height: 1.65; overflow-x: auto; margin: 16px 0;}
.n-queue pre .kw {color: #c084fc;}
.n-queue pre .fn {color: #60d4a8;}
.n-queue pre .st {color: #f5c068;}
.n-queue pre .cm {color: #6a6560; font-style: italic;}
.n-queue pre .num {color: #7ec8e3;}
.n-queue pre .cl {color: #fbbf24;}
.n-queue .data-table {width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px;}
.n-queue .data-table th {font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); font-weight: 400; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border);}
.n-queue .data-table td {padding: 10px 14px; border-bottom: 1px solid var(--border2); color: var(--ink2);}
.n-queue .data-table tr:last-child td {border-bottom: none;}
.n-queue .o1 {font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent3); font-weight: 500;}
.n-queue .on {font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent);  font-weight: 500;}
.n-queue .o2n {font-family: 'DM Mono', monospace; font-size: 13px; color: #b04040; font-weight: 500;}
.n-queue svg.fig {display: block; width: 100%; margin: 20px 0;}
.n-queue hr {border: none; border-top: 1px solid var(--border); margin: 40px 0;}
.n-queue .framework-box {background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 18px 22px; margin: 20px 0;}
.n-queue .framework-box .fb-title {font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 12px;}
@media (max-width: 520px) {
.n-queue .page {padding: 32px 20px 64px;}
.n-queue .doc-title {font-size: 32px;}
}
.n-queue-i1 { font-weight:500; }
.n-queue-i2 { font-size:13px;color:var(--ink3);margin-top:4px; }
.n-queue-i3 { color:var(--accent); }
.n-queue-i4 { color:var(--accent);font-weight:500; }
.n-queue-i5 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== dsa/4-Sorting.html  (scope .n-sorting) ===== */
.n-sorting * {box-sizing:border-box;margin:0;padding:0;}
.n-sorting {font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;font-size:15px;font-weight:300;}
.n-sorting .page {max-width:820px;margin:0 auto;padding:56px 32px 96px;}
.n-sorting .doc-title {font-family:'Instrument Serif',serif;font-size:42px;font-weight:400;letter-spacing:-.5px;margin-bottom:6px;}
.n-sorting .doc-subtitle {font-size:14px;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:48px;}
.n-sorting .algo {margin-bottom:72px;}
.n-sorting .algo-title {font-family:'Instrument Serif',serif;font-size:28px;font-weight:400;margin-bottom:6px;padding-bottom:10px;border-bottom:1.5px solid var(--border);}
.n-sorting .algo-title .tag {font-family:'DM Mono',monospace;font-size:11px;font-weight:400;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px;}
.n-sorting .sub {margin-top:26px;}
.n-sorting .sub-title {font-family:'Instrument Serif',serif;font-style:italic;font-size:19px;font-weight:400;margin-bottom:10px;}
.n-sorting p {margin-bottom:12px;color:var(--ink2);}
.n-sorting p:last-child {margin-bottom:0;}
.n-sorting .callout {background:var(--surface);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:12px 16px;margin:16px 0;font-size:14px;color:var(--ink2);}
.n-sorting .callout strong {color:var(--ink);font-weight:500;}
.n-sorting .callout-blue {border-left-color:var(--accent2);}
.n-sorting .callout-green {border-left-color:var(--accent3);}
.n-sorting .callout-purple {border-left-color:var(--mental-border);}
.n-sorting .mental-model {background:var(--mental-bg);border:1px solid rgba(124,92,191,.25);border-left:3px solid var(--mental-border);border-radius:0 8px 8px 0;padding:14px 18px;margin:20px 0;}
.n-sorting .mental-model .mm-title {font-family:'DM Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mental-border);margin-bottom:8px;}
.n-sorting .mental-model ul {list-style:none;padding:0;}
.n-sorting .mental-model ul li {position:relative;padding-left:18px;font-size:14px;color:var(--mental-ink);margin-bottom:6px;line-height:1.6;}
.n-sorting .mental-model ul li::before {content:'◆';position:absolute;left:0;top:1px;font-size:8px;color:var(--mental-border);}
.n-sorting .mental-model ul li:last-child {margin-bottom:0;}
.n-sorting code {font-family:'DM Mono',monospace;font-size:13px;background:var(--code-bg);padding:1px 5px;border-radius:3px;color:var(--accent);}
.n-sorting pre {font-family:'DM Mono',monospace;font-size:12.5px;background:#1e1c1a;color:#d4cfc8;border-radius:8px;padding:18px 20px;line-height:1.65;overflow-x:auto;margin:14px 0;}
.n-sorting pre .kw {color:#c084fc;}
.n-sorting pre .fn {color:#60d4a8;}
.n-sorting pre .st {color:#f5c068;}
.n-sorting pre .cm {color:#6a6560;font-style:italic;}
.n-sorting pre .num {color:#7ec8e3;}
.n-sorting pre .cl {color:#fbbf24;}
.n-sorting .cx {display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.n-sorting .pill {font-family:'DM Mono',monospace;font-size:12px;padding:4px 10px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;}
.n-sorting .pill .pl {font-size:10px;color:rgba(0,0,0,.45);letter-spacing:.06em;text-transform:uppercase;}
.n-sorting .p-green {background:#e8f4ec;color:#1a5c32;}
.n-sorting .p-amber {background:#fef3e2;color:#7a4a00;}
.n-sorting .p-red {background:#fee8e8;color:#7a1a1a;}
.n-sorting .p-gray {background:#f0ede6;color:#4a4540;}
.n-sorting .p-blue {background:#e8f0f8;color:#1a3a6c;}
.n-sorting .big-table {width:100%;border-collapse:collapse;font-size:13px;margin:20px 0;}
.n-sorting .big-table th {font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:400;padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;}
.n-sorting .big-table td {padding:9px 10px;border-bottom:1px solid var(--border2);vertical-align:top;color:var(--ink2);}
.n-sorting .big-table tr:last-child td {border-bottom:none;}
.n-sorting .big-table .algo-name {font-weight:500;color:var(--ink);font-size:13px;}
.n-sorting .g {color:var(--accent3);font-family:'DM Mono',monospace;font-size:12px;font-weight:500;}
.n-sorting .a {color:#c07800;font-family:'DM Mono',monospace;font-size:12px;font-weight:500;}
.n-sorting .r {color:var(--accent);font-family:'DM Mono',monospace;font-size:12px;font-weight:500;}
.n-sorting .badge {font-family:'DM Mono',monospace;font-size:10px;padding:2px 6px;border-radius:3px;}
.n-sorting .b-yes {background:#e8f4ec;color:#1a5c32;}
.n-sorting .b-no {background:#fee8e8;color:#7a1a1a;}
.n-sorting .b-dep {background:#fef3e2;color:#7a4a00;}
.n-sorting svg.fig {display:block;width:100%;margin:18px 0;}
.n-sorting hr {border:none;border-top:1px solid var(--border);margin:48px 0;}
.n-sorting .section-anchor {font-family:'DM Mono',monospace;font-size:11px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;margin-top:40px;display:block;}
.n-sorting .use-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}
.n-sorting .use-card {background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
.n-sorting .use-card .uc-q {font-size:13px;font-weight:500;color:var(--ink);margin-bottom:4px;}
.n-sorting .use-card .uc-a {font-size:12px;color:var(--ink3);line-height:1.5;}
.n-sorting .use-card .uc-a code {font-size:11px;}
@media(max-width:560px) {
.n-sorting .use-grid {grid-template-columns:1fr;}
.n-sorting .page {padding:32px 18px 64px;}
.n-sorting .doc-title {font-size:30px;}
}
.n-sorting-i1 { font-weight:500; }
.n-sorting-i2 { font-size:14px;color:var(--ink3);font-family:'DM Sans',sans-serif;font-weight:300; }
.n-sorting-i3 { font-size:12px;color:var(--ink3);margin-top:4px; }
.n-sorting-i4 { margin-top:30px; }
.n-sorting-i5 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== dsa/5-binary-search.html  (scope .n-binsearch) ===== */
.n-binsearch * {box-sizing:border-box;margin:0;padding:0;}
.n-binsearch {font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.8;font-size:15px;font-weight:300;}
.n-binsearch .page {max-width:780px;margin:0 auto;padding:56px 32px 96px;}
.n-binsearch .doc-title {font-family:'Instrument Serif',serif;font-size:42px;font-weight:400;letter-spacing:-.5px;margin-bottom:6px;}
.n-binsearch .doc-subtitle {font-size:14px;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:48px;}
.n-binsearch .section {margin-bottom:60px;}
.n-binsearch .section-title {font-family:'Instrument Serif',serif;font-size:26px;font-weight:400;margin-bottom:20px;padding-bottom:10px;border-bottom:1.5px solid var(--border);}
.n-binsearch .section-title .tag {font-family:'DM Mono',monospace;font-size:11px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px;}
.n-binsearch .sub {margin-top:28px;}
.n-binsearch .sub-title {font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;font-weight:400;margin-bottom:12px;}
.n-binsearch p {margin-bottom:14px;color:var(--ink2);}
.n-binsearch p:last-child {margin-bottom:0;}
.n-binsearch strong.hi {font-weight:500;color:var(--ink);}
.n-binsearch .callout {background:var(--surface);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:14px 18px;margin:20px 0;font-size:14px;color:var(--ink2);}
.n-binsearch .callout strong {color:var(--ink);font-weight:500;}
.n-binsearch .callout-blue {border-left-color:var(--accent2);}
.n-binsearch .callout-green {border-left-color:var(--accent3);}
.n-binsearch .mental-model {background:var(--mental-bg);border:1px solid rgba(124,92,191,.25);border-left:3px solid var(--mental-border);border-radius:0 8px 8px 0;padding:16px 20px;margin:24px 0;}
.n-binsearch .mental-model .mm-title {font-family:'DM Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mental-border);margin-bottom:10px;}
.n-binsearch .mental-model ul {list-style:none;padding:0;}
.n-binsearch .mental-model ul li {position:relative;padding-left:20px;font-size:14px;color:var(--mental-ink);margin-bottom:7px;line-height:1.65;}
.n-binsearch .mental-model ul li::before {content:'◆';position:absolute;left:0;top:2px;font-size:8px;color:var(--mental-border);}
.n-binsearch .mental-model ul li:last-child {margin-bottom:0;}
.n-binsearch code {font-family:'DM Mono',monospace;font-size:13px;background:var(--code-bg);padding:1px 5px;border-radius:3px;color:var(--accent);}
.n-binsearch pre {font-family:'DM Mono',monospace;font-size:13px;background:#1e1c1a;color:#d4cfc8;border-radius:8px;padding:20px 22px;line-height:1.65;overflow-x:auto;margin:16px 0;}
.n-binsearch pre .kw {color:#c084fc;}
.n-binsearch pre .fn {color:#60d4a8;}
.n-binsearch pre .st {color:#f5c068;}
.n-binsearch pre .cm {color:#6a6560;font-style:italic;}
.n-binsearch pre .num {color:#7ec8e3;}
.n-binsearch pre .cl {color:#fbbf24;}
.n-binsearch pre .hi {color:#fbbf24;font-weight:500;}
.n-binsearch svg.fig {display:block;width:100%;margin:20px 0;}
.n-binsearch .mono-strip {display:flex;gap:0;margin:20px 0;border-radius:6px;overflow:hidden;font-family:'DM Mono',monospace;font-size:13px;}
.n-binsearch .ms-false {background:#fee8e8;color:#7a1a1a;padding:10px 16px;flex:1;text-align:center;font-weight:500;}
.n-binsearch .ms-true {background:#e8f4ec;color:#1a5c32;padding:10px 16px;flex:1;text-align:center;font-weight:500;}
.n-binsearch .ms-q {background:#f0ede6;color:#4a4540;padding:10px 16px;flex:1;text-align:center;}
.n-binsearch .prob-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}
.n-binsearch .prob-card {background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.n-binsearch .prob-card .pc-q {font-size:13px;font-weight:500;color:var(--ink);margin-bottom:5px;}
.n-binsearch .prob-card .pc-cond {font-family:'DM Mono',monospace;font-size:12px;color:var(--accent2);background:var(--code-bg);padding:3px 8px;border-radius:3px;margin-bottom:6px;display:inline-block;}
.n-binsearch .prob-card .pc-note {font-size:12px;color:var(--ink3);line-height:1.5;}
.n-binsearch .invariant-box {background:#1e1c1a;color:#d4cfc8;border-radius:8px;padding:22px 24px;margin:20px 0;}
.n-binsearch .inv-row {display:flex;align-items:center;gap:16px;margin-bottom:10px;font-family:'DM Mono',monospace;font-size:13px;}
.n-binsearch .inv-row:last-child {margin-bottom:0;}
.n-binsearch .inv-label {min-width:160px;color:#6a6560;font-style:italic;font-size:12px;}
.n-binsearch .inv-false {color:#f87171;font-weight:500;}
.n-binsearch .inv-true {color:#60d4a8;font-weight:500;}
.n-binsearch .inv-range {color:#fbbf24;font-weight:500;}
.n-binsearch .pt-table {width:100%;border-collapse:collapse;font-size:14px;margin:16px 0;}
.n-binsearch .pt-table th {font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:400;padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;}
.n-binsearch .pt-table td {padding:10px 12px;border-bottom:1px solid var(--border2);color:var(--ink2);vertical-align:top;}
.n-binsearch .pt-table tr:last-child td {border-bottom:none;}
.n-binsearch .bad {font-family:'DM Mono',monospace;font-size:12px;color:var(--accent);}
.n-binsearch .fix {font-family:'DM Mono',monospace;font-size:12px;color:var(--accent3);}
.n-binsearch hr {border:none;border-top:1px solid var(--border);margin:40px 0;}
@media(max-width:520px) {
.n-binsearch .prob-grid {grid-template-columns:1fr;}
.n-binsearch .page {padding:32px 18px 64px;}
.n-binsearch .doc-title {font-size:30px;}
}
.n-binsearch-i1 { color:var(--accent);font-weight:500; }
.n-binsearch-i2 { color:var(--accent3);font-weight:500; }
.n-binsearch-i3 { margin-bottom:40px; }
.n-binsearch-i4 { background:#1e1c1a;border-radius:10px;padding:28px 28px 24px;margin:20px 0; }
.n-binsearch-i5 { font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6a6560;margin-bottom:20px; }
.n-binsearch-i6 { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px; }
.n-binsearch-i7 { background:#2a2826;border-radius:7px;padding:14px 16px; }
.n-binsearch-i8 { font-family:'DM Mono',monospace;font-size:11px;color:#7ec8e3;margin-bottom:6px; }
.n-binsearch-i9 { font-size:13px;color:#c0bab2;line-height:1.6; }
.n-binsearch-i10 { font-family:'DM Mono',monospace;font-size:11px;color:#f87171;margin-bottom:6px; }
.n-binsearch-i11 { font-family:'DM Mono',monospace;font-size:11px;color:#60d4a8;margin-bottom:6px; }
.n-binsearch-i12 { color:#fbbf24;font-family:'DM Mono',monospace; }
.n-binsearch-i13 { font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6a6560;margin-bottom:14px; }
.n-binsearch-i14 { background:#111010;border-radius:6px;padding:18px 20px;margin:0;font-size:13px;line-height:1.7;overflow-x:auto; }
.n-binsearch-i15 { margin-top:18px;padding-top:16px;border-top:1px solid #2a2826;font-size:13px;color:#8a8278;line-height:1.7; }
.n-binsearch-i16 { color:#6a6560;font-family:'DM Mono',monospace;font-size:11px; }
.n-binsearch-i17 { color:#d4cfc8; }
.n-binsearch-i18 { background:#2a2826;padding:1px 5px;border-radius:3px;color:#f5c068; }
.n-binsearch-i19 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== dsa/99-python-ref.html  (scope .n-pyref) ===== */
.n-pyref * {box-sizing: border-box; margin: 0; padding: 0;}
.n-pyref {font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.75; font-size: 15px; font-weight: 300;}
.n-pyref .page {max-width: 820px; margin: 0 auto; padding: 56px 32px 96px;}
.n-pyref .doc-title {font-family: 'Instrument Serif', serif; font-size: 38px; font-weight: 400; letter-spacing: -0.5px; margin-bottom: 6px;}
.n-pyref .doc-meta {font-size: 13px; color: var(--ink3); letter-spacing: 0.04em; margin-bottom: 8px;}
.n-pyref .doc-note {font-size: 13px; color: var(--ink3); font-style: italic; margin-bottom: 48px; border-left: 2px solid var(--border); padding-left: 12px;}
.n-pyref .topic {background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; margin-bottom: 20px;}
.n-pyref .topic-title {font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--accent2); letter-spacing: 0.04em; margin-bottom: 4px;}
.n-pyref .topic-subtitle {font-size: 13px; color: var(--ink3); margin-bottom: 14px;}
.n-pyref p.body {margin-bottom: 10px; color: var(--ink2); font-size: 14px;}
.n-pyref code {font-family: 'DM Mono', monospace; font-size: 13px; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--accent);}
.n-pyref pre {font-family: 'DM Mono', monospace; font-size: 12.5px;
    background: #1e1c1a; color: #d4cfc8;
    border-radius: 6px; padding: 16px 18px; line-height: 1.65; overflow-x: auto; margin: 10px 0;}
.n-pyref pre .kw {color: #c084fc;}
.n-pyref pre .fn {color: #60d4a8;}
.n-pyref pre .st {color: #f5c068;}
.n-pyref pre .cm {color: #6a6560; font-style: italic;}
.n-pyref pre .num {color: #7ec8e3;}
.n-pyref pre .cl {color: #fbbf24;}
.n-pyref pre .op {color: #f87171;}
.n-pyref .warn {background: #fff8f0; border-left: 3px solid var(--accent); border-radius: 0 5px 5px 0; padding: 10px 14px; margin: 10px 0; font-size: 13px; color: var(--ink2);}
.n-pyref .warn strong {color: var(--ink); font-weight: 500;}
.n-pyref .tip {background: #eef5ea; border-left: 3px solid var(--accent3); border-radius: 0 5px 5px 0; padding: 10px 14px; margin: 10px 0; font-size: 13px; color: var(--ink2);}
.n-pyref .tip strong {color: var(--ink); font-weight: 500;}
.n-pyref hr {border: none; border-top: 1px solid var(--border); margin: 32px 0;}
.n-pyref .section-label {font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400; color: var(--ink3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; margin-top: 36px;}
@media (max-width: 520px) {
.n-pyref .page {padding: 32px 18px 64px;}
.n-pyref .doc-title {font-size: 28px;}
}
.n-pyref-i1 { font-size:12px;color:var(--ink3);text-align:center; }


/* ===== guides/python-typing-guide.html  (scope .n-typing) ===== */
.n-typing * {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
.n-typing {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-typing .page-wrap {max-width: 780px;
    margin: 0 auto;
    padding: 56px 32px 96px;}
.n-typing .hero {border-bottom: 2px solid var(--ink);
    padding: 72px 0 48px;
    position: relative;
    overflow: hidden;}
.n-typing .hero::before {content: 'TYPE';
    position: absolute;
    right: -12px;
    top: 20px;
    font-family: 'Instrument Serif', serif;
    font-size: 180px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--border);
    letter-spacing: -8px;
    pointer-events: none;
    user-select: none;}
.n-typing .hero-label {font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;}
.n-typing .hero h1 {font-family: 'Instrument Serif', serif;
    font-size: clamp(42px, 7vw, 72px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    font-weight: 400;
    max-width: 640px;
    margin-bottom: 24px;}
.n-typing .hero h1 em {font-style: italic;
    color: var(--accent);}
.n-typing .hero-sub {font-size: 17px;
    color: var(--ink2);
    max-width: 520px;
    font-weight: 300;}
.n-typing .hero-meta {display: flex;
    gap: 32px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--border);}
.n-typing .hero-meta-item {font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--ink3);
    letter-spacing: 0.05em;}
.n-typing .hero-meta-item strong {display: block;
    color: var(--ink);
    font-size: 13px;
    margin-bottom: 2px;}
.n-typing .toc-rail {position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--bg);
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 3px solid var(--accent);}
.n-typing .toc-inner {display: inline-flex;
    gap: 0;
    padding: 0;}
.n-typing .toc-inner a {font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-muted);
    text-decoration: none;
    padding: 14px 20px;
    border-right: 1px solid var(--dark-border);
    transition: all 0.15s;
    display: inline-block;}
.n-typing .toc-inner a:hover, .n-typing .toc-inner a.active {color: var(--bg);
    background: var(--accent);}
.n-typing .chapter {padding-top: 64px;}
.n-typing .chapter-header {display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;}
.n-typing .chapter-num {font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-transform: uppercase;
    flex-shrink: 0;}
.n-typing .chapter-rule {height: 1px;
    flex: 1;
    background: var(--border);}
.n-typing h2 {font-family: 'Instrument Serif', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 20px;}
.n-typing h2 em {font-style: italic; color: var(--accent);}
.n-typing .chapter-intro {font-size: 17px;
    color: var(--ink2);
    border-left: 3px solid var(--accent);
    padding-left: 20px;
    margin-bottom: 48px;
    font-weight: 300;}
.n-typing h3 {font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 500;
    margin: 48px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;}
.n-typing h3 .tag {font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    vertical-align: middle;}
.n-typing .tag-essential {background: var(--accent);  color: var(--bg);}
.n-typing .tag-power {background: var(--accent2); color: var(--bg);}
.n-typing .tag-warning {background: var(--accent);  color: var(--bg);}
.n-typing p {margin-bottom: 16px;}
.n-typing p + p {margin-top: -4px;}
.n-typing strong {font-weight: 500;}
.n-typing .code-block {background: var(--dark-code);
    border-radius: 8px;
    margin: 24px 0;
    overflow: hidden;
    border: 1px solid var(--dark-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);}
.n-typing .code-header {background: var(--dark-header);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--dark-border);}
.n-typing .code-filename {font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--ink3);
    letter-spacing: 0.05em;}
.n-typing .code-dots {display: flex;
    gap: 6px;}
.n-typing .code-dots span {width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--dark-border);}
.n-typing .code-dots span:first-child {background: var(--accent);}
.n-typing .code-dots span:nth-child(2) {background: var(--mac-yellow);}
.n-typing .code-dots span:nth-child(3) {background: var(--accent3);}
.n-typing pre {padding: 20px;
    overflow-x: auto;
    font-family: 'DM Mono', monospace;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--dark-code-fg);}
.n-typing .kw {color: #c084fc;}
.n-typing .st {color: #f5c068;}
.n-typing .cm {color: #6a6560; font-style: italic;}
.n-typing .tp {color: #7ec8e3;}
.n-typing .fn {color: #60d4a8;}
.n-typing .nm {color: var(--dark-code-fg);}
.n-typing .op {color: var(--ink3);}
.n-typing .callout {border-radius: 6px;
    padding: 20px 24px;
    margin: 28px 0;
    border-left: 4px solid;}
.n-typing .callout-note {background: var(--accent2-bg); border-color: var(--accent2);}
.n-typing .callout-warn {background: var(--accent-bg);  border-color: var(--accent);}
.n-typing .callout-tip {background: var(--accent3-bg); border-color: var(--accent3);}
.n-typing .callout-label {font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.7;}
.n-typing .callout p:last-child {margin-bottom: 0;}
.n-typing .comparison {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;}
.n-typing .comparison-side {border-radius: 6px;
    overflow: hidden;}
.n-typing .comparison-label {font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 16px;}
.n-typing .comparison-side.before .comparison-label {background: rgba(200,75,47,0.15);  color: var(--accent);}
.n-typing .comparison-side.after  .comparison-label {background: rgba(42,122,79,0.15);  color: var(--accent3);}
.n-typing .comparison-side pre {padding: 16px;
    background: var(--dark-code);
    font-size: 12.5px;}
.n-typing .mental-model {background: var(--mental-bg);
    color: var(--mental-ink);
    border: 1px solid var(--mental-border);
    border-radius: 8px;
    padding: 32px 36px;
    margin: 32px 0;
    position: relative;
    overflow: hidden;}
.n-typing .mental-model::before {content: '"';
    position: absolute;
    right: 20px;
    top: -20px;
    font-family: 'Instrument Serif', serif;
    font-size: 200px;
    color: rgba(124,92,191,0.1);
    line-height: 1;
    pointer-events: none;}
.n-typing .mental-model-label {font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mental-border);
    margin-bottom: 16px;}
.n-typing .mental-model p {font-family: 'Instrument Serif', serif;
    font-size: 22px;
    line-height: 1.5;
    font-style: italic;
    color: var(--mental-ink);
    margin-bottom: 12px;}
.n-typing .mental-model p:last-child {margin: 0;}
.n-typing .mental-model .attribution {font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-size: 13px;
    color: var(--ink3);
    margin-top: 16px;}
.n-typing .pill-grid {display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;}
.n-typing .pill {font-family: 'DM Mono', monospace;
    font-size: 13px;
    background: var(--dark-code);
    color: #7ec8e3;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid var(--dark-border);}
.n-typing .steps {counter-reset: steps;
    list-style: none;
    margin: 24px 0;}
.n-typing .steps li {counter-increment: steps;
    padding: 16px 16px 16px 60px;
    position: relative;
    border-bottom: 1px solid var(--border);}
.n-typing .steps li:last-child {border-bottom: none;}
.n-typing .steps li::before {content: counter(steps);
    position: absolute;
    left: 16px;
    top: 16px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;}
.n-typing .steps li strong {display: block;
    margin-bottom: 4px;
    font-size: 15px;}
.n-typing .steps li p {margin: 0; font-size: 14px; color: var(--ink2);}
.n-typing .chapter-divider {text-align: center;
    margin: 80px 0 0;
    padding: 32px 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink3);
    letter-spacing: 0.1em;}
.n-typing code {font-family: 'DM Mono', monospace;
    font-size: 13px;
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--accent);
    border: 1px solid var(--border);}
.n-typing .gotcha-card {border: 1.5px solid var(--accent);
    border-radius: 8px;
    overflow: hidden;
    margin: 32px 0;}
.n-typing .gotcha-header {background: var(--accent);
    color: var(--bg);
    padding: 12px 20px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;}
.n-typing .gotcha-body {padding: 20px 24px;}
.n-typing .gotcha-body p:last-child {margin: 0;}
.n-typing .summary-table {width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;}
.n-typing .summary-table th {font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);}
.n-typing .summary-table td {padding: 10px 14px;
    border: 1px solid var(--border);
    vertical-align: top;
    font-size: 13px;
    color: var(--ink2);}
.n-typing .summary-table tr:nth-child(even) td {background: var(--code-bg);}
.n-typing .summary-table td code {font-size: 12px;}
.n-typing .reveal {opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;}
.n-typing .reveal.visible {opacity: 1;
    transform: none;}
.n-typing footer {margin-top: 100px;
    padding: 32px 0;
    border-top: 2px solid var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--ink3);}
@media (max-width: 640px) {
.n-typing .page-wrap {padding: 0 20px 80px;}
.n-typing .comparison {grid-template-columns: 1fr;}
.n-typing .hero-meta {flex-wrap: wrap; gap: 20px;}
.n-typing .hero::before {font-size: 100px;}
}


/* ===== guides/uv-guide.html  (scope .n-uv) ===== */
.n-uv * {margin: 0; padding: 0; box-sizing: border-box;}
.n-uv {background: var(--bg);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-uv header {padding: 60px 40px 50px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;}
.n-uv header::before {content: '';
    position: absolute;
    top: -60px; left: -60px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--accent-bg) 0%, transparent 70%);
    pointer-events: none;}
.n-uv header::after {content: '';
    position: absolute;
    bottom: -80px; right: 10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--accent2-bg) 0%, transparent 70%);
    pointer-events: none;}
.n-uv .badge {display: inline-block;
    background: var(--accent-bg);
    border: 1px solid var(--accent-bd);
    color: var(--accent);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;}
.n-uv h1 {font-family: 'Instrument Serif', serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 16px;}
.n-uv h1 span {color: var(--accent);}
.n-uv .subtitle {color: var(--ink3);
    font-size: 1rem;
    max-width: 500px;}
.n-uv .container {max-width: 780px;
    margin: 0 auto;
    padding: 0 32px;}
.n-uv section {padding: 52px 40px;
    border-bottom: 1px solid var(--border);}
.n-uv .section-label {font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;}
.n-uv h2 {font-family: 'Instrument Serif', serif;
    font-size: 1.7rem;
    font-weight: 400;
    margin-bottom: 28px;
    color: var(--ink);}
.n-uv h3 {font-size: 1rem;
    font-weight: 500;
    margin: 28px 0 14px;
    color: var(--accent3);}
.n-uv ul {list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;}
.n-uv ul li {padding-left: 20px;
    position: relative;
    color: var(--ink2);}
.n-uv ul li::before {content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 12px;
    top: 3px;}
.n-uv ul li strong {color: var(--ink);}
.n-uv ul.check li::before {content: '✓'; color: var(--accent3);}
.n-uv ul.warn li::before {content: '!'; color: var(--accent);}
.n-uv .concept-grid {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;}
.n-uv .concept-card {background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;}
.n-uv .concept-card::before {content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;}
.n-uv .concept-card.purple::before {background: var(--accent);}
.n-uv .concept-card.coral::before {background: var(--accent2);}
.n-uv .concept-card.teal::before {background: var(--accent3);}
.n-uv .concept-card.yellow::before {background: var(--accent);}
.n-uv .concept-card .card-title {font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;}
.n-uv .concept-card.purple .card-title {color: var(--accent);}
.n-uv .concept-card.coral  .card-title {color: var(--accent2);}
.n-uv .concept-card.teal   .card-title {color: var(--accent3);}
.n-uv .concept-card.yellow .card-title {color: var(--accent);}
.n-uv .concept-card p {font-size: 0.88rem;
    color: var(--ink3);
    line-height: 1.6;}
.n-uv .code-block {background: var(--dark-code);
    border: 1px solid var(--dark-border);
    border-radius: 10px;
    margin: 16px 0;
    overflow: hidden;}
.n-uv .code-block .code-header {display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid var(--dark-border);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--ink3);}
.n-uv .code-block pre {padding: 16px;
    overflow-x: auto;}
.n-uv .code-block code {font-family: 'DM Mono', monospace;
    font-size: 13px;
    line-height: 1.8;
    color: var(--dark-code-fg);
    white-space: pre;}
.n-uv code .c {color: #6a6560; font-style: italic;}
.n-uv code .k {color: #c084fc;}
.n-uv code .s {color: #f5c068;}
.n-uv code .f {color: #60d4a8;}
.n-uv table {width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.9rem;}
.n-uv th {background: var(--code-bg);
    padding: 12px 16px;
    text-align: left;
    color: var(--ink3);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);}
.n-uv td {padding: 12px 16px;
    border-bottom: 1px solid var(--border2);
    vertical-align: top;
    color: var(--ink2);}
.n-uv tr:last-child td {border-bottom: none;}
.n-uv tr:hover td {background: var(--accent-bg);}
.n-uv td code {font-family: 'DM Mono', monospace;
    font-size: 12px;
    background: var(--code-bg);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--accent3);}
.n-uv td .pip {color: var(--accent);  font-family: 'DM Mono', monospace; font-size: 12px;}
.n-uv td .uv {color: var(--accent3); font-family: 'DM Mono', monospace; font-size: 12px;}
.n-uv .flow {display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;}
.n-uv .flow-step {display: flex;
    align-items: flex-start;
    gap: 20px;}
.n-uv .flow-line {display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 40px;}
.n-uv .flow-dot {width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
    font-family: 'DM Mono', monospace;}
.n-uv .flow-connector {width: 2px;
    height: 28px;
    background: var(--border);
    margin: 2px 0;}
.n-uv .flow-body {padding: 8px 0 28px;
    flex: 1;}
.n-uv .flow-body .flow-title {font-weight: 500;
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--ink);}
.n-uv .flow-body .flow-desc {color: var(--ink3);
    font-size: 0.88rem;
    margin-bottom: 8px;}
.n-uv .flow-step:nth-child(1) .flow-dot {background: var(--accent-bg);  color: var(--accent);  border: 1px solid var(--accent-bd);}
.n-uv .flow-step:nth-child(3) .flow-dot {background: var(--accent2-bg); color: var(--accent2); border: 1px solid var(--accent2-bd);}
.n-uv .flow-step:nth-child(5) .flow-dot {background: var(--accent3-bg); color: var(--accent3); border: 1px solid var(--accent3-bd);}
.n-uv .flow-step:nth-child(7) .flow-dot {background: var(--accent-bg);  color: var(--accent);  border: 1px solid var(--accent-bd);}
.n-uv .flow-step:nth-child(9) .flow-dot {background: var(--accent2-bg); color: var(--accent2); border: 1px solid var(--accent2-bd);}
.n-uv .callout {border-radius: 10px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.9rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;}
.n-uv .callout.info {background: var(--accent-bg);  border: 1px solid var(--accent-bd);}
.n-uv .callout.warn {background: var(--accent2-bg); border: 1px solid var(--accent2-bd);}
.n-uv .callout.tip {background: var(--accent3-bg); border: 1px solid var(--accent3-bd);}
.n-uv .callout .icon {font-size: 1.1rem; margin-top: 1px; flex-shrink: 0;}
.n-uv .callout p {color: var(--ink3); line-height: 1.6;}
.n-uv .callout p strong {color: var(--ink);}
.n-uv .tree {background: var(--dark-code);
    border: 1px solid var(--dark-border);
    border-radius: 10px;
    padding: 20px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    line-height: 2;}
.n-uv .tree .dir {color: #f5c068;}
.n-uv .tree .file {color: var(--dark-code-fg);}
.n-uv .tree .note {color: #6a6560;}
.n-uv .tree .hi {color: #60d4a8;}
.n-uv p code, .n-uv li code {font-family: 'DM Mono', monospace;
    font-size: 12px;
    background: var(--code-bg);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--accent3);}
.n-uv p {margin-bottom: 12px;}
.n-uv .toc {background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 780px;
    margin: 0 auto;}
.n-uv .toc-title {font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ink3);
    text-transform: uppercase;
    margin-bottom: 16px;}
.n-uv .toc ol {list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;}
.n-uv .toc ol li {padding-left: 0;}
.n-uv .toc ol li::before {display: none;}
.n-uv .toc ol li a {color: var(--ink3);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;}
.n-uv .toc ol li a:hover {color: var(--accent);}
.n-uv .toc ol li a span {font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink3);}
.n-uv-i1 { padding: 32px 0 0; }
.n-uv-i2 { max-width:960px; margin: 0 auto; }
.n-uv-i3 { padding: 40px; border-top: 1px solid var(--border); text-align: center; }
.n-uv-i4 { color: var(--ink3); font-family: 'DM Mono', monospace; font-size: 12px; }
.n-uv-i5 { color: var(--accent); }


/* ===== guides/weight_initialization_guide 2.html  (scope .n-weightinit) ===== */
.n-weightinit * {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
.n-weightinit {background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  font-size: 15px;
  overflow-x: hidden;}
.n-weightinit .hero {min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;}
.n-weightinit .hero::before {content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 180%;
  background: radial-gradient(ellipse at 30% 50%, var(--accent-bg) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 60%, var(--accent2-bg) 0%, transparent 60%);
  pointer-events: none;}
.n-weightinit .hero-chip {display: inline-block;
  padding: 6px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  position: relative;}
.n-weightinit .hero h1 {font-family: 'Instrument Serif', serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  position: relative;
  color: var(--ink);}
.n-weightinit .hero h1 em {font-style: italic;
  color: var(--accent);}
.n-weightinit .hero p {font-size: 1.15rem;
  color: var(--ink3);
  max-width: 560px;
  position: relative;}
.n-weightinit .container {max-width: 780px;
  margin: 0 auto;
  padding: 0 32px 96px;}
.n-weightinit .section {margin-bottom: 5rem;}
.n-weightinit .section-label {font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;}
.n-weightinit .section h2 {font-family: 'Instrument Serif', serif;
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--ink);}
.n-weightinit .section p, .n-weightinit .section li {color: var(--ink2);
  font-size: 1.05rem;}
.n-weightinit .section p {margin-bottom: 1rem;}
.n-weightinit .analogy {background: var(--accent3-bg);
  border: 1px solid var(--accent3-bd);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  margin: 2rem 0;
  position: relative;}
.n-weightinit .analogy::before {content: '💡';
  font-size: 1.4rem;
  position: absolute;
  top: -14px; left: 20px;
  background: var(--bg);
  padding: 0 8px;}
.n-weightinit .analogy strong {color: var(--accent3);}
.n-weightinit .analogy p {color: var(--ink2); margin-bottom: 0.5rem;}
.n-weightinit .analogy p:last-child {margin-bottom: 0;}
.n-weightinit .problems-grid {display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;}
.n-weightinit .problem-card {background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color 0.3s;}
.n-weightinit .problem-card:hover {border-color: var(--accent);}
.n-weightinit .problem-card .icon {font-size: 1.8rem; margin-bottom: 0.6rem;}
.n-weightinit .problem-card h4 {font-size: 1rem; margin-bottom: 0.4rem; color: var(--accent);}
.n-weightinit .problem-card p {font-size: 0.9rem; color: var(--ink3); margin: 0;}
.n-weightinit .timeline {position: relative;
  margin: 2.5rem 0;
  padding-left: 36px;}
.n-weightinit .timeline::before {content: '';
  position: absolute;
  left: 12px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2), var(--accent3));
  border-radius: 2px;}
.n-weightinit .timeline-item {position: relative;
  margin-bottom: 2.5rem;}
.n-weightinit .timeline-item::before {content: '';
  position: absolute;
  left: -30px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent3);
  background: var(--bg);}
.n-weightinit .timeline-item:nth-child(1)::before {border-color: var(--accent);}
.n-weightinit .timeline-item:nth-child(2)::before {border-color: var(--accent2);}
.n-weightinit .timeline-item:nth-child(3)::before {border-color: var(--accent3);}
.n-weightinit .timeline-item .year {font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--accent2);
  letter-spacing: 0.06em;}
.n-weightinit .timeline-item h4 {font-family: 'Instrument Serif', serif;
  font-size: 1.3rem;
  margin: 0.2rem 0 0.4rem;
  color: var(--ink);}
.n-weightinit .timeline-item p {font-size: 0.95rem; color: var(--ink3);}
.n-weightinit .viz-container {background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;}
.n-weightinit .viz-container h3 {font-family: 'Instrument Serif', serif;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: var(--ink);}
.n-weightinit .viz-subtitle {color: var(--ink3); font-size: 0.9rem; margin-bottom: 1.2rem;}
.n-weightinit canvas {display: block;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;}
.n-weightinit .controls {display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;}
.n-weightinit .controls label {font-size: 0.85rem;
  color: var(--ink3);
  font-family: 'DM Mono', monospace;}
.n-weightinit .controls select, .n-weightinit .controls button {background: var(--code-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;}
.n-weightinit .controls select:hover, .n-weightinit .controls button:hover {border-color: var(--accent);}
.n-weightinit .controls button {background: var(--accent-bg);
  border-color: var(--accent-bd);
  color: var(--accent);}
.n-weightinit .derivation {background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2rem 0;}
.n-weightinit .derivation-header {padding: 1rem 1.5rem;
  background: var(--code-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;}
.n-weightinit .derivation-header h4 {font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: var(--accent2);}
.n-weightinit .derivation-header .toggle {font-size: 1.2rem;
  color: var(--ink3);
  transition: transform 0.3s;}
.n-weightinit .derivation-body {padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;}
.n-weightinit .derivation-body.open {max-height: 1200px;
  padding: 1.2rem 1.5rem;}
.n-weightinit .derivation-body .step {display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: flex-start;}
.n-weightinit .derivation-body .step-num {font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--accent3);
  background: var(--accent3-bg);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;}
.n-weightinit .derivation-body .step p {font-size: 0.92rem;
  color: var(--ink3);
  margin: 0;}
.n-weightinit .math {font-family: 'DM Mono', monospace;
  font-size: 0.88em;
  color: var(--accent2);
  background: var(--accent2-bg);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline;
  white-space: nowrap;}
.n-weightinit .math-block {font-family: 'DM Mono', monospace;
  font-size: 0.92rem;
  color: var(--accent2);
  background: var(--accent2-bg);
  padding: 12px 18px;
  border-radius: 8px;
  border-left: 3px solid var(--accent2);
  margin: 1rem 0;
  display: block;
  overflow-x: auto;}
.n-weightinit .comparison {background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2rem 0;}
.n-weightinit .comparison table {width: 100%;
  border-collapse: collapse;}
.n-weightinit .comparison th {background: var(--code-bg);
  padding: 12px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--ink3);
  border-bottom: 1px solid var(--border);}
.n-weightinit .comparison td {padding: 12px 16px;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border2);
  color: var(--ink3);}
.n-weightinit .comparison tr:last-child td {border-bottom: none;}
.n-weightinit .comparison td:first-child {color: var(--ink); font-weight: 500;}
.n-weightinit .tag {display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-family: 'DM Mono', monospace;}
.n-weightinit .tag-green {background: var(--accent3-bg); color: var(--accent3);}
.n-weightinit .tag-blue {background: var(--accent2-bg); color: var(--accent2);}
.n-weightinit .tag-purple {background: var(--mental-bg);  color: var(--mental-border);}
.n-weightinit .tag-yellow {background: var(--accent-bg);  color: var(--accent);}
.n-weightinit .cheat-sheet {background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;}
.n-weightinit .cheat-sheet h3 {font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  color: var(--ink);}
.n-weightinit .qa {margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);}
.n-weightinit .qa:last-child {border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.n-weightinit .qa-q {font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.3rem;
  font-size: 1rem;}
.n-weightinit .qa-q::before {content: 'Q:';
  color: var(--accent);
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  margin-right: 6px;}
.n-weightinit .qa-a {color: var(--ink3);
  font-size: 0.95rem;
  padding-left: 1.5rem;}
.n-weightinit .code-block {background: var(--dark-code);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  overflow-x: auto;
  margin: 1.2rem 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--dark-code-fg);}
.n-weightinit .code-block .comment {color: #6a6560; font-style: italic;}
.n-weightinit .code-block .fn {color: #60d4a8;}
.n-weightinit .code-block .str {color: #f5c068;}
.n-weightinit .code-block .kw {color: #c084fc;}
.n-weightinit .principle {text-align: center;
  padding: 2.5rem 2rem;
  margin: 2rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;}
.n-weightinit .principle::after {content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-bg), var(--accent3-bg));
  pointer-events: none;}
.n-weightinit .principle p {font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  color: var(--ink);
  position: relative;
  z-index: 1;}
.n-weightinit .principle p em {color: var(--accent3); font-style: italic;}
.n-weightinit .decision-tree-wrap {margin: 2rem 0;
  overflow-x: auto;}
.n-weightinit footer {text-align: center;
  padding: 3rem 2rem;
  font-size: 0.85rem;
  color: var(--ink3);
  border-top: 1px solid var(--border);}
@media (max-width: 600px) {
.n-weightinit .hero h1 {font-size: 2.2rem;}
.n-weightinit .controls {flex-direction: column; align-items: stretch;}
.n-weightinit .comparison {overflow-x: auto;}
.n-weightinit .comparison table {min-width: 500px;}
}
.n-weightinit-i1 { width:100%;max-width:800px; }
.n-weightinit-i2 { border-color: var(--accent2); }
.n-weightinit-i3 { color: var(--accent2); }
.n-weightinit-i4 { border-color: var(--accent); }
.n-weightinit-i5 { color: var(--accent); }
.n-weightinit-i6 { border-color: var(--purple); }
.n-weightinit-i7 { color: var(--purple); }
.n-weightinit-i8 { border-color: var(--warn); }
.n-weightinit-i9 { color: var(--warn); }


/* ===== ml-sys-design/fb-feed-ranking.html  (scope .n-fbfeed) ===== */
.n-fbfeed *, .n-fbfeed *::before, .n-fbfeed *::after {box-sizing: border-box; margin: 0; padding: 0;}
.n-fbfeed::before {content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;}
html {scroll-behavior: smooth;}
.n-fbfeed {background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;}
.n-fbfeed ::-webkit-scrollbar {width: 4px;}
.n-fbfeed ::-webkit-scrollbar-track {background: var(--bg);}
.n-fbfeed ::-webkit-scrollbar-thumb {background: var(--border); border-radius: 2px;}
.n-fbfeed .hero {position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 40px 56px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;}
.n-fbfeed .hero::before {content: '';
  position: absolute;
  top: -160px; right: -80px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(138,106,62,0.05) 0%, transparent 70%);
  pointer-events: none;}
.n-fbfeed .hero::after {content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);}
.n-fbfeed .hero-tag {font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;}
.n-fbfeed .hero-tag::before {content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;}
.n-fbfeed .hero h1 {font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.01em;
  max-width: 680px;
  margin-bottom: 20px;}
.n-fbfeed .hero-sub {font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.03em;}
.n-fbfeed .legend {display: flex;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;}
.n-fbfeed .legend-item {display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;}
.n-fbfeed .legend-dot {width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;}
.n-fbfeed .toc {position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22,22,24,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex;
  gap: 2px;
  overflow-x: auto;}
.n-fbfeed .toc a {display: block;
  padding: 12px 14px;
  color: var(--text-faint);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  letter-spacing: 0.04em;}
.n-fbfeed .toc a:hover {color: var(--text); border-bottom-color: var(--accent);}
.n-fbfeed .toc-separator {display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  margin: 8px 4px;}
.n-fbfeed .main {max-width: 900px; margin: 0 auto; padding: 48px 40px;}
.n-fbfeed .section {margin-bottom: 80px;
  scroll-margin-top: 56px;}
.n-fbfeed .section-header {display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);}
.n-fbfeed .section-num {font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;}
.n-fbfeed .section-title {font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;}
.n-fbfeed .summary-box {background: var(--accent-soft);
  border: 1px solid rgba(138,106,62,0.18);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin-bottom: 28px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.75;}
.n-fbfeed .summary-box strong {color: var(--text); font-weight: 500;}
.n-fbfeed .summary-label {font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;}
.n-fbfeed .grid-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;}
.n-fbfeed .grid-3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px;}
.n-fbfeed .grid-4 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;}
.n-fbfeed .card {background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;}
.n-fbfeed .card-title {font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  text-transform: uppercase;}
.n-fbfeed .card p, .n-fbfeed .card li {font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;}
.n-fbfeed .card ul {padding-left: 16px;}
.n-fbfeed .card li {margin-bottom: 5px;}
.n-fbfeed .card strong {color: var(--text); font-weight: 500;}
.n-fbfeed .tag {display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 9px;
  border-radius: 100px;
  margin-right: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.05em;}
.n-fbfeed .tag-cold {background: var(--rose-soft); color: var(--rose); border: 1px solid rgba(168,85,74,0.25);}
.n-fbfeed .tag-derive {background: var(--teal-soft); color: var(--teal); border: 1px solid rgba(53,122,110,0.25);}
.n-fbfeed .tag-interview {background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(138,106,62,0.25);}
.n-fbfeed .tag-revision {background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(42,95,143,0.25);}
.n-fbfeed .formula {background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  margin: 20px 0;
  overflow-x: auto;
  position: relative;}
.n-fbfeed .formula::before {content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(138,106,62,0.3), transparent 60%);}
.n-fbfeed .formula-main {font-size: 19px;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
  letter-spacing: 0.03em;}
.n-fbfeed .formula-legend {color: var(--text-muted); font-size: 12px; line-height: 2;}
.n-fbfeed .formula-legend span {color: var(--text);}
.n-fbfeed .pipeline {display: flex;
  align-items: center;
  gap: 0;
  margin: 18px 0;
  flex-wrap: wrap;}
.n-fbfeed .pipe-step {background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  min-width: 100px;}
.n-fbfeed .pipe-step .pipe-num {color: var(--accent); font-size: 9px; display: block; margin-bottom: 4px; letter-spacing: 0.1em;}
.n-fbfeed .pipe-step .pipe-name {color: var(--text); font-size: 12px; display: block; font-weight: 400;}
.n-fbfeed .pipe-step .pipe-detail {color: var(--text-faint); font-size: 10px; display: block; margin-top: 2px;}
.n-fbfeed .pipe-arrow {color: var(--text-faint); font-size: 16px; padding: 0 8px; flex-shrink: 0;}
.n-fbfeed .pipe-step.highlight {border-color: rgba(138,106,62,0.3); background: var(--accent-soft);}
.n-fbfeed .pipe-step.warn {border-color: rgba(168,85,74,0.3); background: var(--rose-soft);}
.n-fbfeed .pipe-step.good {border-color: rgba(53,122,110,0.3); background: var(--teal-soft);}
.n-fbfeed .table-wrap {overflow-x: auto; margin: 18px 0; border-radius: var(--radius); border: 1px solid var(--border);}
.n-fbfeed table {width: 100%; border-collapse: collapse; font-size: 13.5px;}
.n-fbfeed thead tr {background: var(--bg-subtle); border-bottom: 1px solid var(--border);}
.n-fbfeed th {padding: 11px 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;}
.n-fbfeed td {padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
  vertical-align: top;
  line-height: 1.6;}
.n-fbfeed td strong {color: var(--text); font-weight: 500;}
.n-fbfeed tr:hover td {background: var(--bg-elevated);}
.n-fbfeed tbody tr:last-child td {border-bottom: none;}
.n-fbfeed .code {background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: pre;
  overflow-x: auto;
  margin: 14px 0;
  line-height: 1.8;
  position: relative;}
.n-fbfeed .code::before {content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(138,106,62,0.2), transparent 50%);}
.n-fbfeed .code .kw {color: var(--accent);}
.n-fbfeed .code .val {color: var(--teal);}
.n-fbfeed .code .cmt {color: var(--text-faint);}
.n-fbfeed .code .hl {color: var(--accent); font-weight: 500;}
.n-fbfeed .tension-trio {display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin: 18px 0;}
.n-fbfeed .tension-node {background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;}
.n-fbfeed .tension-icon {font-size: 22px; margin-bottom: 10px; display: block;}
.n-fbfeed .tension-label {font-family: var(--font-serif); font-size: 15px; color: var(--text); margin-bottom: 6px;}
.n-fbfeed .tension-desc {font-size: 12px; color: var(--text-muted); line-height: 1.55;}
.n-fbfeed .tension-vs {display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rose);
  margin: 10px 0;
  gap: 10px;
  letter-spacing: 0.04em;}
.n-fbfeed .tension-vs::before, .n-fbfeed .tension-vs::after {content: '──';
  color: var(--border);
  opacity: 0.5;}
.n-fbfeed .funnel {margin: 22px 0;}
.n-fbfeed .funnel-step {display: flex; align-items: center; margin-bottom: 3px;}
.n-fbfeed .funnel-bar {height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  flex-shrink: 0;}
.n-fbfeed .funnel-meta {margin-left: 14px; font-size: 12px; color: var(--text-faint);}
.n-fbfeed .funnel-meta strong {color: var(--text-muted);}
.n-fbfeed .memory-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 22px;}
.n-fbfeed .memory-col {}
.n-fbfeed .memory-col-header {font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;}
.n-fbfeed .memory-col-header.cold {background: var(--rose-soft); color: var(--rose); border: 1px solid rgba(168,85,74,0.2); border-bottom: none;}
.n-fbfeed .memory-col-header.derive {background: var(--teal-soft); color: var(--teal); border: 1px solid rgba(53,122,110,0.2); border-bottom: none;}
.n-fbfeed .memory-col-header.revision {background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(42,95,143,0.2); border-bottom: none;}
.n-fbfeed .memory-items {background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px;}
.n-fbfeed .memory-item {font-size: 12.5px;
  color: var(--text-muted);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.55;}
.n-fbfeed .memory-item:last-child {border-bottom: none;}
.n-fbfeed .memory-item strong {color: var(--text); font-weight: 500;}
.n-fbfeed .interview-q {background: var(--accent-soft);
  border: 1px solid rgba(138,106,62,0.18);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 12px 0;}
.n-fbfeed .interview-q .q {font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;}
.n-fbfeed .interview-q .a {font-size: 13px; color: var(--text-muted); line-height: 1.65;}
.n-fbfeed .interview-q .a strong {color: var(--text); font-weight: 500;}
.n-fbfeed .pathology-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0;}
.n-fbfeed .pathology-card {background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;}
.n-fbfeed .pathology-card .p-num {font-family: var(--font-mono); font-size: 9.5px; color: var(--rose); margin-bottom: 5px; letter-spacing: 0.08em;}
.n-fbfeed .pathology-card .p-name {font-size: 13.5px; font-weight: 500; color: var(--text); margin-bottom: 7px;}
.n-fbfeed .pathology-card .p-desc {font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.55;}
.n-fbfeed .pathology-card .p-fix {font-size: 11.5px; color: var(--teal); font-family: var(--font-mono);}
.n-fbfeed .pathology-card .p-fix::before {content: '→ ';}
.n-fbfeed .timeline {margin: 18px 0;}
.n-fbfeed .tl-item {display: flex; gap: 18px; margin-bottom: 14px; align-items: flex-start;}
.n-fbfeed .tl-year {font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  min-width: 56px;
  padding-top: 2px;
  letter-spacing: 0.04em;}
.n-fbfeed .tl-dot {width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
  flex-shrink: 0;
  opacity: 0.7;}
.n-fbfeed .tl-content {font-size: 13.5px; color: var(--text-muted); line-height: 1.65;}
.n-fbfeed .tl-content strong {color: var(--text); font-weight: 500;}
.n-fbfeed .checklist {margin: 14px 0;}
.n-fbfeed .check-item {display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;}
.n-fbfeed .check-item:last-child {border-bottom: none;}
.n-fbfeed .check-box {width: 16px; height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--teal);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;}
.n-fbfeed .check-box:hover {border-color: var(--teal);}
.n-fbfeed .check-box.checked {background: var(--teal-soft); border-color: var(--teal);}
.n-fbfeed .arch-diagram {background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 18px 0;
  position: relative;
  overflow: hidden;}
.n-fbfeed .arch-diagram::before {content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(138,106,62,0.04), transparent 60%);
  pointer-events: none;}
.n-fbfeed .arch-layer {display: flex; align-items: center; gap: 14px; margin-bottom: 10px;}
.n-fbfeed .arch-box {border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 18px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);}
.n-fbfeed .arch-box.primary {border-color: rgba(138,106,62,0.3); color: var(--accent); background: var(--accent-soft);}
.n-fbfeed .arch-box.secondary {border-color: var(--border); color: var(--text-muted);}
.n-fbfeed .arch-box.storage {border-color: rgba(53,122,110,0.3); color: var(--teal); background: var(--teal-soft);}
.n-fbfeed .arch-connector {color: var(--text-faint); font-size: 16px;}
.n-fbfeed .divider {height: 1px;
  background: var(--border);
  margin: 72px 0;
  position: relative;}
.n-fbfeed .divider::after {content: '';
  position: absolute;
  left: 0; top: 0;
  width: 80px; height: 1px;
  background: var(--accent);
  opacity: 0.35;}
.n-fbfeed .part-divider {margin: 80px 0 48px;
  padding-top: 48px;
  border-top: 2px solid var(--border);}
.n-fbfeed .part-label {font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;}
.n-fbfeed .part-intro {font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 600px;}
.n-fbfeed .collapsible-header {cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;}
.n-fbfeed .collapsible-header:hover .section-title {color: var(--accent);}
.n-fbfeed .collapse-icon {font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  transition: transform 0.2s;}
.n-fbfeed .collapsible-body.collapsed {display: none;}
.n-fbfeed .section-divider {height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 48px 0;}
@media (max-width: 900px) {
.n-fbfeed .grid-2, .n-fbfeed .grid-3, .n-fbfeed .grid-4, .n-fbfeed .memory-grid, .n-fbfeed .tension-trio {grid-template-columns: 1fr;}
.n-fbfeed .pathology-grid {grid-template-columns: 1fr;}
.n-fbfeed .hero h1 {font-size: 1.9rem;}
.n-fbfeed .main {padding: 28px 20px;}
.n-fbfeed .hero {padding: 48px 20px 36px;}
.n-fbfeed .toc {padding: 0 16px;}
}
.n-fbfeed-i1 { font-size:16.5px;color:var(--text-muted);line-height:1.75;max-width:620px;margin-top:18px;font-weight:300; }
.n-fbfeed-i2 { margin-top:16px; }
.n-fbfeed-i3 { background:var(--cold); }
.n-fbfeed-i4 { background:var(--derive); }
.n-fbfeed-i5 { background:var(--revision); }
.n-fbfeed-i6 { background:var(--interview); }
.n-fbfeed-i7 { border-left:1px solid var(--border);margin-left:4px;padding-left:18px; }
.n-fbfeed-i8 { margin-bottom:0;border:none;flex:1; }
.n-fbfeed-i9 { border-color:var(--accent2); }
.n-fbfeed-i10 { border-color:var(--accent3); }
.n-fbfeed-i11 { margin-top:10px;font-size:11px;color:var(--accent3);font-family:var(--font-mono); }
.n-fbfeed-i12 { margin-top:8px; }
.n-fbfeed-i13 { margin-top:8px;color:var(--accent2);font-size:11px; }
.n-fbfeed-i14 { margin-bottom:20px; }
.n-fbfeed-i15 { margin-bottom:16px; }
.n-fbfeed-i16 { flex-wrap:wrap;gap:8px;margin-top:8px; }
.n-fbfeed-i17 { min-width:120px; }
.n-fbfeed-i18 { min-width:140px; }
.n-fbfeed-i19 { min-width:80px; }
.n-fbfeed-i20 { margin-top:8px;gap:8px; }
.n-fbfeed-i21 { background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:10px; }
.n-fbfeed-i22 { color:var(--accent);font-family:var(--font-mono);font-size:10px;margin-bottom:6px; }
.n-fbfeed-i23 { font-size:12px;color:var(--text2); }
.n-fbfeed-i24 { color:var(--accent3);font-family:var(--font-mono);font-size:10px;margin-bottom:6px; }
.n-fbfeed-i25 { font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-bottom:8px;letter-spacing:1px; }
.n-fbfeed-i26 { width:100%;background:linear-gradient(90deg,rgba(42,95,143,0.3),rgba(42,95,143,0.1)); }
.n-fbfeed-i27 { width:75%;background:linear-gradient(90deg,rgba(42,95,143,0.4),rgba(42,95,143,0.15)); }
.n-fbfeed-i28 { width:50%;background:linear-gradient(90deg,rgba(138,106,62,0.3),rgba(138,106,62,0.1)); }
.n-fbfeed-i29 { width:35%;background:linear-gradient(90deg,rgba(42,122,79,0.3),rgba(42,122,79,0.1)); }
.n-fbfeed-i30 { width:15%;background:linear-gradient(90deg,rgba(42,122,79,0.5),rgba(42,122,79,0.2)); }
.n-fbfeed-i31 { margin-bottom:8px; }
.n-fbfeed-i32 { font-family:var(--font-mono);font-size:11px;color:var(--text2); }
.n-fbfeed-i33 { grid-column:1/-1; }
.n-fbfeed-i34 { flex-direction:column;align-items:flex-start;gap:4px; }
.n-fbfeed-i35 { display:flex;align-items:center;gap:8px; }
.n-fbfeed-i36 { min-width:160px; }
.n-fbfeed-i37 { font-size:11px;color:var(--text3); }
.n-fbfeed-i38 { color:var(--text3);padding-left:20px; }
.n-fbfeed-i39 { margin-bottom:10px; }
.n-fbfeed-i40 { font-family:var(--font-mono);font-size:10px;color:var(--accent);margin-bottom:4px; }
.n-fbfeed-i41 { font-family:var(--font-mono);font-size:10px;color:var(--accent3);margin-bottom:4px; }
.n-fbfeed-i42 { font-family:var(--font-mono);font-size:10px;color:var(--accent2);margin-bottom:4px; }
.n-fbfeed-i43 { font-size:11px;color:var(--accent2);margin-top:4px; }
.n-fbfeed-i44 { margin-left:40px;margin-right:40px; }
.n-fbfeed-i45 { background:var(--accent3); }
.n-fbfeed-i46 { margin-bottom:12px; }
.n-fbfeed-i47 { font-family:var(--font-mono);font-size:10px;color:var(--text-faint);margin-bottom:6px; }
.n-fbfeed-i48 { font-family:var(--font-mono);font-size:10px;color:var(--accent);margin-bottom:6px; }
.n-fbfeed-i49 { margin:16px 0 8px; }
.n-fbfeed-i50 { background:rgba(168,85,74,0.05);border-color:rgba(168,85,74,0.2); }
.n-fbfeed-i51 { margin-top:20px;border-color:var(--accent4);background:rgba(138,106,62,0.03); }
.n-fbfeed-i52 { color:var(--accent4); }
.n-fbfeed-i53 { margin-top:60px;padding:24px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--text-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; }


/* ===== ml-sys-design/youtube-recsys.html  (scope .n-youtube) ===== */
.n-youtube *, .n-youtube *::before, .n-youtube *::after {box-sizing: border-box; margin: 0; padding: 0;}
.n-youtube::before {content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1000;
    opacity: 0.4;}
html {scroll-behavior: smooth;}
.n-youtube {background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.8;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;}
.n-youtube .page-glow {position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(138,106,62,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;}
.n-youtube .wrapper {position: relative;
    z-index: 1;
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 0 24px;}
.n-youtube .wrapper--wide {max-width: var(--wide-w);
    margin: 0 auto;
    padding: 0 24px;}
.n-youtube .hero {padding: 100px 0 72px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 80px;
    position: relative;}
.n-youtube .hero::after {content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);}
.n-youtube .hero-eyebrow {font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;}
.n-youtube .hero-eyebrow::before {content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;}
.n-youtube .hero h1 {font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.15;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 28px;
    max-width: 640px;}
.n-youtube .hero h1 em {font-style: italic;
    color: var(--accent);}
.n-youtube .hero-description {font-size: 17px;
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 580px;
    margin-bottom: 40px;}
.n-youtube .hero-meta {display: flex;
    gap: 32px;
    flex-wrap: wrap;}
.n-youtube .meta-item {display: flex;
    flex-direction: column;
    gap: 4px;}
.n-youtube .meta-label {font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);}
.n-youtube .meta-value {font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;}
.n-youtube .toc-wrapper {background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    margin-bottom: 80px;
    position: relative;
    overflow: hidden;}
.n-youtube .toc-wrapper::before {content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0.5;}
.n-youtube .toc-title {font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;}
.n-youtube .toc-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 32px;}
@media (max-width: 600px) {
.n-youtube .toc-grid {grid-template-columns: 1fr;}
}
.n-youtube .toc-item {display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13.5px;
    padding: 5px 0;
    transition: color 0.2s;
    border-bottom: 1px solid transparent;}
.n-youtube .toc-item:hover {color: var(--text);}
.n-youtube .toc-num {font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
    min-width: 28px;
    letter-spacing: 0.05em;}
.n-youtube .phase-header {margin: 96px 0 48px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
    position: relative;}
.n-youtube .phase-tag {font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    display: block;}
.n-youtube .phase-header h2 {font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);}
.n-youtube .section {margin-bottom: 72px;
    scroll-margin-top: 40px;}
.n-youtube .section h3 {font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -0.005em;}
.n-youtube .section h4 {font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 36px 0 14px;
    font-family: var(--font-sans);}
.n-youtube p {margin-bottom: 20px;
    color: var(--text);
    font-size: 16.5px;
    line-height: 1.82;}
.n-youtube p:last-child {margin-bottom: 0;}
.n-youtube strong {font-weight: 500;
    color: var(--text);}
.n-youtube em {font-style: italic;}
.n-youtube pre {background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 26px;
    overflow-x: auto;
    margin: 28px 0;
    position: relative;}
.n-youtube pre::before {content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(138,106,62,0.3), transparent 60%);}
.n-youtube code {font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.75;
    color: #4a4540;
    font-weight: 300;
    white-space: pre;}
.n-youtube p code, .n-youtube li code {font-family: var(--font-mono);
    font-size: 13px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--accent);
    font-weight: 400;}
.n-youtube .insight {background: var(--accent-soft);
    border: 1px solid rgba(138,106,62,0.18);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 20px 24px;
    margin: 28px 0;
    font-size: 15.5px;
    color: var(--text);
    line-height: 1.75;}
.n-youtube .insight-teal {background: var(--teal-soft);
    border-color: rgba(53,122,110,0.18);
    border-left-color: var(--teal);}
.n-youtube .insight-rose {background: var(--rose-soft);
    border-color: rgba(168,85,74,0.18);
    border-left-color: var(--rose);}
.n-youtube .insight-blue {background: var(--blue-soft);
    border-color: rgba(42,95,143,0.18);
    border-left-color: var(--blue);}
.n-youtube .table-wrapper {overflow-x: auto;
    margin: 28px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);}
.n-youtube table {width: 100%;
    border-collapse: collapse;
    font-size: 14px;}
.n-youtube thead tr {background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);}
.n-youtube th {padding: 12px 18px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;}
.n-youtube td {padding: 11px 18px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-muted);
    line-height: 1.6;
    vertical-align: top;}
.n-youtube td:first-child {color: var(--text);
    font-weight: 400;}
.n-youtube tbody tr:last-child td {border-bottom: none;}
.n-youtube tbody tr:hover td {background: var(--bg-elevated);}
.n-youtube .mini-note {background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;}
.n-youtube .mini-note::before {content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), transparent 50%);}
.n-youtube .mini-note-title {font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;}
.n-youtube .mini-note-title::after {content: '';
    flex: 1;
    height: 1px;
    background: var(--border);}
.n-youtube .memory-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0;}
@media (max-width: 600px) {
.n-youtube .memory-grid {grid-template-columns: 1fr;}
}
.n-youtube .memory-card {background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;}
.n-youtube .memory-card.cold {border-top: 2px solid var(--rose);}
.n-youtube .memory-card.derive {border-top: 2px solid var(--teal);}
.n-youtube .memory-card-label {font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;}
.n-youtube .memory-card.cold .memory-card-label {color: var(--rose);}
.n-youtube .memory-card.derive .memory-card-label {color: var(--teal);}
.n-youtube .memory-card ul {list-style: none;
    padding: 0;}
.n-youtube .memory-card li {font-size: 13px;
    color: var(--text-muted);
    padding: 4px 0;
    line-height: 1.6;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    gap: 8px;
    align-items: flex-start;}
.n-youtube .memory-card li:last-child {border-bottom: none;}
.n-youtube .memory-card li::before {content: '→';
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0.4;
    flex-shrink: 0;
    margin-top: 2px;}
.n-youtube .arch-diagram {background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin: 32px 0;
    text-align: center;
    position: relative;
    overflow: hidden;}
.n-youtube .arch-diagram::before {content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(138,106,62,0.04), transparent 60%);
    pointer-events: none;}
.n-youtube .arch-box {display: inline-block;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 22px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;}
.n-youtube .arch-box.accent {border-color: rgba(138,106,62,0.3);
    background: var(--accent-soft);
    color: var(--accent);}
.n-youtube .arch-box.teal {border-color: rgba(53,122,110,0.3);
    background: var(--teal-soft);
    color: var(--teal);}
.n-youtube .arch-arrow {display: block;
    text-align: center;
    color: var(--text-faint);
    font-size: 18px;
    line-height: 1;
    margin: 6px 0;}
.n-youtube .arch-label {font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    margin: 4px 0 8px;
    display: block;}
.n-youtube .arch-row {display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    flex-wrap: wrap;}
.n-youtube .formula {background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 28px;
    margin: 24px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--text);
    letter-spacing: 0.02em;
    position: relative;}
.n-youtube .formula .formula-label {position: absolute;
    top: 8px;
    right: 14px;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);}
.n-youtube .compare-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0;}
@media (max-width: 580px) {
.n-youtube .compare-grid {grid-template-columns: 1fr;}
}
.n-youtube .compare-card {background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;}
.n-youtube .compare-card-title {font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 12px;}
.n-youtube .compare-card ul {list-style: none;
    padding: 0;}
.n-youtube .compare-card li {font-size: 13.5px;
    color: var(--text-muted);
    padding: 5px 0;
    line-height: 1.5;
    border-bottom: 1px solid var(--border-soft);}
.n-youtube .compare-card li:last-child {border-bottom: none;}
.n-youtube .tier-badge {display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 16px;}
.n-youtube .tier-1 {background: rgba(168,85,74,0.12); color: var(--rose); border: 1px solid rgba(168,85,74,0.2);}
.n-youtube .tier-2 {background: rgba(138,106,62,0.12); color: var(--accent); border: 1px solid rgba(138,106,62,0.2);}
.n-youtube .tier-3 {background: rgba(53,122,110,0.12); color: var(--teal); border: 1px solid rgba(53,122,110,0.2);}
.n-youtube .tier-4 {background: rgba(42,95,143,0.12); color: var(--blue); border: 1px solid rgba(42,95,143,0.2);}
.n-youtube .divider {height: 1px;
    background: var(--border);
    margin: 64px 0;
    position: relative;}
.n-youtube .divider::after {content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 1px;
    background: var(--accent);
    opacity: 0.4;}
.n-youtube .cheat-sheet {background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 40px 0;}
.n-youtube .cheat-row {display: grid;
    grid-template-columns: 260px 1fr;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.15s;}
.n-youtube .cheat-row:last-child {border-bottom: none;}
.n-youtube .cheat-row:hover {background: var(--bg-subtle);}
.n-youtube .cheat-q {padding: 14px 20px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
    border-right: 1px solid var(--border-soft);
    line-height: 1.6;}
.n-youtube .cheat-a {padding: 14px 20px;
    font-size: 13px;
    color: var(--text-faint);
    line-height: 1.65;
    font-family: var(--font-mono);
    font-weight: 300;}
@media (max-width: 640px) {
.n-youtube .cheat-row {grid-template-columns: 1fr;}
.n-youtube .cheat-q {border-right: none; border-bottom: 1px solid var(--border-soft);}
}
.n-youtube .timeline {position: relative;
    padding-left: 28px;
    margin: 28px 0;}
.n-youtube .timeline::before {content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    opacity: 0.3;}
.n-youtube .timeline-item {position: relative;
    margin-bottom: 28px;}
.n-youtube .timeline-item::before {content: '';
    position: absolute;
    left: -25px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
    border: 1px solid var(--bg);}
.n-youtube .timeline-year {font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 6px;}
.n-youtube .timeline-content {font-size: 14px;
    color: var(--text-muted);
    line-height: 1.65;}
.n-youtube ul.feature-list {list-style: none;
    padding: 0;
    margin: 16px 0;}
.n-youtube ul.feature-list li {padding: 6px 0 6px 20px;
    position: relative;
    font-size: 15.5px;
    color: var(--text-muted);
    line-height: 1.7;
    border-bottom: 1px solid var(--border-soft);}
.n-youtube ul.feature-list li:last-child {border-bottom: none;}
.n-youtube ul.feature-list li::before {content: '–';
    position: absolute;
    left: 0;
    color: var(--accent);
    opacity: 0.6;
    font-family: var(--font-mono);}
.n-youtube footer {margin-top: 120px;
    padding: 48px 0;
    border-top: 1px solid var(--border);
    text-align: center;}
.n-youtube .footer-text {font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-faint);}
.n-youtube .progress-bar {position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--teal));
    z-index: 999;
    width: 0%;
    transition: width 0.1s linear;
    opacity: 0.8;}
.n-youtube .back-top {position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, background 0.2s;
    z-index: 100;
    color: var(--text-muted);
    font-size: 16px;
    text-decoration: none;}
.n-youtube .back-top:hover {background: var(--bg-subtle); color: var(--text);}
.n-youtube .back-top.visible {opacity: 1;}
@keyframes n-youtube-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
.n-youtube .hero > * {animation: n-youtube-fadeUp 0.6s ease both;}
.n-youtube .hero > *:nth-child(1) {animation-delay: 0.05s;}
.n-youtube .hero > *:nth-child(2) {animation-delay: 0.12s;}
.n-youtube .hero > *:nth-child(3) {animation-delay: 0.18s;}
.n-youtube .hero > *:nth-child(4) {animation-delay: 0.24s;}
@media (max-width: 768px) {
.n-youtube {font-size: 16px;}
.n-youtube .hero {padding: 64px 0 48px;}
.n-youtube .hero h1 {font-size: 2rem;}
.n-youtube pre {padding: 16px 18px;}
.n-youtube pre code {font-size: 12px;}
.n-youtube .arch-diagram {padding: 20px 16px;}
}
.n-youtube-i1 { margin-bottom:16px; }
.n-youtube-i2 { font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px; }
.n-youtube-i3 { margin:80px 0 0;padding:48px 0 32px;border-top:2px solid var(--border);position:relative; }
.n-youtube-i4 { font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px; }
.n-youtube-i5 { font-size:15px;color:var(--text-muted);line-height:1.75;max-width:600px; }
.n-youtube-i6 { margin-top:48px;padding-top:0;border-top:none; }


/* ===== portfolio/index.html  (scope .n-portfolio) ===== */
.n-portfolio * {box-sizing: border-box; margin: 0; padding: 0;}
.n-portfolio {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-portfolio .container {max-width: 760px;
    margin: 0 auto;
    padding: 0 32px;}
.n-portfolio .topbar {background: #1a1816;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;}
.n-portfolio .topbar .container {display: flex;
    align-items: center;
    justify-content: space-between;}
.n-portfolio .topbar-brand {font-family: 'Instrument Serif', serif;
    font-size: 18px;
    color: #d4cfc8;
    text-decoration: none;
    letter-spacing: -0.2px;}
.n-portfolio .topbar-nav {display: flex;
    gap: 28px;
    list-style: none;}
.n-portfolio .topbar-nav a {color: #8a8278;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: color 0.15s;}
.n-portfolio .topbar-nav a:hover {color: #d4cfc8;}
.n-portfolio .hero {padding: 72px 0 68px;
    border-bottom: 1px solid var(--border);}
.n-portfolio .availability {display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    color: var(--ink3);
    margin-bottom: 28px;
    letter-spacing: 0.02em;}
.n-portfolio .dot {width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent3);
    flex-shrink: 0;}
.n-portfolio .hero-inner {display: flex;
    align-items: flex-start;
    gap: 40px;}
.n-portfolio .avatar {width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: 4px;}
.n-portfolio .hero-text h1 {font-family: 'Instrument Serif', serif;
    font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.6px;
    line-height: 1.08;
    margin-bottom: 8px;
    color: var(--ink);}
.n-portfolio .hero-role {font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink3);
    margin-bottom: 22px;}
.n-portfolio .hero-bio {font-size: 16px;
    color: var(--ink2);
    line-height: 1.72;
    max-width: 530px;
    margin-bottom: 30px;
    font-weight: 300;}
.n-portfolio .cta-row {display: flex;
    gap: 10px;
    flex-wrap: wrap;}
.n-portfolio .btn {display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all 0.15s;
    line-height: 1;}
.n-portfolio .btn-primary {background: var(--accent);
    color: #fffefb;}
.n-portfolio .btn-primary:hover {background: #a83c22;}
.n-portfolio .btn-secondary {border: 1px solid var(--border);
    color: var(--ink2);
    background: var(--surface);}
.n-portfolio .btn-secondary:hover {border-color: var(--ink3); color: var(--ink);}
.n-portfolio .section {padding: 64px 0;
    border-bottom: 1px solid var(--border);}
.n-portfolio .section:last-of-type {border-bottom: none;}
.n-portfolio .section-label {font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;}
.n-portfolio .section-title {font-family: 'Instrument Serif', serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin-bottom: 14px;
    color: var(--ink);}
.n-portfolio .section-body {color: var(--ink2);
    font-size: 15px;
    line-height: 1.75;
    max-width: 600px;}
.n-portfolio .section-body a {color: var(--accent);
    text-decoration: none;}
.n-portfolio .section-body a:hover {text-decoration: underline;}
.n-portfolio .services-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    margin-top: 32px;}
.n-portfolio .service-card {background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 26px;}
.n-portfolio .service-card h3 {font-family: 'Instrument Serif', serif;
    font-size: 19px;
    font-weight: 400;
    margin-bottom: 8px;
    color: var(--ink);}
.n-portfolio .service-card p {font-size: 13.5px;
    color: var(--ink3);
    line-height: 1.65;}
.n-portfolio .service-num {font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.05em;
    margin-bottom: 12px;}
.n-portfolio .skill-groups {margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;}
.n-portfolio .skill-row {display: flex;
    align-items: baseline;
    gap: 20px;}
.n-portfolio .skill-group-label {font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink3);
    min-width: 140px;
    flex-shrink: 0;
    padding-top: 2px;}
.n-portfolio .tags {display: flex;
    flex-wrap: wrap;
    gap: 7px;}
.n-portfolio .tag {font-family: 'DM Mono', monospace;
    font-size: 12px;
    background: var(--code-bg);
    color: var(--ink2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 10px;}
.n-portfolio .projects-list {display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;}
.n-portfolio .project-card {background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 26px 28px;
    transition: border-color 0.15s;}
.n-portfolio .project-card:hover {border-color: var(--ink3);}
.n-portfolio .project-header {display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;}
.n-portfolio .project-title {font-family: 'Instrument Serif', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--ink);}
.n-portfolio .project-link {font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    margin-top: 4px;
    flex-shrink: 0;}
.n-portfolio .project-link:hover {text-decoration: underline;}
.n-portfolio .project-desc {font-size: 14px;
    color: var(--ink2);
    line-height: 1.7;
    margin-bottom: 14px;}
.n-portfolio .project-stack {display: flex;
    flex-wrap: wrap;
    gap: 6px;}
.n-portfolio .stack-tag {font-family: 'DM Mono', monospace;
    font-size: 11px;
    background: var(--code-bg);
    color: var(--ink3);
    border-radius: 3px;
    padding: 3px 8px;}
.n-portfolio .writing-list {margin-top: 28px;}
.n-portfolio .writing-item {display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border2);
    text-decoration: none;
    color: var(--ink);
    transition: color 0.15s;}
.n-portfolio .writing-item:last-child {border-bottom: none;}
.n-portfolio .writing-item:hover {color: var(--accent);}
.n-portfolio .writing-item-title {font-size: 15px; font-weight: 400;}
.n-portfolio .writing-item-meta {font-size: 12px;
    color: var(--ink3);
    white-space: nowrap;
    font-family: 'DM Mono', monospace;}
.n-portfolio .contact-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 32px;}
.n-portfolio .contact-card {border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 22px;
    text-decoration: none;
    color: var(--ink);
    background: var(--surface);
    transition: border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 5px;}
.n-portfolio .contact-card:hover {border-color: var(--accent);}
.n-portfolio .contact-card-label {font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink3);}
.n-portfolio .contact-card-value {font-size: 14px;
    color: var(--accent);}
.n-portfolio .footer {background: #1a1816;
    padding: 30px 0;
    text-align: center;
    font-size: 13px;
    color: #5a5550;}
.n-portfolio .footer a {color: #8a8278; text-decoration: none;}
.n-portfolio .footer a:hover {color: #d4cfc8;}
@media (max-width: 600px) {
.n-portfolio .container {padding: 0 20px;}
.n-portfolio .topbar-nav {display: none;}
.n-portfolio .hero {padding: 52px 0 48px;}
.n-portfolio .hero-inner {flex-direction: column; gap: 20px;}
.n-portfolio .hero-text h1 {font-size: 36px;}
.n-portfolio .hero-bio {font-size: 15px;}
.n-portfolio .section {padding: 48px 0;}
.n-portfolio .section-title {font-size: 26px;}
.n-portfolio .skill-row {flex-direction: column; gap: 8px;}
.n-portfolio .skill-group-label {min-width: unset;}
}
.n-portfolio-i1 { margin-bottom: 12px; }
.n-portfolio-i2 { font-size: 12px; }


/* ===== portfolio/terms.html  (scope .n-terms) ===== */
.n-terms * {box-sizing: border-box; margin: 0; padding: 0;}
.n-terms {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-terms .container {max-width: 720px; margin: 0 auto; padding: 0 32px;}
.n-terms .topbar {background: #1a1816; padding: 14px 0;}
.n-terms .topbar .container {display: flex; align-items: center; justify-content: space-between;}
.n-terms .topbar-brand {font-family: 'Instrument Serif', serif; font-size: 18px; color: #d4cfc8; text-decoration: none;}
.n-terms .topbar-back {font-size: 13px; color: #8a8278; text-decoration: none; transition: color 0.15s;}
.n-terms .topbar-back:hover {color: #d4cfc8;}
.n-terms .doc {padding: 56px 0 96px;}
.n-terms .doc-label {font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;}
.n-terms .doc-title {font-family: 'Instrument Serif', serif; font-size: 38px;
    font-weight: 400; letter-spacing: -0.4px; margin-bottom: 8px; color: var(--ink);}
.n-terms .doc-meta {font-size: 13px; color: var(--ink3); margin-bottom: 48px; font-family: 'DM Mono', monospace;}
.n-terms .section {margin-bottom: 40px;}
.n-terms .section h2 {font-family: 'Instrument Serif', serif; font-size: 22px;
    font-weight: 400; margin-bottom: 12px; color: var(--ink);
    padding-bottom: 8px; border-bottom: 1px solid var(--border);}
.n-terms .section p {color: var(--ink2); margin-bottom: 12px;}
.n-terms .section p:last-child {margin-bottom: 0;}
.n-terms .section ul {color: var(--ink2); padding-left: 20px; margin-bottom: 12px;}
.n-terms .section ul li {margin-bottom: 6px;}
.n-terms strong {color: var(--ink); font-weight: 500;}
.n-terms a {color: var(--accent); text-decoration: none;}
.n-terms a:hover {text-decoration: underline;}
.n-terms .legal-footer {border-top: 1px solid var(--border); padding: 32px 0;
    display: flex; flex-wrap: wrap; gap: 16px 32px;
    font-size: 13px; color: var(--ink3);}
.n-terms .legal-footer a {color: var(--ink3); text-decoration: none;}
.n-terms .legal-footer a:hover {color: var(--accent);}
@media (max-width: 600px) {
.n-terms .container {padding: 0 20px;}
.n-terms .doc-title {font-size: 28px;}
.n-terms .doc {padding: 40px 0 64px;}
}


/* ===== portfolio/refund.html  (scope .n-refund) ===== */
.n-refund * {box-sizing: border-box; margin: 0; padding: 0;}
.n-refund {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-refund .container {max-width: 720px; margin: 0 auto; padding: 0 32px;}
.n-refund .topbar {background: #1a1816; padding: 14px 0;}
.n-refund .topbar .container {display: flex; align-items: center; justify-content: space-between;}
.n-refund .topbar-brand {font-family: 'Instrument Serif', serif; font-size: 18px; color: #d4cfc8; text-decoration: none;}
.n-refund .topbar-back {font-size: 13px; color: #8a8278; text-decoration: none; transition: color 0.15s;}
.n-refund .topbar-back:hover {color: #d4cfc8;}
.n-refund .doc {padding: 56px 0 96px;}
.n-refund .doc-label {font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;}
.n-refund .doc-title {font-family: 'Instrument Serif', serif; font-size: 38px;
    font-weight: 400; letter-spacing: -0.4px; margin-bottom: 8px; color: var(--ink);}
.n-refund .doc-meta {font-size: 13px; color: var(--ink3); margin-bottom: 48px; font-family: 'DM Mono', monospace;}
.n-refund .section {margin-bottom: 40px;}
.n-refund .section h2 {font-family: 'Instrument Serif', serif; font-size: 22px;
    font-weight: 400; margin-bottom: 12px; color: var(--ink);
    padding-bottom: 8px; border-bottom: 1px solid var(--border);}
.n-refund .section p {color: var(--ink2); margin-bottom: 12px;}
.n-refund .section p:last-child {margin-bottom: 0;}
.n-refund .section ul {color: var(--ink2); padding-left: 20px; margin-bottom: 12px;}
.n-refund .section ul li {margin-bottom: 6px;}
.n-refund strong {color: var(--ink); font-weight: 500;}
.n-refund a {color: var(--accent); text-decoration: none;}
.n-refund a:hover {text-decoration: underline;}
.n-refund .summary-table {width: 100%; border-collapse: collapse;
    margin: 20px 0 12px; font-size: 14px;}
.n-refund .summary-table th {text-align: left; padding: 10px 14px;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink3); border-bottom: 1px solid var(--border);
    background: var(--surface);}
.n-refund .summary-table td {padding: 12px 14px; color: var(--ink2);
    border-bottom: 1px solid var(--border2);
    vertical-align: top;}
.n-refund .summary-table tr:last-child td {border-bottom: none;}
.n-refund .badge {display: inline-block; font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 4px; font-family: 'DM Mono', monospace;}
.n-refund .badge-full {background: #d4f0e0; color: #1a5c36;}
.n-refund .badge-partial {background: #fef3cd; color: #7a5000;}
.n-refund .badge-none {background: #fde8e4; color: #7a2018;}
.n-refund .legal-footer {border-top: 1px solid var(--border); padding: 32px 0;
    display: flex; flex-wrap: wrap; gap: 16px 32px;
    font-size: 13px; color: var(--ink3);}
.n-refund .legal-footer a {color: var(--ink3); text-decoration: none;}
.n-refund .legal-footer a:hover {color: var(--accent);}
@media (max-width: 600px) {
.n-refund .container {padding: 0 20px;}
.n-refund .doc-title {font-size: 28px;}
.n-refund .doc {padding: 40px 0 64px;}
.n-refund .summary-table {font-size: 13px;}
.n-refund .summary-table th, .n-refund .summary-table td {padding: 8px 10px;}
}


/* ===== portfolio/privacy.html  (scope .n-privacy) ===== */
.n-privacy * {box-sizing: border-box; margin: 0; padding: 0;}
.n-privacy {font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 15px;
    font-weight: 300;}
.n-privacy .container {max-width: 720px; margin: 0 auto; padding: 0 32px;}
.n-privacy .topbar {background: #1a1816; padding: 14px 0;}
.n-privacy .topbar .container {display: flex; align-items: center; justify-content: space-between;}
.n-privacy .topbar-brand {font-family: 'Instrument Serif', serif; font-size: 18px; color: #d4cfc8; text-decoration: none;}
.n-privacy .topbar-back {font-size: 13px; color: #8a8278; text-decoration: none; transition: color 0.15s;}
.n-privacy .topbar-back:hover {color: #d4cfc8;}
.n-privacy .doc {padding: 56px 0 96px;}
.n-privacy .doc-label {font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;}
.n-privacy .doc-title {font-family: 'Instrument Serif', serif; font-size: 38px;
    font-weight: 400; letter-spacing: -0.4px; margin-bottom: 8px; color: var(--ink);}
.n-privacy .doc-meta {font-size: 13px; color: var(--ink3); margin-bottom: 48px; font-family: 'DM Mono', monospace;}
.n-privacy .section {margin-bottom: 40px;}
.n-privacy .section h2 {font-family: 'Instrument Serif', serif; font-size: 22px;
    font-weight: 400; margin-bottom: 12px; color: var(--ink);
    padding-bottom: 8px; border-bottom: 1px solid var(--border);}
.n-privacy .section p {color: var(--ink2); margin-bottom: 12px;}
.n-privacy .section p:last-child {margin-bottom: 0;}
.n-privacy .section ul {color: var(--ink2); padding-left: 20px; margin-bottom: 12px;}
.n-privacy .section ul li {margin-bottom: 6px;}
.n-privacy strong {color: var(--ink); font-weight: 500;}
.n-privacy a {color: var(--accent); text-decoration: none;}
.n-privacy a:hover {text-decoration: underline;}
.n-privacy .legal-footer {border-top: 1px solid var(--border); padding: 32px 0;
    display: flex; flex-wrap: wrap; gap: 16px 32px;
    font-size: 13px; color: var(--ink3);}
.n-privacy .legal-footer a {color: var(--ink3); text-decoration: none;}
.n-privacy .legal-footer a:hover {color: var(--accent);}
@media (max-width: 600px) {
.n-privacy .container {padding: 0 20px;}
.n-privacy .doc-title {font-size: 28px;}
.n-privacy .doc {padding: 40px 0 64px;}
}