/* Original product screens: retain source pixels, proportions and branding. */
.wave-brand { display: flex; align-items: center; justify-content: center; gap: 15px; }
.wave-brand-mark { width: 58px; height: 58px; object-fit: contain; }
.wave-intro-meta { display: flex; justify-content: center; gap: 20px; margin-top: 14px; color: #a8a6a0; font-size: 11px; }
.wave-intro-meta a { color: #ede9df; }
.wave-showcase { width: min(100%, 900px); }
.wave-capture { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #18191b; border: 1px solid #ffffff16; box-shadow: 0 20px 70px #0005; isolation: isolate; }
.wave-capture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wave-enlarge { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff38; border-radius: 50%; background: #18191bd9; color: #f5f4f0; font-size: 20px; opacity: 0; transition: opacity 160ms; }
.wave-capture:hover .wave-enlarge, .wave-capture:focus-visible .wave-enlarge { opacity: 1; }
.wave-showcase figcaption, .wave-workspace figcaption { margin-top: 10px; color: #aaa9a4; text-align: center; font-size: 11px; }
.wave-intro-screens { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: 18px; max-width: 850px; height: min(365px, calc(100svh - 335px)); }
.wave-intro-chat { height: 100%; }
.wave-intro-chat img { object-fit: cover; object-position: 50% 45%; }
.wave-intro-watch img { aspect-ratio: 1792/1228; }
.wave-portrait { width: min(100%, 420px); }
.wave-portrait .wave-capture { height: min(430px, calc(100svh - 307px)); }
.wave-portrait img { object-fit: cover; object-position: top; }
.wave-voice-capture { width: min(100%, 260px); }
.wave-voice-capture .wave-capture { height: min(430px, calc(100svh - 307px)); }
.wave-voice-capture img { object-fit: cover; object-position: top; }
.wave-landscape .wave-capture { height: min(430px, calc(100svh - 307px)); background: transparent; border: none; box-shadow: none; }
.wave-landscape img { object-fit: contain; border-radius: 14px; }
.wave-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 20px; width: min(100%, 980px); }
.wave-workspace figure { min-width: 0; }
.wave-workspace .wave-capture { height: min(380px, calc(100svh - 310px)); background: transparent; box-shadow: none; border: 0; }
.wave-workspace img { border-radius: 14px; }
.screen-dialog { width: fit-content; max-width: calc(100vw - 40px); max-height: calc(100svh - 40px); padding: 18px; border: 1px solid #ffffff25; border-radius: 18px; background: #171819; color: #f6f5f1; overflow: auto; box-shadow: 0 30px 100px #000a; }
.screen-dialog::backdrop { background: #080909df; backdrop-filter: blur(16px); }
.screen-dialog form { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.screen-close { width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #ffffff14; font-size: 30px; line-height: 1; }
.screen-full { display: block; width: auto; max-width: 100%; max-height: calc(100svh - 180px); object-fit: contain; border-radius: 8px; margin: auto; }
.screen-dialog p { margin: 14px auto 0; font-size: 12px; text-align: center; color: #c6c5bf; }
@media (hover: none) { .wave-enlarge { opacity: 1; } }
@media (max-width:700px) {
  .wave-brand { gap: 10px; }
  .wave-brand-mark { width: 43px; height: 43px; }
  .wave-intro-meta { flex-direction: column; gap: 5px; font-size: 10px; }
  .wave-intro-screens { grid-template-columns: 1fr; height: min(355px, calc(100svh - 340px)); max-width: 390px; }
  .wave-intro-chat { display: none; }
  .wave-intro-watch { height: 100%; }
  .wave-intro-watch img { object-fit: contain; }
  .wave-portrait { max-width: 420px; }
  .wave-portrait .wave-capture, .wave-voice-capture .wave-capture { height: min(440px, calc(100svh - 320px)); }
  .wave-voice-capture { max-width: 270px; }
  .wave-landscape .wave-capture { height: min(400px, calc(100svh - 310px)); overflow: hidden; border: 1px solid #ffffff16; background: #191a1c; }
  .wave-landscape img { width: auto; max-width: none; height: 100%; margin-left: 50%; transform: translateX(-50%); }
  #wave-music .wave-landscape img { margin-left: 0; transform: none; }
  .wave-workspace { grid-template-columns: 1fr; gap: 12px; max-width: 400px; }
  .wave-workspace figure:last-child { display: none; }
  .wave-workspace .wave-capture { height: min(390px, calc(100svh - 320px)); overflow: hidden; background: #1a1b1d; }
  .wave-workspace img { object-fit: cover; object-position: 40% 50%; }
  .screen-dialog { max-width: calc(100vw - 20px); padding: 10px; }
}
html:not([data-layout=pinned]) .wave-intro-screens { height: 365px; }
html:not([data-layout=pinned]) .wave-capture { min-height: 0; }
html:not([data-layout=pinned]) .wave-portrait .wave-capture, html:not([data-layout=pinned]) .wave-voice-capture .wave-capture { height: 430px; }
html:not([data-layout=pinned]) .wave-landscape .wave-capture { height: 430px; }
@media (min-width:701px) {
  #wave-music .wave-landscape img { height: auto; object-fit: initial; }
}
@media (max-width:700px) {
  #wave-music .wave-landscape img { height: 470px; }
  .wave-workspace figure:last-child { display: block; }
  .wave-workspace figure:last-child .wave-capture { height: 44px; width: fit-content; margin: 0 auto; border: 1px solid #ffffff24; border-radius: 8px; padding: 11px 17px; }
  .wave-workspace figure:last-child img, .wave-workspace figure:last-child figcaption, .wave-workspace figure:last-child .wave-enlarge { display: none; }
  .wave-screen-label { font-size: 12px; color: #d8d5cb; }
}
@media (min-width:701px) { .wave-screen-label { display: none; } }
@media (max-width:700px) {
  .wave-portrait .wave-capture, .wave-voice-capture .wave-capture { height: min(440px, calc(100svh - 380px)); }
  .wave-workspace figure:first-child .wave-capture { height: min(350px, calc(100svh - 440px)); }
}

.screen-original { display: block; width: fit-content; margin: 12px auto 0; padding: 6px 10px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }