#cws-hands{--hf-ink:light-dark(#213b3c,#e1e8dc);--hf-muted:light-dark(#637b7c,#a9beba);--hf-paper:light-dark(#f1f2ed,#14242a);--hf-line:light-dark(#c8cfca,#43575b);--hf-copper:light-dark(#965432,#e0a879);--hf-lower:light-dark(#75898b,#76989b);color:var(--hf-ink);background:var(--hf-paper);min-height:100svh;display:flex;flex-direction:column;font-family:Arial,sans-serif}
#cws-hands .hf-header{display:flex;align-items:baseline;gap:18px;padding:22px 32px 14px;border-bottom:1px solid var(--hf-line)}
#cws-hands .hf-header a{color:var(--hf-ink);text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:monospace}
#cws-hands .hf-header a em{font-style:normal;color:var(--hf-copper)}
#cws-hands .hf-header h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:20px;margin:0;letter-spacing:-.02em}
#cws-hands .hf-header nav{margin-left:auto;display:flex;gap:18px}
#cws-hands .hf-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 32px 12px}
#cws-hands .hf-opus{font-family:monospace;color:var(--hf-muted);font-size:13px;letter-spacing:.02em;margin:0 0 6px}
#cws-hands .hf-name{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(28px,4.4vw,48px);letter-spacing:-.04em;line-height:1.05;margin:0}
#cws-hands .hf-stamp{font-family:monospace;font-size:12px;letter-spacing:.09em;color:var(--hf-muted);text-align:right}
#cws-hands .hf-stamp select{font:inherit;color:var(--hf-ink);background:transparent;border:1px solid var(--hf-line);padding:4px 6px;margin-left:6px;max-width:46vw}
#cws-hands .hf-shell{padding:0 32px}
#cws-hands #hf-stage{display:block;width:100%;aspect-ratio:14/5;margin:0;background:var(--hf-paper)}
#cws-hands .hf-status{font-family:Georgia,serif;font-style:italic;color:var(--hf-muted);font-size:14px;min-height:20px;padding:8px 0 0}
#cws-hands .hf-bar{display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:14px;align-items:center;padding:12px 0 10px;border-top:1px solid var(--hf-line);font-size:13px}
#cws-hands button{font:inherit;color:var(--hf-ink);background:transparent;border:1px solid var(--hf-line);padding:9px 16px;cursor:pointer;border-radius:2px;min-height:40px}
#cws-hands button:hover{border-color:var(--hf-ink)}
#cws-hands .hf-play{background:var(--hf-ink);color:var(--hf-paper);border-color:var(--hf-ink);min-width:96px}
#cws-hands input[type=range]{width:100%;accent-color:var(--hf-copper)}
#cws-hands .hf-time{font-family:monospace;font-size:12px;letter-spacing:.08em;color:var(--hf-muted);min-width:9ch;text-align:right}
#cws-hands label{font-size:12px;color:var(--hf-muted)}
#cws-hands label select{font:inherit;color:var(--hf-ink);background:transparent;border:1px solid var(--hf-line);padding:4px 6px}
#cws-hands .hf-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;padding:6px 0 22px;color:var(--hf-muted);font-size:12px;border-top:1px solid var(--hf-line)}
#cws-hands .hf-footer a{color:inherit}
#cws-hands .hf-kin{color:var(--hf-copper);font-family:Georgia,serif;font-style:italic;font-size:14px}
#cws-hands .hf-note{font-family:Georgia,serif;font-style:italic;color:var(--hf-muted);font-size:14px;padding:0 0 28px;max-width:70ch}
#cws-hands [hidden]{display:none}
@media(max-width:620px){#cws-hands .hf-header,#cws-hands .hf-title{padding-left:20px;padding-right:20px}#cws-hands .hf-shell{padding:0 20px}#cws-hands .hf-title{flex-direction:column;align-items:flex-start}#cws-hands .hf-stamp{text-align:left}#cws-hands .hf-bar{grid-template-columns:auto auto 1fr;grid-auto-rows:auto}}
@media(prefers-reduced-motion:reduce){#cws-hands .hf-play{transition:none}}

#cws-hands .hf-playpanel{padding:12px 0 6px;border-top:1px solid var(--hf-line)}
#cws-hands .hf-playbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-bottom:12px}
#cws-hands .hf-playbar button[aria-pressed=true]{border-color:var(--hf-copper);color:var(--hf-copper)}
#cws-hands .hf-button{display:inline-flex;align-items:center;font:inherit;color:var(--hf-ink);border:1px solid var(--hf-line);padding:9px 16px;border-radius:2px;text-decoration:none;min-height:40px;box-sizing:border-box}
#cws-hands .hf-midi{font-family:monospace;font-size:12px;letter-spacing:.06em;color:var(--hf-muted);margin-left:auto}
#cws-hands .hf-octave{display:inline-flex;align-items:center;gap:8px;font-family:monospace;font-size:12px;color:var(--hf-muted)}
#cws-hands .hf-octave button{padding:4px 10px;min-height:0}
#cws-hands .hf-keys{position:relative;height:120px;display:flex;user-select:none;touch-action:none}
#cws-hands .hf-keys .hf-w{flex:1;border:1px solid var(--hf-line);border-right:none;background:var(--hf-paper);position:relative;box-sizing:border-box;cursor:pointer}
#cws-hands .hf-keys .hf-w:last-child{border-right:1px solid var(--hf-line)}
#cws-hands .hf-keys .hf-w span{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:monospace;font-size:10px;color:var(--hf-muted)}
#cws-hands .hf-keys .hf-b{position:absolute;top:0;width:3.2%;height:62%;margin-left:-1.6%;background:var(--hf-ink);border:1px solid var(--hf-paper);box-sizing:border-box;cursor:pointer;z-index:1}
#cws-hands .hf-keys .hf-w.is-down{background:var(--hf-line)}
#cws-hands .hf-keys .hf-b.is-down{background:var(--hf-copper)}
#cws-hands .hf-hint{font-family:Georgia,serif;font-style:italic;color:var(--hf-muted);font-size:13px;padding:10px 0 0;margin:0}
#cws-hands.is-free .hf-stamp label,#cws-hands.is-free #hf-progress,#cws-hands.is-free #hf-time,#cws-hands.is-free #hf-speed,#cws-hands.is-free .hf-bar label:last-of-type{display:none}

#cws-hands[data-page=free] .hf-stamp label,#cws-hands[data-page=free] #hf-stamp{display:none}
#cws-hands[data-page=free]:not(.is-replay) .hf-bar{display:none}
#cws-hands[data-page=free].is-free .hf-bar{display:none}
#cws-hands[data-page=free].is-replay:not(.is-free) .hf-bar{display:grid}

#cws-hands .hf-bar{grid-template-columns:auto auto 1fr auto auto auto auto auto auto}
#cws-hands[data-page=free] #hf-sound option[value=recording]{display:none}
#cws-hands.is-dropping #hf-stage{outline:2px dashed var(--hf-copper);outline-offset:-6px}
@media(max-width:900px){#cws-hands .hf-bar{grid-template-columns:auto auto 1fr auto;grid-auto-flow:row dense}}

#cws-hands .hf-bar label,#cws-hands .hf-playbar label{display:inline-flex;align-items:center;gap:8px;font-size:13px}
#cws-hands .hf-bar label select,#cws-hands .hf-playbar label select{font:inherit;font-size:14px;color:var(--hf-ink);background:var(--hf-paper);border:1px solid var(--hf-line);padding:9px 12px;min-height:40px;border-radius:2px;cursor:pointer}
#cws-hands .hf-bar label select:hover,#cws-hands .hf-playbar label select:hover{border-color:var(--hf-ink)}

#cws-hands .hf-tempo input{font:inherit;font-size:14px;width:5ch;color:var(--hf-ink);background:var(--hf-paper);border:1px solid var(--hf-line);padding:9px 8px;min-height:40px;box-sizing:border-box;border-radius:2px}
#cws-hands .hf-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--hf-muted);min-height:40px}
#cws-hands .hf-check input{accent-color:var(--hf-copper);width:16px;height:16px}
@media(max-width:620px){#cws-hands .hf-keys{height:180px}#cws-hands .hf-keys .hf-b{width:5%;margin-left:-2.5%}#cws-hands .hf-playbar{gap:8px}#cws-hands .hf-midi{margin-left:0;width:100%}}

#cws-hands.is-embed .hf-header,#cws-hands.is-embed .hf-title,#cws-hands.is-embed .hf-status,#cws-hands.is-embed .hf-bar,#cws-hands.is-embed .hf-footer,#cws-hands.is-embed #hf-playpanel,#cws-hands.is-embed #hf-error{display:none}
#cws-hands.is-embed .hf-shell{padding:0}

#cws-hands .hf-bar{grid-template-columns:auto auto 1fr auto auto auto auto auto auto auto}
#cws-hands #hf-roll[aria-pressed=true],#cws-hands #hf-roll2[aria-pressed=true]{border-color:var(--hf-copper);color:var(--hf-copper)}

#cws-hands.is-roll #hf-stage{aspect-ratio:16/10}

#cws-hands{touch-action:manipulation}
#cws-hands #hf-stage,#cws-hands .hf-keys{touch-action:none}
#cws-hands button,#cws-hands select,#cws-hands input,#cws-hands a{touch-action:manipulation}