.demo-page{min-height:100vh;background:#f4f7f9;color:#17212b}.demo-header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:#fff;border-bottom:1px solid #dde5ea;position:sticky;top:0;z-index:5}.demo-header small,.pose-head small,.execution-route-head small{font-size:.62rem;letter-spacing:.12em;color:#7d8b96}.demo-header h1{margin:3px 0 0;font-size:1.25rem}.demo-back{text-decoration:none;color:#22313d;font-weight:700}.demo-shell{max-width:1080px;margin:0 auto;padding:16px;display:grid;gap:14px}.demo-hero,.pose-panel,.demo-canvas-wrap,.demo-details>div,.demo-status-grid article,.skill-stage-panel,.execution-route-panel{background:#fff;border:1px solid #dfe7ec;border-radius:14px}.demo-hero{padding:18px;display:flex;justify-content:space-between;gap:18px;align-items:center}.demo-hero h2{margin:8px 0 6px;font-size:1.18rem}.demo-hero p{margin:0;color:#66737d;font-size:.82rem;line-height:1.55}.demo-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf2f5;font-size:.65rem;font-weight:800}.demo-badge.remote{background:#e9f6ed}.demo-badge.error{background:#fff0ed}.demo-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.demo-actions button{min-height:40px}.demo-actions .danger{border-color:#df8d83;color:#a12317;background:#fff}.skill-stage-panel{padding:14px;display:grid;gap:7px}.skill-stage{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:12px;align-items:center;border:1px solid #e2e9ed;border-radius:12px;padding:12px;background:#fbfcfd}.skill-stage-number{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eaf0f4;font-weight:900;font-size:.82rem}.skill-stage-main{min-width:0}.skill-stage-main small{display:block;font-size:.55rem;letter-spacing:.1em;color:#8a98a2}.skill-stage-main strong{display:block;margin:2px 0;font-size:.88rem}.skill-stage-main span{display:block;font-size:.66rem;color:#75838d;overflow-wrap:anywhere}.skill-stage-state{font-size:.62rem;font-weight:800;padding:5px 8px;border-radius:999px;background:#edf2f5;white-space:nowrap}.skill-stage-state.running{background:#fff4d8;color:#8a5b00}.skill-stage-state.success{background:#e7f6ea;color:#17662d}.skill-stage-state.failed{background:#fde9e6;color:#9e2a1d}.skill-stage-state.blocked{background:#eef0f2;color:#69757d}.skill-stage button{min-height:36px;min-width:70px}.skill-stage-arrow{text-align:center;color:#9aa7af;font-weight:900;line-height:1}.execution-route-panel{padding:14px}.execution-route-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:12px}.execution-route-head h2{margin:3px 0 0;font-size:1rem}.execution-route-head>span{font-size:.64rem;color:#76838d;text-align:right;overflow-wrap:anywhere}.execution-route{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding-bottom:3px}.route-node{flex:1 0 160px;border:1px solid #dce5ea;border-radius:11px;padding:11px;background:#f8fafb;min-width:0}.route-node small{display:block;font-size:.53rem;letter-spacing:.08em;color:#81909a}.route-node strong{display:block;margin:4px 0 3px;font-size:.78rem;overflow-wrap:anywhere}.route-node span{display:block;font-size:.58rem;color:#74828c;line-height:1.35;overflow-wrap:anywhere}.route-node.ok{border-color:#cfe2d4;background:#f6fbf7}.route-node.failed{border-color:#efc9c2;background:#fff8f6}.route-node.muted{opacity:.68}.route-arrow{display:grid;place-items:center;color:#9ba8b0;font-weight:900;flex:0 0 18px}.demo-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.demo-status-grid article{padding:13px;min-width:0}.demo-status-grid span{display:block;font-size:.62rem;color:#7d8b96}.demo-status-grid strong{display:block;font-size:.93rem;margin:6px 0 3px;overflow-wrap:anywhere}.demo-status-grid small{display:block;color:#8d9aa3;font-size:.58rem;overflow-wrap:anywhere}.pose-panel{padding:16px}.pose-head{display:flex;justify-content:space-between;align-items:center}.pose-head h2{margin:2px 0 0;font-size:1rem}.pose-head>span{font-size:.66rem;color:#7d8b96}.pose-values{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}.pose-values div{background:#f6f8fa;border-radius:10px;padding:12px;text-align:center}.pose-values span{display:block;font-size:.58rem;color:#84929c}.pose-values strong{display:block;margin-top:4px;font-size:1.1rem;font-variant-numeric:tabular-nums}.pose-track{height:8px;background:#e8eef2;border-radius:999px;position:relative;overflow:hidden}.pose-track-dot{position:absolute;top:0;left:0;width:28px;height:8px;border-radius:999px;background:#22313d;transition:transform .12s linear}.demo-canvas-wrap{position:relative;overflow:hidden;min-height:260px}.demo-canvas-wrap canvas{display:block;width:100%;height:auto;background:#f8fafb}.remote-placeholder{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#75838d;gap:8px}.remote-placeholder strong{font-size:1.05rem;color:#2c3b46}.remote-placeholder span{font-size:.76rem;max-width:440px;line-height:1.5}.demo-details{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-details>div{padding:14px;min-width:0}.demo-details h3{font-size:.76rem;margin:0 0 8px}.demo-details pre{margin:0;background:#f6f8fa;border-radius:9px;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.62rem;max-height:260px;overflow:auto}.hidden{display:none!important}@media(max-width:720px){.demo-header{padding:14px}.demo-shell{padding:10px}.demo-hero{align-items:flex-start;flex-direction:column}.demo-actions{width:100%;justify-content:stretch}.demo-actions button{flex:1 1 120px}.skill-stage{grid-template-columns:34px minmax(0,1fr) auto}.skill-stage button{grid-column:2/4;width:100%}.execution-route-head{align-items:flex-start;flex-direction:column}.execution-route-head>span{text-align:left}.execution-route{display:grid;grid-template-columns:1fr}.route-node{width:auto;flex:none}.route-arrow{transform:rotate(90deg);height:14px}.demo-status-grid{grid-template-columns:1fr 1fr}.pose-values{grid-template-columns:1fr 1fr}.demo-details{grid-template-columns:1fr}.demo-canvas-wrap{min-height:220px}.remote-placeholder{min-height:220px}}