:root{--bg:#fffaf2;--fg:#221f1a;--muted:#7a7265;--accent:#b4452a;--accent-fg:#fff;--chord:#b4452a;--bar:#f6efe3;--border:#e6dccb;--item:#fff6e8;--danger:#a3221b;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}@media (prefers-color-scheme:dark){:root{--bg:#1b1a18;--fg:#f1ece3;--muted:#a39b8d;--accent:#e0714f;--accent-fg:#1b1a18;--chord:#f0a080;--bar:#24221f;--border:#3a362f;--item:#2a2723;--danger:#ff7b6b}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;overscroll-behavior:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--accent)}button,.button{font:inherit;background:var(--item);color:var(--fg);cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:0 14px;text-decoration:none;display:inline-flex}button:disabled{opacity:.5;cursor:default}.primary{background:var(--accent);color:var(--accent-fg);font-weight:600}.secondary{border:1px solid var(--border);background:0 0}.icon{background:0 0;width:44px;min-width:44px;padding:0;font-size:22px}.btn-text{color:var(--accent);background:0 0;padding:0 8px;font-weight:600}.danger{color:var(--danger)}.muted{color:var(--muted)}.fine{color:var(--muted);font-size:13px}#app{grid-template-rows:1fr;grid-template-columns:1fr;height:100dvh;display:grid;overflow:hidden}#sidebar,#main{min-height:0;overflow:hidden}body[data-view=library] #main,body:not([data-view=library]) #sidebar,.wide-only{display:none}@media (width>=900px){#app{grid-template-columns:340px 1fr}body:not(.single) #sidebar{border-right:1px solid var(--border);display:block}body[data-view=library] #main{display:block}body.single #app{grid-template-columns:1fr}.wide-only{display:flex}.play .back{visibility:hidden}}.bar{background:var(--bar);flex:none;align-items:center;gap:8px;padding:8px 10px;display:flex}.bar.top{padding-top:calc(8px + var(--safe-top));border-bottom:1px solid var(--border)}.bar.bottom{padding-bottom:calc(8px + var(--safe-bottom));border-top:1px solid var(--border)}.bar .title{flex:1;min-width:0}.bar .title .t{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.bar .title .a{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.brand{flex:1;margin:0;font-size:18px}.empty{color:var(--muted);text-align:center;justify-content:center;align-items:center;height:100%;padding:32px 20px}.notice{background:var(--item);color:var(--muted);border-radius:8px;margin:8px 12px;padding:8px 12px;font-size:14px}.notice.slim{margin:6px 12px 0;padding:6px 10px}.tabs{border-bottom:1px solid var(--border);gap:4px;padding:0 12px;display:flex}.tabs a{text-align:center;color:var(--muted);border-bottom:2px solid #0000;flex:1;padding:10px 4px;font-weight:600;text-decoration:none}.tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}.button.small{min-height:36px;padding:0 12px;font-size:15px}.library{flex-direction:column;height:100%;display:flex;position:relative}.search{padding:8px 12px}.search input{width:100%;font:inherit;border:1px solid var(--border);background:var(--item);color:var(--fg);border-radius:10px;padding:10px 12px;font-size:17px}.song-list{flex:1;margin:0;padding:0 0 96px;list-style:none;overflow-y:auto}.song-item{color:inherit;border-bottom:1px solid var(--border);padding:12px 16px;text-decoration:none;display:block}.song-item .t{font-size:18px;display:block}.song-item .d{color:var(--muted);margin-top:2px;font-size:13px;display:block}.song-item.active{background:var(--item)}.song-list .empty{height:auto}.fab{right:16px;bottom:calc(16px + var(--safe-bottom));background:var(--accent);width:56px;height:56px;color:var(--accent-fg);border-radius:50%;justify-content:center;align-items:center;font-size:32px;text-decoration:none;display:flex;position:absolute;box-shadow:0 4px 12px #00000040}.play{flex-direction:column;height:100%;display:flex}.sheet-scroll{-webkit-overflow-scrolling:touch;flex:1;padding:12px 12px 30vh;overflow-y:auto}.play.immersive .bar{display:none}.play .transpose{align-items:center;gap:2px;display:flex}.play .transpose .icon{background:var(--item)}.play .offset{text-align:center;font-variant-numeric:tabular-nums;min-width:36px;font-weight:600}.play .offset.changed{color:var(--accent)}.play .play{flex:1;font-size:18px}.star{color:var(--accent);background:0 0;padding:0 8px;font-size:18px;font-weight:600}.profile{flex-direction:column;height:100%;display:flex}.profile .song-list{padding-bottom:24px}.sheet{line-height:1.25}.line{flex-wrap:wrap;align-items:flex-end;margin:0;display:flex}.line.pair{margin-bottom:.3em}.w{white-space:pre;display:inline-flex}.c{flex-direction:column;display:inline-flex}.ch{color:var(--chord);min-height:1.25em;padding-right:.35em;font-size:.85em;font-weight:700;line-height:1.25}.ly{line-height:1.3}.line.chords{color:var(--chord);margin:.15em 0 .3em;font-weight:700}.line.chords .w{white-space:pre}.line.text{white-space:pre-wrap;margin:.1em 0;display:block}.line.section{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.1em 0 .35em;font-size:.7em;font-weight:700}.line.blank{width:100%;height:.9em}.edit{flex-direction:column;height:100%;display:flex}.fields{flex:1;padding:12px;overflow-y:auto}.fields label{color:var(--muted);margin-bottom:12px;font-size:14px;display:block}.fields input,.fields textarea{width:100%;font:inherit;border:1px solid var(--border);background:var(--item);color:var(--fg);border-radius:10px;margin-top:4px;padding:10px 12px;font-size:17px;display:block}.fields textarea{resize:none;white-space:pre;min-height:240px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;line-height:1.4;overflow-x:auto}.fields .row{margin-bottom:12px}.error{color:var(--danger);margin:8px 0}.edit .bar.bottom .primary{flex:1}.login,.welcome{max-width:420px;padding:calc(40px + var(--safe-top)) 24px 40px;text-align:center;flex-direction:column;gap:14px;height:100%;margin:0 auto;display:flex;overflow-y:auto}.login img{border-radius:22px;margin:0 auto}.login h1,.welcome h1{margin:0}.login .button{min-height:48px;font-size:17px}.welcome{text-align:left}.welcome label{color:var(--muted);font-size:14px}.welcome input{width:100%;font:inherit;border:1px solid var(--border);background:var(--item);color:var(--fg);border-radius:10px;margin-top:4px;padding:10px 12px;font-size:18px;display:block}.hint{color:var(--muted);font-size:14px}.hint.ok{color:#2f7d32}.hint.bad{color:var(--danger)}.modal{z-index:10;background:#00000073;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.panel{background:var(--bg);width:100%;max-width:480px;padding:12px 12px calc(12px + var(--safe-bottom));border-radius:16px 16px 0 0;flex-direction:column;gap:8px;max-height:88dvh;display:flex;overflow-y:auto}@media (width>=900px){.modal{align-items:center}.panel{border-radius:16px}}.item{text-align:left;justify-content:flex-start;width:100%;min-height:48px;font-size:17px}.item.small{justify-content:center;width:auto;min-width:56px}.row{align-items:center;gap:8px;display:flex}.row .label{flex:1}.menu a.item{color:inherit}.choice{align-items:center;gap:12px;min-height:56px;line-height:1.25;display:flex}.choice.active{outline:2px solid var(--accent)}.choice .mark{color:var(--accent);font-size:18px}.share h2{margin:4px 0 8px;font-size:18px}.qr{color:#000;background:#fff;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:14px;display:flex}.qr canvas{width:288px;max-width:100%;height:288px}.qr .url{word-break:break-all;text-align:center;color:#333;font-size:13px}.account .who{padding:8px 4px}.toast{left:50%;bottom:calc(80px + var(--safe-bottom));background:var(--fg);color:var(--bg);z-index:20;text-align:center;border-radius:10px;max-width:90vw;padding:10px 16px;font-size:15px;position:fixed;transform:translate(-50%)}