/* OpenVibe.Cam: the room's own pieces. Colours come from the theme (--bg-*, --text-*, --border) and the room's accent
   (.ov-room: --room-accent, --room-strong, --room-fill, --room-on), so every theme, light or dark, wears it. Phone
   first; nothing scrolls sideways. Nothing is public without its owner's grant. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; border-radius: 10px; background: var(--bg-card, #0f1729); color: inherit; }
.cm { display: block; }
.cm a { color: var(--room-strong); }
.cm .ovk-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.cm-narrow { max-width: 620px; }
.cm-page-pad { padding-top: clamp(28px, 6vw, 64px); }
.cm h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.cm-kicker { margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--room-strong); }
.cm-page-h { padding-top: clamp(20px, 4vw, 40px); margin-bottom: 22px; }
.cm-page-h h1, .cm-entry-h h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; overflow-wrap: anywhere; }
.cm-lede, .cm-summary { margin: 10px 0 0; max-width: 700px; color: var(--text-secondary, #96a7c2); line-height: 1.55; }
.cm-fine, .cm-muted { color: var(--text-muted, #7386a3); font-size: .88rem; line-height: 1.55; }
.cm-section { margin-top: clamp(28px, 4vw, 44px); }
.cm-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cm-count { color: var(--text-muted, #7386a3); font-size: .86rem; }
.cm-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--room-fill); color: var(--room-on) !important; font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; }
.cm-btn-quiet { background: transparent; color: var(--text-primary, #e6edf7) !important; border: 1px solid var(--border, #1f2d47); }
.cm-btn-small { min-height: 34px; padding: 0 14px; font-size: .86rem; }
.cm-btn.is-mine { background: color-mix(in srgb, var(--room-accent) 22%, transparent); color: var(--room-strong) !important; }
.cm-btn:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.cm-note { margin: 14px 0; padding: 11px 14px; border-radius: 14px; font-weight: 600; background: color-mix(in srgb, var(--room-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--room-accent) 30%, transparent); }
.cm-note.is-bad { background: color-mix(in srgb, var(--error, #ef4444) 12%, transparent); border-color: color-mix(in srgb, var(--error, #ef4444) 35%, transparent); }
.cm-empty { display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: 18px; border: 1px dashed var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); }
.cm-empty p { margin: 0; line-height: 1.5; }
.cm-empty h1 { margin: 0; font-size: 1.6rem; color: var(--text-primary, #e6edf7); }


.cm-card { padding: 18px; border-radius: 18px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.cm-form { display: grid; gap: 14px; }
.cm-field { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--text-secondary, #96a7c2); min-width: 0; }
.cm-field input, .cm-field select, .cm-field textarea { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-input, var(--bg-primary, #0a0f1c)); color: var(--text-primary, #e6edf7); font: inherit; font-size: .95rem; font-weight: 500; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus { outline: 2px solid var(--room-accent); outline-offset: 1px; border-color: transparent; }
.cm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0 0; }
.cm-facts > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); min-width: 0; }
.cm-facts dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.cm-facts dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.cm-eps { display: grid; gap: 10px; margin: 12px 0 0; }
.cm-eps > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.cm-eps dt code { font-weight: 800; color: var(--room-strong); overflow-wrap: anywhere; }
.cm-eps dd { margin: 6px 0 0; color: var(--text-secondary, #96a7c2); line-height: 1.5; }

/* Selects and file inputs share the field look */
.cm-field select, .cm-field input[type=file] { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); color: inherit; font: inherit; }
.cm-field select:focus-visible, .cm-field input:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 1px; }
.cm-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cm-btn[aria-pressed=true] { background: color-mix(in srgb, var(--room-accent) 22%, transparent); border-color: var(--room-accent); }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-note { padding: 12px 14px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, #0f1729); }
.cm-count { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--room-accent) 16%, transparent); color: var(--room-strong); font-weight: 800; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }

/* The motif: an iris opening onto a contact sheet */


