@charset "UTF-8";
/* Testovací platforma HDK — painted walk-through.
   A fixed 1920x1080 stage, scaled to the window by pitch.js: the layout is drawn once and
   looks the same on every screen. The stage is a drawing sheet (frame, zone marks, title
   block); the product screens on it use the app's own "Clinical Light" palette. */

:root{
  --paper:#f3f5f8; --desk:#d9dee6; --grid:rgba(22,33,46,.045); --frame:rgba(22,33,46,.28);
  --panel:#fff; --line:#e4e8ee; --line2:#d4dae2; --wash:#f7f9fb;
  --ink:#16212e; --ink2:#3c4858; --muted:#697587; --faint:#9aa6b4;
  --accent:#0fa597; --accent-d:#0c7f74; --soft:#e6f6f4; --soft-line:#cfe9e5;
  --pass:#11a06b; --fail:#e5484d; --run:#2f6bff; --warn:#d6890c; --idle:#9aa6b4;
  --t1:#0fa597; --t2:#2f6bff; --t7:#d6890c;
  --night:#0f1720;
  --disp:'Hanken Grotesk','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace;
  --sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --sh-win:0 40px 90px -40px rgba(16,24,40,.38),0 3px 10px rgba(16,24,40,.06);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--desk)}
body{font-family:var(--disp);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}

#stage{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%);transform-origin:center center;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
  box-shadow:0 30px 120px rgba(16,24,40,.25);
  overflow:hidden;
}

/* ---------------------------------------------------------------- the sheet */
.sheet .frame{position:absolute;inset:40px;border:1.5px solid var(--frame);pointer-events:none}
.zones{position:absolute;display:flex;font:500 12px var(--mono);color:var(--faint);letter-spacing:.06em}
.zones span{flex:1;display:grid;place-items:center}
.zones-top,.zones-bottom{left:40px;right:40px;height:40px}
.zones-top{top:0}.zones-bottom{bottom:0}
.zones-left,.zones-right{top:40px;bottom:40px;width:40px;flex-direction:column}
.zones-left{left:0}.zones-right{right:0}
.zones-top span+span,.zones-bottom span+span{border-left:1px solid var(--frame)}
.zones-left span+span,.zones-right span+span{border-top:1px solid var(--frame)}

/* ---------------------------------------------------------------- scenes */
.scene{display:none;position:absolute;inset:40px}
.scene.is-active{display:block;animation:scene-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes scene-in{from{opacity:0}to{opacity:1}}

.copy{position:absolute;left:72px;top:92px;width:548px}
.canvas{position:absolute;left:660px;top:56px;width:1150px;height:800px}

.kicker{margin:0 0 30px;font:500 16px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d)}
h1,h2{margin:0;font-weight:800;font-size:70px;line-height:1.03;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:82px}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.02em;color:var(--accent-d);font-size:1.07em}
.lead{margin:30px 0 0;font-size:24px;line-height:1.5;color:var(--ink2)}

.beats{list-style:none;margin:46px 0 0;padding:0;counter-reset:beat}
.beats li{counter-increment:beat;position:relative;padding:3px 0 3px 58px;margin-bottom:20px;opacity:.36;transition:opacity .4s}
.beats li::before{content:counter(beat);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font:600 16px var(--mono);border:1.5px solid var(--line2);background:var(--panel);color:var(--muted);transition:all .4s}
.beats li b{display:block;font-weight:700;font-size:23px;line-height:1.35}
.beats li span{display:none;margin-top:5px;font-size:19px;line-height:1.45;color:var(--muted)}
.beats li.is-done{opacity:.62}
.beats li.is-done::before{border-color:var(--accent);color:var(--accent-d)}
.beats li.is-current{opacity:1}
.beats li.is-current::before{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 6px rgba(15,165,151,.16)}
.beats li.is-current span{display:block;animation:appear .45s both}

/* the way on, where the painted screen itself offers nothing to click */
.onward{margin:36px 0 0}
.onward .btn{padding:13px 22px;font-size:18px;border-radius:14px}
.rowlink{display:inline-block;padding:2px 12px;margin:-2px -12px;border-radius:999px}

/* ---------------------------------------------------------------- beat machinery */
[data-on]:not(.is-on){display:none !important}
[data-on].is-on{animation:appear .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

[data-hot].is-hot{cursor:pointer}
.hints-on [data-hot].is-hot{animation:pulse 1.9s ease-out infinite}
.hints-on [data-on].is-on[data-hot].is-hot{animation:appear .45s cubic-bezier(.2,.7,.2,1) both,pulse 1.9s ease-out .45s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,165,151,.55)}70%{box-shadow:0 0 0 16px rgba(15,165,151,0)}100%{box-shadow:0 0 0 0 rgba(15,165,151,0)}}

/* going backwards: no waiting for staged animations */
.rewind .steps li,.rewind .steps li *,.rewind .comms span{animation-delay:0s !important;animation-duration:.01s !important}

/* ---------------------------------------------------------------- shared UI paint */
.mark{width:42px;height:42px;border-radius:12px;display:inline-grid;place-items:center;flex:none;
  background:linear-gradient(160deg,#13b3a3,#0c7f74);color:#fff;font-weight:800;font-size:13px;letter-spacing:.03em;
  box-shadow:0 6px 14px rgba(15,165,151,.28)}
.grow{flex:1}
.mono{font-family:var(--mono)}
.ok{color:var(--pass)}
.bad{color:var(--fail)}

.win{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line2);border-radius:22px;box-shadow:var(--sh-win);overflow:hidden}
.win-bar{flex:none;height:52px;display:flex;align-items:center;gap:20px;padding:0 22px;background:#f1f4f8;border-bottom:1px solid var(--line)}
.dots{display:inline-flex;gap:8px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--line2)}
.url{display:inline-flex;align-items:center;gap:11px;min-width:420px;padding:7px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font:500 15px var(--mono);color:var(--ink2)}
.lock{position:relative;display:inline-block;width:11px;height:9px;border-radius:2px;background:var(--pass);margin-top:4px}
.lock::before{content:"";position:absolute;left:2px;top:-6px;width:7px;height:8px;border:2px solid var(--pass);border-bottom:0;border-radius:5px 5px 0 0}

