/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.container{width:100%}.block{display:block}.flex{display:flex}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--primary:#6c5ce7;--secondary:#a29bfe;--bg:#f0f3f7;--card-bg:#fff;--text:#2d3436;--white:#fff;--black:#2d3436;--correct:#00b894;--incorrect:#d63031;--key-border:#ccc;--key-active-white:#dfe6e9;--key-active-black:#4b4b4b}body.dark-mode{--bg:#1e272e;--card-bg:#2d3436;--text:#f0f3f7;--white:#2d3436;--black:#1a1a1a;--secondary:#6c5ce7;--key-border:#4b5563;--key-active-white:#3d464d;--key-active-black:#000}body{background-color:var(--bg);color:var(--text);min-height:100vh;margin:0;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;transition:background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1);overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}#root,.app-root{flex-direction:column;align-items:center;width:100%;min-height:100vh;display:flex}.main-header{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);z-index:100;box-sizing:border-box;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding:15px 40px;transition:background-color .4s;display:grid;position:sticky;top:0;box-shadow:0 2px 20px #00000008}.logo{justify-self:center}.nav-links{justify-self:start;gap:10px;display:flex}.theme-toggle{justify-self:end;align-items:center;gap:10px;display:flex}.nav-links{flex:1;justify-content:flex-start}.theme-toggle{flex:1;justify-content:flex-end}@media (width<=850px){.main-header{grid-template-columns:1fr;gap:15px;padding:15px 20px}.nav-links{flex:none;justify-self:center}.logo{justify-self:center}.theme-toggle{flex:none;justify-self:center}.logo h2{font-size:1.2rem}}.nav-links{gap:10px;display:flex}.nav-btn{background:var(--bg);cursor:pointer;color:var(--text);border:2px solid #0000;border-radius:20px;padding:8px 16px;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-btn:hover{background:var(--secondary);color:#fff;transform:translateY(-2px)}.nav-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 15px #6c5ce74d}.lang-toggle{background:var(--bg);border:1px solid var(--key-border);border-radius:14px;gap:4px;margin-right:10px;padding:4px;display:flex}.lang-btn{background:var(--card-bg);cursor:pointer;opacity:.7;filter:grayscale();border:1px solid #0000001a;border-radius:10px;padding:6px 10px;font-size:1.1rem;transition:all .3s}.lang-btn:hover{opacity:1;background:var(--white);border-color:var(--secondary)}.lang-btn.active{opacity:1;filter:grayscale(0);background:var(--white);border-color:var(--primary);box-shadow:0 2px 8px #00000026}#dark-mode-toggle{background:var(--card-bg);cursor:pointer;border:1px solid #0000000d;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1rem;transition:all .3s;display:flex;box-shadow:0 4px 10px #0000000d}#dark-mode-toggle:hover{transform:scale(1.1)rotate(10deg)}.container{box-sizing:border-box;width:100%;max-width:800px;padding:40px 20px}.pitch-test-container{box-sizing:border-box;width:100%}.home-header{text-align:center;margin-bottom:50px}.home-header h1{background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:15px;font-size:2.8rem;font-weight:800}.subtitle{color:#636e72;font-size:1.1rem}.action-cards{grid-template-columns:1fr 1fr;gap:25px;display:grid}@media (width<=600px){.action-cards{grid-template-columns:1fr}}.action-card{background:var(--card-bg);color:var(--text);text-align:center;border:1px solid #00000005;border-radius:28px;padding:40px 30px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 15px 35px #0000000d}.action-card:hover{box-shadow:0 20px 45px #0000001a}.action-card h2{color:var(--primary);margin:20px 0 10px}.action-card p{color:#636e72;margin-bottom:25px;line-height:1.6}.btn-text{color:var(--primary);background:var(--bg);border-radius:12px;padding:8px 16px;font-weight:800;transition:all .3s}.action-card:hover .btn-text{background:var(--primary);color:#fff}.intro-section,.feedback-section{background:var(--card-bg);border-radius:28px;margin-top:60px;padding:40px;box-shadow:0 15px 35px #0000000d}.info-grid{text-align:left;grid-template-columns:1fr 1fr;gap:30px;display:grid}@media (width<=600px){.info-grid{grid-template-columns:1fr}}.info-item h3{color:var(--primary);margin-bottom:12px}.info-item p{color:#636e72;line-height:1.6}.feedback-form{flex-direction:column;gap:20px;margin-top:30px;display:flex}.feedback-form textarea{background:var(--bg);color:var(--text);resize:none;border:2px solid #0000;border-radius:16px;height:120px;padding:20px;font-family:inherit;font-size:1rem;transition:all .3s}.feedback-form textarea:focus{border-color:var(--secondary);background:var(--card-bg);outline:none}.screen{background:var(--card-bg);text-align:center;box-sizing:border-box;border-radius:32px;width:100%;padding:40px;box-shadow:0 15px 40px #0000000d}@media (width<=600px){.screen{padding:30px 20px}}.primary-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:18px;width:100%;padding:18px;font-size:1.1rem;font-weight:800;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 20px #6c5ce733}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px #6c5ce74d}.play-btn{background:var(--secondary);color:#fff;cursor:pointer;border:none;border-radius:50%;width:100px;height:100px;margin-bottom:20px;font-size:1.1rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 25px #a29bfe66}.play-btn:hover:not(:disabled){background:var(--primary);transform:scale(1.05)}.play-btn:disabled{opacity:.6;cursor:wait}.piano{-webkit-user-select:none;user-select:none;justify-content:center;height:180px;margin:40px 0;display:flex;position:relative}.key{cursor:pointer;border:1px solid var(--key-border);flex-shrink:0;transition:background .15s,transform .1s;position:relative}.key:active{transform:translateY(2px)}.key.white{background:var(--white);z-index:1;border-radius:0 0 8px 8px;width:40px;height:100%}.key.black{background:var(--black);z-index:2;border-radius:0 0 5px 5px;width:28px;height:60%;margin-left:-14px;margin-right:-14px}.key.disabled{opacity:.6;cursor:not-allowed}.key.active.white{background:var(--key-active-white)}.key.active.black{background:var(--key-active-black)}.key.show-correct{border:2px solid var(--correct);background:#55efc4!important}.key.active-incorrect{background:var(--incorrect)!important}.drum-pad-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px;margin:30px 0;display:grid}.drum-pad{background:var(--card-bg);cursor:pointer;border:2px solid #dfe6e9;border-radius:20px;flex-direction:column;align-items:center;gap:10px;padding:20px 15px;transition:all .1s;display:flex;box-shadow:0 6px #dfe6e9}.drum-pad:active,.drum-pad.active{background:var(--secondary);color:#fff;border-color:var(--secondary);transform:translateY(6px);box-shadow:0 0 #dfe6e9}.drum-pad .key-hint{color:var(--primary);font-size:1.2rem;font-weight:800}.drum-pad.active .key-hint{color:#fff}.score-circle{border:10px solid var(--primary);background:var(--bg);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:130px;height:130px;margin:30px auto;display:flex}#final-score{color:var(--primary);font-size:3rem;font-weight:900}.total{color:#b2bec3;font-weight:700}.mistake-stats{text-align:left;background:var(--bg);border-radius:20px;max-height:250px;margin:25px 0;padding:20px;overflow-y:auto}.mistake-item{border-bottom:1px solid #0000000d;justify-content:space-between;padding:10px 0;display:flex}.setup-group{text-align:left;margin-bottom:30px}.setup-group h3{margin-bottom:15px;font-size:1.1rem}.toggle-group{flex-wrap:wrap;gap:10px;display:flex}.toggle-group button{background:var(--card-bg);cursor:pointer;min-width:80px;color:var(--text);border:2px solid #dfe6e9;border-radius:14px;flex:1;padding:12px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.toggle-group button.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 15px #6c5ce733}.toggle-group button:hover:not(.active){border-color:var(--secondary);background:var(--bg)}.feedback{height:30px;margin-top:25px;font-size:1.2rem;font-weight:800}.feedback.correct{color:var(--correct)}.feedback.incorrect{color:var(--incorrect)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}