/* 复盘镜 · 免费测评 /quiz 卷宗皮（WO-OPUS-017，设计系统 v1）
   物件：一只卡片盒。十三张索引卡，一张一个情境；选中的那一项，用朱笔勾下来。答完，十三张理齐，照片显影。
   颜色、纸、章、按钮全部沿用 site.css token；本文件只加 quiz 的物件与动效。
   quiz 脚本绑定的 id／class／data-* 一个不改；这里只写样式。 */

/* 字体、--kraft、--w-read、缓动 token 都在 site.css（设计系统 v1）；本文件只写 quiz 的物件 */

/* ── 阶段显示（原样保留旧皮的功能规则） ── */
.fq .phase:not(.active){display:none}
.fq [hidden]{display:none!important}
.fq .app{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut) 40px;position:relative}
.fq .intro-logo,.fq .intro-meta-divider,.fq .result-mirror,.fq .result-read-on{display:none}
.fq button{font-family:inherit}
.fq h1,.fq h2,.fq h3{text-wrap:balance}
body.fq{min-height:100vh}
body.fq[data-quiz-phase="quiz"] .bar nav>a{display:none}
body.fq:not([data-quiz-phase="intro"]):not([data-quiz-phase="result"]) .foot{display:none}
.fq .foot{margin-top:56px}      /* 作答中只留 LOGO 与灯下／白天，少一个出口 */

/* ── 共用按钮：沿用 .cta 的样子（墨色方块，56 高） ── */
.fq .btn-primary,.fq .result-button,.fq .share-primary,.fq .reader-next{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;
  background:var(--btn-bg);color:var(--btn-fg);border:0;border-radius:2px;box-shadow:0 10px 20px -12px var(--shadow);
  font:500 17px/1.2 var(--sans);letter-spacing:.08em;text-decoration:none;cursor:pointer;text-align:left}
