.sb{--sb-duration:12s;container-type:inline-size}.sb-stage{border-radius:var(--radius);background:var(--muted);grid-template-rows:auto auto;grid-template-columns:1.15fr 1fr;gap:.75rem;padding:.75rem;display:grid}.sb-tile{border-radius:calc(var(--radius) - 4px);background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden}.sb-tutor{aspect-ratio:4/3}.sb-board{aspect-ratio:4/3;background:var(--nt-board)}.sb-record{flex-direction:column;grid-column:1/-1;gap:.375rem;min-height:5.5rem;padding:.625rem .75rem;display:flex}@container (max-width:420px){.sb-stage{grid-template-columns:1fr}.sb-tutor,.sb-board{aspect-ratio:16/9}}.sb-tag{background:var(--foreground);color:var(--background);letter-spacing:.01em;border-radius:999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;position:absolute;bottom:.5rem;left:.5rem}.sb-timer{font-variant-numeric:tabular-nums;color:var(--muted-foreground);font-size:.6875rem;position:absolute;top:.5rem;right:.5rem}.sb-state{display:grid;position:absolute;bottom:.5rem;right:.5rem}.sb-state>span{color:var(--muted-foreground);opacity:0;animation:var(--sb-duration) linear 1 forwards;grid-area:1/1;font-size:.6875rem}.sb-state>.sb-state-listening{animation-name:sb-state-listening}.sb-state>.sb-state-thinking{animation-name:sb-state-thinking}.sb-state>.sb-state-speaking{animation-name:sb-state-speaking}.sb-state>.sb-state-done{animation-name:sb-state-done}@keyframes sb-state-listening{0%,24%{opacity:1}26%,to{opacity:0}}@keyframes sb-state-thinking{0%,25%{opacity:0}27%,41%{opacity:1}43%,to{opacity:0}}@keyframes sb-state-speaking{0%,42%{opacity:0}44%,74%{opacity:1}76%,to{opacity:0}}@keyframes sb-state-done{0%,76%{opacity:0}78%,to{opacity:1}}.sb-face{width:100%;height:100%;display:block}.sb-form{transform-origin:50% 51%;transform-box:view-box;animation:sb-form var(--sb-duration) linear 1 forwards}@keyframes sb-form{0%{transform:scale(1)}20%{transform:scale(1.07,1.05)}27%{transform:scale(.9,.92)}38%{transform:scale(.88,.9)}44%{transform:scale(1.04,.98)}50%{transform:scale(.97,1.06)}57%{transform:scale(1.06,.99)}64%{transform:scale(.98,1.05)}71%{transform:scaleX(1.04)}78%,to{transform:scale(1)}}.sb-aura{transform-origin:50% 51%;transform-box:view-box;animation:sb-aura var(--sb-duration) linear 1 forwards}@keyframes sb-aura{0%{opacity:.85;transform:scale(1)}20%{opacity:1;transform:scale(1.1)}30%,40%{opacity:.7;transform:scale(.88)}60%{opacity:1;transform:scale(1.04)}82%,to{opacity:.95;transform:scale(1.02)}}.sb-core{opacity:0;transform-origin:50% 51%;transform-box:view-box;animation:sb-core var(--sb-duration) linear 1 forwards}@keyframes sb-core{0%,42%{opacity:0;transform:scale(.6)}48%{opacity:.85;transform:scale(1.05)}60%{opacity:.7;transform:scale(.95)}72%{opacity:.8;transform:scale(1)}84%,to{opacity:.55;transform:scale(.9)}}.sb-ring{opacity:0;transform-origin:50% 51%;transform-box:view-box}.sb-ring-1{animation:sb-ring-out var(--sb-duration) linear 1 forwards}.sb-ring-2{animation:sb-ring-out var(--sb-duration) linear 1 forwards;animation-delay:calc(var(--sb-duration) * -.06)}.sb-ring-3{animation:sb-ring-in var(--sb-duration) linear 1 forwards}@keyframes sb-ring-out{0%{opacity:0;transform:scale(1)}6%{opacity:.5}24%{opacity:0;transform:scale(1.5)}25%,42%{opacity:0;transform:scale(1)}48%{opacity:.35;transform:scale(1.16)}56%{opacity:0;transform:scale(1.34)}62%{opacity:.3;transform:scale(1.14)}70%{opacity:0;transform:scale(1.32)}71%,to{opacity:0}}@keyframes sb-ring-in{0%,26%{opacity:0;transform:scale(1.45)}31%{opacity:.45;transform:scale(1.3)}41%{opacity:0;transform:scale(1.02)}42%,to{opacity:0}}.sb-mote{opacity:0;transform-origin:50% 51%;transform-box:view-box;animation:sb-mote var(--sb-duration) linear 1 forwards}@keyframes sb-mote{0%,26%{opacity:0;transform:rotate(0)translate(38px)}29%{opacity:.9;transform:rotate(0)translate(38px)}32%,34%{transform:rotate(74deg)translate(38px)}37%,38%{transform:rotate(128deg)translate(38px)}41%{opacity:0;transform:rotate(196deg)translate(38px)}42%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.sb-form,.sb-aura,.sb-core,.sb-ring,.sb-mote{animation:none}.sb-core{opacity:.6}.sb-ring-1{opacity:.3}}.sb-bar-fill{transform-origin:0;transform-box:fill-box;animation:var(--sb-duration) linear 1 forwards;transform:scaleX(0)}.sb-bar-fill-a{animation-name:sb-bar-a}.sb-bar-fill-b{animation-name:sb-bar-b}@keyframes sb-bar-a{0%,46%{transform:scaleX(0)}58%,to{transform:scaleX(1)}}@keyframes sb-bar-b{0%,60%{transform:scaleX(0)}72%,to{transform:scaleX(1)}}.sb-bar-label{opacity:0;animation:var(--sb-duration) linear 1 forwards}.sb-bar-label-a{animation-name:sb-label-a}.sb-bar-label-b{animation-name:sb-label-b}@keyframes sb-label-a{0%,44%{opacity:0}48%,to{opacity:1}}@keyframes sb-label-b{0%,58%{opacity:0}62%,to{opacity:1}}.sb-line{opacity:0;animation:var(--sb-duration) linear 1 forwards;gap:.5rem;font-size:.8125rem;line-height:1.35;display:flex}.sb-line>b{color:var(--muted-foreground);flex:none;min-width:3.5rem;font-weight:600}.sb-line-learner{animation-name:sb-line-learner}.sb-line-tutor{animation-name:sb-line-tutor}.sb-line-check{color:var(--nt-success);animation-name:sb-line-check}@keyframes sb-line-learner{0%{opacity:0}6%,to{opacity:1}}@keyframes sb-line-tutor{0%,43%{opacity:0}47%,to{opacity:1}}@keyframes sb-line-check{0%,77%{opacity:0}81%,to{opacity:1}}.sb-caption{gap:1rem;display:grid}@container (min-width:640px){.sb-caption{grid-template-columns:repeat(3,1fr)}}