@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-vietnamese-wght-normal-CnvboYUG.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-ext-wght-normal-Ca2vKHc0.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-wght-normal-ukD16Tqj.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-sans-latin-ext-400-normal-Q_nF8v4l.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-400-normal-r32jotim.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-sans-latin-400-normal-DRC__1Mx.woff2) format("woff2"),url(/assets/instrument-sans-latin-400-normal-D1W7dsQl.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/instrument-sans-latin-ext-500-normal-CTEe1bJa.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-500-normal-CAxz3nsc.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/instrument-sans-latin-500-normal-Dk9ku72i.woff2) format("woff2"),url(/assets/instrument-sans-latin-500-normal-Z6ESRlEs.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/instrument-sans-latin-ext-600-normal-BsaQcF38.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-600-normal-DMks36a2.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/instrument-sans-latin-600-normal-B7fBEWYG.woff2) format("woff2"),url(/assets/instrument-sans-latin-600-normal-B9e8oLYv.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Libre Baskerville;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/libre-baskerville-latin-ext-400-normal-DehDhP4C.woff2) format("woff2"),url(/assets/libre-baskerville-latin-ext-400-normal-Dm_CMUlS.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Libre Baskerville;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/libre-baskerville-latin-400-normal-C42RasBZ.woff2) format("woff2"),url(/assets/libre-baskerville-latin-400-normal-B6A5kCEq.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Libre Baskerville;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/libre-baskerville-latin-ext-700-normal-URU-TBJY.woff2) format("woff2"),url(/assets/libre-baskerville-latin-ext-700-normal-CwmVKpN0.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Libre Baskerville;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/libre-baskerville-latin-700-normal-CLGq6Yj4.woff2) format("woff2"),url(/assets/libre-baskerville-latin-700-normal-DFRs2Bxw.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--primary: #2C3E50;--secondary: #ECF0F1;--accent: #14b8a6;--bg: #FFFFFF;--text: #34495E;--text-light: #7F8C8D;--border: #DEE2E6;--sidebar-width: 280px;--topbar-height: 52px;--controls-height: 56px;--keyboard-height: 80px;--ios-window-controls-left: 0px}*{margin:0;padding:0;box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skip-to-content{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;padding:12px 24px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;border-radius:0 0 8px;text-decoration:none}.skip-to-content:focus{position:fixed;left:0;top:0;width:auto;height:auto;overflow:visible}html,body,#root{height:100%;width:100%;overflow:hidden;font-family:Instrument Sans,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.loading-screen{height:100%;display:flex;align-items:center;justify-content:center}.auth-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#2c3e50,#34495e,#2c3e50);display:flex;align-items:center;justify-content:center;z-index:1000}.auth-container{width:100%;max-width:400px;padding:24px}.auth-brand{text-align:center;margin-bottom:32px}.auth-title{font-family:Fraunces Variable,serif;font-size:32px;font-weight:700;color:#ecf0f1;letter-spacing:-.5px;margin-top:16px}.auth-subtitle{font-size:14px;color:#ecf0f1b3;margin-top:6px}.auth-form{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:13px;font-weight:500;color:#ecf0f1cc;margin-bottom:6px}.form-group input{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:#ffffff0f;color:#ecf0f1;font-size:15px;font-family:inherit;outline:none;transition:border-color .2s}.form-group input:focus{border-color:var(--accent)}.form-group input::placeholder{color:#ecf0f159}.form-error{color:var(--accent);font-size:13px;margin-bottom:12px}.form-success{color:#2ecc71;font-size:14px;margin-bottom:12px;text-align:center;padding:12px;background:#2ecc711a;border-radius:6px}.auth-switch{text-align:center;font-size:13px;color:#ecf0f199;margin-top:16px}.auth-switch a,.auth-form a{color:var(--accent);text-decoration:none;font-weight:500}.auth-form a:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#0d9488}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--secondary);color:var(--text)}.btn-secondary:hover{background:#d5dbdb}.btn-full{width:100%}.btn-sm{padding:6px 14px;font-size:13px;border-radius:8px}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#fff;cursor:pointer;border-radius:8px;transition:background .15s;flex-shrink:0}.icon-btn:hover{background:#ffffff1a}.app{height:100%;display:flex;flex-direction:column}.native-audio-status{position:relative;margin:8px 12px 0;padding:9px 12px;border-radius:12px;display:flex;align-items:center;gap:10px;border:1px solid transparent;overflow:hidden}.native-audio-status-content{display:flex;flex-direction:column;min-width:0}.native-audio-status-title{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85}.native-audio-status-message{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.native-audio-status-indicator{width:10px;height:10px;border-radius:999px;flex-shrink:0}.native-audio-status-info{background:linear-gradient(180deg,#f8fcff,#eff7fe);color:#1e4f7d;border-color:#cce0f2}.native-audio-status-info .native-audio-status-indicator{background:var(--accent)}.native-audio-status-error{background:linear-gradient(180deg,#fff8f7,#fdefea);color:#9b322a;border-color:#f0c8c1}.native-audio-status-error .native-audio-status-indicator{background:#e66a57}.native-audio-status.is-active-download:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(20,184,166,.9) 50%,transparent 100%);transform:translate(-100%);animation:native-audio-download-sweep 1.3s linear infinite}@keyframes native-audio-download-sweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.app-body{flex:1;display:flex;overflow:hidden;position:relative}.top-bar{height:calc(var(--topbar-height) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--primary);border-bottom:1px solid rgba(20,184,166,.3);display:flex;align-items:center;padding-left:calc(12px + env(safe-area-inset-left,0px) + var(--ios-window-controls-left));padding-right:12px;gap:12px;z-index:50;flex-shrink:0;touch-action:manipulation}.top-bar-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.brand-mini{display:flex;align-items:center;gap:8px}.brand-mini .brand-name{font-family:Fraunces Variable,serif;font-weight:700;font-size:16px;color:#ececec}.brand-mini svg{display:block}.top-bar-center{flex:1;min-width:0;text-align:center}.file-title{font-size:14px;font-weight:500;font-family:Instrument Sans,sans-serif;color:#ffffff8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.file-title.active{color:#fff;font-weight:600;font-size:15px}.top-bar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.midi-status{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.midi-status.disconnected{background:#fdecea;color:#c0392b}.midi-status.connected{background:#e8f8f0;color:#27ae60}.midi-status.unsupported{background:#fef3e2;color:#e67e22}.user-menu{position:relative}.dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0000001f;min-width:180px;z-index:100;overflow:hidden}.dropdown-header{padding:12px 16px;font-size:13px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}.dropdown-item{width:100%;padding:10px 16px;border:none;background:none;font-family:inherit;font-size:14px;color:var(--text);text-align:left;cursor:pointer}.dropdown-item:hover{background:var(--secondary)}.midi-settings{position:relative}.midi-settings-trigger{display:flex;align-items:center;gap:6px;padding:6px 10px;border:none;background:transparent;color:var(--text-light);cursor:pointer;border-radius:8px;font-size:12px;font-weight:500;transition:all .15s}.midi-settings-trigger:hover{background:var(--secondary)}.midi-settings-trigger.connected{color:#27ae60}.midi-settings-trigger.open{background:var(--secondary)}.midi-settings-trigger .chevron{transition:transform .2s}.midi-settings-trigger.open .chevron{transform:rotate(180deg)}.midi-settings-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:280px;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px #0000001f;z-index:100;padding:16px}.midi-settings-section{margin-bottom:16px}.midi-settings-section:last-child{margin-bottom:0}.midi-settings-label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.midi-mode-selector{display:flex;gap:4px;background:var(--secondary);padding:4px;border-radius:8px}.midi-mode-btn{flex:1;padding:8px 4px;border:none;background:transparent;color:var(--text-light);font-size:12px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .15s}.midi-mode-btn:hover:not(:disabled){background:#ffffff80}.midi-mode-btn.active{background:var(--bg);color:var(--text);box-shadow:0 1px 3px #0000001a}.midi-mode-btn:disabled{opacity:.4;cursor:not-allowed}.midi-mode-description{font-size:11px;color:var(--text-light);margin-top:6px;font-style:italic}.midi-volume-slider{width:100%;accent-color:var(--accent)}.midi-volume-value{text-align:right;font-size:12px;color:var(--text-light);margin-top:4px}.midi-device-select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:13px;cursor:pointer}.midi-device-list-text{font-size:13px;color:var(--text);background:var(--secondary);border-radius:8px;padding:8px 10px}.midi-device-select:focus{outline:none;border-color:var(--accent)}.midi-settings-info{font-size:12px;color:var(--text-light);padding:8px;background:var(--secondary);border-radius:8px;margin-bottom:12px}.midi-settings-info.midi-settings-warning{background:#fef3e2;color:#e67e22}.midi-settings-actions{display:flex;gap:8px;margin-top:12px}.midi-settings-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .15s}.midi-settings-btn:hover{background:var(--secondary)}.midi-last-message{font-size:11px;color:var(--text-light);text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.sidebar{width:var(--sidebar-width);background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transform:translate(-100%);position:absolute;top:0;left:0;bottom:0;z-index:40;transition:transform .25s ease}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}.sidebar-header h2{font-family:Fraunces Variable,serif;font-size:18px;font-weight:700}.upload-section{padding:12px 16px}.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;border:2px dashed rgba(20,184,166,.35);border-radius:12px;cursor:pointer;transition:all .2s;text-align:center;background:#14b8a605}.upload-area:hover,.upload-area.dragover{border-color:var(--accent);background:#14b8a60a}.upload-text{font-size:14px;font-weight:500;color:var(--text)}.upload-hint{font-size:12px;color:var(--text-light)}.upload-progress{margin-top:8px;border-radius:6px;overflow:hidden;background:var(--secondary)}.upload-progress-bar{height:3px;background:var(--accent);animation:progressAnim 1.5s ease infinite;width:60%}@keyframes progressAnim{0%{transform:translate(-100%)}to{transform:translate(200%)}}.upload-progress-text{display:block;text-align:center;font-size:12px;color:var(--text-light);padding:6px}.file-list-container{flex:1;overflow-y:auto;padding:8px 12px}.file-list-empty{text-align:center;padding:40px 20px;color:var(--text-light)}.file-list-empty p{margin-top:12px;font-size:14px}.file-list-empty .hint{font-size:12px;margin-top:4px}.file-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s;margin-bottom:2px}.file-item:hover{background:var(--secondary)}.file-item.active{background:#14b8a61a}.file-item-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-item-icon.midi{background:#14b8a61f;color:var(--accent)}.file-item-icon.pdf{background:#e74c3c1f;color:var(--accent)}.file-item-info{flex:1;min-width:0}.file-item-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-item-meta{font-size:11px;color:var(--text-light);margin-top:2px}.file-item-meta.difficulty-row{display:flex;align-items:center;gap:6px}.file-item-delete{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-light);cursor:pointer;border-radius:6px;opacity:0;transition:all .15s;flex-shrink:0}.file-item:hover .file-item-delete{opacity:1}.file-item-delete:hover{background:#fdecea;color:var(--accent)}.file-list-divider{display:flex;align-items:center;gap:8px;margin:8px 12px;color:var(--accent);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px}.file-list-divider:before,.file-list-divider:after{content:"";flex:1;height:1px;background:var(--border)}.difficulty-stars{display:inline-flex;gap:1px;vertical-align:middle}.difficulty-unrated{font-style:italic}.main-content{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:margin-left .25s ease}.main-content.sidebar-open{margin-left:var(--sidebar-width)}.welcome-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}.welcome-inner{text-align:center;max-width:480px}.welcome-inner h2{font-family:Fraunces Variable,serif;font-size:24px;font-weight:700;color:var(--primary);margin-top:20px}.welcome-inner p{font-size:14px;color:var(--text-light);margin-top:8px;line-height:1.5}.welcome-features{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:28px}.feature{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text)}.notation-view{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fafbfc}.notation-title{font-family:Fraunces Variable,serif;font-size:28px;font-weight:700;color:var(--primary);text-align:center;padding:24px 16px 8px;margin:0;letter-spacing:-.5px}.notation-header{padding:18px 16px 6px;text-align:center}.notation-header .notation-title{padding:0}.notation-subtitle{margin-top:6px;font-size:15px;font-weight:500;color:var(--text-light)}.notation-meta{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;color:var(--text-light);font-size:12px}.notation-meta-row{display:inline-flex;align-items:center;gap:6px}.notation-meta-label{text-transform:uppercase;letter-spacing:.5px;font-weight:600;color:var(--text-light)}.notation-meta-value{color:var(--text);font-weight:500}.notation-scroll-wrapper{overflow:auto;-webkit-overflow-scrolling:touch;padding:16px;flex:1}.notation-container{min-width:800px;max-width:1200px;margin:0 auto;background:var(--bg);border-radius:8px;box-shadow:0 1px 4px #0000000f;padding:20px;min-height:400px;overflow:visible;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}.notation-container svg,.notation-container text{-webkit-user-select:none;user-select:none}.notation-render{position:relative;z-index:2}.notation-render canvas{display:block;margin:0 auto}.notation-loop-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}.notation-loop-rect{position:absolute;background:#14b8a638;border:2px solid rgba(20,184,166,.65);border-radius:6px}.notation-loop-handle{position:absolute;width:12px;background:#14b8a659;border:1px solid rgba(20,184,166,.6);border-radius:6px;pointer-events:auto;cursor:ew-resize;box-shadow:0 2px 6px #00000026;touch-action:none}.notation-loop-handle:before{content:"";position:absolute;inset:-6px -16px;min-width:44px;min-height:44px}.notation-loop-handle.start{border-top-right-radius:3px;border-bottom-right-radius:3px}.notation-loop-handle.end{border-top-left-radius:3px;border-bottom-left-radius:3px}.notation-loop-remove{position:absolute;width:22px;height:22px;border-radius:999px;border:none;background:#14b8a6f2;color:#1b1b1b;font-size:16px;font-weight:700;line-height:20px;pointer-events:auto;cursor:pointer;box-shadow:0 4px 10px #0003}.notation-container svg{overflow:visible}@media(min-width:900px){.notation-container{min-width:auto;width:100%}}@media(max-width:768px){.notation-container{min-width:0;width:100%;padding:4px;min-height:200px}}@media(max-width:899px){.notation-scroll-wrapper{padding:8px}.notation-container{padding:12px}.notation-title{font-size:24px}}.pianolab-cursor{position:absolute;pointer-events:none;z-index:-1;background:#14b8a661;border-left:3px solid rgba(20,184,166,1);border-radius:0 2px 2px 0;transition:left 80ms linear}.pdf-view{flex:1;overflow:auto;padding:16px;background:#f5f5f5}.pdf-container{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center}.pdf-container canvas{max-width:100%;background:#fff;box-shadow:0 2px 8px #0000001a;border-radius:4px}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:20}.loading-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls-bar{height:var(--controls-height);background:linear-gradient(to bottom,#2d4057 0%,var(--primary) 100%);border-top:1px solid rgba(20,184,166,.25);display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0;touch-action:manipulation}.controls-left,.controls-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.controls-left{gap:6px}.controls-center{flex:1;display:flex;align-items:center;justify-content:center;gap:24px}.prep-center{justify-content:flex-start}.control-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:#ffffff1a;color:#ecf0f1;cursor:pointer;border-radius:10px;transition:background .15s}.control-btn:hover{background:#fff3}.control-btn.active{background:var(--accent)}.hand-toggle-group{display:flex;align-items:center;gap:4px}.hand-toggle{width:36px;height:34px;font-size:11px;font-weight:700;letter-spacing:.3px}.playalong-control{position:relative;display:flex;align-items:center}.playalong-tooltip{position:absolute;bottom:calc(100% + 8px);right:0;left:auto;max-width:min(180px,calc(100vw - 16px));white-space:normal;text-align:center;background:#14181ce6;color:#ecf0f1;font-size:11px;font-weight:600;letter-spacing:.2px;padding:6px 8px;border-radius:6px;pointer-events:none;box-shadow:0 6px 16px #00000040;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}.playalong-tooltip:after{content:"";position:absolute;bottom:-5px;right:10px;left:auto;transform:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(20,24,28,.9)}.playalong-control:hover .playalong-tooltip,.playalong-control:focus-within .playalong-tooltip{opacity:1;transform:translateY(0)}.midi-audio-control{display:flex;align-items:center;gap:8px;padding:0 6px;border-radius:10px;background:#ffffff0f}.midi-audio-label{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#ecf0f1b3}.volume-bar{width:90px;accent-color:var(--accent)}.volume-bar:disabled{opacity:.4}.tempo-control,.measure-control{display:flex;align-items:center;gap:8px}.tempo-control label,.measure-control label{font-size:11px;font-weight:500;color:#ecf0f199;text-transform:uppercase;letter-spacing:.5px}.tempo-value,.measure-value{font-size:14px;font-weight:600;color:#ecf0f1;min-width:44px;text-align:center}.tempo-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:#ffffff1a;color:#ecf0f1;cursor:pointer;border-radius:6px;font-size:14px;font-weight:600;transition:background .15s}.tempo-btn:hover{background:#fff3}.tempo-select{background:#ffffff1a;color:#ecf0f1;border:none;border-radius:6px;padding:4px 6px;font-size:13px;font-weight:600;cursor:pointer;width:100%}.prep-status-panel{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:228px;padding:6px 10px;border-radius:10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.prep-progress-ring{display:block;flex-shrink:0}.prep-progress-ring-track{fill:none;stroke:#ffffff38;stroke-width:2}.prep-progress-ring-value{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .3s ease;animation:prep-pulse 1.2s ease-in-out infinite}.prep-status-panel.is-failed .prep-progress-ring-value{stroke:#ff7b7b;animation:none}.prep-status-copy{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}.prep-status-row{display:flex;align-items:baseline;gap:6px}.prep-status-title{font-size:13px;font-weight:700;color:#ecf0f1;letter-spacing:.1px}.prep-status-percent{font-size:10px;font-weight:700;color:#ecf0f1b3}.prep-status-meta{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500;color:#ecf0f1a3}.prep-status-error{font-size:11px;font-weight:600;color:#ffd6d6}.prep-fallback-btn{height:22px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);background:#ffffff14;color:#ecf0f1eb;cursor:pointer;border-radius:999px;font-size:10px;font-weight:600;padding:0 7px;white-space:nowrap;transition:background .15s,border-color .15s}.prep-fallback-btn:hover{background:#ffffff24;border-color:#ffffff57}@keyframes prep-pulse{0%,to{opacity:1}50%{opacity:.45}}.keyboard-container{background:linear-gradient(to bottom,#253443,#1e2d3c);padding:8px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(20,184,166,.3);flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.piano-keyboard{height:var(--keyboard-height);margin:0 auto}.white-key{width:var(--white-key-width, 18px);height:100%;background:linear-gradient(to bottom,#f8f8f8,#fff);border:1px solid #C8C8C8;border-radius:0 0 5px 5px;cursor:pointer;z-index:1;transition:background .08s}.white-key:hover{background:linear-gradient(to bottom,#f0f0f0,#f5f5f5)}.white-key.active,.white-key.highlight{background:var(--accent)!important;border-color:var(--accent)}.black-key{width:var(--black-key-width, 12px);height:60%;background:linear-gradient(to bottom,#454545,#202020);border-radius:0 0 4px 4px;cursor:pointer;z-index:2;box-shadow:0 3px 6px #00000080;transition:background .08s}.black-key:hover{background:linear-gradient(to bottom,#525252,#2e2e2e)}.black-key.active,.black-key.highlight{background:var(--accent)!important}.keyboard-container.compact .piano-keyboard{height:64px}.keyboard-container.compact .black-key{height:57%}@media(orientation:portrait)and (min-width:744px)and (max-width:1024px){:root{--controls-height: 50px;--keyboard-height: 68px}.notation-header{padding:10px 12px 2px}.notation-title{font-size:22px;padding:12px 12px 4px;line-height:1.2}.notation-subtitle{margin-top:4px;font-size:13px}.notation-meta{margin-top:8px;gap:6px 12px;font-size:11px}.notation-scroll-wrapper{padding:8px}.notation-container{min-width:0;width:100%;max-width:900px;padding:10px}.notation-container canvas,.notation-container svg{max-width:100%;height:auto}.controls-bar{padding:0 10px;gap:10px}.control-btn{width:34px;height:34px;border-radius:9px}.tempo-value,.measure-value{min-width:36px;font-size:13px}.tempo-btn{width:24px;height:24px}}@media(min-width:768px){.sidebar{position:relative;transform:none}.sidebar:not(.open){display:none}.main-content.sidebar-open{margin-left:0}.close-btn{display:none}}@media(max-width:767px){.native-audio-status{margin:6px 8px 0;padding:8px 10px;border-radius:10px;gap:8px}.native-audio-status-title{font-size:10px}.native-audio-status-message{font-size:12px}.prep-status-panel{min-width:200px;padding:5px 8px}.prep-fallback-btn{height:20px;font-size:10px;padding:0 6px}.prep-status-meta{gap:6px;flex-wrap:wrap}}@media(max-width:767px){.sidebar.open{width:100%}.midi-status-text{display:none}.controls-center{gap:12px}.tempo-control label,.measure-control label,.midi-audio-label{display:none}.volume-bar{width:70px}}@media(max-height:600px){:root{--keyboard-height: 60px}.white-key{width:14px}.black-key{width:9px}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a0aec0}.landing-page{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--bg);font-family:Instrument Sans,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);--landing-ink: #0f1a24;--landing-cream: #f6f4ef;--landing-mist: #d8e2ea;--landing-glow: rgba(20, 184, 166, .35);--landing-shadow: rgba(12, 27, 42, .22)}.landing-header{position:sticky;top:0;z-index:100;background:#0f1a24eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}.landing-header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}.landing-brand{display:flex;align-items:center;gap:10px}.landing-brand-name{font-family:Fraunces Variable,serif;font-size:20px;font-weight:700;color:#ecf0f1}.landing-nav{display:flex;align-items:center;gap:10px}.landing-container{max-width:1100px;margin:0 auto;padding:0 24px}.landing-container--wide{max-width:1200px}.landing-container--narrow{max-width:560px}.landing-hero .landing-container{max-width:none;margin:0;padding-left:clamp(24px,5vw,80px);padding-right:clamp(24px,5vw,80px)}.landing-hero{position:relative;background:radial-gradient(circle at 15% 15%,rgba(20,184,166,.35),transparent 45%),radial-gradient(circle at 80% 20%,rgba(84,112,151,.45),transparent 48%),linear-gradient(135deg,#0f1a24,#1b2c3d,#152130);padding:96px 0 88px;text-align:left;overflow:hidden}.landing-hero:before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.08),transparent 60%);animation:landing-glow 12s ease-in-out infinite;pointer-events:none;z-index:0}.landing-hero:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 18px);opacity:.35;pointer-events:none;z-index:0}.landing-hero-title{display:block;margin:0 0 24px;padding:0;font-family:Fraunces Variable,serif;font-size:clamp(38px,6vw,68px);font-weight:700;color:#ecf0f1;line-height:1.1;letter-spacing:-1px;position:relative;z-index:1;animation:landing-rise .9s ease forwards;opacity:0;transform:translateY(16px)}.landing-hero-notes{position:absolute;inset:0;pointer-events:none;z-index:0}.landing-hero-notes .note-symbol{position:absolute;display:block;color:#ecf0f1b3;opacity:.28;filter:drop-shadow(0 0 4px rgba(15,26,36,.2));animation:note-play 12s ease-in-out infinite;transform:translate(-50%,-50%);transform-origin:center}.landing-hero-notes .note-symbol svg{display:block;width:58px;height:auto;overflow:visible}.landing-hero-notes .note-symbol--single svg{width:38px}.landing-hero-notes .note-symbol--double svg{width:64px}.landing-hero-notes .note-symbol--whole svg{width:44px}.landing-hero-notes .note-symbol--half svg{width:32px}.landing-hero-notes .note-seq-1{left:57%;top:12%;animation-delay:0s}.landing-hero-notes .note-seq-2{left:83%;top:28%;animation-delay:2.2s}.landing-hero-notes .note-seq-3{left:70%;top:62%;animation-delay:4.4s}.landing-hero-notes .note-seq-4{left:94%;top:50%;animation-delay:6.6s}.landing-hero-notes .note-seq-5{left:87%;top:18%;animation-delay:8.8s}.landing-hero-notes .note-seq-6{left:3%;top:42%;opacity:.12;animation-delay:1.1s;overflow:hidden;max-height:14px}.landing-hero-notes .note-seq-6 svg{width:10px;height:14px;overflow:hidden}.landing-hero-notes .note-seq-7{left:78%;top:76%;animation-delay:5.5s}.landing-hero-notes .note-seq-8{left:7%;top:80%;opacity:.1;animation-delay:3.3s;overflow:hidden;max-height:13px}.landing-hero-notes .note-seq-8 svg{width:9px;height:13px;overflow:hidden}.landing-hero-line{display:block;margin-bottom:.12em}.landing-hero-line:last-child{margin-bottom:0}.landing-hero-prefix{display:inline}.landing-hero-rotator{position:relative;display:inline-flex;align-items:baseline;min-width:13ch;height:1.4em;padding-bottom:.12em;padding-right:.3em;overflow:hidden}.landing-hero-rotator:after{content:"sheet music.";visibility:hidden;white-space:nowrap}.landing-hero-rotator span{position:absolute;left:0;top:0;opacity:0;transform:translateY(120%);animation:landing-rotate 9s infinite;line-height:1.1;white-space:nowrap}.landing-hero-rotator span:nth-child(1){animation-delay:1s}.landing-hero-rotator span:nth-child(2){animation-delay:1s}.landing-hero-rotator span:nth-child(3){animation-delay:4s}.landing-hero-rotator span:nth-child(4){animation-delay:7s}.rotator-mobile{display:none}@media(max-width:767px){.rotator-desktop{display:none}.rotator-mobile{display:inline}}.landing-hero-kicker{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#ecf0f18c;margin-bottom:18px;position:relative;z-index:1;animation:landing-rise .8s ease forwards;opacity:0;transform:translateY(12px)}.landing-hero-sub{font-size:clamp(15px,2vw,18px);color:#ecf0f1bf;max-width:560px;margin:0 0 32px;line-height:1.6;position:relative;z-index:1;animation:landing-rise .9s ease forwards;animation-delay:.1s;opacity:0;transform:translateY(16px)}.landing-hero-ctas{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;position:relative;z-index:1;animation:landing-rise 1s ease forwards;animation-delay:.18s;opacity:0;transform:translateY(16px)}.landing-hero-login{margin-top:20px;position:relative;z-index:1;animation:landing-rise 1s ease forwards;animation-delay:.28s;opacity:0;transform:translateY(16px)}.landing-hero-link{background:transparent;border:1px solid rgba(236,240,241,.25);color:#ecf0f1cc;padding:8px 16px;border-radius:999px;font-size:13px}.landing-hero-link:hover{background:#ffffff14}.landing-cta-primary{background:var(--accent);color:#fff;font-size:16px;padding:14px 28px;border-radius:12px}.landing-cta-primary:hover{background:#0d9488}.landing-cta-secondary{background:#ffffff1f;color:#ecf0f1;border:1px solid rgba(255,255,255,.2);font-size:16px;padding:14px 28px;border-radius:12px}.landing-cta-secondary:hover{background:#fff3}.landing-cta-ghost{background:transparent;color:#ecf0f1cc;border:1px solid rgba(255,255,255,.25);font-size:15px;padding:12px 24px;border-radius:12px}.landing-cta-ghost:hover{background:#ffffff14}.landing-section-title{font-family:Fraunces Variable,serif;font-size:clamp(24px,4vw,36px);font-weight:700;color:var(--primary);text-align:center;margin-bottom:12px}.landing-section-sub{text-align:center;color:var(--text-light);font-size:16px;line-height:1.5;max-width:600px;margin:0 auto 32px}.landing-composers{background:#0f1a24;padding:16px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);text-align:center}.landing-composers-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;padding:0 16px}.landing-composers-label{font-weight:600;color:#ffffff8c;margin-right:4px;white-space:nowrap}.landing-composers-names{color:#ffffff6b;letter-spacing:.02em}.landing-demo{background:radial-gradient(circle at 90% 10%,rgba(20,184,166,.08),transparent 50%),radial-gradient(circle at 10% 90%,rgba(84,112,151,.07),transparent 50%),#f0f5f6;padding:64px 0 72px;position:relative;z-index:1}.landing-demo-header{margin-bottom:24px}.landing-demo-label{font-family:Fraunces Variable,serif;font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--primary);margin-bottom:6px}.landing-demo-hint{font-size:15px;color:var(--text-light)}.landing-demo-placeholder{background:#fff;border-radius:16px;border:2px dashed var(--border);min-height:320px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:0}.landing-demo-placeholder:hover{border-color:var(--accent);background:#14b8a608}.landing-demo-placeholder-inner{text-align:center;padding:40px}.landing-demo-play-btn{display:inline-flex;margin-bottom:16px;transition:transform .2s}.landing-demo-placeholder:hover .landing-demo-play-btn{transform:scale(1.08)}.landing-demo-placeholder-label{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px}.landing-demo-placeholder-hint{font-size:14px;color:var(--text-light)}.landing-demo-frame{position:relative;background:#fff;border-radius:16px 16px 0 0;overflow:hidden;border:1px solid var(--border);border-bottom:none;box-shadow:0 8px 32px #0f1a2414}.landing-demo-frame .demo-player{display:flex;flex-direction:column;height:680px}.landing-demo-frame .demo-notation-area{flex:1;overflow:hidden;display:flex;flex-direction:column}.landing-demo-frame .notation-view{flex:1}.landing-demo-frame .notation-container{min-width:0;width:100%;padding:0}.landing-demo-frame .notation-scroll-wrapper{padding:4px;overflow-x:hidden}.landing-demo-frame .notation-header{padding:8px 6px}.landing-demo-frame .notation-title{font-size:14px;padding:0;letter-spacing:0}.landing-demo-frame .notation-meta{margin-top:2px;gap:4px;font-size:10px}.landing-demo-frame .notation-meta-label{font-size:9px;letter-spacing:0}.landing-demo-gate-bar{padding:14px 24px;border-radius:0 0 16px 16px;background:#fff;border:1px solid var(--border);border-top:2px solid var(--accent);font-size:14px;color:var(--text-light);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.landing-showcase{padding:100px 0 130px;background:#0c1720;position:relative}.landing-showcase:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,transparent 0px,transparent 39px,rgba(255,255,255,.022) 39px,rgba(255,255,255,.022) 40px);pointer-events:none}.landing-showcase-header{text-align:center;max-width:580px;margin:0 auto 72px;position:relative}.landing-showcase-title{font-family:Fraunces Variable,serif;font-size:clamp(28px,3.8vw,44px);font-weight:700;color:#f0ebe2;line-height:1.15;margin-bottom:16px}.landing-showcase-lead{font-size:16px;color:#ffffff7a;line-height:1.7}.landing-feature-strip-wrap{position:relative}.landing-feature-strip-wrap:after{content:"";position:absolute;right:0;top:0;bottom:20px;width:72px;background:linear-gradient(to right,transparent,#0c1720);pointer-events:none}@media(min-width:860px){.landing-feature-strip-wrap:after{display:none}}.landing-feature-strip{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:rgba(20,184,166,.2) transparent}@media(min-width:860px){.landing-feature-strip{overflow:visible;justify-content:center;align-items:flex-start;padding-bottom:0}}.landing-feature-card{--stagger-y: 0px;flex:0 0 268px;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;position:relative}@media(min-width:860px){.landing-feature-card{flex:1;max-width:296px;transform:translateY(var(--stagger-y));transition:transform .35s cubic-bezier(.22,1,.36,1)}.landing-feature-card:nth-child(1){--stagger-y: 0px}.landing-feature-card:nth-child(2){--stagger-y: -56px}.landing-feature-card:nth-child(3){--stagger-y: -24px}.landing-feature-card:hover{transform:translateY(calc(var(--stagger-y) - 10px))}}.landing-feature-pill{display:inline-flex;align-items:center;padding:4px 11px;background:#14b8a61f;color:#14b8a6;border:1px solid rgba(20,184,166,.3);border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;width:fit-content}.landing-feature-frame{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px #14b8a612,0 28px 72px #0000008c,0 8px 24px #14b8a612;transition:box-shadow .35s cubic-bezier(.22,1,.36,1)}.landing-feature-card:hover .landing-feature-frame{box-shadow:0 0 0 1px #14b8a62e,0 32px 80px #0000008c,0 8px 32px #14b8a624}.landing-feature-frame img{display:block;width:100%;height:auto}.landing-feature-label{font-size:15px;font-weight:600;color:#f0ebe2}.landing-feature-caption{font-size:13px;color:#ffffff75;line-height:1.5;margin:0}.landing-showcase-cta{text-align:center;margin-top:72px;position:relative}.landing-cta-section{background:#faf8f5;padding:88px 0;text-align:center}.landing-cta-title{font-family:Fraunces Variable,serif;font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--primary);margin-bottom:12px}.landing-cta-sub{font-size:16px;color:var(--text-light);margin-bottom:36px}.landing-cta-section .landing-cta-ghost{color:var(--text-light);border:1px solid var(--border)}.landing-cta-section .landing-cta-ghost:hover{background:#0000000d;color:var(--text);border-color:var(--text-light)}.landing-cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.landing-auth-inline{position:relative}.landing-auth-inline .auth-overlay{position:relative;background:transparent;padding:0}.landing-auth-inline .auth-container{padding:0}.landing-auth-inline .auth-brand{display:none}.landing-footer{background:#1a252f;padding:24px 0}.landing-footer .landing-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#ecf0f180;font-size:13px}.landing-footer-links{display:flex;gap:20px}.landing-footer-links a{color:#ecf0f1d9;text-decoration:none;font-size:13px}.landing-footer-links a:hover{color:#fff}@keyframes landing-rotate{0%{opacity:0;transform:translateY(110%)}6%{opacity:1;transform:translateY(0)}26%{opacity:1;transform:translateY(0)}30%{opacity:0;transform:translateY(-120%)}to{opacity:0;transform:translateY(-120%)}}@keyframes landing-glow{0%,to{transform:translateZ(0) scale(1);opacity:.7}50%{transform:translate3d(2%,-2%,0) scale(1.05);opacity:.95}}@keyframes landing-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes note-play{0%{opacity:.15;transform:translate(-50%,-50%) scale(.96);filter:drop-shadow(0 0 3px rgba(15,26,36,.15))}18%{opacity:.55;transform:translate(-50%,-50%) scale(1.04);filter:drop-shadow(0 0 8px rgba(236,240,241,.3))}40%{opacity:.22;transform:translate(-50%,-50%) scale(.99);filter:drop-shadow(0 0 3px rgba(15,26,36,.15))}to{opacity:.15;transform:translate(-50%,-50%) scale(.96);filter:drop-shadow(0 0 3px rgba(15,26,36,.15))}}@media(prefers-reduced-motion:reduce){.landing-hero-title,.landing-hero-sub,.landing-hero-kicker,.landing-hero-ctas,.landing-hero-login{animation:none;opacity:1;transform:none}.landing-hero-rotator span{animation:none;opacity:1;position:static}.landing-hero-rotator span:not(:first-child){display:none}.landing-hero:before{animation:none}.landing-hero-notes .note-symbol{animation:none;opacity:.2}}.interstitial-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.interstitial-card{background:#fff;border-radius:20px;padding:32px 28px 28px;width:100%;max-width:400px;position:relative;box-shadow:0 24px 60px #00000040}.interstitial-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:var(--secondary);color:var(--text-light);cursor:pointer;border-radius:8px;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s}.interstitial-close:hover{background:#d5dbdb}.interstitial-hook{font-family:Fraunces Variable,serif;font-size:22px;font-weight:700;color:var(--primary);margin-bottom:8px}.interstitial-reason{font-size:14px;color:var(--text-light);line-height:1.5;margin-bottom:24px}.interstitial-form .form-group label{color:var(--text)}.interstitial-form .form-group input{background:var(--bg);color:var(--text);border:1px solid var(--border)}.interstitial-form .form-group input:focus{border-color:var(--accent)}.interstitial-form .form-group input::placeholder{color:var(--text-light)}.interstitial-form .form-error{color:#e74c3c}.interstitial-form .auth-switch a{color:var(--accent)}.demo-player{display:flex;flex-direction:column}.demo-notation-area{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.demo-player-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:320px;color:var(--text-light);font-size:14px}.demo-player-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px;color:var(--text-light);font-size:14px;text-align:center;padding:24px}.demo-player-error-hint{font-size:12px;opacity:.7}@media(max-width:767px){.landing-header-inner{padding:0 16px}.landing-hero{padding:48px 16px 56px;min-height:calc(100vh - 120px)}.landing-hero-title{line-height:1.15}.landing-hero-rotator{min-width:8ch;height:1.1em}.landing-hero-kicker{margin-bottom:16px}.landing-hero-sub{margin-bottom:28px}.landing-hero-ctas{margin-top:8px;margin-bottom:16px}.landing-hero-login{margin-top:24px}.landing-hero-notes{opacity:.15}.landing-hero-notes .note-seq-1{left:5%;top:35%}.landing-hero-notes .note-seq-2{left:30%;top:55%}.landing-hero-notes .note-seq-3{left:55%;top:30%}.landing-hero-notes .note-seq-4{left:75%;top:50%}.landing-hero-notes .note-seq-5{left:15%;top:70%}.landing-hero-notes .note-seq-6{left:45%;top:80%}.landing-hero-notes .note-seq-7{left:85%;top:70%}.landing-hero-notes .note-seq-8{left:60%;top:55%}.landing-hero-notes .note-symbol svg{width:32px}.landing-hero-notes .note-symbol--single svg{width:24px}.landing-hero-notes .note-symbol--double svg{width:36px}.landing-hero-notes .note-symbol--whole svg{width:28px}.landing-hero-notes .note-symbol--half svg{width:20px}.landing-nav{gap:8px}.landing-nav .btn-primary{display:none}.landing-nav .btn{padding:8px 12px;font-size:13px}.landing-hero-ctas{flex-direction:column;width:100%}.landing-hero-ctas .btn{width:100%;text-align:center}.landing-container{padding:0 16px}.landing-demo-frame .demo-player{height:clamp(360px,60vh,520px);height:clamp(360px,60svh,520px)}.landing-demo-gate-bar{flex-direction:column;text-align:center}.landing-footer .landing-container{justify-content:center;text-align:center}}.auth-page{position:fixed;inset:0;display:grid;grid-template-columns:45% 1fr;grid-template-rows:30% 1fr;overflow:hidden}.auth-page:before{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:radial-gradient(circle at 100% 0%,rgba(20,184,166,.14) 0%,transparent 50%),radial-gradient(circle at 0% 100%,rgba(20,184,166,.09) 0%,transparent 50%),linear-gradient(160deg,#2d4057 0%,var(--primary) 50%,#243343 100%);pointer-events:none;z-index:0}.auth-page:after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:repeating-linear-gradient(transparent,transparent 56px,rgba(255,255,255,.032) 56px,rgba(255,255,255,.032) 57px);pointer-events:none;z-index:1}.auth-page-notes{position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.auth-page-notes .note-symbol{position:absolute;display:block;color:#ecf0f1b3;opacity:.18;animation:note-play 14s ease-in-out infinite;transform:translate(-50%,-50%)}.auth-page-notes .note-symbol svg{display:block;width:52px;height:auto;overflow:visible}.auth-page-notes .note-symbol--single svg{width:34px}.auth-page-notes .note-symbol--double svg{width:58px}.auth-page-notes .note-symbol--whole svg{width:40px}.auth-page-notes .note-symbol--half svg{width:28px}.auth-note-seq-1{left:78%;top:7%;animation-delay:0s}.auth-note-seq-2{left:55%;top:16%;animation-delay:3.1s}.auth-note-seq-3{left:88%;top:30%;animation-delay:6.2s}.auth-note-seq-4{left:65%;top:44%;animation-delay:1.5s}.auth-note-seq-5{left:82%;top:57%;animation-delay:8.4s}.auth-note-seq-6{left:48%;top:68%;animation-delay:4.7s}.auth-note-seq-7{left:72%;top:80%;animation-delay:2.3s}.auth-note-seq-8{left:90%;top:91%;animation-delay:9.6s}.auth-page-top-left{position:relative;z-index:2;color:#fff;padding:52px 52px 48px;display:flex;flex-direction:column;gap:28px}.auth-page-back{position:absolute;top:22px;left:52px;background:none;border:none;color:#ffffff8c;font-size:13px;cursor:pointer;padding:0;transition:color .15s}.auth-page-back:hover{color:#ffffffe6}.auth-page-brand{display:flex;align-items:center;gap:10px}.auth-page-brand-name{font-family:Fraunces Variable,serif;font-size:18px;font-weight:700;letter-spacing:-.3px;color:#fff}.auth-page-pitch{margin-top:auto}.auth-page-headline{font-family:Fraunces Variable,Georgia,serif;font-size:clamp(28px,2.6vw,40px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:10px;letter-spacing:-.5px}.auth-page-tagline{font-size:14px;color:var(--accent);font-weight:500;letter-spacing:.01em}.auth-page-top-right{background:#faf9f7;border-left:1px solid rgba(20,184,166,.18)}.auth-page-bottom-left{position:relative;z-index:2;color:#fff;padding:48px 52px 52px;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto}.auth-page-benefits{list-style:none;display:flex;flex-direction:column;gap:20px}.auth-page-benefit{display:flex;gap:14px;align-items:flex-start}.auth-page-benefit-icon{flex-shrink:0;width:32px;height:32px;background:#14b8a61f;border:1px solid rgba(20,184,166,.22);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#14b8a6}.auth-page-benefit strong{display:block;font-size:13px;font-weight:600;color:#fff;margin-bottom:2px}.auth-page-benefit p{font-size:12px;color:#ffffff9e;line-height:1.5;margin:0}.auth-page-bottom-right{background:#faf9f7;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:48px 48px 72px;border-left:1px solid rgba(20,184,166,.18);position:relative}.auth-page-form-wrap{width:100%;max-width:360px}.auth-page-tabs{display:flex;background:#2c3e5012;border-radius:10px;padding:3px;gap:0;margin-bottom:28px}.auth-page-tab{flex:1;background:transparent;border:none;padding:8px 0;font-size:13.5px;font-weight:500;color:#2c3e5080;cursor:pointer;border-radius:8px;transition:background .18s,color .18s,box-shadow .18s}.auth-page-tab.active{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 4px #0000001a}.auth-page-tab:hover:not(.active){color:var(--primary);background:#ffffff8c}.auth-page-form{display:flex;flex-direction:column;gap:18px}.auth-page-form .form-group label{color:var(--text);font-size:13px;font-weight:500;letter-spacing:.015em}.auth-page-form .form-group input{background:#fff;color:var(--text);border:1px solid #d4d8dc}.auth-page-form .form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #14b8a61f}.auth-page-form .form-group input::placeholder{color:var(--text-light)}.auth-page-form .form-error{color:#e53e3e;font-size:13px}.auth-page-submit{margin-top:6px;padding:13px;font-size:15px;font-weight:600}.auth-page-forgot{background:none;border:none;color:var(--text-light);font-size:13px;cursor:pointer;text-align:center;padding:4px 0;text-decoration:underline;text-decoration-color:transparent;transition:color .15s,text-decoration-color .15s}.auth-page-forgot:hover{color:var(--text);text-decoration-color:var(--text)}.auth-page-footer-links{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:20px}.auth-page-footer-links a{color:#00000047;font-size:12px;text-decoration:none}.auth-page-footer-links a:hover{color:#0000008c}.demo-notation-skeleton{display:flex;flex-direction:column;justify-content:center;gap:40px;padding:48px 40px;height:100%;min-height:400px;background:#fff}.dns-staff{position:relative;display:flex;flex-direction:column;gap:11px}.dns-line{height:1px;background:#d1d5db;animation:dns-shimmer 1.8s ease-in-out infinite}.dns-line:nth-child(2){animation-delay:.1s}.dns-line:nth-child(3){animation-delay:.2s}.dns-line:nth-child(4){animation-delay:.3s}.dns-line:nth-child(5){animation-delay:.4s}.dns-notes{position:absolute;top:-8px;left:32px;right:0;display:flex;gap:44px;align-items:flex-end}.dns-note{width:11px;height:11px;border-radius:50%;background:#c4cdd6;flex-shrink:0;animation:dns-pulse 1.8s ease-in-out infinite}@keyframes dns-shimmer{0%,to{opacity:.35}50%{opacity:.9}}@keyframes dns-pulse{0%,to{opacity:.25;transform:translateY(0)}50%{opacity:.85;transform:translateY(-5px)}}.dns-label{text-align:center;font-size:13px;color:var(--text-light);letter-spacing:.02em}@media(max-width:640px){.auth-page{grid-template-columns:1fr;grid-template-rows:auto 1fr}.auth-page:before,.auth-page:after{width:100%;height:auto;bottom:0}.auth-page-top-left{padding:44px 24px 28px;gap:12px}.auth-page-back{top:16px;left:24px}.auth-page-brand{margin-top:16px}.auth-page-headline{font-size:24px}.auth-page-top-right,.auth-page-bottom-left{display:none}.auth-page-bottom-right{padding:28px 24px 60px;align-items:stretch;justify-content:flex-start;border-left:none;border-top:1px solid rgba(20,184,166,.18)}.auth-page-form-wrap{max-width:100%}.auth-page-form .form-group input{width:100%;box-sizing:border-box}}.static-page{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);overflow-y:auto}.static-page-back{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--secondary);padding:0}.static-page-back:hover .landing-brand-name{opacity:.8}.static-page-content{flex:1;max-width:700px;margin:0 auto;padding:48px 24px 64px;color:var(--text)}.static-page-content h1{font-family:Fraunces Variable,Georgia,serif;font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:8px}.static-page-meta{font-size:13px;color:var(--text-light);margin-bottom:40px}.static-page-content h2{font-size:.95rem;font-weight:700;color:var(--primary);margin:36px 0 10px;padding-left:10px;border-left:3px solid var(--accent);letter-spacing:.01em}.static-page-content p,.static-page-content li{font-size:14px;line-height:1.7;margin-bottom:8px}.static-page-content ul{padding-left:20px;margin-bottom:8px}.static-page-content a{color:var(--accent);text-decoration:none}.static-page-content a:hover{text-decoration:underline}.static-page-content code{font-family:monospace;background:#f1f5f9;padding:1px 5px;border-radius:3px;font-size:13px}.static-page-content table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px}.static-page-content th,.static-page-content td{text-align:left;padding:8px 12px;border:1px solid var(--border)}.static-page-content th{background:#14b8a612;font-weight:600;color:var(--primary);border-color:#14b8a633}