.fq .btn-primary svg,.fq .result-button svg,.fq .reader-next svg{width:26px;height:16px;flex:none}
.fq .btn-primary:active,.fq .result-button:active{transform:translateY(1px)}
.fq .btn-primary:disabled{opacity:.55;cursor:wait}
.fq .result-button-outline,.fq .result-button-light{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.fq .quiz-back,.fq .result-text-button,.fq #result-skip{background:none;border:0;box-shadow:none;width:auto;min-height:0;justify-content:center;color:var(--muted);font:500 14px/1 var(--sans);letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:6px;padding:10px 0;cursor:pointer;text-decoration:none}
.fq .quiz-back:disabled{opacity:.35;cursor:default}
.fq .quiz-back svg{width:20px;height:14px}
.fq .quiz-storage-note,.fq .result-storage-note{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}

/* ═════════ 第一屏：卡片盒 ═════════ */
#phase-intro{padding-top:10px}
.intro-copy{max-width:440px;margin:0 auto}
.fq-box{position:relative;height:128px;max-width:320px;margin:26px auto 22px}
.fq-cards{position:absolute;left:5%;right:5%;bottom:22px;height:92px}
.fq-cards i{position:absolute;left:0;right:0;bottom:calc(var(--i) * 3.6px);height:62px;background:var(--card);
  border:1px solid var(--rule);border-radius:2px;box-shadow:0 -1px 0 color-mix(in srgb,var(--paper) 60%,transparent)}
.fq-cards i:nth-child(odd){background:var(--paper)}
.fq-cards b{position:absolute;top:-14px;width:23%;height:15px;left:calc(3% + (var(--i) - 4 * round(down, var(--i) / 4, 1)) * 24%);
  background:inherit;border:1px solid var(--rule);border-bottom:0;border-radius:4px 4px 0 0;
  font:700 8.5px/14px var(--type);letter-spacing:.12em;text-align:center;color:var(--muted)}
/* round() 不认识的内核（旧 X5／XWeb）：四个位置写死 */
.fq-cards i:nth-child(4n+1) b{left:3%}.fq-cards i:nth-child(4n+2) b{left:75%}.fq-cards i:nth-child(4n+3) b{left:51%}.fq-cards i:nth-child(4n) b{left:27%}
.fq-cards i:last-child{border-top:2px solid var(--cin)}
.fq-cards i:last-child b{color:var(--cin);border-color:var(--cin);border-width:1.5px}
.fq-front{position:absolute;left:0;right:0;bottom:0;height:66px;z-index:2;background:var(--kraft);border:1px solid var(--kraft-edge);border-radius:2px 2px 4px 4px;
  box-shadow:0 18px 26px -18px var(--shadow),inset 0 2px 0 rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.fq-holder{display:flex;gap:10px;padding:4px 10px;border:1.5px solid var(--gold);border-radius:2px;background:color-mix(in srgb,var(--card) 70%,transparent);
  font:700 10px/1 var(--type);letter-spacing:.16em;color:var(--kraft-ink)}
.fq-holder em{color:inherit}
.fq-pull{width:34px;height:9px;border:1.5px solid var(--gold);border-top:0;border-radius:0 0 18px 18px}
.motion .fq-cards i{animation:fqdrop .5s var(--e-out) both;animation-delay:calc(180ms + (12 - var(--i)) * 42ms)}
.motion .fq-cards i:nth-child(1){animation-delay:180ms}.motion .fq-cards i:nth-child(2){animation-delay:222ms}.motion .fq-cards i:nth-child(3){animation-delay:264ms}
.motion .fq-cards i:nth-child(4){animation-delay:306ms}.motion .fq-cards i:nth-child(5){animation-delay:348ms}.motion .fq-cards i:nth-child(6){animation-delay:390ms}
.motion .fq-cards i:nth-child(7){animation-delay:432ms}.motion .fq-cards i:nth-child(8){animation-delay:474ms}.motion .fq-cards i:nth-child(9){animation-delay:516ms}
.motion .fq-cards i:nth-child(10){animation-delay:558ms}.motion .fq-cards i:nth-child(11){animation-delay:600ms}.motion .fq-cards i:nth-child(12){animation-delay:642ms}
.motion .fq-cards i:last-child{animation:fqdrop .5s var(--e-out) 684ms both,fqlift .55s var(--e-out) 1.35s forwards,fqwait 3.4s ease-in-out 2.4s infinite}
@keyframes fqdrop{from{opacity:0;transform:translateY(-54px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes fqlift{to{transform:translateY(-13px)}}
@keyframes fqwait{0%,100%{transform:translateY(-13px)}50%{transform:translateY(-16px)}}

.fq-kick{margin:0 0 10px;display:flex;gap:8px}
.fq-kick .intro-brand{display:none}
#intro-headline{margin:0;font:900 30px/1.34 var(--serif);letter-spacing:.02em}
#intro-headline span{display:block}
#intro-headline strong{display:block;font-weight:900;color:var(--cin);font-size:1.28em;line-height:1.2;letter-spacing:.06em}
.intro-desc{margin:12px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.8}
.intro-meta{display:flex;align-items:center;gap:0;margin:16px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.intro-meta-item{flex:1;display:flex;align-items:center;gap:8px;padding:10px 0;font:500 14px/1.3 var(--sans);letter-spacing:.06em;color:var(--ink-2)}
.intro-meta-item+.intro-meta-item{border-left:1px solid var(--rule);padding-left:14px}
.intro-meta-dot{color:var(--cin);font-size:9px}
.intro-outcome{margin:14px 0 18px;font-size:15px;line-height:1.75;color:var(--ink-2)}
#intro-start-btn{margin-top:4px}
#quiz-load-status{margin:14px 0 0;text-align:center;font:400 12.5px/1.5 var(--sans);color:var(--muted);letter-spacing:.06em}
#quiz-load-error{margin:14px 0 0;padding:12px 14px;border-left:2px solid var(--cin);background:var(--paper-2);font-size:14px}
#quiz-load-error button{margin-top:8px;background:var(--btn-bg);color:var(--btn-fg);border:0;padding:10px 14px;font:500 14px/1 var(--sans)}
.intro-trust{margin:4px 0 0;text-align:center;font:400 12.5px/1.5 var(--sans);color:var(--muted);letter-spacing:.06em}
.quiz-resume-panel{margin:6px 0 10px;padding:16px 16px 16px 34px;background:var(--paper);border:1px solid var(--rule);position:relative;box-shadow:0 14px 24px -20px var(--shadow)}
.quiz-resume-panel::before{content:"";position:absolute;inset:0 auto 0 20px;border-left:1px solid color-mix(in srgb,var(--cin) 30%,transparent)}
.quiz-resume-panel h3{margin:0;font:600 17px/1.5 var(--serif)}
.quiz-resume-panel p{margin:4px 0 12px;font-size:14px;color:var(--ink-2)}
.quiz-resume-actions{display:grid;gap:4px}

/* 城市那张画：一张贴在卡片盒旁边的照片（保留原图与“放大看细节”，暖一点，跟纸同一个世界） */
.fq .choice-scene{margin:44px auto 0;max-width:360px}
.fq .choice-scene-stage{position:relative;background:var(--photo);padding:8px 8px 10px;box-shadow:0 16px 26px -18px var(--shadow);transform:rotate(-1.4deg)}
.fq .choice-scene-stage::before{content:"";position:absolute;width:64px;height:20px;background:var(--tape);top:-9px;left:50%;margin-left:-32px;transform:rotate(3deg);z-index:2}
.fq .choice-scene-stage img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:sepia(.28) saturate(.8) contrast(1.02)}
.fq .choice-scene-stage svg{display:none}
:root[data-mode="lamp"] .fq .choice-scene-stage img{filter:sepia(.35) saturate(.7) brightness(.72)}
.fq .choice-scene-caption{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:16px;font:600 15px/1.5 var(--serif);color:var(--ink-2)}
.fq .scene-actions{display:flex;gap:18px}
.fq .scene-actions a,.fq .scene-actions button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0;color:var(--muted);font:500 13px/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--rule);cursor:pointer}
.fq .scene-actions svg{width:15px;height:15px}

/* ═════════ 答题：一张索引卡 ═════════ */
#phase-quiz{max-width:560px;margin:0 auto;padding-top:6px}
.journey-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.journey-name{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
/* 进度：卡片后面那一排索引签。答过的归档（压低、打一个朱色小勾），当前这张立起来，和卡片连成一张 */
.journey-progress{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px;height:22px;margin:0 8px;counter-reset:tab;position:relative;z-index:1}
.journey-progress span{counter-increment:tab;position:relative;background:var(--paper-2);border:1px solid var(--rule);border-bottom:0;border-radius:4px 4px 0 0;
  transform:translateY(6px);transition:transform .26s var(--e-out),background-color .26s,color .26s;color:var(--muted)}
.journey-progress span::before{content:counter(tab,decimal-leading-zero);position:absolute;left:0;right:0;top:3px;text-align:center;font:700 8.5px/1 var(--type);letter-spacing:.04em}
.journey-progress span.done{transform:translateY(11px);background:color-mix(in srgb,var(--paper-2) 70%,var(--desk))}
.journey-progress span.done::after{content:"";position:absolute;left:50%;top:13px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--cin);opacity:.8}
.journey-progress span.done::before{opacity:.55}
.journey-progress span.current{transform:translateY(0);background:var(--card);color:var(--cin);border-color:var(--cin);border-width:1.5px 1.5px 0;z-index:2}
.journey-progress span.current::before{top:4px;font-size:9.5px}

.quiz-card{position:relative;background:var(--card);border:1px solid var(--rule);padding:14px 18px 34px;
  box-shadow:0 22px 34px -26px var(--shadow),0 2px 0 var(--paper-2),0 5px 0 -1px var(--card),0 5px 0 0 var(--rule)}
.quiz-card::after{content:"";position:absolute;left:50%;bottom:12px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--desk);box-shadow:inset 0 1px 2px var(--shadow)}          /* 卡片底下的穿杆孔 */
.quiz-header{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:9px;border-bottom:1.5px solid color-mix(in srgb,var(--cin) 55%,transparent)}
.quiz-label{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
.quiz-progress{font:700 13px/1 var(--type);letter-spacing:.1em;color:var(--cin)}
.quiz-question{margin:6px 0 16px;padding-top:4px;font:var(--w-echo) 19.5px/32px var(--serif);letter-spacing:.01em;color:var(--ink);outline:none;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,color-mix(in srgb,var(--rule) 70%,transparent) 31px 32px);background-position:0 4px;text-wrap:pretty}
.quiz-options{display:grid;gap:0;border-bottom:1px dashed var(--rule)}
.quiz-option{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:4px;width:100%;min-height:58px;padding:14px 4px 14px 0;
  background:none;border:0;border-top:1px dashed var(--rule);color:var(--ink);font:400 16px/1.72 var(--sans);text-align:left;cursor:pointer;
  transition:opacity .2s,background-color .2s}
.quiz-option:focus-visible{outline:2px solid var(--cin);outline-offset:2px}
@media (hover:hover){.quiz-option:not(:disabled):hover{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}}
.option-key{position:relative;display:grid;place-items:center;width:28px;height:28px;margin-top:0;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:2px;
  font:700 10.5px/1 var(--type);letter-spacing:-.02em;color:var(--ink-2);background:var(--card)}
.option-text{padding-top:1px;background-image:linear-gradient(var(--cin),var(--cin));background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .3s var(--e-out)}
.option-confirm{position:absolute;left:-3px;top:8px;width:36px;height:36px;color:var(--cin);pointer-events:none;overflow:visible}
.option-confirm path{stroke-width:2.6;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .24s var(--e-out)}
/* 选中：朱笔勾下去、字底下划一道。只写样式，谁被选中由 quiz 脚本的 aria-pressed／tethered 决定 */
.quiz-option[aria-pressed="true"] .option-confirm path,.quiz-option.tethered .option-confirm path{stroke-dashoffset:0}
.quiz-option[aria-pressed="true"] .option-key,.quiz-option.tethered .option-key{border-color:var(--cin);color:transparent}
.quiz-option[aria-pressed="true"] .option-text,.quiz-option.tethered .option-text{background-size:100% 1.5px}
.quiz-option.fadeOut{opacity:.34}
.quiz-option:disabled{cursor:default}
.question-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.question-instruction{font:500 12px/1.4 var(--sans);letter-spacing:.08em;color:var(--muted)}
.quiz-footer{margin:0;font:400 11.5px/1.4 var(--type);letter-spacing:.04em;color:var(--muted)}
.motion .quiz-footer::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:3px;vertical-align:-.15em;background:var(--cin);animation:blink 1s steps(1) infinite}
.question-composition{position:relative}
.question-companion{display:none}

/* 第七张后的中点：把前七张用回形针夹起来 */
.fq .checkpoint-frame{position:relative;max-width:440px;margin:34px auto 0;padding:34px 22px 26px 40px;background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 18px 30px -22px var(--shadow),4px 4px 0 -1px var(--card),4px 4px 0 0 var(--rule),8px 8px 0 -1px var(--card),8px 8px 0 0 var(--rule)}
.fq .checkpoint-frame::before{content:"";position:absolute;inset:0 auto 0 26px;border-left:1px solid color-mix(in srgb,var(--cin) 22%,transparent)}
.fq .checkpoint-frame::after{content:"";position:absolute;top:-16px;right:36px;width:16px;height:48px;border:2px solid var(--gold);border-radius:9px;transform:rotate(8deg);
  box-shadow:inset 0 0 0 3px transparent}
.motion .fq #phase-checkpoint.active .checkpoint-frame::after{animation:clip .45s var(--e-stamp) .2s both}
@keyframes clip{from{transform:translateY(-22px) rotate(8deg);opacity:0}to{transform:rotate(8deg);opacity:1}}
.checkpoint-overline{font:700 12px/1 var(--type);letter-spacing:.14em;color:var(--cin)}
.checkpoint-title{margin:12px 0 0;font:900 26px/1.4 var(--serif);outline:none}
.checkpoint-sub{margin:10px 0 22px;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
#phase-axis-reveal .checkpoint-frame{text-align:left}
.axis-reveal-card{max-width:100%;margin:14px 0}
#phase-ritual{text-align:center;padding:40px 0}
#phase-ritual svg,.ritual-breather{display:none}

/* ═════════ 答完：十三张理齐 ═════════ */
.result-transition{min-height:calc(100vh - 160px);min-height:calc(100svh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 0}
.result-kicker{margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;color:var(--muted)}
#decoding-status{margin:12px 0 26px;font:900 28px/1.4 var(--serif);outline:none}
.result-marks{position:relative;width:150px;height:104px;margin:0 auto 26px}
.result-marks i{position:absolute;inset:0;background:var(--card);border:1px solid var(--rule);box-shadow:0 6px 10px -8px var(--shadow)}
.result-marks i:nth-child(odd){--r:-7deg;--x:-14px}.result-marks i:nth-child(even){--r:6deg;--x:12px}
.result-marks i:nth-child(3n){--r:-12deg;--x:6px}.result-marks i:nth-child(5n){--r:10deg;--x:-8px}
.result-marks i:last-child{border-top:2px solid var(--cin)}
.result-marks::after{content:"复盘\A镜印";white-space:pre;position:absolute;right:-20px;bottom:-18px;width:54px;height:54px;padding-top:6px;box-sizing:border-box;
  border:2.5px solid var(--cin);border-radius:4px;color:var(--cin);font:900 17px/19px var(--serif);letter-spacing:2px;text-align:center;transform:rotate(-8deg);opacity:.88;background:color-mix(in srgb,var(--paper) 40%,transparent)}
.motion #phase-decoding.active .result-marks i{animation:square .62s var(--e-out) both}
.motion #phase-decoding.active .result-marks i:nth-child(n){animation-delay:calc(var(--d,0) * 1ms)}
.result-marks i:nth-child(2){--d:25}.result-marks i:nth-child(3){--d:50}.result-marks i:nth-child(4){--d:75}.result-marks i:nth-child(5){--d:100}.result-marks i:nth-child(6){--d:125}
.result-marks i:nth-child(7){--d:150}.result-marks i:nth-child(8){--d:175}.result-marks i:nth-child(9){--d:200}.result-marks i:nth-child(10){--d:225}.result-marks i:nth-child(11){--d:250}
.result-marks i:nth-child(12){--d:275}.result-marks i:nth-child(13){--d:300}
@keyframes square{from{transform:translate(var(--x),-6px) rotate(var(--r))}to{transform:none}}
.motion #phase-decoding.active .result-marks::after{animation:stamp .42s var(--e-stamp) .62s both}
#result-skip{font-size:14px}

/* ═════════ 结果：一个档案夹 ═════════ */
.fpj-result{padding-top:14px;padding-bottom:30px}
.result-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.result-topline .result-kicker span{display:block;margin-top:3px;font-family:var(--type);letter-spacing:.08em}
/* 保存／分享：一张挂签 */
.result-share-entry{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px 9px 22px;background:var(--kraft);color:var(--kraft-ink);border:1px solid var(--kraft-edge);
  border-radius:2px 10px 10px 2px;font:500 13px/1.25 var(--sans);letter-spacing:.04em;text-align:left;cursor:pointer;box-shadow:0 8px 14px -10px var(--shadow);transform:rotate(1.5deg)}
.result-share-entry::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--desk);box-shadow:inset 0 1px 1px var(--shadow)}
.result-share-entry svg{width:17px;height:17px;flex:none}
.share-entry-caption{display:block;font-size:11px;opacity:.8}
/* 三个分页＝档案夹上的三枚索引签 */
.result-chapter-purpose{margin:0 0 12px;font:400 13.5px/1.6 var(--sans);color:var(--muted)}
.result-chapters [role=tablist]{display:flex;align-items:flex-end;padding-left:10px}
.result-chapters [role=tab]{position:relative;display:flex;align-items:baseline;gap:6px;margin-right:-4px;padding:10px 16px 9px;background:var(--paper-2);border:1px solid var(--rule);border-bottom:0;
  border-radius:7px 7px 0 0;color:var(--muted);font:500 15px/1 var(--serif);letter-spacing:.08em;cursor:pointer;transform:translateY(3px);transition:transform .2s var(--e-out)}
.result-chapters [role=tab] span{font:700 10px/1 var(--type);letter-spacing:.06em}
.result-chapters [role=tab][aria-selected="true"]{z-index:3;background:var(--paper);color:var(--ink);font-weight:700;transform:none;padding-bottom:12px;margin-bottom:-1px}
.result-chapters [role=tab][aria-selected="true"] span{color:var(--cin)}
.result-chapters [role=tab]:focus-visible{outline:2px solid var(--cin);outline-offset:-4px}
.result-reader-panel{position:relative;background:var(--paper);border:1px solid var(--rule);padding:22px 20px 26px;box-shadow:0 22px 34px -26px var(--shadow)}
.result-reader-panel::before{content:"";position:absolute;inset:0 auto 0 12px;border-left:1px solid color-mix(in srgb,var(--cin) 18%,transparent);pointer-events:none}
.result-reader-enabled .result-reader-panel[hidden]{display:none!important}

/* 原型：档案照 + 名字 */
.result-opening{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:14px;align-items:start}
.result-prediction{display:inline-block;margin:0 0 12px;padding:5px 8px;border:1.5px solid var(--cin);color:var(--cin);border-radius:2px;
  font:500 11.5px/1 var(--sans);letter-spacing:.12em;transform:rotate(-3deg);transform-origin:0 50%}
.result-english{margin:0;font:500 11px/1 var(--mono);letter-spacing:.34em;color:var(--muted)}
#result-name{margin:6px 0 0;font:900 38px/1.15 var(--serif);letter-spacing:.06em;outline:none}
.result-quotation{margin:10px 0 0;font:var(--w-echo) 16px/1.6 var(--serif);color:var(--ink-2);word-break:keep-all;text-wrap:balance}
.result-orientation{margin:10px 0 0;font:400 12.5px/1.7 var(--sans);color:var(--muted)}
.result-portrait{margin:0;position:relative;transform:rotate(2.2deg)}
.portrait-rim{position:relative;background:var(--photo);padding:6px 6px 24px;box-shadow:0 16px 24px -14px var(--shadow)}
.portrait-rim::before{content:"";position:absolute;top:-14px;left:22px;width:11px;height:36px;border:2px solid var(--gold);border-radius:7px;z-index:3;
  background:linear-gradient(90deg,transparent 3px,var(--gold) 3px,var(--gold) 5px,transparent 5px) 0 6px/100% 22px no-repeat}   /* 回形针 */
.portrait-rim img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--paper-2)}
.portrait-fallback{aspect-ratio:1/1;display:grid;place-content:center;text-align:center;background:var(--paper-2);gap:4px;font-size:12px}
.result-portrait figcaption{position:absolute;left:6px;right:6px;bottom:4px;display:flex;justify-content:space-between;font:700 9px/1.4 var(--type);letter-spacing:.08em;color:var(--muted)}
.result-portrait figcaption>span:last-child{display:none}
.result-art-error{margin-top:10px;font-size:12px;color:var(--muted)}
/* 显影：照片像在药水里慢慢浮出来（只动 opacity 与 filter，一次，1.6 秒） */
.motion .fq #phase-result.active .portrait-rim img{animation:develop 1.7s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes develop{0%{opacity:.05;filter:sepia(1) brightness(1.9) contrast(.35) blur(1.2px)}55%{opacity:.8;filter:sepia(.7) brightness(1.25) contrast(.75) blur(.3px)}100%{opacity:1;filter:none}}
.motion .fq #phase-result.active .result-prediction{animation:stamp2 .45s var(--e-stamp) 1.25s both}
@keyframes stamp2{0%{opacity:0;transform:scale(1.7) rotate(-12deg)}100%{opacity:1;transform:rotate(-3deg)}}

