/* How it works (/how-it-works): ten animated scenes, one per screen in presenter mode (#present).
   Everything is scoped under .hiw so the shared site.css (nav, footer, buttons) is untouched. */
.hiw{
  --surface:#FFFFFF; --stage:#E8EFEF; --deep:#0B5C54; --on-deep:#FFFFFF; --deep-soft:#BFE7E0; --tint:#E3F3EF; --line:#D6E0E0;
  --shadow:0 1px 2px rgba(12,22,29,.05),0 10px 28px -14px rgba(12,22,29,.28);
  color:var(--ink-2);font-family:var(--sans);font-size:17px;line-height:1.6;padding:0 16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hiw{
  --surface:#111C21; --stage:#0E181D; --deep:#0F766E; --tint:#0C2A26; --line:#22323A;
  --shadow:0 2px 6px rgba(0,0,0,.45),0 18px 34px -18px rgba(0,0,0,.7)}}
:root[data-theme="dark"] .hiw{
  --surface:#111C21; --stage:#0E181D; --deep:#0F766E; --tint:#0C2A26; --line:#22323A;
  --shadow:0 2px 6px rgba(0,0,0,.45),0 18px 34px -18px rgba(0,0,0,.7)}
.hiw *{box-sizing:border-box}
.hiw h1,.hiw h2,.hiw h3{font-family:var(--disp);color:var(--ink);letter-spacing:-.025em;line-height:1.06;margin:0;text-wrap:balance}
.hiw .hiw-btn{font:600 15px/1 var(--sans);border-radius:10px;padding:11px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.hiw .hiw-btn.primary{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.hiw .hiw-btn:hover{border-color:var(--teal)}
body.present .nav,body.present footer{display:none}
/* scenes */
.hiw .scene{position:relative}
.hiw .scene-in{max-width:1180px;margin:0 auto;padding-block:clamp(56px,10vw,120px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.hiw .scene + .scene .scene-in{border-top:1px solid var(--line)}
.hiw .hiw-copy{min-width:0}
.hiw .hiw-step{font:700 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-strong);display:flex;align-items:center;gap:10px;margin:0 0 16px}
.hiw .hiw-step::before{content:"";width:26px;height:2px;background:var(--teal)}
.hiw h1{font-size:clamp(36px,5vw,52px);font-weight:800}
.hiw h2{font-size:clamp(28px,3.2vw,36px);font-weight:800}
.hiw .hiw-lede{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);margin:20px 0 0;max-width:34em}
.hiw .hiw-copy .hiw-fine{font-size:15px;color:var(--ink-3);margin-top:16px;max-width:36em}
.hiw .stage{min-width:0;background:var(--stage);border-radius:22px;padding:clamp(18px,3vw,36px);position:relative;overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center}
.hiw .hiw-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.hiw .hiw-mono{font-family:var(--mono)}
.hiw .chip{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);padding:6px 10px;border-radius:999px;background:var(--tint);color:var(--teal-strong);white-space:nowrap}
.hiw .chip.bad{background:var(--danger-tint);color:var(--danger)}
.hiw .chip.good{background:var(--good-tint);color:var(--good)}
.hiw .chip.warn{background:var(--amber-tint);color:var(--amber)}
.hiw .chip.plain{background:transparent;border:1px solid var(--line);color:var(--ink-2);font-weight:400}
.hiw .hiw-ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hiw .replay{position:absolute;right:14px;bottom:12px;font:600 12px/1 var(--sans);color:var(--ink-3);background:transparent;border:0;cursor:pointer;padding:6px;display:flex;gap:6px;align-items:center}
.hiw .replay:hover{color:var(--teal-strong)}

/* 1 hero */
.hiw .hiw-hero .scene-in{padding-block:clamp(48px,8vw,104px)}
.hiw .hiw-hero h1 em{font-style:normal;color:var(--teal-strong)}
.hiw .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hiw .vault{width:min(420px,100%);padding:22px}
.hiw .vault .lbl{font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.hiw .field{font-family:var(--mono);font-size:20px;padding:14px 16px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);min-height:56px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.hiw .field.cipher{color:var(--teal-strong);letter-spacing:.02em}
.hiw .caret{display:inline-block;width:2px;height:22px;background:var(--teal);margin-left:2px;animation:hiw-blink 1s steps(1) infinite}
@keyframes hiw-blink{50%{opacity:0}}
.hiw .sealrow{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--tint);color:var(--teal-strong);font-size:14.5px;transition:background .4s,color .4s}
.hiw .sealrow b{color:var(--ink)}
.hiw .vault.sealed .field{border-color:var(--teal)}
.hiw .sent{margin-top:12px;font-size:13.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.hiw .sent .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}

/* 2 copies */
.hiw .copies{position:relative;width:100%;max-width:560px;height:372px}
.hiw .src{position:absolute;left:50%;top:calc(50% - 23px);transform:translate(-50%,-50%);z-index:2;font-family:var(--mono);font-weight:600;background:var(--danger-tint);color:var(--danger);border:1.5px solid var(--danger);padding:10px 14px;border-radius:10px}
.hiw .cp{position:absolute;width:44%;padding:12px 14px;font-size:13.5px}
.hiw .cp .t{font:700 14px/1.2 var(--disp);color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hiw .cp .pw{font-family:var(--mono);color:var(--danger);font-size:13px}
.hiw .cp .meta{color:var(--ink-3);font-size:12.5px;margin-top:4px;line-height:1.35}
.hiw .cp.hiw-a{left:0;top:0}.hiw .cp.hiw-b{right:0;top:0}.hiw .cp.c{left:0;bottom:46px}.hiw .cp.d{right:0;bottom:46px}
.hiw .tally{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3}
.hiw :is(.play,.armed) .cp{animation:hiw-fly .7s cubic-bezier(.2,.8,.2,1) both}
.hiw :is(.play,.armed) .cp.hiw-a{--fx:60%;--fy:60%}.hiw :is(.play,.armed) .cp.hiw-b{--fx:-60%;--fy:60%;animation-delay:.25s}.hiw :is(.play,.armed) .cp.c{--fx:60%;--fy:-60%;animation-delay:.5s}.hiw :is(.play,.armed) .cp.d{--fx:-60%;--fy:-60%;animation-delay:.75s}
@keyframes hiw-fly{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}to{opacity:1;transform:none}}
.hiw :is(.play,.armed) .tally{animation:hiw-pop .5s 1.4s both}
.hiw :is(.play,.armed) .src{animation:hiw-pulse 1.4s ease-in-out 2}
@keyframes hiw-pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes hiw-pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--danger) 18%,transparent)}}

/* 3 sealed */
.hiw .lane{position:relative;width:100%;max-width:640px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;padding-top:64px}
.hiw .node{padding:14px;text-align:center;font-size:13.5px;line-height:1.35}
.hiw .node .t{font:700 15px/1.2 var(--disp);color:var(--ink);margin:6px 0 4px}
.hiw .node .nic{width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--teal-strong);display:inline-flex;align-items:center;justify-content:center}
.hiw .node.srv .nic{background:var(--stage);color:var(--ink-3)}
.hiw .node.srv{border-style:dashed}
.hiw .track{position:absolute;left:12%;right:12%;top:30px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.hiw .packet{position:absolute;top:14px;left:50%;transform:translateX(-50%);height:34px;padding:0 12px;border-radius:9px;display:flex;align-items:center;font:600 14px var(--mono);white-space:nowrap;
  background:var(--deep);color:var(--on-deep);box-shadow:var(--shadow)}
.hiw .packet{display:grid;justify-items:center}.hiw .packet > span{grid-area:1/1}.hiw .packet .plain{opacity:0}
.hiw :is(.play,.armed) .packet{animation:hiw-travel 2.4s cubic-bezier(.5,0,.3,1) both}
@keyframes hiw-travel{0%{left:17%;background:var(--danger-tint);color:var(--danger)}35%{left:17%;background:var(--danger-tint);color:var(--danger)}45%{background:var(--deep);color:var(--on-deep)}100%{left:50%}}
.hiw :is(.play,.armed) .packet .plain{animation:hiw-hideAt 2.4s both}
.hiw :is(.play,.armed) .packet .ct{animation:hiw-showAt 2.4s both}
@keyframes hiw-hideAt{0%,38%{opacity:1}46%,100%{opacity:0}}
@keyframes hiw-showAt{0%,38%{opacity:0}46%,100%{opacity:1}}
.hiw .hex{margin-top:8px;height:45px;overflow:hidden;font:11px/15px var(--mono);color:var(--ink-3);opacity:.85;text-align:left;word-break:break-all}
.hiw .nokey{margin-top:8px}
.hiw .keyrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}

