/* Guidance is a small radio conversation, never a modal or an input shield. */
#tutorial-slot{position:absolute;top:101px;left:20px;width:360px;max-width:calc(100% - 40px);z-index:5;pointer-events:none}
#tutorial-slot[hidden],#tutorial-goal[hidden]{display:none!important}
.tutorial-dialog{position:relative;border:1px solid #73856d;background:linear-gradient(140deg,#23383cec,#13282ff5 75%);box-shadow:0 12px 32px #02090e66,inset 0 1px 0 #bedbb911;pointer-events:auto;padding:15px 16px 12px;animation:tutorial-arrive .22s ease-out}
.tutorial-dialog::before{content:'';position:absolute;top:-1px;left:17px;width:56px;height:2px;background:#ddc184;box-shadow:0 0 10px #dcc27944}
.tutorial-dialog-header{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:13px}
.tutorial-assistant{position:relative;width:76px;height:83px;align-self:center;isolation:isolate}
.assistant-expression{position:absolute;left:0;top:0;opacity:0;pointer-events:none;image-rendering:auto}
.assistant-expression.expression-0{opacity:1}.assistant-expression.expression-1{animation:assistant-talk-small 1.15s steps(1,end) 7}.assistant-expression.expression-2{animation:assistant-talk-open 1.15s steps(1,end) 7}.assistant-expression.expression-3{animation:assistant-blink 5.4s steps(1,end) infinite}
.assistant-halo{position:absolute;width:62px;height:51px;border-radius:50%;background:#8ebdad10;filter:blur(6px);left:7px;top:17px;z-index:-1}
.assistant-signal{position:absolute;left:19px;right:19px;bottom:0;display:flex;align-items:center;justify-content:center;gap:3px;height:7px}
.assistant-signal i{width:2px;height:3px;background:#8dbb98;animation:assistant-signal .7s steps(3,end) 11}.assistant-signal i:nth-child(2){animation-delay:.12s}.assistant-signal i:nth-child(3){animation-delay:.3s}.assistant-signal i:nth-child(4){animation-delay:.2s}.assistant-signal i:nth-child(5){animation-delay:.4s}
.tutorial-channel{display:flex;align-items:center;gap:5px;color:#a9c3ae;font:7px/1.5 var(--mono);letter-spacing:.8px}.tutorial-channel>span{width:4px;height:4px;border-radius:50%;background:#acd5ad;box-shadow:0 0 7px #afd6aa77}.tutorial-transmission{display:block;margin:5px 0;color:#a89874;font:7px/1.5 var(--mono);letter-spacing:.9px}
.tutorial-dialog h2{margin:0;color:#e3dcc2;font:500 24px/1.05 var(--display);letter-spacing:.2px}
.tutorial-copy{margin-top:10px}.tutorial-copy p{margin:0;color:#b5c6ba;font:11px/1.65 var(--body)}.tutorial-copy p+p{margin-top:8px}
.tutorial-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:11px;margin-top:12px;border-top:1px solid #4d645a77}.tutorial-live-note{display:flex;align-items:center;gap:5px;font:7px var(--mono);letter-spacing:.6px;color:#7f9d8f}.tutorial-live-note>i{height:4px;width:4px;border-radius:50%;background:#98b495}
.tutorial-dialog-footer button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:31px;padding:8px 11px;background:#c9b581;border:1px solid #d2c18f;color:#1b3030;font:700 10px var(--body)}.tutorial-dialog-footer button svg{width:14px;height:14px}.tutorial-dialog-footer button:hover{background:#e1ce98;border-color:#ebdba8}.tutorial-dialog-footer button:focus-visible{outline:2px solid #e8d6a2;outline-offset:3px}
#tutorial-goal{flex:0 0 auto;min-width:0;background:#14272d}
.tutorial-goal-card{padding:15px 20px 12px;border-bottom:1px solid #706b5066;background:linear-gradient(140deg,#36413355,#142830)}
.tutorial-goal-heading{display:flex;align-items:center;justify-content:space-between;gap:13px}.tutorial-goal-heading>span:first-child{font:8px var(--mono);letter-spacing:1.2px;color:#c9b680}.tutorial-goal-progress{display:flex;gap:3px;flex:0 0 auto}.tutorial-goal-progress>i{width:8px;height:3px;background:#263f3c;border:1px solid #5d705644}.tutorial-goal-progress>i.is-active{background:#b2b47b;border-color:#b2b47b}
.tutorial-goal-card h2{margin:8px 0 6px;color:#e0dcc1;font:500 24px/1.05 var(--display);letter-spacing:.2px}.tutorial-goal-card p{font:10px/1.55 var(--body);color:#a3b8a5;margin:0;max-width:365px}
.tutorial-replay{display:flex;align-items:center;gap:6px;padding:5px 0 0;margin-top:7px;background:none;color:#a7c4ae;font:8px var(--mono);text-align:left;width:100%}.tutorial-replay>svg{width:12px;height:12px}.tutorial-replay>svg:last-child{margin-left:auto;opacity:.65}.tutorial-replay:hover:not(:disabled){color:#e3cc94}.tutorial-replay:disabled{opacity:.6;cursor:default}.tutorial-goal-card.is-complete .tutorial-goal-heading>span:first-child{color:var(--mint)}
.view-wrap:has(#tutorial-slot:not([hidden])) .toast-stack{top:101px;left:auto;right:18px;max-width:240px}.view-wrap:has(#tutorial-slot:not([hidden])) .toast{max-width:240px;font-size:9px}
.view-wrap:has(#tutorial-slot:not([hidden])) .prompt{left:auto;right:16px;transform:none;min-width:225px;max-width:300px}
@keyframes tutorial-arrive{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes assistant-talk-small{0%,22%,53%,79%,100%{opacity:0}8%,37%,66%,90%{opacity:1}}
@keyframes assistant-talk-open{0%,18%,45%,76%,100%{opacity:0}24%,57%,81%{opacity:1}}
@keyframes assistant-blink{0%,93%,97%,100%{opacity:0}94%,96%{opacity:1}}
@keyframes assistant-signal{0%,100%{height:2px;opacity:.6}50%{height:7px;opacity:1}}
@media(max-width:1200px){#tutorial-slot{left:15px;top:95px;width:340px;max-width:calc(100% - 30px)}.tutorial-dialog{padding:12px 13px 10px}.tutorial-dialog h2{font-size:23px}.tutorial-copy p{font-size:10px;line-height:1.6}.tutorial-goal-card{padding:12px 15px 10px}.tutorial-goal-card h2{font-size:22px}.tutorial-goal-card p{font-size:9px}.tutorial-goal-heading>span:first-child{font-size:7px}.tutorial-goal-progress>i{width:6px}.view-wrap:has(#tutorial-slot:not([hidden])) .toast-stack{top:auto;bottom:115px;left:15px;right:auto;max-width:260px}}
@media(max-width:760px){#tutorial-slot{top:83px;left:10px;width:310px;max-width:calc(100% - 20px)}.tutorial-dialog{padding:10px 11px}.tutorial-dialog-header{gap:9px}.tutorial-copy{margin-top:7px}.tutorial-dialog h2{font-size:21px}.tutorial-copy p{font-size:9px}.tutorial-channel,.tutorial-transmission{font-size:6px}.tutorial-goal-card{padding:11px 12px 9px}.tutorial-goal-card h2{font-size:21px}.tutorial-goal-card p{font-size:9px}.tutorial-live-note{font-size:6px}.tutorial-dialog-footer{padding-top:8px;margin-top:9px}.tutorial-dialog-footer button{font-size:9px;min-height:29px}.tutorial-replay{font-size:7px}}
@media(prefers-reduced-motion:reduce){.tutorial-dialog,.assistant-expression,.assistant-signal i{animation:none!important}}
