.sample-path{display:flex;align-items:center;gap:18px;padding:11px 15px;margin-bottom:12px;background:#e4f0fc;border-left:4px solid #126cb5;border-radius:5px;font-size:14px}.sample-path>strong{white-space:nowrap;color:#154e7c}.sample-path>div{display:flex;gap:6px;flex-wrap:wrap}.sample-path button{border-color:#c0d7e9;background:#ffffffb0}.detail-dialog{width:min(1240px,96vw);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #b9cede;border-radius:12px;color:var(--ink);background:white;box-shadow:0 25px 100px #08264e40;overflow:auto}.detail-dialog::backdrop{background:#0c223dc9;backdrop-filter:blur(5px)}.detail-header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 22px;background:#082f62;color:white;position:sticky;top:0;z-index:5}.detail-header p{font-size:13px;color:#c4d9ed;margin:0 0 5px}.detail-header h2{font-size:20px}.detail-header button{flex:none;background:#154479;color:white;border-color:#648ab0}.detail-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(275px,1fr);gap:22px;padding:18px 22px}.detail-scope{font-size:14px;color:#5c778f;margin:0 0 10px}.detail-stage{position:relative;height:435px;border:1px solid #cbdbe8;border-radius:9px;overflow:hidden;background:#f1f6fa}#detail-canvas{position:absolute;inset:0}#detail-canvas canvas{display:block;width:100%;height:100%;touch-action:none}.detail-gesture{position:absolute;top:12px;left:12px;pointer-events:none;font-size:12px;color:#54728c}#detail-locator-caption{position:absolute;bottom:151px;left:10px;font-size:12px;background:#e3edf6;padding:3px 6px;border-radius:4px;pointer-events:none}.detail-tools{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.detail-tools label{font-size:14px;flex:1;min-width:160px}.detail-tools input{display:block;margin-top:3px}.detail-body aside>p{font-size:16px;line-height:1.75}#detail-pieces{display:grid;grid-template-columns:1fr 1fr;gap:7px}#detail-pieces button{display:flex;align-items:flex-start;gap:8px;text-align:left;padding:10px 8px;font-size:14px}#detail-pieces b{font-size:12px;padding:2px 5px;background:#e8f0f7;color:#1d689e;border-radius:4px}#detail-pieces small{display:block;font-size:12px;color:#688196;margin-top:3px}#detail-pieces button[aria-pressed=true] small{color:#c5dfef}#detail-description{margin-top:15px;padding:14px;background:#eef6fc;border-radius:6px;font-size:16px;line-height:1.75}#detail-description h3{font-size:17px;margin-bottom:6px}#detail-description p:last-child{margin-bottom:0}.pinyin{color:#147c96;font-size:14px}.detail-note{font-size:12px!important;color:#6e879b;margin-top:14px}.detail-motion{padding:0 22px 22px}.detail-motion h3{font-size:18px}.detail-motion .player{border:1px solid #c9dbe8;border-radius:9px;overflow:hidden}.player-top,.player-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.player-top{padding:12px;justify-content:space-between;background:#edf5fc}.player-top select{font-size:14px;padding:7px;border:1px solid #c0d4e4;border-radius:5px;background:white;max-width:100%}.player-visual{background:#f8fbfe}.player-visual svg{width:100%;max-height:330px;display:block}.player-bottom{padding:12px 15px}.step-caption{font-size:16px;margin-bottom:10px}.step-buttons{display:flex;gap:7px;flex-wrap:wrap}.animation-note{font-size:12px;color:#70879a;margin:10px 0 0}.detail-dialog .player svg text{font-family:inherit}
@media(max-width:780px){.sample-path{align-items:flex-start;flex-direction:column;gap:8px}.sample-path>div{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.sample-path button{padding:7px 5px;font-size:13px}.detail-dialog{width:98vw;max-width:98vw;max-height:98dvh;border-radius:8px}.detail-header{padding:12px}.detail-header h2{font-size:17px}.detail-body{grid-template-columns:1fr;padding:12px;gap:14px}.detail-stage{height:360px}.detail-motion{padding:0 12px 16px}.detail-tools{gap:6px}.detail-tools button{padding:7px}.detail-gesture{font-size:12px;max-width:92%}#detail-locator-caption{bottom:114px}.player-controls button{font-size:13px}.player-top{padding:8px}}
#detail-modes{display:flex;gap:6px;margin:0 0 10px}#detail-modes[hidden]{display:none}.detail-dialog:focus{outline:none}