:root{
    --ink:#e8edf5; --dim:#93a0b4; --faint:#5a6478;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:auto}
  body{
    background:#070b12; color:#e8edf5;
    font-family:"Archivo",system-ui,sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:rgba(255,180,84,.35)}

  canvas#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}

  /* ---------- fixed UI chrome ---------- */
  #chrome{position:fixed;inset:0;z-index:3;pointer-events:none}
  .wordmark{
    position:absolute;top:22px;left:26px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
    color:#93a0b4;text-transform:uppercase;
  }
  .wordmark b{color:#ffb454;font-weight:500}
  .gauge{
    position:absolute;top:22px;right:26px;text-align:right;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
    color:#93a0b4;text-transform:uppercase;
  }
  .gauge .depth{display:block;font-size:20px;letter-spacing:.06em;color:#e8edf5;margin-top:3px;font-variant-numeric:tabular-nums}
  .gauge .layer{color:var(--acc,#ffb454)}

  /* left rail nav */
  .rail{
    position:absolute;left:26px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:13px;pointer-events:auto;
  }
  .rail a{
    display:flex;align-items:center;gap:9px;text-decoration:none;
    font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;
    color:#5a6478;text-transform:uppercase;transition:color .3s;
  }
  .rail a .dot{width:5px;height:5px;border-radius:50%;background:#39435a;transition:all .3s;flex:none}
  .rail a.on{color:#e8edf5}
  .rail a.on .dot{background:var(--acc,#ffb454);box-shadow:0 0 10px var(--acc,#ffb454)}
  .rail a span.lbl{opacity:0;transform:translateX(-4px);transition:all .3s}
  .rail:hover a span.lbl,.rail a.on span.lbl{opacity:1;transform:none}

  .hint{
    position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.3em;
    color:#93a0b4;text-transform:uppercase;animation:hintPulse 2.4s ease-in-out infinite;
  }
  @keyframes hintPulse{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,6px)}}

  /* aura tint + vignette + scanlines */
  #aura{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;
    background:radial-gradient(ellipse 70% 55% at var(--auraX,50%) 55%, var(--auraC,rgba(255,180,84,.10)), transparent 70%);
    transition:none;}
  #alarm{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:
      radial-gradient(ellipse at center, rgba(255,50,44,0) 38%, rgba(255,42,36,.42) 100%),
      linear-gradient(rgba(255,40,34,.07), rgba(255,40,34,.07));
    will-change:opacity;}
  #veil{position:fixed;inset:0;z-index:2;pointer-events:none;
    background:
      radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);}

  /* ---------- scroll content ---------- */
  #spacer{position:relative;z-index:-1}

  #stage{position:fixed;inset:0;z-index:4;pointer-events:none}
  #atoms{position:fixed;inset:0;z-index:5;pointer-events:none;width:100vw;height:100vh}

  /* hero */
  #hero{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:0 6vw;
    will-change:opacity,transform,filter;
  }
  #hero .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.42em;
    color:#ffb454;text-transform:uppercase;margin-bottom:26px;
  }
  #hero h1{
    font-family:"Unbounded",sans-serif;font-weight:900;
    font-size:clamp(44px,9.2vw,128px);line-height:.98;letter-spacing:-.01em;
    text-wrap:balance;
    text-shadow:0 0 60px rgba(255,180,84,.25), 0 0 140px rgba(255,180,84,.18);
  }
  #hero h1 .thin{display:block;font-weight:300;font-size:.42em;letter-spacing:.34em;color:#93a0b4;margin-top:18px;text-transform:uppercase}
  #hero h1 .ln{display:inline-block;will-change:transform,opacity;backface-visibility:hidden}
  #hero .thesis{
    margin-top:34px;max-width:560px;font-size:16.5px;line-height:1.65;color:#93a0b4;
  }
  #hero .thesis em{color:#e8edf5;font-style:normal;border-bottom:1px solid rgba(255,180,84,.6)}
  #hero .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:34px}

  .chip{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
    padding:7px 13px;border:1px solid rgba(147,160,180,.28);border-radius:999px;
    color:#c6cfdc;background:rgba(10,14,22,.4);backdrop-filter:blur(6px);
    font-variant-numeric:tabular-nums;
  }
  .chip b{color:var(--cacc,#ffb454);font-weight:500}

  /* chapter cards */
  .card{
    position:absolute;top:50%;
    width:min(520px,46vw);
    transform:translateY(-50%);
    padding:34px 36px 30px;
    background:rgba(8,12,20,.58);
    border:1px solid color-mix(in srgb,var(--cacc) 26%, transparent);
    border-left:2px solid var(--cacc);
    border-radius:20px;
    backdrop-filter:blur(14px);
    box-shadow:0 0 90px color-mix(in srgb,var(--cacc) 14%, transparent), 0 30px 60px rgba(0,0,0,.45);
    will-change:opacity,transform,filter;
    pointer-events:none;
  }
  .card.right{right:7vw}
  .card.left{left:calc(7vw + 60px)}
  .card .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.3em;
    color:var(--cacc);text-transform:uppercase;margin-bottom:16px;
  }
  .card h2{
    font-family:"Unbounded",sans-serif;font-weight:700;
    font-size:clamp(22px,2.4vw,31px);line-height:1.16;letter-spacing:-.01em;
    text-wrap:balance;margin-bottom:16px;
    text-shadow:0 0 40px color-mix(in srgb,var(--cacc) 35%, transparent);
  }
  .card p{font-size:14.5px;line-height:1.7;color:#aeb9c9}
  .card p b{color:#e8edf5;font-weight:600}
  .card .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
  .card ul{list-style:none;margin-top:4px}
  .card li{
    font-size:14px;line-height:1.55;color:#aeb9c9;padding:9px 0;
    border-bottom:1px dashed rgba(147,160,180,.18);
  }
  .card li:last-child{border-bottom:none}
  .card li b{color:#e8edf5;font-weight:600;font-family:"IBM Plex Mono",monospace;font-size:13px}
  .card li .arrow{color:var(--cacc);margin:0 6px}
  .card .quote{
    margin-top:20px;font-size:16px;line-height:1.6;color:#e8edf5;
    border-left:2px solid var(--cacc);padding-left:16px;font-style:italic;
  }
  .card a{color:var(--cacc);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--cacc) 40%, transparent)}
  .card a:hover{border-bottom-color:var(--cacc)}
  .contactrows{margin-top:18px;display:flex;flex-direction:column;gap:10px}
  .contactrows a{
    font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.03em;
    color:#e8edf5;border:none;display:flex;gap:10px;align-items:baseline;
  }
  .contactrows a .k{color:var(--cacc);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;width:74px;flex:none}


  .card.banner{
    top:6.5%;left:50%;right:auto;width:auto;max-width:880px;
    background:none;border:none;box-shadow:none;backdrop-filter:none;
    text-align:center;padding:0;
  }
  .card.banner h2{font-size:clamp(24px,3vw,40px);margin-bottom:0}
  .card.banner .eyebrow{margin-bottom:12px}
  .card.banner .sub{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;color:#8a97ab;margin-top:12px;text-transform:uppercase}

  /* ---------- tool detail holo panel ---------- */
  #tooldetail{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;perspective:1300px}
  #tooldetail[hidden]{display:none}
  #tooldetail .td-back{position:absolute;inset:0;background:rgba(3,5,9,.72);backdrop-filter:blur(5px) saturate(.8)}
  .td-panel{
    position:relative;width:min(700px,92vw);max-height:86vh;overflow:auto;
    background:linear-gradient(180deg, rgba(21,16,7,.97), rgba(10,9,6,.98));
    border:1px solid rgba(255,194,77,.4);border-radius:18px;
    padding:34px 38px 30px;
    box-shadow:0 0 120px rgba(255,194,77,.18), 0 40px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(255,194,77,.05);
    transform:rotateX(16deg) rotateY(-8deg) scale(.55) translateY(90px);opacity:0;
    transition:transform .55s cubic-bezier(.16,1.2,.3,1), opacity .35s ease;
    will-change:transform,opacity;
  }
  #tooldetail.open .td-panel{transform:rotateX(0) rotateY(0) scale(1) translateY(0);opacity:1}
  .td-panel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px)}
  .td-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.3em;color:#ffc24d;text-transform:uppercase;margin-bottom:14px}
  .td-panel h3{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.15;margin-bottom:8px;
    color:#f2f5fa;text-shadow:0 0 40px rgba(255,194,77,.4)}
  .td-tag{font-size:12.5px;color:#93a0b4;margin-bottom:6px;font-family:"IBM Plex Mono",monospace;line-height:1.6}
  .td-panel p{font-size:14.5px;line-height:1.7;color:#c9d2e0;margin-bottom:12px}
  .td-panel p b{color:#fff}
  .td-sec{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.26em;color:#8a97ab;text-transform:uppercase;margin:20px 0 10px}
  .td-panel figure{margin:0;background:rgba(8,10,16,.6);border:1px solid rgba(255,194,77,.16);border-radius:12px;padding:14px;overflow-x:auto}
  .td-panel svg{display:block;max-width:100%;height:auto}
  .td-panel .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
  .td-gh{display:inline-flex;gap:8px;align-items:center;margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:13px;
    color:#ffc24d;text-decoration:none;border:1px solid rgba(255,194,77,.35);padding:9px 15px;border-radius:10px}
  .td-gh:hover{background:rgba(255,194,77,.1)}
  .td-close{position:absolute;top:14px;right:16px;background:none;border:none;color:#8a97ab;font-size:19px;cursor:pointer;font-family:"IBM Plex Mono",monospace;z-index:2}
  .td-close:hover{color:#fff}
  .td-note{font-size:12px;color:#7b8698;font-family:"IBM Plex Mono",monospace;margin-top:16px}

  /* job (timeline) variant of the holo panel */
  #tooldetail.job .td-panel{border-color:rgba(57,230,201,.4);
    box-shadow:0 0 120px rgba(57,230,201,.16), 0 40px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(57,230,201,.05)}
  #tooldetail.job .td-eyebrow{color:#39e6c9}
  #tooldetail.job .td-panel h3{text-shadow:0 0 40px rgba(57,230,201,.35)}
  .td-panel ul{list-style:none;margin:0}
  .td-panel li{font-size:14px;line-height:1.65;color:#c9d2e0;padding:8px 0 8px 18px;position:relative;
    border-bottom:1px dashed rgba(147,160,180,.15)}
  .td-panel li:last-child{border-bottom:none}
  .td-panel li::before{content:"▸";position:absolute;left:0;color:#ffc24d}
  #tooldetail.job .td-panel li::before{color:#39e6c9}

  /* lab (personal project) variant of the holo panel */
  #tooldetail.lab .td-panel{border-color:rgba(198,245,66,.4);
    box-shadow:0 0 120px rgba(198,245,66,.14), 0 40px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(198,245,66,.05)}
  #tooldetail.lab .td-eyebrow{color:#c6f542}
  #tooldetail.lab .td-panel h3{text-shadow:0 0 40px rgba(198,245,66,.3)}
  #tooldetail.lab .td-gh{color:#c6f542;border-color:rgba(198,245,66,.35)}
  #tooldetail.lab .td-gh:hover{background:rgba(198,245,66,.1)}

  /* boot overlay */
  #boot{
    position:fixed;inset:0;z-index:50;background:#04060b;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .7s ease;font-family:"IBM Plex Mono",monospace;
  }
  #boot.gone{opacity:0;pointer-events:none}
  #boot pre{font-size:12.5px;line-height:2;color:#93a0b4}
  #boot pre .ok{color:#3dff9d}
  #boot pre .amber{color:#ffb454}

  @media (max-width:820px){
    .card.right,.card.left{left:6vw;right:6vw;width:auto}
    .rail{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .hint{animation:none}
  }