/* T5-P4-A: a case-study guide to the existing, unmodified Visual DNA screenshot. */
.r1-case .p4-dna-explorer{--p4-spot-offset:0%;--p4-dna-ease:cubic-bezier(.16,1,.3,1);--p4-dna-line:#79717f;--p4-dna-accent:#e6d9ed}
.r1-case .p4-dna-explorer[data-focus="composition"]{--p4-spot-offset:101.785714%}
.r1-case .p4-dna-explorer[data-focus="light"]{--p4-spot-offset:203.571429%}
.r1-case .p4-dna-explorer[data-focus="color"]{--p4-spot-offset:305.357143%}
.r1-case .p4-dna-copy{width:100%;max-width:450px;min-width:0}
.r1-case .p4-dna-instruction{max-width:37ch;margin:0 0 24px;color:#ddd8df;font-size:16px;line-height:1.75}
.r1-case .p4-dna-tabs{display:grid;border-top:1px solid #55505a}
.r1-case .p4-dna-tabs button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:60px;padding:11px 16px 11px 19px;border:0;border-bottom:1px solid #55505a;background:transparent;color:#cbc5cf;text-align:left;font:500 18px/1.4 Inter,'Noto Sans SC',sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.r1-case .p4-dna-tabs button::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--p4-dna-accent);opacity:0;transform:scaleY(.35);transition:opacity .2s ease,transform .22s var(--p4-dna-ease)}
.r1-case .p4-dna-tabs button small{font:400 12px/1.4 Inter,'Noto Sans SC',sans-serif;color:#bcb1c4;white-space:nowrap;transition:color .2s ease}
.r1-case .p4-dna-tabs button:hover:not([aria-selected="true"]){background:#ffffff0c;color:#f5f0f5}
.r1-case .p4-dna-tabs button[aria-selected="true"]{background:#eee4f019;border-bottom-color:#8d8096;color:#fff}
.r1-case .p4-dna-tabs button[aria-selected="true"]::before{opacity:1;transform:scaleY(1)}
.r1-case .p4-dna-tabs button[aria-selected="true"] small{color:var(--p4-dna-accent)}
.r1-case .p4-dna-tabs button:active{background:#eee4f02a}
.r1-case .p4-dna-tabs button:focus-visible{outline:2px solid #f2eee9;outline-offset:-4px;position:relative;z-index:1}
.r1-case .p4-dna-panels{min-height:210px;padding:27px 0 0}
.r1-case .p4-dna-panel[hidden]{display:none}
.r1-case .p4-dna-panel[data-exiting="true"]{opacity:0;transform:translate3d(0,-3px,0);transition:opacity .07s ease,transform .07s ease}
.r1-case .p4-dna-panel[data-entering="true"]{animation:p4-dna-enter .18s var(--p4-dna-ease) both}
.r1-case .p4-dna-status{margin:0 0 10px;font-size:12px;line-height:1.45;color:#cbbbd7}
.r1-case .p4-dna-panel h3{margin:0 0 14px;font-size:clamp(27px,2.5vw,34px);font-weight:500;line-height:1.25;letter-spacing:-.025em;color:#f2eee9}
.r1-case .p4-dna-panel>p:last-child{max-width:37ch;margin:0;font-size:16px;line-height:1.75;color:#d7d1dc}
.r1-case .p4-dna-boundary{margin:0;padding-top:15px;border-top:1px solid #494850;font-size:12px;line-height:1.7;color:#b7b1bc}
.r1-case .p4-dna-explorer .r1-image-stage{isolation:isolate}
.r1-case .p4-dna-marker{position:absolute;z-index:1;top:22.543218%;left:3.019034%;width:24.568138%;height:11.914894%;border:2px solid rgba(250,246,255,.96);border-radius:4px;background:#eee4f012;box-shadow:0 0 0 100vmax rgba(8,7,12,.18),inset 0 0 0 1px rgba(13,9,17,.45);pointer-events:none;transform:translate3d(0,var(--p4-spot-offset),0);transition:transform .26s var(--p4-dna-ease)}
@keyframes p4-dna-enter{from{opacity:.45;transform:translate3d(0,4px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(max-width:767px){
 .r1-case .p4-dna-explorer{gap:0}
 .r1-case .p4-dna-copy{display:contents}
 .r1-case .p4-dna-instruction{order:0;font-size:15px;margin-bottom:19px}
 .r1-case .p4-dna-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .r1-case .p4-dna-tabs{order:1}
 .r1-case .p4-dna-tabs button{min-height:66px;padding:10px 12px 10px 16px;font-size:15px;align-items:flex-start;flex-direction:column;justify-content:center;gap:3px}
 .r1-case .p4-dna-tabs button:nth-child(odd){border-right:1px solid #5c5862}
 .r1-case .p4-dna-tabs button small{font-size:12px}
 .r1-case .p4-dna-explorer .r1-dna-figure{order:2;margin-top:18px}
 .r1-case .p4-dna-marker{top:.566321%;left:.349441%;width:99.301118%;height:24.454148%}
 .r1-case .p4-dna-panels{order:3;min-height:214px;padding-top:22px}
 .r1-case .p4-dna-panel h3{font-size:28px}
 .r1-case .p4-dna-panel>p:last-child{font-size:15px;line-height:1.7}
 .r1-case .p4-dna-boundary{order:4;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .r1-case .p4-dna-tabs button,.r1-case .p4-dna-tabs button::before,.r1-case .p4-dna-tabs button small,.r1-case .p4-dna-marker,.r1-case .p4-dna-panel[data-exiting="true"]{transition:none}
 .r1-case .p4-dna-panel[data-entering="true"]{animation:none}
}