/* CodeSprout — site.css v5.8.2 */
:root{
  --paper:#FAFAF7; --ink:#14161C; --soft:#5A6170; --line:#E3E4DE; --card:#fff;
  --go:#19A35B; --go-dark:#12844A; --mint:#E7F7EE; --sun:#F6C445;
  --code-bg:#0F1420; --code-fg:#D9DEE8;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","Fira Code","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--go-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
code{font-family:var(--mono);font-size:.92em}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.small{font-size:14px}
.muted{color:var(--soft)}
.section{padding-top:56px;padding-bottom:56px}
.narrow-wide{max-width:820px}
.h1{font-size:clamp(32px,4.4vw,46px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.h2{font-size:clamp(24px,3vw,32px);line-height:1.2;letter-spacing:-.01em;margin:0 0 18px}
.h3{font-size:20px;margin:0 0 12px}
.section-intro{color:var(--soft);font-size:18px;margin:-6px 0 26px;max-width:40em}
.crumbs{font-size:14px;color:var(--soft);margin:0 0 10px}
.crumbs a{color:inherit}

.tipbar{background:var(--ink);color:#C9D1DE;font-size:13px;padding:6px 0}
.tipbar b{color:#5BE39B;font-weight:600}
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:21px;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:15px}
.nav a:hover,.nav a[aria-current]{background:var(--mint)}
.nav a.btn{color:#fff;margin-left:6px}

.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font:700 16px/1.2 var(--sans)}
.btn-sm{padding:8px 16px;font-size:15px}
.btn-block{display:block;width:100%;text-align:center}
.btn-go{background:var(--go);color:#fff}
.btn-go:hover{background:var(--go-dark)}
.nav a.btn-go:hover{background:var(--go-dark)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}

.hero{background:radial-gradient(1200px 400px at 85% 0%,#DDF5E8 0,transparent 60%),var(--paper);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding-top:60px;padding-bottom:60px;align-items:center}
.kicker{font:600 13px/1 var(--mono);color:var(--go-dark);text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px}
.hero h1{font-size:clamp(40px,5.6vw,64px);line-height:1.04;letter-spacing:-.035em;margin:0 0 20px}
.hero h1 em{font-style:normal;color:var(--go);background:linear-gradient(transparent 70%,#C9F0DA 70%)}
.lead{font-size:19px;color:#30343D;margin:0 0 26px;max-width:34em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.hero-code{display:grid;gap:12px}

.code{margin:0 0 18px;background:var(--code-bg);border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(15,20,32,.6)}
.code figcaption{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#171D2C;color:#8D97AA;font:13px var(--mono)}
.code .lang{margin-left:auto;text-transform:capitalize}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#FF5F57}
.dots i+i{background:#FEBC2E}
.dots i+i+i{background:#28C840}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;color:var(--code-fg);font:14px/1.6 var(--mono);tab-size:4}
.code .k{color:#C792EA}
.code .s{color:#C3E88D}
.code .n{color:#F78C6C}
.code .c{color:#6A7891;font-style:italic}
.code .f{color:#82AAFF}
.terminal{background:#0B0E15;color:#C9D1DE;border-radius:12px;padding:14px 18px;font:14px/1.7 var(--mono)}
.terminal .prompt{color:#5BE39B}
.terminal .ok{color:#5BE39B}
.terminal .warn{color:var(--sun)}
.terminal .out{color:#8D97AA}
.terminal a{color:#5BE39B}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:30px;padding-bottom:6px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stats b{display:block;font-size:30px;letter-spacing:-.02em}
.stats span{color:var(--soft);font-size:14px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--go-dark);font-weight:800;margin-bottom:10px}
.steps h3{margin:0 0 6px}
.steps p{margin:0;color:var(--soft)}

.band{background:#F1F3EC;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.path{background:#fff;border-radius:14px;padding:22px;border:1px solid var(--line)}
.path h3{margin:0 0 6px}
.path p{color:var(--soft);margin:0 0 10px}
.path ol{margin:0;padding-left:20px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 20px 18px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(20,22,28,.45)}
.card-bar{position:absolute;inset:0 0 auto 0;height:5px}
.card-meta{font-size:13px;color:var(--soft)}
.card-title{font-weight:800;font-size:19px;line-height:1.25}
.card-text{color:var(--soft);font-size:15px;flex:1}
.card-foot{font-size:13px;color:var(--go-dark);font-weight:600}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--mint);color:var(--go-dark)}
.pill-intermediate{background:#EFE7FB;color:#5B32A8}
.filter{display:flex;gap:6px;margin:0 0 22px;flex-wrap:wrap}
.filter a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;background:#fff}
.filter a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

.quote-band{background:var(--ink);color:#fff;text-align:center;padding:52px 0}
.quote-band p{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.quote-band span{color:#8D97AA}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quotes blockquote{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.quotes p{margin:0 0 12px}
.quotes footer{font-size:14px;color:var(--soft)}
.cta{background:var(--mint);border-top:1px solid #CBEBD9}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:40px;padding-bottom:40px;flex-wrap:wrap}
.cta h2{margin:0 0 6px;font-size:28px;letter-spacing:-.02em}
.cta p{margin:0;color:var(--soft)}

.course-head{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,#fff),#fff 70%);border-bottom:1px solid var(--line);padding:46px 0 36px}
.course-facts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.course-facts span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:600}
.course-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:start}
.syllabus{list-style:none;counter-reset:l;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:14px}
.syllabus li{counter-increment:l;display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.syllabus li:first-child{border-top:0}
.syllabus li::before{content:counter(l);display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:#F1F3EC;font-size:13px;font-weight:700}
.syllabus a{color:var(--ink);text-decoration:none;flex:1}
.syllabus a:hover{text-decoration:underline}
.free{font-size:12px;font-weight:700;color:var(--go-dark);background:var(--mint);padding:2px 8px;border-radius:999px}
.lock{font-size:13px;opacity:.6}
.locked{text-align:center;background:#fff;border:1px dashed #C9CCC3;border-radius:16px;padding:40px 24px}
.lock-big{font-size:44px;margin:0}
.exercise{background:var(--mint);border-radius:14px;padding:22px;margin-top:8px}

.playground{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px}
.pg-bar{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line);background:#F7F8F4}
.pg-bar label{display:grid;gap:4px;font-size:13px;font-weight:600}
.pg-bar button{margin-left:auto}
.playground textarea{display:block;width:100%;border:0;background:var(--code-bg);color:var(--code-fg);font:14px/1.6 var(--mono);padding:16px 18px;resize:vertical;tab-size:4}
.pg-out{min-height:84px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.plan-hot{border:2px solid var(--go);box-shadow:0 16px 36px -22px rgba(25,163,91,.7)}
.badge{position:absolute;top:-12px;left:24px;background:var(--go);color:#fff;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px}
.plan h2{margin:0 0 4px}
.price b{font-size:40px;letter-spacing:-.03em}
.price span{color:var(--soft);font-size:14px}
.plan ul{padding-left:20px;margin:0 0 20px;min-height:120px}

.auth{display:grid;place-items:center}
.auth-card{width:100%;max-width:470px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.auth-card.done{text-align:center}
.form{display:grid;gap:14px;margin:18px 0}
.form label{display:grid;gap:5px;font-weight:600;font-size:15px}
.form small{color:var(--soft);font-weight:400}
.form input,.form select,.pg-bar select,.pg-bar input{font:15px var(--sans);padding:10px 12px;border:1px solid #CDD0C8;border-radius:9px;background:#fff;color:var(--ink)}
.form fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;gap:14px;flex-wrap:wrap}
.form legend{font-weight:600;font-size:15px;padding:0 4px}
.form .radio,.form .check{display:flex;align-items:center;gap:8px;font-weight:400}
.notice{border-radius:10px;padding:12px 14px;margin:14px 0}
.notice-err{background:#FDECEA;color:#8A1F14;border:1px solid #F3C2BC}
.legal p{max-width:44em}

.foot{background:var(--ink);color:#C9D1DE;padding:44px 0 20px;margin-top:20px}
.foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:18px;margin:0 0 8px}
.foot-h{color:#fff;font-weight:700;margin:0 0 8px}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid #2A2F3B;margin-top:26px;padding-top:16px;font-size:14px}

@media (max-width:900px){
  .hero-grid,.course-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps,.paths,.quotes,.plans,.foot-grid{grid-template-columns:1fr}
}