.charge-demo{--key-h:46px;--fkey-h:34px;--kgap:8px;--hand:124px;position:relative}@media (max-width:640px){.charge-demo{--key-h:38px;--fkey-h:30px;--kgap:5px;--hand:100px}}.charge-device{box-shadow:var(--device-shadow);border-radius:24px;overflow:hidden;container-type:inline-size}.charge-screen{background:var(--dev-screen);height:300px;position:relative}.charge-field{color:var(--dev-ink);letter-spacing:-.01em;flex-direction:column;padding:96px 32px 0;font-size:18px;font-weight:500;line-height:1.45;display:flex}@media (max-width:640px){.charge-field{padding:92px 18px 0;font-size:15px}}.charge-lines{flex-direction:column;gap:2px;min-height:92px;display:flex}.charge-placeholder{color:var(--dev-faint)}.charge-caret{background:var(--a-line);border-radius:1px;width:2px;height:1.15em;margin:0 2px -.2em 1px;animation:1.1s step-end infinite caret-blink;display:inline-block}.charge-line{animation:line-in .6s var(--ease-spring) both;justify-content:space-between;gap:16px;display:flex}@keyframes line-in{0%{opacity:0;transform:translateY(8px)}}.charge-total{border-top:1px solid var(--dev-line);color:var(--dev-faint);justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:6px;font-size:14px;display:flex}.charge-total .font-display{color:var(--dev-ink);font-size:22px;font-weight:600}.charge-chipbox{height:34px;margin-top:6px}.charge-chip{color:var(--dev-ink);background:color-mix(in srgb, var(--dev-ink) 7%, transparent);animation:line-in .5s var(--ease-spring) both;border-radius:999px;align-items:center;gap:6px;padding:5px 12px 5px 9px;font-size:13px;font-weight:600;display:inline-flex}.kb-key,.keycap,.mini-key{font-family:SF Compact,SF Compact Text,system-ui,-apple-system,sans-serif}.charge-deck{background:var(--deck);gap:var(--kgap);--key-w:calc((100cqw - 36px - 8 * var(--kgap)) / 9);border-top:1px solid #00000014;padding:16px 18px 20px;display:grid;overflow:hidden}.kb-row{gap:var(--kgap);display:flex}.kb-key,.keycap{width:var(--key-w);height:var(--key-h);color:var(--key-ink);background:var(--key);box-shadow:inset 0 1px #fffc, 0 3px var(--key-edge), 0 4px 6px -2px var(--key-shadow);border-radius:9px;flex-direction:column;flex:none;justify-content:space-between;align-items:flex-start;padding:6px 7px;font-size:10px;font-weight:500;line-height:1;display:flex;position:relative}.kb-fn{height:var(--fkey-h);justify-content:center;align-items:center;font-size:11px}.kb-num{align-items:center;font-size:13px}.kb-tr{align-self:flex-end;font-size:9px}.keycap{color:var(--key-strong);box-shadow:0 0 0 2px var(--a-line), inset 0 1px #fffc, 0 4px var(--key-edge-strong), 0 5px 8px -2px var(--key-shadow);font-weight:600;transition:transform .12s,box-shadow .12s}.keycap[data-down=true]{box-shadow:0 0 0 2px var(--a-line), inset 0 1px #fffc, 0 1px var(--key-edge-strong), 0 2px 4px -2px var(--key-shadow);transform:translateY(3px)}.charge-moves{gap:2px;margin-inline:-10px;display:grid}.charge-move{border-radius:16px;align-items:center;gap:14px;padding:10px;transition:opacity .35s,background .35s;display:flex}.charge-moves[data-active] .charge-move{opacity:.45}.charge-moves .charge-move[data-on]{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:color-mix(in srgb, var(--inner) 60%, transparent)}.mini-key{color:var(--key-strong);background:var(--key);width:46px;height:40px;box-shadow:inset 0 1px #fffc, 0 3px var(--key-edge-strong), 0 4px 6px -2px var(--key-shadow);border-radius:9px;flex:none;justify-content:center;align-items:center;font-size:13px;font-weight:600;line-height:1;transition:transform .12s,box-shadow .12s;display:flex}.charge-move[data-on] .mini-key{box-shadow:inset 0 1px #fffc, 0 1px var(--key-edge-strong), 0 2px 3px -2px var(--key-shadow);transform:translateY(2px)}.charge-hand{left:calc(var(--hx,0px) - var(--hand) * .389);top:calc(var(--hy,0px) - var(--hand) * .2625);z-index:40;width:var(--hand);height:var(--hand);pointer-events:none;-webkit-user-select:none;user-select:none;transform-origin:38.9% 26.25%;filter:drop-shadow(0 6px 8px #1e285a4d);opacity:0;transition:transform .5s cubic-bezier(.55,0,.85,.35),opacity .35s .1s;position:absolute;transform:translate(64px,96px)rotate(16deg)}[data-hand-state=hover] .charge-hand{opacity:1;transition:transform .7s var(--ease-spring), opacity .25s ease, left .6s var(--ease-spring), top .6s var(--ease-spring);transform:translate(3px,-9px)rotate(-5deg)}[data-hand-state=press] .charge-hand{opacity:1;transition:transform .12s ease-out, opacity .25s, left .6s var(--ease-spring), top .6s var(--ease-spring);transform:translateY(3px)rotate(-5deg)scale(.95)}@media (prefers-reduced-motion:reduce){.charge-hand{display:none}.charge-caret{animation:none}}
.mock-toast{--t-green:#3ac530;--t-blue:#00a5ef;--t-amber:#edb200;pointer-events:none;z-index:30;opacity:0;transition:opacity .4s var(--ease-out-soft), transform .6s var(--ease-spring);justify-content:center;padding:0 12px;display:flex;position:absolute;top:14px;left:0;right:0;transform:translateY(-6px)scale(.95)}@supports (color:lab(0% 0 0)){.mock-toast{--t-green:lab(70.3587% -58.4314 58.4867);--t-blue:lab(63.3038% -18.433 -51.0407);--t-amber:lab(76.3898% 14.5258 98.4589)}}.mock-toast[data-visible]{opacity:1;transform:none}.mock-toast-pill{--tone:var(--t-green);background:var(--ink);color:var(--app);border-radius:20px;width:min(100%,330px);overflow:hidden;box-shadow:0 18px 36px -14px #0a142880,0 2px 6px #0a142833}.mock-toast-pill[data-state=info]{--tone:var(--t-blue)}.mock-toast-pill[data-state=warning]{--tone:var(--t-amber)}.mock-toast-head{align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;display:flex}.mock-toast-badge{background:color-mix(in oklch, var(--tone) 22%, transparent);color:var(--tone);border-radius:50%;flex:none;place-items:center;width:24px;height:24px;display:grid}.mock-toast-badge svg{width:14px;height:14px}.mock-toast-title{color:var(--tone);font-size:13.2px;font-weight:500}.mock-toast-body{transition:grid-template-rows .6s var(--ease-spring);grid-template-rows:0fr;display:grid}.mock-toast-body>p{color:color-mix(in srgb, var(--app) 62%, transparent);opacity:0;min-height:0;transition:padding .6s var(--ease-spring), opacity .3s var(--ease-out-soft);padding:0 16px;font-size:13.5px;line-height:1.4;overflow:hidden}.mock-toast[data-open] .mock-toast-body{grid-template-rows:1fr}.mock-toast[data-open] .mock-toast-body>p{opacity:1;padding:2px 16px 14px;transition-delay:0s,.15s}
.cta{background:radial-gradient(100% 70% at 50% 0%, #ffffff59, transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--a-line) 24%, var(--card)) 0%, color-mix(in srgb, var(--a-line) 10%, var(--app)) 100%);box-shadow:inset 0 0 0 1px var(--line)}.lid{border:12px solid #0c0c0d;border-bottom:0;border-radius:34px 34px 0 0;max-width:940px;margin-inline:10px;box-shadow:inset 0 0 0 1.5px #ffffff1a,0 -10px 60px -20px #0a284673}@media (min-width:980px){.lid{margin-inline:auto}}.lid-screen{border-radius:22px 22px 0 0;position:relative}