*{box-sizing:border-box}
html{min-height:100%;background:var(--lexa-bg);color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 5%,color-mix(in srgb,var(--lexa-accent) 10%,transparent),transparent 27rem),
    radial-gradient(circle at 88% 20%,color-mix(in srgb,var(--lexa-accent-2) 8%,transparent),transparent 30rem),
    linear-gradient(180deg,var(--lexa-bg),var(--lexa-bg-2) 55%,var(--lexa-bg));
  color:var(--lexa-text);
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  line-height:1.55;
}
button,a{font:inherit}
button{color:inherit}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 max(14px,calc((100vw - 980px)/2));
  border-bottom:2px solid var(--lexa-border);
  background:color-mix(in srgb,var(--lexa-bg) 90%,transparent);
  backdrop-filter:blur(12px);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--lexa-text);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.12em;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:2px solid var(--lexa-accent);
  border-radius:9px;
  color:var(--lexa-accent);
  background:var(--lexa-panel);
}
.topbar nav{display:flex;align-items:center;gap:.55rem}
.topbar nav a,.text-button{
  padding:.55rem .7rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--lexa-muted);
  text-decoration:none;
  cursor:pointer;
}
.topbar nav a:hover,.text-button:hover{
  color:var(--lexa-accent);
  background:color-mix(in srgb,var(--lexa-accent) 8%,transparent);
}
.page{
  width:min(980px,100%);
  margin:auto;
  padding:clamp(2rem,5vw,4.5rem) 14px 2rem;
}
.hero{text-align:center;margin-bottom:2rem}
.eyebrow{
  margin:0 0 .55rem;
  color:var(--lexa-accent);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero h1{
  margin:.25rem 0 .8rem;
  font-size:clamp(3.2rem,10vw,6.7rem);
  line-height:.88;
  letter-spacing:-.065em;
}
.hero h1 span{
  color:var(--lexa-accent);
}
.hero>p:last-child{
  max-width:720px;
  margin:auto;
  color:var(--lexa-muted);
}
.mode-switcher{
  max-width:760px;
  margin:0 auto 1rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}
.mode-button{
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.8rem;
  padding:1rem;
  border:2px solid var(--lexa-border);
  border-radius:12px;
  background:var(--lexa-panel);
  text-align:left;
  cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s;
}
.mode-button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--lexa-accent)}
.mode-button.active{
  border-color:var(--lexa-accent);
  background:color-mix(in srgb,var(--lexa-accent) 10%,var(--lexa-panel));
}
.mode-button:disabled{opacity:.55;cursor:not-allowed}
.mode-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:2px solid var(--lexa-border);
  border-radius:10px;
  color:var(--lexa-accent);
  font-size:1.25rem;
}
.mode-button strong,.mode-button small{display:block}
.mode-button small{color:var(--lexa-muted);margin-top:.1rem}
.lock-badge{
  padding:.3rem .45rem;
  border:1px solid var(--lexa-border);
  border-radius:999px;
  color:var(--lexa-muted);
  font-size:.62rem;
  white-space:nowrap;
}
.tier-panel,.game-panel{
  border:2px solid var(--lexa-border);
  border-radius:14px;
  background:var(--lexa-panel);
  box-shadow:0 18px 45px var(--lexa-shadow);
}
.tier-panel{padding:clamp(1rem,3vw,1.7rem)}
.section-heading,.game-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-bottom:1rem;
}
.section-heading h2,.game-head h2{
  margin:0;
  font-size:clamp(1.35rem,3.5vw,2rem);
}
.total-progress{text-align:right}
.total-progress span,.game-stats span{
  display:block;
  color:var(--lexa-muted);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.total-progress strong{font-size:1.8rem;color:var(--lexa-accent)}
.tier-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
}
.tier-card{
  position:relative;
  min-height:178px;
  display:flex;
  flex-direction:column;
  padding:1rem;
  border:2px solid var(--lexa-border);
  border-radius:11px;
  background:var(--lexa-bg-2);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
}
.tier-card:hover:not(:disabled){border-color:var(--lexa-accent);transform:translateY(-2px)}
.tier-card.active{border-color:var(--lexa-accent)}
.tier-card:disabled{opacity:.6;cursor:not-allowed}
.tier-length{
  display:block;
  color:var(--lexa-accent);
  font-size:2.4rem;
  font-weight:900;
  line-height:1;
}
.tier-title{margin:.35rem 0;font-weight:900}
.tier-progress-text{margin-top:auto;color:var(--lexa-muted);font-size:.76rem}
.progress-track{
  height:7px;
  margin-top:.55rem;
  border:1px solid var(--lexa-border);
  border-radius:999px;
  background:var(--lexa-bg);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0;
  background:var(--lexa-accent);
}
.tier-lock{
  position:absolute;
  inset:auto .75rem .75rem;
  color:var(--lexa-muted);
  font-size:.72rem;
}
.game-panel{
  margin-top:1rem;
  padding:clamp(1rem,3vw,1.8rem);
}
.game-panel[hidden]{display:none}
.game-stats{display:flex;gap:1.2rem;text-align:right}
.game-stats strong{font-size:1.05rem}
.mirror-board{
  --columns:4;
  display:grid;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  gap:clamp(4px,1vw,10px);
  margin:1.25rem auto .9rem;
  max-width:820px;
}
.letter-column{
  min-width:0;
  display:grid;
  grid-template-rows:repeat(var(--rows),1fr);
  padding:0;
  border:2px solid var(--lexa-border);
  border-radius:10px;
  background:var(--lexa-bg-2);
  cursor:pointer;
  overflow:hidden;
  transition:transform .13s,border-color .13s;
  touch-action:manipulation;
}
.letter-column:hover:not(:disabled){border-color:var(--lexa-accent);transform:translateY(-2px)}
.letter-column:active:not(:disabled){transform:scale(.97)}
.letter-column.flipping{animation:columnTurn .28s ease}
@keyframes columnTurn{50%{transform:scaleY(.08)}}
.letter{
  min-height:clamp(54px,10vw,84px);
  display:grid;
  place-items:center;
  border-bottom:1px solid var(--lexa-border);
  color:var(--lexa-text);
  font-size:clamp(1.5rem,5vw,2.8rem);
  font-weight:900;
  text-transform:uppercase;
}
.letter:last-child{border-bottom:0}
.letter:nth-child(even){background:color-mix(in srgb,var(--lexa-accent) 6%,transparent)}
.mirror-line{
  display:flex;
  align-items:center;
  gap:.8rem;
  max-width:820px;
  margin:auto;
  color:var(--lexa-muted);
  font-size:.62rem;
  letter-spacing:.15em;
}
.mirror-line span{
  flex:1;
  height:1px;
  background:var(--lexa-border);
}
.message{
  min-height:1.5em;
  margin:1rem auto;
  text-align:center;
  color:var(--lexa-muted);
}
.message.good{color:var(--lexa-success)}
.message.warn{color:var(--lexa-warning)}
.controls{
  display:flex;
  justify-content:center;
  gap:.55rem;
  flex-wrap:wrap;
}
.controls button,.primary-button{
  padding:.72rem .95rem;
  border:2px solid var(--lexa-border);
  border-radius:9px;
  background:var(--lexa-bg-2);
  color:var(--lexa-text);
  font-weight:800;
  cursor:pointer;
}
.controls button:hover:not(:disabled){
  border-color:var(--lexa-accent);
  color:var(--lexa-accent);
}
button:disabled{opacity:.42;cursor:not-allowed}
.primary-button{
  border-color:var(--lexa-accent);
  background:var(--lexa-accent);
  color:var(--lexa-bg);
}
.primary-button:hover{filter:brightness(1.07)}
.solved-panel{
  margin-top:1rem;
  padding:1.2rem;
  border:2px solid var(--lexa-success);
  border-radius:11px;
  background:color-mix(in srgb,var(--lexa-success) 7%,var(--lexa-bg-2));
  text-align:center;
}
.solved-panel[hidden]{display:none}
.solved-panel h2{margin:.35rem 0;font-size:clamp(1.35rem,4vw,2.2rem)}
.solved-panel>p:not(.eyebrow){color:var(--lexa-muted)}
.info-strip{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
  margin:1rem 0;
  color:var(--lexa-muted);
  font-size:.76rem;
}
.info-strip strong{color:var(--lexa-accent)}
.modal{
  width:min(680px,calc(100% - 24px));
  max-height:88vh;
  padding:0;
  border:2px solid var(--lexa-border);
  border-radius:14px;
  background:var(--lexa-panel);
  color:var(--lexa-text);
  box-shadow:0 24px 70px var(--lexa-shadow);
}
.modal::backdrop{background:rgba(0,0,0,.74)}
.modal-card{padding:1.2rem}
.modal-head{display:flex;justify-content:space-between;gap:1rem}
.modal h2{margin:.25rem 0 1rem}
.close-button{
  width:38px;height:38px;
  border:2px solid var(--lexa-border);
  border-radius:50%;
  background:var(--lexa-bg-2);
  cursor:pointer;
}
.progress-table{display:grid;gap:.55rem}
.progress-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.8rem;
  padding:.8rem;
  border:1px solid var(--lexa-border);
  border-radius:8px;
  background:var(--lexa-bg-2);
}
.progress-row span{color:var(--lexa-muted)}
.example-board{
  padding:1rem;
  border:2px solid var(--lexa-border);
  border-radius:10px;
  background:var(--lexa-bg-2);
}
.example-board>div{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.35rem;
}
.example-board span{
  display:grid;
  place-items:center;
  padding:.45rem;
  border:1px solid var(--lexa-border);
  border-radius:6px;
  font-weight:900;
}
.example-arrows{
  margin:.3rem 0;
  color:var(--lexa-accent);
  text-align:center;
}
.intro-card p{color:var(--lexa-muted)}
.article{
  width:min(800px,100%);
  margin:auto;
  padding:clamp(2rem,6vw,4.5rem) 16px;
}
.article h1{
  margin:.3rem 0 2rem;
  font-size:clamp(2.8rem,8vw,5rem);
  line-height:.9;
}
.article section{
  padding:1.15rem 0;
  border-top:2px solid var(--lexa-border);
}
.article p,.article li{color:var(--lexa-muted)}
.inline-button{display:inline-flex;text-decoration:none;margin-top:1rem}
footer{
  width:min(980px,100%);
  margin:2rem auto 0;
  padding:1.5rem 14px 2.5rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  border-top:2px solid var(--lexa-border);
  color:var(--lexa-muted);
  font-size:.75rem;
}
footer a{color:var(--lexa-muted);text-decoration:none}
footer a:hover{color:var(--lexa-accent)}
:focus-visible{outline:3px solid var(--lexa-accent);outline-offset:3px}

@media(max-width:760px){
  .tier-grid{grid-template-columns:1fr 1fr}
  .section-heading,.game-head{align-items:flex-start}
}
@media(max-width:520px){
  .topbar{padding:0 10px}
  .brand>span:last-child{display:none}
  .page{padding-top:2rem}
  .mode-switcher{grid-template-columns:1fr}
  .mode-button{grid-template-columns:auto 1fr auto}
  .game-head{display:block}
  .game-stats{margin-top:.7rem;text-align:left}
  .mirror-board{gap:3px}
  .letter-column{border-radius:7px}
  .letter{min-height:52px;font-size:clamp(1.25rem,8vw,2rem)}
  .controls{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:360px){
  .tier-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}