.coat-demo{margin-block:2rem;scroll-margin-top:8rem}
.coat-card{padding:clamp(1rem,3.5vw,2.5rem);border-radius:1.25rem;background:#151e2d;color:#fff}
.coat-card h2,.coat-card p,.coat-card li,.coat-card label{color:inherit}
.coat-card h2{margin:0 0 .5rem}
.coat-card a{color:#ffd2a9;text-decoration:underline}
.coat-mode{border:0;padding:0;margin:1rem 0}
.coat-mode legend{font-weight:700;margin-bottom:.55rem}
.coat-mode label{display:inline-flex;align-items:center;gap:.5rem;margin:0 .5rem .5rem 0;padding:.55rem .8rem;border:1px solid #8292a9;border-radius:.5rem;min-height:44px;cursor:pointer}
.coat-mode input{accent-color:#ffac69}
.coat-mode label:has(:checked){border-color:#ffac69;background:#29364a}
.coat-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:center;margin-block:1rem}
.coat-scene{display:grid;place-items:center;min-height:12rem;border:1px solid #506078;border-radius:.9rem;background:radial-gradient(ellipse at 50% 35%,#39495d,#1c2637 76%);overflow:hidden}
.coat-stack{display:grid;width:65%;max-width:18rem;filter:drop-shadow(0 14px 12px #080d15a0)}
.coat-slab{grid-area:1/1;height:4.8rem;transform:translateY(var(--offset)) skewX(-24deg) scaleY(.62);border-radius:.45rem;border:1px solid #ffffff88;border-bottom:.65rem solid var(--edge);background:linear-gradient(135deg,var(--light),var(--tone));transition:transform .25s ease}
.coat-slab[data-layer="base"]{--offset:1.9rem;--light:#c3cbd4;--tone:#78899a;--edge:#526273}
.coat-slab[data-layer="primer"]{--offset:0rem;--light:#9bb6c9;--tone:#66859e;--edge:#47667e}
.coat-slab[data-layer="finish"]{--offset:-1.9rem;--light:#8cac8e;--tone:#406d55;--edge:#2a493a}
.coat-pp .coat-slab[data-layer="base"]{--light:#8797ab;--tone:#54667e;--edge:#3b4b62}
.coat-pp .coat-slab[data-layer="primer"]{--light:#daedf5;--tone:#a8c7d8;--edge:#88a7ba}
.coat-pp .coat-slab[data-layer="finish"]{--light:#535d69;--tone:#10151c;--edge:#080b0f}
.coat-pp[data-mode="direct"] .coat-slab[data-layer="finish"]{--offset:0rem}
.coat-list{display:grid;gap:.55rem;list-style:none;padding:0;margin:0}
.coat-list button{font:inherit;color:#f5f8fc;text-align:left;width:100%;padding:.65rem .85rem;min-height:44px;background:#253247;border:1px solid #8090a6;border-radius:.55rem;cursor:pointer}
.coat-list button[aria-pressed="true"]{border-color:#ffac69;box-shadow:inset 3px 0 #ffac69}
.coat-list button span{display:block;font-size:.9rem;color:#d2dbe8}
.coat-card :focus-visible{outline:2px solid #ffba85;outline-offset:3px}
.coat-status{margin:.65rem 0 0;font-weight:650}
.coat-card .coat-note{margin:.55rem 0 0;color:#c7d2e1;font-size:.9rem}
.coat-card [hidden]{display:none!important}
@media(max-width:600px){.coat-layout{grid-template-columns:1fr}.coat-scene{min-height:10rem}}
@media(prefers-reduced-motion:reduce){.coat-slab{transition:none}}

.coat-card:not(.coat-pp):not(.coat-effect) .coat-slab[data-layer="primer"]{--light:#b0c985;--tone:#729646;--edge:#49652f}
.coat-effect .coat-scene{min-height:13.5rem}
.coat-effect .coat-slab{height:4.2rem;border-bottom-width:.45rem}
.coat-effect .coat-slab[data-layer="base"]{--offset:3rem}
.coat-effect .coat-slab[data-layer="primer"]{--offset:1.5rem}
.coat-effect .coat-slab[data-layer="color"]{--offset:0rem}
.coat-effect .coat-slab[data-layer="finish"]{--offset:-1.5rem;--edge:#d0e8ef80;background:linear-gradient(153deg,#def9ff28 15%,#eafcff78 33%,#eafcff09 58%,#def9ff35 80%)}
.coat-candy .coat-slab[data-layer="silver"]{--offset:0rem;--edge:#9ba8b4;background:linear-gradient(135deg,#8593a2,#f0f4f7 43%,#a5b2c0 75%,#d9dfe8)}
.coat-candy .coat-slab[data-layer="color"]{--offset:-1.5rem;--edge:#820e2c;background:linear-gradient(135deg,#ff836e,#ca2146 55%,#870c2f)}
.coat-candy .coat-slab[data-layer="finish"]{--offset:-3rem}
.coat-shift .coat-slab[data-layer="primer"]{--light:#343844;--tone:#0c1017;--edge:#070a0e}
.coat-shift .coat-slab[data-layer="color"]{--edge:#38276c;background:linear-gradient(125deg,#478d70,#2699a0 32%,#485dd0 63%,#923ba1)}