/* cnemai.com homepage — exported from the Claude Design canvas "cnemai Homepage"
   (project/Main.dc.html). Most styling is inline in index.html, as in the design;
   this file holds the page-wide rules, the media queries and the scroll effect. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible { outline: 2px solid #ededee; outline-offset: 2px; }
img, video { max-width: 100%; }

body{margin:0;background:#0a0a0b}
a{color:#ededee}a:hover{color:#ffffff}
.tc-navlinks{display:flex}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] .tc-faq-plus{transform:rotate(45deg)}
input::placeholder{color:#8a8a90}
@media (max-width:760px){.tc-navlinks{display:none}.tc-hdr{grid-template-columns:auto auto !important;justify-content:space-between}.tc-hdr-r{grid-column:auto !important}}
.tc-tl-track{view-timeline:--tonys block}
@supports (animation-timeline: view()){
.tc-tl-spacer{height:720px}
.tc-tl-pin{position:sticky;top:64px}
.tc-tl{animation:tcTlIn linear both;animation-timeline:--tonys;animation-range:entry 0% entry 90%}
.tc-tl-playhead{display:block !important;animation:tcPlay linear both;animation-timeline:--tonys;animation-range:contain 5% contain 95%}
.tc-tl-shot{animation:linear both;animation-timeline:--tonys;animation-range:contain 5% contain 95%}
.tc-tl-s2{animation-name:tcS2}.tc-tl-s3{animation-name:tcS3}.tc-tl-s4{animation-name:tcS4}
}
@keyframes tcTlIn{from{opacity:.3;transform:translateY(48px) scale(.94)}to{opacity:1;transform:none}}
@keyframes tcPlay{from{left:4.15%}to{left:97.5%}}
@keyframes tcS2{0%,31%{opacity:0}34%,55%{opacity:1}58%,100%{opacity:0}}
@keyframes tcS3{0%,55%{opacity:0}58%,86%{opacity:1}89%,100%{opacity:0}}
@keyframes tcS4{0%,86%{opacity:0}89%,100%{opacity:1}}
.tc-how-progress{display:none}
.tc-how.is-pinned{max-width:none !important;padding:0 !important}
.tc-how.is-pinned .tc-how-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;justify-content:center;gap:clamp(20px,4vh,48px) !important;box-sizing:border-box;padding:24px 0}
.tc-how.is-pinned .tc-how-head{width:100%;max-width:1240px !important;margin:0 auto;padding:0 24px;box-sizing:border-box}
.tc-how.is-pinned .tc-how-row{display:flex !important;width:max-content;gap:24px;padding:0 max(24px,calc((100% - 1240px) / 2 + 24px));will-change:transform}
.tc-how.is-pinned .tc-how-step{flex:0 0 auto;width:min(560px,80vw)}
.tc-how.is-pinned .tc-how-step img{aspect-ratio:auto !important;height:max(140px,min(315px,45vw,calc(100svh - 470px)))}
.tc-how.is-pinned .tc-how-progress{display:block;width:100%;max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box}
@media (max-width:760px){.tc-how.is-pinned .tc-how-pin{padding:16px 0}.tc-how.is-pinned .tc-how-step{width:84vw}.tc-how.is-pinned .tc-how-step img{height:max(120px,min(47vw,calc(100svh - 505px)))}.tc-how.is-pinned .tc-how-step>div{padding:18px 20px 22px !important}.tc-how.is-pinned .tc-how-step h3{font-size:26px !important}}
.tc-laurel path{transition:fill 520ms ease-out,filter 520ms ease-out;transition-delay:calc(var(--i) * 90ms)}
.tc-gold .tc-laurel path{fill:#d9b45a;filter:drop-shadow(0 0 3px rgba(217,180,90,.45))}
@media (prefers-reduced-motion: reduce){.tc-tl-spacer{height:0 !important}.tc-tl-pin{position:static !important}.tc-tl,.tc-tl-playhead,.tc-tl-shot{animation:none !important}.tc-tl-playhead{display:none !important}.tc-tl-shot{opacity:0 !important}.tc-laurel path{transition:none !important}}

/* DNA views */
.tc-dna-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer; min-height: 44px; background: transparent;
  color: #ededee; font-family: 'Manrope', system-ui, sans-serif; }
