/* iCifra — visual layer. Layout and music behavior live in styles.css/app.js. */
.topbar .brand .brand-version{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:500;line-height:1;letter-spacing:.04em;text-align:left}
.song-stage[data-panel-position]>.player-toolbar{overflow:hidden;flex-wrap:nowrap}
.player-toolbar .toolbar-controls{display:flex;flex:1 1 0;min-width:0;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
.toolbar-controls::-webkit-scrollbar{display:none}
.toolbar-controls>*{flex-shrink:0}
.player-toolbar #toolbarSwapBtn{position:static;flex:0 0 30px;align-self:center;min-width:30px;min-height:30px;background:var(--surface)}
:root{--bg:#070d1d;--surface:#0d182b;--surface-2:#14233a;--text:#f7f9fc;--muted:#a9bcd2;--line:#253c56;--accent:#ffc15c;--accent-2:#29e0d3;--radius:16px;--shadow:0 16px 48px #0004}
[data-theme="light"]{--bg:#eef3f6;--surface:#fff;--surface-2:#e3edf0;--text:#142536;--muted:#4e6578;--line:#bed0d9;--accent:#9b5700;--accent-2:#007d79}
body{background:radial-gradient(ellipse at 75% 0%,#122a4244,transparent 55%),var(--bg)}
button,input,select{ -webkit-tap-highlight-color:transparent}button{transition:border-color .15s,background .15s}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.topbar{height:80px;min-height:80px;grid-template-columns:auto minmax(180px,560px) auto;gap:24px;padding:12px clamp(20px,4vw,64px);background:var(--bg);border-bottom:1px solid var(--line)}
.topbar #versionBtn{display:none}.topbar .brand{font-size:23px;gap:9px;padding:0;white-space:nowrap;letter-spacing:-.8px}.brand b{color:var(--accent)}
.topbar .brand-mark,.about-mark{width:38px;height:43px;border-radius:50% 50% 50% 10%;transform:rotate(-12deg);background:linear-gradient(145deg,#ffdc87,#ffb547);color:#142033;font-size:26px;font-weight:900;letter-spacing:-3px;padding-right:3px;box-shadow:0 4px 18px #ffb54715}
.topbar .brand>span:last-child{display:inline}.topbar .global-search{grid-column:2;grid-row:1}.global-search input{height:46px;border-radius:13px;background:var(--surface);border-color:#39536c;color:var(--text)}
.topbar .nav-actions{grid-column:3;grid-row:1;gap:8px}.nav-actions .ghost{font-size:12px}.nav-actions .button.compact{font-size:12px;min-height:42px;padding:10px 12px}
.button{background:linear-gradient(115deg,#ffcf72,#ffb547);color:#15202e;box-shadow:0 5px 20px #ffb54715;border:1px solid #ffdb8e}
.language-switch{background:var(--surface);padding:3px}.language-switch button{font-size:10px;min-height:30px;padding:4px}.language-switch button.active{color:var(--text);background:var(--surface-2)}
.home-view{display:block;overflow-y:auto;padding:0 clamp(20px,5vw,72px) 48px;scrollbar-width:thin}
.hero{position:relative;isolation:isolate;padding:60px 0 44px;min-height:360px;max-width:1200px}.hero:after{display:none}.hero h1{font-size:clamp(42px,4.6vw,68px);letter-spacing:-.055em;line-height:1.04;max-width:680px}.hero h1 em{color:var(--accent)}
.hero .eyebrow{color:var(--accent-2);font-size:11px;letter-spacing:.16em;margin-bottom:20px}.hero>p:not(.eyebrow){max-width:500px;font-size:16px;line-height:1.6;margin:20px 0 24px}.hero-actions{display:flex;align-items:center;gap:22px}.hero-button{margin:0;min-height:52px;padding:14px 23px;font-size:17px}.hero-button span:first-child{margin:0 12px 0 0}.hero-button span:last-child{margin-left:22px}.hero-actions .text-button{font-size:13px;padding:12px 0}

.feature-highlights{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:1200px;margin:0 auto 40px}.feature-highlights article{padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,var(--surface-2),var(--surface));display:flex;flex-direction:column;gap:6px}.feature-highlights svg{width:25px;height:25px;color:var(--accent-2);margin-bottom:3px}.feature-highlights article:nth-child(2) svg{color:var(--accent)}.feature-highlights article:last-child svg{color:#ff7e91}.feature-highlights strong{font-size:13px}.feature-highlights small{font-size:11px;color:var(--muted)}
.home-view .section-wrap{display:block;max-width:1200px;padding:0;margin:0 auto}.section-heading{align-items:center;margin-bottom:16px}.home-view .section-heading h2,.discovery-section h2{font-size:26px;letter-spacing:-.04em}.section-heading .text-button{border:1px solid var(--line);border-radius:24px;padding:9px 14px;white-space:nowrap;font-size:12px}.home-view .section-heading .eyebrow{display:none}
.song-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:12px;padding:0}.song-card{display:flex;align-items:center;gap:16px;min-height:126px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,var(--surface-2),var(--surface));box-shadow:none}.song-card:hover{transform:none;border-color:var(--accent-2)}
.song-art{width:76px;height:92px;flex:0 0 76px;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 65% 25%,hsl(var(--art-hue) 75% 70% / .65),transparent 28%),linear-gradient(160deg,hsl(var(--art-hue) 60% 25%),#091426 80%);border:1px solid #ffffff18;border-radius:10px}.song-art:after{content:"";position:absolute;width:100px;height:100px;top:54px;left:-15px;border:1px solid #ffffff24;border-radius:50%;box-shadow:0 0 0 10px #ffffff08,0 0 0 22px #ffffff06}.song-art>span{font-size:30px;color:#fff9;transform:rotate(-12deg)}
.song-card-body{min-width:0;flex:1}.song-card .genre{display:inline-block;color:var(--accent-2);background:#29e0d30c;border:1px solid #29e0d344;border-radius:20px;font-size:9px;padding:4px 8px;letter-spacing:.04em}.song-card h3{margin:9px 0 3px;font-size:20px;line-height:1.15;overflow-wrap:anywhere}.song-card p{margin:0;font-size:14px;color:var(--muted)}.song-card-end{display:flex;align-items:center;gap:10px}.song-card .number{position:static;color:color-mix(in srgb,var(--muted) 14%,transparent);font-size:48px;line-height:1;font-weight:900}.card-favorite{font-size:18px;color:var(--accent)}.song-version-badge{margin:5px 0 0;font-size:10px}
.discovery-section{max-width:1200px;margin:32px auto 0}.discovery-section .eyebrow{display:none}.discovery-section .section-heading p{margin:6px 0 0;color:var(--muted);font-size:13px}.discovery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.discovery-grid button{padding:20px;text-align:left;background:linear-gradient(145deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:7px}.discovery-grid button>span{font-size:25px;color:var(--accent)}.discovery-grid strong{font-size:15px}.discovery-grid small{font-size:12px;color:var(--muted)}
.bottom-nav{display:none;flex-shrink:0;background:var(--bg);border-top:1px solid var(--line);padding:5px 12px max(6px,env(safe-area-inset-bottom));justify-content:space-around}.bottom-nav button{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-width:48px;min-height:50px;padding:4px 6px;background:none;border:0;color:var(--muted);font-size:10px}.bottom-nav svg{width:22px;height:22px}.bottom-nav button.active{color:var(--accent)}.bottom-nav button.active svg{filter:drop-shadow(0 0 6px #ffc15c44)}
.song-view{max-width:1600px;padding-block:12px;gap:10px}.song-heading{border:1px solid var(--line);background:linear-gradient(110deg,var(--surface),transparent);border-radius:14px;padding:10px 12px;min-height:68px}.song-heading h1{font-size:clamp(22px,3vw,36px);line-height:1.05}.song-heading p:not(.eyebrow){color:var(--muted);margin-bottom:0}.song-heading .eyebrow{font-size:9px}.song-heading .icon-button{border:1px solid var(--line);border-radius:12px;min-height:42px;min-width:42px}.song-heading-actions{display:flex;gap:6px}
.chord-tray{background:linear-gradient(145deg,var(--surface-2),var(--surface));border-color:#268d9a88;border-top:1px solid var(--accent-2);box-shadow:inset 0 1px 18px #29e0d308}.dock-header .tray-scope{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:2px}.dock-header .tray-scope button{border-radius:8px}.tray-scope button.active{background:#29e0d318;box-shadow:inset 0 0 12px #29e0d315;color:var(--accent-2)}.dock-header .diagram-zoom button{border-radius:9px;background:var(--surface)}.dock-header .diagram-zoom #diagramFit{min-width:65px;border-color:#268d9a;color:var(--text)}#diagramFit.active{color:var(--accent-2)}
.chord-tray .chord-chip{background:linear-gradient(145deg,var(--surface),var(--bg));border-color:#2b5369;border-radius:12px}.chord-chip>strong{color:var(--accent)}.fretboard path{stroke:var(--muted)}.fretboard circle{fill:var(--accent-2)}.fretboard text{fill:var(--muted)}
.sheet-viewport{background:linear-gradient(135deg,var(--surface),var(--bg));border:1px solid #2c546e;border-radius:14px;scrollbar-width:thin}.chord-sheet{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-weight:400}.section-label{color:var(--accent-2);font-size:11px;letter-spacing:.14em;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}.inline-chord{color:var(--accent);font-weight:800}.song-section{margin-bottom:28px}
.song-stage[data-panel-position]>.player-toolbar{position:relative;background:linear-gradient(120deg,var(--surface-2),var(--surface));border:1px solid #2c546e;border-radius:12px;display:flex;gap:8px;padding:5px 8px;overflow:visible;min-height:60px;max-height:none;align-items:center}
.player-toolbar .tool-label,.panel-position-control{font-size:9px;color:var(--muted)}.panel-position-control{gap:3px}.player-toolbar .tool-group{padding:0;min-height:44px}.player-toolbar .tool-values button{min-width:32px;min-height:32px}.player-toolbar .tool-values strong{color:var(--accent);font-size:14px}#panelPosition{min-height:34px;background:var(--bg);border-color:var(--line);max-width:115px}
.player-toolbar .player-playback #scrollBtn{background:var(--surface);border-color:#268d9a;color:var(--accent);border-radius:50%;width:42px;height:42px}.player-toolbar .player-playback #scrollBtn.active{background:var(--accent);color:#142033}.reader-tools-button{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:9px;min-width:36px;min-height:40px;letter-spacing:1px}.player-toolbar .player-playback #speedRange{width:74px}.player-toolbar .player-playback:has(#scrollSpeedControl:not([hidden])){flex-wrap:wrap}
.reader-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reader-tools-grid .tool-group,.reader-tools-grid>button{display:flex!important;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.reader-tools-grid button{border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:40px;min-height:40px;color:var(--text)}.reader-tools-grid .tool-label{display:block}.reader-tools-grid .tool-values{display:flex;align-items:center;gap:8px}.reader-tools-grid .tool-toggle{flex-direction:column}.reader-tools-grid .tool-toggle.active{border-color:var(--accent-2)}.more-menu{display:grid;gap:10px}.more-menu button{min-height:50px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);padding:12px}.modal-card{border:1px solid #39536c;background:var(--surface);max-height:85dvh;overflow:auto}.modal-card h2{letter-spacing:-.03em}.search-result{gap:8px;min-height:48px;align-items:center}.search-result>strong{flex:1}.search-result>span{font-size:12px}.browse-row{min-height:72px;border-bottom-color:var(--line)}
body.performance .bottom-nav{display:none!important}body.performance .song-heading{padding:6px 10px;min-height:50px}
@media screen and (max-width:1100px){
 .topbar{grid-template-columns:auto 1fr;grid-template-rows:auto auto;min-height:0;height:auto;padding:10px 16px;gap:10px}.topbar .brand{grid-column:1;grid-row:1;font-size:22px}.topbar .nav-actions{grid-column:2;grid-row:1;justify-content:flex-end;gap:8px}.topbar .nav-actions .ghost{display:none}.topbar .global-search{grid-column:1/-1;grid-row:2}.topbar .brand-mark{width:32px;height:36px;font-size:23px}.topbar .global-search input{height:42px}.topbar .global-search>kbd{display:none}
 .home-view{padding:0 20px 30px}.hero{padding:32px 0 28px;min-height:320px}.hero h1{font-size:44px}.hero>p:not(.eyebrow){font-size:15px;max-width:420px}.feature-highlights{margin-bottom:28px;gap:8px}.feature-highlights article{padding:12px}.song-grid{grid-template-columns:1fr}.song-card{min-height:110px}.discovery-grid{gap:8px}.discovery-grid button{padding:14px}.bottom-nav{display:flex}
 body[data-view="songView"] .bottom-nav{display:none}
 .song-view{padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:8px}.song-heading{padding:8px;gap:8px;min-height:64px}.song-heading h1{font-size:24px}.song-heading p:not(.eyebrow){font-size:12px}.song-heading-actions{max-width:140px}.song-stage[data-panel-position]>.player-toolbar{gap:6px;padding:4px 6px;min-height:58px}.player-toolbar .tool-values button{min-width:30px}.player-toolbar .tool-values strong{min-width:22px}.player-toolbar #capoValue{min-width:43px}.song-stage>.sheet-viewport{padding:16px 12px}.song-line{font-size:var(--sheet-size);line-height:1.65}.panel-divider span{background:#48677f}
}
@media screen and (max-width:600px){
 .topbar .brand{font-size:20px}.topbar .nav-actions{gap:6px}.topbar .nav-actions .button.compact{font-size:11px;padding:8px}.topbar .language-switch{gap:0}.topbar .language-switch button{font-size:9px;padding:3px}.topbar .brand-mark{width:29px;height:33px;font-size:21px}.hero{min-height:310px;padding-top:30px}.hero h1{font-size:39px}.hero .eyebrow{font-size:9px;margin-bottom:16px}.hero>p:not(.eyebrow){font-size:14px;max-width:330px;line-height:1.55;margin:16px 0 20px}.hero-actions{gap:12px}.hero-button{min-height:48px;padding:12px 16px;font-size:15px}.hero-actions .text-button{font-size:11px}
 .feature-highlights{gap:6px;margin-bottom:26px}.feature-highlights article{padding:10px 6px;gap:4px;border-radius:11px}.feature-highlights svg{width:22px;height:22px}.feature-highlights strong{font-size:9px;line-height:1.35}.feature-highlights small{font-size:8px;line-height:1.4}.home-view .section-heading h2,.discovery-section h2{font-size:24px}.song-card{padding:10px;gap:12px;min-height:105px}.song-art{width:57px;height:77px;flex-basis:57px}.song-card h3{font-size:18px}.song-card p{font-size:12px}.song-card .number{font-size:38px}.song-card-end{gap:7px}.song-card .genre{font-size:8px}.discovery-grid{grid-template-columns:1fr}.discovery-grid button{display:grid;grid-template-columns:30px 1fr;gap:4px 10px}.discovery-grid button>span{grid-row:1/3}.discovery-grid small{grid-column:2}
 .song-heading h1{font-size:22px}.song-heading .icon-button{min-width:36px;min-height:38px;padding:6px}.song-heading-actions{gap:4px;max-width:116px}.song-stage[data-panel-position]>.player-toolbar{display:grid;grid-template-columns:40px minmax(77px,1fr) minmax(64px,1fr) minmax(70px,1fr) 30px;gap:3px;padding:4px;min-height:58px}.player-toolbar .player-playback #scrollBtn{width:38px;height:40px;min-height:40px}.reader-tools-button{min-width:28px;min-height:40px;width:28px;font-size:10px;padding:0}.player-toolbar .tool-group{border:0;gap:2px}.player-toolbar .tool-values{gap:0}.player-toolbar .tool-values button{min-width:22px;width:22px;min-height:32px;padding:0}.player-toolbar .tool-values strong{min-width:21px;font-size:12px}.player-toolbar #capoValue{min-width:38px;font-size:10px}#panelPosition{max-width:100%;width:100%;font-size:10px;padding:3px;min-height:34px}.panel-position-control{font-size:8px}.player-toolbar .tool-label{font-size:8px;line-height:10px}.player-toolbar .player-playback:has(#scrollSpeedControl:not([hidden])){display:contents}.player-toolbar .player-playback #scrollSpeedControl:not([hidden]){grid-column:1/-1;grid-row:2;display:flex;width:100%;padding:0 8px}.player-toolbar .player-playback #speedRange{width:100%;height:32px}.player-toolbar .player-playback #speedValue{font-size:11px}.dock-header .diagram-zoom #diagramZoomOut,.dock-header .diagram-zoom #diagramZoomIn{min-width:32px;min-height:36px}.song-stage[data-panel-position="left"] .dock-header,.song-stage[data-panel-position="right"] .dock-header{gap:3px}.sheet-viewport .song-line{overflow-wrap:normal;white-space:pre-wrap}.lyric-token{overflow-wrap:normal;white-space:pre}.song-stage>.sheet-viewport{overflow-x:auto;touch-action:pan-x pan-y}
}
@media screen and (max-width:360px){.topbar{padding-inline:12px}.topbar .brand{font-size:18px;gap:6px}.topbar .brand-mark{width:25px;height:29px;font-size:19px}.topbar .nav-actions .button.compact{width:34px;height:34px;min-height:34px;font-size:0;padding:0}.topbar .nav-actions .button.compact:before{content:"+";font-size:23px}.home-view{padding-inline:16px}.hero h1{font-size:35px}.hero-actions .text-button{font-size:10px}.song-card .number{display:none}.song-card h3{font-size:17px}}
@media screen and (max-height:500px){body[data-view="songView"] .topbar{display:none}.song-view{gap:4px;padding-block:4px}.song-heading{min-height:48px;padding-block:4px}.song-heading h1{font-size:19px}.song-heading p:not(.eyebrow){display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.bottom-nav,#readerToolsBtn{display:none!important}.song-heading{background:white;border:0}.chord-sheet{font-family:ui-monospace,monospace}.section-label,.inline-chord{color:#000}}
@media screen and (max-width:360px){.song-stage[data-panel-position]>.player-toolbar{grid-template-columns:36px minmax(68px,1fr) minmax(58px,1fr) minmax(64px,1fr) 28px;gap:2px;padding:4px 3px}.player-toolbar .player-playback #scrollBtn{width:34px;height:38px;min-height:38px}.player-toolbar .tool-values button{min-width:20px;width:20px}.player-toolbar .tool-values strong{min-width:18px}.player-toolbar #capoValue{min-width:35px}.panel-position-control{font-size:7px}.player-toolbar .tool-label{font-size:7px}}
@media screen and (max-width:600px){
 .player-toolbar #readerToolsBtn{min-width:28px!important;width:28px!important}
 .player-toolbar .player-playback #scrollBtn{min-width:38px!important;width:38px!important}
 .player-toolbar .player-playback #scrollSpeedControl{flex-direction:row;min-width:0;align-items:center}
 .player-toolbar .player-playback #speedRange{flex:1;width:auto;min-width:0}
}
@media screen and (max-width:360px){.player-toolbar .player-playback #scrollBtn{min-width:34px!important;width:34px!important}}
@media screen and (max-width:1100px){.topbar .nav-actions #aboutBtn{display:none}.topbar .nav-actions{min-width:0}.topbar .brand{flex-shrink:0}}
@media screen and (max-width:600px){
 .player-toolbar .toolbar-controls>.player-playback{grid-column:1;grid-row:1}
 .player-toolbar .player-playback #scrollBtn{grid-column:1;grid-row:1}
 .player-toolbar .toolbar-controls>.panel-position-control{grid-column:2;grid-row:1;min-width:0}
 .player-toolbar .toolbar-controls>.tool-group:has(#transposeDown){grid-column:3;grid-row:1}
 .player-toolbar .toolbar-controls>.tool-group:has(#capoDown){grid-column:4;grid-row:1}
 .player-toolbar .toolbar-controls>#readerToolsBtn{grid-column:5;grid-row:1}
 .panel-position-control>span{white-space:nowrap;letter-spacing:-.1px}
}
@media screen{.song-line.chord-only{min-height:1.9em;line-height:1.5;padding-top:0}.song-line.chord-only .lyric-token{padding-top:.2em;line-height:1.5}.song-line.chord-only .inline-chord{top:0}}
/* Touch-scrollable practice controls, independent of the resizable chord dock. */
@media screen {
 .song-stage[data-panel-position]>.player-toolbar{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;gap:10px;padding:5px 8px;min-height:64px;max-height:76px}
 .song-stage[data-panel-position]>.player-toolbar .toolbar-controls>*{flex:0 0 auto;grid-area:auto;min-width:0}
 .song-stage[data-panel-position] .player-toolbar .toolbar-controls>.player-playback{display:flex;flex-wrap:nowrap;gap:8px}
 .player-toolbar .player-playback #scrollSpeedControl:not([hidden]){display:flex;flex-direction:row;flex:none;width:115px;padding:0;gap:4px}
 .player-toolbar .player-playback #speedRange{width:85px;flex:1;min-width:60px;height:40px}
 .player-toolbar .panel-position-control{width:108px;font-size:9px}
 .player-toolbar #panelPosition{width:108px;min-height:36px;font-size:12px}
 .player-toolbar .tool-label{font-size:10px}
 .player-toolbar .tool-group{flex:none;min-width:100px}
 .player-toolbar .tool-values button{min-width:32px;width:32px;min-height:36px}
 .player-toolbar .tool-values strong{min-width:28px;font-size:14px}
 .player-toolbar #capoValue{min-width:48px;font-size:12px}
 .player-toolbar #readerToolsBtn{min-width:40px!important;width:40px!important;min-height:44px;margin-left:0}
 .player-toolbar .player-playback #scrollBtn{min-width:42px!important;width:42px!important;min-height:42px}
 .panel-divider-strip{grid-area:divider;display:flex;align-items:center;gap:6px;min-height:0;min-width:0}
 .panel-divider-strip #panelDivider{flex:1;align-self:stretch;min-height:0;min-width:0;cursor:row-resize;touch-action:none}
 .panel-divider-strip #panelDivider span{width:64px;height:5px;font-size:0}
 #toolbarSwapBtn{flex:none;display:grid;place-items:center;width:32px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent-2);font-size:22px;touch-action:manipulation}
 #toolbarSwapBtn[aria-pressed="true"]{background:var(--surface-2);border-color:var(--accent-2)}
 .song-stage[data-panel-position="top"]{grid-template-rows:minmax(0,var(--chord-panel-height,260px)) 34px auto minmax(0,1fr)}
 .song-stage[data-panel-position="bottom"]{grid-template-rows:minmax(0,1fr) auto 34px minmax(0,var(--chord-panel-height,260px))}
 .song-stage[data-panel-position="left"]{grid-template-columns:minmax(0,var(--chord-panel-width,320px)) 34px minmax(0,1fr)}
 .song-stage[data-panel-position="right"]{grid-template-columns:minmax(0,1fr) 34px minmax(0,var(--chord-panel-width,320px))}
 .song-stage[data-panel-position="left"] .panel-divider-strip,.song-stage[data-panel-position="right"] .panel-divider-strip{flex-direction:column;gap:4px}
 .song-stage[data-panel-position="left"] #panelDivider,.song-stage[data-panel-position="right"] #panelDivider{cursor:col-resize}
 .song-stage[data-panel-position="left"] #panelDivider span,.song-stage[data-panel-position="right"] #panelDivider span{width:5px;height:64px}
 .song-stage[data-panel-position].tray-hidden>.panel-divider-strip{display:none}
 body.performance .song-heading .song-heading-actions{display:flex}
 body.performance #favoriteBtn,body.performance #addListBtn,body.performance #songVersionControl{display:none}
 #mobileFullscreenBtn{color:var(--accent-2)}
}
@media screen and (max-width:1100px){.song-heading-actions{max-width:155px;flex-wrap:wrap}.player-toolbar .tool-values button{min-width:32px;min-height:36px}}
@media print{.panel-divider-strip,#mobileFullscreenBtn{display:none!important}}
/* Reader-first mobile header: one search/language row, compact song identity. */
@media screen and (max-width:1100px){
 body[data-view="songView"] .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;gap:8px;height:44px;min-height:44px;padding:4px 10px;border-bottom:0}
 body[data-view="songView"] .topbar .brand,body[data-view="songView"] .topbar #newSongBtn,body[data-view="songView"] .topbar .nav-actions>.ghost{display:none}
 body[data-view="songView"] .topbar .global-search{grid-column:1;grid-row:1;min-width:0}
 body[data-view="songView"] .topbar .global-search input{height:36px;font-size:13px;border-radius:10px;padding-left:35px;padding-right:10px}
 body[data-view="songView"] .topbar .search-icon{left:12px;font-size:21px}
 body[data-view="songView"] .topbar .nav-actions{grid-column:2;grid-row:1;gap:0}
 body[data-view="songView"] .language-switch{padding:2px;border-radius:8px}
 body[data-view="songView"] .language-switch button{min-height:28px}
 body[data-view="songView"] .search-results{top:40px}
 body[data-view="songView"] .song-view{padding:3px 8px max(6px,env(safe-area-inset-bottom));gap:5px}
 body[data-view="songView"] .song-heading{min-height:43px;padding:3px 5px;gap:6px;background:none;border:0;border-radius:0}
 body[data-view="songView"] .song-heading h1{font-size:18px;line-height:1.12;letter-spacing:-.02em;overflow-wrap:anywhere}
 body[data-view="songView"] .song-heading p:not(.eyebrow){font-size:10px;line-height:1.15;margin:2px 0 0}
 body[data-view="songView"] .song-heading .icon-button{min-width:34px;min-height:34px;padding:4px;border-radius:9px}
 body[data-view="songView"] .song-heading-actions{gap:3px;max-width:140px}
 body[data-view="songView"] #songVersion{min-height:30px;font-size:10px}
 .song-stage[data-panel-position]>.player-toolbar{min-height:52px;max-height:62px;padding:3px 6px;gap:8px}
 .player-toolbar .tool-group{min-height:40px}
 .player-toolbar .tool-values button{min-height:30px;height:30px}
 .player-toolbar .tool-label{font-size:9px;line-height:10px}
 .player-toolbar .panel-position-control{font-size:9px;gap:1px}
 .player-toolbar #panelPosition{min-height:32px;height:32px}
 .player-toolbar .player-playback #scrollBtn{min-height:36px;height:36px;min-width:36px!important;width:36px!important}
 .player-toolbar #readerToolsBtn{min-height:36px;height:36px}
 .song-stage[data-panel-position="top"]{grid-template-rows:minmax(0,var(--chord-panel-height,260px)) 28px auto minmax(0,1fr)}
 .song-stage[data-panel-position="bottom"]{grid-template-rows:minmax(0,1fr) auto 28px minmax(0,var(--chord-panel-height,260px))}
 #toolbarSwapBtn{width:30px;height:26px;font-size:21px}
 .dock-header{min-height:34px}
 .dock-header .tray-scope button{min-height:32px;padding-block:3px}
 .dock-header .diagram-zoom #diagramZoomOut,.dock-header .diagram-zoom #diagramZoomIn,.dock-header .diagram-zoom #diagramFit{min-height:32px;height:32px}
 .dock-footer{height:16px;min-height:16px;flex-basis:16px}
 .dock-footer .mirror-btn{height:16px;min-height:16px;font-size:9px;line-height:14px}
 body.performance[data-view="songView"] .topbar{display:none}
}
@media screen and (max-height:500px) and (max-width:1100px){body[data-view="songView"] .topbar{display:none}}
/* Keep every practice tool directly available; font size is a primary control. */
@media screen{
 .song-stage[data-panel-position]>.player-toolbar .toolbar-controls>.column-controls,.song-stage[data-panel-position]>.player-toolbar .toolbar-controls>#printBtn{display:flex}
 .player-toolbar .toolbar-controls>.font-controls{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:86px;padding:0!important}
 .player-toolbar .toolbar-controls>.font-controls .tool-values{display:flex;gap:3px}
 .player-toolbar .font-controls #fontDown,.player-toolbar .font-controls #fontUp{display:block;min-width:38px!important;width:38px;min-height:32px;padding:3px;font-size:16px;color:var(--text)}
 .player-toolbar .toolbar-controls>.tool-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:48px!important;min-height:42px;padding:4px 6px}
 .player-toolbar .toolbar-controls>.tool-toggle>span{font-size:17px;line-height:18px}
 .player-toolbar .toolbar-controls>.tool-toggle>small{font-size:9px;white-space:nowrap}
 .player-toolbar .toolbar-controls>.column-controls{min-width:78px}
 .player-toolbar .tool-toggle.active{background:var(--surface-2);color:var(--accent-2)}
}
/* Concert dashboard: the effect never receives pointer or keyboard input. */
.home-view{position:relative;isolation:isolate;background:transparent}
.home-view .hero{background:none}
.home-view .feature-highlights article,.home-view .song-card{background:linear-gradient(120deg,#102239e8,#081423d9);border-color:#25435c}
[data-theme="light"] .home-view .feature-highlights article,[data-theme="light"] .home-view .song-card{background:var(--surface)}
@media screen and (min-width:1024px){
 body[data-view="homeView"] .topbar{margin:10px 4.2% 0;padding:10px 18px;height:64px;min-height:64px;border:1px solid var(--line);border-radius:14px;background:#081321e8;grid-template-columns:auto minmax(160px,1fr) auto;grid-template-rows:auto;gap:20px}
 body[data-view="homeView"] .topbar .brand{grid-column:1;grid-row:1;font-size:22px}
 body[data-view="homeView"] .topbar .global-search{grid-column:2;grid-row:1}
 body[data-view="homeView"] .topbar .nav-actions{grid-column:3;grid-row:1;gap:6px}
 body[data-view="homeView"] .topbar .nav-actions .ghost{display:inline-flex}
 body[data-view="homeView"] .topbar .nav-actions #aboutBtn{display:inline-flex}
 body[data-view="homeView"] .bottom-nav{display:none}
 .home-view{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(170px,1fr) 76px minmax(195px,.72fr);gap:16px;padding:16px 5% 20px;overflow:hidden}
 .home-view .hero{width:100%;max-width:1400px;min-height:0;height:100%;margin:0 auto;padding:0 2%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 .home-view .hero h1{font-size:clamp(40px,min(5.1vw,7.2vh),78px);line-height:.99;max-width:780px}
 .home-view .hero .eyebrow{font-size:11px;margin:0 0 12px}
 .home-view .hero>p:not(.eyebrow){font-size:clamp(13px,1.2vw,17px);line-height:1.45;max-width:590px;margin:14px 0 16px}
 .home-view .hero-actions{gap:26px}
 .home-view .hero-button{min-height:44px;padding:11px 24px;font-size:15px}
 .home-view .hero-actions .text-button{font-size:13px}
 .home-view .feature-highlights{width:100%;max-width:1400px;height:100%;margin:0 auto;gap:12px}
 .home-view .feature-highlights article{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;column-gap:12px;row-gap:2px;padding:12px 16px}
 .home-view .feature-highlights svg{grid-row:1/3;margin:0;width:34px;height:34px}
 .home-view .feature-highlights strong{align-self:end;font-size:13px}
 .home-view .feature-highlights small{align-self:start;font-size:11px}
 .home-view .section-wrap{width:100%;max-width:1400px;min-height:0;display:flex;flex-direction:column;gap:10px}
 .home-view .section-heading{margin:0;flex:none;min-height:32px}
 .home-view .section-heading h2{font-size:clamp(24px,2.2vw,32px)}
 .home-view .song-grid{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;overflow:hidden}
 .home-view .song-card{height:100%;min-height:0;padding:8px 12px;gap:14px}
 .home-view .song-art{height:100%;max-height:82px;width:64px;flex-basis:64px;min-height:0}
 .home-view .song-card h3{font-size:clamp(16px,1.5vw,21px);margin:6px 0 3px}
 .home-view .song-card p{font-size:13px}
 .home-view .song-card .genre{font-size:8px;padding:3px 7px}
 .home-view .song-card .number{font-size:44px}
 .home-view .discovery-section{display:none}
}
@media screen and (min-width:1024px) and (max-height:720px){
 .home-view{grid-template-rows:minmax(150px,1fr) 62px minmax(170px,.85fr);gap:10px;padding-block:10px 14px}
 .home-view .hero h1{font-size:clamp(34px,6.4vh,48px)}
 .home-view .hero .eyebrow{font-size:9px;margin-bottom:9px}
 .home-view .hero>p:not(.eyebrow){max-width:620px;font-size:13px;margin:9px 0 11px}
 .home-view .hero-button{min-height:38px;padding:8px 18px;font-size:13px}
 .home-view .feature-highlights article{padding:9px 12px;grid-template-columns:30px minmax(0,1fr);column-gap:8px}
 .home-view .feature-highlights svg{width:27px;height:27px}
 .home-view .feature-highlights strong{font-size:11px}.home-view .feature-highlights small{font-size:10px}
 .home-view .song-card h3{font-size:16px;margin:4px 0 2px}.home-view .song-card p{font-size:11px}.home-view .song-card .number{font-size:34px}
 .home-view .section-heading{min-height:29px}.home-view .section-heading h2{font-size:24px}.home-view .song-grid{gap:8px}
}
@media screen and (min-width:1024px) and (max-width:1200px){body[data-view="homeView"] .topbar{gap:12px;padding-inline:12px}.home-view .hero h1{font-size:clamp(38px,5vw,56px)}body[data-view="homeView"] .nav-actions .ghost{font-size:10px;padding:8px 5px}.home-view .feature-highlights article{column-gap:8px;padding-inline:10px}}
@media screen and (max-width:1023px){.home-view .hero{isolation:auto}}
@media print{}
/* Shared iCifra surfaces and spacing, across every view. */
:root{--page-gutter:clamp(24px,2vw,40px);--panel-gradient:linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 78%,transparent),color-mix(in srgb,var(--surface) 92%,transparent))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.topbar{padding-inline:var(--page-gutter);background:color-mix(in srgb,var(--bg) 92%,transparent);border-color:var(--line)}
.page-view{max-width:none;padding:24px var(--page-gutter);gap:0}.page-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}.page-head h1{font-size:clamp(28px,3vw,44px)}
.browse-list{display:flex;flex-direction:column;gap:8px;padding:2px 2px 8px}.browse-row{width:100%;background:var(--panel-gradient);border:1px solid var(--line);border-radius:12px;text-align:left;color:var(--text);padding:10px 14px;min-height:80px;transition:background .15s,border-color .15s}
.browse-row:hover,.setlist-card:hover{border-color:var(--accent-2);background:var(--surface-2)}.browse-song{display:flex;align-items:center;gap:14px;min-width:0}.browse-song>div{min-width:0}.browse-song strong{overflow-wrap:anywhere}.browse-art{width:52px;height:52px;flex:0 0 52px;overflow:hidden;border:1px solid var(--line);border-radius:9px;display:block}.browse-song>div>span{color:var(--muted);font-size:13px}
.setlist-card,.about-intro,.about-features article,.choice,.more-menu button{background:var(--panel-gradient);border-color:var(--line);border-radius:14px}.modal-card{background:var(--surface);border-color:var(--line);border-radius:18px}.modal-card .button{border-radius:10px}.filter,.library-tabs button{min-height:40px}.filter.active,.library-tabs button.active{color:var(--accent-2);background:var(--surface-2);border-color:var(--accent-2)}
.global-search:focus-within input{border-color:var(--accent-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-2) 10%,transparent)}.song-card:focus-visible,.browse-row:focus-visible{outline-color:var(--accent-2);outline-offset:-3px}
.song-art{aspect-ratio:1;width:70px;height:70px;flex-basis:70px;background:var(--surface-2)}.song-art:after{display:none}.song-art-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;aspect-ratio:1}
.song-view{max-width:none;padding-inline:var(--page-gutter)}.song-heading,.sheet-viewport,.chord-tray,.player-toolbar{border-color:var(--line)}

@media screen and (min-width:1024px){
 body[data-view="homeView"] .topbar{margin:10px var(--page-gutter) 0}
 .home-view{padding-inline:var(--page-gutter)}
 .home-view .hero,.home-view .section-wrap,.home-view .feature-highlights{max-width:none}
 .home-view .hero{padding-inline:12px;padding-bottom:32px}
 .home-view .hero h1{font-size:clamp(42px,min(5.3vw,8vh),82px)}
 .home-view .song-art{width:72px;height:100%;max-height:80px;aspect-ratio:1;flex-basis:72px}
}
@media screen and (min-width:1024px) and (max-height:720px){.home-view .hero h1{font-size:clamp(36px,6.4vh,48px)}.home-view .hero{padding-bottom:22px}.home-view .song-art{width:54px;flex-basis:54px;max-height:62px}}
@media screen and (max-width:1023px){:root{--page-gutter:20px}.home-view{padding-inline:var(--page-gutter)}.hero{padding-bottom:60px;min-height:340px}.page-view{padding:20px var(--page-gutter)}.song-view{padding-inline:10px}}
@media screen and (max-width:600px){:root{--page-gutter:14px}.page-view{padding:16px var(--page-gutter)}.page-head{margin-bottom:12px;padding-bottom:12px}.browse-row{grid-template-columns:24px minmax(0,1fr) 78px;gap:7px;padding:9px;min-height:74px}.browse-song{gap:9px}.browse-art{width:42px;height:42px;flex-basis:42px}.browse-song strong{font-size:13px}.browse-song>div>span{font-size:11px}.browse-row .difficulty-pill{font-size:9px;padding:5px}.home-view .song-art{width:60px;height:60px;flex-basis:60px}.song-view{padding-inline:8px}.hero h1{font-size:38px}.about-intro{padding:18px}.about-features article{padding:18px}}
@media(prefers-reduced-motion:reduce){}
@media screen and (min-width:1024px){
 .home-view{grid-template-rows:minmax(170px,1fr) clamp(76px,10vh,104px) minmax(195px,.72fr)}
 .home-view .hero h1{font-size:clamp(46px,min(5.7vw,9.1vh),86px)}
 .home-view .feature-highlights article{grid-template-columns:48px minmax(0,1fr)}
 .home-view .feature-highlights svg{box-sizing:border-box;width:46px;height:46px;padding:9px;border:1px solid #29e0d344;background:linear-gradient(135deg,#29e0d323,#29e0d307);border-radius:10px}
 .home-view .feature-highlights article:nth-child(2) svg{border-color:#ffc15c44;background:linear-gradient(135deg,#ffc15c25,#ffc15c08)}
 .home-view .feature-highlights article:last-child svg{border-color:#ff7e9144;background:linear-gradient(135deg,#ff7e9125,#ff7e9108)}
}
@media screen and (min-width:1024px) and (max-height:720px){
 .home-view{grid-template-rows:minmax(150px,1fr) 62px minmax(170px,.85fr)}
 .home-view .hero h1{font-size:clamp(36px,6.4vh,48px)}
 .home-view .feature-highlights article{grid-template-columns:34px minmax(0,1fr);gap:2px 8px}
 .home-view .feature-highlights svg{width:33px;height:33px;padding:5px}
}
@media screen and (max-width:1023px){}
/* Compact, touch-friendly position controls and explicit key destinations. */
.player-toolbar .panel-position-control{width:186px;flex:0 0 186px}
.player-toolbar #panelPosition{display:flex;gap:2px;max-width:none;width:186px;height:44px;min-height:44px;padding:0;border:0;background:none}
#panelPosition button{width:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:21px;line-height:1;touch-action:manipulation}
#panelPosition button[aria-pressed="true"]{color:var(--accent-2);background:var(--surface-2);border-color:var(--accent-2)}
.player-toolbar .key-controls{gap:0;min-width:116px}
.player-toolbar .key-controls #currentKey{min-width:48px;font-size:13px}
#keyTargets{font-size:9px;line-height:10px;white-space:nowrap;color:var(--muted)}
.home-song-count{display:inline-block;color:var(--accent);margin-left:10px;white-space:nowrap}
.chord-preview .diagram-heading strong,.chord-detail .diagram-heading strong{overflow-wrap:anywhere}
.chord-preview .diagram-heading{flex-direction:column;gap:3px;text-align:center}
.chord-preview .diagram-heading>div{display:block;width:100%}
.chord-preview .diagram-heading strong{font-size:9px;font-weight:500;line-height:1.25;color:var(--muted)}
.chord-preview .diagram-heading small{display:none}
@media(max-width:600px){.home-song-count{display:block;margin:6px 0 0}}
/* Shared compact rhythm: keep related controls together and give lyrics the space. */
@media screen{
 .chord-tray .dock-header{display:flex;flex-wrap:nowrap!important;align-items:center;gap:6px;min-height:36px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:0 0 auto}
 .song-stage[data-panel-position] .chord-tray .dock-header{justify-content:flex-start}
 .song-stage[data-panel-position] .chord-tray .dock-header .tray-scope{flex:0 0 auto;max-width:none;margin:0}
 .song-stage[data-panel-position] .chord-tray .dock-header .diagram-zoom{width:auto;max-width:none;flex:0 0 auto}
 .dock-header::-webkit-scrollbar{display:none}
 .chord-tray .dock-header .dock-section{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;flex-basis:auto}
 .chord-tray .dock-header .tray-scope{flex:0 0 auto;margin:0;white-space:nowrap}
 .chord-tray .dock-header .diagram-zoom{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:3px;margin:0 0 0 auto;white-space:nowrap}
 .chord-tray .dock-header .diagram-zoom button{height:32px!important;min-height:32px!important}
 .chord-tray .dock-header .tray-scope button{height:32px;min-height:32px;padding:3px 7px}
 .song-heading .song-identity{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:2px;min-width:0}
 .song-heading .song-identity #songMeta{flex-basis:100%;margin:0;font-size:9px}
 .song-heading .song-identity #songTitle{font-size:clamp(18px,2.5vw,30px);line-height:1.12;margin:0}
 .song-heading .song-identity #songArtist{font-size:12px;line-height:1.25;margin:0;color:var(--muted)}
 .song-view .song-heading{min-height:38px;margin-bottom:6px;gap:8px;padding-block:2px}
 .song-view .song-heading .icon-button{min-width:32px;min-height:32px;padding:5px}
 .section-wrap,.page-view{padding-top:24px;padding-bottom:32px}
 .page-head{gap:10px;margin-bottom:18px}
 .page-head h1{font-size:clamp(28px,4vw,42px)}
 .browse-row{padding-block:11px}
 .setlist-card{padding:12px 14px;margin-bottom:8px}
 .modal-card{padding:22px}.field{gap:4px}.form-grid{gap:10px}
 .about-intro{padding:18px}.release-entry{padding-block:14px}
 .song-card h3{margin-top:6px;margin-bottom:2px}
}
@media screen and (max-width:1100px){
 body[data-view="songView"] .song-heading{min-height:36px;gap:6px;padding:1px 4px}
 body[data-view="songView"] .song-heading .song-identity #songTitle{font-size:18px}
 body[data-view="songView"] .song-heading .song-identity #songArtist{font-size:11px;margin:0}
 body[data-view="songView"] .song-view{gap:3px}
}
/* One compact position trigger; full-size arrows appear only while choosing. */
.player-toolbar .panel-position-control{width:76px;flex:0 0 76px;align-items:center}
.player-toolbar .panel-position-control>span{font-size:8px;white-space:nowrap}
.player-toolbar #panelPositionToggle{display:grid;place-items:center;width:34px;min-width:34px;height:32px;min-height:32px;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent-2)}
#panelPositionToggle svg{width:22px;height:22px}
#panelPositionToggle[aria-expanded="true"]{border-color:var(--accent-2);background:var(--surface-2)}
.player-toolbar #panelPosition[popover]{position:fixed;inset:auto;margin:0;padding:8px;width:152px;height:152px;min-height:152px;max-width:none;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);overflow:visible}
.player-toolbar #panelPosition[popover]:popover-open{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px}
.player-toolbar #panelPosition[popover]:not(:popover-open){display:none}
#panelPosition [data-panel-position="top"]{grid-area:1/2}
#panelPosition [data-panel-position="left"]{grid-area:2/1}
#panelPosition [data-panel-position="right"]{grid-area:2/3}
#panelPosition [data-panel-position="bottom"]{grid-area:3/2}

/* Lightweight rendering for all devices: no decorative motion or composited blur. */
/* Static shuffle action: vivid color and clear hierarchy without animation. */
.hero-actions{flex-wrap:wrap}
#startPlayingBtn{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:12px 17px;border:1px solid #ffe3a0;border-radius:15px;background:linear-gradient(115deg,#ffe4a0,#ffc454);color:#222019;text-align:left;box-shadow:0 3px 0 #a96b1a}
#startPlayingBtn .surprise-icon{width:32px;height:32px;padding:5px;box-sizing:content-box;border:1px solid #28201926;border-radius:11px;background:#ffffff30;flex:none}
#startPlayingBtn .surprise-copy{display:flex;flex-direction:column;gap:3px;margin:0}
#startPlayingBtn strong{font-size:16px;line-height:1.15;letter-spacing:-.02em}
#startPlayingBtn small{font-size:10px;line-height:1.3;font-weight:500;color:#514023}
#startPlayingBtn .surprise-arrow{width:19px;height:19px;margin-left:4px;flex:none}
#startPlayingBtn:hover{background:#ffe3a0;filter:none;transform:none;border-color:#fff0ca}
#startPlayingBtn:active{box-shadow:none;background:#ffc454}
@media(max-width:600px){#startPlayingBtn{gap:10px;min-height:56px;padding:10px 13px}#startPlayingBtn .surprise-icon{width:24px;height:24px;padding:4px}#startPlayingBtn strong{font-size:15px}}
html{scroll-behavior:auto}
/* Native scrolling on tablets too: earlier mobile rules restricted the reader to pan-y. */
@media screen{.song-stage[data-panel-position]>.sheet-viewport{min-height:0;min-width:0;overflow:auto;touch-action:auto;-webkit-overflow-scrolling:touch}}
*,*::before,*::after{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.home-view{background:var(--bg)}
.home-stage-image{position:absolute;inset:0 0 auto;width:100%;height:100%;max-height:1100px;object-fit:cover;object-position:center top;z-index:-2;pointer-events:none}
.home-view::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0309158c,transparent 75%),linear-gradient(0deg,var(--bg) 0%,transparent 75%)}
[data-theme="light"] .home-stage-image{opacity:.22}
@media(max-width:600px){.home-stage-image{object-position:65% top}}
.hero::after{display:none}
.topbar,.player-toolbar,.mobile-nav{background:var(--bg)}
@media screen and (max-width:1023px){.home-view .hero{min-height:0;padding-bottom:24px}}

/* Explicit visibility works on Android versions without the Popover API. */
.player-toolbar #panelPosition[hidden]{display:none!important}
.player-toolbar #panelPosition:not([hidden]){position:fixed;inset:auto;margin:0;padding:8px;width:152px;height:152px;min-height:152px;max-width:none;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px;z-index:1000;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.player-toolbar #panelPosition button{width:44px;height:44px;min-height:44px}
/* Raised navigation keys: static gradients and small shadows keep tablet rendering light. */
.bottom-nav{gap:8px;padding:8px 12px max(9px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.bottom-nav button{position:relative;flex:1;min-width:0;min-height:56px;gap:4px;padding:6px 3px;border:1px solid #425a76;border-bottom:3px solid #07101e;border-radius:12px;background:linear-gradient(180deg,#263d58 0%,#14253b 65%,#102036 100%);color:#e5effc;font-size:10px;font-weight:700;box-shadow:inset 0 1px 0 #ffffff24,0 3px 0 #030914,0 4px 6px #0003;touch-action:manipulation}
.bottom-nav svg{width:24px;height:24px;stroke-width:2;filter:none}
.bottom-nav button.active{border-color:#ffe0a0;border-bottom-color:#b77520;background:linear-gradient(180deg,#ffe3a3 0%,#ffca6b 55%,#f5ad43 100%);color:#172238;box-shadow:inset 0 1px 0 #fff8,0 3px 0 #855019,0 4px 7px #0004}
.bottom-nav button.active svg{filter:none;stroke-width:2.3}
.bottom-nav button:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #0002,0 1px 0 #030914}
.bottom-nav button:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
[data-theme="light"] .bottom-nav button:not(.active){background:linear-gradient(180deg,#fff 0%,#e7edf4 100%);border-color:#b3c2d3;border-bottom-color:#95a8bd;color:#263d58;box-shadow:inset 0 1px 0 #fff,0 3px 0 #8d9fb3,0 4px 6px #17203318}
@media(max-width:380px){.bottom-nav{gap:5px;padding-inline:7px}.bottom-nav button{font-size:9px;border-radius:10px}}

/* Edit button (composer editing cycle, 2026-10-16): room for a fourth heading action without wrapping. */
@media screen and (max-width:1100px){body[data-view="songView"] .song-heading-actions{max-width:152px}}
/* My songs (Minhas cifras) — Chord Composer 1.0 */
.mine-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
#mineSearch{flex:1 1 220px;min-width:0;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:0 12px}
.mine-note{color:var(--muted);font-size:13px;margin:4px 0 14px}
.mine-list{display:grid;gap:8px}
.mine-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel-gradient,var(--surface));padding:8px 10px}
.mine-open{flex:1;min-width:0;display:grid;gap:2px;text-align:left;border:0;background:none;padding:6px 4px}
.mine-open strong{font-size:16px;overflow-wrap:anywhere}
.mine-open span,.mine-open small{color:var(--muted);font-size:13px}
.mine-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.mine-actions .ghost{padding:7px 10px;font-size:13px;border:1px solid var(--line)}
.mine-actions .mine-danger{color:#ff8a8a}
@media(max-width:700px){.mine-row{flex-direction:column;align-items:stretch}.mine-actions{justify-content:flex-start}}
.mine-sync{display:grid;gap:6px;margin:0 0 12px}
.mine-sync-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface);font-size:14px}
.mine-sync-row small{color:var(--muted)}
.mine-sync-row .ghost{margin-left:auto;border:1px solid var(--line);padding:6px 10px;font-size:13px}
.mine-sync-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.mine-sync-row[data-sync-state=synced] .mine-sync-dot{background:var(--accent-2)}
.mine-sync-row[data-sync-state=syncing] .mine-sync-dot,.mine-sync-row[data-sync-state=offline] .mine-sync-dot{background:var(--accent)}
.mine-sync-row[data-sync-state=error] .mine-sync-dot,.mine-sync-row[data-sync-state=conflict] .mine-sync-dot{background:#ff8a8a}
.mine-sync-row.conflict{border-color:#ff8a8a}
.mine-sync-row.consent{border-style:dashed}
.mine-sync-badge{color:var(--muted);font-size:12px}
.mine-row[data-sync-state=cloud] .mine-sync-badge{color:var(--accent-2)}
.mine-row[data-sync-state=conflict] .mine-sync-badge{color:#ff8a8a}
/* 320 px reader heading (2026-10-18): keep title and artist on one line when they fit next to the four actions,
   without truncating text; long titles still wrap. Touch targets stay >= 32 px (WCAG 2.2 minimum is 24 px). */
@media screen and (max-width:340px){
 body[data-view="songView"] .song-heading{gap:6px}
 body[data-view="songView"] .song-heading .song-heading-actions{gap:0}
 body[data-view="songView"] .song-heading .song-heading-actions .icon-button{min-width:32px;width:32px;min-height:34px;padding:4px}
 body[data-view="songView"] .song-heading .song-identity{column-gap:6px}
 body[data-view="songView"] .song-heading .song-identity #songTitle{font-size:17px}
 body[data-view="songView"] .song-heading .song-identity #songArtist{font-size:10.5px}
}