/* typing.css — typing speed test (typing.js), prefix ty- */
.ty{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start;text-align:left}
.ty>.ty-bar,.ty>.ty-live,.ty>.ty-box,.ty>.ty-actions,.ty>.ty-res{grid-column:1}
.ty>.ty-side{grid-column:2;grid-row:1/span 5;display:grid;gap:14px}
.ty-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--panel,#fff);border:1px solid var(--border,#e6e9f0);border-radius:14px;padding:8px 10px}
.ty-g{display:flex;gap:2px;padding-right:8px;border-right:1px solid var(--border,#e6e9f0)}
.ty-g:empty{display:none}
.ty-bar button{padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--muted,#5a6377);font:600 13px system-ui,sans-serif;cursor:pointer;min-width:0}
.ty-bar button.on{color:var(--accent,#4f6ef7);background:var(--accent-soft,#eef1fe)}
.ty-bar button:disabled{opacity:.4;cursor:default}
.ty-sel{margin-left:auto;padding:6px 8px;border:1px solid var(--border-2,#dfe4ee);border-radius:8px;background:var(--panel,#fff);color:var(--text,#1e2635);font:600 13px system-ui,sans-serif}
.ty-live{display:flex;gap:18px;font:700 22px/1 ui-monospace,Consolas,monospace;color:var(--accent,#4f6ef7);min-height:24px;padding:0 4px}
.ty-live span:not(:first-child){opacity:0;transition:opacity .2s;color:var(--muted,#5a6377);font-size:16px;align-self:flex-end}
.ty-live.on span{opacity:1}
.ty-win{height:6.3em;overflow:hidden;position:relative}
.ty-words .w{line-height:2.1em}
.ty-box{position:relative;font:400 clamp(19px,2.4vw,26px)/2.1em ui-monospace,'Cascadia Mono',Consolas,monospace;background:var(--panel,#fff);border:1px solid var(--border,#e6e9f0);border-radius:16px;padding:14px 18px;cursor:text}
.ty-words{display:flex;flex-wrap:wrap;column-gap:.6em;transition:transform .15s;user-select:none}
.ty-words .w{position:relative;white-space:nowrap;color:var(--muted,#8a93a6)}
.ty-words .w.err{text-decoration:underline wavy #e5484d 1px;text-underline-offset:6px}
.ty-words i{font-style:normal;position:relative}
.ty-words i.ok{color:var(--text,#1e2635)}
.ty-words i.no{color:#e5484d}
.ty-words i.x{color:#b4232a;opacity:.75}
.ty-words i.cur::before{content:'';position:absolute;left:-1px;top:.3em;bottom:.3em;width:2px;background:var(--accent,#4f6ef7);border-radius:2px;animation:ty-blink 1s step-end infinite}
.ty-words i.end{display:inline-block;width:0}
@keyframes ty-blink{50%{opacity:0}}
.ty-in{position:absolute;opacity:0;left:0;top:0;width:1px;height:1px;border:0;padding:0}
.ty-blur{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--panel,#fff) 70%,transparent);backdrop-filter:blur(3px);font:600 15px system-ui,sans-serif;color:var(--text,#1e2635);border-radius:16px}
.ty-blur[hidden]{display:none}
.ty-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ty-hint{font-size:12.5px;color:var(--muted,#5a6377);margin:0}
.ty-hint kbd{font:600 11px ui-monospace,monospace;border:1px solid var(--border-2,#dfe4ee);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--panel,#fff)}
.ty-res{background:var(--panel,#fff);border:1px solid var(--border,#e6e9f0);border-radius:16px;padding:18px;display:grid;gap:14px}
.ty-big{display:flex;gap:36px;flex-wrap:wrap}
.ty-big span,.ty-stats span{display:block;font-size:13px;color:var(--muted,#5a6377)}
.ty-big b{font:800 56px/1 system-ui,sans-serif;color:var(--accent,#4f6ef7);font-variant-numeric:tabular-nums}
.ty-big em{display:block;font-style:normal;font-weight:700;color:#1a9b58;font-size:13px;margin-top:4px}
.ty-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ty-stats b{font:700 17px system-ui,sans-serif;overflow-wrap:anywhere}
.ty-chart{width:100%;height:180px;color:var(--muted,#5a6377)}
.ty-pb div,.ty-hist div{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border,#eef1f6);font-size:13px}
.ty-pb span{flex:1;color:var(--muted,#5a6377);min-width:0;overflow-wrap:anywhere}
.ty-pb em{font-style:normal;color:var(--muted,#5a6377)}
.ty-hist b{font-size:16px;min-width:32px}
.ty-hist span{color:var(--muted,#5a6377);min-width:0;overflow-wrap:anywhere}
@media (max-width:900px){.ty{grid-template-columns:minmax(0,1fr)}.ty>.ty-side{grid-column:1;grid-row:auto}}
@media (max-width:600px){.ty-g{padding-right:4px}.ty-bar button{padding:6px 7px;font-size:12.5px}.ty-sel{margin-left:0}.ty-big b{font-size:44px}.ty-box{padding:12px}}
.ty-custom{display:grid;gap:8px}
.ty-custom textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-2,#dfe4ee);border-radius:12px;padding:10px 12px;font:15px/1.5 inherit;background:var(--panel,#fff);color:inherit;resize:vertical}
.ty-custom[hidden]{display:none}
.ty-kb{display:grid;gap:6px}
.ty-kr{display:flex;gap:5px;margin-bottom:5px}
.ty-k{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--border,#e6e9f0);font:600 15px ui-monospace,Consolas,monospace;color:var(--muted,#8a93a6);background:var(--field,#f8fafc)}
.ty-k.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.ty-k.warn,.ty-k.slow{background:#fef3c7;color:#92400e;border-color:#fde68a}
.ty-k.bad{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.ty-k.sp{width:240px}
.ty-cert{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--border,#eef1f6);padding-top:12px}
.ty-cert input{flex:1;min-width:160px;height:38px;border:1px solid var(--border-2,#dfe4ee);border-radius:9px;padding:0 10px;font:inherit;background:var(--panel,#fff);color:inherit}
.ty-cert .ps-btn{width:auto;margin:0}
@media (max-width:600px){.ty-k{width:27px;height:32px;font-size:13px}.ty-kr{gap:3px}.ty-k.sp{width:150px}}