/* Photos, stills and cameras */
.cm-photos, .cm-stills, .cm-cameras { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.cm-photo, .cm-still { display: grid; gap: 6px; min-width: 0; }
.cm-photo img, .cm-still img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.cm-still img { aspect-ratio: 16 / 9; }
.cm-photo-link, .cm-still-link { display: block; border-radius: 14px; }
.cm-photo-link:hover img, .cm-still-link:hover img { border-color: var(--room-accent); }
.cm-photo-link:focus-visible, .cm-still-link:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.cm-photo-meta, .cm-still-meta { font-size: .8rem; color: var(--text-muted, #7386a3); overflow-wrap: anywhere; }
.cm-camera-link { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border, #1f2d47); border-radius: 16px; background: var(--bg-card, #0f1729); text-decoration: none; color: inherit; }
.cm-camera-link:hover { border-color: var(--room-accent); }
.cm-camera-name { font-weight: 800; }
.cm-camera-meta, .cm-camera-grants { font-size: .84rem; color: var(--text-secondary, #96a7c2); }
.cm-still-large { margin: 16px 0; }
.cm-still-large img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--border, #1f2d47); }
.cm-still-large figcaption { margin-top: 8px; color: var(--text-secondary, #96a7c2); }
.cm-wall-preview { margin-top: 18px; padding: 16px; border: 1px dashed var(--border, #1f2d47); border-radius: 18px; }

/* Rules, steps and the viewers table */
.cm-rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cm-rules li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); line-height: 1.5; }
.cm-steps { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.55; }
.cm-steps li::marker { color: var(--room-strong); font-weight: 800; }
.cm-table-wrap { overflow-x: auto; margin-top: 10px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; }
.cm-grants { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cm-grants th, .cm-grants td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border, #1f2d47); white-space: nowrap; }
.cm-grants tr:last-child td { border-bottom: 0; }
.cm-grants th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #7386a3); }

/* Phones: the motif is a faint corner mark behind the hero text, so it drops the contact sheet and fades the iris */

/* ── The home's scenes, shown for real (10-31): a live frame and its still, a camera's grant, the filters ── */
/* The filters, the same CSS as public/js/cam.js's FILTERS (test/home-scenes.test.js keeps them equal). */
.cm-f-none { filter: none; }
.cm-f-mono { filter: grayscale(1) contrast(1.08); }
.cm-f-warm { filter: sepia(.35) saturate(1.15); }
.cm-f-cool { filter: hue-rotate(-10deg) saturate(1.1); }
.cm-f-fade { filter: saturate(.8) contrast(.92) brightness(1.06); }
.cm-f-vivid { filter: saturate(1.45) contrast(1.06); }
.cm-f-blur { filter: blur(1.5px); }

.cm-demo-live, .cm-demo-filters { margin: 0; display: grid; gap: 10px; width: min(380px, 100%); justify-self: center; }
.cm-live-frame { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); }
.cm-live-frame img, .cm-f-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-live-badge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; background: var(--ovk-live, #ef4444); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cm-live-btn { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10, 12, 18, .66); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
  animation: cmPress var(--ov-dur-2, .2s) var(--ov-ease-out, ease-out) both; animation-delay: var(--ov-dur-4, .52s); }
.cm-live-btn .ovk-i { width: 20px; height: 20px; }
.cm-live-flash { position: absolute; inset: 0; background: #fff; opacity: 0;
  animation: cmFlash var(--ov-dur-4, .52s) var(--ov-ease-out, ease-out) both; animation-delay: calc(var(--ov-dur-4, .52s) + var(--ov-dur-1, .12s)); }
.cm-live-chat { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--ovk-panel); border: 1px solid var(--ovk-line); font-size: 14px;
  animation: cmRise var(--ov-dur-3, .32s) var(--ov-ease-out, ease-out) both; animation-delay: calc(var(--ov-dur-4, .52s) * 2); }
.cm-live-who { font-weight: 700; color: var(--room-strong, var(--ovk-accent)); }
@keyframes cmPress { 50% { transform: scale(.88); } }
@keyframes cmFlash { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
@keyframes cmRise { from { opacity: 0; transform: translateY(8px); } }

.cm-demo-grant { display: grid; gap: 10px; width: min(380px, 100%); justify-self: center; padding: 12px; border-radius: 16px;
  background: var(--ovk-panel); border: 1px solid var(--ovk-line); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.cm-g-cam { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cm-g-cam img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; }
.cm-g-name { display: grid; min-width: 0; }
.cm-g-name span { color: var(--ovk-muted); font-size: 13px; }
.cm-g-lock { color: var(--room-accent, var(--ovk-accent)); }
.cm-g-lock svg { width: 20px; height: 20px; display: block; }
.cm-g-grant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--ovk-panel-2); }
.cm-g-who { font-weight: 700; }
.cm-g-left { color: var(--ovk-muted); font-size: 13px; text-align: right; }
.cm-g-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--ovk-line); overflow: hidden; }
.cm-g-bar i { display: block; width: 71%; height: 100%; border-radius: inherit; background: var(--room-accent, var(--ovk-accent));
  transform-origin: 0 50%; animation: cmGrow var(--ov-dur-4, .52s) var(--ov-ease-out, ease-out) both; }
.cm-g-revoke { grid-column: 1 / -1; justify-self: start; font-size: 13px; font-weight: 700; color: var(--ovk-bad, #ef4444); }
@keyframes cmGrow { from { transform: scaleX(0); } }

.cm-f-main { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); }
.cm-f-saved { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(10, 12, 18, .7); color: #fff;
  font-size: 12.5px; font-weight: 700; animation: cmRise var(--ov-dur-3, .32s) var(--ov-ease-out, ease-out) both; animation-delay: var(--ov-dur-4, .52s); }
.cm-f-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cm-f-strip li { display: grid; gap: 4px; justify-items: center; font-size: 11px; color: var(--ovk-muted); }
.cm-f-strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; outline: 2px solid transparent; outline-offset: 1px; }
.cm-f-strip li.is-on { color: var(--ovk-text); font-weight: 700; }
.cm-f-strip li.is-on img { outline-color: var(--room-accent, var(--ovk-accent)); }


/* The room's motif: the camera's viewfinder on the sample picture. The focus square locks once and the shutter waits;
   nothing loops. */
.cm-vf { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .75), 0 0 0 1px color-mix(in srgb, var(--room-accent) 30%, transparent); }
.cm-vf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-vf-c { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(255, 255, 255, .9); }
.cm-vf-c.tl { top: 14px; left: 14px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.cm-vf-c.tr { top: 14px; right: 14px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.cm-vf-c.bl { bottom: 14px; left: 14px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.cm-vf-c.br { bottom: 14px; right: 14px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }
.cm-vf-focus { position: absolute; left: 60%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid #ffd27a; border-radius: 10px;
  animation: cmFocus var(--ov-dur-4, .52s) var(--ov-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) both; animation-delay: var(--ov-dur-3, .32s); }
@keyframes cmFocus { from { transform: scale(1.5); opacity: 0; } }
.cm-vf-top { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 4px 10px; border-radius: 999px;
  background: rgba(10, 12, 18, .6); color: #fff; font-size: 12px; }
.cm-vf-top b { color: #ffd27a; }
.cm-vf-shutter { position: absolute; left: 50%; bottom: 18px; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 12, 18, .45), 0 0 0 7px rgba(255, 255, 255, .85); }
.cm-live-btn svg { width: 20px; height: 20px; display: block; }
/* On a phone the room kit turns its picture into a faint corner decoration; Cam's picture is the product, so it
   stays in the page, under the buttons, at full strength. */
@media (max-width: 759px) {
  .cm-home .sc-room-pic { position: static; z-index: auto; width: auto; opacity: 1; margin-top: 18px; pointer-events: auto; }
  .cm-vf { width: min(100%, 280px); border-radius: 18px; }
  .cm-vf-shutter { width: 44px; height: 44px; margin-left: -22px; bottom: 14px; }
}

/* A code sample scrolls inside its own box; a long line never widens the page on a phone (11-01 phone sweep). */
.cm-code { max-width: 100%; overflow-x: auto; padding: 12px 14px; border: 1px solid var(--border, #26344d); border-radius: 12px; background: var(--bg-card, #0f1729); font-size: .84rem; line-height: 1.5; }

/* Tables on a phone (phone sweep, 2026-11-01): a table of three columns or more whose cells name their column (data-label) shows each row as a card, the first
   cell its title and every other cell named by its column (html.js gives each cell its data-label). Narrower tables
   stay tables. Nothing is left out and nothing scrolls sideways. */
@media (max-width: 640px) {
    .table-wrap:has(> table thead th:nth-child(3)):has(> table td[data-label]) { overflow: visible; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) { display: block; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) tbody { display: grid; gap: 10px; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) tr { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, var(--bg-secondary, #101828)); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td:first-child { font-weight: 700; color: var(--text-primary, #e6edf7); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
    .table-wrap > table:has(thead th:nth-child(3)):has(td[data-label]) td:empty { display: none; }
}

/* Inline code in prose breaks anywhere: a full URL in a step ran 61 px past a 320 px screen (2026-11-01). */
.cm-steps code, .cm-fine code, main li code, main p code { overflow-wrap: anywhere; }


/* ── The camera app (11-07: "feel more like an app, especially on phone … a bigger interface … animations") ──────────
   A phone gets the whole screen under the bar: the viewfinder, its controls on it like a phone camera (grid and timer on
   top, the filter strip, the gallery thumb, the shutter and the flip at the bottom). A tablet or a desktop gets a large
   framed viewfinder with the same controls. Motion only where something happens: the shutter press, the flash, the
   countdown, the filter strip's snap. */
.cm-cam-app { display: grid; gap: 22px; }
.cm-camera { position: relative; display: grid; gap: 12px; margin: 0; }
.cm-stage { position: relative; overflow: hidden; touch-action: pan-y; border-radius: 26px; background: #04060b; aspect-ratio: 4 / 3; max-height: 72vh; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 70px -40px rgba(0,0,0,.9); isolation: isolate; }
.cm-stage video, .cm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .25s ease; }
.cm-camera[data-facing="user"] .cm-stage video { transform: scaleX(-1); }
.cm-grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255,255,255,.35) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(255,255,255,.35) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
                linear-gradient(transparent calc(33.333% - .5px), rgba(255,255,255,.35) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(255,255,255,.35) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
.cm-grid-overlay[hidden] { display: none; }
/* The flash on capture, and the countdown's big number. */
.cm-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.cm-flash.is-on { animation: cm-flash .42s ease-out; }
@keyframes cm-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.cm-count { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: clamp(72px, 22vw, 160px); font-weight: 900; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.5); pointer-events: none; }
.cm-count:empty { display: none; }
/* A swipe's new mode, shown on the picture for a moment. */
.cm-mode-say { position: absolute; z-index: 3; top: 18px; left: 50%; padding: 6px 14px; border-radius: 999px; background: rgba(4,6,11,.55); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    opacity: 0; transform: translate(-50%, -6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.cm-mode-say.is-on { opacity: 1; transform: translate(-50%, 0); }
.cm-mode-say:empty { display: none; }
/* Live: who is live on OpenVibe.Live, their picture on the stage and a picker where the filters were. The camera is not
   needed, so its off card, the filters and the grid and timer step aside; the shutter turns red. */
.cm-live { position: absolute; inset: 0; z-index: 2; background: #04060b; }
.cm-live[hidden] { display: none; }
.cm-live-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cm-live-frame[hidden] { display: none; }
.cm-live-empty { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; gap: 10px; padding: 24px 24px 80px; text-align: center; color: rgba(232,236,243,.8); font-weight: 650; line-height: 1.5; }
.cm-live-empty[hidden] { display: none; }
.cm-live-empty a { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--room-accent); color: var(--room-on, #fff); text-decoration: none; font-weight: 800; }
.cm-live-empty br { display: none; }
.cm-live-picks { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 8px; padding: 4px 14px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.cm-live-picks::-webkit-scrollbar { display: none; }
.cm-live-pick { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; background: rgba(4,6,11,.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.cm-live-pick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.cm-live-pick[aria-checked="true"] { background: color-mix(in srgb, var(--room-accent) 80%, rgba(4,6,11,.4)); }
.cm-camera[data-mode="live"] .cm-off, .cm-camera[data-mode="live"] .cm-filters, .cm-camera[data-mode="live"] .cm-top { display: none; }
.cm-camera[data-mode="live"] .cm-shutter span { background: #ef4444; }
.cm-camera[data-mode="live"] .cm-flip { visibility: hidden; }
.cm-status .cm-copy { margin-left: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--border, #1f2d47); border-radius: 999px; background: var(--bg-card, #0f1729); color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cm-count.is-tick { animation: cm-tick .9s cubic-bezier(.2,1.3,.4,1); }
@keyframes cm-tick { 0% { transform: scale(1.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { opacity: .2; } }
/* Off: a calm card on the dark stage, one big button. */
.cm-off { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #e8ecf3;
    background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--room-accent) 22%, #04060b) 0%, #04060b 70%); }
.cm-camera:not([data-state="off"]) .cm-off { display: none; }
.cm-off-title { margin: 6px 0 0; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; }
.cm-off-text { margin: 0; max-width: 34ch; color: rgba(232,236,243,.75); line-height: 1.5; }
.cm-off-note { margin: 0; font-size: 14px; color: rgba(232,236,243,.75); }
.cm-off-note a { color: #fff; font-weight: 700; }
.cm-btn-big { min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 800; background: var(--room-accent); color: var(--room-on, #fff); border-color: transparent; box-shadow: 0 10px 30px -12px var(--room-accent); }
.cm-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: rgba(232,236,243,.85); font-weight: 650; cursor: pointer; }
.cm-pick svg { width: 18px; height: 18px; }
.cm-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cm-pick:hover { background: rgba(255,255,255,.08); }
/* On the stage: the top bar and the filter strip. */
.cm-top { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.cm-round, .cm-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 999px; color: #fff; background: rgba(4,6,11,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: background-color .15s, transform .15s; }
.cm-round { padding: 0; width: 44px; }
.cm-round svg, .cm-pill svg { width: 20px; height: 20px; }
.cm-round[aria-pressed="true"], .cm-pill.is-set { background: color-mix(in srgb, var(--room-accent) 75%, rgba(4,6,11,.4)); }
.cm-round:active, .cm-pill:active { transform: scale(.94); }
.cm-filters { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; display: flex; gap: 8px; padding: 4px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cm-filters::-webkit-scrollbar { display: none; }
.cm-swatch { flex: none; scroll-snap-align: center; display: grid; justify-items: center; gap: 4px; padding: 4px; border: 0; background: none; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.cm-swatch-chip { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 0 0 2px rgba(255,255,255,.35); transition: box-shadow .15s, transform .15s;
    background: radial-gradient(circle at 30% 30%, #ffd27a 0 18%, transparent 19%), linear-gradient(160deg, #6fb6ff, #8f6bff 45%, #ff7aa8 75%, #ffcf6b); }
.cm-swatch[aria-checked="true"] .cm-swatch-chip { box-shadow: 0 0 0 3px #fff; transform: scale(1.06); }
.cm-camera[data-state="off"] .cm-top, .cm-camera[data-state="off"] .cm-filters { display: none; }
/* Under the stage: the gallery thumb, the mode switch over the shutter, the flip. */
.cm-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 6px; }
.cm-thumb { justify-self: start; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; color: var(--text-secondary, #96a7c2); background: var(--bg-card, #0f1729); box-shadow: inset 0 0 0 1px var(--border, #1f2d47); }
.cm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-thumb svg { width: 24px; height: 24px; }
.cm-thumb.is-new { animation: cm-pop .5s cubic-bezier(.2,1.5,.35,1); }
@keyframes cm-pop { 0% { transform: scale(.6); } 100% { transform: none; } }
.cm-flip { justify-self: end; color: var(--text-primary, #e6edf7); background: var(--bg-card, #0f1729); box-shadow: inset 0 0 0 1px var(--border, #1f2d47); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cm-shoot-wrap { display: grid; justify-items: center; gap: 8px; }
.cm-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary, #e6edf7) 6%, transparent); }
.cm-mode { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; transition: background-color .2s ease, color .2s ease; color: var(--text-secondary, #96a7c2); font: inherit; font-size: 12.5px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.cm-mode[aria-checked="true"] { color: var(--room-strong, var(--room-accent)); background: color-mix(in srgb, var(--room-accent) 16%, transparent); }
.cm-shutter { position: relative; display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cm-shutter::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--text-primary, #e6edf7); }
.cm-shutter span { width: 60px; height: 60px; border-radius: 50%; background: var(--text-primary, #e6edf7); transition: transform .12s ease, background-color .15s; }
.cm-shutter:active span, .cm-shutter.is-firing span { transform: scale(.86); }
.cm-camera[data-mode="burst"] .cm-shutter span { background: var(--room-accent); }
.cm-shutter:focus-visible { outline: 3px solid var(--room-accent); outline-offset: 4px; }
.cm-under { display: grid; gap: 8px; justify-items: center; }
.cm-caption { width: min(100%, 520px); }
.cm-caption input { width: 100%; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #0f1729); color: inherit; font: inherit; text-align: center; box-sizing: border-box; }
.cm-caption input:focus { outline: 2px solid var(--room-accent); outline-offset: 1px; }
.cm-status { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary, #96a7c2); }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-count-label { font-size: 13px; color: var(--text-muted, #7386a3); }
/* A phone: the whole screen under the bar, the controls in the thumb's reach. */
@media (max-width: 700px) {
    .cm-cam-app { gap: 18px; }
    .cm-wrap.cm-cam-app, .cm-cam-app { padding-top: 0; }
    .cm-camera { margin: 0 calc(-1 * var(--cm-gutter, 16px)); min-height: calc(100dvh - var(--ovnav-h, 60px)); grid-template-rows: 1fr auto auto; gap: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
    .cm-stage { aspect-ratio: auto; max-height: none; min-height: 0; border-radius: 0 0 26px 26px; }
    .cm-bar { padding: 0 16px; }
    .cm-under { padding: 0 16px; }
}
@media (min-width: 701px) { .cm-cam-app { padding-top: 18px; } .cm-stage { width: 100%; } .cm-bar { width: min(100%, 560px); margin: 0 auto; } .cm-filters { justify-content: safe center; } }
/* A tablet or a desktop (11-07, "a big layout"): the camera is as tall as the screen under the bar. The picture takes the
   width; a rail on its right holds flip at the top, the modes over the shutter in the middle and your photos at the
   foot, as a camera app does on a tablet. The caption and the status sit under the picture. */
@media (min-width: 900px) {
    .cm-camera { grid-template-columns: minmax(0, 1fr) 128px; grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px;
        height: calc(100dvh - var(--ovnav-h, 60px) - 40px); min-height: 460px; }
    .cm-stage { grid-column: 1; grid-row: 1; aspect-ratio: auto; max-height: none; height: 100%; }
    .cm-bar { grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0; padding: 18px 0; grid-template-columns: none; grid-template-rows: 1fr auto 1fr;
        justify-items: center; border-radius: 26px; background: var(--bg-card, #0f1729); box-shadow: inset 0 0 0 1px var(--border, #1f2d47); }
    .cm-flip { grid-row: 1; align-self: start; justify-self: center; }
    .cm-shoot-wrap { grid-row: 2; gap: 14px; }
    .cm-thumb { grid-row: 3; align-self: end; justify-self: center; width: 60px; height: 60px; }
    .cm-modes { flex-direction: column; border-radius: 18px; }
    .cm-mode { height: 34px; }
    .cm-shutter { width: 84px; height: 84px; }
    .cm-shutter span { width: 66px; height: 66px; }
    .cm-under { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 520px) auto; justify-content: center; align-items: center; gap: 16px; }
}


/* The /developers embed: the attributes, events and methods tables read as text, not as nowrap cells, and the live
   element sits in the page's own column. */
.cm-doc-table td, .cm-doc-table th { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.cm-doc-table td:first-child, .cm-doc-table th:first-child { width: 1%; white-space: nowrap; }
.cm-doc-table code { overflow-wrap: anywhere; }
.cm-embed-demo { max-width: 660px; margin: 18px 0 8px; }
.cm-embed-demo .cm-photos { margin-top: 10px; }

/* The camera in your own app (home, 11-07): the live element above the two lines that put it anywhere. */
.cm-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 440px); margin: 0 auto; }
.cm-build-cam { width: 100%; min-width: 0; --ov-camera-radius: 22px; }
.cm-build-code { position: relative; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border, #1f2d47); background: var(--bg-primary, #0b0f1a); }
.cm-build-code figcaption { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.cm-build-code pre { margin: 0; padding-right: 64px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; }
.cm-build-copy { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #101828); color: var(--text-primary, #e6edf7); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cm-build-copy:hover { border-color: var(--accent, #00c7d2); }