:root { --ink:#173c34; --muted:#657872; --cream:#faf9f4; --paper:#fffefa; --green:#174e40; --green-2:#2e7461; --mint:#d9eee4; --line:#e5e8e0; --shadow:0 18px 42px rgba(22,54,45,.08); }
body { background:var(--cream); }
.topbar { background:rgba(255,254,250,.94); }
.brand { color:var(--green); font-size:23px; letter-spacing:-.045em; }
.brand-mark,.brand-large .brand-mark { width:42px; height:42px; background:transparent; border-radius:0; }
.brand-mark img { width:100%; height:100%; display:block; }
.brand-large { font-size:29px; }
.brand-large .brand-mark { width:52px; height:52px; }
.login-story .brand { color:#fff; }
.login-story .brand-mark { background:#e9f3ed; border-radius:12px; padding:3px; }
.button { border-radius:12px; }
.button-primary { background:var(--green); }
.button-primary:hover { background:#0f3e33; }
.button-ghost { background:#fffefa; }
.page { padding-top:44px; }

.championship-landing { max-width:1120px; }
.public-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); gap:60px; align-items:center; padding:44px 8px 54px; }
.public-hero h1 { font-size:clamp(42px,5.2vw,67px); line-height:1.08; }
.public-hero .lead { max-width:610px; margin:22px 0 28px; }
.hero-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero-actions form { margin:0; }
.hero-actions .button { min-height:48px; }
.test-starter { margin:26px 0 0; max-width:610px; }
.test-main-button { width:100%; min-height:72px; justify-content:center; font-size:20px; font-weight:800; box-shadow:0 14px 27px rgba(20,78,64,.2); }
.test-main-button span { margin-left:9px; font-size:26px; line-height:0; }
.course-text-link { display:inline-block; margin-top:15px; color:var(--green); font-size:14px; font-weight:700; }
.course-text-link:hover { text-decoration:underline; }
.hero-points { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:24px; color:var(--muted); font-size:13px; font-weight:600; }
.hero-points span::before { content:"✓"; color:var(--green-2); font-weight:800; margin-right:7px; }
.hero-preview { background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 22px 52px rgba(26,64,52,.1); padding:24px; transform:rotate(1.2deg); min-width:0; }
.hero-preview-top { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:700; }
.preview-dot { width:9px; height:9px; border-radius:50%; background:#4aa984; }
.preview-time { margin-left:auto; background:#edf4ee; padding:5px 8px; border-radius:7px; color:var(--green); }
.hero-preview p { font:500 clamp(20px,2.3vw,27px)/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--ink); background:#f7f7f1; border:1px solid #e9eae3; border-radius:13px; padding:22px; margin:18px 0; overflow-wrap:anywhere; }
.hero-preview em { font-style:normal; background:#d8eee2; border-radius:4px; }
.preview-line { height:1px; background:var(--line); }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.preview-stats strong,.preview-stats span { display:block; }
.preview-stats strong { font:800 19px "Manrope",sans-serif; }
.preview-stats span { color:var(--muted); font-size:11px; }
.challenge-intro { margin-top:0; background:#eff7f1; border-color:#d9e9dd; padding:30px; }
.challenge-intro p { max-width:720px; }
.guest-rank-cta { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:20px; padding:18px; background:#dff1e8; border-radius:14px; }
.guest-rank-cta p { margin:0; }
.guest-rank-cta .button { min-height:50px; font-size:15px; }
.guest-rank-cta>a:last-child { color:var(--green); font-weight:700; }
.ranking-panel { margin-top:24px; }
.course-teaser { margin-top:34px; padding:34px; border-radius:20px; background:var(--green); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:26px; }
.course-teaser .eyebrow { color:#a9dcc5; }
.course-teaser p:not(.eyebrow) { color:#d8e8df; max-width:700px; line-height:1.6; }
.course-teaser .button { background:#dcf0e3; color:var(--green); flex:0 0 auto; }
.site-footer { max-width:1120px; margin:38px auto 0; border-top:1px solid var(--line); padding:24px 20px 42px; display:flex; align-items:center; gap:24px; color:var(--muted); font-size:13px; }
.site-footer .brand { font-size:21px; }
.site-footer .brand-mark { width:30px; height:30px; }
.site-footer p { margin:0; flex:1; }
.site-footer>div { display:flex; gap:18px; }
.site-footer>div a:hover { color:var(--green); text-decoration:underline; }

.challenge-attempt { max-width:900px; }
.challenge-attempt .lesson-header { align-items:center; gap:18px; }
.challenge-attempt .lesson-header h1 { font-size:clamp(34px,4vw,48px); }
.challenge-attempt .typing-card { min-width:0; padding:clamp(20px,3vw,34px); }
.level-switcher { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:24px; }
.level-switcher h2 { font-size:21px; margin:0; }
.level-switcher p { margin:5px 0 16px; color:var(--muted); font-size:13px; }
.level-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.level-options form { margin:0; min-width:0; }
.level-option { display:block; width:100%; min-height:76px; padding:13px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--ink); cursor:pointer; }
.level-option strong,.level-option span { display:block; }
.level-option strong { font-size:14px; line-height:1.3; }
.level-option span { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.3; }
.level-option:hover:not(:disabled) { border-color:var(--green-2); background:#f5faf6; }
.level-option.active { border:2px solid var(--green-2); background:#e9f5ed; cursor:default; }
.target-text { display:block; max-width:100%; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; font:500 clamp(20px,2.2vw,27px)/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:0; }
.target-text span { white-space:pre-wrap; }
.challenge-attempt .target-text { background:#faf9f4; padding:20px; border:1px solid var(--line); border-radius:13px; margin:20px 0; }
.challenge-attempt .target-text { position:relative; max-height:340px; overflow-y:auto; }
.challenge-attempt .typing-topline { align-items:center; gap:12px; flex-wrap:wrap; }
.challenge-attempt #progress-value { margin-left:auto; color:var(--green); white-space:nowrap; }
.challenge-attempt #typing-input { min-height:145px; background:#fff; font-size:18px; }
.challenge-attempt .live-metrics { margin:18px 0; }
.challenge-attempt .typing-card>p { line-height:1.5; }
.result-card { width:min(560px,100%); }
.result-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.result-actions .result-register { width:100%; min-height:66px; display:flex; justify-content:center; align-items:center; font-size:17px; font-weight:800; box-shadow:0 12px 25px rgba(20,78,64,.22); }
.result-actions p { margin:3px 0; font-size:14px; color:var(--muted); }
.result-actions p a,.result-rank-link { color:var(--green); font-weight:800; }
.result-rank-link { font-size:13px; }

.course-page { max-width:1080px; }
.course-hero { text-align:center; max-width:800px; margin:0 auto; padding:45px 0 30px; }
.course-hero h1 { font-size:clamp(42px,5vw,64px); }
.course-hero .lead { margin:24px auto; }
.course-hero .hero-actions,.course-bottom .hero-actions { justify-content:center; }
.course-explain { padding:36px; margin-top:32px; }
.course-explain p:not(.eyebrow) { font-size:16px; line-height:1.8; color:var(--muted); max-width:840px; }
.course-syllabus { margin-top:55px; }
.course-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.course-step { display:flex; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:15px; padding:22px; }
.course-step>span { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--mint); font-weight:800; color:var(--green); }
.course-step h3 { font-size:17px; }
.course-step p { margin:7px 0 0; color:var(--muted); line-height:1.55; font-size:14px; }
.course-faq { padding:36px; margin-top:55px; }
.faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 35px; margin-top:25px; }
.faq-grid h3 { font-size:17px; }
.faq-grid p { color:var(--muted); line-height:1.65; }
.course-bottom { text-align:center; padding:70px 0 25px; }
.course-bottom p { color:var(--muted); }

@media(max-width:850px) {
  .public-hero { grid-template-columns:1fr; gap:28px; padding:24px 0 40px; }
  .hero-preview { max-width:620px; transform:none; }
  .course-teaser { display:block; }
  .course-teaser .button { margin-top:10px; }
}
@media(max-width:600px) {
  .topbar { padding-inline:15px; }
  .brand { font-size:19px; }
  .brand-mark { width:34px; height:34px; }
  .public-hero h1 { font-size:40px; }
  .hero-actions { align-items:stretch; }
  .hero-actions form,.hero-actions .button { width:100%; }
  .test-main-button { min-height:64px; font-size:18px; }
  .guest-rank-cta .button { width:100%; }
  .hero-preview { padding:16px; }
  .hero-preview p { padding:15px; }
  .challenge-intro,.course-teaser { padding:22px; }
  .challenge-intro form,.challenge-intro button { width:100%; }
  .site-footer { display:block; padding-inline:18px; }
  .site-footer p { margin:12px 0; }
  .site-footer>div { flex-wrap:wrap; }
  .challenge-attempt .lesson-header { display:block; }
  .challenge-attempt .goal-chip { margin-top:10px; }
  .challenge-attempt .target-text { font-size:20px; padding:14px; }
  .level-options { grid-template-columns:1fr; }
  .level-option { min-height:60px; }
  .course-steps,.faq-grid { grid-template-columns:1fr; }
  .course-explain,.course-faq { padding:23px; }
}