.site-header{background:rgba(2,7,11,.96)}

.hero{
  position:relative;
  isolation:isolate;
  background-image:linear-gradient(90deg,rgba(2,7,11,.96) 0%,rgba(2,7,11,.68) 36%,rgba(2,7,11,.18) 66%,rgba(2,7,11,.88) 100%),url("../assets/margin-of-error/hero-scene.webp");
  background-size:cover;
  background-position:center;
}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,7,11,.72),transparent 48%);pointer-events:none}
.hero-copy,.metrics{position:relative;z-index:2}

.section-art{display:block;max-width:100%;height:auto}
.hero>.hero-copy,.hero>.character-art,.hero>.metrics{display:block}
.decision-art,.strip-art{width:100%;object-fit:contain}
.decision-art{margin-top:10px}
.classifications{display:flex;align-items:stretch;justify-content:center}
.classifications-art{width:100%;height:100%;object-fit:cover}
.cards-section>div{display:flex;align-items:center}
.strip-art{max-height:220px}

/* High-resolution master sprite: 1822 × 863. These crops power reusable UI artwork. */
.master-sprite{display:block;background-image:url("../assets/margin-of-error/master-sprite.webp");background-repeat:no-repeat;background-size:911px 431.5px}
.sprite-feature-grid{width:100%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sprite-feature-grid article{min-height:150px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);background:#061018;text-align:center}
.sprite-feature-grid i{width:92px;height:68px;margin-bottom:8px}
.sprite-feature-grid h3{color:var(--cyan);font-size:11px}
.sprite-feature-grid p{margin-top:7px;color:#c4d4d8;font-size:8px;line-height:1.5}
.sprite-routes{background-position:-507px -12px}
.sprite-community{background-position:-616px -12px}
.sprite-files{background-position:-720px -10px}
.sprite-meter{background-position:-817px -8px}
.sprite-harvest{background-position:-220px -8px}
.sprite-delay{background-position:-306px -5px}
.sprite-forge{background-position:-407px -4px}
.sprite-network{background-position:-510px -8px}
.sprite-warning{background-position:-4px -3px}
.choice-grid i,.business-grid i{width:82px;height:66px;grid-row:1/3}

.master-crop,.sprite-image-grid article{background-image:url("../assets/margin-of-error/master-sprite.webp");background-repeat:no-repeat;background-size:911px 431.5px}
.character-art{position:relative;min-height:335px;background:transparent}
.character-art i{position:absolute;display:block}
.character-art i{display:none}
.hero-city{inset:0;background-position:-227px -274px;background-size:911px 431.5px;opacity:.65}
.hero-ernest{left:2%;bottom:0;width:228px;height:84px;background-position:-115px -186px}
.hero-maya{left:38%;bottom:0;width:208px;height:84px;background-position:-345px -186px}
.hero-tapestry{right:0;top:10px;width:154px;height:84px;background-position:-116px -91px;opacity:.75}

.classifications{display:grid!important;align-content:center;padding:8px}
.classifications p{display:flex;align-items:center;gap:7px;padding:2px!important}
.classifications i{flex:0 0 45px;width:45px;height:32px}
.classifications span{display:grid;font-size:9px;font-weight:800}.classifications small{font-size:7px;font-weight:400}
.class-compliant{background-position:-21px -85px}.class-vertex{background-position:-21px -125px}.class-deviation{background-position:-21px -164px}.class-ghost{background-position:-21px -204px}

.sprite-image-grid{width:100%;display:grid!important;gap:8px}
.sprite-image-grid article{position:relative;min-height:120px;padding:70px 8px 8px;background-color:#061018;background-size:911px 431.5px;background-repeat:no-repeat;text-align:center;border:1px solid var(--line)}
.sprite-image-grid b,.sprite-image-grid h3{font-size:10px}.sprite-image-grid p{font-size:8px;color:#c4d4d8}
.world-sprites{grid-template-columns:repeat(5,1fr)}
.world-tapestry{background-position:-115px -91px}.world-vertex{background-position:-275px -91px}.world-harmonizer{background-position:-438px -91px}.world-loom{background-position:-592px -91px}.world-weave{background-position:-745px -91px}
.character-sprites{grid-template-columns:repeat(3,1fr)}
.character-sprites article{min-height:130px;padding-top:92px;text-align:right}
.character-ernest{background-position:-115px -186px}.character-maya{background-position:-345px -186px}.character-karen{background-position:-560px -186px}
.route-sprites{grid-template-columns:repeat(4,1fr)}
.route-sprites article{padding-top:78px;text-align:left}.route-compliance{background-position:-7px -275px}.route-resistance{background-position:-230px -275px}.route-collapse{background-position:-453px -275px}.route-weave{background-position:-680px -275px}

.system-button,.actions a,.choice-grid button,.answers button{background:#061018}

.feature-grid article::before,
.business-grid article::before,
.world-grid article::before,
.route-grid article::before{
  content:"";
  width:clamp(34px,4vw,58px);
  aspect-ratio:1;
  display:block;
  margin:0 auto .55rem;
  background-image:url("../assets/margin-of-error/master-sprite.webp");
  background-size:911px 431.5px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 8px currentColor);
}

.feature-grid article:nth-child(1)::before{background-position:0 50%}
.feature-grid article:nth-child(2)::before{background-position:33.333% 50%}
.feature-grid article:nth-child(3)::before{background-position:66.666% 50%}
.feature-grid article:nth-child(4)::before{background-position:100% 50%}
.business-grid article:nth-child(1)::before{background-position:0 100%}
.business-grid article:nth-child(2)::before{background-position:33.333% 100%}
.business-grid article:nth-child(3)::before{background-position:66.666% 100%}
.business-grid article:nth-child(4)::before{background-position:100% 100%}
.business-grid article:nth-child(5)::before{background-position:0 0}
.world-grid article:nth-child(1)::before{background-position:0 0}
.world-grid article:nth-child(2)::before{background-position:33.333% 0}
.world-grid article:nth-child(3)::before{background-position:66.666% 0}
.world-grid article:nth-child(4)::before{background-position:100% 0}
.world-grid article:nth-child(5)::before{background-position:0 50%}
.route-grid article:nth-child(1)::before{background-position:0 50%}
.route-grid article:nth-child(2)::before{background-position:33.333% 50%}
.route-grid article:nth-child(3)::before{background-position:66.666% 50%}
.route-grid article:nth-child(4)::before{background-position:100% 100%}
.business-grid article::before,.world-grid article::before,.route-grid article::before{display:none}

@media(min-width:1800px){
  body{font-size:clamp(16px,.82vw,24px)}
  main{max-width:2200px;margin:auto;border-inline:1px solid var(--line)}
  .site-header{padding-inline:max(18px,calc((100vw - 2200px)/2))}
}

@media(max-width:600px){
  .hero{min-height:0}
  .hero{background-position:58% center}
  .hero>.hero-art{height:auto;min-height:220px;object-fit:cover;object-position:center}
  .classifications-art{max-height:280px;object-fit:contain}
  .cards-section>div{overflow-x:auto;padding:8px}
  .strip-art{width:auto;max-width:none;height:150px}
  .sprite-feature-grid{grid-template-columns:1fr 1fr;overflow:visible!important}
  .world-sprites{grid-template-columns:repeat(5,170px);overflow-x:auto!important}
  .character-sprites{grid-template-columns:repeat(3,260px);overflow-x:auto!important}
  .route-sprites{grid-template-columns:repeat(4,210px);overflow-x:auto!important}
}