*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none;scroll-behavior:smooth}
html::-webkit-scrollbar{display:none}
body{cursor:crosshair;-webkit-font-smoothing:antialiased;background:#f5f0e8;color:#0d0d0d;font-family:'Source Sans 3',sans-serif}
.fd{font-family:'Abril Fatface',serif}
.fm{font-family:'Courier Prime',monospace}
::selection{background:#4252ff;color:#f5f0e8}
.tb{border:1px solid #0d0d0d}
.tbb{border-bottom:1px solid #0d0d0d}
.tbr{border-right:1px solid #0d0d0d}
.tbt{border-top:1px solid #0d0d0d}
.tbl{border-left:1px solid #0d0d0d}
.hi{transition:background .12s,color .12s}
.hi:hover{color:#f5f0e8;background:#0d0d0d}
.hb:hover{color:#f5f0e8;background:#4252ff}
.tag{letter-spacing:.15em;text-transform:uppercase;border:1px solid #0d0d0d;padding:3px 8px;font-family:'Courier Prime',monospace;font-size:11px;display:inline-block}
@keyframes spin-slow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.spin-slow{animation:12s linear infinite spin-slow}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor-blink{animation:1s step-end infinite blink}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-anim{animation:marquee 20s linear infinite;display:inline-block;white-space:nowrap}
.nav{display:flex;align-items:stretch;justify-content:space-between;position:sticky;top:0;background:#f5f0e8;z-index:50}
.nav-brand{display:flex;align-items:center;gap:12px;padding:16px 24px}
.nav-tri{width:20px;height:20px;background:#4252ff;clip-path:polygon(50% 0%,0% 100%,100% 100%)}
.nav-links{display:none;align-items:stretch}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-family:'Courier Prime',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:16px 24px;display:flex;align-items:center;text-decoration:none;color:inherit;transition:background .12s,color .12s}
.nav-links a:hover{color:#f5f0e8;background:#0d0d0d}
.nav-cta{padding:16px 32px;background:#4252ff;color:#f5f0e8;font-family:'Courier Prime',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;display:flex;align-items:center;transition:background .15s}
.nav-cta:hover{background:#0d0d0d}
.marquee-bar{overflow:hidden;padding:2px 0;background:#0d0d0d;color:#f5f0e8}
.marquee-bar .fm{font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.above-fold{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.above-fold .hero-sec{flex:1;min-height:0}
.hero-sec{display:grid;grid-template-columns:1fr;flex:1;min-height:0}
@media(min-width:768px){.hero-sec{grid-template-columns:1fr auto}}
.hero-left{display:flex;flex-direction:column;justify-content:space-between;padding:32px}
@media(min-width:768px){.hero-left{padding:80px}}
.hero-right{display:none;flex-direction:column;align-items:center;justify-content:space-between;padding:56px 40px;width:192px;gap:40px}
@media(min-width:768px){.hero-right{display:flex}}
.hero-h1{font-family:'Abril Fatface',serif;font-size:clamp(2.5rem,7vw,5.5rem);line-height:.95;letter-spacing:-.025em;margin-bottom:32px}
.hero-intro{font-size:18px;font-weight:300;line-height:1.6;color:#333;max-width:560px;margin-bottom:32px}
.hero-meta{margin-top:64px;font-family:'Courier Prime',monospace;font-size:12px;color:#999;display:flex;gap:24px}
.toc-sec{display:grid;grid-template-columns:1fr}
@media(min-width:768px){.toc-sec{grid-template-columns:14rem 1fr}}
.toc-left{padding:32px}
@media(min-width:768px){.toc-left{padding:40px}}
.toc-title{font-family:'Abril Fatface',serif;font-size:22px;line-height:1.25}
.toc-item{display:block;padding:20px 32px;text-decoration:none;color:inherit;transition:background .12s,color .12s}
.toc-item:hover{color:#f5f0e8;background:#0d0d0d}
.toc-item-content{display:flex;align-items:center;gap:24px}
.toc-num{font-family:'Courier Prime',monospace;font-size:12px;color:#4252ff;flex-shrink:0}
.toc-name{font-family:'Abril Fatface',serif;font-size:18px}
.toc-arrow{font-family:'Courier Prime',monospace;font-size:18px;margin-left:auto}
.content-sec{display:grid;grid-template-columns:1fr}
@media(min-width:768px){.content-sec{grid-template-columns:14rem 1fr}}
.content-left{padding:32px}
@media(min-width:768px){.content-left{padding:40px}}
.content-h{font-family:'Abril Fatface',serif;font-size:20px;line-height:1.25}
.content-right{padding:32px}
@media(min-width:768px){.content-right{padding:40px}}
.content-right p{font-size:16px;font-weight:300;line-height:1.8;color:#333;margin-bottom:16px}
.content-right p:last-child{margin-bottom:0}
.cta-sec{display:grid;grid-template-columns:1fr;min-height:30vh}
@media(min-width:768px){.cta-sec{grid-template-columns:1fr 1fr}}
.cta-left{background:#4252ff;color:#f5f0e8;padding:40px;display:flex;flex-direction:column;justify-content:space-between}
@media(min-width:768px){.cta-left{padding:56px}}
.cta-h{font-family:'Abril Fatface',serif;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;margin-bottom:16px}
.cta-p{font-size:18px;font-weight:300;opacity:.8;line-height:1.6}
.cta-right{background:#0d0d0d;color:#f5f0e8;padding:32px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:768px){.cta-right{padding:40px}}
.cta-btn{display:inline-block;align-self:flex-start;border:1px solid #f5f0e8;color:#f5f0e8;padding:16px 32px;font-family:'Courier Prime',monospace;font-size:14px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;transition:all .12s}
.cta-btn:hover{background:#4252ff;border-color:#4252ff}
.footer{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}
@media(min-width:768px){.footer{flex-direction:row}}
.footer-brand{display:flex;align-items:center;gap:12px;padding:24px 32px}
.footer-tri{width:16px;height:16px;background:#4252ff;clip-path:polygon(50% 0%,0% 100%,100% 100%)}
.footer-links{display:flex;flex-wrap:wrap;align-items:stretch}
.footer-links a{font-family:'Courier Prime',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:24px;text-decoration:none;color:inherit;transition:background .12s,color .12s}
.footer-links a:hover{color:#f5f0e8;background:#4252ff}


/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  body, html { overflow-x: hidden !important; max-width: 100vw !important; }
  * { max-width: 100% !important; }
  
  /* All grid sections stack */
  .hero-sec, .toc-sec, .content-sec, .cta-sec {
    grid-template-columns: 1fr !important;
  }
  
  /* Remove side borders, add bottom */
  .tbr { border-right: none !important; border-bottom: 1px solid #0d0d0d !important; }
  
  /* Hero */
  .hero-left { padding: 24px !important; }
  .hero-h1 { font-size: clamp(2rem, 9vw, 3.5rem) !important; }
  .hero-intro { font-size: 16px !important; }
  .hero-right { display: none !important; }
  .hero-meta { flex-wrap: wrap; gap: 8px !important; font-size: 10px !important; }
  
  /* Sections */
  .toc-left, .content-left { padding: 24px 20px !important; }
  .content-right { padding: 20px !important; }
  .toc-title { font-size: 20px !important; }
  .content-h { font-size: 18px !important; }
  .content-right p { font-size: 14px !important; }
  
  /* CTA */
  .cta-left, .cta-right { padding: 32px 20px !important; }
  .cta-h { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .cta-p { font-size: 15px !important; }
  
  /* Footer */
  .footer { flex-direction: column !important; }
  .footer-brand { border-right: none !important; border-bottom: 1px solid #0d0d0d !important; }
  .footer-links { flex-wrap: wrap; }
  .footer-links a { padding: 16px !important; font-size: 11px !important; }
  
  /* Nav */
  .nav-links { display: none !important; }
  .nav-brand { padding: 12px 16px !important; }
  .nav-cta { padding: 12px 16px !important; font-size: 10px !important; }
  
  /* Marquee */
  .marquee-anim { font-size: 9px !important; }
  
  /* TOC items */
  .toc-item { padding: 14px 20px !important; }
  .toc-name { font-size: 15px !important; }
  
  /* Tag */
  .tag { font-size: 10px !important; padding: 2px 6px !important; }
  
  /* Prevent overflow */
  section { overflow-x: hidden !important; }
  a { word-break: break-word !important; }
}

@media (max-width: 400px) {
  .hero-h1 { font-size: 1.75rem !important; }
  .cta-h { font-size: 1.5rem !important; }
}