*{box-sizing:border-box}body{margin:0;display:grid;place-items:center;min-height:100vh;background:#f6f6f8;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#16181d}.card{display:flex;align-items:flex-end;gap:40px;padding:26px 46px 34px;background:#fff;border-radius:20px;box-shadow:0 1px 2px #10121d0f,0 12px 32px #10121d14}.panel{display:flex;flex-direction:column;gap:14px;min-width:158px;padding-bottom:30px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:11px;padding:13px 30px;font:inherit;font-weight:600;font-size:16px;color:#fff;background:#16181d;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 90ms ease,box-shadow 90ms ease;box-shadow:0 3px #babcc4}.btn.is-pressed{transform:translateY(3px);box-shadow:0 0 #babcc4}.out{margin:0;font-size:16px;color:#6b6f7d;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}.out.is-on{opacity:1;transform:none}.out strong{color:#16181d;font-size:20px}.stage{display:flex;align-items:flex-end;height:268px}body{grid-template-columns:minmax(0,1fr);padding-inline:16px}#root:has(>.page){width:100%}.page{width:100%;max-width:680px;margin-inline:auto;padding-block:56px 72px;display:flex;flex-direction:column;align-items:center;gap:40px}.table{--die-size: 128px;align-self:stretch;background:#fff;border-radius:20px;box-shadow:0 1px 2px #10121d0f,0 12px 32px #10121d14}.table-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;height:calc(var(--die-size) * 2 + 56px);padding-bottom:36px;border-radius:20px 20px 0 0;background:radial-gradient(ellipse 42% 18% at 50% calc(100% - 36px),#eceef3,#eceef300 70%)}.table-stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(#dcdfe6 1px,transparent 1.5px);background-size:18px 18px;background-position:center bottom;-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}.table-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 16px 24px;border-top:1px solid #eef0f3}.readout{margin:0;display:flex;align-items:baseline;gap:10px}.readout-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b6f7d}.readout-value{min-width:1ch;font-size:28px;line-height:1;font-variant-numeric:tabular-nums;color:#16181d}.readout-value.is-empty{font-weight:500;color:#a3a7b3}@media(prefers-reduced-motion:no-preference){.readout-value{animation:readout-in .22s ease-out}}@keyframes readout-in{0%{opacity:0;transform:translateY(4px)}}.btn:focus-visible{outline:2px solid #16181d;outline-offset:3px}.hero{text-align:center}.hero h1{margin:0;font-size:32px;letter-spacing:-.02em}.tagline{margin:12px auto 0;max-width:34em;font-size:17px;line-height:1.55;color:#4b4f5c}.facts{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.facts li{padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #e3e4e9;font-size:14px;color:#4b4f5c}.facts strong{color:#16181d}.usage{width:100%;min-width:0}.usage h2{margin:0 0 14px;font-size:18px}.code{margin-bottom:12px;border-radius:12px;background:#16181d;overflow:hidden}.code-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 20px;border-bottom:1px solid #262930}.code-lang{font:12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#8b8f9c}.code pre{margin:0;padding:14px 20px 16px;overflow-x:auto;color:#e6e7ec;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.copy{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:7px;padding:5px 10px;font:inherit;font-size:12px;color:#e6e7ec;background:#2c2f37;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.copy:hover{background:#383c46}.copy:focus-visible{outline:2px solid #e6e7ec;outline-offset:2px}.note{margin:16px 0 0;font-size:14px;line-height:1.55;color:#6b6f7d}.note code{padding:2px 6px;border-radius:5px;background:#ebebef;color:#16181d;font-size:13px}.links{margin:20px 0 0;display:flex;gap:18px;font-size:14px}.links a{color:#16181d;font-weight:600}@media(max-width:480px){.page{padding-block:36px 56px;gap:32px}.hero h1{font-size:26px}.tagline{font-size:16px}.facts{gap:8px}.facts li{padding:7px 12px;font-size:13px}.table{--die-size: 104px}.table-bar{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.readout{justify-content:center}.table-bar .btn{width:100%;min-height:52px;font-size:17px}.code-head{padding:4px 6px 4px 16px}.code pre{padding:12px 16px 14px;font-size:12px}.copy{padding:9px 14px;font-size:13px}}