.wto-results { max-width: 1220px; margin-top: 38px; }
.wto-chart { position: relative; height: 285px; }
.wto-chart-heading { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--wto-muted); font-size: 12px; }
.wto-chart polyline[data-chart-line] { fill: none; stroke: var(--wto-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wto-chart-raw { fill: none; stroke: color-mix(in srgb, var(--wto-text) 48%, transparent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wto-chart circle { fill: var(--wto-accent); stroke: var(--wto-bg); stroke-width: 1.5; cursor: help; }
.wto-chart-errors path { stroke: #ef6370; stroke-width: 2; stroke-linecap: round; }
.wto-chart-y-axis { position: absolute; top: 50%; left: -31px; color: var(--wto-muted); font-size: 10px; letter-spacing: .4px; transform: rotate(-90deg); }.wto-chart-x-axis { display: block; margin-top: 2px; color: var(--wto-muted); font-size: 10px; text-align: center; }
.wto-chart-tooltip { position: absolute; z-index: 3; width: 162px; border: 1px solid color-mix(in srgb, var(--wto-accent) 45%, transparent); border-radius: 7px; padding: 8px 10px; background: color-mix(in srgb, var(--wto-bg) 80%, #000); box-shadow: 0 8px 22px #0007; color: var(--wto-text); font-size: 11px; pointer-events: none; }.wto-chart-tooltip strong,.wto-chart-tooltip span { display: block; }.wto-chart-tooltip span { margin-top: 4px; color: var(--wto-muted); }
.wto-chart-legend { display: flex; justify-content: flex-end; gap: 16px; margin-top: 8px; color: var(--wto-muted); font-size: 11px; }
.wto-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wto-chart-legend i { display: inline-block; width: 15px; height: 3px; border-radius: 3px; }
.wto-chart-wpm-key { background: var(--wto-accent); }.wto-chart-raw-key { background: color-mix(in srgb, var(--wto-text) 48%, transparent); }.wto-chart-error-key { position: relative; width: 11px !important; height: 11px !important; background: linear-gradient(45deg, transparent 42%, #ef6370 43% 57%, transparent 58%), linear-gradient(-45deg, transparent 42%, #ef6370 43% 57%, transparent 58%); }
.wto-result-tools { display: flex; justify-content: center; gap: 12px; margin: 34px 0 16px; }
.wto-result-tools button, .wto-replay button { border: 1px solid color-mix(in srgb, var(--wto-muted) 50%, transparent); border-radius: 7px; padding: 9px 13px; background: color-mix(in srgb, var(--wto-bg) 87%, #000); color: var(--wto-muted); font: inherit; font-size: 12px; cursor: pointer; }
.wto-result-tools button:hover, .wto-replay button:hover { border-color: var(--wto-accent); color: var(--wto-accent); }
.wto-input-history, .wto-replay { margin: 12px auto; max-width: 1080px; border: 1px solid color-mix(in srgb, var(--wto-muted) 36%, transparent); border-radius: 10px; padding: 18px; background: color-mix(in srgb, var(--wto-bg) 84%, #000); }
.wto-input-history[hidden], .wto-replay[hidden] { display: none !important; }
.wto-result-panel-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; color: var(--wto-muted); font-size: 12px; }
.wto-result-panel-heading strong { color: var(--wto-text); font-size: 14px; }
.wto-input-history div[data-history-text], .wto-replay-text { min-height: 55px; color: var(--wto-muted); font-size: 19px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.wto-input-history i, .wto-replay-text i { font-style: normal; }.wto-input-history i.is-correct, .wto-replay-text i.is-correct { color: var(--wto-text); }.wto-input-history i.is-wrong, .wto-replay-text i.is-wrong { color: #ef6370; text-decoration: underline; }.wto-input-history i.is-missed, .wto-replay-text i.is-missed { color: color-mix(in srgb, var(--wto-muted) 62%, transparent); }
.wto-empty-history { color: var(--wto-muted); font-size: 13px; }
.wto-replay>div:last-child { display: flex; gap: 9px; margin-top: 12px; }
/* Dedicated room for graph axes, legend and analytics lines. */
.wto-chart { box-sizing: border-box; height: 310px; padding-left: 38px; }
.wto-chart svg { display: block; width: 100%; height: 215px !important; }
.wto-chart polyline[data-chart-line] { stroke-width: 1.35px !important; }
.wto-chart-raw { stroke-width: 1px !important; }
.wto-chart-net { fill: none; stroke: #60a5fa; stroke-width: 1px !important; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 3; }
.wto-chart-y-axis { top: 34px; bottom: 52px; left: 5px; transform: none; writing-mode: vertical-rl; }
.wto-chart-x-axis { margin-top: 4px; }
.wto-chart-net-key { background: repeating-linear-gradient(90deg, #60a5fa 0 4px, transparent 4px 7px); }
@media (max-width: 700px) { .wto-chart { height: 258px; padding-left: 26px; }.wto-chart svg { height: 150px !important; }.wto-chart-y-axis { left: 2px; top: 32px; bottom: 66px; font-size: 8px; }.wto-chart-legend { flex-wrap: wrap; margin-top: 6px; font-size: 9px; } }
@media (max-width: 700px) { .wto-results { margin-top: 20px; }.wto-chart { height: 180px; }.wto-chart-legend { justify-content: flex-start; gap: 10px; }.wto-result-panel-heading { align-items: flex-start; flex-direction: column; gap: 3px; }.wto-input-history div[data-history-text], .wto-replay-text { font-size: 15px; } }