.interval-ear{color:var(--studio-ink,var(--jgg-link));font-size:16px;line-height:1.75;min-width:0}
.interval-ear-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:25px}
.interval-ear-top .studio-text-link{font-size:15px;min-height:44px}
.interval-ear-heading{max-width:780px;margin-bottom:28px}
.interval-ear-heading h2{font-family:Fraunces,Georgia,serif;font-size:clamp(30px,3.4vw,47px);line-height:1.2;font-weight:400;letter-spacing:-.5px;margin:10px 0 17px}
.interval-ear-heading p{font-size:17px;line-height:1.8;color:var(--studio-muted,var(--jgg-text-muted));margin:0}
.interval-ear .studio-kicker{font-size:14px;line-height:1.6;letter-spacing:1.3px}
.interval-ear-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:25px;align-items:start}
.interval-reference-card,.interval-listen-card{min-width:0;background:var(--jgg-surface);border:1px solid var(--studio-line,var(--jgg-border));border-radius:12px;padding:27px}
.interval-reference-card{background:var(--jgg-selected)}
.interval-note-label,.interval-target-label{display:flex;align-items:center;justify-content:space-between;gap:14px}
.interval-note-label strong,.interval-target-label strong{font-family:Fraunces,Georgia,serif;font-size:39px;line-height:1.3;font-weight:400}
.interval-target-label{border-top:1px solid var(--jgg-border);padding-top:13px;margin-top:12px;color:var(--jgg-link)}
.interval-hidden-label{font-size:15px;color:var(--jgg-text-muted);line-height:1.8;margin:13px 0 0}
.interval-ear-notation{margin:12px 0;max-width:100%;min-height:124px}
.interval-ear .notation-example figcaption{font-size:14px;line-height:1.65;max-width:none}
.interval-ear-board-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--jgg-border);border-radius:8px;background:var(--jgg-surface-raised);padding:5px 8px 3px;scrollbar-width:thin}
.interval-ear-board-scroll:focus-visible{outline:3px solid var(--jgg-focus);outline-offset:4px}
.interval-ear-fret>span{background:var(--jgg-surface-raised)}
.interval-ear .interval-ear-fret:disabled{opacity:1}
.interval-ear-fret.root>span{background:var(--jgg-reference);color:var(--jgg-reference-text);box-shadow:inset 0 0 0 1px var(--jgg-reference-text)}
.interval-ear-fret.chosen:not(.root)>span{background:var(--jgg-accent);color:var(--jgg-on-accent)}
.interval-ear-fret.wrong>span{background:var(--jgg-error);color:var(--jgg-on-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--jgg-error) 13.3%,transparent)}
.interval-ear-fret.root.wrong>span{background:var(--jgg-reference);color:var(--jgg-reference-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--jgg-error) 53.3%,transparent)}
.interval-board-caption,.interval-guitar-note{font-size:14px;color:var(--jgg-text-muted);line-height:1.7;margin:12px 0 0}
.interval-guitar-note{border-top:1px solid var(--jgg-border);padding-top:12px}
.interval-listen-card h3{font-family:Fraunces,Georgia,serif;font-size:27px;line-height:1.35;font-weight:400;margin:0 0 20px}
.interval-audio-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.interval-ear .studio-btn{font-size:16px!important;line-height:1.5;min-height:49px;justify-content:center;text-align:center;padding:12px 16px;white-space:normal}
.interval-ear button[aria-pressed=true]:not(.interval-ear-fret){box-shadow:0 0 0 3px var(--jgg-border);outline:2px solid var(--jgg-focus);outline-offset:2px}
.interval-ear button:disabled{opacity:.55;cursor:default}
.interval-ear-answer-hint{border-top:1px solid var(--studio-line,var(--jgg-border));padding-top:24px}
.interval-ear-answer-hint h3{font-size:23px;margin:0 0 12px}
.interval-ear-answer-hint p,.interval-review-actions p{font-size:14px;line-height:1.8;color:var(--jgg-text-muted);margin:0 0 7px}
.interval-ear-status{min-height:58px;font-size:16px;line-height:1.8;color:var(--jgg-link);margin:20px 0 0;overflow-wrap:anywhere}
.interval-ear-note{font-size:14px;line-height:1.8;color:var(--jgg-text-muted);margin:18px 0 0;border-top:1px solid var(--studio-line,var(--jgg-border));padding-top:16px}
.interval-answer-review{border:1px solid var(--jgg-border);background:var(--jgg-selected);border-radius:9px;padding:20px;margin:0 0 24px}
.interval-answer-review.explore{background:var(--jgg-selected);border-color:var(--jgg-border)}
.interval-answer-review h3{font-size:25px;margin:0 0 12px}
.interval-answer-review p{font-size:16px;line-height:1.9;margin:10px 0 0}
.interval-review-actions{display:flex;flex-direction:column;gap:12px}
@media(max-width:850px){.interval-ear-layout{grid-template-columns:1fr}.interval-ear-heading{max-width:none}.interval-reference-card,.interval-listen-card{padding:23px}.interval-ear-notation{min-height:105px}.interval-ear .notation-score svg{max-height:160px}.interval-audio-actions{flex-direction:row;flex-wrap:wrap}.interval-audio-actions>.studio-btn{flex:1;min-width:200px}}
@media(max-width:500px){.interval-ear-top{gap:8px;margin-bottom:19px}.interval-ear-top .studio-text-link{font-size:14px}.interval-ear-heading h2{font-size:32px;line-height:1.25;margin:9px 0 14px}.interval-ear-heading p{font-size:16px}.interval-ear .studio-kicker{font-size:14px;letter-spacing:.8px}.interval-ear-layout{gap:17px}.interval-reference-card,.interval-listen-card{padding:21px 17px}.interval-note-label strong,.interval-target-label strong{font-size:35px}.interval-audio-actions{flex-direction:column}.interval-audio-actions>.studio-btn{min-width:0}.interval-listen-card h3{font-size:26px}.interval-board-caption,.interval-guitar-note,.interval-ear-note{font-size:14px}}
@media(prefers-reduced-motion:reduce){.interval-ear *{animation:none!important;transition:none!important}}