.tt{position:absolute;inset:0;display:flex;flex-direction:column;gap:3%;padding:3% 4%;container-type:size}.tt-hud{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.tt-stats,.tt-actions{display:flex;gap:6px;align-items:center}.tt-stat{min-width:56px;padding:4px 10px;border-radius:var(--rounded-sm);background:var(--color-canvas-soft-2);text-align:center;line-height:1.2}.tt-stat span{display:block;font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-mute)}.tt-stat b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--color-ink)}.tt-btn,.tt-select{height:32px;min-width:32px;padding:0 10px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);background:var(--color-canvas);color:var(--color-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}.tt-select{padding:0 6px}.tt-btn:hover{background:var(--color-canvas-soft-2)}.tt-btn[aria-pressed=true]{background:color-mix(in srgb,var(--color-cat) 22%,var(--color-canvas));border-color:var(--color-cat)}.tt-btn:focus-visible,.tt-select:focus-visible{outline:2px solid var(--color-cat);outline-offset:2px}.tt-stat.is-hot{position:relative;overflow:hidden;min-width:64px;background:color-mix(in srgb,var(--color-cat) 22%,var(--color-canvas-soft-2));box-shadow:inset 0 0 0 var(--border-w) color-mix(in srgb,var(--color-cat) 50%,transparent)}.tt-stat.is-hot span{color:var(--color-body)}.tt-stat.is-hot b{display:inline-block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(20px * var(--display-scale));line-height:1.25}.tt-stat.is-hot:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translate(-130%);pointer-events:none}.tt-stat.is-shine:after{animation:tt-shine .9s ease-out}.tt-stat.is-bump b{animation:tt-bump .32s ease-out}.tt-stat.is-record{animation:tt-record 1.4s ease-out}@keyframes tt-shine{to{transform:translate(130%)}}@keyframes tt-bump{0%{transform:scale(1)}40%{transform:scale(1.25);color:var(--color-cat)}to{transform:scale(1)}}@keyframes tt-record{0%,to{box-shadow:inset 0 0 0 var(--border-w) color-mix(in srgb,var(--color-cat) 50%,transparent)}30%{box-shadow:inset 0 0 0 2px var(--color-cat),0 0 18px color-mix(in srgb,var(--color-cat) 70%,transparent)}}.tt-box{--tt-fs: clamp(16px, 5.2cqmin, 30px);position:relative;flex:1;min-height:0;display:flex;align-items:center;padding:0 4%;border-radius:var(--rounded-lg);background:var(--color-canvas-soft-2);box-shadow:inset 0 0 0 var(--border-w) var(--color-hairline);cursor:text;touch-action:manipulation}.tt-box.is-focused{box-shadow:inset 0 0 0 2px var(--color-cat)}.tt-text{height:calc(var(--tt-fs) * 1.7 * 3);overflow:hidden;width:100%;font-family:var(--font-mono);font-size:var(--tt-fs);line-height:1.7;color:var(--color-mute);user-select:none;-webkit-user-select:none}.tt-word{display:inline-block;margin-right:.6em;white-space:nowrap}.tt-word .ok{color:var(--color-ink)}.tt-word .bad{color:#e11d48}.tt-word .extra{opacity:.75}.tt-word.is-wrong{text-decoration:underline wavy #e11d48;text-decoration-thickness:1px;text-underline-offset:.3em}.tt-word .is-caret,.tt-word.is-end{position:relative}.tt-word .is-caret:before,.tt-word.is-end:after{content:"";position:absolute;top:15%;bottom:15%;width:2px;border-radius:1px;background:var(--color-cat)}.tt-word .is-caret:before{left:-1px}.tt-word.is-end:after{right:-2px}.tt-box:not(.is-focused) .is-caret:before,.tt-box:not(.is-focused) .is-end:after,.tt-box[data-phase=ready] .is-caret:before{animation:tt-blink 1s steps(1) infinite}@keyframes tt-blink{50%{opacity:0}}[data-theme=dark] .tt-word .bad{color:#fb7185}[data-theme=dark] .tt-word.is-wrong{text-decoration-color:#fb7185}.tt-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;color:transparent;background:transparent;caret-color:transparent;cursor:text}.tt-hint{position:absolute;left:50%;bottom:8px;transform:translate(-50%);padding:2px 10px;border-radius:var(--rounded-full);background:var(--color-canvas);color:var(--color-body);font-size:12px;pointer-events:none;white-space:nowrap}.tt-hint:empty{display:none}.tt-status{min-height:1.2em;font-size:12px;color:var(--color-mute);text-align:center}.tt-status:empty{min-height:0}@container (max-width: 520px){.tt-stat{min-width:0;padding:3px 7px}.tt-stat.is-hot{min-width:0}.tt-acc,.tt-status{display:none}}@media(prefers-reduced-motion:reduce){.tt-stat.is-shine:after,.tt-stat.is-bump b,.tt-stat.is-record{animation:none}.tt-box .is-caret:before,.tt-box .is-end:after{animation:none!important}}