.bss { --bss-blue: #0000aa; background: var(--bss-blue); color: #fff; min-height: 100svh; padding: 26px 36px 32px; font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 1.6; color-scheme: dark; }
.bss * { box-sizing: border-box; }
.bss-shell { max-width: 1120px; margin: 0 auto; }
.bss a { color: inherit; text-decoration: none; }
.bss a:hover { text-decoration: underline; }
.bss-top { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; letter-spacing: 1.1px; opacity: .7; }
.bss-window-label { text-align: center; margin: 18px 0; }
.bss-window-label span { display: inline-block; max-width: 100%; padding: 3px 18px; background: #c0c0c0; color: var(--bss-blue); font-size: 17px; font-weight: bold; }
.bss-intro { margin: 28px 0 0; padding-top: 22px; border-top: 1px dashed #ffffff80; }
.bss-kicker { margin: 0 0 7px; }
.bss h1 { margin: 0 0 12px; font-family: inherit; font-size: clamp(27px, 4vw, 44px); line-height: 1.18; letter-spacing: -1.6px; color: #fff; font-weight: 700; }
.bss-intro p:last-child { margin: 0; opacity: .83; }
.bss-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px dashed #ffffff80; border-bottom: 1px dashed #ffffff80; padding: 12px 0; }
.bss-transport { display: flex; gap: 12px; flex-wrap: wrap; }
.bss button { border: 1px solid white; background: transparent; color: white; font: bold 14px/1.4 "Courier New", monospace; padding: 9px 17px; min-height: 42px; cursor: pointer; border-radius: 0; }
.bss button:hover { background: #ffffff22; }
.bss button.bss-primary { color: var(--bss-blue); background: #fff; min-width: 126px; }
.bss button.bss-primary:hover { background: #d7d7ff; }
.bss :is(button, a, input):focus-visible { outline: 2px dashed white; outline-offset: 5px; }
.bss-settings { display: flex; align-items: center; gap: 30px; margin-top: 0; flex-wrap: wrap; font-size: 12px; }
.bss-settings label { display: flex; align-items: center; gap: 12px; }
.bss input[type=range] { width: 96px; height: 20px; accent-color: #fff; cursor: pointer; }
.bss-score-panel { margin-top: 12px; }
.bss-score-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: .3px; }
.bss-score { display: grid; grid-template-columns: 1fr 1fr; margin: 20px -10px 12px; gap: 12px 16px; }
.bss-system { display: block; width: 100%; overflow: visible; color: white; fill: white; stroke: currentColor; stroke-width: 1.2; }
.bss-staff-line { opacity: .5; }
.bss-system text { stroke: none; }
.bss-clef { font: 55px "Noto Music", "Apple Symbols", "Segoe UI Symbol", serif; }
.bss-bass-clef { font-size: 47px; }
.bss-time { font: bold 24px Georgia, serif; }
.bss-bar-number { font: 15px "Courier New", monospace; opacity: .6; }
.bss-note { color: white; }
.bss-head { fill: currentColor; }
.bss-open-head { fill: var(--bss-blue); stroke: currentColor; stroke-width: 2.5; }
.bss-note-highlight { fill: white; stroke: none; opacity: 0; }
.bss-note.is-active { color: var(--bss-blue); }
.bss-note.is-active .bss-note-highlight { opacity: 1; }
.bss-note.is-active .bss-open-head { fill: white; }
.bss-bar-wash { fill: white; stroke: none; opacity: 0; }
.bss-bar-wash.is-active { opacity: .055; }
.bss-playhead { stroke: white; stroke-dasharray: 3 5; opacity: .55; display: none; }
.bss-playback { display: flex; align-items: center; gap: 24px; font-size: 10px; letter-spacing: .6px; margin-top: 14px; }
.bss progress { appearance: none; border: 1px solid #ffffff80; height: 7px; flex: 1; min-width: 20px; background: transparent; border-radius: 0; }
.bss progress::-webkit-progress-bar { background: transparent; }
.bss progress::-webkit-progress-value { background: white; }
.bss progress::-moz-progress-bar { background: white; }
.bss-footer { margin-top: 25px; border-top: 1px dashed #ffffff80; padding-top: 17px; font-size: 12px; }
.bss-footer p { margin: 0; }
.bss-hint { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; opacity: .6; font-size: 11px; }
@media (min-width: 1450px) { .bss { padding-top: 36px; } .bss-window-label { margin-top: 18px; } .bss-score { margin-top: 20px; row-gap: 12px; } }
@media (max-width: 760px) { .bss { padding: 20px; } .bss-top { font-size: 9px; letter-spacing: 0; } .bss-top > span { display: none; } .bss-window-label { margin: 18px 0; } .bss-score { grid-template-columns: 1fr; gap: 14px; } .bss-settings { gap: 14px 24px; } .bss-hint { flex-direction: column; } .bss-playback { gap: 12px; } .bss-playback > span:last-child { display: none; } .bss button { padding: 9px 11px; font-size: 12px; } .bss button.bss-primary { min-width: 90px; } }
@media (max-width: 420px) { .bss-score { margin-left: -12px; margin-right: -12px; } .bss-score-heading { font-size: 10px; } .bss-intro { font-size: 12px; } }

@media (max-width: 760px) { .bss-controls { position: sticky; top: 0; z-index: 2; background: var(--bss-blue); } }

.bss-movement { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 12px; }
.bss-movement { font-weight: bold; }

.bss-credit { padding-bottom: 16px; opacity: .8; }
.bss-credit a { text-decoration: underline; }

.bss-footer .bss-score-heading { margin-bottom: 16px; opacity: .7; }