@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)}}.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{animation:none}.corner-button{transition:none}}@font-face{font-family:Geist Serif;src:url(/fonts/GeistSerif-Regular.woff2)format("woff2");font-weight:400;font-display:swap}.flags{color:#f5f5f5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#111;height:100%;position:relative;overflow:hidden}.flags-canvas{width:100%;height:100%;position:absolute;inset:0}.flags-corner{color:#f5f5f5;background:#111;border-color:#333}.flags-corner:focus-visible{outline-color:#f5f5f5}.flags-title{pointer-events:none;justify-content:center;align-items:center;padding:0 24px;display:flex;position:absolute;top:0;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:#f5f5f5;text-align:center;transition:border-color .16s var(--ease-out);background:#111;border:1px solid #333;border-radius:10px;outline:none;padding:0 12px;font-size:16px;display:block}.flags-search::placeholder{color:#737373}.flags-search:focus{text-align:left;border-color:#a3a3a3}@media (hover:hover) and (pointer:fine){.flags-search:hover:not(:focus){border-color:#555}}.flags-options{max-height:280px;animation:flags-options-in .16s var(--ease-out) both;background:#171717;border:1px solid #333;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 #00000080}@keyframes flags-options-in{0%{opacity:0;transform:translateY(4px)}}.flags-option{color:#d4d4d4;cursor:pointer;border-radius:6px;padding:8px 10px;font-size:14px}.flags-option.is-active{color:#fff;background:#262626}.flags-option-alias{color:#737373}.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{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}.text-swarm-stage{scrollbar-gutter:stable;padding:56px calc(var(--panel-w) + 48px) 56px 24px;display:flex;position:absolute;inset:0;overflow:hidden auto}.text-swarm-sentence{width:100%;min-width:0;margin:auto 0}.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}.text-swarm-panel>*{flex-shrink:0}.group{flex-direction:column;gap:12px;display:flex}.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}.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}.tab[aria-pressed=true]{color:#fff;background:0 0}.tab:active{transform:scale(.97)}.chips{z-index:10;gap:6px;display:flex;position:absolute;top:12px;left:12px}.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}.chip-icon{width:28px;padding:0;font-family:Geist Pixel Circle,ui-monospace,monospace}.chip:active{transform:scale(.97)}.chip:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){.chip:hover{border-color:#999}}.text-swarm-panel h2{letter-spacing:.06em;text-transform:uppercase;color:#666;margin:0;font-size:12px;font-weight:600}.field{flex-direction:column;gap:6px;display:flex}.field label,.picker-label,.row label{font-weight:500}.hint{color:#666;margin:0;font-size:12px;line-height:1.4}.field-inline{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;display:grid}.field-inline .hint{grid-column:1/-1}.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}.variants{background:#fff;border:1px solid #d4d4d4;border-radius:8px;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:2px;display:grid}.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}.pairings{grid-template-columns:repeat(2,minmax(0,1fr))}.pairings .variant{padding:6px 0}.pairings .variant-name{font-size:12px}.variant-sample{color:#111;font-size:22px;line-height:1}.variant-name{font-size:11px;font-weight:500}.variant[aria-checked=true]{color:#fff;background:#111}.variant[aria-checked=true] .variant-sample{color:#fff}.variant:active{transform:scale(.97)}.variant:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){.variant:not([aria-checked=true]):hover{background:#f0f0f0}}.sliders{flex-direction:column;gap:6px;display:flex}.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}.row-off{opacity:.4;pointer-events:none}.row input[type=range]{accent-color:#111;min-width:0;margin:0}.row-value{font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:baseline;gap:4px;display:flex}.row-value output{font-weight:500}.unit{color:#666;font-size:12px}.num,.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}.num{text-align:right;width:44px;padding:0 4px}.motion{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;display:grid}.motion-item{flex-direction:column;gap:6px;min-width:0;display:flex}.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}.anchor-cell{cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;padding:0;display:grid}.anchor-dot{width:4px;height:4px;transition:transform .18s var(--ease-out), background-color .18s var(--ease-out);background:#c4c4c4;border-radius:1.6px}.anchor-cell[aria-checked=true] .anchor-dot{background:#111;transform:scale(2.5)}.anchor-cell:active .anchor-dot{transform:scale(1.6)}.anchor-cell[aria-checked=true]:active .anchor-dot{transform:scale(2.2)}.anchor-cell:focus-visible{outline-offset:-2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){.anchor-cell:hover .anchor-dot{background:#888}.anchor-cell[aria-checked=true]:hover .anchor-dot{background:#111}}.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}.switch{width:36px;height:20px;transition:background-color .2s var(--ease-out);background:#d4d4d4;border-radius:999px;flex:none;padding:2px}.switch-thumb{width:16px;height:16px;transition:transform .22s var(--ease-out), width .16s var(--ease-out);background:#fff;border-radius:50%;display:block}.switch-row[aria-checked=true] .switch{background:#111}.switch-row[aria-checked=true] .switch-thumb{transform:translate(16px)}.switch-row:active .switch-thumb{width:20px}.switch-row[aria-checked=true]:active .switch-thumb{transform:translate(12px)}.switch-row:focus-visible{outline-offset:2px;border-radius:6px;outline:2px solid #111}.pills{flex-wrap:wrap;gap:4px;display:flex}.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}.pill[aria-checked=true]{color:#fff;background:#111;border-color:#111}.pill:active{transform:scale(.97)}.pill:focus-visible{outline-offset:2px;outline:2px solid #111}@media (hover:hover) and (pointer:fine){.pill[aria-checked=false]:hover{border-color:#999}}.colors{grid-template-columns:1fr 1fr;gap:12px;display:grid;position:relative}.picker{flex-direction:column;gap:6px;min-width:0;display:flex}.picker-field{align-items:center;gap:6px;display:flex}.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}.picker-swatch:active{transform:scale(.94)}.picker-swatch[aria-expanded=true]{border-color:#111}.picker-hex{text-transform:lowercase;flex:1;min-width:0}.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}.picker:nth-child(2) .picker-pop{transform-origin:75% 100%}@keyframes picker-in{0%{opacity:0;transform:scale(.96)translateY(4px)}}.picker-sv,.picker-hue{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;position:relative}.picker-sv{background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);height:128px}.picker-hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:14px}.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}.num:focus-visible,.picker-hex:focus-visible,.field textarea:focus-visible{outline-offset:1px;border-color:#111;outline:2px solid #111}.picker-sv:focus-visible,.picker-hue:focus-visible,.picker-swatch:focus-visible,.row input[type=range]:focus-visible,.text-swarm-panel button:focus-visible{outline-offset:2px;outline:2px solid #111}.buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.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}.buttons button:active{transform:scale(.97)}.buttons button.primary{color:#fff;background:#111;border-color:#111}.buttons button.prompt{grid-column:1/-1}@media (hover:hover) and (pointer:fine){.buttons button:hover{border-color:#999}.buttons button.primary:hover{background:#333}}.text-swarm-panel .picker-pop{box-shadow:none;border-color:#0000001a}.variants{position:relative}.variants>.slide,.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}.variants .variant{position:relative}.variant[aria-checked=true]{background:0 0}.row input[type=range]{appearance:none;cursor:pointer;background:0 0;height:20px}.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}.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}.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}.row input[type=range]::-moz-range-thumb{width:14px;height:14px;transition:transform .16s var(--ease-out);background:#111;border:0;border-radius:50%}.row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}.row input[type=range]:active::-moz-range-thumb{transform:scale(1.3)}@media (hover:hover) and (pointer:fine){.row input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}.row input[type=range]:hover::-moz-range-thumb{transform:scale(1.2)}.row input[type=range]:active:hover::-webkit-slider-thumb{transform:scale(1.3)}.row input[type=range]:active:hover::-moz-range-thumb{transform:scale(1.3)}}@media (pointer:coarse){.row input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px}.row input[type=range]::-moz-range-thumb{width:18px;height:18px}}@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)}}.chip{animation:chip-in .32s var(--ease-out) both}.chip:nth-child(2){animation-delay:60ms}.chip:nth-child(3){animation-delay:.12s}@keyframes pop{0%{transform:scale(.92)}}.pill[aria-checked=true]{animation:pop .2s var(--ease-out)}@keyframes tick{0%{opacity:0;transform:scale(.4)rotate(-20deg)}}.icon-tick{animation:tick .26s var(--ease-out)}.buttons button.prompt span{justify-content:center;align-items:center;gap:6px;display:inline-flex}@media (hover:hover) and (pointer:fine){.chip:hover{transform:translateY(-1px)}.chip:active{transform:translateY(0)scale(.97)}.chip svg{transition:transform .2s var(--ease-out)}.chip:hover svg{transform:scale(1.12)}.buttons button:hover{transform:translateY(-1px)}.buttons button:active{transform:scale(.97)}.corner-button:hover{transform:translateY(-1px)}}@media (prefers-reduced-motion:reduce){.text-swarm-panel,.chip,.pill,.icon-tick{animation:none}.variants>.slide,.tabs>.slide{transition:none}.chip:hover,.buttons button:hover,.corner-button:hover,.chip:hover svg{transform:none}.row input[type=range]::-webkit-slider-thumb{transition:none}.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}.text-swarm-stage{padding:52px 16px 16px;position:static}.text-swarm-panel{width:auto;max-height:none;margin:0 12px 12px;animation-name:panel-up;position:static;overflow:visible;translate:none}.tabs{display:grid}.group{min-height:170px}.text-swarm-panel[data-tab=text] .group:not(.group-text),.text-swarm-panel[data-tab=style] .group:not(.group-style),.text-swarm-panel[data-tab=motion] .group:not(.group-motion){display:none}}@media (width<=760px),(height<=900px){.text-swarm-panel{gap:10px;padding:12px 16px}.group{gap:10px}.text-swarm-panel h2,.hint-dots,.hint-pairing,.hint-install,.hint-count:not(.has-warning){display:none}.field{gap:4px}.field textarea{min-height:48px;padding:6px 10px}.sliders{gap:2px}.row{min-height:30px}.buttons{gap:6px}.buttons button{white-space:nowrap;height:34px;padding:0 4px}}@container (width>=260px){@media (width<=760px),(height<=900px){.buttons{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}.buttons button{font-size:12.5px}.buttons button.prompt{grid-column:auto}}}@media (height<=420px){.text-swarm-panel{gap:8px;padding:10px 16px}.field textarea{height:34px;min-height:34px}.hint-count:not(.has-warning){display:none}.row{min-height:28px}.anchor{grid-template-rows:repeat(3,18px);grid-template-columns:repeat(3,18px)}.motion-item{gap:4px}}@media (pointer:coarse){.field textarea,.num,.picker-hex{font-size:16px}}@media (prefers-reduced-motion:reduce){.chip,.tab,.buttons button,.num,.picker-hex,.picker-swatch,.anchor-dot,.switch,.switch-thumb,.pill{transition:none}.picker-pop{animation:none}}