/* ====== CSS VARIABLES ====== */
:root{
  --bg:#06060e;--panel:rgba(8,8,20,0.92);
  --cyan:#00ffcc;--magenta:#ff00aa;--green:#00ff41;--tron:#18dcff;
  --amber:#ffaa00;--orange:#ff6b1a;--violet:#8b5cf6;--red:#ff3e3e;
  --text:#b8c0d0;--muted:#6272a4;--dim:#2a2d3a;
  --border:rgba(0,255,204,0.12);
  --neon-cyan:rgba(0,255,204,0.45);--neon-magenta:rgba(255,0,170,0.45);
  --glow-cyan:0 0 20px rgba(0,255,204,0.35),0 0 40px rgba(0,255,204,0.15);
  --glow-magenta:0 0 20px rgba(255,0,170,0.35),0 0 40px rgba(255,0,170,0.15);
  --mono:'JetBrains Mono','Fira Code','Courier New',monospace;
  --sans:Inter,system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;line-height:1.6}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 100% 100% at 50% 0%,transparent 0%,rgba(0,0,0,0.03) 100%);opacity:0.8}

/* ====== BACKGROUND LAYERS ====== */
#particleCanvas,#rainCanvas,#tronGridCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
#rainCanvas{z-index:1;opacity:0.035}
.crt{position:fixed;inset:0;pointer-events:none;z-index:998;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
  box-shadow:inset 0 0 80px rgba(0,0,0,0.15)}
.scanline-overlay{position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px);
  opacity:0.4;mix-blend-mode:multiply}
.sweep{position:fixed;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(24,220,255,0.2) 15%,var(--cyan) 50%,rgba(255,0,170,0.3) 85%,transparent 100%);
  z-index:997;pointer-events:none;opacity:0.35;animation:sweepDown 8s linear infinite;
  box-shadow:0 0 12px var(--cyan),0 0 24px rgba(24,220,255,0.4)}
@keyframes sweepDown{from{top:-2px}to{top:100vh}}
@keyframes neonPulse{0%,100%{opacity:0.6;filter:brightness(1)}50%{opacity:1;filter:brightness(1.15)}}
@keyframes neonGlow{0%,100%{box-shadow:0 0 12px rgba(24,220,255,0.2),0 0 24px rgba(24,220,255,0.08)}50%{box-shadow:0 0 20px rgba(24,220,255,0.35),0 0 40px rgba(24,220,255,0.15)}}
@keyframes borderPulse{0%,100%{border-color:rgba(24,220,255,0.35);box-shadow:0 0 15px rgba(24,220,255,0.1)}50%{border-color:rgba(24,220,255,0.55);box-shadow:0 0 25px rgba(24,220,255,0.2),inset 0 0 20px rgba(24,220,255,0.03)}}
@keyframes dataStream{0%{background-position:0 0}100%{background-position:0 24px}}
@keyframes gridPulse{0%,100%{opacity:0.4}50%{opacity:0.8}}
@keyframes sectionEdgeGlow{0%,100%{opacity:0.5}50%{opacity:1}}
@keyframes cornerBracketPulse{0%,100%{opacity:0.5}50%{opacity:0.9}}
@property --tron-glow-phase{syntax:'<number>';initial-value:0;inherits:false}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 600px 400px at 10% 15%,rgba(0,255,204,0.05),transparent),
  radial-gradient(ellipse 500px 500px at 85% 10%,rgba(255,0,170,0.04),transparent),
  radial-gradient(ellipse 700px 400px at 50% 95%,rgba(139,92,246,0.05),transparent)}
.tron-grid{position:fixed;bottom:0;left:0;width:100%;height:45vh;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent 0%,rgba(24,220,255,0.02) 20%,rgba(24,220,255,0.05) 50%,rgba(24,220,255,0.08) 100%),
  linear-gradient(0deg,rgba(24,220,255,0.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(24,220,255,0.04) 1px,transparent 1px);
  background-size:100% 100%,50px 50px,50px 50px;
  background-position:0 0,0 calc(var(--tron-scroll-progress,0)*-42px),calc(var(--tron-scroll-progress,0)*24px) 0;
  transition:background-position .18s linear;
  mask-image:linear-gradient(to top,rgba(0,0,0,0.5),transparent);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0.5),transparent);
  transform:perspective(1200px) rotateX(72deg);transform-origin:center bottom}
.circuit-pattern{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40M0 0l40 40M40 0L0 40' stroke='rgba(24,220,255,0.035)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  opacity:0.7;will-change:auto}

/* ====== TRON SVG BACKGROUND ====== */
.tron-svg-bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.6}
.tron-svg-bg .circuit-lines path{animation:circuitPulse 4s ease-in-out infinite}
.tron-svg-bg .data-nodes circle{animation:nodeGlow 2.5s ease-in-out infinite}
.tron-svg-bg .hexagons polygon{animation:hexPulse 5s ease-in-out infinite}
.tron-svg-bg .light-cycle-lanes path{animation:legacyLaneDrift 10s linear infinite}
.tron-svg-bg .legacy-ships polygon,.tron-svg-bg .legacy-ships path{transform-box:fill-box;transform-origin:center;animation:legacyShipFloat 11s ease-in-out infinite}
.tron-svg-bg .legacy-ships polygon:nth-child(2),.tron-svg-bg .legacy-ships path:nth-child(4){animation-delay:-3.2s}
@keyframes circuitPulse{0%,100%{opacity:0.5}50%{opacity:0.95}}
@keyframes nodeGlow{0%,100%{opacity:0.25}50%{opacity:0.65}}
@keyframes hexPulse{0%,100%{opacity:0.15}50%{opacity:0.3}}
@keyframes legacyLaneDrift{0%{stroke-dashoffset:0;opacity:0.12}50%{opacity:0.32}100%{stroke-dashoffset:-120;opacity:0.12}}
@keyframes legacyShipFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8px,-10px,0)}}

/* ====== CIRCUIT DIVIDER ====== */
.circuit-divider{position:relative;width:100%;max-width:800px;margin:0 auto;height:40px;pointer-events:none;z-index:1}
.circuit-divider svg{width:100%;height:100%;opacity:0.7}

/* ====== DOTTED SECTION DIVIDER ====== */
.dotted-divider{width:100%;max-width:720px;margin:1.5rem auto;height:1px;border:none;border-top:1px dotted rgba(24,220,255,0.25);opacity:0.8;pointer-events:none}

/* ====== FLOATING DATA ORBS (3D Tron-style) ====== */
.data-orbs{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;perspective:1200px}
.orb{position:absolute;border-radius:50%;transform-style:preserve-3d;opacity:0.22;
  box-shadow:0 0 25px currentColor,0 0 50px currentColor,0 0 80px currentColor,inset 0 0 30px rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);animation-timing-function:ease-in-out}
.orb::before{content:'';position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);opacity:0.6;animation:orbRingPulse 3s ease-in-out infinite}
.orb-1{width:90px;height:90px;top:15%;left:8%;background:radial-gradient(circle at 30% 30%,var(--tron),rgba(24,220,255,0.3),transparent);color:rgba(24,220,255,0.5);animation:orbFloat1 12s ease-in-out infinite}
.orb-2{width:55px;height:55px;top:25%;right:12%;background:radial-gradient(circle at 30% 30%,var(--magenta),rgba(255,0,170,0.25),transparent);color:rgba(255,0,170,0.5);animation:orbFloat2 14s ease-in-out infinite}
.orb-3{width:70px;height:70px;bottom:30%;left:15%;background:radial-gradient(circle at 30% 30%,var(--cyan),rgba(0,255,204,0.3),transparent);color:rgba(0,255,204,0.5);animation:orbFloat3 10s ease-in-out infinite}
.orb-4{width:45px;height:45px;bottom:20%;right:20%;background:radial-gradient(circle at 30% 30%,var(--green),rgba(0,255,65,0.3),transparent);color:rgba(0,255,65,0.5);animation:orbFloat1 11s ease-in-out infinite 1s}
.orb-5{width:80px;height:80px;top:60%;left:50%;background:radial-gradient(circle at 30% 30%,var(--tron),rgba(24,220,255,0.25),transparent);color:rgba(24,220,255,0.45);animation:orbFloat2 13s ease-in-out infinite 2s}
.orb-6{width:50px;height:50px;top:40%;right:30%;background:radial-gradient(circle at 30% 30%,var(--violet),rgba(139,92,246,0.25),transparent);color:rgba(139,92,246,0.5);animation:orbFloat3 9s ease-in-out infinite 0.5s}
@keyframes orbFloat1{0%,100%{transform:translate3d(0,0,0) translateZ(20px) scale(1)}25%{transform:translate3d(20px,-15px,15px) translateZ(30px) scale(1.08)}50%{transform:translate3d(-10px,20px,-10px) translateZ(10px) scale(0.95)}75%{transform:translate3d(15px,10px,25px) translateZ(25px) scale(1.03)}}
@keyframes orbFloat2{0%,100%{transform:translate3d(0,0,0) translateZ(15px)}33%{transform:translate3d(-25px,15px,20px) translateZ(25px)}66%{transform:translate3d(15px,-20px,-5px) translateZ(10px)}}
@keyframes orbFloat3{0%,100%{transform:translate3d(0,0,0) translateZ(10px) rotate(0deg)}50%{transform:translate3d(10px,-25px,20px) translateZ(25px) rotate(8deg)}}
@keyframes orbRingPulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.8;transform:scale(1.05)}}

/* ====== HOLOGRAPHIC VIGNETTE ====== */
.holographic-vignette{position:fixed;inset:0;pointer-events:none;z-index:996;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 40%,rgba(24,220,255,0.03) 70%,rgba(255,0,170,0.02) 100%);
  animation:holographicShift 8s ease-in-out infinite}
@keyframes holographicShift{0%,100%{opacity:0.6}50%{opacity:1}}

/* ====== REQUEST ACCESS (Hollywood intro) ====== */
.request-access-screen{position:fixed;inset:0;z-index:10001;background:#000;display:flex;align-items:center;justify-content:center;
  transition:opacity 0.6s ease}
.request-access-screen.done{opacity:0;pointer-events:none}
.ra-content{position:relative;text-align:center;padding:2rem;max-width:min(720px,calc(100vw - 2rem))}
.ra-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);pointer-events:none;opacity:0.5}
.ra-glow-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.2;animation:raOrbPulse 3s ease-in-out infinite;pointer-events:none}
.ra-glow-1{width:300px;height:300px;background:var(--tron);top:10%;left:20%}
.ra-glow-2{width:200px;height:200px;background:var(--magenta);bottom:20%;right:15%;animation-delay:1s}
@keyframes raOrbPulse{0%,100%{opacity:0.15;transform:scale(1)}50%{opacity:0.3;transform:scale(1.1)}}
.ra-message{position:relative;z-index:1}
.ra-label{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.4em;color:var(--muted);display:block;margin-bottom:0.5rem}
.ra-title{font-family:var(--mono);font-size:clamp(1.2rem,4vw,2rem);font-weight:700;color:var(--cyan);letter-spacing:0.15em;
  text-shadow:0 0 20px var(--cyan),0 0 40px rgba(24,220,255,0.5);margin-bottom:0.8rem}
.ra-sub{font-family:var(--mono);font-size:0.75rem;color:var(--muted);letter-spacing:0.16em;margin-bottom:1.5rem;line-height:1.7}
.ra-btn{font-family:var(--mono);font-size:0.9rem;font-weight:700;letter-spacing:0.2em;padding:1rem 2.5rem;
  background:linear-gradient(135deg,var(--tron),var(--cyan));color:#000;border:none;border-radius:4px;
  cursor:pointer;transition:all 0.3s;box-shadow:0 0 30px rgba(24,220,255,0.5),0 0 60px rgba(24,220,255,0.2)}
.ra-btn:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(24,220,255,0.7),0 0 80px rgba(24,220,255,0.3)}
.ra-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.ra-btn.hidden{opacity:0;pointer-events:none;transform:scale(0.8);transition:opacity 0.4s,transform 0.4s}
.ra-analyze{display:none;position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%);width:min(430px,90vw);z-index:1}
.ra-analyze.show{display:block;animation:raAnalyzeIn 0.5s ease}
.ra-analyze-bar{height:2px;background:linear-gradient(90deg,transparent,var(--tron),var(--cyan),transparent);
  animation:raAnalyzeBar 2s ease-in-out}
@keyframes raAnalyzeBar{0%{width:0;opacity:0}20%{opacity:1}80%{width:100%;opacity:1}100%{width:100%;opacity:0}}
.ra-analyze-text{display:block;font-family:var(--mono);font-size:0.55rem;letter-spacing:0.5em;color:var(--tron);margin-top:0.5rem;animation:raAnalyzeBlink 0.8s ease-in-out infinite}
.ra-analyze-lines{margin-top:0.7rem;display:grid;gap:0.45rem}
.ra-analyze-lines span{opacity:0;transform:translateY(6px);padding:0.45rem 0.7rem;border:1px solid rgba(24,220,255,0.18);border-radius:999px;background:rgba(2,10,18,0.82);font-family:var(--mono);font-size:0.58rem;letter-spacing:0.08em;color:var(--text);transition:opacity .25s ease,transform .25s ease}
.ra-analyze-lines span.show{opacity:1;transform:translateY(0)}
@keyframes raAnalyzeBlink{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes raAnalyzeIn{from{opacity:0}to{opacity:1}}

/* ====== BOOT SCREEN ====== */
.boot{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.86);padding:clamp(1rem,4vw,2.5rem);
  font-family:var(--mono);font-size:clamp(0.65rem,1.1vw,0.82rem);color:var(--green);overflow:auto;
  transition:opacity 0.5s ease}
.boot-shell{max-width:1280px;margin:0 auto;padding:1.2rem;overflow:hidden}
.boot-grid{display:grid;grid-template-columns:minmax(300px,0.82fr) minmax(360px,1.18fr);gap:1rem}
.boot-pane-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:0.8rem;margin-bottom:0.8rem;padding-bottom:0.65rem;border-bottom:1px solid rgba(24,220,255,0.15)}
.boot-pane-kicker{font-size:0.64rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--magenta)}
.boot-pane-meta{font-size:0.58rem;letter-spacing:0.1em;color:var(--muted)}
.boot-terminal-pane,.boot-dossier-pane{position:relative;z-index:1;border:1px solid rgba(24,220,255,0.18);border-radius:18px;background:linear-gradient(160deg,rgba(5,12,24,0.92),rgba(4,4,12,0.9));padding:1rem;min-height:200px}
.boot-log{max-height:min(72vh,760px);overflow:auto;color:var(--green);line-height:1.7;padding-right:0.35rem}
.boot-log div{line-height:1.72}
.boot-intel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.9rem}
.boot-intel-card{border:1px solid rgba(24,220,255,0.16);border-radius:14px;background:rgba(2,7,18,0.76);padding:0.9rem}
.boot-intel-card h3{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.65rem}
.boot-kv-list{display:grid;gap:0.48rem}
.boot-kv-row{display:grid;gap:0.22rem;padding:0.44rem 0.5rem;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(24,220,255,0.08)}
.boot-k{font-size:0.54rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber)}
.boot-v{font-size:0.66rem;line-height:1.5;color:var(--text);word-break:break-word}
.fingerprint-gate{margin-top:1rem;border-top:1px solid rgba(24,220,255,0.12);padding-top:1rem;display:grid;grid-template-columns:minmax(220px,0.7fr) minmax(220px,0.9fr);gap:1rem;align-items:center}
.fingerprint-copy{display:grid;gap:0.45rem}
.fingerprint-label{font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--magenta)}
.fingerprint-title{font-family:var(--mono);font-size:clamp(1rem,2vw,1.4rem);color:var(--cyan);letter-spacing:0.1em}
.fingerprint-desc{font-size:0.78rem;line-height:1.65;color:var(--text)}
.fingerprint-scanner{position:relative;display:flex;align-items:center;justify-content:center;justify-self:center;width:min(100%,360px);aspect-ratio:1;border:none;background:radial-gradient(circle at 50% 45%,rgba(10,20,42,0.96),rgba(2,4,10,0.96));border-radius:24px;cursor:pointer;box-shadow:inset 0 0 50px rgba(24,220,255,0.08),0 0 50px rgba(24,220,255,0.08);transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease}
.fingerprint-scanner:hover,.fingerprint-scanner:focus-visible{transform:translateY(-2px) rotateX(8deg);box-shadow:inset 0 0 50px rgba(24,220,255,0.16),0 0 60px rgba(24,220,255,0.16)}
.fingerprint-scanner:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
#fingerprintCanvas{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:24px}
.fingerprint-ring,.fingerprint-sweep{position:absolute;inset:10%;border-radius:50%;pointer-events:none}
.fingerprint-ring{border:1px solid rgba(24,220,255,0.25);box-shadow:0 0 20px rgba(24,220,255,0.18),inset 0 0 20px rgba(24,220,255,0.12)}
.fingerprint-sweep{background:linear-gradient(180deg,transparent,rgba(24,220,255,0.12),transparent);mix-blend-mode:screen;animation:fingerprintSweep 2.2s linear infinite}
.fingerprint-scanner.holding{box-shadow:inset 0 0 50px rgba(0,255,204,0.2),0 0 85px rgba(0,255,204,0.22)}
.fingerprint-scanner.armed{box-shadow:inset 0 0 50px rgba(0,255,65,0.24),0 0 95px rgba(0,255,65,0.2)}
@keyframes fingerprintSweep{0%{transform:translateY(-40%) scaleY(.7)}100%{transform:translateY(40%) scaleY(.95)}}
.fingerprint-progress-wrap{grid-column:1 / -1;display:grid;gap:0.45rem}
.fingerprint-progress-bar{height:9px;border-radius:999px;border:1px solid rgba(24,220,255,0.15);background:rgba(255,255,255,0.04);overflow:hidden}
#fingerprintProgressFill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--tron),var(--green));box-shadow:0 0 20px rgba(24,220,255,0.32);transition:width .08s linear}
.fingerprint-progress-copy{font-size:0.68rem;letter-spacing:0.08em;color:var(--text)}

/* ====== LAYOUT ====== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.page-wrap{position:relative;z-index:2;animation:fadeInUp 0.8s ease-out;overflow-x:hidden;max-width:100vw}
.page-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,220,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(24,220,255,0.015) 1px,transparent 1px);background-size:48px 48px;background-position:0 calc(var(--tron-scroll-progress,0)*-24px),calc(var(--tron-scroll-progress,0)*12px) 0;pointer-events:none;z-index:0;opacity:0.6;transition:background-position .15s linear}
.main-content{max-width:1120px;margin:0 auto}
.container{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.uniform-section-spacing>*+*{margin-top:2rem}
.uniform-section-spacing>.ts-module{margin-bottom:0}
.uniform-section-spacing>.ascii-div{padding:0}
.uniform-section-spacing>.category-heading{padding:0}

/* ====== GLASS PANEL ====== */
.glass{background-color:var(--panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cpath d='M0 14 L0 0 L14 0' fill='none' stroke='%2318dcff' stroke-width='1.5' opacity='0.45'/%3E%3Cpath d='M100%25 14 L100%25 0 L86%25 0' fill='none' stroke='%2318dcff' stroke-width='1.5' opacity='0.45'/%3E%3Cpath d='M100%25 86%25 L100%25 100%25 L86%25 100%25' fill='none' stroke='%2318dcff' stroke-width='1.5' opacity='0.45'/%3E%3Cpath d='M0 86%25 L0 100%25 L14 100%25' fill='none' stroke='%2318dcff' stroke-width='1.5' opacity='0.45'/%3E%3C/svg%3E");border:2px solid rgba(24,220,255,0.2);border-radius:16px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 0 60px rgba(0,255,204,0.05),inset 0 0 40px rgba(0,255,204,0.02);
  transition:border-color .4s,box-shadow .4s;position:relative;overflow:hidden}
.glass::before{content:'';position:absolute;top:-1px;left:-60px;width:60px;height:2px;
  background:var(--tron);box-shadow:0 0 8px var(--tron),0 0 20px rgba(24,220,255,0.4);
  border-radius:2px;animation:tronTrace 4s linear infinite;opacity:0.6;z-index:1}
.glass::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(24,220,255,0.015) 2px,rgba(24,220,255,0.015) 4px);
  opacity:0.5;mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.3),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.3),transparent)}
