.aoa-practice-open{white-space:nowrap}
.aoa-speed-slot{padding:0 clamp(16px,3vw,40px)}
.aoa-speed-panel{box-sizing:border-box;display:grid;grid-template-columns:minmax(130px,1fr) minmax(160px,2fr) auto;gap:10px 18px;align-items:center;max-width:1100px;margin:18px auto;padding:16px 20px;border:1px solid #d6dfce;border-radius:14px;background:#f9faf2;color:#244837;font:14px/1.5 system-ui,sans-serif}
.aoa-speed-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700}
.aoa-speed-panel output{color:#ad4f2c;background:#f6eadc;border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums}
.aoa-speed-track{display:flex;align-items:center;gap:10px;color:#65765f;font-size:12px}
.aoa-speed-track input{min-width:0;width:100%;height:32px;accent-color:#356757;cursor:pointer;margin:0}
.aoa-speed-track span{white-space:nowrap}
.aoa-speed-panel button{border:1px solid #c4d3bf;border-radius:8px;padding:7px 12px;background:#fffef9;color:#31523e;font:inherit;cursor:pointer}
.aoa-speed-panel p{grid-column:1/-1;font-size:12px;margin:0;color:#62735e}
.aoa-speed-panel input:focus-visible,.aoa-speed-panel button:focus-visible{outline:3px solid #db8050;outline-offset:3px}
.aoa-practice-dialog .aoa-speed-panel{grid-template-columns:1fr auto;margin:16px 0;padding:14px}
.aoa-practice-dialog .aoa-speed-track{grid-column:1/-1;grid-row:2}
@media(max-width:680px){.aoa-speed-panel{grid-template-columns:1fr auto;padding:14px}.aoa-speed-track{grid-column:1/-1;grid-row:2}.aoa-speed-panel p{font-size:12px}}
.aoa-practice-dialog{width:min(760px,calc(100vw - 24px));max-height:min(92vh,900px);border:1px solid #bed5c7;border-radius:22px;padding:0;color:#18352e;background:#f9fbf6;box-shadow:0 24px 85px #10261c77;overflow:auto}
.aoa-practice-dialog::backdrop{background:#14251db3;backdrop-filter:blur(4px)}
.aoa-practice-body{padding:clamp(18px,4vw,34px)}
.aoa-practice-top{display:flex;justify-content:space-between;gap:16px;align-items:start}
.aoa-practice-eyebrow{color:#487a66;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.aoa-practice-dialog h2{font-size:clamp(1.5rem,4vw,2.1rem);margin:.25em 0;color:#17362b}
.aoa-practice-han{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.25;margin:14px 0 2px;overflow-wrap:anywhere}
.aoa-practice-pinyin{color:#a94d2c;font-size:1.12rem;font-weight:700;margin:4px 0}
.aoa-practice-English{color:#476057;margin:4px 0 16px}
.aoa-practice-dialog button{cursor:pointer;border-radius:10px;border:1px solid #b1cdbb;background:#fff;color:#194936;padding:10px 14px;font:inherit;font-weight:700}
.aoa-practice-dialog button:hover{border-color:#428c64;background:#f0f8f0}
.aoa-practice-dialog button:focus-visible{outline:3px solid #ef8a4d;outline-offset:2px}
.aoa-practice-dialog button:disabled{opacity:.5;cursor:not-allowed}
.aoa-practice-controls{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.aoa-practice-dialog button.aoa-practice-record{background:#174e39;color:#fff;border-color:#174e39}
.aoa-practice-dialog button.aoa-practice-record.is-recording{background:#ae3c31;border-color:#ae3c31}
.aoa-practice-close{flex:0 0 auto}
.aoa-practice-plot{width:100%;height:250px;display:block;background:#fff;border:1px solid #d7e7db;border-radius:14px}
.aoa-practice-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:#486054;margin:10px 0}
.aoa-practice-legend span::before{content:'';display:inline-block;width:18px;border-top:3px solid;vertical-align:middle;margin-right:6px}
.aoa-practice-legend .guide::before{color:#d77935}.aoa-practice-legend .you::before{color:#187960}
.aoa-practice-status{min-height:2.6em;color:#2b5e48;line-height:1.45}
.aoa-practice-help{border-top:1px solid #dae8dc;padding-top:12px;font-size:.86rem;color:#596b60;line-height:1.5}
.aoa-practice-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.aoa-practice-chips span{background:#e4f1e8;border-radius:8px;padding:4px 7px;font-size:.82rem;color:#224d3e}
@media(max-width:560px){.aoa-practice-plot{height:190px}.aoa-practice-body{padding:17px}}

.aoa-practice-reference-status{padding:12px 14px;border-radius:10px;background:#eef3e9;color:#405941;line-height:1.5}.aoa-practice-credit{font-size:.72rem;line-height:1.45;color:#617469}.aoa-practice-upload{font-size:.85rem;margin:14px 0}.aoa-practice-upload p{line-height:1.45}.aoa-practice-upload input{max-width:100%;display:block;margin-top:8px}.aoa-practice-dialog[open]{display:block}
