/* 02 / O que você recebe: abas que trocam sozinhas + palco com cor e mini tela */
.rx{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:26px;align-items:stretch}
.rx-tabs{display:flex;flex-direction:column;gap:8px}
.rx-tab{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;padding:16px 18px 18px;border-radius:14px;border:1px solid #dcdce1;background:#f7f7f8;color:#3e3e44;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s,transform .3s}
.rx-tab:hover{border-color:#c9b0a7}
.rx-tab[aria-selected=true]{background:#fff;border-color:#eb7046;box-shadow:0 12px 30px #8a3a1a14;transform:translateX(4px)}
.rx-num{font-size:11px;letter-spacing:.12em;color:#9b9ba4;padding-top:4px}
.rx-tab[aria-selected=true] .rx-num{color:#eb7046}
.rx-copy{display:flex;flex-direction:column;gap:4px}
.rx-copy b{font-size:18px;letter-spacing:-.02em;color:#242428}
.rx-copy span{font-size:13.5px;line-height:1.5;color:#6b6b74}
.rx-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.rx-progress i{display:block;height:100%;width:0;background:#eb7046}
.rx-tab[aria-selected=true] .rx-progress i{animation:rx-progress var(--rx-time,6.5s) linear forwards}
.rx.is-paused .rx-tab[aria-selected=true] .rx-progress i{animation-play-state:paused}
@keyframes rx-progress{to{width:100%}}
.rx-link{margin-top:6px;padding:4px 4px 0;color:#876459;font-size:13px;font-weight:600}
.rx-link[hidden]{display:none}

.rx-stage{position:relative;min-height:440px;border-radius:22px;overflow:hidden;isolation:isolate;transition:background .7s ease;background:#eb7046}
.rx-stage:before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(circle at 30% 30%,#ffffff40,transparent 40%),radial-gradient(circle at 80% 80%,#00000030,transparent 45%);animation:rx-drift 14s ease-in-out infinite alternate}
@keyframes rx-drift{to{transform:translate(8%,6%) rotate(8deg)}}
.rx-stage[data-scene=tom]{background:linear-gradient(140deg,#f08a62,#d2532a)}
.rx-stage[data-scene=idiomas]{background:linear-gradient(140deg,#222227,#121214)}
.rx-stage[data-scene=prompts]{background:linear-gradient(140deg,#f6dcd2,#e9bfae)}
.rx-stage[data-scene=painel]{background:linear-gradient(140deg,#3a2219,#1a110d)}

.rx-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:30px;opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.rx-stage[data-scene=tom] [data-scene-id=tom],.rx-stage[data-scene=idiomas] [data-scene-id=idiomas],.rx-stage[data-scene=prompts] [data-scene-id=prompts],.rx-stage[data-scene=painel] [data-scene-id=painel]{opacity:1;visibility:visible;transform:none;transition:opacity .45s .12s,transform .6s .12s cubic-bezier(.2,.8,.2,1),visibility 0s}

.rx-win{width:min(100%,380px);border-radius:14px;background:#17171a;border:1px solid #2e2e34;box-shadow:0 22px 50px #00000059;color:#ececef;overflow:hidden}
.rx-win-bar{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid #26262b;font-size:12px;font-weight:600;color:#9b9ba4}
.rx-win-bar svg{width:15px;height:15px;fill:none;stroke:#9b9ba4;stroke-width:1.7}
.rx-win kbd,.rx-modes kbd{font:600 10px "Segoe UI",system-ui,sans-serif;padding:1px 6px;border-radius:5px;background:#2a2a2f;border:1px solid #34343a;color:#c9c9d0}
.rx-win ul{list-style:none;margin:0;padding:6px}
.rx-modes li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13.5px;transition:background .3s}
.rx-modes li span{color:#8e8e98;font-size:12px;text-align:right}
.rx-modes li.is-on{background:#eb70461f;box-shadow:inset 0 0 0 1px #eb704666}
.rx-modes li.is-on b{color:#ffb79c}
.rx-out{width:min(100%,380px);border-radius:14px;background:#fffaf8;color:#3b2a24;padding:14px 16px;box-shadow:0 16px 36px #5a1f0a33}
.rx-out-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#d2532a}
.rx-out p{margin:6px 0 0;font-size:15px;line-height:1.5;min-height:3em}
.rx-out p.is-swap{animation:rx-swap .45s ease}
@keyframes rx-swap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.rx-langs ul{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.rx-langs li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:13.5px;transition:background .3s}
.rx-langs li svg{width:20px;height:14px;border-radius:2px}
.rx-langs li.is-on{background:#eb70461f;box-shadow:inset 0 0 0 1px #eb704666;color:#ffb79c}
.rx-out-dark{background:#1d1d21;color:#ececef;border:1px solid #2e2e34}
.rx-said{display:flex;align-items:center;gap:8px;font-size:12.5px;font-style:italic;color:#9b9ba4}
.rx-said svg{width:18px;height:13px;border-radius:2px;flex:none}
.rx-out-dark p{font-size:17px}

.rx-said-card{background:#fffaf8}
.rx-said-card p{font-style:italic;color:#6e5148;min-height:0}
.rx-prompt dl{margin:0;padding:8px 14px 14px;display:grid;gap:8px}
.rx-prompt dl>div{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:baseline;opacity:0;transform:translateX(-8px)}
.rx-stage[data-scene=prompts] .rx-prompt dl>div{animation:rx-line .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.5s + var(--i) * .45s)}
@keyframes rx-line{to{opacity:1;transform:none}}
.rx-prompt dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#eb7046}
.rx-prompt dd{margin:0;font-size:14px;color:#ececef}
.rx-copybtn{font-size:11px;padding:3px 9px;border-radius:999px;background:#eb7046;color:#1f0c05}

.rx-pill-demo{display:flex;flex-direction:column;align-items:center;gap:14px}
.rx-pill-demo .hv-pill{transition:padding .5s}
.rx-pill-demo .rx-wave{width:150px;flex:none;gap:2px;overflow:hidden;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.rx-pill-demo .rx-wave i{min-width:0}
.rx-pill-demo .hv-sep,.rx-pill-demo .rx-pill-style{transition:opacity .35s,max-width .5s,margin .5s,padding .5s;max-width:120px;overflow:hidden}
.rx-pill-demo.is-compact .rx-wave{width:70px}
.rx-pill-demo.is-compact .hv-sep,.rx-pill-demo.is-compact .rx-pill-style{opacity:0;max-width:0;margin:0;padding:0;border-width:0}
.rx-pill-demo.is-paused .hv-rec{background:#f2b45a;animation:none}
.rx-pill-demo.is-paused .rx-wave i{animation-play-state:paused;opacity:.45}
.rx-pill-demo .rx-pause{background:#ffffff10}
.rx-pill-demo.is-paused .rx-pause{background:#f2b45a33;color:#f2b45a}
.rx-stage[data-scene=painel] .rx-wave i,.rx-stage[data-scene=painel] .hv-rec{animation-play-state:running}
.rx-pill-caption{font-size:13px;font-weight:600;letter-spacing:.04em;color:#ffcbb8;min-height:1.4em}
.rx-pill-caption.is-swap{animation:rx-swap .4s ease}

@media (max-width:900px){.rx{grid-template-columns:1fr}.rx-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.rx-tab{flex:0 0 78%;scroll-snap-align:start}.rx-tab[aria-selected=true]{transform:none}.rx-link{display:none}.rx-stage{min-height:420px}}
@media (max-width:560px){.rx-scene{padding:18px}.rx-modes li span{display:none}.rx-copy b{font-size:16px}.rx-stage{min-height:400px}.rx-pill-demo .rx-wave{width:90px}.rx-pill-demo.is-compact .rx-wave{width:50px}}
@media (prefers-reduced-motion:reduce){.rx-stage:before,.rx-tab .rx-progress i{animation:none!important}.rx-prompt dl>div{opacity:1;transform:none;animation:none!important}}
.rx-pill-demo.is-compact .rx-wave i:nth-child(n+11){display:none}
.rx-pill-demo .rx-wave{justify-content:space-between}.rx-pill-demo .rx-wave i{max-width:4px}