.modular-section-nav{display:flex;flex-wrap:wrap;gap:12px 30px;padding:22px 0;border-block:1px solid var(--border);margin:42px 0 0}
.modular-section-nav a{font-size:.95rem;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:6px;transition:color .2s}
.modular-section-nav a:hover{color:var(--accent);text-decoration-color:currentColor}
.modular-composition{margin:64px 0 80px;scroll-margin-top:120px}
.composition-heading{position:static;display:flex;align-items:end;justify-content:space-between;gap:36px;border:0;background:none;padding:0;margin:0 0 32px}
.composition-heading h2{margin:12px 0 0}
.composition-heading>p{max-width:380px;margin:0;color:var(--muted);font-size:1rem;line-height:1.65}
.composition-explorer{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:start}
.composition-overview{min-width:0;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.composition-image-label{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border);font: .75rem/1.5 'Courier New',monospace;letter-spacing:.04em;color:var(--muted)}
.composition-image-label>span:last-child{color:var(--accent);white-space:nowrap}
.composition-stage{display:flex;justify-content:center;background:#0b0f14;overflow:hidden}
.composition-photo{position:relative;width:100%;max-width:650px;isolation:isolate}
[data-modular-composition=mini] .composition-photo{max-width:480px}
.composition-photo>img{display:block;width:100%;height:auto;max-height:none;margin:0;object-fit:contain}
.composition-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffffa0;border-radius:50%;background:#10161ef0;color:#fff;font:700 .875rem/1 'Courier New',monospace;box-shadow:0 2px 14px #0007;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;z-index:1}
.composition-marker:hover,.composition-marker[aria-pressed=true]{color:#101418;background:#ff6b16;border-color:#ff6b16;box-shadow:0 0 0 5px #ff6b162e,0 3px 18px #0006;z-index:2}
.composition-marker:focus-visible{outline:3px solid white;outline-offset:5px}
.composition-caption{padding:16px 20px;margin:0;color:var(--muted);font-size:.875rem;line-height:1.6;border-top:1px solid var(--border)}
.composition-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}
.composition-choice{display:flex;align-items:center;gap:12px;min-width:0;min-height:76px;padding:17px 18px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text);font:inherit;font-size:.925rem;line-height:1.4;cursor:pointer;transition:background .2s}
.composition-choice:nth-child(odd){border-right:1px solid var(--border)}
.composition-choice:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.composition-choice:last-child,.composition-choice:nth-last-child(2):nth-child(odd){border-bottom:0}
.composition-choice[aria-pressed=true],.composition-choice:hover{background:var(--surface)}
.composition-number{align-self:flex-start;font:.875rem/1.5 'Courier New',monospace;color:var(--muted)}
.composition-choice[aria-pressed=true] .composition-number,.composition-choice[aria-pressed=true] .composition-arrow{color:var(--accent)}
.composition-arrow{margin-left:auto;color:var(--muted);font-size:1.2rem}
.composition-choice:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.composition-inspector{position:sticky;top:120px;padding:32px;border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:0 0 6px 6px;background:var(--surface);min-width:0}
.composition-panel{scroll-margin-top:125px}
.composition-panel[hidden]{display:none!important}
.composition-panel+.composition-panel:not([hidden]){margin-top:32px}
[data-composition-ready] .composition-panel+.composition-panel{margin-top:0}
.composition-panel .eyebrow{color:var(--accent);font-size:.75rem;line-height:1.6;letter-spacing:.06em}
.composition-panel h3{font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:500;line-height:1.15;letter-spacing:-.025em;margin:20px 0}
.composition-panel>p{font-size:1rem;line-height:1.75;color:var(--muted);margin:0}
.composition-parts{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.composition-parts h4{font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;color:var(--muted)}
.composition-parts ul{list-style:none;padding:0;margin:0}
.composition-parts li{position:relative;padding:0 0 0 18px;margin:12px 0;font-size:.95rem;line-height:1.6}
.composition-parts li:before{content:'';position:absolute;left:0;top:.65em;width:5px;height:5px;background:var(--accent)}
.composition-fact{padding-left:18px;border-left:2px solid var(--accent);margin-top:30px}
.composition-fact strong{display:block;font-size:1.1rem;font-weight:500;line-height:1.4}
.composition-fact p{font-size:.9rem;line-height:1.65;color:var(--muted);margin:8px 0 0}
@media(max-width:900px){.composition-heading{align-items:start;flex-direction:column;gap:20px}.composition-heading>p{max-width:600px}.composition-explorer{grid-template-columns:1fr;gap:24px}.composition-inspector{position:static}.composition-photo{max-width:680px}.composition-panel h3{font-size:1.8rem}}
@media(max-width:600px){.modular-section-nav{gap:16px 22px;margin-top:30px}.modular-section-nav a{font-size:.875rem}.modular-composition{margin:40px 0 56px}.composition-image-label{padding:12px 14px;font-size:.65rem}.composition-caption{padding:14px}.composition-choice{padding:15px 12px;gap:9px;font-size:.875rem;min-height:76px}.composition-inspector{padding:24px 20px}.composition-choices{grid-template-columns:1fr}.composition-choice:nth-child(odd){border-right:0}.composition-choice:nth-last-child(2){border-bottom:1px solid var(--border)}.composition-arrow{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.modular-section-nav a,.composition-marker,.composition-choice{transition:none}}
