/* Letra identity and demo choreography. All resting states remain readable. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.letra-wordmark{display:block;font-size:clamp(110px,12vw,174px);font-weight:800;font-style:italic;letter-spacing:-.075em;line-height:.86;margin:0 0 39px -7px;color:#fff}
.letra-wordmark>span{color:var(--yellow)}
.letra-copy>.home-label{margin-bottom:17px;color:#dce5ff}
.letra-copy h2{font-size:clamp(43px,4.25vw,61px)}
.letra-copy>.letra-description{max-width:34ch;margin-top:23px!important}
.letra-mini-brand{font-size:29px;font-style:italic;font-weight:800;letter-spacing:-1.9px;line-height:1}
.letra-mini-brand>span{color:var(--blue)}
.letra-demo{padding-bottom:24px}
.letra-demo__header{padding-bottom:15px}
.demo-tools{display:flex;align-items:center;gap:13px}
.demo-tools>small{font-size:9px;color:#626873}
.letra-answer{position:relative;min-height:290px;padding-top:0}
.letra-answer h3{margin-top:0}
.letra-answer .letra-next{font-size:12px;font-weight:600;color:#2450e8;padding-top:19px;margin-top:23px;border-top:1px solid #dfe2e7;display:flex;justify-content:space-between;gap:14px}
.letra-next>span{font-size:18px}
.letra-thinking{display:flex;gap:4px;height:7px;margin:-7px 0 14px;opacity:0}
.letra-thinking i{width:4px;height:4px;background:#2450e8;border-radius:50%}
.letra-copy a:focus-visible{outline-color:white}
.agent-section :focus-visible{outline-color:#fff252}
.tour-bar{display:flex;align-items:stretch;background:var(--yellow);border-bottom:1px solid #d2cb42;padding-right:23px}
.tour-controls{flex:1;min-width:0;padding-right:12px;border-bottom:0}
.tour-controls button{padding-block:20px 17px;position:relative}
.tour-controls button[aria-selected="true"]:after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:3px;background:#131417;transform-origin:left}
.motion-toggle{width:44px;height:44px;display:inline-grid;place-items:center;flex-shrink:0;border:1px solid #13141740;border-radius:50%;background:transparent;color:#131417;cursor:pointer;align-self:center}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{background:#13141712}
.motion-toggle__icon{display:block;width:12px;height:12px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.motion-toggle.is-paused .motion-toggle__icon{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.home .preview-note{padding:13px 0 0;font-size:9px;color:#656b76}


@keyframes conversation-in{0%{opacity:0;transform:translateY(12px)}5%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes context-in{0%,5%{opacity:0;transform:translateY(9px)}12%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes reply-in{0%,10%{opacity:0;transform:translateY(7px)}18%,97%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes review-fill{0%{transform:scaleX(0)}14%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes score-in{0%{opacity:0;transform:translateY(18px)}8%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes step-in{0%,5%{opacity:.3;transform:translateY(5px)}20%,94%{opacity:1;transform:translateY(0)}100%{opacity:.3;transform:translateY(0)}}
@keyframes review-pulse{0%,30%,100%{background:transparent}44%,74%{background:#fff25215}}
@keyframes tour-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes answer-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes thinking-show{0%,65%{opacity:1}100%{opacity:0}}
@keyframes dot-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.motion-active .customer-message{animation:conversation-in 10s cubic-bezier(.2,.7,.2,1) infinite}
.motion-active .context-note{animation:context-in 10s cubic-bezier(.2,.7,.2,1) infinite}
.motion-active .reply-preview:not([open]){animation:reply-in 10s cubic-bezier(.2,.7,.2,1) infinite}
.motion-active .conversation-thread:focus-within .customer-message,.motion-active .conversation-thread:focus-within .context-note,.motion-active .conversation-thread:focus-within .reply-preview{animation:none}
.motion-active .rubric-row i,.motion-active .quality-graphic__scale{transform-origin:left;animation:review-fill 10s cubic-bezier(.2,.7,.2,1) infinite}
.motion-active .rubric-row:nth-child(2) i{animation-delay:.18s}
.motion-active .rubric-row:nth-child(3) i{animation-delay:.36s}
.motion-active .quality-score>strong,.motion-active .quality-graphic__score>strong{animation:score-in 10s cubic-bezier(.2,.7,.2,1) infinite}
.motion-active .quality-graphic__note,.motion-active .review-note{animation:context-in 10s cubic-bezier(.2,.7,.2,1) infinite}
.motion-active .order-graphic__timeline>div{animation:step-in 10s ease infinite}
.motion-active .order-graphic__timeline>div:nth-child(2){animation-delay:1.1s}
.motion-active .order-graphic__timeline>div:nth-child(3){animation-delay:2.2s}
.motion-active .order-graphic__question{animation:conversation-in 10s ease infinite}
.motion-active .analyst-response{animation:context-in 10s ease infinite}



.motion-active.letra-demo .letra-thinking{animation:thinking-show 1s both}
.motion-active.letra-demo .letra-thinking i{animation:dot-hop .45s ease 2}
.motion-active.letra-demo .letra-thinking i:nth-child(2){animation-delay:.1s}
.motion-active.letra-demo .letra-thinking i:nth-child(3){animation-delay:.2s}
.motion-active.letra-demo .letra-answer{animation:answer-in .7s .65s both}
.motion-paused [data-motion] *{animation:none!important}
@media(max-width:900px){.letra-wordmark{font-size:140px;margin-bottom:32px}.letra-copy h2{font-size:54px}.letra-answer{min-height:225px}}
@media(max-width:600px){.letra-wordmark{font-size:116px;margin-left:-5px;margin-bottom:28px}.letra-copy h2{font-size:43px}.letra-copy>.home-label{font-size:9px;margin-bottom:17px}.letra-answer{min-height:270px}.letra-answer h3{font-size:29px}.letra-answer .letra-next{font-size:11px}.tour-bar{padding-right:8px}.tour-controls{padding-inline:0}.tour-controls button{padding:17px 8px;font-size:10px}.tab-name{font-size:10px}.tour-controls .tab-name:before{display:none}.tour-bar .motion-toggle{width:36px;height:36px}.motion-toggle__icon{width:10px;height:10px;border-width:3px}.workspace-intro{padding-bottom:28px}.home-final h2{margin-top:0}.home-final .home-actions{margin-top:32px}}
@media(max-width:360px){.letra-wordmark{font-size:102px}.letra-copy h2{font-size:38px}.letra-demo{padding-inline:17px}.letra-prompts button{font-size:9px}.tab-name{font-size:9px}.tour-controls button{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){[data-motion] *,[data-motion] *:before,[data-motion] *:after{animation:none!important;transition:none!important}.motion-toggle{display:none}}
@media(forced-colors:active){.motion-toggle{border-color:ButtonText}.letra-wordmark,.letra-wordmark>span{color:CanvasText}}
.tour-running .tour-controls button[aria-selected="true"]{border-bottom-color:#aaa332}
.tour-running .tour-controls button[aria-selected="true"]:after{animation:tour-progress 10s linear both}
.no-js .motion-toggle{display:none}
.analyst-view>.sidebar-label{font-family:var(--display);font-size:27px;font-style:italic;font-weight:800;letter-spacing:-1.5px;text-transform:none;line-height:1;color:#2450e8}
