.lt{margin:26px 0;border:1px solid #635495;border-radius:22px;overflow:hidden;background:#101020;color:#eeeefa}
.lt-heading{padding:25px 28px 16px;background:radial-gradient(ellipse at top right,#46316a80,transparent 70%)}
.lt-heading>span{font-size:.65rem;letter-spacing:3px;color:#c6b0ff;font-weight:900}
.lt .lt-heading h3{font-family:Caveat,cursive;font-size:2.5rem;margin:4px 0}
.lt-heading p{font-size:.88rem;color:#b6bad3}
.lt button{font:inherit;cursor:pointer;border:1px solid #4c496a;border-radius:10px;background:#232239;color:#e8e7fa;padding:10px 14px;font-size:.8rem;font-weight:800;min-height:44px}
.lt button:hover{background:#383053}
.lt button:focus-visible{outline:3px solid #aef4df;outline-offset:3px}
.lt button:disabled{opacity:.45;cursor:default}
.lt-scenes{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 20px}
.lt-scenes button[aria-pressed=true]{color:#171225;background:#c4b0fa;border-color:#c4b0fa}
.lt-stage{display:grid;grid-template-columns:1fr 110px 1fr;padding:24px 28px 12px;background:radial-gradient(ellipse at bottom,#51406b45,transparent 70%),linear-gradient(#19182b,#151421);border-block:1px solid #363149}
.lt-person{display:flex;flex-direction:column;align-items:center;min-width:0}
.lt-person>strong{font-size:1.05rem}
.lt-person>span{font-size:.7rem;color:#b8b5cf}
.lt-bubble{position:relative;border-radius:17px 17px 17px 3px;background:#f0e9de;color:#292337;padding:16px;min-height:104px;width:100%;font-size:1rem;font-weight:800;line-height:1.6;box-sizing:border-box}
.lt-beto .lt-bubble{background:#dfd4fb;border-radius:17px 17px 3px 17px}
.lt-bubble:after{content:'';position:absolute;bottom:-9px;left:35%;border-top:10px solid #f0e9de;border-right:12px solid transparent}
.lt-beto .lt-bubble:after{border-top-color:#dfd4fb;left:60%}
.lt-cursor{display:inline-block;width:3px;height:1em;background:#70529e;vertical-align:middle;margin-left:4px}
.lt-token{background:#beebcb;color:#173f2c;border-radius:4px;padding:1px 3px;display:inline-block;animation:lt-arrive .45s ease-out}
.lt-between{align-self:center;text-align:center;color:#a69cbe;font-size:.58rem;letter-spacing:1px;overflow:hidden}
.lt-between div{font-size:1.2rem;color:#8b70b8;margin:8px 0}
.lt-avatar{height:135px;width:110px;position:relative;margin-top:16px;transform-origin:bottom center}
.lt-face{position:absolute;width:56px;height:61px;border-radius:45% 45% 42% 42%;background:#c88e6d;left:27px;top:16px;z-index:2}
.lt-face i{position:absolute;width:5px;height:7px;background:#292333;border-radius:50%;top:25px;left:14px}
.lt-face i+i{left:37px}
.lt-face b{position:absolute;width:15px;height:7px;border-bottom:3px solid #672e35;border-radius:50%;top:36px;left:22px}
.lt-hair{position:absolute;width:72px;height:87px;border-radius:45% 45% 25% 25%;background:#382532;left:19px;top:5px;z-index:1}
.lt-hair:after{content:'';position:absolute;width:44px;height:22px;background:#382532;left:9px;top:5px;border-radius:70% 0;z-index:3;transform:rotate(-15deg)}
.lt-body{position:absolute;bottom:0;left:13px;width:84px;height:63px;background:#aa88df;border-radius:35px 35px 10px 10px;border-bottom:7px solid #7861aa}
.lt-arm{position:absolute;width:15px;height:52px;background:#aa88df;bottom:7px;left:3px;border-radius:15px;transform:rotate(20deg);transform-origin:top}
.lt-beto .lt-face{background:#e2ab7e}
.lt-beto .lt-hair{height:42px;background:#29242e;top:7px}
.lt-beto .lt-hair:after{background:#29242e}
.lt-beto .lt-body,.lt-beto .lt-arm{background:#6fbba6;border-bottom-color:#418d7b}
.lt-workshop{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:24px;background:#10121e}
.lt-bot-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}
.lt-bot-wrap strong{font-size:.78rem;color:#d4c4ff}
.lt-bot-wrap>span{font-size:.7rem;color:#aea9c4}
.lt-bot{width:96px;height:85px;background:#9780d4;border:3px solid #cdb9ff;border-radius:22px;position:relative;margin:20px 0 12px;box-shadow:0 0 30px #8c68b228}
.lt-screen{margin:14px 10px;background:#252335;border-radius:12px;text-align:center;font-size:30px;color:#bdf8de;line-height:42px}
.lt-antenna{position:absolute;left:44px;top:-21px;height:19px;width:3px;background:#b8a2ed}
.lt-antenna:before{content:'';position:absolute;top:-6px;left:-5px;width:13px;height:13px;background:#d7b8ff;border-radius:50%}
.lt-bot-feet{text-align:center;color:#9780d4;font-size:23px;letter-spacing:10px;margin-left:10px}
.lt-desk{min-width:0}
.lt-label{font-size:.62rem;letter-spacing:1.3px;color:#beb2d8;font-weight:900;margin-bottom:8px}
.lt-context{border:1px dashed #514862;background:#1a192a;padding:10px 12px;border-radius:8px;min-height:65px;font-size:.79rem;line-height:1.6;margin-bottom:16px;white-space:pre-line}
.lt-options{display:flex;gap:8px;margin-bottom:15px;min-height:58px}
.lt-option{flex:1;position:relative;overflow:hidden;background:#211e34;border:1px solid #403753;border-radius:8px;padding:8px;min-width:0}
.lt-option b{position:relative;display:block;font-size:.85rem;overflow-wrap:anywhere}
.lt-option small{position:relative;color:#c7c0d9;font-size:.7rem}
.lt-option:before{content:'';position:absolute;inset:0;background:#7c60b148;transform:scaleX(var(--chance));transform-origin:left}
.lt-option.chosen{border-color:#93e5bd;background:#244039}
.lt-option.chosen:before{background:#66b38b38}
.lt-caption{margin:0;padding:16px 24px;background:#262139;border-top:1px solid #544368;min-height:85px;font-size:.88rem;line-height:1.65}
.lt-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:16px 24px}
.lt-controls button:first-child{background:#bda5f1;color:#221833}
.lt-controls>span{margin-left:auto;color:#b8b1c9;font-size:.72rem}
.lt .lt-footnote{font-size:.7rem;color:#aaa6be;margin:0;padding:0 24px 20px;line-height:1.65}
.lt[data-phase=choose] .lt-bot{animation:lt-think .6s ease-in-out}
.lt[data-phase=append] .lt-beto .lt-avatar{animation:lt-talk .5s ease-in-out}
.lt-context,.lt-token{font-variant-ligatures:none;font-feature-settings:'liga' 0,'clig' 0,'calt' 0}
@keyframes lt-arrive{from{opacity:0;transform:translateY(12px) scale(.85)}
to{opacity:1;transform:none}
}
@keyframes lt-think{50%{transform:translateY(-7px) rotate(-4deg);box-shadow:0 0 35px #b69aff70}
}
@keyframes lt-talk{50%{transform:rotate(3deg)}
}
@media(max-width:600px){.lt-stage{grid-template-columns:1fr 1fr;gap:15px;padding:20px 14px 12px}
.lt-between{display:none}
.lt-bubble{font-size:.85rem;min-height:132px;padding:12px}
.lt-workshop{grid-template-columns:1fr;padding:16px;gap:12px}
.lt-bot-wrap{flex-direction:row;flex-wrap:wrap;gap:12px}
.lt-bot{transform:scale(.7);margin:0;width:85px;height:80px}
.lt-bot-wrap>span{display:none}
.lt-heading{padding:20px 16px 12px}
.lt-scenes{padding:0 14px 16px;gap:5px}
.lt-scenes button{flex:1;font-size:.7rem;padding:8px}
.lt-caption{padding:14px 16px;min-height:110px}
.lt-controls{padding:14px}
.lt-option b{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){.lt *,.lt *:before{animation:none!important;transition:none!important}
}


/* A boca e o destaque acompanham a fala local, sem movimento quando pausada. */
.lt-voice{display:flex;flex-direction:column;gap:7px;background:#161f28;border-top:1px solid #345046;padding:14px 24px;min-height:85px;box-sizing:border-box}
.lt [hidden]{display:none!important}
.lt-speaking{font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:#a9eacb}
#lt-subtitle{font-size:.88rem;line-height:1.6;color:#e7f2ec}
.lt[data-speaker=lia] .lt-lia .lt-bubble,.lt[data-speaker=beto] .lt-beto .lt-bubble{box-shadow:0 0 0 3px #a1e9c5,0 0 24px #8dddaf38}
.lt[data-speaker=lia] .lt-lia .lt-face b,.lt[data-speaker=beto] .lt-beto .lt-face b{background:#672e35;animation:lt-mouth .28s ease-in-out infinite}
.lt[data-speaker=llm] .lt-bot{box-shadow:0 0 0 3px #a1e9c5,0 0 35px #b69aff70}
.lt[data-speaker=llm] .lt-screen{animation:lt-voice-glow .65s ease-in-out infinite}
@keyframes lt-mouth{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1.3)}}
@keyframes lt-voice-glow{50%{color:#fff;box-shadow:inset 0 0 12px #9fddba66}}
@media(prefers-reduced-motion:reduce){.lt[data-speaker] *{animation:none!important}}
/* No desktop, personagens e bancada ficam juntos no campo de visão. */
@media(min-width:760px){
  .lt{display:grid;grid-template-columns:1.05fr 1fr}
  .lt-heading,.lt-scenes,.lt-controls,.lt-footnote,.lt>noscript{grid-column:1 / -1}
  .lt-heading{padding:16px 24px 8px}
  .lt .lt-heading h3{font-size:2rem;margin:2px 0}
  .lt-heading p{margin:4px 0}
  .lt-scenes{padding-bottom:12px}
  .lt-stage{grid-template-columns:1fr 1fr;gap:12px;padding:20px 16px 14px;border-right:1px solid #363149}
  .lt-between{display:none}
  .lt-bubble{font-size:.85rem;min-height:112px;padding:12px}
  .lt-avatar{margin-top:10px;height:125px}
  .lt-workshop{grid-template-columns:1fr;gap:10px;padding:14px 16px;border-top:1px solid #363149}
  .lt-bot-wrap{flex-direction:row;gap:12px;justify-content:flex-start}
  .lt-bot{width:70px;height:60px;margin:12px 0 0;border-radius:16px}
  .lt-screen{font-size:23px;line-height:30px;margin:8px 6px}
  .lt-antenna{left:32px;top:-14px;height:12px}
  .lt-bot-feet{font-size:16px;margin-top:-2px;letter-spacing:7px}
  .lt-bot-wrap>span{display:none}
  .lt-context{min-height:65px;margin-bottom:10px}
  .lt-options{margin-bottom:10px}
  .lt-label{font-size:.55rem;letter-spacing:.9px}
  .lt-caption,.lt-voice{padding:14px 16px;font-size:.8rem;min-height:115px}
  #lt-subtitle{font-size:.8rem}
  .lt-controls{padding:12px 20px}
  .lt .lt-footnote{padding:0 20px 14px;font-size:.65rem}
}

.lt{scroll-margin-top:12px}