:root{--paper:#f7f2e9;--surface:#fffdf8;--ink:#252421;--muted:#777168;--line:#ddd5c8;--left:#cb6847;--left-soft:#f4dfd4;--right:#728967;--right-soft:#e2e9dc;--success:#44825b}*{box-sizing:border-box}html,body{margin:0;min-width:0;min-height:100%;overflow-x:hidden;background:var(--paper)}body{color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible{outline:3px solid #dba44b;outline-offset:2px}.app-shell{width:100%;min-width:0;min-height:100dvh;display:grid;grid-template-rows:auto auto minmax(245px,1fr) minmax(210px,34vh) auto;overflow:hidden;background:var(--paper)}.app-shell>*{min-width:0}
.app-header{min-height:58px;padding:max(10px,env(safe-area-inset-top)) 16px 9px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.song-picker{min-width:0;display:flex;align-items:center;gap:8px}.brand{flex:none;font:600 21px/1 Georgia,serif;letter-spacing:.04em}.song-picker select{min-width:0;max-width:190px;border:0;border-left:1px solid var(--line);padding:4px 8px 4px 10px;background:transparent;font-weight:750;font-size:13px;text-overflow:ellipsis}.song-picker #path-select{max-width:90px;color:var(--muted);font-size:11px}.header-actions{display:flex;align-items:center;gap:5px}.connection-button{min-height:34px;border:1px solid var(--line);background:#ffffff73;border-radius:99px;padding:0 10px;cursor:pointer;font-size:11px;font-weight:800}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#aaa39a}.connection-button.connected{color:#326d48;border-color:#b7d0bd;background:#edf6ef}.connection-button.connected .status-dot{background:#44a45c}
.sequence{padding:10px 16px 8px;border-bottom:1px solid var(--line)}.sequence-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.sequence-meta p{min-width:0;margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}.sequence-meta strong{overflow:hidden;text-overflow:ellipsis;font:600 15px/1.2 Georgia,serif}.sequence-meta p span{color:var(--muted);font-size:10px}.sequence-meta>span{flex:none;color:var(--muted);font-size:11px;font-weight:800}.step-rail{height:3px;margin:8px 0;background:var(--line);border-radius:9px;overflow:hidden}.step-rail:before{content:"";display:block;width:var(--progress,0%);height:100%;background:var(--left);border-radius:inherit;transition:width .35s}.upcoming{min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;height:29px;overflow:hidden}.preview-step{min-width:0;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:3px;color:#a29b91;font:700 10px/1 sans-serif;border-radius:6px}.preview-step span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-step.current{color:var(--ink);background:#eee7dc}.preview-step i{flex:none;width:5px;height:5px;border-radius:50%}.preview-step i:first-child{background:var(--left)}.preview-step i:last-child{background:var(--right)}
.practice{min-height:0;padding:clamp(10px,2.4vh,20px) 16px 8px;display:flex;flex-direction:column;justify-content:center}.instruction{margin:0 0 clamp(8px,2vh,16px);text-align:center;font:500 clamp(24px,6vw,38px)/1 Georgia,serif}.hands-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,650px);margin:0 auto}.hand{min-height:132px;border-radius:14px;padding:12px;display:grid;place-items:center;align-content:center;border:1px solid transparent;transition:transform .18s,background .18s}.left-hand{color:#97452d;background:var(--left-soft);border-color:#e7c5b4}.right-hand{color:#536d49;background:var(--right-soft);border-color:#cbd8c4}.hand-kicker{font-size:9px;font-weight:900;letter-spacing:.12em}.hand strong{margin:3px 0 0;font:500 clamp(43px,12vw,67px)/.95 Georgia,serif}.hand>span:nth-of-type(2){font-size:12px;font-weight:800}.hand-state{margin-top:8px;opacity:.7;font-size:10px}.hand.played{transform:translateY(-2px);box-shadow:inset 0 0 0 2px currentColor}.hand.played .hand-state{font-size:0}.hand.played .hand-state:after{content:"Nota correcta";font-size:10px}.feedback{min-height:30px;padding-top:9px;text-align:center;color:var(--muted);font-size:11px}.feedback.success{color:var(--success);font-weight:800}.feedback-icon{display:none}
.practice{position:relative;min-height:0;padding:clamp(10px,2.4vh,20px) 16px 8px;display:flex;flex-direction:column;justify-content:center}.count-in{display:none;position:absolute;inset:0;z-index:8;place-items:center;background:#f7f2e9dd;color:var(--ink);font:500 clamp(90px,22vw,150px)/1 Georgia,serif;backdrop-filter:blur(3px)}.count-in.visible{display:grid}.instruction{margin:0 0 clamp(8px,2vh,16px);text-align:center;font:500 clamp(24px,6vw,38px)/1 Georgia,serif}.hands-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,650px);margin:0 auto}.hand{min-height:132px;border-radius:14px;padding:12px;display:grid;place-items:center;align-content:center;border:1px solid transparent;transition:transform .18s,background .18s}.left-hand{color:#97452d;background:var(--left-soft);border-color:#e7c5b4}.right-hand{color:#536d49;background:var(--right-soft);border-color:#cbd8c4}.hand-kicker{font-size:9px;font-weight:900;letter-spacing:.12em}.hand strong{margin:3px 0 0;font:500 clamp(43px,12vw,67px)/.95 Georgia,serif}.hand>span:nth-of-type(2){font-size:12px;font-weight:800}.hand-state{margin-top:8px;opacity:.7;font-size:10px}.hand.played{transform:translateY(-2px);box-shadow:inset 0 0 0 2px currentColor}.hand.played .hand-state{font-size:0}.hand.played .hand-state:after{content:"Nota correcta";font-size:10px}.feedback{min-height:30px;padding-top:9px;text-align:center;color:var(--muted);font-size:11px}.feedback.success{color:var(--success);font-weight:800}.feedback-icon{display:none}
.hand.resting{filter:saturate(.25);opacity:.55}.hand.resting strong{font-size:42px}.hand.resting .hand-state{font-size:0}.hand.resting .hand-state:after{content:"No toca en este paso";font-size:10px}
.keyboard-zone{min-height:0;display:grid;grid-template-rows:38px minmax(0,1fr);border-top:1px solid var(--line);background:#282725}.keyboard-head{z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;background:var(--surface)}.mode-switch{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;padding:2px}.mode-switch button,.demo-button{border:0;background:transparent;cursor:pointer;font-size:10px;font-weight:750}.mode-switch button{padding:6px 9px;border-radius:99px;color:var(--muted)}.mode-switch button.active{color:var(--ink);background:#e9e2d7}.demo-button{color:var(--right);padding:7px 4px}.keyboard-wrap{min-height:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.keyboard{position:relative;display:flex;min-width:610px;height:100%;padding:0 4px 4px;user-select:none;touch-action:none}.key{position:relative;border:0;cursor:pointer;padding:0}.key.white{flex:1;height:100%;z-index:1;margin:0 1px;border:1px solid #c9c2b7;border-radius:0 0 4px 4px;background:linear-gradient(#fffefb,#eee8de)}.key.black{position:absolute;top:0;z-index:3;width:6.2%;height:60%;border-radius:0 0 4px 4px;background:linear-gradient(100deg,#343331,#111);box-shadow:0 4px 4px #0004}.key.white.active-left,.key.white.expected-left{background:var(--left)}.key.white.active-right,.key.white.expected-right{background:var(--right)}.key.black.active-left,.key.black.expected-left{background:#a6492e}.key.black.active-right,.key.black.expected-right{background:#435e3d}.key.expected-left,.key.expected-right{box-shadow:inset 0 -5px #ffffff38}.key-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);color:#777168;font-size:9px;font-weight:800}.key.expected-left .key-label,.key.expected-right .key-label{color:#fff}
.bottom-bar{min-height:48px;padding:5px 14px max(5px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);background:var(--surface)}.bottom-bar button{border:0;background:transparent;padding:8px 3px;cursor:pointer;color:var(--muted);font-size:10px;font-weight:800}.bottom-bar span{color:var(--muted);font-size:9px}.bottom-bar strong{color:var(--ink);font-size:11px}.progress-svg{position:fixed;width:0;height:0;pointer-events:none}
.bottom-bar button:disabled{cursor:default;opacity:.4}.bottom-bar select{max-width:130px;border:1px solid var(--line);border-radius:7px;padding:5px;background:var(--surface);font-size:10px}
@media(min-width:700px){body{display:grid;place-items:center;background:#ded7cc}.app-shell{width:min(100%,900px);min-height:min(100dvh,1100px);max-height:1100px;box-shadow:0 0 50px #2d271e1f}.app-header{padding-inline:26px;min-height:70px}.sequence{padding:14px 26px 10px}.upcoming{height:38px}.practice{padding-inline:50px}.hand{min-height:170px}.keyboard{min-width:820px}.keyboard-zone{min-height:300px}.bottom-bar{min-height:58px;padding-inline:26px}}
@media(max-height:680px){.app-shell{grid-template-rows:auto auto minmax(190px,1fr) minmax(175px,32vh) auto}.upcoming{display:none}.sequence{padding-bottom:6px}.hand{min-height:104px}.instruction{font-size:22px;margin-bottom:7px}.hand strong{font-size:39px}.feedback{padding-top:5px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.session-stat{display:grid;min-width:66px;border:0;background:transparent;padding:0;color:var(--muted);font-size:9px;line-height:1.1;text-align:center}.session-stat b{color:var(--ink);font-size:13px}.connection-button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.connection-button.primary.connected{background:#2f6d48;color:#fff}.bottom-bar button.active{color:#fff;background:var(--left);border-radius:99px;padding-inline:12px}@media(min-width:700px){.bottom-bar button{font-size:12px;min-height:40px}.connection-button{min-height:42px;padding-inline:16px}.practice{justify-content:center}.feedback{font-size:13px}}
.midi-diagnostic{display:none;min-width:150px;color:var(--muted);font-size:10px;line-height:1.25}.midi-diagnostic.visible{display:grid}.midi-diagnostic b{max-width:180px;overflow:hidden;color:var(--ink);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.import-button{display:inline-flex;align-items:center}.tempo-control{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}.tempo-control input{width:80px;accent-color:var(--left)}
.results-dialog{width:min(92vw,430px);border:0;border-radius:24px;padding:30px;background:var(--surface);color:var(--ink);text-align:center;box-shadow:0 24px 80px #211c1766}.results-dialog::backdrop{background:#25242199;backdrop-filter:blur(5px)}.result-mark{display:grid;place-items:center;width:48px;height:48px;margin:auto;border-radius:50%;background:var(--right);color:#fff;font-size:25px}.results-dialog p{margin:14px 0 2px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.results-dialog h2{margin:0;font:500 34px/1.15 Georgia,serif}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.result-grid span{display:grid;gap:3px;padding:12px 5px;border-radius:12px;background:var(--paper);color:var(--muted);font-size:10px}.result-grid b{color:var(--ink);font-size:19px}.results-dialog button{width:100%;border:0;border-radius:99px;padding:12px;cursor:pointer;font-weight:800}.results-dialog #next-lesson-button{background:var(--ink);color:#fff}.results-dialog #repeat-button{margin-top:6px;background:#e9e2d7;color:var(--ink)}.results-dialog #close-results{margin-top:5px;background:transparent;color:var(--muted)}
.progress-dialog{text-align:left}.progress-dialog h2{margin-bottom:22px}.daily-row{display:flex;justify-content:space-between;font-size:12px}.daily-track{height:8px;margin:9px 0 13px;overflow:hidden;border-radius:99px;background:var(--line)}.daily-track i{display:block;width:0;height:100%;border-radius:inherit;background:var(--right);transition:width .3s}.goal-picker{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.goal-picker select{border:1px solid var(--line);border-radius:8px;padding:5px;background:var(--surface)}.history-list{max-height:180px;overflow:auto;border-block:1px solid var(--line);margin-bottom:16px}.history-list div{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line)}.history-list div:last-child{border:0}.history-list span{display:grid;font-size:12px;font-weight:750}.history-list small,.history-list em{color:var(--muted);font-size:10px;font-weight:400}.history-list b{color:var(--right)}.history-list em{display:block;padding:18px 0;text-align:center}.progress-dialog #close-progress{background:var(--ink);color:#fff}.key-hint{color:var(--muted);font-size:9px}
.backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}.backup-actions button,.backup-actions label{display:grid;place-items:center;width:100%;border:1px solid var(--line);border-radius:99px;padding:10px;background:transparent;color:var(--ink);cursor:pointer;font-size:11px;font-weight:800}.progress-dialog #close-progress{background:var(--ink);color:#fff}
.system-button.offline{color:#9b432d;border-color:#dcae9f;background:#fae9e3}.system-button.offline .status-dot{background:#cb6847}.diagnostic-list{display:grid;gap:7px;margin:22px 0;text-align:left}.diagnostic-list div{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:var(--paper)}.diagnostic-list i{display:grid;flex:none;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--right);color:#fff;font-style:normal;font-weight:900}.diagnostic-list .warning i{background:#c98742}.diagnostic-list span{display:grid}.diagnostic-list b{font-size:12px}.diagnostic-list small{color:var(--muted);font-size:10px}.diagnostic-dialog #rerun-diagnostic{background:var(--ink);color:#fff}.diagnostic-dialog #close-diagnostic{margin-top:5px;background:transparent;color:var(--muted)}

/* Compact practice stage and acoustic-piano proportions */
.app-shell{grid-template-rows:auto auto minmax(175px,.65fr) minmax(300px,1.35fr) auto}
.practice{padding:10px 16px 6px;justify-content:center}
.instruction{margin-bottom:9px;font-size:clamp(25px,4vw,35px)}
.hands-grid{width:min(100%,720px);gap:12px}
.hand{min-height:108px;border-radius:16px;padding:9px 12px}
.hand strong{margin-top:2px;font-size:clamp(38px,8vw,58px);line-height:.9}
.hand-kicker{font-size:8px}.hand-state{margin-top:5px}.feedback{min-height:23px;padding-top:6px;font-size:10px}
.keyboard-zone{grid-template-rows:38px minmax(0,1fr);border-top-color:#c9b9a4;background:#171613}
.keyboard-wrap{border-top:7px solid #5f3528;background:#171613;box-shadow:inset 0 3px #1a100c}
.keyboard{min-width:850px;padding:0 5px 7px;gap:0;background:#171613}
.key.white{height:100%;margin:0;border:1px solid #aaa197;border-top:0;border-radius:0 0 7px 7px;background:#faf7ef;box-shadow:inset 0 -5px #ddd5c9,inset 2px 0 #fff,0 3px 3px #0008}
.key.white+.key.white{margin-left:2px}
.key.black{width:2.7%;height:59%;border:1px solid #090909;border-top:0;border-radius:0 0 6px 6px;background:#1d1c1a;box-shadow:inset 2px 0 #3b3936,inset -2px 0 #090909,inset 0 -8px #111,0 5px 5px #0008}
.key.white.active-left,.key.white.expected-left{background:#dc805d;box-shadow:inset 0 -5px #bb5b3e,inset 2px 0 #efac91,0 3px 3px #0008}.key.white.active-right,.key.white.expected-right{background:#92a581;box-shadow:inset 0 -5px #6e8461,inset 2px 0 #b4c2a8,0 3px 3px #0008}
.key.black.active-left,.key.black.expected-left{background:#9d452f}.key.black.active-right,.key.black.expected-right{background:#4e6748}
.key-label{bottom:11px;color:#58534d;font-size:10px}.key.expected-left .key-label,.key.expected-right .key-label{color:#211f1b}
@media(min-width:700px){.app-shell{grid-template-rows:auto auto minmax(185px,.62fr) minmax(350px,1.38fr) auto}.practice{padding-block:9px 5px}.hand{min-height:126px}.hands-grid{width:min(100%,760px)}.keyboard-zone{min-height:350px}}
@media(min-width:1000px){.hands-grid{width:min(100%,780px)}.hand{min-height:132px}.keyboard-zone{min-height:390px}}
@media(max-height:680px){.app-shell{grid-template-rows:auto auto minmax(150px,.55fr) minmax(270px,1.45fr) auto}.hand{min-height:88px}.instruction{font-size:22px}.keyboard-zone{min-height:270px}}
@media(max-width:699px){.app-header{align-items:stretch;flex-direction:column;gap:7px}.song-picker{width:100%}.song-picker #song-select{flex:1;max-width:none}.header-actions{justify-content:flex-end;overflow-x:auto}.session-stat{min-width:54px}.midi-diagnostic{min-width:125px}.import-button{display:none}.hands-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hand{min-width:0;padding-inline:7px}.bottom-bar{max-width:100vw;justify-content:flex-start;gap:10px;overflow-x:auto}.bottom-bar>*{flex:none}}
.hand.chord strong{font-size:clamp(28px,3.5vw,50px);line-height:1.08;max-width:100%;overflow-wrap:anywhere;text-align:center}.hand.chord{padding-inline:20px}.hand.chord>span:nth-of-type(2){font-size:14px;margin-top:10px}.practice:has(.hand.chord){padding-top:8px}.practice:has(.hand.chord) .instruction{font-size:clamp(26px,3vw,42px);margin-bottom:12px}@media(min-width:1000px){.app-shell{width:min(100%,1180px)}.hands-grid{width:min(100%,880px)}.hand{min-height:210px}.keyboard-zone{min-height:320px}}
@media(min-width:1000px){.hands-grid{width:min(100%,780px)}.hand{min-height:120px}.instruction{font-size:30px;line-height:1;margin-bottom:8px}.feedback{min-height:20px;padding-top:4px}.keyboard-zone{min-height:390px}}

/* Diccionario de acordes */
.chord-library{display:none;min-height:100dvh;background:var(--paper,#f5f0e7);color:#28251f}.chord-library.open{display:block}
.chord-library-head{min-height:118px;padding:22px clamp(22px,4vw,64px);display:grid;grid-template-columns:140px 1fr 140px;align-items:center;border-bottom:1px solid #d8d0c3;background:rgba(248,244,236,.96)}
.chord-library-head>div{text-align:center}.chord-library-head span{font-size:.7rem;font-weight:900;letter-spacing:.22em;color:#9f4a2e}.chord-library-head h1{margin:3px 0 1px;font:700 clamp(2rem,4vw,3.6rem)/.98 Georgia,serif}.chord-library-head p{margin:8px 0 0;color:#777066}
.chord-library-head button,.chord-toolbar select,.chord-toolbar input,.chord-detail select{border:1px solid #d3cabd;border-radius:999px;background:#fffdf8;color:#302d28;font:700 .85rem inherit;padding:11px 15px}#close-chords{justify-self:start}#notation-toggle{justify-self:end}
.chord-toolbar{position:sticky;top:0;z-index:20;padding:13px clamp(22px,4vw,64px);display:grid;grid-template-columns:minmax(230px,1fr) 190px 190px auto;gap:12px;align-items:end;background:rgba(245,240,231,.94);backdrop-filter:blur(14px);border-bottom:1px solid #ddd4c7}
.chord-toolbar label{display:grid;gap:5px;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#766f65}.chord-toolbar input,.chord-toolbar select{width:100%;height:42px;text-transform:none;letter-spacing:0}.chord-toolbar b{align-self:center;white-space:nowrap;color:#9f4a2e}
.chord-library-main{max-width:1600px;margin:auto;padding:26px clamp(22px,4vw,64px) 70px;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.chord-card{min-height:132px;padding:18px;border:1px solid #ddd4c6;border-radius:16px;background:#fffdf8;color:#302d28;text-align:left;display:flex;flex-direction:column;align-items:flex-start;transition:.18s ease}.chord-card:hover{transform:translateY(-2px);border-color:#bfa894;box-shadow:0 9px 22px rgba(53,45,35,.08)}.chord-card.selected{border-color:#a64e30;background:#f6dfd4;box-shadow:inset 0 0 0 1px #a64e30}.chord-card strong{font:700 2rem/1 Georgia,serif}.chord-card span{margin-top:11px;font-weight:800}.chord-card small{margin-top:auto;padding-top:8px;color:#7c746a;line-height:1.3}
.chord-detail{position:sticky;top:88px;padding:28px;border:1px solid #cbd6c3;border-radius:24px;background:#e4ebdf;box-shadow:0 18px 45px rgba(58,67,51,.12)}.chord-detail>small{font-weight:900;letter-spacing:.14em;color:#5d7653}.chord-detail h2{margin:9px 0 0;font:700 2rem/1.05 Georgia,serif}.chord-detail>strong{display:block;margin:10px 0;font:700 clamp(3.5rem,7vw,5.8rem)/.9 Georgia,serif;color:#496440}.chord-detail>p{font-weight:800}.chord-formula{display:inline-block;padding:7px 11px;border-radius:8px;background:rgba(255,255,255,.58);font-weight:800;color:#52674b}.chord-detail label{display:grid;gap:7px;margin:20px 0 12px;font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.chord-detail select{width:100%;border-radius:10px}.chord-detail #play-chord{width:100%;margin-top:16px;border:0;border-radius:999px;padding:14px;background:#47613f;color:white;font-weight:900}.chord-tip{margin:13px 0 0;font-size:.83rem;line-height:1.45;color:#5f6f59}
.chord-mini-piano{position:relative;height:124px;display:flex;overflow:hidden;border:5px solid #3a3933;border-radius:9px;background:#292822}.mini-key{display:block}.mini-key.white{flex:1;border-right:1px solid #bcb8af;background:linear-gradient(90deg,#f2eee4,#fffdf8 55%,#e7e1d5)}.mini-key.white.active{background:linear-gradient(#ef9b72,#c75e3c)}.mini-key.black{position:absolute;top:0;width:4%;height:62%;z-index:2;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#171713,#47463e 55%,#11110e);box-shadow:0 3px 3px rgba(0,0,0,.35)}.mini-key.black.active{background:linear-gradient(#8eaa80,#4e7045)}
@media(max-width:900px){.chord-library-head{grid-template-columns:auto 1fr auto;min-height:90px;padding:14px 16px}.chord-library-head h1{font-size:1.65rem}.chord-library-head p{display:none}.chord-library-head button{padding:9px 11px;font-size:.75rem}.chord-toolbar{padding:10px 14px;grid-template-columns:1fr 1fr}.chord-search{grid-column:1/-1}.chord-toolbar b{display:none}.chord-library-main{padding:16px 14px 55px;grid-template-columns:1fr}.chord-detail{position:static;grid-row:1;padding:20px}.chord-detail>strong{font-size:4rem}.chord-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chord-card{min-height:112px;padding:14px}.chord-card strong{font-size:1.65rem}.chord-card small{font-size:.68rem}.chord-mini-piano{height:105px}}
@media(max-width:480px){.chord-library-head>div span{display:none}.chord-library-head h1{font-size:1.25rem}.chord-toolbar label{font-size:.6rem}.chord-detail h2{font-size:1.5rem}}