:root{
  --ink:#181c2a; --paper:#f4f2ec; --card:#fffdf7;
  --yellow:#f5b301; --orange:#f0662d; --red:#e23a3a;
  --purple:#7b4fd8; --green:#2fa36b;
  --sh:5px 5px 0 var(--ink);
  --sh-lg:8px 8px 0 var(--ink);
  --rail-w:190px; --top-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
  color:var(--ink); background:var(--paper);
  background-image:radial-gradient(rgba(24,28,42,.16) 1.2px, transparent 1.2px);
  background-size:24px 24px; background-attachment:fixed;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.display{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;line-height:1.02}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- Diamonds ---------- */
.diamond,.kick-diamond{
  display:inline-block;width:12px;height:12px;background:var(--red);
  border:2px solid var(--ink);transform:rotate(45deg);
  animation:spinPulse 3.2s ease-in-out infinite;flex:none;
}
.kick-diamond.sm{width:9px;height:9px;margin-right:8px}
.kick-diamond.big{width:20px;height:20px;border-width:3px;margin-bottom:22px}
@keyframes spinPulse{
  0%,100%{transform:rotate(45deg) scale(1)}
  50%{transform:rotate(225deg) scale(1.25)}
}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--top-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;background:var(--card);border-bottom:3px solid var(--ink);
}
.logo{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px;display:flex;align-items:center;gap:10px}
.logo-slash{color:var(--orange);font-size:15px;font-weight:600}
.top-right{display:flex;align-items:center;gap:14px}
.top-prog{font-size:13px;font-weight:600;background:var(--ink);color:var(--paper);padding:4px 9px;border-radius:2px}
.progress-track{position:absolute;left:0;bottom:-3px;height:5px;width:100%}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--orange));width:0}
.enter-btn{
  font-family:'IBM Plex Mono';font-weight:600;font-size:13px;background:var(--yellow);
  border:2.5px solid var(--ink);padding:8px 15px;box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;color:var(--ink);transition:transform .1s,box-shadow .1s;
}
.enter-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.enter-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* ---------- Left rail ---------- */
.rail{
  position:fixed;left:0;top:var(--top-h);bottom:0;width:var(--rail-w);z-index:40;
  border-right:3px solid var(--ink);background:rgba(244,242,236,.9);
  backdrop-filter:blur(5px);padding:26px 16px;display:flex;flex-direction:column;gap:5px;
}
.rail-head{font-size:11px;letter-spacing:3px;color:var(--orange);font-weight:600;margin-bottom:10px}
.rail-link{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-family:'IBM Plex Mono';font-size:12.5px;font-weight:500;padding:9px 10px;
  border:2px solid transparent;transition:all .15s;cursor:pointer;
}
.rail-link .dot{width:10px;height:10px;border:2px solid var(--ink);background:var(--paper);flex:none;transition:background .15s}
.rail-link:hover{background:rgba(255,253,247,.7)}
.rail-link.active{border-color:var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--ink)}
.rail-link.active .dot{background:var(--red)}
.rail-foot{margin-top:auto;font-size:11px;color:var(--green);font-weight:600;border-top:2px dashed var(--ink);padding-top:14px}

/* ---------- Layout ---------- */
.content{margin-left:var(--rail-w);padding-top:var(--top-h);position:relative;overflow:hidden}
section{padding:88px 6vw;position:relative;z-index:2;border-bottom:3px solid var(--ink)}
.section-label{font-size:12px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;color:var(--purple);margin-bottom:16px}
.sec-title{font-size:clamp(28px,3.6vw,46px);font-weight:800;max-width:16ch;margin-bottom:44px}

/* ---------- Floating geo ---------- */
.floating-geo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.geo{position:absolute;opacity:.16;border:2.5px solid var(--ink)}
.geo-circle{border-radius:50%;animation:drift1 linear infinite}
.geo-square{animation:drift2 linear infinite}
.geo-tri{width:0!important;height:0!important;background:transparent!important;border-left:solid transparent;border-right:solid transparent;border-bottom:solid;border-top:0;animation:drift1 linear infinite}
@keyframes drift1{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-40px) rotate(180deg)}
  100%{transform:translateY(0) rotate(360deg)}
}
@keyframes drift2{
  0%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(30px,-30px) rotate(-90deg)}
  100%{transform:translate(0,0) rotate(0)}
}

