:root{--color-ink:#141414;--color-violet:#5b2cf0;--color-coral:#ff5c39;--color-lime:#c7f230;--color-sky:#33a9f0;--color-amber:#ffb020;--color-turquoise:#31f2c5;--color-backdrop:#eef0f3;--color-surface:#fff;--color-surface-alt:#f7f7f9;--color-lime-tint:#f7fce1;--color-row-hover:#e6dcfd;--color-overlay:#14141480;--color-text:var(--color-ink);--color-text-muted:#5c5c5c;--color-text-soft:#2a2a2a;--color-border:var(--color-ink);--color-rule:#d9d9df;--color-separator:#b7b7c0;--color-tip-bg:#eaf6ff;--color-warning-bg:#fff0ec;--color-important-bg:#f1ecfe;--color-note-bg:#f7fce1;--color-docs-bg:#eef0ff;--color-github-bg:#e8fcf8;--color-download-bg:#fff4e0;--color-codepen-bg:#fff4e0;--color-code-gutter:#6e6e6e;--color-code-title:#e9e9ec;--color-code-button:#9a9a9a;--color-code-inline:#eaecf0;--font-display:"Bricolage Grotesque", system-ui, sans-serif;--font-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"Roboto Mono", ui-monospace, SFMono-Regular, monospace;--text-base:18px;--text-lead:20px;--text-card-text:16px;--text-code:16px;--text-table:16px;--text-small:15px;--text-meta:14px;--text-title:clamp(32px, 7vw, 60px);--text-title-lesson:clamp(28px, 5.6vw, 48px);--text-unit:24px;--text-h2:25px;--text-h3:20px;--text-card-number:24px;--text-card-title:18px;--text-course-title:30px;--text-label:13px;--text-label-sm:12px;--text-label-xs:11px;--text-label-2xs:10px;--page-max-width:1152px;--page-padding:clamp(24px, 5vw, 52px);--page-padding-compact:clamp(18px, 2.8vw, 32px);--backdrop-padding-y:32px;--backdrop-padding-x:24px;--chapters-width:324px;--help-panel-width:560px;--sheet-gap:4px;--gap-cards:20px;--unit-gap:80px;--unit-mark-size:550px;--unit-mark-rise:66px;--unit-mark-inset:16px;--lesson-mark-size:340px;--block-margin:24px;--callout-margin:38px;--radius-page:18px;--radius-sheet:4px;--radius:8px;--radius-sm:3px;--radius-pill:999px;--border:2px solid var(--color-border);--shadow-block:5px 5px 0 var(--color-ink);--shadow-card:6px 6px 0 var(--color-ink);--shadow-card-hover:9px 9px 0 var(--color-violet);--shadow-card-locked:6px 6px 0 var(--color-separator);--shadow-code:6px 6px 0 var(--color-ink)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,pre{margin:0}body{background:var(--color-backdrop);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);padding:var(--backdrop-padding-y) var(--backdrop-padding-x);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;line-height:1.6}@media (width<=820px){:root{--text-base:16px}}a{color:inherit}img{max-width:100%}[hidden]{display:none!important}a:focus-visible,button:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid}.page{z-index:0;max-width:var(--page-max-width);min-height:calc(100dvh - var(--backdrop-padding-y) * 2);padding:var(--page-padding);background:var(--color-surface);border-radius:var(--radius-page);margin-inline:auto;position:relative;overflow:hidden}.page--split{gap:var(--sheet-gap);background:0 0;border-radius:0;grid-template-rows:auto 1fr;padding:0;display:grid;overflow:visible}@media (width<=820px){:root{--backdrop-padding-y:0px;--backdrop-padding-x:0px;--radius-page:0px;--radius-sheet:0px}}.highlight{background:var(--color-lime);box-shadow:0 0 0 4px var(--color-lime);border-radius:2px}.breadcrumb{margin-bottom:clamp(18px,3.5vw,28px)}.breadcrumb ol{font-size:var(--text-meta);color:var(--color-text-muted);flex-wrap:wrap;align-items:center;gap:6px;padding:0;list-style:none;display:flex}.breadcrumb li{align-items:center;gap:6px;display:flex}.breadcrumb li+li:before{content:"/";color:var(--color-separator)}.breadcrumb a{color:var(--color-text-muted);text-decoration:none}.breadcrumb a:hover{color:var(--color-text);text-decoration:underline}.breadcrumb [aria-current]{color:var(--color-text);font-weight:600}.page-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-title);letter-spacing:-.03em;text-wrap:balance;line-height:.98}.eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--text-label);text-transform:uppercase;letter-spacing:.1em;color:var(--color-violet);margin-bottom:14px}.lead{max-width:54ch;font-size:var(--text-lead);color:var(--color-text-soft);margin-top:18px}.course-grid{gap:var(--gap-cards);grid-template-columns:repeat(2,1fr);margin-top:40px;display:grid}@media (width<=760px){.course-grid{grid-template-columns:1fr}}.course-card{background:var(--color-surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);color:inherit;flex-direction:column;align-items:flex-start;padding:28px;text-decoration:none;display:flex}.course-card:nth-child(odd){transform:rotate(-.6deg)}.course-card:nth-child(2n){transform:rotate(.4deg)}.course-card:hover{background:var(--color-lime-tint);box-shadow:var(--shadow-card-hover)}@media (prefers-reduced-motion:no-preference){.course-card{transition:transform .18s,box-shadow .18s,background-color .18s}.course-card:hover{transform:rotate(0)translate(-2px,-2px)}}.course-card__eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--text-label);text-transform:uppercase;letter-spacing:.1em;color:var(--color-violet)}.course-card h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-course-title);letter-spacing:-.02em;margin:10px 0 8px;line-height:1.05}.course-card__summary{color:var(--color-text-muted);line-height:1.5}.course-card__cta{font-family:var(--font-display);font-weight:800;font-size:var(--text-label);text-transform:uppercase;letter-spacing:.09em;color:var(--color-violet);margin-top:auto;padding-top:24px}.unit{margin-top:var(--unit-gap);position:relative}.unit__number{font-family:var(--font-display);font-weight:700;font-size:var(--text-label);text-transform:uppercase;letter-spacing:.1em;color:var(--color-violet);margin-bottom:6px}.unit__title{font-family:var(--font-display);font-weight:800;font-size:var(--text-unit);letter-spacing:-.015em}.unit__title .highlight{box-shadow:0 0 0 3px var(--color-lime)}.unit:before{content:"";z-index:-1;top:calc(-1 * var(--unit-mark-rise));width:var(--unit-mark-size);height:var(--unit-mark-size);-webkit-mask:var(--unit-mark-shape) center / contain no-repeat;-webkit-mask:var(--unit-mark-shape) center / contain no-repeat;mask:var(--unit-mark-shape) center / contain no-repeat;pointer-events:none;position:absolute}.unit:nth-of-type(odd):before{right:var(--unit-mark-inset);background:var(--color-lime);transform:rotate(-4deg)}.unit:nth-of-type(2n):before{left:var(--unit-mark-inset);background:var(--color-violet);transform:rotate(5deg)}.unit:nth-of-type(7n+1){--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(67)'><rect width='1' height='4'/></pattern></defs><rect x='32' y='32' width='136' height='136' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}.unit:nth-of-type(7n+2),.lesson-intro{--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(-37)'><rect width='1' height='4'/></pattern></defs><circle cx='100' cy='100' r='68' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}.unit:nth-of-type(7n+3){--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(19)'><rect width='1' height='4'/></pattern></defs><polygon points='100,50 160,152 40,152' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}.unit:nth-of-type(7n+4){--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(-73)'><rect width='1' height='4'/></pattern></defs><path d='M100 16V184M16 100H184' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}.unit:nth-of-type(7n+5){--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(41)'><rect width='1' height='4'/></pattern></defs><path d='M128.7 161.6A68 68 0 1 1 128.7 38.4' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}.unit:nth-of-type(7n+6){--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(-14)'><rect width='1' height='4'/></pattern></defs><polygon points='100,30 166.6,78.4 141.1,156.6 58.9,156.6 33.4,78.4' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}.unit:nth-of-type(7n+7){--unit-mark-shape:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='h' width='4' height='4' patternUnits='userSpaceOnUse' patternTransform='rotate(83)'><rect width='1' height='4'/></pattern></defs><path d='M80 44L34 100L80 156M120 44L166 100L120 156' fill='none' stroke='url(%23h)' stroke-width='36'/></svg>")}@media (width<=760px){:root{--unit-mark-size:392px;--unit-mark-inset:0px}}@media (width<=520px){:root{--unit-mark-size:288px}}.lesson-grid{gap:var(--gap-cards);grid-template-columns:repeat(3,1fr);margin-top:22px;display:grid}@media (width<=760px){.lesson-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=520px){.lesson-grid{grid-template-columns:1fr}}.lesson-card{background:var(--color-surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);color:inherit;padding:18px;text-decoration:none;display:block}.lesson-card:nth-child(3n+1){transform:rotate(-.7deg)}.lesson-card:nth-child(3n+2){transform:rotate(.5deg)}.lesson-card:nth-child(3n){transform:rotate(-.3deg)}a.lesson-card:hover{background:var(--color-lime-tint);box-shadow:var(--shadow-card-hover)}@media (prefers-reduced-motion:no-preference){.lesson-card{transition:transform .18s,box-shadow .18s,background-color .18s}a.lesson-card:hover{transform:rotate(0)translate(-2px,-2px)}}.lesson-card--locked{border-color:var(--color-separator);box-shadow:var(--shadow-card-locked)}.lesson-card--locked h3{color:var(--color-text-muted)}.lesson-card__lock{background:var(--color-violet);border-radius:var(--radius-sm);width:26px;height:26px;color:var(--color-surface);justify-content:center;align-items:center;display:inline-flex}.lesson-card__lock svg{width:18px;height:18px}.lesson-card--upcoming{box-shadow:var(--shadow-card);opacity:.55}.lesson-card__status{background:var(--color-surface-alt);border:var(--border);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:800;font-size:var(--text-label-xs);text-transform:uppercase;letter-spacing:.09em;margin-top:10px;padding:2px 9px;display:inline-block}.lesson-card__number{font-family:var(--font-display);font-weight:800;font-size:var(--text-card-number);letter-spacing:-.03em;color:var(--color-violet);line-height:1;display:block}.lesson-card__date{background:var(--color-lime);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:var(--text-label-sm);margin-top:12px;padding:4px 11px;display:inline-block}.lesson-card--locked .lesson-card__date{background:var(--color-rule);color:var(--color-text-muted)}.lesson-card h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-card-title);margin:8px 0 6px}.lesson-card p{font-size:var(--text-card-text);color:var(--color-text-muted);line-height:1.5}.lesson-intro{padding:var(--page-padding-compact) var(--page-padding) var(--page-padding);background:var(--color-surface);border-radius:var(--radius-page) var(--radius-page) var(--radius-sheet) var(--radius-sheet);position:relative;overflow:hidden}.lesson-intro:before{content:"";top:calc(var(--lesson-mark-size) * -.33);right:calc(var(--lesson-mark-size) * -.4);width:var(--lesson-mark-size);height:var(--lesson-mark-size);background:var(--color-lime);-webkit-mask:var(--unit-mark-shape) center / contain no-repeat;-webkit-mask:var(--unit-mark-shape) center / contain no-repeat;mask:var(--unit-mark-shape) center / contain no-repeat;pointer-events:none;position:absolute;transform:rotate(-4deg)}.lesson-intro>*{position:relative}@media (width<=1020px){.lesson-intro:before{content:none}}.lesson-header{align-items:start;gap:clamp(16px,2.6vw,28px);margin-bottom:0;display:flex}.lesson-header__badge{background:var(--color-violet);border-radius:var(--radius);width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);font-family:var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--color-surface);flex:none;place-items:center;font-size:clamp(26px,2.9vw,34px);font-weight:800;display:grid;transform:rotate(-3deg)}.lesson-header__text{min-width:0}.lesson-header__number{font-family:var(--font-display);font-weight:700;font-size:var(--text-meta);text-transform:uppercase;letter-spacing:.05em;color:var(--color-violet)}@media (width>=821px){.lesson-header__number{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@media (width<=820px){.lesson-header__badge{display:none}}.lesson-header h1{font-family:var(--font-display);font-weight:800;font-size:var(--text-title-lesson);letter-spacing:-.03em;text-wrap:balance;margin-top:8px;line-height:.98}.lesson-header__summary{max-width:62ch;font-size:var(--text-lead);color:var(--color-text-muted);margin-top:12px;line-height:1.45}.lesson{grid-template-columns:var(--chapters-width) minmax(0, 1fr);gap:var(--sheet-gap);display:grid}@media (width<=1020px){.lesson{gap:var(--sheet-gap);grid-template-columns:1fr}}.chapters{padding:var(--page-padding);background:var(--color-surface);border-radius:var(--radius-sheet) var(--radius-sheet) var(--radius-sheet) var(--radius-page)}.chapters__list{flex-direction:column;display:flex}.chapters__toggle{display:none}.chapters__heading{font-family:var(--font-display);font-weight:800;font-size:var(--text-label-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);margin-bottom:10px}.chapters a{font-size:var(--text-small);color:var(--color-text);padding:6px 0;text-decoration:none;display:block}.chapters a:hover{color:var(--color-violet)}.chapters a[aria-current]{color:var(--color-violet);font-weight:700}.chapters__group{flex-direction:column;margin:14px 0;display:flex}.chapters__subchapters{flex-direction:column;margin-left:13px;padding-left:1px;display:flex}.chapters__subchapters a{font-size:var(--text-meta);align-items:start;gap:10px;padding:5px 0;line-height:22px;display:flex;position:relative}.chapters__subchapters a:before{content:"";background:var(--color-separator);width:1px;position:absolute;top:0;bottom:0;left:-1px}.chapters__subchapters a:last-child:before{height:16px;bottom:auto}.chapters__number{background:var(--color-separator);border-radius:var(--radius-sm);width:18px;height:18px;line-height:1;font-family:var(--font-display);font-weight:800;font-size:var(--text-label-2xs);color:var(--color-surface);flex:none;place-items:center;margin-top:2px;margin-left:-9px;display:grid;position:relative}.chapters__subchapters a[aria-current] .chapters__number{background:var(--color-violet)}.chapters__group:has(.chapters__subchapters [aria-current])>a{font-weight:700}@media (width<=1020px){.chapters{border-radius:var(--radius-sheet);padding:0}.chapters__heading{display:none}.chapters__toggle:not([hidden]){width:100%;padding:14px var(--page-padding);border-radius:inherit;font-family:var(--font-display);font-weight:800;font-size:var(--text-meta);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text);cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;display:flex}.chapters__toggle:hover{background:var(--color-lime-tint)}.chapters__toggle[aria-expanded=true]{border-bottom:1px solid var(--color-rule)}.chapters__toggle svg{flex:none;width:18px;height:18px}.chapters__toggle[aria-expanded=false] .chapters__toggle-label,.chapters__toggle[aria-expanded=true] .chapters__toggle-current{display:none}.chapters__toggle-current{overflow-wrap:anywhere;text-transform:none;letter-spacing:normal;text-align:left;min-width:0}.chapters__toggle[aria-expanded=false]+.chapters__list{display:none}.chapters__toggle:not([hidden])+.chapters__list{padding:12px var(--page-padding) 16px}}.content .subchapters{margin:24px 0 calc(var(--block-margin) + 6px);gap:20px;padding-left:0;list-style:none;display:grid}.content .subchapter{background:var(--color-surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);color:inherit;align-items:start;gap:22px;padding:18px;font-weight:400;text-decoration:none;display:flex}.subchapters li:nth-child(odd) .subchapter{transform:rotate(-.4deg)}.subchapters li:nth-child(2n) .subchapter{transform:rotate(.3deg)}.content .subchapter:hover{background:var(--color-lime-tint);box-shadow:var(--shadow-card-hover)}@media (prefers-reduced-motion:no-preference){.content .subchapter{transition:transform .18s,box-shadow .18s,background-color .18s}.content .subchapter:hover{transform:rotate(0)translate(-2px,-2px)}}.subchapter__number{min-width:38px;font-family:var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:center;color:var(--color-violet);flex:none;font-size:55px;font-weight:800;line-height:1}.subchapter__text{gap:3px;display:grid}.subchapter__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-card-title);line-height:1.35}.subchapter__summary{font-size:var(--text-card-text);color:var(--color-text-muted);line-height:1.5}.content{min-width:0;padding:var(--page-padding);background:var(--color-surface);border-radius:var(--radius-sheet) var(--radius-sheet) var(--radius-page) var(--radius-sheet)}.content.locked{border-bottom-left-radius:var(--radius-page)}.content>:first-child{margin-top:0}.content h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-h2);letter-spacing:-.015em;margin:1.5em 0 .5em}.content .content__eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--text-meta);text-transform:uppercase;letter-spacing:.05em;color:var(--color-violet);margin-bottom:0}.content__eyebrow+h2{margin-top:0}.content h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);margin:1.5em 0 .5em}.content h4{font-family:var(--font-display);font-weight:700;font-size:var(--text-meta);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin:1.5em 0 .4em}.content p{margin-bottom:1em}.content ul,.content ol{margin-bottom:1em;padding-left:22px}.content ul{list-style:square}.content li{margin:5px 0}.content strong{font-weight:700}.content em{font-style:italic}.content :is(p,li,td) a{color:var(--color-violet);text-underline-offset:2px;font-weight:600;text-decoration:underline}.content :not(pre)>code{background:var(--color-code-inline);border-radius:var(--radius-sm);font-family:var(--font-mono);padding:.08em .34em;font-size:.86em}.content hr{border:0;border-top:3px solid var(--color-border);margin:44px 0 28px}.content p:has(>img){margin:var(--block-margin) 0}.content img{background:var(--color-surface);border:var(--border);border-radius:var(--radius);width:100%;height:auto;box-shadow:var(--shadow-block);display:block}.code-block{margin:var(--callout-margin) 0 calc(var(--block-margin) + 6px);position:relative}.code-block__title{z-index:1;background:var(--color-code-title);border:var(--border);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:800;font-size:var(--text-label-xs);color:var(--color-text);padding:3px 10px;position:absolute;top:0;left:16px;transform:translateY(-50%)}.code-block__title--lang{text-transform:uppercase;letter-spacing:.09em}.code-block__body{border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-code);position:relative;overflow:hidden}.code-block__body pre{font-size:var(--text-code);counter-reset:code-line;padding:16px 4px;line-height:1.7;overflow-x:auto}.code-block:has(>.code-block__title) .code-block__body pre{padding-top:24px}.code-block__body :is(pre,code){font-family:var(--font-mono)}.code-block__copy{--inset:10px;--corner:5px;top:var(--inset);right:var(--inset);background:var(--color-ink);border:1px solid var(--color-code-button);border-radius:var(--corner);color:var(--color-code-button);cursor:pointer;padding:6px;display:inline-flex;position:absolute}.code-block__icon{width:16px;height:16px;display:block}.code-block__icon--done,.code-block__copy[data-done] .code-block__icon{display:none}.code-block__copy[data-done] .code-block__icon--done{display:block}.code-block__copy:hover{border-color:var(--color-surface);color:var(--color-surface)}.code-block__copy[data-done]{background:var(--color-lime);border-color:var(--color-lime);color:var(--color-text)}.code-block__body .line:before{counter-increment:code-line;content:counter(code-line);width:2.5ch;color:var(--color-code-gutter);text-align:right;margin-right:24px;padding-left:14px;display:inline-block}.code-block__body .line:last-child:empty:before{content:none}.callout{margin:var(--callout-margin) 0 calc(var(--callout-margin) + 5px);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-block);padding:28px 18px 24px;position:relative}.callout:nth-of-type(odd){transform:rotate(-.45deg)}.callout:nth-of-type(2n){transform:rotate(.4deg)}.callout>:last-child{margin-bottom:0}.callout__label{border:var(--border);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:800;font-size:var(--text-label-xs);text-transform:uppercase;letter-spacing:.09em;padding:3px 10px;position:absolute;top:0;left:16px;transform:translateY(-50%)}.callout--tip{background:var(--color-tip-bg)}.callout--warning{background:var(--color-warning-bg)}.callout--important{background:var(--color-important-bg)}.callout--note{background:var(--color-note-bg)}.callout--docs{background:var(--color-docs-bg)}.callout--github{background:var(--color-github-bg)}.callout--download{background:var(--color-download-bg)}.callout--codepen{background:var(--color-codepen-bg)}.callout--tip .callout__label{background:var(--color-sky)}.callout--warning .callout__label{background:var(--color-coral)}.callout--note .callout__label{background:var(--color-lime)}.callout--download .callout__label,.callout--codepen .callout__label{background:var(--color-amber)}.callout--github .callout__label{background:var(--color-turquoise)}.callout--important .callout__label{background:var(--color-violet);color:var(--color-surface)}.callout--docs .callout__label{background:var(--color-ink);color:var(--color-surface)}.content .steps{--steps-bullet:30px;margin:var(--block-margin) 0 calc(var(--block-margin) + 4px)}.content .steps>ol{counter-reset:step var(--steps-start,0);gap:18px;margin:0;padding-left:0;list-style:none;display:grid}.content .steps>ol>li{padding-left:calc(var(--steps-bullet) + 14px);margin:0;position:relative}.content .steps>ol>li>:last-child{margin-bottom:0}.content .steps>ol>li:before{counter-increment:step;content:counter(step);width:var(--steps-bullet);height:var(--steps-bullet);background:var(--color-violet);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:800;font-size:var(--text-small);font-variant-numeric:tabular-nums;color:var(--color-surface);place-items:center;line-height:1;display:grid;position:absolute;top:0;left:0}@media (width<=820px){.content .steps{--steps-bullet:27px}}.content .checklist{--checklist-box:22px;margin:var(--block-margin) 0}.content .checklist>ul{gap:10px;margin:0;padding-left:0;list-style:none;display:grid}.content .checklist>ul>li{padding-left:calc(var(--checklist-box) + 12px);margin:0;position:relative}.content .checklist>ul>li>:last-child{margin-bottom:0}.content .checklist>ul>li:has(>.checklist__box:checked){color:var(--color-text-muted);text-decoration:line-through}.content .checklist__box{top:calc((1.6em - var(--checklist-box)) / 2);appearance:none;width:var(--checklist-box);height:var(--checklist-box);font:inherit;background:var(--color-surface);border:var(--border);border-radius:var(--radius-sm);cursor:pointer;margin:0;position:absolute;left:0}.content .checklist__box:after{content:"";border:solid var(--color-ink);opacity:0;border-width:0 3px 3px 0;width:5px;height:10px;position:absolute;top:3px;left:6px;transform:rotate(45deg)}.content .checklist__box:hover{background:var(--color-lime-tint)}.content .checklist__box:checked{background:var(--color-lime)}.content .checklist__box:checked:after{opacity:1}@media (prefers-reduced-motion:no-preference){.content .checklist__box,.content .checklist__box:after{transition:background-color .18s,opacity .18s}}.table-wrap{margin:var(--block-margin) 0;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-block);overflow-x:auto}:is(.content,.sql) table{border-collapse:collapse;width:100%;font-size:var(--text-table)}:is(.content,.sql) :is(th,td){border-bottom:1px solid var(--color-rule);border-right:1px solid var(--color-rule);text-align:left;padding:9px 13px}:is(.content,.sql) :is(th,td):last-child{border-right:0}:is(.content,.sql) tbody tr:last-child td{border-bottom:0}:is(.content,.sql) thead th{background:var(--color-lime);border-bottom:var(--border);font-family:var(--font-display);font-weight:700}:is(.content,.sql) tbody tr:nth-child(2n){background:var(--color-surface-alt)}:is(.content,.sql) :is(th,td).is-numeric{text-align:right;font-variant-numeric:tabular-nums}.pager{font-family:var(--font-display);font-weight:700;font-size:var(--text-label);justify-content:space-between;gap:16px;margin-top:40px;display:flex}.pager a{color:var(--color-text-muted);text-decoration:none}.pager a:hover{color:var(--color-text)}.pager__direction{font-size:var(--text-label-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-violet);display:block}.page--wide{max-width:none;padding:var(--page-padding-compact);container-type:inline-size}.tool-header{margin-bottom:32px}.tool-header .breadcrumb{margin-bottom:18px}.tool-header__main{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;display:flex}.tool-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-title-lesson);letter-spacing:-.03em;line-height:1}.tool-lead{max-width:70ch;color:var(--color-text-soft);margin-top:10px}.sql{grid-template-columns:340px minmax(0,1fr);align-items:start;gap:28px 40px;display:grid}@container (width<=760px){.sql{grid-template-columns:minmax(0,1fr)}}.sql__toolbar{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}@media (width<=820px){.sql__toolbar{justify-content:flex-start}}.sql__tool{background:var(--color-surface);border:var(--border);border-radius:var(--radius-pill);color:var(--color-text);font-family:var(--font-display);font-weight:700;font-size:var(--text-small);cursor:pointer;padding:6px 14px;line-height:1.4}.sql__tool:hover:not(:disabled){background:var(--color-lime)}.sql__tool:focus-visible{outline:3px solid var(--color-violet);outline-offset:2px}.sql__tool:disabled{border-color:var(--color-separator);color:var(--color-text-muted);cursor:default}.sql__help-toggle,.sql__help-toggle:hover:not(:disabled){background:var(--color-violet);color:var(--color-surface)}.sql__heading{font-family:var(--font-display);font-weight:700;font-size:var(--text-meta);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:12px;display:block}.sql__tables{gap:20px;display:grid}.sql__table{background:var(--color-surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-block);overflow:hidden}.sql__table-header{background:var(--color-surface-alt);border-bottom:var(--border);justify-content:space-between;align-items:center;gap:12px;padding:8px 10px 8px 14px;display:flex}.sql__table-name{font-family:var(--font-mono);font-weight:600;font-size:var(--text-small)}.sql__show{background:var(--color-surface);border:var(--border);border-radius:var(--radius-pill);color:var(--color-text);font-family:var(--font-display);font-weight:700;font-size:var(--text-label-sm);cursor:pointer;flex-shrink:0;padding:3px 10px}.sql__show:hover{background:var(--color-lime)}.sql__show:focus-visible{outline:3px solid var(--color-violet);outline-offset:2px}.sql__columns{font-size:var(--text-meta);margin:0;padding:8px 14px 10px;list-style:none}.sql__column{flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:2px 0;display:flex}.sql__column-name{font-family:var(--font-mono)}.sql__key{font-family:var(--font-display);font-weight:800;font-size:var(--text-label-xs);letter-spacing:.04em;color:var(--color-violet)}.sql__type{font-family:var(--font-mono);font-size:var(--text-label-sm);color:var(--color-text-muted);margin-left:auto}.sql__reference{font-family:var(--font-mono);font-size:var(--text-label-sm);color:var(--color-violet);flex-basis:100%}.sql-editor{background:var(--editor-bg);min-height:240px;color:var(--editor-fg);border:var(--border);border-radius:var(--radius);display:grid}.sql-editor:focus-within{outline:3px solid var(--color-violet);outline-offset:3px}.sql-editor__highlight,.sql-editor__input{box-sizing:border-box;width:100%;font-family:var(--font-mono);font-size:var(--text-code);letter-spacing:normal;font-variant-ligatures:none;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;border:0;grid-area:1/1;margin:0;padding:16px 18px;font-weight:400;line-height:1.6}.sql-editor__highlight{pointer-events:none;overflow:hidden}.sql-editor__highlight code{font:inherit}.sql-editor__input{resize:none;appearance:none;color:#0000;-webkit-text-fill-color:transparent;height:100%;caret-color:var(--editor-fg);background:0 0;outline:none;overflow:hidden}.sql__actions{flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;display:flex}.sql__button{background:var(--color-surface);border:var(--border);border-radius:var(--radius-pill);box-shadow:3px 3px 0 var(--color-ink);color:var(--color-text);font-family:var(--font-display);font-weight:700;font-size:var(--text-small);cursor:pointer;padding:8px 18px}.sql__button--primary{background:var(--color-lime)}.sql__button:hover:not(:disabled){box-shadow:3px 3px 0 var(--color-violet)}.sql__button:focus-visible{outline:3px solid var(--color-violet);outline-offset:3px}.sql__button:disabled{background:var(--color-surface-alt);border-color:var(--color-separator);box-shadow:none;color:var(--color-text-muted);cursor:default}.sql__hint{font-size:var(--text-meta);color:var(--color-text-muted)}@media (width<=820px){.sql__hint{display:none}}.sql__hint kbd{background:var(--color-surface-alt);border:1px solid var(--color-separator);border-radius:var(--radius-sm);font-family:var(--font-mono);padding:1px 6px;font-size:.9em}.sql__output{margin-top:28px}.sql__output[aria-busy=true]{opacity:.6}.sql__output>:first-child{margin-top:0}.sql__output tbody tr:hover{background:var(--color-row-hover)}.sql__message{font-size:var(--text-meta);color:var(--color-text-muted);margin-bottom:16px}.sql td.sql__null{color:var(--color-text-muted);font-style:italic}.sql__error{background:var(--color-warning-bg);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-block);padding:16px 18px}.sql__error-label{font-family:var(--font-display);font-weight:800;font-size:var(--text-label-xs);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}.sql__error-text{font-family:var(--font-mono);font-size:var(--text-small);overflow-wrap:anywhere}.sql__help{z-index:10;width:min(var(--help-panel-width), 100%);background:var(--color-surface);border-left:var(--border);box-shadow:-6px 0 0 var(--color-ink);flex-direction:column;transition:translate .2s ease-out;display:flex;position:fixed;top:0;bottom:0;right:0}@starting-style{.sql__help{translate:100%}}@media (prefers-reduced-motion:reduce){.sql__help{transition:none}}@media (width>=1280px){.page:has(.sql__help:not([hidden])){margin-right:calc(var(--help-panel-width) - var(--backdrop-padding-x))}}.sql__help-resize{z-index:1;cursor:ew-resize;touch-action:none;width:14px;position:absolute;top:0;bottom:0;left:-8px}.sql__help-resize:hover,.sql__help-resize:focus-visible{background:var(--color-violet);outline:none}@media (width<=820px){.sql__help-resize{display:none}}.sql__help-header{background:var(--color-surface-alt);border-bottom:var(--border);justify-content:space-between;align-items:center;gap:16px;padding:14px 16px 14px 24px;display:flex}.sql__help-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-h3)}.sql__help-close{background:var(--color-surface);border:var(--border);border-radius:var(--radius-pill);width:36px;height:36px;color:var(--color-text);cursor:pointer;font-size:22px;line-height:1}.sql__help-close:hover{background:var(--color-lime)}.sql__help-close:focus-visible{outline:3px solid var(--color-violet);outline-offset:2px}.sql__help-body.content{overscroll-behavior:contain;background:0 0;border-radius:0;flex:1;padding:24px 24px 32px;overflow-y:auto}.sql__help-body h2{font-size:var(--text-h3)}.sql__help-body>ul:first-child{padding-left:0;list-style:none}.sql__help-body>ul:first-child>li{font-family:var(--font-display);font-weight:700;font-size:var(--text-meta);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin:0 0 14px}.sql__help-body>ul:first-child ul{font-family:var(--font-body);font-weight:400;font-size:var(--text-small);text-transform:none;letter-spacing:normal;color:var(--color-text);margin:4px 0 0}.sql__help-body>ul:first-child a{color:var(--color-violet);text-underline-offset:2px;font-weight:600}.sql__help-body>ul:first-child ul li{margin:3px 0}.sql__help-body>ul:first-child code{margin-left:4px;font-size:.75em}.sql__dialog{background:var(--color-surface);border:var(--border);border-radius:var(--radius);width:min(440px,100% - 32px);box-shadow:var(--shadow-card);color:var(--color-text);padding:24px 26px}.sql__dialog::backdrop{background:var(--color-overlay)}.sql__dialog-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-h3);margin-bottom:10px}.sql__choices{gap:12px;margin-top:16px;display:grid}.sql__choice{background:var(--color-surface);border:var(--border);border-radius:var(--radius);box-shadow:3px 3px 0 var(--color-ink);color:var(--color-text);font:inherit;text-align:left;cursor:pointer;gap:4px;padding:14px 16px;text-decoration:none;display:grid}.sql__choice:hover{background:var(--color-lime-tint);box-shadow:3px 3px 0 var(--color-violet)}.sql__choice:focus-visible{outline:3px solid var(--color-violet);outline-offset:3px}.sql__choice-name{font-family:var(--font-display);font-weight:800}.sql__choice-text{font-size:var(--text-small);color:var(--color-text-soft)}.sql__choice-file{font-family:var(--font-mono);font-size:var(--text-label-sm);color:var(--color-text-muted)}.sql__dialog-actions{flex-wrap:wrap;gap:12px;margin-top:22px;display:flex}