[hidden]{display:none!important;}
/* One committed visual world: the reference's flat grey ground and slate ink.
   Single theme by design; every colour is painted explicitly. */
:root{
  --ground:#e6e6e6;
  --ink:#52565e;
  --ink-2:#767a83;
  --ink-3:#9ea1a8;
  --hair:#bcbec3;
  --press:#4f535b;
  --veil:rgba(230,230,230,.86);
  --panel:rgba(230,230,230,.95);
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --jp:"IBM Plex Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
html,body{height:100%;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:11px/1.45 var(--mono);letter-spacing:.01em;
  overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;}
[lang="ja"],.ja{font-family:var(--jp);}

/* header */
#hd{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);left:16px;right:16px;max-width:520px;pointer-events:none;}
#hd h1{margin:0;font:500 15px/1.35 var(--jp);letter-spacing:.06em;color:var(--ink);text-wrap:balance;}
#hd .sub{margin:2px 0 0;color:var(--ink-2);}
#status{margin:9px 0 0;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#status .dim{color:var(--ink-3);}
#status .note{color:var(--ink-2);}

/* interval tally */
#tally{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;width:224px;pointer-events:none;color:var(--ink-2);}
#tally .tt{color:var(--ink-3);margin:0 0 7px;}
#tally .row{display:grid;grid-template-columns:3.4em 6.9em 1fr 2.7em;align-items:center;column-gap:6px;height:17px;}
#tally .row .ja{color:var(--ink);font-size:11px;}
#tally .trk{position:relative;height:1px;background:var(--hair);}
#tally .trk i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--ink-2);transition:width .6s ease;}
#tally .pc{text-align:right;font-variant-numeric:tabular-nums;}
@media (max-width:760px){#tally{display:none;}}

/* controls */
#ctl{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;}
.btns{display:flex;flex-wrap:wrap;gap:6px;}
button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--hair);border-radius:0;
  padding:5px 10px;cursor:pointer;letter-spacing:.02em;line-height:1.3;}
button:hover{border-color:var(--ink-2);}
button:active{background:rgba(79,83,91,.08);}
button[aria-pressed="true"]{background:var(--press);border-color:var(--press);color:var(--ground);}
button:disabled{cursor:default;opacity:.6;}
button:focus-visible,input:focus-visible,a:focus-visible{outline:1px dashed var(--ink);outline-offset:2px;}
.chemrow{display:flex;align-items:stretch;gap:6px;flex:1 1 360px;max-width:560px;}
#chemBtn{flex:1 1 auto;display:flex;align-items:center;gap:12px;text-align:left;padding:5px 10px;min-width:0;}
#chemBtn .lbl{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap;}
#chemBtn .lbl .ja{font-size:11px;}
#chemBtn .lbl .en{color:var(--ink-2);}
#chemBtn[aria-expanded="true"]{border-color:var(--ink-2);}
.mini{display:flex;align-items:flex-end;gap:2px;height:18px;flex:0 0 auto;}
.mini i{display:block;width:3px;background:var(--ink-2);min-height:1px;}
#chemTop{margin-left:auto;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
#chemBtn .car{color:var(--ink-3);}
.credit{flex-basis:100%;margin:0;color:var(--ink-3);font-size:10px;}
.credit a{color:var(--ink-2);text-underline-offset:2px;}

/* range inputs: the thumb is one of the graph's circles */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-width:60px;height:24px;margin:0;background:transparent;cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink-3);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-7px;border-radius:50%;
  border:1.2px solid var(--ink);background:var(--ground);}
input[type=range]::-moz-range-track{height:1px;background:var(--ink-3);}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:1.2px solid var(--ink);background:var(--ground);}

/* neurotransmitter mixer */
#mixer{position:fixed;z-index:10;left:16px;right:16px;bottom:120px;max-width:900px;max-height:min(58vh,560px);overflow:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--hair);padding:12px 14px 12px;}
.mxhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:8px;}
.mxt{margin:0;color:var(--ink);}
.mxt .ja{font-size:12px;margin-right:4px;}
#mxClose{margin-left:auto;}
.states{display:flex;flex-wrap:wrap;gap:5px;flex-basis:100%;}
.states button{padding:3px 8px;}
.states button .ja{margin-right:5px;}
.groups{columns:2 380px;column-gap:30px;margin-top:4px;}
.grp{break-inside:avoid;margin:0 0 6px;}
.grp h3{margin:8px 0 2px;font:400 10.5px/1.4 var(--mono);color:var(--ink-3);letter-spacing:.04em;}
.grp h3 .ja{font-size:10.5px;margin-right:4px;}
.nt{display:grid;grid-template-columns:3.3em 8.4em minmax(0,1fr) minmax(96px,1.3fr) 2.2em;align-items:center;column-gap:10px;min-height:28px;}
.nt abbr{text-decoration:none;color:var(--ink);font-weight:500;white-space:nowrap;}
.nt .nm{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.nt .nm .ja{font-size:11px;color:var(--ink);white-space:nowrap;}
.nt .nm .en{color:var(--ink-2);font-size:10px;}
.nt .role{color:var(--ink-3);font-size:10px;line-height:1.25;}
.nt .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2);}
.nt.hot abbr,.nt.hot .val{color:var(--press);}
#mxCap{margin:10px 0 0;color:var(--ink-2);max-width:72ch;min-height:2.9em;}
#mxCap b{font-weight:500;color:var(--ink);}

/* play gate */
#gate{position:fixed;z-index:5;inset:0;display:grid;place-items:center;pointer-events:none;padding-inline:16px;}
.gatebox{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--veil);padding:18px 22px 16px;}
#gatePlay{display:flex;align-items:center;gap:10px;font:500 14px/1 var(--mono);padding:13px 22px;border-color:var(--ink-2);}
#gatePlay .ja{font-size:14px;letter-spacing:.08em;}
#gateNote{margin:0;color:var(--ink-2);text-align:center;font-variant-numeric:tabular-nums;}
@media (max-width:600px){
  .nt{grid-template-columns:3.5em 8em minmax(80px,1fr) 2.2em;column-gap:8px;}
  .nt .role{display:none;}
  #mixer{max-height:48vh;}
}
@media (max-width:420px){
  #chemBtn .lbl .en{display:none;}
  button{padding:5px 8px;}
}
.here{color:var(--ink);}
.nojs{position:fixed;inset:auto 16px 50% 16px;margin:0;text-align:center;color:var(--ink);font:13px/1.5 var(--mono);}