@keyframes tronTrace{0%{left:-60px}100%{left:calc(100% + 60px)}}
.glass:hover{border-color:rgba(24,220,255,0.45);box-shadow:0 0 80px rgba(24,220,255,0.12),0 0 120px rgba(24,220,255,0.05),inset 0 0 60px rgba(0,255,204,0.04)}

/* ====== TRON ENHANCEMENTS ====== */
.ts-module.reveal.visible .section-head{animation:sectionEdgeGlow 3s ease-in-out infinite;text-shadow:0 0 8px rgba(24,220,255,0.4),0 0 16px rgba(24,220,255,0.2)}
.recipe-card,.project-card,.investigator-card,.threat-lab-card,.case-file-card{position:relative;overflow:hidden}
.recipe-card::before,.project-card::before,.investigator-card::before,.threat-lab-card::before,.case-file-card::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,220,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(24,220,255,0.03) 1px,transparent 1px);background-size:18px 18px;opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.recipe-card:hover::before,.project-card:hover::before,.investigator-card:hover::before,.threat-lab-card:hover::before,.case-file-card:hover::before{opacity:1;animation:gridPulse 2.5s ease-in-out infinite}
.recipe-card::after,.project-card::after,.investigator-card::after,.threat-lab-card::after,.case-file-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.6),var(--cyan),rgba(24,220,255,0.6),transparent);opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.recipe-card:hover::after,.project-card:hover::after,.investigator-card:hover::after,.threat-lab-card:hover::after,.case-file-card:hover::after{opacity:0.7;animation:dataStream 1.5s linear infinite}

/* ====== GLITCH TITLE ====== */
.glitch{font-family:var(--mono);font-size:clamp(2.9rem,8vw,6rem);font-weight:900;
  color:var(--cyan);text-shadow:0 0 10px var(--cyan),0 0 25px var(--cyan),0 0 50px rgba(0,179,170,0.5);
  position:relative;display:inline-block;letter-spacing:-0.02em;animation:neonPulse 4s ease-in-out infinite}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
.glitch::before{color:var(--magenta);text-shadow:0 0 10px var(--magenta);animation:g1 3s infinite linear alternate-reverse;clip-path:inset(0 0 65% 0)}
.glitch::after{color:var(--green);text-shadow:0 0 10px var(--green);animation:g2 2.5s infinite linear alternate-reverse;clip-path:inset(65% 0 0 0)}
@keyframes g1{0%{clip-path:inset(0 0 85% 0);transform:translate(0)}10%{clip-path:inset(15% 0 60% 0);transform:translate(-3px,1px)}20%{clip-path:inset(50% 0 20% 0);transform:translate(3px,-1px)}30%{clip-path:inset(10% 0 70% 0);transform:translate(0)}40%{clip-path:inset(60% 0 10% 0);transform:translate(-2px,2px)}50%{clip-path:inset(30% 0 40% 0);transform:translate(2px)}60%{clip-path:inset(70% 0 5% 0);transform:translate(-1px)}70%{clip-path:inset(5% 0 80% 0);transform:translate(0)}80%{clip-path:inset(40% 0 30% 0);transform:translate(3px,-2px)}90%{clip-path:inset(80% 0 0 0);transform:translate(-3px,1px)}100%{clip-path:inset(0 0 85% 0);transform:translate(0)}}
@keyframes g2{0%{clip-path:inset(85% 0 0 0);transform:translate(0)}10%{clip-path:inset(60% 0 15% 0);transform:translate(2px,-1px)}20%{clip-path:inset(20% 0 50% 0);transform:translate(-2px,1px)}30%{clip-path:inset(70% 0 10% 0);transform:translate(0)}40%{clip-path:inset(10% 0 60% 0);transform:translate(1px,2px)}50%{clip-path:inset(40% 0 30% 0);transform:translate(-2px)}60%{clip-path:inset(5% 0 70% 0);transform:translate(1px)}70%{clip-path:inset(80% 0 5% 0);transform:translate(0)}80%{clip-path:inset(30% 0 40% 0);transform:translate(-3px,2px)}90%{clip-path:inset(0 0 80% 0);transform:translate(2px,-1px)}100%{clip-path:inset(85% 0 0 0);transform:translate(0)}}

/* ====== SCROLL PROGRESS (mobile) ====== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--tron),var(--cyan));z-index:27;transition:width .1s linear;pointer-events:none}
@media(min-width:641px){.scroll-progress{display:none}}

/* ====== HERO ====== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:7.6rem 0 2.6rem;position:relative;overflow:hidden;isolation:isolate;
  --hero-tilt-x:0deg;--hero-tilt-y:0deg;--hero-glow-x:50%;--hero-glow-y:50%}
@supports(height:100dvh){.hero{min-height:100dvh}}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.15}
.hero::after{content:'';position:absolute;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(24,220,255,0.72) 24%,rgba(255,107,26,0.88) 55%,rgba(24,220,255,0.72) 82%,transparent 100%);
  box-shadow:0 0 18px rgba(24,220,255,0.22),0 0 34px rgba(255,107,26,0.14);pointer-events:none;opacity:0.55;animation:heroScanTraverse 7.4s linear infinite}
.hero[data-hero-theme="tron-grid"]::before{background:linear-gradient(90deg,transparent 0%,rgba(24,220,255,0.2) 50%,transparent 100%);animation:heroTronSweep 4s ease-in-out infinite}
.hero[data-hero-theme="matrix-rain"]::before{background:repeating-linear-gradient(180deg,transparent 0,transparent 8px,rgba(0,255,65,0.08) 8px,rgba(0,255,65,0.08) 10px);animation:heroMatrixShift 3s linear infinite}
.hero[data-hero-theme="hologram-scan"]::before{background:linear-gradient(180deg,transparent 0%,rgba(255,0,170,0.12) 30%,rgba(24,220,255,0.12) 70%,transparent 100%);animation:heroHoloScan 5s ease-in-out infinite}
.hero[data-hero-theme="neon-pulse"]::before{background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(24,220,255,0.08),transparent 70%);animation:heroNeonPulse 3s ease-in-out infinite}
@keyframes heroTronSweep{0%,100%{opacity:0.1;transform:translateX(-20%)}50%{opacity:0.25;transform:translateX(20%)}}
@keyframes heroMatrixShift{0%{background-position:0 0}100%{background-position:0 20px}}
@keyframes heroHoloScan{0%,100%{opacity:0.1}50%{opacity:0.2}}
@keyframes heroNeonPulse{0%,100%{opacity:0.12;transform:scale(1)}50%{opacity:0.22;transform:scale(1.05)}}
.hero-identity-glow{position:absolute;left:50%;top:48%;width:min(84vw,640px);height:min(84vw,640px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(24,220,255,0.24) 0%,rgba(24,220,255,0.08) 30%,rgba(255,107,26,0.1) 52%,transparent 75%);
  filter:blur(10px);animation:heroIdentityPulse 6s ease-in-out infinite}
.hero-identity-glow::before,.hero-identity-glow::after{content:'';position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(24,220,255,0.18);opacity:0.7}
.hero-identity-glow::after{inset:21%;border-color:rgba(255,107,26,0.2);animation:heroHaloSpin 9s linear infinite}
.hero-energy-lanes{position:absolute;inset:8% -12% 0;pointer-events:none;z-index:0;transform:perspective(1200px) rotateX(64deg)}
.hero-energy-lane{--lane-rotate:-12deg;position:absolute;height:16px;border-radius:999px;filter:blur(0.2px);opacity:0.24;background:linear-gradient(90deg,rgba(24,220,255,0) 0%,rgba(24,220,255,0.92) 35%,rgba(255,107,26,0.92) 70%,rgba(255,107,26,0) 100%);
  box-shadow:0 0 20px rgba(24,220,255,0.28),0 0 42px rgba(255,107,26,0.18);animation:heroLaneShift 6.6s linear infinite;transform:rotate(var(--lane-rotate))}
.hero-energy-lane.lane-a{left:2%;top:56%;width:62%}
.hero-energy-lane.lane-b{--lane-rotate:-16deg;right:-4%;top:44%;width:54%;animation-duration:5.8s;animation-direction:reverse}
.hero-energy-lane.lane-c{--lane-rotate:-9deg;left:14%;top:70%;width:70%;height:10px;opacity:0.18;animation-duration:8.2s}
.hero-inner{display:grid;grid-template-columns:minmax(0,0.96fr) minmax(320px,0.84fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;text-align:left;padding:clamp(2rem,4vw,3.2rem);max-width:1140px;width:min(100%,calc(100vw - 2rem));
  transform:translateY(var(--hero-parallax-y,0));transition:transform .08s ease-out,box-shadow .35s ease}
@media(min-width:641px){.hero-inner{transform:none}}
.hero-copy{position:relative;z-index:2;transform:translateZ(18px)}
.hero-copy .glitch{margin-bottom:0.45rem}
.hero-holographic{position:relative;overflow:hidden;background:
  radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y),rgba(24,220,255,0.15),transparent 34%),
  radial-gradient(circle at 82% 18%,rgba(255,107,26,0.12),transparent 32%),
  linear-gradient(145deg,rgba(4,12,26,0.94),rgba(5,4,16,0.92));
  box-shadow:0 0 95px rgba(24,220,255,0.17),0 0 120px rgba(255,107,26,0.08),inset 0 0 60px rgba(24,220,255,0.04);
  transform-style:preserve-3d;perspective:1200px}
.hero-holographic::after{content:'';position:absolute;inset:-2px;border-radius:18px;padding:2px;background:linear-gradient(130deg,rgba(24,220,255,0.65),rgba(255,107,26,0.58),rgba(24,220,255,0.28),rgba(255,107,26,0.52),rgba(24,220,255,0.65));background-size:260% 260%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0.7;animation:legacyBorderShift 8.5s linear infinite}
.hero-holographic::before{content:'';position:absolute;inset:14px;pointer-events:none;border:1px solid rgba(24,220,255,0.16);border-radius:14px;opacity:0.8;
  box-shadow:inset 0 0 30px rgba(24,220,255,0.04),inset 0 0 64px rgba(255,107,26,0.03)}
.hero-corner{position:absolute;width:36px;height:36px;pointer-events:none;opacity:0.92;animation:cornerBracketPulse 2.8s ease-in-out infinite}
.hero-corner-tl{top:14px;left:14px;border-top:2px solid var(--tron);border-left:2px solid var(--tron);box-shadow:-2px -2px 14px rgba(24,220,255,0.32)}
.hero-corner-tr{top:14px;right:14px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);box-shadow:2px -2px 14px rgba(255,107,26,0.3)}
.hero-corner-bl{bottom:14px;left:14px;border-bottom:2px solid var(--orange);border-left:2px solid var(--orange);box-shadow:-2px 2px 14px rgba(255,107,26,0.3)}
.hero-corner-br{bottom:14px;right:14px;border-bottom:2px solid var(--tron);border-right:2px solid var(--tron);box-shadow:2px 2px 14px rgba(24,220,255,0.32)}
@keyframes legacyBorderShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes heroScanTraverse{0%{top:18%;transform:translateX(-6%)}50%{top:52%;transform:translateX(6%)}100%{top:82%;transform:translateX(-6%)}}
@keyframes heroIdentityPulse{0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes heroHaloSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes heroLaneShift{0%{transform:rotate(var(--lane-rotate)) translateX(-7%)}50%{transform:rotate(var(--lane-rotate)) translateX(5%)}100%{transform:rotate(var(--lane-rotate)) translateX(-7%)}}
.eyebrow{font-family:var(--mono);font-size:clamp(0.6rem,1.1vw,0.75rem);letter-spacing:0.42em;text-transform:uppercase;color:var(--magenta);margin-bottom:0.9rem}
.hero-sub{color:var(--muted);font-family:var(--mono);font-size:clamp(0.8rem,1.4vw,0.95rem);margin-top:0.9rem;max-width:28ch}
.typer-wrap{font-family:var(--mono);font-size:clamp(0.8rem,1.4vw,1rem);color:var(--green);height:1.8em;margin:1.35rem 0 1.4rem;display:flex;align-items:center;justify-content:flex-start}
.typer-cursor{display:inline-block;width:2px;height:1.2em;background:var(--green);margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-meta-strip{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.55rem}
.hero-meta-chip{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:#dffcff;padding:0.48rem 0.72rem;border-radius:999px;border:1px solid rgba(24,220,255,0.22);background:linear-gradient(135deg,rgba(5,18,32,0.94),rgba(10,6,22,0.92));box-shadow:0 0 16px rgba(24,220,255,0.1),inset 0 0 16px rgba(255,107,26,0.04)}
.hero-meta-chip:nth-child(2){border-color:rgba(255,107,26,0.26);color:#ffd8bc}
.hero-meta-chip:nth-child(3){border-color:rgba(24,220,255,0.26);color:#cffff4}
.hero-visual-stack{position:relative;z-index:2;display:grid;gap:1rem}
.hero-visual-shell{position:relative;padding:1rem;border:1px solid transparent;border-radius:26px;overflow:hidden;min-height:420px;transform:perspective(1200px) rotateX(var(--hero-tilt-y)) rotateY(var(--hero-tilt-x));
  transition:transform .18s ease-out,box-shadow .24s ease;background:
  radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y),rgba(24,220,255,0.12),transparent 34%),
  linear-gradient(160deg,rgba(5,12,26,0.9),rgba(9,4,20,0.94)) padding-box,
  linear-gradient(140deg,rgba(24,220,255,0.58),rgba(255,107,26,0.52),rgba(24,220,255,0.28),rgba(255,107,26,0.44)) border-box;
  background-size:auto,100% 100%,260% 260%;box-shadow:0 0 40px rgba(24,220,255,0.18),0 0 60px rgba(255,107,26,0.08),inset 0 0 36px rgba(24,220,255,0.06);animation:legacyBorderShift 8.6s linear infinite}
.hero-visual-shell::before{content:'';position:absolute;inset:18px;border:1px solid rgba(24,220,255,0.14);border-radius:18px;pointer-events:none}
.hero-visual-shell::after{content:'';position:absolute;inset:-20% auto -20% -50%;width:42%;background:linear-gradient(120deg,transparent,rgba(24,220,255,0.14),rgba(255,107,26,0.12),transparent);transform:skewX(-24deg);pointer-events:none;animation:heroHudSweep 6.4s linear infinite}
.hero-visual-badge{display:inline-flex;align-items:center;gap:0.35rem;font-family:var(--mono);font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--orange);padding:0.42rem 0.68rem;border-radius:999px;border:1px solid rgba(255,107,26,0.24);background:rgba(6,10,20,0.86);margin-bottom:0.8rem}
.hero-holo-scene{display:block;width:100%;height:auto;aspect-ratio:760/520}
.hero-holo-scene .scene-lane{animation:sceneLaneFlow 3.6s linear infinite}
.hero-holo-scene .scene-lane-alt{animation-duration:3.1s;animation-delay:-1.2s}
.hero-holo-scene .holo-scene-bike,.hero-holo-scene .holo-scene-recognizer,.hero-holo-scene .holo-scene-rings,.hero-holo-scene .holo-scene-beams{transform-box:fill-box;transform-origin:center}
.hero-holo-scene .holo-scene-bike{animation:holoBikeFloat 5.8s ease-in-out infinite}
.hero-holo-scene .holo-scene-recognizer{animation:holoShipDrift 6.4s ease-in-out infinite}
.hero-holo-scene .holo-scene-rings{animation:holoRingPulse 7s ease-in-out infinite}
.hero-holo-scene .holo-scene-beams{animation:holoBeamFlicker 2.8s ease-in-out infinite}
@keyframes heroHudSweep{0%{transform:translateX(0) skewX(-24deg)}100%{transform:translateX(380%) skewX(-24deg)}}
@keyframes sceneLaneFlow{to{stroke-dashoffset:-120}}
@keyframes holoBikeFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8px,-8px,0)}}
@keyframes holoShipDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-10px,-12px,0)}}
@keyframes holoRingPulse{0%,100%{opacity:0.55;transform:scale(1)}50%{opacity:0.88;transform:scale(1.03)}}
@keyframes holoBeamFlicker{0%,100%{opacity:0.5}50%{opacity:0.96}}
.hero-visual-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.55rem;margin-top:0.8rem}
.hero-visual-hud span{display:flex;align-items:center;justify-content:center;padding:0.46rem 0.55rem;border-radius:10px;background:rgba(4,10,22,0.8);border:1px solid rgba(24,220,255,0.14);font-family:var(--mono);font-size:0.56rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text)}
.hero-data-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem}
.hero-rail-card{position:relative;overflow:hidden;padding:0.85rem 0.92rem 0.95rem;border-radius:16px;border:1px solid rgba(24,220,255,0.18);background:linear-gradient(150deg,rgba(5,12,24,0.9),rgba(9,6,20,0.9));box-shadow:0 0 22px rgba(24,220,255,0.08),inset 0 0 24px rgba(255,107,26,0.04)}
.hero-rail-card::before{content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.16),rgba(255,107,26,0.14),transparent);transform:skewX(-22deg);animation:heroRailSweep 5.8s linear infinite}
.hero-rail-label{display:block;font-family:var(--mono);font-size:0.54rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--orange);margin-bottom:0.35rem}
.hero-rail-card strong{display:block;font-family:var(--mono);font-size:0.74rem;letter-spacing:0.07em;text-transform:uppercase;color:#ecfbff;margin-bottom:0.18rem}
.hero-rail-card em{display:block;font-size:0.7rem;font-style:normal;color:var(--muted);line-height:1.55}
@keyframes heroRailSweep{0%{transform:translateX(0) skewX(-22deg)}100%{transform:translateX(500%) skewX(-22deg)}}
.hero-stats-circuit{position:relative;width:min(100%,860px);height:36px;margin:-0.5rem auto 0;pointer-events:none;opacity:0.92;z-index:2}
.hero-stats-circuit svg{width:100%;height:100%}
.hero-circuit-path{animation:heroCircuitFlow 2.5s linear infinite}
.hero-circuit-orange{animation-duration:2.1s;animation-direction:reverse}
@keyframes heroCircuitFlow{to{stroke-dashoffset:-34}}

/* ====== TOP CONTROL BAR (music + settings) ====== */
.top-bar-wrap{position:fixed;top:0.45rem;left:0;right:0;z-index:26;display:flex;justify-content:center;padding:0 0.72rem;pointer-events:none}
.top-bar{width:min(100%,1100px);margin:0 auto;position:relative;padding:0.44rem 0.56rem 0.5rem;border-radius:16px;border:2px solid rgba(24,220,255,0.35);background:linear-gradient(140deg,rgba(3,10,20,0.95),rgba(8,8,22,0.94));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.42rem;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 35px rgba(0,0,0,0.34),0 0 30px rgba(24,220,255,0.15),0 0 50px rgba(255,0,170,0.06),inset 0 0 0 1px rgba(255,0,170,0.15),0 0 0 1px rgba(24,220,255,0.08);pointer-events:auto;
  transform-style:preserve-3d;transition:box-shadow .3s}
.top-bar:hover{box-shadow:0 10px 35px rgba(0,0,0,0.34),0 0 40px rgba(24,220,255,0.2),0 0 60px rgba(255,0,170,0.08),inset 0 0 0 1px rgba(255,0,170,0.15),0 0 0 1px rgba(24,220,255,0.12)}
.top-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.16),transparent);transform:translateX(-120%);animation:musicSweep 4.2s linear infinite;pointer-events:none}
.top-bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,0.015) 3px,rgba(255,255,255,0.015) 6px);pointer-events:none}
@keyframes musicSweep{to{transform:translateX(120%)}}
.top-bar-label{flex:1 1 100%;font-family:var(--mono);font-size:0.52rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--magenta);text-align:center;line-height:1.3;text-shadow:0 0 8px rgba(255,0,170,0.35)}

/* ====== MUSIC CONTROLS ====== */
.music-controls-row{display:flex;align-items:center;gap:0.5rem;width:100%;flex-wrap:wrap;justify-content:center}
.music-btns{display:flex;align-items:center;justify-content:center;gap:0.42rem;flex:0 0 auto;min-width:0}
.music-transport{padding:0.16rem 0.22rem;border:1px solid rgba(24,220,255,0.2);border-radius:12px;background:rgba(2,12,25,0.7);box-shadow:inset 0 0 0 1px rgba(255,0,170,0.08)}
.music-next-btn{border:1px solid rgba(24,220,255,0.24);border-radius:10px;background:rgba(2,12,25,0.9);color:var(--tron);padding:0.2rem 0.5rem;font-family:var(--mono);font-size:0.56rem;cursor:pointer;transition:transform .2s,border-color .22s,box-shadow .22s,color .22s}
.music-next-btn:hover{transform:translateY(-1px);border-color:var(--tron);box-shadow:0 0 12px rgba(24,220,255,0.2)}
.music-next-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.music-nav-btn{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0.2rem 0.45rem;font-size:1.08rem;font-weight:700;line-height:1}
.music-playpause-btn{min-width:44px;min-height:38px;font-size:0.98rem;padding:0.2rem 0.55rem}
.music-now-playing{display:flex;flex-direction:column;gap:0.08rem;min-width:220px;max-width:min(46ch,100%);padding:0.08rem 0.2rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em}
.music-track-title{font-size:0.56rem;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-track-sub{font-size:0.46rem;color:var(--muted);line-height:1.3}
.music-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0.42rem 0.72rem;width:100%;padding:0.04rem 0.35rem 0;font-family:var(--mono)}
.music-status{font-size:0.56rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.music-status.playing{color:var(--green);text-shadow:0 0 8px rgba(0,255,65,0.4)}
.music-status.error{color:var(--amber)}
.music-fallback{font-size:0.56rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan)}
.music-fallback:hover{color:var(--tron)}
.autoplay-banner{display:none;width:100%;text-align:center;padding:0.3rem 0.5rem;font-family:var(--mono);font-size:0.56rem;color:var(--amber);letter-spacing:0.08em;cursor:pointer}
.autoplay-banner.show{display:block}
.music-panel{width:100%}
.music-panel[hidden]{display:none}
.music-panel-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0.25rem 0.5rem;font-size:0.52rem}
/* Collapsed state: top-bar shrinks to compact pill */
.top-bar.audio-collapsed{padding:0.24rem 0.46rem 0.28rem;gap:0.4rem;transition:padding .35s ease,gap .35s ease,border-color .35s ease;border-radius:999px;border-color:rgba(24,220,255,0.5)}
.top-bar.audio-collapsed .top-bar-label{display:none}
.top-bar.audio-collapsed .top-toggles{display:none}
.top-bar.audio-collapsed .music-panel-toggle{width:auto;flex:0 0 auto}
.top-bar.music-playing-pulse{animation:musicDeckPulse 0.86s ease-in-out infinite}
.top-bar.music-playing-pulse::before{animation-duration:2.3s}
@keyframes musicDeckPulse{0%,100%{box-shadow:0 10px 35px rgba(0,0,0,0.34),0 0 26px rgba(24,220,255,0.22),0 0 40px rgba(255,0,170,0.08),inset 0 0 0 1px rgba(255,0,170,0.16),0 0 0 1px rgba(24,220,255,0.1)}50%{box-shadow:0 12px 40px rgba(0,0,0,0.38),0 0 44px rgba(24,220,255,0.36),0 0 66px rgba(255,0,170,0.12),inset 0 0 0 1px rgba(255,0,170,0.22),0 0 0 1px rgba(24,220,255,0.2)}}
/* Mini bar: compact controls when panel collapsed */
.music-mini-bar{display:none;align-items:center;justify-content:center;gap:0.36rem;flex:0 0 auto;padding:0}
.music-mini-bar:not([hidden]){display:flex}
.music-mini-bar .music-next-btn{flex:0 0 auto}
.music-track-indicator{font-family:var(--mono);font-size:0.52rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);min-width:2.5ch}
.music-track-indicator.playing{color:var(--green);text-shadow:0 0 8px rgba(0,255,65,0.4)}
.music-mini-btn{min-width:30px;min-height:30px;font-size:0.88rem;padding:0.18rem 0.42rem}
.music-launch-btn{padding:0.26rem 0.62rem;letter-spacing:0.07em;text-transform:uppercase;font-size:0.52rem}

/* ====== TOP TOGGLES ROW ====== */
.top-toggles{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.15rem 0 0;flex-wrap:wrap}
.top-toggle-btn{border:1px solid rgba(24,220,255,0.18);border-radius:999px;background:rgba(2,12,25,0.85);color:var(--muted);font-family:var(--mono);font-size:0.52rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.25rem 0.6rem;cursor:pointer;transition:all .22s;white-space:nowrap}
.top-toggle-btn:hover{border-color:rgba(24,220,255,0.4);color:var(--text)}
.top-toggle-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.top-toggle-btn.on{border-color:var(--cyan);color:var(--cyan)}
.top-toggle-btn.settings-btn{border-color:rgba(139,92,246,0.3);color:var(--violet)}
.top-toggle-btn.settings-btn:hover{border-color:var(--violet)}
body.engage-mode .top-toggle-btn.on{border-color:rgba(143,198,255,0.7);color:#d6ebff}
body.read-mode .top-toggle-btn.on{border-color:rgba(40,60,80,0.6);color:#1a1a1a}

/* ====== HERO BUTTONS ====== */
.hero-btns{display:flex;gap:1rem;justify-content:flex-start;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:0.82rem;padding:0.65rem 1.6rem;border-radius:4px;text-decoration:none;font-weight:600;transition:all .3s;cursor:pointer;border:none;text-transform:uppercase;letter-spacing:0.05em}
.btn-primary{background:linear-gradient(135deg,var(--tron),var(--orange));color:#02050a;box-shadow:0 0 24px rgba(24,220,255,0.24),0 0 44px rgba(255,107,26,0.14)}
.btn-primary:hover{box-shadow:0 0 46px rgba(24,220,255,0.36),0 0 68px rgba(255,107,26,0.24);transform:translateY(-2px)}
.btn-ghost{background:rgba(3,10,20,0.6);color:#dffcff;border:2px solid rgba(255,107,26,0.55);box-shadow:0 0 18px rgba(24,220,255,0.12),inset 0 0 18px rgba(255,107,26,0.04)}
.btn-ghost:hover{background:rgba(255,107,26,0.08);box-shadow:0 0 30px rgba(24,220,255,0.28),0 0 50px rgba(255,107,26,0.16);transform:translateY(-2px);border-color:var(--tron)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ====== STATS ====== */
.quote-section{padding:3rem 0}
.quote-block{max-width:680px;margin:0 auto;padding:2rem 2.5rem;border-left:3px solid var(--magenta);font-family:var(--mono);position:relative}
.quote-text{font-size:clamp(0.95rem,1.8vw,1.15rem);color:var(--text);font-style:italic;line-height:1.7}
.quote-cite{display:block;margin-top:1rem;color:var(--magenta);font-size:0.82rem;font-style:normal}
.section-head{font-family:var(--mono);font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--muted);margin-bottom:2.5rem;padding-left:0.5rem;border-left:3px solid var(--cyan)}
.section-head span{color:var(--cyan)}
.stats-section{padding:2.6rem 0 2.9rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.stats-section::before,.stats-section::after{content:'';position:absolute;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.85),rgba(255,107,26,0.78),rgba(24,220,255,0.85),transparent);background-size:220% 100%;opacity:0.55;animation:sectionRailFlow 7s linear infinite}
.stats-section::before{top:0}
.stats-section::after{bottom:0;animation-direction:reverse}
@keyframes sectionRailFlow{0%{background-position:0 0}100%{background-position:220% 0}}
.stats-holo-frame{position:relative;max-width:940px;margin:0 auto;padding:1.25rem 1.45rem 1.05rem;border:1px solid transparent;border-radius:18px;overflow:hidden;background:
  linear-gradient(160deg,rgba(5,12,26,0.94),rgba(4,5,16,0.92)) padding-box,
  linear-gradient(128deg,rgba(24,220,255,0.54),rgba(255,107,26,0.44),rgba(24,220,255,0.26),rgba(255,107,26,0.44)) border-box;
  background-size:100% 100%,240% 240%;box-shadow:0 0 42px rgba(24,220,255,0.14),0 0 80px rgba(255,107,26,0.06),inset 0 0 36px rgba(24,220,255,0.05);animation:legacyBorderShift 10s linear infinite}
.stats-holo-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent,rgba(24,220,255,0.08),rgba(255,107,26,0.08),transparent);transform:translateX(-120%) skewX(-20deg);animation:heroHudSweep 7.5s linear infinite}
.stats-energy-rings{position:absolute;inset:0;pointer-events:none}
.stats-energy-rings span{position:absolute;border-radius:999px;border:1px solid rgba(24,220,255,0.14);animation:statsRingPulse 5.8s ease-in-out infinite}
.stats-energy-rings span:nth-child(1){width:180px;height:180px;top:-84px;right:3%;border-color:rgba(24,220,255,0.18)}
.stats-energy-rings span:nth-child(2){width:130px;height:130px;right:12%;top:-58px;border-color:rgba(255,107,26,0.18);animation-delay:-1.4s}
.stats-energy-rings span:nth-child(3){width:160px;height:160px;left:-80px;bottom:-92px;border-color:rgba(24,220,255,0.12);animation-delay:-2.6s}
@keyframes statsRingPulse{0%,100%{opacity:0.22;transform:scale(1)}50%{opacity:0.54;transform:scale(1.04)}}
.stats-inner{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:clamp(0.8rem,3vw,2.5rem);flex-wrap:wrap;font-family:var(--mono);font-size:clamp(0.72rem,1.3vw,0.92rem)}
.stat-item{display:flex;align-items:center;gap:0.4rem;opacity:0;transform:translateY(10px);transition:opacity .46s ease,transform .46s ease}
.stats-live .stat-item{opacity:1;transform:translateY(0)}
.stats-live .stat-item:nth-of-type(1){transition-delay:0.05s}
.stats-live .stat-item:nth-of-type(2){transition-delay:0.12s}
.stats-live .stat-item:nth-of-type(3){transition-delay:0.19s}
.stats-live .stat-item:nth-of-type(4){transition-delay:0.26s}
.stat-label{color:var(--muted)}
.stat-val{position:relative;color:var(--cyan);font-weight:700;min-width:2ch;text-shadow:0 0 12px rgba(24,220,255,0.3)}
.stat-val::after{content:'';position:absolute;left:0;right:0;bottom:-0.22rem;height:1px;background:linear-gradient(90deg,var(--tron),var(--orange),transparent);opacity:0.78;animation:statValStream 2.4s linear infinite}
@keyframes statValStream{0%{transform:scaleX(0.45);transform-origin:left}50%{transform:scaleX(1);transform-origin:center}100%{transform:scaleX(0.45);transform-origin:right}}
.stat-sep{color:rgba(255,255,255,0.12);user-select:none}
.data-status{text-align:center;font-family:var(--mono);font-size:0.62rem;color:var(--muted);padding:0.72rem 0 0;letter-spacing:0.06em;position:relative;z-index:1}
.data-status.fallback{color:var(--amber)}
.legacy-section,.tron-story-section,.tron-cinema-section,.tron-case-section{position:relative}
.legacy-section::before,.tron-story-section::before,.tron-cinema-section::before,.tron-case-section::before,
.legacy-section::after,.tron-story-section::after,.tron-cinema-section::after,.tron-case-section::after{content:'';position:absolute;left:clamp(1rem,4vw,2.5rem);right:clamp(1rem,4vw,2.5rem);height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.55),rgba(255,107,26,0.5),transparent);opacity:0.48;background-size:220% 100%;animation:sectionRailFlow 8s linear infinite}
.legacy-section::before,.tron-story-section::before,.tron-cinema-section::before,.tron-case-section::before{top:0}
.legacy-section::after,.tron-story-section::after,.tron-cinema-section::after,.tron-case-section::after{bottom:0;animation-direction:reverse}

/* ====== BARCODE / DATA-MATRIX DECORATIVE ====== */
.barcode-edge{position:relative;overflow:hidden}
.barcode-edge::after{content:'';position:absolute;right:0;top:0;bottom:0;width:16px;background:repeating-linear-gradient(90deg,rgba(24,220,255,0.2),rgba(24,220,255,0.2) 1px,transparent 1px,transparent 4px);opacity:0.5;pointer-events:none}
.quote-block.barcode-edge::after{right:auto;left:0;background:repeating-linear-gradient(90deg,rgba(255,0,170,0.15),rgba(255,0,170,0.15) 1px,transparent 1px,transparent 4px)}

/* ====== ASCII DIVIDERS ====== */
.ascii-div{text-align:center;font-family:var(--mono);font-size:0.7rem;color:var(--dim);padding:2rem 0;user-select:none;letter-spacing:0.3em;overflow:hidden}

/* ====== COLLAPSIBLE MODULES (Phase 4) ====== */
.ts-module{margin-bottom:0.5rem}
.ts-module-header{display:flex;align-items:center;gap:0.8rem;width:100%;border:2px solid transparent;border-radius:12px;padding:0.8rem 1.2rem;cursor:pointer;text-align:left;
  background:linear-gradient(150deg,rgba(4,12,24,0.92),rgba(8,6,20,0.9)) padding-box,linear-gradient(125deg,rgba(24,220,255,0.35),rgba(255,107,26,0.3),rgba(24,220,255,0.18)) border-box;
  background-size:100% 100%,240% 240%;
  transition:border-color .3s,box-shadow .3s,background .3s,transform .24s;font-family:inherit;color:inherit;position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(24,220,255,0.06),inset 0 1px 0 rgba(24,220,255,0.08);
  transform-style:preserve-3d;perspective:800px;animation:legacyBorderShift 12s linear infinite}
.ts-module-header::before{content:'';position:absolute;top:0;left:-110%;width:70%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.12),transparent);pointer-events:none;transition:left .55s ease}
.ts-module-header::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--tron),var(--orange),var(--cyan));box-shadow:0 0 8px rgba(24,220,255,0.35),0 0 12px rgba(255,107,26,0.22);transition:width .35s ease;pointer-events:none}
.ts-module-header:hover{border-color:rgba(24,220,255,0.7);box-shadow:0 0 35px rgba(24,220,255,0.2),0 0 50px rgba(255,0,170,0.08),inset 0 0 25px rgba(24,220,255,0.08),0 4px 20px rgba(0,0,0,0.3);background:rgba(24,220,255,0.06);transform:translateY(-1px) rotateX(2deg)}
.ts-module-header:hover::before{left:125%}
.ts-module-header:hover::after,.ts-module-header[aria-expanded="true"]::after{width:100%}
.ts-module-header:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ts-module-header[aria-expanded="true"]{border-color:rgba(24,220,255,0.6);box-shadow:0 0 30px rgba(24,220,255,0.15),inset 0 0 25px rgba(24,220,255,0.06)}
.ts-module-header .section-head{margin-bottom:0;flex:0 0 auto;font-size:clamp(0.9rem,1.8vw,1.15rem)}
.ts-module-summary{flex:1;min-width:0;font-family:var(--mono);font-size:0.76rem;font-weight:700;color:#8ad8f0;letter-spacing:0.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-module-chevron{font-family:var(--mono);font-size:0.8rem;color:var(--cyan);transition:transform .3s;flex:0 0 auto}
.ts-module-header[aria-expanded="true"] .ts-module-chevron{transform:rotate(180deg)}
.ts-module-header[aria-expanded="true"] .ts-module-summary{display:none}
.ts-module-body{overflow:hidden;transition:max-height .5s ease,opacity .4s ease;max-height:0;opacity:0}
.ts-module-body.open{opacity:1}
.ts-module-body.open>div{animation:moduleBodyReveal .45s ease-out both}
.ts-module-body>div{padding-top:1rem}
@keyframes moduleBodyReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.ts-module-body.open>div{animation:none}}
.module-controls{display:flex;justify-content:center;gap:0.8rem;padding:1rem 1.2rem;flex-wrap:wrap;position:relative;overflow:hidden;border:2px solid transparent;border-radius:14px;background:
  linear-gradient(150deg,rgba(3,12,24,0.88),rgba(8,5,20,0.84)) padding-box,
  linear-gradient(125deg,rgba(24,220,255,0.42),rgba(255,107,26,0.34),rgba(24,220,255,0.24)) border-box;
  background-size:100% 100%,240% 240%;
  box-shadow:0 0 28px rgba(24,220,255,0.08),0 0 40px rgba(255,107,26,0.05),inset 0 0 30px rgba(0,0,0,0.2);animation:legacyBorderShift 10.5s linear infinite}
.module-controls::before{content:'';position:absolute;top:-1px;left:-90px;width:90px;height:2px;background:linear-gradient(90deg,transparent,var(--tron),var(--orange),var(--cyan));box-shadow:0 0 10px var(--tron),0 0 16px rgba(255,107,26,0.28);opacity:0.85;animation:moduleCtrlTrace 4.8s linear infinite;pointer-events:none}
.module-controls::after{content:'';position:absolute;right:0;top:0;bottom:0;width:14px;background:repeating-linear-gradient(90deg,rgba(24,220,255,0.12),rgba(24,220,255,0.12) 1px,transparent 1px,transparent 3px);opacity:0.6;pointer-events:none}
.module-ctrl-btn{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan);background:linear-gradient(150deg,rgba(3,12,24,0.92),rgba(8,8,20,0.9));border:2px solid rgba(24,220,255,0.35);border-radius:999px;padding:0.45rem 1.05rem;cursor:pointer;transition:all .22s;position:relative;overflow:hidden}
.module-ctrl-btn::before{content:'';position:absolute;top:0;left:-100%;width:65%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.26),transparent);pointer-events:none}
.module-ctrl-btn:hover{border-color:var(--orange);box-shadow:0 0 16px rgba(24,220,255,0.25),0 0 30px rgba(255,107,26,0.12);color:#ecfbff}
.module-ctrl-btn:hover::before{animation:moduleBtnSweep .6s ease-out}
.module-ctrl-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.module-ctrl-btn.tron-pulse{animation:moduleCtrlPulse .45s ease-out}
@keyframes moduleCtrlTrace{0%{left:-90px}100%{left:calc(100% + 90px)}}
@keyframes moduleBtnSweep{0%{left:-100%}100%{left:140%}}
@keyframes moduleCtrlPulse{0%{box-shadow:0 0 0 rgba(24,220,255,0)}50%{box-shadow:0 0 22px rgba(24,220,255,0.35),0 0 40px rgba(24,220,255,0.2)}100%{box-shadow:0 0 0 rgba(24,220,255,0)}}

/* ====== SEARCH/FILTER (Phase 2) ====== */
.search-wrap{max-width:480px;margin:0 auto 2rem;position:relative}
.legacy-search-wrap{padding:0.24rem;border:1px solid transparent;border-radius:14px;background:
  linear-gradient(160deg,rgba(4,8,18,0.92),rgba(7,6,18,0.9)) padding-box,
  linear-gradient(125deg,rgba(24,220,255,0.42),rgba(255,107,26,0.3),rgba(24,220,255,0.18)) border-box;
  background-size:100% 100%,240% 240%;box-shadow:0 0 24px rgba(24,220,255,0.08),0 0 40px rgba(255,107,26,0.05);animation:legacyBorderShift 9s linear infinite}
.legacy-search-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:14px;background:linear-gradient(120deg,transparent,rgba(24,220,255,0.08),rgba(255,107,26,0.08),transparent);transform:translateX(-120%) skewX(-20deg);animation:heroHudSweep 7s linear infinite}
.search-input{width:100%;padding:0.7rem 1rem 0.7rem 2.4rem;border-radius:10px;border:1px solid rgba(24,220,255,0.08);background:rgba(5,5,15,0.9);color:var(--cyan);font-family:var(--mono);font-size:0.82rem;transition:border-color .22s,box-shadow .22s;outline:none}
.search-input:focus{border-color:rgba(24,220,255,0.42);box-shadow:0 0 16px rgba(0,255,204,0.14),0 0 30px rgba(255,107,26,0.08)}
.search-input::placeholder{color:var(--muted);opacity:0.7}
.search-icon{position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:0.9rem;pointer-events:none}

