.simulator { margin-bottom:24px; padding:0; overflow:hidden; }
.sim-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px; }
.sim-kicker { color:#238167; font-size:11px; font-weight:750; letter-spacing:2px; margin-bottom:5px; }
.sim-heading h2 { font-size:24px; }
.sim-badge { border:1px solid #cde5db; border-radius:20px; color:#287258; background:#f2faf6; padding:6px 12px; font-size:12px; white-space:nowrap; }
.sim-stage { position:relative; height:550px; background:radial-gradient(ellipse at 50% 30%,#1b354d,#071321 80%); }
.sim-stage canvas { display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
.sim-stage canvas:active { cursor:grabbing; }
.sim-stage canvas:focus-visible { outline:3px solid #6de2c1; outline-offset:-3px; }
.sim-topline { position:absolute; top:18px; left:22px; right:22px; display:flex; justify-content:space-between; color:#a7bdd3; font-size:11px; letter-spacing:1px; pointer-events:none; }
.sim-live { color:#71e1bd; }
.sim-live::before { content:'●'; margin-right:7px; }
.sim-viewport-tip { position:absolute; bottom:14px; right:20px; color:#bed0df; font-size:11px; pointer-events:none; }
.sim-labels { position:absolute; bottom:42px; left:15%; right:15%; display:flex; justify-content:space-around; gap:30px; pointer-events:none; }
.sim-labels span { font-size:12px; color:#ffd4ce; letter-spacing:2px; }
.sim-labels span:last-child { color:#bddbff; }
.sim-error { position:absolute; inset:0; display:grid; place-content:center; padding:30px; color:#f4dfd9; text-align:center; }
.sim-console { padding:22px 24px; background:#fbfcfe; border-bottom:1px solid var(--line); }
.sim-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sim-controls button { min-height:42px; }
.sim-controls label { margin:0 0 0 auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.sim-controls select { padding:8px; border:1px solid #cbd6e3; border-radius:5px; background:white; color:var(--ink); font:inherit; }
.sim-state { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:15px 0 12px; }
.sim-state p { font-size:13px; color:#385069; }
.sim-state time { color:var(--muted); font:12px ui-monospace,monospace; white-space:nowrap; }
.sim-progress { display:flex; gap:5px; margin-bottom:18px; }
.sim-progress span { height:4px; flex:1; border-radius:3px; background:#e1e8ef; }
.sim-progress span.done { background:#e75e5e; }
.sim-progress span:last-child.done { background:#4589df; }
.sim-draw { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.sim-balls { display:flex; flex-wrap:wrap; gap:8px; }
.sim-ball { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#eaf0f5; color:#8a9aaa; border:1px dashed #c1cdd9; font-size:17px; font-weight:800; }
.sim-ball.filled { background:radial-gradient(circle at 30% 25%,#ff9c8c,#dc4047 65%,#a82b39); color:white; border:0; box-shadow:0 3px 8px #d9464630; animation:ball-in .35s ease-out; }
.sim-ball.blue.filled { background:radial-gradient(circle at 30% 25%,#88caff,#317bd6 65%,#244e92); box-shadow:0 3px 8px #3778d630; }
.sim-ball.blue { margin-left:10px; }
.sim-sorted { margin-top:10px; font-size:12px; color:#65748a; }
.sim-details { padding:0 24px; }
.sim-details details { border-bottom:1px solid #e4eaf1; padding:17px 0; }
.sim-details details:last-child { border:0; }
.sim-details summary { cursor:pointer; font-weight:650; color:#34516a; }
.sim-details summary:focus-visible { outline:2px solid #3778d6; outline-offset:5px; }
.sim-details p { margin-top:10px; color:#62748a; font-size:12px; line-height:1.8; }
.sim-params { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.sim-params label { margin-top:14px; }
.sim-params output { float:right; color:#287258; font-variant-numeric:tabular-nums; }
.sim-params small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.sim-params input[type=range] { margin-top:10px; }
.sim-option { display:flex; gap:8px; align-items:center; font-weight:400; }
.sim-sources { width:100%; border-collapse:collapse; margin-top:14px; font-size:12px; }
.sim-sources td,.sim-sources th { padding:10px 8px; text-align:left; border-bottom:1px solid #e4eaf1; vertical-align:top; }
.sim-sources th { color:#456079; background:#f5f8fb; }
.sim-sources a,.sim-details a { color:#296ca7; }
.sim-history { max-height:160px; overflow:auto; font-size:12px; padding-left:22px; color:#526980; }
.sim-history li { margin:8px 0; }
.sim-caption { padding:14px 24px 20px; color:#6b7c8e; font-size:12px; }
.sim-seed { font-variant-numeric:tabular-nums; }
@keyframes ball-in { from { transform:translateY(-10px) scale(.8); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@media(max-width:650px) {
  .sim-heading { padding:18px; align-items:flex-start; gap:8px; }
  .sim-heading h2 { font-size:20px; }
  .sim-badge { font-size:10px; padding:5px 8px; }
  .sim-stage { height:410px; }
  .sim-topline { left:12px; right:12px; font-size:10px; }
  .sim-console { padding:16px; }
  .sim-controls { gap:8px; }
  .sim-controls button { padding:0 10px; font-size:12px; }
  .sim-controls label { margin-left:0; }
  .sim-draw { align-items:flex-start; flex-direction:column; }
  .sim-balls { gap:5px; }
  .sim-ball { width:32px; height:32px; font-size:13px; }
  .sim-ball.blue { margin-left:5px; }
  .sim-state { align-items:flex-start; }
  .sim-details { padding:0 16px; }
  .sim-params { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .sim-sources td,.sim-sources th { padding:8px 4px; font-size:11px; overflow-wrap:anywhere; }
  .sim-labels { left:8%; right:8%; bottom:38px; }
  .sim-labels span { font-size:10px; letter-spacing:0; }
  .sim-caption { padding:12px 16px 18px; }
}