:root {
    --midnight: #101720;
    --midnight-deep: #0a1017;
    --surface: #182330;
    --surface-raised: #1d2a38;
    --surface-soft: #233344;
    --line: rgba(181, 211, 231, 0.12);
    --text: #f4f8fb;
    --muted: #93a6b7;
    --blue: #3776ab;
    --blue-bright: #4c9bd6;
    --yellow: #ffd43b;
    --green: #70d5a6;
    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--midnight-deep); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 5%, rgba(55, 118, 171, 0.12), transparent 28rem), radial-gradient(circle at 12% 68%, rgba(255, 212, 59, 0.055), transparent 24rem); }
a { color: inherit; text-decoration: none; }
.site-shell { max-width: 1440px; margin: 0 auto; padding: 0 40px; position: relative; }
.site-header { height: 86px; display: flex; align-items: center; gap: 34px; border-bottom: 1px solid var(--line); }
.brand { width: 206px; display: inline-flex; align-items: center; }
.brand img { width: 100%; height: auto; display: block; }
.main-nav { display: flex; gap: 8px; align-items: center; }
.main-nav a { color: var(--muted); font-size: 0.9rem; font-weight: 650; padding: 10px 13px; border-radius: 10px; transition: color 180ms ease, background 180ms ease; }
.main-nav a:hover, .main-nav a.is-active { color: var(--text); background: rgba(255,255,255,0.06); }
.header-status { margin-left: auto; display: flex; gap: 8px; align-items: center; color: #c8d5df; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,212,59,0.11); }
.language-switcher { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6, 14, 21, 0.24); }
.auth-nav { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:.76rem; font-weight:750; }.auth-nav a,.auth-nav button { color:#c8dbe7; border:0; background:transparent; font:inherit; cursor:pointer; }.auth-signup { padding:8px 10px; color:#17222d !important; border-radius:9px; background:var(--yellow) !important; }.auth-user { color:var(--yellow); }.auth-nav form { margin:0; }
.language-switcher button { min-width: 34px; padding: 6px 7px; color: var(--muted); border: 0; border-radius: 7px; background: transparent; cursor: pointer; font: 800 0.63rem/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.06em; transition: color 180ms ease, background 180ms ease; }
.language-switcher button:hover, .language-switcher button:focus-visible { color: var(--text); background: rgba(255,255,255,0.08); outline: none; }
.language-switcher button.is-active { color: #142431; background: var(--yellow); }
.nav-toggle, .nav-trigger { display: none; }
.dashboard-wrap { padding: 58px 0 28px; }
.hero { min-height: 398px; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(360px, 0.93fr); overflow: hidden; position: relative; isolation: isolate; border: 1px solid rgba(111, 164, 206, 0.2); border-radius: var(--radius-lg); background: linear-gradient(119deg, #172736 0%, #14212d 42%, #1a2a36 100%); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; width: 54%; height: 110%; top: -35%; right: -7%; background: radial-gradient(ellipse, rgba(55, 118, 171, 0.48), transparent 63%); z-index: -1; }.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 22% 18%,rgba(76,155,214,.12),transparent 30rem); z-index:-1; }
.hero-copy { padding: 61px 40px 56px 60px; max-width: 690px; align-self: center; }
.eyebrow, .panel-kicker { color: var(--blue-bright); text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.68rem; font-weight: 800; }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.spark { color: var(--yellow); font-size: 0.9rem; }
.demo-chip { color: #e0c66b; background: rgba(255, 212, 59, 0.11); border: 1px solid rgba(255, 212, 59, 0.2); border-radius: 99px; padding: 4px 8px; letter-spacing: 0.06em; font-size: 0.6rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.25rem, 4.2vw, 4.05rem); line-height: 1.045; letter-spacing: -0.055em; margin: 17px 0 20px; font-weight: 760; }
h1 em { color: var(--yellow); font-style: normal; }
.hero-description { color: #b4c3cf; max-width: 585px; font-size: 1rem; line-height: 1.7; margin-bottom: 29px; }
.hero-actions { display: flex; align-items: center; gap: 23px; }
.button { display: inline-flex; gap: 12px; align-items: center; justify-content: center; padding: 13px 18px; border-radius: 12px; font-size: 0.89rem; font-weight: 780; transition: transform 180ms ease, box-shadow 180ms ease; }
.button-primary { color: #17222d; background: var(--yellow); box-shadow: 0 8px 24px rgba(255, 212, 59, 0.16); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 212, 59, 0.26); }
.text-link, .small-link { color: #c6d5e1; font-size: 0.86rem; font-weight: 700; }
.text-link:hover, .small-link:hover, .lesson-footer a:hover { color: var(--yellow); }
.hero-visual { min-height: 398px; position: relative; overflow: hidden; }
.mascot { width: min(530px, 103%); height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0 0 0 auto; filter: saturate(1.08) drop-shadow(-16px 28px 32px rgba(0,0,0,0.28)); animation: float 6s ease-in-out infinite; }
.mascot-halo { position: absolute; right: 12%; top: 16%; width: 285px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,212,59,0.16), rgba(55,118,171,0.1) 42%, transparent 70%); }
.orbit { position: absolute; width: 310px; aspect-ratio: 1; border: 1px solid rgba(110, 183, 235, 0.17); border-radius: 45% 55% 50% 50%; right: 12%; top: 8%; transform: rotate(-23deg); }
.orbit-two { width: 225px; right: 26%; top: 26%; transform: rotate(29deg); border-color: rgba(255,212,59,0.12); }
.mascot-note { position: absolute; z-index: 1; bottom: 31px; right: 34px; padding: 11px 15px; display: flex; gap: 9px; align-items: center; background: rgba(10, 18, 25, 0.7); border: 1px solid rgba(214,236,249,0.14); border-radius: 13px; backdrop-filter: blur(12px); color: #d3e0e9; font-size: 0.72rem; line-height: 1.45; }
.mascot-note strong { color: var(--text); font-size: 0.76rem; }.note-icon { color: var(--yellow); font-size: 1rem; }
.dashboard-grid { padding-top: 24px; }.dashboard-main-column { display:grid; grid-template-columns:1.28fr .72fr; gap:24px; align-items:start; }.dashboard-main-column .continue-panel,.dashboard-main-column .path-panel { grid-column:1; }.dashboard-main-column .path-panel { grid-row:2; }.dashboard-main-column .dashboard-sidebar { grid-column:2; grid-row:1 / span 2; }
.dashboard-sidebar { display:grid; gap:24px; align-content:start; }.module-progress-panel h2 { margin-bottom:18px; }.module-progress-list { display:grid; gap:13px; }.module-progress-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; padding:12px; border:1px solid rgba(124,178,216,.14); border-radius:11px; background:rgba(8,17,25,.18); }.module-progress-item strong { display:block; color:#e5f0f7; font-size:.78rem; }.module-progress-item small { display:block; color:#91a7b7; margin-top:3px; font-size:.66rem; }.module-progress-item b { color:#8fc8f1; font-size:.75rem; }.module-progress-item .module-progress-track { grid-column:1 / -1; margin:2px 0 0; }.module-progress-item--complete { border-color:rgba(112,213,166,.3); }.module-progress-item--complete b { color:#9ce1be; }.module-progress-item--projects { background:rgba(255,212,59,.05); border-color:rgba(255,212,59,.16); }.sloby-tip-heading { display:flex; align-items:center; gap:12px; }.sloby-tip-heading img { width:48px; height:48px; object-fit:cover; border-radius:13px; }.sloby-tip-card h2 { font-size:1.08rem; }.sloby-tip-card > p { color:#b9cbd6; margin:16px 0 0; font-size:.78rem; line-height:1.55; }.site-footer { display:grid; grid-template-columns:1fr auto; gap:14px 28px; margin-top:40px; padding:24px 2px 30px; color:#899eae; border-top:1px solid var(--line); font-size:.72rem; }.site-footer strong { display:block; color:#e5f0f7; font-size:.82rem; }.site-footer span { display:block; margin-top:4px; }.site-footer a { color:#b9d8ed; }.site-footer a:hover { color:var(--yellow); }.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:13px; }.site-footer p { grid-column:1 / -1; margin:0; color:#6f8595; }.site-footer p span { display:inline; margin:0 5px; color:var(--yellow); }
.panel, .insight-card { background: linear-gradient(145deg, rgba(30,43,57,0.96), rgba(21,32,43,0.96)); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 12px 36px rgba(0,0,0,0.13); }
.panel { padding: 27px; }.panel-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }.panel-kicker { margin-bottom: 7px; }.panel h2, .insight-card h2 { margin-bottom: 0; letter-spacing: -0.035em; font-size: 1.31rem; }.panel-badge { color: #e2ca76; border: 1px solid rgba(255,212,59,0.2); background: rgba(255,212,59,0.08); font-size: 0.66rem; font-weight: 780; padding: 5px 9px; border-radius: 99px; }.panel-badge-blue { color: #a8d5f3; border-color: rgba(76,155,214,0.24); background: rgba(76,155,214,0.08); }
.lesson-card { display: flex; gap: 20px; margin-top: 23px; padding: 21px; border-radius: 15px; background: linear-gradient(112deg, rgba(55,118,171,0.19), rgba(55,118,171,0.05)); border: 1px solid rgba(80,151,202,0.18); transition: transform 200ms ease, border-color 200ms ease; }.lesson-card:hover { transform: translateY(-3px); border-color: rgba(115, 187, 238, 0.4); }.lesson-symbol { width: 51px; height: 51px; flex: 0 0 auto; display: grid; place-items: center; color: var(--yellow); background: linear-gradient(145deg, #285d89, #1b3850); border-radius: 15px; font: 800 1.75rem Georgia, serif; }.lesson-meta { color: #87bde5; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }.lesson-content h3 { font-size: 1.05rem; margin-bottom: 8px; }.lesson-content > p:not(.lesson-meta) { color: var(--muted); line-height: 1.55; font-size: 0.86rem; margin-bottom: 15px; }.lesson-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.75rem; font-weight: 750; }.lesson-footer a { color: #b9d8ed; }.time-chip { color: #aac0d0; padding: 6px 8px; border: 1px solid rgba(174,206,226,0.12); background: rgba(6,14,21,0.22); border-radius: 7px; }
.progress-layout { display: flex; align-items: center; gap: 20px; margin: 23px 0; }.progress-ring { width: 117px; height: 117px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--yellow) 0 var(--progress-percent), rgba(255,255,255,0.09) var(--progress-percent) 100%); position: relative; }.progress-ring::before { content: ""; position: absolute; inset: 8px; background: #1b2937; border-radius: 50%; }.progress-ring div { z-index: 1; display: grid; text-align: center; }.progress-ring strong { color: var(--yellow); font-size: 1.34rem; letter-spacing: -0.05em; }.progress-ring span { color: #9bacbb; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.11em; }.progress-copy strong { font-size: 0.95rem; }.progress-copy p { color: var(--muted); line-height: 1.5; font-size: 0.78rem; margin: 7px 0 0; }.stat-row { display: grid; border-top: 1px solid var(--line); padding-top: 17px; gap: 13px; }.stat-row span { display: block; color: var(--muted); font-size: 0.66rem; font-style: normal; }.stat-row strong { display: block; margin-top: 5px; font-size: 1rem; }
.path-panel { grid-column: 1 / 2; }.path-intro { color: var(--muted); font-size: 0.85rem; margin: 18px 0 18px; }.path-steps { margin: 0; padding: 0; list-style: none; position: relative; }.path-steps::before { content: ""; position: absolute; left: 14px; top: 23px; bottom: 23px; width: 1px; background: rgba(151,184,207,0.16); }.path-steps li { min-height: 55px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; position: relative; }.step-dot { width: 29px; height: 29px; display: grid; place-items: center; z-index: 1; color: #93aab9; background: #1d2a37; border: 1px solid rgba(159,194,219,0.17); border-radius: 50%; font-size: 0.7rem; font-weight: 800; }.path-steps li.understood .step-dot, .path-steps li.mastered .step-dot { color: #15302b; background: var(--green); border-color: var(--green); }.path-steps li.practicing .step-dot { color: #1f2c35; background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 5px rgba(255,212,59,0.08); }.path-steps strong { display: block; font-size: 0.86rem; }.path-steps small { color: var(--muted); display: block; margin-top: 3px; font-size: 0.68rem; }.step-status { color: #8398a9; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }.practicing .step-status { color: #e7cd6e; }.understood .step-status, .mastered .step-status { color: #9ce1be; }.small-link { padding-top: 5px; white-space: nowrap; }.dashboard-empty { color: var(--muted); margin: 22px 0 0; line-height: 1.6; }
.module-list { display: grid; gap: 14px; }.module-card { padding: 17px; border: 1px solid rgba(127,184,221,0.15); border-radius: 14px; background: rgba(9,18,26,0.22); }.module-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }.module-kicker { color: #83bfe9; margin: 0 0 5px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }.module-header h3 { margin: 0; font-size: 1rem; letter-spacing: -0.02em; }.module-header p:not(.module-kicker), .module-anonymous-note, .module-empty { color: var(--muted); margin: 6px 0 0; font-size: 0.72rem; line-height: 1.5; }.module-progress { flex: 0 0 auto; display: grid; min-width: 58px; gap: 2px; padding: 8px 9px; border: 1px solid rgba(112,213,166,0.18); border-radius: 10px; background: rgba(112,213,166,0.07); text-align: right; }.module-progress strong { color: #a8e8c6; font-size: 0.82rem; }.module-progress span { color: #93afbf; font-size: 0.62rem; font-weight: 700; }.module-steps { margin-top: 15px; }.module-steps::before { top: 22px; bottom: 22px; }
.module-card { padding: 19px; }.module-header h3 { color: #f0f7fb; font-size: 1.1rem; }.module-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 16px; }.module-summary p { color: #afc3d0; margin: 0; font-size: 0.72rem; font-weight: 700; }.module-summary strong { color: #8fc8f1; font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; }.module-progress-track { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(126,174,207,0.14); }.module-progress-track span { display: block; width: var(--module-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3776ab, #83bfe9); transition: width 220ms ease; }.module-card--complete .module-summary strong { color: #a8e8c6; }.module-card--complete .module-progress-track { background: rgba(112,213,166,0.14); }.module-card--complete .module-progress-track span { background: #70d5a6; }.module-steps { margin-top: 18px; }
.insight-card { color: #e5f2fc; padding: 33px; background: linear-gradient(145deg, #286290, #1c3d60 70%, #1b3043); overflow: hidden; position: relative; align-self: start; }.insight-card::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,0.11); border-radius: 50%; bottom: -155px; right: -75px; }.insight-glyph { color: var(--yellow); font: 2.7rem Georgia, serif; margin-bottom: 19px; }.insight-card .panel-kicker { color: #b9def7; }.insight-card h2 { font-size: 1.68rem; line-height: 1.08; max-width: 290px; }.insight-card > p:not(.panel-kicker) { color: #c0dae9; line-height: 1.62; font-size: 0.87rem; margin: 16px 0 21px; max-width: 320px; }.loop-tags { display: flex; flex-wrap: wrap; gap: 7px; }.loop-tags span { color: #d7ecfb; border: 1px solid rgba(209,238,255,0.2); background: rgba(8,24,40,0.16); padding: 6px 8px; border-radius: 7px; font-size: 0.67rem; font-weight: 700; }.dashboard-footer { color: #6c8191; padding: 31px 2px 2px; text-align: center; font-size: 0.72rem; }.dashboard-footer span { color: var(--yellow); padding: 0 7px; }
.prediction-form label code { white-space: pre-line; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes float { 50% { transform: translateY(-7px); } }
@media (max-width: 900px) { .site-shell { padding: 0 24px; }.hero { grid-template-columns: 1fr; }.hero-copy { padding: 52px 44px 35px; }.hero-visual { min-height: 310px; }.mascot { width: 100%; object-position: 50% 43%; }.dashboard-grid { grid-template-columns: 1fr; }.path-panel { grid-column: auto; }.insight-card { min-height: 300px; }.header-status { display: none; } }
@media (max-width: 640px) { .site-shell { padding: 0 16px; }.site-header { height: 72px; gap: 10px; position: relative; }.brand { width: 145px; }.language-switcher { margin-left: auto; }.nav-trigger { width: 38px; height: 38px; display: flex; flex-direction: column; justify-content: center; gap: 5px; align-items: center; margin-left: 0; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; }.nav-trigger span:not(.sr-only) { width: 15px; height: 1.5px; background: #d5e6f1; border-radius: 99px; }.main-nav { display: none; position: absolute; z-index: 10; top: 64px; right: 0; left: 0; padding: 8px; background: #172331; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }.main-nav a { display: block; padding: 12px; }.nav-toggle:checked ~ .main-nav { display: block; }.dashboard-wrap { padding-top: 28px; }.hero { min-height: 0; border-radius: 22px; }.hero-copy { padding: 36px 26px 29px; }.eyebrow { font-size: 0.6rem; }.demo-chip { display: none; }h1 { font-size: clamp(2.25rem, 11vw, 3.2rem); margin-top: 14px; }.hero-description { font-size: 0.9rem; line-height: 1.62; }.hero-actions { gap: 15px; flex-wrap: wrap; }.hero-visual { min-height: 269px; }.mascot { object-position: center 45%; }.mascot-note { right: 16px; bottom: 16px; }.dashboard-grid { padding-top: 16px; gap: 16px; }.panel, .insight-card { padding: 22px; }.lesson-card { padding: 16px; gap: 14px; }.lesson-symbol { width: 43px; height: 43px; font-size: 1.4rem; }.lesson-footer { align-items: flex-start; flex-direction: column; }.progress-layout { gap: 16px; }.progress-ring { width: 103px; height: 103px; }.stat-row { gap: 7px; }.stat-row div + div { padding-left: 10px; }.path-steps li { grid-template-columns: 29px 1fr; padding: 5px 0; }.step-status { grid-column: 2; }.dashboard-footer { padding-top: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@media (max-width: 900px) { .dashboard-sidebar { grid-column:1; }.site-footer { grid-template-columns:1fr; }.site-footer nav { justify-content:flex-start; } }
@media (max-width: 640px) { .dashboard-sidebar { gap:16px; }.module-progress-item { padding:11px; }.site-footer { margin-top:28px; padding-bottom:22px; }.site-footer nav { gap:10px 14px; } }

/* Python Skill Map */
.skill-map-wrap { padding: 54px 0 28px; }
.map-hero, .empty-map { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.9fr); min-height: 346px; border: 1px solid rgba(111, 164, 206, 0.2); border-radius: var(--radius-lg); background: linear-gradient(119deg, #172736 0%, #14212d 53%, #193147 100%); box-shadow: var(--shadow); }
.map-hero::before, .empty-map::before { content: ""; position: absolute; z-index: -1; width: 660px; height: 660px; right: -190px; top: -285px; border: 1px solid rgba(89, 166, 222, 0.2); border-radius: 43% 57% 59% 41%; transform: rotate(18deg); }
.map-hero::after, .empty-map::after { content: ""; position: absolute; z-index: -1; width: 450px; height: 450px; right: 0; bottom: -250px; border: 1px solid rgba(255, 212, 59, 0.12); border-radius: 50%; }
.map-hero-copy, .empty-map-copy { padding: 52px 42px 48px 60px; align-self: center; }
.map-overline { margin: 13px 0 -4px; color: #d4e9f7; font-size: 0.86rem; font-weight: 760; letter-spacing: 0.01em; }
.map-hero h1, .empty-map h1 { font-size: clamp(2.2rem, 3.8vw, 3.58rem); margin-bottom: 18px; }
.live-chip { color: #9ce1be; background: rgba(112, 213, 166, 0.1); border: 1px solid rgba(112, 213, 166, 0.22); border-radius: 99px; padding: 4px 8px; letter-spacing: 0.06em; font-size: 0.6rem; }
.map-hero-meta { display: flex; flex-wrap: wrap; gap: 9px; color: #9cb4c5; font-size: 0.72rem; font-weight: 700; }
.map-hero-meta span:nth-child(even) { color: var(--yellow); }
.map-sloby-card, .empty-sloby { position: relative; min-height: 346px; overflow: hidden; }
.map-sloby-card img, .empty-sloby img { position: absolute; width: min(450px, 112%); height: 100%; inset: 0 0 0 auto; object-fit: cover; object-position: center 44%; filter: saturate(1.05) drop-shadow(-15px 26px 27px rgba(0,0,0,0.25)); animation: float 6s ease-in-out infinite; }
.mini-glow { position: absolute; width: 250px; height: 250px; right: 18%; top: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,212,59,0.15), rgba(55,118,171,0.12) 40%, transparent 72%); }
.sloby-bubble { position: absolute; right: 28px; bottom: 26px; z-index: 1; padding: 11px 14px; color: #d9e7ef; font-size: 0.71rem; line-height: 1.42; background: rgba(9, 17, 25, 0.72); border: 1px solid rgba(214,236,249,0.15); border-radius: 13px; backdrop-filter: blur(12px); }
.sloby-bubble strong { color: var(--yellow); font-size: 0.75rem; }
.map-panel { margin-top: 24px; padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(30,43,57,0.97), rgba(18,29,40,0.97)); box-shadow: 0 12px 36px rgba(0,0,0,0.13); }
.map-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 29px; }
.map-panel-header h2 { margin: 0; font-size: 1.62rem; letter-spacing: -0.04em; }
.map-key { display: flex; align-items: center; gap: 8px; color: #9eb3c2; padding-top: 9px; font-size: 0.68rem; font-weight: 720; white-space: nowrap; }
.key-node { width: 10px; height: 10px; border: 2px solid var(--yellow); background: #263b4e; border-radius: 50%; }
.key-line { width: 26px; height: 1px; margin-left: 9px; background: rgba(134, 192, 231, 0.5); }
.skill-map-flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 29px 0 19px; list-style: none; }
.skill-map-flow::before { content: ""; position: absolute; left: 7.6%; right: 7.6%; top: 109px; height: 1px; background: linear-gradient(90deg, transparent, rgba(82, 158, 211, 0.5) 9%, rgba(255, 212, 59, 0.48) 50%, rgba(82, 158, 211, 0.5) 91%, transparent); }
.skill-node { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; z-index: 1; }
.skill-node:nth-child(even) { padding-top: 49px; }
.node-anchor { width: 38px; height: 38px; margin-bottom: 17px; display: grid; place-items: center; background: #1b3042; border: 2px solid #6faede; color: #cbe7f9; border-radius: 50%; box-shadow: 0 0 0 7px rgba(31, 48, 64, 0.92), 0 0 23px rgba(55,118,171,0.3); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.07em; }
.skill-node:nth-child(1) .node-anchor { border-color: var(--yellow); color: var(--yellow); }
.skill-node:nth-child(5) .node-anchor { border-color: #9ce1be; color: #9ce1be; }
.skill-node-card { width: 100%; min-height: 232px; display: flex; flex-direction: column; padding: 17px; border: 1px solid rgba(157, 199, 229, 0.14); border-radius: 17px; background: linear-gradient(145deg, rgba(38, 57, 73, 0.92), rgba(23, 37, 49, 0.95)); box-shadow: 0 12px 28px rgba(0,0,0,0.16); transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease; }
.skill-node-card:hover { z-index: 2; transform: translateY(-5px); border-color: rgba(120, 192, 239, 0.48); box-shadow: 0 18px 34px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,212,59,0.06); }
.node-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 13px; }
.node-order { color: #83bfe9; text-transform: uppercase; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em; }
.node-live { color: #9bddbe; background: rgba(112,213,166,0.09); border-radius: 99px; padding: 3px 6px; font-size: 0.55rem; font-weight: 800; }
.node-progress-status { display: inline-flex; width: fit-content; margin: -4px 0 10px; padding: 4px 7px; border: 1px solid rgba(148,198,229,0.16); border-radius: 99px; color: #9eb3c2; background: rgba(148,198,229,0.07); font-size: 0.58rem; font-weight: 800; line-height: 1.15; }.node-progress-status--learning { color: #ffe18a; border-color: rgba(255,212,59,0.25); background: rgba(255,212,59,0.09); }.node-progress-status--needs_review { color: #ffd29a; border-color: rgba(255,172,91,0.25); background: rgba(255,172,91,0.09); }.node-progress-status--understood, .node-progress-status--mastered { color: #a8e8c6; border-color: rgba(112,213,166,0.24); background: rgba(112,213,166,0.09); }.skill-node-card--understood, .skill-node-card--mastered { border-color: rgba(112,213,166,0.25); }
.skill-node-card h3 { margin-bottom: 8px; color: #f4f9fd; font-size: 1.03rem; letter-spacing: -0.025em; }
.skill-node-card > p { color: #9cafbd; min-height: 55px; margin-bottom: 16px; font-size: 0.75rem; line-height: 1.5; }
.node-dependency { min-height: 45px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(184,214,234,0.11); }
.dependency-label { display: block; color: #748b9d; margin-bottom: 4px; text-transform: uppercase; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.09em; }
.dependency-values { color: #d0e7f7; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; font-weight: 720; }
.dependency-values i { color: var(--yellow); padding: 0 4px; font-style: normal; }
.inactive-action { display: block; margin-top: 13px; color: #839ead; font-size: 0.64rem; font-weight: 720; cursor: default; }.inactive-action span { color: var(--yellow); padding-left: 3px; }
.empty-map { min-height: 390px; }.empty-command { display: inline-flex; flex-direction: column; gap: 7px; margin-top: 8px; color: #b8cbd8; font-size: 0.68rem; font-weight: 700; }.empty-command span { color: #83bfe9; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; }.empty-command code { color: var(--yellow); padding: 9px 11px; background: rgba(7,14,20,0.38); border: 1px solid rgba(255,212,59,0.14); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.empty-sloby { min-height: 390px; }
@media (max-width: 1110px) { .skill-map-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 33px; }.skill-map-flow::before { display: none; }.skill-node:nth-child(even) { padding-top: 0; }.skill-node-card { min-height: 214px; }.node-anchor { margin-bottom: 13px; } }
@media (max-width: 900px) { .map-hero, .empty-map { grid-template-columns: 1fr; }.map-hero-copy, .empty-map-copy { padding: 47px 44px 30px; }.map-sloby-card, .empty-sloby { min-height: 275px; }.map-sloby-card img, .empty-sloby img { width: 100%; object-position: 50% 43%; }.map-panel { padding: 27px; }.skill-map-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .skill-map-wrap { padding-top: 28px; }.map-hero, .empty-map { border-radius: 22px; }.map-hero-copy, .empty-map-copy { padding: 36px 26px 25px; }.map-hero h1, .empty-map h1 { font-size: clamp(2.2rem, 10vw, 3rem); }.map-hero-meta { font-size: 0.64rem; }.map-sloby-card, .empty-sloby { min-height: 238px; }.map-sloby-card img, .empty-sloby img { object-position: 50% 42%; }.sloby-bubble { right: 16px; bottom: 15px; }.map-panel { margin-top: 16px; padding: 22px; border-radius: 18px; }.map-panel-header { padding-bottom: 21px; }.map-panel-header h2 { font-size: 1.35rem; }.map-key { display: none; }.skill-map-flow { display: block; padding: 7px 0 0; }.skill-map-flow::before { display: block; left: 18px; right: auto; top: 37px; bottom: 35px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(255,212,59,0.45), rgba(82,158,211,0.38)); }.skill-node { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 0 0 21px !important; }.node-anchor { margin: 12px 0 0; }.skill-node-card { min-height: 0; padding: 16px; }.skill-node-card > p { min-height: 0; }.empty-command code { white-space: normal; word-break: break-word; } }

/* Concept lessons and browser playground */
.lesson-wrap { padding: 34px 0 28px; }
.lesson-breadcrumb { display: flex; gap: 9px; align-items: center; color: #8fa5b6; margin: 0 0 20px 2px; font-size: 0.75rem; font-weight: 720; }.lesson-breadcrumb a { color: #b9ddf4; }.lesson-breadcrumb a:hover { color: var(--yellow); }.lesson-breadcrumb span:last-child { color: #718696; }
.lesson-hero, .coming-soon { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr); min-height: 338px; padding-left: 60px; border: 1px solid rgba(111, 164, 206, 0.2); border-radius: var(--radius-lg); background: linear-gradient(121deg, #182938 0%, #152330 50%, #1b354c 100%); box-shadow: var(--shadow); }.lesson-hero::after, .coming-soon::after { content: ""; position: absolute; z-index: -1; right: 3%; top: -43%; width: 530px; height: 530px; border: 1px solid rgba(255,212,59,0.13); border-radius: 44% 56% 54% 46%; transform: rotate(27deg); }
.lesson-hero > div:first-child, .coming-copy { align-self: center; padding: 45px 30px 42px 0; }.lesson-step { color: #d9ecf9; margin: 13px 0 -4px; font-size: 0.84rem; font-weight: 750; }.lesson-hero h1, .coming-soon h1 { font-size: clamp(2.3rem, 4vw, 3.7rem); margin-bottom: 17px; }.lesson-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #b7cbd9; margin-top: 20px; font-size: 0.68rem; font-weight: 790; letter-spacing: 0.04em; text-transform: uppercase; }.lesson-flow span:nth-of-type(2) { color: var(--yellow); }.lesson-flow i { width: 22px; height: 1px; background: rgba(150,205,240,0.42); }
.lesson-mentor, .coming-sloby { min-height: 338px; position: relative; overflow: hidden; }.lesson-mentor img, .coming-sloby img { width: min(440px, 115%); height: 100%; position: absolute; inset: 0 0 0 auto; object-fit: cover; object-position: center 43%; filter: saturate(1.05) drop-shadow(-15px 27px 26px rgba(0,0,0,0.25)); animation: float 6s ease-in-out infinite; }.mentor-note { position: absolute; z-index: 1; right: 28px; bottom: 25px; max-width: 254px; display: flex; gap: 9px; padding: 11px 13px; color: #dbe8ef; background: rgba(9,17,25,0.76); border: 1px solid rgba(214,236,249,0.15); border-radius: 13px; backdrop-filter: blur(12px); font-size: 0.7rem; line-height: 1.45; }.mentor-note > span { color: var(--yellow); }.mentor-note p { margin: 0; }.mentor-note strong { color: var(--yellow); }
.lesson-main-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr); gap: 24px; align-items: start; margin-top: 24px; }.lesson-reading, .playground-card, .predict-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(30,43,57,0.97), rgba(20,32,43,0.97)); box-shadow: 0 12px 36px rgba(0,0,0,0.13); }.lesson-reading { padding: 32px; }.section-label { display: flex; align-items: center; gap: 8px; color: #82bfe9; margin-bottom: 13px; font-size: 0.66rem; font-weight: 820; letter-spacing: 0.12em; text-transform: uppercase; }.section-label > span { width: 25px; height: 25px; display: grid; place-items: center; color: #183044; background: var(--yellow); border-radius: 50%; font-size: 0.61rem; letter-spacing: 0; }.lesson-reading h2, .playground-heading h2, .predict-card h2 { margin-bottom: 15px; letter-spacing: -0.04em; font-size: 1.55rem; line-height: 1.16; }.lesson-reading > p { color: #b4c5d0; font-size: 0.89rem; line-height: 1.7; }.lesson-reading code, .predict-card code { color: #ffe374; font: 0.86em ui-monospace, SFMono-Regular, Menlo, monospace; }.inline-code { margin: 15px 0 17px; padding: 12px 13px; border: 1px solid rgba(111,174,220,0.16); border-radius: 10px; background: #121d27; overflow-x: auto; }.inline-code code { white-space: nowrap; }.reading-note { display: flex; gap: 11px; margin: 24px 0; padding: 14px; border: 1px solid rgba(255,212,59,0.2); border-radius: 12px; background: rgba(255,212,59,0.065); }.reading-note-icon { color: var(--yellow); font-size: 1.1rem; }.reading-note p { color: #d5e0e8; margin: 0; font-size: 0.77rem; line-height: 1.55; }.micro-example { padding-top: 19px; border-top: 1px solid var(--line); }.example-kicker { color: #82bfe9; text-transform: uppercase; font-size: 0.62rem; font-weight: 820; letter-spacing: 0.11em; }.micro-example pre, .predict-card pre { margin: 11px 0; padding: 13px; color: #e3edf3; border: 1px solid rgba(153,199,229,0.13); border-radius: 10px; background: #111b24; overflow-x: auto; font: 0.78rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }.micro-example p { color: #9cb0bf; margin: 0; font-size: 0.75rem; line-height: 1.55; }
.playground-card { padding: 26px; }.playground-heading { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }.playground-heading .section-label { margin-bottom: 10px; }.playground-heading h2 { margin-bottom: 0; }.runtime-pill { flex: 0 0 auto; color: #a6bbc9; padding: 6px 9px; border: 1px solid rgba(153,199,229,0.14); border-radius: 99px; background: rgba(7,14,20,0.26); font-size: 0.62rem; font-weight: 790; }.runtime-pill.is-loading { color: #ead06c; }.runtime-pill.is-ready { color: #9ce1be; border-color: rgba(112,213,166,0.23); background: rgba(112,213,166,0.08); }.runtime-pill.is-error { color: #ffaaa3; border-color: rgba(255,130,121,0.26); background: rgba(255,130,121,0.08); }.playground-intro { color: #a7b9c6; margin: 13px 0 19px; font-size: 0.79rem; line-height: 1.5; }.editor-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 1px solid rgba(124,178,216,0.16); border-bottom: 0; border-radius: 12px 12px 0 0; background: #182633; color: #b5cbd9; font: 0.66rem ui-monospace, SFMono-Regular, Menlo, monospace; }.editor-file { display: flex; gap: 7px; align-items: center; }.editor-file i, .output-heading i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,212,59,0.09); }.editor-mode { color: #7392a7; }.code-editor { min-height: 229px; position: relative; display: grid; grid-template-columns: 45px 1fr; overflow: hidden; border: 1px solid rgba(124,178,216,0.16); border-radius: 0 0 12px 12px; background: #0e1821; font: 0.82rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }.line-numbers { padding: 15px 10px 15px 0; overflow: hidden; color: #526b7d; border-right: 1px solid rgba(124,178,216,0.11); text-align: right; user-select: none; }.line-numbers span { display: block; height: 1.65em; }.highlight-layer, .code-editor textarea { grid-area: 1 / 2; width: 100%; height: 100%; margin: 0; padding: 15px 17px; overflow: auto; border: 0; white-space: pre; word-wrap: normal; }.highlight-layer { pointer-events: none; color: #dceaf2; scrollbar-width: none; }.highlight-layer::-webkit-scrollbar { display: none; }.code-editor textarea { z-index: 1; resize: none; outline: none; color: transparent; caret-color: #f4f8fb; background: transparent; font: inherit; line-height: inherit; tab-size: inherit; }.code-editor textarea::selection { color: transparent; background: rgba(75,155,214,0.38); }.syntax-comment { color: #668395; }.syntax-string { color: #aee5a8; }.syntax-keyword { color: #8fc8f1; }.syntax-number { color: #ffd879; }.playground-actions { display: flex; gap: 9px; margin: 15px 0; }.playground-actions button, .prediction-button { min-height: 37px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font: 760 0.72rem Inter, ui-sans-serif, system-ui, sans-serif; transition: transform 160ms ease, background 160ms ease, color 160ms ease; }.run-button { color: #1b2b36; background: var(--yellow); }.run-button:hover:not(:disabled), .prediction-button:hover { transform: translateY(-1px); background: #ffe16a; }.run-button:disabled, .stop-button:disabled { cursor: not-allowed; opacity: 0.55; }.stop-button { color: #ffe0dc; border-color: rgba(255,142,132,0.22) !important; background: rgba(255,112,99,0.09); }.reset-button { color: #bed7e7; border-color: rgba(144,192,224,0.17) !important; background: rgba(144,192,224,0.08); }.reset-button:hover { color: var(--text); background: rgba(144,192,224,0.16); }.output-panel { border: 1px solid rgba(124,178,216,0.15); border-radius: 12px; background: #0b141c; overflow: hidden; }.output-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #b6cbd8; border-bottom: 1px solid rgba(124,178,216,0.12); background: #131f29; font-size: 0.67rem; font-weight: 780; }.output-heading > span:first-child { display: flex; align-items: center; gap: 8px; }.output-heading i { background: #70d5a6; box-shadow: 0 0 0 4px rgba(112,213,166,0.07); }.output-state { color: #758d9d; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; }.output-state.is-error { color: #ffaaa3; }.output-state.is-complete, .output-state.is-ready { color: #9ce1be; }.output-state.is-running { color: #ead06c; }.output-panel pre { min-height: 79px; max-height: 210px; margin: 0; padding: 13px; overflow: auto; color: #dcebf3; white-space: pre-wrap; font: 0.76rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }.runtime-note { color: #72899a; margin: 12px 2px 0; font-size: 0.63rem; line-height: 1.45; }
.predict-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: 45px; margin-top: 24px; padding: 32px; }.predict-copy p { color: #aebfcb; max-width: 510px; font-size: 0.85rem; line-height: 1.62; }.prediction-form { align-self: center; }.prediction-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }.prediction-form legend { color: #e6eff4; margin-bottom: 12px; font-size: 0.88rem; font-weight: 760; }.prediction-form label { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; color: #afc1cd; border: 1px solid rgba(148,198,229,0.14); border-radius: 10px; background: rgba(10,18,25,0.22); cursor: pointer; font-size: 0.75rem; }.prediction-form label:hover { border-color: rgba(255,212,59,0.33); }.prediction-form input { margin: 3px 0 0; accent-color: var(--yellow); }.prediction-button { color: #1b2b36; margin-top: 15px; background: var(--yellow); }.prediction-feedback { margin: 13px 0 0; padding: 11px; border-radius: 9px; font-size: 0.75rem; line-height: 1.5; }.prediction-feedback.is-correct { color: #d8f5e5; border: 1px solid rgba(112,213,166,0.25); background: rgba(112,213,166,0.09); }.prediction-feedback.is-neutral { color: #d4e2eb; border: 1px solid rgba(123,183,221,0.2); background: rgba(123,183,221,0.08); }.coming-soon { min-height: 385px; }.coming-copy { padding-right: 42px; }.coming-sloby { min-height: 385px; }.coming-sloby img { width: min(480px, 115%); }.concept-link { transition: color 160ms ease; }.concept-link:hover, .concept-link:focus-visible { color: var(--yellow); }.node-lesson-link { display: block; margin-top: 13px; color: #a9d5ee; font-size: 0.64rem; font-weight: 760; }.node-lesson-link:hover { color: var(--yellow); }
.sloby-chat { margin-top:24px; padding:28px; border:1px solid rgba(255,212,59,.2); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(37,57,72,.97),rgba(18,30,41,.97)); }.sloby-chat-heading { display:flex; gap:17px; align-items:center; }.sloby-chat-heading img { width:62px; height:62px; object-fit:cover; border-radius:16px; }.sloby-chat h2 { margin:2px 0 5px; }.sloby-chat-heading p:last-child,.sloby-status { color:var(--muted); font-size:.82rem; }.sloby-messages { max-height:260px; overflow:auto; display:grid; gap:10px; margin:22px 0 14px; }.sloby-message { max-width:82%; margin:0; padding:11px 13px; border-radius:12px; line-height:1.55; font-size:.82rem; }.sloby-message--assistant { background:rgba(55,118,171,.19); color:#d9e9f4; }.sloby-message--user { margin-left:auto; background:rgba(255,212,59,.12); color:#fff2b3; }.sloby-form { display:grid; grid-template-columns:1fr auto; gap:10px; }.sloby-form textarea { min-height:48px; padding:12px; color:var(--text); border:1px solid var(--line); border-radius:11px; background:#101b25; font:inherit; resize:vertical; }.sloby-status { min-height:1.2em; margin:9px 0 0; color:#ffbbb4; }
.project-mentor form { display:grid; gap:12px; margin-top:22px; }.project-mentor textarea { width:100%; min-height:112px; box-sizing:border-box; padding:14px; color:var(--text); border:1px solid rgba(124,178,216,.28); border-radius:12px; outline:none; background:#101b25; font:inherit; line-height:1.5; resize:vertical; }.project-mentor textarea::placeholder { color:#8197a7; }.project-mentor textarea:focus { border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(76,155,214,.22); }.project-mentor .playground-actions { flex-wrap:wrap; margin:0; }.project-mentor .understanding-feedback:not([hidden]) { margin-top:16px; border:1px solid rgba(123,183,221,.2); white-space:pre-wrap; }.project-mentor .understanding-feedback.is-passed { color:#d8f5e5; border-color:rgba(112,213,166,.28); background:rgba(112,213,166,.12); }.project-mentor .understanding-feedback.is-needs_improvement { color:#fff0a5; border-color:rgba(255,212,59,.25); background:rgba(255,212,59,.1); }.project-mentor .understanding-feedback.is-error { border-color:rgba(255,112,99,.28); }
.sloby-message p { margin:0 0 9px; }.sloby-message p:last-child { margin-bottom:0; }.sloby-message strong { color:#fff4bd; }.sloby-message code { padding:2px 5px; color:#ffe67e; border-radius:5px; background:rgba(7,16,24,.55); font: .92em ui-monospace,SFMono-Regular,Menlo,monospace; }.sloby-message pre { max-width:100%; margin:10px 0; padding:12px; overflow:auto; border:1px solid rgba(135,192,228,.18); border-radius:9px; background:#0b141c; }.sloby-message pre code { padding:0; color:#dcebf3; background:transparent; font-size:.82rem; }.sloby-message ul,.sloby-message ol { margin:8px 0; padding-left:20px; }.sloby-message li + li { margin-top:4px; }
.sloby-message h1,.sloby-message h2,.sloby-message h3 { margin:0 0 10px; color:#f5f9fc; line-height:1.25; }.sloby-message h1 { font-size:1.2rem; }.sloby-message h2 { font-size:1.05rem; }.sloby-message h3 { font-size:.94rem; }
.auth-page { display:grid; min-height:calc(100vh - 150px); place-items:center; padding:52px 0; }.auth-card { width:min(100%,520px); padding:34px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(145deg,rgba(30,43,57,.97),rgba(18,29,40,.97)); box-shadow:var(--shadow); }.auth-card h1 { font-size:2.25rem; }.form-field { display:grid; gap:7px; margin:17px 0; }.form-field label { color:#d7e7f0; font-size:.8rem; font-weight:750; }.form-field input { width:100%; padding:12px; color:var(--text); border:1px solid var(--line); border-radius:9px; background:#101b25; font:inherit; }.form-field ul,.form-errors { color:#ffbbb4; margin:4px 0; padding-left:18px; font-size:.74rem; }.form-field small { color:var(--muted); font-size:.68rem; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:21px 0; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }.button-google { width:100%; color:#e7f0f7; border:1px solid rgba(139,189,224,.25); background:rgba(55,118,171,.2); cursor:pointer; }.button-google:hover { transform:translateY(-2px); border-color:rgba(139,189,224,.48); background:rgba(55,118,171,.34); }.site-messages { max-width:700px; margin:20px auto 0; }.site-message { margin:0; padding:12px 15px; border:1px solid rgba(255,212,59,.26); border-radius:12px; background:rgba(255,212,59,.09); color:#fff0aa; font-size:.82rem; line-height:1.5; }.site-message--error { border-color:rgba(255,112,99,.3); background:rgba(255,112,99,.1); color:#ffbbb4; }
.understanding-check { margin-top:24px; padding:30px; border:1px solid rgba(112,213,166,.24); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(26,51,53,.93),rgba(18,31,42,.98)); }.understanding-check h2 { margin:0 0 16px; }.understanding-check pre { margin:0 0 16px; padding:15px; overflow:auto; border-radius:10px; background:#0b141c; color:#dcebf3; }.understanding-check textarea { width:100%; min-height:105px; margin-bottom:10px; padding:12px; color:var(--text); border:1px solid var(--line); border-radius:10px; background:#101b25; font:inherit; resize:vertical; }.understanding-feedback { margin-top:13px; padding:12px; border-radius:10px; line-height:1.5; }.understanding-feedback.is-understood { background:rgba(112,213,166,.12); color:#d8f5e5; }.understanding-feedback.is-needs_explanation,.understanding-feedback.is-needs_review { background:rgba(255,212,59,.1); color:#fff0a5; }.understanding-feedback.is-error { background:rgba(255,112,99,.1); color:#ffbbb4; }
@media (max-width: 900px) { .lesson-hero, .coming-soon { grid-template-columns: 1fr; padding-left: 0; }.lesson-hero > div:first-child, .coming-copy { padding: 47px 44px 30px; }.lesson-mentor, .coming-sloby { min-height: 278px; }.lesson-mentor img, .coming-sloby img { width: 100%; object-position: 50% 43%; }.lesson-main-grid { grid-template-columns: 1fr; }.predict-card { grid-template-columns: 1fr; gap: 20px; }.lesson-reading { padding: 29px; }.dashboard-main-column { grid-template-columns:1fr; }.dashboard-main-column .continue-panel,.dashboard-main-column .path-panel,.dashboard-main-column .dashboard-sidebar { grid-column:auto; grid-row:auto; } }
@media (max-width: 640px) { .lesson-wrap { padding-top: 24px; }.lesson-hero, .coming-soon { border-radius: 22px; }.lesson-hero > div:first-child, .coming-copy { padding: 36px 26px 27px; }.lesson-hero h1, .coming-soon h1 { font-size: clamp(2.2rem, 10vw, 3rem); }.lesson-mentor, .coming-sloby { min-height: 239px; }.lesson-mentor img, .coming-sloby img { object-position: 50% 43%; }.mentor-note { right: 16px; bottom: 15px; max-width: 237px; }.lesson-main-grid { gap: 16px; margin-top: 16px; }.lesson-reading, .playground-card { padding: 22px; }.lesson-reading h2, .playground-heading h2, .predict-card h2 { font-size: 1.32rem; }.playground-heading { display: block; }.runtime-pill { display: inline-block; margin-top: 11px; }.code-editor { min-height: 258px; grid-template-columns: 38px 1fr; font-size: 0.75rem; }.highlight-layer, .code-editor textarea { padding: 14px 12px; }.playground-actions { flex-wrap: wrap; }.playground-actions button { flex: 1 0 auto; }.predict-card { margin-top: 16px; padding: 22px; border-radius: 18px; }.lesson-flow { font-size: 0.58rem; }.lesson-flow i { width: 12px; }.module-header { display: block; }.module-progress { width: fit-content; margin-top: 12px; text-align: left; } }
@media (max-width: 640px) { .module-summary { align-items: center; gap: 10px; }.module-summary p { line-height: 1.45; }.module-summary strong { flex: 0 0 auto; } }
.module-challenge-link { display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin-top:16px; padding:13px 15px; color:#e8f1f6; border:1px solid rgba(255,212,59,.3); border-radius:12px; background:rgba(255,212,59,.07); text-decoration:none; }.module-challenge-link:hover { border-color:rgba(255,212,59,.62); background:rgba(255,212,59,.12); }.module-challenge-link span { color:var(--yellow); font-size:.77rem; font-weight:800; }.module-challenge-link small { color:#b4c7d3; font-size:.71rem; line-height:1.45; }.module-challenge-link b { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--yellow); }.challenge-progress { display:flex; gap:9px; margin:20px 0; }.challenge-progress span { width:31px; height:31px; display:grid; place-items:center; color:#8ea7b7; border:1px solid var(--line); border-radius:50%; font-size:.72rem; font-weight:800; }.challenge-progress span.is-active { color:#182b38; border-color:var(--yellow); background:var(--yellow); }.challenge-navigation { display:flex; justify-content:space-between; gap:10px; margin:24px 0 40px; }.challenge-navigation button { min-height:40px; padding:0 15px; border:1px solid transparent; border-radius:9px; cursor:pointer; font:760 .74rem Inter,ui-sans-serif,system-ui,sans-serif; }.challenge-navigation .reset-button { border-color:rgba(144,192,224,.17); }.challenge-navigation .run-button:disabled,.challenge-navigation .reset-button:disabled { opacity:.55; cursor:not-allowed; }
.code-editor .highlight-layer, .code-editor textarea { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

/* About */
.about-wrap { padding:42px 0; }.about-hero,.about-section,.about-cta { margin-bottom:24px; padding:32px; border:1px solid var(--line); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(30,43,57,.96),rgba(18,30,41,.96)); }.about-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); align-items:center; overflow:hidden; background:linear-gradient(125deg,#172b3d,#162330); }.about-hero h1 { margin:12px 0 17px; font-size:clamp(2.2rem,4vw,3.65rem); }.about-hero p:not(.eyebrow),.about-section > p,.about-cta p { max-width:760px; color:#b8cad5; line-height:1.7; }.about-hero img { width:min(410px,100%); justify-self:end; filter:drop-shadow(-14px 22px 25px rgba(0,0,0,.25)); }.about-section h2,.about-cta h2 { margin-bottom:18px; font-size:1.65rem; }.about-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.about-cards article,.about-projects a,.about-levels > * { padding:16px; border:1px solid rgba(124,178,216,.16); border-radius:12px; background:rgba(8,17,25,.22); color:#dbe8ef; font-size:.82rem; line-height:1.5; }.about-projects { grid-template-columns:repeat(3,minmax(0,1fr)); }.about-projects a:hover { border-color:rgba(255,212,59,.42); }.about-projects h3 { margin:0 0 8px; }.about-projects p { margin:0; color:#aabeca; }.about-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }.about-steps li { padding:16px; border-left:2px solid var(--yellow); background:rgba(255,255,255,.025); }.about-steps b { color:var(--yellow); font-size:.72rem; }.about-steps h3 { margin:8px 0; font-size:1rem; }.about-steps p { color:#aabeca; margin:0; font-size:.78rem; line-height:1.55; }.about-sloby { display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:center; }.about-sloby img { width:130px; border-radius:20px; }.about-sloby small { color:#91a7b7; }.about-levels { display:grid; gap:9px; }.about-levels strong { border-color:rgba(112,213,166,.34); background:rgba(112,213,166,.08); }.about-levels small { display:block; margin-top:6px; color:#a8c6b7; }.about-it { background:linear-gradient(145deg,rgba(37,74,105,.5),rgba(18,30,41,.96)); }.about-cta { text-align:center; background:linear-gradient(145deg,rgba(55,118,171,.22),rgba(18,30,41,.96)); }.about-cta p { margin-left:auto; margin-right:auto; }
@media (max-width:900px) { .about-hero { grid-template-columns:1fr; }.about-hero img { justify-self:center; max-height:280px; object-fit:cover; object-position:top; }.about-cards,.about-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .about-wrap { padding:26px 0; }.about-hero,.about-section,.about-cta { padding:22px; margin-bottom:16px; }.about-cards,.about-projects,.about-steps { grid-template-columns:1fr; }.about-sloby { grid-template-columns:1fr; }.about-sloby img { width:90px; } }

/* Blog */
.blog-wrap,.article-wrap { padding:42px 0; }.blog-hero,.blog-empty,.article-cta { padding:34px; border:1px solid var(--line); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(30,43,57,.96),rgba(18,30,41,.96)); }.blog-hero { margin-bottom:24px; }.blog-hero h1 { max-width:700px; }.blog-hero p { max-width:700px; color:#b8cad5; line-height:1.7; }.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }.blog-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:#162330; }.blog-card > img { width:100%; height:180px; object-fit:cover; }.blog-card > div { padding:20px; }.blog-card time,.article-wrap time { color:#8fbfe0; font-size:.72rem; }.blog-card h2 { margin:9px 0; font-size:1.2rem; }.blog-card p { color:#aabeca; line-height:1.6; font-size:.84rem; }.pagination { display:flex; justify-content:center; gap:16px; padding:28px; }.pagination a,.pagination span { padding:7px 10px; border:1px solid var(--line); border-radius:8px; }.article-wrap { max-width:820px; margin:auto; }.article-wrap > time { display:block; margin-top:24px; }.article-wrap h1 { font-size:clamp(2.2rem,5vw,3.7rem); }.article-excerpt { color:#b8cad5; font-size:1.1rem; line-height:1.7; }.article-image { width:100%; max-height:440px; object-fit:cover; margin:10px 0 28px; border-radius:var(--radius-md); }.article-content { color:#d3e0e8; font-size:1rem; line-height:1.8; }.article-content h2,.article-content h3 { margin-top:36px; }.article-content a { color:#8fc8f1; text-decoration:underline; }.article-content img { max-width:100%; border-radius:12px; }.article-content blockquote { margin:24px 0; padding:10px 20px; border-left:3px solid var(--yellow); color:#cbdce6; background:rgba(255,255,255,.03); }.article-content pre { overflow:auto; padding:18px; border:1px solid rgba(124,178,216,.2); border-radius:12px; background:#0b141c; }.article-content code { font: .9em ui-monospace,SFMono-Regular,Menlo,monospace; }.article-content pre code { color:#dcebf3; }.article-cta { margin-top:42px; text-align:center; }.blog-empty { text-align:center; }.blog-empty p { color:#b8cad5; }
@media (max-width:900px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px) { .blog-wrap,.article-wrap { padding:26px 0; }.blog-hero,.blog-empty,.article-cta { padding:22px; }.blog-grid { grid-template-columns:1fr; }.article-content { font-size:.95rem; } }
.article-content figure { margin:28px 0; }.article-content figcaption { margin-top:9px; color:var(--muted); font-size:.85rem; text-align:center; }.article-content table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; margin:26px 0; }.article-content th,.article-content td { min-width:120px; padding:10px 13px; border:1px solid rgba(124,178,216,.2); text-align:left; }.article-content th { color:#f4f8fb; background:rgba(55,118,171,.18); }.article-content td { color:#cad9e2; }.video-embed { position:relative; width:100%; aspect-ratio:16 / 9; margin:28px 0; overflow:hidden; border-radius:12px; background:#0b141c; }.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.public-home { display:grid; gap:24px; padding-top:24px; }.public-section { padding:28px; border:1px solid var(--line); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(30,43,57,.96),rgba(18,30,41,.96)); }.public-section > p { max-width:720px; color:#b8cad5; line-height:1.7; }.public-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.public-cards article { padding:18px; border:1px solid rgba(124,178,216,.16); border-radius:12px; background:rgba(8,17,25,.22); }.public-cards b { color:var(--yellow); }.public-cards p { color:#aabeca; line-height:1.55; }.public-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; counter-reset:steps; }.public-steps li { padding:14px; border-left:2px solid var(--yellow); background:rgba(255,255,255,.03); font-size:.82rem; }.public-sloby { display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center; }.public-sloby img { width:110px; border-radius:16px; }.public-final { text-align:center; } @media (max-width:700px) { .public-cards,.public-steps { grid-template-columns:1fr; }.public-sloby { grid-template-columns:1fr; } }