/* Standalone reset (the artifact viewer normally supplies this) */
html{color-scheme:light}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
:root{
  /* Layout: one wide column. Hero, then a live demo (flawed shop beside an audit report), then one section per audience with requirement cards, then the pipeline. */
  --bg:#F3F5FA; --surface:#FFFFFF; --surface2:#E7EBF4; --fg:#0B1226; --muted:#424D68; --line:#B7C0D6;
  --accent:#1B3BC4; --accent-fg:#FFFFFF; --focus:#FFC400;
  --ok:#0A6B38; --ok-bg:#DDF3E5; --bad:#B3261E; --bad-bg:#FBE3E1; --warn:#7A4E00; --warn-bg:#FCEFD0;
  --font-display:'Bricolage Grotesque','Atkinson Hyperlegible',system-ui,sans-serif;
  --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --target:44px; --ts:1; --lh:1.6;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1020; --surface:#131B33; --surface2:#1C2644; --fg:#EEF2FF; --muted:#AEB8D6; --line:#34416A;
    --accent:#8FA8FF; --accent-fg:#0A1020; --focus:#FFD54A;
    --ok:#6FD79A; --ok-bg:#0F2E1E; --bad:#FF908A; --bad-bg:#3A1515; --warn:#F5BE55; --warn-bg:#35270A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1020; --surface:#131B33; --surface2:#1C2644; --fg:#EEF2FF; --muted:#AEB8D6; --line:#34416A;
  --accent:#8FA8FF; --accent-fg:#0A1020; --focus:#FFD54A;
  --ok:#6FD79A; --ok-bg:#0F2E1E; --bad:#FF908A; --bad-bg:#3A1515; --warn:#F5BE55; --warn-bg:#35270A;
  color-scheme:dark;
}
:root[data-contrast="high"]{
  --bg:#000000; --surface:#000000; --surface2:#1A1A1A; --fg:#FFFFFF; --muted:#E6E6E6; --line:#FFFFFF;
  --accent:#FFE600; --accent-fg:#000000; --focus:#00E5FF;
  --ok:#7CFFA4; --ok-bg:#001F0C; --bad:#FF9A92; --bad-bg:#2A0000; --warn:#FFD36B; --warn-bg:#2A1D00;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(100% * var(--ts))}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:1rem; line-height:var(--lh);
  padding-block:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap{max-width:76rem;margin-inline:auto}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;overflow-wrap:anywhere;line-height:1.1;letter-spacing:-.015em}
h1{font-weight:800;font-size:clamp(2.2rem,1rem + 5.5vw,4.4rem);letter-spacing:-.03em}
h2{font-weight:800;font-size:clamp(1.7rem,1rem + 2.4vw,2.6rem)}
h3{font-weight:700;font-size:1.25rem;line-height:1.2}
h4{font-weight:700;font-size:1rem}
p{margin:0}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:.1em}
code,kbd,.mono{font-family:var(--font-mono);font-size:.9em}
kbd{border:1.5px solid var(--fg);border-bottom-width:3px;padding:.05em .4em;background:var(--surface)}
.muted{color:var(--muted)}
.eyebrow{font:600 .8125rem/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--fg);outline-offset:2px;box-shadow:0 0 0 6px var(--focus)}
main:focus{outline:none;box-shadow:none}
.skip{position:absolute;left:-9999px;top:max(1rem,env(safe-area-inset-top,0px));z-index:50;background:var(--fg);color:var(--bg);padding:.75rem 1rem;font-weight:700}
.skip:focus{left:1rem}

