:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f5f7ff;background:#0b1020;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top,rgba(74,144,226,.24),transparent 32%),linear-gradient(180deg,#0f172c,#0a0f1d)}button,input{font:inherit}button{cursor:pointer;border:none}input[type=file]{margin-top:.5rem}#root{min-height:100vh}.app-shell{width:min(1440px,calc(100vw - 2rem));margin:0 auto;padding:1.5rem 0 3rem}.hero-card,.panel,.timeline-shell{border:1px solid rgba(156,178,255,.18);background:#0a1022c7;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 24px 80px #00000047}.hero-card{display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem;border-radius:28px;padding:1.75rem;margin-bottom:1.5rem}.hero-card h1,.panel h2,.timeline-header h2{margin:0}.hero-copy{max-width:58rem;color:#cad3ff}.hero-stats{display:grid;gap:.9rem}.hero-stats div,.metric-card,.upload-card,.microphone-card{border-radius:18px;border:1px solid rgba(157,175,255,.16);background:#ffffff0a;padding:1rem}.hero-stats strong,.metric-card strong,.upload-card strong,.microphone-card strong{display:block;font-size:1rem;margin-bottom:.35rem}.hero-stats span,.metric-card span,.upload-card span,.microphone-card span,.panel p,.timeline-header p,.feature-list{color:#b6c1ee}.eyebrow{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:#86a8ff}.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.panel{border-radius:24px;padding:1.25rem}.timeline-panel--wide{grid-column:1 / -1;padding:0;overflow:hidden}.panel-header,.timeline-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.status-pill{padding:.5rem .8rem;border-radius:999px;background:#56d39d24;color:#93f2be;white-space:nowrap}.status-pill--muted{background:#86a8ff1f;color:#b9caff}.transport-row,.metric-row,.tempo-options{display:flex;gap:.75rem;flex-wrap:wrap}.transport-row{margin-top:1rem}.metric-row{margin:1rem 0}.metric-card{min-width:10rem;flex:1}.primary-button,.secondary-button,.tempo-option{border-radius:14px;padding:.82rem 1rem;transition:transform .14s ease,background .14s ease}.primary-button{background:linear-gradient(135deg,#5d8cff,#7d64ff);color:#fff}.secondary-button,.tempo-option{background:#ffffff0f;color:#eef2ff;border:1px solid rgba(255,255,255,.08)}.primary-button:hover,.secondary-button:hover,.tempo-option:hover{transform:translateY(-1px)}.tempo-selector{display:grid;gap:.75rem}.tempo-selector>span{color:#d9e2ff;font-weight:600}.tempo-option--active{background:#5d8cff33;border-color:#7da0ff66}.import-panel,.overview-panel,.controls-panel{min-height:100%}.upload-card,.microphone-card,.mic-feedback-card{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem}.microphone-card{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.mic-feedback-card{border-radius:18px;border:1px solid rgba(157,175,255,.16);background:#ffffff0a;padding:1rem;gap:.9rem}.mic-feedback-card--correct{border-color:#7adfa966;background:#3ea56d1f}.mic-feedback-card--wrong{border-color:#ff7a7a61;background:#b43f3f1f}.mic-feedback-card--waiting,.mic-feedback-card--ready,.mic-feedback-card--free-play,.mic-feedback-card--mic-off{border-color:#9dafff29}.mic-feedback-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.mic-feedback-header span,.mic-feedback-item span{color:#b6c1ee}.mic-feedback-header strong,.mic-feedback-item strong{display:block}.mic-feedback-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.mic-feedback-item{border-radius:14px;border:1px solid rgba(157,175,255,.12);background:#ffffff08;padding:.8rem}.feedback-badge{padding:.45rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}.feedback-badge--correct{background:#7adfa92e;color:#a5f0c5}.feedback-badge--wrong{background:#ff7a7a2e;color:#ffb0b0}.feedback-badge--waiting,.feedback-badge--ready,.feedback-badge--free-play,.feedback-badge--mic-off{background:#86a8ff29;color:#c7d6ff}.feature-list{margin:1rem 0 0;padding-left:1.25rem}.feature-list li+li{margin-top:.8rem}.timeline-shell{border-radius:24px;overflow:hidden}.timeline-shell--compact{border-radius:18px}.timeline-shell:fullscreen{width:100vw;height:100dvh;border-radius:0;background:#081122}.timeline-shell:fullscreen .timeline-viewport,.timeline-shell--compact .timeline-viewport{min-height:calc(100dvh - 88px)}.timeline-header{padding:1.25rem 1.25rem 0}.timeline-heading{min-width:0}.timeline-title{font-size:1.6rem;line-height:1.1}.timeline-title--compact{font-size:1rem;font-weight:700;letter-spacing:.01em}.timeline-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.65rem;justify-content:flex-end}.timeline-status-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}.playhead-indicator{display:inline-flex;align-items:center;gap:.6rem;color:#d4deff;padding-top:.6rem}.timeline-icon-button,.timeline-play-button,.timeline-reset-button,.timeline-tempo-button{border-radius:999px;padding:.72rem 1rem;background:#ffffff14;border:1px solid rgba(160,180,255,.16);color:#eef2ff;transition:transform .14s ease,background .14s ease}.timeline-icon-button:hover,.timeline-play-button:hover,.timeline-reset-button:hover,.timeline-tempo-button:hover{transform:translateY(-1px);background:#7da0ff2e}.timeline-play-button{width:100%;min-width:0;background:linear-gradient(135deg,#5d8cffe6,#7d64ffe6);border-color:#94aeff42}.timeline-reset-button{width:100%;min-width:0}.timeline-play-button--active{background:linear-gradient(135deg,#7adfa9eb,#36a670e6);color:#0a2215;border-color:#bcffdd47}.timeline-tempo-section{display:grid;gap:.32rem;margin-top:.28rem;padding-top:.32rem;border-top:1px solid rgba(160,180,255,.12)}.timeline-tempo-label{display:block;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#aebfff;text-align:center}.timeline-tempo-group{display:grid;grid-template-columns:1fr;gap:.4rem}.timeline-tempo-button{width:100%;min-width:0;padding-inline:.8rem}.timeline-tempo-button--active{background:#5d8cff3d;border-color:#7da0ff7a}.indicator-dot{width:.75rem;height:.75rem;border-radius:999px;background:#7ec8ff;box-shadow:0 0 0 6px #7ec8ff1f}.timeline-viewport{position:relative;overflow:hidden;padding:1rem 0 1.5rem}.timeline-side-controls{position:absolute;top:.75rem;left:.45rem;z-index:12;display:flex;flex-direction:column;align-items:stretch;gap:.5rem}.timeline-bottom-control{position:absolute;left:.45rem;bottom:1.65rem;z-index:12}.playhead{position:absolute;top:1rem;bottom:1.5rem;width:2px;background:linear-gradient(180deg,#8fd6ff,#6e82ff);z-index:10;box-shadow:0 0 18px #7ec8ff47}.timeline-content{position:relative;will-change:transform}.timeline-row{position:relative;padding:0 1rem}.timeline-row--ruler{height:42px}.timeline-row--chords{height:72px}.timeline-row--lyrics{height:76px}.timeline-row--notes{margin-top:.4rem}.timeline-shell--compact .timeline-viewport,.timeline-shell:fullscreen .timeline-viewport{padding:.5rem 0 .75rem}.timeline-shell--compact .timeline-row,.timeline-shell:fullscreen .timeline-row{padding:0 .5rem}.timeline-shell--compact .timeline-row--ruler,.timeline-shell:fullscreen .timeline-row--ruler{height:26px}.timeline-shell--compact .timeline-row--chords,.timeline-shell:fullscreen .timeline-row--chords{height:56px}.timeline-shell--compact .timeline-row--lyrics,.timeline-shell:fullscreen .timeline-row--lyrics{height:58px}.timeline-shell--compact .beat-marker span,.timeline-shell:fullscreen .beat-marker span{font-size:.62rem;left:.25rem}.beat-marker{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.06)}.beat-marker span{position:absolute;top:0;left:.4rem;color:#8ea4ea;font-size:.78rem}.beat-marker--strong{border-left-color:#a1b7ff47}.chord-block,.lyric-block,.note-block{position:absolute;border-radius:14px;display:flex;align-items:center;justify-content:center}.chord-block{top:12px;height:44px;background:#5d8cff33;border:1px solid rgba(143,171,255,.34);color:#f5f7ff;font-weight:700;letter-spacing:.04em}.lyric-block{top:14px;min-height:44px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#dbe5ff;justify-content:flex-start;padding:0 1rem}.note-lane{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.06)}.note-lane span{position:absolute;left:.5rem;top:1px;font-size:.72rem;color:#7990d6}.note-block{background:linear-gradient(135deg,#7adfa9eb,#36a670e6);border:1px solid rgba(188,255,221,.35);color:#092014;font-size:.75rem;font-weight:700;box-shadow:0 6px 18px #1857354d}.note-block--active{border-color:#95bcffa6;box-shadow:0 0 0 2px #7da0ff3d,0 6px 18px #1857354d}.note-block--correct{border-color:#bcffddd9;box-shadow:0 0 0 2px #7adfa957,0 6px 18px #18573557}.note-block--wrong{background:linear-gradient(135deg,#ff7e7ef0,#bd3e3eeb);border-color:#ffccccc2;color:#220808;box-shadow:0 0 0 2px #ff7a7a47,0 6px 18px #791e1e57}.timeline-shell--compact .chord-block,.timeline-shell:fullscreen .chord-block{top:8px;height:34px;border-radius:12px;font-size:.95rem}.timeline-shell--compact .lyric-block,.timeline-shell:fullscreen .lyric-block{top:8px;min-height:38px;border-radius:12px;font-size:.92rem;padding:0 .75rem}.timeline-shell--compact .note-lane span,.timeline-shell:fullscreen .note-lane span{left:.35rem;font-size:.62rem}.timeline-shell--compact .note-block,.timeline-shell:fullscreen .note-block{font-size:.68rem;border-radius:10px}.timeline-shell--compact .timeline-side-controls,.timeline-shell:fullscreen .timeline-side-controls{top:.35rem;left:.2rem;gap:.24rem}.timeline-shell--compact .timeline-bottom-control,.timeline-shell:fullscreen .timeline-bottom-control{left:.2rem;bottom:1.15rem}.timeline-shell--compact .timeline-play-button,.timeline-shell--compact .timeline-reset-button,.timeline-shell--compact .timeline-tempo-button,.timeline-shell:fullscreen .timeline-play-button,.timeline-shell:fullscreen .timeline-reset-button,.timeline-shell:fullscreen .timeline-tempo-button{padding:.28rem .42rem;font-size:.68rem;line-height:1.1}.timeline-shell--compact .timeline-tempo-section,.timeline-shell:fullscreen .timeline-tempo-section{gap:.2rem;margin-top:.18rem;padding-top:.22rem}.timeline-shell--compact .timeline-tempo-label,.timeline-shell:fullscreen .timeline-tempo-label{font-size:.54rem;letter-spacing:.06em}.timeline-shell--compact .timeline-tempo-group,.timeline-shell:fullscreen .timeline-tempo-group{gap:.24rem}@media (max-width: 1120px){.hero-card,.content-grid{grid-template-columns:1fr}.microphone-card,.mic-feedback-header{flex-direction:column;align-items:stretch}}@media (max-width: 720px){.app-shell{width:min(100vw - .5rem,1440px);padding-top:.5rem;padding-bottom:1rem}.hero-card,.panel{border-radius:18px;padding:.9rem}.timeline-panel--wide{border-radius:18px}.timeline-header{padding:.7rem .75rem 0;flex-direction:row;align-items:flex-start}.timeline-actions{width:auto;margin-left:auto;gap:.45rem}.timeline-status-row{gap:.4rem}.playhead-indicator{padding-top:0;font-size:.82rem}.mic-feedback-grid{grid-template-columns:1fr}.timeline-side-controls{top:.28rem;left:.18rem;gap:.22rem}.timeline-bottom-control{left:.18rem;bottom:.95rem}.timeline-icon-button,.timeline-play-button,.timeline-reset-button,.timeline-tempo-button{padding:.32rem .48rem;font-size:.68rem}.timeline-tempo-section{gap:.18rem;margin-top:.14rem;padding-top:.18rem}.timeline-tempo-label{font-size:.5rem}.timeline-tempo-button{padding-inline:.42rem}.indicator-dot{width:.55rem;height:.55rem;box-shadow:0 0 0 4px #7ec8ff1f}}