#photoStage .instrument-shell{width:100%;position:relative;overflow:visible;user-select:none;-webkit-user-select:none}
#armonium{width:100%;max-width:1448px;margin:0 auto;position:relative;aspect-ratio:1448/1086;isolation:isolate;overflow:visible;touch-action:pan-y}
#armonium .case-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
#armonium .control,#armonium .toggle-track,#armonium .audio-icon,#armonium .tempo-groove,#armonium .tempo-input,#armonium .tempo-handle{
 position:absolute;left:var(--x);top:var(--y);
 width:var(--w);height:var(--h);
}
#armonium .control{border:0;background:transparent;padding:0;cursor:pointer;appearance:none;touch-action:none;border-radius:15%;-webkit-tap-highlight-color:transparent;transform-origin:center;transition:filter .12s ease,transform .09s ease}
#armonium .control img,#armonium .toggle-track img,#armonium .tempo-groove img,#armonium .tempo-handle img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
#armonium .control:hover{filter:brightness(1.12)}
#armonium .control:active,#armonium .control.pressed{filter:brightness(.74) saturate(1.12);transform:translateY(2px) scale(.97)}
#armonium .transport[data-control="play"][aria-pressed="true"]{filter:drop-shadow(0 0 4px #ead3a5b0)}
#armonium .control:focus-visible,#armonium .tempo-input:focus-visible,#armonium .piano-key:focus-visible{outline:3px solid #fff5af;outline-offset:2px}
#armonium .toggle-track,#armonium .tempo-groove,#armonium .tempo-handle,#armonium .audio-icon{pointer-events:none}
#armonium .toggle-note{border-radius:50%;transition:transform .2s cubic-bezier(.2,.8,.3,1)}
#armonium .toggle-note.on{transform:translateX(178%)}
#armonium .chord.on{transform:translateY(-9%)}
#armonium .knob{border-radius:50%;}
#armonium .knob img{transform:rotate(var(--knob-rotation,0deg));transition:transform .18s ease}
#armonium .mode{border-radius:50%}
#armonium .mode.active{filter:drop-shadow(0 0 6px #ddf8ab50)}
#armonium .tempo-input{z-index:13;cursor:ew-resize;touch-action:none}
#armonium .tempo-handle{z-index:12;transform:translateX(var(--tempo-shift,0%));transition:transform .08s ease;will-change:transform}
#armonium .keyboard{position:absolute;inset:0;pointer-events:none}
#armonium .piano-key{display:block;position:absolute;z-index:3;margin:0;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;touch-action:none;border-radius:0 0 5px 5px;outline-offset:1px}
#armonium .piano-key.white.pressed{background:linear-gradient(180deg,transparent 0%,rgba(216,161,74,.34) 66%,rgba(211,151,59,.47) 100%);box-shadow:inset 0 0 10px #a36d39a8}
#armonium .piano-key.black{z-index:4;border-radius:0 0 4px 4px}
#armonium .piano-key.black.pressed{background:linear-gradient(90deg,#f5dfa938,#fce59b5e);box-shadow:inset 0 0 5px #eed189ad}
#armonium .display-data{position:absolute;left:34%;top:19%;width:32%;height:3%;font-size:clamp(8px,1.4vw,18px);text-align:center;color:#f2d6a5;text-shadow:0 0 9px #f5bf6070;pointer-events:none}

/* El instrumento y sus mandos se componen a partir del PNG transparente. */
#photoStage #armonium{width:100%;max-width:none;margin:0;aspect-ratio:1448/1086;}
#armonium .control{z-index:7;}
#armonium .mode-buttons{display:contents;}
#armonium .keyboard{z-index:6;}
#armonium .key-name{display:none;position:absolute;left:0;right:0;bottom:5%;font:600 clamp(7px,.85vw,12px)/1 system-ui,sans-serif;text-align:center;color:#55442d;text-shadow:0 1px #fff;pointer-events:none}
#armonium.show-note-names .piano-key.white .key-name{display:block}
#armonium.show-note-names .piano-key.black .key-name{display:block;color:#fff5d5;bottom:10%;font-size:clamp(6px,.68vw,10px);text-shadow:0 1px #111}
#armonium .song-name-display{position:absolute;z-index:8;left:11.7%;top:35.6%;width:16.5%;font:600 clamp(9px,1.10vw,17px)/1.05 'EB Garamond',Georgia,serif;color:#fce4b2;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none;text-shadow:0 1px 2px #16100b}
#armonium .recording-launcher{position:absolute;left:25.08%;top:46.28%;width:3.3%;height:4.1%;z-index:9;border:0;background:transparent;cursor:pointer;border-radius:50%;}
#armonium .recording-launcher:hover{background:#f0d0804d;box-shadow:0 0 9px #e0b35db0}
#armonium .recording-launcher:focus-visible{outline:3px solid #ffe39b}
#armonium .recording-launcher svg{width:100%;height:100%;pointer-events:none}
#armonium .digital-screen{z-index:5;left:34.1%;top:18.6%;width:31.1%;height:20.0%;}
#photoStage #songPickerMenu{top:40.75%;left:10.6%;z-index:100;}
#photoStage #songMenuPortal{position:static;}
/* Teclas transparentes alineadas con el teclado real del PNG. */
#armonium .piano-key{z-index:6;}
#armonium .piano-key.black{z-index:7;}
#armonium .case-image{width:100%;height:100%;}
@media(max-width:960px){#armonium .song-name-display{font-size:15px}#armonium .key-name{font-size:12px}}
/* En pantallas estrechas, el menú de los 50 cantos debe permanecer visible
   aunque el usuario haya desplazado el armonio horizontalmente. */
@media (max-width:960px){
  #photoStage #songPickerMenu{
    position:fixed!important;
    top:35vh!important;
    left:50vw!important;
    transform:translateX(-50%)!important;
    width:min(420px,calc(100vw - 22px))!important;
    max-height:48vh!important;
  }
}