.ear-shell { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: max(18px, var(--safe-top)) 0 calc(55px + var(--safe-bottom)); }
.ear-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; }
.ear-header .brand-lockup { flex-direction: row-reverse; text-align: right; }
.ear-hero { position: relative; margin: 18px 0 22px; padding: clamp(28px, 6vw, 48px); overflow: hidden; border-radius: 32px; color: white; background: linear-gradient(135deg, rgba(5,41,83,.94), rgba(23,103,180,.86)), url("../assets/brand/studio-mood.jpg") center/cover; box-shadow: 0 24px 60px rgba(9,64,120,.22); }
.ear-hero::after { content: ""; position: absolute; width: 230px; height: 230px; right: -70px; top: -90px; border-radius: 50%; background: rgba(107,217,229,.2); }
.ear-hero h1 { position: relative; max-width: 720px; margin-bottom: 10px; font-size: clamp(2rem, 6vw, 3.4rem); }
.ear-hero p, .ear-hero a, .ear-hero .hero-kicker { position: relative; }
.ear-hero p { max-width: 650px; color: rgba(255,255,255,.82); line-height: 1.55; }
.ear-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.ear-summary-grid article { padding: 19px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-small); }
.ear-summary-grid span, .ear-summary-grid strong { display: block; }
.ear-summary-grid span { color: var(--muted); font-size: .76rem; font-weight: 750; }
.ear-summary-grid strong { margin-top: 8px; color: var(--primary); font-size: 2rem; line-height: 1; letter-spacing: -.05em; }
.share-option { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #cfe1f2; border-radius: 17px; color: var(--primary-dark); background: var(--primary-soft); font-weight: 800; }
.share-option input { width: 18px; height: 18px; accent-color: var(--primary); }
.ear-exercise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ear-card { padding: 23px; border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: var(--shadow-small); }
.ear-card-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 20px; background: var(--primary-soft); font-size: 1.8rem; }
.ear-card p { color: var(--muted); line-height: 1.5; }
.pitch-options { margin: 15px 0 0; }
.pitch-options label { display: grid; gap: 6px; }
.pitch-options label > span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.pitch-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.pitch-actions .button { flex: 1; min-width: 138px; }
.pitch-celebration { position: relative; display: grid; place-items: center; gap: 3px; min-height: 116px; margin: 16px 0 0; overflow: hidden; border-radius: 24px; color: #7a4b00; background: radial-gradient(circle at 50% 30%, #fff8c7, #ffe484 48%, #fff7df); box-shadow: 0 18px 42px rgba(245, 180, 48, .24); animation: celebration-pop .42s ease both; }
.pitch-celebration[hidden] { display: none; }
.pitch-celebration span { position: relative; z-index: 1; font-size: 3.8rem; line-height: 1; filter: drop-shadow(0 10px 12px rgba(245, 180, 48, .22)); animation: star-spin 1.15s ease both; }
.pitch-celebration strong { position: relative; z-index: 1; font-size: 1.05rem; font-weight: 950; }
.pitch-celebration::before, .pitch-celebration::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background:
  radial-gradient(circle, #1767b4 0 4px, transparent 5px) 0 8px/42px 42px,
  radial-gradient(circle, #24b47e 0 4px, transparent 5px) 20px 0/46px 46px,
  radial-gradient(circle, #f7b955 0 4px, transparent 5px) 10px 22px/38px 38px;
  opacity: .9; animation: firework-fade 1.35s ease both; }
.pitch-celebration::after { inset: 3px; transform: rotate(18deg); animation-delay: .12s; }
.ear-target { margin: 18px 0; padding: 16px; border-radius: 18px; color: var(--primary-dark); background: var(--primary-soft); font-size: 1.05rem; font-weight: 900; text-align: center; }
.pitch-live-meter { margin: 0 0 18px; padding: 16px; border: 1px solid #dcd8fb; border-radius: 20px; background: linear-gradient(135deg, #fff, #f6f3ff); }
.pitch-meter-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.pitch-meter-head strong { display: grid; place-items: center; min-width: 78px; min-height: 42px; padding: 8px 12px; border-radius: 15px; color: white; background: linear-gradient(145deg, var(--primary), var(--mint-dark)); font-size: 1.15rem; letter-spacing: -.02em; text-transform: none; }
.pitch-meter-head span:last-child { text-align: right; }
.pitch-scale { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 14px 0 10px; padding-top: 18px; border-top: 10px solid transparent; background: linear-gradient(90deg, #f2b1ba, var(--mint), #f2b1ba); background-clip: content-box; border-radius: 999px; }
.pitch-scale::before { content: ""; position: absolute; left: 50%; top: 3px; width: 3px; height: 24px; border-radius: 999px; background: var(--primary-dark); transform: translateX(-50%); }
.pitch-scale span { padding-top: 10px; color: var(--muted); font-size: .65rem; font-weight: 900; }
.pitch-scale span:nth-child(2) { text-align: center; color: var(--primary-dark); }
.pitch-scale span:nth-child(3) { text-align: right; }
.pitch-scale i { position: absolute; left: 50%; top: -2px; width: 18px; height: 34px; border: 3px solid white; border-radius: 999px; background: var(--primary); box-shadow: 0 8px 18px rgba(23,103,180,.25); transform: translateX(-50%); transition: left .12s linear, background .12s linear; }
.pitch-live-meter p { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 800; text-align: center; }
.rhythm-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0 0; }
.rhythm-options label { display: grid; gap: 6px; }
.rhythm-options label > span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.latency-calibration { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 11px; border: 1px dashed #cfe1f2; border-radius: 16px; background: #fbfdff; }
.latency-calibration span { color: var(--muted); font-size: .76rem; font-weight: 850; text-align: right; }
.rhythm-countdown { display: grid; place-items: center; width: 112px; height: 112px; margin: 16px auto; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--primary), var(--mint-dark)); box-shadow: 0 18px 45px rgba(23,103,180,.25); font-size: 3.2rem; font-weight: 950; animation: countdown-pop .28s ease both; }
@keyframes countdown-pop { from { opacity: .3; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.ear-result { min-height: 48px; margin: 15px 0 0; color: var(--ink) !important; font-weight: 800; }
.ear-result.is-success { color: #08724d !important; }
.ear-result.is-warning { color: #9b5c00 !important; }
@keyframes celebration-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes star-spin { 0% { transform: scale(.6) rotate(-18deg); } 58% { transform: scale(1.18) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes firework-fade { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: .95; } 100% { opacity: 0; transform: scale(1.28); } }
.tap-button { display: grid; place-items: center; width: min(230px, 80vw); aspect-ratio: 1; margin: 20px auto 0; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--primary), var(--mint-dark)); box-shadow: 0 18px 45px rgba(23,103,180,.24); font-size: 2.4rem; font-weight: 950; cursor: pointer; transition: transform .08s ease, opacity .2s ease; }
.tap-button:active { transform: scale(.96); }
.tap-button:disabled { opacity: .45; cursor: not-allowed; }
.ear-history { display: grid; gap: 10px; }
.ear-history-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: var(--shadow-small); }
.ear-score { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: white; background: var(--primary); font-size: 1.05rem; font-weight: 950; }
.ear-history-row strong, .ear-history-row span { display: block; }
.ear-history-row span { margin-top: 4px; color: var(--muted); font-size: .73rem; }
.ear-shared { padding: 6px 9px; border-radius: 999px; color: #08724d; background: #e9faf3; font-size: .68rem; font-weight: 900; }

@media (max-width: 760px) {
  .ear-header .brand-lockup { flex-direction: row; text-align: left; }
  .ear-summary-grid, .ear-exercise-grid, .rhythm-options { grid-template-columns: 1fr; }
  .latency-calibration { align-items: stretch; flex-direction: column; }
  .latency-calibration span { text-align: left; }
  .ear-history-row { grid-template-columns: 48px 1fr; }
  .ear-shared { grid-column: 1 / -1; justify-self: start; }
}