:root{--bg:#f6f4ef;--panel:#fff;--ink:#1f2933;--muted:#6b7480;--accent:#b33939;--line:#e3e0d8;--blue:#2e86de}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--ink);background:var(--bg);margin:0;font-family:system-ui,Hiragino Sans,Noto Sans JP,Noto Sans SC,Noto Sans CJK JP,sans-serif;overflow:hidden}button,select,input{font:inherit}button{border:1px solid var(--line);cursor:pointer;color:var(--ink);background:#fff;border-radius:6px;padding:4px 9px;font-size:13px}button:hover{border-color:#bbb}button.on{background:var(--accent);color:#fff;border-color:var(--accent)}select{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 6px;font-size:13px}.app{grid-template-rows:56px 1fr;grid-template-columns:270px 1fr 340px;height:100%;display:grid}header{color:#fff;background:#1f2933;grid-column:1/4;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.brand{align-items:center;gap:10px;display:flex}.logo{font-size:28px}h1{margin:0;font-size:18px}header small{color:#c9ced6;font-size:11px}.langs button{color:#fff;background:0 0;border-color:#4a5563;margin-left:6px}.langs button.on{background:var(--accent);border-color:var(--accent)}.catalog{border-right:1px solid var(--line);background:var(--panel);padding:10px 12px;overflow:auto}.catalog h2{margin:4px 0 8px;font-size:15px}.catalog input{border:1px solid var(--line);border-radius:6px;width:100%;margin-bottom:8px;padding:6px 8px}.chips{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.chips button{padding:2px 8px;font-size:12px}details{margin-bottom:6px}summary{cursor:pointer;color:#374151;padding:4px 0;font-size:13px;font-weight:600}.catalog ul{margin:0;padding:0;list-style:none}.catalog li{cursor:pointer;border-radius:6px;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;font-size:13px;display:flex}.catalog li:hover{background:#f3f1ec}.catalog li.sel{background:#fbe9e7;outline:1px solid #f0b8b0}.catalog li em{color:var(--muted);font-size:11px;font-style:normal}.badge{border-radius:9px;margin-left:auto;padding:1px 6px;font-size:10px}.b3d{color:#17663a;background:#d1f2dc}.bpart{color:#7a5a00;background:#fff1c2}.blist{color:#244a8a;background:#e3ecfb}.btodo{color:#888;background:#eee}.bauto{color:#5b2d8a;background:#efe3fb}main{flex-direction:column;min-width:0;display:flex;position:relative}.toolbar{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:4px;padding:6px 10px;display:flex}.lbl{color:var(--muted);margin:0 2px;font-size:12px}.sep{background:var(--line);width:1px;height:20px;margin:0 4px}.toggle.on{background:#1f2933;border-color:#1f2933}.viewer{flex:1;min-height:0;position:relative}.viewer canvas{display:block}.overlay{pointer-events:none;padding:10px 14px;position:absolute;top:52px;left:0;right:0}.movename{color:#fff;background:#1f2933d1;border-radius:10px;flex-direction:column;padding:8px 14px;display:inline-flex}.movename b{font-size:22px}.movename .zh{color:#f3d9a4;font-size:15px}.movename .py{color:#c9ced6;font-size:12px}.notice{background:#ffffffeb;border-radius:8px;max-width:520px;margin-top:8px;padding:8px 12px;font-size:13px}.notice.small{color:#7a5a00;background:#fff1c2eb;font-size:12px}.legend{color:#444;background:#fffc;border-radius:6px;margin-top:8px;padding:3px 8px;font-size:11px;display:inline-block;position:fixed}.transport{background:var(--panel);border-top:1px solid var(--line);padding:6px 12px}.timeline{cursor:pointer;background:#ece9e2;border-radius:4px;height:16px;margin-bottom:6px;position:relative}.seg{background:#d8d2c4;border-left:1px solid #fff;border-radius:3px;position:absolute;top:2px;bottom:2px}.seg.cur{background:#e6a19a}.head{background:var(--accent);border-radius:2px;width:3px;position:absolute;top:-3px;bottom:-3px}.buttons{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.buttons .play{min-width:44px;font-weight:700}.time{font-variant-numeric:tabular-nums;color:var(--muted);margin:0 8px;font-size:13px}.panel{border-left:1px solid var(--line);background:var(--panel);flex-direction:column;min-height:0;display:flex}.tabs{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:4px;padding:8px;display:flex}.tabbody{padding:10px 14px;font-size:13px;line-height:1.55;overflow:auto}.tabbody h3{margin:4px 0 6px;font-size:16px}.tabbody h4{margin:14px 0 6px;font-size:14px}.note{color:var(--muted);font-size:12px}.hint{color:#7a5a00;background:#fff8e1;border-radius:6px;padding:6px 8px;font-size:12px}.status{border-radius:6px;padding:4px 8px;font-size:12px}.status.verified{background:#d1f2dc}.status.draft{background:#fff1c2}.moves{margin:6px 0;padding-left:0;list-style:none}.moves .no{min-width:24px;color:var(--muted);font-variant-numeric:tabular-nums;display:inline-block}.moves li{border-radius:5px;padding:3px 4px}.moves li.has{cursor:pointer}.moves li.cur{background:#fbe9e7;font-weight:600}.moves .sec{color:var(--accent);margin:8px 0 2px;font-size:11px;font-weight:700}.moves .zh{color:var(--muted);margin-left:6px;font-size:12px}.moves .play3d{color:#17663a;margin-left:6px;font-size:10px}.moves .play3d.auto{color:#5b2d8a}.rulebox{border:1px solid var(--line);background:#fcfbf8;border-radius:8px;padding:8px 10px}.rulebox h4{margin:2px 0 8px}.check{border-radius:5px;grid-template-columns:1fr auto 52px;align-items:center;gap:6px;margin-bottom:3px;padding:4px 6px;display:grid}.check i{text-align:center;color:#fff;border-radius:8px;padding:1px 4px;font-size:11px;font-style:normal}.check.ok i{background:#27ae60}.check.warn i{background:#e1a100}.check.ng i{background:#c0392b}.spec{color:#374151;font-size:12px}dl{margin:0}dl div{margin-bottom:8px}dt{font-weight:700}dd{color:#374151;margin:0;font-size:12px}.links{margin:0;padding:0;list-style:none}.links li{margin:3px 0}.links a{color:var(--ink);font-size:13px;text-decoration:none}.links a:hover{text-decoration:underline}.site{color:#fff;border-radius:4px;margin-right:4px;padding:1px 5px;font-size:10px}.site.YouTube{background:#e62117}.site.Bilibili{background:#00a1d6}.code{color:#e6edf3;white-space:pre-wrap;background:#1f2933;border-radius:6px;padding:8px;font-size:11px}.file{background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;padding:6px 12px;display:inline-block}.file input{display:none}.err{color:#c0392b}@media (width<=1100px){.app{grid-template-rows:56px 1fr 300px;grid-template-columns:220px 1fr}.panel{grid-column:1/3}}
