/* A discreet sound selector and independent fader beneath the five navigation keys. */
#site-navigation{flex-direction:column;gap:2px}
.piano-volume{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-height:24px;margin:0;padding:0 2px;color:#b9aabd;font:400 10px/1.2 var(--mono);letter-spacing:.04em;cursor:default}
.piano-controls[hidden]{display:none}
.piano-volume>span{font:inherit;text-transform:none}
.piano-volume-icon{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.piano-volume output{min-width:5ch;text-align:right;font:inherit;font-variant-numeric:tabular-nums;color:#c9bfce}
.piano-volume input{appearance:none;-webkit-appearance:none;display:block;flex:none;width:88px;height:24px;padding:0;margin:0;border:0;border-radius:3px;background:transparent;cursor:pointer;accent-color:#c8b0ca}
.piano-volume input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#55475d;box-shadow:0 0 0 1px #07060a}
.piano-volume input::-moz-range-track{height:3px;border-radius:2px;background:#55475d;box-shadow:0 0 0 1px #07060a}
.piano-volume input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:15px;margin-top:-6px;border:1px solid #c7b3cd;border-radius:2px;background:linear-gradient(#6f5b77,#b8a2c1 45%,#46394e 52%);box-shadow:0 1px 3px #0008}
.piano-volume input::-moz-range-thumb{width:8px;height:15px;border:1px solid #c7b3cd;border-radius:2px;background:linear-gradient(#6f5b77,#b8a2c1 45%,#46394e 52%);box-shadow:0 1px 3px #0008}
.piano-volume input:focus-visible{outline:1px solid var(--sakura);outline-offset:2px}
@media(min-width:1101px){html{scroll-padding-top:154px}}
@media(max-width:1100px),(pointer:coarse){.piano-volume{justify-content:center;gap:10px;margin-top:6px;min-height:44px;font-size:11px;flex-shrink:0}.piano-volume input{width:112px;height:44px;touch-action:pan-y}.piano-volume input::-webkit-slider-thumb{width:12px;height:21px;margin-top:-9px}.piano-volume input::-moz-range-thumb{width:12px;height:21px}}
@media(min-width:1101px) and (pointer:coarse){html{scroll-padding-top:176px}}
/* Keep every key and the fader visible on phones held sideways. */
@media(min-width:480px) and (max-width:1100px) and (max-height:500px){
 .navigation #site-navigation ul{flex-direction:row;gap:2px}
 .navigation #site-navigation li{flex:1}
 .navigation #site-navigation a{min-width:0;min-height:66px;align-items:center;justify-content:flex-end;padding:20px 4px 7px;font-size:.75rem}
 .navigation #site-navigation a small{font-size:.43rem;letter-spacing:.06em}
 .navigation #site-navigation li:not(:last-child):not(:nth-child(2))::after{top:0;right:-5px;bottom:auto;width:10px;height:24px}
 .menu-ready .menu-open .navigation>nav{padding:10px}
 .piano-volume{margin-top:0}
}
@media(forced-colors:active){.piano-volume,.piano-volume output{color:CanvasText}.piano-volume input{appearance:auto;-webkit-appearance:auto;accent-color:Highlight}.piano-volume input:focus-visible{outline-color:Highlight}}

.piano-controls{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%;padding:0 2px}
.piano-sound{display:flex;align-items:center;flex:none;margin:0}
.piano-sound select{display:block;width:126px;min-height:28px;padding:2px 20px 2px 7px;border:1px solid #79638266;border-radius:5px;background:#100c16;color:#d5c4d9;font:400 10px/1.3 var(--body);letter-spacing:.02em;cursor:pointer;color-scheme:dark}
.piano-sound select:focus-visible{outline:2px solid var(--sakura);outline-offset:2px}
.piano-sound option{color:#e9dfee;background:#17111d}
@media(max-width:1100px){.menu-ready .navigation #site-navigation{background:#0d0b12fc;border-radius:8px}}
@media(max-width:1100px),(pointer:coarse){
 .piano-controls{gap:10px;margin-top:6px;flex-shrink:0}
 .piano-sound select{width:134px;min-height:44px;font-size:12px}
 .piano-controls .piano-volume{margin:0;gap:7px}
 .piano-controls .piano-volume input{width:88px}
}
@media(max-width:399px){.piano-controls{gap:7px;padding:0}.piano-sound select{width:119px;font-size:11px}.piano-controls .piano-volume{gap:5px;font-size:10px}.piano-controls .piano-volume input{width:76px}}
@media(min-width:480px) and (max-width:1100px) and (max-height:500px){.piano-controls{margin-top:0}}
@media(forced-colors:active){.piano-sound select{background:Canvas;color:CanvasText;border-color:ButtonText}}

/* Only the playable keys claim touch drags; the page and the sound controls keep normal gestures. */
#site-navigation ul,#site-navigation [data-piano-note]{touch-action:none}
#site-navigation [data-piano-note]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.navigation #site-navigation [data-piano-note].is-piano-pressed{transform:translateY(3px);box-shadow:inset 0 -3px var(--key-light),0 4px 18px color-mix(in srgb,var(--key-light) 35%,transparent)}
@media(forced-colors:active){.navigation #site-navigation [data-piano-note].is-piano-pressed{outline:2px solid Highlight;outline-offset:-3px}}