/* P355 landing: the install section's phone mockup (.lp-ph) and its scenes, K1–K4 and A1–A3 (install.ts sets .is-on).
   The section's layout, steps and perks are in install.css. */

.lp-ph {
  position: relative;
  aspect-ratio: 9 / 19;
  overflow: hidden;
  border-radius: 48px;
  background: var(--lp-bg);
  box-shadow: inset 0 0 0 9px #2a2a30, 0 40px 120px #e0184f33;
  color: var(--lp-ink);
  font-size: 14px;
  isolation: isolate;
}

:where(.lp-ph) :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.lp-ph img { display: block; border-radius: 22%; }

.lp-ph__status {
  position: absolute;
  inset: 22px 30px auto;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.lp-ph__status svg { width: 34px; fill: currentColor; stroke: none; }

.lp-ph__layer, .lp-ph__dim {
  position: absolute;
  inset: 9px;
  border-radius: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--lp-ease-out), visibility 0s 350ms, translate 450ms var(--lp-ease-out);
}

.lp-ph .is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.lp-ph__chrome:not(.is-on), .lp-ph__safari:not(.is-on) { display: none; }

/* The Studio home in Safari or Chrome. */
.lp-ph__web { display: flex; flex-direction: column; gap: 14px; padding: 58px 16px 0; }
.lp-ph__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.lp-ph__paste, .lp-ph__address { padding: 12px 14px; border-radius: 12px; background: var(--lp-surface-2); color: var(--lp-ink-3); }
.lp-ph__label { font: 500 11px/1 var(--lp-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-ink-3); }
.lp-ph__songs { display: grid; gap: 12px; }
.lp-ph__songs li { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; }
.lp-ph__songs i { grid-row: span 2; height: 48px; border-radius: 8px; background: var(--lp-surface-2); }
.lp-ph__songs span { font-size: 12px; color: var(--lp-ink-3); }

.lp-ph__chrome { display: flex; align-items: center; gap: 8px; margin: 0 -6px; }
.lp-ph__chrome svg { width: 20px; flex: none; }
.lp-ph__url { flex: 1; padding: 9px 12px; border-radius: 999px; background: var(--lp-surface-2); font-size: 12px; }
.lp-ph__tabs { padding: 1px 6px; border: 1.5px solid currentColor; border-radius: 5px; font-size: 11px; }
.lp-ph__dots { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; }

