@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/barlow-latin-ext-400-normal-HxX4XjxC.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/barlow-latin-400-normal-qiz4-Cze.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-latin-ext-500-normal-DOaysfXq.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-latin-500-normal-BPAOfeC8.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-latin-ext-600-normal-B8NK_A3D.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-latin-600-normal-DILqtrty.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-semi-condensed-latin-ext-500-normal-BXdp1BvY.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-semi-condensed-latin-500-normal-G0uxJNrM.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-semi-condensed-latin-ext-600-normal-BkQ9hN72.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-semi-condensed-latin-600-normal-BkLiAYu4.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/barlow-semi-condensed-latin-ext-700-normal-BhgEo64M.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/barlow-semi-condensed-latin-700-normal-BpqDG8I9.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-latin-ext-400-normal-Bc8Ftmh3.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg:#f6eddd;--bg-deep:#efe3d1;--sidebar:#e9dcca;--card:#f9f2e5;--card-soft:#faf4e9f7;--code-bg:#f8f0e3;--line:#cec0ad;--line-soft:#e2d7c7;--navy:#18213d;--navy-2:#24304a;--ink:#4f535b;--muted:#696d74;--faint:#ada293;--teal:#1aa3a1;--teal-deep:#3f7f8e;--trace:#d3bea3;--track:#e3d8ca;--kw:#2a56a3;--fn:#c0652d;--gutter:#aaa59d;--sans:"Barlow", system-ui, sans-serif;--cond:"Barlow Semi Condensed", "Barlow", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:geometricprecision}.loader{z-index:1000;background:var(--bg);place-items:center;transition:opacity .5s,visibility 0s linear .5s;display:grid;position:fixed;inset:0}.loader:before{content:"";background-image:linear-gradient(90deg,#cec0ad52 1px,#0000 1px),linear-gradient(#cec0ad52 1px,#0000 1px);background-position:50%;background-size:28px 28px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000 0,#0000 62%);mask-image:radial-gradient(circle,#000 0,#0000 62%)}.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}.loader-inner{flex-direction:column;align-items:center;padding:0 16px;display:flex;position:relative}.loader-logo{width:92px;height:50px}.loader-logo .loop{fill:none;stroke:#26324d;stroke-width:9.5px}.loader-logo .sign{fill:none;stroke:#26324d;stroke-width:4px;stroke-linecap:round}.loader-title{font-family:var(--cond);letter-spacing:.13em;text-transform:uppercase;color:var(--navy);white-space:nowrap;margin:18px 0 0;font-size:27px;font-weight:600;line-height:30px}.loader-track{background:var(--track);border-radius:4px;width:220px;height:8px;margin-top:22px;position:relative;overflow:hidden}.loader-fill{transform-origin:0;background:linear-gradient(#23b0ad,#149895);transition:transform .45s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;transform:scaleX(.04)}.loader-shine{background:linear-gradient(90deg,#fff0,#ffffff80,#fff0);width:36%;animation:1.4s cubic-bezier(.4,0,.2,1) infinite loader-shine;position:absolute;top:0;bottom:0;left:0}@keyframes loader-shine{0%{transform:translate(-100%)}to{transform:translate(300%)}}.loader-step{min-height:18px;font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap;margin:12px 0 0;font-size:13.5px;font-weight:500;line-height:18px}.loader.is-failed .loader-track{display:none}.loader.is-failed .loader-step{max-width:340px;font-family:var(--sans);letter-spacing:0;text-transform:none;white-space:normal;text-align:center;color:var(--ink);font-size:15px;line-height:22px}.noscript{text-align:center;max-width:520px;margin-top:22px}.noscript p{color:var(--ink);margin:0;font-size:16px;line-height:24px}.noscript-lessons{text-align:left;color:var(--muted);margin:18px 0 0;padding:0;font-size:14.5px;line-height:21px;list-style:none}.noscript-lessons li+li{margin-top:6px}.noscript-lessons b{font-family:var(--cond);letter-spacing:.03em;color:var(--navy);font-weight:600}@media (prefers-reduced-motion:reduce){.loader{transition-duration:10ms}.loader-shine{display:none}}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}h1,h2,h3,p,ul,ol{margin:0;padding:0}ul,ol{list-style:none}svg{display:block}.artboard{transform-origin:0 0;background:radial-gradient(120% 90% at 45% 45%, #fffaf08c, transparent 60%), var(--bg);width:1672px;height:941px;position:absolute;top:0;left:0;overflow:hidden}.traces{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.traces path,.traces line{fill:none;stroke:var(--trace);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.traces circle{fill:var(--bg);stroke:var(--trace);stroke-width:1.5px}.traces .pix{fill:#d9c5ac;stroke:none}.sidebar{background:linear-gradient(90deg, #e7d9c6 0%, var(--sidebar) 70%, #eadecd 100%);z-index:2;width:72px;position:absolute;top:0;bottom:0;left:0;box-shadow:inset -1px 0 #c4b09659}.side-toggle{background:#f0e6d7b3;border:1.5px solid #d6c7b3;border-radius:9px;place-items:center;width:47px;height:50px;display:grid;position:absolute;top:47px;left:13px}.side-toggle svg{fill:none;width:22px;height:22px;stroke:var(--navy-2);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.side-nav li{place-items:center;width:72px;display:grid;position:absolute;left:0}.side-nav li:first-child{top:150px}.side-nav li:nth-child(2){top:230px}.side-nav li:nth-child(3){top:316px}.side-nav li:nth-child(4){top:400px}.side-nav li:nth-child(5){top:488px}.side-nav a{place-items:center;width:44px;height:40px;display:grid}.side-nav svg{fill:none;stroke:#33405c;stroke-width:2.1px;stroke-linejoin:round;stroke-linecap:round;width:34px;height:34px}.side-nav svg .fill,.side-nav svg.fill{fill:#2b364f;stroke:none}.side-nav li.is-muted svg{fill:#6c707a}.brand{z-index:2;align-items:flex-start;display:flex;position:absolute;top:21px;left:95px}.brand-logo{width:91px;height:50px;margin-top:1px}.brand-logo .loop{fill:none;stroke:#26324d;stroke-width:9.5px}.brand-logo .sign{fill:none;stroke:#26324d;stroke-width:4px;stroke-linecap:round}.brand-rule{width:2px;height:64px;margin:-4px 12px 0 16px;position:relative}.brand-rule:before,.brand-rule:after{content:"";background:var(--navy-2);border-radius:50%;width:5px;height:5px;position:absolute;left:-1px}.brand-rule:before{top:0}.brand-rule:after{bottom:0}.brand-text h1{font-family:var(--cond);letter-spacing:.13em;text-transform:uppercase;color:var(--navy);font-size:36.5px;font-weight:600;line-height:38px}.brand-text p{font-family:var(--cond);letter-spacing:.17em;text-transform:uppercase;color:var(--faint);white-space:nowrap;margin-top:2px;font-size:19.5px;font-weight:500}.brand-text p i{margin:0 .45em;font-style:normal}.stage-note{border:1.5px solid var(--line);background:var(--card-soft);text-align:center;z-index:3;border-radius:11px;width:min(380px,100% - 32px);padding:20px 22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stage-note b{font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-size:17px;font-weight:700}.stage-note p{color:var(--ink);margin:8px 0 0;font-size:15px;line-height:22px}.stage.no-webgl #board-canvas,.stage.no-webgl .viewbar,.stage.no-webgl .minimap{display:none}.stage{z-index:1;position:absolute;inset:0 500px 140px 72px}#board-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.leaders{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.leaders path{fill:none;stroke:#1d2236;stroke-width:1.6px;stroke-dasharray:5 4;stroke-linecap:butt}.leaders .dot-end{fill:#fdf8ef;stroke:var(--teal);stroke-width:2.4px}.leaders .dot-anchor{fill:#e9fbfa;stroke:var(--teal);stroke-width:3.4px}.leaders .dot-halo{fill:#1aa3a12e;stroke:none;transform-box:fill-box;transform-origin:50%;animation:2.8s ease-out infinite halo}@keyframes halo{0%{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(2.1)}}.rig{width:0;height:0;position:absolute;top:calc(50% + 70px);left:calc(50% + 10px)}.callout{left:var(--x);top:var(--y);width:var(--w);border:1.5px solid var(--line);background:var(--card-soft);border-radius:9px;gap:16px;padding:17px 14px 15px 15px;display:flex;position:absolute;box-shadow:inset 0 1px #ffffffb3}.callout-icon{fill:none;width:36px;height:36px;stroke:var(--navy);stroke-width:2.3px;stroke-linejoin:round;stroke-linecap:round;flex:none;margin-top:2px}.callout-icon.tall{height:56px;margin-top:0}.callout-icon.wide{width:40px}.callout-icon .fill{fill:var(--navy);stroke:none}.callout h3{font-family:var(--cond);letter-spacing:.035em;text-transform:uppercase;color:var(--navy);font-size:18px;font-weight:700;line-height:22px}.callout p{color:#5c6066;margin-top:3px;font-size:15.7px;font-weight:400;line-height:20px}.status{border:1.5px solid var(--line);z-index:2;border-radius:11px;width:444px;height:87px;position:absolute;top:17px;right:79px}.progress-card{border:1.5px solid var(--line);background:var(--card-soft);border-radius:9px;align-items:center;gap:21px;width:253px;height:66px;padding:0 16px 0 18px;display:flex;position:absolute;top:10px;left:9px}.progress-icon{fill:none;width:39px;height:39px;stroke:var(--navy-2);stroke-width:2.2px;stroke-linejoin:round}.progress-body{flex:1}.progress-label{font-family:var(--cond);letter-spacing:.045em;text-transform:uppercase;color:var(--navy);font-size:17px;font-weight:700;display:block}.progress-row{align-items:center;gap:12px;margin-top:4px;display:flex}.progress-track{background:var(--track);border-radius:7px;flex:1;height:13px;overflow:hidden}.progress-fill{background:linear-gradient(#23b0ad,#149895);border-radius:7px;height:100%;display:block}.progress-count{font-family:var(--cond);letter-spacing:.06em;color:var(--navy);font-size:19px;font-weight:700}.clock{font-family:var(--mono);letter-spacing:.05em;color:#5d6066;flex-direction:column;gap:3px;font-size:17.5px;line-height:23px;display:flex;position:absolute;top:17px;left:287px}.info-card{border:1.5px solid var(--line);z-index:2;background:#f6edde99;border-radius:12px;width:476px;height:397px;position:absolute;top:120px;right:20px}.tabs{align-items:flex-end;gap:33px;height:47px;padding:0 0 0 22px;display:flex}.tabs button{height:40px;font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;color:#686c73;font-size:17.5px;font-weight:500;position:relative}.tabs button.is-active{color:var(--navy);font-weight:700}.tabs button.is-active:after{content:"";background:var(--navy);border-radius:3px 3px 1px 1px;height:4.5px;position:absolute;bottom:-2px;left:-7px;right:-9px}.info-body{border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:16px 0 0 18px;position:absolute;inset:57px 8px -1.5px 3px;overflow:hidden}.expand{width:26px;height:26px;position:absolute;top:18px;right:14px}.expand svg{fill:none;stroke:#8e9094;stroke-width:1.8px;width:26px;height:26px}.expand .fill{fill:#8e9094;stroke:none}.info-body h2{font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);font-size:25px;font-weight:700;line-height:30px}.lede{color:#4f535a;max-width:372px;margin-top:8px;font-size:18.3px;line-height:23px}.features{gap:8px;margin-top:16px;display:grid}.features li{color:#4f535a;align-items:center;gap:27px;min-height:48px;font-size:17.2px;line-height:21px;display:flex}.feature-icon{border:1.5px solid var(--line);background:#f6eee1cc;border-radius:9px;flex:none;place-items:center;width:51px;height:48px;display:grid}.feature-icon svg{fill:none;width:31px;height:31px;stroke:var(--navy-2);stroke-width:2.1px;stroke-linecap:round;stroke-linejoin:round}.feature-icon .fill{fill:var(--navy-2);stroke:none}.code-card{border:1.5px solid var(--line);z-index:2;background:#f6edde99;border-radius:11px;width:464px;height:254px;padding:0 10px 10px;position:absolute;top:527px;right:29px}.code-card header{justify-content:space-between;align-items:center;height:56px;padding-left:9px;display:flex}.code-card h2{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin-top:1px;font-size:18px;font-weight:700}.code-actions{z-index:1;align-items:center;gap:8px;margin-right:-2px;display:flex;position:relative}.btn-ghost,.btn-run{border-radius:8px;place-items:center;width:40px;height:38px;display:grid}.btn-ghost{border:1.5px solid var(--line);background:var(--card)}.btn-ghost svg{fill:none;width:21px;height:21px;stroke:var(--navy-2);stroke-width:2px}.btn-run{background:linear-gradient(#34436a,#283656);width:44px;height:38px;box-shadow:0 1px 2px #18213d40}.btn-run svg{fill:#fdf9f1;width:22px;height:22px}.code{border:1.5px solid var(--line);background:var(--code-bg);height:188px;font-family:var(--mono);color:var(--navy);background:linear-gradient(90deg, transparent 41px, var(--line-soft) 41px, var(--line-soft) 42.5px, transparent 42.5px) no-repeat, var(--code-bg);scrollbar-width:thin;scrollbar-color:#d8cbb8 transparent;border-radius:9px;margin:0;padding:11px 0 0;font-size:16.2px;font-weight:500;line-height:22.6px;transition:opacity .18s;position:relative;overflow:auto}.code.is-out{opacity:0}.code code{font:inherit;min-width:max-content;padding-bottom:10px;padding-right:14px;display:block}.code .line{display:block}.code .ln{text-align:right;width:27px;color:var(--gutter);margin-right:25px;display:inline-block}.code .kw{color:var(--kw)}.code .fn{color:var(--fn)}.code .id{color:var(--navy)}.code .num{color:var(--kw)}.lessons{z-index:2;position:absolute;bottom:32px;left:100px}.lessons h2{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin:0 0 12px 1px;font-size:20px;font-weight:700}.lesson-list{gap:12px;display:flex}.lesson{width:calc(var(--w) * 1px);border:1.5px solid var(--line);background:var(--card-soft);cursor:pointer;border-radius:9px;align-items:center;height:91px;padding:0 16px 0 10px;transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;display:flex;position:relative}.lesson:hover{border-color:#bfae97;transform:translateY(-2px);box-shadow:0 6px 14px -8px #503c1e59}.lesson:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.lesson.is-active{border:2px solid var(--teal-deep);box-shadow:0 0 0 1px #3f7f8e14}.lesson-thumb{width:calc(var(--tw) * 1px);object-fit:contain;opacity:0;flex:none;height:84px;margin-right:2px}.lesson-thumb.is-ready{opacity:1}.lesson-title{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:#4b505c;text-align:center;white-space:nowrap;flex:1;font-size:15.2px;font-weight:500;line-height:22px}.lesson.is-active .lesson-title{color:var(--navy);font-size:16.6px;font-weight:700}.chev{fill:none;stroke:#aaa59e;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:26px;height:26px}.lesson.is-active .chev{stroke:#2a6d86;stroke-width:2.6px}.stage{cursor:default;touch-action:none;-webkit-user-select:none;user-select:none}.stage.is-pointing{cursor:pointer}.stage[data-drag=pan],.stage[data-drag=touch]{cursor:grabbing}.stage[data-drag=rotate]{cursor:ew-resize}.minimap{border:1.5px solid var(--line);background:var(--card-soft);cursor:crosshair;touch-action:none;z-index:2;opacity:0;pointer-events:none;border-radius:11px;width:184px;height:126px;padding:3px;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:30px;left:14px;transform:translateY(8px);box-shadow:0 10px 22px -16px #3c2d148c}.minimap.is-on{opacity:1;pointer-events:auto;transform:none}.minimap canvas{background:#f4ecdd;border-radius:8px;width:176px;height:118px;display:block}.callout{cursor:pointer;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}.callout:hover,.callout:focus-visible{border-color:#b9a892;outline:none;box-shadow:0 8px 18px -12px #3c2d1473}.callout.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px)scale(.97)}.callout.is-leaving{opacity:0;pointer-events:none;transition-duration:.3s;transform:translateY(-8px)scale(.97)}.callout code,.info-content code,.steps code{font-family:var(--mono);color:var(--kw);background:#2a56a312;border-radius:4px;padding:0 .25em;font-size:.86em}.rig.is-free .callout,.rig.is-off .callout{opacity:0;pointer-events:none;transform:scale(.96)}.leader-set{transition:opacity .4s}.leader-set.is-hidden{opacity:0}.leader-set.is-hidden .hotspot{pointer-events:none}.leaders .leader path,.leaders .leader .dot-end{transition:opacity .35s,stroke .2s,stroke-width .2s}.leaders.is-free .leader path,.leaders.is-free .leader .dot-end{opacity:0}.leaders.is-off{opacity:0;pointer-events:none}.leaders .leader.is-hot path{stroke:var(--teal);stroke-width:2.2px}.leaders .hotspot{pointer-events:all;cursor:pointer}.leaders .hotspot.is-passive{pointer-events:none}.leaders .dot-hit{fill:#0000;stroke:none}.leaders .leader.is-hot .dot-anchor{fill:var(--teal)}.tags{pointer-events:none;position:absolute;inset:0;overflow:hidden}.tag{border:1.5px solid var(--line);background:var(--card-soft);font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);white-space:nowrap;opacity:0;pointer-events:none;border-radius:7px;padding:4px 9px 4px 8px;font-size:13px;font-weight:700;transition:opacity .3s;position:absolute;top:0;left:0;box-shadow:0 4px 10px -8px #3c2d1480}.tags.is-free .tag:not(.is-hidden){opacity:1;pointer-events:auto}.tags.is-off .tag{opacity:0!important;pointer-events:none!important}.tag:hover{border-color:var(--teal)}.readout{background:var(--navy);color:#f8f1e4;font-family:var(--mono);white-space:nowrap;opacity:0;border-radius:999px;padding:3px 9px;font-size:13.5px;font-weight:500;transition:opacity .25s;position:absolute;top:0;left:0;box-shadow:0 4px 10px -6px #18213d99}.readout.is-on{opacity:1}.tip{border:1.5px solid var(--line);pointer-events:none;opacity:0;z-index:3;background:#fcf7eef7;border-radius:9px;max-width:240px;padding:9px 12px 10px;transition:opacity .15s;position:absolute;top:0;left:0;box-shadow:0 10px 22px -14px #3c2d148c}.tip.is-on{opacity:1}.tip b{font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);font-size:15px;font-weight:700;display:block}.tip span{color:#5c6066;margin-top:2px;font-size:14px;line-height:18px;display:block}.viewbar{border:1.5px solid var(--line);background:var(--card-soft);z-index:2;border-radius:11px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:9px;left:calc(50% + 168px);transform:translate(-50%);box-shadow:0 6px 16px -12px #3c2d1480}.viewbar button{border-radius:7px;place-items:center;width:34px;height:32px;transition:background .15s;display:grid}.viewbar button:hover{background:#24304a12}.viewbar button:focus-visible{outline:2px solid var(--teal)}.viewbar svg{fill:none;width:19px;height:19px;stroke:var(--navy-2);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.viewbar .compass svg{width:22px;height:22px}.viewbar .compass circle{stroke-width:1.6px}.compass-needle{transform-origin:12px 12px;transform-box:view-box}.compass-needle .fill{fill:#e0523f;stroke:none}.compass-needle path:not(.fill){fill:var(--navy-2);stroke:none}.viewbar.is-away .compass{background:#1aa3a121;animation:2.4s ease-in-out infinite nudge}@keyframes nudge{0%,to{box-shadow:0 0 #1aa3a100}50%{box-shadow:0 0 0 3px #1aa3a140}}.viewbar-sep{background:var(--line);width:1px;height:20px;margin:0 3px}.view-hint{background:var(--navy);color:#f6eee0;font-family:var(--cond);letter-spacing:.04em;white-space:nowrap;pointer-events:none;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;transition:opacity .5s,transform .5s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.view-hint.is-gone{opacity:0;transform:translate(-50%)translateY(4px)}.sidebar{z-index:6;transition:width .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;overflow:hidden}.sidebar.is-open{width:214px;box-shadow:8px 0 30px -18px #3c2d1480,inset -1px 0 #c4b09659}.side-toggle svg{transition:transform .35s}.sidebar.is-open .side-toggle svg{transform:rotate(180deg)}.side-nav li{place-items:center start;width:100%;padding-left:14px}.side-nav a{border-radius:9px;align-items:center;gap:16px;width:auto;min-width:44px;padding:0;text-decoration:none;transition:background .2s;display:flex;position:relative}.side-nav a svg{flex:none;margin-left:5px}.side-label{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);white-space:nowrap;opacity:0;font-size:17px;font-weight:600;transition:opacity .25s,transform .3s;transform:translate(-6px)}.sidebar.is-open .side-label{opacity:1;transition-delay:80ms;transform:none}.sidebar.is-open .side-nav a{width:184px}.side-nav a:hover{background:#24304a0f}.side-nav li.is-on a{background:#24304a17}.side-nav li.is-on a:before{content:"";background:var(--teal);border-radius:0 3px 3px 0;width:3px;position:absolute;top:8px;bottom:8px;left:-14px}.side-nav a:focus-visible{outline:2px solid var(--teal)}.flyout{left:84px;top:var(--top,140px);border:1.5px solid var(--line);z-index:7;opacity:0;pointer-events:none;background:#fbf6ecfa;border-radius:12px;width:300px;max-height:560px;padding:14px 12px 12px;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1);position:absolute;overflow:auto;transform:translate(-10px);box-shadow:0 18px 40px -22px #3c2d148c}.flyout.beside-open{left:226px}.flyout.is-open{opacity:1;pointer-events:auto;transform:none}.flyout header{border-bottom:1.5px solid var(--line-soft);justify-content:space-between;align-items:baseline;margin-bottom:6px;padding:0 6px 10px;display:flex}.flyout h2{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);font-size:18px;font-weight:700}.flyout header span{font-family:var(--cond);letter-spacing:.04em;color:var(--muted);font-size:14px;font-weight:600}.fly-list{gap:2px;display:grid}.fly-list button,.fly-list label{text-align:left;cursor:pointer;border-radius:8px;align-items:center;gap:12px;width:100%;padding:8px 6px;transition:background .15s;display:flex}.fly-list button:hover,.fly-list label:hover{background:#24304a0f}.fly-list button.is-current{background:#1aa3a11a}.fly-num{border:1.5px solid var(--line);width:30px;height:30px;font-family:var(--cond);color:var(--navy);background:var(--card);border-radius:8px;flex:none;place-items:center;font-size:15px;font-weight:700;display:grid}.fly-num svg{fill:none;width:17px;height:17px;stroke:var(--teal);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.fly-text{flex:1;min-width:0}.fly-text b{font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);font-size:15px;font-weight:700;display:block}.fly-text small{color:#6a6e74;font-size:13.5px;line-height:17px;display:block}.switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{background:#ddd1c0;border-radius:999px;flex:none;width:38px;height:22px;transition:background .2s;position:relative}.switch-track span{background:#fffaf2;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000040}.switch input:checked+.switch-track{background:var(--teal)}.switch input:checked+.switch-track span{transform:translate(16px)}.switch input:focus-visible+.switch-track{outline:2px solid var(--navy);outline-offset:2px}.fly-reset{border:1.5px solid var(--line);font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:#a0533f;border-radius:8px;margin:10px 6px 2px;padding:7px 12px;font-size:14px;font-weight:600}.fly-reset:hover{background:#e0523f14}.info-card.is-expanded{z-index:4;background:#f6eddefa;height:661px}.code-card{transition:opacity .3s}.info-card{transition:height .45s cubic-bezier(.2,.8,.2,1),opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}.info-card.is-covered{opacity:0;pointer-events:none;transform:translateY(-6px)scale(.985)}.code-card{flex-direction:column;transition:top .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),background .3s,opacity .3s;display:flex}.code-card.is-expanded{z-index:4;background:#f6eddefa;height:661px;top:120px}.code-card header{flex:none}.code-wrap{flex:1;min-height:0}.code-wrap .code{font-variant-ligatures:none;font-feature-settings:"calt" 0, "liga" 0;height:100%}.code-card.is-covered{opacity:0;pointer-events:none}.tabs button{transition:color .2s}.tabs button:hover{color:var(--navy)}.tabs button:after{content:"";background:var(--navy);opacity:0;border-radius:3px 3px 1px 1px;height:4.5px;transition:left .3s,right .3s,opacity .2s;position:absolute;bottom:-2px;left:50%;right:50%}.tabs button.is-active:after{opacity:1;left:-7px;right:-9px}.tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.expand{z-index:1;border-radius:6px}.expand:hover svg{stroke:var(--navy)}.info-content{scrollbar-width:thin;scrollbar-color:#d8cbb8 transparent;height:100%;padding:0 24px 18px 0;transition:opacity .18s,transform .3s;overflow-y:auto}.info-content.is-out{opacity:0;transform:translateY(6px)}.info-content h2{padding-right:36px}.info-content .sub{color:var(--muted);margin-top:4px;font-size:15.5px}.pin-table{border-collapse:collapse;color:#4f535a;width:100%;margin-top:12px;font-size:14.5px;line-height:18px}.pin-table th{text-align:left;font-family:var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:0 6px 6px 0;font-size:12.5px;font-weight:700}.pin-table td{border-top:1.5px solid var(--line-soft);vertical-align:top;padding:8px 8px 8px 0}.pin-table td:first-child{white-space:nowrap}.pin-table td:nth-child(2){color:var(--navy);font-weight:500}.pin-table code{font-family:var(--mono);color:var(--navy);background:0 0;padding:0;font-size:13px;font-weight:500}.wire-dot{background:var(--c);vertical-align:-1px;border-radius:50%;width:10px;height:10px;margin-right:7px;display:inline-block;box-shadow:0 0 0 1.5px #141a2cbf}.steps{counter-reset:step;gap:10px;margin-top:12px;display:grid}.steps li{color:#4f535a;min-height:28px;padding-left:40px;font-size:16px;line-height:21px;position:relative}.steps li:before{counter-increment:step;content:counter(step);border:1.5px solid var(--line);width:27px;height:27px;font-family:var(--cond);color:var(--navy);background:#f6eee1cc;border-radius:8px;place-items:center;font-size:14px;font-weight:700;display:grid;position:absolute;top:-2px;left:0}.spec-grid{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0;display:grid}.spec-grid div{border:1.5px solid var(--line-soft);background:#f6eee18c;border-radius:9px;padding:9px 11px}.spec-grid dt{font-family:var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-size:12.5px;font-weight:600}.spec-grid dd{color:var(--navy);margin:2px 0 0;font-size:15.5px;font-weight:500}.code-wrap{border-radius:9px;position:relative;overflow:hidden}.btn-ghost,.btn-run{transition:transform .15s,background .2s,border-color .2s}.btn-ghost:hover{border-color:#bfae97}.btn-expand svg{width:19px;height:19px}.btn-expand svg .fill{fill:var(--navy-2);stroke:none}.btn-ghost.is-done svg{stroke:var(--teal);stroke-width:2.6px}.btn-run:hover{transform:translateY(-1px)}.btn-run:active,.btn-ghost:active{transform:translateY(1px)}.btn-run svg .fill{fill:#fdf9f1}.btn-run.is-busy{background:linear-gradient(#3a7f8d,#2d6c7a)}.btn-run.is-busy svg{animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.4}}.code-card[data-state=running] .btn-run{background:linear-gradient(#d0614c,#b84d3a)}.code-card{--console-h:92px}.console{height:var(--console-h);border-top:1.5px solid var(--line);font-family:var(--mono);background:#f3eadb;flex-direction:column;font-size:13px;transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(102%)}.console.is-open{transform:none}.console-grip{z-index:1;cursor:ns-resize;touch-action:none;height:11px;position:absolute;top:-6px;left:0;right:0}.console-grip:after{content:"";opacity:.7;background:#cdbfa9;border-radius:2px;width:34px;height:4px;margin-left:-17px;transition:opacity .15s,background .15s;position:absolute;top:3px;left:50%}.console-grip:hover:after,.console-grip:focus-visible:after{opacity:1;background:#b5a68e}.code-card.is-sizing .console-grip:after{opacity:1;background:var(--teal)}.console-grip:focus-visible{outline:none}.console-head{cursor:ns-resize;touch-action:none}.code-card.is-sizing,.code-card.is-sizing *{-webkit-user-select:none;user-select:none;cursor:ns-resize!important}.code-card.is-sizing .console{transition:none}html.compact .console-grip{display:none}html.compact .console-head{cursor:auto;touch-action:auto}.console-head{border-bottom:1px solid var(--line-soft);align-items:center;gap:8px;height:26px;padding:0 6px 0 12px;display:flex}.console-dot{background:#b5aa99;border-radius:50%;width:8px;height:8px}.code-card[data-state=running] .console-dot{background:var(--teal);box-shadow:0 0 0 3px #1aa3a133}.code-card[data-state=uploading] .console-dot{background:#f0a53a;animation:.6s ease-in-out infinite pulse}.console-title{font-family:var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--navy);font-size:12.5px;font-weight:700}.console-status{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex:1;font-size:12.5px;font-weight:600}.console-close{border-radius:5px;place-items:center;width:22px;height:22px;display:grid}.console-close:hover{background:#24304a14}.console-close svg{fill:none;width:14px;height:14px;stroke:var(--navy-2);stroke-width:2.2px;stroke-linecap:round}.console-lines{color:#3d4250;scrollbar-width:none;flex:1;min-height:0;padding:5px 12px;line-height:18px;overflow:auto}.console-lines div:last-child{color:var(--navy);font-weight:500}.lesson-done{background:var(--teal);width:22px;height:22px;box-shadow:0 0 0 2.5px var(--bg);opacity:0;border-radius:50%;place-items:center;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);display:grid;position:absolute;top:-8px;right:-8px;transform:scale(.4)}.lesson-done svg{fill:none;stroke:#fff;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.lesson.is-done .lesson-done{opacity:1;transform:none}.lesson.just-done{animation:.7s celebrate}@keyframes celebrate{30%{transform:translateY(-5px)scale(1.02)}}.lesson .lesson-thumb{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .4s}.lesson:hover .lesson-thumb{transform:scale(1.06)rotate(-2deg)}.lesson-title,.chev{transition:color .25s,stroke .25s}.progress-fill{transition:width .8s cubic-bezier(.2,.8,.2,1)}.reduce-motion *,.reduce-motion :before,.reduce-motion :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.stage[data-hand=slide],.stage[data-hand=knob]{cursor:grab}.stage[data-hand=press]{cursor:pointer}.stage[data-drag=part]{cursor:grabbing}.insp-lines{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.insp-leader{opacity:0;transition:opacity .2s}.insp-leader.is-on{opacity:1}.insp-leader.is-away{opacity:0}.insp-leader path{fill:none;stroke:var(--teal);stroke-width:1.8px;stroke-dasharray:5 4}.insp-leader .dot-end{fill:#e9fbfa;stroke:var(--teal);stroke-width:2.6px}.inspector{border:1.5px solid var(--line);z-index:4;opacity:0;visibility:hidden;pointer-events:none;cursor:default;background:#fbf6edfa;border-radius:11px;width:292px;padding:14px 14px 12px 16px;transition:opacity .18s,visibility 0s linear .18s;position:absolute;top:0;left:0;box-shadow:0 18px 34px -22px #3c2d14a6,inset 0 1px #ffffffb3}.inspector.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s;animation:.34s cubic-bezier(.2,.8,.2,1) insp-in}@keyframes insp-in{0%{opacity:0;translate:0 6px;scale:.95}}.insp-head{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.insp-head h3{font-family:var(--cond);letter-spacing:.035em;text-transform:uppercase;color:var(--navy);font-size:18px;font-weight:700;line-height:22px}.insp-close{border-radius:7px;flex:none;place-items:center;width:28px;height:28px;margin:-4px -4px 0 0;transition:background .15s;display:grid}.insp-close:hover{background:#24304a12}.insp-close svg{fill:none;width:16px;height:16px;stroke:var(--navy-2);stroke-width:2.2px;stroke-linecap:round}.insp-desc{color:#5c6066;margin-top:6px;font-size:14.5px;line-height:19px}.insp-rows{gap:12px;margin-top:10px;display:grid}.insp-row{border-top:1px dashed var(--line);border-radius:2px;padding-top:10px}.insp-row.is-pulse{animation:1s row-pulse}@keyframes row-pulse{0%{background:#1aa3a12e;box-shadow:0 0 0 6px #1aa3a12e}to{background:0 0;box-shadow:0 0 0 6px #0000}}.insp-row label,.insp-label{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:#4b505c;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;font-weight:600;display:flex}.insp-row output{font-family:var(--mono);letter-spacing:0;text-transform:none;color:var(--navy);font-size:13.5px;font-weight:500}.insp-note{color:#6a6e74;margin-top:6px;font-size:13.5px;line-height:17px}.inspector input[type=range]{appearance:none;cursor:pointer;--fill:50%;background:0 0;width:100%;height:22px;margin:4px 0 0;display:block}.inspector input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent,var(--teal)) var(--fill), var(--track) var(--fill));border-radius:3px;height:6px}.inspector input[type=range]::-moz-range-track{background:var(--track);border-radius:3px;height:6px}.inspector input[type=range]::-moz-range-progress{background:var(--accent,var(--teal));border-radius:3px;height:6px}.inspector input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2.5px solid var(--accent,var(--teal));background:#fdf8ef;border-radius:50%;width:18px;height:18px;margin-top:-6px;transition:transform .15s;box-shadow:0 1px 3px #18213d40}.inspector input[type=range]::-moz-range-thumb{border:2.5px solid var(--accent,var(--teal));background:#fdf8ef;border-radius:50%;width:13px;height:13px;box-shadow:0 1px 3px #18213d40}.inspector input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}.inspector input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}.seg{flex-wrap:wrap;gap:6px;margin-top:7px;display:flex}.seg button{border:1.5px solid var(--line);background:var(--card);font-family:var(--cond);letter-spacing:.03em;color:#4b505c;border-radius:8px;padding:5px 11px 4px;font-size:14.5px;font-weight:600;transition:background .15s,border-color .15s,color .15s}.seg button:hover{border-color:#bfae97}.seg button.is-on{border-color:var(--navy);background:var(--navy);color:#fbf5ea}.seg button:focus-visible,.swatch:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.swatches{gap:9px;margin-top:8px;display:flex}.swatch{background:radial-gradient(circle at 35% 30%, #ffffff8c, transparent 55%), var(--c);border-radius:50%;width:26px;height:26px;transition:transform .15s,box-shadow .15s;box-shadow:inset 0 0 0 1.5px #18213d59}.swatch:hover{transform:scale(1.1)}.swatch.is-on{box-shadow:0 0 0 1.5px #18213d59 inset, 0 0 0 2.5px #fbf6ed, 0 0 0 4.5px var(--teal)}.is-swatch .insp-note{display:none}.insp-row .insp-switch{cursor:pointer;text-transform:none;letter-spacing:.01em;justify-content:flex-start;align-items:center;gap:10px;font-size:15px}.insp-switch input{opacity:0;pointer-events:none;position:absolute}.insp-switch .track{background:#ddd1c0;border-radius:999px;flex:none;width:34px;height:20px;transition:background .2s;position:relative}.insp-switch .knob{background:#fffaf2;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000040}.insp-switch input:checked+.track{background:var(--teal)}.insp-switch input:checked+.track .knob{transform:translate(14px)}.insp-switch input:focus-visible+.track{outline:2px solid var(--navy);outline-offset:2px}.insp-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:12px;display:flex}.insp-focus{border:1.5px solid var(--line);background:var(--card);font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:var(--navy-2);border-radius:8px;align-items:center;gap:6px;padding:4px 9px 4px 7px;font-size:13.5px;font-weight:600;transition:border-color .15s;display:inline-flex}.insp-focus:hover{border-color:#bfae97}.insp-focus svg{fill:none;width:16px;height:16px;stroke:var(--navy-2);stroke-width:2px}.insp-focus .fill{fill:var(--navy-2)}.insp-hint{font-family:var(--cond);color:#157f7d;text-align:right;font-size:13.5px;font-weight:500;line-height:16px}.insp-run{font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:#157f7d;background:#e9f6f4;border:1.5px solid #9fd3cf;border-radius:8px;align-items:center;gap:5px;padding:4px 10px 4px 7px;font-size:13.5px;font-weight:600;transition:border-color .15s;display:inline-flex}.insp-run:hover{border-color:#157f7d}.insp-run svg{width:14px;height:14px}.insp-run .fill{fill:#157f7d}.inspector.is-running .insp-run{display:none}.code .param{font:inherit;letter-spacing:inherit;line-height:inherit;color:#127a78;background:#1aa3a11a;border-radius:4px;margin:0 1px;padding:0 3px;transition:background .15s;box-shadow:inset 0 -1.5px #1aa3a199}.code .param:hover,.code .param.is-marked{background:#1aa3a138}.code .param.is-marked{box-shadow:inset 0 0 0 1.5px #1aa3a1bf}.code .param:focus-visible{outline:2px solid var(--teal);outline-offset:1px}.code .param.is-flash{animation:.9s param-flash}@keyframes param-flash{0%{color:#fbf6ed;background:#1aa3a18c}}.code .line.is-new{animation:1.4s line-flash}@keyframes line-flash{0%{background:#f0a53a47}to{background:#f0a53a00}}.code .str{color:#3f8a4f}.code .cm{color:var(--faint);font-style:italic}.lessons{right:max(30px,100% - 1540px)}.lesson-list{scrollbar-width:none;--fade-l:0px;--fade-r:0px;-webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);-webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);mask-image:linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);margin:-10px -10px -12px -2px;padding:10px 10px 12px 2px;scroll-padding:0 30px;overflow:auto hidden}.lesson-list::-webkit-scrollbar{display:none}.lessons.can-left .lesson-list{--fade-l:60px}.lessons.can-right .lesson-list{--fade-r:60px}.lesson{flex:none}.lesson-step{z-index:1;border:1.5px solid var(--line);background:var(--card);opacity:0;pointer-events:none;border-radius:50%;place-items:center;width:34px;height:34px;margin-top:4px;transition:opacity .2s,border-color .15s;display:grid;position:absolute;top:50%;box-shadow:0 6px 14px -8px #503c1e73}.lesson-step svg{fill:none;width:20px;height:20px;stroke:var(--navy-2);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.lesson-step:hover{border-color:#bfae97}.lesson-step.prev{left:-14px}.lesson-step.next{right:0}.lessons.can-left .lesson-step.prev,.lessons.can-right .lesson-step.next{opacity:1;pointer-events:auto}.credit{color:var(--navy);background:#f0e6d7b3;border:1.5px solid #d6c7b3;border-radius:9px;align-items:center;gap:12px;padding:9px 16px 9px 13px;text-decoration:none;transition:border-color .2s,background .2s;display:inline-flex}a.credit:hover{background:#f4ecdfeb;border-color:#bfae97}a.credit:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.credit-x{fill:#2b364f;flex:none;width:19px;height:19px}.credit-rule{background:#d6c7b3;flex:none;align-self:stretch;width:1.5px}.credit-text{white-space:nowrap;flex-direction:column;gap:2px;display:flex}.credit-text small{font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-size:11.5px;font-weight:600;line-height:13px}.credit-text b{font-family:var(--cond);letter-spacing:.03em;color:var(--navy);font-size:15.5px;font-weight:700;line-height:18px}.credit-side{flex-direction:column;gap:12px;width:47px;padding:15px 0 14px;position:absolute;bottom:22px;left:13px}.credit-side .credit-text{writing-mode:vertical-rl;flex-direction:column;align-items:flex-start;gap:3px;transform:rotate(180deg)}.credit-side .credit-rule{align-self:center;width:20px;height:1.5px}.app-foot{display:none}html.compact,html.compact body{height:auto;min-height:100%;overflow:hidden auto}html.compact .artboard{width:auto;height:auto;min-height:100dvh;padding:14px 12px calc(78px + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand status""stage stage""lessons lessons""info info""code code""foot foot";align-items:center;gap:14px;display:grid;position:relative;overflow:visible;transform:none}html.compact .traces{display:none}html.compact .brand{grid-area:brand;align-items:center;min-width:0;position:static}html.compact .brand-logo{flex:none;width:58px;height:32px}html.compact .brand-rule{flex:none;height:40px;margin:0 10px 0 12px}html.compact .brand-text{min-width:0}html.compact .brand-text h1{letter-spacing:.11em;white-space:nowrap;font-size:22px;line-height:25px}html.compact .brand-text p{letter-spacing:.15em;font-size:12.5px}html.compact .status{border:0;grid-area:status;align-items:center;gap:14px;width:auto;height:auto;display:flex;position:static}html.compact .progress-card{gap:12px;width:200px;height:52px;padding:0 12px;position:static}html.compact .progress-icon{width:28px;height:28px}html.compact .progress-label{font-size:14px}html.compact .progress-row{gap:9px;margin-top:2px}html.compact .progress-track{height:10px}html.compact .progress-count{font-size:15px}html.compact .clock{gap:1px;font-size:13px;line-height:17px;position:static}html.compact .stage{border:1.5px solid var(--line);background:radial-gradient(90% 80% at 50% 45%,#fffaf0b3,#0000 70%),#f4ecde99;border-radius:14px;grid-area:stage;height:clamp(300px,58vh,660px);position:relative;inset:auto;overflow:hidden}html.compact .rig,html.compact .minimap,html.compact .view-hint{display:none}html.compact .viewbar{bottom:8px;left:50%}html.compact .inspector{overscroll-behavior:contain;width:min(420px,100% - 20px);max-height:56%;padding:12px 14px 10px;overflow-y:auto}html.compact .inspector.is-on{animation-name:insp-up}@keyframes insp-up{0%{opacity:0;translate:0 14px}}html.compact .insp-desc{font-size:14px;line-height:18px}html.compact .insp-rows{gap:9px;margin-top:8px}html.compact .insp-row{padding-top:8px}html.compact .lessons{grid-area:lessons;min-width:0;position:relative;inset:auto}html.compact .lessons h2{margin-bottom:8px;font-size:16px}html.compact .lesson{width:calc(var(--w) * .8px);height:74px;padding:0 12px 0 8px}html.compact .lesson-thumb{width:calc(var(--tw) * .8px);height:64px}html.compact .lesson-title{font-size:13.5px;line-height:18px}html.compact .lesson.is-active .lesson-title{font-size:14.5px}html.compact .chev{width:20px;height:20px}html.compact .lesson-step{width:30px;height:30px;top:calc(50% + 2px)}html.compact .info-card,html.compact .code-card{width:auto;min-width:0;height:auto;position:relative;inset:auto}html.compact .info-card{grid-area:info}html.compact .info-card.is-expanded,html.compact .code-card.is-expanded{height:auto;top:auto}html.compact .expand,html.compact .btn-expand{display:none}html.compact .tabs{scrollbar-width:none;gap:22px;padding:0 14px;overflow-x:auto}html.compact .tabs::-webkit-scrollbar{display:none}html.compact .tabs button{flex:none;font-size:15.5px}html.compact .info-body{margin:10px 3px 3px;padding:14px 16px 4px;position:relative;inset:auto}html.compact .info-content{height:auto;padding-right:0;overflow:visible}html.compact .info-body h2{font-size:21px;line-height:26px}html.compact .lede{max-width:none;font-size:16px;line-height:22px}html.compact .features li{gap:16px;font-size:15px;line-height:20px}html.compact .feature-icon{width:44px;height:42px}html.compact .feature-icon svg{width:26px;height:26px}html.compact .pin-table{font-size:13.5px}html.compact .code-card{grid-area:code}html.compact .code-wrap .code{height:auto;max-height:440px;font-size:14.5px;line-height:21px}html.compact .code-card:not([data-state=idle]) .code-wrap{padding-bottom:var(--console-h)}html.compact .app-foot{flex-wrap:wrap;grid-area:foot;justify-content:space-between;align-items:center;gap:10px 16px;padding:6px 2px 0;display:flex}html.compact .sidebar{width:auto;height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(180deg, #ece0cf, var(--sidebar));z-index:20;position:fixed;inset:auto 0 0;overflow:visible;box-shadow:0 -1px #c4b0968c,0 -12px 26px -20px #3c2d148c}html.compact .sidebar.is-open{width:auto}html.compact .side-toggle,html.compact .side-label,html.compact .credit-side{display:none}html.compact .side-nav{justify-content:space-around;align-items:center;max-width:560px;height:62px;margin:0 auto;display:flex}html.compact .side-nav li{width:auto;padding:0;position:static}html.compact .side-nav a,html.compact .sidebar.is-open .side-nav a{justify-content:center;gap:0;width:54px;height:46px}html.compact .side-nav a svg{width:28px;height:28px;margin:0}html.compact .side-nav li.is-on a:before{border-radius:3px 3px 0 0;width:auto;height:3px;inset:auto 14px -7px}html.compact .flyout,html.compact .flyout.beside-open{top:auto;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:21;width:auto;max-width:560px;max-height:min(70vh,560px);margin:0 auto;position:fixed;transform:translateY(10px)}html.compact .flyout.is-open{transform:none}@media (width<=600px){html.compact .artboard{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand""status""stage""lessons""info""code""foot";row-gap:12px}html.compact .progress-card{flex:1;width:auto}html.compact .brand-text h1{font-size:20px}html.compact .tabs{gap:18px}html.compact .tabs button{font-size:14.5px}}@media (orientation:landscape) and (height<=600px){html.compact .artboard{padding:8px calc(10px + env(safe-area-inset-right)) 14px calc(72px + env(safe-area-inset-left));grid-template-rows:repeat(5,auto) 1fr;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);grid-template-areas:"stage brand""stage status""stage lessons""stage info""stage code""stage foot";align-items:start;gap:12px 14px}html.compact .stage{height:calc(100dvh - 16px);min-height:240px;position:sticky;top:8px}html.compact .brand-logo{width:48px;height:27px}html.compact .brand-rule{height:34px;margin:0 8px 0 10px}html.compact .brand-text h1{font-size:18px;line-height:21px}html.compact .brand-text p{font-size:11px}html.compact .status{width:100%}html.compact .progress-card{flex:1;width:auto;height:46px}html.compact .sidebar{width:calc(62px + env(safe-area-inset-left));height:auto;padding:0 0 0 env(safe-area-inset-left);background:linear-gradient(90deg, #e7d9c6 0%, var(--sidebar) 70%, #eadecd 100%);inset:0 auto 0 0;box-shadow:inset -1px 0 #c4b09673}html.compact .side-nav{flex-direction:column;justify-content:center;gap:4px;height:100%;margin:0}html.compact .side-nav li.is-on a:before{border-radius:0 3px 3px 0;width:3px;height:auto;inset:10px auto 10px -4px}html.compact .flyout,html.compact .flyout.beside-open{left:calc(72px + env(safe-area-inset-left));width:320px;max-height:calc(100dvh - 16px);margin:0;top:8px;bottom:auto;right:auto;transform:translate(-10px)}}@media (orientation:landscape) and (height<=600px) and (width<=720px){html.compact .clock,html.compact .brand-text p{display:none}}html.compact .tag{padding:3px 7px 3px 6px;font-size:11.5px}.code .line{transition:background .12s,box-shadow .12s}.code .line.is-running{box-shadow:inset 3px 0 0 var(--teal);background:#1aa3a124}.code .line.is-running .ln{color:var(--teal-deep)}html:not(.compact) .code-card:not([data-state=idle]) .code code{padding-bottom:calc(var(--console-h) + 4px)}