.gpx{--g:#107c41;--g-dark:#185c37;--g-tint:#eaf5ee;--g-line:#cfe0d5;--ink:#16241c;--muted:#5d6f63;--grid:#d4dcd7;--bar:#f3f3f3;--th:#107c41;--sans:"DM Sans Variable","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,"Cascadia Code","JetBrains Mono","SF Mono",Consolas,Menlo,monospace;--lang:#107c41;color:var(--ink);counter-reset:sec;font-size:17px;line-height:1.72;max-width:860px}.gpx-code{--g:#1f74bf;--g-dark:#155a98;--g-tint:#eef5fc;--g-line:#d0e0f0;--ink:#14223a;--muted:#5d7088;--grid:#d9e2ec;--th:#16202f;--lang:#1f74bf}.gpx-code:has(.gp-chip-html){--g:#d4451b;--g-dark:#a83514;--g-tint:#fdf0ec;--g-line:#f1cfc4;--lang:#e4572e}.gpx-code:has(.gp-chip-css){--g:#2559dc;--g-dark:#1b44ad;--g-tint:#edf2fe;--g-line:#cbd8f6;--lang:#2965f1}.gpx-code:has(.gp-chip-js){--g:#8f6b00;--g-dark:#6c5000;--g-tint:#fff8dc;--g-line:#ecdb94;--lang:#e5b800}.gpx-code:has(.gp-chip-java){--g:#c2500a;--g-dark:#963d06;--g-tint:#fff1e6;--g-line:#f2d2b8;--lang:#e76f00}.gpx-code:has(.gp-chip-projects){--g:#11803f;--g-dark:#0c6330;--g-tint:#e9f7ef;--g-line:#bfe5cf;--lang:#1d9b68}.gpx h1{display:none}.gpx .lesson-part>:first-child,.gpx>:first-child{margin-top:0}.gpx p{margin:0 0 1.05em}.gpx strong{color:var(--ink);font-weight:700}.gpx a{color:var(--g-dark);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--g) 35%,transparent);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .15s}.gpx a:hover{text-decoration-color:var(--g)}.gpx code{background:var(--g-tint);border:1px solid var(--g-line);border-radius:3px;color:var(--g-dark);font:.86em/1 var(--mono);padding:2px 6px}.gpx code.fx{background:#fff;border-color:var(--g);border-bottom-width:2px;color:var(--g-dark);font-weight:600}.gpx .gpd b,.gpx .gpd strong{color:inherit}.gpx hr{border:0;border-top:2px dotted var(--g-line);margin:2.4em 0}.gpx h2{align-items:baseline;border-bottom:1px solid var(--g-line);color:var(--ink);counter-increment:sec;display:flex;font:800 25px/1.2 var(--sans);gap:.65em;letter-spacing:-.02em;margin:2.3em 0 .65em;padding-bottom:.4em}.gpx h2:before{background:var(--g);border-radius:2px;color:#fff;content:counter(sec,decimal-leading-zero);flex:none;font:600 12px/1 var(--mono);letter-spacing:.02em;padding:6px 8px;position:relative;top:-3px}.gpx-code h2:before{background:none;border:1px solid var(--g);border-radius:3px;color:var(--g-dark)}.gpx h3{border-left:3px solid var(--g);color:var(--ink);font:700 19px/1.3 var(--sans);letter-spacing:-.01em;margin:1.8em 0 .5em;padding-left:.7em}.gpx h2.gp-check,.gpx h2.gp-step,.gpx h2.gp-try,.gpx h2.gp-turn{counter-increment:none}.gpx h2.gp-try:before{content:"Practice"}.gpx h2.gp-check:before,.gpx h2.gp-try:before{letter-spacing:.06em;text-transform:uppercase;font-size:11px}.gpx h2.gp-check:before{background:var(--ink);content:"Check"}.gpx h2.gp-turn:before{background:#d9a000;color:#2b2000;content:"Your turn";letter-spacing:.06em;text-transform:uppercase;font-size:11px}.gpx-code h2.gp-check:before,.gpx-code h2.gp-try:before,.gpx-code h2.gp-turn:before{border:0}.gpx-code h2.gp-try:before{background:var(--g);color:#fff}.gpx-code h2.gp-check:before{background:var(--ink);color:#fff}.gpx h2.gp-step:before{content:none}.gpx .gp-step-n{align-items:center;background:var(--g);border-radius:50%;color:#fff;display:inline-flex;flex:none;font:700 14px/1 var(--mono);height:30px;justify-content:center;position:relative;top:-2px;width:30px}.gpx h2.gp-step{gap:.55em}.gpx ol,.gpx ul{margin:0 0 1.15em;padding-left:1.5em}.gpx ul{list-style:none}.gpx ul>li{position:relative}.gpx ul>li:before{background:var(--g);content:"";height:6px;left:-1.1em;position:absolute;top:.72em;width:6px}.gpx-code ul>li:before{background:none;border-right:2px solid var(--g);border-top:2px solid var(--g);height:6px;transform:rotate(45deg);width:6px;top:.68em}.gpx ol{counter-reset:li;list-style:none}.gpx ol>li{counter-increment:li;position:relative}.gpx ol>li:before{color:var(--g-dark);content:counter(li);font:700 .82em/1 var(--mono);left:-1.9em;position:absolute;text-align:right;top:.5em;width:1.4em}.gpx li{margin:.35em 0}.gpx h2.gp-try+ol{margin-left:0;padding-left:0}.gpx h2.gp-try+ol>li{background:#fff;border:1px solid var(--g-line);border-left:3px solid var(--g);border-radius:0 4px 4px 0;margin:.55em 0;padding:10px 14px 10px 46px;transition:transform .15s,box-shadow .15s}.gpx h2.gp-try+ol>li:before{left:14px;top:.78em}.gpx h2.gp-try+ol>li:hover{box-shadow:0 6px 16px -10px rgba(0,0,0,.3);transform:translateX(2px)}.gpx p.gp-task{background:#fff;border:1px solid var(--g-line);border-left:3px solid var(--g);border-radius:0 4px 4px 0;margin:.6em 0;padding:10px 14px;transition:transform .15s,box-shadow .15s}.gpx p.gp-task:hover{box-shadow:0 6px 16px -10px rgba(0,0,0,.3);transform:translateX(2px)}.gpx .gp-intro{background:#fff;border-radius:3px 3px 6px 6px;border:1px solid var(--g-line);border-top:3px solid var(--g);margin:0 0 2em;padding:14px 18px 16px}.gpx .gp-chips{display:flex;flex-wrap:wrap;gap:6px}.gpx .gp-chip{background:var(--bar);border:1px solid #dcdcdc;border-radius:3px;color:#3d3d3d;font:600 12px/1 var(--sans);letter-spacing:.01em;padding:6px 9px}.gpx .gp-chip-css,.gpx .gp-chip-excel,.gpx .gp-chip-html,.gpx .gp-chip-java,.gpx .gp-chip-js,.gpx .gp-chip-projects{background:var(--g);border-color:var(--g);color:#fff}.gpx .gp-chip-js{color:#241b00;background:var(--lang);border-color:var(--lang)}.gpx .gp-chip-live{align-items:center;background:#fff;border-color:var(--g);color:var(--g-dark);display:inline-flex;gap:7px}.gpx .gp-chip-live:before{animation:gpx-pulse 2.2s ease-in-out infinite;background:var(--g);border-radius:50%;content:"";height:7px;width:7px}@keyframes gpx-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 45%,transparent)}50%{box-shadow:0 0 0 5px transparent}}.gpx .gp-toc{margin-top:14px}.gpx .gp-toc-title{color:var(--muted);font:700 11px/1 var(--sans);letter-spacing:.1em;margin:0 0 7px;text-transform:uppercase}.gpx .gp-toc ol{border:1px solid var(--grid);border-radius:3px;counter-reset:row;list-style:none;margin:0;overflow:hidden;padding:0}.gpx .gp-toc li{border-top:1px solid var(--grid);counter-increment:row;font-size:15px;line-height:1.4;margin:0;padding:7px 14px 7px 54px;position:relative;transition:background .15s}.gpx .gp-toc li:first-child{border-top:0}.gpx .gp-toc li:before{background:var(--bar);border-right:1px solid var(--grid);bottom:0;color:var(--muted);content:counter(row);display:flex;font:12px/1 var(--mono);justify-content:center;left:0;align-items:center;position:absolute;top:0;width:40px}.gpx .gp-note,.gpx .gp-toc li:hover{background:var(--g-tint)}.gpx .gp-note{border:1px solid var(--g-line);border-left:4px solid var(--g);border-radius:0 4px 4px 0;margin:1.6em 0;padding:12px 18px 6px}.gpx .gp-note>:last-child{margin-bottom:.7em}.gpx .gp-note-label{color:var(--g-dark);font:800 11px/1 var(--sans);letter-spacing:.11em;margin:0 0 .7em;text-transform:uppercase}.gpx .gp-note-warn{--g:#c98300;--g-dark:#8a5a00;--g-tint:#fff7e2;--g-line:#f1dca4}.gpx .gp-note-practise{background:var(--g);border-color:var(--g-dark);border-left-color:var(--g-dark);color:#fff;padding-top:14px}.gpx .gp-note-practise .gp-note-label{color:rgba(255,255,255,.78)}.gpx .gp-note-practise a,.gpx .gp-note-practise strong{color:#fff}.gpx .gp-note-practise a{text-decoration-color:rgba(255,255,255,.6)}.gpx .gp-note-practise a:hover{text-decoration-color:#fff}.gpx-code:has(.gp-chip-js) .gp-note-practise{color:#241b00}.gpx-code:has(.gp-chip-js) .gp-note-practise .gp-note-label{color:rgba(36,27,0,.7)}.gpx-code:has(.gp-chip-js) .gp-note-practise a,.gpx-code:has(.gp-chip-js) .gp-note-practise strong{color:#241b00}.gpx-code:has(.gp-chip-js) .gp-note-practise{background:var(--lang);border-color:#b58f00}.gpx .gp-note code{background:rgba(255,255,255,.7)}.gpx .gp-note-practise code{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:inherit}.gpx .gp-code{--tab:var(--lang);background:#1e1e1e;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 14px 28px -18px rgba(0,0,0,.6);margin:1.5em 0;overflow:hidden;position:relative}.gpx .gp-code-html{--tab:#e4572e}.gpx .gp-code-css{--tab:#2965f1}.gpx .gp-code-js{--tab:#f0c800}.gpx .gp-code-java{--tab:#e76f00}.gpx .gp-code-text{--tab:#7d8590}.gpx .gp-output{--tab:#3fb950}.gpx .gp-code-bar{background:#252526;border-bottom:1px solid #151515;color:#cfcfcf;font:12.5px/1 var(--mono);gap:12px;padding:0 10px 0 0}.gpx .gp-code-bar,.gpx .gp-code-file{align-items:center;display:flex;height:36px}.gpx .gp-code-file{background:#1e1e1e;border-right:1px solid #151515;border-top:2px solid var(--tab);padding:0 16px}.gpx .gp-code-lang{color:#858585;font-size:10.5px;letter-spacing:.1em;margin-left:auto;text-transform:uppercase}.gpx .gp-code pre{background:none;border-radius:0;color:#d4d4d4;font:13.5px/1.7 var(--mono);margin:0;overflow-x:auto;padding:14px 18px 16px;tab-size:2;white-space:pre}.gpx .gp-code pre code{background:none;border:0;color:inherit;font:inherit;padding:0}.gpx .gp-code-text .gp-code-bar{display:none}.gpx .gp-copy{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:4px;color:#cfcfcf;cursor:pointer;font:600 11.5px/1 var(--sans);margin-left:auto;opacity:.75;padding:6px 10px;transition:background .15s,opacity .15s,color .15s}.gpx .gp-code-lang+.gp-copy{margin-left:0}.gpx .gp-code:hover .gp-copy,.gpx .gp-copy:focus-visible{opacity:1}.gpx .gp-copy:hover{background:rgba(255,255,255,.16);color:#fff}.gpx .gp-copy.done{background:#2ea043;border-color:#2ea043;color:#fff;opacity:1}.gpx .gp-code-text .gp-copy{position:absolute;right:8px;top:8px}.gpx .tk-com{color:#6a9955;font-style:italic}.gpx .tk-str{color:#ce9178}.gpx .tk-num{color:#b5cea8}.gpx .tk-kw{color:#c586c0}.gpx .tk-fn{color:#dcdcaa}.gpx .tk-prop{color:#9cdcfe}.gpx .tk-tag{color:#569cd6}.gpx .tk-attr{color:#9cdcfe}.gpx .tk-type{color:#4ec9b0}.gpx .tk-ref{color:#9cdcfe}.gpx .tk-sel{color:#d7ba7d}.gpx .tk-val{color:#ce9178}.gpx .gp-output{background:#0d1117}.gpx .gp-output .gp-code-bar{background:#161b22;border-bottom-color:#0d1117;color:#7ee787;letter-spacing:.08em;text-transform:uppercase}.gpx .gp-output .gp-code-file{background:#0d1117;border-top-color:#3fb950}.gpx .gp-output pre{color:#c9d1d9}.gpx .gp-code-formula{background:#fff;border:1px solid #bfc9c3;border-radius:3px;box-shadow:none}.gpx .gp-code-formula .gp-code-bar{display:none}.gpx .gp-code-formula pre{background:#fff;color:#1d2b23;font:14.5px/1.65 var(--mono);padding:11px 16px 11px 62px;position:relative}.gpx .gp-code-formula pre:before{align-items:center;background:var(--bar);border-right:1px solid #cfd6d2;bottom:0;color:#555;content:"fx";display:flex;font:italic 600 15px Georgia,Times New Roman,serif;justify-content:center;left:0;position:absolute;top:0;width:46px}.gpx .gp-code-formula .tk-fn{color:var(--g);font-weight:700}.gpx .gp-code-formula .tk-ref{color:#0f6cbd}.gpx .gp-code-formula .tk-str{color:#a31515}.gpx .gp-code-formula .tk-num{color:#7a3e9d}.gpx .gp-code-formula .tk-attr{color:#555}.gpx .gp-code-formula .gp-copy{background:var(--bar);border-color:#cfd6d2;color:#444;position:absolute;right:8px;top:8px}.gpx .gp-code-formula .gp-copy:hover{background:#e6ece8;color:#111}.gpx table.gp-table{border:1px solid var(--grid);border-collapse:separate;border-radius:4px;border-spacing:0;display:block;font-size:15px;line-height:1.5;margin:1.5em 0;max-width:100%;overflow-x:auto;width:max-content}.gpx table.gp-table th{background:var(--th);border:0;border-right:1px solid rgba(255,255,255,.16);color:#fff;font:700 13px/1.3 var(--sans);letter-spacing:.02em;padding:10px 15px;text-align:left;white-space:nowrap}.gpx table.gp-table td{background:#fff;border:0;border-right:1px solid var(--grid);border-top:1px solid var(--grid);min-width:5.5em;padding:9px 15px;text-align:left;vertical-align:top}.gpx table.gp-table td:last-child,.gpx table.gp-table th:last-child{border-right:0}.gpx table.gp-table tbody tr:nth-child(2n) td{background:#f7faf8}.gpx-code table.gp-table tbody tr:nth-child(2n) td{background:#f6f8fb}.gpx table.gp-table tbody tr{transition:background .12s}.gpx table.gp-table tbody tr:hover td{background:var(--g-tint)}.gpx table.gp-table td:first-child{font-weight:600}.gpx table.gp-table td code{background:transparent;border:0;padding:0}.gpx table.gp-sheet{border-color:#c2cbc6}.gpx table.gp-sheet th{background:var(--bar);border-right:1px solid #d4d4d4;color:#444;font-weight:500;text-align:center}.gpx table.gp-sheet td{border-color:#d4d4d4}.gpx table.gp-sheet td:first-child{background:var(--bar);color:#555;font-weight:400;text-align:center}.gpx details,.gpx table.gp-sheet tbody tr:nth-child(2n) td:not(:first-child){background:#fff}.gpx details{border:1px solid var(--g-line);border-radius:4px;margin:.6em 0;overflow:hidden;transition:background .2s,border-color .2s}.gpx details:hover,.gpx details[open]{border-color:var(--g)}.gpx details[open]{background:var(--g-tint)}.gpx summary{cursor:pointer;font-weight:600;list-style:none;padding:11px 16px 11px 46px;position:relative}.gpx summary::-webkit-details-marker{display:none}.gpx summary:before{border:1.5px solid var(--g);border-radius:3px;color:var(--g);content:"+";font:700 15px/17px var(--mono);height:19px;left:14px;position:absolute;text-align:center;top:12px;transition:background .15s,color .15s;width:19px}.gpx details[open] summary:before{background:var(--g);color:#fff;content:"−"}.gpx details>:not(summary){animation:gpx-reveal .22s ease-out;margin-left:16px;margin-right:16px}.gpx details>p:last-child{margin-bottom:.9em}@keyframes gpx-reveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.gpx summary code{background:rgba(255,255,255,.7)}.gpx .gp-lab-cta{margin:2.4em 0 .5em}.gpx .gp-lab-cta .gp-lab-button{align-items:center;background:var(--g);border:0;border-radius:4px;box-shadow:0 3px 0 var(--g-dark);color:#fff;display:inline-flex;font:700 15px/1 var(--sans);gap:10px;padding:15px 22px;text-decoration:none;transition:transform .12s,box-shadow .12s}.gpx .gp-lab-cta .gp-lab-button:hover{box-shadow:0 1px 0 var(--g-dark);transform:translateY(2px)}.gpx-code:has(.gp-chip-js) .gp-lab-cta .gp-lab-button{background:var(--lang);box-shadow:0 3px 0 #b58f00;color:#241b00}@media(max-width:700px){.gpx{font-size:16px}.gpx h2{font-size:22px;gap:.5em}.gpx .gp-code pre{font-size:12.5px;padding:12px 14px}.gpx .gp-intro{padding:12px 14px 14px}.gpx .gp-note{padding-left:14px;padding-right:14px}.gpx .gp-copy{opacity:1}}@media(prefers-reduced-motion:reduce){.gpx *,.gpx :before{animation:none!important;transition:none!important}}.gpx .gp-code pre,.gpx .gp-code pre code,.gpx .gp-code-bar,.gpx .gp-output pre,.gpx code,.gpx pre{font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none}