:root {
      --phone-screen-width: 390px;
      --phone-screen-height: 844px;
      --phone-bezel: 10px;
      --phone-outer-radius: 52px;
      --phone-screen-radius: 42px;
      --phone-safe-top: 50px;
      --phone-safe-bottom: 29px;
      --phone-system-fg: #17181a;
      --phone-screen-bg: #f8f8f9;
      --phone-stage-bg: #eaebee;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 32px;
      background:
        radial-gradient(circle at 50% 15%, rgba(255,255,255,.94), transparent 35%),
        var(--phone-stage-bg);
      color: #191a1d;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .phone-frame {
      position: relative;
      width: calc(var(--phone-screen-width) + var(--phone-bezel) * 2);
      height: calc(var(--phone-screen-height) + var(--phone-bezel) * 2);
      padding: var(--phone-bezel);
      border-radius: var(--phone-outer-radius);
      background:
        linear-gradient(145deg, rgba(255,255,255,.2), transparent 17%),
        linear-gradient(160deg, #3f4146 0%, #202227 48%, #0b0c0f 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.13),
        inset 0 0 0 2px rgba(0,0,0,.85),
        0 32px 68px -20px rgba(10,12,16,.52),
        0 10px 24px -10px rgba(10,12,16,.32);
      isolation: isolate;
    }

    .phone-frame::before,
    .phone-frame::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 96px;
      bottom: 96px;
      width: 2px;
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,.13) 16%, transparent 30%, transparent 72%, rgba(255,255,255,.07) 88%, transparent);
    }
    .phone-frame::before { left: 0; }
    .phone-frame::after { right: 0; }

    .hardware-button {
      position: absolute;
      width: 4px;
      border-radius: 3px;
      background: linear-gradient(90deg, #08090b, #2a2d33 60%, #08090b);
      box-shadow: inset 0 1px rgba(255,255,255,.08);
    }
    .hardware-button.volume { left: -3px; top: 222px; height: 86px; }
    .hardware-button.power { right: -3px; top: 270px; height: 82px; }

    .phone-screen {
      position: relative;
      width: var(--phone-screen-width);
      height: var(--phone-screen-height);
      overflow: hidden;
      border-radius: var(--phone-screen-radius);
      background: var(--phone-screen-bg);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }

    .phone-content {
      position: absolute;
      inset: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-top: var(--phone-safe-top);
      padding-bottom: var(--phone-safe-bottom);
      background: var(--phone-screen-bg);
    }
    .phone-content::-webkit-scrollbar { display: none; }

    .camera-dot {
      position: absolute;
      z-index: 20;
      top: 13px;
      left: 50%;
      width: 10px;
      height: 10px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle at 38% 35%, #344154 0 12%, #0a0c10 34%, #000 76%);
      box-shadow: 0 0 0 1px rgba(255,255,255,.06);
      pointer-events: none;
    }

    .status-bar {
      position: absolute;
      z-index: 15;
      inset: 0 0 auto;
      height: var(--phone-safe-top);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
      align-items: start;
      padding: 14px 20px 0;
      color: var(--phone-system-fg);
      opacity: .8;
      pointer-events: none;
    }
    .status-time {
      justify-self: start;
      display: flex;
      align-items: center;
      height: 15px;
      font-size: 14px;
      font-weight: 560;
      line-height: 1;
      letter-spacing: .01em;
    }
    .status-cutout-zone { width: 56px; }
    .status-icons {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      height: 15px;
      gap: 6px;
    }
    .status-icons svg {
      display: block;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .status-icons .connectivity { width: 15px; height: 12px; }
    .status-icons .wifi { width: 15px; height: 12px; }
    .status-icons .battery { width: 19px; height: 11px; }

    .gesture-indicator {
      position: absolute;
      z-index: 20;
      left: 50%;
      bottom: 8px;
      width: 96px;
      height: 4px;
      transform: translateX(-50%);
      border-radius: 99px;
      background: var(--phone-system-fg);
      opacity: .86;
      pointer-events: none;
    }

    /* Presentation scaling: keep the whole handset visible on short viewports. */
    @media (max-height: 927px) { .phone-frame { zoom: 0.9; } }
    @media (max-height: 840px) { .phone-frame { zoom: 0.82; } }
    @media (max-height: 771px) { .phone-frame { zoom: 0.74; } }
    @media (max-height: 702px) { .phone-frame { zoom: 0.66; } }
    /* Narrow viewports: the handset chrome collapses and the screen fills the
       viewport, so the app behaves like a real phone page instead of
       scrolling sideways. */
    @media (max-width: 480px) {
      body { padding: 0; display: block; }
      .phone-frame { width: 100%; height: 100dvh; padding: 0; border-radius: 0; background: none; box-shadow: none; zoom: 1; }
      .phone-frame::before, .phone-frame::after, .hardware-button { display: none; }
      .phone-screen { width: 100%; height: 100%; border-radius: 0; }
    }