:root{--bg:#e9e4da;--bg-ink:#3b352c;--shell:#f3efe6;--shell-edge:#d8d1c3;--shell-shadow:#3c322347;--cap:#fbf9f4;--cap-edge:#d9d3c6;--cap-ink:#3a342a;--paper:#ecebe4;--paper-ink:#1d1d1b;--panel:#fffdf8;--panel-ink:#2b2720;--muted:#7c7465;--led-white:#fff6dc;--led-green:#3ddc84;--led-red:#ff4a3d;--led-blue:#4aa3ff;--led-amber:#ffb02e;--led-purple:#b77bff;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#1b1916;--bg-ink:#e9e4da;--shell-shadow:#0000008c;--panel:#26231e;--panel-ink:#ece6da;--muted:#a39a89}}*{box-sizing:border-box}body{background:radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--bg) 85%, white), var(--bg));min-height:100vh;color:var(--bg-ink);margin:0}.stage{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:32px;padding:40px 16px;display:flex}.phone{background:linear-gradient(180deg, var(--shell), color-mix(in srgb, var(--shell) 88%, #b9ae98));border:1px solid var(--shell-edge);width:min(460px,100%);box-shadow:0 30px 50px -18px var(--shell-shadow), 0 2px 0 #ffffffb3 inset, 0 -3px 8px #0000000f inset;-webkit-user-select:none;user-select:none;border-radius:34px 34px 46px 46px;padding:22px 22px 26px}.cradle{background:color-mix(in srgb, var(--shell) 80%, #a99d86);border-radius:22px;height:96px;position:relative;box-shadow:inset 0 6px 12px #0000002e}.handset{cursor:grab;background:linear-gradient(#faf7f0,#e4dccb);border:0;border-radius:30px;align-items:center;gap:0;padding:0;transition:transform .26s cubic-bezier(.2,.9,.3,1.2),box-shadow .26s;display:flex;position:absolute;inset:10px 8px;box-shadow:0 6px 10px #00000040,inset 0 1px #fff}.handset:focus-visible{outline:3px solid var(--led-blue);outline-offset:3px}.handset[aria-pressed=true]{cursor:grabbing;transform:translate(10px,-34px)rotate(-7deg)scale(1.04);box-shadow:0 28px 30px #00000047,inset 0 1px #fff}.handset__cup{background:radial-gradient(circle,#00000038 1.5px,#0000 2px) 0 0/9px 9px,linear-gradient(#f6f1e6,#ddd3bf);border-radius:30px;width:70px;height:100%;box-shadow:inset 0 0 0 1px #0000000f}.handset__grip{flex:1;height:44%}.cord{opacity:.8;background:repeating-linear-gradient(#d6ccb8 0 3px,#bdb19a 3px 5px);border-radius:8px;width:16px;height:46px;position:absolute;bottom:18px;right:-14px}.deck{gap:18px;margin-top:22px;display:grid}.display{--brightness:1;border:6px solid #2d2a25;border-radius:6px;align-content:center;gap:4px;min-height:62px;padding:8px 10px;display:grid}.display--eink{background:var(--paper);color:var(--paper-ink);letter-spacing:.06em;filter:brightness(calc(.55 + var(--brightness) * .45));font-family:Courier New,ui-monospace,monospace;font-size:15px;font-weight:700;line-height:1.2;box-shadow:inset 0 2px 4px #00000040}.eink-line+.eink-line{font-weight:400}.display--refresh{animation:.42s steps(3,end) eink-refresh}@keyframes eink-refresh{0%{filter:invert()}50%{filter:invert(0)}75%{filter:invert()}to{filter:none}}.display--segments{--seg-on:#ffb02e;background:radial-gradient(at 50% 0,#2a211b,#110d0b);box-shadow:inset 0 2px 6px #0009}.seg-row{grid-template-columns:repeat(16,1fr);gap:1px;display:grid}.seg-cell{width:100%;height:auto;overflow:visible}.seg{stroke:var(--seg-on);stroke-width:4.2px;stroke-linecap:round;fill:var(--seg-on);opacity:.07}.seg.on{opacity:var(--brightness);filter:drop-shadow(0 0 1.5px var(--seg-on))}.keys{background:color-mix(in srgb, var(--shell) 70%, #8f846f);border-radius:14px;grid-template-columns:repeat(6,1fr);gap:8px;padding:10px;display:grid;box-shadow:inset 0 3px 8px #00000040}.key{--led:transparent;aspect-ratio:1;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:0;position:relative}.key:before{content:"";background:radial-gradient(circle at 50% 70%, var(--led), transparent 70%);opacity:0;border-radius:12px;transition:opacity .2s;position:absolute;inset:-3px}.key__cap{background:linear-gradient(180deg, var(--cap), color-mix(in srgb, var(--cap) 88%, #b8ad97));border:1px solid var(--cap-edge);height:100%;box-shadow:0 5px 0 color-mix(in srgb, var(--cap-edge) 80%, #8a7f69), 0 8px 10px #0003;border-radius:10px;place-items:end center;padding:8px 6px;transition:transform 70ms,box-shadow 70ms;display:grid;position:relative}.key__cap:before{content:"";background:radial-gradient(at 50% 30%,#ffffffb3,#0000000a);border-radius:8px;position:absolute;inset:8px}.key__legend{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--cap-ink);font-size:12px;font-weight:600;position:relative;overflow:hidden}.key__num{color:var(--cap-ink);place-items:center;font-size:20px;font-weight:700;display:grid;position:absolute;inset:0}.key--fn .key__num{letter-spacing:.08em;font-size:10px}.key__legend:not(:empty){font-size:9px}.key__cap:has(.key__legend:not(:empty)) .key__num{place-items:start center;padding-top:6px;font-size:15px}.key__led{background:color-mix(in srgb, var(--led,#000) 30%, #cfc7b8);border-radius:50%;width:7px;height:7px;position:absolute;top:8px;right:9px}.key:active .key__cap,.key.is-pressed .key__cap{box-shadow:0 1px 0 color-mix(in srgb, var(--cap-edge) 80%, #8a7f69), 0 2px 4px #0003;transform:translateY(4px)}.key:focus-visible{outline:3px solid var(--led-blue);outline-offset:3px}[data-color=white]{--led:var(--led-white)}[data-color=green]{--led:var(--led-green)}[data-color=red]{--led:var(--led-red)}[data-color=blue]{--led:var(--led-blue)}[data-color=amber]{--led:var(--led-amber)}[data-color=purple]{--led:var(--led-purple)}.key[data-mode=dim]:before{opacity:.35}.key[data-mode=on]:before{opacity:1}.key[data-mode=pulse]:before{animation:1.6s ease-in-out infinite pulse}.key[data-mode=breathe]:before{animation:4s ease-in-out infinite pulse}.key[data-mode=blink]:before{animation:.5s step-end infinite blink}.key[data-mode=off] .key__led{background:#cfc7b8}.key:not([data-mode=off]) .key__led{background:var(--led);box-shadow:0 0 6px var(--led)}.key[data-mode=dim] .key__led{opacity:.55}.badge{justify-content:center;align-items:center;gap:8px;display:flex}.brand{letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-size:11px}.status-led{background:var(--led);width:9px;height:9px;box-shadow:0 0 8px var(--led);border-radius:50%}.status-led[data-mode=off]{box-shadow:none;background:#cfc7b8}.status-led[data-mode=pulse]{animation:1.6s ease-in-out infinite pulse}.status-led[data-mode=breathe]{animation:4s ease-in-out infinite pulse}.status-led[data-mode=blink]{animation:.5s step-end infinite blink}@keyframes pulse{0%,to{opacity:.25}50%{opacity:1}}@keyframes blink{0%{opacity:1}50%{opacity:0}}@media (prefers-reduced-motion:reduce){.handset{transition:none}.key[data-mode=pulse]:before,.key[data-mode=breathe]:before,.status-led[data-mode=pulse],.status-led[data-mode=breathe]{opacity:.8;animation:none}.display--refresh{animation:none}}.devpanel{background:var(--panel);width:min(420px,100%);color:var(--panel-ink);border:1px dashed var(--muted);border-radius:12px;padding:12px 16px;font-size:13px}.devpanel summary{cursor:pointer;font-weight:600}.devpanel__hint{color:var(--muted);font-weight:400}.devpanel__facts{grid-template-columns:max-content 1fr;gap:4px 12px;display:grid}.devpanel__facts dt{color:var(--muted)}.devpanel__facts dd{word-break:break-all;margin:0;font-family:ui-monospace,monospace}.devpanel__battery{border:1px solid var(--muted);border-radius:8px;gap:6px;display:grid}.devpanel__forget{margin:10px 0}.devpanel__keys{color:var(--muted)}.devpanel__log{word-break:break-all;max-height:280px;margin:0;padding-left:28px;font-family:ui-monospace,monospace;font-size:11px;overflow:auto}.display--none{display:none}.eink-grid{letter-spacing:.02em;grid-template-columns:repeat(5,1fr) .8fr;gap:1px 3px;margin-top:2px;font-size:10px;font-weight:400;display:grid}.eink-cell{border-top:1px solid color-mix(in srgb, var(--paper-ink) 25%, transparent);gap:2px;min-width:0;padding-top:1px;display:flex}.eink-cell__key{font-weight:700}.eink-cell__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.eink-cell--fn{text-transform:uppercase;justify-content:flex-end;font-size:8px;font-weight:700}.start{z-index:10;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.start[hidden]{display:none}.start__card{background:var(--panel);width:min(420px,100%);color:var(--panel-ink);box-shadow:0 20px 40px -12px var(--shell-shadow);text-align:center;border-radius:24px;justify-items:center;gap:14px;padding:28px 22px;display:grid}.start__card h1{margin:0;font-size:22px}.start__card p{margin:0}.start__choose,.start__tap{gap:12px;width:100%;display:grid}.start[data-screen=choose] .start__tap,.start[data-screen=tap] .start__choose{display:none}.start__kind,.start__go{border:1px solid var(--shell-edge);background:var(--shell);width:100%;min-height:64px;color:var(--cap-ink);font:inherit;text-align:left;cursor:pointer;border-radius:16px;gap:4px;padding:14px 16px;display:grid}.start__kind strong{font-size:18px}.start__kind span{color:var(--muted);font-size:14px}.start__go{color:#f3efe6;background:#3b352c;place-items:center;font-size:20px;font-weight:700}.start__note{color:var(--muted);font-size:13px}.handset__label{display:none}@media (width<=640px),(height<=520px) and (pointer:coarse),(display-mode:standalone),(display-mode:fullscreen){body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;min-height:100dvh}.stage{padding:0;display:block}.phone{width:100%;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));touch-action:manipulation;border:0;border-radius:0;flex-direction:column;gap:16px;display:flex}.deck{flex:1;align-content:center;margin-top:0}.cradle{order:2;height:auto;padding:8px}.cord{display:none}.handset{width:100%;height:clamp(72px,14dvh,110px);position:relative;inset:auto}.handset[aria-pressed=true]{background:linear-gradient(#ffd9d4,#f0b6ad);transform:none}.handset__label{letter-spacing:.04em;color:var(--cap-ink);place-items:center;font-size:20px;font-weight:700;display:grid;position:absolute;inset:0}.handset__cup{width:22%}.keys{gap:clamp(6px,2vw,12px);padding:clamp(6px,2vw,12px)}.key__num{font-size:clamp(18px,6vw,30px)}.display--eink{font-size:clamp(14px,4.4vw,22px)}.eink-grid{font-size:clamp(9px,2.8vw,14px)}.devpanel{margin:16px auto}}@media (orientation:landscape) and (height<=520px) and (pointer:coarse){.phone{flex-direction:row;align-items:stretch}.cradle{width:clamp(110px,18vw,170px)}.handset{flex-direction:column;height:100%}.handset__cup{width:100%;height:22%}.keys{gap:6px;padding:6px}.key{aspect-ratio:auto;height:clamp(40px,17dvh,72px)}}.display--qr{grid-template-columns:auto 1fr;align-items:center;column-gap:12px}.eink-qr{aspect-ratio:1;width:clamp(96px,28vw,180px);color:var(--paper-ink);grid-row:span 2;display:block}.eink-qr svg{width:100%;height:100%;display:block}.display--qr .eink-grid{grid-column:1/-1}.rec-light{background:#cfc7b8;border-radius:50%;width:9px;height:9px}.rec-light.is-on{background:#d93025;box-shadow:0 0 8px #d93025}