.demo-label { font-weight: 650; }
.landing-copy > p { max-width: 34ch; }
.demo-section {
    display: grid;
    gap: 16px;
    scroll-margin-top: 20px;
}
.demo-outline .outline-link {
    grid-template-columns: 29px minmax(0, 1fr) auto 20px;
}
.demo-outline .demo-arrow {
    justify-self: end;
    color: var(--rust);
    font-size: 1.2rem;
}
.lesson-reading { display: grid; gap: 16px; }
.lesson-reading > p { max-width: 65ch; }
.lesson-equation {
    color: var(--rust-dark);
    font: 400 clamp(1.5rem, 4vw, 2.35rem)/1.2 var(--serif);
}
.triangle-explorer {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(16px, 4vw, 48px);
}
.demo-diagram { display: grid; place-items: center; }
.demo-diagram svg { display: block; width: 100%; max-width: 520px; }
.triangle-explorer[data-side="leg-a"] path.triangle-leg-a,
.triangle-explorer[data-side="leg-b"] path.triangle-leg-b,
.triangle-explorer[data-side="hypotenuse"] path.triangle-hypotenuse {
    stroke: var(--yellow);
    stroke-width: 6;
}
.triangle-explorer[data-side="leg-a"] text.triangle-leg-a,
.triangle-explorer[data-side="leg-b"] text.triangle-leg-b,
.triangle-explorer[data-side="hypotenuse"] text.triangle-hypotenuse { fill: var(--yellow); }
.triangle-notes {
    display: grid;
    align-content: center;
    gap: 20px;
    padding: clamp(16px, 3vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.triangle-switcher { gap: 8px; }
.triangle-switcher .btn-secondary[aria-pressed="true"] {
    border-color: var(--ink);
    background: var(--yellow);
}
.triangle-explanation > div, .quiz-explanation { display: grid; gap: 10px; }
.triangle-explanation h3 { font: 400 1.75rem/1.15 var(--serif); }
.demo-question .quiz-question-title { padding: 0; }
.demo-question summary::before { content: "+"; }
.demo-question details[open] summary::before { content: "−"; }
.quiz-explanation { padding-top: 12px; }

@media (max-width: 760px) {
    .triangle-explorer { grid-template-columns: 1fr; }
    .demo-outline .outline-link { grid-template-columns: 24px minmax(0, 1fr) 20px; }
    .demo-outline .outline-link > :is(.badge-owned, .badge-interactive, .badge-grade) { grid-column: 2; }
    .demo-outline .demo-arrow { grid-column: 3; grid-row: 1; }
}
@media (max-width: 430px) {
    .public-header { gap: 8px; }
    .public-header nav { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .demo-label { font-size: .86rem; }
}