/* Reference-aligned Margin of Error layout.
   Keeps the original dense cyberpunk dashboard and Chapter One behavior. */
:root{--frame:min(1440px,100%)}
html{scroll-padding-top:64px}
body{overflow-x:hidden;background:#02070b}
body::before{content:"";position:fixed;z-index:100;inset:0;pointer-events:none;opacity:.04;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px)}

.site-header{
  width:var(--frame);
  height:64px;
  margin:0 auto;
  padding:0 18px;
  grid-template-columns:150px minmax(0,1fr) 190px;
  border-inline:1px solid var(--line);
  background:rgba(2,7,11,.96);
  backdrop-filter:blur(12px);
}
.site-header nav{gap:clamp(1rem,3vw,2.8rem)}
.site-header nav a{font-size:10px;letter-spacing:.04em}
.system-button{border-radius:2px;background:linear-gradient(90deg,#26090b,#0b080c);letter-spacing:.04em}

main{width:var(--frame);margin:0 auto;border-inline:1px solid var(--line)}
.hero{
  min-height:430px;
  grid-template-columns:31% minmax(0,1fr) 230px;
  background-size:100% 100%,auto 100%;
  background-position:center,center;
  background-repeat:no-repeat;
}
.hero-copy{padding:22px;display:flex!important;flex-direction:column;justify-content:center}
.warning{align-self:flex-start;letter-spacing:.04em}
.hero h1{margin:15px 0;font-size:clamp(46px,5.2vw,72px);letter-spacing:-.035em}
.hero-copy>p:not(.warning){font-size:14px}
.actions{flex-wrap:wrap}.actions a{border-radius:2px}
.character-art{min-height:430px}
.metrics{align-self:center;margin:16px 12px;background:#041019e8}

.numbered{grid-template-columns:210px minmax(0,1fr)}
.numbered>header{min-height:160px;padding:16px;position:relative;overflow:hidden}
.numbered>header::after{content:"";width:90px;height:90px;position:absolute;right:-25px;bottom:-26px;border:1px solid rgba(16,217,255,.22);rotate:30deg}
.numbered>header>b{font-size:22px}.numbered>header h2{font-size:22px;line-height:1.02}.numbered>header p{line-height:1.6}

.decision-console{padding:10px;background:#03090e}
.subject-file{min-height:58px;padding:9px 12px;display:grid;align-content:center;border:1px solid rgba(255,59,53,.65);background:linear-gradient(90deg,#160608,#09070b);box-shadow:inset 0 0 24px rgba(255,59,53,.06)}
.subject-file p{color:var(--red);font-size:8px;letter-spacing:.12em}.subject-file strong{margin-top:3px;font-size:12px;letter-spacing:.05em}.subject-file span{margin-top:2px;color:#caa7a6;font-size:8px}
.choice-grid{margin-top:9px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.choice-grid button{min-height:118px;padding:12px;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:center;cursor:pointer}
.choice-grid button:hover,.choice-grid button:focus-visible{background:#0a1821;box-shadow:0 0 18px currentColor;outline:0}
.choice-grid button:first-letter{font-size:inherit}.choice-grid i{width:72px;height:64px}.choice-grid span{min-width:0;display:grid;gap:5px}.choice-grid b{font-size:11px}.choice-grid small{font-size:8px}.choice-grid em{padding-top:6px;border-top:1px solid currentColor;font-size:7px;font-style:normal;line-height:1.35}

.assessment-preview{grid-template-columns:210px minmax(0,1fr) 320px}
.test{padding:12px;background:#030b11}.test>p{font-size:8px}.test h3{padding:13px;font-size:11px}.answers button{min-height:38px;font-size:9px;cursor:pointer}.answers button:hover{border-color:var(--cyan);color:var(--cyan)}
.test-progress{margin-top:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.test-progress i{height:3px;background:#173d49}.test-progress i:first-child{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.classifications{background:#03090e}.classifications p{min-height:39px;background:#061018}.classifications p:nth-child(2){border-color:#9d722c}.classifications p:nth-child(3){border-color:var(--red)}

.cards-section>div{padding:9px}
.sprite-feature-grid,.business-grid,.sprite-image-grid{gap:8px}
.sprite-feature-grid article,.sprite-image-grid article{border-radius:0}
.sprite-feature-grid article{min-height:145px}
.sprite-image-grid article{min-height:125px}
.character-sprites article{min-height:140px}
footer{width:var(--frame);margin:0 auto;border-inline:1px solid var(--line)}

@media(min-width:901px) and (max-width:1440px){
  .site-header{height:58px}
  .hero{min-height:390px;grid-template-columns:31% minmax(0,1fr) 220px}
  .hero h1{font-size:clamp(44px,4.7vw,62px)}
  .character-art{min-height:390px}
  .numbered{grid-template-columns:190px minmax(0,1fr)}
  .assessment-preview{grid-template-columns:190px minmax(0,1fr) 290px}
  .numbered>header h2{font-size:20px}
}

@media(max-width:900px){
  .site-header{grid-template-columns:145px 1fr}.site-header nav{display:none}.system-button{justify-self:end}
  .hero{grid-template-columns:1fr;background-size:100% 100%,auto 100%;background-position:center,58% center}.hero-copy{min-height:390px;background:linear-gradient(90deg,rgba(2,7,11,.96),rgba(2,7,11,.52))}.character-art,.metrics{display:none!important}
  .numbered,.assessment-preview{grid-template-columns:155px minmax(0,1fr)}
  .assessment-preview .classifications{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
  .choice-grid{grid-template-columns:1fr}.world-sprites{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:600px){
  html{scroll-padding-top:56px}.site-header{height:56px;padding:8px 10px}.system-button{padding:8px;font-size:8px}
  .hero-copy{min-height:420px;padding:18px}.hero h1{font-size:42px}
  .numbered,.assessment-preview{grid-template-columns:1fr}.numbered>header{min-height:135px;border-right:0;border-bottom:1px solid var(--line)}
  .assessment-preview .classifications{grid-template-columns:1fr}
  .answers,.sprite-feature-grid{grid-template-columns:1fr}
  .choice-grid button{grid-template-columns:68px 1fr}
  .world-sprites{grid-template-columns:repeat(5,170px)}.character-sprites{grid-template-columns:repeat(3,260px)}.route-sprites{grid-template-columns:repeat(4,210px)}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}