:root{--bg:#04131f;--panel:#071827;--line:#294967;--text:#edf4ff;--muted:#91a5be;--amber:#ffb020;--cyan:#2ce0ff;--green:#50e39a;--coral:#ff7083;--mono:'JetBrains Mono',monospace;--display:'Rajdhani',sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--bg);background-image:linear-gradient(rgba(26,71,94,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(26,71,94,.16) 1px,transparent 1px);background-size:80px 80px;color:var(--text);font-family:var(--display)}button,input{font:inherit}.nav{height:76px;padding:0 clamp(16px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,176,32,.25);background:rgba(4,19,31,.96)}.brand,.back{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 .72rem var(--mono);letter-spacing:.15em}.brand img{width:76px}.brand b,.back{color:var(--amber)}.back{padding:13px;border:1px solid rgba(255,176,32,.45)}.stage{padding:45px 22px}.app{width:min(1420px,100%);margin:auto}.hero{text-align:center}.hero>p,.heading p,.challenge-head p,.qualify>p,.review>p,.seo>p{margin:0;color:var(--amber);font:700 .68rem var(--mono);letter-spacing:.13em}.hero h1{margin:14px 0 8px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:clamp(2.1rem,5vw,4.2rem);line-height:1}.hero h1 i{width:60px;height:2px;background:var(--amber)}.hero>span{color:var(--muted);font:600 .68rem var(--mono);letter-spacing:.1em}.modes{width:min(650px,100%);margin:32px auto;display:grid;grid-template-columns:1fr 1fr;padding:8px;border:1px solid var(--line)}.modes button{height:58px;border:0;background:none;color:var(--muted);font:700 .75rem var(--mono);letter-spacing:.12em;cursor:pointer}.modes button.active,.challenge-head button{background:linear-gradient(#ffc75d,#ffab18);color:#08121b}main,.review{padding:clamp(20px,3.2vw,42px);border:1px solid var(--line);background:rgba(4,17,29,.92)}.heading,.challenge-head{display:flex;align-items:end;justify-content:space-between;gap:24px}.heading h2,.challenge-head h2,.qualify h2,.review h2,.seo h2{margin:8px 0 0;font-size:clamp(1.7rem,3vw,2.8rem)}.heading>span{max-width:510px;color:var(--muted);font-size:1.05rem}.timeline{position:relative;margin:34px 0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.timeline:before{content:"";position:absolute;left:12%;right:12%;top:27px;height:2px;background:var(--cyan);opacity:.45}.timeline>div{position:relative;padding:20px;border:1px solid var(--line);background:var(--panel)}.timeline b{position:relative;z-index:1;display:table;margin:0 auto 18px;padding:8px 14px;background:var(--bg);color:var(--cyan);font:700 .72rem var(--mono)}.timeline span{display:flex;justify-content:space-between;margin-top:12px;color:var(--muted);font:700 .58rem var(--mono)}.timeline output{color:var(--text)}input[type=range]{width:100%;accent-color:var(--cyan)}.decision{padding:24px;border:1px solid var(--green);background:rgba(31,102,76,.25)}.decision.bad{border-color:var(--coral);background:rgba(108,42,56,.24)}.decision small{display:block;color:var(--muted);font:700 .58rem var(--mono)}.decision strong{display:block;margin:8px 0;color:var(--green);font:700 clamp(1.4rem,3vw,2.2rem) var(--mono)}.decision.bad strong{color:var(--coral)}.decision p{margin:0;color:var(--muted)}.rule-cards,.min-grid,.review>div,.seo>div{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.rule-cards article,.min-grid article,.review article,.seo article{padding:20px;border:1px solid var(--line);background:var(--panel)}.rule-cards b{float:left;display:grid;width:34px;height:34px;margin-right:12px;place-items:center;border:1px solid var(--amber);color:var(--amber);font-family:var(--mono)}.rule-cards h3{margin:0}.rule-cards p,.min-grid span,.review article p,.seo article p,.scope{color:var(--muted)}.callout{margin-top:18px;padding:20px;border-left:5px solid var(--cyan);background:#092233}.callout strong{color:var(--cyan);font:700 .8rem var(--mono)}.callout p{margin-bottom:0;color:var(--muted)}.qualify{margin-top:42px}.min-grid{grid-template-columns:repeat(4,1fr)}.min-grid small,.min-grid strong,.min-grid span{display:block}.min-grid small{color:var(--muted);font:700 .58rem var(--mono)}.min-grid strong{margin:12px 0;color:var(--cyan);font:700 1.5rem var(--mono)}.challenge-head button{min-height:54px;padding:0 22px;border:1px solid var(--amber);font:700 .7rem var(--mono);letter-spacing:.1em;cursor:pointer}.progress{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:12px;margin:28px 0 18px;padding:17px;border:1px solid var(--line);background:var(--panel)}.progress span{display:flex;gap:9px;align-items:center;color:var(--muted);font:700 .62rem var(--mono)}.progress span.on{color:var(--amber)}.progress span.done{color:var(--green)}.progress i{height:2px;background:var(--line)}.progress i.done{background:var(--green)}.scenario,.question{margin-top:16px;padding:24px;border:1px solid var(--line);background:var(--panel)}#tags{display:flex;flex-wrap:wrap;gap:8px}#tags span{padding:7px 10px;border:1px solid var(--line);color:var(--cyan);font:700 .58rem var(--mono)}.scenario>p{font-size:1.3rem;line-height:1.45}.question>small{color:var(--amber);font:700 .65rem var(--mono);letter-spacing:.1em}.question h3{font-size:1.55rem}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answers button{min-height:78px;padding:14px;border:1px solid #3b5d7d;background:#102a40;color:var(--text);font-weight:700;cursor:pointer}.answers button.wrong{border-color:var(--coral);background:rgba(121,48,66,.4)}.answers button.correct{border-color:var(--green);background:rgba(39,128,94,.4)}.pop{position:fixed;left:50%;top:50%;z-index:20;padding:22px 28px;border:2px solid;background:var(--panel);box-shadow:0 15px 55px #000,0 0 28px currentColor;transform:translate(-50%,-50%);font:700 .9rem var(--mono);letter-spacing:.1em}.pop.good{color:var(--green)}.pop.bad{color:var(--coral)}.review{margin-top:22px}.review nav{display:flex;flex-wrap:wrap;gap:20px}.review a{color:var(--cyan);font:700 .62rem var(--mono)}.seo{padding:58px max(24px,calc((100% - 1200px)/2));background:#07121d}.seo>div{margin-top:20px}.seo article{background:#091b2a}@media(max-width:850px){.heading,.challenge-head{align-items:start;flex-direction:column}.timeline,.rule-cards,.review>div,.seo>div{grid-template-columns:1fr}.min-grid{grid-template-columns:1fr 1fr}}@media(max-width:580px){.stage{padding:26px 10px}.nav{padding:0 12px}.brand img{width:56px}.brand{font-size:.57rem}.back{font-size:.54rem}.hero h1 i{width:22px}.timeline,.min-grid,.answers{grid-template-columns:1fr}.progress{gap:5px;padding:12px 7px}.progress span{flex-direction:column;font-size:.48rem;text-align:center}.challenge-head button{width:100%}}