/* controls */
.btn{
  font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--target);min-width:var(--target);padding:.45rem 1.1rem;
  background:var(--surface);color:var(--fg);border:2px solid var(--fg);border-radius:6px;text-decoration:none;text-align:center;
}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.btn.small{padding:.35rem .8rem;font-size:.9375rem}
input[type="text"],input[type="email"],input[type="tel"],textarea,select{
  font:inherit;color:var(--fg);background:var(--surface);border:2px solid var(--muted);border-radius:4px;
  min-height:var(--target);padding:.4rem .65rem;width:100%;max-width:100%;
}
textarea{min-height:7rem;resize:vertical;line-height:1.5}
input[type="color"]{width:var(--target);height:var(--target);min-height:0;padding:2px;border:2px solid var(--muted);border-radius:4px;background:var(--surface);cursor:pointer}
input[type="range"]{width:100%;min-height:var(--target);accent-color:var(--accent);cursor:pointer}
input[type="checkbox"],input[type="radio"]{width:1.35rem;height:1.35rem;accent-color:var(--accent);margin:0;flex:none}
label{font-weight:700}
.check{display:flex;align-items:center;gap:.65rem;min-height:var(--target);font-weight:400;cursor:pointer}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;padding:0;margin-bottom:.4rem}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg label{position:relative;font-weight:700}
.seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;min-height:var(--target);padding:0 1rem;border:2px solid var(--fg);border-radius:6px;background:var(--surface)}
.seg input:checked + span{background:var(--fg);color:var(--bg)}
.field{display:grid;gap:.35rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.status{min-height:1.6em;font-weight:700}

/* header + hero */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;padding-block:1rem}
.brand{display:inline-flex;align-items:center;gap:.9rem;color:var(--fg);font:800 1.4rem/1 var(--font-display);text-decoration:none;min-height:var(--target)}
.mark{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--fg);box-shadow:0 0 0 .22rem var(--bg),0 0 0 .45rem var(--focus);margin-left:.45rem}
.top nav ul{display:flex;flex-wrap:wrap;gap:.1rem .5rem;list-style:none;margin:0;padding:0;align-items:center}
.top nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 .6rem;color:var(--fg);font-weight:700;text-decoration:none}
.top nav a:hover{text-decoration:underline;text-decoration-color:var(--focus);text-decoration-thickness:.2em}
.settings{border:2px solid var(--fg);background:var(--surface);padding:1.25rem;margin-bottom:1rem;display:grid;gap:1.1rem}
.set-grid{display:grid;gap:1.25rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.hero{padding-block:clamp(2rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem);display:grid;gap:1.25rem;justify-items:start}
.hero h1{max-width:15ch}
.hero h1 .u{text-decoration:underline;text-decoration-color:var(--focus);text-decoration-thickness:.1em;text-underline-offset:.12em}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);max-width:42rem;line-height:1.55}
.aud{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));width:100%}
.aud a{display:grid;gap:.25rem;padding-top:.8rem;border-top:3px solid var(--fg);color:var(--fg);text-decoration:none;min-height:var(--target)}
.aud a:hover strong{text-decoration:underline;text-decoration-color:var(--focus);text-decoration-thickness:.2em}
.aud strong{font:800 1.2rem var(--font-display)}
.aud span{color:var(--muted)}

/* sections */
.sec{padding-block:clamp(2.5rem,6vw,4.5rem);border-top:3px solid var(--fg)}
.sec-head{display:grid;gap:.75rem;max-width:46rem;margin-bottom:2rem}
.sec-head p:not(.eyebrow){font-size:1.1rem}
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:start}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:6px;padding:1.25rem;display:grid;gap:1rem;min-width:0}
.card-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem .75rem}
.tag{font:600 .8125rem/1.3 var(--font-mono);letter-spacing:.04em;color:var(--muted);border:1.5px solid var(--line);padding:.1rem .45rem}
.note{font-size:.9375rem;color:var(--muted)}

