/* The light world's graphic study replaces the photographic character canvas. */
.type-composition{display:none}
#site.light-sim #reality-lab .reality-art>canvas,#site.light-sim #reality-lab .reality-fallback{display:none!important}
#site.light-sim #reality-lab .reality-art{cursor:auto}
#site.light-sim .type-composition{display:flex;align-items:center;justify-content:center;width:100%;height:100%;--compose-loose:1;--compose-grid:.18;--compose-label:.3}
#site.light-sim .type-composition svg{display:block;width:100%;height:100%;max-height:850px;overflow:visible}
#site.light-sim .composition-guides{opacity:var(--compose-grid)}
#site.light-sim .composition-type{transform:translate(calc(var(--compose-loose)*-65px),calc(var(--compose-loose)*38px)) rotate(calc(var(--compose-loose)*-12deg));transform-origin:260px 290px}
#site.light-sim .composition-circle{transform:translate(calc(var(--compose-loose)*64px),calc(var(--compose-loose)*-68px));transform-origin:center}
#site.light-sim .swatch-one{transform:translate(calc(var(--compose-loose)*-32px),calc(var(--compose-loose)*63px)) rotate(calc(var(--compose-loose)*-15deg));transform-origin:136px 447px}
#site.light-sim .swatch-two{transform:translate(calc(var(--compose-loose)*10px),calc(var(--compose-loose)*-40px)) rotate(calc(var(--compose-loose)*14deg));transform-origin:224px 447px}
#site.light-sim .swatch-three{transform:translate(calc(var(--compose-loose)*76px),calc(var(--compose-loose)*32px)) rotate(calc(var(--compose-loose)*-11deg));transform-origin:312px 447px}
#site.light-sim .composition-mark{transform:rotate(calc(var(--compose-loose)*110deg));transform-origin:427px 448px}
#site.light-sim .composition-captions{opacity:var(--compose-label)}
#site.light-sim .composition-caption{fill:#20232c;font:8px monospace;letter-spacing:1.7px}
#site.light-sim .composition-tiny{fill:#8f9397;font:6px monospace;letter-spacing:.6px}
#site.light-sim .type-composition[data-variant="1"] .composition-type text{font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:205px}
#site.light-sim .type-composition[data-variant="2"] .composition-type text{font-style:italic;fill:#20232c}
#site.light-sim .type-composition[data-variant="2"] .swatch-one rect{fill:#43404b}
@media(max-width:767px){#site.light-sim #reality-lab .reality-art{overflow:hidden}#site.light-sim .type-composition svg{max-width:440px;max-height:100%}}
@media(prefers-reduced-motion:reduce){#site.light-sim .type-composition{--compose-loose:0!important;--compose-grid:.73!important;--compose-label:1!important}}