.app-head{flex:none;height:74px;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid var(--line)}
.app-head>b{font-weight:700;font-size:23px}
.crumb{font-size:18px;color:var(--muted)}
.who{font-size:15px;color:var(--muted);font-family:var(--mono)}
.langs{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.langs i{font:500 12px var(--mono);font-style:normal;padding:6px 10px;color:var(--muted);background:#fff}
.langs i.on{background:var(--accent);color:#fff}

.app-body{flex:1;min-height:0;padding:24px 26px;position:relative}
.app-body.split{display:grid;grid-template-columns:1.5fr 1fr;gap:26px}
.pane{min-width:0;display:flex;flex-direction:column}
h4{margin:0 0 12px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.kpi span{display:block;font-weight:600;font-size:15px;color:var(--muted)}
.kpi b{display:block;margin-top:4px;font:500 34px var(--mono);letter-spacing:-.02em}
.kpi small{font-size:18px;color:var(--muted);font-weight:400}

table.grid{width:100%;border-collapse:collapse;font-size:20px}
.grid th{text-align:left;padding:11px 16px;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.grid td{padding:15px 16px;border-bottom:1px solid #f0f3f6}
.grid tr:last-child td{border-bottom:0}
.grid td.mono{font-size:18px}
.grid .act{text-align:right}
.grid .row-alert td{background:rgba(229,72,77,.06)}
.grid .row-skip td{color:var(--faint)}
.grid.tight{font-size:17.5px}
.grid.tight td{padding:12px 11px}
.grid.tight td.mono{font-size:16.5px}
.grid.tight th{padding:9px 11px}

.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;font-weight:700;font-size:15.5px;white-space:nowrap}
.chip .b{width:9px;height:9px;border-radius:50%}
.c-run{color:var(--run);background:rgba(47,107,255,.10)}.c-run .b{background:var(--run)}
.c-pass{color:var(--pass);background:rgba(17,160,107,.12)}.c-pass .b{background:var(--pass)}
.c-fail{color:var(--fail);background:rgba(229,72,77,.10)}.c-fail .b{background:var(--fail)}
.c-int{color:var(--warn);background:rgba(214,137,12,.13)}.c-int .b{background:var(--warn)}
.c-off{color:var(--muted);background:#eef1f5}.c-off .b{background:var(--idle)}
.chip.solid{padding:8px 18px;font-size:17px;letter-spacing:.06em;color:#fff}
.chip.solid.c-fail{background:var(--fail)}

.linkchip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-weight:600;font-size:16px;
  color:var(--accent-d);background:var(--soft);border:1px solid var(--soft-line);white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;border:1px solid var(--line2);
  background:#fff;box-shadow:var(--sh);font-weight:700;font-size:17px;white-space:nowrap}
.btn.go{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--fail);border-color:rgba(229,72,77,.4)}

.s-run,.s-int,.s-fail{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px}
.s-run{background:var(--run)}.s-int{background:var(--warn)}.s-fail{background:var(--fail)}

.track{height:14px;border-radius:7px;background:#eef1f5;overflow:hidden}
.track i{display:block;height:100%;border-radius:7px;background:var(--run)}
.w57{width:57%}

/* dark code / console blocks */
.code{margin:0;font:400 17px/1.62 var(--mono);color:#d6e2ea;white-space:normal;tab-size:2}
.code .ln{display:block;white-space:pre;min-height:1.62em}
.code .k{color:#7dd3c8}.code .s{color:#f2c97d}.code .n{color:#9cc4ff}.code .c{color:#8ba0b3;font-style:italic}
.code .t{color:#fff;font-weight:600;border-bottom:1.5px dotted rgba(255,255,255,.55)}

/* ---------------------------------------------------------------- steps list */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:28px 1fr auto 96px;align-items:center;gap:14px;
  padding:13px 14px;border-radius:12px;font-size:20px;transition:background .3s}
.steps li+li{margin-top:2px}
.steps .st{position:relative;width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);background:#fff}
.steps .st::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
.steps code{font:400 14px var(--mono);color:var(--faint)}
.steps .val{font:500 18px var(--mono);font-style:normal;text-align:right;color:var(--ink2)}
.steps .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@keyframes st-done{to{background:var(--pass);border-color:var(--pass)}}
@keyframes st-check{to{opacity:1}}
@keyframes st-now{to{border-color:rgba(47,107,255,.25);border-top-color:var(--run)}}
@keyframes row-now{to{background:rgba(47,107,255,.07)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* states, used by the scenes below */
.is-done .st,.done .st{background:var(--pass);border-color:var(--pass)}
.is-done .st::after,.done .st::after{opacity:1}

/* ---------------------------------------------------------------- 0 · intro */
.scene-intro .copy{top:120px}
.scene-intro .lead{font-size:25px}
.agenda{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.agenda li{display:flex;align-items:center;gap:14px;font-weight:700;font-size:21px}
.agenda b{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent-d);color:#fff;font:600 16px var(--mono)}

.hero{display:block;width:100%;height:100%;overflow:visible}
.hero .ln{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-linecap:round}
.hero .thin{stroke-width:1.5}
.hero .hatch-line{stroke:var(--frame);stroke-width:1.2}
.hero .body{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.hero .foot{fill:var(--ink)}
.hero .door{stroke:var(--accent-d);stroke-width:2}
.hero .unit{fill:#fff;stroke:var(--ink2);stroke-width:1.8}
.hero .display{fill:var(--night)}
.hero .digits{font:600 22px var(--mono);fill:#5eead4}
.hero .knob{fill:#fff;stroke:var(--ink2);stroke-width:1.8}
.hero .jack{fill:var(--ink2)}
.hero .leds circle{fill:var(--pass)}
.hero .leds circle:nth-child(3n){fill:var(--warn)}
.hero .ports rect{fill:none;stroke:var(--ink2);stroke-width:1.6}
.hero .unit-label{font:500 14px var(--mono);fill:var(--muted)}
.hero .pcb{fill:var(--accent)}
.hero .part{fill:var(--ink)}
.hero .probes line{stroke:var(--warn);stroke-width:2.5;stroke-linecap:round}
.hero .lamp{stroke:var(--ink);stroke-width:2}
.hero .lamp-r{fill:#f6d5d6}.hero .lamp-a{fill:#f6e6c4}.hero .lamp-g{fill:var(--pass)}
.hero .glow{fill:rgba(17,160,107,.2);animation:glow 2.4s ease-in-out infinite;transform-origin:236px 184px}
@keyframes glow{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.hero .browser{fill:#fff;stroke:var(--line2);stroke-width:1.5;filter:drop-shadow(0 26px 40px rgba(16,24,40,.18))}
.hero .browser-bar{fill:#f1f4f8}
.hero .dot3{fill:var(--line2)}
.hero .url{fill:#fff;stroke:var(--line)}
.hero .url-text{font:500 12px var(--mono);fill:var(--ink2)}
.hero .mini-h{font:800 21px var(--disp);fill:var(--ink)}
.hero .mini-s{font:500 13px var(--mono);fill:var(--muted)}
.hero .mini-rows rect{fill:#dfe5ec}
.hero .mini-rows .val{fill:var(--soft-line)}
.hero .mini-rows .cur{fill:rgba(47,107,255,.34)}
.hero .mini-rows .dim{fill:#eef1f5}
.hero .mini-rows .ok{fill:var(--pass)}
.hero .mini-rows .now{fill:var(--run);animation:blink 1.2s ease-in-out infinite}
.hero .mini-rows .todo{fill:none;stroke:var(--line2);stroke-width:2}
@keyframes blink{50%{opacity:.35}}
.hero .bar-bg{fill:#eef1f5}.hero .bar-fg{fill:var(--run)}
.hero .chip-run{fill:rgba(47,107,255,.12)}
.hero .chip-text{font:800 13px var(--disp);fill:var(--run);letter-spacing:.1em}
.hero .dim-line line{stroke:var(--muted);stroke-width:1.2}
.hero .dim-line text{font:500 14px var(--mono);fill:var(--muted);letter-spacing:.1em}
.hero .callout line{stroke:var(--accent-d);stroke-width:1.6}
.hero .callout circle{fill:var(--accent-d)}
.hero .callout .n{font:600 19px var(--mono);fill:#fff}
.hero .callout .t{font:700 21px var(--disp);fill:var(--ink)}

/* ---------------------------------------------------------------- 1 · access */
.device{position:absolute;transition:opacity .5s,filter .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
.device .screen{position:relative;background:#fff;overflow:hidden;box-shadow:var(--sh-win)}
.dev-cap{margin:12px 0 0;text-align:center;font:500 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.dev-monitor{left:10px;top:14px;width:700px}
.dev-monitor .screen{height:430px;border:14px solid #1c2733;border-radius:22px}
.stand{width:96px;height:54px;margin:0 auto;background:linear-gradient(#2a3746,#1c2733)}
.stand-foot{width:280px;height:14px;margin:0 auto;border-radius:8px 8px 3px 3px;background:#1c2733}

.dev-laptop{left:436px;top:318px;width:700px}
.dev-laptop .screen{width:620px;height:380px;margin:0 auto;border:12px solid #1c2733;border-bottom-width:14px;border-radius:18px 18px 0 0}
.base{height:22px;border-radius:3px 3px 20px 20px;background:linear-gradient(#d3d9e1,#aeb7c3);position:relative}
.base::after{content:"";position:absolute;left:50%;top:0;width:110px;height:8px;margin-left:-55px;border-radius:0 0 8px 8px;background:#9aa4b1}

.dev-phone{left:60px;top:372px;width:226px}
.dev-phone .screen{height:410px;border:10px solid #1c2733;border-radius:34px}

/* one device is in focus per beat; the others stay opaque but washed out, so that
   overlapping devices never show through each other */
.device .screen::after{content:"";position:absolute;inset:0;background:rgba(238,241,245,.82);transition:opacity .5s;z-index:3}
.device .screen,.stand,.stand-foot,.base{transition:border-color .5s,background .5s,box-shadow .5s}
.scene-access .device{z-index:1}
.scene-access .dev-laptop{z-index:2}
.scene-access .dev-phone{z-index:3}
.scene-access .device .screen{border-color:#b4bcc8;box-shadow:var(--sh)}
.scene-access .stand,.scene-access .stand-foot{background:#b4bcc8}
.scene-access .device .dev-cap{opacity:.55}
.scene-access[data-beat="1"] .dev-monitor,
.scene-access[data-beat="2"] .dev-laptop,
.scene-access[data-beat="3"] .dev-phone{z-index:5;transform:scale(1.03)}
.scene-access[data-beat="1"] .dev-monitor .screen,
.scene-access[data-beat="2"] .dev-laptop .screen,
.scene-access[data-beat="3"] .dev-phone .screen{border-color:#1c2733;box-shadow:var(--sh-win)}
.scene-access[data-beat="1"] .dev-monitor .screen::after,
.scene-access[data-beat="2"] .dev-laptop .screen::after,
.scene-access[data-beat="3"] .dev-phone .screen::after{opacity:0}
.scene-access[data-beat="1"] .dev-monitor .stand,.scene-access[data-beat="1"] .dev-monitor .stand-foot{background:#1c2733}
.scene-access[data-beat="1"] .dev-monitor .dev-cap,
.scene-access[data-beat="2"] .dev-laptop .dev-cap,
.scene-access[data-beat="3"] .dev-phone .dev-cap{opacity:1}
.hints-on .device[data-hot].is-hot{animation:none}
.hints-on .device[data-hot].is-hot .screen{animation:pulse 1.9s ease-out infinite}
.hints-on .device[data-hot].is-hot .screen::after{opacity:.45}

.kiosk{padding:24px 34px}
.kiosk-top{display:flex;align-items:center;gap:16px}
.kiosk-who{flex:1;font:500 15px var(--mono);color:var(--muted)}
.kiosk-label{margin:22px 0 0;font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--run)}
.kiosk-product{margin:4px 0 0;font-weight:800;font-size:42px;letter-spacing:-.02em}
.kiosk-sn{margin:2px 0 20px;font:500 24px var(--mono);color:var(--muted)}
.kiosk-step{margin:16px 0 0;font-size:23px;font-weight:600}
.kiosk-step span{display:block;font:500 15px var(--mono);color:var(--muted);margin-bottom:2px}
.kiosk-actions{position:absolute;right:34px;bottom:24px}

.urlbar{height:34px;display:flex;align-items:center;gap:9px;padding:0 16px;background:#f1f4f8;border-bottom:1px solid var(--line);font:500 12.5px var(--mono);color:var(--ink2)}
.eng-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.eng-head b{font-size:17px}
.eng-head span:not(.chip){flex:1;font-size:14px;color:var(--muted)}
.eng-head .chip{font-size:13px;padding:3px 10px}
.eng-steps{list-style:none;margin:0;padding:10px 12px}
.eng-steps li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px;padding:8px 8px;border-radius:9px;font-size:16.5px}
.eng-steps i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2)}
.eng-steps em{font:500 15px var(--mono);font-style:normal;color:var(--ink2)}
.eng-steps .done i{background:var(--pass);border-color:var(--pass)}
.eng-steps .now{background:rgba(47,107,255,.08)}
.eng-steps .now i{border-color:rgba(47,107,255,.25);border-top-color:var(--run);animation:spin 1s linear infinite}

.mob{padding:18px 16px}
.mob-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mob-top .mark{width:34px;height:34px;border-radius:10px;font-size:11px}
.mob-top .langs i{padding:4px 7px;font-size:11px}
.mob-k{margin:10px 0 0;font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mob-v{margin:0;font:600 34px var(--mono);letter-spacing:-.02em}
.mob-v small{font-size:15px;font-weight:400;color:var(--muted)}
.mob-list{list-style:none;margin:16px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.mob-list li{display:flex;align-items:center;padding:6px 0;font:500 13.5px var(--mono)}
.mob-list span{margin-left:auto;color:var(--muted)}

.same-run{position:absolute;left:744px;top:214px;margin:0;font:500 15px var(--mono);color:var(--muted);line-height:1.6;width:330px}
.same-run span{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--soft-line);color:var(--accent-d);font-weight:600}

/* ---------------------------------------------------------------- 2 · observe */
.alerts{margin-top:18px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.alerts p{margin:0;font-size:17.5px;line-height:1.9;color:var(--ink2)}
.alerts b{color:var(--ink)}

.progress{flex:none;height:6px;background:#eef1f5;position:relative}
.progress i{position:absolute;left:0;top:0;bottom:0}
.p-run{width:38%;background:var(--run)}
.p-fail{width:100%;background:var(--fail)}

/* the live list: steps tick in as the tester works through them */
.scene-observe[data-beat="2"] .s1 .st,.scene-observe[data-beat="3"] .s1 .st{animation:st-done .25s .35s both}
.scene-observe[data-beat="2"] .s1 .st::after,.scene-observe[data-beat="3"] .s1 .st::after{animation:st-check .2s .45s both}
.scene-observe[data-beat="2"] .s2 .st,.scene-observe[data-beat="3"] .s2 .st{animation:st-done .25s 1.05s both}
.scene-observe[data-beat="2"] .s2 .st::after,.scene-observe[data-beat="3"] .s2 .st::after{animation:st-check .2s 1.15s both}
.scene-observe[data-beat="2"] .s2 .val,.scene-observe[data-beat="3"] .s2 .val{animation:fade-in .3s 1.05s both}
.scene-observe[data-beat="2"] .s3{animation:row-now .3s 1.6s both}
.scene-observe[data-beat="2"] .s3 .st{animation:st-now .2s 1.6s both,spin 1s 1.6s linear infinite}
.scene-observe[data-beat="3"] .s3{background:rgba(229,72,77,.08)}
.scene-observe[data-beat="3"] .s3 .st{background:var(--fail);border-color:var(--fail)}
.scene-observe[data-beat="3"] .s3 .st::after{content:"✕";left:0;top:0;width:100%;height:100%;border:0;transform:none;opacity:1;
  display:grid;place-items:center;color:#fff;font:700 13px var(--disp)}
.scene-observe[data-beat="3"] .s3 .val{color:var(--fail);font-weight:600}
.scene-observe[data-beat="3"] .s3 .nm{font-weight:700}
.scene-observe[data-beat="3"] .s4,.scene-observe[data-beat="3"] .s5,.scene-observe[data-beat="3"] .s6{opacity:.4}
.scene-observe[data-beat="3"] .s4 .val::after,.scene-observe[data-beat="3"] .s5 .val::after,.scene-observe[data-beat="3"] .s6 .val::after{content:"přeskočeno";font-size:14px;color:var(--muted)}
.scene-observe[data-beat="3"] .s7 .st{background:var(--pass);border-color:var(--pass)}
.scene-observe[data-beat="3"] .s7 .st::after{opacity:1}

.meter{padding:16px 20px 18px;border:1px solid var(--line);border-radius:16px;background:var(--wash);margin-bottom:22px}
.meter-name{margin:0;font:500 15px var(--mono);color:var(--muted)}
.meter-val{margin:2px 0 0;font:600 52px/1.15 var(--mono);letter-spacing:-.03em}
.meter-val small{font-size:24px;font-weight:400;color:var(--muted)}
.meter-val:not(.bad){font-size:30px;line-height:60px;color:var(--run);letter-spacing:0;font-weight:500}
.dots3 i{font-style:normal;animation:blink 1.2s infinite}
.dots3 i:nth-child(2){animation-delay:.2s}.dots3 i:nth-child(3){animation-delay:.4s}
.range{position:relative;height:44px;margin-top:10px}
.range::before{content:"";position:absolute;left:0;right:0;top:6px;height:8px;border-radius:4px;background:#e6eaf0}
.range-ok{position:absolute;left:25%;right:25%;top:6px;height:8px;border-radius:4px;background:rgba(17,160,107,.45)}
.range-mark{position:absolute;left:20%;top:-2px;width:5px;height:24px;margin-left:-2px;border-radius:3px;background:var(--fail)}
.range-lo,.range-hi{position:absolute;top:22px;font:500 14px var(--mono);color:var(--muted);margin-left:-18px}
.range-lo{left:25%}.range-hi{left:75%}
.meter-note{margin:4px 0 0;font-size:16px;font-weight:600;color:var(--fail)}

.comms{margin:0 0 18px;padding:14px 18px;border-radius:14px;background:var(--night);font:400 15px/1.72 var(--mono);color:#c9d6df;white-space:normal}
.comms span{display:block;white-space:pre}
.comms b{font-weight:600;color:#5eead4}
.comms span:nth-child(even) b{color:#f2c97d}
.scene-observe[data-beat="2"] .comms .c1,.scene-observe[data-beat="3"] .comms .c1{animation:fade-in .25s .35s both}
.scene-observe[data-beat="2"] .comms .c2,.scene-observe[data-beat="3"] .comms .c2{animation:fade-in .25s .55s both}
.scene-observe[data-beat="2"] .comms .c3,.scene-observe[data-beat="3"] .comms .c3{animation:fade-in .25s .85s both}
.scene-observe[data-beat="2"] .comms .c4,.scene-observe[data-beat="3"] .comms .c4{animation:fade-in .25s 1.05s both}
.scene-observe[data-beat="2"] .comms .c5,.scene-observe[data-beat="3"] .comms .c5{animation:fade-in .25s 1.6s both}
.comms .c6 b{color:#f2c97d}
.why{align-self:flex-start}

/* ---------------------------------------------------------------- 3 · debug */
.debugbar{flex:none;display:flex;align-items:center;gap:10px;padding:12px 26px;border-bottom:1px solid var(--line);background:var(--wash)}
.debugbar .btn{padding:9px 16px;font-size:16px}
.debug-state{margin-left:10px;font-size:17px;color:var(--muted)}
.debug-state.paused{color:var(--warn);font-weight:700}
.debug-state code{font:600 16px var(--mono);padding:2px 8px;border-radius:7px;background:rgba(214,137,12,.14)}

.steps.dbg li{grid-template-columns:18px 28px 1fr auto 96px}
.steps.dbg u{width:16px;height:16px;border-radius:50%;text-decoration:none}
.steps.dbg u.bp{background:var(--fail);box-shadow:0 0 0 4px rgba(229,72,77,.18)}
.scene-debug[data-beat="2"] .s1 .st,.scene-debug[data-beat="3"] .s1 .st,
.scene-debug[data-beat="2"] .s2 .st,.scene-debug[data-beat="3"] .s2 .st{background:var(--pass);border-color:var(--pass)}
.scene-debug[data-beat="2"] .s1 .st::after,.scene-debug[data-beat="3"] .s1 .st::after,
.scene-debug[data-beat="2"] .s2 .st::after,.scene-debug[data-beat="3"] .s2 .st::after{opacity:1}
/* the failed measurement routes to the end of the plan: the next stop is the last step */
.scene-debug[data-beat="2"] .s3,.scene-debug[data-beat="3"] .s7{background:rgba(214,137,12,.13);box-shadow:inset 4px 0 0 var(--warn)}
.scene-debug[data-beat="2"] .s3 .st,.scene-debug[data-beat="3"] .s7 .st{border-color:var(--warn);background:var(--warn)}
.scene-debug[data-beat="2"] .s3 .st::after,.scene-debug[data-beat="3"] .s7 .st::after{content:"";left:8px;top:5px;width:0;height:0;border:solid transparent;border-width:5px 0 5px 8px;border-left-color:#fff;transform:none;opacity:1}
.scene-debug[data-beat="3"] .s4,.scene-debug[data-beat="3"] .s5,.scene-debug[data-beat="3"] .s6{opacity:.4}
.scene-debug[data-beat="3"] .s4 .val::after,.scene-debug[data-beat="3"] .s5 .val::after,.scene-debug[data-beat="3"] .s6 .val::after{content:"přeskočeno";font-size:14px;color:var(--muted)}
.scene-debug[data-beat="3"] .s3{background:rgba(229,72,77,.08)}
.scene-debug[data-beat="3"] .s3 .st{background:var(--fail);border-color:var(--fail)}
.scene-debug[data-beat="3"] .s3 .st::after{content:"✕";left:0;top:0;width:100%;height:100%;border:0;transform:none;opacity:1;display:grid;place-items:center;color:#fff;font:700 13px var(--disp)}
.scene-debug[data-beat="3"] .s3 .val{color:var(--fail);font-weight:600}

.inspector{border-left:1px solid var(--line);padding-left:26px}
.insp-empty{height:100%;display:grid;place-items:center;text-align:center;padding:0 30px}
.insp-empty p{margin:0;font-size:19px;line-height:1.5;color:var(--faint)}
.insp h4{margin-top:22px}.insp h4:first-child{margin-top:0}
.insp dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.insp dt{font:500 17px var(--mono);color:var(--accent-d)}
.insp dd{margin:0;font:500 17px var(--mono);color:var(--ink)}
.insp dd small{display:block;font-size:13.5px;font-weight:400;color:var(--muted)}
.route{display:flex;align-items:center;gap:0;margin:0}
.route span{padding:8px 14px;border:1px solid var(--line2);border-radius:10px;background:#fff;font:500 16px var(--mono)}
.route i{flex:1;height:2px;min-width:18px;background:var(--accent)}
.verdict-note{margin:22px 0 0;padding:14px 18px;border-radius:14px;border-left:4px solid var(--accent);background:var(--soft);font-size:18px;line-height:1.45;font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- 4 · stats */
.toggle{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 8px;border-radius:999px;border:1px solid var(--line2);font-weight:600;font-size:17px;background:#fff}
.toggle i{position:relative;width:46px;height:26px;border-radius:13px;background:var(--line2);transition:background .3s}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.3);transition:left .3s}
.scene-stats[data-beat="2"] .toggle i,.scene-stats[data-beat="3"] .toggle i{background:var(--accent)}
.scene-stats[data-beat="2"] .toggle i::after,.scene-stats[data-beat="3"] .toggle i::after{left:23px}

.app-body.stats{display:flex;flex-direction:column}
.chart-wrap{flex:none;height:506px;display:grid;grid-template-columns:1fr 430px;gap:22px}
.chart-wrap .grid td,.chart-wrap .grid th{white-space:nowrap}
.chart{display:block;width:100%;height:100%;border:1px solid var(--line);border-radius:16px;background:#fff}
.chart .band{fill:rgba(17,160,107,.07)}
.chart .lim{stroke:var(--fail);stroke-width:2;stroke-dasharray:8 6;opacity:.75}
.chart .axis{stroke:var(--line2);stroke-width:1.5}
.chart .ax{font:500 14px var(--mono);fill:var(--muted)}
.chart .lim-t{fill:var(--fail);font-size:12.5px}
.chart .trace{fill:none;stroke:#c9d1da;stroke-width:1.5}
.chart .pt{fill:var(--ink2);stroke:#fff;stroke-width:2;transition:fill .7s,stroke .7s}
.chart .pt.bad{fill:var(--fail)}
.scene-stats[data-beat="2"] .pt.t1,.scene-stats[data-beat="3"] .pt.t1{fill:var(--t1)}
.scene-stats[data-beat="2"] .pt.t2,.scene-stats[data-beat="3"] .pt.t2{fill:var(--t2)}
.scene-stats[data-beat="2"] .pt.t7,.scene-stats[data-beat="3"] .pt.t7{fill:var(--t7)}
.scene-stats[data-beat="2"] .pt.bad,.scene-stats[data-beat="3"] .pt.bad{stroke:var(--fail);stroke-width:3}
.t7-zone rect{fill:rgba(214,137,12,.08);stroke:var(--t7);stroke-width:1.5;stroke-dasharray:6 5}
.t7-zone text{font:700 16px var(--disp);fill:var(--t7);letter-spacing:.04em}

.by-tester{border:1px solid var(--line);border-radius:16px;background:var(--wash);padding:18px 18px;display:flex;flex-direction:column}
.bt-empty{flex:1;display:grid;place-items:center;text-align:center;padding:0 20px}
.bt-empty p{margin:0;font-size:18px;line-height:1.5;color:var(--faint)}
.bt{display:flex;flex-direction:column;flex:1}
.bt .grid{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;border-collapse:separate;border-spacing:0}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:9px}
.sw.t1{background:var(--t1)}.sw.t2{background:var(--t2)}.sw.t7{background:var(--t7)}
.conclusion{margin-top:16px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--soft-line);border-left:4px solid var(--accent)}
.conclusion p{margin:0 0 8px;font-size:17.5px;line-height:1.45}
.conclusion .c-h{font:600 12.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d)}
.conclusion .c-k{color:var(--muted)}
.conclusion .c-k b{color:var(--pass);font-family:var(--mono)}
.conclusion .c-a{margin:12px 0 0}
.conclusion .btn{font-size:15.5px;padding:10px 14px}

/* ---------------------------------------------------------------- 5 · links */
.prov{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:0;margin-bottom:22px;border:1px solid var(--line);border-radius:14px;background:var(--wash);overflow:hidden}
.prov div{padding:14px 18px}
.prov div+div{border-left:1px solid var(--line)}
.prov span{display:block;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.prov b{display:block;margin-top:5px;font:500 18px var(--mono)}

.schema-body{display:flex;flex-direction:column;gap:14px;padding:16px 22px 18px}
.schema{position:relative;flex:none;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.schema img{display:block;width:100%;height:auto}
.tp{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);
  background:var(--accent);color:#fff;font:600 16px var(--mono);font-style:normal;box-shadow:0 0 0 4px rgba(15,165,151,.24)}
.tp.sel{width:44px;height:44px;font-size:19px;background:var(--fail);box-shadow:0 0 0 6px rgba(229,72,77,.25);animation:tp-pulse 1.8s ease-out infinite;z-index:2}
@keyframes tp-pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}70%{box-shadow:0 0 0 26px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.tp1{left:35.2%;top:22.6%}.tp2{left:24.7%;top:34.1%}.tp3{left:14.2%;top:22.6%}
.tp4{left:87.9%;top:42.6%}.tp5{left:91.2%;top:46.9%}.tp6{left:91.5%;top:56.2%}

.tp-card{flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;padding:12px 24px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.tp-id{display:flex;align-items:center;gap:16px}
.tp-id .tp,.lc-h .tp{position:static;transform:none;animation:none;flex:none}
.tp-id b{display:block;font-size:22px}
.tp-id span{display:block;font:500 15px var(--mono);color:var(--muted)}
.tp-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;margin:0;font-size:17px}
.tp-card dt{color:var(--muted)}
.tp-card dd{margin:0;font-weight:600}
.tp-links{display:flex;flex-direction:column;gap:8px;margin:0}

.chain{position:absolute;inset:0}
.link-card{position:absolute;width:528px;height:320px;padding:26px 30px;background:#fff;border:1px solid var(--line2);border-radius:22px;box-shadow:var(--sh-win);z-index:2}
.lc1{left:20px;top:40px}.lc2{left:622px;top:40px}.lc3{left:622px;top:430px}.lc4{left:20px;top:430px}
.lc-k{margin:0 0 12px;font:600 13.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d)}
.lc-h{display:flex;align-items:center;gap:12px;margin:0;font-weight:800;font-size:27px;letter-spacing:-.01em}
.lc-h code{font:600 24px var(--mono)}
.lc-h .tp{width:36px;height:36px;font-size:16px;box-shadow:none}
.lc-t{margin:8px 0 0;font-size:19px;line-height:1.45;color:var(--ink2)}
.lc-crit{display:inline-block;margin:18px 0 0;padding:9px 16px;border-radius:11px;background:var(--soft);border:1px solid var(--soft-line);font:500 18px var(--mono);color:var(--accent-d)}
.lc-thumb{position:relative;height:150px;margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lc-thumb img{position:absolute;width:1400px;max-width:none;height:auto;left:-112px;top:-130px}
.lc-thumb .tp{left:50%;top:50%;position:absolute;transform:translate(-50%,-50%)}
.link-card .code.small{margin-top:16px;padding:16px 20px;border-radius:14px;background:var(--night);font-size:17px;white-space:pre}
.sparkline{display:block;width:100%;height:112px;margin-top:14px}
.sparkline .spark{fill:none;stroke:var(--ink2);stroke-width:1.6}
.sparkline .lim{stroke:var(--fail);stroke-width:1.2;stroke-dasharray:5 4}
.chain-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.chain-lines path{fill:none;stroke:var(--accent);stroke-width:3}
.chain-lines circle{fill:var(--accent)}
.chain-note{position:absolute;left:0;right:0;bottom:-6px;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:23px;color:var(--ink2)}
.chain .lc1{animation:appear .5s .05s both}.chain .lc2{animation:appear .5s .3s both}
.chain .lc3{animation:appear .5s .55s both}.chain .lc4{animation:appear .5s .8s both}

/* ---------------------------------------------------------------- 6 · language */
.code-split{grid-template-columns:1.3fr 1fr !important}
.editor{border-radius:16px;background:var(--night);padding:18px 0;overflow:hidden}
.lines{counter-reset:ln}
.lines .ln{counter-increment:ln;position:relative;padding:0 20px 0 66px}
.lines .ln::before{content:counter(ln);position:absolute;left:0;width:46px;text-align:right;color:#4a5b6c}
.scene-lang[data-beat="1"] .lines .hl{background:rgba(15,165,151,.15);box-shadow:inset 3px 0 0 var(--accent)}
.lines .add{background:rgba(17,160,107,.17);box-shadow:inset 3px 0 0 var(--pass)}
.lines .add::after{content:"+";position:absolute;left:52px;color:#6ee7b7}
.lines .err{background:rgba(229,72,77,.26);box-shadow:inset 3px 0 0 var(--fail)}
.lines .err::after{content:"!";color:#ff9da0}
.code .wrong{text-decoration:underline wavy #ff7b80;text-underline-offset:5px;border-bottom:0}
.lines [data-on].is-on{animation:fade-in .4s both}
.py .ln{padding-left:66px}

.ref{gap:0}
.refcard,.check,.apiout{flex:1;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:#fff;display:flex;flex-direction:column}
.ref-k{margin:0 0 10px;font:600 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ref-h{margin:0}
.ref-h code{font:600 30px var(--mono);letter-spacing:-.02em}
.ref-d{margin:8px 0 22px;font-size:20px;line-height:1.45;color:var(--ink2)}
.refcard dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0 0 22px}
.refcard dt{font:500 17px var(--mono);color:var(--accent-d)}
.refcard dd{margin:0;font-size:17px;line-height:1.45;color:var(--ink2)}
.refcard dd code,.ck-row code,.ck-hint code,.ck-diff code,.api-list code{font:500 .92em var(--mono);padding:1px 7px;border-radius:6px;background:#eef1f5;color:var(--ink)}
.ref-out{display:flex;gap:8px;margin:0}
.ref-out .chip{font-family:var(--mono);font-weight:500}
.ref-next{margin:auto 0 0;padding-top:18px}

.ck-h{margin:0 0 16px;font-weight:800;font-size:28px;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.ck-h::before{content:"";width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:700}
.bad-check{border-color:rgba(229,72,77,.4);background:rgba(229,72,77,.04)}
.bad-check .ck-h{color:var(--fail)}
.bad-check .ck-h::before{content:"✕";background:var(--fail)}
.ok-check{border-color:rgba(17,160,107,.4);background:rgba(17,160,107,.04)}
.ok-check .ck-h{color:var(--pass)}
.ok-check .ck-h::before{content:"✓";background:var(--pass)}
.ck-row{margin:0 0 14px;font-size:19px;line-height:1.5}
.ck-row b{display:inline-block;margin-right:12px;padding:2px 10px;border-radius:8px;border:1px solid var(--line2);background:#fff;font:500 15px var(--mono)}
.ck-hint{margin:0 0 18px;font-size:18px;line-height:1.5;color:var(--ink2)}
.ck-foot{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:17px;line-height:1.45;color:var(--muted)}
.ok-check .ck-foot{margin-top:18px}
.versions{padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.versions p{display:flex;align-items:center;gap:12px;margin:0}
.versions i{width:44px;height:2px;background:var(--line2);position:relative}
.versions i::after{content:"";position:absolute;right:-1px;top:-4px;border:solid transparent;border-width:5px 0 5px 8px;border-left-color:var(--line2)}
.ck-diff{margin-top:10px !important;font:500 16px var(--mono);color:var(--pass)}

.apiout .out{padding:16px 20px;border-radius:14px;background:var(--night);font-size:17px;white-space:pre;color:#c9d6df}
.api-list{list-style:none;margin:20px 0 0;padding:0}
.api-list li{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:17px}
.api-list code{font-size:16px !important;color:var(--accent-d) !important;background:var(--soft) !important}
.api-list span{color:var(--muted)}

/* ---------------------------------------------------------------- 7 · offline */
.net{position:absolute;left:0;right:0;top:24px;display:grid;grid-template-columns:1fr 300px 1fr;align-items:center}
.node{height:440px;display:flex;flex-direction:column;padding:30px 32px;background:#fff;border:1.5px solid var(--line2);border-radius:24px;box-shadow:var(--sh-win)}
.node-k{margin:0 0 8px;font:600 14px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d)}
.node-h{margin:0 0 20px;font-weight:800;font-size:34px;letter-spacing:-.02em}
.node ul{list-style:none;margin:0;padding:0}
.node li{position:relative;padding:7px 0 7px 28px;font-size:20px;line-height:1.4;color:var(--ink2)}
.node li::before{content:"";position:absolute;left:0;top:20px;width:14px;height:2.5px;background:var(--accent)}
.node-state{margin:auto 0 0}
.node-state .chip{font-size:16.5px;padding:8px 16px}
.node-tester{border-color:var(--ink)}

.wire{text-align:center}
.wire svg{display:block;width:300px;height:160px;overflow:visible}
.w-base{stroke:var(--line2);stroke-width:3;stroke-dasharray:3 9}
.w-live line{stroke:var(--accent);stroke-width:4}
.w-cut line{stroke:var(--idle);stroke-width:4}
.w-cut .x{stroke:var(--fail);stroke-width:6;stroke-linecap:round}
.pk{fill:var(--accent);stroke:#fff;stroke-width:2;animation:flow 2.4s linear infinite}
.pk2{animation-delay:.8s}.pk3{animation-delay:1.6s}
.w-catch .pk{animation-duration:1.1s}
.w-catch .pk2{animation-delay:.22s}.w-catch .pk3{animation-delay:.44s}.w-catch .pk4{animation-delay:.66s}.w-catch .pk5{animation-delay:.88s}
@keyframes flow{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(300px);opacity:0}}
.wire-label{margin:-26px 0 14px;font:500 16px var(--mono);color:var(--muted)}
.wire-label.bad{color:var(--fail);font-weight:600}
.wire-label.ok{color:var(--pass);font-weight:600}

.pledges{position:absolute;left:0;right:0;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pledge{padding:22px 26px;background:#fff;border:1px solid var(--line2);border-top:4px solid var(--accent);border-radius:4px 4px 18px 18px;box-shadow:var(--sh)}
.pledge b{display:block;font-weight:800;font-size:24px;letter-spacing:-.01em}
.pledge span{display:block;margin-top:6px;font-size:18.5px;line-height:1.4;color:var(--muted)}

/* ---------------------------------------------------------------- 8 · summary */
.six{position:absolute;inset:30px 0 40px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:24px}
.card6{padding:30px 30px;background:#fff;border:1px solid var(--line2);border-radius:24px;box-shadow:var(--sh-win)}
.card6 b{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:76px;line-height:.9;color:var(--accent)}
.card6 h3{margin:22px 0 10px;font-weight:800;font-size:29px;letter-spacing:-.015em}
.card6 p{margin:0;font-size:20px;line-height:1.45;color:var(--ink2)}
.six .card6:nth-child(1){animation:appear .5s .05s both}.six .card6:nth-child(2){animation:appear .5s .15s both}
.six .card6:nth-child(3){animation:appear .5s .25s both}.six .card6:nth-child(4){animation:appear .5s .35s both}
.six .card6:nth-child(5){animation:appear .5s .45s both}.six .card6:nth-child(6){animation:appear .5s .55s both}
.closing{margin-top:64px;padding:4px 0 4px 28px;border-left:4px solid var(--accent)}
.closing-k{margin:0;font:600 14px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d)}
.closing-h{margin:8px 0 10px;font-weight:800;font-size:36px;line-height:1.12;letter-spacing:-.02em}
.closing-c{margin:0;font:500 17px var(--mono);color:var(--muted)}

/* ---------------------------------------------------------------- navigation */
.rail{position:absolute;left:112px;bottom:62px;display:flex;align-items:center;gap:7px;z-index:20}
.rail button{display:inline-flex;align-items:center;gap:0;height:36px;min-width:36px;padding:0;border-radius:18px;border:1.5px solid var(--line2);
  background:#fff;cursor:pointer;font:600 14px var(--mono);color:var(--muted);transition:all .3s}
.rail button i{width:33px;text-align:center;font-style:normal}
.rail button span{display:none;padding-right:16px;font:700 15px var(--disp);letter-spacing:0}
.rail button.is-done{border-color:var(--accent);color:var(--accent-d)}
.rail button.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.rail button.is-current span{display:inline}
.rail button:hover{border-color:var(--ink)}

.pager{position:absolute;left:112px;bottom:112px;display:flex;align-items:center;gap:8px;z-index:20;opacity:0;transition:opacity .3s}
#stage:hover .pager,.pager:focus-within{opacity:1}
.pager button{width:40px;height:34px;border-radius:10px;border:1.5px solid var(--line2);background:#fff;cursor:pointer;font-size:17px;color:var(--ink2)}
.pager button:hover{border-color:var(--ink)}

.titleblock{position:absolute;right:40px;bottom:40px;height:86px;display:grid;grid-template-columns:92px 236px 250px 104px 104px;
  border-top:1.5px solid var(--frame);border-left:1.5px solid var(--frame);background:var(--paper);z-index:20}
.tb-brand{display:grid;place-items:center}
.tb-cell{display:flex;flex-direction:column;justify-content:space-between;padding:12px 16px 13px;border-left:1.5px solid var(--frame);min-width:0}
.tb-cell span{font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.tb-cell b{font-weight:700;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sheet b,.tb-step b{font:600 19px var(--mono)}