/* 4 leaked link */
.hiw .leak{width:100%;max-width:600px;display:grid;gap:14px}
.hiw .linkchip{justify-self:center;font:600 13.5px var(--mono);padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);display:flex;gap:8px;align-items:center;box-shadow:var(--shadow);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hiw .forks{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.hiw .who{padding:14px 16px;font-size:14px}
.hiw .who .t{font:700 15px/1.2 var(--disp);color:var(--ink);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.hiw .who ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hiw .who li{display:flex;gap:8px;align-items:center}
.hiw .who li .hiw-ic{width:16px;height:16px}
.hiw .hiw-yes{color:var(--good)}.hiw .hiw-no{color:var(--danger)}
.hiw .safe{padding:14px 16px;display:flex;gap:12px;align-items:center;background:var(--deep);color:var(--deep-soft);border-color:var(--deep)}
.hiw .safe b{color:var(--on-deep)}
.hiw :is(.play,.armed) .linkchip{animation:hiw-drop .5s both}
.hiw :is(.play,.armed) .who:first-child{animation:hiw-rise .55s .45s both}.hiw :is(.play,.armed) .who:last-child{animation:hiw-rise .55s .75s both}
.hiw :is(.play,.armed) .safe{animation:hiw-rise .55s 1.2s both}
@keyframes hiw-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hiw-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 5 reveal */
.hiw .reveal{width:min(440px,100%);padding:22px}
.hiw .reveal .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;font-size:14px}
.hiw .reveal .head b{font-family:var(--disp);color:var(--ink);font-size:16px}
.hiw .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.hiw .hiw-st{text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.3}
.hiw .hiw-st .ring{width:58px;height:58px;margin:0 auto 6px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--teal-strong);position:relative}
.hiw .hiw-st .ring svg.hiw-ic{width:26px;height:26px}
.hiw .hiw-st.hiw-on .ring{background:var(--deep);color:var(--on-deep)}
.hiw .grant{position:absolute;inset:-4px;transform:rotate(-90deg)}
.hiw .grant circle{fill:none;stroke:var(--teal);stroke-width:3;stroke-dasharray:195;stroke-dashoffset:0}
.hiw :is(.play,.armed) .grant circle{animation:hiw-drain 2.2s 1.2s linear both}
@keyframes hiw-drain{from{stroke-dashoffset:0}to{stroke-dashoffset:195}}
.hiw .clearbar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:12px}
.hiw .clearbar i{display:block;height:100%;width:0;background:var(--teal)}
.hiw .reveal .hiw-note{font-size:13px;color:var(--ink-3);margin-top:8px;display:flex;justify-content:space-between}

/* 6 ticket closes */
.hiw .close{width:100%;max-width:620px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:stretch}
.hiw .ticket{padding:16px}
.hiw .ticket .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:12px}
.hiw .ticket .id{font:700 15px/1.25 var(--disp);color:var(--ink)}
.hiw .status{position:relative;display:grid}
.hiw .status > *{grid-area:1/1}
.hiw .thread{display:grid;gap:8px;font-size:13px}
.hiw .msg{padding:9px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--line);line-height:1.4}
.hiw .msg b{color:var(--ink)}
.hiw .msg.sys{background:var(--tint);border-color:transparent;color:var(--teal-strong)}
.hiw .env{position:relative;display:grid}
.hiw .env > .hiw-card{grid-area:1/1;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:13.5px}
.hiw .env .live{background:var(--deep);border-color:var(--deep);color:var(--deep-soft)}
.hiw .env .live b{color:var(--on-deep);font-family:var(--disp);font-size:16px}
.hiw .env .gone{border:1.5px dashed var(--line);background:transparent;box-shadow:none;color:var(--ink-3);align-items:flex-start}
.hiw .env .gone b{color:var(--ink);font-family:var(--disp);font-size:16px}
.hiw .s-open{opacity:0}
.hiw .env .live{opacity:0}
.hiw :is(.play,.armed) .s-open{animation:hiw-outAt 3s both}
.hiw :is(.play,.armed) .s-res{animation:hiw-inAt 3s both}
.hiw :is(.play,.armed) .env .live{animation:hiw-dissolve 3s both}
.hiw :is(.play,.armed) .env .gone{animation:hiw-inLate 3s both}
.hiw :is(.play,.armed) .msg.sys{animation:hiw-noteIn 3s both}
@keyframes hiw-outAt{0%,30%{opacity:1}36%,100%{opacity:0}}
@keyframes hiw-inAt{0%,30%{opacity:0}36%,100%{opacity:1}}
@keyframes hiw-dissolve{0%,40%{opacity:1;filter:none;transform:none}62%{opacity:0;filter:blur(8px);transform:scale(.94)}100%{opacity:0}}
@keyframes hiw-inLate{0%,55%{opacity:0}70%,100%{opacity:1}}
@keyframes hiw-noteIn{0%,66%{opacity:0;transform:translateY(10px)}80%,100%{opacity:1;transform:none}}

