/* Shared, hand-authored partner skin for the hardware deck, the
   film-foundation deck and the Audience Access Program sheet. Like the
   website it has two looks: cream paper by default, the dark theater when the
   visitor chose it on cinemacc.net (<html data-theme="dark">, set by the head
   script every page carries). System type, one accent, rounded fills instead
   of boxes. Keep the tokens aligned with websites/cinemacc/styles.css; each
   page keeps its own layout rules.
   As in the deck styles, --ink means surface and --paper means text. */
:root {
  --ink: #f2e4d3;
  --ink-soft: #ead8c1;
  --surface: #f8eedf;
  --cell: #ead8c1;
  --cell-raised: #fff7e9;
  --paper: #202022;
  --paper-76: #383632;
  --paper-72: #383632;
  --paper-58: #514b44;
  --paper-56: #514b44;
  --paper-42: #62594f;
  --paper-40: #62594f;
  --paper-28: #6f665c;
  --paper-24: #6f665c;
  --line: #d6c4ad;
  --line-strong: #a8937b;
  --caption: #234cbd;
  --hud: #276243;
  --warn: #a43f2d;
  --control-fill: rgba(32, 32, 34, 0.06);
  --control-fill-strong: rgba(32, 32, 34, 0.11);
  --control-glass: color-mix(in srgb, var(--ink) 88%, transparent);
  --track: rgba(32, 32, 34, 0.08);
  --selection-bg: #234cbd;
  --qr-shadow: 0 18px 44px rgba(74, 52, 30, 0.22);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Labels used to be tracked monospace capitals; they are plain sans now. */
  --mono: var(--sans);
  --fs-mono: clamp(11px, 0.78vw, 13px);
}
:root[data-theme="dark"] {
  --ink: #000;
  --ink-soft: #101012;
  --surface: #101012;
  --cell: #1c1c1e;
  --cell-raised: #2c2c2e;
  --paper: #f5f5f7;
  --paper-76: rgba(245, 245, 247, 0.78);
  --paper-72: rgba(245, 245, 247, 0.74);
  --paper-58: rgba(245, 245, 247, 0.64);
  --paper-56: rgba(245, 245, 247, 0.62);
  --paper-42: rgba(245, 245, 247, 0.52);
  --paper-40: rgba(245, 245, 247, 0.5);
  --paper-28: rgba(245, 245, 247, 0.42);
  --paper-24: rgba(245, 245, 247, 0.38);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --caption: #d6b35a;
  --hud: #7ce2a1;
  --warn: #e08d6d;
  --control-fill: rgba(255, 255, 255, 0.08);
  --control-fill-strong: rgba(255, 255, 255, 0.14);
  --control-glass: color-mix(in srgb, #171719 88%, transparent);
  --track: rgba(255, 255, 255, 0.06);
  --selection-bg: rgba(214, 179, 90, 0.4);
  --qr-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
body { font-family: var(--sans); }
::selection { background: var(--selection-bg); color: #fff; }
a:focus-visible, button:focus-visible, #language-control:focus-visible { outline: 2px solid var(--caption); outline-offset: 4px; }

.control, .slide-note, .slide-count, .opening-kicker, .experience-copy > span, .ideal-brief > span,
.story-band > span, .technology-arc article > span, .cinemacc-era > span, .regulation-meta small,
.market-opportunity h3, .opportunity-total > span, .flow-state > span, .collaboration-landscape > span,
.evidence-bar b, .route-legend span, .device-panel > div span, .acceptance-line span, .proof-column > span,
.sheet-controls button, .sheet-eyebrow, .pair-table h3, .formula-line em, .milestones span, .acceptance > span {
  letter-spacing: 0;
  text-transform: none;
}
.source-link { letter-spacing: 0; }

/* Headlines read like the app's bilingual cue: the setup dim, the point lit. */
.slide h2, .opening-copy h1, .sheet-head h1 { font-weight: 600; letter-spacing: -0.034em; }
html[lang="zh-CN"] :is(.slide h2, .opening-copy h1, .sheet-head h1) { letter-spacing: 0; }
.slide h2:has(> span), .sheet-head h1:has(> span) { color: var(--paper-42); }
.slide h2 span, .sheet-head h1 span { color: var(--paper); }
.opening-line { color: var(--paper-42); }
.opening-line.opening-accent { color: var(--paper); }

/* Presenter controls are glass pills, like the app's chrome. */
.deck-controls, .sheet-controls { gap: 8px; }
.control, #language-control, .sheet-controls button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--control-fill);
  box-shadow: none;
  color: var(--paper-72);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 160ms ease, color 160ms ease;
}
.control:hover, #language-control:hover, .sheet-controls button:hover { background: var(--control-fill-strong); color: var(--paper); border-color: transparent; }
.progress { height: 2px; background: var(--track); }
.progress div { background: var(--caption); }
.slide-count span:first-child { color: var(--paper); }
.logo-mark img { filter: none; opacity: 1; border-radius: 4px; }

/* The complete opening film sits beside the title; on phones the title
   leads, then the same uncropped frame. No text overlays the footage. */
.opening-slide {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 100dvh;
  padding: 90px var(--gutter-x) 80px;
}
.opening-slide .slide-frame { grid-column: 1; grid-row: 1; display: block; width: 100%; min-height: 0; margin: 0; padding: 0; }
.opening-slide .slide-head, .opening-slide .slide-foot { display: none; }
.opening-slide .slide-body { display: block; padding: 0; }
.opening-copy { gap: 22px; padding: 0; }
.opening-copy h1, html[lang="zh-CN"] .opening-copy h1 { max-width: 100%; font-size: clamp(40px, 4.2vw, 68px); line-height: 1.06; }
html[lang="zh-CN"] .opening-copy h1 { line-height: 1.22; }
.opening-kicker { color: var(--paper-56); font-size: clamp(14px, 1vw, 17px); font-weight: 500; line-height: 1.5; }
.opening-visual {
  position: relative;
  z-index: 0;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 24px);
  background: #000;
  box-shadow: 0 0 0 1px var(--line);
}
.opening-visual::after { display: none; }
.opening-visual :is(video, img) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
  animation: none;
}

/* Panels are rounded fills; photographs and real displays stay untouched. */
.experience-panel, .device-panel, .flow-state { border-color: transparent; border-radius: 20px; background: var(--surface); overflow: hidden; }
.needed-state { border: 1px solid color-mix(in srgb, var(--caption) 32%, transparent); background: color-mix(in srgb, var(--caption) 6%, var(--surface)); }
.experience-panel figure, .device-panel figure { border-radius: 12px; }
.phone-ledger figure { background: transparent; }
.feedback-card-surface { border-color: var(--line); border-radius: 14px; background: var(--cell); }
.feedback-card:hover .feedback-card-surface, .feedback-card:focus-visible .feedback-card-surface { background: var(--cell-raised); }
.adjacent-stack button::after { border-radius: 8px; background: var(--cell); }
.problem-figure, .gap-figure { border-radius: 16px; overflow: hidden; }
.formula { border-radius: 14px; background: var(--cell); }
.contact-slide::before { display: none; }

/* The WeChat code ships as white modules on transparency; scanners read it
   most reliably as dark modules on white. */
/* contact.css loads after this file and paints the card with --ink (black
   here); the white card must win, or the inverted code is black on black. */
.wechat-contact .wechat-qr { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--qr-shadow); }
.wechat-qr img { filter: invert(1); mix-blend-mode: normal; }

.sheet { padding-top: 90px; }

/* On cream, photographs keep their own darkness: captions over footage stay
   light on a dark fade, as they were on the cream decks before. */
:root:not([data-theme="dark"]) .gap-figure::after { background: linear-gradient(0deg, #101011d9, transparent 65%); }
:root:not([data-theme="dark"]) :is(.gap-figure figcaption strong, .gap-figure figcaption span, .foreign-caption span) { color: #f2e4d3; }
:root:not([data-theme="dark"]) .problem-figure::after { display: none; }
/* The phone language button floats over slides as glass of the page colour. */
@media (max-width: 680px) {
  #language-control { background: var(--control-glass); }
}
/* Charts print in the cream look's spot inks. */
:root:not([data-theme="dark"]) .gantt-rows i { background: #b9c7e8; border-left-color: var(--caption); }
:root:not([data-theme="dark"]) .gantt-rows article.is-live i { background: #b9d3bc; }
:root:not([data-theme="dark"]) :is(.adjacent-stack button:nth-child(1), .adjacent-legend > div:nth-child(1) i) { background: #234cbd; }
:root:not([data-theme="dark"]) :is(.adjacent-stack button:nth-child(2), .adjacent-legend > div:nth-child(2) i) { background: #ca5945; }
:root:not([data-theme="dark"]) :is(.adjacent-stack button:nth-child(3), .adjacent-legend > div:nth-child(3) i) { background: #202022; }
:root:not([data-theme="dark"]) :is(.adjacent-stack button:nth-child(4), .adjacent-legend > div:nth-child(4) i) { background: #688878; }

@media (max-width: 900px) {
  .market-opportunity { grid-template-columns: minmax(0, 1fr); }
  .cinema-model, .adjacent-model { grid-template-columns: minmax(0, 1fr); }
  .opening-slide { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; gap: 30px; padding: 88px 22px 76px; }
  .opening-slide .slide-frame { grid-column: 1; grid-row: 1; padding: 0; min-height: 0; }
  .opening-visual { grid-column: 1; grid-row: 2; width: 100%; max-width: none; margin: 0; aspect-ratio: 16 / 9; }
  .opening-copy h1, html[lang="zh-CN"] .opening-copy h1 { font-size: clamp(36px, 8.5vw, 58px); }
  .sheet-head h1 { overflow-wrap: anywhere; }
  .sheet-controls { position: absolute; }
}
@media (max-width: 420px) {
  .opportunity-total > div { grid-template-columns: repeat(5, auto); }
  .opportunity-total strong { grid-column: 2 / -1; }
}
@media print {
  /* Paper is white whichever look is on screen. */
  :root, :root[data-theme="dark"] {
    --ink: #fff; --ink-soft: #f4f4f4; --surface: #f4f4f4; --cell: #ececec; --cell-raised: #f7f7f7; --paper: #111;
    --caption: #234cbd; --hud: #1f6b45; --warn: #9a4a24;
    --paper-76: rgba(17, 17, 17, 0.78); --paper-72: rgba(17, 17, 17, 0.74); --paper-58: rgba(17, 17, 17, 0.64); --paper-56: rgba(17, 17, 17, 0.62);
    --paper-42: rgba(17, 17, 17, 0.52); --paper-40: rgba(17, 17, 17, 0.5); --paper-28: rgba(17, 17, 17, 0.42); --paper-24: rgba(17, 17, 17, 0.38);
    --line: #ddd; --line-strong: #bbb;
  }
  /* The foreign caption keeps its own dark plate on paper, as in the cream look. */
  .foreign-caption span { color: #f2e4d3; }
  .opening-slide { padding: 40px; }
  .opening-visual { box-shadow: none; }
  .sheet { padding: 0; }
}