.vpg-overlay{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:20px;background:#092742b8;backdrop-filter:blur(7px);font-family:system-ui,sans-serif;color:#24446a}
.vpg-overlay *{box-sizing:border-box}
.vpg-card{position:relative;width:min(780px,100%);height:min(650px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);display:flex;flex-direction:column;gap:12px;padding:22px;border:3px solid #fff;border-radius:26px;background:#fffdf4;box-shadow:0 7px 0 #90bcda66,0 20px 60px #06244166;overflow:hidden}
.vpg-heading{text-align:center;flex-shrink:0;padding:0 35px}.vpg-heading span{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#8568c8}.vpg-heading h2{font:900 clamp(21px,3vw,30px)/1.2 system-ui,sans-serif;margin:5px 0 0;color:#24446a}
.vpg-close{position:absolute;right:10px;top:10px;width:36px;height:36px;padding:0;border:1px solid #cddceb;border-radius:50%;background:#fff;color:#5b7293;font:24px system-ui;cursor:pointer}
.vpg-animation{position:relative;min-height:0;flex:1;background:linear-gradient(145deg,#dcf6ff,#eef5ff);border:1px solid #cee6f3;border-radius:18px;overflow:hidden}
.vpg-board{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0}.vpg-board .vpg-label{font:800 20px system-ui;fill:#315779}.vpg-board .vpg-reward{font:900 28px system-ui;fill:#188a59}
.vpg-caption{flex-shrink:0;text-align:center;min-height:24px;font:800 15px/1.4 system-ui;margin:0;color:#345d80}.vpg-steps{display:flex;justify-content:center;gap:9px;flex-shrink:0}.vpg-steps span{border-radius:20px;background:#edf0fb;color:#7b83a2;padding:6px 12px;font:700 12px system-ui}.vpg-steps .active{background:#ddf8e8;color:#158854}
.vpg-actions{display:flex;gap:10px;flex-shrink:0}.vpg-actions button{flex:1;min-height:44px;padding:10px;border:1px solid #d2ddeb;border-radius:13px;background:#fff;color:#4d6990;font:800 14px system-ui;cursor:pointer;touch-action:manipulation}.vpg-actions .vpg-play{flex:2;background:linear-gradient(#23c989,#0aa86b);color:#fff;border-color:#12915e;box-shadow:0 3px 0 #087c50}.vpg-overlay button:focus-visible{outline:3px solid #ffc747;outline-offset:2px}
.sc-topbar-actions{display:flex;align-items:center;gap:8px}.sc-guide-button{min-height:38px;padding:7px 12px;border:1px solid #9cb4d166;border-radius:10px;color:#fff;background:#ffffff18;font:700 12px system-ui;cursor:pointer}
@media(max-width:600px){.vpg-overlay{padding:12px}.vpg-card{padding:14px;gap:9px;max-height:calc(100dvh - 24px)}.vpg-steps span{font-size:10px;padding:5px 9px}.vpg-caption{font-size:12px}.vpg-close{right:5px;top:5px;width:32px;height:32px}}
@media(max-height:480px) and (orientation:landscape){.vpg-overlay{padding:8px}.vpg-card{width:min(690px,100%);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);padding:9px 14px;gap:5px;border-radius:18px}.vpg-heading span{display:none}.vpg-heading h2{font-size:20px;margin:0}.vpg-close{width:30px;height:30px;top:5px;right:7px;font-size:22px}.vpg-animation{border-radius:12px}.vpg-caption{font-size:11px;min-height:15px}.vpg-steps span{font-size:9px;padding:3px 9px}.vpg-actions button{min-height:34px;font-size:11px;padding:6px}.vpg-steps{gap:5px}}
@media(max-height:480px) and (orientation:landscape){
 .vpg-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,32%);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:'demo heading' 'demo caption' 'demo steps' 'demo actions';padding:10px;gap:8px}
 .vpg-animation{grid-area:demo;height:100%;min-width:0}
 .vpg-heading{grid-area:heading;padding:0 18px 0 0;align-self:center}.vpg-heading h2{font-size:17px}
 .vpg-caption{grid-area:caption;align-self:center;line-height:1.4}
 .vpg-steps{grid-area:steps;gap:3px}.vpg-steps span{padding:3px 5px;font-size:8px;white-space:nowrap}
 .vpg-actions{grid-area:actions;flex-direction:column-reverse;gap:6px}.vpg-actions button{flex:none;width:100%;min-height:32px}
}
/* Complete the Pattern has a short mobile preview, with Play always visible. */
@media(max-width:900px), (max-height:520px) and (orientation:landscape){
 .vpg-rails .vpg-card{width:min(620px,100%);height:min(440px,calc(100dvh - 24px),calc(53vw + 160px));max-height:calc(100dvh - 24px);padding:12px;gap:8px;border-radius:20px;}
 .vpg-rails .vpg-heading span{display:none;}.vpg-rails .vpg-heading h2{font-size:21px;margin:0;}
 .vpg-rails .vpg-caption{font-size:12px;min-height:18px;}.vpg-rails .vpg-steps span{font-size:10px;padding:4px 8px;}
 .vpg-rails .vpg-actions button{min-height:38px;padding:8px;font-size:12px;}
}
@media(max-height:520px) and (orientation:landscape){
 .vpg-rails .vpg-card{height:min(300px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);padding:9px;gap:6px;}
 .vpg-rails .vpg-heading h2{font-size:16px;}.vpg-rails .vpg-caption{font-size:11px;}.vpg-rails .vpg-steps span{font-size:8px;padding:3px 4px;}.vpg-rails .vpg-actions button{min-height:32px;padding:5px;font-size:11px;}
}