@font-face{font-family:KepatihanPro;src:url('./assets/fonts/kepatihanpro.ttf') format('truetype');font-display:swap}
:root{--ink:#241f3d;--muted:#756f87;--purple:#4c397b;--navy:#2c255d;--line:#e7e5ee;--bg:#f3f4f8;--amber:#f5c76b;--red:#b73745;--radius:14px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button,label.button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.note:focus-visible{outline:3px solid #b28eea;outline-offset:3px}.topbar{height:90px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1440px)/2));gap:20px}.brand{display:flex;align-items:center;gap:13px;font-size:30px;font-weight:750;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:44px;height:48px;border-radius:10px;background:var(--navy);color:var(--amber);font:34px Georgia,serif}.brand small{display:block;font-size:10px;letter-spacing:2.3px;font-weight:650;line-height:1.2;color:var(--muted)}.header-right{display:flex;align-items:center;gap:18px}.laras-tag{font-size:14px;padding:5px 13px;background:#f0ecf8;color:var(--purple);border-radius:30px}.workspace{max-width:1440px;margin:30px auto;padding:0 32px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}.controls,.editor-column{display:flex;flex-direction:column;gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}.source-card,.settings-card{padding:24px}.section-label{font-size:12px;font-weight:750;letter-spacing:1.7px;color:var(--muted);display:flex;gap:10px;align-items:center}.step{color:var(--purple);font-size:12px;font-weight:800}h1{font-size:30px;line-height:1.2;letter-spacing:-.9px;margin:22px 0 12px}h2{font-size:21px;letter-spacing:-.4px;line-height:1.3;margin:12px 0}.muted{color:var(--muted)}p{margin:10px 0 18px}.small{font-size:13px;line-height:1.5}.source-card .muted{font-size:14px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:8px;padding:10px 15px;font-size:14px;font-weight:650;white-space:nowrap;transition:background .15s,transform .15s}.button:active:not(:disabled){transform:translateY(1px)}.primary{color:#fff;background:var(--navy)}.primary:hover:not(:disabled){background:#44357b}.secondary{background:#eee9f8;color:var(--purple)}.quiet{color:var(--purple);background:transparent;border-color:var(--line)}.quiet:hover:not(:disabled){background:#f3effa}.record{width:100%;background:#fff2f2;border-color:#efd4d7;color:var(--red)}.record-dot{width:9px;height:9px;border-radius:50%;background:var(--red)}.record.recording{background:var(--red);color:white}.record.recording .record-dot{background:white;border-radius:2px}.or{display:flex;align-items:center;gap:12px;color:#9690a4;font-size:12px;margin:14px 0}.or:before,.or:after{content:"";height:1px;flex:1;background:var(--line)}.upload{border:1px dashed #ccc6db;border-radius:10px;display:flex;align-items:center;flex-direction:column;padding:16px 8px;cursor:pointer}.upload:hover{background:#f8f6fc}.upload-icon{font-size:24px;color:var(--purple)}.upload strong{font-size:14px}.upload>span:last-child{font-size:12px;color:var(--muted);margin-top:4px;text-align:center}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.upload:focus-within{outline:3px solid #b28eea}.audio-info{margin-top:15px}.audio-info>span{display:block;font-size:13px;overflow-wrap:anywhere;margin-bottom:8px}audio{width:100%;height:36px}.settings-card .section-label{margin-bottom:20px}.settings-card label:not(.check-label){font-size:14px;font-weight:550}input[type=number],select,textarea{border:1px solid #d8d4e3;border-radius:7px;background:#fff;color:var(--ink);padding:9px 10px;min-width:0}select{width:100%;font-size:14px}.select-wrap{margin:7px 0 16px}.tempo-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.tempo-row>div{display:flex;align-items:center;gap:8px}.tempo-row input{width:72px}.tempo-row span{font-size:12px;color:var(--muted)}.check-label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}input[type=checkbox]{accent-color:var(--purple);width:15px;height:15px}.divider{border-top:1px solid var(--line);margin:20px 0}.settings-card>select{margin:7px 0 18px}.range-label{display:flex;justify-content:space-between;align-items:center;gap:10px}.range-label output{font-size:13px;color:var(--purple);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--purple);margin:12px 0 2px}.settings-card .primary{width:100%;margin-top:4px}.privacy{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 0}progress{width:100%;accent-color:var(--purple);margin-top:10px}.score-card{overflow:hidden}.score-header{padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}.title-input{font-size:26px;letter-spacing:-.7px;font-weight:700;border:0;width:min(350px,100%);padding:5px 0;background:transparent;color:var(--ink);margin-top:7px}.file-tag{font-size:11px;color:#ddd1f5}.score-toolbar{padding:12px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fcfbfe}.toolbar-group{display:flex;gap:8px;flex-wrap:wrap}.score-toolbar .button{padding:7px 10px;font-size:13px}.score-paper{min-height:350px;padding:28px 24px 18px;background:white}.empty-state{padding:44px 10px 35px;text-align:center;color:var(--muted)}.empty-notes{font:42px Georgia,serif;color:#c9c2dc;letter-spacing:3px;line-height:1.5}.empty-state h2{color:var(--ink);font-size:20px;margin-top:18px}.empty-state p{font-size:14px}.empty-state .button{margin-top:6px}.score-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:12px 24px;font-size:12px;color:var(--muted)}.score-footer>span:last-child{color:#cd8843;white-space:nowrap}.score-line{width:100%;display:block;overflow:visible}.score-line text{user-select:none}.note{cursor:pointer}.note .selection-bg{fill:transparent}.note.selected .selection-bg{fill:#eee5fc;stroke:#bb9ce5;stroke-width:1}.note:hover .selection-bg{fill:#f2eef8}.note.playing .selection-bg{fill:#ffe6ae}.beat-guide{stroke:#eeeaf3;stroke-dasharray:3 6}.note-number{fill:#24202f;font-family:KepatihanPro,Georgia,serif;font-size:29px}.lyric-text{font-family:Arial,sans-serif;font-size:18px;fill:#332d42}.measure-number{font:11px Arial,sans-serif;fill:#aaa1b9}.melisma{stroke:#655b75;stroke-width:1.2;fill:none}.score-summary{font-size:12px;color:var(--muted);padding-top:8px}.note-editor{padding:18px 24px;background:#f8f5fd;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:end}.note-editor strong{font-size:14px;flex-basis:100%}.note-editor label{display:flex;flex-direction:column;gap:4px;font-size:12px}.note-editor select{width:130px}.note-editor input{width:105px;font-size:14px}.danger{color:var(--red);background:#fff0f0}.manual-tools{padding:12px 24px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line)}.manual-tools .button{font-size:12px;padding:6px 10px}.lyrics-card{padding:24px 26px}.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.lyrics-heading h2{font-size:21px;margin-bottom:5px}.pill{border-radius:24px;background:#f3f0f8;font-size:12px;color:var(--muted);padding:5px 10px;white-space:nowrap}.lyrics-card>.muted{font-size:14px;max-width:710px}.lyrics-entry{display:flex;gap:12px;align-items:center}.lyrics-entry textarea{flex:1;resize:vertical;font-size:16px;min-height:75px}.syllables{padding:16px 0;display:flex;flex-direction:column;gap:10px;min-height:62px}.syllable-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.verse-label{font-size:12px;color:var(--muted);margin-right:6px}.syllable{padding:6px 12px;font-size:14px;border:1px solid #dcd5e9;background:#fff;border-radius:7px;color:var(--purple)}.syllable.assigned{background:#eee8f7;border-color:#c4b2e0}.syllable.current{box-shadow:0 0 0 2px #b799df}.lyric-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.lyric-actions p{margin:0}.lyrics-card>p:last-child{margin:12px 0 0}.footnote{font-size:12px;color:var(--muted);margin:0 4px 24px}.notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:white;padding:13px 20px;border-radius:10px;box-shadow:0 6px 24px #241f3d25;max-width:calc(100vw - 32px);font-size:14px;z-index:30}.admin-dialog{width:min(750px,calc(100vw - 32px));max-height:90vh;border:1px solid var(--line);border-radius:16px;padding:28px;color:var(--ink)}.admin-dialog::backdrop{background:#16102466;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-heading h2{margin-bottom:0}.admin-dialog>.muted{font-size:14px}.tuning-table-wrap{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin:18px 0}.tuning-table{border-collapse:collapse;width:100%;font-size:14px}.tuning-table th{position:sticky;top:0;background:#f4f1f9;color:var(--muted);font-weight:600;z-index:1}.tuning-table td,.tuning-table th{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}.tuning-table td:first-child{font-size:22px;white-space:nowrap}.tuning-table input{width:105px;font-size:14px}.tuning-table .button{padding:6px 10px;font-size:12px}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.loading-screen{min-height:330px;display:grid;place-content:center;color:var(--muted);text-align:center}.loading-screen strong{color:var(--ink);font-size:20px}.loading-screen p{font-size:14px}.waveform{height:48px;display:flex;justify-content:center;align-items:center;gap:5px;margin:20px 0}.waveform span{display:block;width:4px;background:#9982bd;border-radius:5px;animation:pulse 1s ease-in-out infinite alternate}.waveform span:nth-child(2n){animation-delay:.2s}.waveform span:nth-child(3n){animation-delay:.5s}@keyframes pulse{to{transform:scaleY(.4)}}[hidden]{display:none!important}
@media(min-width:1550px){.workspace{margin-top:40px}}@media(max-width:1050px){.workspace{grid-template-columns:270px minmax(0,1fr);padding:0 20px;gap:18px}.source-card,.settings-card{padding:20px}.score-header{align-items:start;flex-wrap:wrap}.score-toolbar{align-items:start;flex-direction:column}.note-editor select{width:120px}.score-footer{align-items:start;flex-direction:column}.lyrics-entry{align-items:stretch;flex-direction:column}.lyrics-entry .button{align-self:flex-start}}@media(max-width:760px){.topbar{height:76px;padding:0 18px}.brand{font-size:26px}.brand small{font-size:9px}.header-right{gap:8px}.header-right .button{padding:8px 10px;font-size:12px}.laras-tag{display:none}.workspace{display:flex;flex-direction:column;margin:18px auto;padding:0 14px}.controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px}.editor-column{width:100%;gap:14px}.source-card,.settings-card{padding:18px}h1{font-size:25px;margin-top:18px}.score-header,.lyrics-card{padding:20px}.title-input{font-size:24px;max-width:100%}.score-paper{padding:22px 10px 16px;min-height:300px}.score-toolbar{padding:10px 16px}.lyrics-heading{align-items:start}.lyrics-heading h2{font-size:19px}.lyric-actions{align-items:start;flex-direction:column}.score-footer{padding:12px 16px}.note-editor{padding:16px}.section-label{font-size:11px;letter-spacing:1.2px}.empty-notes{font-size:34px}.admin-dialog{padding:20px}.tuning-table td,.tuning-table th{padding:8px}.tuning-table input{width:88px}.score-line .lyric-text{font-size:20px}}
@media(max-width:480px){.controls{display:flex;flex-direction:column}.source-card h1{font-size:27px}.source-card h1 br{display:none}.source-card .upload{padding:10px}.settings-card{display:block}.lyrics-heading .pill{display:none}.export{padding:9px 12px}.score-header{gap:12px}.note-editor input{width:112px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.count-in{margin-top:16px;text-align:center;background:#f4f0fa;border-radius:10px;padding:12px}.count-in>span{font-size:11px;letter-spacing:2px;color:var(--muted)}.count-in>div{display:flex;justify-content:center;gap:10px;margin-top:8px}.count-in [data-count]{display:grid;place-items:center;width:38px;height:40px;border-radius:8px;font-size:24px;color:#9b90af;font-weight:700}.count-in [data-count].active{color:white;background:var(--purple)}

.score-paper{overflow-x:auto}.score-line{min-width:900px}.score-summary{min-width:900px}.seleh-guide{stroke:#c9bddb;stroke-width:1.3}.count-in [data-count].seleh{box-shadow:inset 0 0 0 2px #cdb880}.count-in [data-count].seleh.active{background:#71521a;color:#fff}.measure-number{font-size:12px;fill:#81708e}

.grimingan-card{padding:24px}.grimingan-card h2{font-size:21px}.grimingan-sample{margin-top:16px}.grimingan-sample label{display:block;font-size:14px;font-weight:650;margin-bottom:7px}.grimingan-player{display:block;width:100%;height:40px}@media(max-width:760px){.grimingan-card{padding:18px;grid-column:1/-1}}

.time-cursor{stroke:#b73745;stroke-width:2;pointer-events:none}.active-beat{fill:#f5c76b;opacity:.18;pointer-events:none}.beat-count{font:11px Arial;fill:#9b90af}.beat-count.current{fill:#71521a;font-weight:700}.quarter-guide{stroke:#ddd7e7;stroke-width:1}.position-tools{width:100%;font-size:12px}.position-tools>div{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.position-tools .button{padding:6px 12px}.note{touch-action:pan-y}

.rest-slot{cursor:pointer}.rest-slot.selected circle{fill:#b73745;r:4}.rest-slot:focus-visible{outline:none}.rest-slot:focus-visible rect{stroke:#9982bd;stroke-width:2}.lyric-text,.syllable{cursor:grab}.lyric-text{touch-action:none}.syllable:active,.lyric-text:active{cursor:grabbing}