:root{--color-paper:oklch(97% .012 95);--color-paper-2:oklch(94.5% .018 95);--color-paper-3:oklch(91% .024 95);--color-surface:oklch(99% .006 95);--color-ink:oklch(20% .012 250);--color-ink-2:oklch(34% .012 250);--color-muted:oklch(45% .012 250);--color-rule:oklch(84% .018 95);--color-rule-strong:oklch(70% .025 95);--color-accent:oklch(86% .18 95);--color-accent-deep:oklch(70% .17 95);--color-accent-ink:oklch(20% .012 250);--color-cyan:oklch(82% .09 222);--color-cyan-soft:oklch(94% .035 222);--color-coral:oklch(72% .17 28);--color-coral-soft:oklch(94% .035 28);--color-lavender:oklch(82% .08 305);--color-lavender-soft:oklch(95% .03 305);--color-success:oklch(60% .15 145);--color-error:oklch(58% .2 28);--color-focus:oklch(48% .17 265);--color-success-text:oklch(48% .15 145);--color-error-text:oklch(52% .2 28);--color-accent-text:oklch(50% .17 95);--color-stage:oklch(22% .012 250);--color-stage-2:oklch(28% .014 250);--color-stage-ink:oklch(96% .008 95);--font-display:"Roboto", sans-serif;--font-body:"Roboto", sans-serif;--font-code:"Roboto", sans-serif;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:9rem;--text-xs:.8125rem;--text-sm:.9375rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.5625rem;--text-xl:1.953rem;--text-2xl:2.441rem;--text-display:clamp(2.75rem, 5vw + 1rem, 5.25rem);--radius-input:.75rem;--radius-card:1.25rem;--radius-panel:1.75rem;--radius-pill:999px;--rule-thin:1px;--dur-instant:.1s;--dur-short:.18s;--dur-medium:.28s;--dur-reveal:.52s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-press:cubic-bezier(.2, .7, .3, 1);--z-base:1;--z-raised:10;--z-sticky:200;--z-toast:500;--shell:78rem;--page-gutter:clamp(1rem, 4vw, 3rem)}*{box-sizing:border-box}html,body{scroll-behavior:smooth;margin:0;overflow-x:clip}html{scroll-padding-top:7.5rem}[id]{scroll-margin-top:7.5rem}body{background:var(--color-paper);min-width:20rem;color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.55}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.skip-link{z-index:var(--z-toast);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-paper);font-weight:700;text-decoration:none;position:absolute;inset-block-start:var(--space-xs);inset-inline-start:var(--space-xs);transform:translateY(-200%)}.skip-link:focus-visible{transform:translateY(0)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::selection{background:var(--color-accent);color:var(--color-accent-ink)}.section-shell{width:min(100%, var(--shell));padding-inline:var(--page-gutter);margin-inline:auto}.site-nav{--banner-h:2.75rem;--bar-h:4.25rem;z-index:var(--z-sticky);transition:transform var(--dur-medium) var(--ease-out);position:fixed;inset:0 0 auto;transform:translateY(0)}.site-nav.compact{transform:translateY(calc(var(--banner-h) * -1))}.site-nav.dismissed{--banner-h:0rem;transform:none}.site-nav.dismissed .announcement{display:none}.announcement{min-height:var(--banner-h);background:var(--color-accent);color:var(--color-accent-ink);border-bottom:var(--rule-thin) solid var(--color-accent-deep);justify-content:center;align-items:center;padding-inline:3.5rem;display:flex;position:relative}.announcement p{font-size:var(--text-sm);text-align:center;text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:500;line-height:1;overflow:hidden}.announcement a{text-underline-offset:.18em;font-weight:700}.announcement__dismiss{border-radius:var(--radius-pill);width:2rem;height:2rem;color:var(--color-ink);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-instant) var(--ease-out);background:0 0;border:0;place-items:center;padding:0;font-size:1.3rem;line-height:1;display:grid;position:absolute;inset-inline-end:max(var(--space-sm), env(safe-area-inset-right))}.announcement__dismiss:active{transform:translateY(1px)}.nav-bar{min-height:var(--bar-h);align-items:center;gap:var(--space-md);padding-inline:var(--page-gutter);background:color-mix(in oklch, var(--color-paper) 91%, transparent);border-bottom:var(--rule-thin) solid var(--color-rule);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);grid-template-columns:1fr auto;display:grid}.brand{width:fit-content;color:var(--color-ink);font-family:var(--font-display);letter-spacing:-.055em;white-space:nowrap;align-items:center;font-size:1.3rem;font-weight:900;line-height:1;text-decoration:none;display:inline-flex}.brand-mark{background:var(--color-coral);width:.48em;height:.48em;animation:brand-pulse 4s var(--ease-in-out) infinite;border-radius:42% 58% 58% 42%;margin-inline:.13em;display:inline-block}.nav-links{align-items:center;gap:var(--space-lg);display:none}.nav-links a,.nav-action,.text-link,.download-link,.site-footer a{white-space:nowrap;font-weight:700;line-height:1;text-decoration:none}.nav-links a{font-size:var(--text-sm);position:relative}.nav-links a:after,.text-link:after,.download-link:after,.site-footer a:after{background:var(--color-coral);content:"";transform-origin:100%;height:2px;transition:transform var(--dur-short) var(--ease-out);position:absolute;inset:auto 0 -.3rem;transform:scaleX(0)}.nav-action{border:var(--rule-thin) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-ink);min-height:2.75rem;color:var(--color-paper);font-size:var(--text-sm);transition:transform var(--dur-instant) var(--ease-out), background-color var(--dur-short) var(--ease-out);justify-content:center;align-items:center;padding-inline:1rem;display:inline-flex}.nav-action:focus-visible{outline-color:var(--color-paper);box-shadow:0 0 0 6px var(--color-focus)}.nav-action:active{transform:translateY(1px)}main{padding-top:7rem}main.banner-dismissed{padding-top:4.25rem}.hero{gap:var(--space-2xl);padding-block:clamp(3rem,7vw,5.5rem) clamp(4.5rem,10vw,7.5rem);display:grid}.hero__copy{min-width:0;animation:enter-up var(--dur-reveal) var(--ease-out) both}.hero h1,.designer-heading h2,.api-section h2{overflow-wrap:anywhere;min-width:0;color:var(--color-ink);font-family:var(--font-display);letter-spacing:-.055em;margin:0;font-style:normal;font-weight:900}.hero h1{max-width:13ch;font-size:clamp(3rem,8vw,6.4rem);line-height:.95}.hero__copy>p{max-width:41rem;margin:var(--space-lg) 0 0;color:var(--color-ink-2);font-size:clamp(1.05rem,1.5vw,1.25rem)}.hero__actions{align-items:center;gap:var(--space-lg);margin-top:var(--space-xl);flex-wrap:wrap;display:flex}.btn{justify-content:center;align-items:center;gap:var(--space-xs);border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;min-height:3rem;transition:transform .14s var(--ease-press), box-shadow .14s var(--ease-press), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);border:0;padding-inline:1.35rem;font-weight:700;line-height:1;text-decoration:none;display:inline-flex;position:relative;transform:translateY(0)}.btn--push{--btn-edge:var(--color-accent-deep);background:var(--color-accent);color:var(--color-accent-ink);box-shadow:0 4px 0 0 var(--btn-edge), 0 7px 14px -5px color-mix(in oklch, var(--color-accent-deep) 55%, transparent)}.btn:active{transition-duration:70ms;transform:translateY(3px)}.btn--push:active{box-shadow:0 1px 0 0 var(--btn-edge), 0 2px 6px -3px color-mix(in oklch, var(--color-accent-deep) 45%, transparent)}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}.text-link,.download-link,.site-footer a{width:fit-content;position:relative}.hero__proof{align-self:end;gap:var(--space-sm);animation:enter-up var(--dur-reveal) var(--ease-out) .12s both;grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.proof-item{min-height:8.5rem;padding:var(--space-lg);border-radius:var(--radius-card);color:var(--color-ink);flex-direction:column;justify-content:space-between;display:flex}.proof-item:first-child{grid-column:1/-1;margin-inline-end:clamp(1.5rem,10vw,5rem)}.proof-item--pear{background:var(--color-accent);box-shadow:0 5px 0 var(--color-accent-deep);transform:rotate(-1deg)}.proof-item--cyan{background:var(--color-cyan)}.proof-item--lavender{background:var(--color-lavender)}.proof-item strong{font-variant-numeric:tabular-nums;letter-spacing:-.06em;font-size:clamp(2.75rem,7vw,5rem);font-weight:900;line-height:.85}.proof-item span{font-size:var(--text-sm);font-weight:700}.designer-band{padding-block:var(--space-3xl);background:var(--color-paper-2);border-block:var(--rule-thin) dashed var(--color-rule-strong);color:var(--color-ink)}.designer-heading{align-items:end;gap:var(--space-lg);margin-bottom:var(--space-xl);display:grid}.designer-heading h2,.api-section h2{font-size:clamp(2.5rem,5vw,4.8rem);line-height:.98}.designer-heading p,.api-section__copy p{max-width:40rem;margin:var(--space-sm) 0 0;color:var(--color-ink-2);font-size:var(--text-md)}.designer-heading>code{border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-pill);background:var(--color-surface);width:fit-content;font-family:var(--font-code);font-size:var(--text-sm);white-space:nowrap;padding:.65rem .9rem;font-weight:700}.designer-shell{gap:var(--space-xl);min-width:0;display:grid}.control-panel,.preview-card,.url-card,.api-reference{border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:0 16px 40px -28px color-mix(in oklch, var(--color-ink) 34%, transparent)}.control-panel{min-width:0;overflow:clip}.control-section{padding:clamp(1.25rem,4vw,2rem)}.control-section+.control-section{border-top:var(--rule-thin) dashed var(--color-rule-strong)}.section-title-row{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.section-title-row h3{font-size:var(--text-lg);letter-spacing:-.035em;margin:0;font-weight:900}.field-grid,.color-grid{gap:var(--space-lg);min-width:0;display:grid}.field,.color-editor{min-width:0}.field-label{margin-bottom:var(--space-xs);color:var(--color-ink);font-size:var(--text-sm);font-weight:700;display:block}.text-input,.space-select{border:var(--rule-thin) solid var(--color-rule-strong);outline-offset:1px;background:var(--color-surface);min-height:3rem;color:var(--color-ink);transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);outline:2px solid #0000}.text-input{border-radius:var(--radius-input);width:100%;padding-inline:.9rem}.text-input::placeholder{color:var(--color-muted);opacity:1}.text-input:focus-visible,.space-select:focus-visible,.native-color:focus-visible,.size-slider:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-color:var(--color-ink)}.text-input:disabled,.space-select:disabled,.native-color:disabled{opacity:.55;cursor:not-allowed}.text-input[aria-invalid=true],.color-editor.error .color-channel__control,.size-exact-control.error{border-color:var(--color-error);background:var(--color-coral-soft)}.field-help{min-height:1lh;margin:var(--space-xs) 0 0;color:var(--color-muted);font-size:var(--text-sm)}.field-help.error-text{color:var(--color-error-text);font-weight:700}.control-intro{max-width:42rem;margin:calc(var(--space-sm) * -1) 0 var(--space-lg);color:var(--color-ink-2)}.size-control{align-items:center;column-gap:var(--space-md);row-gap:var(--space-2xs);grid-template-columns:minmax(0,1fr) 5.75rem;grid-template-areas:"label label""slider exact""range empty";min-width:0;display:grid}.size-control>.field-label{grid-area:label;margin:0}.letter-spacing-control{margin-top:var(--space-lg)}.size-slider{width:100%;min-height:2.75rem;accent-color:var(--color-accent-deep);cursor:pointer;grid-area:slider;margin:0}.size-range{color:var(--color-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;grid-area:range;justify-content:space-between;display:flex}.size-exact-control{border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-input);outline-offset:1px;background:var(--color-surface);min-height:3rem;transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);outline:2px solid #0000;grid-area:exact;align-items:center;display:flex}:is(.size-exact-control:has(input:focus-visible),.color-channel__control:has(input:focus-visible)){border-color:var(--color-ink);outline:3px solid var(--color-focus);outline-offset:2px}.size-exact-control input{width:100%;min-width:0;min-height:2.75rem;padding-inline:var(--space-sm) var(--space-xs);color:var(--color-ink);font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0}.size-exact-control>span{color:var(--color-muted);font-size:var(--text-sm);padding-inline-end:var(--space-sm);font-weight:700}.style-picker{border:0;min-width:0;margin:0;padding:0}.style-picker>.field-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.style-picker__grid{gap:var(--space-sm);min-width:0;display:grid}.style-option{align-content:space-between;gap:var(--space-md);min-width:0;min-height:6.25rem;padding:var(--space-md);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper);cursor:pointer;transition:transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);grid-template-columns:minmax(0,1fr);display:grid}.style-option:nth-child(3n+1){background:var(--color-paper)}.style-option:nth-child(3n+2){background:var(--color-cyan-soft)}.style-option:nth-child(3n){background:var(--color-lavender-soft)}.style-option.selected{border-color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-ink), 0 4px 0 var(--color-ink);transform:translateY(-2px)}.style-option input{opacity:0;width:1px;height:1px;position:absolute}.style-option:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:3px}.style-option__preview{align-items:center;min-width:0;min-height:2rem;display:flex;overflow:hidden}.style-option__preview img{max-width:100%;height:auto;display:block}.style-option__copy{justify-content:space-between;align-items:baseline;gap:var(--space-sm);display:flex}.style-option__copy strong{font-size:var(--text-sm);letter-spacing:.03em}.style-option__copy small{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.025em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.style-option[data-style=flatbar] .style-option__copy strong{letter-spacing:.065em}.style-option[data-style=flatbar] .style-option__copy small{letter-spacing:.04em}.color-editor{padding:var(--space-md);border-radius:var(--radius-card);background:var(--color-paper)}.color-editor:nth-child(2){background:var(--color-cyan-soft)}.color-editor:nth-child(3){background:var(--color-lavender-soft)}.color-editor:nth-child(4){background:var(--color-coral-soft)}.color-editor__head,.color-editor__row{gap:var(--space-sm);display:flex}.color-editor__head{justify-content:space-between;align-items:center}.color-editor__head .field-label{margin:0}.space-select{border-radius:var(--radius-pill);min-height:2.25rem;font-size:var(--text-base);padding-inline:.65rem;font-weight:700}.color-editor__row{margin-top:var(--space-sm);align-items:end}.native-color{border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-input);background:var(--color-surface);cursor:pointer;flex:0 0 3rem;width:3rem;height:3rem;padding:.22rem}.native-color::-webkit-color-swatch-wrapper{padding:0}.native-color::-webkit-color-swatch{border:0;border-radius:.45rem}.native-color::-moz-color-swatch{border:0;border-radius:.45rem}.color-channel-grid{gap:var(--space-xs);flex:1;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;display:grid}.color-channel-grid.single{grid-template-columns:minmax(0,1fr)}.color-channel{gap:var(--space-2xs);min-width:0;display:grid}.color-channel>span:first-child{color:var(--color-muted);font-size:var(--text-xs);font-weight:900}.color-channel__control{border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-input);outline-offset:1px;background:var(--color-surface);min-width:0;min-height:3rem;transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);outline:2px solid #0000;align-items:center;display:flex}.color-channel__control>span{padding-inline:var(--space-xs);color:var(--color-muted);font-size:var(--text-xs);font-weight:700}.color-channel__input{width:100%;min-width:0;min-height:2.75rem;padding-inline:var(--space-xs);color:var(--color-ink);font-size:var(--text-base);font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0}.color-channel-grid.single .color-channel__input{letter-spacing:.08em}.preview-column{align-content:start;gap:var(--space-lg);min-width:0;display:grid}.preview-card,.url-card{min-width:0;overflow:clip}.preview-card__head,.url-card__head{justify-content:space-between;align-items:center;gap:var(--space-md);min-height:4.75rem;padding:var(--space-md) var(--space-lg);border-bottom:var(--rule-thin) solid var(--color-rule);display:flex}.preview-card__head>div,.url-card__head>div{gap:var(--space-2xs);min-width:0;display:grid}.preview-card__head span,.url-card__head span{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700}.preview-card__head strong,.url-card__head strong{font-size:var(--text-md);line-height:1.1}.status-dot{align-items:center;gap:var(--space-xs);white-space:nowrap;display:inline-flex;color:var(--color-success-text)!important}.status-dot:before{border-radius:var(--radius-pill);background:var(--color-success);content:"";width:.55rem;height:.55rem}.status-dot.pending{color:var(--color-accent-text)!important}.status-dot.pending:before{background:var(--color-accent-deep)}.preview-stage{min-height:clamp(10.5rem,18vw,14rem);padding:var(--space-xl);background-color:var(--color-stage);background-image:linear-gradient(to right, color-mix(in oklch, var(--color-stage-2) 58%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--color-stage-2) 58%, transparent) 1px, transparent 1px);color:var(--color-stage-ink);background-size:1.5rem 1.5rem;place-items:center;display:grid;position:relative;overflow:clip}.preview-stage:before{border-top:var(--rule-thin) dashed color-mix(in oklch, var(--color-stage-ink) 34%, transparent);content:"";width:min(82%,28rem);position:absolute}.preview-zoom-switch{z-index:calc(var(--z-raised) + 1);top:var(--space-md);left:var(--space-md);gap:var(--space-3xs);padding:var(--space-3xs);border:var(--rule-thin) solid color-mix(in oklch, var(--color-stage-ink) 28%, transparent);border-radius:var(--radius-pill);background:color-mix(in oklch, var(--color-stage) 82%, transparent);display:inline-flex;position:absolute}.preview-zoom-switch button{min-width:2.25rem;min-height:2rem;padding:0 var(--space-xs);border-radius:var(--radius-pill);color:color-mix(in oklch, var(--color-stage-ink) 70%, transparent);cursor:pointer;font-size:var(--text-xs);background:0 0;border:0;font-weight:900}.preview-zoom-switch button.active{background:var(--color-stage-ink);color:var(--color-stage)}.preview-zoom-switch button:active{transform:translateY(1px)}.badge-preview{z-index:var(--z-raised);width:auto;max-width:calc(100% / var(--preview-zoom));height:auto;scale:var(--preview-zoom);pointer-events:none;filter:drop-shadow(0 10px 18px color-mix(in oklch, var(--color-ink) 38%, transparent));animation:preview-in var(--dur-medium) var(--ease-out) both;display:block;position:relative}.preview-meta{justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);background:var(--color-stage-2);color:var(--color-stage-ink);font-size:var(--text-xs);font-weight:700;display:flex}.url-card{padding-bottom:var(--space-lg)}.download-link{font-size:var(--text-sm)}.url-output{align-items:center;gap:var(--space-md);margin:var(--space-lg);padding:var(--space-md);border-radius:var(--radius-input);background:var(--color-ink);color:var(--color-paper);transition:background var(--dur-short) var(--ease-out);grid-template-columns:minmax(0,1fr) auto;text-decoration:none;display:grid;overflow:hidden}.url-output__preview{min-width:0;min-height:4.5rem;padding:var(--space-sm);border-radius:calc(var(--radius-input) - .2rem);background:var(--color-paper);grid-column:1/-1;place-items:center;display:grid;overflow:hidden}.url-output__preview img{max-width:100%;max-height:3.5rem;display:block}.url-output__copy{gap:.35rem;min-width:0;display:grid}.url-output__copy strong{font-size:var(--text-sm)}.url-output__copy code,.markdown-output code{overflow-wrap:anywhere;font-family:var(--font-code);font-size:var(--text-xs);word-break:break-word;line-height:1.55}.url-output__copy code{color:color-mix(in oklch, var(--color-paper) 74%, var(--color-cyan))}.url-output__arrow{color:var(--color-cyan);font-size:var(--text-xl);transition:transform var(--dur-short) var(--ease-out);font-weight:800}.markdown-output{margin:0 var(--space-lg) var(--space-lg);padding:var(--space-md);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-input);background:var(--color-cyan-soft);gap:.4rem;display:grid}.markdown-output span{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:800}.copy-actions{gap:var(--space-sm);margin-inline:var(--space-lg);display:grid}.btn--copy{background:var(--color-accent);width:100%;color:var(--color-accent-ink);box-shadow:0 4px 0 var(--color-accent-deep)}.btn--copy--secondary,.btn--copy.success{background:var(--color-cyan);box-shadow:0 4px 0 color-mix(in oklch, var(--color-cyan) 72%, var(--color-ink))}.btn--copy.error{background:var(--color-coral);box-shadow:0 4px 0 color-mix(in oklch, var(--color-coral) 72%, var(--color-ink))}.btn--copy.loading:before{border:2px solid color-mix(in oklch, var(--color-ink) 28%, transparent);border-top-color:var(--color-ink);content:"";border-radius:50%;width:1rem;height:1rem;animation:.8s linear infinite spin}.star-burst{background:linear-gradient(90deg, transparent 47%, var(--color-coral) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 47%, var(--color-coral) 47% 53%, transparent 53%);pointer-events:none;width:1.5rem;height:1.5rem;animation:star-burst .42s var(--ease-out) forwards;position:absolute;inset:50% auto auto 50%}.cache-note{max-width:42rem;margin:var(--space-md) var(--space-lg) 0;color:var(--color-muted);font-size:var(--text-sm)}.api-section{gap:var(--space-2xl);padding-block:var(--space-3xl);display:grid}.api-section__copy{align-self:start}.api-reference{overflow:clip}.api-row,.api-example{gap:var(--space-sm);padding:var(--space-lg);display:grid}.api-row+.api-row,.api-example{border-top:var(--rule-thin) dashed var(--color-rule-strong)}.api-row>span,.api-example>span{color:var(--color-muted);font-size:var(--text-sm);font-weight:700}.api-row code,.api-example code{overflow-wrap:anywhere;min-width:0;font-family:var(--font-code);font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:700}.api-example{background:var(--color-cyan-soft)}.site-footer{gap:var(--space-md);padding-block:var(--space-xl);border-top:var(--rule-thin) solid var(--color-rule-strong);color:var(--color-ink-2);font-size:var(--text-sm);flex-direction:column;display:flex}.site-footer p{margin:0}@media (hover:hover) and (pointer:fine){.announcement__dismiss:hover{background:color-mix(in oklch, var(--color-ink) 10%, transparent)}.nav-links a:hover:after,.text-link:hover:after,.download-link:hover:after,.site-footer a:hover:after{transform-origin:0;transform:scaleX(1)}.url-output:hover{background:var(--color-ink-2)}.url-output:hover .url-output__arrow{transform:translate(.15rem,-.15rem)}.nav-action:hover{background:var(--color-ink-2);transform:translateY(-1px)}.btn--push:hover{box-shadow:0 6px 0 0 var(--btn-edge), 0 12px 22px -5px color-mix(in oklch, var(--color-accent-deep) 55%, transparent);transform:translateY(-2px)}.style-option:hover{border-color:var(--color-ink);transform:translateY(-2px)}.text-input:hover,.space-select:hover,.native-color:hover{background:var(--color-paper-2)}.preview-zoom-switch button:hover{background:var(--color-stage-2);color:var(--color-stage-ink)}.btn--copy:hover{box-shadow:0 6px 0 var(--color-accent-deep);transform:translateY(-2px)}}@media (width>=40rem){.nav-bar{grid-template-columns:1fr auto 1fr}.nav-links{display:flex}.nav-action{justify-self:end}.hero__proof{max-width:38rem}.designer-heading{grid-template-columns:minmax(0,1fr) auto}.field-grid,.style-picker__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.url-output{grid-template-columns:minmax(7rem,auto) minmax(0,1fr) auto}.url-output__preview{grid-column:auto}.copy-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{flex-direction:row;justify-content:space-between;align-items:center}}@media (width>=60rem){.hero{grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr);align-items:center;min-height:43rem}.designer-shell{grid-template-columns:minmax(0,1.08fr) minmax(22rem,.92fr);align-items:start}.preview-column{position:sticky;top:8rem}.api-section{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}.api-section__copy{position:sticky;top:8rem}}@media (width>=90rem){.hero h1{margin-inline-start:-.04em}.proof-item:first-child{margin-inline-end:7rem}}@media (pointer:coarse){.announcement a,.announcement__dismiss,.brand,.nav-action,.nav-links a,.text-link,.download-link,.site-footer a,.space-select,.preview-zoom-switch button{align-items:center;min-width:2.75rem;min-height:2.75rem}.announcement a,.brand,.text-link,.download-link,.site-footer a{display:inline-flex}}@media (prefers-reduced-motion:reduce){html,body{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.brand-mark{animation:none}.star-burst{display:none}}@keyframes enter-up{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes preview-in{0%{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:translateY(0)}}@keyframes brand-pulse{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.08)rotate(10deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes star-burst{0%{opacity:1;transform:translate(-50%,-50%)scale(0)rotate(0)}60%{opacity:.9;transform:translate(-50%,-50%)scale(1.2)rotate(35deg)}to{opacity:0;transform:translate(-50%,-50%)scale(1.4)rotate(45deg)}}.nav-links a[aria-current=page]:after{transform:scaleX(1)}.footer-links{align-items:center;gap:var(--space-lg);flex-wrap:wrap;display:flex}.pricing-page,.reference-page{color:var(--color-ink)}.pricing-hero,.reference-hero{gap:var(--space-xl);min-width:0;padding-block:clamp(4rem, 8vw, 7rem) var(--space-2xl);display:grid}.pricing-hero h1,.reference-hero h1,.pricing-note h2{overflow-wrap:anywhere;min-width:0;font-family:var(--font-display);letter-spacing:-.055em;margin:0;font-style:normal;font-weight:900}.pricing-hero h1,.reference-hero h1{max-width:14ch;font-size:clamp(3.25rem,7vw,6.5rem);line-height:.94}.pricing-hero>div:first-child>p,.reference-hero>p{max-width:42rem;margin:var(--space-lg) 0 0;color:var(--color-ink-2);font-size:var(--text-md)}.billing-box{padding:var(--space-lg);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-card);background:var(--color-cyan-soft);align-self:end}.billing-box>p{margin:var(--space-md) 0 0;color:var(--color-ink-2);font-weight:700}.billing-switch{align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.billing-switch button{align-items:center;gap:var(--space-xs);min-height:2.75rem;padding-inline:var(--space-md);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-instant) var(--ease-out);font-weight:700;display:inline-flex}.billing-switch button.active{background:var(--color-ink);color:var(--color-paper)}.billing-switch button:active{transform:translateY(1px)}.billing-switch button:disabled{opacity:.55;cursor:not-allowed}.billing-discount,.plan-badge{min-height:2rem;padding-inline:var(--space-sm);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-accent-ink);font-size:var(--text-xs);white-space:nowrap;align-items:center;font-weight:900;display:inline-flex}.billing-discount{min-height:1.65rem;padding-inline:var(--space-xs)}.plan-grid{gap:var(--space-lg);min-width:0;padding-bottom:var(--space-3xl);display:grid}.plan-card{gap:var(--space-lg);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-panel);background:var(--color-surface);min-width:0;color:var(--color-ink);box-shadow:0 12px 32px -24px color-mix(in oklch, var(--color-ink) 30%, transparent);transition:transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);flex-direction:column;padding:clamp(1.25rem,3vw,2rem);display:flex}.plan-card--pear{background:var(--color-paper)}.plan-card--cyan{background:var(--color-cyan-soft)}.plan-card--lavender{background:var(--color-lavender-soft)}.plan-card.enterprise{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}.plan-card.enterprise p,.plan-card.enterprise small{color:var(--color-paper)}.plan-card.featured{border-color:var(--color-ink);box-shadow:0 5px 0 var(--color-ink)}.plan-card header{gap:var(--space-sm);display:grid}.plan-card h2,.plan-card h3{margin:0;font-style:normal}.plan-card h2{font-size:var(--text-2xl);letter-spacing:-.05em;font-weight:900;line-height:1}.plan-card h3{font-size:var(--text-sm);font-weight:900}.plan-card p{color:var(--color-ink-2);margin:0}.plan-price{gap:var(--space-2xs);padding-block:var(--space-lg);border-block:var(--rule-thin) dashed currentColor;display:grid}.plan-price strong{font-variant-numeric:tabular-nums;letter-spacing:-.07em;font-size:clamp(3.5rem,7vw,5.5rem);font-weight:900;line-height:.86}.plan-price span{font-weight:900}.plan-price small{color:var(--color-muted);font-size:var(--text-xs);font-weight:700}.plan-benefits{gap:var(--space-sm);display:grid}.plan-benefits ul{gap:var(--space-xs);margin:0 0 var(--space-sm);padding:0;list-style:none;display:grid}.plan-benefits li{gap:var(--space-xs);grid-template-columns:auto minmax(0,1fr);align-items:start;display:grid}.plan-benefits li:before{background:var(--color-coral);content:"";border-radius:40% 60% 55% 45%;width:.65rem;height:.65rem;margin-top:.42em}.plan-cta{background:var(--color-accent);width:100%;color:var(--color-accent-ink);box-shadow:0 4px 0 var(--color-accent-deep);margin-top:auto}.btn--inverse{background:var(--color-paper);color:var(--color-ink);box-shadow:0 4px 0 var(--color-coral)}.pricing-note{align-items:center;gap:var(--space-xl);margin-bottom:var(--space-3xl);padding-block:var(--space-xl);border-block:var(--rule-thin) dashed var(--color-rule-strong);display:grid}.pricing-note h2{max-width:18ch;font-size:clamp(2rem,4vw,3.5rem);line-height:1}.pricing-note p{max-width:48rem;margin:var(--space-md) 0 0;color:var(--color-ink-2)}.reference-hero{padding-bottom:var(--space-xl)}.reference-hero h1{max-width:16ch}.reference-layout{gap:var(--space-2xl);min-width:0;padding-bottom:var(--space-3xl);display:grid}.reference-toc{align-content:start;gap:var(--space-md);padding:var(--space-lg);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);display:grid}.reference-toc>strong{font-size:var(--text-sm);font-weight:900}.reference-toc nav{gap:var(--space-2xs);display:grid}.reference-toc nav a{min-height:2.5rem;padding-inline:var(--space-sm);border-radius:var(--radius-input);color:var(--color-ink-2);white-space:nowrap;font-weight:700;line-height:2.5rem;text-decoration:none}.reference-maker-link{background:var(--color-accent);color:var(--color-accent-ink);box-shadow:0 4px 0 var(--color-accent-deep)}.reference-content{min-width:0}.reference-section{min-width:0;padding-block:var(--space-xl);border-top:var(--rule-thin) dashed var(--color-rule-strong)}.reference-section:first-child{border-top:0;padding-top:0}.reference-section h2,.reference-section h3{overflow-wrap:anywhere;min-width:0;margin:0;font-style:normal}.reference-section h2{letter-spacing:-.045em;font-size:clamp(2rem,4vw,3.25rem);font-weight:900}.reference-section h3{margin-top:var(--space-xl);font-size:var(--text-md);font-weight:900}.reference-section>p{max-width:68ch;margin:var(--space-md) 0 0;color:var(--color-ink-2)}.reference-section code,.reference-callout code,.inline-example code,.color-name-list code{font-family:var(--font-code);font-variant-numeric:tabular-nums}.reference-section p code{background:var(--color-paper-2);color:var(--color-ink);border-radius:.35rem;padding:.1em .35em;font-weight:700}.reference-callout,.inline-example{margin-top:var(--space-lg);padding:var(--space-lg);border-radius:var(--radius-card);background:var(--color-cyan-soft)}.reference-callout{gap:var(--space-xs);display:grid}.reference-callout p{color:var(--color-ink-2);margin:0}.inline-example{overflow-x:auto}.inline-example code{overflow-wrap:anywhere;white-space:normal;min-width:0;font-size:var(--text-base);font-weight:700}.snippet{gap:var(--space-sm);min-width:0;margin-top:var(--space-md);padding:var(--space-md);border-radius:var(--radius-card);background:var(--color-ink);color:var(--color-paper);grid-template-columns:minmax(0,1fr);display:grid}.snippet pre{min-width:0;margin:0;overflow:visible}.snippet code{font-family:var(--font-code);font-size:var(--text-base);overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.6}.snippet-copy{min-height:2.75rem;padding-inline:var(--space-md);border:var(--rule-thin) solid var(--color-paper);border-radius:var(--radius-pill);color:var(--color-paper);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-instant) var(--ease-out);background:0 0;justify-self:start;font-weight:900}.snippet-copy.success{background:var(--color-cyan);color:var(--color-ink)}.snippet-copy.error{background:var(--color-coral);color:var(--color-ink)}.snippet-copy:active{transform:translateY(1px)}.snippet-copy:disabled{opacity:.55;cursor:not-allowed}.parameter-list,.error-grid{gap:var(--space-sm);min-width:0;margin-top:var(--space-lg);display:grid}.parameter-list article,.error-grid article{min-width:0;padding:var(--space-lg);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-surface)}.parameter-list article>div{justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.parameter-list article>div code{font-size:var(--text-md);font-weight:900}.parameter-list article>div span{padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--color-accent);font-size:var(--text-xs);font-weight:900}.parameter-list article p,.error-grid article p{margin:var(--space-sm) 0;color:var(--color-ink-2)}.parameter-list article small{color:var(--color-muted);font-weight:700}.reference-style-grid{gap:var(--space-sm);min-width:0;margin-top:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));display:grid}.reference-style-grid article{min-width:0;padding:var(--space-lg);border-radius:var(--radius-card);background:var(--color-paper-2)}.reference-style-grid img{max-width:100%;height:auto;margin-bottom:var(--space-md);display:block}.reference-style-grid h3{margin:0}.reference-style-grid p{margin:var(--space-sm) 0 0;color:var(--color-ink-2)}.color-name-list{gap:var(--space-xs);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.color-name-list code{padding:var(--space-xs) var(--space-sm);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-pill);background:var(--color-surface);font-weight:700}@media (hover:hover) and (pointer:fine){.billing-switch button:hover,.reference-toc nav a:hover{background:var(--color-paper-3)}.plan-card:hover{border-color:var(--color-ink);transform:translateY(-3px)}.plan-cta:hover,.reference-maker-link:hover{transform:translateY(-2px)}.snippet-copy:hover{background:var(--color-paper);color:var(--color-ink)}}@media (width>=40rem){.pricing-hero{grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);align-items:end}.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-note{grid-template-columns:minmax(0,1fr) auto}.snippet{grid-template-columns:minmax(0,1fr) auto;align-items:start}.parameter-list,.error-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=60rem){.plan-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}.reference-layout{grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);align-items:start}.reference-toc{position:sticky;top:8rem}}@media (pointer:coarse){.billing-switch button,.snippet-copy,.reference-toc nav a,.footer-links a{min-height:2.75rem}}