@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;450;500;600;650;700&display=swap";:root{color:#dedee7;font-synthesis:none;--ink:#eeeef4;--muted:#b0b0bd;--border:#35353e;--accent:#aaa7ff;--nav:#17171b;--mint:#b5b2ff;--code:#1b1b1f;background:#222326;font-family:DM Sans,Noto Sans SC,system-ui,sans-serif;font-size:16px;font-weight:400}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:#dedee7;background:#222326;border:1px solid #35353e;border-radius:6px;justify-content:center;align-items:center;gap:7px;min-height:37px;padding:8px 13px;font-size:.875rem;font-weight:500;transition:background .15s,border .15s;display:inline-flex}button:disabled{opacity:.4;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #59bfa2}input,select,textarea{color:#dedee7;background:#222326;border:1px solid #35353e;border-radius:5px;outline:none;width:100%;padding:10px 12px;font-size:.875rem}input[type=checkbox],input[type=radio]{accent-color:#a6a4ff;flex-shrink:0;width:16px;height:16px}input:disabled,select:disabled{color:#b0b0bd;background:#25262b}textarea{resize:vertical;line-height:1.6}label{font-size:.875rem;font-weight:500}label>input,label>select,label>textarea{margin-top:7px}h1,h2,h3,h4,p{margin:0}h1{letter-spacing:-.055em;font-size:1.78rem;font-weight:650;line-height:1.5}h2{font-size:1rem;font-weight:600}h3{font-size:1rem}h4{font-size:.875rem}p{line-height:1.85}pre,code{font-family:IBM Plex Mono,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:.8rem;line-height:1.8}small{font-size:.75rem}svg{flex-shrink:0}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--nav);color:#b3c0cd;z-index:30;flex-direction:column;flex-shrink:0;width:246px;padding:29px 17px 18px;display:flex;position:fixed;inset:0 auto 0 0;overflow-y:auto}.brand{letter-spacing:-.8px;color:#f4f8fc;align-items:center;padding:0 7px;font-size:1.25rem;font-weight:700;display:flex}.brand>span:not(.brand-mark):not(.brand-dot){color:#e2edf3;font-weight:400}.brand-mark{color:#b5b2ff;background:#27272e;border:1px solid #35353e;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;margin-right:10px;display:flex}.brand-dot{color:#b5b2ff;font-size:1.8rem;line-height:1}.sidebar-subtitle{letter-spacing:2px;color:#b0b0bd;margin:12px 0 24px 53px;font-size:.625rem}.course-card{background:#1b1b1f;border:1px solid #35353e;border-radius:8px;margin:0 6px 23px;padding:16px}.eyebrow{letter-spacing:1.5px;color:#b0b0bd;font-size:.67rem;font-weight:600}.course-card>.eyebrow{letter-spacing:1.7px;font-size:.58rem}.course-card>div:not(.progress-track){justify-content:space-between;align-items:center;margin-top:10px;display:flex}.course-card strong{color:#ecf3f8;font-size:.85rem;font-weight:500}.course-card>div>span{color:#b5b2ff;border:1px solid #35353e;border-radius:3px;padding:2px 5px;font-size:.6rem}.course-card p{color:#b0b0bd;margin-top:8px;font-size:.7rem}.course-card small{text-align:right;color:#b0b0bd;margin-top:7px;font-size:.64rem;display:block}.progress-track{background:#27272e;border-radius:3px;height:3px;margin-top:15px;overflow:hidden}.progress-track span{background:#a6a4ff;height:100%;display:block}.nav-group{margin-bottom:23px}.nav-group h2{color:#b0b0bd;letter-spacing:.5px;justify-content:space-between;margin-bottom:10px;padding:0 11px;font-size:.65rem;font-weight:500;display:flex}.nav-group h2 small{color:#b0b0bd;font-family:monospace;font-size:.58rem}.chapter-link{color:#abbac8;border-radius:5px;align-items:center;gap:10px;min-height:39px;margin:3px 0;padding:9px 10px;font-size:.78rem;display:flex}.chapter-link>span:nth-child(2){flex:1}.chapter-link:hover{color:#fff;background:#1b1b1f}.chapter-link.active{color:#b5b2ff;background:#25262b;font-weight:600}.chapter-number{color:#b0b0bd;flex-shrink:0;justify-content:center;align-items:center;width:21px;font-family:IBM Plex Mono,monospace;font-size:.65rem;display:flex}.lab-shortcut{color:#b5b2ff;border-top:1px solid #35353e;align-items:center;gap:10px;margin:auto 6px 17px;padding:14px 9px;display:flex}.lab-shortcut>span{flex:1;font-size:.77rem;font-weight:500}.lab-shortcut small{color:#b0b0bd;margin-top:4px;font-size:.65rem;display:block}.sidebar-footer{color:#b0b0bd;border-top:1px solid #35353e;align-items:center;gap:7px;padding:17px 7px 0;font-size:.6rem;display:flex}.sidebar-footer>span:last-child{margin-left:auto;font-size:.6rem}.vue-symbol{color:#b5b2ff;font-size:.82rem;font-weight:700}.workspace{flex:1;min-width:0;margin-left:246px}.topbar{border-bottom:1px solid var(--border);color:#b0b0bd;background:#222326;justify-content:space-between;align-items:center;height:65px;padding:0 32px;font-size:.75rem;display:flex}.topbar>div{align-items:center;gap:12px;display:flex}.topbar strong{color:#dedee7;font-weight:500}.topbar a{color:#b0b0bd;align-items:center;gap:6px;display:flex}.session-badge{border-right:1px solid var(--border);align-items:center;gap:7px;padding-right:17px;font-size:.72rem;display:flex}.session-badge i,.live i{background:#27272e;border-radius:50%;width:5px;height:5px}.workspace-columns{grid-template-columns:minmax(0,1fr) 314px;align-items:start;max-width:1760px;margin:auto;display:grid}.lesson{border-right:1px solid var(--border);background:#222326;min-width:0;min-height:calc(100vh - 65px);padding:31px 32px 0}.lesson-kicker{color:#b0b0bd;letter-spacing:1px;align-items:center;gap:12px;margin-bottom:14px;font-size:.62rem;display:flex}.lesson-kicker span:first-child{color:#b5b2ff;letter-spacing:1.7px;font-weight:600}.lesson-kicker span:nth-child(2){border-left:1px solid #35353e;padding-left:12px;font-family:IBM Plex Mono,monospace;font-size:.6rem}.lesson-kicker span:last-child{letter-spacing:0;margin-left:auto}.lesson-heading>p{color:#b0b0bd;margin-top:12px;font-size:.875rem;line-height:1.85}.concept-card{background:#25262b;border:1px solid #35353e;border-left-width:3px;border-radius:5px;gap:14px;padding:18px;display:flex}.concept-icon{color:#b5b2ff;border:1px solid #35353e;border-radius:50%;flex-shrink:0;place-items:center;width:23px;height:23px;font-family:serif;font-size:.9rem;display:grid}.concept-card .eyebrow{color:#b0b0bd;letter-spacing:1px;font-size:.66rem}.concept-card p{color:#dedee7;margin-top:5px;font-size:.88rem;line-height:1.9}.principle{gap:12px;padding:24px 0 26px;display:flex}.section-number{color:#b0b0bd;border:1px solid #35353e;border-radius:4px;align-self:flex-start;margin-top:1px;padding:2px 5px;font-family:IBM Plex Mono,monospace;font-size:.7rem}.principle p{color:#b0b0bd;margin-top:10px;font-size:.875rem;line-height:1.95}.lesson-tabs{border-bottom:1px solid #35353e;gap:24px;margin-bottom:23px;display:flex}.lesson-tabs button{color:#b0b0bd;background:0 0;border:0;border-radius:0;min-height:45px;padding:10px 0 14px;font-size:.8rem;position:relative}.lesson-tabs button:hover{color:#b5b2ff;background:0 0}.lesson-tabs button.active{color:#b5b2ff}.lesson-tabs button.active:after{content:"";background:#27272e;height:2px;position:absolute;bottom:-1px;left:0;right:0}.count{color:#b0b0bd;background:#25262b;border-radius:4px;min-width:17px;padding:1px 4px;font-family:monospace;font-size:.65rem}.section-heading{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.section-heading>div{align-items:center;gap:11px;display:flex}.section-heading h2{font-size:.94rem}.live{letter-spacing:1px;color:#b5b2ff;align-items:center;gap:6px;font-size:.6rem;display:flex}.muted-live{color:#b0b0bd;letter-spacing:0;font-size:.63rem}.demo-note{color:#b0b0bd;background:#222326;border:1px solid #35353e;border-radius:5px;margin-bottom:18px;padding:13px 15px;font-size:.8rem;line-height:1.85}.schema-form{border:1px solid var(--border);background:#222326;border-radius:7px;grid-template-columns:1fr 1fr;gap:20px;margin:12px 0 20px;padding:22px;display:grid}.schema-form>.primary{grid-column:1/-1;justify-self:start;margin-top:1px;font-size:.77rem}.schema-form .success,.schema-form .slot-callout{grid-column:1/-1}.form-item{flex-direction:column;gap:9px;min-width:0;display:flex}.form-item label{font-size:.8rem;font-weight:500}.form-item input,.form-item select{height:40px}.form-item small{line-height:1.7}.required{color:#b0b0bd}.primary{color:#fff;background:#27272e;border-color:#a6a4ff;font-weight:500}.primary>span{margin-left:11px}.switch{color:#b0b0bd;background:0 0;border:0;align-self:flex-start;gap:9px;padding:8px 0;font-size:.76rem}.switch:hover:not(:disabled){background:0 0;border:0}.switch>span{background:#a6a4ff;border-radius:20px;width:35px;height:20px;position:relative}.switch>span:after{content:"";background:#222326;border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0002}.switch.on>span:after{transform:translate(15px)}.data-views{grid-template-columns:1fr 1fr;gap:12px;margin:19px 0;display:grid}.data-views>div{background:#1b1b1f;border:1px solid #35353e;border-radius:6px;min-width:0;overflow:hidden}.data-views header{color:#d5e3ec;background:#1b1b1f;border-bottom:1px solid #35353e;align-items:center;gap:7px;padding:11px 13px;font-family:IBM Plex Mono,monospace;font-size:.7rem;display:flex}.data-views header small{color:#b0b0bd;margin-left:auto;font-family:inherit;font-size:.6rem}.code-dot{background:#b2a5e5;border-radius:50%;width:6px;height:6px}.code-dot.green{background:#a6a4ff}.data-views pre{color:#b5b2ff;max-height:230px;padding:15px 16px;font-size:.73rem;line-height:1.85;overflow:auto}.observation{color:#b0b0bd;background:#222326;border:1px solid #35353e;border-radius:6px;gap:12px;margin:24px 0;padding:17px;display:flex}.observation h3{color:#b0b0bd;font-size:.78rem}.observation p{color:#b0b0bd;margin-top:5px;font-size:.8rem;line-height:1.9}.chapter-summary{border-top:1px solid var(--border);margin-top:28px;padding:20px 0}.chapter-summary>.eyebrow{color:#b0b0bd;letter-spacing:1px;font-size:.65rem}.chapter-summary p{color:#b0b0bd;margin-top:8px;font-size:.81rem;line-height:1.85}.lesson-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:15px;padding:21px 0 28px;display:flex}.lesson-footer>span{color:#b0b0bd;font-family:monospace;font-size:.7rem}.lesson-footer button{background:0 0;border:0;padding:4px 0;font-size:.76rem}.lesson-footer button:last-child{color:#b5b2ff}.trace-panel{background:#222326;flex-direction:column;align-self:start;min-height:calc(100vh - 65px);max-height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.panel-heading{color:#dedee7;justify-content:space-between;align-items:center;padding:24px 18px 19px;font-size:.82rem;font-weight:500;display:flex}.panel-heading>span:first-child{align-items:center;gap:8px;display:flex}.trace-tabs{border-bottom:1px solid var(--border);gap:0;padding:0 10px;display:flex}.trace-tabs button{color:#b0b0bd;background:0 0;border:0;border-radius:0;gap:5px;padding:10px 9px 13px;font-size:.67rem;position:relative}.trace-tabs button.active{color:#b5b2ff}.trace-tabs button.active:after{content:"";background:#27272e;height:2px;position:absolute;bottom:-1px;left:9px;right:9px}.trace-caption{color:#b0b0bd;justify-content:space-between;align-items:center;gap:5px;padding:10px 13px;font-size:.61rem;display:flex}.icon-button{color:#b0b0bd;background:0 0;border:0;min-height:30px;padding:6px}.tree-list{min-height:260px;padding:5px 8px 24px;overflow:auto}.tree-node{text-align:left;color:#b0b0bd;white-space:nowrap;background:0 0;border:0;justify-content:flex-start;align-items:center;gap:6px;width:100%;min-height:34px;padding-top:7px;padding-bottom:7px;font-family:IBM Plex Mono,monospace;font-size:.62rem;display:flex}.tree-node:hover{background:#25262b}.tree-node>span:nth-child(2){text-overflow:ellipsis;overflow:hidden}.node-mark{color:#b5b2ff;font-size:.9rem}.tree-node small{color:#b0b0bd;white-space:nowrap;margin-left:auto;font-family:inherit;font-size:.56rem}.tree-node .has-updates{color:#b5b2ff;background:#25262b;border-radius:3px;padding:1px 4px}.trace-note{color:#b0b0bd;border-top:1px solid #35353e;gap:8px;margin:auto 15px 18px;padding-top:14px;display:flex}.trace-note p{font-size:.64rem;line-height:1.9}.dot{background:#a8b7bf;border-radius:50%;flex-shrink:0;width:5px;height:5px;margin-top:7px}.props-view{margin-bottom:20px;padding:5px 17px;overflow:auto}.props-view label{color:#b0b0bd;font-size:.72rem}.props-view select{margin-bottom:15px;font-size:.7rem}.props-view pre{color:#b0b0bd;background:#25262b;border:1px solid #35353e;border-radius:5px;max-height:470px;padding:13px;font-size:.7rem;overflow:auto}.muted{color:#b0b0bd;margin-top:13px;font-size:.75rem;line-height:1.9}.event-list{max-height:65vh;padding:0 16px 18px;overflow:auto}.trace-event{border-bottom:1px solid #35353e;padding:13px 0}.trace-event>div{justify-content:space-between;align-items:center;display:flex}.trace-event time{color:#b0b0bd;font-family:monospace;font-size:.6rem}.event-tag{color:#b0b0bd;background:#25262b;border-radius:3px;padding:2px 5px;font-family:monospace;font-size:.6rem}.event-tag.emit,.event-tag.state{color:#b5b2ff;background:#25262b}.event-tag.unmounted,.event-tag.trigger{color:#b0b0bd;background:#25262b}.trace-event strong{color:#b0b0bd;overflow-wrap:anywhere;margin:9px 0 4px;font-family:monospace;font-size:.65rem;font-weight:400;display:block}.trace-event code{color:#b0b0bd;overflow-wrap:anywhere;font-size:.63rem;line-height:1.7;display:block}.empty{text-align:center;color:#b0b0bd;padding:28px 12px;font-size:.8rem}.error{color:#b0b0bd;margin:7px 0;font-size:.8rem;line-height:1.8}.success{color:#b5b2ff;overflow-wrap:anywhere;background:#25262b;border-radius:5px;margin:12px 0;padding:10px 13px;font-size:.8rem}.toolbar{flex-wrap:wrap;align-items:end;gap:10px;margin:16px 0;display:flex}.toolbar label{color:#b0b0bd;min-width:170px;font-size:.75rem}.toolbar button{font-size:.75rem}.toolbar label.grow{flex:1}.inline-control{background:#222326;border-radius:6px;align-items:center;gap:14px;padding:13px;font-size:.8rem;display:flex}.inline-control input{flex:1;width:auto;margin:0}.check-control{color:#b0b0bd;align-items:center;gap:9px;margin:15px 0;font-size:.8rem;display:flex}.check-control input{margin:0}.editor-details{border:1px solid var(--border);border-radius:6px;margin:18px 0;padding:14px}summary{cursor:pointer;color:#b0b0bd;font-size:.8rem}summary span{float:right;color:#b0b0bd;font-size:.67rem}.editor-details textarea{margin:15px 0;font-family:IBM Plex Mono,monospace;font-size:.75rem}.slot-label{align-items:center;gap:8px;display:inline-flex}.slot-label>span{color:#b0b0bd;background:#25262b;border-radius:3px;padding:2px 5px;font-size:.6rem}.slot-callout{color:#b0b0bd;background:#222326;border:1px dashed #35353e;border-radius:4px;padding:13px;font-size:.8rem;line-height:1.8}.experiment-tabs{flex-wrap:wrap;gap:7px;margin:0 0 15px;display:flex}.experiment-tabs button{min-height:31px;padding:6px 9px;font-size:.7rem}.experiment-tabs button.active{color:#b5b2ff;background:#25262b;border-color:#41414b}.dependency-pair{grid-template-columns:1fr 1fr;gap:12px;display:grid}.dependency-leaf{background:#25262b;border:1px solid #35353e;border-radius:7px;flex-direction:column;gap:10px;padding:16px;display:flex}.dependency-leaf>span{color:#b0b0bd;font-family:monospace;font-size:.8rem}.dependency-leaf strong{color:#b5b2ff;font-size:1.1rem;font-weight:500}.dependency-leaf small{color:#b0b0bd;font-size:.7rem}.derived-state{color:#b0b0bd;border:1px dashed #35353e;padding:13px;font-size:.73rem;line-height:1.9}.derived-state strong{color:#b5b2ff;margin:0 8px}.derived-state span{color:#b0b0bd;display:block}.concept-sequence{margin:20px 0}.concept-sequence p{color:#b0b0bd;margin-top:12px;font-size:.8rem}.table-scroll{border:1px solid var(--border);border-radius:6px;margin:17px 0 0;overflow:auto}table{border-collapse:collapse;text-align:left;width:100%;font-size:.77rem}th{color:#b0b0bd;white-space:nowrap;background:#222326;font-size:.7rem;font-weight:500}th,td{border-bottom:1px solid #35353e;padding:15px 12px}tbody tr:last-child td{border-bottom:0}td{color:#b0b0bd;white-space:nowrap;background:#222326}.table-sort{min-height:auto;font-size:inherit;color:inherit;background:0 0;border:0;padding:0}td.fixed-right,th.fixed-right{border-left:1px solid var(--border);position:sticky;right:0}td.fixed-left,th.fixed-left{position:sticky;left:0}.badge{border-radius:4px;padding:3px 7px;font-size:.64rem;display:inline-block}.badge.green{color:#b5b2ff;background:#25262b}.badge.gray,.badge.amber{color:#b0b0bd;background:#25262b}.row-actions{gap:10px;display:flex}.row-actions button,.cell-link{color:#b5b2ff;background:0 0;border:0;min-height:auto;padding:0;font-size:.7rem}.row-actions .danger-link,.danger-link{color:#b0b0bd}.crud-heading{justify-content:space-between;align-items:center;margin:22px 0 12px;display:flex}.crud-heading p{color:#b0b0bd;margin-top:5px;font-size:.68rem}.crud-heading .primary{font-size:.73rem}.schema-form.compact{background:#222326;align-items:end;gap:12px;margin-bottom:12px;padding:14px 16px;display:flex}.schema-form.compact .form-item{flex:1}.schema-form.compact .form-item input{height:37px}.query-state{color:#b0b0bd;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.61rem;line-height:1.8;display:flex}.query-state code{overflow-wrap:anywhere;font-size:.63rem}.pagination{color:#b0b0bd;justify-content:space-between;align-items:center;padding:16px 0;font-size:.7rem;display:flex}.pagination>div{align-items:center;gap:13px;display:flex}.pagination button{min-height:28px;padding:3px 8px;font-size:.7rem}.segmented{border:1px solid var(--border);background:#25262b;border-radius:6px;gap:3px;padding:3px;display:inline-flex}.segmented button{color:#b0b0bd;background:0 0;border:0;min-height:30px;font-size:.75rem}.segmented button.active{color:#b5b2ff;background:#222326;box-shadow:0 1px 3px #0001}dialog{color:#dedee7;border:1px solid #35353e;border-radius:11px;width:min(560px,100vw - 32px);max-height:90vh;padding:24px;overflow:auto;box-shadow:0 20px 100px #0d293233}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#10233080}dialog>header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}dialog p{font-size:.875rem}.dialog-actions{justify-content:end;gap:10px;margin-top:24px;display:flex}.danger{color:#fff;background:#b05d57;border-color:#a6a4ff}.designer-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:9px;margin:16px 0;display:flex}.designer-toolbar>div{align-items:center;gap:4px;display:flex}.designer-toolbar button{font-size:.7rem}.designer-grid{border:1px solid var(--border);border-radius:7px;grid-template-columns:110px minmax(150px,1fr) 164px;min-height:340px;display:grid;overflow:hidden}.designer-grid h4{color:#b0b0bd;margin-bottom:16px;font-size:.7rem;font-weight:500}.palette{border-right:1px solid var(--border);background:#222326;padding:16px 10px}.palette button{justify-content:start;gap:5px;width:100%;margin-bottom:9px;padding:7px 6px;font-size:.65rem}.palette button>span{color:#b5b2ff;font-size:.8rem}.palette button>svg{margin-left:auto}.canvas{background:#222326 radial-gradient(#dce6eb .7px,#0000 .7px) 0 0/13px 13px;padding:16px 12px}.canvas h4 span{float:right;color:#b0b0bd;font-size:.58rem;font-weight:400}.canvas-node{text-align:left;background:#222326;flex-direction:column;align-items:stretch;gap:9px;width:100%;margin-bottom:12px;padding:13px 11px;display:flex;box-shadow:0 2px 5px #26374405}.canvas-node strong{overflow-wrap:anywhere;justify-content:space-between;align-items:center;gap:5px;font-size:.7rem;font-weight:500;display:flex}.canvas-node small{color:#b0b0bd;font-family:monospace;font-size:.53rem;font-weight:400}.canvas-node>span{color:#b0b0bd;overflow-wrap:anywhere;background:#222326;border:1px solid #35353e;border-radius:3px;padding:8px 6px;font-size:.65rem}.canvas-node.selected{border-color:#a6a4ff;box-shadow:0 0 0 2px #26956a14}.property-editor{border-left:1px solid var(--border);background:#222326;padding:16px 12px}.property-editor label{color:#b0b0bd;margin-bottom:13px;font-size:.66rem;font-weight:400;display:block}.property-editor input,.property-editor textarea{padding:7px 8px;font-size:.7rem}.property-editor .check-control{margin:14px 0;display:flex}.property-actions{gap:4px;display:flex}.property-actions button{min-height:30px;padding:5px 7px;font-size:.65rem}.registry-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0;display:grid}.registry-grid button{flex-direction:column;gap:8px;padding:20px 8px;display:flex}.registry-grid button>span{color:#b5b2ff;font-size:1.4rem}.registry-grid strong{font-size:.77rem;font-weight:500}.registry-grid code{color:#b0b0bd;font-size:.7rem}.registry-grid .selected{background:#25262b;border-color:#a6a4ff}.registry-detail{border:1px solid var(--border);border-radius:6px;flex-wrap:wrap;gap:14px;margin:17px 0;padding:18px;display:flex}.registry-detail>div{flex-direction:column;flex:1;gap:9px;min-width:150px;display:flex}.registry-detail small{color:#b0b0bd;font-size:.65rem}.registry-detail code{color:#b0b0bd;font-size:.7rem}.registry-detail button{align-self:center;font-size:.73rem}.boundary-grid{border:1px solid var(--border);border-radius:7px;grid-template-columns:1fr 1fr;margin:22px 0;display:grid;overflow:hidden}.boundary-grid>div{background:#222326;min-width:0;padding:20px}.boundary-grid>div:last-child{border-left:1px solid var(--border);background:#25262b}.boundary-grid h3{margin:10px 0;font-size:.86rem}.boundary-grid pre{color:#b0b0bd;font-size:.73rem;line-height:1.9}.green-text{color:#b5b2ff}.study-prose{margin:22px 0}.study-prose h3{margin:21px 0 10px;font-size:.91rem}.study-prose p{color:#b0b0bd;font-size:.86rem;line-height:2}.study-prose pre{color:#b0b0bd;background:#222326;border-radius:5px;padding:16px;font-size:.75rem;line-height:2}.source-view{background:#1b1b1f;border-radius:6px;margin:24px 0;overflow:hidden}.source-tabs{background:#27272e;border-bottom:1px solid #35353e;gap:0;display:flex;overflow:auto}.source-tabs button{color:#b0b0bd;white-space:nowrap;background:0 0;border:0;border-radius:0;padding:12px;font-family:monospace;font-size:.69rem}.source-tabs .active{color:#b5b2ff;background:#1b1b1f}.source-view header{color:#b0b0bd;border-bottom:1px solid #35353e;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 16px;font-size:.63rem;display:flex}.source-view pre{color:#b5b2ff;tab-size:2;max-height:650px;padding:20px;font-size:.74rem;line-height:1.9;overflow:auto}.source-links{color:#b5b2ff;flex-wrap:wrap;gap:15px;font-size:.7rem;display:flex}.source-links>span{color:#b0b0bd;width:100%;font-size:.66rem}.exercise-intro{padding:20px 0}.exercise-intro .eyebrow{color:#b5b2ff}.exercise-intro h3{margin:12px 0 9px;font-size:1.1rem}.exercise-intro p{color:#b0b0bd;font-size:.83rem}.exercise{border-top:1px solid var(--border);padding:22px 0}.exercise h4{gap:11px;margin-bottom:17px;font-size:.88rem;font-weight:500;line-height:1.9;display:flex}.exercise h4>span{color:#b0b0bd;font-family:monospace;font-size:.72rem}.answer-option{cursor:pointer;color:#b0b0bd;border:1px solid #35353e;border-radius:5px;align-items:center;gap:10px;margin-top:9px;padding:13px;font-size:.81rem;font-weight:400;line-height:1.8;display:flex}.answer-option input{margin:0}.answer-option.chosen{color:#b5b2ff;background:#25262b;border-color:#41414b}.answer-option.correct{background:#25262b;border-color:#a6a4ff}.answer-explanation{color:#b5b2ff;background:#25262b;border-radius:5px;margin-top:14px;padding:15px;font-size:.78rem;line-height:1.9}.answer-explanation.wrong{color:#b0b0bd;background:#25262b}.ownership-demo{border:1px solid var(--border);border-radius:6px;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;display:flex}.ownership-demo>div{flex-direction:column;flex:1;gap:9px;min-width:130px;display:flex}.ownership-demo small{color:#b0b0bd;font-size:.67rem}.ownership-demo strong{font-weight:500}.ownership-demo .check-control{margin:0;font-size:.7rem}.ownership-demo button{font-size:.7rem}.inline-edit{background:#222326;border-radius:6px;align-items:end;gap:10px;margin-top:12px;padding:16px;display:flex}.inline-edit label{flex:1;font-size:.77rem}.refactor-layout{margin-top:25px}.case-list{flex-wrap:wrap;gap:7px;display:flex}.case-list button{min-height:31px;padding:7px 8px;font-size:.68rem}.case-list .active{color:#b5b2ff;background:#25262b;border-color:#41414b}.case-detail{margin-top:22px}.case-detail>p{color:#b0b0bd;margin-top:12px;font-size:.82rem;line-height:1.9}.code-compare{grid-template-columns:1fr 1fr;gap:10px;margin:17px 0;display:grid}.code-compare>div{border:1px solid var(--border);background:#222326;border-radius:6px;min-width:0;padding:15px}.code-compare>div:last-child{background:#25262b}.code-compare h4{color:#b0b0bd;margin-bottom:10px;font-size:.7rem}.code-compare pre{color:#b0b0bd;font-size:.7rem;line-height:1.9}.tradeoff{border-left:3px solid #35353e;padding-left:13px}.mobile-menu,.nav-scrim{display:none}@media (width>=1550px){.lesson{padding-left:48px;padding-right:48px}.workspace-columns{grid-template-columns:minmax(0,1fr) 350px}.trace-tabs button{padding-left:11px;padding-right:11px;font-size:.73rem}.tree-node{font-size:.69rem}.tree-node small{font-size:.61rem}.designer-grid{grid-template-columns:130px 1fr 195px}.palette button{font-size:.75rem}.property-editor label{font-size:.73rem}}@media (width<=1250px){.sidebar{width:220px;padding-left:12px;padding-right:12px}.workspace{margin-left:220px}.workspace-columns{grid-template-columns:minmax(0,1fr) 275px}.lesson{padding:27px 23px 0}.trace-tabs button{padding-left:6px;padding-right:6px;font-size:.64rem}.topbar{padding:0 23px}h1{font-size:1.5rem}.designer-grid{grid-template-columns:95px minmax(120px,1fr)}.property-editor{border-left:0;border-top:1px solid var(--border);grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px 14px;display:grid}.property-editor h4{grid-column:1/-1;margin-bottom:3px}.property-editor label{margin:0}.property-actions{align-self:end}.lesson-tabs{gap:17px}.lesson-tabs button{font-size:.75rem}}@media (width<=1050px){.workspace-columns{grid-template-columns:1fr}.trace-panel{border-top:1px solid var(--border);min-height:auto;max-height:none;margin:0;position:relative}.tree-list{max-height:340px}.trace-note{margin-top:15px}.panel-heading{padding-top:18px}.trace-tabs{gap:18px;padding-left:20px}.trace-tabs button{padding:10px;font-size:.8rem}.event-list{max-height:380px}.lesson{border-right:0}.trace-caption{padding-left:25px}.tree-list{padding-left:20px}.tree-node{max-width:550px;font-size:.8rem}.tree-node small{font-size:.7rem}.props-view pre{max-height:350px}.trace-note p{font-size:.73rem}.designer-grid{grid-template-columns:120px minmax(150px,1fr) 180px}.property-editor{border-top:0;border-left:1px solid var(--border);grid-column:auto;display:block}.property-editor label{margin-bottom:13px}.data-views pre{max-height:240px}}@media (width<=720px){.sidebar{width:246px;transition:transform .2s;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.workspace{margin-left:0}.mobile-menu{display:inline-flex}.nav-scrim{z-index:25;background:#12233188;border:0;border-radius:0;display:block;position:fixed;inset:0}.topbar{height:58px;padding:0 14px;font-size:.67rem}.topbar>div{gap:7px}.topbar .session-badge{display:none}.lesson{padding:24px 20px 0}.lesson-heading{padding-bottom:20px}h1{letter-spacing:-.04em;font-size:1.5rem}.lesson-heading>p{font-size:.86rem}.lesson-kicker{gap:9px}.lesson-kicker span:nth-child(2){padding-left:9px;font-size:.55rem}.lesson-kicker span:last-child{font-size:.58rem}.principle p{font-size:.85rem}.lesson-tabs{justify-content:space-between;gap:20px}.lesson-tabs button{font-size:.76rem}.lesson-tabs button svg{width:14px}.lesson-tabs .count{font-size:.56rem}.concept-card{gap:10px;padding:14px}.concept-card p{font-size:.82rem}.schema-form{gap:20px 15px;padding:18px}.data-views{grid-template-columns:1fr 1fr;gap:9px}.data-views pre{max-height:230px;padding:12px;font-size:.65rem}.data-views header{padding:10px;font-size:.65rem}.data-views header small{font-size:.5rem}.section-heading h2{font-size:.87rem}.muted-live{font-size:.55rem}.designer-grid{grid-template-columns:100px minmax(130px,1fr)}.property-editor{border-left:0;border-top:1px solid var(--border);grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px 15px;display:grid}.property-editor h4{grid-column:1/-1}.property-editor label{margin:0}.registry-grid{gap:7px}.registry-grid button{padding:15px 5px}.registry-grid strong{font-size:.66rem}.boundary-grid{grid-template-columns:1fr}.boundary-grid>div:last-child{border-left:0;border-top:1px solid var(--border)}.code-compare{grid-template-columns:1fr}.lesson-footer{gap:9px}.lesson-footer button{font-size:.66rem}.lesson-footer>span{font-size:.61rem}.lesson-footer button:last-child{max-width:60%}.trace-tabs{justify-content:space-around;gap:8px;padding:0 15px}.designer-toolbar button{font-size:.65rem}.inline-control{display:block}.inline-control input{width:100%;margin-top:8px}.crud-heading .primary{font-size:.65rem}.source-view pre{padding:15px;font-size:.68rem}.source-view header span{display:none}}@media (width<=390px){.schema-form{grid-template-columns:1fr}.lesson{padding-left:15px;padding-right:15px}.lesson-tabs{gap:9px}.lesson-tabs button{font-size:.7rem}.data-views{grid-template-columns:1fr}.lesson-kicker span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.chapter-link{font-size:.875rem}.sidebar-subtitle,.course-card>.eyebrow,.course-card p,.course-card small,.nav-group h2,.nav-group h2 small,.chapter-number,.lab-shortcut small,.sidebar-footer,.sidebar-footer>span:last-child,.course-card>div>span{font-size:.75rem}.sidebar-subtitle{letter-spacing:1px;margin-left:7px}.course-card>.eyebrow{letter-spacing:.5px}.lesson-heading>p,.principle p,.concept-card p,.study-prose p,.case-detail>p,.exercise-intro p{font-size:1rem}.lesson-kicker,.lesson-kicker span:nth-child(2),.lesson-kicker span:last-child,.eyebrow,.concept-card .eyebrow,.chapter-summary>.eyebrow{font-size:.75rem}.demo-note,.form-item label,.schema-form>.primary,.check-control,.toolbar label,.toolbar button,.editor-details summary,.observation h3,.observation p,.chapter-summary p,.answer-option,.answer-explanation,.lesson-tabs button,.lesson-footer button{font-size:.875rem}.topbar,.topbar .session-badge,.course-card strong,.lab-shortcut>span{font-size:.8125rem}.trace-tabs button{gap:4px;padding-inline:6px;font-size:.75rem}.trace-caption,.trace-note p,.trace-event strong,.trace-event code,.trace-event time,.event-tag,.tree-node,.tree-node small,.tree-node .has-updates,.props-view label,.props-view select,.props-view pre,.live{font-size:.75rem}.tree-node{min-height:37px}.tree-node small{font-size:.75rem}.trace-event code{line-height:1.9}.data-views pre,.source-view pre{font-size:.8125rem}.data-views header,.data-views header small,.source-tabs button,.source-view header,.source-links,.source-links>span{font-size:.75rem}.badge,.row-actions button,.cell-link,table,th,.pagination,.pagination button,.segmented button,.crud-heading .primary,.crud-heading p,.query-state,.query-state code,.palette button,.designer-grid h4,.canvas h4 span,.canvas-node strong,.canvas-node small,.canvas-node>span,.property-editor label,.property-editor input,.property-editor textarea,.property-actions button,.designer-toolbar button,.registry-grid strong,.registry-grid code,.registry-detail small,.registry-detail code,.registry-detail button,.case-list button,.code-compare h4,.code-compare pre,.boundary-grid pre,.experiment-tabs button{font-size:.8125rem}@media (width<=720px){.lesson-kicker{flex-wrap:wrap}.lesson-tabs{gap:10px}.lesson-tabs button,.lesson-footer button{font-size:.8125rem}.lesson-footer>span,.section-heading .live,.data-views header small{display:none}.designer-grid{grid-template-columns:120px minmax(130px,1fr)}.lesson-kicker span:nth-child(2){display:none}.topbar,.course-card>.eyebrow{font-size:.75rem}}.evolution-switch{background:#222326;border:1px solid #35353e;border-radius:7px;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 20px;padding:15px;display:flex}.evolution-switch>span{color:#b0b0bd;font-size:.875rem}.linkage-comparison{border-top:1px solid var(--border);margin-top:24px;padding-top:20px}.linkage-comparison h3{margin-bottom:15px}.strategy-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0;display:grid}.strategy-grid article{border:1px solid var(--border);background:#222326;border-radius:6px;padding:14px}.strategy-grid h4{margin-bottom:9px;font-size:.875rem}.strategy-grid code{color:#b0b0bd;overflow-wrap:anywhere;font-size:.75rem}.strategy-grid p{color:#b5b2ff;margin-top:10px;font-size:.875rem}.decoupling-comparison>.segmented{margin-bottom:15px}@media (width<=720px){.strategy-grid{grid-template-columns:1fr}}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#dedee7;background:#1b1b1f}body,.lesson{background:#1b1b1f}.workspace-columns{grid-template-columns:minmax(0,1fr);max-width:1440px}.lesson{border-right:0;padding:30px 38px 0}.lesson-heading{padding-bottom:18px}.lesson-heading h1{letter-spacing:-.025em;font-size:1.65rem}.concept-card{margin-bottom:16px}.principle{margin:18px 0}.topbar{background:#1b1b1f}.sidebar{border-right:1px solid #303038}.brand-mark{color:#c1bdff;background:#34314c}.brand-dot,.vue-symbol{color:#b5b2ff}.chapter-link.active{color:#d4d0ff;background:#343149}.chapter-link.active .chapter-number{color:#b5b2ff}.progress-track span{background:#aaa7ff}button{color:#e0e0ea;background:#2b2b33;border-color:#41414b}button:hover:not(:disabled){background:#383743;border-color:#848099}.primary{color:#20202c;background:#aaa7ff;border-color:#aaa7ff;box-shadow:0 3px #7470d7}.primary:hover:not(:disabled){background:#bfbcff;border-color:#bfbcff}.lesson-tabs button.active,.trace-tabs button.active{color:#c1bdff}.lesson-tabs button.active:after,.trace-tabs button.active:after{background:#aaa7ff}input,select,textarea{color:#eeeef5;background:#28292f;border-color:#45454f}input:focus,select:focus,textarea:focus{border-color:#aaa7ff;box-shadow:0 0 0 3px #aaa7ff20}button:focus-visible,a:focus-visible,summary:focus-visible,.code-scroll:focus-visible{outline-offset:3px;outline:2px solid #b5b2ff}input[type=checkbox],input[type=radio]{accent-color:#aaa7ff}.experiment-surface{background:#1b1b1f;border:1px solid #303038;border-radius:8px;padding:24px}.experiment-surface .demo-note{background:0 0;border:0;padding:0 0 20px;font-size:.9375rem}.experiment-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:36px;min-height:360px;display:grid}.experiment-controls{min-width:0;padding-top:12px}.experiment-controls .schema-form{background:#202125;border:0;grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}.form-item label{color:#d8d8e2}.schema-form input,.schema-form select{min-height:46px}.schema-form>.primary{justify-self:start;min-height:42px;padding-inline:22px}.data-views{min-width:0;margin:0;display:block}.data-views>.data-tabs{background:0 0;border:0;flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.data-tabs button{color:#aaaab8;background:0 0;border-color:#0000}.data-tabs button.active{color:#d0cbff;background:#333044;border-color:#48425f}.data-tabs small{font-size:.8125rem}.code-block{background:#1b1b1f;border:1px solid #35353e;border-radius:6px;min-width:0;overflow:hidden}.code-toolbar{color:#aaaab8;background:#222226;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font:.8125rem/1.6 Consolas,monospace;display:flex}.code-toolbar>span{overflow-wrap:anywhere;min-width:0}.code-toolbar button{color:#c8c6dc;white-space:nowrap;background:0 0;border-color:#44444e;min-height:28px;padding:2px 9px;font-size:.8125rem}.code-scroll{align-items:stretch;max-height:640px;display:flex;overflow:auto}.code-block .code-scroll pre{color:#e1e1e8;white-space:pre;overflow-wrap:normal;tab-size:2;flex:1;max-height:none;margin:0;padding:20px;font-size:.9375rem;line-height:1.85;overflow:visible}.code-line-numbers{text-align:right;-webkit-user-select:none;user-select:none;color:#787886;border-right:1px solid #303039;flex:none;padding:20px 12px 20px 16px;font:.9375rem/1.85 IBM Plex Mono,Consolas,monospace}.code-line-numbers span{display:block}.data-views>.code-block{background:0 0;border:0}.data-views .code-toolbar{background:0 0;padding-inline:8px}.data-views .code-scroll{max-height:540px}.data-views .code-scroll pre{padding:20px 8px;font-size:1rem;line-height:1.9}.hljs{color:#dddde5}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#c5a5fa}.hljs-string,.hljs-regexp,.hljs-addition{color:#b5d99a}.hljs-number,.hljs-symbol{color:#edbd8b}.hljs-attr,.hljs-attribute,.hljs-property{color:#96cdf4}.hljs-title,.hljs-title.function_,.hljs-section{color:#a9baff}.hljs-name,.hljs-tag{color:#ed9aa9}.hljs-comment,.hljs-quote{color:#92929f;font-style:italic}.hljs-built_in,.hljs-type,.hljs-meta{color:#82d5cf}.hljs-variable,.hljs-params,.hljs-subst{color:#e1e1e8}.usage-section{border-top:1px dashed #54545f;margin-top:34px;padding-top:20px}.usage-section>h2{font-size:1.125rem}.usage-section>p{color:#b2b2bf;margin:12px 0 20px;font-size:.9375rem}.source-view{background:#1b1b1f;border:1px solid #393941}.source-view .code-block{border:0;border-radius:0}.source-tabs{background:#222226;flex-wrap:wrap;gap:4px}.source-tabs button{overflow-wrap:anywhere;color:#b0aebe;min-width:0}.source-tabs .active{color:#d3ceff;background:#343149;box-shadow:inset 0 -2px #aaa7ff}.trace-panel{background:#202024;border:1px solid #35353e;border-radius:8px;min-height:auto;max-height:540px;margin:30px 38px;position:relative}.trace-panel .tree-list,.trace-panel .event-list{max-height:350px;overflow:auto}.trace-panel .trace-note{margin-top:15px}.success,.badge.green,.answer-explanation{color:#a8dbb5;background:#24372d}.error,.danger-link,.required{color:#ffa29b}.observation,.answer-explanation.wrong{color:#e5c895;background:#302b23}.observation h3,.observation p{color:#dbc399}.switch.on>span{background:#aaa7ff}.switch.on{color:#c1bdff}.badge.amber{color:#e3c18b;background:#3c3223}.badge.gray{color:#c1c1cc;background:#33343d}dialog{color:#dedee7;background:#222326}@media (width>=1550px){.workspace-columns{grid-template-columns:minmax(0,1fr)}}@media (width<=1250px){.workspace-columns{grid-template-columns:minmax(0,1fr)}.lesson{padding-inline:24px}.experiment-stage{gap:22px}}@media (width<=850px){.experiment-stage{grid-template-columns:minmax(0,1fr)}.experiment-surface{padding:18px}.data-views{margin-top:18px}.data-views .code-scroll{max-height:360px}}@media (width<=720px){.lesson{padding:22px 16px 0}.trace-panel{margin:24px 16px}.code-block .code-scroll pre,.code-line-numbers{font-size:.875rem}.experiment-controls .schema-form{padding:18px}}