/* ====== ARCHIVES ====== */
.archives-section{padding:3rem 0 4rem}
.archives-text{max-width:680px;margin:0 auto 2rem;font-size:0.92rem;color:var(--text);line-height:1.8}
.archives-text em{color:var(--cyan);font-style:normal}
.vb6-win{max-width:680px;margin:2rem auto;border:1px solid #555;overflow-x:auto;overflow-y:hidden;background:#c0c0c0;box-shadow:2px 2px 0 #555,inset 1px 1px 0 #fff}
.vb6-bar{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-family:Tahoma,'MS Sans Serif',sans-serif;font-size:0.78rem;font-weight:700;padding:3px 6px;display:flex;align-items:center;gap:8px}
.vb6-bar::after{content:'\00d7';margin-left:auto;background:#c0c0c0;color:#000;width:16px;height:14px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;border:1px outset #ddd}
.vb6-code{background:#fff;color:#000;font-family:'Courier New',monospace;font-size:0.8rem;padding:0.8rem 1rem;margin:2px;line-height:1.6;overflow-x:auto;white-space:pre}
.vb6-code .kw{color:#0000ff}.vb6-code .cm{color:#008000}.vb6-code .st{color:#a31515}.vb6-code .fn{color:#795e26}
.nfo{max-width:680px;margin:2rem auto;background:#000;border:1px solid var(--cyan);padding:1.5rem 2rem;font-family:'Courier New',monospace;font-size:clamp(0.6rem,1vw,0.78rem);color:var(--cyan);text-shadow:0 0 5px rgba(0,255,204,0.3);line-height:1.4;overflow-x:auto;white-space:pre}

/* ====== RECIPE CARDS ====== */
.recipes-section{padding:3rem 0 4rem}
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:1024px){.recipe-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.recipe-grid{grid-template-columns:1fr}}
.recipe-card{border:2px solid rgba(24,220,255,0.18);border-radius:8px;background:var(--panel);overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;will-change:transform;
  box-shadow:0 0 20px rgba(24,220,255,0.04),inset 0 1px 0 rgba(24,220,255,0.06);
  transform-style:preserve-3d;perspective:1000px}
.recipe-card:hover{transform:translateY(-6px) rotateX(4deg) rotateY(-2deg);border-color:rgba(24,220,255,0.55);
  box-shadow:0 0 40px rgba(24,220,255,0.2),0 0 60px rgba(24,220,255,0.08),inset 0 0 30px rgba(24,220,255,0.05),0 8px 32px rgba(0,0,0,0.4)}
.recipe-header{padding:1rem 1.2rem 0.5rem;border-bottom:1px solid var(--border)}
.recipe-label{font-family:var(--mono);font-size:0.68rem;color:var(--magenta);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.3rem}
.recipe-name{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--cyan)}
.recipe-name a{color:inherit;text-decoration:none}.recipe-name a:hover{text-shadow:0 0 8px var(--cyan)}
.recipe-body{padding:1rem 1.2rem}
.recipe-item{margin-bottom:0.7rem}
.recipe-item-label{font-family:var(--mono);font-size:0.7rem;color:var(--amber);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.15rem}
.recipe-item-value{font-size:0.86rem;color:var(--text);line-height:1.5}
.recipe-meta{display:flex;gap:0.5rem;padding:0.7rem 1.2rem;border-top:1px solid var(--border);flex-wrap:wrap}

/* ====== PROJECT GRID ====== */
.projects-section{padding:3rem 0 4rem;position:relative;overflow:hidden}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;perspective:1200px}
@media(max-width:1024px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.project-grid{grid-template-columns:1fr}}
.project-card{border:2px solid transparent;border-radius:10px;overflow:hidden;
  background:linear-gradient(155deg,rgba(8,14,28,0.94),rgba(8,8,20,0.92)) padding-box,linear-gradient(125deg,rgba(24,220,255,0.38),rgba(255,107,26,0.28),rgba(24,220,255,0.16)) border-box;
  background-size:100% 100%,240% 240%;
  transition:transform .35s,box-shadow .35s,border-color .35s;will-change:transform;opacity:0;transform:translateY(30px);
  box-shadow:0 0 22px rgba(24,220,255,0.05),0 0 42px rgba(255,107,26,0.03),inset 0 1px 0 rgba(24,220,255,0.06);
  transform-style:preserve-3d;perspective:1000px;animation:legacyBorderShift 18s linear infinite}
.project-card.visible{opacity:1;transform:translateY(0);transition:opacity .5s,transform .5s,box-shadow .35s,border-color .35s,filter .35s}
.project-card:hover{transform:translateY(-4px) scale(1.01) rotateX(3deg) rotateY(2deg);border-color:rgba(24,220,255,0.55);
  box-shadow:0 0 46px rgba(24,220,255,0.2),0 0 76px rgba(255,107,26,0.1),inset 0 0 35px rgba(24,220,255,0.05),0 8px 32px rgba(0,0,0,0.4);filter:brightness(1.04)}
.card-bar{display:flex;align-items:center;gap:6px;padding:0.55rem 0.9rem;background:rgba(0,0,0,0.4);border-bottom:1px solid var(--border)}
.dot{width:9px;height:9px;border-radius:50%}.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.card-filename{font-family:var(--mono);font-size:0.72rem;color:var(--muted);margin-left:0.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-body{padding:1rem 0.9rem 0.6rem}
.card-name{font-family:var(--mono);font-weight:700;font-size:0.95rem;color:var(--text);margin-bottom:0.4rem}
.card-name a{color:inherit;text-decoration:none;transition:color .2s}.card-name a:hover{color:var(--cyan)}
.card-desc{font-size:0.82rem;color:var(--muted);line-height:1.4;min-height:2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:0.4rem;padding:0.6rem 0.9rem 0.8rem}
.project-link{display:block;color:inherit;text-decoration:none;height:100%}
.project-link:hover .card-name{color:var(--cyan)}
.pill{font-family:var(--mono);font-size:0.68rem;padding:0.15rem 0.5rem;border-radius:999px;border:1px solid;display:inline-flex;align-items:center;gap:0.25rem}
.pill-stars{border-color:var(--amber);color:var(--amber)}.pill-lang{border-color:var(--green);color:var(--green)}.pill-date{border-color:var(--cyan);color:var(--cyan)}
.tron-panel-surface{border:1px solid transparent;background:
  linear-gradient(160deg,rgba(5,12,26,0.94),rgba(7,5,18,0.92)) padding-box,
  linear-gradient(130deg,rgba(24,220,255,0.42),rgba(255,107,26,0.32),rgba(24,220,255,0.18)) border-box;
  background-size:100% 100%,240% 240%;animation:legacyBorderShift 10s linear infinite;box-shadow:0 0 30px rgba(24,220,255,0.08),0 0 45px rgba(255,107,26,0.06)}

/* ====== TERMINAL ====== */
.terminal-section{padding:3rem 0 4rem}
.terminal{max-width:1120px;width:100%;margin:0 auto;border-radius:8px;overflow:hidden;border:2px solid rgba(24,220,255,0.25);background:rgba(3,3,8,0.95);
  box-shadow:0 0 30px rgba(24,220,255,0.08),inset 0 0 40px rgba(0,0,0,0.3)}
.terminal.is-live{animation:borderPulse 3s ease-in-out infinite}
.term-bar{display:flex;align-items:center;gap:6px;padding:0.6rem 0.9rem;background:rgba(0,0,0,0.6);border-bottom:1px solid var(--border)}
.term-title{font-family:var(--mono);font-size:0.72rem;color:var(--muted);margin-left:0.5rem}
.term-body{padding:1.2rem;font-family:var(--mono);font-size:clamp(0.72rem,1.2vw,0.85rem);color:var(--green);line-height:1.8;height:clamp(330px,62vh,680px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(24,220,255,0.35) rgba(0,0,0,0.25)}
.term-body::-webkit-scrollbar{width:10px}
.term-body::-webkit-scrollbar-track{background:rgba(0,0,0,0.25)}
.term-body::-webkit-scrollbar-thumb{background:rgba(24,220,255,0.24);border-radius:999px}
.term-line{opacity:0;white-space:pre-wrap}.term-line.typed{opacity:1}
.term-line .output{color:var(--muted)}.term-line .hl{color:var(--cyan)}
.term-matrix{font-family:var(--mono);font-size:0.65rem;line-height:1.2;color:var(--green);margin:0.3rem 0;letter-spacing:0.05em;overflow:hidden;max-height:8em}
.term-cursor-end{display:inline-block;width:8px;height:1.1em;background:var(--green);animation:blink 1s step-end infinite;vertical-align:text-bottom}

/* ====== CINEMA ====== */
.cinema-section{padding:3rem 0 4rem}
.cinema-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;max-width:920px;margin:0 auto}
@media(max-width:768px){.cinema-grid{grid-template-columns:1fr;gap:1.5rem}}
.movie-quote{position:relative;padding:1.5rem 1.8rem;font-family:var(--mono);border:1px solid transparent;border-radius:16px;background:
  linear-gradient(155deg,rgba(7,12,24,0.92),rgba(10,6,20,0.88)) padding-box,
  linear-gradient(128deg,rgba(24,220,255,0.36),rgba(255,107,26,0.3),rgba(24,220,255,0.14)) border-box;
  background-size:100% 100%,230% 230%;box-shadow:0 0 20px rgba(24,220,255,0.06),0 0 30px rgba(255,107,26,0.04);transition:transform .3s ease,box-shadow .3s ease;animation:legacyBorderShift 16s linear infinite}
.movie-quote .qt{font-size:clamp(0.95rem,1.8vw,1.2rem);color:var(--text);font-style:italic;line-height:1.6;margin-bottom:0.7rem;transition:color .3s ease,text-shadow .3s ease}
.movie-quote .src{font-size:0.75rem;color:var(--muted);transition:color .3s ease}.movie-quote .src em{color:var(--cyan);font-style:normal}
.movie-quote.is-live{transform:translateY(-3px);box-shadow:0 0 34px rgba(24,220,255,0.18),0 0 55px rgba(255,107,26,0.08)}
.movie-quote.is-live .qt{color:#eefcff;text-shadow:0 0 14px rgba(24,220,255,0.2),0 0 22px rgba(255,107,26,0.08)}
.movie-quote.is-live .src{color:#ffd8bc}
.wireframe-wrap{width:160px;height:160px;margin:0 auto}
@media(max-width:768px){.wireframe-wrap{width:120px;height:120px}}
.multimon{max-width:920px;margin:2.5rem auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border:2px solid var(--dim);border-radius:4px;overflow:hidden;background:var(--dim)}
@media(max-width:640px){.multimon{grid-template-columns:repeat(2,1fr)}}
.mon{background:#000;padding:0.5rem 0.6rem;font-family:var(--mono);font-size:0.58rem;line-height:1.5;color:var(--green);height:130px;overflow:hidden;position:relative}
.mon::after{content:'';position:absolute;bottom:0;left:0;right:0;height:35px;background:linear-gradient(transparent,#000);pointer-events:none}
.mon.mc{color:var(--cyan)}.mon.mm{color:var(--magenta)}.mon.ma{color:var(--amber)}
.mon-label{font-size:0.5rem;color:var(--muted);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid var(--dim);padding-bottom:0.2rem}
@keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.mon-scroll{animation:scrollUp 25s linear infinite}

/* ====== HISTORY / INGREDIENTS ====== */
.history-cookbook-section{padding:2.35rem 0 3rem}
.history-intro{max-width:760px;margin:0 auto 1.5rem;font-size:0.9rem;color:var(--text);line-height:1.8}
.history-intro em{color:var(--cyan);font-style:normal}
.ingredients-visual{position:relative;max-width:920px;margin:0 auto 1.6rem;padding:0.55rem;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,0.45);overflow:hidden}
.ingredients-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.08),transparent);transform:translateX(-120%);animation:ingSweep 5s linear infinite;pointer-events:none}
@keyframes ingSweep{to{transform:translateX(120%)}}
#ingredientsCanvas{display:block;width:100%;height:150px}
.history-cookbook-section .history-intro,.glossary-section .history-intro{max-width:740px;margin:0 auto 1.05rem;font-size:0.84rem;line-height:1.65}
.ingredient-list{list-style:none;max-width:920px;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:0.8rem}
.ingredient-card{border:2px solid rgba(24,220,255,0.18);border-radius:8px;background:var(--panel);overflow:hidden;
  transition:border-color .3s,box-shadow .3s;box-shadow:0 0 18px rgba(24,220,255,0.04)}
.ingredient-card:hover{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.15),0 0 50px rgba(255,0,170,0.05)}
.ingredient-head{display:flex;align-items:center;gap:0.5rem;padding:0.62rem 0.85rem;border-bottom:1px solid var(--border);font-family:var(--mono)}
.year-pill{font-size:0.63rem;font-weight:700;color:var(--bg);background:var(--cyan);border-radius:3px;padding:0.14rem 0.38rem}
.ingredient-name{font-size:0.69rem;color:var(--magenta);letter-spacing:0.09em;text-transform:uppercase}
.ingredient-desc{padding:0.72rem 0.85rem 0.32rem;font-size:0.8rem;color:var(--text);line-height:1.58}
.ingredient-code{margin:0.46rem 0.85rem 0.85rem;padding:0.68rem 0.78rem;border-radius:6px;border:1px solid rgba(0,255,204,0.14);background:#05050b;font-family:var(--mono);font-size:0.67rem;line-height:1.5;color:var(--green);overflow-x:auto;white-space:pre}
.ingredient-code .cm{color:var(--muted)}.ingredient-code .kw{color:var(--cyan)}.ingredient-code .tx{color:var(--amber)}.ingredient-code .ok{color:var(--magenta)}

/* ====== LEGEND QUOTES ====== */
.legend-quotes-section{padding:3rem 0 4rem}
.quote-signal{max-width:920px;margin:0 auto 1.3rem;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(0,0,0,0.38)}
#quoteSignalCanvas{display:block;width:100%;height:130px}
.quote-wall{max-width:920px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem}
@media(max-width:1024px){.quote-wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.quote-wall{grid-template-columns:1fr}}
.legend-quote-card{position:relative;padding:1rem 1.05rem;border:2px solid rgba(24,220,255,0.2);border-radius:10px;background:linear-gradient(160deg,rgba(8,14,28,0.92),rgba(8,8,20,0.92));overflow:hidden;
  transition:transform .32s,border-color .3s,box-shadow .3s;box-shadow:0 0 20px rgba(24,220,255,0.05)}
.legend-quote-card::before{content:'';position:absolute;left:-35%;top:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.12),transparent);transform:skewX(-18deg)}
.legend-quote-card::after{content:'';position:absolute;right:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(90deg,rgba(24,220,255,0.15),rgba(24,220,255,0.15) 1px,transparent 1px,transparent 3px);opacity:0.6;pointer-events:none}
.legend-quote-card:hover{transform:translateY(-4px);border-color:rgba(24,220,255,0.55);box-shadow:0 0 40px rgba(24,220,255,0.18),0 0 60px rgba(255,0,170,0.08)}
.legend-quote-card.hot{border-color:rgba(0,255,204,0.55);box-shadow:0 0 30px rgba(0,255,204,0.2),0 0 50px rgba(0,255,204,0.1)}
.legend-quote-card.hot::before{animation:legendSweep 2.8s linear infinite}
@keyframes legendSweep{to{left:140%}}
.lq-text{font-size:0.9rem;color:var(--text);line-height:1.65;font-style:italic}
.lq-meta{margin-top:0.65rem;font-family:var(--mono);font-size:0.68rem;color:var(--magenta);letter-spacing:0.06em;text-transform:uppercase}

/* ====== GLOSSARY ====== */
.glossary-section{padding:2.35rem 0 3rem}
.glossary-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0.72rem}
@media(max-width:640px){.glossary-grid{grid-template-columns:1fr}}
.term-card{border:2px solid rgba(24,220,255,0.18);border-radius:10px;background:rgba(6,9,17,0.88);padding:0.72rem 0.82rem;
  transition:border-color .28s,box-shadow .28s,transform .28s;box-shadow:0 0 15px rgba(24,220,255,0.04)}
.term-card:hover{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.18),0 0 50px rgba(255,0,170,0.06);transform:translateY(-2px)}
.term-top{display:flex;align-items:center;gap:0.48rem;margin-bottom:0.42rem}
.term-icon{width:1.74rem;height:1.74rem;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;font-family:var(--mono);font-size:0.67rem;border:1px solid;letter-spacing:0.03em}
.ti-malware{color:#ff6b6b;border-color:#ff6b6b}.ti-adware{color:#ffd166;border-color:#ffd166}
.ti-trojan{color:#ff9f1c;border-color:#ff9f1c}.ti-shoulder{color:#b8c0d0;border-color:#b8c0d0}
.ti-phishing{color:#00d4ff;border-color:#00d4ff}.ti-ransom{color:#ff3e3e;border-color:#ff3e3e}
.ti-spyware{color:#8b5cf6;border-color:#8b5cf6}.ti-zeroday{color:#18dcff;border-color:#18dcff}
.ti-botnet{color:#00ff41;border-color:#00ff41}
.term-name{font-family:var(--mono);font-size:0.72rem;color:var(--cyan);text-transform:uppercase;letter-spacing:0.08em}
.term-def{font-size:0.78rem;color:var(--text);line-height:1.5}
.term-visual{margin-top:0.42rem;padding:0.42rem 0.52rem;border-radius:6px;background:#05050b;border:1px solid rgba(0,255,204,0.12);font-family:var(--mono);font-size:0.61rem;color:var(--green);overflow-x:auto}

/* ====== ZINES ====== */
.zines-section{padding:3rem 0 4rem}
.zine-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem}
@media(max-width:1024px){.zine-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.zine-grid{grid-template-columns:1fr}}
.zine-card{border:2px solid rgba(24,220,255,0.18);border-radius:10px;background:rgba(7,10,18,0.9);padding:0.9rem 1rem;
  transition:transform .3s,border-color .3s,box-shadow .3s;box-shadow:0 0 18px rgba(24,220,255,0.04)}
.zine-card:hover{transform:translateY(-3px);border-color:rgba(24,220,255,0.5);box-shadow:0 0 38px rgba(24,220,255,0.18),0 0 55px rgba(255,0,170,0.06)}
.zine-head{display:flex;justify-content:space-between;gap:0.5rem;align-items:center;margin-bottom:0.45rem}
.zine-rank{font-family:var(--mono);font-size:0.67rem;color:var(--magenta)}
.zine-cat{font-family:var(--mono);font-size:0.62rem;color:var(--amber);text-transform:uppercase;letter-spacing:0.08em}
.zine-name{font-family:var(--mono);font-size:0.95rem;color:var(--cyan);margin-bottom:0.35rem}
.zine-name a{color:inherit;text-decoration:none}.zine-name a:hover{text-shadow:0 0 8px var(--cyan)}
.zine-desc{font-size:0.82rem;color:var(--text);line-height:1.55}

/* ====== FOOTER ====== */
footer{text-align:center;padding:2rem 1rem 2.3rem;font-size:0.74rem;color:var(--muted);border-top:1px solid var(--border);font-family:var(--mono)}
footer p{max-width:980px;margin:0.25rem auto;line-height:1.65}
footer .foot-main{color:var(--text)}
footer .foot-sub{font-size:0.69rem;color:var(--muted)}
footer a{color:var(--cyan);text-decoration:none}footer a:hover{text-decoration:underline}
.cb-bottom-sentinel{display:block;width:100%;height:72px;margin-top:0.5rem;opacity:0;pointer-events:none}
.back-to-top-btn{position:fixed;left:clamp(0.8rem,2.5vw,1.4rem);bottom:clamp(0.8rem,2.5vw,1.4rem);z-index:10950;border:1px solid rgba(0,255,204,0.35);background:rgba(2,9,18,0.92);color:var(--cyan);font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.5rem 0.75rem;border-radius:999px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,border-color .22s ease,box-shadow .22s ease}
.back-to-top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top-btn:hover{border-color:var(--tron);box-shadow:0 0 12px rgba(24,220,255,0.18)}
.back-to-top-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ====== EFFECTS TOASTS (Phase 6) ====== */
.fx-toast-container{position:fixed;bottom:clamp(0.8rem,2.5vw,1.4rem);right:clamp(0.8rem,2.5vw,1.4rem);z-index:11000;display:flex;flex-direction:column-reverse;gap:0.5rem;pointer-events:none;max-width:min(400px,calc(100vw - 2rem))}
.fx-toast{pointer-events:auto;background:linear-gradient(140deg,rgba(8,14,28,0.94),rgba(8,8,20,0.94));border:2px solid rgba(0,255,204,0.3);border-radius:10px;padding:0.7rem 0.9rem;display:flex;align-items:flex-start;gap:0.6rem;font-family:var(--mono);font-size:0.72rem;color:var(--text);line-height:1.45;box-shadow:0 0 25px rgba(0,255,204,0.1),0 0 50px rgba(255,0,170,0.05);transform:translateX(110%);opacity:0;transition:transform .35s ease,opacity .35s ease;position:relative;overflow:hidden}
.fx-toast.show{transform:translateX(0);opacity:1}
.fx-toast::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.1),transparent);transform:translateX(-120%);animation:fxSweep 3s linear infinite;pointer-events:none}
@keyframes fxSweep{to{transform:translateX(120%)}}
.fx-toast-icon{flex:0 0 auto;color:var(--tron);font-size:0.9rem}
.fx-toast-body{flex:1;min-width:0}
.fx-toast-label{font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--magenta);margin-bottom:0.15rem}
.fx-toast-msg{color:var(--text)}
.fx-toast-close{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 0.2rem;line-height:1}
.fx-toast-close:hover{color:var(--text)}
.fx-toast-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ====== PUZZLE AREAS (Phase 7) ====== */
.puzzle-unlock-area{margin:1.5rem 0;border:1px dashed rgba(0,255,204,0.2);border-radius:10px;padding:1.2rem;text-align:center;background:rgba(0,0,0,0.2)}
.puzzle-unlock-area.solved{border-style:solid;border-color:rgba(0,255,204,0.3);background:rgba(0,255,204,0.03)}
.puzzle-unlock-area-hero{padding:1.45rem;background:linear-gradient(165deg,rgba(4,10,22,0.9),rgba(7,3,18,0.88));box-shadow:0 0 30px rgba(24,220,255,0.08),0 0 60px rgba(255,0,170,0.05)}
.puzzle-title{font-family:var(--mono);font-size:0.82rem;color:var(--cyan);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.08em}
.puzzle-desc{font-size:0.78rem;color:var(--muted);margin-bottom:0.8rem}
.puzzle-content{display:none}
.puzzle-unlock-area.solved .puzzle-content{display:block}
.puzzle-unlock-area.solved .puzzle-game{display:none}
.puzzle-solved-badge{display:none;font-family:var(--mono);font-size:0.68rem;color:var(--green);margin-bottom:0.5rem}
.puzzle-unlock-area.solved .puzzle-solved-badge{display:block}
.forge-section{padding:2.6rem 0 3.3rem}
.forge-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,0.65fr);gap:1rem;align-items:stretch}
.forge-canvas-shell{padding:0;min-height:540px}
#inviteForgeCanvas{display:block;width:100%;height:540px;cursor:crosshair}
.forge-overlay{position:absolute;inset:auto 1rem 1rem 1rem;display:flex;gap:0.55rem;flex-wrap:wrap;z-index:2}
.forge-overlay-chip{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text);padding:0.42rem 0.65rem;border-radius:999px;background:rgba(4,12,24,0.82);border:1px solid rgba(24,220,255,0.18);backdrop-filter:blur(10px)}
.forge-sidecar{padding:1rem 1rem 1.1rem;display:grid;gap:0.85rem;align-content:start}
.forge-side-head{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;font-family:var(--mono);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase}
.forge-kicker{color:var(--magenta)}
.forge-latency{color:var(--muted)}
.forge-code-output{padding:0.9rem;border-radius:14px;background:rgba(2,10,18,0.9);border:1px solid rgba(24,220,255,0.14);font-family:var(--mono);font-size:0.95rem;color:var(--cyan);letter-spacing:0.12em;text-shadow:0 0 10px rgba(24,220,255,0.28)}
.forge-actions{display:flex;gap:0.55rem;flex-wrap:wrap;justify-content:center}
.forge-trace-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.45rem}
.forge-trace-list div{padding:0.55rem 0.4rem;border-radius:10px;border:1px solid rgba(24,220,255,0.12);background:rgba(255,255,255,0.02);font-family:var(--mono);font-size:0.68rem;color:var(--muted)}
.forge-trace-list .armed{border-color:rgba(0,255,204,0.35);color:var(--green);box-shadow:0 0 18px rgba(0,255,204,0.1)}
.forge-trace-list .next{border-color:rgba(255,0,170,0.32);color:#ffd1f1}
.forge-success-copy{font-family:var(--mono);font-size:0.8rem;color:var(--green);line-height:1.7}
/* Puzzle A: checksum grid */
.checksum-grid{display:grid;grid-template-columns:repeat(6,minmax(36px,44px));gap:4px;justify-content:center;margin:0.8rem 0}
.checksum-cell{width:100%;aspect-ratio:1;border:1px solid var(--border);border-radius:6px;background:rgba(5,5,15,0.9);color:var(--text);font-family:var(--mono);font-size:0.82rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;user-select:none}
.checksum-cell:hover{border-color:rgba(24,220,255,0.4)}
.checksum-cell:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.checksum-cell.hint{box-shadow:0 0 8px rgba(0,255,204,0.25);border-color:rgba(0,255,204,0.4)}
.checksum-cell.selected{background:rgba(0,255,204,0.15);border-color:var(--cyan);color:var(--cyan)}
.checksum-cell.wrong{background:rgba(255,62,62,0.15);border-color:var(--red)}
.checksum-status{font-family:var(--mono);font-size:0.68rem;color:var(--muted);text-align:center;margin-top:0.5rem;min-height:1.2em}
/* Puzzle B: pattern match */
.pattern-options{display:flex;gap:0.6rem;justify-content:center;flex-wrap:wrap;margin:0.8rem 0}
.pattern-opt{border:1px solid var(--border);border-radius:10px;background:rgba(5,5,15,0.9);padding:0.6rem 1rem;font-family:var(--mono);font-size:0.78rem;color:var(--text);cursor:pointer;transition:all .2s;min-width:100px;text-align:center}
.pattern-opt:hover{border-color:rgba(24,220,255,0.4);transform:translateY(-2px)}
.pattern-opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pattern-opt.correct{border-color:var(--green);background:rgba(0,255,65,0.1);color:var(--green)}
.pattern-opt.wrong{border-color:var(--red);background:rgba(255,62,62,0.1);color:var(--red)}
.phishing-options{flex-direction:column;align-items:stretch}
.phishing-options .phishing-opt{min-width:100%;text-align:left;white-space:normal;line-height:1.4;padding:0.7rem 1rem}
/* Puzzle C: decrypt slider */
.decrypt-dials{display:flex;gap:1rem;justify-content:center;align-items:center;margin:0.8rem 0;flex-wrap:wrap}
.dial-group{display:flex;flex-direction:column;align-items:center;gap:0.3rem}
.dial-label{font-family:var(--mono);font-size:0.6rem;color:var(--muted);text-transform:uppercase}
.dial-input{width:60px;text-align:center;padding:0.4rem;border-radius:8px;border:1px solid var(--border);background:rgba(5,5,15,0.9);color:var(--cyan);font-family:var(--mono);font-size:0.9rem;outline:none}
.dial-input:focus{border-color:rgba(0,255,204,0.5);box-shadow:0 0 12px rgba(0,255,204,0.1)}
.dial-target{font-family:var(--mono);font-size:0.78rem;color:var(--amber);margin-bottom:0.5rem}
/* Puzzle D: port scan */
.port-scan-row{display:flex;gap:0.6rem;justify-content:center;align-items:center;margin:0.8rem 0;flex-wrap:wrap}
.port-btn{border:1px solid var(--border);border-radius:10px;background:rgba(5,5,15,0.9);padding:0.6rem 1rem;font-family:var(--mono);font-size:0.78rem;color:var(--muted);cursor:pointer;transition:all .2s;min-width:72px;text-align:center}
.port-btn:hover{border-color:rgba(24,220,255,0.4);color:var(--text)}
.port-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.port-btn.open{border-color:var(--green);background:rgba(0,255,65,0.12);color:var(--green);box-shadow:0 0 8px rgba(0,255,65,0.2)}
.port-target{font-family:var(--mono);font-size:0.78rem;color:var(--amber);margin-bottom:0.5rem}
.unscramble-grid{display:grid;gap:0.4rem;grid-template-columns:repeat(4,minmax(46px,56px))}
.math-prompt{font-family:var(--mono);font-size:0.82rem;color:var(--amber);margin-bottom:0.55rem}
.math-options .math-opt{min-width:68px}
.math-opt.wrong{animation:mathFlash .35s ease}
@keyframes mathFlash{0%{box-shadow:0 0 0 rgba(255,62,62,0)}50%{box-shadow:0 0 18px rgba(255,62,62,0.45)}100%{box-shadow:0 0 0 rgba(255,62,62,0)}}

/* Latest CVEs + OSINT modules */
.cves-section,.osint-section{padding:2.4rem 0 3rem}
.cve-list{list-style:none;max-width:920px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0.72rem;padding:0}
@media(max-width:820px){.cve-list{grid-template-columns:1fr}}
.cve-card{border:2px solid rgba(24,220,255,0.18);border-radius:10px;background:rgba(7,11,20,0.9);padding:0.78rem 0.9rem;
  transition:border-color .26s,box-shadow .26s,transform .26s;box-shadow:0 0 18px rgba(24,220,255,0.04)}
.cve-card:hover{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.18),0 0 50px rgba(255,0,170,0.06);transform:translateY(-2px)}
.cve-top{display:flex;align-items:center;gap:0.45rem;margin-bottom:0.4rem}
.cve-id{font-family:var(--mono);font-size:0.77rem;color:var(--cyan);letter-spacing:0.06em;text-transform:uppercase}
.cve-cite{font-family:var(--mono);font-size:0.66rem;color:var(--amber);cursor:help}
.cve-desc{font-size:0.8rem;line-height:1.58;color:var(--text)}

