html.bw-web body{position:relative}html.bw-web{background:var(--bg-bot)}html.bw-web body{background:linear-gradient(180deg,var(--bg-top) 0,var(--bg-bot) 900px) var(--bg-bot);color:var(--text)}html.bw-web .bw-header{position:fixed;top:0;left:0;right:0}.bw-stage{position:absolute;display:flex;flex-direction:column;gap:10px;width:1120px;transform-origin:0 0}.bw-start{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--scrim);backdrop-filter:blur(3px)}.bw-start-card{max-width:440px;margin:16px;padding:28px 28px 22px;text-align:center;background:var(--popup-bg);color:var(--text);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 16px 48px var(--shadow)}.bw-start-title{font-size:26px;font-weight:700;letter-spacing:.16em}.bw-start-blurb{margin:10px 0 20px;font-size:14px;line-height:1.5;opacity:.85}.bw-start-button{min-width:160px;padding:10px 22px;font:inherit;font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--bg-top);background:var(--accent);border:1px solid var(--accent);border-radius:8px;cursor:pointer}.bw-start-button:disabled{cursor:default;opacity:.6}.bw-start-note{margin-top:16px;font-size:11px;opacity:.6}.bw-keys-bar{display:flex;gap:10px;height:78px;padding:8px 10px;color:var(--text);background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 32px var(--shadow);user-select:none}.bw-keys-side{display:flex;flex-direction:column;justify-content:space-between;width:112px;font-size:11px;letter-spacing:.08em}.bw-keys-label{font-weight:700;opacity:.8}.bw-keys-octave{display:flex;align-items:center;gap:6px}.bw-keys-octave button{width:22px;height:20px;padding:0;font:inherit;color:inherit;background:var(--wash);border:1px solid var(--line-strong);border-radius:4px;cursor:pointer}.bw-keys-toggle{display:flex;align-items:center;gap:4px;cursor:pointer;opacity:.85}.bw-keys{position:relative;display:flex;flex:1;touch-action:none}.bw-key{flex:1;margin:0 1px;background:var(--well);border:1px solid var(--line);border-radius:0 0 4px 4px;cursor:pointer}.bw-key.black{position:absolute;top:0;height:60%;margin:0;z-index:1;background:var(--text);border:1px solid var(--line-strong)}.bw-key.down,.bw-key.black.down{background:var(--accent)}.bw-copyright{position:absolute;left:0;right:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;text-align:center;color:var(--text);opacity:.75}.bw-copyright a{color:var(--accent);text-decoration:none}.bw-copyright a:hover{text-decoration:underline}html.bw-shot .bw-header,html.bw-shot .bw-copyright,html.bw-shot .bw-keys-bar,html.bw-shot .bw-start{display:none}.bw-header{--hdr-text: #e6ddcc;--hdr-muted: rgba(230, 221, 204, .62);--hdr-line: rgba(230, 221, 204, .14);--hdr-hover: #d09068;--hdr-accent: #98a0cf;--hdr-on-accent: #1d1a16;--hdr-fill: rgba(230, 221, 204, .05);position:sticky;top:0;z-index:50;background:var(--bg-top);display:flex;align-items:center;gap:16px;padding:10px 14px;border-bottom:1px solid var(--hdr-line);color:var(--hdr-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:normal}[data-theme=linen] .bw-header{--hdr-text: #2a2631;--hdr-muted: rgba(42, 38, 49, .62);--hdr-line: rgba(42, 38, 49, .16);--hdr-hover: #3b4cb8;--hdr-accent: #3b4cb8;--hdr-on-accent: #f4efe3;--hdr-fill: rgba(42, 38, 49, .05)}@media(max-width:720px){.bw-header{flex-wrap:wrap;gap:8px 12px}.bw-header-note{display:none}}.bw-header a{color:inherit;text-decoration:none}.bw-header-home{flex:none;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--hdr-muted)!important}.bw-header-title{flex:none;font-size:16px;font-weight:700;letter-spacing:.14em}.bw-header-note{flex:1;min-width:0;font-size:12px;color:var(--hdr-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bw-header-link,.bw-header-button{flex:none;padding:5px 12px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--hdr-text);background:var(--hdr-fill);border:1px solid var(--hdr-line);border-radius:6px;cursor:pointer}.bw-header-home:hover,.bw-header-link:hover,.bw-header-button:hover{color:var(--hdr-hover)!important;border-color:var(--hdr-hover)}.bw-header-button[aria-pressed=true]{color:var(--hdr-on-accent);background:var(--hdr-accent);border-color:var(--hdr-accent)}.bw-theme{--hdr-text: #e6ddcc;--hdr-accent: #98a0cf;--hdr-on-accent: #1d1a16;--hdr-line: rgba(230, 221, 204, .2);flex:none;display:inline-flex;border:1px solid var(--hdr-line);border-radius:8px;overflow:hidden}[data-theme=linen] .bw-theme{--hdr-text: #2a2631;--hdr-accent: #3b4cb8;--hdr-on-accent: #f4efe3;--hdr-line: rgba(42, 38, 49, .2)}.bw-theme button{padding:6px 12px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--hdr-text);background:transparent;border:0;opacity:.65;cursor:pointer}.bw-theme button[aria-pressed=true]{opacity:1;color:var(--hdr-on-accent);background:var(--hdr-accent)}