/* Scoped numerical workspaces. Keep long exact values inside their own panels. */
.ds.nl { --nl-muted:#d0c1df; padding:20px; }
.nl .nl-heading { display:flex; align-items:center; gap:20px; }
.nl .nl-heading img { width:64px; height:64px; flex:0 0 64px; border-radius:14px; }
.nl .ds-layout { grid-template-columns:minmax(300px,360px) minmax(0,1fr); gap:22px; align-items:start; }
.nl .ds-controls { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; }
.nl .ds-preview { min-width:0; padding:24px; }
.nl .nl-hint { color:var(--nl-muted); font-size:13px; margin:0 0 14px; line-height:1.65; }
.nl .nl-presets { gap:8px; padding-bottom:18px; border-bottom:1px solid var(--ds-line); }
.nl .nl-presets button { padding:9px 12px; font-size:13px; }
.nl .nl-fields { display:grid; gap:14px; margin-top:20px; }
.nl .nl-fields .ds-field { margin:0; }
.nl .nl-fields textarea { min-height:130px; font-family:ui-monospace,Consolas,monospace; }
.nl .nl-limits { padding:15px; background:#191323; border:1px solid #493858; border-radius:12px; color:var(--nl-muted); font-size:12px; margin:22px 0 0; }
.nl .nl-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 20px; }
.nl .nl-metric { background:linear-gradient(145deg,#372445,#21182e); border:1px solid #79548e; border-radius:14px; padding:16px; min-width:0; }
.nl .nl-metric span { display:block; color:var(--nl-muted); font-size:12px; margin-bottom:8px; }
.nl .nl-metric strong { display:block; font-size:22px; line-height:1.35; overflow-wrap:anywhere; max-height:150px; overflow:auto; }
.nl .nl-explanation { background:#21192e; border-left:3px solid #b98aeb; padding:14px 18px; border-radius:0 12px 12px 0; overflow-wrap:anywhere; }
.nl button.nl-primary { background:#8450b9; border-color:#b98aeb; font-weight:700; }
.nl button:focus-visible,.nl summary:focus-visible,.nl-table:focus-visible { outline:3px solid #d7b2ff; outline-offset:3px; }
.nl .nl-output { margin:20px 0; border:1px solid #654d7d; border-radius:12px; overflow:hidden; }
.nl .nl-output summary { padding:14px 16px; cursor:pointer; font-weight:600; }
.nl .nl-output textarea { margin:0; border:0; border-top:1px solid #654d7d; border-radius:0; min-height:180px; font-family:ui-monospace,Consolas,monospace; white-space:pre; }
.nl .nl-table { max-width:100%; max-height:460px; overflow:auto; border:1px solid #584568; border-radius:12px; }
.nl table { width:100%; border-collapse:collapse; font-size:13px; text-align:left; }
.nl th { position:sticky; top:0; background:#352641; text-transform:capitalize; z-index:1; }
.nl td,.nl th { padding:12px 15px; border-bottom:1px solid #493858; min-width:90px; max-width:400px; overflow-wrap:anywhere; }
.nl td { font-family:ui-monospace,Consolas,monospace; }
.nl tbody tr:nth-child(even) { background:#22192d; }
.nl .nl-page-count { color:var(--nl-muted); font-size:13px; }
.nl .nl-tokens { display:grid; grid-template-columns:repeat(auto-fit,minmax(95px,1fr)); gap:8px; margin:16px 0; }
.nl .nl-token { border:1px solid #59436b; background:#20162c; padding:10px; border-radius:10px; min-width:0; }
.nl .nl-token small { display:block; color:var(--nl-muted); margin-bottom:4px; }
.nl .nl-token strong { display:block; overflow-wrap:anywhere; font-family:ui-monospace,Consolas,monospace; }
.nl .nl-bitfields { display:grid; grid-template-columns:70px 1fr 2fr; gap:8px; margin:20px 0; }
.nl .nl-bitfield { min-width:0; padding:12px; background:#3b2254; border:1px solid #9a6dc3; border-radius:10px; }
.nl .nl-bitfield:nth-child(2) { background:#213b43; border-color:#619a9b; }
.nl .nl-bitfield:nth-child(3) { background:#433522; border-color:#b39859; }
.nl .nl-bitfield span { display:block; font-size:12px; margin-bottom:8px; }
.nl .nl-bitfield code { overflow-wrap:anywhere; background:transparent; color:inherit; }
.nl .nl-error { border:1px solid #e6a5bc; border-radius:14px; background:#412338; padding:22px; }
.nl .nl-example { border-left:3px solid #b98aeb; padding-left:16px; }
@media(max-width:850px) {
  .ds.nl { padding:10px; }
  .nl .ds-layout { grid-template-columns:minmax(0,1fr); }
  .nl .ds-controls { position:static; max-height:none; }
  .nl .ds-preview { padding:16px; }
  .nl .nl-heading { gap:12px; align-items:flex-start; }
  .nl .nl-heading img { width:44px; height:44px; flex-basis:44px; }
  .nl .nl-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nl .nl-metric strong { font-size:18px; }
  .nl .nl-bitfields { grid-template-columns:minmax(0,1fr); }
}