.lp-ph__safari { position: absolute; inset: auto 0 0; display: grid; gap: 12px; padding: 12px 14px 26px; background: var(--lp-surface); }
.lp-ph__address { text-align: center; color: var(--lp-ink); }
.lp-ph__toolbar { display: flex; justify-content: space-around; align-items: center; color: #3b82f6; font-size: 20px; }
.lp-ph__share { width: 40px; height: 40px; padding: 8px; border-radius: 50%; color: var(--lp-ink); }

/* The ring on what the scene taps. */
[data-scene="k1"] [data-ring="k1"], [data-scene="a1"] [data-ring="a1"], [data-scene="a3"] .lp-ph__install { box-shadow: 0 0 0 2px var(--lp-hot), 0 0 18px #ff2d5566; }

.lp-ph__dim { background: #000000a6; z-index: 1; }

.lp-ph__sheet {
  inset: auto 9px 9px;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 18px 14px 30px;
  border-radius: 28px 28px 40px 40px;
  background: #1c1c21;
}

.lp-ph__sheet:not(.is-on) { translate: 0 40%; }
.lp-ph__sheet-app { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
.lp-ph__sheet-app img { grid-row: span 2; }
.lp-ph__sheet-app span { font-size: 12px; color: var(--lp-ink-3); }
.lp-ph__people { display: flex; justify-content: space-between; font-size: 10px; color: var(--lp-ink-3); text-align: center; }
.lp-ph__people i { display: block; width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%; background: #2c2c33; }
.lp-ph__menu { overflow: hidden; border-radius: 14px; background: #2c2c33; }
.lp-ph__menu li, .lp-ph__drop li { padding: 12px 16px; }
.lp-ph__menu li + li { border-top: 1px solid var(--lp-line); }
.lp-ph .is-lit { box-shadow: inset 0 0 0 2px var(--lp-hot); background: #e0184f33; border-radius: 12px; font-weight: 600; }

.lp-ph__drop { inset: 58px 9px auto 30%; z-index: 2; padding: 6px; border-radius: 16px; background: #2c2c33; }
.lp-ph__drop:not(.is-on), .lp-ph__dialog:not(.is-on) { translate: 0 -8px; }

.lp-ph__dialog { inset: 38% 20px auto; z-index: 2; display: grid; gap: 16px; padding: 22px; border-radius: 26px; background: #2c2c33; }
.lp-ph__dialog > b { font-size: 20px; font-weight: 600; }
.lp-ph__actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; color: #a8c7fa; font-weight: 600; }
.lp-ph__install { padding: 9px 18px; border-radius: 999px; background: #a8c7fa; color: #062e6f; }

/* K3: the home screen. */
.lp-ph__home { padding: 70px 18px 18px; background: linear-gradient(170deg, #3a1230 0%, #2a1240 60%, #1c0d2e 100%); }
.lp-ph__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 14px; }
.lp-ph__grid i, .lp-ph__dock i { aspect-ratio: 1; border-radius: 22%; background: #ffffff14; }
.lp-ph__icon { display: grid; justify-items: center; gap: 4px; font-size: 9px; font-weight: 600; }
.lp-ph__icon img { width: 100%; height: auto; box-shadow: 0 0 22px #ff2d5599; }
.lp-ph__dock { position: absolute; inset: auto 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 12px; border-radius: 28px; background: #ffffff12; }
.lp-ph__home.is-on .lp-ph__icon img { animation: lp-app-land 700ms var(--lp-ease-spring) 300ms backwards; }

@keyframes lp-app-land { from { scale: 1.25; opacity: 0; box-shadow: 0 0 40px #ff2d55; } }

/* K4: the app full screen on a chord chart, a miniature of the Studio's phone song page (src/studio/phone-song;
   phone-song.css, sheet.css, live.css, controls.css, player.css) with its dark tokens. Every size is the real one at a
   390px-wide screen times --u, so the whole page scales with the mockup and lays out exactly as at 390. */
.lp-ph { container-type: inline-size; }
.lp-ph__app {
  --u: calc((100cqw - 18px) / 390);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(52 * var(--u));
  background: #09090b;
  color: #f5f5f6;
  font: 400 calc(14 * var(--u)) / 1.3 'Geist', system-ui, sans-serif;
}
.lp-ph__app svg { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* Top bar: ‹, the song, then link, video and ☰ (phone-song.css .ph-bar, rail.css .db-head__icon). */
.lp-ph__top { display: flex; flex: none; align-items: center; gap: calc(4 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(4 * var(--u)); border-bottom: 1px solid #26262c; }
.lp-ph__top > svg { box-sizing: border-box; width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: calc(9 * var(--u)); }
.lp-ph__top > i { display: grid; flex: none; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 1px #26262c; }
.lp-ph__titles { display: grid; flex: 1; min-width: 0; }
.lp-ph__titles b { color: #fff; font-size: calc(17 * var(--u)); font-weight: 600; line-height: calc(22 * var(--u)); white-space: nowrap; }
.lp-ph__titles small { color: #a1a1aa; font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }

/* Live chords: 64px name cards, the playing one red and centred, the rest with their section's top edge. */
.lp-ph__row { display: flex; flex: none; justify-content: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) 0; }
.lp-ph__row b {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: calc(64 * var(--u));
  height: calc(40 * var(--u));
  overflow: hidden;
  border: 1px solid #ffffff1f;
  border-radius: calc(10 * var(--u));
  background: #ffffff0d;
  font: 700 calc(18 * var(--u)) / 1 Roboto, Arial, sans-serif;
}
.lp-ph__row b::before { position: absolute; inset: 0 0 auto; height: calc(3 * var(--u)); background: #60a5fa; content: ''; }
.lp-ph__row b::after { position: absolute; inset: auto calc(8 * var(--u)) calc(4 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; background: #ffffff1f; content: ''; }
.lp-ph__row .is-now { border-color: #ff2d55eb; background: #ff2d5529; box-shadow: 0 0 14px #ff2d552e; }
.lp-ph__row .is-now::before { display: none; }
.lp-ph__row .is-now::after { background: linear-gradient(90deg, #ff2d55 55%, #ffffff1f 55%); }

/* Lead · Lyrics · Grid · Instrument and ⋯ (controls.ts, .ph-viewbar on .st-seg), at the Studio's spacing (P357, D489). */
.lp-ph__tools { display: flex; flex: none; align-items: center; gap: calc(6 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(12 * var(--u)); }
.lp-ph__views { display: flex; flex: 1; gap: 2px; min-width: 0; height: calc(40 * var(--u)); box-sizing: border-box; padding: 2px; border-radius: calc(10 * var(--u)); background: #0c0c0f; box-shadow: inset 0 0 0 1px #26262c; }
.lp-ph__views span { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: calc(4 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(8 * var(--u)); color: #80808a; font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; }
.lp-ph__views svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.lp-ph__views .is-sel { background: #18181c; box-shadow: inset 0 0 0 1px #34343c; color: #f5f5f6; }
.lp-ph__more { display: grid; flex: none; place-items: center; width: calc(44 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); background: #0c0c0f; box-shadow: inset 0 0 0 1px #26262c; color: #fff; font-size: calc(16 * var(--u)); }

/* The Lead sheet: coloured section caps with ⌄ and the start time, then monospace lines, each chord over its syllable. */
.lp-ph__lead { display: flex; flex: 1; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; overflow: hidden; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-top: 1px solid #26262c; }
.lp-ph__sec { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) 0; }
.lp-ph__sec b { color: var(--sect); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-ph__sec b::after { margin-left: calc(4 * var(--u)); content: '\2304'; }
.lp-ph__sec span { color: #80808a; font: 400 calc(11 * var(--u)) / 1 'Geist Mono', ui-monospace, monospace; }
.lp-ph__sec--verse { --sect: #a78bfa; }
.lp-ph__sec--chorus { --sect: #f472b6; }
.lp-ph__line { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(6 * var(--u)); font: 400 calc(13 * var(--u)) / 1.5 'Geist Mono', ui-monospace, monospace; white-space: pre; }
.lp-ph__line > span { position: relative; display: inline-block; padding-top: 1.5em; }
.lp-ph__line i { position: absolute; top: 0; left: 0; color: #f5c66b; font: 700 1em / 1.5 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }
.lp-ph__line.is-now { background: #f5f5f614; color: #fff; font-weight: 700; }
.lp-ph__line .is-now { border-radius: 3px; background: #ffb34224; box-shadow: 0 0 0 3px #ffb34224; color: #ffe8b8; text-shadow: 0 0 12px #ffb342bf; }

/* Player bar: the seek line with its times, then Key & tempo · −10 · play · +10 · Loop (player.css .pl-mini). */
.lp-ph__bar { display: grid; flex: none; grid-template-rows: calc(32 * var(--u)) 1fr; height: calc(108 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); border-top: 1px solid #26262c; background: #0c0c0f; }
.lp-ph__seek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); color: #80808a; font: 400 calc(13 * var(--u)) / 1 'Geist Mono', ui-monospace, monospace; }
.lp-ph__seek i {
  position: relative;
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: linear-gradient(90deg, #60a5fa66 0 8%, #a78bfa66 8% 34%, #f472b666 34% 52%, #a78bfa66 52% 76%, #f472b666 76% 94%, #fbbf2466 94%);
}
.lp-ph__seek i::after { position: absolute; top: 50%; left: 22%; box-sizing: border-box; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border: calc(3 * var(--u)) solid #ff2d55; border-radius: 50%; background: #fff; translate: -50% -50%; content: ''; }
.lp-ph__ctrl { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; column-gap: calc(22 * var(--u)); color: #a1a1aa; }
.lp-ph__ctrl > svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.lp-ph__ctrl text { fill: currentColor; stroke: none; font: 700 7px sans-serif; }
.lp-ph__key, .lp-ph__loop { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); min-width: calc(84 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; line-height: 1; white-space: nowrap; }
.lp-ph__key { justify-self: start; }
.lp-ph__loop { justify-self: end; }
.lp-ph__key b { color: #f5f5f6; font: 600 calc(13 * var(--u)) / calc(22 * var(--u)) 'Geist Mono', ui-monospace, monospace; }
.lp-ph__loop svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.lp-ph__disc { display: grid; place-items: center; box-sizing: border-box; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, #ff4d6d, #e11d48); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) #ff2d5566, inset 0 1px 0 #ffffff47; outline: 1.5px solid #ff2d5559; outline-offset: 2px; color: #fff; }
.lp-ph__disc svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: currentColor; stroke: none; }

@media (max-width: 599px) {
  .lp-ph { font-size: 13px; }
}