:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;color-scheme:dark;--bg:#0b1020;--bg-top:#0d1425;--sidebar:#0e1525;--panel:#141c2e;--panel-hover:#1a2438;--panel-alt:#101829;--input:#0f1627;--outline:#27334a;--border-soft:rgba(150,166,200,.105);--fg:#f1f4fc;--muted:#9da9c0;--subtle:#718099;--purple:#a28bff;--purple-deep:#6f59d8;--purple-bg:rgba(154,128,246,.115);--green:#6bd2ad;--green-bg:rgba(107,210,173,.12);--orange:#f4b36b;--red:#ff8585;--shadow:0 18px 55px rgba(0,0,0,.15);--radius:17px;--radius-sm:11px;--transition:180ms ease}
body[data-theme=light]{color-scheme:light;--bg:#f4f6fb;--bg-top:#f8f9fe;--sidebar:#fff;--panel:#fff;--panel-hover:#f5f7ff;--panel-alt:#f8f9fd;--input:#f5f6fb;--outline:#e2e7f0;--border-soft:rgba(56,70,110,.11);--fg:#1c2944;--muted:#596782;--subtle:#78859d;--purple:#7358dd;--purple-deep:#6249c4;--purple-bg:rgba(117,86,221,.08);--green:#167c61;--green-bg:rgba(39,170,125,.11);--orange:#b5762b;--red:#c94a54;--shadow:0 14px 35px rgba(46,53,97,.065)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-size:14px;line-height:1.62}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:3px}::selection{background:#8e7df467;color:white}p{margin:0}h1,h2,h3,h4{line-height:1.23;letter-spacing:-.035em;margin:0}h1{font-size:clamp(29px,3.3vw,43px);font-weight:780}h2{font-size:23px}h3{font-size:17px}strong{font-weight:720}code,pre,kbd,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}code{background:var(--purple-bg);color:var(--purple);border:1px solid var(--border-soft);padding:2px 5px;border-radius:5px;font-size:.91em;overflow-wrap:anywhere}pre{margin:0}::placeholder{color:var(--subtle)}
.skip-link{position:fixed;top:-100px;left:20px;background:var(--purple);color:white;padding:10px;z-index:200}.skip-link:focus{top:10px}.app-layout{display:flex;min-height:100vh}.sidebar{width:257px;flex:0 0 257px;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;background:var(--sidebar);border-right:1px solid var(--outline);z-index:30}.sidebar-backdrop{display:none}.brand{display:flex;align-items:center;gap:11px;padding:26px 20px 30px}.brand-mark{background:linear-gradient(145deg,#baa8ff,#7259e0);display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:13px;box-shadow:0 10px 23px #8168e735;color:white;font-weight:850;font-size:15px;letter-spacing:-1.2px}.brand-text{font-size:20px;letter-spacing:-.055em;font-weight:850;white-space:nowrap}.brand-text>span{color:var(--purple)}.brand-text small{display:block;font-size:8px;font-weight:750;letter-spacing:.16em;color:var(--subtle);margin-top:-2px}.sidebar-scroll{padding:0 13px;overflow-y:auto;scrollbar-width:thin;flex:1}.nav-label{padding:0 13px;margin-bottom:10px;font-size:10px;font-weight:850;letter-spacing:.14em;color:var(--subtle)}.side-nav{display:flex;flex-direction:column;gap:4px}.nav-link,.tracks-nav a{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:10px;color:var(--muted);font-size:13px;font-weight:650;transition:background var(--transition),color var(--transition)}.nav-link:hover,.tracks-nav a:hover{background:var(--panel-hover);color:var(--fg)}.nav-link.active,.tracks-nav a.active{background:var(--purple-bg);color:var(--purple)}.nav-ico{font-size:20px;font-weight:450;display:inline-flex;width:20px;justify-content:center;line-height:1}.nav-label-tracks{margin-top:33px}.tracks-nav{display:grid;gap:3px}.track-dot{background:var(--dot);height:10px;width:10px;border-radius:3px;margin-left:5px;margin-right:5px}.nav-percentage{margin-left:auto;font-size:11px;color:var(--subtle);font-weight:600}.sidebar-bottom{padding:14px 13px 15px}.sidebar-callout{background:linear-gradient(145deg,var(--purple-bg),rgba(90,111,197,.07));border:1px solid #997df323;border-radius:14px;padding:13px 15px;margin-bottom:16px}.callout-bulb{color:var(--purple);font-size:22px;line-height:1}.sidebar-callout strong{display:block;font-size:12px;margin-top:5px}.sidebar-callout p{font-size:11px;color:var(--muted);line-height:1.5;margin-top:5px}.sidebar-footer{text-align:center;color:var(--subtle);font-size:10px;padding-top:14px}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}.topbar{height:79px;position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(24px,4vw,58px);border-bottom:1px solid var(--outline);background:var(--bg-top)}.topbar-start,.topbar-end{display:flex;align-items:center;gap:19px;min-width:0}.topbar-end{gap:14px}.breadcrumbs{font-size:13px;color:var(--muted);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs strong{color:var(--fg)}.bread-chevron{opacity:.45;margin:0 9px}.global-search{position:relative;width:min(290px,26vw)}.global-search input{width:100%;height:39px;background:var(--input);border:1px solid var(--outline);border-radius:10px;color:var(--fg);padding:0 61px 0 37px;font-size:12px;outline:none;transition:border-color var(--transition)}.global-search input:focus{border-color:var(--purple)}.search-symbol{position:absolute;left:13px;top:4px;font-size:25px;color:var(--subtle);pointer-events:none}.search-shortcut{position:absolute;right:10px;top:10px;font-size:10px;color:var(--subtle);border:1px solid var(--outline);padding:1px 5px;border-radius:5px}.search-results{position:absolute;right:0;top:calc(100% + 7px);width:max(320px,100%);max-width:calc(100vw - 30px);max-height:365px;overflow-y:auto;padding:7px;background:var(--panel);border:1px solid var(--outline);border-radius:13px;box-shadow:var(--shadow);z-index:90}.search-item{display:block;padding:10px 12px;border-radius:9px}.search-item:hover,.search-item:focus{background:var(--panel-hover)}.search-item-title{font-weight:700;font-size:12px}.search-item-meta{color:var(--subtle);font-size:11px}.search-empty{color:var(--muted);padding:14px;font-size:12px}.icon-button{height:39px;min-width:39px;border:1px solid var(--outline);border-radius:11px;color:var(--muted);background:var(--panel);font-size:20px;display:grid;place-items:center}.icon-button:hover{color:var(--fg);background:var(--panel-hover)}.top-stat{white-space:nowrap;border:1px solid var(--outline);border-radius:11px;padding:9px 13px;background:var(--panel);font-size:11px;font-weight:750;color:var(--muted)}.top-stat span{color:var(--orange);font-size:16px;margin-right:4px}.top-stat b{color:var(--fg)}.mobile-menu{display:none}
.main-content{width:100%;max-width:1550px;padding:38px clamp(24px,4vw,58px) 52px;margin:0 auto;flex:1}.app-footer{padding:16px 35px 24px;text-align:center;color:var(--subtle);font-size:11px;border-top:1px solid var(--border-soft)}.eyebrow{color:var(--purple);font-size:11px;font-weight:820;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:20px}.section-heading h2{font-size:22px}.section-heading p{color:var(--muted);margin-top:5px;font-size:13px}.muted{color:var(--muted)}.tiny{font-size:11px;color:var(--subtle)}.subheading{font-size:15px;font-weight:800}.section-block{margin-top:40px}.card{background:var(--panel);border:1px solid var(--outline);border-radius:var(--radius);box-shadow:0 2px 0 rgba(0,0,0,.012)}.btn{border:1px solid transparent;border-radius:10px;min-height:41px;padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:800;transition:transform var(--transition),background var(--transition),border-color var(--transition);white-space:nowrap}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,#a18bfa,#8168ed);color:#fff;box-shadow:0 7px 22px #7357ef22}.btn-primary:hover{background:linear-gradient(135deg,#ae9aff,#8e75ee)}.btn-secondary{background:var(--panel);border-color:var(--outline);color:var(--fg)}.btn-secondary:hover{background:var(--panel-hover)}.btn-soft{background:var(--purple-bg);color:var(--purple);border-color:#9a80f523}.btn-ghost{background:transparent;color:var(--muted)}.btn-ghost:hover{background:var(--panel-hover)}.btn-small{min-height:32px;padding:5px 10px;font-size:11px;border-radius:8px}.text-link{color:var(--purple);font-weight:750;font-size:12px}.text-link:hover{text-decoration:underline}.tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;background:var(--panel-alt);border:1px solid var(--outline);color:var(--muted);font-weight:650;font-size:10px}.tag-success{background:var(--green-bg);color:var(--green);border-color:transparent}.tag-purple{background:var(--purple-bg);color:var(--purple);border-color:transparent}.tag-dot{height:6px;width:6px;background:currentColor;border-radius:50%}.progress-bar{height:7px;overflow:hidden;background:var(--outline);border-radius:20px}.progress-bar span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#856cf0,#b5a0ff);width:0;transition:width .4s ease}.progress-bar.green span{background:linear-gradient(90deg,#37b993,#8cdfbf)}
.hero{min-height:304px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);gap:22px;align-items:center;overflow:hidden;border-radius:21px;border:1px solid #967bfa37;background:radial-gradient(circle at 89% 23%,rgba(165,136,255,.18),transparent 37%),linear-gradient(117deg,#1d1b46 0%,#151f40 62%,#17264a 100%);padding:38px 42px;position:relative;color:#f4f5ff}.hero:after{content:'';position:absolute;height:190px;width:190px;border:1px solid #b5abff16;border-radius:45%;right:-65px;bottom:-75px;transform:rotate(30deg)}.hero-copy{position:relative;z-index:1}.hero .eyebrow{color:#b9a8ff;margin-bottom:15px}.hero h1{max-width:560px;line-height:1.13}.hero h1 span{color:#b6a0ff}.hero p{font-size:13px;color:#c3cae4;margin:17px 0 23px;max-width:440px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.btn-hero-secondary{background:#ffffff13;color:#fff;border-color:#ffffff24}.hero-visual{position:relative;z-index:1;transform:rotate(3deg);margin:8px -5px 0 7px}.mini-code{border-radius:13px;background:#0c1022;box-shadow:0 21px 40px #0204144b;border:1px solid #6b69b047;overflow:hidden}.mini-code-header{height:37px;display:flex;align-items:center;gap:6px;padding:0 15px;border-bottom:1px solid #51527055;color:#969bb5;font-size:10px}.window-dot{width:7px;height:7px;border-radius:50%;background:#ff717e}.window-dot:nth-child(2){background:#f9cb70}.window-dot:nth-child(3){background:#6dcca5}.mini-code-name{margin-left:auto}.mini-code pre{color:#dfddfd;padding:20px;font-size:12px;line-height:2.05;overflow:hidden}.tok-key{color:#ba94ff}.tok-str{color:#91d3ac}.tok-fn{color:#f6d58a}.tok-comm{color:#8795b6}.mini-code-result{padding:10px 17px;color:#9de1ba;border-top:1px solid #51527055;font-size:11px}.mini-code-result::before{content:'›';color:#b79afa;margin-right:9px}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:19px}.metric-card{padding:19px 20px}.metric-icon{height:34px;width:34px;border-radius:10px;display:grid;place-items:center;background:var(--purple-bg);color:var(--purple);font-size:17px;margin-bottom:15px}.metric-value{font-weight:850;font-size:24px;letter-spacing:-.045em}.metric-label{color:var(--muted);font-size:11px;margin-top:2px}.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.course-card{padding:21px;transition:border-color var(--transition),transform var(--transition)}.course-card:hover{border-color:var(--accent);transform:translateY(-2px)}.course-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.course-icon{height:51px;width:54px;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);font-weight:850;font-family:ui-monospace,monospace;font-size:17px;letter-spacing:-1px}.course-card h3{margin:13px 0 6px;font-size:18px}.course-card p{color:var(--muted);font-size:12px;min-height:39px}.course-meta{color:var(--subtle);font-size:11px;display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}.course-foot{display:flex;align-items:center;justify-content:space-between;margin-top:17px}.circle-arrow{background:var(--panel-alt);border:1px solid var(--outline);color:var(--muted);width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:17px}.course-card:hover .circle-arrow{background:var(--accent);color:#111;border-color:transparent}.continue-card{padding:22px;display:flex;gap:19px;align-items:center}.continue-icon{width:51px;height:51px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;font-weight:850;font-size:17px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.continue-card h3{margin:1px 0 4px}.continue-card p{color:var(--muted);font-size:12px}.continue-card .btn{margin-left:auto}.home-bottom{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr);gap:15px;margin-top:35px}.challenge-box{padding:24px;overflow:hidden;position:relative}.challenge-box::after{content:'{ }';position:absolute;right:25px;bottom:-15px;color:var(--purple-bg);font-size:95px;font-weight:900}.challenge-box h3,.tip-box h3{margin-bottom:8px}.challenge-box p,.tip-box p{color:var(--muted);font-size:12px;max-width:540px}.challenge-box .btn{margin-top:18px;position:relative;z-index:1}.tip-box{padding:24px;background:linear-gradient(140deg,var(--panel),var(--panel-alt))}.tip-icon{font-size:26px;color:var(--orange);margin-bottom:10px}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:28px}.page-header p{color:var(--muted);margin-top:11px;font-size:13px;max-width:650px}.page-header .eyebrow{margin-bottom:10px}.course-intro{padding:29px 31px;margin-bottom:26px;display:flex;align-items:center;gap:21px;background:linear-gradient(110deg,var(--panel),var(--panel-alt))}.course-intro-icon{width:73px;height:73px;flex:0 0 73px;border-radius:17px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);display:grid;place-items:center;font:850 22px ui-monospace,monospace}.course-intro-copy{flex:1}.course-intro-copy h1{font-size:29px}.course-intro-copy p{font-size:12px;color:var(--muted);margin:5px 0}.course-intro-stats{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--subtle)}.course-intro-progress{text-align:right;min-width:160px}.course-intro-progress strong{font-size:25px}.course-intro-progress .progress-bar{margin-top:10px}.module{margin:24px 0}.module-title{display:flex;align-items:center;gap:13px;margin-bottom:13px}.module-number{background:var(--purple-bg);color:var(--purple);font-weight:850;padding:7px 12px;border-radius:9px;font-size:11px}.module-title h2{font-size:17px}.module-count{margin-left:auto;color:var(--subtle);font-size:11px}.lesson-list{background:var(--panel);border:1px solid var(--outline);border-radius:var(--radius);overflow:hidden}.lesson-row{display:flex;align-items:center;gap:14px;padding:17px 19px;border-bottom:1px solid var(--border-soft);transition:background var(--transition)}.lesson-row:last-child{border-bottom:0}.lesson-row:hover{background:var(--panel-hover)}.lesson-number{width:39px;height:39px;flex:0 0 39px;border-radius:12px;background:var(--panel-alt);border:1px solid var(--outline);color:var(--subtle);display:grid;place-items:center;font-weight:760}.lesson-number.done{color:var(--green);background:var(--green-bg);border-color:transparent}.lesson-row-copy{min-width:0;flex:1}.lesson-row-copy strong{display:block;font-size:13px}.lesson-row-copy small{color:var(--subtle);font-size:11px}.lesson-row-end{display:flex;align-items:center;gap:14px}.lesson-row-end .arrow{font-size:21px;color:var(--purple)}.lesson-hero{padding-bottom:25px;border-bottom:1px solid var(--outline);margin-bottom:27px}.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:650;font-size:12px;margin-bottom:20px}.back-link:hover{color:var(--purple)}.lesson-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}.lesson-hero h1{margin:0 0 12px}.lesson-hero p{color:var(--muted);font-size:14px;max-width:760px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:25px;align-items:start}.lesson-article{min-width:0}.learn-section{margin-bottom:22px}.learn-section h2{font-size:20px;margin:6px 0 11px}.learn-section p{font-size:13px;line-height:1.85;color:var(--muted);margin-bottom:15px}.learn-section p code,.question-text code{color:var(--purple)}.code-block{background:#0c1426;border:1px solid #2d3851;border-radius:14px;overflow:hidden;color:#deebff;margin-top:13px}.code-block-top{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#121d31;border-bottom:1px solid #27334b;color:#899ab5;font-size:11px}.code-block pre{padding:18px 20px;white-space:pre;overflow-x:auto;font-size:12px;line-height:1.8;tab-size:2}.code-block code{background:none;border:0;color:#e0e9f7;padding:0;font-size:inherit}.copy-code{color:#aab9ce;background:transparent;border:0;font-size:11px;font-weight:750;display:flex;align-items:center;gap:5px}.copy-code:hover{color:#fff}.takeaway-card{padding:23px;margin-bottom:24px}.takeaway-card h3{font-size:15px;margin-bottom:12px}.takeaway-list{padding-left:20px;margin:0;color:var(--muted);font-size:13px;line-height:2}.takeaway-list li::marker{color:var(--green)}.lesson-sidebar{position:sticky;top:107px}.sidebar-note{padding:20px;margin-bottom:15px}.sidebar-note h3{font-size:14px;margin-bottom:13px}.outline-items{display:grid;gap:10px}.outline-items a{color:var(--muted);font-size:12px;display:flex;gap:10px}.outline-items a:hover{color:var(--purple)}.outline-items a span{color:var(--subtle)}.sidebar-lesson-progress{padding:18px}.sidebar-lesson-progress .progress-bar{margin:10px 0}.sidebar-lesson-progress p{font-size:11px;color:var(--muted)}.practice-card{padding:25px;margin:23px 0}.practice-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.practice-card h2{font-size:19px}.practice-card>p,.practice-card .practice-desc{color:var(--muted);font-size:12px;margin-bottom:15px}.practice-notice{padding:9px 12px;border-radius:8px;background:var(--purple-bg);color:var(--muted);font-size:11px;margin:13px 0}.code-textarea{display:block;width:100%;min-height:185px;resize:vertical;border:1px solid var(--outline);border-radius:12px;background:var(--input);color:var(--fg);padding:16px;font:12.5px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2;outline:none;white-space:pre;overflow:auto}.code-textarea:focus{border-color:var(--purple)}.practice-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:13px}.practice-feedback{margin-top:15px}.checks{display:grid;gap:7px;margin-top:7px}.check-line{display:flex;align-items:flex-start;gap:9px;font-size:12px;padding:8px 11px;border-radius:8px;background:var(--panel-alt);color:var(--muted)}.check-line.pass{color:var(--green)}.check-line.fail{color:var(--red)}.hint-panel{padding:12px;margin-top:10px;background:var(--panel-alt);border-left:3px solid var(--purple);border-radius:7px;color:var(--muted);font-size:12px}.inline-console{margin-top:15px;background:#0b1220;border:1px solid #2c3650;border-radius:11px;color:#c5d5ef;overflow:hidden}.inline-console .console-title{background:#131d2f;padding:8px 12px;color:#879bb7;font-size:11px;border-bottom:1px solid #2c3650}.inline-console .console-lines{padding:12px 15px;min-height:45px;max-height:220px;overflow:auto;font:12px/1.7 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.console-line{display:block}.console-line.error{color:#ff8f8f}.console-line.warn{color:#f2cb83}.console-line.info{color:#879bb7}.quiz-card{padding:25px;margin:24px 0}.quiz-card h2{font-size:19px;margin-bottom:16px}.quiz-card .question-text{font-size:14px;font-weight:700;margin-bottom:15px}.quiz-options{display:grid;gap:9px}.quiz-option{width:100%;border:1px solid var(--outline);border-radius:11px;padding:12px 15px;background:var(--panel-alt);color:var(--fg);display:flex;align-items:center;text-align:left;gap:12px;font-size:13px}.quiz-option:hover:not(:disabled){border-color:var(--purple);background:var(--purple-bg)}.quiz-option.correct{border-color:#3fbf9466;background:var(--green-bg);color:var(--green)}.quiz-option.wrong{border-color:#ed8d8d66;background:#ed8d8d13;color:var(--red)}.quiz-letter{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--outline);border-radius:7px;color:var(--muted);font-size:11px;font-weight:850;flex-shrink:0}.quiz-feedback{margin-top:13px;padding:12px 14px;border-radius:10px;background:var(--green-bg);color:var(--green);font-size:12px}.quiz-feedback.wrong{background:#ec6f6f12;color:var(--red)}.lesson-nav-footer{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}.lesson-done-row{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--outline);margin:22px 0;flex-wrap:wrap}.lesson-done-row p{flex:1;font-size:12px;color:var(--muted)}
.playground-intro{margin-bottom:25px}.playground-shell{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:16px;align-items:stretch}.lab-pane{min-width:0;overflow:hidden}.lab-pane-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--outline);gap:13px}.lab-pane-title{font-weight:780;font-size:13px}.lab-tabs{display:flex;gap:5px;padding:12px 14px;border-bottom:1px solid var(--outline);flex-wrap:wrap}.lab-tab{padding:8px 12px;background:transparent;color:var(--muted);border:1px solid transparent;border-radius:8px;font-size:11px;font-weight:800}.lab-tab:hover{background:var(--panel-hover)}.lab-tab.active{color:var(--purple);background:var(--purple-bg);border-color:#a28bff23}.lab-editor{width:100%;min-height:390px;background:var(--input);color:var(--fg);border:0;outline:none;resize:vertical;padding:21px;font:12.5px/1.85 ui-monospace,Consolas,monospace;tab-size:2;white-space:pre}.lab-actions{padding:14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-top:1px solid var(--outline)}.lab-output{display:flex;flex-direction:column}.output-tabs{padding:13px 16px;background:var(--panel-alt);border-bottom:1px solid var(--outline);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:760}.status-circle{height:7px;width:7px;background:var(--green);border-radius:50%}.output-content{padding:17px;min-height:385px;flex:1}.output-intro{color:var(--subtle);font-size:12px}.output-console{font:12px/1.75 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.output-console .console-line{padding-bottom:7px}.lab-preview{width:100%;height:360px;border:1px solid var(--outline);border-radius:9px;background:white}.lab-info{background:var(--purple-bg);border:1px solid #9578ee24;border-radius:12px;padding:16px 18px;margin-top:19px;color:var(--muted);font-size:12px}.lab-info strong{color:var(--fg)}.lab-info p{margin-top:5px}.lab-info code{white-space:nowrap}
.glossary-tools{margin:22px 0}.filter-input{background:var(--input);color:var(--fg);border:1px solid var(--outline);border-radius:11px;height:45px;padding:0 15px;width:100%;max-width:420px}.glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.glossary-card{padding:18px 20px}.glossary-card h3{font-size:15px;margin-bottom:5px}.glossary-card p{color:var(--muted);font-size:12px;margin-bottom:13px}.glossary-card small{font-size:10px;color:var(--purple);font-weight:700}.progress-hero{padding:28px;display:flex;align-items:center;gap:25px;background:linear-gradient(112deg,var(--panel),var(--panel-alt))}.progress-ring{--p:0;width:117px;height:117px;flex:0 0 117px;border-radius:50%;background:conic-gradient(var(--purple) calc(var(--p)*1%),var(--outline) 0);display:grid;place-items:center}.ring-hole{width:91px;height:91px;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;justify-content:center;align-items:center}.ring-hole strong{font-size:26px}.ring-hole small{color:var(--subtle);font-size:10px}.progress-hero h2{margin-bottom:5px}.progress-hero p{color:var(--muted);font-size:12px}.achievements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.award-card{padding:20px;opacity:.55;transition:opacity var(--transition)}.award-card.unlocked{opacity:1;border-color:#a08af544}.award-symbol{height:37px;width:37px;display:grid;place-items:center;background:var(--purple-bg);border-radius:10px;color:var(--purple);font-size:18px;margin-bottom:10px}.award-card h3{font-size:13px;margin-bottom:5px}.award-card p{color:var(--muted);font-size:11px}.track-progress-list{display:grid;gap:12px}.track-progress{padding:18px 20px;display:flex;align-items:center;gap:18px}.track-progress .course-icon{width:43px;height:43px;flex:0 0 43px;border-radius:11px;font-size:13px}.track-progress-main{flex:1}.track-progress-head{display:flex;justify-content:space-between;font-size:12px;font-weight:750;margin-bottom:9px}.settings-stack{display:grid;gap:14px;max-width:800px}.setting-row{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.setting-row h3{font-size:14px}.setting-row p{color:var(--muted);font-size:12px;margin-top:6px;max-width:510px}.setting-actions{display:flex;gap:10px;flex-wrap:wrap}.danger-zone{border-color:#d86f6f50}.danger-btn{background:#f86b6b13;color:var(--red);border:1px solid #f86b6b33}.upload-file{display:none}.empty-state{text-align:center;padding:37px 15px;color:var(--muted)}.empty-state h3{color:var(--fg);margin:0 0 6px}.toast-region{position:fixed;z-index:100;bottom:24px;right:24px;display:grid;gap:9px;max-width:min(350px,calc(100vw - 36px))}.toast{background:var(--panel);color:var(--fg);border:1px solid var(--outline);box-shadow:var(--shadow);border-radius:12px;padding:13px 18px;font-weight:650;font-size:12px;animation:toast-in .2s ease}.toast.ok{border-left:3px solid var(--green)}.toast.warn{border-left:3px solid var(--orange)}@keyframes toast-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:1180px){.sidebar{width:228px;flex-basis:228px}.brand{padding-left:14px}.brand-text{font-size:18px}.hero{padding:29px 31px}.hero-visual{margin-right:-16px}.hero h1{font-size:34px}.lesson-layout{grid-template-columns:minmax(0,1fr) 215px}.metrics-grid{gap:10px}.metric-card{padding:15px}}
@media(max-width:980px){.sidebar{position:fixed;left:0;transform:translateX(-100%);transition:transform .2s;box-shadow:10px 0 50px #0003}.sidebar.open{transform:translateX(0)}.sidebar-backdrop.show{position:fixed;inset:0;background:#0008;z-index:29;display:block}.mobile-menu{display:grid}.main-content{padding:27px 25px 45px}.topbar{padding:0 25px}.lesson-layout{grid-template-columns:minmax(0,1fr) 215px}.global-search{width:260px}.hero-visual{margin-right:0}}
@media(max-width:720px){.topbar{height:65px;padding:0 16px}.global-search{width:38px}.global-search input{width:38px;padding:0;background:transparent;color:transparent;cursor:pointer}.global-search:focus-within{position:absolute;left:58px;right:104px;width:auto;z-index:80}.global-search:focus-within input{width:100%;background:var(--panel);padding:0 15px 0 36px;color:var(--fg);cursor:text}.search-shortcut{display:none}.topbar-end{gap:7px}.top-stat{padding:9px}.breadcrumbs{max-width:190px}.main-content{padding:22px 16px 36px}.hero{grid-template-columns:1fr;padding:27px 24px}.hero-visual{max-width:390px;margin:auto;width:100%;transform:rotate(1deg)}.hero h1{font-size:34px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-grid{grid-template-columns:1fr}.home-bottom{grid-template-columns:1fr}.lesson-layout{grid-template-columns:1fr}.lesson-sidebar{display:none}.glossary-grid{grid-template-columns:1fr}.achievements{grid-template-columns:repeat(2,minmax(0,1fr))}.playground-shell{grid-template-columns:1fr}.lab-editor{min-height:260px}.output-content{min-height:240px}.page-header{align-items:flex-start}.course-intro{flex-wrap:wrap;padding:22px}.course-intro-progress{min-width:0;width:100%;text-align:left}.course-intro-icon{width:58px;height:58px;flex-basis:58px}.course-intro-copy h1{font-size:25px}.lesson-row{padding:14px 13px;gap:10px}.lesson-row-end{gap:6px}.continue-card{flex-wrap:wrap}.continue-card .btn{margin-left:0;width:100%}.app-footer{padding:15px;font-size:10px}.practice-card,.quiz-card{padding:18px}.progress-hero{padding:19px;gap:15px}}
@media(max-width:430px){.breadcrumbs{max-width:116px}.top-stat{font-size:10px}.top-stat span{font-size:12px}.hero h1{font-size:30px}.hero-actions .btn{width:100%}.hero-visual{display:none}.metrics-grid{gap:9px}.metric-card{padding:13px}.course-intro{gap:13px}.course-intro-stats{display:block}.course-intro-stats span{margin-right:8px}.page-header h1{font-size:30px}.lesson-row-end .tag{display:none}.achievements{grid-template-columns:1fr}.setting-row{display:block}.setting-actions{margin-top:15px}.lesson-nav-footer .btn{flex:1}.progress-ring{width:95px;height:95px;flex-basis:95px}.ring-hole{width:72px;height:72px}.ring-hole strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Account profiles */
.account-pill{display:flex;align-items:center;gap:6px;color:var(--fg);background:var(--panel);border:1px solid var(--outline);border-radius:999px;padding:9px 14px;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800;text-decoration:none}.account-pill:hover{border-color:var(--purple)}.account-grid,.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;max-width:1040px}.account-profile,.account-info,.auth-card,.account-benefits{padding:30px}.account-profile{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.profile-avatar{width:75px;height:75px;display:grid;place-items:center;background:linear-gradient(130deg,#9464e9,#5a7bff);border-radius:21px;color:white;font-size:32px;font-weight:850}.account-profile h2,.account-info h2,.account-benefits h2{font-size:22px}.account-profile p,.account-info p,.account-benefits p{color:var(--muted);font-size:13px;line-height:1.8}.profile-metrics{display:flex;gap:10px;flex-wrap:wrap;width:100%;margin:12px 0}.profile-metrics span{padding:12px;border:1px solid var(--outline);border-radius:12px;font-size:11px;color:var(--muted)}.profile-metrics b{color:var(--fg);display:block;font-size:22px}.account-danger{border-top:1px solid var(--outline);margin-top:25px;padding-top:22px}.account-danger h3{font-size:15px;margin-bottom:4px}.account-danger form{margin-top:15px;display:grid;gap:10px}.account-danger input,.auth-form input:not([type="checkbox"]){width:100%;padding:13px 15px;background:var(--input);color:var(--fg);border:1px solid var(--outline);border-radius:10px;font:inherit}.account-danger label,.auth-form label:not(.auth-check){font-size:12px;font-weight:800;color:var(--fg)}.account-danger button{justify-self:start}.auth-tabs{display:flex;background:var(--panel-alt);border-radius:12px;padding:5px;gap:4px;margin-bottom:25px}.auth-tabs button{flex:1;background:transparent;color:var(--muted);border:0;border-radius:9px;padding:12px;font-weight:850;cursor:pointer}.auth-tabs button.active{background:var(--purple-bg);color:var(--purple);border:1px solid #9b82f755}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-form label:not(:first-child){margin-top:7px}.auth-check{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px;margin:12px 0}.auth-check input{accent-color:var(--purple);width:17px;height:17px}.auth-submit{margin-top:12px;justify-content:center}.auth-note,.auth-warning{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.7}.auth-warning{color:var(--red)}.account-benefits{background:linear-gradient(135deg,var(--panel),var(--panel-alt));align-self:start}.benefit-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--purple-bg);color:var(--purple);font-size:30px;margin-bottom:23px}.account-benefits ul{list-style:none;padding:20px 0;display:grid;gap:14px;font-size:13px;color:var(--fg)}.privacy-note{padding:15px;border:1px solid var(--outline);border-radius:12px;color:var(--muted);font-size:12px;line-height:1.7}.account-link{margin-bottom:5px}@media(max-width:820px){.account-grid,.auth-layout{grid-template-columns:1fr}.account-profile,.account-info,.auth-card,.account-benefits{padding:21px}}@media(max-width:520px){.account-pill{max-width:95px;padding:8px 10px;font-size:10px}.topbar-end{gap:5px}.account-profile,.account-info,.auth-card,.account-benefits{padding:18px}}
/* Kodverkstan 3.0 · course taxonomy & shared leaderboard */
.leaderboard-teaser{padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(120deg,var(--panel),var(--purple-bg))}
.leaderboard-teaser h3{font-size:19px;margin:7px 0}.leaderboard-teaser p{font-size:12px;color:var(--muted)}
.course-level-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 30px}
.level-jump{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--outline);border-radius:14px;background:var(--panel);padding:16px;transition:border-color .18s,transform .18s}
.level-jump:hover{border-color:var(--purple);transform:translateY(-2px)}
.level-jump>span{display:grid;place-items:center;background:var(--purple-bg);width:37px;height:37px;flex:0 0 37px;border-radius:11px;color:var(--purple);font-weight:850}
.level-jump strong{font-size:13px;white-space:nowrap}.level-jump small{font-size:11px;color:var(--muted);margin-left:auto}
.level-section{margin:31px 0 39px;scroll-margin-top:100px}.level-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:0 2px 14px;border-bottom:1px solid var(--outline);margin-bottom:15px}
.level-section-head .eyebrow{color:var(--purple)}.level-section-head h2{margin:4px 0}.level-section-head p,.level-completion{font-size:12px;color:var(--muted)}
.topic-list{display:grid;gap:13px}.topic-group{overflow:hidden}.topic-heading{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:20px 23px;min-width:0}.topic-heading::-webkit-details-marker{display:none}
.topic-heading:hover{background:var(--panel-hover)}.topic-bubble{display:grid;place-items:center;background:var(--purple-bg);color:var(--purple);font-weight:850;font-size:12px;width:44px;height:44px;border-radius:13px;flex:0 0 44px}
.topic-heading-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.topic-heading-main strong{font-size:15px}.topic-heading-main small{font-size:11px;color:var(--muted)}
.topic-fraction{font-size:12px;color:var(--muted);white-space:nowrap}.topic-chevron{color:var(--muted);font-size:19px;transition:transform .18s}.topic-group[open] .topic-chevron{transform:rotate(180deg)}
.topic-inner{padding:0 22px 16px}.topic-inner .topic-progress{margin:0 0 12px}.topic-inner .lesson-list{border-top:1px solid var(--outline)}.topic-inner .lesson-row{border-bottom:1px solid var(--outline)}.topic-inner .lesson-row:last-child{border-bottom:0}
.leaderboard-filters{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 18px}.leader-filter{background:var(--panel);border:1px solid var(--outline);border-radius:10px;padding:10px 16px;color:var(--muted);font-weight:750;font-size:12px;cursor:pointer}.leader-filter:hover{border-color:var(--purple)}.leader-filter.active{background:var(--purple-bg);color:var(--purple);border-color:var(--purple)}
.leader-status{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:18px}.leader-my-rank{padding:8px 13px;border:1px solid #a48bff55;border-radius:999px;color:var(--purple);font-weight:750}
.leader-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.podium-card{padding:28px 14px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:7px;background:linear-gradient(150deg,var(--panel),var(--panel-alt))}.podium-1{border-color:#e8c57c55;background:linear-gradient(160deg,var(--panel),rgba(231,192,94,.08))}
.podium-medal{font-size:28px;line-height:1.4}.podium-avatar{display:grid;place-items:center;width:57px;height:57px;border-radius:18px;background:linear-gradient(140deg,#8e79e6,#547ae2);color:#fff;font-size:25px;font-weight:850}.podium-1 .podium-avatar{background:linear-gradient(120deg,#dcb260,#a77632)}.podium-2 .podium-avatar{background:linear-gradient(120deg,#a1b1ce,#657696)}.podium-3 .podium-avatar{background:linear-gradient(120deg,#d2a18a,#946a58)}
.podium-name{font-size:14px;font-weight:850;max-width:100%;overflow-wrap:anywhere}.podium-card strong{font-size:22px;color:var(--fg)}.podium-card small{font-size:11px;color:var(--muted)}
.leader-table-wrap{overflow-x:auto}.leader-table{width:100%;border-collapse:collapse;text-align:left;min-width:480px}.leader-table th{color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.045em;padding:17px 24px;background:var(--panel-alt)}.leader-table td{padding:14px 24px;border-top:1px solid var(--outline);font-size:13px}.leader-table th:last-child,.leader-table td:last-child{text-align:right}.leader-table tr.leader-you{background:var(--purple-bg)}.rank-pill{font-weight:800;color:var(--muted)}.rank-user{display:flex;align-items:center;gap:12px}.rank-user strong{overflow-wrap:anywhere}.leader-initial{display:grid;place-items:center;flex:0 0 33px;height:33px;border-radius:9px;color:var(--purple);background:var(--purple-bg);font-weight:850}.leader-xp{color:var(--purple);font-size:15px}.leader-xp span{font-size:10px;color:var(--muted)}.leader-info{padding:24px;margin-top:17px;max-width:980px}.leader-info h3{font-size:15px;margin-bottom:9px}.leader-info p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:13px}.leader-loading{padding:50px 20px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:720px){.leaderboard-teaser{flex-direction:column;align-items:flex-start}.course-level-nav{gap:7px}.level-jump{padding:11px;gap:6px;flex-direction:column;text-align:center}.level-jump small{margin-left:0}.topic-heading{padding:15px;gap:10px}.topic-fraction{font-size:10px}.topic-inner{padding:0 12px 12px}.leader-podium{gap:7px}.podium-card{padding:16px 5px}.podium-card strong{font-size:15px}.podium-avatar{width:45px;height:45px}.podium-name{font-size:12px}.level-section-head{align-items:flex-start}.level-completion{white-space:nowrap}}
@media(max-width:430px){.level-jump strong{font-size:11px}.level-jump small{font-size:9px}.topic-bubble{height:37px;width:37px;flex-basis:37px}.topic-heading-main strong{font-size:13px}.topic-heading-main small{font-size:10px}.topic-fraction{display:none}.leader-filter{padding:8px 10px;font-size:11px}}