@font-face{font-family:Geist Pixel Circle;src:url(/fonts/GeistPixel-Circle.woff2)format("woff2");font-display:block}:root{--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Geist,ui-sans-serif,system-ui,-apple-system,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#fff;overflow:hidden}.shell{color:#0a0a0a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;flex-direction:column;height:100dvh;display:flex}.shell-main{flex:1;min-height:0;position:relative}.shell-page{animation:page-in .26s var(--ease-out) both;position:absolute;inset:0;overflow:auto}@keyframes page-in{0%{opacity:0;transform:translateY(6px)}}:root{--nav-top:12px;--nav-h:36px}.nav{z-index:50;top:var(--nav-top);box-sizing:border-box;height:var(--nav-h);color:#111;animation:nav-in .5s var(--ease-out) both;background:#fff;border:1px solid #d4d4d4;border-radius:8px;align-items:center;padding:2px;display:flex;position:fixed;left:50%;transform:translate(-50%)}@keyframes nav-in{0%{opacity:0;filter:blur(4px);transform:translate(-50%,-6px)scale(.98)}}.nav-links{align-items:center;gap:2px;display:flex;position:relative}.nav-mark{width:var(--w);transform:translateX(var(--x));pointer-events:none;background:#111;border-radius:6px;position:absolute;top:0;bottom:0;left:0}.nav-mark.is-ready{transition:transform .32s var(--ease-out), width .32s var(--ease-out)}.nav-link{color:#666;-webkit-tap-highlight-color:transparent;height:30px;transition:background-color .18s var(--ease-out), color .18s var(--ease-out), transform .15s var(--ease-out);border-radius:6px;outline:none;align-items:center;gap:3px;padding:0 14px;font-size:13px;font-weight:500;line-height:1;text-decoration:none;display:inline-flex;position:relative}.nav-link svg{opacity:.7;margin-top:-1px}.nav-link.active{color:#fff}.nav-link:active{transform:scale(.97)}.nav-link:focus-visible{box-shadow:0 0 0 2px #0003}@media (hover:hover) and (pointer:fine){.nav-link:not(.active):hover{color:#111;background:#f0f0f0}}@media (width<=400px){.nav-link{padding:0 10px}}.info-button{--size:calc(var(--nav-h) * .8);z-index:50;top:calc(var(--nav-top) + (var(--nav-h) - var(--size)) / 2);width:var(--size);height:var(--size);color:#111;-webkit-tap-highlight-color:transparent;animation:nav-in-corner .5s var(--ease-out) both;transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .15s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:7px;outline:none;place-items:center;font-family:Geist Pixel Circle,ui-monospace,monospace;font-size:12px;line-height:1;text-decoration:none;display:grid;position:fixed;left:12px}@keyframes nav-in-corner{0%{opacity:0;filter:blur(4px);transform:translateY(-6px)scale(.96)}}.info-button[aria-current=page]{color:#fff;background:#111;border-color:#111}.info-button:active{transform:scale(.95)}.info-button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #111}@media (hover:hover) and (pointer:fine){.info-button:hover{color:#fff;background:#111;border-color:#111}}.text-swarm .text-swarm-panel,.editor .panel{top:var(--nav-top);max-height:calc(100% - var(--nav-top) * 2);transition:height .48s cubic-bezier(.45,0,.2,1);right:12px;translate:none}.text-swarm .group,.editor .group{animation:.42s cubic-bezier(.45,0,.2,1) 80ms both group-in}@keyframes group-in{0%{opacity:0;transform:translateY(6px)}}.text-swarm .text-swarm-panel[data-resizing],.editor .panel[data-resizing]{overflow:hidden}@media (prefers-reduced-motion:reduce){.text-swarm .text-swarm-panel,.editor .panel{transition:none}.text-swarm .group,.editor .group{animation:none}}@media (width<=760px) and (orientation:portrait){.text-swarm .group,.editor .group{min-height:0}.text-swarm .text-swarm-panel,.editor .panel{max-height:none}}.ed-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.ed-button{height:36px;font:inherit;color:#0a0a0a;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease, border-color .15s ease, transform .15s var(--ease-out);background:#fff;border:1px solid #e5e5e5;border-radius:10px;justify-content:center;align-items:center;padding:0 8px;font-size:13px;font-weight:500;display:inline-flex}.ed-button:active{transform:scale(.97)}.ed-primary{color:#fff;background:#0a0a0a;border-color:#0a0a0a;grid-column:1/-1}.ed-primary span{align-items:center;gap:6px;display:inline-flex}.ed-button:focus-visible{outline:none;box-shadow:0 0 0 2px #00000026}.ed-tick{animation:ed-tick-in .26s var(--ease-out) both}@keyframes ed-tick-in{0%{opacity:0;transform:scale(.6)}}@media (hover:hover) and (pointer:fine){.ed-button:hover{border-color:#a3a3a3}.ed-primary:hover{background:#262626}}@media (width<=760px),(height<=900px){.ed-button{height:34px}}.corner-button{z-index:10;color:#111;-webkit-tap-highlight-color:transparent;width:28px;height:28px;transition:border-color .16s var(--ease-out), transform .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:50%;place-items:center;font-family:Geist Pixel Circle,ui-monospace,monospace;font-size:13px;line-height:1;text-decoration:none;display:grid;position:absolute;top:12px;left:12px}.corner-button:active{transform:scale(.94)}.corner-button:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){.corner-button:hover{border-color:#999}}@media (prefers-reduced-motion:reduce){.shell-page,.nav,.info-button,.ed-tick{animation:none}.nav-link,.nav-mark.is-ready,.ed-button,.info-button,.corner-button{transition:none}}@font-face{font-family:Geist Pixel Square;src:url(/fonts/GeistPixel-Square.woff2)format("woff2");font-display:block}@font-face{font-family:Geist Pixel Grid;src:url(/fonts/GeistPixel-Grid.woff2)format("woff2");font-display:block}@font-face{font-family:Geist Pixel Circle;src:url(/fonts/GeistPixel-Circle.woff2)format("woff2");font-display:block}@font-face{font-family:Geist Pixel Line;src:url(/fonts/GeistPixel-Line.woff2)format("woff2");font-display:block}@font-face{font-family:Geist Pixel Triangle;src:url(/fonts/GeistPixel-Triangle.woff2)format("woff2");font-display:block}.editor{--panel-w:320px;color:#111;height:100%;transition:background-color .2s var(--ease-out);background:#fff;position:relative;overflow:hidden}.editor :where(button,input,textarea){-webkit-tap-highlight-color:transparent}:where(.editor) .stage{scrollbar-gutter:stable;padding:56px calc(var(--panel-w) + 48px) 56px 24px;display:flex;position:absolute;inset:0;overflow:hidden auto}:where(.editor) .stage-text{width:100%;min-width:0;margin:auto 0}:where(.editor) .chips{z-index:10;gap:6px;display:flex;position:absolute;top:12px;left:12px}:where(.editor) .chip{height:28px;font:inherit;color:#111;white-space:nowrap;cursor:pointer;animation:chip-in .32s var(--ease-out) both;transition:border-color .16s var(--ease-out), transform .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}:where(.editor) .chip:active{transform:scale(.97)}:where(.editor) .chip:nth-child(2){animation-delay:60ms}:where(.editor) .chip:nth-child(3){animation-delay:.12s}:where(.editor) .chip:focus-visible{outline-offset:2px;outline:2px solid #111}:where(.editor) .panel{z-index:5;width:var(--panel-w);color:#111;max-height:calc(100% - 32px);animation:panel-in .36s var(--ease-out) both;background:#fff;border:1px solid #0000001a;border-radius:16px;flex-direction:column;gap:12px;padding:16px;font-size:13px;display:flex;position:absolute;top:50%;right:16px;overflow-y:auto;translate:0 -50%}:where(.editor) .panel>*{flex-shrink:0}:where(.editor) .group{flex-direction:column;gap:12px;display:flex}:where(.editor) .tabs{grid-template-columns:repeat(var(--n), minmax(0, 1fr));background:#fff;border:1px solid #d4d4d4;border-radius:8px;gap:2px;padding:2px;display:none;position:relative}:where(.editor) .tab{height:30px;font:inherit;color:#666;cursor:pointer;transition:color .18s var(--ease-out);background:0 0;border:0;border-radius:6px;font-weight:500;position:relative}:where(.editor) .tab[aria-pressed=true]{color:#fff}:where(.editor) .tab:active{transform:scale(.97)}:where(.editor) .field{flex-direction:column;gap:6px;display:flex}:where(.editor) .field label,:where(.editor) .picker-label,:where(.editor) .row label{font-weight:500}:where(.editor) .hint{color:#666;margin:0;font-size:12px;line-height:1.4}:where(.editor) .has-warning{color:#a15c00}:where(.editor) .field-inline{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;display:grid}:where(.editor) .field textarea{resize:vertical;min-height:56px;font:inherit;color:inherit;background:#fff;border:1px solid #d4d4d4;border-radius:8px;padding:8px 10px;line-height:1.4}:where(.editor) .variants{grid-template-columns:repeat(var(--n), minmax(0, 1fr));background:#fff;border:1px solid #d4d4d4;border-radius:8px;gap:2px;padding:2px;display:grid;position:relative}:where(.editor) .variant{min-width:0;font:inherit;color:#666;cursor:pointer;transition:color .18s var(--ease-out);background:0 0;border:0;border-radius:6px;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;display:flex;position:relative}:where(.editor) .variant-sample{color:#111;transition:color .18s var(--ease-out);font-size:22px;line-height:1}:where(.editor) .variant-name{font-size:11px;font-weight:500}:where(.editor) .variant[aria-checked=true],:where(.editor) .variant[aria-checked=true] .variant-sample{color:#fff}:where(.editor) .variant:active{transform:scale(.97)}:where(.editor) .variant:focus-visible{outline-offset:2px;outline:2px solid #111}:where(.editor) .segments .variant{padding:6px 0}:where(.editor) .segments .variant-name{font-size:12px}:where(.editor) .variants>.slide,:where(.editor) .tabs>.slide{width:calc((100% - 4px - (var(--n) - 1) * 2px) / var(--n));transform:translateX(calc(var(--i) * (100% + 2px)));transition:transform .28s var(--ease-out);pointer-events:none;background:#111;border-radius:6px;position:absolute;top:2px;bottom:2px;left:2px}:where(.editor) .switch-row{min-height:28px;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding:0;font-weight:500;display:flex}:where(.editor) .switch{width:36px;height:20px;transition:background-color .2s var(--ease-out);background:#d4d4d4;border-radius:999px;flex:none;padding:2px}:where(.editor) .switch-thumb{width:16px;height:16px;transition:transform .22s var(--ease-out), width .16s var(--ease-out);background:#fff;border-radius:50%;display:block}:where(.editor) .switch-row[aria-checked=true] .switch{background:#111}:where(.editor) .switch-row[aria-checked=true] .switch-thumb{transform:translate(16px)}:where(.editor) .switch-row:active .switch-thumb{width:20px}:where(.editor) .switch-row[aria-checked=true]:active .switch-thumb{transform:translate(12px)}:where(.editor) .switch-row:focus-visible{outline-offset:2px;border-radius:6px;outline:2px solid #111}:where(.editor) .sliders{flex-direction:column;gap:6px;display:flex}:where(.editor) .row{grid-template-columns:96px minmax(0,1fr) 64px;align-items:center;gap:10px;min-height:32px;display:grid}:where(.editor) .row-value{font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:baseline;gap:4px;display:flex}:where(.editor) .row-value output{font-weight:500}:where(.editor) .unit{color:#666;font-size:12px}:where(.editor) .row input[type=range]{appearance:none;cursor:pointer;background:0 0;min-width:0;height:20px;margin:0}:where(.editor) .row input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, #111 var(--p,50%), #0000001f var(--p,50%));border-radius:2px;height:4px}:where(.editor) .row input[type=range]::-moz-range-track{background:linear-gradient(to right, #111 var(--p,50%), #0000001f var(--p,50%));border-radius:2px;height:4px}:where(.editor) .row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;transition:transform .16s var(--ease-out);background:#111;border:0;border-radius:50%;margin-top:-5px}:where(.editor) .row input[type=range]::-moz-range-thumb{width:14px;height:14px;transition:transform .16s var(--ease-out);background:#111;border:0;border-radius:50%}:where(.editor) .row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}:where(.editor) .row input[type=range]:active::-moz-range-thumb{transform:scale(1.3)}:where(.editor) .colors{grid-template-columns:1fr 1fr;gap:12px;display:grid;position:relative}:where(.editor) .picker{flex-direction:column;gap:6px;min-width:0;display:flex}:where(.editor) .picker-field{align-items:center;gap:6px;display:flex}:where(.editor) .picker-swatch{cursor:pointer;width:32px;height:32px;transition:transform .16s var(--ease-out), border-color .16s var(--ease-out);border:1px solid #d4d4d4;border-radius:8px;flex:none;padding:0}:where(.editor) .picker-swatch:active{transform:scale(.94)}:where(.editor) .picker-swatch[aria-expanded=true]{border-color:#111}:where(.editor) .picker-hex{min-width:0;height:32px;font:inherit;font-variant-numeric:tabular-nums;color:inherit;text-transform:lowercase;transition:border-color .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;flex:1;padding:0 8px}:where(.editor) .picker-pop{z-index:5;transform-origin:25% 100%;animation:picker-in .16s var(--ease-out);background:#fff;border:1px solid #0000001a;border-radius:12px;flex-direction:column;gap:12px;padding:12px;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;right:0}:where(.editor) .picker:nth-child(2) .picker-pop{transform-origin:75% 100%}:where(.editor) .picker-sv,:where(.editor) .picker-hue{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;position:relative}:where(.editor) .picker-sv{background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);height:128px}:where(.editor) .picker-hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:14px}:where(.editor) .picker-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}:where(.editor) .picker-hex:focus-visible,:where(.editor) .field textarea:focus-visible{outline-offset:1px;border-color:#111;outline:2px solid #111}:where(.editor) .picker-sv:focus-visible,:where(.editor) .picker-hue:focus-visible,:where(.editor) .picker-swatch:focus-visible,:where(.editor) .row input[type=range]:focus-visible,:where(.editor) .panel button:focus-visible{outline-offset:2px;outline:2px solid #111}:where(.editor) .buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}:where(.editor) .buttons button{height:36px;font:inherit;color:inherit;cursor:pointer;transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;font-weight:500}:where(.editor) .buttons button:active{transform:scale(.97)}:where(.editor) .buttons button.primary{color:#fff;background:#111;border-color:#111}:where(.editor) .buttons button.prompt{grid-column:1/-1}:where(.editor) .buttons button.prompt span{justify-content:center;align-items:center;gap:6px;display:inline-flex}@keyframes panel-in{0%{opacity:0;transform:translate(14px)}}@keyframes panel-up{0%{opacity:0;transform:translateY(14px)}}@keyframes chip-in{0%{opacity:0;transform:translateY(-6px)}}@keyframes picker-in{0%{opacity:0;transform:scale(.96)translateY(4px)}}@keyframes tick{0%{opacity:0;transform:scale(.4)rotate(-20deg)}}:where(.editor) .icon-tick{animation:tick .26s var(--ease-out)}@media (hover:hover) and (pointer:fine){:where(.editor) .chip:hover,:where(.editor) .buttons button:hover{border-color:#999;transform:translateY(-1px)}:where(.editor) .chip:active,:where(.editor) .buttons button:active{transform:scale(.97)}:where(.editor) .buttons button.primary:hover{background:#333;border-color:#333}:where(.editor) .variant:not([aria-checked=true]):hover .variant-sample,:where(.editor) .variant:not([aria-checked=true]):hover{color:#111}:where(.editor) .row input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}:where(.editor) .row input[type=range]:hover::-moz-range-thumb{transform:scale(1.2)}}@media (pointer:coarse){:where(.editor) .row input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px}:where(.editor) .row input[type=range]::-moz-range-thumb{width:18px;height:18px}:where(.editor) .field textarea,:where(.editor) .picker-hex{font-size:16px}}@media (width<=900px){.editor{--panel-w:280px}}@media (width<=760px) and (orientation:portrait){.editor{grid-template-rows:minmax(0,1fr) auto;display:grid}:where(.editor) .stage{padding:52px 16px 16px;position:static}:where(.editor) .panel{width:auto;max-height:none;margin:0 12px 12px;animation-name:panel-up;position:static;overflow:visible;translate:none}:where(.editor) .tabs{display:grid}:where(.editor) .group{min-height:170px}:where(.editor) .panel[data-tab=text] .group:not(.group-text),:where(.editor) .panel[data-tab=style] .group:not(.group-style),:where(.editor) .panel[data-tab=color] .group:not(.group-color),:where(.editor) .hint-keys{display:none}}@media (width<=760px),(height<=900px){:where(.editor) .panel{gap:10px;padding:12px 16px}:where(.editor) .group{gap:10px}:where(.editor) .hint-keys,:where(.editor) .hint-install,:where(.editor) .hint-count:not(.has-warning){display:none}:where(.editor) .field{gap:4px}:where(.editor) .field textarea{min-height:48px;padding:6px 10px}:where(.editor) .sliders{gap:2px}:where(.editor) .row{min-height:30px}:where(.editor) .buttons button{height:34px}}@media (height<=420px){:where(.editor) .panel{gap:8px;padding:10px 16px}:where(.editor) .field textarea{height:34px;min-height:34px}:where(.editor) .row{min-height:28px}}@media (prefers-reduced-motion:reduce){:where(.editor) .panel,:where(.editor) .chip,:where(.editor) .icon-tick,:where(.editor) .picker-pop{animation:none}:where(.editor) .variants>.slide,:where(.editor) .tabs>.slide,.editor,:where(.editor) .chip,:where(.editor) .tab,:where(.editor) .variant,:where(.editor) .variant-sample,:where(.editor) .buttons button,:where(.editor) .switch,:where(.editor) .switch-thumb,:where(.editor) .picker-hex,:where(.editor) .picker-swatch{transition:none}:where(.editor) .row input[type=range]::-webkit-slider-thumb{transition:none}:where(.editor) .row input[type=range]::-moz-range-thumb{transition:none}:where(.editor) .chip:hover,:where(.editor) .buttons button:hover{transform:none}}@font-face{font-family:Geist Serif;src:url(/fonts/GeistSerif-Regular.woff2)format("woff2");font-weight:400;font-display:swap}.flags{color:#0a0a0a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;height:100%;position:relative;overflow:hidden}.flags-frame{pointer-events:none;animation:flags-frame-in .5s var(--ease-out) 2s both;position:absolute;box-shadow:0 0 0 1px #00000014}.flags-frame img{width:100%;height:100%;image-rendering:pixelated;display:block}@keyframes flags-frame-in{0%{opacity:0}}.flags-canvas{width:100%;height:100%;position:absolute;inset:0}.flags-title{pointer-events:none;justify-content:center;align-items:center;padding:0 24px;display:flex;position:absolute;top:48px;left:0;right:0}.flags-stairs{flex-direction:column;max-width:100%;display:flex}.flags-picker{flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:20px;left:16px;right:16px}.flags-name{letter-spacing:-.01em;text-align:center;min-height:1.2em;margin:0;font-family:Geist Serif,Times New Roman,Times,serif;font-size:22px;font-weight:400;line-height:1.2}.flags-picker-box{width:min(280px,100%);position:relative}.flags-search{width:100%;height:36px;font:inherit;color:#0a0a0a;text-align:center;transition:border-color .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:10px;outline:none;padding:0 12px;font-size:16px;display:block}.flags-search::placeholder{color:#a3a3a3}.flags-search:focus{text-align:left;border-color:#737373}@media (hover:hover) and (pointer:fine){.flags-search:hover:not(:focus){border-color:#a3a3a3}}.flags-options{max-height:280px;animation:flags-options-in .16s var(--ease-out) both;background:#fff;border:1px solid #e5e5e5;border-radius:10px;margin:0;padding:4px;list-style:none;position:absolute;bottom:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0000001a}@keyframes flags-options-in{0%{opacity:0;transform:translateY(4px)}}.flags-option{color:#404040;cursor:pointer;border-radius:6px;padding:8px 10px;font-size:14px}.flags-option.is-active{color:#0a0a0a;background:#f4f4f4}.flags-option-alias{color:#a3a3a3}.flags-option.is-current:after{content:" · showing";color:#737373}.flags-option.is-empty{color:#737373;cursor:default}@media (prefers-reduced-motion:reduce){.flags-search{transition:none}.flags-options,.flags-frame{animation:none}}.intro{min-height:100%;transition:background-color .2s var(--ease-out);align-items:center;padding:72px 48px 128px;display:flex;position:relative}.intro-body{flex-direction:column;gap:20px;width:100%;max-width:560px;display:flex}.intro-byline{opacity:.6;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;font-family:Geist Pixel Circle,ui-monospace,monospace;font-size:15px;line-height:1.4;display:flex}.intro-byline a{color:inherit;text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);text-underline-offset:3px;transition:text-decoration-color .16s var(--ease-out)}.intro-byline a:focus-visible{outline-offset:2px;outline:2px solid}@media (hover:hover) and (pointer:fine){.intro-byline a:hover{text-decoration-color:currentColor}}.intro-bar{z-index:10;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:14px;align-items:center;gap:12px;padding:6px 14px 6px 6px;font-size:13px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 1px 2px #0000000a,0 8px 24px #00000014}.intro-bar .variants{border:0;width:240px;padding:0}.intro-bar .variant{padding:5px 0 4px}.intro-bar .variant-sample{font-size:18px}.intro-bar-rule{background:#e5e5e5;align-self:stretch;width:1px;margin:4px 0}.intro-dials{gap:14px;display:flex;position:relative}.intro-dials .picker-pop{transform-origin:50% 100%;width:240px;bottom:calc(100% + 14px);left:auto;right:-14px}.picker-dial .picker-field{gap:8px}.picker-dial .picker-swatch{border-color:#00000026;border-radius:50%;width:22px;height:22px}.picker-dial .picker-label{color:#333;white-space:nowrap;font-size:13px;font-weight:500}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (width<=760px){.intro{padding:56px 16px 176px}.intro-body{max-width:420px}.intro-byline{font-size:14px}.intro-bar{flex-wrap:wrap;justify-content:center;padding:6px;bottom:16px;left:16px;right:16px;transform:none}.intro-bar .variants{width:100%}.intro-bar-rule{display:none}.intro-dials{padding:4px 8px 6px}.intro-dials .picker-pop{animation:none;left:50%;right:auto;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.intro,.intro-byline a{transition:none}}@font-face{font-family:Geist Pixel Grid;src:url(/fonts/GeistPixel-Grid.woff2)format("woff2");font-display:block}@font-face{font-family:Geist Pixel Line;src:url(/fonts/GeistPixel-Line.woff2)format("woff2");font-display:block}@font-face{font-family:Geist Pixel Square;src:url(/fonts/GeistPixel-Square.woff2)format("woff2");font-display:block}.text-swarm{--panel-w:320px;color:#111;background:#fff;height:100%;font-family:Geist,ui-sans-serif,system-ui,sans-serif;position:relative;overflow:hidden}.text-swarm :where(button,input,textarea){-webkit-tap-highlight-color:transparent}:where(.text-swarm,.intro) .text-swarm-stage{scrollbar-gutter:stable;padding:56px calc(var(--panel-w) + 48px) 56px 24px;display:flex;position:absolute;inset:0;overflow:hidden auto}:where(.text-swarm,.intro) .text-swarm-sentence{width:100%;min-width:0;margin:auto 0}:where(.text-swarm,.intro) .text-swarm-panel{z-index:5;width:var(--panel-w);color:#111;max-height:calc(100% - 32px);animation:panel-in .36s var(--ease-out) both;background:#fff;border:1px solid #0000001a;border-radius:16px;flex-direction:column;gap:12px;padding:16px;font-size:13px;display:flex;position:absolute;top:50%;right:16px;overflow-y:auto;translate:0 -50%;container-type:inline-size}:where(.text-swarm,.intro) .text-swarm-panel>*{flex-shrink:0}:where(.text-swarm,.intro) .group{flex-direction:column;gap:12px;display:flex}:where(.text-swarm,.intro) .tabs{background:#fff;border:1px solid #d4d4d4;border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:2px;display:none;position:relative}:where(.text-swarm,.intro) .tab{height:30px;font:inherit;color:#666;cursor:pointer;transition:background-color .18s var(--ease-out), color .18s var(--ease-out);background:0 0;border:0;border-radius:6px;font-weight:500;position:relative}:where(.text-swarm,.intro) .tab[aria-pressed=true]{color:#fff;background:0 0}:where(.text-swarm,.intro) .tab:active{transform:scale(.97)}:where(.text-swarm,.intro) .chips{z-index:10;gap:6px;display:flex;position:absolute;top:12px;left:12px}:where(.text-swarm,.intro) .chip{height:28px;font:inherit;color:#111;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .16s var(--ease-out), transform .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}:where(.text-swarm,.intro) .chip-icon{width:28px;padding:0;font-family:Geist Pixel Circle,ui-monospace,monospace}:where(.text-swarm,.intro) .chip:active{transform:scale(.97)}:where(.text-swarm,.intro) .chip:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .chip:hover{border-color:#999}}:where(.text-swarm,.intro) .text-swarm-panel h2{letter-spacing:.06em;text-transform:uppercase;color:#666;margin:0;font-size:12px;font-weight:600}:where(.text-swarm,.intro) .field{flex-direction:column;gap:6px;display:flex}:where(.text-swarm,.intro) .field label,:where(.text-swarm,.intro) .picker-label,:where(.text-swarm,.intro) .row label{font-weight:500}:where(.text-swarm,.intro) .hint{color:#666;margin:0;font-size:12px;line-height:1.4}:where(.text-swarm,.intro) .field-inline{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;display:grid}:where(.text-swarm,.intro) .field-inline .hint{grid-column:1/-1}:where(.text-swarm,.intro) .field textarea{resize:vertical;min-height:56px;font:inherit;color:inherit;background:#fff;border:1px solid #d4d4d4;border-radius:8px;padding:8px 10px;line-height:1.4}:where(.text-swarm,.intro) .variants{background:#fff;border:1px solid #d4d4d4;border-radius:8px;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:2px;display:grid}:where(.text-swarm,.intro) .variant{min-width:0;font:inherit;color:#666;cursor:pointer;transition:background-color .18s var(--ease-out), color .18s var(--ease-out);background:0 0;border:0;border-radius:6px;flex-direction:column;align-items:center;gap:2px;padding:6px 0 5px;display:flex}:where(.text-swarm,.intro) .pairings{grid-template-columns:repeat(2,minmax(0,1fr))}:where(.text-swarm,.intro) .pairings .variant{padding:6px 0}:where(.text-swarm,.intro) .pairings .variant-name{font-size:12px}:where(.text-swarm,.intro) .variant-sample{color:#111;font-size:22px;line-height:1}:where(.text-swarm,.intro) .variant-name{font-size:11px;font-weight:500}:where(.text-swarm,.intro) .variant[aria-checked=true]{color:#fff;background:#111}:where(.text-swarm,.intro) .variant[aria-checked=true] .variant-sample{color:#fff}:where(.text-swarm,.intro) .variant:active{transform:scale(.97)}:where(.text-swarm,.intro) .variant:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .variant:not([aria-checked=true]):hover{background:#f0f0f0}}:where(.text-swarm,.intro) .sliders{flex-direction:column;gap:6px;display:flex}:where(.text-swarm,.intro) .row{min-height:32px;transition:opacity .2s var(--ease-out);grid-template-columns:88px minmax(0,1fr) 56px;align-items:center;gap:10px;display:grid}:where(.text-swarm,.intro) .row-off{opacity:.4;pointer-events:none}:where(.text-swarm,.intro) .row input[type=range]{accent-color:#111;min-width:0;margin:0}:where(.text-swarm,.intro) .row-value{font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:baseline;gap:4px;display:flex}:where(.text-swarm,.intro) .row-value output{font-weight:500}:where(.text-swarm,.intro) .unit{color:#666;font-size:12px}:where(.text-swarm,.intro) .num,:where(.text-swarm,.intro) .picker-hex{height:32px;font:inherit;font-variant-numeric:tabular-nums;color:inherit;transition:border-color .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;padding:0 8px}:where(.text-swarm,.intro) .num{text-align:right;width:44px;padding:0 4px}:where(.text-swarm,.intro) .motion{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;display:grid}:where(.text-swarm,.intro) .motion-item{flex-direction:column;gap:6px;min-width:0;display:flex}:where(.text-swarm,.intro) .anchor{background:#fff;border:1px solid #d4d4d4;border-radius:8px;grid-template-rows:repeat(3,24px);grid-template-columns:repeat(3,24px);width:max-content;padding:2px;display:grid}:where(.text-swarm,.intro) .anchor-cell{cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;padding:0;display:grid}:where(.text-swarm,.intro) .anchor-dot{width:4px;height:4px;transition:transform .18s var(--ease-out), background-color .18s var(--ease-out);background:#c4c4c4;border-radius:1.6px}:where(.text-swarm,.intro) .anchor-cell[aria-checked=true] .anchor-dot{background:#111;transform:scale(2.5)}:where(.text-swarm,.intro) .anchor-cell:active .anchor-dot{transform:scale(1.6)}:where(.text-swarm,.intro) .anchor-cell[aria-checked=true]:active .anchor-dot{transform:scale(2.2)}:where(.text-swarm,.intro) .anchor-cell:focus-visible{outline-offset:-2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .anchor-cell:hover .anchor-dot{background:#888}:where(.text-swarm,.intro) .anchor-cell[aria-checked=true]:hover .anchor-dot{background:#111}}:where(.text-swarm,.intro) .switch-row{min-height:26px;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:8px;padding:0;font-weight:500;display:flex}:where(.text-swarm,.intro) .switch{width:36px;height:20px;transition:background-color .2s var(--ease-out);background:#d4d4d4;border-radius:999px;flex:none;padding:2px}:where(.text-swarm,.intro) .switch-thumb{width:16px;height:16px;transition:transform .22s var(--ease-out), width .16s var(--ease-out);background:#fff;border-radius:50%;display:block}:where(.text-swarm,.intro) .switch-row[aria-checked=true] .switch{background:#111}:where(.text-swarm,.intro) .switch-row[aria-checked=true] .switch-thumb{transform:translate(16px)}:where(.text-swarm,.intro) .switch-row:active .switch-thumb{width:20px}:where(.text-swarm,.intro) .switch-row[aria-checked=true]:active .switch-thumb{transform:translate(12px)}:where(.text-swarm,.intro) .switch-row:focus-visible{outline-offset:2px;border-radius:6px;outline:2px solid #111}:where(.text-swarm,.intro) .pills{flex-wrap:wrap;gap:4px;display:flex}:where(.text-swarm,.intro) .pill{height:26px;font:inherit;color:#444;cursor:pointer;transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;padding:0 9px;font-size:12px;font-weight:500}:where(.text-swarm,.intro) .pill[aria-checked=true]{color:#fff;background:#111;border-color:#111}:where(.text-swarm,.intro) .pill:active{transform:scale(.97)}:where(.text-swarm,.intro) .pill:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .pill[aria-checked=false]:hover{border-color:#999}}:where(.text-swarm,.intro) .colors{grid-template-columns:1fr 1fr;gap:12px;display:grid;position:relative}:where(.text-swarm,.intro) .picker{flex-direction:column;gap:6px;min-width:0;display:flex}:where(.text-swarm,.intro) .picker-field{align-items:center;gap:6px;display:flex}:where(.text-swarm,.intro) .picker-swatch{cursor:pointer;width:32px;height:32px;transition:transform .16s var(--ease-out), border-color .16s var(--ease-out);border:1px solid #d4d4d4;border-radius:8px;flex:none;padding:0}:where(.text-swarm,.intro) .picker-swatch:active{transform:scale(.94)}:where(.text-swarm,.intro) .picker-swatch[aria-expanded=true]{border-color:#111}:where(.text-swarm,.intro) .picker-hex{text-transform:lowercase;flex:1;min-width:0}:where(.text-swarm,.intro) .picker-pop{z-index:5;transform-origin:25% 100%;animation:picker-in .16s var(--ease-out);background:#fff;border:1px solid #e5e5e5;border-radius:12px;flex-direction:column;gap:12px;padding:12px;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;right:0;box-shadow:0 1px 2px #0000000a,0 8px 24px #0000001f}:where(.text-swarm,.intro) .picker:nth-child(2) .picker-pop{transform-origin:75% 100%}:where(.text-swarm,.intro) .picker-sv,:where(.text-swarm,.intro) .picker-hue{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;position:relative}:where(.text-swarm,.intro) .picker-sv{background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);height:128px}:where(.text-swarm,.intro) .picker-hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:14px}:where(.text-swarm,.intro) .picker-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}:where(.text-swarm,.intro) .num:focus-visible,:where(.text-swarm,.intro) .picker-hex:focus-visible,:where(.text-swarm,.intro) .field textarea:focus-visible{outline-offset:1px;border-color:#111;outline:2px solid #111}:where(.text-swarm,.intro) .picker-sv:focus-visible,:where(.text-swarm,.intro) .picker-hue:focus-visible,:where(.text-swarm,.intro) .picker-swatch:focus-visible,:where(.text-swarm,.intro) .row input[type=range]:focus-visible,:where(.text-swarm,.intro) .text-swarm-panel button:focus-visible{outline-offset:2px;outline:2px solid #111}:where(.text-swarm,.intro) .buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}:where(.text-swarm,.intro) .buttons button{height:36px;font:inherit;color:inherit;cursor:pointer;transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);background:#fff;border:1px solid #d4d4d4;border-radius:8px;font-weight:500}:where(.text-swarm,.intro) .buttons button:active{transform:scale(.97)}:where(.text-swarm,.intro) .buttons button.primary{color:#fff;background:#111;border-color:#111}:where(.text-swarm,.intro) .buttons button.prompt{grid-column:1/-1}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .buttons button:hover{border-color:#999}:where(.text-swarm,.intro) .buttons button.primary:hover{background:#333}}:where(.text-swarm,.intro) .text-swarm-panel .picker-pop{box-shadow:none;border-color:#0000001a}:where(.text-swarm,.intro) .variants{position:relative}:where(.text-swarm,.intro) .variants>.slide,:where(.text-swarm,.intro) .tabs>.slide{width:calc((100% - 4px - (var(--n) - 1) * 2px) / var(--n));transform:translateX(calc(var(--i) * (100% + 2px)));transition:transform .28s var(--ease-out);pointer-events:none;background:#111;border-radius:6px;position:absolute;top:2px;bottom:2px;left:2px}:where(.text-swarm,.intro) .variants .variant{position:relative}:where(.text-swarm,.intro) .variant[aria-checked=true]{background:0 0}:where(.text-swarm,.intro) .row input[type=range]{appearance:none;cursor:pointer;background:0 0;height:20px}:where(.text-swarm,.intro) .row input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, #111 var(--p,50%), #0000001f var(--p,50%));border-radius:2px;height:4px}:where(.text-swarm,.intro) .row input[type=range]::-moz-range-track{background:linear-gradient(to right, #111 var(--p,50%), #0000001f var(--p,50%));border-radius:2px;height:4px}:where(.text-swarm,.intro) .row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;transition:transform .16s var(--ease-out);background:#111;border:0;border-radius:50%;margin-top:-5px}:where(.text-swarm,.intro) .row input[type=range]::-moz-range-thumb{width:14px;height:14px;transition:transform .16s var(--ease-out);background:#111;border:0;border-radius:50%}:where(.text-swarm,.intro) .row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}:where(.text-swarm,.intro) .row input[type=range]:active::-moz-range-thumb{transform:scale(1.3)}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .row input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}:where(.text-swarm,.intro) .row input[type=range]:hover::-moz-range-thumb{transform:scale(1.2)}:where(.text-swarm,.intro) .row input[type=range]:active:hover::-webkit-slider-thumb{transform:scale(1.3)}:where(.text-swarm,.intro) .row input[type=range]:active:hover::-moz-range-thumb{transform:scale(1.3)}}@media (pointer:coarse){:where(.text-swarm,.intro) .row input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px}:where(.text-swarm,.intro) .row input[type=range]::-moz-range-thumb{width:18px;height:18px}}:where(.text-swarm,.intro) .chip{animation:chip-in .32s var(--ease-out) both}:where(.text-swarm,.intro) .chip:nth-child(2){animation-delay:60ms}:where(.text-swarm,.intro) .chip:nth-child(3){animation-delay:.12s}@keyframes pop{0%{transform:scale(.92)}}:where(.text-swarm,.intro) .pill[aria-checked=true]{animation:pop .2s var(--ease-out)}:where(.text-swarm,.intro) .icon-tick{animation:tick .26s var(--ease-out)}:where(.text-swarm,.intro) .buttons button.prompt span{justify-content:center;align-items:center;gap:6px;display:inline-flex}@media (hover:hover) and (pointer:fine){:where(.text-swarm,.intro) .chip:hover{transform:translateY(-1px)}:where(.text-swarm,.intro) .chip:active{transform:translateY(0)scale(.97)}:where(.text-swarm,.intro) .chip svg{transition:transform .2s var(--ease-out)}:where(.text-swarm,.intro) .chip:hover svg{transform:scale(1.12)}:where(.text-swarm,.intro) .buttons button:hover{transform:translateY(-1px)}:where(.text-swarm,.intro) .buttons button:active{transform:scale(.97)}:where(.text-swarm,.intro) .corner-button:hover{transform:translateY(-1px)}}@media (prefers-reduced-motion:reduce){:where(.text-swarm,.intro) .text-swarm-panel,:where(.text-swarm,.intro) .chip,:where(.text-swarm,.intro) .pill,:where(.text-swarm,.intro) .icon-tick{animation:none}:where(.text-swarm,.intro) .variants>.slide,:where(.text-swarm,.intro) .tabs>.slide{transition:none}:where(.text-swarm,.intro) .chip:hover,:where(.text-swarm,.intro) .buttons button:hover,:where(.text-swarm,.intro) .corner-button:hover,:where(.text-swarm,.intro) .chip:hover svg{transform:none}:where(.text-swarm,.intro) .row input[type=range]::-webkit-slider-thumb{transition:none}:where(.text-swarm,.intro) .row input[type=range]::-moz-range-thumb{transition:none}}@media (width<=900px){.text-swarm{--panel-w:280px}}@media (width<=760px) and (orientation:portrait){.text-swarm{grid-template-rows:minmax(0,1fr) auto;display:grid;overflow:visible}:where(.text-swarm,.intro) .text-swarm-stage{padding:52px 16px 16px;position:static}:where(.text-swarm,.intro) .text-swarm-panel{width:auto;max-height:none;margin:0 12px 12px;animation-name:panel-up;position:static;overflow:visible;translate:none}:where(.text-swarm,.intro) .tabs{display:grid}:where(.text-swarm,.intro) .group{min-height:170px}:where(.text-swarm,.intro) .text-swarm-panel[data-tab=text] .group:not(.group-text),:where(.text-swarm,.intro) .text-swarm-panel[data-tab=style] .group:not(.group-style),:where(.text-swarm,.intro) .text-swarm-panel[data-tab=motion] .group:not(.group-motion){display:none}}@media (width<=760px),(height<=900px){:where(.text-swarm,.intro) .text-swarm-panel{gap:10px;padding:12px 16px}:where(.text-swarm,.intro) .group{gap:10px}:where(.text-swarm,.intro) .text-swarm-panel h2,:where(.text-swarm,.intro) .hint-dots,:where(.text-swarm,.intro) .hint-pairing,:where(.text-swarm,.intro) .hint-install,:where(.text-swarm,.intro) .hint-count:not(.has-warning){display:none}:where(.text-swarm,.intro) .field{gap:4px}:where(.text-swarm,.intro) .field textarea{min-height:48px;padding:6px 10px}:where(.text-swarm,.intro) .sliders{gap:2px}:where(.text-swarm,.intro) .row{min-height:30px}:where(.text-swarm,.intro) .buttons{gap:6px}:where(.text-swarm,.intro) .buttons button{white-space:nowrap;height:34px;padding:0 4px}}@container (width>=260px){@media (width<=760px),(height<=900px){:where(.text-swarm,.intro) .buttons{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}:where(.text-swarm,.intro) .buttons button{font-size:12.5px}:where(.text-swarm,.intro) .buttons button.prompt{grid-column:auto}}}@media (height<=420px){:where(.text-swarm,.intro) .text-swarm-panel{gap:8px;padding:10px 16px}:where(.text-swarm,.intro) .field textarea{height:34px;min-height:34px}:where(.text-swarm,.intro) .hint-count:not(.has-warning){display:none}:where(.text-swarm,.intro) .row{min-height:28px}:where(.text-swarm,.intro) .anchor{grid-template-rows:repeat(3,18px);grid-template-columns:repeat(3,18px)}:where(.text-swarm,.intro) .motion-item{gap:4px}}@media (pointer:coarse){:where(.text-swarm,.intro) .field textarea,:where(.text-swarm,.intro) .num,:where(.text-swarm,.intro) .picker-hex{font-size:16px}}@media (prefers-reduced-motion:reduce){:where(.text-swarm,.intro) .chip,:where(.text-swarm,.intro) .tab,:where(.text-swarm,.intro) .buttons button,:where(.text-swarm,.intro) .num,:where(.text-swarm,.intro) .picker-hex,:where(.text-swarm,.intro) .picker-swatch,:where(.text-swarm,.intro) .anchor-dot,:where(.text-swarm,.intro) .switch,:where(.text-swarm,.intro) .switch-thumb,:where(.text-swarm,.intro) .pill{transition:none}:where(.text-swarm,.intro) .picker-pop{animation:none}}