/* V32 — Szybkość strony in the shared ds language (ds-v32.css).
   The speed demo keeps its markup, hooks and base styles from knowledge-v21.css / knowledge-v21.js; this file dresses it for a paper band. */

/* Opening illustration: content first, the photo last (an illustration, not a measurement) */
.sp-visual{padding:clamp(22px,2.8vw,40px)}
.sp-art{display:block;width:100%;height:auto;overflow:visible}
.ds .sp-art .w{stroke-width:4}
.ds .sp-art .s{opacity:.5}
.ds .sp-art .d{stroke-dasharray:4 5;opacity:.6}
.sp-art .h{fill:none;stroke:var(--paper);stroke-width:13;stroke-linecap:round}
.sp-art .k{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-step,.sp-wait{animation:8s linear infinite}
.sp-s1{animation-name:sp-s1}.sp-s2{animation-name:sp-s2}.sp-s3{animation-name:sp-s3}.sp-s4{animation-name:sp-s4}.sp-wait{animation-name:sp-wait}
.sp-spin{transform-box:view-box;transform-origin:376px 163px;animation:sp-spin 1s linear infinite}
.sp-bar{transform-box:fill-box;transform-origin:0 50%;animation:sp-bar 8s linear infinite}
@keyframes sp-s1{0%,9%{opacity:0}11%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes sp-s2{0%,17%{opacity:0}19%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes sp-s3{0%,25%{opacity:0}27%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes sp-s4{0%,71%{opacity:0}73%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes sp-wait{0%,71%{opacity:1}73%,100%{opacity:0}}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-bar{0%{transform:scaleX(0);opacity:1}80%,93%{transform:scaleX(1);opacity:1}98%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
.sp-visual figcaption{display:flex;align-items:center;gap:10px;margin:-4px 0 18px;font-size:14.5px;line-height:1.4;color:#b9bcb6}
.sp-visual figcaption:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* Speed demo on a paper band */
.sp-lab :is(button,select){font-family:Figtree,sans-serif}
.ds .sp-controls{gap:16px 24px;padding:0 0 24px}
.sp-controls label{gap:14px;font:600 16px/1.3 Figtree,sans-serif}
.ds .sp-controls select{min-height:50px;padding:12px 14px;border:1px solid #15191c40;border-radius:0;background:var(--white);color:var(--ink);font:400 16px/1.3 Figtree,sans-serif;cursor:pointer}
.sp-controls .ds-button{min-width:250px}
.sp-lab .k-speed-grid{gap:clamp(16px,2vw,28px)}
.sp-lab .k-speed-card{display:flex;flex-direction:column;background:var(--white);border:1px solid #15191c24;box-shadow:0 34px 70px -54px #15191cb3}
.sp-lab .k-speed-label{padding:16px 20px;border-bottom-color:#15191c1f;font-size:16.5px}
.sp-lab .k-speed-label strong{font-weight:600}
.sp-lab .k-speed-label span{padding:5px 8px;background:var(--beige);color:var(--ink);font:700 10.5px/1 Figtree,sans-serif;letter-spacing:.1em}
.sp-lab [data-k-speed-card=after] .k-speed-label span{background:var(--amber)}
.sp-lab .k-load-browser{background:var(--beige)}
.sp-lab .k-load-page{box-shadow:0 1px 0 #15191c14}
.sp-lab .k-speed-meter{margin-top:auto;padding:18px 20px 20px}
.sp-lab .k-speed-track{height:6px;background:#15191c1f}
.sp-lab .k-speed-track i{background:var(--amber)}
.sp-lab [data-k-speed-card=before] .k-speed-track i{background:#8d928b}
.sp-lab .k-speed-measure strong{font:700 32px/1 Sora,sans-serif;letter-spacing:-.05em}
.sp-lab .k-speed-measure span{font-size:13px;color:var(--muted)}
.ds .sp-status{margin:22px 0 0;padding:14px 18px;border-left:4px solid var(--amber);background:var(--white);font-size:15px;line-height:1.55;color:#4f564f}

/* ds-facts: keep the gap under the opening (the shared .ds :is(ul) reset removes it) */
.ds .ds-open .ds-facts{margin-top:clamp(40px,4.5vw,64px)}

/* Cards: 4 → 2 → 1 columns come from ds-v32.css */
@media(max-width:640px){
  .sp-controls label{flex-wrap:wrap;gap:8px 12px}
  .sp-controls .ds-button{min-width:0;width:100%}
  .ds .sp-status{font-size:14px}
}
@media(max-width:600px){.sp-cards h3 br{display:none}}
@media(prefers-reduced-motion:reduce){
  .sp-step,.sp-bar,.sp-spin{animation:none}
  .sp-wait{animation:none;opacity:0}
}