:root{
  --bg:#14161a;
  --bg-panel:#1b1e24;
  --bg-panel-alt:#20242c;
  --border:#2a2f38;
  --text:#ecebe4;
  --text-dim:#8b909b;
  --amber:#e8a33d;
  --cyan:#4fc3c0;
  --violet:#9c82d8;
  --raster:#6e93be;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --display:'Space Grotesk',ui-sans-serif,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,sans-serif;

  /* Aliases for the shared learning-materials toolkit (viz.js / widgets.css).
     See learning-materials/docs/INTEGRATION.md for the full contract. */
  --text-muted: var(--text-dim);
  --accent: var(--amber);
  --bg-elevated: var(--bg-panel);
  --radius: 10px;
  --viz-a: var(--violet);
  --viz-b: var(--cyan);
  --viz-grid: var(--border);
  --viz-bg: var(--bg-panel-alt);
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg,#14161a);min-height:100%;}
body{font-family:var(--body);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;}
.page{max-width:860px;margin:0 auto;padding:56px 24px 100px;background:var(--bg,#14161a);color:var(--text,#ecebe4);}

/* HERO */
.viewport-readout{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase;display:flex;gap:18px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:32px;border-bottom:1px solid var(--border);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase;margin-bottom:16px;}
h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,50px);line-height:1.08;margin:0 0 20px;letter-spacing:-0.01em;}
.subtitle{font-size:17px;color:var(--text-dim);max-width:640px;}

/* PANELS */
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:24px 28px;margin:40px 0;}
.panel-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;}
.panel ul{margin:0;padding-left:20px;}
.panel li{margin-bottom:9px;}
.panel li:last-child{margin-bottom:0;}
.panel.glossary .panel-label{color:var(--violet);}
.panel.practice .panel-label{color:var(--amber);}
.panel.practice p{margin:0;font-size:15.5px;color:var(--text);}
.panel.practice p+p{margin-top:12px;}
.glossary dl{margin:0;}
.glossary dt{font-family:var(--mono);font-weight:500;color:var(--text);margin-top:14px;font-size:14.5px;}
.glossary dt:first-child{margin-top:0;}
.glossary dd{margin:2px 0 0;color:var(--text-dim);font-size:14.5px;}

/* SECTIONS */
.section{margin:60px 0;}
.section-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;}
.section h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,3vw,29px);margin:0 0 18px;}
.section p{margin:0 0 16px;font-size:16px;}
.section ul.compact{margin:0 0 16px;padding-left:20px;}
.section ul.compact li{margin-bottom:8px;}
.term-amber{color:var(--amber);font-weight:600;}
.term-cyan{color:var(--cyan);font-weight:600;}
.term-violet{color:var(--violet);font-weight:600;}

/* FORMULAS */
.formula{font-family:var(--mono);background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin:22px 0;font-size:15px;color:var(--amber);text-align:center;letter-spacing:.02em;overflow-x:auto;line-height:1.8;}
.formula .sub{display:block;margin-top:8px;font-size:12.5px;color:var(--text-dim);letter-spacing:0;white-space:normal;}
.formula .vec{color:var(--cyan);font-weight:700;cursor:help;border-bottom:1px dotted var(--cyan);}
/* Akcja przypisana do wzoru, wewnątrz jego ramki. Wrapper jest blokiem, więc
   kreska ma szerokość widocznej ramki, nie przewijanego wzoru; sticky trzyma
   przycisk w kadrze, gdy długi wzór przewija się poziomo. */
.formula .formula-action{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);position:sticky;left:0;}
.formula .reveal-btn{line-height:1.4;}
.vec-tooltip{position:fixed;z-index:200;display:none;background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--text);max-width:280px;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.4);}

/* DIAGRAM FRAME */
.diagram-frame{position:relative;border:1px solid var(--border);border-radius:10px;background:var(--bg-panel);padding:16px 16px 20px;margin:26px 0;}
.diagram-hud{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;}
.diagram-frame svg{width:100%;height:auto;display:block;}
.diagram-caption{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:14px;text-align:center;}

/* NEXT / CLOSING */
.next{border-top:1px solid var(--border);margin-top:70px;padding-top:32px;}
.closing{margin-top:80px;padding-top:40px;border-top:1px solid var(--border);text-align:center;}
.closing p{font-size:17px;color:var(--text-dim);max-width:560px;margin:0 auto 16px;}
.closing .sign{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--amber);text-transform:uppercase;margin-top:24px;}