.osint-grid{max-width:940px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0.8rem}
@media(max-width:860px){.osint-grid{grid-template-columns:1fr}}
.osint-card{border:2px solid rgba(24,220,255,0.18);border-radius:10px;background:rgba(6,10,18,0.9);padding:0.9rem 0.95rem;display:flex;flex-direction:column;gap:0.42rem;
  transition:border-color .26s,box-shadow .26s;box-shadow:0 0 18px rgba(24,220,255,0.04)}
.osint-card:hover{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.18),0 0 50px rgba(255,0,170,0.06)}
.osint-name{font-family:var(--mono);font-size:0.88rem;color:var(--cyan);letter-spacing:0.04em}
.osint-desc{font-size:0.79rem;line-height:1.55;color:var(--text)}
.osint-link{--link-border:var(--tron);--link-glow:rgba(24,220,255,0.28);display:inline-flex;align-items:center;justify-content:center;gap:0.3rem;margin-top:0.25rem;align-self:flex-start;text-decoration:none;font-family:var(--mono);font-size:0.67rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--link-border);border-radius:999px;padding:0.43rem 0.72rem;background:rgba(2,10,20,0.8);transition:border-color .24s,box-shadow .24s,color .24s,transform .2s}
.osint-link:hover,.osint-link:focus-visible{--link-border:var(--orange);--link-glow:rgba(255,107,26,0.35);color:#ffd7bf;box-shadow:0 0 16px var(--link-glow),0 0 28px rgba(255,107,26,0.2);transform:translateY(-1px)}
.osint-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ====== PACKET OVER THE WIRE (Tron/Matrix graphical) ====== */
.packet-over-wire-section{padding:3rem 0 4rem}
.packet-intro{max-width:780px;margin:0 auto 1.5rem;font-size:0.9rem;color:var(--text);line-height:1.75}
.packet-grid-visual{position:relative;max-width:920px;margin:0 auto 2rem;border-radius:12px;overflow:hidden;min-height:320px}
#packetGridCanvas{display:block;width:100%;height:320px;background:linear-gradient(180deg,#020208 0%,#050512 50%,#020208 100%)}
.packet-overlay-info{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem}
.packet-node{font-family:var(--mono);font-size:0.72rem;font-weight:700;letter-spacing:0.2em;color:var(--tron);text-shadow:0 0 12px var(--tron),0 0 24px rgba(24,220,255,0.5);animation:packetNodePulse 2s ease-in-out infinite}
.packet-src{align-self:flex-start}
.packet-dst{align-self:flex-end;color:var(--orange);text-shadow:0 0 12px var(--orange),0 0 24px rgba(255,107,26,0.42)}
.packet-node::after{content:attr(data-label);display:block;font-size:0.5rem;letter-spacing:0.15em;color:var(--muted);margin-top:0.2rem}
@keyframes packetNodePulse{0%,100%{opacity:0.85}50%{opacity:1;text-shadow:0 0 16px var(--tron),0 0 32px rgba(24,220,255,0.6)}}
.packet-flow-label{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:0.58rem;letter-spacing:0.25em;color:#deedf8;opacity:0.88;text-shadow:0 0 10px rgba(24,220,255,0.2)}
.packet-forensic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:920px;margin:0 auto}
@media(max-width:768px){.packet-forensic-grid{grid-template-columns:1fr}}
.packet-forensic-card{padding:1.2rem 1.3rem;border-radius:12px;transition:border-color .3s,box-shadow .3s,transform .3s}
.packet-forensic-card:hover{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.15);transform:translateY(-2px)}
.pf-icon{font-size:1.8rem;margin-bottom:0.5rem;filter:drop-shadow(0 0 8px rgba(24,220,255,0.4))}
.pf-title{font-family:var(--mono);font-size:0.88rem;color:var(--cyan);letter-spacing:0.06em;margin-bottom:0.6rem;text-transform:uppercase}
.pf-desc{font-size:0.82rem;color:var(--text);line-height:1.6;margin-bottom:0.8rem}
.pf-desc code{background:rgba(0,255,204,0.08);padding:0.1rem 0.35rem;border-radius:4px;font-size:0.75rem;color:var(--tron)}
.pf-code{padding:0.7rem 0.9rem;border-radius:8px;background:#05050b;border:1px solid rgba(24,220,255,0.15);font-family:var(--mono);font-size:0.68rem;color:var(--green);line-height:1.5;overflow-x:auto}
.stego-demo{margin-top:0.8rem}
.stego-canvas-wrap{position:relative;display:inline-block;border:1px solid rgba(24,220,255,0.2);border-radius:8px;overflow:hidden;box-shadow:0 0 20px rgba(24,220,255,0.08)}
#stegoCanvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.stego-hint{display:block;font-family:var(--mono);font-size:0.55rem;letter-spacing:0.12em;color:var(--muted);text-align:center;padding:0.4rem;background:rgba(0,0,0,0.4)}
.kismet-visual{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:0.8rem;align-items:center}
#kismetSignalCanvas{display:block;width:100%;height:auto;border-radius:12px;border:1px solid rgba(24,220,255,0.14);background:radial-gradient(circle at 50% 50%,rgba(6,18,32,0.94),rgba(2,4,12,0.94))}
.kismet-list{display:grid;gap:0.45rem}
.kismet-list div{display:grid;gap:0.18rem;padding:0.55rem 0.65rem;border-radius:10px;border:1px solid rgba(24,220,255,0.14);background:rgba(2,9,18,0.75)}
.kismet-list span{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.18em;color:var(--amber)}
.kismet-list strong{font-family:var(--mono);font-size:0.72rem;color:var(--cyan)}
.kismet-list em{font-size:0.68rem;color:var(--muted);font-style:normal}
.threat-lab-section{padding:2.5rem 0 3rem}
.threat-lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:980px;margin:0 auto}
.threat-lab-card{padding:1rem 1rem 1.1rem;display:grid;gap:0.7rem;align-content:start}
.threat-lab-icon{font-size:1.7rem;filter:drop-shadow(0 0 10px rgba(24,220,255,0.4))}
.threat-demo-actions{display:flex;justify-content:center}
.homoglyph-surface{display:grid;gap:0.55rem;padding:1rem;border-radius:12px;border:1px solid rgba(24,220,255,0.14);background:rgba(2,8,18,0.78)}
.homoglyph-domain{font-family:var(--mono);font-size:1rem;color:var(--cyan);letter-spacing:0.06em;word-break:break-word}
.homoglyph-status{font-size:0.74rem;color:var(--muted);line-height:1.6}
.honeytoken-console{padding:0.9rem;border-radius:12px;border:1px solid rgba(24,220,255,0.14);background:#05050b;font-family:var(--mono);font-size:0.7rem;line-height:1.7;color:var(--green)}
@media(max-width:1024px){
  .boot-grid,.forge-grid{grid-template-columns:1fr}
  .boot-intel-grid{grid-template-columns:1fr}
  .fingerprint-gate{grid-template-columns:1fr}
  .threat-lab-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .ra-analyze{bottom:-4rem}
  .kismet-visual{grid-template-columns:1fr}
  .forge-trace-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  #inviteForgeCanvas{height:420px}
  .boot-shell{padding:0.8rem}
}

/* ====== SETTINGS PANEL (Phase 9) ====== */
.settings-overlay{position:fixed;inset:0;z-index:15000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.settings-overlay.open{display:flex}
.settings-panel{width:min(440px,calc(100vw - 2rem));max-height:80vh;overflow-y:auto;border-radius:16px;border:2px solid rgba(24,220,255,0.3);background:linear-gradient(160deg,rgba(8,14,28,0.96),rgba(8,8,20,0.94));box-shadow:0 0 60px rgba(0,255,204,0.1),0 0 100px rgba(255,0,170,0.05),inset 0 0 40px rgba(24,220,255,0.02);padding:1.5rem}
.settings-title{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--cyan);margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.1em}
.settings-group{margin-bottom:1rem}
.settings-group-label{font-family:var(--mono);font-size:0.68rem;color:var(--magenta);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border)}
.settings-row-label{font-family:var(--mono);font-size:0.76rem;color:var(--text)}
.settings-toggle{position:relative;width:36px;height:20px;border-radius:10px;border:1px solid var(--border);background:rgba(5,5,15,0.9);cursor:pointer;transition:all .22s}
.settings-toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:all .22s}
.settings-toggle.on{border-color:var(--cyan);background:rgba(0,255,204,0.15)}
.settings-toggle.on::after{left:18px;background:var(--cyan)}
.settings-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.settings-select{font-family:var(--mono);font-size:0.72rem;padding:0.35rem 0.6rem;border-radius:8px;border:1px solid var(--border);background:rgba(5,5,15,0.9);color:var(--text);cursor:pointer;min-width:100px}
.settings-select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.settings-btn-action{font-family:var(--mono);font-size:0.68rem;padding:0.35rem 0.8rem;border-radius:999px;border:1px solid var(--border);background:rgba(5,5,15,0.9);color:var(--text);cursor:pointer;transition:all .22s}
.settings-btn-action:hover{border-color:var(--cyan);color:var(--cyan)}
.settings-btn-action:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.settings-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer}
.settings-close:hover{color:var(--text)}

