*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html.translated-rtl{direction:rtl}body,h1,h2,h3,h4,figure,blockquote,dl,dd{margin-block-end:0}body{font:-apple-system-body;font-size:100%;line-height:var(--minimalist-typography-document-line-height);text-rendering:optimizelegibility;min-block-size:100dvb}summary{cursor:pointer}button,input,label{line-height:var(--minimalist-typography-interactive-line-height)}input,button,textarea,select{font:inherit}textarea:not([rows]){min-block-size:10em}h1,h2,h3,h4{text-wrap:balance}img,picture,video,canvas,svg{block-size:auto;max-inline-size:100%;display:block}:target{scroll-margin-block:5ex}:root{--surface-0:oklch(13% .015 280);--surface-1:oklch(17% .012 280);--surface-2:oklch(22% .01 280);--surface-code:oklch(14% .02 280);--text-primary:oklch(92% .01 280);--text-secondary:oklch(70% .015 280);--accent:oklch(82% .16 85);--accent-glow:oklch(82% .16 85/.15);--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem}body{background-color:var(--surface-0);color:var(--text-primary);margin:0;font-family:system-ui,sans-serif;line-height:1.6}body:before{content:"";opacity:.03;pointer-events:none;z-index:9999;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}code{font-family:DM Mono,ui-monospace,monospace;font-size:.9em}a{color:var(--accent);text-underline-offset:.15em;text-decoration-thickness:.0625rem;transition:color .2s}a:hover{color:oklch(90% .14 85)}strong{color:var(--text-primary);font-weight:600}.visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.site-header{text-align:center;margin-block-end:clamp(2rem,6vw,5rem);padding-block-start:clamp(2rem,8vw,6rem);padding-inline:clamp(1.5rem,5vw,6rem)}.site-header h1{font-optical-sizing:auto;letter-spacing:-.03em;margin:0;font-family:Fraunces,serif;font-size:clamp(2.5rem,8vw,5.5rem);font-weight:800;line-height:1}.title-fn{background:linear-gradient(135deg, var(--accent), oklch(70% .14 50));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.title-parens{color:var(--text-secondary)}.subtitle{color:var(--text-secondary);max-inline-size:40rem;margin-block-start:1rem;margin-inline:auto;font-size:clamp(1rem,2.5vw,1.25rem)}.attribution{background:var(--surface-1);border-radius:var(--radius-sm);color:var(--text-secondary);border:1px solid oklch(82% .16 85/.12);max-inline-size:44rem;margin-block-start:clamp(2rem,4vw,3rem);margin-inline:auto;padding-block:clamp(1rem,2.5vw,1.5rem);padding-inline:clamp(1.25rem,3vw,2rem);font-size:clamp(.875rem,2vw,1rem)}.baseline-badge{--baseline-badge-color:#212121;background-color:var(--accent);color:var(--baseline-badge-color);letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;border:1px solid oklch(82% .16 85/.3);border-radius:2rem;margin-inline-start:.25rem;padding-block:.15rem;padding-inline:.75rem;font-size:.75rem;font-weight:600;display:inline-block}@supports (color:contrast-color(rebeccapurple)){.baseline-badge{--baseline-badge-color:contrast-color(var(--accent))}}.unsupported-notice{max-inline-size:36rem;margin-inline:auto;padding-inline:1.5rem}.notice-content{border-radius:var(--radius-lg);text-align:center;background-color:oklch(20% .04 30);border:1px solid oklch(40% .1 30);padding:2rem}.notice-content h2{color:oklch(85% .1 30);font-family:Fraunces,serif;font-size:1.5rem}.notice-content ul{padding:0;list-style:none}.notice-content li{padding-block:.25rem}.notice-content a{color:oklch(70% .12 30)}main{max-inline-size:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,3rem)}.playground-section{margin-block-end:clamp(3rem,8vw,6rem)}.section-header{margin-block-end:2rem}.section-header h2{font-optical-sizing:auto;letter-spacing:-.02em;margin:0;font-family:Fraunces,serif;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700}.section-description{color:var(--text-secondary);max-inline-size:42rem;margin-block-start:.5rem;font-size:1.05rem}.picker-controls,.tint-controls,.card-builder-controls,.style-query-controls{margin-block-end:1.5rem}.picker-controls label,.tint-controls label,.card-builder-controls label,.style-query-controls label{color:var(--text-secondary);letter-spacing:.03em;text-transform:uppercase;margin-block-end:.5rem;font-size:.85rem;font-weight:500;display:block}.picker-input-group{align-items:center;gap:.75rem;display:flex}input[type=color]{border:.125rem solid var(--surface-2);border-radius:var(--radius-sm);cursor:pointer;background:0 0;block-size:3rem;inline-size:3rem;padding:.2rem;transition:border-color .2s}input[type=color]:hover,input[type=color]:focus-visible{border-color:var(--accent)}input[type=text]{background-color:var(--surface-1);border:.125rem solid var(--surface-2);border-radius:var(--radius-sm);color:var(--text-primary);inline-size:10rem;padding-block:.6rem;padding-inline:.75rem;font-family:DM Mono,ui-monospace,monospace;font-size:1rem;transition:border-color .2s}input[type=text]:focus-visible{border-color:var(--accent);outline:.125rem solid var(--accent-glow);outline-offset:.0625rem}input[type=range]{accent-color:var(--accent);inline-size:min(100%,20rem);margin-block-start:.25rem}.preview-panel{background:var(--bg);border-radius:var(--radius-lg);color:contrast-color(var(--bg));padding:clamp(1.5rem,4vw,3rem);transition:background-color .25s}@media (prefers-reduced-motion:reduce){.preview-panel{transition:none}}.preview-sample-text{margin:0;font-family:Fraunces,serif;font-size:clamp(1.25rem,3vw,2rem);font-weight:500}.preview-meta{flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:1.5rem;display:flex}.meta-label{letter-spacing:.08em;opacity:.6;text-transform:uppercase;font-size:.7rem;font-weight:600}.meta-label:not(:first-child){margin-inline-start:.75rem}.preview-meta code{background-color:oklch(0% 0 0/.15);border-radius:.25rem;padding-block:.15rem;padding-inline:.5rem;font-size:.9rem}.contrast-result{font-weight:600}.palette-controls{flex-wrap:wrap;gap:1.5rem;margin-block-end:1.5rem;display:flex}.palette-grid{--base:#63c;flex-wrap:wrap;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.palette-swatch{background:var(--swatch-color);border-radius:var(--radius-md);color:contrast-color(var(--swatch-color));flex:12rem;min-block-size:7rem;padding:1.25rem;transition:transform .15s,box-shadow .15s;position:relative}@media (prefers-reduced-motion:no-preference){.palette-swatch:hover{transform:translateY(-2px);box-shadow:0 8px 24px oklch(0% 0 0/.4)}}@media (prefers-reduced-motion:reduce){.palette-swatch:hover{box-shadow:0 8px 24px oklch(0% 0 0/.4)}}.swatch-name{font-family:Fraunces,serif;font-size:1.1rem;font-weight:600;display:block}.swatch-value{opacity:.75;text-overflow:ellipsis;white-space:nowrap;margin-block-start:.25rem;font-family:DM Mono,ui-monospace,monospace;font-size:.75rem;display:block;overflow:hidden}.swatch-copy-button{color:inherit;cursor:pointer;background-color:oklch(0% 0 0/.12);border:none;border-radius:2rem;justify-content:center;align-items:center;padding:.35rem;transition:background-color .15s,transform .15s;display:flex;position:absolute;inset-block-end:.75rem;inset-inline-end:.75rem}.swatch-copy-button:hover{background-color:oklch(0% 0 0/.25)}@media (prefers-reduced-motion:no-preference){.swatch-copy-button:hover{transform:scale(1.1)}}.swatch-copy-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.swatch-copy-icon{block-size:1.125rem;inline-size:1.125rem;display:block}.palette-swatch[data-copied] .swatch-name:after{content:" — copied!";opacity:.7;font-weight:400}.icons-controls{margin-block-end:1.5rem}.icons-preview{background:var(--icons-bg);border-radius:var(--radius-lg);color:contrast-color(var(--icons-bg));padding:clamp(1.5rem,4vw,2.5rem);transition:background-color .25s}@media (prefers-reduced-motion:reduce){.icons-preview{transition:none}}.icons-toolbar{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.icon-button{border-radius:var(--radius-sm);color:inherit;cursor:pointer;background-color:oklch(0% 0 0/.1);border:1px solid oklch(0% 0 0/.08);justify-content:center;align-items:center;padding:.75rem;transition:background-color .15s,transform .15s;display:flex}.icon-button:hover{background-color:oklch(0% 0 0/.2)}@media (prefers-reduced-motion:no-preference){.icon-button:hover{transform:translateY(-1px)}}.icon-button:focus-visible{outline:.125rem solid var(--accent);outline-offset:.125rem}.icon-svg{block-size:1.5rem;inline-size:1.5rem;display:block}.icons-credit{color:var(--text-secondary);margin-block-start:1.25rem;font-size:.85rem}.external-link-icon{vertical-align:-.1em;block-size:.85em;inline-size:.85em;margin-inline-start:.25em;display:inline-block}.technique-card{background-color:var(--surface-1);border:.0625rem solid var(--surface-2);border-radius:var(--radius-lg);margin-block-end:2rem;padding:clamp(1.5rem,4vw,2.5rem)}.technique-card h3{margin:0;font-family:Fraunces,serif;font-size:1.4rem;font-weight:600}.technique-card>p{color:var(--text-secondary);max-inline-size:40rem;margin-block:.5rem 1.5rem}.technique-caution{border-inline-start:.1875rem solid var(--accent);margin-block:1rem;padding:.5rem .75rem;font-size:.85rem}.tint-controls label[for=tint-slider]{margin-block-start:1rem}.tint-comparison{flex-wrap:wrap;gap:1rem;margin-block:1.5rem;display:flex}.tint-preview{background:var(--bg);border-radius:var(--radius-md);flex:14rem;padding:1.5rem;transition:background-color .25s}@media (prefers-reduced-motion:reduce){.tint-preview{transition:none}}.tint-preview-pure{color:contrast-color(var(--bg))}.tint-preview-mixed{color:color-mix(in oklch, var(--bg) var(--tint-pct), contrast-color(var(--bg)))}.tint-label{letter-spacing:.08em;opacity:.6;text-transform:uppercase;margin-block-end:.75rem;font-size:.7rem;font-weight:600;display:block}.style-query-demo{margin-block:1.5rem}.style-query-card-container{background:var(--bg);border-radius:var(--radius-lg);--contrast:contrast-color(var(--bg));padding:2rem;transition:background-color .25s;container-type:inline-size}@media (prefers-reduced-motion:reduce){.style-query-card-container{transition:none}}.style-query-card{max-inline-size:28rem}.style-query-card-title{color:contrast-color(var(--bg));margin:0;font-family:Fraunces,serif;font-size:1.5rem;font-weight:700}.style-query-card-body{color:contrast-color(var(--bg));opacity:.85;margin-block:.5rem 1rem}.style-query-badge{letter-spacing:.04em;text-transform:uppercase;border-radius:2rem;padding-block:.2rem;padding-inline:.75rem;font-size:.75rem;font-weight:600;display:inline-block}@container style(--contrast:white){.style-query-card-title{color:#faebd7}.style-query-card-body{color:oklch(85% .02 80)}.style-query-badge{color:oklch(20% .04 80);background-color:oklch(85% .06 80)}}@container style(--contrast:black){.style-query-card-title{color:#191970}.style-query-card-body{color:oklch(25% .04 260)}.style-query-badge{color:oklch(90% .02 260);background-color:oklch(30% .1 260)}}.card-demo{margin-block:1.5rem}.demo-card{background:var(--card-bg);border-radius:var(--radius-lg);color:contrast-color(var(--card-bg));max-inline-size:28rem;padding:clamp(1.5rem,4vw,2.5rem);transition:background-color .25s}@media (prefers-reduced-motion:reduce){.demo-card{transition:none}}.demo-card-heading{margin:0;font-family:Fraunces,serif;font-size:1.5rem;font-weight:700}.demo-card-body{opacity:.85;margin-block:.75rem 1.5rem}.demo-card-button{background:contrast-color(var(--card-bg));border-radius:var(--radius-sm);color:var(--card-bg);cursor:pointer;border:none;padding-block:.7rem;padding-inline:1.5rem;font-size:.95rem;font-weight:600;transition:opacity .15s,transform .15s}.demo-card-button:hover{opacity:.9}@media (prefers-reduced-motion:no-preference){.demo-card-button:hover{transform:translateY(-1px)}}.demo-card-button:focus-visible{outline:.1875rem solid var(--accent);outline-offset:.1875rem}.detection-result{background-color:var(--surface-1);border:.0625rem solid var(--surface-2);border-radius:var(--radius-md);align-items:center;gap:1rem;margin-block-end:2rem;padding-block:1.25rem;padding-inline:1.5rem;display:flex}.detection-result p{margin:0}.detection-icon{flex-shrink:0;font-size:1.5rem}.detection-result-supported{border-color:oklch(50% .15 150/.4)}.detection-result-unsupported{border-color:oklch(50% .15 30/.4)}.code-snippet{background-color:var(--surface-code);border:.0625rem solid var(--surface-2);border-radius:var(--radius-md);margin-block-start:1.5rem;padding-block:1.25rem;padding-inline:1.5rem;overflow-x:auto}.detection-methods{flex-wrap:wrap;gap:1.5rem;display:flex}.detection-methods .code-snippet{flex:20rem}.detection-methods h3{margin:0;margin-block-end:.75rem;font-size:.95rem;font-weight:600}.code-snippet pre{margin:0}.code-snippet code{color:var(--text-secondary);font-size:.85rem;line-height:1.7}.code-prop{color:oklch(75% .12 200)}.code-val{color:oklch(78% .14 140)}.code-fn{color:oklch(82% .14 85)}.code-str{color:oklch(78% .12 80)}.code-kw{color:oklch(75% .15 340)}.code-sel{color:oklch(80% .1 60)}.code-comment{color:var(--text-secondary);opacity:.5}.site-footer{border-block-start:.0625rem solid var(--surface-2);text-align:center;margin-block-start:clamp(3rem,8vw,6rem);padding-block:2rem}.site-footer p{color:var(--text-secondary);margin:0;font-size:.9rem}.footer-resources{margin-block-start:.75rem}