/* Knock sound (Neo, 2026-11-04): a fifth bezel at the end of the window buttons, same pewter frame; lit green when a sound is on.
   Its dropdown matches the window flyout (#fly). */
.sndb{all:unset;box-sizing:border-box;order:9;cursor:pointer;position:relative;width:32px;height:32px;border-radius:4px;border:1px solid;border-color:#e4e9e5 #9aa29c #5f6862;background:#020403;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000;transition:transform .08s}
.sndb i{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;border-radius:3px;border:1px solid #000;box-shadow:inset 0 2px 5px rgba(0,0,0,.95);
 font:normal 400 19px/1 Alegreya,serif;color:#5d6660;transition:color .25s,text-shadow .25s}
.sndb::after{content:"";position:absolute;inset:1px;border-radius:2px;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,transparent 50%)}
.sndb:hover i{color:#9aa29c}.sndb:active{transform:translateY(1px)}.sndb:focus-visible{outline:2px solid var(--seep);outline-offset:2px}
.sndb.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000,0 0 10px rgba(43,238,116,.35)}
.sndb.on i{color:#c8ffdc;text-shadow:0 0 6px rgba(43,238,116,.9),0 1px 1px #000}.sndb[aria-expanded="true"]{outline:2px solid #d9b45a;outline-offset:2px}

#sndfly{position:fixed;z-index:40;width:208px;padding:10px 10px 12px;border-radius:7px;background:linear-gradient(#0d100e,#050605);
 box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(201,208,203,.16),0 14px 30px rgba(0,0,0,.85);font-family:Alegreya,serif;color:#d9e6dc}
#sndfly[hidden]{display:none}
#sndfly .sh{font-size:14px;color:#9aa29c;padding:0 6px 7px}
#sndfly .sl{display:grid;gap:2px}
#sndfly .sl button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:4px;font-size:17px;line-height:1.2;cursor:pointer}
#sndfly .sl button:hover,#sndfly .sl button:focus-visible{background:#0f2219}
#sndfly .sl b{flex:none;width:10px;height:10px;border-radius:50%;background:#020403;box-shadow:inset 0 1px 2px #000,0 0 0 1px #5f6862}
#sndfly .sl .cur{color:#fff}#sndfly .sl .cur b{background:radial-gradient(circle at 40% 35%,#d8ffe6,#2bee74 55%,#0b6a33);box-shadow:0 0 0 1px #000,0 0 7px rgba(43,238,116,.8)}
#sndfly .sv{display:grid;grid-template-columns:auto 1fr 26px;align-items:center;gap:9px;margin-top:9px;padding:9px 8px 0;border-top:1px solid #1d2420;font-size:15px;color:#9aa29c}
#sndfly .sv em{font-style:normal;text-align:right;color:#d9e6dc}
/* the slider: a dark inset groove, green where it is filled, a pewter knob */
#sndfly input{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:none;cursor:pointer}
#sndfly input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#2bee74 0 var(--p,40%),#020403 var(--p,40%));box-shadow:inset 0 1px 2px #000,0 0 0 1px #000}
#sndfly input::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#2bee74 0 var(--p,40%),#020403 var(--p,40%));box-shadow:inset 0 1px 2px #000,0 0 0 1px #000}
#sndfly input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;border:1px solid #000;background:radial-gradient(circle at 38% 32%,#fff,#c9d0cb 30%,#6f7872 75%);box-shadow:0 1px 3px #000}
#sndfly input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:1px solid #000;background:radial-gradient(circle at 38% 32%,#fff,#c9d0cb 30%,#6f7872 75%);box-shadow:0 1px 3px #000}
#sndfly input:disabled{opacity:.35;cursor:default}
@media(max-width:700px){#sndfly{display:none}}