/* CAM Watch: the song sets the length; the scene fills the frame. */
:root {
  color-scheme: dark;
  --watch-bg: #101316;
  --watch-panel: #191e22;
  --watch-ink: #f5f0e7;
  --watch-muted: #acb8b8;
  --watch-sage: #bad6c9;
  --watch-lilac: #c7bce2;
  --watch-gold: #e8d6b0;
  --watch-line: #ffffff1e;
  font: 15px/1.5 Inter, Arial, Helvetica, sans-serif;
  background: var(--watch-bg);
  color: var(--watch-ink);
}
* { box-sizing: border-box; }
html { min-width: 280px; scroll-behavior: smooth; }
body { min-width: 280px; margin: 0; background: radial-gradient(ellipse at 80% 0, #c7bce206, transparent 45%), var(--watch-bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; }
button, select { cursor: pointer; }
button, a, select, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; }
button:disabled, select:disabled { cursor: default; opacity: .5; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--watch-sage); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.watch-skip { position: fixed; z-index: 50; top: -90px; left: 14px; padding: 11px 17px; border-radius: 8px; background: var(--watch-gold); color: #25231e; font-size: 13px; }
.watch-skip:focus { top: max(10px, env(safe-area-inset-top, 0px)); }
.watch-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: calc(54px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--watch-line); }
.watch-brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; font-size: 26px; font-weight: 850; letter-spacing: -1.7px; }
.watch-brand > span { padding-left: 13px; border-left: 1px solid #ffffff30; color: var(--watch-sage); font-size: 9px; font-weight: 550; letter-spacing: .2em; }
.watch-header-note { display: none; }
.watch-header nav { display: flex; align-items: center; gap: 20px; }
.watch-header nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #c5cdcb; font-size: 12px; }
.watch-header nav a:hover { color: var(--watch-gold); }
.watch-header nav a > span { color: var(--watch-gold); }
.watch-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 1240px; margin: auto; padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.watch-stage { --film-accent: var(--watch-sage); position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 280px; height: clamp(280px, calc(100dvh - 348px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 650px); padding: 52px 22px 23px; overflow: hidden; border: 1px solid #c7bce238; border-radius: 20px; background: radial-gradient(ellipse at 50% 42%, #61777b4d, transparent 55%), linear-gradient(145deg, #19292c, #262337 65%, #13181f); box-shadow: 0 16px 65px #0003; }
.watch-stage::before { content: ''; position: absolute; inset: 12%; z-index: -1; border: 1px solid #d1e1db12; border-radius: 50%; transform: rotate(-30deg) scaleY(.64); box-shadow: 0 0 0 30px #c7bce203, 0 0 0 60px #c7bce202; }
#watch-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; }
.watch-stage-shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0b151b73, transparent 20%, transparent 53%, #0b111d8a 79%, #0b111dcc); }
.watch-stage-top { position: absolute; z-index: 3; top: 14px; left: 17px; right: 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #e2e8e1; pointer-events: none; font: 550 8px/1.4 Inter, Arial, sans-serif; letter-spacing: .13em; }
.watch-stage-top > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.watch-stage-top i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--film-accent); box-shadow: 0 0 9px #bad6c966; }
.watch-shot { max-width: 52%; padding: 5px 8px; border: 1px solid #ffffff24; border-color: color-mix(in srgb, var(--film-accent) 32%, transparent); border-radius: 999px; background: #10182066; color: var(--film-accent); font-size: 8px; letter-spacing: .035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch-entry { position: relative; z-index: 4; display: flex; flex: none; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: auto 0; padding-block: 8px; text-align: center; transition: opacity .35s ease, visibility .35s; }
#watch-cover { display: block; width: 96px; max-width: 34%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid #ffffff3c; border-radius: 8px; box-shadow: 0 0 40px #dfd0b81a, 0 10px 24px #0006; transform: rotate(-3deg); }
#watch-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; min-width: 176px; max-width: 100%; padding: 11px 20px; border: 1px solid #e8dcc1b3; border-radius: 999px; background: #edddbc; color: #29261f; box-shadow: 0 8px 30px #0002; font-size: 13px; font-weight: 650; line-height: 1.35; }
#watch-start::before { content: '▶'; font-size: 10px; }
#watch-start:disabled { opacity: .68; }
#watch-start:hover:not(:disabled) { background: #f7e9ce; }
.watch-entry-note { display: none; }
.watch-stage-caption { position: relative; z-index: 2; flex: none; width: 100%; margin-top: 17px; pointer-events: none; text-shadow: 0 2px 16px #05101c88; }
#watch-album { margin: 0 0 7px; color: #d2ded8; font: 550 9px/1.4 Inter, Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
#watch-title { max-width: 640px; margin: 0; color: #f9f3e9; font: 400 clamp(27px, 7.4vw, 39px)/1.07 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: pretty; }
#watch-film-title { max-width: 60ch; margin: 9px 0 0; color: #dad7e1; font: 400 11px/1.45 Inter, Arial, sans-serif; letter-spacing: .01em; text-wrap: pretty; }
body[data-playback=playing] .watch-entry { opacity: 0; visibility: hidden; pointer-events: none; }
body[data-playback=playing] .watch-stage-top i { box-shadow: 0 0 12px var(--film-accent); }
body:is([data-playback=paused], [data-playback=ended], [data-playback=error]) #watch-cover { opacity: .86; }
body[data-playback=loading] #watch-start::before { content: '⋯'; font-size: 16px; line-height: 1; }
.watch-console { min-width: 0; padding: 0 3px; border-radius: 12px; }
.watch-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.watch-progress > span { flex: none; min-width: 30px; color: #a6b7b3; font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.watch-progress > span:last-child { text-align: right; }
#watch-seek { display: block; flex: 1; min-width: 0; width: 100%; height: 44px; margin: 0; accent-color: var(--watch-sage); cursor: pointer; background: transparent; }
#watch-seek:disabled { cursor: default; opacity: .5; }
.watch-control-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.watch-transport { display: flex; align-items: center; gap: 5px; }
.watch-transport button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; border: 1px solid transparent; border-radius: 50%; }
.watch-step { width: 44px; padding: 0; color: #d7e2db; background: #ffffff04; }
.watch-step svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.watch-step:hover:not(:disabled) { background: #ffffff0b; }
#watch-toggle { min-width: 76px; padding: 10px 17px; border-color: var(--watch-sage); border-radius: 999px; color: #202b28; background: var(--watch-sage); font-size: 13px; font-weight: 650; }
#watch-toggle:hover:not(:disabled) { background: #d0e5db; }
.watch-tools { display: grid; grid-template-columns: 1fr 1.12fr; gap: 5px; width: 126px; }
.watch-tools button { min-width: 0; min-height: 44px; padding: 6px 7px; border: 1px solid var(--watch-line); border-radius: 9px; color: #bdc8c8; background: #ffffff03; font-size: 10px; line-height: 1.3; }
.watch-tools button[aria-pressed=true] { color: var(--watch-gold); border-color: #e8d6b063; background: #e8d6b009; }
.watch-tools button:hover { border-color: #c7bce26b; }
.watch-settings { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; min-width: 0; padding-top: 4px; }
.watch-field { min-width: 0; }
.watch-field label { display: block; margin-bottom: 5px; color: #a9b9b4; font-size: 8px; font-weight: 600; line-height: 1.4; letter-spacing: .13em; }
.watch-field select { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 28px 10px 11px; border: 1px solid #ffffff29; border-radius: 10px; color: #e5e9df; background: #1a2026; font-size: 16px; }
.watch-scene-field select { color: #d8ceeb; }
.watch-film-help { grid-column: 1 / -1; margin: -3px 0 0; color: #a6b6b0; font-size: 10px; line-height: 1.5; text-wrap: pretty; }
.watch-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 17px; min-width: 0; border-top: 1px solid var(--watch-line); padding-top: 2px; }
.watch-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #c6beb0; font-size: 11px; line-height: 1.3; }
.watch-links a > span { color: var(--watch-gold); }
.watch-links a:hover { color: #ede5d5; text-decoration: underline; text-underline-offset: 4px; }
#watch-game-link { color: var(--watch-sage); }
#watch-video-link { color: var(--watch-lilac); }
.watch-notice { min-width: 0; margin-top: -6px; }
#watch-status { margin: 0; color: var(--watch-gold); font-size: 12px; line-height: 1.55; }
#watch-status:empty { display: none; }
.watch-notice:has(#watch-status:empty):has(#watch-retry[hidden]) { display: none; }
#watch-retry { min-height: 44px; margin-top: 9px; padding: 8px 13px; border: 1px solid #e8d6b05c; border-radius: 9px; background: #e8d6b009; color: var(--watch-gold); font-size: 12px; }
.watch-native-audio { display: none; width: 100%; }
.watch-no-script { color: var(--watch-muted); font-size: 13px; }
.watch-no-script a { color: var(--watch-gold); text-decoration: underline; }

@media (max-width: 360px) {
  .watch-header { padding-inline: max(13px, env(safe-area-inset-left, 0px)) max(13px, env(safe-area-inset-right, 0px)); }
  .watch-brand { gap: 10px; font-size: 24px; }
  .watch-brand > span { padding-left: 10px; font-size: 8px; }
  .watch-header nav { gap: 16px; }
  .watch-header nav a { font-size: 11px; }
  .watch-shell { padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); gap: 8px; }
  .watch-stage { padding-inline: 18px; padding-bottom: 19px; border-radius: 16px; }
  .watch-stage-top { left: 14px; right: 14px; top: 14px; font-size: 7px; }
  #watch-title { font-size: 26px; }
  .watch-transport { gap: 3px; }
  .watch-transport button { min-height: 46px; }
  #watch-toggle { min-width: 64px; padding-inline: 12px; font-size: 12px; }
  .watch-tools { width: 116px; gap: 4px; }
  .watch-tools button { padding-inline: 5px; font-size: 9px; }
  .watch-control-row { gap: 6px; }
  .watch-settings { gap: 8px; }
  .watch-field select { padding-left: 9px; }
  .watch-links { gap: 0 13px; }
  .watch-links a { font-size: 10px; gap: 5px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .watch-entry { gap: 12px; padding-block: 0; }
  #watch-cover { width: 60px; max-width: 28%; border-radius: 6px; }
  #watch-title { font-size: 24px; line-height: 1.1; }
  #watch-start { min-height: 44px; min-width: 166px; padding-block: 9px; font-size: 12px; }
  .watch-stage-caption { margin-top: 12px; }
  #watch-film-title { margin-top: 7px; font-size: 10px; }
}
@media (min-width: 761px) {
  .watch-header { min-height: calc(70px + env(safe-area-inset-top, 0px)); padding-inline: max(28px, calc((100vw - 1184px) / 2)); }
  .watch-brand { font-size: 29px; gap: 17px; }
  .watch-brand > span { padding-left: 17px; font-size: 10px; }
  .watch-header-note { display: block; margin: 0 auto 0 26px; color: #8eaaa0; font-size: 8px; letter-spacing: .12em; }
  .watch-header nav { gap: 28px; }
  .watch-header nav a { font-size: 13px; }
  .watch-shell { padding: 23px 28px 22px; gap: 16px; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .7fr); grid-template-rows: auto auto auto; }
  .watch-stage { grid-column: 1 / -1; height: auto; aspect-ratio: 16 / 8.4; max-height: 64dvh; min-height: 340px; padding: 62px 32px 28px; border-radius: 23px; }
  .watch-stage-top { top: 23px; left: 27px; right: 27px; font-size: 9px; }
  .watch-shot { max-width: 45%; padding: 6px 11px; font-size: 10px; }
  .watch-entry { gap: 18px; }
  #watch-cover { width: 116px; max-width: 25%; border-radius: 9px; }
  #watch-start { min-height: 50px; min-width: 190px; font-size: 14px; }
  #watch-album { margin-bottom: 8px; font-size: 10px; }
  #watch-title { max-width: 78%; font-size: clamp(34px, 4vw, 51px); }
  #watch-film-title { margin-top: 10px; font-size: 12px; }
  .watch-console { grid-column: 1; grid-row: 2; max-width: 680px; padding-right: 18px; }
  .watch-progress { gap: 14px; }
  .watch-progress > span { font-size: 11px; min-width: 35px; }
  .watch-control-row { padding-top: 4px; }
  .watch-transport { gap: 11px; }
  .watch-transport button { min-height: 49px; }
  #watch-toggle { min-width: 90px; }
  .watch-tools { width: 155px; gap: 7px; }
  .watch-tools button { font-size: 11px; }
  .watch-settings { grid-column: 2; grid-row: 2 / 4; grid-template-columns: minmax(0, 1fr); gap: 13px; align-content: start; padding: 7px 0 0 24px; border-left: 1px solid var(--watch-line); }
  .watch-field label { font-size: 9px; margin-bottom: 6px; }
  .watch-field select { min-height: 47px; }
  .watch-film-help { margin-top: -3px; font-size: 11px; }
  .watch-links { grid-column: 1; grid-row: 3; gap: 0 27px; padding: 0; border: 0; }
  .watch-links a { font-size: 12px; }
  .watch-notice { grid-column: 1 / -1; margin-top: -4px; }
  .watch-native-audio, .watch-no-script { grid-column: 1 / -1; }
}
@media (min-width: 1200px) and (min-height: 760px) {
  .watch-stage { min-height: 460px; aspect-ratio: 16 / 8; }
  .watch-entry-note { display: block; margin: -4px 0 0; color: #c5cecbc9; font-size: 10px; letter-spacing: .01em; }
  .watch-entry { gap: 20px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .watch-header { min-height: calc(46px + env(safe-area-inset-top, 0px)); padding-inline: max(13px, env(safe-area-inset-left, 0px)) max(13px, env(safe-area-inset-right, 0px)); }
  .watch-brand { font-size: 24px; }
  .watch-header-note { display: none; }
  .watch-header nav a { min-height: 44px; font-size: 11px; }
  .watch-shell { grid-template-columns: minmax(0, 1fr) 276px; grid-template-rows: auto auto auto auto; align-content: start; gap: 8px 14px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .watch-stage { grid-column: 1; grid-row: 1 / 5; align-self: start; min-height: calc(100dvh - 66px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); height: auto; max-height: none; aspect-ratio: auto; padding: 48px 20px 19px; border-radius: 15px; }
  .watch-stage-top { left: 15px; right: 15px; top: 13px; font-size: 7px; }
  .watch-stage-caption { margin-top: 13px; }
  #watch-title { max-width: 100%; font-size: clamp(23px, 3.6vw, 36px); }
  #watch-album { font-size: 8px; margin-bottom: 6px; }
  #watch-film-title { margin-top: 7px; font-size: 10px; }
  .watch-shot { max-width: 50%; padding: 5px 8px; font-size: 8px; }
  .watch-entry { gap: 13px; padding-block: 0; }
  #watch-cover { width: 72px; max-width: 27%; border-radius: 7px; }
  #watch-start { min-height: 44px; min-width: 165px; padding: 9px 17px; font-size: 12px; }
  .watch-entry-note { display: none; }
  .watch-console { grid-column: 2; grid-row: 1; padding: 0; }
  .watch-progress { gap: 8px; }
  .watch-progress > span { font-size: 9px; min-width: 28px; }
  .watch-control-row { gap: 6px; padding: 0; }
  .watch-transport { gap: 3px; }
  .watch-transport button { min-height: 44px; }
  .watch-step { width: 40px; }
  #watch-toggle { min-width: 62px; padding: 9px 10px; font-size: 12px; }
  .watch-tools { width: 113px; gap: 4px; }
  .watch-tools button { min-height: 44px; font-size: 9px; padding: 5px; }
  .watch-settings { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 3px 0 0; border: 0; }
  .watch-field label { font-size: 8px; margin-bottom: 4px; }
  .watch-field select { min-height: 44px; padding-block: 8px; }
  .watch-film-help { font-size: 9px; }
  .watch-links { grid-column: 2; grid-row: 3; gap: 0 14px; border-top: 1px solid var(--watch-line); }
  .watch-links a { min-height: 44px; font-size: 10px; }
  .watch-notice { grid-column: 2; grid-row: 4; margin-top: -6px; }
  #watch-status { font-size: 10px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  #watch-cover { display: none; }
  .watch-settings { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 8px; }
  .watch-field select { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .watch-stage, .watch-tools button, .watch-field select { border-color: CanvasText; }
  .watch-stage-shade { background: transparent; }
  .watch-stage-caption, .watch-stage-top { background: Canvas; color: CanvasText; }
  #watch-title, #watch-album, #watch-film-title, .watch-shot { color: CanvasText; text-shadow: none; }
  #watch-start, #watch-toggle { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
}

@media (max-height: 620px) and (orientation: portrait) {
  #watch-cover { display: none; }
  #watch-title { font-size: 22px; line-height: 1.12; }
  .watch-stage { padding-bottom: 19px; }
}

@media (min-width: 761px) and (max-height: 759px) and (min-height: 541px) {
  #watch-cover { width: 72px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 541px) {
  .watch-stage { padding-top: 54px; }
  .watch-entry { flex-direction: row; justify-content: center; gap: 17px; }
  #watch-cover { width: 64px; }
  #watch-title { max-width: 100%; font-size: clamp(30px, 3.4vw, 37px); }
}
@media (min-height: 701px) and (max-height: 780px) and (orientation: portrait) {
  #watch-cover { width: 80px; }
}
@media (max-width: 360px) and (max-height: 700px) and (orientation: portrait) {
  #watch-cover { display: none; }
}

/* CAM CINEMA — a tactile, game-style player around the music. */
:root { --watch-sage:#e8d6b0; --watch-bg:#090c11; --watch-panel:#131a22; --watch-line:#d8e4f51f; }
body { background:radial-gradient(ellipse at 50% 0,#23314644,transparent 62%),#090c11; }
.watch-theater { display:contents; }
.watch-brand > span { color:var(--watch-gold); letter-spacing:.24em; }
.watch-stage { border-radius:12px; border-color:#d5c3a750; background:#080c13; box-shadow:0 25px 90px #0009,0 0 0 4px #ffffff03; }
.watch-stage::before { display:none; }
.watch-stage::after { content:''; position:absolute; z-index:2; inset:0; border:1px solid var(--film-accent); opacity:calc(.09 + var(--film-energy,0) * .19); pointer-events:none; border-radius:inherit; }
.watch-stage-top { top:17px; right:120px; align-items:flex-start; flex-direction:column; gap:6px; font-size:8px; letter-spacing:.16em; }
.watch-shot { border:0; padding:0; max-width:100%; background:none; color:#d4d9e1; font:9px/1.4 ui-monospace,monospace; letter-spacing:.08em; }
.watch-stage-top i { width:5px;height:5px; border-radius:1px; }
.watch-screen-actions { position:absolute;right:12px;top:12px;z-index:8;display:flex;gap:7px; }
.watch-screen-actions button { min-height:44px;min-width:76px;padding:10px 13px;border:1px solid #e8d6b05e;border-radius:7px;background:#0b111cdc;backdrop-filter:blur(12px);color:#f0e2c5;font-size:11px;font-weight:650; }
.watch-screen-actions button:hover { border-color:#eedbb6;background:#26303c; }
#watch-fullscreen::before { content:'⛶';margin-right:6px;font-size:16px;vertical-align:-1px; }
#watch-title { font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.008em;line-height:1.04;font-size:clamp(27px,6.8vw,40px); }
#watch-album { color:var(--film-accent);letter-spacing:.2em; }
#watch-film-title { color:#c1cbd7;font-size:11px;line-height:1.5; }
#watch-start { border-radius:7px;background:linear-gradient(120deg,#f5e5c0,#d2ad70);border:1px solid #ffeaca;box-shadow:0 4px 0 #705733,0 15px 38px #0007;color:#1c1b19;text-transform:uppercase;letter-spacing:.09em;font-size:11px;min-width:188px; }
#watch-start:hover:not(:disabled) { background:linear-gradient(120deg,#fff1d5,#edcc8d); }
#watch-toggle { border-radius:7px;background:#e5d1a8;border-color:#f1dfb8;color:#201e1a; }
.watch-tools button,.watch-field select { border-radius:7px;background:#111923; }
.watch-field label { color:#d4c9b6;letter-spacing:.16em; }
.watch-original-video,.watch-original-film { position:absolute;inset:0;z-index:0;width:100%;height:100%;border:0;object-fit:contain;background:#080511; }
.watch-original-film { pointer-events:none; }
body[data-film=blue] .watch-stage-shade,body[data-film=slow] .watch-stage-shade { background:linear-gradient(180deg,#05070d73,transparent 18%,transparent 62%,#05070d9c); }
body[data-film=blue] .watch-tools { grid-template-columns:1fr;width:66px; }
.watch-reveal { position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:transparent;z-index:2;cursor:grab;touch-action:none; }
.watch-reveal:active { cursor:grabbing; }
.watch-reveal:focus-visible { outline:2px solid #e8d6b0;outline-offset:-8px; }
body[data-cinema=true] { overflow:hidden; }
body[data-cinema=true] #watch-theater { position:fixed;inset:0;width:100%;height:100%;height:100dvh;z-index:1000;display:block;background:#080c13;isolation:isolate; }
body[data-cinema=true] .watch-stage { position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;margin:0;border:0;border-radius:0;padding:max(82px,calc(env(safe-area-inset-top,0px) + 70px)) max(24px,env(safe-area-inset-right,0px)) max(155px,calc(env(safe-area-inset-bottom,0px) + 145px)) max(24px,env(safe-area-inset-left,0px));box-shadow:none;touch-action:none; }
body[data-cinema=true] .watch-stage::after { display:none; }
body[data-cinema=true] .watch-screen-actions { top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px)); }
body[data-cinema=true] .watch-stage-top { top:max(24px,calc(env(safe-area-inset-top,0px) + 12px));left:max(24px,env(safe-area-inset-left,0px));right:210px; }
body[data-cinema=true] .watch-stage-caption { position:absolute;left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px));bottom:max(136px,calc(env(safe-area-inset-bottom,0px) + 126px));width:auto;margin:0; }
body[data-cinema=true] #watch-title { max-width:850px;font-size:clamp(25px,5.6vw,54px); }
body[data-cinema=true] #watch-film-title { max-width:65ch; }
body[data-cinema=true] .watch-console { position:absolute;z-index:7;bottom:0;left:0;right:0;width:100%;max-width:none;margin:0;padding:45px max(22px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,#080c13e8 36%,#080c13fa);border:0;border-radius:0; }
body[data-cinema=true] .watch-control-row { padding-top:0; }
body[data-cinema=true] #watch-seek { accent-color:#e9d3a3; }
body[data-cinema=true] .watch-entry { max-width:420px;margin:auto; }
body[data-cinema=true] #watch-cover { width:100px;max-width:30%; }
body[data-cinema=true] .watch-original-video { object-fit:cover; }
body[data-cinema=true][data-video-fit=contain] .watch-original-video { object-fit:contain; }
body[data-cinema=true] .watch-console,body[data-cinema=true] .watch-stage-caption,body[data-cinema=true] .watch-stage-top,body[data-cinema=true] .watch-stage-shade { transition:opacity .3s ease; }
body[data-cinema=true][data-cinema-controls=hidden] .watch-console,body[data-cinema=true][data-cinema-controls=hidden] .watch-stage-caption,body[data-cinema=true][data-cinema-controls=hidden] .watch-stage-top,body[data-cinema=true][data-cinema-controls=hidden] .watch-stage-shade { opacity:0;pointer-events:none; }
body[data-cinema=true][data-cinema-controls=hidden] .watch-screen-actions { opacity:.45; }
body[data-cinema=true] .watch-screen-actions:hover,body[data-cinema=true] .watch-screen-actions:focus-within { opacity:1; }
@media(min-width:761px){#watch-title{font-size:clamp(34px,4vw,51px)}.watch-stage-top{top:23px;left:27px}.watch-screen-actions{top:18px;right:20px}}
@media(max-width:360px){#watch-title{font-size:24px}#watch-film-title{font-size:10px}.watch-stage-top{font-size:7px;right:110px}.watch-screen-actions button{font-size:10px;min-width:72px;padding-inline:9px}}
@media(max-height:620px) and (orientation:portrait){#watch-title{font-size:21px}.watch-stage-caption{margin-top:12px}.watch-stage{padding-top:66px}.watch-entry{padding-block:0}}
@media(max-height:540px) and (orientation:landscape){body[data-cinema=true] .watch-console{padding-top:22px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}body[data-cinema=true] .watch-stage-caption{bottom:115px}body[data-cinema=true] #watch-title{font-size:27px}body[data-cinema=true] #watch-film-title{display:none}body[data-cinema=true] .watch-entry{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:auto}body[data-cinema=true] #watch-cover{display:none}body[data-cinema=true] .watch-stage-top{right:220px}}
@media(prefers-reduced-motion:reduce){body[data-cinema=true] .watch-console,body[data-cinema=true] .watch-stage-caption{transition:none}}
.watch-shot::after { content:'';display:block;margin-top:7px;height:2px;width:92px;transform-origin:left;transform:scaleX(var(--shot-progress,0));background:var(--film-accent);box-shadow:0 0 12px var(--film-accent); }
body:is([data-film=blue],[data-film=slow]) .watch-shot::after { display:none; }
#watch-seek { appearance:none;-webkit-appearance:none;outline-offset:0; }
#watch-seek::-webkit-slider-runnable-track { height:3px;border-radius:2px;background:linear-gradient(to right,#e5d1a8 var(--song-progress,0%),#ffffff29 var(--song-progress,0%)); }
#watch-seek::-webkit-slider-thumb { -webkit-appearance:none;width:14px;height:14px;border-radius:50%;border:2px solid #fff1cd;background:#d1b77e;margin-top:-5.5px;box-shadow:0 0 14px #e8d6b03d; }
#watch-seek::-moz-range-track { height:3px;background:#ffffff29; }
#watch-seek::-moz-range-progress { height:3px;background:#e5d1a8; }
#watch-seek::-moz-range-thumb { width:12px;height:12px;border-radius:50%;border:2px solid #fff1cd;background:#d1b77e; }
/* Film titles and the song's actual energy become part of the interface. */
.watch-sequence{position:absolute;z-index:3;left:8%;right:8%;top:42%;pointer-events:none;opacity:0;transform:translate3d(0,18px,0);transition:opacity .65s ease,transform .85s cubic-bezier(.2,.7,.3,1);color:var(--film-accent);text-shadow:0 3px 30px #000;}
.watch-sequence[data-visible=true]{opacity:1;transform:translate3d(0,var(--sequence-drift,0px),0)}
.watch-sequence>span:first-child{display:block;font:9px/1.4 ui-monospace,monospace;letter-spacing:.32em;margin-bottom:10px}
.watch-sequence strong{display:block;max-width:16ch;color:#fff4e3;font:700 clamp(27px,4.8vw,64px)/1.03 Impact,'Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.025em}
.watch-sequence-line{display:block;width:70px;height:2px;margin-top:16px;background:var(--film-accent);box-shadow:0 0 20px var(--film-accent);transform-origin:left;transform:scaleX(calc(.45 + var(--film-energy,0) * .55))}
.watch-signal{position:absolute;z-index:3;right:22px;bottom:26px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;color:var(--film-accent);opacity:.85;transition:opacity .3s}
.watch-signal>span{font:7px/1.2 ui-monospace,monospace;letter-spacing:.2em}
#watch-signal-bars{height:24px;display:flex;gap:3px;align-items:center}
#watch-signal-bars i{display:block;width:2px;height:24px;background:var(--film-accent);transform:scaleY(.12);box-shadow:0 0 7px color-mix(in srgb,var(--film-accent) 20%,transparent);will-change:transform}
body:not([data-playback=playing]) .watch-sequence,body:not([data-playback=playing]) .watch-signal,body:not([data-film=interactive]) .watch-sequence,body:not([data-film=interactive]) .watch-signal{display:none}
body[data-cinema=true] .watch-signal{right:max(24px,env(safe-area-inset-right,0px));bottom:max(148px,calc(env(safe-area-inset-bottom,0px) + 138px))}
body[data-cinema=true][data-cinema-controls=hidden] .watch-signal{opacity:0}
@media(max-width:760px){.watch-signal{right:20px;bottom:auto;top:78px}.watch-sequence{left:8%;top:38%}.watch-sequence strong{font-size:clamp(30px,9vw,50px)}body[data-cinema=true] .watch-signal{bottom:auto;top:max(82px,calc(env(safe-area-inset-top,0px) + 70px))}}
@media(prefers-reduced-motion:reduce){.watch-sequence{display:none!important}#watch-signal-bars i{will-change:auto}}
@media(max-height:700px){
 body:not([data-cinema=true]) .watch-stage{min-height:340px}
 body:not([data-cinema=true]) .watch-entry{flex-direction:row;justify-content:center;gap:16px;padding-block:0}
 body:not([data-cinema=true]) #watch-cover{width:60px;max-width:22%}
 body:not([data-cinema=true]) #watch-start{min-height:44px}
}
@media(max-height:540px) and (orientation:landscape){body[data-cinema=true] .watch-entry{top:34%}}