*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#080812;background-image:radial-gradient(ellipse at 50% 0%,rgba(0,224,122,.04) 0%,transparent 60%);color:#e0e0e0;height:100vh;height:100dvh;display:flex;justify-content:center;padding:4px 8px;-webkit-text-size-adjust:100%;overscroll-behavior-y:contain;overflow:hidden}#app{max-width:760px;width:100%;overflow:hidden;display:flex;flex-direction:column;height:100%}header{margin-bottom:4px;flex-shrink:0}#header-content{display:flex;align-items:center;gap:8px}#oud-image{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,255,136,.3))}#oud-image:hover{filter:drop-shadow(0 0 14px rgba(0,255,136,.6))}header h1{font-size:1.1rem;color:#00e07a;letter-spacing:1px;white-space:nowrap}.title-ar{font-family:Amiri,Traditional Arabic,serif;font-size:1rem;opacity:.85;margin-left:2px}.subtitle{display:none}#mode-tabs{display:flex;gap:4px;margin-bottom:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#16162a80;border-radius:12px;padding:3px;flex-shrink:0}#mode-tabs::-webkit-scrollbar{display:none}.tab{flex:1;padding:8px 4px;background:transparent;border:none;border-radius:10px;color:#666;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease;text-align:center;white-space:nowrap;min-height:36px}.tab:hover{color:#aaa;background:#ffffff08}.tab.active{background:#00e07a1f;color:#00e07a;box-shadow:0 1px 4px #00e07a26}#content-area{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,224,122,.2) transparent}#content-area::-webkit-scrollbar{width:4px}#content-area::-webkit-scrollbar-thumb{background:#00e07a33;border-radius:4px}.mode-panel{display:none;background:#16162ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:14px;padding:10px 12px;margin-bottom:4px;box-shadow:0 2px 8px #0000004d;animation:panelFadeIn .3s ease}.mode-panel.active{display:block}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}#scale-keyboard{display:flex;gap:2px;margin-bottom:4px;justify-content:center}.scale-key{width:34px;height:28px;border-radius:6px;background:#22224480;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.6rem;color:#888;transition:background .15s,border-color .15s,color .15s}.scale-key .key-note{font-weight:600;font-size:.7rem;line-height:1}.scale-key .key-degree{font-size:.65rem;opacity:.6;line-height:1}.scale-key.active{background:#032;border-color:#00e07a;color:#00e07a}#pitch-section{background:#1a1a2ed9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:0 2px 8px #0000004d}.pitch-details{margin-bottom:8px}.pitch-details>summary{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#16162a99;border-radius:10px;color:#888;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s;list-style:none;user-select:none}.pitch-details>summary::-webkit-details-marker{display:none}.pitch-details>summary:before{content:"▸";font-size:.7rem;transition:transform .2s ease}.pitch-details[open]>summary:before{transform:rotate(90deg)}.pitch-details>summary:hover{background:#16162ad9;color:#bbb}.pitch-details[open]>summary{color:#00e07a;margin-bottom:6px}#pitch-status{display:flex;gap:8px;font-size:.65rem;font-family:monospace;color:#555;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.05)}.maqam-label{font-size:.75rem;font-weight:700;color:#00e07a;white-space:nowrap}#pitch-info{display:flex;gap:10px;align-items:baseline;margin-bottom:4px;flex-wrap:wrap}#note-name{font-size:1.4rem;font-weight:700;color:#00e07a;min-width:50px;transition:color .2s}#note-name.silent{color:#444}#degree-label{font-size:.85rem;color:#aaa}#freq-display{font-size:.75rem;color:#666;font-family:monospace}#transpose-display{font-size:.75rem;color:orange;font-family:monospace;margin-left:auto}#maqam-scale-canvas{width:100%;max-width:100%;height:80px;border-radius:6px;display:block;background:#0f0f22;margin-bottom:4px}#pitch-canvas{width:100%;max-width:100%;height:80px;border-radius:6px;display:block}.control-row{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap;align-items:center}.control-row:last-child{margin-bottom:0}.control-group{flex:1;min-width:100px}.control-group label{display:block;font-size:.7rem;color:#999;margin-bottom:2px}select,input[type=range]{width:100%;max-width:100%}select{background:#222244b3;color:#e0e0e0;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 8px;font-size:.8rem;cursor:pointer;min-height:34px;transition:border-color .2s,box-shadow .2s}select:focus{border-color:#00e07a;box-shadow:0 0 0 2px #00e07a26;outline:none}input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:#333;border-radius:3px;outline:none;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:#00e07a;border-radius:50%;cursor:pointer;border:2px solid #0d0d1a}input[type=range]::-moz-range-thumb{width:22px;height:22px;background:#00e07a;border-radius:50%;cursor:pointer;border:2px solid #0d0d1a}button{padding:8px 16px;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s,box-shadow .2s;min-height:36px}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}#start-btn,#karaoke-play{background:linear-gradient(135deg,#00e07a,#00c06a);color:#0d0d1a;box-shadow:0 2px 6px #00e07a33}#stop-btn,#karaoke-stop{background:linear-gradient(135deg,#f44,#d33);color:#fff;box-shadow:0 2px 6px #f443}#karaoke-pause{background:linear-gradient(135deg,orange,#e89500);color:#0d0d1a;box-shadow:0 2px 6px #ffa50033}.file-row{gap:8px}.file-group{flex:1;min-width:180px}.file-group label{display:block;font-size:.7rem;color:#999;margin-bottom:2px}.file-group input[type=file]{width:100%;font-size:.75rem;color:#ccc;padding:3px 0}.file-group input[type=file]::file-selector-button{background:#224;color:#e0e0e0;border:1px solid #444;border-radius:4px;padding:6px 10px;font-size:.7rem;cursor:pointer;margin-right:6px;min-height:32px}.file-name{display:block;font-size:.65rem;color:#666;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time-display{font-family:monospace;font-size:.8rem;color:#aaa;margin-left:auto}.toggle-label{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#aaa;cursor:pointer;min-height:36px}.toggle-label input[type=checkbox]{width:20px;height:20px;accent-color:#00e07a;cursor:pointer}.lyrics-sync-row{display:flex;align-items:center;gap:8px;padding:6px 12px;margin:4px 0;background:#0a0a1a66;border-radius:8px;font-size:.8rem;color:#ffffffb3}.lyrics-sync-row label{white-space:nowrap;font-size:.75rem;min-width:70px}.lyrics-sync-row input[type=range]{flex:1;height:4px}.lyrics-sync-row span{font-size:.75rem;min-width:30px;text-align:right;color:#00e07a}#lyrics-container{max-height:200px;overflow-y:auto;margin:6px 0;padding:10px 12px;background:#0a0a1a99;border-radius:12px;border:1px solid rgba(255,255,255,.04);scroll-behavior:smooth;-webkit-overflow-scrolling:touch}#lyrics-container:empty{display:none}.lyric-line{padding:5px 8px;font-size:.95rem;color:#444;border-radius:4px;transition:color .3s,background .3s,font-size .3s,opacity .3s;line-height:1.5;margin-bottom:2px}.lyric-line.past{color:#666;opacity:.7}.lyric-line.active{color:#fff;background:#00ff8814;font-size:1.05rem;font-weight:600;padding:6px 10px}.lyric-line.upcoming{color:#888;opacity:.9}.lyric-word{transition:color .15s ease}.lyric-line.active .lyric-word{color:#556}.lyric-line.active .lyric-word.sung{color:#00e07a;text-shadow:0 0 8px rgba(0,255,136,.4)}.lyric-line.past .lyric-word{color:#666}.lyric-line.past .lyric-word.sung{color:#666;text-shadow:none}#pdf-container{margin:6px 0;text-align:center;min-height:0}#pdf-container:empty{display:none}.pdf-canvas{max-width:100%;border-radius:6px;background:#fff;cursor:pointer}.pdf-page-label{font-size:.65rem;color:#666;margin-top:4px}.karaoke-hero{text-align:center;padding:8px 4px 6px}.hero-text{font-size:.8rem;color:#00e07a;font-weight:600;letter-spacing:.5px}.hero-ar{font-family:Amiri,Traditional Arabic,serif;font-size:.85rem;color:#00cc6a;opacity:.8;margin-top:2px}.karaoke-search-bar{margin-bottom:6px}.karaoke-search-bar input[type=text]{font-size:16px;padding:10px 12px;min-height:44px}.karaoke-search-bar button{min-height:44px;padding:10px 18px;font-size:.85rem}.search-bar{display:flex;gap:4px}.search-bar input[type=text]{flex:1;background:#2249;color:#e0e0e0;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 12px;font-size:16px;min-height:40px;transition:border-color .2s,box-shadow .2s}.search-bar input[type=text]:focus{border-color:#00e07a;box-shadow:0 0 0 2px #00e07a26;outline:none}.search-bar button{padding:8px 14px;font-size:.8rem;background:linear-gradient(135deg,#00e07a,#00c06a);color:#0d0d1a;min-height:40px;border-radius:10px;box-shadow:0 2px 6px #00e07a33}#search-results,#stored-songs-list{max-height:40vh;overflow-y:auto;margin-bottom:6px;-webkit-overflow-scrolling:touch}#search-results:empty,#stored-songs-list:empty{display:none}.search-result-item,.stored-song-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s;font-size:.78rem;color:#ccc;border-bottom:1px solid #1a1a2e;min-height:48px}.search-result-item:hover,.stored-song-item:hover{background:#1a1a3a}.search-result-item:active,.stored-song-item:active{background:#224}.search-result-item .result-name,.stored-song-item .stored-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-item .result-artist,.stored-song-item .stored-artist{font-size:.7rem;color:#777;white-space:nowrap}.search-result-item .result-source{font-size:.6rem;color:#555;text-transform:uppercase;background:#222;padding:1px 4px;border-radius:3px}.search-result-item .result-badges{display:flex;gap:2px}.badge{font-size:.65rem;padding:2px 5px;border-radius:3px;text-transform:uppercase;font-weight:600}.badge-midi{background:#032;color:#00e07a}.badge-audio{background:#220;color:#fa0}.badge-lyrics{background:#202;color:#f8f}.result-artwork{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}.stored-song-item .result-artwork{width:36px;height:36px}.result-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.result-info .result-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-info .result-artist{font-size:.65rem;color:#777}.result-download-btn,.result-play-btn,.result-save-btn{padding:6px 10px;font-size:.75rem;border-radius:6px;border:none;cursor:pointer;font-weight:600;flex-shrink:0;min-height:32px;min-width:32px}.result-download-btn{background:#00e07a;color:#0d0d1a}.result-play-btn{background:#0af;color:#fff;font-size:.9rem;padding:6px 12px;border-radius:50%;min-width:36px;min-height:36px}.result-save-btn{background:transparent;color:#00e07a;border:1px solid #00e07a;font-size:.85rem;padding:4px 8px;border-radius:4px}.result-save-btn:disabled{border-color:#555;color:#555}.accomp-label{font-size:.72rem;color:#888;margin-bottom:4px;display:block}.inst-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}.inst-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:#12122ab3;border:1px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:all .2s ease;min-height:64px}.inst-card:hover{background:#1a1a3acc;border-color:#ffffff1a}.inst-card:active{transform:scale(.95)}.inst-card.active{background:#00e07a14;border-color:#00e07a;box-shadow:0 0 10px #00e07a26}.inst-icon{width:36px;height:36px;opacity:.7;transition:opacity .2s,filter .2s}.inst-card:hover .inst-icon{opacity:.9}.inst-card.active .inst-icon{opacity:1;filter:drop-shadow(0 0 4px rgba(0,255,136,.3))}.inst-name{font-size:.7rem;font-weight:600;color:#777;line-height:1}.inst-name-ar{font-size:.65rem;color:#555;font-family:Amiri,serif;line-height:1}.inst-card.active .inst-name{color:#00e07a}.inst-card.active .inst-name-ar{color:#00cc6a}#accomp-controls{gap:8px;padding:2px 0}.stored-song-item .stored-delete{color:#f44;cursor:pointer;font-size:1rem;padding:4px 6px;opacity:.5;transition:opacity .15s;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.stored-song-item .stored-delete:hover,.stored-song-item .stored-delete:active{opacity:1}.search-loading{text-align:center;padding:12px;color:#888;font-size:.78rem}.section-label{font-size:.7rem;color:#666;padding:4px 0 2px;border-bottom:1px solid #222;margin-bottom:2px}.advanced-section{margin-top:6px;margin-bottom:6px}.advanced-section>summary{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#16162a99;border-radius:10px;color:#888;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s;list-style:none;user-select:none}.advanced-section>summary::-webkit-details-marker{display:none}.advanced-section>summary:before{content:"▸";font-size:.7rem;transition:transform .2s ease}.advanced-section[open]>summary:before{transform:rotate(90deg)}.advanced-section>summary:hover{background:#16162ad9;color:#bbb}.advanced-section[open]>summary{color:#00e07a;margin-bottom:8px}#audio-source-panel,#midi-source-panel{margin-bottom:4px}.info-text{font-size:.7rem;color:#888;padding:2px 0}.info-text:empty{display:none}#song-library{background:#112;border-radius:6px;padding:8px;margin-bottom:6px}#song-library:empty{display:none}.library-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.library-header h3{font-size:.8rem;color:#aaa;margin:0;flex:1}#library-search{background:#224;color:#e0e0e0;border:1px solid #333;border-radius:4px;padding:6px 8px;font-size:16px;width:150px;min-height:34px}#library-search:focus{border-color:#00e07a;outline:none}.song-list{max-height:150px;overflow-y:auto;-webkit-overflow-scrolling:touch}.song-item{display:flex;align-items:center;gap:6px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background .15s;font-size:.78rem;color:#ccc;min-height:40px}.song-item:hover{background:#1a1a3a}.song-item:active{background:#224}.song-item.active{background:#032;color:#00e07a}.song-item .song-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-item .song-type{font-size:.65rem;color:#666;text-transform:uppercase}.song-item .song-remove{color:#f44;cursor:pointer;font-size:1rem;padding:4px 6px;opacity:.5;transition:opacity .15s;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.song-item .song-remove:hover,.song-item .song-remove:active{opacity:1}#error-banner{display:none;background:#411;border:1px solid #ff4444;border-radius:6px;padding:8px 12px;margin-bottom:4px;font-size:.78rem;color:#f88;flex-shrink:0}#error-banner.visible{display:block}#bottom-bar{display:flex;align-items:center;gap:8px;background:#16162ab3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;padding:6px 10px;margin-top:4px;flex-wrap:wrap;box-shadow:0 1px 4px #0003;flex-shrink:0}#recording-controls{display:flex;align-items:center;gap:4px;white-space:nowrap}.rec-btn{padding:6px 12px;font-size:.75rem;border-radius:4px;cursor:pointer;border:1px solid #444;background:#1a1a2e;color:#ccc;min-height:34px}.rec-btn:disabled{opacity:.4;cursor:not-allowed}#rec-start{border-color:#c33;color:#f44}#rec-start:hover:not(:disabled){background:#2a1a1a}#rec-stop{border-color:#666}.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#444;vertical-align:middle}.rec-dot.recording{background:#f44;animation:rec-pulse 1s infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}.rec-timer{font-family:monospace;color:#888;font-size:.75rem}.rec-list{max-height:120px;overflow-y:auto;margin-top:4px}.rec-empty{color:#555;font-size:.7rem;text-align:center;padding:4px}.rec-item{display:flex;justify-content:space-between;align-items:center;padding:6px;border-bottom:1px solid #1a1a2e;font-size:.75rem;min-height:40px}.rec-item:hover{background:#1a1a3a}.rec-item-info{display:flex;flex-direction:column;gap:1px}.rec-item-name{color:#ccc}.rec-item-meta{color:#666;font-size:.65rem}.rec-item-actions{display:flex;gap:4px}.rec-play-btn,.rec-delete-btn{background:none;border:1px solid #444;color:#aaa;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:.7rem;min-height:30px}.rec-play-btn:hover,.rec-play-btn:active{border-color:#00e07a;color:#00e07a}.rec-delete-btn:hover,.rec-delete-btn:active{border-color:#f44;color:#f44}#transcription-canvas{width:100%;border-radius:6px;margin-top:4px;background:#0d0d1a}#status{display:flex;gap:8px;font-size:.65rem;font-family:monospace;color:#555;margin-left:auto;flex-wrap:wrap}#mic-status{color:#f44}@media (max-width: 600px){html,body{overflow-x:hidden}body{padding:2px 3px}#app{max-width:100%}header{margin-bottom:2px;flex-shrink:0}#header-content{gap:4px}header h1{font-size:.85rem}.title-ar{font-size:.75rem}#oud-image{width:22px;height:22px}.lang-toggle{padding:4px 8px;font-size:.68rem;min-height:28px}.tab{padding:7px 2px;font-size:.6rem;min-height:36px}.mode-panel{padding:4px 6px;margin-bottom:2px}.install-btn{padding:4px 8px;font-size:.65rem;min-height:28px}.control-group{min-width:0;flex:1}.file-group{min-width:100%}.control-row{gap:5px;margin-bottom:4px}.karaoke-hero{padding:4px 2px 3px}.hero-text{font-size:.72rem}.hero-ar{font-size:.75rem;margin-top:1px}.karaoke-search-bar input[type=text]{font-size:16px;padding:8px 10px;min-height:42px}.karaoke-search-bar button{min-height:42px;padding:8px 14px;font-size:.8rem}#karaoke-play,#karaoke-pause,#karaoke-stop{flex:1;min-height:40px;font-size:.82rem;padding:6px 8px}input[type=range]::-webkit-slider-thumb{width:26px;height:26px}input[type=range]::-moz-range-thumb{width:26px;height:26px}input[type=range]{height:8px}.inst-grid{grid-template-columns:repeat(4,1fr);gap:4px}.inst-card{padding:5px 2px 4px;min-height:60px;border-radius:6px}.inst-icon{width:32px;height:32px}.inst-name{font-size:.62rem}.inst-name-ar{font-size:.6rem}.accomp-label{font-size:.65rem;margin-bottom:2px}#lyrics-container{max-height:150px;padding:8px;margin:4px 0}.lyric-line{font-size:.82rem;padding:3px 5px}.lyric-line.active{font-size:.92rem;padding:4px 6px}#pitch-section{padding:4px 6px}#pitch-info{gap:6px;margin-bottom:2px}#note-name{font-size:1.1rem;min-width:36px}#degree-label{font-size:.75rem}#freq-display,#transpose-display{font-size:.65rem}#scale-keyboard{gap:1px;margin-bottom:2px}.scale-key{flex:1;min-width:0;height:24px;font-size:.62rem}.scale-key .key-note{font-size:.65rem}.scale-key .key-degree{font-size:.6rem}#maqam-scale-canvas{height:65px;margin-bottom:2px}#pitch-canvas{height:60px}#practice-notation{height:70px}.maqam-pill{padding:5px 7px;font-size:.6rem;min-height:28px}.root-pill{padding:4px 7px;font-size:.65rem;min-height:26px}.style-select{font-size:.7rem;min-height:34px}.taq-row{margin-bottom:3px}.taq-ctrl-row{gap:4px}.taq-mini-select{font-size:.68rem;min-height:30px}.taq-vol-slider{min-width:50px;max-width:100px}.taqasim-badge{font-size:.68rem}.search-result-item,.stored-song-item{padding:6px;gap:6px;min-height:44px}.result-artwork{width:38px;height:38px}.practice-score-box{padding:5px 6px;min-width:50px}.practice-score-value{font-size:1.05rem}.practice-score-detail{font-size:.8rem}#bottom-bar{flex-wrap:wrap;gap:4px;padding:4px 6px;margin-top:2px}#status{gap:4px;font-size:.65rem}#instrument-visual{max-width:260px}#instrument-visual-section{margin:2px 0;max-height:140px}}@media (max-width: 400px){body{padding:1px 2px}header h1{font-size:.75rem}.title-ar{font-size:.65rem}.tab{font-size:.65rem;padding:6px 1px;min-height:34px}.maqam-pill .pill-ar{display:none}.maqam-pill{padding:4px 5px;font-size:.65rem;min-height:26px}.root-pill{padding:3px 5px;font-size:.62rem;min-height:24px}.taq-root-row{gap:2px}.time-display{width:100%;text-align:center;margin-left:0;font-size:.72rem}#maqam-scale-canvas{height:55px}#pitch-canvas{height:50px}.scale-key{height:22px}.inst-grid{gap:3px}.inst-card{padding:4px 1px 3px;min-height:54px;border-radius:5px}.inst-icon{width:28px;height:28px}.inst-name{font-size:.6rem}.inst-name-ar{display:none}#instrument-visual{max-width:220px}#instrument-visual-section{max-height:120px}.hero-text{font-size:.65rem}.hero-ar{font-size:.68rem}}@media (max-width: 340px){header h1{font-size:.65rem}.title-ar{display:none}.tab{font-size:.62rem;min-height:32px}.inst-icon{width:24px;height:24px}.inst-card{min-height:48px}}@supports (padding: env(safe-area-inset-top)){body{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:calc(4px + env(safe-area-inset-bottom));padding-left:calc(4px + env(safe-area-inset-left));padding-right:calc(4px + env(safe-area-inset-right))}}button,.tab,select,input[type=file]::file-selector-button,.maqam-pill,.root-pill,.inst-card{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}input[type=range]{touch-action:none}#app{overscroll-behavior:contain}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.keyboard-details{margin-bottom:8px}.keyboard-details>summary{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#16162a99;border-radius:10px;color:#888;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s;list-style:none;user-select:none}.keyboard-details>summary::-webkit-details-marker{display:none}.keyboard-details>summary:before{content:"▸";font-size:.7rem;transition:transform .2s ease}.keyboard-details[open]>summary:before{transform:rotate(90deg)}.keyboard-details>summary:hover{background:#16162ad9;color:#bbb}.keyboard-details[open]>summary{color:#00e07a;margin-bottom:6px}.maqam-keyboard{display:flex;gap:2px;padding:8px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:center;flex-wrap:nowrap}.maqam-keyboard::-webkit-scrollbar{display:none}.mk-key{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:32px;height:80px;padding:4px 2px 6px;background:#1a1a32b3;border:1px solid rgba(255,255,255,.08);border-radius:0 0 6px 6px;cursor:pointer;transition:background .1s,transform .1s,box-shadow .1s;flex-shrink:0}.mk-key.mk-black{background:#0a0a14e6;height:56px;min-width:26px;border-color:#ffffff0a}.mk-key.mk-root{border-bottom:3px solid #00e07a}.mk-key.mk-tonic{background:#00e07a0f}.mk-key:hover{background:#00e07a1a;border-color:#00e07a4d}.mk-key.mk-active{background:#00e07a33;border-color:#00e07a;transform:scaleY(.96);box-shadow:0 0 10px #00e07a4d}.mk-label{font-size:.65rem;color:#999;font-weight:600}.mk-key.mk-active .mk-label{color:#00e07a}.mk-degree{font-size:.62rem;color:#555;font-family:monospace}.mk-key.mk-active .mk-degree{color:#00e07a}.mk-controls{display:flex;gap:8px;align-items:center;padding:4px 4px 0}#speed-display{font-size:.7rem;color:#aaa;font-family:monospace}.taq-row{display:flex;align-items:center;gap:3px;margin-bottom:4px}.taq-row:last-child{margin-bottom:0}.taq-maqam-row{flex-wrap:wrap;gap:4px}.maqam-pill{padding:5px 10px;font-size:.68rem;font-weight:600;background:#1a1a2e99;border:1px solid rgba(255,255,255,.06);border-radius:20px;color:#999;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-height:28px}.maqam-pill .pill-ar{font-size:.65rem;opacity:.5;font-family:Amiri,serif;margin-left:2px}.maqam-pill:hover{background:#224;border-color:#444;color:#ccc}.maqam-pill:active{transform:scale(.95)}.maqam-pill.active{background:#002a44;border-color:#0af;color:#0cf}.maqam-pill.active .pill-ar{opacity:.8}.taq-root-row{flex-wrap:wrap;gap:3px}.root-pill{padding:4px 8px;font-size:.65rem;font-weight:600;background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:12px;color:#777;cursor:pointer;transition:all .2s ease;min-height:26px}.root-pill:hover{border-color:#555;color:#aaa}.root-pill:active{transform:scale(.95)}.root-pill.active{background:#002a44;border-color:#0af;color:#0cf}.style-select{flex:1;background:#111125;color:#e0e0e0;border:1px solid #2a2a44;border-radius:6px;padding:6px 10px;font-size:.78rem;cursor:pointer;transition:border-color .2s;min-width:0;min-height:36px}.style-select:focus{border-color:#00e07a;outline:none}.style-select optgroup{color:#00e07a;font-size:.7rem;font-weight:700;font-style:normal}.style-select option{color:#e0e0e0;background:#16162a;padding:4px 8px;font-size:.78rem}.taq-main-row{gap:4px;flex-wrap:wrap}#taqasim-start{background:linear-gradient(135deg,#00e07a,#00c06a);color:#fff;font-weight:600;padding:8px 16px;border-radius:8px;white-space:nowrap;min-height:38px;box-shadow:0 2px 6px #00e07a33}#taqasim-start:hover{background:linear-gradient(135deg,#00f08a,#00d070);color:#0d0d1a}.taq-ctrl-row{gap:6px;flex-wrap:wrap}.taq-mini-select{background:#111125;color:#e0e0e0;border:1px solid #2a2a44;border-radius:4px;padding:5px 8px;font-size:.72rem;cursor:pointer;width:auto;min-height:32px}.taq-mini-select:focus{border-color:#00e07a;outline:none}.taq-octave{display:flex;align-items:center;gap:2px}.taq-tiny-btn{padding:4px 8px;font-size:.65rem;background:#1a1a2e;color:#999;border:1px solid #2a2a44;border-radius:4px;cursor:pointer;line-height:1;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}.taq-tiny-btn:hover{border-color:#00e07a;color:#00e07a}.taq-tiny-btn:active{background:#00e07a;color:#0d0d1a;transform:scale(.93)}.taq-oct-val{font-size:.7rem;color:#aaa;font-family:monospace;min-width:12px;text-align:center}.taq-vol-slider{flex:1;min-width:60px;max-width:120px}.taq-vol-label{font-size:.65rem;color:#666;font-family:monospace;white-space:nowrap}.taqasim-badge{font-size:.78rem;font-weight:700;color:#00e07a;margin-left:auto;white-space:nowrap}#instrument-visual-section{margin:4px 0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;max-height:180px;opacity:1}#instrument-visual-section.hidden{max-height:0;opacity:0;margin:0}#instrument-visual{max-width:340px;margin:0 auto;position:relative}.instrument-svg{width:100%;height:auto;display:block;transition:opacity .3s ease,transform .3s ease}.instrument-svg.switching-out{opacity:0;transform:scale(.95)}#instrument-visual:not(.instrument-playing) .instrument-svg{animation:instrument-breathe 4s ease-in-out infinite}#instrument-visual.instrument-playing .instrument-svg{animation:none;filter:drop-shadow(0 0 8px rgba(0,255,136,.3))}@keyframes instrument-breathe{0%{filter:drop-shadow(0 0 2px rgba(0,255,136,.05))}50%{filter:drop-shadow(0 0 6px rgba(0,255,136,.15))}to{filter:drop-shadow(0 0 2px rgba(0,255,136,.05))}}.inst-string{transition:stroke .1s,filter .1s}.inst-string.vibrating{animation:string-vibrate .4s ease-out}@keyframes string-vibrate{0%{transform:translateY(0)}10%{transform:translateY(-2px)}20%{transform:translateY(2px)}30%{transform:translateY(-1.5px)}40%{transform:translateY(1.5px)}50%{transform:translateY(-1px)}60%{transform:translateY(1px)}70%{transform:translateY(-.5px)}80%{transform:translateY(.5px)}to{transform:translateY(0)}}.piano-white.vibrating{animation:key-press .3s ease-out;fill:#00e07a!important}.piano-black.vibrating{animation:key-press .3s ease-out;fill:#00cc6a!important}@keyframes key-press{0%{transform:translateY(0)}30%{transform:translateY(2px)}to{transform:translateY(0)}}.violin-bow{transition:opacity .2s}.instrument-playing .violin-bow{animation:bow-move 2s ease-in-out infinite}@keyframes bow-move{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(1deg)}to{transform:translateY(0) rotate(0)}}#taqasim-stop{background:linear-gradient(135deg,#d33,#c22);color:#fff;min-height:38px;border-radius:8px;box-shadow:0 2px 6px #f443}#taqasim-stop:hover:not(:disabled){background:linear-gradient(135deg,#f44,#d33)}#practice-notation{width:100%;height:100px;border-radius:6px;display:block;background:#0f0f22;margin-bottom:6px}.practice-score-row{justify-content:center;gap:6px;margin-bottom:6px}.practice-score-box{display:flex;flex-direction:column;align-items:center;background:#112;border-radius:6px;padding:6px 10px;min-width:60px}.practice-score-label{font-size:.6rem;color:#666;text-transform:uppercase;margin-bottom:2px}.practice-score-value{font-size:1.3rem;font-weight:700;color:#00e07a;font-family:monospace}.practice-score-detail{font-size:.9rem;font-weight:600;color:#aaa;font-family:monospace}.practice-status-inline{font-size:.72rem;color:#888;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#practice-load-pattern{background:#224;color:#e0e0e0;border:1px solid #444}#practice-load-pattern:hover:not(:disabled){border-color:#00e07a;color:#00e07a}#practice-start{background:#00cc6a;color:#fff;font-weight:600}#practice-start:hover:not(:disabled){background:#00e07a;color:#0d0d1a}#practice-stop{background:#c33;color:#fff}#practice-stop:hover:not(:disabled){background:#f44}.editor-btn{padding:6px 12px;font-size:.75rem;border-radius:4px;cursor:pointer;border:1px solid #444;background:#1a1a2e;color:#ccc;min-height:34px}.editor-btn:hover:not(:disabled){border-color:#00e07a;color:#00e07a}.editor-btn:disabled{opacity:.4;cursor:not-allowed}.editor-select{padding:4px 8px;font-size:.75rem;border-radius:4px;border:1px solid #444;background:#224;color:#e0e0e0;min-height:34px}.editor-info{font-size:.7rem;color:#888;font-family:monospace;margin-left:auto}.taqasim-editor-controls{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}.ensemble-controls{margin-top:4px}.ensemble-controls .control-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}.ensemble-parts-list{margin-top:4px}.ensemble-part-item{display:flex;align-items:center;gap:6px;padding:6px;border-radius:4px;font-size:.78rem;min-height:36px}.ensemble-part-item.selected{background:#1a1a3a}.ensemble-part-item .part-name{font-weight:600;min-width:50px}.ensemble-part-item .part-notes{color:#666;font-size:.65rem;margin-left:auto}.part-mute,.part-solo,.part-delete{background:none;border:1px solid #333;color:#666;border-radius:3px;padding:4px 8px;font-size:.65rem;cursor:pointer;min-width:28px;min-height:28px}.part-mute.active{border-color:#f44;color:#f44}.part-solo.active{border-color:#fa0;color:#fa0}.part-delete:hover{border-color:#f44;color:#f44}.install-btn{padding:7px 14px;font-size:.78rem;border-radius:8px;cursor:pointer;border:1px solid rgba(0,180,255,.4);background:linear-gradient(135deg,#008cff33,#00c8ff1f);color:#4dc8ff;font-weight:700;white-space:nowrap;min-height:34px;transition:background .2s,border-color .2s,transform .15s;animation:installPulse 3s ease-in-out infinite}.install-btn:hover{border-color:#4dc8ff;background:linear-gradient(135deg,#008cff59,#00c8ff33);transform:scale(1.03)}@keyframes installPulse{0%,to{box-shadow:0 0 #00b4ff00}50%{box-shadow:0 0 8px 2px #00b4ff40}}.lang-toggle{padding:6px 12px;font-size:.75rem;border-radius:8px;cursor:pointer;border:1px solid rgba(0,224,122,.25);background:#00e07a0f;color:#00e07a;font-weight:600;white-space:nowrap;margin-left:auto;min-height:32px;transition:background .2s,border-color .2s}.lang-toggle:hover{border-color:#00e07a;background:#00e07a1f}[dir=rtl] body{font-family:Noto Naskh Arabic,Amiri,Traditional Arabic,Segoe UI,system-ui,sans-serif}[dir=rtl] .lang-toggle{margin-left:0;margin-right:auto}[dir=rtl] #header-content,[dir=rtl] #pitch-info{direction:rtl}[dir=rtl] .control-group label{text-align:right}[dir=rtl] .control-row{direction:rtl}[dir=rtl] .time-display,[dir=rtl] #transpose-display{margin-left:0;margin-right:auto}[dir=rtl] .search-bar{direction:rtl}[dir=rtl] .file-group input[type=file]::file-selector-button{margin-right:0;margin-left:6px}[dir=rtl] .taqasim-editor-controls{direction:rtl}[dir=rtl] .editor-info,[dir=rtl] .ensemble-part-item .part-notes{margin-left:0;margin-right:auto}