:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #edf3ff; background: #090d14; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 42%, #1d2635 0%, #111722 38%, #090d14 78%); }
button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #89e9e2; outline-offset: 5px; }
.device { position: relative; width: min(456px, calc((100svh - 48px) * 456 / 972), calc(100vw - 48px)); aspect-ratio: 456 / 972; padding: 7px; border: 1px solid #65707c; border-radius: 62px; background: linear-gradient(135deg, #59606b, #171c24 18%, #282e38 53%, #737780 88%, #202732); box-shadow: 0 0 0 1px #12161d, 0 0 0 3px #2a303a, 0 28px 75px #0009; }
/* Gemeinsames Raster (8-px-Basis): --rand = Seitenrand für Wortmarke, Text-Block und Navigationsleiste (32px);
   --block = Höhe des Text-Blocks = Knopfspalte (3 × 56px + 2 × 12px); --block-luft = Luft über und unter dem Text-Block (40px),
   auf niedrigen Bildschirmen bis --block-luft-min (24px); --luft = Abstand Text ↔ Knopfspalte (24px). */
.screen { --raster: 8px; --rand: calc(var(--raster) * 4); --block: 192px; --block-luft: calc(var(--raster) * 5); --block-luft-min: calc(var(--raster) * 3); --luft: calc(var(--raster) * 3); width: 100%; height: 100%; position: relative; container-type: inline-size; isolation: isolate; overflow: hidden; border-radius: 54px; background: radial-gradient(ellipse at 50% 34%, #122b4b 0, #0c1e39 34%, #08172e 70%); display: flex; flex-direction: column; }
.side-key { position: absolute; width: 3px; background: linear-gradient(#6c7380, #282e38); border-radius: 3px; }
.side-key--left { left: -5px; top: 20%; height: 7%; box-shadow: 0 69px #424a57; }
.side-key--right { right: -5px; top: 29%; height: 9%; }
.home-indicator { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 31%; height: 4px; border-radius: 5px; background: #e2e7f0; opacity: .88; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (max-width: 520px), (hover: none) and (pointer: coarse), (display-mode: standalone) {
  body { padding: 0; background: #08172e; display: block; }
  .device { width: 100%; height: 100svh; height: 100dvh; min-height: 0; padding: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .screen { border-radius: 0; overflow-y: auto; scrollbar-width: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .screen::-webkit-scrollbar { display: none; }
  .sheet-layer { overflow: hidden; }
  .side-key { display: none; }
  .home-indicator { bottom: max(9px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }