/* Genesis website: "Yellow writes. Red records." The Library's create bubble (yellow Write + red Record in one piece
   of glass), drawn live in a canvas by assets/js/marry.js from the app's own numbers (CreateBubble.swift).
   It opens huge on black; scrolling shrinks it into an iPhone showing All Songs, where it lands in its real spot.
   Without motion (Reduce Motion or no JS) the section is just the phone, with the bubble in place. */

.marry { position: relative; background: #000; color: #F5F5F7; --accent-text: #FFB340; --text-2: #A1A1A8; }
.js-marry .marry { height: 330vh; height: 330svh; }
.mr-stage { position: relative; min-height: 100vh; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0; display: flex; flex-direction: column; align-items: center; }
.js-marry .mr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0; display: block; }

.mr-intro { text-align: center; padding: 0 16px; max-width: 900px; margin: 0 auto 32px; position: relative; z-index: 3; }
.js-marry .mr-intro { position: absolute; left: 0; right: 0; top: clamp(72px, 11vh, 130px); margin: 0 auto; will-change: opacity, transform; }
.mr-intro h2 { margin: 0; }
.mr-hint { display: none; margin: 18px 0 0; font-size: 17px; font-weight: 600; color: var(--text-2); }
.js-marry .mr-hint { display: block; }

/* The phone. JS sizes it and moves it with one transform; the screen is a 390 × 846 pt page scaled to fit. */
.mr-phone { width: min(320px, 74vw); z-index: 1; }
.mr-phone::before { box-shadow: 0 40px 90px -30px rgba(255, 120, 40, 0.22), 0 20px 50px -20px rgba(0, 0, 0, 0.9); }
.js-marry .mr-phone { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.mr-phone .screen { background: #0B0C10; }

.mr-lib { position: absolute; left: 0; top: 0; width: 390px; height: 846px; transform-origin: 0 0; transform: scale(var(--ls, 0.75));
  background: radial-gradient(120% 50% at 50% 0%, #1A2030 0%, #10131B 45%, #0B0C10 100%);
  font-family: var(--font); color: #F5F5F7; -webkit-font-smoothing: antialiased; padding: 54px 16px 0; overflow: hidden; text-align: left; }
.ml-top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 0 0 4px; }
.ml-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ml-brand svg { width: 26px; height: 13px; }
.ml-more { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3.5px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.ml-more i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #F5F5F7; }
.ml-title { margin: 14px 0 14px 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ml-search { display: flex; gap: 8px; margin-bottom: 26px; }
.ml-field, .ml-all { height: 40px; border-radius: 20px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); font-size: 17px; }
.ml-field { flex: 1; gap: 8px; padding: 0 14px; color: rgba(235, 235, 245, 0.6); }
.ml-field svg { width: 16px; height: 16px; }
.ml-all { padding: 0 14px 0 16px; gap: 8px; font-weight: 600; }
.ml-all svg { width: 10px; height: 6px; }
.ml-h { margin: 0 0 8px 6px; font-size: 20px; font-weight: 700; }
.ml-card { border-radius: 26px; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); padding: 0 16px; margin-bottom: 22px; }
.ml-row { position: relative; padding: 13px 2px; display: flex; flex-direction: column; gap: 3px; }
.ml-row:has(.ml-play) { padding-right: 92px; }
.ml-row + .ml-row { border-top: 0.5px solid rgba(235, 235, 245, 0.14); }
.ml-row b { font-size: 17px; font-weight: 650; white-space: nowrap; }
.ml-row > span:not(.ml-play):not(.ml-date) { font-size: 15px; color: rgba(235, 235, 245, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-row em { font-style: normal; font-size: 13px; color: rgba(235, 235, 245, 0.45); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.ml-row em i { width: 7px; height: 7px; border-radius: 50%; background: rgba(235, 235, 245, 0.55); margin-right: 2px; }
.ml-row em i.s-prog { background: #FFB340; } .ml-row em i.s-done { background: #30D158; }
.ml-row em u { text-decoration: none; font-weight: 600; color: #FFB340; }
.ml-row em u.u-done { color: #30D158; } .ml-row em u.u-idea { color: #F5F5F7; }
.ml-play { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 34px; border-radius: 17px; padding: 0 12px 0 28px;
  display: flex; align-items: center; font-size: 15px; font-weight: 650; background: rgba(255, 255, 255, 0.07); }
.ml-play::before { content: ""; position: absolute; left: 11px; top: 11px; border-left: 10px solid #F5F5F7; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ml-date { position: absolute; right: 0; top: 14px; font-size: 13px; color: rgba(235, 235, 245, 0.45); }
/* The app's soft fade behind the bubble: rows melt under it. */
.ml-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 210px; background: linear-gradient(rgba(11, 12, 16, 0), rgba(11, 12, 16, 0.95)); }

.mr-canvas { display: none; }
.js-marry .mr-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.mr-hit { display: none; }
.js-marry .mr-hit { display: block; position: absolute; left: 0; top: 0; z-index: 4; border-radius: 999px; touch-action: none; cursor: grab;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.js-marry .mr-hit.is-grabbing { cursor: grabbing; }
.mr-keys { position: absolute; left: 0; top: 0; z-index: 5; }
.mr-key { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.mr-key:focus-visible { clip: auto; width: auto; height: auto; overflow: visible; left: 16px; top: 16px; padding: 8px 12px; border-radius: 10px;
  background: #1C1C1E; color: #F5F5F7; outline: 2px solid #FFB340; font: 600 14px var(--font); }
.no-js-marry .mr-keys { display: none; }

.mr-outro { margin: 28px auto 0; padding: 0 16px; text-align: center; font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; position: relative; z-index: 3; }
.mr-outro span { color: var(--text-2); }
.js-marry .mr-outro { position: absolute; left: 0; right: 0; bottom: clamp(18px, 4.5vh, 48px); margin: 0 auto; opacity: 0; will-change: opacity, transform; }

@media (prefers-color-scheme: light) {
  /* The section stays black in light mode too, so make sure the site's light text tokens don't leak in. */
  .marry .kicker { color: #FFB340; }
}

/* Reduce Motion: no scroll journey; the phone sits still with the bubble in place (still draggable). */
.mr-still .marry { height: 100vh; height: 100svh; min-height: 560px; }
.mr-still .mr-intro { display: none; }