*{box-sizing:border-box;margin:0;padding:0}
:root{
  --surface-base:      #0d0d0d;
  --text-primary:      #ccc;
  --text-muted:        #666;
  --border-default:    #2a2a2a;
  --node-off:          #56176b;
  --node-on:           #fcffa4;
  --plfit-duration:    #e77436;
  --shadow-highlight:  0 0 6px rgba(249,169,10,.5);
  --edge-adjacency:    rgba(201, 46, 209, 0.55);
  --flash-reinit:      rgba(231,116,36,1);
}

body{
  background:var(--surface-base);
  color:var(--text-primary);
  font-family:monospace;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:14px 10px;
  gap:10px;
}

h1{font-size:1.12rem;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:2px}
#subtitle{font-size:.8rem;color:var(--text-muted);letter-spacing:1px}
#app{width:100%;max-width:920px;display:flex;flex-direction:column;gap:10px}
#main{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
#canvas-wrap{flex:0 0 auto}
#main-canvas{display:block;background:var(--surface-base);border:1px solid var(--border-default);cursor:crosshair}
#side{flex:1;min-width:230px;display:flex;flex-direction:column;gap:8px}

.mini-wrap{background:var(--surface-base);border:1px solid var(--border-default);border-radius:4px;padding:4px 6px}
.mini-label{font-size:.74rem;color:var(--text-muted);margin-bottom:2px;letter-spacing:.5px}
canvas.mini{display:block;width:100%}
#heatmap-wrap{background:var(--surface-base);border:1px solid var(--border-default);border-radius:4px;padding:4px 6px}
#heatmap-label{font-size:.74rem;color:var(--text-muted);margin-bottom:2px;letter-spacing:.5px}
#heatmap{display:block;width:100%;cursor:crosshair}
#info-box{font-size:.76rem;color:var(--text-muted);line-height:1.6;padding:4px 2px}
#sim-meta{font-size:.7rem;color:var(--text-muted);padding:1px 2px;letter-spacing:.02em}

#controls{
  width:100%;
  max-width:920px;
  background:var(--surface-base);
  border:1px solid var(--border-default);
  border-radius:6px;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.slider-row{display:flex;align-items:center;gap:10px}
.sl-label{font-size:.76rem;color:var(--text-muted);min-width:80px;text-align:right;white-space:nowrap;letter-spacing:.5px}
.sl-val{font-size:.95rem;color:var(--node-on);min-width:76px;text-align:left;letter-spacing:.5px;font-weight:bold}
.sl-track{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;
  background:linear-gradient(to right,var(--node-on) var(--pct,50%),var(--border-default) var(--pct,50%));
  border-radius:2px;cursor:pointer;outline:none;border:none
}
.sl-track::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;background:var(--node-on);
  border:2px solid var(--surface-base);box-shadow:var(--shadow-highlight);cursor:pointer;
  transition:box-shadow .15s
}
.sl-track::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--node-on);border:2px solid var(--surface-base);
  box-shadow:var(--shadow-highlight);cursor:pointer
}
.sl-track::-webkit-slider-thumb:hover{box-shadow:var(--shadow-highlight)}
.sl-track:focus::-webkit-slider-thumb{box-shadow:var(--shadow-highlight)}

.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ctrl-grp{display:flex;align-items:center;gap:5px}
label.small{font-size:.8rem;color:var(--text-muted)}
select{
  background:var(--surface-base);color:var(--text-primary);border:1px solid var(--border-default);padding:2px 5px;
  border-radius:3px;font-family:monospace;font-size:.75rem
}
button{
  background:var(--surface-base);color:var(--text-primary);border:1px solid var(--border-default);
  padding:3px 11px;border-radius:4px;cursor:pointer;font-family:monospace;font-size:.8rem
}
button:hover{background:var(--border-default)}
#agent-info{font-size:.78rem;color:var(--text-muted);margin-left:auto}
.toggle-lbl{font-size:.8rem;color:var(--text-muted);cursor:pointer;user-select:none}

/* Classes used in index.html */
.page-header{text-align:center}
.title-inline{display:inline-flex;align-items:center;gap:4px}
.ell-symbol{font-family:serif;font-style:italic;font-size:.78rem}
.meta-count{color:var(--text-muted)}
.info-accent{color:var(--node-on)}
.info-soft{color:var(--text-primary)}

/* About page layout */
#info-box-modal{
  width:100%;
  max-width:920px;
  background:transparent;
  border:none;
  border-radius:0;
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  line-height:1.65;
  font-size:.78rem;
  color:var(--text-primary);
}

#info-box-modal h2,
#info-box-modal h3{
  color:var(--node-on);
  letter-spacing:.35px;
  font-weight:700;
  line-height:1.25;
  font-size:1.22rem;
}

#info-box-modal > h2:first-child{
  margin-top:0;
  margin-bottom:2px;
}
#info-box-modal h3{
  margin-top:0;
  margin-bottom:2px;
}
#info-box-modal > h3:first-of-type{
  margin-top:50px;
}
#info-box-modal > h3:not(:first-of-type){
  margin-top:40px;
}

#info-box-modal .about-live-sim-cta{
  margin-top:10px;
}
#info-box-modal .references-section{
  margin-top:20px;
  padding-top:24px;
  border-top:1px solid var(--border-default);
}
#info-box-modal .references-section h2{
  margin-top:0;
  margin-bottom:8px;
}
#info-box-modal a.cite{
  font-weight:600;
  text-decoration:none;
  color:var(--node-on);
  font-size:.65em;
  vertical-align:super;
  line-height:0;
  margin-left:.06em;
}
#info-box-modal a.cite:hover{
  text-decoration:underline;
}
#info-box-modal .ref-list{
  margin:4px 0 0;
  padding-left:1.35rem;
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-primary);
}
#info-box-modal .ref-list li{
  margin-bottom:.65rem;
  padding-left:.3rem;
}
#info-box-modal .ref-list li[id]{
  scroll-margin-top:12px;
}

