.tutorial-sidebar,.tutorial-workspace{--t-ink:#20211f;--t-muted:#696b66;--t-line:#dedfdb;--t-soft:#f3f4f1;color:var(--t-ink)}
/* Canvas topic 05 — GSAP / Motion storyboard director and nonlinear timeline. */
.timeline-tracks li>div{overflow:hidden}.canvas-redraw-sync{min-height:165px}
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-heading{background:linear-gradient(115deg,#101c25,#20242a);color:#fff;border-color:#293b46}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-heading h2{color:#f4fafb}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-heading p,.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .content-kicker{color:#a7bdc6}.canvas-tween-page-body{display:grid;gap:14px}.tween-director{display:grid;grid-template-columns:150px 1fr 195px;grid-template-rows:190px 390px 175px 70px;gap:7px;padding:7px;border:1px solid #2a4654;border-radius:15px;background:#101c25;color:#dcecf2}.tween-director>section,.tween-director>aside,.tween-director>footer,.storyboard-preview{overflow:hidden;border:1px solid #324d5b;border-radius:8px;background:#172733}.tween-director header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #314b59}.tween-director header b{font-size:8px}.storyboard-preview{grid-column:1/-1;display:grid;grid-template-columns:175px 1fr 1.25fr;gap:12px;padding:12px;background:radial-gradient(circle at 72% 40%,rgba(224,160,89,.28),transparent 28%),linear-gradient(115deg,#15222c,#26262a)}.storyboard-preview>div{display:grid;align-content:start}.storyboard-preview>div b{color:#95cf3a;font-size:20px}.storyboard-preview>div b i{color:#71828c;font-style:normal}.storyboard-preview>div small{color:#8eabbb;font-size:7px}.storyboard-preview ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}.storyboard-preview li{display:grid;padding:7px;border:1px solid #4a5d67;border-radius:7px;font-size:6px}.storyboard-preview li.active{border-color:#a9d74f;box-shadow:0 0 0 3px rgba(143,199,50,.14)}.storyboard-preview li>div{position:relative;height:90px;margin:6px -2px;background:linear-gradient(#7c6044,#223a43)}.storyboard-preview li>div i{position:absolute;left:15%;bottom:12px;width:25px;height:45px;background:#0b1721;clip-path:polygon(50% 0,75% 42%,100% 100%,0 100%,25% 42%)}.storyboard-preview li>div em{position:absolute;right:23%;top:22%;width:22px;height:22px;border-radius:50%;background:#95d933;box-shadow:0 0 20px #b6ee56}.storyboard-preview li>div strong{position:absolute;right:8%;top:50%;width:22px;height:22px;background:#9767ef;transform:rotate(45deg);box-shadow:0 0 18px #9c6df0}.storyboard-preview nav{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-content:end;text-align:center;font-size:6px}.storyboard-preview nav>i{position:absolute;left:5%;right:5%;bottom:33px;height:3px;background:linear-gradient(90deg,#83bd35,#408dde,#a768e8,#d39539)}.storyboard-preview nav>i em{display:block;width:54%;height:100%;background:#fff}.storyboard-preview nav time{grid-column:1/-1;color:#51b9ed}.tween-object-tree{grid-row:2/4}.tween-object-tree ol{margin:5px 0;padding:0;list-style:none}.tween-object-tree li{display:grid;grid-template-columns:17px 1fr 14px;align-items:center;height:36px;padding:0 8px;border-bottom:1px solid #2b4553;font-size:6px}.tween-object-tree li svg{width:12px;color:#65c5e9}.tween-object-tree>section{padding:9px;border-top:1px solid #314b59}.tween-object-tree section>b{font-size:7px}.tween-object-tree dl{margin-top:8px}.tween-object-tree dl div{display:flex;justify-content:space-between;margin:8px 0;font-size:6px}.tween-object-tree dd{margin:0;color:#8fafbd}.tween-timeline{grid-column:2;position:relative}.tween-timeline>header ol{display:grid;grid-template-columns:repeat(6,1fr);width:100%;margin:0;padding:0;list-style:none}.tween-timeline>header li{display:grid;grid-template-columns:21px 1fr;align-items:center;font-size:5px}.tween-timeline>header em{display:grid;place-items:center;width:18px;height:18px;border:1px solid #4e9bd7;border-radius:50%;font-style:normal}.timeline-ruler{display:grid;grid-template-columns:repeat(9,1fr);padding:7px 8px 3px 95px;font-size:5px}.timeline-tracks{margin:0;padding:0;list-style:none}.timeline-tracks li{display:grid;grid-template-columns:95px 1fr;height:40px;border-top:1px solid #2c4553}.timeline-tracks li>b{padding:12px 8px;background:#13242f;font-size:6px}.timeline-tracks li>div{position:relative}.timeline-tracks li i{position:absolute;top:7px;height:26px;border:1px solid #3d94d2;border-radius:3px;background:#245d88}.timeline-tracks li i.clip-1{border-color:#5cae55;background:#28673a}.timeline-tracks li i.clip-2{border-color:#9c69d7;background:#59317f}.timeline-tracks li i.clip-3{border-color:#3a93d3;background:#1c5c8e}.timeline-tracks li i.clip-4{border-color:#d59835;background:#7d5420}.timeline-tracks li i.clip-5{border-color:#d65b91;background:#743052}.timeline-tracks li em{position:absolute;top:15px;width:7px;height:7px;background:#fff;transform:rotate(45deg)}.timeline-playhead{position:absolute;left:48%;top:74px;width:1px;height:255px;background:#54bdf2}.timeline-playhead em{position:absolute;top:-20px;left:-24px;padding:4px;border-radius:4px;background:#3188c7;color:#fff;font-size:5px;font-style:normal}.tween-timeline>footer{display:grid;grid-template-columns:95px 1fr;height:50px;border-top:1px solid #345160}.tween-timeline>footer>b{padding:16px 8px;font-size:6px}.tween-timeline>footer>div{display:flex;gap:4px;padding:9px}.tween-timeline>footer i{flex:1;border-radius:3px;background:#2e763f}.tween-inspector{grid-column:3;grid-row:2/4}.tween-inspector>label{display:grid;grid-template-columns:1fr 90px;align-items:center;margin:8px;padding:0 3px;font-size:6px}.tween-inspector label b{padding:6px;border:1px solid #335365;border-radius:4px;text-align:right}.tween-inspector>svg{width:calc(100% - 16px);height:55px;margin:0 8px;fill:none;stroke:#91cd3b;stroke-width:2}.tween-inspector>section{margin:8px;padding:8px;border-top:1px solid #314c5b}.tween-inspector section>b{font-size:7px}.tween-inspector nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:7px}.tween-inspector button{height:28px;border:1px solid #3b5d6e;border-radius:4px;background:#142836;color:#d9eaf1}.tween-inspector button.active{background:#2d6e49;color:#a1e56e}.tween-inspector p{font-size:6px}.ease-library{grid-column:2}.ease-library>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:7px}.ease-library article{display:grid;text-align:center;font-size:5px}.ease-library svg{width:100%;height:85px}.ease-library path{fill:none;stroke:#8fd638;stroke-width:2}.ease-library article:nth-child(2) path{stroke:#a36ce6}.ease-library article:nth-child(3) path{stroke:#4b9be3}.ease-library article:nth-child(4) path{stroke:#eaa32c}.canvas-redraw-sync,.overwrite-diagnostics,.tween-cleanup{grid-column:2}.canvas-redraw-sync>svg{width:100%;height:110px}.canvas-redraw-sync path{fill:none;stroke-width:2}.canvas-redraw-sync .render{stroke:#8bd33b}.canvas-redraw-sync .logic{stroke:#8b65df}.canvas-redraw-sync footer{padding:5px;text-align:center;font-size:5px}.overwrite-diagnostics ol{display:grid;gap:5px;margin:8px;padding:0;list-style:none}.overwrite-diagnostics li{display:grid;grid-template-columns:80px 1fr 35px;gap:4px;padding:5px;background:#24313a;font-size:5px}.overwrite-diagnostics li em{color:#ef806d;font-style:normal}.overwrite-diagnostics button{display:block;margin:5px auto;border:1px solid #49606d;background:#172733;color:#d8e7ed;font-size:6px}.tween-cleanup ul{display:grid;gap:6px;margin:8px;padding:0;list-style:none;font-size:6px}.tween-cleanup li{display:grid;grid-template-columns:15px 1fr 35px}.tween-cleanup li svg{width:11px;color:#7ed052}.tween-cleanup li strong{color:#7bd051}.tween-cleanup footer{padding:6px;background:#2b583b;text-align:center;color:#92dd69;font-size:6px}.tween-acceptance{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(6,1fr) 160px;align-items:center;gap:5px;padding:8px;border-color:#314f5d!important}.tween-acceptance article{display:grid;grid-template-columns:18px 1fr;align-items:center;font-size:6px}.tween-acceptance article svg{grid-row:1/3;width:13px;color:#80d44e}.tween-acceptance article span{color:#7ed14d}.tween-acceptance>strong{color:#56bdf0;font-size:12px}.tween-acceptance>strong small{font-size:6px}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.tween-director{grid-template-columns:150px 1fr;grid-template-rows:auto}.tween-inspector{grid-column:1/-1;grid-row:auto}.tween-acceptance{grid-template-columns:repeat(3,1fr)!important}}@media(max-width:680px){.tween-director{grid-template-columns:1fr}.storyboard-preview,.tween-object-tree,.tween-timeline,.tween-inspector,.ease-library,.canvas-redraw-sync,.overwrite-diagnostics,.tween-cleanup,.tween-acceptance{grid-column:1;grid-row:auto}.storyboard-preview{grid-template-columns:1fr}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:1fr}}
/* Canvas topic 04 — multi-pointer interaction debugger. */
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="4"] .topic-heading{background:linear-gradient(115deg,#fbfdff,#edf7fb);border-color:#cddfe6}.canvas-pointer-page-body{display:grid;gap:14px}.pointer-debugger{display:grid;grid-template-columns:180px 1fr 225px;grid-template-rows:70px 390px 195px 190px;gap:7px;padding:7px;border:1px solid #c7dce3;border-radius:15px;background:#edf6f8;color:#153844}.pointer-debugger>section,.pointer-debugger>aside,.pointer-debugger>footer,.pointer-capabilities{overflow:hidden;border:1px solid #c7dce3;border-radius:8px;background:#fff}.pointer-debugger header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #d6e4e8}.pointer-debugger header b{font-size:8px}.pointer-capabilities{grid-column:1/-1}.pointer-capabilities ol{display:grid;grid-template-columns:repeat(6,1fr);height:100%;margin:0;padding:8px 15px;list-style:none}.pointer-capabilities li{display:grid;grid-template-columns:28px 1fr;align-content:center}.pointer-capabilities em{grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#3e8fe0;color:#fff;font-size:7px;font-style:normal}.pointer-capabilities li:nth-child(2) em{background:#49b6ca}.pointer-capabilities li:nth-child(4) em{background:#7a6de0}.pointer-capabilities li:nth-child(5) em{background:#55bb8d}.pointer-capabilities li:nth-child(6) em{background:#e8aa36}.pointer-capabilities b{font-size:7px}.pointer-capabilities small{color:#70898e;font-size:5px}.pointer-event-stream{grid-row:2/4;background:#10263a!important;color:#dcecf3!important}.pointer-event-stream nav{display:flex;gap:3px}.pointer-event-stream nav span{padding:3px 5px;border-radius:4px;background:#203b50;font-size:5px}.pointer-event-stream nav span.active{background:#2585ce}.pointer-event-stream ol{display:grid;gap:1px;margin:0;padding:6px;list-style:none}.pointer-event-stream li{display:grid;grid-template-columns:53px 35px 1fr;gap:3px;min-height:36px;padding:4px;border-left:2px solid #3297ed;background:#102b40;font-size:5px}.pointer-event-stream li.pen{border-color:#9d72e9}.pointer-event-stream li.touch{border-color:#ec5366}.pointer-event-stream li time{color:#7699aa}.pointer-event-stream li b{color:#55bfff}.pointer-event-stream li.pen b{color:#b797ee}.pointer-event-stream li.touch b{color:#ff7f8c}.pointer-event-stream li small{grid-column:2/4;color:#91aebe}.pointer-event-stream footer{display:flex;justify-content:space-around;padding:7px;border-top:1px solid #24485e;font-size:5px}.pointer-canvas{grid-column:2;position:relative}.pointer-canvas>header nav{display:flex;gap:12px}.pointer-canvas>header svg{width:13px}.pointer-canvas>svg{width:100%;height:calc(100% - 35px)}.pointer-grid{fill:none;stroke:#d8e8ec;stroke-width:1}.snap-lines{fill:none;stroke:#30bfd1;stroke-width:1;stroke-dasharray:7 5}.shape-rect{fill:rgba(55,178,196,.38);stroke:#278fdf;stroke-width:2}.shape-star{fill:rgba(135,100,221,.65);stroke:#7c5bca;stroke-width:2}.shape-circle{fill:rgba(245,91,115,.28);stroke:#e54f68;stroke-width:2}.selection{fill:none;stroke:#2f8ce2;stroke-width:2;stroke-dasharray:6 4}.handles circle{fill:#fff;stroke:#318de1;stroke-width:2}.mouse-trace,.pen-trace,.touch-trace{fill:none;stroke:#33b9c7;stroke-width:2;stroke-dasharray:6 4}.pen-trace{stroke:#966ce2}.touch-trace{stroke:#ed596d}.touch-point{fill:rgba(241,84,109,.22);stroke:#e84f69;stroke-width:3}.object-label{position:absolute;padding:3px 5px;border-radius:4px;background:#318de1;color:#fff;font-size:5px}.object-label.rect{left:21%;top:55px}.object-label.star{left:50%;top:62px;background:#7b5ad0}.object-label.circle{right:21%;top:70px;background:#e7526a}.canvas-layer-list{position:absolute;right:7px;top:42px;width:100px;padding:7px;border:1px solid #bfd4dc;border-radius:6px;background:rgba(19,43,57,.92);color:#e6f1f5}.canvas-layer-list ol{margin:5px 0 0;padding:0;list-style:none}.canvas-layer-list li{display:grid;grid-template-columns:8px 1fr 12px;align-items:center;height:24px;border-bottom:1px solid #294757;font-size:5px}.canvas-layer-list li i{width:6px;height:6px;border-radius:50%;background:#8c67df}.canvas-layer-list li:nth-child(2) i{background:#368fe0}.pen-tooltip{position:absolute;left:52%;bottom:16px;padding:7px;border-radius:5px;background:#183348;color:#fff;font-size:6px}.pen-tooltip small{display:block;color:#a9c2cc}.interaction-inspector{grid-column:3;grid-row:2/4}.interaction-inspector>section{margin:6px;padding:7px;border:1px solid #d3e2e6;border-radius:5px}.interaction-inspector section>b{font-size:7px}.interaction-inspector dl,.gesture-meter dl{margin:5px 0;font-size:5px}.interaction-inspector dl div,.gesture-meter dl div{display:flex;justify-content:space-between}.interaction-inspector dd,.gesture-meter dd{margin:0;font-family:Consolas,monospace}.interaction-inspector pre{padding:5px;background:#f1f6f8;font:5px/1.7 Consolas,monospace}.interaction-inspector p{display:flex;justify-content:space-between;margin:4px 0;font-size:5px}.interaction-inspector strong{color:#26888e}.hit-test-panel{grid-column:2}.hit-test-panel>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px}.hit-test-panel article{display:grid;justify-items:center;font-size:6px}.hit-test-panel article svg{width:58px;height:55px;fill:none;stroke:#2c8ddf;stroke-width:2}.hit-test-panel article:nth-child(2) svg{stroke:#7e5dd2}.hit-test-panel article:nth-child(3) svg{stroke:#31a8b5;stroke-dasharray:3}.hit-test-panel article small{color:#6b878d;font-size:5px}.hit-test-panel footer{padding:5px;text-align:center;font-size:5px}.drag-state-machine,.gesture-meter,.snap-feedback{grid-column:2}.drag-state-machine>div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px}.drag-state-machine article{padding:8px 3px;border:1px solid #afc8d0;border-radius:18px;text-align:center;font-size:6px}.drag-state-machine article.active{border-color:#318cdd;background:#eaf5ff;color:#287ac0}.drag-state-machine article.cancelled{grid-column:3;border-color:#e7536a;color:#d43e57}.drag-state-machine footer{padding:5px;text-align:center;font-size:5px}.gesture-meter>div{display:grid;grid-template-columns:1fr 110px;padding:8px}.gesture-meter svg{width:100%;height:100px;fill:none;stroke:#5e8fa3}.gesture-meter svg circle:nth-last-child(-n+2){fill:#7765da;stroke:#fff}.snap-feedback p{display:grid;grid-template-columns:1fr 35px;align-items:center;margin:8px;padding:0 7px;font-size:6px}.snap-feedback p i{height:14px;border-radius:9px;background:#3cb68c}.snap-feedback p em{display:block;width:12px;height:12px;margin-left:21px;border-radius:50%;background:#fff}.snap-feedback footer{padding:8px;border-top:1px solid #d7e3e7;font-size:5px}.pointer-acceptance{grid-column:1/-1;display:grid!important;grid-template-columns:1.5fr 1fr 1fr;gap:7px;border:0!important;background:transparent!important}.pointer-acceptance>section{position:relative;padding:9px;border:1px solid #c7dce3;border-radius:8px;background:#fff}.pointer-acceptance section>b{font-size:8px}.pointer-acceptance table{width:100%;margin-top:8px;border-collapse:collapse;font-size:5px}.pointer-acceptance th,.pointer-acceptance td{padding:6px;border:1px solid #deeaed}.pointer-acceptance ul{display:grid;gap:5px;margin:8px 0;padding:0;list-style:none;font-size:5px}.pointer-acceptance li{display:grid;grid-template-columns:15px 1fr auto}.pointer-acceptance li svg{width:10px;color:#24a77b}.pointer-acceptance li small{color:#239b72}.pointer-acceptance section>strong{color:#1b9b70;font-size:7px}.pointer-acceptance section>em{position:absolute;right:10px;bottom:12px;display:grid;place-items:center;width:55px;height:55px;border:5px solid #2aad7e;border-radius:50%;color:#229b70;font-size:15px;font-style:normal}.pointer-acceptance section>em small{font-size:5px}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="4"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.pointer-debugger{grid-template-columns:180px 1fr;grid-template-rows:auto}.interaction-inspector{grid-column:1/-1;grid-row:auto}.pointer-acceptance{grid-template-columns:1fr!important}}@media(max-width:680px){.pointer-debugger{grid-template-columns:1fr}.pointer-capabilities,.pointer-event-stream,.pointer-canvas,.interaction-inspector,.hit-test-panel,.drag-state-machine,.gesture-meter,.snap-feedback,.pointer-acceptance{grid-column:1;grid-row:auto}.pointer-capabilities ol{grid-template-columns:1fr 1fr}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:1fr}}
/* Canvas topic 03 — particle flow field and editable path studio. */
.force-noise{min-height:178px}
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-heading{background:linear-gradient(110deg,#061522,#071d2a);color:#fff;border-color:#17455a}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-heading h2{color:#e7f7fb}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-heading p,.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .content-kicker{color:#89b0c0}.canvas-particle-page-body{display:grid;gap:14px}.particle-flow-studio{display:grid;grid-template-columns:170px 1fr 220px;grid-template-rows:75px 390px 190px 145px;gap:7px;padding:7px;border:1px solid #16465b;border-radius:15px;background:#041521;color:#d8eef5}.particle-flow-studio>section,.particle-flow-studio>aside,.particle-flow-studio>footer,.particle-route{overflow:hidden;border:1px solid #22506a;border-radius:8px;background:#082032}.particle-flow-studio header{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 9px;border-bottom:1px solid #244b60}.particle-flow-studio header b{font-size:8px}.particle-flow-studio header span{color:#78a6b7;font-size:6px}.particle-route{grid-column:1/-1}.particle-route ol{position:relative;display:grid;grid-template-columns:repeat(6,1fr);height:100%;margin:0;padding:10px 18px;list-style:none}.particle-route ol:before{content:"";position:absolute;left:9%;right:9%;top:34px;height:2px;background:linear-gradient(90deg,#28e3f0,#52e69a,#a871fa,#ff9652)}.particle-route li{z-index:1;display:grid;grid-template-columns:28px 1fr;align-content:center}.particle-route em{grid-row:1/3;display:grid;place-items:center;width:25px;height:25px;border:1px solid #26d9e5;border-radius:50%;background:#0b3244;color:#5ce8ed;font-size:6px;font-style:normal}.particle-route b{font-size:7px}.particle-route small{color:#7fa6b5;font-size:5px}.particle-scene-tree{grid-row:2/4}.particle-scene-tree button{border:1px solid #37637b;background:#0c2a3e;color:#cde8f2}.particle-scene-tree>section{padding:5px 7px}.particle-scene-tree section>b{font-size:7px}.particle-scene-tree article{display:grid;grid-template-columns:18px 1fr 14px;align-items:center;min-height:43px;margin-top:4px;padding:5px;border:1px solid #224a62;border-radius:5px;background:#0a2940}.particle-scene-tree article.active{border-color:#1ca9d1;background:#0b3b58}.particle-scene-tree article svg{width:13px;color:#42dfee}.particle-scene-tree strong,.particle-scene-tree small{display:block;font-size:6px}.particle-scene-tree small{color:#7fa5b4}.particle-scene-tree>footer{display:flex;justify-content:space-around;margin:7px;padding:8px;border-top:1px solid #244b60}.particle-canvas{grid-column:2;position:relative}.particle-canvas>svg{width:100%;height:calc(100% - 36px);background:#04141f}.flow-grid{fill:none;stroke:#153444;stroke-width:1}.flow-path{fill:none;stroke:url(#particle-line-a);stroke-width:3}.flow-path.path-b{stroke:url(#particle-line-b)}.flow-handle{fill:none;stroke:#8db7c6;stroke-width:1;stroke-dasharray:4}.flow-particles .cyan{fill:#3eeaff}.flow-particles .violet{fill:#a670ff}.flow-particles .warm{fill:#ff9b46}.field-lines path{fill:none;stroke:#1ac7b2;stroke-width:1;opacity:.42}.particle-canvas .emitter{fill:#39e9ff;stroke:#fff;stroke-width:3}.particle-canvas .emitter.second{fill:#a66cff}.particle-canvas .attractor{fill:#25e8d0;stroke:#fff;stroke-width:2}.particle-canvas .attractor.second{fill:#ff9b3e}.flow-label{position:absolute;color:#50e5ee;font-size:7px}.path-a-label{top:68px;left:51%}.path-b-label{bottom:42px;left:26%;color:#c996ff}.emitter-label{top:95px;left:9%}.attract-label{top:118px;right:17%}.particle-parameters{grid-column:3;grid-row:2/4}.particle-parameters nav{display:flex;gap:3px}.particle-parameters nav span{padding:4px;border:1px solid #2f6078;border-radius:3px}.particle-parameters>label{display:grid;grid-template-columns:60px 1fr 65px;align-items:center;gap:6px;margin:8px;font-size:6px}.particle-parameters label>i{height:5px;border-radius:5px;background:#19394c}.particle-parameters label>i em{display:block;height:100%;border-radius:inherit;background:#2ad9e6}.particle-parameters label>b{padding:5px;border:1px solid #2a5066;border-radius:4px;background:#061a28;text-align:right}.particle-parameters>section{margin:9px;padding:8px;border-top:1px solid #22475b}.particle-parameters section>b,.particle-parameters section>small{display:block;font-size:6px}.particle-parameters section>span{display:block;margin-top:5px;padding:6px;border:1px solid #2a5369;border-radius:4px}.particle-gradient{display:block;height:8px;margin-top:8px;border-radius:8px;background:linear-gradient(90deg,#36e6ed,#a568fa,#ff9a43)}.particle-parameters section>strong{float:right;color:#51e0ec;font-size:10px}.particle-parameters section>i:not(.particle-gradient){display:block;height:5px;margin-top:9px;background:#17394b}.particle-parameters section>i em{display:block;width:78%;height:100%;background:#28d7e1}.particle-lifecycle{grid-column:2}.life-ring{position:relative;float:left;width:108px;height:108px;margin:18px;border:12px solid #1a6178;border-top-color:#28d6d4;border-right-color:#4db2ed;border-bottom-color:#f4a33b;border-radius:50%}.life-ring b{position:absolute;inset:28px 8px;text-align:center}.life-ring small{display:block;font-size:5px}.particle-lifecycle ol{display:grid;gap:7px;margin:18px 10px 0 145px;padding:0;list-style:none;font-size:6px}.force-noise{grid-column:2}.force-noise svg{float:left;width:55%;height:140px}.force-noise svg path{stroke:#54d9e4;stroke-width:2}.force-noise svg circle{fill:#fff}.force-noise ul{margin:15px 5px 0 60%;padding:0;list-style:none;font-size:6px;line-height:2}.blend-compare{grid-column:2}.blend-compare>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}.blend-compare article{display:grid;gap:5px;text-align:center;font-size:6px}.blend-compare article i{height:90px;border-radius:5px;background:radial-gradient(circle at 40% 50%,#34e6f5,transparent 30%),radial-gradient(circle at 65% 50%,#a96df7,transparent 35%),#061824}.blend-compare article:nth-child(2) i{box-shadow:inset 0 0 30px #693da1}.blend-compare article:nth-child(3) i{box-shadow:inset 0 0 35px #f38c36}.pool-performance{grid-column:2}.pool-ring{float:left;position:relative;width:90px;height:90px;margin:17px;border:13px solid #1e6171;border-right-color:#f0a238;border-radius:50%}.pool-ring b{position:absolute;inset:26px 0;text-align:center}.pool-ring small{display:block;font-size:5px}.pool-performance dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 12px 0 125px}.pool-performance dl div{display:grid;font-size:6px}.pool-performance dd{margin:0;color:#55dce6}.particle-performance{grid-column:2}.particle-performance svg{width:100%;height:110px}.particle-performance path{fill:none;stroke-width:3}.particle-performance .fps{stroke:#2cd8e5}.particle-performance .cpu{stroke:#b06ff0}.particle-performance circle{fill:#5ef0f5}.particle-performance footer{display:flex;justify-content:space-around;font-size:6px}.particle-delivery{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;gap:7px;border:0!important;background:transparent!important}.particle-delivery>section{position:relative;padding:10px;border:1px solid #22506a;border-radius:8px;background:#082032}.particle-delivery section>b{font-size:9px}.particle-delivery dl{display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px}.particle-delivery dl div{padding:8px;border-right:1px solid #24495d;font-size:6px}.particle-delivery dd{margin:3px 0 0;color:#56dbe4}.particle-delivery ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 80px 0 0;padding:0;list-style:none;font-size:6px}.particle-delivery li svg{width:12px;color:#45dfcf}.particle-delivery section>em{position:absolute;right:15px;top:30px;display:grid;place-items:center;width:60px;height:60px;border:5px solid #27d9e2;border-radius:50%;color:#52e5ec;font-size:16px;font-style:normal}.particle-delivery section>em small{font-size:5px}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.particle-flow-studio{grid-template-columns:170px 1fr;grid-template-rows:auto}.particle-parameters{grid-column:1/-1;grid-row:auto}.particle-canvas{grid-column:2}.particle-delivery{grid-template-columns:1fr!important}}@media(max-width:680px){.particle-flow-studio{grid-template-columns:1fr}.particle-route,.particle-scene-tree,.particle-canvas,.particle-parameters,.particle-lifecycle,.force-noise,.blend-compare,.pool-performance,.particle-performance,.particle-delivery{grid-column:1;grid-row:auto}.particle-route ol{grid-template-columns:1fr 1fr}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:1fr}}
/* Canvas topic 02 — frame loop and time scheduling laboratory. */
.live-frame-timeline{max-width:100%}.live-frame-timeline>footer{left:126px!important;right:6px;gap:5px!important;white-space:nowrap}.frame-summary{overflow:hidden}.frame-summary article{min-width:0;padding:0 3px!important}.frame-summary article b{font-size:10px!important;white-space:nowrap}.loop-phases>div{grid-template-columns:1fr 10px 1fr 10px 1fr!important;gap:1px!important;padding:8px 3px!important}.loop-phases article{padding:7px 2px!important}
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-heading{background:linear-gradient(110deg,#061827,#0a2737);color:#fff;border-color:#183c4f}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-heading h2{color:#eaf7fb}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-heading p,.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .content-kicker{color:#94b5c4}.canvas-loop-page-body{display:grid;gap:14px}.frame-loop-lab{display:grid;grid-template-columns:185px 1fr 255px;grid-template-rows:340px 230px 245px 155px;gap:8px;padding:8px;border:1px solid #17465d;border-radius:15px;background:#051827;color:#d9eef5}.frame-loop-lab>section,.frame-loop-lab>aside,.frame-loop-lab>footer{overflow:hidden;border:1px solid #23516a;border-radius:8px;background:#092136}.frame-loop-lab header{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:0 10px;border-bottom:1px solid #244c62}.frame-loop-lab header b{font-size:9px}.frame-loop-lab header span{color:#78a7b9;font-size:6px}.loop-control{padding-bottom:8px}.loop-control>div{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px}.loop-control button{display:flex;align-items:center;justify-content:center;gap:5px;height:38px;border:1px solid #39708a;border-radius:5px;background:#0b2437;color:#dcecf3;font-size:7px}.loop-control button.play{border-color:#22ba68;background:#0e3f32;color:#55e093}.loop-control h3{margin:5px 10px;color:#88a9b7;font-size:6px}.loop-control nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 10px}.loop-control nav span{padding:7px;border:1px solid #2c5a72;border-radius:4px;text-align:center;font-size:7px}.loop-control nav span.active{border-color:#24a9ef;background:#103e5b;color:#50c8ff}.loop-control footer{margin:12px 10px 0;color:#42d58a;font-size:6px}.loop-control footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#32d67d}.live-frame-timeline{position:relative}.frame-summary{display:grid;grid-template-columns:repeat(5,1fr);margin-left:120px;padding:10px}.frame-summary article{padding:0 9px;border-right:1px solid #28516a}.frame-summary span{display:block;color:#7da4b6;font-size:6px}.frame-summary b{font-size:14px;color:#52c7ff}.frame-summary small{font-size:6px}.raf-cycle{position:absolute;left:8px;top:48px;width:120px;height:120px}.raf-cycle svg{width:100%;height:100%;fill:none;stroke:#47d77b;stroke-width:7}.raf-cycle b{position:absolute;inset:47px 10px;text-align:center;font-size:6px}.frame-bars{position:absolute;left:132px;right:12px;bottom:57px;display:flex;align-items:end;gap:2px;height:105px;border-bottom:1px solid #338bb1}.frame-bars>i{flex:1;min-width:2px;background:#2ac85f}.frame-bars>i.long{background:#e49a27}.frame-bars>i.dropped{height:85px!important;background:#e83e38}.frame-bars>em{position:absolute;left:0;right:0;bottom:48px;border-top:1px dashed #27a8dc}.live-frame-timeline>footer{position:absolute;left:140px;bottom:13px;display:flex;gap:18px;font-size:6px}.live-frame-timeline>footer i{display:inline-block;width:6px;height:6px;margin-right:3px;background:#2ac85f}.live-frame-timeline>footer span:nth-child(2) i{background:#e49a27}.live-frame-timeline>footer span:nth-child(3) i{background:#e83e38}.motion-monitor table{width:calc(100% - 16px);margin:8px;border-collapse:collapse;font-size:6px}.motion-monitor th,.motion-monitor td{padding:7px 4px;border-bottom:1px solid #24475c;text-align:left}.motion-monitor td{color:#65c9ee;font-family:Consolas,monospace}.motion-monitor footer{margin:10px;text-align:center;color:#43db7b;font-size:7px}.loop-phases{grid-column:1}.loop-phases>div{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr;align-items:center;gap:3px;padding:11px}.loop-phases article{display:grid;justify-items:center;padding:9px;border:1px solid #2d7592;border-radius:6px}.loop-phases article:nth-child(3){border-color:#2bbd69}.loop-phases article svg{width:18px}.loop-phases article b{font-size:9px}.loop-phases article small{font-size:6px}.loop-phases ol{margin:0 12px;padding-left:16px;color:#8fb0be;font-size:6px;line-height:1.8}.fixed-step{grid-column:2;display:grid;justify-items:center;padding-bottom:8px}.delta-ticks,.fixed-updates{display:flex;gap:8px;margin:11px}.delta-ticks i,.fixed-updates i{width:18px;height:24px;border:1px solid #4dca6b;background:#0f4a31}.fixed-step>b{width:72%;padding:8px;border:1px solid #825ad3;background:#322050;text-align:center;font-size:7px}.fixed-step>small{font-size:6px;color:#99b0bc}.frame-heatmap{grid-column:3}.frame-heatmap svg{width:100%;height:150px}.frame-heatmap rect{fill:#28c65d}.frame-heatmap rect.warn{fill:#e7a12d}.frame-heatmap rect.hot{fill:#e8433d}.frame-heatmap .target{stroke:#2ec1e9;stroke-dasharray:5 4}.frame-heatmap footer{padding:0 10px;color:#86a9ba;font-size:6px}.loop-code{grid-column:1/3}.loop-code pre{height:198px;margin:0;padding:10px;background:#061522}.loop-code code span{display:block;color:#b7d9e7;font:6px/1.55 Consolas,monospace}.loop-code code i{display:inline-block;width:24px;color:#557b8e;font-style:normal}.timeline-units{grid-column:3}.timeline-units ol{display:grid;gap:5px;margin:7px;padding:0;list-style:none}.timeline-units li{display:grid;grid-template-columns:25px 1fr;min-height:29px;padding:4px;border-left:2px solid #328ee1}.timeline-units li:first-child{border-color:#36d16e}.timeline-units em{grid-row:1/3;color:#5fc4f4;font-size:7px;font-style:normal}.timeline-units b{font-size:6px}.timeline-units small{color:#84a4b2;font-size:5px}.refresh-acceptance{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1.2fr;gap:8px;border:0!important;background:transparent!important}.refresh-acceptance>section{display:grid;grid-template-columns:130px repeat(3,1fr) 65px;align-items:center;padding:10px;border:1px solid #23516a;border-radius:8px;background:#092136}.refresh-acceptance>section:last-child{grid-template-columns:100px repeat(5,1fr) 70px}.refresh-acceptance section>b{font-size:9px}.refresh-acceptance article{display:grid;padding:6px;border-left:1px solid #28516a}.refresh-acceptance article span{color:#47d77b;font-size:9px}.refresh-acceptance article strong,.refresh-acceptance article em{font-size:6px;font-style:normal}.refresh-acceptance article small{color:#47d77b;font-size:6px}.refresh-acceptance section>strong{color:#45dc7d;font-size:9px}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.frame-loop-lab{grid-template-columns:180px 1fr;grid-template-rows:auto}.motion-monitor,.frame-heatmap,.timeline-units{grid-column:1/-1}.loop-code{grid-column:1/-1}.refresh-acceptance{grid-template-columns:1fr!important}}@media(max-width:680px){.frame-loop-lab{grid-template-columns:1fr}.loop-control,.live-frame-timeline,.motion-monitor,.loop-phases,.fixed-step,.frame-heatmap,.loop-code,.timeline-units,.refresh-acceptance{grid-column:1}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:1fr}}
/* Canvas topic 01 — high-density drawing and context state laboratory. */
section.canvas-basics-lab{grid-template-rows:512px 325px 105px!important}
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-heading{background:linear-gradient(110deg,#102b45,#081d33);color:#fff;border-color:#173e5d}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-heading h2{color:#ff7459}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-heading p,.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .content-kicker{color:#b9d1df}.canvas-basics-page-body{display:grid;gap:14px}.canvas-basics-lab{display:grid;grid-template-columns:190px 205px 1fr 235px;grid-template-rows:500px 325px 105px;gap:8px;padding:8px;border:1px solid #21425e;border-radius:16px;background:#081c30;color:#dfeef6;box-shadow:0 14px 30px rgba(4,22,38,.18)}.canvas-basics-lab>section,.canvas-basics-lab>aside,.canvas-basics-lab>footer{overflow:hidden;border:1px solid #29465f;border-radius:9px;background:#0d243a}.canvas-basics-lab header{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:0 10px;border-bottom:1px solid #29465f}.canvas-basics-lab header b{font-size:9px}.canvas-basics-lab header span{color:#8aa7ba;font-size:6px}.canvas-learning-flow{grid-row:1/3}.canvas-learning-flow>header span{color:#ff7658}.canvas-learning-flow ol{display:grid;gap:5px;margin:8px;padding:0;list-style:none}.canvas-learning-flow li{display:grid;grid-template-columns:28px 1fr 20px;gap:5px;align-items:center;min-height:91px;padding:7px;border:1px solid #27507a;border-radius:7px;background:#0b2948}.canvas-learning-flow li:nth-child(3){border-color:#674d8e;background:#242045}.canvas-learning-flow li:nth-child(4){border-color:#168981;background:#0c3c41}.canvas-learning-flow li:nth-child(6){border-color:#987025;background:#3a2f16}.canvas-learning-flow li.active{border-color:#d95c43;background:#47251e;box-shadow:inset 3px 0 #ff7254}.canvas-learning-flow li>em{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#163d5c;color:#64b4ff;font-size:7px;font-style:normal}.canvas-learning-flow li.active>em{background:#ed684d;color:#fff}.canvas-learning-flow li b{display:block;font-size:7px}.canvas-learning-flow li small{display:block;margin-top:3px;color:#9bb3c2;font-size:5px;line-height:1.45}.canvas-learning-flow li svg{width:14px;color:#55aff5}.canvas-learning-flow>footer{padding:10px;font-size:7px}.canvas-learning-flow>footer b{color:#54ddd0}.canvas-learning-flow>footer>i{display:block;height:5px;margin-top:8px;border-radius:5px;background:#183850}.canvas-learning-flow>footer>i em{display:block;width:17%;height:100%;border-radius:inherit;background:#33cfba}.canvas-density{grid-column:2}.density-form{display:grid;gap:8px;padding:10px}.density-form label{display:grid;gap:3px;color:#93adba;font-size:6px}.density-form label span{padding:8px;border:1px solid #2a4a64;border-radius:5px;background:#0a1e31;color:#e3eef4;font:7px Consolas,monospace}.density-compare{display:grid;gap:7px;padding:0 10px}.density-compare article{position:relative;height:92px;padding:7px;border-radius:5px;background:#f9fbfd;color:#153044}.density-compare em{padding:3px 5px;border-radius:3px;background:#2e89e6;color:#fff;font-size:5px;font-style:normal}.density-compare b{display:block;margin:8px 0 0 8px;font:42px serif}.density-compare article:first-child b{filter:blur(1.3px)}.density-compare i{position:absolute;right:18px;bottom:15px;width:48px;height:48px;border:1px solid #438bd6;border-radius:50%}.canvas-density>footer{margin:8px;padding:7px;border-radius:5px;background:#113229;color:#57d79d;font-size:6px}.canvas-drawing-area{grid-column:3;position:relative;background:#fdfefe!important;color:#17384d!important}.canvas-drawing-area>svg{width:100%;height:calc(100% - 38px)}.basic-grid{fill:none;stroke:#d8e3e8;stroke-width:1}.basic-axis{fill:none;stroke:#ff6650;stroke-width:2}.basic-curve{fill:none;stroke:#3188e8;stroke-width:4}.basic-wave{fill:url(#basic-wave)}.canvas-drawing-area svg>circle{fill:#ff6d59}.canvas-drawing-area svg>polygon{fill:rgba(68,154,240,.34)}.canvas-drawing-area svg>rect{fill:none;stroke:#3b8ee7;stroke-width:2;stroke-dasharray:6 5}.basic-points{fill:#3aa3e9}.canvas-demo-title{position:absolute;left:38px;bottom:36px;font-size:22px;color:#102d48}.canvas-clip{position:absolute;right:25px;bottom:30px;display:flex;align-items:center;gap:5px;color:#168c84;font-size:7px}.context-state{grid-column:4}.context-state>section{margin:8px;padding:8px;border:1px solid #29485f;border-radius:6px}.context-state section>b{font-size:7px}.context-state p{display:grid;grid-template-columns:1fr 74px;align-items:center;margin:6px 0;font-size:6px}.context-state code{padding:5px;border:1px solid #2c4960;border-radius:4px;background:#081b2c;color:#cfe1eb}.context-state pre{color:#cfdfeb;font:7px/1.7 Consolas,monospace}.context-state ol{display:grid;gap:5px;margin:7px 0 0;padding:0;list-style:none}.context-state li{padding:6px;border-left:2px solid #ff6c4f;background:#112b42;font-size:6px}.drawing-command-flow{grid-column:2}.drawing-command-flow ol{display:grid;gap:6px;margin:8px;padding:0;list-style:none}.drawing-command-flow li{display:grid;grid-template-columns:22px 1fr;align-items:center;min-height:27px;border-radius:5px;background:#104d45;color:#50dac5}.drawing-command-flow li:nth-child(2n){background:#123f6f;color:#62aff5}.drawing-command-flow li:nth-child(4){background:#3b285f;color:#b99af2}.drawing-command-flow li:nth-child(7){background:#713226;color:#ff917b}.drawing-command-flow em{display:grid;place-items:center;height:100%;border-right:1px solid rgba(255,255,255,.15);font-size:6px;font-style:normal}.drawing-command-flow code{padding-left:7px;font-size:6px}.canvas-code-preview{grid-column:3}.canvas-code-preview pre{height:236px;margin:0;padding:8px;overflow:hidden;background:#081827}.canvas-code-preview code span{display:block;color:#b6d2e2;font:6px/1.45 Consolas,monospace}.canvas-code-preview code i{display:inline-block;width:21px;color:#58788c;font-style:normal}.canvas-code-preview footer{display:flex;justify-content:space-between;padding:7px}.canvas-code-preview button{border:0;border-radius:4px;background:#1ba681;color:#fff;font-size:7px}.canvas-code-preview footer span{color:#51d595;font-size:6px}.transform-visual{grid-column:4;padding-bottom:8px}.transform-visual nav{display:flex;margin:8px}.transform-visual nav span{flex:1;padding:5px;background:#17364f;text-align:center;font-size:6px}.transform-visual nav span.active{background:#297bc4}.transform-visual svg{width:100%;height:150px}.transform-visual svg path{stroke:#5d8299;fill:none}.transform-visual svg rect{fill:rgba(52,132,216,.2);stroke:#3994ec}.transform-visual svg rect.after{fill:rgba(255,103,77,.12);stroke:#f56e53;stroke-dasharray:5 4}.transform-visual pre{margin:0 12px;color:#d4e5ee;font:7px/1.7 Consolas,monospace}.canvas-output-check{grid-column:1/-1;display:grid;grid-template-columns:130px repeat(6,1fr) 75px;align-items:center;gap:6px;padding:9px 12px}.canvas-output-check>b{font-size:11px}.canvas-output-check article{display:grid;grid-template-columns:18px 1fr;align-items:center;padding:7px;border:1px solid #2a4b63;border-radius:6px}.canvas-output-check article svg{grid-row:1/3;width:14px;color:#47d6aa}.canvas-output-check article strong{font-size:7px}.canvas-output-check article small{color:#88a9b8;font-size:5px}.canvas-output-check>em{display:grid;place-items:center;height:65px;border:5px solid #8f58e6;border-radius:50%;color:#ae78ff;font-size:14px;font-style:normal}.canvas-output-check>em small{font-size:5px}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:1100px){.canvas-basics-lab{grid-template-columns:180px 1fr 220px;grid-template-rows:auto}.canvas-density{grid-column:2}.canvas-drawing-area{grid-column:2/4}.context-state{grid-column:3}.drawing-command-flow{grid-column:2}.canvas-code-preview{grid-column:2}.transform-visual{grid-column:3}.canvas-output-check{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.canvas-basics-lab{grid-template-columns:1fr}.canvas-learning-flow,.canvas-density,.canvas-drawing-area,.context-state,.drawing-command-flow,.canvas-code-preview,.transform-visual,.canvas-output-check{grid-column:1;grid-row:auto}.canvas-output-check{grid-template-columns:1fr 1fr}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:1fr}}
/* Canvas route — independent 2D creation studio. */
.tutorial-workspace[data-route="canvas"] .route-heading{min-height:260px;padding-right:52%;overflow:hidden;background:linear-gradient(120deg,#fff 55%,#f3f9ff)}.tutorial-workspace[data-route="canvas"] .route-heading:before{content:"";position:absolute;right:24px;top:22px;width:43%;height:210px;border:1px solid #cbdde6;border-radius:12px;background:linear-gradient(rgba(75,142,190,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(75,142,190,.08) 1px,transparent 1px),radial-gradient(circle at 38% 42%,rgba(255,112,82,.72) 0 44px,transparent 45px),radial-gradient(circle at 55% 54%,rgba(70,157,242,.34) 0 65px,transparent 66px),#fbfdff;background-size:25px 25px,25px 25px,auto,auto,auto}.tutorial-workspace[data-route="canvas"] .route-heading:after{content:"Canvas 2D　　图层　　60 FPS";position:absolute;right:42px;bottom:38px;width:36%;padding:8px 12px;border:1px solid #d6e3ea;border-radius:7px;background:rgba(255,255,255,.92);color:#31566b;font:7px Consolas,monospace}.tutorial-workspace[data-route="canvas"] .route-facts,.tutorial-workspace[data-route="canvas"] .route-facts+section,.tutorial-workspace[data-route="canvas"] .route-facts+section+section,.tutorial-workspace[data-route="canvas"] .docs-strip{display:none}.canvas-route-studio{display:grid;gap:12px}.canvas-route-studio>section{border:1px solid #d3e1e5;border-radius:15px;background:#fff;box-shadow:0 10px 28px rgba(40,89,111,.07)}.canvas-pipeline{padding:14px 18px}.canvas-pipeline>header,.canvas-editor>header{display:flex;align-items:center;justify-content:space-between}.canvas-pipeline>header b,.canvas-editor>header>b{font-size:16px}.canvas-pipeline>header span{color:#728488;font-size:8px}.canvas-pipeline ol{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 0;padding:0;list-style:none}.canvas-pipeline ol:before{content:"";position:absolute;left:8%;right:8%;top:30px;height:8px;background:linear-gradient(90deg,#ff7658,#5aa5f5,#28b7ae,#9978ef);opacity:.42}.canvas-pipeline li{z-index:1;display:grid;justify-items:center;text-align:center}.canvas-pipeline li>em{display:grid;place-items:center;width:58px;height:58px;border:1px solid #ff876e;border-radius:50%;background:#fff4f0;color:#ef5d3d}.canvas-pipeline li:nth-child(2)>em{border-color:#72adf0;background:#f1f7ff;color:#367fd5}.canvas-pipeline li:nth-child(3)>em{border-color:#4dc5bd;background:#effbf9;color:#12978e}.canvas-pipeline li:nth-child(4)>em{border-color:#a58cef;background:#f6f2ff;color:#7758d1}.canvas-pipeline li svg{width:27px}.canvas-pipeline li>b{margin-top:11px;font-size:10px}.canvas-pipeline li>small{max-width:145px;margin-top:5px;color:#607375;font-size:7px;line-height:1.6}.canvas-pipeline li>strong{margin-top:8px;color:#e96343;font-size:7px}.canvas-pipeline li:nth-child(2)>strong{color:#337fd1}.canvas-pipeline li:nth-child(3)>strong{color:#128f87}.canvas-pipeline li:nth-child(4)>strong{color:#7556cd}.canvas-editor{display:grid;grid-template-columns:155px 1fr 185px;grid-template-rows:40px 330px 120px;overflow:hidden}.canvas-editor>header{grid-column:1/-1;padding:0 14px;border-bottom:1px solid #dce7e9}.canvas-editor>header nav{display:flex;align-items:center;gap:12px;color:#507078}.canvas-editor>header svg{width:14px}.canvas-editor>aside{padding:10px;border-right:1px solid #dde7e9;background:#fafcfd}.canvas-editor>aside>b{font-size:9px}.canvas-editor>aside ol{margin:8px 0 0;padding:0;list-style:none}.canvas-editor>aside li{display:grid;grid-template-columns:17px 1fr 15px;align-items:center;height:43px;padding:0 7px;border-radius:6px;font-size:8px}.canvas-editor>aside li.active{background:#eaf4ff;color:#337fc8}.canvas-editor>aside li svg{width:12px}.canvas-board{position:relative;overflow:hidden;background:#fafdff}.canvas-board>svg{width:100%;height:100%}.canvas-board .grid{fill:none;stroke:#d8e5ea;stroke-width:1}.canvas-board .curve{fill:none;stroke:#7e5fe5;stroke-width:4}.canvas-board polygon{fill:rgba(64,155,239,.3)}.canvas-board .particles{fill:#63b5f0}.canvas-board rect{fill:none;stroke:#3c8ee5;stroke-width:2;stroke-dasharray:5 4}.canvas-selection{position:absolute;right:24%;top:32%;padding:5px;border:2px solid #3b90e7;background:#fff;color:#287bc8;font-size:12px}.canvas-properties{display:grid!important;grid-template-rows:25px repeat(5,40px) 1fr;gap:2px;border-left:1px solid #dde7e9!important;border-right:0!important}.canvas-properties label{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ecee;font-size:7px}.canvas-properties label i{width:18px;height:18px;border-radius:4px;background:#ff7658}.canvas-properties label span{width:85px;height:10px;border-radius:9px;background:linear-gradient(90deg,#ff7658,#5ea7f2,#9978ef)}.canvas-properties button{align-self:end;height:30px;border:1px solid #d3e0e3;border-radius:5px;background:#fff;color:#365f68;font-size:7px}.canvas-editor>footer{grid-column:1/-1;position:relative;display:grid;grid-template-columns:85px 1fr;padding:9px 12px;border-top:1px solid #dbe6e8;background:#fbfcfd}.canvas-editor>footer>b{font-size:8px}.canvas-editor>footer ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}.canvas-editor>footer li{display:grid;grid-template-columns:75px 1fr;align-items:center;font-size:6px}.canvas-editor>footer li i{height:8px;border-radius:2px;background:#64aaf0}.canvas-editor>footer li:nth-child(3) i{background:#9c7bea}.canvas-editor>footer li:nth-child(4) i{background:#46bdb5}.canvas-editor>footer>em{position:absolute;left:46%;top:26px;width:1px;height:85px;background:#f06446}.canvas-content-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border:0!important;background:transparent!important;box-shadow:none!important}.canvas-content-tools article{display:grid;grid-template-columns:38px 1fr 14px;gap:8px;align-items:start;min-height:120px;padding:14px;border:1px solid #f1cfc6;border-radius:12px;background:#fff9f7;color:#e65d40}.canvas-content-tools article:nth-child(2){border-color:#cbdcf2;background:#f7faff;color:#317fd5}.canvas-content-tools article:nth-child(3){border-color:#c6e7e2;background:#f6fcfb;color:#16978e}.canvas-content-tools article:nth-child(4){border-color:#dbd1f3;background:#faf8ff;color:#7456c9}.canvas-content-tools article>svg{width:28px}.canvas-content-tools article div{display:grid}.canvas-content-tools article b{font-size:10px}.canvas-content-tools article strong{margin-top:8px;font-size:8px}.canvas-content-tools article small{margin-top:5px;color:#667778;font-size:7px;line-height:1.5}.canvas-docs{display:grid;grid-template-columns:210px 1fr 260px;gap:15px;min-height:145px;padding:18px;background:linear-gradient(120deg,#fff,#edf8ff)!important}.canvas-docs>div:first-child{display:grid;align-content:center}.canvas-docs>div b{font-size:14px}.canvas-docs>div small{margin:6px 0;color:#60787c;font-size:7px}.canvas-docs button{justify-self:start;padding:7px 10px;border:0;border-radius:5px;background:#ee6345;color:#fff;font-size:7px}.canvas-docs ol{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}.canvas-docs li{display:flex;align-items:center;gap:7px;font-size:7px}.canvas-docs li svg{width:24px;color:#2c8edc}.canvas-case-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;align-items:center}.canvas-case-strip i{height:75px;border-radius:6px;background:radial-gradient(circle at 45% 40%,#ff885f 0 8px,transparent 9px),linear-gradient(135deg,#15254d,#2474b6)}.canvas-case-strip i:nth-child(2n){background:repeating-radial-gradient(circle,#71b8ef 0 3px,#152e55 4px 10px)}@media(max-width:900px){.canvas-editor{grid-template-columns:130px 1fr}.canvas-properties{grid-column:1/-1}.canvas-content-tools{grid-template-columns:1fr 1fr}.canvas-docs{grid-template-columns:1fr}.tutorial-workspace[data-route="canvas"] .route-heading{padding-right:24px}.tutorial-workspace[data-route="canvas"] .route-heading:before,.tutorial-workspace[data-route="canvas"] .route-heading:after{display:none}}@media(max-width:650px){.canvas-pipeline ol,.canvas-content-tools{grid-template-columns:1fr}.canvas-editor{grid-template-columns:1fr}.canvas-editor>aside{display:none}.canvas-board{grid-column:1}.canvas-properties{grid-column:1}.canvas-docs ol{grid-template-columns:1fr}}
/* Web topic 07 — responsive, performance and accessibility audit cockpit. */
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="7"] .topic-heading{display:none}.web-audit-page-body{display:grid;gap:14px}.experience-audit{display:grid;grid-template-columns:1.2fr .86fr 1.02fr;gap:8px;padding:8px;border:1px solid #ccdfdc;border-radius:16px;background:#eef7f6;box-shadow:0 14px 32px rgba(31,83,79,.08);color:#123b3a}.experience-audit>section,.experience-audit>aside,.experience-audit>header,.experience-audit>footer{border:1px solid #d6e4e2;border-radius:10px;background:#fff}.experience-audit header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 10px}.experience-audit header>b{font-size:9px}.experience-audit header>span{font-size:6px;color:#637d79}.audit-hero{grid-column:1/-1;position:relative;display:grid!important;grid-template-columns:1fr auto;min-height:132px!important;padding:18px 30px!important;overflow:hidden;background:linear-gradient(115deg,#fff 58%,#e8f6f5)!important}.audit-hero:after{content:"";position:absolute;right:35px;top:-80px;width:220px;height:220px;border:24px solid rgba(15,157,149,.08);border-radius:50%;box-shadow:0 0 0 34px rgba(15,157,149,.045)}.audit-hero>div,.audit-hero ol,.audit-hero nav{z-index:1}.audit-hero>div span{display:block;color:#087e79;font-size:7px;font-weight:800}.audit-hero>div b{display:block;margin:7px 0 3px;font-size:25px}.audit-hero>div small{font-size:8px;color:#58716f}.audit-hero ol{display:flex;align-self:end;gap:5px;margin:0;padding:0;list-style:none}.audit-hero ol li{padding:5px 7px;border:1px solid #d7e4e2;border-radius:5px;font-size:6px}.audit-hero ol em{margin-right:5px;color:#087f7a;font-style:normal;font-weight:800}.audit-hero nav{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:7px}.audit-hero button{display:flex;align-items:center;gap:4px;padding:8px 10px;border:1px solid #bdd8d4;border-radius:6px;background:#fff;color:#17625e;font-size:7px;font-weight:700}.audit-hero button.active{background:#087f7a;color:#fff}.device-matrix,.vitals-panel,.a11y-panel{min-height:360px}.device-matrix>header span{padding:3px 5px;border-radius:9px;background:#e7f6f3;color:#168d75}.device-matrix>header i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#1ba176}.devices{display:flex;align-items:end;justify-content:center;gap:10px;height:235px;padding:14px 8px 5px}.devices article>small{display:block;margin-bottom:5px;text-align:center;font-size:6px;color:#627976}.devices article>div{display:flex;flex-direction:column;padding:6px;border:1px solid #8db0ac;border-radius:5px;background:linear-gradient(145deg,#fff,#e8f5f4);box-shadow:0 6px 12px rgba(30,92,88,.12)}.devices article b{font-size:5px}.devices article strong{margin-top:12px;font-size:8px}.devices article button{align-self:start;margin-top:9px;border:0;border-radius:3px;background:#087f7a;color:#fff;font-size:5px}.devices .phone div{width:58px;height:145px}.devices .tablet div{width:105px;height:175px}.devices .desktop div{width:180px;height:195px}.devices article p{display:flex;gap:3px;margin-top:auto}.devices article p i{flex:1;height:32px;border-radius:3px;background:rgba(8,127,122,.13)}.device-matrix footer{position:relative;display:flex;justify-content:space-around;padding-top:12px;border-top:1px dashed #b8cfcc;font-size:6px}.device-matrix footer>i{position:absolute;top:5px;left:8%;width:84%;height:1px;background:#159e96}.device-matrix footer>b{position:absolute;top:28px;color:#087f7a;font-size:6px}.vital-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px}.vital-cards article{display:grid;place-items:center;padding:7px;border:1px solid #dbe7e5;border-radius:6px}.vital-cards span,.vital-cards small{color:#21845e;font-size:6px}.vital-cards b{color:#249353;font-size:17px}.vital-cards i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#28a15e}.waterfall{margin:0 8px;padding:7px;border:1px solid #e0e8e7;border-radius:6px}.waterfall>b{font-size:6px}.waterfall ol{margin:5px 0 0;padding:0;list-style:none}.waterfall li{display:grid;grid-template-columns:42px 1fr 30px;align-items:center;height:18px;font-size:5px}.waterfall li>i{height:6px;border-radius:2px;background:#30ad78}.waterfall li:nth-child(2n)>i{background:#45a4cf}.waterfall li:nth-child(4)>i{background:#eea43a}.waterfall em{font-style:normal}.vitals-panel>footer{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px}.vitals-panel>footer article{display:grid;min-height:52px;padding:6px;border:1px solid #e0e8e7;border-radius:5px;font-size:5px}.vitals-panel svg{width:100%;height:30px;fill:rgba(38,160,89,.18);stroke:#279f59}.a11y-panel>header>span{font-size:20px;color:#208f61;font-weight:800}.a11y-panel>header small{font-size:6px}.a11y-panel>section{margin:7px;padding:7px;border:1px solid #e0e8e7;border-radius:6px}.a11y-panel section>b{font-size:7px}.a11y-panel pre{white-space:normal;color:#42605c;font-size:6px;line-height:1.8}.focus-order p{display:flex;justify-content:space-between}.focus-order em{display:grid;place-items:center;width:22px;height:22px;border:1px solid #82bab5;border-radius:5px;color:#087f7a;font-style:normal}.focus-order small{display:block;text-align:right;color:#278d5e;font-size:6px}.a11y-results p{display:grid;grid-template-columns:1fr 48px 35px;margin:5px 0;font-size:6px}.a11y-results strong{color:#218c5c}.a11y-results strong.warn{color:#d38a26}.resource-budget{grid-column:1/3;min-height:160px}.resource-budget>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:10px}.resource-budget ol{margin:0;padding:0;list-style:none}.resource-budget li{display:grid;grid-template-columns:60px 1fr 65px;align-items:center;height:31px;font-size:6px}.resource-budget li>i{height:7px;border-radius:8px;background:#e2ecea}.resource-budget li>i em{display:block;height:100%;border-radius:inherit;background:#26a278}.resource-budget article{display:flex;align-items:center;gap:8px;padding:7px;border-radius:6px;background:#f1f7f6}.resource-budget article svg{width:30px;color:#168f87}.resource-budget pre{white-space:pre-wrap;font-size:6px}.audit-route{grid-column:3;min-height:160px}.audit-route ol{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;margin:0;padding:6px 8px;list-style:none}.audit-route li{display:grid;grid-template-columns:25px 1fr 35px;align-items:center;min-height:51px;border-bottom:1px solid #e2e9e8}.audit-route li>em{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#92a9a6;color:#fff;font-size:6px;font-style:normal}.audit-route li.done>em{background:#07938c}.audit-route li.doing>em{background:#e4992d}.audit-route li b{display:block;font-size:6px}.audit-route li small{display:block;font-size:5px;color:#6a807d}.audit-route li>span{font-size:5px;color:#738683}.audit-route li.done>span{color:#1a9364}.audit-route li.doing>span{color:#d18421}.audit-before-after{grid-column:1/-1;display:grid!important;grid-template-columns:120px repeat(4,1fr);align-items:center;gap:7px;min-height:85px;padding:9px 12px!important}.audit-before-after>b{font-size:9px}.audit-before-after article{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px;padding:7px;border:1px solid #e0e8e7;border-radius:6px}.audit-before-after article strong{grid-column:1/-1;font-size:6px}.audit-before-after article span{color:#d7472e;font-size:12px}.audit-before-after article em{color:#229354;font-size:12px;font-style:normal}.audit-before-after article small{grid-column:1/-1;text-align:right;color:#229354;font-size:5px}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="7"] .topic-outline .topic-unit-link{min-height:120px;border:1px solid #cee0de!important;border-radius:10px;background:#fff}@media(max-width:1000px){.experience-audit{grid-template-columns:1fr 1fr}.audit-hero,.audit-before-after{grid-column:1/-1}.a11y-panel{grid-column:1/-1}.resource-budget{grid-column:1}.audit-route{grid-column:2}.audit-before-after{grid-template-columns:1fr 1fr}}@media(max-width:720px){.experience-audit{grid-template-columns:1fr}.audit-hero,.device-matrix,.vitals-panel,.a11y-panel,.resource-budget,.audit-route,.audit-before-after{grid-column:1}.audit-hero{grid-template-columns:1fr}.audit-hero nav{grid-column:1;grid-row:auto}.audit-hero ol{flex-wrap:wrap}.audit-before-after{grid-template-columns:1fr}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:1fr}}
.tutorial-sidebar{width:100%;max-width:100%;min-width:0;min-height:100%;display:flex;flex-direction:column;overflow-x:hidden;background:#fff}.sidebar-title{padding:24px 22px 18px;border-bottom:1px solid var(--t-line)}.sidebar-title span,.sidebar-title strong{display:block}.sidebar-title span,.sidebar-group>p,.eyebrow{margin:0 0 5px;color:var(--t-muted);font-size:11px;letter-spacing:.1em}.sidebar-title strong{font-size:19px}.sidebar-primary{padding:10px 0;border-bottom:1px solid var(--t-line)}.sidebar-primary button,.sidebar-group button{width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.sidebar-primary button{display:grid;grid-template-columns:25px 1fr;gap:0 7px;padding:10px 20px;border-left:3px solid transparent}.sidebar-primary button>span{grid-row:1/3;color:#92948f;font-size:10px;padding-top:3px}.sidebar-primary button strong,.sidebar-primary button small{display:block}.sidebar-primary button small{color:var(--t-muted);margin-top:2px}.sidebar-primary button.active{border-left-color:var(--t-ink);background:var(--t-soft)}.sidebar-group{padding:18px 12px}.sidebar-group>p{padding:0 10px}.sidebar-group button{padding:8px 10px;border-left:3px solid transparent}.sidebar-group button strong,.sidebar-group button small{display:block}.sidebar-group button small{margin-top:2px;color:var(--t-muted)}.sidebar-group button.active{border-left-color:var(--t-ink);background:var(--t-soft)}.sidebar-learning{display:grid;gap:3px;margin-top:auto;padding:17px 22px;border-top:1px solid var(--t-line);background:var(--t-soft)}.sidebar-learning span{color:var(--t-muted);font-size:11px}
.sidebar-resume{display:grid;gap:4px;padding:16px 20px;border-bottom:1px solid var(--t-line);background:var(--t-soft)}.sidebar-resume span,.sidebar-resume small{color:var(--t-muted);font-size:11px}.sidebar-resume button{width:max-content;padding:0;border:0;background:transparent;color:var(--t-ink);font-weight:700;cursor:pointer}.sidebar-essentials{padding:8px 0}.sidebar-link{display:grid;grid-template-columns:25px 1fr;gap:0 7px;padding:10px 20px;border-left:3px solid transparent;color:inherit;text-decoration:none}.sidebar-link>span{grid-row:1/3;color:#92948f;font-size:10px;padding-top:3px}.sidebar-link strong,.sidebar-link small{display:block}.sidebar-link small{margin-top:2px;color:var(--t-muted)}.sidebar-link:hover{background:var(--t-soft)}.sidebar-goal{display:grid;gap:12px;padding:17px 20px;border-bottom:1px solid var(--t-line)}.sidebar-goal>p{margin:0;color:var(--t-muted);font-size:11px;letter-spacing:.1em}.sidebar-goal label{display:grid;gap:5px;color:var(--t-muted);font-size:11px}.sidebar-goal select{width:100%;height:40px;padding:0 34px 0 10px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);font:inherit;font-size:13px;cursor:pointer}.sidebar-context{padding:12px 0;border-bottom:1px solid var(--t-line)}.sidebar-context button,.sidebar-catalog button{display:grid;width:100%;gap:2px;padding:9px 20px;border:0;border-left:3px solid transparent;background:transparent;color:inherit;text-align:left;cursor:pointer}.sidebar-context button strong,.sidebar-context button small,.sidebar-catalog button strong,.sidebar-catalog button small{display:block}.sidebar-context button small,.sidebar-catalog button small{color:var(--t-muted)}.sidebar-context button:hover,.sidebar-catalog button:hover{background:var(--t-soft)}.sidebar-context button.active{border-left-color:var(--t-ink);background:var(--t-soft)}.sidebar-context .context-heading{display:flex;align-items:center;justify-content:space-between;padding-top:5px;padding-bottom:10px}.context-heading span{font-weight:800}.sidebar-context .context-heading small{font-size:10px;letter-spacing:.08em}.sidebar-catalog{margin-top:auto;padding:10px 0;background:var(--t-soft)}
.sidebar-categories{width:100%;max-width:100%;min-width:0;padding:8px 0 44px;overflow-x:hidden}.sidebar-divider{display:flex;align-items:center;gap:8px;padding:12px 18px 6px;color:#a0a19d;font-size:11px;letter-spacing:.08em}.sidebar-divider i{height:1px;min-width:0;flex:1;background:var(--t-line)}.category-row{display:flex;max-width:calc(100% - 16px);align-items:center;margin:1px 8px;border-left:3px solid transparent}.category-row:hover,.category-row.active{background:var(--t-soft)}.category-row.active{border-left-color:var(--t-ink)}.category-main{display:grid;min-width:0;flex:1;gap:2px;padding:9px 8px 9px 11px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.category-main strong,.category-main small,.category-children strong,.category-children small,.goal-entry strong,.goal-entry small{display:block;min-width:0}.category-main small,.category-children small,.goal-entry small{overflow:hidden;color:var(--t-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.category-toggle{width:34px;height:38px;flex:0 0 34px;border:0;background:transparent;color:#8a8c87;font-size:17px;cursor:pointer;transition:transform .18s ease}.category-group.expanded .category-toggle{transform:rotate(180deg)}.category-children{padding:2px 0 5px}.category-children button{display:grid;width:calc(100% - 16px);gap:2px;margin:1px 8px;padding:8px 12px 8px 30px;border:0;border-left:3px solid transparent;background:transparent;color:inherit;text-align:left;cursor:pointer}.category-children button:hover,.category-children button.active{background:var(--t-soft)}.category-children button.active{border-left-color:var(--t-ink)}.goal-entry{display:grid;width:calc(100% - 16px);gap:2px;margin:1px 8px;padding:9px 12px;border:0;border-left:3px solid transparent;background:transparent;color:inherit;text-align:left;cursor:pointer}.goal-entry:hover,.goal-entry.active{background:var(--t-soft)}.goal-entry.active{border-left-color:var(--t-ink)}
.tutorial-sidebar .sidebar-essentials{padding:8px;border-bottom:0}.tutorial-sidebar .sidebar-essentials>button,.tutorial-sidebar .sidebar-link{display:flex;min-height:40px;align-items:center;gap:8px;margin:1px 8px;padding:0 13px;border:0;border-radius:5px;font-size:15px;line-height:1.3}.tutorial-sidebar .sidebar-essentials>button>strong,.tutorial-sidebar .sidebar-link>strong{font-weight:400}.tutorial-sidebar .sidebar-essentials>button.active{border:0;background:#eeeeeb;color:#20211f}.sidebar-icon{display:inline-flex;width:18px;height:18px;flex:0 0 18px;align-items:center;justify-content:center;color:#777975;font-size:15px;font-weight:400;line-height:1}.tutorial-sidebar .sidebar-essentials>button.active .sidebar-icon{color:#20211f}.tutorial-sidebar .sidebar-divider{padding:12px 16px 7px}.tutorial-sidebar .sidebar-categories{padding-top:0}.tutorial-sidebar .category-row{min-height:40px;margin:1px 8px;border:0;border-radius:5px}.tutorial-sidebar .category-row.active{border:0;background:#eeeeeb;color:#20211f}.tutorial-sidebar .category-main{display:flex;min-height:40px;align-items:center;gap:8px;padding:0 4px 0 13px;font-size:15px;line-height:1.3}.tutorial-sidebar .category-main strong{overflow:hidden;font-size:15px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.tutorial-sidebar .category-toggle{width:32px;height:40px;flex-basis:32px;font-size:18px}.tutorial-sidebar .category-toggle span{display:block;transform:rotate(90deg);transition:transform .18s ease}.tutorial-sidebar .category-group.expanded .category-toggle{transform:none}.tutorial-sidebar .category-group.expanded .category-toggle span{transform:rotate(-90deg)}.tutorial-sidebar .category-children{padding:2px 0 5px}.tutorial-sidebar .category-children button{min-height:36px;padding:0 12px 0 39px;font-size:14px}.tutorial-sidebar .category-children button strong{font-size:14px;font-weight:400}.tutorial-sidebar .category-children button.active strong{font-weight:500}.tutorial-sidebar .goal-entry{display:flex;min-height:40px;align-items:center;gap:8px;padding:0 13px;border:0;border-radius:5px;font-size:15px;line-height:1.3}.tutorial-sidebar .goal-entry strong{font-size:15px;font-weight:400}.tutorial-sidebar .goal-entry.active{border:0;background:#eeeeeb;color:#20211f}
.tutorial-workspace{width:100%;max-width:100%;min-width:0;min-height:100%;overflow-x:hidden;background:#fff}.workspace-panel[hidden]{display:none!important}.workspace-panel button,.workspace-panel input,.workspace-panel select{font:inherit}.workspace-panel button{cursor:pointer}.home-panel{min-height:0;padding:clamp(22px,2.5vw,38px);overflow:visible}.home-heading{display:block;padding-bottom:24px;border-bottom:1px solid var(--t-line)}.home-heading h1,.content-heading h1{font-size:clamp(34px,3.2vw,46px);line-height:1.04;letter-spacing:-.035em;margin:5px 0 10px}.home-heading p,.content-heading p{margin:0;color:var(--t-muted)}.workspace-search,.catalog-search{display:grid;grid-template-columns:minmax(0,1fr) auto}.workspace-search input,.workspace-search button,.catalog-search input,.catalog-search button{height:48px;border:1px solid var(--t-ink)}.workspace-search input,.catalog-search input{padding:0 14px;background:#fff}.workspace-search button,.catalog-search button,.card-actions button,.content-heading>button,.docs-strip>button,.lesson-row>button,.path-modes article>button,.doc-collections article>button{padding:0 18px;background:#272825;color:#fff;border:1px solid #272825;font-weight:700}
.course-route-view{width:100%;min-width:0;padding:clamp(28px,4vw,64px)}.course-route-breadcrumb{padding-bottom:18px}.course-route-breadcrumb a{color:inherit;text-decoration:none}.course-route-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}.course-node-frame{width:100%;max-width:100%;min-height:calc(100% - 46px);overflow:hidden}.course-node-frame>.tutorial-detail{min-height:100%;padding:clamp(22px,2.5vw,36px);background:#fff}
.home-dashboard{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-rows:auto auto;gap:14px;padding-top:14px}.home-dashboard>article,.home-dashboard>section{border:1px solid var(--t-line);padding:20px}.continue-card{background:var(--t-soft)}.continue-card h2,.start-card h2,.route-overview h2,.docs-overview h2{font-size:21px;margin:13px 0 6px}.continue-card>p{color:var(--t-muted);margin:0}.card-kicker{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--t-muted);font-size:11px}.card-kicker button{border:0;background:transparent;text-decoration:underline}.progress-track{height:5px;background:#d9dad6;margin:20px 0}.progress-track span{display:block;height:100%;background:#292a27}.card-actions{display:flex;align-items:center;gap:14px}.card-actions button{min-height:38px}.card-actions a{text-decoration:underline;font-size:13px}.start-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.start-options button,.route-mini-grid button{border:1px solid var(--t-line);background:#fff;text-align:left;padding:13px;color:inherit}.start-options button:hover,.route-mini-grid button:hover,.job-grid button:hover{border-color:var(--t-ink)}.start-options span,.start-options strong,.start-options small,.route-mini-grid strong,.route-mini-grid small,.route-mini-grid span{display:block}.start-options span{color:var(--t-muted);font-size:10px}.start-options strong{margin:8px 0 3px}.start-options small,.route-mini-grid small{color:var(--t-muted)}.route-overview{grid-column:1/-1}.route-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px}.route-mini-grid strong{font-size:16px}.route-mini-grid span{margin-top:12px;font-size:11px}.docs-overview{grid-column:1/-1}.docs-summary{display:grid;grid-template-columns:repeat(3,1fr);margin-top:13px;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}.docs-summary div{padding:13px;border-right:1px solid var(--t-line)}.docs-summary div:last-child{border:0}.docs-summary strong,.docs-summary span{display:block}.docs-summary span{margin-top:4px;color:var(--t-muted);font-size:12px}
.content-panel{min-height:100%;padding:clamp(28px,4vw,64px)}.content-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--t-line)}.content-heading>div{max-width:850px}.content-heading>button{min-height:44px}.route-facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--t-line)}.route-facts div{padding:22px;border-right:1px solid var(--t-line)}.route-facts div:last-child{border:0}.route-facts span,.route-facts strong{display:block}.route-facts span{color:var(--t-muted);font-size:11px;margin-bottom:7px}.content-block{padding:46px 0;border-bottom:1px solid var(--t-line)}.block-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.block-title h2,.docs-strip h2{font-size:clamp(25px,2.5vw,38px);margin:4px 0}.stage-map{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:0;border:1px solid var(--t-line)}.stage-map li{min-height:150px;padding:19px;border-right:1px solid var(--t-line)}.stage-map li:last-child{border:0}.stage-map span,.stage-map strong,.stage-map small{display:block}.stage-map span{color:var(--t-muted);font-size:11px}.stage-map strong{font-size:18px;margin:20px 0 6px}.stage-map small{color:var(--t-muted)}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.role-grid article{min-height:180px;padding:20px;border:1px solid var(--t-line)}.role-grid span{font-size:11px;color:var(--t-muted)}.role-grid strong{display:block;font-size:18px;margin:28px 0 8px}.role-grid p{margin:0;color:var(--t-muted)}.docs-strip{display:flex;justify-content:space-between;align-items:end;gap:32px;background:var(--t-soft);padding-inline:26px}.docs-strip>div{max-width:780px}.docs-strip p{color:var(--t-muted)}.docs-strip>button{min-height:44px;white-space:nowrap}
.catalog-search{max-width:900px;margin:24px 0}.catalog-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px}.catalog-filters{align-self:start;padding:18px;background:var(--t-soft)}.catalog-filters>label,.catalog-filters legend{display:block;font-weight:700;font-size:13px;margin-bottom:16px}.catalog-filters select{display:block;width:100%;height:40px;margin-top:5px;border:1px solid var(--t-line);background:#fff}.catalog-filters fieldset{border:0;padding:0;margin:24px 0 0}.catalog-filters fieldset label{display:block;margin:8px 0;color:var(--t-muted)}.results-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.results-toolbar select{height:38px;border:1px solid var(--t-line);background:#fff}.lesson-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lesson-row{display:flex;min-width:0;min-height:270px;flex-direction:column;padding:15px;border:1px solid var(--t-line)}.lesson-row[hidden]{display:none!important}.lesson-badges{display:flex;flex-wrap:wrap;gap:4px}.lesson-badges span{padding:2px 6px;background:var(--t-soft);font-size:10px}.lesson-row h2{font-size:17px;line-height:1.35;margin:13px 0 6px}.lesson-row>p{margin:0;color:var(--t-muted);font-size:12px;line-height:1.55}.lesson-row dl{margin:16px 0}.lesson-row dl div{display:grid;grid-template-columns:60px 1fr;gap:6px;padding:5px 0;border-top:1px solid var(--t-line)}.lesson-row dt{color:var(--t-muted);font-size:11px}.lesson-row dd{margin:0;font-size:11px}.lesson-row>button{min-height:36px;margin-top:auto;padding-inline:10px}.empty-state{grid-column:1/-1;padding:48px;text-align:center;border:1px dashed var(--t-line)}.catalog-load-more{display:block;width:100%;min-height:46px;margin-top:14px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);font-weight:700}.catalog-load-more:hover{background:var(--t-soft)}
.path-heading{padding-bottom:26px}.path-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:22px 0}.path-mode-card{display:grid;grid-template-columns:24px 1fr;gap:5px 10px;min-height:142px;padding:17px;border:1px solid var(--t-line);background:#fff;color:inherit;text-align:left}.path-mode-card>svg{grid-row:1/4;width:20px;height:20px;color:var(--t-muted)}.path-mode-card>span{color:var(--t-muted);font-size:11px}.path-mode-card>strong{font-size:18px}.path-mode-card>small{color:var(--t-muted);line-height:1.5}.path-mode-card:hover,.path-mode-card.active{border-color:var(--t-ink)}.path-mode-card.active{background:var(--t-soft)}.path-builder{display:grid;grid-template-columns:210px minmax(0,1fr);border:1px solid var(--t-line)}.path-builder-steps{padding:22px;border-right:1px solid var(--t-line);background:var(--t-soft)}.path-builder-steps ol{display:grid;gap:6px;margin:0;padding:0;list-style:none}.path-builder-steps li{display:grid;grid-template-columns:30px 1fr;align-items:center;min-height:42px;color:var(--t-muted)}.path-builder-steps li span{font-size:11px}.path-builder-steps li.active{color:var(--t-ink)}.path-builder-steps li.active strong{font-weight:800}.path-builder-steps>p{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--t-line);color:var(--t-muted);font-size:11px;line-height:1.6}.path-builder-form{padding:24px}.path-form-heading{display:flex;align-items:start;justify-content:space-between;gap:24px}.path-form-heading span,.path-form-heading small{color:var(--t-muted);font-size:11px}.path-form-heading h2{margin:7px 0 0;font-size:25px}.path-goal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0}.path-goal-grid button{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--t-line);background:#fff;color:inherit;text-align:left}.path-goal-grid button svg{width:16px;height:16px;opacity:0}.path-goal-grid button:hover,.path-goal-grid button.active{border-color:var(--t-ink)}.path-goal-grid button.active{background:var(--t-soft)}.path-goal-grid button.active svg{opacity:1}.path-conditions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:20px;border-top:1px solid var(--t-line)}.path-conditions label{display:grid;gap:7px;color:var(--t-muted);font-size:11px}.path-conditions select{width:100%;min-width:0;height:42px;padding:0 10px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink)}.path-generate{display:inline-flex;min-height:44px;align-items:center;gap:8px;margin-top:20px;padding:0 18px;border:1px solid #272825;background:#272825;color:#fff;font-weight:700}.path-generate svg{width:17px;height:17px}.path-preview{margin-top:18px;border:1px solid var(--t-line)}.path-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px;border-bottom:1px solid var(--t-line)}.path-preview-heading span,.path-preview-heading p{color:var(--t-muted)}.path-preview-heading h2{margin:5px 0;font-size:28px}.path-preview-heading p{margin:0}.path-preview-heading>div:last-child{text-align:center}.path-preview-heading>div:last-child strong,.path-preview-heading>div:last-child span{display:block}.path-preview-heading>div:last-child strong{font-size:28px;color:var(--t-ink)}.path-stage-list{margin:0;padding:0;list-style:none}.path-stage-list li{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(130px,220px);gap:16px;align-items:center;min-height:82px;padding:12px 22px;border-bottom:1px solid var(--t-line)}.path-stage-list li>span{color:var(--t-muted);font-size:22px;font-weight:700}.path-stage-list strong{font-size:16px}.path-stage-list p{margin:4px 0 0;color:var(--t-muted)}.path-stage-list small{color:var(--t-muted);text-align:right}.path-preview-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px}.path-preview-actions button,.path-preview-actions a{display:inline-flex;min-height:42px;align-items:center;gap:7px;padding:0 15px;border:1px solid var(--t-ink);background:#fff;color:var(--t-ink);font-weight:700;text-decoration:none}.path-preview-actions a{background:#272825;color:#fff}.path-preview-actions svg{width:16px;height:16px}.job-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.job-grid button{min-height:70px;padding:12px;border:1px solid var(--t-line);background:#fff;text-align:left;color:inherit}
.docs-policy{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:20px 0;border-bottom:1px solid var(--t-line)}.docs-policy strong{margin-right:8px}.docs-policy span{padding:5px 9px;background:var(--t-soft);font-size:12px}.doc-collections{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:34px 0}.doc-collections article{display:flex;flex-direction:column;min-height:470px;padding:22px;border:1px solid var(--t-line)}.doc-head{display:flex;justify-content:space-between;color:var(--t-muted);font-size:11px}.doc-head strong{color:var(--t-ink);font-size:14px}.doc-collections h2{font-size:23px;line-height:1.25;margin:28px 0 10px}.doc-collections p,.doc-collections li{color:var(--t-muted)}.doc-collections ul{padding-left:18px}.doc-collections article>button{min-height:42px;margin-top:auto}.doc-process ol{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;padding:0;margin:0;border:1px solid var(--t-line)}.doc-process li{min-height:120px;padding:16px;border-right:1px solid var(--t-line)}.doc-process li:last-child{border:0}.doc-process li span,.doc-process li strong{display:block}.doc-process li span{color:var(--t-muted);font-size:11px}.doc-process li strong{margin-top:20px}
@media(max-width:1100px){.home-heading{grid-template-columns:1fr}.home-dashboard{grid-template-columns:1fr}.route-overview,.docs-overview{grid-column:auto}.route-mini-grid,.stage-map,.role-grid,.job-grid{grid-template-columns:repeat(2,1fr)}.docs-summary,.doc-collections,.path-modes{grid-template-columns:1fr}.lesson-list{grid-template-columns:repeat(3,minmax(0,1fr))}.doc-process ol{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.lesson-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.lesson-list{grid-template-columns:1fr}}
@media(max-width:1100px){.path-builder{grid-template-columns:180px minmax(0,1fr)}.path-goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.path-conditions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.path-modes,.path-builder{grid-template-columns:1fr}.path-builder-steps{border-right:0;border-bottom:1px solid var(--t-line)}.path-builder-steps ol{grid-template-columns:repeat(4,1fr)}.path-builder-steps li{grid-template-columns:1fr}.path-builder-steps>p{display:none}.path-goal-grid,.path-conditions{grid-template-columns:1fr}.path-stage-list li{grid-template-columns:40px minmax(0,1fr)}.path-stage-list small{grid-column:2;text-align:left}.path-preview-actions{flex-direction:column}.path-preview-actions button,.path-preview-actions a{justify-content:center}}
@media(max-width:760px){.home-panel,.content-panel{padding:20px}.home-heading h1,.content-heading h1{font-size:36px}.workspace-search,.catalog-search{grid-template-columns:1fr}.workspace-search button,.catalog-search button{height:44px}.start-options,.route-mini-grid,.stage-map,.role-grid,.route-facts,.job-grid{grid-template-columns:1fr}.content-heading,.docs-strip{display:block}.content-heading>button,.docs-strip>button{margin-top:16px;width:100%}.catalog-layout{grid-template-columns:1fr}.catalog-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.catalog-filters fieldset{margin-top:0}.stage-map li,.route-facts div{border-right:0;border-bottom:1px solid var(--t-line)}.doc-process ol{grid-template-columns:1fr}.doc-process li{min-height:auto;border-right:0;border-bottom:1px solid var(--t-line)}}

/* V3 branded operational polish */
.tutorial-sidebar,.tutorial-workspace{
  --t-brand:#119492;
  --t-brand-strong:#0d7473;
  --t-brand-soft:#e8f5f5;
  --t-brand-wash:#f2f9f8;
  --t-ink:#172624;
  --t-muted:#667573;
  --t-line:#dce5e3;
  --t-line-strong:#c9d8d5;
  --t-soft:#f5f8f7;
  --t-page:#f1f6f5;
  color:var(--t-ink);
}

.tutorial-workspace>.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.tutorial-sidebar{background:#fbfdfc}
.tutorial-sidebar .sidebar-essentials{padding:10px 8px 9px;border-bottom:1px solid var(--t-line)}
.tutorial-sidebar .sidebar-essentials>button,.tutorial-sidebar .sidebar-link,.tutorial-sidebar .category-row,.tutorial-sidebar .goal-entry{border-radius:7px;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.tutorial-sidebar .sidebar-essentials>button:hover,.tutorial-sidebar .sidebar-link:hover,.tutorial-sidebar .category-row:hover,.tutorial-sidebar .goal-entry:hover{background:var(--t-brand-wash)}
.tutorial-sidebar .sidebar-essentials>button.active,.tutorial-sidebar .category-row.active,.tutorial-sidebar .goal-entry.active{background:var(--t-brand-soft);color:var(--t-brand-strong);box-shadow:inset 3px 0 0 var(--t-brand)}
.tutorial-sidebar .sidebar-essentials>button.active .sidebar-icon,.tutorial-sidebar .category-row.active .sidebar-icon,.tutorial-sidebar .goal-entry.active .sidebar-icon{color:var(--t-brand)}
.tutorial-sidebar .sidebar-icon{color:#71807d}
.tutorial-sidebar .sidebar-divider{padding-top:18px;color:#7c8987;font-weight:600;letter-spacing:.06em}
.tutorial-sidebar .sidebar-divider i{background:linear-gradient(90deg,var(--t-line),transparent)}
.tutorial-sidebar .category-children button{border-radius:6px}
.tutorial-sidebar .category-children button:hover{background:var(--t-brand-wash)}
.tutorial-sidebar .category-children button.active{border-left-color:var(--t-brand);background:var(--t-brand-soft);color:var(--t-brand-strong)}

.tutorial-workspace{background:linear-gradient(180deg,#fbfdfc 0,#fff 180px)}
.home-panel{padding:clamp(28px,3vw,44px) clamp(28px,3.6vw,56px) 56px}
.home-heading{position:relative;padding:4px 0 26px 18px;border-bottom:1px solid var(--t-line)}
.home-heading:before{position:absolute;inset:7px auto 27px 0;width:4px;border-radius:3px;background:linear-gradient(180deg,var(--t-brand),#77c4bf);content:""}
.home-heading h2{margin:0 0 7px;font-size:clamp(26px,2.4vw,36px);line-height:1.18;letter-spacing:-.025em;color:#142523}
.home-heading p{font-size:15px;line-height:1.7}

.home-dashboard{gap:16px;padding-top:18px}
.home-dashboard>article,.home-dashboard>section{border:1px solid var(--t-line);border-radius:10px;padding:22px;background:#fff;box-shadow:0 1px 2px rgba(15,72,69,.04)}
.continue-card{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--t-brand-wash),#fff 72%)!important;border-color:#cfe4e1!important}
.continue-card:before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--t-brand);content:""}
.continue-card h2,.start-card h2,.route-overview h2,.docs-overview h2{color:#152825}
.card-kicker{min-height:18px;color:#71807d;font-weight:500}
.card-kicker>span{color:var(--t-brand-strong);font-weight:700}
.card-kicker button{color:var(--t-brand-strong);font-weight:650;text-decoration:none}
.card-kicker button:hover{text-decoration:underline;text-underline-offset:4px}
.progress-track{height:7px;margin:20px 0 18px;border-radius:10px;background:#dfe9e7;overflow:hidden}
.progress-track span{border-radius:10px;background:linear-gradient(90deg,var(--t-brand-strong),var(--t-brand))}

.workspace-panel button,.workspace-panel a{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.workspace-panel button:focus-visible,.workspace-panel a:focus-visible,.tutorial-sidebar button:focus-visible,.tutorial-sidebar a:focus-visible,.workspace-panel input:focus-visible,.workspace-panel select:focus-visible{outline:3px solid rgba(17,148,146,.2);outline-offset:2px}
.workspace-search button,.catalog-search button,.card-actions button,.content-heading>button,.docs-strip>button,.lesson-row>button,.path-modes article>button,.doc-collections article>button,.path-generate,.path-preview-actions a{border-color:var(--t-brand-strong);border-radius:6px;background:var(--t-brand-strong);color:#fff}
.workspace-search button:hover,.catalog-search button:hover,.card-actions button:hover,.content-heading>button:hover,.docs-strip>button:hover,.lesson-row>button:hover,.path-generate:hover,.path-preview-actions a:hover{border-color:#095f5e;background:#095f5e}
.card-actions a{color:var(--t-brand-strong);font-weight:600;text-decoration:none}
.card-actions a:hover{text-decoration:underline;text-underline-offset:4px}

.start-options{gap:10px}
.start-options button,.route-mini-grid button{position:relative;border-color:var(--t-line);border-radius:8px;background:#fff}
.start-options button:hover,.route-mini-grid button:hover,.job-grid button:hover{border-color:#86bab5;background:var(--t-brand-wash);box-shadow:0 5px 18px rgba(13,116,115,.07);transform:translateY(-1px)}
.start-options span{color:var(--t-brand);font-weight:700}
.start-options strong{font-size:15px}
.route-mini-grid{gap:10px}
.route-mini-grid button{min-height:132px;padding:16px}
.route-mini-grid button span{display:flex;align-items:center;gap:5px;color:var(--t-brand-strong);font-weight:650}
.docs-overview{background:linear-gradient(180deg,#fff,var(--t-brand-wash))!important}
.docs-summary{border-color:var(--t-line-strong)}
.docs-summary div{border-color:var(--t-line-strong)}
.docs-summary strong{color:#18312e}

.content-panel{padding:clamp(30px,4vw,60px)}
.content-heading{border-color:var(--t-line-strong)}
.content-heading h2{color:#142523}
.eyebrow{color:var(--t-brand-strong);font-weight:700}
.route-facts,.stage-map,.role-grid article,.lesson-row,.path-mode-card,.path-builder,.path-preview,.doc-collections article{border-color:var(--t-line-strong)}
.stage-map li>span,.route-facts span,.role-grid span,.lesson-badges span,.path-builder-steps li.active,.path-stage-list li>span{color:var(--t-brand-strong)}
.lesson-badges span{border-radius:4px;background:var(--t-brand-soft)}
.path-mode-card:hover,.path-mode-card.active,.path-goal-grid button:hover,.path-goal-grid button.active{border-color:var(--t-brand)}
.path-mode-card.active,.path-goal-grid button.active{background:var(--t-brand-soft)}
.path-mode-card>.iconify{grid-row:1/4;width:20px;height:20px;color:var(--t-brand-strong)}
.path-goal-grid button>.iconify{width:16px;height:16px;opacity:0}
.path-goal-grid button.active>.iconify{opacity:1;color:var(--t-brand)}
.path-generate>.iconify,.path-preview-actions .iconify{width:17px;height:17px}
.route-mini-grid span>.iconify{display:inline-block;width:13px;height:13px}
.unit-course-foot>.iconify{width:17px;height:17px;justify-self:end}
.path-builder-steps{background:var(--t-brand-wash)}
.path-builder-steps li.active strong{color:var(--t-brand-strong)}
.catalog-filter-bar select:focus,.workspace-panel input:focus,.workspace-panel select:focus{border-color:var(--t-brand)}

@media(max-width:1100px){
  .home-panel{padding:28px 30px 44px}
  .route-mini-grid button{min-height:112px}
}

@media(max-width:760px){
  .home-panel,.content-panel{padding:72px 18px 30px}
  .home-heading{padding-left:15px}
  .home-heading h2{font-size:27px}
  .home-heading p{font-size:14px}
  .home-dashboard>article,.home-dashboard>section{padding:18px;border-radius:8px}
  .card-kicker{align-items:flex-start}
  .card-kicker small{text-align:right}
  .docs-summary{grid-template-columns:1fr}
  .docs-summary div{border-right:0;border-bottom:1px solid var(--t-line)}
}

@media(prefers-reduced-motion:reduce){
  .workspace-panel button,.workspace-panel a,.tutorial-sidebar button,.tutorial-sidebar a{transition:none!important}
  .start-options button:hover,.route-mini-grid button:hover,.job-grid button:hover{transform:none}
}

.block-title h2,.docs-strip h2{margin-top:0}
.operational-sidebar-content:has(.tutorial-sidebar){scrollbar-width:none;-ms-overflow-style:none}
.operational-sidebar-content:has(.tutorial-sidebar)::-webkit-scrollbar{display:none;width:0;height:0}
.home-heading h2,.content-heading h2{font-size:clamp(26px,2.2vw,28px)}
.block-title h2,.docs-strip h2,.topic-outline .block-title h2{font-size:clamp(24px,2vw,28px)}
.mobile-view-nav{display:none}
@media(max-width:760px){.mobile-view-nav{position:sticky;top:0;z-index:8;display:flex;overflow:auto;border-bottom:1px solid var(--t-line);background:#fff}.mobile-view-nav button{flex:1 0 auto;padding:11px 13px;border:0;background:#fff;color:inherit}.mobile-view-nav button.active{background:var(--t-soft);font-weight:700}}
@media(prefers-reduced-motion:reduce){.tutorial-workspace *{scroll-behavior:auto!important}}

/* V2 TutorialWorkspace navigation metrics, with grayscale-only state colors. */
.tutorial-sidebar .sidebar-essentials,
.tutorial-sidebar .sidebar-categories{padding:8px 0 56px}
.tutorial-sidebar .sidebar-essentials{padding-bottom:0}
.tutorial-sidebar .sidebar-essentials>button,
.tutorial-sidebar .sidebar-link,
.tutorial-sidebar .category-row,
.tutorial-sidebar .goal-entry{min-height:40px;margin:1px 8px;border:0;border-radius:5px;color:#555;font-size:15px;font-weight:400;line-height:1.3;transition:background .2s,color .2s;white-space:nowrap;overflow:hidden}
.tutorial-sidebar .sidebar-essentials>button,
.tutorial-sidebar .sidebar-link,
.tutorial-sidebar .goal-entry{padding:0 .8rem}
.tutorial-sidebar .sidebar-essentials>button:hover,
.tutorial-sidebar .sidebar-link:hover,
.tutorial-sidebar .category-row:hover,
.tutorial-sidebar .goal-entry:hover{background:rgba(243,244,246,.7);color:#252422}
.tutorial-sidebar .sidebar-essentials>button.active,
.tutorial-sidebar .category-row.active,
.tutorial-sidebar .goal-entry.active{background:#eeeeeb;color:#20211f}
.tutorial-sidebar .sidebar-essentials strong,
.tutorial-sidebar .sidebar-link strong,
.tutorial-sidebar .category-main strong,
.tutorial-sidebar .goal-entry strong{font-size:15px;font-weight:400;line-height:1.3}
.tutorial-sidebar .category-row{padding-right:.8rem}
.tutorial-sidebar .category-main{min-height:40px;padding:0 0 0 .8rem;gap:8px;color:inherit;font-size:15px;font-weight:400;line-height:1.3}
.tutorial-sidebar .category-toggle{width:22px;height:22px;flex:0 0 22px;margin-left:auto;padding:0;border:0;border-radius:5px;color:#aaa;font-size:15px}
.tutorial-sidebar .category-toggle:hover{background:rgba(0,0,0,.06);color:#5a606b}
.tutorial-sidebar .category-children{padding:2px 0;overflow:hidden}
.tutorial-sidebar .category-children button{display:flex;min-height:0;align-items:center;gap:8px;margin:1px 8px;padding:.5rem .8rem .5rem 2.3rem;border:0;border-radius:5px;color:#555;font-size:14px;font-weight:400;line-height:1.3;white-space:nowrap;overflow:hidden;transition:background .2s,color .2s}
.tutorial-sidebar .category-children button strong{min-width:0;overflow:hidden;font-size:14px;font-weight:400;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.tutorial-sidebar .category-children button:hover{background:rgba(243,244,246,.7);color:#252422}
.tutorial-sidebar .category-children button.active{background:#eeeeeb;color:#20211f;font-weight:500}
.tutorial-sidebar .category-children button.active strong{font-weight:500}
.tutorial-sidebar .sidebar-divider{display:flex;align-items:center;gap:6px;margin:12px 16px 4px;padding:0;color:#bbb;font-size:.7rem;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.tutorial-sidebar .sidebar-divider i{height:1px;flex:1;background:#ebebeb}
.tutorial-sidebar .category-toggle .toggle-icon{display:block;width:16px;height:16px;transition:transform .18s ease}.tutorial-sidebar .category-group.expanded .category-toggle .toggle-icon{transform:rotate(90deg)}.route-mini-grid span svg{display:inline-block;width:12px;height:12px;vertical-align:-2px}
.tutorial-sidebar .sidebar-essentials>button{width:calc(100% - 16px)}

.catalog-panel{padding-top:0}
.catalog-filter-bar{position:sticky;top:0;z-index:7;display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;padding:14px 0 16px;border-bottom:1px solid var(--t-line);background:#fff}
.catalog-filter-bar>label{display:grid;min-width:0;gap:6px;color:var(--t-muted);font-size:11px;font-weight:700}
.catalog-filter-bar select{width:100%;min-width:0;height:40px;padding:0 30px 0 10px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);font:inherit;font-size:13px;font-weight:400}
.catalog-panel .catalog-results{padding-top:20px}
.docs-summary{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:0}
.docs-summary div,.docs-summary div:last-child{min-width:0;border-right:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}
.docs-summary div:nth-child(4n){border-right:0}
.topic-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--t-line)}
.topic-facts>div{padding:20px 22px;border-right:1px solid var(--t-line)}
.topic-facts>div:last-child{border-right:0}
.topic-facts span,.topic-facts strong{display:block}.topic-facts span{margin-bottom:7px;color:var(--t-muted);font-size:11px}.topic-facts strong{font-size:14px;line-height:1.6}
.topic-outline .block-title{align-items:center}
.topic-outline .block-title>span{color:var(--t-muted);font-size:12px}
.topic-outline .block-title h2{font-size:30px}
.topic-outline{border-bottom:0}
.topic-unit-list{display:grid;list-style:none;margin:0;padding:0;border-top:1px solid var(--t-line)}
.topic-unit-list li{border-bottom:1px solid var(--t-line)}
.topic-unit-link{display:grid;width:100%;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:18px;min-height:122px;padding:18px 20px;border:0;background:#fff;color:var(--t-ink);text-align:left}
.topic-unit-index{color:var(--t-muted);font-size:11px}.topic-unit-copy{display:grid;gap:4px;min-width:0}.topic-unit-title{display:flex;min-width:0;align-items:center;gap:12px}.topic-unit-title>strong{min-width:0;font-size:19px}.topic-unit-summary{min-width:0;overflow:hidden;color:var(--t-muted);text-overflow:ellipsis;white-space:nowrap}.topic-unit-copy small{flex:0 0 auto;color:var(--t-muted);font-size:11px}.topic-unit-arrow{color:var(--t-muted);font-size:18px}.topic-unit-link:hover,.topic-unit-link:focus-visible{background:var(--t-soft)}
.topic-outline .topic-unit-link{grid-template-columns:64px minmax(0,1fr) max-content;min-height:78px;padding:10px 18px;gap:16px}
.topic-outline .topic-unit-index{color:#6f6f6b;font-size:22px;font-weight:650;line-height:1}
.topic-outline .topic-unit-title>strong{font-size:18px}
.topic-outline .topic-unit-copy small{display:inline-flex;align-items:center;min-height:20px;padding:1px 7px;border:1px solid var(--t-line);background:var(--t-soft);color:var(--t-muted);line-height:1}
.topic-outline .topic-unit-link:hover .topic-unit-copy small,.topic-outline .topic-unit-link:focus-visible .topic-unit-copy small{background:#fff}
.topic-unit-action{display:inline-flex;align-items:center;gap:8px;color:var(--t-muted);font-size:12px;white-space:nowrap}.topic-unit-action svg{width:16px;height:16px;transition:transform .18s ease}.topic-unit-link:hover .topic-unit-action,.topic-unit-link:focus-visible .topic-unit-action{color:var(--t-ink)}.topic-unit-link:hover .topic-unit-action svg,.topic-unit-link:focus-visible .topic-unit-action svg{transform:translateX(3px)}
.topic-load-more{display:block;width:100%;min-height:46px;border:1px solid var(--t-line);border-top:0;background:#fff;color:var(--t-ink);font-weight:700}
.topic-load-more:hover{background:var(--t-soft)}
.unit-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-30px 0 0 -22px;padding-bottom:18px;color:var(--t-muted);font-size:14px}.unit-breadcrumb button{padding:0;border:0;background:transparent;color:inherit}.unit-breadcrumb strong{color:var(--t-ink);font-weight:600}.unit-heading{padding-top:28px}.unit-collection-head{display:flex;align-items:center;justify-content:space-between;padding:28px 0 14px}.unit-collection-head strong{font-size:21px}.unit-collection-head span{color:var(--t-muted);font-size:12px}.unit-course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.unit-course-card{display:flex;min-width:0;min-height:310px;flex-direction:column;padding:0;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);text-align:left}.unit-course-card:hover,.unit-course-card:focus-visible,.unit-course-card.selected{border-color:var(--t-ink);background:var(--t-soft)}.unit-course-media{display:grid;width:100%;aspect-ratio:16/9;place-items:center;border-bottom:1px solid var(--t-line);background:repeating-linear-gradient(135deg,#ecece9 0 18px,#e3e4e0 18px 19px);color:var(--t-muted);font-size:11px}.unit-course-meta{display:flex;flex-wrap:wrap;gap:5px;padding:14px 14px 0}.unit-course-meta small{padding:2px 6px;background:var(--t-soft);color:var(--t-muted);font-size:10px}.unit-course-card>strong{padding:12px 14px 0;font-size:16px;line-height:1.4}.unit-course-note{display:-webkit-box;overflow:hidden;padding:7px 14px 0;color:var(--t-muted);font-size:12px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.unit-course-foot{display:grid;grid-template-columns:max-content max-content 1fr;align-items:center;gap:10px;margin-top:auto;padding:14px;color:var(--t-muted);font-size:11px}.unit-course-foot svg{width:17px;height:17px;justify-self:end}.course-selection-note{margin:16px 0 0;padding:12px 14px;background:var(--t-soft);color:var(--t-muted);font-size:12px}
.unit-detail{display:grid;gap:22px}.unit-detail-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:24px 0 28px;border-bottom:1px solid var(--t-line)}.unit-detail-hero>div{max-width:780px}.unit-detail-hero span,.unit-detail-section .block-title span,.unit-next-action span{display:block;margin-bottom:9px;color:var(--t-muted);font-size:11px;letter-spacing:.08em}.unit-detail-hero h2{margin:0;font-size:36px;line-height:1.16}.unit-detail-hero p{max-width:720px;margin:12px 0 0;color:var(--t-muted);font-size:15px;line-height:1.75}.unit-detail-hero button,.unit-next-action button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 18px;border:1px solid var(--t-ink);background:var(--t-ink);color:#fff;font-weight:650;white-space:nowrap}.unit-detail-hero button svg,.unit-next-action button svg{width:16px;height:16px}.unit-detail-facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--t-line)}.unit-detail-facts>div{display:grid;gap:8px;min-height:104px;padding:20px 22px}.unit-detail-facts>div+div{border-left:1px solid var(--t-line)}.unit-detail-facts span{color:var(--t-muted);font-size:11px}.unit-detail-facts strong{font-size:15px;line-height:1.6}.unit-detail-section{padding:26px 28px;border:1px solid var(--t-line);background:#fff}.unit-step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--t-line)}.unit-step-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:20px 18px 4px 0}.unit-step-list li+li{padding-left:18px;border-left:1px solid var(--t-line)}.unit-step-list>li>span{color:var(--t-muted);font-size:12px}.unit-step-list strong{display:block;font-size:16px}.unit-step-list p{margin:8px 0 0;color:var(--t-muted);font-size:13px;line-height:1.65}.unit-check-section ul{display:grid;grid-template-columns:1fr 1fr;gap:0;list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--t-line)}.unit-check-section li{display:flex;align-items:center;gap:12px;min-height:54px;border-bottom:1px solid var(--t-line);font-size:13px}.unit-check-section li:nth-child(odd){padding-right:20px}.unit-check-section li:nth-child(even){padding-left:20px;border-left:1px solid var(--t-line)}.unit-check-section li svg{flex:0 0 auto;width:16px;height:16px}.unit-next-action{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;background:var(--t-soft)}.unit-next-action strong{font-size:15px}
@media(max-width:1200px){.catalog-filter-bar{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:1100px){.docs-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-summary div:nth-child(4n){border-right:1px solid var(--t-line)}.docs-summary div:nth-child(2n){border-right:0}.topic-facts{grid-template-columns:1fr}.topic-facts>div{border-right:0;border-bottom:1px solid var(--t-line)}.unit-course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.catalog-filter-bar{grid-template-columns:repeat(2,minmax(130px,1fr));padding-top:10px}.catalog-panel{padding-top:0}.docs-summary{grid-template-columns:1fr}.docs-summary div,.docs-summary div:nth-child(2n),.docs-summary div:nth-child(4n),.docs-summary div:last-child{border-right:0}.topic-outline .block-title h2{font-size:26px}.topic-unit-link,.topic-outline .topic-unit-link{grid-template-columns:44px minmax(0,1fr) 20px;padding-inline:12px}.topic-outline .topic-unit-index{font-size:20px}.topic-unit-summary{white-space:normal}.unit-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.unit-course-grid{grid-template-columns:1fr}.unit-collection-head{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:760px){.tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:44px minmax(0,1fr)}.topic-unit-action{grid-column:2;margin-top:5px}.unit-detail-hero,.unit-next-action{align-items:flex-start;flex-direction:column}.unit-detail-hero h2{font-size:29px}.unit-detail-facts,.unit-step-list,.unit-check-section ul{grid-template-columns:1fr}.unit-detail-facts>div+div,.unit-step-list li+li,.unit-check-section li:nth-child(even){padding-left:0;border-left:0;border-top:1px solid var(--t-line)}.unit-detail-section{padding:22px 18px}.unit-check-section li:nth-child(odd),.unit-check-section li:nth-child(even){padding-right:0}.unit-next-action button{width:100%}}

/* Tutorial content workspace: stable grayscale hierarchy and restrained actions. */
.tutorial-workspace{
  --t-brand:#2c2d2a;
  --t-brand-strong:#20211f;
  --t-brand-soft:#eeeeeb;
  --t-brand-wash:#f6f6f3;
  --t-ink:#20211f;
  --t-muted:#686965;
  --t-line:#dedfda;
  --t-line-strong:#cbccc6;
  --t-soft:#f5f5f2;
  --t-page:#f2f2ef;
  background:#fff;
  color:var(--t-ink);
  font-size:14px;
  line-height:1.6;
}
.tutorial-workspace .home-heading:before{background:#8d8e88}
.tutorial-workspace .continue-card{border-color:var(--t-line-strong)!important;background:#f8f8f5!important}
.tutorial-workspace .continue-card:before{background:#777873}
.tutorial-workspace .progress-track{background:#e1e2dd}
.tutorial-workspace .progress-track span{background:#656660}
.tutorial-workspace .home-dashboard>article,
.tutorial-workspace .home-dashboard>section{border-radius:8px;box-shadow:none}
.tutorial-workspace .home-heading h2,
.tutorial-workspace .content-heading h2{font-size:clamp(26px,2.2vw,28px);line-height:1.25;letter-spacing:-.02em;color:var(--t-ink)}
.tutorial-workspace .continue-card h2,
.tutorial-workspace .start-card h2,
.tutorial-workspace .section-heading-row h2,
.tutorial-workspace .block-title h2,
.tutorial-workspace .docs-strip h2,
.tutorial-workspace .path-form-heading h2,
.tutorial-workspace .path-preview-heading h2{font-size:22px;line-height:1.35;letter-spacing:-.01em;color:var(--t-ink)}
.tutorial-workspace .route-mini-grid strong,
.tutorial-workspace .start-options strong,
.tutorial-workspace .lesson-row h2,
.tutorial-workspace .doc-collections h2,
.tutorial-workspace .topic-unit-title>strong,
.tutorial-workspace .unit-course-card>strong{font-size:16px;line-height:1.45}
.tutorial-workspace p,
.tutorial-workspace li,
.tutorial-workspace dd,
.tutorial-workspace small{line-height:1.6}
.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-heading-row h2{margin:0}
.section-heading-row>button{flex:0 0 auto;padding:6px 0;border:0;background:transparent;color:#555651;font-size:13px;font-weight:600}
.section-heading-row>button:hover{text-decoration:underline;text-underline-offset:4px}
.tutorial-workspace .route-mini-grid button span{color:#666762;font-size:12px;font-weight:600}
.tutorial-workspace .start-options span,
.tutorial-workspace .stage-map li>span,
.tutorial-workspace .route-facts span,
.tutorial-workspace .role-grid span,
.tutorial-workspace .lesson-badges span,
.tutorial-workspace .path-builder-steps li.active,
.tutorial-workspace .path-stage-list li>span{color:#646560}
.tutorial-workspace .workspace-panel button:focus-visible,
.tutorial-workspace .workspace-panel a:focus-visible,
.tutorial-workspace .workspace-panel input:focus-visible,
.tutorial-workspace .workspace-panel select:focus-visible{outline:2px solid #555651;outline-offset:2px}
.tutorial-workspace .workspace-search button,
.tutorial-workspace .catalog-search button,
.tutorial-workspace .card-actions .primary-action,
.tutorial-workspace .content-heading>button,
.tutorial-workspace .docs-strip>button,
.tutorial-workspace .lesson-row>button,
.tutorial-workspace .path-generate,
.tutorial-workspace .path-preview-actions a,
.tutorial-workspace .collection-action{display:inline-flex;min-height:40px;align-items:center;justify-content:center;padding:0 16px;border:1px solid #2f302d;border-radius:5px;background:#2f302d;color:#fff;font-size:13px;font-weight:650;text-decoration:none}
.tutorial-workspace .workspace-search button:hover,
.tutorial-workspace .catalog-search button:hover,
.tutorial-workspace .card-actions .primary-action:hover,
.tutorial-workspace .content-heading>button:hover,
.tutorial-workspace .docs-strip>button:hover,
.tutorial-workspace .lesson-row>button:hover,
.tutorial-workspace .path-generate:hover,
.tutorial-workspace .path-preview-actions a:hover,
.tutorial-workspace .collection-action:hover{border-color:#111;background:#111;color:#fff;text-decoration:none}
.tutorial-workspace .card-actions{align-items:center}
.tutorial-workspace .card-actions>a:not(.primary-action){color:#555651}
.tutorial-workspace .start-options button:hover,
.tutorial-workspace .route-mini-grid button:hover,
.tutorial-workspace .job-grid button:hover{border-color:#8d8e88;background:#f5f5f2;box-shadow:none;transform:none}
.tutorial-workspace .topic-outline .block-title h2{font-size:22px}
.tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:52px minmax(0,1fr);min-height:76px;padding:12px 18px}
.tutorial-workspace .topic-outline .topic-unit-index{font-size:16px;font-weight:600}
.tutorial-workspace .topic-unit-copy{gap:3px}
.tutorial-workspace .topic-unit-title>strong{font-weight:650}
.tutorial-workspace .unit-course-foot{grid-template-columns:max-content max-content}
.tutorial-workspace .doc-collections article{min-height:420px}
.tutorial-workspace .doc-collections .collection-action{align-self:flex-start;margin-top:auto}
.tutorial-workspace .catalog-filter-bar>label{font-size:12px;color:#666762}
.tutorial-workspace .catalog-filter-bar select{border-radius:4px;font-size:14px}
.tutorial-workspace .mobile-view-nav button.active{box-shadow:inset 0 -2px 0 #444540}

@media(max-width:760px){
  .section-heading-row{align-items:flex-start}
  .tutorial-workspace .home-heading h2,.tutorial-workspace .content-heading h2{font-size:26px}
  .tutorial-workspace .continue-card h2,.tutorial-workspace .start-card h2,.tutorial-workspace .section-heading-row h2,.tutorial-workspace .block-title h2,.tutorial-workspace .docs-strip h2,.tutorial-workspace .path-form-heading h2,.tutorial-workspace .path-preview-heading h2,.tutorial-workspace .topic-outline .block-title h2{font-size:20px}
  .tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:38px minmax(0,1fr);padding-inline:12px}
}

/* 全路线批量定妆：13 条路线与全部子主题共享同一内容轨道。 */
.tutorial-workspace [data-panel="routes"]{
  --route-line:rgba(50,119,114,.2);
  --route-muted:#607078;
}
.tutorial-workspace [data-panel="routes"] .content-heading{
  min-height:244px;
  align-items:center;
  padding:34px 38px;
  border:1px solid rgba(17,148,146,.24);
  border-radius:16px;
  background:
    url('/images/tutorials/home-water-loop.webp') right top/auto 244px no-repeat,
    linear-gradient(112deg,#fff 0%,#fbfdff 58%,#effbfc 100%);
  box-shadow:0 10px 30px rgba(55,105,119,.055);
}
.tutorial-workspace [data-panel="routes"] .content-heading>div:first-child{
  max-width:min(780px,72%);
}
.tutorial-workspace [data-panel="routes"] .content-heading h2{
  margin:8px 0 12px;
  font-size:clamp(36px,3.1vw,46px);
  line-height:1.08;
  letter-spacing:-.045em;
}
.tutorial-workspace [data-panel="routes"] .heading-tags{
  margin-top:22px;
}
.tutorial-workspace [data-panel="routes"] .heading-tags span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  border-color:var(--route-line);
  background:rgba(255,255,255,.84);
}
.tutorial-workspace [data-panel="routes"] .route-facts,
.tutorial-workspace [data-panel="routes"] .topic-facts{
  gap:10px;
  margin-top:16px;
}
.tutorial-workspace [data-panel="routes"] .route-facts>div,
.tutorial-workspace [data-panel="routes"] .topic-facts>div{
  min-height:126px;
  padding:22px;
  border:1px solid var(--route-line)!important;
  border-radius:12px;
  background:linear-gradient(145deg,#fffefa,#f4fbfa);
  box-shadow:0 8px 22px rgba(24,75,72,.035);
}
.tutorial-workspace [data-panel="routes"] .content-block{
  margin-top:16px;
  padding:30px;
  border:1px solid var(--route-line);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 28px rgba(24,75,72,.045);
}
.tutorial-workspace [data-panel="routes"] .stage-map{
  overflow:hidden;
  border-color:var(--route-line);
  border-radius:12px;
}
.tutorial-workspace [data-panel="routes"] .stage-map li{
  min-height:160px;
  border-color:var(--route-line);
  background:linear-gradient(155deg,#fff,#f8fcfb);
}
.tutorial-workspace [data-panel="routes"] .role-grid{
  gap:10px;
}
.tutorial-workspace [data-panel="routes"] .role-grid article{
  min-height:174px;
  border-color:var(--route-line);
  border-radius:12px;
  background:#fffefa;
}
.tutorial-workspace [data-panel="routes"] .docs-strip{
  align-items:center;
  border-color:var(--route-line);
  background:linear-gradient(110deg,#eef9f7,#fff 72%);
  color:#0a1d22;
  box-shadow:0 10px 28px rgba(24,75,72,.045);
}
.tutorial-workspace [data-panel="routes"] .docs-strip h2{
  color:#0a1d22;
}
.tutorial-workspace [data-panel="routes"] .docs-strip p{
  color:var(--route-muted);
}
.tutorial-workspace [data-panel="routes"] .docs-strip>button{
  border-color:#087b79;
  background:#087b79;
  color:#fff;
}
.tutorial-workspace [data-panel="routes"] .topic-outline{
  padding:28px 30px 30px;
}
.tutorial-workspace [data-panel="routes"] .topic-unit-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  overflow:hidden;
  border:1px solid var(--route-line);
  border-radius:12px;
  background:#fff;
}
.tutorial-workspace [data-panel="routes"] .topic-unit-list li+li{
  border-top:1px solid var(--route-line)!important;
}
.tutorial-workspace [data-panel="routes"] .topic-outline .topic-unit-link{
  grid-template-columns:48px minmax(0,1fr) max-content;
  grid-template-rows:auto;
  min-height:82px;
  padding:12px 18px;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  align-items:center;
}
.tutorial-workspace [data-panel="routes"] .topic-outline .topic-unit-link:hover{
  padding-left:22px;
  border:0;
  background:#f2fbfa;
  box-shadow:none;
  transform:none;
}
.tutorial-workspace [data-panel="routes"] .topic-unit-index{
  grid-row:auto;
  width:34px;
  height:34px;
  border-radius:50%;
}
.tutorial-workspace [data-panel="routes"] .topic-unit-summary{
  margin-top:3px;
  white-space:normal;
}
.tutorial-workspace [data-panel="routes"] .topic-unit-action{
  grid-column:3;
  margin-top:0;
}
@media(max-width:1100px){
  .tutorial-workspace [data-panel="routes"] .content-heading{
    min-height:220px;
    padding:30px;
  }
  .tutorial-workspace [data-panel="routes"] .content-heading>div:first-child{
    max-width:70%;
  }
  .tutorial-workspace [data-panel="routes"] .stage-map,
  .tutorial-workspace [data-panel="routes"] .role-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .tutorial-workspace [data-panel="routes"] .content-heading{
    min-height:0;
    padding:24px 20px;
    background-size:auto 210px,auto;
  }
  .tutorial-workspace [data-panel="routes"] .content-heading>div:first-child{
    max-width:100%;
  }
  .tutorial-workspace [data-panel="routes"] .content-heading h2{
    font-size:34px;
  }
  .tutorial-workspace [data-panel="routes"] .content-block{
    padding:22px 18px;
  }
  .tutorial-workspace [data-panel="routes"] .topic-outline .topic-unit-link{
    grid-template-columns:42px minmax(0,1fr);
    padding:14px 12px;
  }
  .tutorial-workspace [data-panel="routes"] .topic-unit-action{
    grid-column:2;
    margin-top:6px;
  }
}
@media(max-width:480px){
  .catalog-filter-bar{grid-template-columns:1fr}
  .section-heading-row{display:block}
  .section-heading-row>button{margin-top:6px}
}

/* Complete tutorial workspace polish: consistent geometry, hierarchy and feedback. */
.tutorial-workspace{--t-radius-sm:8px;--t-radius-md:12px;--t-shadow-hover:0 10px 28px rgba(32,33,31,.08)}
.tutorial-workspace .content-kicker{display:block;margin-bottom:8px;color:var(--t-muted);font-size:11px;font-weight:650;letter-spacing:.09em}
.tutorial-workspace .workspace-panel button,.tutorial-workspace .workspace-panel a{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.tutorial-workspace .card-actions a{display:inline-flex;align-items:center;gap:7px}.tutorial-workspace .card-actions svg,.tutorial-workspace .section-heading-row svg,.tutorial-workspace .route-mini-grid span svg,.tutorial-workspace .lesson-row>button svg,.tutorial-workspace .collection-action svg,.tutorial-workspace .catalog-load-more svg{width:15px;height:15px;flex:0 0 auto}
.tutorial-workspace .section-heading-row>button{display:inline-flex;align-items:center;gap:7px}.tutorial-workspace .section-heading-row>button:hover{color:var(--t-ink);text-decoration:none;transform:translateX(2px)}
.tutorial-workspace .start-options button,.tutorial-workspace .route-mini-grid button{position:relative;overflow:hidden;border-radius:var(--t-radius-sm)}
.tutorial-workspace .start-options button>svg{position:absolute;right:14px;bottom:14px;width:16px;height:16px;color:#858681}.tutorial-workspace .start-options button:hover>svg{color:var(--t-ink);transform:translateX(3px)}
.tutorial-workspace .route-mini-grid button span{display:flex;align-items:center;justify-content:space-between;gap:10px}.tutorial-workspace .route-mini-grid button:hover span svg{transform:translateX(3px)}
.tutorial-workspace .start-options button:hover,.tutorial-workspace .route-mini-grid button:hover{border-color:var(--t-line-strong);background:#fafaf8;box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}
.tutorial-workspace .route-mini-grid .route-mini-card{display:block;min-height:132px;padding:16px;border:1px solid var(--t-line);border-radius:var(--t-radius-sm);background:#fff;color:inherit;text-align:left;text-decoration:none;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.tutorial-workspace .route-mini-grid .route-mini-card:hover{border-color:var(--t-line-strong);background:#fafaf8;box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}
.tutorial-workspace .route-mini-grid .route-mini-card:focus-visible{outline:2px solid #2f302d;outline-offset:3px}
.tutorial-workspace .route-mini-grid .route-mini-card span{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#666762;font-size:12px;font-weight:600}
.tutorial-workspace .route-mini-grid .route-mini-card:hover span svg{transform:translateX(3px)}
.tutorial-workspace .docs-summary{overflow:hidden;border:1px solid var(--t-line);border-radius:var(--t-radius-sm)}
.tutorial-workspace .docs-summary div{background:#fff;transition:background-color .18s ease}.tutorial-workspace .docs-summary div:hover{background:var(--t-soft)}
.tutorial-workspace .route-facts,.tutorial-workspace .topic-facts{overflow:hidden;margin-top:18px;border:1px solid var(--t-line);border-radius:var(--t-radius-sm)}
.tutorial-workspace .stage-map,.tutorial-workspace .role-grid article,.tutorial-workspace .docs-strip{border-radius:var(--t-radius-sm)}
.tutorial-workspace .stage-map{overflow:hidden}.tutorial-workspace .stage-map li,.tutorial-workspace .role-grid article{transition:background-color .18s ease,transform .18s ease}.tutorial-workspace .stage-map li:hover,.tutorial-workspace .role-grid article:hover{background:var(--t-soft)}
.tutorial-workspace .docs-strip{border:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}
.tutorial-workspace .topic-unit-list{overflow:hidden;border:1px solid var(--t-line);border-radius:var(--t-radius-sm)}.tutorial-workspace .topic-unit-list li:first-child{border-top:0}.tutorial-workspace .topic-unit-list li:last-child{border-bottom:0}.tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:52px minmax(0,1fr) max-content}.tutorial-workspace .topic-unit-link:hover{padding-left:22px}.tutorial-workspace .topic-load-more{border-radius:0 0 var(--t-radius-sm) var(--t-radius-sm)}
.tutorial-workspace .unit-detail-facts,.tutorial-workspace .unit-detail-section,.tutorial-workspace .unit-next-action{border-radius:var(--t-radius-sm)}.tutorial-workspace .unit-detail-section{box-shadow:0 1px 0 rgba(32,33,31,.02)}
.tutorial-workspace .catalog-filter-bar{gap:12px}.tutorial-workspace .catalog-filter-bar select{border-radius:var(--t-radius-sm)}.tutorial-workspace .catalog-filter-bar select:hover{border-color:var(--t-line-strong)}
.tutorial-workspace .catalog-heading{padding-top:clamp(28px,4vw,54px);padding-bottom:24px}.tutorial-workspace .catalog-heading+ .catalog-filter-bar{top:0}
.tutorial-workspace .results-toolbar{min-height:48px;margin-bottom:16px}.tutorial-workspace .results-toolbar>div{display:grid;gap:2px}.tutorial-workspace .results-toolbar>div>span{color:var(--t-muted);font-size:12px}.tutorial-workspace .results-toolbar>button{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:0;border-radius:6px;background:var(--t-soft);color:var(--t-muted);font-size:12px}.tutorial-workspace .results-toolbar>button:hover{background:#e8e9e5;color:var(--t-ink)}.tutorial-workspace .results-toolbar svg{width:14px;height:14px}
.tutorial-workspace .lesson-row{border-radius:var(--t-radius-sm);background:#fff}.tutorial-workspace .lesson-row:hover{border-color:var(--t-line-strong);box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}.tutorial-workspace .lesson-row>button{gap:8px}.tutorial-workspace .lesson-row>button:hover svg{transform:translateX(3px)}.tutorial-workspace .lesson-badges span{border-radius:999px}.tutorial-workspace .empty-state{border-radius:var(--t-radius-sm);background:#fafaf8}.tutorial-workspace .empty-state button{margin-top:14px;padding:8px 14px;border:1px solid var(--t-line);border-radius:6px;background:#fff;color:var(--t-ink)}.tutorial-workspace .catalog-load-more{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--t-radius-sm)}
.tutorial-workspace .path-mode-card,.tutorial-workspace .path-builder,.tutorial-workspace .path-goal-grid button,.tutorial-workspace .path-conditions select,.tutorial-workspace .path-preview{border-radius:var(--t-radius-sm)}.tutorial-workspace .path-mode-card:hover,.tutorial-workspace .path-goal-grid button:hover{box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}.tutorial-workspace .path-builder{overflow:hidden}.tutorial-workspace .path-generate:hover{transform:translateY(-1px)}
.path-route-recommendations{padding:20px 22px;border-bottom:1px solid var(--t-line);background:#fafaf8}.path-route-heading{display:grid;gap:3px;margin-bottom:12px}.path-route-heading span{color:var(--t-muted);font-size:11px}.path-route-heading strong{font-size:16px}.path-route-recommendations>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.path-route-recommendations button{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:4px 10px;align-items:center;padding:13px 14px;border:1px solid var(--t-line);border-radius:var(--t-radius-sm);background:#fff;color:var(--t-ink);text-align:left}.path-route-recommendations button span{font-weight:650}.path-route-recommendations button small{grid-column:1;color:var(--t-muted)}.path-route-recommendations button svg{grid-column:2;grid-row:1/3;width:16px;height:16px;color:var(--t-muted)}.path-route-recommendations button:hover{border-color:var(--t-line-strong);box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}.path-route-recommendations button:hover svg{color:var(--t-ink);transform:translateX(2px)}
.tutorial-workspace .docs-policy,.tutorial-workspace .doc-collections article,.tutorial-workspace .doc-process{border-radius:var(--t-radius-sm)}.tutorial-workspace .doc-collections article:hover{border-color:var(--t-line-strong);box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}.tutorial-workspace .collection-action{gap:8px}.tutorial-workspace .collection-action:hover svg{transform:translate(2px,-2px)}
@media(max-width:760px){.tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:38px minmax(0,1fr)}.tutorial-workspace .topic-unit-action{grid-column:2}.path-route-recommendations>div:last-child{grid-template-columns:1fr}.tutorial-workspace .route-facts,.tutorial-workspace .topic-facts{margin-top:12px}.tutorial-workspace .lesson-row:hover,.tutorial-workspace .path-mode-card:hover,.tutorial-workspace .path-goal-grid button:hover,.tutorial-workspace .doc-collections article:hover{transform:none}}

/* 2026 tutorial redesign: one grayscale workspace system across every panel. */
.tutorial-workspace{
  --t-canvas:#eeeeeb;
  --t-surface:#fff;
  --t-surface-muted:#f7f7f4;
  --t-surface-strong:#e8e8e4;
  --t-ink:#1f201e;
  --t-muted:#666762;
  --t-line:#d9dad4;
  --t-line-strong:#bfc0ba;
  --t-radius-sm:10px;
  --t-radius-md:16px;
  --t-radius-lg:22px;
  --t-shadow-hover:0 16px 36px rgba(25,26,24,.09);
  min-height:100%;
  background:var(--t-canvas);
}
.tutorial-workspace .workspace-panel{background:transparent}
.tutorial-workspace .home-panel,
.tutorial-workspace .content-panel{padding:clamp(24px,3.6vw,56px);}
.tutorial-workspace .home-heading,
.tutorial-workspace .content-heading{
  position:relative;
  overflow:hidden;
  padding:clamp(24px,3vw,42px);
  border:1px solid var(--t-line);
  border-radius:var(--t-radius-lg);
  background:linear-gradient(135deg,#fff 0%,#f7f7f4 100%);
}
.tutorial-workspace .home-heading:after,
.tutorial-workspace .content-heading:after{
  position:absolute;
  right:-56px;
  bottom:-78px;
  width:220px;
  height:220px;
  border:42px solid rgba(31,32,30,.035);
  border-radius:50%;
  content:"";
  pointer-events:none;
}
.tutorial-workspace .home-heading:before{display:none}
.tutorial-workspace .home-heading>div,
.tutorial-workspace .content-heading>div,
.tutorial-workspace .content-heading>button,
.tutorial-workspace .heading-actions{position:relative;z-index:1}
.tutorial-workspace .home-heading h2,
.tutorial-workspace .content-heading h2{font-size:clamp(30px,3vw,42px);letter-spacing:-.035em}
.tutorial-workspace .home-heading p,
.tutorial-workspace .content-heading p{max-width:760px;margin-top:10px;font-size:15px;line-height:1.75}
.tutorial-workspace .heading-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tutorial-workspace .heading-tags span,
.tutorial-workspace .block-kicker{color:#555651;font-size:11px;font-weight:650;letter-spacing:.03em}
.tutorial-workspace .heading-tags span{padding:6px 10px;border:1px solid var(--t-line);border-radius:999px;background:rgba(255,255,255,.72)}
.tutorial-workspace .heading-actions{display:flex;align-items:center;gap:10px}
.tutorial-workspace .heading-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--t-ink);border-radius:8px;background:var(--t-ink);color:#fff;font-size:13px;font-weight:650;white-space:nowrap}
.tutorial-workspace .heading-actions>.secondary-action{border-color:var(--t-line-strong);background:#fff;color:var(--t-ink)}
.tutorial-workspace .heading-actions>.secondary-action:hover{border-color:var(--t-ink);background:var(--t-surface-muted)}
.tutorial-workspace .home-dashboard{gap:16px;margin-top:16px}
.tutorial-workspace .home-dashboard>article,
.tutorial-workspace .home-dashboard>section,
.tutorial-workspace .path-builder,
.tutorial-workspace .path-preview,
.tutorial-workspace .docs-policy,
.tutorial-workspace .doc-process,
.tutorial-workspace .catalog-filter-bar,
.tutorial-workspace .catalog-results{border:1px solid var(--t-line);border-radius:var(--t-radius-md);background:var(--t-surface)}
.tutorial-workspace .continue-card,
.tutorial-workspace .start-card,
.tutorial-workspace .route-overview,
.tutorial-workspace .docs-overview{padding:clamp(22px,2.5vw,32px)!important}
.tutorial-workspace .start-options button,
.tutorial-workspace .route-mini-grid button,
.tutorial-workspace .path-mode-card,
.tutorial-workspace .path-goal-grid button,
.tutorial-workspace .doc-collections article,
.tutorial-workspace .lesson-row{border-radius:12px;background:var(--t-surface)}
.tutorial-workspace .route-facts,
.tutorial-workspace .topic-facts{gap:10px;margin-top:16px;border:0;border-radius:0;background:transparent}
.tutorial-workspace .route-facts>div,
.tutorial-workspace .topic-facts>div{
  min-height:128px;
  padding:22px;
  border:1px solid var(--t-line)!important;
  border-radius:12px;
  background:var(--t-surface);
}
.tutorial-workspace .route-facts span,
.tutorial-workspace .topic-facts span{margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em}
.tutorial-workspace .content-block{margin-top:16px;padding:clamp(24px,3vw,38px);border:1px solid var(--t-line);border-radius:var(--t-radius-md);background:var(--t-surface)}
.tutorial-workspace .block-title{margin-bottom:24px}
.tutorial-workspace .block-title>div{display:grid;gap:4px}
.tutorial-workspace .stage-map{gap:10px;border:0;background:transparent}
.tutorial-workspace .stage-map li{min-height:170px;border:1px solid var(--t-line)!important;border-radius:12px;background:var(--t-surface-muted)}
.tutorial-workspace .stage-map li:hover{border-color:var(--t-line-strong)!important;background:#fff;transform:translateY(-2px)}
.tutorial-workspace .role-grid{gap:10px}
.tutorial-workspace .role-grid article{min-height:190px;border-radius:12px;background:var(--t-surface-muted)}
.tutorial-workspace .role-grid article:hover{border-color:var(--t-line-strong);background:#fff;transform:translateY(-2px)}
.tutorial-workspace .docs-strip{align-items:center;background:var(--t-ink);color:#fff}
.tutorial-workspace .docs-strip h2{color:#fff}.tutorial-workspace .docs-strip p{color:#bfc0ba}
.tutorial-workspace .docs-strip>button{border-color:#fff;background:#fff;color:var(--t-ink)}
.tutorial-workspace .docs-strip>button:hover{border-color:#d9dad4;background:#e8e8e4;color:var(--t-ink)}
.tutorial-workspace .topic-outline{padding-bottom:30px}
.tutorial-workspace .topic-unit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;border-radius:0;background:transparent}
.tutorial-workspace .topic-unit-list li{border:0!important}
.tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;min-height:142px;padding:20px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-surface-muted);align-content:start}
.tutorial-workspace .topic-outline .topic-unit-link:hover{padding-left:20px;border-color:var(--t-line-strong);background:#fff;box-shadow:var(--t-shadow-hover);transform:translateY(-2px)}
.tutorial-workspace .topic-unit-index{grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;border-radius:9px;background:var(--t-surface-strong);color:var(--t-ink)}
.tutorial-workspace .topic-unit-title{align-items:flex-start;gap:10px}.tutorial-workspace .topic-unit-title small{padding:3px 7px;border:1px solid var(--t-line);border-radius:999px;background:#fff;white-space:nowrap}
.tutorial-workspace .topic-unit-summary{margin-top:7px;line-height:1.65}
.tutorial-workspace .topic-unit-action{grid-column:2;display:flex;align-items:center;gap:7px;margin-top:14px;color:#555651;font-size:12px;font-weight:650}
.tutorial-workspace .topic-unit-action svg{width:14px;height:14px}.tutorial-workspace .topic-unit-link:hover .topic-unit-action svg{transform:translateX(3px)}
.tutorial-workspace .unit-breadcrumb{margin:0 0 14px;padding:12px 16px;border:1px solid var(--t-line);border-radius:10px;background:rgba(255,255,255,.72)}
.tutorial-workspace .unit-detail-hero{padding:clamp(24px,3vw,40px);border:1px solid var(--t-line);border-radius:var(--t-radius-lg);background:linear-gradient(135deg,#fff,#f7f7f4)}
.tutorial-workspace .unit-detail-facts{gap:10px;border:0}.tutorial-workspace .unit-detail-facts>div{border:1px solid var(--t-line)!important;border-radius:12px;background:#fff}
.tutorial-workspace .unit-detail-section{border-radius:var(--t-radius-md)}
.tutorial-workspace .unit-step-list{gap:10px;border:0}.tutorial-workspace .unit-step-list li{min-height:150px;padding:20px!important;border:1px solid var(--t-line)!important;border-radius:12px;background:var(--t-surface-muted)}
.tutorial-workspace .unit-check-section li{border-color:var(--t-line)}
.tutorial-workspace .unit-next-action{border:1px solid var(--t-line);background:var(--t-surface-strong)}
.tutorial-workspace .catalog-filter-bar{padding:20px}.tutorial-workspace .catalog-results{margin-top:16px;padding:22px}
.tutorial-workspace .mobile-filter-toggle{display:none}
.tutorial-workspace .catalog-filter-bar select{background:var(--t-surface-muted)}
.tutorial-workspace .path-modes{gap:10px;margin-top:16px}.tutorial-workspace .path-mode-card{background:#fff}
.tutorial-workspace .doc-collections{gap:12px}.tutorial-workspace .doc-process{padding:clamp(22px,3vw,34px)}

@media(max-width:900px){
  .tutorial-workspace .content-heading{align-items:flex-start;flex-direction:column;gap:22px}
  .tutorial-workspace .stage-map,.tutorial-workspace .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tutorial-workspace .topic-unit-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .tutorial-workspace .route-mini-grid .route-mini-card{min-height:112px}
  .tutorial-workspace .home-panel,.tutorial-workspace .content-panel{padding:14px}
  .tutorial-workspace .mobile-view-nav{margin:-14px -14px 14px;background:#fff}
  .tutorial-workspace .home-heading,.tutorial-workspace .content-heading{padding:22px 18px;border-radius:16px}
  .tutorial-workspace .home-heading h2,.tutorial-workspace .content-heading h2{font-size:28px}
  .tutorial-workspace .home-heading p,.tutorial-workspace .content-heading p{font-size:14px}
  .tutorial-workspace .heading-tags{gap:6px;margin-top:16px}.tutorial-workspace .heading-tags span{padding:4px 8px;font-size:10px}
  .tutorial-workspace .heading-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.tutorial-workspace .heading-actions>button{width:100%;padding-inline:10px}
  .tutorial-workspace .route-facts,.tutorial-workspace .topic-facts{grid-template-columns:1fr;gap:8px}
  .tutorial-workspace .route-facts>div,.tutorial-workspace .topic-facts>div{min-height:0;padding:16px 18px}
  .tutorial-workspace .route-facts span,.tutorial-workspace .topic-facts span{margin-bottom:6px}
  .tutorial-workspace .content-block{margin-top:10px;padding:22px 16px}
  .tutorial-workspace .stage-map,.tutorial-workspace .role-grid{grid-template-columns:1fr}
  .tutorial-workspace .stage-map li,.tutorial-workspace .role-grid article{min-height:0}
  .tutorial-workspace .block-title{align-items:flex-start;flex-direction:column;gap:8px}
  .tutorial-workspace .topic-outline .topic-unit-link{grid-template-columns:42px minmax(0,1fr);min-height:0;padding:16px}
  .tutorial-workspace .topic-outline .topic-unit-link:hover{padding-left:16px;transform:none}
  .tutorial-workspace .topic-unit-title{display:grid}.tutorial-workspace .topic-unit-title small{justify-self:start}
  .tutorial-workspace .unit-detail-hero{padding:22px 18px}
  .tutorial-workspace .unit-step-list{gap:8px}.tutorial-workspace .unit-step-list li{min-height:0}
  .tutorial-workspace .mobile-filter-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;width:100%;margin-top:10px;padding:14px 16px;border:1px solid var(--t-line);border-radius:12px;background:#fff;color:var(--t-ink);text-align:left}
  .tutorial-workspace .mobile-filter-toggle>span{display:flex;align-items:center;gap:8px;font-weight:700}.tutorial-workspace .mobile-filter-toggle>span svg{width:16px;height:16px}
  .tutorial-workspace .mobile-filter-toggle>small{grid-column:1;color:var(--t-muted);font-size:11px}.tutorial-workspace .mobile-filter-toggle>svg{grid-column:2;grid-row:1/3;width:17px;height:17px}
  .tutorial-workspace .catalog-filter-bar{display:none;margin-top:8px}.tutorial-workspace .catalog-filter-bar.mobile-open{display:grid}
  .tutorial-workspace .catalog-results{padding:16px}
}
@media(max-width:480px){
  .tutorial-workspace .route-facts>div,.tutorial-workspace .topic-facts>div{padding:13px 16px}
  .tutorial-workspace .route-facts strong,.tutorial-workspace .topic-facts strong{font-size:13px;line-height:1.5}
  .tutorial-workspace .content-heading{gap:16px}
}

/* V3 high-fidelity tutorial workspace: right content only */
.tutorial-workspace{
  --t-canvas:#edf7f6;
  --t-surface:#fffefa;
  --t-surface-muted:#f2f9f8;
  --t-surface-strong:#dcefed;
  --t-ink:#173331;
  --t-muted:#5c716f;
  --t-line:#cfe1df;
  --t-line-strong:#91b9b5;
  --t-accent:#119492;
  --t-accent-deep:#0b6c6b;
  --t-accent-soft:#dff3f1;
  --t-accent-rgb:17,148,146;
  --t-sand:#b38a49;
  --t-ocean:#496b7b;
  --t-shadow-hover:0 14px 34px rgba(23,80,77,.13);
  background:
    radial-gradient(circle at 92% 4%,rgba(var(--t-accent-rgb),.13),transparent 28%),
    linear-gradient(145deg,#f6fbfa 0%,var(--t-canvas) 48%,#e8f3f2 100%);
}
.tutorial-workspace[data-route="web"]{--t-accent:#347b9d;--t-accent-deep:#285f7a;--t-accent-soft:#e2f0f6;--t-accent-rgb:52,123,157}
.tutorial-workspace[data-route="canvas"]{--t-accent:#bd7944;--t-accent-deep:#8e572f;--t-accent-soft:#f7eadf;--t-accent-rgb:189,121,68}
.tutorial-workspace[data-route="three"]{--t-accent:#6968a8;--t-accent-deep:#4e4d82;--t-accent-soft:#eceafa;--t-accent-rgb:105,104,168}
.tutorial-workspace[data-route="procedural"]{--t-accent:#9b7738;--t-accent-deep:#725729;--t-accent-soft:#f4ecd9;--t-accent-rgb:155,119,56}
.tutorial-workspace[data-route="shader"]{--t-accent:#526e9d;--t-accent-deep:#3b5278;--t-accent-soft:#e7edf7;--t-accent-rgb:82,110,157}
.tutorial-workspace[data-route="data"]{--t-accent:#168b86;--t-accent-deep:#0d6965;--t-accent-soft:#ddf2ef;--t-accent-rgb:22,139,134}
.tutorial-workspace[data-route="creative"]{--t-accent:#b76e62;--t-accent-deep:#8c5048;--t-accent-soft:#f7e8e5;--t-accent-rgb:183,110,98}
.tutorial-workspace[data-route="interaction"]{--t-accent:#4d8972;--t-accent-deep:#376653;--t-accent-soft:#e2f1ea;--t-accent-rgb:77,137,114}
.tutorial-workspace[data-route="motion"]{--t-accent:#a86784;--t-accent-deep:#7e4b62;--t-accent-soft:#f5e6ed;--t-accent-rgb:168,103,132}
.tutorial-workspace[data-route="ai"]{--t-accent:#6079ad;--t-accent-deep:#455c88;--t-accent-soft:#e8edf8;--t-accent-rgb:96,121,173}
.tutorial-workspace[data-route="performance"]{--t-accent:#3f8196;--t-accent-deep:#2d6273;--t-accent-soft:#e2f0f3;--t-accent-rgb:63,129,150}
.tutorial-workspace[data-route="delivery"]{--t-accent:#587d70;--t-accent-deep:#405e54;--t-accent-soft:#e4efeb;--t-accent-rgb:88,125,112}
.tutorial-workspace .home-heading,.tutorial-workspace .content-heading{
  border-color:rgba(var(--t-accent-rgb),.28);
  background:linear-gradient(118deg,#fffefa 0%,#f8fcfb 58%,var(--t-accent-soft) 100%);
  box-shadow:0 10px 30px rgba(var(--t-accent-rgb),.08);
}
.tutorial-workspace .home-heading:after,.tutorial-workspace .content-heading:after{border-color:rgba(var(--t-accent-rgb),.11)}
.tutorial-workspace .home-heading h2,.tutorial-workspace .content-heading h2{color:#153c39}
.tutorial-workspace .content-kicker,.tutorial-workspace .block-kicker{color:var(--t-accent-deep)}
.tutorial-workspace .heading-tags span{border-color:rgba(var(--t-accent-rgb),.26);background:rgba(255,255,255,.78);color:var(--t-accent-deep)}
.tutorial-workspace .content-heading>button,.tutorial-workspace .heading-actions>button,.tutorial-workspace .card-actions button,.tutorial-workspace .unit-detail-hero button,.tutorial-workspace .unit-next-action button{
  border-color:var(--t-accent-deep);background:var(--t-accent-deep);color:#fff;
  box-shadow:0 8px 18px rgba(var(--t-accent-rgb),.18);
}
.tutorial-workspace .card-actions .primary-action{border-color:var(--t-accent-deep);background:var(--t-accent-deep);color:#fff;box-shadow:0 8px 18px rgba(var(--t-accent-rgb),.18)}
.tutorial-workspace .card-actions .primary-action:hover{background:var(--t-accent);transform:translateY(-1px)}
.tutorial-workspace .content-heading>button:hover,.tutorial-workspace .heading-actions>button:hover,.tutorial-workspace .card-actions button:hover,.tutorial-workspace .unit-detail-hero button:hover,.tutorial-workspace .unit-next-action button:hover{border-color:var(--t-accent);background:var(--t-accent);transform:translateY(-1px)}
.tutorial-workspace .heading-actions>.secondary-action{border-color:rgba(var(--t-accent-rgb),.34);background:#fff;color:var(--t-accent-deep);box-shadow:none}
.tutorial-workspace .home-dashboard>article,.tutorial-workspace .home-dashboard>section,.tutorial-workspace .content-block,.tutorial-workspace .path-builder,.tutorial-workspace .path-preview,.tutorial-workspace .docs-policy,.tutorial-workspace .doc-process,.tutorial-workspace .catalog-filter-bar,.tutorial-workspace .catalog-results{border-color:var(--t-line);background:rgba(255,254,250,.94);box-shadow:0 5px 18px rgba(40,91,87,.055)}
.tutorial-workspace .continue-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#fffefa,var(--t-accent-soft))}
.tutorial-workspace .continue-card:before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--t-accent);content:""}
.tutorial-workspace .progress-track{overflow:hidden;border-radius:999px;background:rgba(var(--t-accent-rgb),.14)}
.tutorial-workspace .progress-track span{background:linear-gradient(90deg,var(--t-accent-deep),var(--t-accent))}
.tutorial-workspace .start-options button,.tutorial-workspace .route-mini-card,.tutorial-workspace .path-mode-card,.tutorial-workspace .path-goal-grid button,.tutorial-workspace .lesson-row{border-color:var(--t-line);background:#fffefa}
.tutorial-workspace .start-options button:nth-child(1){border-left:3px solid #119492}.tutorial-workspace .start-options button:nth-child(2){border-left:3px solid #496b7b}.tutorial-workspace .start-options button:nth-child(3){border-left:3px solid #b38a49}.tutorial-workspace .start-options button:nth-child(4){border-left:3px solid #6079ad}
.tutorial-workspace .start-options button:hover,.tutorial-workspace .route-mini-card:hover,.tutorial-workspace .path-mode-card:hover,.tutorial-workspace .path-goal-grid button:hover,.tutorial-workspace .lesson-row:hover{border-color:var(--t-accent);background:var(--t-accent-soft);box-shadow:var(--t-shadow-hover)}
.tutorial-workspace .route-mini-card{border-top:3px solid var(--card-accent,var(--t-accent))!important}
.tutorial-workspace .route-mini-card[data-route="ggb"]{--card-accent:#119492}.tutorial-workspace .route-mini-card[data-route="web"]{--card-accent:#347b9d}.tutorial-workspace .route-mini-card[data-route="canvas"]{--card-accent:#bd7944}.tutorial-workspace .route-mini-card[data-route="three"]{--card-accent:#6968a8}
.tutorial-workspace .route-mini-card span,.tutorial-workspace .route-mini-card:hover span{color:var(--card-accent,var(--t-accent-deep))}
.tutorial-workspace .section-heading-row h2{position:relative;padding-left:14px}.tutorial-workspace .section-heading-row h2:before{position:absolute;inset:2px auto 2px 0;width:3px;border-radius:2px;background:var(--t-accent);content:""}
.tutorial-workspace .route-facts>div,.tutorial-workspace .topic-facts>div{border-color:rgba(var(--t-accent-rgb),.24)!important;background:linear-gradient(150deg,#fffefa,var(--t-accent-soft))}
.tutorial-workspace .route-facts span,.tutorial-workspace .topic-facts span{color:var(--t-accent-deep)}
.tutorial-workspace .stage-map li{position:relative;overflow:hidden;border-color:rgba(var(--t-accent-rgb),.22)!important;background:linear-gradient(155deg,#fffefa,var(--t-accent-soft))}
.tutorial-workspace .stage-map li:before{position:absolute;inset:0 0 auto;height:3px;background:var(--t-accent);content:""}
.tutorial-workspace .stage-map li>span{color:var(--t-accent-deep);font-weight:650}
.tutorial-workspace .stage-map li:hover{border-color:var(--t-accent)!important;background:#fff;box-shadow:var(--t-shadow-hover)}
.tutorial-workspace .role-grid article{border-color:var(--t-line);background:#fffefa}
.tutorial-workspace .role-grid article:nth-child(1){border-top:3px solid var(--t-ocean)}.tutorial-workspace .role-grid article:nth-child(2){border-top:3px solid var(--t-accent)}.tutorial-workspace .role-grid article:nth-child(3){border-top:3px solid var(--t-sand)}.tutorial-workspace .role-grid article:nth-child(4){border-top:3px solid #6689a1}
.tutorial-workspace .role-grid article span{color:var(--t-accent-deep)}
.tutorial-workspace .docs-strip{background:linear-gradient(118deg,#173f3c,#0d6b68);box-shadow:0 14px 30px rgba(12,75,72,.18)}
.tutorial-workspace .topic-outline .topic-unit-link{border-color:rgba(var(--t-accent-rgb),.2);background:linear-gradient(145deg,#fffefa,var(--t-accent-soft))}
.tutorial-workspace .topic-unit-index{background:rgba(var(--t-accent-rgb),.15);color:var(--t-accent-deep)}
.tutorial-workspace .topic-unit-title small{border-color:rgba(var(--t-accent-rgb),.24);color:var(--t-accent-deep)}
.tutorial-workspace .topic-outline .topic-unit-link:hover{border-color:var(--t-accent);background:#fff;box-shadow:var(--t-shadow-hover)}
.tutorial-workspace .unit-breadcrumb{border-color:rgba(var(--t-accent-rgb),.24);background:rgba(255,254,250,.9);color:var(--t-accent-deep)}
.tutorial-workspace .unit-detail-hero{border-color:rgba(var(--t-accent-rgb),.28);background:linear-gradient(120deg,#fffefa 0%,var(--t-accent-soft) 100%);box-shadow:0 10px 30px rgba(var(--t-accent-rgb),.08)}
.tutorial-workspace .unit-detail-facts>div,.tutorial-workspace .unit-detail-section{border-color:var(--t-line)!important;background:#fffefa}
.tutorial-workspace .unit-step-list li{border-color:rgba(var(--t-accent-rgb),.2)!important;background:var(--t-accent-soft)}
.tutorial-workspace .unit-step-list>li>span,.tutorial-workspace .unit-detail-section .block-title span,.tutorial-workspace .unit-next-action span{color:var(--t-accent-deep)}
.tutorial-workspace .unit-next-action{border-color:rgba(var(--t-accent-rgb),.26);background:linear-gradient(100deg,var(--t-accent-soft),#fffefa)}
.tutorial-workspace .catalog-filter-bar select{border-color:var(--t-line);background:#f7fcfb}.tutorial-workspace .catalog-filter-bar select:focus{border-color:var(--t-accent)}
.tutorial-workspace .results-toolbar strong,.tutorial-workspace .lesson-badges span{color:var(--t-accent-deep)}
.tutorial-workspace .path-mode-card.active,.tutorial-workspace .path-goal-grid button.active{border-color:var(--t-accent);background:var(--t-accent-soft);box-shadow:0 0 0 2px rgba(var(--t-accent-rgb),.1)}
.tutorial-workspace .path-builder-steps li.active,.tutorial-workspace .path-stage-list li>span{color:var(--t-accent-deep)}
.tutorial-workspace .doc-collections article:hover,.tutorial-workspace .path-route-recommendations button:hover{border-color:var(--t-accent);background:var(--t-accent-soft)}
@media(max-width:1100px) and (min-width:761px){.tutorial-workspace .home-panel,.tutorial-workspace .content-panel{padding:28px}.tutorial-workspace .home-heading,.tutorial-workspace .content-heading{padding:30px}.tutorial-workspace .route-facts>div,.tutorial-workspace .topic-facts>div{min-height:112px}}

/* GeoGebra overview — page-specific composition derived from its own reference image */
.tutorial-workspace[data-route="ggb"] .ggb-route-heading{min-height:264px;padding-right:44%;background:linear-gradient(112deg,#fffefa 0 54%,rgba(244,252,252,.78) 76%,#e8f7f7 100%)}
.tutorial-workspace[data-route="ggb"] .ggb-route-heading:after{display:none}
.tutorial-workspace[data-route="ggb"] .ggb-route-heading>div:first-child{max-width:680px}
.tutorial-workspace[data-route="ggb"] .ggb-route-heading>button{position:absolute;right:28px;top:28px}
.ggb-hero-geometry{position:absolute;inset:0 0 0 54%;overflow:hidden;border-left:1px solid rgba(17,148,146,.08)}
.ggb-hero-geometry svg{position:absolute;right:-18px;bottom:-4px;width:105%;height:88%}
.ggb-hero-geometry .grid{fill:none;stroke:#bedddb;stroke-width:1;opacity:.52}
.ggb-hero-geometry .arc,.ggb-hero-geometry .triangle,.ggb-hero-geometry .trace{fill:none;stroke:#119492;stroke-width:2}
.ggb-hero-geometry .triangle{stroke:#496b7b}.ggb-hero-geometry .trace{stroke:#6b63b8;stroke-dasharray:8 7}
.ggb-hero-geometry circle{fill:#fff;stroke:#119492;stroke-width:3}.ggb-hero-geometry circle:nth-last-child(2){stroke:#d98534}.ggb-hero-geometry circle:last-child{stroke:#6b63b8}
.ggb-slider{position:absolute;z-index:1;top:48px;left:16%;width:120px;height:4px;border-radius:99px;background:#b8d6d4}.ggb-slider i{position:absolute;left:62%;top:50%;width:15px;height:15px;border-radius:50%;background:#0c8583;transform:translate(-50%,-50%)}
.tutorial-workspace[data-route="ggb"] .route-facts{grid-template-columns:1.25fr 1fr 1fr}
.tutorial-workspace[data-route="ggb"] .route-facts>div{position:relative;min-height:112px;padding-left:66px;background:#fffefa}
.tutorial-workspace[data-route="ggb"] .route-facts>div:before{position:absolute;left:22px;top:38px;width:28px;height:28px;border:1px solid rgba(17,148,146,.28);border-radius:50%;background:#e8f7f5;content:""}
.tutorial-workspace[data-route="ggb"] .route-facts>div:nth-child(2):before{border-radius:5px;box-shadow:inset 0 0 0 7px #fffefa}.tutorial-workspace[data-route="ggb"] .route-facts>div:nth-child(3):before{border-radius:5px;border-bottom-width:5px}
.tutorial-workspace[data-route="ggb"] .ggb-stage-section{position:relative;overflow:hidden}.tutorial-workspace[data-route="ggb"] .ggb-stage-section:before{position:absolute;left:9%;right:9%;top:114px;height:2px;background:linear-gradient(90deg,#119492 0 54%,#73a369 54% 75%,#e5ad45 75%);content:""}
.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map{position:relative;z-index:1}
.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map li{min-height:205px;padding:18px 20px;border:0!important;background:transparent;text-align:center}
.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map li:before{top:12px;left:50%;width:34px;height:34px;border:5px solid #fffefa;border-radius:50%;background:#119492;transform:translateX(-50%)}
.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map li:nth-child(3):before{background:#73a369}.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map li:nth-child(4):before{background:#e5ad45}
.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map li>span{position:relative;z-index:1;margin:1px auto 26px;color:#fff}
.ggb-stage-art{display:block;width:112px;height:66px;margin:0 auto 9px;fill:none;stroke:#168f8c;stroke-width:1.8}.ggb-stage-art .dash{stroke:#6b63b8;stroke-dasharray:6 5}
.tutorial-workspace[data-route="ggb"] .ggb-role-section .role-grid article{position:relative;min-height:164px;padding-right:35%;overflow:hidden;background:linear-gradient(135deg,#fffefa,#f5fbfa)}
.tutorial-workspace[data-route="ggb"] .ggb-role-section .role-grid article:after{position:absolute;right:20px;bottom:22px;width:64px;height:64px;border:1px solid rgba(17,148,146,.44);border-radius:50%;background:radial-gradient(circle at 35% 35%,#119492 0 4px,transparent 5px),linear-gradient(142deg,transparent 47%,rgba(17,148,146,.5) 48% 50%,transparent 51%);content:""}
.tutorial-workspace[data-route="ggb"] .ggb-role-section .role-grid article:nth-child(2):after{border-radius:8px;transform:rotate(8deg)}.tutorial-workspace[data-route="ggb"] .ggb-role-section .role-grid article:nth-child(3):after{border-color:#d29a47;border-radius:50% 50% 12px 50%}.tutorial-workspace[data-route="ggb"] .ggb-role-section .role-grid article:nth-child(4):after{border-color:#6b63b8;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.tutorial-workspace[data-route="ggb"] .docs-strip{background:linear-gradient(102deg,#f7fcfb,#e4f5f3);color:#173331;box-shadow:0 8px 24px rgba(23,80,77,.08)}
.tutorial-workspace[data-route="ggb"] .docs-strip h2{color:#173331}.tutorial-workspace[data-route="ggb"] .docs-strip p{color:#5c716f}.tutorial-workspace[data-route="ggb"] .docs-strip>button{border-color:#0b6c6b;background:#0b6c6b;color:#fff}
@media(max-width:1100px){.tutorial-workspace[data-route="ggb"] .ggb-route-heading{padding-right:34%}.ggb-hero-geometry{inset-left:64%;opacity:.62}}
@media(max-width:760px){.tutorial-workspace[data-route="ggb"] .ggb-route-heading{min-height:0;padding-right:18px;padding-bottom:170px}.tutorial-workspace[data-route="ggb"] .ggb-route-heading>button{position:relative;right:auto;top:auto;margin-top:18px}.ggb-hero-geometry{inset:auto 0 0 0;height:160px;border-left:0;border-top:1px solid rgba(17,148,146,.08)}.tutorial-workspace[data-route="ggb"] .route-facts{grid-template-columns:1fr}.tutorial-workspace[data-route="ggb"] .ggb-stage-section:before{display:none}.tutorial-workspace[data-route="ggb"] .ggb-stage-section .stage-map li{min-height:180px}.tutorial-workspace[data-route="ggb"] .ggb-role-section .role-grid article{min-height:150px}}

/* Production polish: desktop and tablet interaction rhythm */
.tutorial-workspace .content-heading>button,
.tutorial-workspace .heading-actions>button,
.tutorial-workspace .card-actions button,
.tutorial-workspace .docs-strip>button,
.tutorial-workspace .unit-detail-hero button,
.tutorial-workspace .unit-next-action button{
  display:inline-flex;
  min-width:max-content;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.tutorial-workspace button:focus-visible,
.tutorial-workspace a:focus-visible,
.tutorial-workspace select:focus-visible,
.tutorial-workspace input:focus-visible{
  outline:3px solid rgba(var(--t-accent-rgb),.24);
  outline-offset:3px;
}
.tutorial-workspace .home-dashboard>article,
.tutorial-workspace .home-dashboard>section,
.tutorial-workspace .content-block,
.tutorial-workspace .route-facts>div,
.tutorial-workspace .topic-facts>div,
.tutorial-workspace .stage-map li,
.tutorial-workspace .role-grid article,
.tutorial-workspace .topic-unit-link,
.tutorial-workspace .lesson-row,
.tutorial-workspace .path-mode-card,
.tutorial-workspace .path-goal-grid button,
.tutorial-workspace .doc-collections article{
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.tutorial-workspace .route-facts>div:nth-child(2),
.tutorial-workspace .topic-facts>div:nth-child(2){
  background:linear-gradient(150deg,#fffefa,rgba(73,107,123,.1));
}
.tutorial-workspace .route-facts>div:nth-child(3),
.tutorial-workspace .topic-facts>div:nth-child(3){
  background:linear-gradient(150deg,#fffefa,rgba(179,138,73,.11));
}
.tutorial-workspace .start-options button:hover>svg,
.tutorial-workspace .route-mini-card:hover svg,
.tutorial-workspace .topic-unit-link:hover svg,
.tutorial-workspace .lesson-row:hover>button svg,
.tutorial-workspace .collection-action:hover svg{
  transform:translateX(3px);
}
.tutorial-workspace .stage-map li strong,
.tutorial-workspace .role-grid article strong,
.tutorial-workspace .lesson-row h2,
.tutorial-workspace .topic-unit-title>strong{
  color:var(--t-ink);
}
.tutorial-workspace .stage-map li:hover strong,
.tutorial-workspace .role-grid article:hover strong,
.tutorial-workspace .lesson-row:hover h2,
.tutorial-workspace .topic-unit-link:hover .topic-unit-title>strong{
  color:var(--t-accent-deep);
}
.tutorial-workspace .docs-policy span,
.tutorial-workspace .lesson-badges span{
  border:1px solid rgba(var(--t-accent-rgb),.18);
  background:var(--t-accent-soft);
}
.tutorial-workspace .topic-unit-list li:nth-child(3n+1){--unit-rgb:17,148,146;--unit-color:#0b6c6b}
.tutorial-workspace .topic-unit-list li:nth-child(3n+2){--unit-rgb:73,107,123;--unit-color:#355665}
.tutorial-workspace .topic-unit-list li:nth-child(3n){--unit-rgb:179,138,73;--unit-color:#7d5b28}
.tutorial-workspace .topic-outline .topic-unit-list li .topic-unit-link{
  border-top:3px solid rgba(var(--unit-rgb),.7);
  background:linear-gradient(145deg,#fffefa 16%,rgba(var(--unit-rgb),.105));
}
.tutorial-workspace .topic-outline .topic-unit-list li .topic-unit-index{
  background:rgba(var(--unit-rgb),.14);
  color:var(--unit-color);
}
.tutorial-workspace .topic-outline .topic-unit-list li .topic-unit-title small{
  border-color:rgba(var(--unit-rgb),.22);
  color:var(--unit-color);
}
.tutorial-workspace .topic-outline .topic-unit-list li .topic-unit-link:hover{
  border-color:rgba(var(--unit-rgb),.72);
  background:#fff;
  box-shadow:0 14px 30px rgba(var(--unit-rgb),.12);
}
.tutorial-workspace .doc-collections article:nth-child(3n+1){--doc-rgb:17,148,146;--doc-color:#0b6c6b}
.tutorial-workspace .doc-collections article:nth-child(3n+2){--doc-rgb:73,107,123;--doc-color:#355665}
.tutorial-workspace .doc-collections article:nth-child(3n){--doc-rgb:179,138,73;--doc-color:#7d5b28}
.tutorial-workspace .doc-collections article{
  border-top:4px solid rgba(var(--doc-rgb),.72);
  background:linear-gradient(165deg,#fffefa 58%,rgba(var(--doc-rgb),.09));
}
.tutorial-workspace .doc-collections article .doc-head strong,
.tutorial-workspace .doc-collections article .collection-action{
  color:var(--doc-color);
}
.tutorial-workspace .doc-collections article .collection-action{
  border-color:rgb(var(--doc-rgb));
  background:rgb(var(--doc-rgb));
  color:#fff;
  box-shadow:0 8px 18px rgba(var(--doc-rgb),.18);
}
.tutorial-workspace .doc-collections article .collection-action:hover{
  border-color:var(--doc-color);
  background:var(--doc-color);
  color:#fff;
}
.tutorial-workspace .doc-collections article:hover{
  border-color:rgba(var(--doc-rgb),.72);
  background:#fff;
  box-shadow:0 14px 30px rgba(var(--doc-rgb),.12);
}
.tutorial-workspace .path-generate,
.tutorial-workspace .path-preview-actions a{
  border-color:var(--t-accent-deep);
  background:var(--t-accent-deep);
  box-shadow:0 8px 18px rgba(var(--t-accent-rgb),.18);
}
.tutorial-workspace .path-generate:hover,
.tutorial-workspace .path-preview-actions a:hover{
  border-color:var(--t-accent);
  background:var(--t-accent);
}
.tutorial-workspace .path-preview{
  overflow:hidden;
  border-color:rgba(var(--t-accent-rgb),.28);
  background:#fffefa;
  box-shadow:0 14px 34px rgba(var(--t-accent-rgb),.09);
}
.tutorial-workspace .path-preview-heading{
  background:linear-gradient(120deg,var(--t-accent-soft),#fffefa 72%);
}
.tutorial-workspace .path-preview-heading>div:last-child strong{
  color:var(--t-accent-deep);
}
.tutorial-workspace .path-stage-list li{
  position:relative;
  border-color:var(--t-line);
  background:linear-gradient(90deg,rgba(var(--stage-rgb),.105),#fffefa 34%);
  transition:background-color .18s ease,transform .18s ease;
}
.tutorial-workspace .path-stage-list li:nth-child(1){--stage-rgb:17,148,146;--stage-color:#0b6c6b}
.tutorial-workspace .path-stage-list li:nth-child(2){--stage-rgb:73,107,123;--stage-color:#355665}
.tutorial-workspace .path-stage-list li:nth-child(3){--stage-rgb:179,138,73;--stage-color:#7d5b28}
.tutorial-workspace .path-stage-list li:nth-child(4){--stage-rgb:96,121,173;--stage-color:#455c88}
.tutorial-workspace .path-stage-list li:before{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:rgb(var(--stage-rgb));
  content:"";
}
.tutorial-workspace .path-stage-list li>span{
  color:var(--stage-color);
}
.tutorial-workspace .path-stage-list li:hover{
  background:rgba(var(--stage-rgb),.13);
}
.tutorial-workspace .path-route-recommendations{
  background:linear-gradient(120deg,#f8fcfb,var(--t-accent-soft));
}
.tutorial-workspace .path-route-recommendations button:nth-child(1){--recommend-rgb:17,148,146;--recommend-color:#0b6c6b}
.tutorial-workspace .path-route-recommendations button:nth-child(2){--recommend-rgb:73,107,123;--recommend-color:#355665}
.tutorial-workspace .path-route-recommendations button:nth-child(3){--recommend-rgb:179,138,73;--recommend-color:#7d5b28}
.tutorial-workspace .path-route-recommendations button{
  border-top:3px solid rgba(var(--recommend-rgb),.72);
  background:linear-gradient(155deg,#fffefa,rgba(var(--recommend-rgb),.09));
}
.tutorial-workspace .path-route-recommendations button span,
.tutorial-workspace .path-route-recommendations button svg{
  color:var(--recommend-color);
}
.tutorial-workspace .path-route-recommendations button:hover{
  border-color:rgba(var(--recommend-rgb),.72);
  background:#fff;
  box-shadow:0 12px 26px rgba(var(--recommend-rgb),.12);
}
.tutorial-workspace .path-preview-actions{
  border-top:1px solid rgba(var(--t-accent-rgb),.18);
  background:#fffefa;
}
.tutorial-workspace .doc-process ol{
  gap:8px;
  border:0;
}
.tutorial-workspace .doc-process li{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--process-rgb),.24)!important;
  border-radius:10px;
  background:linear-gradient(150deg,#fffefa,rgba(var(--process-rgb),.105));
}
.tutorial-workspace .doc-process li:nth-child(3n+1){--process-rgb:17,148,146;--process-color:#0b6c6b}
.tutorial-workspace .doc-process li:nth-child(3n+2){--process-rgb:73,107,123;--process-color:#355665}
.tutorial-workspace .doc-process li:nth-child(3n){--process-rgb:179,138,73;--process-color:#7d5b28}
.tutorial-workspace .doc-process li:before{
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:rgb(var(--process-rgb));
  content:"";
}
.tutorial-workspace .doc-process li span{
  color:var(--process-color);
  font-weight:700;
}
.tutorial-workspace .doc-process li strong{
  color:var(--t-ink);
}
.tutorial-workspace .results-toolbar button{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid rgba(var(--t-accent-rgb),.24);
  border-radius:8px;
  background:var(--t-accent-soft);
  color:var(--t-accent-deep);
  font-weight:650;
}
.tutorial-workspace .results-toolbar button svg{
  width:15px;
  height:15px;
}
.tutorial-workspace .results-toolbar button:hover{
  border-color:var(--t-accent);
  background:#fff;
}
.tutorial-workspace .empty-state{
  display:grid;
  min-height:260px;
  place-items:center;
  align-content:center;
  gap:8px;
  border-color:rgba(var(--t-accent-rgb),.32);
  background:radial-gradient(circle at 50% 32%,rgba(var(--t-accent-rgb),.14),transparent 38%),linear-gradient(145deg,#fffefa,var(--t-accent-soft));
}
.tutorial-workspace .empty-state>svg{
  width:40px;
  height:40px;
  margin-bottom:4px;
  color:var(--t-accent);
}
.tutorial-workspace .empty-state strong{
  color:var(--t-ink);
  font-size:18px;
}
.tutorial-workspace .empty-state p{
  margin:0;
  color:var(--t-muted);
}
.tutorial-workspace .empty-state button{
  min-height:38px;
  margin-top:8px;
  border-color:var(--t-accent-deep);
  background:var(--t-accent-deep);
  color:#fff;
}
.tutorial-workspace .empty-state button:hover{
  border-color:var(--t-accent);
  background:var(--t-accent);
}
.tutorial-workspace .job-grid button:nth-child(4n+1),
.tutorial-workspace .job-route-overview .route-mini-grid button:nth-child(4n+1),
.tutorial-workspace .role-grid article:nth-child(4n+1){--card-rgb:17,148,146;--card-color:#0b6c6b}
.tutorial-workspace .job-grid button:nth-child(4n+2),
.tutorial-workspace .job-route-overview .route-mini-grid button:nth-child(4n+2),
.tutorial-workspace .role-grid article:nth-child(4n+2){--card-rgb:73,107,123;--card-color:#355665}
.tutorial-workspace .job-grid button:nth-child(4n+3),
.tutorial-workspace .job-route-overview .route-mini-grid button:nth-child(4n+3),
.tutorial-workspace .role-grid article:nth-child(4n+3){--card-rgb:179,138,73;--card-color:#7d5b28}
.tutorial-workspace .job-grid button:nth-child(4n),
.tutorial-workspace .job-route-overview .route-mini-grid button:nth-child(4n),
.tutorial-workspace .role-grid article:nth-child(4n){--card-rgb:96,121,173;--card-color:#455c88}
.tutorial-workspace .job-grid button,
.tutorial-workspace .job-route-overview .route-mini-grid button,
.tutorial-workspace .role-grid article{
  border-top:3px solid rgba(var(--card-rgb),.72);
  background:linear-gradient(155deg,#fffefa 54%,rgba(var(--card-rgb),.105));
}
.tutorial-workspace .job-grid button strong,
.tutorial-workspace .job-grid button span,
.tutorial-workspace .job-route-overview .route-mini-grid button strong,
.tutorial-workspace .job-route-overview .route-mini-grid button span,
.tutorial-workspace .role-grid article span{
  color:var(--card-color);
}
.tutorial-workspace .job-grid button:hover,
.tutorial-workspace .job-route-overview .route-mini-grid button:hover,
.tutorial-workspace .role-grid article:hover{
  border-color:rgba(var(--card-rgb),.72);
  background:#fff;
  box-shadow:0 12px 26px rgba(var(--card-rgb),.12);
  transform:translateY(-2px);
}
.tutorial-workspace .docs-summary div:nth-child(3n+1){--summary-rgb:17,148,146;--summary-color:#0b6c6b}
.tutorial-workspace .docs-summary div:nth-child(3n+2){--summary-rgb:73,107,123;--summary-color:#355665}
.tutorial-workspace .docs-summary div:nth-child(3n){--summary-rgb:179,138,73;--summary-color:#7d5b28}
.tutorial-workspace .docs-summary{
  overflow:hidden;
  gap:1px;
  border:1px solid rgba(var(--t-accent-rgb),.22);
  border-radius:10px;
  background:var(--t-line);
}
.tutorial-workspace .docs-summary div{
  position:relative;
  border:0;
  background:linear-gradient(150deg,#fffefa,rgba(var(--summary-rgb),.095));
  transition:background-color .18s ease;
}
.tutorial-workspace .docs-summary div:before{
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:rgb(var(--summary-rgb));
  content:"";
}
.tutorial-workspace .docs-summary div strong{
  color:var(--summary-color);
}
.tutorial-workspace .docs-summary div:hover{
  background:#fff;
}
.tutorial-workspace .unit-step-list li:nth-child(1){--step-rgb:17,148,146;--step-color:#0b6c6b}
.tutorial-workspace .unit-step-list li:nth-child(2){--step-rgb:73,107,123;--step-color:#355665}
.tutorial-workspace .unit-step-list li:nth-child(3){--step-rgb:179,138,73;--step-color:#7d5b28}
.tutorial-workspace .unit-step-list{
  gap:10px;
  border:0;
}
.tutorial-workspace .unit-step-list li{
  position:relative;
  overflow:hidden;
  padding:20px!important;
  border:1px solid rgba(var(--step-rgb),.24)!important;
  border-radius:12px;
  background:linear-gradient(150deg,#fffefa,rgba(var(--step-rgb),.105));
}
.tutorial-workspace .unit-step-list li:before{
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:rgb(var(--step-rgb));
  content:"";
}
.tutorial-workspace .unit-step-list>li>span{
  color:var(--step-color);
  font-weight:700;
}
.tutorial-workspace .unit-step-list li strong{
  color:var(--t-ink);
}
.tutorial-workspace .unit-check-section ul{
  overflow:hidden;
  gap:1px;
  border:1px solid rgba(var(--t-accent-rgb),.18);
  border-radius:10px;
  background:var(--t-line);
}
.tutorial-workspace .unit-check-section li{
  min-height:58px;
  padding:10px 16px!important;
  border:0!important;
  background:#fffefa;
}
.tutorial-workspace .unit-check-section li:nth-child(4n+2),
.tutorial-workspace .unit-check-section li:nth-child(4n+3){
  background:var(--t-accent-soft);
}
.tutorial-workspace .unit-check-section li svg,
.tutorial-workspace .unit-check-section li .iconify{
  color:var(--t-accent-deep);
}
.tutorial-workspace .lesson-row[data-format="方法教程"]{--lesson-rgb:17,148,146;--lesson-color:#0b6c6b}
.tutorial-workspace .lesson-row[data-format="实战项目"]{--lesson-rgb:73,107,123;--lesson-color:#355665}
.tutorial-workspace .lesson-row[data-format="案例拆解"]{--lesson-rgb:179,138,73;--lesson-color:#7d5b28}
.tutorial-workspace .lesson-row[data-format="配套练习"]{--lesson-rgb:96,121,173;--lesson-color:#455c88}
.tutorial-workspace .lesson-row[data-format="官方资料译注"]{--lesson-rgb:88,125,112;--lesson-color:#405e54}
.tutorial-workspace .lesson-row{
  overflow:hidden;
  border-top:4px solid rgba(var(--lesson-rgb),.72);
  background:linear-gradient(165deg,#fffefa 58%,rgba(var(--lesson-rgb),.09));
}
.tutorial-workspace .lesson-row .lesson-badges span:first-child{
  border-color:rgba(var(--lesson-rgb),.24);
  background:rgba(var(--lesson-rgb),.13);
  color:var(--lesson-color);
}
.tutorial-workspace .lesson-row>button{
  border-color:rgb(var(--lesson-rgb));
  background:rgb(var(--lesson-rgb));
  color:#fff;
  box-shadow:0 8px 18px rgba(var(--lesson-rgb),.17);
}
.tutorial-workspace .lesson-row>button:hover{
  border-color:var(--lesson-color);
  background:var(--lesson-color);
}
.tutorial-workspace .lesson-row:hover{
  border-color:rgba(var(--lesson-rgb),.72);
  background:#fff;
  box-shadow:0 14px 30px rgba(var(--lesson-rgb),.12);
}
.tutorial-workspace .catalog-load-more{
  border-color:rgba(var(--t-accent-rgb),.28);
  background:linear-gradient(90deg,#fffefa,var(--t-accent-soft),#fffefa);
  color:var(--t-accent-deep);
}
.tutorial-workspace .catalog-load-more:hover{
  border-color:var(--t-accent);
  background:var(--t-accent-soft);
  box-shadow:0 8px 20px rgba(var(--t-accent-rgb),.1);
}
@media(max-width:1100px) and (min-width:761px){
  .tutorial-workspace .topic-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tutorial-workspace .topic-facts>div{
    min-height:118px;
    border-bottom:0;
  }
  .tutorial-workspace .path-modes{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tutorial-workspace .path-mode-card{
    min-height:142px;
    padding:18px;
  }
  .tutorial-workspace .doc-collections{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tutorial-workspace .doc-collections article{
    min-height:350px;
  }
  .tutorial-workspace .doc-collections article:last-child:nth-child(odd){
    grid-column:1/-1;
    min-height:280px;
  }
}
@media(prefers-reduced-motion:reduce){
  .tutorial-workspace *,
  .tutorial-workspace *:before,
  .tutorial-workspace *:after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

/* 学习路径定妆图：保持真实功能，只重组信息层级与计划预览节奏。 */
.tutorial-workspace [data-panel="paths"]{
  --path-line:rgba(50,119,114,.2);
  --path-surface:rgba(255,255,255,.96);
  --path-muted:#607078;
}
.tutorial-workspace [data-panel="paths"] .path-heading{
  min-height:174px;
  display:flex;
  align-items:center;
  padding:34px 42px;
  border:1px solid rgba(17,148,146,.24);
  border-radius:16px;
  background:
    url('/images/tutorials/home-water-loop.webp') right top/auto 174px no-repeat,
    linear-gradient(112deg,#fff 0%,#fbfdff 58%,#effbfc 100%);
  box-shadow:0 10px 30px rgba(55,105,119,.055);
}
.tutorial-workspace [data-panel="paths"] .path-heading h2{
  margin:0 0 14px;
  color:#0a1d22;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.045em;
}
.tutorial-workspace [data-panel="paths"] .path-heading p{
  margin:0;
  color:var(--path-muted);
  font-size:15px;
}
.tutorial-workspace [data-panel="paths"] .path-modes{
  gap:14px;
  margin-top:0;
  padding:22px 0;
}
.tutorial-workspace [data-panel="paths"] .path-mode-card{
  min-height:124px;
  grid-template-columns:30px minmax(0,1fr);
  grid-template-rows:auto auto auto;
  gap:5px 12px;
  padding:18px 22px;
  border-color:var(--path-line);
  border-radius:12px;
  background:#fffefa;
  box-shadow:0 8px 22px rgba(24,75,72,.04);
}
.tutorial-workspace [data-panel="paths"] .path-mode-card>span.iconify:first-child{
  grid-column:1 !important;
  grid-row:1/4 !important;
  display:block;
  width:22px;
  height:22px;
  margin-top:2px;
}
.tutorial-workspace [data-panel="paths"] .path-mode-card>span:not(.iconify){
  display:block;
  grid-column:2;
  grid-row:1;
  color:var(--path-muted);
  font-size:11px;
}
.tutorial-workspace [data-panel="paths"] .path-mode-card>strong{
  grid-column:2;
  grid-row:2;
  font-size:17px;
}
.tutorial-workspace [data-panel="paths"] .path-mode-card>small{
  grid-column:2;
  grid-row:3;
  font-size:12px;
}
.tutorial-workspace [data-panel="paths"] .path-mode-card.active{
  border-color:#119492;
  background:linear-gradient(145deg,#f0fbfa,#e0f5f3);
  box-shadow:0 0 0 2px rgba(17,148,146,.08);
}
.tutorial-workspace [data-panel="paths"] .path-builder{
  grid-template-columns:180px minmax(0,1fr);
  border-color:var(--path-line);
  border-radius:16px;
  background:var(--path-surface);
  box-shadow:0 10px 28px rgba(24,75,72,.055);
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps{
  padding:24px 22px;
  border-right-color:var(--path-line);
  background:linear-gradient(180deg,#fbfefd,#f5fbfa);
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps ol{
  position:relative;
  gap:8px;
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps ol:before{
  position:absolute;
  top:23px;
  bottom:23px;
  left:8px;
  width:1px;
  background:repeating-linear-gradient(to bottom,rgba(17,148,146,.35) 0 4px,transparent 4px 8px);
  content:"";
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps li{
  position:relative;
  min-height:44px;
  grid-template-columns:30px 1fr;
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps li span{
  z-index:1;
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border:1px solid rgba(17,148,146,.4);
  border-radius:50%;
  background:#fff;
  color:transparent;
  font-size:0;
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps li span:after{
  width:6px;
  height:6px;
  border-radius:50%;
  background:transparent;
  content:"";
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps li.active span:after{
  background:#119492;
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps li strong{
  font-size:13px;
}
.tutorial-workspace [data-panel="paths"] .path-builder-steps>p{
  margin-top:22px;
  padding-top:18px;
}
.tutorial-workspace [data-panel="paths"] .path-builder-form{
  padding:24px;
}
.tutorial-workspace [data-panel="paths"] .path-form-heading h2{
  margin-top:6px;
  font-size:24px;
}
.tutorial-workspace [data-panel="paths"] .path-goal-grid{
  gap:10px;
  margin:18px 0;
}
.tutorial-workspace [data-panel="paths"] .path-goal-grid button{
  min-height:50px;
  padding:10px 14px;
  border-color:var(--path-line);
  border-radius:9px;
  background:#fffefa;
}
.tutorial-workspace [data-panel="paths"] .path-goal-grid button.active{
  border-color:#119492;
  background:#e6f6f4;
  box-shadow:none;
}
.tutorial-workspace [data-panel="paths"] .path-conditions{
  gap:12px;
  padding-top:18px;
  border-top-color:var(--path-line);
}
.tutorial-workspace [data-panel="paths"] .path-conditions select{
  height:40px;
  border-color:var(--path-line);
  border-radius:8px;
  background:#fff;
}
.tutorial-workspace [data-panel="paths"] .path-generate{
  min-height:42px;
  margin-top:18px;
  border-radius:7px;
  background:#087b79;
}
.tutorial-workspace [data-panel="paths"] .path-preview{
  position:relative;
  margin-top:16px;
  border-color:var(--path-line);
  border-radius:16px;
  background:var(--path-surface);
  box-shadow:0 12px 30px rgba(24,75,72,.06);
}
.tutorial-workspace [data-panel="paths"] .path-preview-heading{
  min-height:116px;
  padding:20px 22px;
  border-bottom-color:var(--path-line);
  background:linear-gradient(110deg,#eef9f7,#fff 70%);
}
.tutorial-workspace [data-panel="paths"] .path-preview-heading h2{
  margin:4px 0;
  font-size:24px;
}
.tutorial-workspace [data-panel="paths"] .path-preview-actions{
  align-self:center;
  padding:0;
  border:0;
  background:transparent;
}
.tutorial-workspace [data-panel="paths"] .path-preview-actions button,
.tutorial-workspace [data-panel="paths"] .path-preview-actions a{
  min-height:40px;
  border-radius:7px;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:26px 20px 22px;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list li{
  min-width:0;
  min-height:168px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:44px auto 1fr auto;
  align-items:start;
  gap:5px;
  padding:0 16px;
  border:0;
  border-right:1px solid var(--path-line);
  background:transparent;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list li:last-child{
  border-right:0;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list li:before{
  inset:19px -16px auto 34px;
  width:auto;
  height:1px;
  background:repeating-linear-gradient(to right,rgba(var(--stage-rgb),.42) 0 5px,transparent 5px 9px);
}
.tutorial-workspace [data-panel="paths"] .path-stage-list li:last-child:before{
  display:none;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list li>span{
  z-index:1;
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid rgba(var(--stage-rgb),.55);
  border-radius:50%;
  background:#fff;
  font-size:13px;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list strong{
  color:#0a1d22;
  font-size:15px;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list p{
  margin-top:5px;
  font-size:12px;
  line-height:1.55;
}
.tutorial-workspace [data-panel="paths"] .path-stage-list small{
  align-self:end;
  color:var(--stage-color);
  font-size:11px;
  text-align:left;
}
.tutorial-workspace [data-panel="paths"] .path-route-recommendations{
  padding:18px 20px 20px;
  border-top:1px solid var(--path-line);
  border-bottom:0;
  background:#fbfefd;
}
.tutorial-workspace [data-panel="paths"] .path-route-heading{
  margin-bottom:10px;
}
.tutorial-workspace [data-panel="paths"] .path-route-recommendations button{
  min-height:58px;
  border:1px solid var(--path-line);
  border-top-width:1px;
  background:#fff;
}
.tutorial-workspace [data-panel="paths"] .path-route-recommendations button:hover{
  border-color:#119492;
  background:#f2fbfa;
}
@media(max-width:1280px) and (min-width:761px){
  .tutorial-workspace [data-panel="paths"] .path-heading{
    min-height:156px;
    padding:30px 34px;
  }
  .tutorial-workspace [data-panel="paths"] .path-builder{
    grid-template-columns:156px minmax(0,1fr);
  }
  .tutorial-workspace [data-panel="paths"] .path-stage-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 0;
  }
  .tutorial-workspace [data-panel="paths"] .path-stage-list li:nth-child(2){
    border-right:0;
  }
  .tutorial-workspace [data-panel="paths"] .path-stage-list li:nth-child(2):before{
    display:none;
  }
}
@media(max-width:760px){
  .tutorial-workspace [data-panel="paths"] .path-heading{
    min-height:190px;
    padding:28px 22px;
    background-size:auto 190px,auto;
  }
  .tutorial-workspace [data-panel="paths"] .path-heading h2{
    max-width:300px;
    font-size:34px;
  }
  .tutorial-workspace [data-panel="paths"] .path-mode-card{
    min-height:92px;
  }
  .tutorial-workspace [data-panel="paths"] .path-builder-steps ol:before{
    display:none;
  }
  .tutorial-workspace [data-panel="paths"] .path-stage-list{
    grid-template-columns:1fr;
    gap:0;
  }
  .tutorial-workspace [data-panel="paths"] .path-stage-list li{
    min-height:146px;
    border-right:0;
    border-bottom:1px solid var(--path-line);
  }
  .tutorial-workspace [data-panel="paths"] .path-stage-list li:before{
    display:none;
  }
  .tutorial-workspace [data-panel="paths"] .path-preview-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .tutorial-workspace [data-panel="paths"] .path-preview-actions{
    width:100%;
  }
}

/* 最终级联：路线总览与子主题详情统一服从批量定妆几何。 */
.tutorial-workspace [data-panel="routes"] .content-heading{min-height:244px;align-items:center;padding:34px 38px;border:1px solid rgba(17,148,146,.24);border-radius:16px;background:url('/images/tutorials/home-water-loop.webp') right top/auto 244px no-repeat,linear-gradient(112deg,#fff 0%,#fbfdff 58%,#effbfc 100%);box-shadow:0 10px 30px rgba(55,105,119,.055)}
.tutorial-workspace [data-panel="routes"] .content-heading>div:first-child{max-width:min(780px,72%)}
.tutorial-workspace [data-panel="routes"] .content-heading h2{margin:8px 0 12px;font-size:clamp(36px,3.1vw,46px);line-height:1.08;letter-spacing:-.045em}
.tutorial-workspace [data-panel="routes"] .heading-tags{margin-top:22px}
.tutorial-workspace [data-panel="routes"] .route-facts,.tutorial-workspace [data-panel="routes"] .topic-facts{gap:10px;margin-top:16px;border:0;border-radius:0;background:transparent}
.tutorial-workspace [data-panel="routes"] .route-facts>div,.tutorial-workspace [data-panel="routes"] .topic-facts>div{min-height:126px;padding:22px;border:1px solid rgba(50,119,114,.2)!important;border-radius:12px;background:linear-gradient(145deg,#fffefa,#f4fbfa);box-shadow:0 8px 22px rgba(24,75,72,.035)}
.tutorial-workspace [data-panel="routes"] .content-block{margin-top:16px;padding:30px;border:1px solid rgba(50,119,114,.2);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(24,75,72,.045)}
.tutorial-workspace [data-panel="routes"] .stage-map{overflow:hidden;border-color:rgba(50,119,114,.2);border-radius:12px}
.tutorial-workspace [data-panel="routes"] .stage-map li{min-height:160px;border-color:rgba(50,119,114,.2);background:linear-gradient(155deg,#fff,#f8fcfb)}
.tutorial-workspace [data-panel="routes"] .role-grid{gap:10px}
.tutorial-workspace [data-panel="routes"] .role-grid article{min-height:174px;border-color:rgba(50,119,114,.2);border-radius:12px;background:#fffefa}
.tutorial-workspace [data-panel="routes"] .docs-strip{align-items:center;border-color:rgba(50,119,114,.2);background:linear-gradient(110deg,#eef9f7,#fff 72%);color:#0a1d22;box-shadow:0 10px 28px rgba(24,75,72,.045)}
.tutorial-workspace [data-panel="routes"] .docs-strip h2{color:#0a1d22}.tutorial-workspace [data-panel="routes"] .docs-strip p{color:#607078}
.tutorial-workspace [data-panel="routes"] .docs-strip>button{border-color:#087b79;background:#087b79;color:#fff}
.tutorial-workspace [data-panel="routes"] .topic-outline{padding:28px 30px 30px}
.tutorial-workspace [data-panel="routes"] .topic-unit-list{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;border:1px solid rgba(50,119,114,.2);border-radius:12px;background:#fff}
.tutorial-workspace [data-panel="routes"] .topic-unit-list li+li{border-top:1px solid rgba(50,119,114,.2)!important}
.tutorial-workspace [data-panel="routes"] .topic-outline .topic-unit-list li .topic-unit-link{grid-template-columns:48px minmax(0,1fr) max-content;grid-template-rows:auto;min-height:82px;padding:12px 18px;border:0!important;border-radius:0;background:#fff;box-shadow:none;align-items:center}
.tutorial-workspace [data-panel="routes"] .topic-outline .topic-unit-list li .topic-unit-link:hover{padding-left:22px;border:0!important;background:#f2fbfa;box-shadow:none;transform:none}
.tutorial-workspace [data-panel="routes"] .topic-unit-index{grid-row:auto;width:34px;height:34px;border-radius:50%}
.tutorial-workspace [data-panel="routes"] .topic-unit-summary{margin-top:3px;white-space:normal}
.tutorial-workspace [data-panel="routes"] .topic-unit-action{grid-column:3;margin-top:0}
@media(max-width:1100px){.tutorial-workspace [data-panel="routes"] .content-heading{min-height:220px;padding:30px}.tutorial-workspace [data-panel="routes"] .content-heading>div:first-child{max-width:70%}.tutorial-workspace [data-panel="routes"] .stage-map,.tutorial-workspace [data-panel="routes"] .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tutorial-workspace [data-panel="routes"] .content-heading{min-height:0;padding:24px 20px;background-size:auto 210px,auto}.tutorial-workspace [data-panel="routes"] .content-heading>div:first-child{max-width:100%}.tutorial-workspace [data-panel="routes"] .content-heading h2{font-size:34px}.tutorial-workspace [data-panel="routes"] .content-block{padding:22px 18px}.tutorial-workspace [data-panel="routes"] .topic-outline .topic-unit-link{grid-template-columns:42px minmax(0,1fr);padding:14px 12px}.tutorial-workspace [data-panel="routes"] .topic-unit-action{grid-column:2;margin-top:6px}}

/* GeoGebra final cascade: the generic batch route skin must not cover its independent design. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading{min-height:264px;padding:34px 44% 34px 38px;background:linear-gradient(112deg,#fffefa 0 54%,rgba(244,252,252,.86) 72%,#e5f6f5 100%)}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading>div:first-child{z-index:3;max-width:680px}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading>button{z-index:4;position:absolute;right:28px;top:28px}
.tutorial-workspace[data-route="ggb"] .ggb-hero-geometry{position:absolute;z-index:2;inset:0 0 0 54%;width:auto;max-width:none;height:auto;opacity:1}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .route-facts>div{min-height:112px;padding:22px 22px 22px 74px!important;background:#fffefa}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-stage-section .stage-map{overflow:visible;border:0;border-radius:0}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-stage-section .stage-map li{min-height:205px;border:0!important;background:transparent}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-role-section .role-grid article{min-height:164px;padding-right:35%;background:linear-gradient(135deg,#fffefa,#f5fbfa)}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .docs-strip{background:linear-gradient(102deg,#f7fcfb,#e4f5f3);color:#173331}
@media(max-width:1100px) and (min-width:761px){.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading{padding-right:36%}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading>div:first-child{max-width:66%}.tutorial-workspace[data-route="ggb"] .ggb-hero-geometry{inset:0 0 0 58%}}
@media(max-width:760px){.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading{min-height:0;padding:24px 20px 170px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading>div:first-child{max-width:100%}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-route-heading>button{position:relative;right:auto;top:auto}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .route-facts>div{padding:16px 18px 16px 64px!important}}

/* GeoGebra topic 01 — first-use workbench, designed from its own reference image. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-heading{min-height:176px;padding:30px 34px;background:#fffefa}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-heading:after{display:none}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-heading>div:first-child{max-width:720px}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-heading h2{font-size:clamp(34px,3vw,44px)}
.ggb-intro-dashboard{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(245px,.85fr);gap:14px;margin-top:16px}
.ggb-intro-workbench{display:grid;grid-template-columns:29% 43% 28%;grid-template-rows:48px 1fr 44px;min-height:430px;overflow:hidden;border:1px solid #bcd9d7;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(23,80,77,.08)}
.ggb-tool-row{grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:7px 10px;border-bottom:1px solid #d8e5e4;background:#fbfdfd}.ggb-tool-row span{display:grid;min-width:31px;height:31px;padding:0 6px;place-items:center;border:1px solid #d7e1e1;border-radius:5px;color:#284a50;font-size:12px}.ggb-tool-row span.active{border-color:#2f63d7;box-shadow:0 0 0 2px rgba(47,99,215,.12)}.ggb-tool-row i{flex:1;border-top:1px solid #d7e4e3}
.ggb-intro-workbench em{display:inline-grid;width:22px;height:22px;margin-right:5px;place-items:center;border-radius:50%;background:#0d7d7b;color:#fff;font-style:normal;font-size:11px}
.ggb-object-panel,.ggb-property-panel{padding:14px;border-right:1px solid #d8e5e4;color:#294c52}.ggb-object-panel b,.ggb-property-panel b,.ggb-drawing-panel>b{display:block;margin-bottom:14px;color:#0b6c6b;font-size:12px}.ggb-object-panel p{display:flex;align-items:center;gap:8px;margin:0 -14px;padding:7px 14px;border-top:1px solid #edf2f2;font-size:11px}.ggb-object-panel i{width:10px;height:10px;border-radius:50%;background:#70808a}.ggb-object-panel i.violet{background:#7b72d6}.ggb-object-panel i.blue{background:#3f73d6}.ggb-object-panel i.green{background:#65b894}
.ggb-drawing-panel{position:relative;overflow:hidden;padding-top:14px;background-color:#fff;background-image:linear-gradient(#e9efef 1px,transparent 1px),linear-gradient(90deg,#e9efef 1px,transparent 1px);background-size:32px 32px}.ggb-drawing-panel>b{position:relative;z-index:2;margin-left:14px}.ggb-drawing-panel svg{position:absolute;inset:42px 0 0;width:100%;height:calc(100% - 42px)}.ggb-drawing-panel .grid{fill:none;stroke:#dfe9e8;stroke-width:1}.ggb-drawing-panel .axis{fill:none;stroke:#75898a;stroke-width:1.4}.ggb-drawing-panel .line{fill:none;stroke:#21424a;stroke-width:2}.ggb-drawing-panel .ring{fill:rgba(117,101,210,.06);stroke:#7565d2;stroke-width:2}.ggb-drawing-panel circle{fill:#3d6ddd;stroke:#fff;stroke-width:2}.ggb-drawing-panel circle.orange{fill:#f29c3c}.ggb-drawing-panel .drag{fill:none;stroke:#10a080;stroke-width:2;stroke-dasharray:7 5}
.ggb-property-panel{border-right:0}.ggb-property-panel>span{display:block;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid #d8e5e4;color:#567072;font-size:10px}.ggb-property-panel label{display:grid;gap:4px;margin:9px 0;color:#607273;font-size:10px}.ggb-property-panel input{width:100%;height:28px;padding:0 7px;border:1px solid #d8e3e2;border-radius:4px;background:#fafcfc;color:#294247;font-size:10px}.ggb-property-panel .color-choice{grid-template-columns:auto 20px 20px 20px;align-items:center}.ggb-property-panel .color-choice i{width:18px;height:18px;border-radius:4px;background:#7b59c8}.ggb-property-panel .color-choice i:nth-child(3){background:#13a09c}.ggb-property-panel .color-choice i:nth-child(4){background:#f29c3c}
.ggb-intro-workbench footer{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:7px 10px;border-top:1px solid #d8e5e4;background:#fbfdfd}.ggb-intro-workbench footer span{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #dce8e7;border-radius:999px;color:#557073;font-size:10px}.ggb-intro-workbench footer b{display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:#0d7d7b;color:#fff}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-intro-dashboard>.topic-facts{display:grid;grid-template-columns:1fr;align-self:stretch;gap:0!important;margin:0;overflow:hidden;border:1px solid #cfe1df;border-radius:16px;background:#fff}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-intro-dashboard>.topic-facts>div{min-height:0;padding:22px!important;border:0!important;border-bottom:1px solid #dbe7e6!important;border-radius:0!important;background:#fff;box-shadow:none}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-intro-dashboard>.topic-facts>div:last-child{border-bottom:0!important}.ggb-intro-dashboard>.topic-facts span{position:relative;padding-left:34px;font-size:12px}.ggb-intro-dashboard>.topic-facts span:before{position:absolute;left:0;top:-6px;display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:#e5f5f2;color:#0b7875;content:"✓"}.ggb-intro-dashboard>.topic-facts>div:nth-child(2) span:before{content:"◆"}.ggb-intro-dashboard>.topic-facts>div:nth-child(3) span:before{background:#fff2d9;color:#b77a18;content:"★"}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-outline{padding:26px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-outline .topic-unit-list li .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 70px 1fr auto;min-height:254px;padding:16px;border:1px solid #cee0de!important;border-radius:12px;background:#fff;align-items:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li:not(:nth-child(3n)):after{position:absolute;z-index:2;right:-8px;top:50%;color:#22a19b;content:"→"}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li{position:relative}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-index{grid-column:1;grid-row:1;width:34px;height:34px}.ggb-intro-unit-icon{grid-column:1/-1;grid-row:2;display:grid;width:68px;height:58px;margin:6px auto 4px;place-items:center;border-radius:12px;background:linear-gradient(145deg,#edf8f7,#fff3e4);color:#0b8581}.ggb-intro-unit-icon svg{width:34px;height:34px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-copy{grid-column:1/-1;grid-row:3}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-title{display:grid;gap:5px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-title small{justify-self:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-action{grid-column:1/-1;grid-row:4;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #e1e9e8}
@media(max-width:1100px){.ggb-intro-dashboard{grid-template-columns:1fr}.ggb-intro-dashboard>.topic-facts{grid-template-columns:repeat(3,1fr)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-intro-dashboard>.topic-facts>div{border-right:1px solid #dbe7e6!important;border-bottom:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li:after{display:none}}
@media(max-width:760px){.ggb-intro-workbench{grid-template-columns:1fr;grid-template-rows:auto}.ggb-tool-row,.ggb-intro-workbench footer{grid-column:1}.ggb-object-panel,.ggb-property-panel{border-right:0;border-bottom:1px solid #d8e5e4}.ggb-drawing-panel{min-height:280px}.ggb-intro-dashboard>.topic-facts{grid-template-columns:1fr}.tutorial-workspace[data-route="ggb"] [data-panel="routes"] .ggb-intro-dashboard>.topic-facts>div{border-right:0!important;border-bottom:1px solid #dbe7e6!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:1fr}}

/* GeoGebra topic 02 — model relationship microscope, independently composed. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-heading{min-height:184px;padding:30px 34px;background:linear-gradient(110deg,#fffefa,#f7fbff)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-heading:after{display:none}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-heading>div:first-child{max-width:720px}
.ggb-object-page-body{display:grid;gap:14px;margin-top:16px}.ggb-object-lab{display:grid;grid-template-columns:180px minmax(300px,1.1fr) minmax(270px,.9fr);grid-template-rows:44px 1fr;min-height:390px;overflow:hidden;border:1px solid #c8dcda;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(31,85,82,.08)}.ggb-object-lab>header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #dbe7e6;color:#153c39}.ggb-object-lab>header span{font-weight:750}.ggb-object-lab>header span i{display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#1da09b}.ggb-object-lab>header strong{color:#d87537;font-size:11px}
.ggb-command-stack{display:grid;align-content:start;gap:5px;padding:16px;border-right:1px solid #dbe7e6;background:#fbfdfd}.ggb-command-stack b,.ggb-linked-views>b{margin-bottom:6px;color:#0b7471;font-size:12px}.ggb-command-stack code{padding:7px 8px;border:1px solid #e0e9e8;border-radius:6px;background:#fff;color:#456064;font-size:10px}.ggb-command-stack code.active{border-color:#e6a173;background:#fff5ec;color:#9d4e22;box-shadow:0 0 0 2px rgba(230,161,115,.13)}
.ggb-dependency-map{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(34,158,151,.07),transparent 55%)}.ggb-dependency-map svg{position:absolute;inset:0;width:100%;height:100%}.ggb-dependency-map svg path{fill:none;stroke:#82aaa7;stroke-width:1.5;marker-end:url(#ggbArrow)}.ggb-dependency-map .node{position:absolute;z-index:2;display:grid;width:52px;height:52px;place-items:center;border:1px solid #a6c6c4;border-radius:50%;background:#fff;color:#0a6f6d;font-size:17px;box-shadow:0 7px 15px rgba(36,91,88,.1)}.ggb-dependency-map .free{border-color:#8eb8eb;background:#eaf3ff;color:#2b66ad}.ggb-dependency-map .a{left:7%;top:15%}.ggb-dependency-map .b{left:7%;bottom:14%}.ggb-dependency-map .focus{left:43%;top:43%;border-color:#e79a69;background:#fff0e6;color:#bb5f26}.ggb-dependency-map .line{right:9%;top:11%;border-color:#a99be4;background:#f1edff;color:#6856bd}.ggb-dependency-map .circle{right:9%;top:43%;border-color:#84c7a5;background:#e9f8f0;color:#34845d}.ggb-dependency-map .function{right:9%;bottom:8%;width:62px;height:62px;border-color:#e3b562;background:#fff7df;color:#aa7414;font-size:13px}.ggb-dependency-map small{position:absolute;color:#65807f;font-size:10px}.ggb-dependency-map .label-free{left:7%;top:5%}.ggb-dependency-map .label-dependent{left:41%;top:31%;color:#c66a32}
.ggb-linked-views{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:8px;padding:14px;background:#f8fbfb}.ggb-linked-views>b{grid-column:1/-1}.ggb-linked-views>div{overflow:hidden;padding:8px;border:1px solid #d6e4e3;border-radius:8px;background:#fff;color:#536d70;font-size:9px}.ggb-linked-views>div>span{display:block;margin-bottom:5px;color:#0c7471;font-weight:750}.ggb-linked-views p{margin:3px 0}.ggb-linked-views p i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#5b92d9}.ggb-linked-views p.active{color:#d06e32}.ggb-linked-views p.active i{background:#ed8b45}.ggb-linked-views .view-plot svg{width:100%;height:58px}.ggb-linked-views .view-plot path{fill:none;stroke:#759191;stroke-width:1}.ggb-linked-views .view-plot circle{fill:#f08845;stroke:#fff;stroke-width:2}.ggb-linked-views .view-solid i{display:block;width:58px;height:44px;margin:auto;border-radius:50% 50% 8px 8px;background:linear-gradient(135deg,#19a39c,#0b5f70);clip-path:polygon(50% 0,100% 100%,0 100%)}
.ggb-object-page-body>.topic-facts{margin-top:0}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#eef9f7)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#f1f4fb)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#fff7e8)}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-outline{padding:26px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 62px 1fr auto;min-height:248px;padding:15px;border:1px solid #cee0de!important;border-radius:12px;background:#fff;align-items:start}.ggb-object-unit-icon{grid-column:1/-1;grid-row:2;display:grid;width:66px;height:54px;margin:5px auto;place-items:center;border:1px solid #dbe8e7;border-radius:50% 12px 50% 12px;background:#f1f9f8;color:#0b817d}.ggb-object-unit-icon svg{width:31px;height:31px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-copy{grid-column:1/-1;grid-row:3}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-title{display:grid;gap:5px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-title small{justify-self:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-action{grid-column:1/-1;grid-row:4;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #e1e9e8}
@media(max-width:1100px){.ggb-object-lab{grid-template-columns:170px 1fr;grid-template-rows:44px 330px auto}.ggb-linked-views{grid-column:1/-1;grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr}.ggb-linked-views>b{grid-column:1/-1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ggb-object-lab{grid-template-columns:1fr;grid-template-rows:auto}.ggb-command-stack{border-right:0;border-bottom:1px solid #dbe7e6}.ggb-dependency-map{min-height:330px}.ggb-linked-views{grid-column:1;grid-template-columns:1fr 1fr}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:1fr}}
.ggb-dependency-map svg>path{fill:none;stroke:#82aaa7;stroke-width:1.5;marker-end:url(#ggbArrow)}.ggb-dependency-map marker path{fill:#82aaa7;stroke:none;marker-end:none}

/* GeoGebra topic 03 — parameter console and real-time formula stage. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-heading{min-height:180px;padding:30px 34px;background:linear-gradient(110deg,#fffefa,#f7fcfb)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-heading:after{display:none}.ggb-parameter-page-body{display:grid;gap:14px;margin-top:16px}
.ggb-parameter-stage{display:grid;grid-template-columns:200px minmax(360px,1fr) 190px;grid-template-rows:48px 1fr;min-height:430px;overflow:hidden;border:1px solid #c9dddb;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(26,84,80,.08)}.ggb-parameter-stage>header{grid-column:1/-1;display:grid;grid-template-columns:max-content 1fr 34px 34px max-content;gap:9px;align-items:center;padding:0 16px;border-bottom:1px solid #dbe7e6}.ggb-parameter-stage>header b{font-size:12px}.ggb-parameter-stage>header button{display:grid;width:30px;height:30px;padding:0;place-items:center;border:1px solid #cfe0df;border-radius:50%;background:#fff;color:#0a7774}.ggb-parameter-stage>header button:first-of-type{background:#0b7d79;color:#fff}.ggb-parameter-stage>header button svg{width:15px}.ggb-parameter-stage>header em{color:#54706e;font-style:normal;font-size:10px}
.ggb-time-track{position:relative;display:flex;align-items:center;justify-content:space-between;height:28px;margin:0 12px;padding-top:15px}.ggb-time-track:before{position:absolute;left:0;right:0;top:10px;height:3px;border-radius:99px;background:linear-gradient(90deg,#1ca995 0 34%,#7868d0 34% 67%,#e9a333 67%);content:""}.ggb-time-track i{position:absolute;z-index:1;left:31%;top:4px;width:14px;height:14px;border:3px solid #11998f;border-radius:50%;background:#fff}.ggb-time-track span{position:relative;color:#607474;font-size:9px}
.ggb-param-controls{display:grid;align-content:start;gap:10px;padding:14px;border-right:1px solid #dbe7e6;background:#fbfdfd}.ggb-param-controls label{display:grid;grid-template-columns:1fr auto;gap:6px}.ggb-param-controls label b{font-size:12px}.ggb-param-controls label b small{margin-left:4px;color:#768887;font-weight:400}.ggb-param-controls output{padding:2px 6px;border:1px solid #d8e4e3;border-radius:4px;background:#fff;color:#466360;font-size:10px}.ggb-param-controls label>small{grid-column:1/-1;color:#758786;font-size:9px}.ggb-param-controls .slider{grid-column:1/-1;position:relative;height:4px;border-radius:99px;background:#d9e5e4}.ggb-param-controls .slider:before{position:absolute;left:0;top:0;width:62%;height:100%;border-radius:inherit;background:#16978f;content:""}.ggb-param-controls .slider i{position:absolute;left:62%;top:50%;width:13px;height:13px;border:3px solid #16978f;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.ggb-param-controls .purple:before{width:48%;background:#7965cf}.ggb-param-controls .purple i{left:48%;border-color:#7965cf}.ggb-param-controls .orange:before{width:66%;background:#e29130}.ggb-param-controls .orange i{left:66%;border-color:#e29130}.ggb-param-controls .formula{display:grid;gap:4px;margin-top:3px;padding:11px;border:1px solid #dce7e6;border-radius:9px;background:#fff}.ggb-param-controls .formula span{color:#607675;font-size:9px}.ggb-param-controls .formula strong{color:#166f86;font:italic 16px Georgia,serif}.ggb-param-controls .formula small{color:#9a5c31;font-size:9px}
.ggb-live-graph{display:grid;grid-template-rows:35px 1fr 54px;overflow:hidden}.ggb-live-graph>div{display:flex;align-items:center;gap:16px;padding:0 14px;border-bottom:1px solid #e3eceb}.ggb-live-graph>div b{margin-right:auto;color:#0c7673;font-size:12px}.ggb-live-graph>div span{color:#657a79;font-size:9px}.ggb-live-graph>svg{width:100%;height:100%;min-height:245px}.ggb-live-graph .grid{fill:none;stroke:#e3eceb;stroke-width:1}.ggb-live-graph .axis{fill:none;stroke:#708785;stroke-width:1.3}.ggb-live-graph .reference{fill:none;stroke:#bec8ca;stroke-width:2;stroke-dasharray:6 5}.ggb-live-graph .current{fill:none;stroke:#0b817d;stroke-width:2.5}.ggb-live-graph circle{fill:#4e8fe6;stroke:#fff;stroke-width:2}.ggb-live-graph .guide{stroke:#7667ce;stroke-width:1.5;stroke-dasharray:4 4}.ggb-live-graph footer{position:relative;display:flex;align-items:center;padding:0 20px;border-top:1px solid #e0eae9;color:#607474;font-size:9px}.ggb-live-graph footer:before{position:absolute;left:115px;right:28px;top:27px;border-top:1px solid #8bb8d7;content:""}.ggb-live-graph footer i{z-index:1;width:8px;height:8px;margin-left:29px;border:2px solid #4e8fe6;border-radius:50%;background:#fff}.ggb-live-graph footer b{z-index:1;margin-left:auto;color:#315fb5}
.ggb-param-status{display:grid;align-content:start;gap:7px;padding:15px;border-left:1px solid #dbe7e6;background:#fbfdfd}.ggb-param-status>b{margin:3px 0;color:#385552;font-size:11px}.ggb-param-status p{display:flex;margin:0;color:#0a7d77;font-size:11px}.ggb-param-status p strong{margin-left:auto;font-weight:650}.ggb-param-status p:nth-of-type(2){color:#725bc3}.ggb-param-status p:nth-of-type(3){color:#d8792d}.ggb-param-status em{padding:5px 7px;border:1px solid #bfe4d6;border-radius:5px;background:#e9f8f2;color:#1e7c5f;font-style:normal;font-size:9px}.ggb-param-status em.neutral{border-color:#d5ccf0;background:#f3effd;color:#6d57b6}.ggb-param-status em.negative{border-color:#efc6c0;background:#fff0ee;color:#c15a4d}.ggb-param-status>small{padding:6px 7px;border-radius:5px;background:#dff3f1;color:#0d6d69}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#eaf8f5)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#f2effc)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#fff4e7)}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-outline{padding:26px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 60px 1fr auto;min-height:246px;padding:15px;border:1px solid #cee0de!important;border-radius:12px;background:#fff;align-items:start}.ggb-param-unit-icon{grid-column:1/-1;grid-row:2;display:grid;width:76px;height:50px;margin:6px auto;place-items:center;border-radius:999px;background:linear-gradient(90deg,#e8f7f4,#f3effc,#fff2dd);color:#0b817d}.ggb-param-unit-icon svg{width:32px;height:32px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-copy{grid-column:1/-1;grid-row:3}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-title{display:grid;gap:5px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-title small{justify-self:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-action{grid-column:1/-1;grid-row:4;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #e1e9e8}
@media(max-width:1100px){.ggb-parameter-stage{grid-template-columns:190px 1fr;grid-template-rows:48px 390px auto}.ggb-param-status{grid-column:1/-1;grid-template-columns:repeat(3,1fr);border-top:1px solid #dbe7e6;border-left:0}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ggb-parameter-stage{grid-template-columns:1fr;grid-template-rows:auto}.ggb-parameter-stage>header{grid-column:1;grid-template-columns:1fr 34px 34px max-content}.ggb-time-track{grid-column:1/-1;grid-row:2}.ggb-param-controls{border-right:0;border-bottom:1px solid #dbe7e6}.ggb-param-status{grid-column:1;grid-template-columns:1fr}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:1fr}}

/* GeoGebra topic 04 — event debugger and interaction state machine. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-heading{min-height:176px;padding:30px 34px;background:#fffefa}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-heading:after{display:none}.ggb-event-page-body{display:grid;gap:14px;margin-top:16px}.ggb-event-debugger{display:grid;grid-template-columns:190px minmax(300px,.85fr) minmax(350px,1.15fr);min-height:440px;overflow:hidden;border:1px solid #cadedd;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(25,80,77,.08)}
.ggb-event-listeners{display:grid;align-content:start;gap:7px;padding:12px;border-right:1px solid #dbe7e6;background:#fbfdfd}.ggb-event-listeners header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.ggb-event-listeners header b{font-size:12px}.ggb-event-listeners header span{color:#269d78;font-size:8px}.ggb-event-listeners button{display:grid;grid-template-columns:24px 1fr 30px;gap:7px;align-items:center;min-height:45px;padding:7px;border:1px solid #d8e5e4;border-radius:8px;background:#fff;color:#173331;text-align:left}.ggb-event-listeners button>svg{width:18px;color:#1ea794}.ggb-event-listeners button:nth-of-type(2)>svg,.ggb-event-listeners button:nth-of-type(6)>svg{color:#4d8bd9}.ggb-event-listeners button:nth-of-type(3)>svg{color:#866dd0}.ggb-event-listeners button:nth-of-type(4)>svg{color:#e49a35}.ggb-event-listeners button span{display:grid}.ggb-event-listeners button strong{font-size:10px}.ggb-event-listeners button small{color:#718281;font-size:8px}.ggb-event-listeners button i{height:16px;background:linear-gradient(100deg,transparent 0 15%,#67c9be 16% 20%,transparent 21% 35%,#67c9be 36% 40%,transparent 41% 58%,#67c9be 59% 64%,transparent 65%);clip-path:polygon(0 55%,14% 55%,24% 0,36% 100%,49% 28%,61% 70%,72% 45%,100% 45%,100% 60%,73% 60%,61% 84%,50% 47%,35% 100%,24% 28%,16% 70%,0 70%)}.ggb-event-listeners footer{display:grid;gap:4px;margin-top:4px;padding:8px;border:1px solid #dce7e6;border-radius:7px;background:#fff}.ggb-event-listeners footer b{font-size:9px}.ggb-event-listeners footer small{color:#526d6b;font-size:7px}
.ggb-event-flow{position:relative;padding:12px;border-right:1px solid #dbe7e6;background:linear-gradient(145deg,#fff,#f8fbfb)}.ggb-event-flow header{display:flex;justify-content:space-between}.ggb-event-flow header b{font-size:12px}.ggb-event-flow header span{color:#6e817f;font-size:8px}.ggb-event-flow ol{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 12px;margin:20px 0 0;padding:0;list-style:none}.ggb-event-flow ol:before{position:absolute;left:14%;right:14%;top:46px;border-top:2px dashed #9ab8b5;content:""}.ggb-event-flow li{position:relative;z-index:1;display:grid;min-height:86px;padding:9px;border:1px solid #cadedd;border-radius:10px;background:#fff;justify-items:center;text-align:center}.ggb-event-flow li svg{width:20px;color:#0b817d}.ggb-event-flow li strong{font-size:9px}.ggb-event-flow li small{color:#687e7c;font-size:7px}.ggb-event-flow li em{padding:2px 6px;border-radius:999px;background:#dff3ed;color:#23805d;font-style:normal;font-size:7px}.ggb-event-flow li.error em{background:#fde5e2;color:#bf5548}.ggb-event-flow li.error svg{color:#d85d51}.ggb-event-flow li.retry em{background:#fff0d9;color:#ba7620}.ggb-event-flow li.retry svg{color:#df912a}.ggb-event-flow .flow-legend{position:absolute;left:14px;bottom:12px;display:flex;gap:7px}.ggb-event-flow .flow-legend span{color:#718481;font-size:7px}.ggb-event-flow .flow-legend span:before{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:#91a6a4;content:""}.ggb-event-flow .flow-legend span:nth-child(2):before{background:#65b7d7}.ggb-event-flow .flow-legend span:nth-child(3):before{background:#4fba75}.ggb-event-flow .flow-legend span:nth-child(4):before{background:#e66c5c}.ggb-event-flow .flow-legend span:nth-child(5):before{background:#e8a038}
.ggb-script-console{display:grid;grid-template-rows:1fr 1fr 84px;min-width:0}.ggb-script-console section{overflow:hidden;border-bottom:1px solid #dbe7e6}.ggb-script-console header{display:flex;justify-content:space-between;padding:8px 11px;border-bottom:1px solid #e2ebea}.ggb-script-console header b{font-size:10px}.ggb-script-console header span{padding:2px 6px;border-radius:999px;background:#e2f6e9;color:#24855a;font-size:7px}.ggb-script-console pre{height:145px;margin:0;padding:8px 11px;overflow:hidden;background:#fbfcfc;white-space:pre-wrap}.ggb-script-console code{color:#315265;font:9px/1.65 Consolas,monospace;word-spacing:5px}.ggb-script-console code i{color:#94a3a5;font-style:normal}.ggb-script-console footer{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;padding:8px 11px;background:#f6faf9}.ggb-script-console footer b{grid-row:1/4;color:#0a7774;font-size:9px}.ggb-script-console footer small{color:#566e6d;font:7px Consolas,monospace}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#ecf8f5)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#edf4fb)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#fff0ed)}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-outline{padding:26px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 64px 1fr auto;min-height:248px;padding:15px;border:1px solid #cee0de!important;border-radius:12px;background:#fff;align-items:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-link:before{grid-column:1/-1;grid-row:2;display:grid;width:62px;height:54px;margin:5px auto;place-items:center;border-radius:50%;background:#e8f7f4;color:#0b817d;content:"⚡";font-size:25px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li:nth-child(2) .topic-unit-link:before{background:#e8f5f8;content:">_";font:700 17px Consolas}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li:nth-child(3) .topic-unit-link:before{background:#edf0fb;content:"</>";font:700 15px Consolas}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li:nth-child(4) .topic-unit-link:before{background:#f1edfb;content:"⇄"}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li:nth-child(5) .topic-unit-link:before{background:#fff0df;color:#d97822;content:"⚙"}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li:nth-child(6) .topic-unit-link:before{background:#e8f7ee;color:#288458;content:"✓"}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-copy{grid-column:1/-1;grid-row:3}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-title{display:grid;gap:5px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-title small{justify-self:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-action{grid-column:1/-1;grid-row:4;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #e1e9e8}
@media(max-width:1100px){.ggb-event-debugger{grid-template-columns:180px 1fr;grid-template-rows:430px 390px}.ggb-script-console{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:1fr 84px}.ggb-script-console footer{grid-column:1/-1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ggb-event-debugger{grid-template-columns:1fr;grid-template-rows:auto}.ggb-event-listeners,.ggb-event-flow{border-right:0;border-bottom:1px solid #dbe7e6}.ggb-script-console{grid-column:1;grid-template-columns:1fr;grid-template-rows:auto}.ggb-script-console footer{grid-column:1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:1fr}}
.ggb-script-console code{word-spacing:2px}.ggb-script-console code i{display:inline-block;width:18px}.ggb-script-console code i:not(:first-child):before{white-space:pre;content:"\A"}
.ggb-script-console code{display:block;overflow:hidden}.ggb-script-console code i{float:left;clear:left;display:block;width:20px;height:1.65em}.ggb-script-console code i:not(:first-child):before{content:none}
.ggb-script-console code>span{display:block;min-height:1.65em;white-space:pre}.ggb-script-console code>span i{float:none;clear:none;display:inline-block;width:20px;height:auto}.ggb-script-console code>span i:before{content:none!important}

/* GeoGebra topic 05 — web application / applet API communication bridge. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-heading{min-height:170px;padding:28px 34px;background:linear-gradient(110deg,#fffefa,#f5fbff)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-heading:after{display:none}.ggb-api-page-body{display:grid;gap:14px;margin-top:16px}.ggb-api-bridge{display:grid;grid-template-columns:220px minmax(250px,.72fr) minmax(360px,1.28fr);grid-template-rows:38px 360px 110px;overflow:hidden;border:1px solid #c9dddc;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(25,81,77,.08)}.ggb-api-bridge>header{grid-column:1/-1;display:flex;align-items:center;gap:28px;padding:0 14px;border-bottom:1px solid #dbe7e6;color:#607573;font-size:9px}.ggb-api-bridge>header b{color:#25865e}.ggb-api-bridge>header code{margin-left:auto;color:#526c78}
.ggb-web-controller{display:grid;grid-template-columns:1fr 84px;align-content:start;gap:7px;padding:12px;border-right:1px solid #dbe7e6;background:#fbfdfd}.ggb-web-controller>b{grid-column:1/-1;color:#0b7774;font-size:11px}.ggb-web-controller>b small{margin-left:4px;color:#587776}.ggb-web-controller label{display:contents;color:#526d6b;font-size:9px}.ggb-web-controller input{height:24px;padding:0 7px;border:1px solid #d5e1e0;border-radius:4px;background:#fff;font-size:9px}.ggb-web-controller label:nth-of-type(5){display:grid;grid-column:1/-1;grid-template-columns:68px 1fr 34px;align-items:center}.ggb-web-controller .api-slider{position:relative;height:4px;border-radius:99px;background:#dce7e6}.ggb-web-controller .api-slider:before{position:absolute;left:0;top:0;width:58%;height:100%;border-radius:inherit;background:#0e918b;content:""}.ggb-web-controller .api-slider i{position:absolute;left:58%;top:50%;width:12px;height:12px;border:3px solid #0e918b;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.ggb-web-controller output{font-size:9px}.ggb-web-controller .api-buttons{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.35fr;gap:5px}.ggb-web-controller .api-buttons button{min-height:27px;padding:0 6px;border:0;border-radius:5px;background:#0c817c;color:#fff;font-size:8px}.ggb-web-controller pre{grid-column:1/-1;display:grid;gap:3px;margin:0;padding:9px;border:1px solid #d7e4e3;border-radius:7px;background:#fff;color:#486568;font:8px/1.45 Consolas,monospace}.ggb-web-controller pre span:first-child{color:#0b7774;font-weight:700}
.ggb-api-bus{display:grid;align-content:start;gap:6px;padding:12px;border-right:1px solid #dbe7e6;background:linear-gradient(180deg,#fff,#f8fbff)}.ggb-api-bus>b{text-align:center;font-size:11px}.ggb-api-bus>b small{color:#5d7479}.ggb-api-bus code{position:relative;padding:6px 8px;border:1px solid #b9d5f0;border-radius:6px;background:#f4f9ff;color:#256bb4;text-align:center;font:8px Consolas,monospace}.ggb-api-bus code.request:before,.ggb-api-bus code.request:after{position:absolute;top:50%;color:#2c9ddd;content:"→";transform:translateY(-50%)}.ggb-api-bus code.request:before{left:-17px}.ggb-api-bus code.request:after{right:-17px}.ggb-api-bus code.event{border-color:#cfc5f1;background:#f7f4ff;color:#694eb6}.ggb-api-bus code.event:before,.ggb-api-bus code.event:after{position:absolute;top:50%;color:#7659cb;content:"←";transform:translateY(-50%)}.ggb-api-bus code.event:before{left:-17px}.ggb-api-bus code.event:after{right:-17px}.ggb-api-bus footer{display:flex;justify-content:space-around;color:#5e777b;font-size:8px}.ggb-api-bus footer span:first-child{color:#238fc0}.ggb-api-bus footer span:last-child{color:#7154c1}
.ggb-embedded-canvas{display:grid;grid-template-rows:34px 1fr 72px;overflow:hidden;background:#fff}.ggb-embedded-canvas>header{display:flex;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:1px solid #dbe7e6}.ggb-embedded-canvas>header b{color:#0b7472;font-size:11px}.ggb-embedded-canvas>header span{color:#268a57;font-size:8px}.ggb-embedded-canvas>svg{width:100%;height:100%}.ggb-embedded-canvas .grid{fill:none;stroke:#e3eceb;stroke-width:1}.ggb-embedded-canvas .axis{fill:none;stroke:#708785;stroke-width:1.4}.ggb-embedded-canvas .ring{fill:rgba(69,172,106,.05);stroke:#44a96a;stroke-width:2}.ggb-embedded-canvas .line{fill:none;stroke:#315166;stroke-width:1.7}.ggb-embedded-canvas circle.a{fill:#2f7bd0;stroke:#fff;stroke-width:2}.ggb-embedded-canvas circle.b{fill:#6b5bd0;stroke:#fff;stroke-width:2}.ggb-embedded-canvas .object-state{display:grid;grid-template-columns:max-content 1fr 1fr 1fr;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #dbe7e6;background:#f8fbfa;color:#526c6b;font-size:8px}.ggb-embedded-canvas .object-state b{color:#0b7472}
.ggb-api-lifecycle{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr;border-top:1px solid #dbe7e6}.ggb-api-lifecycle>div{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px;border-right:1px solid #dbe7e6}.ggb-api-lifecycle>div b{grid-column:1/-1;color:#0b7472;font-size:10px}.ggb-api-lifecycle>div span{color:#57716f;font-size:8px}.ggb-api-lifecycle ol{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:center;margin:0;padding:12px;list-style:none}.ggb-api-lifecycle li{position:relative;display:grid;gap:4px;justify-items:center;color:#0b7b77;font-size:9px}.ggb-api-lifecycle li:not(:last-child):after{position:absolute;left:78%;top:13px;width:58%;border-top:1px solid #8aa7a4;content:"→"}.ggb-api-lifecycle li:before{display:grid;width:27px;height:27px;place-items:center;border:1px solid #80bbb6;border-radius:8px;content:"◇"}.ggb-api-lifecycle li:nth-child(2):before{border-radius:50%;content:"✓"}.ggb-api-lifecycle li:nth-child(3):before{color:#7154c1;content:"◉"}.ggb-api-lifecycle li:nth-child(4):before{color:#287fc1;content:"⇄"}.ggb-api-lifecycle li:nth-child(5):before{border-color:#e3a04a;color:#d97b17;content:"!"}.ggb-api-lifecycle li small{color:#687e7c;font-size:7px}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#ecf8f5)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#eef4fb)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#f2effc)}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-outline{padding:26px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 64px 1fr auto;min-height:248px;padding:15px;border:1px solid #cee0de!important;border-radius:12px;background:#fff;align-items:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-link:before{grid-column:1/-1;grid-row:2;display:grid;width:66px;height:54px;margin:5px auto;place-items:center;border-radius:10px;background:#e7f7f4;color:#0b817d;content:"</>";font:700 17px Consolas}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li:nth-child(2) .topic-unit-link:before{border-radius:50%;background:#e8f4fb;color:#287bb5;content:"⇄";font:700 25px sans-serif}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li:nth-child(3) .topic-unit-link:before{border-radius:50%;background:#f0edfb;color:#6d55bf;content:"◉"}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li:nth-child(4) .topic-unit-link:before{background:#e9f7f7;content:"↔";font:700 25px sans-serif}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li:nth-child(5) .topic-unit-link:before{border-radius:50% 50% 10px 50%;background:#fff0df;color:#dc7b19;content:"!";font:700 25px sans-serif}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li:nth-child(6) .topic-unit-link:before{background:#e8f7ed;color:#29845a;content:"▣";font:700 25px sans-serif}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-copy{grid-column:1/-1;grid-row:3}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-title{display:grid;gap:5px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-title small{justify-self:start}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-action{grid-column:1/-1;grid-row:4;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #e1e9e8}
@media(max-width:1100px){.ggb-api-bridge{grid-template-columns:210px 1fr;grid-template-rows:38px 350px 330px 110px}.ggb-embedded-canvas{grid-column:1/-1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ggb-api-bridge{grid-template-columns:1fr;grid-template-rows:auto}.ggb-api-bridge>header{grid-column:1;display:grid;gap:4px;padding:10px}.ggb-web-controller,.ggb-api-bus{border-right:0;border-bottom:1px solid #dbe7e6}.ggb-embedded-canvas{grid-column:1;min-height:360px}.ggb-api-lifecycle{grid-column:1;grid-template-columns:1fr}.ggb-api-lifecycle>div{border-right:0;border-bottom:1px solid #dbe7e6}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:1fr}}

/* GeoGebra topic 06 — interactive courseware authoring studio. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-heading{display:none}.ggb-courseware-page-body{display:grid;gap:14px}.ggb-courseware-studio{display:grid;grid-template-columns:118px minmax(460px,1fr) 260px;grid-template-rows:50px 76px 430px 98px;overflow:hidden;border:1px solid #c9dddc;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(25,81,77,.08)}.ggb-courseware-studio>header{grid-column:1/-1;display:grid;grid-template-columns:max-content max-content 1fr repeat(3,max-content);gap:10px;align-items:center;padding:0 14px;border-bottom:1px solid #dce8e7}.ggb-courseware-studio>header b{font-size:16px}.ggb-courseware-studio>header span{color:#718482;font-size:8px}.ggb-courseware-studio>header nav{justify-self:center;display:flex;padding:3px;border-radius:999px;background:#f2f5f4}.ggb-courseware-studio>header button{min-height:28px;padding:0 12px;border:1px solid #d9e5e4;border-radius:7px;background:#fff;color:#294744;font-size:9px}.ggb-courseware-studio>header nav button{border:0;background:transparent}.ggb-courseware-studio>header nav .active{background:#fff;color:#078d87;box-shadow:0 2px 8px rgba(33,84,81,.09)}.ggb-courseware-studio>header .save{border-color:#078d87;background:#078d87;color:#fff}
.courseware-loop{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin:0;padding:10px 14px;list-style:none;background:#fbfdfd}.courseware-loop li{position:relative;display:grid;grid-template-columns:28px 1fr;align-items:center;padding:8px;border:1px solid #d9e9e3;border-radius:10px;background:#f1faf6}.courseware-loop li:not(:last-child):after{position:absolute;right:-14px;color:#8aa4a2;content:"→"}.courseware-loop li:nth-child(2){border-color:#f2dfbe;background:#fff8e9}.courseware-loop li:nth-child(3){border-color:#d9eaf2;background:#eef9fc}.courseware-loop li:nth-child(4){border-color:#e3daf3;background:#f7f1fc}.courseware-loop li:nth-child(5){border-color:#f4dfd0;background:#fff5ee}.courseware-loop li:nth-child(6){border-color:#f2d9d6;background:#fff1f0}.courseware-loop svg{grid-row:1/3;width:19px;color:#20a77b}.courseware-loop li:nth-child(2) svg{color:#d89628}.courseware-loop li:nth-child(3) svg{color:#2d98b7}.courseware-loop li:nth-child(4) svg{color:#8462c6}.courseware-loop li:nth-child(5) svg{color:#df744f}.courseware-loop li:nth-child(6) svg{color:#d9544d}.courseware-loop b{font-size:10px}.courseware-loop small{color:#718281;font-size:7px}
.courseware-toolbox{display:grid;align-content:start;gap:2px;padding:10px;border-right:1px solid #dce8e7;background:#fbfcfc}.courseware-toolbox button{display:flex;gap:5px;align-items:center;justify-content:center;min-height:32px;margin-bottom:8px;border:0;border-radius:7px;background:#07928b;color:#fff;font-size:9px}.courseware-toolbox span{padding:7px 8px;border-radius:6px;color:#526d6b;font-size:8px}.courseware-toolbox span:hover{background:#eef7f5}.courseware-canvas{display:grid;grid-template-rows:86px 1fr;padding:10px;background:#fafcfc}.courseware-canvas>header{display:grid;gap:3px;padding:12px 14px;border:1px solid #d7e5e3;border-radius:10px 10px 0 0;background:#fff}.courseware-canvas>header span{color:#0a7f7a;font-size:8px}.courseware-canvas>header b{font-size:13px}.courseware-canvas>header small{color:#6e817f;font-size:8px}.courseware-demo{display:grid;grid-template-columns:180px 1fr;overflow:hidden;border:1px solid #d7e5e3;border-top:0;border-radius:0 0 10px 10px;background:#fff}.courseware-demo>aside{display:grid;align-content:start;gap:20px;padding:18px;border-right:1px solid #e1e9e8}.courseware-demo label{display:grid;gap:7px;color:#368b9b;font-size:9px}.courseware-demo label i{position:relative;height:3px;border-radius:99px;background:#dbe7e6}.courseware-demo label i:before{display:block;width:58%;height:100%;border-radius:inherit;background:#0c918a;content:""}.courseware-demo label em{position:absolute;left:58%;top:50%;width:10px;height:10px;border-radius:50%;background:#0c918a;transform:translate(-50%,-50%)}.courseware-demo button{width:58px;min-height:26px;border:0;border-radius:6px;background:#0b918a;color:#fff;font-size:8px}.courseware-demo svg{width:100%;height:100%}.courseware-demo .grid{fill:none;stroke:#e1e9e8}.courseware-demo .axis{fill:none;stroke:#718684;stroke-width:1.4}.courseware-demo .curve{fill:none;stroke:#3a8bf0;stroke-width:2}.courseware-demo circle{fill:#3489eb}.courseware-demo text{fill:#3489eb;font-size:10px}
.courseware-evidence{display:grid;align-content:start;gap:9px;padding:10px;border-left:1px solid #dce8e7;background:#fbfcfc}.courseware-evidence>header{display:flex;justify-content:space-between}.courseware-evidence>header b{font-size:10px}.courseware-evidence>header span{color:#5e7775;font-size:7px}.courseware-evidence article{display:grid;gap:6px;padding:10px;border:1px solid #d9e5e4;border-radius:8px;background:#fff}.courseware-evidence article b{font-size:9px}.courseware-evidence article small{color:#657b79;font-size:7px;line-height:1.5}.courseware-evidence article em{color:#188a66;font-style:normal;font-size:7px}.courseware-evidence .correct{border-color:#d5ebdc;background:#effaf2}.courseware-evidence .hint{border-color:#f1dfb8;background:#fff9e8}.courseware-evidence .retry{border-color:#f0d5d1;background:#fff0ef}.courseware-studio>footer{grid-column:1/-1;display:grid;grid-template-columns:110px repeat(6,1fr);gap:8px;align-items:center;padding:10px 14px;border-top:1px solid #dce8e7;background:#fbfcfc}.courseware-studio>footer b{font-size:10px}.courseware-studio>footer span{display:grid;gap:4px;min-height:58px;padding:8px;border:1px solid #d8e5e4;border-radius:8px;color:#365250;font-size:9px}.courseware-studio>footer span.active{border:2px solid #07928b;background:#f0fbf9}.courseware-studio>footer i{color:#65807e;font-style:normal;font-size:7px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#ecf8f5)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#fff7e8)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#f3effb)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-outline{padding:26px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-outline .topic-unit-link{min-height:170px;border:1px solid #d7e4e2!important;border-radius:12px;background:linear-gradient(145deg,#fff,#f7fbfa)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li:nth-child(2) .topic-unit-link{background:linear-gradient(145deg,#fff,#fff8e9)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li:nth-child(4) .topic-unit-link{background:linear-gradient(145deg,#fff,#f5f0fb)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li:nth-child(5) .topic-unit-link{background:linear-gradient(145deg,#fff,#fff4ec)}
@media(max-width:1100px){.ggb-courseware-studio{grid-template-columns:110px 1fr;grid-template-rows:50px auto 430px auto 98px}.courseware-evidence{grid-column:1/-1;border-left:0;border-top:1px solid #dce8e7;grid-template-columns:repeat(4,1fr)}.courseware-studio>footer{grid-column:1/-1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ggb-courseware-studio{display:block}.ggb-courseware-studio>header{display:flex;flex-wrap:wrap;padding:10px}.courseware-loop{grid-template-columns:repeat(2,1fr)}.courseware-toolbox{grid-template-columns:repeat(2,1fr);border-right:0}.courseware-demo{grid-template-columns:1fr}.courseware-evidence{grid-template-columns:1fr}.courseware-studio>footer{grid-template-columns:repeat(2,1fr)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:1fr}}
.ggb-courseware-studio{grid-template-rows:50px 76px 430px 160px}
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;align-items:start;padding:16px;text-align:left}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-index{grid-column:1;grid-row:1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-copy{grid-column:2;grid-row:1/3;min-width:0}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-title{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-title strong{white-space:normal;word-break:normal}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-summary{display:block;margin-top:8px;line-height:1.6}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="6"] .topic-unit-action{grid-column:2;grid-row:3;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #e0e9e8}

/* GeoGebra topic 07 — release, embed and reuse delivery console. */
.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-heading{display:none}.ggb-release-page-body{display:grid;gap:14px}.ggb-release-console{display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-rows:110px 84px 250px 220px 132px;gap:10px;padding:14px;border:1px solid #c9dddc;border-radius:16px;background:linear-gradient(145deg,#fbfffe,#f5fbff);box-shadow:0 12px 30px rgba(25,81,77,.08)}.ggb-release-console>header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border:1px solid #d5e4e2;border-radius:13px;background:linear-gradient(110deg,#fff,#f5fbff)}.ggb-release-console>header>div{display:grid;gap:4px}.ggb-release-console>header span{color:#0a7773;font-size:8px;font-weight:700}.ggb-release-console>header b{font-size:26px}.ggb-release-console>header small{color:#617977;font-size:10px}.ggb-release-console>header nav{display:flex;gap:8px;align-items:center}.ggb-release-console>header button,.ggb-release-console>header em{display:flex;gap:5px;align-items:center;min-height:31px;padding:0 10px;border:1px solid #d6e3e2;border-radius:7px;background:#fff;color:#31514f;font-style:normal;font-size:8px}.ggb-release-console>header em{border-color:#d7eade;background:#f2faf4;color:#25865e}.ggb-release-console>header svg{width:13px}
.release-pipeline{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin:0;padding:10px 16px;border:1px solid #d6e4e2;border-radius:12px;background:#fff;list-style:none}.release-pipeline li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:7px;align-items:center}.release-pipeline li:not(:last-child):after{position:absolute;right:-20px;color:#32a8a0;content:"→"}.release-pipeline svg{width:34px;height:34px;padding:8px;border-radius:50%;background:#e7f8f4;color:#098c83}.release-pipeline .step-2 svg{background:#fff0e7;color:#ee7a3e}.release-pipeline .step-3 svg{background:#edf1ff;color:#516ee3}.release-pipeline .step-4 svg,.release-pipeline .step-5 svg{background:#f2efff;color:#725bd0}.release-pipeline span{display:grid}.release-pipeline b{font-size:10px}.release-pipeline small{color:#70817f;font-size:7px}
.release-checklist{display:grid;grid-template-rows:38px 1fr 40px;overflow:hidden;border:1px solid #d6e4e2;border-radius:12px;background:#fff}.release-checklist>header,.release-channels>header,.embed-config>header,.release-preview>header,.release-history>header,.release-assets>header{display:flex;justify-content:space-between;align-items:center;padding:0 12px}.release-checklist>header b,.release-channels>header b,.embed-config>header b,.release-preview>header b,.release-history>header b,.release-assets>header b{color:#0b7471;font-size:10px}.release-checklist>header span{color:#288a62;font-size:8px}.release-checklist ul{display:grid;margin:0;padding:0 12px;list-style:none}.release-checklist li{display:grid;grid-template-columns:20px 1fr max-content;gap:7px;align-items:center;border-top:1px solid #edf1f1}.release-checklist li svg{width:13px;color:#25a26f}.release-checklist li:nth-child(4) svg{color:#e3902e}.release-checklist li span{display:grid}.release-checklist li b{font-size:8px}.release-checklist li small{color:#778785;font-size:6px}.release-checklist li em{padding:2px 5px;border-radius:99px;background:#e8f7ed;color:#28875f;font-style:normal;font-size:6px}.release-checklist li:nth-child(4) em{background:#fff0dc;color:#cf7a1e}.release-checklist>footer{display:flex;gap:8px;align-items:center;padding:0 12px;border-top:1px solid #edf1f1}.release-checklist>footer button{min-height:24px;border:0;border-radius:5px;background:#087e7a;color:#fff;font-size:7px}.release-checklist>footer small{color:#71817f;font-size:6px}
.release-channels{display:grid;grid-template-rows:38px 1fr;border:1px solid #d6e4e2;border-radius:12px;background:#fff}.release-channels>header button,.release-history>header button,.release-assets>header button{border:0;background:transparent;color:#0b7773;font-size:7px}.release-channels>div{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 10px 10px}.release-channels article{display:grid;grid-template-columns:30px 1fr;grid-template-rows:28px 1fr 22px;gap:4px;padding:10px;border:1px solid #dce7e6;border-radius:9px;background:linear-gradient(145deg,#fff,#f9fcfc)}.release-channels article>svg{grid-row:1;display:grid;width:28px;height:28px;padding:6px;border-radius:50%;background:#eaf5ff;color:#3289d5}.release-channels article:nth-child(3)>svg{background:#e9faef;color:#20a863}.release-channels article:nth-child(4)>svg{background:#f2edff;color:#7b5ed0}.release-channels article:nth-child(5)>svg{background:#fff2e6;color:#dc7d29}.release-channels article>b{align-self:center;font-size:9px}.release-channels article>small{grid-column:1/-1;color:#71817f;font-size:7px}.release-channels article>span{align-self:center;color:#28875f;font-size:6px}.release-channels article>button{min-height:22px;border:0;border-radius:4px;background:#07817d;color:#fff;font-size:7px}
.embed-config,.release-preview{display:grid;grid-template-rows:36px 1fr;overflow:hidden;border:1px solid #d6e4e2;border-radius:12px;background:#fff}.embed-config{grid-template-columns:240px 1fr}.embed-config>header{grid-column:1/-1}.embed-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-right:1px solid #e0e9e8}.embed-options label{display:grid;grid-template-columns:45px 1fr;align-items:center;color:#617775;font-size:7px}.embed-options input,.embed-options select{min-width:0;height:24px;border:1px solid #dce5e4;border-radius:4px;background:#fff;font-size:7px}.embed-options span{color:#617775;font-size:7px}.embed-options i{display:inline-block;width:20px;height:10px;border-radius:99px;background:#17a38f}.embed-options i.off{background:#cfdad9}.embed-config pre{position:relative;margin:0;padding:12px;overflow:hidden;background:#f7fafc;color:#426175;font:7px/1.55 Consolas,monospace;white-space:pre-wrap}.embed-config pre button{position:absolute;right:10px;bottom:10px;min-height:23px;border:0;border-radius:4px;background:#087e7a;color:#fff;font-size:7px}.release-preview{grid-column:2}.release-preview>header nav{display:flex}.release-preview>header button{min-height:23px;border:0;background:#fff;color:#677c79;font-size:7px}.release-preview>header .active{border-radius:5px;background:#087e7a;color:#fff}.release-preview{grid-template-columns:1fr 130px}.release-preview>header{grid-column:1/-1}.preview-frame{display:grid;grid-template-columns:50px 1fr;margin:0 10px 10px;border:6px solid #e9eff2;border-radius:7px;background:#fff}.preview-frame aside{display:grid;align-content:start;gap:8px;padding:10px;border-right:1px solid #e0e8e7}.preview-frame aside i{height:5px;border-radius:99px;background:#c3d3d1}.preview-frame svg{width:100%;height:100%}.preview-frame .grid{fill:none;stroke:#e4eceb}.preview-frame circle,.preview-frame path{fill:rgba(78,114,216,.08);stroke:#7c91dc}.release-preview dl{display:grid;grid-template-columns:1fr;align-content:center;gap:4px;margin:0;color:#71817f;font-size:7px}.release-preview dt{font-weight:700}.release-preview dd{margin:0;color:#304f4d}.release-preview dd b{color:#27875e}
.release-history,.release-assets{display:grid;grid-template-rows:34px 1fr;border:1px solid #d6e4e2;border-radius:12px;background:#fff}.release-history p{display:grid;grid-template-columns:130px 1fr 130px;gap:8px;align-items:center;margin:0;padding:0 12px;border-top:1px solid #edf1f1;font-size:7px}.release-history strong{font-size:8px}.release-history em{padding:2px 5px;border-radius:99px;background:#e5f6e9;color:#2a885f;font-style:normal;font-size:6px}.release-history span,.release-history small{color:#6e817e}.release-assets>div{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 10px 10px}.release-assets article{display:grid;gap:4px;padding:8px;border:1px solid #dfe8e7;border-radius:7px}.release-assets article b{font-size:8px}.release-assets article small,.release-assets article span{color:#71817f;font-size:6px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#eaf8f4)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#eef4ff)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#f3effc)}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-outline .topic-unit-link{min-height:170px;border:1px solid #d7e4e2!important;border-radius:12px;background:linear-gradient(145deg,#fff,#f5fbfa)}
@media(max-width:1100px){.ggb-release-console{grid-template-columns:1fr;grid-template-rows:auto}.release-checklist,.release-channels,.embed-config,.release-preview,.release-history,.release-assets{grid-column:1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.release-pipeline{grid-template-columns:repeat(2,1fr)}.release-channels>div,.release-assets>div{grid-template-columns:1fr}.embed-config,.release-preview{grid-template-columns:1fr}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:1fr}}
.ggb-release-console{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:110px 84px 190px 250px 240px 150px}.release-checklist,.release-channels{grid-column:1/-1}.release-preview{grid-column:2}.release-history p{grid-template-columns:90px minmax(0,1fr) 100px}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;align-items:start;padding:16px;text-align:left}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-index{grid-column:1;grid-row:1}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-copy{grid-column:2;grid-row:1/3;min-width:0}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-title{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-title strong{white-space:normal;word-break:normal}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-summary{display:block;margin-top:8px;line-height:1.6}.tutorial-workspace[data-route="ggb"] [data-panel="routes"][data-topic-index="7"] .topic-unit-action{grid-column:2;grid-row:3;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #e0e9e8}
@media(max-width:1100px){.ggb-release-console{grid-template-columns:1fr;grid-template-rows:auto}.release-checklist,.release-channels,.embed-config,.release-preview,.release-history,.release-assets{grid-column:1}}

/* Web route overview — browser application architecture map. */
.tutorial-workspace[data-route="web"] .route-heading{min-height:170px;padding:28px 34px;background:linear-gradient(110deg,#fff,#f3f9ff)}.tutorial-workspace[data-route="web"] .route-heading:after{display:none}.tutorial-workspace[data-route="web"] .route-heading>button{background:#236e98}.web-route-overview{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px;margin-top:16px}.web-browser-frame{overflow:hidden;border:1px solid #cedfe8;border-radius:15px;background:#fff;box-shadow:0 12px 30px rgba(43,89,118,.09)}.web-browser-frame>header{display:grid;grid-template-columns:9px 9px 9px 28px 1fr 20px;gap:6px;align-items:center;height:38px;padding:0 12px;border-bottom:1px solid #dce6eb;background:#fbfcfd}.web-browser-frame>header>i{width:8px;height:8px;border-radius:50%;background:#ff7864}.web-browser-frame>header>i:nth-child(2){background:#f6bd4b}.web-browser-frame>header>i:nth-child(3){background:#5fcf89}.web-browser-frame>header>span{display:flex;gap:6px;align-items:center;height:24px;padding:0 10px;border:1px solid #d9e4e9;border-radius:999px;color:#78909c;font-size:8px}.web-browser-frame>header svg{width:12px}.web-layer-stack{display:grid;grid-template-columns:1fr 1fr 1.45fr 1.12fr .9fr;gap:8px;padding:10px}.web-layer-stack article{display:grid;align-content:start;gap:8px;min-height:300px;padding:10px;border:1px solid #dbe6ec;border-radius:9px;background:linear-gradient(180deg,#fff,#f7fbfd)}.web-layer-stack article>b{margin:-10px -10px 0;padding:8px;border-radius:8px 8px 0 0;background:#367fc0;color:#fff;text-align:center;font-size:9px}.web-layer-stack article>strong{text-align:center;font-size:9px}.web-layer-stack code{padding:8px;border:1px dashed #c7dded;border-radius:6px;background:#f6fbff;color:#3373a3;font:7px/1.65 Consolas,monospace}.web-layer-stack small{align-self:end;color:#607b89;font-size:7px;line-height:1.5}.web-layer-stack .css-layer>b{background:#7659c8}.web-layer-stack .css-layer{background:linear-gradient(180deg,#fff,#faf8ff)}.layout-wire{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:repeat(4,31px);gap:3px}.layout-wire span{display:grid;place-items:center;border:1px dashed #b9a9df;border-radius:3px;color:#664baa;font-size:7px}.layout-wire span:first-child,.layout-wire span:nth-child(2),.layout-wire span:last-child{grid-column:1/-1}.layout-wire span:nth-child(3){grid-row:3}.web-layer-stack .js-layer>b{background:#e57f35}.web-layer-stack .js-layer{background:linear-gradient(180deg,#fff,#fff9f3)}.web-layer-stack .js-layer code{border-color:#efcfb1;background:#fffaf5;color:#a9571f}.state-flow{display:flex;gap:4px;align-items:center;justify-content:center}.state-flow span{padding:5px 7px;border:1px solid #efc492;border-radius:4px;color:#bd641d;font-size:7px}.state-flow i{color:#df8b42;font-style:normal}.web-layer-stack .vue-layer>b{background:#15a398}.web-layer-stack .vue-layer{background:linear-gradient(180deg,#fff,#f3fbfa)}.component-tree{display:grid;grid-template-columns:1fr 1fr;gap:4px}.component-tree span{padding:6px;border:1px solid #a8ddd8;border-radius:4px;color:#11877f;text-align:center;font:7px Consolas}.component-tree span:first-child,.component-tree span:nth-child(2){grid-column:1/-1}.web-layer-stack .ux-layer>b{background:#159cb6}.web-layer-stack .ux-layer{background:linear-gradient(180deg,#fff,#f2fbfd)}.pointer-ripple{position:relative;display:grid;height:120px;place-items:center}.pointer-ripple svg{position:relative;z-index:2;width:28px;color:#158ea9}.pointer-ripple i{position:absolute;width:70px;height:70px;border:1px solid #9dd7e2;border-radius:50%}.pointer-ripple i:last-child{width:45px;height:45px;background:rgba(57,177,199,.08)}
.web-quality-rail{display:grid;align-content:start;gap:8px;padding:10px;border:1px solid #cfdee7;border-radius:13px;background:#f8fbfd}.web-quality-rail>b{padding:6px;color:#285e78;text-align:center;font-size:9px}.web-quality-rail>span{display:grid;grid-template-columns:30px 1fr;align-items:center;padding:9px;border:1px solid #dbe6eb;border-radius:8px;background:#fff;color:#274f62;font-size:8px;font-weight:700}.web-quality-rail svg{grid-row:1/3;width:20px;color:#158e9f}.web-quality-rail small{color:#78909b;font-size:6px;font-weight:400}.web-topic-shelf{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px;border:1px solid #cfdee7;border-radius:13px;background:#fff}.web-topic-shelf>header{grid-column:1/-1;display:flex;gap:8px;align-items:center}.web-topic-shelf>header b{font-size:12px}.web-topic-shelf>header span{color:#758a94;font-size:8px}.web-topic-shelf>button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:30px auto 1fr 26px;gap:4px;min-height:170px;padding:9px;border:1px solid #dae5ea;border-radius:9px;background:linear-gradient(145deg,#fff,#f5fbff);color:#244e62;text-align:left}.web-topic-shelf>button:nth-of-type(2){background:linear-gradient(145deg,#fff,#f7f4ff)}.web-topic-shelf>button:nth-of-type(3){background:linear-gradient(145deg,#fff,#fff7ef)}.web-topic-shelf>button:nth-of-type(4),.web-topic-shelf>button:nth-of-type(5){background:linear-gradient(145deg,#fff,#f1fbfa)}.web-topic-shelf button>em{font-style:normal;font-size:9px;font-weight:700}.web-topic-shelf button>svg{width:19px;color:#277fbb}.web-topic-shelf button>strong,.web-topic-shelf button>small,.web-topic-shelf button>span{grid-column:1/-1}.web-topic-shelf button>strong{font-size:9px}.web-topic-shelf button>small{color:#70858f;font-size:7px;line-height:1.5}.web-topic-shelf button>span{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e0e8ec;color:#24769d;font-size:7px}.web-topic-shelf button>span svg{width:12px}.tutorial-workspace[data-route="web"] .route-facts,.tutorial-workspace[data-route="web"] .role-grid,.tutorial-workspace[data-route="web"] .docs-strip{display:none}.tutorial-workspace[data-route="web"] .web-route-overview+.route-facts+.content-block{margin-top:14px;padding:22px}.tutorial-workspace[data-route="web"] .web-route-overview+.route-facts+.content-block .stage-map{grid-template-columns:repeat(4,1fr);gap:10px;border:0;background:transparent}.tutorial-workspace[data-route="web"] .web-route-overview+.route-facts+.content-block .stage-map li{min-height:120px;border:1px solid #d5e3e9!important;border-radius:10px;background:linear-gradient(145deg,#fff,#f4faff)}
@media(max-width:1100px){.web-route-overview{grid-template-columns:1fr}.web-quality-rail{grid-template-columns:repeat(5,1fr)}.web-quality-rail>b{grid-column:1/-1}.web-layer-stack{grid-template-columns:repeat(2,1fr)}.web-topic-shelf{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.web-layer-stack,.web-quality-rail,.web-topic-shelf{grid-template-columns:1fr}.tutorial-workspace[data-route="web"] .web-route-overview+.route-facts+.content-block .stage-map{grid-template-columns:1fr}}

/* Web topic 01 — semantic HTML document structure inspector. */
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-heading{display:none}.html-structure-page-body{display:grid;gap:14px}.html-structure-inspector{display:grid;grid-template-columns:1.15fr .72fr .85fr 1.55fr;grid-template-rows:112px 410px 180px;gap:8px;padding:10px;border:1px solid #ccdde6;border-radius:15px;background:#f8fbfd;box-shadow:0 12px 30px rgba(42,87,112,.08)}.html-structure-inspector>header{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.35fr;grid-template-rows:1fr 28px;align-items:center;padding:8px 12px;border:1px solid #d6e3e9;border-radius:10px;background:#fff}.html-structure-inspector>header>div{display:grid;grid-template-columns:max-content max-content;gap:3px 10px;align-items:center}.html-structure-inspector>header>div span{grid-column:1/-1;color:#52717f;font-size:7px}.html-structure-inspector>header>div b{font-size:15px}.html-structure-inspector>header>div em{padding:3px 8px;border-radius:99px;background:#087f7b;color:#fff;font-style:normal;font-size:7px}.html-structure-inspector>header ol{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0;list-style:none}.html-structure-inspector>header ol li{position:relative;display:flex;gap:6px;align-items:center;min-height:36px;padding:0 8px;border:1px solid #dce6eb;border-radius:7px;color:#2e5364;font-size:8px}.html-structure-inspector>header ol li:not(:last-child):after{position:absolute;right:-15px;color:#79909a;content:"→"}.html-structure-inspector>header ol svg{width:17px;color:#347dd1}.html-structure-inspector>header footer{grid-column:1/-1;display:flex;gap:14px;align-items:end;color:#617985;font-size:7px}.html-structure-inspector>header footer span{display:flex;gap:4px;align-items:center}.html-structure-inspector>header footer i{width:7px;height:7px;background:#6d98ea}.html-structure-inspector>header footer .tone-1{background:#8b6fda}.html-structure-inspector>header footer .tone-2{background:#31b5af}.html-structure-inspector>header footer .tone-3{background:#73bd70}.html-structure-inspector>header footer .tone-4{background:#f19155}.html-structure-inspector>header footer .tone-5{background:#df79aa}.html-structure-inspector>header footer .tone-6{background:#9ba7ab}
.html-source-editor,.html-dom-tree,.html-outline,.html-render-preview,.html-audit-results{overflow:hidden;border:1px solid #d7e3e8;border-radius:9px;background:#fff}.html-source-editor{grid-row:2/4;display:grid;grid-template-rows:34px 1fr}.html-source-editor>header,.html-dom-tree>header,.html-outline>header,.html-render-preview>header,.html-audit-results>header{display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-bottom:1px solid #e0e8ec}.html-source-editor>header b,.html-dom-tree>header b,.html-outline>header b,.html-render-preview>header b,.html-audit-results>header b{font-size:9px}.html-source-editor>header span{margin-left:auto;color:#7a8d96;font-size:7px}.html-source-editor>header button{margin-left:7px;border:1px solid #dce5e9;background:#fff;font-size:7px}.html-source-editor pre{margin:0;padding:8px;overflow:hidden;background:#fbfcfd}.html-source-editor code{display:block;color:#315c88;font:7px/1.52 Consolas,monospace}.html-source-editor code>span{display:block;white-space:pre}.html-source-editor code i{display:inline-block;width:22px;color:#9aa9b0;font-style:normal}.html-source-editor code>span:nth-child(n+8):nth-child(-n+15){color:#7a53b6}.html-source-editor code>span:nth-child(n+16):nth-child(-n+24){color:#178d84}.html-source-editor code>span:nth-child(n+25){color:#b46532}
.html-dom-tree{grid-row:2/4;display:grid;grid-template-rows:34px 1fr}.html-dom-tree>header svg{width:13px}.html-dom-tree ul{margin:0;padding:7px 0 0 16px;list-style:none;color:#3f5966;font:7px/1.68 Consolas,monospace}.html-dom-tree li{position:relative}.html-dom-tree li:before{position:absolute;left:-10px;color:#94a8b1;content:"›"}.html-dom-tree .header,.html-dom-tree .nav,.html-dom-tree .main,.html-dom-tree .section,.html-dom-tree .article,.html-dom-tree .aside,.html-dom-tree .footer{padding-left:4px;border-left:3px solid #6593e7}.html-dom-tree .nav{border-color:#8a6ed6}.html-dom-tree .main{border-color:#39b7af}.html-dom-tree .section{border-color:#79bd72}.html-dom-tree .article{border-color:#f09959}.html-dom-tree .aside{border-color:#dd7aaa}.html-dom-tree .footer{border-color:#97a2a8}
.html-outline{grid-row:2/4;display:grid;grid-template-rows:34px repeat(4,1fr)}.html-outline>header span{color:#758b95;font-size:7px}.html-outline article{padding:8px;border-bottom:1px solid #e5ebee}.html-outline h2,.html-outline h3,.html-outline h4{margin:0 0 4px;font-size:8px}.html-outline h4{padding-left:11px}.html-outline em{padding:2px 4px;border-radius:3px;background:#2e78d1;color:#fff;font-style:normal;font-size:6px}.html-outline h3 em{background:#12a59e}.html-outline h4 em{background:#df8b43}.html-outline p{margin:0;color:#71858e;font-size:6px;line-height:1.5}
.html-render-preview{display:grid;grid-template-rows:34px 1fr}.html-render-preview>header nav{display:flex;gap:10px}.html-render-preview>header svg{width:13px;color:#617985}.html-render-preview>header svg:first-child{color:#158f9d}.rendered-page{display:grid;grid-template-rows:60px 25px 1fr 25px;margin:8px;border:1px solid #dce4e8;background:#fff}.rendered-page>header{display:grid;align-content:center;padding:8px;background:linear-gradient(100deg,#317cb8,#635cc9);color:#fff}.rendered-page>header b{font-size:12px}.rendered-page>header small{font-size:7px}.rendered-page>nav{padding:6px 10px;background:#7657c8;color:#fff;font-size:7px}.rendered-page>main{display:grid;grid-template-columns:1fr 100px;gap:8px;padding:9px;background:#f8fbfd}.rendered-page article h3{margin:2px 0;font-size:9px}.rendered-page article p{margin:3px 0;color:#58717c;font-size:7px}.rendered-page article>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}.rendered-page article>div span{display:grid;padding:7px;border:1px solid #dce4e7;border-radius:4px;font-size:6px}.rendered-page article>div b{font-size:7px}.rendered-page aside{display:grid;align-content:start;gap:5px;padding:8px;background:#fff2f8}.rendered-page aside b{font-size:7px}.rendered-page aside a{color:#327eb6;font-size:6px}.rendered-page>footer{padding:7px;background:#e6ecef;color:#6d8088;text-align:center;font-size:6px}
.html-audit-results{display:grid;grid-template-rows:34px 1fr}.html-audit-results>header span{color:#647b85;font-size:6px}.html-audit-results>header i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#28a36f}.html-audit-results ul{display:grid;margin:0;padding:0;list-style:none}.html-audit-results li{display:grid;grid-template-columns:22px 1fr 36px;gap:6px;align-items:center;padding:6px 10px;border-top:1px solid #e6ecef}.html-audit-results li svg{width:13px;color:#26a16f}.html-audit-results li:nth-child(2) svg{color:#3a8bd6}.html-audit-results li span{display:grid}.html-audit-results li b{font-size:7px}.html-audit-results li small{color:#70848d;font-size:6px}.html-audit-results li em{color:#25875e;font-style:normal;font-size:6px}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#edf6ff)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#f3f0ff)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#ecfaf6)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;min-height:175px;padding:16px;border:1px solid #d8e4e9!important;border-radius:11px;background:linear-gradient(145deg,#fff,#f5faff);text-align:left}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-index{grid-column:1;grid-row:1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-copy{grid-column:2;grid-row:1/3;min-width:0}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-title{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-action{grid-column:2;grid-row:3;justify-content:space-between;padding-top:8px;border-top:1px solid #e0e8ec}
@media(max-width:1100px){.html-structure-inspector{grid-template-columns:1fr 1fr;grid-template-rows:auto}.html-structure-inspector>header{grid-column:1/-1}.html-source-editor,.html-dom-tree,.html-outline,.html-render-preview,.html-audit-results{grid-row:auto}.html-audit-results{grid-column:1/-1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.html-structure-inspector{grid-template-columns:1fr}.html-structure-inspector>header,.html-audit-results{grid-column:1}.html-structure-inspector>header{grid-template-columns:1fr}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:1fr}}
.html-source-editor code{font-size:8px;line-height:1.56}.html-dom-tree ul{font-size:8px;line-height:1.72}.html-outline h2,.html-outline h3{font-size:9px}.html-outline h4{font-size:8px}.html-outline p{font-size:7px}.html-audit-results li b{font-size:8px}.html-audit-results li small{font-size:7px}
.html-structure-inspector{grid-template-rows:112px 410px 184px}

/* Web topic 02 — CSS layout, box model and visual token laboratory. */
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-heading{display:none}.css-layout-page-body{display:grid;gap:14px}.css-layout-lab{display:grid;grid-template-columns:220px minmax(390px,1fr) 300px;grid-template-rows:106px 454px 218px;gap:8px;padding:10px;border:1px solid #d4dce9;border-radius:15px;background:linear-gradient(145deg,#fbfdff,#f8f7ff);box-shadow:0 12px 30px rgba(57,63,115,.08)}.css-layout-lab>header{grid-column:1/-1;display:grid;grid-template-columns:1fr 72px 1.75fr;gap:14px;align-items:center;padding:10px 14px;border:1px solid #dce2ec;border-radius:10px;background:#fff}.css-layout-lab>header>div:first-child{display:grid;gap:3px}.css-layout-lab>header>div:first-child span{color:#527282;font-size:7px}.css-layout-lab>header>div:first-child b{font-size:19px}.css-layout-lab>header>div:first-child small{color:#6d818c;font-size:7px}.css-progress{display:grid;grid-template-columns:42px 1fr;align-items:center}.css-progress>i{grid-row:1/3;display:grid;width:44px;height:44px;place-items:center;border:5px solid #e8edf1;border-top-color:#0d918a;border-right-color:#0d918a;border-radius:50%}.css-progress>b{font-size:12px}.css-progress>small{color:#758892;font-size:6px}.css-layout-lab>header ol{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0;padding:0;list-style:none}.css-layout-lab>header li{display:grid;gap:5px;min-height:48px;padding:7px;border:1px solid #dce3eb;border-radius:7px;color:#495d72;font-size:7px}.css-layout-lab>header li.active{border-color:#4bc0cf;background:#eefbfc;color:#087f85}.css-layout-lab>header li em{font-style:normal;font-size:8px;font-weight:700}
.css-editor,.css-token-panel,.css-layout-canvas,.css-live-preview,.css-computed{overflow:hidden;border:1px solid #dce2eb;border-radius:10px;background:#fff}.css-editor{display:grid;grid-template-rows:36px 1fr}.css-editor>header,.css-token-panel>header,.css-layout-canvas>header,.css-live-preview>header,.css-computed header{display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-bottom:1px solid #e3e7ee}.css-editor>header b,.css-token-panel>header b,.css-layout-canvas>header b,.css-live-preview>header b,.css-computed header b{color:#31566d;font-size:9px}.css-editor select{height:24px;border:1px solid #dde4eb;border-radius:4px;background:#fff;color:#5d7181;font-size:7px}.css-editor pre{margin:0;padding:8px;overflow:hidden;background:#fbfcfe}.css-editor code{display:block;color:#376ea7;font:8px/1.52 Consolas,monospace}.css-editor code>span{display:block;white-space:pre}.css-editor code i{display:inline-block;width:22px;color:#9aa8b3;font-style:normal}.css-editor code>span:nth-child(n+11){color:#7251bb}.css-editor code>span:nth-child(5),.css-editor code>span:nth-child(6),.css-editor code>span:nth-child(7){color:#b66127}
.css-token-panel{display:grid;grid-template-rows:36px 1fr}.css-token-panel>header button{display:flex;gap:3px;align-items:center;border:1px solid #dce3eb;background:#fff;color:#607585;font-size:6px}.css-token-panel>header svg{width:10px}.css-token-panel dl{display:grid;grid-template-columns:66px 1fr;align-content:start;margin:0;padding:8px}.css-token-panel dt{padding:7px 0;border-top:1px solid #edf0f4;color:#445b70;font-size:7px;font-weight:700}.css-token-panel dd{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0;padding:7px 0;border-top:1px solid #edf0f4}.css-token-panel dd span{padding:3px 4px;border:1px solid #e0e4eb;border-radius:3px;color:#667988;font-size:6px}.css-token-panel dd span.active{border-color:#7460e8;background:#f0edff;color:#5941cf}.token-colors i{width:15px;height:15px;border-radius:3px}
.css-layout-canvas{grid-row:2/4;display:grid;grid-template-rows:40px 322px 1fr}.css-layout-canvas>header nav{display:flex;height:100%}.css-layout-canvas>header button{border:0;background:#fff;color:#617486;font-size:7px}.css-layout-canvas>header button.active{border-bottom:2px solid #0b8f8b;color:#087f7b;font-weight:700}.css-layout-canvas>header>span{display:flex;gap:8px;align-items:center;color:#647987;font-size:7px}.css-layout-canvas>header>span i{width:20px;height:10px;border-radius:99px;background:#10a493}.css-layout-canvas>header svg{width:12px}.box-playground{display:grid;grid-template-rows:1fr 30px;padding:12px;background-image:linear-gradient(#edf1f5 1px,transparent 1px),linear-gradient(90deg,#edf1f5 1px,transparent 1px);background-size:20px 20px}.box-margin{position:relative;margin:10px;border:1px dashed #f2a25e;background:rgba(255,171,93,.07)}.box-border{position:absolute;inset:17px;border:2px solid #7860e6;background:rgba(116,91,225,.06)}.box-padding{position:absolute;inset:13px;border:1px solid #39bab9;background:rgba(57,186,185,.08)}.box-margin>em,.box-border>em,.box-padding>em{position:absolute;padding:2px 4px;background:#fff;font-style:normal;font-size:6px}.box-margin>em{left:-8px;top:45%;color:#e47c29}.box-border>em{top:-10px;left:45%;color:#674aca}.box-padding>em{right:-11px;top:45%;color:#129a97}.flex-card{position:absolute;inset:13px;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px}.flex-card article,.css-live-preview article{display:grid;align-content:center;justify-items:center;border:1px dashed #8064df;border-radius:8px;background:linear-gradient(145deg,#fff,#f2efff);color:#273c52}.flex-card article b,.css-live-preview article b{font-size:18px}.flex-card article span,.css-live-preview article span{font-size:7px}.flex-card article small,.css-live-preview article small{color:#738491;font-size:6px}.box-playground>footer{display:flex;gap:18px;align-items:center;color:#637885;font-size:6px}.box-playground>footer i{display:inline-block;width:10px;height:7px;margin-right:4px;background:#ffbc83}.box-playground>footer span:nth-child(2) i{background:#7659e2}.box-playground>footer span:nth-child(3) i{background:#54c4c0}.box-playground>footer span:nth-child(4) i{background:#ded7ff}.layout-tracks{display:grid;grid-template-columns:120px 1fr;gap:8px;align-content:start;padding:8px 12px}.layout-tracks>b{grid-column:1/-1;color:#31566d;font-size:8px}.layout-tracks>span{color:#607888;font-size:7px}.flex-track,.grid-track{display:grid;height:28px;border:1px solid #dce3ed;background:#f8faff}.flex-track{grid-template-columns:1fr 1.5fr 1fr}.grid-track{grid-template-columns:120px 1fr minmax(130px,1fr)}.flex-track i,.grid-track i{display:grid;place-items:center;border-right:1px dashed #7260d8;color:#7056d4;font-style:normal;font-size:7px}.grid-track i{border-color:#3e9be2;color:#2f83c4}
.css-live-preview{display:grid;grid-template-rows:38px 1fr}.css-live-preview>header nav{display:flex;gap:10px;align-items:center}.css-live-preview>header svg{width:14px;color:#758793}.css-live-preview>header svg:first-child{color:#2b87df}.css-live-preview>header span{color:#6d808d;font-size:7px}.css-live-preview>div{padding:20px;background:#f8fafc}.css-live-preview h3{display:flex;gap:7px;align-items:center;margin:0 0 18px;font-size:12px}.css-live-preview h3 em{padding:3px 6px;border-radius:99px;background:#efeaff;color:#7052d7;font-style:normal;font-size:6px}.css-live-preview section{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px;min-height:190px}.css-live-preview article{background:linear-gradient(145deg,#fff,#f0edff)}.css-computed{display:grid;grid-template-columns:1.15fr .85fr}.css-computed>div{display:grid;grid-template-rows:36px 1fr}.css-computed>div:first-child{border-right:1px solid #e2e7ee}.css-computed header code,.css-computed header span{color:#71838f;font-size:6px}.css-computed dl{display:grid;grid-template-columns:1fr 1.5fr;align-content:start;gap:5px;margin:0;padding:9px;color:#5a7180;font-size:6px}.css-computed dt{font-weight:700}.css-computed dd{margin:0}.computed-box>div{align-self:center;justify-self:center}.mini-margin{display:grid;width:135px;height:115px;place-items:center;border:1px solid #f0a15f;background:#fff1e5;color:#be6726;font-size:6px}.mini-border{display:grid;width:105px;height:86px;place-items:center;border:1px solid #7963e6;background:#f0edff;color:#664cca}.mini-padding{display:grid;width:78px;height:60px;place-items:center;border:1px solid #3bbab5;background:#eafafa;color:#158d89}.mini-padding>div{display:grid;width:52px;height:32px;place-items:center;background:#fff;color:#415d6d}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#f1efff)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#eef8ff)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#ecfaf6)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;min-height:175px;padding:16px;border:1px solid #dce2eb!important;border-radius:11px;background:linear-gradient(145deg,#fff,#f7f5ff);text-align:left}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-index{grid-column:1;grid-row:1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-copy{grid-column:2;grid-row:1/3;min-width:0}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-title{display:flex;flex-wrap:wrap;gap:7px}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-action{grid-column:2;grid-row:3;justify-content:space-between;padding-top:8px;border-top:1px solid #e1e6ee}
@media(max-width:1100px){.css-layout-lab{grid-template-columns:220px 1fr;grid-template-rows:auto}.css-layout-lab>header{grid-column:1/-1}.css-layout-canvas{grid-row:auto}.css-live-preview,.css-computed{grid-column:1/-1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.css-layout-lab{grid-template-columns:1fr}.css-layout-lab>header{grid-template-columns:1fr}.css-layout-lab>header ol{grid-template-columns:repeat(2,1fr)}.css-editor,.css-token-panel,.css-layout-canvas,.css-live-preview,.css-computed{grid-column:1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:1fr}}
.css-editor{grid-column:1;grid-row:2}.css-token-panel{grid-column:1;grid-row:3}.css-layout-canvas{grid-column:2;grid-row:2/4}.css-live-preview{grid-column:3;grid-row:2}.css-computed{grid-column:3;grid-row:3}
@media(max-width:1100px){.css-editor{grid-column:1;grid-row:auto}.css-token-panel{grid-column:1;grid-row:auto}.css-layout-canvas{grid-column:2;grid-row:2/4}.css-live-preview,.css-computed{grid-column:1/-1;grid-row:auto}}@media(max-width:760px){.css-editor,.css-token-panel,.css-layout-canvas,.css-live-preview,.css-computed{grid-column:1;grid-row:auto}}
.css-layout-lab{grid-template-rows:106px 454px 244px}

/* Web topic 03 — JavaScript runtime and TypeScript type-safety laboratory. */
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-heading{display:none}.js-ts-page-body{display:grid;gap:14px}.js-ts-runtime-lab{display:grid;grid-template-columns:1.02fr .96fr .92fr;grid-template-rows:96px 235px 120px 100px 100px 86px;gap:8px;padding:10px;border:1px solid #d4dde7;border-radius:15px;background:linear-gradient(145deg,#fbfdff,#f8fbfc);box-shadow:0 12px 30px rgba(40,70,98,.08)}.js-ts-runtime-lab>header{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr max-content;gap:14px;align-items:center;padding:10px 14px;border:1px solid #dce3ea;border-radius:10px;background:#fff}.js-ts-runtime-lab>header>div{display:grid;gap:3px}.js-ts-runtime-lab>header>div span{color:#587282;font-size:7px}.js-ts-runtime-lab>header>div b{font-size:19px}.js-ts-runtime-lab>header>div small{color:#70818d;font-size:7px}.js-ts-runtime-lab>header ol{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none}.js-ts-runtime-lab>header li{position:relative;display:grid;grid-template-columns:22px 1fr;align-items:center;color:#71838e;font-size:7px}.js-ts-runtime-lab>header li:not(:last-child):after{position:absolute;right:-17px;color:#a6b2b8;content:"→"}.js-ts-runtime-lab>header li em{grid-row:1/3;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:#dce5e8;font-style:normal}.js-ts-runtime-lab>header li.active{color:#0a8681}.js-ts-runtime-lab>header li.active em{background:#0b918a;color:#fff}.js-ts-runtime-lab>header li b{font-size:8px}.js-ts-runtime-lab>header li small{font-size:6px}.js-ts-runtime-lab>header nav{display:flex;gap:6px}.js-ts-runtime-lab>header button{display:flex;gap:4px;align-items:center;min-height:28px;border:1px solid #dce3e8;border-radius:6px;background:#fff;color:#536b78;font-size:7px}.js-ts-runtime-lab>header button.run{border-color:#0b8c87;background:#0b8c87;color:#fff}.js-ts-runtime-lab>header button svg{width:11px}
.ts-code-workspace,.js-runtime-flow,.ts-type-results,.js-watch-panel,.js-test-panel,.js-console-panel{overflow:hidden;border:1px solid #dbe3e9;border-radius:9px;background:#fff}.ts-code-workspace{grid-column:1;grid-row:2/6;display:grid;grid-template-columns:88px 1fr;grid-template-rows:38px 1fr 24px}.ts-code-workspace>header{grid-column:1/-1;display:flex;justify-content:space-between;border-bottom:1px solid #e2e8ec}.ts-code-workspace>header>b{padding:11px;font-size:9px}.ts-code-workspace>header nav{display:flex}.ts-code-workspace>header button{display:flex;gap:4px;align-items:center;border:0;border-left:1px solid #e2e8ec;background:#fff;color:#647986;font-size:7px}.ts-code-workspace>header button.active{background:#edf5ff;color:#246ca5}.ts-code-workspace>header svg{width:13px}.ts-file-tree{display:grid;align-content:start;gap:2px;padding:8px;border-right:1px solid #e1e7eb;background:#f8fafb;color:#607682;font-size:7px}.ts-file-tree b{margin-top:5px;color:#3275a4}.ts-file-tree span{padding:4px}.ts-file-tree span.active{border-radius:3px;background:#dfeeff;color:#256ca3}.ts-code-workspace pre{margin:0;padding:8px;overflow:hidden;background:#fbfcfd}.ts-code-workspace code{display:block;color:#3f66a2;font:7px/1.48 Consolas,monospace}.ts-code-workspace code>span{display:block;white-space:pre}.ts-code-workspace code i{display:inline-block;width:20px;color:#9caab2;font-style:normal}.ts-code-workspace code>span:nth-child(n+4):nth-child(-n+9){color:#9a4c86}.ts-code-workspace code>span:nth-child(n+12){color:#197f76}.ts-code-workspace>footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:0 9px;border-top:1px solid #e3e8eb;color:#768891;font-size:6px}
.js-runtime-flow{grid-column:2;grid-row:2/6;display:grid;grid-template-rows:36px 175px 155px 1fr}.js-runtime-flow>header,.ts-type-results>header,.js-watch-panel>header,.js-test-panel>header,.js-console-panel>header{display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-bottom:1px solid #e2e8ec}.js-runtime-flow>header b,.ts-type-results>header b,.js-watch-panel>header b,.js-test-panel>header b,.js-console-panel>header b{color:#176f7a;font-size:9px}.js-runtime-flow>header span{color:#6d818b;font-size:6px}.js-runtime-flow>header i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#24a9ad}.runtime-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border-bottom:1px solid #e3e8ec}.runtime-top article{display:grid;align-content:start;gap:6px;padding:8px;border:1px solid #dfe6ea;border-radius:7px;background:#fafcfd}.runtime-top article>b{font-size:8px}.runtime-top article>span{display:flex;justify-content:space-between;padding:7px;border:1px solid #d9e3e8;border-radius:5px;background:#fff;color:#31566a;font-size:7px}.runtime-top article>span.macro{border-color:#eed3a8;background:#fff8eb}.runtime-top small{color:#84949c;font-size:5px}.runtime-top em{color:#7150b4;font-style:normal;font-size:6px}.runtime-data{display:grid;grid-template-rows:24px 1fr;padding:8px;border-bottom:1px solid #e3e8ec}.runtime-data>b,.runtime-timeline>b{font-size:8px}.runtime-data>div{display:grid;grid-template-columns:1.4fr 14px .65fr 14px .8fr 14px .65fr;align-items:center}.runtime-data span{display:grid;gap:7px;min-height:78px;padding:8px;border:1px solid #d7e3e8;border-radius:6px;color:#315568;font-size:13px;place-items:center}.runtime-data span:first-child{font:6px/1.5 Consolas}.runtime-data strong{font-size:6px}.runtime-data i{color:#3991c1;font-style:normal;text-align:center}.runtime-timeline{display:grid;grid-template-rows:20px 20px 1fr;padding:8px}.runtime-timeline>header{display:flex;justify-content:space-between;border-bottom:1px solid #cbd8dd;color:#72868f;font-size:6px}.runtime-timeline ol{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 0;padding:0;list-style:none}.runtime-timeline li{display:grid;min-height:45px;place-items:center;border:1px solid #bce2e2;border-radius:5px;background:#eefafa;color:#167f7d;text-align:center;font-size:6px}.runtime-timeline li.macro{border-color:#edd19d;background:#fff7e8;color:#bd6c20}
.ts-type-results{grid-column:3;grid-row:2;display:grid;grid-template-rows:36px 1fr 1fr 25px}.ts-type-results>header span{color:#70828c;font-size:6px}.ts-type-results>header em{color:#d65345;font-style:normal}.ts-type-results article{padding:8px;border-bottom:1px solid #e6ebee}.ts-type-results article code{color:#2679be;font:6px Consolas}.ts-type-results article p{margin:5px 0;color:#3e5663;font-size:6px}.ts-type-results article pre{margin:0;color:#bf4d45;font:6px Consolas}.ts-type-results>footer{padding:7px;color:#158587;font-size:6px}.js-watch-panel{grid-column:3;grid-row:3;display:grid;grid-template-rows:30px repeat(4,1fr)}.js-watch-panel p{display:grid;grid-template-columns:55px 1fr max-content 13px;gap:5px;align-items:center;margin:0;padding:0 9px;border-top:1px solid #e6ebee;font-size:6px}.js-watch-panel p small{color:#84939a}.js-watch-panel p svg{width:10px;color:#7b8c94}.js-test-panel{grid-column:3;grid-row:4;display:grid;grid-template-rows:30px repeat(3,1fr)}.js-test-panel>header span{color:#1f916b;font-size:6px}.js-test-panel p{display:grid;grid-template-columns:14px 1fr max-content;align-items:center;margin:0;padding:0 9px;border-top:1px solid #e6ebee;font-size:6px}.js-test-panel p svg{width:11px;color:#25a46f}.js-test-panel p small{color:#809198}.js-console-panel{grid-column:3;grid-row:5;display:grid;grid-template-rows:30px 1fr}.js-console-panel>header button{border:1px solid #dfe5e9;background:#fff;font-size:6px}.js-console-panel pre{margin:0;padding:9px;color:#294c5e;font:7px/1.6 Consolas}.js-console-panel pre span{color:#2b79b7}
.js-ts-pipeline{grid-column:1/-1;display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;gap:4px;align-items:center}.js-ts-pipeline>span{display:grid;grid-template-columns:30px 1fr;align-items:center;min-height:70px;padding:8px;border:1px solid #dce4e9;border-radius:8px;background:#fff}.js-ts-pipeline svg{grid-row:1/4;width:23px}.js-ts-pipeline b{font-size:8px}.js-ts-pipeline small,.js-ts-pipeline em{color:#70828c;font-size:6px;font-style:normal}.js-ts-pipeline span:first-child em{color:#d55347}.js-ts-pipeline>i{color:#6b818c;font-style:normal;text-align:center}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-facts>div:nth-child(1){background:linear-gradient(145deg,#fff,#eef5ff)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-facts>div:nth-child(2){background:linear-gradient(145deg,#fff,#fff8e8)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-facts>div:nth-child(3){background:linear-gradient(145deg,#fff,#ecfaf6)}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-outline .topic-unit-link{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;min-height:175px;padding:16px;border:1px solid #dce3e8!important;border-radius:11px;background:linear-gradient(145deg,#fff,#f5f9ff);text-align:left}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-index{grid-column:1;grid-row:1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-copy{grid-column:2;grid-row:1/3;min-width:0}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-title{display:flex;flex-wrap:wrap;gap:7px}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-action{grid-column:2;grid-row:3;justify-content:space-between;padding-top:8px;border-top:1px solid #e2e7eb}
@media(max-width:1100px){.js-ts-runtime-lab{grid-template-columns:1fr 1fr;grid-template-rows:auto}.js-ts-runtime-lab>header{grid-column:1/-1}.ts-code-workspace,.js-runtime-flow,.ts-type-results,.js-watch-panel,.js-test-panel,.js-console-panel{grid-column:auto;grid-row:auto}.js-ts-pipeline{grid-column:1/-1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.js-ts-runtime-lab{grid-template-columns:1fr}.js-ts-runtime-lab>header{grid-template-columns:1fr}.js-ts-runtime-lab>header ol{grid-template-columns:repeat(2,1fr)}.ts-code-workspace,.js-runtime-flow,.ts-type-results,.js-watch-panel,.js-test-panel,.js-console-panel,.js-ts-pipeline{grid-column:1}.js-ts-pipeline{display:grid;grid-template-columns:1fr}.js-ts-pipeline>i{display:none}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:1fr}}

/* Web topic 06 — interaction and animation timeline workbench. */
section.motion-workbench{grid-template-rows:390px 218px 190px}
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-heading{display:none}.web-motion-page-body{display:grid;gap:14px}.motion-workbench{display:grid;grid-template-columns:190px minmax(390px,1fr) 260px;grid-template-rows:390px 210px 190px;overflow:hidden;border:1px solid #cadfdb;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(25,81,77,.08)}.motion-workbench header{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:0 11px;border-bottom:1px solid #e0e9e8}.motion-workbench header b{font-size:10px}.motion-workbench button{border:1px solid #d9e4e2;border-radius:6px;background:#fff;color:#365653;font-size:7px}.motion-workbench button svg{width:11px}.motion-state-panel{grid-row:1/3;border-right:1px solid #dce8e7;background:#fbfdfc}.motion-state-panel h3{margin:10px 11px 5px;color:#607976;font-size:8px}.motion-state-panel ol{display:grid;gap:3px;margin:0;padding:0 8px;list-style:none}.motion-state-panel li{display:flex;align-items:center;gap:7px;height:30px;padding:0 7px;border-radius:6px;color:#48625f;font-size:8px}.motion-state-panel li.active{background:#f2effc;color:#6c52b4}.motion-state-panel li i{width:7px;height:7px;border-radius:50%;background:#0d9c94}.motion-state-panel li:nth-child(2) i{background:#805fd0}.motion-state-panel li:nth-child(3) i{background:#f39a37}.motion-state-panel li:nth-child(4) i{background:#4b9de2}.motion-state-panel li:nth-child(5) i{background:#3ab16a}.motion-state-panel .triggers li svg{width:12px;color:#56746f}
.motion-stage{display:grid;grid-template-rows:38px 1fr 56px;border-right:1px solid #dce8e7}.motion-stage>header nav{display:flex;align-items:center;gap:6px}.motion-stage>header nav span{padding:4px 6px;border:1px solid #dce6e4;border-radius:5px;font-size:7px}.motion-stage>header nav svg{width:13px;color:#54706d}.motion-stage>header nav svg:first-of-type{color:#07928b}.motion-stage>header button{height:25px;padding:0 10px;background:#f2f5f5}.stage-canvas{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(24,165,153,.09),transparent 34%),#fcfefe}.stage-canvas>svg{position:absolute;inset:12px 6%;width:88%;height:85%;fill:none;stroke:#6a9fe5;stroke-width:2;stroke-dasharray:5 5}.stage-canvas>svg circle:first-of-type{fill:#8b6bd4;stroke:none}.stage-canvas>svg circle:nth-of-type(2){fill:#ef9234;stroke:none}.stage-canvas>svg circle:last-of-type{fill:#51b66d;stroke:none}.stage-canvas article{position:absolute;top:72px;display:grid;gap:5px;justify-items:center;width:122px;padding:14px 8px;border:1px solid #cddfdd;border-radius:12px;background:#fff;text-align:center}.stage-canvas article>svg{width:23px;color:#07948d}.stage-canvas article b{font-size:9px}.stage-canvas article span{color:#6d807e;font-size:6px}.stage-canvas article button{padding:5px 8px;border:0;background:#078f89;color:#fff}.stage-canvas .motion-card{left:50%;z-index:2;width:150px;transform:translateX(-50%);box-shadow:0 12px 26px rgba(17,109,103,.12)}.stage-canvas .ghost{opacity:.23}.stage-canvas .before{left:10px}.stage-canvas .after{right:10px}.motion-stage>footer{display:grid;grid-template-columns:24px 120px 1fr max-content 118px 60px;gap:7px;align-items:center;padding:0 10px;border-top:1px solid #e0e9e8}.motion-stage>footer button{display:grid;width:22px;height:22px;place-items:center;border-radius:50%;color:#078e88}.motion-stage>footer span,.motion-stage>footer time{font-size:7px}.motion-stage>footer>i{height:4px;border-radius:99px;background:#dce7e6}.motion-stage>footer>i em{display:block;width:40%;height:100%;border-radius:inherit;background:#2d9edf}.motion-stage>footer code{font-size:6px}.motion-stage>footer>svg{width:60px;height:34px;fill:none;stroke:#3c83e4;stroke-width:2}
.motion-api{padding-bottom:9px}.motion-api-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}.motion-api-grid label{display:grid;gap:4px;color:#607774;font-size:7px}.motion-api-grid label.wide{grid-column:1/-1}.motion-api-grid label span{display:flex;align-items:center;justify-content:space-between;min-height:27px;padding:0 7px;border:1px solid #dce6e4;border-radius:5px;background:#fbfcfc}.motion-api h3,.motion-reduced h3{margin:4px 10px;font-size:8px}.motion-api>nav{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 9px}.motion-api>nav button{height:28px}.motion-api>nav button.active{border-color:#078e88;background:#078e88;color:#fff}
.keyframe-timeline{grid-column:2;display:grid;grid-template-rows:38px 1fr;border-top:1px solid #dce8e7;border-right:1px solid #dce8e7}.keyframe-timeline>header nav{display:flex;gap:5px}.timeline-grid{display:grid;grid-template-columns:130px 1fr;min-height:0}.timeline-grid>aside{display:grid;padding:7px;border-right:1px solid #e2e9e8}.timeline-grid>aside span{display:flex;align-items:center;gap:5px;font-size:7px}.timeline-grid>aside svg{width:10px;color:#43887f}.timeline-grid>div{position:relative;display:grid;grid-template-rows:24px repeat(6,1fr);overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#edf1f0 calc(20% - 1px) 20%)}.timeline-grid>div header{display:grid;grid-template-columns:repeat(5,1fr);min-height:24px;padding:0;border:0}.timeline-grid time{color:#71827f;font-size:6px;text-align:center}.timeline-grid p{position:relative;margin:0;border-top:1px solid #edf1f0}.timeline-grid p b{position:absolute;top:50%;width:7px;height:7px;background:#7a62cb;transform:translate(-50%,-50%) rotate(45deg)}.timeline-grid p:nth-of-type(2n) b{background:#389edc}.timeline-grid p:nth-of-type(3n) b{background:#e79636}.playhead{position:absolute;z-index:2;left:30%;top:18px;bottom:0;border-left:1px solid #f05e4f}.playhead em{position:absolute;top:-14px;left:-15px;padding:2px 4px;border-radius:4px;background:#f05e4f;color:#fff;font-style:normal;font-size:6px}
.motion-reduced{grid-column:3;display:grid;align-content:start;border-top:1px solid #dce8e7}.motion-reduced article{display:flex;justify-content:space-between;align-items:center;margin:8px;padding:8px;border:1px solid #dce7e5;border-radius:7px;background:#f7fbfa}.motion-reduced article>div{display:grid;grid-template-columns:18px 1fr;align-items:center}.motion-reduced article svg{grid-row:1/3;width:14px;color:#0b8f87}.motion-reduced article b{font-size:8px}.motion-reduced article small{font-size:6px}.motion-reduced article>i{width:25px;height:13px;padding:2px;border-radius:99px;background:#31aa76}.motion-reduced article>i em{display:block;width:9px;height:9px;margin-left:auto;border-radius:50%;background:#fff}.motion-reduced>nav{display:flex;gap:4px;padding:2px 9px}.motion-reduced>nav button{height:25px;padding:0 8px}.motion-reduced>nav button:last-child{border-color:#e4a34d;background:#eea039;color:#fff}.motion-reduced>footer{display:grid;gap:3px;margin:8px;padding:8px;border-top:1px solid #e1e8e7}.motion-reduced>footer b{font-size:8px}.motion-reduced>footer span{font-size:7px}
.motion-bottom{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr 1.05fr .9fr;border-top:1px solid #dce8e7}.motion-bottom>section{min-width:0;border-right:1px solid #dce8e7}.motion-bottom>section>*:not(header){margin-left:9px;margin-right:9px}.motion-bottom nav{display:flex;gap:7px;margin-top:7px;font-size:6px}.motion-bottom nav span.active{color:#078d87}.motion-bottom>section>b{display:block;margin-top:8px;font-size:7px}.gesture-progress{display:block;height:5px;margin-top:7px;border-radius:99px;background:#dce7e6}.gesture-progress em{display:block;width:42%;height:100%;border-radius:inherit;background:#0b9b94}.motion-bottom>section>svg{width:calc(100% - 18px);height:40px;fill:none;stroke:#16a39b;stroke-width:2}.perf-head{display:flex;justify-content:space-between;margin-top:9px;font-size:7px}.perf-head b{color:#158e68;font-size:12px}.motion-bottom section:nth-child(2)>ol{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:8px 9px;padding:0;list-style:none}.motion-bottom section:nth-child(2)>ol li{display:grid;padding:7px;border-radius:5px;background:#f0ecfa;color:#6a54b1;font-size:6px}.motion-bottom section:nth-child(2)>ol li:nth-child(2){background:#fff1e0;color:#b76d23}.motion-bottom section:nth-child(2)>ol li:nth-child(3){background:#e9f7ed;color:#2a8155}.motion-bottom section:nth-child(2)>footer{text-align:center;color:#27865d;font-size:7px}.motion-log{display:grid;gap:5px;margin-top:8px;padding:0;list-style:none}.motion-log li{display:grid;grid-template-columns:35px 55px 1fr;gap:3px;font-size:6px}.motion-log time{color:#7a8b88}.motion-log b{color:#6e55bd}.motion-bottom ul{display:grid;gap:8px;margin-top:9px;padding-left:17px;color:#506a67;font-size:7px}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-outline .topic-unit-link{grid-template-columns:38px minmax(0,1fr);min-height:150px;padding:14px;border:1px solid #cee0de!important;border-radius:11px;background:linear-gradient(145deg,#fff,#fff9f2);align-items:start}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-unit-action{grid-column:2;justify-self:start;margin-top:8px}@media(max-width:1100px){.motion-workbench{grid-template-columns:180px 1fr;grid-template-rows:390px 260px 210px 190px}.motion-api{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.motion-api>header{grid-column:1/-1}.motion-reduced{grid-column:2}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.motion-workbench{grid-template-columns:1fr;grid-template-rows:auto}.motion-state-panel{grid-row:auto}.motion-stage,.motion-api,.keyframe-timeline,.motion-reduced{grid-column:1}.motion-bottom{grid-column:1;grid-template-columns:1fr}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:1fr}}

/* Web topic 05 — Vue / Nuxt component architecture and hydration studio. */
section.vue-architecture-studio{grid-template-columns:200px minmax(350px,1fr) 260px}
section.vue-component-flow{overflow:hidden}
.vue-component-flow .reactivity-orbit span.reactive{right:-8px}
.vue-component-flow .reactivity-orbit .reactive{right:-8px}
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-heading{display:none}.vue-nuxt-page-body{display:grid;gap:14px}.vue-architecture-studio{display:grid;grid-template-columns:230px minmax(410px,1fr) 300px;grid-template-rows:92px 380px 250px;overflow:hidden;border:1px solid #cadfdb;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(25,81,77,.08)}.vue-architecture-studio>header{grid-column:1/-1;display:grid;grid-template-columns:58px 1fr max-content 105px;gap:12px;align-items:center;padding:0 18px;border-bottom:1px solid #dce8e7;background:linear-gradient(105deg,#fff,#f5fcfa)}.vue-architecture-studio>header>svg{width:48px;height:48px}.vue-architecture-studio>header>div{display:grid;gap:2px}.vue-architecture-studio>header span{color:#087b78;font-size:8px}.vue-architecture-studio>header b{font-size:19px}.vue-architecture-studio>header small{color:#667c79;font-size:9px}.vue-architecture-studio>header ol{display:flex;gap:6px;margin:0;padding:0;list-style:none}.vue-architecture-studio>header li{padding:6px 9px;border:1px solid #cfe1df;border-radius:8px;color:#315d59;font-size:8px}.vue-progress{display:grid;grid-template-columns:1fr max-content;gap:4px}.vue-progress b{font-size:12px!important}.vue-progress i{grid-column:1/-1;height:5px;border-radius:99px;background:#dce8e6}.vue-progress em{display:block;width:35%;height:100%;border-radius:inherit;background:#16a085}
.vue-file-tree{border-right:1px solid #dce8e7;background:#fbfdfc}.vue-file-tree header,.vue-component-flow>header,.nuxt-boundaries>header,.vue-studio-bottom header{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 11px;border-bottom:1px solid #e0e9e8}.vue-file-tree header svg,.nuxt-boundaries>header svg,.vue-studio-bottom header svg{width:14px;color:#16a36b}.vue-file-tree header b,.vue-component-flow>header b,.nuxt-boundaries>header b,.vue-studio-bottom header b{font-size:10px}.vue-file-tree header span,.vue-studio-bottom header span{margin-left:auto;padding:2px 6px;border-radius:99px;background:#e8f7f0;color:#19805b;font-size:7px}.vue-file-tree ol{display:grid;gap:2px;margin:0;padding:10px;list-style:none}.vue-file-tree li{display:flex;align-items:center;gap:7px;height:30px;padding:0 7px 0 calc(7px + var(--level) * 10px);border-radius:6px;color:#425f5b;font-size:8px}.vue-file-tree li svg{width:14px}.vue-file-tree li.active{background:#e4f7ef;color:#087f5b;font-weight:700;box-shadow:inset 3px 0 #21a875}
.vue-component-flow{border-right:1px solid #dce8e7}.vue-component-flow>header{justify-content:space-between}.vue-component-flow>header span{color:#647c78;font-size:7px}.component-map{position:relative;height:343px;background:radial-gradient(circle at 78% 50%,rgba(38,178,170,.08),transparent 25%),linear-gradient(#fff,#fbfdfd)}.component-map article{position:absolute;display:grid;place-items:center;height:36px;padding:0 12px;border:1px solid #9ecfc0;border-radius:7px;background:#effaf5;color:#16734f;font-size:8px;font-weight:700}.component-map article:after{position:absolute;top:100%;left:50%;height:28px;border-left:1px solid #4ba982;content:""}.component-map .app-node{left:22%;top:28px;display:flex;gap:6px}.component-map .app-node svg{width:24px}.component-map .layout-node{left:8%;top:102px}.component-map .page-node{left:38%;top:102px;border-color:#7db6e5;background:#f1f7ff;color:#2d6fa7}.component-map .card-node{left:7%;top:178px;border-color:#b4a3df;background:#f6f2ff;color:#684fac}.component-map .child-node{left:39%;top:178px;border-color:#b4a3df;background:#f6f2ff;color:#684fac}.component-map .child-node.second{left:57%}.component-map .props-label,.component-map .emit-label{position:absolute;left:23%;top:72px;padding:4px 9px;border:1px solid #55b88c;border-radius:6px;background:#ecfaf3;color:#19805a;font-style:normal;font-size:8px}.component-map .emit-label{left:26%;top:244px;border-color:#9f86d8;background:#f6f2ff;color:#684fac}.reactivity-orbit{position:absolute;right:4%;top:72px;width:132px;height:132px;border:2px dashed #73acd7;border-radius:50%}.reactivity-orbit>b{position:absolute;left:36px;top:38px;display:grid;width:60px;height:60px;place-items:center;border-radius:50%;background:#33b8ae;color:#fff;text-align:center;font-size:10px}.reactivity-orbit span{position:absolute;color:#326c8f;font-size:7px}.reactivity-orbit .ref{left:54px;top:-14px}.reactivity-orbit .watch{left:-22px;top:56px}.reactivity-orbit .computed{left:43px;bottom:-16px}.reactivity-orbit .reactive{right:-24px;top:56px}
.nuxt-boundaries{display:grid;grid-template-rows:36px 214px 1fr;background:#fbfdfc}.nuxt-tree{display:grid;align-content:start;gap:4px;padding:9px}.nuxt-tree span{height:29px;padding:7px 9px;border-radius:5px;color:#425d59;font-size:8px}.nuxt-tree span:before{margin-right:7px;color:#26a269;content:"▾"}.nuxt-tree span.active{background:#e5f7ef;color:#087b59;font-weight:700}.nuxt-boundaries footer{padding:9px;border-top:1px solid #dce8e7}.nuxt-boundaries footer>b{color:#087b78;font-size:9px}.nuxt-boundaries footer ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 0;padding:0;list-style:none}.nuxt-boundaries footer li{position:relative;display:grid;gap:4px;justify-items:center;text-align:center}.nuxt-boundaries footer li:not(:last-child):after{position:absolute;left:78%;top:13px;width:50%;content:"→"}.nuxt-boundaries footer svg{width:22px;color:#735ac4}.nuxt-boundaries footer li:nth-child(2) svg{color:#2e8bd0}.nuxt-boundaries footer li:nth-child(3) svg{color:#2aa66f}.nuxt-boundaries footer span{font-size:7px}.nuxt-boundaries footer small{display:block;color:#71817e;font-size:6px}
.vue-studio-bottom{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;border-top:1px solid #dce8e7}.vue-studio-bottom>section{min-width:0;border-right:1px solid #dce8e7}.composable-inspector pre,.reactive-store pre{height:198px;margin:0;padding:9px;overflow:hidden;background:#fbfcfc;color:#455f69;font:7px/1.55 Consolas,monospace}.composable-inspector code span{display:block}.composable-inspector code i{display:inline-block;width:18px;color:#a1adaf;font-style:normal}.reactive-store pre{background:#fdfdf9;color:#36564f}.component-api table{width:calc(100% - 16px);margin:8px;border-collapse:collapse;font-size:7px}.component-api th,.component-api td{padding:8px 5px;border:1px solid #e0e8e6;text-align:left}.component-api th{color:#087b78}.hydration-notes article{display:grid;gap:3px;margin:7px;padding:8px;border:1px solid #dfe8e6;border-radius:7px;background:#f7fbff}.hydration-notes article.warn{border-color:#efd7ac;background:#fff8ec}.hydration-notes article.good{border-color:#bfe1ce;background:#effaf4}.hydration-notes article b{font-size:8px}.hydration-notes article small{color:#607572;font-size:7px;line-height:1.45}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-outline .topic-unit-link{grid-template-columns:38px minmax(0,1fr);min-height:150px;padding:14px;border:1px solid #cee0de!important;border-radius:11px;background:linear-gradient(145deg,#fff,#f5fbf8);align-items:start}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-unit-action{grid-column:2;justify-self:start;margin-top:8px}@media(max-width:1100px){.vue-architecture-studio{grid-template-columns:210px 1fr;grid-template-rows:92px 380px 330px 250px}.nuxt-boundaries{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:36px 1fr}.nuxt-boundaries>header{grid-column:1/-1}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.vue-architecture-studio{grid-template-columns:1fr;grid-template-rows:auto}.vue-architecture-studio>header{grid-column:1;grid-template-columns:50px 1fr}.vue-architecture-studio>header ol,.vue-progress{grid-column:1/-1}.vue-file-tree,.vue-component-flow{border-right:0;border-bottom:1px solid #dce8e7}.nuxt-boundaries{grid-column:1;grid-template-columns:1fr}.vue-studio-bottom{grid-column:1;grid-template-columns:1fr}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:1fr}}

/* Web topic 04 — DOM event propagation and reactive state observer. */
section.dom-event-observer{grid-template-columns:210px minmax(330px,1fr) 260px}
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-heading{display:none}.dom-event-page-body{display:grid;gap:14px}.dom-event-observer{display:grid;grid-template-columns:230px minmax(380px,1fr) 300px;grid-template-rows:74px 386px 224px;overflow:hidden;border:1px solid #c9dddc;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(25,81,77,.08)}.dom-event-observer>header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #dce8e7;background:linear-gradient(100deg,#fff,#f5fbff)}.dom-event-observer>header>div{display:grid;gap:3px}.dom-event-observer>header span{color:#087b78;font-size:9px;font-weight:700}.dom-event-observer>header b{font-size:18px}.dom-event-observer>header small{color:#687d7b;font-size:9px}.dom-event-observer>header nav{display:flex;gap:7px}.dom-event-observer>header button{display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid #cedfdd;border-radius:7px;background:#fff;color:#375956;font-size:9px}.dom-event-observer>header button.active{border-color:#078d87;background:#078d87;color:#fff}
.dom-node-tree{overflow:hidden;border-right:1px solid #dce8e7;background:#fbfdfd}.dom-node-tree header,.event-propagation>header,.dom-ui-state header,.dom-observer-bottom header{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 11px;border-bottom:1px solid #e0e9e8}.dom-node-tree header b,.event-propagation>header b,.dom-ui-state header b,.dom-observer-bottom header b{font-size:10px}.dom-node-tree ol{display:grid;gap:2px;margin:0;padding:8px;list-style:none}.dom-node-tree li{display:grid;grid-template-columns:15px 1fr max-content;gap:5px;align-items:center;height:25px;padding:0 6px 0 calc(6px + var(--depth) * 7px);border-radius:5px;color:#4f6b69;font:8px Consolas,monospace}.dom-node-tree li.active{background:#dff5f1;color:#087d77;font-weight:700;box-shadow:inset 3px 0 #0b9a93}.dom-node-tree li em{padding:2px 4px;border-radius:4px;background:#0b9a93;color:#fff;font-style:normal;font-size:6px}
.event-propagation{display:grid;grid-template-rows:52px 1fr 48px;min-width:0;border-right:1px solid #dce8e7}.event-propagation>header{align-items:flex-start;padding-top:9px}.event-propagation>header>div{display:grid;gap:2px}.event-propagation>header>div span{color:#718482;font-size:7px}.event-propagation>header nav{display:flex;gap:8px}.event-propagation>header nav span{font-size:7px}.event-propagation>header nav i{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:#3b82d0}.event-propagation>header nav span:nth-child(2) i{background:#e58c36}.event-propagation>header nav span:nth-child(3) i{background:#7562c8}.propagation-flow{display:grid;grid-template-columns:1fr 112px 1fr;gap:8px;padding:12px;background:#f8fbfb}.propagation-flow ol{display:grid;gap:4px;margin:0;padding:0;list-style:none}.propagation-flow li{display:grid;grid-template-columns:18px 1fr 12px;align-items:center;height:31px;padding:0 6px;border:1px solid #cfe0e7;border-radius:6px;background:#f4f9ff;color:#315e82;font:7px Consolas,monospace}.propagation-flow li em{display:grid;width:15px;height:15px;place-items:center;border-radius:50%;background:#dcecff;font-style:normal}.propagation-flow .bubble li{grid-template-columns:12px 1fr 18px;border-color:#d8d0ed;background:#f7f5ff;color:#614fa4}.propagation-flow article{align-self:center;display:grid;gap:6px;justify-items:center;padding:13px 6px;border:2px solid #e59645;border-radius:12px;background:#fff9ef;text-align:center}.propagation-flow article>span{color:#b76d28;font-size:7px}.propagation-flow article>svg{width:25px;color:#df8130}.propagation-flow article>b{font:9px Consolas,monospace}.propagation-flow article small,.propagation-flow article code{font-size:6px}.event-propagation>footer{display:flex;align-items:center;justify-content:space-around;border-top:1px solid #e0e9e8}.event-propagation>footer span{display:flex;align-items:center;gap:4px;font-size:7px}
.dom-ui-state{display:grid;grid-template-rows:225px 1fr;background:#fbfdfc}.dom-ui-state>section{overflow:hidden;border-bottom:1px solid #dce8e7}.dom-ui-state>section:first-child>*:not(header){margin-left:12px;margin-right:12px}.dom-ui-state h3{display:flex;justify-content:space-between;margin-top:11px;font-size:11px}.dom-ui-state label{position:relative;display:flex;align-items:center;gap:7px;height:30px;margin-top:5px;padding:0 8px;border:1px solid #dde8e7;border-radius:6px;background:#fff;font-size:8px}.dom-ui-state label.selected{border-color:#6fc7bd;background:#eaf9f6}.dom-ui-state label svg{position:absolute;right:8px;width:14px;color:#078d87}.dom-ui-state button{height:27px;margin-top:8px;border:1px dashed #8cc9c3;border-radius:6px;background:#f4fbfa;color:#0b807a;font-size:8px}.dom-ui-state pre{height:118px;margin:0;padding:10px;overflow:hidden;background:#142725;color:#bfe3dc;white-space:pre-wrap}.dom-ui-state code{font:8px/1.55 Consolas,monospace}
.dom-observer-bottom{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr 1.2fr .9fr;border-top:1px solid #dce8e7}.dom-observer-bottom>section{min-width:0;border-right:1px solid #dce8e7}.dom-event-log ol{display:grid;gap:2px;margin:0;padding:8px;list-style:none}.dom-event-log li{display:grid;grid-template-columns:58px 58px 1fr;gap:5px;align-items:center;min-height:18px;font:7px Consolas,monospace}.dom-event-log time{color:#80908f}.dom-event-log li b{color:#287eb8}.dom-event-log li:nth-child(4) b{color:#db7d26}.dom-event-log li:nth-child(n+5) b{color:#6955b5}.dom-listeners table{width:calc(100% - 16px);margin:8px;border-collapse:collapse;font:7px Consolas,monospace}.dom-listeners td{padding:7px 4px;border-bottom:1px solid #e5eceb}.dom-state-diff>div{display:grid;grid-template-columns:1fr 20px 1fr;gap:5px;align-items:center;padding:12px 10px}.dom-state-diff article{display:grid;gap:7px;padding:9px;border:1px solid #dde7e6;border-radius:7px}.dom-state-diff article:last-child{border-color:#8ccbc3;background:#effaf7}.dom-state-diff code{font:7px/1.6 Consolas,monospace}.dom-state-diff footer{margin:0 10px;padding:7px;border-radius:6px;background:#e8f7ee;color:#27805a;font-size:7px}.dom-delegation>div{display:flex;align-items:center;gap:12px;margin:12px;padding:10px;border:1px solid #d7ceee;border-radius:9px;background:#f7f5ff;color:#59499c}.dom-delegation p{margin:10px 12px;font-size:7px;line-height:1.6}
.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-outline .topic-unit-link{grid-template-columns:38px minmax(0,1fr);min-height:126px;padding:14px;border:1px solid #cee0de!important;border-radius:11px;background:linear-gradient(145deg,#fff,#f8fbfb);align-items:start}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-unit-action{grid-column:2;justify-self:start;margin-top:8px}@media(max-width:1100px){.dom-event-observer{grid-template-columns:210px 1fr;grid-template-rows:74px 386px 330px 224px}.dom-ui-state{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.dom-event-observer{grid-template-columns:1fr;grid-template-rows:auto}.dom-event-observer>header{grid-column:1;flex-direction:column;gap:10px;padding:14px}.dom-ui-state{grid-column:1;grid-template-columns:1fr}.dom-observer-bottom{grid-column:1;grid-template-columns:1fr}.tutorial-workspace[data-route="web"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:1fr}}
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-heading{background:linear-gradient(120deg,#07151f,#112936);color:#fff;border-color:#244654}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-heading h2{color:#f5fbfd}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-heading p,.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .content-kicker{color:#9bb6c0}.canvas-physics-page-body{display:grid;gap:14px}.matter-physics-lab{display:grid;grid-template-columns:190px 1fr 230px;grid-template-rows:190px 420px 210px 210px 76px;gap:7px;padding:7px;border:1px solid #284654;border-radius:15px;background:#081722;color:#dcecf1}.matter-physics-lab>section,.matter-physics-lab>aside,.matter-physics-lab>footer,.matter-unit-flow,.matter-stage-hero{overflow:hidden;border:1px solid #2b4958;border-radius:8px;background:#10232e}.matter-physics-lab header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #2b4958}.matter-physics-lab header b{font-size:8px}.matter-stage-hero{grid-column:1/-1;display:grid;grid-template-columns:1fr 520px;align-items:center;padding:16px 25px;background:radial-gradient(circle at 76% 36%,rgba(25,185,190,.16),transparent 25%),#0a1b26}.matter-stage-hero>div{display:grid;justify-items:start}.matter-stage-hero b{font-size:24px;color:#fff}.matter-stage-hero span{margin:7px 0;padding:6px 14px;border:1px solid #2dd3bd;border-radius:20px;color:#4be0cb;font-size:11px}.matter-stage-hero small{max-width:520px;color:#9db6c0;font-size:7px}.matter-stage-hero svg{width:100%;height:150px;fill:rgba(20,190,195,.18);stroke:#37d8d2;stroke-width:2}.matter-stage-hero .matter-spring{fill:none;stroke:#7b63eb}.matter-unit-flow{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:7px;background:#0b1d29}.matter-unit-flow article{display:grid;grid-template-columns:24px 18px 1fr;align-items:center;min-height:54px;padding:6px;border:1px solid #315264;border-radius:6px}.matter-unit-flow em{grid-row:1/3;color:#64bfd8;font-size:8px;font-style:normal}.matter-unit-flow svg{width:14px;color:#52d7c5}.matter-unit-flow b{font-size:7px}.matter-unit-flow small{grid-column:2/4;color:#7f9daa;font-size:5px}.matter-scene-tree{grid-row:3/5}.matter-scene-tree ol{margin:0;padding:4px 0;list-style:none}.matter-scene-tree li{display:grid;grid-template-columns:19px 1fr 14px;align-items:center;height:31px;padding:0 8px;border-bottom:1px solid #263f4c;font-size:6px}.matter-scene-tree li svg{width:12px;color:#47cfc2}.matter-scene-tree footer{padding:10px;color:#63d9ad;font-size:6px}.matter-world{grid-column:2;position:relative}.matter-world>header nav{display:flex;gap:14px}.matter-world>header svg{width:12px}.running{color:#55db96}.running i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#47dd91}.matter-world>svg{width:100%;height:calc(100% - 35px)}.matter-grid{fill:url(#matter-grid);stroke:#1d3744}.matter-grid+path,.matter-grid~defs path{stroke:#26424f}.matter-ground{fill:rgba(116,145,158,.18);stroke:#9cb2bc;stroke-width:3}.matter-ball{fill:rgba(49,210,116,.55);stroke:#54e48b;stroke-width:2}.matter-box{fill:rgba(38,139,231,.55);stroke:#50adff;stroke-width:2}.matter-poly{fill:rgba(235,128,35,.48);stroke:#ff9b37;stroke-width:2}.matter-chain,.matter-pendulum{fill:rgba(137,89,224,.38);stroke:#a875ee;stroke-width:3}.matter-spring-body{fill:rgba(40,123,218,.65);stroke:#5fb0ff;stroke-width:2}.matter-vectors path{fill:none;stroke:#4de174;stroke-width:2;marker-end:none}.matter-bounds rect{fill:none;stroke:#52db8a;stroke-dasharray:5 4}.matter-contact{fill:#ff8b31;stroke:#ffd0a2}.matter-drag{position:absolute;left:58%;bottom:42px;padding:5px 8px;border-radius:4px;background:#142a36;font-size:6px}.matter-inspector{grid-column:3;grid-row:3/5}.matter-inspector>strong{display:block;margin:8px;font-size:7px}.matter-inspector dl{margin:0 8px}.matter-inspector dl div{display:grid;grid-template-columns:1fr 72px;align-items:center;margin:6px 0;font-size:6px}.matter-inspector dd{margin:0;padding:5px;border:1px solid #335260;border-radius:3px;background:#172d38}.matter-inspector section{margin:8px;padding:8px;border-top:1px solid #314b57;font-size:6px}.matter-inspector p{display:flex;justify-content:space-between}.matter-inspector code{color:#6fd8e0}.matter-inspector button,.matter-challenge button{display:block;margin:8px auto;padding:7px 15px;border:1px solid #3c6170;border-radius:4px;background:#152c38;color:#dcebf0;font-size:6px}.matter-events{grid-column:2}.matter-events>div{display:grid;grid-template-columns:150px 1fr;gap:8px;padding:8px}.matter-events table{width:100%;border-collapse:collapse;font-size:6px;text-align:center}.matter-events td{padding:7px;border:1px solid #294b58;color:#54d895}.matter-events ol{margin:0;padding:0;list-style:none}.matter-events li{display:grid;grid-template-columns:8px 55px 95px 1fr;gap:4px;align-items:center;min-height:28px;border-bottom:1px solid #29414c;font-size:5px}.matter-events li i{width:5px;height:5px;border-radius:50%;background:#55d98f}.matter-events li b{color:#58db93}.matter-events time{color:#7695a1}.matter-constraints{grid-column:2}.matter-constraints svg{width:100%;height:165px;fill:#7965c9;stroke:#956fec;stroke-width:2}.matter-constraints circle{stroke:#62d5a5;stroke-width:2}.matter-simulation{grid-column:2}.matter-simulation dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px}.matter-simulation dl div{display:flex;justify-content:space-between;padding:6px;border-bottom:1px solid #2b4551;font-size:6px}.matter-simulation dd{margin:0;color:#6fd7e0}.matter-simulation footer{margin:8px;padding:8px;border-radius:5px;background:#183a31;color:#62dc9c;font-size:6px}.matter-performance{grid-column:2}.matter-performance svg{width:100%;height:145px}.matter-performance path{fill:none;stroke-width:3}.matter-performance .bodies{stroke:#48d36f}.matter-performance .fps{stroke:#4eaef2}.matter-performance footer{text-align:center;color:#55c9e7;font-size:7px}.matter-challenge{grid-column:3;grid-row:5/7}.matter-challenge>p,.matter-challenge>strong,.matter-challenge>small{display:block;margin:8px;font-size:6px}.matter-challenge>div{position:relative;height:72px;margin:8px;border:1px solid #31505e;background:#0b1b24}.matter-challenge>div span{position:absolute;left:25px;bottom:14px;width:130px;height:4px;background:#738b94;transform:rotate(-8deg)}.matter-challenge>div em{position:absolute;right:18px;bottom:14px;width:4px;height:38px;background:#e5654b}.challenge-ball{position:absolute;left:18px;bottom:28px;width:19px;height:19px;border-radius:50%;background:#58d87e}.matter-challenge>strong{color:#55dc91;font-size:8px}.matter-challenge>small{color:#ec6f59}.matter-challenge button{border-color:#98493e;color:#ef715d}.matter-acceptance{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(6,1fr) 120px;align-items:center;gap:5px;padding:8px}.matter-acceptance article{display:grid;grid-template-columns:18px 1fr;font-size:6px}.matter-acceptance article svg{grid-row:1/3;width:13px;color:#55db9a}.matter-acceptance article span{color:#55d895}.matter-acceptance>strong{color:#55d895;font-size:18px}.matter-acceptance>strong small{font-size:7px}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.matter-physics-lab{grid-template-columns:180px 1fr;grid-template-rows:auto}.matter-stage-hero{grid-template-columns:1fr 360px}.matter-inspector,.matter-challenge{grid-column:1/-1;grid-row:auto}.matter-acceptance{grid-template-columns:repeat(3,1fr)!important}}@media(max-width:680px){.matter-physics-lab{grid-template-columns:1fr}.matter-stage-hero,.matter-unit-flow{grid-template-columns:1fr}.matter-scene-tree,.matter-world,.matter-inspector,.matter-events,.matter-constraints,.matter-simulation,.matter-performance,.matter-challenge,.matter-acceptance{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:1fr}}
.matter-physics-lab{grid-template-rows:190px 70px 420px 210px 210px 210px 76px}.matter-world{grid-row:3}.matter-scene-tree,.matter-inspector{grid-row:3/6}.matter-events{grid-row:4}.matter-constraints{grid-row:5}.matter-simulation{grid-column:1;grid-row:6}.matter-performance{grid-column:2;grid-row:6}.matter-challenge{grid-column:3;grid-row:6}.matter-acceptance{grid-row:7}
.matter-world defs path{fill:none;stroke:#1c3440;stroke-width:1}.matter-challenge>p,.matter-challenge>strong,.matter-challenge>small{margin:6px}.matter-challenge button{margin:5px auto;padding:5px 12px}
.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-heading{background:linear-gradient(115deg,#081827,#18203b);color:#fff;border-color:#233e55}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-heading h2{color:#fff}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-heading p,.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .content-kicker{color:#a0b8ca}.canvas-pixi-page-body{display:grid;gap:14px}.pixi-render-studio{display:grid;grid-template-columns:190px 1fr 230px;grid-template-rows:170px 70px 450px 245px 245px;gap:7px;padding:7px;border:1px solid #213d54;border-radius:15px;background:#071725;color:#dcebf3}.pixi-render-studio>section,.pixi-render-studio>aside,.pixi-render-studio>header,.pixi-render-studio>nav{overflow:hidden;border:1px solid #28485e;border-radius:8px;background:#0b2030}.pixi-render-studio header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #28485e}.pixi-render-studio header b{font-size:8px}.pixi-studio-hero{grid-column:1/-1;display:grid!important;grid-template-columns:430px 1fr;align-items:center;padding:0 16px!important;background:#061521!important}.pixi-studio-hero>div:first-child{display:grid;gap:8px}.pixi-studio-hero b{font-size:25px!important}.pixi-studio-hero b i{color:#f053b1;font-style:normal}.pixi-studio-hero span{color:#35e0a5;font-size:10px}.pixi-city-preview{position:relative;height:150px;background:radial-gradient(circle at 45% 45%,#12a6b0 0 3%,transparent 4%),radial-gradient(circle at 55% 40%,rgba(228,63,179,.55),transparent 18%),linear-gradient(135deg,#17384b,#17223d)}.pixi-city-preview i{position:absolute;width:45px;height:32px;border:1px solid #46d3c1;background:#143d4c;transform:rotate(8deg);box-shadow:0 0 14px rgba(76,222,196,.35)}.pixi-city-preview i:nth-child(3n){border-color:#f36bbd;background:#48234b}.pixi-city-preview i:nth-child(4n){border-color:#f3b64d;background:#49371b}.pixi-city-preview em{position:absolute;left:42%;top:35%;width:50px;height:50px;border:8px solid #3fbaf5;border-radius:50%;box-shadow:0 0 30px #1eb9e7}.pixi-city-preview strong{position:absolute;inset:15px;border:2px dashed #48db94}.pixi-unit-flow{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:7px}.pixi-unit-flow article{display:grid;grid-template-columns:24px 18px 1fr;align-items:center;padding:5px;border:1px solid #284b63;border-radius:6px}.pixi-unit-flow em{grid-row:1/3;color:#3de0b0;font-size:8px;font-style:normal}.pixi-unit-flow svg{width:13px;color:#54c9ff}.pixi-unit-flow b{font-size:6px}.pixi-unit-flow small{grid-column:2/4;color:#7fa0b3;font-size:5px}.pixi-scene-tree{grid-row:3}.pixi-scene-tree ol{margin:0;padding:4px;list-style:none}.pixi-scene-tree li{display:grid;grid-template-columns:18px 1fr 12px;align-items:center;height:29px;padding:0 6px;font-size:6px}.pixi-scene-tree li:not(.folder){padding-left:18px}.pixi-scene-tree li svg{width:11px;color:#47d6b1}.pixi-scene-tree footer{padding:8px;border-top:1px solid #29495e;text-align:center;color:#72a8bb;font-size:6px}.pixi-viewport{grid-column:2;position:relative}.pixi-viewport>header nav{display:flex;gap:8px;font-size:5px}.pixi-world{position:relative;height:calc(100% - 35px);overflow:hidden;background:linear-gradient(30deg,rgba(25,107,89,.55),transparent 35%),radial-gradient(circle at 55% 48%,#196a89,transparent 7%),repeating-linear-gradient(135deg,#102c3d 0 30px,#12374a 31px 60px)}.pixi-world .sprite{position:absolute;width:12px;height:12px;border:1px solid #6ff2b4;border-radius:3px;background:#24aa77;box-shadow:0 0 8px #21c88d}.pixi-world .sprite-1{border-color:#61bffc;background:#317dcc}.pixi-world .sprite-2{border-color:#f36dbb;background:#a52f77}.pixi-world .sprite-3{border-color:#f2b348;background:#a66524}.pixi-world .sprite-4{width:18px;height:18px;border-color:#9a72ee;background:#6444a9;transform:rotate(45deg)}.camera-bounds,.hit-bounds{position:absolute;left:16%;top:12%;right:14%;bottom:13%;border:2px dashed #4ce295}.hit-bounds{left:28%;top:28%;right:29%;bottom:30%;border-color:#a172ef}.pixi-world aside{position:absolute;left:8px;top:8px;width:105px;padding:8px;border:1px solid #2f5268;border-radius:4px;background:rgba(5,20,31,.9);font-size:6px}.pixi-world aside p{margin:4px 0}.pixi-world aside strong,.pixi-world aside em{display:block;margin-top:8px;color:#52df9c;font-style:normal}.pixi-world aside em{color:#ef648b}.pixi-inspector{grid-column:3;grid-row:3}.pixi-inspector>strong{display:block;padding:8px;font-size:6px}.pixi-inspector section{padding:7px 9px;border-top:1px solid #29495e}.pixi-inspector section>b{font-size:6px;color:#56cce8}.pixi-inspector p{display:flex;justify-content:space-between;align-items:center;margin:5px 0;font-size:6px}.switch{width:19px;height:9px;border-radius:8px;background:#314b59}.switch.on{background:#18b89b}.pixi-inspector code,.pixi-inspector dd{padding:4px;background:#132d3c;color:#bed4df}.pixi-inspector dl div{display:grid;grid-template-columns:62px 1fr;margin:6px 0;font-size:5px}.pixi-inspector dd{margin:0}.pixi-assets{grid-column:1;grid-row:4/6}.pixi-assets>div{display:grid;grid-template-columns:1fr 90px;gap:5px;padding:7px}.pixi-assets ol{margin:0;padding:0;list-style:none}.pixi-assets li{display:grid;grid-template-columns:1fr 65px 42px;align-items:center;height:31px;font-size:5px}.pixi-assets li>i{height:4px;background:#203f52}.pixi-assets li>i em{display:block;width:100%;height:100%;background:#3bd39f}.pixi-assets li small{text-align:right}.atlas-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;align-content:start;padding-top:6px}.atlas-grid i{height:16px;background:#39c28f}.atlas-grid i.atlas-1{background:#3e8dd7}.atlas-grid i.atlas-2{background:#9a58dd}.atlas-grid i.atlas-3{background:#e0489b}.atlas-grid i.atlas-4{background:#dd9a34}.pixi-assets footer{padding:7px;color:#47dda5;font-size:6px}.pixi-batches{grid-column:2;grid-row:4}.batch-summary{display:grid;grid-template-columns:repeat(4,1fr);padding:8px}.batch-summary strong{color:#4ce1ac;font-size:14px}.batch-summary small{display:block;color:#87a7b7;font-size:5px}.pixi-batches table,.pixi-culling table{width:calc(100% - 14px);margin:0 7px;border-collapse:collapse;font-size:5px}.pixi-batches td,.pixi-culling td{padding:4px;border-bottom:1px solid #294858}.pixi-batches footer,.pixi-culling footer{padding:7px;color:#48dfa7;font-size:6px}.pixi-culling{grid-column:2;grid-row:5;position:relative}.pixi-culling table{width:68%;margin-top:8px}.cull-ring{position:absolute;right:20px;top:65px;display:grid;place-items:center;width:75px;height:75px;border:10px solid #40d396;border-left-color:#263e50;border-radius:50%}.cull-ring b{font-size:12px}.cull-ring small{display:block;font-size:5px}.pixi-performance{grid-column:3;grid-row:4}.pixi-performance>div{display:grid;grid-template-columns:repeat(3,1fr);padding:8px}.pixi-performance strong{color:#43e6a4;font-size:15px}.pixi-performance strong:nth-child(2){color:#51c7ff}.pixi-performance strong:nth-child(3){color:#ad79f2}.pixi-performance small{display:block;color:#8ca9b7;font-size:5px}.pixi-performance svg{width:100%;height:145px}.pixi-performance path{fill:none;stroke-width:2}.pixi-performance .fps{stroke:#39de99}.pixi-performance .frame{stroke:#44bdf0}.pixi-performance .gpu{stroke:#a967e5}.pixi-heatmap{grid-column:3;grid-row:5;position:relative}.pixi-heatmap>div{position:relative;height:165px;margin:8px;background:linear-gradient(135deg,#123449,#1a2445)}.pixi-heatmap>div i{position:absolute;width:35px;height:35px;border-radius:50%;background:radial-gradient(circle,#f43061,#ffca35 35%,#1dd2ed 70%,transparent 72%)}.pixi-heatmap footer{padding:0 8px;font-size:5px}.pixi-acceptance{grid-column:3;grid-row:4/6;display:none}.pixi-acceptance ul{margin:8px;padding:0;list-style:none}.pixi-acceptance li{display:grid;grid-template-columns:16px 1fr 35px;align-items:center;padding:7px 0;border-bottom:1px solid #29495d;font-size:5px}.pixi-acceptance li svg{width:11px;color:#47dba1}.pixi-acceptance li strong{color:#4ade9f}.pixi-acceptance button{display:block;width:calc(100% - 16px);margin:8px;padding:7px;border:0;border-radius:4px;background:#19b8be;color:#02151f;font-size:6px}.pixi-acceptance button.secondary{border:1px solid #34576a;background:transparent;color:#cee1e8}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.pixi-render-studio{grid-template-columns:180px 1fr;grid-template-rows:auto}.pixi-studio-hero{grid-template-columns:350px 1fr}.pixi-inspector{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.pixi-render-studio{grid-template-columns:1fr}.pixi-studio-hero,.pixi-unit-flow{grid-template-columns:1fr}.pixi-scene-tree,.pixi-viewport,.pixi-inspector,.pixi-assets,.pixi-batches,.pixi-culling,.pixi-performance,.pixi-heatmap{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="canvas"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:1fr}}
.pixi-render-studio{grid-template-rows:170px 70px 450px 245px 245px 76px}.pixi-acceptance{grid-column:1/-1;grid-row:6;display:grid;grid-template-columns:110px 1fr 105px 105px;align-items:center;padding:7px}.pixi-acceptance>header{border:0}.pixi-acceptance ul{display:grid;grid-template-columns:repeat(7,1fr);margin:0}.pixi-acceptance li{grid-template-columns:14px 1fr;padding:4px;border:0}.pixi-acceptance li strong{grid-column:2}.pixi-acceptance button{width:auto;margin:4px}
.pixi-assets>div{grid-template-columns:minmax(0,1fr) 68px}.pixi-assets li{grid-template-columns:minmax(0,1fr) 40px 34px}.pixi-assets li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.atlas-grid{grid-template-columns:repeat(4,1fr)}
.pixi-studio-hero>div:first-child{min-width:0}.pixi-studio-hero b{font-size:23px!important;white-space:nowrap}.pixi-city-preview{height:142px}.pixi-heatmap footer{overflow:hidden;font-size:4px;white-space:nowrap}
.tutorial-workspace[data-route="three"] .route-heading{background:linear-gradient(115deg,#08162d,#19244d);color:#fff;border-color:#284a81}.tutorial-workspace[data-route="three"] .route-heading h2{color:#f6f9ff}.tutorial-workspace[data-route="three"] .route-heading p,.tutorial-workspace[data-route="three"] .route-heading .content-kicker{color:#a9bce4}.three-route-universe{display:grid;gap:14px}.three-orbit-hero{display:grid;grid-template-columns:430px 1fr;min-height:330px;overflow:hidden;border:1px solid #244a83;border-radius:18px;background:radial-gradient(circle at 67% 44%,rgba(59,117,239,.3),transparent 27%),linear-gradient(120deg,#07152d,#101d42);color:#eef5ff;box-shadow:0 18px 38px rgba(20,51,104,.18)}.three-orbit-hero>div:first-child{display:grid;align-content:center;justify-items:start;gap:13px;padding:35px}.three-orbit-hero b{font-size:27px}.three-orbit-hero strong{color:#a9c9ff;font-size:17px}.three-orbit-hero p{max-width:390px;color:#9fb1d5;font-size:9px;line-height:1.8}.three-orbit-hero nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.three-orbit-hero nav span{display:flex;align-items:center;gap:5px;color:#c4d5f2;font-size:7px}.three-orbit-hero nav svg{width:14px;color:#55c9ff}.three-diorama{position:relative;min-height:330px;background:linear-gradient(transparent 69%,rgba(24,73,142,.45)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(54,118,201,.16) 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(54,118,201,.14) 32px)}.three-globe{position:absolute;left:35%;top:48px;width:170px;height:170px;border:2px solid #54bfff;border-radius:50%;background:conic-gradient(from 25deg,#2759a9,#3b97d5,#86b55d,#3478c1,#562f9b,#2759a9);box-shadow:0 0 40px rgba(62,158,255,.6),inset 0 0 35px rgba(3,17,46,.65)}.three-globe:before,.three-globe:after{content:"";position:absolute;inset:30px -12px;border:1px solid rgba(191,225,255,.6);border-radius:50%;transform:rotate(23deg)}.three-globe:after{inset:-5px 55px;transform:rotate(-15deg)}.three-globe em{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:rotate(calc(var(--n,1)*30deg)) translateX(100px)}.orbit-ring{position:absolute;left:23%;top:92px;width:330px;height:120px;border:2px solid #6fb4ff;border-radius:50%;transform:rotate(-12deg);box-shadow:0 0 15px #367fe4}.ring-b{left:29%;top:75px;width:260px;height:150px;border-color:#b878ff;transform:rotate(22deg)}.camera-frustum{position:absolute;left:8%;top:128px;width:80px;height:65px;border:2px solid #78c7ff;clip-path:polygon(0 30%,35% 30%,100% 0,100% 100%,35% 70%,0 70%)}.three-robot{position:absolute;left:27%;bottom:28px;width:48px;height:70px;border-radius:22px 22px 15px 15px;background:#e5f3ff;box-shadow:0 0 25px #52b8ff}.three-robot i{position:absolute;left:8px;top:8px;width:32px;height:20px;border-radius:10px;background:#0b2552}.three-robot b{position:absolute;left:18px;top:14px;width:12px;height:6px;border-radius:5px;background:#45d7ff}.xr-gate{position:absolute;right:7%;top:47px;display:grid;place-items:center;width:83px;height:175px;border:4px solid #438cff;border-radius:45px 45px 14px 14px;color:#a3c9ff;font-size:31px;box-shadow:0 0 25px #257af0,inset 0 0 25px #1e5ed0}.three-hud{position:absolute;right:20%;bottom:24px;padding:10px;border:1px solid #315990;border-radius:6px;background:rgba(5,20,48,.84);color:#56d4ff;font:7px/1.6 Consolas,monospace}.three-light{position:absolute;right:31%;top:45px;width:15px;height:15px;border-radius:50%;background:#fff5bc;box-shadow:0 0 25px 12px #ffb54a}.three-orbit-path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:18px 30px;overflow:hidden;border:1px solid #c8d8f3;border-radius:16px;background:linear-gradient(90deg,#eaf5ff,#f0e9ff,#fff4e8)}.three-orbit-path:before{content:"";position:absolute;left:8%;right:8%;top:45px;height:3px;background:linear-gradient(90deg,#348cf0,#8c58e7,#efa846,#f06c75)}.three-orbit-path li{z-index:1;display:grid;grid-template-columns:58px 1fr;align-items:center;list-style:none}.three-orbit-path em{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border:2px solid #388fe8;border-radius:50%;background:#fff;color:#368de6;box-shadow:0 0 18px rgba(48,136,231,.28)}.three-orbit-path li:nth-child(2) em{border-color:#8d5ae2;color:#8d5ae2}.three-orbit-path li:nth-child(3) em{border-color:#e9a038;color:#e9a038}.three-orbit-path li:nth-child(4) em{border-color:#e96c72;color:#e96c72}.three-orbit-path svg{width:25px}.three-orbit-path b{font-size:13px}.three-orbit-path small{color:#62758f;font-size:7px}.three-topic-portals{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.three-topic-portals button{display:grid;grid-template-rows:24px 110px auto 1fr 20px;min-width:0;min-height:245px;padding:10px;overflow:hidden;border:1px solid #345990;border-radius:13px;background:linear-gradient(150deg,#0d2346,#151838);color:#f0f5ff;text-align:left}.three-topic-portals button:nth-child(2n){border-color:#7654b5;background:linear-gradient(150deg,#1d1c48,#2d174a)}.three-topic-portals button:nth-child(3n){border-color:#b67546;background:linear-gradient(150deg,#32213c,#3e2419)}.three-topic-portals button>em{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#438fea;color:#fff;font-size:7px;font-style:normal}.portal-art{position:relative;display:block;margin:3px -3px}.portal-art i,.portal-art strong,.portal-art small{position:absolute}.portal-art i{left:18%;top:20%;width:52px;height:52px;border:2px solid #5ebaff;transform:rotate(30deg);box-shadow:0 0 18px rgba(65,162,255,.45)}.portal-art strong{right:12%;bottom:14%;width:35px;height:35px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff,#4f81d8 35%,#17264d 70%);box-shadow:0 0 15px #6f8fff}.portal-art small{left:8%;right:8%;bottom:8%;height:2px;background:#63caff;box-shadow:0 0 10px #57aef2}.portal-2 i{border-radius:45% 45% 35% 35%;background:#e7f3ff}.portal-3 i{clip-path:polygon(0 0,100% 50%,0 100%);background:#3ad9d0}.portal-4 i{border-radius:5px;background:linear-gradient(#8756e5,#213b85)}.portal-6 i{border-radius:50%;background:#e9f2ff}.three-topic-portals button>b{margin-top:7px;font-size:9px}.three-topic-portals button>small{margin-top:5px;color:#9db1d1;font-size:6px}.three-topic-portals button>strong{align-self:end;color:#63c8ff;font-size:6px}.three-learning-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.three-learning-methods article{position:relative;display:grid;grid-template-columns:38px 1fr 95px;align-items:center;min-height:115px;padding:15px;overflow:hidden;border:1px solid #b9d3f5;border-radius:14px;background:linear-gradient(135deg,#e4f3ff,#d7e8ff)}.three-learning-methods article:nth-child(2){background:linear-gradient(135deg,#eee7ff,#dfd4ff)}.three-learning-methods article:nth-child(3){background:linear-gradient(135deg,#dcf7fa,#ccecf1)}.three-learning-methods article:nth-child(4){background:linear-gradient(135deg,#fff0e5,#f8d9ca)}.three-learning-methods article>svg{width:26px;color:#357ed8}.three-learning-methods article b{display:block;font-size:13px}.three-learning-methods article strong{display:block;margin-top:7px;color:#586a83;font-size:7px}.method-art{position:relative;height:80px}.method-art i{position:absolute;left:14px;top:20px;width:55px;height:38px;border:2px solid #4b89dd;border-radius:6px;transform:rotate(-8deg)}.method-art em{position:absolute;right:8px;bottom:12px;width:37px;height:37px;border-radius:50%;background:#4b92e5;box-shadow:0 0 16px rgba(45,125,219,.35)}.art-1 em{background:#8758dc}.art-2 em{background:#2daab4}.art-3 em{background:#ed8c43}.three-resource-deck{display:grid;grid-template-columns:55px 1fr 150px;align-items:center;padding:18px 24px;border:1px solid #c3d7f5;border-radius:15px;background:linear-gradient(90deg,#edf5ff,#eef0ff)}.three-resource-deck>svg{width:34px;color:#3c7ed8}.three-resource-deck b{font-size:14px}.three-resource-deck small{display:block;margin-top:5px;color:#637691;font-size:7px}.three-resource-deck button{height:38px;border:1px solid #759bd1;border-radius:8px;background:#fff;color:#265899}.tutorial-workspace[data-route="three"] .route-facts,.tutorial-workspace[data-route="three"] .stage-map,.tutorial-workspace[data-route="three"] .role-grid,.tutorial-workspace[data-route="three"] .docs-strip{margin-top:14px}@media(max-width:1050px){.three-orbit-hero{grid-template-columns:390px 1fr}.three-topic-portals{grid-template-columns:repeat(4,1fr)}}@media(max-width:720px){.three-orbit-hero{grid-template-columns:1fr}.three-diorama{min-height:300px}.three-orbit-path,.three-learning-methods{grid-template-columns:1fr 1fr;gap:12px}.three-topic-portals{grid-template-columns:1fr 1fr}.three-resource-deck{grid-template-columns:45px 1fr}.three-resource-deck button{grid-column:1/-1}}
.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-heading{background:linear-gradient(115deg,#07172d,#132b4e);color:#fff;border-color:#294e79}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-heading h2{color:#f6f9ff}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-heading p,.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .content-kicker{color:#a7bdd7}.three-scene-page-body{display:grid;gap:14px}.three-scene-control{display:grid;grid-template-columns:195px 1fr 230px;grid-template-rows:85px 450px 255px 210px 78px;gap:7px;padding:7px;border:1px solid #264867;border-radius:15px;background:#061726;color:#dcebf4}.three-scene-control>section,.three-scene-control>aside,.three-scene-control>header,.three-scene-control>footer{overflow:hidden;border:1px solid #294c68;border-radius:8px;background:#0a2032}.three-scene-control header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #294c68}.three-scene-control header b{font-size:8px}.scene-architecture-flow{grid-column:1/-1;display:grid!important;grid-template-columns:280px 1fr;align-items:center;padding:7px 12px!important}.scene-architecture-flow>div{display:grid}.scene-architecture-flow>div b{font-size:22px}.scene-architecture-flow>div span{color:#46d5e5;font-size:9px}.scene-architecture-flow ol{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0;padding:0;list-style:none}.scene-architecture-flow li{display:grid;grid-template-columns:30px 1fr;padding:5px;border-left:2px solid #3bbcf1}.scene-architecture-flow li:nth-child(3n){border-color:#9869e9}.scene-architecture-flow li:nth-child(5){border-color:#e59a31}.scene-architecture-flow em{grid-row:1/3;display:grid;place-items:center;width:25px;height:25px;border:1px solid #52c9f5;transform:rotate(45deg);font-size:8px;font-style:normal}.scene-architecture-flow li b{font-size:6px}.scene-architecture-flow li small{color:#829fb2;font-size:5px}.three-scene-tree{grid-row:2/4}.three-scene-tree ol{margin:0;padding:3px;list-style:none}.three-scene-tree li{display:grid;grid-template-columns:18px 1fr 12px;align-items:center;height:22px;padding:0 6px;font-size:5px}.three-scene-tree li:not(.group){padding-left:17px}.three-scene-tree li svg{width:10px;color:#4acbdd}.three-scene-tree li.group svg{color:#f0c44d}.three-main-viewport{grid-column:2;position:relative}.three-main-viewport>header nav{display:flex;gap:12px}.three-main-viewport>header svg{width:12px}.architecture-scene{position:relative;height:calc(100% - 35px);overflow:hidden;background:radial-gradient(circle at 52% 45%,#18375d,transparent 25%),repeating-linear-gradient(0deg,transparent 0 31px,rgba(58,117,170,.22) 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(58,117,170,.2) 32px),#07192a;perspective:600px}.scene-grid{position:absolute;left:4%;right:4%;bottom:-35%;height:80%;border:1px solid #2e5773;transform:rotateX(62deg)}.building{position:absolute;bottom:50px;width:58px;border:2px solid #6cbfff;background:linear-gradient(90deg,#183a5c,#e5a64e,#193d62);box-shadow:0 0 20px rgba(64,145,218,.4)}.tower-a{left:34%;height:190px}.tower-b{left:46%;height:150px}.tower-c{left:58%;height:220px}.villa{left:28%;bottom:40px;width:360px;height:85px;background:linear-gradient(90deg,#173957,#efb454,#173c60)}.camera-origin{position:absolute;left:8%;bottom:110px;width:48px;height:35px;border:2px solid #58c4f2}.frustum-plane{position:absolute;top:65px;bottom:55px;width:1px;border-left:2px dashed #4de1e3;color:#65ddec;font-size:6px;font-style:normal}.frustum-plane.near{left:24%}.frustum-plane.far{right:24%}.architecture-scene>svg{position:absolute;inset:0;width:100%;height:100%;fill:none}.architecture-scene .frustum{stroke:#3dbcf1;stroke-width:1}.architecture-scene .axes{stroke:#6ed979;stroke-width:3}.architecture-scene>aside{position:absolute;right:8px;top:8px;display:grid;width:125px;gap:5px}.architecture-scene>aside b,.architecture-scene>aside strong{font-size:6px}.architecture-scene>aside i,.architecture-scene>aside em{height:75px;border:1px solid #4d7ca0;background:linear-gradient(135deg,#213e5c,#d7974c,#112841)}.architecture-scene>aside em{background:linear-gradient(135deg,#193b5b,#d99b4d)}.three-camera-inspector{grid-column:3;grid-row:2/4}.three-camera-inspector dl{margin:8px}.three-camera-inspector dl div{display:grid;grid-template-columns:60px 1fr;align-items:center;margin:6px 0;font-size:6px}.three-camera-inspector dd{margin:0;padding:5px;border:1px solid #31526a;border-radius:3px;background:#102a3c}.three-camera-inspector section{padding:10px;border-top:1px solid #2c4d64}.three-camera-inspector section>b{color:#52cadf;font-size:7px}.three-camera-inspector p{display:flex;justify-content:space-between;margin:8px 0;font-size:6px}.three-camera-inspector code{padding:4px;background:#132c3c;color:#bcd4df}.three-camera-inspector .check{width:9px;height:9px;background:#2dcbb4}.coordinate-transform{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:35px 1fr 1fr 30px;padding-bottom:5px}.coordinate-transform>header{grid-column:1/-1}.coordinate-transform>div{display:grid;grid-template-columns:70px 1fr;align-items:center;padding:3px}.coordinate-transform svg{width:65px;height:55px;fill:none;stroke:#49bce9;stroke-width:2}.coordinate-transform>div b{font-size:5px}.coordinate-transform footer{grid-column:1/-1;padding:6px;text-align:center;color:#62e2a4;font-size:13px}.camera-comparison{grid-column:2}.camera-comparison>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px}.camera-comparison article{display:grid;justify-items:center;font-size:6px}.camera-comparison svg{width:100%;height:90px;fill:none;stroke:#4dbcf0;stroke-width:2}.camera-comparison article:nth-child(2) svg{stroke:#9270e7}.camera-comparison small{color:#84a2b4;font-size:5px}.resize-sync{grid-column:2}.resize-sync>div{display:grid;grid-template-columns:1fr 25px 1fr;align-items:center;gap:5px;padding:8px}.resize-sync>div span{padding:10px;border:1px solid #4a7796;text-align:center;font-size:7px}.resize-sync ol{margin:0 8px;padding:0;list-style:none}.resize-sync li{display:flex;gap:5px;margin:4px 0;font-size:5px}.resize-sync li svg{width:11px;color:#4fd49c}.three-render-loop{grid-column:2}.loop-timeline{display:grid;gap:5px;padding:8px}.loop-timeline i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#58bdf2}.loop-timeline span{font-size:5px}.three-render-loop ol{display:grid;gap:4px;margin:0 9px;padding:0;list-style:none}.three-render-loop li{padding:5px;border:1px solid #3e7595;border-radius:4px;text-align:center;font-size:5px}.three-render-loop li:nth-child(2){background:#146c68}.three-render-loop li:nth-child(3){background:#553188}.blank-screen-diagnostics{grid-column:3;grid-row:4}.blank-screen-diagnostics ul{margin:5px;padding:0 8px;list-style:none}.blank-screen-diagnostics li{display:grid;grid-template-columns:10px 1fr 28px;align-items:center;height:16px;font-size:5px}.blank-screen-diagnostics li i{width:6px;height:6px;border-radius:50%;background:#50d393}.blank-screen-diagnostics li i.warn{background:#e8ad37}.blank-screen-diagnostics li i.error{background:#ef5c61}.blank-screen-diagnostics li strong{color:#52d494}.scene-lifecycle{grid-column:3;grid-row:3}.scene-lifecycle>div{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px}.scene-lifecycle article{display:grid;grid-template-columns:20px 1fr;padding:6px;border:1px solid #3b6077;border-radius:5px}.scene-lifecycle em{grid-row:1/3;color:#50c7eb;font-size:8px;font-style:normal}.scene-lifecycle article b{font-size:6px}.scene-lifecycle article small{color:#86a4b4;font-size:5px}.scene-lifecycle footer{padding:6px;background:#123b32;color:#52d99d;font-size:5px}.renderer-statistics{grid-column:1/-1;display:grid!important;grid-template-columns:130px repeat(10,1fr);align-items:center;padding:7px}.renderer-statistics>b{font-size:8px}.renderer-statistics article{display:grid;padding:4px;border-left:1px solid #2d4c63}.renderer-statistics small{color:#7e9dad;font-size:5px}.renderer-statistics strong{color:#5bc6ee;font-size:10px}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.three-scene-control{grid-template-columns:180px 1fr;grid-template-rows:auto}.scene-architecture-flow{grid-template-columns:250px 1fr}.three-camera-inspector,.scene-lifecycle,.blank-screen-diagnostics{grid-column:1/-1;grid-row:auto}.renderer-statistics{grid-template-columns:repeat(5,1fr)!important}}@media(max-width:680px){.three-scene-control{grid-template-columns:1fr}.scene-architecture-flow,.scene-architecture-flow ol,.coordinate-transform{grid-template-columns:1fr}.three-scene-tree,.three-main-viewport,.three-camera-inspector,.coordinate-transform,.camera-comparison,.resize-sync,.three-render-loop,.blank-screen-diagnostics,.scene-lifecycle,.renderer-statistics{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:1fr}}
.three-scene-control{grid-template-rows:85px 450px 255px 210px 78px}.three-scene-tree,.three-camera-inspector{grid-row:2}.coordinate-transform{grid-column:1;grid-row:3}.camera-comparison{grid-column:2;grid-row:3}.resize-sync{grid-column:3;grid-row:3}.three-render-loop{grid-column:1;grid-row:4}.blank-screen-diagnostics{grid-column:2;grid-row:4}.scene-lifecycle{grid-column:3;grid-row:4}.renderer-statistics{grid-row:5}
.coordinate-transform{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:35px repeat(3,1fr) 25px}.coordinate-transform>div{grid-template-columns:38px minmax(0,1fr);padding:1px}.coordinate-transform svg{width:36px;height:40px}.coordinate-transform footer{padding:3px;font-size:10px}.three-render-loop .loop-timeline{gap:2px;padding:4px}.three-render-loop ol{gap:2px;margin:0 7px}.three-render-loop li{padding:3px}
.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-heading{background:linear-gradient(115deg,#07151f,#20203d);color:#fff;border-color:#3b4166}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-heading h2{color:#fff}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-heading p,.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .content-kicker{color:#aabbd0}.three-material-page-body{display:grid;gap:14px}.pbr-lighting-lab{display:grid;grid-template-columns:195px 1fr 230px;grid-template-rows:85px 420px 270px 220px 110px;gap:7px;padding:7px;border:1px solid #29475d;border-radius:15px;background:#061521;color:#dbe9ef}.pbr-lighting-lab>section,.pbr-lighting-lab>aside,.pbr-lighting-lab>header{overflow:hidden;border:1px solid #28475c;border-radius:8px;background:#0a1e2b}.pbr-lighting-lab header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #28475c}.pbr-lighting-lab header b{font-size:8px}.pbr-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:300px 1fr;align-items:center;padding:7px 12px!important}.pbr-learning-flow>div{display:grid}.pbr-learning-flow>div b{font-size:22px}.pbr-learning-flow>div span{color:#55cce9;font-size:9px}.pbr-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:0;padding:0;list-style:none}.pbr-learning-flow li{padding:8px 5px;border:1px solid #2677a5;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%)}.pbr-learning-flow li:nth-child(2){border-color:#25b57a}.pbr-learning-flow li:nth-child(3){border-color:#8b5bd5}.pbr-learning-flow li:nth-child(4){border-color:#d7a51c}.pbr-learning-flow li:nth-child(5){border-color:#d67e2b}.pbr-learning-flow li:nth-child(6){border-color:#dd5555}.pbr-learning-flow em{color:#4ad0ef;font-size:8px;font-style:normal}.pbr-learning-flow li b{display:block;font-size:6px}.geometry-attributes{grid-column:1;grid-row:2}.geometry-attributes dl{margin:6px}.geometry-attributes dl div{display:grid;grid-template-columns:1fr 75px 38px;padding:6px;border-bottom:1px solid #264252;font-size:5px}.geometry-attributes dd{margin:0}.geometry-attributes dl strong{color:#42d8c1}.geometry-attributes section{padding:7px;border-top:1px solid #294758}.geometry-attributes section>b{font-size:7px;color:#51cce8}.geometry-attributes svg{width:100%;height:140px;fill:none;stroke:#3ca9e4}.geometry-attributes svg circle{fill:#4ed9cd}.geometry-attributes p{font-size:5px}.pbr-product-stage{grid-column:2;grid-row:2}.pbr-product-stage>header nav{display:flex;gap:4px}.pbr-product-stage>header nav span{padding:5px 8px;border:1px solid #2d5266;border-radius:3px;font-size:5px}.pbr-product-stage>header nav span.active{border-color:#2cb7e5;background:#123d56}.pbr-product-stage>div{display:grid;grid-template-columns:repeat(6,1fr);height:calc(100% - 35px);padding:12px 7px}.pbr-product-stage article{display:grid;grid-template-rows:230px 20px 20px 25px;justify-items:center;min-width:0}.pbr-shape{position:relative;align-self:center;width:85%;height:150px}.pbr-shape:before{content:"";position:absolute;inset:20px;border:2px solid #b8d8e9;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff,#61737d 24%,#101b21 58%,#6d8390 75%,#141c20);box-shadow:0 16px 22px rgba(0,0,0,.55)}.shape-1:before{border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(66,117,153,.08));transform:rotate(12deg)}.shape-2:before{border:20px solid #b19a77;background:transparent}.shape-3:before{border-radius:18px;background:linear-gradient(90deg,#2a3a45,#607e92,#283943)}.shape-4:before{border-radius:48% 48% 38% 38%;background:radial-gradient(circle at 32% 32%,#dbc9b8,#594b45 55%,#1d1b1b)}.shape-5:before{border-radius:40% 15% 45% 20%;background:radial-gradient(circle,#ff9b2d,#8f2437,#152c4c);box-shadow:0 0 25px #ff4c30}.pbr-shape:after{content:"";position:absolute;inset:18px;border:1px solid rgba(94,201,238,.55);border-radius:50%;background:repeating-linear-gradient(25deg,transparent 0 10px,rgba(88,196,230,.32) 11px)}.pbr-product-stage article>b{font-size:7px}.pbr-product-stage article>small{color:#91a8b5;font-size:5px}.pbr-product-stage article nav{display:flex;gap:3px}.pbr-product-stage article nav i{width:13px;height:13px;border:1px solid #92a7b0;border-radius:50%;background:#263841}.pbr-product-stage article nav i:nth-child(2){background:#c28c35}.pbr-product-stage article nav i:nth-child(3){background:#895bdd}.pbr-product-stage article nav i:nth-child(4){background:#2e7ccc}.material-light-inspector{grid-column:3;grid-row:2}.material-light-inspector>label{display:grid;grid-template-columns:45px 1fr;padding:8px;font-size:6px}.material-light-inspector label strong{padding:5px;border:1px solid #315164}.material-light-inspector section{padding:7px;border-top:1px solid #2b4a5c}.material-light-inspector section>b{color:#59cbe5;font-size:7px}.material-light-inspector p{display:grid;grid-template-columns:65px 1fr 50px;align-items:center;margin:5px 0;font-size:5px}.material-light-inspector p>i{height:3px;background:#315773}.material-light-inspector p>i em{display:block;width:70%;height:100%;background:#3e9fe0}.material-light-inspector code{padding:4px;background:#132d3c}.material-light-inspector article{display:grid;grid-template-columns:12px 1fr;padding:6px 0}.material-light-inspector article>i{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:#f3c33f}.material-light-inspector article .light-1{background:#a55ee7}.material-light-inspector article .light-2{background:#34cfd4}.material-light-inspector article strong{font-size:6px}.material-light-inspector article small{color:#8aa6b3;font-size:5px}.pbr-material-library{grid-column:1;grid-row:3}.pbr-material-library>div{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px}.pbr-material-library>div i{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff,#9e702b 28%,#201810 72%)}.pbr-material-library>div i.mat-1{background:radial-gradient(circle at 32% 24%,#fff,#8c9398 28%,#161c20 72%)}.pbr-material-library>div i.mat-2{background:radial-gradient(circle at 32% 24%,#fff,#a6402d 28%,#32120f 72%)}.pbr-material-library>div i.mat-3{background:radial-gradient(circle at 32% 24%,#fff,#234d9b 28%,#0b142b 72%)}.pbr-material-library>div i.mat-4{background:radial-gradient(circle at 32% 24%,#fff,#29804f 28%,#0b2315 72%)}.pbr-material-library>div i.mat-5{background:radial-gradient(circle at 32% 24%,#fff,#7936b6 28%,#1c0d2f 72%)}.pbr-material-library>div i.mat-6{background:radial-gradient(circle at 32% 24%,#fff,#dd4e31 28%,#39130f 72%)}.pbr-material-library>div i.mat-7{background:radial-gradient(circle at 32% 24%,#fff,#20a7c1 28%,#0b2832 72%)}.pbr-material-library footer{padding:4px 8px;color:#82a1b1;font-size:5px}.hdr-color-pipeline{grid-column:2;grid-row:3}.hdr-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:7px}.hdr-thumbs i{height:55px;border:1px solid #3a6178;background:linear-gradient(#1a3350,#d99954)}.hdr-thumbs i:nth-child(2){background:linear-gradient(#1f2b48,#3d8168)}.hdr-thumbs i:nth-child(3){background:linear-gradient(#28463a,#86a65c)}.hdr-thumbs i:nth-child(4){background:linear-gradient(#55464d,#ea994d)}.hdr-thumbs i:nth-child(5){background:linear-gradient(#111b37,#5f78b6)}.hdr-thumbs i.active{border-color:#38c5ef;box-shadow:0 0 10px #31a6d1}.hdr-color-pipeline ol{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:7px;padding:0;list-style:none}.hdr-color-pipeline li{padding:8px 3px;border:1px solid #355a6e;text-align:center;font-size:5px}.hdr-color-pipeline label{display:block;margin:8px;padding:7px;border-top:1px solid #2c4c5e;font-size:6px}.light-rig{grid-column:3;grid-row:3}.light-rig>div{position:relative;height:185px}.light-rig .rig-object{position:absolute;left:42%;top:55px;width:45px;height:55px;border-radius:45%;background:#8b817b}.light-rig i{position:absolute;width:13px;height:13px;border-radius:50%;box-shadow:0 0 15px currentColor}.light-rig .sun{left:48%;top:15px;background:#ffd12e;color:#ffd12e}.light-rig .point{right:15%;top:45px;background:#a55ae4;color:#a55ae4}.light-rig .ambient{left:12%;top:80px;background:#32d2d6;color:#32d2d6}.light-rig svg{width:100%;height:100%;fill:none;stroke:#4a9fc7;stroke-dasharray:4 3}.light-rig footer{padding:5px;text-align:center;font-size:5px}.surface-diagnostics{grid-column:1/3;grid-row:4;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:35px 1fr}.surface-diagnostics>header{grid-column:1/-1}.normal-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px}.normal-preview i{background:linear-gradient(135deg,#e45ec5,#47b7ee,#70e16d);clip-path:polygon(50% 0,100% 45%,80% 100%,20% 100%,0 45%)}.diagnostic-cases{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px}.diagnostic-cases article{display:grid;font-size:6px}.diagnostic-cases article i{background:repeating-linear-gradient(20deg,#eef4f7 0 3px,#1b2830 4px 7px)}.diagnostic-cases article:nth-child(2) i{background:radial-gradient(circle at 35% 40%,#eee,#333 45%,#111)}.diagnostic-cases small{color:#4ad89b;font-size:5px}.material-performance{grid-column:3;grid-row:4;position:relative}.material-performance dl{margin:7px}.material-performance dl div{display:flex;justify-content:space-between;padding:4px 0;font-size:5px}.material-performance dd{margin:0;color:#51cbe9}.texture-ring{position:absolute;right:15px;bottom:13px;display:grid;place-items:center;width:68px;height:68px;border:10px solid #35cae0;border-right-color:#e7a630;border-bottom-color:#915cde;border-radius:50%}.texture-ring b{font-size:10px}.texture-ring small{display:block;font-size:5px}.pbr-showcase{grid-column:1/-1;grid-row:5;display:grid;grid-template-columns:180px 1fr 350px 80px;align-items:center}.pbr-showcase>header{border:0}.pbr-showcase>div{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.pbr-showcase>div i{height:65px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff,#b27b2c 30%,#20160e 70%)}.pbr-showcase ul{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none}.pbr-showcase li{font-size:5px}.pbr-showcase li svg{width:10px;color:#4bd497}.pbr-showcase>strong{color:#55d5a0;font-size:23px}.pbr-showcase>strong small{display:block;font-size:6px}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.pbr-lighting-lab{grid-template-columns:180px 1fr;grid-template-rows:auto}.pbr-learning-flow{grid-template-columns:280px 1fr}.material-light-inspector,.light-rig,.material-performance{grid-column:1/-1;grid-row:auto}.pbr-showcase{grid-template-columns:1fr 1fr}}@media(max-width:680px){.pbr-lighting-lab{grid-template-columns:1fr}.pbr-learning-flow,.pbr-learning-flow ol,.pbr-showcase{grid-template-columns:1fr}.geometry-attributes,.pbr-product-stage,.material-light-inspector,.pbr-material-library,.hdr-color-pipeline,.light-rig,.surface-diagnostics,.material-performance,.pbr-showcase{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:1fr}}
.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-heading{background:linear-gradient(115deg,#061622,#102f3a);color:#fff;border-color:#24535f}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-heading h2{color:#fff}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-heading p,.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .content-kicker{color:#9dbcc5}.three-asset-page-body{display:grid;gap:14px}.gltf-animation-studio{display:grid;grid-template-columns:230px 1fr 220px;grid-template-rows:85px 430px 190px 210px 180px 85px;gap:7px;padding:7px;border:1px solid #27495b;border-radius:15px;background:#061522;color:#dcebf1}.gltf-animation-studio>section,.gltf-animation-studio>aside,.gltf-animation-studio>header{overflow:hidden;border:1px solid #28495c;border-radius:8px;background:#0a1f2d}.gltf-animation-studio header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #28495c}.gltf-animation-studio header b{font-size:8px}.asset-animation-flow{grid-column:1/-1;display:grid!important;grid-template-columns:290px 1fr;align-items:center;padding:7px 12px!important}.asset-animation-flow>div{display:grid}.asset-animation-flow>div b{color:#4de2e9;font-size:22px}.asset-animation-flow>div span{font-size:9px}.asset-animation-flow ol{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0;padding:0;list-style:none}.asset-animation-flow li{padding:7px;border:1px solid #36b8db;clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%,8% 50%)}.asset-animation-flow li:nth-child(2){border-color:#7ccf38}.asset-animation-flow li:nth-child(3){border-color:#9267d9}.asset-animation-flow li:nth-child(4){border-color:#df4b9a}.asset-animation-flow li:nth-child(5){border-color:#df8a25}.asset-animation-flow li:nth-child(6){border-color:#e3ba24}.asset-animation-flow em{color:#52d7e2;font-size:8px;font-style:normal}.asset-animation-flow li b{display:block;font-size:6px}.gltf-asset-browser{grid-column:1;grid-row:2/4}.gltf-asset-browser nav{display:flex;padding:5px}.gltf-asset-browser nav span{flex:1;text-align:center;font-size:5px}.gltf-asset-browser nav span.active{color:#49cdea}.gltf-asset-browser>ol{margin:0;padding:4px;list-style:none}.gltf-asset-browser>ol li{display:grid;grid-template-columns:17px 1fr 43px;align-items:center;height:28px;padding:0 6px;font-size:5px}.gltf-asset-browser>ol li.selected{background:#164a70}.gltf-asset-browser li svg{width:11px;color:#55cde6}.gltf-asset-browser>section{margin:6px;padding:7px;border:1px solid #315366;border-radius:5px}.gltf-asset-browser section>b{font-size:6px}.gltf-asset-browser section>i{display:block;height:4px;margin:6px 0;background:#233f4d}.gltf-asset-browser section>i em{display:block;width:82%;height:100%;background:#34bfe4}.gltf-asset-browser section p{display:flex;justify-content:space-between;margin:4px 0;font-size:5px}.gltf-asset-browser section p strong{color:#4fd59a}.gltf-asset-browser section p.error strong{color:#ef5b5d}.gltf-asset-browser footer{padding:7px;color:#75d99c;font-size:5px}.gltf-model-viewer{grid-column:2;grid-row:2}.gltf-model-viewer>header nav{display:flex;gap:13px}.gltf-model-viewer>header svg{width:12px}.gltf-model-viewer>div{position:relative;height:calc(100% - 35px);overflow:hidden;background:radial-gradient(circle at 50% 45%,#17384e,transparent 30%),repeating-linear-gradient(0deg,transparent 0 35px,rgba(68,126,159,.2) 36px),repeating-linear-gradient(90deg,transparent 0 35px,rgba(68,126,159,.18) 36px)}.robot-body{position:absolute;left:44%;top:92px;width:90px;height:145px;border-radius:43% 43% 32% 32%;background:linear-gradient(135deg,#17242b,#d3992d,#1d2d36);box-shadow:0 0 25px rgba(232,167,50,.42)}.robot-head{position:absolute;left:13px;top:-60px;width:65px;height:55px;border-radius:45%;background:#d2a043}.robot-core{position:absolute;left:30px;top:32px;width:30px;height:30px;border-radius:50%;background:#26d3e8;box-shadow:0 0 18px #25d9ef}.robot-arm,.robot-leg{position:absolute;width:24px;height:92px;border-radius:15px;background:#9d752a}.robot-arm.left{left:-34px;top:18px;transform:rotate(18deg)}.robot-arm.right{right:-34px;top:18px;transform:rotate(-18deg)}.robot-leg.left{left:10px;bottom:-72px}.robot-leg.right{right:10px;bottom:-72px}.robot-tail{position:absolute;right:-75px;top:65px;width:80px;height:12px;border-radius:10px;background:#c8952f;transform:rotate(25deg)}.model-bounds{position:absolute;left:35%;top:35px;width:250px;height:330px;border:2px solid #60dd84}.gltf-model-viewer svg{position:absolute;inset:0;width:100%;height:100%;fill:none}.gltf-model-viewer .ground{stroke:#355d71}.gltf-model-viewer .skeleton{stroke:#ead12f;stroke-width:2}.gltf-model-viewer .skeleton circle{fill:#f1d335}.gltf-model-viewer aside{position:absolute;left:8px;top:8px;width:95px;padding:7px;border:1px solid #315267;background:rgba(5,19,29,.88);font-size:5px}.gltf-model-viewer aside p{margin:4px 0}.gltf-scene-inspector{grid-column:3;grid-row:2}.gltf-scene-inspector ol{margin:0;padding:4px;list-style:none}.gltf-scene-inspector ol li{display:flex;align-items:center;gap:6px;height:23px;padding-left:6px;font-size:5px}.gltf-scene-inspector li.active{background:#16496b}.gltf-scene-inspector li svg{width:10px;color:#69c8e0}.gltf-scene-inspector section{padding:8px;border-top:1px solid #294b5d}.gltf-scene-inspector section>b{font-size:6px;color:#50c9e0}.gltf-scene-inspector section p{display:flex;justify-content:space-between;font-size:5px}.gltf-scene-inspector code{padding:3px;background:#132c3b}.gltf-scene-inspector p>i{width:55px;height:3px;background:#315267}.gltf-scene-inspector p>i em{display:block;width:45%;height:100%;background:#3ca8df}.animation-mixer-timeline{grid-column:2/4;grid-row:3}.animation-mixer-timeline>div{display:grid;grid-template-columns:110px 1fr;height:110px}.animation-mixer-timeline aside{padding:4px}.animation-mixer-timeline aside p{display:grid;grid-template-columns:10px 1fr 30px;margin:3px;font-size:5px}.animation-mixer-timeline aside i{width:6px;height:6px;border-radius:50%;background:#e3a62e}.animation-mixer-timeline aside .clip-1{background:#45d596}.animation-mixer-timeline aside .clip-2{background:#de7a27}.animation-mixer-timeline aside .clip-3{background:#9865df}.animation-mixer-timeline aside .clip-4{background:#e74988}.animation-mixer-timeline ol{position:relative;margin:0;padding:4px;list-style:none}.animation-mixer-timeline ol li{position:relative;height:20px;border-top:1px solid #284959}.animation-mixer-timeline ol i{position:absolute;top:2px;height:16px;border-radius:3px;background:#1f7aa4;color:#fff;text-align:center;font-size:5px;font-style:normal}.animation-mixer-timeline .track-1{background:#348c5a}.animation-mixer-timeline .track-2{background:#9b641d}.animation-mixer-timeline .track-3{background:#68449d}.animation-mixer-timeline .track-4{background:#993057}.animation-mixer-timeline .playhead{position:absolute;left:57%;top:35px;bottom:30px;border-left:1px solid #fff}.animation-mixer-timeline footer{display:flex;align-items:center;gap:10px;padding:6px;border-top:1px solid #29495a;font-size:5px}.animation-mixer-timeline footer svg{width:11px}.animation-state-machine{grid-column:1;grid-row:4}.animation-state-machine>div{position:relative;height:160px}.animation-state-machine span{position:absolute;padding:5px 9px;border:1px solid #4d7790;border-radius:4px;font-size:5px}.state-0{left:8px;top:12px}.state-1{left:95px;top:12px}.state-2{left:12px;top:75px}.state-3{left:92px;bottom:10px}.state-4{right:12px;top:75px}.state-5{right:12px;bottom:10px}.animation-state-machine span.active{background:#398c35;color:#fff}.animation-state-machine svg{width:100%;height:100%;fill:none;stroke:#788fa0;stroke-width:2}.gltf-validation{grid-column:2;grid-row:4}.gltf-validation dl{display:grid;grid-template-columns:1fr 1fr;margin:8px}.gltf-validation dl div{display:flex;justify-content:space-between;padding:6px;border-bottom:1px solid #284657;font-size:5px}.gltf-validation dd{margin:0;color:#4fd59c}.gltf-validation footer,.asset-compression footer,.asset-cache footer{padding:7px;text-align:center;color:#54d8a0;font-size:6px}.asset-compression{grid-column:3;grid-row:4}.asset-compression table,.asset-cache table{width:calc(100% - 14px);margin:8px 7px;border-collapse:collapse;font-size:5px}.asset-compression td,.asset-cache td{padding:6px;border-bottom:1px solid #294959}.texture-budget{grid-column:1;grid-row:5;position:relative}.budget-ring{position:absolute;left:25px;top:55px;display:grid;place-items:center;width:85px;height:85px;border:14px solid #4e7cda;border-right-color:#e49c32;border-bottom-color:#dc4d49;border-radius:50%}.budget-ring b{font-size:13px}.budget-ring small{display:block;font-size:5px}.texture-budget ul{margin:15px 8px 0 130px;padding:0;list-style:none;font-size:5px}.texture-budget li{margin:7px 0}.asset-cache{grid-column:2;grid-row:5}.asset-lifecycle{grid-column:3;grid-row:5}.asset-lifecycle ol{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px;padding:0;list-style:none}.asset-lifecycle li{padding:7px;border:1px solid #39708a;border-radius:4px;text-align:center;font-size:5px}.asset-lifecycle li:nth-child(n+6){border-color:#9d4247;color:#ed777d}.model-acceptance{grid-column:1/-1;grid-row:6;display:grid;grid-template-columns:150px 1fr 180px;align-items:center}.model-acceptance>header{border:0}.model-acceptance ul{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.model-acceptance li{font-size:5px}.model-acceptance li svg{width:10px;color:#4ed69d}.model-acceptance>strong{color:#54dba3;font-size:10px}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.gltf-animation-studio{grid-template-columns:210px 1fr;grid-template-rows:auto}.asset-animation-flow{grid-template-columns:260px 1fr}.gltf-scene-inspector,.asset-compression,.asset-lifecycle{grid-column:1/-1;grid-row:auto}.model-acceptance{grid-template-columns:1fr}}@media(max-width:680px){.gltf-animation-studio{grid-template-columns:1fr}.asset-animation-flow,.asset-animation-flow ol,.model-acceptance{grid-template-columns:1fr}.gltf-asset-browser,.gltf-model-viewer,.gltf-scene-inspector,.animation-mixer-timeline,.animation-state-machine,.gltf-validation,.asset-compression,.texture-budget,.asset-cache,.asset-lifecycle,.model-acceptance{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:1fr}}
.gltf-animation-studio{grid-template-rows:85px 465px 190px 210px 180px 85px}.gltf-scene-inspector ol li{height:21px}
.asset-cache footer{padding:5px}
.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-heading{background:linear-gradient(115deg,#061522,#172244);color:#fff;border-color:#2a4e73}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-heading h2{color:#fff}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-heading p,.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .content-kicker{color:#a4bad1}.three-input-page-body{display:grid;gap:14px}.raycast-control-studio{display:grid;grid-template-columns:230px 1fr 230px;grid-template-rows:85px 450px 220px 180px 160px;gap:7px;padding:7px;border:1px solid #29495e;border-radius:15px;background:#061522;color:#dcebf1}.raycast-control-studio>section,.raycast-control-studio>aside,.raycast-control-studio>header{overflow:hidden;border:1px solid #284b61;border-radius:8px;background:#0a1e2c}.raycast-control-studio header{display:flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 9px;border-bottom:1px solid #284b61}.raycast-control-studio header b{font-size:8px}.raycast-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:330px 1fr;align-items:center;padding:7px 12px!important}.raycast-learning-flow>div{display:grid}.raycast-learning-flow>div b{font-size:22px}.raycast-learning-flow>div span{color:#66c7ee;font-size:9px}.raycast-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0;padding:0;list-style:none}.raycast-learning-flow li{padding:8px;border:1px solid #2f8ce0;clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%,8% 50%)}.raycast-learning-flow li:nth-child(2){border-color:#45c5ca}.raycast-learning-flow li:nth-child(3){border-color:#51bd66}.raycast-learning-flow li:nth-child(4){border-color:#d7a238}.raycast-learning-flow li:nth-child(5){border-color:#b656bd}.raycast-learning-flow li:nth-child(6){border-color:#d3467d}.raycast-learning-flow em{font-size:8px;font-style:normal}.raycast-learning-flow li b{display:block;font-size:6px}.input-coordinate-rail{grid-column:1;grid-row:2}.input-coordinate-rail>ol{margin:0;padding:6px;list-style:none}.input-coordinate-rail>ol li{display:grid;grid-template-columns:70px 1fr 62px;align-items:center;height:23px;font-size:5px}.input-coordinate-rail time{color:#85a5b5}.input-coordinate-rail ol b{color:#57c9e1}.input-coordinate-rail>section{padding:8px;border-top:1px solid #2b4d60}.input-coordinate-rail section>b{font-size:7px}.input-coordinate-rail dl div{display:grid;grid-template-columns:1fr 105px;margin:6px 0;font-size:5px}.input-coordinate-rail dd{margin:0;padding:5px;border:1px solid #31566b;background:#10293a}.raycast-product-view{grid-column:2;grid-row:2}.raycast-product-view>header nav{display:flex;gap:10px;font-size:5px}.raycast-product-view>div{position:relative;height:calc(100% - 35px);overflow:hidden;background:radial-gradient(circle at 50% 46%,#183751,transparent 33%),#071925}.exploded-camera{position:absolute;left:36%;top:115px;width:210px;height:135px}.exploded-camera i,.exploded-camera em{position:absolute}.camera-core{inset:0;border:3px solid #e34aa7;background:linear-gradient(135deg,#1b2932,#565e63,#141d23);box-shadow:0 0 25px rgba(219,63,159,.35)}.camera-lens{top:25px;width:80px;height:80px;border:8px solid #286f9a;border-radius:50%;background:radial-gradient(circle,#111,#183e59 42%,#27a7e5 55%,#07111a 65%)}.lens-a{left:-95px}.lens-b{left:-165px;transform:scale(.8)}.camera-shell{top:-25px;width:100px;height:180px;border:2px solid #457b97}.shell-a{right:-120px}.shell-b{right:-225px}.camera-board{right:-80px;top:40px;width:65px;height:75px;background:#12684e;border:2px solid #49d09d}.exploded-camera em{width:14px;height:14px;background:#718590}.exploded-camera em:nth-of-type(7){left:-50px;top:-40px}.exploded-camera em:nth-of-type(8){right:-30px;bottom:-45px}.ndc-plane{position:absolute;left:12%;top:80px;width:115px;height:210px;border:2px solid #3286be;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(55,147,199,.3) 23px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(55,147,199,.3) 23px);transform:skewY(-10deg)}.raycast-product-view svg{position:absolute;inset:0;width:100%;height:100%;fill:none}.ray-line{stroke:#39d9ef;stroke-width:3}.normal-line{stroke:#62e881;stroke-width:3}.hit-point{fill:#ffd541;stroke:#ff7c2d;stroke-width:3}.bounds{stroke:#e947a6;stroke-width:2}.ray-label,.selected-label,.normal-label{position:absolute;font-size:7px}.ray-label{left:20%;bottom:40px;color:#48d8ee}.selected-label{left:51%;top:35px;color:#ee50b5}.normal-label{left:58%;top:80px;color:#69e98a}.raycast-inspector{grid-column:3;grid-row:2}.raycast-inspector section{padding:7px;border-top:1px solid #2b4c5f}.raycast-inspector section>b{font-size:7px;color:#58c9e1}.raycast-inspector p{display:flex;justify-content:space-between;margin:6px 0;font-size:5px}.raycast-inspector code{padding:4px;background:#122d3d}.raycast-inspector nav{display:flex;gap:3px}.raycast-inspector nav i{display:grid;place-items:center;width:20px;height:18px;border:1px solid #31546a;font-size:5px;font-style:normal}.raycast-inspector nav i.active{background:#196dad}.raycast-inspector table{width:100%;font-size:5px}.raycast-inspector td{padding:4px;border-bottom:1px solid #29495b}.raycast-pipeline{grid-column:1;grid-row:3}.raycast-pipeline ol{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:7px;padding:0;list-style:none}.raycast-pipeline li{padding:7px;border:1px solid #3389b1;border-radius:5px;text-align:center;font-size:5px}.raycast-pipeline pre{margin:7px;padding:6px;background:#071521;color:#74cfe4;font:5px/1.6 Consolas,monospace}.intersection-table{grid-column:2;grid-row:3}.intersection-table table,.keyboard-alternative table,.device-input-matrix table{width:calc(100% - 14px);margin:7px;border-collapse:collapse;font-size:5px}.intersection-table td,.keyboard-alternative td,.device-input-matrix td{padding:6px;border-bottom:1px solid #294a5b}.intersection-table footer{padding:6px;color:#d95bb0;font-size:5px}.interaction-state-machine{grid-column:3;grid-row:3}.interaction-state-machine>div{position:relative;height:175px}.interaction-state-machine span{position:absolute;padding:7px;border:1px solid #4d7b93;border-radius:50%;font-size:5px}.interaction-state-0{left:78px;top:8px}.interaction-state-1{right:12px;top:70px;border-color:#d34e9a!important}.interaction-state-2{left:78px;bottom:8px}.interaction-state-3{left:8px;top:70px}.interaction-state-machine svg{width:100%;height:100%;fill:none;stroke:#7194a5;stroke-width:2}.controls-arbiter{grid-column:1;grid-row:4}.controls-arbiter>div{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px}.controls-arbiter span,.controls-arbiter i{grid-column:1/-1;padding:5px;border:1px solid #3b7794;text-align:center;font-size:5px;font-style:normal}.controls-arbiter article{padding:7px;border:1px solid #d14c98;text-align:center;font-size:5px}.controls-arbiter button{grid-column:1/-1;border:1px solid #c89626;background:#442f0f;color:#f0c85d;font-size:5px}.keyboard-alternative{grid-column:2;grid-row:4}.device-input-matrix{grid-column:3;grid-row:4}.device-input-matrix td{text-align:center}.exploded-controls{grid-column:1;grid-row:5}.exploded-controls nav{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px}.exploded-controls button{display:grid;justify-items:center;padding:5px;border:1px solid #357ba0;background:#102b3b;color:#d9e9ef;font-size:5px}.exploded-controls button svg{width:14px;color:#52c7e5}.exploded-controls label{display:grid;grid-template-columns:60px 1fr 35px;gap:4px;padding:6px;font-size:5px}.exploded-controls label>i{height:4px;background:#315669}.exploded-controls label>i em{display:block;width:65%;height:100%;background:#31a7df}.interaction-history{grid-column:2;grid-row:5}.interaction-history ol{margin:5px;padding:0;list-style:none}.interaction-history li{display:grid;grid-template-columns:65px 55px 1fr;padding:4px;font-size:5px}.interaction-history nav{display:flex;justify-content:center;gap:8px}.interaction-history button{padding:7px;border:1px solid #3c7895;background:#102d3e;color:#d9e9ef;font-size:5px}.interaction-acceptance{grid-column:3;grid-row:5;position:relative}.interaction-acceptance ol{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:6px;padding:0;list-style:none}.interaction-acceptance li{font-size:4.5px}.interaction-acceptance li svg{width:9px;color:#49d89a}.interaction-acceptance>strong{position:absolute;right:8px;bottom:7px;color:#62e58b;font-size:11px}.interaction-acceptance>strong small{display:block;font-size:5px}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.raycast-control-studio{grid-template-columns:210px 1fr;grid-template-rows:auto}.raycast-learning-flow{grid-template-columns:300px 1fr}.raycast-inspector,.interaction-state-machine,.device-input-matrix,.interaction-acceptance{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.raycast-control-studio{grid-template-columns:1fr}.raycast-learning-flow,.raycast-learning-flow ol{grid-template-columns:1fr}.input-coordinate-rail,.raycast-product-view,.raycast-inspector,.raycast-pipeline,.intersection-table,.interaction-state-machine,.controls-arbiter,.keyboard-alternative,.device-input-matrix,.exploded-controls,.interaction-history,.interaction-acceptance{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:1fr}}
.raycast-control-studio{grid-template-rows:85px 470px 220px 180px 160px}
.postfx-studio .composer-stack ol{gap:5px;padding-top:7px}.postfx-studio .composer-stack li{min-height:39px}.postfx-studio .composer-stack footer{min-height:32px}
.performance-war-room .city-wireframe{display:flex;align-items:flex-end;gap:4px;padding:0 8px 20px}.performance-war-room .city-wireframe>i{position:relative;left:auto;bottom:auto;flex:1;width:auto;height:80px}.performance-war-room .city-wireframe>i:nth-of-type(3n){height:145px}.performance-war-room .city-wireframe>i:nth-of-type(4n){height:205px}.performance-war-room .city-wireframe>i:nth-of-type(5n){height:115px}.performance-war-room .city-wireframe>i:nth-of-type(7n){height:235px}
.xr-experience-lab .xr-room{box-shadow:inset 0 0 90px rgba(6,11,55,.8)}.xr-experience-lab .xr-sofa{border-radius:10px 10px 3px 3px;box-shadow:0 14px 35px #101a58,0 0 30px rgba(102,118,229,.28)}.xr-experience-lab .xr-table{border-radius:50%;box-shadow:0 8px 18px rgba(238,162,45,.28)}
.procedural-route-console .procedural-facts article>span,.procedural-route-console .procedural-facts article>b{grid-column:2}.procedural-route-console .procedural-main-grid header>span{font-size:5px;color:#70838a}.procedural-route-console .production-pipeline header>span{padding:3px 7px;border-radius:8px;background:#e5f4f3;color:#168d8c}.procedural-route-console .procedural-topic-map header>span{font-size:5px}
.houdini-sop-workbench header>span{font-size:5px;color:#6f8087}.houdini-sop-workbench .houdini-asset-controls header>span{padding:3px 6px;border-radius:8px;background:#edf5f6;color:#2788a4}.houdini-sop-workbench .houdini-cache-table header>span{font-size:5px}
.houdini-dev-ide .point-wave{display:grid;grid-template-columns:repeat(30,1fr);align-content:center;gap:6px 3px;padding:12px 18px}.houdini-dev-ide .point-wave i{position:relative;left:auto;top:auto;width:4px;height:4px}.houdini-dev-ide .point-wave i:nth-child(3n){transform:translateY(-24px)}.houdini-dev-ide .point-wave i:nth-child(5n){transform:translateY(22px)}.houdini-dev-ide .point-wave i:nth-child(7n){transform:translateY(-38px)}.houdini-dev-ide .point-wave i:nth-child(11n){transform:translateY(35px)}
.blender-geometry-lab .eco-island{background:radial-gradient(circle at 78% 18%,rgba(255,241,179,.75),transparent 11%),linear-gradient(#78b7dd 0 46%,#2c819c 47%,#185a70)}.blender-geometry-lab .island-ground{filter:drop-shadow(0 -9px 18px rgba(18,48,36,.24))}.blender-geometry-lab .path-curve{box-shadow:0 0 0 2px #836a43 inset,0 8px 14px rgba(47,36,22,.28)}
.blender-plugin-page-body{display:grid;gap:14px}.blender-plugin-devcenter{display:grid;grid-template-columns:190px minmax(0,1fr) 275px;grid-template-rows:90px 430px 180px;gap:7px;padding:7px;border:1px solid #ccd9de;border-radius:14px;background:#eef3f5;color:#e5ecf0}.blender-plugin-devcenter>section,.blender-plugin-devcenter>aside,.blender-plugin-devcenter>header{overflow:hidden;border:1px solid #40515b;border-radius:7px;background:#202a30}.blender-plugin-devcenter header{display:flex;align-items:center;justify-content:space-between;min-height:33px;padding:0 8px}.blender-plugin-devcenter header b{font-size:7px}.plugin-dev-flow{grid-column:1/-1;display:grid!important;grid-template-columns:330px 1fr 95px;align-items:center;padding:8px 12px!important;background:#fff!important;color:#14283a!important;border-color:#d3dfe2!important}.plugin-dev-flow>div{display:grid;grid-template-columns:38px 1fr}.plugin-dev-flow>div svg{grid-row:1/3;width:28px;color:#3f8fd2}.plugin-dev-flow>div span{display:grid}.plugin-dev-flow>div b{font-size:18px}.plugin-dev-flow>div small{font-size:6px}.plugin-dev-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.plugin-dev-flow li{display:grid;grid-template-columns:22px 1fr;gap:1px;padding:7px;border-bottom:2px solid #d8e2e5}.plugin-dev-flow li.active{border-color:#1aa19e}.plugin-dev-flow em{grid-row:1/3;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#dce7eb;color:#39789e;font-size:5px;font-style:normal}.plugin-dev-flow li.active em{background:#1aa19e;color:#fff}.plugin-dev-flow li b{font-size:5px}.plugin-dev-flow li small{font-size:4px}.plugin-dev-flow>strong{padding:8px;border-radius:5px;background:#e5f5f4;color:#148e8c;font-size:6px}.plugin-project-tree{grid-column:1;grid-row:2}.plugin-project-tree ul{margin:0;padding:5px 9px;list-style:none}.plugin-project-tree li{display:grid;grid-template-columns:15px 1fr;align-items:center;height:27px;padding:0 4px;font-size:5px}.plugin-project-tree li svg{width:10px;color:#4a91d3}.plugin-project-tree li.active{background:#31495a}.plugin-code-editor{grid-column:2;grid-row:2}.plugin-code-editor header nav{display:flex;gap:2px}.plugin-code-editor header button{padding:7px;border:0;background:#293940;color:#c6d4d9;font-size:4.5px}.plugin-code-editor header button.active{border-top:2px solid #368bd2;background:#1e292f}.plugin-code-editor pre{height:355px;margin:0;padding:8px;background:#182127;color:#ca7de0;font:5px/1.45 Consolas,monospace}.plugin-code-editor code i{display:inline-block;width:19px;color:#617781;font-style:normal}.plugin-code-editor footer{display:flex;gap:15px;padding:7px;background:#172127;font-size:4.5px}.plugin-code-editor footer strong{margin-left:auto;color:#4fca93}.plugin-panel-preview{grid-column:3;grid-row:2;display:grid;grid-template-rows:33px 115px 120px 67px 65px 1fr}.plugin-panel-preview header span{font-size:5px;color:#59c99b}.plugin-panel-preview section{padding:6px;border-top:1px solid #42515a}.plugin-panel-preview section>b{font-size:6px}.plugin-panel-preview label{display:grid;grid-template-columns:50px 1fr;margin:5px 0;font-size:4.5px}.plugin-panel-preview label strong{padding:4px;background:#2b3940}.plugin-panel-preview section>button{width:100%;padding:5px;border:0;background:#2d3c43;color:#d7e0e3;font-size:4.5px}.plugin-panel-preview section:first-of-type>button{background:#e67c22;color:#fff}.plugin-panel-preview ol{margin:4px 0;padding:0;list-style:none}.plugin-panel-preview li{display:grid;grid-template-columns:15px 1fr 12px;align-items:center;padding:3px;font-size:4.5px}.plugin-panel-preview li svg{width:9px}.plugin-panel-preview li.active{background:#3474b1}.plugin-panel-preview section i{display:block;height:6px;background:#3e5059}.plugin-panel-preview section i em{display:block;width:72%;height:100%;background:#3b8eda}.plugin-panel-preview .cancel{margin-top:5px;background:#c94c43}.plugin-error{background:#4c1f21!important;color:#ffaaa5}.plugin-context-console{grid-column:1;grid-row:3/5;display:none}.registration-lifecycle{grid-column:1;grid-row:3}.registration-lifecycle>div{display:grid;grid-template-columns:1fr 18px 1fr;align-items:center;gap:3px;padding:9px;text-align:center;font-size:4.5px}.registration-lifecycle span,.registration-lifecycle b{padding:6px;border:1px solid #4c6977;border-radius:5px}.registration-lifecycle b{background:#156c54}.registration-lifecycle>footer{padding:5px 8px;color:#51cf96;font-size:5px}.operator-machine{grid-column:2;grid-row:3}.operator-machine>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:9px;text-align:center;font-size:4.5px}.operator-machine span,.operator-machine b{padding:7px;border:1px solid #4e6571;border-radius:5px}.operator-machine b{background:#8f5e22}.background-jobs{grid-column:3;grid-row:3}.background-jobs ol{margin:5px 8px;padding:0;list-style:none}.background-jobs li{display:grid;grid-template-columns:15px 1fr 60px 36px;align-items:center;gap:4px;margin:7px 0;font-size:4.5px}.background-jobs svg{width:10px}.background-jobs li i{height:5px;background:#40525a}.background-jobs li em{display:block;height:100%;background:#3c8bd0}.undo-stack,.plugin-log,.plugin-test-matrix,.plugin-package{display:none}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="4"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d8dfe1!important;border-radius:10px;background:#fff}@media(max-width:950px){.blender-plugin-devcenter{grid-template-columns:190px 1fr;grid-template-rows:auto}.plugin-dev-flow{grid-template-columns:1fr}.plugin-panel-preview,.background-jobs{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.blender-plugin-devcenter{grid-template-columns:1fr}.plugin-dev-flow ol{grid-template-columns:1fr}.plugin-project-tree,.plugin-code-editor,.plugin-panel-preview,.registration-lifecycle,.operator-machine,.background-jobs{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="4"] .topic-unit-list{grid-template-columns:1fr}}
.blender-geo-page-body{display:grid;gap:14px}.blender-geometry-lab{display:grid;grid-template-columns:190px minmax(0,1fr) 205px;grid-template-rows:105px 325px 240px 175px;gap:7px;padding:7px;border:1px solid #cedade;border-radius:14px;background:#f1f5f7;color:#14283a}.blender-geometry-lab>section,.blender-geometry-lab>aside,.blender-geometry-lab>header{overflow:hidden;border:1px solid #d2dde1;border-radius:7px;background:#fff}.blender-geometry-lab header{display:flex;align-items:center;justify-content:space-between;min-height:33px;padding:0 8px}.blender-geometry-lab header b{font-size:7px}.geometry-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:315px 1fr;align-items:center;padding:9px 13px!important}.geometry-learning-flow>div{display:grid}.geometry-learning-flow>div b{font-size:21px}.geometry-learning-flow>div span{font-size:6px;color:#347eb8}.geometry-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.geometry-learning-flow li{display:grid;justify-items:center;gap:3px;padding:5px;border-top:2px solid #3b84c6}.geometry-learning-flow em{font-size:5px;font-style:normal;color:#2b77b9}.geometry-learning-flow li svg{width:18px;color:#347dbe}.geometry-learning-flow li b{font-size:5.5px}.geometry-learning-flow li small{font-size:4px}.blender-outliner{grid-column:1;grid-row:2/4}.blender-outliner ul{margin:0;padding:4px 8px;list-style:none}.blender-outliner li{display:grid;grid-template-columns:15px 1fr 12px;align-items:center;height:19px;font-size:5px}.blender-outliner li svg{width:9px;color:#ed842f}.blender-outliner li.active{border-radius:4px;background:#3e84c4;color:#fff}.blender-outliner section{padding:7px;border-top:1px solid #dfe6e8}.blender-outliner section>b{font-size:6px}.blender-outliner p{display:grid;grid-template-columns:15px 1fr;gap:5px;margin:6px 0;font-size:4.5px}.blender-outliner p svg{width:10px}.blender-outliner p strong{grid-column:2}.blender-outliner select{width:100%;font-size:5px}.blender-outliner table{width:100%;margin-top:5px;font-size:4px}.blender-outliner td{padding:3px;border-bottom:1px solid #e0e6e8}.blender-viewport{grid-column:2;grid-row:2}.blender-viewport header nav{display:flex;gap:4px}.blender-viewport header button{border:0;background:transparent;font-size:4.5px}.blender-viewport header button.active{background:#3f7eae;color:#fff}.blender-viewport header span{font-size:5px}.eco-island{position:relative;height:290px;overflow:hidden;background:linear-gradient(#7db6db 0 47%,#2f7b92 48%,#1c5d6f)}.island-ground{position:absolute;left:4%;right:4%;bottom:0;height:235px;clip-path:polygon(0 85%,8% 44%,18% 55%,29% 30%,43% 47%,57% 20%,69% 42%,82% 30%,100% 62%,100% 100%,0 100%);background:linear-gradient(145deg,#517145,#233e2d)}.path-curve{position:absolute;left:20%;top:90px;width:390px;height:180px;border:18px solid #b89968;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(19deg);box-shadow:0 0 0 2px #8d744f inset}.water-plane{position:absolute;right:-20px;bottom:0;width:38%;height:115px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 2px,transparent 3px 12px)}.trees,.rocks,.lamps{position:absolute;inset:0}.trees i{position:relative;display:inline-block;left:17%;top:70px;width:12px;height:48px;margin:5px;background:#184a26;clip-path:polygon(50% 0,100% 100%,0 100%)}.trees i:nth-child(3n){top:35px;height:65px}.rocks i{position:relative;display:inline-block;left:9%;top:210px;width:25px;height:15px;margin:7px;border-radius:60% 50% 20%;background:#7e8580}.lamps i{position:relative;display:inline-block;left:25%;top:170px;width:4px;height:55px;margin:18px;background:#242e2c}.lamps i:before{position:absolute;left:-4px;top:-8px;width:12px;height:10px;background:#ffd060;content:""}.eco-island>strong{position:absolute;left:8px;bottom:7px;color:#e1f8ff;font-size:5px}.blender-inputs{grid-column:3;grid-row:2/4}.blender-inputs header span{font-size:5px}.blender-inputs>label{display:grid;grid-template-columns:14px 65px 1fr 35px;align-items:center;gap:4px;padding:6px 8px;font-size:4.5px}.blender-inputs label svg{width:9px;color:#377eb8}.blender-inputs label i{height:4px;background:#dfe6e8}.blender-inputs label em{display:block;height:100%;background:#3e83c0}.blender-inputs section{padding:6px 8px;border-top:1px solid #dfe6e8}.blender-inputs section>b{font-size:6px}.blender-inputs dl{margin:4px 0}.blender-inputs dl div{display:flex;justify-content:space-between;margin:5px 0;font-size:4.5px}.blender-inputs dd{margin:0;font-weight:700}.blender-inputs table{width:100%;font-size:4px}.blender-inputs td{padding:4px;border-bottom:1px solid #e0e6e8}.geometry-node-editor{grid-column:2;grid-row:3}.geometry-node-editor header nav{display:flex;gap:10px;align-items:center;font-size:4.5px}.geometry-node-editor header>span{font-size:4.5px}.geometry-node-editor>div{position:relative;height:205px;background-color:#1e2428;background-image:linear-gradient(#30383d 1px,transparent 1px),linear-gradient(90deg,#30383d 1px,transparent 1px);background-size:16px 16px}.geometry-node-editor svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#37c19b;stroke-width:2}.geo-node{position:absolute;width:100px;border:1px solid #554a74;border-radius:5px;background:#2d3337;color:#e8eeee;font-size:4px}.geo-node>b{display:block;padding:5px;background:#675296}.geo-node.green>b{background:#20765c}.geo-node.blue>b{background:#2c6da8}.geo-node.orange>b{background:#bb641d}.geo-node span{display:block;padding:3px}.geo-node span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#40c7a1}.geometry-node-editor .node-0{left:2%;top:20px}.geometry-node-editor .node-1{left:17%;top:20px}.geometry-node-editor .node-2{left:32%;top:20px}.geometry-node-editor .node-3{left:47%;top:20px}.geometry-node-editor .node-4{left:62%;top:20px}.geometry-node-editor .node-5{left:32%;top:125px}.geometry-node-editor .node-6{left:57%;top:125px}.geometry-node-editor .node-7{right:2%;top:125px}.blender-assets{grid-column:1;grid-row:4}.blender-assets>div{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px}.blender-assets article{display:grid;justify-items:center;font-size:4px}.blender-assets article i{display:grid;place-items:center;width:42px;height:35px;border-radius:4px;background:#d9e4e8}.blender-assets article svg{width:20px;color:#657b83}.node-group-interface{grid-column:2;grid-row:4}.node-group-interface header span,.field-evaluation header span{font-size:5px}.node-group-interface table{width:calc(100% - 14px);margin:4px 7px;font-size:4px}.node-group-interface td{padding:4px;border-bottom:1px solid #e0e6e8}.field-evaluation{grid-column:3;grid-row:4}.field-evaluation ol{margin:4px 8px;padding:0;list-style:none}.field-evaluation li{display:grid;grid-template-columns:15px 80px 1fr 12px;align-items:center;margin:4px 0;font-size:4px}.field-evaluation li svg{width:8px;color:#159970}.blender-performance,.blender-export{display:none}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="3"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d8dfe1!important;border-radius:10px;background:#fff}@media(max-width:950px){.blender-geometry-lab{grid-template-columns:190px 1fr;grid-template-rows:auto}.geometry-learning-flow{grid-template-columns:1fr}.blender-inputs,.field-evaluation{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.blender-geometry-lab{grid-template-columns:1fr}.geometry-learning-flow ol{grid-template-columns:1fr}.blender-outliner,.blender-viewport,.blender-inputs,.geometry-node-editor,.blender-assets,.node-group-interface,.field-evaluation{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="3"] .topic-unit-list{grid-template-columns:1fr}}
.houdini-dev-page-body{display:grid;gap:14px}.houdini-dev-ide{display:grid;grid-template-columns:200px minmax(0,1fr) 215px;grid-template-rows:90px 175px 360px 165px;gap:7px;padding:7px;border:1px solid #cedadc;border-radius:14px;background:#f1f5f5;color:#1b2b31}.houdini-dev-ide>section,.houdini-dev-ide>aside,.houdini-dev-ide>header{overflow:hidden;border:1px solid #d1dcdf;border-radius:7px;background:#fff}.houdini-dev-ide header{display:flex;align-items:center;justify-content:space-between;min-height:33px;padding:0 8px}.houdini-dev-ide header b{font-size:7px}.hda-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:330px 1fr;align-items:center;padding:8px 12px!important}.hda-learning-flow>div{display:grid;grid-template-columns:36px 1fr;align-items:center}.hda-learning-flow>div>svg{grid-row:1/3;width:29px;color:#ea7128}.hda-learning-flow>div span{display:grid}.hda-learning-flow>div b{font-size:19px}.hda-learning-flow>div small{font-size:6px}.hda-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:0;padding:0;list-style:none}.hda-learning-flow li{display:grid;grid-template-columns:24px 1fr;gap:1px;padding:8px;border:1px solid #dbe3e5;border-radius:7px}.hda-learning-flow li.active{border-color:#31b8ba;background:#f1fbfb}.hda-learning-flow em{grid-row:1/3;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#edf0f1;color:#53717a;font-size:5px;font-style:normal}.hda-learning-flow li.active em{background:#1aa09e;color:#fff}.hda-learning-flow li b{font-size:5.5px}.hda-learning-flow li small{font-size:4px}.hda-package-tree{grid-column:1;grid-row:2/4}.hda-package-tree ul{margin:0;padding:4px 8px;list-style:none}.hda-package-tree li{display:grid;grid-template-columns:16px 1fr;align-items:center;height:18px;padding-left:calc(var(--depth,0)*5px);font-size:4.5px}.hda-package-tree li svg{width:10px;color:#e38a29}.hda-package-tree li.selected{border-radius:4px;background:#e8edef}.hda-package-tree section{padding:7px;border-top:1px solid #dfe5e7}.hda-package-tree section>b{font-size:6px}.dependency-graph{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;text-align:center;font-size:4px}.dependency-graph span,.dependency-graph b,.dependency-graph small{padding:5px;border:1px solid #cbd9dd;border-radius:3px}.dependency-graph span{grid-column:1/-1;border-color:#e48b45}.dependency-graph i{grid-column:1/-1;font-style:normal}.hda-package-tree footer{display:flex;gap:3px}.hda-package-tree footer em{padding:3px;background:#edf4f7;font-size:4px;font-style:normal}.hda-preview{grid-column:2;grid-row:2}.hda-preview header span{font-size:5px}.point-wave{position:relative;height:140px;overflow:hidden;background:#090a0d}.point-wave i{position:absolute;left:calc((var(--point) % 30)*3.2%);top:calc(70px + sin(var(--point))*35px);width:3px;height:3px;border-radius:50%;background:hsl(calc(var(--point)*2),85%,58%);box-shadow:0 0 4px currentColor}.point-wave i:nth-child(3n){top:45px}.point-wave i:nth-child(5n){top:95px}.point-wave i:nth-child(7n){top:25px}.point-wave>strong{position:absolute;left:10px;bottom:7px;color:#43dcc4;font-size:5px}.hda-api-console{grid-column:3;grid-row:2/5;display:grid;grid-template-rows:190px 150px 1fr;gap:7px;border:0!important;background:transparent!important}.hda-api-console>section{overflow:hidden;border:1px solid #d1dcdf;border-radius:7px;background:#fff}.hda-api-console header nav{display:flex;gap:8px;font-size:5px}.hda-api-console pre{margin:0;padding:7px;background:#fafcfc;color:#30434a;font:5px/1.55 Consolas,monospace}.hda-api-console pre strong{color:#149578}.hda-api-console ol,.hda-api-console ul{margin:0;padding:4px 8px;list-style:none}.hda-api-console ol li{display:grid;grid-template-columns:50px 1fr;margin:4px 0;font-size:4.5px}.hda-api-console ul li{display:grid;grid-template-columns:15px 1fr 30px;align-items:center;margin:5px 0;font-size:4.5px}.hda-api-console ul svg{width:9px;color:#16a574}.hda-api-console .coverage{display:block;margin:8px;color:#159573;font-size:8px}.hda-code-studio{grid-column:2;grid-row:3}.hda-code-studio header nav{display:flex;gap:3px}.hda-code-studio header button{padding:5px;border:0;background:#edf1f2;font-size:4.5px}.hda-code-studio header button.active{border-top:2px solid #e67425;background:#fff}.hda-code-studio header span{font-size:4.5px}.dual-code{display:grid;grid-template-columns:1fr 1fr;height:285px}.dual-code pre{margin:0;padding:7px;border-right:1px solid #dce4e6;background:#fbfcfd;color:#56539e;font:4.6px/1.7 Consolas,monospace}.dual-code code i{display:inline-block;width:18px;color:#9ba6aa;font-style:normal}.hda-code-studio footer{display:flex;gap:15px;padding:6px 9px;border-top:1px solid #dfe6e8;font-size:4.5px}.hda-interface-builder{grid-column:1/3;grid-row:4}.hda-interface-builder header nav{display:flex;gap:8px}.hda-interface-builder header svg{width:10px}.hda-interface-builder>div{display:grid;grid-template-columns:160px 1fr}.hda-interface-builder aside{padding:6px;border-right:1px solid #dce4e6}.hda-interface-builder aside b{font-size:5px}.hda-interface-builder aside ul{margin:4px 0;padding:0;list-style:none;font-size:4px}.hda-interface-builder aside li{padding:4px}.hda-interface-builder aside li:nth-child(2){background:#edf4f5}.hda-interface-builder form{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:6px}.hda-interface-builder label{display:grid;grid-template-columns:70px 1fr;align-items:center;font-size:4.5px}.hda-interface-builder label>strong{padding:4px;border:1px solid #d9e2e4}.hda-interface-builder label>i{height:6px;background:#dce4e7}.hda-interface-builder label em{display:block;width:65%;height:100%;background:#2099ae}.color-a{background:#f07832!important}.color-b{background:#31b4cd!important}.parameter-binding,.automation-jobs,.hda-release,.hda-test-ring{display:none}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="2"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d8dfe1!important;border-radius:10px;background:#fff}@media(max-width:950px){.houdini-dev-ide{grid-template-columns:190px 1fr;grid-template-rows:auto}.hda-learning-flow{grid-template-columns:1fr}.hda-api-console{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.houdini-dev-ide{grid-template-columns:1fr}.hda-learning-flow ol{grid-template-columns:1fr}.hda-package-tree,.hda-preview,.hda-api-console,.hda-code-studio,.hda-interface-builder{grid-column:1;grid-row:auto}.dual-code{grid-template-columns:1fr}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="2"] .topic-unit-list{grid-template-columns:1fr}}
.houdini-modeling-page-body{display:grid;gap:14px}.houdini-sop-workbench{display:grid;grid-template-columns:195px minmax(0,1fr) 220px;grid-template-rows:90px 330px 245px 165px;gap:7px;padding:7px;border:1px solid #cbd9dc;border-radius:14px;background:#eef3f4;color:#1d2c32}.houdini-sop-workbench>section,.houdini-sop-workbench>aside,.houdini-sop-workbench>header{overflow:hidden;border:1px solid #cfd9dc;border-radius:7px;background:#fff}.houdini-sop-workbench header{display:flex;align-items:center;justify-content:space-between;min-height:33px;padding:0 8px}.houdini-sop-workbench header b{font-size:7px}.houdini-flow{grid-column:1/-1;display:grid!important;grid-template-columns:300px 1fr;align-items:center;padding:8px 13px!important}.houdini-flow>div{display:grid}.houdini-flow>div b{font-size:20px}.houdini-flow>div span{font-size:6px;color:#e46e20}.houdini-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.houdini-flow li{display:grid;grid-template-columns:23px 1fr;gap:1px;padding:6px;border-right:1px solid #d8e1e3}.houdini-flow em{grid-row:1/3;display:grid;place-items:center;width:21px;height:21px;border:2px solid #9dcfc3;border-radius:50%;color:#15926f;font-size:6px;font-style:normal}.houdini-flow li.active em{border-color:#ee7128;color:#e85e18}.houdini-flow li b{font-size:6px}.houdini-flow li small{font-size:4.5px}.houdini-scene-tree{grid-column:1;grid-row:2/4}.houdini-scene-tree ul{margin:0;padding:4px 8px;list-style:none}.houdini-scene-tree li{display:grid;grid-template-columns:15px 1fr 13px;align-items:center;height:19px;font-size:5px}.houdini-scene-tree li svg{width:9px;color:#df7d2b}.houdini-scene-tree li.root{font-weight:700}.houdini-scene-tree section{padding:6px 8px;border-top:1px solid #dfe5e7}.houdini-scene-tree section>b{font-size:6px}.houdini-scene-tree table{width:100%;font-size:4px}.houdini-scene-tree td{padding:3px;border-bottom:1px solid #e2e7e8}.houdini-scene-tree dl{margin:4px 0}.houdini-scene-tree dl div{display:flex;justify-content:space-between;margin:3px 0;font-size:4px}.houdini-scene-tree dd{margin:0}.houdini-viewport{grid-column:2;grid-row:2}.houdini-viewport header nav{display:flex;gap:3px}.houdini-viewport header button{border:0;background:#dce8eb;font-size:5px}.houdini-viewport header button.active{background:#e6792d;color:#fff}.houdini-viewport header span{font-size:5px}.terrain-scene{position:relative;height:295px;overflow:hidden;background:linear-gradient(#82bde0 0 42%,#49736d 43%,#243c34)}.terrain-scene:after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 50%,rgba(38,82,137,.16));content:""}.terrain{position:absolute;bottom:0;clip-path:polygon(0 100%,10% 53%,21% 70%,31% 21%,40% 66%,52% 8%,63% 63%,75% 34%,86% 70%,100% 40%,100% 100%);background:repeating-linear-gradient(115deg,#33483f 0 7px,#728470 8px 10px);filter:drop-shadow(0 0 1px #fff)}.mountain-a{left:0;width:62%;height:250px}.mountain-b{right:0;width:58%;height:220px;background:repeating-linear-gradient(115deg,#526273 0 7px,#b5c3c9 8px 10px)}.terrain.city{left:auto;right:7%;width:36%;height:180px;clip-path:none;background:none;filter:none}.terrain.city i{position:relative;display:inline-block;width:15px;height:calc(35px + (var(--city,1))*2px);margin:2px;border:1px solid #d56f25;background:#8297a5}.terrain.city i:nth-child(3n){height:75px}.terrain.city i:nth-child(5n){height:110px}.vegetation{position:absolute;left:43%;bottom:18px;width:140px}.vegetation i{display:inline-block;width:6px;height:18px;margin:2px;background:#7aa13c;clip-path:polygon(50% 0,100% 100%,0 100%)}.height-legend{position:absolute;right:8px;bottom:15px;width:9px;height:90px;background:linear-gradient(#e63339,#f3d237,#1aa953,#2774d0)}.terrain-scene>strong{position:absolute;right:20px;bottom:15px;z-index:2;color:#fff;font-size:5px;line-height:2}.houdini-params{grid-column:3;grid-row:2/4}.houdini-params header span{font-size:5px}.houdini-params section{padding:6px 9px;border-top:1px solid #dde5e7}.houdini-params section>b{font-size:6px}.houdini-params label{display:grid;grid-template-columns:65px 1fr 42px;align-items:center;gap:4px;margin:7px 0;font-size:4.5px}.houdini-params label>strong{padding:4px;border:1px solid #d9e2e4;border-radius:3px}.houdini-params label i{height:4px;background:#dce5e7}.houdini-params label em{display:block;height:100%;background:#338db1}.houdini-params pre{margin:5px 8px;padding:7px;border:1px solid #d6dfe3;background:#f7fafb;color:#5550a0;font:4.5px/1.6 Consolas,monospace}.cache-progress{display:block;height:6px;background:#dde5e7}.cache-progress em{display:block;width:72%;height:100%;background:#e87828}.houdini-params section small{font-size:4px}.houdini-network{grid-column:2;grid-row:3}.houdini-network header nav{font-size:4.5px}.houdini-network>div{position:relative;height:210px;background-color:#26353b;background-image:linear-gradient(#34464d 1px,transparent 1px),linear-gradient(90deg,#34464d 1px,transparent 1px);background-size:16px 16px}.houdini-network svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#9bb8c4;stroke-width:2}.houdini-network article{position:absolute;display:grid;grid-template-columns:19px 1fr;align-items:center;width:105px;height:35px;border:2px solid #d78135;border-radius:5px;background:#e9eef0;font-size:5px}.houdini-network article>i{position:absolute;top:-6px;left:45%;width:8px;height:8px;border-radius:50%;background:#7aa6bd}.houdini-network article>em{position:relative;bottom:-12px;width:7px;height:7px;border-radius:50%;background:#6996b2}.houdini-network article svg{position:relative;width:14px}.sop-0{left:4%;top:25px}.sop-1{left:21%;top:25px}.sop-2{left:38%;top:25px}.sop-3{left:55%;top:25px}.sop-4{left:72%;top:25px}.sop-5{left:21%;top:135px}.sop-6{left:47%;top:135px}.sop-7{left:72%;top:135px}.houdini-timeline{grid-column:1;grid-row:4}.houdini-timeline>div{display:flex;justify-content:space-between;padding:25px 10px 10px;border-bottom:2px solid #405b67}.houdini-timeline>div span{font-size:4px}.houdini-timeline>div span.active{padding:4px;border-radius:3px;background:#1789ac;color:#fff}.houdini-timeline nav{display:flex;align-items:center;gap:12px;padding:12px}.houdini-timeline nav svg{width:12px}.houdini-timeline nav b{margin-left:auto;font-size:5px}.houdini-asset-controls{grid-column:2;grid-row:4}.houdini-asset-controls label{display:grid;grid-template-columns:70px 40px 1fr;align-items:center;gap:5px;padding:5px 9px;font-size:4.5px}.houdini-asset-controls label i{height:4px;background:#dfe7e8}.houdini-asset-controls label em{display:block;height:100%;background:#278baa}.houdini-cache-table{grid-column:3;grid-row:4}.houdini-cache-table table{width:calc(100% - 12px);margin:5px 6px;border-collapse:collapse;font-size:4px}.houdini-cache-table td{padding:5px;border-bottom:1px solid #e0e6e8}.houdini-cache-table td:last-child{color:#15986f}.houdini-export{grid-column:1/-1;grid-row:5}.houdini-export{display:none}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="1"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d8dfe1!important;border-radius:10px;background:#fff}@media(max-width:950px){.houdini-sop-workbench{grid-template-columns:190px 1fr;grid-template-rows:auto}.houdini-flow{grid-template-columns:1fr}.houdini-params,.houdini-cache-table{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.houdini-sop-workbench{grid-template-columns:1fr}.houdini-flow ol{grid-template-columns:1fr}.houdini-scene-tree,.houdini-viewport,.houdini-params,.houdini-network,.houdini-timeline,.houdini-asset-controls,.houdini-cache-table{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="1"] .topic-unit-list{grid-template-columns:1fr}}
.tutorial-workspace[data-route="procedural"] .route-heading,.tutorial-workspace[data-route="procedural"] .route-facts,.tutorial-workspace[data-route="procedural"] .route-facts~.content-block{display:none}.procedural-route-console{display:grid;gap:10px}.procedural-hero{position:relative;display:grid;grid-template-columns:1fr 540px;min-height:255px;padding:28px 32px;border:1px solid #c9dde0;border-radius:16px;background:linear-gradient(110deg,#fff 0%,#f7fbfc 54%,#eaf7f7 100%);overflow:hidden}.procedural-hero>div:first-child{z-index:2}.procedural-hero>div>span{font-size:8px;color:#8b6427}.procedural-hero>div>b{display:block;margin:10px 0;font-size:34px}.procedural-hero>div>p{max-width:680px;margin:0;color:#5d7078;font-size:10px}.procedural-hero nav{display:flex;gap:7px;margin-top:18px}.procedural-hero nav em{padding:6px 10px;border:1px solid #cbdadd;border-radius:13px;font-size:6px;font-style:normal}.procedural-hero>button{position:absolute;right:26px;bottom:24px;padding:10px 15px;border:0;border-radius:6px;background:#8c6428;color:#fff;font-size:7px}.node-asset-flow{position:relative}.node-asset-flow svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#58b8c6;stroke-width:1.5}.node-asset-flow>i{position:absolute;z-index:2;padding:6px 11px;border:1px solid #aacfd3;border-radius:5px;background:#fff;font-size:6px;font-style:normal;box-shadow:0 4px 10px rgba(43,114,125,.1)}.node-0{left:5%;top:15%}.node-1{left:24%;top:5%}.node-2{left:5%;top:55%}.node-3{left:22%;bottom:8%}.node-4{left:40%;top:25%}.node-5{left:56%;top:10%}.asset-core{position:absolute;left:48%;top:33%;z-index:3;display:grid;place-items:center;width:80px;height:80px;border:1px solid #42c6c5;border-radius:18px;background:linear-gradient(145deg,#41d4cf,#098b9b);box-shadow:0 0 35px rgba(33,193,194,.38)}.asset-core svg{width:40px;color:#fff}.procedural-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.procedural-facts article{display:grid;grid-template-columns:35px 1fr;align-items:center;padding:14px 18px;border:1px solid #d3e0e3;border-radius:10px;background:#fff}.procedural-facts svg{grid-row:1/3;width:21px;color:#139a98}.procedural-facts span{font-size:6px;color:#6f8187}.procedural-facts b{font-size:8px}.procedural-main-grid{display:grid;grid-template-columns:190px minmax(0,1fr) 210px;grid-template-rows:188px 275px 155px;gap:8px}.procedural-main-grid>section,.procedural-main-grid>aside{overflow:hidden;border:1px solid #d3e0e3;border-radius:10px;background:#fff}.procedural-main-grid header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 10px}.procedural-main-grid header b{font-size:8px}.tool-language-stack{grid-column:1;grid-row:1/4}.tool-language-stack ol{display:grid;gap:4px;margin:0;padding:6px 8px;list-style:none}.tool-language-stack li{display:grid;grid-template-columns:29px 1fr;align-items:center;padding:6px;border:1px solid #e0e6e8;border-radius:6px}.tool-language-stack li>svg{width:18px;color:#e97820}.tool-language-stack .tool-1>svg{color:#247fd2}.tool-language-stack .tool-2>svg{color:#c4469d}.tool-language-stack .tool-3>svg{color:#15a9b0}.tool-language-stack li span{display:grid}.tool-language-stack li b{font-size:7px}.tool-language-stack li small{font-size:4.5px}.tool-language-stack section{padding:8px;border-top:1px solid #dfe7e9}.tool-language-stack section>b{font-size:8px}.tool-language-stack p{display:grid;grid-template-columns:24px 1fr;align-items:center;margin:7px 0}.tool-language-stack p>svg{width:14px;color:#2289b2}.tool-language-stack p span{display:grid}.tool-language-stack p b{font-size:6px}.tool-language-stack p small{font-size:4.5px}.production-pipeline{grid-column:2;grid-row:1}.production-pipeline ol{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0;padding:7px;list-style:none}.production-pipeline li{position:relative;display:grid;justify-items:center;gap:4px;padding:7px 3px;border:1px solid #d9e2e4;border-radius:7px;text-align:center}.production-pipeline li:after{position:absolute;right:-7px;top:40%;content:'→';color:#169e9c}.production-pipeline li:last-child:after{display:none}.production-pipeline li em{position:absolute;left:4px;top:4px;font-size:4.5px;font-style:normal}.production-pipeline li svg{width:20px;color:#159f9d}.production-pipeline li:nth-child(2) svg{color:#7c61ba}.production-pipeline li:nth-child(4) svg{color:#338cc0}.production-pipeline li:nth-child(5) svg{color:#9a65bd}.production-pipeline li:nth-child(7) svg{color:#508bd1}.production-pipeline li b{font-size:5.5px}.production-pipeline li small{font-size:4px}.production-pipeline footer{display:flex;gap:8px;padding:5px 10px;background:#fbf7ef;font-size:4.5px}.production-pipeline footer span:before{margin-right:3px;color:#159c9a;content:'●'}.procedural-ops{grid-column:3;grid-row:1/4;display:grid;grid-template-rows:1fr 1fr 1fr;gap:8px;border:0!important;background:transparent!important}.procedural-ops>section{border:1px solid #d3e0e3;border-radius:9px;background:#fff;overflow:hidden}.procedural-ops header span{font-size:5px;color:#74868c}.procedural-ops ol,.procedural-ops ul{margin:0;padding:4px 8px;list-style:none}.procedural-ops ol li{display:grid;grid-template-columns:31px 1fr 26px;align-items:center;gap:5px;margin:5px 0;font-size:4.5px}.procedural-ops ol li>i{display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:#d9eef0}.procedural-ops ol li>i svg{width:15px;color:#167f92}.procedural-ops ol li>span{display:grid}.procedural-ops ol li em{height:4px;background:#e1e8ea}.procedural-ops ol li em strong{display:block;height:100%;background:#169d9b}.procedural-ops ul li{display:grid;grid-template-columns:17px 1fr 35px;align-items:center;margin:7px 0;font-size:5px}.procedural-ops ul svg{width:12px;color:#16a298}.procedural-ops ul strong{color:#168d71}.build-spark{display:flex;align-items:flex-end;gap:5px;height:40px;padding:0 10px}.build-spark i{flex:1;background:#18a09e}.procedural-ops dl{display:grid;grid-template-columns:repeat(4,1fr);margin:3px 8px}.procedural-ops dl div{display:grid;text-align:center;font-size:4.5px}.procedural-ops dd{order:-1;margin:0;font-size:10px;font-weight:700}.procedural-topic-map{grid-column:2;grid-row:2}.procedural-topic-map>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px}.procedural-topic-map button{position:relative;display:grid;grid-template-columns:25px 1fr;gap:3px;min-height:105px;padding:9px;border:1px solid #e2c9aa;border-radius:8px;background:#fffaf4;text-align:left}.procedural-topic-map button:nth-child(2n){border-color:#b9d5e8;background:#f7fbff}.procedural-topic-map button:nth-child(3n){border-color:#d8c6e9;background:#fcf9ff}.procedural-topic-map button em{font-size:5px;font-style:normal}.procedural-topic-map button>svg{width:15px;color:#df7927}.procedural-topic-map button>b,.procedural-topic-map button>small,.procedural-topic-map button>strong{grid-column:1/-1}.procedural-topic-map button>b{font-size:6px}.procedural-topic-map button>small{font-size:4.5px}.procedural-topic-map button>strong{align-self:end;color:#147f83;font-size:4.5px}.procedural-stage-map{grid-column:2;grid-row:3}.procedural-stage-map ol{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:8px;list-style:none}.procedural-stage-map li{display:grid;gap:3px;padding:9px;border:1px solid #d5e1e3;border-radius:7px}.procedural-stage-map li em{color:#159a98;font-size:5px;font-style:normal}.procedural-stage-map li b{font-size:6px}.procedural-stage-map li small{font-size:4.5px}@media(max-width:950px){.procedural-hero{grid-template-columns:1fr}.node-asset-flow{display:none}.procedural-main-grid{grid-template-columns:180px 1fr}.procedural-ops{grid-column:1/-1;grid-row:auto}.procedural-topic-map,.procedural-stage-map{grid-column:2}}@media(max-width:680px){.procedural-facts,.procedural-main-grid,.production-pipeline ol,.procedural-topic-map>div,.procedural-stage-map ol{grid-template-columns:1fr}.tool-language-stack,.production-pipeline,.procedural-topic-map,.procedural-stage-map{grid-column:1;grid-row:auto}}
.three-xr-page-body{display:grid;gap:14px}.xr-experience-lab{display:grid;grid-template-columns:190px minmax(0,1fr) 185px;grid-template-rows:112px 425px 190px;gap:8px;padding:8px;border:1px solid #cbdce1;border-radius:15px;background:linear-gradient(135deg,#f4faf9,#f4f2fb);color:#14283a}.xr-experience-lab>section,.xr-experience-lab>aside,.xr-experience-lab>header{overflow:hidden;border:1px solid #d4e0e5;border-radius:9px;background:#fff}.xr-experience-lab header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 9px}.xr-experience-lab header b{font-size:8px}.xr-flow{grid-column:1/-1;display:grid!important;grid-template-columns:275px 1fr;align-items:center;padding:12px 16px!important}.xr-flow>div{display:grid}.xr-flow>div b{font-size:24px}.xr-flow>div span{font-size:7px;color:#657680}.xr-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.xr-flow li{position:relative;display:grid;justify-items:center;gap:3px;padding-top:5px}.xr-flow li:after{position:absolute;left:65%;right:-35%;top:17px;height:1px;background:#c8c8ef;content:""}.xr-flow li:last-child:after{display:none}.xr-flow em{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ece9fa;color:#625db5;font-size:7px;font-style:normal;z-index:1}.xr-flow li.active em{background:#169e9c;color:#fff}.xr-flow li b{font-size:6px}.xr-flow li small{font-size:4.5px;color:#71818a}.xr-capabilities{grid-column:1;grid-row:2}.xr-capabilities section{padding:5px 9px;border-top:1px solid #e1e7e9}.xr-capabilities section>b{color:#605bb2;font-size:6px}.xr-capabilities p{display:flex;justify-content:space-between;margin:5px 0;padding:4px;border:1px solid #e0e6e9;border-radius:4px;font-size:5px}.xr-capabilities p strong{color:#159f73}.xr-capabilities dl{margin:4px 0}.xr-capabilities dl div{display:flex;justify-content:space-between;margin:4px 0;font-size:5px}.xr-capabilities dd{margin:0;font-weight:700}.xr-capabilities button{width:100%;border:1px solid #cbd9df;background:#fff;font-size:5px}.xr-space-preview{grid-column:2;grid-row:2}.xr-space-preview header small{color:#47dca6}.xr-space-preview header nav{display:flex;gap:12px}.xr-space-preview header svg{width:14px}.xr-room{position:relative;height:390px;overflow:hidden;background:linear-gradient(rgba(79,86,200,.23) 1px,transparent 1px),linear-gradient(90deg,rgba(79,86,200,.23) 1px,transparent 1px),radial-gradient(circle at 50% 45%,#394392,#17205d 70%,#11164c);background-size:26px 26px,26px 26px,auto;perspective:500px}.xr-room:before{position:absolute;inset:50% -10% -15%;border:1px solid #6571db;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(91,110,224,.45) 23px),repeating-linear-gradient(90deg,transparent 0 30px,rgba(91,110,224,.45) 31px);transform:rotateX(56deg);content:""}.xr-sofa{position:absolute;left:39%;top:165px;width:170px;height:70px;border:2px solid #7183ea;background:linear-gradient(#596bc1,#29397e);box-shadow:0 12px 28px #172459}.xr-table{position:absolute;left:45%;top:245px;width:90px;height:28px;border:2px solid #df9b32;background:#5d492b}.xr-anchor,.xr-viewpoint{position:absolute;padding:6px;border:1px solid #b0b7ff;background:rgba(25,30,91,.82);color:#fff;font-size:6px}.anchor-a{left:30%;top:55px}.anchor-b{right:20%;top:85px;border-color:#eea638}.xr-viewpoint{left:45%;top:200px}.xr-controller{position:absolute;bottom:20px;width:135px;height:115px}.xr-controller.left{left:5%;transform:rotate(-15deg)}.xr-controller.right{right:5%;transform:rotate(15deg)}.xr-controller i{position:absolute;left:calc(12px * var(--i));bottom:0;width:4px;height:95px;border:1px solid #30dff3;border-radius:50%;transform:rotate(calc((var(--i) - 4)*5deg));transform-origin:bottom}.xr-controller.right i{border-color:#e256f3}.xr-controller i:nth-child(1){--i:1}.xr-controller i:nth-child(2){--i:2}.xr-controller i:nth-child(3){--i:3}.xr-controller i:nth-child(4){--i:4}.xr-controller i:nth-child(5){--i:5}.xr-controller i:nth-child(6){--i:6}.xr-controller i:nth-child(7){--i:7}.xr-controller i:nth-child(8){--i:8}.xr-room svg{position:absolute;inset:0;width:100%;height:100%;fill:#ffb332;stroke:#ffb332}.xr-room .xr-ray{fill:none;stroke-width:2}.xr-room .ray-left{stroke:#28e3f0}.xr-room .ray-right{stroke:#ec56ea}.xr-room>strong{position:absolute;left:10px;bottom:8px;color:#6be7f0;font-size:6px}.xr-input-inspector{grid-column:3;grid-row:2}.xr-input-inspector section{padding:6px 9px;border-top:1px solid #e0e7e9}.xr-input-inspector section>b{color:#665db7;font-size:6px}.xr-input-inspector p{display:flex;justify-content:space-between;margin:5px 0;font-size:5px}.hand-skeleton{position:relative;height:85px}.hand-skeleton i{position:absolute;left:calc((var(--joint,1))*7px);bottom:8px;width:4px;height:4px;border-radius:50%;background:#19a6ce}.hand-skeleton i:nth-child(3n){left:30px;bottom:30px}.hand-skeleton i:nth-child(4n){left:65px;bottom:50px}.hand-skeleton i:nth-child(5n){left:95px;bottom:25px}.reference-space{grid-column:1;grid-row:3}.reference-space>div{position:relative;height:145px}.reference-space i{position:absolute;left:70px;top:65px;width:75px;border-top:2px solid;font-size:5px;font-style:normal}.reference-space .axis-x{color:#e84a52;transform:rotate(28deg)}.reference-space .axis-y{color:#24a45e;transform:rotate(-90deg)}.reference-space .axis-z{color:#3786db;transform:rotate(-28deg)}.reference-space span{position:absolute;left:72px;top:53px}.guardian-map{grid-column:2;grid-row:3}.guardian-map div{display:grid;place-items:center}.guardian-map svg{width:180px;height:115px;fill:rgba(255,170,34,.12);stroke:#f0a62e;stroke-width:3}.guardian-map svg circle{fill:#545dd3}.guardian-map small{font-size:5px}.comfort-settings{grid-column:3;grid-row:3}.comfort-settings label{display:grid;grid-template-columns:55px 1fr 50px;gap:4px;align-items:center;padding:5px 8px;font-size:4.5px}.comfort-settings label i{height:4px;background:#dfe7e9}.comfort-settings label em{display:block;width:65%;height:100%;background:#159e9c}.xr-device-matrix{grid-column:1/3;grid-row:4}.xr-fallback{grid-column:3;grid-row:4}.xr-acceptance{grid-column:1/-1;grid-row:5}.xr-device-matrix table{width:calc(100% - 16px);margin:6px 8px;border-collapse:collapse;font-size:5px}.xr-device-matrix td{padding:6px;border-bottom:1px solid #e0e7e9}.xr-fallback ul{margin:5px 8px;padding:0;list-style:none}.xr-fallback li{display:flex;align-items:center;gap:6px;margin:7px 0;font-size:5px}.xr-fallback li svg{width:12px;color:#168f9e}.xr-fallback button{margin:0 8px;width:calc(100% - 16px);border:0;background:#149c9a;color:#fff;font-size:5px}.xr-acceptance{display:none}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="7"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.xr-experience-lab{grid-template-columns:180px 1fr;grid-template-rows:auto}.xr-flow{grid-template-columns:1fr}.xr-input-inspector,.comfort-settings,.xr-fallback{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.xr-experience-lab{grid-template-columns:1fr}.xr-flow ol{grid-template-columns:1fr}.xr-capabilities,.xr-space-preview,.xr-input-inspector,.reference-space,.guardian-map,.comfort-settings,.xr-device-matrix,.xr-fallback{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:1fr}}
.three-performance-page-body{display:grid;gap:14px}.performance-war-room{display:grid;grid-template-columns:190px minmax(0,1fr) 205px;grid-template-rows:112px 340px 175px 190px;gap:8px;padding:8px;border:1px solid #cbdde0;border-radius:15px;background:#f4f9f9;color:#10262d}.performance-war-room>section,.performance-war-room>aside,.performance-war-room>header{overflow:hidden;border:1px solid #d4e0e3;border-radius:9px;background:#fff}.performance-war-room header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 10px}.performance-war-room header b{font-size:8px}.perf-flow{grid-column:1/-1;display:grid!important;grid-template-columns:290px 1fr;align-items:center;padding:12px 15px!important}.perf-flow>div{display:grid}.perf-flow>div b{font-size:23px}.perf-flow>div span{font-size:7px;color:#62757c}.perf-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.perf-flow li{position:relative;display:grid;grid-template-columns:24px 1fr;gap:1px;padding:8px 5px 8px 12px;border-top:2px solid #dce5e7}.perf-flow li:after{position:absolute;right:-6px;top:17px;width:11px;height:11px;border-top:1px solid #b7c9ce;border-right:1px solid #b7c9ce;transform:rotate(45deg);content:""}.perf-flow em{grid-row:1/3;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e5eaec;font-size:6px;font-style:normal}.perf-flow li.active{border-color:#159b99}.perf-flow li.active em{background:#159b99;color:#fff}.perf-flow li b{font-size:6px}.perf-flow li small{font-size:4.5px;color:#75868b}.scene-complexity{grid-column:1;grid-row:2/4}.scene-complexity ul{margin:0;padding:4px 9px;list-style:none}.scene-complexity li{display:grid;grid-template-columns:1fr 34px 12px;align-items:center;height:20px;font-size:5px}.scene-complexity li.root{font-weight:700}.scene-complexity li svg{width:9px}.scene-complexity section{margin-top:6px;border-top:1px solid #dce5e7;padding:8px}.scene-complexity section>b{font-size:7px}.scene-complexity dl{margin:5px 0}.scene-complexity dl div{display:flex;justify-content:space-between;margin:5px 0;font-size:5px}.scene-complexity dd{margin:0;font-weight:700}.frame-analyzer{grid-column:2;grid-row:2}.frame-analyzer header nav{display:flex;gap:3px}.frame-analyzer header button{border:0;background:#e7eef0;font-size:5px}.frame-analyzer header button.active{background:#129d9b;color:#fff}.city-wireframe{position:relative;height:270px;overflow:hidden;background:linear-gradient(165deg,#04131c,#062c42 70%,#081922)}.city-wireframe:before{position:absolute;inset:0;background:repeating-linear-gradient(8deg,transparent 0 14px,rgba(22,165,203,.16) 15px),repeating-linear-gradient(97deg,transparent 0 28px,rgba(18,176,211,.13) 29px);content:""}.city-wireframe>i{position:absolute;left:calc((var(--tower) * 23px) % 94%);bottom:18px;width:calc(12px + (var(--tower) % 5)*8px);height:calc(35px + (var(--tower) % 8)*22px);border:1px solid #1bbce4;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(54,202,235,.25) 9px);transform:skewY(calc((var(--tower) % 3)*-2deg));box-shadow:0 0 8px rgba(29,186,226,.24)}.city-wireframe>span{position:absolute;left:calc(var(--hot)*13%);top:calc(25px + (var(--hot) % 3)*55px);width:70px;height:38px;border-radius:50%;background:radial-gradient(circle,#fff552,#ff6d1d 32%,rgba(234,35,52,.75) 55%,transparent 72%);filter:blur(5px)}.city-wireframe>strong{position:absolute;left:10px;bottom:7px;color:#66dcf1;font-size:6px;letter-spacing:.18em}.frame-analyzer footer{display:flex;justify-content:space-between;padding:7px 10px;font-size:4.5px;color:#587078}.realtime-metrics{grid-column:3;grid-row:2/4}.realtime-metrics time{font-size:5px;color:#8a969a}.realtime-metrics ol{margin:0;padding:0 9px;list-style:none}.realtime-metrics li{position:relative;display:grid;grid-template-columns:1fr 1fr;height:64px;border-bottom:1px solid #e1e7e9;font-size:5px}.realtime-metrics li>strong{text-align:right;font-size:8px}.realtime-metrics li small{color:#869398}.realtime-metrics svg{grid-column:1/-1;width:100%;height:22px;fill:none;stroke:#169e9c;stroke-width:1.5}.realtime-metrics li:nth-child(even) svg{stroke:#d76e5d}.frame-timeline{grid-column:2;grid-row:3;display:grid;grid-template-rows:34px 1fr 1fr;padding-bottom:7px}.frame-timeline header span{font-size:5px}.frame-timeline>div{display:grid;grid-template-columns:65px 1fr 45px;align-items:center;padding:0 10px;font-size:5px}.frame-timeline>div>i{display:flex;height:23px;font-style:normal}.frame-timeline em{display:grid;place-items:center;flex:1;background:#5c7db1;color:#fff;font-size:4.5px;font-style:normal}.frame-timeline .stage-1{background:#4f9db0}.frame-timeline .stage-2{background:#4eb38f}.frame-timeline .stage-3{background:#7270b2}.frame-timeline .stage-4{background:#dd9b4b}.memory-trend{grid-column:1;grid-row:4}.memory-trend svg{width:100%;height:105px;fill:none;stroke-width:3}.memory-trend .heap{stroke:#e44f78}.memory-trend .gpu{stroke:#6f61d3}.memory-trend footer{display:grid;gap:4px;padding:0 10px;font-size:4.5px}.loading-waterfall{grid-column:2;grid-row:4}.loading-waterfall ol{margin:0;padding:4px 10px;list-style:none}.loading-waterfall li{display:grid;grid-template-columns:90px 42px 1fr;align-items:center;height:18px;font-size:4.5px}.loading-waterfall li i{height:7px;background:linear-gradient(90deg,#6989d1,#48b99a)}.optimization-matrix{grid-column:1;grid-row:5}.resource-budget{grid-column:2;grid-row:5}.lifecycle-checklist{grid-column:3;grid-row:5}.performance-report{grid-column:1/-1;grid-row:6}.optimization-matrix table,.performance-report table{width:calc(100% - 14px);margin:3px 7px;border-collapse:collapse;font-size:4.5px}.optimization-matrix td,.performance-report td{padding:5px;border-bottom:1px solid #e0e7e9}.optimization-matrix td:last-child,.performance-report td:last-child{color:#159b77;font-weight:700}.resource-budget dl{margin:4px 9px}.resource-budget dl div{display:grid;grid-template-columns:70px 1fr;align-items:center;margin:7px 0;font-size:4.5px}.resource-budget dd{display:grid;grid-template-columns:1fr 40px;gap:4px;margin:0}.resource-budget dd i{height:5px;background:#e2e8ea}.resource-budget dd em{display:block;height:100%;background:#d99c39}.lifecycle-checklist ul{margin:0;padding:4px 9px;list-style:none}.lifecycle-checklist li{display:grid;grid-template-columns:12px 1fr 30px;align-items:center;margin:6px 0;font-size:4.5px}.lifecycle-checklist li svg{width:9px;color:#159b99}.lifecycle-checklist li strong{color:#159b77}.performance-report{display:none}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="6"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.performance-war-room{grid-template-columns:190px 1fr;grid-template-rows:auto}.perf-flow{grid-template-columns:1fr}.realtime-metrics,.lifecycle-checklist{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.performance-war-room{grid-template-columns:1fr}.perf-flow ol{grid-template-columns:1fr}.scene-complexity,.frame-analyzer,.realtime-metrics,.frame-timeline,.memory-trend,.loading-waterfall,.optimization-matrix,.resource-budget,.lifecycle-checklist{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:1fr}}
.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="5"] .topic-heading{background:linear-gradient(112deg,#fff 0%,#f7fbfc 62%,#eef0ff 100%);border-color:#c9d9e3}.three-post-page-body{display:grid;gap:14px}.postfx-studio{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:132px 390px 210px 126px;gap:10px;padding:10px;border:1px solid #cbdde0;border-radius:16px;background:linear-gradient(135deg,#f7fcfb,#f4f3fb);color:#0b252b}.postfx-studio>section,.postfx-studio>aside,.postfx-studio>header{overflow:hidden;border:1px solid #d5e0e4;border-radius:11px;background:rgba(255,255,255,.94);box-shadow:0 5px 14px rgba(36,85,96,.06)}.postfx-studio header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;min-height:38px}.postfx-studio header b{font-size:10px}.postfx-studio header small{font-weight:400;color:#708187}.postfx-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:325px 1fr;align-items:center;padding:14px 18px!important}.postfx-learning-flow>div{display:grid;gap:4px}.postfx-learning-flow>div b{font-size:26px}.postfx-learning-flow>div span{font-size:9px;color:#65777d}.postfx-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.postfx-learning-flow li{position:relative;display:grid;justify-items:center;gap:5px;padding-top:12px;border-top:3px solid #dfe6e8;color:#718086}.postfx-learning-flow li:before{position:absolute;top:-8px;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:#dfe6e8;content:""}.postfx-learning-flow li.active{border-color:#1aa19f;color:#128b89}.postfx-learning-flow li.active:before{background:#1aa19f}.postfx-learning-flow em{font-size:6px;font-style:normal}.postfx-learning-flow li b{font-size:7px}.postfx-learning-flow li small{font-size:5px}.postfx-preview{grid-column:1;grid-row:2}.postfx-preview header nav{display:flex;gap:4px}.postfx-preview header button,.composer-stack header button{padding:5px 9px;border:0;border-radius:5px;background:#eef3f4;color:#46595f;font-size:6px}.postfx-preview header button.active{background:#159c9b;color:#fff}.postfx-scene{position:relative;height:275px;overflow:hidden;background:radial-gradient(circle at 50% 52%,rgba(35,174,219,.65),transparent 10%),radial-gradient(circle at 50% 55%,#0b1e29 0 18%,transparent 19%),linear-gradient(155deg,#07131e,#0b3c54 55%,#121a25)}.postfx-scene:before{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 80px,rgba(50,184,223,.12) 81px),linear-gradient(90deg,rgba(239,142,52,.2),transparent 25%,transparent 75%,rgba(35,167,213,.25));content:""}.postfx-scene .scene-orb{position:absolute;left:42%;top:52px;width:125px;height:125px;border:2px solid rgba(164,225,245,.8);border-radius:50%;background:radial-gradient(circle at 33% 28%,#dffbff 0 3%,#1e89b6 6%,#102b3b 24%,#03090e 62%,#1686ad 74%,#07131c 80%);box-shadow:0 15px 45px #21a8dc,0 0 80px rgba(27,166,214,.55)}.postfx-scene .scene-floor{position:absolute;inset:57% 0 0;background:repeating-linear-gradient(0deg,transparent 0 26px,rgba(41,143,176,.22) 27px),repeating-linear-gradient(90deg,transparent 0 50px,rgba(41,143,176,.2) 51px);transform:perspective(300px) rotateX(58deg)}.postfx-scene>i{position:absolute;left:calc(var(--beam)*8%);top:20px;width:3px;height:180px;background:linear-gradient(transparent,rgba(44,179,225,.55),transparent);filter:blur(1px)}.postfx-scene>strong{position:absolute;left:13px;bottom:10px;color:#a6e8f8;font-size:7px;letter-spacing:.25em}.postfx-preview footer{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:6px}.postfx-preview footer button{display:grid;grid-template-columns:45px 1fr;align-items:center;gap:5px;padding:4px;border:1px solid #d5e1e4;border-radius:7px;background:#fff;color:#273b42;font-size:5px;text-align:left}.postfx-preview footer button.active{border-color:#13a29f;box-shadow:0 0 0 1px #13a29f}.fx-thumb{height:32px;border-radius:4px;background:linear-gradient(145deg,#173b55,#1aa0c3 55%,#df8b3d)}.fx-1{filter:brightness(1.25)}.fx-2{filter:blur(1px)}.fx-3{filter:hue-rotate(45deg)}.fx-4{filter:contrast(1.3)}.composer-stack{grid-column:2;grid-row:2}.composer-stack ol{display:grid;gap:4px;margin:0;padding:5px 8px;list-style:none}.composer-stack li{display:grid;grid-template-columns:18px 1fr 32px;align-items:center;min-height:36px;padding:3px 8px;border:1px solid #e0e6e8;border-radius:7px}.composer-stack li.active{border-color:#12a09e;background:#f0fbfa}.composer-stack li svg{width:11px;color:#60767d}.composer-stack li span{display:flex;gap:5px;align-items:center}.composer-stack li b{font-size:6px}.composer-stack li small{font-size:5px}.composer-stack li i{padding:3px;border-radius:8px;background:#1fa7a5;color:#fff;font-size:4px;font-style:normal;text-align:center}.composer-stack footer{display:flex;align-items:center;gap:4px;padding:7px 10px;border-top:1px solid #e3e9eb;font-size:5px}.composer-stack footer span{margin-right:auto}.composer-stack footer button{border:1px solid #dce5e7;background:#fff;font-size:5px}.effect-controls{grid-column:1;grid-row:3}.effect-controls header span{font-size:6px;color:#159b99}.effect-controls>div{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;padding:10px 14px}.effect-controls label{display:grid;grid-template-columns:65px 1fr 35px;align-items:center;gap:7px;font-size:5px}.effect-controls label i{height:4px;border-radius:3px;background:#e1e8e9}.effect-controls label em{display:block;height:100%;border-radius:3px;background:#18a09e}.effect-controls label strong{padding:4px;border:1px solid #dde5e6;border-radius:4px;text-align:center}.effect-controls>button{margin-left:14px;padding:5px 9px;border:1px solid #d8e2e4;background:#fff;font-size:5px}.postfx-budget{grid-column:2;grid-row:3;position:relative}.postfx-budget header span{font-size:5px}.postfx-budget>div{display:flex;align-items:center;gap:10px;padding:4px 12px}.postfx-budget>div>strong{color:#159b99;font-size:20px}.postfx-budget>div>strong small{font-size:6px}.budget-donut{width:48px;height:48px;border-radius:50%;background:conic-gradient(#18a09e 0 45%,#5794c4 45% 75%,#7a69bb 75% 90%,#dbc17b 90%);mask:radial-gradient(circle,transparent 48%,#000 50%)}.postfx-budget ul{margin:0;padding:0;list-style:none;font-size:4.5px}.postfx-budget svg{position:absolute;right:10px;bottom:8px;width:180px;height:46px;fill:none;stroke:#26a6ae;stroke-width:2}.postfx-compare{display:none}.quality-presets{grid-column:1;grid-row:4}.quality-presets nav{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:7px 12px}.quality-presets button{display:grid;place-items:center;min-height:58px;border:1px solid #dbe4e6;border-radius:7px;background:#fff;color:#2b4147;font-size:6px}.quality-presets button.active{border-color:#14a09e;background:#f0fbfa;color:#108886}.quality-presets small{font-size:4.5px}.postfx-acceptance{grid-column:2;grid-row:4;position:relative}.postfx-acceptance ul{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:3px 10px;list-style:none}.postfx-acceptance li{display:flex;gap:4px;font-size:4.5px}.postfx-acceptance li svg{width:8px;color:#17a09e}.postfx-acceptance>button{position:absolute;right:10px;bottom:8px;padding:6px 10px;border:0;border-radius:5px;background:#149b99;color:#fff;font-size:5px}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="5"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #cfdfe4!important;border-radius:10px;background:#fff}@media(max-width:950px){.postfx-studio{grid-template-columns:1fr;grid-template-rows:auto}.postfx-learning-flow{grid-template-columns:1fr}.postfx-preview,.composer-stack,.effect-controls,.postfx-budget,.quality-presets,.postfx-acceptance{grid-column:1;grid-row:auto}}@media(max-width:680px){.postfx-learning-flow ol,.postfx-preview footer,.effect-controls>div,.quality-presets nav{grid-template-columns:1fr}.tutorial-workspace[data-route="three"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:1fr}}
.blender-plugin-devcenter{grid-template-columns:205px minmax(0,1fr) 285px;grid-template-rows:90px 450px 180px}.plugin-project-tree li{font-size:5.5px}.plugin-code-editor pre{height:375px;font-size:5.5px}.plugin-panel-preview label,.plugin-panel-preview li{font-size:5px}
.maya-plugin-page-body{display:grid;gap:14px}.maya-td-cockpit{display:grid;grid-template-columns:200px minmax(0,1fr) 285px;grid-template-rows:84px 250px 235px 150px;gap:7px;padding:7px;border:1px solid #cbd9dc;border-radius:14px;background:#eaf0f2;color:#dce8eb}.maya-td-cockpit>header,.maya-td-cockpit>section,.maya-td-cockpit>aside{overflow:hidden;border:1px solid #3b4b53;border-radius:7px;background:#1e292f}.maya-td-cockpit header{display:flex;align-items:center;justify-content:space-between;min-height:31px;padding:0 8px}.maya-td-cockpit header b{font-size:7px}.maya-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:310px 1fr 86px;align-items:center;padding:7px 11px!important;border-color:#d4e0e3!important;background:#fff!important;color:#18313b!important}.maya-learning-flow>div{display:grid;grid-template-columns:44px 1fr;align-items:center}.maya-learning-flow>div>em{grid-row:1/3;color:#159c9a;font-size:27px;font-style:normal;font-weight:800}.maya-learning-flow>div span{display:grid}.maya-learning-flow>div b{font-size:18px}.maya-learning-flow>div small{font-size:5px}.maya-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.maya-learning-flow li{display:grid;grid-template-columns:21px 1fr;gap:1px;padding:6px;border-bottom:2px solid #dce4e6}.maya-learning-flow li.active{border-color:#18a09e}.maya-learning-flow li>em{grid-row:1/3;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e2ecee;color:#4f7380;font-size:5px;font-style:normal}.maya-learning-flow li.active>em{background:#19a09e;color:#fff}.maya-learning-flow li b{font-size:5px}.maya-learning-flow li small{font-size:4px}.maya-learning-flow>strong{padding:7px;border-radius:4px;background:#e7f7f6;color:#138b89;font-size:5px;text-align:center}.maya-outliner{grid-column:1;grid-row:2/4}.maya-outliner ul{margin:0;padding:4px 8px;list-style:none}.maya-outliner li{display:grid;grid-template-columns:14px 1fr 12px;align-items:center;height:24px;padding:0 4px;font-size:5px}.maya-outliner li svg{width:9px;color:#43a6cf}.maya-outliner li.active{background:#2d5870;color:#fff}.maya-dg-canvas{grid-column:2;grid-row:2}.maya-dg-canvas header nav{display:flex;gap:8px;font-size:4.5px}.maya-dg-canvas header small{font-size:4.5px;color:#4ed0a3}.maya-dg-canvas>div{position:relative;height:215px;background-color:#182229;background-image:linear-gradient(rgba(103,146,159,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(103,146,159,.08) 1px,transparent 1px);background-size:12px 12px}.maya-dg-canvas svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#29d5c8;stroke-width:2}.maya-node{position:absolute;display:grid;width:90px;border:1px solid #536a75;border-radius:5px;background:#263942;box-shadow:0 3px 7px #0b1216}.maya-node b{padding:5px 6px;background:#386377;font-size:5px}.maya-node span{padding:4px 6px;font-size:4px}.maya-node i{height:1px;margin:2px 7px;background:#45606c}.maya-node-0{left:2%;top:16px}.maya-node-1{left:2%;top:122px}.maya-node-2{left:20%;top:58px}.maya-node-3{left:45%;top:32px}.maya-node-4{left:45%;top:155px}.maya-node-5{left:69%;top:95px}.maya-node-6{right:1%;top:106px}.maya-node-2 b,.maya-node-4 b{background:#654d79}.maya-node-3 b{background:#557749}.maya-attributes{grid-column:3;grid-row:2/4}.maya-attributes nav{display:grid;grid-template-columns:repeat(3,1fr)}.maya-attributes nav button{padding:6px;border:0;border-right:1px solid #41515a;background:#25343b;color:#cdd8dc;font-size:4.5px}.maya-attributes nav button.active{background:#169998;color:#fff}.maya-attributes section{padding:7px 9px;border-top:1px solid #41515a}.maya-attributes section>b{font-size:6px}.maya-attributes label{display:grid;grid-template-columns:66px 1fr 38px;align-items:center;gap:4px;margin:5px 0;font-size:4.5px}.maya-attributes label>strong{padding:4px;background:#2c3b42}.maya-attributes label>i{height:4px;background:#40525a}.maya-attributes label>i em{display:block;width:72%;height:100%;background:#22c9bd}.maya-script-editor{grid-column:2;grid-row:3}.maya-script-editor header nav{display:flex;height:100%}.maya-script-editor header button{display:flex;align-items:center;gap:3px;padding:0 13px;border:0;border-right:1px solid #3e4d54;background:#26343b;color:#c9d6da;font-size:5px}.maya-script-editor header button.active{border-top:2px solid #26aee8;background:#182229}.maya-script-editor header button svg{width:9px}.maya-script-editor header span{font-size:4.5px}.maya-script-editor>div{display:grid;grid-template-columns:1fr 1fr;height:165px}.maya-script-editor pre{margin:0;padding:7px;overflow:hidden;border-right:1px solid #42525a;background:#162027;color:#cb75df;font:4.6px/1.35 Consolas,monospace}.maya-script-editor code i{display:inline-block;width:19px;color:#607781;font-style:normal}.maya-script-editor code strong{color:#56ce94}.maya-script-editor footer{display:flex;gap:4px;padding:5px 7px;background:#182229}.maya-script-editor footer button{padding:4px 8px;border:1px solid #40545d;background:#2c3c43;color:#d5dfe2;font-size:4px}.maya-script-editor footer strong{margin-left:auto;color:#59d49b;font-size:4.5px}.maya-plugin-manager{grid-column:3;grid-row:3/5;display:none}.maya-callbacks{grid-column:1;grid-row:4;position:relative}.maya-callbacks table{width:60%;padding:4px 7px;font-size:4px}.maya-callbacks td{padding:3px;border-bottom:1px solid #35464e}.maya-callbacks td:nth-child(2){color:#54d09a}.maya-callbacks aside{position:absolute;top:36px;right:5px;width:38%;display:grid;gap:4px}.maya-callbacks aside b{font-size:5px}.maya-callbacks aside span{padding:4px;background:#2c3c43;font-size:3.8px}.maya-diagnostics{grid-column:2;grid-row:4}.maya-diagnostics>div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px}.maya-diagnostics>div strong{display:grid;color:#57d0c5;font-size:12px}.maya-diagnostics>div small{color:#9eb0b7;font-size:4px}.maya-diagnostics>i{display:block;height:7px;margin:4px 8px;background:#3a4b53}.maya-diagnostics>i em{display:block;width:74%;height:100%;background:linear-gradient(90deg,#18a09e,#34a8e3,#ed8b2f)}.maya-diagnostics footer{padding:7px;font-size:4.5px}.maya-execution-log{grid-column:3;grid-row:4}.maya-execution-log header nav{font-size:4px}.maya-execution-log ol{margin:0;padding:5px 8px;list-style:none}.maya-execution-log li{display:grid;grid-template-columns:48px 1fr;gap:4px;margin:5px 0;color:#60d39a;font-size:4px}.maya-execution-log li.warn{color:#efa344}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="5"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d6e0e2!important;border-radius:10px;background:#fff}@media(max-width:950px){.maya-td-cockpit{grid-template-columns:190px 1fr}.maya-learning-flow{grid-template-columns:1fr}.maya-attributes,.maya-execution-log{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.maya-td-cockpit{grid-template-columns:1fr;grid-template-rows:auto}.maya-learning-flow ol{grid-template-columns:1fr}.maya-outliner,.maya-dg-canvas,.maya-attributes,.maya-script-editor,.maya-callbacks,.maya-diagnostics,.maya-execution-log{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="5"] .topic-unit-list{grid-template-columns:1fr}}
.maya-td-cockpit{grid-template-columns:210px minmax(0,1fr) 295px;grid-template-rows:84px 255px 245px 150px}.maya-dg-canvas,.maya-script-editor{border-top-color:#18a09e}.maya-script-editor>div{height:175px}.maya-script-editor pre{font-size:5px}.maya-outliner li{font-size:5.3px}
.maxscript-page-body{display:grid;gap:14px}.max-production-studio{display:grid;grid-template-columns:205px minmax(0,1fr) 285px;grid-template-rows:82px 315px 210px 180px;gap:7px;padding:7px;border:1px solid #cbd9dc;border-radius:14px;background:#e9eff1;color:#dce6e9}.max-production-studio>header,.max-production-studio>section,.max-production-studio>aside{overflow:hidden;border:1px solid #3c4a51;border-radius:6px;background:#222c31}.max-production-studio header{display:flex;align-items:center;justify-content:space-between;min-height:30px;padding:0 8px}.max-production-studio header b{font-size:7px}.max-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:300px 1fr 85px;align-items:center;padding:7px 12px!important;border-color:#d5dfe2!important;background:#fff!important;color:#1e313a!important}.max-learning-flow>div{display:grid}.max-learning-flow>div b{font-size:19px}.max-learning-flow>div b em{color:#327fa8;font-style:normal}.max-learning-flow>div small{font-size:5px}.max-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.max-learning-flow li{display:grid;grid-template-columns:22px 1fr;gap:1px;padding:5px;border-bottom:2px solid #dce4e7}.max-learning-flow li.active{border-color:#2c8fbd}.max-learning-flow li>em{grid-row:1/3;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#e4ecef;color:#41768e;font-size:5px;font-style:normal}.max-learning-flow li.active>em{background:#378eb8;color:#fff}.max-learning-flow li b{font-size:5px}.max-learning-flow li small{font-size:4px}.max-learning-flow>strong{padding:7px;border-radius:4px;background:#eaf4f8;color:#2e7c9e;font-size:5px;text-align:center}.max-scene-explorer{grid-column:1;grid-row:2/4}.max-scene-explorer nav{display:grid;grid-template-columns:repeat(3,1fr)}.max-scene-explorer nav button{padding:5px;border:0;background:#29363c;color:#c8d4d8;font-size:4px}.max-scene-explorer nav button.active{background:#387da0}.max-scene-explorer ul{margin:0;padding:4px 7px;list-style:none}.max-scene-explorer li{display:grid;grid-template-columns:14px 1fr 12px;align-items:center;height:21px;padding:0 4px;font-size:4.7px}.max-scene-explorer li svg{width:9px;color:#6eb6d5}.max-scene-explorer li.active{background:#356b87}.max-scene-explorer li.root{font-weight:700}.max-scene-explorer section{padding:6px 8px;border-top:1px solid #405057}.max-scene-explorer section>b{font-size:5px}.max-scene-explorer section p{display:grid;grid-template-columns:10px 1fr 15px;margin:4px 0;font-size:4px}.max-scene-explorer section p i{width:5px;height:5px;border-radius:50%;background:#5cbd7d}.max-viewport{grid-column:2;grid-row:2}.max-viewport header nav{display:flex}.max-viewport header button{padding:4px 6px;border:0;background:#29383f;color:#d4dee1;font-size:4px}.max-viewport header span{display:flex;align-items:center;gap:3px;color:#55c8d1;font-size:4.5px}.max-viewport header svg{width:9px}.max-arch-scene{position:relative;height:255px;overflow:hidden;background:linear-gradient(#758d9c 0 52%,#485052 53%)}.max-sky{position:absolute;inset:0 0 48%;background:linear-gradient(145deg,#8fb1c4,#314653)}.max-ground{position:absolute;inset:52% 0 0;background:repeating-linear-gradient(170deg,#515b5c 0 12px,#414a4b 13px 14px)}.max-building{position:absolute;left:20%;top:19%;width:58%;height:54%;filter:drop-shadow(8px 10px 8px rgba(0,0,0,.4))}.max-roof{position:absolute;inset:0 0 75%;background:#ddd5c6;clip-path:polygon(5% 0,100% 0,92% 100%,0 100%)}.max-wall{position:absolute;top:24%;bottom:0;background:#b9b09e}.max-wall.wall-a{left:0;width:16%;clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}.max-wall.wall-b{right:0;width:20%;clip-path:polygon(0 0,80% 0,100% 100%,0 100%)}.max-glass{position:absolute;top:27%;bottom:5%;border:3px solid #5ab3ca;background:linear-gradient(120deg,rgba(37,65,73,.9),rgba(86,139,151,.45))}.max-glass.glass-a{left:16%;width:31%}.max-glass.glass-b{left:49%;width:31%}.max-door{position:absolute;left:45%;top:27%;width:13%;height:68%;border:2px solid #1ce5f3;background:rgba(35,53,59,.8)}.max-deck{position:absolute;left:12%;right:10%;bottom:16%;display:flex;height:11%}.max-deck i{flex:1;border:1px solid #826443;background:#987754;transform:skewX(-30deg)}.max-tree{position:absolute;left:7%;bottom:19%;width:90px}.max-tree i{display:inline-block;width:7px;height:21px;margin:2px;background:#496c43;clip-path:polygon(50% 0,100% 100%,0 100%)}.max-gizmo{position:absolute;left:54%;top:43%;width:65px;height:65px}.max-gizmo i{position:absolute;left:50%;top:50%;width:44px;height:2px;transform-origin:left;background:#e34b42}.max-gizmo i:nth-child(2){transform:rotate(90deg);background:#57c55f}.max-gizmo i:nth-child(3){transform:rotate(-45deg);background:#4099e5}.max-arch-scene>strong{position:absolute;right:8px;bottom:8px;padding:4px;background:#19272dbd;font-size:4.5px}.max-viewport footer{display:flex;justify-content:space-between;padding:6px 8px;font-size:4px}.max-modifier-stack{grid-column:3;grid-row:2}.max-modifier-stack>select{width:calc(100% - 14px);margin:5px 7px;padding:4px;border:1px solid #46575e;background:#1d272c;color:#d6e0e3;font-size:4.5px}.max-modifier-stack ul{margin:0;padding:3px 7px;list-style:none}.max-modifier-stack li{display:grid;grid-template-columns:13px 1fr 65px;align-items:center;padding:6px;border-bottom:1px solid #3f4e55;font-size:4.5px}.max-modifier-stack li svg{width:9px}.max-modifier-stack li.active{background:#725d2d}.max-modifier-stack li small{text-align:right}.max-modifier-stack section{padding:6px 8px;border-top:1px solid #45545b}.max-modifier-stack section>b{font-size:5px}.max-modifier-stack label{display:grid;grid-template-columns:58px 1fr 48px;align-items:center;gap:4px;margin:7px 0;font-size:4px}.max-modifier-stack label i{height:4px;background:#405159}.max-modifier-stack label i em{display:block;height:100%;background:#d99c36}.max-script-workspace{grid-column:2;grid-row:3}.max-script-workspace header nav{display:flex;height:100%}.max-script-workspace header button{padding:0 10px;border:0;border-right:1px solid #405057;background:#29373e;color:#ced9dc;font-size:4.5px}.max-script-workspace header button.active{border-top:2px solid #4599c3;background:#1c252a}.max-script-workspace header span{font-size:4px}.max-script-workspace>div{display:grid;grid-template-columns:1fr 1fr .55fr;height:180px}.max-script-workspace pre{margin:0;padding:6px;overflow:hidden;border-right:1px solid #405057;background:#192329;color:#d887dc;font:4.5px/1.25 Consolas,monospace}.max-script-workspace code i{display:inline-block;width:18px;color:#5f737c;font-style:normal}.max-script-workspace code strong{color:#57d093}.max-material-browser{grid-column:3;grid-row:3}.max-material-browser>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:7px}.max-material-browser article{display:grid;place-items:center;gap:3px}.max-material-browser article i{width:32px;height:32px;border:1px solid #64727a;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#777)}.max-material-browser article i.wood{background:repeating-linear-gradient(15deg,#70472d 0 3px,#bc8d5f 4px 6px)}.max-material-browser article i.glass{background:radial-gradient(circle at 30% 25%,#d5f4ff,#327c9a)}.max-material-browser article i.metal{background:linear-gradient(145deg,#eef2f3,#3d474c)}.max-material-browser article i.white{background:#eee}.max-material-browser article i.fabric{background:#7c7c79}.max-material-browser article i.blue{background:#338fbe}.max-material-browser article i.light{background:#ffdb9a;box-shadow:0 0 8px #f6b54d}.max-material-browser article small{font-size:3.5px}.max-material-browser section{padding:5px 8px;border-top:1px solid #425159}.max-material-browser section>b{display:block;font-size:5px}.max-material-browser section span{display:inline-block;margin:5px 3px;padding:5px;background:#36464d;font-size:4px}.max-rollout-builder{grid-column:1/3;grid-row:4}.max-rollout-builder header nav{font-size:4px}.max-rollout-builder>div{display:grid;grid-template-columns:1fr 1fr 1fr;height:148px}.max-rollout-builder aside,.max-rollout-builder form,.max-rollout-builder section{display:grid;align-content:start;gap:3px;padding:6px;border-right:1px solid #425158}.max-rollout-builder aside b,.max-rollout-builder section b{font-size:5px}.max-rollout-builder aside span{padding:3px;background:#2b3a40;font-size:3.8px}.max-rollout-builder form label{display:grid;grid-template-columns:50px 1fr;font-size:4px}.max-rollout-builder form strong{padding:3px;background:#2c3c43}.max-rollout-builder section button{padding:4px;border:0;background:#3b5058;color:#dce5e8;font-size:4px}.max-rollout-builder section label,.max-rollout-builder section small{font-size:4px}.max-rollout-builder section i{height:5px;background:#405159}.max-rollout-builder section i em{display:block;width:72%;height:100%;background:#4ca5c8}.max-batch-queue{display:none}.max-recovery{grid-column:3;grid-row:4}.max-recovery ol{margin:0;padding:5px 8px;list-style:none}.max-recovery li{display:flex;justify-content:space-between;padding:5px;border-bottom:1px solid #405057;font-size:4px}.max-recovery li strong{color:#59ce93}.max-recovery footer{display:flex;gap:5px;padding:6px}.max-recovery button{flex:1;padding:5px;border:1px solid #4a5a61;background:#2e3e44;color:#d9e2e5;font-size:4px}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="6"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d7e0e2!important;border-radius:10px;background:#fff}@media(max-width:950px){.max-production-studio{grid-template-columns:190px 1fr}.max-learning-flow{grid-template-columns:1fr}.max-modifier-stack,.max-material-browser,.max-recovery{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.max-production-studio{grid-template-columns:1fr;grid-template-rows:auto}.max-learning-flow ol{grid-template-columns:1fr}.max-scene-explorer,.max-viewport,.max-modifier-stack,.max-script-workspace,.max-material-browser,.max-rollout-builder,.max-recovery{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="6"] .topic-unit-list{grid-template-columns:1fr}}
.max-production-studio{grid-template-columns:215px minmax(0,1fr) 295px;grid-template-rows:82px 325px 220px 180px}.max-arch-scene{height:265px}.max-building{filter:drop-shadow(10px 12px 9px rgba(0,0,0,.5))}.max-viewport,.max-script-workspace{border-top-color:#3b9bc5}.max-script-workspace>div{height:190px}.max-scene-explorer li{font-size:5px}
.webasset-page-body{display:grid;gap:14px}.webasset-delivery-lab{display:grid;grid-template-columns:210px minmax(0,1fr) 270px;grid-template-rows:86px 430px 210px 170px;gap:7px;padding:7px;border:1px solid #c9dce0;border-radius:14px;background:#f4fbfb;color:#16313a}.webasset-delivery-lab>header,.webasset-delivery-lab>section,.webasset-delivery-lab>aside{overflow:hidden;border:1px solid #cbdde1;border-radius:7px;background:#fff}.webasset-delivery-lab header{display:flex;align-items:center;justify-content:space-between;min-height:31px;padding:0 8px}.webasset-delivery-lab header b{font-size:7px}.asset-learning-flow{grid-column:1/-1;display:grid!important;grid-template-columns:300px 1fr 86px;align-items:center;padding:7px 12px!important}.asset-learning-flow>div{display:grid}.asset-learning-flow>div b{font-size:19px}.asset-learning-flow>div em{color:#15a3ad;font-style:normal}.asset-learning-flow>div small{font-size:5px}.asset-learning-flow ol{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0;list-style:none}.asset-learning-flow li{display:grid;grid-template-columns:23px 16px 1fr;gap:2px;padding:6px;border-right:1px solid #d8e6e8}.asset-learning-flow li>em{grid-row:1/3;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e7f2f4;color:#367b8d;font-size:5px;font-style:normal}.asset-learning-flow li svg{grid-row:1/3;width:13px;color:#24aab2}.asset-learning-flow li b{font-size:5px}.asset-learning-flow li small{font-size:4px}.asset-learning-flow li.active{background:#edfafa}.asset-learning-flow>strong{padding:7px;border-radius:4px;background:#e6f8f8;color:#148f98;font-size:5px;text-align:center}.asset-import-manifest{grid-column:1;grid-row:2}.asset-import-manifest>dl{margin:0;padding:7px 9px}.asset-import-manifest>dl div{display:flex;justify-content:space-between;margin:5px 0;font-size:4.5px}.asset-import-manifest dd{margin:0;font-weight:700}.asset-import-manifest>section{border-top:1px solid #d9e5e7}.asset-import-manifest ul{margin:0;padding:4px 8px;list-style:none}.asset-import-manifest li{display:grid;grid-template-columns:14px 1fr 12px;align-items:center;height:18px;font-size:4px}.asset-import-manifest li svg{width:9px;color:#548ee4}.asset-import-manifest li.root{font-weight:700}.asset-web-inspector{grid-column:2;grid-row:2;background:#0b1a2d!important;color:#eaf4f8}.asset-web-inspector header{background:#fff;color:#17333d}.asset-web-inspector header nav{display:flex;gap:4px}.asset-web-inspector header button{padding:5px 10px;border:1px solid #d9e5e7;background:#fff;font-size:4px}.asset-web-inspector header button.active{background:#149fa7;color:#fff}.asset-web-inspector header span{font-size:4px}.asset-view-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:360px}.asset-view-grid article{position:relative;overflow:hidden;border-right:1px solid #567087;border-bottom:1px solid #567087;background:radial-gradient(circle at 50% 45%,#183755,#071426 70%)}.asset-view-grid article>b{position:absolute;z-index:4;left:8px;top:7px;font-size:5px}.rover-model{position:absolute;left:20%;top:27%;width:62%;height:48%;transform:skewY(-4deg)}.rover-body{position:absolute;left:8%;top:22%;width:78%;height:45%;border:3px solid #d3dde0;background:linear-gradient(145deg,#d8d8d0,#546a76);clip-path:polygon(6% 0,82% 0,100% 40%,90% 100%,0 90%)}.rover-body>i{position:absolute;border:2px solid #ef9a35;background:#263845}.rover-body>i:nth-child(1){left:9%;top:19%;width:26%;height:30%}.rover-body>i:nth-child(2){left:40%;top:10%;width:20%;height:40%}.rover-body>i:nth-child(3){right:5%;top:28%;width:22%;height:32%}.rover-cabin{position:absolute;left:28%;top:0;width:38%;height:33%;border:3px solid #d5dedf;background:#34506a;clip-path:polygon(14% 0,85% 0,100% 100%,0 100%)}.rover-wheel{position:absolute;width:18%;height:31%;border:5px solid #30393e;border-radius:50%;background:radial-gradient(circle,#587482 0 30%,#172227 32%)}.wheel-1{left:0;bottom:0}.wheel-2{left:29%;bottom:-8%}.wheel-3{right:0;bottom:1%}.wheel-4{left:12%;bottom:-11%}.wheel-5{right:20%;bottom:-10%}.wheel-6{right:3%;bottom:-8%}.rover-detail{position:absolute;left:16%;right:12%;top:7%;display:flex}.rover-detail i{flex:1;height:5px;margin:1px;background:#e08a31}.asset-view-1 .rover-model{filter:grayscale(1) brightness(1.8)}.asset-view-1 .rover-body,.asset-view-1 .rover-cabin{background:transparent}.asset-view-1 .rover-body:after,.asset-view-1 .rover-cabin:after{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 7px,#9fb5c4 8px 9px);content:""}.asset-view-2 .rover-model{display:none}.uv-islands{position:absolute;inset:26px 10px 8px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.uv-islands i{border:1px solid #a9c0cf;transform:rotate(calc(var(--uv,1)*7deg));clip-path:polygon(15% 0,100% 20%,75% 100%,0 80%)}.uv-islands i:nth-child(3n){border-radius:50%}.asset-view-3 .rover-model{filter:hue-rotate(210deg) saturate(2)}.asset-web-inspector footer{display:flex;justify-content:center;gap:13px;padding:7px}.asset-web-inspector footer svg{width:10px}.asset-quality-gate{grid-column:3;grid-row:2}.asset-quality-gate header span{font-size:4px}.asset-score{display:grid;grid-template-columns:32px 1fr 70px;align-items:center;padding:8px;border-bottom:1px solid #dbe7e9;color:#159447}.asset-score svg{width:25px}.asset-score strong{font-size:22px}.asset-score small{font-size:5px}.asset-score span{font-size:5px}.asset-quality-gate section{padding:5px 9px;border-bottom:1px solid #dbe7e9}.asset-quality-gate section>b{color:#138d96;font-size:5px}.asset-quality-gate dl{margin:4px 0}.asset-quality-gate dl div{display:flex;justify-content:space-between;margin:4px 0;font-size:4px}.asset-quality-gate dd{display:flex;align-items:center;gap:4px;margin:0}.asset-quality-gate dd svg{width:8px;color:#29a75a}.asset-quality-gate footer{display:flex;gap:4px;padding:6px;color:#c27b18;font-size:4px}.asset-quality-gate footer svg{width:9px}.asset-optimization{grid-column:1/2;grid-row:3}.asset-optimization header nav{font-size:3.7px}.asset-optimization>div{display:grid;grid-template-columns:1fr 82px}.asset-optimization ul{margin:0;padding:7px 9px;list-style:none}.asset-optimization li{display:grid;grid-template-columns:50px 1fr 85px;align-items:center;gap:4px;margin:7px 0;font-size:4px}.asset-optimization li i{height:7px;background:#d9e5e8}.asset-optimization li i em{display:block;height:100%;background:#16a3aa}.asset-optimization aside{display:grid;place-items:center;align-content:center;border-left:1px solid #d9e5e7}.asset-optimization aside strong{color:#159da5;font-size:27px}.asset-optimization aside small{font-size:10px}.asset-optimization aside span{font-size:5px}.asset-optimization aside p{font-size:4px;text-align:center}.asset-lod{grid-column:2;grid-row:3}.asset-lod header span,.asset-textures header span,.asset-browser-matrix header span{font-size:4px}.asset-lod ol{margin:0;padding:5px 8px;list-style:none}.asset-lod li{display:grid;grid-template-columns:35px 50px 32px 1fr 11px;align-items:center;gap:5px;padding:5px;border-bottom:1px solid #dbe6e8;font-size:4px}.asset-lod li>em{color:#148d96;font-style:normal;font-weight:700}.asset-lod li svg{width:9px;color:#20a95b}.mini-rover{position:relative;height:20px;background:#697c81;clip-path:polygon(10% 20%,80% 10%,100% 55%,88% 75%,7% 80%)}.mini-rover i{display:inline-block;width:8px;height:8px;margin:14px 4px 0;border-radius:50%;background:#27353a}.asset-textures{grid-column:1;grid-row:4}.asset-textures>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px}.asset-textures article{display:grid;gap:3px;text-align:center}.asset-textures article i{height:45px;border:1px solid #b9cdd1;background:linear-gradient(135deg,#cc8d56,#493a31)}.asset-textures article i.texture-1{background:#222}.asset-textures article i.texture-2{background:radial-gradient(circle,#777,#ddd)}.asset-textures article i.texture-3{background:linear-gradient(135deg,#8379ef,#b0a6ff)}.asset-textures article i.texture-4{background:#999}.asset-textures article i.texture-5{background:radial-gradient(circle,#33e66b,#071)}.asset-textures article i.texture-6{background:repeating-radial-gradient(circle,#aaa 0 3px,#555 4px 6px)}.asset-textures article i.texture-7{background:repeating-conic-gradient(#ddd 0 10%,#888 11% 20%)}.asset-textures article small{font-size:4px}.asset-browser-matrix{grid-column:2;grid-row:4}.asset-browser-matrix table{width:100%;font-size:4px;text-align:center}.asset-browser-matrix th,.asset-browser-matrix td{padding:5px;border-bottom:1px solid #dbe6e8}.asset-browser-matrix td:not(:first-child){color:#199d58}.asset-export-package{grid-column:3;grid-row:3/5}.asset-export-package>strong,.asset-export-package>span{display:block;padding:4px 9px;font-size:5px}.asset-export-package ul{margin:3px 0;padding:5px 9px;list-style:none}.asset-export-package li{display:grid;grid-template-columns:13px 1fr 45px;gap:4px;padding:7px 0;border-bottom:1px solid #dbe6e8;font-size:4px}.asset-export-package li svg{width:9px;color:#668fea}.asset-export-package li small{text-align:right}.asset-export-package button{display:flex;align-items:center;justify-content:center;gap:5px;width:calc(100% - 18px);margin:8px 9px;padding:9px;border:0;border-radius:5px;background:#149da5;color:#fff;font-size:5px}.asset-export-package button svg{width:10px}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="7"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d4e1e4!important;border-radius:10px;background:#fff}@media(max-width:950px){.webasset-delivery-lab{grid-template-columns:200px 1fr}.asset-learning-flow{grid-template-columns:1fr}.asset-quality-gate,.asset-export-package{grid-column:1/-1;grid-row:auto}}@media(max-width:680px){.webasset-delivery-lab{grid-template-columns:1fr;grid-template-rows:auto}.asset-learning-flow ol{grid-template-columns:1fr}.asset-import-manifest,.asset-web-inspector,.asset-quality-gate,.asset-optimization,.asset-lod,.asset-textures,.asset-browser-matrix,.asset-export-package{grid-column:1;grid-row:auto}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="7"] .topic-unit-list{grid-template-columns:1fr}}
.webasset-delivery-lab{grid-template-columns:220px minmax(0,1fr) 290px;grid-template-rows:86px 440px 210px 170px}.asset-view-grid{height:370px}.asset-quality-gate dl div{font-size:4.5px}.asset-import-manifest li{font-size:4.3px}.rover-model{filter:drop-shadow(0 8px 9px rgba(0,0,0,.48))}
.automation-page-body{display:grid;gap:14px}.production-orchestrator{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;grid-template-rows:225px 325px 185px;gap:7px;padding:7px;border:1px solid #c9dce0;border-radius:14px;background:#eef8f9;color:#18323c}.production-orchestrator>header,.production-orchestrator>section,.production-orchestrator>aside{overflow:hidden;border:1px solid #cbdde1;border-radius:7px;background:#fff}.production-orchestrator header{display:flex;align-items:center;justify-content:space-between;min-height:31px;padding:0 8px}.production-orchestrator header b{font-size:7px}.automation-toolbox{grid-column:1;grid-row:1/4}.automation-toolbox>header button{padding:4px 7px;border:0;border-radius:4px;background:#e5f8f4;color:#118d76;font-size:4px}.automation-toolbox>label{display:flex;gap:4px;margin:5px 7px;padding:6px;border:1px solid #d8e5e7;border-radius:4px;color:#71858d;font-size:4px}.automation-toolbox>label svg{width:9px}.automation-toolbox>ul{margin:0;padding:3px 7px;list-style:none}.automation-toolbox>ul li{display:grid;grid-template-columns:24px 1fr 18px;align-items:center;gap:4px;padding:6px 4px;border-radius:4px}.automation-toolbox>ul li.active{background:#eaf5ff}.automation-toolbox>ul li>svg{width:17px;color:#3d8fd0}.automation-toolbox>ul li span{display:grid}.automation-toolbox>ul li b{font-size:5px}.automation-toolbox>ul li small{font-size:3.5px}.automation-toolbox>ul li em{display:grid;place-items:center;width:16px;height:16px;border-radius:8px;background:#edf1f2;font-size:4px;font-style:normal}.automation-toolbox>section{margin-top:4px;border-top:1px solid #dbe6e8}.automation-toolbox>section p{display:grid;grid-template-columns:12px 1fr 24px;gap:4px;margin:0;padding:7px 9px;font-size:4px}.automation-toolbox>section p svg{width:9px}.orchestration-flow{grid-column:2;grid-row:1;display:grid!important;grid-template-rows:40px 1fr 28px;padding:8px!important;background:linear-gradient(135deg,#fff,#effafa)!important}.orchestration-flow>div{display:flex;align-items:center;gap:8px}.orchestration-flow>div b{font-size:15px}.orchestration-flow>div span{padding:4px 7px;border-radius:9px;background:#e5f7f3;color:#169276;font-size:4px}.orchestration-flow ol{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;margin:0;padding:0;list-style:none}.orchestration-flow li{position:relative;display:grid;place-items:center;min-height:115px;margin:0 4px;border:1px solid #7ccfc2;border-radius:6px;background:#fff;text-align:center}.orchestration-flow li:not(:last-child):after{position:absolute;left:100%;top:50%;width:9px;height:2px;background:#1ca39a;content:""}.orchestration-flow li svg{width:18px;color:#1ba98e}.orchestration-flow li.warning{border-color:#e6a339}.orchestration-flow li.warning svg{color:#dc8c23}.orchestration-flow li.active{border-color:#378cd3}.orchestration-flow li.active svg{color:#378cd3}.orchestration-flow li b{font-size:5px}.orchestration-flow li small{font-size:3.5px}.orchestration-flow li strong{font-size:4px}.orchestration-flow footer{display:flex;align-items:center;gap:8px;border-top:1px dashed #c8d9dc;font-size:4px}.orchestration-flow footer button{padding:4px;border:1px solid #cddfe2;background:#fff;font-size:4px}.automation-run-control{grid-column:3;grid-row:1/3;padding-bottom:6px}.automation-run-control>button{display:flex;align-items:center;justify-content:center;gap:4px;width:calc(100% - 14px);margin:6px 7px;padding:7px;border:0;border-radius:4px;color:#fff;font-size:5px}.automation-run-control button svg{width:10px}.automation-run-control .run{background:#1ba77f}.automation-run-control .pause{background:#efa225}.automation-run-control .cancel{background:#e9534d}.automation-run-control>label{display:grid;grid-template-columns:1fr 50px;margin:9px 8px;font-size:4.5px}.automation-run-control>label strong{text-align:right}.automation-run-control>label i{grid-column:1/3;height:4px;margin-top:5px;background:#dce6e8}.automation-run-control>label i em{display:block;width:55%;height:100%;background:#428dd2}.automation-run-control>section{padding:5px 8px;border-top:1px solid #dbe6e8}.worker-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:6px 0}.worker-stats strong{display:grid;place-items:center;padding:5px;background:#f3f8f9;font-size:12px}.worker-stats small{font-size:3.5px}.automation-run-control ul{margin:0;padding:0;list-style:none}.automation-run-control li{display:grid;grid-template-columns:7px 45px 1fr 25px;align-items:center;gap:4px;margin:6px 0;font-size:4px}.automation-run-control li>i{width:5px;height:5px;border-radius:50%;background:#16aa87}.automation-run-control li>em{height:4px;background:#dbe5e7}.automation-run-control li>em b{display:block;height:100%;background:#3d8ed2}.automation-job-queue{grid-column:2;grid-row:2;background:#071c33!important;color:#dceaf1}.automation-job-queue header{border-bottom:1px solid #29435a}.automation-job-queue header b{font-size:8px}.automation-job-queue header b em{padding:2px 5px;border-radius:8px;background:#1b5590;font-style:normal}.automation-job-queue header nav{display:flex;gap:5px}.automation-job-queue header nav span{padding:4px 7px;border:1px solid #29465f;font-size:4px}.automation-job-queue table{width:100%;border-collapse:collapse;font-size:4px}.automation-job-queue th,.automation-job-queue td{padding:7px 5px;border-right:1px solid #294158;border-bottom:1px solid #294158;white-space:nowrap}.automation-job-queue td:nth-child(2){max-width:160px;overflow:hidden;text-overflow:ellipsis}.automation-job-queue td:nth-child(5) span{color:#52d19a}.automation-job-queue tr.failed td:nth-child(5) span{color:#ff746c}.automation-job-queue tr.done td:nth-child(5) span{color:#71df76}.automation-job-queue td:nth-child(6){display:grid;grid-template-columns:60px 30px;align-items:center;gap:3px}.automation-job-queue td i{height:5px;background:#264158}.automation-job-queue td i em{display:block;height:100%;background:linear-gradient(90deg,#159ce5,#66b4ff)}.automation-logs{grid-column:2;grid-row:3}.automation-logs header nav{font-size:4px}.automation-logs ol{margin:0;padding:5px 8px;list-style:none}.automation-logs li{display:grid;grid-template-columns:65px 40px 1fr;gap:4px;margin:6px 0;font-size:4px}.automation-logs li em{color:#14a377;font-style:normal}.automation-logs li.warn em{color:#e99b2d}.automation-logs li.error em{color:#ed514e}.automation-errors,.automation-retry,.automation-checkpoints,.automation-audit,.automation-throughput{display:none}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="8"] .topic-unit-list{grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;border:0;background:transparent}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="8"] .topic-unit-list li+li{border-top:0!important}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="8"] .topic-outline .topic-unit-link{min-height:125px;border:1px solid #d5e2e4!important;border-radius:10px;background:#fff}@media(max-width:950px){.production-orchestrator{grid-template-columns:200px 1fr}.automation-run-control{grid-column:1/-1;grid-row:auto}.orchestration-flow{grid-column:2}.automation-job-queue,.automation-logs{grid-column:2}}@media(max-width:680px){.production-orchestrator{grid-template-columns:1fr;grid-template-rows:auto}.automation-toolbox,.orchestration-flow,.automation-run-control,.automation-job-queue,.automation-logs{grid-column:1;grid-row:auto}.orchestration-flow ol{grid-template-columns:1fr}.tutorial-workspace[data-route="procedural"] [data-panel="routes"][data-topic-index="8"] .topic-unit-list{grid-template-columns:1fr}}
.production-orchestrator{grid-template-columns:220px minmax(0,1fr) 220px;grid-template-rows:235px 335px 185px}.orchestration-flow li{min-height:125px}.orchestration-flow li b{font-size:5.4px}.automation-job-queue table{font-size:4.3px}.automation-job-queue th,.automation-job-queue td{padding-top:8px;padding-bottom:8px}.automation-toolbox>ul li b{font-size:5.3px}
.shader-route-observatory{display:grid;grid-template-columns:minmax(0,1fr) 285px;grid-template-rows:165px 345px 230px 210px;gap:9px;margin-bottom:14px;padding:10px;border:1px solid #223a58;border-radius:16px;background:radial-gradient(circle at 60% 10%,#14275a,#040a18 48%);color:#eef6ff;box-shadow:0 15px 35px rgba(4,13,31,.22)}.shader-route-observatory>header,.shader-route-observatory>section,.shader-route-observatory>aside{overflow:hidden;border:1px solid #243a59;border-radius:10px;background:rgba(6,16,35,.86)}.shader-route-observatory header{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:0 10px}.shader-route-observatory header b{font-size:7px}.shader-route-hero{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 460px 245px;align-items:center;padding:12px 16px!important;background:linear-gradient(100deg,rgba(3,9,24,.96),rgba(11,31,66,.9))!important}.shader-route-hero>div{display:grid;gap:7px}.shader-route-hero>div>span{color:#55d5ff;font-size:6px}.shader-route-hero>div>b{font-size:22px}.shader-route-hero nav{display:flex;gap:7px}.shader-route-hero nav em{display:flex;align-items:center;gap:3px;padding:6px 8px;border:1px solid #263b5a;border-radius:6px;color:#c5d6e5;font-size:4px;font-style:normal}.shader-route-hero nav svg{width:9px;color:#ffd05c}.shader-route-hero>section{padding:0 9px;border:1px solid #294361;border-radius:8px}.shader-route-hero>section header span{color:#58db74;font-size:4px}.shader-route-hero dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0}.shader-route-hero dl div{padding:6px;border-right:1px solid #213650}.shader-route-hero dt{font-size:3.5px}.shader-route-hero dd{margin:2px 0 0;font-size:5px}.shader-route-hero>section svg{width:100%;height:25px;fill:none;stroke:#38d7f0;stroke-width:2}.shader-route-hero>button{display:flex;align-items:center;justify-content:center;gap:8px;margin-left:10px;padding:13px;border:0;border-radius:8px;background:linear-gradient(90deg,#31cdf3,#a853ef);color:#fff;font-size:7px;font-weight:700;box-shadow:0 0 18px #2ecff37a}.shader-route-hero>button svg{width:15px}.shader-render-pipeline{grid-column:1/-1;display:grid;grid-template-columns:1fr 420px;grid-template-rows:38px 1fr}.shader-render-pipeline>header{grid-column:1/-1}.shader-render-pipeline>ol{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding:10px;list-style:none}.shader-render-pipeline>ol li{position:relative;display:grid;place-items:center;align-content:center;gap:5px;border:1px solid #324f80;border-radius:9px;background:linear-gradient(180deg,#101b38,#0a1228);text-align:center}.shader-render-pipeline>ol li:not(:last-child):after{position:absolute;left:100%;top:50%;z-index:3;width:9px;height:2px;background:linear-gradient(90deg,#28bce9,#b14ff1);box-shadow:0 0 8px #60d4ff;content:""}.shader-render-pipeline>ol li>em{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;color:#54d1ff;font-size:5px;font-style:normal}.shader-render-pipeline>ol li>svg{width:36px;color:#56d4ff;filter:drop-shadow(0 0 8px currentColor)}.shader-render-pipeline>ol li b{font-size:6px}.shader-render-pipeline>ol li small{color:#aebed0;font-size:4px}.shader-render-pipeline>ol li span{font-size:4px}.shader-render-pipeline>ol li>i{position:absolute;width:3px;height:3px;border-radius:50%;background:#54d6ff;box-shadow:0 0 7px #54d6ff}.shader-render-pipeline>ol li>i:nth-of-type(1){left:15%;top:32%}.shader-render-pipeline>ol li>i:nth-of-type(2){left:72%;top:18%}.shader-render-pipeline>ol li>i:nth-of-type(3){left:45%;top:72%}.shader-render-pipeline>ol li>i:nth-of-type(n+4){display:none}.shader-stage-1{color:#9c6bff!important}.shader-stage-2{color:#ef55dc!important}.shader-stage-3{color:#f0a136!important}.shader-stage-4{color:#29d5c7!important}.shader-render-pipeline>aside{margin:10px 10px 10px 0;border:1px solid #304c78;border-radius:9px}.shader-render-pipeline>aside header span{padding:3px 5px;border-radius:4px;background:#083;color:#6eff9d;font-size:4px}.shader-city{position:relative;height:258px;overflow:hidden;background:radial-gradient(circle at 72% 32%,#5b2e82,#0d1d4a 45%,#030915 75%)}.shader-moon{position:absolute;right:12%;top:10%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eff9ff,#6295e1 50%,#263f96);box-shadow:0 0 35px #7c71ff}.shader-skyline{position:absolute;left:0;right:0;bottom:32%;display:flex;align-items:flex-end;height:42%}.shader-skyline i{flex:1;height:calc(20% + (var(--city,1))*2%);margin:1px;background:linear-gradient(#5b2f86,#141a40);clip-path:polygon(8% 8%,82% 8%,100% 100%,0 100%)}.shader-skyline i:nth-child(3n){height:65%}.shader-skyline i:nth-child(5n){height:95%}.shader-road{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(160deg,#10152c,#03060c);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.shader-car{position:absolute;left:28%;bottom:16%;width:130px;height:38px;border-radius:25px 50px 8px 8px;background:linear-gradient(#222f48,#02040b);box-shadow:-5px 8px 18px #ff256ba0}.shader-car:after{position:absolute;left:10px;right:10px;bottom:-5px;height:4px;background:#f7285f;box-shadow:0 0 15px #ff2768;content:""}.shader-car i{position:absolute;bottom:-8px;width:24px;height:24px;border-radius:50%;background:#05070d;border:3px solid #495368}.shader-car i:first-child{left:20px}.shader-car i:last-child{right:18px}.shader-city>em{position:absolute;bottom:0;width:2px;height:35%;background:linear-gradient(transparent,#cf41ff);transform:rotate(18deg)}.shader-city>em:nth-of-type(3n){left:calc(var(--rain,1)*5%)}.shader-topic-spectrum{grid-column:1;grid-row:3}.shader-topic-spectrum header span,.shader-mini-labs header span,.shader-skill-radar header span{font-size:4px;color:#8facbf}.shader-topic-spectrum>div{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:8px}.shader-topic-spectrum button{position:relative;display:grid;grid-template-rows:22px 48px auto 42px 18px;gap:3px;min-width:0;padding:7px;border:1px solid #263f64;border-radius:7px;background:#09152d;color:#e7f2fc;text-align:left}.shader-topic-spectrum button>em{display:grid;place-items:center;width:20px;height:20px;border:1px solid #37caf6;border-radius:50%;color:#52d7ff;font-size:6px;font-style:normal}.shader-topic-spectrum button>span{display:grid;place-items:center;border-radius:5px;background:radial-gradient(circle,#214c81,#0b1732)}.shader-topic-spectrum button>span svg{width:24px;color:#51d7ff}.shader-topic-spectrum button>b{font-size:5.2px}.shader-topic-spectrum button>small{overflow:hidden;color:#91a8bb;font-size:3.8px;line-height:1.45}.shader-topic-spectrum button>strong{display:flex;align-items:center;justify-content:space-between;color:#50d7ff;font-size:4px}.shader-topic-spectrum button>strong svg{width:8px}.shader-topic-spectrum .spectrum-1{border-color:#5e42c1}.shader-topic-spectrum .spectrum-2{border-color:#b945a5}.shader-topic-spectrum .spectrum-3{border-color:#b9782a}.shader-topic-spectrum .spectrum-4{border-color:#9e8a26}.shader-topic-spectrum .spectrum-5{border-color:#62a43b}.shader-topic-spectrum .spectrum-6{border-color:#219d9a}.shader-mini-labs{grid-column:1;grid-row:4}.shader-mini-labs>div{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px}.shader-mini-labs article{display:grid;grid-template-rows:92px auto auto;gap:3px}.shader-mini-labs article>span{position:relative;overflow:hidden;border:1px solid #294669;border-radius:7px;background:radial-gradient(circle at 30% 40%,#31b5c7,#24347d 35%,#8a2b91 70%,#091020)}.shader-mini-labs article>span i{position:absolute;width:8px;height:8px;border-radius:50%;background:#56def6;filter:blur(1px)}.shader-mini-labs article>span i:nth-child(3n){left:calc((var(--p,1))*7%);top:25%;background:#f14ed1}.shader-mini-labs article>span i:nth-child(4n){left:55%;top:60%;background:#ffcb51}.shader-mini-labs article b{font-size:5px}.shader-mini-labs article small{color:#92a7b9;font-size:4px}.shader-skill-radar{grid-column:2;grid-row:3/5}.shader-skill-radar svg{display:block;width:88%;height:180px;margin:auto}.shader-skill-radar svg polygon,.shader-skill-radar svg path{fill:none;stroke:#294a74;stroke-width:1}.shader-skill-radar svg .coverage{fill:#1faad633;stroke:#42d0ef;stroke-width:2}.shader-skill-radar footer{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}.shader-skill-radar footer span{padding:5px;border:1px solid #263e5f;border-radius:5px;font-size:4px;text-align:center}.tutorial-workspace[data-route="shader"] .route-facts,.tutorial-workspace[data-route="shader"] .content-block{border-color:#d7e1e5}.tutorial-workspace[data-route="shader"] .route-heading{background:linear-gradient(110deg,#fff,#eef8fa)}@media(max-width:950px){.shader-route-observatory{grid-template-columns:1fr}.shader-route-hero{grid-template-columns:1fr}.shader-render-pipeline{grid-template-columns:1fr}.shader-render-pipeline>aside,.shader-skill-radar{grid-column:1;grid-row:auto}}@media(max-width:680px){.shader-render-pipeline>ol,.shader-topic-spectrum>div,.shader-mini-labs>div{grid-template-columns:1fr}.shader-route-observatory{grid-template-rows:auto}}