:where(.illu){margin:0}
.illu{position:relative;background:#26282A;overflow:hidden;aspect-ratio:var(--ar)}
.illu__canvas{position:absolute;left:0;top:0;width:100%;aspect-ratio:var(--ar)}
.illu__canvas .illu__bg,.illu__canvas .illu__img,.illu__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.illu>.illu__img,.illu>picture>img{position:static;display:block;width:100%;height:auto}
/* Stały wycinek rysunku (wszystkie szerokości): figura ma --ar-m, płótno --cw i przesunięcie --cx/--cy (jak illu--crop na telefonie). */
.illu--fix{aspect-ratio:var(--ar-m)}
.illu--fix .illu__canvas{width:var(--cw);transform:translate(var(--cx),var(--cy))}
.illu--todo{background:repeating-linear-gradient(-45deg,#26282A 0 14px,#2E3236 14px 28px)}
.theme-light .illu,.theme-beton .illu,.theme-orange .illu{border-radius:4px}
.motion-ok .illu[data-hero]:not(.illu--live):not(.illu--static) .illu__img,.motion-ok .illu[data-hero]:not(.illu--armed):not(.illu--static) .illu-label[data-at]{opacity:0;animation:illu-show 0s 3s forwards}
@keyframes illu-show{to{opacity:1}}

.illu__labels{position:absolute;inset:0;pointer-events:none}
.illu-label{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);font:600 13px/1.25 Barlow,system-ui,sans-serif;letter-spacing:.04em;color:#A6A9AC;white-space:nowrap}
.illu-label--start{transform:translate(0,-100%)}
.illu-label--end{transform:translate(-100%,-100%)}
.illu-label--ground{background:#26282A;padding:1px 4px}
.illu-label--link{pointer-events:auto;color:#EEEEEA;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;border-radius:2px;padding:6px 4px}
.illu-label--link:hover{color:#FFFFFF}
.illu-label--link:focus-visible{outline:2px solid #EE6A1F;outline-offset:2px}
.illu--armed .illu-label[data-at]{opacity:0}
.illu:not(.illu--armed) .illu-label[data-out]{display:none}
.illu-label{transition:filter .1s}
.illu-label.is-cut{filter:opacity(0)}
.illu-label.is-x{transition:none}

@media (min-width:768px){.illu:not(.illu--bp1023) .illu-label--m{display:none}}
@media (min-width:1024px){.illu--bp1023 .illu-label--m{display:none}}
@media (max-width:1023px){
  .illu--bp1023,.illu--bp1023 .illu__canvas{aspect-ratio:var(--ar-m)}
  .illu--bp1023 .illu-label{left:var(--xm,var(--x));top:var(--ym,var(--y))}
  .illu--bp1023 .illu-label--d{display:none}
}
@media (max-width:767px){
  .illu-label{font-size:12px;left:var(--xm,var(--x));top:var(--ym,var(--y))}
  .illu-label--d{display:none}
  .illu-label--end-m{transform:translate(-100%,-100%)}
  .illu--alt,.illu--alt .illu__canvas{aspect-ratio:var(--ar-m)}
  .illu--crop{aspect-ratio:var(--ar-m)}
  .illu--crop .illu__canvas{width:var(--cw);transform:translate(calc(var(--cx) + var(--px,0%)),var(--cy))}
  .motion-ok .illu[data-hero][data-pan-m]:not(.illu--armed):not(.illu--static){--cx:0%!important}
  .illu__svg .i-core{stroke-width:5}
  .illu__svg .i-glow{stroke-width:14}
}

.story{--st-edge:var(--kernlicht,#7DF0FF);--st-num:var(--fenster,#FFD58A)}
.theme-light .story,.theme-beton .story{--st-edge:var(--ink,#26282A);--st-num:var(--ink,#26282A)}
.story__art{margin:0 0 32px}
.story__steps{list-style:none;margin:0;padding:0;display:grid;gap:24px;counter-reset:st}
.story__step{padding:2px 0 2px 20px;border-left:3px solid rgba(166,169,172,.28);max-width:52ch}
.story__step h3::before{counter-increment:st;content:counter(st,decimal-leading-zero);display:block;margin-bottom:4px;font:800 1rem/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.06em;color:var(--ink-muted,#A6A9AC)}
.story__step h3{margin:0 0 8px}
.story__step p{margin:0}
.story__step.is-active{border-left-color:var(--st-edge)}
.story__step.is-active h3::before{color:var(--st-num)}
.story__end{margin:40px 0 16px;max-width:60ch}
.story.is-live .story__step{min-height:50svh}
@media (min-width:1024px){
  .story.is-live{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .story.is-live .story__steps{grid-column:1/6;grid-row:1;gap:0;padding:36svh 0 20svh}
  .story.is-live .story__step{min-height:38svh}
  .story.is-live .story__art{grid-column:6/13;grid-row:1;position:sticky;top:calc(var(--header-h,64px) + 4svh);margin:0}
}
@media (max-width:1023px){
  .story.is-live{display:flow-root;padding-bottom:var(--st-last,0px)}
  .story.is-live .story__art{position:sticky;top:calc(var(--header-h,64px) + var(--strip-h,0px));z-index:2;background:var(--bg,#26282A);margin:0;padding:8px 0 16px}
  .story.is-live .story__art .illu{width:min(100%,calc(min(48svh,380px) * var(--ar)));margin-inline:auto}
  .story.is-live .story__steps{gap:0}
  .story.is-live .story__step{min-height:calc(40svh + var(--h,0px));margin-bottom:calc(-1 * var(--h,0px));padding:0;border-left:0}
  .story.is-live .story__txt{position:sticky;top:var(--st-top,0px);z-index:1;padding:4px 0 12px 20px;border-left:3px solid var(--st-edge);background:var(--bg,#26282A);opacity:0}
  .story.is-live .story__step.is-active .story__txt{opacity:1;transition:opacity .14s}
}
@media (max-width:767px){
  .story.is-live .story__art .illu--crop{width:min(100%,calc(min(48svh,380px) * var(--ar-m)))}
}