#info-box-modal .about-important-note-label{
  color:var(--node-on);
  font-weight:700;
  letter-spacing:.06em;
}
#info-box-modal p{
  color:var(--text-primary);
  font-size:.9rem;
  line-height:1.58;
  text-align:justify;
}
#info-box-modal code{
  color:var(--node-on);
  background:rgba(252,255,164,.08);
  border:1px solid var(--border-default);
  border-radius:3px;
  padding:1px 4px;
}

.subtitle-note{color:var(--text-muted);font-weight:400}
.back-link{color:var(--node-on);text-decoration:none}
.back-link:hover{text-decoration:underline}

.eq-formula,.eq-center{color:var(--text-muted)}
.eq-center{font-size:.8rem}
.ell-inline{font-family:serif;font-style:italic}
.math-display{
  text-align:center;
  color:var(--node-on);
  font-size:.9rem;
  letter-spacing:.2px;
  margin:2px 0;
}

#info-box-modal .katex,
#info-box-modal .katex-display{
  color:var(--node-on);
}

#res-demo-wrap,
#macro-demo-wrap,
#av-extr-demo-wrap,
#plfit-demo-wrap{
  background:var(--surface-base);
  border:none;
  border-radius:6px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

#res-demo-wrap .rsl-lbl{
  min-width:158px;
}

#res-demo-canvas,
#macro-demo-canvas,
#av-extr-canvas,
#plfit-canvas-manual,
#plfit-canvas-paper{
  width:100%;
  height:220px;
  display:block;
  border:none;
  background:#090909;
}

#macro-demo-canvas{
  width:min(100%, 760px);
  height:360px;
  margin:0 auto;
}

.rsl-row,.mdl-row{display:flex;align-items:center;gap:10px}
.rsl-lbl,.mdl-lbl{
  min-width:130px;
  text-align:right;
  color:var(--text-muted);
  font-size:.7rem;
  letter-spacing:.4px;
}
.rsl-val,.mdl-val{
  min-width:64px;
  color:var(--node-on);
  font-size:.76rem;
  font-weight:700;
}
.rsl-track,.mdl-track{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  background:var(--border-default);
  border-radius:2px;
  border:none;
  outline:none;
}
.rsl-track::-webkit-slider-thumb,
.mdl-track::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--node-on);
  border:2px solid var(--surface-base);
  box-shadow:var(--shadow-highlight);
  cursor:pointer;
}
.rsl-track::-moz-range-thumb,
.mdl-track::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--node-on);
  border:2px solid var(--surface-base);
  box-shadow:var(--shadow-highlight);
  cursor:pointer;
}

.about-center{display:flex;align-items:center;justify-content:center;gap:8px}
.about-btn-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
#av-extr-demo-wrap .about-center,
#plfit-demo-wrap .about-center{
  flex-direction:column;
  align-items:center;
}
#av-extr-info,
.about-demo-info{
  text-align:center;
  font-size:.78rem;
  color:var(--text-muted);
  line-height:1.45;
  min-height:1.45em;
}
#res-demo-info:empty,
#macro-demo-info:empty{
  display:none;
}
.about-btn{
  background:rgba(252,255,164,.08);
  color:var(--node-on);
  border:1px solid rgba(252,255,164,.45);
  border-radius:4px;
  padding:3px 10px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
}
.about-btn:hover{
  background:rgba(252,255,164,.16);
  border-color:rgba(252,255,164,.7);
}
.about-btn:disabled{
  opacity:.55;
  cursor:wait;
  pointer-events:none;
}

#plfit-demo-wrap .plfit-demo-lead{
  text-align:left;
  max-width:100%;
}

.plfit-practical{
  margin-top:4px;
}

.plfit-xmin-row{
  margin-top:4px;
}
.plfit-paper-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
  width:100%;
  align-items:start;
}
.plfit-paper-col.plfit-stats{
  gap:5px;
}
.plfit-paper-col .plfit-stat-subhd{
  margin-top:0;
}
@media (max-width:720px){
  .plfit-panels{
    grid-template-columns:1fr;
  }
  .plfit-paper-cols{
    grid-template-columns:1fr;
  }
  .plfit-paper-col + .plfit-paper-col .plfit-stat-subhd{
    margin-top:10px;
  }
}
.plfit-stats{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:100%;
}
.plfit-stat-subhd{
  color:var(--node-on);
  font-size:.72rem;
  font-weight:700;
  margin-top:8px;
  margin-bottom:1px;
  letter-spacing:.02em;
}
.plfit-stat-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px 16px;
  align-items:center;
}
.plfit-stat-k{
  font-size:.72rem;
  color:var(--text-muted);
  text-align:right;
  padding-right:2px;
  line-height:1.35;
}
.plfit-stat-v{
  font-size:.72rem;
  text-align:left;
  min-height:1.25em;
  line-height:1.35;
}
.plfit-stat-v.plfit-stat-plain{
  font-variant-numeric:tabular-nums;
  color:var(--text-primary);
}

.plfit-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
  align-items:start;
}

.plfit-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.plfit-panel-title{
  font-size:.78rem;
  color:var(--text-primary);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.35;
  min-height:6.5em;
  margin:0;
}
.plfit-panel-title .info-accent{
  color:var(--node-on);
}

.plfit-legend{
  font-size:.68rem;
  color:var(--text-muted);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.plfit-legend-s::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--node-on);
  margin-right:4px;
  vertical-align:middle;
}

.plfit-legend-t::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--plfit-duration);
  margin-right:4px;
  vertical-align:middle;
}