*{box-sizing:border-box}:root{color:#1d1724;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#120040;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-width:320px;margin:0}#root{min-height:100vh}.app-shell,.guide-shell{color:#1d1724;background:radial-gradient(circle at 20% 0,#6344ff73,#0000 32%),linear-gradient(160deg,#071d63 0%,#250050 48%,#36002e 100%);min-height:100vh;padding:56px 18px 32px}.app-header{text-align:center;color:#fff;max-width:720px;margin:0 auto 28px}.main-note{font-size:56px;font-weight:800;line-height:1}.app-header h1{margin:8px 0;font-size:clamp(42px,8vw,64px);font-weight:850;line-height:1}.app-header p{color:#ffffffc7;margin:0;font-size:clamp(17px,3.8vw,25px)}.app-card{background:#f8f8fb;border-radius:32px;width:min(100%,720px);margin:0 auto 28px;padding:clamp(26px,5vw,38px);box-shadow:0 18px 45px #07092d40}.card-title-row{align-items:center;gap:18px;margin-bottom:30px;display:flex}.card-title-row h2{color:var(--section-color,#6935d8);margin:0;font-size:clamp(25px,5vw,34px);font-weight:850}.icon-tile{color:#fff;border-radius:22px;flex:0 0 74px;place-items:center;width:74px;height:74px;font-size:34px;font-weight:850;display:grid}.purple{background:linear-gradient(135deg,#7a5cff,#922ce9)}.blue{background:linear-gradient(135deg,#52acff,#226de6)}.green{background:linear-gradient(135deg,#34d6a0,#18a979)}.orange{background:linear-gradient(135deg,#ff8d2c,#ff681f)}.pink{background:linear-gradient(135deg,#ff4fa3,#e83688)}.app-card:has(.purple){--section-color:#7b3ee5}.app-card:has(.blue){--section-color:#2675de}.app-card:has(.green){--section-color:#18a77a}.app-card:has(.orange){--section-color:#f07324}.app-card:has(.pink){--section-color:#df337f}.file-name{text-align:center;color:#15131a;overflow-wrap:anywhere;margin:6px 0 26px;font-size:clamp(19px,4vw,26px);font-weight:850}.file-input{display:none}button{font:inherit}.action-button,.tone-button,.reset-button,.note-button,.pause-button,.round-play,.download-link,.guide-back-button{cursor:pointer;border:0;transition:transform .18s,opacity .18s,box-shadow .18s,background .18s}.action-button:hover:not(:disabled),.tone-button:hover:not(:disabled),.reset-button:hover:not(:disabled),.note-button:hover:not(:disabled),.pause-button:hover:not(:disabled),.round-play:hover:not(:disabled),.download-link:hover,.guide-back-button:hover{transform:translateY(-1px)}.action-button:disabled,.tone-button:disabled,.reset-button:disabled,.note-button:disabled,.pause-button:disabled,.round-play:disabled{cursor:not-allowed;opacity:.48;box-shadow:none}.action-button{color:#fff;border-radius:26px;justify-content:center;align-items:center;gap:14px;min-width:min(100%,330px);min-height:86px;margin:0 auto;padding:0 28px;font-size:clamp(18px,4vw,25px);font-weight:850;display:flex}.music-actions{justify-items:center;gap:18px;display:grid}.purple-gradient{background:linear-gradient(100deg,#8b56ff,#7927dc);box-shadow:0 16px 28px #7f3fe752}.guide-button{background:linear-gradient(100deg,#4d8bff,#3e35d8);min-height:74px;box-shadow:0 14px 24px #3e35d83d}.tutorial-button{background:linear-gradient(100deg,#ff8d2c,#f05a24);min-height:74px;box-shadow:0 14px 24px #f05a243d}.detect-button{background:linear-gradient(100deg,#28c996,#18a777);box-shadow:0 16px 28px #18a7773d}.neutral-button{color:#fff;background:#d6d6d9;margin-top:20px}.result-button-active{background:linear-gradient(100deg,#ff8d2c,#ff681f);box-shadow:0 16px 28px #f05a2442}.export-button-active{background:linear-gradient(100deg,#28c996,#18a777);box-shadow:0 16px 28px #18a77742}.player-controls{place-items:center;gap:18px;margin-bottom:34px;display:grid}.round-play{color:#fff;background:linear-gradient(135deg,#57b7ff,#246ee8);border-radius:999px;width:148px;height:148px;font-size:54px;box-shadow:0 18px 32px #266fe847}.pause-button{color:#3e3b45;background:#e8e8ee;border-radius:18px;min-height:50px;padding:0 22px;font-weight:750}.progress-slider{accent-color:#5a8ff2;width:100%}.time-row{color:#26242c;justify-content:space-between;margin-top:12px;font-size:22px;display:flex}.detect-progress{width:min(100%,430px);margin:26px auto 0}.detect-progress-info{color:#08775f;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px;font-size:17px;font-weight:850;display:flex}.detect-progress-info strong{font-size:20px}.detect-progress-track{background:#d7eee7;border-radius:999px;height:18px;overflow:hidden;box-shadow:inset 0 1px 3px #08775f2e}.detect-progress-fill{border-radius:inherit;background:linear-gradient(100deg,#28d79e,#08775f);min-width:0;height:100%;transition:width .18s;box-shadow:0 10px 22px #18a77740}.detected-output{text-align:center;justify-items:center;gap:12px;margin-top:30px;display:grid}.detected-output span{color:#6f6b75;font-size:24px}.detected-output strong{color:#08775f;font-size:36px}.detected-output small{color:#08775f;background:#dcf8ef;border-radius:999px;padding:12px 26px;font-size:20px;font-weight:800}.tone-summary{text-align:center;background:#fff9f2;border:3px solid #f28025;border-radius:22px;padding:28px 22px}.tone-summary h3,.choose-title{color:#b94417;margin:0 0 24px;font-size:22px;font-weight:850}.tone-columns{grid-template-columns:1fr 1fr;gap:18px;display:grid}.tone-columns div{gap:10px;display:grid}.tone-columns div+div{border-left:2px solid #f1dfc9}.tone-columns span{color:#6f6b75;font-size:21px}.tone-columns strong{color:#b9360c;font-size:clamp(23px,6vw,40px);font-weight:900}.tone-summary p{color:#c3441a;margin:26px 0 0;font-size:21px;font-weight:850}.export-message{color:#8a4b16;text-align:center;max-width:480px;margin:16px auto 0;font-size:16px;font-weight:800}.download-link{color:#fff;text-align:center;background:linear-gradient(100deg,#28c996,#18a777);border-radius:20px;justify-content:center;align-items:center;width:min(100%,330px);min-height:58px;margin:14px auto 0;padding:0 22px;font-size:18px;font-weight:850;text-decoration:none;display:flex;box-shadow:0 14px 24px #18a7773d}.tone-actions{grid-template-columns:1fr 1fr;gap:18px;display:grid}.tone-button{color:#fff;border-radius:24px;min-height:86px;font-size:clamp(17px,4vw,24px);font-weight:850}.tone-button.down{background:linear-gradient(100deg,#ff5b78,#e93386)}.tone-button.up{background:linear-gradient(100deg,#a64cff,#7327e7)}.reset-button{color:#fff;background:#d8d8db;border-radius:22px;width:100%;min-height:80px;margin:22px 0 36px;font-size:clamp(17px,4vw,23px);font-weight:850}.reset-button-active{background:linear-gradient(100deg,#ff8d2c,#f05a24);box-shadow:0 16px 28px #f05a2447}.choose-title{color:#a31d55;text-align:center}.note-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.note-button{color:#82133f;background:#fff7fb;border:2px solid #f1c9dc;border-radius:22px;min-height:76px;font-size:clamp(18px,4vw,24px);font-weight:850}.note-button.active{color:#fff;background:linear-gradient(100deg,#f13a99,#7a30e9);border-color:#0000;box-shadow:0 14px 24px #9e2cb23d}.guide-shell{color:#fff;padding-top:0}.guide-topbar{color:#fff;background:#0f0527db;align-items:center;gap:20px;width:calc(100% + 36px);min-height:92px;margin:0 -18px 26px;padding:24px 30px 18px;font-size:clamp(24px,5vw,34px);font-weight:750;display:flex}.guide-back-button{color:#fff;background:0 0;border-radius:999px;place-items:center;width:46px;height:46px;font-size:38px;line-height:1;display:grid}.guide-hero{text-align:center;max-width:720px;margin:0 auto 32px}.guide-note{color:#ffc23c;font-size:64px;font-weight:900;line-height:1}.guide-hero h1{margin:12px 0 8px;font-size:clamp(42px,9vw,58px);font-weight:900;line-height:1}.guide-hero p{color:#ffffffe6;margin:0;font-size:clamp(25px,6vw,34px)}.guide-hero strong{color:#ffc23c}.guide-list-card,.guide-info-card,.tutorial-card,.tutorial-note-card{background:#432772a3;border:1px solid #ffffff1f;border-radius:32px;width:min(100%,720px);margin:0 auto 32px;padding:20px;box-shadow:inset 0 0 0 1px #ffffff0d}.guide-note-row{background:#4e327be0;border:1px solid #ffffff1a;border-radius:20px;grid-template-columns:8px 72px 1fr auto;align-items:center;gap:18px;min-height:96px;margin-bottom:14px;padding:16px 20px;display:grid}.guide-note-row:last-child{margin-bottom:0}.guide-note-bar{background:var(--note-color);border-radius:999px;width:7px;height:58px}.guide-note-international{color:var(--note-color);font-size:clamp(34px,8vw,42px);font-weight:900}.guide-note-name{color:#fff;font-size:clamp(21px,4.8vw,27px);font-weight:850}.guide-note-flat{color:#ffe8a8;border-left:2px solid #ffffff2e;min-width:190px;padding-left:22px;font-size:clamp(17px,3.8vw,23px);font-weight:850}.guide-info-card{text-align:center;padding:28px 24px}.guide-info-title{color:#ffc23c;text-align:left;align-items:center;gap:16px;margin-bottom:22px;display:flex}.guide-info-title span{font-size:38px;line-height:1}.guide-info-title h2{margin:0;font-size:clamp(30px,7vw,38px);font-weight:900}.guide-info-card p{color:#fff;max-width:520px;margin:0 auto 26px;font-size:clamp(22px,5vw,29px);font-weight:850;line-height:1.32}.enharmonic-row{grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:470px;margin:0 auto;display:grid}.enharmonic-box{background:#ffffff0f;border:2px solid;border-radius:20px;place-items:center;gap:8px;min-height:136px;padding:18px 12px;display:grid}.enharmonic-box strong{font-size:clamp(42px,9vw,56px);line-height:1}.enharmonic-box span{font-size:18px;font-weight:850}.enharmonic-box.cyan{color:#35cfff}.enharmonic-box.rose{color:#ff6a86}.equals-symbol{color:#ffc23c;font-size:46px;font-weight:900}.guide-footer-tags{grid-template-columns:1fr 1fr;gap:18px;width:min(100%,720px);margin:0 auto;display:grid}.guide-footer-tags div{color:#fff;text-align:center;background:#4e327bbd;border:1px solid #ffffff1f;border-radius:24px;justify-content:center;align-items:center;gap:14px;min-height:104px;padding:18px;display:flex}.guide-footer-tags span{color:#ffc23c;font-size:30px}.guide-footer-tags strong{font-size:clamp(19px,4.5vw,25px);line-height:1.22}.tutorial-step{background:#4e327be0;border-radius:22px;grid-template-columns:58px 1fr;align-items:center;gap:18px;min-height:108px;margin-bottom:16px;padding:20px;display:grid}.tutorial-step:last-child{margin-bottom:0}.tutorial-step>span{color:#22053c;background:linear-gradient(135deg,#ffc23c,#ff8d2c);border-radius:18px;place-items:center;width:58px;height:58px;font-size:28px;font-weight:900;display:grid}.tutorial-step h2{color:#fff;margin:0 0 8px;font-size:clamp(22px,5vw,28px);font-weight:900}.tutorial-step p,.tutorial-note-card p{color:#ffffffdb;margin:0;font-size:clamp(17px,4vw,21px);font-weight:650;line-height:1.35}.tutorial-note-card{text-align:center;padding:28px 24px}.tutorial-note-card h2{color:#ffc23c;margin:0 0 16px;font-size:clamp(26px,6vw,34px);font-weight:900}.tutorial-note-card p+p{margin-top:10px}.about-card{--section-color:#635cf2}.about-icon{background:linear-gradient(135deg,#7974ff,#5b55df)}.about-content{text-align:center}.about-content h3{color:#1d1724;margin:0;font-size:28px;font-weight:900}.about-version{color:#a8a4ad;margin:12px 0 26px;font-size:20px;font-weight:650}.about-developed{color:#a8a4ad;margin:0 0 8px;font-size:19px;font-weight:650}.about-content>strong{color:#1d1724;font-size:22px;font-weight:900;display:block}.about-link{background:linear-gradient(100deg,#6a66ff,#4635d8);width:min(100%,360px);min-height:74px;margin-top:28px;text-decoration:none;box-shadow:0 16px 28px #4635d847}.about-divider{background:#d8d6dd;height:1px;margin:34px 0 24px}.about-content h4{color:#1d1724;margin:0 0 16px;font-size:21px;font-weight:900}.credits-list{color:#33303a;margin:0;padding:0;font-size:18px;line-height:1.45;list-style:none}@media (width<=540px){.app-shell{padding:38px 14px 24px}.guide-shell{padding:0 14px 24px}.app-card{border-radius:26px;margin-bottom:22px}.icon-tile{border-radius:18px;flex-basis:58px;width:58px;height:58px;font-size:27px}.round-play{width:116px;height:116px;font-size:42px}.tone-actions{grid-template-columns:1fr}.note-grid{grid-template-columns:repeat(3,1fr);gap:12px}.tone-columns{grid-template-columns:1fr}.tone-columns div+div{border-top:2px solid #f1dfc9;border-left:0;padding-top:18px}.guide-topbar{width:calc(100% + 28px);margin:0 -14px 24px;padding:22px 22px 16px}.guide-list-card{padding:18px}.guide-note-row{grid-template-columns:7px 62px 1fr;gap:14px}.guide-note-flat{border-left:0;grid-column:3;min-width:0;padding-left:0}.enharmonic-row{grid-template-columns:1fr}.equals-symbol{line-height:1}.guide-footer-tags{grid-template-columns:1fr}.tutorial-step{grid-template-columns:48px 1fr;gap:14px;padding:18px}.tutorial-step>span{border-radius:16px;width:48px;height:48px;font-size:24px}}