/* Shared listening-room and player styles, loaded only by MUSIC. */
button,input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .4; }
button,a,input,summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #a6d9ff; outline-offset: 5px; }
[hidden] { display: none !important; }
.logo { width: auto; padding: 0 12px; font-size: 15px; font-weight: 600; }
.logo:hover,.logo:active { transform: none; }
.nav button { border: 0; background: none; color: #fff; font-size: 13px; padding: 8px 0; }
.hero-video-wrap { background: #092543; }
.hero-video-wrap video { opacity: .72; }
.solutions-video-wrap { background: #061c33; }
.solutions-video-wrap video { opacity: .55; }
.hero,.hero-main { height: 100svh; }
.sol-set h1 { line-height: 1.12; }
.sol-set .cta { border: 0; }
.sol-set { pointer-events: none; }
.solutions-overlay { pointer-events: none; }
.sol-set.is-current { pointer-events: auto; }
.solutions-overlay .cta { margin-top: 12px; }
.body-copy { line-height: 1.8; letter-spacing: 0; }
.about-copy { line-height: 1.5; max-width: 1000px; }
.listening-room { position: fixed; z-index: 70; inset: 84px 20px 110px auto; width: min(570px, calc(100% - 40px)); border: 1px solid #ffffff26; border-radius: 16px; color: #edf5ff; background: #0a2038; box-shadow: 0 20px 90px #0006; overflow: auto; padding: 28px; overscroll-behavior: contain; }
.room-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.room-top h2 { font-size: 16px; font-weight: 500; }
.quiet-button { border: 0; background: none; color: #bccfe1; padding: 10px 0; font-size: 13px; }
.album-select { display: flex; gap: 6px; margin-bottom: 26px; flex-wrap: wrap; }
.album-select button { background: transparent; border: 1px solid #ffffff24; border-radius: 8px; color: #b8cce0; padding: 10px; font-size: 12px; line-height: 1.6; }
.album-select button[aria-pressed="true"] { background: #dceeff; color: #08233e; border-color: #dceeff; }
.album-heading { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.album-heading img { width: 124px; height: 124px; object-fit: contain; border-radius: 3px; }
.album-heading h3 { font-size: 26px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.album-heading p { color: #a8bfd5; font-size: 12px; margin-top: 12px; }
.album-heading a { display: inline-block; font-size: 12px; margin-top: 14px; text-decoration: underline; text-underline-offset: 4px; }
.track-list { list-style: none; padding: 0; }
.track-list button { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 10px; border: 0; border-radius: 7px; background: none; color: inherit; text-align: left; }
.track-list button:hover { background: #ffffff08; }
.track-list button[aria-current="true"] { background: #ffffff12; }
.track-list .number,.track-list .availability { font-size: 11px; color: #a4bbd1; }
.track-list strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 400; }
.track-list small { display: block; font-size: 11px; color: #a4bbd1; margin-top: 3px; }
.album-notes { margin-top: 22px; border-top: 1px solid #ffffff20; }
.album-notes summary { cursor: pointer; padding: 20px 0; font-size: 14px; }
.album-notes p { white-space: pre-line; font-size: 14px; line-height: 1.95; margin-bottom: 22px; color: #ccdaea; overflow-wrap: anywhere; }
.player-bar { position: fixed; z-index: 80; bottom: 0; left: 0; width: 100%; min-height: 92px; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); background: #07192b; color: #edf5ff; border-top: 1px solid #ffffff24; display: grid; grid-template-columns: minmax(160px,1fr) 180px minmax(180px,2fr) 100px; gap: 20px; align-items: center; }
.now-title { font-size: 14px; display: block; }
.now-status { font-size: 11px; color: #a8bfd5; margin-top: 5px; display: block; }
.transport { display: flex; justify-content: center; align-items: center; gap: 14px; }
.transport button { background: none; border: 0; color: #edf5ff; padding: 10px 0; font-size: 12px; }
.transport #play-toggle { border: 1px solid #ffffff50; border-radius: 999px; min-width: 60px; padding: 10px; }
.seek-wrap { display: flex; align-items: center; gap: 12px; }
.seek-wrap time { font-size: 11px; color: #b3c8da; font-variant-numeric: tabular-nums; }
input[type="range"] { accent-color: #cbe7ff; width: 100%; min-width: 0; cursor: pointer; }
.volume-wrap { font-size: 10px; color: #b3c8da; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.contact-dialog { margin: auto; width: min(560px, calc(100% - 32px)); padding: 32px; background: #0a2038; color: #edf5ff; border: 1px solid #ffffff30; border-radius: 16px; }
.contact-dialog::backdrop { background: #0009; }
.contact-dialog p { line-height: 1.9; margin: 18px 0; color: #c5d7e8; }
.contact-dialog h2 { font-weight: 400; }
.contact-dialog { max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; }
/* Crop the original QR without regenerating modules. Inverted white becomes
   black, which screen blending removes against the dialog's actual background. */
.contact-qr { position: relative; width: min(280px,100%); aspect-ratio: 1; overflow: hidden; margin: 24px auto; }
.contact-qr img { position: absolute; width: 137.037037%; max-width: none; height: auto; left: -18.518519%; top: -44.444444%; filter: invert(1); mix-blend-mode: screen; }
.contact-wechat strong { color: #edf5ff; user-select: all; }
.contact-wechat span { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .listening-room { animation: room-enter .35s cubic-bezier(.16,1,.3,1); } @keyframes room-enter { from { opacity: 0; transform: translateY(16px); } } }
@media(max-width: 1023px) { .hero-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 150px; padding-bottom: 40px; } .hero-left { height: auto; } .hero-right { align-self: flex-end; } .hero-title { font-size: clamp(60px,12vw,96px); } .about { min-height: 100svh; height: auto; gap: 100px; padding-top: 90px; padding-bottom: 70px; } .about-bottom { display: flex; justify-content: flex-end; } .player-bar { grid-template-columns: minmax(0,1fr) 170px; gap: 10px 16px; } .seek-wrap { grid-column: 1/-1; } .volume-wrap { display: none; } .listening-room { bottom: 140px; } }
@media(max-width: 480px) { .header { gap: 12px; padding-right: 12px; } .logo { padding: 0 8px; } .nav { gap: 12px; } .nav a,.nav button { font-size: 11px; } .listening-room { inset: 78px 8px 140px; width: auto; padding: 20px; } .album-heading img { width: 88px; height: 88px; } .album-heading h3 { font-size: 22px; } .player-bar { padding-left: 16px; padding-right: 16px; } .sol-set h1 { font-size: 44px; } .about-copy { font-size: 26px; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } .hero-video-wrap video,.solutions-video-wrap video { display: none; } .hero-video-wrap { background: #092543 url('assets/dive3.jpg') center/cover; } .solutions-overlay { position: relative; height: auto; clip-path: none !important; background: #092543; } .solutions-content,.solutions-inner { height: auto; } .solutions-stage { height: auto; } .sol-set { position: relative; min-height: 70svh; opacity: 1 !important; filter: none !important; pointer-events: auto; } .sol-top,.sol-bottom { transform: none !important; } .solutions-stage { display: block; } .solutions-spacer { min-height: 0; } }