*{box-sizing:border-box;margin:0;padding:0}
  html,body{min-height:100%}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--mono);
    font-size:13px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(900px 500px at 15% 0%, rgba(80,70,220,.14), transparent 60%),
      radial-gradient(800px 500px at 90% 100%, rgba(40,180,255,.10), transparent 60%),
      var(--bg);
  }
  .wrap{max-width:1420px;margin:0 auto;padding:22px 20px 40px}
   .sim-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
   .sim-heading h1{
    font-size:clamp(18px,2.4vw,26px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    background:linear-gradient(90deg,#fff 0%,var(--cyan) 55%,var(--purple) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
   .sim-heading p{color:var(--muted);font-size:12px;letter-spacing:.04em;margin-top:4px}
  .badge{
    display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);
    border-radius:999px;background:var(--panel);color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 1.6s ease-in-out infinite}
  .badge.paused .dot{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:none}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  .app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
  @media (max-width:1040px){.app{grid-template-columns:1fr}}

  .stage{
    position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);
    background:var(--bg);aspect-ratio:16/9;
    box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.02);
  }
  .stage canvas{display:block;width:100%;height:100%}
  .hud{position:absolute;inset:0;pointer-events:none}
  .hud .corner{position:absolute;padding:10px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .hud .tl{top:0;left:0}
  .hud .tr{top:0;right:0;text-align:right}
  .hud .bl{bottom:0;left:0;display:flex;gap:16px;align-items:center}
  .hud .tl b{color:var(--text);font-weight:600}
  .legend{display:flex;align-items:center;gap:7px}
  .legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
  .legend .n{background:var(--grey);box-shadow:0 0 6px rgba(174,180,200,.6)}
  .legend .e{background:var(--purple);box-shadow:0 0 8px var(--purple)}
  .legend .i{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
  .stat{color:var(--text)}

  .controls{
    position:absolute;right:12px;bottom:12px;display:flex;gap:8px;pointer-events:auto;
  }
  .btn{
    width:40px;height:40px;border-radius:12px;border:1px solid var(--border-hi);
    background:var(--panel);color:var(--text);cursor:pointer;display:grid;place-items:center;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px);border-color:var(--cyan);box-shadow:0 0 18px rgba(62,232,255,.25)}
  .btn:active{transform:translateY(0)}
  .btn svg{width:16px;height:16px;fill:currentColor}

  .panel{
    border:1px solid var(--border);border-radius:18px;background:var(--panel);
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
    padding:18px;display:flex;flex-direction:column;gap:18px;
  }
  .panel h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
  .panel h2 span{color:var(--cyan)}

  .ctl{display:flex;flex-direction:column;gap:7px}
  .ctl .row{display:flex;justify-content:space-between;align-items:baseline}
  .ctl .name{font-size:12px;letter-spacing:.06em}
  .ctl .name small{color:var(--muted);margin-left:6px}
  .ctl .val{font-size:15px;font-weight:700;color:var(--c)}
  .ctl .val em{font-style:normal;font-size:11px;color:var(--muted);margin-left:3px;font-weight:400}
  .ctl .lim{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:.06em}

  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;outline:none;cursor:pointer;
    background:linear-gradient(90deg,var(--c) var(--p,50%),rgba(255,255,255,.10) var(--p,50%));
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
    background:#0d0f18;border:2px solid var(--c);box-shadow:0 0 12px var(--c);transition:transform .12s ease;
  }
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
  input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#0d0f18;border:2px solid var(--c);box-shadow:0 0 12px var(--c)}
  input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.10)}
  input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--c)}

  .outs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .out{
    border:1px solid var(--border);border-radius:12px;padding:12px 12px 10px;background:var(--panel-2);
    position:relative;overflow:hidden;
  }
  .out::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c);opacity:.8;box-shadow:0 0 14px var(--c)}
  .out .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .out .v{font-size:22px;font-weight:700;margin-top:4px;color:#fff;text-shadow:0 0 18px var(--c);white-space:nowrap}
  .out .v small{font-size:11px;color:var(--muted);font-weight:400;margin-left:3px;text-shadow:none}
  .out .f{font-size:10px;color:var(--muted);margin-top:6px;opacity:.85}

  .minis{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;border-top:1px solid var(--border);padding-top:14px}
  .mini{display:flex;justify-content:space-between;font-size:11px}
  .mini .k{color:var(--muted);letter-spacing:.06em}
  .mini .v{color:var(--text);font-weight:600}

  .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
  .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 10px var(--cyan);transition:width .25s ease}

  .note{font-size:10px;color:var(--muted);line-height:1.6;border-top:1px solid var(--border);padding-top:12px}
  .note code{color:var(--text);background:rgba(255,255,255,.05);padding:1px 4px;border-radius:4px}
   .sim-footnote{margin-top:18px;color:var(--muted);font-size:11px;letter-spacing:.06em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  kbd{border:1px solid var(--border-hi);border-radius:5px;padding:0 5px;font-family:inherit;font-size:10px;color:var(--text)}