:root {
    --bg: #0b0a09; --fg: #ece8e2; --muted: #8f897f; --faint: #5d5850;
    --panel: rgba(16,14,12,0.8); --btn: rgba(255,255,255,0.05); --btn-hover: rgba(255,255,255,0.1);
    --btn-on: rgba(255,176,90,0.16); --line: rgba(255,255,255,0.08); --accent: #ffbf7a;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
    font: 14px/1.4 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; overflow: hidden; }
  canvas { display: block; }
  #board, #stage { position: fixed; inset: 0; width: 100%; height: 100%; }
  #stage { touch-action: none; cursor: grab; }
  #stage:active { cursor: grabbing; }

  .tools { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
    display: flex; gap: 2px; z-index: 3; }
  .tools button { width: 44px; height: 44px; border-radius: 50%; padding: 0; color: var(--fg);
    opacity: 0.26; display: grid; place-items: center; transition: opacity 0.3s; }
  .tools button:hover, .tools button[aria-expanded="true"] { opacity: 0.85; background: transparent; }
  .tools button[aria-expanded="true"] { color: var(--accent); }

  .panel { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 50px); right: max(10px, env(safe-area-inset-right));
    width: min(360px, calc(100vw - 20px)); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px 16px;
    backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); z-index: 2;
    animation: rise 0.25s ease-out; scrollbar-width: thin; }
  @keyframes rise { from { opacity: 0; transform: translateY(-6px); } }
  .panel[hidden] { display: none; }
  .panel > section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; }
  .hint { margin: 6px 0 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
  section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
  h2 { margin: 0 0 10px; font-size: 11px; font-weight: 500; color: var(--faint); letter-spacing: 0.2em; }
  .label { display: block; margin: 12px 0 6px; font-size: 12px; color: var(--muted); }
  h2 + .label { margin-top: 0; }

  button { font: inherit; color: var(--fg); background: transparent; border: 0; border-radius: 9px;
    padding: 6px 9px; min-height: 34px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
  button:disabled { opacity: .25; cursor: default; }
  button:hover { background: var(--btn-hover); }
  button[aria-pressed="true"] { background: var(--btn-on); color: var(--accent); }
  button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 2px; }
  .grid button { display: flex; align-items: center; gap: 6px; text-align: left; font-size: 12px; letter-spacing: -0.02em; padding: 5px 6px; }
  .grid button span, .grid button canvas { flex: none; }
  .swatch { width: 20px; height: 20px; flex: none; }
  .seg { display: flex; background: var(--btn); border: 1px solid var(--line); border-radius: 10px; padding: 2px; gap: 2px; }
  .seg > * { flex: 1; }
  .seg button { font-size: 13px; }
  .row { display: flex; gap: 6px; margin-top: 8px; }
  .row .seg { flex: 1; }
  .led { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); flex: none; }
  .led-sq { border-radius: 1px; }
  #styles button { justify-content: flex-start; }
  #count { align-self: center; text-align: center; font-variant-numeric: tabular-nums; flex: 0 0 22px; }
  .tag { align-self: center; color: var(--muted); font-size: 12px; padding: 0 4px 0 8px; flex: 0 0 auto; }

  .slider { display: flex; align-items: center; gap: 10px; }
  .slider input { flex: 1; accent-color: var(--accent); height: 28px; }
  #persistOut { min-width: 64px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .quiet { color: var(--muted); font-size: 12px; min-height: 30px; margin-top: 8px; padding: 4px 8px; }

  :root { --dock: 360px; --accent: #d7b58a; --faint: #aaa093; }
  #viewport { position: fixed; inset: 0; overflow: hidden; }
  #board, #stage { position: absolute; }
  body.tweaking #viewport { right: var(--dock); }
  .tools { top: max(20px, env(safe-area-inset-top)); right: 24px; }
  .tools button { width: auto; padding: 0 15px; display: flex; gap: 8px; border: 1px solid var(--line); border-radius: 24px; opacity: .7; background: #181613; font-size: 12px; letter-spacing: .04em; }
  body.tweaking .tools { display: none; }
  #tweaks { position: fixed; inset: 0 0 0 auto; width: var(--dock); background: #171512; border-left: 1px solid var(--line); z-index: 3; display: flex; flex-direction: column; }
  #tweaks[hidden] { display: none; }
  #tweaks { transition: transform .52s cubic-bezier(.22,.8,.3,1); will-change: transform; }
  #tweaks.offscreen { transform: translateX(100%); }
  #board, #stage { will-change: transform; }
  @media (prefers-reduced-motion: reduce) { #tweaks { transition: none; } }
  .tweaks-head { padding: 26px 24px 20px; display: flex; justify-content: space-between; align-items: center; }
  .tweaks-head h1 { font-size: 24px; font-weight: 400; letter-spacing: -.04em; }
  .eyebrow { font-size: 9px; letter-spacing: .22em; color: var(--muted); }
  #tweaks-close { font-size: 25px; color: var(--muted); min-width: 44px; }
  .tabs { display: flex; margin: 0 20px; border-bottom: 1px solid var(--line); gap: 8px; }
  .tabs button { flex: 1; border-radius: 0; padding: 12px 4px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
  .tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
  .panel { position: static; width: auto; max-height: none; flex: 1; min-height: 0; border: 0; border-radius: 0; padding: 22px 24px 32px; background: none; backdrop-filter: none; animation: none; }
  .panel section { margin-top: 22px; padding-top: 22px; }
  .grid { gap: 5px; }
  .grid button { min-height: 40px; }
  .slider input { min-width: 0; cursor: pointer; }
  .slider output { min-width: 62px; text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .scene-caption { position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom)); text-align: center; pointer-events: none; color: #a79b8c; }
  .scene-caption span { font-size: 10px; letter-spacing: .28em; }
  .scene-caption p { font-size: 11px; opacity: .55; margin: 10px 0 0; }
  .tools, .scene-caption { transition: opacity .6s ease; }
  body.resting .tools { opacity: .12; }
  body.resting .tools:hover, body.resting .tools:focus-within { opacity: 1; }
  body.resting .scene-caption { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { .tools, .scene-caption { transition: none; } }
  @media (max-width: 720px) {
    body.tweaking #viewport { right: 0; bottom: 52dvh; }
    #tweaks { inset: 48dvh 0 0; width: 100%; border-left: 0; border-top: 1px solid var(--line); }
    #tweaks.offscreen { transform: translateY(100%); }
    .tweaks-head { padding: 12px 20px 8px; }
    .tweaks-head h1 { font-size: 19px; }
    .eyebrow { display: none; }
    .tabs button { padding: 8px 4px; }
    .panel { padding: 16px 20px 24px; }
    body.tweaking .scene-caption { display: none; }
  }

  /* A restrained instrument panel: recessed tracks, machined caps and rocker switches. */
  #tweaks { background: linear-gradient(110deg, #24221e, #191815 55%, #211f1b); }
  .seg { background: #100f0d; box-shadow: inset 0 2px 5px #0008, 0 1px 0 #ffffff0c; border: 1px solid #38342d; }
  .seg button { border-radius: 6px; }
  .seg button[aria-pressed="true"] { background: linear-gradient(#51483b, #342e25); box-shadow: inset 0 1px 0 #ffffff20, 0 2px 3px #0009; }
  .preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .preset-grid button { background: linear-gradient(#302d27, #24211d); border: 1px solid #494237; box-shadow: 0 2px 3px #0004, inset 0 1px 0 #ffffff0a; font-size: 12px; white-space: normal; }
  .preset-grid button[aria-pressed="true"] { color: #ebcda6; border-color: #a88a60; background: #393025; box-shadow: inset 0 2px 4px #0008; }
  .slider { padding: 12px 10px; background: linear-gradient(#1c1a17, #23201b); border: 1px solid #373229; border-radius: 9px; box-shadow: inset 0 1px 4px #0005; }
  .slider input[type="range"] { appearance: none; -webkit-appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(to right, #aa8960 var(--fill,50%), #0c0b09 var(--fill,50%)); box-shadow: inset 0 2px 3px #000a, 0 1px 0 #ffffff18; margin: 10px 2px; }
  .slider input::-webkit-slider-thumb { appearance: none; width: 22px; height: 28px; border-radius: 4px; border: 1px solid #bfb09a; background: repeating-linear-gradient(90deg, transparent 0 3px, #0002 3px 4px), linear-gradient(#e1d7c6, #938470 48%, #c3b59f 52%, #796c5b); box-shadow: 0 3px 6px #000a, inset 0 1px 0 #fff9; cursor: ew-resize; }
  .slider input::-moz-range-thumb { width: 20px; height: 26px; border-radius: 4px; border: 1px solid #bfb09a; background: linear-gradient(#ded4c4,#8e806c,#c3b59f); box-shadow: 0 3px 6px #000a; }
  .slider input:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
  .dial { cursor: grab; touch-action: none; width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; border: 2px solid #6a5f4e; background: repeating-conic-gradient(#524b40 0deg 4deg, #292620 4deg 9deg); box-shadow: 0 3px 5px #000b, inset 0 0 0 5px #292620; position: relative; transform: rotate(var(--rotation,0deg)); }
  .dial::after { content: ""; position: absolute; top: 5px; left: 16px; width: 2px; height: 10px; background: #e1c091; border-radius: 2px; }
  #quiet-mode, #sound { display: flex; align-items: center; gap: 10px; background: none; color: var(--fg); padding-left: 0; }
  #quiet-mode::before, #sound::before { content: ""; width: 36px; height: 19px; border-radius: 12px; border: 1px solid #5f5444; background: radial-gradient(circle at 9px 50%, #ad9d86 0 6px, transparent 7px), #100f0d; box-shadow: inset 0 2px 4px #0008; }
  #quiet-mode[aria-pressed="true"]::before, #sound[aria-pressed="true"]::before { background: radial-gradient(circle at 26px 50%, #e2c298 0 6px, transparent 7px), #5a4730; }
  .language-switch { align-items: center; padding: 2px; gap: 0; }
  .language-switch button, .tools .language-switch button { min-width: 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; border: none; border-radius: 5px; justify-content: center; font-size: 11px; opacity: .9; }
  .tweaks-head .language-switch { margin-left: auto; margin-right: 10px; }
  .scene-caption { top: max(54px, env(safe-area-inset-top)); bottom: auto; padding: 0 20px; color: #e7ddcd; }
  .scene-caption h1 { font-size: clamp(24px, 3.2vw, 46px); letter-spacing: .03em; font-weight: 400; }
  .scene-caption p { font-size: clamp(14px, 1.3vw, 18px); opacity: .8; margin-top: 12px; }
  body.intro-hidden .scene-caption, body.close-view .scene-caption { opacity: 0; }
  body.resting:not(.intro-hidden):not(.close-view) .scene-caption { opacity: 1; }
  #discovery-hint { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 20px; right: 20px; text-align: center; font-size: 11px; letter-spacing: .02em; color: #948779; opacity: .55; pointer-events: none; }
  @media (max-width: 720px) { .scene-caption { top: 88px; } #discovery-hint { font-size: 10px; } body.tweaking #discovery-hint { bottom: 8px; } }

  #zen-settings { border: 1px solid #665640; background: linear-gradient(#3d362b,#242018); width: 100%; letter-spacing: .1em; }
  body.zen .tools { display: flex; opacity: 0; transition: opacity .3s; min-width: 110px; min-height: 70px; top: 0; right: 0; justify-content: center; align-items: center; }
  body.zen .tools:hover, body.zen .tools:focus-within { opacity: .75; }
  body.zen .tools > :not(#zen-toggle) { display: none; }
  body.zen #zen-toggle { height: 40px; }
  body.zen .scene-caption, body.zen #discovery-hint, body.zen #tweaks { display: none; }
  #zen-status { position: fixed; left: 20px; right: 20px; bottom: 20px; text-align: center; color: #c6b89f; background: #171512d9; padding: 12px; border-radius: 8px; font-size: 12px; z-index: 5; }

  /* 作品の切り替えスイッチ（右下）。表示領域の中に置くので、Tweaks を開くと作品といっしょに左へ寄る。 */
  .fidget-switch { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 2; display: flex; transition: opacity .6s ease; }
  .fidget-switch[hidden] { display: none; }
  .fidget-switch > * { flex: 0 0 auto; }
  .fidget-switch button { font-size: 13px; padding: 7px 14px; min-height: 36px; }
  .fidget-switch button[aria-checked="true"] { background: linear-gradient(#51483b, #342e25); box-shadow: inset 0 1px 0 #ffffff20, 0 2px 3px #0009; color: var(--accent); }
  body.resting .fidget-switch { opacity: .12; }
  body.resting .fidget-switch:hover, body.resting .fidget-switch:focus-within { opacity: 1; }
  body.zen .fidget-switch { display: none; }
  /* 作品の入れ替え: 絵をいったん薄くする */
  #stage, #board { transition: opacity .18s ease; }
  #viewport.switching #stage, #viewport.switching #board, #viewport.switching .scene-caption { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { #stage, #board { transition: none; } .fidget-switch { transition: none; } }
  @media (max-width: 720px) { #discovery-hint { right: 150px; text-align: left; } }