.vex-page{padding-bottom:4rem}.vex-page>p:not(.eyebrow){max-width:70ch}.vex-player{margin:2.5rem 0 1.5rem;border:1px solid var(--border,#7775);border-radius:12px;padding:clamp(1rem,3vw,2rem);background:var(--surface,#17171708)}.vex-top,.vex-actions,.vex-meta,.vex-progress{display:flex;align-items:center;justify-content:space-between;gap:1rem}.vex-top{align-items:start}.vex-top h2{font-size:clamp(1.1rem,2.5vw,1.6rem);margin:.4rem 0 1.4rem}.vex-overline,.vex-meta small{font-size:.7rem;letter-spacing:.11em;opacity:.65}.vex-status{font-size:.75rem;opacity:.75;text-align:right}.vex-score{position:relative;overflow:hidden;border:1px solid var(--border,#7774);border-radius:7px;min-height:240px;background:#111;color:#e6e6e6}.vex-score svg{display:block;width:100%;height:auto;min-height:220px}.vex-score svg[hidden]{display:none}.vex-placeholder{min-height:240px;display:grid;place-items:center;padding:2rem;text-align:center;opacity:.65;font-size:.9rem}.vex-progress{margin:1.2rem 0;font-variant-numeric:tabular-nums;font-size:.8rem}.vex-progress input{flex:1;min-width:30px}.vex-actions{justify-content:flex-start;flex-wrap:wrap}.vex-actions button,.vex-upload{border:1px solid currentColor;background:transparent;color:inherit;padding:.65rem 1rem;border-radius:5px;font:inherit;font-size:.85rem;cursor:pointer}.vex-actions button:disabled{opacity:.35;cursor:not-allowed}.vex-actions button:focus-visible,.vex-upload:focus-within{outline:2px solid currentColor;outline-offset:3px}.vex-upload{position:relative;overflow:hidden}.vex-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.vex-volume{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.8rem}.vex-volume input{width:90px}.vex-meta{border-top:1px solid var(--border,#7774);margin-top:1.5rem;padding-top:1.4rem;flex-wrap:wrap}.vex-meta>div{display:flex;flex-direction:column;gap:.25rem}.vex-meta strong{font-size:1.4rem;font-weight:500;font-variant-numeric:tabular-nums}.vex-meta strong span{opacity:.4;font-size:.8rem}.vex-meta label{font-size:.85rem}.vex-note,.vex-foot{font-size:.83rem;opacity:.7;line-height:1.65}.vex-note{margin:1.5rem 0 0}@media(max-width:620px){.vex-top{display:block}.vex-status{display:block;text-align:left;margin-bottom:1rem}.vex-volume{margin-left:0;width:100%}.vex-score{min-height:190px}.vex-placeholder{min-height:190px}.vex-meta{gap:1.5rem}}

.vex-directory{margin:2rem 0 4rem}.vex-directory>a{display:block;border:1px solid var(--border,#7775);border-radius:10px;padding:clamp(1.2rem,3vw,2rem);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}.vex-directory>a:hover{border-color:currentColor;transform:translateY(-2px)}.vex-directory h2{margin:.5rem 0;font-size:clamp(1.3rem,3vw,2rem)}.vex-directory h2 span{font-size:.8em;opacity:.55}.vex-directory p{margin:0;opacity:.7}.vex-page>.eyebrow a{color:inherit;text-decoration:none}.vex-page>.eyebrow a:hover{text-decoration:underline}@media(prefers-reduced-motion:reduce){.vex-directory>a{transition:none}.vex-directory>a:hover{transform:none}}

/* Explicitly reveal the generated score even when hidden was set in markup. */
.vex-score #vex-svg:not([hidden]){display:block;width:100%;height:auto;min-height:0}
.vex-score .vex-placeholder[hidden]{display:none}

/* Piano-roll visualization: preserve readable keyboard proportions on all screens. */
.vex-score #vex-svg{display:block;aspect-ratio:900/260;width:100%;height:auto;min-height:0}
.vex-score #vex-svg[hidden]{display:none}
@media(max-width:620px){.vex-score{min-height:0}.vex-score #vex-svg{min-width:600px}.vex-score{overflow-x:auto}}

/* 0.7.58.004: crisp piano keys and restrained controls */
.vex-score svg rect[data-key]{transition:fill .08s linear}
.vex-actions{gap:.65rem}
.vex-actions button{min-height:42px}
@media(prefers-reduced-motion:reduce){.vex-score svg rect[data-key]{transition:none}}

/* 0.7.58.008: restrained, consistent transport controls and timbre selector */
.vex-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-color:var(--border,#7778);border-radius:7px;min-height:42px;transition:background .15s ease,border-color .15s ease}
.vex-actions button:not(:disabled):hover{background:var(--surface-hover,#8881);border-color:currentColor}
.vex-actions button:not(:disabled):active{transform:translateY(1px)}
.vex-btn-icon{display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vex-btn-play{fill:currentColor;stroke:none}
.vex-timbre{display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;margin-left:auto}
.vex-timbre select{font:inherit;color:inherit;background:var(--surface,#171717);border:1px solid var(--border,#7778);border-radius:6px;padding:.5rem .6rem;max-width:125px}
.vex-timbre select:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.vex-volume{margin-left:0}
@media(max-width:620px){.vex-timbre{margin-left:0}.vex-volume{width:auto}}
@media(prefers-reduced-motion:reduce){.vex-actions button{transition:none}.vex-actions button:not(:disabled):active{transform:none}}

/* 0.7.58.009: neutral grey accents, scoped to Vexations only. */
.vex-player input[type="range"],.vex-player input[type="checkbox"]{accent-color:#999!important}
.vex-player input[type="range"]::-webkit-slider-thumb{background:#a3a3a3;border-color:#a3a3a3}
.vex-player input[type="range"]::-moz-range-thumb{background:#a3a3a3;border-color:#a3a3a3}
.vex-player input[type="checkbox"]{color-scheme:dark}