* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: #1a1522;
  font-family: var(--ui-font, Outfit, system-ui, sans-serif);
  color: #1c1420;
  overflow: hidden;
}
.boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: #000;
  color: #3a2a32;
  overflow: hidden;
}
.boot.is-clear {
  filter: blur(28px);
  opacity: 0;
  transition: opacity 1.8s ease, filter 1.8s ease;
}
.boot-lines {
  text-align: center;
  padding: 24px;
}
.boot-lines p {
  margin: 0.12em 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2rem, 6vw, 3.3rem);
  font-weight: 400;
  line-height: 1.15;
  color: #3a2a32;
  text-shadow: 0 0 22px rgba(244, 182, 200, 0.45);
}
.boot-lines p.is-dusting { visibility: hidden; }
.boot-lines .mg {
  display: inline-block;
  vertical-align: baseline;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  animation: bootIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.04s);
}
@keyframes bootIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.boot[data-back="blush"] {
  background: radial-gradient(ellipse 50% 40% at 50% 42%, rgba(255, 214, 170, 0.35), transparent 70%), linear-gradient(180deg, #f7efe8, #f3d5e4 55%, #e7eef8);
}
.boot[data-back="paper"] { background: #f3e6d4; }
.boot[data-back="dusk"] { background: linear-gradient(180deg, #2a2038, #f4b6c8 70%, #8fb4ea); }
.boot[data-back="night"] { background: radial-gradient(circle at 50% 30%, #243056, #070910 72%); }
.boot[data-back="night"] .boot-lines p { color: #f6e4ea; }
.boot[data-back="meadow"] { background: linear-gradient(180deg, #e7f0d4, #f7efe8 50%, #d7e4f4); }
.boot[data-back="ocean"] { background: linear-gradient(180deg, #d5e7f8, #8fb4ea 50%, #3a5a8c); }
.boot[data-back="rose"] { background: linear-gradient(180deg, #ffd6e8, #f4b6c8 45%, #c97a9a); }
.boot-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: 11px Outfit, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}
body.booting .studio,
body.booting .sig,
body.booting .desk-stickers,
body.booting .stage {
  opacity: 0;
  pointer-events: none;
}

.studio {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1c1724;
}
.studio-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 52% at 50% 48%, rgba(255, 214, 170, 0.32), transparent 70%),
    radial-gradient(90% 70% at 14% 16%, rgba(244, 182, 200, 0.28), transparent 58%),
    radial-gradient(80% 70% at 88% 84%, rgba(143, 180, 234, 0.24), transparent 55%),
    #1c1724;
  animation: wallBreathe 18s ease-in-out infinite;
  transition: background 1.4s ease, filter 1.2s ease;
}
.studio-table {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 160%;
  height: 46%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 55% 40% at 50% 18%, rgba(255, 214, 170, 0.16), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(42, 28, 26, 0.2) 22%, #2a1e1b 100%);
  box-shadow: inset 0 50px 80px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transition: background 1.4s ease, opacity 1s ease;
}
.studio-rain {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    188deg,
    transparent 0 14px,
    rgba(210, 224, 240, 0.07) 14px 15px
  );
  animation: rainFall 0.85s linear infinite;
  transition: opacity 0.8s ease;
}
.studio-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.studio-motes i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 236, 220, 0.7);
  box-shadow: 0 0 8px rgba(255, 220, 190, 0.55);
  animation: moteFloat linear infinite;
  opacity: 0.55;
}
@keyframes wallBreathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.12) brightness(1.06); }
}
@keyframes windowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 3%) scale(1.05); }
}
@keyframes rainFall {
  to { background-position: 0 28px; }
}
@keyframes moteFloat {
  0% { transform: translate(0, 8px) scale(0.6); opacity: 0; }
  15% { opacity: 0.6; }
  50% { transform: translate(var(--drift, 12px), -40px) scale(1); }
  100% { transform: translate(calc(var(--drift, 12px) * -1), -90px) scale(0.4); opacity: 0; }
}

body.desk-morning .studio-wall {
  background:
    radial-gradient(ellipse 60% 50% at 70% 8%, rgba(255, 232, 186, 0.55), transparent 62%),
    radial-gradient(80% 60% at 20% 80%, rgba(255, 196, 150, 0.22), transparent 55%),
    #d8c4b0;
}


body.desk-morning .studio-table {
  background:
    radial-gradient(ellipse 55% 40% at 50% 18%, rgba(255, 236, 200, 0.28), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(90, 60, 40, 0.18) 22%, #4a3428 100%);
}
body.desk-morning .studio-motes i { background: rgba(255, 248, 230, 0.85); }

body.desk-night .studio-wall {
  background:
    radial-gradient(ellipse 40% 30% at 80% 12%, rgba(80, 100, 160, 0.28), transparent 55%),
    radial-gradient(70% 50% at 20% 80%, rgba(40, 30, 70, 0.4), transparent 60%),
    #0d1018;
}

body.desk-night .studio-table {
  background: linear-gradient(180deg, transparent 0%, rgba(10, 12, 20, 0.45) 30%, #0a0c12 100%);
}
body.desk-night .studio-motes i {
  width: 2px;
  height: 2px;
  background: #e8eefc;
  box-shadow: 0 0 6px #c8d4ff;
  animation-name: starTwinkle;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

body.desk-meadow .studio-wall {
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(255, 236, 180, 0.35), transparent 60%),
    radial-gradient(80% 60% at 20% 90%, rgba(120, 160, 90, 0.28), transparent 55%),
    radial-gradient(70% 50% at 90% 70%, rgba(244, 182, 200, 0.18), transparent 50%),
    #2a3324;
}

body.desk-meadow .studio-table {
  background:
    radial-gradient(ellipse 55% 40% at 50% 18%, rgba(200, 220, 140, 0.18), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(40, 50, 28, 0.35) 24%, #24301c 100%);
}
body.desk-meadow .studio-motes i {
  width: 4px;
  height: 4px;
  background: #f4e28a;
  box-shadow: 0 0 10px rgba(244, 226, 120, 0.8);
}

body.desk-rain .studio-wall {
  background:
    radial-gradient(ellipse 50% 40% at 30% 0%, rgba(160, 180, 210, 0.22), transparent 55%),
    #1a1e26;
}

body.desk-rain .studio-table {
  background: linear-gradient(180deg, transparent 0%, rgba(20, 24, 30, 0.4) 25%, #161820 100%);
}
body.desk-rain .studio-rain { opacity: 0.45; }
body.desk-rain .studio-motes { opacity: 0.2; }
.sig {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  font-family: var(--script-font, "Great Vibes", cursive);
  font-size: var(--sig-size, 10rem);
  transform: translate(calc(-50% + var(--sig-x, 0px)), calc(-50% + var(--sig-y, 0px)));
  background: none;
  color: transparent;
  opacity: 0.72;
  white-space: nowrap;
  mix-blend-mode: screen;
  transition: opacity 0.9s ease, filter 0.9s ease;
}
.sig.sig-light {
  filter: drop-shadow(0 0 10px rgba(244, 182, 200, 0.55)) drop-shadow(0 0 28px rgba(143, 180, 234, 0.4));
}
body.lights-out .sig-light {
  opacity: 0.07;
  filter: blur(1.4px);
  mix-blend-mode: screen;
}
.sig span {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(18px);
  will-change: opacity, transform, filter;
}
body.sig-in .sig span {
  animation: sigLetter 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.4s + var(--i) * 0.055s);
}
.sig span.is-on {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
}
@keyframes sigLetter {
  0% { opacity: 0; filter: blur(14px); transform: translateY(18px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.sig.frame-none span,
.sig.frame-neon span {
  background: linear-gradient(180deg, #fff, #f4b6c8 45%, #8fb4ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sig.frame-paper span,
.sig.frame-polaroid span,
.sig.frame-plaque span,
.sig.frame-ribbon span {
  background: none;
  color: inherit;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 118px 12px 40px;
  perspective: 900px;
}
.rig {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.firefly {
  position: fixed;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #f6e27a;
  box-shadow: 0 0 10px 4px rgba(244, 220, 120, 0.7), 0 0 22px rgba(244, 200, 80, 0.35);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
body:not(.desk-meadow) .firefly { display: none; }
.fixture {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  pointer-events: none;
  z-index: 3;
}
.mount {
  width: 26px;
  height: 9px;
  background: #111114;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.stand {
  width: 5px;
  height: 52px;
  background: linear-gradient(#111114, #2e2e34);
  border-radius: 0 0 2px 2px;
}
.shade {
  width: 64px;
  height: 26px;
  background: linear-gradient(180deg, #2a241c, #12100e);
  border-radius: 10px 10px 3px 3px;
  position: relative;
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
}
.shade::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 9px;
  border-radius: 0 0 2px 2px;
  background: radial-gradient(ellipse at 50% 140%, #ffe6b0, #c9a06a 55%, transparent 72%);
}
.bulb {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff4d2;
  box-shadow: 0 0 16px 8px rgba(255, 220, 160, 0.75), 0 0 40px 14px rgba(255, 200, 120, 0.35);
}
.cone {
  position: fixed;
  left: 50%;
  top: 78px;
  width: min(680px, 90vw);
  height: min(560px, 70vh);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 230, 180, 0.34) 0%, rgba(255, 210, 150, 0.1) 40%, transparent 78%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  transition: opacity 0.7s ease, transform 0.75s ease, filter 0.7s ease;
}
.blackout {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #05040a;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.studio {
  transition: filter 0.85s ease, background 0.85s ease;
}
.bulb, .shade::after {
  transition: opacity 0.55s ease, box-shadow 0.6s ease, background 0.5s ease, transform 0.45s ease;
}
.sig, .phone-wrap::after {
  transition: opacity 0.8s ease;
}
body.lights-out .blackout { opacity: 0.78; }
body.lights-out .studio {
  background: #0c0b10;
  filter: brightness(0.32) saturate(0.5);
}

body.lights-out .cone {
  opacity: 0;
  transform: translateX(-50%) scale(0.35);
  filter: brightness(0);
}
body.lights-out .bulb {
  opacity: 0.25;
  background: #2a2418;
  box-shadow: none;
  transform: translateX(-50%) scale(0.6);
}
body.lights-out .shade::after {
  opacity: 0.1;
  background: #2a2a2a;
}
body.lights-out .sig { opacity: 0.18; }
body.lights-out .phone-wrap::after { opacity: 0.15; }
body.lights-out.music-app .phone-wrap::after {
  opacity: 0.42;
  background: rgba(var(--np-r, 200), var(--np-g, 140), var(--np-b, 160), 0.32);
}
body.lights-out.music-app .phone.lit:not(.asleep) {
  filter: brightness(1.04);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 3px rgba(0, 0, 0, 0.65),
    0 0 0 1px #1c1c22,
    0 0 22px rgba(var(--np-r, 200), var(--np-g, 140), var(--np-b, 160), 0.28);
}
@keyframes lampIgnite {
  0% { filter: brightness(0.25); }
  12% { filter: brightness(1.55); }
  28% { filter: brightness(0.55); }
  48% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}
@keyframes lampKill {
  0% { filter: brightness(1); }
  18% { filter: brightness(1.35); }
  100% { filter: brightness(0.32) saturate(0.5); }
}
body.lamp-ignite .studio { animation: lampIgnite 0.95s ease forwards; }
body.lamp-kill .studio { animation: lampKill 0.7s ease forwards; }
.pool {
  display: none;
}
.phone {
  width: min(390px, 86vw);
  height: min(760px, 86dvh);
  position: relative;
  background:
    linear-gradient(180deg, #3a3a42 0%, #1a1a1e 7%, #0e0e10 42%, #17171b 100%);
  border-radius: 50px;
  overflow: hidden;
  transform-origin: 50% 50%;
  box-shadow:
    0 30px 70px rgba(28, 16, 32, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 0 0 1px #2c2c34;
  transition: filter 0.9s ease, box-shadow 1.1s ease;
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    calc(108deg + var(--spec, 0) * 1deg),
    transparent 40%,
    rgba(255, 255, 255, 0.16) 49.5%,
    transparent 59%
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 2;
}
.glass {
  position: absolute;
  inset: 8px 7px 9px;
  border-radius: 42px;
  overflow: hidden;
  background: #050508;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  z-index: 3;
}
.wake-veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #050508;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.phone.lit .wake-veil {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 1.2s;
}
.phone.lit {
  box-shadow:
    0 30px 70px rgba(28, 16, 32, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 0 0 1px #2c2c34,
    0 0 42px rgba(255, 214, 170, 0.16);
}
.phone.asleep { filter: brightness(0.58) saturate(0.88); }
body.lights-out .phone.asleep { filter: brightness(0.3) saturate(0.7); }
body.lights-out .phone.lit:not(.asleep) {
  filter: brightness(1.06);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 3px rgba(0, 0, 0, 0.65),
    0 0 0 1px #1c1c22,
    0 0 48px rgba(255, 210, 160, 0.22);
}
.screen-wp {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/wallpaper.jpg") center/cover;
  pointer-events: none;
}
.screen-wp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 32%, transparent 58%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}
.screen-wp.wp-aurora {
  background: linear-gradient(165deg, #f4b6c8 0%, #c9b8e8 45%, #8fb4ea 100%);
}
.screen-wp.wp-fairy {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.5), transparent 26%),
    radial-gradient(circle at 82% 68%, rgba(255,230,160,.4), transparent 30%),
    linear-gradient(180deg, #e8b4d4, #9bb6ea);
}
.screen-wp.wp-night {
  background:
    radial-gradient(circle at 70% 18%, rgba(120,140,200,.35), transparent 32%),
    linear-gradient(180deg, #1a1430, #0a0c18 58%, #12101c);
}
.screen-wp.wp-rose {
  background: linear-gradient(180deg, #ffd6e8, #f4b6c8 42%, #c97a9a);
}
.screen-wp.wp-ocean {
  background: linear-gradient(180deg, #b8d4f0, #8fb4ea 48%, #3a5a8c);
}
.notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  width: 126px;
  height: 37px;
  background: #010101;
  border-radius: 999px;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  will-change: width, height, border-radius;
  transition:
    width 0.62s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.62s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.55s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.notch.is-catching {
  transition: none;
}
.notch.is-catching::before,
.notch.is-catching::after {
  opacity: 0;
}
@keyframes islandJelly {
  0% { transform: translateX(-50%) scale(1, 1); }
  28% { transform: translateX(-50%) scale(1.045, 0.9); }
  58% { transform: translateX(-50%) scale(0.985, 1.035); }
  100% { transform: translateX(-50%) scale(1, 1); }
}
.notch::before,
.notch::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.28s ease;
}
.notch::before {
  left: 18px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 34% 30%, #3d5a86, #09090c 64%);
  box-shadow: inset 0 0 0 1.4px #050506;
}
.notch::after {
  right: 20px;
  width: 7px;
  height: 7px;
  background: #121216;
  box-shadow: inset 0 0 0 1px #050506;
}
.phone.is-playing .notch::before,
.phone.is-playing .notch::after,
.phone.is-mini .notch::before,
.phone.is-mini .notch::after {
  opacity: 0;
  transform: translateY(-50%) scale(0.35);
}
.phone.is-playing .notch {
  width: 210px;
  height: 37px;
  border-radius: 999px;
  pointer-events: auto;
}
.phone.is-mini .notch {
  top: 11px;
  width: min(358px, 91.5%);
  height: 80px;
  border-radius: 28px;
  pointer-events: auto;
}
.faceid {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.notch.is-scanning .faceid,
.notch.is-unlock .faceid {
  opacity: 1;
}
.faceid i {
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1.6px solid transparent;
  border-top-color: #30d158;
  border-right-color: rgba(48, 209, 88, 0.4);
  animation: faceSpin 0.75s linear infinite;
}
.notch.is-scanning {
  box-shadow: 0 0 0 1px rgba(48, 209, 88, 0.45), 0 0 16px rgba(48, 209, 88, 0.28);
}
.notch.is-scanning::before {
  box-shadow: inset 0 0 0 1.4px #050506, 0 0 8px rgba(80, 220, 160, 0.85);
}
.notch.is-unlock .faceid i {
  animation: none;
  inset: 0;
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(48, 209, 88, 0.55), transparent 70%);
}
.notch.is-unlock {
  box-shadow: 0 0 0 1.5px #30d158, 0 0 22px rgba(48, 209, 88, 0.5);
}
.notch.is-fail {
  animation: islandShake 0.42s ease;
}
@keyframes faceSpin {
  to { transform: rotate(360deg); }
}
@keyframes islandShake {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 5px)); }
  50% { transform: translateX(calc(-50% + 4px)); }
  75% { transform: translateX(calc(-50% - 2px)); }
}
.island {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 5px 0 5px;
  cursor: pointer;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
  transition: opacity 0.22s ease 0.16s, transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) 0.08s;
}
.phone.is-playing:not(.is-mini) .island {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.phone.is-mini .island {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition-delay: 0s;
}
.spot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: #1db954 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.9 10.6c-3.1-1.85-8.2-2.02-11.16-.62a.75.75 0 11-.66-1.35c3.4-1.62 9.05-1.42 12.6.7a.75.75 0 11-.78 1.27zm-.2 2.8a.7.7 0 01-.96.23c-2.6-1.6-6.56-2.06-9.63-1.13a.7.7 0 11-.4-1.34c3.5-1.06 7.88-.55 10.86 1.28.33.2.43.63.23.96zm-1.1 2.7a.56.56 0 01-.77.18c-2.26-1.38-5.1-1.7-8.45-.93a.56.56 0 11-.25-1.1c3.66-.84 6.8-.48 9.3 1.04.26.16.35.5.18.8z'/%3E%3C/svg%3E") center/72% no-repeat;
}
.spot-lg {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
.island .cover {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 8px;
}
.island-copy {
  display: none;
}
.island-eq {
  display: flex;
  gap: 2px;
  height: 13px;
  align-items: flex-end;
  margin-right: 4px;
}
.island-eq i {
  display: block;
  width: 2px;
  background: #fff;
  border-radius: 2px;
  animation: eq 0.7s ease-in-out infinite;
}
.island-eq i:nth-child(1) { height: 5px; animation-delay: 0s; }
.island-eq i:nth-child(2) { height: 11px; animation-delay: 0.12s; }
.island-eq i:nth-child(3) { height: 7px; animation-delay: 0.24s; }
@keyframes eq {
  50% { transform: scaleY(0.35); }
}
.mini {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  padding: 14px 16px;
  color: #fff;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transform-origin: 50% 0;
  transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.phone.is-mini .mini {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0.12s, 0.08s;
}
.cover {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  object-fit: cover;
  background: #222;
}
.cover-lg, .mini-art .cover {
  width: 88px;
  height: 88px;
  border-radius: 16px;
}
.cover-xl {
  width: 220px;
  height: 220px;
  border-radius: 18px;
}
.cover-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.52s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.mini-art, .mini-art.big, .spot-bg {
  overflow: hidden;
}
.notch .mini-art {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 14px;
  overflow: hidden;
  background: #121212;
  display: grid;
  place-items: center;
}
.notch .mini-art .cover,
.notch .mini-art .cover-lg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
.mini-art.big {
  width: 230px;
  height: 230px;
  margin: 10px auto 16px;
  border-radius: 18px;
  transform: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #121212;
}
.spotify .mini-art.big {
  width: min(240px, 72%);
  aspect-ratio: 1;
  height: auto;
  transform: none !important;
}
.mini-art.big .cover,
.spotify .mini-art.big .cover {
  width: 100%;
  height: 100%;
  flex: none;
  border-radius: 18px;
}
.notch .mini-meta {
  flex: 1;
  min-width: 0;
}
.notch .mini-meta b, .notch .mini-meta small { display: block; }
.notch .mini-meta b {
  font-size: 0.78rem;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notch .mini-meta small {
  font-size: 0.64rem;
  opacity: 0.65;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-bar {
  width: 100%;
  height: 3px;
  background: #333;
  border-radius: 99px;
  overflow: hidden;
  margin: 8px 0;
}
.mini-bar i {
  display: block;
  height: 100%;
  width: 18%;
  background: #1db954;
  animation: scrub 28s linear infinite;
}
@keyframes scrub {
  to { width: 92%; }
}
.mini-controls { display: flex; gap: 18px; align-items: center; }
.notch .mini-controls {
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}
.mini-controls button {
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
.notch .mini-controls button {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}
.yt-audio {
  position: absolute;
  left: -420px;
  top: 40px;
  width: 360px;
  height: 200px;
  opacity: 0.02;
  pointer-events: none;
  border: 0;
}
.bar {
  position: absolute;
  top: 21px;
  left: 26px;
  right: 22px;
  z-index: 28;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.phone.is-mini .bar { opacity: 0; }
.banner {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 126px;
  max-height: 37px;
  z-index: 29;
  padding: 9px 14px;
  background: rgba(22, 20, 26, 0.78);
  color: #fff;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border-radius: 20px;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(0.42);
  transform-origin: 50% 0;
  filter: blur(8px);
  transition:
    top 0.62s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.62s cubic-bezier(0.32, 0.72, 0, 1),
    max-height 0.62s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.32s ease,
    transform 0.62s cubic-bezier(0.32, 0.72, 0, 1),
    filter 0.4s ease,
    border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.banner.show {
  top: 58px;
  width: min(332px, calc(100% - 28px));
  max-height: 96px;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  filter: none;
  border-radius: 18px;
}
.cc {
  position: absolute;
  inset: 0;
  z-index: 18;
  padding: 54px 16px 24px;
  background: rgba(18, 16, 24, 0.38);
  color: #fff;
  transform: translateY(-105%);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
}
.cc.open { transform: none; }
.cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-stack { display: grid; gap: 10px; }
.cc-btn {
  border: 0;
  border-radius: 22px;
  padding: 16px 14px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cc.open .cc-btn, .cc.open .cc-now, .cc.open .cc-slide {
  animation: tileIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cc.open .cc-stack:nth-child(2) .cc-btn:nth-child(1) { animation-delay: 0.04s; }
.cc.open .cc-stack:nth-child(2) .cc-btn:nth-child(2) { animation-delay: 0.08s; }
@keyframes tileIn {
  from { transform: scale(0.82) translateY(-8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.cc-btn.on { background: #0a84ff; }
.cc-btn.wide { width: 100%; margin-top: 10px; }
.cc-slide {
  width: 100%;
  margin: 12px 0;
  accent-color: #fff;
}
.cc-now {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 10px 12px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.cc-now span { display: grid; }
.cc-now small { opacity: 0.7; }
.live {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 18px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(12, 12, 16, 0.72);
  backdrop-filter: blur(16px);
  text-align: left;
  color: #fff;
}
.live b, .live small, .live span { display: block; }
.live small { font-size: 0.62rem; opacity: 0.7; letter-spacing: 0.04em; }
.live b { font-size: 0.82rem; }
.live span { font-size: 0.7rem; opacity: 0.75; }
.live .cover { width: 36px; height: 36px; border-radius: 8px; }

.scr {
  position: absolute;
  inset: 0;
  display: none;
  padding: 52px 18px 28px;
}
.scr.is-on { display: block; }
.scr.app-layer {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
  border-radius: 18px;
  background: #f4eef2;
  transform: scale(0.18);
  transform-origin: var(--ox, 50%) var(--oy, 78%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0s linear 0.35s, border-radius 0.35s ease;
}
.scr.app-layer.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-radius: 0;
  transform: scale(1);
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0s, border-radius 0.4s ease;
}
.scr.app-layer.safari,
.scr.app-layer.wa {
  display: flex;
  flex-direction: column;
}
#home.scr.is-on {
  display: block;
  z-index: 1;
  background: transparent;
  filter: none;
  transition: filter 0.45s ease, opacity 0.45s ease;
}
.phone.app-open #home.scr.is-on {
  filter: brightness(0.78);
}
.lock-ui { position: relative; z-index: 2; text-align: center; color: #fff; padding-top: 88px; height: 100%; }
.wp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lock-time { font-size: 5rem; font-weight: 600; letter-spacing: -0.06em; }
.lock-date { opacity: 0.88; font-size: 1.05rem; }
.herclock { margin: 10px 0 0; font-size: 0.88rem; opacity: 0.85; }
.hint { font-size: 0.78rem; opacity: 0.7; max-width: 26ch; margin: 0 auto 10px; line-height: 1.4; }
.hint.dark { color: #555; }
#unlock {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#pw {
  width: min(240px, 100%);
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #fff;
  text-align: center;
  font: 500 17px/1.2 var(--ui-font, Outfit, sans-serif);
}
#pw::placeholder { color: rgba(255,255,255,.55); }
#adminPw, #cIn {
  border: 0; border-radius: 12px; padding: 10px 12px; width: 160px;
}
#unlock button {
  border: 0;
  background: rgba(255,255,255,.28);
  color: #fff;
  border-radius: 999px;
  padding: 10px 32px;
  font: 600 16px var(--ui-font, Outfit, sans-serif);
  letter-spacing: 0.04em;
  cursor: pointer;
}
#adminForm button, .play {
  border: 0; border-radius: 12px; padding: 10px 14px; background: #f4b6c8; color: #1c1420; cursor: pointer;
}
.err { color: #ffb4c4; font-size: 0.8rem; }
#home {
  background: transparent;
  padding: 0;
}
.ios-home {
  height: 100%;
  padding: 82px 16px 96px;
  transition: padding-top 0.62s cubic-bezier(0.32, 0.72, 0, 1);
}
.phone.is-mini .ios-home { padding-top: 136px; }
.phone.is-mini .lock-ui { padding-top: 128px; }
.wgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.iwid {
  background: rgba(255,255,255,.78);
  border-radius: 22px;
  padding: 12px;
  backdrop-filter: blur(16px);
  touch-action: none;
  transform-origin: 50% 50%;
}
.iwid[data-span="2"] { grid-column: span 2; }
.iwid small { display: block; font-size: 0.68rem; opacity: 0.7; }
.iwid b { display: block; font-size: 1.45rem; }
.iwid span { font-size: 0.75rem; opacity: 0.7; }
.bday-wid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 86px;
  background: linear-gradient(135deg, rgba(244, 182, 200, 0.88), rgba(143, 180, 234, 0.82));
  color: #1c1420;
}
.bday-wid b { font-size: 1.35rem; }
.ios-home.is-edit .iwid {
  animation: widgetJiggle 0.22s ease-in-out infinite;
}
.ios-home.is-edit .iwid:nth-child(2n) { animation-delay: -0.06s; }
.ios-home.is-edit .iwid:nth-child(3n) { animation-delay: -0.11s; }
.ios-home.is-edit .iwid.iwid-slot {
  animation: none;
  opacity: 0.38;
}
.iwid-float {
  animation: none !important;
  pointer-events: none;
  z-index: 80;
  margin: 0;
  box-shadow: 0 18px 40px rgba(20, 10, 24, 0.32);
  transform: scale(1.07);
}
@keyframes widgetJiggle {
  0% { rotate: -1.15deg; }
  50% { rotate: 1.15deg; }
  100% { rotate: -1.15deg; }
}
.heart-wid {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.heart-wid b { font-size: 2rem; }
.miss-bar {
  display: block;
  height: 8px;
  margin-top: 12px;
  background: rgba(0,0,0,.12);
  border-radius: 99px;
  overflow: hidden;
}
.miss-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #f4b6c8, #8fb4ea);
  border-radius: 99px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
}
.app {
  background: none; border: 0; color: #fff; font-size: 0.62rem;
  display: grid; justify-items: center; gap: 6px; cursor: pointer;
}
.app .i {
  transition: transform 0.14s cubic-bezier(0.2, 0.85, 0.25, 1.35);
}
.app:active .i { transform: scale(0.84); }
.i {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; font-style: normal; font-size: 1.35rem;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}
.dock {
  position: absolute; bottom: 28px; left: 18px; right: 18px;
  background: rgba(255,255,255,.2);
  border-radius: 22px; display: flex; justify-content: space-around; padding: 10px;
  backdrop-filter: blur(14px);
}
.dock .app span { display: none; }
.home-ind {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 5px; border: 0; border-radius: 4px; background: #fff; z-index: 16;
  cursor: pointer;
}

.i-wa {
  background: #25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12.04 2C6.58 2 2.15 6.43 2.15 11.89c0 1.76.46 3.48 1.34 5L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22h.01c5.46 0 9.89-4.43 9.89-9.89C21.94 6.43 17.5 2 12.04 2zm5.76 14.04c-.24.68-1.4 1.25-1.94 1.33-.5.07-1.13.1-1.83-.12-.42-.13-.97-.32-1.67-.62-2.94-1.27-4.86-4.23-5.01-4.43-.15-.2-1.2-1.6-1.2-3.05s.76-2.16 1.03-2.46c.24-.27.64-.4 1.02-.4.12 0 .23 0 .33.01.29.01.43.03.62.48.24.55.81 2 .88 2.14.07.15.12.32.02.51-.1.2-.15.32-.3.5-.14.16-.3.36-.43.49-.15.15-.3.31-.13.6.17.3.77 1.27 1.65 2.06 1.14 1.02 2.1 1.34 2.4 1.49.3.15.47.12.65-.07.17-.2.75-.87.95-1.17.2-.3.4-.25.67-.15.27.1 1.71.81 2.01.95.3.15.5.22.57.33.08.12.08.68-.16 1.36z'/%3E%3C/svg%3E") center/62% no-repeat;
}
.i-wa::after { content: none; }
.i-notes { background: #ffd60a; }
.i-notes::after { content: "📝"; }
.i-ph { background: #ff2d55; }
.i-ph::after { content: "🖼️"; }
.i-map {
  background:
    radial-gradient(circle at 30% 70%, #64d2ff 0 18%, transparent 19%),
    radial-gradient(circle at 70% 40%, #30d158 0 22%, transparent 23%),
    linear-gradient(135deg, #fff 40%, #e8e8ed 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}
.i-map::after {
  content: "";
  width: 70%;
  height: 70%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff3b30' d='M12 2c-3.3 0-6 2.6-6 6.1C6 12.4 12 22 12 22s6-9.6 6-13.9C18 4.6 15.3 2 12 2zm0 8.3A2.3 2.3 0 1 1 12 5.7a2.3 2.3 0 0 1 0 4.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.i-mu {
  background: #1db954 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.9 10.6c-3.1-1.85-8.2-2.02-11.16-.62a.75.75 0 11-.66-1.35c3.4-1.62 9.05-1.42 12.6.7a.75.75 0 11-.78 1.27zm-.2 2.8a.7.7 0 01-.96.23c-2.6-1.6-6.56-2.06-9.63-1.13a.7.7 0 11-.4-1.34c3.5-1.06 7.88-.55 10.86 1.28.33.2.43.63.23.96zm-1.1 2.7a.56.56 0 01-.77.18c-2.26-1.38-5.1-1.7-8.45-.93a.56.56 0 11-.25-1.1c3.66-.84 6.8-.48 9.3 1.04.26.16.35.5.18.8z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.i-mu::after { content: none; }
.i-dusk { background: linear-gradient(180deg, #f4b6c8, #8fb4ea); }
.i-dusk::after { content: "🌙"; }
.i-mail {
  background: linear-gradient(#6ec8ff, #1a7ffb);
}
.i-mail::after {
  content: "";
  width: 62%;
  height: 46%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' rx='2' fill='%23fff'/%3E%3Cpath d='M0 2l12 8 12-8' fill='none' stroke='%231a7ffb' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.i-calc { background: #8e8e93; }
.i-calc::after { content: "12"; font-size: 0.9rem; color: #fff; }
.i-set {
  background: linear-gradient(#c8c7cc, #8e8e93);
}
.i-set::after {
  content: "";
  width: 58%;
  height: 58%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.4 13c.04-.3.06-.6.06-1s-.02-.7-.06-1l2.1-1.6a.5.5 0 00.12-.64l-2-3.46a.5.5 0 00-.6-.22l-2.49 1a7.2 7.2 0 00-1.7-1L14.5 2.5a.5.5 0 00-.5-.5h-4a.5.5 0 00-.5.5L9.1 4.08a7.2 7.2 0 00-1.7 1l-2.49-1a.5.5 0 00-.6.22l-2 3.46a.5.5 0 00.12.64L4.6 11c-.04.3-.06.6-.06 1s.02.7.06 1l-2.1 1.6a.5.5 0 00-.12.64l2 3.46a.5.5 0 00.6.22l2.49-1a7.2 7.2 0 001.7 1l.38 1.58a.5.5 0 00.5.5h4a.5.5 0 00.5-.5l.38-1.58a7.2 7.2 0 001.7-1l2.49 1a.5.5 0 00.6-.22l2-3.46a.5.5 0 00-.12-.64L19.4 13zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.i-web {
  background: radial-gradient(circle at 50% 50%, #5ac8fa 0 28%, #0a84ff 29% 100%);
}
.i-web::after {
  content: "";
  width: 70%;
  height: 70%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath fill='%23ff3b30' d='M12 5l2.1 5.2L20 12l-5.9 1.8L12 19l-2.1-5.2L4 12l5.9-1.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.safari { background: #f2f2f7; color: #111; padding: 0; display: flex; flex-direction: column; }
.sf-head {
  display: flex; align-items: center; gap: 8px;
  padding: 48px 12px 10px;
  background: #fff;
}
.sf-url {
  flex: 1; background: #e8e8ed; border-radius: 12px;
  padding: 8px 12px; font-size: 0.82rem; color: #444; text-align: center;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), background 0.35s ease, box-shadow 0.35s ease, letter-spacing 0.35s ease;
}
.sf-url.is-morphing {
  transform: scale(1.03, 1.18);
  background: #fff;
  box-shadow: 0 10px 28px rgba(28, 16, 32, 0.14);
  letter-spacing: 0.02em;
  color: #111;
}
.sf-start { padding: 22px 18px; }
.sf-k { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #888; }
.fav {
  width: 100%; text-align: left; border: 0; cursor: pointer;
  background: #fff; border-radius: 22px; padding: 16px;
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.fav-ic {
  grid-row: span 2; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: linear-gradient(160deg, #f4b6c8, #8fb4ea);
}
.fav b { font-size: 1rem; }
.fav small { color: #777; }
.sf-hint { color: #888; font-size: 0.82rem; margin-top: 14px; }

.wa { background: #000; color: #eee; padding: 0; display: flex; flex-direction: column; }
.wa-head {
  background: #000; color: #fff; display: flex; align-items: center; gap: 8px;
  padding: 48px 10px 10px; margin: 0;
  border-bottom: 1px solid #1a1a1a;
}
.wa-head .back { color: #fff; }
.ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: #1c1c1e; color: #25d366; display: grid; place-items: center; font-weight: 700;
}
.wa-who { text-align: left; flex: 1; }
.wa-who b { display: block; font-size: 0.95rem; }
.wa-who small { opacity: 0.8; font-size: 0.7rem; }
.wa .thread { flex: 1; background: #000; padding: 12px 10px; overflow-y: auto; }
.wa .bubble.them { background: #1c1c1e; color: #fff; }
.wa .bubble.me { background: #005c4b; color: #fff; }
.ticks { font-size: 0.65rem; color: #53bdeb; }
.wa-bar {
  background: #000; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 18px; border-top: 1px solid #1a1a1a;
}
.wa-in { flex: 1; background: #1c1c1e; border-radius: 20px; padding: 8px 12px; font-size: 0.82rem; color: #888; }
.thread { display: flex; flex-direction: column; gap: 8px; }
.bubble {
  max-width: 78%; padding: 10px 12px; border-radius: 16px; font-size: 0.92rem; line-height: 1.35;
}
.bubble.them { align-self: flex-start; border-radius: 16px 16px 16px 4px; }
.bubble.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; }
.bubble.tap { outline: 1px dashed #2a2a2a; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #35c759; display: inline-block; }

.app-scr { background: #f4eef2; color: #1c1420; padding-top: 48px; overflow-y: auto; }
.app-scr header { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.back { border: 0; background: none; font-size: 1.4rem; cursor: pointer; }
.row {
  width: 100%; text-align: left; border: 0; background: #fff; padding: 14px; border-radius: 12px;
  margin-bottom: 8px; cursor: pointer;
}
.row.hot { background: #fde4ee; }
.sheet { position: absolute; inset: 0; background: #fff; padding: 48px 18px; overflow: auto; }
.album { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pola { background: #f6efe4; padding: 8px 8px 14px; margin: 0; }
.pola img { width: 100%; height: 110px; object-fit: cover; filter: contrast(0) brightness(1.8); transition: filter 1.4s ease; }
.pola.dev img { filter: none; }
figcaption { font-size: 0.7rem; color: #666; margin-top: 4px; }
.map {
  height: 280px; border-radius: 16px;
  background:
    radial-gradient(circle at 30% 40%, #f8c, transparent 40%),
    radial-gradient(circle at 70% 60%, #9be, transparent 40%),
    #dce3f0;
  position: relative;
}
.pin { position: absolute; background: #1c1420; color: #fff; padding: 4px 8px; border-radius: 8px; font-size: 0.75rem; }
.p1 { left: 18%; top: 30%; }
.p2 { right: 16%; bottom: 28%; }
.line {
  position: absolute; left: 28%; top: 38%; width: 46%; height: 2px;
  background: repeating-linear-gradient(90deg, #1c1420 0 6px, transparent 6px 12px);
  transform: rotate(18deg);
}
.cap { text-align: center; color: #555; }
.player { text-align: center; padding-top: 12px; }
.yt-wrap { width: 100%; aspect-ratio: 16/9; background: #111; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.yt-wrap iframe { width: 100%; height: 100%; border: 0; }
.play { border-radius: 999px; padding: 10px 22px; background: #1db954; color: #fff; margin-top: 8px; min-width: 72px; }
.music-controls { color: #fff; justify-content: center; margin-top: 8px; }
.music-controls button { color: #fff; }
.music-bar { max-width: 220px; margin: 14px auto 0; background: rgba(255,255,255,.2); }
.music-bar i { background: #1db954; }
.spotify { background: #121212; color: #fff; overflow: hidden; }
.spotify header { color: #fff; position: relative; z-index: 1; }
.spotify .back { color: #fff; }
.spot-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.spot-bg img {
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(48px) saturate(1.5);
  transform: translate(-15%, -15%) scale(1.15);
  opacity: 0.85;
}
.spotify .player, .spotify .lib-label, .spotify .lib { position: relative; z-index: 1; }
.lib-label {
  margin: 8px 4px 6px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.lib { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; }
.lib-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  border: 0;
  background: rgba(0,0,0,.18);
  color: #fff;
  text-align: left;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.lib-row.on { background: rgba(29,185,84,.22); }
.lib-row img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.lib-row b, .lib-row small { display: block; }
.lib-row small { opacity: 0.7; font-size: 0.75rem; }
.env { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; }
.env img { width: 100%; border-radius: 14px; display: block; }
.letter {
  margin-top: 12px;
  background: url("assets/parchment.jpg") center/cover;
  color: #3a2418; padding: 18px;
  font-family: "IM Fell English", serif; line-height: 1.5;
}
.dusk-scr { background: #1a1430 url("assets/melody-meadow.jpg") center/cover; color: #fff; }
.dusk-scr header, .dusk-scr .story, .dusk-scr p { color: #fff; }
.pix { position: absolute; right: 10px; bottom: 40px; width: 70px; pointer-events: none; }
.flies { position: relative; height: 220px; }
.fly {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #fff6c8; border: 0; box-shadow: 0 0 10px #fff6c8; cursor: pointer;
}
.parch { background: url("assets/parchment.jpg") center/cover; }
.ios-label { font-size: 0.72rem; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.08em; margin: 16px 4px 6px; }
.ios-group { background: #fff; border-radius: 12px; overflow: hidden; }
.ios-row {
  width: 100%; display: flex; justify-content: space-between; padding: 14px;
  border: 0; background: #fff; border-bottom: 1px solid #eee; text-align: left; font-size: 0.95rem; cursor: pointer;
}
.ios-row span { color: #8e8e93; }
.ios-row.hot { color: #007aff; }
#cIn { width: 100%; padding: 12px; font-size: 1.4rem; }
#phone.flash { filter: brightness(1.8); }

.admin-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}
.admin-tabs button {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 8px;
  background: #eee;
  cursor: pointer;
}
.admin-tabs button.on { background: #f4b6c8; }
.ed-pane { max-height: 42dvh; overflow: auto; padding-bottom: 8px; }
.ed-field { margin: 0 0 10px; }
.ed-field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8e8e93;
  margin-bottom: 4px;
}
.ed-field input, .ed-field textarea, .ed-field select {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
}
.ed-field input[type="range"] { padding: 0; accent-color: #f4b6c8; }
.ed-field textarea { min-height: 88px; resize: vertical; }
.save-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: #1c1420;
  color: #fff;
  cursor: pointer;
  margin-top: 8px;
}
.admin-msg { font-size: 0.8rem; color: #4a7; min-height: 1.2em; }

.np-wash {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: var(--np-glow, #f4b6c8);
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 58% at 50% 42%, #000 0%, transparent 72%);
  transition: opacity 1.6s ease, background-color 2.2s ease;
}
body.np-on .np-wash { opacity: 0.88; }
body.np-skip .np-wash { transition: background-color 0.9s ease, opacity 0.6s ease; }
body.lights-out.np-on .np-wash { opacity: 0.38; }

.portal {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
.portal.is-open { pointer-events: auto; }
.portal[hidden] { display: none !important; }
.portal-ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #010101;
  pointer-events: none;
}
.portal iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7efe8;
}
.portal-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  border: 1.5px solid rgba(255, 244, 236, 0.78);
  box-shadow:
    0 0 0 1px rgba(244, 182, 200, 0.3),
    0 10px 40px rgba(28, 16, 32, 0.18),
    inset 0 0 20px rgba(255, 255, 255, 0.14);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.portal.is-absorbing .portal-lens {
  border-color: rgba(8, 8, 10, 0.95);
  box-shadow: 0 0 0 1px #010101, 0 4px 18px rgba(0, 0, 0, 0.35);
}
body.meadow-open .phone-wrap { animation: none; }
.portal-back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(28, 20, 32, 0.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(12px);
  font-family: Outfit, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}


.phone-wrap {
  position: relative;
  z-index: 6;
  --rx: 0deg;
  --ry: 0deg;
  animation: idleFloat 8s ease-in-out infinite;
  transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry));
}
@keyframes idleFloat {
  50% { transform: translateY(-5px) rotateX(var(--rx)) rotateY(var(--ry)); }
}
.phone-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 52px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 18px 1px rgba(var(--np-r, 200), var(--np-g, 140), var(--np-b, 160), 0.32),
    0 0 42px 8px rgba(var(--np-r, 200), var(--np-g, 140), var(--np-b, 160), 0.14);
  transition: opacity 0.75s ease, box-shadow 1.2s ease;
}
body.lights-out.music-app .phone-wrap::before { opacity: 1; }
body.lights-out.music-app .phone-wrap:has(.phone.asleep)::before { opacity: 0.22; }
.phone-wrap::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -22px;
  height: 36px;
  background: rgba(255, 210, 150, 0.18);
  filter: blur(18px);
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
}
.phone.mat-titanium {
  background: linear-gradient(180deg, #3a3a42 0%, #1a1a1e 7%, #0e0e10 42%, #17171b 100%);
}
.phone.mat-gloss {
  background: linear-gradient(180deg, #4a4a52 0%, #1c1c20 10%, #0a0a0c 100%);
}
.phone.mat-ceramic {
  background: linear-gradient(180deg, #3a342e 0%, #1c1916 12%, #12100e 100%);
}
.recess {
  position: absolute;
  inset: 6px 5px 7px;
  border-radius: 44px;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.hw-btn {
  position: absolute;
  width: 5px;
  border: 0;
  padding: 0;
  background: linear-gradient(#c5c8ce, #6a6e76);
  border-radius: 2px;
  z-index: 12;
  pointer-events: auto;
}
.b-up { left: -5px; top: 22%; height: 28px; }
.b-down { left: -5px; top: 30%; height: 42px; }
.b-power { right: -6px; top: 26%; height: 52px; cursor: pointer; }
.b-power:active { transform: translateX(1px); }
.seek-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 8px 0 4px;
}
.seek-row input { width: 100%; accent-color: #1db954; }
.seek-row span { font-size: 0.65rem; opacity: 0.75; min-width: 34px; }
.voh { position: relative; height: calc(100% - 8px); display: flex; flex-direction: column; gap: 10px; }
.voh-map {
  flex: 1;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #02040a;
}
#vohGlobe {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  transition: opacity 0.85s ease;
}
.voh-map.is-heart #vohGlobe {
  opacity: 0;
  pointer-events: none;
}
.voh-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transform: scale(1.04);
  transform-origin: center;
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.voh-map.is-heart iframe { opacity: 1; transform: scale(1); }
.voh-map.is-settled iframe { transform: scale(1); }
.voh-pin {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 18px;
  height: 18px;
  margin: -18px 0 0 -9px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff3b30' d='M12 2c-3.3 0-6 2.6-6 6.1C6 12.4 12 22 12 22s6-9.6 6-13.9C18 4.6 15.3 2 12 2zm0 8.3A2.3 2.3 0 1 1 12 5.7a2.3 2.3 0 0 1 0 4.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.voh-map.is-settled .voh-pin { opacity: 1; transform: translateY(0); }
.voh-card {
  background: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.voh-card small { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.62rem; color: #888; }
.voh-card b { display: block; font-size: 1.15rem; margin: 4px 0; }
.voh-card p { margin: 4px 0; font-size: 0.82rem; }
.voh-note { color: #666; }
.eq {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 2rem;
  font-weight: 600;
}
.eq span, .eq strong {
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px;
}
.eq strong { color: #ff3b5c; }
.eq-sub { text-align: center; color: #888; margin-top: 16px; }
.sig.frame-paper {
  padding: 0.12em 0.35em;
  background: #f6efe4;
  color: #3a2418;
  -webkit-background-clip: unset;
  background-clip: unset;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transform: translate(calc(-50% + var(--sig-x, 0px)), calc(-50% + var(--sig-y, 0px))) rotate(-4deg);
}
.sig.frame-neon {
  -webkit-text-stroke: 1px rgba(244,182,200,.8);
  filter: drop-shadow(0 0 12px #f4b6c8) drop-shadow(0 0 28px #8fb4ea);
}
.sig.frame-polaroid {
  padding: 0.2em 0.3em 0.5em;
  background: #fff;
  color: #1c1420;
  -webkit-background-clip: unset;
  background-clip: unset;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.sig.frame-plaque {
  padding: 0.1em 0.4em;
  background: linear-gradient(#f3e0a6, #c9a24a);
  color: #3a2a10;
  -webkit-background-clip: unset;
  background-clip: unset;
  border-radius: 8px;
}
.sig.frame-ribbon {
  padding: 0.08em 0.5em;
  background: #f4b6c8;
  color: #fff;
  -webkit-background-clip: unset;
  background-clip: unset;
  border-radius: 999px;
}
.desk-stickers {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.desk-stickers img {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}
.wp-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.wp-picker button {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #ddd center/cover no-repeat;
}
.wp-picker button.on {
  border-color: #f4b6c8;
  box-shadow: 0 0 0 2px rgba(244, 182, 200, 0.4);
}
.wp-picker button span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 2px;
  font-size: 0.58rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.wp-picker .wp-aurora { background-image: linear-gradient(165deg, #f4b6c8, #8fb4ea); }
.wp-picker .wp-fairy { background-image: linear-gradient(180deg, #e8b4d4, #9bb6ea); }
.wp-picker .wp-night { background-image: linear-gradient(180deg, #1a1430, #0a0c18); }
.wp-picker .wp-rose { background-image: linear-gradient(180deg, #ffd6e8, #c97a9a); }
.wp-picker .wp-ocean { background-image: linear-gradient(180deg, #b8d4f0, #3a5a8c); }
.sticker-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.sticker-tray button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  cursor: pointer;
}
.sticker-tray img { width: 100%; height: 100%; object-fit: contain; }

.scr.app-layer.spotify.is-on {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scr.app-layer.maps-app.is-on { overflow: auto; scrollbar-width: none; }
.scr.app-layer.maps-app.is-on::-webkit-scrollbar { display: none; }
.spot-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.spot-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.spot-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (max-width: 420px) {
  .phone { width: min(360px, 94vw); height: min(700px, 88dvh); }
}