.workspace { grid-template-columns:218px minmax(350px,458px) 145px; gap:24px; background:#eeeaf1; }
.demo-nav { padding:14px; border-radius:9px; }
.demo-heading { margin-top:14px; }
.scen .nwb { display:none; }
.demo-detail { align-self:end; padding:12px; max-height:100%; }
.demo-detail[open] { align-self:center; width:min(260px,100%); }
.demo-detail summary { font-size:13px; cursor:pointer; }
.demo-detail .info h2 { font-size:16px; }
.demo-detail .info li { font-size:12px; padding-left:13px; }
.demo-detail .info li::before { left:0; width:5px; height:5px; }
.demo-detail .info { margin-top:10px; }
.welcome h1 { font-size:27px; letter-spacing:-.04em; }
.mission { background:#632a86; color:white; border:0; border-radius:17px; box-shadow:0 4px 0 #43205a; }
.mission .overline,.mission p { color:#f2e5fa; }
.mission .btn { background:#fffaf2; color:#4b225f; box-shadow:0 3px 0 #d6bbdc; }
.mission .btn:active { transform:translateY(2px); box-shadow:0 1px 0 #d6bbdc; }
.mission .huohuo { width:126px; right:8px; }
.today-stats { margin-top:15px; }
.steps { display:grid; gap:1px; border:0; overflow:visible; position:relative; padding:3px 1px 6px; }
.steps::before { content:""; position:absolute; left:27px; top:16px; bottom:20px; width:3px; background:#e3d4ec; }
.steps li + li { border:0; }
.step { position:relative; min-height:55px; background:transparent; border-radius:10px; padding:5px 9px; }
.step .sign { width:36px; height:36px; border-radius:12px; font:700 19px var(--zh); border:1px solid #e0d4e8; background:#f9f5fc; color:#685475; }
.step.done .sign { background:#e9dfef; border-color:#dacee4; color:#553465; }
.step.current .sign { background:#642b87; border-color:#642b87; box-shadow:0 3px 0 #43205a; }
.step-label { flex:1; display:grid; gap:2px; }
.step-label small { text-align:left; }
.step-check { color:var(--g); }
.step:disabled { cursor:default; }
.step:disabled .sign { color:#887b90; background:#f4eff7; }
.access-pass { color:#fff; border:0; background:#632a86; border-radius:15px; padding:14px 96px 14px 18px; box-shadow:0 4px 0 #43205a; }
.access-pass p,.access-pass strong { color:#fff; }
.access-pass::before,.access-pass::after { content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:var(--bg); bottom:31px; }
.access-pass::before { left:-7px; }
.access-pass::after { right:-7px; }
.ticket-valid { display:flex; gap:8px; align-items:baseline; border-top:1px dashed #cfb0dd; margin-top:11px; padding-top:8px; }
.ticket-valid small { color:#f0e1f8; font-size:12px; }
.access-pass img { bottom:12px; right:12px; }
.access-contents { margin-top:14px; }
.l-prog { height:9px; }
.l-prog i::after { display:none; }
.fb.show .fb-ico .huohuo { animation:casual-response .55s cubic-bezier(.2,.7,.25,1) both; }
.fb.show.bad .fb-ico .huohuo { animation-name:small-nod; }
@keyframes casual-response { 0%{transform:translateY(5px) scale(.88)} 48%{transform:translateY(-9px) rotate(-9deg) scale(1.12)} 100%{transform:none} }
@media(max-width:940px) { .workspace { grid-template-columns:minmax(180px,220px) minmax(330px,458px); } }
@media(max-width:650px) { .workspace { display:block; padding:0; } .mission .huohuo { width:109px; right:4px; } }
.max-app .workspace { display:block; height:100dvh; padding:0; background:var(--bg); }
.max-app .stage { width:min(100%,520px); height:100dvh; margin:0 auto; }
.max-app .app-frame { border:0; border-radius:0; box-shadow:none; }
.max-app .emulator-label,.max-app .device-top,.max-app .device-bottom,.max-app .demo-nav,.max-app .demo-detail { display:none; }
.max-head .ma-close { font-size:28px; padding:0 8px; }