/* ---------- HERO ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;padding-top:70px}
.kicker{font-size:13px;letter-spacing:1.5px;font-weight:600;display:flex;align-items:center;gap:11px;margin-bottom:22px;color:var(--ink)}
.headline{font-size:clamp(38px,5.4vw,74px);font-weight:800;margin-bottom:26px}
.hl{background:var(--yellow);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;box-shadow:2px 2px 0 var(--ink)}
.hl-o{background:var(--orange);color:var(--card)}
.hl-g{background:var(--green);color:var(--card)}
.subhead{font-size:19px;max-width:52ch;margin-bottom:28px;color:#2b2f42}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.chip{font-size:12.5px;font-weight:500;background:var(--card);border:2px solid var(--ink);padding:6px 12px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.chip:hover{transform:translate(-1px,-1px) rotate(-1.5deg)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{font-family:'IBM Plex Mono';font-weight:600;font-size:15px;background:var(--red);color:var(--card);border:3px solid var(--ink);padding:13px 24px;box-shadow:var(--sh);cursor:pointer;transition:transform .1s,box-shadow .1s}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-primary:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn-ghost{font-family:'IBM Plex Mono';font-weight:600;font-size:15px;background:transparent;color:var(--ink);border:3px solid var(--ink);padding:13px 24px;cursor:pointer;transition:background .12s}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- Terminal ---------- */
.hero-right{position:sticky;top:calc(var(--top-h) + 24px)}
.terminal{background:var(--ink);border:3px solid var(--ink);box-shadow:var(--sh-lg);overflow:hidden}
.term-bar{background:#252a3d;display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:2px solid #000}
.term-dots{display:flex;gap:7px}
.term-dots span{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.3)}
.term-title{color:#9aa2bd;font-size:12px}
.term-body{padding:20px 18px;font-size:13.5px;line-height:1.9;color:#e4e6f0;min-height:230px;overflow-x:auto}
.term-line{display:flex;gap:14px;white-space:pre}
.term-ln{color:#4a5170;user-select:none}
.term-cursor{display:inline-block;width:9px;height:16px;background:var(--green);vertical-align:middle}
.term-cursor.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tk-kw{color:#f0662d}.tk-fn{color:#f5b301}.tk-st{color:#2fa36b}
.tk-cm{color:#5c6482;font-style:italic}.tk-op{color:#c9cee0}.tk-pn{color:#9aa2bd}
.tk-nm{color:#7b4fd8}.tk-tx{color:#e4e6f0}

/* ---------- Features / Rules ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rule-card{background:var(--card);border:3px solid var(--ink);box-shadow:var(--sh);padding:30px 26px 26px;position:relative;transition:transform .15s,box-shadow .15s;opacity:0;animation:rise .6s ease forwards}
.rule-card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.card-title{font-size:26px;font-weight:800;margin:18px 0 10px}
.card-desc{font-size:15.5px;color:#2b2f42}
.card-arrow{font-size:13px;color:var(--orange);font-weight:600;margin-top:16px;display:inline-block}
.hex-wrap{width:56px;height:60px}
.hex{width:56px;height:60px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center;border:0}
.hex-n{font-size:19px;font-weight:600;color:var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Rhythm ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rhythm-tile{border:3px solid var(--ink);box-shadow:var(--sh);padding:26px 22px 30px;min-height:210px;display:flex;flex-direction:column;opacity:0;animation:rise .55s ease forwards;transition:transform .15s}
.rhythm-tile:hover{transform:translateY(-5px) rotate(-1deg)}
.rhythm-num{font-size:13px;font-weight:600;opacity:.75}
.rhythm-t{font-size:30px;font-weight:800;margin:auto 0 10px}
.rhythm-sub{font-size:14px;line-height:1.5}

/* ---------- Trail ---------- */
.trail-hint{font-size:12px;color:var(--purple);margin:-30px 0 34px;letter-spacing:1px}
.trail-wrap{display:flex;flex-direction:column;gap:0}
.segment{position:relative;display:flex;align-items:flex-start;gap:22px;padding:18px 22px 18px 18px;background:var(--card);border:3px solid var(--ink);box-shadow:var(--sh);cursor:pointer;margin-bottom:20px;transition:transform .12s,box-shadow .12s;border-left:9px solid var(--seg-color)}
.segment:hover{transform:translateX(6px);box-shadow:var(--sh-lg)}
.seg-done{background:#eef7f0}
.seg-node{width:40px;height:40px;border:3px solid var(--ink);background:var(--seg-color);display:flex;align-items:center;justify-content:center;flex:none;transition:all .15s}
.seg-done .seg-node{background:var(--green)}
.seg-idx{font-size:16px;font-weight:600;color:var(--ink)}
.seg-done .seg-idx{color:var(--card)}
.seg-title{font-size:21px;font-weight:800}
.seg-desc{font-size:14.5px;color:#2b2f42;margin-top:3px}
.seg-done .seg-title{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.seg-connector{position:absolute;left:35px;bottom:-20px;width:3px;height:20px;background:var(--ink);z-index:0}

/* ---------- CTA ---------- */
.cta{padding:100px 6vw;display:flex;justify-content:center}
.cta-panel{background:var(--ink);color:var(--paper);border:3px solid var(--ink);box-shadow:var(--sh-lg);padding:56px 48px;max-width:760px;width:100%;text-align:center;position:relative}
.cta-title{font-size:clamp(28px,3.8vw,44px);font-weight:800;margin-bottom:30px;max-width:20ch;margin-inline:auto}
.cta-panel .hl{color:var(--ink)}
.cta-progress{margin-bottom:32px}
.cta-bar{height:16px;background:#2a2f45;border:2px solid var(--paper);overflow:hidden;margin-bottom:12px}
.cta-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--yellow));transition:width .4s ease}
.cta-count{font-size:13px;color:var(--yellow)}
.btn-huge{font-family:'IBM Plex Mono';font-weight:600;font-size:18px;background:var(--yellow);color:var(--ink);border:3px solid var(--paper);padding:16px 34px;box-shadow:6px 6px 0 var(--paper);cursor:pointer;transition:transform .1s,box-shadow .1s}
.btn-huge:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--paper)}
.btn-huge:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--paper)}
.cta-fine{font-size:12px;color:#8188a6;margin-top:18px}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:40px 6vw 30px;border-bottom:0}
.foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.foot-brand{font-size:22px;font-weight:800}
.foot-tag{font-size:14px;color:#9aa2bd}
.foot-link{font-size:13px;color:var(--yellow);text-decoration:none;border:2px solid var(--yellow);padding:7px 14px;transition:all .12s}
.foot-link:hover{background:var(--yellow);color:var(--ink)}
.foot-copy{font-size:11px;color:#5c6482;margin-top:22px;text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .rail{display:none}
  .content{margin-left:0}
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-right{position:static}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  section{padding:56px 5vw}
  .grid-4{grid-template-columns:1fr}
  .top-prog{display:none}
  .enter-btn{padding:7px 11px;font-size:12px}
  .logo{font-size:17px}
  .foot-inner{flex-direction:column;align-items:flex-start}
  .cta-panel{padding:40px 24px}
  .segment{border-left-width:7px}
}