/* First-run guide: the Tutor speaks from a docked panel (centred for hello and goodbye) and spotlights
   the control it is talking about. */
.gd-root[hidden],.gd-root [hidden]{display:none!important}
.gd-scrim{position:fixed;z-index:60;background:#10182873}
.gd-ring{position:fixed;z-index:61;border-radius:14px;pointer-events:none;box-shadow:0 0 0 3px var(--purple),0 0 0 9px color-mix(in srgb,var(--purple) 22%,transparent);animation:gd-pulse 1.8s ease-in-out infinite}
.gd-root.gd-dim::before{content:"";position:fixed;inset:0;z-index:60;background:#10182899}

.gd-panel{position:fixed;z-index:62;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 50px #0004;animation:gd-in .25s ease-out both}
.gd-face{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--purple-soft)}
.gd-speech{flex:1;min-width:0}
.gd-phases{display:flex;gap:4px;margin-bottom:8px}
.gd-phases span{flex:1;padding-top:6px;border-top:3px solid var(--line);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.gd-phases .done{border-color:color-mix(in srgb,var(--purple) 45%,transparent)}
.gd-phases .now{border-color:var(--purple);color:var(--purple-ink)}
.gd-line{position:relative;margin:0;font-size:14.5px;line-height:1.75;cursor:default;overflow-wrap:anywhere}
.gd-sizer{visibility:hidden}
.gd-text{position:absolute;inset:0}
.gd-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px}
.gd-actions:empty{display:none}
.gd-skip{margin-right:auto;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:10px 4px;cursor:pointer}
.gd-actions .primary{min-width:96px}
.gd-actions :focus-visible,.gd-panel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Hello and goodbye: the Tutor steps into the middle of the screen. */
.gd-panel.gd-stage{left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));flex-direction:column;align-items:center;text-align:center;padding:26px 22px 18px;gap:14px;animation-name:gd-pop}
.gd-stage .gd-face{width:84px;height:84px;font-size:46px}
.gd-stage .gd-speech{width:100%}
.gd-stage .gd-line{font-size:16px}

/* While the learner plays on their own, the Tutor waits in the corner. */
.gd-panel.gd-mini{left:auto;right:16px;bottom:auto;top:68px;transform:none;width:auto;max-width:calc(100vw - 32px);align-items:center;padding:6px 8px 6px 6px;border-radius:999px;cursor:pointer;animation:none}
.gd-mini .gd-face{width:36px;height:36px;font-size:20px}
.gd-mini .gd-phases{display:none}
.gd-mini .gd-speech{display:flex;align-items:center;gap:4px}
.gd-mini .gd-line{font-size:12.5px;font-weight:650;white-space:nowrap;cursor:pointer}
.gd-mini .gd-actions{margin:0}
.gd-mini .gd-skip{margin:0;padding:6px 8px}

@keyframes gd-in{from{opacity:0;transform:translate(-50%,8px)}}
@keyframes gd-pop{from{opacity:0;transform:translate(-50%,-46%)}}
@keyframes gd-pulse{50%{box-shadow:0 0 0 3px var(--purple),0 0 0 14px color-mix(in srgb,var(--purple) 8%,transparent)}}
@media(max-width:620px){.gd-panel{padding:12px 13px;gap:10px}.gd-face{width:38px;height:38px;font-size:21px}.gd-line{font-size:14px}.gd-panel.gd-mini{right:12px}}
@media(pointer:coarse){.gd-skip,.gd-actions .primary{min-height:44px}}
@media(prefers-reduced-motion:reduce){.gd-panel,.gd-ring{animation:none}}
.profile-guide{display:block;margin-top:16px}