.tone-selector-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#8dc3e2d0;padding:24px;border-radius:14px;box-shadow:0 10px 12px #0000001f;max-width:500px;margin:0 auto 0 150px}.tone-selector-container label{font-weight:600;font-size:20px;color:#333}.tone-selector-container select{padding:10px 14px;border-radius:10px;border:2px solid #1c2e4a;font-size:18px;cursor:pointer;background:linear-gradient(135deg,#10203a,#1a3252);color:#eaf2ff;box-shadow:0 6px 12px #0000002e}.tone-selector-container select option{color:#0e172a;background:#fff}.tone-selector-container button{padding:10px 16px;font-size:18px;border-radius:12px;border:1px solid #1c2e4a;cursor:pointer;background:linear-gradient(135deg,#0f1b2c,#1b3454);color:#eaf2ff;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;margin:0 6px;letter-spacing:.3px;box-shadow:0 10px 16px #0000002e}.tone-selector-container button:hover{background:linear-gradient(135deg,#12304e,#214472);box-shadow:0 12px 20px #00000038}.tone-selector-container button:active{transform:translateY(1px)}.tone-group,.tone-acc-group,.tone-type-group{display:flex;align-items:center;gap:10px}.instrument-row{display:flex;justify-content:center;gap:16px;margin-bottom:12px}.instrument-btn{width:96px;height:96px;border:2px solid transparent;background:linear-gradient(145deg,#f7f7f7,#e3e3e3);border-radius:16px;padding:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px #0000001f}.instrument-btn.active{background:#e8f2ff;border-color:#1e88e5;box-shadow:0 12px 24px #1e88e540}.instrument-btn.active .instrument-icon{filter:saturate(1.1)}.instrument-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px #00000029}.instrument-icon{width:72px;height:72px;object-fit:contain;pointer-events:none}.bass-strings-row{display:flex;justify-content:center;gap:8px;margin-bottom:8px}.bass-strings-btn{border:none;border-radius:999px;padding:4px 10px;font-size:16px;cursor:pointer;background:#f2f2f2;transition:.2s}.bass-strings-btn.active{background:#1565c0;color:#fff}.tone-error{margin-top:8px;color:#b00020;font-weight:500;text-align:center;max-width:320px}@media(max-width:767px){.tone-selector-container{margin:0 auto!important;width:94%;max-width:360px;padding:18px;gap:14px;height:auto;flex-direction:column}.tone-group,.tone-acc-group,.tone-type-group{flex-direction:row;gap:8px;flex-wrap:wrap}.tone-selector-container label,.tone-selector-container select,.tone-selector-container button{font-size:18px}.instrument-row{gap:10px;flex-wrap:wrap;justify-content:center}.instrument-btn{width:72px;height:72px;padding:6px;border-radius:12px}.instrument-icon{width:56px;height:56px}}.harmonic-field-container{text-align:center;margin-top:40px}.harmonic-field-title{font-size:32px;font-weight:700;margin-bottom:20px}.harmonic-field-row{display:flex;justify-content:center;gap:32px;margin-bottom:16px}.harmonic-field-col{display:flex;flex-direction:column;align-items:center}.harmonic-degree{font-size:28px;font-weight:700;margin-bottom:6px;color:#222}.harmonic-chord{background:#222;color:#fff;font-size:40px;font-weight:700;padding:14px 22px;border-radius:14px;width:120px;text-align:center;box-shadow:0 6px 14px #00000026}@media(max-width:767px){.harmonic-field-row{display:grid!important;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;padding:0 10px}.harmonic-field-col{width:100%;text-align:center}.harmonic-degree{font-size:1.1rem;margin-bottom:4px}.harmonic-chord{font-size:1.3rem;padding:8px 0}.harmonic-field-title{font-size:1.6rem;margin-bottom:20px}}*{margin:0;padding:0;box-sizing:border-box}body,button,input,select,textarea{font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;letter-spacing:.2px;color:#0e172a}html,body{width:100%;min-height:100%;background:none!important}#root{background-image:url(../bg.png);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;min-height:100vh}.app-container{min-height:100vh;background:transparent!important;padding-top:10px}.top-bar{display:flex;align-items:center;justify-content:center;gap:85px;margin-top:10px}.app-title{font-size:3rem;font-weight:700;color:#050505}.section-block{margin-top:50px}.bottom-sections{display:flex;justify-content:center;align-items:flex-start;column-gap:40px;row-gap:20px;flex-wrap:wrap;margin-top:40px;padding-bottom:120px}.scale-box{width:45%;min-width:420px;transform:scale(1);transform-origin:top center}.footer{position:fixed;bottom:0;width:100%;padding:14px 0;text-align:center;font-size:22px;font-weight:700;color:#fff;background:#111;letter-spacing:1px}.invalid-tone-box{margin:40px auto;padding:20px;background:#ffe4e4;color:#600;border:2px solid #cc0000;border-radius:14px;width:90%;max-width:420px;text-align:center}.invalid-tone-box button{margin-top:15px;padding:10px 18px;background:#c00;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:18px}.invalid-tone-box button:hover{background:#a80000}@media(max-width:767px){.top-bar{flex-direction:column;align-items:center;justify-content:center;gap:16px;margin-top:5px;width:100%}.top-bar>*{width:100%;max-width:320px;display:flex;justify-content:center}.app-title{font-size:2.2rem;text-align:center;width:100%}.section-block{margin-top:25px}.bottom-sections{flex-direction:column;gap:30px;padding-bottom:150px;align-items:center}.scale-box{width:100%;transform:scale(.9)}body,html,#root,.app-container{overflow-x:hidden!important;width:100%!important}}@media(min-width:768px)and (max-width:1023px){.top-bar{gap:20px}.app-title{font-size:2.6rem}.bottom-sections{gap:25px}.scale-box{width:48%;min-width:360px;transform:scale(1)}}@tailwind base;@tailwind components;@tailwind utilities;body{font-family:Inter,sans-serif;background:#f8fafc}