.typing-playground{height:max(520px, calc(100dvh - var(--playground-top,80px) - 24px));flex-direction:column;gap:16px;display:flex}.typing-playground>:not(.typing-playground-guide){flex-shrink:0}.typing-playground-input{border:1px solid var(--border);background:var(--muted);border-radius:16px;align-items:center;gap:16px;padding:12px 20px;display:flex}.typing-playground-input:focus-within{outline:2px solid var(--primary);outline-offset:2px}.typing-playground-character{border:1px solid var(--border);background:var(--background);border-bottom-width:3px;border-radius:12px;place-items:center;min-width:56px;height:56px;padding-inline:8px;font:500 28px/1 monospace;display:grid}.typing-playground-guide{flex:1 1 0;width:100%;min-height:0;overflow-x:auto;container-type:size}.typing-playground-guide .typing-outline-guide{width:min(100%,202.105cqh - 56.5895px)}@media (pointer:fine){.typing-playground .typing-outline-guide[data-interactive=true]{min-width:0}}@media (pointer:coarse){.typing-playground-guide{min-height:410px}}@media (width<=767px){.typing-playground{gap:12px;height:auto;min-height:calc(100dvh - 80px);padding-bottom:80px}.typing-playground-guide{flex:auto;height:410px}.typing-playground-input{padding-inline:12px}}