/* Screenshot-first poster: live text, responsive to the WeChat webview. */
.as-screen-poster{box-sizing:border-box;width:430px;max-width:calc(100vw - 32px);height:min(820px,calc(100dvh - 32px));max-height:none;margin:auto;padding:0;border:1px solid #30475c;border-radius:24px;overflow:auto;overscroll-behavior:contain;background:#081321;color:#f5f9ff;box-shadow:0 24px 100px #0008;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.as-screen-poster::backdrop{background:rgba(6,13,22,.8);backdrop-filter:blur(8px);}
.as-screen-poster *{box-sizing:border-box;}
.asp-sheet{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px;min-height:100%;padding:22px;background:radial-gradient(ellipse at 100% 0%,#16698c55,transparent 53%),radial-gradient(ellipse at 0% 45%,#274ab84a,transparent 62%),linear-gradient(150deg,#0d1b30,#091923 75%,#0d2b33);}
.asp-sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#98cfff05 1px,transparent 1px),linear-gradient(90deg,#98cfff05 1px,transparent 1px);background-size:32px 32px;}
.as-screen-poster h2,.as-screen-poster h3,.as-screen-poster p{margin:0;}
.asp-header{display:flex;justify-content:space-between;align-items:center;min-height:28px;}
.asp-brand{display:flex;align-items:center;gap:9px;}
.asp-brand b{font-size:19px;letter-spacing:-.6px;color:#f6faff;}
.asp-brand span{font-size:11px;color:#a8b9ce;}
.asp-close{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin:-4px -5px -4px 0;padding:0;border:1px solid #c4dfff26;border-radius:50%;background:#cfebff0a;color:#b8cde0;font:26px/1 sans-serif;cursor:pointer;}
.asp-close:focus-visible{outline:2px solid #8aeedc;outline-offset:3px;}
.asp-heading h2{font-size:27px;line-height:1.25;font-weight:750;letter-spacing:-.6px;color:#f7fbff;}
.asp-heading p{margin-top:6px;font-size:12px;line-height:1.4;color:#93a9c0;}
.asp-score{position:relative;flex:1;min-height:150px;display:flex;flex-direction:column;justify-content:center;padding:15px 18px;border:1px solid #a7d8ff45;border-radius:20px;background:linear-gradient(115deg,#2656a66e,#1e6b822e 65%,#63dabd1a);box-shadow:inset 0 1px #d7faff1a,0 12px 28px #0002;overflow:hidden;}
.asp-score::after{content:"";position:absolute;right:-37px;top:-53px;width:180px;height:180px;border:1px solid #a1e8ff24;border-radius:50%;box-shadow:0 0 0 25px #9edbff08,0 0 0 50px #9edbff05;pointer-events:none;}
.asp-score-label{font-size:12px;line-height:1.4;letter-spacing:2px;color:#acdaec;}
.asp-score-row{display:flex;align-items:center;gap:20px;position:relative;z-index:1;}
.asp-score-level{font-size:85px;line-height:1.08;letter-spacing:-4px;font-weight:750;color:#92f2df;text-shadow:0 4px 30px #54eed533;}
.asp-score-detail h3{font-size:25px;line-height:1.25;letter-spacing:-.5px;font-weight:700;color:#fff;}
.asp-score-detail p{max-width:180px;margin-top:7px;font-size:12px;line-height:1.5;color:#c5d7e6;}
.asp-next{margin-top:8px!important;padding-top:10px;border-top:1px solid #bee8ff25;font-size:12px;line-height:1.4;color:#d3e5ef;}
.asp-ladders{display:grid;gap:16px;}
.asp-ladder-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:9px;}
.asp-ladder-head h3{font-size:18px;font-weight:700;line-height:1.35;color:#edf6ff;}
.asp-ladder-head>span{font-size:11px;line-height:1.4;color:#93aec3;}
.asp-level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0;}
.asp-level{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:82px;padding:8px 1px;border:1px solid #a9c6e323;border-radius:11px;background:#b1d1ed08;text-align:center;}
.asp-level>b{font-size:25px;font-weight:650;line-height:1.1;letter-spacing:-.8px;color:#c2d3e6;}
.asp-level>strong{margin-top:6px;font-size:12px;line-height:1.25;font-weight:600;color:#edf4fc;white-space:nowrap;letter-spacing:-.3px;}
.asp-level>span{margin-top:4px;font-size:10px;line-height:1.35;color:#9bb1c7;white-space:nowrap;letter-spacing:-.3px;}
.asp-level.is-current{position:relative;background:linear-gradient(145deg,#8df5df,#63d7e8);border-color:#abfff0;box-shadow:0 0 22px #68e5d82b;}
.asp-level.is-current>b,.asp-level.is-current>strong{color:#072b3a;}
.asp-level.is-current>span{color:#205165;}
.asp-invite{display:flex;align-items:center;gap:15px;padding:12px;border:1px solid #e0f5ff3b;border-radius:17px;background:linear-gradient(120deg,#f2fbff,#e2f7f4);color:#152d40;box-shadow:0 7px 24px #0002;}
.asp-qr{display:block;width:108px;height:108px;flex:0 0 108px;object-fit:contain;border-radius:4px;background:#fff;}
.asp-invite-copy{min-width:0;}
.asp-invite-kicker{display:block;font-size:11px;line-height:1.4;color:#4f6777;}
.asp-invite-copy h3{margin:4px 0 6px;font-size:25px;line-height:1.15;letter-spacing:-.6px;color:#102d3c;}
.asp-invite-copy p{font-size:11px;line-height:1.45;color:#386879;white-space:nowrap;}
.asp-invite-copy small{display:block;margin-top:6px;font-size:10px;line-height:1.3;color:#54717f;}
.asp-footer{text-align:center;}
.asp-screenshot-tip{font-size:13px;line-height:1.5;font-weight:550;color:#d6eff1;}
.asp-footer small{display:block;margin-top:4px;font-size:10px;line-height:1.4;color:#8ba8bd;}
@media(max-width:600px){
 .as-screen-poster{width:100vw;max-width:100vw;height:100dvh;border:0;border-radius:0;margin:0;inset:0;}
 .asp-sheet{padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(14px + env(safe-area-inset-bottom,0px));gap:14px;}
 .asp-heading h2{font-size:26px;}
 .asp-score{min-height:140px;}
}
@media(max-height:760px){
 .asp-sheet{gap:12px;padding-top:14px;padding-bottom:12px;}
 .asp-score{min-height:127px;padding:11px 15px;}
 .asp-score-level{font-size:72px;}
 .asp-score-detail h3{font-size:23px;}
 .asp-next{margin-top:5px!important;padding-top:7px;}
 .asp-ladders{gap:12px;}
 .asp-level{min-height:74px;padding:6px 1px;}
 .asp-ladder-head{margin-bottom:7px;}
 .asp-invite{padding:10px;gap:12px;}
 .asp-qr{width:96px;height:96px;flex-basis:96px;}
}
@media(max-height:720px){
 .asp-sheet{gap:9px;padding-top:10px;padding-bottom:9px;}
 .asp-header{min-height:24px;}
 .asp-heading h2{font-size:25px;}
 .asp-heading p{margin-top:3px;}
 .asp-score{min-height:114px;padding:8px 13px;}
 .asp-score-level{font-size:62px;}
 .asp-score-label{font-size:11px;}
 .asp-next{margin-top:3px!important;padding-top:5px;font-size:11px;}
 .asp-ladders{gap:9px;}
 .asp-level{min-height:66px;padding:5px 1px;}
 .asp-level>b{font-size:22px;}
 .asp-level>strong{margin-top:4px;}
 .asp-level>span{margin-top:3px;}
 .asp-ladder-head{margin-bottom:6px;}
 .asp-invite{padding:8px;}
 .asp-footer small{margin-top:2px;font-size:9px;}
}
@media(min-width:380px){
 .asp-level>strong{font-size:13px;}
 .asp-level>span{font-size:11px;}
}
@media(max-width:370px){
 .asp-sheet{padding-left:14px;padding-right:14px;}
 .asp-level-grid{gap:4px;}
 .asp-score-row{gap:16px;}
 .asp-invite{gap:9px;}
 .asp-invite-copy h3{font-size:23px;}
 .asp-invite-kicker,.asp-invite-copy p{font-size:10px;}
}

/* Two equally prominent next steps, with distinct outcomes. */
.as-inline .as-save-share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 10px;}
.as-inline .as-save-share[hidden]{display:none;}
.as-inline .as-save-share button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:88px;padding:17px 18px;border-radius:16px;text-align:left;border:1px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s;}
.as-inline .as-save-share .as-action-save{background:linear-gradient(125deg,#076fe2,#1153bd);color:#fff;border-color:#166cce;box-shadow:0 6px 16px #1569cb20;}
.as-inline .as-save-share .as-action-share{background:linear-gradient(120deg,#12344b,#0c6068);color:#fff;border-color:#276d78;box-shadow:0 6px 16px #176b7024;}
.as-inline .as-save-share button:hover{transform:translateY(-2px);box-shadow:0 9px 20px #153d492e;}
.as-inline .as-save-share button:focus-visible{outline:3px solid #65c4f4;outline-offset:3px;}
.as-inline .as-save-share button:disabled{cursor:wait;transform:none;opacity:.75;}
.as-action-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;font-size:24px;font-weight:500;border-radius:12px;background:#ffffff20;color:#fff;}
.as-action-share .as-action-icon{background:#a0f5dd;color:#0a4850;box-shadow:0 0 20px #6ce1ca22;}
.as-action-copy{min-width:0;flex:1;}
.as-action-copy strong{display:block;font-size:15px;line-height:1.45;font-weight:650;color:#fff;}
.as-action-copy small{display:block;margin-top:4px;font-size:11px;line-height:1.45;font-weight:400;color:#d4e8ff;}
.as-action-share .as-action-copy small{color:#c3e5e5;}
.as-action-arrow{font-size:20px;color:#d5fff5;flex:0 0 auto;}
.as-inline .as-save-note{grid-column:1/-1;font-size:12px;line-height:1.6;color:#538072;margin:0 3px;}
.as-save-note:empty,.as-history-notice:empty{display:none;}
.as-history-summary{margin-bottom:13px;}
.as-history button.as-history-share{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 12px;border:1px solid #bbdfdc;border-radius:10px;background:#e4f5f1;color:#075965;font-size:12px;line-height:1.45;font-weight:600;cursor:pointer;}
.as-history button.as-history-share:hover{background:#d2eee8;}
.as-history button.as-history-share:focus-visible{outline:2px solid #18797a;outline-offset:2px;}
.as-history .as-history-latest{margin-bottom:16px;background:linear-gradient(120deg,#163c53,#0b6269)!important;color:#fff!important;border-color:#205f6c!important;box-shadow:0 4px 12px #155b681a;}
.as-history .as-history-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 0;}
.as-history-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.as-history-info>span{font-size:12px;color:#7e8c99;}
.as-history-info>strong{font-size:14px;color:#2d4554;}
.as-history-tools{display:flex;align-items:center;gap:12px;}
.as-history button.as-history-delete{padding:9px 5px;min-height:38px;color:#8a949c;font-size:12px;cursor:pointer;}
.as-history-notice{flex:1 0 100%;margin:0;font-size:12px;line-height:1.5;color:#9b4c3c;}
.qr-window[data-expires]{width:250px;height:220px;transform:none;margin:14px auto 8px;}
.qr-window[data-expires] img{position:static;width:100%!important;height:auto!important;max-width:100%!important;left:auto;top:auto;}
.asp-heading h2{font-size:25px;letter-spacing:-.7px;}
@media(max-width:760px){
 .as-inline .as-save-share{grid-template-columns:1fr;gap:10px;}
 .as-inline .as-save-share button{min-height:82px;padding:15px;gap:11px;}
 .as-history .as-history-row{align-items:flex-start;flex-direction:column;gap:10px;}
 .as-history-tools{width:100%;justify-content:space-between;}
 .as-history button.as-history-share{font-size:12px;}
 .asp-heading h2{font-size:25px;}
}
@media(max-width:370px){
 .as-inline .as-save-share button{gap:9px;padding:13px 11px;}
 .as-action-icon{width:32px;height:32px;flex-basis:32px;font-size:21px;}
 .as-action-copy strong{font-size:14px;}
 .as-action-copy small{font-size:10px;}
 .as-action-arrow{font-size:16px;}
 .asp-heading h2{font-size:23px;}
}
@media(prefers-reduced-motion:reduce){.as-inline .as-save-share button{transition:none;}.as-inline .as-save-share button:hover{transform:none;}}
.as-section .as-learning-upgrade{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:32px;padding:28px 32px;border:1px solid #c7e4e7;border-left:5px solid #078a92;border-radius:18px;background:linear-gradient(110deg,#edf9f6,#f1f6ff);box-shadow:0 8px 24px #155d6f0a;}
.as-section .as-learning-upgrade p{margin:0;}
.as-section .as-learning-upgrade strong{display:block;font-weight:730;line-height:1.45;letter-spacing:-.5px;}
.as-section .as-learning-upgrade strong span:first-child{display:block;font-size:22px;color:#18384b;}
.as-section .as-learning-upgrade strong span:last-child{display:block;margin-top:3px;font-size:28px;color:#076879;}
.as-section .as-learning-upgrade em{display:inline-block;white-space:nowrap;font-style:normal;}
.as-section .as-learning-upgrade>a{display:inline-flex;align-items:center;justify-content:center;gap:18px;flex-shrink:0;min-height:50px;padding:14px 20px;border:1px solid #0b6980;border-radius:12px;background:linear-gradient(120deg,#115585,#077782);color:#fff;font-size:15px;font-weight:600;line-height:1.4;text-decoration:none;box-shadow:0 5px 12px #14647b25;}
.as-section .as-learning-upgrade>a:hover{background:#07586e;}
.as-section .as-learning-upgrade>a:focus-visible{outline:3px solid #38a8c5;outline-offset:3px;}
@media(max-width:760px){
 .as-section .as-learning-upgrade{align-items:stretch;flex-direction:column;gap:19px;margin-top:24px;padding:23px 20px;border-left-width:4px;}
 .as-section .as-learning-upgrade strong span:first-child{font-size:21px;}
 .as-section .as-learning-upgrade strong span:last-child{font-size:25px;line-height:1.45;}
 .as-section .as-learning-upgrade>a{width:100%;min-height:48px;font-size:14px;}
}