<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
  <filter id="fs"><feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/></filter>
  <rect width="390" height="844" fill="#0A0A14"/>
  <!-- Status bar -->
  <text x="22" y="29" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="600" dominant-baseline="middle">9:41</text>
  <rect x="308" y="22" width="3" height="7" rx="1.2" fill="white"/><rect x="313" y="20" width="3" height="9" rx="1.2" fill="white"/><rect x="318" y="18" width="3" height="11" rx="1.2" fill="white"/><rect x="323" y="16" width="3" height="13" rx="1.2" fill="white"/>
  <rect x="350" y="19" width="22" height="11" rx="3" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/><rect x="373" y="22" width="2" height="5" rx="1" fill="rgba(255,255,255,0.4)"/><rect x="352" y="21" width="16" height="7" rx="1.5" fill="#60A5FA"/>
  <!-- Header -->
  <text x="22" y="68" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="26" font-weight="800" letter-spacing="-0.5">Sleep</text>
  <text x="22" y="88" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Wind down · Bedtime routine</text>
  <!-- Bedtime card -->
  <rect x="16" y="102" width="358" height="100" rx="20" fill="#141428" filter="url(#fs)"/>
  <text x="30" y="128" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="700">BEDTIME TIMER</text>
  <text x="30" y="164" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="38" font-weight="800">10:30 PM</text>
  <text x="30" y="188" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12">Wind down starts at 10:00 PM</text>
  <rect x="290" y="124" width="74" height="34" rx="17" fill="#60A5FA"/>
  <text x="327" y="145" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="700" text-anchor="middle" dominant-baseline="middle">Set Timer</text>
  <!-- Sleep stories -->
  <text x="22" y="228" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Sleep Stories</text>
  <rect x="16" y="240" width="170" height="120" rx="18" fill="#141428" filter="url(#fs)"/>
  <rect x="26" y="250" width="150" height="70" rx="12" fill="#1E1E3C"/>
  <text x="101" y="290" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="36" text-anchor="middle" dominant-baseline="middle">&#x1F30C;</text>
  <text x="26" y="336" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="600">Starlight Valley</text>
  <text x="26" y="352" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">22 min · Narrated</text>
  <rect x="204" y="240" width="170" height="120" rx="18" fill="#141428" filter="url(#fs)"/>
  <rect x="214" y="250" width="150" height="70" rx="12" fill="#1E1E3C"/>
  <text x="289" y="290" fill="#A78BFA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="36" text-anchor="middle" dominant-baseline="middle">&#x1F332;</text>
  <text x="214" y="336" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="600">Enchanted Forest</text>
  <text x="214" y="352" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">18 min · Narrated</text>
  <!-- Sounds -->
  <text x="22" y="386" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Sleep Sounds</text>
  <!-- Sound tiles 3 col -->
  <rect x="16" y="398" width="108" height="64" rx="16" fill="#141428"/>
  <text x="70" y="424" fill="#34D399" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" text-anchor="middle">&#x1F30A;</text>
  <text x="70" y="451" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="middle">Ocean</text>
  <rect x="141" y="398" width="108" height="64" rx="16" fill="#60A5FA" fill-opacity="0.15"/>
  <text x="195" y="424" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" text-anchor="middle">&#x1F327;</text>
  <text x="195" y="451" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="600" text-anchor="middle">Rain</text>
  <rect x="266" y="398" width="108" height="64" rx="16" fill="#141428"/>
  <text x="320" y="424" fill="#A78BFA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" text-anchor="middle">&#x1F343;</text>
  <text x="320" y="451" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="middle">Forest</text>
  <rect x="16" y="472" width="108" height="64" rx="16" fill="#141428"/>
  <text x="70" y="498" fill="#F9A8D4" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" text-anchor="middle">&#x1F525;</text>
  <text x="70" y="525" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="middle">Fire</text>
  <rect x="141" y="472" width="108" height="64" rx="16" fill="#141428"/>
  <text x="195" y="498" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" text-anchor="middle">&#x1FAC0;</text>
  <text x="195" y="525" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="middle">Wind</text>
  <rect x="266" y="472" width="108" height="64" rx="16" fill="#141428"/>
  <text x="320" y="498" fill="#34D399" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" text-anchor="middle">&#x1F3D4;</text>
  <text x="320" y="525" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="middle">Mountain</text>
  <!-- Sleep score -->
  <text x="22" y="560" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Last Night's Sleep</text>
  <rect x="16" y="572" width="358" height="72" rx="18" fill="#141428" filter="url(#fs)"/>
  <text x="30" y="598" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="700">SLEEP SCORE</text>
  <text x="30" y="628" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="32" font-weight="800">82</text>
  <text x="68" y="628" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="14">/100</text>
  <text x="120" y="596" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">Duration</text>
  <text x="120" y="616" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="14" font-weight="600">7h 22m</text>
  <text x="230" y="596" fill="#3A3A5C" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">Deep Sleep</text>
  <text x="230" y="616" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="14" font-weight="600">1h 48m</text>
  <!-- Tab bar: Sleep active -->
  <rect x="0" y="762" width="390" height="82" fill="#060610"/>
  <line x1="0" y1="762" x2="390" y2="762" stroke="#141428" stroke-width="0.5"/>
  <path d="M42 800 L51 790 L60 800 L60 810 L42 810 Z" fill="none" stroke="#2A2A4A" stroke-width="2" stroke-linejoin="round"/>
  <rect x="46" y="802" width="10" height="8" rx="1" fill="#2A2A4A"/>
  <text x="51" y="822" fill="#2A2A4A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Home</text>
  <text x="120" y="798" fill="#2A2A4A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" text-anchor="middle">&#x1F9D8;</text>
  <text x="120" y="822" fill="#2A2A4A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Meditate</text>
  <circle cx="195" cy="795" r="9" fill="none" stroke="#2A2A4A" stroke-width="2"/>
  <rect x="192" y="800" width="6" height="5" rx="1" fill="#2A2A4A"/>
  <text x="195" y="822" fill="#2A2A4A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Breathe</text>
  <text x="267" y="798" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" text-anchor="middle">&#x1F319;</text>
  <text x="267" y="822" fill="#60A5FA" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="600" text-anchor="middle">Sleep</text>
  <circle cx="341" cy="791" r="9" fill="none" stroke="#2A2A4A" stroke-width="2"/><circle cx="341" cy="788" r="3.5" fill="#2A2A4A"/>
  <path d="M333 799 Q341 795 349 799" fill="none" stroke="#2A2A4A" stroke-width="2" stroke-linecap="round"/>
  <text x="341" y="822" fill="#2A2A4A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Profile</text>
  <rect x="148" y="836" width="94" height="4" rx="2" fill="rgba(255,255,255,0.22)"/>
</svg>
