@font-face{font-family:Noto;src:url('/site-assets/fonts/NotoSansSC-Regular.otf') format('opentype');font-weight:400 500;font-display:swap}
@font-face{font-family:Noto;src:url('/site-assets/fonts/NotoSansSC-Bold.otf') format('opentype');font-weight:700 900;font-display:swap}
:root{--accent:#F73D66;--ink:#24181E;--muted:#6F666B;--faint:#8A8186;--soft:#F6F5F6;--line:#EEECEE;--pink:#FFE5EC;--mint:#E6F5EE;--green:#1F7A4D;font-family:Noto,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:#EEECEE;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button:disabled{opacity:.55;cursor:default}h1,h2,h3,p{margin:0}h2{font-weight:900}h1{font-size:clamp(25px,5vw,32px);line-height:1.4;font-weight:900;letter-spacing:-.5px}h2{font-size:18px;line-height:1.5}p{line-height:1.85;white-space:pre-line;overflow-wrap:anywhere}button,a{overflow-wrap:anywhere}:focus-visible{outline:3px solid #6A93D9;outline-offset:4px}[hidden]{display:none!important}
.product{max-width:600px;margin:auto;background:#fff;min-height:100dvh;position:relative;padding-bottom:calc(82px + env(safe-area-inset-bottom))}.app-header{height:68px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;font-size:16px;font-weight:900;gap:8px}.brand img{width:32px;height:32px}.website-link{font-size:12px;color:var(--muted);flex-shrink:0}main{padding:24px;min-height:60vh;outline:none}.app-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,600px);height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line);z-index:5}.app-nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:var(--muted);font-size:23px}.app-nav span{font-size:12px}.app-nav a[aria-current=page]{color:var(--accent);font-weight:700}.page-title{display:flex;flex-direction:column;gap:10px;margin:12px 0 24px}.eyebrow{font-size:12px;color:var(--faint);font-weight:700;letter-spacing:1px}.muted,.small,.footer-note{color:var(--muted)}.small{font-size:12px;line-height:1.65}.footer-note{text-align:center;font-size:12px;margin:32px 0 12px;line-height:1.9}.back{display:inline-flex;font-size:13px;color:var(--muted);padding:4px 0;margin-bottom:20px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:16px;font-weight:700;min-height:56px;padding:14px 22px;text-align:center;gap:8px}.btn.ghost{background:var(--soft);color:var(--ink)}.btn.white{background:#fff;color:var(--accent)}.btn.outline{background:transparent;color:#fff;border:1.5px solid #fff}.text-link{border:0;background:none;color:var(--accent);font-size:13px;font-weight:700;padding:8px 0}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.actions .btn{flex:1;min-width:125px}.pill{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:700;padding:4px 10px;background:rgba(255,255,255,.8);border-radius:99px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:28px 0 14px}.section-head a{color:var(--muted);font-size:12px}.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.topic-card{border-radius:24px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}.topic-icon{font-size:38px;line-height:1.1}.topic-card h2{font-size:20px}.topic-card p{font-size:12px;line-height:1.7;flex:1}.tone-0{background:#FFF2DC}.tone-1{background:var(--pink)}.tone-2{background:var(--mint)}.tone-3{background:#E8ECFA}.wish{border:1px solid var(--ink);background:white;border-radius:99px;padding:6px 12px;font-size:12px;font-weight:700}.card{padding:20px;border:1.5px solid var(--line);border-radius:24px;margin:18px 0;background:#fff}.card h2{margin-bottom:10px}.card p{font-size:14px}.route-list{padding-top:16px}.level-card{display:flex;gap:14px;position:relative;padding-bottom:16px}.route-dot{flex-shrink:0;border:2px solid var(--accent);border-radius:50%;width:30px;height:30px;font-size:13px;display:grid;place-items:center;margin-top:16px;color:var(--accent);background:#fff;z-index:1}.level-card:not(:last-child):before{content:'';width:2px;background:var(--line);position:absolute;left:14px;top:46px;bottom:-16px}.level-body{border-radius:24px;background:var(--pink);padding:20px;flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.level-card:nth-child(3n+2) .level-body{background:var(--mint)}.level-card:nth-child(3n) .level-body{background:#FFF2DC}.level-body h2{font-size:21px}.level-body p{font-size:13px}.level-card.locked .level-body{background:var(--soft)}.level-card.locked .small{color:var(--accent);font-weight:700}.people summary{font-size:14px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}.people summary span{font-size:11px;color:var(--muted)}.people-list{display:flex;flex-direction:column;gap:14px;margin-top:18px}.person{display:flex;gap:12px;align-items:flex-start}.avatar{width:38px;height:38px;background:var(--pink);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-weight:900;flex-shrink:0}.person .small{display:block}.person p{font-size:12px}.person b{font-size:14px}.previous-context{background:#FFF2DC;border-radius:18px;padding:20px}.previous-context p{font-size:14px;margin-top:8px}.scene-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.scene-top span{font-size:12px;color:var(--muted)}.scene-top .back{margin-bottom:14px}.progress,progress{accent-color:var(--accent);height:6px;width:100%;border:0;border-radius:99px;display:block}.progress::-webkit-progress-bar,progress::-webkit-progress-bar{background:var(--line);border-radius:99px}.progress::-webkit-progress-value,progress::-webkit-progress-value{background:var(--accent);border-radius:99px}.question-stem{font-size:16px;margin:22px 0}.question-prompt{color:var(--accent);margin:26px 0 16px;font-size:19px}.options{display:flex;flex-direction:column;gap:12px}.option{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1.5px solid var(--line);border-radius:20px;background:#fff;text-align:left;line-height:1.8;font-size:14px}.option>b{flex-shrink:0;font-size:16px;color:var(--muted)}.option[aria-pressed=true]{border-color:var(--accent);background:var(--pink)}.option[aria-pressed=true]>b{color:var(--accent)}.sticky-action{margin-top:28px;padding:12px 0;background:#fff}.sticky-action .btn{width:100%}.chosen-answer{display:flex;gap:12px;background:var(--soft);padding:16px;border-radius:20px;margin:10px 0 24px}.chosen-answer>span,.option-letter{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700}.chosen-answer p{font-size:14px;margin-top:4px}.rich-read{display:flex;flex-direction:column;gap:18px}.state-heading{padding:8px 0}.state-heading h2{font-size:30px;font-weight:900;line-height:1.45;margin:8px 0}.state-heading .eyebrow{color:var(--accent)}.ledger{background:#FCFBFA;border:1px solid var(--line);border-radius:20px;padding:0 20px}.ledger>div{padding:20px 0}.ledger>div+div{border-top:1px solid #E8E3DF}.ledger b{font-size:14px}.ledger p,.annotation p,.next-practice p{font-size:15px;margin-top:10px;line-height:1.9}.gain{color:var(--green)}.loss{color:#9C5D35}.annotation{padding:20px;background:var(--pink);border-radius:20px}.note-heading{display:flex;align-items:center;gap:10px;font-size:14px}.evil-avatar{background:var(--accent);color:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-weight:900}.evil-quote{background:var(--accent);color:#fff;border-radius:20px;padding:22px}.evil-quote>span{font-size:11px;opacity:.85;letter-spacing:1px}.evil-quote p{font-size:20px;line-height:1.65;font-weight:900;margin-top:10px}.next-practice{border-left:4px solid #48A37B;padding:2px 0 2px 16px;margin:4px 0 8px}.next-practice b{font-size:14px;color:var(--green)}.other-states{display:flex;flex-direction:column;gap:12px}.other-state{border:1px solid var(--line);border-radius:20px;overflow:hidden}.other-state summary{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;font-size:15px;font-weight:700;list-style:none}.other-state summary::-webkit-details-marker{display:none}.other-state .option-letter{background:#FFF2DC;color:var(--ink)}.other-state .expand{margin-left:auto;font-size:20px;color:var(--faint)}.other-state[open] .expand{transform:rotate(45deg)}.other-content{padding:0 16px 18px}.option-copy{background:var(--soft);padding:12px;border-radius:12px;font-size:13px;margin-bottom:12px}.compact .state-heading h2{font-size:23px}.compact .ledger p,.compact .annotation p,.compact .next-practice p{font-size:14px}.compact .evil-quote p{font-size:18px}.compact .rich-read{gap:14px}.choice-stats{margin:24px 0}.choice-stats h2{font-size:12px;color:var(--muted);margin-bottom:10px}.ratio-bar{display:flex;gap:3px;min-height:48px}.ratio{flex-basis:0;min-width:40px;padding:6px 3px;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;background:var(--soft);border-radius:10px;font-size:11px}.ratio.selected{background:var(--accent);color:#fff}.ending-mark{font-size:70px;color:var(--accent);text-align:center;margin:30px}.ending-copy{font-size:18px;line-height:2;white-space:pre-line}.clear-stamp{display:inline-block;border:2px solid var(--accent);color:var(--accent);padding:10px 16px;border-radius:50%;transform:rotate(-10deg);font-weight:900}.completion-heading{text-align:center;padding:20px 0}.reaction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reaction{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 8px;font-size:12px}.reaction.selected{background:var(--pink);border-color:var(--accent);color:var(--accent)}.review-steps,.menu{display:flex;flex-direction:column}.review-step,.menu-row,.progress-row{display:block;border:0;border-bottom:1px solid var(--line);padding:17px 0;background:#fff;text-align:left;font-size:14px;width:100%}.review-step{font-size:13px}.profile-card{background:var(--pink);padding:20px;border-radius:22px;display:flex;align-items:center;gap:16px}.avatar.big{width:58px;height:58px;background:#fff;font-size:24px}.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin:28px 0}.stats>*{display:flex;flex-direction:column;gap:6px;font-size:12px}.stats b{font-size:28px;color:var(--accent)}.stats span{color:var(--muted)}.menu{margin-bottom:30px}.favourite-card blockquote{margin:0 0 16px;color:var(--accent);font-size:19px;font-weight:700;line-height:1.8}.type-card{background:var(--pink);color:var(--ink);padding:28px;border-radius:24px;text-align:center;margin:20px 0}.type-code{letter-spacing:5px;font-size:13px;color:var(--accent);font-weight:700}.type-card h2{font-size:38px;margin:12px 0}.type-card p{margin-bottom:10px}.type-card .type-power,.type-card .type-cost{font-size:13px;color:var(--ink);margin:6px 0 0}.type-power b,.type-cost b{color:var(--accent)}
.bbti-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}.bbti-head .back{margin-bottom:0}
.bbti-tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--accent);background:#fff;border-radius:99px;padding:4px 10px}
.dimension summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.dimension summary::-webkit-details-marker{display:none}.dimension .axis-name{flex:1;font-size:18px;font-weight:700}.dimension .axis-name b{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}.dimension .expand{font-size:18px;color:var(--faint)}.dimension[open] .expand{transform:rotate(45deg)}.dimension .axis-label{color:var(--muted);font-size:12px}.dimension .axis-power b,.dimension .axis-cost b{color:var(--accent)}.axis-arrow{position:relative;height:18px;margin:2px 0 4px}.axis-arrow span{position:absolute;top:6px;transform:translateX(-50%)}.axis-arrow .from{width:8px;height:8px;border:2px solid var(--accent);border-radius:50%;background:#fff;box-sizing:content-box}.axis-arrow .line{border-top:2px dashed #F3A6B8}.axis-arrow .to{border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-top:-1px}.dimension .next-practice b{color:var(--green)}.fragment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 18px;margin:24px 0 8px}.fragment-grid b{font-size:14px}.fragment-grid progress{margin:10px 0}.axis-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:18px 0 8px}.dimension p{margin-top:14px}.empty{text-align:center;padding:42px 16px;color:var(--muted);font-size:14px}.empty>span{font-size:36px;color:#D7BBC3;display:block;margin-bottom:12px}.loading{padding:48px 0;color:var(--muted);text-align:center}.skeleton{height:18px;border-radius:12px;background:linear-gradient(90deg,#F1EDEF,#FAF7F8,#F1EDEF);background-size:200%;animation:shimmer 1.5s infinite;margin:18px 0}.skeleton.large{height:160px}.skeleton.short{width:60%}@keyframes shimmer{to{background-position:-200%}}.form{display:flex;flex-direction:column;gap:18px}.form label{display:flex;flex-direction:column;gap:9px;font-size:13px;font-weight:700}.form input:not([type=checkbox]){width:100%;min-width:0;border:1.5px solid #E1DBDE;border-radius:20px;padding:15px;background:#fff;color:var(--ink);font-size:16px}.form .consent{display:flex;flex-direction:row;align-items:flex-start;font-size:12px;font-weight:400;line-height:1.7}.consent input{margin:3px 5px 0 0;accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}.consent a{text-decoration:underline}.code-row{display:flex;gap:10px;align-items:stretch}.code-row .btn{font-size:12px;min-width:116px;padding:12px}.form-status{font-size:13px;color:var(--accent);min-height:20px}.captcha-card{background:var(--soft);padding:16px;border-radius:16px;display:flex;flex-direction:column;gap:12px}.danger{background:#FFF2F2;color:#A33333;padding:18px;border-radius:16px;font-size:14px}.site-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%);padding:14px 20px;background:var(--ink);color:white;border-radius:16px;max-width:min(90vw,540px);width:max-content;z-index:30;font-size:14px;line-height:1.65;box-shadow:0 8px 30px #24181E22}.offline-notice{background:#FFF2DC;padding:12px 20px;color:#755029;font-size:13px}.share-dialog{border:0;border-radius:24px;width:min(90vw,420px);padding:18px;max-height:90dvh;overflow:auto}.share-dialog::backdrop{background:#24181E88}.share-dialog .share-close{position:absolute;top:8px;left:8px;z-index:1;background:#ffffffdd}.share-dialog.full{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:46px 12px 18px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:10px}.share-dialog.full img{max-height:76dvh;object-fit:contain}.share-dialog.full .small{text-align:center}.share-dialog img{width:100%;border-radius:16px}.share-dialog .btn{width:100%;margin-top:12px}
@media(max-width:360px){main{padding:20px}.app-header{padding:12px 20px}.topic-grid{gap:10px}.topic-card{padding:14px}.topic-card h2{font-size:18px}.code-row .btn{min-width:100px;padding:10px}.state-heading h2{font-size:26px}}
@media(min-width:761px){.product{margin:24px auto;min-height:calc(100dvh - 48px);border-radius:28px;box-shadow:0 15px 60px #24181E12}.app-nav{border-radius:20px 20px 0 0}.app-header{height:76px}main{padding:32px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
.stance-options{display:flex;flex-direction:column;gap:10px}.stance-options+p{margin-top:12px}

/* 10.29 interaction specification, pp. 3–6: one 430px web app shell. */
:root{background:#fff}
body{height:100dvh;min-height:100dvh;overflow:hidden;background:#fff}body:before,body:after{position:fixed;content:'✦';color:#F73D6644;font-size:80px;z-index:-1;pointer-events:none}body:before{left:12%;top:12%;transform:rotate(15deg)}body:after{right:12%;bottom:14%;color:#F0C75466;font-size:110px;transform:rotate(-12deg)}
.product{width:min(100%,430px);height:100dvh;min-height:0;margin:0 auto;padding:0;display:flex;flex-direction:column;overflow:hidden;transform:translateZ(0);border-radius:0}
main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px;scrollbar-width:thin;outline:none!important}
h1{font-size:28px}.app-header{height:64px;min-height:64px;padding:12px 22px;background:var(--accent);color:white;border:0}.brand{font-size:16px;gap:8px}.brand img{width:30px;height:30px}.profile-link{border-radius:50%;height:34px;width:34px;display:grid;place-items:center;background:white;color:var(--accent);font-weight:700;font-size:12px}
.app-nav{position:static;transform:none;width:100%;min-height:calc(68px + env(safe-area-inset-bottom));height:calc(68px + env(safe-area-inset-bottom));border-radius:0;flex-shrink:0}.app-nav a{font-size:22px}.app-nav span{font-size:11px}
.site-toast{width:max-content;max-width:calc(min(100vw,430px) - 32px);font-size:13px;top:24px}.share-dialog{max-width:calc(min(100vw,430px) - 28px);max-height:calc(100% - 28px);border-radius:22px}.share-dialog:modal{position:fixed;inset:0;margin:auto}.share-dialog::backdrop{background:transparent}
.product:has(.share-dialog[open]):after{content:'';position:fixed;inset:0;background:#24181E88;z-index:9;pointer-events:none}
.sticky-action{position:sticky;bottom:-22px;margin:24px -4px -4px;padding:14px 4px calc(12px + env(safe-area-inset-bottom));z-index:3;background:linear-gradient(#ffffffee,#fff 18%)}.sticky-action .text-link{display:block;text-align:center;width:100%;margin-top:8px}
.scene-art{width:100%;aspect-ratio:16/9;background:var(--scene-color,#FFF2DC);border-radius:18px;overflow:hidden}.scene-art img{width:100%;height:100%;object-fit:cover;display:block}.topic-card{padding:0;gap:0;border:1px solid var(--line);overflow:hidden;background:white}.topic-card .scene-art{border-radius:0;aspect-ratio:1.35}.topic-copy{padding:14px;width:100%}.topic-card h2{font-size:16px}.topic-card p{margin:7px 0;font-size:11px}.topic-copy progress{margin-top:8px}.topic-copy b{font-size:9px}.coming-topic{background:var(--soft)}.coming-topic .scene-art{filter:grayscale(1);opacity:.7}
.resume-card{display:block;background:var(--pink);padding:14px;border-radius:16px;font-size:13px;font-weight:700;margin-bottom:18px}.fragment-card{display:block;background:linear-gradient(120deg,#fff8ed,#fff2f6);margin-top:4px}.fragment-card h2{font-size:17px}.fragment-card .section-head{margin:0 0 18px}.fragment-strip{display:flex;gap:10px;align-items:center;margin-bottom:14px}.fragment-avatar{font-size:30px;color:var(--accent);padding-right:8px}.fragment{flex:1;text-align:center;font-size:10px}.fragment b{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 6px;background:linear-gradient(to top,#f9b9ca var(--fill),#EEECEE var(--fill));border-radius:12px;color:#fff;font-size:22px}.fragment.earned b{background:var(--accent)}
.level-body{background:var(--scene-color)!important;position:relative;padding:18px}.level-body .scene-art{height:62px;width:80px;align-self:flex-end;border:1px solid #ffffff80;border-radius:12px}.level-body h2{font-size:20px}.route-dot{border-color:#D6CBD0;width:26px;height:26px;margin-top:18px;background:#fff}.level-card:not(:last-child):before{left:12px;background:none;border-left:2px dashed #DFD7DB;top:44px;bottom:-18px}.level-card.cleared .route-dot{background:var(--accent);color:white;border-color:var(--accent)}.level-card.current .route-dot{border-color:var(--accent);box-shadow:0 0 0 5px var(--pink)}.level-card.coming .level-body{background:var(--soft)!important;color:var(--muted)}.level-card.coming .scene-art{display:none}.trial-banner{margin:0 0 20px;background:#FFF2DC;border-radius:12px;padding:10px 14px;font-size:11px;color:#825E31}.people-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.tags{display:flex;gap:8px;margin:6px 0}
.scene-controls{display:grid;grid-template-columns:40px 1fr auto auto;gap:8px;align-items:center;position:sticky;top:-22px;background:white;z-index:4;padding:12px 0}.scene-controls b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-controls progress{grid-column:1/-1;margin:4px 0 0}.scene-controls .text-link{font-size:11px}.icon-btn{border:1.5px solid var(--line);background:#fff;border-radius:50%;width:40px;height:40px;min-width:40px;font-size:12px;padding:0;display:grid;place-items:center}.state-preview{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.state-preview small{font-size:10px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.other-state .pill{font-size:9px;align-self:center}.other-state .expand:after{content:'展开';font-size:10px;margin-left:3px}.other-state[open] .expand{transform:none;font-size:0}.other-state[open] .expand:after{content:'收起';font-size:10px}.submission-entry{padding:18px;margin:24px 0;border:1px dashed #E7B4C1;border-radius:16px;background:#fff9fb}.submission-entry b,.submission-entry h2{font-size:14px}.submission-entry p{font-size:12px}.submission-entry .text-link{font-size:12px}.completion-heading .scene-art{max-height:160px;margin-bottom:16px}.completion-heading h1{font-size:25px;margin-top:12px}
.sheet-overlay{position:fixed;inset:0;z-index:20;background:#24181E77;display:flex;align-items:flex-end}.bottom-sheet{position:relative;width:100%;max-height:88%;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:26px 22px calc(24px + env(safe-area-inset-bottom));outline:none;box-shadow:0 -10px 40px #24181E18}.bottom-sheet>.btn{width:100%;margin-top:14px}.bottom-sheet>.text-link{display:block;text-align:center;width:100%}.bottom-sheet h1{font-size:24px}.sheet-close{position:absolute;right:16px;top:14px}.sheet-close.left{right:auto;left:16px}.sheet-overlay .page-title{padding-right:18px}
.form textarea{resize:vertical;font:inherit;font-size:14px;border:1px solid #E1DBDE;border-radius:14px;padding:14px;line-height:1.8;width:100%;min-height:160px}.starters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.starters .small{color:var(--muted)}.starters button{border:1px solid var(--line);font-size:11px}.form .tags{gap:12px}.form .tags label{display:flex;flex-direction:row;align-items:center;font-size:11px}.form .tags input{width:auto!important}.form input.otp-input{font-family:monospace;font-size:36px;letter-spacing:15px;text-align:center;padding-left:24px}.form input.invalid{border-color:#D83448;color:#D83448;background:#fff3f4}.counter{text-align:right}
.splash{position:fixed;inset:0;background:var(--accent);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:25px;font-weight:900;gap:18px}.splash img{width:100px;height:100px}.phrase-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:30px 0}.phrase{border:1px solid #e9dce1;background:white;border-radius:30px;padding:10px 16px;font-size:15px;transform:rotate(-3deg)}.phrase:nth-child(3n){transform:rotate(4deg)}.phrase.thought{font-size:12px;border-style:dashed}.phrase.selected{background:var(--accent);color:#fff;border-color:var(--accent)}.guide-feedback{border-radius:16px;background:var(--pink);padding:16px;font-size:13px}.guide-page{position:relative}.skip{float:right}.guide-dots{display:flex;justify-content:center;gap:7px;margin:30px}.guide-dots i{width:6px;height:6px;background:#DDD0D6;border-radius:50%}.guide-dots .active{width:20px;background:var(--accent);border-radius:8px}.comparison{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);min-height:340px;user-select:none;touch-action:pan-y}.comparison-pane{position:absolute;inset:0;padding:18px 20px 26px}.comparison-pane.after{background:#FFE5EC;padding:0}.comparison-pane.after .comparison-body{position:absolute;inset:0;padding:18px 20px 26px;transform:translateX(var(--split,94%))}.comparison-pane.before{background:#F6F5F6;clip-path:inset(0 6% 0 0)}.comparison-tag{display:block;font-size:11px;letter-spacing:2px;font-weight:700;color:var(--faint);margin-bottom:8px}.comparison-pane.after .comparison-tag{color:var(--accent);text-align:right}.comparison-row{display:flex;gap:12px;align-items:flex-start;height:64px;padding:9px 0;border-bottom:1px solid #24181E0f}.comparison-row:last-child{border-bottom:0}.comparison-row b{flex:none;width:42px;padding-top:2px;font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}.comparison-pane.after .comparison-row b{color:var(--accent)}.comparison-row span{min-width:0;font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.comparison-divider{position:absolute;top:0;bottom:0;left:var(--split,94%);width:0;border-left:2px solid #fff;z-index:3;pointer-events:none}.comparison-knob{position:absolute;top:calc(50% - 18px);left:-18px;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 4px 14px #24181E2e;display:grid;place-items:center;font-size:14px;color:var(--muted);animation:comparison-nudge 1.2s ease-in-out .9s 2}.comparison.touched .comparison-knob{animation:none}.comparison.slim .comparison-pane.after .comparison-tag,.comparison.slim .comparison-pane.after .comparison-row{visibility:hidden}.comparison{cursor:ew-resize}.comparison[data-drag]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.comparison-knob{transition:transform .12s ease,box-shadow .12s ease}.comparison.dragging .comparison-knob{transform:scale(1.08);box-shadow:0 8px 20px #24181E45}.comparison-reveal{position:absolute;left:0;right:0;bottom:12px;z-index:4;text-align:center;font-size:14px;font-weight:700;color:var(--accent);pointer-events:none}.comparison-hint{text-align:center;margin-top:10px}@keyframes comparison-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}55%{transform:translateX(5px)}75%{transform:translateX(-2px)}}.dictionary{padding:22px;border:1px solid #E8D9DB;border-radius:10px;background:#FFFCF7;font-size:14px}.dictionary p+p{margin-top:20px}.guide-steps{padding-left:25px}.guide-steps li{padding:14px 0}.guide-steps b{color:var(--accent);font-size:20px}.guide-steps p{font-size:13px}
.card-deck{padding:12px 10px 40px;display:flex;flex-direction:column;gap:12px}.deck-card{padding:22px;border-radius:22px;box-shadow:0 7px 15px #24181E12;transform:rotate(-4deg)}.deck-card:nth-child(2n){transform:rotate(4deg);margin-left:20px}.deck-card h2{font-size:23px;margin:12px 0}.deck-card p{font-size:13px;margin-bottom:15px}.deck-card b{font-size:13px}.deck-card.dim{background:var(--soft);color:#A89CA2;padding:15px 22px}.deck-card.dim h2{font-size:18px;margin:7px}.deck-more{text-align:center;color:var(--muted);font-size:13px;padding:16px}.trial-scene{display:block;box-shadow:0 5px 18px #24181E0c}.trial-scene .scene-art{margin:16px 0}.trial-scene h2{font-size:23px}.trial-scene .section-head{margin-bottom:0}.welcome-cards{position:relative;height:400px;margin:12px 8px 30px}.welcome-example{position:absolute;background:#FFF2DC;border:1px solid #fff;border-radius:20px;padding:24px;box-shadow:0 8px 26px #24181E16;transform:rotate(var(--tilt));width:92%;top:10px}.welcome-example:nth-child(2){top:70px;left:8%;background:#E6F5EE}.welcome-example:nth-child(3){top:140px;background:#FFE9DE}.welcome-example:nth-child(4){top:210px;left:8%;background:#FFE5EC}.welcome-example h2{font-size:16px;margin:12px 0}.welcome-example p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.icp{display:block;text-align:center;font-size:10px;margin-top:20px}
.community-preview{position:relative;min-height:600px;padding:16px 0}.community-blur{position:absolute;inset:0;filter:blur(5px);opacity:.45;pointer-events:none}.bubble-cloud{position:relative;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.bubble-cloud span{border:1px solid #F0CDDA;background:#fff4f8;box-shadow:0 4px 16px #24181E0a;border-radius:25px;padding:8px 12px;font-size:11px;transform:rotate(-5deg)}.bubble-cloud span:nth-child(2n){transform:rotate(6deg);background:#fff8df}.community-callout{position:relative;margin:45px 0;text-align:center;padding:28px 20px}.community-callout h2{font-size:23px;margin:16px 0}.community-callout .btn{margin-top:22px;width:100%}
.member-benefits{border-radius:24px;padding:26px;background:linear-gradient(130deg,#F9859C,#F5A58F);color:white;position:relative;overflow:hidden}.member-benefits h2{font-size:23px;max-width:240px;margin-bottom:16px}.member-benefits p,.member-benefits li{font-size:12px;line-height:1.9}.member-benefits ul{padding-left:18px;margin:20px 0}.benefit-star{position:absolute;right:16px;top:0;font-size:90px;opacity:.35}.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;opacity:.5;filter:grayscale(.7)}.price-card{border:1px solid var(--line);background:var(--soft);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}.price-card b{font-size:13px}.price-card strong{font-size:23px}.price-card del{font-size:12px}.bbti-unlock{background:var(--accent);color:#fff;text-align:center;border-radius:24px;padding:28px 22px}.bbti-unlock .page-title{margin-top:0}.bbti-unlock h1{color:#fff}.bbti-unlock .eyebrow{color:#ffffffcc}.bbti-unlock .muted{color:#ffffffd9}.bbti-unlock .type-code-big{font-size:52px;font-weight:900;letter-spacing:12px;margin:26px 0 18px}.bbti-unlock .type-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}.bbti-unlock .type-cell{border:1px solid #ffffff88;border-radius:14px;padding:12px 4px}.bbti-unlock .type-cell b{display:block;font-size:24px}.bbti-unlock .type-cell span{font-size:11px;opacity:.9}.bbti-unlock .actions{display:flex;flex-direction:column;gap:12px;margin:0 0 10px}.bbti-unlock .actions .btn{width:100%}.bbti-unlock .text-link{color:#fff;display:block;margin:6px auto 0}.fragment-grid{grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:761px){body{display:grid;place-items:center}.product{margin:0;height:calc(100dvh - 48px);border-radius:32px;box-shadow:0 15px 60px #F73D6620}.app-header{height:64px}main{padding:22px}.site-toast{top:44px}}
@media(min-width:761px) and (min-height:981px){.product{height:932px}.site-toast{top:calc((100dvh - 932px)/2 + 20px)}}
@media(max-width:360px){main{padding:18px}.topic-copy{padding:10px}.topic-card h2{font-size:14px}.fragment-strip{gap:6px}.fragment b{width:32px;height:32px}.scene-controls{top:-18px}.sticky-action{bottom:-18px}.form input.otp-input{letter-spacing:10px}}
/* A13 (issue 41): the verification code is six boxes instead of one letter-spaced input. */
.otp-field{display:flex;flex-direction:column;gap:10px;margin:4px 0}.otp-label{font-size:13px;font-weight:700;color:var(--ink)}.otp-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.otp-cell{width:100%;height:52px;padding:0;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:700;border:1.5px solid #E1DBDE;border-radius:14px;background:#fff;color:var(--ink)}.otp-cells.invalid .otp-cell{border-color:#D83448;color:#D83448;background:#fff3f4}.otp-actions{justify-content:flex-end}
/* C2 (issue 29): the node title pins under the top bar once the stem scrolls away. */
.question-pin{position:sticky;top:24px;z-index:4;display:none;align-items:center;gap:10px;margin:0 -22px;padding:10px 22px;background:#fffcfd;border-bottom:1px solid var(--line);font-size:12px}.question-pin.visible{display:flex}.question-pin b{flex-shrink:0;font-size:11px;font-weight:700;color:var(--accent)}.question-pin span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
@media(max-width:360px){.question-pin{margin:0 -18px;padding:10px 18px}}
/* 01: on desktop the bottom sheets and dialogs stay inside the 430px shell. */
@media(min-width:761px){.sheet-overlay{top:0;bottom:0;left:50%;right:auto;transform:translateX(-50%);width:min(100%,430px)}}
/* 11: the community tab is grey with a 「待开放」 badge and still opens E8. */
.app-nav a[data-tab=community]{color:var(--faint);position:relative}.nav-badge{font-style:normal;font-size:8px;line-height:1;padding:2px 4px;border-radius:6px;background:var(--soft);color:var(--muted);margin-top:2px}
/* 06: A4 词典页与 A4-b 四步竖线，文案按 10.29 Demo 定稿。 */
.dict{padding:22px;border:1px solid #E8D9DB;border-radius:12px;background:#FFFCF7}.dict-head{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink)}.dict-head b{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:34px;letter-spacing:3px;line-height:1.2}.dict-head i{font-style:normal;font-size:14px;color:var(--muted);letter-spacing:1px}.dict-head em{font-style:normal;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:1px 5px}.dict-sense{display:flex;gap:8px;padding:14px 0;border-bottom:1px dashed #EADFD9}.dict-sense>span{font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0}.dict-sense p{font-size:14px;line-height:1.8}.dict-ex{padding:16px 0;font-size:14px;line-height:1.9;border-bottom:1px dashed #EADFD9}.dict-ex span{display:inline-block;padding-left:1.1em}.dict-line{display:flex;gap:8px;padding:12px 0;font-size:13px;line-height:1.8;border-bottom:1px dashed #EADFD9}.dict-line:last-child{border-bottom:0}.dict-line>b{flex-shrink:0;color:var(--accent)}.dict-line s{color:#B9B2B6;margin-right:8px}.dict-para{display:block;margin-top:6px}
.guide-flow{position:relative;margin:20px 0 8px}.guide-flow:before{content:"";position:absolute;left:10px;top:10px;bottom:22px;width:1px;background:var(--line)}.guide-step{display:flex;gap:14px;padding-bottom:16px;position:relative}.guide-step>i{flex-shrink:0;width:21px;height:21px;border-radius:50%;background:#fff;border:1px solid var(--accent);color:var(--accent);font-style:normal;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}.guide-step b{font-size:15px}.guide-step p{font-size:13px;line-height:1.7;color:#4A3F45;margin-top:2px}.guide-old{color:#B9B2B6}.guide-slogan{font-size:24px;font-weight:900;line-height:1.4;margin-top:18px}.guide-slogan em{font-style:normal;color:var(--accent)}
/* 19: the current chapter card is enlarged with a bigger illustration and a soft shadow. */
.level-card.current .level-body{padding:22px;box-shadow:0 10px 26px #24181E1A}.level-card.current .level-body h2{font-size:23px}.level-card.current .level-body .scene-art{height:80px;width:104px}

/* ============================================================
   10.29 基线对齐（需求漂移批次 1）
   每条只服务于一个用例，见 docs/漂移报告_20261029.md
   ============================================================ */
/* TC-A1-02 启动页：径向渐变底 + 蝙蝠底纹 + logo 176 + 标题 14/500/字距 6/86% */
.splash{background:radial-gradient(105% 60% at 50% 41%,#FF86A3,#FA5079 34%,#F23F69 62%,#D7244E);overflow:hidden;position:fixed;inset:0;justify-content:flex-start}
.splash:before{content:"";position:absolute;width:690px;height:690px;left:-150px;top:540px;transform:rotate(-10deg);opacity:.08;background:url("/site-assets/logo_white.svg") center/contain no-repeat}
.splash:after{content:"";position:absolute;left:50%;top:362px;width:360px;height:360px;margin-left:-180px;border-radius:50%;background:radial-gradient(circle,#FFFFFF26 0%,transparent 68%)}
.splash img{position:absolute;left:50%;top:265px;width:176px;height:auto;margin-left:-88px;filter:drop-shadow(0 12px 28px rgba(140,8,45,.26))}
.splash span{position:absolute;left:0;right:0;bottom:58px;font-size:14px;font-weight:500;letter-spacing:6px;color:rgba(255,255,255,.86)}
/* TC-A1-03 logo 300ms 92%→100% 淡入，离场 200ms 淡出 */
.splash-logo{animation:splash-logo 300ms ease-out both}
.splash-out{opacity:0;transition:opacity 200ms linear}
@keyframes splash-logo{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
/* TC-A2-07 拖到 55% 后出现主色文字，省略号闪烁 */
.comparison-reveal{color:var(--accent);font-weight:700}
.comparison-reveal .dots{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
/* TC-A2-09 四步竖线依次出现，每步间隔 0.6s，最后出标语 */
.guide-step{animation:guide-in .45s both}
.guide-step:nth-child(1){animation-delay:0s}
.guide-step:nth-child(2){animation-delay:.6s}
.guide-step:nth-child(3){animation-delay:1.2s}
.guide-step:nth-child(4){animation-delay:1.8s}
.guide-slogan{animation:guide-in .45s both;animation-delay:2.4s}
@keyframes guide-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.guide-step,.guide-slogan,.splash-logo,.comparison-reveal .dots{animation:none}}
/* TC-A5-03 / TC-A5-04 卡牌堆：5 种大小、互相压叠、左右伸出屏幕、上下边缘渐隐 */
.card-deck{padding:6px 0 40px;gap:0;overflow:hidden;mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 93%,transparent 100%)}
.deck-card{width:86%;margin:0 auto}
.deck-card.bright{position:relative;z-index:3;width:88%;box-shadow:0 12px 30px rgba(247,61,102,.26),0 10px 30px rgba(36,24,30,.10)}
.deck-card.dim{width:104%;margin:-10px auto 0;padding:16px 26px 34px;min-height:132px}
.deck-card.dim:nth-of-type(3){width:96%;transform:rotate(-6deg)}
.deck-card.dim:nth-of-type(4){width:88%;transform:rotate(5deg)}
.deck-card.dim:nth-of-type(5){width:100%;transform:rotate(-3deg)}
.deck-card.dim:nth-of-type(6){width:84%;transform:rotate(6deg)}
.deck-card.dim:nth-of-type(7){width:94%;transform:rotate(-5deg)}
.deck-card.dim h2{font-size:17px}
.deck-more.dashed{background:transparent;border:1.5px dashed #D9CFD3;box-shadow:none;text-align:center;color:var(--muted);font-size:13px;padding:20px;width:86%;margin:6px auto 0;transform:rotate(2deg)}
/* TC-A12-02/03/04 欢迎页：品牌行、白卡、第二行主色 */
.welcome-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;margin:2px 0 14px}
.welcome-brand img{width:32px;height:32px}
.welcome-example,.welcome-example:nth-child(2),.welcome-example:nth-child(3),.welcome-example:nth-child(4){background:#fff}
.welcome-example .pill{background:var(--pink);color:var(--accent)}
.welcome-slogan{margin:14px 0 6px}
.welcome-slogan h1{font-size:24px;font-weight:900;line-height:1.4}
.welcome-slogan p{color:var(--accent);font-size:22px;font-weight:900;line-height:1.4}
/* TC-C3-02 选项原文默认 34 字，可展开 */
.chosen-body.clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* TC-C3-04 会员标签是去 B5/B12 的入口，不是展开开关 */
.other-state a.pill{text-decoration:none;color:#B0678A;background:var(--pink)}
/* TC-C4-01 通关页顶部主色色块：插图 + 右下角印章 */
.completion-heading{background:var(--accent);color:#fff;border-radius:24px;padding:18px;text-align:left}
.completion-art{position:relative;border-radius:16px;overflow:hidden}
.completion-art .scene-art{max-height:160px;margin:0;border-radius:16px}
.completion-art .clear-stamp{position:absolute;right:10px;bottom:10px;background:#fff;font-size:12px;padding:8px 12px}
.completion-heading p.small{color:rgba(255,255,255,.86);margin-top:14px}
.completion-heading h1{font-size:25px;margin-top:4px;color:#fff}
/* TC-C4-05 通关页恶女语录卡用奶油色 */
.evil-quote.cream{background:#FFF2DC;color:var(--ink)}
.evil-quote.cream>span{color:#9C7A46;opacity:1}
/* TC-C4-09 下一关卡片：底色=下一关颜色、插图、关卡号与免费/会员标签、挑战 CTA */
.next-scene{display:flex;align-items:center;gap:14px;background:var(--scene-color,#FFF2DC);border-radius:20px;padding:14px;margin:22px 0 6px;color:inherit}
.next-scene .scene-art{width:76px;height:76px;flex-shrink:0;margin:0;border-radius:14px}
.next-scene h2{font-size:18px;margin:6px 0 2px}
.next-scene b{color:var(--accent);font-size:14px}
/* TC-C3-09 解读出现时约 0.3 秒展开动效 */
.rich-read{animation:read-in .3s ease-out both}
@keyframes read-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.rich-read{animation:none}}
/* TC-A5C-01 页头主题名小字用主色 */
.eyebrow.accent{color:var(--accent)}
/* TC-C4-06 反应占比：满 30 人才画条，不满只标「已选」 */
.reaction{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.reaction .picked{font-style:normal;font-size:10px;color:var(--accent)}
.reaction .ratio-bar{display:block;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.reaction .ratio-bar b{display:block;height:100%;background:var(--accent)}
.reaction small{font-size:10px;color:var(--muted)}
/* TC-B12-02/03/04/07 + TC-B5-05 会员页：付款未开通用独立状态样式；开通后一横三竖 */
.pay-notice{background:#FFF6D9;color:#7A5A12;border:1px solid #F2E2AE;border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.7;margin:18px 0}
.price-lock{background:var(--soft);color:var(--muted);font-size:11px}
.price-zone{display:flex;flex-direction:column;gap:12px;margin:12px 0 10px}
.price-zone.disabled{background:var(--soft);border:1.5px dashed #D9CFD3;border-radius:20px;padding:14px;opacity:.85}
.price-zone.disabled .price-card{filter:grayscale(.7);opacity:.6}
.price-intro .price-card{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:var(--pink);flex-direction:row;justify-content:space-between}
.price-intro .price-card b{font-size:15px}
.price-intro .price-card strong{font-size:22px}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.price-grid .price-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:14px}
.price-card strong{font-size:19px;color:var(--accent)}
.price-card .early{font-size:10px;color:#9C7A46;background:#FFF2DC;border-radius:99px;padding:2px 8px}
.price-card del{font-size:11px;color:var(--faint)}
.sticky-action .btn.ghost[disabled]{opacity:.55}
/* TC-B5-01 会员权益卡：左上 #FF7593 → #F73D66 → 右下 #E5345E */
.member-benefits{background:linear-gradient(135deg,#FF7593 0%,#F73D66 52%,#E5345E 100%)}
/* TC-C4-07 通关页步骤格点开 C5 并定位 */
button.review-step{appearance:none;background:#fff;font:inherit;color:inherit;cursor:pointer}
.review-step.focus{background:var(--pink)}
.review-step summary{cursor:pointer;list-style:none}
.review-step summary::-webkit-details-marker{display:none}
.review-step p{padding:0 0 10px}
/* 需求漂移批次 4（E1–E11 / A15–A18）。只补基线新要求用到的样式，不改既有规则。 */
/* E1-01/02：主色色块 + 白卡；蝙蝠头像用同一份剪影做遮罩，按 avatarKey 上色。 */
.me-hero{background:var(--accent);margin:0 0 18px;padding:22px 0 54px;border-radius:0 0 26px 26px}
.me-card{background:#fff;border-radius:22px;margin:0 16px -44px;padding:18px;display:flex;align-items:center;gap:16px;box-shadow:0 8px 24px #24181e14}
.me-who{display:flex;flex-direction:column;gap:6px;min-width:0}
.me-nick{display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none}
.me-nick h1{margin:0;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.me-nick .pencil{color:var(--faint);font-size:14px}
.me-state{font-size:13px;color:var(--muted)}
/* TC-E1-01 / D-14：手机号只显示中间 4 位打码（138****8888），等宽数字更好读。 */
.me-phone{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.avatar.bat{background:var(--avatar-color,#F73D66);-webkit-mask:url(/assets/brand/bat_round.svg) center/78% no-repeat;mask:url(/assets/brand/bat_round.svg) center/78% no-repeat;border-radius:0}
.avatar.big.bat{width:58px;height:58px}
/* E1-03：练习足迹统计卡（4 列），语录 / 出过的招可点。 */
.me-stats{margin-top:56px}
.me-stats .stats{grid-template-columns:repeat(4,1fr);margin:0}
.me-stats .stats a{text-decoration:none;color:inherit}
/* E1-04：碎片卡与首页同一份（views.fragments）。E1-05：会员卡片。 */
.me-hero+.me-stats{margin-top:60px}
.member-card{display:flex;flex-direction:column;gap:10px}
.member-card h2{margin:0;font-size:19px;line-height:1.5}
.me-delete{margin:22px 0 8px;text-align:center;border-bottom:0;color:var(--faint);font-size:13px}
.records{display:flex;flex-direction:column}
/* E2：语录用荧光笔底纹当标题，下面一行小字写来源和收藏日期。 */
.favourite-card blockquote.highlight{background:linear-gradient(transparent 58%,#ffe98a 58%,#ffe98a 92%,transparent 92%);padding:0 2px;cursor:pointer}
.fav-source{margin:0 0 12px}
/* E7：客服条目 +「复制」按钮；常见问题 7 条。 */
.support-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}
.support-row b{grid-column:1;font-size:15px;overflow-wrap:anywhere}
.support-row .text-link{grid-row:1/3;grid-column:2}
.faq-item{border-bottom:1px solid var(--line);padding:14px 0}
.faq-item summary{cursor:pointer;font-weight:700}
.faq-item p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.8}
/* E9：关于我们。 */
.about-head{display:flex;align-items:center;gap:14px;margin:16px 0}
.about-head img{width:56px;height:56px}
.about-head h1{margin:0;font-size:21px}
.about-head p{margin:2px 0 0}
.about-footer{margin:26px 0 10px;color:var(--faint)}
.about-footer a{color:var(--faint)}
/* E10 / E11：筛选条与出过的招卡片；故事用浅粉底区分。 */
.filter-bar{display:flex;gap:8px;margin:0 0 16px}
.filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-size:13px;color:var(--muted)}
.filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.move-card{display:flex;flex-direction:column;gap:8px}
.move-card.story{background:#FFF3F6;border-color:#FFD9E4}
.move-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.move-card p{margin:0}
/* E4 / E5 / E6：注销说明与结果页的删除清单。 */
.danger-list{margin:0 0 12px;padding-left:18px;color:var(--ink);line-height:2}
/* A17：添加到桌面弹窗的两个标签和步骤。 */
.install-tabs{display:flex;gap:8px;margin:0 0 12px}
.install-steps ol{margin:0 0 12px;padding-left:20px;line-height:2}
.install-limit{color:#A2571C;background:#FFF4E5;border-radius:12px;padding:10px 12px;margin:0 0 12px}
/* A18-04：加载超过 1 秒补一个小圆圈加载动画。 */
.slow-spinner{width:26px;height:26px;margin:26px auto;border-radius:50%;border:2px solid var(--pink);border-top-color:var(--accent);animation:slow-spin .9s linear infinite}
@keyframes slow-spin{to{transform:rotate(360deg)}}
.form input:not([type=checkbox]):disabled{background:#F3F1F2;border-color:#EAE5E8;color:#8A8186;cursor:default}

/* 10.29 p24: the light toast slides down from the top, stays 2s, one at a time. */
.site-toast{animation:site-toast-in .22s ease-out}
@keyframes site-toast-in{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
/* B1-01 / G-19: only the home top bar is coral with the white logo; other pages use a white bar. */
.app-header.plain{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.app-header.plain .profile-link{background:var(--pink);color:var(--accent)}
/* B1-02: the resume card carries the scene's placeholder thumbnail. */
.resume-card{display:flex;align-items:center;gap:12px}
.resume-art{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:var(--scene-color,#FFF2DC)}
/* B1-03: the locked "?" avatar carries a lock icon. */
.fragment-avatar{display:inline-flex;align-items:center;gap:4px}
.fragment-avatar svg{width:14px;height:14px}
/* B1-06: the topic card's own label. */
.topic-copy .pill{margin-bottom:6px}

/* ---- TC-G-16/G-17/G-18 视觉口径对齐（p6） ---- */
main{padding:20px}
.page-title h1{font-size:26px;font-weight:900;line-height:1.35}
.page-title h1{letter-spacing:0}
.card{border-radius:24px;padding:18px;margin:14px 0}
.card h2{font-size:19px;font-weight:900;line-height:1.5}
.card p,.rich-read p,.option span{font-size:15px;line-height:1.8}
.small{font-size:12px;line-height:1.8}
.btn{border-radius:999px;font-size:17px;font-weight:700;min-height:56px}
.btn.ghost{border-radius:999px}
.pill{border-radius:999px;font-size:11px;font-weight:700}
.option{border-radius:20px}
.form input:not([type=checkbox]),.form textarea{border-radius:20px}
.bottom-sheet{border-radius:28px 28px 0 0}
.icon-btn{border-radius:50%;width:40px;height:40px;min-width:40px}
.sticky-action{padding:12px 0 24px}
.chosen-answer,.annotation,.ledger,.evil-quote,.other-state{border-radius:24px}
.wish,.nav-badge{border-radius:999px}
.section-head h2{font-size:19px;font-weight:900}

/* UI-056 选主题页灰卡锁图形（替换 emoji） */
.deck-card.dim .lock-icon{width:16px;height:16px;vertical-align:-2px;margin-right:6px}
/* UI-086 开场页主题标签为粉色胶囊 */
.tags .pill{background:var(--pink);color:var(--accent)}
/* UI-088 开场页底部说明 */
.trial-note{margin:20px 0 0;text-align:center}
/* UI-089 开场页底部动作区上边线 */
.sticky-action.with-divider{border-top:1px solid var(--line)}
/* UI-068 试玩结束弹层次按钮弱化 */
.bottom-sheet .text-link.later{color:var(--muted);font-weight:400}
/* UI-090 选关页试玩卡：整卡色底 + 白底角标 + 主色试玩胶囊 */
.trial-scenes .trial-scene{background:var(--scene-color,#FFF2DC);border:0}
.trial-scenes .trial-scene .pill{background:#fff;color:var(--ink)}
.trial-scenes .trial-scene .scene-art{height:150px}
.trial-scenes .trial-scene .section-head{margin:14px 0 0}
.trial-scenes .trial-scene .section-head b{background:var(--accent);color:#fff;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700}
/* UI-099 A18 404 页居中构图与 App 图标 */
.notfound-page{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:56px 0}
.notfound-page .notfound-icon{width:120px;height:120px}
.notfound-page .page-title{align-items:center;gap:12px}
.notfound-page .btn{min-width:280px}
/* 1030 走查 #21：会员皇冠统一用切图 ic_crown（@2x 32px，显示 14×14），
   不用系统 emoji——iOS / 安卓 / 桌面渲染不一致。与文字垂直居中、右侧间距 4px。 */
.ic-crown{width:14px;height:14px;flex:none;align-self:center;margin-right:4px;display:block}
/* 1030 走查 #20：B2 关卡卡片按官网 Demo 的尺寸来——卡片宽 310（390 − 左 60 − 右 20），
   内边距 16/18、圆角 24、1px 描边 rgba(36,24,30,.06)；普通卡高约 166、当前关约 200 并加浅阴影；
   插图 64×64、圆角 16 放右上角（距上 13、距右 13），文字区右侧留出插图宽度，简介最多 2 行。 */
main:has(.route-list){padding-left:16px;padding-right:20px}
.level-body{border-radius:24px;padding:16px 18px;gap:6px;height:166px;min-height:166px;border:1px solid rgba(36,24,30,.06)}
.level-body>*:not(.scene-art){padding-right:74px;min-width:0}
.level-body>.pill{padding-right:10px;max-width:calc(100% - 74px);white-space:nowrap}
.level-body h2{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.level-body>.small{line-height:20px;flex:none}
.level-body .scene-art{position:absolute;top:13px;right:13px;width:64px;height:64px;margin:0;align-self:auto;border-radius:16px}
.level-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:20px;flex:none}
.level-card.current .level-body{height:200px;min-height:200px;padding:16px 18px;box-shadow:0 10px 26px rgba(36,24,30,.10)}
.level-card.coming .level-body .scene-art{display:none}