:root{background:#0f172a;color:#f8fafc}.dark-demo{background:radial-gradient(ellipse at 50% 45%,#1b2841,#0f172a 70%);min-height:100vh;padding:22px 20px 34px}.dark-header{max-width:900px;width:100%;margin:0 auto 24px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#a6b6cd}.dark-demo main{display:flex;flex-direction:column;align-items:center}.dark-demo h1{font-size:20px;letter-spacing:-.02em;font-weight:650;margin:0 0 18px}.status-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:10px 14px 10px 20px;background:#1e293bcc;border:1px solid #334155;border-radius:32px;margin-bottom:24px;box-shadow:0 4px 20px #0003}#mode{font-weight:600;color:#f0f5ff}#mode i{background:#3b82f6;box-shadow:0 0 12px #3b82f6}#interaction-hint{font-size:12px;color:#94a3b8;border-left:1px solid #334155;padding-left:16px}#demo-toggle{background:#24344f;border-color:#4d5f7b;color:#e5edff}.dark-demo .stage{width:460px;max-width:100%;min-height:0;padding:16px 40px 20px;overflow:visible;background:none;border-radius:0}.dark-demo .phone{width:320px;height:650px;flex-shrink:0;border:10px solid black;border-radius:44px;box-shadow:0 0 0 9px #1e293b,0 0 0 10px #334155,0 25px 50px -12px #000b}.dark-demo .phone-status:after{background:black}.dark-demo #steps{display:flex;justify-content:center;gap:4px;margin:12px 0 8px}.dark-demo #steps button{width:38px;height:34px;padding:0;display:grid;place-items:center;background:none}.dark-demo #steps button span{font-size:0;width:10px;height:10px;background:#40516e;border-radius:10px}.dark-demo #steps button[aria-current="step"] span{width:27px;background:#3b82f6}.dark-demo #steps .step-label{display:none}.dark-caption{display:flex;gap:14px;font-size:13px;color:#94a3b8}.dark-caption #stage-count{color:#75b3ff;font-weight:650}.dark-demo .disclosure{font-size:11px;color:#74849c;text-align:center;margin:16px 0 0}.dark-demo #demo-cursor .cursor-halo{box-shadow:0 0 25px #3b82f680;background:radial-gradient(circle,#55bcffb3,#4d86f76b 48%,#4d86f705 74%)}
@media(max-width:480px){.dark-demo{padding-inline:12px}.dark-header{font-size:12px;margin-bottom:22px}.dark-demo .stage{padding:16px 10px 20px}.status-bar{gap:10px;padding:10px 14px}#interaction-hint{display:none}.dark-caption{gap:10px;font-size:12px}.dark-demo .phone{max-width:calc(100% - 18px)}}
.embedded-demo{padding:20px 12px;min-height:0}.embedded-demo .dark-header,.embedded-demo main>h1,.embedded-demo .disclosure{display:none}.embedded-demo .status-bar{margin-bottom:16px}.embedded-demo #interaction-hint{display:none}