.app{min-height:100vh;background:#fff;font-family:Courier New,monospace}.app-header{text-align:center;padding:.5rem 1rem;color:#000;background:#fff;border-bottom:1px solid #000000}.app-header h1{margin:0;font-size:1.5rem;font-weight:400;text-shadow:none}.app-header p{margin:.25rem 0 0;font-size:.75rem;opacity:1}.app-main{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;max-width:1400px;margin:0 auto}.controls-panel,.results-panel{background:#fff;border-radius:0;padding:1rem;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #000000}.controls-panel h2,.results-panel h2{margin:0 0 .75rem;color:#000;font-size:1.2rem;font-weight:400;border-bottom:1px solid #000000;padding-bottom:.25rem}.parameter-group{margin-bottom:1rem}.parameter-group h3{margin:0 0 .5rem;color:#000;font-size:1rem;font-weight:400}.parameter-row{margin-bottom:.5rem}.parameter-row label{display:flex;flex-direction:column;gap:.25rem;font-weight:400;color:#000;font-size:.875rem}.parameter-row input{padding:.25rem .5rem;border:1px solid #000000;border-radius:0;font-size:.875rem;transition:none;background:#fff}.parameter-row input:focus{outline:none;border-color:#000;box-shadow:none;transform:none;background:#f5f5f5}.parameter-row input:hover{border-color:#000}.loading{text-align:center;padding:1rem}.spinner{width:20px;height:20px;border:2px solid #000000;border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto .5rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.result-display{text-align:center}.frequency-display{background:#000;color:#fff;padding:1rem;border-radius:0;margin-bottom:.75rem;box-shadow:none;border:1px solid #000000}.frequency-value{font-size:1.5rem;font-weight:400;margin-bottom:.25rem;text-shadow:none}.note-display{font-size:1rem;font-weight:400;opacity:1}.frequency-info{background:#fff;padding:.75rem;border-radius:0;border-left:1px solid #000000;border:1px solid #000000}.frequency-info p{margin:0;line-height:1.4;color:#000;font-size:.875rem}.frequency-info strong{color:#000}.error{background:#fff;color:#000;padding:.75rem;border-radius:0;border-left:1px solid #000000;border:1px solid #000000}.error h3{margin:0 0 .25rem;font-size:1rem}.presets{margin-top:1rem;padding-top:1rem;border-top:1px solid #000000}.presets h3{margin:0 0 .5rem;color:#000;font-size:1rem}.preset-buttons{display:flex;gap:.25rem;flex-wrap:wrap}.preset-buttons button{background:#fff;color:#000;border:1px solid #000000;padding:.25rem .5rem;border-radius:0;cursor:pointer;font-weight:400;transition:none;box-shadow:none;font-size:.75rem}.preset-buttons button:hover{transform:none;box-shadow:none;background:#f5f5f5}.preset-buttons button:active{transform:none;background:#000;color:#fff}@media (max-width: 768px){.app-main{grid-template-columns:1fr;gap:.5rem;padding:.5rem}.app-header h1{font-size:1.2rem}.controls-panel,.results-panel{padding:.75rem}.frequency-value{font-size:1.2rem}.note-display{font-size:.875rem}.preset-buttons{flex-direction:column}.preset-buttons button{width:100%}}.tone-holes-controls{margin-top:.5rem}.add-hole-btn{background:#fff;color:#000;border:1px solid #000000;padding:.25rem .5rem;border-radius:0;cursor:pointer;font-weight:400;margin-bottom:.5rem;transition:none;box-shadow:none;font-size:.75rem}.add-hole-btn:hover{transform:none;box-shadow:none;background:#f5f5f5}.tone-hole-item{background:#fff;border:1px solid #000000;border-radius:0;padding:.75rem;margin-bottom:.5rem;transition:none}.tone-hole-item:hover{border-color:#000;box-shadow:none}.hole-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.25rem;border-bottom:1px solid #000000}.hole-header h4{margin:0;color:#000;font-size:1rem}.remove-hole-btn{background:#fff;color:#000;border:1px solid #000000;width:20px;height:20px;border-radius:0;cursor:pointer;font-size:.875rem;font-weight:400;display:flex;align-items:center;justify-content:center;transition:none;padding:0}.remove-hole-btn:hover{background:#000;color:#fff;transform:none}.hole-parameters{display:grid;gap:.5rem}.no-holes-message{text-align:center;color:#000;font-style:normal;padding:1rem;background:#fff;border-radius:0;border:1px dashed #000000;font-size:.875rem}.tone-holes-table{border:1px solid #000000;margin-top:.5rem}.tone-holes-header{display:grid;gap:.25rem;background:#000;color:#fff;padding:.25rem;border-bottom:1px solid #000000}.tone-hole-row{display:grid;gap:.25rem;padding:.25rem;border-bottom:1px solid #000000}.tone-hole-row:last-child{border-bottom:none}.tone-hole-row:hover{background:#f5f5f5}.tone-hole-cell{display:flex;align-items:center;justify-content:center;font-size:.75rem}.tone-holes-header .tone-hole-cell{font-weight:400;text-align:center}.tone-hole-input{width:100%;max-width:60px;padding:.125rem .25rem;border:1px solid #000000;border-radius:0;font-size:.75rem;background:#fff;text-align:center}.tone-hole-input:focus{outline:none;border-color:#000;box-shadow:none;background:#f5f5f5}.tone-hole-spacing,.tone-hole-number{font-size:.75rem;color:#000;font-family:Courier New,monospace}.fundamental-display{margin-bottom:1rem}.fundamental-display h3{margin:0 0 .5rem;color:#000;font-size:1rem}.fingerings-display{margin-bottom:1rem}.fingerings-display h3{margin:0 0 .5rem;color:#000;font-size:1rem}.fingerings-table{background:#fff;border-radius:0;overflow:hidden;box-shadow:none;border:1px solid #000000}.table-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;background:#000;color:#fff;font-weight:400;padding:.5rem}.table-header>div{padding:.25rem;text-align:center;font-size:.875rem}.table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-bottom:1px solid #000000;transition:none}.table-row:hover{background-color:#f5f5f5}.table-row:last-child{border-bottom:1px solid #000000}.table-row>div{padding:.5rem .25rem;text-align:center;display:flex;align-items:center;justify-content:center}.fingering-pattern{font-family:Courier New,monospace;font-size:.875rem;font-weight:400;color:#000}.frequency,.note{color:#000;font-weight:400;font-size:.875rem}.standard-fingering{background:#fff;border-left:1px solid #000000}.fingerings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.fingerings-header h3{margin:0;font-size:1rem}.custom-fingering-row{background:#fff}.fingering-pattern-editor{display:flex;flex-direction:column;gap:.25rem;padding:.25rem}.pattern-display{display:flex;gap:.125rem;justify-content:center;align-items:center;font-family:Courier New,monospace;font-size:.875rem;font-weight:400;padding:.125rem;background:#fff;border-radius:0;border:1px solid #000000}.hole-toggles{display:flex;gap:.125rem;justify-content:center;flex-wrap:wrap}.hole-toggle{width:20px;height:20px;border:1px solid #000000;border-radius:50%;background:#000;cursor:pointer;font-size:.75rem;font-weight:400;transition:none;display:flex;align-items:center;justify-content:center;padding:0}.hole-toggle.closed{background:#000;border-color:#000}.hole-toggle.open{background:#fff;border-color:#000}.hole-toggle:hover{transform:none;box-shadow:none}.fingering-actions{display:flex;flex-direction:column;gap:.25rem;align-items:center;padding:.25rem}.fingering-name-input{background:#fff;border:1px solid #000000;border-radius:0;padding:.125rem .25rem;font-size:.75rem;font-weight:400;color:#000;transition:none;width:100%;text-align:center}.fingering-name-input:focus{outline:none;border-color:#000;box-shadow:none;background:#f5f5f5}.remove-fingering-btn{background:#fff;color:#000;border:1px solid #000000;width:18px;height:18px;border-radius:0;cursor:pointer;font-size:.75rem;font-weight:400;display:flex;align-items:center;justify-content:center;transition:none;padding:0}.remove-fingering-btn:hover{background:#000;color:#fff;transform:none}.standard-label{background:#000;color:#fff;padding:.125rem .25rem;border-radius:0;font-size:.75rem;font-weight:400}.fingerings-info{margin-top:.5rem;padding:.5rem;background:#fff;border-radius:0;border:1px solid #000000;text-align:center}.fingerings-info p{margin:0;color:#000;font-size:.875rem}.add-fingering-btn{background:#fff;color:#000;border:1px solid #000000;padding:.25rem .5rem;border-radius:0;cursor:pointer;font-weight:400;margin-bottom:.5rem;transition:none;box-shadow:none;font-size:.75rem}.add-fingering-btn:hover{transform:none;box-shadow:none;background:#f5f5f5}.flex-between{display:flex;justify-content:space-between;align-items:center;width:100%}.flex-center{display:flex;align-items:center;justify-content:center}.flex-gap-sm{display:flex;gap:.25rem}.flex-gap{display:flex;gap:.5rem}.flex-gap-lg{display:flex;gap:.75rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.form-container{display:flex;flex-direction:column;gap:.75rem}.form-row{display:flex;gap:.5rem;align-items:center}.form-label{min-width:80px}.form-input,.form-select{flex:1;padding:.25rem;border:1px solid #000000;background:#fff;font-family:inherit}.button-row{display:flex;gap:.5rem}.btn-link{padding:.5rem 1rem;border:1px solid #000000;background:#fff;color:#000;text-decoration:none;font-size:.875rem;font-family:inherit}.btn-link:hover{background:#f5f5f5}.status-calculating{font-size:.875rem;color:#666}.status-error{font-size:.875rem;color:#d00}.settings-box{margin-top:1rem;padding:1rem;border:1px solid #000000;background-color:#f9f9f9}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}.settings-label{display:block;margin-bottom:.25rem;font-size:.875rem;font-weight:700}.freq-bar-container{display:flex;align-items:center;gap:.5rem}.fingering-row-playing{background-color:#f0f0f0;transition:background-color .2s}.cents-sharp{color:red}.cents-flat{color:#8b0000}.cents-in-tune{color:#000}