:root{--bg:#f6f8fa;--paper:#fff;--ink:#20303c;--muted:#71828e;--line:#e3e9ed;--teal:#147d74;--teal-dark:#09665f;--soft:#edf6f2;--mint:#b4ddca;--gold:#bd884e;--sidebar:230px;--mono:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;--radius:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.42;cursor:not-allowed}a{color:inherit;text-decoration:none}button{border:0}h1,h2,h3,p{margin:0}h1{font-size:34px;letter-spacing:-1.1px;line-height:1.25}h2{font-size:19px;letter-spacing:-.45px}h3{font-size:15px}a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #3db4a5;outline-offset:3px}[hidden]{display:none!important}svg{display:block}button svg,[data-icon] svg{width:17px;height:17px;flex-shrink:0}[data-icon]{display:inline-flex;align-items:center}.skip{position:fixed;top:-100px;left:12px;z-index:200;padding:12px;background:white;border:2px solid var(--teal)}.skip:focus{top:12px}.sidebar{position:fixed;left:0;top:0;bottom:0;background:var(--paper);border-right:1px solid var(--line);width:var(--sidebar);padding:29px 16px 20px;display:flex;flex-direction:column;z-index:40;overflow:auto}.brand{display:flex;gap:12px;align-items:center;font-size:27px;font-weight:780;letter-spacing:-1px;margin:0 13px 30px;line-height:1}.brand-light{font-weight:420}.brand small{display:block;font-size:7px;letter-spacing:1.7px;color:#7f909a;font-weight:650;margin-top:9px}.brand-mark{display:grid;grid-template-columns:12px 12px;grid-template-rows:12px 12px;gap:4px;transform:rotate(-5deg)}.brand-mark i{background:var(--teal);border-radius:3px}.brand-mark i:last-child{background:#acd9c4}.workspace{border:1px solid var(--line);border-radius:9px;background:#f8faf9;padding:10px;display:flex;gap:9px;align-items:center;font-size:10px;color:#526770;margin:0 0 28px}.workspace small{display:block;font-size:9px;color:#87968e;margin-top:2px}.workspace-square{background:#e3eee7;color:#417b67;padding:7px;border-radius:6px;font-weight:700}.nav-label{padding:0 12px;color:#8c9ba4;font-size:9px;font-weight:700;letter-spacing:1.4px;margin-bottom:9px}.second-label{margin-top:28px}.nav-link{display:flex;align-items:center;gap:10px;padding:12px 11px;border-radius:8px;color:#647783;font-size:12px;margin:3px 0;transition:background .15s}.nav-link:hover{background:#f4f8f6}.nav-link.active{color:var(--teal);background:var(--soft);font-weight:600}.nav-count{margin-left:auto;font:10px var(--mono);color:#8c9d99}.mini{font-size:8px;background:#edf1f1;border-radius:3px;padding:1px 4px;color:#91a199;margin-left:auto}.sidebar-bottom{margin-top:auto;padding-top:32px}.progress-box{padding:15px 13px;background:linear-gradient(135deg,#eff7f2,#f9fbf9);border:1px solid #e4ece6;border-radius:10px}.progress-title{font-size:11px;font-weight:600;color:#506c5e}.progress-box p{font-size:10px;line-height:1.7;color:#84978a;margin-top:6px}.progress-track{height:4px;background:#dfeae2;border-radius:5px;overflow:hidden;margin-top:16px}.progress-track span{height:100%;display:block;background:var(--teal);transition:width .3s}.progress-box small{font-size:9px;color:#7f9585;display:block;margin-top:8px}.quiet-button{background:none;display:flex;gap:8px;align-items:center;padding:15px 8px;color:#7b9186;font-size:10px}.quiet-button:hover{color:var(--teal)}.quiet-button svg{width:13px;height:13px}.local-status{display:flex;gap:7px;align-items:flex-start;font-size:10px;color:#708b7a;margin:4px 7px}.status-dot{background:#78b999;border-radius:50%;height:5px;width:5px;margin-top:5px;flex-shrink:0}.local-status small{display:block;font-size:9px;color:#9aa89f;margin-top:2px}.shell{margin-left:var(--sidebar)}.topbar{height:72px;padding:0 34px;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.top-left,.top-actions{display:flex;align-items:center;gap:22px;min-width:0}.breadcrumb{display:flex;gap:11px;font-size:11px;color:#94a0a8;min-width:0}.breadcrumb strong{font-weight:500;color:#526977;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.search-shortcut{display:flex;align-items:center;gap:8px;background:transparent;font-size:10px;color:#82939e}.search-shortcut kbd{font:10px var(--mono);border:1px solid #e3e9ed;border-radius:4px;padding:0 5px;margin-left:18px}.search-shortcut svg{width:14px;height:14px}.offline-badge{font-size:8px;letter-spacing:1.1px;color:#7e988a;white-space:nowrap;display:flex;align-items:center;gap:6px}.offline-badge i{width:4px;height:4px;background:#83bba0;border-radius:50%}.avatar{display:grid;place-items:center;background:#edf6ef;border:1px solid #dbe9de;color:#5d8069;border-radius:50%;width:31px;height:31px;font-size:10px;font-weight:600}main{padding:32px 34px 10px;max-width:1530px;margin:auto;min-height:calc(100vh - 150px)}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:var(--teal);margin-bottom:10px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:27px}.page-head p{margin-top:9px;max-width:680px;color:var(--muted);font-size:13px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:5px;border:1px solid var(--line);background:white;padding:4px 8px;font-size:10px;color:#81918f;white-space:nowrap}.badge.green{border-color:#dcebe1;background:#f0f8f3;color:#56836d}.badge.orange{border-color:#f0e3d2;background:#fbf6ee;color:#a48152}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--teal);color:white;border-radius:8px;padding:11px 17px;font-size:12px;font-weight:550;white-space:nowrap}.button:hover{background:var(--teal-dark)}.button.secondary{background:white;color:#5e7880;border:1px solid #dae4e7}.button.secondary:hover{background:#f4faf6;border-color:#9dc9b7}.button.small{font-size:11px;padding:8px 12px}.button svg{height:14px;width:14px}.icon-button{height:32px;width:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:6px;color:#80929a;flex-shrink:0}.icon-button:hover{background:#eef5f1;color:var(--teal)}.text-link{background:transparent;color:var(--teal);display:inline-flex;gap:6px;align-items:center;font-size:11px;padding:0}.text-link svg{width:13px;height:13px}.muted{color:var(--muted)}.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);border:1px solid #dceae2;border-radius:16px;background:linear-gradient(125deg,#f0f7f1 10%,#edf6f4 90%);overflow:hidden;padding:34px 36px;position:relative;margin-bottom:22px}.hero h1{font-size:38px;font-weight:680;line-height:1.28;letter-spacing:-1.3px}.hero h1 span{color:var(--teal)}.hero p{margin:14px 0 22px;font-size:13px;line-height:1.85;color:#70877b;max-width:490px}.hero .eyebrow{font-size:8px;letter-spacing:1.7px;color:#699482}.hero-buttons{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.hero-art{position:relative;display:flex;align-items:center;justify-content:center;padding-left:15px}.hero-art svg{width:100%;max-width:380px;overflow:visible}.hero-sticker{position:absolute;right:0;bottom:12px;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dde9e1;border-radius:7px;font-size:9px;color:#73947e;padding:7px 10px;box-shadow:0 8px 15px #335b4110}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:32px}.stat-tile{background:white;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:13px;padding:17px 18px}.stat-icon{width:36px;height:36px;border-radius:9px;background:#f0f6f3;color:#6b9d87;display:grid;place-items:center}.stat-icon svg{width:17px;height:17px}.stat-tile strong{font-size:24px;line-height:1.2;font-weight:550;color:#416f60}.stat-tile small{display:block;font-size:10px;color:#889a91;margin-top:3px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:26px 0 16px}.section-head h2{font-size:17px;font-weight:650}.section-head p{font-size:11px;color:#8d9ba3;margin-top:5px}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lesson-card{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}.lesson-card:hover{transform:translateY(-3px);border-color:#b5d4c4;box-shadow:0 10px 25px #3655440b}.card-preview{height:103px;background:#f9fbfa;background-image:radial-gradient(#cfddd566 .8px,transparent .8px);background-size:13px 13px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #edf2ef}.card-preview svg{width:205px;height:82px}.card-bookmark{position:absolute;right:9px;top:9px;background:#ffffffa8;height:25px;width:25px}.card-bookmark svg{width:13px;height:13px}.card-bookmark.saved{color:#297e62;background:#e8f4ed}.card-content{padding:16px 17px 15px;flex:1;display:flex;flex-direction:column}.card-kicker{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:8px;letter-spacing:.8px;text-transform:uppercase;color:#7d9a8b;margin-bottom:9px}.card-kicker .reviewed{color:#478565}.card-title{font-size:15px;font-weight:650;letter-spacing:-.3px;line-height:1.4}.card-content p{font-size:11px;line-height:1.75;color:#83958e;margin:8px 0 15px;flex:1}.card-bottom{border-top:1px solid #eef2f0;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:#899d91;font-size:9px}.card-bottom strong{font-size:10px;color:#3d8c6b;font-weight:550;display:flex;gap:6px;align-items:center}.card-bottom svg{width:12px;height:12px}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}.search-input{position:relative;min-width:180px;flex:1;max-width:390px}.search-input>span{position:absolute;left:12px;top:12px;color:#95a59d}.search-input svg{width:15px;height:15px}.search-input input{width:100%;border:1px solid #dfe7e9;border-radius:8px;background:white;padding:10px 12px 10px 36px;font-size:12px;color:#557468}select{background:white;color:#647e75;border:1px solid #dfe7e9;border-radius:8px;padding:10px 12px;font-size:11px;max-width:250px}.filter-count{margin-left:auto;font-size:10px;color:#94a39c}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:21px}.chip{border:1px solid #e0e8e3;background:white;color:#809489;font-size:10px;border-radius:20px;padding:6px 11px}.chip.active{border-color:#b1d3bf;background:#eaf6ee;color:#397c5d}.empty{padding:55px 25px;text-align:center;background:white;border:1px dashed #cfddd5;border-radius:12px;color:#7f9687}.empty h2{color:#4d7760;margin-bottom:9px}.empty .button{margin-top:20px}.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}.path-card{border:1px solid var(--line);background:white;border-radius:13px;padding:24px}.path-number{font:12px var(--mono);color:#77a08a;border:1px solid #dce9df;background:#f1f7f2;width:35px;height:35px;border-radius:8px;display:grid;place-items:center;margin-bottom:17px}.path-card h2{font-size:19px;line-height:1.4}.path-card>p{font-size:12px;color:#88998f;margin:8px 0 16px}.path-count{font-size:10px;color:#7d9786;margin-bottom:12px}.path-list{margin-top:18px;border-top:1px solid #e6eee8;padding-top:8px}.path-item{display:flex;align-items:center;gap:9px;border-bottom:1px solid #f0f4f1;padding:10px 1px;font-size:11px;color:#647e70}.path-item:hover{color:var(--teal)}.path-item>span:first-child{font:9px var(--mono);color:#a2b3a8;width:21px}.path-item>span:last-child{margin-left:auto;color:#6aa286}.lesson-header{align-items:flex-start}.lesson-header h1{font-size:31px}.lesson-actions{display:flex;gap:8px;align-items:center;padding-top:6px}.lesson-tabs{display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--line);margin-bottom:23px}.lesson-tab{background:none;color:#899991;padding:0 1px 13px;font-size:12px;border-bottom:2px solid transparent;display:flex;gap:7px;align-items:center}.lesson-tab.active{border-color:var(--teal);color:var(--teal);font-weight:600}.lesson-tab svg{width:14px;height:14px}.lesson-tab .mini{margin-left:2px}.lab-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:19px;align-items:stretch}.panel{background:white;border:1px solid var(--line);border-radius:13px;overflow:hidden;min-width:0}.panel-heading{padding:16px 19px;border-bottom:1px solid #edf1f3;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h2{font-size:13px;font-weight:650;display:flex;gap:8px;align-items:center}.panel-heading h2 svg{width:15px;height:15px;color:#7f9c8d}.live-tag{font-size:8px;letter-spacing:.6px;color:#6b987b;display:flex;align-items:center;gap:5px;border:1px solid #e1ece4;border-radius:4px;padding:3px 6px;background:#f5faf6}.live-tag:before{content:'';width:4px;height:4px;background:#78b493;border-radius:50%}.canvas-wrap{background-image:radial-gradient(#d5dfdf66 .8px,transparent .8px);background-size:16px 16px;position:relative;margin:10px 10px 0;overflow:hidden}.visual-svg{display:block;width:100%;height:auto;min-height:240px;max-height:435px}.visual-svg text{font-family:var(--mono)}.visual-svg [data-node]{cursor:pointer}.visual-svg [data-node]:focus{outline:none;filter:drop-shadow(0 0 3px #259279)}.canvas-legend{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 19px 0;font-size:8px;letter-spacing:.8px;color:#93a4a7}.legend-values{display:flex;gap:10px;letter-spacing:0;align-items:center}.legend-values i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#299c81;margin-right:4px}.legend-values .visited-dot{background:#c6dfd0}.frame-in{animation:frame-in .2s ease-out}.moving-edge{stroke-dasharray:6 5;animation:dash 1.1s linear infinite}.viz-table{padding:0 18px 12px;max-height:145px;overflow:auto}.viz-table table{width:100%;border-collapse:collapse;font:10px/1.6 var(--mono);color:#6e8c7b}.viz-table td{border-bottom:1px solid #eaf0ec;padding:4px 8px;word-break:break-word}.viz-table td:first-child{color:#3a7b62;font-weight:600;width:33%}.aux-label{font-size:8px;letter-spacing:1px;color:#93a59a;margin-bottom:5px}.canvas-caption{font-size:9px;color:#8ea295;text-align:center;margin:0 15px 10px}.step-box{border:1px solid #dfece3;background:#f0f7f2;border-radius:9px;margin:13px 17px 0;padding:13px 14px;min-height:103px}.step-box .eyebrow{color:#7d9b88;font-size:8px;letter-spacing:1px;margin-bottom:4px}.step-box h3{font-size:13px;font-weight:600;color:#48725a;margin-bottom:4px;line-height:1.4}.step-box p{font-size:11px;line-height:1.75;color:#6c8775}.playback{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:17px 16px 7px}.play-controls{display:flex;gap:4px;align-items:center}.play-controls .button{min-width:88px;font-size:11px;padding:8px 13px}.playback select{font-size:10px;padding:5px 6px;border-radius:5px}.speed-label{display:flex;align-items:center;gap:8px;font-size:9px;color:#93a398}.timeline-row{display:flex;align-items:center;gap:12px;padding:6px 18px 17px}.timeline-row input{width:100%;accent-color:var(--teal);height:4px}.timeline-row span{font:9px var(--mono);white-space:nowrap;color:#88a092;min-width:42px;text-align:right}.code-panel{background:#1c2b35;border-color:#1c2b35;color:#b2c5ce;display:flex;flex-direction:column}.code-top{display:flex;align-items:center;justify-content:space-between;padding:15px 17px 12px;gap:10px;background:#20313d}.code-top>span{font:10px var(--mono);color:#a3bac4;display:flex;gap:8px;align-items:center}.code-top .icon-button{color:#90a8b4;width:23px;height:23px}.code-top .icon-button:hover{background:#2e4654}.code-tabs{display:flex;align-items:center;gap:18px;border-bottom:1px solid #34434b;background:#20313d;padding:0 16px}.code-tabs button{background:none;color:#8aa2ad;font-size:10px;padding:9px 0;border-bottom:2px solid transparent}.code-tabs button.active{color:#bce3d0;border-color:#8ccbac}.runtime{font-size:7px;border:1px solid #40525d;padding:2px 5px;border-radius:4px;margin-left:auto;color:#83a194;white-space:nowrap}.code-notice{font-size:9px;color:#b2c9bd;padding:10px 16px;background:#293c36;line-height:1.7;border-bottom:1px solid #3a4e41}.code-scroll{height:350px;overflow:auto;scrollbar-width:thin;scrollbar-color:#405969 transparent;padding:10px 0;overscroll-behavior:contain}.code-line{display:flex;font:10px/20px var(--mono);min-height:20px;white-space:pre;border-left:2px solid transparent}.line-no{color:#627e8b;width:35px;flex:0 0 35px;text-align:right;padding-right:12px;position:sticky;left:0;background:#1c2b35;user-select:none;font-size:9px}.line-code{padding-right:18px}.code-line.active{border-left-color:#9bd7b9;background:#294b3f}.code-line.active .line-no{background:#294b3f;color:#b7d6c5}.code-line.active .line-code{color:#d5eadc}.tok-key{color:#c1a6d0}.tok-string{color:#a3c48d}.tok-comment{color:#6f919e}.tok-number{color:#d4b589}.code-output{border-top:1px solid #304350;padding:11px 15px;margin-top:auto}.output-label{display:flex;justify-content:space-between;gap:8px;font:8px var(--mono);letter-spacing:.8px;color:#6f9986;margin-bottom:6px}.code-output pre{font:10px/1.7 var(--mono);color:#acd0bc;white-space:pre-wrap;word-break:break-word;max-height:93px;overflow:auto;margin:0}.inspector{border-top:1px solid #e3ece5;background:#f9fbfa;color:#5b7b69;padding:12px 16px;min-height:78px}.inspector-label{font-size:8px;letter-spacing:.8px;color:#87a391;margin-bottom:9px}.variables{display:flex;flex-wrap:wrap;gap:7px 13px}.variable{font:9px/1.6 var(--mono);color:#8ba194;display:flex;gap:5px;align-items:center;max-width:100%;min-width:0}.variable b{font-weight:400;color:#4e7d63;background:#edf4ef;border:1px solid #e2ece5;padding:1px 5px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}.event-row{display:flex;align-items:flex-start;gap:10px;background:transparent;color:#8eaab4;width:100%;padding:10px 14px;text-align:left;border-left:2px solid transparent}.event-row>span{font:9px var(--mono);padding-top:2px;color:#607c8a}.event-row strong{font-size:11px;font-weight:500;display:block}.event-row small{display:block;font:8px var(--mono);color:#698b87;margin-top:3px}.event-row.active{background:#2a493d;border-left-color:#99d7b4;color:#c3decd}.event-row.active>span{color:#b7d1bd}.event-row:hover{background:#283e47}.input-panel{margin-top:19px}.input-panel .panel-heading{padding:15px 18px}.input-panel .panel-heading p{color:#8b9e92;font-size:10px;margin-top:3px}.input-actions{display:flex;gap:8px;align-items:center}.input-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding:17px 19px}.json-editor{width:100%;min-height:160px;border:1px solid #dfe7e3;border-radius:8px;background:#f8faf9;font:11px/1.8 var(--mono);color:#557a63;padding:12px 14px;resize:vertical;tab-size:2}.input-help{font-size:11px;color:#809987;line-height:1.9}.input-help strong{font-size:12px;color:#4f7c61;font-weight:600;display:block;margin-bottom:5px}.input-help p+p{margin-top:12px}.error{font-size:11px;color:#b35f42;line-height:1.65;min-height:18px;margin-top:6px}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;padding:18px 19px}.model-control label{font-size:10px;line-height:1.5;color:#78917f;display:block;margin-bottom:7px}.model-control input[type=number]{width:100%;background:#fafcfb;border:1px solid #dfe8e2;color:#4f785d;padding:8px 10px;border-radius:6px;font:12px var(--mono)}.model-control.toggle{display:flex;align-items:center;gap:10px;padding-top:15px}.model-control.toggle label{margin:0}.model-control input[type=checkbox]{width:17px;height:17px;accent-color:var(--teal);flex-shrink:0}.model-limit{border-top:1px solid #edf2ee;padding:12px 18px;color:#8a9e90;font-size:10px;line-height:1.8}.model-limit strong{color:#698d73;font-weight:600}.lesson-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:19px 2px 0;font-size:10px;color:#869e8d}.lesson-foot>span{max-width:70%;line-height:1.8}.learn-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,.7fr);gap:23px}.reading-panel{padding:28px}.reading-panel h2{font-size:20px;margin-bottom:11px;color:#436954}.reading-panel h3{font-size:14px;color:#4e7a5b;margin-top:26px;margin-bottom:8px}.reading-panel p{font-size:13px;line-height:1.95;color:#7a9180}.reading-panel .callout{padding:16px 17px;border:1px solid #eddfc7;background:#fcf8ef;border-radius:8px;font-size:12px;line-height:1.9;color:#9b805b;margin-top:25px}.reading-panel pre{font:11px/1.9 var(--mono);background:#f2f6f3;padding:15px;border:1px solid #e4ece5;border-radius:8px;white-space:pre-wrap;word-break:break-word;color:#527861}.reading-panel ul{padding-left:19px;color:#7a9180;font-size:12px;line-height:1.9}.reading-panel li{margin-bottom:8px}.reading-aside{display:flex;flex-direction:column;gap:18px}.side-block{padding:22px}.side-block h3{font-size:13px;color:#537760;margin-bottom:12px}.side-block p{font-size:11px;line-height:1.9;color:#889b8c}.related-link,.ref-link{display:flex;gap:8px;align-items:center;font-size:11px;color:#698972;padding:9px 0;border-bottom:1px solid #edf2ee}.ref-link{font-size:10px;line-height:1.7}.related-link svg,.ref-link svg{width:12px;height:12px;margin-left:auto;flex-shrink:0}.quiz-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(220px,.7fr);gap:32px}.quiz-panel{padding:28px}.quiz-kicker{display:flex;justify-content:space-between;font-size:10px;color:#95a997;margin-bottom:25px}.quiz-panel h2{font-size:23px;color:#436751;line-height:1.5;letter-spacing:-.6px}.quiz-options{display:flex;flex-direction:column;gap:11px;margin-top:25px}.quiz-option{display:flex;align-items:center;gap:13px;width:100%;padding:14px;background:white;border:1px solid #dce7df;border-radius:8px;color:#79917c;text-align:left;font-size:12px;line-height:1.6}.quiz-option>span{display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;font:10px var(--mono);background:#f0f5f1;color:#94a994;border-radius:5px}.quiz-option:hover{border-color:#94b79d;background:#f7fbf8}.quiz-option.selected{border-color:#6caa83;background:#f0f8f2}.quiz-option.correct{border-color:#63a977;background:#eaf7ed}.quiz-option.incorrect{border-color:#d9ad8a;background:#fff6eb}.quiz-feedback{padding:16px;margin-top:20px;border:1px solid #d9e9de;background:#f1f8f2;border-radius:8px;font-size:12px;line-height:1.85;color:#718e74}.quiz-feedback strong{display:block;color:#47744b;margin-bottom:4px}.quiz-feedback.incorrect{background:#fff8ed;border-color:#ecdcc2;color:#a0825c}.quiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:23px;gap:12px}.quiz-aside{padding:30px 5px}.quiz-aside .path-number{height:45px;width:45px}.quiz-aside h2{font-size:24px;color:#608467;line-height:1.5;font-weight:500}.quiz-aside p{font-size:12px;line-height:1.95;color:#95a591;margin-top:15px}.quiz-aside .text-link{margin-top:22px}.notes-panel{padding:25px;max-width:950px}.notes-panel p{font-size:12px;color:#859780;line-height:1.9;margin:8px 0 19px}.notes-editor{width:100%;min-height:330px;resize:vertical;border:1px solid #dce7dc;background:#fafcf9;border-radius:8px;padding:18px;color:#5f7f5c;font:13px/1.9 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.notes-actions{margin-top:15px;display:flex;justify-content:space-between;gap:12px;align-items:center;color:#96a88d;font-size:10px}.site-footer{display:flex;justify-content:space-between;gap:17px;align-items:center;border-top:1px solid var(--line);padding:21px 0;margin:28px 34px 0;color:#98aaa1;font-size:9px}.site-footer b{font-size:8px;font-weight:500;background:#edf2ee;border-radius:3px;padding:1px 4px;margin-left:3px}.site-footer .text-link{font-size:9px;color:#8da498}.footer-dot{padding:0 7px;color:#c6d0c9}dialog{border:1px solid #dce7df;border-radius:15px;padding:26px;width:min(660px,calc(100vw - 30px));max-height:85vh;color:var(--ink);box-shadow:0 24px 90px #153b3850;background:white}dialog::backdrop{background:#193c3b66;backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}.dialog-top h2{font-size:23px;line-height:1.4}.dialog-copy{font-size:12px;line-height:1.9;color:#7e9581}.dialog-copy p+p{margin-top:15px}.dialog-copy strong{color:#567a58}.dialog-copy ul{padding-left:18px}.dialog-copy h3{font-size:13px;margin:17px 0 6px;color:#607d5e}.dialog-search{width:100%;padding:12px 14px;border:1px solid #d6e5d9;border-radius:8px;color:#5d7d5e;background:#f9fcf8;margin-bottom:13px}.search-results{max-height:48vh;overflow:auto}.search-result{display:flex;justify-content:space-between;gap:15px;padding:13px 6px;border-bottom:1px solid #e9f0e7;font-size:12px;color:#638161}.search-result small{font-size:9px;color:#9bac91;white-space:nowrap}.search-result:hover{color:var(--teal);background:#f6faf4}.toast{position:fixed;bottom:22px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);z-index:100;background:#2e5846;color:#e6f6e8;padding:12px 19px;border-radius:8px;box-shadow:0 7px 24px #1b453a2b;font-size:12px;max-width:90vw;text-align:center}.mobile{display:none}.mobile-view-tabs{display:none}.progress-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:25px}.summary-card{padding:25px}.summary-card strong{font-size:34px;letter-spacing:-1px;color:#4a7c5c;font-weight:500}.summary-card p{font-size:11px;color:#96a58d;margin-top:4px}.success-text{color:#397e54}.danger-button{color:#b27855!important;border-color:#e9d9cb!important}.import-input{display:none}.data-actions{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes frame-in{from{opacity:.5;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes dash{to{stroke-dashoffset:-44}}@media(min-width:1600px){.hero{padding:40px 43px}.hero h1{font-size:43px}.code-scroll{height:400px}.code-line{font-size:11px;line-height:22px}.card-preview{height:125px}.card-preview svg{height:100px;width:240px}.card-content{padding:20px}.card-title{font-size:17px}.card-content p{font-size:12px}.visual-svg{min-height:275px}.step-box p{font-size:12px}}
@media(max-width:1250px){:root{--sidebar:205px}.sidebar{padding-left:11px;padding-right:11px}.brand{font-size:25px;gap:10px}.brand small{font-size:6px}.workspace{font-size:9px;gap:6px}.workspace small{font-size:8px}.nav-link{font-size:11px;gap:8px}.nav-label{font-size:8px}.topbar{padding-left:24px;padding-right:24px}.top-actions{gap:15px}main{padding-left:24px;padding-right:24px}.site-footer{margin-left:24px;margin-right:24px}.hero{padding:28px}.hero h1{font-size:33px}.hero p{font-size:12px}.hero-sticker{font-size:8px}.stat-tile{padding:15px 13px;gap:9px}.stat-icon{height:30px;width:30px}.stat-tile strong{font-size:22px}.stat-tile small{font-size:9px}.lesson-grid{gap:13px}.card-content{padding:14px}.card-title{font-size:14px}.card-content p{font-size:10px}.lab-grid{grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);gap:15px}.step-box{margin-left:12px;margin-right:12px}.step-box p{font-size:10px}.code-line{font-size:9px}.runtime{font-size:6px}.canvas-legend{font-size:7px;padding-left:14px;padding-right:14px}.lesson-header h1{font-size:29px}.lesson-actions .button{font-size:10px;padding:8px 10px}.learn-layout{gap:16px}.reading-panel{padding:23px}.reading-panel p{font-size:12px}.search-shortcut kbd{margin-left:3px}.code-tabs{gap:13px}.code-tabs button{font-size:9px}}
@media(max-width:1000px){:root{--sidebar:180px}.brand{margin-left:9px;font-size:23px;gap:8px}.brand small{font-size:5px;letter-spacing:1.3px}.brand-mark{grid-template-columns:10px 10px;grid-template-rows:10px 10px;gap:3px}.workspace{padding:8px}.workspace-square{padding:6px;font-size:9px}.workspace small{font-size:7px}.nav-link{font-size:10px;padding-left:9px;padding-right:9px}.nav-link svg{width:15px;height:15px}.nav-count{font-size:8px}.nav-label{font-size:7px}.second-label{margin-top:21px}.progress-box{padding:12px}.progress-title{font-size:9px}.progress-box p{font-size:9px}.progress-box small{font-size:8px}.local-status{font-size:9px}.local-status small{font-size:8px}.topbar{height:63px}.hero{grid-template-columns:1fr 200px;padding:25px}.hero h1{font-size:28px}.hero p{font-size:11px}.hero-sticker{display:none}.hero-buttons .button{font-size:10px;padding:9px 12px}.stats-row{gap:10px}.stat-icon{display:none}.stat-tile{padding:14px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-content p{font-size:11px}.card-title{font-size:15px}.card-preview{height:100px}.lab-grid{grid-template-columns:minmax(0,1fr)}.code-scroll{height:330px}.code-line{font-size:11px}.step-box{min-height:95px}.step-box p{font-size:12px}.canvas-legend{font-size:9px}.code-tabs button{font-size:10px}.runtime{font-size:8px}.visual-svg{max-height:400px}.lesson-header{flex-wrap:wrap;gap:10px}.lesson-actions{padding-top:0}.input-inner{grid-template-columns:1fr}.input-help{font-size:11px}.json-editor{min-height:140px}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learn-layout{grid-template-columns:minmax(0,1fr)}.reading-aside{display:grid;grid-template-columns:1fr 1fr}.quiz-layout{grid-template-columns:1fr}.quiz-aside{padding:10px}.quiz-aside .path-number{display:none}.quiz-aside h2{font-size:20px}.quiz-aside p{font-size:11px;margin-top:8px}.path-card{padding:20px}.path-card h2{font-size:17px}.path-card p{font-size:11px}.offline-badge{display:none}.breadcrumb{font-size:10px}.search-shortcut{font-size:9px}.page-head h1{font-size:30px}.filter-bar select{max-width:205px;font-size:10px}.filter-count{font-size:9px}.input-panel .panel-heading{flex-wrap:wrap}.input-actions{margin-left:auto}}
@media(max-width:700px){:root{--sidebar:0px}.sidebar{width:230px;transform:translateX(-100%);transition:transform .2s;padding:25px 16px;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:20px 0 60px #1c45334d}.sidebar .brand{font-size:27px;gap:12px}.sidebar .brand small{font-size:7px;letter-spacing:1.6px}.sidebar .brand-mark{grid-template-columns:12px 12px;grid-template-rows:12px 12px;gap:4px}.sidebar .nav-link{font-size:12px;padding:12px}.sidebar .nav-link svg{width:17px;height:17px}.sidebar .nav-label{font-size:9px}.sidebar .workspace{font-size:10px}.sidebar .workspace small{font-size:9px}.sidebar .progress-title{font-size:11px}.sidebar .progress-box small{font-size:9px}.sidebar .local-status{font-size:10px}.sidebar .local-status small{font-size:9px}.sidebar .nav-count{font-size:10px}.mobile{display:flex}#shade{position:fixed;inset:0;background:#13373260;z-index:35;backdrop-filter:blur(2px)}.shell{margin-left:0}.topbar{height:58px;padding:0 14px;gap:10px}.top-left{gap:6px}.top-actions{gap:9px}.breadcrumb{gap:7px;font-size:9px}.breadcrumb strong{max-width:160px}.search-shortcut>span:not([data-icon]),.search-shortcut kbd{display:none}.avatar{width:26px;height:26px;font-size:9px}main{padding:23px 17px 6px}.hero{padding:24px 21px;grid-template-columns:1fr;margin-bottom:16px;border-radius:12px}.hero h1{font-size:31px;line-height:1.3}.hero p{font-size:12px;max-width:480px;line-height:1.8;margin:12px 0 18px}.hero-art{display:none}.hero .eyebrow{font-size:7px;letter-spacing:1.3px}.hero-buttons .button{font-size:10px;padding:9px 12px}.stats-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:25px}.stat-tile{padding:14px 15px;border-radius:9px}.stat-icon{display:grid;height:29px;width:29px}.stat-icon svg{width:14px;height:14px}.stat-tile strong{font-size:23px}.stat-tile small{font-size:9px}.section-head{margin:23px 0 14px}.section-head h2{font-size:16px}.section-head p{font-size:10px}.section-head .text-link{font-size:10px}.lesson-grid{gap:13px;grid-template-columns:minmax(0,1fr)}.lesson-card{border-radius:11px}.card-preview{height:102px}.card-preview svg{width:220px;height:84px}.card-content{padding:17px}.card-title{font-size:16px}.card-content p{font-size:12px;margin-bottom:14px}.card-bottom{font-size:9px}.card-bottom strong{font-size:10px}.card-kicker{font-size:8px}.page-head{margin-bottom:22px;gap:12px}.page-head h1{font-size:28px}.page-head p{font-size:12px}.page-head .badge{font-size:8px}.eyebrow{font-size:8px;letter-spacing:1.4px}.filter-bar{gap:9px}.search-input{max-width:none;flex-basis:100%}.search-input input{font-size:12px}.filter-bar select{max-width:calc(50% - 5px);flex:1;padding:9px 10px}.filter-count{width:100%;margin-left:0;text-align:right}.chips{gap:6px;margin-bottom:18px}.chip{font-size:9px;padding:5px 9px}.path-grid{grid-template-columns:1fr}.path-card{padding:23px}.path-card h2{font-size:19px}.path-card p{font-size:12px}.path-item{font-size:12px}.lesson-header{margin-bottom:19px}.lesson-header h1{font-size:28px;line-height:1.35}.lesson-header .eyebrow{font-size:7px}.lesson-header p{font-size:12px}.lesson-actions{gap:7px}.lesson-actions .button{font-size:10px}.lesson-tabs{gap:22px;margin-bottom:18px}.lesson-tab{font-size:11px;padding-bottom:12px;gap:5px}.lesson-tab svg{width:13px;height:13px}.mobile-view-tabs{display:flex;gap:7px;margin-bottom:12px}.mobile-view-tabs button{flex:1;background:white;border:1px solid #dde7df;border-radius:6px;padding:8px;font-size:10px;color:#8a9d89}.mobile-view-tabs button.active{background:#ecf6ee;border-color:#aed0b6;color:#4a8056}.lab-grid[data-mobile="visual"] .code-panel{display:none}.lab-grid[data-mobile="code"] .visual-panel{display:none}.panel{border-radius:11px}.panel-heading{padding:14px 15px}.panel-heading h2{font-size:12px}.live-tag{font-size:7px}.canvas-legend{font-size:7px;padding:13px 14px 0}.visual-svg{min-height:185px;max-height:345px}.canvas-wrap{margin-left:5px;margin-right:5px}.step-box{margin:12px 11px 0;padding:12px;min-height:110px}.step-box p{font-size:11px}.step-box h3{font-size:13px}.step-box .eyebrow{font-size:7px}.playback{padding:15px 10px 6px;gap:5px}.play-controls{gap:1px}.play-controls .button{min-width:77px;padding:8px 10px;font-size:10px}.play-controls .icon-button{width:28px;height:29px}.speed-label{font-size:8px;gap:5px}.playback select{font-size:9px;padding:5px 3px}.timeline-row{padding:7px 14px 16px}.code-line{font-size:10px;line-height:20px}.code-scroll{height:355px}.code-notice{font-size:9px}.code-top{padding:13px 14px}.code-tabs{padding:0 13px;gap:15px}.runtime{font-size:7px}.code-output pre{font-size:10px}.input-panel{margin-top:15px}.input-panel .panel-heading{padding:14px}.input-actions{width:100%;justify-content:flex-end}.input-actions .button{font-size:10px}.input-inner{gap:15px;padding:14px}.json-editor{font-size:10px;min-height:175px;padding:12px}.input-help{font-size:10px}.control-grid{padding:15px;gap:15px}.model-control label{font-size:10px}.model-control.toggle{padding-top:8px}.model-limit{padding:11px 14px;font-size:9px}.lesson-foot{font-size:9px;flex-direction:column;align-items:flex-start;gap:14px}.lesson-foot>span{max-width:100%}.reading-panel{padding:21px}.reading-panel h2{font-size:21px}.reading-panel p{font-size:12px}.reading-panel h3{font-size:14px}.reading-aside{grid-template-columns:1fr}.side-block{padding:21px}.reading-panel .callout{font-size:11px;padding:13px}.quiz-panel{padding:21px}.quiz-panel h2{font-size:22px}.quiz-options{margin-top:21px}.quiz-option{padding:12px 11px;font-size:11px;gap:9px}.quiz-feedback{padding:13px;font-size:11px}.quiz-aside h2{font-size:21px}.quiz-aside p{font-size:12px}.quiz-actions .button{font-size:10px;padding:9px 12px}.notes-panel{padding:21px}.notes-editor{font-size:12px;padding:14px}.notes-actions{font-size:9px}.site-footer{margin:24px 17px 0;padding:19px 0;align-items:flex-start;gap:13px;font-size:8px}.site-footer>span{max-width:180px}.site-footer .text-link{font-size:8px;text-align:left;max-width:140px}.site-footer .text-link svg{flex-shrink:0}.toast{left:50%;font-size:11px;width:max-content;max-width:calc(100vw - 28px)}dialog{padding:21px}.dialog-top h2{font-size:20px}.dialog-copy{font-size:11px}.search-result{font-size:11px}.search-result small{font-size:8px}.progress-summary{gap:10px}.summary-card{padding:16px}.summary-card strong{font-size:28px}.summary-card p{font-size:9px}.empty{padding:38px 19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Recorded-state inspectors: bounded, readable, and independently scrollable. */
.aux-block{padding:10px 19px;border-top:1px solid #edf2ed}.aux-values{display:flex;gap:5px;overflow:auto;padding-bottom:4px;max-height:90px}.aux-item{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #dfeade;border-radius:4px;font:10px var(--mono);color:#4b7359;white-space:nowrap}.aux-item small{font-size:8px;color:#9aafa0}.state-table-wrap{margin:5px 18px 12px;max-height:135px;overflow:auto;border:1px solid #e7eee5;border-radius:6px}.state-table{width:100%;border-collapse:collapse;font:10px var(--mono)}.state-table td{padding:7px 10px;border-bottom:1px solid #eaf0e7;color:#5e7e63;text-align:left}.state-table td:first-child{width:32%;background:#f6faf3;color:#7a9680}.search-result small{display:block;white-space:normal;margin-top:3px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.canvas-wrap{overflow:hidden}.code-lines{position:relative}.code-scroll{position:relative}.dialog-search{width:100%;padding:11px 13px;border:1px solid #d7e5d4;border-radius:8px;background:#f8fbf5;color:#476947;font:inherit;margin:5px 0 14px}.modal-copy h3{font-size:14px;margin:20px 0 8px}.modal-copy p{font-size:13px;line-height:1.8;color:#71896f}.modal-copy p+p{margin-top:12px}.success-text{color:var(--teal)}
.hero-art .hero-sticker svg{width:13px;height:13px;flex:0 0 13px}.hero-sticker{white-space:nowrap}.nav-link>span:first-child{flex:0 0 17px;display:inline-flex}.nav-link svg{width:17px;height:17px}.code-top>span>svg{width:15px;height:15px;flex:0 0 15px}.code-line{font-size:11px;line-height:21px}.step-box p{font-size:12px;color:#5e7d68}.card-content p{font-size:12px;color:#738b80}.input-help p{font-size:12px}.input-panel .panel-heading p{font-size:11px}.canvas-caption{font-size:10px}.lesson-foot{font-size:11px}.variable{font-size:10px}.code-output pre{font-size:11px}.live-tag{font-size:8px}.event-row strong{font-size:12px}.event-row small{font-size:10px}@media(max-width:700px){.code-line{font-size:11px;line-height:21px}.step-box p{font-size:12px}.card-content p{font-size:12px}.nav-link>span:first-child{flex-basis:17px}.hero-sticker{white-space:normal}}
.aux-item.hot-item{background:#d7edde;border-color:#72ac8b;color:#246e4e}
.lesson-tabs{overflow-x:auto}.lesson-tab{flex-shrink:0}.canvas-wrap{overflow:auto}@media(max-width:700px){.visual-svg[data-wide]{min-width:600px;max-height:none}.canvas-wrap{max-height:365px}.canvas-caption{padding-left:15px;padding-right:15px;text-align:center}}@media(max-width:380px){.lesson-tabs .mini{display:none}}

/* v2.1: topic-specific, dependency-free card icons. */
.theme-dsa{--topic-color:#147d74;--topic-soft:#eef8f4;--topic-line:#cbe5db;--topic-dots:#b5d7cb}
.theme-systems{--topic-color:#4b6fae;--topic-soft:#f0f5fc;--topic-line:#d6e1f3;--topic-dots:#c1d0e8}
.theme-cases{--topic-color:#b36e43;--topic-soft:#fdf5ee;--topic-line:#f0decc;--topic-dots:#e5cbb6}
.lesson-card .card-preview{height:124px;background:linear-gradient(135deg,var(--topic-soft),#fff);border-bottom:1px solid var(--topic-line);isolation:isolate}
.card-art-link{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}
.topic-art{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;color:var(--topic-color);background-image:radial-gradient(var(--topic-dots) .65px,transparent .65px);background-size:14px 14px}
.topic-badge{width:48px;height:48px;border:1px solid var(--topic-line,#cbe5db);border-radius:13px;background:linear-gradient(145deg,#fff,var(--topic-soft,#eef8f4));color:var(--topic-color,#147d74);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.topic-badge .topic-glyph{display:block;width:29px;height:29px;flex-shrink:0}
.topic-art .topic-badge-large{height:76px;width:76px;border-radius:21px;box-shadow:0 6px 12px #1e3c4a06,0 1px 2px #1e3c4a04;transition:transform .22s ease,box-shadow .22s ease;background:linear-gradient(145deg,#fff 35%,var(--topic-soft));z-index:2}
.topic-art .topic-badge-large .topic-glyph{width:44px;height:44px}
.topic-orbit{position:absolute;left:50%;top:50%;width:206px;height:206px;transform:translate(-50%,-50%);border:1px solid var(--topic-line);border-radius:50%;opacity:.42}
.topic-orbit.inner{width:122px;height:122px;border-style:dashed;opacity:.7}
.topic-art-line{position:absolute;top:50%;width:36px;height:1px;background:var(--topic-line)}
.topic-art-line.left{right:calc(50% + 46px)}.topic-art-line.right{left:calc(50% + 46px)}
.topic-art-line:after{content:'';width:5px;height:5px;background:var(--topic-color);opacity:.4;border-radius:50%;position:absolute;top:-2px}.topic-art-line.left:after{left:0}.topic-art-line.right:after{right:0}
.lesson-card:hover .topic-badge-large,.card-art-link:focus-visible .topic-badge-large{transform:translateY(-2px) scale(1.035);box-shadow:0 10px 18px #1e3c4a0b,0 1px 2px #1e3c4a05}
.lesson-card:hover{border-color:var(--topic-line)}
.lesson-card .card-kicker{color:var(--topic-color)}
.lesson-card .card-bookmark{top:11px;right:11px;width:30px;height:30px;border:1px solid var(--topic-line);border-radius:8px;background:#ffffffed;color:#7c8f99;z-index:3;transition:background .15s,color .15s}
.lesson-card .card-bookmark:hover,.lesson-card .card-bookmark.saved{background:var(--topic-soft);color:var(--topic-color)}
.lesson-card .card-bookmark.saved svg{fill:var(--topic-color);fill-opacity:.13}
.lesson-card .card-bookmark svg{width:14px;height:14px}
.path-card-top{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.path-card-label{font-size:9px;font-weight:600;letter-spacing:1.1px;color:#87978f}
.path-card-label b{font:11px var(--mono);letter-spacing:0;color:#527965;display:block;margin-top:4px}
.lesson-title-row{display:flex;align-items:center;gap:13px;min-width:0}
.lesson-title-row h1{min-width:0}
.lesson-title-badge{width:43px;height:43px;border-radius:12px}
.lesson-title-badge .topic-glyph{width:26px;height:26px}
.search-result{align-items:center;justify-content:flex-start}
.search-result .search-topic-badge{width:38px;height:38px;border-radius:10px}
.search-result .search-topic-badge .topic-glyph{width:24px;height:24px}
.search-result-label{flex:1;min-width:0}
.search-result>svg{flex:0 0 14px;width:14px;height:14px}
@media(min-width:1600px){.lesson-card .card-preview{height:138px}.topic-art .topic-badge-large{height:82px;width:82px}.topic-art .topic-badge-large .topic-glyph{width:48px;height:48px}}
@media(max-width:700px){.lesson-card .card-preview{height:112px}.topic-art .topic-badge-large{width:68px;height:68px;border-radius:19px}.topic-art .topic-badge-large .topic-glyph{width:40px;height:40px}.topic-orbit{width:186px;height:186px}.topic-orbit.inner{width:110px;height:110px}.lesson-title-row{gap:10px;align-items:flex-start}.lesson-title-badge{width:35px;height:35px;border-radius:10px;margin-top:1px}.lesson-title-badge .topic-glyph{width:23px;height:23px}.path-card-top{margin-bottom:15px}.search-result small{white-space:normal}}
@media(prefers-reduced-motion:reduce){.lesson-card:hover .topic-badge-large,.card-art-link:focus-visible .topic-badge-large{transform:none}.topic-art .topic-badge-large{transition:none}}
@media(forced-colors:active){.topic-badge{border-color:CanvasText;color:CanvasText;background:Canvas}.topic-art{background:Canvas;color:CanvasText}.topic-orbit,.topic-art-line{display:none}}

/* SpaceDiff identity. Existing lesson colors and interactive layouts are retained. */
.brand{gap:10px;font-size:25px;letter-spacing:-1px;margin-left:8px;margin-right:0;white-space:nowrap}
.brand .brand-mark{display:block;transform:none;width:36px;height:36px;flex:0 0 36px;line-height:0}
.brand .brand-mark svg{width:100%;height:100%;display:block}
.brand .brand-word{display:block;min-width:0}
.brand .brand-light{color:var(--teal);font-weight:500}
.brand small{font-size:9px;font-weight:500;letter-spacing:.55px;color:#687f77;margin-top:8px}
.crumb-brand{font-weight:650;color:var(--teal);white-space:nowrap}
.crumb-brand:hover{color:var(--teal-dark)}
.hero h1{letter-spacing:-1.25px;max-width:620px;text-wrap:balance}
.hero p{color:#5d786a;max-width:510px}
.hero .eyebrow{color:#517b65}
.footer-brand{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.footer-brand strong{font-size:12px;color:#385c4f;font-weight:650;letter-spacing:-.2px}
.footer-brand .footer-tagline{color:#6f887b;font-size:10px}
.footer-brand>a{color:var(--teal);font-size:10px;border-left:1px solid var(--line);padding-left:13px}
.site-footer .text-link{color:#648273;white-space:nowrap}
@media(max-width:1250px){.brand{font-size:23px;margin-left:5px;gap:9px}.brand .brand-mark{width:32px;height:32px;flex-basis:32px}.brand small{font-size:8px;letter-spacing:.4px}.footer-brand{gap:9px}}
@media(max-width:1000px){.brand{font-size:20px;margin-left:2px;gap:7px}.brand .brand-mark{width:29px;height:29px;flex-basis:29px}.brand small{font-size:8px;letter-spacing:.2px}.footer-brand .footer-tagline{flex-basis:100%}.footer-brand>a{border:0;padding:0}}
@media(max-width:700px){.sidebar .brand{font-size:25px;gap:10px;margin-left:6px}.sidebar .brand .brand-mark{width:36px;height:36px;flex-basis:36px}.sidebar .brand small{font-size:9px;letter-spacing:.55px}.hero h1{font-size:30px;letter-spacing:-.9px}.breadcrumb strong{max-width:110px}.footer-brand{gap:6px}.site-footer>span{max-width:none;flex:1}.site-footer .text-link{max-width:none}.footer-brand .footer-tagline{font-size:9px;line-height:1.6}.footer-brand>a{flex-basis:100%;font-size:9px}}
@media(max-width:380px){.hero h1{font-size:27px}.breadcrumb strong{max-width:87px}.offline-badge{display:none}.footer-brand .footer-tagline{max-width:165px}}

/* Clerk sign-in gate. The Academy stays hidden until a session resolves. */
body.signed-out .sidebar,body.signed-out .shell,body.signed-out .skip{display:none}
.auth-gate{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);overflow:auto}
.auth-panel{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:420px;text-align:center}
.auth-brand{display:flex;gap:12px;align-items:center;font-size:27px;font-weight:780;letter-spacing:-1px;line-height:1}
.auth-brand .brand-mark svg{width:40px;height:40px}
.auth-tagline{color:var(--muted);font-size:13px;max-width:330px;line-height:1.7}
.auth-error{margin:0;padding:11px 15px;border:1px solid #f0d3cd;background:#fdf3f1;border-radius:8px;color:#9c5341;font-size:12px;line-height:1.7}
.auth-widget{display:flex;justify-content:center;width:100%;min-height:380px}
.auth-user{display:flex;align-items:center;min-width:28px;min-height:28px}
@media(max-width:560px){.auth-widget{min-height:340px}.auth-panel{gap:14px}}
.auth-email{color:var(--muted);font-size:11px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-signout{padding:6px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--muted);font-size:11px;font-weight:600}
.auth-signout:hover{border-color:var(--teal);color:var(--teal)}
@media(max-width:700px){.auth-email{display:none}}

/* ---- Landing page -------------------------------------------------------
   The public face. Editorial serif against the app's mono for technical
   labels, on graph paper: an instrument you read, not a brochure. */
.landing{position:fixed;inset:0;z-index:150;overflow-y:auto;overflow-x:hidden;background:var(--bg);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif}
.lp-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000 30%,transparent 78%)}
.lp-glow{position:absolute;top:-220px;right:-140px;width:760px;height:760px;pointer-events:none;
  background:radial-gradient(circle,rgba(20,125,116,.13),rgba(20,125,116,0) 66%)}
.landing>*:not(.lp-grid):not(.lp-glow){position:relative;z-index:1}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1180px;margin:0 auto;padding:26px 34px}
.lp-brand{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:780;letter-spacing:-.9px}
.lp-brand .brand-mark svg{width:32px;height:32px}
.lp-signin{padding:9px 17px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  color:var(--ink);font-size:12px;font-weight:640;transition:border-color .2s,color .2s,transform .2s}
.lp-signin:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px)}

.lp-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr);gap:60px;align-items:center;
  max-width:1180px;margin:0 auto;padding:54px 34px 30px}
.lp-eyebrow{margin:0 0 20px;font-family:var(--mono);font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--teal)}
.lp-title{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,65px);line-height:1.04;
  letter-spacing:-1.8px;margin:0 0 24px}
.lp-line{display:block}
.lp-em{font-style:italic;color:var(--teal)}
.lp-lede{max-width:37ch;margin:0 0 32px;font-size:14.5px;line-height:1.85;color:var(--muted)}
.lp-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lp-primary{display:inline-flex;align-items:center;gap:9px;padding:13px 23px;border-radius:10px;
  background:var(--teal);color:#fff;font-size:13px;font-weight:650;
  box-shadow:0 10px 26px -12px rgba(9,102,95,.75);transition:background .2s,transform .2s,box-shadow .2s}
.lp-primary svg{width:17px;height:17px;transition:transform .25s}
.lp-primary:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(9,102,95,.8)}
.lp-primary:hover svg{transform:translateX(4px)}
.lp-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--muted)}

/* The demo panel leans out of the column, so the page is not two tidy halves. */
.lp-demo{margin:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:0 26px 60px -34px rgba(32,48,60,.42)}
.lp-demo-head{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  color:var(--muted);padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:19px}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.lp-live{margin-left:auto;color:var(--teal);transition:color .3s}
.lp-live.done{color:var(--gold);font-weight:700}
.lp-cells{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.lp-cell{flex:1 1 0;min-width:40px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 2px 7px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  transition:opacity .26s ease,transform .26s ease,border-color .26s ease,background .26s ease}
.lp-cell b{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.lp-cell i{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--muted)}
.lp-cell.out{opacity:.26;transform:scale(.93)}
.lp-cell.mid{border-color:var(--teal);background:var(--soft);transform:translateY(-5px)}
.lp-cell.hit{border-color:var(--gold);background:#fdf6ed;transform:translateY(-5px);
  box-shadow:0 0 0 3px rgba(189,136,78,.17)}
.lp-cell.hit b{color:var(--gold)}
.lp-bounds{min-height:34px;margin-top:17px;font-family:var(--mono);font-size:11px;line-height:1.7;
  color:var(--muted);text-align:center}
.lp-code{margin:15px 0 0;padding:14px 15px;border-radius:10px;background:#152028;overflow-x:auto}
.lp-row{display:block;font-family:var(--mono);font-size:11px;line-height:1.95;color:#7f95a3;
  padding:0 7px;border-radius:5px;transition:color .18s ease,background .18s ease}
.lp-row.on{color:#d6f0e6;background:rgba(20,125,116,.34)}

.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:17px;
  max-width:1180px;margin:0 auto;padding:34px}
.lp-card{padding:25px 23px 27px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease,border-color .25s;
  transition-delay:calc(var(--i) * 110ms)}
.lp-card.in{opacity:1;transform:none}
.lp-card:hover{border-color:var(--mint)}
.lp-card-num{font-family:var(--serif);font-size:32px;color:var(--teal);line-height:1}
.lp-card h3{margin:11px 0 8px;font-size:14px;letter-spacing:-.2px}
.lp-card p{font-size:12.5px;line-height:1.8;color:var(--muted)}
.lp-foot{display:flex;align-items:center;justify-content:center;gap:11px;padding:18px 34px 40px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.lp-foot-sep{color:var(--mint)}
.landing .auth-error{margin-top:22px;text-align:left}

/* One orchestrated entrance rather than motion scattered everywhere. */
@keyframes lp-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.lp-eyebrow,.lp-title .lp-line,.lp-lede,.lp-cta,.lp-demo{animation:lp-rise .75s cubic-bezier(.22,.68,.36,1) both}
.lp-eyebrow{animation-delay:.05s}
.lp-title .lp-line:nth-child(1){animation-delay:.14s}
.lp-title .lp-line:nth-child(2){animation-delay:.24s}
.lp-lede{animation-delay:.36s}
.lp-cta{animation-delay:.46s}
.lp-demo{animation-delay:.3s;animation-duration:.9s}

@media(max-width:900px){
  .lp-hero{grid-template-columns:1fr;gap:38px;padding:30px 22px 22px}
  .lp-nav,.lp-cards,.lp-foot{padding-left:22px;padding-right:22px}
  .lp-lede{max-width:none}
  .lp-cell{min-width:0;padding:9px 1px 6px}
  .lp-cell b{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .lp-eyebrow,.lp-title .lp-line,.lp-lede,.lp-cta,.lp-demo,.lp-card{animation:none;opacity:1;transform:none}
  .lp-card{transition:none}
  .lp-cell,.lp-row,.lp-primary,.lp-primary svg,.lp-signin{transition:none}
}
.lp-ghost{padding:13px 17px;border-radius:10px;background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;transition:color .2s,background .2s}
.lp-ghost:hover{color:var(--teal);background:var(--soft)}
.lp-cta .lp-meta{flex-basis:100%}

/* ---- Company guides ------------------------------------------------------ */
.legal-note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;margin-bottom:22px;
  border:1px solid #e6e2d4;background:#fbf8f0;border-radius:9px;color:#8a7a55;font-size:11px;line-height:1.8}
.legal-note svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.company-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.company-card{display:flex;flex-direction:column;gap:15px;padding:20px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);transition:border-color .2s,transform .2s,box-shadow .2s}
.company-card:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:0 16px 34px -26px rgba(32,48,60,.5)}
.company-top{display:flex;gap:13px;align-items:flex-start}
.company-mark{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  border-radius:10px;background:var(--soft);color:var(--teal);font-family:var(--mono);font-size:13px;font-weight:700}
.company-mark.large{width:46px;height:46px;font-size:16px;margin-right:13px;display:inline-flex;vertical-align:middle}
.company-top h3{font-size:15px;letter-spacing:-.3px}
.company-tagline{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.65}
.company-counts{display:flex;gap:16px;font-size:11px;color:var(--muted)}
.company-counts strong{color:var(--ink);font-family:var(--mono);font-size:13px}
.company-foot{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted);
  padding-top:13px;border-top:1px solid var(--line)}
.company-bar{flex:1;height:4px;border-radius:3px;background:var(--line);overflow:hidden}
.company-bar.wide{max-width:210px}
.company-bar i{display:block;height:100%;background:var(--teal);border-radius:3px;transition:width .4s ease}
.company-head h1{display:flex;align-items:center}
.company-rounds{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.round-chip{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.company-progress{display:flex;align-items:center;gap:11px;margin-top:17px;font-size:11px;color:var(--muted)}
.company-section{margin-top:34px}
.company-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.company-section-head h2{font-size:17px}
.company-section-head span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.company-section-note{margin:11px 0 18px;font-size:12px;color:var(--muted);line-height:1.75}
@media(max-width:560px){.company-grid{grid-template-columns:1fr}.company-counts{gap:12px}}