:root{
  --ink:#07080c;
  --ink2:#0c0e15;
  --ink3:#12141d;
  --ice:#eff3f6;
  --volt:#e9ff1e;
  --flare:#8a3fff;
  --hair:rgba(239,243,246,.13);
  --dim:rgba(239,243,246,.55);
  --dim2:rgba(239,243,246,.32);
  --mono:'Space Mono',monospace;
  --serif:'Instrument Serif',serif;
  --disp:'Archivo',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--ice);font-family:var(--disp);font-weight:450}
body{min-height:100vh}
nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;background:rgba(7,8,12,.94);border-bottom:1px solid var(--hair)
}
.brand{
  display:inline-flex;align-items:center;gap:.32em;
  color:var(--ice);text-decoration:none;font-weight:800;
  font-variation-settings:'wdth' 116;letter-spacing:-.01em;
  text-transform:uppercase;font-size:15px
}
.xmark{width:1em;height:1em;display:block}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--volt)}
main{width:min(920px, calc(100% - 32px));margin:0 auto;padding:36px 0 80px}
.loading,.error{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:20px}
.error{color:#ff8a8a}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--volt);margin:0 0 10px}
h1{margin:0 0 12px;font-size:clamp(32px,6vw,54px);font-weight:800;font-variation-settings:'wdth' 116;letter-spacing:-.03em}
.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;color:var(--dim);margin:0 0 22px}
.meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 36px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.toc{display:grid;gap:8px;margin:0 0 42px}
.toc a{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  text-decoration:none;color:var(--ice);border:1px solid var(--hair);
  background:var(--ink2);padding:12px 14px
}
.toc a:hover{border-color:var(--volt)}
.toc .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--volt)}
.toc .t{font-weight:700}
.toc .m{font-family:var(--mono);font-size:11px;color:var(--dim)}
section.block{margin:0 0 54px;padding-top:8px;border-top:1px solid var(--hair)}
.kind{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--flare);margin:18px 0 8px}
h2{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.mins{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin:0 0 14px}
.notes,.desc,.cues{font-size:16px;line-height:1.55;color:rgba(239,243,246,.82);margin:0 0 14px}
.notes{font-family:var(--serif);font-style:italic}
.cover,.steps img{width:100%;height:auto;display:block;background:#07080c;border:1px solid var(--hair)}
video{width:100%;max-height:70vh;background:#000;border:1px solid var(--hair);margin:0 0 16px}
.equip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.points{margin:0 0 18px;padding:0 0 0 18px}
.points li{margin:0 0 8px;line-height:1.45}
.steps{display:grid;gap:18px;margin-top:18px}
.step h3{margin:0 0 8px;font-size:16px}
.step p{margin:8px 0 0;color:var(--dim);font-size:15px;line-height:1.45}
footer{border-top:1px solid var(--hair);padding:28px 22px 40px;color:var(--dim);font-size:13px}
footer p,footer address{margin:0 0 8px;font-style:normal}
.fine{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}