:root { --ink:#252824; --muted:#70766d; --paper:#f7f7f3; --card:#fff; --line:#e8ede5; --green:#637c59; --green-dark:#3f5039; --gold:#c89b63; --shadow:0 15px 32px rgba(42,43,38,.07); }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; } .page-shell { max-width:1190px; margin:auto; padding:0 36px 70px; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:var(--ink); text-decoration:none; font-family:Fraunces,serif; font-size:22px; font-weight:600; letter-spacing:-1.1px; } .brand span { color:var(--green); } .brand-mark { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:6px; background:var(--green); color:#fff!important; font-family:Arial; font-size:17px; border-radius:50% 50% 50% 5px; transform:rotate(-12deg); } .brand em { margin-left:7px; color:#98988e; font:500 10px 'DM Mono',monospace; letter-spacing:0; vertical-align:middle; } .midi-button { padding:8px 11px; border:1px solid #d5d8d0; border-radius:4px; color:#65725f; background:#fbfaf5; cursor:pointer; font:500 10px 'DM Mono',monospace; } .midi-button:hover { border-color:#9aaa93; background:#eef2eb; } .midi-button span { color:#d59c45; font-size:13px; }
.intro { padding:72px 0 43px; } .eyebrow,.card-label { margin:0 0 11px; color:var(--green); font:500 10px 'DM Mono',monospace; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:18px; font:600 clamp(43px,6.1vw,75px)/.98 Fraunces,serif; letter-spacing:-3.7px; } h1 i { color:var(--green); font-weight:500; } .lead { max-width:420px; color:var(--muted); font-size:15px; line-height:1.75; }
.composer { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(265px,.65fr); gap:22px; align-items:stretch; } .search-panel,.preview-card,.chord-card { background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); } .search-panel { padding:25px; border-radius:7px; } label { display:block; margin-bottom:11px; font-size:14px; font-weight:700; } .input-row { display:flex; gap:9px; } .input-wrap { min-width:0; flex:1; display:flex; align-items:center; height:54px; border:1px solid #d4d2c9; border-radius:5px; background:#fffefa; transition:.2s; } .input-wrap:focus-within { border-color:var(--green); box-shadow:0 0 0 3px #e4eadf; } .search-icon { padding-left:16px; color:#8c8d84; font:26px/1 Arial; transform:rotate(-20deg); } input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); padding:0 8px; font:500 16px 'DM Mono',monospace; } input::placeholder { color:#aaa9a0; } .clear-button { display:none; padding:0 14px; border:0; background:transparent; color:#95968d; font-size:24px; cursor:pointer; } .clear-button.visible { display:block; } .add-button { cursor:pointer; display:flex; align-items:center; gap:16px; padding:0 16px 0 20px; color:#fff; border:0; border-radius:5px; background:var(--green); font:700 13px Manrope,sans-serif; transition:.18s; } .add-button:hover { background:var(--green-dark); transform:translateY(-1px); } .add-button b { font:500 17px 'DM Mono',monospace; opacity:.65; } .add-button:disabled { opacity:.5; cursor:not-allowed; transform:none; } .field-help { margin:13px 0 0; color:#96978e; font-size:11px; } kbd { padding:2px 5px; border:1px solid #dad8cf; border-radius:3px; background:#f6f4ee; color:#6e7069; font:10px 'DM Mono',monospace; } .suggestions { min-height:22px; margin-top:13px; color:#787a71; font-size:12px; } .suggestions strong { color:var(--green-dark); } .suggestions.error { color:#a65449; }
.preview-card { position:relative; overflow:hidden; min-height:175px; border-radius:7px; padding:23px; background:#29332b; color:#f7f4ed; } .preview-card:after { content:'♫'; position:absolute; right:-10px; bottom:-52px; color:#40503f; font:180px Fraunces; transform:rotate(-12deg); } .preview-empty { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-content:center; height:100%; } .note-orb { display:grid; flex:0 0 auto; place-items:center; width:41px; height:41px; border:1px solid #82907d; border-radius:50%; color:#e6ba5b; font-size:20px; } .preview-empty p { margin:0; color:#d6d7d0; font:500 14px/1.55 Fraunces,serif; }
.preview-content { position:relative; z-index:1; } .preview-content .card-label { color:#c9d5c3; } .preview-top { display:flex; align-items:baseline; justify-content:space-between; } .preview-symbol { margin:0; font:500 39px/1 Fraunces,serif; letter-spacing:-1px; } .preview-name { margin:10px 0 17px; color:#d5d7d0; font-size:12px; } .preview-notes { display:inline-flex; gap:5px; align-items:center; color:#e8e6dd; font:11px 'DM Mono',monospace; } .preview-notes span { color:#aeb7a9; } .preview-content .preview-piano { height:94px; margin-top:17px; border-color:#7a8677; } .preview-content .preview-piano .white-key { border-color:#aaafa7; } .preview-content .preview-piano .black-key { background:#1f2520; }
.sequence-section { padding-top:73px; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:23px; } h2 { margin:0; font:600 26px/1.1 Fraunces,serif; letter-spacing:-1.1px; } h2 span { display:inline-grid; place-items:center; width:23px; height:23px; margin-left:5px; border-radius:50%; vertical-align:3px; background:#e6e9df; color:var(--green-dark); font:500 11px 'DM Mono',monospace; letter-spacing:0; } .text-button { padding:5px 0; color:#85877d; border:0; border-bottom:1px solid #aaa99f; background:transparent; cursor:pointer; font-size:11px; } .empty-state { display:flex; gap:16px; align-items:center; min-height:160px; padding:28px; border:1px dashed #d6d3c9; border-radius:7px; color:#92938a; } .empty-state span { color:#b4c0ac; font-size:34px; } .empty-state p { margin:0; font-size:12px; line-height:1.75; } .chord-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; } .chord-card { position:relative; overflow:hidden; padding:21px; border-radius:7px; animation:rise .35s ease both; } @keyframes rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } } .remove-card { position:absolute; top:14px; right:13px; width:24px; height:24px; border:0; border-radius:50%; color:#999b92; background:transparent; cursor:pointer; font-size:20px; line-height:1; } .remove-card:hover { color:#a65449; background:#f4e8e5; } .card-head { display:flex; justify-content:space-between; align-items:start; padding-right:22px; } .card-label { margin-bottom:4px; font-size:9px; } .card-symbol { margin:0; font:500 38px/.95 Fraunces,serif; letter-spacing:-1px; } .card-type { margin-top:4px; color:#899084; font:10px 'DM Mono',monospace; text-align:right; } .card-name { min-height:19px; margin:11px 0 16px; color:#73766e; font-size:12px; }
.piano { position:relative; display:flex; height:120px; border:1px solid #343632; border-radius:2px; overflow:hidden; background:#fff; } .white-key { position:relative; flex:1; min-width:0; border-right:1px solid #a7a7a2; background:#fcfcf9; transition:background .12s; } .white-key:last-child { border:0; } .black-key { position:absolute; z-index:2; top:0; width:9%; height:59%; border:1px solid #1c1e1b; border-radius:0 0 2px 2px; background:#30322f; transform:translateX(-50%); transition:background .12s; } .piano [data-note].midi-active { background:#d5a64c; } .key-dot { position:absolute; z-index:3; display:grid; place-items:center; width:21px; height:21px; border:2px solid #fffdf8; border-radius:50%; background:var(--gold); color:#473c22; font:700 10px 'DM Mono',monospace; box-shadow:0 1px 3px #78623066; transform:translateX(-50%); } .key-dot.white { bottom:10px; } .key-dot.black { top:23px; } .card-notes { display:flex; gap:10px; align-items:center; margin-top:15px; } .card-notes span { color:#a1a298; font:9px 'DM Mono',monospace; letter-spacing:.12em; } .card-notes strong { color:#555851; font:500 11px 'DM Mono',monospace; }
@media (max-width:760px) { .page-shell { padding:0 20px 45px; } .topbar { height:72px; } .topbar-note { display:none; } .intro { padding:51px 0 34px; } h1 { font-size:52px; } .composer { grid-template-columns:1fr; } .preview-card { min-height:130px; } .chord-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px) { .input-row { flex-direction:column; } .input-wrap { flex:none; } .add-button { height:47px; justify-content:center; } .chord-grid { grid-template-columns:1fr; } .sequence-section { padding-top:52px; } }

/* Reordenação dos cards */
.chord-card { padding-top:45px; transition:transform .16s, box-shadow .16s, opacity .16s; }
.chord-card.is-moving { opacity:.58; box-shadow:0 18px 35px rgba(42,43,38,.16); }
.move-card { position:absolute; top:14px; left:13px; display:flex; align-items:center; gap:5px; padding:4px 7px; border:0; border-radius:4px; color:#8a8c84; background:transparent; cursor:grab; touch-action:none; font:500 10px 'DM Mono',monospace; letter-spacing:.03em; }
.move-card span { color:var(--green); font-size:16px; line-height:10px; }
.move-card:hover { color:var(--green-dark); background:#edf0e9; }
.move-card:active { cursor:grabbing; }
.chord-card .card-symbol { font-size:32px; }
.site-footer { display:flex; justify-content:space-between; gap:20px; margin-top:58px; padding-top:18px; border-top:1px solid var(--line); color:#92948c; font:10px 'DM Mono',monospace; } .site-footer a { color:var(--green-dark); text-decoration:none; } .site-footer a:hover { text-decoration:underline; }
.midi-modal { position:fixed; z-index:20; top:50%; left:50%; width:min(430px,calc(100vw - 32px)); padding:18px; border:1px solid #cfd4ca; border-radius:8px; background:#fffdf8; box-shadow:0 25px 65px rgba(30,35,28,.25); transform:translate(-50%,-50%); } .midi-modal-head { display:flex; align-items:flex-start; gap:9px; cursor:grab; touch-action:none; user-select:none; } .midi-modal-head:active { cursor:grabbing; } .drag-dots { margin-top:3px; color:var(--green); font-size:18px; } .midi-modal .card-label { margin-bottom:3px; } .midi-modal h2 { font-size:21px; } .midi-close { margin-left:auto; width:25px; height:25px; border:0; border-radius:50%; color:#777b73; background:transparent; cursor:pointer; font-size:21px; } .midi-close:hover { color:#a65449; background:#f4e8e5; } .midi-status { margin:16px 0 9px; color:#71806a; font:10px 'DM Mono',monospace; } .midi-piano .piano { height:145px; } .midi-note { min-height:19px; margin:13px 0 0; color:#4e554c; font:500 13px 'DM Mono',monospace; } .midi-note strong { color:var(--green-dark); } .notation-controls { margin-top:16px; padding-top:13px; border-top:1px solid #e5e3db; } .notation-switch { display:inline-flex; align-items:center; gap:8px; color:#5e655b; cursor:pointer; font:600 11px Manrope,sans-serif; } .notation-switch input { position:absolute; opacity:0; } .switch-track { position:relative; width:31px; height:17px; border-radius:12px; background:#c9ccc4; transition:.2s; } .switch-track:after { content:''; position:absolute; top:3px; left:3px; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #5554; transition:.2s; } .notation-switch input:checked + .switch-track { background:var(--green); } .notation-switch input:checked + .switch-track:after { transform:translateX(14px); } .notation-options { display:flex; gap:9px; margin-top:12px; } .notation-options label { flex:1; margin:0; color:#83867e; font:9px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; } .notation-options select { width:100%; margin-top:5px; padding:6px 7px; border:1px solid #d9d8d0; border-radius:3px; color:#454a43; background:#fffefa; font:11px Manrope,sans-serif; } .music-staff { margin-top:14px; padding:7px 4px 2px; overflow:hidden; border-radius:4px; background:#f9f7f0; } .music-staff svg { display:block; width:100%; height:128px; } .staff-line { stroke:#83877d; stroke-width:1; } .staff-note { fill:#3e493d; } .staff-stem { stroke:#3e493d; stroke-width:1.5; } .staff-accidental,.staff-key-signature,.staff-clef { fill:#4d564c; font-family:Fraunces,serif; } .staff-clef { font-size:50px; } .staff-accidental { font-size:21px; } .staff-key-signature { font-size:19px; }
.notation-options { align-items:end; gap:12px; } .notation-options label { flex:0 0 105px; } .grand-staff-help { display:flex; flex:1; justify-content:space-between; gap:10px; margin:0 0 6px; color:#6d7569; font:10px 'DM Mono',monospace; } .music-staff svg { height:190px; }
.chord-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .chord-card.is-playing { border-color:#5f9a64; background:#e2f0dc; box-shadow:0 0 0 2px #c0dfbb,0 8px 24px #72ab7866; transform:translateY(-2px); } .piano [data-note].midi-match { background:#91b990; box-shadow:inset 0 0 14px #39734199,0 0 13px #75b77d99; } .midi-note { min-height:55px; margin-bottom:0; } .notation-controls { margin-top:24px; } .midi-match-label { display:block; margin-top:7px; color:#3c7743; font-size:11px; } .midi-fab { position:fixed; z-index:10; right:22px; bottom:22px; display:flex; align-items:center; gap:8px; padding:12px 15px; border:1px solid #799775; border-radius:999px; color:#fff; background:var(--green); box-shadow:0 8px 22px #31462f52; opacity:.46; cursor:pointer; font:700 11px Manrope,sans-serif; transition:opacity .16s,transform .16s,background .16s; } .midi-fab:hover,.midi-fab:focus-visible { opacity:1; background:var(--green-dark); transform:translateY(-2px); } .midi-fab span { color:#f1c967; font-size:16px; }
.midi-fab[hidden] { display:none!important; }
.online-room-users { position:fixed; z-index:41; right:22px; bottom:274px; display:grid; gap:8px; justify-items:end; pointer-events:none; }
.online-room-user { display:flex; align-items:center; gap:7px; width:max-content; max-width:170px; padding:10px 13px; border:1px solid #b8c7b2; border-radius:999px; color:#466047; background:#f9fcf6; box-shadow:0 7px 19px #31462f30; opacity:.46; cursor:default; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 10px Manrope,sans-serif; transition:opacity .16s,transform .16s,background .16s,border-color .16s; pointer-events:auto; }
.online-room-user:before { content:''; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--user-color,#c89b63); box-shadow:0 0 0 3px color-mix(in srgb,var(--user-color,#c89b63) 24%,transparent); }
.online-room-user:hover,.online-room-user:focus-visible,.online-room-user.is-active { opacity:1; border-color:#73916f; background:#eaf4e7; transform:translateY(-2px); }
.online-room-toast { position:fixed; z-index:42; right:22px; bottom:326px; max-width:min(280px,calc(100vw - 44px)); margin:0; padding:11px 14px; border:1px solid #d4dece; border-radius:999px; color:#3f5039; background:#fffdf8; box-shadow:0 8px 22px #31462f2e; opacity:0; transform:translateY(6px); pointer-events:none; font:700 11px Manrope,sans-serif; transition:opacity .18s,transform .18s; }
.online-room-toast.is-visible { opacity:1; transform:translateY(0); }
.card-notes strong .card-note { display:inline-block; border-radius:3px; transition:background .16s,box-shadow .16s,color .16s; } .card-notes strong .card-note.is-playing { padding:1px 3px; margin:-1px -3px; color:#2f713a; background:#d8ecd5; box-shadow:0 0 9px #70b777a8; }
@media (max-width:760px) { .chord-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:440px) { .chord-grid { grid-template-columns:1fr; } .site-footer { align-items:flex-start; flex-direction:column; } }

.midi-pin { display:inline-flex; flex:0 0 32px; align-items:center; justify-content:center; width:32px; height:32px; margin-left:auto; padding:6px; border:1px solid #cbd5c5; border-radius:8px; color:var(--green-dark); background:transparent; cursor:pointer; line-height:1; } .midi-pin:hover,.midi-pin[aria-pressed="true"] { border-color:var(--green); color:var(--green-dark); background:#e8ede5; } .midi-pin:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .midi-pin svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .midi-unpin-arrow,.midi-pin[aria-pressed="true"] .midi-pin-arrow { display:none; } .midi-pin[aria-pressed="true"] .midi-unpin-arrow { display:block; } .midi-pin + .midi-close { flex:0 0 32px; width:32px; height:32px; margin-left:0; } .midi-modal-head > div { min-width:0; } body.midi-pinned .midi-modal-head { cursor:default; }
.staff-note-button { cursor:pointer; } .staff-note-button:hover,.staff-note-button:focus { fill:#2f713a; outline:none; } .staff-note-selected { fill:#3f914a; stroke:#1f642c; stroke-width:1.2; } .piano [data-note].staff-selected { background:#8bbd89; box-shadow:inset 0 0 14px #39734199,0 0 13px #75b77d99; } .piano [data-note].scale-compatible { background:#dcebdd; box-shadow:inset 0 0 0 2px #82ad83; } .staff-selection-label,.scale-label { display:block; margin-top:7px; color:#397341; font-size:11px; } .midi-pedal-label { display:inline-flex; align-items:center; margin-top:8px; padding:4px 8px; border:1px solid #d4dece; border-radius:4px; color:var(--muted); background:#f8faf5; font-family:Manrope,sans-serif; font-size:11px; } .midi-pedal-label.is-pressed { border-color:#9ec998; color:var(--green-dark); background:#e9f4e6; } .scale-label { color:#506d53; }
.midi-shortcuts { margin-top:17px; padding-top:14px; border-top:1px solid #e5e3db; } .midi-shortcuts .card-label { margin-bottom:5px; } .midi-shortcuts-help { margin:0 0 10px; color:#7c8279; font-size:10px; line-height:1.45; } .midi-shortcut-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .midi-shortcut { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; padding:8px; border:1px solid #d8ddd3; border-radius:4px; color:#586154; background:#fbfcf8; cursor:pointer; text-align:left; font:600 10px Manrope,sans-serif; } .midi-shortcut:hover { border-color:#8eaa8e; background:#edf5eb; } .midi-shortcut strong { flex:0 0 auto; padding:3px 5px; border-radius:3px; color:#397341; background:#e0efdf; font:600 9px 'DM Mono',monospace; white-space:nowrap; } .midi-shortcut strong:empty { display:none; } .midi-shortcut-capture { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:18px; background:#222b2399; } .midi-shortcut-capture[hidden] { display:none; } .shortcut-capture-card { width:min(340px,100%); padding:24px; border:1px solid #d6ddd1; border-radius:8px; background:#fffdf8; box-shadow:0 24px 65px #14201566; } .shortcut-capture-card h2 { margin-bottom:12px; } .shortcut-capture-card p:not(.card-label) { margin:0 0 18px; color:#60685d; font-size:13px; line-height:1.55; }
.songs-fab { position:fixed; z-index:10; right:22px; bottom:76px; display:flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid #b8c7b2; border-radius:999px; color:#466047; background:#f9fcf6; box-shadow:0 7px 19px #31462f30; cursor:pointer; font:700 10px Manrope,sans-serif; } .songs-fab:hover { border-color:#73916f; background:#eaf4e7; } .songs-fab span { color:#d5a64c; font-size:15px; } .songs-library { position:fixed; z-index:45; inset:0; display:grid; place-items:center; padding:18px; background:#222b236b; } .songs-library[hidden] { display:none; } .songs-library-card { width:min(390px,100%); max-height:min(520px,calc(100vh - 36px)); overflow:auto; padding:22px; border:1px solid #d6ddd1; border-radius:8px; background:#fffdf8; box-shadow:0 24px 65px #14201566; } .songs-library-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:16px; } .songs-library-head .midi-close { margin:0; } .songs-list { display:grid; gap:7px; } .saved-song-row { display:flex; gap:7px; } .saved-song { flex:1; min-width:0; padding:11px 12px; border:1px solid #d8ded4; border-radius:5px; color:#40523f; background:#fcfdf9; cursor:pointer; text-align:left; font:600 13px Fraunces,serif; } .saved-song:hover { border-color:#89a487; background:#ebf4e8; } .delete-saved-song { flex:0 0 36px; border:1px solid #e1ccc7; border-radius:5px; color:#a65449; background:#fff9f7; cursor:pointer; font-size:20px; line-height:1; } .delete-saved-song:hover { background:#f9e8e5; border-color:#c98c83; } .songs-empty { margin:4px 0; color:#848a82; font-size:12px; }
@media (min-width:1100px) { body.midi-pinned .page-shell,body.midi-pinned .topbar { width:calc(100% - 460px); max-width:1190px; margin-left:24px; margin-right:auto; } body.midi-pinned .topbar { padding-inline:36px; } body.midi-pinned .midi-modal { top:0; right:0; bottom:0; left:auto; width:430px; max-height:none; padding:22px 18px; overflow-y:auto; border-width:0 0 0 1px; border-radius:0; transform:none; } body.midi-pinned .midi-fab { display:none; } }
@media (max-width:1099px) { .midi-pin { display:inline-flex; } }

.midi-status-row { display:flex; align-items:center; justify-content:space-between; gap:10px; } .midi-status-row .midi-status { margin-right:0; } .midi-reconnect { flex:0 0 auto; padding:6px 8px; border:1px solid #a9bca4; border-radius:4px; color:var(--green-dark); background:#f4f8f1; cursor:pointer; font:600 9px Manrope,sans-serif; } .midi-reconnect:hover { background:#e3efdf; } .midi-reconnect:disabled { opacity:.55; cursor:wait; }
.input-wrap { height:auto; min-height:54px; align-items:stretch; } .input-wrap .search-icon { align-self:flex-start; padding-top:16px; } .input-wrap textarea { width:100%; min-width:0; min-height:54px; border:0; outline:0; resize:vertical; background:transparent; color:var(--ink); padding:15px 8px; font:500 16px/1.35 'DM Mono',monospace; } .input-wrap textarea::placeholder { color:#aaa9a0; } .input-wrap .clear-button { align-self:flex-start; margin-top:8px; }
.composer.is-importing { grid-template-columns:1fr; } .composer.is-importing .preview-card { display:none; } .composer.is-importing .add-button { align-self:flex-start; min-height:40px; margin-top:7px; padding:0 13px; font-size:11px; } .composer.is-importing .add-button b { display:none; }
.loaded-song-name { margin:0 0 13px; padding:9px 12px; border-left:3px solid #6f9b6d; color:#3e6e43; background:#edf5e9; font:600 14px Fraunces,serif; } .loaded-song-name:before { content:'Música carregada: '; color:#688067; font:600 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.save-chords-button { padding:7px 11px; border:1px solid #98ae94; border-radius:4px; color:#35683a; background:#edf5e9; cursor:pointer; font:700 11px Manrope,sans-serif; } .save-chords-button:hover { border-color:#6f946e; background:#deeedb; }
.notation-card-button { position:absolute; z-index:2; top:12px; right:42px; width:25px; height:25px; padding:0; border:0; border-radius:50%; color:#557653; background:transparent; cursor:pointer; font:19px/1 Fraunces,serif; } .notation-card-button:hover { color:#fff; background:#598658; } .chord-notation-modal { position:fixed; z-index:45; inset:0; display:grid; place-items:center; padding:18px; background:#222b236b; } .chord-notation-modal[hidden] { display:none; } .chord-notation-card { width:min(430px,100%); padding:22px; border:1px solid #d6ddd1; border-radius:8px; background:#fffdf8; box-shadow:0 24px 65px #14201566; } .chord-notation-staff { margin-top:10px; padding:8px 4px; border-radius:4px; background:#f9f7f0; } .chord-notation-staff svg { display:block; width:100%; height:230px; }
.notation-card-button { right:10px; } .chord-grid.is-editing .notation-card-button { right:42px; }
.notation-card-button { width:22px; height:22px; border-radius:3px; font-size:15px; } .notation-card-button:hover { color:#3e773f; background:transparent; }
.chord-card .notation-card-button { right:35px; } .chord-card .chord-remove-card { display:block; top:12px; right:9px; width:22px; height:22px; font-size:19px; } .chord-grid:not(.is-editing) .chord-card .chord-remove-card { display:block; }
.chord-notation-staff .staff-stem { display:none; }
.chord-card .card-type { display:none; }
.chord-card .card-label { display:none; }
.chord-key-option { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; color:#65705f; font:600 11px Manrope,sans-serif; } .chord-key-option select { min-width:82px; padding:6px 8px; border:1px solid #d4dbcf; border-radius:4px; color:#42513f; background:#fbfdf8; font:600 11px Manrope,sans-serif; }
@media (min-width:1100px) { body.midi-pinned .songs-fab { right:452px; z-index:30; } }
@media (max-width:1099px) { body.midi-pinned .midi-modal { top:8px; right:8px; bottom:auto; left:auto; width:min(430px,calc(100vw - 16px)); max-height:calc(100vh - 16px); overflow-y:auto; transform:none; } body.midi-pinned .midi-pin { display:inline-flex; } }

.sequence-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:11px; } .import-panel { margin:-6px 0 24px; padding:18px; border:1px solid #d7ddd1; border-radius:7px; background:#fdfdf9; } .import-panel label { margin-bottom:8px; color:#5f6c59; font-size:12px; } .import-panel textarea { display:block; width:100%; resize:vertical; margin-bottom:12px; padding:10px; border:1px solid #d5d8d0; border-radius:4px; color:#41483e; background:#fffefa; font:12px/1.55 'DM Mono',monospace; } .import-panel > div { display:flex; align-items:center; gap:14px; } .import-panel .add-button { min-height:38px; padding:0 14px; } .sequence-text,.sequence-break { position:relative; grid-column:1/-1; border-radius:6px; } .sequence-text { padding:39px 48px 16px; border:1px solid #d8ded3; background:#fcfdf9; color:#4e554c; } .sequence-text p { margin:0; white-space:pre-wrap; font:500 14px/1.65 Fraunces,serif; } .sequence-text .move-card,.sequence-break .move-card { top:10px; } .sequence-text .remove-card,.sequence-break .remove-card { top:8px; } .sequence-break { display:flex; align-items:center; justify-content:center; min-height:42px; border-top:2px solid #9eae99; color:#71806a; font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; } .sequence-break .remove-card { right:8px; } .sequence-break.is-moving,.sequence-text.is-moving { opacity:.58; }
@media (max-width:760px) { .sequence-actions { justify-content:flex-start; margin-top:12px; } }

.card-lyric-anchor { margin:-10px 0 12px; color:#5a845d; font:500 10px 'DM Mono',monospace; }

.sequence-break { min-height:0; height:0; margin:-17px 0; padding:0; border:0; overflow:hidden; visibility:hidden; } .chord-grid:not(.is-editing) .move-card,.chord-grid:not(.is-editing) .remove-card { display:none; } .edit-positions { display:inline-flex; align-items:center; gap:6px; margin:0; color:#687364; cursor:pointer; font:500 10px 'DM Mono',monospace; white-space:nowrap; } .edit-positions input { position:static; width:14px; height:14px; margin:0; accent-color:var(--green); opacity:1; } .chord-grid.is-editing [data-sequence-item] { outline:1px dashed #a7b8a2; outline-offset:3px; }

.start-sequence { padding:7px 11px; border:1px solid #647f60; border-radius:4px; color:#fff; background:var(--green); cursor:pointer; font:700 10px Manrope,sans-serif; } .start-sequence:hover { background:var(--green-dark); } .chord-grid.is-training .chord-card { opacity:.58; transition:background .14s,border-color .14s,box-shadow .14s,transform .14s; } .chord-grid.is-training .chord-card.is-awaiting { opacity:1; border-color:#7b827c; background:#e1e4e0; box-shadow:0 0 0 3px #c7cbc6,0 10px 26px #68716a40; transform:translateY(-2px); } .chord-grid.is-training .chord-card.is-correct { opacity:1; border-color:#4d8d54; background:#dcefd7; box-shadow:0 0 0 3px #c0dfbb,0 10px 26px #6da67655; } .chord-grid.is-training .chord-card.is-next { opacity:.82; border-color:#b4c9ae; } .chord-grid.is-training .chord-card.is-awaiting .card-lyric-anchor { color:#246c31; font-weight:700; }

.aligned-lyric { padding:39px 18px 16px; overflow-x:auto; background:#fdfdf9; } .aligned-lyric pre { min-width:max-content; margin:0; white-space:pre; font:500 13px/1.65 'DM Mono',monospace; } .lyric-chord-line { color:#3f7b45; font-weight:700!important; } .lyric-text-line { color:#444a42; }
.unrecognized-chord { color:#b44d47; text-decoration:underline wavy #d88881; text-underline-offset:3px; }

.chord-grid:not(.is-editing) .chord-card { padding-top:21px; } .chord-card .card-name { min-height:0; margin:8px 0 6px; } .card-lyric-anchor { margin:0 0 8px; } .chord-grid:not(.is-editing) .sequence-text { padding:14px 18px; } .chord-grid:not(.is-editing) .aligned-lyric { padding:14px 18px; }

.edit-positions[hidden] { display:none; }
.card-piano [data-note].chord-key { background:#86bc83; box-shadow:inset 0 0 0 1px #4b874e; } .card-piano .black-key.chord-key { background:#4f9253; border-color:#336c38; }

/* Palco de prática — referência: partitura central e teclado em toda a largura. */
.topbar-actions { display:flex; align-items:center; gap:9px; }
.room-button { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #c9d5c4; border-radius:5px; color:#416242; background:#f9fcf6; cursor:pointer; font:700 11px Manrope,sans-serif; }
.room-button:hover,.room-button[aria-expanded="true"] { border-color:#668d68; color:#fff; background:#527d54; }
.practice-stage { margin:6px 0 44px; border:1px solid #2a2e2b; border-radius:10px; overflow:hidden; color:#f7f7f2; background:#171a18; box-shadow:0 19px 42px #20271e22; }
.practice-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px; padding:0 23px; border-bottom:1px solid #323733; }
.practice-identity { display:flex; align-items:center; gap:11px; } .practice-dot { width:9px; height:9px; border-radius:50%; background:#92d18d; box-shadow:0 0 0 4px #92d18d20; } .practice-stage .eyebrow { margin:0 0 2px; color:#98a69a; font-size:8px; } .practice-stage h2 { margin:0; color:#fff; font:600 20px Fraunces,serif; } .practice-status { margin:0; color:#b9c2b8; font:500 10px 'DM Mono',monospace; } .practice-status span { color:#91cd8d; }
.room-panel { display:flex; align-items:baseline; gap:10px; padding:12px 23px; border-bottom:1px solid #343a35; color:#cdd5ca; background:#222824; font:500 11px/1.45 Manrope,sans-serif; } .room-panel strong { color:#b9eca9; white-space:nowrap; } .room-panel[hidden] { display:none; }
.score-frame { padding:23px; background:#282b29; } .score-paper { position:relative; min-height:286px; overflow:hidden; border:1px solid #d8d5ca; background:#fffefa; box-shadow:0 5px 18px #0004; } .score-meta { position:relative; z-index:2; display:flex; justify-content:space-between; padding:16px 22px; color:#94988f; font:500 9px 'DM Mono',monospace; letter-spacing:.1em; } .score-lines { position:absolute; inset:0; width:100%; height:100%; } .score-lines line { stroke:#c7c8c0; stroke-width:1; } .score-empty { position:absolute; z-index:2; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; color:#596057; } .score-empty span { font:56px Fraunces,serif; line-height:1; } .score-empty p { margin:5px 0; font:600 19px Fraunces,serif; } .score-empty small { color:#8a9187; font:10px 'DM Mono',monospace; }
.virtual-piano-panel { padding:24px; background:#e8ede5; } .stage-piano-dock { position:relative; z-index:15; bottom:auto; padding:14px 0 0; border:1px solid #333835; border-radius:8px; color:#e7ebe3; background:#1a1d1b; box-shadow:0 14px 32px #1115; } .stage-piano-heading { display:flex; justify-content:space-between; gap:20px; padding:0 16px 12px; color:#acb5aa; font:500 9px 'DM Mono',monospace; letter-spacing:.07em; } .stage-piano-heading span:last-child { color:#bfe0b9; text-align:right; letter-spacing:0; }
.song-sheet-reader { position:fixed; z-index:60; inset:0; display:flex; flex-direction:column; color:var(--ink); background:#e8ede5; } .song-sheet-reader[hidden] { display:none; } body.song-sheet-open { overflow:hidden; } .song-sheet-toolbar { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; min-height:74px; padding:12px max(24px,calc((100vw - 1120px) / 2)); border-bottom:1px solid #d7dfd4; background:#f7f7f3; } .song-sheet-toolbar .card-label { margin:0 0 3px; } .song-sheet-toolbar h2 { font-size:24px; } .song-sheet-close { display:grid; place-items:center; width:36px; height:36px; border:1px solid #cfd8cc; border-radius:50%; color:#3f5039; background:#fff; cursor:pointer; font-size:26px; line-height:1; } .song-sheet-close:hover { color:#fff; border-color:#3f5039; background:#3f5039; } .song-sheet-pages { flex:1; overflow-y:auto; padding:30px 24px 70px; } .song-sheet-page { width:min(1100px,100%); min-height:900px; margin:0 auto 30px; padding:48px clamp(25px,7vw,92px); border:1px solid #d8d8d0; background:#fffefa; box-shadow:0 12px 30px #3f50391c; } .song-sheet-page-number { margin:0 0 34px; color:#70766d; font:500 10px 'DM Mono',monospace; letter-spacing:.14em; } .song-score-row { display:grid; grid-template-columns:minmax(0,1fr) 170px; align-items:center; gap:26px; min-height:90px; border-bottom:1px solid #e8ede5; } .song-score-staff { position:relative; min-height:70px; background:repeating-linear-gradient(to bottom,transparent 0,transparent 10px,#aeb4ac 11px,transparent 12px,transparent 23px); } .song-score-staff:after { content:''; position:absolute; right:0; bottom:0; left:0; height:1px; background:#aeb4ac; } .song-score-clef { position:absolute; top:7px; left:8px; color:#252824; font:50px/1 Fraunces,serif; } .song-score-notes { position:absolute; top:26px; left:70px; color:#252824; font:600 15px 'DM Mono',monospace; letter-spacing:.1em; } .song-score-details { display:grid; grid-template-columns:30px 1fr; column-gap:8px; align-items:baseline; } .song-score-measure { grid-row:1/3; color:#70766d; font:10px 'DM Mono',monospace; } .song-score-details strong { font:600 25px/1 Fraunces,serif; } .song-score-details span:last-child { grid-column:2; color:#70766d; font-size:11px; } @media (max-width:620px) { .song-sheet-pages { padding:15px 10px 45px; } .song-sheet-page { min-height:720px; padding:28px 17px; } .song-score-row { grid-template-columns:1fr; gap:3px; padding:8px 0; } .song-score-details { padding-left:6px; } .song-score-notes { font-size:11px; } }
.stage-piano-scroll { overflow-x:auto; overscroll-behavior-inline:contain; } .stage-piano { position:relative; display:flex; align-items:flex-start; min-width:1260px; height:170px; background:#0f1110; user-select:none; -webkit-user-select:none; } .stage-key { position:relative; flex:1 0 0; min-width:0; padding:0; cursor:pointer; touch-action:none; } .stage-white-key { z-index:1; height:100%; border:1px solid #a7aaa4; border-bottom-color:#777a74; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#f4f4ef,#fff 15%,#ecece7); } .stage-white-key span { position:absolute; right:0; bottom:8px; left:0; color:#959993; font:8px 'DM Mono',monospace; } .stage-black-key { position:absolute; z-index:2; top:0; width:15px; height:61%; border:1px solid #080909; border-radius:0 0 3px 3px; background:linear-gradient(90deg,#161817,#343735 55%,#121412); box-shadow:1px 3px 4px #0009; transform:translateX(-50%); } .stage-key:hover { filter:brightness(.94); } .stage-white-key.is-local { border-color:#5782ba; background:linear-gradient(90deg,#8eb9ee,#c5e2ff 52%,#83addc); } .stage-black-key.is-local { border-color:#76a5dc; background:linear-gradient(90deg,#4779b1,#79b5ee 55%,#3d70a8); }
@media (max-width:760px) { .topbar-actions { gap:6px; } .room-button { padding:8px; font-size:0; } .room-button span { font-size:15px; } .practice-stage { margin-bottom:32px; border-radius:7px; } .practice-toolbar { min-height:62px; padding:0 14px; } .practice-status { display:none; } .score-frame { padding:12px; } .score-paper { min-height:230px; } .score-empty p { font-size:16px; } .stage-piano { height:135px; min-width:1050px; } .stage-piano-heading { padding-right:12px; padding-left:12px; } }

/* Identidade do arquivo layout-piano-chords.png. */
/* O checkbox invisível não pode herdar a largura total dos campos de texto. */
.notation-switch { position:relative; }
.notation-switch input { top:0; left:0; width:16px; height:16px; margin:0; padding:0; }
.notation-switch input:focus-visible + .switch-track { outline:3px solid var(--gold); outline-offset:3px; }
.midi-modal { max-height:calc(100dvh - 16px); overflow-y:auto; }
.midi-piano,.music-staff,.notation-controls { min-width:0; max-width:100%; }
.grand-staff-help { min-width:0; flex-wrap:wrap; }
.vexflow-notation svg { display:block; width:100%; max-width:100%; height:auto; }
.music-staff.vexflow-notation svg,.chord-notation-staff.vexflow-notation svg { height:auto; }
.vexflow-notation .staff-note-button { cursor:pointer; fill:#000; stroke:#000; }
.vexflow-notation .staff-note-button:hover,.vexflow-notation .staff-note-button:focus { fill:#000; stroke:#000; outline:none; }
.vexflow-notation .staff-note-button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.notation-error { margin:12px; color:var(--muted); font:12px/1.7 Manrope,sans-serif; }
@media (max-width:600px) { .midi-shortcut-list { grid-template-columns:1fr; } }
.topbar { width:100%; height:72px; margin:0; padding:0 max(28px,calc((100% - 1118px) / 2)); border-bottom:1px solid #e8ede5; background:#f7f7f3; }
.brand { display:inline-flex; align-items:center; } .brand-logo { display:block; width:190px; height:auto; }
.virtual-nav { display:none; }
.topbar .midi-button { border-color:#dbe2d8; color:#3f5039; background:#fff; } .topbar .midi-button:hover { border-color:#637c59; background:#e8ede5; } .topbar .room-button { border-color:#637c59; color:#fff; background:#637c59; } .topbar .room-button:hover,.topbar .room-button[aria-expanded="true"] { border-color:#3f5039; background:#3f5039; }
.practice-stage { width:100%; margin:6px 0 44px; border-width:1px 0; border-color:#3f5039; border-radius:0; background:#3f5039; } .score-frame { width:100%; padding:0; background:#e8ede5; } .score-paper { width:100%; max-width:none; min-height:660px; margin:0; border-width:1px 0; background:#fffefa; } .score-paper.has-notation .score-empty { display:none; } .stage-notation { width:100%; max-width:100%; min-height:560px; padding:18px 0 28px; overflow:hidden; } .stage-notation svg { display:block; width:100%!important; max-width:100%!important; height:auto!important; } .practice-dot { background:#c89b63; box-shadow:0 0 0 4px #c89b6320; } .practice-status span { color:#c89b63; }
.stage-piano-dock,.stage-piano-scroll { overflow-x:clip; } .stage-piano { min-width:0; width:100%; } .stage-black-key { width:1.15%; max-width:none; }
@media (max-width:760px) { .topbar { height:64px; padding:0 20px; } .brand-logo { width:150px; } .practice-stage { margin-bottom:32px; } .virtual-piano-panel { padding:14px; } .score-frame { padding:0; } .score-paper { min-height:620px; } .stage-piano { min-width:0; height:135px; } .stage-black-key { width:1.5%; } }
.virtual-piano-workspace body { min-height:100vh; min-height:100dvh; overflow-x:hidden; }
.virtual-piano-workspace .topbar-actions,
.virtual-piano-workspace .page-shell,
.virtual-piano-workspace .songs-fab,
.virtual-piano-workspace .songs-library,
.virtual-piano-workspace .chord-notation-modal,
.virtual-piano-workspace .song-sheet-reader,
.virtual-piano-workspace #midi-shortcut-capture { display:none!important; }
.virtual-intro,.sheet-intro { display:none; }
.virtual-piano-workspace .virtual-intro { display:block; width:min(1180px,calc(100% - 80px)); margin:0 auto; padding:32px 0 24px; }
.virtual-piano-workspace .virtual-page-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:16px; padding-block:4px; color:var(--muted); text-decoration:none; font-size:12px; font-weight:500; }
.virtual-piano-workspace .virtual-page-back:hover { color:var(--green-dark); }
.virtual-piano-workspace .virtual-intro h1 { margin:0 0 12px; color:var(--ink); font:700 36px/1.2 Manrope,sans-serif; letter-spacing:-.04em; }
.virtual-piano-workspace .virtual-intro p { margin:0; max-width:750px; color:var(--muted); font-size:14px; line-height:1.8; }
.virtual-back { display:none; align-items:center; gap:7px; color:#dfe8dc; text-decoration:none; font:700 11px Manrope,sans-serif; }
.virtual-back:hover { color:#fff; }
.virtual-piano-workspace .virtual-back { display:none; }
.virtual-piano-workspace .practice-toolbar { min-height:78px; }
.virtual-piano-workspace .practice-toolbar { display:none; }
.virtual-piano-workspace .practice-status { margin-left:auto; }
.virtual-piano-workspace .practice-stage { min-height:calc(100dvh - 72px); margin:0; padding-bottom:230px; border-color:#d4dece; background:#e8ede5; }
.virtual-piano-workspace .practice-toolbar { border-bottom-color:#d4dece; color:var(--ink); background:#f7f7f3; }
.virtual-piano-workspace .practice-stage h2 { color:var(--ink); font-family:Manrope,sans-serif; }
.virtual-piano-workspace .practice-stage .eyebrow { color:var(--green); font-family:Manrope,sans-serif; }
.virtual-piano-workspace .practice-status { color:var(--muted); font-family:Manrope,sans-serif; }
.virtual-piano-workspace .virtual-back { color:var(--green-dark); }
.virtual-piano-workspace .virtual-back:hover { color:var(--green); }
.virtual-piano-workspace .virtual-piano-panel { min-height:0; padding:0; background:transparent; }
.virtual-piano-workspace .stage-piano-dock { position:fixed; right:0; bottom:0; left:0; width:100%; margin:0; padding-top:16px; border:1px solid #d4dece; border-right:0; border-bottom:0; border-left:0; border-radius:0; color:var(--ink); background:#fffdf8; box-shadow:0 -14px 32px #3f503924; }
.virtual-piano-workspace .stage-piano-heading { color:var(--muted); font-family:Manrope,sans-serif; }
.virtual-piano-workspace .stage-piano-heading span:last-child { color:var(--green-dark); font-family:Manrope,sans-serif; }
.stage-pedal-indicator { display:inline-flex; align-items:center; gap:7px; width:max-content; margin:0 16px 12px; padding:6px 10px; border:1px solid #394039; border-radius:4px; color:#b8c5b5; background:#111412; font:700 9px 'DM Mono',monospace; letter-spacing:.05em; text-transform:uppercase; }
.stage-pedal-indicator span { width:8px; height:8px; border-radius:50%; background:#596159; box-shadow:inset 0 0 0 1px #ffffff22; }
.stage-pedal-indicator.is-pressed { border-color:#83b97c; color:#173314; background:#dff0db; }
.stage-pedal-indicator.is-pressed span { background:#4b9a43; box-shadow:0 0 0 4px #4b9a4324; }
.virtual-piano-workspace .stage-pedal-indicator,.sheet-workspace .stage-pedal-indicator { border-color:#d4dece; color:var(--muted); background:#f8faf5; font-family:Manrope,sans-serif; letter-spacing:0; }
.virtual-piano-workspace .stage-pedal-indicator.is-pressed,.sheet-workspace .stage-pedal-indicator.is-pressed { border-color:#9ec998; color:var(--green-dark); background:#e9f4e6; }
.virtual-piano-workspace .stage-piano-scroll { padding:0 18px 18px; background:#fffdf8; }
.virtual-piano-workspace .stage-piano { height:178px; border:1px solid #aab0a5; border-radius:4px; overflow:hidden; background:#fff; }
.virtual-piano-workspace .midi-fab { z-index:40; right:22px; bottom:220px; display:flex!important; }
.virtual-piano-workspace .midi-fab[hidden] { display:none!important; }
.virtual-piano-workspace .stage-white-key { border-color:#c7ccc2; border-bottom-color:#b9c0b5; background:linear-gradient(#f8f9f5,#fff); }
.virtual-piano-workspace .stage-white-key span { bottom:12px; color:var(--muted); font:500 8px Manrope,sans-serif; }
.virtual-piano-workspace .stage-black-key { width:1.05%; height:62%; border:0; border-radius:0 0 3px 3px; background:linear-gradient(90deg,#252824,#454a42,#252824); box-shadow:1px 3px 4px #25282444; }
.virtual-piano-workspace .stage-white-key.is-local { border-color:#bdcdb4; background:linear-gradient(#e8ede5,#cfdbc8); box-shadow:inset 0 -3px 0 #637c5940; }
.virtual-piano-workspace .stage-black-key.is-local { background:linear-gradient(90deg,var(--green-dark),var(--green),var(--green-dark)); box-shadow:1px 3px 4px #25282444; }
.virtual-piano-workspace .stage-white-key.is-remote { border-color:var(--remote-key-color,#d7b36f); background:linear-gradient(color-mix(in srgb,var(--remote-key-color,#c89b63) 18%,#fff),color-mix(in srgb,var(--remote-key-color,#c89b63) 56%,#fff)); box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--remote-key-color,#c89b63) 40%,transparent); }
.virtual-piano-workspace .stage-black-key.is-remote { background:linear-gradient(90deg,color-mix(in srgb,var(--remote-key-color,#c89b63) 45%,#252824),var(--remote-key-color,#c89b63),color-mix(in srgb,var(--remote-key-color,#c89b63) 45%,#252824)); box-shadow:1px 3px 4px #25282444; }
.virtual-piano-workspace .stage-white-key.is-shared { border-color:#5782ba; background:linear-gradient(#d9ecff,#8eb9ee); box-shadow:inset 0 -3px 0 #3d70a855,0 0 14px #5782ba66; }
.virtual-piano-workspace .stage-black-key.is-shared { border-color:#76a5dc; background:linear-gradient(90deg,#315f96,#79b5ee,#315f96); box-shadow:1px 3px 4px #25282444,0 0 14px #5782ba66; }
@media (max-width:760px) and (orientation:portrait) {
  .virtual-piano-workspace .stage-piano-scroll { overflow-x:auto; overflow-y:hidden; padding-inline:14px; -webkit-overflow-scrolling:touch; }
  .virtual-piano-workspace .stage-piano { width:1320px; min-width:1320px; }
  .virtual-piano-workspace .stage-white-key { flex:0 0 calc(1320px / 52); }
  .virtual-piano-workspace .stage-black-key { width:14px; }
}
.sheet-player { display:none; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.sheet-workspace body { min-height:100vh; min-height:100dvh; overflow-x:hidden; }
.sheet-workspace .page-shell,
.sheet-workspace .songs-fab,
.sheet-workspace .songs-library,
.sheet-workspace .chord-notation-modal,
.sheet-workspace .song-sheet-reader,
.sheet-workspace #midi-shortcut-capture { display:none!important; }
.sheet-workspace .practice-stage { min-height:calc(100dvh - 102px); margin:0; padding:0 0 210px; border:0; color:var(--ink); background:#e8ede5; box-shadow:none; }
.sheet-workspace .sheet-intro { display:block; width:min(1180px,calc(100% - 80px)); margin:0 auto; padding:32px 0 24px; }
.sheet-workspace .sheet-intro h1 { margin:0; color:var(--ink); font:700 36px/1.2 Manrope,sans-serif; letter-spacing:-.04em; }
.sheet-workspace .practice-toolbar { display:none; }
.sheet-workspace .sheet-actions { display:flex; align-items:center; gap:9px; }
.sheet-actions-overlay { position:absolute; z-index:3; top:18px; right:18px; }
.sheet-action,.sheet-action-primary { border-radius:8px; cursor:pointer; font:700 11px Manrope,sans-serif; transition:background .15s,border-color .15s,transform .15s; }
.sheet-action-primary { padding:11px 15px; border:1px solid var(--green); color:#fff; background:#637c59e8; backdrop-filter:blur(8px); }
.sheet-action-primary:hover { background:var(--green-dark); transform:translateY(-1px); }
.sheet-action { padding:10px 12px; border:1px solid #cbd5c5; color:var(--green-dark); background:#fffdf8e8; backdrop-filter:blur(8px); }
.sheet-action:hover { border-color:var(--green); background:#e8ede5; }
.sheet-workspace .virtual-piano-panel { display:block; width:100%; margin:0; padding:0; background:transparent; }
.sheet-workspace .sheet-player { display:block!important; width:100%; }
.sheet-score { position:relative; min-height:680px; height:calc(100dvh - 230px); overflow:hidden; border-block:1px solid #d4dece; background:#fffdf8; box-shadow:none; }
.sheet-score:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#f7f7f31f 0%,#f7f7f300 58%,#e8ede5cc 100%); pointer-events:none; }
.sheet-notation { position:relative; z-index:1; width:100%; max-width:100%; min-width:0; height:100%; padding:34px max(18px,calc((100% - 1180px) / 2)) 46px; overflow:hidden; }
.sheet-notation svg { display:block; width:100%!important; max-width:100%!important; height:100%!important; overflow:visible; }
.sheet-note-head,.sheet-note-group * { transition:fill .15s,stroke .15s,filter .15s; }
.sheet-note-current,
.sheet-note-current * { fill:var(--green)!important; stroke:var(--green-dark)!important; filter:drop-shadow(0 0 6px #637c5988); }
.sheet-status { margin:0; padding:13px 16px; border:1px solid #d4dece; border-radius:12px; color:var(--green-dark); background:#fffdf8; font:700 12px Manrope,sans-serif; }
.sheet-workspace .stage-piano-dock { position:fixed; right:0; bottom:0; left:0; z-index:12; width:100%; margin:0; padding-top:16px; border:1px solid #d4dece; border-right:0; border-bottom:0; border-left:0; border-radius:0; color:var(--ink); background:#fffdf8; box-shadow:0 -14px 32px #3f503924; }
.sheet-workspace .stage-piano-heading { color:var(--muted); font-family:Manrope,sans-serif; }
.sheet-workspace .stage-piano-heading span:last-child { color:var(--green-dark); font-family:Manrope,sans-serif; }
.sheet-workspace .stage-piano-scroll { padding:0 18px 18px; background:#fffdf8; }
.sheet-workspace .stage-piano { height:162px; border:1px solid #aab0a5; border-radius:4px; overflow:hidden; background:#fff; }
.sheet-workspace .midi-fab { z-index:40; right:22px; bottom:204px; display:flex!important; }
.sheet-workspace .midi-fab[hidden] { display:none!important; }
.sheet-workspace .stage-white-key { border-color:#c7ccc2; border-bottom-color:#b9c0b5; background:linear-gradient(#f8f9f5,#fff); }
.sheet-workspace .stage-white-key span { bottom:10px; color:var(--muted); font:500 8px Manrope,sans-serif; }
.sheet-workspace .stage-black-key { width:1.05%; height:62%; border:0; border-radius:0 0 3px 3px; background:linear-gradient(90deg,#252824,#454a42,#252824); box-shadow:1px 3px 4px #25282444; }
.sheet-workspace .stage-white-key.is-local { border-color:#bdcdb4; background:linear-gradient(#e8ede5,#cfdbc8); box-shadow:inset 0 -3px 0 #637c5940; }
.sheet-workspace .stage-black-key.is-local { background:linear-gradient(90deg,var(--green-dark),var(--green),var(--green-dark)); box-shadow:1px 3px 4px #25282444; }
@media (max-width:900px) { .sheet-workspace .sheet-intro { width:calc(100% - 48px); } .sheet-score { min-height:600px; height:calc(100dvh - 270px); } }
@media (max-width:600px) { .sheet-actions-overlay { right:10px; left:10px; justify-content:stretch; } .sheet-action,.sheet-action-primary { flex:1; padding-inline:8px; } }