/* WORKED EXAMPLES */
.worked{background:#15171b;border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:6px;padding:18px 22px;margin:18px 0;font-family:var(--mono);font-size:13.5px;overflow-x:auto;}
.worked .wlabel{color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;margin-bottom:14px;}
.worked .step{margin:0 0 10px;color:var(--text-dim);}
.worked .step:last-child{margin-bottom:0;}
.worked .v{color:var(--text);}
.worked .result{color:var(--amber);font-weight:600;}
.worked .check{color:var(--text-dim);font-style:italic;font-size:12.5px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.worked .step .k{color:var(--violet);}
.worked .step .v{color:var(--text);}

/* SERIES NAV (ACES / Perlin multi-part dodatki) */
.series-nav{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;margin:20px 0 0;}
.series-nav span,.series-nav a{padding:5px 12px;border:1px solid var(--border);border-radius:14px;color:var(--text-dim);text-decoration:none;transition:border-color .15s,color .15s;}
.series-nav a:hover{color:var(--amber);border-color:var(--amber);}
.series-nav .current{color:var(--amber);border-color:var(--amber);}

.note{font-size:13px;color:var(--text-dim);font-style:italic;}

/* LEGEND CHIPS (interaktywny diagram w Rozdziale 1) */
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px;}
.chip{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;padding:6px 13px;border:1px solid var(--border);border-radius:20px;cursor:pointer;background:var(--bg-panel-alt);color:var(--text);transition:opacity .2s,border-color .2s;user-select:none;}
.chip:hover{border-color:var(--text-dim);}
.chip.off{opacity:.35;}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.ray-off{opacity:.1;transition:opacity .25s;}
.ray-group{transition:opacity .25s;}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* SPIS TREŚCI (index.html) */
.part{margin:56px 0;}
.part-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--cyan);text-transform:uppercase;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.part-label.violet{color:var(--violet);}
.part-label.amber{color:var(--amber);}
.index-list{display:flex;flex-direction:column;}
.index-row{display:block;padding:14px 4px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);transition:padding-left .15s,border-color .15s;}
.index-list .index-row:first-child{border-top:1px solid var(--border);}
.index-row:hover{padding-left:10px;border-color:var(--amber);}
.index-num{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:4px;}
.index-title{font-size:15.5px;font-weight:500;display:block;}
.index-hook{font-size:13.5px;color:var(--text-dim);display:block;margin-top:4px;max-width:640px;}
.footer-note{margin-top:70px;padding-top:28px;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-dim);}

/* IDŹ GŁĘBIEJ (rozdziały/dodatki → dodatki którę je rozwijają) */
.deeper{border-top:1px solid var(--border);margin-top:56px;padding-top:24px;}
.deeper-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--violet);text-transform:uppercase;margin-bottom:12px;}
.deeper a{display:block;color:var(--text);text-decoration:none;font-size:14.5px;margin-bottom:8px;border-bottom:1px dotted var(--border);padding-bottom:8px;}
.deeper a:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0;}
.deeper a:hover{color:var(--amber);}
.inline-deeper{display:inline-block;margin:8px 0 4px;padding:5px 14px;border:1px solid var(--border);border-radius:14px;font-family:var(--mono);font-size:12px;color:var(--violet);text-decoration:none;transition:border-color .15s,color .15s;}
.inline-deeper:hover{border-color:var(--amber);color:var(--amber);}

/* POMOCNIK OBLICZENIOWY */
.toc{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:20px 28px;margin:36px 0;}
.toc ol{margin:0;padding-left:22px;}
.toc li{margin-bottom:8px;font-size:15px;}
.toc a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--text-dim);}
.toc a:hover{color:var(--amber);}
.chapter-head{margin:70px 0 30px;padding-bottom:16px;border-bottom:2px solid var(--border);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.chapter-head .num{font-family:var(--mono);font-size:13px;color:var(--amber);letter-spacing:.1em;}
.chapter-head h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,3vw,27px);margin:0;}
.subsection{margin:36px 0;}
.subsection h3{font-family:var(--display);font-weight:600;font-size:18px;margin:0 0 14px;color:var(--text);}
.subsection p{margin:0 0 14px;font-size:15.5px;}
.exercise{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin:16px 0;}
.exercise .elabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--violet);text-transform:uppercase;margin-bottom:10px;}
.exercise .given{font-family:var(--mono);font-size:14px;color:var(--text);margin-bottom:12px;}
.reveal-btn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--amber);background:none;border:1px solid var(--amber);border-radius:20px;padding:6px 16px;cursor:pointer;transition:background .2s;}
.reveal-btn:hover{background:rgba(232,163,61,0.12);}
.answer{display:none;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);font-family:var(--mono);font-size:13.5px;color:var(--cyan);}
.answer.shown{display:block;}
.answer .line{margin-bottom:6px;color:var(--text-dim);}
.answer .line .res{color:var(--cyan);font-weight:600;}