/* demo layout */
.demo-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem}
.demo{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr));align-items:start}
.frame{border:2px solid var(--fg);background:var(--surface);min-width:0}
.tabs{display:flex;flex-wrap:wrap;border-bottom:2px solid var(--fg);background:var(--surface2)}
.tab{font:inherit;font-weight:700;cursor:pointer;min-height:var(--target);padding:0 1.1rem;background:transparent;color:var(--fg);border:0;border-right:2px solid var(--fg)}
.tab[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.v-scroll{height:34rem;max-height:75vh;overflow:auto;background:#fff}
.v-content{position:relative}
#tabLayer{position:absolute;inset:0;pointer-events:none}
.tb{position:absolute;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#1B3BC4;color:#fff;font:700 11px/16px Arial,sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 0 0 1px #1B3BC4}
.legend{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;margin-top:.75rem;font-size:.9375rem;color:var(--muted)}
.sw{display:inline-block;width:1.4rem;height:.9rem;border:2px dashed #D6006F;vertical-align:-.1em;margin-right:.35rem}
.sr-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;padding:.75rem;border-bottom:1.5px solid var(--line)}
.sr-list{list-style:none;margin:0;padding:0;height:31rem;max-height:70vh;overflow:auto}
.sr-row{display:grid;grid-template-columns:minmax(6rem,8.5rem) minmax(0,1fr);gap:.75rem;padding:.55rem .75rem;border-bottom:1px solid var(--line)}
.sr-k{font:600 .8125rem/1.5 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sr-t{overflow-wrap:anywhere}
.sr-row.bad{background:var(--bad-bg)}
.sr-row.bad .sr-k{color:var(--bad)}
.sr-t em{display:block;font-style:normal;font-weight:700;color:var(--bad);font-size:.9375rem}

/* report */
.report{border:2px solid var(--fg);background:var(--surface);padding:1.25rem;display:grid;gap:1rem;min-width:0}
.score{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.5rem 1rem}
.score-num{display:flex;align-items:baseline;gap:.25rem;font-family:var(--font-display);font-weight:800;line-height:1}
.score-num output{font-size:3.5rem;letter-spacing:-.03em}
.score-num span{font-size:1.1rem;color:var(--muted)}
.bar{height:.9rem;background:var(--surface2);border:1.5px solid var(--fg)}
.bar span{display:block;height:100%;background:var(--accent);transition:width .6s ease}
.pill{display:inline-block;font:700 .8125rem/1.4 var(--font-mono);letter-spacing:.03em;text-transform:uppercase;padding:.05rem .5rem;border:1.5px solid currentColor}
.pill.crit{color:var(--bad);background:var(--bad-bg)}
.pill.ser{color:var(--warn);background:var(--warn-bg)}
.pill.mod{color:var(--muted)}
.pill.issue{color:var(--bad);background:var(--bad-bg)}
.pill.review{color:var(--warn);background:var(--warn-bg)}
.pill.fixed,.pill.pass{color:var(--ok);background:var(--ok-bg)}
.fgroup h4{margin:.5rem 0 .4rem;font-family:var(--font-mono);font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.flist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.f{width:100%;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;align-items:center;min-height:var(--target);padding:.5rem .7rem;background:var(--bg);color:var(--fg);border:1.5px solid var(--line);border-radius:4px}
.f:hover{border-color:var(--fg)}
.f[aria-current="true"]{border-color:var(--fg);box-shadow:inset 4px 0 0 var(--fg)}
.f-title{font-weight:700;overflow-wrap:anywhere}
.f-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:center;font-size:.9375rem;color:var(--muted)}
.f .pill:last-child{grid-row:1/span 2;grid-column:2}
.axe{font-size:.9375rem;color:var(--muted)}
.axe code{overflow-wrap:anywhere}
.changes summary{cursor:pointer;font-weight:700;min-height:var(--target);display:flex;align-items:center}
.changes ol{margin:.25rem 0 0;padding-left:1.4rem;display:grid;gap:.3rem;font-size:.9375rem}
.changes li{overflow-wrap:anywhere}

/* the fictional shop. Own palette on purpose: it stands in for someone else's site. */
.v{background:#fff;color:#222;font:15px/1.45 Georgia,'Times New Roman',serif;position:relative}
.v *,.v *::before,.v *::after{box-sizing:border-box}
.v *:focus{outline:none}
.v-hdr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:14px 18px;background:#f5f1ea}
.v-logo{font:700 20px Georgia,serif;color:#222}
.v-a{color:#9aa0a6;font:12px Arial,sans-serif;text-decoration:none;margin-left:12px}
.v-hero{display:block;width:100%;height:auto}
.v-h1{font:700 32px/1.1 Georgia,serif;margin:16px 18px 0;color:#222}
.v-lede{color:#b0b0b0;margin:6px 18px 12px;font-size:14px}
.v-offer{margin:0 18px 12px;background:#fdf0d5;color:#c59b4a;padding:8px 12px;font:600 13px Arial,sans-serif}
.v-h2{font:700 24px/1.2 Georgia,serif;margin:14px 18px 8px;color:#222}
.v-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 18px}
.v-card{border:1px solid #e3e3e3;padding:8px}
.v-card img{display:block;width:100%;height:auto}
.v-name{font:600 15px Arial,sans-serif;margin-top:6px;color:#333}
.v-price{color:#b5b5b5;font:14px Arial,sans-serif}
.v-add{display:inline-block;margin-top:8px;background:#ff7a3d;color:#fff;font:600 12px Arial,sans-serif;padding:4px 8px;cursor:pointer;border-radius:3px}
.v-media{margin:14px 18px 0;height:130px;background:#2a2d36;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font:14px Arial,sans-serif;cursor:pointer;position:relative}
.v-media::before{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.v-p{margin:14px 18px 12px;font-size:15px;color:#333}
.v-plain{color:#2f6fdb;text-decoration:none}
.v-news{display:flex;flex-wrap:wrap;gap:6px;margin:0 18px 14px}
.v-in{flex:1;min-width:0;height:26px;border:1px solid #ccc;padding:0 6px;font-size:13px}
.v-go{height:26px;width:34px;border:0;background:#222;color:#fff;font-size:12px;cursor:pointer}
.v-ftr{background:#eee;padding:14px 18px;font:12px/1.5 Arial,sans-serif;color:#a8a8a8}
.v-ftr .v-a{margin-left:0}
.v [data-af-flag]{outline:2px dashed #D6006F !important;outline-offset:2px !important}
.v [data-af-sel]{outline:4px solid #D6006F !important;outline-offset:3px !important}
/* applied by the repair step */
.v.af-fixed :focus{outline:3px solid #1B3BC4 !important;outline-offset:2px !important;box-shadow:0 0 0 5px #FFC400 !important}
.v .af-target{min-width:44px !important;min-height:44px !important}
.v .af-target:not(input):not(button){display:inline-flex !important;align-items:center;justify-content:center}
.v .af-underline{text-decoration:underline !important}
.v .af-label{flex-basis:100%;font:600 13px Arial,sans-serif;color:#222}
.v .af-cc{margin:0 18px;padding:8px 12px;background:#000;color:#fff;font:14px/1.4 Arial,sans-serif}
.v .af-tr{margin:0 18px 8px;font:14px/1.5 Arial,sans-serif;color:#222}
.v .af-tr summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.v .af-ctl{display:flex;flex-wrap:wrap;gap:6px;margin:0 18px 12px}
.v .af-ctl button,.v .af-help button{font:600 13px Arial,sans-serif;padding:0 12px;border:2px solid #222;background:#fff;color:#222;cursor:pointer}
.v .af-help{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* requirement widgets */
.cc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.cc-pick{display:grid;gap:.35rem;min-width:0}
.cc-pick .row{flex-wrap:nowrap;gap:.5rem}
.cc-prev{padding:1rem;border:1.5px solid var(--line);display:grid;gap:.25rem}
.cc-prev strong{font:800 1.6rem/1.2 var(--font-display)}
.cc-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.cc-table th,.cc-table td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.cc-table td:last-child{font-weight:700}
.res-pass{color:var(--ok)}
.res-fail{color:var(--bad)}
.cc-sug{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center;padding:.6rem;background:var(--warn-bg);color:var(--warn);font-weight:700}
.cc-sug i{display:inline-block;width:1.4rem;height:1.4rem;border:2px solid currentColor;vertical-align:middle}
.sample{border:1.5px solid var(--line);padding:1em;display:grid;gap:.5em;background:var(--bg)}
.sample h4{font-size:1.2em}
.sample .row{gap:.5em}
.sample .btn{font-size:1em;padding:.4em .9em}
.outline{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.9375rem}
.outline li{padding-left:calc(var(--lvl,0) * 1rem);display:flex;gap:.6rem;align-items:baseline}
.o-role{font:600 .8125rem var(--font-mono);color:var(--muted);flex:none;min-width:5.5rem;text-transform:uppercase}
.stage{position:relative;background:#101626;color:#fff;aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;overflow:hidden;border:3px solid #101626}
.stage.cue{border-color:var(--focus)}
.stage .eq{display:flex;gap:.4rem;align-items:flex-end;height:30%}
.stage .eq i{width:.6rem;background:#8FA8FF;height:30%;animation:eq 1s ease-in-out infinite;animation-play-state:paused}
.stage.on .eq i{animation-play-state:running}
.stage .eq i:nth-child(2){animation-delay:.15s}.stage .eq i:nth-child(3){animation-delay:.3s}.stage .eq i:nth-child(4){animation-delay:.45s}.stage .eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.stage-label{position:absolute;top:.5rem;left:.75rem;font:600 .8125rem var(--font-mono);color:#C9D2F0}
.cap{position:absolute;left:50%;transform:translateX(-50%);bottom:.75rem;width:92%;text-align:center;padding:.3em .6em;line-height:1.35;color:#fff;background:#000;font-weight:700}
.cap:empty{display:none}
.cap.tr{background:rgba(0,0,0,.65)}
.trans{list-style:none;margin:0;padding:0;max-height:15rem;overflow:auto;border:1.5px solid var(--line)}
.tl{width:100%;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.5rem;padding:.4rem .7rem;min-height:var(--target);background:transparent;color:var(--fg);border:0;border-bottom:1px solid var(--line)}
.tl[aria-current="true"]{background:var(--accent);color:var(--accent-fg)}
.tl time{font:600 .8125rem var(--font-mono)}
.tl.cue span{font-style:italic}
.methods{display:grid;gap:.4rem}
.methods .check{border:1.5px solid var(--line);padding:.25rem .7rem}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.6rem}
.stat div{border:1.5px solid var(--line);padding:.5rem .7rem}
.stat b{display:block;font:800 1.6rem/1.1 var(--font-display)}
.stat span{font-size:.875rem;color:var(--muted)}
.hint{padding:.5rem .7rem;border-left:4px solid var(--warn);background:var(--warn-bg);color:var(--warn);font-weight:700;font-size:.9375rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.4rem}
.fmt-sample{padding:.8rem;border:1.5px solid var(--line);background:var(--bg)}
.keys{width:100%;border-collapse:collapse;font-size:.9375rem}
.keys td{padding:.35rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.keys td:first-child{white-space:nowrap}
.sizes{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.sq{display:grid;place-items:center;border:2px solid var(--fg);font:600 .75rem var(--font-mono);text-align:center;background:var(--surface2)}
.sizes figure{margin:0;display:grid;gap:.3rem;justify-items:start;font-size:.8125rem}
.clock{font:800 2.4rem/1 var(--font-display);letter-spacing:-.02em}
.err{color:var(--bad);font-weight:700;font-size:.9375rem}
.err-sum{border:2px solid var(--bad);background:var(--bad-bg);padding:.8rem 1rem}
.err-sum a{color:var(--bad);font-weight:700}
.err-sum ul{margin:.4rem 0 0;padding-left:1.2rem}
input[aria-invalid="true"]{border-color:var(--bad);border-width:3px}
.ok-box{border:2px solid var(--ok);background:var(--ok-bg);color:var(--ok);padding:1rem;font-weight:700}
.pipe{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));counter-reset:s}
.pipe li{counter-increment:s;border-top:3px solid var(--fg);padding-top:.8rem;display:grid;gap:.4rem;align-content:start}
.pipe li::before{content:"Step " counter(s);font:600 .8125rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pipe h3{font-size:1.15rem}
.stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;list-style:none;padding:0}
.stack li{font:600 .9rem var(--font-mono);padding:.3rem .7rem;border:1.5px solid var(--fg)}
footer.foot{border-top:3px solid var(--fg);padding-block:2rem 3rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{animation:none !important;transition:none !important}

/* ---------- live scan (server-connected) ---------- */
.live-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));align-items:start}
#liveHtml,#liveUrl,.srv input,.lf-edit input{width:100%;font:inherit;color:var(--fg);background:var(--bg);border:2px solid var(--fg);border-radius:4px;padding:.5rem .65rem;min-height:var(--target)}
#liveHtml{font-family:var(--font-mono);font-size:.875rem;resize:vertical}
.lf-edit input{flex:1 1 12rem;width:auto}
.srv summary{cursor:pointer;font-weight:700;min-height:var(--target);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.srv{display:grid;gap:.75rem}
.lf-list{gap:.6rem}
.lf{display:grid;gap:.4rem;padding:.7rem;background:var(--bg);border:1.5px solid var(--line);border-radius:4px;min-width:0}
.lf-h{display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:center}
.lf-sel{overflow-wrap:anywhere;font-size:.8125rem;color:var(--muted)}
.lf-fix{margin:0;overflow-wrap:anywhere}
.lf .btn{justify-self:start}
.live-frame{width:100%;height:22rem;border:2px solid var(--fg);background:#fff}