*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    :root{
      --bg:#1a1410;--gold:#c9952a;--gold-light:#e8b84b;--gold-dim:#7a5a18;
      --text:#e8dcc8;--muted:#8a7a64;--label:#c9b08a;--accent:#c87941;
    }

    body{
      background:var(--bg);
      background-image:
        radial-gradient(ellipse at 50% 0%,rgba(90,60,30,.15) 0%,transparent 65%),
        repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,.01) 3px,rgba(255,255,255,.01) 4px);
      font-family:'Lato',sans-serif;color:var(--text);min-height:100vh;
      display:flex;flex-direction:column;
    }

    /* ══════════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════════ */
    .navbar{
      display:flex;align-items:center;justify-content:space-between;
      padding:0 16px;height:52px;flex-shrink:0;
      background:linear-gradient(180deg,#2a2018 0%,#1e1710 100%);
      border-bottom:1px solid var(--gold-dim);
      box-shadow:0 2px 14px rgba(0,0,0,.55);
      position:sticky;top:0;z-index:100;
    }
    .brand{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;letter-spacing:.15em;color:var(--gold-light);text-shadow:0 0 18px rgba(200,150,60,.35);display:flex;align-items:center;gap:8px;}
    .brand-pip{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);}
    .nav-controls{display:flex;align-items:center;gap:16px;}
    .nav-group{display:flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
    .nav-group label{color:var(--label);}
    #volumeLevel{color:var(--gold);font-weight:700;min-width:30px;font-size:.68rem;}
    .nav-range{-webkit-appearance:none;appearance:none;width:80px;height:3px;border-radius:2px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--gold-dim),var(--gold));}
    .nav-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold-light);border:2px solid #1a1208;cursor:pointer;}
    .nav-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold-light);border:2px solid #1a1208;cursor:pointer;}
    .sw{position:relative;display:inline-block;width:34px;height:18px;}
    .sw input{opacity:0;width:0;height:0;}
    .sw-track{position:absolute;inset:0;cursor:pointer;background:#3a2e20;border-radius:18px;border:1px solid var(--gold-dim);transition:.3s;}
    .sw-track::before{content:'';position:absolute;width:12px;height:12px;left:2px;bottom:2px;background:var(--muted);border-radius:50%;transition:.3s;}
    input:checked+.sw-track{background:var(--gold-dim);border-color:var(--gold);}
    input:checked+.sw-track::before{transform:translateX(16px);background:var(--gold-light);}
    .nav-btn{background:none;border:1px solid var(--gold-dim);color:var(--label);padding:4px 12px;border-radius:4px;cursor:pointer;font:700 .68rem/1 'Lato',sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:.18s;white-space:nowrap;}
    .nav-btn:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(200,150,60,.07);}

    /* hide vol+reverb on very small screens — they move to settings */
    @media(max-width:480px){
      .nav-group{display:none;}
    }

    /* ══════════════════════════════════════════════
       PAGE
    ══════════════════════════════════════════════ */
    .page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 12px;gap:0;}

    /* ── Load screen ── */
    #loadScreen{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
    .load-title{font-family:'Cinzel',serif;font-size:2rem;font-weight:700;color:var(--gold-light);letter-spacing:.15em;text-shadow:0 0 36px rgba(200,150,60,.28);}
    .load-sub{font-size:.85rem;color:var(--muted);letter-spacing:.07em;}
    .load-btn{margin-top:8px;padding:15px 48px;background:linear-gradient(135deg,var(--gold) 0%,var(--accent) 100%);border:none;border-radius:7px;font:700 .95rem/1 'Cinzel',serif;letter-spacing:.14em;color:#1a0e04;cursor:pointer;box-shadow:0 4px 20px rgba(200,150,60,.3),inset 0 1px 0 rgba(255,255,255,.18);transition:.2s;}
    .load-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,150,60,.45);}

    /* ══════════════════════════════════════════════
       NOTE HELPER PANEL
    ══════════════════════════════════════════════ */
    #noteHelper{display:none;width:100%;max-width:1260px;margin-bottom:12px;}
    .helper-bar{background:linear-gradient(160deg,#2a2018 0%,#1e1610 100%);border:1px solid rgba(200,150,60,.15);border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.5);}
    .helper-head{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid rgba(200,150,60,.1);background:rgba(0,0,0,.18);flex-wrap:wrap;}
    .helper-head-label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;flex-shrink:0;}
    .helper-song-select{flex:1;min-width:140px;background:#18120a;border:1px solid var(--gold-dim);color:var(--label);padding:4px 8px;border-radius:5px;font:600 .78rem/1.3 'Lato',sans-serif;outline:none;cursor:pointer;}
    .helper-song-select option{background:#18120a;}
    .helper-btns{display:flex;gap:5px;flex-shrink:0;}
    .helper-toggle-btn,.helper-reset-btn{background:none;border:1px solid rgba(200,150,60,.2);color:var(--muted);padding:3px 9px;border-radius:4px;cursor:pointer;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;transition:.15s;}
    .helper-toggle-btn:hover,.helper-reset-btn:hover{color:var(--gold-light);border-color:var(--gold);}

    .helper-notes{padding:12px 16px 14px;max-height:150px;overflow-y:auto;transition:max-height .3s ease;}
    .helper-notes.collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
    .helper-notes::-webkit-scrollbar{width:3px;}
    .helper-notes::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px;}

    .helper-lines{display:flex;flex-direction:column;gap:6px;}
    .helper-line{display:flex;flex-wrap:wrap;gap:3px;align-items:baseline;}

    .note-token{
      display:inline-block;font:700 .92rem/1 'Lato',monospace;
      color:var(--text);background:rgba(200,150,60,.07);
      border:1px solid rgba(200,150,60,.13);border-radius:5px;
      padding:3px 7px;letter-spacing:.04em;cursor:default;
      transition:background .08s,color .08s,border-color .08s,transform .08s,box-shadow .08s;
      user-select:none;
    }
    .note-token.next{border-color:rgba(200,150,60,.4);color:var(--gold-light);background:rgba(200,150,60,.12);}
    .note-token.lit{background:rgba(200,150,60,.38);border-color:var(--gold-light);color:#fff8e8;box-shadow:0 0 12px rgba(200,150,60,.5);transform:translateY(-2px);}
    .note-token.played{color:var(--muted);background:rgba(255,255,255,.03);border-color:rgba(200,150,60,.05);}
    .note-token.annotation{color:var(--muted);font-style:italic;font-weight:400;background:transparent;border-color:transparent;font-size:.78rem;}

    /* ══════════════════════════════════════════════
       MAIN INSTRUMENT
    ══════════════════════════════════════════════ */
    #mainScreen{display:none;width:100%;max-width:1260px;}

    /* Portrait mobile: hide the main piano cabinet, show OSK instead
       Landscape mobile: show the piano, hide OSK grid */
    @media(max-width:600px) and (orientation:portrait){
      .cabinet{ display:none; }
      #noteHelper{ margin-bottom:10px; }
    }
    @media(max-width:900px) and (orientation:landscape){
      #mobileOskPanel{ display:none !important; }
      #landscapeHint{ display:none !important; }
    }

    .cabinet{
      background:linear-gradient(175deg,#3e2e1e 0%,#2a1e12 45%,#1e150e 100%);
      border-radius:16px 16px 10px 10px;
      padding:22px 28px 26px;
      box-shadow:0 24px 60px rgba(0,0,0,.85),0 0 0 1px rgba(200,150,60,.14),inset 0 1px 0 rgba(200,150,60,.2),inset 0 -1px 0 rgba(0,0,0,.5);
      position:relative;overflow:hidden;
    }
    .cabinet::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(91deg,transparent,transparent 17px,rgba(0,0,0,.055) 17px,rgba(0,0,0,.055) 18px);}
    .cabinet::after{content:'';position:absolute;top:0;left:28px;right:28px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-dim),var(--gold),var(--gold-dim),transparent);}

    .nameplate{text-align:center;margin-bottom:18px;}
    .nameplate h1{font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;letter-spacing:.35em;color:var(--gold-light);text-shadow:0 0 14px rgba(200,150,60,.35);}
    .nameplate-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px;}
    .nameplate-rule hr{flex:0 0 50px;border:none;border-top:1px solid var(--gold-dim);}
    .nameplate-rule span{font-size:.58rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}

    /* ── Stage ── */
    .stage{
      background:linear-gradient(180deg,#0d0a07 0%,#121008 100%);
      border-radius:10px 10px 5px 5px;
      padding:20px 20px 0;
      border:1px solid rgba(0,0,0,.7);
      border-top:1px solid rgba(200,150,60,.1);
      box-shadow:inset 0 6px 16px rgba(0,0,0,.75);
      position:relative;overflow:hidden;
    }
    .stage::before{content:'';position:absolute;top:0;left:0;right:0;height:20px;background:linear-gradient(180deg,rgba(200,150,60,.05),transparent);pointer-events:none;}

    /* ══════════════════════════════════════════════
       KEYS — DESKTOP (vertical, normal)
    ══════════════════════════════════════════════ */
    .keys-row{
      display:flex;align-items:flex-start;justify-content:center;
      position:relative;height:272px;
      user-select:none;-webkit-user-select:none;
    }

    .wk{
      position:relative;width:76px;height:260px;flex-shrink:0;
      background:linear-gradient(180deg,#f5efe3 0%,#efe8d6 14%,#eae2c8 50%,#dfd7b9 79%,#d0c4a4 100%);
      border:1px solid #9a8a6a;border-top:none;
      border-radius:0 0 10px 10px;cursor:pointer;z-index:1;
      box-shadow:
        inset -1px 0 0 rgba(255,255,255,.55),
        inset 1px 0 0 rgba(0,0,0,.07),
        0 8px 0 #9a8060,
        0 10px 16px rgba(0,0,0,.55),
        0 18px 28px rgba(0,0,0,.25);
      transform-origin:top center;
      transition:transform .06s ease,box-shadow .06s ease,background .06s ease;
      display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
      padding-bottom:16px;
    }
    .wk:hover{background:linear-gradient(180deg,#ede7d7 0%,#e8e1c7 28%,#dad2b4 68%,#cbbfa0 100%);}
    .wk:active,.wk.pressed{
      transform:translateY(8px);
      background:linear-gradient(180deg,#cfc49e 0%,#bfb48e 28%,#afa47e 68%,#9f946e 100%);
      box-shadow:inset -1px 0 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(0,0,0,.1),0 1px 0 #7a6040,0 2px 6px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.25);
    }
    .wk .kb{font:700 12px/1 'Lato',monospace;color:rgba(70,55,35,.65);letter-spacing:.04em;}
    .wk .nt{font:400 10px/1 'Lato',sans-serif;color:rgba(80,60,40,.45);margin-top:4px;}

    .bk{
      position:absolute;top:0;z-index:3;
      width:46px;height:164px;
      background:linear-gradient(180deg,#2e2618 0%,#201a0e 25%,#161008 60%,#0e0c06 100%);
      border-radius:0 0 8px 8px;
      border:1px solid #0a0806;border-top:2px solid #403420;
      cursor:pointer;
      box-shadow:inset 1px 0 0 rgba(255,255,255,.055),inset -1px 0 0 rgba(255,255,255,.02),0 8px 0 #0a0806,3px 10px 18px rgba(0,0,0,.9),1px 14px 24px rgba(0,0,0,.6);
      transform-origin:top center;
      transition:transform .06s ease,box-shadow .06s ease,background .06s ease;
      display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;
    }
    .bk:hover{background:linear-gradient(180deg,#3a2e20 0%,#2c2416 25%,#201a0e 60%,#141008 100%);}
    .bk:active,.bk.pressed{
      transform:translateY(6px);
      background:linear-gradient(180deg,#201a0e 0%,#140e06 100%);
      box-shadow:inset 1px 0 0 rgba(255,255,255,.03),0 1px 0 #0a0806,1px 2px 6px rgba(0,0,0,.95),1px 4px 10px rgba(0,0,0,.6);
    }
    .bk .kb{font:700 10px/1 'Lato',monospace;color:rgba(200,160,80,.5);}

    /* ── Legend ── */
    .key-legend{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;}
    .kchip{font-size:.6rem;letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.025);border:1px solid rgba(200,150,60,.09);border-radius:3px;padding:2px 7px;}
    .kchip strong{color:var(--gold-dim);}
    .kdot{color:var(--gold-dim);font-size:.4rem;}

    /* ══════════════════════════════════════════════
       MOBILE KEYS — horizontal layout
       On mobile (≤600px) the keys rotate 90° using
       CSS transforms, making them horizontal piano
       style that scrolls left-right.
    ══════════════════════════════════════════════ */
    @media(max-width:600px){

      .nameplate{margin-bottom:12px;}
      .nameplate h1{font-size:.82rem;letter-spacing:.28em;}
      .stage{padding:14px 14px 0;}

      /* The outer container becomes a horizontal scroll area */
      .keys-outer{
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        padding-bottom:8px;
      }
      .keys-outer::-webkit-scrollbar{height:3px;}
      .keys-outer::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px;}

      /* keys-row laid out horizontally */
      .keys-row{
        height:auto;
        width:max-content;
        display:flex;
        align-items:flex-end;
        position:relative;
        padding-top:70px; /* room for black keys above */
        padding-bottom:0;
      }

      /* White keys — short horizontal bars */
      .wk{
        width:44px;
        height:110px;
        flex-shrink:0;
        border-radius:0 8px 8px 0; /* round right end */
        border:1px solid #9a8a6a;
        border-left:none;
        /* shadow on bottom to simulate depth */
        box-shadow:
          0 0 0 rgba(255,255,255,0),
          inset 0 -1px 0 rgba(0,0,0,.07),
          inset 0 1px 0 rgba(255,255,255,.55),
          8px 0 0 #9a8060,
          10px 0 16px rgba(0,0,0,.55);
        transform-origin:left center;
        transition:transform .06s ease,box-shadow .06s ease,background .06s ease;
        /* label at right end instead of bottom */
        padding-bottom:0;
        padding-right:8px;
        justify-content:flex-end;
        align-items:center;
        flex-direction:row;
      }
      .wk:active,.wk.pressed{
        transform:translateX(8px);
        box-shadow:inset 0 -1px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.3),1px 0 0 #7a6040,2px 0 6px rgba(0,0,0,.55);
      }
      .wk .kb{font-size:10px;margin-right:0;writing-mode:horizontal-tb;}
      .wk .nt{font-size:8px;margin-top:0;margin-left:3px;}

      /* Black keys — shorter, positioned above */
      .bk{
        position:absolute;
        top:0;
        left:auto; /* JS sets this */
        width:80px;  /* depth of black key */
        height:28px; /* width of black key */
        border-radius:0 6px 6px 0;
        border:1px solid #0a0806;
        border-left:2px solid #403420;
        /* JS sets left; we need top offset per key */
        box-shadow:0 8px 0 #0a0806,10px 3px 18px rgba(0,0,0,.9),14px 1px 24px rgba(0,0,0,.6);
        transform-origin:left center;
        transition:transform .06s ease,box-shadow .06s ease,background .06s ease;
        padding-bottom:0;
        padding-right:8px;
        justify-content:flex-end;
        align-items:center;
      }
      .bk:active,.bk.pressed{
        transform:translateX(6px);
        box-shadow:1px 0 0 #0a0806,2px 1px 6px rgba(0,0,0,.95);
      }
      .bk .kb{font-size:9px;color:rgba(200,160,80,.5);writing-mode:horizontal-tb;}

      /* hide legend on mobile */
      .key-legend{display:none;}
      .cabinet{padding:16px 14px 18px;}
    }

    /* ══════════════════════════════════════════════
       DESKTOP BREAKPOINTS (unchanged from before)
    ══════════════════════════════════════════════ */
    @media(min-width:601px) and (max-width:1100px){.wk{width:64px;height:230px;} .bk{width:40px;height:140px;} .keys-row{height:242px;}}
    @media(min-width:601px) and (max-width:880px){.wk{width:50px;height:195px;} .bk{width:31px;height:118px;} .keys-row{height:207px;} .cabinet{padding:18px 16px 22px;}}
    @media(min-width:601px) and (max-width:700px){.wk{width:40px;height:170px;} .bk{width:26px;height:102px;} .keys-row{height:182px;}}

    /* ══════════════════════════════════════════════
       SETTINGS MODAL
    ══════════════════════════════════════════════ */
    .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(5px);z-index:200;align-items:flex-start;justify-content:center;padding:28px 12px;overflow-y:auto;}
    .overlay.open{display:flex;}
    .modal{background:linear-gradient(160deg,#322818 0%,#201810 100%);border:1px solid rgba(200,150,60,.2);border-radius:14px;padding:24px 22px;width:100%;max-width:540px;box-shadow:0 24px 64px rgba(0,0,0,.85);}
    .modal-title{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--gold-light);letter-spacing:.14em;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(200,150,60,.15);}
    .modal-section{margin-bottom:18px;}
    .modal-section-title{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-weight:700;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid rgba(200,150,60,.08);}
    .mctrl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
    .mctrl-label{font-size:.8rem;color:var(--label);min-width:75px;}
    .mctrl-right{display:flex;align-items:center;gap:7px;}
    .mctrl-val{font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;color:var(--gold-light);min-width:48px;text-align:center;text-shadow:0 0 10px rgba(200,150,60,.25);}
    .mctrl-sub{font-size:.65rem;color:var(--muted);text-align:center;min-width:48px;}
    .mcbtn{width:32px;height:32px;flex-shrink:0;border-radius:6px;cursor:pointer;background:linear-gradient(155deg,#3c3020 0%,#2c2218 100%);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:.14s;-webkit-tap-highlight-color:transparent;}
    .mcbtn:hover{border-color:var(--gold);background:linear-gradient(155deg,#4c4028 0%,#3c3020 100%);}
    .mcbtn:active{transform:scale(.9);}
    .modal-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--gold-dim),var(--gold));margin:4px 0;}
    .modal-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold-light);border:2px solid #1a1208;cursor:pointer;}
    .modal-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold-light);border:2px solid #1a1208;cursor:pointer;}
    .modal-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
    .midi-status{font-size:.7rem;color:var(--muted);margin-bottom:6px;line-height:1.5;}
    .midi-sel{width:100%;background:#18120a;border:1px solid var(--gold-dim);color:var(--label);padding:5px 8px;border-radius:5px;font:400 .7rem/1.4 'Lato',sans-serif;outline:none;}
    .midi-ref{background:none;border:1px solid var(--gold-dim);color:var(--muted);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:.66rem;margin-top:6px;width:100%;transition:.15s;}
    .midi-ref:hover{color:var(--gold-light);border-color:var(--gold);}
    .modal-divider{border:none;border-top:1px solid rgba(200,150,60,.1);margin:16px 0;}

    /* song manager */
    .song-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
    .song-item{background:rgba(0,0,0,.25);border:1px solid rgba(200,150,60,.1);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:6px;}
    .song-item-head{display:flex;align-items:center;gap:7px;}
    .song-item-name{flex:1;background:transparent;border:none;border-bottom:1px solid rgba(200,150,60,.2);color:var(--gold-light);font:700 .85rem/1.4 'Lato',sans-serif;outline:none;padding:2px 4px;}
    .song-item-name:focus{border-bottom-color:var(--gold);}
    .song-del-btn{background:none;border:1px solid rgba(200,80,80,.3);color:rgba(200,100,100,.6);width:26px;height:26px;border-radius:4px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;}
    .song-del-btn:hover{border-color:#c04040;color:#e06060;}
    .song-item-notes{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(200,150,60,.12);border-radius:5px;color:var(--text);font:400 .78rem/1.6 'Courier New',monospace;padding:7px 9px;outline:none;resize:vertical;min-height:72px;}
    .song-item-notes:focus{border-color:var(--gold-dim);}
    .song-add-btn{background:none;border:1px dashed var(--gold-dim);color:var(--muted);padding:7px;border-radius:7px;cursor:pointer;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;width:100%;transition:.15s;}
    .song-add-btn:hover{color:var(--gold-light);border-color:var(--gold);}
    .songs-save-btn{width:100%;padding:9px;border:none;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#4a6a3a 0%,#2e4a22 100%);color:#c8e8b0;font:700 .75rem/1 'Lato',sans-serif;letter-spacing:.09em;text-transform:uppercase;margin-top:7px;transition:.18s;}
    .songs-save-btn:hover{filter:brightness(1.15);}
    .songs-export-row{display:flex;gap:7px;margin-top:5px;}
    .songs-export-btn{flex:1;padding:6px;border:1px solid var(--gold-dim);border-radius:5px;background:none;color:var(--muted);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.15s;}
    .songs-export-btn:hover{color:var(--gold-light);border-color:var(--gold);}
    .modal-close{display:block;width:100%;margin-top:6px;padding:12px;border:none;border-radius:7px;cursor:pointer;background:linear-gradient(135deg,var(--gold) 0%,var(--accent) 100%);font:700 .85rem/1 'Cinzel',serif;letter-spacing:.13em;color:#1a0e04;transition:.2s;text-align:center;}
    .modal-close:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,150,60,.35);}

    /* ══════════════════════════════════════════════
       MOBILE OSK — proper piano keyboard in cabinet
       Portrait mobile  → shown instead of main harmonium, centered
       Landscape mobile → hidden (main piano usable)
       Desktop          → always hidden
    ══════════════════════════════════════════════ */

    /* Page layout in portrait mobile: fill height */
    @media(max-width:600px) and (orientation:portrait){
      .page{ justify-content:flex-start; padding:12px 10px; }
    }

    #mobileOskPanel{
      display:none;
      width:100%; max-width:480px;
      margin:0 auto;
      flex:1;
      flex-direction:column;
    }

    /* Cabinet shell */
    .mob-cabinet{
      background:linear-gradient(175deg,#3e2e1e 0%,#2a1e12 45%,#1e150e 100%);
      border-radius:16px 16px 10px 10px;
      padding:14px 14px 0;
      box-shadow:
        0 18px 48px rgba(0,0,0,.85),
        0 0 0 1px rgba(200,150,60,.14),
        inset 0 1px 0 rgba(200,150,60,.2),
        inset 0 -1px 0 rgba(0,0,0,.5);
      position:relative;overflow:hidden;
      display:flex;flex-direction:column;
    }
    .mob-cabinet::before{
      content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
      background:repeating-linear-gradient(91deg,transparent,transparent 17px,rgba(0,0,0,.055) 17px,rgba(0,0,0,.055) 18px);
    }
    .mob-cabinet::after{
      content:'';position:absolute;top:0;left:14px;right:14px;height:2px;
      background:linear-gradient(90deg,transparent,var(--gold-dim),var(--gold),var(--gold-dim),transparent);
    }

    /* Nameplate */
    .mob-nameplate{text-align:center;margin-bottom:10px;flex-shrink:0;}
    .mob-nameplate h2{font-family:'Cinzel',serif;font-size:.8rem;font-weight:700;letter-spacing:.3em;color:var(--gold-light);text-shadow:0 0 14px rgba(200,150,60,.35);}
    .mob-nameplate-rule{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;}
    .mob-nameplate-rule hr{flex:0 0 32px;border:none;border-top:1px solid var(--gold-dim);}
    .mob-nameplate-rule span{font-size:.5rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;}

    /* Stage */
    .mob-stage{
      background:linear-gradient(180deg,#0d0a07 0%,#121008 100%);
      border-radius:8px 8px 0 0;
      padding:12px 10px 0;
      border:1px solid rgba(0,0,0,.7);
      border-top:1px solid rgba(200,150,60,.1);
      border-bottom:none;
      box-shadow:inset 0 5px 14px rgba(0,0,0,.75);
      position:relative;overflow:visible;
    }
    .mob-stage::before{
      content:'';position:absolute;top:0;left:0;right:0;height:16px;
      background:linear-gradient(180deg,rgba(200,150,60,.05),transparent);pointer-events:none;
    }

    /* Keys container — JS sets height; position:relative for black key absolute placement */
    .mob-keys-wrap{
      position:relative;
      display:flex;
      width:100%;
      user-select:none;-webkit-user-select:none;
      touch-action:none;
    }

    /* White  keys */
    .mob-wk{
      flex:1;
      background:linear-gradient(180deg,#f4ede1 0%,#efe8d5 14%,#e9e1c6 52%,#ddd5b6 80%,#cec2a0 100%);
      border:1px solid #9a8a6a;border-top:none;
      border-radius:0 0 7px 7px;
      cursor:pointer;z-index:1;
      box-shadow:
        inset -1px 0 0 rgba(255,255,255,.5),
        inset 1px 0 0 rgba(0,0,0,.06),
        0 6px 0 #9a8060,
        0 8px 12px rgba(0,0,0,.5),
        0 14px 22px rgba(0,0,0,.22);
      transform-origin:top center;
      transition:transform .06s ease,box-shadow .06s ease,background .06s ease;
      display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
      padding-bottom:9px;
      -webkit-tap-highlight-color:transparent;touch-action:none;
    }
    .mob-wk.oskpressed{
      transform:translateY(6px);
      background:linear-gradient(180deg,#cec39d 0%,#beb38d 28%,#aea37d 68%,#9e936d 100%);
      box-shadow:inset -1px 0 0 rgba(255,255,255,.25),inset 1px 0 0 rgba(0,0,0,.1),0 1px 0 #7a6040,0 2px 5px rgba(0,0,0,.55);
    }
    .mob-wk .mob-kb{font:700 9px/1 'Lato',monospace;color:rgba(70,55,35,.6);}
    .mob-wk .mob-nt{font:400 7px/1 'Lato',sans-serif;color:rgba(80,60,40,.4);margin-top:2px;}

    /* Black keys — JS sets left/width/height */
    .mob-bk{
      position:absolute;top:0;z-index:3;
      background:linear-gradient(180deg,#2e2618 0%,#201a0e 25%,#141008 65%,#0c0a06 100%);
      border-radius:0 0 5px 5px;
      border:1px solid #0a0806;border-top:2px solid #3c3020;
      cursor:pointer;
      box-shadow:
        inset 1px 0 0 rgba(255,255,255,.05),
        inset -1px 0 0 rgba(255,255,255,.02),
        0 5px 0 #0a0806,
        2px 7px 12px rgba(0,0,0,.88),
        1px 9px 16px rgba(0,0,0,.55);
      transform-origin:top center;
      transition:transform .06s ease,box-shadow .06s ease,background .06s ease;
      display:flex;align-items:flex-end;justify-content:center;
      padding-bottom:6px;
      -webkit-tap-highlight-color:transparent;touch-action:none;
    }
    .mob-bk.oskpressed{
      transform:translateY(5px);
      background:linear-gradient(180deg,#1c1610 0%,#120e08 100%);
      box-shadow:0 1px 0 #0a0806,1px 2px 5px rgba(0,0,0,.95);
    }
    .mob-bk .mob-kb{font:700 8px/1 'Lato',monospace;color:rgba(200,160,80,.5);}

    #landscapeHint{
      display:none;width:100%;max-width:1260px;margin-top:10px;
      text-align:center;font-size:.68rem;color:var(--muted);letter-spacing:.07em;
      padding:8px 14px;background:rgba(200,150,60,.05);
      border:1px solid rgba(200,150,60,.1);border-radius:8px;
    }