/* NAWIGACJA GÓRNA (sticky pasek — rozdziały / dodatki / pomocnik) */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--bg-panel);border-bottom:1px solid var(--border);}
.topnav__brand{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--text);white-space:nowrap;}
.topnav__brand span{color:var(--amber);}
.topnav__links{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:12.5px;flex-wrap:wrap;}
.topnav__links a{color:var(--text-dim);text-decoration:none;transition:color .15s;white-space:nowrap;}
.topnav__links a:hover{color:var(--amber);}

/* NAWIGACJA DOLNA (rozdziały / dodatki / pomocnik) */
.site-nav{border-top:1px solid var(--border);margin-top:70px;padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;}
.site-nav a{color:var(--text-dim);text-decoration:none;transition:color .15s;}
.site-nav a:hover{color:var(--amber);}
.site-nav.chapter-nav{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;}
.site-nav.chapter-nav a.nav-prev{grid-column:1;text-align:left;}
.site-nav.chapter-nav a.nav-toc{grid-column:2;text-align:center;}
.site-nav.chapter-nav a.nav-next{grid-column:3;text-align:right;}

/* SUWAKI PRZY DIAGRAMACH (interaktywne wersje statycznych porównań) */
.diagram-controls{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--mono);font-size:12.5px;color:var(--text-dim);flex-wrap:wrap;}
.diagram-controls input[type=range]{flex:1;min-width:120px;accent-color:var(--amber);}
.diagram-controls .value-readout{color:var(--amber);white-space:nowrap;}

/* MODAL (wyjaśnienie trudnych wzorów krok po kroku) */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,11,13,.75);z-index:100;padding:24px;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-panel{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;max-width:640px;max-height:85vh;overflow-y:auto;padding:32px 32px 28px;}
.modal-panel h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,3vw,23px);margin:0 0 18px;color:var(--text);}
.modal-panel p{margin:0 0 14px;font-size:15px;color:var(--text);}
.modal-panel p:last-child{margin-bottom:0;}
.modal-panel ul{margin:0 0 14px;padding-left:20px;}
.modal-panel li{margin-bottom:10px;font-size:15px;}
.modal-panel strong{color:var(--amber);}
.modal-panel .formula{margin:16px 0;}
.modal-panel em{color:var(--text-dim);}
.modal-panel a{color:var(--cyan);}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg-panel-alt);color:var(--text-dim);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.modal-close:hover{color:var(--amber);border-color:var(--amber);}

/* MAPA DODATKÓW (epilog) */
.map-group{margin:0 0 28px;}
.map-group:last-child{margin-bottom:0;}
.map-group a{display:block;color:var(--text);text-decoration:none;font-size:14.5px;padding:8px 0;border-bottom:1px dotted var(--border);}
.map-group a:last-child{border-bottom:none;}
.map-group a:hover{color:var(--amber);}
.map-group .m-num{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);letter-spacing:.04em;margin-right:10px;}

/* FOKUS KLAWIATURY (wcześniej brak — nawigacja Tab-em była niewidoczna) */
a:focus-visible,button:focus-visible,input:focus-visible,
.vec:focus-visible,.chip:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

/* DATA TABLE (porownania: przestrzenie barw, Arnold vs RenderMan, wartosci referencyjne) */
.table-frame{border:1px solid var(--border);border-radius:10px;background:var(--bg-panel);padding:6px;margin:26px 0;overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px;}
.data-table th,.data-table td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
.data-table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;font-weight:500;}
.data-table td{color:var(--text);font-size:13.5px;}
.data-table td.num,.data-table th.num{font-family:var(--mono);text-align:right;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--bg-panel-alt);}
.table-caption{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:10px 4px 0;}

/* WĄSKIE EKRANY */
@media (max-width:560px){
  .topnav{padding:12px 16px;gap:10px;}
  .topnav__brand{font-size:11px;}
  .topnav__links{gap:14px;font-size:11.5px;}
  .page{padding:36px 16px 80px;}
  .site-nav.chapter-nav{grid-template-columns:1fr;gap:14px;}
  .site-nav.chapter-nav a.nav-prev,
  .site-nav.chapter-nav a.nav-toc,
  .site-nav.chapter-nav a.nav-next{grid-column:1;text-align:left;}
  .viewport-readout{gap:10px;}
  .panel{padding:20px 18px;margin:32px 0;}
  .diagram-frame{padding:12px 12px 16px;}
  .table-frame{padding:4px;}
  .section{margin:44px 0;}
  .modal-panel{padding:26px 20px 22px;}
}