:root{color-scheme:light dark;--font-body:"SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;--text-xs:.78rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.2rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.5rem;--leading-body:1.7;--leading-tight:1.2;--leading-heading:1.15;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:5rem;--space-10:6rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--shadow-card:0 1px 3px #0f171e0f, 0 1px 2px #0f171e0a;--shadow-pop:0 8px 24px #0f171e1a, 0 2px 6px #0f171e0f;--shadow-elevated:0 20px 40px #0f171e14, 0 6px 12px #0f171e0a;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--transition-fast:.15s var(--ease-out);--transition-normal:.25s var(--ease-out);--transition-slow:.4s var(--ease-out);--measure:68ch;--page-max:1180px;--header-height:64px;--bg:#fafaf9;--bg-surface:#f3f4f6;--bg-raised:#e9ebef;--bg-inset:#fff;--fg:#1c1917;--fg-muted:#44403c;--fg-subtle:#6b7280;--link:#0d7377;--link-hover:#0a5a5e;--border:#78716c;--border-soft:#d6d3d1;--border-faint:#e7e5e4;--accent:#0d7377;--accent-soft:#e0f2f1;--accent-fg:#fff;--focus:#b45309;--focus-ring:#0d7377;--status-bg:#e0f2f1;--status-fg:#0a5a5e;--tag-bg:#f5f5f4;--tag-fg:#44403c;--tag-border:#e7e5e4;--code-bg:#1c1917;--code-fg:#e7e5e4;--code-bar-bg:#292524;--code-bar-fg:#a8a29e}@media (prefers-color-scheme:dark){:root{--bg:#1c1917;--bg-surface:#292524;--bg-raised:#34302c;--bg-inset:#232020;--fg:#f5f5f4;--fg-muted:#d6d3d1;--fg-subtle:#a8a29e;--link:#5eead4;--link-hover:#99f6e4;--border:#78716c;--border-soft:#44403c;--border-faint:#34302c;--accent:#5eead4;--accent-soft:#134e4a;--accent-fg:#1c1917;--focus:#fbbf24;--focus-ring:#5eead4;--status-bg:#134e4a;--status-fg:#99f6e4;--tag-bg:#292524;--tag-fg:#d6d3d1;--tag-border:#44403c;--code-bg:#0c0a09;--code-fg:#d6d3d1;--code-bar-bg:#1c1917;--code-bar-fg:#78716c;--shadow-card:0 1px 3px #0006, 0 1px 2px #0000004d;--shadow-pop:0 8px 24px #00000080, 0 2px 6px #00000059;--shadow-elevated:0 20px 40px #00000073, 0 6px 12px #0000004d}}*,:before,:after{box-sizing:border-box}html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}main{overflow-wrap:break-word}h1,h2,h3,h4{line-height:var(--leading-heading);letter-spacing:-.02em;margin-block:var(--space-6) var(--space-3);color:var(--fg);font-weight:600}h1{font-size:var(--text-3xl);letter-spacing:-.03em;margin-block-start:0;font-weight:600}h2{font-size:var(--text-xl);font-weight:600}h3{font-size:var(--text-lg);font-weight:500}p,ul,ol{margin-block:0 var(--space-4)}ul,ol{padding-inline-start:var(--space-5)}li+li{margin-block-start:var(--space-2)}a{color:var(--link);text-underline-offset:2px;transition:color var(--transition-fast);text-decoration:underline 1px}a:hover{color:var(--link-hover);text-decoration-thickness:2px}:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}a,button{-webkit-tap-highlight-color:transparent}.skip-link{clip-path:inset(50%);white-space:nowrap;background:var(--bg-inset);block-size:1px;inline-size:1px;color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-md);z-index:100;padding:0;font-weight:500;position:absolute;inset-block-start:var(--space-3);inset-inline-start:var(--space-3);overflow:hidden}.skip-link:focus-visible{block-size:auto;inline-size:auto;padding:var(--space-3) var(--space-4);clip-path:none;white-space:normal;min-block-size:44px;box-shadow:var(--shadow-pop);overflow:visible}.site-header{z-index:50;border-block-end:1px solid var(--border-faint);background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(12px)saturate(1.2);position:sticky;inset-block-start:0}.site-header__inner{max-inline-size:var(--page-max);padding:var(--space-3) var(--space-4);gap:var(--space-3) var(--space-4);min-block-size:var(--header-height);flex-wrap:wrap;justify-content:space-between;align-items:center;margin-inline:auto;display:flex}.brand{align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-lg);color:var(--fg);letter-spacing:-.02em;min-block-size:44px;transition:opacity var(--transition-fast);text-decoration:none;display:inline-flex}.brand:hover{opacity:.8}.brand__mark{block-size:28px;inline-size:28px;color:var(--accent);flex:none}.site-nav ul{gap:var(--space-1) var(--space-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.site-nav a{min-block-size:44px;padding-inline:var(--space-3);border-radius:var(--radius-md);color:var(--fg-muted);font-size:var(--text-sm);transition:background var(--transition-fast), color var(--transition-fast);border:1px solid #0000;align-items:center;font-weight:500;text-decoration:none;display:inline-flex}.site-nav a:hover{color:var(--fg);background:var(--bg-surface)}.site-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft);font-weight:600}main{max-inline-size:var(--page-max);padding:var(--space-7) var(--space-4) var(--space-9);margin-inline:auto}.page-section{margin-block-end:var(--space-9)}.page-section>h2{margin-block-start:0;padding-inline-start:var(--space-4);position:relative}.page-section>h2:before{content:"";background:var(--accent);border-radius:2px;block-size:1.1em;inline-size:3px;position:absolute;inset-block-start:.15em;inset-inline-start:0}.lede{font-size:var(--text-lg);color:var(--fg-muted);max-inline-size:var(--measure);line-height:1.5}.breadcrumbs{font-size:var(--text-sm);color:var(--fg-subtle);margin-block-end:var(--space-5)}.breadcrumbs ol{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.breadcrumbs li{gap:var(--space-2);align-items:center;margin:0;display:inline-flex}.breadcrumbs a{min-block-size:24px;color:var(--fg-muted);align-items:center;text-decoration:none;display:inline-flex}.breadcrumbs a:hover{color:var(--accent);text-decoration:underline}.breadcrumbs li:not(:last-child):after{content:"›";color:var(--fg-subtle);font-size:var(--text-base);opacity:.6}.breadcrumbs [aria-current=page]{color:var(--fg);font-weight:500}.search-form{gap:var(--space-2);flex-wrap:wrap;align-items:center;max-inline-size:42rem;display:flex}.search-form label{font-weight:500;font-size:var(--text-sm);color:var(--fg-muted);flex:100%}input[type=search],input[type=text],select{font:inherit;color:var(--fg);background:var(--bg-inset);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-block-size:44px;inline-size:100%;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex:16rem}input[type=search]:focus,input[type=text]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}input[type=search]::placeholder{color:var(--fg-subtle)}button,.button{font:inherit;min-block-size:44px;min-inline-size:44px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-soft);background:var(--bg-inset);color:var(--fg);cursor:pointer;align-items:center;gap:var(--space-2);font-weight:500;font-size:var(--text-sm);transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);display:inline-flex}button:hover,.button:hover{background:var(--bg-surface);border-color:var(--border)}button:active{transform:translateY(1px)}button[type=submit]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}button[type=submit]:hover{background:var(--link-hover);border-color:var(--link-hover)}.hero-section{border-block-end:1px solid var(--border-faint);margin-block-end:var(--space-9);padding-block-end:var(--space-7);position:relative}.hero-section:before{content:"";background-image:radial-gradient(var(--border-soft) 1px, transparent 1px);opacity:.4;pointer-events:none;z-index:-1;background-size:16px 16px;block-size:200px;inline-size:200px;position:absolute;inset-block-start:-2rem;inset-inline-end:-1rem}.hero-section h1{font-size:var(--text-3xl);max-inline-size:18ch}.hero-search{max-inline-size:36rem;margin-block-start:var(--space-5)}.hero-search input[type=search]{min-block-size:52px;font-size:var(--text-base);padding:var(--space-4) var(--space-5)}.hero-search button[type=submit]{min-block-size:52px;font-size:var(--text-base);padding-inline:var(--space-5)}.card-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));margin:0;padding:0;list-style:none;display:grid}.card{gap:var(--space-2);padding:var(--space-5);border:1px solid var(--border-faint);border-radius:var(--radius-lg);background:var(--bg-inset);box-shadow:var(--shadow-card);transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);flex-direction:column;display:flex}.card:hover{box-shadow:var(--shadow-pop);border-color:var(--border-soft);transform:translateY(-2px)}.card__title{font-size:var(--text-lg);letter-spacing:-.01em;margin:0;font-weight:500}.card__title a{color:var(--fg);text-decoration:none}.card__title a:hover{color:var(--accent);text-decoration:underline}.card__summary{color:var(--fg-muted);font-size:var(--text-sm);margin:0;line-height:1.55}.card__meta{gap:var(--space-2);font-size:var(--text-xs);flex-wrap:wrap;margin:0;margin-block-start:auto;padding-block-start:var(--space-2);display:flex}.pill{padding:var(--space-1) var(--space-2);background:var(--tag-bg);color:var(--tag-fg);border:1px solid var(--tag-border);white-space:nowrap;font-size:var(--text-xs);transition:background var(--transition-fast), color var(--transition-fast);border-radius:999px;align-items:center;font-weight:500;text-decoration:none;display:inline-flex}a.pill:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);text-decoration:none}.pill--difficulty{background:var(--accent-soft);color:var(--accent);border-color:#0000;font-weight:600}.card[data-difficulty=beginner]{border-inline-start:3px solid var(--accent)}.card[data-difficulty=intermediate]{border-inline-start:3px solid var(--focus)}.card[data-difficulty=advanced]{border-inline-start:3px solid #be123c}.task-group{margin-block:var(--space-5) var(--space-8)}.task-group__head{gap:var(--space-2);border-block-end:2px solid var(--border-faint);flex-wrap:wrap;align-items:baseline;margin-block-end:var(--space-4);padding-block-end:var(--space-3);display:flex}.task-group__head h3{font-size:var(--text-xl);margin:0;font-weight:600}.task-group__note{margin:0 0 var(--space-4);color:var(--fg-muted);font-size:var(--text-sm);max-inline-size:var(--measure);line-height:1.55}.answer-block{border-inline-start:4px solid var(--accent);background:var(--accent-soft);padding:var(--space-5) var(--space-6);border-radius:0 var(--radius-lg) var(--radius-lg) 0;margin-block-end:var(--space-6)}.answer-block h2{font-size:var(--text-lg);color:var(--fg);margin-block-start:0;font-weight:600}.answer-block h2:first-of-type{margin-block-start:0}.answer-block h2+p{margin-block-start:var(--space-2)}.answer-block p{color:var(--fg);margin-block-end:var(--space-3)}.answer-block p:last-child{margin-block-end:0}.meta-table{gap:var(--space-3) var(--space-4);margin-block:var(--space-4) var(--space-6);padding:var(--space-5);border:1px solid var(--border-faint);border-radius:var(--radius-lg);background:var(--bg-surface);font-size:var(--text-sm);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));display:grid}.meta-table div{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.meta-table dt{color:var(--fg-subtle);font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.meta-table dd{gap:var(--space-1);flex-wrap:wrap;margin:0;display:flex}.code-block{margin-block:var(--space-5)}.code-block__bar{gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--border-faint);border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--bg-surface);font-size:var(--text-sm);border-block-end:none;flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.code-block__lang{color:var(--fg-subtle);font-weight:600;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.copy-button{min-block-size:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-soft)}.copy-button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}pre{font-family:var(--font-mono);font-size:var(--text-sm);tab-size:2;margin:0;line-height:1.65}.code-block pre{border:1px solid var(--border-faint);border-radius:0 0 var(--radius-md) var(--radius-md);padding:var(--space-4) var(--space-5);background:var(--bg-surface);border-block-start:none;overflow-x:auto}.code-block pre:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}code{font-family:var(--font-mono);font-size:.9em}:not(pre)>code{background:var(--bg-surface);border:1px solid var(--border-faint);border-radius:var(--radius-sm);overflow-wrap:anywhere;padding:.1em .35em;font-size:.875em}pre.shiki{background-color:var(--shiki-light-bg,var(--bg-surface));color:var(--shiki-light,inherit)}pre.shiki code span{color:var(--shiki-light)}@media (prefers-color-scheme:dark){pre.shiki{background-color:var(--shiki-dark-bg,var(--bg-surface));color:var(--shiki-dark,inherit)}pre.shiki code span{color:var(--shiki-dark)}}.status-region{min-block-size:1.5em;font-size:var(--text-sm);color:var(--status-fg);margin-block-start:var(--space-2)}.rel-list{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.rel-list li{margin:0}.rel-item{gap:var(--space-1);padding:var(--space-4) var(--space-5);border:1px solid var(--border-faint);border-radius:var(--radius-md);background:var(--bg-inset);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid}.rel-item:hover{border-color:var(--border-soft);box-shadow:var(--shadow-card)}.rel-item__type{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:0;font-weight:600}.rel-item__reason{font-size:var(--text-sm);color:var(--fg-muted);margin:0}.filters{gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border-faint);border-radius:var(--radius-lg);background:var(--bg-surface);flex-wrap:wrap;align-items:end;margin-block-end:var(--space-5);display:flex}.filters fieldset{border:1px solid var(--border-faint);border-radius:var(--radius-md);padding:var(--space-3);gap:var(--space-1);min-inline-size:12rem;margin:0;display:grid}.filters legend{font-weight:600;font-size:var(--text-sm);padding-inline:var(--space-2);color:var(--fg)}.filters label{gap:var(--space-2);min-block-size:44px;font-size:var(--text-sm);color:var(--fg-muted);align-items:center;display:flex}.filters input[type=checkbox]{block-size:24px;inline-size:24px;accent-color:var(--accent)}.results{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.result-count{font-size:var(--text-sm);color:var(--fg-muted);margin-block:0 var(--space-3)}.empty-state{padding:var(--space-6);border:1px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);text-align:center}.empty-state h2{margin-block-start:0}.page-section ul{font-size:var(--text-sm)}.page-section li a{font-weight:500}.results li{gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--border-faint);border-radius:var(--radius-md);background:var(--bg-inset);transition:border-color var(--transition-fast);flex-wrap:wrap;align-items:center;display:flex}.results li:hover{border-color:var(--border-soft)}.results li a{font-weight:500}.footer{border-block-start:1px solid var(--border-faint);background:var(--bg-surface);margin-block-start:var(--space-9)}.footer__inner{max-inline-size:var(--page-max);padding:var(--space-7) var(--space-4) var(--space-5);gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));margin-inline:auto;display:grid}.footer h2{font-size:var(--text-sm);margin-block:0 var(--space-3);color:var(--fg);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.footer ul{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.footer a{min-block-size:32px;color:var(--fg-muted);font-size:var(--text-sm);transition:color var(--transition-fast);align-items:center;text-decoration:none;display:inline-flex}.footer a:hover{color:var(--accent);text-decoration:underline}.footer__note{font-size:var(--text-sm);color:var(--fg-subtle);max-inline-size:var(--page-max);padding:0 var(--space-4) var(--space-6);margin-inline:auto;line-height:1.6}.two-column{gap:var(--space-6);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=62rem){.two-column{grid-template-columns:minmax(0,1fr) minmax(0,20rem);align-items:start}.two-column__aside{position:sticky;inset-block-start:calc(var(--header-height) + var(--space-5))}}.table-wrap{border-radius:var(--radius-md);margin-block-end:var(--space-5);overflow-x:auto}table{border-collapse:collapse;inline-size:100%;font-size:var(--text-sm)}caption{text-align:start;color:var(--fg-muted);padding-block-end:var(--space-2);font-weight:600}th,td{border:1px solid var(--border-faint);padding:var(--space-3);text-align:start;vertical-align:top}th{background:var(--bg-surface);font-weight:600}.prose{max-inline-size:var(--measure)}.prose h2,.prose h3{scroll-margin-block-start:calc(var(--header-height) + var(--space-4))}.prose :where(ul,ol) li{margin-block-start:var(--space-2)}.tagline{color:var(--fg-subtle);font-size:var(--text-sm);margin:0;line-height:1.55}.external-cue{font-size:var(--text-xs);color:var(--fg-subtle);margin-inline-start:var(--space-1)}[hidden]{display:none!important}.visually-hidden,.visually-off{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.copy-button,.code-block__status{display:none}html[data-js=enabled] .copy-button{display:inline-flex}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}button:active,.card:hover{transform:none}}@media print{:root{--bg:#fff;--bg-surface:#fff;--bg-raised:#fff;--bg-inset:#fff;--fg:#000;--fg-muted:#333;--fg-subtle:#555;--link:#000;--border-faint:#ccc;--border-soft:#999}body{font-size:11pt}.site-header,.site-nav,.footer,.search-form,.filters,.copy-button,.code-block__bar,.breadcrumbs,.status-region,.no-print{display:none!important}main{max-inline-size:none;padding:0}.answer-block,.card,.rel-item,.meta-table{box-shadow:none;background:#fff;border:1px solid #767676}pre.shiki{white-space:pre-wrap;border-color:#767676;color:#000!important;background:#fff!important}pre.shiki code span{color:#000!important}a[href^="https://devexamples.com"]:after{content:" (" attr(href) ")";color:#333;font-size:9pt}.print-url{color:#333;margin-block-end:var(--space-4);font-size:10pt;display:block!important}}.print-url{display:none}