.pg__action-tooltip{inset:auto;margin:.25rem;padding:.38rem .62rem;border:1px solid #d7dee7;border-radius:.7rem;background:color-mix(in srgb,#ffffff 94%,#eef2f6);color:#314158;box-shadow:0 16px 28px -20px #0f172a59,0 8px 14px -10px #0f172a33;font:550 .76rem/1.2 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;pointer-events:none;position-area:top;position-try-fallbacks:flip-block,flip-inline;justify-self:anchor-center;overflow:clip}.pg__toolbar[data-astro-cid-t7c6eqg6]{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--blue-900);box-shadow:inset 0 0 0 1px var(--blue-700)}.pg__tabs[data-astro-cid-t7c6eqg6]{display:flex;gap:0}.pg__tab[data-astro-cid-t7c6eqg6]{padding:.75rlh 1.5rlh;border:0;border-radius:0;background:transparent;cursor:pointer;position:relative;color:var(--blue-muted-comment);text-box:cap alphabetic;font-size:.9rem;font-family:system-ui;font-variation-settings:"GRAD" 300;font-weight:500;border-block-width:2.5px;border-style:solid;border-block-color:var(--active-tab, #0000) #0000;border-block-end-width:1px;box-shadow:inset 0 6px 12px -9px oklch(from var(--active-tab) l c h / .7),0 -6px 12px -10px oklch(from var(--active-tab) l c h / .7);:nth-child(1 of&){border-radius:1rem 0 0;@supports (corner-shape: squircle){border-radius:2.5rem 0 0;corner-shape:squircle}}}.pg__tab-file[data-astro-cid-t7c6eqg6]{color:var(--blue-muted-comment);font-size:.88em;font-weight:450;font-size:80%}.pg__tab[data-astro-cid-t7c6eqg6][data-changed=true]:after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:.8rlh;translate:0 -50%;width:.4rlh;height:.4rlh;border-radius:999px;background:var(--green-100);box-shadow:0 0 0 2px var(--blue-900)}.pg__tab[data-astro-cid-t7c6eqg6][aria-selected=true]{color:var(--gray-50);background:var(--blue-800);--active-tab: oklch(from var(--green-100) l 100% h);font-variation-settings:"GRAD" 500}.pg__tab[data-astro-cid-t7c6eqg6]:focus-visible{outline:2px solid var(--blue-muted);z-index:1}.pg__toolbar[data-astro-cid-t7c6eqg6] .pg__step-icon--done,button[data-astro-cid-t7c6eqg6][data-action=step-next][data-step-state=done] .pg__step-icon--next{display:none}button[data-astro-cid-t7c6eqg6][data-action=step-next][data-step-state=done] .pg__step-icon--done{display:inline-block}.pg__buttons[data-astro-cid-t7c6eqg6] button[data-astro-cid-t7c6eqg6]{interest-delay:.2s .08s;color:#fff;background:#172541;padding:.2rlh .4rlh;border-radius:.25rlh;border:0;cursor:pointer;@supports (corner-shape: squircle){border-radius:2rem;corner-shape:squircle}svg{vertical-align:middle}&:hover:not(:disabled){background:#1f3152}&:interest-source:not(:disabled){background:#1f3152}&:active:not(:disabled){background:#132039;scale:.98}&:disabled{opacity:.3;cursor:not-allowed}&[data-step-state=done]:disabled{opacity:1;background:oklch(from #172541 l c h / .5);cursor:default;color:oklch(from #fff l c h / .8)}&:focus-visible{outline:2px solid var(--green-100);outline-offset:2px}}.pg__buttons[data-astro-cid-t7c6eqg6]{margin-inline:.5rlh .75rlh;display:grid;grid-auto-flow:column;gap:.25rlh;align-items:center}.steps[data-astro-cid-t7c6eqg6]{font-family:var(--font-input);color:var(--btn-bg);font-size:.7rem}.pg__editor[data-astro-cid-gv6vvvzq]{display:block;flex:1;min-width:0;white-space:pre;color:#ffd493;margin-block:0;outline:none;padding-inline-end:.75rlh;min-block-size:190%}.pg__editor-container[data-astro-cid-gv6vvvzq]{display:none;padding:0 0 .75rlh .75rlh;overscroll-behavior-block:none;&[data-container=html]{padding-block-start:.75rlh}}.pg__editor-container[data-astro-cid-gv6vvvzq]:not([hidden]){display:grid;grid:auto-flow min-content / auto 1fr;gap:0 1rlh;overflow-block:auto;block-size:100%}.pg__editor-container[data-astro-cid-gv6vvvzq][data-container=html]:not([hidden]){grid:auto-flow auto / auto 1fr}.pg__editor-container[data-astro-cid-gv6vvvzq][data-container=css]:not([hidden]),.pg__editor-container[data-astro-cid-gv6vvvzq][data-container=js]:not([hidden]){grid:auto-flow minmax(.75rlh,min-content) minmax(.75rlh,auto) / auto 1fr;.pg__line-numbers,.pg__editor{grid-row:2}}.pg__collapse[data-astro-cid-gv6vvvzq]{display:grid;grid:auto / subgrid;grid-column:1 / -1;align-items:center;justify-items:start;gap:inherit;padding:.75rlh 0 .55rlh;background:none;border:none;font-size:.85em;font-family:var(--font-input);cursor:pointer;color:var(--blue-muted);position:sticky;top:0;background:var(--blue-800);.pg__collapse-text span{text-decoration:underline oklch(from currentColor l c h / .5) 2px;text-underline-position:from-font}}.pg__collapse--expanded[data-astro-cid-gv6vvvzq]{color:oklch(from var(--blue-muted) .95 c h)}.pg__collapse--expanded[data-astro-cid-gv6vvvzq] .pg__collapse-icon[data-astro-cid-gv6vvvzq]{rotate:90deg}.pg__collapse-icon[data-astro-cid-gv6vvvzq]{font-size:.7em;transition:rotate .15s;justify-self:end;inline-size:18px;block-size:18px;translate:25%}.pg__line-numbers[data-astro-cid-gv6vvvzq]{user-select:none;color:var(--blue-muted);text-align:right;min-width:2ch;flex-shrink:0;white-space:pre;font-size:.9rlh}pre[data-astro-cid-gv6vvvzq]{font-family:var(--font-input, ui-monospace, monospace);font-size:.9rlh}.browser[data-astro-cid-pn4hpwom]{view-transition-name:browser;position:relative;border-radius:1rem;box-sizing:border-box;overflow:clip;background:#fff;min-width:4rem;max-block-size:calc(100svh - (2 * var(--pad)));min-block-size:300px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid gainsboro;display:grid;grid:min-content 1fr / 1fr;resize:horizontal;overflow-inline:auto;max-width:100%;user-select:none;anchor-name:--browser;html:where([data-exercise-set]) &{max-block-size:100%}&:is(:hover,:active){--opacity: 1}&:after{content:"";transition:opacity .2s ease;opacity:var(--opacity, 0);inline-size:1.6rem;block-size:1.6rem;position:fixed;position-anchor:--browser;position-area:center;place-self:end;inset:-3px;background:var(--resizer-icon) 0 0 / contain no-repeat;pointer-events:none;z-index:2}@supports (corner-shape: squircle){border-radius:2.5rem;corner-shape:squircle}>header{view-transition-name:browser-header;position:sticky;inset-block-start:0;display:grid;grid:auto / 1fr minmax(0,500px) 1fr;align-items:center;gap:1rlh;padding-block:.25rlh;padding-inline:.75rlh;background:#fff;border-start-start-radius:inherit;border-start-end-radius:inherit;&:not(:has(.browser-actions)){padding-inline-end:1.5rlh}.browser-controls{display:flex;gap:.2lh;span{aspect-ratio:1;inline-size:.75rem;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 .5px oklch(from var(--bg) calc(l*.92) c h);&[data-color=red]{--bg: #fd5d61}&[data-color=yellow]{--bg: #f3cd00}&[data-color=green]{--bg: #35c759}}}.browser-omnibar{background:#f1f1f1;border-radius:5rem;font-size:.875rem;color:#6c757d;width:100%;overflow:clip;text-align:center;margin-inline:auto;user-select:none;&[data-omnibar-mode=url]{padding-inline:.9rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:none;white-space:nowrap;scrollbar-width:none;&::-webkit-scrollbar{display:none}}}.browser-actions{place-self:center end;display:flex;align-items:center;gap:.35rem}.reference-button,.hint-button,.project-export-button,.playground-share-button,.zoom-button{interest-delay:.2s .08s;background:transparent;border:1px solid transparent;cursor:pointer;padding:.25rem;border-radius:.25rem;color:#495057;transition:background-color .18s ease,border-color .18s ease,color .18s ease;&:hover{background:#f1f1f1;border-color:#e5e7eb;svg .bulb-path{fill:oklch(.92 .22 101.41);color:oklch(.53 .13 101.84);filter:drop-shadow(0 0 1px oklch(.92 .22 101.41))}}&:interest-source{background:#f1f1f1;border-color:#e5e7eb;svg .bulb-path{fill:oklch(.92 .22 101.41);color:oklch(.53 .13 101.84);filter:drop-shadow(0 0 1px oklch(.92 .22 101.41))}}&:focus-visible{outline:2px solid var(--green-400);outline-offset:2px}&:disabled{opacity:.42;cursor:default}}.reference-button,.hint-button,.project-export-button,.playground-share-button{padding-inline:.6rem;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem}.zoom-button{place-self:center end;svg{display:block}.zoom-in-icon{display:none}}}.reference-peek{position:absolute;inset-block-start:2.35rem;inset-inline-end:.75rem;inline-size:min(24rem,calc(100% - 1.5rem));padding:.5rem;border-radius:1.1rem;background:color-mix(in srgb,#fff 95%,#f3f4f6);border:1px solid #e5e7eb;box-shadow:0 22px 44px -22px #0f172a73,0 14px 24px -18px #0f172a59;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-.35rem) scale(.985);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:3}.reference-popover,.hint-popover,.project-export-popover{inset:50% auto auto 50%;translate:-50% -50%;margin:0;inline-size:min(44rem,calc(100vw - 2rem));max-block-size:calc(100svh - 2rem);padding:1rem;border:1px solid var(--rule);border-radius:1rem;background:var(--panel);box-shadow:0 0 0 1px #201b180a,0 24px 64px -16px #201b182e,0 8px 20px -8px #201b181a;overflow:clip;opacity:0;transform:translateY(.75rem) scale(.97);transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1),overlay .25s ease allow-discrete,display .25s ease allow-discrete;&::backdrop{background:#201b1800;backdrop-filter:blur(0);transition:background-color .25s ease,backdrop-filter .25s ease,overlay .25s ease allow-discrete,display .25s ease allow-discrete}}.reference-popover:popover-open,.hint-popover:popover-open,.project-export-popover:popover-open{opacity:1;transform:translateY(0) scale(1);&::backdrop{background:#201b1847;backdrop-filter:blur(6px)}}@starting-style{.reference-popover:popover-open,.hint-popover:popover-open,.project-export-popover:popover-open{opacity:0;transform:translateY(.75rem) scale(.97)}.reference-popover:popover-open::backdrop,.hint-popover:popover-open::backdrop,.project-export-popover:popover-open::backdrop{background:#201b1800;backdrop-filter:blur(0)}}.reference-popover-close,.hint-popover-close,.project-export-popover-close{position:absolute;inset-block-start:.65rem;inset-inline-end:.65rem;z-index:1;display:grid;place-items:center;border:0px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--accent);cursor:pointer;padding:0;transition:background-color .15s ease,color .15s ease,border-color .15s ease;svg{inline-size:2rem;block-size:2rem}&:hover{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--rule) 60%,var(--accent) 40%)}&:active{transform:scale(.96)}&:focus-visible{outline:2px solid var(--green-400);outline-offset:2px}}.reference-popover-body,.hint-popover-body,.project-export-popover-body{overflow:auto;max-block-size:calc(100svh - 4rem);border-radius:.5rem}&:has(.viewport[data-zoomed=out]){.zoom-button{.zoom-out-icon{display:none}.zoom-in-icon{display:block}}label{zoom:2}}&:has([data-reference-toggle]:is(:hover,:focus-visible)),&:has([data-reference-card]:hover){.reference-button{background:#f1f1f1;border-color:#e5e7eb;color:#111827}.reference-peek{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);pointer-events:none}}&:has(.reference-popover:popover-open){.reference-button{background:#f1f1f1;border-color:#dbe1e7;color:#111827}.reference-peek{opacity:0;visibility:hidden;pointer-events:none}}&:has(.hint-popover:popover-open){.hint-button{background:#f1f1f1;border-color:#dbe1e7;color:#111827}}&:has(.project-export-popover:popover-open){.project-export-button{background:#f1f1f1;border-color:#dbe1e7;color:#111827}}.viewport{place-self:stretch;background:#fff;overflow-block:auto;anchor-name:--viewport;&[data-zoomed=out]{zoom:.5}}}[data-astro-cid-tyxlxmse]:where(.pg__preview){block-size:100%;padding:1.5rlh}.pg__reference-media{display:grid}.pg__hint-content{display:grid;gap:.75rem}.pg__project-export{display:grid;gap:.85rem}.pg__project-export-title{margin:0;font-size:1rem;font-weight:700;color:var(--accent)}.pg__project-export-lead{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.5}.pg__project-export-section{display:grid;gap:.5rem}.pg__project-export-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.pg__project-export-head h3{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}.pg__project-export-copy{border:1px solid color-mix(in srgb,var(--rule) 84%,var(--accent) 16%);background:color-mix(in srgb,var(--panel) 92%,white 8%);color:var(--ink-soft);border-radius:999px;padding:.22rem .65rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.pg__project-export-copy:hover{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--rule) 50%,var(--accent) 50%)}.pg__project-export-copy:active{transform:scale(.98)}.pg__project-export-copy:focus-visible{outline:2px solid var(--green-400);outline-offset:2px}.pg__project-export-code{margin:0;padding:.8rem .9rem;border-radius:.9rem;background:#071533;color:#eef0f9;font:500 .86rem/1.6 var(--font-input, ui-monospace, monospace);overflow:auto;max-block-size:12rem;overscroll-behavior-block:none;white-space:pre}.pg__reference-image{inline-size:100%;block-size:auto;display:block;border-radius:.75rem}.pg__sharebar[data-astro-cid-tarfw5np]{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;min-height:2.75rem;margin-bottom:-.1rem}.pg__share-button[data-astro-cid-tarfw5np]{display:inline-flex;align-items:center;justify-content:center;appearance:none;border:1px solid var(--gray-1000);background:var(--gray-1000);color:#fff;padding:.5rem .9rem;border-radius:.6rem;font:inherit;font-size:.88rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .14s ease,background .14s ease,color .14s ease;&:hover{background:color-mix(in oklch,var(--gray-1000),white 8%);border-color:color-mix(in oklch,var(--gray-1000),white 8%)}&:active:not(:disabled){transition-duration:.04s}&:disabled{opacity:.45;cursor:not-allowed}}.pg[data-astro-cid-tarfw5np]{display:grid;grid:minmax(0,min-content) / auto 1fr;justify-content:start;gap:1rem;align-items:start;&:not(:has(.pg__editor-wrap)){grid-template-columns:1fr}html[data-exercise-set] &{container:pg / inline-size}@container document (inline-size <= 800px){grid:minmax(0,1fr) minmax(0,1fr) / 100%;gap:.25rlh;align-items:stretch;padding:.25rlh;.pg__editor-wrap{resize:none;width:auto;order:1;block-size:100%;view-transition-name:editor}>*{overflow-block:auto}&:not(:has(.pg__editor-wrap)){grid:minmax(0,1fr) / 100%}}}.pg__editor-wrap[data-astro-cid-tarfw5np]{position:relative;background:var(--blue-800);border-radius:1rem;corner-shape:squircle;overflow:hidden;line-height:1.7;font-size:.9rlh;font-family:var(--font-input, ui-monospace, monospace);-webkit-font-smoothing:antialiased;box-shadow:0 39.275px 70px -14.275px #0000004d;display:grid;grid:min-content / 1fr;max-block-size:calc(100svh - (2 * var(--pad)));resize:horizontal;width:48cqi;block-size:100%;anchor-name:--editor;&:is(:hover,:active){--opacity: 1}html:where([data-exercise-set]) &{width:var(--width, calc(50cqi - .75rem) )}&:after{content:"";transition:opacity .2s ease;opacity:var(--opacity, 0);inline-size:1.6rem;block-size:1.6rem;position:fixed;position-anchor:--editor;position-area:center;place-self:end;inset:-3px;mask:var(--resizer-icon) 0 0 / contain no-repeat;background:var(--btn-icon);pointer-events:none;z-index:2}@supports (corner-shape: squircle){border-radius:2.5rem;corner-shape:squircle}}