:root{color-scheme:dark;--bg:#071925;--panel:#0b2330;--panel-2:#0e2a38;--line:#1b5061;--text:#f7fbff;--muted:#a7c3cf;--cyan:#21d1eb;--green:#47dca0}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0%,#11384a 0%,var(--bg) 38%);color:var(--text);font-family:Poppins,sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.topbar{max-width:1280px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-weight:800}.brand span,.hero h1 span{color:var(--cyan)}.back{color:var(--muted);font-size:.85rem}.back:hover{color:var(--cyan)}main{max-width:1280px;margin:auto;padding:8px 28px 80px}
.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:linear-gradient(115deg,#0a2430,#09202e 55%,#0c3040);padding:48px clamp(22px,5vw,64px);box-shadow:0 24px 70px #0004}.hero:after{content:"↗";position:absolute;right:7%;top:-65px;font-size:22rem;color:#20cce508;line-height:1;pointer-events:none}.eyebrow{font-weight:800;letter-spacing:.13em;color:#82eeff;font-size:.7rem}.hero h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1.1;letter-spacing:-.05em;margin:18px 0}.hero p{color:var(--muted);font-size:clamp(.95rem,2vw,1.1rem);max-width:680px;line-height:1.7}.hero-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.hero-stats span{display:flex;gap:7px;align-items:baseline;border:1px solid #286171;background:#103441;padding:10px 16px;border-radius:12px;color:var(--muted);font-size:.78rem}.hero-stats b{color:var(--cyan);font-size:1.15rem}
.versions,.workspace{margin-top:50px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-heading h2{margin:5px 0 0;font-size:clamp(1.45rem,3vw,2.2rem)}.section-note{color:var(--muted);font-size:.82rem}.version-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.version-card{text-align:left;min-height:174px;border:1px solid #24495a;border-radius:18px;padding:22px;background:linear-gradient(140deg,#0e2936,#0a202d);color:var(--text);display:flex;flex-direction:column;gap:9px;transition:transform .2s,border-color .2s}.version-card.available{border-color:#228ca1;background:linear-gradient(140deg,#0d3a49,#0b2735)}.version-card.available:hover,.version-card.available:focus-visible{transform:translateY(-3px);border-color:var(--cyan)}.version-card:disabled{cursor:default;opacity:.55}.version-badge{font-size:.65rem;font-weight:800;color:var(--cyan);letter-spacing:.08em}.version-card:disabled .version-badge{color:var(--muted)}.version-card strong{font-size:1.3rem}.version-card small{color:var(--muted);line-height:1.5}.version-card .arrow{margin-top:auto;color:var(--cyan)}
.practice-layout{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;align-items:start}.verb-panel,.lesson{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px}.verb-panel{position:sticky;top:12px}.verb-panel label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:10px}.verb-panel input{width:100%;border:1px solid #347083;background:#071c28;color:var(--text);border-radius:12px;padding:12px 14px;outline:none}.verb-panel input:focus{border-color:var(--cyan)}.verb-list{max-height:620px;overflow:auto;margin-top:14px;display:grid;gap:6px}.verb-item{width:100%;border:1px solid transparent;background:none;color:var(--muted);border-radius:10px;text-align:left;padding:9px 12px;display:flex;justify-content:space-between;gap:10px}.verb-item:hover,.verb-item.active{background:var(--panel-2);border-color:#27637a;color:var(--text)}.verb-item span{color:#76a6b6;font-size:.72rem}.lesson-top{display:flex;justify-content:space-between;align-items:center}.lesson-index,.level-chip{font-weight:800;font-size:.68rem;letter-spacing:.08em;color:var(--cyan)}.level-chip{background:#0e4851;padding:5px 10px;border-radius:8px}.lesson h3{font-size:clamp(2rem,4vw,3.4rem);margin:12px 0 4px;letter-spacing:-.04em}.meaning{color:var(--green);font-weight:700;margin:0}.lesson-hint{color:var(--muted);font-size:.82rem;margin:26px 0 16px}.examples{display:grid;gap:10px}.example{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;padding:15px;border:1px solid #205365;border-radius:14px;background:#0d2b39}.example-index{color:var(--cyan);font-weight:800}.example-en{font-size:.96rem;font-weight:600;margin:0 0 6px}.example-es{color:var(--muted);font-size:.85rem;margin:0}.listen{border:1px solid #377385;background:#103d4b;color:var(--cyan);border-radius:9px;padding:7px 10px}.listen:hover{background:#155267}.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:25px}.lesson-nav button{border:1px solid #347083;background:#103746;color:var(--text);border-radius:10px;padding:10px 16px}.lesson-nav button:hover{border-color:var(--cyan)}.lesson-nav button:disabled{opacity:.35;cursor:default}.page-status{color:var(--muted)}
@media(max-width:800px){.practice-layout{grid-template-columns:1fr}.verb-panel{position:static}.verb-list{max-height:250px}.section-heading{align-items:start;flex-direction:column}}@media(max-width:540px){.topbar{padding:18px}.brand{font-size:.85rem}.back{font-size:.73rem}main{padding:0 16px 60px}.hero{padding:30px 22px}.version-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.version-card{padding:16px;min-height:150px}.version-card strong{font-size:1rem}.example{grid-template-columns:28px 1fr}.listen{grid-column:2;justify-self:start}}
.version-card[aria-disabled="true"]{cursor:default;opacity:.55}
.version-card[aria-disabled="true"] .version-badge{color:var(--muted)}