.composites-atlas { --composites-accent: #b7dfbb; position: relative; isolation: isolate; padding-top: 18px; min-width: 0; }
.composites-atlas [hidden] { display: none !important; }
.composites-masthead { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #304c50; color: #a5c2c9; font: 10px/1.8 Consolas, monospace; letter-spacing: .05em; }
.composites-masthead::before { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 2px; background: var(--composites-accent); }
.composites-masthead > span:last-child { font-size: 9px; text-align: right; }
.composites-art { margin: 8px 0 23px; }
.composites-art svg { display: block; width: 100%; height: auto; }
.composites-art figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; color: #a6bfcc; font-size: 11px; line-height: 1.8; }
.composites-art figcaption i { width: 13px; height: 3px; background: #7f9fae; }
.composites-art figcaption i:nth-of-type(2) { background: #bcdfba; margin-left: 8px; }
.composites-matrix, .composites-short, .composites-continuous, .composites-interfaces { transition: opacity .22s ease; }
.composites-short, .composites-interfaces { opacity: 0; }
.composites-atlas[data-view="short"] .composites-short, .composites-atlas[data-view="interfaces"] .composites-interfaces { opacity: 1; }
.composites-atlas[data-view="short"] .composites-continuous { opacity: 0; }
.composites-atlas[data-isolated="true"] .composites-matrix { opacity: .15; }
.composites-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding-block: 5px; border-block: 1px solid #304c50; }
.composites-tabs button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-width: 0; min-height: 48px; padding: 10px 4px; background: transparent; color: #abc2d0; border: 0; border-radius: 3px; font-size: 13px; }
.composites-tabs button span { font: 10px Consolas, monospace; }
.composites-tabs [aria-selected="true"] { color: var(--composites-accent); background: #1c302c; box-shadow: inset 0 -2px 0 var(--composites-accent); }
.composites-panel { padding-top: 24px; min-height: 215px; }
.composites-panel .composites-kicker { color: var(--composites-accent); font: 10px/1.8 Consolas, monospace; letter-spacing: .06em; }
.composites-panel h2 { margin: 12px 0 14px; color: #e1edf3; font-size: clamp(25px,2.6vw,30px); line-height: 1.18; letter-spacing: -.035em; font-weight: 450; }
.composites-panel > p:not(.composites-kicker) { color: #acc2d1; font-size: 14px; line-height: 1.85; }
.composites-action { min-height: 44px; max-width: 100%; margin-top: 18px; padding: 11px 15px; background: #20352d; border: 1px solid #628b79; border-radius: 4px; color: #c1e9c5; font-size: 13px; }
.composites-action[aria-pressed="true"] { box-shadow: inset 3px 0 0 #c1e9c5; }
.composites-atlas button { cursor: pointer; }
.composites-atlas button:hover { color: #f1fff5; }
.composites-atlas :focus-visible { outline: 2px solid #c1e9c5; outline-offset: 3px; }
.composites-disclaimer { margin-top: 22px; padding-top: 17px; border-top: 1px solid #304c50; color: #9ab2c0; font-size: 11px; line-height: 1.8; }
.composites-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 801px) { body:has(.composites-atlas) .detail-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.06fr); gap: clamp(30px,4vw,62px); } body:has(.composites-atlas) .detail-title { font-size: clamp(39px,4.35vw,63px); } }
@media (max-width: 640px) { .composites-masthead { font-size: 9px; } .composites-masthead > span:last-child { max-width: 95px; font-size: 8px; } .composites-tabs button { flex-direction: column; gap: 5px; font-size: 11px; min-height: 56px; } .composites-panel { min-height: 250px; } .composites-graphic-labels { display: none; } .composites-action { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .composites-atlas *, .composites-atlas *::before, .composites-atlas *::after { transition: none !important; animation: none !important; } }