:root{
    --bg:#000; --ink:#fff;
    --soft:#a3a3a3; --softer:#8f8f8f;
    --font: ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ width:100%; height:100%; }
  body{ background:var(--bg); color:var(--ink); font-family:var(--font);
        overflow:hidden; -webkit-font-smoothing:antialiased; }
  /* designed for a 1160×700 frame; fills whatever size the embed is */
  #stage{ position:fixed; inset:0; }
  canvas{ display:block; width:100%; height:100%; }

  /* emotion labels — all selectable */
  .modes{ position:fixed; left:46px; top:50%; transform:translateY(-50%);
          display:flex; flex-direction:column; gap:22px; z-index:5; }
  .mode{ font-size:22px; letter-spacing:.06em; font-weight:500; color:var(--softer);
         background:none; border:none; padding:0; text-align:left; font-family:var(--font);
         cursor:pointer; user-select:none; transition:color .3s ease; }
  .mode:hover{ color:rgba(255,255,255,.7); }
  .mode.active{ color:var(--ink); }

  /* transport */
  .ctrls{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
          display:flex; align-items:center; gap:14px; z-index:6; }
  .iconbtn{ width:44px; height:44px; border-radius:50%;
            border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.03);
            color:var(--ink); cursor:pointer; display:grid; place-items:center;
            transition:background .2s ease, border-color .2s ease; }
  .iconbtn:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
  .iconbtn svg{ width:17px; height:17px; }
  .iconbtn.off{ opacity:.5; }

  .hint{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
         font-size:13px; letter-spacing:.18em; color:var(--soft); z-index:7;
         pointer-events:none; transition:opacity .5s ease; }

/* Larger click targets retain the original label baselines and spacing. */
.modes{gap:4.4px}
.mode{min-height:44px;line-height:26.4px;padding:8.8px 12px;margin:0 -12px}
.mode:focus-visible,.iconbtn:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.mode,.hint,.iconbtn{transition:none}}