/* next.css: the Guru-inspired layer on top of the Canon site, in Canon's own style.
   Indigo ground, glass, white type; peach marks what is missing, mint what is approved. */

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nx-glass { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 24px 60px rgba(20,20,80,0.22), inset 0 1px 0 rgba(255,255,255,0.35); }

/* ---------- lanes: what Canon does on its own ---------- */
.nx-lanes { position: relative; padding: 40px 0 70px; display: grid; gap: 14px; overflow: hidden; transform: rotate(-2.5deg) scale(1.05); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.nx-lane { overflow: hidden; }
.nx-track { display: flex; gap: 14px; width: max-content; animation: nxLane 52s linear infinite; }
.nx-lane.rev .nx-track { animation-direction: reverse; }
.nx-lane:hover .nx-track { animation-play-state: paused; }
@keyframes nxLane { to { transform: translateX(-50%); } }
.nx-chip { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 13px 18px; border-radius: 100px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 16px 40px -20px rgba(20,20,80,0.5); color: #fff; font: 400 15px/1 var(--f-read); white-space: nowrap; }
.nx-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.nx-chip.c-ok::before { background: var(--ok, #8de8b8); } .nx-chip.c-warn::before { background: #ffd59e; } .nx-chip.c-peach::before { background: var(--accent, #ffd9c7); box-shadow: 0 0 0 3px rgba(255,217,199,0.25); } .nx-chip.c-lock::before { background: rgba(255,255,255,0.5); }
.nx-chip:nth-child(even) { transform: rotate(1.2deg); } .nx-chip:nth-child(3n) { transform: rotate(-1.4deg); }

/* ---------- the stream (after Guru's hub): logos left and right, lines into a ring, the kinds of agreements inside ---------- */
.nx-stream { position: relative; max-width: 1440px; margin: 0 auto; padding: 60px var(--gutter) 40px; }
.nx-stmt { text-align: center; margin: 0 auto !important; max-width: 24ch !important; }
.nx-hub { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr) 96px; align-items: center; margin-top: 56px; min-height: 640px; }
.nx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nx-src, .nx-out { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; justify-items: center; }
.nx-src { grid-column: 1; } .nx-out { grid-column: 5; }
.nx-src li, .nx-out li { display: grid; justify-items: center; gap: 6px; }
.nx-logo { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(20,20,80,0.35)); transition: transform 300ms cubic-bezier(0.23,1,0.32,1); }
.nx-logo.glyph { display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: var(--accent, #ffd9c7); }
.nx-out .nx-logo.glyph { color: var(--ok, #8de8b8); }
.nx-logo.glyph .ic { width: 30px; height: 30px; }
.nx-src small, .nx-out small { font: 400 11px/1.2 var(--f-data); letter-spacing: 0.04em; color: var(--text-2); white-space: nowrap; }
.nx-out li.hit .nx-logo { transform: scale(1.12); }
.nx-core { grid-column: 3; position: relative; z-index: 1; aspect-ratio: 1; width: 100%; display: grid; place-items: center; }
.nx-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: nxSpin 70s linear infinite; overflow: visible; }
.nx-ring text { font: 500 20px/1 var(--f-read); letter-spacing: 0.1em; }
.nx-ring .a { fill: var(--accent, #ffd9c7); } .nx-ring .b { fill: #fff; } .nx-ring .d { fill: rgba(255,255,255,0.45); }
@keyframes nxSpin { to { transform: rotate(360deg); } }
.nx-mark { position: absolute; top: 19%; left: 50%; translate: -50% 0; z-index: 2; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 32px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 24px 60px rgba(20,20,80,0.35), 0 0 90px rgba(255,255,255,0.25); transition: transform 300ms cubic-bezier(0.23,1,0.32,1), box-shadow 300ms ease; }
.nx-mark b { font: 500 13px/1 var(--f-data); letter-spacing: 0.32em; padding-left: 0.32em; color: #fff; }
.nx-mark.pulse { transform: scale(1.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 24px 60px rgba(20,20,80,0.35), 0 0 120px rgba(141,232,184,0.5); }
.nx-types { position: relative; top: 11%; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 70%; list-style: none; margin: 0; padding: 0; }
.nx-types li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #fff; color: #3a40c8; font: 500 14px/1 var(--f-read); box-shadow: 0 10px 24px -14px rgba(20,20,80,0.6); }
.nx-types li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-strong, #4a50e0); opacity: 0.55; }
.nx-types li:nth-child(n+5) { background: rgba(255,255,255,0.82); }
.nx-types li:nth-child(n+8) { background: rgba(255,255,255,0.5); }
.nx-types li:nth-child(n+11) { background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }
.js .nx-types li { opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 500ms cubic-bezier(0.23,1,0.32,1), transform 600ms cubic-bezier(0.23,1,0.32,1); transition-delay: calc(var(--i) * 80ms); }
.nx-hub.play .nx-types li { opacity: 1; transform: none; }

/* ---------- how Canon works: header ---------- */
.nx-hiw-head { max-width: 1280px; margin: 0 auto; padding: 120px var(--gutter) 20px; text-align: center; }
.nx-h { margin: 0; font: 500 clamp(2.6rem, 6vw, 5.2rem)/1 var(--f-read); letter-spacing: -0.04em; text-wrap: balance; }
.nx-hp { margin: 22px auto 0; max-width: 60ch; font: 300 1.2rem/1.55 var(--f-read); color: var(--text-2); }
.nx-chain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 34px; color: var(--text-2); }
.nx-chain a { padding: 10px 18px; border-radius: 100px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); color: #fff; text-decoration: none; font: 400 15px/1 var(--f-read); transition: background-color 150ms ease, border-color 150ms ease; }
.nx-chain a:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }

/* statement cards between chapters */
.nx-quote { max-width: 1080px; margin: 10px auto; }
.nx-quote blockquote { position: relative; margin: 0; padding: clamp(32px, 4.5vw, 60px); border-radius: 28px; background: rgba(255,255,255,0.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 60px rgba(20,20,80,0.22); font: 500 clamp(1.8rem, 3.6vw, 3rem)/1.12 var(--f-read); letter-spacing: -0.03em; text-wrap: balance; }
.nx-quote blockquote::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(135deg, var(--accent, #ffd9c7), #fff 45%, var(--ok, #8de8b8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.nx-quote em { font-style: normal; color: var(--accent, #ffd9c7); }
.js .nx-quote blockquote { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 800ms cubic-bezier(0.23,1,0.32,1), transform 900ms cubic-bezier(0.23,1,0.32,1); }
.js .nx-quote blockquote.in { opacity: 1; transform: none; }

/* ---------- proof ---------- */
.nx-proof { max-width: 1280px; margin: 0 auto; padding: 110px var(--gutter) 80px; }
.nx-proof .nx-h { text-align: center; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.nx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.nx-stat { padding: 30px 28px; border-radius: 24px; }
.nx-num { display: block; font: 500 clamp(3.8rem, 6.4vw, 5.6rem)/0.95 var(--f-read); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.nx-stat p { margin: 16px 0 22px; font: 400 1.05rem/1.5 var(--f-read); color: var(--text-2); }
.nx-stat em { font-style: normal; color: var(--accent, #ffd9c7); }
.nx-stat a { font: 400 12px/1 var(--f-data); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.nx-stat a:hover { color: #fff; }

/* ---------- security band ---------- */
.nx-secure { padding: 60px 0 90px; display: grid; gap: 10px; overflow: hidden; }
.nx-track.big { gap: 40px; align-items: center; animation-duration: 66s; }
.nx-track.big span { font: 400 clamp(1.9rem, 4vw, 3.4rem)/1.2 var(--f-read); letter-spacing: -0.025em; white-space: nowrap; }
.nx-track.big .ic { width: 28px; height: 28px; color: var(--accent, #ffd9c7); }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .nx-hub { grid-template-columns: minmax(0, 1fr); gap: 46px; min-height: 0; }
  .nx-src, .nx-out { grid-column: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; }
  .nx-core { grid-column: 1; width: min(100%, 540px); justify-self: center; }
  .nx-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nx-lanes { padding: 24px 0 40px; }
  .nx-chip { font-size: 13.5px; padding: 11px 14px; }
  .nx-logo { width: 40px; height: 40px; } .nx-logo.glyph .ic { width: 22px; height: 22px; } .nx-logo.glyph { border-radius: 12px; }
  .nx-src small, .nx-out small { font-size: 10px; }
  .nx-mark { width: 72px; height: 72px; border-radius: 22px; top: 15%; } .nx-mark b { font-size: 9px; }
  .nx-types { max-width: 80%; gap: 5px; top: 12%; } .nx-types li { font-size: 11px; padding: 6px 8px; } .nx-types li:nth-child(n+9) { display: none; }
  .nx-hiw-head { padding-top: 80px; }
  .nx-stats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .nx-stats > * { flex: none; width: 84vw; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-track, .nx-ring { animation: none !important; }
  .js .nx-types li, .js .nx-quote blockquote { opacity: 1; transform: none; transition: none; }
}

/* ---------- how Canon works, sideways: visual left, story right (after getguru.com/how-it-works) ---------- */
.nxh .step-panel { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr) !important; gap: clamp(32px, 4.5vw, 80px) !important; }
.nxh .step-demo { order: 1; }
.nxh .step-copy { order: 2; border-left: 1px solid rgba(255,255,255,0.22); padding-left: clamp(20px, 2.6vw, 40px); }
.nxh .step-copy .h1 { font: 500 clamp(2rem, 3.4vw, 3.2rem)/1.02 var(--f-read) !important; letter-spacing: -0.035em; margin: 12px 0 4px; }
.nx-k { margin: 20px 0 4px; font: 500 1.25rem/1.2 var(--f-read); letter-spacing: -0.01em; }
.nx-prob { color: var(--accent, #ffd9c7); }
.nx-does { color: var(--ok, #8de8b8); }
.nx-pv, .nxh .step-copy .lead { margin: 0 !important; font: 400 1.05rem/1.5 var(--f-read) !important; color: var(--text-2) !important; max-width: 46ch; }
.nxh .step-copy .signal { margin-top: 18px; padding: 12px 16px; }
.nx-feats { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 24px 0 0; padding: 0; max-width: 52ch; }
.nx-feats li { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/1.3 var(--f-read); color: #fff; }
.nx-feats li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--ok, #8de8b8); transform: rotate(45deg); flex: none; }

/* the visuals */
.nxv { width: min(640px, 100%); margin: 0 auto; color: #fff; }
.nxv-src { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 16px; }
.nxv-src li { display: flex; gap: 14px; align-items: flex-start; }
.nxv-src .ic { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: rgba(255,255,255,0.14); color: var(--accent, #ffd9c7); margin-top: 2px; }
.nxv-src b { display: block; font: 400 1.08rem/1.3 var(--f-read); }
.nxv-src span { font: 400 14.5px/1.3 var(--f-read); color: var(--text-2); }
.nxv-wire { width: 1px; height: 40px; margin-left: 24px; background: linear-gradient(rgba(255,255,255,0.4), var(--ok, #8de8b8)); transform-origin: top; }
.nxv-wire.short { height: 30px; }
.nxv-card { position: relative; padding: 22px 24px 24px; border-radius: 26px; background: linear-gradient(160deg, rgba(141,232,184,0.16), rgba(255,255,255,0.08) 45%, rgba(58,64,200,0.35)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 30px 70px rgba(20,20,80,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
.nxv-card::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(135deg, var(--ok, #8de8b8), #fff 45%, var(--accent, #ffd9c7) 75%, #b3b6ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.nxv-h { display: flex; align-items: center; gap: 14px; font: 400 1.05rem/1.3 var(--f-read); color: var(--text-2); }
.nxv-mk { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff; color: #3a40c8; font: 500 14px/1 var(--f-data); box-shadow: 0 0 30px rgba(255,255,255,0.35); }
.nxv-feed { list-style: none; margin: 18px 0 0 18px; padding: 0 0 0 24px; border-left: 1px solid rgba(255,255,255,0.28); display: grid; gap: 14px; }
.nxv-feed li { display: flex; gap: 14px; align-items: flex-start; }
.nxv-feed p { margin: 4px 0 0; font: 400 14.5px/1.4 var(--f-read); color: var(--text-2); }
.nxv-feed b { font: 500 1.06rem/1.3 var(--f-read); color: #fff; }
.nxv-dot { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; font: 600 15px/1 var(--f-read); font-style: normal; }
.k-bad .nxv-dot { color: #d43d2a; box-shadow: inset 0 0 0 2px #d43d2a; } .k-warn .nxv-dot { color: #b26a00; box-shadow: inset 0 0 0 2px #e0a032; } .k-info .nxv-dot { color: #3a40c8; box-shadow: inset 0 0 0 2px #6b70ee; } .k-ok .nxv-dot { color: #fff; background: #1e9b57; }
.nxv-result { position: relative; display: flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; margin-left: 4px; padding: 16px 22px 16px 16px; border-radius: 20px; background: var(--ok, #8de8b8); color: #062316; box-shadow: 0 24px 60px -20px rgba(141,232,184,0.7); }
.nxv-result b { display: block; font: 500 1.2rem/1.2 var(--f-read); }
.nxv-result .nxv-mk { background: #062316; color: #fff; box-shadow: none; }
.nxv-ok { position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #1e9b57; font: 700 14px/1 var(--f-read); font-style: normal; box-shadow: 0 0 0 2px var(--ok, #8de8b8); }
.nxv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nxv-tags em { font-style: normal; padding: 4px 10px; border-radius: 100px; background: rgba(6,35,22,0.12); font: 400 13px/1.3 var(--f-read); color: #062316; }
.nxv-ask { padding: 22px 24px 18px; border-radius: 24px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); margin-bottom: 26px; }
.nxv-q { margin: 0; min-height: 2.5em; font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.25 var(--f-read); letter-spacing: -0.015em; }
.nxv-q::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.12em; background: var(--accent, #ffd9c7); animation: nxBlink 1s steps(2) infinite; }
.nxv3.answered .nxv-q::after { display: none; }
@keyframes nxBlink { 50% { opacity: 0; } }
.nxv-tools { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font: 400 14px/1 var(--f-read); color: var(--text-2); }
.nxv-tools span { display: inline-flex; align-items: center; gap: 8px; } .nxv-tools .ic { width: 18px; height: 18px; }
.nxv-ticker { margin-top: 16px; overflow: hidden; mask-image: linear-gradient(90deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); }
.nxv-ticker div { display: flex; gap: 10px; width: max-content; animation: nxLane 26s linear infinite; }
.nxv-ticker b { font: 400 12px/1 var(--f-data); padding: 6px 10px; border-radius: 100px; background: rgba(255,255,255,0.12); color: var(--text-2); }
.nxv-ans { margin: 20px 0 0; font: 400 clamp(1.3rem, 2.1vw, 1.8rem)/1.25 var(--f-read); letter-spacing: -0.02em; }
.nxv-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; font: 400 14px/1 var(--f-read); color: var(--text-2); }
.nxv-foot span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.nxv-srcs { display: inline-flex; align-items: center; gap: 0; text-decoration: underline; text-underline-offset: 4px; }
.nxv-srcs i { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px; border-radius: 50%; background: #fff; color: #3a40c8; font: 500 11px/1 var(--f-data); font-style: normal; box-shadow: 0 0 0 2px rgba(58,64,200,0.6); }
.nxv-srcs i:last-of-type { margin-right: 10px; }

/* choreography: plays when the panel comes into view */
.js .nxv [class^="nxv-"], .js .nxv-feed li { transition: opacity 600ms cubic-bezier(0.23,1,0.32,1), transform 700ms cubic-bezier(0.23,1,0.32,1), filter 500ms ease; }
.js .nxv:not(.play) .nxv-wire { transform: scaleY(0); }
.js .nxv:not(.play) .nxv-card, .js .nxv:not(.play) .nxv-result { opacity: 0; transform: translateY(18px) scale(0.98); }
.js .nxv:not(.play) .nxv-feed li { opacity: 0; transform: translateX(-10px); filter: blur(4px); }
.js .nxv1.play .nxv-wire { transition-delay: 200ms; } .js .nxv1.play .nxv-card { transition-delay: 450ms; }
.js .nxv1.play .nxv-feed li:nth-child(1) { transition-delay: 1100ms; } .js .nxv1.play .nxv-feed li:nth-child(2) { transition-delay: 1800ms; } .js .nxv1.play .nxv-feed li:nth-child(3) { transition-delay: 2500ms; } .js .nxv1.play .nxv-feed li:nth-child(4) { transition-delay: 3300ms; }
.js .nxv1.play .nxv-wire.short { transition-delay: 3700ms; } .js .nxv1.play .nxv-result { transition-delay: 3950ms; }
.js .nxv3:not(.answered) .nxv-card { opacity: 0; transform: translateY(18px) scale(0.98); }
.js .nxv3:not(.answered) .nxv-feed li, .js .nxv3:not(.answered) .nxv-ans, .js .nxv3:not(.answered) .nxv-foot { opacity: 0; transform: translateY(8px); }
.js .nxv3.answered .nxv-feed li:nth-child(1) { transition-delay: 500ms; } .js .nxv3.answered .nxv-feed li:nth-child(2) { transition-delay: 1100ms; } .js .nxv3.answered .nxv-feed li:nth-child(3) { transition-delay: 1700ms; }
.js .nxv3.answered .nxv-ans { transition-delay: 2300ms; } .js .nxv3.answered .nxv-foot { transition-delay: 2700ms; }

@media (max-width: 1000px) {
  .nxh .step-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .nxh .step-copy { order: 0; border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .nxv-card { padding: 16px 16px 18px; } .nxv-feed { margin-left: 12px; padding-left: 16px; } .nxv-feed b { font-size: 0.98rem; }
  .nxv-result { padding: 12px 16px 12px 12px; } .nxv-result b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nxv-ticker div { animation: none; }
  .js .nxv [class^="nxv-"], .js .nxv-feed li { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ---------- header: a nav bar, as wide as the page (notes 16 Oct) ---------- */
.nav-in { max-width: 1280px !important; }
.nx-nav { display: flex; gap: 26px; margin-left: 28px; }
.nx-nav a { font: 400 14.5px/1 var(--f-read); color: var(--text-2); text-decoration: none; transition: color 150ms ease; }
.nx-nav a:hover { color: #fff; }
@media (max-width: 980px) { .nx-nav { display: none !important; } .menu-btn { display: inline-flex !important; } }

/* ---------- frame 2: the same question, two answers, and the layer in between ---------- */
.nxd { max-width: 1280px; margin: 0 auto; padding: 110px var(--gutter) 90px; }
.nxd-head { text-align: center; }
.nxd-grid { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 56px; }
.nxd-cards { position: sticky; top: 110px; display: grid; gap: 14px; }
.nxd-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; text-align: left; padding: 20px 22px; border-radius: 22px; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,0.22); transition: background-color 200ms ease, border-color 200ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1), opacity 200ms ease; opacity: 0.72; font: inherit; }
.nxd-card:hover { opacity: 0.95; }
.nxd-card:active { transform: scale(0.985); }
.nxd-card[aria-pressed="true"] { opacity: 1; background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.55); box-shadow: 0 24px 60px rgba(20,20,80,0.3), inset 0 1px 0 rgba(255,255,255,0.5); }
.nxd-n { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); font: 400 13px/1 var(--f-data); }
.nxd-card[aria-pressed="true"] .nxd-n { background: #fff; color: #3a40c8; border-color: #fff; }
.nxd-card:nth-child(2)[aria-pressed="true"] .nxd-n { background: var(--accent, #ffd9c7); border-color: var(--accent, #ffd9c7); color: #3b1d0d; }
.nxd-card:nth-child(3)[aria-pressed="true"] .nxd-n { background: var(--ok, #8de8b8); border-color: var(--ok, #8de8b8); color: #062316; }
.nxd-card b { font: 500 1.25rem/1.2 var(--f-read); letter-spacing: -0.01em; align-self: center; }
.nxd-p { font: 400 15px/1.5 var(--f-read); color: var(--text-2); }

.nxd-stage { position: relative; display: grid; gap: 0; }
.nxd-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.nxd-wires path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.nxd-wires .w-naive { stroke: rgba(255,217,199,0.75); stroke-dasharray: 4 6; }
.nxd-wires .w-pick { stroke: #ffd9c7; stroke-width: 2.4; stroke-dasharray: none; }
.nxd-wires .w-in { stroke: rgba(255,217,199,0.65); }
.nxd-wires .w-out { stroke: var(--ok, #8de8b8); stroke-width: 3; }
.nxd-wires .draw { animation: nxdDraw 900ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes nxdDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* the AI window */
.nxd-ai { position: relative; z-index: 1; padding: 18px 20px 20px; border-radius: 24px; background: #202123; color: #ececf1; box-shadow: 0 40px 80px -30px rgba(10,10,40,0.7); transition: background-color 400ms ease; }
.nxd-ai-bar { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--f-data); color: #a6a7b2; }
.nxd-ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #10a37f; }
.nxd-ex { margin-left: auto; letter-spacing: 0.18em; font-size: 10.5px; color: #8e8ea0; }
.nxd-msg { margin-top: 14px; font: 400 1.02rem/1.5 var(--f-read); }
.nxd-user { justify-self: end; margin-left: auto; width: max-content; max-width: 85%; padding: 10px 16px; border-radius: 18px; background: #343541; }
.nxd-bot p { margin: 0; font-size: 1.1rem; line-height: 1.45; color: #fff; }
.nxd-why { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,176,163,0.12); border: 1px solid rgba(255,176,163,0.35); }
.nxd-why b { font: 500 13px/1.2 var(--f-read); color: #ffb0a3; }
.nxd-why span { font-size: 14px; line-height: 1.45; color: #d9d9e3; }
.nxd-used { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 400 12.5px/1 var(--f-data); color: #a6a7b2; }
.nxd-used i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; color: #3a40c8; font: 500 10px/1 var(--f-data); font-style: normal; }
.nxd-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.nxd-strip span { padding: 6px 10px; border-radius: 8px; background: rgba(141,232,184,0.1); border: 1px solid rgba(141,232,184,0.35); font: 400 12px/1.2 var(--f-data); color: #c9f4dc; }
.nxd-ans-naive, .nxd-ans-canon { display: none; }
.nxd-stage[data-step="1"] .nxd-ans-naive, .nxd-stage[data-step="2"] .nxd-ans-canon { display: block; animation: nxdIn 500ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes nxdIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }

/* the middle: Canon IQ, or nothing */
.nxd-canon { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: center; max-height: 0; opacity: 0; margin: 0; padding: 0 22px; overflow: hidden; border-radius: 24px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: max-height 600ms cubic-bezier(0.23,1,0.32,1), opacity 400ms ease, margin 600ms cubic-bezier(0.23,1,0.32,1), padding 600ms cubic-bezier(0.23,1,0.32,1), border-color 400ms ease; }
.nxd-stage[data-step="2"] .nxd-canon { max-height: 260px; opacity: 1; margin: 46px 0; padding: 20px 22px; border-color: rgba(255,255,255,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 6px rgba(141,232,184,0.12), 0 30px 70px rgba(20,20,80,0.35); }
.nxd-layer-k { display: grid; gap: 4px; }
.nxd-layer-k b { font: 500 13px/1 var(--f-data); letter-spacing: 0.24em; color: #fff; }
.nxd-layer-k span { font: 400 13px/1.3 var(--f-read); color: var(--text-2); max-width: 22ch; }
.nxd-rule { display: grid; gap: 3px; padding: 12px 16px; border-radius: 14px; background: #fff; color: #1f2160; }
.nxd-ok { font: 400 11px/1 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase; color: #1e874b; }
.nxd-rule b { font: 500 1.05rem/1.25 var(--f-read); } .nxd-rule span { font-size: 14px; } .nxd-rule small { font: 400 11.5px/1.3 var(--f-data); color: #6b6e8a; }
.nxd-flag { grid-column: 2; justify-self: start; padding: 5px 10px; border-radius: 100px; background: #ffd59e; color: #3a2400; font: 400 12px/1 var(--f-read); }
.nxd-gap { position: relative; z-index: 1; margin: 46px auto; padding: 8px 14px; border-radius: 100px; border: 1px dashed rgba(255,217,199,0.6); color: var(--accent, #ffd9c7); font: 400 12.5px/1 var(--f-data); background: rgba(20,20,80,0.35); opacity: 0; transition: opacity 300ms ease; }
.nxd-stage[data-step="1"] .nxd-gap { opacity: 1; }
.nxd-stage[data-step="2"] .nxd-gap { display: none; }

/* the bottom: your data and rules */
.nxd-data { position: relative; z-index: 1; padding: 18px 20px 20px; border-radius: 24px; background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.35); }
.nxd-data .nxd-layer-k { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.nxd-data .nxd-layer-k b { letter-spacing: 0.08em; font: 500 14px/1 var(--f-read); }
.nxd-data .nxd-layer-k span { max-width: none; font-size: 13px; }
.nxd-srcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nxd-src { display: grid; gap: 3px; padding: 12px 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); transition: border-color 300ms ease, background-color 300ms ease, opacity 300ms ease; }
.nxd-src-k { font: 400 10.5px/1 var(--f-data); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.nxd-src-f { font: 400 12.5px/1.3 var(--f-read); color: var(--text-2); }
.nxd-src b { font: 500 1.25rem/1.1 var(--f-read); margin-top: 4px; }
.nxd-stage[data-step="1"] .nxd-src.bad { border-color: #ffd9c7; background: rgba(255,217,199,0.2); }
.nxd-stage[data-step="2"] .nxd-src { opacity: 0.75; }
.nxd-stage[data-step="2"] .nxd-src[data-src="2"] { opacity: 1; border-color: var(--ok, #8de8b8); background: rgba(141,232,184,0.16); }
.nxd-rules { margin-top: 10px; font: 400 12.5px/1.3 var(--f-data); color: var(--text-2); }

@media (max-width: 980px) {
  .nxd-grid { grid-template-columns: minmax(0, 1fr); }
  .nxd-cards { position: static; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .nxd-card { flex: none; width: 78vw; max-width: 340px; scroll-snap-align: start; }
  .nxd-srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxd-canon { grid-template-columns: minmax(0, 1fr); } .nxd-flag { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nxd-wires .draw, .nxd-stage .nxd-ans-naive, .nxd-stage .nxd-ans-canon { animation: none !important; }
  .nxd-canon { transition: none; }
}
/* one name, said in full: CANON IQ */
.nav .brand span, .foot .brand span { display: inline !important; font: 500 15px/1 var(--f-data) !important; letter-spacing: 0.35em !important; color: var(--accent, #ffd9c7) !important; }
@media (max-width: 420px) { .nav .brand b, .nav .brand span { font-size: 13px !important; letter-spacing: 0.28em !important; } .nav-in .btn-sm { padding: 8px 11px !important; } }

/* v7: the stage holds still. Both answers share one cell, so the chat is always as tall as its longest answer;
   the Canon layer and the "nothing in between" pill share the middle, so the data block never moves. */
.nxd-answers { display: grid; margin-top: 14px; }
.nxd-answers > * { grid-area: 1 / 1; margin-top: 0; }
.nxd-ans-naive, .nxd-ans-canon { display: block; visibility: hidden; opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity 360ms ease, transform 500ms cubic-bezier(0.23,1,0.32,1), filter 360ms ease, visibility 0s 360ms; }
.nxd-stage[data-step="1"] .nxd-ans-naive, .nxd-stage[data-step="2"] .nxd-ans-canon { display: block; visibility: visible; opacity: 1; transform: none; filter: none; animation: none; transition: opacity 360ms ease, transform 500ms cubic-bezier(0.23,1,0.32,1), filter 360ms ease, visibility 0s; }
.nxd-wait { align-self: start; display: inline-flex; gap: 5px; padding: 12px 0; transition: opacity 200ms ease; }
.nxd-wait i { width: 7px; height: 7px; border-radius: 50%; background: #8e8ea0; animation: nxdWait 1.2s ease-in-out infinite; }
.nxd-wait i:nth-child(2) { animation-delay: 0.15s; } .nxd-wait i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nxdWait { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.nxd-stage:not([data-step="0"]) .nxd-wait { opacity: 0; }
.nxd-mid { position: relative; z-index: 1; display: grid; align-items: center; margin: 40px 0; }
.nxd-mid > * { grid-area: 1 / 1; }
.nxd-canon, .nxd-stage[data-step="2"] .nxd-canon { max-height: none; margin: 0; padding: 20px 22px; overflow: visible; }
.nxd-canon { opacity: 0; transform: scale(0.97); visibility: hidden; transition: opacity 400ms ease, transform 500ms cubic-bezier(0.23,1,0.32,1), border-color 400ms ease, visibility 0s 400ms; }
.nxd-stage[data-step="2"] .nxd-canon { opacity: 1; transform: none; visibility: visible; transition: opacity 400ms ease, transform 500ms cubic-bezier(0.23,1,0.32,1), border-color 400ms ease, visibility 0s; }
.nxd-gap, .nxd-stage[data-step="2"] .nxd-gap { display: block; justify-self: center; margin: 0; }
.nxd-stage[data-step="2"] .nxd-gap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .nxd-ans-naive, .nxd-ans-canon, .nxd-canon { transition: none !important; } .nxd-wait i { animation: none; } }
/* short laptops (1366×720, 1280×720): step 2 carries the gap signal, so it drops its feature list to stay inside the screen */
@media (max-height: 800px) and (min-width: 1001px) { #werkt-hz #gaten .nx-feats { display: none; } }

/* v8: frame 2 fits one screen. Title and cards on the left, the AI window on the right,
   and the window can be ChatGPT or Claude (recreated, marked as an example). */
.nxd-left { display: grid; gap: 26px; align-content: center; }
.nxd-head { text-align: left; }
.nxd-head .nx-h { margin: 0; }
.nxd-head .nx-hp { margin: 14px 0 0; max-width: 46ch; text-align: left; }
.nxd-cards { position: static; gap: 10px; }
.nxd-card { padding: 14px 18px; border-radius: 18px; row-gap: 4px; }
.nxd-card b { font-size: 1.1rem; }
.nxd-p { font-size: 14px; line-height: 1.45; }
.nxd-n { width: 30px; height: 30px; }
@media (min-width: 1001px) {
  .nxd { min-height: 100svh; box-sizing: border-box; padding: 96px var(--gutter) 28px; display: flex; flex-direction: column; justify-content: center; }
  .nxd-grid { margin-top: 0; align-items: center; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); }
}

/* the AI window */
.nxd-ai { padding: 0; overflow: hidden; border-radius: 18px; font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; letter-spacing: 0; transition: background-color 300ms ease; }
.nxd-ai-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); font-family: inherit; }
.nxd-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,0.06); }
.nxd-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 0; border-radius: 8px; background: none; color: #9a9a9a; font: 500 13.5px/1 ui-sans-serif, -apple-system, system-ui, sans-serif; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 120ms ease; }
.nxd-tabs button:active { transform: scale(0.97); }
.nxd-tabs button img { width: 16px; height: 16px; opacity: 0.55; transition: opacity 160ms ease; }
.nxd-tabs button[aria-pressed="true"] { background: rgba(255,255,255,0.12); color: #fff; }
.nxd-tabs button[aria-pressed="true"] img { opacity: 1; }
.nxd-ai-name { margin-left: auto; padding: 4px 9px; border-radius: 100px; border: 1px dashed rgba(255,217,199,0.55); color: #ffd9c7; font: 400 11.5px/1 var(--f-data); white-space: nowrap; transition: color 300ms ease, border-color 300ms ease; }
.nxd-stage[data-step="2"] .nxd-ai-name { color: #8de8b8; border: 1px solid rgba(141,232,184,0.55); }
.nxd-ai .nxd-user { margin: 14px 18px 0 auto; font-size: 15px; padding: 9px 15px; }
.nxd-ai .nxd-answers { margin: 12px 0 0; padding: 0 20px; }
.nxd-bot p { font-size: 15.5px; line-height: 1.5; }
.nxd-why { margin-top: 10px; padding: 9px 12px; }
.nxd-why span { font-size: 13px; }
.nxd-used { margin-bottom: 8px; }
.nxd-strip { margin-top: 10px; gap: 5px; }
.nxd-strip span { padding: 4px 8px; font-size: 11.5px; }
.nxd-comp { display: flex; align-items: center; gap: 10px; margin: 14px 14px 14px; padding: 8px 8px 8px 16px; font-size: 14.5px; transition: background-color 300ms ease, border-radius 300ms ease; }
.nxd-comp span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxd-send { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.nxd-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nxd-note { margin: 10px 0 0; font: 400 10.5px/1.4 var(--f-data); letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
/* ChatGPT */
.nxd-ai[data-ui="gpt"] { background: #212121; color: #ececec; }
.nxd-ai[data-ui="gpt"] .nxd-user { background: #303030; color: #fff; border-radius: 18px; }
.nxd-ai[data-ui="gpt"] .nxd-comp { background: #303030; border-radius: 26px; color: #a5a5a5; }
.nxd-ai[data-ui="gpt"] .nxd-send { border-radius: 50%; background: #fff; color: #000; }
.nxd-ai[data-ui="gpt"] .cl-ph, .nxd-ai[data-ui="claude"] .gp-ph { display: none; }
/* Claude */
.nxd-ai[data-ui="claude"] { background: #262624; color: #e8e6e3; }
.nxd-ai[data-ui="claude"] .nxd-ai-bar { border-bottom-color: #34332f; }
.nxd-ai[data-ui="claude"] .nxd-user { background: #141413; color: #f1efe9; border-radius: 14px; }
.nxd-ai[data-ui="claude"] .nxd-bot p { font-family: Georgia, "Times New Roman", serif; font-size: 16.5px; color: #e8e6e3; }
.nxd-ai[data-ui="claude"] .nxd-comp { background: #30302e; border: 1px solid #3c3b38; border-radius: 16px; color: #8f8c86; }
.nxd-ai[data-ui="claude"] .nxd-send { border-radius: 9px; background: #c96442; color: #fff; }
.nxd-ai[data-ui="claude"] .nxd-wait i { background: #c96442; }

/* tighter layers so the whole demo stands in one screen */
.nxd-mid { margin: 26px 0; }
.nxd-canon, .nxd-stage[data-step="2"] .nxd-canon { padding: 14px 18px; }
.nxd-rule { padding: 10px 14px; }
.nxd-data { padding: 12px 16px 14px; }
.nxd-data .nxd-layer-k { margin-bottom: 10px; }
.nxd-srcs { gap: 8px; }
.nxd-src { padding: 9px 10px 10px; border-radius: 12px; }
.nxd-src b { font-size: 1.05rem; margin-top: 2px; }
.nxd-rules { margin-top: 8px; }
.nxd-head .nx-h { font-size: clamp(2.3rem, 3.4vw, 3.5rem); line-height: 1.02; }
.nxd-ai[data-ui="gpt"] .nxd-comp { border: 1px solid transparent; }
@media (max-width: 600px) { .nxd-ai-bar { flex-wrap: wrap; row-gap: 8px; } .nxd-ai-name { margin-left: 0; } .nxd-tabs button { padding: 5px 9px; } }

/* a question picked in the brain */
.nxd-strip span.gap { background: rgba(255,217,199,0.12); border-color: rgba(255,217,199,0.45); color: #ffe2d4; }
.nxd-capture { padding: 4px 10px; border-radius: 8px; border: 0; background: #8de8b8; color: #062316; font: 500 12px/1.2 var(--f-read); cursor: pointer; transition: transform 120ms ease, background-color 160ms ease; }
.nxd-capture:hover { background: #a6f0c8; } .nxd-capture:active { transform: scale(0.97); }
.nxd-rule.gap { background: rgba(255,255,255,0.92); }
.nxd-rule.gap .nxd-ok { color: #b4531c; }
.nxd-rule > span:not(.nxd-ok) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; line-height: 1.45; }
.nxd-stage.is-gap[data-step="2"] .nxd-src { opacity: 0.6; }
.nxd-stage.is-gap[data-step="2"] .nxd-src[data-src="2"] { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.12); }
.nxd-src b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxd-src-f { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; }
.op-hint { margin: 10px 0 0; font: 400 13px/1.4 var(--f-read); color: var(--text-2); }
.nxd-pick { justify-self: start; font: 400 13px/1.3 var(--f-data); letter-spacing: 0.04em; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 4px; transition: color 160ms ease; }
.nxd-pick:hover { color: #fff; }
.nxd-rule small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v10: the window looks like the real apps, Canon IQ shows up as a tool with our mark, and the steps keep playing */
.nxd-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nxd-top .nxd-tabs { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; }
.nxd-top .nxd-tabs button { color: rgba(255,255,255,0.75); }
.nxd-top .nxd-tabs button[aria-pressed="true"] { background: #fff; color: #1f2160; }
.nxd-top .nxd-tabs button[aria-pressed="true"] img[src*="chatgpt"] { filter: invert(1); }
.nxd-top .nxd-ai-name { background: rgba(20,20,80,0.35); }
.nxd-ai[data-ui="gpt"] .cl-only, .nxd-ai[data-ui="claude"] .gp-only { display: none; }
.nxd-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nxd-app-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.nxd-sp { flex: 1; }
.nxd-gp-word { display: inline-flex; align-items: center; gap: 2px; font: 600 16px/1 ui-sans-serif, -apple-system, system-ui, sans-serif; color: #fff; }
.nxd-gp-word .nxd-i { width: 16px; height: 16px; color: #9a9a9a; }
.nxd-cl-word { display: inline-flex; align-items: center; gap: 8px; font: 500 19px/1 Georgia, "Times New Roman", serif; color: #f1efe9; letter-spacing: -0.01em; }
.nxd-star { width: 22px; height: 22px; }
.nxd-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 10.5px/1 ui-sans-serif, system-ui, sans-serif; background: #3a3a3a; color: #e8e8e8; }
.nxd-ai[data-ui="claude"] .nxd-av { background: #3d3c39; }
.nxd-ai[data-ui="claude"] .nxd-app-head { border-bottom-color: #34332f; }
/* tool calls, as the apps show them */
.nxd-tool { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-bottom: 10px; padding: 5px 11px 5px 5px; border-radius: 10px; font-size: 13px; color: #cfcfcf; background: #1a1a1a; border: 1px solid #2c2c2c; }
.nxd-tool em { font-style: normal; opacity: 0.6; }
.nxd-tool.plain { padding-left: 9px; }
.nxd-tool.plain .nxd-i { width: 15px; height: 15px; opacity: 0.7; }
.nxd-ai[data-ui="claude"] .nxd-tool { background: #30302e; border-color: #3c3b38; color: #d8d5cf; }
.nxd-ai .cn-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #4e54db; flex: none; }
.nxd-ai .cn-ico svg { width: 15px; height: 15px; }
/* the Canon IQ card under the answer */
.nxd-cn { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: #171717; border: 1px solid #2c2c2c; }
.nxd-ai[data-ui="claude"] .nxd-cn { background: #30302e; border-color: #3c3b38; }
.nxd-cn > div { min-width: 0; flex: 1; }
.nxd-cn b { display: block; font: 600 14px/1.3 ui-sans-serif, -apple-system, system-ui, sans-serif; color: #fff; }
.nxd-cn .st { display: block; margin-top: 2px; font-size: 12px; color: #6fdc9f; }
.nxd-cn.gap .st { color: #f0b860; }
.nxd-cn dl { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 4px 18px; margin: 8px 0 0; font-size: 12.5px; }
.nxd-cn dl div { display: grid; gap: 1px; min-width: 0; }
.nxd-cn dt { opacity: 0.55; font-size: 11.5px; } .nxd-cn dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e6e6e6; }
.nxd-cn .nxd-capture { margin-top: 8px; }
.nxd-layer-k b .cn-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; border-radius: 6px; background: #4e54db; }
.nxd-layer-k b .cn-ico svg { width: 14px; height: 14px; }
/* composers */
.nxd-comp { gap: 8px; padding: 7px 7px 7px 12px; }
.nxd-comp > .nxd-i { color: #b4b4b4; }
.nxd-comp .gp-only { display: inline-grid; color: #b4b4b4; }
.nxd-model { font-size: 13px; color: #a9a6a0; white-space: nowrap; }
.nxd-ai[data-ui="gpt"] .nxd-send { width: 34px; height: 34px; background: #fff; color: #000; }
.nxd-ai[data-ui="gpt"] .nxd-send .nxd-i { width: 17px; height: 17px; }
.nxd-ai[data-ui="claude"] .nxd-send { width: 32px; height: 32px; }
.nxd-send .gp-only, .nxd-send .cl-only { display: grid; place-items: center; color: inherit; }
.nxd-send > svg { display: none; }
@media (max-width: 600px) { .nxd-model { display: none; } .nxd-cn dl { grid-template-columns: minmax(0, 1fr); } .nxd-top { flex-wrap: wrap; } }
/* it keeps playing */
.nxd-auto { display: flex; align-items: center; gap: 9px; margin: 0 0 -12px; font: 400 12px/1.3 var(--f-data); letter-spacing: 0.04em; color: var(--text-2); }
.nxd-live { width: 7px; height: 7px; border-radius: 50%; background: #8de8b8; box-shadow: 0 0 0 0 rgba(141,232,184,0.6); animation: nxdLive 1.8s ease-out infinite; }
@keyframes nxdLive { 0% { box-shadow: 0 0 0 0 rgba(141,232,184,0.55); } 100% { box-shadow: 0 0 0 9px rgba(141,232,184,0); } }
.nxd-grid.held .nxd-live { animation-play-state: paused; background: #ffd9c7; }
.nxd-bar { grid-column: 1 / -1; display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; opacity: 0; transition: opacity 200ms ease; }
.nxd-card[aria-pressed="true"] .nxd-bar { opacity: 1; }
.nxd-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.nxd-card:nth-child(2) .nxd-bar i { background: #ffd9c7; } .nxd-card:nth-child(3) .nxd-bar i { background: #8de8b8; }
@keyframes nxdBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nxd-grid.held .nxd-bar i { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .nxd-bar, .nxd-auto { display: none; } }
.nxd-app-head { height: 48px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.nxd-cn > div { min-height: 78px; }
.nxd-mid { margin: 18px 0; }
.nxd-comp { height: 50px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.nxd-cn > div { min-height: 84px; }
.nxd-comp span { flex: none; }
.nxd-comp .gp-ph, .nxd-comp .cl-ph { flex: 1; min-width: 0; }
.nxd-ai[data-ui="gpt"] .nxd-comp .cl-ph, .nxd-ai[data-ui="claude"] .nxd-comp .gp-ph, .nxd-ai[data-ui="gpt"] .nxd-comp .cl-only, .nxd-ai[data-ui="claude"] .nxd-comp .gp-only { display: none; }
.nxd-auto { max-width: none; }

/* v11: the stream, our own way. Loose versions fly out of the places they live, pile up in the Canon IQ gate,
   the owner signs off, and one approved answer goes out to every AI. */
.nxf { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(300px, 380px) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; max-width: 1240px; margin: 64px auto 0; }
.nxf-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
/* sources: a loose cluster, not a column */
.nxf-src { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; justify-items: center; }
.nxf-s { display: grid; justify-items: center; gap: 8px; transition: transform 400ms cubic-bezier(0.23,1,0.32,1); }
.nxf-s:nth-child(even) { transform: translateY(34px); }
.nxf-s:nth-child(3n) { margin-left: 28px; }
.nxf-s .nxf-logo, .nxf-s .glyph { box-sizing: border-box; width: 68px; height: 68px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 18px 40px -18px rgba(10,10,60,0.6); transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms cubic-bezier(0.23,1,0.32,1); }
.nxf-logo.glyph { display: grid; place-items: center; color: #fff; }
.nxf-logo.glyph .ic { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nxf-s small { font: 400 11.5px/1.2 var(--f-data); letter-spacing: 0.06em; color: var(--text-2); text-align: center; }
.nxf-s.emit .nxf-logo { border-color: #ffd9c7; transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 6px rgba(255,217,199,0.16), 0 0 34px rgba(255,217,199,0.45); }
/* the gate */
.nxf-gate { position: relative; z-index: 2; display: grid; grid-template-areas: "h" "q" "pile" "st"; grid-template-rows: auto auto 236px auto; gap: 12px; padding: 20px; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 8px rgba(255,255,255,0.05), 0 50px 100px -40px rgba(10,10,60,0.7); }
.nxf-gate-h { grid-area: h; display: flex; align-items: center; gap: 10px; }
.nxf-gate-h b { font: 500 13px/1 var(--f-data); letter-spacing: 0.28em; color: #fff; }
.nxf-cn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; }
.nxf-cn svg { width: 18px; height: 18px; }
.nxf-ex { margin-left: auto; font: 400 10px/1 var(--f-data); letter-spacing: 0.18em; color: var(--text-2); }
.nxf-q { grid-area: q; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(20,20,80,0.3); font: 400 15px/1.35 var(--f-read); color: #fff; min-height: 1.35em; }
.nxf-pile, .nxf-card { grid-area: pile; }
.nxf-pile { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.nxf-frag { display: grid; gap: 2px; padding: 9px 13px; border-radius: 13px; background: rgba(255,217,199,0.13); border: 1px dashed rgba(255,217,199,0.6); color: #fff; transition: transform 700ms cubic-bezier(0.77,0,0.175,1), opacity 500ms ease, filter 500ms ease; }
.nxf-frag b { font: 500 14.5px/1.25 var(--f-read); }
.nxf-frag small { font: 400 11px/1.2 var(--f-data); color: #ffd9c7; letter-spacing: 0.03em; }
.nxf-frag.wait { visibility: hidden; }
.nxf-pile.merge .nxf-frag { opacity: 0; filter: blur(6px); }
.nxf-card { align-self: center; display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: #fff; color: #1f2160; box-shadow: 0 0 0 6px rgba(141,232,184,0.18), 0 30px 60px -20px rgba(10,10,60,0.6); opacity: 0; transform: scale(0.92); transition: opacity 500ms ease, transform 600ms cubic-bezier(0.23,1,0.32,1); }
.nxf-card.show { opacity: 1; transform: none; }
.nxf-ok { font: 400 11px/1 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase; color: #1e874b; }
.nxf-t { font: 500 1.15rem/1.25 var(--f-read); }
.nxf-ca { font: 400 15px/1.4 var(--f-read); }
.nxf-cm { font: 400 11.5px/1.3 var(--f-data); color: #6b6e8a; }
.nxf-status { grid-area: st; margin: 0; min-height: 1.3em; font: 400 12.5px/1.3 var(--f-data); letter-spacing: 0.03em; color: var(--text-2); transition: color 300ms ease; }
.nxf-status.warn { color: #ffd9c7; } .nxf-status.ok { color: #8de8b8; }
/* the AIs that get the answer */
.nxf-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nxf-o { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); transition: border-color 400ms ease, background-color 400ms ease, box-shadow 400ms ease; }
.nxf-o:nth-child(2) { margin-left: 22px; } .nxf-o:nth-child(3) { margin-left: 44px; } .nxf-o:nth-child(4) { margin-left: 22px; }
.nxf-o-h { display: flex; align-items: center; gap: 10px; }
.nxf-o-h .nxf-logo { width: 24px; height: 24px; }
.nxf-o-h .glyph { width: 24px; height: 24px; } .nxf-o-h .glyph .ic { width: 22px; height: 22px; }
.nxf-o-h b { font: 500 14px/1 var(--f-read); }
.nxf-bub { display: grid; gap: 3px; margin: 9px 0 0; padding: 9px 12px; min-height: 44px; border-radius: 4px 14px 14px 14px; background: rgba(20,20,80,0.28); }
.nxf-a { font: 400 14px/1.4 var(--f-read); color: #fff; min-height: 1.4em; }
.nxf-m { font: 400 11px/1.2 var(--f-data); color: #8de8b8; min-height: 1.2em; }
.nxf-bub:not(.full) .nxf-a { background: linear-gradient(90deg, rgba(255,255,255,0.18) 0 70%, transparent 70%); border-radius: 6px; height: 10px; min-height: 0; margin: 4px 0; }
.nxf-bub:not(.full) .nxf-m { width: 40%; height: 8px; min-height: 0; border-radius: 6px; background: rgba(141,232,184,0.25); }
.nxf-o.got { border-color: rgba(141,232,184,0.7); background: rgba(141,232,184,0.1); box-shadow: 0 0 0 5px rgba(141,232,184,0.1); }
.nxf-bub.full .nxf-a, .nxf-bub.full .nxf-m { animation: nxdIn 450ms cubic-bezier(0.23,1,0.32,1) both; }
/* flying bits */
.nxf-fly { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; }
.nxf-fly.frag { padding: 7px 12px; border-radius: 12px; background: rgba(255,217,199,0.95); color: #3b1d0d; font: 500 13px/1.2 var(--f-read); box-shadow: 0 12px 30px -10px rgba(10,10,60,0.5); }
.nxf-fly.ans { padding: 6px 11px; border-radius: 100px; background: #8de8b8; color: #062316; font: 500 12.5px/1.2 var(--f-read); box-shadow: 0 0 24px rgba(141,232,184,0.6); }
@media (max-width: 1000px) {
  .nxf { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
  .nxf-src { grid-template-columns: repeat(6, auto); justify-content: center; gap: 10px; }
  .nxf-s:nth-child(even) { transform: translateY(14px); } .nxf-s:nth-child(3n) { margin-left: 0; }
  .nxf-s .nxf-logo, .nxf-s .glyph { width: 50px; height: 50px; padding: 12px; border-radius: 15px; }
  .nxf-s small { display: none; }
  .nxf-gate { grid-template-rows: auto auto 228px auto; }
  .nxf-out { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nxf-o:nth-child(n) { margin-left: 0; }
  .nxf-a { font-size: 13px; }
}
.nxf-bub { height: 66px; box-sizing: border-box; align-content: center; }
.nxf-bub.full .nxf-a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
@media (max-width: 1000px) { .nxf-bub { height: 84px; } .nxf-bub.full .nxf-a { -webkit-line-clamp: 3; } }

/* v13: the stream plays twice per question. Without Canon IQ every AI grabs its own version;
   with Canon IQ the gate collects them, the owner signs off, and every AI says the same. */
.nxf-gate { grid-template-areas: "h" "mode" "q" "pile" "st"; grid-template-rows: auto auto auto 236px auto; }
.nxf-mode { grid-area: mode; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 100px; background: rgba(20,20,80,0.32); border: 1px solid rgba(255,255,255,0.18); }
.nxf-mode::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 100px; background: #ffd9c7; transition: transform 500ms cubic-bezier(0.77,0,0.175,1), background-color 400ms ease; }
.nxf[data-mode="1"] .nxf-mode::before { transform: translateX(100%); background: #8de8b8; }
.nxf-mode span { position: relative; z-index: 1; padding: 7px 8px; text-align: center; font: 500 12.5px/1.1 var(--f-read); color: rgba(255,255,255,0.75); transition: color 300ms ease; }
.nxf[data-mode="0"] .nxf-mode .m0 { color: #3b1d0d; } .nxf[data-mode="1"] .nxf-mode .m1 { color: #062316; }
.nxf-bypass { grid-area: pile; align-self: center; justify-self: center; margin: 0; padding: 10px 16px; max-width: 26ch; text-align: center; border-radius: 16px; border: 1px dashed rgba(255,217,199,0.6); color: #ffd9c7; font: 400 13px/1.45 var(--f-data); opacity: 0; transition: opacity 400ms ease; }
.nxf[data-mode="0"] .nxf-bypass { opacity: 1; }
.nxf[data-mode="0"] .nxf-gate { background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); border-style: dashed; border-color: rgba(255,255,255,0.35); }
.nxf-gate { transition: background-color 400ms ease, border-color 400ms ease; }
.nxf-o.bad { border-color: rgba(255,176,163,0.75); background: rgba(255,176,163,0.1); }
.nxf-o.bad .nxf-m { color: #ffb0a3; }
.nxf-fly.wrong { padding: 7px 12px; border-radius: 12px; background: #ffb0a3; color: #3b0d06; font: 500 13px/1.2 var(--f-read); box-shadow: 0 12px 30px -10px rgba(10,10,60,0.5); }
@media (max-width: 1000px) { .nxf-gate { grid-template-rows: auto auto auto 228px auto; } }