:root {
  --ink: #000;
  --muted: rgba(128, 128, 128, 0.5);
  --bg: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: Arial, Helvetica, sans-serif; overflow: hidden; }

#toolbar {
  position: fixed; top: 6px; left: 8px; z-index: 20;
  font: 12px Arial, Helvetica, sans-serif; color: #444;
  display: flex; gap: 12px; align-items: center;
  background: rgba(255,255,255,.85); padding: 3px 6px; border-radius: 4px;
}
#toolbar select { font: inherit; margin-left: 4px; }
#toolbar .chk { display: flex; align-items: center; gap: 3px; cursor: pointer; }

#viewport { position: absolute; inset: 0; overflow: auto; }
#sizer { position: relative; margin: 0 auto; }
#stage {
  position: absolute; left: 0; top: 0;
  width: 3220px; height: 2060px;
  transform-origin: 0 0;
  user-select: none; -webkit-user-select: none;
}
#stage > * { position: absolute; }

/* sprite animations (fpic + xoffset) */
.sprite { background-repeat: no-repeat; pointer-events: none; overflow: hidden; }
.fadepic { pointer-events: none; overflow: hidden; background-repeat: no-repeat; opacity: 0; }

/* pictctrl: 2 columns x 3 rows sprite sheet */
#stage .pict { position: absolute; }
.pict {
  background-repeat: no-repeat; background-size: 200% 300%;
  background-position: 0 0; cursor: pointer;
}
.pict.on { background-position: 0 50%; }
.pict.pressed { background-position: 100% 0; }
.pict.on.pressed { background-position: 100% 50%; }

.hoverdisc {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: transparent; transition: background .08s;
}
.togglewrap:hover .hoverdisc { background: rgba(128,128,128,.1); }
.dotwrap:hover .hoverdisc { background: #000; }

/* library text buttons (somai-text / somai-text-s) */
.txt { cursor: pointer; overflow: hidden; }
.txt span {
  position: absolute; left: 6px; top: 10.33px; white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
  color: #000;
}
.txt.big span { font-size: 30px; line-height: 38px; }
.txt.small span { font-size: 20px; line-height: 28px; }
.txt:hover span { color: var(--muted); }
.txt.sel span { text-decoration: underline; text-underline-offset: 4px; }

.hidden { display: none !important; }

/* controls (bottom-left) */
.label {
  font: 64px Arial, Helvetica, sans-serif; line-height: 78px; white-space: nowrap;
  color: #000; opacity: 0; transition: opacity .5s linear; pointer-events: none;
}
.label.right { text-align: right; }
.label.show { opacity: 1; }
.static { opacity: 1; }

.pslider { cursor: pointer; touch-action: none; }
.pslider .bg { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.pslider .knob {
  position: absolute; background: url(img/rond.png) center/100% 100% no-repeat; pointer-events: none;
}

#dur {
  background: rgba(0,0,0,.84); color: #fff; border: 0; outline: none;
  font: 64px Arial, Helvetica, sans-serif; padding: 0 12px; text-align: left;
  cursor: ns-resize; caret-color: #fff;
}
#dur:focus { cursor: text; }
#reset {
  background: none; border: 0; padding: 0; cursor: pointer; color: #000;
  font: 64px Arial, Helvetica, sans-serif; text-decoration: underline;
}
#reset:hover { color: var(--muted); }

#status {
  position: fixed; right: 12px; bottom: 8px; z-index: 20;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #777;
  text-align: right; pointer-events: none; white-space: pre;
}
#audioUnlock {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 30;
  background: #000; color: #fff; padding: 8px 14px; border-radius: 4px; font: 13px Arial, sans-serif;
}

/* stacking: branches < words < category buttons / dots */
#stage .sprite, #stage .fadepic { z-index: 0; }
#stage .txt { z-index: 2; }
#stage .togglewrap, #stage .centralwrap { z-index: 3; }
#stage .dotwrap { z-index: 4; }