/* ORION — demonstrações animadas (substituem capturas estáticas). Tudo escala com a largura do próprio quadro (cqw). Requer tokens.css. */

.demo { --f: clamp(9px, 1.5cqw, 15px); container-type: inline-size; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(90% 100% at 50% 0%, #0e1622 0%, #090b0e 72%); color: var(--text-2); font: 400 var(--f) / 1.35 var(--font); user-select: none; -webkit-user-select: none; }
.demo *, .demo *::before, .demo *::after { box-sizing: border-box; }
.demo-quieto *, .demo-quieto *::before, .demo-quieto *::after { transition: none !important; animation: none !important; }
.demo .mono { font-family: var(--mono); }
.demo-leg { position: absolute; right: 1.6cqw; bottom: 1.1cqw; z-index: 5; font-size: max(7px, 1.1cqw); color: var(--dim); pointer-events: none; }

/* ---------- corte automático ---------- */
.da { padding: 3cqw 3.2cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 1.6cqw; }
.da-top { display: flex; justify-content: space-between; align-items: center; }
.da-file { display: flex; align-items: center; gap: 1cqw; color: var(--text); font-weight: 500; }
.da-file i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 1cqw var(--cyan); }
.da-dur { display: inline-flex; gap: .8cqw; align-items: center; padding: .5cqw 1.4cqw; border: 1px solid var(--line-2); border-radius: 99px; font: 500 var(--f) var(--mono); color: var(--text-2); }
.da-dur b { color: var(--text); font-weight: 500; transition: color .4s; }
.da-dur b.ok { color: var(--ok); }
.da-tl { align-self: center; }
.da-ruler { height: 1.4cqw; margin-bottom: 1.2cqw; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 4cqw); opacity: .7; }
.da-trk { position: relative; }
.da-track { display: flex; gap: .4cqw; height: 15cqw; padding: .8cqw; border: 1px solid var(--line-2); border-radius: 1cqw; background: #0b0e13; overflow: hidden; }
.da-seg { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; gap: .35cqw; padding: 0 .8cqw; border-radius: .6cqw; overflow: hidden; transition: flex-grow .9s var(--ease), opacity .6s, margin .9s, padding .9s, background .3s, border-color .3s; }
.da-seg.fala { background: linear-gradient(180deg, rgba(59, 130, 246, .38), rgba(6, 182, 212, .22)); border: 1px solid rgba(59, 130, 246, .55); }
.da-seg.sil { background: rgba(255, 255, 255, .035); border: 1px dashed var(--line-2); }
.da-seg.sil.marcado { background: repeating-linear-gradient(135deg, rgba(248, 113, 113, .38) 0 .8cqw, rgba(248, 113, 113, .12) .8cqw 1.6cqw); border-color: rgba(248, 113, 113, .75); }
.da-seg.cortado { flex-grow: .0001; opacity: 0; padding: 0; margin: 0 -.2cqw; border-width: 0; }
.da-seg i { flex: 1; height: var(--h); min-width: 1px; border-radius: 1px; background: rgba(255, 255, 255, .82); opacity: .8; }
.da-seg.sil i { height: 5%; background: rgba(255, 255, 255, .35); }
.da-ph { position: absolute; top: -1cqw; bottom: -1cqw; left: 0; width: .35cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 0 1.4cqw #fff; opacity: 0; }
.da-ph.on { opacity: 1; transition: left 2.2s linear; }
.da-foot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.da-btn { display: inline-flex; align-items: center; gap: .8cqw; padding: 1cqw 2.2cqw; border: 1px solid rgba(6, 182, 212, .5); border-radius: 99px; background: rgba(6, 182, 212, .12); color: #bdf4ff; font-weight: 500; transition: transform .2s, background .3s, color .3s; }
.da-btn.press { transform: scale(.94); border-color: transparent; background: var(--grad); color: #03121a; }
.da-stats { display: flex; gap: 1cqw; }
.da-stats span { padding: .5cqw 1.4cqw; border: 1px solid rgba(52, 211, 153, .4); border-radius: 99px; background: rgba(52, 211, 153, .08); color: var(--ok); opacity: 0; transform: translateY(1cqw); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.da-stats span.on { opacity: 1; transform: none; }

/* ---------- texto em motion ---------- */
.dm { display: grid; grid-template-rows: auto 1fr; padding: 2.6cqw 3cqw; gap: 2cqw; }
.dm-prompt { display: flex; align-items: center; gap: 1.6cqw; }
.dm-box { flex: 1; min-height: 4.6cqw; display: flex; align-items: center; padding: 0 1.8cqw; border: 1px solid var(--line-2); border-radius: 1cqw; background: #0b0e13; color: var(--text); white-space: nowrap; overflow: hidden; }
.dm-box::after { content: ''; width: .2cqw; height: 1.7cqw; margin-left: .3cqw; background: var(--cyan); animation: dm-caret 1s steps(2) infinite; }
@keyframes dm-caret { 50% { opacity: 0; } }
.dm-btn { padding: 1.1cqw 2.2cqw; border: 1px solid rgba(6, 182, 212, .5); border-radius: 99px; background: rgba(6, 182, 212, .12); color: #bdf4ff; font-weight: 500; white-space: nowrap; transition: transform .2s, background .3s, color .3s; }
.dm-btn.press { transform: scale(.94); border-color: transparent; background: var(--grad); color: #03121a; }
.dm-stage { position: relative; perspective: 70cqw; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 1.4cqw; background: radial-gradient(60% 70% at 50% 55%, rgba(59, 130, 246, .2), transparent 70%), #07090c; overflow: hidden; }
.dm-floor { position: absolute; left: -20%; right: -20%; bottom: -8%; height: 55%; transform: rotateX(68deg); transform-origin: 50% 100%; background: repeating-linear-gradient(90deg, rgba(6, 182, 212, .22) 0 1px, transparent 1px 5cqw), repeating-linear-gradient(0deg, rgba(6, 182, 212, .22) 0 1px, transparent 1px 5cqw); -webkit-mask-image: linear-gradient(0deg, #000, transparent 90%); mask-image: linear-gradient(0deg, #000, transparent 90%); }
.dm-title { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .05em; font: 700 6.6cqw / 1.05 var(--font); letter-spacing: -.02em; color: #eaffff; text-shadow: 0 0 .6cqw rgba(6, 182, 212, .9), 0 0 2.2cqw rgba(59, 130, 246, .8), 0 .7cqw 0 rgba(59, 130, 246, .35); transform-style: preserve-3d; }
.dm-title span { display: inline-block; animation: dm-letra .9s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.dm-title .sp { width: .3em; }
@keyframes dm-letra { from { opacity: 0; transform: translateZ(-60cqw) rotateY(80deg) translateY(4cqw); filter: blur(1cqw); } 60% { opacity: 1; filter: none; } }
.dm-title.glitch { animation: dm-glitch .38s steps(2) 1; }
@keyframes dm-glitch { 0% { transform: translate(0); text-shadow: -.5cqw 0 #f0f, .5cqw 0 #0ff; } 40% { transform: translate(.4cqw, -.2cqw); } 100% { transform: none; } }
.dm-sub { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; color: var(--text-2); font-size: max(8px, 1.7cqw); letter-spacing: .14em; opacity: 0; transition: opacity .6s; }
.dm-sub.on { opacity: 1; }
.dm-tag { position: absolute; top: 1.2cqw; right: 1.4cqw; font: 500 max(7px, 1.2cqw) var(--mono); color: var(--cyan); opacity: .8; }

/* ---------- detecção de setup ---------- */
.ds { background: radial-gradient(70% 80% at 50% 20%, #101b2a, #080a0d 75%); }
.ds-el { position: absolute; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, #1a212c, #10151c); border-radius: .7cqw; }
.ds-mon { left: 20%; top: 11%; width: 46%; height: 40%; border-radius: 1cqw; background: linear-gradient(160deg, #3a2410, #1a1008 50%, #0e1620); }
.ds-mon::after { content: ''; position: absolute; left: 44%; top: 100%; width: 12%; height: 14%; background: #161c25; border: 1px solid rgba(255, 255, 255, .1); }
.ds-pc { left: 72%; top: 15%; width: 14%; height: 44%; }
.ds-pc::before { content: ''; position: absolute; left: 20%; right: 20%; top: 12%; height: 3%; background: #3b82f6; box-shadow: 0 3cqw 0 -0.4cqw #06b6d4; }
.ds-kb { left: 22%; top: 69%; width: 42%; height: 10%; background: repeating-linear-gradient(90deg, #232b37 0 1.4cqw, #151a22 1.4cqw 1.7cqw); }
.ds-ms { left: 70%; top: 70%; width: 5%; height: 9%; border-radius: 1.4cqw; }
.ds-desk { position: absolute; left: 0; right: 0; top: 83%; height: 1px; background: var(--line-2); }
.ds-scan { position: absolute; left: 0; right: 0; top: 0; height: 18%; transform: translateY(-120%); background: linear-gradient(180deg, transparent, rgba(6, 182, 212, .0) 40%, rgba(6, 182, 212, .35)); border-bottom: .2cqw solid #6ee7f9; box-shadow: 0 .8cqw 2.4cqw rgba(6, 182, 212, .5); }
.ds-scan.on { transform: translateY(560%); transition: transform 1.9s linear; }
.ds-bx { position: absolute; opacity: 0; transform: scale(1.12); transition: opacity .3s, transform .5s var(--ease); --c: #67e8f9; background: linear-gradient(var(--c), var(--c)) 0 0 / 1.4cqw .22cqw no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / .22cqw 1.4cqw no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1.4cqw .22cqw no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / .22cqw 1.4cqw no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1.4cqw .22cqw no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / .22cqw 1.4cqw no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1.4cqw .22cqw no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / .22cqw 1.4cqw no-repeat; }
.ds-bx.on { opacity: 1; transform: none; }
.ds-bx b { position: absolute; left: 0; top: 0; transform: translateY(-110%); padding: .3cqw 1cqw; border-radius: .5cqw; background: #0e7490; color: #ecfeff; font: 600 max(7px, 1.25cqw) var(--mono); letter-spacing: .06em; white-space: nowrap; }
.ds-bx::after { content: ''; position: absolute; inset: 0; border: .15cqw solid rgba(103, 232, 249, .0); border-radius: .5cqw; }
.ds-bx.on::after { animation: ds-pulso 1.6s ease-out infinite; }
@keyframes ds-pulso { 0% { box-shadow: 0 0 0 0 rgba(103, 232, 249, .55); } 100% { box-shadow: 0 0 0 1.6cqw rgba(103, 232, 249, 0); } }
.ds-stat { position: absolute; left: 3cqw; bottom: 2.6cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: .8cqw 1.8cqw; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(8, 10, 14, .85); color: var(--text); transition: border-color .3s; }
.ds-stat i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--warn); }
.ds-stat.ok { border-color: rgba(52, 211, 153, .5); }
.ds-stat.ok i { background: var(--ok); }

/* ---------- núcleo de voz ---------- */
.dv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv-status { position: absolute; left: 3cqw; top: 2.6cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: .6cqw 1.6cqw; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(8, 10, 14, .7); color: var(--text); }
.dv-status i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 1cqw var(--cyan); }
.dv-bar { position: absolute; left: 50%; bottom: 3cqw; width: 66%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 2cqw; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(10, 13, 18, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); white-space: nowrap; overflow: hidden; }
.dv-bar svg { flex: none; width: 2.2cqw; height: 2.2cqw; color: var(--cyan); }
.dv-log { position: absolute; right: 3cqw; top: 8cqw; display: grid; gap: .9cqw; justify-items: end; }
.dv-log span { display: inline-flex; gap: .9cqw; align-items: center; padding: .7cqw 1.6cqw; border: 1px solid rgba(52, 211, 153, .35); border-radius: 99px; background: rgba(8, 20, 16, .85); color: #a7f3d0; opacity: 0; transform: translateX(2cqw); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.dv-log span.on { opacity: 1; transform: none; }

/* ---------- mapeamento ---------- */
.dp { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; gap: 1.6cqw; padding: 2.6cqw 3cqw; }
.dp-busca { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4cqw; }
.dp-box { flex: 1; min-height: 4.4cqw; display: flex; align-items: center; padding: 0 1.8cqw; border: 1px solid var(--line-2); border-radius: 1cqw; background: #0b0e13; color: var(--text); white-space: nowrap; overflow: hidden; }
.dp-btn { padding: 1.1cqw 2.2cqw; border: 1px solid rgba(6, 182, 212, .5); border-radius: 99px; background: rgba(6, 182, 212, .12); color: #bdf4ff; font-weight: 500; white-space: nowrap; transition: transform .2s, background .3s, color .3s; }
.dp-btn.press { transform: scale(.94); border-color: transparent; background: var(--grad); color: #03121a; }
.dp-map { position: relative; border: 1px solid var(--line); border-radius: 1.2cqw; overflow: hidden; background: #0a1118; }
.dp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-raio { position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; border: 1px dashed rgba(6, 182, 212, .55); border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: rgba(6, 182, 212, .05); transition: transform .9s var(--ease); }
.dp-raio.on { transform: translate(-50%, -50%) scale(1); }
.dp-pin { position: absolute; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; border-radius: 50%; background: #f472b6; box-shadow: 0 0 1.4cqw #f472b6; opacity: 0; transform: translateY(-4cqw) scale(.4); transition: opacity .3s, transform .5s var(--ease); }
.dp-pin.on { opacity: 1; transform: none; }
.dp-pin.on::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: .2cqw solid #f472b6; animation: dp-onda 1.8s ease-out 1; }
@keyframes dp-onda { to { transform: scale(3.4); opacity: 0; } }
.dp-lista { display: grid; align-content: start; gap: .9cqw; min-height: 0; overflow: hidden; }
.dp-row { display: grid; gap: .1cqw; padding: .9cqw 1.4cqw; border: 1px solid var(--line); border-radius: .9cqw; background: rgba(255, 255, 255, .02); opacity: 0; transform: translateX(2cqw); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.dp-row.on { opacity: 1; transform: none; }
.dp-row b { color: var(--text); font-weight: 500; }
.dp-row span { display: flex; justify-content: space-between; gap: 1cqw; color: var(--muted); font-size: max(7px, 1.3cqw); }
.dp-row em { font-style: normal; color: #fbcfe8; }
.dp-csv { position: absolute; left: 5cqw; bottom: 4.4cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2cqw; border: 1px solid rgba(52, 211, 153, .45); border-radius: 99px; background: rgba(8, 24, 18, .92); color: #a7f3d0; opacity: 0; transform: translateY(2cqw); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.dp-csv.on { opacity: 1; transform: none; box-shadow: 0 0 2.4cqw rgba(52, 211, 153, .35); }

/* ---------- transcritor ---------- */
.dt { display: grid; grid-template-columns: .8fr 1.3fr; gap: 2cqw; padding: 2.6cqw 3cqw; }
.dt-esq { display: grid; grid-template-rows: auto 1fr auto; gap: 1.6cqw; }
.dt-file { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 1.6cqw; border: 1px solid var(--line-2); border-radius: 1cqw; background: #0b0e13; color: var(--text); }
.dt-file span { color: var(--muted); font-family: var(--mono); }
.dt-wave { display: flex; align-items: center; gap: .35cqw; padding: 0 .6cqw; border: 1px solid var(--line); border-radius: 1cqw; background: #090c10; }
.dt-wave i { flex: 1; height: var(--h); max-height: 80%; border-radius: 1cqw; background: rgba(59, 130, 246, .5); transition: background .3s; }
.dt-wave i.tocada { background: var(--cyan); }
.dt-prog { height: .8cqw; border-radius: 1cqw; background: var(--line); overflow: hidden; }
.dt-prog i { display: block; height: 100%; width: 0; background: var(--grad); }
.dt-dir { display: grid; grid-template-rows: 1fr auto; gap: 1.4cqw; min-height: 0; }
.dt-txt { display: grid; align-content: start; gap: 1cqw; overflow: hidden; }
.dt-lin { opacity: 0; transform: translateY(1cqw); transition: opacity .4s var(--ease), transform .4s var(--ease); color: var(--text); }
.dt-lin.on { opacity: 1; transform: none; }
.dt-lin small { margin-right: 1cqw; color: var(--cyan); font-family: var(--mono); }
.dt-res { padding: 1.2cqw 1.6cqw; border: 1px solid rgba(59, 130, 246, .4); border-radius: 1cqw; background: rgba(59, 130, 246, .07); opacity: 0; transform: translateY(1.4cqw); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.dt-res.on { opacity: 1; transform: none; }
.dt-res b { display: block; margin-bottom: .4cqw; color: var(--text); }
.dt-res ul { margin: 0; padding-left: 1.8cqw; color: var(--text-2); }
.dt-fmt { display: flex; gap: 1cqw; margin-top: 1cqw; }
.dt-fmt span { padding: .4cqw 1.4cqw; border: 1px solid var(--line-2); border-radius: 99px; color: var(--muted); transition: all .3s; }
.dt-fmt span.on { border-color: transparent; background: var(--grad); color: #03121a; font-weight: 600; }

/* ---------- roteiro ---------- */
.dr { display: grid; grid-template-columns: .75fr 1.5fr; gap: 2cqw; padding: 2.6cqw 3cqw; }
.dr-form { display: grid; align-content: start; gap: 1.2cqw; }
.dr-form div { padding: .9cqw 1.4cqw; border: 1px solid var(--line-2); border-radius: .9cqw; background: #0b0e13; color: var(--text); }
.dr-form small { display: block; color: var(--muted); font-size: max(7px, 1.2cqw); }
.dr-form .tema { min-height: 5.6cqw; }
.dr-btn { justify-self: start; padding: 1.1cqw 2.2cqw; border: 1px solid rgba(6, 182, 212, .5); border-radius: 99px; background: rgba(6, 182, 212, .12); color: #bdf4ff; font-weight: 500; transition: transform .2s, background .3s, color .3s; }
.dr-btn.press { transform: scale(.94); border-color: transparent; background: var(--grad); color: #03121a; }
.dr-out { display: grid; align-content: start; gap: 1cqw; min-height: 0; overflow: hidden; }
.dr-gancho { padding: 1.1cqw 1.6cqw; border: 1px solid rgba(251, 191, 36, .5); border-radius: 1cqw; background: rgba(251, 191, 36, .07); color: var(--text); opacity: 0; transition: opacity .4s; }
.dr-gancho small, .dr-cena small { display: block; margin-bottom: .3cqw; color: var(--warn); font: 500 max(7px, 1.15cqw) var(--mono); letter-spacing: .08em; }
.dr-cena { padding: 1cqw 1.6cqw; border: 1px solid var(--line); border-radius: 1cqw; background: rgba(255, 255, 255, .02); opacity: 0; transform: translateY(1.2cqw); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.dr-cena small { color: var(--cyan); }
.dr-cena p { margin: 0; color: var(--text-2); }
.dr-cena p b { color: var(--text); font-weight: 500; }
.dr-gancho.on, .dr-cena.on { opacity: 1; transform: none; }
.dr-acoes { display: flex; gap: 1cqw; opacity: 0; transition: opacity .4s; }
.dr-acoes.on { opacity: 1; }
.dr-acoes span { padding: .5cqw 1.5cqw; border: 1px solid var(--line-2); border-radius: 99px; color: var(--text-2); }
.dr-acoes span:last-child { border-color: transparent; background: var(--grad); color: #03121a; font-weight: 600; }

/* ---------- chaves de IA ---------- */
.dk { display: grid; grid-template-columns: 1fr 5cqw 1fr; align-items: center; gap: 1.2cqw; padding: 3cqw; }
.dk-card { display: grid; gap: 1.4cqw; align-content: start; min-height: 74%; padding: 1.6cqw; border: 1px solid var(--line-2); border-radius: 1.4cqw; background: #0b0e13; }
.dk-card h4 { margin: 0; font: 500 max(8px, 1.5cqw) var(--mono); color: var(--muted); }
.dk-btn { justify-self: start; padding: 1cqw 2cqw; border: 1px solid var(--line-2); border-radius: .9cqw; background: var(--surface-3); color: var(--text); font-weight: 500; transition: transform .2s, background .3s, color .3s; }
.dk-btn.press { transform: scale(.94); background: var(--grad); color: #03121a; border-color: transparent; }
.dk-chave { padding: .9cqw 1.4cqw; border: 1px dashed var(--line-2); border-radius: .9cqw; color: var(--text); font-family: var(--mono); opacity: 0; transition: opacity .4s; word-break: break-all; }
.dk-chave.on { opacity: 1; }
.dk-seta { position: relative; height: .3cqw; background: var(--line-2); border-radius: 1cqw; }
.dk-seta i { position: absolute; left: 0; top: 50%; width: 1.8cqw; height: 1.8cqw; margin-top: -.9cqw; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 1.4cqw var(--cyan); opacity: 0; }
.dk-seta i.go { animation: dk-voa 1s var(--ease) 1 both; }
@keyframes dk-voa { 0% { opacity: 1; left: 0; } 100% { opacity: 1; left: calc(100% - 1.8cqw); } }
.dk-campo { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: .9cqw 1.4cqw; border: 1px solid var(--line-2); border-radius: .9cqw; background: var(--bg); color: var(--text-2); font-family: var(--mono); min-height: 4cqw; }
.dk-campo.cheio { border-color: rgba(52, 211, 153, .5); color: var(--text); }
.dk-lock { display: inline-flex; align-items: center; gap: 1cqw; padding: .6cqw 1.5cqw; border: 1px solid rgba(52, 211, 153, .4); border-radius: 99px; background: rgba(52, 211, 153, .08); color: var(--ok); opacity: 0; transform: translateY(1cqw); transition: opacity .4s, transform .4s var(--ease); justify-self: start; }
.dk-lock.on { opacity: 1; transform: none; }

/* ---------- central de automação ---------- */
.dc { display: grid; grid-template-rows: auto 1fr; gap: 1.8cqw; padding: 2.6cqw 3cqw; }
.dc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.dc-kpi { padding: 1.4cqw 1.8cqw; border: 1px solid var(--line); border-radius: 1.1cqw; background: var(--surface); }
.dc-kpi small { color: var(--muted); }
.dc-kpi b { display: block; margin: .3cqw 0 .9cqw; font: 600 3.2cqw / 1 var(--font); color: var(--text); letter-spacing: -.03em; }
.dc-kpi i { display: block; height: .8cqw; border-radius: 1cqw; background: var(--line); overflow: hidden; }
.dc-kpi i s { display: block; height: 100%; width: 40%; background: var(--grad); transition: width 1s var(--ease); }
.dc-lista { display: grid; align-content: start; gap: 1cqw; padding: 1.6cqw 2cqw; border: 1px solid var(--line); border-radius: 1.1cqw; background: var(--surface); }
.dc-lista h4 { margin: 0 0 .4cqw; font: 500 var(--f) var(--font); color: var(--text); display: flex; justify-content: space-between; }
.dc-lista h4 em { font-style: normal; color: var(--ok); font-family: var(--mono); }
.dc-it { display: flex; align-items: center; gap: 1.2cqw; color: var(--text-2); }
.dc-it i { width: 1.8cqw; height: 1.8cqw; border: 1px solid var(--line-2); border-radius: .5cqw; display: grid; place-items: center; transition: all .3s; }
.dc-it.on i { background: var(--grad); border-color: transparent; }
.dc-it.on i::after { content: ''; width: .7cqw; height: 1.1cqw; border: solid #03121a; border-width: 0 .25cqw .25cqw 0; transform: rotate(45deg) translate(-.1cqw, -.1cqw); }
.dc-it span { margin-left: auto; font-family: var(--mono); color: var(--muted); }

/* ---------- editor (3 demos em rodízio) ---------- */
.de { position: absolute; inset: 0; }
.de > .demo { position: absolute; inset: 0 0 8cqw 0; aspect-ratio: auto; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.de > .demo.vis { opacity: 1; visibility: visible; }
.de-tabs { position: absolute; left: 50%; bottom: 1.4cqw; z-index: 6; display: flex; gap: .4cqw; padding: .4cqw; transform: translateX(-50%); border: 1px solid var(--line-2); border-radius: 99px; background: rgba(8, 10, 14, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.de-tabs button { padding: .5cqw 1.5cqw; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: var(--f); cursor: pointer; white-space: nowrap; }
.de-tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }