@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}@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-400-normal-BlDd6KY1.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-500-normal-DVtwyDnM.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-600-normal-BeyktMLo.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-500-normal-DVtwyDnM.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-600-normal-BeyktMLo.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-700-normal-v9jliTCB.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-400-normal-BlDd6KY1.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-devanagari-devanagari-500-normal-DVtwyDnM.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-400-normal-Bp0xVS9x.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-500-normal-FWawh3rc.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-600-normal-BZTJana4.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-500-normal-FWawh3rc.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-600-normal-BZTJana4.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-700-normal-D9plwkIl.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-400-normal-Bp0xVS9x.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-hebrew-hebrew-500-normal-FWawh3rc.woff2)format("woff2");unicode-range:U+590-5FF,U+20AA,U+FB1D-FB4F}@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/barlow-vietnamese-400-normal-Dpl4UHAZ.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-vietnamese-500-normal-zTViEIzf.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-vietnamese-600-normal-DcjprdFV.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-semi-condensed-vietnamese-500-normal-DGADhYWF.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-semi-condensed-vietnamese-600-normal-b1FQiZcx.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/barlow-semi-condensed-vietnamese-700-normal-Dm7RZTvf.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,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)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(data:font/woff2;base64,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)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/roboto-greek-400-normal-ai2Z1K3C.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/roboto-greek-500-normal-C9AnhcmC.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/roboto-greek-600-normal-B9H7kvZv.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Roboto Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/roboto-condensed-greek-500-normal-Hsn-wDIp.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Roboto Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/roboto-condensed-greek-600-normal-Dk1MlhZA.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Roboto Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/roboto-condensed-greek-700-normal-DWMOA2VK.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:JetBrains Mono Greek Cyrillic;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-greek-400-normal-C190GLew.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:JetBrains Mono Greek Cyrillic;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-greek-500-normal-JpySY46c.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/roboto-cyrillic-400-normal-CBPI_iaY.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/roboto-cyrillic-500-normal-CLao9AfR.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/roboto-cyrillic-600-normal-DIMkl7QA.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Roboto Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/roboto-condensed-cyrillic-500-normal-s4PklZE0.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Roboto Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/roboto-condensed-cyrillic-600-normal-CWopvA8w.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Roboto Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/roboto-condensed-cyrillic-700-normal-9RN-Z7cI.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:JetBrains Mono Greek Cyrillic;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-cyrillic-400-normal-BEIGL1Tu.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:JetBrains Mono Greek Cyrillic;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-cyrillic-500-normal-DmUKJPL_.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-400-normal-AAMxebZb.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-500-normal-DPISWLls.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-600-normal-JPxwL-XU.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-500-normal-DPISWLls.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-600-normal-JPxwL-XU.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-700-normal-3CqrwsiZ.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-400-normal-AAMxebZb.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/noto-sans-arabic-arabic-500-normal-DPISWLls.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}:root{--bg:#e3e9f0;--bg-deep:#d8dfe8;--sidebar:#d1d8e2;--card:#eaeef4;--card-soft:#edf1f6f7;--code-bg:#e8edf3;--line:#b5bcc6;--line-soft:#cdd4dc;--navy:#17213e;--navy-2:#232e4b;--ink:#4f535b;--muted:#696d74;--faint:#999fa7;--teal:#386ce6;--teal-deep:#4676e8;--trace:#afb9c7;--track:#d0d6dd;--kw:#2649a7;--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,#b5bcc652 1px,#00000000 1px),linear-gradient(#b5bcc652 1px,#00000000 1px);background-position:50%;background-size:28px 28px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000000 0,#00000000 62%);mask-image:radial-gradient(circle,#000000 0,#00000000 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:#25304e;stroke-width:9.5px}.loader-logo .sign{fill:none;stroke:#25304e;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(#4b7ae9,#2861e4);transition:transform .45s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;transform:scaleX(.04)}.loader-shine{background:linear-gradient(90deg,#fdffff00,#fdffff80,#fdffff00);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%, #f5f7fa8c, 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:#b7c1ce;stroke:none}.sidebar{background:linear-gradient(90deg, #ced5df 0%, var(--sidebar) 70%, #d4dae3 100%);z-index:2;width:72px;position:absolute;top:0;bottom:0;left:0;box-shadow:inset -1px 0 #a1abb959}.side-toggle{background:#dde3eab3;border:1.5px solid #bbc3ce;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 li:nth-child(6){top:574px}.side-nav a{place-items:center;width:44px;height:40px;display:grid}.side-nav svg{fill:none;stroke:#323d5d;stroke-width:2.1px;stroke-linejoin:round;stroke-linecap:round;width:34px;height:34px}.side-nav svg .fill,.side-nav svg.fill{fill:#2a3450;stroke:none}.side-nav li.is-muted svg{fill:#6c707a}.side-nav li.side-lang svg{fill:none;stroke:#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:#25304e;stroke-width:9.5px}.brand-logo .sign{fill:none;stroke:#25304e;stroke-width:4px;stroke-linecap:round}.brand-rule{margin:-4px 0 0;width:2px;height:64px;margin-inline:16px 12px;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:#1c2337;stroke-width:1.6px;stroke-dasharray:5 4;stroke-linecap:butt}.leaders .dot-end{fill:#fbf8f3;stroke:var(--teal);stroke-width:2.4px}.leaders .dot-anchor{fill:#5c87eb;stroke:var(--teal);stroke-width:3.4px}.leaders .dot-halo{fill:#386ce62e;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 #fdffffb3}.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(#4b7ae9,#2861e4);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;white-space:nowrap;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:#e4e9f099;border-radius:12px;width:476px;height:397px;position:absolute;top:120px;right:20px}.tabs{padding:0;align-items:flex-end;gap:33px;height:47px;padding-inline-start: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{inset-inline:3px 8px;border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:16px 0 0;padding-inline-start:18px;position:absolute;top:57px;bottom:-1.5px;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:#e6ebf1cc;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:#e4e9f099;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-inline-start: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-inline-end:-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(#32426c,#273457);width:44px;height:38px;box-shadow:0 1px 2px #17213e40}.btn-run svg{fill:#fbf9f5;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:#c0c7d0 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);padding:0;border:1.5px solid var(--line);background:var(--card-soft);cursor:pointer;border-radius:9px;align-items:center;height:91px;padding-inline:10px 16px;transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;display:flex;position:relative}.lesson:hover{border-color:#a1aab5;transform:translateY(-2px);box-shadow:0 6px 14px -8px #2a354459}.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 #4676e814}.lesson-thumb{width:calc(var(--tw) * 1px);object-fit:contain;opacity:0;flex:none;height:84px;margin-inline-end:2px}.lesson-thumb.is-ready{opacity:1}.lesson-title{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:#4a4f5d;text-align:center;white-space:nowrap;flex:1;font-size:15.2px;font-weight:500;line-height:22px}html:not([lang=en]) .lesson-title{white-space:normal;text-wrap:balance}.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:#2c63e5;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 #1e27328c}.minimap.is-on{opacity:1;pointer-events:auto;transform:none}.minimap canvas{background:#e3e8ee;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:#9ba4b0;outline:none;box-shadow:0 8px 18px -12px #1e273273}.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:#2649a712;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:#00000000;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 0;padding-inline:8px 9px;font-size:13px;font-weight:700;transition:opacity .3s;position:absolute;top:0;left:0;box-shadow:0 4px 10px -8px #1e273280}.tags.is-free .tag:not(.is-hidden){opacity:1;pointer-events:auto}.tags.is-free .tag.is-through{pointer-events:none}.tags.is-off .tag{opacity:0!important;pointer-events:none!important}.tag:hover{border-color:var(--teal)}.float-note{background:var(--c);color:#f5f7fa;font-family:var(--cond);letter-spacing:.02em;white-space:nowrap;pointer-events:none;border-radius:999px;padding:2px 10px 3px;font-size:15px;font-weight:700;position:absolute;top:0;left:0;box-shadow:0 4px 10px -6px #17213e99}.readout{background:var(--navy);color:#e9edf3;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 #17213e99}.readout.is-on{opacity:1}.signals{pointer-events:none;position:absolute;inset:0;overflow:hidden}.sig{border:1.5px solid var(--line);border-left:4px solid var(--c);font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);white-space:nowrap;visibility:hidden;background:#edf1f6f5;border-radius:6px;align-items:center;gap:5px;padding:2px 7px 2px 5px;font-size:11.5px;font-weight:700;line-height:14px;display:inline-flex;position:absolute;top:0;left:0;box-shadow:0 4px 10px -8px #1e27328c}.sig.is-on{visibility:visible}.sig i{background:#a9afb7;border-radius:50%;width:7px;height:7px}.sig.is-high i,.sig.is-motor i{background:#e5533d;box-shadow:0 0 0 2.5px #e5533d38}.sig.is-power i{background:#d64a3a}.sig.is-gnd i{background:var(--navy-2)}.sig.is-analog i{background:#f0a53a;box-shadow:0 0 0 2.5px #f0a53a38}.sig.is-low{color:var(--muted)}.schematic{width:var(--sch-w,420px);border:1.5px solid var(--line);background:var(--card-soft);z-index:3;border-radius:11px;flex-direction:column;padding:10px 12px 12px;display:none;position:absolute;top:0;left:0;box-shadow:0 10px 26px -18px #1e273299}.schematic.is-on{animation:.35s cubic-bezier(.2,.8,.2,1) insp-in;display:flex}.schematic.is-closing{pointer-events:none;animation:.26s cubic-bezier(.4,0,.8,.4) forwards sch-out;display:flex}@keyframes sch-out{to{opacity:0;translate:0 6px;scale:.96}}.sch-head{border-bottom:1px solid var(--line-soft);align-items:baseline;gap:10px;padding:0 2px 6px;display:flex}.sch-head h3{font-family:var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--navy);margin:0;font-size:15px;font-weight:700}.sch-lesson{font-family:var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13.5px;font-weight:500;overflow:hidden}.sch-close{border-radius:6px;align-self:center;place-items:center;width:24px;height:24px;display:grid}.sch-close:hover{background:#232e4b14}.sch-close svg{fill:none;width:15px;height:15px;stroke:var(--navy-2);stroke-width:2.2px;stroke-linecap:round}.sch-body{flex:1;place-items:center;min-height:0;padding-top:8px;display:grid}.sch-body svg{width:100%;height:100%;max-height:var(--sch-svg-h,420px);display:block}.sch-none{color:var(--muted);margin:18px 0;font-size:14px}.sch path,.sch circle,.sch rect{fill:none;stroke:var(--navy-2);stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round}.sch .solid{fill:var(--navy-2);stroke:none}.sch .fillable{fill-opacity:.85}.sch .box{fill:#e1e6ed}.sch .ring{stroke:var(--line)}.sch .hit{fill:#00000000;stroke:none;pointer-events:all}.sch text{fill:var(--navy);stroke:none;font-family:var(--cond);letter-spacing:.03em;font-size:11px;font-weight:600}.sch .block-t{letter-spacing:.08em;font-size:11.5px;font-weight:700}.sch .pin-t{fill:var(--navy-2);font-size:10.5px}.sch .val{fill:var(--muted);font-weight:500}.sch .net{fill:#b9473a;font-size:10px}.sch .note{fill:var(--muted);font-size:10.5px;font-weight:500}.sch .sym-t{font-size:13px;font-weight:700}.sch .pinval{letter-spacing:.05em;fill:var(--muted);font-size:9.5px;font-weight:700}.sch .pinval.is-high,.sch .pinval.is-power{fill:#c9432f}.sch .pinval.is-analog{fill:#c27a14}.sch .sym{cursor:pointer}.sch .sym.is-hot path,.sch .sym.is-hot circle:not(.solid),.sch .sym.is-hot rect:not(.hit){stroke:var(--teal)}.sch .sym.is-sel path,.sch .sym.is-sel circle:not(.solid),.sch .sym.is-sel rect:not(.hit){stroke:var(--teal-deep);stroke-width:2.4px}.sch .sym.is-sel .box,.sch .sym.is-hot .box{fill:#e2f2f3}.sch .w.is-high{stroke:#e5533d;stroke-width:2.6px}.sch .w.is-power{stroke:#d64a3a;stroke-width:2.4px}.sch .w.is-gnd{stroke:var(--navy);stroke-width:2.4px}.sch .w.is-analog{stroke:#f0a53a;stroke-width:2.6px}.sch .w.is-low{stroke:#999faf}.sch .flow{stroke:#e4eaf1;stroke-width:1.5px;stroke-dasharray:2 9;opacity:0;pointer-events:none}.sch .flow.is-on{opacity:1;animation:.5s linear infinite sch-flow}@keyframes sch-flow{to{stroke-dashoffset:-22px}}html.reduce-motion .sch .flow.is-on{animation:none}html.compact .schematic{padding:8px 10px 10px}.tip{border:1.5px solid var(--line);pointer-events:none;opacity:0;z-index:3;background:#faf7f2f7;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 #1e27328c}.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 #1e273280}.viewbar button{border-radius:7px;place-items:center;width:34px;height:32px;transition:background .15s;display:grid}.viewbar button:hover{background:#232e4b12}.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:#386ce621;animation:2.4s ease-in-out infinite nudge}@keyframes nudge{0%,to{box-shadow:0 0 #386ce600}50%{box-shadow:0 0 0 3px #386ce640}}.viewbar button.toggle.is-on{background:#386ce624}.viewbar button.toggle.is-on svg{stroke:var(--teal-deep)}.viewbar button.toggle.is-on svg .fill{fill:var(--teal-deep)}.viewbar-sep{background:var(--line);width:1px;height:20px;margin:0 3px}.view-hint{background:var(--navy);color:#e5eaf1;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 #1e273280,inset -1px 0 #a1abb959}.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:#232e4b0f}.side-nav li.is-on a{background:#232e4b17}.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:#f0f3f7fa;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 #1e27328c}.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:start;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:#232e4b0f}.fly-list button.is-current{background:#386ce61a}.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:#c7cdd6;border-radius:999px;flex:none;width:38px;height:22px;transition:background .2s;position:relative}.switch-track span{background:#fdfaf6;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:#e4e9f0fa;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:#e4e9f0fa;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{padding:0 0 18px;scrollbar-width:thin;scrollbar-color:#c0c7d0 transparent;height:100%;padding-inline-end:24px;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{padding:0 0 6px;text-align:start;font-family:var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding-inline-end:6px;font-size:12.5px;font-weight:700}.pin-table td{border-top:1.5px solid var(--line-soft);vertical-align:top;padding:8px 0;padding-inline-end:8px}.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-inline-end:7px;display:inline-block;box-shadow:0 0 0 1.5px #131a2dbf}.steps{counter-reset:step;gap:10px;margin-top:12px;display:grid}.steps li{color:#4f535a;min-height:28px;padding-inline-start:40px;font-size:16px;line-height:21px;position:relative}.steps li:before{counter-increment:step;content:counter(step);inset-inline-start:0;border:1.5px solid var(--line);width:27px;height:27px;font-family:var(--cond);color:var(--navy);background:#e6ebf1cc;border-radius:8px;place-items:center;font-size:14px;font-weight:700;display:grid;position:absolute;top:-2px}.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:#e6ebf18c;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:#a1aab5}.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:#fbf9f5}.btn-run.is-busy{background:linear-gradient(#4073e7,#245ee4)}.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:#e1e6ed;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:#b2bac4;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:#97a0ac}.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;padding-inline:12px 6px;display:flex}.console-dot{background:#a0a6ae;border-radius:50%;width:8px;height:8px}.code-card[data-state=running] .console-dot{background:var(--teal);box-shadow:0 0 0 3px #386ce633}.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:#232e4b14}.console-close svg{fill:none;width:14px;height:14px;stroke:var(--navy-2);stroke-width:2.2px;stroke-linecap:round}.console-lines{color:#3c4251;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:#fdffff;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],.stage[data-hand=tap]{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:#5c87eb;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:#f9f6f1fa;border-radius:11px;width:292px;padding:14px 0 12px;padding-inline:16px 14px;transition:opacity .18s,visibility 0s linear .18s;position:absolute;top:0;left:0;box-shadow:0 18px 34px -22px #1e2732a6,inset 0 1px #fdffffb3}.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{margin:-4px 0 0;border-radius:7px;flex:none;place-items:center;width:28px;height:28px;margin-inline-end:-4px;transition:background .15s;display:grid}.insp-close:hover{background:#232e4b12}.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:#386ce62e;box-shadow:0 0 0 6px #386ce62e}to{background:0 0;box-shadow:0 0 0 6px #00000000}}.insp-row label,.insp-label{font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase;color:#4a4f5d;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:#fbf8f3;border-radius:50%;width:18px;height:18px;margin-top:-6px;transition:transform .15s;box-shadow:0 1px 3px #17213e40}.inspector input[type=range]::-moz-range-thumb{border:2.5px solid var(--accent,var(--teal));background:#fbf8f3;border-radius:50%;width:13px;height:13px;box-shadow:0 1px 3px #17213e40}.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:#4a4f5d;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:#a1aab5}.seg button.is-on{border-color:var(--navy);background:var(--navy);color:#eff2f6}.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%, #fdffff8c, 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 #17213e59}.swatch:hover{transform:scale(1.1)}.swatch.is-on{box-shadow:0 0 0 1.5px #17213e59 inset, 0 0 0 2.5px #f9f6f1, 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:#c7cdd6;border-radius:999px;flex:none;width:34px;height:20px;transition:background .2s;position:relative}.insp-switch .knob{background:#fdfaf6;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{padding:4px 0;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-inline:7px 9px;font-size:13.5px;font-weight:600;transition:border-color .15s;display:inline-flex}.insp-focus:hover{border-color:#a1aab5}.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:#1b54da;text-align:end;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:#1b54da;background:#e7f6f8;border:1.5px solid #5c87eb;border-radius:8px;align-items:center;gap:5px;padding:4px 0;padding-inline:7px 10px;font-size:13.5px;font-weight:600;transition:border-color .15s;display:inline-flex}.insp-run:hover{border-color:#1b54da}.insp-run svg{width:14px;height:14px}.insp-run .fill{fill:#1b54da}.inspector.is-running .insp-run{display:none}.code .param{font:inherit;letter-spacing:inherit;line-height:inherit;color:#1a51d3;background:#386ce61a;border-radius:4px;margin:0 1px;padding:0 3px;transition:background .15s;box-shadow:inset 0 -1.5px #386ce699}.code .param:hover,.code .param.is-marked{background:#386ce638}.code .param.is-marked{box-shadow:inset 0 0 0 1.5px #386ce6bf}.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:#f9f6f1;background:#386ce68c}}.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, #000000 var(--fade-l), #000000 calc(100% - var(--fade-r)), transparent);-webkit-mask-image:linear-gradient(90deg, transparent, #000000 var(--fade-l), #000000 calc(100% - var(--fade-r)), transparent);mask-image:linear-gradient(90deg, transparent, #000000 var(--fade-l), #000000 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 #2a354473}.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:#a1aab5}.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:#dde3eab3;border:1.5px solid #bbc3ce;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:#e4e9efeb;border-color:#a1aab5}a.credit:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.credit-x{fill:#2a3450;flex:none;width:19px;height:19px}.credit-rule{background:#bbc3ce;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{margin:0;flex:none;height:40px;margin-inline:12px 10px}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%,#f5f7fab3,#00000000 70%),#e3e8ef99;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);padding:0;height:74px;padding-inline:8px 12px}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-inline-end: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, #d6dce5, var(--sidebar));z-index:20;position:fixed;inset:auto 0 0;overflow:visible;box-shadow:0 -1px #a1abb98c,0 -12px 26px -20px #1e27328c}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{margin:0;height:34px;margin-inline:10px 8px}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, #ced5df 0%, var(--sidebar) 70%, #d4dae3 100%);inset:0 auto 0 0;box-shadow:inset -1px 0 #a1abb973}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 0;padding-inline:6px 7px;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:#386ce624}.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)}html:not(.compact) .flyout[data-kind=language]{width:560px;max-height:660px}.flyout[data-kind=language] .fly-list{column-gap:8px}html:not(.compact) .flyout[data-kind=language] .fly-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows), auto);grid-auto-flow:column}@media (width>=560px){html.compact .flyout[data-kind=language] .fly-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows), auto);grid-auto-flow:column}}.fly-lang label{align-items:center;gap:12px;display:flex}.fly-lang select{border:1.5px solid var(--line);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%2324304a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 14px;color:var(--navy);font:600 13px/1.2 var(--cond);letter-spacing:.02em;appearance:none;cursor:pointer;border-radius:8px;flex:none;padding:5px 26px 5px 10px}.fly-lang select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.side-code{background:var(--navy);min-width:21px;box-shadow:0 0 0 2px var(--sidebar);color:#e7ecf2;font:700 10.5px/14px var(--cond);letter-spacing:.05em;text-align:center;pointer-events:none;border-radius:5px;padding:1px 3px 0;position:absolute;top:21px;left:24px}.side-lang.is-cramped{visibility:hidden}html.compact .side-code{top:23px;left:29px}@media (width<=359px){html.compact .side-lang{display:none}}@media (orientation:landscape) and (height<=339px){html.compact .side-lang{display:none}}:root:lang(zh){--cjk:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC"}:root:lang(zh-Hant){--cjk:"PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC"}:root:lang(ja){--cjk:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP"}:root:lang(ko){--cjk:"Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", "Source Han Sans KR"}:root:is(:lang(zh),:lang(ja),:lang(ko)){--sans:"Barlow", var(--cjk), system-ui, sans-serif;--cond:"Barlow Semi Condensed", "Barlow", var(--cjk), system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, var(--cjk), monospace}:root:is(:lang(el),:lang(ru),:lang(uk)){--sans:"Barlow", "Roboto", system-ui, sans-serif;--cond:"Barlow Semi Condensed", "Roboto Condensed", "Barlow", "Roboto", system-ui, sans-serif;--mono:"JetBrains Mono", "JetBrains Mono Greek Cyrillic", ui-monospace, monospace}html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}html:lang(hi) body *{letter-spacing:0!important}:root[dir=rtl] pre.code,:root[dir=rtl] .console-lines,:root[dir=rtl] .schematic svg,:root[dir=rtl] input[type=range]{direction:ltr}:root[dir=rtl] .console-lines>div{text-align:left;unicode-bidi:plaintext}:root[dir=rtl] code{direction:ltr;unicode-bidi:isolate}:root[dir=rtl]:not(.compact) .sidebar{direction:ltr}:root[dir=rtl] .side-label{direction:rtl}:root[dir=rtl] .viewbar{direction:ltr}:root[dir=rtl] .view-hint{direction:rtl}:root[dir=rtl] .lesson .chev{transform:scaleX(-1)}html:is(:lang(he),:lang(ar)) body *{letter-spacing:0!important}:root[dir=rtl] .fly-lang select{background-position:6px;padding:5px 10px 5px 26px}:root[dir=rtl] :is(.spec-grid dd,.pin-table td,.readout,.float-note,.seg button,.insp-label output,.insp-row output,.sig b){unicode-bidi:plaintext}:root[dir=rtl] :is(.spec-grid dd,.pin-table td){text-align:right}:root[dir=rtl] .sig{direction:ltr}

/* ==================================================================
   Learn Arduino — "Lab Console" design system (base layer)

   The reference site's paper/teal palette is remapped at build time.
   This file defines the new visual language shared by both viewports:
   a deep navy console shell, electric-blue / cyan / amber accents,
   and bright white working surfaces. Layout lives in layout.css
   (desktop) and mobile.css (compact).
   ================================================================== */

:root {
  /* console shell */
  --la-bg-0: #071223;
  --la-bg-1: #0b1a30;
  --la-bg-2: #122a49;
  --la-panel: rgba(255, 255, 255, .055);
  --la-panel-hi: rgba(255, 255, 255, .10);
  --la-stroke: rgba(140, 180, 240, .17);
  --la-stroke-hi: rgba(140, 180, 240, .34);
  --la-text: #eaf3ff;
  --la-dim: #a4bcdc;
  --la-faint: #7089ad;

  /* bright working surfaces */
  --la-white: #ffffff;
  --la-snow: #f5f9ff;
  --la-ink: #10233f;
  --la-ink-2: #3c5375;
  --la-ink-3: #68809f;
  --la-line: #dce7f7;
  --la-line-soft: #eaf1fb;

  /* accents */
  --la-blue: #4d7cff;
  --la-blue-bright: #7aa4ff;
  --la-blue-deep: #1b4fd1;
  --la-cyan: #22d3c5;
  --la-amber: #ffb454;

  --la-radius: 20px;
  --la-shadow: 0 18px 44px rgba(3, 12, 28, .28), 0 2px 8px rgba(3, 12, 28, .16);
  --la-shadow-soft: 0 10px 28px rgba(3, 12, 28, .16);
}

html { background: var(--la-bg-0); }
body {
  margin: 0;
  background: var(--la-bg-0);
  color: var(--la-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(77, 124, 255, .38); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: rgba(140, 180, 240, .38) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(140, 180, 240, .32); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Loading screen: match the dark console ---------- */
.loader {
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(77, 124, 255, .18), transparent 70%),
    linear-gradient(160deg, #0b1a30, #071223 60%, #0a1830);
}
.loader:before {
  background-image:
    linear-gradient(90deg, rgba(120, 165, 235, .09) 1px, transparent 1px),
    linear-gradient(rgba(120, 165, 235, .09) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* The new "Pulse Board" mark replaces the reference infinity symbol. */
.loader-logo {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 8px 26px rgba(77, 124, 255, .5));
}
.loader-logo .la-mark-trace {
  /* One travelling gap along the square wave, not a dashed outline. */
  stroke-dasharray: 56 18;
  animation: la-trace-flow 1.6s linear infinite;
}
.loader-logo .la-mark-led { animation: la-led-pulse 1.15s ease-in-out infinite alternate; }
@keyframes la-trace-flow { to { stroke-dashoffset: -74px; } }
@keyframes la-led-pulse { from { opacity: .45; } to { opacity: 1; } }
.loader-title { color: var(--la-text); letter-spacing: .16em; }
.loader-track { background: rgba(140, 180, 240, .16); height: 6px; }
.loader-fill { background: linear-gradient(90deg, var(--la-blue), var(--la-cyan)); }
.loader-shine { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); }
.loader-step { color: var(--la-dim); }
.loader .noscript { color: var(--la-dim); }

/* ---------- Global progress line ---------- */
.la-progress-line {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--la-cyan), var(--la-blue), var(--la-amber));
  box-shadow: 0 0 14px rgba(77, 124, 255, .7);
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

/* ---------- Shared surface treatment ---------- */
.info-card, .code-card, .status, .flyout, .viewbar, .lesson, .schematic, .inspector {
  -webkit-font-smoothing: antialiased;
}
.info-card, .code-card {
  border: 1px solid var(--la-line);
  border-radius: var(--la-radius);
  background: var(--la-white);
  box-shadow: var(--la-shadow);
}
.btn-run {
  background: linear-gradient(150deg, var(--la-blue-bright), var(--la-blue-deep));
  box-shadow: 0 6px 18px rgba(77, 124, 255, .38);
  color: #fff;
}
.btn-run:hover { filter: brightness(1.1); }
.btn-run svg { fill: #fff; }
.btn-ghost { border: 1px solid var(--la-line); background: var(--la-snow); }
.btn-ghost:hover { border-color: var(--la-blue); }

/* ---------- Dark code surface (both viewports) ---------- */
.code {
  color: #dbe9ff;
  border: 1px solid rgba(120, 160, 230, .22);
  background:
    linear-gradient(90deg, transparent 41px, rgba(140, 180, 240, .13) 41px, rgba(140, 180, 240, .13) 42.5px, transparent 42.5px) no-repeat,
    #0a1930;
}
.code .ln { color: #5b769e; }
.code .kw, .code .num { color: #b79bff; }
.code .fn { color: var(--la-amber); }
.code .id { color: #dbe9ff; }
.code .str { color: #63e6a9; }
.code .cm { color: #6f8db4; font-style: italic; }
.code .param {
  color: #7ff0e4;
  background: rgba(34, 211, 197, .15);
  box-shadow: inset 0 -1.5px rgba(34, 211, 197, .7);
}
.code .param:hover, .code .param.is-marked { background: rgba(34, 211, 197, .28); }
.code .line.is-running { box-shadow: inset 3px 0 0 var(--la-cyan); background: rgba(34, 211, 197, .11); }
.code .line.is-running .ln { color: var(--la-cyan); }
.code-card[data-state=running] .btn-run {
  background: linear-gradient(150deg, #ff8a6a, #d6483d);
  box-shadow: 0 6px 18px rgba(214, 72, 61, .38);
}
.console {
  background: #08162b;
  border-top: 1px solid rgba(120, 160, 230, .22);
  color: #afc9ee;
}
.console-head { border-bottom: 1px solid rgba(120, 160, 230, .16); }
.console-title { color: #9dbbe6; }
.console-status { color: var(--la-cyan); }
.console-lines { color: #a9c7ee; }
.console-lines div:last-child { color: #eaf3ff; }
.console-dot { background: #55708f; }
.code-card[data-state=running] .console-dot {
  background: var(--la-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 197, .22), 0 0 12px rgba(34, 211, 197, .8);
}
.code-card[data-state=uploading] .console-dot { background: var(--la-amber); }
.console-close svg { stroke: #9dbbe6; }
.console-close:hover { background: rgba(140, 180, 240, .14); }
.console-grip:after { background: rgba(140, 180, 240, .45); }

/* ==================================================================
   DESKTOP LAYOUT — "Lab Console"

   Deliberately different from the reference site. The original is one
   light paper canvas with a narrow icon rail, floating cards on the
   right and a horizontal lesson strip along the bottom. Here the app is
   a dark three-column workbench:

     +--------------------------------------------------------------+
     |  brand        |     section navigation     | actions | progress|
     +---------------+----------------------------+---------+---------+
     |  curriculum   |      3D board viewport     | lesson  |         |
     |  (vertical    |      (bright white)        | info    |         |
     |   16 lessons) |                            +---------+         |
     |               |                            | sketch  |         |
     |               |                            | editor  |         |
     +---------------+----------------------------+---------+---------+
     |  status bar                                                   |
     +--------------------------------------------------------------+

   The reference app still owns the 1672px logical canvas and its
   scale() transform. We only reposition its absolutely positioned
   children, so all Three.js / callout / minimap coordinate maths keep
   working. All horizontal positions use logical properties so RTL
   languages mirror the columns automatically.
   ================================================================== */

html:not(.compact) .artboard {
  background-color: var(--la-bg-0);
  background-image:
    radial-gradient(80% 60% at 18% 4%, rgba(77, 124, 255, .16), transparent 68%),
    radial-gradient(60% 60% at 96% 92%, rgba(34, 211, 197, .10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(140, 180, 240, .035) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(140, 180, 240, .035) 0 1px, transparent 1px 36px),
    linear-gradient(160deg, #0c1c34, #071223 58%, #0a1930);
}
html:not(.compact) .traces path,
html:not(.compact) .traces line,
html:not(.compact) .traces circle { stroke: rgba(120, 165, 235, .30); }

/* ------------------------------------------------------------------
   Top navigation bar: the old vertical icon rail becomes a full-width
   dark header containing the section navigation.
   ------------------------------------------------------------------ */
html:not(.compact) .sidebar {
  position: absolute;
  top: 0; bottom: auto;
  left: 0; right: 0;
  width: auto; height: 92px;
  z-index: 6;
  display: flex;
  align-items: center;
  padding-inline-start: 280px;
  padding-inline-end: 620px;
  background: linear-gradient(100deg, rgba(13, 30, 55, .97), rgba(8, 20, 38, .96) 62%, rgba(10, 26, 48, .97));
  border-bottom: 1px solid var(--la-stroke);
  box-shadow: 0 14px 34px rgba(2, 9, 22, .38);
  overflow: visible;
  transition: none;
}
html:not(.compact) .sidebar.is-open { width: auto; box-shadow: 0 14px 34px rgba(2, 9, 22, .38); }
html:not(.compact) .side-toggle { display: none; }
html:not(.compact) .credit-side { display: none; }
html:not(.compact) .side-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:not(.compact) .side-nav li {
  position: static !important;
  width: auto;
  height: auto;
  display: block;
  padding: 0;
}
html:not(.compact) .side-nav li.side-lang { display: none; }
html:not(.compact) .side-nav a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: auto;
  height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  color: var(--la-dim);
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
html:not(.compact) .side-nav a:hover { background: var(--la-panel-hi); color: #fff; transform: translateY(-1px); }
html:not(.compact) .side-nav li.is-on a,
html:not(.compact) .side-nav li.is-active a {
  background: linear-gradient(135deg, rgba(77, 124, 255, .32), rgba(77, 124, 255, .12));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(122, 164, 255, .35);
}
html:not(.compact) .side-nav li.is-on a:before,
html:not(.compact) .side-nav li.is-active a:before {
  top: auto; bottom: 5px;
  inset-inline-start: 50%;
  width: 18px; height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--la-cyan);
  box-shadow: 0 0 8px rgba(34, 211, 197, .8);
}
html:not(.compact) .side-nav svg { width: 20px; height: 20px; stroke: currentColor; flex: none; margin: 0; }
html:not(.compact) .side-nav svg .fill,
html:not(.compact) .side-nav svg.fill { fill: currentColor; }
html:not(.compact) .side-label {
  display: inline !important;
  /* The reference rail fades labels out while collapsed; our header is
     permanently expanded, so force them visible. */
  opacity: 1 !important;
  visibility: visible !important;
  transition: none;
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: inherit;
  white-space: nowrap;
}

/* Brand sits on the left of the header, above it. */
html:not(.compact) .brand {
  top: 17px;
  left: auto; right: auto;
  inset-inline-start: 28px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
}
html:not(.compact) .brand-logo {
  width: 44px; height: 44px;
  margin: 0;
  flex: none;
  filter: drop-shadow(0 4px 13px rgba(77, 124, 255, .5));
}
html:not(.compact) .brand-logo .la-mark-led { filter: drop-shadow(0 0 5px rgba(34, 211, 197, .9)); }
html:not(.compact) .brand-rule { width: 1px; height: 40px; margin: 0 2px; background: linear-gradient(180deg, transparent, rgba(140, 180, 240, .6), transparent); }
html:not(.compact) .brand-rule:before, html:not(.compact) .brand-rule:after { display: none; }
html:not(.compact) .brand-text h1 {
  font-size: 23px;
  line-height: 25px;
  letter-spacing: .11em;
  color: #fff;
  text-shadow: none;
}
html:not(.compact) .brand-text p { margin-top: 3px; font-size: 10.5px; letter-spacing: .19em; color: var(--la-dim); }
html:not(.compact) .brand-text p i { color: var(--la-cyan); }

/* Progress becomes a compact glass chip on the right of the header. */
html:not(.compact) .status {
  top: 17px;
  left: auto; right: auto;
  inset-inline-end: 20px;
  width: 376px;
  height: 58px;
  padding: 0;
  border: 1px solid var(--la-stroke);
  border-radius: 15px;
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  z-index: 8;
}
html:not(.compact) .progress-card {
  position: static;
  width: auto; height: 100%;
  flex: 1;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html:not(.compact) .progress-icon { width: 30px; height: 30px; flex: none; stroke: var(--la-cyan); }
html:not(.compact) .progress-body { flex: 1; min-width: 0; }
html:not(.compact) .progress-label { font-size: 11.5px; letter-spacing: .14em; color: var(--la-dim); }
html:not(.compact) .progress-track { height: 7px; background: rgba(140, 180, 240, .2); border-radius: 99px; }
html:not(.compact) .progress-fill {
  background: linear-gradient(90deg, var(--la-blue), var(--la-cyan));
  box-shadow: 0 0 12px rgba(34, 211, 197, .6);
  border-radius: 99px;
}
html:not(.compact) .progress-count { font-size: 17px; color: #fff; }
html:not(.compact) .clock { display: none; }

/* Injected header actions: language + run. */
.la-top-actions {
  position: absolute;
  top: 24px;
  left: auto; right: auto;
  inset-inline-end: 408px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.la-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid var(--la-stroke-hi);
  background: rgba(255, 255, 255, .07);
  color: var(--la-text);
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.la-top-btn:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.la-top-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.la-top-btn.la-run {
  border-color: transparent;
  background: linear-gradient(140deg, var(--la-blue-bright), var(--la-blue-deep));
  box-shadow: 0 8px 20px rgba(77, 124, 255, .36);
  color: #fff;
}
.la-top-btn.la-run svg { fill: #fff; stroke: none; }
.la-top-btn.la-run.is-running {
  background: linear-gradient(140deg, #ff8a6a, #d6483d);
  box-shadow: 0 8px 20px rgba(214, 72, 61, .36);
}
.la-top-btn.is-disabled { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------------
   Left column: the horizontal lesson strip becomes a vertical,
   scrollable curriculum. This is the biggest structural difference.
   ------------------------------------------------------------------ */
html:not(.compact) .lessons {
  position: absolute;
  top: 112px; bottom: 56px;
  left: auto; right: auto;
  inset-inline-start: 20px;
  width: 252px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 18px 12px 12px;
  border: 1px solid var(--la-stroke);
  border-radius: var(--la-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), var(--la-shadow-soft);
  overflow: hidden;
}
html:not(.compact) .lessons h2 {
  margin: 0 4px 12px;
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--la-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html:not(.compact) .lessons h2:after {
  content: "";
  flex: 1;
  height: 1px;
  margin-inline-start: 12px;
  background: linear-gradient(90deg, var(--la-stroke-hi), transparent);
}
html:not(.compact) .lesson-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 2px 5px 10px 2px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
}
html:not(.compact) .lesson {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(140, 180, 240, .12);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
html:not(.compact) .lesson:hover { background: rgba(255, 255, 255, .11); border-color: var(--la-stroke-hi); transform: translateX(2px); }
html[dir=rtl]:not(.compact) .lesson:hover { transform: translateX(-2px); }
/* The reference app marks the current lesson with .is-active +
   aria-current="step" (not "true"). Match both states so the selected
   row always reads as a bright, deliberate highlight. */
html:not(.compact) .lesson:is([aria-current="true"], .is-active) {
  border-color: #7aa4ff;
  background: linear-gradient(100deg, rgba(77, 124, 255, .58), rgba(77, 124, 255, .16));
  box-shadow: inset 0 0 0 1px rgba(154, 190, 255, .38), 0 10px 26px rgba(2, 9, 22, .38);
}
html[dir=rtl]:not(.compact) .lesson:is([aria-current="true"], .is-active) { background: linear-gradient(260deg, rgba(77, 124, 255, .58), rgba(77, 124, 255, .16)); }
html:not(.compact) .lesson:is([aria-current="true"], .is-active):before {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px;
  left: auto; right: auto;
  inset-inline-start: -1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--la-cyan);
  box-shadow: 0 0 10px rgba(34, 211, 197, .8);
}
html:not(.compact) .lesson-thumb {
  width: 54px; height: 54px;
  flex: none;
  opacity: 1;
  margin: 0;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  padding: 2px;
  box-shadow: 0 3px 10px rgba(3, 12, 28, .28);
}
html:not(.compact) .lesson-title {
  flex: 1;
  min-width: 0;
  text-align: start;
  white-space: normal;
  font-size: 13px;
  line-height: 1.28;
  letter-spacing: .02em;
  color: var(--la-dim);
}
html:not(.compact) .lesson:is([aria-current="true"], .is-active) .lesson-title {
  /* !important beats the reference .lesson.is-active .lesson-title rule,
     which paints the current lesson in dark navy on the dark console. */
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .045em;
  text-shadow: 0 0 16px rgba(154, 190, 255, .9), 0 1px 2px rgba(2, 9, 22, .65);
}
html:not(.compact) .lesson .chev { flex: none; width: 14px; height: 14px; stroke: var(--la-faint); }
html:not(.compact) .lesson:is([aria-current="true"], .is-active) .chev { stroke: var(--la-cyan); }
html:not(.compact) .lesson-done {
  top: 50%;
  left: auto; right: auto;
  inset-inline-end: 9px;
  width: 17px; height: 17px;
  transform: translateY(-50%) scale(.85);
  background: var(--la-cyan);
  box-shadow: 0 0 0 2px rgba(7, 18, 35, .7);
}
html:not(.compact) .lesson-step { display: none !important; }

/* ------------------------------------------------------------------
   Centre: a bright framed 3D viewport instead of an unbounded canvas.
   ------------------------------------------------------------------ */
html:not(.compact) .stage {
  top: 112px; bottom: 56px;
  left: auto; right: auto;
  inset-inline-start: 284px;
  inset-inline-end: 412px;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(180, 210, 250, .75);
  border-radius: 24px;
  background:
    radial-gradient(85% 78% at 50% 42%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 74%),
    repeating-linear-gradient(0deg, rgba(77, 124, 255, .05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(77, 124, 255, .05) 0 1px, transparent 1px 34px),
    #f7fbff;
  box-shadow: 0 26px 64px rgba(2, 9, 22, .42), inset 0 1px rgba(255, 255, 255, .95);
}
html:not(.compact) .stage:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(77, 124, 255, .10);
}
.la-stage-hud {
  position: absolute;
  top: 14px;
  left: 18px; right: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.la-hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 62%;
  height: 30px;
  padding: 0 12px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(11, 26, 48, .82);
  color: #eaf3ff;
  font-family: var(--cond);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(3, 12, 28, .22);
  backdrop-filter: blur(8px);
}
.la-hud-chip .la-hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--la-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 197, .22); flex: none; }
.la-hud-chip.la-hud-lesson { background: rgba(255, 255, 255, .9); border-color: rgba(160, 190, 230, .8); color: var(--la-ink); letter-spacing: .07em; }
.la-hud-chip.la-hud-lesson .la-hud-dot { background: var(--la-blue); box-shadow: 0 0 0 3px rgba(77, 124, 255, .18); }

html:not(.compact) .view-hint { display: none; }
html:not(.compact) .viewbar {
  bottom: 16px;
  left: 50%; right: auto;
  transform: translateX(-50%);
  z-index: 6;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--la-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 30px rgba(3, 20, 45, .2);
  backdrop-filter: blur(10px);
}
html:not(.compact) .viewbar button:hover { background: rgba(77, 124, 255, .12); }
html:not(.compact) .viewbar button.toggle.is-on { background: rgba(34, 211, 197, .18); }
html:not(.compact) .viewbar button.toggle.is-on svg { stroke: var(--la-blue-deep); }
html:not(.compact) .minimap {
  bottom: 18px;
  left: auto; right: auto;
  inset-inline-start: 16px;
  border-radius: 13px;
  border: 1px solid var(--la-line);
  background: #fff;
  box-shadow: var(--la-shadow-soft);
}
html:not(.compact) .schematic {
  top: 58px;
  left: auto; right: auto;
  inset-inline-start: 18px;
  border-radius: 14px;
  border: 1px solid var(--la-line);
  background: #fff;
  box-shadow: var(--la-shadow);
}
html:not(.compact) .callout {
  border: 1px solid var(--la-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(10, 30, 60, .16);
}
html:not(.compact) .callout h3 { color: var(--la-ink); }
html:not(.compact) .callout p { color: var(--la-ink-2); }
html:not(.compact) .inspector {
  border-radius: 16px;
  border: 1px solid var(--la-line);
  background: #fff;
  box-shadow: var(--la-shadow);
}

/* ------------------------------------------------------------------
   Right column: white lesson info + dark sketch editor, stacked.
   ------------------------------------------------------------------ */
html:not(.compact) .info-card {
  top: 112px; bottom: auto;
  left: auto; right: auto;
  inset-inline-end: 20px;
  width: 372px;
  height: 404px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
html:not(.compact) .info-card.is-expanded { top: 112px; height: calc(100% - 168px); z-index: 9; }
html:not(.compact) .tabs {
  flex: none;
  height: auto;
  min-height: 58px;
  align-items: center;
  gap: 4px;
  margin: 10px 12px 0;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--la-line-soft);
  overflow: hidden;
}
html:not(.compact) .tabs button {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  color: var(--la-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .2s, color .2s, box-shadow .2s;
}
html:not(.compact) .tabs button:hover { color: var(--la-blue-deep); }
html:not(.compact) .tabs button.is-active {
  color: #fff;
  background: linear-gradient(140deg, var(--la-blue), var(--la-blue-deep));
  box-shadow: 0 4px 12px rgba(77, 124, 255, .32);
}
html:not(.compact) .tabs button:after,
html:not(.compact) .tabs button.is-active:after { display: none; }
html:not(.compact) .info-body {
  position: static;
  flex: 1;
  min-height: 0;
  margin: 4px 12px 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
html:not(.compact) .info-content {
  height: 100%;
  padding: 4px 10px 16px 2px;
  scrollbar-color: rgba(77, 124, 255, .35) transparent;
}
html:not(.compact) .info-content h2 {
  font-size: 23px;
  line-height: 28px;
  letter-spacing: .035em;
  color: var(--la-ink);
}
html:not(.compact) .info-content .sub { color: var(--la-ink-2); }
html:not(.compact) .info-content code,
html:not(.compact) .steps code {
  color: var(--la-blue-deep);
  background: rgba(77, 124, 255, .1);
}
html:not(.compact) .steps li { color: var(--la-ink-2); }
html:not(.compact) .steps li:before { border-color: var(--la-line); background: var(--la-snow); color: var(--la-blue-deep); }
html:not(.compact) .spec-grid div { border-color: var(--la-line); background: var(--la-snow); }
html:not(.compact) .spec-grid dt { color: var(--la-ink-3); }
html:not(.compact) .spec-grid dd { color: var(--la-ink); }
html:not(.compact) .expand {
  top: 74px;
  left: auto; right: auto;
  inset-inline-end: 22px;
  z-index: 3;
  border: 1px solid var(--la-line);
  border-radius: 8px;
  background: var(--la-snow);
}
html:not(.compact) .expand svg { stroke: var(--la-ink-2); }

html:not(.compact) .code-card {
  top: 530px; bottom: 56px;
  left: auto; right: auto;
  inset-inline-end: 20px;
  width: 372px;
  height: auto;
  z-index: 3;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html:not(.compact) .code-card.is-expanded { top: 112px; bottom: auto; height: calc(100% - 168px); z-index: 9; }
html:not(.compact) .code-card header {
  flex: none;
  height: 52px;
  padding-inline-start: 4px;
  border-bottom: 1px solid var(--la-line-soft);
}
html:not(.compact) .code-card h2 { font-size: 13.5px; letter-spacing: .13em; color: var(--la-ink); }
html:not(.compact) .code-actions { gap: 6px; }
html:not(.compact) .btn-ghost, html:not(.compact) .btn-run { border-radius: 9px; }
html:not(.compact) .code-wrap {
  flex: 1;
  min-height: 0;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
}
html:not(.compact) .code { border-radius: 12px; font-size: 12.5px; }
html:not(.compact) .console { border-radius: 0 0 12px 12px; }

/* ------------------------------------------------------------------
   Flyout panels become dark glass dropdowns under the header.
   ------------------------------------------------------------------ */
html:not(.compact) .flyout,
html:not(.compact) .flyout.beside-open {
  top: 112px !important;
  bottom: auto;
  left: auto; right: auto;
  inset-inline-start: 284px;
  width: 348px;
  max-height: calc(100% - 190px);
  padding: 16px 14px 14px;
  border: 1px solid var(--la-stroke-hi);
  border-radius: 18px;
  background: rgba(9, 22, 42, .97);
  color: var(--la-text);
  box-shadow: 0 30px 76px rgba(0, 0, 0, .55);
  backdrop-filter: blur(18px);
  overflow: auto;
}
html:not(.compact) .flyout header { border-bottom-color: var(--la-stroke); }
html:not(.compact) .flyout h2 { color: #fff; }
html:not(.compact) .flyout header span { color: var(--la-dim); }
html:not(.compact) .fly-list button, html:not(.compact) .fly-list label { color: var(--la-text); }
html:not(.compact) .fly-list button:hover, html:not(.compact) .fly-list label:hover { background: rgba(255, 255, 255, .08); }
html:not(.compact) .fly-list button.is-current { background: rgba(77, 124, 255, .22); }
html:not(.compact) .fly-num { border-color: var(--la-stroke-hi); background: rgba(255, 255, 255, .07); color: #fff; }
html:not(.compact) .fly-text b { color: #fff; }
html:not(.compact) .fly-text small { color: var(--la-dim); }
html:not(.compact) .fly-reset { border-color: rgba(255, 138, 106, .45); color: #ff9b82; }
html:not(.compact) .fly-reset:hover { background: rgba(255, 138, 106, .12); }
html:not(.compact) .fly-lang select { border-color: var(--la-stroke-hi); background-color: #122a49; color: #fff; }

/* ------------------------------------------------------------------
   Bottom status bar (the reference hides its footer on desktop).
   ------------------------------------------------------------------ */
html:not(.compact) .app-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  padding: 0 28px;
  z-index: 2;
  border-top: 1px solid var(--la-stroke);
  background: rgba(5, 14, 28, .55);
  color: var(--la-faint);
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: .08em;
}
/* The footer carries only our own brand; the third-party credit link is gone. */
.credit-side { display: none !important; }
.la-brand-foot {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--la-dim);
  font-weight: 600;
  letter-spacing: .1em;
}
.la-footer-hint {
  flex: 1;
  text-align: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--la-faint);
}
.la-footer-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  border: 1px solid var(--la-stroke-hi);
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--la-dim);
}

/* The mobile language pill belongs to the compact app bar only. */
html:not(.compact) .la-lang-btn { display: none; }

/* ------------------------------------------------------------------
   Narrower desktop windows: give the 3D viewport more room.
   ------------------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 1180px) {
  html:not(.compact) .sidebar { padding-inline-start: 250px; padding-inline-end: 510px; }
  html:not(.compact) .side-label { font-size: 12px; }
  html:not(.compact) .side-nav a { padding: 0 9px; gap: 6px; }
  html:not(.compact) .status { width: 288px; }
  html:not(.compact) .la-top-actions { inset-inline-end: 320px; }
  html:not(.compact) .la-top-btn { padding: 0 10px; font-size: 11px; }
  html:not(.compact) .lessons { width: 216px; }
  html:not(.compact) .stage { inset-inline-start: 242px; inset-inline-end: 336px; }
  html:not(.compact) .info-card, html:not(.compact) .code-card { width: 312px; }
  html:not(.compact) .flyout { inset-inline-start: 242px; width: 310px; }
}

/* ==================================================================
   MOBILE-ONLY layout, navigation and interactions.

   This is a separate component system from the desktop workbench:
   sticky app bar, single-column card stream, horizontally scrollable
   lesson rail, and a fixed labelled bottom Tabbar. It shares the dark
   console shell + bright working surfaces from upgrade.css.
   ================================================================== */

.la-tabbar { display: none; }

@media (max-width: 600px) {
  /* The original bottom icon rail is replaced by our labelled Tabbar.
     It stays in the DOM so the original navigation logic still receives clicks. */
  html.compact .sidebar { display: none !important; }
  html.compact .la-top-actions { display: none !important; }
  html.compact .la-stage-hud { display: none !important; }

  html.compact .artboard {
    width: auto;
    height: auto;
    min-height: 100dvh;
    padding: 0 12px calc(96px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "status" "stage" "lessons" "info" "code" "foot";
    align-items: stretch;
    gap: 12px;
    transform: none;
    position: relative;
    overflow: visible;
    color: var(--la-text);
    background-color: var(--la-bg-0);
    background-image:
      radial-gradient(100% 34% at 50% 0%, rgba(77, 124, 255, .20), rgba(77, 124, 255, 0) 76%),
      radial-gradient(80% 40% at 100% 88%, rgba(34, 211, 197, .10), transparent 72%),
      repeating-linear-gradient(0deg, rgba(140, 180, 240, .03) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(90deg, rgba(140, 180, 240, .03) 0 1px, transparent 1px 30px),
      linear-gradient(180deg, #0c1c34, #071223 58%, #0a1930);
  }

  /* ---------- Mobile app bar ---------- */
  html.compact .brand {
    grid-area: brand;
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    margin: 0 -12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-top) * .25);
    border-bottom: 1px solid var(--la-stroke);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(115deg, #0d203c 0%, #0a1930 55%, #081426 100%);
    box-shadow: 0 10px 26px rgba(2, 9, 22, .38);
  }
  html.compact .brand-logo {
    width: 40px; height: 40px;
    flex: none;
    filter: drop-shadow(0 3px 10px rgba(77, 124, 255, .45));
  }
  html.compact .brand-logo .la-mark-led { filter: drop-shadow(0 0 4px rgba(34, 211, 197, .85)); }
  html.compact .brand-rule { height: 30px; margin: 0 2px; background: rgba(140, 180, 245, .45); }
  html.compact .brand-text { min-width: 0; flex: 1; }
  html.compact .brand-text h1 {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: .08em;
    color: #ffffff;
    text-shadow: none;
  }
  html.compact .brand-text p {
    display: block;
    margin: 2px 0 0;
    font-size: 10.5px;
    letter-spacing: .13em;
    color: var(--la-dim);
  }
  html.compact .brand-text p i { color: var(--la-cyan); }

  .la-lang-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--la-stroke-hi);
    border-radius: 999px;
    background: rgba(77, 124, 255, .22);
    color: #eaf3ff;
    font-family: var(--cond);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
  }
  .la-lang-btn svg { width: 16px; height: 16px; stroke: #cfe1ff; fill: none; stroke-width: 2; }
  .la-lang-btn:active { transform: scale(.96); }

  /* ---------- Compact progress row ---------- */
  html.compact .status {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  html.compact .progress-card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid var(--la-line);
    background: #ffffff;
    box-shadow: var(--la-shadow-soft);
  }
  html.compact .progress-icon { width: 26px; height: 26px; flex: none; stroke: var(--la-blue); }
  html.compact .progress-body { flex: 1; min-width: 0; }
  html.compact .progress-label { font-size: 11px; letter-spacing: .12em; color: var(--la-ink-3); }
  html.compact .progress-count { font-size: 12px; color: var(--la-blue-deep); }
  html.compact .progress-track { height: 7px; background: var(--la-line); border-radius: 99px; }
  html.compact .progress-fill { background: linear-gradient(90deg, var(--la-blue), var(--la-cyan)); border-radius: 99px; }
  html.compact .clock { font-size: 11px; text-align: right; white-space: nowrap; color: var(--la-dim); }

  /* ---------- 3D stage as the hero ---------- */
  html.compact .stage {
    grid-area: stage;
    height: clamp(268px, 46vh, 430px);
    min-height: 268px;
    border: 1px solid rgba(180, 210, 250, .75);
    border-radius: 20px;
    background:
      radial-gradient(85% 75% at 50% 42%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 72%),
      repeating-linear-gradient(0deg, rgba(77, 124, 255, .055) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(90deg, rgba(77, 124, 255, .055) 0 1px, transparent 1px 26px),
      #f7fbff;
    box-shadow: 0 16px 36px rgba(2, 9, 22, .38), inset 0 1px rgba(255, 255, 255, .9);
    overflow: hidden;
  }
  html.compact .view-hint { display: none; }
  html.compact .viewbar {
    bottom: 9px;
    left: 50%;
    transform: translateX(-50%);
    gap: 2px;
    padding: 4px 6px;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(3, 20, 45, .22);
  }
  html.compact .viewbar button { width: 34px; height: 34px; }
  html.compact .viewbar button svg { width: 19px; height: 19px; }
  html.compact .viewbar-sep { margin: 0 2px; }
  html.compact .minimap { transform: scale(.8); transform-origin: top right; border-radius: 12px; }
  html.compact .schematic { top: 12px; border-radius: 12px; background: #fff; }

  /* ---------- Lesson rail: native horizontal swipe ---------- */
  html.compact .lessons { grid-area: lessons; min-width: 0; }
  html.compact .lessons h2 {
    margin: 0 0 8px 2px;
    font-size: 12.5px;
    letter-spacing: .16em;
    color: var(--la-dim);
  }
  html.compact .lesson-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 10px;
    margin: 0 -2px;
    scrollbar-width: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  html.compact .lesson-list::-webkit-scrollbar { display: none; }
  /* Native horizontal swipe replaces the desktop rail arrows on phones,
     and keeps the next card's title from being covered by a floating button. */
  html.compact .lesson-step { display: none !important; }
  html.compact .lesson {
    flex: 0 0 auto;
    width: min(212px, 62vw);
    height: 82px;
    gap: 8px;
    scroll-snap-align: start;
    border-radius: 14px;
    border: 1px solid var(--la-stroke);
    background: rgba(255, 255, 255, .08);
    box-shadow: var(--la-shadow-soft);
    padding-inline: 10px 12px;
  }
  html.compact .lesson[aria-current="true"] {
    border-color: rgba(122, 164, 255, .65);
    background: linear-gradient(135deg, rgba(77, 124, 255, .34), rgba(77, 124, 255, .10));
    box-shadow: 0 10px 24px rgba(2, 9, 22, .32);
  }
  html.compact .lesson[aria-current="true"]:before {
    content: "";
    position: absolute;
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    top: -1px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--la-blue), var(--la-cyan));
  }
  html.compact .lesson-thumb {
    width: 56px; height: 56px;
    flex: none;
    opacity: 1;
    object-fit: contain;
    border-radius: 11px;
    background: rgba(255, 255, 255, .94);
    padding: 3px;
    box-shadow: 0 3px 10px rgba(2, 9, 22, .3);
  }
  html.compact .lesson-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.25;
    color: var(--la-text);
  }
  /* The reference marks the current lesson with .is-active (and only
     sometimes with aria-current); both must stay readable on dark cards. */
  html.compact .lesson.is-active .lesson-title,
  html.compact .lesson[aria-current="true"] .lesson-title {
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 700;
  }
  html.compact .lesson .chev { flex: none; width: 15px; height: 15px; stroke: var(--la-cyan); }
  html.compact .lesson-done { background: var(--la-cyan); box-shadow: 0 0 0 2px rgba(7, 18, 35, .8); }

  /* ---------- Content cards ---------- */
  html.compact .info-card,
  html.compact .code-card {
    border-radius: 18px;
    border: 1px solid var(--la-line);
    background: #ffffff;
    box-shadow: var(--la-shadow);
  }
  /* One single white card: the reference nests a second bordered panel
     inside .info-card, which reads as two stacked slabs on a dark shell. */
  html.compact .info-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 360px;
    padding: 0;
    overflow: hidden;
  }
  html.compact .info-body {
    position: static;
    flex: 1;
    min-height: 0;
    inset: auto;
    margin: 0 10px 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
  }
  html.compact .expand { display: none; }
  html.compact .tabs {
    gap: 4px;
    padding: 4px;
    margin: 8px 10px 0;
    border: 0;
    border-radius: 12px;
    background: var(--la-line-soft);
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.compact .tabs::-webkit-scrollbar { display: none; }
  html.compact .tabs button {
    flex: 1 0 auto;
    height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--la-ink-3);
    white-space: nowrap;
  }
  html.compact .tabs button.is-active {
    color: #fff;
    background: linear-gradient(140deg, var(--la-blue), var(--la-blue-deep));
    box-shadow: 0 4px 12px rgba(77, 124, 255, .32);
  }
  html.compact .tabs button:after,
  html.compact .tabs button.is-active:after { display: none; }
  html.compact .info-content { height: 100%; padding: 6px 10px 14px 2px; }
  html.compact .info-content h2 { color: var(--la-ink); }
  html.compact .code-card header { padding-inline-start: 6px; border-bottom: 1px solid var(--la-line-soft); }
  html.compact .code-card h2 { font-size: 14px; letter-spacing: .1em; color: var(--la-ink); }
  html.compact .code-wrap { font-size: 12px; margin: 8px 4px 4px; border-radius: 12px; }
  html.compact .code { border-radius: 12px; }
  html.compact .app-foot {
    padding: 4px 2px 0;
    border-top: 1px solid var(--la-stroke);
    color: var(--la-faint);
  }
  html.compact .la-brand-foot {
    border: 0;
    background: transparent;
    color: var(--la-dim);
    font-size: 11px;
    letter-spacing: .08em;
  }
  html.compact .la-footer-hint { display: none; }

  /* ---------- Flyout becomes a bottom sheet above the Tabbar ---------- */
  html.compact .flyout,
  html.compact .flyout.beside-open {
    left: 10px;
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    top: auto !important;
    width: auto;
    max-width: 560px;
    max-height: min(66vh, 560px);
    border: 1px solid var(--la-stroke-hi);
    border-radius: 20px;
    background: rgba(9, 22, 42, .97);
    color: var(--la-text);
    margin: 0 auto;
    transform: translateY(14px);
  }
  html.compact .flyout.is-open { transform: none; }
  html.compact .flyout h2 { color: #fff; }
  html.compact .flyout header { border-bottom-color: var(--la-stroke); }
  html.compact .flyout header span { color: var(--la-dim); }
  html.compact .fly-list button, html.compact .fly-list label { color: var(--la-text); }
  html.compact .fly-list button:hover, html.compact .fly-list label:hover { background: rgba(255, 255, 255, .08); }
  html.compact .fly-list button.is-current { background: rgba(77, 124, 255, .22); }
  html.compact .fly-num { border-color: var(--la-stroke-hi); background: rgba(255, 255, 255, .07); color: #fff; }
  html.compact .fly-text b { color: #fff; }
  html.compact .fly-text small { color: var(--la-dim); }

  /* ---------- Fixed labelled bottom Tabbar ---------- */
  .la-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--la-stroke);
    background: linear-gradient(180deg, rgba(13, 31, 57, .97), rgba(6, 17, 33, .99));
    box-shadow: 0 -10px 28px rgba(2, 9, 22, .42);
    backdrop-filter: blur(16px);
  }
  .la-tabbar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    padding: 4px 2px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--la-dim);
    cursor: pointer;
    transition: color .2s, background .2s, transform .2s;
  }
  .la-tabbar button:active { transform: scale(.94); }
  .la-tabbar .la-tab-ico { display: grid; place-items: center; height: 24px; }
  .la-tabbar .la-tab-ico svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .la-tabbar .la-tab-ico svg .fill,
  .la-tabbar .la-tab-ico svg.fill { fill: currentColor; stroke: none; }
  .la-tabbar .la-tab-label {
    font-family: var(--cond);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .la-tabbar button.is-active {
    color: #ffffff;
    background: linear-gradient(140deg, rgba(77, 124, 255, .38), rgba(77, 124, 255, .12));
    box-shadow: inset 0 0 0 1px rgba(122, 164, 255, .28);
  }
  .la-tabbar button.is-active:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--la-cyan);
    box-shadow: 0 0 12px rgba(34, 211, 197, .9);
  }
  .la-tabbar button.is-running .la-tab-ico { color: var(--la-amber); }
  .la-progress-line { top: 0; }
}

@media (max-width: 359px) {
  html.compact .brand-text p { display: none; }
  html.compact .clock { display: none; }
  html.compact .viewbar button { width: 30px; height: 32px; }
  html.compact .lesson { width: min(190px, 66vw); }
  html.compact .lesson-thumb { width: 48px; height: 48px; }
  html.compact .lesson-title { font-size: 12.5px; }
  .la-tabbar .la-tab-label { font-size: 10px; }
  .la-tabbar .la-tab-ico svg { width: 20px; height: 20px; }
}

/* ==================================================================
   Account boundary + PRO paywall — shared design tokens, separate
   desktop/mobile presentations (the same split as layout.css/mobile.css).

   The account trigger is mounted inside .brand: on desktop that is the
   top-left brand header, on phones it is the sticky app bar. It is NOT
   mounted in .la-top-actions, which compact layouts hide entirely.
   ================================================================== */

/* ------------------------------------------------------------------
   Header trigger
   ------------------------------------------------------------------ */
.acc-boundary {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-inline-start: 12px;
  z-index: 9;
}
.acc-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--la-stroke-hi);
  border-radius: 999px;
  background: rgba(77, 124, 255, .16);
  color: var(--la-text);
  font-family: var(--cond), "Barlow Semi Condensed", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.acc-account:hover {
  background: rgba(77, 124, 255, .28);
  border-color: rgba(122, 164, 255, .72);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(2, 9, 22, .32);
}
.acc-account:active { transform: scale(.97); }
html[dir="rtl"] .acc-account { padding: 0 8px 0 14px; }
.acc-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--la-blue-bright), var(--la-blue-deep));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(7, 18, 35, .55);
}
.acc-boundary[data-state="guest"] .acc-avatar {
  background: rgba(255, 255, 255, .10);
  color: var(--la-dim);
}
/* A visible person glyph: an empty circle reads as a broken control on
   phones, where the label is hidden and this is the only sign-in entry. */
.acc-boundary[data-state="guest"] .acc-avatar::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.acc-pro-pill {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 6px;
  background: linear-gradient(120deg, var(--la-amber), #ff9d2f);
  color: #241300;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  box-shadow: 0 3px 10px rgba(255, 180, 84, .38);
}
.acc-pro-pill[hidden] { display: none; }

/* ------------------------------------------------------------------
   PRO badge on lesson cards (lessons 3..16)
   ------------------------------------------------------------------ */
#lesson-list .lesson .acc-pro-badge {
  position: absolute;
  top: 5px;
  inset-inline-end: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 180, 84, .55);
  background: linear-gradient(120deg, rgba(255, 180, 84, .92), rgba(255, 157, 47, .92));
  color: #2a1600;
  font-family: var(--cond), "Barlow Semi Condensed", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 3px 9px rgba(2, 9, 22, .34);
}
#lesson-list .lesson.acc-unlocked .acc-pro-badge {
  border-color: rgba(34, 211, 197, .62);
  background: linear-gradient(120deg, rgba(34, 211, 197, .92), rgba(47, 168, 255, .92));
  color: #041d22;
  box-shadow: 0 3px 9px rgba(34, 211, 197, .3);
}
#lesson-list .lesson.acc-locked:not(.acc-unlocked) .lesson-thumb { filter: saturate(.62) brightness(.88); }
#lesson-list .lesson.acc-locked:not(.acc-unlocked) .chev { opacity: .55; }
#lesson-list .lesson.acc-locked:not(.acc-unlocked) { cursor: pointer; }

/* ------------------------------------------------------------------
   Overlay / modal / account sheet
   ------------------------------------------------------------------ */
.acc-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 10, 24, .74);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  animation: acc-fade .18s ease-out both;
}
@keyframes acc-fade { from { opacity: 0; } to { opacity: 1; } }

.acc-modal,
.acc-sheet {
  position: relative;
  width: min(420px, 100%);
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  padding: 28px 26px 24px;
  border: 1px solid rgba(140, 180, 240, .32);
  border-radius: 22px;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(77, 124, 255, .22), transparent 70%),
    linear-gradient(165deg, #0d203c, #081426 70%);
  box-shadow: 0 30px 90px rgba(0, 5, 16, .66), inset 0 1px rgba(255, 255, 255, .09);
  color: var(--la-text);
  animation: acc-rise .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes acc-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.acc-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--la-stroke);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--la-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.acc-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.acc-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 180, 84, .5);
  border-radius: 999px;
  background: rgba(255, 180, 84, .12);
  color: var(--la-amber);
  font-family: var(--cond), "Barlow Semi Condensed", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.acc-modal h2,
.acc-sheet h2 {
  margin: 0 30px 10px 0;
  font-family: var(--cond), "Barlow Semi Condensed", system-ui, sans-serif;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}
html[dir="rtl"] .acc-modal h2,
html[dir="rtl"] .acc-sheet h2 { margin: 0 0 10px 30px; }
.acc-lead,
.acc-sheet-email,
.acc-sheet-state {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--la-dim);
}
.acc-benefits {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.acc-benefits li {
  position: relative;
  padding-inline-start: 24px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--la-text);
}
.acc-benefits li:before {
  content: "";
  position: absolute;
  top: 5px;
  inset-inline-start: 3px;
  width: 9px;
  height: 5px;
  border-inline-start: 2px solid var(--la-cyan);
  border-bottom: 2px solid var(--la-cyan);
  transform: rotate(-45deg);
}

.acc-field { display: grid; gap: 6px; margin-bottom: 14px; }
.acc-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--la-dim);
}
.acc-field[hidden] { display: none; }
.acc-field input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 13px;
  border: 1px solid var(--la-stroke-hi);
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.acc-field input:focus {
  border-color: var(--la-blue-bright);
  box-shadow: 0 0 0 3px rgba(77, 124, 255, .24);
}
.acc-field input::placeholder { color: var(--la-faint); }

.acc-primary,
.acc-ghost,
.acc-google {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: var(--cond), "Barlow Semi Condensed", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, opacity .18s;
}
.acc-primary {
  border: 0;
  background: linear-gradient(140deg, var(--la-blue-bright), var(--la-blue-deep));
  color: #fff;
  box-shadow: 0 12px 28px rgba(77, 124, 255, .38);
}
.acc-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(77, 124, 255, .5); }
.acc-google {
  border: 1px solid var(--la-stroke-hi);
  background: rgba(255, 255, 255, .08);
  color: var(--la-text);
}
.acc-google:hover { background: rgba(255, 255, 255, .15); }
.acc-ghost {
  border: 1px solid var(--la-stroke);
  background: transparent;
  color: var(--la-dim);
}
.acc-ghost:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.acc-primary:disabled,
.acc-ghost:disabled,
.acc-google:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }

.acc-note {
  min-height: 18px;
  margin: 12px 2px 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--la-amber);
  overflow-wrap: anywhere;
}
.acc-sheet .acc-sheet-state { color: var(--la-cyan); font-weight: 700; letter-spacing: .08em; }
.acc-sheet .acc-signout { margin-top: 14px; }

/* Payment confirmation */
.acc-checking .acc-sheet {
  width: min(340px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 30px 24px;
}
.acc-checking .acc-sheet p { margin: 0; font-size: 14px; color: var(--la-dim); }
.acc-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(140, 180, 240, .25);
  border-top-color: var(--la-cyan);
  border-radius: 50%;
  animation: acc-spin .8s linear infinite;
}
@keyframes acc-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
   Compact layout: bottom sheet instead of centred dialog, and an
   icon-only account trigger so the sticky app bar is not crowded.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  html.compact .acc-boundary { margin-inline-start: 4px; }
  html.compact .acc-account {
    height: 36px;
    padding: 0 7px;
    gap: 0;
    border-radius: 999px;
  }
  html.compact .acc-account-label { display: none; }
  html.compact .acc-avatar { width: 24px; height: 24px; }
  html.compact .acc-pro-pill {
    position: absolute;
    top: -4px;
    inset-inline-end: -3px;
    height: 15px;
    padding: 0 4px;
    font-size: 8px;
    letter-spacing: .06em;
  }
  html.compact .acc-boundary { position: relative; }

  html.compact .acc-overlay {
    align-items: flex-end;
    padding: 0;
  }
  html.compact .acc-modal,
  html.compact .acc-sheet {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    animation-name: acc-slide;
  }
  @keyframes acc-slide { from { opacity: .4; transform: translateY(100%); } to { opacity: 1; transform: none; } }
  html.compact .acc-checking .acc-sheet { border-radius: 22px 22px 0 0; width: 100%; }
  html.compact .acc-modal h2 { font-size: 22px; }
  #lesson-list .lesson .acc-pro-badge { top: 4px; inset-inline-end: 6px; font-size: 9px; }
}

/* Narrow desktop windows: keep the trigger compact next to the brand. */
@media (min-width: 601px) and (max-width: 900px) {
  html:not(.compact) .acc-account-label { display: none; }
  html:not(.compact) .acc-account { padding: 0 8px; }
  html:not(.compact) .acc-boundary { margin-inline-start: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-overlay, .acc-modal, .acc-sheet { animation: none; }
  .acc-spinner { animation-duration: 2s; }
}

/* Clerk Protect renders its Turnstile widget here, inside the auth dialog,
   so a challenged visitor sees the check next to the form instead of a
   floating card at the bottom of the page. Most visitors never see it:
   the check runs invisibly and only asks for a tap when Clerk needs one. */
.acc-protect-host {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px 0 10px;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
}
.acc-protect-host:empty { display: none; }