:root {
      /* Tweak these if you want a larger/smaller phone */
      --phone-width: min(92vw, 420px);
      --aspect: 390/844; /* iPhone 15 logical points */
      --bezel: 12px;     /* black frame around the screen */
      --radius: 46px;    /* outer corner radius */
      --shadow: 0 20px 50px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.18);
      --metal: linear-gradient(180deg, #fafafa 0%, #eaeaea 50%, #f7f7f7 100%);
    }

    html, body {
      /* height: 100%; */
      margin: 0;
      background: radial-gradient(1200px 800px at 70% 10%, #f7f8ff, #eef1ff 40%, #e6e9f5 70%, #e0e3ef 100%) repeat;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: #111;
      display: grid;
      place-items: center;
      }
      /* 
html,
      body {
        margin: 0;
        height: 100%;
        background: #838383;
        color: #eee;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
          Ubuntu;
      } */
      .hidden {
        display: none;
      }
      .wrap {
        /* display: grid;
        place-items: center;
        height: 100%;
        padding: 16px;
        gap: 16px; */
      }
      #stage {
        position: relative;
        /* width: min(96vw, 960px); */
        /* width: min(42vw, 480px); */
        min-height: 720px;
        aspect-ratio: 9/16;
      }
      video,
      canvas {
        position: absolute;
        inset: 0;
        max-width: 100%;
        height: 100%;
        /* transform: scale3d(1.5, 1.5, -1.5); */
        /* transform: translate(-50%, -50%); */
        border-radius: 16px;
      }

      .reverse {
        transform: scaleX(-1);
      }

      #filterPercent {
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 12px;
        border-radius: 12px;
        font-weight: 600;
        backdrop-filter: blur(4px);
      }
      #audio {
        position: absolute;
        bottom: 140px;
      }
      #video-zone {
        position: relative;
        width: 100%;
        aspect-ratio: 9/16;
        overflow: hidden;
      }
      #video {
        /* width: 100%;
        height: auto;
        max-height: 100vh;
        object-fit: cover; */
        /*fills space without distortion */
      }
      #hud {
        position: absolute;
        left: 12px;
        top: 180px;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 12px;
        border-radius: 12px;
        font-weight: 600;
        backdrop-filter: blur(4px);
      }
      #menu {
        position: absolute;
        bottom: 180px;
        left: 12px;
        align-items: center;
        display: flex;
        gap: 10px;
      }
      #counter {
        font-size: 28px;
      }
      #status {
        font-size: 12px;
        opacity: 0.8;
      }
      .row {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      button {
        all: unset;
        padding: 10px 14px;
        border-radius: 12px;
        background: #1f2937;
        cursor: pointer;
      }
      button:hover {
        background: #374151;
      }
      .small {
        font-size: 12px;
        opacity: 0.8;
      }

      .text-white {
        color: #fff;
      }
      .tip {
        margin: 0 0 30px 12px;
      }

.phone-wrap {
      padding: 28px; /* room for drop shadow */
    }

    .phone {
      width: var(--phone-width);
      aspect-ratio: var(--aspect);
      position: relative;
      border-radius: var(--radius);
      background: var(--metal);
      box-shadow: var(--shadow);
    }

    /* Outer rim (aluminum/titanium look) */
    .phone::before {
      content: "";
      position: absolute;
      inset: 2px; /* slight lip */
      border-radius: calc(var(--radius) - 2px);
      background: #0b0b0b; /* deep black body */
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 2px rgba(0,0,0,.5);
    }

    /* Screen area */
    .screen {
      position: absolute;
      inset: calc(var(--bezel) + 2px);
      border-radius: calc(var(--radius) - var(--bezel));
      overflow: hidden;
      background: linear-gradient(145deg, #0b0f1a, #0a1020);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
      display: grid;
      place-items: center;
    }

    /* Subtle iOS-esque wallpaper (can remove) */
    .screen::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(60% 40% at 65% 20%, rgba(96,162,255,.32), transparent 60%),
        radial-gradient(40% 30% at 30% 75%, rgba(127,235,207,.22), transparent 60%),
        radial-gradient(45% 35% at 70% 70%, rgba(255,164,209,.18), transparent 60%);
      filter: blur(6px) saturate(110%);
      pointer-events: none;
    }

    /* Dynamic Island */
    .island {
      position: absolute;
      top: clamp(10px, 2.4vh, 16px);
      left: 50%;
      transform: translateX(-50%);
      width: clamp(120px, 38%, 160px);
      height: 35px;
      background: #000;
      border-radius: 18px;
      box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 18px rgba(0,0,0,.45);
    }

    /* Camera + sensors hint inside the island */
    .island::before, .island::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      opacity: .65;
    }
    .island::before { /* front camera */
      right: 14px;
      width: 8px; height: 8px;
      background: radial-gradient(circle at 30% 30%, #3aa0ff, #0c1a2a 60%, #000 100%);
    }
    .island::after { /* sensor */
      right: 30px;
      width: 6px; height: 6px;
      background: #0e1826;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }

    /* Side buttons (decorative) */
    .btn { position: absolute; width: 3px; background: #272727; border-radius: 2px; opacity: .9; }
    .btn.left.top    { left: -1px; top: 110px; height: 54px; }
    .btn.left.middle { left: -1px; top: 180px; height: 38px; }
    .btn.left.bottom { left: -1px; top: 228px; height: 72px; }
    .btn.right       { right: -1px; top: 160px; height: 92px; }

    /* Content drop zone */
    .app-content {
      position: relative;
      width: 88%;
      max-width: 340px;
      margin: auto;
      padding: 18px 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
      color: #f5f7ff;
      text-align: center;
    }

    .app-content h1 { margin: 6px 0 8px; font-size: 1.15rem; letter-spacing: .2px; }
    .app-content p  { margin: 0; font-size: .92rem; opacity: .85; }

    /* Small safe area hint */
    .home-indicator {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 34%;
      height: 5px;
      background: rgba(255,255,255,.7);
      border-radius: 999px;
      opacity: .85;
    }

    /* Helper: center note for empty state (remove later) */
    .placeholder {
      display: inline-block;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      font-size: .85rem;
      letter-spacing: .2px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }