*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif,Microsoft YaHei,微软雅黑}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background:#f5f6fa;display:flex;flex-direction:column;min-height:100vh}.app-content{flex:1 1}.app-content:has(.main-container){background:linear-gradient(135deg,#ffeaa7,#fdcb6e)}.main-container{display:flex;gap:20px;margin:0 auto;max-width:1600px;padding:20px}.staff-section{flex:2 1}.editor-section,.staff-section{background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000001a;min-height:600px;padding:20px}.editor-section{flex:1 1}@media (max-width:1024px){.main-container{flex-direction:column}.editor-section,.staff-section{flex:1 1}}.app-header-nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #0000001a;position:-webkit-sticky;position:sticky;top:0;z-index:1000}.header-container{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1400px;padding:15px 30px}.logo-section-header{align-items:center;cursor:pointer;display:flex;gap:12px;transition:all .3s ease}.logo-section-header:hover{transform:scale(1.05)}.logo-icon-header{animation:wiggle 2s ease-in-out infinite;font-size:2rem}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.logo-text{color:#fff;font-size:1.4rem;font-weight:700;letter-spacing:1px}.nav-menu{gap:10px}.nav-item,.nav-menu{align-items:center;display:flex}.nav-item{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:2px solid #fff3;border-radius:25px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;gap:8px;padding:10px 20px;transition:all .3s ease}.nav-item:hover{background:#fff3;border-color:#fff6;box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.nav-item.active{background:#fffffff2;border-color:#fff;box-shadow:0 4px 15px #ffffff4d;color:#667eea}.nav-icon{font-size:1.2rem}.nav-label{font-size:.95rem}@media (max-width:768px){.header-container{flex-direction:column;gap:15px;padding:15px 20px}.nav-menu{flex-wrap:wrap;justify-content:center;width:100%}.nav-item{font-size:.9rem;padding:8px 15px}.nav-label{display:none}.nav-icon{font-size:1.5rem}.logo-text{font-size:1.2rem}}@media (max-width:480px){.nav-item{padding:8px 12px}}.home-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;overflow:hidden;position:relative;width:100%}.music-background{max-width:1200px;padding:40px 20px;position:relative;width:100%}.floating-notes{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.note{animation:float 15s ease-in-out infinite;color:#ffffff26;font-size:3rem;position:absolute}.note-1{animation-delay:0s;left:10%}.note-2{animation-delay:2s;left:25%}.note-3{animation-delay:4s;left:45%}.note-4{animation-delay:1s;left:65%}.note-5{animation-delay:3s;left:80%}.note-6{animation-delay:5s;left:90%}@keyframes float{0%,to{opacity:.1;transform:translateY(0) rotate(0deg)}25%{opacity:.3;transform:translateY(-30px) rotate(5deg)}50%{opacity:.15;transform:translateY(-50px) rotate(-5deg)}75%{opacity:.25;transform:translateY(-30px) rotate(3deg)}}.home-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:30px;box-shadow:0 20px 60px #0000004d;padding:60px 40px;position:relative;text-align:center;z-index:1}.logo-section{margin-bottom:50px}.logo-circle{align-items:center;animation:pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#fdcb6e,#fab1a0);border-radius:50%;box-shadow:0 10px 30px #fdcb6e66;display:flex;height:140px;justify-content:center;margin:0 auto 30px;width:140px}.logo-icon{animation:rotate 3s ease-in-out infinite;font-size:80px}@keyframes rotate{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.app-title{color:#2d3436;font-size:3.5rem;font-weight:800;letter-spacing:2px;margin:0 0 10px}.title-part{display:inline-block;margin:0 5px}.title-part.highlight{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text}.app-subtitle{color:#636e72;font-size:1.5rem;font-style:italic;font-weight:500;margin:0 0 15px}.app-description{color:#b2bec3;font-size:1.1rem;margin:0}.action-buttons{margin:40px 0}.action-btn{align-items:center;border:none;border-radius:50px;box-shadow:0 8px 20px #00000026;cursor:pointer;display:inline-flex;font-size:1.2rem;font-weight:600;gap:12px;padding:18px 40px;transition:all .3s ease}.action-btn.primary{background:linear-gradient(135deg,#fdcb6e,#fab1a0);color:#fff;font-size:1.4rem;margin-bottom:25px;padding:22px 50px}.action-btn.primary:hover{box-shadow:0 12px 30px #fdcb6e66;transform:translateY(-3px) scale(1.05)}.action-btn.secondary{background:#fff;border:2px solid #667eea;color:#667eea;margin:0 10px}.action-btn.secondary:hover{background:#667eea;box-shadow:0 10px 25px #667eea4d;color:#fff;transform:translateY(-2px)}.secondary-buttons{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.btn-icon{font-size:1.5rem}.btn-text{font-size:inherit}.features{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:50px auto 40px;max-width:800px}.feature-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #0000;border-radius:20px;padding:30px 20px;transition:all .3s ease}.feature-card:hover{border-color:#fdcb6e;box-shadow:0 10px 25px #fdcb6e4d;transform:translateY(-5px)}.feature-icon{display:block;font-size:3rem;margin-bottom:15px}.feature-card h3{color:#2d3436;font-size:1.3rem;margin:0 0 10px}.feature-card p{color:#636e72;font-size:.95rem;margin:0}.home-footer{border-top:2px solid #dfe6e9;margin-top:40px;padding-top:30px}.home-footer p{color:#b2bec3;font-size:1rem;margin:0}@media (max-width:768px){.home-content{padding:40px 25px}.app-title{font-size:2.5rem}.logo-circle{height:100px;width:100px}.logo-icon{font-size:60px}.action-btn.primary{font-size:1.2rem;padding:18px 35px}.features{gap:15px;grid-template-columns:1fr}.secondary-buttons{align-items:center;flex-direction:column}.action-btn.secondary{margin:5px 0;max-width:250px;width:100%}}.staff-display{display:flex;flex-direction:column;height:100%}.staff-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.meow-selector-container{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #dee2e6;border-radius:12px;box-shadow:0 2px 8px #0000000d;margin-bottom:20px;padding:15px}.staff-display h2{color:#2d3436;font-size:1.5rem;margin:0}.time-signature-display{align-items:center;display:flex;gap:10px}.time-sig-fraction{align-items:center;background:#f8f9fa;border:2px solid #fdcb6e;border-radius:8px;display:flex;flex-direction:column;font-family:Times New Roman,serif;font-weight:700;padding:8px 15px}.time-sig-bottom,.time-sig-top{color:#2d3436;font-size:24px;line-height:1}.time-sig-line{background:#2d3436;height:2px;margin:2px 0;width:100%}.jianpu-container{background:#fff;border:2px solid #dfe6e9;border-radius:10px;flex:1 1;min-height:300px;overflow-x:auto;overflow-y:auto;padding:40px 30px;position:relative}.empty-message{color:#b2bec3;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.empty-message p{font-size:1.2rem;margin:10px 0}.empty-message .hint{font-size:.9rem}.jianpu-score{min-width:100%}.jianpu-staff{flex-wrap:wrap;font-family:Times New Roman,serif;gap:0;line-height:1;padding:20px}.jianpu-measure,.jianpu-staff{align-items:center;display:flex}.jianpu-measure{margin-right:0}.jianpu-note-wrapper{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:8px 0;position:relative;transition:background .2s}.jianpu-note-wrapper:hover{background:#fdcb6e1a;border-radius:8px}.note-horizontal-group{align-items:center;display:flex;gap:0;justify-content:flex-start;padding:0}.note-vertical-group{align-items:center;display:flex;flex-direction:column;gap:0}.high-dot{color:#e17055;font-size:18px;font-weight:700;line-height:10px;margin-bottom:1px}.jianpu-note-content{align-items:center;display:flex;justify-content:center;min-height:40px}.note-digit{color:#2d3436;font-size:36px;font-weight:700;line-height:1}.rest-symbol{color:#636e72!important}.jianpu-note-content.middle .note-digit{color:#2d3436}.jianpu-note-content.high .note-digit{color:#e17055}.jianpu-note-content.low .note-digit{color:#0984e3}.duration-right-lines{align-items:center;display:flex;gap:2px;margin-left:5px}.right-line-display{color:#2d3436;font-size:24px;font-weight:700;line-height:1}.right-line-display:before{content:"—"}.duration-underlines{align-items:center;display:flex;flex-direction:column;gap:2px;margin-top:0}.underline-display{background:#2d3436;border-radius:1px;height:2.5px;width:32px}.low-dot{color:#0984e3;font-size:18px;font-weight:700;line-height:10px;margin-bottom:1px;margin-top:1px}.drum-notation{color:#f39c12;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap}.note-sequence{background:#ffffffe6;border-radius:3px;color:#b2bec3;font-size:9px;padding:1px 3px;position:absolute;right:2px;top:2px}.delete-note-btn-inline{align-items:center;background:#ff7675;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;color:#fff;cursor:pointer;display:none;font-size:14px;font-weight:700;height:20px;justify-content:center;left:50%;line-height:1;position:absolute;top:-6px;transform:translateX(-50%);width:20px;z-index:10}.jianpu-note-wrapper:hover .delete-note-btn-inline{display:flex}.delete-note-btn-inline:hover{background:#d63031;transform:translateX(-50%) scale(1.1)}.measure-bar{font-weight:300;margin:0 5px}.measure-bar,.measure-bar-end{color:#2d3436;font-size:48px;line-height:40px}.measure-bar-end{font-weight:600;margin-left:5px}.notes-list{border-top:2px solid #dfe6e9;margin-top:20px;padding-top:15px}.notes-list h3{color:#2d3436;font-size:1.1rem;margin-bottom:10px}.notes-list-container{background:#f8f9fa;border-radius:8px;max-height:150px;overflow-y:auto;padding:10px}.note-list-item{align-items:center;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a;display:flex;gap:10px;margin-bottom:8px;padding:8px 12px}.note-index{color:#fdcb6e;font-weight:700;min-width:30px}.note-detail{color:#2d3436;flex:1 1;font-weight:600}.note-duration{background:#ffe8e1;border-radius:4px;color:#e17055;font-family:monospace;font-size:.85rem;font-weight:600;padding:2px 6px}.note-song{color:#636e72;font-family:monospace;font-size:.9rem}.note-meow{color:#74b9ff;font-family:monospace;font-size:.85rem}.note-delete-btn{background:#ff7675;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.85rem;padding:4px 12px;transition:background .2s}.note-delete-btn:hover{background:#d63031}.notes-list-container::-webkit-scrollbar{width:6px}.notes-list-container::-webkit-scrollbar-track{background:#dfe6e9;border-radius:3px}.notes-list-container::-webkit-scrollbar-thumb{background:#fdcb6e;border-radius:3px}.notes-list-container::-webkit-scrollbar-thumb:hover{background:#fab1a0}.meow-selector{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border-radius:20px;display:flex;gap:12px;padding:8px 16px}.staff-display .meow-selector-container .meow-selector{-webkit-backdrop-filter:none;backdrop-filter:none;background:#ffffffe6;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:12px 20px}.meow-selector-label{color:#fff;font-size:.9rem;font-weight:600;white-space:nowrap}.staff-display .meow-selector-container .meow-selector-label{color:#2d3436}.meow-list{gap:8px}.meow-item,.meow-list{align-items:center;display:flex}.meow-item{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff26;border:2px solid #ffffff4d;border-radius:12px;cursor:pointer;flex-direction:column;height:50px;justify-content:center;padding:6px;transition:all .3s ease;width:50px}.staff-display .meow-selector-container .meow-item{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fffc;border:2px solid #dee2e6}.staff-display .meow-selector-container .meow-item:hover{background:#fff;border-color:#667eea}.meow-item:hover{background:#ffffff40;border-color:#ffffff80;box-shadow:0 4px 12px #0003;transform:translateY(-2px) scale(1.05)}.meow-item.selected{background:#fffffff2;border-color:#fff;box-shadow:0 4px 15px #fff6;transform:scale(1.1)}.staff-display .meow-selector-container .meow-item.selected{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;box-shadow:0 4px 15px #667eea66}.meow-item.selected .meow-emoji{animation:bounce .5s ease}.meow-item.selected .meow-number{font-weight:700}.meow-emoji{font-size:1.5rem;line-height:1;margin-bottom:2px}.meow-number{color:#fff;font-size:.75rem;font-weight:600;line-height:1}.meow-item.selected .meow-number{color:#667eea}.staff-display .meow-selector-container .meow-number{color:#495057}.staff-display .meow-selector-container .meow-item.selected .meow-number{color:#fff}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (max-width:768px){.meow-selector{flex-direction:column;gap:8px;padding:8px 12px}.meow-selector-label{font-size:.8rem}.meow-item{height:40px;padding:4px;width:40px}.meow-emoji{font-size:1.2rem}.meow-number{font-size:.65rem}}@media (max-width:480px){.meow-list{gap:6px}.meow-item{height:36px;width:36px}.meow-emoji{font-size:1rem}.meow-number{font-size:.6rem}}.editor-panel{display:flex;flex-direction:column;height:100%}.editor-panel h2{color:#2d3436;font-size:1.5rem;margin-bottom:20px}.instrument-tabs{border-bottom:2px solid #dfe6e9;display:flex;gap:10px;margin-bottom:20px;padding-bottom:10px}.tab-btn{background:#f8f9fa;border:2px solid #0000;border-radius:10px 10px 0 0;color:#636e72;cursor:pointer;flex:1 1;font-size:1rem;font-weight:600;padding:12px 20px;transition:all .3s}.tab-btn:hover{background:#e9ecef;transform:translateY(-2px)}.tab-btn.active{background:linear-gradient(135deg,#fdcb6e,#fab1a0);border-color:#fdcb6e;box-shadow:0 4px 8px #fdcb6e4d;color:#fff}.rest-control{background:#fff3cd;border:2px solid #ffc107;border-radius:10px;margin-bottom:15px;padding:15px}.rest-btn{align-items:center;background:linear-gradient(135deg,#ffc107,#ff9800);border:none;border-radius:10px;box-shadow:0 4px 12px #ffc1074d;cursor:pointer;display:flex;gap:10px;justify-content:center;padding:15px;transition:all .3s;width:100%}.rest-btn:hover{box-shadow:0 6px 20px #ffc10780;transform:translateY(-2px)}.rest-icon{color:#fff;font-size:32px;font-weight:700}.rest-label{color:#fff;font-size:16px;font-weight:600}.rest-hint{color:#856404;font-size:12px;margin:10px 0 0;text-align:center}.instrument-content{flex:1 1;overflow-y:auto;padding:10px}.instrument-content::-webkit-scrollbar{width:6px}.instrument-content::-webkit-scrollbar-track{background:#dfe6e9;border-radius:3px}.instrument-content::-webkit-scrollbar-thumb{background:#fdcb6e;border-radius:3px}.instrument-content::-webkit-scrollbar-thumb:hover{background:#fab1a0}.instrument{display:flex;flex-direction:column;gap:20px}.instrument-title{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-left:5px solid #fdcb6e;border-radius:10px;display:flex;gap:15px;padding:15px}.instrument-title .icon{font-size:2.5rem}.instrument-title h3{color:#2d3436;font-size:1.3rem;margin:0}.instrument-title .subtitle{color:#636e72;font-size:.9rem;margin:5px 0 0}.notes-grid{grid-gap:10px;display:grid;gap:10px}.meow-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.note-btn{align-items:center;background:#fff;border:2px solid #dfe6e9;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:20px 10px;transition:all .3s}.note-btn:hover{border-color:#fdcb6e;box-shadow:0 4px 12px #00000026;transform:translateY(-3px)}.note-btn.selected{background:linear-gradient(135deg,#fdcb6e,#fab1a0);border-color:#fdcb6e;box-shadow:0 4px 12px #fdcb6e66;color:#fff}.note-name{font-size:1.1rem;font-weight:600}.note-hex{font-family:monospace;font-size:.8rem;opacity:.7}.note-btn.selected .note-hex{opacity:.9}.note-btn.sharp-note{background:linear-gradient(135deg,#636e72,#2d3436);border-color:#636e72;color:#fff}.note-btn.sharp-note:hover{background:linear-gradient(135deg,#2d3436,#636e72);border-color:#fdcb6e}.note-btn.sharp-note.selected{background:linear-gradient(135deg,#fab1a0,#fdcb6e);border-color:#fab1a0;color:#fff}.note-btn.sharp-note .note-hex{opacity:.8}.piano-container{display:flex;flex-direction:column;gap:20px}.piano-section{background:#f8f9fa;border-radius:10px;padding:15px}.section-title{color:#2d3436;font-size:1rem;margin:0 0 10px;text-align:center}.piano-keys{flex-wrap:wrap;gap:5px}.piano-key,.piano-keys{display:flex;justify-content:center}.piano-key{align-items:center;border:2px solid #2d3436;cursor:pointer;font-size:.75rem;height:90px;padding:8px 4px;position:relative;transition:all .2s;width:60px}.piano-key.white{background:#fff;border-radius:0 0 8px 8px;color:#2d3436}.piano-key.black{background:#2d3436;color:#fff;height:70px;width:50px}.piano-key:hover{transform:scale(1.05);z-index:1}.piano-key.white:hover{background:#fdcb6e}.piano-key.black:hover{background:#636e72}.piano-key.selected{box-shadow:0 0 15px #fdcb6ecc;transform:scale(1.1);z-index:2}.piano-key.white.selected{background:#fdcb6e;border-color:#fab1a0;color:#fff}.piano-key.black.selected{background:#fab1a0;border-color:#fdcb6e}.piano-key-content{align-items:center;display:flex;flex-direction:column;gap:2px}.key-jianpu{font-size:24px;font-weight:700;line-height:1}.key-dot-high{color:#e17055}.key-dot-high,.key-dot-low{font-size:16px;font-weight:700;line-height:8px}.key-dot-low{color:#0984e3}.piano-key.black .key-dot-high,.piano-key.black .key-dot-low{color:#ffeaa7}.key-name{font-weight:600}.drums-container{display:flex;flex-direction:column;gap:20px}.drums-visual{background:linear-gradient(135deg,#2d3436,#636e72);border-radius:15px;display:flex;justify-content:center;padding:20px}.drum-layout{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(3,1fr);max-width:400px}.drum-pad{align-items:center;aspect-ratio:1;border:3px solid #ffffff4d;border-radius:50%;box-shadow:0 4px 10px #0000004d;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-weight:600;gap:5px;justify-content:center;position:relative;transition:all .3s}.drum-pad:hover{box-shadow:0 6px 20px #00000080;transform:scale(1.1)}.drum-pad.selected{animation:pulse .5s ease;border-color:#fff;border-width:4px;box-shadow:0 6px 20px #ffffff80}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.drum-name{font-size:.85rem;text-align:center;text-shadow:1px 1px 2px #00000080}.drum-hex{font-family:monospace;font-size:.7rem;opacity:.8}.drums-list{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}.drum-btn{align-items:center;background:#fff;border:2px solid #dfe6e9;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:15px;transition:all .3s}.drum-btn:hover{box-shadow:0 4px 12px #00000026;transform:translateX(5px)}.drum-btn.selected{background:#fdcb6e;border-color:#fab1a0;box-shadow:0 4px 12px #fdcb6e66}.drum-label{color:#2d3436;font-weight:600}.drum-value{color:#636e72;font-family:monospace;font-size:.9rem}.drum-btn.selected .drum-label,.drum-btn.selected .drum-value{color:#fff}.help-text{background:#e3f2fd;border-left:4px solid #2196f3;border-radius:8px;padding:15px;text-align:center}.help-text p{color:#1976d2;font-size:.9rem;margin:0}@media (max-width:768px){.meow-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.piano-key{height:60px;width:45px}.piano-key.black{height:45px;width:38px}.drum-layout{grid-template-columns:repeat(2,1fr)}.drums-list{grid-template-columns:1fr}}.duration-selector{background:#f8f9fa;border:2px solid #dfe6e9;border-radius:10px;margin-bottom:20px;padding:15px}.duration-title{color:#2d3436;font-size:1rem;margin:0 0 15px;text-align:center}.duration-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}.duration-btn{align-items:center;background:#fff;border:2px solid #dfe6e9;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:80px;padding:12px 8px;transition:all .3s}.duration-btn:hover{border-color:#fdcb6e;box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.duration-btn.selected{background:linear-gradient(135deg,#fdcb6e,#fab1a0);border-color:#fdcb6e;box-shadow:0 4px 12px #fdcb6e66;color:#fff}.duration-visual{align-items:center;display:flex;flex:1 1;justify-content:center}.duration-note{align-items:center;display:flex;flex-direction:column;gap:3px}.note-example{color:#2d3436;font-size:28px;font-weight:700;line-height:1}.duration-btn.selected .note-example{color:#fff}.underlines{display:flex;flex-direction:column;gap:2px;margin-top:2px}.underline{background:#2d3436;height:2px;width:25px}.duration-btn.selected .underline{background:#fff}.note-with-lines{align-items:center;display:flex;gap:5px}.right-lines-horizontal{align-items:center;display:flex;gap:1px;margin-left:2px}.right-line-dash{color:#2d3436;font-size:18px;font-weight:700;line-height:1}.duration-btn.selected .right-line-dash{color:#fff}.duration-label{color:#636e72;font-size:11px;font-weight:600;margin-top:2px}.duration-beats{color:#b2bec3;font-size:10px}.duration-btn.selected .duration-beats,.duration-btn.selected .duration-label{color:#fff}@media (max-width:768px){.duration-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:480px){.duration-grid{grid-template-columns:repeat(2,1fr)}}.bpm-control{background:#fff;box-shadow:0 2px 10px #0000001a;flex-wrap:wrap;gap:15px;justify-content:space-between;padding:15px 20px}.bpm-control,.bpm-group{align-items:center;display:flex}.bpm-group{gap:10px}.bpm-label{color:#333;font-size:14px;font-weight:600;min-width:50px}.time-signature-group{align-items:center;display:flex;gap:10px}.time-signature-label{color:#333;font-size:14px;font-weight:600;min-width:50px}.time-signature-buttons{display:flex;gap:8px}.time-sig-btn{background:#fff;border:2px solid #ddd;border-radius:8px;color:#333;cursor:pointer;font-size:14px;font-weight:600;min-width:50px;padding:8px 15px;transition:all .3s}.time-sig-btn:hover{background:#ffeaa7;border-color:#fdcb6e}.time-sig-btn.active{background:#fdcb6e;border-color:#fdcb6e;box-shadow:0 2px 8px #fdcb6e66;color:#fff}.bpm-input-group{align-items:center;background:#f8f9fa;border-radius:10px;display:flex;gap:10px;padding:8px}.bpm-btn{background:#fdcb6e;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;height:35px;transition:all .3s;width:35px}.bpm-btn:hover{background:#fab1a0;transform:scale(1.1)}.bpm-input{border:2px solid #ddd;border-radius:8px;font-size:18px;font-weight:700;height:35px;outline:none;text-align:center;width:80px}.bpm-input:focus{border-color:#fdcb6e}.control-buttons{display:flex;gap:10px}.control-btn{border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s}.save-btn{background:#74b9ff}.save-btn:hover{background:#0984e3;transform:translateY(-2px)}.import-btn{background:#55efc4;display:inline-block}.import-btn:hover{background:#00b894;transform:translateY(-2px)}.clear-btn{background:#ff7675}.clear-btn:hover{background:#d63031;transform:translateY(-2px)}@media (max-width:768px){.bpm-control{align-items:stretch;flex-direction:column}.bpm-group,.control-buttons{justify-content:center}.control-buttons{flex-wrap:wrap}}.docs-viewer{align-items:center;background:#f8f9fa;display:flex;height:calc(100vh - 80px);justify-content:center;padding:20px;width:100%}.docs-iframe{background:#fff;border:none;border-radius:10px;box-shadow:0 4px 20px #0000001a;height:100%;max-width:1200px;width:100%}@media (max-width:768px){.docs-viewer{height:calc(100vh - 120px);padding:10px}}
/*# sourceMappingURL=main.03879552.css.map*/