@layer theme,base,theory-ui,chord-practice-ui,guitar-ui;@layer page{:root[data-page=intervals] .intro-card{border-radius:var(--radius-lg);margin-bottom:24px;padding:22px 24px;line-height:1.7}:root[data-page=intervals] .intro-card p{margin:0 0 10px}:root[data-page=intervals] .intro-card p:last-child{margin-bottom:0}:root[data-page=intervals] .intro-note{color:var(--muted)}:root[data-page=intervals] .lesson-layout{grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);margin-bottom:24px}:root[data-page=intervals] .explorer-card,:root[data-page=intervals] .legend-card,:root[data-page=intervals] .table-section,:root[data-page=intervals] .cta-section{border-radius:var(--radius-lg);padding:24px}:root[data-page=intervals] .root-picker{margin-top:18px}:root[data-page=intervals] .root-picker-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;font-size:.75rem;display:block}:root[data-page=intervals] .root-picker-buttons{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;display:grid}:root[data-page=intervals] .root-btn{background:var(--surface-soft);color:var(--text);cursor:pointer;border:1px solid #ffffff1a;border-radius:10px;padding:9px 0;font-size:.85rem;font-weight:700;transition:background .14s,border-color .14s,transform .12s}:root[data-page=intervals] .root-btn:hover,:root[data-page=intervals] .root-btn:focus-visible{background:#ffffff14;outline:none;transform:translateY(-1px)}:root[data-page=intervals] .root-btn.is-active{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);color:#0b1220;border-color:#0000}:root[data-page=intervals] .step-buttons{grid-template-columns:repeat(13,minmax(0,1fr));gap:6px;margin-top:12px;display:grid}:root[data-page=intervals] .step-btn{background:var(--surface-soft);color:var(--text);cursor:pointer;border:1px solid #ffffff1a;border-radius:10px;padding:10px 0;font-weight:700;transition:background .14s,border-color .14s,transform .12s}:root[data-page=intervals] .step-btn:hover,:root[data-page=intervals] .step-btn:focus-visible{background:#ffffff14;outline:none;transform:translateY(-1px)}:root[data-page=intervals] .step-btn.is-active{background:linear-gradient(180deg, var(--danger-strong) 0%, var(--danger) 100%);border-color:#0000}:root[data-page=intervals] .interval-info{border-radius:var(--radius-md);background:#ffffff0a;border:1px solid #ffffff14;margin-top:20px;padding:18px 20px}:root[data-page=intervals] .interval-info-head{align-items:center;gap:12px;display:flex}:root[data-page=intervals] .interval-info-head h3{margin:0;font-size:1.3rem}:root[data-page=intervals] .interval-notes{color:var(--muted);margin:10px 0 0;font-weight:600}:root[data-page=intervals] .interval-mnemonic{margin:6px 0 0}:root[data-page=intervals] .interval-tip{color:var(--muted);margin:6px 0 0;font-size:.9rem}:root[data-page=intervals] .legend-heading{margin:4px 0 16px}:root[data-page=intervals] .legend-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}:root[data-page=intervals] .legend-list li{color:var(--muted);align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.5;display:flex}:root[data-page=intervals] .legend-list .interval-chip{flex-shrink:0}:root[data-page=intervals] .legend-tip-kicker{margin-top:24px}:root[data-page=intervals] .legend-tip{color:var(--muted);margin:4px 0 0;line-height:1.6}:root[data-page=intervals] .cta-section{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}:root[data-page=intervals] .cta-section h2{margin:4px 0 0}:root[data-page=intervals] .cta-copy{color:var(--muted);max-width:46ch;margin:8px 0 0}:root[data-page=intervals] .cta-button{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);color:#0b1220;border-radius:var(--radius-sm);flex-shrink:0;padding:16px 26px;font-weight:800;text-decoration:none;transition:transform .14s,box-shadow .14s;box-shadow:0 14px 30px #4ecca33d}:root[data-page=intervals] .cta-button:hover,:root[data-page=intervals] .cta-button:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 18px 36px #4ecca352}@media (width<=980px){:root[data-page=intervals] .lesson-layout{grid-template-columns:1fr}}@media (width<=760px){:root[data-page=intervals] .root-picker-buttons{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}:root[data-page=intervals] .step-buttons{grid-template-columns:repeat(7,minmax(0,1fr))}:root[data-page=intervals] .cta-section{text-align:center;flex-direction:column;align-items:stretch}}}