/* Satin silver editorial presentation. Load after style.css and cinema.css. */
body.cinema-ui {
  --paper: #bfc8c5;
  --surface: #d6ded7;
  --panel: #d6ded7;
  --ink: #243e42;
  --muted: #4d6366;
  --faint: #556b68;
  --line: #c3cfc8;
  --green: #326662;
  --soft: #ccd7cf;
  --blue: #557b92;
  --plum: #897695;
  --ochre: #a86846;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --cinema-cyan: #346f73;
  --cinema-brass: #ab6949;
  --cinema-hairline: rgb(72 103 108 / 17%);
  --cinema-glass: linear-gradient(145deg, rgb(214 222 215 / 94%), rgb(209 219 213 / 88%));
  --cinema-ease: cubic-bezier(.22, .75, .28, 1);
  --atelier-shadow: 0 20px 55px -33px rgb(38 75 81 / 25%), 0 2px 5px rgb(55 86 91 / 4%);
  color-scheme: light;
  background:
    radial-gradient(ellipse at 76% 0%, rgb(202 215 214 / 93%), transparent 47%),
    radial-gradient(ellipse at 96% 38%, rgb(204 208 212 / 65%), transparent 40%),
    radial-gradient(ellipse at 42% 78%, rgb(197 214 204 / 63%), transparent 48%),
    radial-gradient(ellipse at 18% 12%, rgb(214 209 197 / 66%), transparent 39%),
    linear-gradient(135deg, #d5dbd3, #d0dad5 56%, #d5dad2);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
body.cinema-ui::before {
  opacity: .034;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.69' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23243e42' filter='url(%23n)' opacity='.6' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
body.cinema-ui::after {
  background: linear-gradient(180deg, rgb(214 222 217 / 30%), transparent 42%);
  background-size: auto;
  mask-image: none;
}
body.cinema-ui ::selection { color: #1a464b; background: #c2d3cf; }
body.cinema-ui :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #387a83;
  outline-offset: 4px;
}
body.cinema-ui .app { grid-template-columns: 222px minmax(0, 1fr); }
body.cinema-ui .main-shell { background: transparent; }
body.cinema-ui .sidebar {
  padding: 38px 23px 26px;
  background: linear-gradient(160deg, rgb(214 220 212 / 83%), rgb(206 217 211 / 66%));
  border-color: rgb(105 130 128 / 17%);
  box-shadow: 9px 0 34px -30px rgb(29 65 69 / 18%);
  backdrop-filter: blur(20px);
}
body.cinema-ui .brand { gap: 13px; margin-bottom: 54px; }
body.cinema-ui .brand-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 42px;
  color: #7b533c;
  background: transparent;
  border-radius: 0;
}
body.cinema-ui .brand > span + span {
  color: #29474b;
  font: 400 19px/1.3 var(--serif);
  letter-spacing: -.4px;
}
body.cinema-ui .brand small { color: #505f5f; font: 500 9px/1.65 var(--font); letter-spacing: 1px; }
body.cinema-ui .sidebar-label { color: #515f5c; font-size: 10px; letter-spacing: 1.6px; }
body.cinema-ui .sidebar nav { gap: 7px; }
body.cinema-ui .nav-button {
  min-height: 48px;
  color: #4d5f61;
  border-radius: 10px;
  font-size: 13px;
  border-color: transparent;
  padding: 13px 12px;
}
body.cinema-ui .nav-button .nav-icon { color: #4e5f5f; }
body.cinema-ui .nav-button:hover { color: #27565a; background: rgb(214 222 217 / 63%); }
body.cinema-ui .nav-button.active {
  color: #265b5e;
  background: linear-gradient(115deg, #d6ddd7, #d0dbd5);
  border-color: rgb(117 151 148 / 23%);
  box-shadow: 0 6px 16px -10px rgb(40 80 79 / 26%), inset 2px 0 0 #ad7858, inset 0 1px 0 #d6ded9;
}
body.cinema-ui .nav-button.active .nav-icon { color: #346463; }
body.cinema-ui .sidebar-rule { border-color: #c4d0c8; }
body.cinema-ui :is(.sidebar-bottom, .sidebar-edition) { color: #525f5b; }
body.cinema-ui .sidebar-edition strong { color: #46625c; }
body.cinema-ui .sidebar-bottom :is(a, button) { color: #49615c; }
body.cinema-ui :is(.private-label, .private-dot) { color: #505f5c; }
body.cinema-ui :is(.private-label i, .private-dot::before) { background: #ab785a; }
body.cinema-ui .topbar {
  height: 74px;
  background: rgb(214 221 215 / 53%);
  border-color: rgb(91 122 128 / 15%);
  backdrop-filter: blur(18px);
}
body.cinema-ui .topbar-path { color: #4a6164; font-size: 10px; letter-spacing: 1.35px; }
body.cinema-ui .topbar-path span { color: #575e5d; }
body.cinema-ui .freshness { color: #4d5f5f; font-size: 11px; }
body.cinema-ui .freshness i { background: #659589; box-shadow: 0 0 0 4px rgb(104 156 140 / 9%); }
body.cinema-ui .workspace { padding: 43px clamp(26px, 3.5vw, 60px) 37px; }
body.cinema-ui .page-heading { margin-bottom: 29px; }
body.cinema-ui .page-heading::after { display: none; }
body.cinema-ui .eyebrow { color: #496161; letter-spacing: 1.7px; }
body.cinema-ui .eyebrow-rule { background: #b67d59; }
body.cinema-ui .page-heading h1 {
  color: #29494e;
  font-family: var(--serif);
  font-size: clamp(44px, 4.5vw, 73px);
  line-height: 1.12;
  letter-spacing: -.05em;
  margin: 13px 0 12px;
}
body.cinema-ui :is(.page-heading p, #sender-subtitle) { color: #4c5f62; font-size: 14px; line-height: 1.7; }
body.cinema-ui .button {
  min-height: 42px;
  padding: 10px 16px;
  color: #385e62;
  background: linear-gradient(135deg, #d6ded7, #ced9d4);
  border: 1px solid #bbcac5;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 #d6ded9, 0 5px 12px -9px rgb(33 79 87 / 27%);
  font-size: 12px;
}
body.cinema-ui .button:hover { color: #214f55; background: #cbd8d2; border-color: #89afad; }
body.cinema-ui :is(.button.subtle, .button.focus-button) { background: rgb(214 222 217 / 53%); }
body.cinema-ui .button.dark { color: #5a5d5b; background: #38696b; border-color: #38696b; }
body.cinema-ui .button.dark:hover { background: #2a565b; border-color: #2a565b; }
body.cinema-ui .text-button { color: #346466; font-size: 12px; }
body.cinema-ui .text-button:hover { color: #825035; }
body.cinema-ui .sender-tabs { gap: 5px; border-color: #c0cfc9; }
body.cinema-ui .sender-tab { color: #4c6062; font-size: 12px; border-radius: 9px 9px 0 0; }
body.cinema-ui .sender-tab small { color: #515f5e; font-size: 11px; }
body.cinema-ui .sender-tab:hover { color: #2e5b60; background: rgb(214 222 217 / 48%); }
body.cinema-ui .sender-tab.active { color: #235b60; background: rgb(214 222 217 / 72%); box-shadow: inset 0 -2px 0 #b27c59; }
body.cinema-ui .view-tools > :is(p, span) { color: #4d5f5f; font-size: 12px; }
body.cinema-ui .refine-button { background: rgb(214 222 217 / 55%); }
body.cinema-ui .refine-button[aria-expanded="true"] { color: #2d6569; border-color: #91b5b4; background: #ccd9d2; }
body.cinema-ui .clear-view { color: #79543e; background: #d5d9cf; border-color: #c8c5b7; }
body.cinema-ui .clear-view:hover { color: #73482e; background: #d3d4c9; border-color: #c59a77; }
body.cinema-ui .filters { background: rgb(214 221 214 / 88%); border-color: #c0cec6; border-radius: 12px; box-shadow: var(--atelier-shadow); }
body.cinema-ui :is(.search-label, .filter-selects label > span) { color: #476160; }
body.cinema-ui :is(.search-label input, .filter-selects select, .filter-selects input) { color: #284f54; }
body.cinema-ui input::placeholder { color: #515f5e; }
body.cinema-ui .reset-filters { color: #366465; background: #ced9d3; border-color: #b9c9c1; width: 40px; height: 40px; }
body.cinema-ui .active-filter-summary { color: #47625d; }
body.cinema-ui .filter-selects { border-color: #c1cfc8; }

/* The center instrument: a satin rim, engraved ticks and a quiet paper face. */
body.cinema-ui .stat-stage { padding: 7px 0 21px; margin: 7px 0 22px; isolation: isolate; }
body.cinema-ui .stat-stage-heading { gap: 15px; }
body.cinema-ui .stat-stage-heading h2 { color: #4d6062; font: 400 17px/1.5 var(--serif); letter-spacing: -.2px; }
body.cinema-ui .stat-stage-heading::before,
body.cinema-ui .stat-stage-heading::after { width: 34px; background: linear-gradient(90deg, transparent, #ab8a70); opacity: .6; }
body.cinema-ui .metric-dial-shell { min-height: 344px; gap: clamp(25px, 4vw, 64px); padding: 22px 0; margin-bottom: 11px; isolation: isolate; }
body.cinema-ui .metric-dial-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55px max(0px, calc(50% - 350px));
  background:
    radial-gradient(ellipse at 34% 47%, rgb(197 215 207 / 77%), transparent 45%),
    radial-gradient(ellipse at 67% 34%, rgb(199 211 214 / 77%), transparent 45%),
    radial-gradient(ellipse at 50% 75%, rgb(214 208 195 / 40%), transparent 43%);
  pointer-events: none;
}
body.cinema-ui .metric-dial { flex-basis: 290px; width: 290px; height: 290px; }
body.cinema-ui .metric-dial::before {
  inset: 0;
  z-index: -2;
  opacity: 1;
  background: conic-gradient(from 28deg, #ced9d4, #b5c6c2 13%, #d4ded9 25%, #c1cdca 37%, #d5d9cf 48%, #c4c6ba 59%, #d5ddd7 73%, #b6c9c3 85%, #ced9d4);
  border: 1px solid rgb(143 165 165 / 47%);
  box-shadow:
    0 30px 44px -29px rgb(36 81 87 / 47%),
    0 10px 15px -11px rgb(41 69 77 / 38%),
    inset 0 2px 2px #d6ded9,
    inset 0 -2px 5px rgb(93 127 130 / 22%);
}
body.cinema-ui .metric-dial::after {
  inset: 22px;
  z-index: -1;
  background: radial-gradient(circle at 37% 28%, #d6ded8, #d5dcd5 55%, #cfd9d1 100%);
  border: 1px solid rgb(129 154 154 / 26%);
  box-shadow: inset 0 2px 8px rgb(71 104 103 / 8%), inset 0 -1px 0 #d6ded9, 0 0 0 4px rgb(214 222 217 / 43%);
}
body.cinema-ui .dial-orbit { color: #446166; filter: drop-shadow(0 1px 0 rgb(214 222 217 / 94%)); }
body.cinema-ui .dial-orbit line { stroke: #537a7f; stroke-width: .9; opacity: .43; }
body.cinema-ui .dial-orbit line:nth-of-type(5n + 1) { stroke: #9b6645; stroke-width: 1.4; opacity: .83; }
body.cinema-ui .dial-orbit circle { stroke: #6e9699; opacity: .45; stroke-width: .8; }
body.cinema-ui .dial-orbit circle:nth-of-type(1) { stroke: #698a8f; stroke-width: 1; opacity: .6; }
body.cinema-ui .dial-orbit circle:nth-of-type(2) { stroke: #aa7b57; opacity: .42; }
body.cinema-ui .dial-orbit circle:nth-of-type(3) { stroke: #668983; opacity: .25; }
body.cinema-ui #metric-dial-value { inset: 34px; }
body.cinema-ui #metric-dial-value .metric-card { background: transparent; color: #2b4e52; border: 0; box-shadow: none; padding: 9px 0; }
body.cinema-ui #metric-dial-value .metric-label { color: #446264; font: 500 10px/1.6 var(--font); letter-spacing: 1.4px; max-width: 190px; }
body.cinema-ui #metric-dial-value .metric-value {
  color: #244f55;
  font: 500 74px/1.08 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
  margin: 14px 0 12px;
  text-shadow: 0 2px 0 #d6ded9;
}
body.cinema-ui #metric-dial-value .metric-note { color: #506060; font-size: 11px; line-height: 1.6; max-width: 194px; }
body.cinema-ui .dial-placeholder { color: #4c6060; font-size: 14px; }
body.cinema-ui .metric-cycle {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  color: #3a6366;
  background: linear-gradient(145deg, #d6ded7, #cbd7d0);
  border: 1px solid #b5c8c1;
  box-shadow: inset 0 1px 0 #d6ded9, 0 7px 15px -10px rgb(29 76 81 / 31%);
}
body.cinema-ui .metric-cycle:hover { color: #244f53; background: #c6d7cf; border-color: #80aba5; }
body.cinema-ui .dial-selectors { gap: 7px 10px; }
body.cinema-ui .dial-selectors button[data-dial] {
  min-height: 40px;
  padding: 9px 13px;
  color: #4d605f;
  background: rgb(214 222 215 / 35%);
  border-color: transparent;
  border-radius: 8px;
  font-size: 12px;
}
body.cinema-ui .dial-selectors button[data-dial]:hover { color: #326467; background: #d6ddd7; border-color: #c2cfc6; }
body.cinema-ui .dial-selectors button[data-dial].active { color: #2c6568; background: #d6ded8; border-color: #b8c9c2; box-shadow: 0 5px 13px -9px rgb(36 78 83 / 28%), inset 0 -2px 0 #b37b54; }
body.cinema-ui .dial-clear { min-height: 40px; color: #525f5d; font-size: 11px; margin-top: 8px; }
body.cinema-ui .dial-clear:hover { color: #805136; }
body.cinema-ui .dial-arriving { animation: atelier-dial-in 350ms ease both; }
body.cinema-ui .dial-leaving { animation: atelier-dial-out 350ms ease both; }
body.cinema-ui .dial-arriving .dial-orbit { animation: atelier-ring-in 350ms ease both; }
body.cinema-ui .dial-leaving .dial-orbit { animation: atelier-ring-out 350ms ease both; }

body.cinema-ui .record-launcher { margin-top: 32px; padding-top: 6px; }
body.cinema-ui .launcher-heading { margin-bottom: 18px; }
body.cinema-ui .launcher-heading h2 { color: #355d60; font-size: 25px; }
body.cinema-ui .launcher-heading :is(p, small) { color: #4d605d; font-size: 12px; }
body.cinema-ui .record-lenses { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
body.cinema-ui .record-lenses button[data-panel] {
  min-height: 136px;
  padding: 23px 21px;
  gap: 11px;
  color: #345c61;
  background: linear-gradient(140deg, rgb(214 222 215 / 95%), rgb(208 218 212 / 85%));
  border: 1px solid rgb(153 180 178 / 44%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #d6ded9, var(--atelier-shadow);
}
body.cinema-ui .record-lenses button[data-panel]:nth-child(2) { background: linear-gradient(140deg, #d6ded7, #cfd9d7); }
body.cinema-ui .record-lenses button[data-panel]:nth-child(3) { background: linear-gradient(140deg, #d6ded7, #d1d7d6); }
body.cinema-ui .record-lenses button[data-panel]:nth-child(4) { background: linear-gradient(140deg, #d6ded7, #d5d7ce); }
body.cinema-ui .record-lenses button[data-panel]:nth-child(5) { background: linear-gradient(140deg, #d6ded7, #cfd9d1); }
body.cinema-ui .record-lenses button[data-panel]::before { border-color: rgb(128 158 157 / 45%); width: 7px; height: 7px; top: 14px; right: 14px; }
body.cinema-ui .record-lenses button[data-panel]::after { background: #98b7b2; left: 21px; bottom: 0; height: 2px; width: 24px; border-radius: 2px; }
body.cinema-ui .record-lenses button[data-panel]:last-child::after { background: #b39270; }
body.cinema-ui .record-lenses :is(.lens-label, strong, b, h3) { color: #365a60; font: 400 20px/1.25 var(--serif); letter-spacing: -.5px; }
body.cinema-ui .record-lenses button[data-panel] :is(small, p) { color: #505f5b; font-size: 11px; line-height: 1.6; }
body.cinema-ui .record-lenses .lens-mark { color: #535f5c; font-size: 9px; letter-spacing: 1.5px; }
body.cinema-ui .record-lenses .lens-arrow { color: #4b615f; }
body.cinema-ui .record-lenses button[data-panel]:hover { transform: translateY(-4px); border-color: #97b8b2; background: #d6ded7; box-shadow: 0 17px 28px -21px rgb(26 83 82 / 33%), inset 0 1px 0 #d6ded9; }

/* Panels keep their existing content and become bright, comfortable reading surfaces. */
body.cinema-ui .panel {
  background: linear-gradient(145deg, rgb(214 222 215 / 96%), rgb(210 220 214 / 91%));
  border-color: rgb(150 175 173 / 34%);
  border-radius: 17px;
  box-shadow: var(--atelier-shadow), inset 0 1px 0 #d6ded9;
}
body.cinema-ui .timeline-panel::before { border-color: #a9c5bc; border-radius: 17px 0 0; opacity: .6; width: 43px; height: 43px; }
body.cinema-ui .panel-heading { padding: 29px 30px 23px; }
body.cinema-ui .panel-heading h2 { color: #34585d; font-family: var(--serif); font-size: 30px; letter-spacing: -.8px; }
body.cinema-ui .panel-heading .eyebrow { color: #4e5f5e; }
body.cinema-ui :is(.panel-actions select, .sort-label select) { color: #3b636a; background: #d2dcd6; border-color: #bdccc4; border-radius: 7px; font-size: 12px; }
body.cinema-ui :is(.chart-slot, .reaction-volume) svg text { fill: #658082; }
body.cinema-ui :is(.chart-slot, .reaction-volume) svg line { stroke: #c3d0ca; }
body.cinema-ui .chart-slot svg .chart-grid { stroke: #c5d2ca; }
body.cinema-ui :is(.chart-caption, .chart-scope-note, .chart-legend, .topic-note) { color: #4e605e; font-size: 12px; }
body.cinema-ui .timezone-chip { color: #4c615c; background: #cdd9d0; border-color: #becec2; }
body.cinema-ui :is(.count-note, .scope-note) { color: #4f5f5e; }
body.cinema-ui .scope-note > summary { color: #4c615f; min-height: 38px; font-size: 12px; }
body.cinema-ui .scope-note > summary::before { color: #45625d; }
body.cinema-ui .scope-note > summary:hover { color: #386462; }
body.cinema-ui .scope-note .count-note { border-color: #b4c8bf; }
body.cinema-ui :is(.section-heading h2, .historical-banner h2, .method-panel h2) { color: #32585d; font-family: var(--serif); }
body.cinema-ui :is(.historical-banner, .topic-card, .coverage-card, .reaction-reading, .reaction-quote, .exchange-card, .evidence-rule) {
  color: var(--ink);
  background: var(--cinema-glass);
  border-color: #bfcec6;
  box-shadow: inset 0 1px 0 #d6ded9, var(--atelier-shadow);
  border-radius: 14px;
}
body.cinema-ui :is(.historical-metrics .metric-value, .topic-card .topic-count, #historical-topics .topic-count) { color: #376369; }
body.cinema-ui :is(.topic-card h3, #historical-topics h3) { color: #3e6265; font-size: 14px; }
body.cinema-ui :is(.topic-card p, #historical-topics p) { color: #51605d; font-size: 12px; }
body.cinema-ui #historical-topics .topic-card { background: linear-gradient(140deg, #d6ded7, #d0dad3); border-color: #bccdc4; border-radius: 14px; box-shadow: var(--atelier-shadow); }
body.cinema-ui #historical-topics .topic-card:hover { background: #cedad2; border-color: #8caf9d; }
body.cinema-ui .current-topic { border-color: #b5c8bf; }
body.cinema-ui :is(.historical-section, .comparison-details, .evidence-details) { border-color: #bfcec6; }
body.cinema-ui :is(.method-card, .coverage-note) { color: #4b615d; background: #d1dad2; border-color: #c1cfc1; }
body.cinema-ui .method-card h3 { color: #43635a; }
body.cinema-ui .method-card strong { color: #6e5943; }
body.cinema-ui .coverage-warning { color: #755739; background: #d5d9cf; border-color: #cac8b8; }
body.cinema-ui :is(.coverage-badge, .verification-chip) { color: #406457; background: #cbd8cf; border-color: #b8cabb; }
body.cinema-ui :is(.coverage-badge.partial, .verification-chip.legacy) { color: #73573c; background: #d4d7cc; border-color: #c8c8b7; }
body.cinema-ui :is(.coverage-metrics dt, .method-panel dt) { color: #47625b; }
body.cinema-ui :is(.coverage-metrics dd, .method-panel dd) { color: #48615c; }
body.cinema-ui :is(.coverage-metrics > div, .method-panel dl > div) { border-color: #c4d1c8; }
body.cinema-ui :is(.section-heading p, .coverage-card p, .historical-banner p) { color: #515f5b; font-size: 13px; }
body.cinema-ui .metric-card { color: #294f54; background: var(--cinema-glass); border-color: #becec6; border-radius: 13px; box-shadow: var(--atelier-shadow); }
body.cinema-ui .metric-card::before { background: linear-gradient(90deg, #80aba5, transparent); }
body.cinema-ui .metric-card:nth-child(4n)::before { background: linear-gradient(90deg, #b68662, transparent); }
body.cinema-ui .metric-label { color: #49615f; }
body.cinema-ui .metric-label > span { color: #515f5b; }
body.cinema-ui .metric-value { color: #355d63; font-family: var(--font); font-weight: 500; }
body.cinema-ui .metric-note { color: #505f5c; }
body.cinema-ui .reaction-intro h2 { color: #34575d; font-family: var(--serif); }
body.cinema-ui .reaction-intro p { color: #4e605d; }
body.cinema-ui .reaction-phase { background: var(--cinema-glass); border-top-color: #8db8a7; }
body.cinema-ui .reaction-phase:nth-child(3) { border-top-color: #bb9873; }
body.cinema-ui .reaction-phase blockquote { color: #46625c; }
body.cinema-ui :is(.reaction-source, .reaction-point-title, .reaction-source-button) { color: #33645f; }
body.cinema-ui .reaction-source:hover { color: #7d5339; }
body.cinema-ui :is(.reaction-coverage-line, .phase-source-date, .reaction-source-account, .sent-legend) { color: #4f605c; font-size: 12px; }
body.cinema-ui .reaction-topic { color: #48615c; background: rgb(214 222 215 / 81%); border-color: #bdcec4; border-radius: 10px; min-height: 48px; }
body.cinema-ui .reaction-topic small { color: #515f5a; }
body.cinema-ui .reaction-topic:hover { color: #336559; background: #d0dbd2; border-color: #a6c7b5; }
body.cinema-ui .reaction-topic.active { color: #2b665b; background: #ccd9cf; border-color: #99bca4; }
body.cinema-ui .reaction-reading { border-color: #baccc1; padding: 31px; }
body.cinema-ui .reaction-reading > h2 { color: #3c645f; font-family: var(--serif); }
body.cinema-ui .reaction-quote { background: #d6ded7; border-color: #c1cfc6; border-radius: 12px; }
body.cinema-ui .reaction-quote blockquote { color: #405e59; }
body.cinema-ui .reaction-quote-date { color: #546054; }
body.cinema-ui :is(.reaction-quote-meta, .reaction-quote-bottom) { color: #516059; border-color: #c2cfc4; }
body.cinema-ui .reaction-quote-bottom > span { color: #535f56; }
body.cinema-ui .exchange-card { border-color: #c6c8b9; }
body.cinema-ui .exchange-card h3 { color: #526054; }
body.cinema-ui .exchange-card blockquote { color: #506055; }
body.cinema-ui .exchange-meta { color: #585e58; }
body.cinema-ui .reaction-related { color: #456356; border-color: #c2d0c5; }
body.cinema-ui .reaction-related-source { color: #416456; background: #d0dad1; border-color: #bdcfbe; }
body.cinema-ui .comparison-grid { background: #c4cfc8; border-color: #c4cfc8; border-radius: 14px; }
body.cinema-ui .comparison-quote { background: linear-gradient(130deg, #d6ded7, #d3dad2); padding: 29px; }
body.cinema-ui .comparison-quote blockquote { color: #465e56; }
body.cinema-ui :is(.reaction-quote, .comparison-quote):not(.reading-focused) blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  max-height: 9.2em;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
}
body.cinema-ui .reading-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #bfccc2;
  color: #466356;
  background: #d3dcd4;
  font-size: 12px;
  box-shadow: inset 0 1px 0 #d6ded9;
}
body.cinema-ui .reading-open:hover { color: #2e6657; background: #cdd9cf; border-color: #a2bea7; }
body.cinema-ui .evidence-rule { background: rgb(214 221 214 / 69%); border-color: #c2cdc0; }
body.cinema-ui .evidence-rule p { color: #545f54; }
body.cinema-ui :is(.comparison-details summary, .acting-source-details summary, .evidence-details summary) { color: #506055; }
body.cinema-ui .acting-source-row { border-color: #c5d0c6; }
body.cinema-ui .context-fold { background: var(--cinema-glass); border-color: #bfcec5; border-radius: 14px; box-shadow: var(--atelier-shadow); }
body.cinema-ui .context-fold > summary { color: #45625a; padding: 24px 26px; font-family: var(--serif); font-size: 21px; }
body.cinema-ui .context-fold > summary::after { color: #476254; border-color: #b6c8bb; background: #d1dbd2; }
body.cinema-ui .context-fold > summary:hover { color: #365f51; background: rgb(211 220 210 / 65%); }
body.cinema-ui .context-fold[open] { border-color: #b1c6b7; }
body.cinema-ui .context-fold[open] > summary { border-color: #bfcec1; background: rgb(206 218 205 / 50%); }
body.cinema-ui .email-table-heading { color: #52605b; border-color: #c3d1c7; }
body.cinema-ui :is(.email-row, .reaction-mail) { color: #385e5d; background: rgb(214 222 215 / 71%); border-color: #c5d1c9; }
body.cinema-ui :is(.email-row, .reaction-mail):hover { color: #2e5c57; background: #d0dbd3; border-color: #b7c9be; }
body.cinema-ui .email-date { color: #426357; }
body.cinema-ui :is(.email-date small, .email-excerpt, .reaction-mail-excerpt, .reaction-mail-audience) { color: #4f5f58; }
body.cinema-ui :is(.email-subject, .reaction-mail-subject, .reaction-mail-main strong) { color: #3a645d; }
body.cinema-ui .reaction-mail-main p { color: #506057; }
body.cinema-ui .reaction-mail time { color: #4c6154; }
body.cinema-ui .reaction-audience { color: #506054; }
body.cinema-ui .reaction-search { color: #42635b; background: #d6ded6; border-color: #bbccc0; border-radius: 9px; min-height: 44px; }
body.cinema-ui .reaction-mail-list { border-color: #c0cfc4; border-radius: 12px; }
body.cinema-ui .email-source { color: #48625a; }
body.cinema-ui .source-reference-link { color: #3e645a; background: #ced9d1; border-color: #b9cbbd; border-radius: 7px; font-size: 12px; min-height: 36px; }
body.cinema-ui .source-reference-link:hover { background: #c8d7ca; border-color: #a4c4a8; }
body.cinema-ui .record-panel-dialog,
body.cinema-ui .email-dialog {
  color: #2c4e52;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(200 214 213 / 47%), transparent 50%),
    linear-gradient(140deg, #d6ddd6, #d3dcd5 72%);
  border: 1px solid rgb(174 195 190 / 70%);
  border-radius: 19px;
  box-shadow: 0 38px 110px -27px rgb(35 65 69 / 31%), 0 5px 20px rgb(67 83 73 / 7%), inset 0 1px 0 #d6ded9;
}
body.cinema-ui .record-panel-dialog::backdrop,
body.cinema-ui .email-dialog::backdrop { background: rgb(54 76 79 / 27%); backdrop-filter: blur(13px) saturate(.8); }
body.cinema-ui .record-panel-header { background: rgb(213 221 214 / 84%); border-color: #c2cfc4; box-shadow: 0 9px 23px -16px rgb(60 81 75 / 16%); }
body.cinema-ui .record-panel-header::before { background: #b7956f; }
body.cinema-ui #record-panel-title { color: #345b5e; }
body.cinema-ui .record-panel-header .eyebrow { color: #515f5b; }
body.cinema-ui #record-panel-scope { color: #535f59; font-size: 13px; }
body.cinema-ui #record-panel-content { scrollbar-color: #b4c5bb #d1dad2; }
body.cinema-ui #record-panel-content #record-comparisons > .section-heading > .topic-note { color: #6d5945; background: #d5dad0; border-color: #cacbbb; }
body.cinema-ui .dialog-close { min-width: 44px; min-height: 44px; color: #4a6158; background: #d1dbd2; border: 1px solid #bbccc0; }
body.cinema-ui .dialog-close:hover { color: #345f4f; background: #cad7cb; }
body.cinema-ui .record-panel-header .dialog-close { width: 44px; height: 44px; border-color: #bbccc0; }
body.cinema-ui .message-content > h2 { color: #3d6362; font-family: var(--serif); }
body.cinema-ui .email-headers { border-color: #c1cfc4; }
body.cinema-ui .email-headers dt { color: #4d6154; }
body.cinema-ui .email-headers dd { color: #43635a; }
body.cinema-ui .email-body { color: #3f6359; background: #d6ded8; border-color: #c2d0c4; border-radius: 10px; }
body.cinema-ui .source-header-details { border-color: #c1d0c4; }
body.cinema-ui .source-header-details > summary { color: #506053; }
body.cinema-ui .email-text-note { color: #555f53; }
body.cinema-ui .toast { color: #496251; background: #d6ddd4; border-color: #becdbb; box-shadow: 0 12px 35px -18px rgb(43 70 58 / 25%); }
body.cinema-ui .workspace-footer { color: #555f5a; border-color: #c5d1c6; font-size: 10px; }
body.cinema-ui .workspace-footer i { color: #70583f; }
body.cinema-ui .footer-tools :is(a, button) { color: #4c6157; font-size: 12px; }
body.cinema-ui .footer-tools :is(a, button):hover { color: #365f50; border-color: #aac6ab; }
body.cinema-ui .footer-tools button.active { color: #346551; border-color: #aac6ab; }
body.cinema-ui .footer-snapshot { color: #575f58; }
body.cinema-ui .recording-view { background: #d4dbd3; }
body.cinema-ui .recording-topbar { background: #d1dad2; border-color: #c4d0c4; }

/* A passage opens into its own uncluttered reading space. */
body.cinema-ui #reading-space-dialog.reading-space {
  width: min(930px, calc(100vw - 56px));
  max-width: none;
  max-height: calc(100dvh - 58px);
  height: min(820px, calc(100dvh - 58px));
  padding: 0;
  margin: auto;
  overflow: hidden;
  color: #314f51;
  background:
    radial-gradient(ellipse at 90% 0%, rgb(201 213 214 / 42%), transparent 43%),
    linear-gradient(150deg, #d6ddd6, #d4dcd4);
  border: 1px solid rgb(186 200 187 / 86%);
  border-radius: 22px;
  box-shadow: 0 40px 120px -29px rgb(31 66 71 / 35%), 0 6px 24px rgb(72 82 64 / 9%), inset 0 1px 0 #d6ded9;
}
body.cinema-ui #reading-space-dialog.reading-space[open] { display: flex; flex-direction: column; }
body.cinema-ui #reading-space-dialog::backdrop { background: rgb(40 65 71 / 27%); backdrop-filter: blur(17px) saturate(.8); }
body.cinema-ui .reading-space-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  padding: 27px 37px 22px;
  background: rgb(214 221 213 / 75%);
  border-bottom: 1px solid #c8d2c6;
}
body.cinema-ui .reading-space-header .eyebrow { color: #595e4f; font-size: 10px; }
body.cinema-ui .reading-space-header h2,
body.cinema-ui #reading-space-title { color: #3f6361; font: 400 clamp(26px, 2.7vw, 34px)/1.2 var(--serif); letter-spacing: -.6px; margin: 6px 0 0; }
body.cinema-ui .reading-space-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: #4d6154;
  background: #d3dbd2;
  border: 1px solid #bfccbe;
  border-radius: 50%;
  font-size: 25px;
  line-height: 1;
  box-shadow: inset 0 1px 0 #d6ded9;
}
body.cinema-ui .reading-space-close:hover { color: #395f49; background: #cbd7ca; border-color: #b2c4aa; }
body.cinema-ui .reading-space-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 35px 47px 42px;
  scrollbar-width: thin;
  scrollbar-color: #b7c7b9 #d2dbd1;
}
body.cinema-ui #reading-space-content { max-width: 740px; margin: 0 auto; }
body.cinema-ui #reading-space-content .reading-focused {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: 4px 0 22px;
  border: 0;
  border-radius: 0;
  color: #365951;
  background: transparent;
  box-shadow: none;
}
body.cinema-ui #reading-space-content .reading-focused blockquote {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  max-height: none;
  color: #3c5b51;
  font: 400 clamp(20px, 1.85vw, 24px)/1.75 var(--serif);
  letter-spacing: -.2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 23px 0 30px;
}
body.cinema-ui #reading-space-content .reading-focused .reading-open { display: none; }
body.cinema-ui #reading-space-content :is(.reaction-point-title, h3) { color: #446353; font-family: var(--font); font-size: 15px; line-height: 1.6; font-weight: 500; }
body.cinema-ui #reading-space-content :is(.reaction-quote-date, .reaction-quote-meta) { color: #585f51; font-size: 11px; line-height: 1.7; }
body.cinema-ui #reading-space-content :is(.reaction-quote-bottom, .comparison-links) { border-color: #c6d2c4; padding-top: 19px; }
body.cinema-ui .reading-space-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px 36px;
  background: rgb(210 219 209 / 88%);
  border-top: 1px solid #c6d2c4;
}
body.cinema-ui .reading-space-controls :is(button, .button) { min-height: 44px; padding: 10px 16px; border-radius: 9px; color: #47634f; background: #d6ded6; border: 1px solid #bdcdbb; font-size: 12px; }
body.cinema-ui .reading-space-controls :is(button, .button):hover { color: #315a3f; background: #cdd9cc; border-color: #a9c39f; }
body.cinema-ui .reading-space-controls :is(button, .button):disabled { opacity: .43; cursor: default; }
body.cinema-ui .reading-space-controls :is(span, small, output) { color: #575f4e; font-size: 11px; font-variant-numeric: tabular-nums; }
body.cinema-ui .reading-arriving { animation: atelier-reading-in 350ms ease both; }
body.cinema-ui .reading-leaving { animation: atelier-reading-out 350ms ease both; pointer-events: none; }
body.cinema-ui .reading-arriving::backdrop { animation: atelier-light-in 350ms ease both; }
body.cinema-ui .reading-leaving::backdrop { animation: atelier-light-out 350ms ease both; }

@keyframes atelier-dial-in { from { opacity: 0; transform: translateY(11px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes atelier-dial-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-9px) scale(.98); } }
@keyframes atelier-ring-in { from { transform: rotate(-9deg); } to { transform: rotate(0); } }
@keyframes atelier-ring-out { from { transform: rotate(0); } to { transform: rotate(9deg); } }
@keyframes atelier-reading-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes atelier-reading-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes atelier-light-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes atelier-light-out { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 1180px) {
  body.cinema-ui .workspace { padding: 35px 28px; }
  body.cinema-ui .sidebar { padding: 33px 18px 26px; }
  body.cinema-ui .record-lenses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.cinema-ui .record-lenses button[data-panel] { padding: 23px 20px; }
}
@media (max-width: 900px) {
  body.cinema-ui .record-lenses { gap: 12px; }
  body.cinema-ui .record-panel-dialog { width: calc(100vw - 38px); height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); }
}
@media (max-width: 760px) {
  body.cinema-ui .app { display: block; }
  body.cinema-ui .sidebar { padding: 20px 23px 14px; height: auto; background: rgb(213 220 212 / 78%); border-bottom-color: #c5d0c6; }
  body.cinema-ui .brand { margin-bottom: 15px; }
  body.cinema-ui .brand-mark { width: 30px; height: 34px; flex-basis: 30px; }
  body.cinema-ui .brand > span + span { font-size: 20px; }
  body.cinema-ui .brand small { font-size: 9px; letter-spacing: .7px; }
  body.cinema-ui .sidebar nav { gap: 7px; }
  body.cinema-ui .nav-button { font-size: 12px; min-height: 46px; }
  body.cinema-ui .nav-button.active { box-shadow: inset 0 -2px 0 #b0805b, 0 3px 10px -8px rgb(42 82 74 / 23%); }
  body.cinema-ui .sidebar-bottom .nav-button.active { color: #436355; }
  body.cinema-ui .topbar { height: 58px; padding: 0 23px; }
  body.cinema-ui .topbar-path { font-size: 9px; letter-spacing: .8px; }
  body.cinema-ui .freshness { font-size: 10px; }
  body.cinema-ui .workspace { padding: 31px 23px 33px; }
  body.cinema-ui .page-heading h1 { font-size: 49px; }
  body.cinema-ui .record-lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cinema-ui .record-lenses button[data-panel] { min-height: 128px; padding: 23px; }
  body.cinema-ui .record-lenses button[data-panel]:last-child { min-height: 96px; }
  body.cinema-ui .record-lenses .lens-label { font-size: 21px; }
  body.cinema-ui .reaction-reading { padding: 25px; }
  body.cinema-ui .record-panel-header { padding: 24px; }
  body.cinema-ui #record-panel-content { padding: 24px; }
  body.cinema-ui .reading-space-header { padding: 23px 27px 19px; }
  body.cinema-ui .reading-space-body { padding: 28px 30px 34px; }
  body.cinema-ui .reading-space-controls { padding: 18px 26px; }
}
@media (max-width: 540px) {
  body.cinema-ui .sidebar { padding: 19px 17px 12px; }
  body.cinema-ui .nav-button { padding: 11px 7px; font-size: 11px; gap: 7px; min-height: 44px; }
  body.cinema-ui .brand > span + span { font-size: 20px; }
  body.cinema-ui .topbar { padding: 0 17px; }
  body.cinema-ui .topbar .button { min-height: 40px; font-size: 10px; padding: 9px 11px; }
  body.cinema-ui .workspace { padding: 29px 17px 30px; }
  body.cinema-ui .page-heading { margin-bottom: 24px; }
  body.cinema-ui .page-heading h1 { font-size: 43px; line-height: 1.14; }
  body.cinema-ui .page-heading p { font-size: 13px; }
  body.cinema-ui .page-heading .button { min-height: 42px; }
  body.cinema-ui .sender-tabs { scrollbar-color: #b9c8bf transparent; }
  body.cinema-ui .sender-tab { min-height: 44px; font-size: 12px; padding: 13px 14px; }
  body.cinema-ui .filters { padding: 18px; }
  body.cinema-ui .filter-selects :is(select, input) { min-height: 34px; }
  body.cinema-ui .stat-stage { padding-top: 4px; margin-bottom: 18px; }
  body.cinema-ui .stat-stage-heading h2 { font-size: 16px; }
  body.cinema-ui .metric-dial-shell { min-height: 265px; gap: 8px; padding: 21px 0; margin-bottom: 7px; }
  body.cinema-ui .metric-dial-shell::before { inset: -15px -10px; }
  body.cinema-ui .metric-dial { flex-basis: 220px; width: 220px; height: 220px; }
  body.cinema-ui .metric-dial::before { inset: 0; }
  body.cinema-ui .metric-dial::after { inset: 18px; box-shadow: inset 0 2px 7px rgb(71 104 103 / 8%), inset 0 -1px 0 #d6ded9, 0 0 0 3px rgb(214 222 217 / 43%); }
  body.cinema-ui .metric-cycle { flex-basis: 44px; width: 44px; height: 44px; }
  body.cinema-ui .metric-cycle svg { width: 17px; height: 17px; }
  body.cinema-ui #metric-dial-value { inset: 27px; }
  body.cinema-ui #metric-dial-value .metric-card { padding: 6px 0; }
  body.cinema-ui #metric-dial-value .metric-label { font-size: 9px; line-height: 1.5; letter-spacing: 1px; max-width: 158px; }
  body.cinema-ui #metric-dial-value .metric-value { font-size: 54px; margin: 11px 0 9px; }
  body.cinema-ui #metric-dial-value .metric-note { font-size: 10px; max-width: 155px; line-height: 1.5; }
  body.cinema-ui .dial-selectors { gap: 5px 2px; }
  body.cinema-ui .dial-selectors button[data-dial] { min-height: 44px; padding: 9px 8px; font-size: 11px; }
  body.cinema-ui .dial-clear { min-height: 44px; margin-top: 5px; }
  body.cinema-ui .record-launcher { margin-top: 24px; }
  body.cinema-ui .record-lenses { gap: 11px; }
  body.cinema-ui .record-lenses button[data-panel] { min-height: 128px; padding: 23px 17px; }
  body.cinema-ui .record-lenses .lens-label { font-size: 20px; }
  body.cinema-ui .record-lenses button[data-panel] :is(small, p) { font-size: 11px; }
  body.cinema-ui .record-lenses button[data-panel]:last-child { min-height: 94px; }
  body.cinema-ui .launcher-heading { gap: 7px; }
  body.cinema-ui .panel-heading { padding: 25px 21px 20px; }
  body.cinema-ui .panel-heading h2 { font-size: 28px; }
  body.cinema-ui .chart-caption { font-size: 12px; }
  body.cinema-ui .record-panel-dialog { width: calc(100vw - 16px); height: calc(100dvh - 18px); max-height: calc(100dvh - 18px); border-radius: 16px; }
  body.cinema-ui .record-panel-header { padding: 22px 19px; }
  body.cinema-ui #record-panel-title { font-size: 29px; }
  body.cinema-ui #record-panel-content { padding: 22px 17px 27px; }
  body.cinema-ui .reaction-reading { padding: 23px 18px; }
  body.cinema-ui .reaction-quote { padding: 24px 20px; }
  body.cinema-ui :is(.reaction-quote, .comparison-quote):not(.reading-focused) blockquote { font-size: 16px; }
  body.cinema-ui .comparison-quote { padding: 24px 20px; }
  body.cinema-ui .context-fold > summary { padding: 23px 20px; font-size: 20px; }
  body.cinema-ui .email-dialog { padding: 29px 23px; border-radius: 15px; }
  body.cinema-ui .email-headers > div { grid-template-columns: 1fr; gap: 5px; }
  body.cinema-ui .workspace-footer { padding: 23px 17px; font-size: 10px; }
  body.cinema-ui .footer-tools { gap: 9px 18px; }
  body.cinema-ui #reading-space-dialog.reading-space { width: calc(100vw - 16px); height: calc(100dvh - 22px); max-height: calc(100dvh - 22px); border-radius: 16px; }
  body.cinema-ui .reading-space-header { padding: 22px 21px 18px; gap: 13px; }
  body.cinema-ui #reading-space-title { font-size: 28px; line-height: 1.2; }
  body.cinema-ui .reading-space-body { padding: 27px 23px 30px; }
  body.cinema-ui #reading-space-content .reading-focused blockquote { font-size: 21px; line-height: 1.7; letter-spacing: -.2px; }
  body.cinema-ui .reading-space-controls { padding: 17px 20px; gap: 10px; }
  body.cinema-ui .reading-space-controls :is(button, .button) { padding: 10px 13px; min-height: 44px; }
  body.cinema-ui .reading-space-controls :is(span, small, output) { font-size: 10px; }
  body.cinema-ui .app.focus-mode .page-heading h1 { font-size: 46px; }
  body.cinema-ui .app.focus-mode .workspace { padding: 29px 17px; }
}
@media (max-width: 350px) {
  body.cinema-ui .metric-dial { flex-basis: 196px; width: 196px; height: 196px; }
  body.cinema-ui .metric-dial-shell { gap: 6px; }
  body.cinema-ui #metric-dial-value { inset: 24px; }
  body.cinema-ui #metric-dial-value .metric-value { font-size: 47px; }
  body.cinema-ui #metric-dial-value .metric-note { font-size: 9px; max-width: 141px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cinema-ui *, body.cinema-ui *::before, body.cinema-ui *::after,
  body.cinema-ui dialog::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  body.cinema-ui :is(.record-lenses button[data-panel]:hover, .metric-cycle:active) { transform: none; }
}


/* Balanced light and shade: silver canvas, slate navigation, sage paper. */
body.cinema-ui {
  background:
    radial-gradient(ellipse at 77% 0%, rgb(178 196 207 / 49%), transparent 51%),
    radial-gradient(ellipse at 96% 48%, rgb(177 182 198 / 25%), transparent 40%),
    radial-gradient(ellipse at 40% 85%, rgb(167 194 178 / 30%), transparent 49%),
    radial-gradient(ellipse at 12% 13%, rgb(196 183 170 / 21%), transparent 41%),
    linear-gradient(130deg, #c5cbc6, #b9c8c7 58%, #c8c8bd);
  --cinema-glass: linear-gradient(145deg, rgb(215 224 216 / 95%), rgb(203 216 209 / 92%));
  --cinema-hairline: rgb(56 80 81 / 22%);
  --atelier-shadow: 0 22px 43px -31px rgb(37 64 69 / 35%), 0 2px 5px rgb(54 74 70 / 7%);
}
body.cinema-ui::after { background: linear-gradient(180deg, rgb(206 217 209 / 11%), transparent 40%); }
body.cinema-ui .sidebar {
  background: linear-gradient(155deg, #40575a, #344b4f 72%, #30484b);
  border-color: rgb(35 63 67 / 28%);
  box-shadow: 10px 0 27px -22px rgb(26 50 56 / 34%);
}
body.cinema-ui .brand > span + span { color: #d6e1d8; font-size: 20px; line-height: 1.3; }
body.cinema-ui .brand-mark { color: #c2a283; }
body.cinema-ui .brand small { color: #bacdc5; }
body.cinema-ui .sidebar-label { color: #adbfba; }
body.cinema-ui .nav-button { color: #c0d0ca; }
body.cinema-ui .nav-button .nav-icon { color: #aec7c1; }
body.cinema-ui .nav-button:hover { color: #e2e9e0; background: rgb(155 183 174 / 13%); }
body.cinema-ui .nav-button.active {
  color: #e0e9de;
  background: linear-gradient(110deg, #607674, #526967);
  border-color: #768d84;
  box-shadow: inset 2px 0 0 #bd9978, 0 7px 17px -13px rgb(19 46 47 / 36%);
}
body.cinema-ui .nav-button.active .nav-icon { color: #d0e0d6; }
body.cinema-ui .sidebar-rule { border-color: rgb(174 196 184 / 23%); }
body.cinema-ui :is(.sidebar-bottom, .sidebar-edition, .private-label, .private-dot) { color: #b4c8bf; }
body.cinema-ui .sidebar-edition strong { color: #d3e0d5; }
body.cinema-ui .sidebar-bottom :is(a, button) { color: #c5d7cc; }
body.cinema-ui .topbar { background: rgb(195 207 201 / 73%); border-color: rgb(93 117 115 / 25%); }
body.cinema-ui .page-heading h1 { font-size: clamp(43px, 4.1vw, 56px); line-height: 1.12; }
body.cinema-ui .metric-dial::before {
  background: conic-gradient(from 28deg, #bfcfcb, #9aaeb1 13%, #d9e2db 25%, #afc2c2 37%, #d4d8c9 48%, #b5ac9b 59%, #d4ded4 73%, #9fbcb3 85%, #bfcfcb);
  border-color: rgb(105 133 131 / 55%);
  box-shadow: 0 28px 43px -29px rgb(34 69 72 / 49%), 0 9px 14px -10px rgb(41 62 67 / 33%), inset 0 2px 2px #dbe7dd, inset 0 -2px 5px rgb(64 104 107 / 25%);
}
body.cinema-ui .metric-dial::after {
  background: radial-gradient(circle at 37% 28%, #dae2d9, #d0dad1 57%, #bacdc2 100%);
  border-color: #9fb6ad;
  box-shadow: inset 0 2px 8px rgb(54 93 86 / 11%), inset 0 -1px 0 #dde5d9, 0 0 0 4px rgb(217 228 215 / 32%);
}
body.cinema-ui .metric-dial-shell::before {
  background:
    radial-gradient(ellipse at 32% 48%, rgb(154 185 172 / 32%), transparent 48%),
    radial-gradient(ellipse at 67% 34%, rgb(165 184 203 / 26%), transparent 47%),
    radial-gradient(ellipse at 50% 77%, rgb(197 179 153 / 15%), transparent 44%);
}
body.cinema-ui .dial-orbit { filter: drop-shadow(0 1px 0 rgb(218 230 219 / 49%)); }
body.cinema-ui .dial-orbit line:nth-of-type(5n + 1) { stroke: #8f654d; opacity: .8; }
body.cinema-ui #metric-dial-value .metric-value { text-shadow: 0 1px 0 rgb(211 224 211 / 68%); }
body.cinema-ui .button.dark { color: #dce8dc; }
body.cinema-ui .record-panel-dialog,
body.cinema-ui .email-dialog,
body.cinema-ui #reading-space-dialog.reading-space {
  background:
    radial-gradient(ellipse at 96% 0%, rgb(190 206 213 / 33%), transparent 45%),
    linear-gradient(140deg, #d6ded7, #c9d7cd 72%);
}
body.cinema-ui :is(.record-panel-header, .reading-space-header) { background: rgb(204 218 207 / 88%); border-color: #adbfb1; }
body.cinema-ui .reading-space-controls { background: rgb(193 210 197 / 86%); border-color: #aebfab; }
body.cinema-ui .reading-space-body { scrollbar-color: #8da99b #c5d6c8; }
body.cinema-ui .record-panel-dialog::backdrop,
body.cinema-ui .email-dialog::backdrop,
body.cinema-ui #reading-space-dialog::backdrop { background: rgb(37 63 68 / 36%); backdrop-filter: blur(13px) saturate(.8); }

/* The selected count and its own source context share the central stage. */
body.cinema-ui .metric-stage-layout {
  display: grid;
  grid-template-columns: minmax(390px, 1.05fr) minmax(280px, 380px);
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 3vw, 50px);
  width: min(100%, 950px);
  margin: 9px auto 8px;
}
body.cinema-ui .metric-stage-layout .metric-dial-shell { gap: 25px; min-height: 334px; margin: 0; }
body.cinema-ui #metric-context { min-width: 0; width: 100%; max-width: 380px; justify-self: center; }
body.cinema-ui .focus-context {
  position: relative;
  padding: 25px 26px 22px;
  color: #365451;
  background: linear-gradient(135deg, rgb(216 227 216 / 61%), rgb(196 212 205 / 45%));
  border: 1px solid rgb(121 154 143 / 44%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgb(221 233 221 / 43%), 0 15px 34px -26px rgb(39 70 62 / 28%);
  text-align: left;
}
body.cinema-ui .focus-context header { margin-bottom: 17px; }
body.cinema-ui .focus-context :is(h3, .focus-context-title) { margin: 5px 0 10px; color: #335b57; font: 400 29px/1.22 var(--serif); letter-spacing: -.6px; }
body.cinema-ui .focus-context :is(p, .focus-summary) { color: #4e6a61; font-size: 13px; line-height: 1.65; margin: 9px 0 17px; }
body.cinema-ui .focus-context :is(small, .eyebrow) { color: #5c7467; font-size: 10px; }
body.cinema-ui .focus-context .button { margin-top: 15px; font-size: 11px; min-height: 40px; }
body.cinema-ui .focus-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 13px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}
body.cinema-ui .focus-breakdown-row :is(.focus-breakdown-label, .focus-label) { color: #4d6a60; }
body.cinema-ui .focus-breakdown-row :is(strong, .focus-count, .focus-breakdown-count) { color: #315c52; font-weight: 500; font-variant-numeric: tabular-nums; }
body.cinema-ui :is(.focus-bar-track, .focus-breakdown-track) { grid-column: 1 / -1; height: 4px; background: #b6c9bd; border-radius: 4px; overflow: hidden; }
body.cinema-ui :is(.focus-bar-fill, .focus-breakdown-fill) { display: block; height: 100%; border-radius: inherit; background: #6a9b88; min-width: 1px; }
body.cinema-ui .focus-breakdown-row:nth-child(2) :is(.focus-bar-fill, .focus-breakdown-fill) { background: #789eab; }
body.cinema-ui .focus-breakdown-row:nth-child(3) :is(.focus-bar-fill, .focus-breakdown-fill) { background: #9b8caa; }
body.cinema-ui .focus-breakdown-row:nth-child(4) :is(.focus-bar-fill, .focus-breakdown-fill) { background: #b29876; }
body.cinema-ui .context-arriving { animation: atelier-reading-in 350ms ease both; }

/* Compact desktop heights keep the wheel and all five lenses in one composition. */
@media (min-width: 1181px) and (max-height: 1050px) {
  body.cinema-ui:has(#view-overview:not([hidden])) .topbar { height: 62px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .workspace { padding-top: 27px; padding-bottom: 23px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .page-heading { margin-bottom: 18px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .page-heading h1 { font-size: 56px; margin: 8px 0 7px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .page-heading .eyebrow { line-height: 1.5; }
  body.cinema-ui:has(#view-overview:not([hidden])) .sender-tabs { margin-bottom: 12px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .sender-tab { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  body.cinema-ui .stat-stage { padding: 0 0 10px; margin: 3px 0 10px; }
  body.cinema-ui .stat-stage-heading { margin-bottom: 0; }
  body.cinema-ui .metric-stage-layout { margin-top: 5px; margin-bottom: 3px; }
  body.cinema-ui .metric-stage-layout .metric-dial-shell,
  body.cinema-ui .metric-dial-shell { min-height: 310px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 5px; }
  body.cinema-ui .dial-selectors button[data-dial] { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
  body.cinema-ui .dial-clear { min-height: 32px; margin-top: 5px; }
  body.cinema-ui .scope-note { margin: 5px 0 10px; }
  body.cinema-ui .scope-note > summary { min-height: 32px; }
  body.cinema-ui .record-launcher { margin-top: 17px; padding-top: 0; }
  body.cinema-ui .launcher-heading { margin-bottom: 12px; }
  body.cinema-ui .record-lenses button[data-panel] { min-height: 117px; padding-top: 18px; padding-bottom: 18px; gap: 9px; }
  body.cinema-ui .record-lenses .lens-label { font-size: 19px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .workspace-footer { padding-top: 15px; padding-bottom: 15px; }
  body.cinema-ui .focus-context { padding: 21px 24px 19px; }
  body.cinema-ui .focus-context header { margin-bottom: 13px; }
  body.cinema-ui .focus-context :is(p, .focus-summary) { margin-bottom: 13px; }
  body.cinema-ui .focus-breakdown-row { margin-top: 10px; }
}
@media (max-width: 1180px) {
  body.cinema-ui .metric-stage-layout { grid-template-columns: minmax(330px, 1fr) minmax(235px, 330px); gap: 18px; }
  body.cinema-ui .metric-stage-layout .metric-dial-shell { gap: 10px; }
  body.cinema-ui .focus-context { padding: 23px 21px; }
  body.cinema-ui .focus-context :is(h3, .focus-context-title) { font-size: 26px; }
}
@media (max-width: 1000px) {
  body.cinema-ui .metric-stage-layout { grid-template-columns: 1fr; gap: 8px; width: min(100%, 540px); }
  body.cinema-ui .metric-stage-layout .metric-dial-shell { gap: 25px; }
  body.cinema-ui #metric-context { max-width: 440px; }
}
@media (max-width: 760px) {
  body.cinema-ui .sidebar { background: linear-gradient(120deg, #40575a, #344b4f); border-color: #58706c; }
  body.cinema-ui .sidebar-bottom .nav-button.active { color: #d2e1d4; }
  body.cinema-ui .nav-button.active { box-shadow: inset 0 -2px 0 #bd9978, 0 3px 10px -8px rgb(17 44 44 / 33%); }
  body.cinema-ui .page-heading h1 { font-size: 43px; }
  body.cinema-ui .metric-stage-layout { margin-top: 5px; gap: 3px; }
  body.cinema-ui #metric-context { max-width: 440px; }
  body.cinema-ui .focus-context { padding: 24px 23px; }
}
@media (max-width: 540px) {
  body.cinema-ui .page-heading { flex-wrap: wrap; align-items: flex-start; }
  body.cinema-ui .page-heading h1 { font-size: 40px; line-height: 1.12; max-width: 340px; }
  body.cinema-ui .page-heading .view-tools { margin-top: 2px; }
  body.cinema-ui .metric-stage-layout .metric-dial-shell { gap: 8px; min-height: 265px; }
  body.cinema-ui .metric-dial::after { box-shadow: inset 0 2px 7px rgb(54 93 86 / 11%), inset 0 -1px 0 #dde5d9, 0 0 0 3px rgb(217 228 215 / 32%); }
  body.cinema-ui .focus-context { padding: 22px 21px; margin-top: 2px; }
  body.cinema-ui .focus-context :is(h3, .focus-context-title) { font-size: 27px; }
  body.cinema-ui .focus-context :is(p, .focus-summary) { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cinema-ui .context-arriving { animation: none !important; }
}

/* Match the source-context markup; secondary headings remain intentionally quiet. */
body.cinema-ui .focus-context .focus-breakdown-title {
  color: #4a675d;
  font: 500 13px/1.5 var(--font);
  letter-spacing: .1px;
  margin: 0 0 12px;
}
body.cinema-ui .focus-breakdown-value { color: #315c52; font-weight: 500; font-variant-numeric: tabular-nums; }
body.cinema-ui .focus-context .focus-breakdown-scope { color: #587261; font-size: 11px; line-height: 1.5; margin: -4px 0 13px; }
body.cinema-ui .context-leaving { animation: atelier-reading-out 350ms ease both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  body.cinema-ui .context-leaving { animation: none !important; }
}

/* The wordmark follows an SVG, so target its text span directly. */
body.cinema-ui .brand > span {
  color: #d6e1d8;
  font: 400 20px/1.3 var(--serif);
  letter-spacing: -.4px;
}
body.cinema-ui .brand > span small { color: #bacdc5; }

/* The eight month buckets share four rows on wider screens. */
@media (min-width: 1001px) {
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin-top: 4px;
  }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-row {
    min-width: 0;
    margin-top: 0;
    gap: 6px 9px;
    align-items: start;
  }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-label { font-size: 11px; line-height: 1.5; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-value { font-size: 12px; line-height: 1.5; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-context-header { margin-bottom: 12px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-context-title { font-size: 27px; margin-bottom: 8px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-context-summary { font-size: 12px; line-height: 1.55; margin-top: 7px; margin-bottom: 14px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-title { margin-bottom: 10px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-scope { margin-bottom: 11px; }
}

body.cinema-ui :is(.focus-bar-fill, .focus-breakdown-fill) { min-width: 0; }

/* A complete overview at 1000px height, with the wheel kept at full size. */
@media (min-width: 1181px) and (max-height: 1050px) {
  body.cinema-ui:has(#view-overview:not([hidden])) .workspace { padding-top: 21px; padding-bottom: 18px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .page-heading { margin-bottom: 14px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .page-heading h1 { margin-top: 6px; margin-bottom: 5px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .sender-tabs { margin-bottom: 8px; }
  body.cinema-ui:has(#view-overview:not([hidden])) .sender-tab { padding-top: 9px; padding-bottom: 9px; }
  body.cinema-ui .stat-stage { padding-bottom: 6px; margin-top: 0; margin-bottom: 6px; }
  body.cinema-ui .stat-stage-heading h2 { font-size: 15px; }
  body.cinema-ui .metric-stage-layout { margin-top: 1px; margin-bottom: 1px; }
  body.cinema-ui .metric-stage-layout .metric-dial-shell,
  body.cinema-ui .metric-dial-shell { min-height: 306px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 3px; }
  body.cinema-ui .focus-context { padding: 18px 23px; }
  body.cinema-ui .focus-context .focus-context-header { margin-bottom: 8px; }
  body.cinema-ui .focus-context .focus-context-title { font-size: 27px; line-height: 1.2; margin: 4px 0 8px; }
  body.cinema-ui .focus-context .focus-context-summary { font-size: 12px; line-height: 1.55; margin: 6px 0 10px; }
  body.cinema-ui .focus-context .focus-breakdown-title { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
  body.cinema-ui .focus-context .focus-breakdown-scope { font-size: 11px; line-height: 1.5; margin-bottom: 8px; }
  body.cinema-ui .focus-breakdown-row { margin-top: 8px; gap: 5px 11px; }
  body.cinema-ui .focus-context .focus-explore { min-height: 36px; margin-top: 10px; padding-top: 7px; padding-bottom: 7px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-context-header { margin-bottom: 8px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-context-title { font-size: 27px; margin: 4px 0 8px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-context-summary { font-size: 12px; line-height: 1.55; margin: 6px 0 10px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-title { margin-bottom: 8px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-scope { margin-bottom: 8px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-rows { gap: 10px 18px; }
  body.cinema-ui #metric-context[data-focus-mode="2"] .focus-breakdown-row { margin-top: 0; gap: 5px 9px; }
  body.cinema-ui .dial-selectors button[data-dial] { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  body.cinema-ui .dial-clear { min-height: 28px; margin-top: 3px; }
  body.cinema-ui .scope-note { margin-top: 2px; margin-bottom: 6px; }
  body.cinema-ui .scope-note > summary { min-height: 28px; }
  body.cinema-ui .record-launcher { margin-top: 10px; }
  body.cinema-ui .launcher-heading { margin-bottom: 8px; }
  body.cinema-ui .record-lenses button[data-panel] { min-height: 105px; padding: 14px 18px; gap: 8px; }
  body.cinema-ui .record-lenses .lens-label { font-size: 18px; line-height: 1.2; }
  body.cinema-ui .record-lenses .lens-label small { margin-top: 6px; font-size: 11px; line-height: 1.4; }
  body.cinema-ui:has(#view-overview:not([hidden])) .workspace-footer { padding-top: 12px; padding-bottom: 12px; }
}

/* Final small-type contrast on the accepted satin-silver surfaces. */
body.cinema-ui { --muted: #3b5755; --faint: #3b5755; }
body.cinema-ui :is(.topbar-path, .freshness, .page-heading p, #sender-subtitle) { color: #3b5755; }
body.cinema-ui :is(.sender-tab, .sender-tab small) { color: #3b5755; }
body.cinema-ui :is(.count-note, .scope-note, .scope-note > summary, .chart-caption, .chart-scope-note, .chart-legend, .topic-note) { color: #3b5755; }
body.cinema-ui :is(.chart-slot, .reaction-volume) svg text { fill: #3b5755; }
body.cinema-ui :is(.metric-note, .metric-label, .metric-label > span, .dial-placeholder, .dial-clear) { color: #3b5755; }
body.cinema-ui #metric-dial-value :is(.metric-label, .metric-note) { color: #3b5755; }
body.cinema-ui :is(.launcher-heading p, .launcher-heading small, .record-lenses .lens-mark) { color: #3b5755; }
body.cinema-ui .record-lenses button[data-panel] :is(small, p) { color: #3b5755; }
body.cinema-ui .focus-context :is(.focus-context-summary, .focus-breakdown-scope, .focus-breakdown-label, .focus-context-empty, small, .eyebrow) { color: #3b5755; }
body.cinema-ui :is(.reaction-coverage-line, .phase-source-date, .reaction-source-account, .sent-legend, .reaction-topic small) { color: #3b5755; }
body.cinema-ui :is(.reaction-quote-date, .reaction-quote-meta, .reaction-quote-bottom > span, .exchange-meta) { color: #3b5755; }
body.cinema-ui :is(.email-date small, .email-date > span, .email-excerpt, .email-source, .reaction-mail time, .reaction-audience, .reaction-mail-main p) { color: #3b5755; }
body.cinema-ui :is(.coverage-card p, .section-heading p, .evidence-rule p, .email-text-note) { color: #3b5755; }
body.cinema-ui :is(.source-reference-link, .reaction-source, .reaction-source-button, .comparison-links a) { color: #315754; }
body.cinema-ui :is(.record-panel-header .eyebrow, #record-panel-scope, .source-header-details > summary, .email-headers dt, .email-headers dd) { color: #3b5755; }
body.cinema-ui #reading-space-content :is(.reaction-quote-date, .reaction-quote-meta, .reaction-quote-bottom > span) { color: #3b5755; }
body.cinema-ui .reading-space-header .eyebrow { color: #3b5755; }
body.cinema-ui .reading-space-controls :is(span, small, output) { color: #3b5755; }
body.cinema-ui :is(.workspace-footer, .footer-snapshot) { color: #3b5755; }
body.cinema-ui .footer-tools :is(a, button) { color: #315754; }