/* 7 audit chain */
.hiw .chainwrap{width:100%;max-width:660px}
.hiw .chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
.hiw .blk{padding:12px;font-size:12.5px;position:relative;line-height:1.35}
.hiw .blk .seq{font:700 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hiw .blk .ev{font:700 14px/1.2 var(--disp);color:var(--ink);margin:6px 0}
.hiw .blk .h{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.hiw .blk .sig{margin-top:8px;font-size:11.5px;padding:4px 8px}
.hiw .blk:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:22px;height:2px;background:var(--teal)}
.hiw .verdict{margin-top:18px;padding:14px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hiw .verdict .v{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink)}
.hiw .verdict .v b{font-family:var(--disp)}
.hiw :is(.play,.armed) .blk{animation:hiw-rise .45s both}
.hiw :is(.play,.armed) .blk:nth-child(2){animation-delay:.3s}.hiw :is(.play,.armed) .blk:nth-child(3){animation-delay:.6s}.hiw :is(.play,.armed) .blk:nth-child(4){animation-delay:.9s}
.hiw :is(.play,.armed) .blk .sig{animation:hiw-stamp .4s both}
.hiw :is(.play,.armed) .blk:nth-child(1) .sig{animation-delay:1.3s}.hiw :is(.play,.armed) .blk:nth-child(2) .sig{animation-delay:1.45s}.hiw :is(.play,.armed) .blk:nth-child(3) .sig{animation-delay:1.6s}.hiw :is(.play,.armed) .blk:nth-child(4) .sig{animation-delay:1.75s}
@keyframes hiw-stamp{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
.hiw .tampered .blk.t3{border-color:var(--danger);background:var(--danger-tint)}
.hiw .tampered .blk.t3 .ev,.hiw .tampered .blk.t3 .h{color:var(--danger)}
.hiw .tampered .blk.t3 .sig,.hiw .tampered .blk.t4 .sig{background:var(--danger-tint);color:var(--danger)}
.hiw .tampered .blk.t2::after,.hiw .tampered .blk.t3::after{background:var(--danger)}
.hiw .verdict .v-bad{display:none}
.hiw .tampered .verdict .v-ok{display:none}.hiw .tampered .verdict .v-bad{display:flex}

/* 8 takeover */
.hiw .take{width:100%;max-width:640px;display:grid;gap:14px}
.hiw .flowrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hiw .fbox{padding:12px 14px;font-size:13px;line-height:1.35}
.hiw .fbox .t{font:700 14.5px/1.2 var(--disp);color:var(--ink);margin-bottom:4px}
.hiw .fbox.bad{border-color:var(--danger)}
.hiw .fbox.newkey{border-style:dashed}
.hiw .gates{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.hiw .gate{padding:14px;display:flex;gap:12px;align-items:center;font-size:13.5px;line-height:1.35}
.hiw .gate b{display:block;color:var(--ink);font-family:var(--disp);font-size:15px}
.hiw .and{font:800 13px var(--disp);color:var(--ink-3);letter-spacing:.1em}
.hiw .clock{width:46px;height:46px;flex:none;transform:rotate(-90deg)}
.hiw .clock circle{fill:none;stroke-width:5}
.hiw .clock .bg{stroke:var(--line)}.hiw .clock .fg{stroke:var(--teal);stroke-dasharray:126;stroke-dashoffset:0}
.hiw :is(.play,.armed) .clock .fg{animation:hiw-fill72 2.6s 1s ease-in-out both}
@keyframes hiw-fill72{from{stroke-dashoffset:126}to{stroke-dashoffset:0}}
.hiw .wasnt{padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hiw .wasnt .msgtxt{font-size:14px;color:var(--ink-2)}
.hiw .wasnt .msgtxt b{color:var(--ink)}
.hiw .hiw-btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.hiw .cancelled .fbox.newkey,.hiw .cancelled .gates{opacity:.35;filter:grayscale(1);transition:.4s}
.hiw .done{display:none;color:var(--good);font-weight:600;font-size:14px}
.hiw .cancelled .done{display:flex;gap:8px;align-items:center}
.hiw .cancelled .wasnt .hiw-btn{display:none}
.hiw :is(.play,.armed) .flowrow .fbox{animation:hiw-rise .45s both}
.hiw :is(.play,.armed) .flowrow .fbox:nth-child(2){animation-delay:.3s}.hiw :is(.play,.armed) .flowrow .fbox:nth-child(3){animation-delay:.6s}
.hiw :is(.play,.armed) .gates{animation:hiw-rise .5s .9s both}

/* 9 helpdesks */
.hiw .desks{width:100%;max-width:600px}
.hiw .desks .lbl{font:700 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.hiw .desks .grp{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hiw .desks .chip{font-size:14px;padding:9px 13px}
.hiw :is(.play,.armed) .desks .chip{animation:hiw-rise .4s both;animation-delay:calc(var(--i) * 60ms)}

/* 10 pricing */
.hiw .prices{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hiw .pc{padding:18px 16px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.hiw .pc .hiw-aud{font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-strong)}
.hiw .pc h3{font-size:18px;margin-top:6px}
.hiw .pc .amt{font:800 34px/1 var(--disp);color:var(--ink);letter-spacing:-.03em;margin:6px 0 2px}
.hiw .pc .amt small{font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.hiw .pc ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:5px}
.hiw .pc li{display:flex;gap:7px;align-items:flex-start;line-height:1.35}
.hiw .pc li .hiw-ic{width:15px;height:15px;color:var(--teal);margin-top:2px}
.hiw .pc.dark{background:var(--deep);border-color:var(--deep);color:var(--deep-soft)}
.hiw .pc.dark h3,.hiw .pc.dark .amt{color:var(--on-deep)}.hiw .pc.dark .amt small{color:var(--deep-soft)}.hiw .pc.dark .hiw-aud{color:#99F6E4}.hiw .pc.dark li .hiw-ic{color:#99F6E4}
.hiw .pfine{grid-column:1/-1;font-size:13px;color:var(--ink-3);margin-top:4px}
.hiw .contact{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hiw .addr{font:700 18px var(--disp);color:var(--ink);user-select:all}
.hiw :is(.play,.armed) .pc{animation:hiw-rise .5s both}.hiw :is(.play,.armed) .pc:nth-child(2){animation-delay:.15s}.hiw :is(.play,.armed) .pc:nth-child(3){animation-delay:.3s}


/* responsive */
@media (max-width:860px){
  .hiw .scene-in{grid-template-columns:minmax(0,1fr)}
  .hiw .stage{min-height:0}
}
@media (max-width:560px){
  .hiw{font-size:16px}
  .hiw .copies{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:56px;padding-bottom:44px}
  .hiw .cp{position:static;width:auto}
  .hiw .src{top:0;transform:translateX(-50%)}
  .hiw .forks,.hiw .close,.hiw .prices,.hiw .flowrow{grid-template-columns:minmax(0,1fr)}
  .hiw .gates{grid-template-columns:minmax(0,1fr)}
  .hiw .and{text-align:center}
  .hiw .chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hiw .blk::after{display:none}
  .hiw .lane{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hiw .node{padding:10px 6px;font-size:12px}
  .hiw .node .t{font-size:13px}
  .hiw .hex{display:none}
  .hiw .packet{font-size:12px;padding:0 8px}
}

/* presenter mode */
body.present{overflow:hidden}
body.present main.hiw{position:fixed;inset:0;background:var(--bg)}
body.present .hiw .scene{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 32px calc(84px + env(safe-area-inset-bottom,0px))}
body.present .hiw .scene.current{display:flex}
body.present .hiw .scene-in{border-top:0!important;padding-block:0;width:1180px;max-width:none;flex:none;transform-origin:center center}
body.present .hiw .replay{display:none}
.pbar{display:none}
body.present .pbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));gap:10px;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--bg) 90%,transparent);border-top:1px solid var(--line)}
.pbar .count{font:700 14px var(--disp);color:var(--ink);min-width:64px;text-align:center}
.pbar .grp{display:flex;gap:8px;align-items:center}
.ptrack{position:fixed;left:0;top:0;height:3px;background:var(--teal);z-index:31;display:none}
body.present .ptrack{display:block}
.notes{display:none;position:fixed;left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:30;max-width:760px;margin:0 auto;padding:16px 18px;font-size:15px;line-height:1.5;color:var(--ink-2)}
body.present.shownotes .notes{display:block}
.notes b{color:var(--ink);font-family:var(--disp)}

@media (prefers-reduced-motion: reduce){
  .hiw *,.hiw *::before,.hiw *::after{animation:none!important;transition:none!important}
  .hiw .s-open,.hiw .env .live{opacity:0!important}
}

/* armed: a scene below the fold waits on its first frame, so playing never jumps back from the end */
.hiw .armed *,.hiw .armed *::before,.hiw .armed *::after{animation-play-state:paused!important}
.hiw .armed #revealCard .hiw-st.hiw-on .ring{background:var(--tint);color:var(--teal-strong)}