:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#10110f;color:#f5f7f4;text-rendering:geometricPrecision;--bg: #10110f;--bg-soft: #181916;--panel: #20211d;--text: #f5f7f4;--muted: #b7bcb3;--line: rgba(245, 247, 244, .15);--green: #43d89a;--coral: #ff6d61;--yellow: #f4d35e;--ink: #0a0b0a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.button{min-height:48px;border:1px solid transparent;border-radius:8px;padding:0 20px;color:var(--text);background:transparent;transition:transform .16s ease,border-color .16s ease,background .16s ease}.button:hover{transform:translateY(-1px)}.button:disabled{cursor:wait;opacity:.65;transform:none}.button.primary{background:var(--green);color:var(--ink);font-weight:800;box-shadow:0 16px 40px #43d89a38}.button.ghost,.button.quiet{border-color:var(--line);background:#f5f7f40d}.homePage{min-height:100vh;background:var(--bg)}.hero{position:relative;display:grid;min-height:82svh;overflow:hidden;isolation:isolate}.heroImage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-3;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.1) brightness(.6)}.heroOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(90deg,#10110ff0,#10110f9e 52%,#10110f40),linear-gradient(0deg,var(--bg),transparent 28%)}.topbar{display:flex;align-items:center;justify-content:space-between;width:min(1120px,calc(100% - 36px));margin:0 auto;padding:22px 0}.brand{text-decoration:none;font-size:1.05rem;font-weight:900;letter-spacing:0}.heroContent{width:min(1120px,calc(100% - 36px));margin:0 auto;align-self:center;padding:52px 0 96px}.eyebrow{margin:0 0 18px;color:var(--green);font-size:.82rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.hero h1,.practiceChrome h1{max-width:780px;margin:0;font-size:clamp(2.7rem,9vw,6.8rem);line-height:.92;letter-spacing:0}.heroText{max-width:620px;margin:24px 0 32px;color:var(--muted);font-size:clamp(1.05rem,2.5vw,1.35rem);line-height:1.55}.heroButton{min-width:190px}.introBand{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;width:min(1120px,calc(100% - 36px));margin:0 auto;padding:64px 0 72px}.introBand h2{max-width:560px;margin:0;font-size:clamp(2rem,5vw,4.4rem);line-height:1;letter-spacing:0}.introGrid{display:grid;gap:14px}.introGrid article,.twisterItem,.topicBlock,.timerPanel{border:1px solid var(--line);border-radius:8px;background:#f5f7f40b}.introGrid article{padding:20px}.introGrid span{color:var(--coral);font-weight:900}.introGrid h3{margin:10px 0 8px;font-size:1.12rem}.introGrid p{margin:0;color:var(--muted);line-height:1.55}.siteFooter{padding:24px 18px 34px;color:#8f958b;text-align:center;font-size:.88rem}.siteFooter a{color:#cbd1c7}.practicePage{min-height:100vh;padding:24px 18px 40px;background:linear-gradient(180deg,rgba(255,109,97,.12),transparent 280px),var(--bg)}.practiceChrome{width:min(1060px,100%);margin:0 auto;padding:28px 0 0}.stepLabel{display:inline-flex;margin:0 0 18px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--yellow);font-size:.8rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.practiceChrome h1{font-size:clamp(2.25rem,7vw,5.4rem)}.practiceKicker{max-width:850px;margin:24px 0 0;color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);line-height:1.6}.practiceBody{margin-top:32px}.practiceFooter{display:flex;justify-content:flex-start;margin-top:28px}.twisterList{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.twisterItem{display:flex;min-height:190px;flex-direction:column;justify-content:space-between;padding:18px}.twisterItem p{margin:0;font-size:1.1rem;font-weight:750;line-height:1.35}.metaRow,.styleLayers{display:flex;flex-wrap:wrap;gap:8px}.metaRow span,.styleLayers span{border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--muted);font-size:.78rem}.wordPair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin-bottom:22px}.wordPair strong{display:grid;min-height:118px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:clamp(1.8rem,6vw,4.4rem);line-height:1;overflow-wrap:anywhere}.wordPair span{color:var(--coral);font-weight:900}.timerPanel{display:grid;grid-template-columns:auto minmax(180px,1fr);align-items:center;gap:20px;padding:18px}.timerDial{position:relative;width:min(220px,58vw);aspect-ratio:1}.timerSvg{width:100%;height:100%;transform:rotate(-90deg)}.timerTrack,.timerProgress{fill:none;stroke-width:13}.timerTrack{stroke:#f5f7f41a}.timerProgress{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset .12s linear}.timerReadout{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center}.timerReadout strong{font-size:clamp(2.2rem,10vw,3.4rem);line-height:1}.timerLabel,.timerReadout small{color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase}.timerActions{display:flex;flex-wrap:wrap;gap:10px}.timerStart{min-width:150px}.topicBlock{padding:24px;margin-bottom:22px}.topicText{max-width:940px;margin:0 0 18px;font-size:clamp(1.45rem,3.8vw,3rem);font-weight:850;line-height:1.08}.compactTopic .topicText{font-size:clamp(1.45rem,4vw,3.2rem)}.ladderGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.completionMark,.loadingPulse{display:grid;min-height:240px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--green);font-size:clamp(1.5rem,5vw,3rem);font-weight:900;text-align:center}.errorLine{border:1px solid rgba(255,109,97,.45);border-radius:8px;padding:14px 16px;color:#ffc4bd;background:#ff6d6114}@media(max-width:900px){.introBand,.twisterList,.ladderGrid{grid-template-columns:1fr}.twisterItem{min-height:150px}}@media(max-width:720px){.hero{min-height:86svh}.topbar,.heroContent,.introBand{width:min(100% - 28px,1120px)}.heroContent{padding-bottom:72px}.wordPair{grid-template-columns:1fr}.wordPair span{text-align:center}.timerPanel{grid-template-columns:1fr;justify-items:center;text-align:center}.timerActions,.practiceFooter{width:100%}.timerActions .button,.practiceFooter .button{flex:1 1 150px}}
