*{box-sizing:border-box}
html{min-height:100%;background:var(--lexa-bg);color-scheme:dark}
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 85% 0,color-mix(in srgb,var(--lexa-accent) 13%,transparent),transparent 34rem),
radial-gradient(circle at 10% 45%,color-mix(in srgb,var(--lexa-accent-2) 6%,transparent),transparent 34rem),
linear-gradient(180deg,var(--lexa-bg),var(--lexa-bg-2) 55%,var(--lexa-bg));
overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--lexa-accent) 14%,transparent) 1px,transparent 1.5px);background-size:120px 120px;opacity:.55}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.02;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: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}.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)}
.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,5.5rem) 16px 2rem}
.hero{min-height:330px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(2rem,7vw,6rem);padding-bottom:3rem}
.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.6rem);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-chain{display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap;padding:2rem;border:1px solid var(--lexa-border);border-radius:22px;background:radial-gradient(circle,color-mix(in srgb,var(--lexa-accent) 8%,transparent),transparent 70%),var(--lexa-panel);box-shadow:0 28px 65px var(--lexa-shadow)}
.hero-chain span{padding:.8rem 1rem;border:1px solid var(--lexa-accent);border-radius:999px;background:var(--lexa-panel-2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;letter-spacing:.18em;animation:chainPulse 4s ease-in-out infinite alternate}.hero-chain span:nth-of-type(2){animation-delay:-1.2s}.hero-chain span:nth-of-type(3){animation-delay:-2.4s}.hero-chain i{color:var(--lexa-accent-2);font-style:normal;font-size:1.4rem}
@keyframes chainPulse{to{transform:translateY(-6px);box-shadow:0 8px 24px color-mix(in srgb,var(--lexa-accent) 16%,transparent)}}
.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.1rem);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:190px;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;right:.9rem;bottom:.35rem;color:color-mix(in srgb,var(--lexa-accent) 20%,transparent);font-family:Georgia,serif;font-size:5rem}
.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:2.8rem;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}
.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}
.goal-panel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;max-width:760px;margin:1.2rem auto;padding:1rem;border:1px solid var(--lexa-border);border-radius:16px;background:var(--lexa-bg)}
.goal-panel>div:not(.goal-arrow){text-align:center}.goal-panel span{display:block;color:var(--lexa-muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase}.goal-panel strong{display:block;margin-top:.25rem;color:var(--lexa-accent-2);font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,5vw,2.8rem);letter-spacing:.12em;text-transform:uppercase}.goal-arrow{color:var(--lexa-accent);font-size:2rem}
.current-word{--length:4;display:grid;grid-template-columns:repeat(var(--length),minmax(0,1fr));gap:clamp(5px,1vw,10px);max-width:760px;margin:1rem auto}
.letter-slot{min-width:0;min-height:clamp(62px,12vw,96px);display:grid;place-items:center;border:1px solid var(--lexa-border);border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--lexa-accent) 5%,var(--lexa-panel-2)),var(--lexa-panel));font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.6rem,6vw,3.2rem);font-weight:900;text-transform:uppercase;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.letter-slot:hover,.letter-slot.selected{transform:translateY(-3px);border-color:var(--lexa-accent);box-shadow:0 10px 25px color-mix(in srgb,var(--lexa-accent) 10%,transparent)}.letter-slot.selected{color:var(--lexa-accent-2)}
.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)}.message.error{color:var(--lexa-danger)}
.alphabet{display:grid;grid-template-columns:repeat(10,1fr);gap:.35rem;max-width:820px;margin:0 auto 1rem}
.key{min-width:0;min-height:42px;border:1px solid color-mix(in srgb,var(--lexa-border) 78%,transparent);border-radius:8px;background:var(--lexa-panel-2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:850;text-transform:uppercase;cursor:pointer}.key:hover{border-color:var(--lexa-accent);color:var(--lexa-accent-2);transform:translateY(-2px)}
.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}
.chain-heading{max-width:820px;margin:1.2rem auto .5rem;display:flex;justify-content:space-between;gap:1rem;color:var(--lexa-muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.chain-list{display:flex;align-items:center;gap:.45rem;max-width:820px;margin:auto;padding:.75rem;overflow-x:auto;border:1px solid color-mix(in srgb,var(--lexa-border) 70%,transparent);border-radius:12px;background:color-mix(in srgb,var(--lexa-bg) 45%,transparent);scrollbar-width:thin}
.chain-node{flex:0 0 auto;padding:.55rem .7rem;border:1px solid var(--lexa-border);border-radius:999px;background:var(--lexa-panel-2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.chain-node.current{border-color:var(--lexa-accent);color:var(--lexa-accent-2)}.chain-arrow{flex:0 0 auto;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:color-mix(in srgb,var(--lexa-success) 5%,var(--lexa-panel));text-align:center}.solved-panel[hidden]{display:none}.solved-panel h2{position:relative;margin:.3rem 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.35rem,4vw,2.3rem)}.solved-panel>p{position:relative}.solved-line{position:absolute;inset:50% -10% auto;height:2px;background:linear-gradient(90deg,transparent,var(--lexa-success),transparent);box-shadow:0 0 22px var(--lexa-success);animation:linePulse 2s ease-in-out infinite alternate}@keyframes linePulse{to{transform:scaleX(.75);opacity:.45}}
.primary-button{position:relative;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;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-chain{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.intro-chain span{padding:.6rem .75rem;border:1px solid var(--lexa-border);border-radius:999px;background:var(--lexa-panel-2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900}.intro-chain b{color:var(--lexa-accent)}.modal p{color:var(--lexa-muted)}
.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;text-align:center}.lead{margin:auto}.tier-grid{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}.alphabet{grid-template-columns:repeat(7,1fr)}}
@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}.alphabet{grid-template-columns:repeat(6,1fr)}.goal-panel{gap:.45rem;padding:.7rem}.goal-arrow{font-size:1.3rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}