:root{

      --uiScale: 0.78;

      --font: calc(14px * var(--uiScale));
      --fontSmall: calc(13px * var(--uiScale));
      --pad: calc(10px * var(--uiScale));
      --gap: calc(10px * var(--uiScale));

      --btnPadY: calc(8px * var(--uiScale));
      --btnPadX: calc(10px * var(--uiScale));

      --noteBtn: calc(48px * var(--uiScale));
      --noteIcon: calc(32px * var(--uiScale));
    }

    body{
      margin:0;
      font-family: system-ui, Arial, sans-serif;
      background:#f6f6f6;
      color:#111;
      font-size: var(--font);
    }

    header{
      display:flex;
      flex-wrap:wrap;
      gap: calc(8px * var(--uiScale));
      align-items:center;
      justify-content: center;
      padding: calc(10px * var(--uiScale));
      background:#fff;
      border-bottom:1px solid #ddd;
      position: static;
    }

    button, input[type="number"], input[type="text"]{
      padding: var(--btnPadY) var(--btnPadX);
      border:1px solid #ccc;
      border-radius: 12px;
      background:#fff;
      font-size: var(--font);
      line-height: 1.1;
    }

    button{ cursor:pointer; }
    button.primary{ background:#111; color:#fff; border-color:#111; }
    button:disabled{ opacity:.55; cursor:not-allowed; }

    .grow{ flex:1 1 280px; min-width: 240px; }

    #wrap{
      width: 96%;
      max-width: 1600px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      gap: var(--gap);
      padding: var(--pad);
      align-items: flex-start;
    }


    #leftCard{
      flex: 0 1 auto;
      min-width: 0;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
    }

    @media (max-width: 980px){
      #wrap{
        width: 98%;
        flex-direction: column;
      }
    }
    @media (max-width: 600px){
      #wrap{ width: 100%; }
    }

    .card{
      background:#fff;
      border:1px solid #ddd;
      border-radius: 16px;
      padding: var(--pad);
    }


    #cv{
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 62vh;    
      display:block;
      border:1px solid #ddd;
      border-radius: 16px;
      background:#fff;
      touch-action: none;
      margin: 0 auto;
    }

.viewbar{
      margin-top: 0;
      display:flex;
      flex-direction:column;
      gap: calc(8px * var(--uiScale));
      position: static;
      background: var(--ui-surface, #fff);
      padding: calc(6px * var(--uiScale)) 0;
      border-top: 1px solid var(--ui-border, rgba(0,0,0,.10));
    }

    #hud{
      font-size: var(--font);
      color:#222;
      line-height:1.25;
      text-align: center;
      width: 100%;
    }

    .pageButtons{
      display:flex;
      gap: calc(8px * var(--uiScale));
      flex-wrap:wrap;
    }

    .iconToolbar{
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: 6px;
      flex-wrap: wrap;
      overflow-x: visible;
      overflow-y: visible;
      padding: 4px 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .iconToolbar + .iconToolbar{
      padding-top: 0;
    }

    .iconBtn{
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 10px;
      border: 1px solid var(--ui-border-soft);
      background: var(--ui-surface);
      color: var(--ui-text);
      cursor: pointer;
      position: relative;
      line-height: 1;
      overflow: hidden;
      transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    .iconBtn:hover{
      background: rgba(var(--ui-accent), .18);
      border-color: rgba(var(--ui-accent), .38);
      transform: scale(1.08);
      box-shadow: 0 3px 12px rgba(var(--ui-accent), .18);
    }

    .iconBtn:active{
      transform: scale(.96);
      box-shadow: 0 1px 4px rgba(0,0,0,.10);
    }

    .iconBtn:disabled{
      opacity: .4;
      cursor: not-allowed;
      transform: none;
    }

    .iconBtn-dirty:not(:disabled){
      border-color: rgba(var(--ui-accent), .70);
      box-shadow: 0 0 0 1px rgba(var(--ui-accent), .45),
                  0 0 14px rgba(var(--ui-accent), .40);
      animation: iconBtnDirtyPulse 1.8s ease-in-out infinite;
    }
    .iconBtn-dirty:not(:disabled):hover{
      animation: none;
    }
    @keyframes iconBtnDirtyPulse{
      0%,100%{ box-shadow: 0 0 0 1px rgba(var(--ui-accent), .40),
                           0 0 10px rgba(var(--ui-accent), .30); }
      50%    { box-shadow: 0 0 0 1px rgba(var(--ui-accent), .55),
                           0 0 18px rgba(var(--ui-accent), .55); }
    }
    @media (prefers-reduced-motion: reduce){
      .iconBtn-dirty:not(:disabled){ animation: none; }
    }

    html[data-ui-theme="dark"] .iconBtn{
      background: rgba(var(--ui-accent), .14);
      border-color: rgba(var(--ui-accent), .30);
      color: rgba(224,231,255, .95);
    }
    html[data-ui-theme="dark"] .iconBtn:hover{
      background: rgba(var(--ui-accent), .26);
      border-color: rgba(var(--ui-accent), .48);
    }

    .iconBtn-play{
      color: rgba(34,197,94,1);
    }

    .iconBtn-reset{
      color: rgba(239,68,68,.85);
    }

    .iconBtn-zoom{
      color: rgba(59,130,246,1);
    }

    .iconBtn-sel{
      background: rgba(59,130,246,0.12);
      color: rgba(29,78,216,1);
      border: 1px solid rgba(59,130,246,0.45);
      font-weight: 900;
    }

    body.sel-on .iconBtn-sel{
      background: linear-gradient(180deg, rgba(168,85,247,1), rgba(126,34,206,1));
      border-color: rgba(126,34,206,1);
      color: #fff;
    }

    .toolbarSep{
      width: 1px;
      height: 24px;
      background: var(--ui-border);
      margin: 0 4px;
      flex-shrink: 0;
    }

    @media (max-width: 480px){
      .iconBtn{ width: 32px; height: 32px; font-size: 15px; }
      .toolbarSep{ height: 20px; margin: 0 2px; }
    }

    #paletteWrap{
      overflow-x: hidden;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    #paletteGrid{
      display: grid;
      grid-template-columns: repeat(3, var(--noteBtn));
      gap: calc(5px * var(--uiScale));
      justify-content: center;
      padding: 4px 0;
    }

    @media (max-width: 980px){
      #paletteGrid{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(6px * var(--uiScale));
        max-height: calc(var(--noteBtn) * 2 + 14px);
        overflow-x: auto;
      }
    }

    #palette h3{
      margin:0 0 calc(8px * var(--uiScale)) 0;
      font-size: var(--font);
    }
    .help{
      color:#555;
      font-size: var(--fontSmall);
      line-height:2.35;
    }

    .noteBtn{
      width: var(--noteBtn);
      height: var(--noteBtn);
      border:1px solid #ccc;
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      cursor:pointer;
      position:relative;
      user-select:none;
    }

    .noteBtn.selected{
      outline: 3px solid #111;
      border-color:#111;
    }

    .noteBtn img{
      width: var(--noteIcon);
      height: var(--noteIcon);
      image-rendering: pixelated;
      pointer-events:none;
    }

    .noteIdTag{
      display: none !important;
      position:absolute;
      bottom:2px;
      right:4px;
      font-size: calc(10px * var(--uiScale));
      color:#555;
      background:rgba(255,255,255,.85);
      padding:1px 6px;
      border-radius: 10px;
      border:1px solid rgba(0,0,0,.08);
      pointer-events:none;
    }

    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      background:#f0f0f0;
      border:1px solid #ddd;
      padding:2px 6px;
      border-radius:10px;
    }

    #modalBack{
      position:fixed; inset:0;
      background:rgba(0,0,0,.35);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:50;
      padding: var(--pad);
    }

    #modal{
    width: auto;
    max-width: 620px;
    max-height: 84vh;
    overflow: auto;
    background:#fff;
    border-radius: 16px;
    border:1px solid #ddd;
    padding: var(--pad);
    box-shadow:0 12px 50px rgba(0,0,0,.2);
    display:flex;
    gap: var(--gap);
    flex-wrap: nowrap;
    align-items:flex-start;
    }

    .gearFrame{
    border-radius: 16px;
    border:1px solid #ddd;
    background:#fff;
    padding: 6px;
    overflow: hidden;
    width: fit-content;
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    }

    #gearCanvas{
    border-radius: 0;
    border: 0;
    background: transparent;
    display:block;

    height: min(76vh, calc(84vh - 60px));
    width: auto;
    max-width: 100%;
    }

    #modalSide{
    flex: 1 1 auto;
    min-width: 0;
    max-height: 78vh;
    overflow: auto;
    }

    #gearPaletteGrid{
    margin-top: calc(10px * var(--uiScale));
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--noteBtn), 1fr));
    gap: calc(8px * var(--uiScale));
    max-height: 220px;    
    overflow: auto;
    padding-right: 6px;
    }

    #gearToast{
      display:none;
      padding: calc(8px * var(--uiScale)) calc(10px * var(--uiScale));
      border-radius: 12px;
      border:1px solid #ddd;
      background:#111;
      color:#fff;
      font-size: var(--fontSmall);
      width: fit-content;
      max-width: 520px;
      margin-top: calc(10px * var(--uiScale));
    }

    @media (max-width: 480px){
      :root{ --uiScale: 0.72; }
      #cv{ max-height: 58vh; }
    }

    button{
    transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    }
    button:hover{ filter: brightness(1.03); box-shadow: 0 10px 26px rgba(0,0,0,.10); }
    button:active{ transform: translateY(1px) scale(0.99); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

    #btnExport{
    background: linear-gradient(180deg, rgba(34,197,94,1), rgba(22,163,74,1));
    border-color: rgba(22,163,74,1);
    color: #fff;
    }
    #btnExport:hover{ filter: brightness(1.05); }

    #btnImport{
    background: linear-gradient(180deg, rgba(59,130,246,1), rgba(37,99,235,1));
    border-color: rgba(37,99,235,1);
    color: #fff;
    }
    #btnImport:hover{ filter: brightness(1.05); }

    #btnSelToggle{
      background: rgba(59,130,246,0.12);
      color: rgba(29,78,216,1);
      border: 1px solid rgba(59,130,246,0.45);
      font-weight: 900;
    }

    body.sel-on #btnSelToggle{
    background: linear-gradient(180deg, rgba(168,85,247,1), rgba(126,34,206,1));
    border-color: rgba(126,34,206,1);
    color: #fff;
    box-shadow: 0 14px 34px rgba(126,34,206,.25);
    }

    body.sel-on #cv{
    border-color: rgba(126,34,206,.60);
    box-shadow: 0 18px 44px rgba(126,34,206,.14);
    }

    body.paste-armed #cv{
    border-color: rgba(245,158,11,.70);
    box-shadow: 0 18px 44px rgba(245,158,11,.14);
    }
    
    .gearFrame{
      flex: 0 0 auto;
      width: auto;
      min-width: 0;
      align-self: stretch;
    }

    #gearCanvas{
      height: 74vh;
      max-height: 74vh;
      width: auto;
      image-rendering: pixelated;
    }
    
    #modalBack{
      overflow: auto;
    }

    *{
      -webkit-tap-highlight-color: transparent;
    }
    
    button:focus,
    button:active{
      outline: none;
    }
    
    button:focus:not(:focus-visible){
      outline: none;
      box-shadow: none;
    }
    
    button:focus-visible{
      outline: 2px solid rgba(99,102,241,.55);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px rgba(99,102,241,.18);
      border-radius: 12px;
    }
    
    html.modal-open,
    body.modal-open{
      overflow: hidden;
      height: 100%;
    }
    
    body.modal-open{
      position: fixed;
      width: 100%;
      left: 0;
      right: 0;
      top: var(--scroll-lock-top, 0px);
    }
    
    .modalOverlay, .modalBackdrop{
      overscroll-behavior: none;
    }
    
    .modalContent, .modalBody{
      max-height: calc(100vh - 120px);
      overflow: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .statCard{
      border-radius: 16px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.70);
      border: 1px solid rgba(15,23,42,0.12);
      box-shadow: 0 10px 30px rgba(2,6,23,0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .statCard .k{
      font-size: 12px;
      line-height: 1.35;
      color: rgba(15,23,42,.68);
    }
    
    .statCard .v{
      margin: 6px 0;
      font-weight: 900;
      font-size: 20px;
      letter-spacing: .2px;
      color: rgba(2,6,23,.92);
    }
    
    html[data-ui-theme="dark"] .statCard{
      background: rgba(15,23,42,0.55);
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    }
    
    html[data-ui-theme="dark"] .statCard .k{
      color: rgba(148,163,184,.82);
    }
    
    html[data-ui-theme="dark"] .statCard .v{
      color: rgba(226,232,240,.95);
    }


    .hudRow{
      display:flex;
      flex-direction: column;
      align-items:center;
      gap:4px;
      min-width: 0;
    }
    
    #hud{
      flex: 0 0 auto;       
      white-space: nowrap;
      text-align: center;
      width: 100%;
    }
    
    #status{
      flex: 0 0 auto;      
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      opacity: .75;
      text-align: center;
      width: 100%;
      display: none;
    }
    
    @media (max-width: 520px){
      #hud{ font-size: 12px; }
      #status{ font-size: 11px; }
    }

    /* ─── Toast Notification ─── */
    #toast-container{
      position: fixed;
      bottom: 12%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100000;
      pointer-events: none;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 8px;
    }

    .toast-msg{
      padding: 10px 22px;
      border-radius: 12px;
      font-size: 13px;
      font-family: inherit;
      color: #fff;
      background: rgba(30, 30, 30, 0.88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
      white-space: nowrap;
      max-width: 90vw;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      animation: toast-in 0.35s cubic-bezier(0.21,1.02,0.73,1) forwards;
    }

    .toast-msg.toast-out{
      animation: toast-out 0.32s cubic-bezier(0.55,0,1,0.45) forwards;
    }

    @keyframes toast-in{
      0%{
        opacity: 0;
        transform: translateY(16px) scale(0.95);
      }
      100%{
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes toast-out{
      0%{
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      100%{
        opacity: 0;
        transform: translateY(10px) scale(0.96);
      }
    }

    #notePalettePopupBack{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: var(--ui-modal-backdrop, rgba(0,0,0,.45));
      z-index: 130;
      padding: 12px;
      overscroll-behavior: contain;
    }
    #notePalettePopupBack.show{
      display: flex;
    }

    #notePalettePopup{
      width: min(480px, 94vw);
      max-height: 80vh;
      border-radius: 18px;
      border: 1px solid var(--ui-border, rgba(0,0,0,.12));
      background: var(--ui-surface, #fff);
      box-shadow: 0 20px 70px rgba(0,0,0,.28);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 14px;
      color: var(--ui-text, #111);
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
    }

    #notePalettePopup .popupHeader{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    #notePalettePopup .popupTitle{
      font-weight: 950;
      font-size: 14px;
      letter-spacing: .2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #notePalettePopup .popupClose{
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid var(--ui-border-soft, rgba(0,0,0,.14));
      background: var(--ui-surface, #fff);
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      line-height: 1;
    }

    #notePalettePopupGrid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--noteBtn), 1fr));
      gap: 6px;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      padding: 4px 2px;
      max-height: calc(80vh - 80px);
    }

    #notePalettePopupGrid .noteBtn{
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      border-radius: 12px;
      transition: transform .1s ease, border-color .1s ease;
    }
    #notePalettePopupGrid .noteBtn:hover{
      transform: scale(1.08);
      border-color: rgba(99,102,241,.45);
    }
    #notePalettePopupGrid .noteBtn:active{
      transform: scale(.95);
    }

    /* ─── Metadata Popup ─── */
    #metaPopupBack{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: var(--ui-modal-backdrop, rgba(0,0,0,.45));
      z-index: 130;
      padding: 12px;
      overscroll-behavior: contain;
    }
    #metaPopupBack.show{
      display: flex;
    }

    #metaPopup{
      width: min(440px, 94vw);
      border-radius: 18px;
      border: 1px solid var(--ui-border, rgba(0,0,0,.12));
      background: var(--ui-surface, #fff);
      box-shadow: 0 20px 70px rgba(0,0,0,.28);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 14px;
      color: var(--ui-text, #111);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #metaPopup .popupHeader{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    #metaPopup .popupTitle{
      font-weight: 950;
      font-size: 14px;
      letter-spacing: .2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #metaPopup .popupClose{
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid var(--ui-border-soft, rgba(0,0,0,.14));
      background: var(--ui-surface, #fff);
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      line-height: 1;
    }

    #metaPopupInput{
      width: 100%;
      min-height: 80px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--ui-border-soft, rgba(0,0,0,.14));
      background: var(--ui-surface, #fff);
      color: var(--ui-text, #111);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px;
      line-height: 1.5;
      resize: vertical;
      outline: none;
      box-sizing: border-box;
    }
    #metaPopupInput:focus{
      border-color: rgba(99,102,241,.45);
      box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    }

    .metaPopupFooter{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .metaPopupCount{
      font-size: 12px;
      font-family: ui-monospace, Menlo, monospace;
      color: var(--ui-muted, #888);
    }

    .metaPopupFooter .primary{
      padding: 8px 16px;
      border-radius: 12px;
      font-weight: 900;
    }

    #btnPiano{
      background: rgba(168,85,247,.30);
      color: rgba(107,28,176,1);
      border: 1px solid rgba(168,85,247,.55);
    }
    html[data-ui-theme="dark"] #btnPiano{
      background: rgba(168,85,247,.38);
      color: rgba(233,213,255,1);
      border-color: rgba(168,85,247,.66);
    }


    #btnLibrary{
      background: rgba(99,102,241,.12);
      color: rgb(160 153 247);
      border: 1px solid rgba(99,102,241,.35);
      font-weight: 900;
    }
    
    :root{
      --ui-text: #0b1020;
      --ui-text-soft: rgba(11,16,32,.82);
      --ui-muted: rgba(11,16,32,.62);
    
      --ui-bg-a: #f6f6f6;
      --ui-bg-b: #eef2ff;

      --ui-surface: rgba(255,255,255,.86);
      --ui-surface-solid: rgba(255,255,255,.98);
      --ui-card: rgba(255,255,255,.90);
      --ui-canvas: rgba(255,255,255,.95);
    
      --ui-border: rgba(0,0,0,.10);
      --ui-border-soft: rgba(0,0,0,.14);
    
      --ui-primary-bg: #111;
      --ui-primary-text: #fff;
      --ui-primary-border: #111;
    
      --ui-aurora-a: rgba(99,102,241,.18);
      --ui-aurora-b: rgba(168,85,247,.14);
      --ui-stars: rgba(17,24,39,.18);
    
      --ui-chip-bg: rgba(99,102,241,.12);
      --ui-chip-text: rgba(67,56,202,1);
      --ui-chip-border: rgba(99,102,241,.35);
    
      --ui-tab-active-bg: rgba(17,17,17,.08);
    
      --ui-shadow: 0 10px 30px rgba(0,0,0,.10);
      --ui-card-shadow: 0 18px 50px rgba(0,0,0,.08);
      --ui-btn-shadow: 0 8px 22px rgba(0,0,0,.08);
      --ui-btn-shadow-hover: 0 14px 36px rgba(0,0,0,.12);
    
      --ui-focus: rgba(99,102,241,.55);
      --ui-focus-soft: rgba(99,102,241,.18);
    
      --ui-kbd-bg: rgba(0,0,0,.05);
      --ui-kbd-border: rgba(0,0,0,.10);
      --ui-kbd-text: rgba(11,16,32,.85);
      --ui-outline: rgba(17,17,17,.90);
    
      --ui-modal-backdrop: rgba(0,0,0,.45);
    }
    
    html[data-ui-theme="dark"]{
      --ui-text: rgba(242,246,255,.96);
      --ui-text-soft: rgba(242,246,255,.82);
      --ui-muted: rgba(242,246,255,.62);
    
      --ui-bg-a: #030413;
      --ui-bg-b: #080a2a;

      --ui-surface: rgb(10 14 36 / 89%);
      --ui-surface-solid: rgb(10 14 36 / 99%);
      --ui-card: rgba(10,14,36,.66);
      --ui-canvas: rgba(10,14,36,.72);
    
      --ui-border: rgba(255,255,255,.12);
      --ui-border-soft: rgba(255,255,255,.14);
    
      --ui-primary-bg: rgba(99,102,241,.18);
      --ui-primary-text: rgba(242,246,255,.95);
      --ui-primary-border: rgba(99,102,241,.42);
    
      --ui-aurora-a: rgba(99,102,241,.26);
      --ui-aurora-b: rgba(168,85,247,.22);
      --ui-stars: rgba(255,255,255,.18);
    
      --ui-chip-bg: rgba(99,102,241,.16);
      --ui-chip-text: rgba(224,231,255,.98);
      --ui-chip-border: rgba(99,102,241,.40);
    
      --ui-tab-active-bg: rgba(255,255,255,.10);
    
      --ui-shadow: 0 16px 60px rgba(0,0,0,.45);
      --ui-card-shadow: 0 22px 70px rgba(0,0,0,.45);
      --ui-btn-shadow: 0 12px 40px rgba(0,0,0,.40);
      --ui-btn-shadow-hover: 0 18px 60px rgba(0,0,0,.55);
    
      --ui-kbd-bg: rgba(255,255,255,.06);
      --ui-kbd-border: rgba(255,255,255,.12);
      --ui-kbd-text: rgba(242,246,255,.86);
    
      --ui-outline: rgba(242,246,255,.88);
      --ui-modal-backdrop: rgba(0,0,0,.60);
    }
    
    html{
      color-scheme: light dark;
    }
    
    body{
      background:
        radial-gradient(1200px 900px at 12% -10%, var(--ui-aurora-a), transparent 60%),
        radial-gradient(900px 700px at 90% 8%, var(--ui-aurora-b), transparent 55%),
        linear-gradient(180deg, var(--ui-bg-a), var(--ui-bg-b));
      color: var(--ui-text);
    }
    
    body::before,
    body::after{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }
    
    body::before{
      opacity: .9;
      background-image:
        radial-gradient(circle at 10% 20%, var(--ui-stars) 0 1px, transparent 2px),
        radial-gradient(circle at 40% 60%, var(--ui-stars) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 30%, var(--ui-stars) 0 1px, transparent 2px),
        radial-gradient(circle at 85% 75%, var(--ui-stars) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 78%, var(--ui-stars) 0 1px, transparent 2px);
      background-size: 240px 240px, 280px 280px, 320px 320px, 360px 360px, 400px 400px;
      background-repeat: repeat;
      filter: blur(.1px);
    }
    
    body::after{
      opacity: .45;
      background-image:
        radial-gradient(1000px 700px at 18% 88%, rgba(56,189,248,.10), transparent 60%),
        radial-gradient(900px 650px at 88% 78%, rgba(34,197,94,.08), transparent 60%),
        radial-gradient(800px 600px at 78% 18%, rgba(244,114,182,.10), transparent 60%);
    }
    
    header{
      background: var(--ui-surface);
      border-bottom: 1px solid var(--ui-border);
      box-shadow: var(--ui-shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .menubar{
      display:flex;
      align-items:stretch;
      gap: calc(4px * var(--uiScale));
      margin-right: calc(4px * var(--uiScale));
    }

    .menubar-divider{
      width:1px;
      align-self:center;
      height: calc(20px * var(--uiScale));
      background: linear-gradient(180deg,
        transparent,
        var(--ui-border-soft, rgba(0,0,0,.16)) 18%,
        var(--ui-border-soft, rgba(0,0,0,.16)) 82%,
        transparent);
      margin: 0 calc(4px * var(--uiScale));
      flex: 0 0 auto;
    }

    .menubar-group{ position:relative; display:flex; align-items:stretch; }
    .menubar-group.is-open{ z-index: 1000002; }

    .menubar-btn{
      display:inline-flex;
      align-items:center;
      gap: calc(5px * var(--uiScale));
      padding: var(--btnPadY) calc(12px * var(--uiScale));
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      color: var(--ui-text);
      font-size: var(--font);
      font-weight: 700;
      line-height: 1.1;
      box-shadow: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background .18s ease, border-color .18s ease, color .18s ease;
    }
    .menubar-btn:hover{
      background: rgba(var(--ui-accent), .12);
      border-color: rgba(var(--ui-accent), .28);
      box-shadow: none;
    }
    .menubar-btn:focus-visible{
      outline: none;
      border-color: rgba(var(--ui-accent), .55);
      box-shadow: 0 0 0 3px var(--ui-focus-soft);
    }
    .menubar-group.is-open > .menubar-btn{
      background: rgba(var(--ui-accent), .16);
      border-color: rgba(var(--ui-accent), .34);
    }

    .menubar-caret{
      font-size: calc(11px * var(--uiScale));
      opacity: .7;
      transition: transform .22s cubic-bezier(.22,1,.36,1);
    }
    .menubar-group.is-open .menubar-caret{ transform: rotate(180deg); }

    .menubar-scrim{
      position: fixed;
      inset: 0;
      z-index: 1000000;
      background: transparent;
      display: none;
    }
    .menubar-scrim.is-active{ display: block; }

    body.menubar-open > header{ position: relative; z-index: 1000001; }

    .menubar-dropdown{
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: calc(230px * var(--uiScale));
      padding: calc(6px * var(--uiScale));
      border-radius: 14px;
      background: var(--ui-surface-solid, var(--ui-surface, #fff));
      border: 1px solid var(--ui-border, rgba(0,0,0,.12));
      box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
      backdrop-filter: blur(18px) saturate(1.4);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      z-index: 1000001;

      opacity: 0;
      transform: translateY(-8px) scale(.97);
      transform-origin: top left;
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity .2s ease,
        transform .24s cubic-bezier(.22,1,.36,1),
        visibility 0s linear .24s;
    }
    .menubar-group.is-open .menubar-dropdown{
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      visibility: visible;
      transition:
        opacity .2s ease,
        transform .24s cubic-bezier(.22,1,.36,1),
        visibility 0s linear 0s;
    }

    .menu-entry{
      display:flex;
      align-items:center;
      gap: calc(10px * var(--uiScale));
      width:100%;
      box-sizing: border-box;
      padding: calc(9px * var(--uiScale)) calc(12px * var(--uiScale));
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: var(--ui-text);
      font-size: var(--font);
      font-weight: 600;
      text-align: left;
      line-height: 1.15;
      box-shadow: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background .14s ease, border-color .14s ease, transform .08s ease;
    }
    .menu-entry:hover{
      background: rgba(var(--ui-accent), .14);
      border-color: rgba(var(--ui-accent), .26);
      box-shadow: none;
    }
    .menu-entry:active{ transform: translateY(1px); }
    .menu-entry:focus-visible{
      outline: none;
      border-color: rgba(var(--ui-accent), .55);
      box-shadow: 0 0 0 3px var(--ui-focus-soft);
    }

    .menu-entry.menu-entry--disabled{
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none;
    }
    .menu-entry.menu-entry--disabled:hover{
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    .menu-entry.menu-entry--disabled .menu-lock-tag{
      font-weight: 700;
      opacity: .8;
      font-style: italic;
    }
    .menu-entry .menu-ico{
      width: calc(20px * var(--uiScale));
      text-align:center;
      flex: 0 0 auto;
      font-size: calc(15px * var(--uiScale));
    }

    .menu-sep{
      height:1px;
      margin: calc(5px * var(--uiScale)) calc(8px * var(--uiScale));
      background: linear-gradient(90deg,
        transparent,
        var(--ui-border-soft, rgba(0,0,0,.16)) 15%,
        var(--ui-border-soft, rgba(0,0,0,.16)) 85%,
        transparent);
    }
    
    .card{
      background: var(--ui-card);
      border: 1px solid var(--ui-border);
      box-shadow: var(--ui-card-shadow);
    }
    
    #cv{
      background: var(--ui-canvas);
      border: 1px solid var(--ui-border);
    }
    
    #hud{ color: var(--ui-text); }
    .help{ color: var(--ui-muted); }
    #status{ color: var(--ui-muted); }
    
    button, input[type="number"], input[type="text"]{
      border-color: var(--ui-border-soft);
      background: var(--ui-surface);
      color: var(--ui-text);
    }
    
    button{
      box-shadow: var(--ui-btn-shadow);
    }
    
    button:hover{
      box-shadow: var(--ui-btn-shadow-hover);
    }
    
    button.primary{
      background: var(--ui-primary-bg);
      color: var(--ui-primary-text);
      border-color: var(--ui-primary-border);
    }
    

    #hkBody{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    
    #hkBody .hkSection{
      border-radius: 16px;
      padding: 12px 12px;
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(15,23,42,.12);
      box-shadow: 0 10px 30px rgba(2,6,23,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #hkBody .hkTitle{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 10px;
      font-weight: 900;
      color: rgba(2,6,23,.92);
    }

    #hkBody .hkGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
      gap: 10px;
    }

    #hkBody .hkBtn{
      position:relative;
      border-radius: 14px;
      padding: 10px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
    
      background: rgba(2,6,23,.04);
      border: 1px solid rgba(15,23,42,.12);
      box-shadow: 0 8px 20px rgba(2,6,23,.06);
    
      transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
      cursor: pointer;
      user-select:none;
    }
    
    #hkBody .hkBtn:hover{
      transform: translateY(-1px);
      filter: brightness(1.03);
      border-color: rgba(99,102,241,.35);
    }
    #hkBody .hkBtn:active{
      transform: translateY(0px) scale(.98);
    }
    
    #hkBody .hkBtn img{
      width: 38px;
      height: 38px;
      object-fit: contain;
      image-rendering: auto;
    }

    #hkBody .hkTag{
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      padding: 6px 9px;
      border-radius: 999px;
    
      background: rgba(99,102,241,.12);
      border: 1px solid rgba(99,102,241,.30);
      color: rgba(67,56,202,1);
    }
    
    html[data-ui-theme="dark"] #hkBody .hkSection{
      background: rgba(15,23,42,.55);
      border-color: rgba(148,163,184,.18);
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
    }
    
    html[data-ui-theme="dark"] #hkBody .hkTitle{
      color: rgba(226,232,240,.95);
    }
    
    html[data-ui-theme="dark"] #hkBody .hkBtn{
      background: rgba(148,163,184,.10);
      border-color: rgba(148,163,184,.18);
      box-shadow: 0 10px 26px rgba(0,0,0,.30);
    }
    
    html[data-ui-theme="dark"] #hkBody .hkBtn:hover{
      border-color: rgba(99,102,241,.44);
      background: rgba(99,102,241,.10);
    }
    
    html[data-ui-theme="dark"] #hkBody .hkTag{
      background: rgba(99,102,241,.18);
      border-color: rgba(99,102,241,.44);
      color: rgba(224,231,255,.98);
    }
    
    #hotkeyHint{
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 16px;
    
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(15,23,42,.12);
      box-shadow: 0 10px 30px rgba(2,6,23,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    
      color: rgba(15,23,42,.76);
      font-size: 12px;
      line-height: 1.45;
    }
    
    #hotkeyHint b{
      color: rgba(2,6,23,.92);
      font-weight: 900;
    }
    
    html[data-ui-theme="dark"] #hotkeyHint{
      background: rgba(15,23,42,.55);
      border-color: rgba(148,163,184,.18);
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
      color: rgba(148,163,184,.86);
    }
    
    html[data-ui-theme="dark"] #hotkeyHint b{
      color: rgba(226,232,240,.95);
    }
    
    
    .noteBtn.selected{
      outline: 3px solid var(--ui-outline);
      border-color: var(--ui-outline);
    }
    
    .kbd{
      background: var(--ui-kbd-bg);
      border-color: var(--ui-kbd-border);
      color: var(--ui-kbd-text);
    }
    
    #modalBack{
      background: var(--ui-modal-backdrop);
    }
    #modal{
      background: var(--ui-card);
      border-color: var(--ui-border);
      color: var(--ui-text);
    }
    .gearFrame{
      background: var(--ui-card);
      border-color: var(--ui-border);
    }
    #gearToast{
      background: rgba(0,0,0,.88);
      border-color: rgba(255,255,255,.10);
      color: rgba(255,255,255,.92);
    }
    
    html[data-ui-theme="dark"] #songSetBack > div{
      background: var(--ui-card) !important;
      border-color: var(--ui-border) !important;
      color: var(--ui-text) !important;
    }
    html[data-ui-theme="dark"] #songSetBack input{
      background: var(--ui-surface) !important;
      border-color: var(--ui-border-soft) !important;
      color: var(--ui-text) !important;
    }
    html[data-ui-theme="dark"] #songSetApply{
      background: var(--ui-primary-bg) !important;
      color: var(--ui-primary-text) !important;
      border-color: var(--ui-primary-border) !important;
    }

    html[data-ui-theme="dark"] #btnZoom,
    html[data-ui-theme="dark"] #btnSelToggle{
      background: rgba(99,102,241,.16) !important;
      color: rgba(224,231,255,.98) !important;
      border-color: rgba(99,102,241,.44) !important;
    }
    html[data-ui-theme="dark"] #btnReset{
      background: rgba(239, 68, 68, 0.14) !important;
      color: rgba(254, 226, 226, 0.96) !important;
      border-color: rgba(239, 68, 68, 0.42) !important;
    }
    
    #songLibList{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:10px;
      background: transparent;
    }
    
    #songLibList .songItem{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
    
      background: rgba(255,255,255,0.70);
      border: 1px solid rgba(15,23,42,0.12);
      box-shadow: 0 10px 30px rgba(2,6,23,0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    #songLibList .songInfo{ min-width:0; }
    #songLibList .songTitle{
      font-weight:900;
      letter-spacing:.2px;
      color: rgba(2,6,23,.92);
      margin-bottom:6px;
      line-height:1.2;
      word-break: break-word;
    }
    #songLibList .songMeta{
      font-size: 12px;
      line-height:1.35;
      color: rgba(15,23,42,.68);
      white-space: pre-line; 
      word-break: break-word;
    }
    
    #songLibList .songBtns{ display:flex; gap:8px; flex-shrink:0; }
    
    #songLibList .songBtn{
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 900;
      border: 1px solid rgba(59,130,246,0.35);
      background: rgba(59,130,246,0.12);
      color: rgba(29,78,216,1);
      cursor:pointer;
      transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
    }
    #songLibList .songBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    #songLibList .songBtn:active{ transform: translateY(0px) scale(.98); }
    #songLibList .songBtn:focus-visible{
      outline: 2px solid rgba(59,130,246,0.55);
      outline-offset: 2px;
    }

    #songLibList .songBtn.primary{
      border-color: rgba(99,102,241,.44);
      background: rgba(99,102,241,.16);
      color: rgba(29,78,216,1);
    }
    
    html[data-ui-theme="dark"] #songLibList .songItem{
      background: rgba(15,23,42,0.55);
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    }
    
    html[data-ui-theme="dark"] #songLibList .songTitle{
      color: rgba(226,232,240,.95);
    }
    
    html[data-ui-theme="dark"] #songLibList .songMeta{
      color: rgba(148,163,184,.82);
    }
    
    html[data-ui-theme="dark"] #songLibList .songBtn{
      background: rgba(99,102,241,.16);
      color: rgba(224,231,255,.98);
      border-color: rgba(99,102,241,.44);
    }
    
    html[data-ui-theme="dark"] #songLibList .songBtn.primary{
      background: rgba(99,102,241,.22);
      border-color: rgba(99,102,241,.52);
    }
    
    #hkAlertOk{
      border-radius: 12px; 
      padding: 8px 12px;
      font-weight: 900;
    }
    
    #hkAlertOk{
      background: rgba(99,102,241,.14) !important;
      border: 1px solid rgba(99,102,241,.40) !important;
      color: rgba(67,56,202,1) !important;
    }
    
    #hkAlertOk.closestHack{} 
    #hkAlertOk{}
    
    #hkAlertOk.parentNodeHack{} 
    
    @supports selector(div:has(#hkAlertOk)){
      div:has(#hkAlertOk){
        background: rgba(255,255,255,.70) !important;
        border: 1px solid rgba(15,23,42,.12) !important;
        border-radius: 16px !important;
        box-shadow: 0 16px 60px rgba(2,6,23,.18) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
      }
    
      div:has(#hkAlertOk) > div > div:first-child{
        color: rgba(2,6,23,.92) !important;
      }
    
      div:has(#hkAlertOk) > div + div{
        background: rgba(99,102,241,.10) !important;
        border-color: rgba(99,102,241,.26) !important;
        color: rgba(15,23,42,.78) !important;
      }
    
      html[data-ui-theme="dark"] div:has(#hkAlertOk){
        background: rgba(15,23,42,.60) !important;
        border-color: rgba(148,163,184,.18) !important;
        box-shadow: 0 18px 70px rgba(0,0,0,.45) !important;
      }
    
      html[data-ui-theme="dark"] div:has(#hkAlertOk) > div > div:first-child{
        color: rgba(226,232,240,.95) !important;
      }
    
      html[data-ui-theme="dark"] div:has(#hkAlertOk) > div + div{
        background: rgba(99,102,241,.16) !important;
        border-color: rgba(99,102,241,.40) !important;
        color: rgba(148,163,184,.90) !important;
      }
    
      html[data-ui-theme="dark"] #hkAlertOk{
        background: rgba(99,102,241,.22) !important;
        border-color: rgba(99,102,241,.52) !important;
        color: rgba(224,231,255,.98) !important;
      }
    }

    #btnUIMode{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: calc(38px * var(--uiScale));
      height: calc(38px * var(--uiScale));
      padding: 0;
      border-radius: 999px;
      font-size: calc(16px * var(--uiScale));
      line-height: 1;
      cursor: pointer;
      background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.16), transparent 60%),
        var(--ui-chip-bg);
      color: var(--ui-chip-text);
      border: 1px solid var(--ui-chip-border);
      box-shadow: var(--ui-btn-shadow), inset 0 1px 0 rgba(255,255,255,.08);
      transition:
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        transform .18s cubic-bezier(.22,1,.36,1);
    }
    #btnUIMode:hover{
      transform: translateY(-1px);
      border-color: rgba(var(--ui-accent), .55);
      box-shadow:
        var(--ui-btn-shadow-hover),
        0 0 0 3px var(--ui-focus-soft),
        inset 0 1px 0 rgba(255,255,255,.10);
    }
    #btnUIMode:active{ transform: translateY(0) scale(.96); }
    /* Elegant icon swap with a soft rotate/scale on toggle */
    #btnUIMode > *,
    #btnUIMode{ transition: transform .35s cubic-bezier(.22,1,.36,1), background .28s ease, border-color .28s ease, box-shadow .28s ease; }
    html[data-ui-theme="dark"] #btnUIMode{
      background:
        radial-gradient(120% 120% at 30% 20%, rgba(148,163,255,.22), transparent 60%),
        linear-gradient(180deg, rgba(30,27,75,.65), rgba(15,23,42,.55));
      color: rgba(253,224,155,.98);
    }
    html[data-ui-theme="dark"] #btnUIMode:hover{
      color: rgba(253,230,170,1);
    }
    
    #btnTheme{
      background: var(--ui-chip-bg) !important;
      color: var(--ui-chip-text) !important;
      border-color: var(--ui-chip-border) !important;
    }
    
    
    button:focus-visible,
    input:focus-visible{
      outline: 2px solid var(--ui-focus);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--ui-focus-soft);
    }
    
    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior:auto !important; }
      button{ transition:none !important; }
    }
    
    /* ── Export Format Modal ── */
    #exportFormatModal{
      position: fixed;
      inset: 0;
      z-index: 999998;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(2,6,23,.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    #exportFormatModal.show{ display:flex; }

    #exportFormatModal .efm-box{
      width: min(420px, 92vw);
      border-radius: 20px;
      padding: 20px 22px 18px;
      background: rgba(15,23,42,.82);
      border: 1px solid rgba(148,163,184,.22);
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      color: rgba(226,232,240,.92);
      animation: efmSlideIn .2s ease;
    }
    @keyframes efmSlideIn{
      from{ opacity:0; transform:translateY(18px) scale(.97); }
      to{ opacity:1; transform:translateY(0) scale(1); }
    }

    #exportFormatModal .efm-title{
      font-weight: 900;
      font-size: 16px;
      letter-spacing: .2px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #exportFormatModal .efm-formats{
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }

    #exportFormatModal .efm-format-option{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1.5px solid rgba(148,163,184,.18);
      background: rgba(30,41,59,.5);
      cursor: pointer;
      transition: all .15s ease;
    }
    #exportFormatModal .efm-format-option:hover{
      border-color: rgba(99,102,241,.5);
      background: rgba(30,41,59,.8);
    }
    #exportFormatModal .efm-format-option.selected{
      border-color: rgba(99,102,241,.8);
      background: rgba(49,46,129,.35);
    }
    #exportFormatModal .efm-format-option input[type="radio"]{
      accent-color: rgba(99,102,241,.9);
      width: 16px;
      height: 16px;
      margin: 0;
    }
    #exportFormatModal .efm-format-label{
      flex: 1;
    }
    #exportFormatModal .efm-format-name{
      font-weight: 700;
      font-size: 13px;
    }
    #exportFormatModal .efm-format-desc{
      font-size: 11px;
      color: rgba(148,163,184,.8);
      margin-top: 1px;
    }
    #exportFormatModal .efm-format-badge{
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 700;
      white-space: nowrap;
    }
    #exportFormatModal .efm-badge-fast{
      background: rgba(34,197,94,.2);
      color: rgba(74,222,128,.95);
    }
    #exportFormatModal .efm-badge-slow{
      background: rgba(234,179,8,.15);
      color: rgba(250,204,21,.9);
    }

    #exportFormatModal .efm-quality-row{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      font-size: 12px;
      color: rgba(148,163,184,.9);
    }
    #exportFormatModal .efm-quality-row select{
      background: rgba(30,41,59,.7);
      border: 1px solid rgba(148,163,184,.25);
      color: rgba(226,232,240,.92);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 12px;
      cursor: pointer;
    }
    #exportFormatModal .efm-quality-row.disabled{
      opacity: .4;
      pointer-events: none;
    }

    #exportFormatModal .efm-buttons{
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    #exportFormatModal .efm-btn{
      padding: 8px 20px;
      border-radius: 10px;
      border: 1px solid rgba(148,163,184,.2);
      background: rgba(30,41,59,.6);
      color: rgba(226,232,240,.92);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .12s ease;
    }
    #exportFormatModal .efm-btn:hover{
      background: rgba(51,65,85,.7);
    }
    #exportFormatModal .efm-btn-export{
      background: rgba(79,70,229,.7);
      border-color: rgba(99,102,241,.5);
    }
    #exportFormatModal .efm-btn-export:hover{
      background: rgba(79,70,229,.9);
    }

    #exportWavOverlay{
      position: fixed;
      inset: 0;
      z-index: 999999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(2,6,23,.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    #exportWavOverlay.show{ display:flex; }
    
    #exportWavOverlay .box{
      width: min(460px, 92vw);
      border-radius: 20px;
      padding: 16px 16px 14px;
      background: rgba(15,23,42,.62);
      border: 1px solid rgba(148,163,184,.22);
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      color: rgba(226,232,240,.92);
    }
    
    #exportWavOverlay .title{
      font-weight: 900;
      font-size: 15px;
      letter-spacing: .2px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    #exportWavOverlay .spinner{
      width: 14px; height: 14px;
      border-radius: 999px;
      border: 2px solid rgba(148,163,184,.25);
      border-top-color: rgba(99,102,241,.9);
      animation: spin 0.9s linear infinite;
    }
    @keyframes spin{ to{ transform: rotate(360deg); } }
    
    #exportWavOverlay .desc{
      margin-top: 6px;
      font-size: 12px;
      color: rgba(148,163,184,.90);
      line-height: 1.45;
    }
    
    #exportWavOverlay .barWrap{
      margin-top: 12px;
      height: 10px;
      border-radius: 999px;
      background: rgba(148,163,184,.14);
      overflow: hidden;
      border: 1px solid rgba(148,163,184,.18);
    }
    #exportWavOverlay .bar{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: rgba(99,102,241,.75);
      transition: width .12s ease;
    }
    
    #exportWavOverlay.indeterminate .bar{
      width: 35%;
      animation: indet 1.0s ease-in-out infinite;
    }
    @keyframes indet{
      0%   { transform: translateX(-10%); }
      50%  { transform: translateX(180%); }
      100% { transform: translateX(-10%); }
    }
    
  body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

    :root{
      --ui-accent: 99,102,241;        
      --ui-accent-solid: #6366f1;
    }

    .btn-icon{
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      min-width: 36px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid rgba(var(--ui-accent), .22);
      background: rgba(var(--ui-accent), .08);
      color: rgba(var(--ui-accent), 1);
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
      flex-shrink: 0;
    }
    .btn-icon:hover{
      background: rgba(var(--ui-accent), .18);
      border-color: rgba(var(--ui-accent), .38);
      transform: scale(1.08);
      box-shadow: 0 3px 12px rgba(var(--ui-accent), .18);
    }
    .btn-icon:active{
      transform: scale(.96);
      box-shadow: 0 1px 4px rgba(0,0,0,.10);
    }
    .btn-icon:focus-visible{
      outline: 2px solid var(--ui-accent-solid);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px rgba(var(--ui-accent), .18);
    }
    .btn-icon:disabled{
      opacity: .45;
      cursor: not-allowed;
      transform: none;
    }

    /* Dark mode adjustments */
    html[data-ui-theme="dark"] .btn-icon{
      background: rgba(var(--ui-accent), .14);
      border-color: rgba(var(--ui-accent), .30);
      color: rgba(224,231,255, .95);
    }
    html[data-ui-theme="dark"] .btn-icon:hover{
      background: rgba(var(--ui-accent), .26);
      border-color: rgba(var(--ui-accent), .48);
    }

    /* Note count badge */
    .note-badge{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 10px;
      border: 1px solid rgba(var(--ui-accent), .18);
      background: rgba(var(--ui-accent), .06);
      color: rgba(var(--ui-accent), 1);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background .12s ease;
    }
    .note-badge:hover{
      background: rgba(var(--ui-accent), .14);
    }
    html[data-ui-theme="dark"] .note-badge{
      background: rgba(var(--ui-accent), .10);
      border-color: rgba(var(--ui-accent), .26);
      color: rgba(224,231,255, .90);
    }

    @media (max-width: 520px){
      .btn-icon{
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 15px;
        border-radius: 8px;
      }
    }

    .zoom-controls{
      display: inline-flex;
      align-items: center;
      gap: 0;
      border-radius: 12px;
      border: 1px solid var(--ui-border-soft, rgba(0,0,0,.14));
      background: var(--ui-surface, #fff);
      overflow: hidden;
      flex-shrink: 0;
    }

    .zoom-controls .btn-icon{
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      width: 32px;
      height: 32px;
      min-width: 32px;
      font-size: 16px;
      font-weight: 900;
      background: transparent !important;
      color: var(--ui-text, #111) !important;
    }
    .zoom-controls .btn-icon:hover{
      background: rgba(var(--ui-accent), .12) !important;
    }
    .zoom-controls .btn-icon:active{
      background: rgba(var(--ui-accent), .22) !important;
    }

    .zoom-label{
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .3px;
      min-width: 42px;
      text-align: center;
      color: var(--ui-text, #111);
      user-select: none;
      border-left: 1px solid var(--ui-border-soft, rgba(0,0,0,.10));
      border-right: 1px solid var(--ui-border-soft, rgba(0,0,0,.10));
      padding: 0 4px;
      line-height: 32px;
    }

    @media (max-width: 520px){
      .zoom-controls .btn-icon{ width: 28px; height: 28px; min-width: 28px; font-size: 14px; }
      .zoom-label{ font-size: 11px; min-width: 36px; line-height: 28px; }
    }

    /* ─── Guide / Help Button ─── */
    .iconBtn-guide{
      background: rgba(245,158,11,.12);
      color: rgba(180,83,9,1);
      border: 1px solid rgba(245,158,11,.35);
    }
    html[data-ui-theme="dark"] .iconBtn-guide{
      background: rgba(245,158,11,.16);
      color: rgba(253,224,71,.95);
      border-color: rgba(245,158,11,.42);
    }

    /* ─── Guide Popup ─── */
    #guidePopupBack{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: var(--ui-modal-backdrop, rgba(0,0,0,.45));
      z-index: 140;
      padding: 32px 16px;
      overscroll-behavior: contain;
    }
    #guidePopupBack.show{
      display: flex;
    }

    #guidePopup{
      width: min(720px, 96vw);
      max-height: min(76vh, calc(100vh - 64px));
      margin: 0;
      border-radius: 20px;
      border: 1px solid var(--ui-border, rgba(0,0,0,.12));
      background: #fff;
      box-shadow: 0 24px 80px rgba(0,0,0,.30);
      color: var(--ui-text, #111);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }

    html[data-ui-theme="dark"] #guidePopup{
      background: rgb(10, 14, 36);
    }

    .guideHeader{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--ui-border, rgba(0,0,0,.08));
      flex-shrink: 0;
      min-height: 0;
      background: inherit;
      border-radius: 20px 20px 0 0;
      flex-wrap: wrap;
    }

    .guideHeaderLeft{
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .guideTitle{
      font-weight: 950;
      font-size: 15px;
      letter-spacing: .3px;
    }

    .guideLangSwitch{
      display: flex;
      align-items: center;
      gap: 0;
      border-radius: 10px;
      border: 1px solid var(--ui-border-soft, rgba(0,0,0,.14));
      overflow: hidden;
      flex-shrink: 0;
    }

    .guideLangBtn{
      padding: 6px 14px !important;
      border: none !important;
      border-radius: 0 !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      letter-spacing: .3px;
      cursor: pointer;
      background: transparent !important;
      color: var(--ui-muted, #666) !important;
      box-shadow: none !important;
      transition: background .15s ease, color .15s ease;
      line-height: 1.2;
    }

    .guideLangBtn.active{
      background: var(--ui-primary-bg, #111) !important;
      color: var(--ui-primary-text, #fff) !important;
    }

    .guideLangBtn + .guideLangBtn{
      border-left: 1px solid var(--ui-border-soft, rgba(0,0,0,.14)) !important;
    }

    .guideClose{
      width: 34px !important;
      height: 34px !important;
      border-radius: 10px !important;
      border: 1px solid var(--ui-border-soft) !important;
      background: var(--ui-surface) !important;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      line-height: 1;
      flex-shrink: 0;
    }

    .guideBody{
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      padding: 16px 18px 20px;
    }

    .guideSection{
      margin-bottom: 18px;
      border-radius: 14px;
      padding: 14px 16px;
      background: rgba(99,102,241,.04);
      border: 1px solid var(--ui-border, rgba(0,0,0,.08));
    }

    html[data-ui-theme="dark"] .guideSection{
      background: rgba(99,102,241,.06);
      border-color: rgba(148,163,184,.14);
    }

    .guideSectionTitle{
      font-weight: 900;
      font-size: 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ui-text);
      letter-spacing: .2px;
    }

    .guideSectionTitle .sIcon{
      font-size: 16px;
    }

    .guideTable{
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }

    .guideTable th{
      text-align: left;
      padding: 8px 10px;
      font-weight: 800;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--ui-muted, #888);
      border-bottom: 2px solid var(--ui-border, rgba(0,0,0,.10));
      white-space: nowrap;
    }

    .guideTable td{
      padding: 8px 10px;
      border-bottom: 1px solid var(--ui-border, rgba(0,0,0,.06));
      vertical-align: top;
      line-height: 1.5;
    }

    .guideTable tr:last-child td{
      border-bottom: none;
    }

    .guideTable .gIconInline{
      font-size: 18px;
      line-height: 1.2;
      margin-top: 2px;
      opacity: 0.95;
    }

    .guideTable .gName{
      font-weight: 700;
      white-space: nowrap;
    }

    .guideTable .gDesc{
      color: var(--ui-text-soft, #333);
      line-height: 1.55;
    }

    .guideNote{
      margin-top: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(245,158,11,.08);
      border: 1px solid rgba(245,158,11,.20);
      font-size: 12px;
      line-height: 1.55;
      color: var(--ui-text-soft, #444);
    }

    html[data-ui-theme="dark"] .guideNote{
      background: rgba(245,158,11,.10);
      border-color: rgba(245,158,11,.25);
    }

    .guideNote strong{
      font-weight: 800;
    }

    .guideStepList{
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .guideStepList li{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 12.5px;
      line-height: 1.55;
    }

    .guideStepList .stepNum{
      width: 22px;
      height: 22px;
      min-width: 22px;
      border-radius: 7px;
      background: rgba(99,102,241,.14);
      border: 1px solid rgba(99,102,241,.30);
      color: rgba(67,56,202,1);
      font-weight: 900;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    html[data-ui-theme="dark"] .guideStepList .stepNum{
      background: rgba(99,102,241,.18);
      border-color: rgba(99,102,241,.40);
      color: rgba(224,231,255,.95);
    }


    @media (max-width: 768px) and (min-width: 601px){
      #guidePopupBack{
        padding: 24px 12px;
      }
      #guidePopup{
        width: 100%;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 48px);
      }
      .guideTable{ font-size: 12px; }
      .guideTable th{ font-size: 10px; padding: 6px 8px; }
      .guideTable td{ padding: 7px 8px; }
      .guideNote{ font-size: 11.5px; }
      .guideStepList li{ font-size: 12px; }
      .guideLangBtn{ padding: 5px 10px !important; font-size: 11px !important; }
    }

    @media (max-width: 600px){
      #guidePopupBack{
        padding: 12px 6px;
        align-items: flex-start;
        justify-content: center;
      }
      #guidePopup{
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        max-height: calc(100svh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
        margin: 0;
      }

      .guideHeader{
        padding: 10px 12px 8px;
        gap: 0;
        flex-wrap: wrap;
        flex-shrink: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      html[data-ui-theme="dark"] .guideHeader{
        background: rgb(10, 14, 36);
      }

      .guideHeaderLeft{
        flex: 1 1 0;
        min-width: 0;
      }
      .guideTitle{
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .guideClose{
        width: 30px !important;
        height: 30px !important;
        font-size: 14px;
        border-radius: 8px !important;
        flex-shrink: 0;
      }
      .guideLangSwitch{
        width: 100%;
        justify-content: center;
        margin-top: 6px;
        order: 3;
      }
      .guideLangBtn{
        padding: 5px 16px !important;
        font-size: 11px !important;
      }

      .guideBody{
        padding: 10px 10px 16px;
      }

      .guideSection{
        padding: 10px 10px;
        margin-bottom: 10px;
        border-radius: 11px;
      }
      .guideSectionTitle{
        font-size: 12.5px;
        margin-bottom: 8px;
        gap: 6px;
      }
      .guideSectionTitle .sIcon{ font-size: 14px; }

      .guideTable .gIconInline{ font-size: 16px; }
      .guideTable{
        font-size: 11.5px;
        table-layout: auto;
        word-break: break-word;
        width: 100%;
      }
      .guideTable th{
        font-size: 9.5px;
        padding: 5px 8px;
      }
      .guideTable td{
        padding: 6px 8px;
      }
      .guideTable .gName{
        font-size: 11px;
        font-weight: 700;
        white-space: normal;
        word-break: break-word;
        width: auto;
        min-width: auto;
        max-width: fit-content;
        padding-right: 10px;
      }
      .guideTable .gDesc{
        font-size: 11px;
        line-height: 1.5;
        word-break: break-word;
        hyphens: auto;
        padding-left: 10px;
        border-left: 1px solid var(--ui-border, rgba(0,0,0,.10));
      }

      .guideNote{
        font-size: 11px;
        padding: 8px 10px;
        margin-top: 8px;
        border-radius: 10px;
        line-height: 1.55;
        word-break: break-word;
      }

      .guideStepList{ gap: 5px; }
      .guideStepList li{
        font-size: 11.5px;
        gap: 8px;
        line-height: 1.55;
      }
      .guideStepList .stepNum{
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 9px;
        border-radius: 6px;
        margin-top: 2px;
      }

      .guideSection p{
        font-size: 11.5px !important;
        line-height: 1.6 !important;
        word-break: break-word;
      }
    }

    @media (max-width: 400px){
      #guidePopupBack{
        padding: 8px 4px;
      }
      #guidePopup{
        width: calc(100vw - 8px);
        max-width: calc(100vw - 8px);
        max-height: calc(100svh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
      }
      .guideHeader{
        padding: 8px 10px 6px;
        border-radius: 14px 14px 0 0;
      }
      .guideTitle{ font-size: 13px; }
      .guideBody{ padding: 8px 8px 14px; }
      .guideSection{ padding: 8px 8px; margin-bottom: 8px; border-radius: 10px; }
      .guideSectionTitle{ font-size: 11.5px; margin-bottom: 6px; }
      .guideTable{ font-size: 11px; table-layout: auto; width: 100%; }
      .guideTable .gName{ font-size: 10.5px; width: auto; min-width: auto; max-width: fit-content; white-space: normal; word-break: break-word; padding-right: 8px; }
      .guideTable .gDesc{ font-size: 10.5px; padding-left: 8px; border-left: 1px solid var(--ui-border, rgba(0,0,0,.10)); }
      .guideTable th{ font-size: 9px; padding: 4px 6px; }
      .guideTable td{ padding: 5px 6px; }
      .guideNote{ font-size: 10.5px; padding: 7px 8px; }
      .guideStepList li{ font-size: 11px; }
      .guideLangBtn{ padding: 4px 12px !important; font-size: 10px !important; }
      .guideClose{ width: 28px !important; height: 28px !important; font-size: 13px; }
    }

    @media (max-height: 500px) and (orientation: landscape){
      #guidePopupBack{ padding: 8px; }
      #guidePopup{
        width: min(720px, 96vw);
        max-height: calc(100vh - 16px);
        border-radius: 14px;
        margin: 0;
      }
      .guideBody{ padding: 8px 14px 12px; }
      .guideSection{ margin-bottom: 8px; padding: 8px 10px; }
      .guideTable{ font-size: 11.5px; }
      .guideTable th, .guideTable td{ padding: 5px 8px; }
    }

    @media (min-width: 1200px){
      #guidePopup{
        width: min(820px, 90vw);
        max-height: min(82vh, calc(100vh - 80px));
      }
      .guideTable{ font-size: 13.5px; }
      .guideTable th, .guideTable td{ padding: 9px 12px; }
      .guideSectionTitle{ font-size: 15px; }
      .guideStepList li{ font-size: 13.5px; }
      .guideNote{ font-size: 13px; }
    }

    #gmsfCreditsBar{
      width: 96%;
      max-width: 1600px;
      margin: var(--gap) auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--gap);
      text-align: center;
    }

    .credits-line{
      width: 100%;
    }

    .credits-copyright{
      font-size: 12px;
      color: var(--ui-muted, rgba(0,0,0,.62));
      line-height: 1.5;
    }

    .credits-community{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .credits-community-text{
      font-size: 12px;
      color: var(--ui-text-soft, rgba(0,0,0,.78));
      line-height: 1.5;
    }

    .credits-badges{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .footer-badge{
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      transition: transform .12s ease, filter .12s ease, border-color .12s ease;
    }
    .footer-badge:hover{
      transform: translateY(-1px);
      filter: brightness(1.08);
    }
    .footer-badge:active{
      transform: translateY(0) scale(.98);
    }

    /* Discord accent (blue) */
    .footer-badge-discord{
      border: 1px solid rgba(37,99,235,.35);
      background: rgba(37,99,235,.10);
      color: rgba(37,99,235,1);
    }
    html[data-ui-theme="dark"] .footer-badge-discord{
      border-color: rgba(96,165,250,.40);
      background: rgba(96,165,250,.14);
      color: rgba(147,197,253,.95);
    }

    /* GitHub accent (green) */
    .footer-badge-github{
      border: 1px solid rgba(16,185,129,.35);
      background: rgba(16,185,129,.10);
      color: rgba(16,185,129,1);
    }
    html[data-ui-theme="dark"] .footer-badge-github{
      border-color: rgba(52,211,153,.40);
      background: rgba(52,211,153,.14);
      color: rgba(110,231,183,.95);
    }

    .footer-badge-license{
      border: 1px solid rgba(245,158,11,.35);
      background: rgba(245,158,11,.10);
      color: rgba(245,158,11,1);
    }
    html[data-ui-theme="dark"] .footer-badge-license{
      border-color: rgba(251,191,36,.40);
      background: rgba(251,191,36,.14);
      color: rgba(253,224,71,.95);
    }

    @media (max-width: 980px){
      #gmsfCreditsBar{
        width: 98%;
      }
    }
    @media (max-width: 600px){
      #gmsfCreditsBar{
        width: 100%;
      }
    }

    @media (orientation: portrait), (max-width: 768px) {
      #wrap {
        width: 100%;
        flex-direction: column;
        padding: var(--pad) 0;
        box-sizing: border-box;
      }

      #leftCard,
      .card:not(#guidePopup):not(#notePalettePopup):not(#metaPopup) {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      #cv {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 45vh;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .iconToolbar {
        justify-content: center;
        overflow-x: visible;
        flex-wrap: wrap;
        padding-bottom: 4px;
      }

      .iconToolbar:last-child,
      .iconToolbar--center {
        justify-content: center !important;
      }

    }

    @media (orientation: portrait) and (min-width: 1080px) {
      :root {
        --uiScale: 0.9;
      }
      .iconBtn {
        width: 44px;
        height: 44px;
      }
    }

    @media (orientation: portrait), (max-width: 768px) {
      #modal {
        width: auto;
        max-width: 96vw;
        max-height: 90vh;
        max-height: 90dvh;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        overflow: auto;
      }
      .gearFrame {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-height: min(84vh, 84dvh);
        overflow: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
      #gearCanvas {
        width: min(40vw, 180px);
        height: auto;
        margin: 0;
      }
      #modalSide {
        flex: 1 1 auto;
        min-width: 0;
        max-height: 82vh;
        max-height: 82dvh;
        overflow: auto;
      }
      #gearPaletteGrid {
        max-height: 30vh;
        max-height: 30dvh;
      }

      #btnPiano {
        position: fixed;
        right: 16px;
        right: max(16px, env(safe-area-inset-right));
        bottom: 64px;
        bottom: max(64px, calc(env(safe-area-inset-bottom) + 44px));
        width: 48px;
        height: 48px;
        border-radius: 50%;
        z-index: 120;
        box-shadow: 0 8px 24px rgba(0,0,0,.28);
        font-size: 21px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        animation: btnPianoPulse 2s ease-out infinite;
      }

      @keyframes btnPianoPulse {
        0% {
          box-shadow: 0 8px 24px rgba(0,0,0,.28),
                      0 0 0 0 rgba(168,85,247,.55);
        }
        70% {
          box-shadow: 0 8px 24px rgba(0,0,0,.28),
                      0 0 0 14px rgba(168,85,247,0);
        }
        100% {
          box-shadow: 0 8px 24px rgba(0,0,0,.28),
                      0 0 0 0 rgba(168,85,247,0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #btnPiano { animation: none; }
      }
    }

    body.gear-editor-open #btnPiano {
      display: none !important;
    }

    @media (orientation: landscape) and (max-height: 500px) {
      #modal {
        width: 96vw;
        max-width: 96vw;
        max-height: 94vh;
        max-height: 94dvh;
        flex-direction: row;
        align-items: flex-start;
      }
      .gearFrame {
        max-height: 90vh;
        max-height: 90dvh;
        overflow: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
      #gearCanvas {
        width: 180px;
        max-width: 46vw;
        height: auto;
      }
      #modalSide {
        max-height: 90vh;
        max-height: 90dvh;
        overflow: auto;
      }
      #gearPaletteGrid {
        max-height: 40vh;
        max-height: 40dvh;
      }

      #btnPiano {
        position: fixed;
        right: 12px;
        right: max(12px, env(safe-area-inset-right));
        bottom: 28px;
        bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
        width: 44px;
        height: 44px;
        border-radius: 50%;
        z-index: 120;
        box-shadow: 0 8px 24px rgba(0,0,0,.28);
        font-size: 19px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
    }

    .header-label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--font);
      font-weight: 700;
      color: var(--ui-text, #111);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .header-num-input {
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      min-height: 36px !important;
      height: 36px !important;
      padding: 0 8px !important;
      border-radius: 10px !important;
      border: 1px solid var(--ui-border-soft, rgba(0,0,0,.14)) !important;
      background: var(--ui-surface, #fff) !important;
      color: var(--ui-text, #111) !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      text-align: center !important;
      box-sizing: border-box !important;
      line-height: 36px !important;
      flex-shrink: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      vertical-align: middle !important;
      appearance: textfield !important;
      -webkit-appearance: textfield !important;
      -moz-appearance: textfield !important;
    }

    .header-num-input:focus {
      outline: none !important;
      border-color: var(--ui-accent-solid, #6366f1) !important;
      box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
    }

    /* hide spinner arrows on number input in header */
    .header-num-input::-webkit-outer-spin-button,
    .header-num-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .header-num-input[type=number] {
      -moz-appearance: textfield;
    }

    @media (max-width: 520px) {
      .header-num-input {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        font-size: 12px !important;
        height: 32px !important;
        padding: 0 6px !important;
      }
      .header-label {
        font-size: 12px;
        gap: 3px;
      }
    }

    .iconToolbar {
      flex-wrap: wrap !important;
      overflow-x: visible !important;
      justify-content: center !important;
    }

    .iconToolbar .toolbarSep {
      flex-shrink: 0;
    }

    @media (orientation: landscape) and (min-width: 769px) {
      .iconToolbar {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center !important;
      }
    }

    .iconToolbar-row2-portrait {
      display: none !important;
    }
    .tb-desktop-only {
      display: flex !important;
    }

    @media (orientation: portrait), (max-width: 600px) {
      .iconToolbar-row2-portrait {
        display: flex !important;
      }
      .tb-desktop-only {
        display: none !important;
      }

      #btnSongStats {
        display: none !important;
      }
    }

    @media (orientation: landscape) {
      .iconToolbar-row2-portrait {
        display: none !important;
      }
      .tb-desktop-only {
        display: flex !important;
      }
    }

    @media (orientation: landscape) and (max-height: 500px) {
      .iconToolbar-row2-portrait {
        display: none !important;
      }
      .tb-desktop-only {
        display: flex !important;
      }
      .iconToolbar-row2-landscape {
        display: flex !important;
      }

      #wrap {
        width: 100%;
        flex-direction: column;
        padding: 2px 0;
        box-sizing: border-box;
        align-items: center;
      }

      #leftCard,
      .card:not(#guidePopup):not(#notePalettePopup):not(#metaPopup) {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 4px;
      }

      #cv {
        width: auto;
        max-width: 100%;
        height: auto;
        /* Reserve space for viewbar ~70px + card padding 8px */
        max-height: calc(100svh - 80px);
        max-height: calc(100dvh - 80px);
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .iconToolbar {
        justify-content: center !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        padding: 1px 4px;
      }

      .iconBtn {
        width: 28px;
        height: 28px;
        font-size: 13px;
      }

      .toolbarSep {
        height: 16px;
        margin: 0 2px;
      }

      .viewbar {
        margin-top: 2px;
        gap: 2px;
        padding: 2px 0;
        border-top: 1px solid var(--ui-border, rgba(0,0,0,.10));
      }

      #hud {
        font-size: 11px;
        line-height: 1.1;
      }

      .iconToolbar-row4 {
        display: flex !important;
      }
    }