.nn-wrap{position:relative;z-index:10;width:100%;max-width:1240px;margin:0 auto;height:clamp(490px,52vw,620px);font-family:var(--mono);isolation:isolate}
.nn-stage{position:absolute;inset:0}
.nn-wrap canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline-offset:-8px}
.nn-wrap canvas:active{cursor:grabbing}
.nn-head,.nn-foot,.nn-telemetry{position:absolute;z-index:1;pointer-events:none}
.nn-head{top:18px;left:7%;right:7%;display:flex;justify-content:space-between;align-items:center}
.nn-eyebrow{font-size:9px;letter-spacing:.2em;color:#70949f}
.nn-controls{display:flex;gap:18px;align-items:center}
.nn-live{font-size:8px;letter-spacing:.12em;color:#63d9c6}
.nn-live::before{content:'';display:inline-block;width:4px;height:4px;margin-right:8px;border-radius:50%;background:#63d9c6;box-shadow:0 0 10px #63d9c6}
.nn-pause{pointer-events:auto;border:0;border-bottom:1px solid #57747d66;background:transparent;color:#90aab8;padding:5px 2px;font:9px var(--mono);cursor:pointer}
.nn-pause:hover,.nn-pause:focus-visible{color:#78f0dc;border-color:currentColor}
.nn-telemetry{bottom:42px;left:7%;right:7%;display:flex;justify-content:space-between;gap:22px}
.nn-telemetry>div{width:230px;max-width:32%}
.nn-metric-label{font-size:8px;letter-spacing:.12em;color:#6a8a99;margin-bottom:7px;display:flex;justify-content:space-between}
.nn-vector{font-size:10px;color:#86d3cb;white-space:nowrap}
.nn-detail{font-size:8px;color:#607e8c;margin-top:5px;line-height:1.6}
.nn-result{font-size:13px;color:#b4cdf3}
.nn-output{display:flex;align-items:center;gap:9px;font-size:8px;color:#8ca7b8;margin-top:3px}
.nn-output i{height:2px;flex:1;background:#7195ba15}
.nn-output b{display:block;height:100%;width:0;background:#8fbfff;box-shadow:0 0 7px #82acff;transition:width .3s}
.nn-output em{font-style:normal;width:35px;text-align:right}
.nn-foot{bottom:8px;left:7%;right:7%;display:flex;justify-content:space-between;gap:12px;font-size:8px;letter-spacing:.08em;color:#577886}
.nn-status{color:#74b9b2}
.nn-progress{position:absolute;left:0;bottom:-7px;width:80px;height:1px;background:#63decc;transform-origin:left;opacity:.6}
.nn-hint{text-align:center;color:#7796a4}
@media(max-width:700px){
  .nn-wrap{height:460px}
  .nn-head,.nn-foot,.nn-telemetry{left:20px;right:20px}
  .nn-eyebrow{font-size:7px}.nn-live{display:none}
  .nn-telemetry{bottom:48px;flex-wrap:wrap;gap:12px}
  .nn-telemetry>div{width:46%;max-width:none}
  .nn-telemetry>div:first-child{width:100%}
  .nn-telemetry>div:first-child .nn-detail{display:none}
  .nn-hint{position:absolute;bottom:21px;left:0;right:0;font-size:7px}
  .nn-foot{font-size:7px}
}
@media(prefers-reduced-motion:reduce){.nn-output b{transition:none}}