.demo-page { padding-top:4.8vw; }
.mode-card { margin-top:3.7333vw; }
.demo-page button { width:100%; box-sizing:border-box; padding:2.6667vw; font-size:3.6vw; line-height:1.6; }
.role-grid { display:flex; flex-wrap:wrap; gap:2.1333vw; }
.role-grid .role-choice { width:calc(50% - 1.0667vw); margin:0; background:#f3f6f9; color:#344b65; border-radius:2.1333vw; }
.role-choice::after { border:none; }
.role-grid .current { background:#e7f0fa; box-shadow:inset 0 0 0 0.2667vw #9ab4d1; }
.role-state { font-size:2.9333vw; color:#64748b; }
.scene-current { font-size:3.2vw; color:#577b70; margin-bottom:2.1333vw; }
.scene-block { padding:2.6667vw 0; border-bottom:0.1333vw solid #e9edf2; }
.scene-name { font-weight:600; font-size:3.7333vw; color:#304966; }
.snapshot-box { padding:3.2vw; margin-top:3.2vw; border-radius:2.1333vw; background:#edf3ef; }
.route-step { color:#5d7085; font-size:3.7333vw; line-height:1.9; }