body { background: #090b10; padding: 14px 18px; }
main { width: 100%; max-width: none; }
.masthead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 24px; }
.wordmark { font: 26px Georgia, serif; color: #eee4ce; }
.edition { color: #aa8c59; font: 11px 'Segoe UI', sans-serif; letter-spacing: 3px; margin-left: 16px; }
.masthead a { color: #a6a6ad; font-size: 12px; text-decoration: none; border-bottom: 1px solid #655338; padding-bottom: 4px; }
#stage3d { position: relative; border: 1px solid #33302a; border-radius: 10px; overflow: hidden; background: #090b11; }
#stageCanvas { display: block; width: 100%; height: calc(100dvh - 122px); min-height: 410px; outline: none; }
#stageCanvas:focus-visible { outline: 2px solid #b79a62; outline-offset: -3px; }
#pianoCanvas { display: none; }
.scene-caption { position: absolute; left: 22px; top: 19px; pointer-events: none; color: #bcb9ad; font-size: 10px; letter-spacing: 3px; }
.scene-caption span { display: block; margin-top: 7px; color: #858990; font-size: 9px; letter-spacing: 2px; }
.camera-bar { display: flex; align-items: center; gap: 7px; padding: 10px 0; flex-wrap: wrap; }
.camera-bar button { background: #14161b; border: 1px solid #303038; color: #bfc0c5; border-radius: 5px; font-size: 11px; letter-spacing: 1px; padding: 10px 18px; }
.camera-bar button[aria-pressed="true"] { border-color: #a88a52; color: #ead6ad; background: #27221a; }
.camera-bar kbd { margin-left: 6px; font: inherit; color: #c6a566; }
.camera-bar button:focus-visible, .masthead a:focus-visible { outline: 2px solid #ead6ad; outline-offset: 3px; }
#render-status { margin-left: auto; color: #929ba2; font-size: 11px; }
.view-help { font-size: 11px; color: #92969e; line-height: 1.6; }
/* ABCJS still measures and rasterizes its SVG here; it is not a second UI. */
#dock { position: absolute; left: -20000px; top: 0; width: 1248px; visibility: hidden; pointer-events: none; }
#sheet { color: #201e1a; }
#stage3d .tablet-native-input { position: absolute; left: 0; top: 0; margin: 0; min-width: 0; max-width: none; max-height: none; transform-origin: 0 0; z-index: 3; box-sizing: border-box; border: 2px solid #c3974f; border-radius: 6px; background: #10151c; color: #e8e3d7; outline: none; resize: none; }
#stage3d .tablet-native-input[hidden] { display: none; }
#stage3d #abcInput { font: 24px/34px Consolas, monospace; padding: 20px; tab-size: 2; white-space: pre; overflow-wrap: normal; }
#stage3d #piece-title { font: 24px/34px 'Segoe UI', sans-serif; padding: 0 12px; }
@media (max-width: 700px) {
  body { padding: 10px; }
  .edition { display: none; }
  .wordmark { font-size: 22px; }
  #stageCanvas { min-height: 390px; height: calc(100dvh - 150px); }
  .camera-bar { gap: 5px; }
  .camera-bar button { padding: 10px 7px; font-size: 10px; letter-spacing: 0; }
  #render-status { width: 100%; margin-left: 0; }
  .scene-caption { left: 12px; top: 12px; letter-spacing: 1px; }
  .scene-caption span, .view-help { display: none; }
}