:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; color:#282a2c; background:#e5e6e5; }
* { box-sizing:border-box; }
body { margin:0; }
button,summary { -webkit-tap-highlight-color:transparent; font:inherit; }
button { color:inherit; cursor:pointer; }
button:focus-visible,summary:focus-visible { outline:2px solid #f56b39; outline-offset:4px; }
.experience { position:relative; isolation:isolate; width:100%; height:100svh; min-height:440px; overflow:hidden; background:#e5e6e5; }
.poster,.stage { position:absolute; inset:0; width:100%; height:100%; }
.poster { object-fit:contain; transition:opacity .25s; }
.ready .poster { opacity:0; pointer-events:none; }
.stage { touch-action:pan-y; }
.stage canvas { display:block; width:100%; height:100%; opacity:0; transition:opacity .3s; }
.ready .stage canvas { opacity:1; }
.topline { position:absolute; z-index:2; inset:25px 30px auto; display:flex; align-items:center; justify-content:space-between; gap:20px; pointer-events:none; }
.eyebrow { font-size:10px; letter-spacing:.16em; font-weight:600; }
.eyebrow span { color:#a7aaa9; margin:0 12px; }
.views { display:flex; gap:3px; padding:4px; border:1px solid #ffffff90; border-radius:30px; background:#efefec90; backdrop-filter:blur(12px); pointer-events:auto; }
.views button { border:0; background:transparent; font-size:12px; padding:9px 15px; border-radius:20px; }
.views button[aria-pressed=true] { background:#fff; box-shadow:0 2px 8px #00000008; }
.toolbar { position:absolute; inset:auto 30px 25px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; pointer-events:none; }
.caption { display:flex; align-items:center; gap:10px; }
.caption p { margin:0; line-height:1.45; }
.indicator { background:#f36b38; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.tools { display:flex; align-items:center; gap:24px; pointer-events:auto; }
#motion, summary { padding:7px 0; border:0; border-bottom:1px solid #9997; background:transparent; font-size:12px; white-space:nowrap; cursor:pointer; }
summary { list-style:none; }
summary::-webkit-details-marker { display:none; }
summary span { margin-left:8px; }
.step-panel { position:absolute; right:0; bottom:45px; display:grid; grid-template-columns:1fr 1fr; gap:25px; padding:25px; width:440px; max-width:calc(100vw - 32px); max-height:calc(100svh - 130px); overflow:auto; border:1px solid #fff; border-radius:14px; background:#f6f6f3f5; box-shadow:0 12px 45px #0001; backdrop-filter:blur(18px); }
.step-panel h2 { font-size:15px; font-weight:500; margin:0 0 18px; }
.step-panel small { display:block; font-size:11px; margin-top:4px; color:#777; }
.step-panel ol { list-style:none; padding:0; margin:0; }
.step-panel li+li { margin-top:7px; }
.step-panel button { text-align:left; width:100%; background:transparent; padding:9px 8px; border:1px solid transparent; border-radius:4px; font-size:12px; }
.step-panel button:hover,.step-panel button[aria-pressed=true] { background:#fff; border-color:#eb693a; }
.no-script { position:absolute; left:30px; bottom:65px; max-width:400px; font-size:12px; }
@media(max-width:640px) {
 .experience { min-height:530px; }
 .topline { inset:22px 16px auto; flex-direction:column; gap:17px; }
 .eyebrow { font-size:9px; }
 .toolbar { inset:auto 18px 18px; flex-direction:column; gap:16px; }
 .caption { min-height:32px; justify-content:center; text-align:center; max-width:92%; }
 .tools { width:100%; justify-content:space-between; }
 .step-panel { width:100%; gap:12px; bottom:45px; padding:18px; }
 .step-panel button { padding:9px 3px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }