:root{
    --bg: #1b1e22;
    --panel: #21252a;
    --panel-line: #33393f;
    --line: #7fa3b0;
    --line-dim: #4c6068;
    --accent: #c1652f;
    --ink: #e9e6dd;
    --ink-dim: #9aa3a8;
    --grid: rgba(127,163,176,0.06);
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Mono', monospace;
  }

  body{
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  a{ color:inherit; }

  .wrap{
    max-width: 980px;
    margin: 0 auto;
    padding: 56px 24px 100px;
  }

  /* ---------- Header ---------- */

  header{
    margin-bottom: 48px;
  }

  .eyebrow{
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--accent);
    text-transform: uppercase;
    margin: 0 0 14px;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .eyebrow::before{
    content:"";
    width: 22px;
    height: 1px;
    background: var(--accent);
    display:inline-block;
  }

  h1{
    font-family:'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(34px, 6vw, 56px);
    line-height: 1.02;
    margin: 0 0 16px;
  }

  .lede{
    max-width: 560px;
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }

  /* ---------- Diagram ---------- */

  .diagram-panel{
    border: 1px solid var(--panel-line);
    background: var(--panel);
    border-radius: 2px;
    padding: 28px clamp(10px, 4vw, 40px) 8px;
    margin: 40px 0 56px;
    position: relative;
    overflow: hidden;
  }

  .diagram-panel::before{
    content:"FIG. 1 — DROP-POINT PROFILE";
    position:absolute;
    top: 14px;
    left: 20px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
  }

  .diagram-panel::after{
    content:"NOT TO SCALE";
    position:absolute;
    top: 14px;
    right: 20px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--line-dim);
  }

  svg.knife{
    width: 100%;
    height: auto;
    display:block;
    margin-top: 20px;
  }

  .knife-fill{ fill: #3a4148; stroke: var(--line); stroke-width: 1.4; }
  .knife-groove{ fill:none; stroke: var(--line-dim); stroke-width: 1; stroke-dasharray: 3 3; }
  .knife-edgeline{ stroke: var(--accent); stroke-width: 1.6; fill:none; }
  .leader{ stroke: var(--line-dim); stroke-width: 1; fill:none; }
  .leader-dot{ fill: var(--line); }
  .label-text{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11px;
    fill: var(--ink-dim);
    letter-spacing: 0.04em;
  }
  .label-text tspan.hi{ fill: var(--ink); }

  .diagram-hint{
    font-size: 11px;
    color: var(--line-dim);
    text-align: center;
    padding: 10px 0 4px;
    letter-spacing: 0.05em;
  }

  /* ---------- Section headers ---------- */

  .section{
    margin-bottom: 46px;
  }

  .section-head{
    display:flex;
    align-items:baseline;
    gap: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--panel-line);
    padding-bottom: 12px;
  }

  .section-index{
    font-family:'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--accent);
    white-space: nowrap;
  }

  .section-title{
    font-family:'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 15px;
    color: var(--ink);
    margin: 0;
  }

  .section-note{
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-dim);
    white-space: nowrap;
  }

  /* ---------- Terms grid ---------- */

  .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--panel-line);
    border: 1px solid var(--panel-line);
  }

  @media (max-width: 640px){
    .grid{ grid-template-columns: 1fr; }
  }

  .term{
    background: var(--panel);
    padding: 20px 22px 22px;
    scroll-margin-top: 20px;
    transition: background 0.2s ease;
  }

  .term:target, .term.is-active{
    background: #262b31;
  }

  .term-name{
    font-family:'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--ink);
    display:flex;
    align-items:center;
    gap: 8px;
  }

  .term-name::before{
    content:"";
    width: 6px;
    height: 6px;
    background: var(--accent);
    display:inline-block;
    flex-shrink:0;
  }

  .term-def{
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-dim);
    margin: 0;
  }

  /* ---------- Footer ---------- */

  footer{
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--panel-line);
    font-size: 11px;
    color: var(--line-dim);
    letter-spacing: 0.05em;
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }