:root{--page:#f3ebdf;--page-ink:#3a3129;--page-muted:#85786a;--shell-hi:#ffc47a;--shell:#f59a3c;--shell-lo:#d9761f;--shell-edge:#b85f15;--bezel:#3a3733;--bezel-lo:#25231f;--key:#fff3e0;--key-lo:#e9d6b8;--key-ink:#8a4a12;--lcd-ink:#1e241a;--panel:#fffaf2;--panel-line:#e4d8c6;--accent:#c8641a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--page:#1c1b19;--page-ink:#eee4d6;--page-muted:#a3978a;--panel:#262421;--panel-line:#3a3632;--accent:#f0a15a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--page:#1c1b19;--page-ink:#eee4d6;--page-muted:#a3978a;--panel:#262421;--panel-line:#3a3632;--accent:#f0a15a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--page);color:var(--page-ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;margin:0;font-family:-apple-system,BlinkMacSystemFont,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif}body{touch-action:manipulation;min-height:100dvh}.stage{min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex}body.debugging .stage{justify-content:flex-start}.device{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:min(86vw,340px);padding-top:26px;position:relative}.keyring{border:9px solid var(--shell-lo);border-bottom:none;border-radius:23px 23px 8px 8px;width:46px;height:40px;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:inset 0 2px #ffffff59}.shell{background:radial-gradient(120% 70% at 30% 8%, #ffffff73, transparent 55%), linear-gradient(170deg, var(--shell-hi), var(--shell) 45%, var(--shell-lo));box-shadow:inset 0 -6px 0 var(--shell-edge), inset 0 3px 0 #fff6, 0 18px 30px -12px #5a2d0a73, 0 3px 6px #5a2d0a33;border-radius:44px 44px 64px 64px/40px 40px 72px 72px;padding:26px 22px 30px;position:relative}.bezel{background:linear-gradient(180deg, var(--bezel), var(--bezel-lo));border-radius:22px;padding:12px;box-shadow:inset 0 2px 6px #0000008c,0 1px #ffffff59}.screen{background:radial-gradient(90% 90% at 45% 40%,#c7cfb2,#aeb899);border-radius:8px;justify-content:center;align-items:center;line-height:0;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px #00000059}#lcd{image-rendering:pixelated;display:block}.keys{justify-content:center;align-items:flex-start;gap:18px;margin-top:26px;display:flex}.key{cursor:pointer;touch-action:none;background:radial-gradient(circle at 38% 30%, #fff, var(--key) 45%, var(--key-lo));width:62px;height:62px;box-shadow:0 5px 0 var(--shell-edge), 0 7px 10px #5a2d0a59, inset 0 -2px 3px #96642840;color:var(--key-ink);border:none;border-radius:50%;padding:0;font:700 15px/1 ui-rounded,SF Pro Rounded,system-ui,sans-serif;transition:transform 50ms,box-shadow 50ms;position:relative}.key:nth-child(2){margin-top:14px}.key span{color:#7a3f0d;opacity:.75;letter-spacing:.05em;position:absolute;bottom:-26px;left:50%;transform:translate(-50%)}.key.down{box-shadow:0 1px 0 var(--shell-edge), 0 2px 4px #5a2d0a59, inset 0 2px 4px #96642859;transform:translateY(4px)}.key:focus-visible,.reset:focus-visible,.pulltab:focus-visible,.link:focus-visible{outline-offset:3px;outline:3px solid #2b6fd6}.reset{background:radial-gradient(circle, #6e3a0e 35%, var(--shell-lo) 40%);cursor:pointer;touch-action:none;border:none;border-radius:50%;width:16px;height:16px;padding:0;position:absolute;top:7px;right:30px;box-shadow:inset 0 1px 2px #00000080}.reset:after{content:"RESET";letter-spacing:.1em;color:#7a3f0d;opacity:.6;font:600 8px/1 system-ui,sans-serif;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.reset.down{background:radial-gradient(circle, #2c1605 45%, var(--shell-lo) 50%)}.pulltab{cursor:pointer;color:#b3261e;z-index:-1;background:repeating-linear-gradient(90deg,#f7f3ea 0 7px,#efe9dc 7px 8px);border:none;border-radius:0 0 8px 8px;width:150px;height:58px;padding:18px 0 0;animation:2.4s ease-in-out infinite tug;position:absolute;top:calc(100% - 18px);left:50%;transform:translate(-50%);box-shadow:0 6px 12px #0003}.device{isolation:isolate}.pulltab-text{letter-spacing:.12em;font-size:14px;font-weight:700}.pulltab.pulled{opacity:0;transition:transform .42s cubic-bezier(.5,0,.8,.4),opacity .42s;animation:none;transform:translate(-50%,120px)}@keyframes tug{0%,70%,to{transform:translate(-50%)}80%{transform:translate(-50%,6px)}90%{transform:translate(-50%,2px)}}.hint{color:var(--page-muted);text-align:center;margin:50px 0 0;font-size:13px}.link{color:var(--accent);font:inherit;cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:8px 12px;font-size:14px;text-decoration:underline}dialog{border:1px solid var(--panel-line);background:var(--panel);color:var(--page-ink);border-radius:16px;width:min(92vw,380px);padding:20px}dialog::backdrop{background:#140f0a66}dialog h2{margin:0 0 12px;font-size:18px}.switch{border-bottom:1px solid var(--panel-line);align-items:center;gap:10px;padding:10px 0;font-size:15px;display:flex}.switch input{width:20px;height:20px;accent-color:var(--accent)}.note{color:var(--page-muted);font-size:13px;line-height:1.6}.primary{width:100%;font:inherit;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px;font-weight:600}.debug{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;width:min(100%,560px);padding:16px;font-size:13px}.debug h2{margin:0;font-size:16px}.debug h3{margin:16px 0 6px;font-size:13px}.debug .row{flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;display:flex}.debug .label{width:64px;color:var(--page-muted)}.debug button{font:inherit;border:1px solid var(--panel-line);background:var(--page);color:var(--page-ink);cursor:pointer;border-radius:8px;padding:6px 10px}.debug button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.debug .state{grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;display:grid}.debug dt{color:var(--page-muted)}.debug dd{font-variant-numeric:tabular-nums;margin:0}.debug .calls{font-variant-numeric:tabular-nums;margin:0;padding-left:20px}.gallery-btn{margin-top:14px}.gallery section h4{margin:16px 0 6px;font-size:13px}.sprites{flex-wrap:wrap;gap:8px;display:flex}.sprites figure{text-align:center;background:#c4ccaf;border-radius:8px;margin:0;padding:6px}.sprites figcaption{color:#3d4436;margin-top:2px;font-size:11px}.sprites canvas{image-rendering:pixelated;display:block}@media (prefers-reduced-motion:reduce){.pulltab{animation:none}}