:root { color-scheme: light; --bg:#f4f2ec; --fg:#1b1b1a; --dim:#6d6a63; --line:#d9d5cb; --mark:#1b1b1a;
          --card:#fff; --track:#eeeae2; --rec:#b3261e; }
  /* 어두운 화면. 색면(왼쪽 큰 화면)의 색은 조절판의 「색면」·「바탕」이 정하므로 여기서 바꾸지 않는다 */
  @media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; --bg:#141413; --fg:#ecebe6; --dim:#a19d94; --line:#34322e; --mark:#ecebe6;
            --card:#1e1d1b; --track:#2d2b28; --rec:#e5534b; }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin:0; background:var(--bg); color:var(--fg);
         font-family: system-ui, -apple-system, "Pretendard", sans-serif; font-size:14px; }
  .app { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:16px; padding:16px; min-height:100%; }
  .left { display:flex; flex-direction:column; min-width:0; position:sticky; top:16px; height:calc(100vh - 32px); }
  #stage { flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
  #out { display:block; border-radius:10px; background:#ecebe6; }
  .bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
  .bar .fps { color:var(--dim); font-variant-numeric:tabular-nums; margin-left:auto; }
  aside { display:flex; flex-direction:column; gap:12px; min-width:0; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  h2 { font-size:13px; color:var(--dim); margin:0 0 8px; font-weight:600; }
  #status { color:var(--dim); font-size:12.5px; margin-top:8px; line-height:1.45; }
  select, button { font:inherit; }
  select { width:100%; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); }
  button { padding:7px 14px; border-radius:999px; border:1px solid var(--mark); background:var(--card); color:var(--mark); cursor:pointer; }
  button.on { background:var(--rec); border-color:var(--rec); color:#fff; }
  #preview { width:100%; aspect-ratio:4/3; border-radius:8px; background:#222; display:block; }
  .param { display:grid; grid-template-columns: 120px 1fr 40px; align-items:center; gap:8px; margin:7px 0; }
  .param[hidden] { display:none; }
  .param span { color:var(--dim); font-size:12.5px; }
  .param input[type=range] { width:100%; accent-color:var(--mark); }
  .param input[type=color] { width:44px; height:26px; border:0; background:none; padding:0; }
  .param output { text-align:right; font-variant-numeric:tabular-nums; font-size:12px; color:var(--dim); }
  .meter { display:grid; grid-template-columns: 90px 1fr 36px; align-items:center; gap:8px; margin:4px 0; font-size:12.5px; }
  .meter span { color:var(--dim); }
  .meter i { height:6px; background:var(--track); border-radius:999px; overflow:hidden; }
  .meter b { display:block; height:100%; width:0; background:var(--mark); }
  .meter output { text-align:right; font-variant-numeric:tabular-nums; color:var(--dim); }
  #shape { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--dim); margin-top:8px; }
  #shape b { color:var(--fg); font-weight:500; font-variant-numeric:tabular-nums; }
  .keys { color:var(--dim); font-size:12px; line-height:1.6; }
  video { display:none; }

  /* 색면만 보기. 전시용 화면 */
  body.display { background:#000; }
  body.display .app { display:block; padding:0; height:100vh; }
  body.display aside, body.display .bar { display:none; }
  body.display .left { height:100vh; position:static; }
  body.display #out { border-radius:0; }

  @media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .left { position:static; height:60vh; }
  }

/* 내보내는 값은 들어오는 값과 색을 달리해 구분한다 */
.meter.out i { background: rgba(140, 230, 210, 0.18); }
.meter.out b { background: #8fe3d2; }
.hint { color: #8a9a97; font-size: 11px; margin-top: 6px; }

/* 관객이 보낸 문장 */
#sayform { display:flex; gap:8px; }
#sayform input { flex:1; min-width:0; font:inherit; padding:6px 10px; border-radius:8px;
                 border:1px solid var(--line); background:var(--card); color:var(--fg); }
#sayform button { padding:6px 12px; }
#saylist { list-style:none; margin:10px 0 0; padding:0; max-height:132px; overflow-y:auto; }
#saylist li { border-top:1px solid var(--line); padding:6px 0; font-size:12.5px; color:var(--dim); }
#saylist li:first-child { color:var(--fg); }