:root {
  --safe-top: 0px; --safe-right: 0px; --safe-bottom: 0px; --safe-left: 0px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--navy); background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--paper); color: var(--navy); }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 3px; }
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; width: 21rem; aspect-ratio: 1; border-radius: 50%; filter: blur(1px); opacity: .28; animation: drift 13s ease-in-out infinite alternate; }
.orb-a { right: -9rem; top: -7rem; background: radial-gradient(circle at 30% 30%, var(--periwinkle), transparent 68%); }
.orb-b { left: -11rem; bottom: 6rem; background: radial-gradient(circle at 70% 50%, var(--cobalt), transparent 70%); animation-delay: -6s; animation-duration: 17s; }
.wave { position: absolute; bottom: 0; left: 0; width: 110%; height: 10rem; opacity: .14; animation: wave 15s ease-in-out infinite alternate; }
.wave path { fill: var(--cobalt); }
.wave-b { opacity: .09; transform: translateX(-5%); animation-duration: 20s; }
.sound-lines { position: absolute; top: 18%; right: -2.5rem; width: 18rem; opacity: .12; animation: float 11s ease-in-out infinite; }
.sound-lines path { fill: none; stroke: var(--indigo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#app { position: relative; z-index: 1; min-height: 100dvh; }
.screen { width: min(100%, 760px); margin: 0 auto; padding: calc(1.25rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(7rem + var(--safe-bottom)) calc(1rem + var(--safe-left)); }
.loader, .error { min-height: 100dvh; display: grid; place-content: center; text-align: center; }
.loader span { width: 2.5rem; height: 2.5rem; margin: auto; border: 3px solid var(--line); border-top-color: var(--cobalt); border-radius: 50%; animation: spin .8s linear infinite; }
.eyebrow { margin: 0 0 .55rem; color: var(--cobalt); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2rem, 9vw, 3.8rem); line-height: .98; letter-spacing: -.055em; }
h2 { letter-spacing: -.035em; }
.lead { color: var(--muted); font-size: 1.04rem; line-height: 1.55; }
.gate { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 560px; }
.gate-art { position: relative; height: 15rem; margin: 0 0 1.75rem; }
.gate-art img { position: absolute; inset: 1.2rem 0 0; width: 100%; height: 13rem; object-fit: cover; border-radius: 2rem; box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--indigo) 20%, transparent); animation: float 9s ease-in-out infinite; }
.art-sheet { position: absolute; width: 65%; height: 10rem; border-radius: 1.6rem; right: 4%; top: 0; transform: rotate(8deg); background: var(--periwinkle); opacity: .28; }
.sheet-mid { right: auto; left: 3%; top: 2rem; transform: rotate(-6deg); background: var(--cobalt); opacity: .12; }
.gate-actions { display: grid; gap: .75rem; margin-top: 1.3rem; }
.primary, .secondary { min-height: 52px; display: grid; place-items: center; padding: .8rem 1rem; border-radius: 1rem; text-decoration: none; font-weight: 750; border: 1px solid transparent; cursor: pointer; }
.primary { color: white; background: linear-gradient(135deg, var(--cobalt), var(--indigo)); box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--cobalt) 25%, transparent); }
.secondary { background: color-mix(in srgb, var(--surface) 84%, transparent); border-color: var(--line); }
.status, .toast { min-height: 1.4rem; color: var(--muted); text-align: center; font-size: .9rem; }
.app-shell { min-height: 100dvh; }
.topbar { width: min(100%, 760px); margin: auto; padding: calc(.7rem + var(--safe-top)) calc(1rem + var(--safe-right)) .5rem calc(1rem + var(--safe-left)); display: flex; justify-content: space-between; align-items: center; }
.brand { border: 0; background: none; display: flex; align-items: center; gap: .55rem; font-weight: 850; font-size: 1.15rem; cursor: pointer; }
.brand img { width: 2.35rem; height: 2.35rem; border-radius: .8rem; }
.balance-pill { padding: .55rem .75rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--surface) 82%, transparent); display: grid; text-align: right; }
.balance-pill span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.balance-pill strong { font-size: .85rem; }
.hero-card { position: relative; min-height: 13.5rem; padding: 1.45rem; border-radius: 1.7rem; overflow: hidden; color: white; background: linear-gradient(145deg, var(--navy), var(--indigo) 60%, var(--cobalt)); box-shadow: 0 1.3rem 3rem color-mix(in srgb, var(--indigo) 22%, transparent); }
.hero-card > div:first-child { position: relative; z-index: 2; width: 60%; }
.hero-card h1 { font-size: clamp(1.85rem, 8vw, 3rem); }
.hero-card p:not(.eyebrow) { color: color-mix(in srgb, white 72%, var(--periwinkle)); line-height: 1.45; font-size: .9rem; }
.hero-card .eyebrow { color: var(--periwinkle); }
.hero-art { position: absolute; right: -9%; bottom: -16%; width: 55%; height: 120%; transform: rotate(-4deg); }
.hero-art span { position: absolute; inset: 8% 10%; border: 1px solid var(--periwinkle); border-radius: 46% 54% 35% 65%; animation: drift 11s ease-in-out infinite alternate; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .55; }
.section-heading { margin: 2rem 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.section-heading h2 { margin: 0; }
.section-heading span { min-width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--line); font-size: .76rem; }
.records { display: grid; gap: .75rem; }
.record-card { width: 100%; min-height: 6.5rem; padding: 1rem; display: grid; grid-template-columns: 3.1rem 1fr auto; gap: .8rem; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 1.2rem; background: color-mix(in srgb, var(--surface) 89%, transparent); cursor: pointer; box-shadow: 0 .5rem 1.7rem color-mix(in srgb, var(--navy) 6%, transparent); }
.record-number { width: 3rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 1rem; color: white; background: linear-gradient(145deg, var(--cobalt), var(--indigo)); font-weight: 850; }
.record-copy { min-width: 0; display: grid; gap: .2rem; }
.record-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-copy small, .record-copy em { color: var(--muted); font-size: .76rem; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrow { font-size: 1.8rem; color: var(--cobalt); }
.empty-state { padding: 2rem; text-align: center; }
.empty-state img { width: min(100%, 22rem); border-radius: 2rem; mix-blend-mode: multiply; }
.empty-state p { color: var(--muted); }
.dock { position: fixed; z-index: 5; left: 50%; bottom: calc(.75rem + var(--safe-bottom)); transform: translateX(-50%); width: min(calc(100% - 1.5rem), 420px); display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .4rem; border: 1px solid var(--line); border-radius: 1.25rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px); box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--navy) 14%, transparent); }
.dock button { min-height: 50px; border: 0; border-radius: .9rem; background: transparent; display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 750; cursor: pointer; }
.dock button.active { color: white; background: var(--navy); }
.back { min-height: 44px; padding: 0; border: 0; background: none; color: var(--cobalt); font-weight: 750; cursor: pointer; }
.detail-head { min-height: 14rem; position: relative; margin-top: .6rem; padding: 1.4rem; overflow: hidden; border-radius: 1.6rem; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--periwinkle) 28%, var(--surface))); border: 1px solid var(--line); }
.detail-head > div { position: relative; z-index: 2; width: 68%; }
.detail-head h1 { font-size: clamp(1.8rem, 8vw, 3.4rem); }
.detail-head h1 span { display: block; margin-bottom: .4rem; color: var(--cobalt); font-size: .8rem; letter-spacing: .12em; }
.detail-head p:last-child { color: var(--muted); }
.detail-head img { position: absolute; width: 50%; height: 115%; object-fit: cover; right: -8%; bottom: -12%; mix-blend-mode: multiply; opacity: .72; animation: float 10s ease-in-out infinite; }
.summary, .transcript { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.3rem; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.summary > p:last-child { margin-bottom: 0; line-height: 1.55; }
.transcript h2 { margin: 0 0 1rem; }
.timestamp-toggle, .copy-all { width: 100%; min-height: 50px; margin-bottom: .7rem; padding: .75rem 1rem; border-radius: .9rem; cursor: pointer; }
.timestamp-toggle { display: flex; justify-content: space-between; border: 1px solid var(--line); background: var(--surface); }
.timestamp-toggle[aria-pressed="true"] { border-color: var(--cobalt); color: var(--cobalt); }
.timestamp-toggle span { font-variant-numeric: tabular-nums; font-weight: 800; }
.copy-all { display: flex; align-items: center; justify-content: center; gap: .6rem; border: 0; color: white; background: linear-gradient(135deg, var(--cobalt), var(--indigo)); }
.document { margin-top: 1.2rem; font-size: 1rem; line-height: 1.72; }
.document p { padding-left: 1rem; border-left: 2px solid var(--line); }
.detail-actions { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.detail-actions button { min-height: 50px; padding: .6rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); cursor: pointer; font-size: .76rem; font-weight: 700; }
.detail-actions .danger { color: var(--danger); }
.catalog > h1 { margin-bottom: .7rem; }
.packages { display: grid; gap: .8rem; margin-top: 1.5rem; }
.package { min-height: 76px; padding: 1rem; display: flex; justify-content: space-between; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); cursor: pointer; }
.package span { display: grid; gap: .2rem; }
.package small { color: var(--muted); }
.package b { padding: .55rem .7rem; border-radius: .7rem; color: white; background: var(--cobalt); }
.error img { width: 6rem; margin: auto; border-radius: 2rem; }
.error h1 { margin-top: 1rem; font-size: 2rem; }
.error p { color: var(--muted); }
@media (min-width: 720px) {
  .screen { padding-left: 1.5rem; padding-right: 1.5rem; }
  .records { grid-template-columns: 1fr 1fr; }
  .record-card { grid-template-columns: 3rem 1fr auto; }
  .gate-actions { grid-template-columns: 1fr 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root { color: var(--paper); background: var(--navy); }
  body { background: color-mix(in srgb, var(--navy) 92%, black); color: var(--paper); }
  .record-card, .summary, .transcript, .package, .detail-actions button, .secondary, .balance-pill { background: color-mix(in srgb, var(--navy) 82%, var(--surface)); }
  .detail-head { background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 84%, var(--surface)), color-mix(in srgb, var(--indigo) 52%, var(--navy))); }
  .timestamp-toggle { background: color-mix(in srgb, var(--navy) 80%, var(--surface)); }
  .dock { background: color-mix(in srgb, var(--navy) 88%, transparent); }
  .empty-state img { mix-blend-mode: screen; opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@keyframes drift { to { transform: translate3d(1.2rem, -.8rem, 0) scale(1.04); } }
@keyframes float { 50% { transform: translate3d(0, -.65rem, 0); } }
@keyframes wave { to { transform: translateX(-7%) scaleY(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }