/* web/next/next.css, Material v3 (2026-09-15): */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-var-italic.woff2") format("woff2");
}

/* UX-36 (owner yes 2026-10-03): the old app's stylesheet no longer blocks the first paint (index.html
   fetches styles.bundle.css as media=print and boot-canonical.js turns it on when it arrives). What the
   rebuilt app borrowed from it lives here, so the first paint is the picture the member keeps: the --sans
   the wordmark reads and the 16px floor on a phone's text fields. The Geist faces the wordmark and the
   public face's mono draw in sit in next/auth-home.css (same journey; this sheet keeps only the Hanken
   UI faces and the seven caption faces, verify_next_foundation.cjs).
   verify_nx_old_css_free.cjs proves each rebuilt screen draws the same with and without the old sheet. */
/* the wordmark's own reads (logo.jsx VBEWordmark and Logo), at the old sheet's values */
.nx { --sans: "Geist", system-ui, -apple-system, sans-serif; --ink: #F2F6FD; --accent: #4FB8FF; --acc-22: rgba(79,184,255,0.22); --acc-60: rgba(79,184,255,0.60); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-base: calc(560ms * var(--motion, 1)); }
.nx[data-theme="light"] { --ink: #101827; }
@media (max-width: 640px), (pointer: coarse) {
  .nx input[type="text"], .nx input[type="url"], .nx input[type="email"], .nx input[type="password"], .nx input[type="search"], .nx input:not([type]), .nx textarea, .nx select { font-size: 16px !important; }
}

.nx { position: absolute; inset: 0; overflow: auto; background: var(--nx-bg); color: var(--nx-ink-2); font: var(--nx-t-body)/var(--nx-lh-body) var(--nx-font); -webkit-font-smoothing: antialiased; container: nx / inline-size; }
.nx *, .nx *::before, .nx *::after { box-sizing: border-box; }
.nx h1, .nx h2, .nx h3 { margin: 0; color: var(--nx-ink); line-height: var(--nx-lh-title); text-wrap: balance; font-weight: 500; }
.nx h1 { font-size: var(--nx-t-page); letter-spacing: var(--nx-track-title); }
.nx h2 { font-size: var(--nx-t-section); letter-spacing: -0.02em; }
.nx h3 { font-size: var(--nx-t-lead); font-weight: 600; }
.nx .nx-hero { font-size: var(--nx-t-hero); font-weight: 500; letter-spacing: var(--nx-track-hero); line-height: 1.05; }
.nx .nx-hero em, .nx .nx-display em { font-style: normal; color: var(--nx-sky-text); }
.nx p { margin: 0; max-width: 62ch; color: var(--nx-ink-3); }
.nx a { color: var(--nx-sky-text); text-decoration: none; transition: color var(--nx-d-state) var(--nx-ease); }
.nx a:hover { color: var(--nx-ink); }
.nx :focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx ::selection { background: var(--nx-sky-soft); color: var(--nx-ink); }
.nx .nx-num { font-variant-numeric: tabular-nums; }
.nx .nx-muted { color: var(--nx-ink-3); }
.nx .nx-faint { color: var(--nx-ink-4); }
.nx .nx-small { font-size: var(--nx-t-label); }
.nx .nx-strong { color: var(--nx-ink); font-weight: 500; }

.nx .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; --ic-a: var(--nx-sky); }
.nx .ic--mono, .nx .nx-chip .ic, .nx .nx-btn--primary .ic, .nx .nx-check .ic, .nx .nx-tile__check .ic, .nx .nx-play .ic, .nx .nx-top__mark .ic { --ic-a: currentColor; }
.nx .nx-chip--on .ic, .nx .nx-chip--live .ic { --ic-a: var(--nx-sky-text); }
.nx .ic--sm { width: 15px; height: 15px; }
.nx .ic--lg { width: 22px; height: 22px; }
.nx .ic--xl { width: 28px; height: 28px; stroke-width: 1.5; }

.nx-frame { position: relative; border-left: 1px solid var(--nx-hair); border-right: 1px solid var(--nx-hair); min-height: 100%; }
.nx-frame::before, .nx-frame::after { content: ""; position: absolute; top: 60px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid var(--nx-tri); z-index: 2; }
.nx-frame::before { left: -8px; } .nx-frame::after { right: -8px; }
.nx-cross { position: relative; }
.nx-cross::before, .nx-cross::after { content: "+"; position: absolute; top: -12px; color: var(--nx-marker); font: 300 16px/1 var(--nx-font); }
.nx-cross::before { left: -6px; } .nx-cross::after { right: -6px; }

.nx-well { background: var(--nx-well); box-shadow: var(--nx-inset-hi); }

.nx-card__in > .nx-chip, .nx-gate__in > .nx-chip, .nx-stack > .nx-chip, .nx-card__in > .nx-pill { align-self: flex-start; }

.nx-top__brand { font-weight: 600; letter-spacing: -0.02em; font-size: 19px; color: var(--nx-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }

.nx-logo { width: 22px; height: 27px; color: var(--nx-sky); fill: none; stroke: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(79, 184, 255, 0.6)) drop-shadow(0 0 13px rgba(79, 184, 255, 0.22)); flex: none; }
.nx-logo--lg { width: 40px; height: 50px; }
.nx-wordmark { font-weight: 700; letter-spacing: -0.045em; font-size: 19px; color: var(--nx-ink); line-height: 1; }
.nx-wordmark em { font-style: normal; color: var(--nx-sky); letter-spacing: -0.03em; }
.nx-top__spacer { flex: 1; }
.nx-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--nx-disc); border: 2px solid var(--nx-ring); color: var(--nx-ink-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--nx-t-label); overflow: hidden; }
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nx-body { padding: var(--nx-s7) var(--nx-s7) var(--nx-s9); display: flex; flex-direction: column; gap: var(--nx-s6); max-width: 1240px; margin: 0 auto; width: 100%; }
.nx-row { display: flex; gap: var(--nx-s3); align-items: center; flex-wrap: wrap; }
.nx-actions { display: flex; gap: var(--nx-s2); flex-wrap: wrap; align-items: center; }
.nx-stack { display: flex; flex-direction: column; gap: var(--nx-s3); }

.nx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--nx-target); padding: 0 var(--nx-s5); border-radius: var(--nx-r-btn); font: 400 var(--nx-t-body)/1 var(--nx-font); border: 0; cursor: pointer; white-space: nowrap; color: var(--nx-ink); background: var(--nx-btn); outline: 2px solid transparent; outline-offset: 0; overflow: hidden; transition: outline-color var(--nx-d-state) var(--nx-ease), background var(--nx-d-state) var(--nx-ease), transform var(--nx-d-state) var(--nx-ease), color var(--nx-d-state) var(--nx-ease); }
.nx-btn > * { position: relative; z-index: 2; }
.nx-btn:hover, .nx-btn.is-hover { outline-color: var(--nx-hover-ring); }
.nx-btn:active, .nx-btn.is-active { transform: translateY(1px); background: var(--nx-btn); }
.nx-btn:focus-visible, .nx-btn.is-focus { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx-btn[disabled], .nx-btn[aria-disabled="true"], .nx-btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; outline-color: transparent; }
.nx-btn--primary { color: #FFFFFF; font-weight: 500; background: linear-gradient(to right top, var(--nx-tint), var(--nx-tint-2)); border-radius: 12px; }
.nx-btn--primary:hover .nx-glow::after, .nx-btn--primary.is-hover .nx-glow::after { background: var(--nx-tint-2); }
.nx-btn--primary:active .nx-glow::after, .nx-btn--primary.is-active .nx-glow::after { background: var(--nx-tint); }
.nx-btn--wash::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(138, 212, 255, 0.12), rgba(79, 184, 255, 0.08)); transform: scaleX(0); transform-origin: right; transition: transform 350ms var(--nx-ease-out); border-radius: inherit; z-index: 1; }
.nx-btn--wash:hover::before, .nx-btn--wash.is-hover::before { transform: scaleX(1); transform-origin: left; }
.nx-btn--danger { color: var(--nx-bad); }
.nx-btn--danger:hover, .nx-btn--danger.is-hover { outline-color: var(--nx-bad-rim); }
.nx-btn--sm { min-height: 36px; padding: 0 var(--nx-s4); font-size: 14px; border-radius: 9px; }
.nx-btn--lg { min-height: 48px; padding: 0 var(--nx-s6); font-size: 15px; }
.nx-btn--block { width: 100%; justify-content: space-between; }
.nx-btn--icon { padding: 0; width: var(--nx-target); }
.nx-btn--sm.nx-btn--icon { width: 36px; }
.nx-btn__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #FFFFFF; animation: nx-spin 0.8s linear infinite; }
@keyframes nx-spin { to { transform: rotate(360deg); } }

.nx-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; opacity: var(--nx-glow-opacity); }
.nx-glow::after { content: ""; position: absolute; inset: 1.5px; border-radius: 11px; background: linear-gradient(to right top, var(--nx-tint), var(--nx-tint-2)); z-index: 1; }
.nx-btn:not(.nx-btn--primary) .nx-glow::after { background: var(--nx-btn); }
.nx-glow i { position: absolute; border-radius: 50%; filter: blur(8px); background: radial-gradient(ellipse at center, var(--nx-glow-a) 0, var(--nx-glow-b) 30%, var(--nx-glow-c) 55%, transparent 80%); }
.nx-glow i:nth-child(1) { width: 60px; height: 35px; animation: nx-glow-a var(--nx-d-glow) ease-in-out infinite; }
.nx-glow i:nth-child(2) { width: 35px; height: 60px; animation: nx-glow-b var(--nx-d-glow) ease-in-out infinite; }
.nx-glow--card::after { inset: 10px; border-radius: var(--nx-r-card); background: linear-gradient(180deg, var(--nx-price-top), var(--nx-price-bot)); }
.nx-glow--card i:nth-child(1) { width: 140px; height: 80px; animation-name: nx-glow-ca; animation-duration: 6s; }
.nx-glow--card i:nth-child(2) { width: 80px; height: 140px; animation-name: nx-glow-cb; animation-duration: 6s; }
@keyframes nx-glow-a { 0% { left: -40px; top: -25px; opacity: 0; } 3% { opacity: 1; } 45% { left: calc(100% - 25px); top: -25px; opacity: 1; } 95% { left: calc(100% - 25px); top: calc(100% + 15px); opacity: 1; } to { left: calc(100% - 25px); top: calc(100% + 30px); opacity: 0; } }
@keyframes nx-glow-b { 0% { left: -25px; top: -40px; opacity: 0; } 3% { opacity: 1; } 45% { left: -25px; top: calc(100% - 25px); opacity: 1; } 95% { left: calc(100% + 15px); top: calc(100% - 25px); opacity: 1; } to { left: calc(100% + 30px); top: calc(100% - 25px); opacity: 0; } }
@keyframes nx-glow-ca { 0% { left: -80px; top: -50px; opacity: 0; } 3% { opacity: 1; } 45% { left: calc(100% - 50px); top: -50px; opacity: 1; } 95% { left: calc(100% - 50px); top: calc(100% + 40px); opacity: 1; } to { left: calc(100% - 50px); top: calc(100% + 80px); opacity: 0; } }
@keyframes nx-glow-cb { 0% { left: -50px; top: -80px; opacity: 0; } 3% { opacity: 1; } 45% { left: -50px; top: calc(100% - 50px); opacity: 1; } 95% { left: calc(100% + 40px); top: calc(100% - 50px); opacity: 1; } to { left: calc(100% + 80px); top: calc(100% - 50px); opacity: 0; } }

.nx-shine { position: relative; }
.nx-shine::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--nx-a, 0deg), transparent 0 60%, var(--nx-glow-b) 80%, var(--nx-glow-a) 86%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: nx-shine 5s linear infinite; pointer-events: none; opacity: var(--nx-glow-opacity); }
@property --nx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes nx-shine { to { --nx-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .nx-glow i { animation: none; opacity: 0; } .nx-shine::before { animation: none; } .nx-btn__spin { animation-duration: 2s; } }
.nx-link { color: var(--nx-sky-text); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.nx-link:hover { color: var(--nx-ink); }

.nx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--nx-s3); }
.nx-tile { display: flex; padding: 1px; border-radius: var(--nx-r-tile); background: linear-gradient(var(--nx-rim-top), var(--nx-rim-bot)); box-shadow: var(--nx-shadow-xl); border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--nx-ink-2); position: relative; outline: 2px solid transparent; transition: outline-color var(--nx-d-state) var(--nx-ease), transform var(--nx-d-state) var(--nx-ease); }
.nx-tile__in { border-radius: calc(var(--nx-r-tile) - 1px); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); padding: var(--nx-s3); display: flex; flex-direction: column; gap: var(--nx-s2); min-height: 124px; flex: 1; width: 100%; position: relative; overflow: hidden; }
.nx-tile:hover, .nx-tile.is-hover { outline-color: var(--nx-hover-ring); }
.nx-tile:hover .nx-tile__in, .nx-tile.is-hover .nx-tile__in { box-shadow: var(--nx-inset-hover); }
.nx-tile:active, .nx-tile.is-active { transform: translateY(1px); }
.nx-tile[aria-pressed="true"], .nx-tile.is-on { background: linear-gradient(130deg, var(--nx-sky-rim) 0%, var(--nx-rim-top) 25%, var(--nx-rim-bot) 77.5%, var(--nx-sky-rim) 95%); }
.nx-tile__face { height: 64px; border-radius: 9px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); position: relative; overflow: hidden; }
.nx-tile__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-tile__name { font-weight: 500; color: var(--nx-ink); display: flex; align-items: center; gap: 8px; }
.nx-tile__sub { color: var(--nx-ink-4); font-size: var(--nx-t-label); }
.nx-tile--add { background: transparent; box-shadow: none; }
.nx-tile--add .nx-tile__in { background: transparent; border: 1.5px dashed var(--nx-ring); align-items: center; justify-content: center; color: var(--nx-ink-3); font-weight: 500; gap: 6px; }
.nx-tile--add:hover .nx-tile__in { border-color: var(--nx-hover-border); color: var(--nx-ink); box-shadow: none; }
.nx-tile__check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-sky); color: var(--nx-sky-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 8px 1px rgba(79, 184, 255, 0.5); z-index: 2; }
.nx-tile__check .ic { width: 13px; height: 13px; stroke-width: 3; }
.nx-tile[disabled], .nx-tile.is-disabled { opacity: 0.45; cursor: not-allowed; }

.nx-field { display: flex; align-items: center; gap: var(--nx-s3); background: var(--nx-field); box-shadow: var(--nx-inset-hi); border: 1px solid var(--nx-rim-top); border-radius: var(--nx-r-field); padding: 0 var(--nx-s4); min-height: var(--nx-target); color: var(--nx-ink-4); width: 100%; outline: 2px solid transparent; transition: outline-color var(--nx-d-state) var(--nx-ease), border-color var(--nx-d-state) var(--nx-ease); }
.nx-field .ic { color: var(--nx-ink-4); }
.nx-field__label { font-size: var(--nx-t-label); font-weight: 500; color: var(--nx-ink-3); white-space: nowrap; }
.nx-field input, .nx-field__input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--nx-ink); font: inherit; min-height: 42px; caret-color: var(--nx-sky); }
.nx-field input::placeholder { color: var(--nx-ink-4); }
.nx-field input:focus { outline: none; }
.nx-field:hover { border-color: var(--nx-hover-border); }
.nx-field:focus-within, .nx-field.is-focus { outline-color: var(--nx-sky); border-color: transparent; }
.nx-field__value { color: var(--nx-ink); font-weight: 500; margin-left: auto; font-variant-numeric: tabular-nums; }
.nx-field.is-bad { border-color: var(--nx-bad-rim); }
.nx-field.is-bad:focus-within { outline-color: var(--nx-bad); }
.nx-field.is-disabled { opacity: 0.45; }
.nx-field-msg { font-size: var(--nx-t-label); color: var(--nx-ink-4); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.nx-field-msg--bad { color: var(--nx-bad); }
.nx-field--area { align-items: flex-start; padding: var(--nx-s3) var(--nx-s4); }
.nx-field--area textarea { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--nx-ink); font: inherit; resize: vertical; min-height: 72px; caret-color: var(--nx-sky); }
.nx-field--area textarea:focus { outline: none; }

.nx-toggle { width: 60px; height: 30px; border-radius: var(--nx-r-pill); background: var(--nx-well); box-shadow: var(--nx-inset-hi); border: 1px solid var(--nx-rim-top); position: relative; cursor: pointer; padding: 0; transition: background var(--nx-d-state) var(--nx-ease); }
.nx-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-ink-4); transition: left var(--nx-d-state) var(--nx-ease), background var(--nx-d-state) var(--nx-ease); }
.nx-toggle[aria-checked="true"] { background: linear-gradient(90deg, #BFE6FF, #4FB8FF 45%, #1E3A55 100%); border-color: transparent; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25); }
.nx-toggle[aria-checked="true"]::after { left: 33px; background: var(--nx-well); }

.nx-pill { display: inline-flex; padding: 2px; border-radius: var(--nx-r-pill); background: linear-gradient(135deg, rgba(162, 156, 150, 0.5), rgba(82, 82, 82, 0.2) 20%, rgba(82, 82, 82, 0.2) 80%, rgba(162, 156, 150, 0.5) 95%); box-shadow: var(--nx-shadow-xl); align-self: flex-start; }
.nx-pill__in { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: var(--nx-r-pill); background: var(--nx-pill); color: var(--nx-ink-2); font-size: 15px; line-height: 1; min-height: 44px; }
.nx-pill__disc { width: 32px; height: 32px; border-radius: 50%; background: var(--nx-disc); border: 2px solid var(--nx-ring); display: inline-grid; place-items: center; color: var(--nx-ink); }
.nx-pill__disc .ic { width: 16px; height: 16px; }
.nx-pill--on .nx-pill__disc .ic { --ic-a: var(--nx-sky-text); color: var(--nx-ink); }
.nx-pill--on { background: linear-gradient(130deg, var(--nx-sky-rim) 0%, rgba(34, 33, 31, 0.31) 25%, rgba(34, 33, 31, 0.31) 77.5%, var(--nx-sky-rim) 95%); }
.nx-pill--on .nx-pill__in { background: var(--nx-fill-top); }
.nx-pill--on .nx-pill__disc { border: 0; color: var(--nx-sky); }
.nx-pill--sm .nx-pill__in { min-height: 36px; font-size: 14px; padding: 4px 14px 4px 4px; }
.nx-pill--sm .nx-pill__disc { width: 26px; height: 26px; }
.nx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 26px; border-radius: var(--nx-r-pill); font-size: var(--nx-t-label); font-weight: 500; line-height: 1; border: 1px solid var(--nx-rim-top); color: var(--nx-ink-3); background: var(--nx-flat); white-space: nowrap; }
.nx-chip .ic { width: 13px; height: 13px; }
.nx-chip--on { color: var(--nx-sky-text); border-color: var(--nx-chip-border); background: linear-gradient(to right, var(--nx-chip-a), var(--nx-chip-b)); }
.nx-chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-sky-2); box-shadow: 0 0 8px 1px rgba(79, 184, 255, 0.5); animation: nx-beat 3s ease-in-out infinite; }
@keyframes nx-beat { 0%, 30%, to { box-shadow: 0 0 8px 1px rgba(79, 184, 255, 0.5); transform: scale(1); } 15% { box-shadow: 0 0 16px 4px rgba(79, 184, 255, 0.8); transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .nx-chip--live::before { animation: none; } }

.nx-card { padding: 1px; border-radius: var(--nx-r-card); background: linear-gradient(var(--nx-rim-top), var(--nx-rim-bot)); box-shadow: var(--nx-shadow-xl); }
.nx-card__in { border-radius: calc(var(--nx-r-card) - 1px); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); padding: var(--nx-s6) var(--nx-s7); display: flex; flex-direction: column; gap: var(--nx-s4); height: 100%; position: relative; overflow: hidden; }
.nx-card--flat { padding: 0; background: var(--nx-flat); border: 1px solid var(--nx-rim-top); box-shadow: none; border-radius: 12px; transition: border-color var(--nx-d-state) var(--nx-ease); }
.nx-card--flat .nx-card__in { background: transparent; padding: var(--nx-s5) var(--nx-s6); border-radius: 11px; }
.nx-card--flat.is-hover, .nx-card--flat:hover { border-color: var(--nx-hover-border); }
.nx-card--price { padding: 10px; border-radius: var(--nx-r-price); background: var(--nx-bg); position: relative; border: 1px solid var(--nx-rim-top); box-shadow: var(--nx-shadow-xl); }
.nx-card--price .nx-card__in { border-radius: var(--nx-r-card); background: linear-gradient(180deg, var(--nx-price-top), var(--nx-price-bot)); border: 1px solid var(--nx-price-border); }
.nx-stat { display: flex; flex-direction: column; gap: 4px; }
.nx-stat__n { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nx-ink); }
.nx-stat__of { color: var(--nx-ink-4); font-size: 20px; font-weight: 500; letter-spacing: 0; }
.nx-stat__l { color: var(--nx-ink-3); font-size: 14px; }
.nx-stat--big .nx-stat__n { font-size: 48px; }

.nx-progress { height: 8px; border-radius: var(--nx-r-pill); background: var(--nx-well); box-shadow: var(--nx-inset-hi); overflow: hidden; }
.nx-progress i { display: block; height: 100%; border-radius: var(--nx-r-pill); background: linear-gradient(90deg, var(--nx-sky-line), var(--nx-sky)); box-shadow: 0 0 10px 1px rgba(79, 184, 255, 0.45); transition: width var(--nx-d-enter) var(--nx-ease); }
.nx-progress--bad i { background: var(--nx-bad); box-shadow: none; }

.nx-progress--indeterminate { position: relative; }
.nx-progress--indeterminate i { position: absolute; top: 0; left: 0; width: 38%; animation: nx-progress-slide 1.6s var(--nx-ease) infinite; }
@keyframes nx-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .nx-progress--indeterminate i { animation: none; left: 31%; } }

.nx-skel { display: grid; gap: 10px; }
.nx-skel__media, .nx-skel__line { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--nx-well) 0%, var(--nx-panel-2, var(--nx-flat)) 45%, var(--nx-well) 90%); background-size: 220% 100%; box-shadow: var(--nx-inset-hi); animation: nx-skel 1.5s ease-in-out infinite; }
.nx-skel__media { aspect-ratio: 16 / 9; border-radius: 10px; }
.nx-skel__line { height: 12px; }
.nx-skel__line:last-child { width: 62%; }
.nx-skel__line:first-of-type:not(:last-child) { width: 86%; }
@keyframes nx-skel { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .nx-skel__media, .nx-skel__line { animation: none; } }
.nx-stages { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--nx-s3); font-size: 14px; color: var(--nx-ink-4); }
.nx-stages span { display: flex; align-items: center; gap: 10px; padding-top: 12px; position: relative; }
.nx-stages span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--nx-ring); flex: none; box-sizing: border-box; }
.nx-stages span::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--nx-line); }
.nx-stages span[data-state="done"] { color: var(--nx-ink-3); }
.nx-stages span[data-state="done"]::before { border-color: var(--nx-sky-2); background: var(--nx-sky-2); }
.nx-stages span[data-state="done"]::after { background: linear-gradient(90deg, var(--nx-sky-line), var(--nx-sky)); }
.nx-stages span[data-state="now"] { color: var(--nx-ink); font-weight: 500; }
.nx-stages span[data-state="now"]::before { border-color: var(--nx-sky-2); background: var(--nx-sky-2); box-shadow: 0 0 8px 1px rgba(79, 184, 255, 0.5); animation: nx-beat 3s ease-in-out infinite; }
.nx-stages span[data-state="now"]::after { background: linear-gradient(90deg, var(--nx-sky), var(--nx-line)); }
.nx-stages span[data-state="bad"] { color: var(--nx-bad); font-weight: 500; }
.nx-stages span[data-state="bad"]::before { border-color: var(--nx-bad); background: var(--nx-bad); }
.nx-progress-truth { display: flex; flex-direction: column; gap: var(--nx-s3); }
.nx-progress-truth__now { color: var(--nx-ink-2); display: flex; justify-content: space-between; gap: var(--nx-s3); flex-wrap: wrap; align-items: baseline; }

.nx-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 4px; border-radius: var(--nx-r-pill); background: var(--nx-well); box-shadow: var(--nx-inset-hi); width: max-content; max-width: 100%; border: 1px solid var(--nx-line); }
.nx-tabs button { padding: 0 16px; color: var(--nx-ink-3); background: transparent; border: 0; border-radius: var(--nx-r-pill); font: 400 14px/1 var(--nx-font); min-height: 36px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--nx-d-state) var(--nx-ease), background var(--nx-d-state) var(--nx-ease); }
.nx-tabs button:hover { color: var(--nx-ink); }
.nx-tabs button[aria-selected="true"] { color: var(--nx-ink); background: var(--nx-panel-2); box-shadow: var(--nx-inset-btn), 0 1px 2px rgba(0, 0, 0, 0.35); }
.nx-tabs button i { font-style: normal; color: var(--nx-ink-4); font-size: var(--nx-t-label); font-variant-numeric: tabular-nums; }
.nx-tabs button[aria-selected="true"] i { color: var(--nx-sky-text); }
.nx-tabs--line { background: transparent; box-shadow: none; padding: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--nx-hair); width: 100%; gap: var(--nx-s4); }
.nx-tabs--line button { border-radius: 0; padding: 12px 2px; min-height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nx-tabs--line button[aria-selected="true"] { background: transparent; box-shadow: none; border-bottom-color: var(--nx-sky); }

.nx-rail { display: flex; flex-direction: column; gap: 6px; }
.nx-clip { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--nx-s3); align-items: center; padding: 7px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; background: transparent; color: var(--nx-ink-2); font: inherit; text-align: left; width: 100%; min-height: var(--nx-target); transition: background var(--nx-d-state) var(--nx-ease), border-color var(--nx-d-state) var(--nx-ease); }
.nx-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(13, 13, 13, 0.6); border: 1.5px solid rgba(255, 255, 255, 0.4); color: #FFFFFF; display: grid; place-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 0 24px rgba(79, 184, 255, 0.25); }
.nx-play .ic { width: 20px; height: 20px; fill: #fff; stroke: none; margin-left: 3px; }

.nx-gate { padding: 1px; border-radius: var(--nx-r-card); background: linear-gradient(var(--nx-rim-top), var(--nx-rim-bot)); box-shadow: var(--nx-shadow-xl); }
.nx-gate__in { border-radius: calc(var(--nx-r-card) - 1px); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); padding: var(--nx-s5) var(--nx-s6); display: flex; flex-direction: column; gap: var(--nx-s3); align-items: flex-start; }
.nx-gate__title { font-size: var(--nx-t-lead); font-weight: 500; color: var(--nx-ink); display: flex; align-items: center; gap: 10px; }

.nx-sheet { position: fixed; inset: auto 0 0 0; background: var(--nx-flat); border-top: 1px solid var(--nx-rim-top); border-top-left-radius: var(--nx-r-sheet); border-top-right-radius: var(--nx-r-sheet); box-shadow: var(--nx-shadow-2xl); padding: var(--nx-s3) var(--nx-s5) var(--nx-s6); display: flex; flex-direction: column; gap: var(--nx-s3); max-height: 85%; overflow: auto; z-index: 5; }
.nx-sheet__grab { width: 40px; height: 4px; border-radius: var(--nx-r-pill); background: var(--nx-ring); align-self: center; border: 0; padding: 0; margin-bottom: 4px; }
.nx-scrim { position: fixed; inset: 0; background: var(--nx-scrim); z-index: 4; }
@container nx (min-width: 860px) { .nx-sheet { inset: 0 0 0 auto; width: 440px; border-radius: 0; border-top: 0; border-left: 1px solid var(--nx-hair); } }
.nx-bar { position: fixed; left: 16px; right: 16px; bottom: 24px; border-radius: var(--nx-r-card); background: var(--nx-bar); border: 1px solid var(--nx-rim-top); box-shadow: var(--nx-shadow-2xl); z-index: 3; padding: 12px 16px; display: flex; align-items: center; gap: var(--nx-s3); }
.nx-bar__text { flex: 1; min-width: 0; }
.nx-bar__text b { display: block; color: var(--nx-ink); font-weight: 600; font-size: 15px; }
.nx-bar__text span { color: var(--nx-ink-4); font-size: 13px; }

.nx-details { color: var(--nx-ink-4); font-size: var(--nx-t-label); }
.nx-details summary { cursor: pointer; color: var(--nx-ink-3); min-height: var(--nx-target-min); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.nx-details summary::-webkit-details-marker { display: none; }
.nx-details summary .ic { width: 14px; height: 14px; transition: transform var(--nx-d-state) var(--nx-ease); }
.nx-details[open] summary .ic { transform: rotate(90deg); }
.nx-details__body { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--nx-t-label); line-height: 1.6; color: var(--nx-ink-3); display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
.nx-details__body b { color: var(--nx-ink-4); font-weight: 500; }

.nx-drop__well { border: 1.5px dashed var(--nx-ring); border-radius: 12px; padding: var(--nx-s7) var(--nx-s6); width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--nx-s3); background: rgba(13, 13, 13, 0.35); transition: border-color var(--nx-d-state) var(--nx-ease), background var(--nx-d-state) var(--nx-ease); }
.nx-drop__well:hover { border-color: var(--nx-hover-border); }
.nx-drop.is-over .nx-drop__well { border-color: var(--nx-sky); background: var(--nx-sky-soft); }

@container nx (max-width: 640px) {
  .nx-frame::before, .nx-frame::after { display: none; }
  .nx-body { padding: var(--nx-s5) var(--nx-s4) 110px; gap: var(--nx-s4); }
  .nx h1 { font-size: 26px; }
  .nx .nx-hero { font-size: 34px; }
  .nx-drop__well { padding: var(--nx-s5) var(--nx-s4); }
  .nx-tiles { grid-template-columns: 1fr 1fr; }
  .nx-stages { grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; }
  .nx-stages span::after { display: none; }
  .nx-stages span { padding-top: 0; }
  .nx-card__in { padding: var(--nx-s5); }
  .nx-card--flat .nx-card__in { padding: var(--nx-s4); }
  .nx-bar { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; }
  .nx-turn--me { max-width: 88%; }
  .nx-turn--them { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
  .nx-turn__mark { width: 26px; height: 26px; }
}

.nx-menu { position: fixed; right: 24px; top: 68px; width: 300px; z-index: 6; }
.nx-menu .nx-card__in { padding: var(--nx-s3); gap: 2px; }
.nx-menu__row { display: flex; align-items: center; gap: 10px; min-height: var(--nx-target); padding: 0 12px; border-radius: 10px; color: var(--nx-ink-2); background: transparent; border: 0; font: inherit; width: 100%; text-align: left; cursor: pointer; text-decoration: none; }
.nx a.nx-menu__row { color: var(--nx-ink-2); }
.nx-menu__row:hover, .nx a.nx-menu__row:hover { background: var(--nx-flat); color: var(--nx-ink); }
.nx-menu__rows { display: flex; flex-direction: column; gap: 2px; }
.nx-menu .nx-progress { margin: 4px 12px 8px; }
.nx-item { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.nx-item__grow { flex: 1; min-width: 160px; }
.nx-field-wrap { display: flex; flex-direction: column; }
.nx-toggle { position: relative; }
.nx-toggle::before { content: ""; position: absolute; inset: -8px -4px; }
.nx-empty { display: flex; flex-direction: column; align-items: center; gap: var(--nx-s3); text-align: center; padding: var(--nx-s6) var(--nx-s4); color: var(--nx-ink-3); }
@container nx (max-width: 640px) {
  .nx-menu { display: none; }
}

/* P0.1: the blueprint frame runs beside the content column, as on superx, not at the viewport edge. */
.nx-body.nx-frame { padding-left: var(--nx-s7); padding-right: var(--nx-s7); }

.nx[data-theme="light"] .nx-drop__well { background: var(--nx-well); }
.nx[data-theme="light"] .nx-icontile { background: radial-gradient(120% 90% at 50% 0%, #FFFFFF, var(--nx-well) 70%); border-color: var(--nx-rim-top); color: var(--nx-ink); }
.nx-field input:focus-visible, .nx-field textarea:focus-visible { outline: none; }
.nx-field input[type="search"] { -webkit-appearance: none; appearance: none; }
.nx-field input[type="search"]::-webkit-search-decoration, .nx-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.nx :focus-visible, .nx input:focus, .nx textarea:focus, .nx select:focus { box-shadow: none; }

button.nx-drop__well { font: inherit; color: inherit; cursor: pointer; text-align: center; appearance: none; -webkit-appearance: none; }
button.nx-chip { font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
button.nx-chip:hover { color: var(--nx-ink); border-color: var(--nx-hover-border); }
.nx-tiles--angles { grid-template-columns: 1fr 1fr; }
.nx-folder { display: flex; flex-direction: column; gap: var(--nx-s3); width: 100%; align-items: flex-start; }
.nx-folder__rows { width: 100%; max-height: 240px; overflow: auto; }
.nx-folder__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-menu__meta { margin-left: auto; color: var(--nx-ink-4); font-size: var(--nx-t-label); flex: 0 0 auto; }
.nx-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; color: var(--nx-ink-3); }
.nx-kv b { color: var(--nx-ink-4); font-weight: 400; }
.nx-sheet--faces h2 { margin: 0; }
@container nx (max-width: 640px) {
  .nx-tiles--angles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-tiles--angles .nx-tile__face { height: 52px; }
}

.nx-count { display: flex; align-items: center; gap: var(--nx-s2); }
.nx-count__num { width: 72px; min-height: var(--nx-target); text-align: center; font: inherit; font-size: 18px; font-weight: 600; color: inherit; background: var(--nx-well, transparent); border: 1px solid var(--nx-line); border-radius: var(--nx-r-ctl, 10px); padding: 0 8px; }
.nx-count__num:focus-visible { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; }
.nx-select { min-height: var(--nx-target); font: inherit; font-size: 14px; color: inherit; background: var(--nx-well, transparent); border: 1px solid var(--nx-line); border-radius: var(--nx-r-ctl, 10px); padding: 0 12px; }
.nx-select:focus-visible { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; }
.nx-price { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.nx-chip__btn { all: unset; cursor: pointer; min-height: 24px; display: inline-flex; align-items: center; }
.nx-chip__btn:focus-visible { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; border-radius: 6px; }
.nx-kv { display: grid; gap: 6px; }
.nx-kv .nx-row { justify-content: space-between; gap: var(--nx-s3); }
.nx-field textarea.nx-field__input { resize: vertical; min-height: 44px; line-height: 1.4; }
.nx-field textarea.nx-field__input::placeholder { color: var(--nx-ink-4); }
.nx-field textarea.nx-field__input:focus { outline: none; }

.nx-fmt { display: flex; flex-wrap: wrap; gap: 8px; }

.nx-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.nx-slides__frame { border-radius: 12px; overflow: hidden; background: var(--nx-well); box-shadow: var(--nx-inset-hi); aspect-ratio: 4 / 5; max-width: 360px; }
.nx-slides__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-results [data-control="nx-format-tabs"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nx-results [data-control="nx-format-tabs"] .nx-tabs { width: max-content; }

.nx-editor__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.nx-editor__grid--phone { grid-template-columns: minmax(0, 1fr); }
/* Clip transcript by segment (owner 2026-10-07, transcript.jsx) */
.nx-ctr {list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0;font-size:var(--nx-t-body);color:var(--nx-ink-3)}
.nx-ctr__row{display:grid;gap:2px;min-width:0}
.nx-ctr__time{font-family:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.nx-ctr__removed{color:var(--nx-ink-3)}
.nx-ctr__words{color:var(--nx-ink-2)}
.nx-ctr__words,.nx-ctr__removed{line-height:1.5;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.nx-ctr__host{display:inline-flex;align-items:center;gap:6px;margin-inline-end:8px}
.nx-ctr__dot{width:6px;height:6px;border-radius:50%;background:var(--nx-sky)}
.nx-ctr__jump{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.nx-ctr__hair{flex:1 1 24px;max-width:72px;height:1px;background:var(--nx-hair)}
.nx-ctr__arrow{flex:none;fill:none;stroke:var(--nx-sky);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nx-ctr__word{color:var(--nx-ink-3)}
.nx-ctr__skip{font-variant-numeric:tabular-nums;white-space:nowrap}
.nx-details__body > .nx-ctr{grid-column:1/-1;font-family:var(--nx-font)}
.nx-range { width: 100%; min-height: 24px; accent-color: var(--nx-sky); }
.nx-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nx-versions__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); font-size: 15px; }
.nx-versions__row[data-active="1"] { box-shadow: var(--nx-inset-hi), inset 0 0 0 1px var(--nx-sky-line); }
/* Studio page (2026-10-11): one status beside Save, one save bar, the rest under More */
.nx-editor{gap:24px}.nx-editor__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px}.nx-editor__title,.nx-editor__save{display:grid;gap:8px;min-width:0}.nx-editor__save{justify-items:end}.nx-editor__clip,.nx-versions__meta,.nx-stage-save__left,.nx-fold__line{font-size:15px;color:var(--nx-ink-3)}.nx-editor__savebar,.nx-editor__state,.nx-versions__do{display:flex;align-items:center;gap:8px 16px}.nx-editor__savebar{gap:8px}.nx-editor__state{flex-wrap:wrap;min-height:32px}.nx-editor__savebar .nx-btn,.nx-versions__do .nx-btn{min-height:44px;font-size:15px}.nx-editor__savebar .nx-btn--quiet{box-shadow:inset 0 0 0 1px var(--nx-line)}.nx-editor-status,.nx-stage-save{display:grid;gap:4px;justify-items:end;max-width:440px}.nx-editor-status .nx-stage-save__line{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.nx-editor details.nx-save-about>summary{min-height:32px}.nx-more__item{display:grid;gap:12px}.nx-more .nx-card__in{gap:0}.nx-more__head{font-size:15px;font-weight:600;color:var(--nx-ink-3);padding-bottom:8px}.nx-versions__what{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;min-width:0}.nx-versions__do{grid-column:1/-1}.nx-versions__do .nx-btn{flex:1}.nx-versions__row[data-pending="1"]{box-shadow:var(--nx-inset-hi),inset 0 0 0 1px var(--nx-sky-line)}
.nx-banner-image__frame { max-width: 280px; aspect-ratio: 16 / 9; }

.nx-stage { position: relative; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--nx-well); box-shadow: var(--nx-inset-hi); user-select: none; }
.nx-stage--wide { max-width: 640px; aspect-ratio: 16 / 9; }
.nx-stage:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 3px; }
.nx-stage-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-stage-transport .nx-range { flex: 1; min-width: 80px; width: auto; }
.nx-stage-transport__clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-stage__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.nx-stage__banner { position: absolute; left: 50%; transform: translate(-50%, -50%); cursor: grab; touch-action: none; display: flex; justify-content: center; outline: none; }
.nx-stage__banner--top { transform: translate(-50%, 0); }
.nx-stage__banner:focus-visible { box-shadow: 0 0 0 2px var(--nx-sky); border-radius: 8px; }
.nx-stage__banner:active { cursor: grabbing; }
.nx-stage__logo { position: absolute; transform: translate(-50%, -50%); cursor: grab; touch-action: none; outline: none; z-index: 2; }
.nx-stage__logo:focus-visible { box-shadow: 0 0 0 2px var(--nx-sky); border-radius: 4px; }
.nx-stage__logo img { width: 100%; height: auto; display: block; pointer-events: none; }
.nx-stage__banner img { width: 100%; height: auto; display: block; pointer-events: none; }
.nx-stage__words { display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 8px; border: 2px dashed var(--nx-sky); background: #FFFFFF; color: #111111; font: inherit; font-weight: 700; font-size: var(--nx-t-label); line-height: 1.2; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); outline: none; cursor: text; }
.nx-stage__words:focus-visible { border-style: solid; }
.nx-editor--phone .nx-stage__banner::before { content: ""; position: absolute; inset: -16px; }
.nx-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nx-compare figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.nx-compare figcaption { font-size: var(--nx-t-label); color: var(--nx-ink-4); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-compare__video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--nx-well); }
.nx-compare__empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; border-radius: 10px; background: var(--nx-well); padding: 12px; text-align: center; }
.nx-stage__plate { display: block; width: 100%; padding: 8px 12px; border-radius: 8px; background: #FFFFFF; color: #111111; font-weight: 700; font-size: var(--nx-t-label); line-height: 1.2; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); overflow-wrap: anywhere; }
.nx-stage__caption { position: absolute; left: 8%; right: 8%; text-align: center; color: var(--nx-stage-ink, #FFFFFF); font-family: var(--nx-stage-face, inherit); font-weight: var(--nx-stage-weight, 700); font-synthesis: none; font-size: max(var(--nx-t-label), calc(20px * var(--nx-stage-size, 1))); line-height: 1.2; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); pointer-events: none; }
/* Editor freedom 2026-10-10 (editor-place.jsx): placed captions, the rail while held. */
.nx-stage__caption--place,.nx-stage__caption-handle{position:absolute;right:auto;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none}
.nx-place-zone{position:absolute;inset:0;pointer-events:none;z-index:3}
.nx-place-zone>div{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--nx-bad-soft);box-shadow:inset 0 0 0 1px var(--nx-bad-rim);color:#FFF;font-size:15px;writing-mode:vertical-rl}
/* C36f instant save: the render's progress bar (the save's state sits under the player, 2026-10-07). */
.nx-stage__save-bar { width: 100%; height: 4px; accent-color: var(--nx-sky); }
.nx-hooks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nx-hooks__row { width: 100%; display: flex; flex-direction: column; gap: 4px; min-height: 48px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--nx-line); background: var(--nx-well); color: var(--nx-ink-2); font: inherit; font-size: 15px; line-height: 1.35; cursor: pointer; }
.nx-hooks__row--on { box-shadow: inset 0 0 0 1px var(--nx-sky-line); color: var(--nx-ink); }
.nx-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--nx-r-pill); border: 1px solid var(--nx-line); background: var(--nx-well); color: var(--nx-ink-3); font: inherit; font-size: 15px; cursor: pointer; }
.nx-swatch svg { width: 28px; height: 28px; stroke: rgba(0, 0, 0, 0.25); }
.nx-swatch--on { box-shadow: inset 0 0 0 1px var(--nx-sky-line); color: var(--nx-ink); }
.nx .timeline { height: 44px; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); position: relative; overflow: hidden; }
.nx .timeline i { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--nx-sky-line), var(--nx-sky)); opacity: .85; }

.nx-chat__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.nx-chat__grid--phone { grid-template-columns: minmax(0, 1fr); }
.nx-turns { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nx-turn { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); }
.nx-turn--focused { box-shadow: var(--nx-inset-hi), inset 0 0 0 1px var(--nx-sky-line); }
.nx-turn__ask { margin: 0; color: var(--nx-ink-2); }
.nx-turn__answer { margin: 0; color: var(--nx-ink); line-height: 1.5; }
.nx-turn > .nx-chip { justify-self: start; }

.nx-turn--me { justify-self: end; max-width: min(78%, 620px); padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: linear-gradient(to right top, var(--nx-tint), var(--nx-tint-2)); box-shadow: none; color: #fff; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.nx-turn--them { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 0; background: none; box-shadow: none; align-items: start; }
.nx-turn__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.nx-turn__body > * { min-width: 0; }
.nx-turn__mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--nx-sky-text); background: var(--nx-sky-soft); border: 1px solid var(--nx-sky-rim); }
.nx-turn__by { font-size: var(--nx-t-label); font-weight: 600; color: var(--nx-ink-3); letter-spacing: 0.01em; }
.nx-stages-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--nx-t-label); color: var(--nx-ink-4); }
.nx-stages-list li { padding: 2px 8px; border-radius: 8px; background: var(--nx-flat); }
.nx-stages-list li[data-state="done"] { color: var(--nx-ink-3); }
.nx-stages-list li[data-state="active"] { color: var(--nx-sky-text); box-shadow: inset 0 0 0 1px var(--nx-sky-line); }
.nx .timeline--proposed i { background: linear-gradient(90deg, var(--nx-ok, #4caf50), var(--nx-sky)); }
.nx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nx-compare__cell { display: grid; gap: 6px; }
@media (max-width: 640px) {
  .nx-compare { grid-template-columns: 1fr; }
}

.nx-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nx-accounts__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); font-size: 14px; }
.nx-accounts__row[data-state="attention"] { box-shadow: var(--nx-inset-hi), inset 0 0 0 1px var(--nx-warn, #c9a227); }
.nx-key { display: block; padding: 10px 12px; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
.nx-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.nx-week--phone { grid-template-columns: minmax(0, 1fr); }
.nx-week__day { display: grid; gap: 6px; align-content: start; min-height: 96px; padding: 8px 10px; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); font-size: 14px; }
.nx-week__day > .nx-chip { display: block; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; justify-self: start; }
.nx-queue__row .nx-actions { justify-content: flex-end; }
@media (max-width: 640px) {
  .nx-accounts__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

.nx-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title chip" "facts chip"; column-gap: 12px; row-gap: 2px; align-items: center; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nx-run:hover { border-color: var(--nx-line-hi); }
.nx-run:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-run > .nx-chip { grid-area: chip; justify-self: end; }
.nx-copy--bad { color: var(--nx-bad); }

.nx-review .is-disabled { opacity: 0.55; }


/* UX1 car 2 (owner spec 2026-09-24, item 5): */
.nx-bzc .nx-turn__answer { font-size: 17px; }
.nx-bzc .nx-turn__body > .nx-details, .nx-bzc .nx-gate p { font-size: 14px; }
.nx-bzc .nx-gate__title { font-size: 18px; }

.nx-live-context .nx-actions > .nx-field { flex: 1 1 200px; }
.nx-carousel-brand > .nx-btn { align-self: flex-start; }
.nx-cb-fold { border-top: 1px solid var(--nx-hair); padding-top: 4px; }
.nx-cb-fold > summary { cursor: pointer; list-style: none; min-height: var(--nx-target); display: flex; align-items: center; gap: 8px; color: var(--nx-ink-2); font-weight: 500; border-radius: var(--nx-r-btn); }
.nx-cb-fold > summary::-webkit-details-marker { display: none; }
.nx-cb-fold > summary::before { content: "+"; width: 16px; color: var(--nx-ink-4); }
.nx-cb-fold[open] > summary::before { content: "\2212"; }
.nx-cb-fold > summary:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx-cb-fold__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 6px 0 10px; }
.nx-cb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nx-cb-colour { display: flex; gap: 10px; align-items: flex-start; }
.nx-cb-colour > .nx-field-wrap, .nx-cb-colour > .nx-field { flex: 1; min-width: 0; }
.nx-cb-colour .nx-field__input { width: 0; }
.nx-cb-colour__pick { flex: none; width: var(--nx-target); height: var(--nx-target); padding: 2px; border: 1px solid var(--nx-rim-top); border-radius: var(--nx-r-field); background: var(--nx-field); cursor: pointer; }
.nx-cb-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 12px; }
.nx-cb-shots figure { margin: 0; display: grid; gap: 4px; }
.nx-cb-shots img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--nx-well); }
.nx-carousel-brand .nx-field select.nx-field__input { min-height: 42px; }
@media (max-width: 640px) { .nx-cb-grid { grid-template-columns: minmax(0, 1fr); } .nx-carousel-brand .nx-actions { flex-wrap: wrap; } }

.nx-results [data-testid="nx-clip-actions"] { gap: 8px; }
.nx-results [data-testid="nx-download-files"] { max-height: 320px; overflow: auto; padding: 12px; border: 1px solid var(--nx-line); border-radius: 10px; }

@font-face { font-family: "inter-bold"; src: url("../vendor/fonts/studio-captions/inter-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "inter-black"; src: url("../vendor/fonts/studio-captions/inter-black.woff2") format("woff2"); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: "pretendard-extrabold"; src: url("../vendor/fonts/studio-captions/pretendard-extrabold.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "tiktok-sans-bold"; src: url("../vendor/fonts/studio-captions/tiktok-sans-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "roboto-bold"; src: url("../vendor/fonts/studio-captions/roboto-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "poppins-bold"; src: url("../vendor/fonts/studio-captions/poppins-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "montserrat-bold"; src: url("../vendor/fonts/studio-captions/montserrat-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }

@media (max-width: 640px) {
  .nx-editor--phone > .nx-bar { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
.nx-editor--phone{padding-bottom:var(--nx-bar-h,96px)}.nx-editor--phone>.nx-bar{padding:8px 12px;gap:6px}.nx-editor--phone .nx-editor-status{flex:1;min-width:0}.nx-editor--phone .nx-editor__savebar{gap:6px}.nx-editor--phone>.nx-bar .nx-btn{padding:0 10px}.nx-editor-status__short,.nx-editor--phone .nx-editor-status>:not(.nx-editor-status__short){display:none}.nx-editor--phone .nx-editor-status>.nx-editor-status__short{display:flex}.nx-editor__price{justify-content:flex-start}

.nx-media-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); }
.nx-media-row__media { width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--nx-flat); color: var(--nx-ink-3); }
.nx-media-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-media-row__media .nx-details { font-size: var(--nx-t-label); text-align: center; padding: 4px; }
.nx-media-row__body { display: grid; gap: 2px; min-width: 0; }
.nx-media-row__title { color: var(--nx-ink); font-weight: 600; overflow-wrap: anywhere; }
.nx-media-row__sub { color: var(--nx-ink-3); font-size: 13px; overflow-wrap: anywhere; }
.nx-media-row__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@container nx (max-width: 640px) {
  .nx-media-row { grid-template-columns: 88px minmax(0, 1fr); }
  .nx-media-row__media { width: 88px; }
  .nx-media-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.nx-bzc { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--nx-s4); }
.nx-bzc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nx-bzc__thread { gap: 28px; padding-bottom: 8px; grid-template-columns: minmax(0, 1fr); }
.nx-bzc__thread > .nx-turn { min-width: 0; }
.nx-bzc__thread > .nx-turn--them .nx-turn__body > .nx-card, .nx-bzc__thread > .nx-turn--them .nx-turn__body > .nx-gate { width: 100%; }
.nx-bzc__thread .nx-turn__answer strong { color: var(--nx-ink); font-weight: 600; font-size: var(--nx-t-lead); }
.nx-bzc__composer { position: sticky; bottom: 12px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.nx-bzc__composer::before { content: ""; position: absolute; z-index: -1; inset: -28px -12px -12px; background: linear-gradient(to bottom, transparent, var(--nx-bg) 34px); pointer-events: none; }
.nx-bzc__pill { position: relative; display: flex; align-items: flex-end; gap: 8px; min-width: 0; padding: 7px 7px 7px 20px; border-radius: 28px; background: var(--nx-bar); border: 1px solid var(--nx-rim-top); box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.7); cursor: text; transition: border-color var(--nx-d-state) var(--nx-ease); }
.nx-bzc__pill:focus-within { border-color: var(--nx-hover-border); }
.nx[data-theme="light"] .nx-bzc__pill { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.25); }
.nx .nx-bzc__input:focus, .nx .nx-bzc__input:focus-visible { outline: none; box-shadow: none; }
.nx-bzc__input { flex: 1; min-width: 0; min-height: 42px; max-height: 130px; margin: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: var(--nx-ink); font: inherit; font-size: 16px; line-height: 1.4; box-sizing: border-box; resize: none; overflow-y: auto; }
.nx-bzc__input::placeholder { color: var(--nx-ink-4); opacity: 1; }
.nx-bzc__send { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--nx-sky); color: var(--nx-sky-ink, #fff); cursor: pointer; transition: background var(--nx-d-state) var(--nx-ease), color var(--nx-d-state) var(--nx-ease), transform 120ms var(--nx-ease); }
.nx-bzc__send .ic { width: 20px; height: 20px; transform: rotate(-90deg); }
.nx-bzc__send:disabled { background: var(--nx-well); color: var(--nx-ink-4); cursor: default; }
.nx-bzc__send:not(:disabled):active { transform: scale(0.92); }
.nx-bzc__send[data-busy] { background: var(--nx-well); color: var(--nx-ink-2); }
.nx-bzc__send[data-busy] .ic { animation: nx-spin 0.9s linear infinite; }
.nx-bzc [data-opening] { display: none; }
.nx .nx-body:has(.nx-bzx) { padding-bottom: 12px; }
.nx-bzx { min-height: calc(100dvh - 44px); }
.nx-bzx > .nx-bzc__composer { margin-top: auto; }
.nx-bzc--hello > .nx-bzc__head { margin-bottom: auto; }
.nx-bzc--hello > .nx-bzc__composer { position: relative; bottom: auto; margin-top: 0; margin-bottom: auto; }
.nx-bzc--hello > .nx-bzc__composer::before { display: none; }
.nx-bzc--hello .nx-bzc__thread { justify-items: center; padding-bottom: 0; }
.nx-bzc--hello .nx-bzc__thread > .nx-turn--them { justify-self: stretch; }
@container nx (max-width: 640px) {
  .nx-bzc { gap: var(--nx-s3); }
  .nx-bzx { min-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)); }
  .nx-bzc__composer { bottom: 8px; }
  .nx-bzc__pill { padding-left: 16px; }
  .nx-bzc .nx-chip { max-width: 100%; white-space: normal; height: auto; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; }
}

/* ==========================================================================
   UX 10/10 surface: the progress scene (D1). Atlas v5, owner approval 2026-09-25.
   Only the lane building this surface edits between these two markers, so
   parallel lanes never touch the same lines.
   ========================================================================== */
/* surface:progress:begin */
/* The progress scene (NxProgressScene, next/studio.jsx): bright frames, one line, delivered clips, the first is the door at Ready. */
.nx-ps {
  --ps-title: 48px; --ps-line: 22px; --ps-meta: 15px; --ps-body: 17px;
  --ps-ease-colour: cubic-bezier(.25,.46,.45,.94);
  --ps-ease-arrive: cubic-bezier(.19,1,.22,1);
  --ps-ease-sheet: cubic-bezier(.32,.72,0,1);
  --ps-d-colour: 120ms; --ps-d-arrive: 240ms; --ps-d-sheet: 320ms;
  --ps-dots: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.3px);
  position: relative; display: flex; flex-direction: column; gap: 30px; color: var(--nx-ink-2);
  font-size: var(--ps-body); line-height: 1.5;
}
.nx[data-theme="light"] .nx-ps { --ps-dots: radial-gradient(rgba(17,17,17,.06) 1px, transparent 1.3px); }
.nx-ps--phone { --ps-title: 30px; --ps-line: 17px; gap: 20px; }

/* the words: the poster, the title and ONE line (the stage word, time left, clips) */
.nx-ps__head { position: relative; display: flex; align-items: center; gap: 24px; z-index: 6; }
.nx-ps--phone .nx-ps__head { flex-direction: column; align-items: stretch; gap: 14px; }
.nx-ps__back { flex: none; align-self: center; }
.nx-ps--phone .nx-ps__back, .nx-ps > .nx-ps__back { align-self: flex-start; }
.nx-ps__thumb { position: relative; flex: none; width: 176px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; box-shadow: var(--nx-shadow-xl), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.22); }
.nx-ps__words { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.nx .nx-ps__title { margin: 0; font-size: var(--ps-title); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; color: var(--nx-ink); text-wrap: balance; max-width: 26ch; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx .nx-ps__line { margin: 0; font-size: var(--ps-line); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; color: var(--nx-ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 27px; max-width: none; font-variant-numeric: tabular-nums; }
.nx-ps__line b { color: var(--nx-ink); font-weight: 600; }
.nx-ps__line .nx-ps__left { color: var(--nx-ink-2); }
.nx-ps__line b.is-ok { color: var(--nx-ok); }
.nx-ps__line b.is-bad { color: var(--nx-bad); }
.nx-ps__line b.is-quiet { color: var(--nx-warn); }
.nx-ps__line i { font-style: normal; color: var(--nx-ink-4); font-weight: 400; }
.nx-ps__line .nx-ps__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-sky); box-shadow: 0 0 0 3px var(--nx-sky-soft); margin-right: 2px; }
.nx-ps__dot[data-tone="done"], .nx-ps__dot[data-tone="partial"] { background: var(--nx-ok); box-shadow: 0 0 0 3px var(--nx-ok-soft); }
.nx-ps__dot[data-tone="quiet"] { background: var(--nx-warn); box-shadow: 0 0 0 3px var(--nx-warn-soft); }
.nx-ps__dot[data-tone="failed"] { background: var(--nx-bad); box-shadow: 0 0 0 3px var(--nx-bad-soft); }
.nx-ps__dot[data-tone="cancelled"], .nx-ps__dot[data-tone="queued"] { background: var(--nx-ink-4); box-shadow: none; }
.nx-ps__num { display: inline-block; font-variant-numeric: tabular-nums; overflow: hidden; vertical-align: bottom; }
.nx-ps__num-in { display: inline-block; animation: nx-ps-num var(--ps-d-arrive) var(--ps-ease-arrive) both; }
@keyframes nx-ps-num { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
.nx-ps__skel { display: block; border-radius: 10px; background: var(--nx-well); box-shadow: var(--nx-inset-soft); }
.nx .nx-ps__title.nx-ps__skel { width: min(560px, 70%); height: calc(var(--ps-title) * 1.08); }
.nx .nx-ps__line.nx-ps__skel { width: 240px; height: 26px; }
.nx-ps__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* details: the one fold */
.nx-ps__head-acts { display: flex; align-items: center; gap: 12px; flex: none; }
.nx-ps__head-acts > .nx-btn { min-height: 52px; padding: 0 26px; }
.nx-ps--phone .nx-ps__head-acts { flex-direction: column; align-items: stretch; }
.nx-ps--phone .nx-ps__head-acts > .nx-btn { flex: 1; }
.nx-ps__details { position: relative; flex: none; font-size: var(--ps-meta); }
.nx-ps__details summary { font-size: var(--ps-body); font-weight: 500; color: var(--nx-ink-3); min-height: 44px; padding: 0 14px; border-radius: var(--nx-r-btn); gap: 8px; }
.nx-ps__details summary:hover { color: var(--nx-ink); background: var(--nx-btn); }
.nx-ps__details summary .ic { width: 16px; height: 16px; }
.nx-ps__details-in { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.nx-ps--wide .nx-ps__details-in { position: absolute; right: 0; top: 48px; width: 560px; padding: 1px; border-radius: var(--nx-r-card); background: linear-gradient(var(--nx-rim-top), var(--nx-rim-bot)); box-shadow: var(--nx-shadow-2xl); animation: nx-ps-sheet var(--ps-d-sheet) var(--ps-ease-sheet) both; }
.nx-ps--wide .nx-ps__details-in > * { margin: 0 12px; }
.nx-ps--wide .nx-ps__details-in > :first-child { margin-top: 12px; }
.nx-ps--wide .nx-ps__details-in > :last-child { margin-bottom: 12px; }
.nx-ps--wide .nx-ps__details-in::before { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--nx-r-card) - 1px); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); z-index: -1; }
.nx-ps__details .nx-details__body { font-size: var(--ps-meta); line-height: 1.55; gap: 4px 16px; padding: 12px 14px; margin: 0; max-height: 380px; overflow: auto; }
.nx-ps__details .nx-details__body b { color: var(--nx-ink-4); font-weight: 500; }
.nx-ps__details .nx-details__body span { color: var(--nx-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nx-ps__details-acts .nx-btn { font-size: var(--ps-body); font-weight: 500; }
.nx-ps--phone .nx-ps__details { align-self: flex-start; }
.nx-ps--phone .nx-ps__details-in { margin-top: 4px; }
.nx-ps--phone .nx-ps__details summary { padding: 0; }
@keyframes nx-ps-sheet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the strip: the recording's own frames, bright, its waveform beneath at low ink */
.nx-ps__scene { position: relative; display: flex; flex-direction: column; gap: 32px; }
.nx-ps__strip { position: relative; border-radius: 16px; overflow: hidden; background: var(--nx-well); box-shadow: 0 0 0 1px var(--nx-rim-top), var(--nx-shadow-2xl); }
.nx-ps__frames { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); height: 128px; }
.nx-ps__frame { position: relative; background-size: cover; background-repeat: no-repeat; transition: opacity 520ms var(--ps-ease-colour); }
.nx-ps__frame + .nx-ps__frame { box-shadow: inset 1px 0 0 rgba(0,0,0,.55); }
.nx-ps__frame.is-wait { background-image: var(--ps-dots) !important; background-size: 14px 14px; background-position: 0 0 !important; }
.nx-ps__heard { position: absolute; right: 10px; top: 10px; height: 32px; min-width: 44px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(13,13,13,.72); color: #fff; border: 1px solid rgba(255,255,255,.2); font-size: var(--ps-meta); font-weight: 600; letter-spacing: .02em; animation: nx-ps-pop var(--ps-d-arrive) var(--ps-ease-arrive) both; }
@keyframes nx-ps-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.nx-ps__wave { position: relative; height: 46px; display: flex; align-items: center; gap: 2px; padding: 6px 4px; border-top: 1px solid rgba(0,0,0,.4); background: linear-gradient(var(--nx-field), var(--nx-well)); }
.nx[data-theme="light"] .nx-ps__wave { background: linear-gradient(#FFFFFF, #F1F1F0); border-top-color: var(--nx-hair); }
.nx-ps__bar { flex: 1; min-width: 1px; max-height: 34px; border-radius: 1px; background: var(--nx-ink); opacity: .08; transition: opacity var(--ps-d-colour) var(--ps-ease-colour); }
.nx-ps__bar.on { opacity: .3; }
.nx-ps__win { position: absolute; top: 0; bottom: 0; overflow: hidden; border-left: 1px solid var(--nx-hair); border-right: 1px solid var(--nx-hair); }
.nx-ps__win.is-live { background: rgba(79,184,255,.07); border-color: var(--nx-sky-rim); animation: nx-ps-fade-in var(--ps-d-arrive) var(--ps-ease-arrive) both; }
.nx-ps__win.is-quiet { background: var(--nx-warn-soft); border-color: var(--nx-warn); }
@keyframes nx-ps-fade-in { from { opacity: 0; } to { opacity: 1; } }
.nx-ps__glint { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(138,212,255,.14) 70%, rgba(234,247,255,.26)); animation: nx-ps-glint 3.2s cubic-bezier(.45,0,.55,1) infinite; }
.nx-ps__win.is-quiet .nx-ps__glint, .nx-ps--failed .nx-ps__glint, .nx-ps--cancelled .nx-ps__glint, .nx-ps--asleep .nx-ps__glint { display: none; }
@keyframes nx-ps-glint { from { transform: translateX(-100%); } to { transform: translateX(225%); } }
.nx-ps__moment { position: absolute; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--nx-sky); opacity: .9; transform-origin: center; animation: nx-ps-moment var(--ps-d-arrive) var(--ps-ease-arrive) both; }
@keyframes nx-ps-moment { from { transform: scaleY(0); } to { transform: none; } }
.nx-ps__playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--nx-sky); z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transition: left var(--ps-d-arrive) var(--ps-ease-arrive); }
.nx-ps__playhead::before { content: ""; position: absolute; top: -1px; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--nx-sky); }
.nx-ps__playhead.is-quiet, .nx-ps__playhead.is-quiet::before { background: var(--nx-warn); border-top-color: var(--nx-warn); }
/* in line: the recordings ahead of yours, and yours */
.nx-ps__line-up { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.nx-ps__ahead { width: 72px; height: 40px; border-radius: 8px; border: 1px dashed var(--nx-ring); background: var(--nx-bg); }
.nx-ps__you { width: 128px; height: 72px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 0 0 1.5px var(--nx-sky), var(--nx-shadow-xl); }

/* the track, drawn to scale; the ping line; the episode's sentence; the news in Details; the strip's words */
.nx-pj{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.nx-pj__st{flex:1 1 0;min-width:max-content;display:flex;flex-direction:column;gap:12px}
.nx-pj__bar{position:relative;display:block;height:6px;border-radius:3px;overflow:hidden;background:var(--nx-line)}
.nx-pj__bar i{position:absolute;inset:0;border-radius:inherit;background:var(--nx-ink-4);transform-origin:left;transition:transform .9s var(--ps-ease-arrive)}
.nx-pj__st b{font-size:var(--ps-meta);font-weight:500;line-height:1.2;color:var(--nx-ink-4)}
.nx-pj__st.is-done b{color:var(--nx-ink-3)}
.nx-pj__st.is-now b,.nx-pj__st.is-busy b{color:var(--nx-ink);font-weight:600}
.nx-pj__st.is-now .nx-pj__bar i,.nx-pj__st.is-busy .nx-pj__bar i{background:var(--nx-sky)}
.nx-pj__st.is-now .nx-pj__bar i::after{content:"";position:absolute;top:0;bottom:0;right:0;width:64px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55));animation:nx-pj-b 2.8s ease-in-out infinite}
@keyframes nx-pj-b{0%,100%{opacity:0}50%{opacity:1}}
.nx-pj__st.is-quiet .nx-pj__bar i{background:var(--nx-warn)}
.nx-pj__st.is-quiet b{color:var(--nx-warn);font-weight:600}
.nx-pj__st.is-bad b{color:var(--nx-bad)}
.nx-ps .nx-say--ask{padding:0;background:none;box-shadow:none;gap:8px 16px;grid-template-columns:auto auto;justify-content:start;align-items:center}
.nx-ps .nx-say--ask .nx-say__words{font-size:var(--ps-meta);font-weight:500;color:var(--nx-ink-3)}
.nx-ps .nx-say--ask .nx-say__words::before{display:none}
.nx-ps .nx-say--ask .nx-btn{grid-column:2;grid-row:1;min-height:36px;padding:0 12px;font-size:var(--ps-meta);font-weight:600;color:var(--nx-sky-text);background:none;box-shadow:none}
.nx-ps__said{margin:0;display:flex;flex-direction:column;gap:10px;max-width:46ch}
.nx-ps__said b,.nx-ps__news>b{display:flex;gap:10px;font-size:var(--ps-meta);font-weight:500;color:var(--nx-ink-4)}
.nx .nx-ps__said p{margin:0;max-width:none;font-size:24px;line-height:1.4;color:var(--nx-ink-2);animation:nx-ps-sheet .6s var(--ps-ease-arrive) both}
.nx-ps__news{padding:0 14px}
.nx-ps__news ul{margin:6px 0 0;padding:0;list-style:none}
.nx-ps__news li{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--nx-line);font-size:var(--ps-meta);color:var(--nx-ink-3)}
.nx-ps__news li span{color:var(--nx-ink-4)}
.nx-ps__news li.is-now{color:var(--nx-ink)}
.nx-ps__winlbl{position:absolute;top:10px;z-index:3;padding:4px 10px;border-radius:8px;background:rgba(13,13,13,.72);color:#fff;font-size:var(--ps-meta);white-space:nowrap}
.nx-ps__wincount{position:absolute;right:3px;top:3px;padding:0 5px;color:var(--nx-sky-text);font-size:var(--ps-meta);font-weight:600}
.nx-ps__slotword{position:absolute;left:10px;bottom:10px;font-size:var(--ps-meta);color:var(--nx-ink-3)}
/* the clips delivered so far, filling the lower half */
.nx-ps__found { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px 16px; align-items: start; }
.nx-ps__card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; animation: nx-ps-arrive var(--ps-d-arrive) var(--ps-ease-arrive) both; }
button.nx-ps__card { cursor: pointer; }
@keyframes nx-ps-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nx-ps__card-f { position: relative; display: block; width: 100%; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; background: var(--nx-well); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 34px -14px rgba(0,0,0,.75); }
.nx[data-theme="light"] .nx-ps__card-f { box-shadow: 0 0 0 1px rgba(17,17,17,.06), 0 14px 26px -14px rgba(17,17,17,.35); }
.nx-ps__card-f::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); pointer-events: none; }
.nx-ps__card-img, .nx-ps__card-frame, .nx-ps__card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-ps__card-img { background-size: cover; background-repeat: no-repeat; }
.nx-ps__card-video { z-index: 1; }
.nx-ps__dur { position: absolute; right: 6px; bottom: 6px; z-index: 2; border-radius: 6px; background: rgba(8,8,8,.8); color: #fff; font: 600 15px/1 var(--nx-font); font-variant-numeric: tabular-nums; padding: 5px 6px; }
.nx .nx-ps__card-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; font-size: var(--ps-meta); font-weight: 600; line-height: 1.32; letter-spacing: .005em; color: var(--nx-ink-2); overflow-wrap: anywhere; }
.nx-ps__card-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,10,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.18); color: #fff; opacity: 0; transition: opacity var(--ps-d-colour) var(--ps-ease-colour); }
.nx-ps__card-play .ic { width: 20px; height: 20px; fill: #fff; stroke: none; margin-left: 3px; }
button.nx-ps__card:hover .nx-ps__card-play, button.nx-ps__card:focus-visible .nx-ps__card-play, .nx-ps__card.is-playing .nx-ps__card-play { opacity: 1; }
button.nx-ps__card:active .nx-ps__card-f { transform: scale(.97); transition: transform var(--ps-d-colour) var(--ps-ease-colour); }
.nx-ps__card:focus-visible { outline: none; }
.nx-ps__card:focus-visible .nx-ps__card-f, .nx-ps__card-f:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-sky); }
/* the places still to fill, drawn in their final shape */
.nx-ps__card.is-slot { animation: none; }
.nx-ps__card.is-slot .nx-ps__card-f { background: color-mix(in oklab, var(--nx-well) 45%, transparent); box-shadow: inset 0 0 0 1px var(--nx-line); }
.nx-ps__card.is-slot .nx-ps__card-f::after { display: none; }
.nx-ps__card.is-slot .nx-ps__card-t::before, .nx-ps__card.is-slot .nx-ps__card-t::after { content: ""; display: block; height: 8px; border-radius: 4px; background: var(--nx-line); opacity: .6; margin: 6px 0 8px; width: 80%; }
.nx-ps__card.is-slot .nx-ps__card-t::after { width: 56%; }
.nx-ps__card.is-missing { cursor: pointer; }
.nx-ps__card.is-missing .nx-ps__card-f { background-image: none; background-color: transparent; box-shadow: none; border: 2px dashed var(--nx-ring); }
.nx .nx-ps__why { position: absolute; left: 0; top: 100%; z-index: 6; width: 260px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--nx-panel-2); color: var(--nx-ink); font-size: var(--ps-body); line-height: 1.35; box-shadow: var(--nx-shadow-2xl); animation: nx-ps-sheet var(--ps-d-sheet) var(--ps-ease-sheet) both; }
/* Ready: the first clip is the door (tap opens that clip in Results) */
.nx-ps__card.is-door { grid-column: span 2; grid-row: span 2; }
.nx-ps__card-box { position: relative; display: block; }
.nx-ps__card.is-door .nx-ps__card-f { aspect-ratio: auto; height: 440px; padding: 0; border: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.8); }
.nx-ps__card.is-door .nx-ps__card-f::before { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); z-index: 1; pointer-events: none; }
.nx-ps__card.is-door .nx-ps__card-play { top: 44%; width: 68px; height: 68px; margin: -34px 0 0 -34px; opacity: 1; }
.nx-ps__card.is-door .nx-ps__card-play .ic { width: 28px; height: 28px; margin-left: 4px; }
.nx-ps__card.is-door .nx-ps__card-f:active { transform: scale(.985); transition: transform var(--ps-d-colour) var(--ps-ease-colour); }
.nx-ps__door-open { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; }
.nx-ps__door-open .nx-btn { width: 100%; min-height: 56px; font-size: 19px; }
.nx .nx-ps__card.is-door .nx-ps__card-t { font-size: 22px; letter-spacing: -0.01em; color: var(--nx-ink); min-height: 0; }

/* the one sentence and the one button of a state that needs a person */
.nx-ps__ask { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; animation: nx-ps-sheet var(--ps-d-sheet) var(--ps-ease-sheet) both; }
.nx .nx-ps__ask p { margin: 0; font-size: var(--ps-line); line-height: 1.25; letter-spacing: -0.01em; color: var(--nx-ink); font-weight: 500; max-width: 34ch; }
.nx .nx-ps__ask--warn p { color: var(--nx-warn); }
.nx .nx-ps__ask--bad p { color: var(--nx-bad); }
.nx .nx-ps__ask p.nx-ps__note { flex-basis: 100%; font-size: 15px; font-weight: 400; color: var(--nx-ink-3); max-width: 60ch; }
.nx-ps__ask .nx-actions { gap: 10px; }
.nx-ps__ask .nx-btn { font-size: var(--ps-body); font-weight: 500; min-height: 52px; padding: 0 26px; }
.nx-ps .nx-btn:active { transform: scale(.97); }

/* the language question */
.nx-ps__lang { position: relative; margin: 24px auto 0; width: min(100%, 560px); padding: 1px; border-radius: 22px; background: linear-gradient(130deg, var(--nx-sky-rim) 0%, var(--nx-rim-top) 25%, var(--nx-rim-bot) 77.5%, var(--nx-sky-rim) 95%); box-shadow: var(--nx-shadow-2xl); animation: nx-ps-sheet var(--ps-d-sheet) var(--ps-ease-sheet) both; }
.nx-ps__lang-in { border-radius: 21px; background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); padding: 0 32px 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; overflow: hidden; }
.nx-ps__lang-poster { align-self: stretch; margin: 0 -32px 10px; height: 200px; background-size: cover; background-position: center 35%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.nx-ps__lang-heard { font-size: 22px; color: var(--nx-ink-3); display: flex; gap: 10px; align-items: center; }
.nx-ps__lang-heard .ic { width: 22px; height: 22px; }
.nx .nx-ps__lang-name { margin: 0 0 12px; font-size: 56px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--nx-ink); }
.nx-ps__lang .nx-actions { gap: 10px; width: 100%; }
.nx-ps__lang .nx-btn { min-height: 56px; font-size: var(--ps-body); font-weight: 500; padding: 0 26px; flex: 1; }
.nx-ps__lang-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.nx-ps__lang-list .nx-btn { width: 100%; }
.nx .nx-ps__lang-note { margin: 4px 0 0; font-size: var(--ps-meta); line-height: 1.5; color: var(--nx-ink-3); }

/* reduced motion: the same scene held still, the same facts (designed first) */
.nx-ps.is-still *, .nx-ps.is-still *::before, .nx-ps.is-still *::after { transition: none !important; animation: none !important; }
.nx-ps.is-still .nx-ps__glint, .nx-ps.is-still .nx-pj__bar i::after { display: none; }
/* a hidden tab pauses the loops only, never an arrival */
.nx-ps.is-paused .nx-ps__glint, .nx-ps.is-paused .nx-pj__bar i::after { animation-play-state: paused !important; }
.nx-ps--asleep .nx-ps__scene { opacity: .42; }
@media (prefers-reduced-motion: reduce) {
  .nx-ps *, .nx-ps *::before, .nx-ps *::after { transition: none !important; animation: none !important; }
  .nx-ps__glint, .nx-pj__bar i::after { display: none; }
}

/* the phone: the strip edge to edge, the clips three across (a phone, not a shrunk laptop) */
.nx-ps--phone .nx-ps__scene { gap: 22px; }
.nx-ps--phone .nx-pj{gap:10px}.nx .nx-ps--phone .nx-ps__said p{font-size:19px}.nx-ps--phone .nx-say--ask{grid-template-columns:1fr auto}
.nx-ps--phone .nx-ps__strip { margin: 0 -16px; border-radius: 0; box-shadow: 0 1px 0 var(--nx-rim-top), 0 -1px 0 var(--nx-rim-top); }
.nx-ps--phone .nx-ps__frames { grid-template-columns: repeat(5, minmax(0, 1fr)); height: 88px; }
.nx-ps--phone .nx-ps__wave { height: 40px; }
.nx-ps--phone .nx-ps__ahead { width: 40px; height: 26px; }
.nx-ps--phone .nx-ps__you { width: 88px; height: 50px; }
.nx-ps--phone .nx-ps__found { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
.nx-ps--phone .nx-ps__card-f { border-radius: 10px; }
.nx-ps--phone .nx-ps__dur { right: 5px; bottom: 5px; padding: 4px 5px; }
.nx-ps--phone .nx-ps__card.is-door { grid-column: span 3; grid-row: auto; }
.nx-ps--phone .nx-ps__card.is-door .nx-ps__card-f { height: auto; aspect-ratio: 4/3; }
.nx .nx-ps--phone .nx-ps__card.is-door .nx-ps__card-t { font-size: 20px; }
.nx-ps--phone .nx-ps__ask { flex-direction: column; align-items: stretch; }
.nx-ps--phone .nx-ps__ask .nx-actions { flex-direction: column-reverse; align-items: stretch; }
.nx-ps--phone .nx-ps__ask .nx-btn { width: 100%; }
.nx-ps--phone .nx-ps__lang { margin-top: 8px; }
.nx-ps--phone .nx-ps__lang-in { padding: 0 20px 24px; }
.nx-ps--phone .nx-ps__lang-poster { margin: 0 -20px 6px; height: 170px; }
.nx .nx-ps--phone .nx-ps__lang-name { font-size: 44px; }
.nx-ps--phone .nx-ps__lang .nx-actions { flex-direction: column; }
.nx-ps--phone .nx-ps__lang .nx-btn { width: 100%; }

/* The 15px floor: nothing a member reads on this surface is smaller. */
.nx-ps .nx-details { font-size: var(--ps-meta); }
/* surface:progress:end */

/* ==========================================================================
   UX 10/10 surface: the Library grid (D2). Atlas v5, owner approval 2026-09-25.
   Only the lane building this surface edits between these two markers, so
   parallel lanes never touch the same lines.
   ========================================================================== */
/* surface:library:begin */
/* The place: the title, one search field, one sort, a quiet New recording. No tab row, no chips. */
.nx-lib { display: flex; flex-direction: column; gap: 36px; }
.nx-lib__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nx .nx-lib__t { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--nx-ink); margin: 0; margin-right: auto; }
.nx-lib__find { width: 420px; min-height: 48px; border-radius: 14px; }
.nx-lib__find .nx-field__input { min-height: 46px; font-size: var(--nx-t-lead); }
.nx-lib__sort { position: relative; gap: 8px; cursor: pointer; }
.nx-lib__sort .ic { width: 18px; height: 18px; }
.nx-lib__sort .ic--sm { width: 14px; height: 14px; opacity: 0.8; }
/* The real select carries the choices; the button around it is the surface it wears. */
.nx-lib__sortsel { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: 500 var(--nx-t-lead) / 1 var(--nx-font); padding: 0; cursor: pointer; }
.nx-lib__sortsel:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 4px; border-radius: 4px; }
.nx-lib__sortsel option { background: var(--nx-flat); color: var(--nx-ink); }
.nx-lib__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
@container nx (min-width: 1560px) { .nx-lib__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container nx (max-width: 1000px) { .nx-lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nx-lib__rule { height: 1px; background: var(--nx-hair); margin: 4px 0; }

/* One recording. */
.nx-rec__cell { position: relative; min-width: 0; }
.nx-rec { --rec-gap: 14px; position: relative; min-width: 0; container-type: inline-size; }
.nx-rec__open { display: flex; flex-direction: column; gap: var(--rec-gap); width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; border-radius: 16px; outline: none; cursor: pointer; }
.nx-rec__open[disabled] { cursor: progress; }
.nx-rec__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--nx-well); box-shadow: var(--nx-shadow-xl); transition: transform 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.nx-rec__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.nx-rec__open:hover .nx-rec__thumb::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 2px var(--nx-hover-ring); }
.nx-rec__open:focus-visible .nx-rec__thumb { outline: 2px solid var(--nx-sky); outline-offset: 3px; }
.nx-rec__open:active .nx-rec__thumb { transform: scale(0.97); }
.nx-rec__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* A YouTube hqdefault is 4:3 with letterbox bars: */
.nx-rec__img--yt { inset: auto; left: 0; top: -16.6667%; width: 100%; height: 133.3333%; }
/* The fallback, when there is no picture or it fails to load: */
.nx-rec__thumb--art { background: radial-gradient(120% 90% at 80% 0%, #232323, #0D0D0D 70%); }
.nx-rec__thumb--art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.nx-rec__art { position: absolute; right: -6%; top: -8%; height: 116%; width: auto; opacity: 0.95; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
.nx-rec__plate { position: absolute; left: 18px; right: 34%; bottom: 16px; color: #FFFFFF; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.nx-rec__plate:dir(rtl) { right: 18px; left: 34%; }
/* The facts on the frame always sit over footage, so they keep the dark scrim in both themes. */
.nx-rec__dur, .nx-rec__mark { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; border-radius: 7px; background: rgba(8, 8, 8, 0.8); color: #FFFFFF; font: 600 15px / 1 var(--nx-font); font-variant-numeric: tabular-nums; padding: 6px 8px; letter-spacing: 0.01em; }
.nx-rec__dur { right: 8px; bottom: 10px; }
.nx-rec__mark { left: 10px; top: 10px; border-radius: var(--nx-r-pill); padding: 7px 12px 7px 10px; }
.nx-rec__mark i { width: 8px; height: 8px; border-radius: 50%; background: #4FB8FF; box-shadow: 0 0 8px 1px rgba(79, 184, 255, 0.7); }
.nx-rec__mark--bad i { background: #FB7185; box-shadow: none; }
.nx-rec__dur--live i { width: 7px; height: 7px; border-radius: 50%; background: #4FB8FF; box-shadow: 0 0 8px 1px rgba(79, 184, 255, 0.7); }
/* The element that crosses an edge: */
.nx-rec__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.2); z-index: 2; }
.nx-rec__bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--nx-sky-line), var(--nx-sky)); box-shadow: 0 0 12px 1px rgba(79, 184, 255, 0.7); transition: width 240ms cubic-bezier(0.19, 1, 0.22, 1); }
/* The one sky light on the Library: the rim of a recording that waits on the member. */
/* the recording that needs the member: its lit top edge (.nx-lit, system ruling 2B) and a hairline ring, no glow */
.nx-rec__thumb--needs { box-shadow: 0 0 0 1.5px var(--nx-sky-rim), var(--nx-shadow-xl); }
.nx-rec__text { display: flex; flex-direction: column; gap: 4px; padding-right: 46px; min-width: 0; }
.nx-rec__title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--nx-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nx-rec__meta { font-size: var(--nx-t-body); color: var(--nx-ink-3); letter-spacing: 0.01em; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* The More button sits at the title row's right. */
.nx-rec__more { position: absolute; right: -8px; top: calc(100cqw * 9 / 16 + var(--rec-gap)); width: 44px; min-height: 44px; z-index: 1; background: transparent; color: var(--nx-ink-4); border-radius: 12px; }
.nx-rec__more:hover, .nx-rec__more.is-on { color: var(--nx-ink); background: var(--nx-btn); }
.nx-rec__more .ic { width: 22px; height: 22px; }
/* The card's menu: a popover on a laptop, under the More button it belongs to. */
.nx-rec__away { position: fixed; inset: 0; z-index: 5; }
.nx-rec__pop { position: absolute; right: -8px; top: calc(100cqw * 9 / 16 + var(--rec-gap) + 48px); width: 272px; z-index: 6; }
.nx-rec__pop .nx-card__in { padding: 8px; gap: 2px; }
.nx-rec__pop hr, .nx-lib-sheet hr { border: 0; height: 1px; background: var(--nx-hair); margin: 6px 4px; }
.nx-menu__row--bad { color: var(--nx-bad); }
.nx-menu__row--bad .ic { --ic-a: var(--nx-bad); }

/* The days the grid is headed by, and one card per episode: what was ordered sits under the meta
   line, and the earlier cuts of the same episode fold under the newest one press away. */
.nx-lib__days { display: flex; flex-direction: column; gap: 40px; }
.nx-lib__day { display: flex; flex-direction: column; gap: 16px; }
.nx .nx-lib__dayh { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; color: var(--nx-ink-3); margin: 0; }
.nx-rec__formats { color: var(--nx-ink-4); }
.nx-rec__earlier { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nx-rec__fold { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 0 12px 0 10px; margin-left: -10px; border: 0; border-radius: 12px; background: transparent; color: var(--nx-ink-3); font: 500 var(--nx-t-body) / 1 var(--nx-font); cursor: pointer; }
.nx-rec__fold:hover { color: var(--nx-ink); background: var(--nx-btn); }
.nx-rec__fold:focus-visible, .nx-rec__cut:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx-rec__fold .ic { width: 18px; height: 18px; }
.nx-rec__fold .ic--sm { width: 14px; height: 14px; transition: transform 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.nx-rec__fold .ic--sm.is-up { transform: rotate(180deg); }
.nx-rec__cuts { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--nx-hair); display: flex; flex-direction: column; gap: 2px; }
.nx-rec__cut { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nx-rec__cut:hover { background: var(--nx-btn); }
.nx-rec__cut[disabled] { cursor: progress; }
.nx-rec__cut-t { font-size: var(--nx-t-body); font-weight: 600; color: var(--nx-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-lib-configure { align-self: flex-start; }

/* The quiet states: a failed refresh, the empty library, nothing matched, the skeletons, the foot. */
.nx-lib__note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--nx-ink-3); font-size: var(--nx-t-lead); padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); align-self: flex-start; }
.nx-lib__note .ic { color: var(--nx-warn); --ic-a: var(--nx-warn); }
.nx-lib__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 24px 0 40px; }
.nx-lib__art { width: 360px; max-width: 80%; aspect-ratio: 1; border-radius: 28px; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.nx[data-theme="light"] .nx-lib__art { -webkit-mask-image: none; mask-image: none; box-shadow: var(--nx-shadow-2xl); }
.nx .nx-lib__empty h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--nx-ink); margin: 0; }
.nx-lib__none { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 0; }
.nx .nx-lib__none p { font-size: 22px; color: var(--nx-ink); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
/* The skeletons are the card's own shape, so nothing moves when the real cards land. */
.nx-lib-skel .nx-skel__media { border-radius: 14px; }
.nx-lib-skel .nx-skel__line { height: 22px; border-radius: 6px; }
.nx-lib-skel .nx-skel__line:last-child { height: 15px; width: 52%; }
.nx-lib__foot { display: flex; justify-content: center; padding: 4px 0 8px; }

/* The sheets: Rename, Make more clips, and the delete confirm as a centred dialog on a laptop. */
.nx-lib-sheet__head { display: flex; gap: 14px; align-items: center; }
.nx-lib-sheet__thumb { width: 112px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; flex: none; position: relative; background: var(--nx-well); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.nx-lib-sheet__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-lib-sheet__thumb--art img { object-fit: contain; }
.nx-lib-sheet__title { font-size: var(--nx-t-lead); font-weight: 600; color: var(--nx-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx .nx-lib-sheet__h { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--nx-ink); margin: 0; }
.nx .nx-lib-body { font-size: var(--nx-t-lead); color: var(--nx-ink-3); line-height: 1.5; margin: 0; }
.nx .nx-lib-meta { font-size: var(--nx-t-body); color: var(--nx-ink-3); line-height: 1.45; margin: 0; }
.nx-lib-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-lib-label { font-size: var(--nx-t-body); color: var(--nx-ink-3); font-weight: 500; }
.nx-lib-step { display: flex; align-items: center; gap: 6px; }
.nx-lib-step b { min-width: 48px; text-align: center; font-size: 22px; font-weight: 600; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
/* Delete is quiet until the confirm, and solid there: */
.nx-lib-del.nx-btn--danger { background: var(--nx-bad); color: #2A0610; font-weight: 600; }
.nx[data-theme="light"] .nx-lib-del.nx-btn--danger { color: #FFFFFF; }
.nx-lib-del.nx-btn--danger .ic { --ic-a: currentColor; }
@container nx (min-width: 860px) {
  .nx-lib-sheet--dialog { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 440px; border: 1px solid var(--nx-rim-top); border-radius: 20px; }
  .nx-lib-sheet--dialog .nx-sheet__grab { display: none; }
}

@container nx (max-width: 640px) {
  .nx-lib { gap: 24px; }
  .nx-lib__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .nx .nx-lib__t { font-size: 32px; line-height: 1.1; grid-column: 1; }
  .nx-lib__new { grid-column: 2; grid-row: 1; width: 48px; padding: 0; min-height: 48px; }
  .nx-lib__new > span:not(.nx-glow) { display: none; }
  .nx-lib__find { grid-column: 1; width: auto; }
  .nx-lib__sort { grid-column: 2; }
  .nx-lib__sort .ic--sm { display: none; }
  .nx-lib__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .nx-lib__art { width: 260px; }
  .nx .nx-lib__empty h2 { font-size: 30px; }
  .nx-lib__note { font-size: var(--nx-t-body); }
  .nx-lib-sheet .nx-menu__row { min-height: 52px; }
  .nx-lib-sheet .nx-actions { flex-direction: row-reverse; }
  .nx-lib-sheet .nx-actions .nx-btn { flex: 1; min-height: 52px; }
}

/* Reduced motion: the same facts, still. The bar jumps to its value; the frame does not press. */
@media (prefers-reduced-motion: reduce) {
  .nx-rec__thumb, .nx-rec__thumb::after, .nx-rec__bar b, .nx-rec__fold .ic--sm { transition: none; }
  .nx-rec__open:active .nx-rec__thumb { transform: none; }
}
/* surface:library:end */

/* ==========================================================================
   UX 10/10 surface: Results (D3). Atlas v5, owner approval 2026-09-25.
   Only the lane building this surface edits between these two markers, so
   parallel lanes never touch the same lines.
   ========================================================================== */
/* surface:results:begin */
/* Results (D3), Atlas v5: */
.nx .nxr { display: flex; flex-direction: column; gap: 26px; --nxr-colour: 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --nxr-arrive: 240ms cubic-bezier(0.19, 1, 0.22, 1); }
.nx .nx-body:has(> .nxr) { max-width: 1360px; }
/* C1 sizes on this surface: 17px body and controls, 15px meta, nothing a member reads below 15px */
.nx .nxr .nx-btn { font-size: var(--nx-t-lead); font-weight: 500; }
.nx .nxr .nx-details, .nx .nxr .nx-details summary, .nx .nxr .nx-details__body { font-size: var(--nx-t-body); }
.nx .nxr .nx-details summary { min-height: var(--nx-target); }
.nx .nxr .nx-details__body { font-family: var(--nx-font); }
/* the key column of the Details reads at the AA floor on both grounds: */
.nx .nxr .nx-details__body b { color: var(--nx-ink-3); }
.nx .nxr-t1 { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--nx-ink); margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nx .nxr-why { font-size: var(--nx-t-lead); color: var(--nx-ink-3); line-height: 1.5; margin: 0; }
/* An X-only order opens on its X clips: each a section with its 16:9 player and its post text. */
.nx .nxr-xclips { gap: 28px; }
.nx .nxr-xclip { display: grid; gap: 12px; min-width: 0; }
.nx .nxr-xpost { white-space: pre-line; overflow-wrap: anywhere; }
/* The posting words of a format (UX-04): each line, its label above it and its own Copy under it. */
.nx .nx-postwords { gap: 12px; min-width: 0; }
.nx .nx-postwords__row { display: grid; gap: 4px; min-width: 0; }
.nx .nxr-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* the recording header, shared with the progress page */
.nx .nx-rh { display: flex; align-items: center; gap: 14px; min-height: 56px; }
.nx .nx-rh__back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-target); min-width: var(--nx-target); justify-content: center; padding: 0 12px 0 6px; margin-left: -6px; border: 0; border-radius: 12px; background: transparent; color: var(--nx-ink-3); font: 500 var(--nx-t-lead)/1 var(--nx-font); cursor: pointer; transition: color var(--nxr-colour), background var(--nxr-colour); }
.nx .nx-rh__back:hover { color: var(--nx-ink); background: var(--nx-btn); }
.nx .nx-rh__back .ic { width: 20px; height: 20px; }
.nx .nx-rh__sep { width: 1px; height: 28px; background: var(--nx-hair); }
.nx .nx-rh__thumb { position: relative; width: 92px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; flex: none; background: var(--nx-well); box-shadow: var(--nx-shadow-xl); }
.nx .nx-rh__thumb img, .nx .nx-rh__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx .nx-rh__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.nx .nx-rh__text { display: flex; flex-direction: column; min-width: 0; }
.nx .nx-rh__title { font-size: var(--nx-t-lead); font-weight: 600; color: var(--nx-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx .nx-rh__meta { font-size: var(--nx-t-body); color: var(--nx-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.nx .nx-rh__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nx .nx-rh__more { display: none; }

/* The stage. */
.nx .nxr-stage { display: grid; grid-template-columns: 340px 480px minmax(0, 1fr); gap: 0 40px; align-items: start; }
.nx .nxr-stage > .nxr-rail { grid-column: 1; grid-row: 1; }
.nx .nxr-stage > .nxr-screen, .nx .nxr-stage > .nxr-skel-screen { grid-column: 2; grid-row: 1; }
.nx .nxr-stage > .nxr-fx { grid-column: 3; grid-row: 1; }
.nx .nxr-stage--one { grid-template-columns: 480px minmax(0, 440px); justify-content: center; }
.nx .nxr-stage--one > .nxr-screen { grid-column: 1; }
.nx .nxr-stage--one > .nxr-fx { grid-column: 2; }
.nx .nxr-stage--wide { grid-template-columns: 340px minmax(0, 1fr); }
.nx .nxr-stage--wide > .nxr-screen { grid-column: 2; grid-row: 1; }
.nx .nxr-stage--wide > .nxr-fx { grid-column: 2; grid-row: 2; }
.nx .nxr-stage--wide > .nxr-rail { grid-row: 1 / span 2; }
.nx .nxr-stage--wide.nxr-stage--one { grid-template-columns: minmax(0, 1fr); }
.nx .nxr-stage--wide.nxr-stage--one > .nxr-screen, .nx .nxr-stage--wide.nxr-stage--one > .nxr-fx { grid-column: 1; }
/* the shortfall line caps the filmstrip's own column, where the frame draws it */
.nx .nxr > .nxr-rail__note { max-width: 340px; }

/* the rail is a filmstrip whose frames crop into its edge (Rauno) */
.nx .nxr-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nx .nxr-rail__strip { display: flex; flex-direction: column; gap: 4px; max-height: 700px; overflow: auto; padding: 4px 6px 60px 4px; margin: -4px -6px 0 -4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.nx .nxr-rail__strip--mid { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); }
.nx .nxr-rl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; padding: 8px; border-radius: 16px; border: 1px solid transparent; background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; width: 100%; transition: background var(--nxr-colour), border-color var(--nxr-colour); }
.nx .nxr-rl:hover { background: var(--nx-flat); border-color: var(--nx-rim-top); }
.nx .nxr-rl[aria-current="true"] { background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); border-color: var(--nx-rim-top); box-shadow: var(--nx-shadow-xl); }
.nx .nxr-poster { position: relative; display: block; width: 120px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--nx-well); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.nx .nxr-poster img, .nx .nxr-poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.nx .nxr-poster--frame img, .nx .nxr-poster--frame video { object-position: 50% 45%; }
.nx .nxr-poster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.nx .nxr-rl[aria-current="true"] .nxr-poster::after { box-shadow: inset 0 0 0 2px var(--nx-sky); }
.nx .nxr-rl[aria-current="true"] .nxr-poster { box-shadow: 0 0 22px -4px rgba(79, 184, 255, 0.6); }
.nx .nxr-poster--type { background: radial-gradient(120% 90% at 50% 0%, var(--nx-fill-top), var(--nx-well) 70%); }
.nx .nxr-poster--type::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 16px 16px; }
.nx[data-theme="light"] .nxr-poster--type::before { background-image: linear-gradient(rgba(17, 17, 17, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 17, 0.06) 1px, transparent 1px); }
.nx .nxr-poster__type { position: absolute; left: 10px; right: 10px; top: 12px; color: var(--nx-ink); font-size: var(--nx-t-body); font-weight: 600; line-height: 1.25; }
.nx .nxr-dur { position: absolute; right: 6px; bottom: 6px; z-index: 2; border-radius: 6px; background: rgba(8, 8, 8, 0.8); color: #FFFFFF; font: 600 var(--nx-t-body)/1 var(--nx-font); font-variant-numeric: tabular-nums; padding: 5px 6px; }
.nx .nxr-rl__text { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; min-width: 0; }
.nx .nxr-rl__hook { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.22; color: var(--nx-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nx .nxr-rl__state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nx-t-body); color: var(--nx-ink-3); }
.nx .nxr-ok { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--nx-ok-soft); color: var(--nx-ok); border: 1px solid var(--nx-ok-rim); flex: none; }
.nx .nxr-ok .ic { width: 12px; height: 12px; stroke-width: 3; --ic-a: currentColor; }
.nx .nxr-mark { position: absolute; left: 6px; bottom: 6px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 8, 8, 0.8); color: #FFFFFF; }
.nx .nxr-mark .ic { width: 16px; height: 16px; --ic-a: currentColor; }
.nx .nxr-mark--KEPT { color: var(--nx-ok); }
.nx .nxr-mark--RECUT { color: var(--nx-warn); }
.nx .nxr-mark--REJECTED { color: #A3A3A3; }
.nx .nxr-mark--TASTE_NOTE { color: var(--nx-sky-text); }
.nx .nxr-rail--rate .nxr-ok { display: none; }
.nx .nxr-rail__note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); font-size: var(--nx-t-lead); color: var(--nx-ink-2); }
.nx .nxr-rail__note > i { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-warn); flex: none; }
.nx .nxr-rail__note .nx-btn { margin-left: auto; }
/* Rauno's index: one tick per clip, the current one a box */
.nx .nxr-ticks { display: flex; align-items: center; gap: 12px; font-size: var(--nx-t-body); color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.nx .nxr-ticks__row { display: flex; gap: 5px; align-items: center; height: 24px; flex: 1; overflow: hidden; }
.nx .nxr-ticks__row i { width: 2px; height: 14px; background: var(--nx-ring); border-radius: 1px; flex: none; }
.nx .nxr-ticks__row i.is-on { width: 16px; height: 14px; background: transparent; border: 1.5px solid var(--nx-sky); border-radius: 3px; }
.nx .nxr-ticks__row i.is-seen { background: var(--nx-ink-4); }

/* the screen: the clip on its own blurred light. The only colour on the page is the member's frame. */
.nx .nxr-screen { position: relative; width: 480px; height: 680px; border-radius: 24px; overflow: hidden; background: #0B0B0B; box-shadow: var(--nx-shadow-2xl), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.nx[data-theme="light"] .nxr-screen { box-shadow: 0 30px 60px -20px rgba(17, 17, 17, 0.35); }
.nx .nxr-screen__blur { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(40px) brightness(0.62) saturate(1.7); }
.nx .nxr-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); pointer-events: none; }
.nx .nxr-clip { position: absolute; top: 20px; bottom: 20px; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px rgba(0, 0, 0, 0.55); }
.nx .nxr-clip > video, .nx .nxr-clip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000000; }
.nx .nxr-screen__empty { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); text-align: center; color: var(--nx-ink-2); font-size: var(--nx-t-lead); line-height: 1.5; }
/* the one quiet switch, on the screen */
.nx .nxr-fmt { position: absolute; top: 16px; left: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: var(--nx-target); padding: 0 12px; border-radius: 999px; background: rgba(12, 12, 12, 0.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.28); font: 500 var(--nx-t-body)/1 var(--nx-font); cursor: pointer; }
.nx .nxr-fmt .ic { width: 18px; height: 18px; stroke: #FFFFFF; --ic-a: #8AD4FF; }
.nx .nxr-fmt__chev { width: 16px; height: 16px; --ic-a: #FFFFFF; opacity: 0.85; }
.nx .nxr-fmt-menu { position: absolute; top: 66px; left: 16px; z-index: 5; width: 300px; max-width: calc(100% - 32px); padding: 1px; border-radius: 16px; background: linear-gradient(var(--nx-rim-top), var(--nx-rim-bot)); box-shadow: var(--nx-shadow-2xl); }
.nx .nxr-fmt-menu__in { border-radius: 15px; background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nx .nxr-fmt-opt { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 12px; align-items: center; min-height: 60px; padding: 8px 12px; border-radius: 11px; border: 0; background: transparent; color: var(--nx-ink-2); font: inherit; text-align: left; cursor: pointer; width: 100%; transition: background var(--nxr-colour); }
.nx .nxr-fmt-opt:hover { background: var(--nx-flat); }
.nx .nxr-fmt-opt b { display: block; font-size: var(--nx-t-lead); font-weight: 600; color: var(--nx-ink); }
.nx .nxr-fmt-opt span > span { font-size: var(--nx-t-body); color: var(--nx-ink-3); }
.nx .nxr-fmt-opt .ic { width: 22px; height: 22px; }
.nx .nxr-fmt-opt[aria-checked="true"] { background: var(--nx-panel-2); }
.nx .nxr-fmt-opt__on { color: var(--nx-sky); }
.nx .nxr-count { display: none; position: absolute; top: 16px; right: 16px; z-index: 4; min-height: 36px; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(12, 12, 12, 0.66); color: #FFFFFF; font: 600 var(--nx-t-body)/1 var(--nx-font); font-variant-numeric: tabular-nums; border: 1px solid rgba(255, 255, 255, 0.28); }
/* Wide: the 16:9 cut across the focus area */
.nx .nxr-screen--wide { width: 100%; height: auto; padding: 68px 24px 24px; }
.nx .nxr-screen--wide .nxr-clip { position: relative; top: auto; bottom: auto; left: auto; transform: none; aspect-ratio: 16 / 9; width: 100%; display: block; }

/* the focus column */
.nx .nxr-fx { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; min-width: 0; }
.nx .nxr-fx__acts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.nx .nxr-fx__row { display: flex; gap: 8px; flex-wrap: wrap; }
.nx .nxr-fx__row .nx-btn { padding: 0 16px; }
.nx .nxr-fx__dl { width: 100%; min-height: 56px; font-size: 19px; }
.nx .nxr-fx__dl .ic { width: 20px; height: 20px; }
.nx .nxr-stage--wide > .nxr-fx { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px 40px; align-items: start; padding-top: 24px; }
.nx .nxr-stage--wide > .nxr-fx > .nxr-t1 { grid-column: 1; grid-row: 1; }
.nx .nxr-stage--wide > .nxr-fx > .nxr-why { grid-column: 1; grid-row: 2; }
.nx .nxr-stage--wide > .nxr-fx > :not(.nxr-t1):not(.nxr-why) { grid-column: 2; }
.nx .nxr-note { font-size: var(--nx-t-body); color: var(--nx-ink-3); }
.nx .nxr-note--bad { color: var(--nx-bad); }
/* The run's own truth under the clip (old-app gaps 11b to 11e): it takes no room when the run recorded nothing. */
.nx .nxr-truth:empty { display: none; }

/* rate mode: three equal choices, no glow */
.nx .nxr-rate { display: flex; flex-direction: column; gap: 10px; }
.nx .nxr-rate__opts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.nx .nxr-rate__opt { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--nx-rim-top); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); color: var(--nx-ink); font: 600 19px/1 var(--nx-font); cursor: pointer; text-align: left; transition: border-color var(--nxr-colour); }
.nx .nxr-rate__opt .ic { width: 24px; height: 24px; flex: none; }
.nx .nxr-rate__opt:hover { border-color: var(--nx-hover-border); }
.nx .nxr-rate__opt[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--nx-sky); }
.nx .nxr-pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--nx-sky); }
.nx .nxr-rate__opt[disabled] { cursor: default; opacity: 0.6; }
.nx .nxr-rate__opt--KEPT .ic { color: var(--nx-ok); --ic-a: var(--nx-ok); }
.nx .nxr-rate__opt--RECUT .ic { --ic-a: var(--nx-warn); }
.nx .nxr-rate__opt--REJECTED .ic { color: var(--nx-ink-3); --ic-a: var(--nx-ink-3); }
.nx .nxr-rate__saved { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nx-t-body); color: var(--nx-ink-3); }
.nx .nxr-rate__saved .ic { color: var(--nx-ok); --ic-a: var(--nx-ok); width: 16px; height: 16px; }

/* shelves, like the rows of a channel page; a row runs past the frame line to the screen edge */
.nx .nxr-shelves { display: flex; flex-direction: column; gap: 44px; padding-top: 12px; }
.nx .nxr-shelf { display: flex; flex-direction: column; gap: 16px; }
.nx .nxr-shelf__head { display: flex; align-items: baseline; gap: 12px; }
.nx .nxr-shelf__head h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.nx .nxr-shelf__n { font-size: var(--nx-t-body); color: var(--nx-ink-4); font-variant-numeric: tabular-nums; }
.nx .nxr-shelf__row { display: flex; gap: 22px; overflow-x: auto; margin-right: -72px; padding: 2px 72px 6px 0; scrollbar-width: none; scroll-snap-type: x mandatory; }
.nx .nxr-sc { flex: none; width: 320px; display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; color: inherit; font: inherit; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; }
.nx .nxr-sc--trailer { width: 520px; }
.nx .nxr-sc--car { width: 236px; }
/* a carousel card is a stack of slides: */
.nx .nxr-sc--car .nxr-sc__thumb { aspect-ratio: 4 / 5; margin-right: 12px; box-shadow: var(--nx-shadow-xl), 6px -4px 0 -1px var(--nx-panel-2), 12px -8px 0 -2px var(--nx-flat); }
.nx .nxr-sc__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--nx-well); box-shadow: var(--nx-shadow-xl); }
.nx .nxr-sc__thumb img, .nx .nxr-sc__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx .nxr-sc__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.nx .nxr-sc__thumb .nxr-dur { right: 8px; bottom: 8px; padding: 6px 8px; }
.nx .nxr-sc__t { font-size: var(--nx-t-lead); font-weight: 600; color: var(--nx-ink); line-height: 1.3; }
.nx .nxr-sc:hover .nxr-sc__t { color: var(--nx-sky-text); }
.nx .nxr-shelf__fail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; align-self: flex-start; padding: 10px 16px; border-radius: 14px; background: var(--nx-well); box-shadow: var(--nx-inset-hi); font-size: var(--nx-t-lead); color: var(--nx-ink-2); }
.nx .nxr-shelf__fail .ic { color: var(--nx-warn); --ic-a: var(--nx-warn); flex: none; }

/* the sheet one shelf card opens: the item on its own, with its save link */
.nx .nxr-sheet { display: flex; flex-direction: column; gap: 16px; }
.nx .nxr-sheet__t { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--nx-ink); margin: 0; }
/* the readable transcript (NxTranscriptReader, next/dark.jsx): the time, the speaker, the words */
.nx .nx-tr__p { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; color: var(--nx-ink-2); line-height: 1.55; }
.nx .nx-tr__p > span:last-child { grid-column: 2; overflow-wrap: anywhere; }
.nx .nx-tr__when { color: var(--nx-ink-4); font-variant-numeric: tabular-nums; font-size: var(--nx-t-label); padding-top: 2px; }
.nx .nx-tr__who { grid-column: 2; color: var(--nx-ink); font-weight: 600; font-size: var(--nx-t-label); }
.nx .nxr-sheet__screen { position: relative; border-radius: 16px; overflow: hidden; background: #000000; aspect-ratio: 16 / 9; }
.nx .nxr-sheet__screen video, .nx .nxr-sheet__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* A carousel reads as the post does: one 4:5 card at a time, swiped in order (manual 21.3). */
.nx .nxr-sheet__slides { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 420px); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.nx .nxr-sheet__slides figure { margin: 0; scroll-snap-align: start; display: grid; gap: 6px; }
.nx .nxr-sheet__slides img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; background: var(--nx-well); }
.nx .nxr-sheet__slides figcaption { font-size: 15px; color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.nx-cb-pics { display: grid; gap: 6px; }
.nx-cb-pics__row { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.nx-cb-pic { padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--nx-well); cursor: pointer; min-height: var(--nx-target); overflow: hidden; }
.nx-cb-pic img { display: block; width: 100%; aspect-ratio: 1080 / 674; object-fit: cover; }
.nx-cb-pic.is-on { border-color: var(--nx-sky); }
.nx-cb-pic:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }

/* a carousel as its Instagram post: one 4:5 card, round arrows that hide at the ends, the n/N pill, the dots */
.nx .nxr-post { display: grid; gap: 10px; width: min(100%, 470px); }
.nx .nxr-post__frame { position: relative; border-radius: 10px; overflow: hidden; background: var(--nx-well); box-shadow: var(--nx-shadow-xl); }
.nx .nxr-post__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nx .nxr-post__track::-webkit-scrollbar { display: none; }
.nx .nxr-post__track:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: -2px; }
.nx .nxr-post__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.nx .nxr-post__slide img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.nx .nxr-post__count { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; background: rgb(18 18 18 / 0.66); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; pointer-events: none; }
.nx .nxr-post__arrow { position: absolute; top: 50%; translate: 0 -50%; width: var(--nx-target); height: var(--nx-target); padding: 0; border: 0; cursor: pointer; display: grid; place-items: center; color: #262626; background: radial-gradient(circle, rgb(255 255 255 / 0.9) 0 14px, transparent 14.5px); filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.28)); transition: scale 120ms ease-out, opacity 160ms ease-out; }
.nx .nxr-post__arrow .ic { width: 16px; height: 16px; }
.nx .nxr-post__arrow--prev { left: 4px; }
.nx .nxr-post__arrow--prev .ic { scale: -1 1; }
.nx .nxr-post__arrow--next { right: 4px; }
.nx .nxr-post__arrow:active { scale: 0.92; }
.nx .nxr-post__arrow:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: -4px; border-radius: 999px; }
.nx .nxr-post__dots { display: flex; justify-content: center; gap: 4px; min-height: 6px; }
.nx .nxr-post__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--nx-ink-4); opacity: 0.55; transition: background-color 160ms ease-out, opacity 160ms ease-out; }
.nx .nxr-post__dot.is-on { background: var(--nx-sky); opacity: 1; }
.nx .nxr-post__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .nx .nxr-post__arrow, .nx .nxr-post__dot { transition: none; } }

/* the centred plate (C5): one illustration, one line, one action, one Details */
.nx .nxr-plate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 40px 0; }
.nx .nxr-plate img { width: 300px; max-width: 76%; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.nx[data-theme="light"] .nxr-plate img { -webkit-mask-image: none; mask-image: none; border-radius: 28px; box-shadow: var(--nx-shadow-2xl); }
.nx .nxr-plate h1 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
/* loading: skeletons in the exact final shapes */
.nx .nxr-skel-screen { width: 480px; height: 680px; border-radius: 24px; display: block; aspect-ratio: auto; }
.nx .nxr-skel-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 16px; align-content: start; padding: 8px; }
.nx .nxr-skel-row .nx-skel__media { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3 / 4; border-radius: 10px; }
.nx .nxr-skel-row .nx-skel__line { grid-column: 2; height: 20px; border-radius: 6px; }
.nx .nxr-skel-fx { display: flex; flex-direction: column; gap: 14px; }

/* the phone: the clip first, the strip under it (C8, designed rather than shrunk) */
@container nx (max-width: 640px) {
  .nx .nxr { gap: 14px; }
  .nx .nx-rh { gap: 8px; min-height: 48px; }
  .nx .nx-rh__back > span, .nx .nx-rh__sep, .nx .nx-rh__tools { display: none; }
  .nx .nx-rh__back { width: var(--nx-target); justify-content: center; padding: 0; }
  .nx .nx-rh__thumb { width: 64px; }
  .nx .nx-rh__more { display: inline-flex; margin-left: auto; }
  .nx .nxr-count { display: inline-flex; }
  .nx .nxr-screen { width: auto; height: 440px; margin: 0 calc(-1 * var(--nx-s4)); border-radius: 0; }
  .nx .nxr-screen::after { border-radius: 0; }
  .nx .nxr-clip { top: 14px; bottom: 14px; }
  .nx .nxr-screen--wide { height: auto; padding: 0; }
  .nx .nxr-screen--wide .nxr-clip { position: relative; top: auto; left: auto; right: auto; transform: none; margin: 64px 0 16px; border-radius: 0; display: block; width: 100%; }
  .nx .nxr-fx, .nx .nxr-stage--wide > .nxr-fx { display: flex; flex-direction: column; gap: 14px; padding-top: 0; }
  .nx .nxr-t1 { font-size: 30px; line-height: 1.1; }
  .nx .nxr-stage, .nx .nxr-stage--one, .nx .nxr-stage--wide { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  /* the filmstrip travels sideways under the player, its posters wider and its rows unlit */
  .nx .nxr-rail__strip { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 12px; margin: 0 calc(-1 * var(--nx-s4)); padding: 4px var(--nx-s4) 6px; -webkit-mask-image: none; mask-image: none; }
  .nx .nxr-rl { grid-template-columns: 132px; gap: 8px; width: 132px; flex: none; padding: 0; border: 0; }
  .nx .nxr-rl:hover, .nx .nxr-rl[aria-current="true"] { background: transparent; box-shadow: none; border-color: transparent; }
  .nx .nxr-poster { width: 132px; }
  .nx .nxr-rl__text { padding-top: 0; }
  .nx .nxr-rl__hook { font-size: var(--nx-t-lead); -webkit-line-clamp: 3; }
  .nx .nxr-rl__state { display: none; }
  .nx .nxr > .nxr-rail__note { max-width: none; }
  .nx .nxr-fx__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .nx .nxr-fx__row .nx-btn { flex-direction: column; gap: 6px; min-height: 68px; padding: 0 6px; border-radius: 14px; font-size: var(--nx-t-body); white-space: normal; text-align: center; }
  .nx .nxr-fx__row .nx-btn .ic { width: 22px; height: 22px; }
  .nx .nxr-shelf__row { margin-right: calc(-1 * var(--nx-s4)); padding-right: var(--nx-s4); }
  .nx .nxr-sc { width: 264px; }
  .nx .nxr-sc--trailer { width: 300px; }
  .nx .nxr-sc--car { width: 200px; }
  .nx .nxr-rate__opts { grid-template-columns: repeat(3, 1fr); }
  .nx .nxr-rate__opt { flex-direction: column; justify-content: center; gap: 8px; min-height: 76px; padding: 0 6px; font-size: var(--nx-t-body); text-align: center; }
  .nx .nxr-plate h1 { font-size: 30px; }
  .nx .nxr-skel-screen { width: auto; height: 440px; margin: 0 calc(-1 * var(--nx-s4)); border-radius: 0; }
  .nx .nxr-shelves { gap: 32px; }
}
/* motion only for facts, and reduced motion designed first: */
@media (prefers-reduced-motion: reduce) {
  .nx .nxr { --nxr-colour: 0ms; --nxr-arrive: 0ms; }
}
/* surface:results:end */

/* ==========================================================================
   UX 10/10 surface: the Bernayser chat library (D4). Atlas v5, owner approval 2026-09-25.
   Only the lane building this surface edits between these two markers, so
   parallel lanes never touch the same lines.
   ========================================================================== */
/* surface:bzlibrary:begin */
/* Bernayser History, Library and the sky rule (owner 2026-09-30; web/next/bernayser.jsx, History and Library section).
   The rule: a short sky segment with the accent's glow running into a white hairline that fades out.
   It sits between each exchange of the chat (after the answer that a member message follows) and
   between History rows; never on a card. */
.nx { --nx-bz-rule: linear-gradient(90deg, var(--nx-sky) 0 64px, rgba(255, 255, 255, 0.92) 64px, rgba(255, 255, 255, 0.45) 62%, rgba(255, 255, 255, 0) 100%); --nx-bz-rule-glow: radial-gradient(52px 6px at 32px 50%, rgba(79, 184, 255, 0.75), rgba(79, 184, 255, 0) 72%); }
.nx[data-theme="light"] { --nx-bz-rule: linear-gradient(90deg, var(--nx-sky) 0 64px, #FFFFFF 64px, #FFFFFF 62%, rgba(255, 255, 255, 0) 100%); --nx-bz-rule-glow: linear-gradient(90deg, var(--nx-sky) 0 64px, rgba(17, 17, 17, 0.28) 64px, rgba(17, 17, 17, 0.28) 62%, rgba(17, 17, 17, 0) 100%); }
.nx-bzh__item + .nx-bzh__item::before {
  content: ""; display: block; grid-column: 1 / -1; height: 5px;
  background: var(--nx-bz-rule) center / 100% 1px no-repeat, var(--nx-bz-rule-glow) center / 100% 5px no-repeat;
}
.nx[data-theme="light"] .nx-bzh__item + .nx-bzh__item::before {
  height: 4px; background: var(--nx-bz-rule) 0 1px / 100% 2px no-repeat, var(--nx-bz-rule-glow) 0 3px / 100% 1px no-repeat;
}
.nx-bzc__thread > .nx-turn--them:has(+ .nx-turn--me)::after { content: ""; display: block; grid-column: 1 / -1; height: 1px; margin-top: 18px; background: var(--nx-bz-rule); }
.nx[data-theme="light"] .nx-bzc__thread > .nx-turn--them:has(+ .nx-turn--me)::after { background: var(--nx-bz-rule-glow); }
.nx-bzc__head:has(.nx-bzp) { align-items: center; }
.nx-bzc__thread > .nx-turn--them:has(+ .nx-turn--me) + .nx-turn--me { margin-top: 6px; }
/* The three places, as links on the tab material. */
.nx-bzp a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px; border-radius: var(--nx-r-pill); color: var(--nx-ink-3); font: 500 15px/1 var(--nx-font); text-decoration: none; white-space: nowrap; transition: color var(--nx-d-state) var(--nx-ease), background var(--nx-d-state) var(--nx-ease); }
.nx-bzp a:hover { color: var(--nx-ink); }
.nx-bzp a:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx-bzp a[aria-current="page"] { color: var(--nx-ink); background: var(--nx-panel-2); box-shadow: var(--nx-inset-btn), 0 1px 2px rgba(0, 0, 0, 0.35); }
.nx-bzh { width: 100%; max-width: 760px; margin: 0 auto; gap: 28px; }
.nx-bzh__head { display: flex; flex-direction: column; gap: 28px; }
.nx-bzh__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-bzh__group { display: flex; flex-direction: column; gap: 10px; }
.nx-bzh__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nx-bzh__item { display: grid; gap: 4px; }
.nx-bzh__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 14px 12px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--nx-d-state) var(--nx-ease), transform 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.nx-bzh__row:hover { background: var(--nx-flat); }
.nx-bzh__row:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx-bzh__row:active { transform: scale(0.99); }
.nx-bzh__disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-well); color: var(--nx-ink-2); font: 600 15px/1 var(--nx-font); letter-spacing: 0.02em; box-shadow: var(--nx-inset-hi), 0 0 0 1px var(--nx-rim-top); }
.nx-bzh__disc--needs { background: var(--nx-sky-soft); color: var(--nx-sky-text); box-shadow: 0 0 0 1.5px var(--nx-sky-rim), 0 0 18px -4px rgba(79, 184, 255, 0.6); }
.nx[data-theme="light"] .nx-bzh__disc--needs { color: #075A99; }
.nx-bzp a, .nx-bzh__row, .nx-bzl__person { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nx-bzh__disc--lg { width: 72px; height: 72px; font-size: 22px; }
.nx-bzh__text { display: grid; gap: 4px; min-width: 0; }
.nx-bzh__title { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-bzh__meta { font-size: 15px; line-height: 1.4; color: var(--nx-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-bzh__meta b { font-weight: 500; color: var(--nx-ink-2); }
.nx-bzh__meta b[data-state="needs_you"] { color: var(--nx-sky-text); }
.nx-bzh__meta b[data-state="ready"] { color: var(--nx-ok); }
.nx-bzh__go { color: var(--nx-ink-4); }
.nx-bzh__ghost { min-height: 76px; padding: 14px 12px; }
.nx-bzh__none { margin: 0; font-size: var(--nx-t-lead); color: var(--nx-ink-3); }
.nx .nx-bzh__empty h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--nx-ink); }
.nx-bzl .nx-lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.nx-bzl__people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.nx-bzl__person { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 112px; padding: 10px 4px; border: 0; border-radius: 16px; background: transparent; color: var(--nx-ink-2); font: 500 15px/1.3 var(--nx-font); text-align: center; cursor: pointer; transition: background var(--nx-d-state) var(--nx-ease); }
.nx-bzl__person span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nx-bzl__person:hover { background: var(--nx-flat); }
.nx-bzl__person:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
.nx-bzl__mono { position: absolute; right: 18px; top: 16px; font: 600 72px/1 var(--nx-font); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(138, 212, 255, 0.6); pointer-events: none; }
.nx-bzl__frame .nx-rec__plate { right: 18px; }
.nx-bzl__mark--ok i { background: #4ADE80; box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.6); }
.nx-bzl__mark--quiet i { background: #A3A3A3; box-shadow: none; }
@container nx (max-width: 640px) {
  .nx-bzh { gap: 22px; }
  .nx-bzh__head { gap: 18px; }
  .nx-bzh__bar .nx-bzp { flex: 1; width: auto; }
  .nx-bzp a { flex: 1; justify-content: center; min-height: 44px; padding: 0 10px; }
  .nx-bzh__new { width: 48px; min-height: 48px; padding: 0; }
  .nx-bzh__new > span:not(.nx-glow) { display: none; }
  .nx-bzc__head { flex-wrap: nowrap; align-items: center; }
  .nx-bzc__head .nx-bzp { flex: 1; }
  .nx-bzc__head [data-control="nx-bzc-new"] { width: 48px; min-height: 48px; padding: 0; flex: none; }
  .nx-bzc__head [data-control="nx-bzc-new"] > span:not(.nx-glow) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nx-bzh__row { padding: 12px 4px; gap: 14px; min-height: 72px; }
  .nx-bzh__title { font-size: 17px; }
  .nx-bzl .nx-lib__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nx-bzl__person { width: 92px; }
  .nx-bzl__people { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 12px; }
  .nx-bzl__people::-webkit-scrollbar { display: none; }
  .nx-bzl__people > li { flex: none; scroll-snap-align: start; }
  .nx-bzh__order { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nx-bzh__row { transition: none; } .nx-bzh__row:active { transform: none; } }
/* surface:bzlibrary:end */

/* ==========================================================================
   UX 10/10 surface: the landing and sign-in (D9). Atlas v5, owner approval 2026-09-25.
   Only the lane building this surface edits between these two markers, so
   parallel lanes never touch the same lines.
   ========================================================================== */
/* surface:public:begin */
/* The public face and sign-in. The landing is "the constructed line" (seat E; owner "yess" and "build and
   ship", 2026-09-30; docs/rulings/ui-design.md, docs/rulings/identity.md): ClipZyn's own material only
   (tokens.css Material v3: the #181818 ground, the frame's hairlines with "+" and the triangle markers,
   top-lit bars with a 1px rim, one blurred sky light, Hanken Grotesk and Geist Mono). The owner's line is
   assembled on load from words lifted out of a column of recordings (nxPubConstruct in public.jsx); two
   marks carry the argument, a yellow documentary highlighter on "finding" and a red pen loop on
   "constructing", the only two colours outside the tokens, each the owner's word for its one word. Every
   rule here also draws the built state, which is what reduced motion gets. The recordings are aria-hidden
   decoration at 12px mono, and the phone bar is 14px so it fits one line at 320 wide: the two exceptions
   to the 15px floor, both the owner's ruling of 2026-09-30 (verify_next_public.cjs names them). */
.nx.pb { overflow-x: hidden; font-size: 17px; background: var(--pb-ground); --pb-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --pb-ground: var(--nx-bg); --pb-lit: var(--nx-ink); --pb-sub: var(--nx-ink-3); --pb-hair: var(--nx-hair); --pb-wall: rgba(236, 226, 210, .072);
  --pb-mark: #F3DC52; --pb-mark-ink: #181818; --pb-red: #FF5A4E;
  --w1: "and I think the thing nobody tells you is that the first year is mostly silence. you post, nothing. you post again, nothing. right, right. and then one Tuesday a stranger quotes you back to yourself and you realise somebody was listening the whole time, which is terrifying, honestly, and";
  --w2: "so we stopped asking people what they wanted and started watching what they actually did, which is a very different list. that sounds brutal. it's honest. the list was shorter than I hoped and every single thing on it was something we had cut in the second week because it felt small";
  --w3: "my father ran a bakery for thirty-one years and he never called it a brand, he called it bread. I love that. people came back because it was good, not because he told them twice. he'd open at five and the line was already there, in the rain, for bread, just bread, and he never once";
  --w4: "you can feel it when a room stops breathing. that's the moment. everything before it is setup and everything after it is what they remember on the drive home. wait, say that again. the drive home. that's the whole job, isn't it, finding the thirty seconds they'll repeat to someone else";
  --w5: "the best idea we ever had came at two in the morning in a parking lot. no deck, no whiteboard, just the two of us and a bad coffee and the sentence that turned into the company. and the funny part is we almost didn't write it down, we almost went home, and I think about that more than";
  --w6: "hold on, go back. the part about failing? no, the part where you said you were relieved. everyone talks about the failure. nobody admits the relief. well, it was relief. I'd been pretending for two years that I wanted it and the day it ended I slept for eleven hours straight, like a kid"; }
.nx.pb[data-theme="light"] { --pb-wall: rgba(46, 36, 24, .085); }
.pb-page { position: relative; min-height: 100%; }
.pb-top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 48px; }
.pb .nx-wordmark, .pb .nx-top__brand { font-size: 20px; }
/* the brand keeps a 44px hit area both ways, the padding given back by the margin so the bar does not move */
.pb-brand { padding: 10px 13px; margin: -10px -13px; min-width: 44px; min-height: 44px; box-sizing: border-box; justify-content: center; }
.pb .nx-btn { font-size: 17px; font-weight: 500; }
.pb .pb-quiet { background: transparent; color: var(--pb-lit); box-shadow: inset 0 0 0 1px var(--pb-hair); }
.pb .pb-cta { min-height: 54px; padding: 0 24px 0 28px; font-size: 17px; gap: 12px; }
.pb .pb-block { width: 100%; justify-content: center; min-height: 52px; }
.pb-link { border: 0; background: none; padding: 0 2px; min-height: 44px; font: 500 17px var(--nx-font); color: var(--nx-sky-text); cursor: pointer; text-underline-offset: 4px; }
.pb-link:hover:not(:disabled) { text-decoration: underline; }
.pb-link:disabled { cursor: wait; opacity: .55; }
.pb-link--sm { font-size: 15px; }
.pb a, .pb button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(79, 184, 255, .18); }

/* the landing's frame: two hairlines at the content edges, a "+" where a rule crosses them, the triangle markers */
.pb-land { --fx: max(16px, calc(50% - 640px)); --in: calc(var(--fx) + 56px);
  background: linear-gradient(var(--nx-hair), var(--nx-hair)) var(--fx) 0 / 1px 100% no-repeat, linear-gradient(var(--nx-hair), var(--nx-hair)) right var(--fx) top 0 / 1px 100% no-repeat; }
.pb-land::before, .pb-land::after { content: ""; position: absolute; z-index: 5; top: 78px; left: calc(var(--fx) - 7px); border: 7px solid transparent; border-top: 8px solid var(--nx-tri); border-bottom: 0; }
.pb-land::after { left: auto; right: calc(var(--fx) - 7px); }
.pb-land > .pb-top { padding: 0 calc(var(--fx) + 24px); gap: 4px; border-bottom: 1px solid var(--nx-hair); }
.pb-land > .pb-top::before, .pb-land > .pb-top::after, .pb-rule::before, .pb-rule::after { content: "+"; position: absolute; bottom: -9px; left: calc(var(--fx) - 4px); color: var(--nx-marker); font: 300 16px/16px var(--nx-font); }
.pb-land > .pb-top::after, .pb-rule::after { left: auto; right: calc(var(--fx) - 5px); }
.pb-nav { display: flex; margin-right: 12px; }
.pb-nav a { color: var(--nx-nav); font-size: 15px; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.pb-nav a:hover { color: var(--nx-ink); }
.pb .pb-signin { font-size: 15px; }

/* the first screen: the copy owns it; the recordings stand behind, to the right, and bleed off the edge */
.pb-hero { position: relative; height: 100vh; height: 100svh; min-height: 700px; max-height: 1040px; padding: 73px 0 3vh; overflow: hidden; display: flex; align-items: center; }
.pb-light { position: absolute; right: -12%; top: -34%; width: 60%; height: 88%; pointer-events: none; opacity: calc(var(--nx-glow-opacity) * .3); background: radial-gradient(closest-side, var(--nx-glow-a), var(--nx-glow-b) 30%, var(--nx-glow-c) 58%, transparent); filter: blur(40px); }
.pb-wall { position: absolute; left: calc(var(--fx) + 960px); right: 0; top: calc(50% - 170px); height: 420px; overflow: hidden; font: 400 12px/34px var(--pb-mono); color: var(--nx-ink-4); transition: opacity 900ms var(--nx-ease);
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 82%, transparent); mask: linear-gradient(transparent, #000 12%, #000 82%, transparent); }
.pb-rec { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.pb-rec > b { flex: none; display: flex; gap: 8px; align-items: center; min-width: 17ch; font-weight: 400; }
.pb-rec > b::before { content: ""; border: 4px solid transparent; border-left: 6px solid var(--nx-tri); border-right: 0; }
.pb-rec--f > b { opacity: .55; }
.pb-w { display: inline-block; line-height: 11px; border-radius: 3px; color: transparent; background: linear-gradient(var(--nx-panel-2), var(--nx-flat)); box-shadow: inset 0 1px 0 var(--nx-hover-border); vertical-align: 1px; }
.pb-rec--f .pb-w { background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); box-shadow: inset 0 1px 0 var(--nx-rim-top); }
.pb-w--t { background: none; box-shadow: none; color: var(--nx-ink-3); line-height: 16px; padding: 0 2px; margin: 0 -2px; transition: color 200ms var(--nx-ease), text-shadow 200ms var(--nx-ease); }
.pb-w--t.on { color: var(--nx-sky-text); text-shadow: 0 0 8px var(--nx-glow-b), 0 0 20px var(--nx-glow-c); }
.pb-w--t.gone { color: transparent; text-shadow: none; background: var(--nx-sky-soft); box-shadow: inset 0 0 0 1px var(--nx-sky-rim); }
.is-built .pb-wall { opacity: .6; }

/* the copy: a picked word starts as a blank (a rule on the baseline); the rest of the line reads from the first frame */
.pb-copy { position: relative; z-index: 2; margin-left: var(--in); width: min(880px, calc(100% - var(--in) - 24px)); display: flex; flex-direction: column; align-items: flex-start; }
.pb .pb-h1 { margin: 0; font-size: clamp(40px, 5.4vw, 80px); font-weight: 500; line-height: 1.04; letter-spacing: -.038em; color: var(--nx-ink); }
.pb-l { display: block; text-wrap: balance; }
.pb-l2 { margin-top: .3em; line-height: 1.2; }
.pb-s { display: inline-block; line-height: .94; color: transparent; background: linear-gradient(var(--nx-ring), var(--nx-ring)) 0 92% / 100% 2px no-repeat; transition: color 300ms var(--nx-ease), background-size 300ms var(--nx-ease); }
.pb-s.in { color: var(--nx-ink); background-size: 0 2px; }
.pb-s.hit { animation: pb-hit 700ms var(--nx-ease-out); }
@keyframes pb-hit { from { text-shadow: 0 0 14px var(--nx-glow-b), 0 0 34px var(--nx-glow-c); } }
/* finding: a documentary highlighter laid behind the word, a little tilted, swiped on left to right */
.pb-find { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.pb-find::before { content: ""; position: absolute; z-index: -1; left: -.22em; right: -.2em; top: -.15em; bottom: -.27em; background: url("/vendor/art/landing-mark.svg") 0 0 / 100% 100% no-repeat; transform: rotate(-1.2deg); clip-path: inset(0 100% 0 0); transition: clip-path 460ms cubic-bezier(.5, .05, .3, 1); }
.pb-find.on::before { clip-path: inset(0 0 0 0); }
.pb-find.on .pb-s.in { color: var(--pb-mark-ink); transition: color 200ms var(--nx-ease) 140ms; }
/* constructing: a red pen loop drawn round the word, its tail overshooting the start; it clears every glyph by 3px or more */
.pb-circ { position: relative; display: inline-block; white-space: nowrap; margin: 0 .07em 0 .05em; line-height: .94; }
.pb-ring { position: absolute; left: -.17em; top: -.16em; width: calc(100% + .42em); height: calc(100% + .5em); overflow: visible; pointer-events: none; transform: rotate(-.7deg); }
.pb-ring path { fill: none; stroke: var(--pb-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 720ms cubic-bezier(.6, .05, .3, 1); }
.pb-circ.on .pb-ring path { stroke-dashoffset: 0; }
.pb .pb-sub { margin: 44px 0 0; max-width: none; font-size: clamp(20px, 1.8vw, 26px); font-weight: 450; line-height: 1.45; letter-spacing: -.01em; color: var(--nx-ink-2); }
.pb-sub .pb-s { line-height: 1.1; }
.pb-sub .pb-s.in { color: var(--nx-ink-2); }
.pb-sl { display: block; }
.pb-fly { position: fixed; z-index: 60; margin: 0; white-space: nowrap; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.pb-act { display: flex; align-items: center; gap: 24px; margin-top: 48px; flex-wrap: wrap; }
.pb .pb-beta { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--nx-ink-3); }
.pb-beta .ic { color: var(--nx-sky); --ic-a: var(--nx-sky); }
.pb-top .nx-wordmark.on { filter: drop-shadow(0 0 10px var(--nx-glow-b)); }

/* How it works and Pricing: sections of the same page, still reached by #how and #pricing; lines before cards */
.pb-sec { position: relative; padding: 96px 0 104px; }
.pb-rule { position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 1px solid var(--nx-hair); }
.pb-rule::before, .pb-rule::after { bottom: auto; top: -9px; }
.pb-col { padding: 0 var(--in); }
.pb-sec .pb-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; align-items: start; }
.pb .pb-h2 { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; color: var(--nx-ink); }
.pb-how { list-style: none; margin: 0; padding: 0; max-width: 1040px; }
.pb-how__row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--nx-line); }
.pb-how__row:first-child { padding-top: 6px; border-top: 0; }
.pb-how__row b { font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--nx-ink); }
.pb-how__row span { color: var(--nx-ink-3); font-size: 17px; line-height: 1.55; }
.pb-lead { font-size: 20px; line-height: 1.5; color: var(--pb-sub); margin: 14px 0 0; }
.pb-lead b { color: var(--pb-lit); font-weight: 600; }
.pb-land .pb-lead { margin: 0; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; letter-spacing: -.01em; color: var(--nx-ink-2); max-width: 30ch; }
.pb-plans { list-style: none; margin: 0; padding: 0; }
.pb-plans li { display: grid; grid-template-columns: 180px 220px 1fr; align-items: baseline; gap: 16px; padding: 22px 0; border-top: 1px solid var(--nx-line); font-size: 17px; }
.pb-plans b { font-size: 26px; font-weight: 500; color: var(--nx-ink); }
.pb-price { font-size: 20px; color: var(--nx-ink); }
.pb-plan-facts { color: var(--nx-ink-3); }
.pb-footer { position: relative; padding: 36px 0 44px; }
.pb-footer__in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pb-meta { font-size: 15px; color: var(--pb-sub); }
.pb-legal { display: flex; justify-content: center; gap: 4px; margin: -6px 0 0; }
.pb-footer__in .pb-legal { margin: 0; }
.pb-legal button { border: 0; background: none; padding: 0 10px; color: var(--pb-sub); font: 400 15px var(--nx-font); min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; text-underline-offset: 4px; }
.pb-legal button:hover { color: var(--pb-lit); text-decoration: underline; }

/* sign-in, the access-code step and the waitlist: one column on the same ground, a few dim rows of the
   example hour along the foot of the page, no entrance at all (time to content is the brand) */
.pb-top--auth { position: relative; }
.pb-authcol { position: relative; z-index: 2; width: min(420px, 100% - 32px); margin: 110px auto 240px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.pb-authcol form { display: flex; flex-direction: column; gap: 20px; }
.pb .pb-t { font: 500 48px/1.05 var(--nx-font); letter-spacing: -.035em; color: var(--pb-lit); margin: 0 0 8px; }
.pb-methods { display: flex; flex-direction: column; gap: 12px; }
.pb .pb-google { background: #FFFFFF; color: #1F1F1F; box-shadow: 0 0 0 1px #DADCE0; gap: 12px; }
.pb .pb-google:hover:not(:disabled) { background: #F2F6FA; color: #1F1F1F; outline-color: transparent; }
.pb .pb-google .nx-glow { display: none; }
.pb-g { flex: none; display: block; stroke: none; }
.pb-foot { font-size: 17px; color: var(--pb-sub); text-align: center; margin: 0; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-dot { color: var(--pb-sub); }
.pb-fld { display: flex; flex-direction: column; gap: 8px; }
.pb-fld__row { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.pb-label { font-size: 15px; font-weight: 500; color: var(--nx-ink-2); }
.pb .nx-field { min-height: 52px; border-radius: 12px; }
.pb .nx-field input { font-size: 17px; min-height: 50px; }
.pb-bigtile { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--nx-well); box-shadow: var(--nx-inset-soft), 0 0 0 1px var(--nx-rim-top); }
.pb-bigtile .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.pb-bigtile--ok .ic { color: var(--nx-ok); --ic-a: var(--nx-ok); }
.pb-msg { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--nx-well); box-shadow: inset 3px 0 0 var(--nx-bad), 0 0 0 1px var(--nx-rim-top); }
.pb-msg > .ic { margin-top: 12px; color: var(--nx-bad); --ic-a: var(--nx-bad); width: 20px; height: 20px; }
.pb-msg__t { flex: 1; display: flex; flex-direction: column; padding-top: 9px; color: var(--nx-ink); font-size: 17px; font-weight: 500; line-height: 1.35; }
.pb-msg__det { margin-top: 2px; }
.pb .pb-msg__det summary { color: var(--nx-ink-4); font-weight: 400; }
.pb .nx-details, .pb .nx-details summary, .pb .nx-details__body { font-size: 15px; }
.pb .nx-details summary { min-height: 44px; }
.pb .pb-msg__btn { flex: none; min-height: 44px; font-size: 15px; }
.pb-open { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 150px; }
.pb-sweep { position: relative; width: 180px; height: 2px; border-radius: 2px; background: var(--pb-hair); overflow: hidden; }
.pb-sweep::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--nx-sky), transparent); animation: pb-sweep-bar 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes pb-sweep-bar { from { left: -40%; } to { left: 100%; } }
.pb-page--auth { overflow: hidden; }
.pb-foot-strip { position: absolute; left: -24px; right: 0; bottom: 0; z-index: 0; font: 400 15px/30px var(--pb-mono); color: var(--pb-wall); -webkit-mask: linear-gradient(to top, #000000 30%, transparent); mask: linear-gradient(to top, #000000 30%, transparent); }
.pb-foot-strip > i { display: block; white-space: nowrap; font-style: normal; }
.pb-foot-strip > i::before { content: var(--w4); }
.pb-foot-strip > i:nth-child(2)::before { content: var(--w1); }
.pb-foot-strip > i:nth-child(3)::before { content: var(--w6); }
.pb-foot-strip > i:nth-child(4)::before { content: var(--w3); }
.pb-foot-strip > i:nth-child(2n) { text-indent: -300px; }
.pb-foot-strip > i:nth-child(n+5) { display: none; }

/* tablet: the copy leads from the top; the recordings stand behind the headline's right side, faint */
@container nx (max-width: 1100px) {
  .pb-hero { align-items: flex-start; height: auto; min-height: 0; max-height: none; padding: 150px 0 72px; }
  .pb-wall { left: auto; right: 0; width: min(520px, 62%); top: 110px; height: 330px; line-height: 30px; opacity: .5;
    -webkit-mask: linear-gradient(90deg, transparent, #000 45%), linear-gradient(transparent, #000 12%, #000 80%, transparent); -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 45%) intersect, linear-gradient(transparent, #000 12%, #000 80%, transparent); }
  .pb-rec--f { display: none; }
  .pb-rec > b { min-width: 0; }
  .is-built .pb-wall { opacity: .3; }
  .pb-light { width: 110%; right: -40%; }
}
/* the phone, composed for a portrait frame and a thumb: the recordings are a plane tilted back into the dark
   above the copy (in the flow, so it never slides under the headline), the copy stands on its near edge,
   and the one action sits at the bottom where the thumb already is; nothing sticks or floats */
@container nx (max-width: 760px) {
  .pb-land { --in: 20px; background: none; }
  .pb-land::before, .pb-land::after, .pb-land > .pb-top::before, .pb-land > .pb-top::after, .pb-rule::before, .pb-rule::after { display: none; }
  .pb-top { height: 60px; padding: 0 16px; }
  .pb-land > .pb-top { height: 64px; padding: 0 12px 0 20px; gap: 2px; }
  .pb-nav { margin-right: 2px; }
  .pb-nav a { padding: 0 6px; font-size: 14px; white-space: nowrap; }
  .pb .pb-signin { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .pb-land .nx-wordmark { font-size: 19px; }
  .pb-hero { min-height: 100svh; height: auto; max-height: none; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 72px 0 calc(22px + env(safe-area-inset-bottom)); }
  .pb-wall { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; flex: 1 1 0; min-height: 96px; max-height: 360px; margin: 0 -16% 14px;
    display: flex; flex-direction: column; justify-content: flex-end; line-height: 28px; opacity: 1; counter-reset: pb-rec;
    transform: perspective(900px) rotateX(26deg); transform-origin: 50% 100%;
    -webkit-mask: linear-gradient(transparent, #000 30%, #000 80%, transparent); mask: linear-gradient(transparent, #000 30%, #000 80%, transparent); }
  .pb-rec, .pb-rec--f { display: flex; flex: none; gap: 10px; padding-left: 18%; }
  .pb-rec::before { counter-increment: pb-rec; content: counter(pb-rec, decimal-leading-zero); flex: none; width: 2.4ch; color: var(--nx-ink-4); opacity: .6; }
  .pb-rec > b::before { display: none; }
  .pb-w--t.gone { box-shadow: none; }
  .is-built .pb-wall { opacity: .5; }
  .pb-light { width: 150%; height: 70%; right: -60%; top: -30%; opacity: calc(var(--nx-glow-opacity) * .42); }
  .pb-copy { width: auto; margin: 0 20px; }
  .pb .pb-h1 { font-size: 40px; line-height: 1.06; letter-spacing: -.035em; }
  .pb .pb-sub { font-size: 20px; margin-top: 24px; line-height: 1.45; }
  .pb-sl { display: inline; }
  .pb-act { align-self: stretch; margin-top: 30px; gap: 14px; flex-direction: column; align-items: stretch; }
  .pb-act .pb-cta { width: 100%; min-height: 56px; justify-content: center; }
  .pb .pb-beta { justify-content: center; }
  .pb-sec { padding: 72px 0 80px; }
  #how { padding-top: 104px; }
  .pb-sec .pb-col { grid-template-columns: 1fr; gap: 28px; }
  .pb-how__row { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .pb-plans li { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .pb-plan-facts { grid-column: 1 / -1; }
  .pb-footer__in { gap: 6px 18px; }
  .pb-footer .pb-brand { flex-basis: 100%; justify-content: flex-start; }
  .pb-footer .nx-top__spacer { display: none; }
  .pb-authcol { margin: 28px auto 160px; gap: 18px; }
  .pb .pb-t { font-size: 40px; }
  .pb-open { margin-top: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb .nx-glow i:nth-child(n) { animation: none; opacity: 0; }
  .pb-wall, .pb-s, .pb-w--t, .pb-find::before, .pb-find.on .pb-s.in, .pb-ring path { transition: none; }
  .pb-s.hit { animation: none; }
  .pb-sweep::after { animation: none; left: 30%; }
}
/* surface:public:end */

/* ==============================================================
   UX 10/10 surface: the edges and the one message pattern (D10). Atlas v5, owner approval 2026-09-25.
   ===================================================================== */
/* surface:edges:begin */
/* One message: a dot and what happened, one way out, our words behind a closed Details. */
.nx-say { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--nx-s2) var(--nx-s4); padding: var(--nx-s4) var(--nx-s5); border-radius: var(--nx-r-card); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); box-shadow: inset 0 1px 0 var(--nx-rim-top), 0 0 0 1px var(--nx-hair); }
.nx-say__words { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--nx-ink); font-size: 17px; font-weight: 600; line-height: 1.35; }
.nx-say__words::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-bad); }
.nx-say--ask .nx-say__words::before { background: var(--nx-sky); }
.nx-say__line { grid-column: 1; margin: 0; color: var(--nx-ink-3); font-size: 15px; }
.nx-say .nx-btn { grid-column: 2; grid-row: 1; min-height: var(--nx-target); }
.nx-say > details { grid-column: 1 / -1; }
details.nx-details, details.nx-details summary, details.nx-details .nx-details__body { font-size: 15px; }
details.nx-details summary { min-height: var(--nx-target); }
details.nx-details .nx-details__body { font-family: var(--nx-font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Details reads at AA on its well in both themes: the summary and the row names in ink-3 (ink-4 is 4.06:1 on the light well). */
.pb details.nx-details summary, details.nx-details .nx-details__body b { color: var(--nx-ink-3); }
/* The offline banner: one line under the top bar for the whole app, the wait dot, the page stays. */
.nx-offline { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px var(--nx-s6); border-bottom: 1px solid var(--nx-hair); background: var(--nx-warn-soft); color: var(--nx-ink); font-size: 15px; line-height: 1.4; }
.nx-offline::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-warn); }
/* The keyboard sheet: the keys the product binds today. */
.nx-keys { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--nx-s3) var(--nx-s5); align-items: center; font-size: 17px; color: var(--nx-ink-2); }
.nx-keys dt { margin: 0; }
.nx-keys dd { margin: 0; }
.nx-keys kbd { display: inline-flex; min-width: 32px; justify-content: center; padding: 4px 10px; border-radius: 8px; background: var(--nx-well); box-shadow: inset 0 -1px 0 var(--nx-hair), 0 0 0 1px var(--nx-hair); font: 600 15px/1.3 var(--nx-font); color: var(--nx-ink); }
@container nx (max-width: 640px) {
  .nx-say { grid-template-columns: 1fr; }
  .nx-say .nx-btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .nx-offline { padding: 10px var(--nx-s4); }
}
/* surface:edges:end */

/* ==========================================================================
   UX 10/10 system tones (owner ruling 2B, 2026-09-25; atlas_v5/system). A state is a lit dot
   and one plain word (NxState in components.jsx), the card that needs the member gets a lit
   top edge (.nx-lit, never a glow), danger is quiet until its confirm step (nx-btn--armed).
   ========================================================================== */
/* surface:system:begin */
.nx { --nx-tone-ok: var(--nx-ok); --nx-tone-wait: var(--nx-warn); --nx-tone-need: var(--nx-sky); --nx-tone-live: var(--nx-sky); --nx-tone-bad: var(--nx-bad); --nx-tone-gone: var(--nx-ink-4);
  --nx-armed-top: #4A1622; --nx-armed-bot: #360E17; --nx-armed-rim: rgba(251, 113, 133, 0.6); --nx-armed-ink: #FFE1E6; --nx-armed-hi: rgba(255, 190, 200, 0.14); }
.nx[data-theme="light"] { --nx-armed-top: #FFF3F5; --nx-armed-bot: #FFE6EA; --nx-armed-rim: rgba(190, 18, 60, 0.55); --nx-armed-ink: #9F1239; --nx-armed-hi: rgba(255, 255, 255, 0.9); }
.nx [data-tone] { --t: var(--nx-tone-gone); }
.nx [data-tone="ok"] { --t: var(--nx-tone-ok); } .nx [data-tone="wait"] { --t: var(--nx-tone-wait); } .nx [data-tone="need"] { --t: var(--nx-tone-need); }
.nx [data-tone="live"] { --t: var(--nx-tone-live); } .nx [data-tone="bad"] { --t: var(--nx-tone-bad); }
.nx-state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }
.nx-state__w { min-width: 0; }
.nx-tone { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
[data-tone="gone"] > .nx-tone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--t); }
[data-tone="live"] > .nx-tone::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--t); opacity: 0; animation: nx-tone-beat 2.4s cubic-bezier(0.19, 1, 0.22, 1) infinite; }
@keyframes nx-tone-beat { 0% { transform: scale(0.6); opacity: 0.8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.nx-tick { width: 16px; height: 16px; flex: none; color: var(--nx-tone-ok); stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.nx-tick path { stroke-dasharray: 20; animation: nx-tick-draw 240ms cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes nx-tick-draw { from { stroke-dashoffset: 20; } }
.nx-badge { --nx-tone-ok: #4ADE80; --nx-tone-wait: #FBBF24; --nx-tone-need: #4FB8FF; --nx-tone-live: #4FB8FF; --nx-tone-bad: #FB7185; --nx-tone-gone: #A3A3A3;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 11px; border-radius: 999px; background: rgba(10, 10, 10, 0.74); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  color: #fff; font: 600 15px/1 var(--nx-font); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.07); white-space: nowrap; }
/* the lit edge: the one container that needs the member; a 1.5px line on its top rim, no glow */
.nx-lit { position: relative; isolation: isolate; }
.nx-lit::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1.5px; z-index: 4; pointer-events: none; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--t) 16%, var(--t) 48%, color-mix(in srgb, var(--t) 30%, transparent) 78%, transparent); }
.nx-gate.nx-lit > .nx-gate__in { background: radial-gradient(70% 90px at 28% 0, color-mix(in srgb, var(--t) 9%, transparent), transparent 100%), linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); }
.nx-run.nx-lit { background: radial-gradient(70% 90px at 28% 0, color-mix(in srgb, var(--t) 9%, transparent), transparent 100%), var(--nx-well); }
/* danger is plain at rest; the confirm step is the only red surface */
.nx .nx-btn--danger { color: var(--nx-ink-2); }
.nx .nx-btn--danger:hover, .nx .nx-btn--danger.is-hover { outline-color: transparent; background: var(--nx-btn-hi); color: var(--nx-ink); }
.nx .nx-btn--armed { color: var(--nx-armed-ink); font-weight: 600; background: linear-gradient(var(--nx-armed-top), var(--nx-armed-bot)); box-shadow: inset 0 1px 0 var(--nx-armed-hi), inset 0 0 0 1px var(--nx-armed-rim); }
.nx .nx-btn--armed .ic { --ic-a: currentColor; color: currentColor; }
.nx .nx-btn--armed:hover, .nx .nx-btn--armed.is-hover { outline-color: transparent; box-shadow: inset 0 1px 0 var(--nx-armed-hi), inset 0 0 0 1px var(--nx-bad); }
.nx .nx-btn--armed:focus-visible { outline: 2px solid var(--nx-bad); outline-offset: 2px; }
/* where a state sits inside other surfaces' layouts (the places a chip used to sit) */
.nx-card__in > .nx-state, .nx-gate__in > .nx-state, .nx-stack > .nx-state { align-self: flex-start; }
.nx-turn > .nx-state, .nx-week__day > .nx-state { justify-self: start; }
.nx-week__day > .nx-state { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nx-run > .nx-state { grid-area: chip; justify-self: end; }
@media (max-width: 640px) { .nx-state { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { [data-tone="live"] > .nx-tone::after, .nx-tick path { animation: none; } }
/* surface:system:end */

/* ==========================================================================
   UX 10/10 surface: Start, one page (D5). Atlas v5, owner approval 2026-09-25
   (page 2, 1A). Only the lane building this surface edits between these two
   markers, so parallel lanes never touch the same lines.
   ========================================================================== */
/* surface:start:begin */
/* Start (D5): */
.nx-start1 { display: flex; flex-direction: column; gap: var(--nx-s6); font-size: 17px; color: var(--nx-ink-2); max-width: 1180px; }
.nx-start1.is-over .nx-recframe { outline: 2px solid var(--nx-sky-rim); outline-offset: 4px; }
.nx-start1__head { display: flex; flex-direction: column; gap: var(--nx-s1); min-width: 0; }
.nx .nx-start1__title { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--nx-ink); margin: 0; overflow-wrap: anywhere; }
.nx-start1__meta { font-size: 15px; letter-spacing: 0.01em; color: var(--nx-ink-4); margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.nx-start1__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--nx-s7); align-items: start; }
.nx-start1__left { display: flex; flex-direction: column; gap: var(--nx-s4); min-width: 0; }
.nx-start1__say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); font-size: 17px; color: var(--nx-ink-2); margin: 0; }
.nx-start1__say > span { color: var(--nx-ink-3); }
.nx-start1__say--bad > b { color: var(--nx-bad); font-weight: 500; }
.nx-start1__another { align-self: flex-start; background: transparent; color: var(--nx-ink-3); padding-left: 0; font-size: 17px; }
.nx-start1__another:hover { color: var(--nx-ink); background: transparent; }

/* The bay: one well lit from inside its rim, blueprint hairlines, four 16:9 corner guides. */
.nx-bay { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--nx-s5); aspect-ratio: 16 / 7.4; min-height: 420px; padding: var(--nx-s8) var(--nx-s6); border-radius: var(--nx-r-sheet); border: 1px solid var(--nx-rim-top); text-align: center;
  background: radial-gradient(70% 55% at 50% 0%, var(--nx-sky-soft), transparent 70%), linear-gradient(var(--nx-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--nx-line) 1px, transparent 1px) 0 0 / 32px 32px, var(--nx-well);
  box-shadow: var(--nx-inset-soft), var(--nx-shadow-2xl); transition: border-color 120ms cubic-bezier(.25,.46,.45,.94); }
.nx-bay.is-over { border-color: var(--nx-sky-rim); }
.nx-bay__icon { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; color: var(--nx-sky); background: var(--nx-disc); border: 1px solid var(--nx-rim-top); box-shadow: var(--nx-inset-hi), 0 0 24px var(--nx-sky-soft); }
.nx-bay__line { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--nx-ink); }
.nx-bay .nx-field-wrap, .nx-bay__link { width: min(560px, 100%); }
.nx-bay .nx-field { min-height: 56px; font-size: 17px; }
.nx-bay .nx-field input { font-size: 17px; }
.nx-bay .nx-field-msg { font-size: 15px; justify-content: center; }
.nx-bay > .nx-start1__meta { color: var(--nx-ink-3); }
.nx-bay .nx-folder { align-items: stretch; width: min(560px, 100%); text-align: left; }
.nx-start1 .nx-btn { font-size: 17px; }
.nx-start1 .nx-btn--sm { font-size: 15px; }

/* The recording's frame: its own picture, 16:9, the upload bar on its bottom edge. */
.nx-recframe { position: relative; aspect-ratio: 16 / 9; border-radius: var(--nx-r-sheet); overflow: hidden; background: var(--nx-well); border: 1px solid var(--nx-rim-top); box-shadow: var(--nx-shadow-2xl); }
.nx-recframe__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-recframe__type { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--nx-s7); }
.nx-recframe__type img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.nx-recframe__type span { position: relative; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--nx-ink); text-align: center; overflow-wrap: anywhere; }
.nx-recframe__len { position: absolute; right: var(--nx-s3); bottom: var(--nx-s4); padding: 3px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.72); color: #FFFFFF; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-upbar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.nx-upbar i { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, var(--nx-sky-line), var(--nx-sky)); transition: transform 240ms cubic-bezier(.19,1,.22,1); }
.nx-upbar--sheen { background: linear-gradient(90deg, var(--nx-sky-line) 0%, var(--nx-sky) 40%, var(--nx-sky-line) 80%); background-size: 200% 100%; animation: nx-upsheen 2.4s linear infinite; }
.nx-upbar--bad { background: var(--nx-bad); }
@keyframes nx-upsheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .nx-upbar--sheen { animation: none; background-position: 50% 0; } .nx-upbar i { transition: none; } }

/* The upload line under the frame: what is true, the measured facts, the one action. */
.nx-upline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--nx-s3) var(--nx-s4); }
@media (max-width: 640px) { .nx-upline--bad { grid-template-columns: minmax(0, 1fr); } }
.nx-upline__say { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nx-s1) var(--nx-s3); min-width: 0; }
.nx-upline__title { font-size: 17px; font-weight: 600; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-upline__facts { display: inline-flex; flex-wrap: wrap; gap: 0 var(--nx-s2); font-size: 15px; color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.nx-upline__facts span + span::before { content: "·"; margin-right: var(--nx-s2); color: var(--nx-ink-4); }
.nx-upline__note { flex-basis: 100%; font-size: 15px; color: var(--nx-ink-4); }
.nx-upline__acts { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-upline--bad .nx-upline__say { flex-direction: column; gap: 2px; }
.nx-upline--bad .nx-upline__title { color: var(--nx-bad); font-weight: 500; }
.nx-upline--bad .nx-upline__say > span { font-size: 15px; color: var(--nx-ink-3); }

/* The choices: one lit card, the count big, one format row, one closed More. */
.nx-choices { display: flex; flex-direction: column; gap: var(--nx-s4); padding: var(--nx-s6); border-radius: var(--nx-r-sheet); border: 1px solid var(--nx-rim-top); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); box-shadow: var(--nx-inset-btn), var(--nx-shadow-xl); min-width: 0; font-size: 17px; }
.nx-choices__label { font-size: 17px; font-weight: 500; color: var(--nx-ink-2); }
.nx-choices__group { display: flex; flex-direction: column; gap: var(--nx-s2); }
.nx-choices__pick { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-choices .nx-select { font-size: 17px; min-width: 150px; }
.nx-choices__note { font-size: 15px; color: var(--nx-ink-4); }
.nx-choices .nx-field input, .nx-choices .nx-field textarea { font-size: 17px; }
.nx-choices .nx-field__label { font-size: 15px; }
.nx-choices__go { display: flex; align-items: center; gap: var(--nx-s4); flex-wrap: wrap; padding-top: var(--nx-s4); border-top: 1px solid var(--nx-hair); }

/* First run: one example of what comes back. */
.nx-start1__example { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; color: var(--nx-ink-4); }
.nx-start1__ex-wide { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.nx-start1__ex-tall { width: 52px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; }

@container nx (max-width: 900px) {
  .nx-start1__grid { grid-template-columns: minmax(0, 1fr); gap: var(--nx-s5); }
}
@media (max-width: 640px) {
  .nx-start1 { gap: var(--nx-s5); padding-bottom: 140px; }
  .nx .nx-start1__title { font-size: 36px; }
  .nx-bay { aspect-ratio: auto; min-height: 0; padding: var(--nx-s7) var(--nx-s4); }
  .nx-bay [data-control="nx-well"] { width: 100%; }
  .nx-recframe { margin: 0 calc(-1 * var(--nx-s4)); border-left: 0; border-right: 0; border-radius: 0; }
  .nx-choices { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .nx-start1__example { display: none; }
}
/* surface:start:end */

/* ==========================================================================
   UX 10/10 surface: the clip room (build-order item 3, owner ruling 3A 2026-09-25).
   Only the lane building this surface edits between these two markers.
   ========================================================================== */
/* surface:cliproom:begin */
/* One room: */
/* Between the phone and the wide desk both columns give way together: the player scales down, the title, Download and the conversation stay. */
@container nx (min-width: 641px) {
  .nx .nxr-stage, .nx .nxr-stage--one, .nx .nxr-stage--wide, .nx .nxr-stage--wide.nxr-stage--one { grid-template-columns: minmax(0, 480px) minmax(0, 640px); grid-template-rows: auto auto 1fr; gap: 18px clamp(24px, 4cqi, 48px); justify-content: start; }
  .nx .nxr-stage > .nxr-screen, .nx .nxr-stage > .nxr-skel-screen, .nx .nxr-stage--wide > .nxr-screen { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 12 / 17; }
  .nx .nxr-stage > .nxr-screen--wide { aspect-ratio: auto; }
  /* the shelves run to the window's edge, never past it */
  .nx .nxr-shelf__row { --nxr-bleed: min(72px, var(--nx-s7) + max(0px, (100cqi - 1360px) / 2)); margin-right: calc(-1 * var(--nxr-bleed)); padding-right: var(--nxr-bleed); }
  .nx .nxr-stage > .nxr-rail, .nx .nxr-stage--wide > .nxr-rail { grid-column: 1; grid-row: 2; }
  .nx .nxr-stage > .nxr-fx, .nx .nxr-stage--wide > .nxr-fx { display: flex; grid-column: 2; grid-row: 1 / span 3; align-items: stretch; padding-top: 6px; }
  .nx .nxr-t1 { font-size: 36px; line-height: 1.1; }
}
/* the frame's corner marks sit inside it when the frame meets the window's edge */
.nx-frame::before { left: calc(-1 * min(8px, (100cqi - 100%) / 2)); } .nx-frame::after { right: calc(-1 * min(8px, (100cqi - 100%) / 2)); }
/* the filmstrip runs under the player at both widths; its frames crop into the strip's own edge (Rauno). Each row holds its
   hidden hook (position: relative), so a long strip never widens the room past the window. */
.nx .nxr-stage .nxr-rail__strip { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 4px 48px 6px 4px; margin: 0 -4px; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
.nx .nxr-stage .nxr-rl { position: relative; grid-template-columns: 64px; width: 64px; flex: none; padding: 0; gap: 0; border: 0; }
.nx .nxr-stage .nxr-rl:hover, .nx .nxr-stage .nxr-rl[aria-current="true"] { background: transparent; box-shadow: none; border-color: transparent; }
.nx .nxr-stage .nxr-poster { width: 64px; }
.nx .nxr-stage .nxr-poster .nxr-dur { display: none; }
.nx .nxr-stage .nxr-rl__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx .nx-room { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--nx-hair); }
.nx .nx-room .nx-btn { min-height: var(--nx-target); }
.nx .nx-room .nx-details { font-size: var(--nx-t-body); color: var(--nx-ink-3); }
.nx .nx-room__turns { gap: 18px; }
.nx .nx-room .nx-turn { background: transparent; box-shadow: none; padding: 0; gap: 10px; }
.nx .nx-room .nx-turn__ask { justify-self: end; max-width: 85%; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: linear-gradient(to right top, var(--nx-tint), var(--nx-tint-2)); color: #FFFFFF; font-size: var(--nx-t-lead); line-height: 1.45; overflow-wrap: anywhere; }
.nx .nx-room .nx-turn__answer { font-size: var(--nx-t-lead); color: var(--nx-ink-2); }
.nx .nx-room__starts { display: flex; flex-direction: column; gap: 8px; }
.nx .nx-room__starts .nx-btn { justify-content: flex-start; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--nx-hair); background: transparent; color: var(--nx-ink-2); }
.nx .nx-room__starts .nx-btn:hover { border-color: var(--nx-hover-border); color: var(--nx-ink); }
.nx .nx-room__composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 26px; border: 1px solid var(--nx-hair); background: var(--nx-well); box-shadow: var(--nx-inset-hi); transition: border-color var(--nxr-colour); }
.nx .nx-room__composer:focus-within { border-color: var(--nx-sky-line); }
.nx .nx-room__field { flex: 1; min-width: 0; min-height: var(--nx-target); max-height: 160px; resize: none; border: 0; background: transparent; color: var(--nx-ink); font: 400 var(--nx-t-lead)/1.45 var(--nx-font); padding: 10px 0; outline: none; field-sizing: content; }
.nx .nx-room__field::placeholder { color: var(--nx-ink-3); }
.nx .nx-room__composer .nx-btn { width: var(--nx-target); min-width: var(--nx-target); height: var(--nx-target); padding: 0; border-radius: 50%; flex: none; }
/* the change card: what changes, the old words struck, the new ones, Apply and Undo */
.nx .nx-change { display: grid; gap: 8px; justify-self: start; min-width: min(100%, 320px); max-width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--nx-rim-top); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); box-shadow: var(--nx-shadow-xl); }
.nx .nx-change__kind { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nx-t-body); color: var(--nx-ink-3); }
.nx .nx-change__kind .ic { width: 18px; height: 18px; }
.nx .nx-change__old { font-size: var(--nx-t-body); color: var(--nx-ink-3); overflow-wrap: anywhere; }
.nx .nx-change__new { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--nx-ink); overflow-wrap: anywhere; }
.nx .nx-change[data-state="undone"] .nx-change__new { color: var(--nx-ink-3); text-decoration: line-through; }
.nx .nx-change .nx-state { justify-self: start; font-size: var(--nx-t-body); }
/* the phone: the clip on top, the conversation below it, the composer pinned to the foot */
@container nx (max-width: 640px) {
  /* the strip stays under the player. */
  .nx .nxr-stage > .nxr-rail { order: 1; }
  .nx .nxr-stage > .nxr-fx { order: 2; }
  .nx .nx-room__composer { position: sticky; bottom: 8px; z-index: 6; box-shadow: var(--nx-shadow-2xl); }
  .nx .nx-change { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .nx .nx-room__composer { transition: none; }
}
/* surface:cliproom:end */

/* The Bernayser chat steered by the server (web/next/bzchat.jsx, seat C 2026-09-26): replies as
   plain words, the member's turns as pills, the newest card lit and the older ones one-line
   receipts, the server's chips big enough to tap, nothing under 14 px. */
.nx-bzx { max-width: 760px; }
.nx-bzx .nx-turn--me { max-width: min(75%, 560px); padding: 10px 18px; border-radius: 22px; background: var(--nx-flat); border: 1px solid var(--nx-rim-top); color: var(--nx-ink); font-size: 16px; line-height: 1.5; white-space: pre-line; }
.nx-bzx-say { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nx-ink); overflow-wrap: anywhere; white-space: pre-line; }
.nx-bzx .nx-bzx-say { color: var(--nx-ink); max-width: none; }
.nx-bzx-say--hello { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: var(--nx-track-title); text-align: center; }
.nx-bzx .nx-bzc__thread > .nx-turn--them { grid-template-columns: minmax(0, 1fr); }
.nx-bzx .nx-bzc__thread > .nx-turn--them > * { min-width: 0; }
@keyframes nx-bzx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nx-bzx-word { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-bzx-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
.nx-bzx .nx-turn--me[data-kind="sending"] { animation: nx-bzx-rise 180ms var(--nx-ease) both; }
.nx-bzx-say--fresh .nx-bzx-word { animation: nx-bzx-word 200ms var(--nx-ease) both; animation-delay: calc(var(--i, 0) * 10ms); }
.nx-bzx-say--fresh ~ * { animation: nx-bzx-word 160ms var(--nx-ease) 120ms both; }
.nx-bzx-thinking { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--nx-ink-3); }
.nx-bzx-thinking__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-ink); animation: nx-bzx-pulse 1.2s ease-in-out infinite; }
.nx-bzx-thinking--live { color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }
.nx-bzx-thinking__words { min-width: 0; overflow-wrap: anywhere; }
.nx-bzx .nx-turn--me[data-kind="queued"] { opacity: 0.72; display: grid; gap: 4px; }
.nx-bzx-queued { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--nx-ink-3); }
.nx-bzx-queued__edit { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--nx-r-pill); background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.nx-bzx-queued__edit:focus-visible { outline: 2px solid var(--nx-sky-line, currentColor); outline-offset: 2px; }
.nx-bzx-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  .nx-bzx .nx-turn--me[data-kind="sending"], .nx-bzx-say--fresh .nx-bzx-word, .nx-bzx-say--fresh ~ *, .nx-bzx-thinking__dot, .nx-bzc__send[data-busy] .ic { animation: none; }
}
.nx-bzx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-bzx-chips > .nx-btn { min-height: 48px; padding-left: 18px; padding-right: 18px; font-size: 16px; white-space: normal; text-align: left; }
.nx-bzx-receipt { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--nx-ink-3); overflow-wrap: anywhere; }
.nx-bzx-receipt .ic { flex: none; color: var(--nx-ok); }
.nx-bzx-pic { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--nx-well); color: var(--nx-ink-3); font-size: 24px; font-weight: 600; box-shadow: 0 0 0 1px var(--nx-rim-top); }
.nx-bzx-pic img { width: 100%; height: 100%; object-fit: cover; }
/* The pressed button stays at full strength with its spinner while the answer is on its way; the others wait. */
.nx-bzx .nx-btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.nx-bzx .nx-bzx-row[aria-busy="true"] { opacity: 1; cursor: progress; border-color: var(--nx-sky-rim); }
.nx-bzx .nx-btn--quiet .nx-btn__spin, .nx-bzx .nx-bzx-row .nx-btn__spin { flex: none; border-color: var(--nx-line); border-top-color: var(--nx-sky); }
/* "New reply": a pill over the composer while the member reads older turns. */
.nx-bzx .nx-bzc__composer > .nx-bzx-jump { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); box-shadow: var(--nx-shadow-2xl); white-space: nowrap; }
.nx-bzx .nx-bz-fine--quiet > summary, .nx-bzx .nx-details { font-size: 14px; }
@container nx (max-width: 640px) {
  .nx-bzx-say { font-size: 16px; }
  .nx-bzx-say--hello { font-size: 24px; }
  .nx-bzx .nx-turn--me { max-width: 85%; }
  .nx-bzx-chips > .nx-btn { flex: 1 1 auto; }
}
/* FC2: the person leads. The live card carries the edge light; receipts stay matte. */
.nx-bzx-card { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--nx-r-card); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); border: 1px solid var(--nx-rim-top); }
.nx-bzx-card--list { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.nx-bzx-card--list .nx-bzx-row { min-height: 64px; padding: 12px 4px; border: 0; border-radius: 0; background: none; }
.nx-bzx-card--list > .nx-bzx-row + .nx-bzx-row, .nx-bzx-pick + .nx-bzx-pick { border-top: 1px solid var(--nx-rim-top); }
.nx-bzx-card--list .nx-bzx-row:hover:not(:disabled) { background: var(--nx-flat); }
.nx-bzx-other { display: flex; flex-direction: column; gap: 8px; padding: 12px 4px 4px; border-top: 1px solid var(--nx-rim-top); }
.nx-bzx-other .nx-bzc__input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-flat); }
.nx-bzx-other .nx-btn { align-self: flex-start; }
.nx-bzx-card--list .nx-bzx-chips { padding-top: 8px; }
.nx-bzx-card--list .nx-bzx-chips > .nx-btn { min-height: 44px; padding-left: 4px; background: none; border: 0; box-shadow: none; color: var(--nx-ink-2); justify-content: flex-start; text-decoration: underline; }
.nx-bzx-card--quiet { background: var(--nx-flat); }
.nx-bzx-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nx-bzx-who__text { display: grid; gap: 4px; min-width: 0; font-size: 16px; color: var(--nx-ink-3); overflow-wrap: anywhere; }
.nx-bzx-who__text > .nx-chip, .nx-bzx .nx-chip { justify-self: start; font-size: 14px; }
.nx-bzx-name { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--nx-ink); }
.nx-bzx-name--row { font-size: 20px; }
.nx-bzx-line { margin: 0; display: block; font-size: 15px; color: var(--nx-ink-3); overflow-wrap: anywhere; }
.nx-bzx-card .nx-details__body { display: grid; gap: 4px; }
.nx-bzx-row { display: flex; align-items: center; gap: 14px; min-width: 0; width: 100%; min-height: 72px; padding: 12px; border-radius: 14px; border: 1px solid var(--nx-rim-top); background: var(--nx-flat); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--nx-d-state) var(--nx-ease), transform var(--nx-d-state) var(--nx-ease); }
.nx-bzx-link { display: table; margin: -6px 4px 10px; font-size: 15px; }
.nx-bzx-row .nx-bzx-pic { width: 56px; height: 56px; font-size: 18px; }
.nx-bzx-row > .nx-bzx-who__text { flex: 1; }
.nx-bzx-row > .ic { flex: none; color: var(--nx-ink-4); }
.nx-bzx-row:hover:not(:disabled) { border-color: var(--nx-sky-rim); }
.nx-bzx-row:active:not(:disabled) { transform: scale(0.99); }
.nx-bzx-row:disabled { cursor: default; opacity: 0.7; }
@container nx (max-width: 640px) {
  .nx-bzx-card { padding: 14px; }
  .nx-bzx-pic { width: 64px; height: 64px; }
}
/* FC3: the wall. Posters are the texture; the one wide card breaks out to 1040 px on a laptop. */
.nx-bzx-wall__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nx-bzx-count { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-bzx-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nx-bzx-tile { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 0 0 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nx-bzx-tile:disabled { cursor: default; }
.nx-bzx-poster { position: relative; display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--nx-rim-top); transition: box-shadow var(--nx-d-state) var(--nx-ease), transform var(--nx-d-state) var(--nx-ease); }
.nx-bzx-tile[aria-checked="true"] .nx-bzx-poster { box-shadow: 0 0 0 3px var(--nx-sky); }
.nx-bzx-tile:active:not(:disabled) .nx-bzx-poster { transform: scale(0.98); }
.nx-bzx-pic--poster { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; font-size: 14px; font-weight: 500; }
.nx-bzx-poster > .nx-chip { position: absolute; left: 8px; top: 8px; background: var(--nx-bar); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nx-bzx-poster > .nx-badge { position: absolute; left: 8px; top: 8px; }
.nx-bzx-tick { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nx-sky); color: var(--nx-sky-ink); }
.nx-bzx-live { display: grid; gap: 12px; margin-top: 4px; }
.nx-bzx-live .nx-bzx-tile { cursor: default; }
.nx-bzx-tile__title { font-size: 16px; line-height: 1.3; color: var(--nx-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nx-bzx-go .nx-btn { min-height: 52px; font-size: 17px; justify-content: center; }
@container nx (min-width: 1100px) { .nx-bzx-card--wide { margin: 0 -140px; } }
@container nx (max-width: 640px) {
  .nx-bzx-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nx-bzx-tile__title { font-size: 15px; }
}
/* The wall's primary takes its own space after the last video, on a phone as on a laptop: a
   sticky bar floated over the videos and covered a card's title (production 2026-10-08, 390 wide).
   In the flow, the composer never covers it either (BZ-16). */
/* FC4: the order in one sentence; the intent strip over the composer. */
.nx-bzx .nx-bzx-order { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--nx-ink); overflow-wrap: anywhere; }
.nx-bzx-card .nx-btn--block { min-height: 52px; font-size: 17px; justify-content: center; }
.nx-bzx-intent { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 4px; }
.nx-bzx-token { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; max-width: 100%; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--nx-sky-soft); border: 1px solid var(--nx-chip-border); color: var(--nx-ink); font-size: 14px; overflow-wrap: anywhere; }
.nx-bzx-token:not(:has(button)) { padding-right: 12px; }
.nx-bzx-token > button { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--nx-ink-3); cursor: pointer; }
.nx-bzx-token > button:hover { background: var(--nx-btn-hi); color: var(--nx-ink); }
/* FC5: progress in one line and a thin bar; clips as 16:9 players, two across on a laptop. */
.nx-bzx-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nx-bzx-clip { display: grid; gap: 6px; min-width: 0; }
.nx-bzx-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; display: block; }
@container nx (max-width: 640px) { .nx-bzx-clips { grid-template-columns: minmax(0, 1fr); } }
/* surface:account:begin */
.nx-acct{display:flex;flex-direction:column;gap:48px;font-size:17px;overflow-wrap:anywhere}
.nx-acct .nx-btn,.nx-acct select,.nx-acct input{font:500 17px var(--nx-font)}
.nx-acct .nx-details,.nx-acct .nx-details *,.nx-acct .nx-chip{font-size:15px}
.nx-acct b{color:var(--nx-ink)}
.nx-acct p{margin:0}
.nx-acct__head,.nx-acct__top,.nx-acct__row,.nx-acct__dev,.nx-acct__acts{display:flex;flex-wrap:wrap;font:inherit;align-items:center;justify-content:space-between;gap:16px}
.nx-acct__head{align-items:flex-start}
.nx .nx-acct__left{font:600 56px/1 var(--nx-font)}
.nx-acct__head>div{flex:1;min-width:0}
.nx-acct__who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px;color:var(--nx-ink-3)}
.nx-acct__top{align-items:flex-start}
.nx-acct__plan{text-align:right;color:var(--nx-ink-3)}
.nx-acct__strip .nx-rec__thumb{border-radius:8px}
.nx-acct__strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.nx-acct__strip--run{grid-auto-columns:minmax(120px,1fr);overflow:hidden}
.nx-acct__well{display:grid;place-items:center;border:1px dashed var(--nx-ring);color:var(--nx-ink-2)}
.nx[data-theme="light"] .nx-acct__well{background:var(--nx-well)}
.nx-acct__value{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--nx-ink-3)}
.nx-acct__take{background:radial-gradient(55% 60% at var(--nx-take-x,50%) 50%,var(--nx-tint),transparent 75%),repeating-linear-gradient(0deg,var(--nx-line) 0 1px,transparent 1px 7px) var(--nx-well);box-shadow:inset 0 0 0 1px var(--nx-hair);color:var(--nx-marker)}
.nx-acct__take>i{position:absolute;inset:6px;opacity:.55;background:linear-gradient(var(--nx-marker),var(--nx-marker)) 0 0/8px 1px no-repeat,linear-gradient(var(--nx-marker),var(--nx-marker)) 0 0/1px 8px no-repeat,linear-gradient(var(--nx-marker),var(--nx-marker)) 100% 100%/8px 1px no-repeat,linear-gradient(var(--nx-marker),var(--nx-marker)) 100% 100%/1px 8px no-repeat}
.nx-acct__wave{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.nx-acct__g1{stop-color:var(--nx-glow-a)}
.nx-acct__g2{stop-color:var(--nx-glow-b)}
.nx-acct__g3{stop-color:var(--nx-glow-c)}
.nx-acct__rule{stroke:currentColor;stroke-width:1;opacity:.5}
.nx[data-theme="light"] .nx-acct__take{background:radial-gradient(55% 60% at var(--nx-take-x,50%) 50%,var(--nx-sky-line),transparent 75%),repeating-linear-gradient(0deg,var(--nx-ink-2) 0 1px,transparent 1px 7px) var(--nx-ink);color:var(--nx-ink-4)}
@media (prefers-reduced-motion:no-preference){
.nx-acct__take rect,.nx-acct__take .nx-acct__nest{transform-box:fill-box;transform-origin:50% 50%;animation:nx-acct-rise var(--nx-d-handoff) var(--nx-ease-out) both;animation-delay:calc(var(--nx-take-i,0) * 90ms)}
.nx-acct__take .nx-acct__grow{transform-origin:0 50%;animation-name:nx-acct-grow}
.nx-acct__draw{stroke-dasharray:1;animation:nx-acct-draw 900ms var(--nx-ease-out) both;animation-delay:calc(var(--nx-take-i,0) * 90ms)}}
@keyframes nx-acct-rise{from{transform:scaleY(.08);opacity:0}}
@keyframes nx-acct-grow{from{transform:scaleX(0)}}
@keyframes nx-acct-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.nx-acct__fact{color:var(--nx-ink-3);font-size:15px}
.nx-acct__acts{padding-top:16px;border-top:1px solid var(--nx-hair)}
.nx-acct__doors{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-left:auto}
.nx-acct__doors:has(.nx-acct__confirm){flex-basis:100%}
.nx-acct__link{min-height:44px;min-width:44px;padding:0 2px;border:0;background:none;color:var(--nx-ink-3);font:500 15px var(--nx-font);text-decoration:underline;text-decoration-color:var(--nx-ring);text-underline-offset:5px;cursor:pointer;transition:color var(--nx-d-state) var(--nx-ease)}
.nx-acct__link:hover{color:var(--nx-ink)}
.nx-acct__link:focus-visible{outline:2px solid var(--nx-sky);outline-offset:2px;border-radius:4px}
.nx-acct__confirm{flex:1 1 100%;display:flex;flex-direction:column;gap:12px;padding:16px 20px;border-radius:var(--nx-r-field);background:var(--nx-bad-soft);box-shadow:inset 0 0 0 1px var(--nx-bad-rim)}
.nx-acct__confirm p{color:var(--nx-ink)}
.nx-acct__line{flex-basis:100%;font-size:15px;color:var(--nx-ink-3)}
.nx-acct__line.nx-copy--bad,.nx-acct__line .nx-copy--bad{color:var(--nx-bad)}
.nx .nx-acct .nx-btn--danger,.nx .nx-acct .nx-btn--danger:hover{background:var(--nx-bad);color:var(--nx-flat);font-weight:600}
.nx-acct__code{gap:12px}
.nx-acct__code .nx-field{flex:1 1 200px}
.nx-acct__sec{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px 32px}
.nx-acct__sec>h2{position:sticky;top:24px;align-self:start;margin:14px 0 0}
.nx-acct__card .nx-card__in{padding:8px 28px;gap:0}
.nx-acct__row,.nx-acct__dev{min-height:72px;padding:14px 0;border:0;border-top:1px solid var(--nx-hair);background:none;box-sizing:border-box}
.nx-acct__row:first-child,.nx-acct__me+.nx-acct__row{border-top-color:var(--nx-line)}
.nx-acct__row:first-child{border:0}
.nx-acct__label{flex:1;color:var(--nx-ink);overflow-wrap:normal}
.nx-acct__label small{display:block;margin-top:2px;color:var(--nx-ink-3);font:400 15px var(--nx-font)}
.nx-acct__hint{color:var(--nx-ink-3);font-size:15px}
.nx-acct__row>.nx-gate{flex-basis:100%}
.nx-acct select,.nx-acct__row input,.nx-acct__form input{min-height:44px;padding:0 14px;border:0;border-radius:var(--nx-r-btn);background:var(--nx-btn);color:var(--nx-ink);max-width:100%;min-width:0;box-sizing:border-box}
.nx-acct select{-webkit-appearance:none;appearance:none;padding-right:40px;background:linear-gradient(45deg,transparent 50%,var(--nx-ink-3) 50%) calc(100% - 20px) 50%/6px 6px no-repeat,linear-gradient(135deg,var(--nx-ink-3) 50%,transparent 50%) calc(100% - 14px) 50%/6px 6px no-repeat,var(--nx-btn)}
.nx-acct__form{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 360px}
.nx-acct__form input{flex:1 1 180px;box-shadow:inset 0 0 0 1px var(--nx-hair)}
.nx-acct__me{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:22px 0 20px}
.nx-acct__me>div:nth-child(2){flex:1}
.nx-acct__card{box-shadow:none}
.nx-acct__adjust{display:flex;flex-direction:column;gap:16px}
.nx-acct__adjust>.nx-acct__link{align-self:flex-start}
.nx-acct__brand>.nx-acct__adjust{grid-column:2}
.nx-acct__me>div{display:flex;flex-direction:column;min-width:0}
.nx-acct__me b{font:600 20px/1.3 var(--nx-font)}
.nx-acct__me span{color:var(--nx-ink-3);font-size:15px}
.nx-acct__face{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--nx-disc);box-shadow:inset 0 0 0 2px var(--nx-ring);color:var(--nx-ink-2);font:600 20px var(--nx-font)}
.nx-acct__del[aria-label^="Confirm"]{color:var(--nx-ink)}
.nx-acct__brand{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;padding:22px 0}
.nx-acct__brand:has(.nx-acct__frame--wide){grid-template-columns:320px minmax(0,1fr)}
.nx-acct__frame{position:relative;align-self:start;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--nx-well);box-shadow:var(--nx-inset-hi),0 0 0 1px var(--nx-hair)}
.nx-acct__frame--wide{aspect-ratio:16/9;background-size:100% 25%}
.nx-acct__frame>img{position:absolute;object-fit:contain;filter:drop-shadow(0 1px 2px var(--nx-scrim))}
.nx-acct__back{position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 38%,var(--nx-tint-2),transparent 70%)}
.nx[data-theme="light"] .nx-acct__frame{background:var(--nx-ink)}
.nx[data-theme="light"] .nx-acct__back{background:radial-gradient(70% 45% at 50% 38%,var(--nx-sky-line),transparent 70%)}
.nx-acct__back .nx-acct__wave{opacity:.45}
.nx-acct .nx-acct__cap{position:absolute;left:8%;right:8%;top:54%;text-align:center;font:800 15px/1.15 var(--nx-font);color:var(--nx-glow-a);text-shadow:0 1px 2px var(--nx-scrim);overflow-wrap:normal}
.nx-acct .nx-acct__frame--wide .nx-acct__cap{top:70%}
.nx-acct .nx-acct__cap--yellow{color:yellow}
.nx-acct .nx-acct__cap--red{color:red}
.nx-acct .nx-acct__cap--green{color:lime}
.nx-acct__logo-big{display:grid;place-items:center;height:80px;max-width:420px;border-radius:var(--nx-r-field);background:var(--nx-well);box-shadow:inset 0 0 0 1px var(--nx-hair)}
.nx[data-theme="light"] .nx-acct__logo-big{background:var(--nx-ink)}
.nx-acct__logo-big img{max-width:80%;max-height:56px;object-fit:contain}

