:root {
  --ink: #172326; --muted: #657276; --paper: #f7f8f6; --card: #fff;
  --soft: #edf1ef; --line: #d9dfdc; --go: #087f9d; --go-light: #dff5fa;
  --correct: #18734b; --wrong: #ad3e3e;
}
[data-theme="dark"] {
  --ink: #e9efed; --muted: #9daaa7; --paper: #111819; --card: #182224;
  --soft: #202c2e; --line: #344144; --go: #65cbe4; --go-light: #18353b;
  --correct: #7ed5a8; --wrong: #ef9999;
}
* { box-sizing: border-box; }
::selection { color: #fff; background: var(--go); }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; text-rendering: optimizeLegibility; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--go) 30%, transparent); outline-offset: 3px; }
.hero { color: var(--ink); background: var(--card); border-bottom: 1px solid var(--line); padding: 0 5vw 5rem; }
.nav { max-width: 1120px; height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: .65rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 30px; color: #fff; background: var(--go); border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 800; }
.nav-actions, .desktop-menu { display: flex; gap: 1.25rem; align-items: center; }
.desktop-menu a, .nav-link { color: var(--muted); text-decoration: none; font-size: .9rem; position: relative; }
.desktop-menu a:hover, .nav-link:hover { color: var(--ink); }
.desktop-menu a::after { content: ""; position: absolute; right: 0; bottom: -.35rem; left: 0; height: 1px; background: var(--go); transform: scaleX(0); transform-origin: left; transition: transform 160ms ease; }
.desktop-menu a:hover::after { transform: scaleX(1); }
.theme-button { width: 36px; height: 36px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 6px; font: inherit; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.theme-button:hover { background: var(--soft); border-color: var(--go); }
.install-button { padding: .5rem .7rem; color: var(--go); background: transparent; border: 1px solid var(--go); border-radius: 5px; font: 700 .78rem/1 inherit; cursor: pointer; }
.install-button:hover { color: #fff; background: var(--go); }
.hero-layout { max-width: 1120px; margin: 5.5rem auto 0; display: grid; grid-template-columns: 1fr .85fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.hero-content { max-width: 650px; }
.eyebrow, .lesson-number { margin: 0 0 .8rem; color: var(--go); font: 700 .78rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { margin: 0; font-size: clamp(3.1rem, 7vw, 6.4rem); line-height: .94; }
.accent-text { color: var(--go); }
.hero-text { max-width: 580px; margin: 1.8rem 0; color: var(--muted); font-size: 1.08rem; }
.hero-actions, .result-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.primary-button, .outline-button { min-height: 44px; padding: .75rem 1.1rem; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease; }
.primary-button { color: #fff; background: var(--go); border: 1px solid var(--go); }
.outline-button { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.primary-button:hover:not(:disabled), .outline-button:hover { filter: brightness(.94); transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.secondary-link { color: var(--muted); font-size: .92rem; text-underline-offset: 4px; }
.hero-stats { margin-top: 3rem; display: flex; gap: 2.5rem; }
.hero-stats div { display: grid; }
.hero-stats strong { font: 700 1.35rem/1.1 ui-monospace, monospace; }
.hero-stats span { color: var(--muted); font-size: .78rem; }
.hero-visual { min-width: 0; }
.code-window { overflow: hidden; color: #d9e6e5; background: #142124; border: 1px solid #2d3c3f; border-radius: 9px; box-shadow: 14px 14px 0 var(--go-light), 0 24px 50px rgba(20, 33, 36, .12); }
.window-bar { height: 43px; padding: 0 .9rem; display: flex; gap: .4rem; align-items: center; background: #1b292c; border-bottom: 1px solid #334245; }
.window-bar span { width: 8px; height: 8px; background: #637276; border-radius: 50%; }
.window-bar small { margin-left: auto; color: #8c9a9d; font-family: ui-monospace, monospace; }
.code-window pre, .lesson-code, .code-block { font-family: ui-monospace, monospace; }
.code-window pre { margin: 0; padding: 2rem; overflow-x: auto; line-height: 1.8; }
.code-purple { color: #c99bec; } .code-green { color: #9ad49a; } .code-blue { color: #6ac7df; }
.code-result { padding: .8rem 1rem; color: #9dacaf; background: #0e191b; border-top: 1px solid #334245; font: .82rem/1.6 ui-monospace, monospace; }
.code-result span { color: #6ac7df; } .code-result strong { color: #c8e8d5; font-weight: 400; }
main { max-width: 1120px; margin: 0 auto; padding: 0 5vw; }
.lessons-section, .playground-section, .profile-section, .intro, .roadmap-section, .quiz-section, .result-section { padding: 6rem 0; }
.section-heading { margin-bottom: 2.5rem; display: grid; grid-template-columns: 1.35fr .65fr; gap: 3rem; align-items: end; }
h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; }
.section-heading > p { margin: 0; color: var(--muted); }
.lesson-tabs { margin-bottom: 1rem; display: flex; gap: .4rem; overflow-x: auto; }
.lesson-tab { flex: 0 0 auto; padding: .65rem .9rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 5px; font: 700 .85rem/1 inherit; cursor: pointer; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.lesson-tab:hover, .lesson-tab.active { color: #fff; background: var(--go); border-color: var(--go); }
.lesson-view { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 16px 45px rgba(23, 35, 38, .05); }
.lesson-copy { padding: clamp(2rem, 5vw, 3.5rem); align-self: center; }
.lesson-copy h3 { margin: 1rem 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); }
.lesson-copy > p { color: var(--muted); }
.lesson-note { margin-top: 1.5rem; padding: .9rem 1rem; background: var(--soft); border-left: 3px solid var(--go); font-size: .88rem; }
.lesson-note strong { display: block; }
.lesson-code { min-height: 330px; margin: 0; padding: clamp(2rem, 5vw, 3.5rem); display: flex; align-items: center; overflow-x: auto; color: #d3e6e4; background: #142124; line-height: 1.8; }
.lesson-footer { min-height: 54px; display: flex; gap: 1rem; align-items: center; justify-content: flex-end; }
.lesson-complete-status { color: var(--correct); font-size: .82rem; font-weight: 700; }
.mini-test { padding: clamp(1.4rem, 4vw, 2rem); background: var(--card); border: 1px solid var(--line); border-radius: 7px; }
.mini-test h3 { margin: 0; font-size: 1.25rem; }
.mini-test-answers { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.mini-answer { padding: .75rem .85rem; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 5px; font: inherit; text-align: left; cursor: pointer; }
.mini-answer:hover:not(:disabled) { border-color: var(--go); }
.mini-answer.correct { color: var(--correct); border-color: var(--correct); background: color-mix(in srgb, var(--correct) 8%, transparent); }
.mini-answer.wrong { color: var(--wrong); border-color: var(--wrong); background: color-mix(in srgb, var(--wrong) 8%, transparent); }
.daily-tip { padding: 1.4rem 0; display: grid; grid-template-columns: auto 1fr auto; gap: 1.3rem; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tip-symbol { color: var(--go); font: 700 1.2rem/1 ui-monospace, monospace; }
.daily-tip h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.daily-tip p:last-child { margin: 0; color: var(--muted); font-size: .9rem; }
.editor-shell { overflow: hidden; background: #142124; border: 1px solid #2d3c3f; border-radius: 9px; box-shadow: 0 18px 45px rgba(20, 33, 36, .1); }
.editor-toolbar { min-height: 46px; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; color: #9dacaf; background: #1b292c; border-bottom: 1px solid #334245; font: .78rem/1 ui-monospace, monospace; }
.editor-toolbar select { padding: .4rem .6rem; color: #d9e6e5; background: #142124; border: 1px solid #3c4c4f; border-radius: 4px; }
.code-editor { width: 100%; min-height: 360px; padding: 1.5rem; resize: vertical; color: #d9e6e5; caret-color: #65cbe4; background: #142124; border: 0; outline: 0; font: .92rem/1.7 ui-monospace, monospace; tab-size: 4; }
.editor-actions { padding: .8rem 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; background: #1b292c; border-top: 1px solid #334245; }
.editor-actions > div { display: flex; gap: .55rem; }
.editor-actions .outline-button { color: #d9e6e5; border-color: #526164; }
#editor-status { color: #9dacaf; font: .75rem/1.3 ui-monospace, monospace; }
.code-output { min-height: 90px; max-height: 260px; margin: 0; padding: 1rem 1.5rem; overflow: auto; color: #b9d8c5; background: #0e191b; border-top: 1px solid #334245; white-space: pre-wrap; font: .85rem/1.6 ui-monospace, monospace; }
.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.profile-grid article { min-height: 130px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-grid span { color: var(--muted); font-size: .8rem; }
.profile-grid strong { color: var(--go); font: 700 1.5rem/1.2 ui-monospace, monospace; }
.profile-progress { margin-top: 2rem; }
.profile-progress > div:first-child { display: flex; justify-content: space-between; font-size: .85rem; }
.profile-progress .progress-track { margin: .6rem 0 1rem; }
.profile-lesson-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.profile-lesson { padding: .45rem .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.profile-lesson.done { color: var(--correct); border-color: var(--correct); }
.feature-grid { border-top: 1px solid var(--line); }
.feature-card { padding: 1.5rem .75rem; display: grid; grid-template-columns: 50px 1fr 1.5fr; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line); transition: background 150ms ease, padding-left 150ms ease; }
.feature-card:hover { padding-left: 1rem; background: var(--soft); }
.feature-number { color: var(--go); font: 700 .8rem/1 ui-monospace, monospace; }
.feature-card h3, .feature-card p { margin: 0; } .feature-card p { color: var(--muted); }
.quiz-settings { margin-top: 2rem; padding: 1.25rem; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .8fr; gap: 1.25rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 7px; }
.quiz-settings h3 { margin: 0; font-size: 1.15rem; }
.quiz-settings .eyebrow { margin-bottom: .35rem; }
.quiz-settings label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.quiz-settings select { min-height: 40px; padding: 0 .65rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.quiz-settings .check-label { display: flex; grid-auto-flow: column; justify-content: start; align-items: center; gap: .55rem; color: var(--ink); font-size: .88rem; }
.check-label input { width: 17px; height: 17px; accent-color: var(--go); }
.best-score { display: grid; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.best-score span { color: var(--muted); font-size: .75rem; }
.best-score strong { color: var(--go); font: 700 1.2rem/1.4 ui-monospace, monospace; }
.roadmap-section { position: relative; }
.roadmap-heading { margin-bottom: 2.5rem; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 7vw, 6rem); align-items: end; }
.roadmap-heading h2 { max-width: 760px; }
.roadmap-heading > p { margin: 0; color: var(--muted); }
.roadmap-dashboard { position: sticky; top: 1rem; z-index: 8; margin-bottom: 1rem; padding: 1.25rem; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(220px, 1.4fr) 1.5fr auto; gap: 1.25rem; align-items: center; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(23, 35, 38, .08); backdrop-filter: blur(16px); }
.roadmap-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; }
.roadmap-progress-copy strong { color: var(--ink); font: 750 1.65rem/1 ui-monospace, monospace; }
.roadmap-progress-track { height: 8px; overflow: hidden; background: var(--soft); border-radius: 999px; }
.roadmap-progress-track div { width: 0; height: 100%; background: var(--go); border-radius: inherit; transition: width 350ms ease; }
.roadmap-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.roadmap-metrics p { margin: 0; padding: 0 1rem; display: grid; border-left: 1px solid var(--line); }
.roadmap-metrics strong { font: 750 1rem/1.2 ui-monospace, monospace; }
.roadmap-metrics span { color: var(--muted); font-size: .68rem; }
.roadmap-reset { padding: .45rem; color: var(--muted); background: transparent; border: 0; font: 650 .72rem/1 inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.roadmap-reset:hover { color: var(--wrong); }
.roadmap-list { position: relative; display: grid; gap: 1rem; }
.roadmap-list::before { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 33px; width: 1px; background: var(--line); }
.roadmap-card { position: relative; margin-left: 0; padding: clamp(1.4rem, 3vw, 2rem); padding-left: clamp(5.4rem, 9vw, 7rem); overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: border-color 180ms ease, transform 180ms ease, opacity 180ms ease; }
.roadmap-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--go) 50%, var(--line)); }
.roadmap-card.current { border-color: var(--go); box-shadow: inset 3px 0 0 var(--go), 0 12px 35px rgba(23, 35, 38, .06); }
.roadmap-card.complete { background: color-mix(in srgb, var(--correct) 4%, var(--card)); }
.roadmap-card header { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; }
.roadmap-step { position: absolute; left: 1.25rem; top: 1.55rem; z-index: 1; width: 43px; height: 43px; display: grid; place-items: center; color: var(--go); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; font: 750 .8rem/1 ui-monospace, monospace; }
.roadmap-card.current .roadmap-step { color: #fff; background: var(--go); border-color: var(--go); box-shadow: 0 0 0 6px var(--go-light); }
.roadmap-card.complete .roadmap-step { color: #fff; background: var(--correct); border-color: var(--correct); }
.roadmap-card header p, .roadmap-card h3, .roadmap-description { margin: 0; }
.roadmap-card header p { margin-bottom: .25rem; color: var(--go); font: 700 .7rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
.roadmap-card h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
.roadmap-status { padding: .45rem .65rem; color: var(--muted); background: var(--soft); border-radius: 99px; font: 700 .67rem/1 ui-monospace, monospace; white-space: nowrap; }
.roadmap-card.current .roadmap-status { color: var(--go); background: var(--go-light); }
.roadmap-card.complete .roadmap-status { color: var(--correct); }
.roadmap-description { max-width: 720px; padding: .7rem 0 1.25rem; color: var(--muted); font-size: .9rem; }
.roadmap-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.roadmap-topics label { min-height: 46px; padding: .65rem .75rem; display: flex; gap: .65rem; align-items: center; color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-size: .84rem; transition: background 150ms ease, border-color 150ms ease; }
.roadmap-topics label:hover { background: var(--soft); border-color: var(--line); }
.roadmap-topics label:has(input:checked) { color: var(--muted); background: color-mix(in srgb, var(--correct) 8%, var(--paper)); }
.roadmap-topics label:has(input:checked) span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.roadmap-topics input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--correct); cursor: pointer; }
.roadmap-finish { margin-top: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; color: #d9e6e5; background: #142124; border-radius: 12px; }
.roadmap-finish > span { color: #65cbe4; font: 300 2.5rem/1 ui-monospace, monospace; }
.roadmap-finish h3, .roadmap-finish p { margin: 0; }
.roadmap-finish h3 { color: #fff; font-size: 1.35rem; }
.roadmap-finish p:last-child { margin-top: .35rem; color: #9dacaf; font-size: .85rem; }
.roadmap-finish .outline-button { color: #fff; border-color: #516165; text-decoration: none; white-space: nowrap; }
.quiz-section { max-width: 820px; margin: 0 auto; }
.quiz-topline { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.quiz-meta { display: flex; gap: 1rem; align-items: center; }
.timer { margin: 0; color: var(--muted); font: .85rem/1 ui-monospace, monospace; }
.counter { font-family: ui-monospace, monospace; }
.progress-track { height: 4px; margin: 1.5rem 0 2rem; background: var(--line); }
.progress-bar { width: 5%; height: 100%; background: var(--go); transition: width 200ms ease; }
.question-card, .result-card, .review-item { background: var(--card); border: 1px solid var(--line); border-radius: 7px; }
.question-card { padding: clamp(1.5rem, 5vw, 3rem); }
.question-card h3 { margin: 0 0 2rem; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.35; }
.code-block { margin: 0 0 1.5rem; padding: 1.2rem; overflow-x: auto; color: #d3e6e4; background: #142124; border-radius: 4px; }
.answers { display: grid; gap: .6rem; }
.answer-button { width: 100%; padding: .9rem 1rem; display: flex; gap: .85rem; align-items: center; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.answer-button:hover:not(:disabled) { border-color: var(--go); background: var(--go-light); transform: translateX(3px); }
.answer-letter { color: var(--muted); font: 700 .8rem/1 ui-monospace, monospace; }
.answer-button.correct { color: var(--correct); background: color-mix(in srgb, var(--correct) 8%, transparent); border-color: var(--correct); }
.answer-button.wrong { color: var(--wrong); background: color-mix(in srgb, var(--wrong) 8%, transparent); border-color: var(--wrong); }
.feedback { margin: 1rem 0 0; padding: .9rem; color: var(--muted); background: var(--soft); border-left: 3px solid var(--go); }
.quiz-actions { margin-top: 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.keyboard-hint { color: var(--muted); font: .72rem/1.3 ui-monospace, monospace; }
.result-card { max-width: 720px; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem); text-align: center; }
.score-ring { width: 140px; height: 140px; margin: 0 auto 2rem; display: grid; place-items: center; background: conic-gradient(var(--go) 0%, var(--line) 0%); border-radius: 50%; position: relative; }
.score-ring::before { content: ""; position: absolute; width: 112px; height: 112px; background: var(--card); border-radius: 50%; }
.score-ring strong { position: relative; font-size: 1.7rem; }
.score-text { font-weight: 700; } .result-message { color: var(--muted); }
.achievement { width: fit-content; margin: 1.4rem auto 0; padding: .75rem 1rem; display: flex; gap: .8rem; align-items: center; color: var(--ink); background: var(--go-light); border: 1px solid color-mix(in srgb, var(--go) 35%, var(--line)); border-radius: 6px; text-align: left; }
.achievement > span { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--go); border-radius: 50%; font: 800 .7rem/1 ui-monospace, monospace; }
.achievement div { display: grid; }
.achievement small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.achievement strong { font-size: .95rem; }
.result-actions { margin-top: 1.5rem; justify-content: center; } .share-status { color: var(--correct); font-size: .9rem; }
.review { max-width: 820px; margin: 1rem auto 0; display: grid; gap: .7rem; }
.review-item { padding: 1.2rem; } .review-item h3 { margin: 0 0 .5rem; font-size: 1rem; }
.review-item p { margin: .25rem 0; color: var(--muted); } .review-status { font-weight: 700; }
.correct-review .review-status { color: var(--correct); } .wrong-review .review-status { color: var(--wrong); }
footer { max-width: 1120px; margin: 2rem auto 0; padding: 2rem 5vw; display: flex; gap: 1rem; align-items: center; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); font-size: .85rem; }
.footer-brand { color: var(--ink); } .hidden { display: none !important; }
.command-button { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; padding: .55rem .65rem .55rem .8rem; display: flex; gap: .7rem; align-items: center; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 10px 30px rgba(20, 33, 36, .12); font: 700 .78rem/1 inherit; cursor: pointer; }
.command-button:hover { border-color: var(--go); }
kbd { padding: .22rem .4rem; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 4px; font: .7rem/1 ui-monospace, monospace; }
.command-dialog { width: min(92vw, 610px); max-height: min(75vh, 620px); padding: 0; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 30px 90px rgba(10, 24, 27, .28); }
.command-dialog::backdrop { background: rgba(10, 20, 22, .52); backdrop-filter: blur(3px); }
.command-head { padding: .8rem 1rem; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; border-bottom: 1px solid var(--line); }
.command-head > span { color: var(--go); font-size: 1.3rem; }
.command-head input { min-width: 0; padding: .4rem 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; }
.command-head button { padding: .3rem .45rem; color: var(--muted); background: var(--soft); border: 0; border-radius: 4px; font: .7rem/1 ui-monospace, monospace; cursor: pointer; }
.command-results { padding: .55rem; display: grid; gap: .2rem; overflow-y: auto; }
.command-results > button { width: 100%; padding: .75rem .8rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); background: transparent; border: 0; border-radius: 5px; font: inherit; text-align: left; cursor: pointer; }
.command-results > button:hover, .command-results > button:focus-visible { background: var(--soft); outline: 0; }
.command-results small { color: var(--muted); }
.command-empty { margin: 0; padding: 1.4rem; color: var(--muted); text-align: center; }
.dictionary-header { padding: 0 5vw 4.5rem; background: var(--card); border-bottom: 1px solid var(--line); }
.dictionary-hero { max-width: 1120px; margin: 4.5rem auto 0; display: flex; gap: 3rem; align-items: end; justify-content: space-between; }
.dictionary-hero h1 { font-size: clamp(3.5rem, 8vw, 7rem); }
.dictionary-hero p:last-child { max-width: 620px; color: var(--muted); }
.dictionary-total { display: grid; min-width: 120px; padding: 1.2rem; border-left: 3px solid var(--go); }
.dictionary-total strong { color: var(--go); font: 700 2.4rem/1 ui-monospace, monospace; }
.dictionary-total span { color: var(--muted); font-size: .8rem; }
.dictionary-main { padding-bottom: 5rem; }
.term-of-day { margin: 3rem 0 5rem; padding: 1.5rem 0; display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 2rem; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.term-of-day h2 { font-size: 1.5rem; }
.term-of-day > p { color: var(--muted); }
.dictionary-tools { position: sticky; top: 0; z-index: 10; padding: 1rem 0; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); }
.dictionary-search { min-height: 58px; padding: 0 1rem; display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 7px; }
.dictionary-search > span { color: var(--go); font-size: 1.4rem; }
.dictionary-search input { min-width: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 1rem; }
.category-filters { margin-top: .75rem; display: flex; gap: .4rem; overflow-x: auto; }
.category-filters button { flex: 0 0 auto; padding: .5rem .7rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 4px; font: 700 .75rem/1 inherit; cursor: pointer; }
.category-filters button.active, .category-filters button:hover { color: #fff; background: var(--go); border-color: var(--go); }
.dictionary-summary { margin: 2rem 0 1rem; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .85rem; }
.dictionary-summary button { color: var(--go); background: transparent; border: 0; font: 700 .82rem/1 inherit; cursor: pointer; }
.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.term-card { min-height: 250px; padding: 1.4rem; display: flex; flex-direction: column; align-items: flex-start; color: var(--ink); background: var(--card); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: inherit; text-align: left; cursor: pointer; transition: background 150ms ease; }
.term-card:hover { background: var(--soft); }
.term-card small { color: var(--go); font: 700 .7rem/1 ui-monospace, monospace; text-transform: uppercase; }
.term-card strong { margin-top: 1.3rem; font-size: 1.4rem; letter-spacing: -.025em; }
.term-card > span { color: var(--go); font-weight: 700; }
.term-card p { margin: .8rem 0; color: var(--muted); font-size: .87rem; }
.term-card b { margin-top: auto; color: var(--muted); font-size: .75rem; }
.term-empty { padding: 4rem 0; color: var(--muted); text-align: center; }
.term-dialog { width: min(92vw, 650px); padding: clamp(1.5rem, 5vw, 3rem); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 30px 90px rgba(10, 24, 27, .3); }
.term-dialog::backdrop { background: rgba(10, 20, 22, .55); backdrop-filter: blur(3px); }
.term-dialog-close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; color: var(--muted); background: var(--soft); border: 0; border-radius: 4px; font-size: 1.3rem; cursor: pointer; }
.term-dialog h2 { margin-bottom: .25rem; font-size: clamp(2rem, 6vw, 3.5rem); }
.dialog-turkmen { margin: 0 0 1.3rem; color: var(--go); font-size: 1.15rem; font-weight: 700; }
.dialog-actions { display: flex; gap: 1rem; align-items: center; }
.dialog-actions span { color: var(--correct); font-size: .8rem; }
@media (max-width: 760px) {
  .desktop-menu { display: none; } .hero-layout { grid-template-columns: 1fr; margin-top: 4rem; }
  .hero-visual { max-width: 580px; } .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .roadmap-heading { grid-template-columns: 1fr; gap: 1rem; }
  .roadmap-dashboard { position: relative; top: auto; grid-template-columns: 1fr 1.2fr; }
  .roadmap-metrics { grid-column: 1 / -1; order: 3; }
  .roadmap-reset { position: absolute; top: .55rem; right: .6rem; }
  .roadmap-card { padding-left: 5rem; }
  .roadmap-card header { grid-template-columns: 1fr auto; }
  .roadmap-topics { grid-template-columns: 1fr; }
  .roadmap-finish { grid-template-columns: auto 1fr; }
  .roadmap-finish .outline-button { grid-column: 2; width: fit-content; }
  .lesson-view { grid-template-columns: 1fr; } .lesson-code { min-height: 220px; }
  .mini-test-answers { grid-template-columns: 1fr; } .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-actions { align-items: flex-start; flex-direction: column; } .code-editor { min-height: 300px; }
  .daily-tip { grid-template-columns: auto 1fr; } .daily-tip .outline-button { grid-column: 1 / -1; }
  .feature-card { grid-template-columns: 40px 1fr; } .feature-card p { grid-column: 2; }
  .term-of-day { grid-template-columns: 1fr; gap: .6rem; } .term-of-day .outline-button { width: fit-content; }
  .term-grid { grid-template-columns: repeat(2, 1fr); }
  .quiz-settings { grid-template-columns: 1fr 1fr; }
  .best-score { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .hero { padding-bottom: 4rem; } .nav { height: 68px; } .nav-link, .install-button { display: none !important; }
  h1 { font-size: clamp(3rem, 15vw, 4.2rem); } .hero-stats { justify-content: space-between; gap: 1rem; }
  .lessons-section, .playground-section, .profile-section, .intro, .roadmap-section, .quiz-section, .result-section { padding: 4rem 0; }
  .roadmap-dashboard { padding-top: 2.8rem; grid-template-columns: 1fr; gap: .75rem; }
  .roadmap-progress-track, .roadmap-metrics { grid-column: 1; }
  .roadmap-metrics p { padding: .65rem; text-align: center; border-left: 0; border-top: 1px solid var(--line); }
  .roadmap-card { padding: 4.8rem 1rem 1rem; }
  .roadmap-list::before { display: none; }
  .roadmap-step { top: 1rem; left: 1rem; }
  .roadmap-card header { display: block; }
  .roadmap-status { position: absolute; top: 1.25rem; right: 1rem; }
  .roadmap-finish { grid-template-columns: 1fr; }
  .roadmap-finish > span { display: none; }
  .roadmap-finish .outline-button { grid-column: 1; width: 100%; text-align: center; }
  .quiz-settings { grid-template-columns: 1fr; } .quiz-settings .check-label { padding: .4rem 0; }
  footer { flex-direction: column; align-items: flex-start; }
  .dictionary-hero { align-items: flex-start; flex-direction: column; } .dictionary-total { padding-left: 1rem; }
  .term-grid { grid-template-columns: 1fr; } .term-card { min-height: 220px; }
  .profile-grid { grid-template-columns: 1fr; } .editor-actions > div { width: 100%; flex-direction: column; } .editor-actions button { width: 100%; }
  .keyboard-hint { display: none; } .command-button span { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }