*{box-sizing:border-box}
html{min-height:100%;background:var(--lexa-bg);color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--lexa-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 84% -8%,color-mix(in srgb,var(--lexa-accent) 14%,transparent),transparent 36rem),
    radial-gradient(circle at 8% 35%,color-mix(in srgb,var(--lexa-accent-2) 7%,transparent),transparent 34rem),
    linear-gradient(180deg,var(--lexa-bg),var(--lexa-bg-2) 52%,var(--lexa-bg));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:
    radial-gradient(circle,color-mix(in srgb,var(--lexa-accent) 24%,transparent) 1px,transparent 1.5px),
    radial-gradient(circle,color-mix(in srgb,var(--lexa-text) 8%,transparent) 1px,transparent 1.5px);
  background-size:160px 160px,240px 240px;
  background-position:12px 25px,90px 120px;
  opacity:.55;
}
.grain{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}
button,a{font:inherit}
button{color:inherit}
.topbar{
  position:sticky;
  top:0;
  z-index:40;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 max(16px,calc((100vw - 1080px)/2));
  border-bottom:1px solid color-mix(in srgb,var(--lexa-accent) 42%,transparent);
  background:color-mix(in srgb,var(--lexa-bg) 91%,transparent);
  backdrop-filter:blur(18px);
}
.brand{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:.7rem;
  color:var(--lexa-text);
  text-decoration:none;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.2em;
}
.brand-mark{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--lexa-accent);
  border-radius:50%;
  color:var(--lexa-accent-2);
  background:
    radial-gradient(circle,var(--lexa-panel-2) 0 29%,transparent 31%),
    var(--lexa-panel);
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--lexa-accent) 6%,transparent),
    inset 0 0 20px color-mix(in srgb,var(--lexa-accent) 10%,transparent);
}
.brand small{
  color:var(--lexa-accent);
  font-size:.48rem;
  letter-spacing:.16em;
}
.topbar nav{display:flex;align-items:center;gap:.45rem}
.topbar nav a,.text-button,.icon-button{
  border:0;
  border-radius:999px;
  padding:.58rem .78rem;
  color:var(--lexa-muted);
  background:transparent;
  text-decoration:none;
  cursor:pointer;
  font-size:.76rem;
  font-weight:750;
}
.icon-button{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--lexa-border);
  color:var(--lexa-accent);
  font-size:1rem;
}
.icon-button[aria-pressed="false"]{color:var(--lexa-muted)}
.topbar nav a:hover,.text-button:hover,.icon-button:hover{
  color:var(--lexa-accent-2);
  background:color-mix(in srgb,var(--lexa-accent) 8%,transparent);
}
.page{
  width:min(1080px,100%);
  margin:auto;
  padding:clamp(2.5rem,6vw,6rem) 16px 2rem;
}
.hero{
  min-height:360px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:clamp(2rem,7vw,6rem);
  padding-bottom:3.4rem;
}
.eyebrow{
  margin:0 0 .65rem;
  color:var(--lexa-accent);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.hero h1{
  margin:.25rem 0 1.1rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4rem,10vw,7.8rem);
  line-height:.78;
  letter-spacing:-.07em;
}
.hero h1 span{
  display:block;
  color:var(--lexa-accent-2);
  text-shadow:
    0 0 24px color-mix(in srgb,var(--lexa-accent) 24%,transparent),
    0 12px 45px var(--lexa-shadow);
}
.lead{
  max-width:680px;
  color:var(--lexa-muted);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,2.2vw,1.18rem);
  line-height:1.65;
}
.hero-orbit{
  position:relative;
  width:min(360px,80vw);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
}
.hero-orbit::before,.hero-orbit::after{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:50%;
  background:
    radial-gradient(circle,color-mix(in srgb,var(--lexa-accent) 9%,transparent),transparent 62%);
  filter:blur(8px);
}
.hero-orbit::after{
  inset:22%;
  box-shadow:0 0 80px color-mix(in srgb,var(--lexa-accent) 17%,transparent);
}
.hero-orbit span{
  position:absolute;
  border:1px solid color-mix(in srgb,var(--lexa-accent) 60%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 18px color-mix(in srgb,var(--lexa-accent) 9%,transparent),
    inset 0 0 16px color-mix(in srgb,var(--lexa-accent) 4%,transparent);
}
.hero-orbit span:nth-child(1){inset:4%;animation:orbitSpin 22s linear infinite}
.hero-orbit span:nth-child(2){inset:18%;animation:orbitSpinReverse 17s linear infinite}
.hero-orbit span:nth-child(3){inset:32%;animation:orbitSpin 13s linear infinite}
.hero-orbit span:nth-child(4){inset:45%;animation:orbitSpinReverse 8s linear infinite}
.hero-orbit span::after{
  content:"";
  position:absolute;
  top:50%;
  left:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lexa-accent-2);
  box-shadow:0 0 16px var(--lexa-accent);
}
.hero-orbit b{
  position:relative;
  z-index:3;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid var(--lexa-accent);
  border-radius:50%;
  color:var(--lexa-accent-2);
  background:var(--lexa-panel);
  box-shadow:
    0 0 0 9px color-mix(in srgb,var(--lexa-accent) 5%,transparent),
    0 0 44px color-mix(in srgb,var(--lexa-accent) 24%,transparent);
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbitSpinReverse{to{transform:rotate(-360deg)}}
.tier-section{
  padding:clamp(1rem,3vw,1.8rem);
  border-top:1px solid color-mix(in srgb,var(--lexa-accent) 38%,transparent);
}
.section-heading,.game-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.3rem;
}
.section-heading h2,.game-heading h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:-.035em;
}
.total-stat{text-align:right}
.total-stat span,.total-stat small,.game-stats span{
  display:block;
  color:var(--lexa-muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.total-stat strong{
  color:var(--lexa-accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-size:2rem;
}
.tier-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.7rem;
}
.tier-card{
  position:relative;
  min-height:205px;
  display:flex;
  flex-direction:column;
  padding:1rem;
  overflow:hidden;
  border:1px solid var(--lexa-border);
  border-radius:14px;
  background:
    radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--lexa-accent) 8%,transparent),transparent 8rem),
    linear-gradient(145deg,var(--lexa-panel-2),var(--lexa-panel));
  text-align:left;
  cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.tier-card::before{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-48px;
  bottom:-50px;
  border:1px solid color-mix(in srgb,var(--lexa-accent) 28%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 15px color-mix(in srgb,var(--lexa-accent) 4%,transparent),
    0 0 0 31px color-mix(in srgb,var(--lexa-accent) 3%,transparent);
}
.tier-card:hover:not(:disabled),.tier-card.active{
  transform:translateY(-4px);
  border-color:var(--lexa-accent);
  box-shadow:0 18px 35px var(--lexa-shadow);
}
.tier-card:disabled{opacity:.5;cursor:not-allowed}
.tier-number{
  color:var(--lexa-accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-size:3.1rem;
  font-weight:800;
  line-height:.9;
}
.tier-title{
  display:block;
  margin:.55rem 0 .3rem;
  font-weight:900;
}
.tier-meta{
  color:var(--lexa-muted);
  font-size:.72rem;
  line-height:1.45;
}
.tier-progress{
  margin-top:auto;
  color:var(--lexa-muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.63rem;
}
.progress-track{
  display:block;
  height:5px;
  margin-top:.5rem;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--lexa-border) 45%,transparent);
}
.progress-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--lexa-accent),var(--lexa-accent-2));
}
.tier-lock{
  position:absolute;
  right:.8rem;
  top:.8rem;
  color:var(--lexa-muted);
  font-size:.8rem;
}
.game-panel{
  margin-top:1.2rem;
  padding:clamp(1rem,3vw,1.8rem);
  border:1px solid var(--lexa-border);
  border-radius:18px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--lexa-panel-2) 96%,transparent),var(--lexa-panel));
  box-shadow:0 28px 70px var(--lexa-shadow);
}
.game-panel[hidden]{display:none}
.game-stats{
  display:flex;
  gap:1.2rem;
  text-align:right;
}
.game-stats strong{
  display:block;
  margin-top:.15rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.18rem;
}
.board-shell{
  position:relative;
  width:min(780px,100%);
  aspect-ratio:1;
  margin:1rem auto .5rem;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.board-aura{
  position:absolute;
  inset:8%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--lexa-accent) 10%,transparent),transparent 68%);
  filter:blur(24px);
  animation:auraPulse 4.8s ease-in-out infinite alternate;
}
@keyframes auraPulse{to{transform:scale(1.05);opacity:.72}}
#ringCanvas{
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.board-hint{
  position:absolute;
  top:50%;
  z-index:4;
  transform:translateY(-50%);
  color:color-mix(in srgb,var(--lexa-muted) 72%,transparent);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.53rem;
  letter-spacing:.08em;
  pointer-events:none;
}
.board-hint.left{left:1.5%}
.board-hint.right{right:1.5%}
.message{
  min-height:1.6em;
  margin:.65rem auto 1rem;
  text-align:center;
  color:var(--lexa-muted);
}
.message.good{color:var(--lexa-success)}
.message.warn{color:var(--lexa-warning)}
.word-rack{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.45rem;
  max-width:820px;
  margin:0 auto 1rem;
}
.word-chip{
  min-width:0;
  padding:.65rem .7rem;
  border:1px solid color-mix(in srgb,var(--lexa-border) 70%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--lexa-bg) 45%,transparent);
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
}
.word-chip.solved{
  color:var(--lexa-success);
  border-color:color-mix(in srgb,var(--lexa-success) 62%,transparent);
  background:color-mix(in srgb,var(--lexa-success) 7%,transparent);
}
.main-controls{
  display:flex;
  justify-content:center;
  gap:.55rem;
  flex-wrap:wrap;
}
.main-controls button,.primary-button{
  padding:.72rem 1rem;
  border:1px solid var(--lexa-border);
  border-radius:999px;
  background:var(--lexa-panel-2);
  color:var(--lexa-text);
  font-weight:850;
  cursor:pointer;
  transition:transform .15s,border-color .15s,color .15s,box-shadow .15s;
}
.main-controls button:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:var(--lexa-accent);
  color:var(--lexa-accent-2);
}
button:disabled{opacity:.4;cursor:not-allowed}
.ring-controls{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem;
  max-width:820px;
  margin:1rem auto 0;
}
.ring-control{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:.35rem;
  padding:.35rem;
  border:1px solid color-mix(in srgb,var(--lexa-border) 70%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--lexa-bg) 42%,transparent);
}
.ring-control.selected{
  border-color:var(--lexa-accent);
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--lexa-accent) 6%,transparent);
}
.ring-control span{
  text-align:center;
  color:var(--lexa-muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.63rem;
  font-weight:800;
}
.ring-control button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--lexa-border);
  border-radius:50%;
  background:var(--lexa-panel-2);
  cursor:pointer;
}
.ring-control button:hover{
  color:var(--lexa-accent-2);
  border-color:var(--lexa-accent);
}
.solved-panel{
  position:relative;
  overflow:hidden;
  margin-top:1rem;
  padding:1.5rem;
  border:1px solid color-mix(in srgb,var(--lexa-success) 70%,transparent);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% -40%,color-mix(in srgb,var(--lexa-success) 18%,transparent),transparent 60%),
    color-mix(in srgb,var(--lexa-success) 5%,var(--lexa-panel));
  text-align:center;
}
.solved-panel[hidden]{display:none}
.solved-panel h2{
  margin:.3rem 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.5rem,4vw,2.5rem);
}
.solved-panel>p:not(.eyebrow){color:var(--lexa-muted)}
.solved-burst{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  color:color-mix(in srgb,var(--lexa-success) 16%,transparent);
  font-size:13rem;
  animation:burstSpin 9s linear infinite;
}
@keyframes burstSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.primary-button{
  position:relative;
  z-index:2;
  border-color:var(--lexa-accent);
  background:linear-gradient(135deg,var(--lexa-accent),var(--lexa-accent-2));
  color:var(--lexa-bg);
}
.primary-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px color-mix(in srgb,var(--lexa-accent) 22%,transparent);
}
.feature-strip{
  display:flex;
  justify-content:center;
  gap:1.6rem;
  flex-wrap:wrap;
  margin:1rem 0;
  color:var(--lexa-muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.7rem;
}
.feature-strip strong{color:var(--lexa-accent-2)}
.modal{
  width:min(700px,calc(100% - 24px));
  max-height:88vh;
  padding:0;
  border:1px solid var(--lexa-border);
  border-radius:18px;
  background:var(--lexa-panel);
  color:var(--lexa-text);
  box-shadow:0 26px 80px var(--lexa-shadow);
}
.modal::backdrop{
  background:rgba(4,2,1,.78);
  backdrop-filter:blur(7px);
}
.modal-card{padding:clamp(1rem,4vw,1.8rem)}
.modal-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
}
.modal h2{
  margin:.25rem 0 1rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.2rem;
}
.close-button{
  width:40px;
  height:40px;
  border:1px solid var(--lexa-border);
  border-radius:50%;
  background:var(--lexa-panel-2);
  cursor:pointer;
  font-size:1.3rem;
}
.progress-table{display:grid;gap:.55rem}
.progress-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.8rem;
  padding:.8rem;
  border:1px solid color-mix(in srgb,var(--lexa-border) 70%,transparent);
  border-radius:10px;
  background:var(--lexa-panel-2);
}
.progress-row span{color:var(--lexa-muted)}
.intro-modal ol{padding-left:1.3rem;color:var(--lexa-muted)}
.intro-modal li{margin:.45rem 0}
.intro-modal p{color:var(--lexa-muted)}
.intro-orbit{
  position:relative;
  width:min(300px,80vw);
  aspect-ratio:1;
  margin:1rem auto;
  border:1px solid var(--lexa-border);
  border-radius:50%;
  background:radial-gradient(circle,var(--lexa-panel-2),var(--lexa-bg));
}
.intro-orbit span{
  position:absolute;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--lexa-accent);
  border-radius:50%;
  background:var(--lexa-panel);
  color:var(--lexa-accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:900;
}
.intro-orbit span:nth-child(1){left:50%;top:7%;transform:translateX(-50%)}
.intro-orbit span:nth-child(2){right:7%;top:50%;transform:translateY(-50%)}
.intro-orbit span:nth-child(3){left:50%;bottom:7%;transform:translateX(-50%)}
.intro-orbit span:nth-child(4){left:7%;top:50%;transform:translateY(-50%)}
.intro-orbit b{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  color:var(--lexa-accent);
}
.article{
  width:min(820px,100%);
  margin:auto;
  padding:clamp(2.5rem,7vw,5.5rem) 16px;
}
.article h1{
  margin:.3rem 0 2rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.4rem,9vw,6rem);
  line-height:.82;
}
.article section{
  padding:1.3rem 0;
  border-top:1px solid color-mix(in srgb,var(--lexa-accent) 34%,transparent);
}
.article h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.6rem;
}
.article p,.article li{color:var(--lexa-muted);line-height:1.7}
.inline-button{display:inline-flex;text-decoration:none;margin-top:1rem}
footer{
  width:min(1080px,100%);
  margin:2rem auto 0;
  padding:1.6rem 16px 2.8rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb,var(--lexa-accent) 36%,transparent);
  color:var(--lexa-muted);
  font-size:.72rem;
}
footer a{color:var(--lexa-muted);text-decoration:none}
footer a:hover{color:var(--lexa-accent-2)}
:focus-visible{outline:3px solid var(--lexa-warning);outline-offset:3px}

@media(max-width:920px){
  .hero{grid-template-columns:1fr;min-height:auto;text-align:center}
  .hero-orbit{width:min(300px,72vw)}
  .lead{margin:auto}
  .tier-grid{grid-template-columns:repeat(3,1fr)}
  .ring-controls{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  .topbar{padding:0 10px}
  .brand small{display:none}
  .topbar nav a{display:none}
  .page{padding-top:2.2rem}
  .section-heading,.game-heading{display:block}
  .total-stat{text-align:left;margin-top:.8rem}
  .tier-grid{grid-template-columns:1fr 1fr}
  .game-stats{margin-top:.8rem;text-align:left;justify-content:flex-start}
  .board-hint{display:none}
  .ring-controls{grid-template-columns:1fr 1fr}
  .feature-strip{gap:.9rem}
}
@media(max-width:420px){
  .brand>span:nth-child(2){display:none}
  .hero h1{font-size:3.8rem}
  .tier-grid{grid-template-columns:1fr}
  .main-controls{display:grid;grid-template-columns:1fr 1fr}
  .ring-controls{grid-template-columns:1fr}
  .word-rack{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}