/* Shared lesson presentation, scoped away from the hub and practice players. */
.det-lesson-page {
    --lesson-paper: #fbfaf6;
    --lesson-card: #ffffff;
    --lesson-ink: #20382f;
    --lesson-muted: #53655c;
    --lesson-line: #dbe1d7;
    --lesson-soft: #eef2e9;
    --lesson-accent: #285640;
    --lesson-gold: #d4ab58;
    --det-guide-paper: var(--lesson-paper);
    --det-guide-ink: var(--lesson-ink);
    --det-guide-muted: var(--lesson-muted);
    --det-guide-green: var(--lesson-accent);
    --det-guide-border: var(--lesson-line);
    --det-guide-card: var(--lesson-card);
    color: var(--lesson-ink);
    background: var(--lesson-paper);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.dark-mode .det-lesson-page {
    --lesson-paper: #131d18;
    --lesson-card: #1b2921;
    --lesson-ink: #edf1e8;
    --lesson-muted: #b7c5b9;
    --lesson-line: #374a3d;
    --lesson-soft: #223329;
    --lesson-accent: #b7d8ba;
    --lesson-gold: #d8b86e;
    --det-guide-green-dark: #b7d8ba;
    --det-guide-cream: #19261e;
    --det-guide-faint: #a7b8ac;
}
.det-lesson-page *, .det-lesson-page *::before, .det-lesson-page *::after { box-sizing: border-box; }
.det-lesson-page * { font-family: inherit; }
body .det-lesson-page:is(.det-writing-page, .det-photo-page) { background: var(--lesson-paper); color: var(--lesson-ink); }
body .det-lesson-page :is(.det-writing-section, .det-photo-section) { background: transparent; }
.det-lesson-page :is(a, button, summary, textarea):focus-visible {
    outline: 3px solid var(--lesson-accent);
    outline-offset: 5px;
}
.det-lesson-page :is(section, h2, details) { scroll-margin-top: 108px; }
.det-lesson-page .det-lesson-shell,
.det-lesson-page .det-guide-shell { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.det-lesson-page .det-lesson-hero {
    padding: 36px 0 64px;
    border-bottom: 1px solid var(--lesson-line);
    background: var(--lesson-paper);
}
.det-lesson-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--lesson-muted); margin-bottom: 48px; }
.det-lesson-breadcrumbs a { color: var(--lesson-accent); text-decoration: none; }
.det-lesson-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.det-lesson-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); align-items: center; gap: 72px; }
.det-lesson-intro { min-width: 0; }
.det-lesson-eyebrow,
.det-lesson-page :is(.det-guide-kicker, .det-writing-section-label, .det-photo-section-label) {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--lesson-accent);
    margin-bottom: 12px;
}
.det-lesson-page .det-lesson-hero h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(52px, 5.5vw, 80px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--lesson-ink);
    margin: 14px 0 22px;
    max-width: 660px;
    text-wrap: balance;
}
.det-lesson-lede { max-width: 560px; margin: 0; color: var(--lesson-muted); font-size: 18px; line-height: 1.75; }
.det-lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.det-lesson-page .det-lesson-button,
.det-lesson-page .det-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    border: 1px solid var(--lesson-line);
    border-radius: 7px;
    background: transparent;
    color: var(--lesson-accent);
    padding: 12px 20px;
    font: 600 14px/1.5 'Inter', sans-serif;
    text-transform: none;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.det-lesson-page :is(.det-lesson-button-primary, .det-guide-btn-primary) { background: #285640; border-color: #285640; color: #fff; }
.det-lesson-page :is(.det-lesson-button, .det-guide-btn):hover { background: var(--lesson-soft); border-color: var(--lesson-accent); color: var(--lesson-accent); transform: none; }
.det-lesson-page :is(.det-lesson-button-primary, .det-guide-btn-primary):hover { background: #1d4231; color: #fff; }
.det-lesson-intro-note { font-size: 12px; line-height: 1.6; color: var(--lesson-muted); margin: 18px 0 0; }
.det-lesson-brief {
    position: relative;
    padding: 30px 32px 24px;
    border: 1px solid var(--lesson-line);
    border-top: 3px solid var(--lesson-gold);
    border-radius: 4px 4px 16px 16px;
    background: var(--lesson-card);
    box-shadow: 0 12px 32px rgba(29, 53, 39, .04);
}
.det-lesson-brief-label { display: block; color: var(--lesson-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.det-lesson-goal { font-family: 'Instrument Serif', Georgia, serif; font-size: 29px; line-height: 1.25; margin: 12px 0 24px; color: var(--lesson-ink); }
.det-lesson-brief dl { margin: 0; }
.det-lesson-brief dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--lesson-line); }
.det-lesson-brief dt { font-size: 13px; line-height: 1.6; color: var(--lesson-muted); }
.det-lesson-brief dd { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--lesson-ink); margin: 0; }
.det-lesson-brief-note { font-size: 12px; line-height: 1.5; color: var(--lesson-muted); margin: 6px 0 0; }

/* The same reading column and contents navigation on all thirteen tasks. */
.det-lesson-page :is(.det-lesson-body, .det-guide-layout) { display: grid; grid-template-columns: minmax(0, 790px) 230px; justify-content: space-between; gap: 72px; padding-block: 64px 80px; }
.det-lesson-article { min-width: 0; }
.det-lesson-page :is(.det-lesson-nav, .det-guide-toc) { align-self: start; position: sticky; top: 108px; padding: 4px 0 4px 24px; border: 0; border-left: 1px solid var(--lesson-line); border-radius: 0; display: grid; gap: 3px; background: transparent; counter-reset: det-lesson-nav; }
.det-lesson-page :is(.det-lesson-nav, .det-guide-toc) > strong { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--lesson-ink); margin-bottom: 16px; }
.det-lesson-page :is(.det-lesson-nav, .det-guide-toc) > a { counter-increment: det-lesson-nav; display: flex; gap: 12px; padding: 9px 0; font-size: 13px; line-height: 1.5; text-decoration: none; color: var(--lesson-muted); }
.det-lesson-nav > a > span, .det-lesson-page .det-guide-toc > a::before { color: var(--lesson-accent); font-size: 11px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.det-lesson-page .det-guide-toc > a::before { content: counter(det-lesson-nav, decimal-leading-zero); }
.det-lesson-page :is(.det-lesson-nav, .det-guide-toc) > a:hover { color: var(--lesson-accent); text-decoration: underline; text-underline-offset: 4px; }
.det-lesson-nav-footer { color: var(--lesson-muted); font-size: 12px; line-height: 1.7; padding-top: 20px; margin-top: 16px; border-top: 1px solid var(--lesson-line); }
.det-lesson-page :is(.det-guide-section, .det-writing-section, .det-photo-section, .det-lesson-practice) { padding: 0 0 48px; margin: 0; border: 0; background: transparent; }
.det-lesson-page :is(.det-guide-section, .det-writing-section, .det-photo-section, .det-lesson-practice) + :is(.det-guide-section, .det-writing-section, .det-photo-section, .det-lesson-practice) { border-top: 1px solid var(--lesson-line); padding-top: 44px; }
.det-lesson-article :is(.det-writing-shell, .det-photo-shell) { width: 100%; max-width: none; padding: 0; margin: 0; }
.det-lesson-page :is(.det-writing-section-head, .det-photo-section-head) { text-align: left; max-width: none; margin: 0 0 24px; }
.det-lesson-page :is(.det-guide-section h2, .det-writing-section-title, .det-photo-section-title, .det-lesson-practice h2) { font: 400 clamp(32px, 3vw, 42px)/1.14 'Instrument Serif', Georgia, serif; letter-spacing: -.02em; color: var(--lesson-ink); margin: 8px 0 18px; text-wrap: balance; }
.det-lesson-page :is(.det-guide-section p, .det-guide-section li, .det-writing-section-copy, .det-photo-section-copy, .det-lesson-practice > p) { color: var(--lesson-muted); font-size: 17px; line-height: 1.8; max-width: none; }
.det-lesson-page :is(.det-guide-section h3, .det-writing-section h3, .det-photo-section h3) { font-family: 'Inter', sans-serif; color: var(--lesson-ink); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.det-lesson-page .det-lesson-tip { background: var(--lesson-soft); border-radius: 8px; padding: 18px 22px; font-size: 15px; margin: 24px 0; }
.det-lesson-tip strong { display: block; color: var(--lesson-accent); font-size: 13px; margin-bottom: 4px; }
.det-lesson-page .det-guide-source-note { border-left: 2px solid var(--lesson-gold); color: var(--lesson-muted); }
.det-lesson-page .det-guide-section .det-guide-steps { list-style: none; padding: 0; margin-top: 26px; counter-reset: det-lesson-step; }
.det-lesson-page .det-guide-steps li { position: relative; padding: 0 0 24px 62px; margin: 0; counter-increment: det-lesson-step; min-height: 56px; }
.det-lesson-page .det-guide-steps li::before { content: counter(det-lesson-step, decimal-leading-zero); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; background: var(--lesson-soft); border: 1px solid var(--lesson-line); border-radius: 50%; color: var(--lesson-accent); font-size: 13px; font-weight: 600; }
.det-lesson-page .det-guide-steps li > strong { color: var(--lesson-ink); font-weight: 600; line-height: 1.7; display: block; }
.det-lesson-page .det-guide-steps li p { font-size: 16px; margin: 6px 0 0; }
.det-lesson-page .det-guide-steps li:last-child { padding-bottom: 0; }
.det-lesson-page .det-guide-example { background: var(--lesson-card); border: 1px solid var(--lesson-line); border-radius: 12px; padding: 0; overflow: hidden; }
.det-lesson-example-prompt { padding: 28px 32px; }
.det-lesson-example-prompt > span { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--lesson-muted); }
.det-lesson-page .det-lesson-example-prompt p { color: var(--lesson-ink); font-size: 20px; line-height: 1.75; margin: 14px 0 0; }
.det-lesson-answer { border-top: 1px solid var(--lesson-line); background: var(--lesson-soft); }
.det-lesson-answer summary { cursor: pointer; color: var(--lesson-accent); font-size: 14px; font-weight: 600; padding: 20px 32px; }
.det-lesson-answer > div { padding: 0 32px 28px; }
.det-lesson-page .det-lesson-answer h3 { font-size: 13px; margin-top: 14px; }
.det-lesson-page .det-lesson-answer p { font-size: 16px; }
.det-lesson-page .det-lesson-mistakes { padding: 0; list-style: none; display: grid; gap: 12px; }
.det-lesson-page .det-lesson-mistakes li { margin: 0; padding: 17px 22px; border-left: 2px solid var(--lesson-gold); background: var(--lesson-card); border-radius: 0 8px 8px 0; font-size: 16px; }

/* Existing preview pages use the same lesson hierarchy without changing player state. */
.det-lesson-page :is(.det-writing-construct-grid, .det-photo-construct-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.det-lesson-page :is(.det-writing-guide-grid, .det-photo-example-grid, .det-writing-source-grid, .det-photo-source-grid) { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
.det-lesson-page :is(.det-writing-construct-card, .det-photo-construct-card, .det-writing-guide-card, .det-photo-example-card, .det-writing-source-card, .det-photo-source-card) { background: var(--lesson-card); border: 1px solid var(--lesson-line); border-radius: 10px; padding: 24px; min-height: 0; box-shadow: none; }
.det-lesson-page :is(.det-writing-construct-card, .det-photo-construct-card) > span { background: var(--lesson-soft); color: var(--lesson-accent); border: 1px solid var(--lesson-line); font-family: 'Inter', sans-serif; }
.det-lesson-page :is(.det-writing-guide-card, .det-photo-example-card) h3 { margin: 0 0 9px; }
.det-lesson-page :is(.det-writing-construct-card p, .det-photo-construct-card p, .det-writing-guide-card p, .det-photo-example-card p, .det-writing-source-card p, .det-photo-source-card p) { color: var(--lesson-muted); font-size: 16px; line-height: 1.8; }
.det-lesson-page :is(.det-writing-note, .det-photo-score-note, .det-lesson-practice-note) { color: var(--lesson-muted); font-size: 14px !important; line-height: 1.7; text-align: left; margin-top: 20px; }
.det-lesson-page :is(.det-writing-note, .det-photo-score-note) { border-left: 2px solid var(--lesson-gold); padding-left: 16px; }
.det-lesson-photo { margin: 24px 0; }
.det-lesson-photo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.det-lesson-page .det-photo-example-tag { background: var(--lesson-soft); color: var(--lesson-accent); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; border-color: var(--lesson-line); }
.det-lesson-page .det-photo-example-card blockquote { color: var(--lesson-ink); font-size: 19px; line-height: 1.7; }
.det-lesson-page :is(.det-writing-source-card, .det-photo-source-card) strong { color: var(--lesson-ink); font-size: 16px; }
.det-lesson-page :is(.det-writing-source-card, .det-photo-source-card, .det-writing-note) a { color: var(--lesson-accent); text-decoration: underline; text-underline-offset: 3px; }
.det-lesson-page .det-photo-official-grid { display: block; }
.det-lesson-page :is(.det-writing-faq-list, .det-photo-faq-list) { max-width: none; }
.det-lesson-page :is(.det-writing-faq, .det-photo-faq) { border: 0; border-bottom: 1px solid var(--lesson-line); border-radius: 0; background: transparent; padding: 20px 0; }
.det-lesson-page :is(.det-writing-faq, .det-photo-faq) summary { color: var(--lesson-ink); font-size: 16px; font-weight: 600; line-height: 1.6; }
.det-lesson-page :is(.det-writing-faq, .det-photo-faq) p { color: var(--lesson-muted); font-size: 16px; line-height: 1.8; }
.det-lesson-practice > :is(.det-writing-practice-card, .det-photo-practice-card) { margin-top: 28px; box-shadow: 0 10px 28px rgba(29, 53, 39, .05); width: 100%; min-width: 0; }
.det-lesson-page .det-guide-related { background: var(--lesson-soft); padding-block: 48px; }
.det-lesson-page .det-guide-related-card { background: var(--lesson-card); border-color: var(--lesson-line); }
.det-lesson-page .det-guide-related h2, .det-lesson-next h2 { font: 400 38px/1.2 'Instrument Serif', Georgia, serif; color: var(--lesson-ink); }
.det-lesson-next { border-top: 1px solid var(--lesson-line); padding: 48px 0 56px; background: var(--lesson-soft); }
.det-lesson-next .det-lesson-shell { text-align: center; }
.det-lesson-next span:not([aria-hidden]) { color: var(--lesson-accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.det-lesson-next h2 { margin: 14px 0; }
.det-lesson-next p { color: var(--lesson-muted); font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.det-lesson-next .det-lesson-button { margin: 4px; }

@media (max-width: 1050px) {
    .det-lesson-hero-grid { gap: 36px; }
    .det-lesson-page :is(.det-lesson-body, .det-guide-layout) { gap: 36px; grid-template-columns: minmax(0, 1fr) 200px; }
    .det-lesson-brief { padding: 26px; }
}
@media (max-width: 800px) {
    .det-lesson-page .det-lesson-shell, .det-lesson-page .det-guide-shell { width: calc(100% - 40px); }
    .det-lesson-page .det-lesson-hero { padding: 24px 0 36px; }
    .det-lesson-breadcrumbs { margin-bottom: 30px; font-size: 12px; }
    .det-lesson-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .det-lesson-page .det-lesson-hero h1 { font-size: clamp(48px, 9vw, 68px); max-width: 570px; }
    .det-lesson-lede { font-size: 17px; }
    .det-lesson-brief { padding: 24px; }
    .det-lesson-goal { font-size: 27px; margin-bottom: 20px; }
    .det-lesson-page :is(.det-lesson-body, .det-guide-layout) { grid-template-columns: 1fr; gap: 36px; padding-block: 32px 48px; }
    .det-lesson-page :is(.det-lesson-nav, .det-guide-toc) { grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; position: static; padding: 20px; border: 1px solid var(--lesson-line); border-radius: 10px; background: var(--lesson-card); }
    .det-lesson-page :is(.det-lesson-nav, .det-guide-toc) > strong { grid-column: 1 / -1; margin-bottom: 10px; }
    .det-lesson-nav-footer { grid-column: 1 / -1; padding-top: 14px; margin-top: 12px; }
    .det-lesson-nav-footer br { display: none; }
    .det-lesson-page .det-guide-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .det-lesson-page .det-lesson-shell, .det-lesson-page .det-guide-shell { width: calc(100% - 36px); }
    .det-lesson-actions { flex-direction: column; gap: 10px; }
    .det-lesson-actions .det-lesson-button { width: 100%; }
    .det-lesson-intro-note { font-size: 11px; text-align: center; }
    .det-lesson-page :is(.det-writing-construct-grid, .det-photo-construct-grid, .det-guide-related-grid) { grid-template-columns: 1fr; }
    .det-lesson-page :is(.det-guide-section, .det-writing-section, .det-photo-section, .det-lesson-practice) { padding-bottom: 36px; }
    .det-lesson-page .det-guide-steps li { padding-left: 51px; }
    .det-lesson-page .det-guide-steps li::before { width: 34px; height: 34px; font-size: 12px; }
    .det-lesson-example-prompt { padding: 24px; }
    .det-lesson-answer summary { padding: 20px 24px; font-size: 13px; }
    .det-lesson-answer > div { padding: 0 24px 24px; }
    .det-lesson-page :is(.det-lesson-nav, .det-guide-toc) > a { gap: 8px; font-size: 12px; }
    .det-lesson-page :is(.det-writing-guide-card, .det-photo-example-card, .det-writing-source-card, .det-photo-source-card) { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .det-lesson-page :is(.det-lesson-button, .det-guide-btn) { transition: none; }
}