/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@font-face{font-family:Amstelvar;src:url(/fonts/amstelvar.woff2)format("woff2");font-weight:100 1000;font-stretch:50% 125%;font-display:block}@font-face{font-family:Anybody;src:url(/fonts/anybody.woff2)format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:block}@font-face{font-family:Bitcount;src:url(/fonts/bitcount.woff2)format("woff2");font-weight:100 900;font-display:block}@font-face{font-family:Bricolage Grotesque;src:url(/fonts/bricolage-grotesque.woff2)format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:block}@font-face{font-family:Climate Crisis;src:url(/fonts/climate-crisis.woff2)format("woff2");font-display:block}@font-face{font-family:Decovar;src:url(/fonts/decovar.woff2)format("woff2");font-display:block}@font-face{font-family:Façade;src:url(/fonts/facade.woff2)format("woff2");font-weight:100 900;font-display:block}@font-face{font-family:Fraunces;src:url(/fonts/fraunces.woff2)format("woff2");font-weight:100 900;font-display:block}@font-face{font-family:Google Sans Flex;src:url(/fonts/google-sans-flex.woff2)format("woff2");font-weight:1 1000;font-stretch:25% 151%;font-display:block}@font-face{font-family:Kablammo;src:url(/fonts/kablammo.woff2)format("woff2");font-display:block}@font-face{font-family:Recursive;src:url(/fonts/recursive.woff2)format("woff2");font-weight:300 1000;font-display:block}@font-face{font-family:Science Gothic;src:url(/fonts/science-gothic.woff2)format("woff2");font-weight:100 900;font-stretch:50% 200%;font-display:block}@font-face{font-family:Sixtyfour;src:url(/fonts/sixtyfour.woff2)format("woff2");font-display:block}@font-face{font-family:Albert Sans;src:url(/fonts/albert-sans.woff2)format("woff2");font-weight:100 900;font-display:block}@font-face{font-family:Doto;src:url(/fonts/doto.woff2)format("woff2");font-weight:100 900;font-display:block}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-body:#e2e0db;--color-ink:#1a1a1a;--color-stage:#111;--color-stage-ink:#f2f0eb;--color-lcd:#1c1c1c;--color-lcd-ink:#f2f0eb;--color-key:#f2f0eb;--color-key-ink:#1a1a1a;--color-accent:#1a1a1a;--color-about:#ffd23f;--color-about-ink:#1a1a1a;--color-label:#1a1a1ae6}@supports (color:color-mix(in lab, red, red)){:root,:host{--color-label:color-mix(in srgb, var(--color-ink) 90%, transparent)}}:root,:host{--color-stage-key:var(--color-stage-ink);--font-panel:"Doto", ui-monospace, monospace;--font-ui:"Albert Sans", system-ui, sans-serif;--radius-panel:12px;--radius-keycap:6px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.isolate{isolation:isolate}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.h-full{height:100%}.shrink{flex-shrink:1}.resize{resize:both}.flex-col{flex-direction:column}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.lowercase{text-transform:lowercase}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}:root[data-theme=signal]{--color-body:#cf2d1b;--color-ink:#fff;--color-stage:#f3f1ec;--color-stage-ink:#d9261c;--color-lcd:#2b0b07;--color-lcd-dot:#3b1510;--color-lcd-ink:#ffe3c9;--color-key:#d9402d;--color-key-ink:#fff;--color-accent:#1a1a1a;--color-label:var(--color-ink);--color-stage-key:#b81a0e;--color-about:#111;--color-about-ink:#f2f0eb}:root[data-theme=paper]{--color-body:#f4f2ee;--color-ink:#1a1a1a;--color-stage:#fff;--color-stage-ink:#141414;--color-lcd:#1c1c1c;--color-lcd-dot:#2a2a2a;--color-lcd-ink:#f2f0eb;--color-key:#fff;--color-key-ink:#1a1a1a;--color-accent:#e23d2b;--color-about:#d9261c;--color-about-ink:#fff4f0}:root[data-theme=night]{--color-body:#161616;--color-ink:#f2f0eb;--color-stage:#0a0a0a;--color-stage-ink:#f2f0eb;--color-lcd:#1a0e0c;--color-lcd-dot:#2a1714;--color-lcd-ink:#ff7a5c;--color-key:#2e2e2e;--color-key-ink:#f2f0eb;--color-accent:#ff4d2e;--color-about:#f4f2ee;--color-about-ink:#141414}:root[data-theme=pop]{--color-body:#ffd23f;--color-ink:#1a1a1a;--color-stage:#0e0e0e;--color-stage-ink:#ffd23f;--color-lcd:#1c1a10;--color-lcd-dot:#2a2716;--color-lcd-ink:#ffd23f;--color-key:#ffd94f;--color-key-ink:#1a1a1a;--color-accent:#e6392b;--color-about:#e2e0db;--color-about-ink:#1a1a1a}html,body,#root{height:100%}body{background:var(--color-body);color:var(--color-ink);-webkit-font-smoothing:antialiased;margin:0}#root{background:var(--color-stage)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}.panel{--panel-h:256px;height:var(--panel-h);background:var(--color-body);border-radius:var(--radius-panel) var(--radius-panel) 0 0;flex:none;grid-template-columns:340px minmax(0,1fr) minmax(0,1fr) 92px;display:grid;overflow:hidden}.panel__column{flex-direction:column;min-width:0;display:flex}.panel__column+.panel__column{border-left:1px solid color-mix(in srgb, var(--color-ink) 8%, transparent)}.panel__module{flex-direction:column;flex:auto;min-width:0;padding:20px 28px;display:flex;position:relative}.panel__heading{font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;line-height:24px;overflow:hidden}.panel__body{flex:auto;align-items:flex-start;gap:8px;min-height:0;display:flex}.panel__handle{display:none}@media (width<=899px){.panel{overscroll-behavior:contain;height:auto;max-height:55vh;padding-bottom:env(safe-area-inset-bottom);display:block;overflow-y:auto}.panel__handle{cursor:pointer;background:0 0;border:0;width:44px;height:20px;margin:0 auto;padding:0;display:block;position:relative}.panel__handle:after{content:"";background:color-mix(in srgb, var(--color-ink) 25%, transparent);border-radius:2px;height:4px;position:absolute;top:8px;left:2px;right:2px}.panel__handle:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px;border-radius:6px}.panel--peek{max-height:none;overflow:hidden}.panel--peek .panel__column:not(:first-of-type){display:none}.panel__column+.panel__column{box-shadow:none;border-left:0}.panel__column>.panel__module{border-top:1px solid color-mix(in srgb, var(--color-ink) 8%, transparent)}.panel__column:first-child>.panel__module:first-child{box-shadow:none;border-top:0}.panel__module{padding:20px}}.readout{z-index:1;background-color:var(--color-lcd);width:184px;color:var(--color-lcd-ink);font-family:var(--font-panel);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:8px;text-decoration:none;display:block;position:absolute;top:16px;left:16px;box-shadow:inset 0 0 0 1px #0009,inset 0 1px 3px #00000080,0 1px #ffffff0f}.readout:focus-visible{outline:2px solid var(--color-stage-ink);outline-offset:3px}.readout__screen{flex-direction:column;gap:8px;padding:10px 12px 12px;display:flex}.readout__line{white-space:nowrap;text-overflow:clip;line-height:1;display:block;overflow:hidden}.readout__line--label{font-variation-settings:"wght" 700;opacity:.75;font-size:10px}.readout__line--value{font-variation-settings:"wght" 700, "ROND" 0;font-size:20px;font-weight:700}@media (width<=599px){.readout{width:128px;top:12px;left:12px}.readout__line--value{font-size:16px}}.keycap{appearance:none;border-radius:var(--radius-keycap);background:var(--color-key);min-width:36px;height:28px;color:var(--color-key-ink);font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;border:0;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:11px;line-height:1;transition:background-color .12s ease-out,color .12s ease-out,box-shadow .12s ease-out;display:inline-flex;position:relative}.keycap:hover:not(:disabled){background:color-mix(in srgb, var(--color-ink) 7%, var(--color-key))}.keycap:active:not(:disabled),.keycap--pressed{background:var(--color-ink);color:var(--color-body)}.keycap--pressed:hover:not(:disabled){background:color-mix(in srgb, var(--color-body) 14%, var(--color-ink));color:var(--color-body)}.keycap:disabled{opacity:.4;cursor:default}.keycap--focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.keycap-group{flex-direction:column;align-items:center;gap:6px;display:inline-flex}.keycap-group__row{gap:6px;padding-bottom:4px;display:inline-flex}.keycap-group__label{font-family:var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink);white-space:nowrap;font-size:11px;font-weight:600;line-height:1}@media (prefers-reduced-motion:reduce){.keycap{transition:none}}.keycap--lcd,.keycap--lcd:hover:not(:disabled){background:var(--color-lcd);color:var(--color-lcd-ink)}.keycap--lcd:hover:not(:disabled){background:color-mix(in srgb, white 8%, var(--color-lcd))}.keycap--lcd:active:not(:disabled){background:var(--color-lcd-ink);color:var(--color-lcd)}.keycap--primary,.keycap--primary:hover:not(:disabled){background:var(--color-stage-key);color:var(--color-stage)}.keycap--primary:hover:not(:disabled){background:color-mix(in srgb, var(--color-stage) 14%, var(--color-stage-key))}.keycap--primary:active:not(:disabled){background:color-mix(in srgb, var(--color-stage) 28%, var(--color-stage-key))}.keycap--ghost,.keycap--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--color-stage-key) 8%, transparent);color:var(--color-stage-key)}.keycap--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--color-stage-key) 16%, transparent)}.keycap--ghost:active:not(:disabled){background:var(--color-stage-key);color:var(--color-stage)}.keycap--big{letter-spacing:.06em;flex-direction:column;gap:5px;height:48px;padding:0 6px;font-size:10px}.keycap--big>svg{width:27px;height:18px}.keycap--mode{gap:7px;height:76px;font-size:10px}.keycap--mode>svg{width:32px;height:22px}.share{gap:7px;min-width:0;height:28px;padding:0 11px 0 9px}.share>svg{flex:none}@media (width<=599px){.share{gap:0;min-width:36px;height:36px;padding:0 12px}.share__word{display:none}.stage__keys{gap:8px;top:12px;right:12px}}.share-menu{position:relative}.share-menu__list{z-index:3;background:var(--color-lcd);min-width:132px;color:var(--color-lcd-ink);border-radius:8px;flex-direction:column;gap:2px;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 32px #00000059}.share-menu__item{appearance:none;height:32px;color:inherit;font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px;align-items:center;gap:8px;padding:0 10px;font-size:11px;display:flex}.share-menu__item:hover,.share-menu__item:focus-visible{background:color-mix(in srgb, var(--color-lcd-ink) 14%, transparent);outline:none}.share-menu__item:disabled{opacity:.4;cursor:default}@media (pointer:coarse){.share-menu__item{height:44px;font-size:12px}}.about{background:0 0;border:0;justify-content:center;align-items:center;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;display:none}.about[open]{display:flex}.about::backdrop{background:#0000008c}.about__panel{background:var(--color-about);width:min(92vw,640px);color:var(--color-about-ink);font-family:var(--font-ui);border-radius:16px;padding:44px 48px 40px;font-size:18px;line-height:1.45;position:relative;box-shadow:0 24px 64px #00000059}.about__panel p{margin:0 0 16px}.about__panel p:last-of-type{margin-bottom:0}.about__title{font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 20px;font-size:34px;line-height:1.1}.about__byline{opacity:.85;margin-top:24px;font-size:15px}.about__link{color:inherit;text-underline-offset:3px;text-decoration:underline}.about__close{appearance:none;background:var(--color-about-ink);height:28px;color:var(--color-about);font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:0;border-radius:6px;padding:0 12px;font-size:11px;position:absolute;top:16px;right:16px}.about__close:focus-visible,.about__link:focus-visible{outline:2px solid var(--color-about-ink);outline-offset:3px}@media (width<=599px){.about__panel{padding:36px 24px 28px;font-size:16px}.about__title{font-size:26px}}.stage{flex:auto;min-height:36vh;display:flex;position:relative}@media (width<=599px){.stage{min-height:45vh}}.stage{background:var(--color-stage);color:var(--color-stage-ink);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;overflow:hidden;box-shadow:inset 0 14px 18px -14px #0000008c}.stage__keys{z-index:1;gap:8px;display:flex;position:absolute;top:16px;right:16px}.stage__word{white-space:nowrap;cursor:text;outline:none;margin:0;font-weight:400;line-height:1}.stage__word:focus-visible{outline:2px solid var(--color-stage-ink);outline-offset:12px;border-radius:4px}.stage__word--editing,.stage__word--editing:focus-visible{-webkit-user-select:text;user-select:text;caret-color:var(--color-accent-on-stage,var(--color-stage-ink));outline:none}.stage__letter{display:inline-block}.stage__probe{visibility:hidden;white-space:nowrap;pointer-events:none;position:absolute;top:0;left:0}.stage--dropping:after{content:"Drop a variable font";border:1px dashed color-mix(in srgb, var(--color-stage-ink) 50%, transparent);font-family:var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb, var(--color-stage-ink) 70%, transparent);pointer-events:none;border-radius:12px;justify-content:center;align-items:flex-end;padding-bottom:16px;font-size:12px;font-weight:600;display:flex;position:absolute;inset:16px}.mode{flex-direction:column;gap:12px;width:100%;display:flex}.mode .keycap-group__row{grid-template-columns:repeat(3,88px);gap:10px;padding-bottom:4px;display:grid}@media (width<=899px){.mode .keycap-group__row{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}}.slider{--thumb-w:18px;--track-h:20px;-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;min-width:0;display:flex}.slider__row{height:16px;color:var(--color-ink);white-space:nowrap;justify-content:space-between;align-items:baseline;line-height:16px;display:flex}.slider__label{align-items:center;gap:6px;min-width:0;display:inline-flex}.slider__label-text{text-overflow:ellipsis;min-width:0;font-family:var(--font-ui);font-variation-settings:"wght" 500;color:var(--color-label);font-size:12px;font-weight:500;overflow:hidden}.slider__value{font-family:var(--font-ui);font-variation-settings:"wght" 500;font-variant-numeric:tabular-nums;flex:none;margin-left:8px;font-size:12px;font-weight:500}.slider--dragging .slider__value{font-variation-settings:"wght" 700;font-weight:700}.slider__track{height:var(--track-h);cursor:pointer;touch-action:none;position:relative}.slider__groove{background:color-mix(in srgb, var(--color-ink) 30%, transparent);border-radius:2px;height:4px;position:absolute;top:8px;left:0;right:0;overflow:hidden}.slider__fill{width:calc(var(--slider-fraction,0) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);background:color-mix(in srgb, var(--color-ink) 72%, transparent);position:absolute;top:0;bottom:0;left:0}.slider__default{top:0;bottom:0;left:calc(var(--slider-default,0) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);background:color-mix(in srgb, var(--color-ink) 40%, transparent);width:1px;margin-left:-.5px;position:absolute}.slider__thumb{top:1px;left:calc(var(--slider-fraction,0) * (100% - var(--thumb-w)));width:var(--thumb-w);background:var(--color-ink);height:18px;box-shadow:0 0 0 2px var(--color-body);pointer-events:none;border-radius:50%;position:absolute}.slider--dragging .slider__thumb{background:color-mix(in srgb, var(--color-ink) 80%, var(--color-body))}.slider__thumb-line{display:none}.slider--focus-visible .slider__track{outline:2px solid var(--color-ink);outline-offset:2px;border-radius:6px}.slider--keyed .slider__thumb,.slider--keyed .slider__fill{transition:left 80ms ease-out,width 80ms ease-out}@media (prefers-reduced-motion:reduce){.slider--keyed .slider__thumb,.slider--keyed .slider__fill{transition:none}}.slider--compact{--track-h:16px}.slider--compact .slider__row{height:14px;line-height:14px}.slider--compact .slider__label-text,.slider--compact .slider__value{font-size:11px}.slider--compact .slider__groove{top:6px}.slider--compact .slider__thumb{height:14px}.slider__swing{height:14px;top:3px;left:calc(var(--swing-from,0) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);width:calc((var(--swing-to,0) - var(--swing-from,0)) * (100% - var(--thumb-w)));background:color-mix(in srgb, var(--color-ink) 12%, transparent);pointer-events:none;border-radius:7px;position:absolute}.slider--compact .slider__swing{border-radius:6px;height:12px;top:2px}.slider--touch,.slider--touch.slider--compact{--track-h:36px}.slider--touch .slider__groove,.slider--touch.slider--compact .slider__groove{border-radius:3px;height:6px;top:15px}.slider--touch .slider__thumb,.slider--touch.slider--compact .slider__thumb{height:22px;top:7px}.slider--touch .slider__swing,.slider--touch.slider--compact .slider__swing{border-radius:7px;height:14px;top:11px}.wave{flex-direction:column;gap:12px;width:100%;max-width:560px;display:flex}.wave__body{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:28px;display:grid}.wave__body--plain{grid-template-columns:minmax(0,1fr)}.wave__shapes .keycap-group__row{grid-template-columns:repeat(3,60px);gap:8px;padding-bottom:4px;display:grid}.wave__shapes .keycap--wave{height:60px;padding:0}.wave__shapes .keycap--wave>svg{width:30px;height:20px}.wave__sliders{flex-direction:column;gap:10px;min-width:0;max-width:320px;display:flex}@media (width<=899px){.wave__body{grid-template-columns:minmax(0,1fr);row-gap:12px}.wave__shapes .keycap-group__row{grid-template-columns:repeat(3,60px)}.wave__sliders{max-width:none}}.panel__module--theme .keycap-group__row{flex-direction:column;gap:10px;padding-bottom:4px}.theme-key{width:34px;min-width:34px;height:34px;padding:0}.theme-key__face{background:color-mix(in srgb, var(--color-key-ink) 18%, transparent);border-radius:2px;width:10px;height:10px;display:block}.keycap.theme-key,.keycap.theme-key:hover:not(:disabled),.keycap.theme-key.keycap--pressed{background:var(--color-key);color:var(--color-key-ink)}.keycap.theme-key.keycap--pressed{box-shadow:0 0 0 2px var(--color-body), 0 0 0 4px var(--color-ink)}.keycap--pressed .theme-key__face{background:var(--color-accent)}@media (width<=899px){.panel__module--theme .keycap-group__row{flex-flow:wrap;gap:10px}.theme-key{width:44px;min-width:44px;height:44px}}.stepper{flex-direction:column;gap:6px;width:100%;min-width:0;display:flex;position:relative}.stepper__row{align-items:center;gap:8px;padding-bottom:4px;display:flex}.stepper__row>.keycap{flex:0 0 32px;min-width:32px;height:40px;padding:0}.stepper__row>.keycap>svg{width:12px;height:12px}.stepper__name{appearance:none;background:color-mix(in srgb, var(--color-ink) 6%, transparent);min-width:0;height:40px;color:var(--color-ink);font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;border:0;border-radius:7px;flex:auto;justify-content:space-between;align-items:center;gap:8px;padding:0 12px 0 16px;font-size:18px;line-height:1;display:flex}.stepper__name:hover{background:color-mix(in srgb, var(--color-ink) 10%, transparent)}.stepper__name-text{text-overflow:ellipsis;white-space:nowrap;line-height:28px;overflow:hidden}.stepper__name>svg{opacity:.6;flex:none;width:14px;height:14px}.stepper__name:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px}.stepper__label{font-family:var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink);font-size:11px;font-weight:600;line-height:1}.stepper__list{z-index:10;background:var(--color-body);border-radius:8px;max-height:320px;margin:0;padding:4px;list-style:none;position:fixed;overflow-y:auto;box-shadow:0 8px 24px #00000024}.stepper__option{height:40px;font-family:var(--font-panel);font-variation-settings:"wght" 700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;padding:0 14px;font-size:16px;display:flex}.stepper__option--active{background:color-mix(in srgb, var(--color-ink) 8%, transparent);letter-spacing:0;text-transform:none;font-size:20px;font-weight:500}.stepper__option[aria-selected=true]{font-weight:700}.typeface{flex-direction:column;gap:12px;width:100%;max-width:560px;display:flex}.typeface__row{align-items:flex-start;gap:8px;display:flex}.typeface__row>.stepper{flex:auto}.typeface__page{flex:none;min-width:40px;height:28px;padding:0 8px}.axes{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:34px;align-items:start;gap:6px 20px;width:100%;margin-top:4px;display:grid}.axis{grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:12px;min-width:0;height:34px;padding:0 4px;display:grid}.axis__static{width:20px;height:20px;display:block}.axis__key{width:20px;min-width:20px;height:20px;padding:0}.axis__key:has(input:focus-visible){outline:2px solid var(--color-ink);outline-offset:3px}.axis__key-face{background:color-mix(in srgb, var(--color-ink) 72%, transparent);border-radius:2px;width:7px;height:7px;display:block}.axis--on .axis__key-face{background:var(--color-body)}@media (width<=599px){.axes{grid-template-columns:minmax(0,1fr)}}@media (pointer:coarse){.axes{grid-auto-rows:56px;row-gap:6px}.axis{grid-template-columns:36px minmax(0,1fr);height:56px}.axis__key{width:36px;min-width:36px;height:36px}.axis__key-face{width:10px;height:10px}.axis__static{width:36px;height:36px}}