:root { --ink:#171b2c; --muted:#6b6f82; --brand:#5b5ce2; --mint:#31c99b; --surface:#f6f7fc; --line:#e8e9f2; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; border:0; }
.shell { max-width:1160px; min-height:100vh; margin:0 auto; padding:28px 32px 48px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:36px; }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:-.6px; background:transparent; color:var(--ink); padding:0; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--brand); color:white; font-family:ui-monospace,monospace; }
.avatar { width:38px; height:38px; border-radius:50%; background:#ffe6bd; display:grid; place-items:center; }
.hero { display:grid; grid-template-columns:1.3fr .7fr; gap:24px; margin-bottom:38px; }
.welcome, .path-card, .project, .lesson-card, .result { background:#fff; border:1px solid var(--line); border-radius:24px; }
.welcome { padding:36px; background:linear-gradient(130deg,#5b5ce2,#7773f6); color:white; overflow:hidden; position:relative; }
.welcome:after { content:"</>"; opacity:.12; position:absolute; right:30px; bottom:-28px; font:900 148px ui-monospace; }
.eyebrow { color:#b9ffea; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
h1 { position:relative; z-index:1; font-size:clamp(30px,4vw,46px); line-height:1.06; letter-spacing:-1.6px; margin:10px 0 14px; }
.welcome p { position:relative; z-index:1; margin:0; color:#eeedff; max-width:470px; font-size:16px; line-height:1.5; }
.path-card { padding:26px; display:flex; flex-direction:column; justify-content:center; }
.path-card h2 { margin:0 0 15px; font-size:18px; }
.progress-row { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:9px; }
.track { height:10px; background:#edecfb; border-radius:20px; overflow:hidden; }
.bar { height:100%; width:0; border-radius:inherit; background:var(--mint); transition:width .25s ease; }
.path-card p { margin:15px 0 0; font-size:14px; color:var(--muted); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 15px; }
h2 { font-size:25px; margin:0; letter-spacing:-.6px; }.section-heading p { color:var(--muted); margin:0; }
.projects { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stages { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stage { padding:21px; background:#fff; border:1px solid var(--line); border-radius:22px; display:flex; min-height:325px; flex-direction:column; }.stage-number { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.1em; }.stage-emoji { font-size:35px; margin:12px 0 5px; }.stage h3 { margin:6px 0 8px; font-size:19px; }.stage p { margin:0; color:var(--muted); font-size:14px; line-height:1.42; }.skills { display:flex; flex-wrap:wrap; gap:6px; margin:17px 0; }.skills span { font-size:11px; border-radius:20px; padding:5px 7px; color:#56596d; background:#f1f2f8; }.stage button { margin-top:auto; width:100%; }.stage-hero { background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; display:flex; align-items:center; gap:16px; margin-bottom:22px; }.stage-hero .stage-emoji { font-size:46px; margin:0; }.stage-hero h1 { margin:3px 0 5px; font-size:30px; }.stage-hero p { color:var(--muted); margin:0; }
.project { padding:20px; transition:transform .2s, box-shadow .2s; }.project:not(.locked):hover { transform:translateY(-3px); box-shadow:0 12px 28px #34356616; }
.project-top { display:flex; justify-content:space-between; align-items:start; }.emoji { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; font-size:27px; background:#f0efff; }
.tag { color:var(--brand); font-weight:700; font-size:12px; background:#f0efff; padding:6px 9px; border-radius:20px; }.project h3 { margin:18px 0 5px; font-size:19px; }.project p { min-height:42px; margin:0; color:var(--muted); font-size:14px; line-height:1.45; }.meta { display:flex; gap:10px; margin:17px 0; color:var(--muted); font-size:12px; }
.primary, .outline { border-radius:13px; font-weight:750; padding:12px 16px; }.primary { color:white; background:var(--brand); }.outline { color:var(--brand); background:#fff; border:1px solid #d6d4f8; }.project button { width:100%; }.locked { opacity:.62; }.locked button { color:#777; background:#f0f0f5; }
.lesson-shell { max-width:900px; margin:auto; }.lesson-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }.back { background:transparent; padding:8px 0; color:var(--muted); font-weight:700; }.step-label { font-size:14px; color:var(--muted); }.lesson-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:22px; }.lesson-card { padding:27px; }.lesson-card h1 { font-size:33px; margin:9px 0 16px; }.lesson-card p { line-height:1.55; color:#4f5262; }.task { margin-top:22px; padding:16px; border-radius:15px; background:#fff6e2; color:#654700; font-size:14px; line-height:1.45; }.task strong { display:block; margin-bottom:5px; font-size:11px; letter-spacing:.09em; }
.editor { background:#20243a; color:#e8ebff; border-radius:22px; overflow:hidden; }.editor-header { display:flex; align-items:center; justify-content:space-between; padding:13px 17px; background:#292e48; color:#ced3f4; font-size:13px; }.dots { letter-spacing:3px; color:#aaaed5; }.code-input { display:block; width:100%; min-height:330px; resize:vertical; border:0; outline:0; padding:20px; background:transparent; color:#e8ebff; font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }.editor-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:#292e48; }.hint { color:#bfc5eb; font-size:12px; }.run { background:var(--mint); color:#12352d; padding:11px 16px; border-radius:12px; font-weight:800; white-space:nowrap; }.result { margin-top:16px; padding:15px 17px; line-height:1.45; }.success { background:#e8fbf4; border-color:#bcebdc; }.error { background:#fff0f0; border-color:#ffd3d3; }.next { margin-top:14px; width:100%; }.finish { text-align:center; padding:56px 24px; }.finish .big { font-size:64px; }.finish h1 { font-size:38px; margin:13px 0; }.finish p { color:var(--muted); max-width:470px; margin:0 auto 25px; }
@media (max-width:960px) { .stages{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px) { .shell{padding:18px 16px 32px}.topbar{margin-bottom:25px}.hero,.lesson-layout{grid-template-columns:1fr}.welcome{padding:27px}.projects,.stages{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.project{padding:18px}.lesson-card{padding:21px}.code-input{min-height:270px}.editor-footer{align-items:flex-start;flex-direction:column}.run{width:100%}.stage{min-height:unset}.stage-hero{padding:20px;align-items:flex-start}.stage-hero .stage-emoji{font-size:35px} }