:root{
  --bg:#f6f3ee;--fg:#050505;--muted:#333;--card:#fffdf8;--line:#050505;--accent:#ff3d00;--shadow:#050505;
  color-scheme:light dark;
}
[data-theme=dark]{--bg:#080808;--fg:#f7f4ee;--muted:#c8c3bb;--card:#111;--line:#f7f4ee;--accent:#ff3d00;--shadow:#ff3d00}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 Arial Black,Impact,Haettenschweiler,"Arial Narrow Bold",system-ui,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:radial-gradient(var(--fg) 1px,transparent 1px);background-size:9px 9px}
a{color:inherit;text-decoration:none}
.container{max-width:1220px;margin:0 auto;padding:18px}
.topbar,.box,.card,.panel,.footer{background:var(--card);border:3px solid var(--line);box-shadow:6px 6px 0 var(--shadow)}
.topbar{display:grid;grid-template-columns:1.4fr auto auto;align-items:stretch;margin-bottom:18px}
.logo{font-size:clamp(34px,5vw,64px);font-weight:1000;letter-spacing:-3px;padding:10px 18px;border-right:3px solid var(--line)}
.nav{display:flex}
.nav a,.theme-toggle{display:flex;align-items:center;padding:0 28px;border-right:3px solid var(--line);font-weight:1000;text-transform:uppercase;background:transparent;color:var(--fg)}
.theme-toggle{border:0;cursor:pointer;font:inherit}
.hero{display:grid;grid-template-columns:1.25fr .75fr 1fr;gap:18px;margin-bottom:18px}
.headline{font-size:clamp(58px,11vw,140px);line-height:.82;letter-spacing:-7px;text-transform:uppercase;margin:0}
.slant{display:inline-block;background:var(--card);border:3px solid var(--line);padding:.02em .08em;transform:rotate(-2deg);box-shadow:6px 6px 0 var(--shadow)}
.slant:nth-child(2){transform:rotate(1deg) translateX(20px)}
.accent{background:var(--accent);color:#fff;transform:rotate(-1deg) translateX(45px)}
.intro{font-size:clamp(20px,2.8vw,34px);font-weight:1000;padding:28px}
.geo{min-height:320px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--fg) 0 35%,transparent 35% 100%),var(--card)}
.geo:before{content:"";position:absolute;right:40px;top:35px;width:150px;height:150px;border-radius:50%;background:var(--accent)}
.geo:after{content:"";position:absolute;right:0;bottom:0;border-left:260px solid transparent;border-bottom:210px solid var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;background:var(--accent);color:#fff;border:3px solid var(--line);box-shadow:5px 5px 0 var(--shadow);padding:14px 22px;text-transform:uppercase;font-weight:1000;margin:8px 10px 8px 0}
.btn.white{background:var(--card);color:var(--fg)}
.btn:hover{animation:jolt .22s steps(2,end)}
@keyframes jolt{0%{transform:translate(0)}35%{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--shadow)}70%{transform:translate(-2px,1px)}100%{transform:translate(0)}}
.micro{padding:16px;margin-bottom:18px}
.micro h2,.section-title{font-size:clamp(32px,5vw,58px);line-height:.9;text-transform:uppercase;margin:0 0 12px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{border:3px solid var(--line);padding:14px;background:var(--card);min-height:120px}
.demo-button{border:3px solid var(--line);padding:12px;background:var(--card);display:block;text-align:center;margin-top:12px;box-shadow:4px 4px 0 var(--shadow)}
.step:nth-child(3) .demo-button{background:var(--accent);color:#fff;transform:translate(5px,5px);box-shadow:0 0 0 var(--shadow)}
.section{display:grid;grid-template-columns:230px 1fr;gap:18px;margin-bottom:18px}
.section-title{border:3px solid var(--line);padding:14px;background:var(--card);box-shadow:6px 6px 0 var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px}
.card{padding:16px;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;text-transform:uppercase}
.card .icon{font-size:42px;line-height:1}
.card small,.small{font-family:system-ui,sans-serif;font-weight:700;color:var(--muted);text-transform:none}
.arrow{align-self:flex-end;border:2px solid var(--accent);color:var(--accent);padding:0 8px;font-size:22px}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{padding:18px;margin-bottom:18px}
h1{font-size:clamp(44px,8vw,90px);line-height:.9;text-transform:uppercase;margin:0 0 18px}
h2,h3{margin:0 0 12px;text-transform:uppercase}
pre{background:#050505;color:#f7f4ee;border:3px solid var(--line);padding:14px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
iframe{width:100%;height:360px;border:3px solid var(--line);background:var(--card)}
input[type=text],input[type=number]{width:100%;border:3px solid var(--line);background:var(--card);color:var(--fg);font:inherit;padding:12px}
.footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:18px}
.footer>*{padding:22px;border-right:3px solid var(--line)}
.footer>*:last-child{border-right:0}
@media(max-width:800px){
  .topbar{grid-template-columns:1fr}.logo{border-right:0;border-bottom:3px solid var(--line)}.nav{overflow:auto;border-bottom:3px solid var(--line)}.nav a{padding:14px 18px}
  .hero,.section,.content-grid,.steps,.footer{grid-template-columns:1fr}
  .headline{letter-spacing:-3px}.accent{transform:rotate(-1deg)}
  .footer>*{border-right:0;border-bottom:3px solid var(--line)}.footer>*:last-child{border-bottom:0}
}

/* v0.5.1 fixes: heading containment, readable iframe scripts, actual micro-interaction */
.section{
  grid-template-columns:minmax(220px,260px) 1fr;
  align-items:stretch;
}
.section-title{
  font-size:clamp(34px,4vw,54px);
  letter-spacing:-2px;
  overflow:hidden;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.cards{min-width:0}
.card{min-width:0;overflow:hidden}
.card strong{font-size:clamp(15px,1.55vw,22px);line-height:.98;overflow-wrap:anywhere}
.icon{overflow:hidden}
.panel,.box{min-width:0;overflow:hidden}
.content-grid{min-width:0}
pre{max-width:100%}
iframe{background:#fffdf8;color:#050505}

.micro .step{
  cursor:pointer;
  transition:none;
  position:relative;
}
.micro .step:focus-within,
.micro .step.active{
  background:var(--accent);
  color:#fff;
  animation:jolt .22s steps(2,end);
}
.micro .step.active .demo-button{
  background:var(--fg);
  color:var(--bg);
  box-shadow:0 0 0 var(--shadow);
  transform:translate(5px,5px);
}
.micro .step button.demo-button{
  width:100%;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.micro-note{margin-top:10px;font-family:system-ui,sans-serif;font-weight:800;color:var(--muted)}
@media(max-width:800px){
  .section{grid-template-columns:1fr}
  .section-title{font-size:clamp(42px,14vw,76px)}
  .topbar{box-shadow:4px 4px 0 var(--shadow)}
}
@media(max-width:520px){
  .headline{font-size:clamp(48px,20vw,84px)}
  .intro{font-size:18px}
  .section-title{font-size:clamp(38px,16vw,64px)}
}


/* v0.5.2: cleaner headings/cards + functional micro-interaction */
.section{
  grid-template-columns:minmax(260px,320px) minmax(0,1fr);
}
.section-title{
  font-size:clamp(38px,4.4vw,66px);
  line-height:.82;
  letter-spacing:-2px;
  word-break:normal!important;
  overflow-wrap:normal!important;
  white-space:normal;
}
.section-title span{
  display:block;
  font-size:.62em;
  letter-spacing:-1px;
  margin-top:.08em;
}
.cards{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-items:stretch;
}
.card{
  min-height:150px;
  overflow:hidden;
}
.card strong{
  font-size:clamp(18px,1.8vw,24px);
  line-height:.95;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  max-width:100%;
}
.card .icon{
  font-size:clamp(34px,3vw,48px);
  min-height:48px;
}
.card small{line-height:1.25}
.micro-stage{
  border:3px solid var(--line);
  background:var(--card);
  padding:16px;
  margin:14px 0;
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:14px;
  align-items:center;
}
.snap-button{
  border:3px solid var(--line);
  background:var(--accent);
  color:#fff;
  box-shadow:6px 6px 0 var(--shadow);
  padding:16px 22px;
  font:inherit;
  text-transform:uppercase;
  cursor:pointer;
}
.snap-button:active,
.snap-button.snap-now{
  animation:jolt .22s steps(2,end);
}
.micro-status{
  border:3px solid var(--line);
  padding:14px;
  font-size:clamp(18px,2vw,26px);
  text-transform:uppercase;
}
.micro .step.active{
  background:var(--accent);
  color:#fff;
}
.micro .step.active .demo-button{
  background:var(--fg);
  color:var(--bg);
}
.micro .step.locked{
  background:var(--fg);
  color:var(--bg);
}
@media(max-width:900px){
  .section{grid-template-columns:1fr}
  .section-title{font-size:clamp(46px,12vw,78px)}
  .cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}
@media(max-width:640px){
  .micro-stage{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
  .card strong{font-size:18px}
}


/* v0.5.4: homepage geometry + MD5 duplicate-demo cleanup */
.geo{
  min-height:320px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,var(--fg) 0 34%,transparent 34% 100%),
    linear-gradient(315deg,var(--fg) 0 22%,transparent 22% 100%),
    var(--card)!important;
}
.geo:before{
  content:"";
  position:absolute;
  right:42px;
  top:42px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--accent);
  z-index:2;
}
.geo:after{
  content:"";
  position:absolute;
  left:24px;
  bottom:24px;
  width:145px;
  height:145px;
  border:3px solid var(--line);
  background:
    linear-gradient(90deg,transparent 31px,var(--line) 32px,transparent 33px),
    linear-gradient(0deg,transparent 31px,var(--line) 32px,transparent 33px);
  background-size:32px 32px;
  opacity:.65;
  z-index:2;
}
[data-theme=dark] .geo:after{opacity:.45}
.feature-frame{
  min-height:210px;
}
.feature-frame iframe{
  height:170px;
}


/* v0.5.5: rework homepage geometric panel into a more balanced brutalist poster */
.geo{
  min-height:320px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(135deg,var(--fg) 0 32%,transparent 32%),
    linear-gradient(315deg,var(--fg) 0 24%,transparent 24%),
    var(--card)!important;
}
.geo:before{
  content:"";
  position:absolute;
  right:42px;
  top:46px;
  width:142px;
  height:142px;
  border-radius:50%;
  background:var(--accent);
  z-index:4;
}
.geo:after{
  content:"";
  position:absolute;
  left:30px;
  bottom:28px;
  width:150px;
  height:150px;
  border:3px solid var(--line);
  background:
    linear-gradient(90deg,transparent 29px,var(--line) 30px,transparent 31px),
    linear-gradient(0deg,transparent 29px,var(--line) 30px,transparent 31px);
  background-size:30px 30px;
  opacity:.55;
  z-index:4;
}
.geo .geo-stairs,
.geo .geo-cut,
.geo .geo-tag{
  position:absolute;
  display:block;
  z-index:3;
}
.geo .geo-stairs{
  left:0;
  top:0;
  width:48%;
  height:50%;
  background:
    linear-gradient(90deg,var(--fg) 0 22%,transparent 22%),
    linear-gradient(90deg,var(--fg) 0 34%,transparent 34%),
    linear-gradient(90deg,var(--fg) 0 46%,transparent 46%),
    linear-gradient(90deg,var(--fg) 0 58%,transparent 58%);
  background-size:100% 25%;
  background-repeat:no-repeat;
  background-position:0 0,0 33%,0 66%,0 100%;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.geo .geo-cut{
  right:0;
  bottom:0;
  width:58%;
  height:46%;
  background:var(--fg);
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.geo .geo-tag{
  right:22px;
  bottom:20px;
  width:46%;
  min-width:170px;
  transform:rotate(-3deg);
  border:3px solid var(--line);
  background:var(--card);
  color:var(--fg);
  box-shadow:5px 5px 0 var(--shadow);
  padding:12px;
  text-transform:uppercase;
  font-size:clamp(18px,2.4vw,28px);
  line-height:.95;
}
@media(max-width:900px){
  .geo{min-height:260px}
  .geo:before{width:110px;height:110px;right:28px;top:28px}
  .geo:after{width:115px;height:115px}
  .geo .geo-tag{font-size:18px;min-width:145px}
}


/* v0.5.6: simplify homepage geometric poster so it no longer breaks */
.geo{
  min-height:320px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--card)!important;
}
.geo:before,
.geo:after{
  content:none!important;
}
.geo .geo-stairs,
.geo .geo-cut,
.geo .geo-tag{
  position:absolute;
  display:block;
}
.geo .geo-stairs{
  left:28px;
  top:28px;
  width:58%;
  height:54%;
  background:
    linear-gradient(90deg,var(--fg) 0 100%) 0 0/100% 22% no-repeat,
    linear-gradient(90deg,var(--fg) 0 100%) 0 33%/78% 22% no-repeat,
    linear-gradient(90deg,var(--fg) 0 100%) 0 66%/56% 22% no-repeat,
    linear-gradient(90deg,var(--fg) 0 100%) 0 100%/34% 22% no-repeat;
  z-index:2;
}
.geo .geo-cut{
  right:0;
  bottom:0;
  width:64%;
  height:58%;
  background:var(--fg);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  z-index:1;
}
.geo .geo-circle{
  position:absolute;
  right:42px;
  top:42px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:var(--accent);
  z-index:3;
}
.geo .geo-grid{
  position:absolute;
  left:38px;
  bottom:38px;
  width:140px;
  height:140px;
  border:3px solid var(--line);
  background:
    linear-gradient(90deg,transparent 27px,var(--line) 28px,transparent 29px),
    linear-gradient(0deg,transparent 27px,var(--line) 28px,transparent 29px);
  background-size:28px 28px;
  opacity:.55;
  z-index:3;
}
.geo .geo-tag{
  right:24px;
  bottom:22px;
  width:42%;
  min-width:160px;
  transform:rotate(-2deg);
  border:3px solid var(--line);
  background:var(--card);
  color:var(--fg);
  box-shadow:5px 5px 0 var(--shadow);
  padding:12px;
  text-transform:uppercase;
  font-size:clamp(18px,2.1vw,28px);
  line-height:.95;
  z-index:4;
}
@media(max-width:900px){
  .geo{min-height:260px}
  .geo .geo-circle{width:110px;height:110px;right:28px;top:28px}
  .geo .geo-grid{width:105px;height:105px;left:24px;bottom:28px}
  .geo .geo-tag{font-size:18px;min-width:135px}
}


/* v0.6: polish, footer/version, game page */
.version-tag{
  display:inline-block;
  margin-top:8px;
  border:2px solid var(--line);
  padding:4px 8px;
  background:var(--accent);
  color:#fff;
  text-transform:uppercase;
  font-size:12px;
}
.experiment-card{
  min-height:190px;
}
.meta-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0;
}
.meta-strip span{
  border:3px solid var(--line);
  background:var(--card);
  padding:8px 10px;
  box-shadow:3px 3px 0 var(--shadow);
  text-transform:uppercase;
  font-size:13px;
}
.game-layout{
  display:grid;
  grid-template-columns:minmax(260px,360px) 1fr;
  gap:18px;
  align-items:start;
}
.game-panel{
  background:var(--card);
  border:3px solid var(--line);
  box-shadow:6px 6px 0 var(--shadow);
  padding:16px;
}
.game-controls,
.game-presets{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.game-control{
  border:3px solid var(--line);
  background:var(--card);
  padding:10px;
}
.game-control label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
  text-transform:uppercase;
}
.game-control input[type=range]{
  width:100%;
  accent-color:var(--accent);
}
.game-button{
  border:3px solid var(--line);
  background:var(--card);
  color:var(--fg);
  box-shadow:4px 4px 0 var(--shadow);
  padding:10px 12px;
  font:inherit;
  text-transform:uppercase;
  cursor:pointer;
}
.game-button:hover{animation:jolt .22s steps(2,end)}
.game-button.chaos{background:var(--accent);color:#fff}
.game-button.danger{background:var(--fg);color:var(--bg)}
.game-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:12px;
}
.game-stat{
  border:3px solid var(--line);
  padding:8px;
  background:var(--card);
  text-transform:uppercase;
}
.grid-wrap{
  max-width:100%;
  overflow:auto;
  padding:12px;
  background:var(--card);
  border:3px solid var(--line);
  box-shadow:6px 6px 0 var(--shadow);
}
#grid{
  display:grid;
  border:3px solid var(--line);
  background:#050505;
  user-select:none;
  touch-action:manipulation;
}
.cell{
  width:13px;
  height:13px;
  border:1px solid #181818;
  background:#050505;
  cursor:pointer;
}
.game-note{
  margin-top:14px;
  border:3px solid var(--line);
  padding:12px;
  background:var(--accent);
  color:#fff;
}
@media(max-width:900px){
  .game-layout{grid-template-columns:1fr}
  .game-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .game-stats{grid-template-columns:1fr}
  .cell{width:10px;height:10px}
}


/* v0.6.1: Mutant Game of Life layout rework */
.game-layout{
  grid-template-columns:1fr !important;
}
.game-canvas{
  display:block;
}
.game-below{
  display:grid;
  grid-template-columns:1.2fr 1fr 0.9fr;
  gap:18px;
  margin-top:18px;
  align-items:start;
}
.game-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.game-sliders{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.game-presets{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.game-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.game-panel h2{
  margin-bottom:12px;
}
.game-panel.compact{
  padding:14px;
}
.game-control,
.game-stat,
.game-note{
  min-width:0;
}
.game-control label{
  font-size:13px;
}
.game-note{
  margin-top:0;
}
@media(max-width:1100px){
  .game-below{
    grid-template-columns:1fr 1fr;
  }
  .game-below .game-panel:last-child{
    grid-column:1 / -1;
  }
}
@media(max-width:760px){
  .game-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .game-sliders,
  .game-presets,
  .game-below{
    grid-template-columns:1fr;
  }
}


/* v0.6.2: Mutant Game of Life polish */
.game-below{
  grid-template-columns:1.2fr 1fr 1fr;
}
.game-panel h2{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.game-kicker{
  display:inline-block;
  border:2px solid var(--line);
  padding:3px 8px;
  background:var(--accent);
  color:#fff;
  text-transform:uppercase;
  font-size:11px;
  line-height:1;
}
.game-panel.prominent{
  box-shadow:8px 8px 0 var(--shadow);
}
.game-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.game-stat{
  padding:12px;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.game-stat-label{
  font-size:12px;
  letter-spacing:.04em;
  opacity:.85;
}
.game-stat-value{
  font-size:clamp(24px,3vw,42px);
  line-height:.9;
  font-weight:1000;
}
.game-state-live{
  background:var(--accent);
  color:#fff;
}
.game-state-live .game-stat-label,
.game-state-live .game-stat-value{
  color:#fff;
}
.game-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.legend-item{
  border:3px solid var(--line);
  background:var(--card);
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.legend-swatch{
  width:20px;
  height:20px;
  border:2px solid var(--line);
  flex:0 0 20px;
}
.sw-new{background:#19ff59}
.sw-young{background:#d7ff2f}
.sw-mature{background:#ff9b1a}
.sw-old{background:#ff4c28}
.sw-ancient{background:#9a4dff}
.sw-trail{background:#525252}
.legend-copy{
  font-size:12px;
  line-height:1.15;
  text-transform:uppercase;
}
.game-about{
  display:grid;
  gap:10px;
}
.about-block{
  border:3px solid var(--line);
  background:var(--card);
  padding:12px;
}
.about-block p{
  margin:0;
}
.about-list{
  margin:0;
  padding-left:18px;
}
.about-list li{
  margin:6px 0;
}
.game-mini-grid{
  display:grid;
  grid-template-columns:repeat(5,18px);
  gap:3px;
  width:max-content;
  margin-top:8px;
}
.game-mini-grid span{
  width:18px;
  height:18px;
  border:2px solid var(--line);
  background:var(--fg);
}
.game-note{
  background:var(--accent);
  color:#fff;
  font-weight:800;
}
@media(max-width:1180px){
  .game-below{
    grid-template-columns:1fr 1fr;
  }
  .game-below .game-panel:last-child{
    grid-column:1/-1;
  }
}
@media(max-width:760px){
  .game-below,
  .game-legend{
    grid-template-columns:1fr;
  }
}


/* v0.6.3: game page tidy-up */
.game-stat{
  overflow:hidden;
}
.game-stat-value{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.game-state-live .game-stat-value{
  font-size:clamp(20px,2.4vw,34px);
  line-height:.92;
}
.game-state-live #stateLabel{
  display:block;
  max-width:100%;
}


/* v0.6.4: Lighthouse accessibility fixes */
a,
button,
.btn,
.theme-toggle,
.game-button,
.arrow{
  min-width:44px;
  min-height:44px;
}

.nav a{
  min-width:64px;
  min-height:56px;
}

.btn,
.snap-button,
.game-button.chaos,
.micro .step.active,
.game-state-live,
.game-note,
.version-tag,
.game-kicker{
  color:#050505 !important;
}

.btn,
.snap-button,
.game-button.chaos,
.game-note,
.version-tag,
.game-kicker{
  background:var(--accent) !important;
}

.btn.white{
  background:var(--card) !important;
  color:var(--fg) !important;
}

.micro .step.active .demo-button{
  background:var(--card) !important;
  color:var(--fg) !important;
}

.game-state-live .game-stat-label,
.game-state-live .game-stat-value,
.game-state-live #stateLabel{
  color:#050505 !important;
}

.demo-button,
button.demo-button{
  color:var(--fg);
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

:focus-visible{
  outline:4px solid var(--accent);
  outline-offset:3px;
}


/* v0.6.5: final Lighthouse accessibility cleanup */
.demo-button,
button.demo-button,
.step .demo-button,
.micro .step .demo-button,
.micro .step.active .demo-button,
.micro .step.locked .demo-button{
  background:#fffdf8 !important;
  color:#050505 !important;
  border-color:#050505 !important;
  text-shadow:none !important;
}

.micro .step.active,
.micro .step.locked{
  color:#050505 !important;
}

.micro .step.active strong,
.micro .step.locked strong{
  color:#050505 !important;
}

.snap-button,
button.btn,
.btn,
.game-button.chaos,
.version-tag,
.game-kicker,
.game-note{
  color:#050505 !important;
  text-shadow:none !important;
}

/* Inline links need display sizing for Lighthouse touch-target checks */
.footer a,
.nav a,
.card,
.btn,
.theme-toggle,
.game-button,
.snap-button,
button,
input,
select,
textarea{
  min-width:44px;
  min-height:44px;
}

.footer a{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  margin:2px 8px 2px 0;
}

.nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
}

@media(max-width:760px){
  .footer a{
    width:100%;
    margin-right:0;
  }
  .nav a{
    min-width:72px;
  }
}