/* ====== CYBER PUZZLE (existing bottom reveal) ====== */
.cb-bottom-sentinel{height:72px}
.cb-toast{position:fixed;right:clamp(0.8rem,2.5vw,1.4rem);bottom:clamp(0.8rem,2.5vw,1.4rem);z-index:11001;width:min(420px,calc(100vw - 2rem));background:linear-gradient(140deg,rgba(8,14,28,0.92),rgba(8,8,20,0.92));border:1px solid rgba(0,255,204,0.22);border-radius:12px;overflow:hidden;box-shadow:0 0 22px rgba(0,255,204,0.08);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .38s ease,opacity .38s ease;contain:layout paint style}
.cb-toast.on{transform:translateY(0);opacity:1;pointer-events:auto}
.cb-toast::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.12),transparent);transform:translateX(-120%);animation:cbSweep 3.8s linear infinite}
@keyframes cbSweep{to{transform:translateX(120%)}}
.cb-toast-inner{position:relative;padding:0.95rem 1rem 0.9rem;display:flex;gap:0.85rem;align-items:flex-start}
.cb-toast-icon{width:34px;height:34px;border-radius:10px;flex:0 0 auto;border:1px solid rgba(24,220,255,0.35);background:rgba(0,0,0,0.35);box-shadow:0 0 18px rgba(24,220,255,0.08) inset;display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--tron);text-shadow:0 0 10px rgba(24,220,255,0.35)}
.cb-toast-title{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--magenta);margin-bottom:0.2rem}
.cb-toast-desc{font-size:0.82rem;color:var(--text);line-height:1.45}
.cb-toast-actions{display:flex;gap:0.55rem;margin-top:0.7rem;flex-wrap:wrap}
.cb-mini-btn{border:1px solid rgba(0,255,204,0.26);background:rgba(2,9,18,0.85);color:var(--cyan);font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.45rem 0.7rem;border-radius:999px;cursor:pointer;transition:transform .18s,border-color .22s,box-shadow .22s}
.cb-mini-btn:hover{transform:translateY(-1px);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,255,204,0.16)}
.cb-mini-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cb-mini-btn.secondary{border-color:rgba(24,220,255,0.18);color:var(--tron)}
.cb-mini-btn.secondary:hover{border-color:var(--tron);box-shadow:0 0 12px rgba(24,220,255,0.14)}
.cb-backdrop{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;padding:clamp(0.9rem,3vw,2rem);background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cb-backdrop.on{display:flex}
.cb-modal{width:min(960px,100%);max-height:min(86vh,820px);overflow:hidden;border-radius:16px;border:1px solid rgba(24,220,255,0.22);background:linear-gradient(160deg,rgba(8,14,28,0.96),rgba(8,8,20,0.94));box-shadow:0 0 60px rgba(0,255,204,0.06);transform:translateY(16px) scale(0.985);opacity:0;transition:transform .35s ease,opacity .35s ease;will-change:transform,opacity;contain:layout paint style}
.cb-backdrop.on .cb-modal{transform:translateY(0) scale(1);opacity:1}
.cb-modal::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px);opacity:0.55}
.cb-modal::after{content:'';position:absolute;left:-35%;top:0;width:35%;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.16),transparent);transform:skewX(-18deg);animation:cbSweep2 3.2s linear infinite}
@keyframes cbSweep2{to{left:140%}}
.cb-head{position:relative;z-index:1;display:flex;align-items:center;gap:0.8rem;padding:0.95rem 1.1rem;border-bottom:1px solid rgba(0,255,204,0.12);background:rgba(0,0,0,0.35)}
.cb-head-title{flex:1;min-width:0}
.cb-kicker{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--magenta)}
.cb-title{font-family:var(--mono);font-size:1.02rem;font-weight:800;color:var(--cyan);letter-spacing:0.06em;margin-top:0.18rem;text-shadow:0 0 10px rgba(0,255,204,0.25)}
.cb-close{border:1px solid rgba(24,220,255,0.22);background:rgba(2,9,18,0.85);color:var(--tron);width:40px;height:36px;border-radius:10px;cursor:pointer;transition:transform .18s,border-color .22s}
.cb-close:hover{transform:translateY(-1px);border-color:var(--tron)}
.cb-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cb-body{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;padding:1rem 1.1rem 1.1rem;overflow:auto;max-height:calc(min(86vh,820px) - 70px)}
@media(max-width:860px){.cb-body{grid-template-columns:1fr}}
.cb-panel{border:1px solid rgba(0,255,204,0.12);border-radius:12px;background:rgba(0,0,0,0.28);overflow:hidden}
.cb-panel-h{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.7rem 0.85rem;border-bottom:1px solid rgba(0,255,204,0.1);font-family:var(--mono);font-size:0.68rem}
.cb-panel-h .l{color:var(--amber);letter-spacing:0.08em;text-transform:uppercase}
.cb-panel-h .r{color:var(--muted)}
.cb-code{padding:0.85rem 0.9rem;font-family:var(--mono);font-size:0.73rem;line-height:1.65;color:var(--green);white-space:pre-wrap;word-break:break-word}
.cb-code .dim{color:var(--muted)}
.cb-console{padding:0.85rem 0.9rem}
.cb-step{display:flex;gap:0.6rem;align-items:flex-start;margin-bottom:0.7rem}
.cb-step-num{width:26px;height:26px;border-radius:8px;flex:0 0 auto;border:1px solid rgba(0,255,204,0.22);background:rgba(0,255,204,0.08);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.7rem;color:var(--cyan)}
.cb-step-text{flex:1;min-width:0}
.cb-step-text b{color:var(--cyan);font-family:var(--mono);font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase}
.cb-step-text p{margin-top:0.2rem;font-size:0.82rem;color:var(--text);line-height:1.45}
.cb-field{margin-top:0.75rem}
.cb-field label{display:block;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--magenta);margin-bottom:0.4rem}
.cb-input{width:100%;padding:0.78rem 0.9rem;border-radius:10px;outline:none;background:#05050b;border:1px solid rgba(24,220,255,0.18);color:var(--cyan);font-family:var(--mono);font-size:0.78rem;transition:border-color .22s,box-shadow .22s}
.cb-input:focus{border-color:rgba(0,255,204,0.65);box-shadow:0 0 16px rgba(0,255,204,0.14)}
.cb-tools{display:flex;gap:0.55rem;flex-wrap:wrap;margin-top:0.75rem}
.cb-out{margin-top:0.75rem;border:1px solid rgba(0,255,204,0.12);border-radius:10px;background:rgba(0,0,0,0.28);padding:0.75rem 0.85rem;font-family:var(--mono);font-size:0.72rem;line-height:1.6;color:var(--text)}
.cb-out .ok{color:var(--green)}.cb-out .warn{color:var(--amber)}.cb-out .bad{color:var(--red)}.cb-out .hl{color:var(--cyan)}
.cb-fp{margin-top:0.55rem;color:var(--muted);font-family:var(--mono);font-size:0.68rem}
.cb-contact{margin-top:0.8rem;padding-top:0.8rem;border-top:1px dashed rgba(24,220,255,0.2)}
.cb-contact .cb-out{margin-top:0.55rem}
.cb-body::-webkit-scrollbar{width:10px}
.cb-body::-webkit-scrollbar-track{background:rgba(0,0,0,0.22)}
.cb-body::-webkit-scrollbar-thumb{background:rgba(24,220,255,0.18);border-radius:10px}

/* ====== LOCK HISTORY & CYBERSECURITY ====== */
.lock-history-section{padding:2.4rem 0 3rem}
.lock-history-section .history-intro{max-width:780px;margin:0 auto 1.3rem;font-size:0.88rem;line-height:1.78}
.lock-history-section .history-intro em{color:var(--cyan);font-style:normal}
.lock-history-section .history-intro strong{color:var(--orange)}
.lh-subhead{font-family:var(--mono);font-size:clamp(0.82rem,1.5vw,1rem);color:var(--cyan);text-transform:uppercase;letter-spacing:0.1em;margin:2.2rem 0 1rem;padding-bottom:0.4rem;border-bottom:1px solid rgba(0,255,204,0.15);max-width:780px;margin-left:auto;margin-right:auto}
.lh-subhead span{color:var(--magenta)}
.lh-timeline{list-style:none;max-width:780px;margin:0 auto 2rem;padding:0 0 0 2.2rem;position:relative}
.lh-timeline::before{content:'';position:absolute;left:0.55rem;top:0.2rem;bottom:0.2rem;width:2px;background:linear-gradient(180deg,var(--tron),var(--cyan),var(--orange),var(--tron));background-size:100% 180%;border-radius:2px;opacity:0.7;animation:timelineFlux 6s linear infinite}
@keyframes timelineFlux{0%{background-position:0 0}100%{background-position:0 180%}}
.lh-timeline li{position:relative;margin-bottom:1.1rem;padding:0.95rem 1rem 0.95rem 1.2rem;border:1px solid rgba(24,220,255,0.14);border-radius:16px;background:linear-gradient(150deg,rgba(6,10,20,0.78),rgba(10,6,18,0.84));box-shadow:0 0 18px rgba(24,220,255,0.05),0 0 32px rgba(255,107,26,0.03);overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.lh-timeline li::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent,rgba(24,220,255,0.08),rgba(255,107,26,0.08),transparent);transform:translateX(-120%) skewX(-18deg)}
.lh-timeline li:hover,.lh-timeline li.reveal.visible{border-color:rgba(24,220,255,0.32);box-shadow:0 0 28px rgba(24,220,255,0.1),0 0 42px rgba(255,107,26,0.05);transform:translateY(-2px)}
.lh-timeline li:hover::after,.lh-timeline li.reveal.visible::after{animation:heroHudSweep 6.8s linear infinite}
.lh-timeline li::before{content:'';position:absolute;left:-1.95rem;top:1.05rem;width:10px;height:10px;border-radius:50%;border:2px solid var(--cyan);background:var(--bg);box-shadow:0 0 8px rgba(0,255,204,0.35);z-index:1}
.lh-timeline .tl-year{display:inline-block;font-family:var(--mono);font-size:0.63rem;font-weight:700;color:var(--bg);background:var(--orange);border-radius:3px;padding:0.12rem 0.38rem;margin-right:0.45rem;vertical-align:middle}
.lh-timeline .tl-title{font-family:var(--mono);font-size:0.78rem;color:var(--cyan);letter-spacing:0.04em}
.lh-timeline .tl-desc{font-size:0.82rem;color:var(--text);line-height:1.62;margin-top:0.25rem}
.lh-timeline .tl-desc em{color:var(--amber);font-style:normal}

.lh-analogy-table{max-width:780px;margin:0 auto 2rem;border:1px solid var(--border);border-radius:10px;overflow-x:auto;overflow-y:hidden;background:rgba(6,9,17,0.88)}
.lh-analogy-table table{width:100%;border-collapse:collapse}
.lh-analogy-table thead th{font-family:var(--mono);font-size:0.68rem;color:var(--magenta);text-transform:uppercase;letter-spacing:0.1em;padding:0.7rem 0.9rem;border-bottom:1px solid rgba(0,255,204,0.18);text-align:left;background:rgba(0,0,0,0.3)}
.lh-analogy-table tbody td{font-size:0.82rem;color:var(--text);padding:0.55rem 0.9rem;border-bottom:1px solid rgba(0,255,204,0.06);line-height:1.5}
.lh-analogy-table tbody tr:last-child td{border-bottom:none}
.lh-analogy-table tbody td:first-child{font-family:var(--mono);color:var(--cyan);font-size:0.78rem;white-space:nowrap}
.lh-analogy-table .arrow-col{color:var(--orange);text-align:center;font-family:var(--mono);font-size:0.75rem;width:3rem}

.lh-figure-grid{max-width:780px;margin:0 auto 2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:0.8rem}
@media(max-width:640px){.lh-figure-grid{grid-template-columns:1fr}}
.lh-figure-card{border:2px solid rgba(24,220,255,0.2);border-radius:10px;background:linear-gradient(160deg,rgba(8,14,28,0.92),rgba(8,8,20,0.92));padding:0.9rem 1rem;transition:border-color .28s,box-shadow .28s,transform .28s;position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(24,220,255,0.05)}
.lh-figure-card::before{content:'';position:absolute;left:-35%;top:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.08),transparent);transform:skewX(-18deg);pointer-events:none}
.lh-figure-card:hover{border-color:rgba(24,220,255,0.55);box-shadow:0 0 40px rgba(24,220,255,0.18),0 0 55px rgba(255,0,170,0.08);transform:translateY(-2px)}
.lh-figure-card:hover::before{animation:legendSweep 2.8s linear infinite}
.lh-figure-card .lh-fig-head{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.45rem}
.lh-figure-card .lh-fig-icon{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--cyan);font-size:0.95rem;background:rgba(0,255,204,0.06);flex:0 0 auto}
.lh-figure-card .lh-fig-name{font-family:var(--mono);font-size:0.82rem;color:var(--cyan);letter-spacing:0.05em;text-transform:uppercase}
.lh-figure-card .lh-fig-era{font-family:var(--mono);font-size:0.58rem;color:var(--amber);letter-spacing:0.08em}
.lh-figure-card .lh-fig-bio{font-size:0.8rem;color:var(--text);line-height:1.58;margin-top:0.2rem}
.lh-figure-card .lh-fig-bio em{color:var(--green);font-style:normal}

.lh-quote-block{max-width:780px;margin:0 auto 2rem;padding:1.3rem 1.5rem;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;background:linear-gradient(135deg,rgba(0,255,204,0.04),rgba(8,8,20,0.85));position:relative;overflow:hidden}
.lh-quote-block::after{content:'';position:absolute;right:-20%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,220,255,0.06),transparent);transform:skewX(-18deg);pointer-events:none}
.lh-quote-block .lh-qt{font-size:1rem;color:var(--text);font-style:italic;line-height:1.7;margin-bottom:0.5rem}
.lh-quote-block .lh-qt-cite{font-family:var(--mono);font-size:0.72rem;color:var(--magenta);letter-spacing:0.06em}

.lh-insight-list{max-width:780px;margin:0 auto 2rem;padding:0;list-style:none}
.lh-insight-list li{position:relative;padding:0.5rem 0 0.5rem 1.4rem;font-size:0.84rem;color:var(--text);line-height:1.65;border-bottom:1px solid rgba(0,255,204,0.06)}
.lh-insight-list li:last-child{border-bottom:none}
.lh-insight-list li::before{content:'\25B8';position:absolute;left:0;top:0.5rem;color:var(--orange);font-size:0.82rem}
.lh-insight-list li em{color:var(--cyan);font-style:normal}
.lh-insight-list li strong{color:var(--amber)}

.lh-archives-note{max-width:780px;margin:0 auto 1rem;padding:1rem 1.2rem;border:1px dashed rgba(255,107,26,0.3);border-radius:10px;background:rgba(255,107,26,0.03);font-size:0.82rem;color:var(--text);line-height:1.65}
.lh-archives-note strong{color:var(--orange)}
.lh-archives-note em{color:var(--cyan);font-style:normal}

.lh-ethics-list{max-width:780px;margin:0 auto 2rem;padding:0;list-style:none}
.lh-ethics-list li{padding:0.55rem 0 0.55rem 1.6rem;font-size:0.84rem;color:var(--text);line-height:1.62;position:relative}
.lh-ethics-list li::before{content:'\2726';position:absolute;left:0.1rem;top:0.55rem;color:var(--green);font-size:0.78rem}
.lh-ethics-list li em{color:var(--amber);font-style:normal}
.lh-ethics-list li strong{color:var(--cyan)}

/* ====== UTILITIES ====== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{transition-duration:.2s}}
.loading-msg{text-align:center;font-family:var(--mono);color:var(--muted);font-size:0.85rem;padding:3rem 0;grid-column:1/-1}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--dim);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite;margin-right:0.5rem;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ====== RESPONSIVE ====== */
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:1.3rem;text-align:center}
  .hero-copy{transform:none}
  .hero-sub{max-width:none;margin-left:auto;margin-right:auto}
  .typer-wrap,.hero-btns,.hero-meta-strip{justify-content:center}
  .hero-visual-shell{max-width:760px;width:100%;margin:0 auto}
  .hero-data-rail{grid-template-columns:1fr}
  .top-bar{padding:0.38rem 0.42rem 0.44rem;gap:0.36rem}
  .music-now-playing{min-width:100%;text-align:center;align-items:center}
  .music-track-title{font-size:0.54rem}
  .music-track-sub{font-size:0.45rem}
}
@media(max-width:640px){
  .hero{padding:9.2rem 0 2rem}
  .hero::after{left:4%;right:4%}
  .hero-energy-lanes{display:none}
  .hero-identity-glow{width:88vw;height:88vw}
  .hero-inner{padding:1.35rem 1rem;gap:1rem}
  .glitch{font-size:clamp(2.2rem,10vw,3.2rem)}
  .hero-meta-strip{gap:0.45rem;margin-bottom:1.15rem}
  .hero-meta-chip{font-size:0.52rem;padding:0.4rem 0.56rem}
  .hero-visual-shell{padding:0.72rem;min-height:auto}
  .hero-visual-badge{font-size:0.5rem;letter-spacing:0.12em}
  .hero-visual-hud,.hero-data-rail{grid-template-columns:1fr}
  .hero-stats-circuit{height:28px;width:min(100%,calc(100vw - 1rem))}
  .stats-holo-frame{padding:0.95rem 0.9rem 0.88rem}
  .stats-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7rem 0.8rem}
  .stat-sep{display:none}
  .stat-item{justify-content:center}
  .top-bar-wrap{top:0.3rem;padding:0 0.36rem}
  .top-bar{border-radius:12px;padding:0.38rem 0.34rem 0.4rem;gap:0.28rem}
  .top-bar-label{font-size:0.46rem;letter-spacing:0.12em}
  .music-transport{padding:0.14rem 0.2rem;gap:0.3rem}
  .music-nav-btn{min-width:42px;min-height:42px}
  .music-playpause-btn{min-width:48px;min-height:42px}
  .music-now-playing{width:100%;max-width:100%;text-align:center;align-items:center;padding:0.08rem 0}
  .music-track-title{font-size:0.5rem}
  .music-track-sub{font-size:0.42rem}
  .music-meta{justify-content:center;gap:0.26rem 0.5rem;padding:0.02rem 0.1rem 0}
  .music-status,.music-fallback,.music-track-indicator{font-size:0.5rem}
  .music-panel-toggle{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:36px;font-size:0.5rem;letter-spacing:0.08em}
  .top-bar.audio-collapsed .music-panel-toggle{width:auto;min-height:28px}
  .music-mini-bar{padding:0.24rem 0.32rem;gap:0.4rem}
  .music-mini-btn{min-width:36px;min-height:36px}
  .quote-block{padding:1.2rem}
  .vb6-code{font-size:0.68rem}.nfo{font-size:0.55rem;padding:1rem}
  .btn{min-height:44px;padding:0.75rem 1.6rem;display:inline-flex;align-items:center;justify-content:center}
  .mon{height:100px;font-size:0.52rem}
  #quoteSignalCanvas{height:110px}
  #ingredientsCanvas{height:130px}
  .history-cookbook-section,.glossary-section{padding:1.8rem 0 2.2rem}
  .history-cookbook-section .history-intro,.glossary-section .history-intro{font-size:0.78rem;line-height:1.5;margin-bottom:0.82rem}
  .ingredient-list{gap:0.62rem}
  .ingredient-head{padding:0.54rem 0.72rem}
  .ingredient-name{font-size:0.64rem;letter-spacing:0.08em}
  .ingredient-desc{padding:0.62rem 0.72rem 0.18rem;font-size:0.74rem;line-height:1.45}
  .ingredient-code{margin:0.34rem 0.72rem 0.72rem;padding:0.58rem 0.62rem;font-size:0.58rem;line-height:1.4}
  .glossary-grid{gap:0.58rem}
  .term-card{padding:0.62rem 0.66rem}
  .term-icon{width:1.5rem;height:1.5rem;font-size:0.58rem}
  .term-name{font-size:0.64rem}
  .term-def{font-size:0.72rem;line-height:1.42}
  .term-visual{font-size:0.56rem;padding:0.34rem 0.44rem}
  .ts-module-header{padding:0.6rem 0.8rem;gap:0.5rem}
  .ts-module-summary{font-size:0.62rem}
  .fx-toast-container{right:0.5rem;bottom:0.5rem;max-width:calc(100vw - 1rem)}
  .checksum-grid{grid-template-columns:repeat(6,minmax(32px,40px))}
  .unscramble-grid{display:grid;grid-template-columns:repeat(4,minmax(36px,46px))}
  .term-body{height:clamp(260px,54vh,440px)}
  .lock-history-section{padding:1.8rem 0 2.2rem}
  .lock-history-section .history-intro{font-size:0.78rem;line-height:1.5;margin-bottom:0.82rem}
  .lh-subhead{font-size:0.78rem;margin:1.6rem auto 0.8rem}
  .lh-timeline{padding-left:1.8rem}
  .lh-timeline li::before{left:-1.55rem}
  .lh-timeline .tl-desc{font-size:0.76rem}
  .lh-analogy-table thead th{font-size:0.6rem;padding:0.55rem 0.6rem}
  .lh-analogy-table tbody td{font-size:0.74rem;padding:0.42rem 0.6rem}
  .lh-figure-card{padding:0.72rem 0.82rem}
  .lh-figure-card .lh-fig-name{font-size:0.74rem}
  .lh-figure-card .lh-fig-bio{font-size:0.74rem}
  .lh-quote-block{padding:1rem 1.1rem}
  .lh-quote-block .lh-qt{font-size:0.88rem}
  .lh-insight-list li{font-size:0.76rem}
  .lh-ethics-list li{font-size:0.76rem}
}
@media(max-width:480px){
  .top-bar{padding:0.32rem 0.28rem 0.36rem;gap:0.24rem}
  .top-bar-label{font-size:0.42rem}
  .music-mini-bar{padding:0.2rem 0.24rem;gap:0.32rem}
  .music-mini-btn{min-width:34px;min-height:34px;font-size:0.9rem;padding:0.18rem 0.4rem}
  .music-track-indicator{font-size:0.5rem}
}
@media(max-width:360px){
  .top-bar-wrap{padding:0 0.28rem}
  .top-bar{padding:0.28rem 0.22rem 0.32rem;gap:0.2rem;border-radius:10px}
  .top-bar-label{font-size:0.38rem;letter-spacing:0.1em}
  .music-mini-bar{padding:0.18rem 0.2rem;gap:0.28rem}
  .music-mini-btn{min-width:32px;min-height:32px;font-size:0.85rem;padding:0.16rem 0.32rem}
  .music-track-indicator{font-size:0.46rem;min-width:2ch}
}

