.sf{--sf-bezel:#0e0d0c;--sf-bezel-edge:#1f1e1d;--sf-field:#080707;--sf-slot:#020202;--sf-flap:#2f2d2c;--sf-ink:#edebe7;--sf-shadow-k:.55;justify-items:center;width:100%;display:grid;container-type:inline-size}@supports (color:lab(0% 0 0)){.sf{--sf-bezel:lab(3.69644% .307702 .580588);--sf-bezel-edge:lab(11.2544% .507169 .999561);--sf-field:lab(1.98305% .134625 .256589);--sf-slot:lab(.658503% 0 0);--sf-flap:lab(18.7945% .50512 .998235);--sf-ink:lab(93.0644% .165164 2.28349)}}[data-theme=dark] .sf{--sf-shadow-k:1}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sf{--sf-shadow-k:1}}.sf-board{--units:calc(var(--cols) + 1.44);--w:min(calc(100cqi / var(--units)), 54px);--fh:calc(var(--w) * 1.37);--seam:max(1px, calc(var(--w) * .035));--radius:calc(var(--w) * .055);width:calc(var(--w) * var(--units));padding:calc(var(--w) * .38);border-radius:calc(var(--w) * .22);background:linear-gradient(var(--sf-bezel-edge), var(--sf-bezel) 38%, #0b0a09);box-shadow:inset 0 1px 0 #ffffff29, inset 0 -1px 0 #00000059, 0 1.5px 3px rgb(0 0 0/calc(.55 * var(--sf-shadow-k))), 0 10px 28px rgb(0 0 0/calc(.38 * var(--sf-shadow-k))), 0 30px 64px rgb(0 0 0/calc(.3 * var(--sf-shadow-k)));color:var(--sf-ink);font:500 calc(var(--fh) * .62) / var(--fh) -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial Narrow", Arial, sans-serif;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0;display:block;position:relative}@supports (color:lab(0% 0 0)){.sf-board{background:linear-gradient(var(--sf-bezel-edge), var(--sf-bezel) 38%, lab(2.75093% .253558 .475681))}}.sf-board:focus-visible{outline:2px solid var(--heading,currentColor);outline-offset:4px}.sf-field{grid-template-columns:repeat(var(--cols), var(--w));grid-auto-rows:calc(var(--w) * 1.8);padding:calc(var(--w) * .24) calc(var(--w) * .34) calc(var(--w) * .3);border-radius:calc(var(--w) * .13);background:linear-gradient(#0000008c, transparent calc(var(--w) * .6)), var(--sf-field);display:grid;box-shadow:inset 0 1px #0009,0 1px #ffffff12}.sf-cell{display:block;position:relative}.sf-cell:before{content:"";inset:calc(var(--w) * .165) calc(var(--w) * .08);border-radius:calc(var(--radius) * 1.4);background:var(--sf-slot);position:absolute}.sf-face{inset:calc(var(--w) * .215) calc(var(--w) * .115);perspective:calc(var(--fh) * 4);position:absolute}.sf-face:before,.sf-face:after{content:"";z-index:3;top:calc(50% - var(--w) * .08);width:calc(var(--w) * .06);height:calc(var(--w) * .16);background:var(--sf-slot);position:absolute}.sf-face:before{left:calc(var(--w) * -.02);border-radius:0 1px 1px 0}.sf-face:after{right:calc(var(--w) * -.02);border-radius:1px 0 0 1px}.sf-half{height:calc(50% - var(--seam) / 2);background-color:var(--sf-flap);backface-visibility:hidden;position:absolute;left:0;right:0;overflow:hidden}.sf-top{border-radius:var(--radius) var(--radius) 0 0;transform-origin:50% calc(100% + var(--seam) / 2);top:0}.sf-bottom{border-radius:0 0 var(--radius) var(--radius);transform-origin:50% calc(var(--seam) / -2);bottom:0}.sf-top:after{content:"";pointer-events:none;background:linear-gradient(#ffffff0f,#fff0 70%);position:absolute;inset:0}.sf-bottom:after{content:"";pointer-events:none;background:#0000002b;border-top:1px solid #ffffff14;position:absolute;inset:0}.sf-ink{height:var(--fh);text-align:center;position:absolute;left:0;right:0}.sf-top .sf-ink{top:0}.sf-bottom .sf-ink{bottom:0}.sf-shade,.sf-cast{z-index:1;opacity:0;pointer-events:none;position:absolute;inset:0}.sf-top .sf-shade{background:#000}.sf-bottom .sf-shade{background:linear-gradient(#ffffff24,#ffffff0a)}.sf-cast{background:linear-gradient(#00000052,#00000014)}.sf-leaf{z-index:2}.sf-leaf.sf-bottom{visibility:hidden;transform:rotateX(90deg)}.sf-cell[data-moving] .sf-leaf,.sf-cell[data-moving] .sf-bottom{will-change:transform}.sf-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}