.ty-wrap{display: grid;grid-template-columns: minmax(0, 1fr) 300px;gap: 16px;align-items: start}.ty-modes{grid-column: 1 / -1;display: flex;gap: 6px;overflow-x: auto;padding-bottom: 2px}.ty-modes button{flex: none;padding: 9px 18px;border-radius: 12px;border: 1px solid var(--line);background: var(--surface);color: var(--ink-2);font: inherit;font-weight: 700;cursor: pointer}.ty-modes button.on{background: var(--brand);border-color: var(--brand);color: #fff}.ty-card{display: grid;gap: 14px;padding: clamp(16px, 3vw, 24px);border-radius: 24px;background: var(--surface);border: 1px solid var(--line);box-shadow: var(--shadow-sm);min-width: 0}.ty-stats{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 8px}.ty-stats > div{display: grid;text-align: center;padding: 10px 4px;border-radius: 14px;background: var(--surface-2)}.ty-stats b{font-size: 24px;color: var(--brand);font-variant-numeric: tabular-nums}.ty-stats small{color: var(--ink-3);font-size: 12px}.ty-text{padding: 18px;border-radius: 16px;background: var(--bg-2);font-size: 22px;line-height: 2;white-space: pre-wrap;word-break: break-word;cursor: text;user-select: none}.ty-text.code{font-family: var(--mono);font-size: 18px;line-height: 1.9}.ty-text span{color: var(--ink-3);border-radius: 3px}.ty-text span.ok{color: var(--success)}.ty-text span.bad{color: #fff;background: var(--danger)}.ty-text span.cur{color: var(--ink);background: var(--gold-100);box-shadow: inset 0 -3px 0 var(--gold-500)}.ty-in{width: 100%;padding: 12px 14px;border-radius: 14px;border: 2px solid var(--line);background: var(--surface);color: var(--ink);font: 18px var(--font);resize: none}.ty-in[dir="ltr"]{font-family: var(--mono)}.ty-in:focus{outline: none;border-color: var(--brand)}.ty-result{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;padding: 18px;border-radius: 22px;background: var(--grad-royal);color: #fff;text-align: center}.ty-result > div{display: grid}.ty-result b{font-size: 34px}.ty-result small{opacity: .8}.ty-result p, .ty-result .btn-row, .ty-result .ty-name{grid-column: 1 / -1;margin: 0;justify-content: center}.ty-name{display: grid;gap: 6px;text-align: start}.ty-name input{color: var(--ink)}.ty-side{display: grid;gap: 14px;grid-row: span 2}.ty-board ol{list-style: none;padding: 0;margin: 8px 0 0;display: grid;gap: 4px}.ty-board li{display: grid;grid-template-columns: 30px minmax(0, 1fr) auto;align-items: center;gap: 8px;padding: 6px 8px;border-radius: 10px}.ty-board li:nth-child(-n+3){background: var(--accent-tint)}.ty-board li.me{box-shadow: inset 0 0 0 2px var(--brand)}.ty-board b{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ty-rk{text-align: center;font-weight: 800}.ty-board small{color: var(--ink-3)}.ty-board h3 i, .ty-weak h3 i{color: var(--accent)}.ty-keys{display: flex;gap: 8px;flex-wrap: wrap;margin-top: 8px}.ty-keys span{display: grid;justify-items: center;gap: 2px}.ty-keys kbd{min-width: 38px;padding: 6px 8px;border-radius: 8px;border: 1px solid var(--line-2);border-bottom-width: 3px;background: var(--surface);font: 700 18px var(--mono);text-align: center}.ty-keys small{color: var(--danger);font-weight: 700}@media (max-width: 900px){.ty-wrap{grid-template-columns: minmax(0, 1fr)}.ty-side{grid-row: auto}.ty-stats{grid-template-columns: repeat(2, minmax(0, 1fr))}.ty-text{font-size: 19px;padding: 14px}}