.tc-dna-tab[aria-pressed="true"] { background: #19191c; color: #c0a6e8; }
.tc-dna-tab:hover { background: #141416; }
.tc-dna-tab[aria-pressed="true"]:hover { background: #19191c; }
.tc-dna-label { font-size: 16px; font-weight: 600; }
.tc-dna-desc { font-size: 14px; font-weight: 400; color: #9a9a9d; }
#dna-img { transition: opacity 220ms ease; }
#dna-img.is-swapping { opacity: 0; }

/* The demos ship behind a flag (Norik, 2026-10-21: "put the demo behind a feature flag, we wont
   be ready to ship this"). src/app/page.tsx sets data-demos from HOME_DEMOS at build; off, the
   page is the one live before the demos (the two screenshots); ?demo=1 turns them on locally. */
[data-demos="off"] .tc-demo-on { display: none !important; }
[data-demos="on"] .tc-demo-off { display: none !important; }

/* The Copilot demo in "Direct in chat" (design/copilot-demo.js plays it). A drawing of the
   app: the Copilot panel on the left, the page it's working on to the right. */
.tc-cp-frame { position: relative; display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); height: clamp(520px, 50vw, 620px);
  background: #0e0e10; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 40px 120px -40px rgba(192,166,232,0.22);
  font-family: 'Manrope', system-ui, sans-serif; color: #ededee; text-align: left; }
.tc-cp-frame * { box-sizing: border-box; }

/* The Copilot panel */
.tc-cp-chat { display: flex; flex-direction: column; min-height: 0; padding: 14px 14px 14px; background: #0b0b0c; border-right: 1px solid rgba(255,255,255,0.06); }
.tc-cp-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px 4px 12px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px); }
.tc-cp-log > * { flex: none; }
.tc-cp-log > :first-child { margin-top: auto !important; }
.tc-cp-you { align-self: flex-end; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 14px; background: #1d1d21; font-size: 13.5px; line-height: 1.45; color: #ededee; animation: tcCpIn 260ms ease both; }
.tc-cp-say { margin: 0; font-size: 13.5px; line-height: 1.55; color: #d4d4d7; min-height: 1.55em; }
.tc-cp-say.is-thinking::after { content: ""; display: inline-block; width: 22px; height: 6px; vertical-align: middle;
  background: radial-gradient(circle, #8a8a90 2px, transparent 2.5px) 0 50% / 8px 6px repeat-x; animation: tcCpDots 900ms steps(3, end) infinite; }
.tc-cp-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #141416; animation: tcCpIn 260ms ease both; }
.tc-cp-card-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a90; }
.tc-cp-card-k b { font-weight: 500; color: #c9c9cc; }
.tc-cp-ok { font-size: 12.5px; color: #c9c9cc; display: flex; align-items: center; gap: 6px; }
.tc-cp-ok::before { content: "✓"; color: #9fd0c4; }
.tc-cp-ok .tc-cp-open { margin-left: auto; color: #c0a6e8; }
.tc-cp-bar-p { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tc-cp-bar-p i { display: block; height: 100%; width: 0; background: #c0a6e8; transition: width 2400ms cubic-bezier(.3,.1,.3,1); }
.tc-cp-card-thumb { width: 124px; aspect-ratio: 16 / 9; border-radius: 8px; background: #1d1d21 center / cover; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7); }
.tc-cp-sfx { display: flex; align-items: center; gap: 10px; }
.tc-cp-sfx .tc-cp-play { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #1f1f23; display: grid; place-items: center; font-size: 9px; color: #ededee; }
.tc-cp-sfx span:last-child { font-size: 13px; }

.tc-cp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 10px; min-height: 40px; }
.tc-cp-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; padding: 6px 10px; border-radius: 8px; background: #17171a; color: #b0b0b2; white-space: nowrap; }
.tc-cp-chip.is-film { background: #1d1826; color: #c0a6e8; }
.tc-cp-chip.is-land { background: #131c19; color: #9fd0c4; }
.tc-cp-composer { border-radius: 16px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); padding: 12px 12px 10px; }
.tc-cp-input { min-height: 42px; font-size: 13.5px; line-height: 1.45; color: #ededee; }
.tc-cp-typed:not(:empty)::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: #c0a6e8; animation: tcCpBlink 1s steps(1) infinite; }
.tc-cp-typed:not(:empty) + .tc-cp-ph { display: none; }
.tc-cp-ph { color: #6c6c72; }
.tc-cp-bar { display: flex; align-items: center; gap: 6px; }
.tc-cp-btn { width: 30px; height: 30px; border-radius: 50%; background: #1d1d21; display: grid; place-items: center; font-size: 14px; color: #b0b0b2; }
.tc-cp-model { margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: #ededee; padding-right: 6px; }
.tc-cp-model small { font-size: 10px; color: #8a8a90; }
.tc-cp-send { width: 32px; height: 32px; border-radius: 50%; background: #3a3a3f; display: grid; place-items: center; font-size: 14px; color: #0b0b0c; transition: background 180ms ease, transform 180ms ease; }
.tc-cp-send.is-on { background: #ededee; transform: scale(1.08); }

/* The page beside it */
.tc-cp-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 26px 28px; }
.tc-cp-stage > * { animation: tcCpFade 360ms ease both; }
.tc-cp-kick { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a90; }
.tc-cp-title { margin: 4px 0 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; color: #f4f4f5; }
.tc-cp-sub { margin: 4px 0 0; font-size: 13.5px; color: #9a9a9d; }

/* Scene: the shot list */
.tc-cp-shots { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.tc-cp-shots li { display: grid; grid-template-columns: 26px 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06);
  opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 320ms ease, background 600ms ease; }
.tc-cp-shots li.is-in { opacity: 1; transform: none; }
.tc-cp-shots li.is-hit { background: rgba(192,166,232,0.09); }
.tc-cp-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #c0a6e8; }
.tc-cp-ph-thumb { aspect-ratio: 16 / 9; border-radius: 6px; border: 1px dashed rgba(255,255,255,0.14); display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #6c6c72; }
.tc-cp-shots b { display: block; font-size: 13.5px; font-weight: 600; color: #ededee; }
.tc-cp-shots small { display: block; font-size: 12.5px; color: #9a9a9d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cp-meta { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #b0b0b2; white-space: nowrap; line-height: 1.6; }
.tc-cp-meta em { font-style: normal; color: #8a8a90; display: block; }
.tc-cp-total { margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #8a8a90; text-align: right; min-height: 1.6em; }

/* Shot: player and takes */
.tc-cp-shot { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 22px; }
.tc-cp-shot-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tc-cp-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #141416; }
.tc-cp-player img, .tc-cp-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms ease; }
.tc-cp-player video { opacity: 0; }
.tc-cp-player.is-take video { opacity: 1; }
.tc-cp-tag { position: absolute; left: 10px; top: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(10,10,11,0.7); color: #ededee; }
.tc-cp-cast { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #b0b0b2; }
.tc-cp-face { width: 26px; height: 26px; border-radius: 50%; background: #1d1d21 left center / auto 100%; }
.tc-cp-takes { display: flex; flex-direction: column; gap: 12px; padding-top: 46px; }
.tc-cp-take { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #141416 center / cover; }
.tc-cp-take span { position: absolute; left: 6px; top: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; background: rgba(10,10,11,0.7); }
.tc-cp-take.is-rendering { background: linear-gradient(100deg, #141416 30%, #202024 50%, #141416 70%) 0 0 / 300% 100%; animation: tcCpShimmer 1.4s linear infinite; }
.tc-cp-take.is-picked { box-shadow: 0 0 0 2px #ededee; }
.tc-cp-take.is-new { animation: tcCpIn 300ms ease both; }

/* Sound and Cut: the timeline */
.tc-cp-tl { height: 100%; display: flex; flex-direction: column; gap: 14px; }
.tc-cp-tl .tc-cp-player { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; align-self: center; width: auto; height: 100%; max-width: 100%; }
.tc-cp-tl .tc-cp-player::before { content: ""; display: block; height: 100%; aspect-ratio: 16 / 9; }
.tc-cp-lanes { flex: none; display: grid; grid-template-columns: 50px minmax(0, 1fr); row-gap: 6px; position: relative; }
.tc-cp-heads { position: absolute; top: 0; bottom: 0; left: 50px; right: 0; pointer-events: none; }
.tc-cp-lab { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; color: #6c6c72; align-self: center; }
.tc-cp-track { position: relative; height: 30px; }
.tc-cp-ruler { height: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: #6c6c72; }
.tc-cp-ruler span { position: absolute; top: 0; transform: translateX(-50%); }
.tc-cp-clip { position: absolute; top: 0; bottom: 0; border-radius: 5px; overflow: hidden; transition: left 700ms cubic-bezier(.3,.1,.3,1), width 700ms cubic-bezier(.3,.1,.3,1), box-shadow 300ms ease; }
.tc-cp-clip span { position: absolute; left: 6px; bottom: 4px; font-size: 10px; color: #f4f4f5; text-shadow: 0 1px 3px rgba(0,0,0,0.9); white-space: nowrap; }
.tc-cp-clip.is-main { background: #1d1d21 left / auto 100% repeat-x; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6); }
.tc-cp-clip.is-sfx { background: #142a22; box-shadow: inset 0 0 0 1px rgba(159,208,196,0.25); }
.tc-cp-clip.is-sfx svg { position: absolute; inset: 4px 4px 14px; width: calc(100% - 8px); height: calc(100% - 18px); }
.tc-cp-clip.is-sfx span { color: #cfe8e1; bottom: 2px; text-shadow: none; font-size: 9.5px; }
.tc-cp-clip.is-cap { background: #1a1a1d; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.tc-cp-clip.is-cap span { color: #d4d4d7; text-shadow: none; bottom: 8px; font-style: italic; }
.tc-cp-clip.is-hit { box-shadow: inset 0 0 0 1.5px #c0a6e8; }
.tc-cp-clip.is-drop { animation: tcCpDrop 380ms cubic-bezier(.2,.9,.3,1.2) both; }
.tc-cp-head { position: absolute; top: -20px; bottom: 0; width: 2px; margin-left: -1px; background: #e54343; box-shadow: 0 0 10px rgba(229,67,67,0.6); transition: left 600ms cubic-bezier(.3,.1,.3,1); }
.tc-cp-head::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e54343; }

/* The four tabs */
.tc-cp-tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tc-cp-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: #ededee; font-family: 'Manrope', system-ui, sans-serif; text-align: left; overflow: hidden; }
.tc-cp-tab:hover { background: #141416; }
.tc-cp-tab[aria-pressed="true"] { background: #19191c; color: #c0a6e8; }
.tc-cp-tab-label { font-size: 15px; font-weight: 600; }
.tc-cp-tab-desc { font-size: 13px; color: #9a9a9d; }
.tc-cp-tab::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: #c0a6e8; transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; }
.tc-cp-tab[aria-pressed="true"]::after { opacity: 0.6; }

@keyframes tcCpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tcCpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcCpDots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -34% 0 0); } }
@keyframes tcCpBlink { 50% { opacity: 0; } }
@keyframes tcCpShimmer { to { background-position: -150% 0; } }
@keyframes tcCpDrop { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .tc-cp-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 400px; height: auto; }
  .tc-cp-frame .tc-cp-chat { order: 2; border-right: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .tc-cp-stage { order: 1; aspect-ratio: 16 / 11; padding: 18px; }
  .tc-cp-title { font-size: 24px; }
  .tc-cp-shots li { grid-template-columns: 22px 64px minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; }
  .tc-cp-shots small { display: none; }
  .tc-cp-shot { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
  .tc-cp-takes { padding-top: 40px; }
  .tc-cp-tab { min-width: 0; flex: 1 1 40%; }
}
@media (max-width: 520px) {
  .tc-cp-stage { aspect-ratio: 4 / 4.2; }
  .tc-cp-shot { grid-template-columns: minmax(0, 1fr); }
  .tc-cp-takes { flex-direction: row; padding-top: 0; }
  .tc-cp-take { flex: 1; }
  .tc-cp-lanes { grid-template-columns: 0 minmax(0, 1fr); }
  .tc-cp-heads { left: 0; }
  .tc-cp-lab { visibility: hidden; }
  .tc-cp-tab-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-cp-frame *, .tc-cp-stage > * { animation: none !important; transition: none !important; }
}

/* "Talk to it like your crew": the panel alone, and the ask it's playing lit in the list */
.tc-cp-solo { height: 560px; border-radius: 18px; border-right: 0; font-family: 'Manrope', system-ui, sans-serif; color: #ededee; text-align: left;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 40px 120px -40px rgba(192,166,232,0.22); }
.tc-cp-solo * { box-sizing: border-box; }
.tc-crew-say li { transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.tc-crew-say li.is-lit { background: #19191c !important; color: #c0a6e8 !important; box-shadow: inset 0 0 0 1px rgba(192,166,232,0.3); }
@media (prefers-reduced-motion: reduce) { .tc-cp-solo * { animation: none !important; transition: none !important; } }

/* @ mentions: the chip in the ask, and the picker over the composer */
.tc-cp-composer { position: relative; }
.tc-cp-at { color: #c0a6e8; background: rgba(192,166,232,0.14); border-radius: 5px; padding: 0 4px; }
.tc-cp-you .tc-cp-at { background: rgba(192,166,232,0.18); }
.tc-cp-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 54px); padding: 8px; border-radius: 14px; background: #161618;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 24px 60px rgba(0,0,0,0.6); animation: tcCpIn 180ms ease both; z-index: 2; }
.tc-cp-menu-k { margin: 6px 8px 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a90; }
.tc-cp-menu-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 9px; font-size: 13px; color: #ededee; }
.tc-cp-menu-row.is-on { background: #222226; }
.tc-cp-menu-row.is-picked { background: rgba(192,166,232,0.2); }
.tc-cp-menu-th { width: 24px; height: 24px; border-radius: 6px; background: #222226 center / cover; }
.tc-cp-menu-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cp-menu-t { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: #8a8a90; }

/* Sheets pinned by a mention, over the ask; the first is the still the shot opens on */
.tc-cp-refs { display: flex; gap: 8px; margin-bottom: 10px; overflow: hidden; }
.tc-cp-ref { position: relative; flex: none; height: 58px; border-radius: 9px; overflow: hidden; background: #1d1d21; animation: tcCpIn 240ms ease both; }
.tc-cp-ref img { display: block; height: 100%; width: auto; }
.tc-cp-ref .tc-cp-tag { top: auto; bottom: 5px; left: 5px; font-size: 9px; padding: 3px 5px; }

/* "Your turn": the live demo. Hidden until the app says it's on (design/copilot-demo.js). */
.tc-try { display: flex; flex-direction: column; gap: 24px; }
.tc-try[hidden] { display: none; }
.tc-try-body { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; font-family: 'Manrope', system-ui, sans-serif; color: #ededee; }
.tc-try-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.tc-try-cast { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tc-try-pick { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #1d1d21; aspect-ratio: 1 / 1; opacity: 0.55; transition: opacity 160ms ease, box-shadow 160ms ease; }
.tc-try-pick img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.tc-try-pick[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #c0a6e8; }
.tc-try-pick:hover { opacity: 0.9; }
.tc-try-n { position: absolute; left: 6px; top: 6px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; background: #c0a6e8; color: #0a0a0b; }
.tc-try-n:empty { display: none; }
.tc-try-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 12px; font-weight: 600; text-align: left; color: #f4f4f5; background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.tc-try-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tc-try-ask { width: 100%; box-sizing: border-box; resize: none; border: 0; outline: 0; background: transparent; color: #ededee; font: 15px/1.45 'Manrope', system-ui, sans-serif; padding: 4px 2px; }
.tc-try-ask::placeholder { color: #6c6c72; }
.tc-try-bar { display: flex; align-items: center; gap: 10px; }
.tc-try-note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #8a8a90; }
.tc-try-send { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: #ededee; color: #0a0a0b; font-size: 17px; }
.tc-try-send:disabled { background: #3a3a3f; cursor: default; }
.tc-try-msg { margin: 0; min-height: 1.4em; font-size: 13.5px; color: #c9c9cc; }
.tc-try-msg.is-error { color: #f0a8a8; }
.tc-try-out { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tc-try-player { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #141416; }
.tc-try-player img, .tc-try-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-try-player video[hidden] { display: none; }
.tc-try-player.is-busy img { opacity: 0.35; filter: blur(2px); transition: opacity 400ms ease, filter 400ms ease; }
.tc-try-tag { position: absolute; left: 12px; top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(10,10,11,0.7); color: #ededee; }
.tc-try-card { display: flex; flex-direction: column; gap: 10px; }
.tc-try-card[hidden] { display: none; }
.tc-try-k { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a90; }
.tc-try-k b { font-weight: 500; color: #c9c9cc; }
.tc-try-dots { animation: tcCpBlink 1.2s steps(1) infinite; }
.tc-try-card.is-done .tc-try-dots { display: none; }
.tc-try-sum { margin: 0; font-size: 15px; color: #ededee; }
.tc-try-prompt { margin: 0; max-height: 132px; overflow: auto; padding: 12px 14px; border-radius: 12px; background: #141416; font: 13px/1.5 'Manrope', system-ui, sans-serif; color: #b0b0b2; white-space: pre-wrap; }
.tc-try-progress { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.tc-try-progress i { display: block; height: 100%; width: 0; background: #ededee; transition: width 1s linear; }
@media (max-width: 860px) { .tc-try-body { grid-template-columns: minmax(0, 1fr); } }

/* A take while it renders, as the app's card draws it: the model, Generating · N%, an empty
   frame, the prompt's first line, the estimate and a bar; the frame fills when it's saved. */
.tc-cp-gen-frame { width: 100%; max-width: 260px; aspect-ratio: 16 / 9; border-radius: 9px; background: #19191c center / cover; transition: box-shadow 300ms ease; }
.tc-cp-gen-frame.is-saved { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7); animation: tcCpFade 400ms ease both; }
.tc-cp-gen-line { font-size: 12.5px; color: #b0b0b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-cp-gen-est { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #8a8a90; }
.tc-cp-gen-dots { animation: tcCpBlink 1.2s steps(1) infinite; }
.tc-cp-gen-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.tc-cp-gen-bar i { display: block; height: 100%; width: 0; background: #ededee; }
.tc-try-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tc-try-place { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #1d1d21; aspect-ratio: 16 / 11; opacity: 0.55; transition: opacity 160ms ease, box-shadow 160ms ease; }
.tc-try-place img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-try-place[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #c0a6e8; }
.tc-try-place:hover { opacity: 0.9; }
.tc-try-place .tc-try-name { font-size: 10.5px; padding: 10px 5px 4px; }
.tc-try-any { position: absolute; inset: 0 0 18px; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #c0a6e8; }
.tc-try-prop img { object-position: 45% 50%; }
.tc-try-prop .tc-try-plus { background: rgba(10,10,11,0.7); color: #ededee; }
.tc-try-prop[aria-pressed="true"] .tc-try-plus { background: #c0a6e8; color: #0a0a0b; }


/* Book a demo: the header button and the closing link open this form; the app emails
   the request to the team (tiny.cnemai.com/api/demo-requests). */
.tc-demo { width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px; background: #141416; color: #ededee; font-family: 'Manrope', system-ui, sans-serif; box-sizing: border-box; }
.tc-demo::backdrop { background: rgba(5,5,6,0.72); backdrop-filter: blur(4px); }
.tc-demo[open] { animation: tc-demo-in 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes tc-demo-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tc-demo[open] { animation: none; } }
.tc-demo-form { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px clamp(20px, 5vw, 36px) 28px; }
.tc-demo-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: #9a9a9d; font-size: 26px; line-height: 1; cursor: pointer; }
.tc-demo-x:hover { background: #1d1d20; color: #ededee; }
.tc-demo-k { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #9a9a9d; }
.tc-demo-h { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(30px, 5vw, 40px); line-height: 1.05; color: #f4f4f5; }
.tc-demo-p { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: #b0b0b2; }
.tc-demo-row { display: flex; flex-wrap: wrap; gap: 14px; }
.tc-demo-row > .tc-demo-l { flex: 1 1 180px; }
.tc-demo-l { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #b0b0b2; }
.tc-demo-l em { font-style: normal; font-weight: 400; color: #8a8a90; }
.tc-demo-l input, .tc-demo-l textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  background: #0c0c0e; color: #ededee; font-family: inherit; font-size: 16px; font-weight: 400; resize: vertical; }
.tc-demo-l input:focus, .tc-demo-l textarea:focus { outline: none; border-color: #c0a6e8; }
.tc-demo-l input[aria-invalid="true"] { border-color: #e54343; }
.tc-demo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tc-demo-send { margin-top: 4px; height: 52px; border: 0; border-radius: 999px; background: #ededee; color: #0a0a0b;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.tc-demo-send:disabled { opacity: .6; cursor: default; }
.tc-demo-msg { margin: 0; min-height: 1px; font-size: 15px; line-height: 1.5; color: #ededee; }
.tc-demo-msg:empty { display: none; }
.tc-demo-msg.is-error { color: #f08a8a; }
.tc-demo-form.is-done > :not(.tc-demo-x):not(.tc-demo-k):not(.tc-demo-msg) { display: none; }
.tc-demo-form.is-done .tc-demo-msg { font-size: 18px; }
.tc-hdr-r a { white-space: nowrap; }
@media (max-width: 420px) { .tc-hdr-r { gap: 6px !important; } .tc-hdr-r a { padding: 9px 11px !important; font-size: 13px !important; } }