*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#07090d;
  font-family:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color:#cfd8e3;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;display:block;cursor:default}

/* ---- top bar ---- */
#topbar{position:fixed;top:14px;left:14px;z-index:10;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;
  background:rgba(12,15,21,.82);border:1px solid #1d2431;
  backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.tbtn{font:inherit;font-size:11px;letter-spacing:.09em;color:#9fb0c4;
  background:#131926;border:1px solid #232d3d;border-radius:6px;
  padding:7px 12px;cursor:pointer;transition:.14s}
.tbtn:hover{color:#e8f1fb;border-color:#3a4759;background:#18202e}
.tbtn.primary{color:#0a0d12;background:#ffc857;border-color:#ffc857;font-weight:700}
.tbtn.primary:hover{background:#ffd679;border-color:#ffd679}
.tbtn.primary.on{background:#ff6b6b;border-color:#ff6b6b;color:#12060a}
.tbtn.ghost{color:#5e6b7d;background:transparent}
.tsep{width:1px;height:20px;background:#232d3d}
.readout{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding:0 8px}
.readout span{font-size:13px;color:#e8f1fb;font-weight:700}
.readout em{font-size:8px;letter-spacing:.14em;color:#55637a;font-style:normal;margin-top:2px}

/* ---- add menu ---- */
.addwrap{position:relative}
.menu{display:none;position:absolute;top:36px;left:0;min-width:190px;z-index:20;
  background:rgba(12,15,21,.96);border:1px solid #232d3d;border-radius:8px;
  padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.menu.open{display:block}
.menu .grp{font-size:8px;letter-spacing:.16em;color:#4a5668;padding:8px 8px 4px}
.menu button{display:flex;align-items:center;gap:9px;width:100%;font:inherit;font-size:11px;
  color:#b9c6d6;background:none;border:0;border-radius:5px;padding:7px 8px;cursor:pointer;text-align:left}
.menu button:hover{background:#1a2231;color:#fff}
.menu button i{width:7px;height:7px;border-radius:50%;display:block;flex:none}

/* ---- footer bits ---- */
#hint{position:fixed;bottom:12px;left:16px;z-index:10;font-size:10px;color:#4d5a6d;letter-spacing:.03em}
#hint b{color:#7d8da3;font-weight:600}
#legend{position:fixed;bottom:12px;right:16px;z-index:10;display:flex;gap:14px;font-size:9px;
  letter-spacing:.12em;color:#5b6a7e}
.lg{display:flex;align-items:center;gap:5px}
.lg i{width:14px;height:2px;display:block;border-radius:2px}
/* Narrow screens: the hint wraps to several lines and would run underneath the
   right-aligned legend (both are fixed to bottom:12px). Stack them instead —
   legend on the bottom row, hint above it. */
@media (max-width:760px){
  #hint{left:12px;right:12px;bottom:34px;line-height:1.6}
  #legend{left:12px;right:auto;bottom:12px;flex-wrap:wrap;gap:10px}
}