.result-reading-paper{margin-top:22px}
.result-insights{display:grid;gap:0}
.result-insight{padding:16px 0;border-top:1px dashed var(--rule)}
.insight-heading{display:flex;align-items:center;gap:8px}
.insight-heading svg{width:20px;height:20px;color:var(--cin);flex:none}
.insight-heading h2{margin:0;font:700 17px/1.4 var(--serif);letter-spacing:.08em}
.result-insight p{margin:8px 0 0;font:var(--w-read) 16.5px/1.9 var(--serif);color:var(--ink)}
.result-insight+.result-insight h2{background:linear-gradient(var(--cin),var(--cin)) 0 100%/100% 1.5px no-repeat;padding-bottom:1px}
.result-boundary{margin:6px 0 0;padding:12px 0 0 26px;border-top:1px solid var(--rule);position:relative;font:400 12.5px/1.75 var(--sans);color:var(--muted)}
.result-boundary::before{content:"注";position:absolute;left:0;top:13px;width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--muted);border-radius:50%;font:500 10px/1 var(--sans)}

/* 回放：笔录 */
.result-section-heading h2{margin:8px 0 0;font:900 24px/1.4 var(--serif);outline:none}
.result-section-heading p:last-child{margin:8px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.result-evidence{display:grid;gap:14px;margin-top:18px}
.evidence-item{position:relative;padding:14px 14px 14px 16px;background:var(--card);border:1px solid var(--rule);border-left:2px solid var(--cin)}
.evidence-number{position:absolute;right:10px;top:10px;margin:0;font:700 11px/1 var(--type);letter-spacing:.1em;color:var(--cin);border:1.5px solid var(--cin);padding:4px 6px;transform:rotate(-4deg)}
.evidence-number::before{content:"Q"}
.evidence-context{margin:0 52px 0 0!important;font:400 13.5px/1.7 var(--sans)!important;color:var(--muted)!important}
.evidence-reading span{display:block;margin-bottom:2px;font:500 10.5px/1.4 var(--mono);letter-spacing:.16em;color:var(--cin)}
.evidence-item h3{margin:0 44px 0 0;font:600 15px/1.6 var(--serif)}
.evidence-item blockquote{margin:8px 0 0;padding:0;font:var(--w-read) 16px/1.8 var(--serif);color:var(--ink)}
.evidence-content p,.result-sentence{margin:8px 0 0;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.echo-reflection,.result-difference{margin-top:18px;padding:14px 16px;background:var(--paper-2);font-size:14.5px;line-height:1.8}

/* 下一步（015 续段）：底片颜色接回 token */
.result-continuation .result-kicker{color:var(--cin)}
#result-next-title{margin:8px 0 0;font:900 25px/1.4 var(--serif);outline:none}
.continuation-copy p{font-size:15px;line-height:1.85;color:var(--ink-2)}
.continuation-copy .result-next-note{font-size:13px;color:var(--muted)}
.continuation-film{margin:14px -21px 0!important;background:var(--film)!important}
.continuation-film::before,.continuation-film::after{background:radial-gradient(circle at 7px 4px,var(--film-hole) 2.4px,transparent 2.8px) 0 0/15px 8px repeat-x!important}
.result-next-actions{display:grid;gap:18px;margin-top:22px}
.result-next-actions p{margin:8px 0 0;font-size:13px;color:var(--muted);text-align:center}
.result-ending{margin:34px 0 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.result-ending p{margin:0;font:700 18px/1.5 var(--serif)}
.result-ending>span{font-size:13px;color:var(--muted);letter-spacing:.2em}
.result-ending a{margin-top:6px;color:var(--muted);font-size:14px}

/* 底部那条：一条纸 */
.result-reader-dock,.result-reader-followup{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -12px 22px -18px var(--shadow)}
.result-reader-followup{position:static;margin-top:20px;background:none;border:0;box-shadow:none;padding:0}
.reader-dock-main{max-width:560px;margin:0 auto}
.result-reader-dock .reader-position{display:none}
.result-reader-dock[data-inline-visible=true]{visibility:hidden;pointer-events:none}
.reader-next{min-height:50px;font-size:16px}
.reader-next-reason{margin:0 0 8px;font-size:13px;color:var(--muted)}
body:not([data-quiz-phase=result]) .result-reader-dock{display:none!important}
.result-reader-enabled .fpj-result{padding-bottom:90px}

/* 原型卡：灯箱上看一张照片 */
.result-share-dialog,.scene-detail-dialog{width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);padding:0;border:1px solid var(--rule);background:var(--paper);color:var(--ink);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.result-share-dialog::backdrop,.scene-detail-dialog::backdrop{background:rgba(13,11,9,.72)}
.result-share-dialog:not([open]),.scene-detail-dialog:not([open]){display:none}
.result-share-dialog header,.scene-detail-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}
.result-share-dialog header .result-kicker{display:none}
.result-share-dialog h2,.scene-detail-header h2{margin:0;font:700 18px/1.4 var(--serif)}
.scene-detail-header p{margin:0;font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
.result-share-dialog header button,.scene-detail-header button{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer}
.result-share-dialog header button svg,.scene-detail-header button svg{width:20px;height:20px}
.result-share-body{padding:18px 26px 8px;background:var(--desk)}
.result-share-body img{display:block;width:100%;height:auto;background:var(--photo);padding:6px;box-shadow:0 18px 26px -16px var(--shadow);transform:rotate(-1deg)}
.result-share-message{padding:30px 0;text-align:center;font-size:14px;color:var(--muted)}
.result-share-dialog footer{padding:14px 16px 16px}
.result-share-dialog footer>p{margin:0 0 12px;font-size:13px;color:var(--muted)}
.result-share-actions{display:grid;gap:8px}
.share-secondary{text-align:center;color:var(--muted);font-size:13.5px;padding:8px 0}
.scene-detail-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;color:var(--muted)}
.scene-detail-toolbar button{background:none;border:1px solid var(--rule);color:var(--ink);padding:6px 10px;font:500 12px/1 var(--sans)}
.scene-detail-viewport{max-height:62vh;max-height:62svh;overflow:auto;background:var(--desk)}
.scene-detail-viewport img{max-width:none;width:100%}

/* ═════════ 电脑版 ═════════ */
@media (min-width:900px){
  #phase-intro.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 72px;align-items:center;padding-top:48px}
  .intro-copy{max-width:470px;margin:0}
  #quiz-load-status{margin-top:18px}
  .fq-box{height:180px;max-width:400px;margin:0 0 30px}
  .fq-cards{height:120px}.fq-cards i{height:100px}
  #intro-headline{font-size:40px}
  .fq .choice-scene{margin:0;max-width:460px;justify-self:end}
  #phase-quiz{max-width:640px;padding-top:30px}
  .quiz-card{padding:18px 30px 40px}
  .quiz-question{font-size:22px;line-height:36px;background:repeating-linear-gradient(to bottom,transparent 0 35px,color-mix(in srgb,var(--rule) 70%,transparent) 35px 36px);background-position:0 4px}
  .question-companion{display:block;position:absolute;left:-150px;top:40px;width:120px;text-align:right}
  .companion-ring{transform:none!important}
  .companion-ring span{font:700 64px/1 var(--type);color:transparent;-webkit-text-stroke:1px var(--rule)}
  .question-companion p{display:none}
  .fpj-result{max-width:760px;margin:0 auto;padding-top:34px}
  .result-reader-panel{padding:34px 40px 40px}
  .result-opening{grid-template-columns:minmax(0,1fr) 250px;gap:40px}
  #result-name{font-size:54px}
  .result-next-actions{grid-template-columns:1fr 1fr}
}
@media (max-width:360px){#intro-headline{font-size:27px}.result-opening{grid-template-columns:minmax(0,1fr) 108px}#result-name{font-size:32px}}

/* ── 大字、省流量、减少动态：全部停在最后一格 ── */
.quiz-large-text .fq-box,.quiz-large-text .question-companion,.quiz-large-text .result-portrait,.quiz-large-text .choice-scene{display:none}
.quiz-large-text .result-opening{grid-template-columns:1fr}
.quiz-low-motion .fq-cards i,.quiz-low-motion .portrait-rim img,.quiz-low-motion .result-prediction,.quiz-low-motion .result-marks i,.quiz-low-motion .result-marks::after,
.quiz-low-motion .quiz-footer::after{animation:none!important}
.quiz-low-motion .fq-cards i:last-child{transform:translateY(-13px)}
@media (prefers-reduced-motion:reduce){.fq-cards i:last-child{transform:translateY(-13px)}.option-confirm path,.option-text,.journey-progress span{transition:none!important}}

/* 小件：重试按钮、结果页底下已经有“交易应该服务人生”，页尾就不再重复 */
.fq #result-share-retry,.fq #scene-detail-retry,.fq #result-image-retry{margin-top:10px;background:none;border:1px solid var(--ink);color:var(--ink);padding:9px 14px;font:500 13.5px/1 var(--sans);letter-spacing:.06em;cursor:pointer}
.fq #scene-detail-status{padding:30px 16px;text-align:center;font-size:14px;color:var(--muted)}
.fq .foot .foot-mission,.fq .foot .foot-motto{display:none}