.sample-player{max-width:780px;margin:0 auto 2rem;padding:clamp(1rem,4vw,2rem);color:#1d241c;background:#f1ead8;border:2px solid #3a4937;box-shadow:7px 7px #263123}
.sample-player h2{margin:.2rem 0 .5rem;font-size:clamp(1.35rem,4vw,2rem)}.sample-stage{display:grid;grid-template-columns:minmax(100px,25%) 1fr;grid-template-rows:auto 1fr;gap:.5rem 1rem;min-height:180px;padding:1rem;background:#e3dbc6;border:1px solid #68735a}
.sample-art{grid-row:1/span 2;display:grid;place-items:center;overflow:hidden;min-height:140px;background:#d5ceb8}.sample-art img{width:100%;height:100%;max-height:240px;object-fit:contain}.sample-scene-label{margin:0;align-self:end;color:#4b5b42;font:700 .78rem sans-serif;text-transform:uppercase;letter-spacing:.08em}.sample-caption{margin:0;align-self:start;font:1rem/1.55 Georgia,serif}
.sample-controls{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0}.sample-controls button{min-height:44px}.sample-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.8rem}.sample-options label{display:grid;gap:.35rem;font:600 .9rem/1.35 sans-serif}.sample-options select,.sample-options input{width:100%;min-height:44px}.sample-player [data-sample-status]{min-height:1.5em;margin:1rem 0 .4rem;font-weight:700}.sample-fallback{font-size:.9rem}.sample-player :focus-visible{outline:3px solid #235ca3;outline-offset:3px}
@media(max-width:520px){.sample-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto}.sample-art{grid-row:auto;min-height:100px;max-height:150px}.sample-art img{max-height:150px}}
@media(prefers-reduced-motion:reduce){.sample-player *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}html.motion-off .sample-player *{animation:none!important;transition:none!important}

@keyframes sample-art-enter{from{opacity:.45;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.sample-art-enter{animation:sample-art-enter .22s steps(2,end) both}

html.motion-off .sample-art-enter{animation:none!important}
@media(prefers-reduced-motion:reduce){.sample-art-enter{animation:none!important}}

html:not(.js) .sample-stage,html:not(.js) .sample-controls,html:not(.js) .sample-options,html:not(.js) .sample-player [data-sample-status]{display:none}