/* =========================================================================
   NFV — redesign, wersja 2
   Trzy systemy, każdy z jedną regułą. Nic poza nimi.

   1. KSZTAŁT   — jedno ścięcie rogu, ten sam token, każdy obraz i każda ramka.
   2. RUCH      — jedno wejście, jedno easing, trzy czasy. Zawsze w górę.
   3. SIATKA    — skala 8 px, jedna szerokość wiersza, jeden rytm sekcji.

   Retro nie wraca przez drugi font. Wraca przez geometrię (ścięcia, siatka
   pikseli), przez warstwę CRT na materiale z gier i przez jeden wąsko
   zdefiniowany wyjątek typograficzny: numery sekcji.
   ========================================================================= */

@font-face{font-family:"Inter Local";src:url("assets/inter.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Press Start Local";src:url("assets/press-start-2p.woff2") format("woff2");font-display:swap}

:root{
  --paper:#f3ead3;
  --paper-2:#efe4c8;
  --card:#fbf6e9;
  --ink:#221d17;
  --ink-2:#4a4034;
  --muted:#8a7a5e;
  --line:#ddd0ae;
  --line-2:#c9b98f;
  --accent:#b8251a;
  --gold:#a8791f;
  --console:#171310;

  /* 1 · KSZTAŁT — jedna wartość, nadpisywana tylko przy skali */
  --cut:14px;
  --cut-sm:8px;
  --shape:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --shape-sm:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));

  /* 2 · RUCH — jedno easing, trzy czasy, jeden dystans */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-micro:160ms;   /* hover, focus, przełączniki */
  --t-enter:420ms;   /* wejście elementu w ekran */
  --t-data:900ms;    /* liczby i paski, czyli treść */
  --rise:14px;       /* zawsze w górę, zawsze tyle samo */

  /* 3 · SIATKA — skala 8 px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --measure:64ch;

  /* TYPOGRAFIA — osiem stopni i trzy grubości. Nic poza tym.
     Wcześniej było 25 rozmiarów i 7 grubości, w tym pary typu 13 i 13,5,
     które nie niosą żadnej informacji, a rozmywają rytm. */
  --fs-1:10px;   /* mikroetykiety, font pikselowy */
  --fs-2:12px;   /* brwi, podpisy, nagłówki tabel */
  --fs-3:14px;   /* tabele, meta, noty */
  --fs-4:16px;   /* tekst pomocniczy */
  --fs-5:18px;   /* tekst główny, lead sekcji */
  --fs-6:22px;   /* h3 i liczby w wierszach */
  --fs-7:clamp(26px,3vw,34px);   /* h2 */
  --fs-8:clamp(40px,6vw,60px);   /* h1 */
  --fw-reg:400; --fw-med:500; --fw-bold:800;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 14px 34px -24px rgba(40,28,10,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter Local",Inter,system-ui,sans-serif;
  font-size:var(--fs-5);line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
p{margin:0}
b,strong{font-weight:var(--fw-med)}
a{color:inherit}

/* === 1 · KSZTAŁT ==========================================================
   Jedna klasa. Każdy obraz i każda ramka w dokumencie ją dostaje.
   Nie ma obrazu bez ściętego rogu. */
.cut{clip-path:var(--shape)}
.cut-sm{clip-path:var(--shape-sm)}

/* Ramka wokół materiału z gier: ścięcie + cienka linia + warstwa CRT.
   Linia jest osobnym elementem pod spodem, bo clip-path ucina border. */
.frame{position:relative;background:var(--line-2);padding:1px;clip-path:var(--shape);margin:0}
.frame > img{clip-path:var(--shape);display:block;width:100%}
/* Skanlinie tylko na materiale z gier. Nigdzie indziej. */
.frame::after{
  content:"";position:absolute;inset:1px;pointer-events:none;clip-path:var(--shape);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  opacity:.45;mix-blend-mode:multiply;
}

.proofbar{
  position:sticky;top:0;z-index:60;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;
  padding:9px clamp(16px,3vw,32px);background:var(--console);color:#f0e7d2;font-size:var(--fs-3);
}
.proofbar b{font-family:"Press Start Local",monospace;font-size:var(--fs-1);letter-spacing:.06em;
  background:var(--accent);color:#fff;padding:5px 8px}
.proofbar span{color:#b9ac91}
.proofbar a{margin-left:auto;color:#f0e7d2;text-underline-offset:3px}

.layout{display:grid;grid-template-columns:1fr;align-items:start}
@media (min-width:1080px){.layout{grid-template-columns:520px minmax(0,1fr)}}

/* === LEWY PANEL — zachowany ============================================== */
.console{
  background:var(--paper-2);border-right:1px solid var(--line);
  padding:var(--s3) 9px var(--s4) 10px;display:grid;gap:var(--s3);align-content:start;
  /* siatka pikseli — retro bez dodatkowego fontu */
  background-image:
    linear-gradient(rgba(160,140,100,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,140,100,.10) 1px,transparent 1px);
  background-size:24px 24px;
}
@media (min-width:1080px){
  .console{position:sticky;top:0;height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding-bottom:16px;scrollbar-width:thin}
  .console > *{flex-shrink:0}
  .console > .game-shell{margin-top:auto}
}

.console-brand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2);align-items:center}
.console-brand img{width:104px;height:112px;object-fit:contain}
.console-brand > #hide-game{grid-column:1/-1;justify-self:center;background:#fff;border-color:#000;box-shadow:0 0 0 1px #000;color:#000}

.contact-footer{position:relative;margin:64px 0 24px;padding:32px 0;border-top:2px solid var(--accent);color:#B63424;font-family:"Press Start Local",monospace;font-size:12px;line-height:2.2;overflow-wrap:anywhere}
.contact-footer .contact-heading{font-size:16px;margin:0 0 16px}
.contact-footer address{display:grid;gap:6px;font:inherit}
.contact-line{display:flex;align-items:center;gap:16px;min-height:36px}
.contact-pixel{width:24px;height:24px;flex:0 0 24px;fill:currentColor;animation:contact-pixel-bob 3s steps(3,end) infinite;animation-delay:var(--icon-delay)}
.contact-line:hover .contact-pixel{animation-duration:.6s}
@keyframes contact-pixel-bob{0%,75%,100%{transform:translateY(0)}25%,50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.contact-pixel{animation:none!important}}
.contact-footer a{color:inherit;text-decoration:underline;text-underline-offset:5px;justify-self:start}
.contact-footer a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.contact-retro{float:right;display:grid;grid-template-columns:40px auto 40px;align-items:center;gap:14px;margin:0 0 24px 24px}
.contact-retro .footer-portrait{grid-column:1/-1;grid-row:2;width:156px;height:168px;object-fit:contain;justify-self:center}
.contact-retro svg{width:40px;height:40px;overflow:visible}
.retro-dots{animation:retro-dots 1s steps(2,end) infinite}
.chomp-top{transform-origin:16px 16px;animation:chomp-top .65s steps(2,end) infinite}
.chomp-bottom{transform-origin:16px 16px;animation:chomp-bottom .65s steps(2,end) infinite}
.retro-invader{animation:invader-hop 2s steps(4,end) infinite}
@keyframes chomp-top{50%{transform:rotate(-35deg)}}
@keyframes chomp-bottom{50%{transform:rotate(35deg)}}
@keyframes invader-hop{50%{transform:translateY(-8px)}}
@keyframes retro-dots{50%{opacity:.3}}
@media(max-width:600px){.contact-retro{float:none;margin:0 0 24px;justify-content:flex-start}.contact-footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){.contact-retro *{animation:none!important}}
.console-brand span{display:block;font-family:"Press Start Local",monospace;font-size:calc(var(--fs-1) + 1px);
  letter-spacing:.06em;color:var(--accent);line-height:1.6}
.console-brand b{display:block;font-size:var(--fs-3);color:var(--ink-2);font-weight:500}

.console-status{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);align-items:center;
  background:var(--card);border:1px solid var(--line);padding:var(--s2);clip-path:var(--shape-sm);
}
.status-index{text-align:center;line-height:1}
.status-index span{display:block;font-size:var(--fs-1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.status-index strong{display:block;font-family:"Press Start Local",monospace;font-size:var(--fs-5);color:var(--accent);margin:7px 0 4px}
.status-index small{font-size:var(--fs-1);color:var(--muted)}
.status-copy span{display:block;font-size:var(--fs-1);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.status-copy b{display:block;font-size:var(--fs-3);font-weight:500;line-height:1.3;margin-top:3px}
.status-nav{display:grid;gap:5px}
.status-nav button{width:30px;height:26px;cursor:pointer;font:inherit;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink-2);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.status-nav button:hover{border-color:var(--accent);color:var(--accent)}

.mission-map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) 10px}
.mission-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.route-base{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:4 5}
.route-progress{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-dasharray:1200;stroke-dashoffset:1050;transition:stroke-dashoffset var(--t-data) var(--ease)}
.route-runner{
  position:absolute;width:13px;height:15px;left:0;top:0;pointer-events:none;background:var(--accent);
  clip-path:polygon(38% 0,62% 0,62% 22%,100% 40%,100% 62%,62% 52%,62% 74%,78% 100%,52% 100%,50% 82%,48% 100%,22% 100%,38% 74%,38% 52%,0 62%,0 40%,38% 22%);
  transition:transform var(--t-enter) var(--ease);
}
.node{
  position:relative;z-index:1;grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 1);
  display:grid;gap:2px;text-align:left;cursor:pointer;font:inherit;
  background:var(--card);border:1px solid var(--line);padding:10px;clip-path:var(--shape-sm);
  transition:background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.node .node-icon{width:32px;height:32px;position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--sec,var(--accent));pointer-events:none}
.node{padding-right:60px}
.node.is-active .node-icon{color:#fff}
.node b{font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--accent)}
.node span{font-size:var(--fs-3);font-weight:500;line-height:1.2}
.node i{font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal}
.node:hover{border-color:var(--line-2)}
.node.is-active{background:var(--ink);border-color:var(--ink)}
.node.is-active b{color:#f0c04a}
.node.is-active span{color:#fbf6e9}
.node.is-active i{color:#b9ac91}

.game-shell{width:100%;max-width:500px;justify-self:center;background:transparent;padding:0;color:#f0e7d2}
.game-shell header{display:flex;justify-content:space-between;padding:0 10px;font-family:"Press Start Local",monospace;font-size:var(--fs-4);letter-spacing:.05em}
.game-shell header span{color:#8a7a5e}
.game-screen{margin-top:10px;aspect-ratio:4/3;background:#7ea8c4;display:grid;place-items:center;clip-path:var(--shape-sm)}
.game-screen p{font-family:"Press Start Local",monospace;font-size:var(--fs-4);color:#12314a}

/* === PRAWA STRONA ========================================================= */
main{padding:var(--s5) clamp(20px,4vw,72px) var(--s7);max-width:1180px}

.eyebrow{
  font-size:var(--fs-2);font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;display:flex;align-items:center;gap:10px;
}
/* Kreska przed brwią — ten sam znak w każdej sekcji, buduje rytm */
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:0 0 auto}

.doc-head{padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.doc-head h1{font-size:var(--fs-8);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.doc-head .lead{margin-top:var(--s3);max-width:var(--measure);font-size:var(--fs-5);color:var(--ink-2)}

.legend{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:780px}
.legend li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  background:var(--card);border:1px solid var(--line);padding:12px;clip-path:var(--shape-sm)}
.legend b{display:block;font-size:var(--fs-3);font-weight:500}
.legend span span{display:block;font-size:var(--fs-2);color:var(--muted);line-height:1.45}

.mk{width:11px;height:11px;margin-top:5px;flex:0 0 auto;display:inline-block}
.mk-doc{background:var(--accent)}
.mk-plan{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}
.mk-hyp{background:transparent;box-shadow:inset 0 0 0 2px var(--line-2)}

.note{margin-top:var(--s3);max-width:var(--measure);
  border-left:3px solid var(--accent);padding:2px 0 2px 14px;color:var(--ink-2)}

.facts{margin:var(--s4) 0 0;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border:1px solid var(--line);clip-path:var(--shape-sm)}
.facts div{background:var(--card);padding:var(--s2) var(--s3)}
.facts dt{font-size:var(--fs-2);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:6px 0 0;font-size:var(--fs-7);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.section{padding:var(--s7) 0;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;margin-bottom:var(--s5)}
/* HUD sekcji — ikona pikselowa + numer w foncie pikselowym.
   To jedyne miejsce po prawej, gdzie font pikselowy ma prawo wystąpić.
   Osiem sztuk, wszystkie identyczne co do rozmiaru i budowy. */
.hud{
  display:grid;justify-items:center;gap:8px;
  padding:10px 8px;min-width:64px;
  background:var(--paper-2);border:1px solid var(--line);clip-path:var(--shape-sm);
}
.hud .px{width:22px;height:22px;color:var(--accent);image-rendering:pixelated}
.hud b{font-family:"Press Start Local",monospace;font-size:var(--fs-2);color:var(--ink-2);letter-spacing:.02em}

/* Ikony z zestawu: zawsze na siatce 16, zawsze currentColor, zawsze pixelated. */
.px{display:block;image-rendering:pixelated}
.section h2{font-size:var(--fs-7);font-weight:700}
#p1-b4{border-left:4px solid var(--sec);background:color-mix(in srgb,var(--sec) 5%,var(--card))}
#p1-b4 .card-body > ul{display:grid;gap:12px;padding-left:22px}
#p1-b4 .card-body > ul > li::marker{color:var(--sec)}
#p2-b5 .card-body > ul > li{font-size:16px}
#p2-b5 .card-body > ul > li > strong{font-size:18px}
#p1-b1 .study-subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin:12px 0 0;padding:0 0 0 18px;list-style:disc}
#p1-b1 .study-subjects > li{display:list-item;min-width:0;margin:0;padding:0;border:0;background:none;clip-path:none;font-size:16px;font-weight:400;line-height:1.5;overflow-wrap:break-word}
#p1-b1 .study-subjects > li::marker{color:var(--sec)}
@media(max-width:650px){#p1-b1 .study-subjects{grid-template-columns:1fr}}
#p1-crm-learning .card-body > p:not(.micro),#p1-crm-learning li{font-size:16px}
#p8-b3 .waterfall li > span{font-size:17px}
#p8-b4 .service-comparison th{font-size:15px}
#om-meg li{font-size:16px}
#oppsummering .summary-list b{font-size:17px}
#oppsummering .summary-list em{font-size:11px}
#oppsummering .summary-list li > span{font-size:16px}
#p6-b2 .tags li,#p6-b3 .meta-long li,#p6-b3 .meta-long li > span,#p6-b3 .meta-long li > b{font-size:16px}
#p7-b1 .micro,#p7-b1 h3,#p7-b1 h3 .idx,#p7-b1 .gate-name,#p7-b1 .risk-requirements summary{font-size:18px}
#p7-b1 .risk-list p{font-size:16px}
#p7-b1 .risk-requirements-content .gate-name{font-size:15px}
#p7-b1 .risk-requirements-content .callout{font-size:18px;font-weight:500}
#p7-b1 .risk-requirements-content .gate > li{padding-left:16px;padding-right:12px}
#p7-b1 .risk-requirements-content .callout{margin-top:24px;padding-left:16px}
#p4-b3 .micro,#p4-b3 .gate-name{font-size:15px}
#p5-b2 .micro,#p5-b2 .gate-name{font-size:15px}
#p4-b4 .plan-outline{font-size:16px;line-height:1.6;padding-left:1.3em}
#p4-b4 .plan-outline li{margin:8px 0}
#p4-b4 .plan-outline-title{margin-top:40px}
#p4-b4 .plan-outline > li{margin:20px 0}
#p4-b4 .plan-outline ul{list-style:disc;margin:8px 0 0;padding-left:1.3em}
/* Marker-scoped reading sizes. Weight-500 text receives +1px in medium-text-size.js. */
#presentation-purpose + p,#personal-purpose + p,.hero-brief li,
#p1-b2 .card-body > ul > li,#p1-b4 .card-body > ul > li,
#p2-b4 .card-body > ul > li{font-size:16px}
#p1-b2 .card-body > ul > li > strong{font-size:16px;font-weight:500}
#p2-b5 .big > span{font-size:16px}
#p2-b5 .sales-experience-row{display:grid;gap:12px;margin:16px 0}
#p2-b5 .sales-experience-row .big{display:flex;align-items:center;gap:16px;margin:0}
#p2-b5 .sales-experience-row .sales-number{white-space:nowrap;flex-shrink:0;font-size:var(--fs-4)}
#p2-b5 .sales-experience-row .big b{font-size:40px;line-height:1.2}
#p2-b5 .sales-experience-description{font-size:16px;font-weight:400;margin:0}
#p2-b6 .meta-long li,#p2-b6 .meta-long li > span,#p2-b6 .meta-long li > b{font-size:16px}
#p4-b2 .stack h3{font-size:18px}
#p4-b2 .stack li > p:not(.micro){font-size:16px}
/* Number-only adjustments requested by section markers. */
#p1-b3 .gate-val b,#p2-b5 .big b,#p4-b3 .gate-val b,
#p5-b2 .gate-val b,#p8-b1 .big b,#model .model-big b{font-weight:700}
#p2-b5 .big b,#p8-b1 .big b{font-weight:600}
#p4-b1 dd[data-count="72"]{font-weight:var(--fw-med)}
#p5-b2 .gate-val{white-space:nowrap}
@media(max-width:620px){#p5-b2 .gate-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px}#p5-b2 .card-body{min-width:0}}
.section-lead{margin-top:var(--s2);max-width:var(--measure);color:var(--ink-2);font-size:var(--fs-5)}

.cards{display:grid;gap:var(--s3)}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.card{
  background:var(--card);border:1px solid var(--line);clip-path:var(--shape);
  box-shadow:var(--shadow);
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 20px 40px -24px rgba(40,28,10,.6)}
.card-wide{margin-top:var(--s3)}
.card > .frame{border-bottom:1px solid var(--line)}
.card > .frame img{aspect-ratio:16/10;object-fit:cover}
.card-body{padding:var(--s3)}
.card h3{font-size:var(--fs-5);font-weight:500;margin:var(--s1) 0 var(--s1)}
.card-body>p{color:var(--ink-2);max-width:var(--measure);font-size:var(--fs-4)}

.micro{display:flex;align-items:center;gap:10px;
  font-size:var(--fs-2);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.meta{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.meta li{background:var(--card);display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:var(--fs-3)}
.meta span{color:var(--muted)}
.meta b{font-weight:500;text-align:right}

.tags{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.tags li{font-size:var(--fs-3);color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:5px 10px;clip-path:var(--shape-sm)}

.gate{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
.gate-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.gate-name{font-weight:500;font-size:var(--fs-4)}
.gate-val b{font-size:var(--fs-6);font-weight:800;font-variant-numeric:tabular-nums}
.gate-val small{font-size:var(--fs-2);color:var(--muted);margin-left:5px}
/* Pasek progu: kroki co 5 px, żeby czytał się jak wskaźnik z gry,
   a nie jak gładki pasek postępu z panelu administracyjnego. */
.bar{height:10px;background:var(--paper-2);border:1px solid var(--line);margin:10px 0 8px;overflow:hidden}
.bar span{display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,var(--accent) 0 4px,rgba(184,37,26,.55) 4px 5px);
  transition:width var(--t-data) var(--ease)}
.bar.is-in span{width:var(--p)}
.bar.is-pending{background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);border-color:var(--line-2)}
.bar.is-pending span{display:none}
.gate-note{font-size:var(--fs-3);color:var(--muted)}

.callout{margin-top:var(--s3);max-width:var(--measure);
  background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:14px 16px;color:var(--ink-2);font-size:var(--fs-4)}

.big{margin:14px 0 10px;font-size:var(--fs-4);color:var(--muted)}
.big b{font-size:var(--fs-8);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.big span{display:block;font-size:var(--fs-3)}
.card-quiet{background:var(--paper-2)}

.ledger{margin-top:var(--s3);background:var(--card);border:1px solid var(--line);clip-path:var(--shape-sm)}
.ledger summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  padding:14px 18px;cursor:pointer;list-style:none}
.ledger summary::-webkit-details-marker{display:none}
.ledger summary b{font-size:var(--fs-3);font-weight:500;color:var(--accent);display:flex;gap:8px;align-items:center}
.ledger summary i{font-style:normal;display:inline-block;transition:transform var(--t-micro) var(--ease)}
.ledger[open] summary i{transform:rotate(45deg)}
.ledger-body{padding:0 18px 18px}
.ledger table{width:100%;border-collapse:collapse;font-size:var(--fs-3)}
.ledger th{text-align:left;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
.ledger td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.ledger tr:last-child td{border-bottom:0}

.rest{border-bottom:0;opacity:.72}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Tor kroków — ta sama gramatyka co mapa w lewym panelu: węzeł, stan, linia.
   Trzy stany: zrobione, teraz, przed nami. */
.track{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.track-step{position:relative;background:var(--card);border:1px solid var(--line);
  padding:var(--s3);clip-path:var(--shape-sm)}
.track-step h3{font-size:var(--fs-5);font-weight:500;margin:6px 0 6px}
.track-step p:last-child{color:var(--ink-2);font-size:var(--fs-4)}
.track-dot{position:absolute;top:-1px;left:-1px;width:14px;height:14px;
  background:var(--line-2);clip-path:polygon(0 0,100% 0,0 100%)}
.track-step.is-done .track-dot{background:var(--line-2)}
.track-step.is-now{border-color:var(--accent)}
.track-step.is-now .track-dot{background:var(--accent)}

/* Tabela ryzyka — ten sam rytm co reszta tabel, bez własnych ozdobników. */
.risk{width:100%;border-collapse:collapse;font-size:var(--fs-3);margin-top:var(--s1)}
.risk th{text-align:left;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:9px 10px;border-bottom:1px solid var(--line-2)}
.risk td{padding:10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.risk tr:last-child td{border-bottom:0}
.risk td:first-child{color:var(--ink);font-weight:500}
.risk td:last-child{color:var(--accent);white-space:nowrap}
@media (max-width:720px){
  .risk thead{display:none}
  .risk tr{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
  .risk td{border:0;padding:2px 0}
  .risk td:last-child{white-space:normal}
}

/* Dzielnik pikselowy między sekcjami — jeden wzór, powtarzalny. */
.section + .section{border-top:0}
.section{position:relative}
.section + .section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 9px);
}

/* === 2 · RUCH =============================================================
   Jedno wejście dla wszystkiego: 14 px w górę + wygaszenie.
   Kolejność w grupie przez --i, krok 60 ms. Nic nie wjeżdża z boku,
   nic się nie skaluje, nic się nie obraca. */
.rise{opacity:0;transform:translateY(var(--rise))}
.rise.is-in{
  opacity:1;transform:none;
  transition:opacity var(--t-enter) var(--ease) calc(var(--i,0) * 60ms),
             transform var(--t-enter) var(--ease) calc(var(--i,0) * 60ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.rise.is-in{opacity:1;transform:none;transition:none}
  .bar span,.route-progress,.route-runner,.card{transition:none}
  .card:hover{transform:none}
  .frame::after{opacity:.28}
}

/* =========================================================================
   WERSJA 3 — dramaturgia
   Poprzednia wersja była poprawna i nijaka. Czystość to warunek wstępny,
   nie efekt. Tu dochodzą trzy rzeczy, których brakowało:
   kontrast (ciemno/jasno), materiał (ziarno, głębia) i jeden moment,
   na którym wzrok się zatrzymuje.

   Systemy z wersji 2 obowiązują dalej: jedno ścięcie, jedno easing,
   trzy czasy, skala 8 px. Nic tu ich nie łamie.
   ========================================================================= */

:root{
  --ink-dark:#12100d;
  --dark-2:#1b1713;
  --dark-line:#332b22;
  --dark-text:#e9dcc2;
  --dark-muted:#9d8c69;
  --amber:#f0c04a;
}

/* Ziarno papieru — jedna warstwa na całej stronie, bardzo słaba.
   Bez tego wszystko wygląda jak płaski CSS. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.layout{position:relative;z-index:2}

/* ---- HERO ---------------------------------------------------------------
   Ciemny ekran startowy. Kontrast wobec jasnego dokumentu poniżej robi
   połowę roboty — strona zaczyna się od czegoś, co nie wygląda jak papier. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, #241d16 0%, transparent 60%),
    linear-gradient(180deg,#15120e 0%,#0e0c0a 100%);
  color:var(--dark-text);
  margin:calc(var(--s5) * -1) calc(clamp(20px,4vw,72px) * -1) var(--s6);
  padding:var(--s7) clamp(20px,4vw,72px) var(--s6);
}
/* Skanlinie + winieta, ta sama gramatyka co ramki obrazów */
.hero-crt{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px),
    radial-gradient(140% 110% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
}
.hero-inner{position:relative;z-index:1;max-width:940px}

.hero-boot{
  font-family:"Press Start Local",monospace;font-size:var(--fs-4);letter-spacing:.06em;
  color:#6f9c6a;margin:0 0 var(--s4);min-height:1.4em;
}
.hero-boot::after{content:"_";animation:cursor 1s steps(2) infinite}
@keyframes cursor{50%{opacity:0}}

.hero-kicker{
  display:flex;align-items:center;gap:10px;margin:0 0 var(--s3);
  font-family:"Press Start Local",monospace;font-size:var(--fs-1);letter-spacing:.08em;
  color:var(--amber);line-height:1.6;
}
.blink{animation:blink 1.4s steps(2) infinite;color:var(--accent)}
@keyframes blink{50%{opacity:.25}}

.hero-title{font-size:var(--fs-8);font-weight:800;letter-spacing:-.04em;line-height:.98}
.ht-line{display:block;overflow:visible}
#p1-b4 .meta-long li > span{font-weight:500;color:var(--ink)}
.scene-controls{position:absolute;inset:62.264151% 0 0;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 12px;background:transparent;color:#221d17;font-size:clamp(11px,1.2vw,16px);line-height:1.25;pointer-events:none}
.scene-controls span{position:relative;max-width:100%;padding:5px 14px;background:#fffefb;border:1px solid #c7bbaa;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px);font-family:"Prototype Label",monospace;font-size:clamp(16px,1.8vw,24px);line-height:1;color:#28241c}
.ht-line > *,.ht-line{will-change:transform}
.ht-accent{color:var(--amber)}
/* Wjazd wierszy nagłówka: ten sam kierunek i to samo easing co reszta */
.hero-title .ht-line{opacity:0;transform:translateY(var(--rise))}
.hero.is-ready .ht-line{opacity:1;transform:none;
  transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease)}
.hero.is-ready .ht-line:nth-child(2){transition-delay:120ms}

.hero-lead{margin-top:var(--s3);max-width:56ch;font-size:var(--fs-5);color:#c3b596}

/* ---- Oś 52 tygodni ------------------------------------------------------ */
.timeline{margin-top:var(--s6);position:relative}
.tl-track{position:relative;height:10px;background:#241e18;border:1px solid var(--dark-line);overflow:visible}
.tl-fill{
  position:absolute;inset:0 auto 0 0;width:0;
  background:repeating-linear-gradient(90deg,var(--accent) 0 4px,rgba(184,37,26,.5) 4px 5px);
  transition:width 1600ms var(--ease);
}
.hero.is-ready .tl-fill{width:100%}
.tl-runner{
  position:absolute;top:-9px;left:0;width:13px;height:15px;background:var(--amber);
  clip-path:polygon(38% 0,62% 0,62% 22%,100% 40%,100% 62%,62% 52%,62% 74%,78% 100%,52% 100%,50% 82%,48% 100%,22% 100%,38% 74%,38% 52%,0 62%,0 40%,38% 22%);
  transition:left 1600ms var(--ease);
}
.hero.is-ready .tl-runner{left:calc(100% - 13px)}
.tl-marks{list-style:none;margin:0;padding:0;position:relative;min-height:100px}
.tl-marks li{
  position:absolute;left:var(--at);transform:translateX(-50%);text-align:center;
  padding-top:12px;opacity:0;transition:opacity var(--t-enter) var(--ease);
}
.hero.is-ready .tl-marks li{opacity:1}
.hero.is-ready .tl-marks li:nth-child(1){transition-delay:300ms}
.hero.is-ready .tl-marks li:nth-child(2){transition-delay:600ms}
.hero.is-ready .tl-marks li:nth-child(3){transition-delay:900ms}
.hero.is-ready .tl-marks li:nth-child(4){transition-delay:1200ms}
.hero.is-ready .tl-marks li:nth-child(5){transition-delay:1500ms}
.tl-marks b{display:block;font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--amber)}
.tl-marks span{display:block;font-size:var(--fs-2);color:#9d8c69;margin-top:5px;white-space:normal;overflow-wrap:anywhere}
.tl-marks li{width:16%}

.hero-stats{margin:var(--s6) 0 0;display:grid;gap:1px;background:var(--dark-line);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--dark-line);clip-path:var(--shape-sm)}
.hero-stats div{background:var(--dark-2);padding:var(--s3);display:grid;grid-template-rows:1fr auto}
.hero-stats dt{font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;color:#8d7d5f}
.hero-stats dd{margin:8px 0 0;font-size:var(--fs-7);font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--dark-text)}

.hero .legend{margin-top:var(--s5);max-width:820px}
.hero .legend li{background:var(--dark-2);border-color:var(--dark-line)}
.hero .legend b{color:var(--dark-text)}
.hero .legend span span{color:#8d7d5f}
.hero .mk-plan{box-shadow:inset 0 0 0 2px var(--amber)}
.hero .mk-hyp{box-shadow:inset 0 0 0 2px #5a4d3a}
.hero-note{margin-top:var(--s4);max-width:var(--measure);color:#c3b596;
  border-left:3px solid var(--accent);padding:2px 0 2px 14px}

/* ---- Ciemne sekcje ------------------------------------------------------
   Nie dekoracja. Ciemne są te sekcje, które są panelem danych, a nie prozą:
   ryzyko (07) i ekonomia (08). Rytm jasne / ciemne robi dramaturgię. */
.section-dark{
  background:linear-gradient(180deg,#15120e,#100e0b);color:var(--dark-text);
  margin-left:calc(clamp(20px,4vw,72px) * -1);margin-right:calc(clamp(20px,4vw,72px) * -1);
  padding-left:clamp(20px,4vw,72px);padding-right:clamp(20px,4vw,72px);
  border-bottom:0;
}
.section-dark::before{display:none}
.section-dark h2{color:var(--dark-text)}
.section-dark .section-lead{color:#b6a888}
.section-dark .eyebrow{color:var(--amber)}
.section-dark .eyebrow::before{background:var(--amber)}
.section-dark .hud{background:var(--dark-2);border-color:var(--dark-line)}
.section-dark .hud b{color:var(--dark-text)}
.section-dark .hud .px{color:var(--amber)}
.section-dark .micro{color:#8d7d5f}
.section-dark .callout{background:var(--dark-2);border-color:var(--dark-line);color:#b6a888}
.section-dark .meta{background:var(--dark-line);border-color:var(--dark-line)}
.section-dark .meta li{background:var(--dark-2)}
.section-dark .meta span{color:#8d7d5f}
.section-dark .meta b{color:var(--dark-text)}
.section-dark .mk-plan{box-shadow:inset 0 0 0 2px var(--amber)}
.section-dark .mk-hyp{box-shadow:inset 0 0 0 2px #5a4d3a}

/* ---- Macierz ryzyka (07) ------------------------------------------------ */
.risk-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.risk-cell{
  position:relative;text-align:left;font:inherit;cursor:pointer;color:inherit;
  background:var(--dark-2);border:1px solid var(--dark-line);padding:var(--s3);
  clip-path:var(--shape-sm);display:grid;gap:6px;
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.risk-cell:hover{border-color:var(--amber);background:#221c15}
.risk-id{font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--amber)}
.risk-name{font-size:var(--fs-4);font-weight:500;line-height:1.3}
.risk-lvl{
  justify-self:start;align-self:start;
  font-size:var(--fs-1);letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border:1px solid currentColor;line-height:1.4;
}
/* treść wyrównana do góry, żeby zamknięte karty nie rozpychały zawartości */
.risk-cell{align-content:start}
.risk-cell[data-level="høy"] .risk-lvl{color:#e0664f}
.risk-cell[data-level="middels"] .risk-lvl{color:var(--amber)}
.risk-cell[data-level="lav"] .risk-lvl{color:#7fa06a}
.risk-more{
  display:grid;gap:2px;overflow:hidden;max-height:0;opacity:0;
  transition:max-height var(--t-enter) var(--ease),opacity var(--t-enter) var(--ease);
}
.risk-cell[aria-expanded="true"] .risk-more{max-height:190px;opacity:1;margin-top:6px}
.risk-more em{font-style:normal;font-size:var(--fs-1);letter-spacing:.13em;text-transform:uppercase;color:#8d7d5f;margin-top:8px}
.risk-more i{font-style:normal;font-size:var(--fs-3);color:#c3b596;line-height:1.45}

/* ---- Model ekonomiczny (08) --------------------------------------------- */
.model{background:var(--dark-2);border:1px solid var(--dark-line);clip-path:var(--shape);padding:var(--s4)}
.model-grid{display:grid;gap:var(--s5)}
@media (min-width:900px){.model-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.ctl{display:block;margin-top:var(--s3)}
.ctl-head{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-3);color:#c3b596;margin-bottom:8px}
.ctl-head b{color:var(--dark-text);font-variant-numeric:tabular-nums}
.ctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;
  background:repeating-linear-gradient(90deg,#3a3026 0 4px,transparent 4px 5px);
  border:1px solid var(--dark-line);cursor:pointer;
}
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:22px;background:var(--amber);border:0;cursor:grab;
  clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
}
.ctl input[type=range]::-moz-range-thumb{
  width:16px;height:22px;background:var(--amber);border:0;border-radius:0;cursor:grab;
}
.ctl input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.waterfall{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:1px;background:var(--dark-line);border:1px solid var(--dark-line)}
.waterfall li{background:#191410;display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:var(--fs-3)}
.waterfall span{color:#8d7d5f}
.waterfall b{font-variant-numeric:tabular-nums;color:var(--dark-text)}
.waterfall .is-neg b{color:#c9705c}
.waterfall .is-sum{background:#221c15}
.waterfall .is-sum b{color:var(--amber);font-size:var(--fs-4)}

.model-big{margin:var(--s3) 0 var(--s2);font-size:var(--fs-3);color:#8d7d5f}
.model-big b{display:block;font-size:var(--fs-8);font-weight:800;letter-spacing:-.035em;
  color:var(--dark-text);font-variant-numeric:tabular-nums;line-height:1}
.model-big span{display:block;margin-top:6px}

/* Wskaźnik z zaznaczonym progiem. Próg jest stały, słupek go przecina albo nie. */
.meter{position:relative;height:26px;background:#241e18;border:1px solid var(--dark-line);margin:var(--s3) 0 var(--s2)}
.meter-fill{position:absolute;inset:0 auto 0 0;width:0;
  background:repeating-linear-gradient(90deg,var(--accent) 0 5px,rgba(184,37,26,.5) 5px 6px);
  transition:width var(--t-data) var(--ease)}
.meter.is-ok .meter-fill{background:repeating-linear-gradient(90deg,#5f8f4e 0 5px,rgba(95,143,78,.5) 5px 6px)}
.meter-line{position:absolute;top:-4px;bottom:-4px;left:50%;width:2px;background:var(--amber)}
.meter-tag{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--amber);white-space:nowrap}

.verdict{font-size:var(--fs-6);font-weight:800;margin-top:var(--s3)}
.verdict[data-state="ok"]{color:#7fbf63}
.verdict[data-state="part"]{color:var(--amber)}
.verdict[data-state="no"]{color:#e0664f}
.verdict-note{margin-top:8px;font-size:var(--fs-3);color:#8d7d5f;max-width:52ch}
.model .meta{margin-top:var(--s3)}
.model-fine{margin-top:var(--s4);font-size:var(--fs-3);color:#8d7d5f;max-width:78ch}

@media (prefers-reduced-motion:reduce){
  .hero-boot::after,.blink{animation:none}
  .tl-fill,.tl-runner,.tl-marks li,.hero-title .ht-line,.meter-fill,.risk-more{transition:none}
  .hero.is-ready .tl-fill{width:100%}
}

/* =========================================================================
   WERSJA 4
   Hero i punkt 08 wracają na jasne. Ciemny zostaje tylko punkt 07.
   Jeden ciemny moment w środku dokumentu działa mocniej niż trzy — jest
   akcentem, a nie drugim domyślnym tłem.
   ========================================================================= */

/* ---- HERO na jasnym ------------------------------------------------------
   Dramaturgia nie z ciemności, tylko ze skali, siatki i ruchu na osi. */
.hero{
  background:
    radial-gradient(120% 80% at 12% 0%, #fbf6e9 0%, transparent 62%),
    linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
/* siatka pikseli zamiast skanlinii — ten sam znak co w lewym panelu */
.hero-crt{
  background:
    linear-gradient(rgba(160,140,100,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,140,100,.09) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%);
}
.hero-boot{color:var(--gold)}
.hero-kicker{color:var(--accent)}
.ht-accent{color:var(--accent)}
.hero-lead{color:var(--ink-2)}

.tl-track{background:var(--paper);border-color:var(--line-2)}
.tl-runner{background:var(--accent)}
.tl-marks b{color:var(--accent)}
.tl-marks span{color:var(--muted)}

.hero-stats{background:var(--line);border-color:var(--line)}
.hero-stats div{background:var(--card)}
.hero-stats dt{color:var(--muted)}
.hero-stats dd{color:var(--ink)}

.hero .legend li{background:var(--card);border-color:var(--line)}
.hero .legend b{color:var(--ink)}
.hero .legend span span{color:var(--muted)}
.hero .mk-plan{box-shadow:inset 0 0 0 2px var(--accent)}
.hero .mk-hyp{box-shadow:inset 0 0 0 2px var(--line-2)}
.hero-note{color:var(--ink-2)}

/* ---- Punkt 08 z powrotem na papierze ------------------------------------ */
#punkt-8.section-model{
  background:none;color:var(--ink);
  border-bottom:0;
}
#punkt-8 h2{color:var(--ink)}
#punkt-8 .section-lead{color:var(--ink-2)}
#punkt-8 .eyebrow{color:var(--accent)}
#punkt-8 .eyebrow::before{background:var(--accent)}
#punkt-8 .hud{background:var(--paper-2);border-color:var(--line)}
#punkt-8 .hud b{color:var(--ink-2)}
#punkt-8 .hud .px{color:var(--accent)}
#punkt-8 .micro{color:var(--muted)}
#punkt-8 .mk-plan{box-shadow:inset 0 0 0 2px var(--accent)}
#punkt-8 .mk-hyp{box-shadow:inset 0 0 0 2px var(--line-2)}

#punkt-8 .model{background:var(--card);border-color:var(--line);box-shadow:var(--shadow)}
#punkt-8 .ctl-head{color:var(--ink-2)}
#punkt-8 .ctl-head b{color:var(--ink)}
#punkt-8 .ctl input[type=range]{
  background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 5px);
  border-color:var(--line);
}
#punkt-8 .ctl input[type=range]::-webkit-slider-thumb{background:var(--accent)}
#punkt-8 .ctl input[type=range]::-moz-range-thumb{background:var(--accent)}
#punkt-8 .ctl input[type=range]:focus-visible{outline-color:var(--accent)}

#punkt-8 .waterfall{background:var(--line);border-color:var(--line)}
#punkt-8 .waterfall li{background:var(--paper-2)}
#punkt-8 .waterfall span{color:var(--muted)}
#punkt-8 .waterfall b{color:var(--ink)}
#punkt-8 .waterfall .is-neg b{color:var(--accent)}
#punkt-8 .waterfall .is-sum{background:var(--card)}
#punkt-8 .waterfall .is-sum b{color:var(--accent)}

#punkt-8 .model-big{color:var(--muted)}
#punkt-8 .model-big b{color:var(--ink)}
#punkt-8 .meter{background:var(--paper-2);border-color:var(--line-2)}
#punkt-8 .meter-line{background:var(--accent)}
#punkt-8 .meter-tag{color:var(--accent)}
#punkt-8 .meter.is-ok .meter-fill{background:repeating-linear-gradient(90deg,#4e7a3f 0 5px,rgba(78,122,63,.5) 5px 6px)}
#punkt-8 .verdict[data-state="ok"]{color:#3f6a33}
#punkt-8 .verdict[data-state="part"]{color:var(--gold)}
#punkt-8 .verdict[data-state="no"]{color:var(--accent)}
#punkt-8 .verdict-note,#punkt-8 .model-fine{color:var(--muted)}
#punkt-8 .meta{background:var(--line);border-color:var(--line)}
#punkt-8 .meta li{background:var(--paper-2)}
#punkt-8 .meta span{color:var(--muted)}
#punkt-8 .meta b{color:var(--ink)}
#punkt-8 .callout{background:var(--paper-2);border-color:var(--line);color:var(--ink-2)}

/* Punkt 07 zostaje ciemny i teraz jest jedynym takim miejscem,
   więc dostaje trochę więcej powietrza, żeby czytał się jak celowy akcent. */
#punkt-7.section-dark{padding-top:var(--s7);padding-bottom:var(--s7)}

/* =========================================================================
   WERSJA 5 — dusza gracza z grafiki, nie z typografii
   Koniec z dark mode. Zostaje jeden jasny dokument.
   VT323 usunięty: dwa kroje, Inter i Press Start 2P.
   Wszystko, co ma pachnieć grą, jest teraz rysunkiem albo kształtem.
   ========================================================================= */

/* Punkt 07 wraca na papier. Ciemnego trybu nie ma już nigdzie. */
#punkt-7 .risk-cell{background:var(--card);border-color:var(--line);color:var(--ink)}
#punkt-7 .risk-cell:hover{background:var(--paper-2);border-color:var(--accent)}
#punkt-7 .risk-id{color:var(--accent)}
#punkt-7 .risk-more em{color:var(--muted)}
#punkt-7 .risk-more i{color:var(--ink-2)}
#punkt-7 .risk-cell[data-level="høy"] .risk-lvl{color:var(--accent)}
#punkt-7 .risk-cell[data-level="middels"] .risk-lvl{color:var(--gold)}
#punkt-7 .risk-cell[data-level="lav"] .risk-lvl{color:#5f7a4a}

/* ---- Scenka pikselowa ---------------------------------------------------
   Skalowana całkowitą liczbą razy. `image-rendering:pixelated` jest tu
   obowiązkowe — bez niego przeglądarka rozmyje piksele i cały efekt znika. */
.scene{position:relative;margin:var(--s5) 0 0;padding:0}
.scene canvas{
  display:block;width:100%;height:auto;max-width:none;
  margin-inline:auto;
  image-rendering:pixelated;
  border:1px solid var(--line-2);
  clip-path:var(--shape);
  background:var(--paper);
}

/* ---- Dithering jako materiał --------------------------------------------
   Szachownica zamiast gładkiego gradientu. To jedyny sposób na przejście
   tonalne, który zgadza się z grafiką pikselową. Używamy go tam, gdzie
   wcześniej były zwykłe tła. */
.hero{
  background:
    linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
}
.hero-crt{
  background-image:
    linear-gradient(rgba(160,140,100,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,140,100,.09) 1px,transparent 1px),
    repeating-conic-gradient(rgba(160,140,100,.16) 0 25%, transparent 0 50%);
  background-size:24px 24px, 24px 24px, 4px 4px;
}

/* ---- Narożniki jak w UI gry --------------------------------------------
   Cztery pikselowe znaczniki w rogach kart. Dodają "ramkę interfejsu"
   bez rysowania całej ramki 9-slice. */
.card,.model,.risk-cell,.track-step,.ledger{position:relative}
.card::before,.card::after,
.model::before,.model::after,
.risk-cell::before,.risk-cell::after{
  content:"";position:absolute;width:5px;height:5px;pointer-events:none;
  border:2px solid var(--line-2);
}
.card::before,.model::before,.risk-cell::before{top:4px;right:4px;border-left:0;border-bottom:0}
.card::after,.model::after,.risk-cell::after{bottom:4px;left:4px;border-right:0;border-top:0}
.card:hover::before,.card:hover::after,
.risk-cell:hover::before,.risk-cell:hover::after{border-color:var(--accent)}

/* ---- Wskaźnik wyboru jak w menu gry ------------------------------------- */
.node,.risk-cell{padding-left:22px}
.sel{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-left:6px solid var(--accent);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  opacity:0;transition:opacity var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.node:hover .sel,.node.is-active .sel,.risk-cell:hover .sel{opacity:1;transform:translateY(-50%) translateX(2px)}
.node.is-active .sel{border-left-color:var(--amber)}
.risk-cell .sel{top:var(--s3);transform:none}
.risk-cell:hover .sel{transform:translateX(2px)}

/* ---- Odznaka sekcji: większa, wyraźniej pikselowa ----------------------- */
.hud{min-width:74px;padding:12px 10px;background:var(--card);position:relative}
.hud .px{width:30px;height:30px}
.hud::after{
  content:"";position:absolute;inset:3px;pointer-events:none;
  background:repeating-conic-gradient(rgba(160,140,100,.20) 0 25%, transparent 0 50%);
  background-size:4px 4px;clip-path:var(--shape-sm);
}
.hud > *{position:relative;z-index:1}

/* ---- Paski: wyraźniej "growe" ------------------------------------------- */
.bar{height:12px}
.meter{height:28px}

@media (prefers-reduced-motion:reduce){
  .sel{transition:none}
}

/* Po usunięciu VT323 te trzy miejsca odziedziczyły rozmiary pisane pod font
   wąski. Press Start 2P jest przy tej samej wartości znacznie szerszy, więc
   linie się łamały. Rozmiary skorygowane, ekran gry wraca na Inter. */
.hero-boot{font-size:var(--fs-1);letter-spacing:.02em;line-height:1.9}
.game-shell header{font-size:var(--fs-1);letter-spacing:.02em}
.game-screen p{font-family:"Inter Local",Inter,system-ui,sans-serif;font-size:var(--fs-2)}

/* =========================================================================
   WERSJA 6 — kolor jako nawigacja, nie ozdoba

   Diagnoza: między sekcjami było 209 px przerwy, linia i kropkowany dzielnik,
   a i tak czytało się to jak jedna długa płachta. Odstęp nie tworzy podziału,
   jeśli po obu jego stronach faktura jest identyczna. Oko potrzebuje zmiany.

   Każdy z ośmiu punktów dostaje własny odcień. Kolor nie jest dekoracją:
   to ten sam sygnał, co numer w lewym panelu, tylko czytany peryferyjnie.
   Paleta jest ziemista i przygaszona, żeby dokument został dokumentem.
   ========================================================================= */

.section:nth-of-type(1){--sec:#3f5d70}   /* 01 Teori        — atramentowy */
.section:nth-of-type(2){--sec:#4e7a3f}   /* 02 Praksis      — zielony, kolor gier */
.section:nth-of-type(3){--sec:#3f7068}   /* 03 Nyetablering — turkus */
.section:nth-of-type(4){--sec:#b8251a}   /* 04 Realisme     — czerwień marki */
.section:nth-of-type(5){--sec:#a8791f}   /* 05 Investering  — złoto */
.section:nth-of-type(6){--sec:#6a5578}   /* 06 Hjelpebehov  — śliwka */
.section:nth-of-type(7){--sec:#a85a1f}   /* 07 Problemer    — rdza */
.section:nth-of-type(8){--sec:#3f6a33}   /* 08 Selvforsørget— ciemna zieleń */

/* Kolor wchodzi tylko w miejsca, które i tak są sygnałami: brew, kreska,
   odznaka, numer, ramka aktywnej karty. Nigdy w tekst ciągły. */
.section .eyebrow{color:var(--sec)}
.section .eyebrow::before{background:var(--sec)}
.section .hud{border-color:var(--sec)}
.section .hud .px{color:var(--sec)}
.section .hud b{color:var(--sec)}
.section .card:hover{border-color:var(--sec)}
.section .card:hover::before,.section .card:hover::after{border-color:var(--sec)}
.section .micro .mk-doc{background:var(--sec)}
.section .micro .mk-plan{box-shadow:inset 0 0 0 2px var(--sec)}
.section .callout{border-left-color:var(--sec)}
.section .bar span{background:repeating-linear-gradient(90deg,var(--sec) 0 4px,color-mix(in srgb,var(--sec) 55%,transparent) 4px 5px)}
.section .tags li{border-color:color-mix(in srgb,var(--sec) 35%,var(--line))}
.section .risk-cell:hover{border-color:var(--sec)}
.section .risk-cell:hover::before,.section .risk-cell:hover::after{border-color:var(--sec)}
.section .sel{border-left-color:var(--sec)}

/* Separacja: naprzemienna faktura papieru plus gruby pasek w kolorze sekcji.
   Pasek jest wąski, ale to on mówi „nowy rozdział", a nie 104 px pustki. */
.section:nth-of-type(even){background:var(--paper-2)}
.section{
  margin-left:calc(clamp(20px,4vw,72px) * -1);
  margin-right:calc(clamp(20px,4vw,72px) * -1);
  padding-left:clamp(20px,4vw,72px);
  padding-right:clamp(20px,4vw,72px);
  padding-top:var(--s6);
  padding-bottom:var(--s6);
  border-bottom:0;
}
.section + .section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:
    linear-gradient(90deg,var(--sec) 0 96px,transparent 96px),
    repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 9px);
}

/* ---- Prototypy grywalne w dokumencie -----------------------------------
   Nic się nie ładuje, dopóki nikt nie kliknie. Konsultant AS3 dostaje link
   i przechodzi stronę sam, więc przycisk musi mówić wprost, co się stanie. */
.playable{position:relative;background:#0f0d0b;isolation:isolate}
#p2-b1 .card-body > p + .playable,
#p2-b2 .card-body > p + .playable{margin-top:16px}
.playable > .frame{position:relative;z-index:2;margin:0}
.play-btn{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;gap:10px;align-content:center;
  border:0;cursor:pointer;font:inherit;color:#fff;
  background:linear-gradient(180deg,rgba(10,8,6,.28),rgba(10,8,6,.52));
  transition:background var(--t-micro) var(--ease);
}
.play-btn:hover{background:linear-gradient(180deg,rgba(10,8,6,.12),rgba(10,8,6,.38))}
.play-ico{
  width:62px;height:62px;display:grid;place-items:center;
  background:var(--sec,var(--accent));color:#fff;font-size:var(--fs-6);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 0 0 4px rgba(255,255,255,.14);
}
.play-label{font-family:"Press Start Local",monospace;font-size:var(--fs-1);letter-spacing:.06em}
.play-note{font-size:var(--fs-2);color:#e6dcc6;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.prototype-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0a0908;z-index:1}
.playable.is-live .play-btn,.playable.is-live > .frame{opacity:0;pointer-events:none}
.play-bar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 12px;background:var(--paper-2);border-top:1px solid var(--line);
  font-size:var(--fs-2);color:var(--muted);
}
.play-bar b{color:var(--ink);font-weight:var(--fw-med)}
.play-stop{
  font:inherit;font-size:var(--fs-2);cursor:pointer;padding:4px 10px;
  background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);
}
.play-stop:hover{border-color:var(--sec);color:var(--sec)}

/* Duże okno gry działa jak na stronie głównej AnimaByte. Iframe pozostaje
   w tym samym miejscu DOM, więc zamknięcie nie kasuje stanu prototypu. */
.prototype-backdrop{
  position:fixed;inset:0;z-index:200;background:rgba(20,17,13,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
body.prototype-open{overflow:hidden}
.prototype-placeholder{width:100%}
.card.has-expanded-prototype{
  position:relative;overflow:visible;clip-path:none;transform:none!important;opacity:1!important;
}
.card.has-expanded-prototype:hover{transform:none!important}
.playable.is-expanded{
  position:fixed;z-index:201;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(var(--play-w,1600px),96vw,calc(88vh * var(--play-ratio,1.3333)));
  aspect-ratio:var(--play-ratio,1.3333);height:auto;min-height:0;max-height:none;
  overflow:hidden;border:2px solid rgba(255,255,255,.92);
  box-shadow:0 28px 90px rgba(0,0,0,.48);
}
.prototype-controls{
  position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:8px;
}
.prototype-controls[hidden]{display:none}
.prototype-control{
  width:46px;height:46px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.72);background:rgba(24,20,16,.84);color:#fff;
  font:500 24px/1 Inter,system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.prototype-control:hover,.prototype-control:focus-visible{background:var(--accent);outline:2px solid #fff;outline-offset:2px}
.playable.is-expanded > .frame{visibility:hidden}

/* =========================================================================
   WERSJA 7 — lewy panel jako droga, karty w kolorach sekcji
   ========================================================================= */

/* Karty panelu dostają kolor swojej sekcji: pasek z lewej i numer.
   Ten sam odcień, który czytelnik zobaczy po prawej — panel i dokument
   mówią jednym kolorem o tym samym punkcie. */
.node:nth-child(3){--sec:#3f5d70}  .node:nth-child(4){--sec:#4e7a3f}
.node:nth-child(5){--sec:#3f7068}  .node:nth-child(6){--sec:#b8251a}
.node:nth-child(7){--sec:#a8791f}  .node:nth-child(8){--sec:#6a5578}
.node:nth-child(9){--sec:#a85a1f}  .node:nth-child(10){--sec:#3f6a33}
.node{border-left:4px solid var(--sec,var(--line-2))}
.node b{color:var(--sec,var(--accent))}
.node.is-active{background:var(--sec,var(--ink));border-color:var(--sec,var(--ink))}
.node.is-active b{color:#fbf6e9}
.node.is-active span{color:#fbf6e9}
.node.is-active i{color:rgba(251,246,233,.7)}
.node.is-active .sel{border-left-color:#fbf6e9}

/* Droga: gruba, widoczna, kropkowana jak trasa na mapie poziomów.
   Przebyty odcinek wypełnia się kolorem, żołnierzyk stoi na aktywnym węźle. */
.route-base{stroke:var(--line-2);stroke-width:4;stroke-dasharray:6 6;stroke-linecap:round}
.route-progress{stroke:var(--accent);stroke-width:4;stroke-dasharray:1200;stroke-linecap:round}
.route-runner{width:16px;height:18px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.mission-map{grid-template-columns:220px 220px;gap:16px 60px;padding:6px 0}

/* ---- Podsumowanie na start sekcji --------------------------------------
   Odpowiedź na pytanie sekcji stoi PRZED dowodami, nie po nich. Czytelnik,
   który czyta tylko pierwsze akapity, i tak dostaje werdykt. */
.answer{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start;
  margin:0 0 var(--s4);padding:var(--s3);max-width:calc(var(--measure) + 96px);
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--sec,var(--accent));
  clip-path:var(--shape-sm);
}
.answer-tag{
  font-family:"Press Start Local",monospace;font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--sec,var(--accent));padding-top:5px;white-space:nowrap;
}
.answer p{font-size:var(--fs-5);font-weight:var(--fw-med);line-height:1.45;color:var(--ink)}

/* Nic nie jest schowane. Zwijane bloki stają się zwykłymi blokami. */
.ledger summary{display:none}
.ledger .ledger-body{padding-top:var(--s3)}
.ledger{padding:var(--s3)}
.ledger .micro{margin-bottom:var(--s2)}

/* ===================================================================
   v7 · pełna treść: nic nie jest schowane, każda sekcja zaczyna od SVAR
   =================================================================== */
.answer p{margin:0}
.section-lead{margin-top:var(--s2)}

/* Oś czasu dokumentu (punkt 04) w jasnej karcie: bez animacji "boot",
   od razu pełna, te same znaczniki co w hero. */
.timeline-doc{margin-top:var(--s3)}
.timeline-doc .tl-track{background:var(--paper);border-color:var(--line-2)}
.timeline-doc .tl-fill{width:100%;transition:none;background:var(--sec,var(--accent))}
.timeline-doc .tl-marks li{opacity:1}
.timeline-doc .tl-marks b{color:var(--sec,var(--accent))}
.timeline-doc + .tags{margin-top:var(--s2)}

/* Tabela ryzyka: badge poziomu w komórce, nie w kafelku */
.risk .risk-lvl{
  display:inline-block;font-family:"Press Start Local",monospace;font-size:var(--fs-1);
  letter-spacing:.06em;text-transform:uppercase;padding:5px 7px 4px;
  border:2px solid currentColor;line-height:1;white-space:nowrap}
.risk .risk-lvl[data-level="høy"]{color:var(--accent)}
.risk .risk-lvl[data-level="middels"]{color:var(--gold)}
.risk .risk-lvl[data-level="lav"]{color:#3f6a33}
#punkt-1 .risk td:last-child{color:var(--ink-2);white-space:normal}
#punkt-1 .risk td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}

/* Sekcja końcowa: zbiorcze podsumowanie ośmiu punktów */
.section-final{--sec:var(--ink);background:var(--paper-2)}
.section-final .hud b{font-size:var(--fs-6)}
.summary-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:1px;background:var(--line)}
.summary-list li{background:var(--card);display:grid;grid-template-columns:minmax(150px,.32fr) 1fr;gap:var(--s3);padding:12px 14px;align-items:start}
.summary-list b{font-family:"Press Start Local",monospace;font-size:var(--fs-1);line-height:1.6;color:var(--accent)}
.summary-list span{font-size:var(--fs-3);color:var(--ink-2);line-height:1.5}
@media (max-width:620px){.summary-list li{grid-template-columns:1fr;gap:6px}}

/* Kaskada z dokumentu w punkcie 08: statyczna, te same kolory co model */
.waterfall-doc{margin-top:var(--s3)}

/* Druk: konsola i animacje znikają, cała treść zostaje */
@media print{
  .console,.proofbar,.play-btn,.play-bar,#print-btn,.scene,.hero-crt{display:none !important}
  .layout{display:block}
  body{background:#fff;color:#000}
  .rise{opacity:1 !important;transform:none !important}
  .section{break-inside:avoid-page;page-break-inside:avoid;padding:24px 0}
  .card,.answer{break-inside:avoid;box-shadow:none}
  .bar span{width:var(--p) !important}
  a[href]::after{content:""}
}
/* Skrajne znaczniki osi nie wystają poza tor */
.tl-marks li:first-child{transform:none;text-align:left}
.tl-marks li:last-child{transform:translateX(-100%);text-align:right}
/* Długie wartości w parach etykieta/wartość: do lewej, zwykła grubość */

.meta-long li{display:grid;grid-template-columns:minmax(120px,.28fr) 1fr;align-items:start}
.meta-long b{text-align:left;font-weight:var(--fw-reg);color:var(--ink)}
/* Cztery kroki w jednym rzędzie na desktopie */
@media (min-width:900px){#punkt-1 .track{grid-template-columns:repeat(4,1fr)}}
/* Lista podsumowań: numer pikselowy, etykieta zwykła */
.summary-list b{font-family:inherit;font-size:var(--fs-3);font-weight:var(--fw-med);color:var(--ink);display:flex;gap:8px;align-items:baseline}
.summary-list em{font-style:normal;font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--accent);flex:0 0 auto}
/* Jednostka przy liczbie w faktach: mniejsza, w tej samej linii */
.facts dd small{font-size:var(--fs-3);font-weight:var(--fw-reg);color:var(--muted);margin-left:6px}

/* ===================================================================
   v8 · biel, jedna kolumna, prowadzenie za rękę
   =================================================================== */
:root{
  --paper:#ffffff; --paper-2:#f7f6f2; --card:#ffffff;
  --ink:#1c1a17; --ink-2:#3f3a33; --muted:#6e685e;
  --line:#e3e0d8; --line-2:#c5c0b4;
}
body::before{opacity:.45}                        /* szum ledwo widoczny na bieli */
.console{background:var(--paper);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:24px 24px}                      /* siatka zostaje, tylko jaśniejsza */
.section:nth-of-type(even){background:var(--paper)}
.section + .section{border-top:1px solid var(--line)}
.card{box-shadow:0 1px 0 var(--line)}
.card-quiet,.tags li,.bar,.callout,.meta li:nth-child(odd),.summary-list li:nth-child(odd){background:var(--paper-2)}
.tl-track{background:var(--paper-2)}

/* Jedna kolumna: karty jedna pod drugą, szerokość czytelnicza */
main{width:100%;max-width:980px;min-width:0;justify-self:center}
.cards-2,.cards-3{grid-template-columns:1fr}
.playable{max-width:100%}
.card-body>p{max-width:none}
.section-lead,.callout,.answer{max-width:none}
#punkt-1 .track,.track{grid-template-columns:1fr}
@media (min-width:720px){.track{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}

/* Spis bloków w punkcie: czytelnik wie, co go czeka */
.contents{margin:var(--s3) 0 0;padding:12px 16px;border:1px solid var(--line);background:var(--paper-2);clip-path:var(--shape-sm)}
.contents p{margin:0 0 6px;font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--sec,var(--accent))}
.contents ol{margin:0;padding-left:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px}
.contents li{font-size:var(--fs-3);color:var(--ink-2)}
.contents li b{font-weight:var(--fw-med);color:var(--ink)}
.contents a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.contents a:hover{border-color:var(--sec,var(--accent))}

/* Numer bloku w etykiecie: 01.3 */
.micro .idx{font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--sec,var(--accent));margin-right:10px}

/* Przejście do następnego punktu na końcu każdej sekcji */
.next-link{display:flex;justify-content:flex-end;margin-top:var(--s5)}
.next-link a{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink);text-decoration:none;clip-path:var(--shape-sm);font-size:var(--fs-3);transition:border-color var(--t-micro) var(--ease)}
.next-link a:hover{border-color:var(--sec,var(--accent))}
.next-link .nl-title{display:block;font-weight:var(--fw-med)}
.next-link b{font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--sec,var(--accent))}

/* Wykres miesięczny: 12 wierszy, każdy z paskiem */
.months{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:4px}
.months li{display:grid;grid-template-columns:96px 1fr 88px;gap:12px;align-items:center;font-size:var(--fs-3)}
.months .m{font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--muted)}
.months .m i{display:block;font-style:normal;font-family:inherit;font-size:var(--fs-1);color:var(--sec,var(--accent));margin-top:3px}
.months .bar{margin:0;height:12px;position:relative}
.months .bar span{background:repeating-linear-gradient(90deg,var(--sec,var(--accent)) 0 4px,rgba(0,0,0,.08) 4px 5px)}
.months .neg .bar span{background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 5px)}
.months .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-med)}
.months .neg .v{color:var(--muted)}
.months-goal{font-size:var(--fs-2);color:var(--muted);margin-top:8px}

/* Ryzyka jedno pod drugim */
.risk-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:8px}
.risk-list li{border:1px solid var(--line);background:var(--card);padding:12px 14px;clip-path:var(--shape-sm);display:grid;gap:4px}
.risk-list h3{margin:0;font-size:var(--fs-4)}
.risk-list p{margin:0;font-size:var(--fs-3);color:var(--ink-2)}
.risk-list p b{font-weight:var(--fw-med);color:var(--ink);margin-right:6px}
.risk-list .decision b{color:var(--sec,var(--accent))}

/* Hero: projekt w skrócie + jak czytać */
.hero-brief{margin-top:var(--s4);display:grid;gap:var(--s3)}
.hero-brief .card-body>p{font-size:var(--fs-4)}
.howto{display:grid;gap:8px;margin:var(--s3) 0 0;padding:0;list-style:none}
.howto li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-size:var(--fs-3);color:var(--ink-2)}
.howto b{font-family:"Press Start Local",monospace;font-size:var(--fs-1);color:var(--accent)}
/* Bloki jeden pod drugim (opis pod tytułem), ta sama forma co lista ryzyk */
.stack{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:8px}
.stack li{border:1px solid var(--line);background:var(--card);padding:12px 14px;clip-path:var(--shape-sm);display:grid;gap:4px}
.stack li .micro{margin:0 0 2px}
.stack h3{margin:0;font-size:var(--fs-4)}
.stack p{margin:0;font-size:var(--fs-3);color:var(--ink-2)}
.risk-list h3 .idx{margin-right:10px}
#p7-b1 .risk-list > li{padding:20px;gap:12px}
#p7-b1 .risk-list > li > p{line-height:1.7;max-width:78ch}
.risk-requirements{margin-top:4px}
.risk-requirements summary{display:list-item;width:fit-content;padding:9px 14px;margin-left:18px;border:1px solid var(--sec);color:var(--sec);font-size:14px;font-weight:500;cursor:pointer}
.risk-requirements summary:hover{background:var(--paper-2)}
.risk-requirements summary:focus-visible{outline:2px solid var(--sec);outline-offset:3px}
.risk-requirements-content{margin-top:16px;padding:18px;border:1px solid var(--line);background:var(--paper-2)}
.risk-requirements-content .gate{margin-top:16px}
.risk-requirements-content .gate li{clip-path:none;display:block;border-left:0;padding:12px 0;background:transparent;border-width:0 0 1px}
.rule{border:0;border-top:1px solid var(--line);margin:var(--s4) 0}
.card-wide .frame{clip-path:var(--shape-sm)}
.gate-note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.gate-note a:hover{border-color:var(--sec,var(--accent))}
.hero-brief .card{clip-path:var(--shape)}
.facts{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));max-width:none}
#p5-b1 .facts > div{container-type:inline-size;display:flex;flex-direction:column}
#p5-b1 .facts dd{white-space:nowrap;font-size:clamp(22px,18cqw,36px);margin-top:auto;padding-top:10px}
/* Wykres miesięczny: etykieta lansering w tej samej linii co numer miesiąca */
.months li{grid-template-columns:200px 1fr 88px}
.months .m i{display:inline;margin:0 0 0 8px}
@media (max-width:620px){.months li{grid-template-columns:110px 1fr 76px}.months .m i{display:block;margin:3px 0 0}}

/* ===================================================================
   v9 · hero bez przyciemnienia, kolor sekcji z większą powierzchnią
   =================================================================== */
.hero{background:var(--paper)}
.hero-crt{display:none}                          /* dithering przyciemniał prawą stronę */

/* Paleta o włos bardziej nasycona, te same barwy */
.section:nth-of-type(1){--sec:#2f5f80}
.section:nth-of-type(2){--sec:#3a7f2e}
.section:nth-of-type(3){--sec:#237a6c}
.section:nth-of-type(4){--sec:#c41f14}
.section:nth-of-type(5){--sec:#b57f12}
.section:nth-of-type(6){--sec:#6a4a92}
.section:nth-of-type(7){--sec:#bd5a0e}
.section:nth-of-type(8){--sec:#2b7a2f}
.node:nth-child(3){--sec:#2f5f80}  .node:nth-child(4){--sec:#3a7f2e}
.node:nth-child(5){--sec:#237a6c}  .node:nth-child(6){--sec:#c41f14}
.node:nth-child(7){--sec:#b57f12}  .node:nth-child(8){--sec:#6a4a92}
.node:nth-child(9){--sec:#bd5a0e}  .node:nth-child(10){--sec:#2b7a2f}
.section-final{--sec:#1c1a17}

/* Kafel HUD: wypełniony kolorem, numer i ikona białe */
.section .hud{background:var(--sec);border-color:var(--sec);min-width:84px;padding:14px 12px}
.section .hud::after{opacity:.18}
.section .hud .px,.section .hud b{color:#fff}
.section .hud .px{width:32px;height:32px}
.section .hud:has(.hud-label){width:144px;min-width:144px;min-height:144px;box-sizing:border-box;align-content:center;padding:10px 4px;gap:8px}
.section .hud .hud-label{font-family:"Inter Local",sans-serif;font-size:16px;font-weight:500;line-height:1.2;color:#fff;white-space:nowrap}
.section .eyebrow::before{width:32px;height:3px}
.section h2{border-bottom:3px solid var(--sec);display:inline-block;padding-bottom:6px}

/* SVAR: podbarwione tło, wypełniony znacznik */
.section .answer{background:color-mix(in srgb,var(--sec) 7%,#fff);border-left-width:8px;padding:16px 18px}
.section .answer-tag{background:var(--sec);color:#fff;padding:6px 8px 5px;align-self:start;line-height:1;clip-path:var(--shape-sm)}

/* Spis bloków i numer bloku: wypełnione chipy */
.section .contents{border-left:4px solid var(--sec);background:color-mix(in srgb,var(--sec) 4%,#fff)}
.section .contents li b{color:var(--sec)}
.section .micro .idx{background:var(--sec);color:#fff;padding:5px 7px 4px;line-height:1;clip-path:var(--shape-sm)}
.section .stack li,.section .risk-list li{border-left:4px solid var(--sec)}
.section .card{border-top:3px solid var(--sec)}
.section .track-step.is-now{border-color:var(--sec)}

/* Neste: wypełniony przycisk */
.section .next-link a{background:var(--sec);border-color:var(--sec);color:#fff;padding:12px 18px}
.section .next-link b,.section .next-link .nl-title{color:#fff}
.section .next-link a:hover{filter:brightness(1.08)}

/* Pasek między sekcjami: grubszy */
.section + .section::before{height:7px}

/* Hero: karta „Prosjektet kort” z czerwoną krawędzią, liczby czerwone */
.hero-brief .card{border-left:6px solid var(--accent);border-top:0}
.hero-stats dd{color:var(--accent)}
.hero-stats dd small{color:var(--muted)}
.hero-stats dd b,.hero-stats dd small{font-weight:400}

/* Konsola: aktywny węzeł już wypełniony; nieaktywne dostają grubszą krawędź */
.node{border-left-width:6px}
/* Stare reguły #punkt-7/#punkt-8 z v4/v5 mają id w selektorze; wyrównanie */
#punkt-7 .hud,#punkt-8 .hud{background:var(--sec);border-color:var(--sec)}
#punkt-7 .hud .px,#punkt-7 .hud b,#punkt-8 .hud .px,#punkt-8 .hud b{color:#fff}
#punkt-8 .answer{background:color-mix(in srgb,var(--sec) 7%,#fff)}
#punkt-8 .eyebrow{color:var(--sec)} #punkt-8 .eyebrow::before{background:var(--sec)}
.hero-stats dd{font-size:var(--fs-6)}
/* Minispill i iframe: pełna szerokość panelu, wysokość steruje sam iframe */
.game-frame{display:block;width:100%;height:430px;border:0;background:transparent;margin-top:0}
@media print{.game-shell{display:none}}

/* Reading mode keeps the existing iframe and its game state. */
.console-brand > div{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.console-brand > div > span{flex:1 1 150px;overflow-wrap:anywhere;text-align:center}
.game-visibility-button{background:#1b6055;color:#fff;border:1px solid #fff;box-shadow:0 0 0 1px #1b6055;padding:9px 12px;min-height:40px;font:500 14px/1.2 "Inter Local",sans-serif;white-space:nowrap;cursor:pointer}
.game-visibility-button:hover{background:#154c43}
.game-visibility-button:focus-visible{outline:3px solid #171310;outline-offset:3px}
#show-game{position:fixed;top:12px;left:12px;z-index:100}
#show-game[hidden],#game-console[hidden]{display:none!important}
body.game-console-hidden .layout{grid-template-columns:minmax(0,1fr)}
body.game-console-hidden main{padding-top:72px}
@media print{.game-visibility-button{display:none!important}}

/* Two comparable service workloads, with shared row and column headings. */
#p8-b4 .service-comparison{width:100%;table-layout:fixed;border-collapse:collapse;margin:var(--s3) 0;font-size:var(--fs-3);line-height:1.5}
#p8-b4 .service-comparison th,#p8-b4 .service-comparison td{border:1px solid var(--line);padding:12px;vertical-align:middle}
#p8-b4 .service-comparison th{font-weight:500;text-align:left;overflow-wrap:break-word}
#p8-b4 .service-comparison thead{background:var(--paper-2)}
#p8-b4 .service-comparison th:first-child{width:44%}
#p8-b4 .service-comparison td{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:600px){#p8-b4 .service-comparison{font-size:13px}#p8-b4 .service-comparison th,#p8-b4 .service-comparison td{padding:8px 5px}}
/* Start and summary share the section identity system. */
.start-heading .hud{background:#28241c;color:#fff;width:144px;min-width:144px;min-height:144px;box-sizing:border-box;align-content:center;gap:8px}
.start-heading .hud .px{width:32px;height:32px;color:#fff}
.start-heading .hud b{color:#fff}
.start-heading .hud-label{font-size:16px;font-weight:500}
#samlet .hud-label{text-transform:none;font-size:16px;white-space:nowrap;text-align:center}
.start-heading .hero-title{margin:0}
.node[data-target="punkt-1"]{--sec:#2f5f80}
.node[data-target="punkt-2"]{--sec:#3a7f2e}
.node[data-target="punkt-3"]{--sec:#237a6c}
.node[data-target="punkt-4"]{--sec:#c41f14}
.node[data-target="punkt-5"]{--sec:#b57f12}
.node[data-target="punkt-6"]{--sec:#6a4a92}
.node[data-target="punkt-7"]{--sec:#bd5a0e}
.node[data-target="punkt-8"]{--sec:#2b7a2f}
.node[data-target="samlet"]>span:not(.sel){font-size:var(--fs-3)}
.node[data-target="samlet"]>b{font-family:Georgia,serif;font-size:28px;line-height:1}
@media(max-width:600px){.start-heading{grid-template-columns:1fr}}

.start-heading .hud .px,.node[data-target="start"].is-active .node-icon{color:#fff;--flag-outline:#c41f14}
.node[data-target="start"]:not(.is-active) .node-icon{color:#28241c;--flag-outline:#c41f14}
.start-heading .hud,#samlet .hud{background:#fff;border:3px solid #000;color:#000}
.start-heading .hud :is(b,.px,.hud-label),#samlet .hud :is(b,.px,.hud-label){color:#000}
.start-heading .hud::after,#samlet .hud::after{display:none}
.node:is([data-target="start"],[data-target="samlet"]).is-active{background:#fff;border-color:#000;box-shadow:inset 0 0 0 2px #000}
.node:is([data-target="start"],[data-target="samlet"]).is-active :is(b,span,i,.node-icon){color:#000}
.node:is([data-target="start"],[data-target="samlet"]).is-active .sel{border-left-color:#000}
.hero-purpose{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}
.hero-purpose>section{background:var(--paper-2);border:1px solid var(--line);border-top:3px solid #28241c;padding:22px}
.hero-purpose h2{font-size:18px;line-height:1.35;margin:0 0 12px;color:var(--ink);font-weight:500}
.hero-purpose p{font-size:18px;line-height:1.6;margin:0;color:var(--ink)}
@media(max-width:700px){.hero-purpose{grid-template-columns:1fr}}
/* Consistent breathing room below numbered subsection titles and content headings. */
.card .card-body > .micro:first-child{margin-bottom:24px}
.card .card-body > h3 + :is(p,ul,ol,dl,table){margin-top:16px}
.card .stack h3 + p,.card .track-step h3 + p{margin-top:12px}
.hero-purpose h2 + p{margin-top:16px}
.personal-pitch{margin-bottom:28px;border-top:3px solid #28241c}
.personal-pitch h3{font-size:22px;line-height:1.35;margin:0 0 18px}
.personal-pitch ul{margin:0;padding-left:22px;display:grid;gap:14px}
.personal-pitch li{padding-left:4px;line-height:1.65}
#p1-b3 .gate-name{font-weight:400}