.nx-acct__frame span{position:absolute;inset:0;display:grid;place-items:center;color:var(--nx-ink-4);font-size:15px}
.nx-acct__brand-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.nx-acct__brand-side>.nx-acct__row{border-top:1px solid var(--nx-hair)}
.nx-acct__brand-side label.nx-btn{position:relative}
.nx-acct__brand-side label.nx-btn:focus-within{outline:2px solid var(--nx-sky);outline-offset:2px}
.nx-acct__file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.nx-acct__seg{display:inline-flex;flex-wrap:wrap;align-self:flex-start;gap:4px;padding:4px;border-radius:var(--nx-r-btn);background:var(--nx-well)}
.nx-acct__seg button{min-height:44px;padding:0 16px;border:0;border-radius:8px;background:none;color:var(--nx-ink-3);font:500 15px var(--nx-font);cursor:pointer;transition:background-color var(--nx-d-state) var(--nx-ease),color var(--nx-d-state) var(--nx-ease)}
.nx-acct__seg button[aria-checked="true"]{background:var(--nx-panel-2);color:var(--nx-ink);box-shadow:var(--nx-inset-btn)}
.nx-acct__seg button:focus-visible{outline:2px solid var(--nx-sky);outline-offset:1px}
.nx-acct__range{display:flex;flex-direction:column;gap:4px;max-width:420px}
.nx-acct__range span{display:flex;justify-content:space-between;color:var(--nx-ink-3);font-size:15px}
.nx-acct__range input{min-height:44px;accent-color:var(--nx-sky)}
.nx-acct__foot{display:flex;flex-wrap:wrap;gap:0 24px;padding-top:20px;border-top:1px solid var(--nx-hair)}
.nx-acct--phone{gap:36px}
.nx-acct--phone .nx-acct__plan{text-align:left}
.nx-acct--phone .nx-acct__strip{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nx-acct--phone .nx-acct__doors{margin-left:0}
.nx-acct--phone .nx-acct__card .nx-card__in{padding:4px 20px}
.nx-acct--phone .nx-acct__brand{grid-template-columns:120px minmax(0,1fr);gap:16px}
.nx-acct--phone .nx-acct__brand:has(.nx-acct__frame--wide){grid-template-columns:1fr}
.nx-acct--phone .nx-acct__brand>.nx-acct__adjust{grid-column:1/-1}
.nx-acct--phone .nx-acct__brand-side .nx-actions{flex-direction:column;align-items:stretch}
.nx-acct--phone .nx-acct__row--act>.nx-acct__label{display:none}
.nx-acct--phone .nx-acct__row--act>.nx-btn{width:100%;justify-content:flex-start}
.nx-acct--phone .nx-acct__row--act{min-height:0;padding:10px 0}
.nx-acct--phone .nx-acct__me .nx-actions{flex-basis:100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
.nx-acct--phone .nx-acct__brand:has(.nx-acct__frame--wide){grid-template-columns:1fr}
.nx-acct--phone .nx-acct__brand>.nx-acct__adjust{grid-column:1/-1}
.nx-acct--phone .nx-acct__adjust{grid-column:1/-1}
.nx-acct--phone .nx-acct__form{flex-basis:100%;justify-content:flex-start}
.nx-acct--phone .nx-acct__row:has(select,input,.nx-colours,.nx-acct__form,.nx-acct__value),.nx-acct--phone [data-testid="nx-security"] .nx-acct__row{flex-direction:column;align-items:flex-start;gap:10px}
.nx-acct--phone .nx-acct__row:has(select,input) :is(select,input){width:100%}
.nx-acct__brand-side>.nx-acct__link{align-self:flex-start}
.nx-acct__row .nx-actions{flex-wrap:wrap;min-width:0}
@media (max-width:1120px){.nx-acct__sec{grid-template-columns:1fr}.nx-acct__sec>h2{position:static;margin:0}}
/* surface:account:end */

/* ------------------------------------------------------------------------------------------------
   UX 10/10 surface: the shell (build order 1). Atlas v5 nav, owner pick A, 2026-09-25.
   A laptop gets the left rail (recessed one step; New recording the one raised plate, no glow),
   folding to 72px icons with tooltips; under 768px the rail gives way to the bottom tab bar.
   The content column is the container every screen tightens by. Tokens only.
   ------------------------------------------------------------------------------------------------ */
/* surface:shell:begin */
.nx-app { display: flex; }
.nx-col { flex: 1 1 0; min-width: 0; container: nx / inline-size; }
.nx-side { position: sticky; top: 0; align-self: flex-start; flex: none; z-index: 3; width: 272px; height: 100%; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--nx-field); box-shadow: inset -1px 0 0 var(--nx-hair), inset -10px 0 16px -14px rgba(0, 0, 0, 0.5); }
.nx[data-theme="light"] .nx-side { background: var(--nx-panel-2); }
.nx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 0 8px 6px; }
.nx-side__brand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--nx-target); color: var(--nx-ink); }
.nx-side__nav { display: flex; flex-direction: column; gap: 2px; }
.nx-side__row, .nx-side__fold { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--nx-target); padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--nx-ink-2); font: inherit; font-size: 17px; font-weight: 500; text-align: left; cursor: pointer; transition: color var(--nx-d-state) var(--nx-ease), background var(--nx-d-state) var(--nx-ease); }
.nx a.nx-side__row { color: var(--nx-ink-2); }
.nx-side__row:hover, .nx a.nx-side__row:hover, .nx-side__fold:hover { color: var(--nx-ink); background: var(--nx-flat); }
.nx .nx-side__row[aria-current="page"] { color: var(--nx-ink); background: var(--nx-panel-2); box-shadow: var(--nx-inset-btn); }
.nx[data-theme="light"] .nx-side__row[aria-current="page"] { background: var(--nx-flat); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.nx .nx-side__new { margin-bottom: 6px; color: var(--nx-ink); background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); box-shadow: inset 0 1px 0 var(--nx-rim-top), 0 0 0 1px var(--nx-hair), 0 1px 2px rgba(0, 0, 0, 0.3); }
.nx-side__fold { width: var(--nx-target); padding: 0; justify-content: center; color: var(--nx-ink-3); }
.nx-side__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-kbd { margin-left: auto; padding: 0 6px; min-width: 32px; border: 1px solid var(--nx-hair); border-radius: 6px; background: var(--nx-well); color: var(--nx-ink-3); font: inherit; font-size: 15px; font-weight: 500; line-height: 24px; text-align: center; box-shadow: var(--nx-inset-btn); }
.nx-badge-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--nx-sky); color: var(--nx-sky-ink); font-size: 15px; font-weight: 600; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.nx-side__recent { list-style: none; margin: 10px -12px 0; padding: 10px 12px 8px; flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--nx-hair); scrollbar-width: thin; }
.nx-side__spacer { flex: 1 1 auto; }
.nx-side__rec { display: flex; align-items: center; gap: 12px; min-height: var(--nx-target); padding: 4px 6px; border-radius: 10px; color: var(--nx-ink-2); font-size: 15px; letter-spacing: 0.01em; }
.nx a.nx-side__rec { color: var(--nx-ink-2); }
.nx a.nx-side__rec:hover { color: var(--nx-ink); background: var(--nx-flat); }
.nx .nx-side__rec[aria-current="page"] { color: var(--nx-ink); background: var(--nx-panel-2); }
.nx-side__frame { position: relative; flex: none; width: 64px; height: 36px; border-radius: 6px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, var(--nx-panel-2), var(--nx-well)); box-shadow: inset 0 0 0 1px var(--nx-hair); color: var(--nx-ink-3); font-size: 15px; font-weight: 600; }
.nx-side__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-side__frame::before, .nx-side__frame::after { z-index: 1; }
.nx-side__rec[data-state="needs"] .nx-side__frame { box-shadow: inset 0 0 0 1.5px var(--nx-sky); }
.nx-side__rec[data-state="building"] .nx-side__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--nx-sky); }
.nx-side__rec[data-state] .nx-side__frame::before { content: ""; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-sky); }
.nx-side__rec[data-state="failed"] .nx-side__frame::before, .nx-side__dot { background: var(--nx-bad); }
.nx-side__rec[data-state="line"] .nx-side__frame::before, .nx-side__rec[data-state="stopped"] .nx-side__frame::before { background: var(--nx-ink-4); }
.nx-side__dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
.nx-side__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* UX-12: a running or stopped upload on the New recording row and the phone's New tab */
.nx-upchip { margin-left: auto; color: var(--nx-sky); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-upchip[data-state="failed"] { color: var(--nx-bad); }
.nx-tab__ic .nx-upchip { position: absolute; top: -6px; left: calc(50% + 4px); margin: 0; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; border-radius: 10px; background: var(--nx-sky); color: var(--nx-bg); }
.nx-tab__ic .nx-upchip[data-state="failed"] { background: var(--nx-bad); color: var(--nx-bg); }
.nx-tab__ic .nx-upchip--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; }
.nx-side__me { margin: 6px -4px 0; padding: 0 8px; }
.nx-side__me .nx-avatar { width: 32px; height: 32px; font-size: 15px; }
.nx-side__me .ic { color: var(--nx-ink-4); }
/* folded: icons only, each with its tooltip; the Recent frames rest in the Library */
.nx-side--fold { width: 72px; }
.nx-side--fold .nx-side__head { flex-direction: column; padding: 0 0 8px; }
.nx-side--fold .nx-side__lbl, .nx-side--fold .nx-kbd, .nx-side--fold .nx-side__me > .ic { display: none; }
.nx-side--fold .nx-side__row { justify-content: center; padding: 0; }
.nx-side--fold .nx-badge-n { position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; }
.nx-side--fold [data-tip]:hover::after, .nx-side--fold [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: var(--nx-ink); color: var(--nx-bg); font-size: 15px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: var(--nx-shadow-xl); }
.nx-menu--side { right: auto; top: auto; left: 12px; bottom: 72px; width: 248px; }
.nx-scrim--clear { background: transparent; }
/* ⌘K: one field, grouped results, a lit card over the scrim */
.nx-search { position: fixed; z-index: 5; top: 96px; left: 50%; transform: translateX(-50%); width: min(680px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 128px)); overflow: auto; display: flex; flex-direction: column; background: var(--nx-flat); border: 1px solid var(--nx-rim-top); border-radius: var(--nx-r-card); box-shadow: inset 0 1px 0 var(--nx-rim-top), var(--nx-shadow-2xl); }
.nx-search__field { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--nx-hair); }
.nx-search__field input { flex: 1; min-width: 0; min-height: var(--nx-target); border: 0; outline: 0; background: transparent; color: var(--nx-ink); font: inherit; font-size: 20px; }
.nx-search__field input::-webkit-search-cancel-button { display: none; }
.nx .nx-search__field input:focus-visible { outline: 0; }
.nx-search__field .nx-kbd { min-height: 32px; cursor: pointer; }
.nx-search__list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nx-search__group { padding: 10px 12px 4px; color: var(--nx-ink-4); font-size: 15px; letter-spacing: 0.01em; }
.nx-search__row { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--nx-ink-2); font: inherit; text-align: left; cursor: pointer; }
.nx-search__row[aria-current="true"] { background: var(--nx-panel-2); box-shadow: var(--nx-inset-btn); }
.nx-search__text { display: flex; flex-direction: column; min-width: 0; }
.nx-search__text b { color: var(--nx-ink); font-weight: 500; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-search__text span { color: var(--nx-ink-4); font-size: 15px; }
.nx-search .nx-empty { padding: var(--nx-s7) var(--nx-s5); }
/* the phone: the tab bar under the thumb; it hides inside Edit, Ask and a Bernayser chat */
.nx-tabbar { display: none; }
.nx-find-door { display: none; }
@media (max-width: 767px) {
  .nx-col > .nx-body { position: relative; }
  .nx-find-door { display: grid; place-items: center; position: absolute; z-index: 2; top: 16px; right: 12px; width: var(--nx-target); height: var(--nx-target); border: 0; border-radius: 10px; background: transparent; color: var(--nx-ink-2); cursor: pointer; }
  .nx-lib__head { padding-right: 52px; }
  .nx-side { display: none; }
  .nx-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--nx-bar); border-top: 1px solid var(--nx-hair); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nx-app[data-tabs] .nx-col { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* a control the browser scrolls into view (focus, a screen reader) lands above the fixed tab bar */
  .nx-app[data-tabs] { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .nx-app[data-tabs] .nx-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .nx-app[data-tabs] .nx-room__composer { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .nx-app[data-tabs] .nx-bzc:not(.nx-bzc--hello) > .nx-bzc__composer { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* the end of the thread sits above the lifted composer: its last line (the wall's "Use these N")
     is never under the message field */
  .nx-app[data-tabs] .nx-bzc:not(.nx-bzc--hello) > .nx-bzc__thread { padding-bottom: 48px; }
  .nx-search { inset: 0; transform: none; width: 100%; max-height: none; border-radius: 0; border: 0; }
}
.nx-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; min-width: var(--nx-target); color: var(--nx-ink-3); font-size: 15px; font-weight: 500; }
.nx a.nx-tab { color: var(--nx-ink-3); }
.nx a.nx-tab[aria-current="page"] { color: var(--nx-ink); }
.nx-tab__ic { position: relative; display: grid; place-items: center; height: 32px; }
.nx-tab__ic .ic { width: 22px; height: 22px; }
.nx-tab__ic .nx-avatar { width: 26px; height: 26px; font-size: 15px; }
.nx-tab[aria-current="page"] .nx-avatar { border-color: var(--nx-sky); }
.nx-tab--new .nx-tab__ic { width: 52px; height: 32px; border-radius: 10px; background: linear-gradient(var(--nx-fill-top), var(--nx-fill-bot)); box-shadow: inset 0 1px 0 var(--nx-rim-top), 0 0 0 1px var(--nx-hair); }
.nx-tab__ic .nx-badge-n { position: absolute; top: -6px; left: calc(50% + 4px); margin: 0; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; }
@media (prefers-reduced-motion: reduce) { .nx-side__row, .nx-side__fold { transition: none; } }
/* surface:shell:end */

/* Step 2 of a new recording: the stepper Configure on its own page (owner 2026-09-30; the
   style it had before the one-page Start, #2553). */
.nx-configure__formats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.nx-configure .nx-stack > .nx-btn--block { align-self: stretch; width: 100%; }
.nx-stepper { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.nx-stepper--phone { grid-template-columns: minmax(0, 1fr); }
.nx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nx-steps button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; min-height: var(--nx-target); padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--nx-ink-3); font: inherit; text-align: left; cursor: pointer; }
.nx-steps button:hover { background: var(--nx-well); color: var(--nx-ink); }
.nx-steps button[aria-current="step"] { background: var(--nx-well); color: var(--nx-ink); box-shadow: var(--nx-inset-hi), inset 0 0 0 1px var(--nx-sky-line); }
.nx-steps__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--nx-t-label); font-variant-numeric: tabular-nums; border: 1.5px solid var(--nx-ring); color: var(--nx-ink-4); }
.nx-steps button[data-state="done"] .nx-steps__n { border-color: var(--nx-sky-2); background: var(--nx-sky-2); color: #FFFFFF; }
.nx-steps button[aria-current="step"] .nx-steps__n { border-color: var(--nx-sky-2); color: var(--nx-ink); }
.nx-steps__l { display: grid; gap: 2px; min-width: 0; }
.nx-steps__l small { color: var(--nx-ink-4); font-size: var(--nx-t-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-step__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nx-step__k { color: var(--nx-ink-4); font-size: var(--nx-t-label); font-variant-numeric: tabular-nums; }
.nx-step__nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nx-cut { display: grid; gap: 10px; }
.nx-cut__opt { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--nx-rim-top); background: var(--nx-flat); text-align: left; color: var(--nx-ink-3); font: inherit; cursor: pointer; }
.nx-cut__opt:hover { border-color: var(--nx-hover-border); }
.nx-cut__opt[aria-checked="true"] { color: var(--nx-ink); box-shadow: inset 0 0 0 1px var(--nx-sky-line); }
.nx-cut__opt b { font-weight: 500; color: var(--nx-ink); display: flex; align-items: center; gap: 8px; }
.nx-summary__rows { display: grid; gap: 6px; }
.nx-summary__rows .nx-row { justify-content: space-between; gap: var(--nx-s3); }
.nx-configure .nx-choices__pick { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); flex-wrap: wrap; }
@media (max-width: 640px) {
  .nx-stepper { grid-template-columns: minmax(0, 1fr); }
  .nx-configure__formats { grid-template-columns: 1fr 1fr; }
  .nx-configure { padding-bottom: 140px; }
}
.nx .nx-start1__nexttitle { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: var(--nx-ink); }
.nx-start1__opts { display: flex; flex-direction: column; gap: var(--nx-s4); padding-top: var(--nx-s4); border-top: 1px solid var(--nx-hair); }
.nx-bar__text:empty { display: none; }
.nx h2.nx-step__k { font-size: var(--nx-t-label); font-weight: 400; letter-spacing: 0; color: var(--nx-ink-4); }
.nx-start1__cams { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
/* Step 2's recording: small, centred, the upload's line on its bottom edge, one quiet line under it. */
.nx-recmini { display: flex; flex-direction: column; align-items: center; gap: var(--nx-s2); }
.nx .nx-recmini .nx-recframe { width: 256px; max-width: 100%; margin: 0; border: 1px solid var(--nx-rim-top); border-radius: 14px; box-shadow: var(--nx-shadow-xl); }
.nx-recmini .nx-recframe__type { padding: var(--nx-s3); }
.nx-recmini .nx-recframe__type span { font-size: 15px; }
.nx-recmini .nx-recframe__len { right: 6px; bottom: 8px; padding: 1px 6px; font-size: 13px; border-radius: 6px; }
.nx-recmini .nx-upbar { height: 3px; }
.nx-recmini__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--nx-s2); margin: 0; max-width: 520px; text-align: center; font-size: 15px; color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.nx-recmini__title { color: var(--nx-ink-2); overflow-wrap: anywhere; }
.nx-recmini__word::before { content: "·"; margin-right: var(--nx-s2); color: var(--nx-ink-4); }
.nx-recmini .nx-upline { width: 100%; max-width: 560px; grid-template-columns: minmax(0, 1fr) auto; text-align: left; }
.nx-recmini .nx-upline__title { font-size: 15px; }
.nx-recmini .nx-upline__facts, .nx-recmini .nx-upline__note { font-size: 13px; }
.nx-start1__held { all: unset; display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-target); color: var(--nx-ink-3); font-size: 17px; cursor: pointer; border-radius: 10px; }
.nx-start1__held:hover { color: var(--nx-ink); }
.nx-start1__held:focus-visible { outline: 2px solid var(--nx-sky); outline-offset: 2px; }
@media (max-width: 640px) { .nx .nx-recmini .nx-recframe { width: 184px; } }
.nx .nx-configure [data-control="nx-start"][data-queued="1"] { white-space: normal; height: auto; min-height: var(--nx-target); line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
.nx-configure .nx-bar__text > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 641px) {
  .nx .nx-recmini .nx-recframe { width: 224px; }
  .nx-configure > .nx-recmini { margin-top: -52px; margin-bottom: -8px; }
}
@media (min-width: 641px) {
  .nx .nx-recmini .nx-recframe { width: 200px; }
  .nx-configure > .nx-recmini { gap: var(--nx-s1); }
  .nx-configure > .nx-recmini + .nx-hero { margin-top: -8px; }
}
.nx-recmini__line { align-items: center; }
.nx-recmini__cams { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-recmini__cams { margin-left: var(--nx-s3); }
.nx-recmini__cams [data-control="nx-angles-edit"] { min-height: 32px; }
@media (max-width: 640px) { .nx-recmini__cams { flex-basis: 100%; justify-content: center; margin: var(--nx-s1) 0 0; } }

/* surface:glow:begin */
/* The recording's own light (ruling 1A 2026-09-25): dark only, ambient, never on a control. */
.nx .nxr:has(> .nx-wash) { position: relative; isolation: isolate; }
/* Quiet text over the wash reads at ink-2, so any poster, even pure white, keeps AA. */
.nx:not([data-theme="light"]) .nxr:has(> .nx-wash) { --nx-ink-3: var(--nx-ink-2); --nx-ink-4: var(--nx-ink-2); }
.nx .nx-wash { position: absolute; z-index: -1; top: -32px; bottom: 0; left: calc(50% - 50cqi); width: 100cqi; max-height: 860px; overflow: hidden; pointer-events: none; opacity: .5; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); animation: nx-wash-in 480ms cubic-bezier(.19, 1, .22, 1) both; }
.nx .nx-wash img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(80px) saturate(1.55) brightness(.6); }
.nx[data-theme="light"] .nx-wash { display: none; }
@keyframes nx-wash-in { from { opacity: 0; } }
@media (max-width: 640px) { .nx .nx-wash { top: -8px; max-height: 560px; } }
@media (prefers-reduced-motion: reduce) { .nx .nx-wash { animation: none; } }
/* surface:glow:end */
/* A carousel-only order opens on its carousels: each set is a section with the swipe row. */
.nx .nxr-carousels { gap: 28px; }
.nx .nxr-carousel { display: grid; gap: 12px; }

/* The Set (owner 2026-10-03): the drop bay is ClipZyn's own TV. */
.nx-set{position:relative;width:min(820px,100%);margin:132px auto 0}
.nx-set__ant{position:absolute;left:39%;bottom:100%;width:250px;height:140px;transform:translateX(-50%);overflow:visible;fill:none;stroke:var(--nx-sky);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--nx-sky-rim))}
.nx-set__tip{fill:#fff}.nx-set__tip--sky{fill:var(--nx-sky-text)}
.nx-set__cab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:18px;padding:20px;border-radius:42px;background:linear-gradient(#2B2B2B,#1C1C1C 42%,#141414);box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px #2E2E2E,0 60px 110px -50px #000,0 0 120px -40px #4fb8ff59}
.nx-bay.nx-set__scr{aspect-ratio:16/10;min-height:0;gap:16px;padding:34px 40px;border:0;border-radius:28px;overflow:hidden;background:radial-gradient(72% 70% at 50% 42%,#123A5E,#0B2136 46%,#07111C 76%,#04080D);box-shadow:inset 0 0 80px #000d,inset 0 0 26px #4fb8ff33,0 0 0 6px #0B0B0B,0 0 0 7px #2C2C2C}
.nx-bay.nx-set__scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,#ffffff17,#ffffff05 26%,transparent 27%)}
.nx-bay.nx-set__scr>*{position:relative;z-index:1}
.nx-bay.nx-set__scr.is-over{box-shadow:inset 0 0 0 2px var(--nx-sky-rim),inset 0 0 60px #4fb8ff59,0 0 0 6px #0B0B0B,0 0 0 7px var(--nx-sky-rim)}
.nx-set__scr .nx-bay__icon{color:#fff;background:#4fb8ff1a;border-color:#8ad4ff66}
.nx-set__scr .nx-bay__line{font-size:38px;color:#fff;text-shadow:0 0 22px #4fb8ff8c}
.nx-set__sub{color:#A9CDE6}
.nx-set__scr>.nx-start1__meta{font-size:14px;color:#8FB5D0}
.nx-set__duo{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.nx .nx-set__ghost{background:#8ad4ff0f;box-shadow:inset 0 0 0 1px #8ad4ff4d}
.nx-set__panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px 0}
.nx-set__panel i{display:block;border-radius:50%}
.nx-set__knob{position:relative;width:50px;height:50px;background:radial-gradient(circle at 34% 28%,#4A4A4A,#1B1B1B 62%);box-shadow:0 6px 12px #000b,0 0 0 1px #2C2C2C}
.nx-set__knob::after{content:"";position:absolute;top:7px;left:24px;width:2px;height:12px;background:var(--nx-sky-text)}
.nx-set__knob--turn{transform:rotate(64deg)}
.nx .nx-set__spk{flex:1;width:48px;border-radius:14px;background:#141414;box-shadow:inset 0 2px 6px #000,0 0 0 1px #262626}
.nx-set__led{width:8px;height:8px;background:var(--nx-sky-text);box-shadow:0 0 12px 3px var(--nx-sky-rim)}
.nx-set__foot{position:absolute;bottom:-18px;left:14%;width:26px;height:22px;background:#151515;border-radius:0 0 8px 8px;transform:skewX(14deg)}
.nx-set__foot--r{left:auto;right:14%;transform:skewX(-14deg)}
.nx-filmed{flex-direction:column;gap:12px;width:min(820px,100%);margin:8px auto 0}
.nx-filmed__q{color:var(--nx-ink-3)}
.nx-filmed__opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.nx-filmed__opt{display:flex;align-items:center;gap:16px;min-height:84px;padding:16px 18px;border:0;border-radius:18px;text-align:left;cursor:pointer;font:inherit;color:var(--nx-ink-2);background:var(--nx-flat);box-shadow:0 0 0 1px var(--nx-rim-top)}
.nx-filmed__ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;color:var(--nx-ink-3);background:var(--nx-field);box-shadow:inset 0 0 0 1px var(--nx-rim-top)}
.nx-filmed__t{display:flex;flex-direction:column;gap:4px}
.nx-filmed__t b{font-size:17px;color:var(--nx-ink)}
.nx-filmed__t span{font-size:14px;color:var(--nx-ink-4)}
.nx-filmed__mark{display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border-radius:50%;color:transparent;box-shadow:inset 0 0 0 1.5px var(--nx-ring)}
.nx-filmed__opt[aria-checked="true"]{background:var(--nx-sky-soft);box-shadow:0 0 0 1.5px var(--nx-sky)}
.nx-filmed__opt[aria-checked="true"] .nx-filmed__ic{color:var(--nx-sky-text)}
.nx-filmed__opt[aria-checked="true"] .nx-filmed__mark{color:var(--nx-sky-ink);background:var(--nx-sky)}
.nx-filmed__fact{text-align:center;max-width:none;font-size:14px;color:var(--nx-ink-4)}
@media (max-width:640px){.nx-set{margin-top:104px}.nx-set__ant{width:180px;height:96px}.nx-set__cab{grid-template-columns:1fr;padding:12px;border-radius:28px}.nx-set__panel{display:none}.nx-bay.nx-set__scr{aspect-ratio:auto;padding:30px 16px}.nx-set__duo .nx-btn{flex:1 1 100%}.nx-filmed__opts{grid-template-columns:1fr}}
/* Studio controls (2026-10-07): rows on one grid, values in mono at one edge. */
.nx-seg,.nx-fine__tabs{width:100%;max-width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.nx-seg--fit{width:auto}
.nx-seg button,.nx-fine__tabs button{justify-content:center;min-height:44px;font-size:15px;transition:box-shadow var(--nx-d-state)}
.nx-seg button[aria-checked="true"]{color:var(--nx-ink);background:var(--nx-panel-2);box-shadow:var(--nx-inset-btn),inset 0 0 0 1px var(--nx-sky-line)}
.nx-more details,.nx-sect{border-top:1px solid var(--nx-hair);color:var(--nx-ink);font-size:15px}
.nx-more summary,.nx-sect>summary{display:flex;min-height:48px}
.nx-sect__name{flex:1;font-weight:600;color:var(--nx-ink)}
.nx-sect__body{display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.nx-sect__body>.nx-hooks{max-height:45vh;overflow-y:auto}
.nx-fine .nx-card__in,.nx-fine__sheet{display:flex;flex-direction:column;gap:14px}
.nx-fine__group{display:flex;flex-direction:column;gap:8px;animation:nx-fine-in var(--nx-d-state) var(--nx-ease-out)}
.nx-fine__group[hidden]{display:none}
@keyframes nx-fine-in{from{opacity:0}}
.nx-fine__row{display:grid;grid-template-columns:88px minmax(0,1fr) 64px;align-items:center;gap:12px;min-height:48px;font-size:15px}
.nx-fine__row>.nx-toggle,.nx-fine__row>.nx-fine__value{grid-column:3;justify-self:end}
.nx-fine__row>.nx-seg,.nx-fine__row>.nx-select,.nx-fine__word{grid-column:2/4;min-width:0}
.nx-fine__label{color:var(--nx-ink-2);white-space:nowrap}
.nx-fine__label:has(+.nx-toggle){grid-column:1/3}
.nx-fine__value{font:500 15px "Geist Mono",ui-monospace,monospace;white-space:nowrap}
.nx-fine__word{justify-self:end;font-family:var(--nx-font);color:var(--nx-ink-2)}
.nx-fine__row .nx-select{min-height:44px;font-size:15px}
.nx-fine__line,.nx-stage-save__line{margin:0;font-size:15px;color:var(--nx-ink-3)}
.nx-hooks__line{display:flex;justify-content:space-between;gap:12px}
.nx-hooks__text{overflow-wrap:anywhere}
.nx-hooks__row--on .nx-hooks__text::after{content:"";display:inline-block;width:5px;height:10px;margin-left:10px;border:solid var(--nx-sky-text);border-width:0 2px 2px 0;transform:rotate(45deg)}
.nx-hooks__tag{flex:none;color:var(--nx-sky-text)}
.nx-hooks__own{border-style:dashed}
.nx-hooks__row--on.nx-hooks__own{border-style:solid}
.nx-hooks__own:focus-within{outline:2px solid var(--nx-sky)}
.nx-hooks__own input{flex:1;min-width:0;padding:0;border:0;background:none;color:var(--nx-ink);font:inherit;font-size:16px;outline:0}
.nx-hooks__why{color:var(--nx-warn)}
.nx-swatches{display:flex;gap:8px}
.nx-swatches .nx-swatch{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.nx-colours{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px}
.nx-colours .nx-fine__more{flex-basis:100%}
.nx-swatches .nx-swatch--more{width:auto;padding:0 16px;border-radius:22px}
.nx-fine__more input{min-height:44px;border:1px solid var(--nx-line);border-radius:10px;background:var(--nx-well);color:var(--nx-ink)}
.nx-fine__hex{min-width:0;padding:0 12px;font:500 16px "Geist Mono",ui-monospace,monospace;text-transform:uppercase}
.nx-fine__go{border:0;background:none;padding:0;color:var(--nx-ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.nx-fine__go .nx-fine__word{display:flex;align-items:center;gap:6px}
.nx-fine__go .ic{width:18px;height:18px;margin-right:-24px;color:var(--nx-ink-3)}
.nx-fine__back{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--nx-sky-text);font:500 15px var(--nx-font);cursor:pointer}
.nx-editor [data-testid="nx-banner-why"] .nx-details__body{display:flex;flex-direction:column;gap:8px;color:var(--nx-ink-3)}
[data-testid="nx-banner-why"] ul{margin:0;padding:0;list-style:none}
.nx-stage__caption[data-ink="dark"]{-webkit-text-stroke:1px #FFF;paint-order:stroke fill;text-shadow:0 0 3px #FFF}
.nx-stage-note,.nx-stage-save__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.nx-stage-save{display:grid;gap:6px}