/* ====== HAK5 FIELD INTEL PAGER ====== */
.field-intel-section{padding:2.4rem 0 3rem}
.pager-wrap{max-width:920px;margin:0 auto;border:2px solid rgba(0,255,204,0.45);border-radius:14px;background:linear-gradient(175deg,rgba(2,10,14,0.98),rgba(2,7,11,0.96));overflow:hidden;position:relative;box-shadow:0 0 60px rgba(0,255,204,0.08),0 0 90px rgba(24,220,255,0.05),inset 0 0 90px rgba(0,0,0,0.45)}
.pager-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:1}
.pager-wrap::after{content:'';position:absolute;top:-1px;left:-80px;width:80px;height:2px;background:var(--tron);box-shadow:0 0 10px var(--tron),0 0 25px rgba(24,220,255,0.5);border-radius:2px;animation:pagerTrace 5s linear infinite;opacity:0.7;z-index:2}
@keyframes pagerTrace{0%{left:-80px}100%{left:calc(100% + 80px)}}
.pager-header{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 1rem;border-bottom:1px solid rgba(0,255,204,0.3);background:linear-gradient(180deg,rgba(0,255,204,0.07),rgba(0,0,0,0.35));position:relative;z-index:2}
.pager-title{font-family:var(--mono);font-size:0.72rem;color:var(--tron);letter-spacing:0.18em;text-transform:uppercase;text-shadow:0 0 8px rgba(24,220,255,0.4)}
.pager-beacon{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green),0 0 12px rgba(0,255,65,0.3);animation:pagerPulse 2s ease-in-out infinite}
@keyframes pagerPulse{0%,100%{opacity:1;box-shadow:0 0 6px var(--green),0 0 12px rgba(0,255,65,0.3)}50%{opacity:0.4;box-shadow:0 0 3px var(--green)}}
.pager-status{font-family:var(--mono);font-size:0.52rem;color:var(--amber);letter-spacing:0.12em;text-transform:uppercase}
.pager-body{position:relative;z-index:2;max-height:520px;overflow-y:auto;padding:0.6rem;scrollbar-width:thin;scrollbar-color:rgba(24,220,255,0.2) transparent;background:linear-gradient(180deg,rgba(0,20,24,0.28),rgba(0,0,0,0))}
.pager-body::-webkit-scrollbar{width:8px}
.pager-body::-webkit-scrollbar-track{background:rgba(0,0,0,0.25)}
.pager-body::-webkit-scrollbar-thumb{background:rgba(24,220,255,0.2);border-radius:999px}
.pager-entry{border:1px solid rgba(24,220,255,0.15);border-radius:8px;background:linear-gradient(140deg,rgba(0,22,26,0.45),rgba(0,0,0,0.36));margin-bottom:0.5rem;padding:0.7rem 0.85rem;transition:border-color .28s,box-shadow .28s;position:relative;overflow:hidden}
.pager-entry:hover{border-color:rgba(24,220,255,0.4);box-shadow:0 0 16px rgba(24,220,255,0.12)}
.pager-entry::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px 0 0 2px}
.pager-entry[data-cat="offensive"]::before{background:var(--red)}
.pager-entry[data-cat="defensive"]::before{background:var(--green)}
.pager-entry[data-cat="radio"]::before{background:var(--amber)}
.pager-entry[data-cat="hardware"]::before{background:var(--tron)}
.pager-entry[data-cat="osint"]::before{background:var(--magenta)}
.pager-entry[data-cat="platform"]::before{background:var(--violet)}
.pager-entry[data-cat="culture"]::before{background:#6ab4ff}
.pager-meta{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem;flex-wrap:wrap}
.pager-tag{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.12rem 0.4rem;border-radius:3px;border:1px solid}
.pager-tag.t-offensive{color:var(--red);border-color:rgba(255,62,62,0.35)}
.pager-tag.t-defensive{color:var(--green);border-color:rgba(0,255,65,0.35)}
.pager-tag.t-radio{color:var(--amber);border-color:rgba(255,170,0,0.35)}
.pager-tag.t-hardware{color:var(--tron);border-color:rgba(24,220,255,0.35)}
.pager-tag.t-osint{color:var(--magenta);border-color:rgba(255,0,170,0.35)}
.pager-tag.t-platform{color:var(--violet);border-color:rgba(139,92,246,0.35)}
.pager-tag.t-culture{color:#8fc6ff;border-color:rgba(143,198,255,0.38)}
.pager-freq{font-family:var(--mono);font-size:0.5rem;color:var(--muted);letter-spacing:0.08em}
.pager-name{font-family:var(--mono);font-size:0.82rem;color:var(--cyan);letter-spacing:0.05em;margin-bottom:0.25rem}
.pager-name a{color:inherit;text-decoration:none}.pager-name a:hover{text-shadow:0 0 8px var(--cyan)}
.pager-name a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.pager-desc{font-size:0.78rem;color:var(--text);line-height:1.55}
.pager-desc em{color:var(--amber);font-style:normal}
.pager-footer{padding:0.5rem 1rem;border-top:1px solid rgba(24,220,255,0.12);background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.pager-count{font-family:var(--mono);font-size:0.52rem;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.pager-sig{font-family:var(--mono);font-size:0.52rem;color:var(--green);letter-spacing:0.1em;text-transform:uppercase}

/* ====== MOBILE TOUCH TARGETS & OVERFLOW FIXES ====== */
@media(max-width:640px){
  .pager-body{max-height:400px;overscroll-behavior:contain}
  .pager-entry{padding:0.55rem 0.7rem}
  .pager-name{font-size:0.74rem}
  .pager-desc{font-size:0.72rem}
  .pager-header{flex-wrap:wrap;gap:0.3rem}
  .checksum-cell{min-width:44px;min-height:44px}
  .port-btn{min-width:60px;min-height:44px;padding:0.6rem 0.8rem}
  .pattern-opt,.math-opt{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .cb-mini-btn{min-height:44px;padding:0.5rem 0.8rem}
  .settings-toggle{min-width:44px;min-height:44px}
  .dial-input{min-height:44px;width:56px;font-size:1rem}
  .music-nav-btn{min-width:44px;min-height:44px;padding:0.35rem 0.7rem}
  .module-ctrl-btn{min-height:44px;padding:0.45rem 1rem}
  .top-toggle-btn{min-height:44px;padding:0.3rem 0.6rem}
  .settings-btn-action{min-height:44px;padding:0.4rem 1rem}
  .settings-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .nfo{word-break:break-all;white-space:pre-wrap}
  /* iOS input zoom prevention (inputs < 16px trigger auto-zoom) */
  .search-input{font-size:1rem}
  .cb-input{font-size:1rem}
  /* Fix illegible pager text sizes */
  .pager-title{font-size:0.625rem}
  .pager-status{font-size:0.55rem}
  .pager-count,.pager-sig{font-size:0.55rem}
  .pager-device-statusbar{font-size:0.5rem}
  /* Fix illegible music/top-bar text */
  .music-track-sub{font-size:0.56rem}
  .top-bar-label{font-size:0.625rem}
  /* Touch targets for CVE buttons */
  .cve-more-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0.4rem 0.8rem}
  .cve-modal-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .cb-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .back-to-top-btn{min-height:44px}
  /* Code block wrapping on mobile */
  .ingredient-code{white-space:pre-wrap;word-break:break-all}
  .pf-code{white-space:pre-wrap}
  .term-visual{white-space:pre-wrap}
  /* Stego canvas responsive centering */
  .stego-canvas-wrap{display:block;max-width:100%;margin:0 auto}
  /* Canvas height reductions */
  #inviteForgeCanvas{height:280px}
  #packetGridCanvas{height:220px}
  .packet-overlay-info{padding:1rem 1.2rem}
  /* Scroll containment */
  .cb-body{overscroll-behavior:contain}
  .boot-log{overscroll-behavior:contain}
  .settings-panel{overscroll-behavior:contain}
}
/* Safe-area insets for notched devices */
@supports(padding:env(safe-area-inset-top)){
  .top-bar-wrap{padding-top:env(safe-area-inset-top);padding-left:max(0.5rem,env(safe-area-inset-left));padding-right:max(0.5rem,env(safe-area-inset-right))}
  .back-to-top-btn{margin-bottom:env(safe-area-inset-bottom)}
  .pi-link{margin-bottom:env(safe-area-inset-bottom);margin-right:env(safe-area-inset-right)}
  .fx-toast-container{margin-bottom:env(safe-area-inset-bottom);margin-right:env(safe-area-inset-right)}
}
body{overflow-x:hidden}
.page-wrap{overflow-x:hidden}

/* ====== CATEGORY GROUP HEADINGS ====== */
.category-heading{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--magenta);text-align:center;padding:0.6rem 0;margin:0 auto;max-width:1120px;text-shadow:0 0 8px rgba(255,0,170,0.25)}

/* ====== ENGAGE MODE (reduced effects, softer palette) + PI LINK ====== */
body.engage-mode{
  --bg:#0f1625;
  --panel:rgba(17,25,40,0.96);
  --text:#d8e4f3;
  --muted:#9db0cb;
  --border:rgba(143,198,255,0.25);
}
body.engage-mode .crt,
body.engage-mode .scanline-overlay,
body.engage-mode .sweep,
body.engage-mode .holographic-vignette,
body.engage-mode .data-orbs{opacity:0;display:none}
body.engage-mode .hero-energy-lanes,
body.engage-mode .hero-identity-glow,
body.engage-mode .hero-stats-circuit{display:none}
body.engage-mode .glitch::before,
body.engage-mode .glitch::after{display:none}
body.engage-mode .glass{box-shadow:0 0 24px rgba(143,198,255,0.08),inset 0 0 18px rgba(143,198,255,0.04)}
body.engage-mode .glass::before,body.engage-mode .glass::after{opacity:0.25}
body.engage-mode .hero-visual-shell{transform:none;box-shadow:0 0 24px rgba(143,198,255,0.08)}
body.engage-mode .term-body{color:#c8f2ff}
body.engage-mode #particleCanvas,
body.engage-mode #rainCanvas,
body.engage-mode #tronGridCanvas{display:none}

/* ====== READ MODE (maximum readability: warm/neutral, high contrast) ====== */
body.read-mode{
  --bg:#f5f5f0;
  --panel:rgba(255,255,252,0.98);
  --text:#1a1a1a;
  --muted:#444;
  --border:rgba(0,0,0,0.12);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.8;
}
body.read-mode .crt,
body.read-mode .scanline-overlay,
body.read-mode .sweep,
body.read-mode .holographic-vignette,
body.read-mode .data-orbs,
body.read-mode .ambient,
body.read-mode .tron-grid,
body.read-mode .circuit-pattern,
body.read-mode .tron-svg-bg{opacity:0;display:none}
body.read-mode .hero-energy-lanes,
body.read-mode .hero-identity-glow,
body.read-mode .hero-stats-circuit,
body.read-mode .stats-energy-rings{display:none}
body.read-mode .page-wrap::before{opacity:0;display:none}
body.read-mode .glitch::before,
body.read-mode .glitch::after{display:none}
body.read-mode .glass{box-shadow:0 1px 4px rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.1)}
body.read-mode .glass::before,body.read-mode .glass::after{opacity:0;display:none}
body.read-mode .hero-holographic::after,
body.read-mode .hero-holographic::before,
body.read-mode .hero-visual-shell::after,
body.read-mode .stats-holo-frame::after,
body.read-mode .legacy-search-wrap::after,
body.read-mode .module-controls::before,
body.read-mode .module-ctrl-btn::before,
body.read-mode .ts-module-header::before,
body.read-mode .lh-timeline li::after{display:none}
body.read-mode .hero-visual-shell,
body.read-mode .stats-holo-frame,
body.read-mode .legacy-search-wrap,
body.read-mode .movie-quote,
body.read-mode .case-file-card,
body.read-mode .lh-phase-card,
body.read-mode .ts-module-header,
body.read-mode .module-controls,
body.read-mode .project-card{background:rgba(255,255,252,0.98);border-color:rgba(0,0,0,0.12);box-shadow:0 1px 4px rgba(0,0,0,0.08);animation:none}
body.read-mode .term-body{color:#1a1a1a}
body.read-mode #particleCanvas,
body.read-mode #rainCanvas,
body.read-mode #tronGridCanvas{display:none}
body.read-mode .glitch{color:#1a1a1a;text-shadow:none;animation:none}
body.read-mode .section-head,body.read-mode .section-head span{color:#333}
body.read-mode .quote-block{border-left-color:#666}
body.read-mode .quote-cite{color:#555}
body.read-mode .top-bar{border-color:rgba(0,0,0,0.15);background:rgba(255,255,252,0.98);box-shadow:0 2px 12px rgba(0,0,0,0.06)}
body.read-mode .top-bar-label{color:#555}
body.read-mode .top-toggle-btn{border-color:rgba(0,0,0,0.2);color:#444;background:rgba(255,255,252,0.9)}
body.read-mode .top-toggle-btn:hover{border-color:rgba(0,0,0,0.35);color:#1a1a1a}
body.read-mode .pi-link{border-color:rgba(0,0,0,0.2);color:#333;background:rgba(255,255,252,0.95);box-shadow:0 1px 4px rgba(0,0,0,0.08)}
body.read-mode .pi-link:hover{border-color:rgba(0,0,0,0.35);color:#1a1a1a}
body.read-mode .settings-overlay{background:rgba(0,0,0,0.35)}
body.read-mode .settings-panel{border-color:rgba(0,0,0,0.15);background:rgba(255,255,252,0.98);box-shadow:0 4px 24px rgba(0,0,0,0.12)}
body.read-mode .settings-select{border-color:rgba(0,0,0,0.2);background:rgba(255,255,252,0.95);color:#1a1a1a}
.pi-link{position:fixed;right:clamp(0.8rem,2.4vw,1.2rem);bottom:clamp(3.4rem,7vw,4.2rem);z-index:10940;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--mono);font-weight:700;font-size:0.95rem;color:var(--cyan);border:1px solid rgba(24,220,255,0.5);background:rgba(2,12,24,0.9);box-shadow:0 0 14px rgba(24,220,255,0.35),0 0 26px rgba(24,220,255,0.18);animation:piPulse 2.8s ease-in-out infinite}
.pi-link:hover{border-color:var(--tron);box-shadow:0 0 18px rgba(24,220,255,0.5),0 0 34px rgba(24,220,255,0.24)}
.pi-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@keyframes piPulse{0%,100%{transform:translateY(0);opacity:0.85}50%{transform:translateY(-1px);opacity:1}}
@media(pointer:coarse){
  .pi-link{width:44px;height:44px;font-size:1.05rem;bottom:clamp(3.8rem,9vw,4.6rem)}
}

/* ====== REDUCED MOTION ====== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .cb-toast,.cb-modal,.fx-toast,.ts-module-body{transition:none}
  .cb-toast::before,.cb-modal::after,.fx-toast::before,.top-bar::before,.glass::before,.ingredients-visual::after{animation:none}
  .module-controls::before,.module-ctrl-btn::before{animation:none;display:none}
  .module-ctrl-btn.tron-pulse{animation:none}
  .tron-grid{transform:none}
  .ts-module-header:hover{transform:none}
  .sweep,.mon-scroll{animation:none}
  .hero::after,.hero-identity-glow,.hero-energy-lanes,.hero-stats-circuit .hero-circuit-path,.stats-energy-rings span,.hero-visual-shell::after,.stats-holo-frame,.legacy-search-wrap,.movie-quote,.case-file-card,.lh-phase-card{animation:none}
  .tron-svg-bg .light-cycle-lanes path,.tron-svg-bg .legacy-ships polygon,.tron-svg-bg .legacy-ships path{animation:none}
  .hero-holo-scene .scene-lane,.hero-holo-scene .holo-scene-bike,.hero-holo-scene .holo-scene-recognizer,.hero-holo-scene .holo-scene-rings,.hero-holo-scene .holo-scene-beams{animation:none}
  .glitch{animation:none !important}
  .glitch::before,.glitch::after{animation:none !important;display:none}
  .legend-quote-card.hot::before{animation:none}
  #rainCanvas,#tronGridCanvas{display:none}
  .pi-link{animation:none}
  .tron-svg-bg .circuit-lines path,.tron-svg-bg .data-nodes circle,.tron-svg-bg .hexagons polygon{animation:none}
  .orb,.holographic-vignette{animation:none}
  .ts-module.reveal.visible .section-head{animation:none;text-shadow:0 0 6px rgba(24,220,255,0.3)}
  .recipe-card::before,.project-card::before,.investigator-card::before,.threat-lab-card::before,.case-file-card::before{animation:none}
  .recipe-card:hover::before,.project-card:hover::before,.investigator-card:hover::before,.threat-lab-card:hover::before,.case-file-card:hover::before{animation:none}
  .recipe-card::after,.project-card::after,.investigator-card::after,.threat-lab-card::after,.case-file-card::after{animation:none}
  .recipe-card:hover::after,.project-card:hover::after,.investigator-card:hover::after,.threat-lab-card:hover::after,.case-file-card:hover::after{animation:none}
  .hero-visual-shell,.project-card:hover,.case-file-card:hover,.movie-quote.is-live,.lh-timeline li:hover,.lh-timeline li.reveal.visible{transform:none !important}
  .page-wrap::before{opacity:0.3;transition:none}
}

/* ====== HACKER FIELD INTEL PAGER - DARK RETRO STYLING ====== */
.pager-wrap{background:linear-gradient(175deg,rgba(0,4,8,0.99),rgba(0,2,4,0.98));border-color:rgba(0,255,65,0.5);box-shadow:0 0 60px rgba(0,255,65,0.1),0 0 90px rgba(0,255,65,0.06),inset 0 0 120px rgba(0,0,0,0.7),0 0 2px 1px rgba(0,255,65,0.3)}
.pager-header{background:linear-gradient(180deg,rgba(0,255,65,0.08),rgba(0,0,0,0.5));border-bottom-color:rgba(0,255,65,0.35)}
.pager-title{font-family:'Press Start 2P',var(--mono);font-size:0.52rem;color:var(--green);text-shadow:0 0 12px rgba(0,255,65,0.6),0 0 24px rgba(0,255,65,0.3);letter-spacing:0.12em}
.pager-status{font-family:'Press Start 2P',var(--mono);font-size:0.38rem;color:var(--amber)}
.pager-body{background:linear-gradient(180deg,rgba(0,8,4,0.5),rgba(0,0,0,0.3))}
.pager-entry{background:linear-gradient(140deg,rgba(0,8,4,0.6),rgba(0,0,0,0.5));border-color:rgba(0,255,65,0.12)}
.pager-entry:hover{border-color:rgba(0,255,65,0.4);box-shadow:0 0 20px rgba(0,255,65,0.15),inset 0 0 30px rgba(0,255,65,0.03)}
.pager-name{font-family:'Press Start 2P',var(--mono);font-size:0.58rem;line-height:1.6}
.pager-desc{font-family:var(--mono);font-size:0.72rem}
.pager-footer{background:rgba(0,4,2,0.5);border-top-color:rgba(0,255,65,0.15)}
.pager-count,.pager-sig{font-family:'Press Start 2P',var(--mono);font-size:0.4rem}
.pager-wrap::after{background:var(--green);box-shadow:0 0 10px var(--green),0 0 25px rgba(0,255,65,0.5)}

/* ====== LOCK HISTORY TIMELINE ICONS ====== */
.lh-timeline-icons li{padding-left:1.8rem}
.tl-lock-icon{position:absolute;left:-2.6rem;top:0.75rem;font-size:1.1rem;filter:drop-shadow(0 0 6px rgba(0,255,204,0.4));z-index:2}
.lh-timeline li.reveal.visible .tl-lock-icon{animation:lockIconPulse 1.9s ease-in-out infinite}
@keyframes lockIconPulse{0%,100%{filter:drop-shadow(0 0 6px rgba(0,255,204,0.35))}50%{filter:drop-shadow(0 0 14px rgba(24,220,255,0.6))}}
.lh-timeline-icons li::before{left:-2.95rem}

/* ====== LOCK HISTORY ETHICS NEON BOXES ====== */
.lh-ethics-neon{max-width:780px;margin:0 auto 2rem;display:flex;flex-direction:column;gap:0.8rem}
.lh-ethics-item{display:flex;align-items:flex-start;gap:0.8rem;padding:0.9rem 1rem;border:2px solid rgba(0,255,204,0.25);border-radius:10px;background:linear-gradient(140deg,rgba(0,255,204,0.03),rgba(8,8,20,0.92));font-size:0.84rem;color:var(--text);line-height:1.62;transition:border-color .3s,box-shadow .3s,transform .3s;box-shadow:0 0 15px rgba(0,255,204,0.05)}
.lh-ethics-item:hover{border-color:rgba(0,255,204,0.5);box-shadow:0 0 30px rgba(0,255,204,0.15),0 0 50px rgba(255,0,170,0.05);transform:translateY(-2px)}
.lh-ethics-icon{font-size:1.4rem;flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(0,255,204,0.4))}
.lh-ethics-item strong{color:var(--cyan)}

/* ====== LOCK HISTORY PHASES GRID ====== */
.lh-phases-grid{max-width:780px;margin:0 auto 2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:0.7rem}
@media(max-width:768px){.lh-phases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.lh-phases-grid{grid-template-columns:1fr}}
.lh-phase-card{position:relative;border:2px solid transparent;border-radius:12px;padding:1rem 0.9rem;background:
  linear-gradient(160deg,rgba(8,14,28,0.94),rgba(8,8,20,0.92)) padding-box,
  linear-gradient(128deg,rgba(24,220,255,0.38),rgba(255,107,26,0.34),rgba(24,220,255,0.16)) border-box;
  background-size:100% 100%,240% 240%;text-align:center;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s;animation:legacyBorderShift 15s linear infinite}
.lh-phase-card::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 10px,rgba(24,220,255,0.03) 10px,rgba(24,220,255,0.03) 11px);pointer-events:none;animation:phaseCircuit 3s linear infinite}
@keyframes phaseCircuit{0%{background-position:0 0}100%{background-position:11px 0}}
.lh-phase-card:hover{border-color:rgba(24,220,255,0.55);box-shadow:0 0 35px rgba(24,220,255,0.2),0 0 50px rgba(255,107,26,0.08);transform:translateY(-3px)}
.lh-phase-num{display:block;font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--cyan);text-shadow:0 0 12px rgba(0,255,204,0.4);margin-bottom:0.3rem}
.lh-phase-title{display:block;font-family:var(--mono);font-size:0.78rem;color:var(--magenta);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.4rem}
.lh-phase-desc{font-size:0.78rem;color:var(--text);line-height:1.5}

/* ====== LOCK HISTORY CLOSING STATEMENT ====== */
.lh-closing-statement{max-width:780px;margin:1.5rem auto 0;font-family:var(--mono);font-size:1rem;font-weight:700;text-align:center;line-height:1.7;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--tron));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 12px rgba(0,255,204,0.2))}

/* ====== INVESTIGATORS GRID ====== */
.investigator-grid{max-width:780px;margin:0 auto 2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:0.8rem}
@media(max-width:640px){.investigator-grid{grid-template-columns:1fr}}
.investigator-card{padding:0.9rem 1rem;border:2px solid rgba(24,220,255,0.2);border-radius:10px;transition:border-color .28s,box-shadow .28s,transform .28s;box-shadow:0 0 15px rgba(24,220,255,0.04)}
.investigator-card:hover{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.18),0 0 50px rgba(255,0,170,0.06);transform:translateY(-2px)}
.inv-icon{font-size:1.6rem;margin-bottom:0.3rem;filter:drop-shadow(0 0 6px rgba(0,255,204,0.3))}
.inv-name{font-family:var(--mono);font-size:0.82rem;color:var(--cyan);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.15rem}
.inv-era{font-family:var(--mono);font-size:0.6rem;color:var(--amber);letter-spacing:0.08em;margin-bottom:0.3rem}
.inv-bio{font-size:0.8rem;color:var(--text);line-height:1.55}
.inv-bio em{color:var(--green);font-style:normal}

/* ====== RECENT CASE FILES ====== */
.case-files-section{padding:2.4rem 0 3rem}
.case-file-card{position:relative;border:2px solid transparent;border-radius:12px;background:
  linear-gradient(160deg,rgba(8,14,28,0.94),rgba(8,8,20,0.92)) padding-box,
  linear-gradient(128deg,rgba(24,220,255,0.38),rgba(255,107,26,0.3),rgba(24,220,255,0.16)) border-box;
  background-size:100% 100%,240% 240%;margin-bottom:1.2rem;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s;animation:legacyBorderShift 18s linear infinite}
.case-file-card:hover,.case-file-card.reveal.visible{border-color:rgba(24,220,255,0.5);box-shadow:0 0 35px rgba(24,220,255,0.15),0 0 50px rgba(255,107,26,0.06);transform:translateY(-2px)}
.case-file-tab{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;background:linear-gradient(90deg,rgba(24,220,255,0.08),rgba(255,107,26,0.08),rgba(0,0,0,0.35));border-bottom:1px solid rgba(24,220,255,0.15);font-family:var(--mono)}
.case-file-num{font-size:0.65rem;font-weight:700;color:var(--magenta);letter-spacing:0.12em;text-transform:uppercase}
.case-file-date{font-size:0.6rem;color:var(--amber);letter-spacing:0.08em}
.case-file-title{padding:0.8rem 1rem 0.4rem;font-family:var(--mono);font-size:0.95rem;color:var(--cyan);letter-spacing:0.04em}
.case-file-card .archives-text{padding:0 1rem;margin-bottom:0.8rem}
.case-file-list{list-style:none;padding:0 1rem 0.5rem;margin:0}
.case-file-list li{position:relative;padding:0.3rem 0 0.3rem 1.2rem;font-size:0.8rem;color:var(--text);line-height:1.5;border-bottom:1px solid rgba(24,220,255,0.06)}
.case-file-list li:last-child{border-bottom:none}
.case-file-list li::before{content:'\25B8';position:absolute;left:0;top:0.3rem;color:var(--cyan);font-size:0.72rem}
.case-file-list li strong{color:var(--amber)}
.case-file-note{padding:0.5rem 1rem 0.8rem;font-family:var(--mono);font-size:0.72rem;color:var(--muted);line-height:1.5}

/* ====== CINEMA QUOTE GRID (expanded) ====== */
.cinema-quote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:960px;margin:0 auto 2rem}
@media(max-width:1024px){.cinema-quote-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cinema-quote-grid{grid-template-columns:1fr}}
/* Cinema carousel (mobile swipe) */
@media(max-width:640px){
  .cinema-carousel-wrap{overflow:hidden;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
  .cinema-carousel-track{display:flex;flex-wrap:nowrap;gap:0;scroll-snap-type:x mandatory;transition:transform .35s ease-out}
  .cinema-carousel-track .movie-quote{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;min-width:0}
  .cinema-carousel-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1rem;padding:0.5rem 0}
}
@media(min-width:641px){.cinema-carousel-dots{display:none}}
.cinema-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(24,220,255,0.4);background:transparent;cursor:pointer;padding:17px;margin:0;transition:background .25s,border-color .25s;min-width:44px;min-height:44px;box-sizing:content-box}
.cinema-dot:hover,.cinema-dot.active{background:var(--tron);border-color:var(--tron)}
.cinema-quote-grid .movie-quote{padding:1.2rem 1.4rem}
.quote-matrix::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,0.03) 2px,rgba(0,255,65,0.03) 4px);opacity:0.6}
.wireframe-centered{width:120px;height:120px;margin:0 auto 2rem}

