:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#122033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary:#2457d6;--color-primary-soft:#2457d61f;--color-secondary:#19a974;--color-on-primary:#fff;--color-text:#122033;--color-text-muted:#506076;--color-surface:#ffffffeb;--color-surface-alt:#f8fbff;--color-border:#1220331a;--color-border-strong:#1220332e;--color-danger:#c75146;--shadow-soft:0 18px 40px #243d6d14;background:radial-gradient(circle at top,#f6f9ff 0%,#edf3ff 35%,#f8fafc 100%);font-family:Segoe UI,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;color:var(--color-text);margin:0}body,button{font-family:inherit}button,input,textarea,select{font:inherit}#root{min-height:100vh}a{color:inherit}.page-shell{width:min(1120px,100% - 2rem);margin:0 auto;padding:2rem 0 4rem}.section{margin-top:2rem}.hero,.footer-panel,.info-card,.step-card,.section-grid,.hero-panel{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-soft);border-radius:24px}.hero{gap:1.5rem;padding:1.5rem;display:grid}.hero-copy h1{letter-spacing:-.04em;margin:0;font-size:clamp(2.25rem,5vw,4.5rem);line-height:.95}.hero-text,.section-heading p,.info-card p,.step-card p,.footer-panel p,.helper-text,.feature-list{color:var(--color-text-muted)}.hero-text{max-width:42rem;font-size:1.05rem}.eyebrow{color:var(--color-primary);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .75rem;font-size:.8rem;font-weight:700}.hero-actions{flex-wrap:wrap;gap:.875rem;margin-top:1.5rem;display:flex}.button{min-height:48px;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:.85rem 1.2rem;font-weight:700;text-decoration:none;transition:transform .12s,background-color .12s,border-color .12s;display:inline-flex}.button:hover{transform:translateY(-1px)}.button:disabled{opacity:.55;cursor:not-allowed;transform:none}.button-primary{background:var(--color-primary);color:var(--color-on-primary)}.button-secondary{border-color:var(--color-border-strong);color:var(--color-text);background:0 0}.hero-panel{background:var(--color-surface-alt);padding:1.25rem}.hero-panel h2,.section-heading h2,.info-card h3,.step-card h3,.footer-panel h2{margin-top:0}.feature-list{margin:1rem 0 0;padding-left:1.2rem}.feature-list li+li{margin-top:.65rem}.section-grid{padding:1.5rem}.section-heading{margin-bottom:1.5rem}.action-grid,.steps-grid{gap:1rem;display:grid}.info-card,.step-card{padding:1.25rem}.helper-text,.status-text{margin-bottom:0;font-size:.95rem}.status-text{color:var(--color-primary);font-weight:600}.status-text-error{color:var(--color-danger)}.step-number{background:var(--color-primary-soft);width:2rem;height:2rem;color:var(--color-primary);border-radius:999px;justify-content:center;align-items:center;margin-bottom:1rem;font-weight:700;display:inline-flex}.footer-panel{text-align:center;padding:1.5rem}.footer-contribution{letter-spacing:0;max-width:48rem;margin:0 auto 1.5rem;font-size:clamp(1.35rem,3vw,2rem);font-weight:800;line-height:1.2;color:var(--color-text)!important}.mobile-upload-card{display:none}.upload-button{width:100%}.recorder-layout{gap:1rem;display:grid}.mode-toggle{flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;display:flex}.recorder-card,.visualizer-card{border:1px solid var(--color-border);background:var(--color-surface-alt);border-radius:20px;padding:1.25rem}.recorder-card h3,.visualizer-card h3{margin-top:0}.phase-guide{gap:.65rem;margin:1.25rem 0;display:grid}.phase-guide-item,.progress-summary,.visualizer-heading{justify-content:space-between;align-items:center;gap:1rem;display:flex}.phase-guide-item{background:var(--color-surface);text-transform:capitalize;border-radius:12px;padding:.75rem .9rem}.phase-guide-item span,.progress-summary{color:var(--color-text-muted)}.instruction-badge{background:var(--color-primary-soft);min-width:7rem;color:var(--color-primary);text-transform:capitalize;border-radius:999px;justify-content:center;align-items:center;padding:.65rem 1rem;font-size:clamp(1.1rem,5vw,1.6rem);font-weight:700;display:inline-flex}.instruction-badge-active{background:var(--color-primary);color:var(--color-on-primary)}.phase-progress{margin-bottom:.85rem}.progress-summary{margin-bottom:.45rem;font-size:.9rem}.progress-track{background:var(--color-border);border-radius:999px;width:100%;height:12px;overflow:hidden}.progress-bar{background:var(--color-secondary);height:100%;transition:width .1s linear}.recorder-button{width:100%;margin-top:1rem}.visualizer-card canvas{background:#081018;border-radius:16px;width:100%;height:auto;display:block}.audio-player{width:100%;margin-top:1rem}@media (width>=760px){.hero{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);align-items:stretch;padding:2rem}.action-grid,.steps-grid,.recorder-layout{grid-template-columns:repeat(2,minmax(0,1fr))}.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=759px){.page-shell{width:min(100% - 1rem,36rem);padding-top:.5rem}.section,.hero.section{margin-top:1rem}.section-grid,.recorder-card,.visualizer-card{padding:1rem}.recorder-layout .visualizer-card{grid-row:1}.visualizer-heading{align-items:flex-start}.visualizer-heading h3{font-size:1rem}.visualizer-card canvas{border-radius:12px}.mode-toggle .button{flex:1}.mobile-upload-card{border-color:color-mix(in srgb, var(--color-primary) 30%, var(--color-border));background:linear-gradient(145deg, var(--color-surface-alt), var(--color-primary-soft));box-shadow:none;margin-top:1rem;display:block}.desktop-upload-card{display:none}.mobile-upload-card .eyebrow{margin-bottom:.4rem}.mobile-upload-card h3{margin-bottom:.5rem}.footer-panel{padding:1.5rem 1rem}}