:root{--formula-glass:oklch(0% 0 none);--formula-glass-ink:oklch(97% 0 none);--formula-glass-dim:oklch(66% .006 255);--formula-glass-line:color-mix(in oklch, var(--formula-glass-ink) 24%, transparent);--formula-ink:oklch(16% .004 255);--formula-on-ink:oklch(97% 0 none);--formula-tone-1:oklch(36% .008 255);--formula-tone-2:oklch(62% .011 255);--formula-tone-3:oklch(79% .011 255);--formula-tone-4:oklch(88% .01 255);--formula-tone-5:oklch(92.5% .008 255);--formula-ice:oklch(91.5% .009 255);--formula-bed:oklch(88% .01 255);--formula-tile:oklch(97.2% .005 255);--formula-well:oklch(90.5% .009 255);--formula-tile-ink:oklch(24% .006 255);--formula-tile-dim:oklch(54% .011 255);--formula-tile-line:oklch(82% .011 255);--formula-hi:oklch(100% 0 none);--formula-shade:.3 .04 255;--formula-metal-hi:oklch(98.5% .003 255);--formula-metal-lo:oklch(74% .012 255);--formula-gold-hi:oklch(93% .07 92);--formula-gold-lo:oklch(70% .12 78);--formula-signal:oklch(93% .09 102);--formula-limit:oklch(70% .17 22);--formula-cold:oklch(74% .1 245);--formula-lamp:oklch(76% .16 62);--formula-text:.8125rem;--formula-caption:.6875rem;--formula-radius:6px;--formula-seam:2px;--formula-band:64px;--formula-ease-out:cubic-bezier(.23, 1, .32, 1)}[data-slot=button][data-formula=machined]{--formula-key-travel:3px;--formula-key-face:var(--formula-tile);--formula-key-face-hover:var(--formula-hi);--formula-key-edge:var(--formula-tile-line);--formula-key-sheen:oklch(100% 0 none/.8);--formula-key-ink:var(--formula-tile-ink);isolation:isolate;min-inline-size:40px;block-size:calc(40px + var(--formula-key-travel));padding-block:0 var(--formula-key-travel);border-radius:var(--formula-radius);color:var(--formula-key-ink);font:inherit;font-size:var(--formula-text);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex:none;justify-content:center;align-items:center;gap:8px;padding-inline:16px;line-height:1;text-decoration:none;display:inline-flex;position:relative}[data-slot=button][data-formula=machined]:before,[data-slot=button][data-formula=machined]:after{content:"";border-radius:inherit;position:absolute;inset-inline:0}[data-slot=button][data-formula=machined]:before{z-index:-2;inset-block:var(--formula-key-travel) 0;background:var(--formula-key-edge);box-shadow:0 0 0 .5px oklch(var(--formula-shade) / .3), 0 1px 2px oklch(var(--formula-shade) / .3), 0 7px 10px -4px oklch(var(--formula-shade) / .45)}[data-slot=button][data-formula=machined]:after{z-index:-1;inset-block:0 var(--formula-key-travel);background:linear-gradient(var(--formula-key-sheen), transparent 70%) var(--formula-key-face);box-shadow:inset 0 1px 0 var(--formula-key-sheen), 0 0 0 .5px oklch(var(--formula-shade) / .3)}[data-slot=button][data-formula=machined][data-tone=gold]{--formula-key-face:color-mix(in oklch, var(--formula-gold-hi), var(--formula-gold-lo));--formula-key-face-hover:color-mix(in oklch, var(--formula-gold-hi) 70%, var(--formula-gold-lo));--formula-key-edge:color-mix(in oklch, var(--formula-gold-lo) 88%, var(--formula-glass));--formula-key-sheen:color-mix(in oklch, var(--formula-gold-hi) 85%, transparent)}[data-slot=button][data-formula=machined][data-tone=ink]{--formula-key-face:var(--formula-ink);--formula-key-face-hover:color-mix(in oklch, var(--formula-ink) 90%, var(--formula-on-ink));--formula-key-edge:var(--formula-glass);--formula-key-sheen:oklch(100% 0 none/.16);--formula-key-ink:var(--formula-on-ink)}[data-slot=button][data-formula=machined][data-size=icon]{inline-size:40px;padding-inline:0}[data-slot=button][data-formula=machined][data-variant=engraved]{block-size:auto;min-block-size:var(--formula-band);color:var(--formula-tile-dim);text-shadow:0 1px 0 var(--formula-hi);padding-block:0}[data-slot=button][data-formula=machined][data-variant=engraved]:before{content:none}[data-slot=button][data-formula=machined][data-variant=engraved]:after{background:var(--formula-tile);box-shadow:inset 0 1px 0 var(--formula-hi), 0 0 0 .5px oklch(var(--formula-shade) / .1), 0 1px 2px oklch(var(--formula-shade) / .1);inset-block:0}[data-slot=button][data-formula=machined][data-variant=engraved] svg{filter:drop-shadow(0 1px 0 var(--formula-hi))}[data-slot=button][data-formula=machined]:focus-visible{outline:2px solid var(--formula-tile-ink);outline-offset:2px}[data-slot=button][data-formula=machined][data-pending]{cursor:progress}[data-slot=button][data-formula=machined][data-disabled]{opacity:.45;cursor:not-allowed}[data-slot=button][data-formula=machined][data-variant=engraved][data-disabled]{opacity:1;color:var(--formula-tile-line)}[data-slot=button][data-formula=machined]:is(:active,[data-pending]):not([data-disabled],[data-variant]){translate:0 var(--formula-key-travel)}[data-slot=button][data-formula=machined]:is(:active,[data-pending]):not([data-disabled],[data-variant]):before{opacity:.5;translate:0 calc(-1 * var(--formula-key-travel))}[data-slot=button][data-formula=machined]:is(:active,[data-pending]):not([data-disabled],[data-variant]):after{box-shadow:inset 0 2px 3px oklch(var(--formula-shade) / .22), 0 0 0 .5px oklch(var(--formula-shade) / .4)}[data-slot=button][data-formula=machined][data-variant=engraved]:is(:active,[data-pending]):not([data-disabled]){scale:.97}[data-slot=button][data-formula=machined][data-variant=engraved]:is(:active,[data-pending]):not([data-disabled]):after{background:var(--formula-well);box-shadow:inset 0 1px 2px oklch(var(--formula-shade) / .22), 0 1px 0 var(--formula-hi)}@media (hover:hover) and (pointer:fine){[data-slot=button][data-formula=machined]:not([data-disabled],[data-variant]):hover:after{background-color:var(--formula-key-face-hover)}[data-slot=button][data-formula=machined][data-variant=engraved]:not([data-disabled]):hover{color:var(--formula-tile-ink)}}@media (prefers-reduced-motion:no-preference){[data-slot=button][data-formula=machined]{transition:translate 80ms var(--formula-ease-out), scale 80ms var(--formula-ease-out), color .15s ease-out}[data-slot=button][data-formula=machined]:before{transition:translate 80ms var(--formula-ease-out), opacity 80ms var(--formula-ease-out)}[data-slot=button][data-formula=machined]:after{transition:background-color .15s ease-out}}[data-slot=glass][data-formula=readout]{--formula-bracket:10px;background:var(--formula-glass);color:var(--formula-glass-ink);font-size:var(--formula-text);padding:30px 28px;line-height:1.3;position:relative}[data-slot=glass][data-formula=readout][data-brackets]:before{content:"";inset:var(--formula-bracket);border:1px solid color-mix(in oklch, var(--formula-glass-ink) 45%, transparent);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) top left / var(--formula-bracket) var(--formula-bracket) no-repeat, linear-gradient(#000 0 0) top right / var(--formula-bracket) var(--formula-bracket) no-repeat, linear-gradient(#000 0 0) bottom left / var(--formula-bracket) var(--formula-bracket) no-repeat, linear-gradient(#000 0 0) bottom right / var(--formula-bracket) var(--formula-bracket) no-repeat;mask:linear-gradient(#000 0 0) top left / var(--formula-bracket) var(--formula-bracket) no-repeat, linear-gradient(#000 0 0) top right / var(--formula-bracket) var(--formula-bracket) no-repeat, linear-gradient(#000 0 0) bottom left / var(--formula-bracket) var(--formula-bracket) no-repeat, linear-gradient(#000 0 0) bottom right / var(--formula-bracket) var(--formula-bracket) no-repeat;position:absolute}[data-slot=glass][data-formula=readout] [data-slot=glass-caption]{color:var(--formula-glass-dim);font-size:var(--formula-caption)}[data-slot=tile-group][data-formula=machined]{gap:var(--formula-seam);background:var(--formula-bed);grid-template-columns:repeat(auto-fit,minmax(88px,1fr));display:grid}[data-slot=tile][data-formula=machined]{border-radius:var(--formula-radius);background:var(--formula-tile);box-shadow:inset 0 1px 0 var(--formula-hi), 0 0 0 .5px oklch(var(--formula-shade) / .1), 0 1px 2px oklch(var(--formula-shade) / .1);color:var(--formula-tile-dim);font-size:var(--formula-caption);text-align:center;text-wrap:balance;align-content:start;justify-items:center;gap:10px;padding:18px 4px 14px;line-height:1.3;transition:color .15s ease-out;display:grid;position:relative}[data-slot=tile][data-formula=machined]:is(label){cursor:pointer;-webkit-user-select:none;user-select:none}[data-slot=tile][data-formula=machined]:has([data-checked],[data-pressed]){color:var(--formula-tile-ink)}[data-slot=tile][data-formula=machined][data-lamp]:after{content:"";background:var(--formula-tile-line);border-radius:50%;block-size:4px;inline-size:4px;transition:background-color .15s ease-out,box-shadow .15s ease-out;position:absolute;inset-block-start:8px;inset-inline-end:8px}[data-slot=tile][data-formula=machined][data-lamp]:has([data-checked],[data-pressed]):after{background:var(--formula-lamp);box-shadow:0 0 5px color-mix(in oklch, var(--formula-lamp) 70%, transparent)}
