:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101112; color: #9c9c98; --phone-scale: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; }
body { min-height: 100svh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; }
.wordmark { position: absolute; z-index: 1; top: max(28px, env(safe-area-inset-top)); left: max(34px, env(safe-area-inset-left)); color: #d0d0c9; font-size: 17px; font-weight: 530; letter-spacing: -.7px; }
.wordmark span { display: inline-block; margin-left: 13px; padding-left: 13px; border-left: 1px solid #393a39; color: #666863; font-size: 11px; letter-spacing: .25px; font-weight: 400; }
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 550px; padding: 72px 16px 24px; }
.phone-space { position: relative; width: calc(220px * var(--phone-scale)); height: calc(520px * var(--phone-scale)); flex-shrink: 0; }
.phone-space::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -13px; height: 30px; border-radius: 50%; background: #000; filter: blur(18px); opacity: .65; }
.phone { position: absolute; width: 220px; height: 520px; transform: scale(var(--phone-scale)); transform-origin: top left; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.phone-skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(1px 12px 16px #0008); }
.screen { position: absolute; left: 31px; top: 135px; width: 158px; height: 114px; border-radius: 7px 7px 11px 10px; overflow: hidden; background: transparent; transition: background-color .15s; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 95.5% 98%, 6% 100%); }
.screen.lit { background: #b4da7c30; }
#lcd { display: block; width: 147px; height: 84px; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; }
.phone[data-status="running"] #lcd, .phone[data-status="off"] #lcd { opacity: 1; }
.screen-status { position: absolute; inset: 0; padding: 12px; display: flex; align-items: center; justify-content: center; color: #26311c; font: 11px/1.4 ui-monospace, monospace; text-align: center; }
.screen-status[hidden] { display: none; }
.loading-dots { display: inline-block; width: 10px; }
.key { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 48%; background: transparent; color: transparent; cursor: pointer; touch-action: none; -webkit-touch-callout: none; outline: none; transition: background-color 70ms, box-shadow 70ms; }
.key:hover { background: #ffffff0c; }
.key:focus-visible { outline: 1.5px solid #92c0bf; outline-offset: 2px; background: #d4fbff18; }
.key.pressed { background: #0c121b33; box-shadow: inset 0 2px 3px #0008, 0 1px 0 #fff4; transform: translateY(.7px); }
.key[data-key="power"] { border-radius: 4px; }
.key:disabled { cursor: wait; }
.hint { margin: 30px 0 0; font-size: 12px; color: #8a8b85; text-align: center; line-height: 1.6; }
.keyboard-hint { margin: 8px 0 0; font-size: 10px; color: #575b56; text-align: center; }
kbd { font: inherit; color: #7b8078; }
footer { padding: 10px max(34px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 20px; font-size: 10px; color: #525651; }
footer a { color: #747970; text-decoration: none; }
footer a:hover, footer a:focus-visible { color: #d2d7ce; text-decoration: underline; }
noscript { max-width: 260px; color: #d2d7ce; font-size: 12px; line-height: 1.5; }
@media (min-height: 900px) and (min-width: 600px) { :root { --phone-scale: 1.2; } }
@media (max-height: 740px) { :root { --phone-scale: .88; } main { padding-top: 55px; } .hint { margin-top: 23px; } }
@media (max-height: 640px) { :root { --phone-scale: .75; } main { min-height: 480px; padding-top: 48px; } .keyboard-hint { display: none; } .hint { margin-top: 20px; } footer { padding-bottom: 14px; } }
@media (max-width: 480px) { .wordmark { top: max(20px, env(safe-area-inset-top)); left: 22px; font-size: 15px; } footer { padding-left: 22px; padding-right: 22px; } .keyboard-hint { display: none; } }
@media (pointer: coarse) and (min-height: 740px) { :root { --phone-scale: 1.12; } }
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; } }