<title>Flash Download Instrument Panel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Archivo+Expanded:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
<style>
:root{
  --ink:#0C121C; --panel:#121B29; --raise:#1A2638; --sunken:#070C14;
  --line:#253346; --line-soft:#19222F;
  --tx:#DEE7F2; --tx-2:#93A6C0; --tx-3:#5D718E;
  --amber:#FFB22C; --amber-dk:#D9701A; --amber-lt:#FFE4A8;
  --lilac:#9D8CFF; --ok:#2FD4A8; --red:#FF5F56;
  --ff-display:"Archivo Expanded","Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-chip:2px; --r-ctl:4px; --r-panel:6px; --r-win:10px;
  --sh-2:0 8px 24px -14px #000; --sh-3:0 28px 64px -24px #000;
}
*{box-sizing:border-box}
body{background:var(--ink);color:var(--tx);font:400 14px/1.5 var(--ff-ui);-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.sec{padding-block:68px;border-top:1px solid var(--line-soft)}
.sec:first-of-type{border-top:0}
.scroller{overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
a{color:var(--amber)}
hr.rule{border:0;border-top:1px solid var(--line-soft);margin:0}

/* ---------- type roles ---------- */
.eyebrow{font:600 10.5px/1 var(--ff-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--tx-3);margin:0}
.d1{font-family:var(--ff-display);font-stretch:125%;font-weight:800;font-size:clamp(32px,5.6vw,52px);line-height:1;letter-spacing:-.022em;margin:14px 0 0;text-wrap:balance}
.d2{font-family:var(--ff-display);font-stretch:125%;font-weight:700;font-size:clamp(21px,2.8vw,27px);line-height:1.08;letter-spacing:-.012em;margin:10px 0 0;text-wrap:balance}
.h3{font:600 15.5px/1.3 var(--ff-ui);margin:0}
.p{font:400 14.5px/1.62 var(--ff-ui);color:var(--tx-2);max-width:63ch;margin:14px 0 0}
.p b{color:var(--tx);font-weight:600}
.m{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.tiny{font:500 11.5px/1.45 var(--ff-ui);color:var(--tx-3)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:28px}
.sec-head .num{font-family:var(--ff-mono);font-size:11px;color:var(--amber);letter-spacing:.08em}

/* ---------- generic spec panel ---------- */
.cgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.spec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);padding:16px}
.spec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.spec-h h4{font:600 12.5px/1 var(--ff-ui);margin:0;letter-spacing:.01em}
.spec-h span{font:500 10.5px/1 var(--ff-mono);color:var(--tx-3)}
.note{font:400 12px/1.5 var(--ff-ui);color:var(--tx-3);margin:12px 0 0}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- window shell mock ---------- */
.shell{min-width:880px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-win);box-shadow:var(--sh-3);overflow:hidden;font-size:13px}
.tbar{display:flex;align-items:center;gap:14px;height:38px;padding:0 6px 0 12px;background:linear-gradient(#1B2636,#151E2C);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:7px;font-family:var(--ff-display);font-stretch:125%;font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--tx)}
.bolt{width:14px;height:14px;display:block}
.tbar-drag{flex:1;height:100%}
.wctl{display:flex;gap:1px}
.wctl i{width:30px;height:24px;display:grid;place-items:center;color:var(--tx-3);border-radius:3px;font-style:normal;font-size:12px}
.wctl i:last-child:hover{background:#7A2420;color:#fff}
.wctl i:hover{background:var(--raise);color:var(--tx)}
.appbody{display:grid;grid-template-columns:184px minmax(0,1fr) 272px}
.rail{background:#0F1724;border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.rail-lbl{font:600 9.5px/1 var(--ff-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);padding:14px 8px 7px}
.rail-lbl:first-child{padding-top:2px}
.nav{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-ctl);color:var(--tx-2);font:500 12.5px/1 var(--ff-ui);cursor:default}
.nav .ct{margin-left:auto;font:500 11px/1 var(--ff-mono);color:var(--tx-3)}
.nav .dot{width:5px;height:5px;border-radius:50%;background:var(--tx-3)}
.nav:hover{background:#141E2D;color:var(--tx)}
.nav.on{background:var(--raise);color:var(--tx);box-shadow:inset 2px 0 0 var(--amber)}
.nav.on .dot{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.nav.on .ct{color:var(--amber)}
.main{min-width:0;display:flex;flex-direction:column}
.inspector{border-left:1px solid var(--line);background:#0F1724;padding:14px;min-width:0}

/* ---------- capture bar ---------- */
.capture{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.capture-in{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 11px}
.capture-in:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgb(255 178 44 / .14)}
.capture-in input{all:unset;flex:1;min-width:0;font:500 12.5px var(--ff-mono);color:var(--tx)}
.capture-in input::placeholder{color:var(--tx-3);font-family:var(--ff-ui);font-weight:500}
.kbd{font:500 10px/1 var(--ff-mono);color:var(--tx-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:4px 5px;background:#0D1521;white-space:nowrap}

/* ---------- list + rows ---------- */
.list{flex:1;display:flex;flex-direction:column}
.dl{padding:12px 14px;border-bottom:1px solid var(--line-soft);display:grid;gap:9px}
.dl.on{background:#141F2F;box-shadow:inset 2px 0 0 var(--amber)}
.dl-top{display:flex;align-items:center;gap:10px;min-width:0}
.dl-name{font:600 12.5px/1.2 var(--ff-ui);color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dl-meta{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 12px;min-width:0;font:500 11.5px/1 var(--ff-mono);color:var(--tx-3);font-variant-numeric:tabular-nums}
.dl-rate{color:var(--amber);font-weight:600}
.dl-rate.idle{color:var(--tx-3);font-weight:500}
.dl-rate.good{color:var(--ok)}
.dl-rate.bad{color:var(--red)}
.icbtn{width:24px;height:24px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--raise);color:var(--tx-2);font-size:10px;cursor:pointer;font-family:var(--ff-mono)}
.icbtn:hover{color:var(--tx);border-color:#36465C}
.icbtn:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}

/* ---------- THE SIGNATURE: segment lane strip ---------- */
.lanes{display:grid;gap:2px}
.lanes.compact{gap:2px}
.lane{display:grid;grid-template-columns:20px minmax(0,1fr) 44px;align-items:center;gap:8px}
.lane-id{font:500 9.5px/1 var(--ff-mono);color:var(--tx-3);text-align:right}
.lane-track{position:relative;height:7px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:var(--r-chip);overflow:hidden}
.lanes.compact .lane-track{height:5px}
.lane-fill{position:absolute;inset:0 auto 0 0;width:var(--w);transform-origin:left center;background:linear-gradient(90deg,var(--amber-dk),var(--amber));border-radius:var(--r-chip);animation:grow .9s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--d,0s)}
.lane-fill::after{content:"";position:absolute;inset:0 0 0 auto;width:2px;background:var(--amber-lt);box-shadow:0 0 7px var(--amber)}
@keyframes grow{from{transform:scaleX(.22)}to{transform:scaleX(1)}}
.lane-rate{font:500 9.5px/1 var(--ff-mono);color:var(--tx-3);font-variant-numeric:tabular-nums}
/* lane states */
.lane.stall .lane-track{box-shadow:inset 0 0 0 1px #4A2320}
.lane.stall .lane-fill{background:repeating-linear-gradient(135deg,#A8412C 0 4px,#6E2A1D 4px 8px)}
.lane.stall .lane-fill::after{background:var(--red);box-shadow:0 0 7px var(--red)}
.lane.stall .lane-rate{color:var(--red)}
.lane.hold .lane-fill{background:linear-gradient(90deg,#3B4659,#55637A)}
.lane.hold .lane-fill::after{display:none}
.lane.done .lane-fill{background:var(--ok);opacity:.85}
.lane.done .lane-fill::after{display:none}
.lane.verify .lane-fill{background:linear-gradient(90deg,#1E7F68,var(--ok));animation:grow .9s cubic-bezier(.2,.75,.25,1) both,pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.lane.void .lane-fill{display:none}
/* byte-range axis */
.axis{display:grid;grid-template-columns:20px minmax(0,1fr) 44px;gap:8px;align-items:end}
.axis-bar{display:flex;justify-content:space-between;font:500 9px/1 var(--ff-mono);color:var(--tx-3);border-bottom:1px solid var(--line-soft);padding-bottom:4px}
.lane-strip-foot{display:grid;grid-template-columns:20px minmax(0,1fr) 44px;gap:8px;margin-top:5px}
.strip-sum{display:flex;flex-wrap:wrap;gap:4px 14px;font:500 10px/1 var(--ff-mono);color:var(--tx-3);font-variant-numeric:tabular-nums}
.strip-sum b{color:var(--tx-2);font-weight:600}

/* ---------- chips / pills ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font:600 9.5px/1 var(--ff-mono);letter-spacing:.04em;padding:4px 6px;border-radius:var(--r-chip);border:1px solid var(--line);color:var(--tx-2);background:#0F1724;white-space:nowrap}
.chip-rt{color:#C4B9FF;border-color:#3B3470;background:#191634}
.chip-ok{color:var(--ok);border-color:#1D5C4B;background:#0C2420}
.chip-bad{color:var(--red);border-color:#5E2A26;background:#2A1315}
.chip-amber{color:var(--amber);border-color:#5C4318;background:#241B0A}
.chip-hold{color:var(--tx-2)}

/* ---------- controls ---------- */
.btn{font:600 12.5px/1 var(--ff-ui);padding:9px 14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--raise);color:var(--tx);cursor:pointer}
.btn:hover{border-color:#394A61}
.btn:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
.btn-pri{background:linear-gradient(#FFBD48,#EE9A15);border-color:#FFD07A;color:#2B1B03;font-weight:700}
.btn-pri:hover{border-color:#FFE0A8}
.btn-ghost{background:transparent;border-color:transparent;color:var(--tx-2)}
.btn-ghost:hover{background:var(--raise);color:var(--tx);border-color:transparent}
.btn-dgr{background:#2A1416;border-color:#5A2A28;color:#FF9890}
.btn-sm{padding:6px 10px;font-size:11.5px}
.btn:disabled{opacity:.38;cursor:not-allowed}
.field{width:100%;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 10px;color:var(--tx);font:500 12.5px var(--ff-ui)}
.field.m{font-family:var(--ff-mono);font-size:12px}
.field::placeholder{color:var(--tx-3)}
.field:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgb(255 178 44 / .14)}
label.fl{display:block;font:600 9.5px/1 var(--ff-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:6px}
/* connection stepper */
.steps{position:relative;display:flex;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;background:var(--sunken);width:max-content;max-width:100%}
.steps input{position:absolute;opacity:0;width:0;height:0}
.steps label{padding:7px 11px;font:600 11.5px/1 var(--ff-mono);color:var(--tx-3);cursor:pointer;border-right:1px solid var(--line-soft)}
.steps label:last-of-type{border-right:0}
.steps label:hover{color:var(--tx)}
.steps input:checked + label{background:linear-gradient(#FFBD48,#EE9A15);color:#2B1B03}
.steps input:focus-visible + label{outline:2px solid var(--lilac);outline-offset:-2px}
/* toggle */
.tg{display:flex;align-items:center;gap:9px;cursor:pointer;font:500 12.5px/1.3 var(--ff-ui);color:var(--tx)}
.tg input{position:absolute;opacity:0}
.tg i{position:relative;flex:none;width:30px;height:17px;border-radius:9px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);transition:background .16s,box-shadow .16s}
.tg i::after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:var(--tx-3);transition:transform .16s,background .16s}
.tg input:checked + i{background:#3A2A08;box-shadow:inset 0 0 0 1px #7A5A18}
.tg input:checked + i::after{transform:translateX(13px);background:var(--amber)}
.tg input:focus-visible + i{outline:2px solid var(--lilac);outline-offset:2px}
/* table */
.tbl{width:100%;border-collapse:collapse;font:500 11.5px/1 var(--ff-mono);font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font:600 9.5px/1 var(--ff-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3);padding:0 8px 7px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line-soft);color:var(--tx-2);white-space:nowrap}
.tbl td:first-child{color:var(--tx)}
.tbl-wrap{overflow-x:auto}

/* ---------- status strip ---------- */
.strip{display:flex;align-items:center;gap:16px;padding:7px 12px;border-top:1px solid var(--line);background:#0F1724;font:500 10.5px/1 var(--ff-mono);color:var(--tx-3);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.strip b{color:var(--tx);font-weight:600}
.strip .sep{width:1px;height:12px;background:var(--line)}

/* ---------- swatches ---------- */
.sw-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.sw{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--panel)}
.sw .chipc{height:54px;border-bottom:1px solid var(--line)}
.sw .meta{padding:9px 10px}
.sw .nm{font:600 11.5px/1 var(--ff-ui)}
.sw .hex{font:500 10.5px/1 var(--ff-mono);color:var(--tx-3);margin-top:5px}
.sw .use{font:400 11px/1.4 var(--ff-ui);color:var(--tx-3);margin-top:7px}

/* ---------- type specimen ---------- */
.spm{border:1px solid var(--line);border-radius:var(--r-panel);background:var(--panel);padding:18px}
.spm-big{font-family:var(--ff-display);font-stretch:125%;font-weight:800;font-size:clamp(30px,5vw,46px);line-height:.98;letter-spacing:-.02em;margin:10px 0 0}
.scale-row{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.scale-row:last-child{border-bottom:0}
.scale-row .k{flex:none;width:94px;font:500 10px/1 var(--ff-mono);color:var(--tx-3);letter-spacing:.06em}
.scale-row .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scale-row .s{flex:none;font:500 10px/1 var(--ff-mono);color:var(--tx-3)}

/* ---------- misc kit ---------- */
.ladder{display:flex;gap:10px;flex-wrap:wrap}
.ladder div{flex:1;min-width:62px;height:54px;background:var(--raise);border:1px solid var(--line);display:grid;place-items:end center;padding-bottom:5px;font:500 9.5px/1 var(--ff-mono);color:var(--tx-3)}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--raise);border:1px solid var(--line);border-left:2px solid var(--ok);border-radius:var(--r-ctl);padding:11px 12px;box-shadow:var(--sh-2);max-width:380px}
.toast.bad{border-left-color:var(--red)}
.toast h5{font:600 12px/1.3 var(--ff-ui);margin:0}
.toast p{font:400 11.5px/1.45 var(--ff-ui);color:var(--tx-2);margin:4px 0 0}
.menu{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-ctl);padding:4px;box-shadow:var(--sh-3);width:216px}
.menu i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:3px;font:500 12px/1 var(--ff-ui);font-style:normal;color:var(--tx-2)}
.menu i span{margin-left:auto;font:500 10px/1 var(--ff-mono);color:var(--tx-3)}
.menu i:hover{background:#243348;color:var(--tx)}
.menu i.dgr{color:#FF9890}
.menu hr{border:0;border-top:1px solid var(--line-soft);margin:4px 2px}
.empty{text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:var(--r-panel);background:#0F1724}
.empty h5{font-family:var(--ff-display);font-stretch:125%;font-weight:700;font-size:15px;margin:14px 0 0}
.dialog{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-3);max-width:480px;overflow:hidden}
.dialog-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.dialog-b{padding:16px;display:grid;gap:16px}
.dialog-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:#0F1724}
.twocol{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft);font:500 11.5px/1.3 var(--ff-mono);font-variant-numeric:tabular-nums}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--tx-3);font-family:var(--ff-ui);font-weight:500;font-size:11.5px}
.kv dd{margin:0;color:var(--tx)}
.insp-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px}
.insp-h h5{font:600 9.5px/1 var(--ff-ui);letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin:0}
.insp-blk{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.insp-blk:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.do-dont{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.dd{border:1px solid var(--line);border-radius:var(--r-panel);padding:14px;background:var(--panel)}
.dd .tag{font:600 9.5px/1 var(--ff-ui);letter-spacing:.14em;text-transform:uppercase}
.dd.y .tag{color:var(--ok)}
.dd.n .tag{color:var(--red)}
.dd p{font:500 12.5px/1.5 var(--ff-ui);margin:9px 0 0;color:var(--tx)}
.dd p.why{font-weight:400;color:var(--tx-3);font-size:11.5px}
.ck{display:grid;gap:7px;list-style:none;padding:0;margin:0}
.ck li{display:flex;gap:9px;font:400 12.5px/1.5 var(--ff-ui);color:var(--tx-2)}
.ck li::before{content:"✓";color:var(--ok);font-family:var(--ff-mono);font-size:11px;flex:none;line-height:1.6}
.ck li b{color:var(--tx);font-weight:600}
footer{padding-block:40px 60px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline}
@media (max-width:640px){.sec{padding-block:48px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>

<div class="wrap">

<!-- ============ MASTHEAD ============ -->
<section class="sec">
  <p class="eyebrow">Flash Download · desktop · design direction v0.1</p>
  <h1 class="d1">One bar hides the only<br>number that matters.</h1>
  <p class="p">Flash Download opens up to 32 connections against one file, each pulling its own byte range, each able to take its own route. An aggregate percentage averages all of that away — but the download finishes when the <b>slowest lane</b> finishes. So this interface shows the lanes.</p>

  <div class="scroller" style="margin-top:34px">
    <div class="shell">
      <!-- titlebar -->
      <div class="tbar">
        <span class="mark">
          <svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="#FFB22C"></path></svg>
          FLASH DOWNLOAD
        </span>
        <span class="chip chip-ok">4 ROUTES UP</span>
        <div class="tbar-drag"></div>
        <div class="wctl"><i>—</i><i>▢</i><i>✕</i></div>
      </div>

      <div class="appbody">
        <!-- rail -->
        <nav class="rail">
          <p class="rail-lbl">Transfers</p>
          <div class="nav on"><span class="dot"></span>Active<span class="ct">3</span></div>
          <div class="nav"><span class="dot"></span>Queued<span class="ct">11</span></div>
          <div class="nav"><span class="dot"></span>Paused<span class="ct">2</span></div>
          <div class="nav"><span class="dot"></span>Finished<span class="ct">248</span></div>
          <div class="nav"><span class="dot" style="background:#FF5F56"></span>Failed<span class="ct">1</span></div>
          <p class="rail-lbl">Network</p>
          <div class="nav"><span class="dot"></span>Routes<span class="ct">6</span></div>
          <div class="nav"><span class="dot"></span>Speed limits</div>
          <div class="nav"><span class="dot"></span>Settings</div>
        </nav>

        <!-- main -->
        <div class="main">
          <div class="capture">
            <div class="capture-in">
              <svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0 4.5-4.5M12 15l-4.5-4.5M4 19h16" stroke="#5D718E" stroke-width="2.2" fill="none" stroke-linecap="round"></path></svg>
              <input id="hero-url" value="https://releases.ubuntu.com/24.04.3/ubuntu-24.04.3-live-server-amd64.iso" readonly aria-label="Link to download">
            </div>
            <span class="kbd">⌘V to capture</span>
            <button class="btn btn-pri btn-sm" type="button">Start</button>
          </div>

          <div class="list">
            <!-- selected, active -->
            <article class="dl on">
              <div class="dl-top">
                <span class="dl-name">ubuntu-24.04.3-live-server-amd64.iso</span>
                <span class="dl-meta">
                  <span class="chip chip-rt">16 CONN · 4 ROUTES</span>
                  <span>2.81 / 3.09 GB</span>
                  <span class="dl-rate">94.2 MB/s</span>
                  <span>0:03 left</span>
                </span>
                <button class="icbtn" type="button" aria-label="Pause ubuntu-24.04.3-live-server-amd64.iso">❙❙</button>
              </div>
              <div class="axis">
                <span></span>
                <div class="axis-bar"><span>0</span><span>773 MB</span><span>1.55 GB</span><span>2.32 GB</span><span>3.09 GB</span></div>
                <span></span>
              </div>
              <div class="lanes">
                <div class="lane"><span class="lane-id">c1</span><div class="lane-track"><i class="lane-fill" style="--w:97%;--d:.00s"></i></div><span class="lane-rate">8.1</span></div>
                <div class="lane"><span class="lane-id">c2</span><div class="lane-track"><i class="lane-fill" style="--w:91%;--d:.04s"></i></div><span class="lane-rate">7.4</span></div>
                <div class="lane"><span class="lane-id">c3</span><div class="lane-track"><i class="lane-fill" style="--w:94%;--d:.08s"></i></div><span class="lane-rate">7.9</span></div>
                <div class="lane done"><span class="lane-id">c4</span><div class="lane-track"><i class="lane-fill" style="--w:100%;--d:.12s"></i></div><span class="lane-rate">done</span></div>
                <div class="lane"><span class="lane-id">c5</span><div class="lane-track"><i class="lane-fill" style="--w:88%;--d:.16s"></i></div><span class="lane-rate">6.8</span></div>
                <div class="lane stall"><span class="lane-id">c6</span><div class="lane-track"><i class="lane-fill" style="--w:62%;--d:.2s"></i></div><span class="lane-rate">0.0</span></div>
                <div class="lane"><span class="lane-id">c7</span><div class="lane-track"><i class="lane-fill" style="--w:93%;--d:.24s"></i></div><span class="lane-rate">7.7</span></div>
                <div class="lane"><span class="lane-id">c8</span><div class="lane-track"><i class="lane-fill" style="--w:96%;--d:.28s"></i></div><span class="lane-rate">8.0</span></div>
                <div class="lane"><span class="lane-id">c9</span><div class="lane-track"><i class="lane-fill" style="--w:84%;--d:.32s"></i></div><span class="lane-rate">6.1</span></div>
                <div class="lane"><span class="lane-id">c10</span><div class="lane-track"><i class="lane-fill" style="--w:95%;--d:.36s"></i></div><span class="lane-rate">7.8</span></div>
                <div class="lane"><span class="lane-id">c11</span><div class="lane-track"><i class="lane-fill" style="--w:90%;--d:.4s"></i></div><span class="lane-rate">7.2</span></div>
                <div class="lane done"><span class="lane-id">c12</span><div class="lane-track"><i class="lane-fill" style="--w:100%;--d:.44s"></i></div><span class="lane-rate">done</span></div>
                <div class="lane"><span class="lane-id">c13</span><div class="lane-track"><i class="lane-fill" style="--w:87%;--d:.48s"></i></div><span class="lane-rate">6.6</span></div>
                <div class="lane"><span class="lane-id">c14</span><div class="lane-track"><i class="lane-fill" style="--w:92%;--d:.52s"></i></div><span class="lane-rate">7.5</span></div>
                <div class="lane"><span class="lane-id">c15</span><div class="lane-track"><i class="lane-fill" style="--w:98%;--d:.56s"></i></div><span class="lane-rate">8.2</span></div>
                <div class="lane"><span class="lane-id">c16</span><div class="lane-track"><i class="lane-fill" style="--w:89%;--d:.6s"></i></div><span class="lane-rate">7.0</span></div>
              </div>
              <div class="lane-strip-foot">
                <span></span>
                <div class="strip-sum">
                  <span>slowest lane <b>c6 · stalled 4s</b></span>
                  <span>spread <b>±6.3%</b></span>
                  <span>retries <b>2</b></span>
                </div>
                <span></span>
              </div>
            </article>

            <!-- active, routed, healthy -->
            <article class="dl">
              <div class="dl-top">
                <span class="dl-name">imagenet-val-2012.tar</span>
                <span class="dl-meta">
                  <span class="chip chip-rt">8 CONN · FRA-1</span>
                  <span>19.4 / 44.0 GB</span>
                  <span class="dl-rate">41.6 MB/s</span>
                  <span>9:51 left</span>
                </span>
                <button class="icbtn" type="button" aria-label="Pause imagenet-val-2012.tar">❙❙</button>
              </div>
              <div class="lanes compact">
                <div class="lane"><span class="lane-id">c1</span><div class="lane-track"><i class="lane-fill" style="--w:48%;--d:.1s"></i></div><span class="lane-rate">5.3</span></div>
                <div class="lane"><span class="lane-id">c2</span><div class="lane-track"><i class="lane-fill" style="--w:44%;--d:.14s"></i></div><span class="lane-rate">5.0</span></div>
                <div class="lane"><span class="lane-id">c3</span><div class="lane-track"><i class="lane-fill" style="--w:51%;--d:.18s"></i></div><span class="lane-rate">5.5</span></div>
                <div class="lane"><span class="lane-id">c4</span><div class="lane-track"><i class="lane-fill" style="--w:39%;--d:.22s"></i></div><span class="lane-rate">4.4</span></div>
                <div class="lane"><span class="lane-id">c5</span><div class="lane-track"><i class="lane-fill" style="--w:46%;--d:.26s"></i></div><span class="lane-rate">5.2</span></div>
                <div class="lane"><span class="lane-id">c6</span><div class="lane-track"><i class="lane-fill" style="--w:43%;--d:.3s"></i></div><span class="lane-rate">4.9</span></div>
                <div class="lane"><span class="lane-id">c7</span><div class="lane-track"><i class="lane-fill" style="--w:49%;--d:.34s"></i></div><span class="lane-rate">5.4</span></div>
                <div class="lane"><span class="lane-id">c8</span><div class="lane-track"><i class="lane-fill" style="--w:41%;--d:.38s"></i></div><span class="lane-rate">4.6</span></div>
              </div>
            </article>

            <!-- verifying -->
            <article class="dl">
              <div class="dl-top">
                <span class="dl-name">blender-4.2.1-linux-x64.tar.xz</span>
                <span class="dl-meta">
                  <span class="chip chip-ok">VERIFYING SHA256</span>
                  <span>326 MB</span>
                  <span class="dl-rate good">stitching 8 parts</span>
                </span>
                <button class="icbtn" type="button" aria-label="Cancel verification">✕</button>
              </div>
              <div class="lanes compact">
                <div class="lane verify"><span class="lane-id">all</span><div class="lane-track"><i class="lane-fill" style="--w:74%;--d:.1s"></i></div><span class="lane-rate">74%</span></div>
              </div>
            </article>

            <!-- failed -->
            <article class="dl">
              <div class="dl-top">
                <span class="dl-name">dataset-shard-0042.parquet</span>
                <span class="dl-meta">
                  <span class="chip chip-bad">403 FROM SG-2</span>
                  <span>— / 1.2 GB</span>
                  <span class="dl-rate bad">Route rejected the range request</span>
                </span>
                <button class="icbtn" type="button" aria-label="Retry dataset-shard-0042.parquet">↻</button>
              </div>
              <div class="lanes compact">
                <div class="lane void"><span class="lane-id">c1</span><div class="lane-track"></div><span class="lane-rate">—</span></div>
              </div>
            </article>
          </div>

          <div class="strip">
            <span><b>94.2 MB/s</b> down</span><span class="sep"></span>
            <span>25 of 32 connections</span><span class="sep"></span>
            <span>disk write <b>88 MB/s</b></span><span class="sep"></span>
            <span>routes <b>4 up</b> · 1 degraded · 1 off</span><span class="sep"></span>
            <span>no speed limit</span>
          </div>
        </div>

        <!-- inspector -->
        <aside class="inspector">
          <div class="insp-blk">
            <div class="insp-h"><h5>Throughput · 60s</h5><span class="m tiny">peak 102 MB/s</span></div>
            <svg viewBox="0 0 244 78" width="100%" height="78" role="img" aria-label="Throughput over the last 60 seconds, peaking at 102 megabytes per second and currently 94.2.">
              <g stroke="#19222F" stroke-width="1">
                <line x1="8" y1="14" x2="236" y2="14"></line>
                <line x1="8" y1="34" x2="236" y2="34"></line>
                <line x1="8" y1="54" x2="236" y2="54"></line>
              </g>
              <path d="M8,52 22,46 36,49 50,38 64,34 78,36 92,26 106,22 120,30 134,18 148,15 162,20 176,14 190,12 204,22 218,16 232,13 232,62 8,62Z" fill="url(#gq)" stroke="none"></path>
              <path d="M8,52 22,46 36,49 50,38 64,34 78,36 92,26 106,22 120,30 134,18 148,15 162,20 176,14 190,12 204,22 218,16 232,13" fill="none" stroke="#FFB22C" stroke-width="1.6" stroke-linejoin="round"></path>
              <circle cx="232" cy="13" r="2.6" fill="#FFE4A8" stroke="#D9701A" stroke-width="1"></circle>
              <defs><linearGradient id="gq" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFB22C" stop-opacity=".30"></stop><stop offset="1" stop-color="#FFB22C" stop-opacity="0"></stop></linearGradient></defs>
              <text x="8" y="74" fill="#5D718E" font-family="IBM Plex Mono, monospace" font-size="8">−60s</text>
              <text x="236" y="74" fill="#5D718E" font-family="IBM Plex Mono, monospace" font-size="8" text-anchor="end">94.2 MB/s</text>
            </svg>
          </div>

          <div class="insp-blk">
            <div class="insp-h"><h5>Connections</h5><span class="m tiny">16 open</span></div>
            <div class="tbl-wrap">
              <table class="tbl">
                <thead><tr><th>C</th><th>Range</th><th>Route</th><th>MB/s</th></tr></thead>
                <tbody>
                  <tr><td>c6</td><td>374–432 MB</td><td style="color:#C4B9FF">sg-2</td><td style="color:#FF5F56">0.0</td></tr>
                  <tr><td>c9</td><td>580–637 MB</td><td style="color:#C4B9FF">direct</td><td>6.1</td></tr>
                  <tr><td>c13</td><td>831–889 MB</td><td style="color:#C4B9FF">fra-1</td><td>6.6</td></tr>
                  <tr><td>c15</td><td>946–1004 MB</td><td style="color:#C4B9FF">us-e</td><td>8.2</td></tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="insp-blk">
            <div class="insp-h"><h5>Server</h5></div>
            <dl class="kv" style="display:grid">
              <div style="display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft)"><dt>Range requests</dt><dd class="m" style="color:#2FD4A8">bytes · accepted</dd></div>
              <div style="display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft)"><dt>ETag</dt><dd class="m">"4f2a…c81d"</dd></div>
              <div style="display:flex;justify-content:space-between;gap:12px;padding:6px 0"><dt>Checksum</dt><dd class="m">SHA256 from site</dd></div>
            </dl>
          </div>

          <button class="btn btn-sm" type="button" style="width:100%;margin-top:14px">Rebalance connections</button>
        </aside>
      </div>
    </div>
  </div>

  <div class="cgrid" style="margin-top:22px">
    <div class="spec">
      <div class="spec-h"><h4>Grounded in</h4><span>byte ranges</span></div>
      <p class="note" style="margin:0">Every number on screen is one a download manager actually holds: range offsets, <span class="m">Accept-Ranges</span>, per-connection rate, retry counts, the route each socket took. No invented metrics.</p>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>Signature</h4><span>lane strip</span></div>
      <p class="note" style="margin:0">The segment lane strip replaces the progress bar at every size — compact in a row, full in the inspector. It is the product's differentiator made visible.</p>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>The risk</h4><span>no single bar</span></div>
      <p class="note" style="margin:0">Dropping the familiar one-bar progress costs recognition. It buys the thing users came for: seeing <i>which</i> connection or route is holding the file up, without opening a log.</p>
    </div>
  </div>
</section>

<!-- ============ COLOR ============ -->
<section class="sec">
  <div class="sec-head">
    <span class="num">01</span>
    <h2 class="d2" style="margin:0">Color is two data channels, not a theme</h2>
  </div>
  <p class="p" style="margin-top:-14px">Amber only ever means <b>throughput</b>. Lilac only ever means <b>route</b>. Because those two hues are spoken for as data, state uses hues that sit far from both — which is why there is no yellow "warning" anywhere in this system.</p>

  <p class="eyebrow" style="margin:30px 0 12px">Surfaces — blue-slate, never neutral grey</p>
  <div class="sw-grid">
    <div class="sw"><div class="chipc" style="background:#0C121C"></div><div class="meta"><div class="nm">Ink</div><div class="hex">#0C121C</div><div class="use">Window ground, outside all panels.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#121B29"></div><div class="meta"><div class="nm">Panel</div><div class="hex">#121B29</div><div class="use">Lists, cards, dialogs, titlebar body.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#1A2638"></div><div class="meta"><div class="nm">Raise</div><div class="hex">#1A2638</div><div class="use">Buttons, row hover, selected nav.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#070C14"></div><div class="meta"><div class="nm">Sunken</div><div class="hex">#070C14</div><div class="use">Inputs and lane tracks — the unfilled byte range.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#253346"></div><div class="meta"><div class="nm">Line</div><div class="hex">#253346</div><div class="use">Structural hairline, 1px, never a shadow substitute.</div></div></div>
  </div>

  <p class="eyebrow" style="margin:28px 0 12px">Throughput channel — reserved for rate and fill</p>
  <div class="sw-grid">
    <div class="sw"><div class="chipc" style="background:linear-gradient(90deg,#D9701A,#FFB22C)"></div><div class="meta"><div class="nm">Amber ramp</div><div class="hex">#D9701A → #FFB22C</div><div class="use">Lane fill, left to right. Deep at the range start, bright at the write head.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#FFB22C"></div><div class="meta"><div class="nm">Amber</div><div class="hex">#FFB22C</div><div class="use">Live rates, primary action, active-nav marker.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#FFE4A8"></div><div class="meta"><div class="nm">Write head</div><div class="hex">#FFE4A8</div><div class="use">2px leading edge on a filling lane. Absent when paused.</div></div></div>
  </div>

  <p class="eyebrow" style="margin:28px 0 12px">Route channel &amp; state</p>
  <div class="sw-grid">
    <div class="sw"><div class="chipc" style="background:#9D8CFF"></div><div class="meta"><div class="nm">Lilac</div><div class="hex">#9D8CFF</div><div class="use">Proxy and route identity only. Also the focus ring — routing and keyboard focus never co-occur.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#2FD4A8"></div><div class="meta"><div class="nm">Verified</div><div class="hex">#2FD4A8</div><div class="use">Lane complete, checksum matched, route healthy.</div></div></div>
    <div class="sw"><div class="chipc" style="background:#FF5F56"></div><div class="meta"><div class="nm">Failed</div><div class="hex">#FF5F56</div><div class="use">Stall, rejected range, dead route. The only alarm hue.</div></div></div>
    <div class="sw"><div class="chipc" style="background:repeating-linear-gradient(135deg,#A8412C 0 6px,#6E2A1D 6px 12px)"></div><div class="meta"><div class="nm">Stall hatch</div><div class="hex">#A8412C / #6E2A1D</div><div class="use">A stalled lane keeps its width and changes texture, so progress already banked is never erased on screen.</div></div></div>
  </div>

  <p class="eyebrow" style="margin:28px 0 12px">Text</p>
  <div class="sw-grid">
    <div class="sw"><div class="chipc" style="background:#0C121C;display:grid;place-items:center;color:#DEE7F2;font:600 15px var(--ff-ui)">Primary</div><div class="meta"><div class="nm">Text</div><div class="hex">#DEE7F2 · 15.1:1</div></div></div>
    <div class="sw"><div class="chipc" style="background:#0C121C;display:grid;place-items:center;color:#93A6C0;font:500 15px var(--ff-ui)">Secondary</div><div class="meta"><div class="nm">Text 2</div><div class="hex">#93A6C0 · 7.6:1</div></div></div>
    <div class="sw"><div class="chipc" style="background:#0C121C;display:grid;place-items:center;color:#5D718E;font:500 15px var(--ff-ui)">Dim</div><div class="meta"><div class="nm">Text 3</div><div class="hex">#5D718E · 3.8:1</div><div class="use">Labels and axis ticks at 10px+ only — never body copy.</div></div></div>
  </div>
</section>

<!-- ============ TYPE ============ -->
<section class="sec">
  <div class="sec-head"><span class="num">02</span><h2 class="d2" style="margin:0">Type: one family, two widths, one mono</h2></div>
  <p class="p" style="margin-top:-14px">Archivo Expanded carries headings and the app mark — wide, flat-sided, closer to panel silkscreen than to a web headline. Archivo at normal width runs the interface. IBM Plex Mono takes every figure, so a rate column never reflows as digits change.</p>

  <div class="cgrid" style="margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))">
    <div class="spm">
      <p class="eyebrow">Display — Archivo Expanded 800</p>
      <p class="spm-big">FLASH<br>DOWNLOAD</p>
      <p class="note">Used for the window mark, screen titles, and empty-state headings. Never for data — expanded figures are too wide to column up.</p>
    </div>
    <div class="spm">
      <p class="eyebrow">Data — IBM Plex Mono 500, tabular</p>
      <p class="m" style="font-size:15px;line-height:1.7;margin:10px 0 0;color:var(--tx)">374–432 MB<br>bytes=392167424-453312511<br>SHA256 4f2a…c81d<br>0:03 left · ±6.3%</p>
      <p class="note">Byte ranges, offsets, rates, ETags, durations, route ids. Figures stay in this face even inside a sentence.</p>
    </div>
  </div>

  <div class="spm" style="margin-top:14px">
    <p class="eyebrow" style="margin-bottom:6px">Scale</p>
    <div class="scale-row"><span class="k">display/l</span><span class="v" style="font-family:var(--ff-display);font-weight:800;font-size:34px;letter-spacing:-.022em">Nothing queued</span><span class="s">34 / 1.0 / −2.2%</span></div>
    <div class="scale-row"><span class="k">display/s</span><span class="v" style="font-family:var(--ff-display);font-weight:700;font-size:21px">Route pool</span><span class="s">21 / 1.08</span></div>
    <div class="scale-row"><span class="k">title</span><span class="v" style="font:600 15px var(--ff-ui)">Add a download</span><span class="s">15 / 1.3 / 600</span></div>
    <div class="scale-row"><span class="k">body</span><span class="v" style="font:400 14px/1.6 var(--ff-ui)">Flash Download splits the file and reassembles it on disk.</span><span class="s">14 / 1.6 / 400</span></div>
    <div class="scale-row"><span class="k">ui</span><span class="v" style="font:500 12.5px var(--ff-ui)">Rebalance connections</span><span class="s">12.5 / 1.4 / 500</span></div>
    <div class="scale-row"><span class="k">label</span><span class="v eyebrow" style="color:var(--tx-3)">CONNECTIONS</span><span class="s">9.5 / 600 / +14%</span></div>
    <div class="scale-row"><span class="k">data</span><span class="v m" style="font-size:12px;color:var(--tx-2)">2.81 / 3.09 GB</span><span class="s">12 mono / tabular</span></div>
    <div class="scale-row"><span class="k">data/lane</span><span class="v m" style="font-size:9.5px;color:var(--tx-3)">c6 · 0.0</span><span class="s">9.5 mono</span></div>
  </div>
</section>

<!-- ============ FORM & MOTION ============ -->
<section class="sec">
  <div class="sec-head"><span class="num">03</span><h2 class="d2" style="margin:0">Form, elevation, motion</h2></div>
  <div class="cgrid" style="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))">
    <div class="spec">
      <div class="spec-h"><h4>Radius ladder</h4><span>sharper = smaller</span></div>
      <div class="ladder">
        <div style="border-radius:2px">2 · lane</div>
        <div style="border-radius:4px">4 · control</div>
        <div style="border-radius:6px">6 · panel</div>
        <div style="border-radius:10px">10 · window</div>
      </div>
      <p class="note">Radius scales with the object, so nothing reads as a card by default. Lanes stay near-square — a 6px radius on a 7px bar erases the last 12% of the range.</p>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>Spacing</h4><span>4px base</span></div>
      <div class="row" style="gap:4px;align-items:flex-end;margin-bottom:10px">
        <div style="width:4px;height:16px;background:#2A3C54"></div><div style="width:8px;height:22px;background:#2A3C54"></div><div style="width:12px;height:28px;background:#2A3C54"></div><div style="width:16px;height:34px;background:#2A3C54"></div><div style="width:24px;height:40px;background:#2A3C54"></div><div style="width:32px;height:46px;background:#2A3C54"></div>
      </div>
      <p class="note m" style="color:var(--tx-2)">4 · 8 · 12 · 14 · 16 · 24 · 32 · 48</p>
      <p class="note">Lane gap is 2px — below the base scale on purpose, so 32 lanes stay one object instead of 32.</p>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>Elevation</h4><span>3 levels</span></div>
      <div class="stack">
        <div style="padding:9px 11px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font:500 11.5px var(--ff-ui)">1 — hairline. Lists, rows, inspector.</div>
        <div style="padding:9px 11px;background:var(--raise);border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh-2);font:500 11.5px var(--ff-ui)">2 — toast, popover, menu.</div>
        <div style="padding:9px 11px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-3);font:500 11.5px var(--ff-ui)">3 — modal and the window itself.</div>
      </div>
      <p class="note">Shadows are black at low alpha only. No coloured glow except the 7px amber bloom on a live write head.</p>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>Motion</h4><span>data moves, chrome doesn't</span></div>
      <table class="tbl" style="margin-bottom:10px">
        <tbody>
          <tr><td>lane fill</td><td>900ms</td><td>cubic-bezier(.2,.75,.25,1)</td></tr>
          <tr><td>lane stagger</td><td>40ms</td><td>per connection</td></tr>
          <tr><td>verify pulse</td><td>1.5s</td><td>ease-in-out, loop</td></tr>
          <tr><td>control / hover</td><td>160ms</td><td>ease-out</td></tr>
          <tr><td>panel, nav, tab</td><td>0ms</td><td>instant</td></tr>
        </tbody>
      </table>
      <p class="note">One orchestrated moment: on open, lanes fill left-to-right with a 40ms stagger, so you read the strip as 16 independent workers. Nothing else animates. Under <span class="m">prefers-reduced-motion</span> lanes render at final width.</p>
    </div>
  </div>
</section>

<!-- ============ SIGNATURE ============ -->
<section class="sec">
  <div class="sec-head"><span class="num">04</span><h2 class="d2" style="margin:0">The segment lane strip</h2><span class="chip chip-amber">SIGNATURE COMPONENT</span></div>
  <p class="p" style="margin-top:-14px">One lane per connection, left-aligned at that connection's range start, width proportional to the bytes it has taken. The strip is the progress indicator — there is no aggregate bar anywhere in the product.</p>

  <div class="scroller" style="margin-top:24px">
    <div class="spec" style="min-width:620px">
      <div class="spec-h"><h4>Anatomy</h4><span>32 lanes max · 7px tall · 2px gap</span></div>
      <div class="axis" style="margin-bottom:6px">
        <span class="tiny" style="text-align:right">id</span>
        <div class="axis-bar"><span>0</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span></div>
        <span class="tiny">MB/s</span>
      </div>
      <div class="lanes">
        <div class="lane"><span class="lane-id">c1</span><div class="lane-track"><i class="lane-fill" style="--w:72%"></i></div><span class="lane-rate">9.1</span></div>
        <div class="lane"><span class="lane-id">c2</span><div class="lane-track"><i class="lane-fill" style="--w:64%;--d:.04s"></i></div><span class="lane-rate">8.4</span></div>
        <div class="lane stall"><span class="lane-id">c3</span><div class="lane-track"><i class="lane-fill" style="--w:31%;--d:.08s"></i></div><span class="lane-rate">0.0</span></div>
        <div class="lane"><span class="lane-id">c4</span><div class="lane-track"><i class="lane-fill" style="--w:69%;--d:.12s"></i></div><span class="lane-rate">8.8</span></div>
      </div>
      <div class="twocol" style="margin-top:18px">
        <p class="note" style="margin:0"><b style="color:var(--tx)">Left column</b> — connection id in mono, 20px fixed. Stable across a resume, so <span class="m">c3</span> in the log is <span class="m">c3</span> on screen.</p>
        <p class="note" style="margin:0"><b style="color:var(--tx)">Track</b> — sunken well with a hairline inset. The well is the unfetched remainder of that byte range, not decoration.</p>
        <p class="note" style="margin:0"><b style="color:var(--tx)">Fill</b> — amber ramp, deep at the range start, bright at the 2px write head. Head disappears the instant the lane is not moving.</p>
        <p class="note" style="margin:0"><b style="color:var(--tx)">Right column</b> — that lane's own MB/s, 44px fixed, tabular. The lowest number in this column is the finish time.</p>
      </div>
    </div>
  </div>

  <p class="eyebrow" style="margin:28px 0 12px">Lane states</p>
  <div class="cgrid" style="grid-template-columns:repeat(auto-fit,minmax(252px,1fr))">
    <div class="spec"><div class="spec-h"><h4>Filling</h4><span class="m">amber + head</span></div>
      <div class="lanes"><div class="lane"><span class="lane-id">c1</span><div class="lane-track"><i class="lane-fill" style="--w:68%"></i></div><span class="lane-rate">8.1</span></div></div>
      <p class="note">Bytes arriving now.</p></div>
    <div class="spec"><div class="spec-h"><h4>Stalled</h4><span class="m">hatch + red head</span></div>
      <div class="lanes"><div class="lane stall"><span class="lane-id">c6</span><div class="lane-track"><i class="lane-fill" style="--w:62%"></i></div><span class="lane-rate">0.0</span></div></div>
      <p class="note">No bytes for 3s. Width holds — work already banked is never visually rolled back.</p></div>
    <div class="spec"><div class="spec-h"><h4>Paused</h4><span class="m">grey, no head</span></div>
      <div class="lanes"><div class="lane hold"><span class="lane-id">c4</span><div class="lane-track"><i class="lane-fill" style="--w:55%"></i></div><span class="lane-rate">held</span></div></div>
      <p class="note">User's choice, so it reads as neutral — not as a fault.</p></div>
    <div class="spec"><div class="spec-h"><h4>Range complete</h4><span class="m">teal, flat</span></div>
      <div class="lanes"><div class="lane done"><span class="lane-id">c12</span><div class="lane-track"><i class="lane-fill" style="--w:100%"></i></div><span class="lane-rate">done</span></div></div>
      <p class="note">This connection's bytes are on disk. It is now free to be reassigned.</p></div>
    <div class="spec"><div class="spec-h"><h4>Verifying</h4><span class="m">teal, pulsing</span></div>
      <div class="lanes"><div class="lane verify"><span class="lane-id">all</span><div class="lane-track"><i class="lane-fill" style="--w:74%"></i></div><span class="lane-rate">74%</span></div></div>
      <p class="note">Lanes collapse to one after stitching — checksumming is a single pass over the whole file, so showing 16 lanes would lie.</p></div>
    <div class="spec"><div class="spec-h"><h4>Never started</h4><span class="m">empty well</span></div>
      <div class="lanes"><div class="lane void"><span class="lane-id">c1</span><div class="lane-track"></div><span class="lane-rate">—</span></div></div>
      <p class="note">Queued, or failed before the first byte. An em dash, not a zero.</p></div>
  </div>

  <div class="do-dont" style="margin-top:20px">
    <div class="dd y"><span class="tag">Rule</span><p>Lane count follows the real connection count.</p><p class="why">A user who set 8 connections sees 8 lanes. The strip is a readout, not an illustration.</p></div>
    <div class="dd y"><span class="tag">Rule</span><p>Above 32 connections, bin into 32 lanes and label the bin.</p><p class="why">Below ~4px per lane the strip stops being readable, which defeats its only job.</p></div>
    <div class="dd n"><span class="tag">Never</span><p>Don't sort lanes by progress.</p><p class="why">Lane order is byte-range order. Re-sorting makes a stall look like it moved.</p></div>
    <div class="dd n"><span class="tag">Never</span><p>Don't show a single-threaded download as one lonely lane.</p><p class="why">Servers that refuse <span class="m">Range</span> get an honest indeterminate bar, and the row says why.</p></div>
  </div>
</section>

<!-- ============ COMPONENTS ============ -->
<section class="sec">
  <div class="sec-head"><span class="num">05</span><h2 class="d2" style="margin:0">Core components</h2></div>

  <div class="cgrid" style="grid-template-columns:repeat(auto-fit,minmax(296px,1fr))">

    <div class="spec">
      <div class="spec-h"><h4>Buttons</h4><span>36px / 28px</span></div>
      <div class="stack">
        <div class="row"><button class="btn btn-pri" type="button">Start</button><button class="btn" type="button">Pause all</button><button class="btn btn-ghost" type="button">Cancel</button></div>
        <div class="row"><button class="btn btn-pri btn-sm" type="button">Add</button><button class="btn btn-sm" type="button">Resume</button><button class="btn btn-dgr btn-sm" type="button">Delete file</button><button class="btn btn-sm" type="button" disabled>Verify</button></div>
        <div class="row"><button class="icbtn" type="button" aria-label="Pause">❙❙</button><button class="icbtn" type="button" aria-label="Retry">↻</button><button class="icbtn" type="button" aria-label="Open folder">▤</button><button class="icbtn" type="button" aria-label="Remove">✕</button></div>
      </div>
      <p class="note">Exactly one amber button per surface — amber is throughput, and the primary action always starts throughput. Focus ring is lilac so it never reads as a rate.</p>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Connection count</h4><span>1–32</span></div>
      <div class="steps" role="radiogroup" aria-label="Connections per download">
        <input type="radio" name="conn" id="c1x" ><label for="c1x">1</label>
        <input type="radio" name="conn" id="c2x"><label for="c2x">2</label>
        <input type="radio" name="conn" id="c4x"><label for="c4x">4</label>
        <input type="radio" name="conn" id="c8x"><label for="c8x">8</label>
        <input type="radio" name="conn" id="c16x" checked><label for="c16x">16</label>
        <input type="radio" name="conn" id="c32x"><label for="c32x">32</label>
      </div>
      <p class="note">Preset powers of two, because that is how people actually tune this. The chosen value drives the lane count immediately below it in the dialog, so the setting and its effect are one glance apart.</p>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Route selector</h4><span>per download</span></div>
      <div class="stack">
        <div><label class="fl" for="rt">Route</label>
          <select class="field" id="rt">
            <option>Direct — no proxy</option>
            <option selected>Spread across pool (4 up)</option>
            <option>us-e · 198.51.100.24:8080</option>
            <option>fra-1 · 203.0.113.9:1080</option>
          </select></div>
        <div class="row">
          <span class="chip chip-rt">DIRECT</span><span class="chip chip-rt">US-E</span><span class="chip chip-rt">FRA-1</span><span class="chip chip-rt" style="opacity:.45">SG-2 OFF</span>
        </div>
      </div>
      <p class="note">"Spread across pool" is the default: each connection takes a different healthy route, which is where multi-threading and proxying compound.</p>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Switches &amp; limits</h4><span>settings row</span></div>
      <div class="stack">
        <label class="tg" for="t1"><input type="checkbox" id="t1" checked><i></i>Verify checksum after stitching</label>
        <label class="tg" for="t2"><input type="checkbox" id="t2" checked><i></i>Capture links copied to clipboard</label>
        <label class="tg" for="t3"><input type="checkbox" id="t3"><i></i>Drop a route after 3 stalled lanes</label>
        <div><label class="fl" for="lim">Speed limit</label><input class="field m" id="lim" value="unlimited" aria-describedby="limh"><p class="note" id="limh" style="margin-top:6px">Type a number, or <span class="m">unlimited</span>. Applied across all connections, not per lane.</p></div>
      </div>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Route pool row</h4><span>health + load</span></div>
      <div class="stack">
        <div class="row" style="justify-content:space-between;padding:9px 10px;background:#0F1724;border:1px solid var(--line);border-radius:4px">
          <span class="m" style="font-size:11.5px">fra-1 · 203.0.113.9:1080</span><span class="chip chip-ok">42ms · 8 LANES</span>
        </div>
        <div class="row" style="justify-content:space-between;padding:9px 10px;background:#0F1724;border:1px solid var(--line);border-radius:4px">
          <span class="m" style="font-size:11.5px">sg-2 · 198.51.100.7:3128</span><span class="chip chip-bad">403 · 1 LANE</span>
        </div>
        <div class="row" style="justify-content:space-between;padding:9px 10px;background:#0F1724;border:1px solid var(--line);border-radius:4px;opacity:.55">
          <span class="m" style="font-size:11.5px">lhr-4 · 192.0.2.44:8080</span><span class="chip chip-hold">OFF</span>
        </div>
      </div>
      <p class="note">Latency and lanes-in-use sit in one pill, because the only question here is "is this route pulling its weight right now".</p>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Row context menu</h4><span>right-click</span></div>
      <div class="menu">
        <i>Pause<span>Space</span></i>
        <i>Open containing folder<span>⌘⏎</span></i>
        <i>Copy source link<span>⌘C</span></i>
        <hr>
        <i>Change route…</i>
        <i>Rebalance connections</i>
        <i>Verify checksum again</i>
        <hr>
        <i>Remove from list<span>⌫</span></i>
        <i class="dgr">Delete file from disk</i>
      </div>
      <p class="note">Destructive items are last, separated, and name what they destroy. "Remove from list" and "Delete file from disk" are never the same word.</p>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Toasts</h4><span>6s, bottom-right</span></div>
      <div class="stack">
        <div class="toast"><div><h5>Verified ubuntu-24.04.3-live-server-amd64.iso</h5><p>SHA256 matched the publisher's checksum. 3.09 GB in 1:12.</p></div></div>
        <div class="toast bad"><div><h5>sg-2 dropped from the pool</h5><p>Three lanes stalled in a row. Its 4 lanes moved to fra-1 and the download kept going.</p></div></div>
      </div>
      <p class="note">A toast reports a finished fact. Anything still in progress belongs in the row, not in a notification.</p>
    </div>

    <div class="spec">
      <div class="spec-h"><h4>Empty state</h4><span>Active, nothing running</span></div>
      <div class="empty">
        <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true" style="opacity:.6"><path d="M12 3v12m0 0 4.5-4.5M12 15l-4.5-4.5M4 19h16" stroke="#5D718E" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>
        <h5>Nothing downloading</h5>
        <p class="note" style="max-width:34ch;margin:8px auto 14px">Paste a link, or drop a <span class="m">.torrent</span> or text file of links here.</p>
        <button class="btn btn-pri btn-sm" type="button">Paste link</button>
      </div>
      <p class="note">An empty screen is an invitation to act, so it carries the action — and names the two inputs the app accepts.</p>
    </div>

  </div>
</section>

<!-- ============ SCREENS ============ -->
<section class="sec">
  <div class="sec-head"><span class="num">06</span><h2 class="d2" style="margin:0">Two screens in full</h2></div>

  <p class="eyebrow" style="margin-bottom:12px">Add a download — the connection count previews itself as lanes</p>
  <div class="scroller">
    <div class="dialog" style="min-width:420px">
      <div class="dialog-h">
        <svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="#FFB22C"></path></svg>
        <strong style="font:600 13px var(--ff-ui)">Add a download</strong>
        <span class="chip chip-ok" style="margin-left:auto">RANGE REQUESTS OK</span>
      </div>
      <div class="dialog-b">
        <div><label class="fl" for="d-url">Link</label><input class="field m" id="d-url" value="https://releases.ubuntu.com/24.04.3/ubuntu-24.04.3-live-server-amd64.iso"></div>
        <div class="twocol">
          <div><label class="fl" for="d-name">Save as</label><input class="field" id="d-name" value="ubuntu-24.04.3-live-server-amd64.iso"></div>
          <div><label class="fl" for="d-dir">Folder</label><input class="field" id="d-dir" value="~/Downloads/isos"></div>
        </div>
        <div>
          <label class="fl">Connections</label>
          <div class="steps" role="radiogroup" aria-label="Connections">
            <input type="radio" name="conn2" id="e1"><label for="e1">1</label>
            <input type="radio" name="conn2" id="e2"><label for="e2">2</label>
            <input type="radio" name="conn2" id="e4"><label for="e4">4</label>
            <input type="radio" name="conn2" id="e8" checked><label for="e8">8</label>
            <input type="radio" name="conn2" id="e16"><label for="e16">16</label>
            <input type="radio" name="conn2" id="e32"><label for="e32">32</label>
          </div>
          <div class="lanes compact" style="margin-top:10px">
            <div class="lane void"><span class="lane-id">c1</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c2</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c3</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c4</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c5</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c6</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c7</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
            <div class="lane void"><span class="lane-id">c8</span><div class="lane-track"></div><span class="lane-rate">386M</span></div>
          </div>
          <p class="note" style="margin-top:7px">8 ranges of 386 MB. The server accepts <span class="m">Range</span>, so all 8 will open at once.</p>
        </div>
        <div><label class="fl" for="d-rt">Route</label><select class="field" id="d-rt"><option selected>Spread across pool — 4 routes up</option><option>Direct — no proxy</option><option>fra-1 · 203.0.113.9:1080</option></select></div>
        <label class="tg" for="d-vf"><input type="checkbox" id="d-vf" checked><i></i>Verify SHA256 after stitching</label>
      </div>
      <div class="dialog-f">
        <button class="btn btn-ghost" type="button">Cancel</button>
        <button class="btn" type="button">Add to queue</button>
        <button class="btn btn-pri" type="button">Start now</button>
      </div>
    </div>
  </div>

  <p class="eyebrow" style="margin:32px 0 12px">Routes — the pool, and how the lanes are spread across it</p>
  <div class="scroller">
    <div class="shell" style="min-width:880px">
      <div class="tbar">
        <span class="mark"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="#FFB22C"></path></svg>FLASH DOWNLOAD</span>
        <div class="tbar-drag"></div><div class="wctl"><i>—</i><i>▢</i><i>✕</i></div>
      </div>
      <div class="appbody" style="grid-template-columns:184px minmax(0,1fr)">
        <nav class="rail">
          <p class="rail-lbl">Transfers</p>
          <div class="nav"><span class="dot"></span>Active<span class="ct">3</span></div>
          <div class="nav"><span class="dot"></span>Queued<span class="ct">11</span></div>
          <div class="nav"><span class="dot"></span>Finished<span class="ct">248</span></div>
          <p class="rail-lbl">Network</p>
          <div class="nav on"><span class="dot"></span>Routes<span class="ct">6</span></div>
          <div class="nav"><span class="dot"></span>Speed limits</div>
          <div class="nav"><span class="dot"></span>Settings</div>
        </nav>
        <div class="main">
          <div class="capture" style="justify-content:space-between">
            <strong style="font:600 13px var(--ff-ui)">Route pool</strong>
            <div class="row"><button class="btn btn-sm" type="button">Test all</button><button class="btn btn-pri btn-sm" type="button">Add route</button></div>
          </div>
          <div style="padding:14px">
            <div class="tbl-wrap">
              <table class="tbl" style="min-width:600px">
                <thead><tr><th>Route</th><th>Type</th><th>Latency</th><th>Lanes now</th><th>Carried 24h</th><th>Last error</th><th></th></tr></thead>
                <tbody>
                  <tr><td>direct</td><td>—</td><td>11 ms</td><td style="color:#FFB22C">4</td><td>88.1 GB</td><td>—</td><td><span class="chip chip-ok">UP</span></td></tr>
                  <tr><td>us-e</td><td>HTTP</td><td>38 ms</td><td style="color:#FFB22C">6</td><td>52.4 GB</td><td>—</td><td><span class="chip chip-ok">UP</span></td></tr>
                  <tr><td>fra-1</td><td>SOCKS5</td><td>42 ms</td><td style="color:#FFB22C">8</td><td>61.7 GB</td><td>—</td><td><span class="chip chip-ok">UP</span></td></tr>
                  <tr><td>sgp-9</td><td>SOCKS5</td><td>186 ms</td><td style="color:#FFB22C">6</td><td>14.2 GB</td><td>timeout · 2h ago</td><td><span class="chip chip-ok">UP</span></td></tr>
                  <tr><td>sg-2</td><td>HTTP</td><td>204 ms</td><td style="color:#FF5F56">1</td><td>3.8 GB</td><td>403 · 40s ago</td><td><span class="chip chip-bad">DEGRADED</span></td></tr>
                  <tr style="opacity:.5"><td>lhr-4</td><td>HTTP</td><td>—</td><td>0</td><td>0 B</td><td>—</td><td><span class="chip chip-hold">OFF</span></td></tr>
                </tbody>
              </table>
            </div>
            <p class="eyebrow" style="margin:22px 0 9px">Lane spread · ubuntu-24.04.3-live-server-amd64.iso</p>
            <div class="lanes">
              <div class="lane"><span class="lane-id">c1</span><div class="lane-track"><i class="lane-fill" style="--w:97%"></i></div><span class="lane-rate">us-e</span></div>
              <div class="lane"><span class="lane-id">c2</span><div class="lane-track"><i class="lane-fill" style="--w:91%;--d:.04s"></i></div><span class="lane-rate">fra-1</span></div>
              <div class="lane"><span class="lane-id">c3</span><div class="lane-track"><i class="lane-fill" style="--w:94%;--d:.08s"></i></div><span class="lane-rate">direct</span></div>
              <div class="lane stall"><span class="lane-id">c6</span><div class="lane-track"><i class="lane-fill" style="--w:62%;--d:.12s"></i></div><span class="lane-rate">sg-2</span></div>
              <div class="lane"><span class="lane-id">c7</span><div class="lane-track"><i class="lane-fill" style="--w:93%;--d:.16s"></i></div><span class="lane-rate">sgp-9</span></div>
            </div>
            <p class="note">Swapping the right-hand column from rate to route turns the same strip into a proxy diagnostic: the short hatched lane names the route that is costing you the file.</p>
          </div>
          <div class="strip"><span><b>5 routes</b> up</span><span class="sep"></span><span>sg-2 degraded — 403 on range requests</span><span class="sep"></span><span>25 lanes assigned</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ COPY + FLOOR ============ -->
<section class="sec">
  <div class="sec-head"><span class="num">07</span><h2 class="d2" style="margin:0">Words, chrome, and the quality floor</h2></div>

  <p class="eyebrow" style="margin-bottom:12px">Copy</p>
  <div class="do-dont">
    <div class="dd y"><span class="tag">Write</span><p>"sg-2 rejected the range request (403). Retrying on fra-1 in 3s."</p><p class="why">Names what failed, where, and what the app is already doing about it.</p></div>
    <div class="dd n"><span class="tag">Not</span><p>"Oops! Something went wrong. Please try again."</p><p class="why">No apology, no vagueness. The app knows the status code — print it.</p></div>
    <div class="dd y"><span class="tag">Write</span><p>"Connections" · "Routes" · "Verify checksum"</p><p class="why">Named by what the person controls.</p></div>
    <div class="dd n"><span class="tag">Not</span><p>"Threads" · "Proxy config" · "Hash validation"</p><p class="why">Named by how it was built. A person manages routes, not proxy config.</p></div>
    <div class="dd y"><span class="tag">Write</span><p>Button "Start now" → row reads "Starting" → toast "Verified".</p><p class="why">One verb per action, carried through the whole flow.</p></div>
    <div class="dd n"><span class="tag">Not</span><p>Button "Submit" → toast "Operation successful".</p><p class="why">System voice. Says nothing about what exists now.</p></div>
  </div>

  <div class="cgrid" style="margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))">
    <div class="spec">
      <div class="spec-h"><h4>Window chrome</h4><span>Electron / Tauri</span></div>
      <p class="note" style="margin:0 0 12px">Frameless window, one custom 38px titlebar, drag region between the mark and the controls — identical layout on all three platforms, with only the control cluster swapped at build time.</p>
      <table class="tbl">
        <tbody>
          <tr><td>macOS</td><td>native traffic lights, inset 20/18</td></tr>
          <tr><td>Windows</td><td>— ▢ ✕ right, 30×24, close turns red</td></tr>
          <tr><td>Linux</td><td>same as Windows; respects CSD hint</td></tr>
        </tbody>
      </table>
      <p class="note">The mark and the route-health chip move to the right of the lights on macOS so nothing sits under them. Nothing else about the layout changes.</p>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>Quality floor</h4><span>non-negotiable</span></div>
      <ul class="ck">
        <li><b>Keyboard</b> — every row focusable; <span class="m">Space</span> pauses, <span class="m">⌫</span> removes, <span class="m">⌘⏎</span> opens the folder.</li>
        <li><b>Focus</b> — 2px lilac ring, 2px offset, visible on every control.</li>
        <li><b>Screen readers</b> — a lane strip is one element with a text summary ("16 connections, slowest c6 stalled 4 seconds, 91% complete"), not 16 unlabelled bars.</li>
        <li><b>Never colour alone</b> — stalled is hatch + red + a <span class="m">0.0</span> rate; degraded routes carry a word, not just a dot.</li>
        <li><b>Reduced motion</b> — lanes render at final width, verify pulse becomes static.</li>
        <li><b>Window down to 720×480</b> — inspector collapses to a drawer, rail to icons, lanes stay full width.</li>
      </ul>
    </div>
    <div class="spec">
      <div class="spec-h"><h4>Next pass</h4><span>not in v0.1</span></div>
      <ul class="ck">
        <li>Scheduler and bandwidth calendar</li>
        <li>Browser-extension capture handoff</li>
        <li>Per-site route rules and credential storage</li>
        <li>Torrent and metalink sources sharing the lane strip</li>
        <li>Resume integrity after an unclean quit</li>
      </ul>
      <p class="note">Foundations and core components only. Everything above reuses the lane strip rather than introducing a second progress language.</p>
    </div>
  </div>
</section>

<footer>
  <span class="mark" style="font-size:10px"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="#FFB22C"></path></svg>FLASH DOWNLOAD</span>
  <span class="tiny">Instrument panel · design direction v0.1 · foundations and core components</span>
  <span class="tiny m" style="margin-left:auto">Archivo Expanded · Archivo · IBM Plex Mono</span>
</footer>

</div>