/* Tableaf — app styles (synced from the prototype) */
:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%}body{margin:0;font:14px/1.5 system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* Chic studio: graphite & stone neutrals, white paper, one muted bordeaux accent, serif-italic wordmark.
   Layout: two-row sticky toolbar / paper (left) + input palette (right); palette docks to bottom on narrow screens */
:root{
  --bg:#f4f2ec; --paper:#ffffff; --ink:#14231b; --muted:#5e6b63; --rule:#dcd8cc; --line:#a7ada6;
  --field:#f1efe8; --accent:#2f6b4f; --accent-soft:rgba(47,107,79,.12); --accent-ink:#ffffff; --warn:#a8322d;
  --key-w:#fcfbf7; --key-b:#14231b; --key-b-ink:#f4f2ec; --solid:#14231b; --solid-ink:#f4f2ec; --chrome:rgba(244,242,236,.86);
  --leaf:#8bc48a; --icon-bg:#14231b;
  --f-ui:"IBM Plex Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  --f-chord:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --f-brand:"Outfit","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1813; --paper:#16211b; --ink:#e9eee8; --muted:#93a198; --rule:#26332b; --line:#4e5c53;
  --field:#121c16; --accent:#8bc48a; --accent-soft:rgba(139,196,138,.16); --accent-ink:#0f1813; --warn:#e2766e;
  --key-w:#1e2a23; --key-b:#08100b; --key-b-ink:#e9eee8; --solid:#e9eee8; --solid-ink:#0f1813; --chrome:rgba(15,24,19,.86); --icon-bg:#08100b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1813; --paper:#16211b; --ink:#e9eee8; --muted:#93a198; --rule:#26332b; --line:#4e5c53;
  --field:#121c16; --accent:#8bc48a; --accent-soft:rgba(139,196,138,.16); --accent-ink:#0f1813; --warn:#e2766e;
  --key-w:#1e2a23; --key-b:#08100b; --key-b-ink:#e9eee8; --solid:#e9eee8; --solid-ink:#0f1813; --chrome:rgba(15,24,19,.86); --icon-bg:#08100b; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 40px}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;max-width:1500px;margin:0 auto 14px}
.brand{font-family:var(--f-chord);font-weight:700;font-size:22px;letter-spacing:.02em;margin-right:4px}
.grp{display:flex;align-items:center;gap:6px}
.lbl{font-size:11px;color:var(--muted);letter-spacing:.06em}
.btn{border:1px solid var(--rule);background:var(--paper);border-radius:6px;padding:6px 10px;line-height:1.2}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.4;cursor:default}
.btn.on,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--warn)}
.btn.danger.armed{background:var(--warn);color:var(--paper);border-color:var(--warn)}
select,input[type=text],input[type=number]{border:1px solid var(--rule);background:var(--paper);border-radius:6px;padding:6px 8px;min-width:0}
select{max-width:200px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--paper)}
.seg button{border:0;background:transparent;padding:6px 10px}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#degSeg small{font-size:12px;opacity:.75;margin-left:2px}
.deghint{color:var(--muted);font-size:12px}
.semi{min-width:70px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
main{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
main.clean{grid-template-columns:minmax(0,1fr)}
main.clean .pal{display:none}
/* the panel scrolls on its own: reaching its end must not start scrolling the sheet behind it */
.pal{overscroll-behavior:contain}
.paper{background:var(--paper);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 30px rgba(20,30,50,.07);padding:30px 28px 40px;width:100%;max-width:1000px;margin:0 auto;min-width:0}
.head{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:end;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:10px}
.head h1{grid-column:1/-1;margin:0;text-align:center;font-family:var(--f-chord),var(--f-ui);font-weight:700;font-size:32px;line-height:1.15;text-wrap:balance}
.meta{font-family:var(--f-chord),var(--f-ui);font-size:17px;font-weight:500;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.meta b{color:var(--ink);font-weight:600}
.artist{font-size:15px;color:var(--muted);text-align:right}
.hin{border:1px solid transparent;background:transparent;border-radius:4px;padding:1px 4px;font:inherit;color:inherit;min-width:0}
.hin:hover{border-color:var(--rule)}
.hin:focus{border-color:var(--accent);background:var(--field);outline:none}
.hin::placeholder{color:var(--muted);opacity:.6}
.head h1 .hin{width:100%;text-align:center;font-weight:700}
/* the title wraps onto 2 lines (then gets smaller: --ttk, set by fitTitle) instead of running off the sides */
.head h1 textarea.hin{display:block;box-sizing:border-box;resize:none;overflow:hidden;line-height:1.15;font-size:calc(1em*var(--ttk,1));margin:0}
.hf{display:inline-flex;align-items:center;gap:2px}
.hkey{width:3.4em;color:var(--ink);font-weight:600}
.hbpm{width:3.6em;color:var(--ink);font-weight:600}
.hkt{font-size:13px}
/* the shuffle sign "(♫ = ♩♪³)" after the tempo: as tall as the text line (its baseline on the text's) */
.hswing{display:inline-flex;align-items:center;flex-shrink:0;color:var(--ink)}
.hcapo{white-space:nowrap}
.hswing[hidden]{display:none}
.hswing svg{display:block;height:1.93em;width:4.67em;overflow:visible;margin-top:-.25em}
.hart{text-align:right;width:14em;max-width:100%}
.clean .hin:hover{border-color:transparent}
#rows svg{display:block;width:100%;overflow:visible;user-select:none;-webkit-user-select:none}
.bl{stroke:var(--ink)} .sl{stroke:var(--line)}
.dot{fill:var(--ink)}
.ch{fill:var(--ink);font-family:var(--f-chord);font-weight:600}
.nc{font-style:italic;font-weight:500}
.secbox{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.sect{fill:var(--ink);font-family:var(--f-chord),var(--f-ui);font-weight:600;font-size:19px}
.ann{fill:var(--ink);font-family:var(--f-chord);font-weight:600;font-size:15px}
.tabl{fill:var(--ink);font-family:"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:11px}
.clef{stroke:var(--ink);fill:none}
.hit{fill:transparent;cursor:pointer}
.hit:hover{fill:var(--accent-soft)}
.selbar{fill:none;stroke:var(--accent);stroke-width:1.6;rx:3}
.selbeat{fill:var(--accent-soft)}
.drop{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
#rows svg{touch-action:pan-y}
.numrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.numrow .lbl{white-space:nowrap}
.numrow .seg{max-width:100%}.numrow .seg button{white-space:nowrap}
.numrow .seg button{padding:3px 11px;font-size:13px}
.numrow .lbl.seclbl{text-transform:none}
.numrow .secmod button[data-m="pr"]{font-weight:700;min-width:2.4em}
#secChips button.near:not(.on){outline:1.5px dashed var(--accent);outline-offset:-3px}
#secChips button{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.dropln{stroke:var(--accent)}
.ghost.chg{transform:translate(-3px,-130%)}
.ghost{position:fixed;z-index:30;pointer-events:none;transform:translate(-50%,-130%);background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;padding:4px 10px;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.bnum{fill:var(--muted);font-family:var(--f-chord);font-weight:500;font-size:12.5px}
.memo{fill:var(--ink);font-family:var(--f-ui);font-weight:700;font-size:12px}
.tsig{fill:var(--ink);font-family:"Times New Roman",Times,"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900}.tsln{stroke:var(--ink)}
.kcbox{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.kc{fill:var(--ink);font-family:var(--f-chord);font-weight:700;font-size:12.5px}
.mk{stroke:var(--ink)}
.pbreak{display:flex;align-items:center;gap:10px;margin:14px 0 6px;color:var(--muted);font-size:11px;letter-spacing:.06em}
.pbreak.first{margin-top:0}.pbreak.first::before,.pbreak.first::after{border-top-color:transparent}
.pgrows{order:3;font:11px var(--f-ui);color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:4px;padding:1px 2px;cursor:pointer}
.pbreak::after{order:2}
.rowslot{overflow:visible}
.rowslot svg{height:auto}
.pbreak::before,.pbreak::after{content:"";flex:1;border-top:1px dashed var(--rule)}
.sync{font-size:12px;color:var(--muted)}
.imp{max-width:1500px;margin:0 auto 14px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
[hidden]{display:none!important}
body[data-mode="home"] .bar,body[data-mode="home"] #main,body[data-mode="home"] #setBox,body[data-mode="home"] #impBox,body[data-mode="home"] #lib,
body[data-mode="lib"] .bar,body[data-mode="lib"] #main,body[data-mode="lib"] #setBox,body[data-mode="lib"] #impBox,body[data-mode="lib"] #home,
body[data-mode="edit"] #home,body[data-mode="edit"] #lib{display:none!important}
.home{max-width:920px;margin:0 auto;padding-block:min(9vh,80px) 40px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hbrand{font-family:var(--f-chord);font-weight:700;font-size:44px;letter-spacing:.04em}
.hsub{margin:0 0 18px;color:var(--muted)}
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;width:100%}
.hcard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:22px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(20,30,50,.06);transition:border-color .15s,transform .15s}
.hcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.hcard b{font-size:20px}
.hcard span{color:var(--muted);line-height:1.7;font-size:13.5px}
.hcard em{font-style:normal;font-size:12px;color:var(--accent);font-weight:700;margin-top:auto}
.hic{width:52px;height:52px;border-radius:12px;background:var(--field);color:var(--ink);display:flex;align-items:center;justify-content:center}
.hic svg{width:40px;height:40px;font-family:var(--f-chord)}
.lib{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.libhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.libhead h1{margin:0;font-size:20px;flex:1 1 auto}
.libhead input{flex:0 1 260px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:6px;padding:6px 10px;min-width:0}
.lib h2{margin:14px 0 0;font-size:12px;color:var(--muted);letter-spacing:.08em}
.lib h3{margin:12px 0 6px;font-size:14px;display:flex;gap:8px;align-items:baseline}
.lib h3 span{font-size:11px;color:var(--muted);font-weight:400}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.lcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);min-width:0}
.lcard:hover{border-color:var(--accent)}
.lcard b{font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard span{font-size:12px;color:var(--muted)}
.lcard em{font-style:normal;font-size:12px;color:var(--accent);font-weight:700}
.lcard.set{background:var(--field)}
.lcard.pdf{flex-direction:row;align-items:stretch;padding:0;gap:0}
.lcard.pdf .lopen{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px 14px;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.lcard.pdf .ldel{border:0;border-left:1px solid var(--rule);background:none;color:var(--muted);font:inherit;font-size:12px;padding:0 12px;cursor:pointer}
.lcard.pdf .ldel.armed{color:#fff;background:var(--warn)}
.lcard.gone{opacity:.6}
.ptag{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;border:1px solid currentColor;border-radius:3px;padding:0 4px;margin-right:6px}
.paper.white{--paper:#ffffff;--ink:#14231b;--muted:#5e6b63;--rule:#dcd8cc;--line:#a7ada6;--field:#f1efe8;--accent:#2f6b4f;--accent-soft:rgba(47,107,79,.12);--accent-ink:#ffffff;--warn:#a8322d;--solid:#14231b;--solid-ink:#f4f2ec;color-scheme:light;background:var(--paper);color:var(--ink)}
.clvrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.clvrow label{cursor:pointer}
.setrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.setrow input[type=text]{flex:1 1 200px}
.sllist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto}
.sllist li{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--field)}
.sllist li button{border:1px solid var(--rule);background:var(--paper);border-radius:5px;min-width:30px;height:28px}
.sln{font-family:var(--f-chord);font-weight:700;font-size:16px;width:1.6em;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.slt{flex:1;min-width:0;display:flex;flex-direction:column;font-weight:700}
.slt small{font-weight:400;color:var(--muted);font-size:11px}
.sllist .slempty{color:var(--muted);font-size:13px;justify-content:center;border-style:dashed}
.slgrip{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:6px}
.slgrip:hover{background:var(--paper)}
.sllist li.sldrag{opacity:.9;box-shadow:0 6px 18px rgba(0,0,0,.18);border-color:var(--accent);position:relative;z-index:2}
.slwarn{display:block;color:#b4562b;font-weight:700;font-size:11px}
.sloff{margin:4px 0 0;font-size:12.5px;font-weight:700;color:#b4562b;line-height:1.5}.sloff.ok{color:var(--accent)}
.lofl{font-size:12px;font-weight:700;color:#d08a4a}.lofl.ok{color:var(--accent)}
.lset{display:flex;flex-direction:column;gap:4px;min-width:0}.lset .lcard{width:100%}
.lsedit{align-self:flex-end;border:1px solid var(--rule);background:transparent;color:inherit;border-radius:6px;min-height:34px;padding:0 12px;font-size:12.5px;cursor:pointer}
.slm{position:fixed;inset:0;z-index:60;background:rgba(8,12,10,.55);display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 12px 16px;overflow:auto}
.slmbox{width:100%;max-width:600px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:14px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:8px}
.slmhead{display:flex;gap:8px}.slmhead input{flex:1;min-width:0;font-size:17px;font-weight:700;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;background:var(--field);color:var(--ink)}
.slmhead .btn,.slmact .btn{min-height:44px}
.slmhint{margin:0}.slm .sllist{max-height:none}.slm .sllist li{min-height:48px}.slm .sllist li button{min-width:40px;height:36px}
.slmact{display:flex;flex-wrap:wrap;gap:8px}.slmdel{margin-left:auto;color:var(--warn)}
.slmh3{margin:10px 0 0;font-size:14px}
#slmQ{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;background:var(--field);color:var(--ink);font-size:16px}
.slmadd{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:42vh;overflow:auto}
.slmadd li{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--rule);border-radius:8px}
.slmadd .btn{min-height:40px;white-space:nowrap;font-size:13px}.slmin{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap;padding:0 8px}
.viewer{position:fixed;inset:0;z-index:50;background:#2b2f36;display:flex;flex-direction:column;color:#eef1f6;color-scheme:dark;touch-action:pan-x pan-y;overscroll-behavior:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.vbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#1d2026;flex-wrap:wrap}
.vmeta{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.vtitle{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpos{font-size:12px;color:#aab2c0;font-variant-numeric:tabular-nums}
.vtools,.vpen{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vb{border:1px solid #444b57;background:#2b3039;color:#eef1f6;border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.2}
.vb.on{background:#86a0ff;border-color:#86a0ff;color:#0f1320}
.vb.armed{background:#d23a2f;border-color:#d23a2f}
.vgrp{display:inline-flex;gap:4px;padding-right:8px;margin-right:2px;border-right:1px solid #3a404b}
.vgrp:last-child{border-right:0}
.vb.sz{width:34px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.vb.sz i{display:block;border-radius:50%;background:currentColor}
/* eraser sizes sit right next to the eraser button (rings), separate from the pen sizes */
.vesz{display:inline-flex;gap:3px;margin:0 4px 0 -1px}
.vb.sz.es i{background:none;border:1.6px solid currentColor;box-sizing:border-box}
.vb.es[data-esize="0"] i{width:8px;height:8px}.vb.es[data-esize="1"] i{width:14px;height:14px}.vb.es[data-esize="2"] i{width:21px;height:21px}
.vb.es:not(.on){opacity:.7}
@media (max-width:600px),(max-height:500px) and (orientation:landscape){.vpen:not(.er) .vesz{display:none}}
.vb:disabled{opacity:.35}
.vsel{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;max-width:calc(100% - 24px);display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:5px;background:rgba(29,32,38,.94);border:1px solid #3a404b;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35);font-size:12px;color:#c6cfdd}
.vsel span{margin:0 4px;white-space:nowrap}
.vsel .vb{min-height:40px;padding:0 13px;font-size:14px;white-space:nowrap}
.vsel .vb.vx{border-color:transparent;background:none;min-width:40px;padding:0}
.vsel.at{transform:none}
.vb.sw{padding:5px 7px}.vb.sw i{display:block;width:20px;height:20px;border-radius:50%}
.vb.sw i.mk{border-radius:3px;opacity:.8}
.vstage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.vpage{position:relative;background:#fff;box-shadow:0 6px 30px rgba(0,0,0,.45)}
.vpage img,.vpage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vpage img{user-select:none;-webkit-user-select:none;pointer-events:none}
.viewer.drawing .vpage svg{touch-action:none;cursor:crosshair}
/* writing: the browser's own pinch / scroll never takes the fingers (two fingers zoom the page by our own handler, also on the margins) */
.viewer.drawing .vstage{touch-action:none}
.viewer.vfitw .vstage{overflow-y:auto;align-items:flex-start;-webkit-overflow-scrolling:touch}
.viewer.vfitw .vpage{flex:none;margin:0 auto 12px}
.viewer.vfitw .vnav{position:fixed;top:var(--vbarh,48px);bottom:0}

.viewer.drawing .vstage,.viewer.drawing .vstage *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* phone portrait play mode: one-row toolbar over the page that fades after a few seconds */
.viewer.vph .vbar{position:absolute;left:0;right:0;top:0;z-index:6;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:calc(4px + env(safe-area-inset-top,0px)) 8px 4px;transition:opacity .35s;scrollbar-width:none}
.viewer.vph .vbar::-webkit-scrollbar{display:none}
/* (2026/11/11) the song's name on a thin line of its own over the buttons (one line, "…" when long; a set list adds "2/5").
   The buttons keep their size and scroll sideways under it */
.vphpos{display:none}
.viewer.vph .vbar{flex-wrap:wrap;overflow-x:visible;row-gap:1px}
.viewer.vph .vmeta{display:flex;flex-direction:row;align-items:baseline;gap:8px;flex:1 0 100%;order:-1;min-width:0;padding:0 2px;line-height:1.3}
.viewer.vph .vmeta .vtitle{font-size:12px;flex:0 1 auto;min-width:0}
.viewer.vph .vmeta .vpos{display:none}
.viewer.vph .vphpos:not([hidden]){display:inline;flex:0 0 auto;font-size:12px;color:#aab2c0;font-variant-numeric:tabular-nums}
.viewer.vph .vtools{flex:1 1 0;min-width:0;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none}
.viewer.vph .vtools::-webkit-scrollbar{display:none}
.viewer.vph .vbar .vb{min-height:38px;white-space:nowrap;flex:0 0 auto}
.viewer.vph.vbarhide .vbar{opacity:0}
.viewer.vph.vbarhide::before{content:"";position:absolute;top:calc(5px + env(safe-area-inset-top,0px));left:50%;width:40px;height:5px;border-radius:3px;background:rgba(0,0,0,.28);transform:translateX(-50%);z-index:7;pointer-events:none}
.viewer.vph .vstage{padding:0}
.vnav{position:absolute;top:0;bottom:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vnav.prev{left:0;width:38%}.vnav.next{right:0;width:62%}
.vnav:disabled{cursor:default}
.viewer.notap .vnav{display:none}
.vflash{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;pointer-events:none;background:rgba(20,22,27,.82);color:#fff;font:700 15px/1 var(--f-chord),sans-serif;padding:8px 14px;border-radius:999px;opacity:0}
.vflash.show{animation:vfl 1.1s ease-out}
@keyframes vfl{0%,55%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vflash.show{animation:none}}
.viewer.drawing .vnav{display:none}
.imphead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.imp h2{margin:0;font-size:15px}
.imp textarea{width:100%;min-width:0;border:1px solid var(--rule);background:var(--field);color:var(--ink);border-radius:8px;padding:10px;font:13px/1.6 ui-monospace,Menlo,monospace;resize:vertical}
.impfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* import: read a PDF / photo chart with an AI (a prompt to copy) */
.aiimp{border:1px solid var(--rule);border-radius:8px;padding:0 12px;background:var(--paper)}
.aiimp summary{cursor:pointer;padding:9px 0;font-weight:600;font-size:13px}
.aiimp[open] summary{border-bottom:1px solid var(--rule);margin-bottom:8px}
.aiimp p{margin:0 0 8px}
.aiprompt{margin:0 0 8px;max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--field);border:1px solid var(--rule);border-radius:6px;padding:10px;font:12px/1.6 ui-monospace,Menlo,monospace;user-select:text;-webkit-user-select:text}
.aiimprow{display:flex;justify-content:flex-start;margin-bottom:8px}
.aiimpnote{margin:0 0 10px;padding-left:18px;color:var(--muted)}
.impfoot .small{flex:1 1 180px}
.pnav{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;gap:4px;
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:5px 8px;box-shadow:0 4px 18px rgba(20,30,50,.14);max-width:calc(100vw - 32px);overflow-x:auto}
.pnav .lbl{padding:0 4px}
.pnav button{border:0;font-variant-emoji:text;background:transparent;border-radius:999px;min-width:30px;height:30px;padding:0 8px;font-family:var(--f-chord);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.pnav button:hover{background:var(--field)}
.pnav button.on{background:var(--ink);color:var(--paper)}
.pbreak{scroll-margin-top:16px}
#paper{scroll-margin-top:10px}
@media (max-width:980px){main:not(.clean) .pnav{bottom:calc(46vh + 10px)}}
.pageinfo{font-size:11px;color:var(--muted);text-align:right;margin:-4px 0 4px;letter-spacing:.04em}
.clean .pageinfo{display:none}
.sync[data-st=error],.sync[data-st=slow]{color:var(--warn)}
.mkhit{fill:transparent;cursor:grab;touch-action:none}
.chhit{fill:transparent;cursor:grab;touch-action:none}
.chhit:hover{fill:var(--accent-soft)}
.chhit.lift{fill:var(--accent-soft);stroke:var(--accent);stroke-dasharray:3 2}
.ghost.copy::after{content:" ＋"}
.mkhit:hover{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 2}
.mkhit.on{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6;stroke-dasharray:none}
.clean .mkhit.on{fill:transparent;stroke:none}
.selrange{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1;stroke-dasharray:4 3}
.beatdot{fill:var(--rule)}
.clean .beatdot{display:none}
.addrow{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer}
.clean .addrow{display:none}
/* palette */
.pal{position:sticky;top:max(12px,env(safe-area-inset-top,0px));background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 24px);overflow:auto}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;-webkit-user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold>summary:hover h2{color:var(--ink)}
details.blk{display:flex;flex-direction:column;gap:6px}
.pal h2{margin:0;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.blk{display:flex;flex-direction:column;gap:6px}
.pos{display:flex;align-items:center;gap:8px;justify-content:space-between}
.posl{font-family:var(--f-chord),var(--f-ui);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.cur{font-family:var(--f-chord);font-size:30px;font-weight:700;min-height:40px;padding:2px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--field);display:flex;align-items:center}
.cur .ph{font-family:var(--f-ui);font-size:13px;font-weight:400;color:var(--muted)}
.piano{position:relative;height:118px}
.whites{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:100%}
.whites button{background:var(--key-w);border:1px solid var(--rule);border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-family:var(--f-chord);font-weight:700;font-size:20px}
.blacks{position:absolute;inset:0 0 auto 0;height:58%;pointer-events:none}
.blacks button{position:absolute;top:0;height:100%;width:10.5%;transform:translateX(-50%);pointer-events:auto;background:var(--key-b);color:var(--key-b-ink);border:1px solid var(--key-b);border-radius:0 0 4px 4px;font-family:var(--f-chord);font-weight:600;font-size:14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.piano button:active{filter:brightness(.85)}
.piano.bassmode button{outline:2px dashed var(--accent);outline-offset:-3px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.grid button{border:1px solid var(--rule);background:var(--field);border-radius:5px;padding:7px 2px;font-family:var(--f-chord);font-weight:600;font-size:16px}
.grid button.wide{grid-column:span 2}
.grid button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.row2{display:flex;gap:6px;flex-wrap:wrap}
.tsrow{align-items:center;margin-top:6px}.tsin{width:84px;font:inherit;padding:3px 6px;border:1px solid var(--accent);border-radius:5px;background:var(--paper);color:var(--ink)}.tsrow .lbl{font-size:12px;color:var(--muted)}.tsrow select{min-width:76px}.tsrow .small{flex-basis:100%}
.row2>*{flex:1 1 auto}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{border:1px solid var(--rule);background:var(--field);border-radius:999px;padding:3px 10px;font-size:12px}
.chips button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.typein{display:flex;gap:6px}
.typein input{flex:1}
.small{font-size:12px;color:var(--muted);line-height:1.6}
details.info{border-top:1px solid var(--rule);padding-top:10px}
details.info summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted)}
.fields{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:center;margin-top:8px;font-size:12px}
kbd{font-family:var(--f-chord);font-size:12px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--field)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:6px;font-size:13px;z-index:70}
@media (max-width:980px){
  main{grid-template-columns:minmax(0,1fr)}
  .pal{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:46vh;border-radius:12px 12px 0 0;z-index:10;
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -6px 24px rgba(0,0,0,.15)}
  main:not(.clean) .paper{margin-bottom:48vh}
  .paper{padding:20px 12px 28px}
  .head h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ===== chic theme layer ===== */
body{font-size:13.5px;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:12;max-width:none;display:block;margin:-14px calc(-1*max(16px,env(safe-area-inset-left,0px))) 16px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));background:var(--chrome);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:13;background:var(--bg)}
.bar1,.bar2{max-width:1500px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.bar1{padding-bottom:10px}
.bar2{padding:8px 0 10px;border-top:1px solid var(--rule);gap:6px 22px}
.sp{flex:1 1 0}
.brand{font-family:var(--f-brand);font-style:italic;font-weight:600;font-size:25px;letter-spacing:.01em;line-height:1;margin:0 6px 0 2px}
.lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.btn{height:32px;padding:0 12px;border:1px solid var(--rule);background:transparent;border-radius:6px;font-size:13px;line-height:1;transition:background .15s,border-color .15s,color .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--field);border-color:var(--line)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.ico{width:32px;padding:0;font-size:15px}.btn.ico.sm{width:28px}
.btn.ico svg{width:17px;height:17px}
.btn.primary{background:var(--solid);color:var(--solid-ink);border-color:var(--solid)}
.btn.primary:hover{background:var(--solid);opacity:.88}
.btn.on{background:var(--solid);color:var(--solid-ink);border-color:var(--solid)}
.btn.danger{color:var(--warn);border-color:transparent}
.btn.danger:hover{background:var(--field);border-color:var(--rule)}
.btn.danger.armed{background:var(--warn);color:#fff;border-color:var(--warn)}
select,input[type=text],input[type=number],input[type=search]{height:32px;border:1px solid var(--rule);background:var(--paper);border-radius:6px;padding:0 10px;font-size:13px}
.bar2 select{height:28px;font-size:12px}
.seg{border:1px solid var(--rule);border-radius:6px;background:transparent;padding:2px;gap:2px;display:inline-flex}
.seg button{border:0;border-radius:4px;padding:0 9px;height:24px;font-size:12px;color:var(--muted)}
.seg button+button{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--solid);color:var(--solid-ink)}
.semi{font-family:var(--f-chord);font-size:15px;font-weight:600;min-width:58px}
.sync{font-size:11.5px;letter-spacing:.02em}
.chk{font-size:11.5px}
.paper{border-radius:2px;box-shadow:0 1px 0 var(--rule),0 18px 50px rgba(20,18,16,.08);padding:40px 40px 48px}
.head{border-bottom:1.5px solid var(--ink)}
.head h1{font-family:var(--f-ui);font-weight:700;letter-spacing:.02em}
.pageinfo{letter-spacing:.08em}
.pbreak{letter-spacing:.14em;text-transform:uppercase}
.pal{border:0;border-radius:4px;background:var(--paper);box-shadow:0 1px 0 var(--rule),0 18px 50px rgba(20,18,16,.06);padding:16px 16px 20px;gap:0;top:calc(env(safe-area-inset-top,0px) + 112px);max-height:calc(100vh - 128px)}
.pal>.blk,.pal>details,.pal>.pos,.ptab>.blk,.ptab>details{padding:12px 0;border-top:1px solid var(--rule)}
.pal>.pos{border-top:0;padding-top:0}
.pal>.cur{margin-bottom:6px}
.pal h2{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.posl{font-size:17px;letter-spacing:.02em}
.cur{background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;font-size:34px;min-height:48px;padding:2px 4px}
.grid{gap:5px}
.grid button{background:transparent;border:1px solid var(--rule);border-radius:5px;padding:8px 2px;font-size:15.5px;transition:background .12s}
.grid button:hover{background:var(--field)}
.grid button.on{background:var(--solid);color:var(--solid-ink);border-color:var(--solid)}
.piano{height:122px}
.whites{gap:2px}
.whites button{border-radius:0 0 4px 4px;border-color:var(--rule);font-size:19px;font-weight:600}
.whites button:hover{background:var(--field)}
.blacks button{border-radius:0 0 3px 3px;font-size:13px}
.chips{gap:5px}
.chips button{background:transparent;border:1px solid var(--rule);border-radius:999px;padding:4px 11px;font-size:12px}
.chips button:hover{border-color:var(--line)}
.chips button.on{background:var(--solid);color:var(--solid-ink);border-color:var(--solid)}
kbd{border-color:var(--rule);background:transparent}
.selbar{stroke:var(--accent);stroke-width:1.4}
.toast{background:var(--solid);color:var(--solid-ink);border-radius:12px;padding:9px 16px;font-size:12.5px;line-height:1.5;letter-spacing:.02em;box-shadow:0 10px 30px rgba(0,0,0,.18);
  /* a long message: a rounded box up to 520px wide, on several lines (not a pill that swells into an oval) */
  width:max-content;max-width:min(520px,calc(100vw - 24px));box-sizing:border-box;text-align:left;overflow-wrap:anywhere;
  /* a plain message lets taps through; one with a button takes taps on itself only */
  pointer-events:none}
.toast.hasbtn{pointer-events:auto}
.pnav{box-shadow:0 10px 30px rgba(20,18,16,.12)}
.pnav button.on{background:var(--solid);color:var(--solid-ink)}
.imp{border-radius:4px;border:0;box-shadow:0 1px 0 var(--rule),0 18px 50px rgba(20,18,16,.06);padding:18px}
.imp h2{font-size:15px;font-weight:700}
.sllist li{background:transparent;border-radius:4px}
.home{padding-block:min(12vh,110px) 40px;gap:6px}
.hbrand{font-family:var(--f-brand);font-style:italic;font-weight:600;font-size:clamp(52px,9vw,86px);line-height:1;letter-spacing:-.005em}
.hrule{width:min(320px,70%);height:22px;margin:10px 0 4px;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 7px)}
.hsub{font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin:6px 0 34px}
.hcards{gap:18px}
.hcard{border-radius:4px;border:1px solid var(--rule);background:var(--paper);box-shadow:none;padding:26px 26px 22px;gap:10px;position:relative;overflow:hidden}
.hcard::after{content:"→";position:absolute;right:22px;top:24px;font-size:18px;color:var(--muted);transition:transform .2s,color .2s}
.hcard:hover{transform:none;border-color:var(--ink)}
.hcard:hover::after{transform:translateX(4px);color:var(--ink)}
.hcard b{font-size:19px;letter-spacing:.02em}
.hcard em{color:var(--accent);font-weight:600;letter-spacing:.04em}
.hic{background:transparent;border:1px solid var(--rule);border-radius:50%;width:54px;height:54px}
.hfoot{margin-top:40px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.libhead h1{font-family:var(--f-brand);font-style:italic;font-weight:600;font-size:30px}
.lib h2{letter-spacing:.16em;text-transform:uppercase;font-size:10.5px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.lcard{border-radius:4px;transition:border-color .15s}
.lcard:hover{border-color:var(--ink)}
.lcard.set{background:var(--paper)}
.lcard em{color:var(--accent)}
.viewer{background:#262628}
.vbar{background:#161617;border-bottom:1px solid #2c2c2f}
.vb{border-color:#38383c;background:transparent;border-radius:6px}
.vb:hover{background:#2a2a2d}
.vb.on{background:#ecebe7;border-color:#ecebe7;color:#161617}
.vgrp{border-right-color:#323236}
@media (max-width:980px){.pal{top:auto;max-height:46vh;border-radius:12px 12px 0 0}.bar2{gap:6px 14px}}
.grp{flex-wrap:wrap}
#optBtn{display:none}
/* the top menu stays on screen on every size (it used to scroll away on iPad portrait and phones) */
@media (max-width:700px){#optBtn{display:inline-flex}.bar:not(.open) .bar2{display:none}
  .bar{padding-top:8px}
  .bar1{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bar1::-webkit-scrollbar{display:none}
  .bar1 .grp{display:contents}
  .bar1>*,.bar1 .grp>*{flex:0 0 auto}
  .bar1 .sp,.bar1 .sync,.bar1 .brand{display:none}
  #homeBtn{order:0}#songSel{order:1;max-width:150px}#viewBtn{order:10}#optBtn{order:3}#undoBtn{order:4}#redoBtn{order:5}#setBtn{order:6}#pdfBtn{order:7}#newBtn{order:8}#songMenu{order:9}
  .bar2{padding-top:8px}}
@media (max-width:600px){.brand{display:none}.bar1 .sync{display:none}.head{grid-template-columns:minmax(0,1fr)}.artist,.hart{text-align:left}.hart{width:100%}}

/* home v2: typographic menu */
.home{max-width:880px;margin:0 auto;padding-block:min(14vh,130px) 48px;display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left}
.hhead{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(36px,7vh,64px)}
.hbrand{font-family:var(--f-brand);font-style:italic;font-weight:500;font-size:clamp(56px,10vw,104px);line-height:.95;letter-spacing:-.01em}
.hsub{margin:0;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.hmenu{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.hrow{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) auto;align-items:center;gap:8px 28px;padding:26px 4px;border:0;border-bottom:1px solid var(--rule);background:transparent;text-align:left;color:var(--ink)}
.hen{font-family:var(--f-brand);font-style:italic;font-weight:500;font-size:clamp(40px,6vw,60px);line-height:1;transition:transform .25s ease}
.hja{display:flex;flex-direction:column;gap:6px;min-width:0}
.hja b{font-size:17px;font-weight:700;letter-spacing:.04em}
.hja small{font-size:12.5px;color:var(--muted);letter-spacing:.02em;line-height:1.6}
.harr{font-size:20px;color:var(--muted);transition:transform .25s ease,color .25s}
.hrow:hover .hen{transform:translateX(6px)}
.hrow:hover .harr{transform:translateX(6px);color:var(--accent)}
.hrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hfoot{margin:28px 0 0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@media (max-width:600px){.hrow{grid-template-columns:minmax(0,1fr) auto;padding:22px 2px}.hen{grid-column:1/2}.hja{grid-column:1/2}.harr{grid-row:1/3;grid-column:2}}
@media (prefers-reduced-motion:reduce){.hen,.harr{transition:none}}

/* ===== Tableaf brand layer ===== */
.tl-icon{display:block;flex:none}
.tl-icon .ibg{fill:var(--icon-bg)}
.tl-icon .ileaf{fill:var(--leaf)}
.tl-icon .icut{stroke:var(--icon-bg)}
.tl-icon .istem{stroke:var(--leaf)}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-brand);font-style:normal;font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1;margin:0 8px 0 2px}
.brand .tl-icon{width:28px;height:28px}
.brand span,.hbrand span{font-weight:300;color:var(--accent)}
.home{padding-block:min(13vh,120px) 48px}
.hhead{gap:18px}
.hlogo{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px)}
.hlogo .tl-icon{width:clamp(64px,10vw,96px);height:auto;box-shadow:0 18px 40px rgba(20,35,27,.18);border-radius:22%}
.hbrand{font-family:var(--f-brand);font-style:normal;font-weight:700;font-size:clamp(52px,9.5vw,100px);line-height:1;letter-spacing:-.025em}
.hsub{font-family:var(--f-brand);font-size:15px;font-weight:400;letter-spacing:.06em;color:var(--muted)}
.hsub b{color:var(--ink);font-weight:500}
.htab{display:flex;flex-direction:column;gap:7px;width:min(260px,60%);margin-top:4px}
.htab i{display:block;height:1px;background:var(--line)}
.hmenu{border-top:1.5px solid var(--ink)}
.hen{font-family:var(--f-brand);font-style:normal;font-weight:300;letter-spacing:-.02em}
.hrow:hover .hen{color:var(--accent)}
.hrow:hover .harr{color:var(--accent)}
.hfoot{font-family:var(--f-brand);letter-spacing:.24em}
.libhead h1{font-family:var(--f-brand);font-style:normal;font-weight:600;font-size:28px;letter-spacing:-.01em}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent);opacity:.9}
.lcard em,.hcard em{color:var(--accent)}
.lcard:hover{border-color:var(--accent)}
.lcard.set{border-left:3px solid var(--leaf)}
.cur{border-bottom-color:var(--accent)}
.pnav button.on{background:var(--accent);color:var(--accent-ink)}
.toast{background:var(--icon-bg);color:#f4f2ec}
.toast::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--leaf);margin-right:9px;vertical-align:1px}
.toast.hasbtn{display:flex;align-items:center;gap:10px;padding-right:6px;max-width:min(560px,calc(100vw - 24px));width:max-content;box-sizing:border-box}
.toast.hasbtn::before{flex:none}
.toastbtn{flex:none;border:0;border-radius:999px;background:var(--leaf);color:#10170f;font:700 13px var(--f-ui);padding:0 14px;min-height:36px;cursor:pointer}
@media (pointer:coarse){.toastbtn{min-height:44px}}
.viewer{background:#18221c}
.vbar{background:#0f1813;border-bottom-color:#26332b}
.vb{border-color:#33433a}
.vb:hover{background:#1f2c24}
.vb.on{background:#8bc48a;border-color:#8bc48a;color:#0f1813}
.vgrp{border-right-color:#2c3a31}
.vflash{background:rgba(15,24,19,.86)}
/* toolbar tidy */
#optBtn{display:inline-flex}
#optBtn .caret{font-size:10px;transition:transform .15s}
.bar.open #optBtn .caret{transform:rotate(180deg)}
#optBtn.mod{border-color:var(--accent);color:var(--accent)}
.bar:not(.open) .bar2{display:none}
@media (min-width:981px){.bar:not(.open) ~ main .pal,.bar ~ main .pal{top:calc(var(--topH,54px) + 12px);max-height:calc(100vh - var(--topH,54px) - 28px)}}
/* the top bar on iPad-size screens (601-1439px): one row (shorter labels, the local-save note hidden, the logo as an icon);
   under 1000px two tidy rows: tools on the first, account / settings and setlist / PDF / play (to the right) on the second */
.bar1 .brk,.bar1 .shtx{display:none}
@media (min-width:601px) and (max-width:1439px){
  .bar1{gap:8px 8px}
  .bar1 .brand{font-size:0;gap:0}
  .bar1 #syncLbl[data-st="local"]{display:none}
  .bar1 #syncLbl{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar1 .lgtx,.bar1 .optbits{display:none}.bar1 .shtx{display:inline}
  .bar1 #songSel{max-width:170px}}
@media (min-width:601px) and (max-width:1100px){.bar1 .nwtx{display:none}.bar1 #songSel{max-width:150px}}
@media (min-width:601px) and (max-width:999px){
  .bar1>*{order:1}
  .bar1 .brk{display:block;flex:0 0 100%;height:0;order:2}
  .bar1 #syncLbl,.bar1 .fbbtn,.bar1 #acctBtn2,.bar1 #optBtn{order:3}
  .bar1 .gofwd{order:4;margin-left:auto}}
.menu{position:relative;display:inline-flex}
.menupop{position:fixed;z-index:60;min-width:210px;display:flex;flex-direction:column;padding:6px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;box-shadow:0 16px 40px rgba(20,35,27,.18)}
.mi{display:flex;align-items:center;min-height:40px;padding:0 12px;border:0;border-radius:5px;background:transparent;text-align:left;font-size:13px;color:var(--ink)}
.mi:hover{background:var(--field)}
.mi.danger{color:var(--warn);margin-top:4px;border-top:1px solid var(--rule);border-radius:0 0 5px 5px}
.mi.danger.armed{background:var(--warn);color:#fff}
.shopen{display:flex;flex-direction:column;gap:10px;padding:18px 4px 22px;border-bottom:1px solid var(--rule)}
.shopen input{font-family:var(--f-brand);font-size:18px;letter-spacing:.18em;text-transform:uppercase;height:42px}
.shopen .btn{height:42px}
.shrow{padding-top:10px;border-top:1px solid var(--rule)}
.shbox{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-soft)}
.shcode{display:flex;align-items:baseline;gap:12px}
.shcode b{font-family:var(--f-brand);font-size:30px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.shbox textarea{width:100%;min-width:0;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:6px;padding:10px;font:13px/1.7 var(--f-ui);resize:vertical}
.vpage img.vhalf{z-index:2;clip-path:inset(0 0 50% 0);pointer-events:none}
.vhalfline{position:absolute;left:0;right:0;top:50%;z-index:3;border-top:2px dashed #2f6b4f;pointer-events:none}
.vhalfline span{position:absolute;right:8px;top:-22px;background:#2f6b4f;color:#fff;font:600 11px/1 "Outfit",sans-serif;letter-spacing:.06em;padding:5px 8px;border-radius:999px}
::selection{background:var(--accent-soft)}

/* ===== root keys: two layouts ===== */
.roothead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* the side panel (iPad / Mac): ルート and 食い on the first line, 送り (left) and 鍵盤／一覧 (right) on the second */
.roothead #rootH{flex:1 1 auto;white-space:nowrap}.roothead .rbrk{flex:0 0 100%;height:0}.roothead .advseg{margin-right:auto}
.advseg button,.kbseg button{white-space:nowrap}
.kbseg button{padding:3px 9px;font-size:12px}
.piano.kb-piano .accs{display:none}
.piano.kb-grid .blacks{display:none}
/* ♭♯つき: ♭/♯ row over the naturals */
.piano.kb-grid{position:relative;height:auto;display:flex;flex-direction:column;gap:3px;container-type:inline-size}
.piano.kb-grid .accs{display:grid;grid-template-columns:repeat(14,1fr);gap:clamp(1px,.5cqw,4px);height:clamp(50px,9cqw,76px)}
.piano.kb-grid .accs button{background:var(--key-b);color:var(--key-b-ink);border:1px solid var(--key-b);border-radius:3px;font-family:var(--f-chord);font-weight:700;font-size:clamp(12px,3.3cqw,24px);letter-spacing:-.02em;padding:0;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.piano.kb-grid .accs button sup{font-size:.68em;line-height:0;position:relative;top:-.5em;vertical-align:baseline}
.piano.kb-grid .accs button.rare{background:color-mix(in srgb,var(--key-b) 45%,var(--muted));border-color:transparent}
.piano.kb-grid .whites{height:clamp(50px,9cqw,76px);gap:clamp(2px,.5cqw,4px)}
.piano.kb-grid .whites button{border-radius:3px;align-items:center;padding:0;font-size:clamp(18px,5cqw,34px);font-weight:700}
.mkedit{position:fixed;z-index:70;font:700 14px var(--f-ui);padding:0 8px;border:2px solid var(--accent);border-radius:4px;background:var(--paper);color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.18);outline:none}
/* long menus stay on screen and scroll inside themselves (a finger on the menu never scrolls the sheet behind it) */
.ctxmenu,.menupop{max-height:calc(100vh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ctxmenu{position:fixed;z-index:80;min-width:220px;width:max-content;max-width:min(720px,calc(100vw - 12px));box-sizing:border-box;padding:5px;border-radius:9px;background:rgba(40,42,46,.92);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 34px rgba(0,0,0,.35);color:#f2f2f2;font:13.5px/1.2 var(--f-ui);display:flex;flex-direction:column}
.ctxmenu button{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:6px 10px;border:0;border-radius:5px;background:none;color:inherit;font:inherit;text-align:left;cursor:default}
.ctxmenu button:hover:not([disabled]),.ctxmenu button:focus-visible{background:#2f6fe0;color:#fff;outline:none}
.ctxmenu button[disabled]{opacity:.38}
.ctxmenu .tprow{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 10px}
.ctxmenu .tprow span{flex:1}.ctxmenu .tprow b{font-weight:600;margin-left:4px;color:#9ec3ff}
.ctxmenu .tprow button{width:30px;justify-content:center;padding:4px 0;border:1px solid rgba(255,255,255,.22);font-size:15px;font-weight:700;cursor:pointer}
.ctxmenu .pkrow{flex-wrap:wrap;gap:6px;padding:5px 6px 6px 10px}.ctxmenu .pkrow>span{flex:1 0 100%}
.ctxmenu .pkseg{display:flex;flex-wrap:wrap;gap:4px}
.ctxmenu .navmrow .pkseg button{display:inline-flex;align-items:center;gap:4px}
.navico{vertical-align:-3px;flex:none}
/* selects that sit in a row of buttons (1・2番カッコ, テンポ記号) and the small 食い switch next to 鍵盤／一覧 */
.row2>.btnsel{flex:1 1 auto;max-width:none;min-width:0;text-align:center;text-align-last:center;cursor:pointer}
.row2>.btnsel.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.row2.navrow>#navSel,.row2.navrow>#voSel{flex:1 1 140px;max-width:none}.navrow>#voSel{text-align:left;text-align-last:left}
.tprow2{margin-top:6px}.tprow2>.btnsel{flex:0 1 calc(50% - 3px)}
.pusel{height:28px;font-size:12px;padding:0 6px;max-width:120px;margin-left:auto;cursor:pointer}.pusel.on{border-color:var(--accent);color:var(--accent);font-weight:700}.pusel:disabled{opacity:.45;cursor:default}
@media (pointer:coarse){.pusel{min-height:44px;font-size:14px}}
.navrow{align-items:center}.navrow .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}.navrow select{flex:1 1 140px;min-width:0}
.ctxmenu .pkrow .pkseg button{width:auto;min-width:46px;padding:5px 9px;justify-content:center;border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:600;cursor:pointer}
.ctxmenu .pkrow .pkseg button[aria-pressed="true"]{background:#2f6fe0;border-color:#2f6fe0;color:#fff}
@media (pointer:coarse){.ctxmenu .pkrow .pkseg button{min-height:44px;min-width:54px;font-size:14px}}
.viewer.pv #vMode,.viewer.pv #vPenTools{display:none!important}
.hsong,.lcard,.lcard .lopen{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ctxmenu .smsl .pkseg button{width:auto;padding:5px 9px;border:1px solid rgba(255,255,255,.22);font-size:13px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxmenu .smsl .pkseg button[disabled]{opacity:.5}
@media (pointer:coarse){.ctxmenu .smsl .pkseg button,.songmenu>button{min-height:44px}}
/* song cards picked for a bulk delete, the bar under them, the confirm box */
.smon{outline:3px solid #2f6fe0!important;outline-offset:2px;border-radius:10px}
body.smmode .hsong,body.smmode .lcard{position:relative}
body.smmode #hRecent [data-hsong]::after,body.smmode #libSongs .lcard::after{content:'';position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;border:2px solid #8a93a3;background:rgba(255,255,255,.9);box-sizing:border-box;pointer-events:none}
body.smmode #hRecent .smon[data-hsong]::after,body.smmode #libSongs .lcard.smon::after{content:'✓';border-color:#2f6fe0;background:#2f6fe0;color:#fff;font:700 14px/18px system-ui;text-align:center}
.smbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:75;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 16px);box-sizing:border-box;padding:8px 10px;border-radius:12px;background:rgba(40,42,46,.95);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.smbar .smn{font-weight:600;display:flex;flex-direction:column;padding:0 6px}.smbar .smn small{font-weight:400;opacity:.7;font-size:11px}
.smbar .btn{min-height:36px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.smbar .btn.danger:not([disabled]),.smcbtn .btn.danger{background:var(--warn);color:#fff;border-color:var(--warn)}
@media (pointer:coarse){.smbar .btn{min-height:44px}}
@media (max-width:600px){.smbar{left:8px;right:8px;transform:none;max-width:none}.smbar .smn{flex:1 0 100%;text-align:center}}
.smconf{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px}
.smcbox{background:var(--paper,#fff);color:var(--ink,#111);border-radius:12px;padding:18px 18px 14px;max-width:min(420px,100%);box-sizing:border-box;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:6px}
.smcbox b{font-size:16px}.smcbox p{margin:0;font-size:13px}
.smcbtn{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.smcbtn .btn{min-height:40px;padding:0 16px}
@media (pointer:coarse){.smcbtn .btn{min-height:44px}}
.ctxmenu button.danger span{color:#ff8a80}.ctxmenu button.danger:hover span{color:#fff}
.ctxmenu kbd{font:inherit;opacity:.55;letter-spacing:.04em;border:0;background:none;padding:0}
.ctxmenu button:hover:not([disabled]) kbd,.ctxmenu button:focus-visible kbd{opacity:.85}
.ctxmenu hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:4px 8px}
#rows{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#rows.edz.zoomed{overflow-x:auto;overscroll-behavior-x:contain}#rows.edz.zoomed .rowslot:not(.ph) svg{width:auto;max-width:none;touch-action:pan-x pan-y}
#rows .sthit{touch-action:none}
.dclbl{font-size:11px;color:var(--muted);margin:6px 0 4px}
.dcgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dcgrid button{border:1px solid var(--rule);background:transparent;border-radius:5px;padding:7px 1px;font-family:var(--f-chord);font-weight:600;font-size:14px;min-width:0;overflow:hidden;white-space:nowrap}
.dcgrid button:hover{background:var(--field)}
.dcgrid button.long{font-size:12px;letter-spacing:-.03em}
.dcgrid button small{font-size:.8em}
.rhh{fill:var(--ink)}.rhh.open{fill:none;stroke:var(--ink);stroke-width:1.4}.rhtie{fill:var(--ink)}
#rhBars{position:relative}
.navrow #navSel{flex:1 1 220px;min-width:0}.blk h3.subh{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;margin:12px 0 6px}.blkn{font-weight:400;font-size:.9em;margin-left:4px}#rhBtn{flex-direction:column;gap:2px}#rhBtn .rhhint{font-size:10.5px;color:var(--muted);font-weight:400}.rhtieov{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.rhtieov path{fill:var(--ink)}
.rhs{stroke:var(--ink);fill:none}.rhr,.rhb{fill:var(--ink)}
.rht{font:italic 700 13px var(--f-ui);fill:var(--ink)}.tupb{stroke:var(--ink)}
/* TAB fret numbers on the lines (the line is blanked out behind them) */
.tabbg{fill:var(--paper)}.tbsl{stroke:var(--paper)}.tabo{fill:var(--paper);stroke:var(--ink);stroke-width:1.1}.tabn{fill:var(--ink);font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700}
.rhwrap{position:fixed;inset:0;z-index:75;background:rgba(10,12,10,.35);display:flex;align-items:center;justify-content:center;padding:16px}
.rhpanel{width:min(1240px,100%);max-height:calc(100vh - 32px);overflow:visible;background:var(--paper);color:var(--ink);border-radius:10px;padding:0;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.rhscroll{flex:1;min-height:0;overflow:auto;padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;border-radius:10px}
.rhpanel h2{margin:0;font-size:16px}
.rhprev{width:100%;height:76px;background:var(--rh-band,var(--field));border-radius:8px;touch-action:pan-x pan-y}
/* the window's settings: a label stays with its buttons; the pairs wrap as units */
.rhset{row-gap:8px}.rhset .sgrp{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;max-width:100%}
/* 音符・休符 and 16分〜6連: one group (a row of its own on a phone held upright; elsewhere laid out as before) */
.rhtools{display:contents}
/* the window's colours: the band behind the notes and the cell edges stand out from the paper in the dark too */
.rhpanel{--rh-band:var(--field);--rh-bd:var(--rule)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rhpanel{--rh-band:#22302a;--rh-bd:#3d4d44}}
:root[data-theme="dark"] .rhpanel{--rh-band:#22302a;--rh-bd:#3d4d44}
/* コピー・貼り付け of the bar's rhythm: a quiet pair, kept together on one line */
.rhnav>.rhcp{display:flex;gap:6px;flex:0 1 auto}.rhnav>.rhcp .btn{flex:1 1 auto;color:var(--muted)}.rhnav>.rhcp .btn:not(:disabled):hover{color:inherit}
/* a phone held upright: the window is the screen's width and never slides sideways; only the bars (cells / notes / TAB lines) scroll sideways,
   its height follows its contents */
@media (max-width:600px){
  .rhwrap{padding:0;align-items:flex-end}
  .rhpanel{width:100vw!important;max-width:100vw;height:auto!important;max-height:calc(100dvh - env(safe-area-inset-top,0px))!important;transform:none!important;border-radius:14px 14px 0 0}
  .rhscroll{overflow-x:hidden;padding:0 10px calc(12px + env(safe-area-inset-bottom,0px));gap:8px}
  .rhpanel .imphead{margin:0 -10px!important;padding:12px 10px 4px!important}
  .rhzbox{width:100%;min-width:0}
  /* settings in 3 rows: tabs / 音符・休符 + 16分〜6連 / 表示 + 音符の位置 */
  .rhtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rhtools>.setrow{flex:none}
  .rhset{order:2;flex-wrap:nowrap;gap:6px}.rhset .sgrp{gap:4px;min-width:0}.rhset .sgrp>.small{display:none}.rhset .seg{flex-wrap:nowrap}
  .rhzbox,.rhtabfoot,#rhHelp,.rhpanel .row2{order:3}
  .rhset .seg button,.rhpanel #rhUnits button,.rhpanel #rhMode button{padding:0 7px;white-space:nowrap}
  .rhpanel .seg{flex-wrap:wrap;max-width:100%}
  .rhpanel .row2 .btn{min-height:40px}
  /* at 100% the cells share the screen's width (bigger cells: zoom in, then only the bars scroll sideways) */
  #rhBars .rhbar.main .rhc{min-width:0!important}#rhBars .rhbar{min-width:0}
  .rhgrip{display:none}}
.rhempty{font:12px var(--f-ui);fill:var(--muted)}
.rhgrid{display:grid;gap:3px;touch-action:none;user-select:none;-webkit-user-select:none}
.rhc{height:44px;border:1px solid var(--rh-bd,var(--rule));border-radius:4px;background:var(--paper);padding:0;min-width:0}
.rhc.gs{box-shadow:inset 2px 0 0 var(--muted)}
.rhc.on{background:var(--ink);border-color:var(--ink)}
.rhc.hold{background:color-mix(in srgb,var(--ink) 35%,var(--paper))}
.rhc.rest{background:repeating-linear-gradient(45deg,var(--paper) 0 4px,var(--rh-bd,var(--rule)) 4px 7px);border-color:var(--muted)}
.rhc.drag{outline:2px solid var(--accent);outline-offset:-2px}
.rhc.dragr{outline:2px dashed var(--muted);outline-offset:-2px;background:repeating-linear-gradient(45deg,var(--paper) 0 4px,var(--rh-bd,var(--rule)) 4px 7px)}
.fine{font:italic 700 13px Georgia,'Times New Roman',serif;fill:var(--ink)}
/* tempo marks (rit. …, ♩=, swing) and the 1・2番カッコ number */
.tmp{font:italic 700 13px Georgia,'Times New Roman',serif;fill:var(--ink)}.tmpn{font:700 15px "Helvetica Neue",Arial,sans-serif;fill:var(--ink)}.tmp3{font:italic 700 8.5px Georgia,'Times New Roman',serif;fill:var(--ink)}
.vol{font:700 11.5px "Helvetica Neue",Arial,sans-serif;fill:var(--ink)}
.rhpanel{position:relative}
.rhscroll>*:not(.rhbars){flex-shrink:0}.rhtools>*{flex-shrink:0}
.rhgrip{position:absolute;z-index:2;touch-action:none}
.rhgrip[data-d="n"],.rhgrip[data-d="s"]{left:12px;right:12px;height:14px;cursor:ns-resize}
.rhgrip[data-d="e"],.rhgrip[data-d="w"]{top:12px;bottom:12px;width:14px;cursor:ew-resize}
.rhgrip[data-d="n"]{top:-7px}.rhgrip[data-d="s"]{bottom:-7px}.rhgrip[data-d="e"]{right:-7px}.rhgrip[data-d="w"]{left:-7px}
.rhgrip[data-d="nw"],.rhgrip[data-d="ne"],.rhgrip[data-d="sw"],.rhgrip[data-d="se"]{width:24px;height:24px}
.rhgrip[data-d="nw"]{top:-10px;left:-10px;cursor:nwse-resize}.rhgrip[data-d="se"]{bottom:-10px;right:-10px;cursor:nwse-resize}
.rhgrip[data-d="ne"]{top:-10px;right:-10px;cursor:nesw-resize}.rhgrip[data-d="sw"]{bottom:-10px;left:-10px;cursor:nesw-resize}
.rhpanel .imphead{margin:0 -16px;padding:14px 16px 4px;cursor:move;touch-action:none;user-select:none;-webkit-user-select:none}
.rhpanel .imphead h2::after{content:"（上の帯で移動・ふちや角をドラッグで大きさ変更・帯のダブルクリックで元に戻す）";font:400 11px var(--f-ui);color:var(--muted);margin-left:8px}
@media (min-width:900px) and (pointer:fine){
  .rhpanel{width:min(1700px,96vw);height:92vh;max-height:92vh}
  .rhscroll{padding:0 24px 20px;gap:14px}
  .rhpanel .imphead{margin:0 -24px;padding:18px 24px 6px}
  .rhwrap{background:rgba(10,12,10,.18)}
  .rhzbox{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
  .rhzbox>.rhbars{flex:none;align-items:stretch;height:calc(100% * var(--rhz,1));min-height:calc(260px * var(--rhz,1))}
  .rhpanel .rhbar{min-height:0}
  .rhpanel .rhbar .rhprev{flex:1 1 0;min-height:calc(56px * var(--rhz,1));height:auto}
  .rhpanel .rhbar .rhgrid{flex:0 1 calc(120px * var(--rhz,1));min-height:calc(48px * var(--rhz,1));grid-template-rows:1fr}
  .rhpanel .rhbar .rhc{height:auto}
  .rhpanel .rhbar .rhchd{font-size:calc(22px * var(--rhz,1))}
}
@media (min-width:900px) and (pointer:coarse){.rhpanel{width:96vw}}
.rhchd{display:grid;font:700 15px var(--f-ui);color:var(--ink);min-height:1.3em;line-height:1.3}
.rhchd span{white-space:nowrap;overflow:visible}
.rhchd span.carry{color:var(--muted);font-weight:500}
.paltabs{display:flex;width:100%;margin:2px 0 4px;flex-shrink:0;min-height:40px}.paltabs button{flex:1;padding:9px 0;font-weight:700;font-size:13px;line-height:1.2}
/* tabs: the selected tab is shown by its fill, so no extra focus ring (it stuck out past the frame on the right) */
.paltabs{padding:3px;gap:3px}.paltabs button{height:auto}.paltabs button:focus-visible,.seg button:focus-visible{outline:none}
/* sheet header scales with the sheet (phone) */
.head{padding-bottom:calc(10px*var(--sg,1));margin-bottom:calc(10px*var(--sg,1));gap:calc(4px*var(--sg,1)) calc(16px*var(--sg,1))}
.head h1{font-size:calc(32px*var(--sg,1))}
.meta{font-size:calc(17px*var(--sg,1));gap:calc(14px*var(--sg,1))}
.artist{font-size:calc(15px*var(--sg,1))}
.hkt{font-size:calc(13px*var(--sg,1))}
@media (max-width:600px){.head{grid-template-columns:minmax(0,1fr) auto}.artist,.hart{text-align:right}.hart{width:auto;max-width:100%}
  .head .hin:focus{font-size:16px}}
/* touch only (phone / iPad): a delete key under the keyboard, since there is no Delete key */
/* a new song: the title box glows for a moment (instead of a notice that covered it) */
.hin.newglow{border-color:var(--accent);background:var(--field);animation:newglow 1.4s ease-in-out 3}
@keyframes newglow{0%,100%{box-shadow:0 0 0 0 rgba(139,196,138,0)}50%{box-shadow:0 0 0 6px rgba(139,196,138,.55)}}
@media (prefers-reduced-motion:reduce){.hin.newglow{animation:none}}
/* touch devices: no keyboard shortcuts in the long-press menu */
@media (hover:none) and (pointer:coarse){.ctxmenu kbd{display:none}}
/* narrow windows (iPad portrait): a narrower menu, so it fits beside the finger (the long rows wrap) */
@media (max-width:899px){.ctxmenu{max-width:min(420px,calc(100vw - 12px))}}

/* ===== phone ===== */
.phonly{display:none}
.ubtn{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13px;white-space:nowrap}.ubtn .uico{flex:none}.ubtn:disabled{opacity:.35}
@media (max-width:1439px){.bar .ubtn .ulab{display:none}.bar .ubtn{min-width:40px;justify-content:center;padding:0 8px}}
@media (max-width:600px),(max-height:500px) and (orientation:landscape){.bar .ubtn{min-width:44px}}
@media (hover:none) and (pointer:coarse) and (max-width:600px),(hover:none) and (pointer:coarse) and (max-height:500px) and (orientation:landscape){.kbdel.touchonly{display:none!important}}
/* phones, portrait AND landscape: compact top bar with the rest under … */
@media (max-width:600px),(max-height:500px) and (orientation:landscape){
  .phonly{display:inline-flex;align-items:center;justify-content:center}
  /* top bar: home, song, undo/redo, … — the rest opens under … */
  .bar1{flex-wrap:nowrap;overflow:visible}
  #songSel{flex:1 1 auto;max-width:none;min-width:0}
  #phMore{order:6;font-size:20px;line-height:1;min-width:44px}
  .bar:not(.phopen) #newBtn,.bar:not(.phopen) #songMenu,.bar:not(.phopen) #helpBtn,.bar:not(.phopen) #optBtn,.bar:not(.phopen) #setBtn,.bar:not(.phopen) #pdfBtn,.bar:not(.phopen) #acctBtn2{display:none!important}
  /* ▶ 本番 stays on the top bar (not under …); the 🐞 button shows its icon only to make room */
  #viewBtn{order:5;padding:0 10px;white-space:nowrap}
  .bar:not(.phopen) .fbbtn{padding:3px 8px}.bar:not(.phopen) .fbbtn .fbt{display:none}
  .bar.phopen .bar1{flex-wrap:wrap;row-gap:8px}
  .bar.phopen #newBtn,.bar.phopen #songMenu,.bar.phopen #optBtn,.bar.phopen #setBtn,.bar.phopen #pdfBtn,.bar.phopen #acctBtn2{order:20}
  .bar.phopen #helpBtn{order:20}
  #bar2Close{width:100%;min-height:44px;margin-top:4px;font-weight:700}
  .bar.open #phMore{border-color:var(--accent);color:var(--accent)}
  .bar1 .btn,.bar1 select{min-height:44px}
  #kbBtn,.clvrow .small{display:none}
  /* sheet header: ◀ position / chord ▶ delete in one compact block */
  .pal{display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px 56px;column-gap:8px;row-gap:8px;max-height:58vh!important;padding-top:10px!important}
  .pal>*{grid-column:1/-1}
  /* the position / chord / tabs block stays on top while the keys and chord types scroll under it */
  .pal .palhead{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) 48px 56px;column-gap:8px;row-gap:8px;position:sticky;top:-10px;z-index:3;margin:-10px calc(-1*var(--palpx,16px)) 0;padding:10px var(--palpx,16px) 8px;background:var(--paper);box-shadow:0 6px 8px -8px rgba(0,0,0,.25)}
  .pal .palhead>.paltabs{grid-column:1/-1}
  /* bar tab: finger-sized buttons, and "delete" kept apart from "insert" */
  .ptab[data-t="bar"] .btn,.ptab[data-t="bar"] select,.ptab[data-t="bar"] input[type=text]{min-height:42px}
  .ptab[data-t="bar"] .seg button{min-height:38px;min-width:38px}
  #secChips button{min-height:38px;padding:0 12px}
  /* the two deletes sit right under the inserts, in red, finger-sized and a little apart */
  .rmrow{margin-top:2px;gap:10px}.rmrow .btn.danger{min-height:46px;border-color:color-mix(in srgb,var(--warn) 45%,transparent);font-weight:600}
  /* drag the top of the input sheet (grip, position, chord) up/down to resize it; tap to fold/unfold */
  .palgrip{display:block!important;grid-column:1/-1;grid-row:1;height:14px;margin:-6px 0 -4px;position:relative;touch-action:none;cursor:ns-resize}
  .palgrip::after{content:"";position:absolute;left:50%;top:4px;width:40px;height:5px;border-radius:3px;background:var(--muted);opacity:.55;transform:translateX(-50%)}
  .pal .posl,.pal .cur{touch-action:none;cursor:ns-resize;user-select:none;-webkit-user-select:none}
  .pal.palsz{transition:none}
  .pal .pos{display:contents}
  #prevBtn{grid-column:1;grid-row:2/4;height:auto;min-height:48px}
  .pal .posl{grid-column:2;grid-row:2;font-size:11px;text-align:center;align-self:end;color:var(--muted)}
  .pal .cur{grid-column:2;grid-row:3;font-size:24px!important;line-height:1.1;text-align:center;margin:0!important;padding:0!important;border:0!important;min-height:0!important}
  #nextBtn{grid-column:3;grid-row:2/4;height:auto;min-height:48px}
  .pal .cur .phl{display:none}.pal .cur .ph{font-size:15px}
  #posDel{grid-column:4;grid-row:2/4;height:auto;min-height:48px;background:var(--field);flex-direction:column;gap:2px;font-size:11px;font-weight:700}
  .pal .paltabs{min-height:40px;margin:0}
  .ptab[data-t="chord"]:not([hidden]){display:flex;flex-direction:column;gap:6px}
  .ptab[data-t="chord"]>.blk:first-child{order:1}
  .ptab[data-t="chord"]>details[data-fold="q"]{order:2}
  .ptab[data-t="chord"]>details[data-fold="t"]{order:3}
  .ptab[data-t="chord"]>details[data-fold="d"]{order:4}
  .piano{height:96px}.piano.kb-piano{height:78px}
  /* chord types right under the keys, always in view: M m 7 M7 m7 + その他 (scrolls to all types) */
  .pal .qquick{display:grid;grid-template-columns:repeat(5,1fr) 1.3fr;gap:5px;margin-top:6px}
  .qquick button{min-height:42px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);font:700 16px var(--f-chord);padding:0}
  .qquick button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .qquick .qmore{font:600 13px var(--f-ui);background:var(--field)}
  .roothead{justify-content:flex-end;margin-bottom:4px;flex-wrap:nowrap}.roothead h2,.roothead .rbrk{display:none}.roothead .advseg{margin-right:0}.roothead .seg button{min-height:32px}
  .head .meta{flex-wrap:nowrap}
  #qGrid button,#tGrid button,#dcKey button{min-height:40px}
  /* room under the sheet for the whole input panel (+ a little), so 「＋1ページ追加」 can always be scrolled above it (--palH: toast/scroll code below) */
  main:not(.clean) .paper{margin-bottom:max(60vh,calc(var(--palH,0px) + 24px))}
  html:has(main:not(.clean)){scroll-padding-bottom:var(--palH,0px)}
  /* phone sheet: the whole A4 row fits the screen; pinch with two fingers to zoom the sheet only */
  .rowslot.ph{height:auto!important;margin:0 0 4px}
  .rowslot.ph svg{display:block;max-width:none}
  #rows.phz{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  #rows.phz.zoomed{margin-left:var(--zml,0);margin-right:var(--zmr,0);padding:0 var(--zpad,0)}
  body.phzoom .paper{margin-left:var(--pml,0)!important;margin-right:var(--pmr,0)!important;width:auto!important;max-width:none!important}
  #rows.phz svg{touch-action:pan-y}
  #rows.phz.zoomed svg{touch-action:pan-x pan-y}
  .zbadge{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:30;background:var(--solid);color:var(--solid-ink);border-radius:999px;padding:5px 12px;font:600 13px var(--f-ui);pointer-events:none;opacity:0;transition:opacity .2s}
  .zbadge.on{opacity:.92}
  .pbreak,.pnav{display:none!important}
  /* other panels open → the input sheet steps aside */
  body:has(#setBox:not([hidden])) .pal,body:has(#impBox:not([hidden])) .pal,body:has(.bar.open) .pal{display:none!important}
  /* rhythm window: big cells (scroll sideways), no long help text */
  #rhBox .help{display:none}
  #rhBars:not(.rowview) .rhbar:not(.main){display:none}
  /* (only the box around the bars scrolls sideways, not the bars themselves) */
  #rhBars .rhbar.main{flex:none}
  #rhBars .rhbar.main .rhc{min-width:calc(36px * var(--rhz,1));height:calc(48px * var(--rhz,1))}
  /* long-press menu: a bottom sheet with finger-size rows */
  .ctxmenu{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none!important;max-height:72vh;overflow:auto;border-radius:14px 14px 0 0;padding:8px 8px calc(10px + env(safe-area-inset-bottom,0px))}
  .ctxmenu button{min-height:46px;font-size:15px}
  .ctxmenu kbd{display:none}
  .ctxmenu .tprow button{min-width:44px;min-height:44px}
  .ctxmenu button.danger{margin-top:4px}
  /* setlist: delete looks like a button */
  #slDel{border:1px solid currentColor!important;padding:0 14px;min-height:40px}
  /* play mode: row 1 = close + title, row 2 = tools (wraps, nothing hidden off-screen) */
  .vbar{flex-wrap:wrap;gap:6px;padding:6px 8px}
  .vmeta{flex:1 1 0;min-width:0;overflow:hidden}
  .vtools{flex:1 1 100%;gap:6px}
  .vtools .vb{min-height:40px}
  .vb.sz{width:40px;height:40px}
  .vgrp{flex-wrap:wrap;padding-right:6px}
  /* while drawing: hide the title, let every tool flow in compact rows right after 閉じる / 書き込み中 */
  .viewer.drawing .vmeta{display:none}
  .viewer.drawing .vtools,.viewer.drawing .vpen,.viewer.drawing .vgrp{display:contents}
  .viewer.drawing #vClose{order:-2}.viewer.drawing #vMode{order:-1}
  .viewer.drawing .vbar .vb{min-height:38px;padding:0 10px}
  .viewer.drawing .vbar .vb.sz,.viewer.drawing .vbar .vb.sw{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
  .viewer.drawing #vTap,.viewer.drawing #vHalf,.viewer.drawing #vFull{display:none}
}
.touchrow{display:none}
@media (hover:none) and (pointer:coarse){.touchrow{display:flex}}
/* phone landscape: input on the right, sheet music on the left */
@media (max-height:500px) and (orientation:landscape){
  .pal{position:fixed!important;left:auto!important;right:0!important;top:0!important;bottom:0!important;width:44vw;max-height:none!important;border-radius:0!important;overflow:auto;z-index:13;padding-top:max(10px,env(safe-area-inset-top,0px))!important}
  /* the top menu stays in the left (sheet) area; the input panel owns the right side, full height */
  .bar{padding-right:calc(44vw + 8px)!important}
  .bar1 .grp{flex-wrap:nowrap}.bar1{gap:6px!important}#songSel{min-width:0}
  .bar1>*{flex-shrink:0}.bar:not(.phopen) .bar1>.grp:has(#songSel){flex:1 1 0;min-width:60px}.bar:not(.phopen) #songSel{width:100%}.bar:not(.phopen) .bar1 .sp{display:none}
  .bar:not(.phopen) .fbbtn .fbt{display:none}
  .palgrip{display:none!important}
  main:not(.clean) .paper{margin-bottom:24px!important}
  main:not(.clean){padding-right:calc(44vw + 8px);box-sizing:border-box}
  .bar1{flex-wrap:nowrap;overflow-x:auto}.bar1 .sync,.bar1 .brand{display:none}
  .rowslot.ph{height:auto!important}
  .pbreak,.pnav{display:none!important}
  body:has(#setBox:not([hidden])) .pal,body:has(#impBox:not([hidden])) .pal,body:has(.bar.open) .pal{display:none!important}
  /* play mode sideways: one thin toolbar row so the page gets the height */
  .vbar{padding:4px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto}.vbar .vb{min-height:36px;white-space:nowrap}
  .vmeta{flex:0 1 auto;max-width:28vw}.vmeta .vpos{display:none}
  .vtools{flex:1 0 auto;flex-wrap:nowrap}
}
/* phone sideways: the 食い / 1小節・2拍・1拍 / 鍵盤・一覧 row keeps every button whole (slimmer buttons instead of cut ones) */
@media (max-height:500px) and (orientation:landscape){.roothead .seg{flex-shrink:0}.roothead .kbseg button{padding-left:6px;padding-right:6px}}
/* small phone sideways (iPhone SE: the panel is about 290px wide): smaller words, rows that wrap instead of being cut */
@media (max-height:500px) and (orientation:landscape) and (max-width:760px){
  .roothead{flex-wrap:wrap;row-gap:6px;justify-content:flex-start}.roothead .pusel{margin-left:0}
  .dcgrid button.long{font-size:10.5px;letter-spacing:-.05em}
  .grid button.wide{white-space:nowrap;font-size:13px;letter-spacing:-.03em}
  .numrow .seg{display:flex;width:100%}.numrow .seg button{flex:1 1 0;padding:0 4px}.numrow .seg.secmod{width:auto;flex:1 1 100%}
}
.phs{display:none}@media (max-width:600px){.pal .cur .phs{display:inline}}
.qquick{display:none}
.pal .cur .prevc{font-size:13px;color:var(--muted);margin-left:8px;font-weight:600}
.touchonly{display:none}
@media (hover:none) and (pointer:coarse){.touchonly{display:flex}}
/* section/bar tab: on a mouse device (Mac) the copy / insert / delete buttons live in the right-click menu and keys, so they are hidden here */
.mouseonly{display:none}
@media (hover:hover) and (pointer:fine){.mousehide{display:none!important}.mouseonly{display:block}}
#barMouseHint{margin:4px 2px 2px;line-height:1.6}
.rclbl{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.rclbl input{width:60px}
/* fingers (iPad / iPhone): every control in the section/bar tab at least 44px tall, chips and number buttons wide enough to hit */
@media (hover:none) and (pointer:coarse){
  .ptab[data-t="bar"] .btn,.ptab[data-t="bar"] select,.ptab[data-t="bar"] input[type=text]{min-height:44px}
  .ptab[data-t="bar"] .seg button{min-height:44px;min-width:44px}
  .ptab[data-t="bar"] #secChips button{min-height:44px;min-width:48px;padding:0 12px}
}
.kbdel{margin-top:8px}.kbdel .btn{flex:1;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px}
.palhead{display:contents}
/* ⌘/ shortcut sheet */
/* first-time guide (3 cards) */
.onb{position:fixed;inset:0;z-index:200;background:rgba(10,14,12,.5);display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.onbcard{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.32);width:min(440px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px}
.onbfig{background:var(--field);border-radius:12px;padding:12px;display:flex;justify-content:center}
.onbfig svg{width:100%;max-width:300px;height:auto;display:block}
.onbfig .l{stroke:var(--line);stroke-width:1.2;fill:none}.onbfig .k{stroke:var(--ink);stroke-width:1.4;fill:none}
.onbfig .a{stroke:var(--accent);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.onbfig .af{fill:var(--accent)}.onbfig .hl{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6}
.onbfig .key{fill:var(--key-w);stroke:var(--rule)}.onbfig .keyon{fill:var(--accent)}
.onbfig text{font-family:var(--f-chord);fill:var(--ink)}.onbfig .kt{font:600 11px var(--f-ui);fill:var(--ink);text-anchor:middle}.onbfig .kton{fill:var(--accent-ink)}
.onbfig .onbgh{opacity:.62}.onbfig .fing{fill:var(--accent);opacity:.28}
.onbstep{margin:2px 0 0;font-size:12px;color:var(--muted);letter-spacing:.04em}
.onbcard h2{margin:0;font-size:19px;line-height:1.35}
.onbtxt{margin:0;font-size:14.5px;line-height:1.75}
.onbdots{display:flex;gap:6px;justify-content:center;padding:2px 0}
.onbdots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--rule);cursor:pointer}
.onbdots button[aria-current="step"]{background:var(--accent);width:22px;border-radius:5px}
.onbact{display:flex;gap:10px;justify-content:space-between;align-items:center}
.onbact .btn{min-height:44px;padding:0 18px;font-size:15px}.onbact .primary{margin-left:auto;min-width:120px}
@media (max-height:520px) and (orientation:landscape){
  .onbcard{width:min(680px,100%);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6px 18px;padding:16px 18px 12px}
  .onbfig{grid-row:1/6;align-self:center}.onbtxt{font-size:13.5px;line-height:1.65}.onbcard h2{font-size:17px}}
.kbsheet{position:fixed;inset:0;z-index:60;background:rgba(10,14,12,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.kbsheet>div{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:860px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:18px 22px}
.kbsheet header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.kbsheet h2{font-size:17px;margin:0}
.kbcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:4px 30px}
.kbcols h3{font-size:12px;color:var(--muted);margin:12px 0 4px;letter-spacing:.06em}
.kbcols div.r{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--rule);font-size:13px}
.kbcols div.r span:first-child{flex:1 1 auto;min-width:8em}.kbcols div.r span:last-child{flex:0 1 auto}.kbcols div.r span:last-child{text-align:right;line-height:1.9}.kbcols kbd{white-space:nowrap}
.kbcols kbd{font:600 11.5px var(--f-ui);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:0 5px;margin-left:2px;background:transparent}
/* ? button: show / hide the help texts everywhere */
body.nohelp .help{display:none!important}
#helpBtn{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}#helpBtn[aria-pressed="true"]{background:var(--rule);color:var(--ink)}
.ptab[hidden]{display:none}
#clefSeg[hidden]{display:none}
.bar2h{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent);padding-left:8px;border-left:3px solid var(--accent);margin-left:6px}
.sthit{fill:transparent;cursor:grab}.sthit[data-part="l"],.sthit[data-part="r"]{cursor:ew-resize}.sthit.on{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.stg.sel,.stg.sel *{stroke:var(--accent)}
.sthandle{fill:var(--paper);stroke:var(--accent);stroke-width:1.2}
.stbox{fill:none;stroke:var(--accent);stroke-width:.8;stroke-dasharray:3 2}
.stpt{fill:var(--paper);stroke:var(--muted);stroke-width:1;opacity:.55}.stpt.on{stroke:var(--accent);stroke-width:1.5;opacity:1}
.sthit[data-part="nw"],.sthit[data-part="se"]{cursor:nwse-resize}.sthit[data-part="ne"],.sthit[data-part="sw"]{cursor:nesw-resize}.stg.sel .dot{fill:var(--accent)}.stg.sel text,.stg.sel .rhb{fill:var(--accent)}.stg.sel text{stroke:none}
body.stamping #rows{cursor:copy}
/* a finger on the band / bar name / chords moves the bars sideways (cells and TAB lines keep touch-action:none for drawing notes) */
.rhbars{display:flex;gap:10px;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none}
.rhbar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:8px;border:1px dashed var(--rule)}
.rhbar.main{border:2px solid var(--ink)}
.rhbar.part{min-width:72px}
/* 「この段ぜんぶ」: the row's bars side by side in one strip; when they do not fit, the strip scrolls sideways and settles at a bar's start */
.rhbars.rowview{flex-wrap:nowrap}
.rhbars.rowview .rhbar{min-width:calc(260px * var(--rhz,1));scroll-snap-align:start}
.rhzbox.rowsnap:not(.pinch){scroll-snap-type:x proximity}
/* more bars to the left / right: the edge fades */
.rhzbox.mL,.rhzbox.mR{--fl:#000;--fr:#000;-webkit-mask-image:linear-gradient(to right,var(--fl),#000 28px,#000 calc(100% - 28px),var(--fr));mask-image:linear-gradient(to right,var(--fl),#000 28px,#000 calc(100% - 28px),var(--fr))}
.rhzbox.mL{--fl:rgba(0,0,0,.2)}.rhzbox.mR{--fr:rgba(0,0,0,.2)}
.rhbars.rowview .rhlbl{cursor:pointer}
.rhbar.side{opacity:.82}
.rhbar .rhlbl{font:600 12px var(--f-ui);color:var(--muted)}
.rhbar.main .rhlbl{color:var(--ink)}
/* the rhythm window's contents grow with --rhz (1-2.5: pinch / Ctrl⌘+wheel); the box around them scrolls sideways when they do not fit */
.rhzbox{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;flex:none;max-width:100%}
.rhzbox>.rhbars{width:calc(100% * var(--rhz,1));min-width:100%}
.rhbar .rhprev{height:calc(64px * var(--rhz,1))}
.rhbar .rhc{height:calc(40px * var(--rhz,1))}
.rhbar .rhchd{font-size:calc(15px * var(--rhz,1))}
/* phones (upright and sideways): in 「この段ぜんぶ」 each bar is as wide as the window, the others are a swipe away */
@media (max-width:600px),(max-height:500px) and (orientation:landscape){
  .rhzbox{container-type:inline-size}.rhgrip{display:none}
  #rhBars.rowview{width:max-content;min-width:100%}
  #rhBars.rowview .rhbar:not(.main){display:flex}
  #rhBars.rowview .rhbar{flex:none;width:calc(100cqw * var(--rhz,1));min-width:0}
  #rhBars.rowview .rhbar .rhc{min-width:0!important}}
.rhc.rhold{background:repeating-linear-gradient(45deg,var(--paper) 0 4px,color-mix(in srgb,var(--rh-bd,var(--rule)) 60%,var(--paper)) 4px 7px)}
/* TAB欄 under the cells: the lines, string names in the margin, note columns, the numbers */
.rhtab{position:relative;flex:none;cursor:pointer;touch-action:pan-x pan-y}
.rhbar.hastab{padding-left:16px}
.rhtab .rtl{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line);pointer-events:none}
.rhtab .rts{position:absolute;right:100%;margin-right:5px;transform:translateY(-50%);font:700 10px var(--f-ui);color:var(--muted);pointer-events:none}
.rhtab .rtc{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-radius:3px;pointer-events:none;opacity:.55}.rhtab .rtc.on{opacity:1}
.rhtab .rtsel{position:absolute;border:2px solid var(--accent);border-radius:4px;pointer-events:none;box-sizing:border-box}
.rhtab .rtf{position:absolute;transform:translate(-50%,-50%) scale(var(--rhz,1));background:var(--paper);padding:0 1px;font:700 12px/1 "Helvetica Neue",Arial,sans-serif;color:var(--ink);pointer-events:none;letter-spacing:-.03em}
.rhtab .rtf.pend{color:var(--accent-ink);background:var(--accent);font-size:17px;padding:2px 4px;border-radius:4px;z-index:2}
.rhtabfoot p{margin:0;color:var(--muted)}.rhtabfoot.warn p{color:var(--warn)}
/* with the pad out (touch), the foot stays at the bottom of the window so the TAB欄 and the pad are seen together */
.rhtabfoot.padon{position:sticky;bottom:-16px;z-index:3;background:var(--paper);margin:0 -16px -16px;padding:8px 16px 12px;box-shadow:0 -6px 14px rgba(0,0,0,.08)}
/* short screens (iPhone sideways): thinner margins so 4 strings of 40px and the pad fit together */
@media (max-height:520px){.rhtabfoot.padon p{display:none}.rhtabfoot.padon{padding-top:6px;padding-bottom:8px}.rhwrap{padding:4px}.rhpanel{max-height:calc(100vh - 8px)}}
.rhtab{scroll-margin:8px 0 175px}
/* touch: the bars keep their height when the pad is out (they would shrink to nothing on a short screen) */
@media (pointer:coarse){#rhBars{flex-shrink:0}}
.tfrow{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}.tfrow p{flex:1 1 280px}
.rhpad{display:flex;flex-direction:column;gap:4px;margin-top:6px}
/* the「リズム」「TAB譜」tabs at the top of the rhythm window */
.rhtabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:2px 0 0}
.rhtabs[hidden]{display:none}
.rhtabs button{border:0;background:transparent;min-height:44px;padding:0 18px;font:600 13px var(--f-ui);color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;cursor:pointer}
.rhtabs button:hover{color:var(--ink)}
.rhtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
@media (pointer:coarse){.rhtabs button{padding:0 22px;font-size:15px}
  /* the mouse hints (drag the edges / corners, double-click the band) mean nothing to a finger */
  .rhpanel .imphead h2::after{display:none}}
#clefNote[hidden],#vClef[hidden]{display:none}
#clefSeg button:disabled{opacity:.45;cursor:default}
.rhpad .padtop{display:flex;align-items:center;gap:4px}.rhpad .padpos{flex:1;min-width:0;font:700 13px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rhpad .padpos>span{display:block;overflow:hidden;text-overflow:ellipsis}.rhpad .padnow{font-weight:600;font-size:12px;color:var(--muted);margin-top:2px}
.rhpad .padnums{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}
.rhpad button{min-height:44px;padding:0;font:700 16px var(--f-ui);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* the action buttons: their own row and colour, apart from the numbers */
.rhpad .padact{min-width:84px;padding:0 10px;font-size:13.5px;background:var(--field);border-color:var(--line)}.rhpad .padok{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rhpad button.cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* fingers: no pressed colour left behind after a tap */
.rhpad .padnums button.btn:not(.cur),.rhpad .padnums button.btn:not(.cur):hover,.rhpad .padnums button.btn:not(.cur):active{background:var(--paper);color:var(--ink)}
.rhpad .padnums button.btn{border-color:var(--rh-bd,var(--rule))}
@media (hover:none){.rhpad button:hover{border-color:var(--rule)}.rhpad .padact:hover{border-color:var(--line)}.rhpad .padok:hover{border-color:var(--ink)}}.rhpad button:focus,.rhpad button:focus-visible{outline:none}
/* touch: the preview above gets smaller while the TAB欄 is shown (room for 40px strings) */
@media (pointer:coarse){.rhbar.hastab .rhprev{height:calc(44px * var(--rhz,1))}#rhBars .rhbar.main.hastab .rhc{height:calc(40px * var(--rhz,1))}}
/* a phone held upright: everything in the bars a little shorter, the TAB欄's strings closer (24px), the pad pinned to the bottom of the window
   (the bars above scroll up / down in the window; the chosen note is kept above the pad by rhSee) */
@media (max-width:600px) and (pointer:coarse){
  .rhtab{--rts:24px;scroll-margin:6px 0 8px}
  #rhBars .rhbar{gap:4px;padding:4px 6px}#rhBars .rhbar.hastab{padding-left:16px}
  #rhBars .rhbar .rhlbl{font-size:11px;line-height:1.2}
  #rhBars .rhbar .rhchd{font-size:calc(13px * var(--rhz,1))}
  #rhBars .rhbar .rhprev{height:calc(52px * var(--rhz,1))}#rhBars .rhbar.hastab .rhprev{height:calc(36px * var(--rhz,1))}
  #rhBars .rhbar .rhc{height:calc(34px * var(--rhz,1))}#rhBars .rhbar.hastab .rhc,#rhBars .rhbar.main.hastab .rhc{height:calc(30px * var(--rhz,1))}
  .rhtab .rtf.pend{font-size:15px;padding:1px 4px}
  .rhtabfoot.padon{bottom:0;margin:0 -10px;padding:6px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .rhtabfoot.padon:not(.warn) .tfrow p{display:none}.rhtabfoot.padon .tfrow:not(:has(:not([hidden]):not(p))){display:none}
  .rhtabfoot:not(.padon):not(.warn) .tfrow p{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rhtabfoot.padon .rhpad{margin-top:0}}
/* the screen's visible height: 100dvh (on iOS: without the browser's own bars; 100vh counts them in). Browsers without dvh get innerHeight from the script */
:root{--vh100:100vh}@supports (height:100dvh){:root{--vh100:100dvh}}
.rhwrap{bottom:auto;height:var(--vh100)}
/* the input panel at the right (iPad sideways / a computer): it ends above the bottom of the visible screen, so its last buttons can be scrolled to */
@media (min-width:981px){.bar:not(.open) ~ main .pal,.bar ~ main .pal{max-height:calc(var(--vh100) - var(--topH,54px) - 28px - env(safe-area-inset-bottom,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}}
/* iPad (touch, not a phone): the rhythm window fits one screen without scrolling —
   title + 閉じる in a thin row, all the settings in one row (two when upright), shorter bars / cells, TAB strings 24px apart, the pad in two low rows.
   Only when it still does not fit (a big zoom): the middle scrolls inside the window, the title stays at the top and the pad at the bottom */
@media (min-width:601px) and (min-height:501px) and (pointer:coarse){
  .rhwrap{padding:calc(8px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px))}
  .rhpanel{max-height:calc(var(--vh100) - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
  .rhgrip{display:none}
  .rhscroll{flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:8px 10px;padding:0 16px 10px}
  .rhscroll>*{flex:1 1 100%;min-width:0}
  .rhscroll>.rhtabs,.rhscroll>.rhset,.rhtools>*{flex:0 0 auto}
  .rhpanel .imphead{position:sticky;top:0;z-index:4;background:var(--paper);margin:0 -16px;padding:8px 16px 4px}
  .rhpanel .imphead h2{font-size:15px}.rhpanel .imphead .btn{min-height:40px;padding:0 16px}
  .rhtabs{border-bottom:0;margin:0}.rhtabs button{min-height:44px;padding:0 16px;font-size:14px}
  .rhset{flex-wrap:nowrap;gap:10px}.rhset .sgrp>.small{display:none}.rhset .seg,.rhpanel #rhMode,.rhpanel #rhUnits{flex-wrap:nowrap}
  .rhpanel .rhscroll .seg button{height:36px;padding:0 12px;font-size:13px;white-space:nowrap}
  .rhtab{--rts:24px;scroll-margin:6px 0 8px}
  #rhBars .rhbar{gap:3px;padding:4px 6px}#rhBars .rhbar.hastab{padding-left:18px}
  #rhBars .rhbar .rhlbl{font-size:11px;line-height:1.2}
  #rhBars .rhbar .rhchd{font-size:calc(14px * var(--rhz,1));line-height:1.2;min-height:1.2em}
  #rhBars .rhbar .rhprev{height:calc(52px * var(--rhz,1))}#rhBars .rhbar.hastab .rhprev{height:calc(38px * var(--rhz,1))}
  #rhBars .rhbar .rhc{height:calc(36px * var(--rhz,1))}#rhBars .rhbar.hastab .rhc,#rhBars .rhbar.main.hastab .rhc{height:calc(32px * var(--rhz,1))}
  .rhtab .rtf.pend{font-size:16px;padding:1px 4px}
  .rhtabfoot.padon{bottom:0;margin:0 -16px;padding:6px 16px 8px}
  .rhtabfoot.padon:not(.warn) .tfrow p{display:none}.rhtabfoot.padon .tfrow:not(:has(:not([hidden]):not(p))){display:none}
  .rhtabfoot.padon .rhpad{margin-top:0}
  .rhpanel .row2 .btn{min-height:40px}}
/* iPad sideways: 0〜24 in one row */
@media (min-width:1000px) and (min-height:501px) and (pointer:coarse){.rhpad .padnums{grid-template-columns:repeat(25,minmax(0,1fr));gap:3px}.rhpad .padnums button{font-size:15px}}
/* ===== home v3: studio ===== */
#home.home{--h-bg:#0e1813;--h-side:#0a120e;--h-card:#15231c;--h-line:#22332a;--h-ink:#e9efe9;--h-mut:#8a9c91;--h-dim:#5d6f64;--h-leaf:#8bc48a;
  position:fixed;inset:0;z-index:15;max-width:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:stretch;gap:0;text-align:left;background:var(--h-bg);color:var(--h-ink);font-family:var(--f-ui);overflow:hidden}
#home .hside{width:248px;flex:none;box-sizing:border-box;padding:26px 16px 18px;display:flex;flex-direction:column;gap:4px;background:var(--h-side);border-right:1px solid #1d2a23;overflow:auto}
#home .hlogo{display:flex;align-items:center;gap:12px;padding:0 10px 24px}
#home .hlogo .tl-icon{width:34px;height:34px;box-shadow:none;border-radius:8px;--icon-bg:#14231b;--leaf:#8bc48a}
#home .hbrand{font:800 24px var(--f-brand);letter-spacing:-.02em;color:var(--h-ink)}
#home .hbrand span{font-weight:300;color:var(--h-leaf)}
#home .hnav{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:#a9b7ae;font:500 14px var(--f-ui);text-align:left;cursor:pointer}
#home .hnav:hover{background:#13201a;color:#fff}
#home .hnav.on{background:#1b2b22;color:#fff}
#home .hnav[aria-expanded="true"]{background:#1b2b22;color:#fff}
#home .hcnt{margin-left:auto;font:500 12px var(--f-brand);color:#6f8277}
#home .hgrp{margin:22px 0 4px;padding:0 12px;font:600 11px var(--f-brand);letter-spacing:.12em;color:var(--h-dim)}
#home .hartists{display:flex;flex-direction:column}
#home .hart{display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:#a9b7ae;font:13px var(--f-ui);text-align:left;cursor:pointer}
#home .hart:hover{background:#13201a;color:#fff}
#home .hart i{width:8px;height:8px;border-radius:50%;flex:none}
#home .hart small{margin-left:auto;font:500 11px var(--f-brand);color:#5f7267}
#home .hacct{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
#home .hsub{margin:0;padding:0 12px;font:12px var(--f-ui);color:var(--h-mut);letter-spacing:0}
#home .hsync::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--h-leaf);margin-right:7px;vertical-align:1px}
#home .acctbtn{width:100%;height:42px;border-radius:12px;background:#121f18;border:1px solid #1f2e26;color:var(--h-ink);justify-content:flex-start;padding:0 14px}
#home .hmain{flex:1;min-width:0;box-sizing:border-box;padding:38px clamp(20px,3.6vw,52px) 30px;display:flex;flex-direction:column;align-items:stretch;gap:28px;overflow:auto}
#home .htop{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
#home .hhello{display:flex;flex-direction:column;gap:6px;margin-right:auto}
#home .hdate{font:500 12.5px var(--f-brand);letter-spacing:.14em;color:#6f8277;text-transform:uppercase}
#home h1{margin:0;font:700 clamp(24px,2.6vw,34px)/1.2 var(--f-ui);letter-spacing:-.01em;color:var(--h-ink)}
#home .hsearch{display:flex;align-items:center;gap:10px;width:min(340px,100%);height:44px;box-sizing:border-box;padding:0 14px;border-radius:12px;background:var(--h-card);border:1px solid var(--h-line);color:#7d8f84}
#home .hsearch input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--h-ink);font:14px var(--f-ui);padding:0}
#home .hsearch:focus-within{border-color:#3d6a52}
#home .hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* 「譜面を作る」: the green card is the box around the icon, ＋新しい曲 and the 譜面を作る button (side by side, never on top of each other);
   the icon corner opens the editor as well (see hWrite in the script) */
#home .hwrite{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:start;column-gap:12px;row-gap:10px;min-height:150px;box-sizing:border-box;padding:16px 16px 22px 24px;border-radius:18px;background:var(--h-leaf);border:1px solid var(--h-leaf);color:#0c1610;box-shadow:0 18px 40px rgba(139,196,138,.16);cursor:pointer;transition:transform .2s ease}
#home .hwrite:hover{transform:translateY(-2px)}
#home .hwrite>.hct{grid-column:1;grid-row:1;display:flex;align-items:center;padding-top:6px;color:#0c1610}
#home .hwrite>.hct svg{width:30px;height:30px}
#home .hwrite>.hcard.prim{grid-column:1/-1;grid-row:2;align-self:end;height:auto;min-height:0;padding:0 8px 0 0;border:0;border-radius:6px;background:transparent;box-shadow:none;transform:none}
#home .hwrite>.hcard.prim:hover{transform:none}
#home .hnew{grid-column:2;grid-row:1;min-height:40px;padding:0 16px;border-radius:999px;border:0;background:#14231b;color:#cfe8cd;font:700 14px var(--f-ui);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap}
#home .hnew:hover{filter:brightness(1.06)}
#home .hcard{height:auto;min-height:150px;box-sizing:border-box;padding:22px 24px;border:1px solid var(--h-line);border-radius:18px;background:var(--h-card);color:var(--h-ink);text-align:left;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .2s ease,border-color .2s}
#home .hcard:hover{transform:translateY(-2px);border-color:#3d6a52}
#home .hcard .hct{display:flex;justify-content:space-between;align-items:center;width:100%;color:var(--h-leaf)}
#home .hcard .hct svg{width:30px;height:30px}
#home .hcard .hen{font:600 13px var(--f-brand);letter-spacing:.16em;text-transform:uppercase;color:var(--h-mut)}
#home .hcard kbd{font:600 12px var(--f-brand);padding:3px 8px;border-radius:6px;background:rgba(12,22,16,.14);border:0;color:inherit}
#home .hcb{display:flex;flex-direction:column;gap:4px}
#home .hcb b{font:700 19px var(--f-ui);word-break:keep-all;overflow-wrap:anywhere}
#home .hcb small{font-size:13px;color:var(--h-mut);line-height:1.5}
#home .hcard.prim{background:var(--h-leaf);border-color:var(--h-leaf);color:#0c1610;box-shadow:0 18px 40px rgba(139,196,138,.16)}
#home .hcard.prim .hct{color:#0c1610}
#home .hcard.prim small{color:#0c1610;opacity:.72}
#home .shopen{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;background:var(--h-card);border:1px solid #3d6a52;max-width:560px}
#home .shopen[hidden]{display:none}
#home .shopen>span{font-size:13px;color:var(--h-mut)}
#home .shopen input{background:#0e1813;color:var(--h-ink);border-color:var(--h-line)}
#home .shopen .chips button{background:#0e1813;color:var(--h-ink);border-color:var(--h-line)}
#home .hrecent{display:flex;flex-direction:column;gap:14px}
#home .hsec{display:flex;align-items:baseline;gap:12px}
#home .hsec h2{margin:0;font:700 18px var(--f-ui);color:var(--h-ink);letter-spacing:0}
#home .hlink{margin-left:auto;border:0;background:transparent;color:var(--h-leaf);font:500 13px var(--f-ui);cursor:pointer;padding:6px 0}
#home .hlink:hover{color:#b6e0b4}
#home .hgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#home .hsong{display:flex;flex-direction:column;gap:11px;border:0;padding:0;background:transparent;color:var(--h-ink);text-align:left;cursor:pointer;min-width:0}
#home .hthumb{height:190px;box-sizing:border-box;padding:14px 14px 0;border-radius:14px;background:#f7f5ef;overflow:hidden;display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:transform .2s ease}
#home .hsong:hover .hthumb{transform:translateY(-3px)}
#home .hthumb .tt{font:700 10.5px var(--f-ui);color:#14231b;text-align:center;padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .hthumb .tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font:700 12px var(--f-chord);color:#14231b;height:14px;white-space:nowrap;overflow:hidden}
#home .hthumb .tl{height:13px;margin-bottom:3px;border-top:1px solid #bdb9ac;border-bottom:1px solid #bdb9ac;background:linear-gradient(#bdb9ac,#bdb9ac) 0 5px/100% 1px no-repeat}
#home .hsong b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .hmeta{display:flex;gap:8px;font:500 12px var(--f-brand);color:#7d8f84}
#home .hmeta span:last-child{margin-left:auto}
#home .hempty{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px;border-radius:16px;border:1px dashed #2c4a3a;color:var(--h-mut);font-size:14px}
#home .hnext{margin-top:auto;display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:16px;background:var(--h-card);border:1px solid var(--h-line);flex-wrap:wrap}
#home .hnext:empty{display:none}
#home .hnext,#home .hrecent,#home .hcards{width:100%;box-sizing:border-box}
#home .hcard::after{content:none}
#home .hcard b{color:var(--h-ink);letter-spacing:0}#home .hcard.prim b{color:#0c1610}
#home .hcal{width:52px;height:52px;flex:none;border-radius:12px;background:#1f3328;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--h-leaf)}
#home .hcal svg{width:24px;height:24px}
#home .hnx{display:flex;flex-direction:column;gap:3px;min-width:0;margin-right:auto}
#home .hnx b{font:700 16px var(--f-ui)}
#home .hnx small{font-size:13px;color:var(--h-mut)}
#home .hnext .hgo{height:44px;padding:0 20px;border-radius:12px;border:0;background:var(--h-ink);color:#0e1813;font:700 14px var(--f-ui);cursor:pointer}
#home .hnext .hgo:hover{background:#fff}
#home button:focus-visible,#home input:focus-visible{outline:2px solid var(--h-leaf);outline-offset:2px}
@media (max-width:1100px){#home .hgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* safe areas (iPhone notch / home bar, iPad status bar) */
#home.home{box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
/* tablet portrait & narrow windows: the side menu becomes one top bar */
@media (max-width:860px){#home.home{flex-direction:column;overflow-y:auto;overflow-x:hidden}
  #home .hside{width:auto;flex:none;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:4px;padding:10px 14px;border-right:0;border-bottom:1px solid #1d2a23;overflow:visible;position:sticky;top:0;z-index:2;background:var(--h-side)}
  #home .hlogo{padding:0 10px 0 2px}#home .hlogo .tl-icon{width:30px;height:30px}#home .hbrand{font-size:21px}
  #home .hnav{width:auto;padding:9px 12px;white-space:nowrap}
  #home .hacct{margin:0 0 0 auto;padding:0;flex-direction:row;align-items:center;gap:8px}
  #home .hsub{display:none}#home .acctbtn{width:auto;height:38px;white-space:nowrap}
  #home .hmain{overflow:visible;padding:26px 22px 32px;gap:22px}
  #home .htop{flex-direction:column;align-items:stretch;gap:14px}
  #home .hsearch{width:100%}
  #home .hcards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  #home .hcard{height:auto;min-height:132px;gap:14px}
  #home .hgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* phone: logo + account on top, big cards do the navigation */
@media (max-width:600px){
  #home .hside{padding:10px 14px}
  #home .hnav{display:none}
  #home .hmain{padding:20px 16px 28px;gap:18px}
  #home .hdate{font-size:11px}
  #home h1{font-size:22px}
  #home .hcards{grid-template-columns:minmax(0,1fr);gap:10px}
  #home .hcard{min-height:0;height:auto;padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;border-radius:16px}
  #home .hcard .hct{width:auto}#home .hcard .hct .hen{display:none}
  #home .hcard .hct svg{width:26px;height:26px}
  #home .hcb b{font-size:16px}#home .hcb small{font-size:12px}
  #home .hwrite{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;column-gap:14px;min-height:0;padding:12px 12px 12px 18px;border-radius:16px}
  #home .hwrite>.hct{grid-column:1;grid-row:1;padding-top:0}#home .hwrite>.hct svg{width:26px;height:26px}
  #home .hwrite>.hcard.prim{grid-column:2;grid-row:1;align-self:stretch;display:flex;align-items:center;padding:0}
  #home .hnew{grid-column:3;grid-row:1;min-height:44px;padding:0 14px}
  #home .hgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #home .hthumb{height:150px;padding:10px 10px 0}
  #home .hsong b{font-size:14px}}
@media (prefers-reduced-motion:reduce){#home .hcard,#home .hthumb{transition:none}}
/* ===== MIDI import (inside the 読み込む panel) ===== */
#impBox.midimode>:not(.imphead):not(#midiBox):not(#impErr){display:none!important}
#impErr{white-space:pre-line}
.clvopt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.clvopt .btn{min-width:150px;height:36px;font-size:14px}
.clvcap{font-size:11.5px;color:var(--muted)}
/* while 読み込む is open, the input palette (and the previous song's check guide) stay out of the way */
body:has(#impBox:not([hidden])) #mcBox{display:none!important}
@media (max-width:980px){body:has(#impBox:not([hidden])) .pal{display:none!important}
  /* (the palette sits at the bottom: toast() puts notices just above it, so they cover neither the keys nor the top bar) */}
/* finger devices: MIDI controls are 44px or more */
@media (pointer:coarse){.midibox select,.midibox input,.midibox .btn,.midibox .seg button,.mlink,.clvopt .btn,.mcbox .btn{min-height:44px}}
.midibox{display:flex;flex-direction:column;gap:12px}
.mtracks{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:6px}
.mtr{display:flex;align-items:center;gap:12px;padding:8px 12px;min-width:0}
.mtr+.mtr{border-top:1px solid var(--rule)}
.mtrn{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.mtrn b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtrn small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtr select{flex:0 0 210px;max-width:none}
.mtr.off .mtrn{opacity:.55}
.mtempty{padding:12px;margin:0}
.madd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mlink{color:var(--accent);font-size:13px;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mset{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}
.mf{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.mf input{width:80px}
.mstart b{font-variant-numeric:tabular-nums;font-size:14px}
.mstb{display:inline-flex;gap:6px}
.mph{margin-bottom:2px}
.mprev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:10px;padding:6px 0 2px}
.mpb{border-left:1.5px solid var(--ink);padding:0 6px;min-width:0}
.mpb:nth-child(4n),.mpb:last-child{border-right:1.5px solid var(--ink)}
.mpb>i{display:block;font:500 10px var(--f-chord),var(--f-ui);font-style:normal;color:var(--muted);height:15px;white-space:nowrap;overflow:hidden}
.mpb>i em{font-style:normal;font-weight:700;color:var(--ink);font-family:var(--f-ui);margin-left:4px}
.mpr{display:grid;align-items:end;min-height:30px}
.midibox .mpk input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--accent)}
.mpk0{display:flex;align-items:baseline;gap:8px;padding:4px 0 0}.mpk0>i{font:600 11px var(--f-ui);font-style:normal;color:var(--muted)}
.mpc{font:600 20px/1.25 var(--f-chord);white-space:nowrap;justify-self:start;padding:0 3px;border-radius:3px}
.mpc.low,.mcbox .mcnow{outline:1.5px dashed #c58a17;outline-offset:1px;background:rgba(214,150,30,.12)}
.mpe{color:var(--muted)}
.mwarn{color:var(--warn);font-size:13px;margin:0}
.mfoot{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end}
.mfoot .small{flex:1 1 240px}
.mfoot .btn{height:40px;padding:0 24px;font-size:14px}
/* chords to check after a MIDI import: dotted frame on the sheet (editor only) and a small guide in the palette */
.mcmark{fill:rgba(214,150,30,.12);stroke:#c58a17;stroke-width:1.3;stroke-dasharray:3 2.5;pointer-events:none}
.clean .mcmark{display:none}
.mcbox{border:1px solid #d9a441;background:rgba(214,150,30,.08);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin:2px 0 8px}
.mchead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.mcq{display:flex;flex-direction:column;gap:6px}
.mcalts{display:flex;flex-wrap:wrap;gap:6px}
.mcscope{align-self:flex-start;max-width:100%;flex-wrap:wrap}.mcscope button{white-space:nowrap;height:auto;min-height:30px;font-size:13px}
@media (pointer:coarse){.mcscope button{min-height:44px}}
.mcalt{font:600 17px var(--f-chord);min-width:56px}
.mcwarn{margin:0;font-size:12px;color:var(--warn)}
.mchint{margin:0}
.mcok{color:var(--accent)}
.mcnow{font:600 15px var(--f-chord);padding:0 3px;border-radius:3px}
@media (max-width:600px){
  .mtracks{border:0;gap:8px}
  .mtr{flex-direction:column;align-items:stretch;gap:8px;border:1px solid var(--rule)!important;border-radius:8px;padding:10px 12px}
  .mtr select{flex:none;width:100%}
  .midibox select,.midibox input,.midibox .btn,.midibox .seg button{min-height:44px;font-size:15px}
  .midibox .seg{display:flex;width:100%}.midibox .seg button{flex:1}
  .mset{flex-direction:column;align-items:stretch;gap:12px}
  .mf{justify-content:space-between}.mf input{width:110px}
  .mstart{display:grid;grid-template-columns:auto 1fr;align-items:center}.mstart b{text-align:right}.mstb{grid-column:1/-1}.mstb .btn{flex:1}
  .mlink{min-height:44px;display:inline-flex;align-items:center}
  .mprev{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mpb:nth-child(2n){border-right:1.5px solid var(--ink)}
  .mfoot .btn{width:100%;height:48px}
  .mcbox{padding:8px 10px}.mcbox .btn{min-height:44px}
  .clvrow{flex-direction:column;align-items:stretch}.clvopt{align-items:stretch}.clvopt .btn{width:100%;min-height:44px}
}
@media (max-width:600px),(hover:none) and (pointer:coarse){.nodrag{display:none!important}}
/* ===== setlist share links ===== */
.shp:empty{display:none}
.shp{display:flex;flex-direction:column;gap:8px;padding-top:12px;margin-top:4px;border-top:1px solid var(--rule)}
.shphead{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.shon{font-size:13px;font-weight:700;color:var(--accent)}
.shp .small{margin:0}
.shwarn{color:var(--warn)!important}
.shurl{width:100%;font:13px/1.4 ui-monospace,Menlo,monospace;background:var(--field)!important;color:var(--ink);height:38px}
.shbtns{display:flex;flex-wrap:wrap;gap:8px}.shbtns .danger{margin-left:auto}
.slm .shp .btn{min-height:40px}
.shsong .slmhead{align-items:center}.shsongh{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.35;word-break:break-word}
.shsongmeta{margin:0}.shsong .shp{border-top:0;padding-top:4px}
.hshr{color:var(--h-leaf,var(--accent));font-weight:700}.lshr{color:var(--accent);font-weight:700}
#vSave.done{border-color:#7fcf9a;color:#9fe0b4}
@media (max-width:600px){.shbtns .btn{flex:1 1 auto;min-height:44px}.shbtns .danger{margin-left:0}.shphead .btn{min-height:44px}}
/* receive screen (opened from a share link; no login) */
.rcv{position:fixed;inset:0;z-index:40;background:var(--bg);color:var(--ink);overflow:auto;-webkit-overflow-scrolling:touch;
  padding:max(18px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.rcvcard{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.rcvtop{display:flex;align-items:center;justify-content:space-between}
.rcvbrand{font:800 22px var(--f-brand);letter-spacing:-.02em}.rcvbrand span{font-weight:300;color:var(--accent)}
.rcvtop .btn{min-height:40px}
.rcvkind{margin:14px 0 0;font:600 12px var(--f-brand);letter-spacing:.12em;color:var(--muted)}
.rcv h1{margin:0;font:700 clamp(22px,5.5vw,30px)/1.25 var(--f-ui);word-break:break-word}
.rcvmeta{margin:0;font-size:13px;color:var(--muted)}
.rcvmsg{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border-left:3px solid #c58a17;background:rgba(214,150,30,.1);border-radius:4px;font-size:13.5px;line-height:1.7}
.rcvmsg.bad{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.rcvmsg p{margin:0}.rcvmsg .btn{min-height:40px}
.rcvlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:rcv}
.rcvlist li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);min-height:48px}
.rcvlist li:not(.rcvskip){counter-increment:rcv}.rcvlist li:not(.rcvskip) .sln::before{content:counter(rcv)}
.rcvlist .sln{min-width:1.6em;text-align:right;font:600 13px var(--f-brand);color:var(--muted)}
.rcvlist .slt{display:flex;flex-direction:column;min-width:0;font-weight:700}
.rcvlist .slt small{font-weight:400;font-size:12px;color:var(--muted)}
.rcvlist .rcvskip{opacity:.7;background:transparent;border-style:dashed}
.rcvact{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.rcvact .btn{min-height:52px;font-size:16px;font-weight:700;border-radius:10px}
.rcvact .btn.done{border-color:var(--accent);color:var(--accent);opacity:1}
.rcv .sloff{margin:0}
.rcvtip{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);padding:10px 12px;background:var(--field);border-radius:6px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rcvtip[hidden]{display:none}.rcvtip p{margin:0}.rcvtip b{color:var(--ink)}
.rcvtip ol{margin:0;padding-left:1.6em}.rcvtip .btn{min-height:44px}
.rcvask .slmhead{align-items:center}.rcvask .shbtns .btn{min-height:44px}.rcvask .shbtns .primary{flex:1 1 auto}
.librcvh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.librcvh .rcvlink{min-height:32px;padding:4px 0;font-size:12px;letter-spacing:0;text-transform:none;font-weight:600}
.rcvfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--rule)}
.rcvlink{border:0;background:none;padding:8px 0;font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;min-height:40px}
.rcvforget{color:var(--muted)}.rcvforget.armed{color:var(--warn);font-weight:700}
/* received setlists on Home / Play */
#home .hrcvsec[hidden],.lgrid[hidden]{display:none}
#home .hrcv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
#home .hrcvc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border:1px solid var(--h-line);border-left:3px solid var(--h-leaf);border-radius:14px;background:var(--h-card);color:var(--h-ink);text-align:left;cursor:pointer;min-width:0}
#home .hrcvc:hover{border-color:#3d6a52}
#home .hrcvc b{font-size:15px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .hrcvc span{font:500 12px var(--f-brand);color:var(--h-mut)}
#home .hrcvc em{font-style:normal;font-size:12px;font-weight:700;color:var(--h-leaf)}
#home .hrcvask{margin:-10px 0 -10px auto;border:0;background:none;padding:10px 0 10px 12px;line-height:1.4;font:600 12.5px var(--f-ui);color:var(--h-mut);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
#home .hrcvask:hover{color:var(--h-leaf)}#home .hrcvask[hidden]{display:none}
@media (max-width:600px){#home .hrcv{grid-template-columns:minmax(0,1fr)}#home .hrcvc{min-height:64px}}

/* account */
.acctbtn{margin-top:4px;align-self:flex-start}
.acctbtn.pro{border-color:var(--accent);color:var(--accent)}
.acct{position:fixed;inset:0;z-index:60;background:rgba(10,10,12,.45);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.acct-card{width:min(420px,100%);background:var(--paper);color:var(--ink);border-radius:8px;padding:20px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px;box-sizing:border-box;max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.acct-card>*{flex-shrink:0}
.acct-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-14px;z-index:1;margin:-20px 0 0;padding:20px 0 6px;background:var(--paper);box-shadow:0 -14px 0 var(--paper)}
.acct-head h2{margin:0;font-family:var(--f-brand);font-style:italic;font-weight:600;font-size:26px}
#acctBody{display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.7}
#acctBody p{margin:0}
.acct-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.acct-f input{height:40px;font-size:16px}
.acct-code{display:flex;flex-direction:column;gap:8px}
.acct-or{text-align:center;font-size:11px;color:var(--muted);letter-spacing:.1em}
.acct-small{font-size:11.5px;color:var(--muted)}
.acct-small a{color:inherit}
.acct-note{padding:10px 12px;border-left:2px solid var(--accent);background:var(--field)}
.acct-who b{font-weight:700}
#acctBody .btn{height:38px}

/* ===== plans ===== */
.acct-plan{height:auto!important;min-height:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 14px;text-align:left}
.acct-plan b{font-weight:700;font-size:14px}
.acct-plan span{font-size:12px;opacity:.8}
.lockbn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border-left:2px solid var(--accent);background:var(--field);font-size:13px}
.lockbn span{flex:1;min-width:200px}
body.lockedit #rows,body.lockedit #pal,body.lockedit .addrow,body.lockedit #head,body.lockedit .bar2{pointer-events:none;opacity:.5}
body.lockedit #rows{opacity:.85}