/* ====== CVE MORE INFO BUTTON ====== */
.cve-more-btn{display:inline-block;margin-top:0.5rem;font-family:var(--mono);font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--tron);border:1px solid rgba(24,220,255,0.3);border-radius:999px;padding:0.3rem 0.7rem;background:rgba(2,10,20,0.8);cursor:pointer;transition:border-color .24s,box-shadow .24s,color .24s}
.cve-more-btn:hover,.cve-more-btn:focus-visible{border-color:var(--cyan);box-shadow:0 0 12px rgba(24,220,255,0.2);color:var(--cyan)}
.cve-more-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ====== CVE MODAL ====== */
.cve-modal-overlay{position:fixed;inset:0;z-index:15000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cve-modal-overlay.open{display:flex}
.cve-modal{width:min(520px,calc(100vw - 2rem));border-radius:16px;border:2px solid rgba(24,220,255,0.3);background:linear-gradient(160deg,rgba(8,14,28,0.96),rgba(8,8,20,0.94));box-shadow:0 0 60px rgba(0,255,204,0.1),0 0 100px rgba(255,0,170,0.05);padding:1.5rem;position:relative}
.cve-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;padding:0.2rem}
.cve-modal-close:hover{color:var(--text)}
.cve-modal-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cve-modal-title{font-family:var(--mono);font-size:0.88rem;color:var(--cyan);margin-bottom:0.8rem;text-transform:uppercase;letter-spacing:0.08em}
.cve-modal-body{font-size:0.86rem;color:var(--text);line-height:1.65}

/* ====== SOCIAL ENGINEERING GRID ====== */
.se-grid{max-width:900px;margin:0 auto 2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem}
@media(max-width:860px){.se-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.se-grid{grid-template-columns:1fr}}
.se-card{border:2px solid rgba(255,0,170,0.2);border-radius:10px;background:linear-gradient(160deg,rgba(8,14,28,0.92),rgba(8,8,20,0.92));padding:0.8rem 0.9rem;transition:border-color .28s,box-shadow .28s,transform .28s}
.se-card:hover{border-color:rgba(255,0,170,0.5);box-shadow:0 0 30px rgba(255,0,170,0.15),0 0 45px rgba(24,220,255,0.06);transform:translateY(-2px)}
.se-icon{font-size:1.5rem;display:block;margin-bottom:0.3rem;filter:drop-shadow(0 0 6px rgba(255,0,170,0.3))}
.se-name{font-family:var(--mono);font-size:0.76rem;color:var(--magenta);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.3rem}
.se-desc{font-size:0.78rem;color:var(--text);line-height:1.52}

/* ====== COGNITIVE BIAS GRID ====== */
.bias-grid{max-width:900px;margin:0 auto 2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:0.7rem}
@media(max-width:860px){.bias-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.bias-grid{grid-template-columns:1fr}}
.bias-card{border:2px solid rgba(139,92,246,0.2);border-radius:10px;background:linear-gradient(160deg,rgba(8,14,28,0.92),rgba(8,8,20,0.92));padding:0.8rem 0.9rem;transition:border-color .28s,box-shadow .28s,transform .28s}
.bias-card:hover{border-color:rgba(139,92,246,0.5);box-shadow:0 0 30px rgba(139,92,246,0.15),0 0 45px rgba(24,220,255,0.06);transform:translateY(-2px)}
.bias-name{font-family:var(--mono);font-size:0.74rem;color:var(--violet);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.3rem}
.bias-desc{font-size:0.78rem;color:var(--text);line-height:1.52}

/* ====== GLOSSARY NEW TERM ICON COLORS ====== */
.ti-rootkit{color:#ff4444;border-color:#ff4444}
.ti-ddos{color:#ff6b6b;border-color:#ff6b6b}
.ti-sqli{color:#ffaa00;border-color:#ffaa00}
.ti-xss{color:#ff9f1c;border-color:#ff9f1c}
.ti-insider{color:#e74c3c;border-color:#e74c3c}
.ti-brute{color:#f1c40f;border-color:#f1c40f}
.ti-mitm{color:#18dcff;border-color:#18dcff}
.ti-zombie{color:#9b59b6;border-color:#9b59b6}
.ti-worm{color:#e67e22;border-color:#e67e22}
.ti-keylog{color:#00d4ff;border-color:#00d4ff}
.ti-backdoor{color:#ff3e3e;border-color:#ff3e3e}
.ti-creds{color:#f39c12;border-color:#f39c12}
.ti-supply{color:#e74c3c;border-color:#e74c3c}
.ti-privesc{color:#ff00aa;border-color:#ff00aa}
.ti-apt{color:#c0392b;border-color:#c0392b}
.ti-social{color:#8b5cf6;border-color:#8b5cf6}

/* ====== GLOSSARY 3-COLUMN FOR WIDER LAYOUT ====== */
@media(min-width:900px){.glossary-grid{grid-template-columns:repeat(3,1fr)}}

/* ====== NFO TOOLKIT (expanded listing) ====== */
.nfo-toolkit{font-size:clamp(0.52rem,0.85vw,0.68rem);line-height:1.5}

/* ====== TIMELINE INGREDIENTS ENHANCED GLOW ====== */
.ingredient-card{position:relative}
.ingredient-card::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;box-shadow:inset 0 0 20px rgba(24,220,255,0.03);transition:box-shadow .3s}
.ingredient-card:hover::after{box-shadow:inset 0 0 30px rgba(24,220,255,0.08),0 0 15px rgba(255,0,170,0.04)}
.ingredient-code{position:relative}
.ingredient-code::after{content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;animation:codeGlow 3s ease-in-out infinite}
@keyframes codeGlow{0%,100%{box-shadow:inset 0 0 8px rgba(0,255,204,0.04)}50%{box-shadow:inset 0 0 16px rgba(0,255,204,0.1),0 0 6px rgba(0,255,204,0.05)}}

/* ====== INGREDIENTS CANVAS HOLOGRAPHIC ACCENTS ====== */
.ingredients-visual{border-color:rgba(24,220,255,0.25);box-shadow:0 0 30px rgba(24,220,255,0.06),0 0 60px rgba(255,0,170,0.03)}

/* ====== EVEN SECTION SPACING ====== */
.uniform-section-spacing>.ts-module{margin-top:1.5rem}
.uniform-section-spacing>.ts-module:first-child{margin-top:0}
.uniform-section-spacing>*+.ts-module{margin-top:1.5rem}
.ts-module-header .section-head{margin-bottom:0;padding-left:0.5rem;border-left:3px solid var(--cyan)}

/* ====== WIFI PINEAPPLE PAGER DEVICE ====== */
.pager-device{max-width:460px;margin:0 auto 1.2rem}
.pager-device-frame{border:4px solid #d4c600;border-radius:18px;background:linear-gradient(175deg,#e8d800,#c8b800);overflow:hidden;box-shadow:0 0 30px rgba(212,198,0,0.15),inset 0 0 20px rgba(0,0,0,0.1)}
.pager-device-screen{margin:10px;border:3px solid #333;border-radius:10px;background:#111;overflow:hidden}
.pager-device-statusbar{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;background:#1a1a1a;border-bottom:1px solid #333;font-family:'Press Start 2P',var(--mono);font-size:0.5rem;color:#999}
.pager-sb-icon{font-size:0.7rem}
.pager-sb-label{color:#aaa;letter-spacing:0.05em}
.pager-sb-right{color:#888;font-size:0.35rem;letter-spacing:0.03em}
.pager-device-display{padding:16px;min-height:80px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0a0a0a,#000)}
.pager-dd-recon{font-family:'Press Start 2P',var(--mono);font-size:0.7rem;color:#ff4400;text-shadow:0 0 8px rgba(255,68,0,0.6);letter-spacing:0.15em;text-transform:uppercase;animation:reconBlink 2s ease-in-out infinite}
@keyframes reconBlink{0%,100%{opacity:1}50%{opacity:0.4}}
.pager-device-controls{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 10px;gap:8px}
.pager-hw-dots{display:flex;gap:6px}
.pager-hw-dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 1px 2px rgba(0,0,0,0.4)}
.pager-hw-dot.red{background:#cc0000;box-shadow:inset 0 1px 2px rgba(0,0,0,0.4),0 0 4px rgba(204,0,0,0.4)}
.pager-hw-bar{flex:1;height:10px;border-radius:5px;background:linear-gradient(90deg,#1a6b1a,#2a9a2a,#1a6b1a);border:1px solid #0a3a0a;box-shadow:inset 0 1px 2px rgba(0,0,0,0.3)}
.pager-hw-btns{display:flex;gap:4px}
.pager-hw-btn{width:36px;height:30px;border-radius:6px;background:linear-gradient(180deg,#444,#222);border:1px solid #555;display:flex;align-items:center;justify-content:center;font-size:0.55rem;color:#888;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 2px 3px rgba(0,0,0,0.3)}

/* ====== WIFI PINEAPPLE PAGER TERMINAL ====== */
.pager-terminal{max-width:460px;margin:0 auto 1.5rem;border:2px solid #333;border-radius:6px;background:#0a0a0a;overflow:hidden;box-shadow:0 0 30px rgba(0,255,65,0.06)}
.pager-term-header{padding:6px 12px;background:#111;border-bottom:1px solid #222}
.pager-term-connected{font-family:'Press Start 2P',var(--mono);font-size:0.45rem;color:var(--green);text-shadow:0 0 6px rgba(0,255,65,0.4)}
.pager-term-ascii{padding:12px 16px;margin:0;font-family:var(--mono);font-size:0.7rem;line-height:1.3;color:var(--green);text-shadow:0 0 4px rgba(0,255,65,0.3);white-space:pre}
.pager-term-prompt{padding:4px 16px 14px;font-family:'Press Start 2P',var(--mono);font-size:0.45rem;color:var(--green);text-shadow:0 0 6px rgba(0,255,65,0.4)}
.pager-term-cursor{display:inline-block;width:8px;height:1em;background:var(--green);animation:blink 1s step-end infinite;vertical-align:text-bottom;box-shadow:0 0 4px rgba(0,255,65,0.5)}

/* ====== PAGER WRAP OVERRIDE FOR PINEAPPLE STYLE ====== */
.pager-wrap{border-color:rgba(0,255,65,0.35);background:#0a0a0a;box-shadow:0 0 30px rgba(0,255,65,0.06),inset 0 0 60px rgba(0,0,0,0.5)}
.pager-header{background:linear-gradient(180deg,rgba(0,255,65,0.06),rgba(0,0,0,0.4));border-bottom-color:rgba(0,255,65,0.2)}
.pager-title{font-family:'Press Start 2P',var(--mono);font-size:0.55rem;color:var(--green);text-shadow:0 0 8px rgba(0,255,65,0.5)}
.pager-status{font-family:'Press Start 2P',var(--mono);font-size:0.5rem}
.pager-body{background:rgba(0,4,0,0.3)}
.pager-entry{background:#0d0d0d;border-color:rgba(0,255,65,0.1)}
.pager-entry:hover{border-color:rgba(0,255,65,0.35);box-shadow:0 0 16px rgba(0,255,65,0.1)}
.pager-name{font-family:var(--mono);font-size:0.78rem}
.pager-footer{background:rgba(0,2,0,0.4);border-top-color:rgba(0,255,65,0.12)}
.pager-count,.pager-sig{font-family:'Press Start 2P',var(--mono);font-size:0.5rem}
.pager-wrap::after{background:var(--green);box-shadow:0 0 8px var(--green),0 0 20px rgba(0,255,65,0.4)}

@media(max-width:640px){
  .pager-device{max-width:100%}
  .pager-terminal{max-width:100%}
  .pager-hw-btn{width:28px;height:24px;font-size:0.45rem}
  .pager-term-ascii{font-size:0.55rem}
}