:root{--ink:#152e3e;--muted:#5d7888;--teal:#128d87;--teal-dark:#06756f;--line:#d6e4e9;--paper:#f9fcfc;--mint:#e6f8f4;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:#eaf1f2;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #b46c1b;outline-offset:3px}button,select{touch-action:manipulation}button{color:inherit}h1,p{margin:0}button:disabled{opacity:1}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app{width:min(100%,450px);margin:0 auto;min-height:100svh;position:relative;background:var(--paper);padding:20px 20px max(14px,env(safe-area-inset-bottom));padding-top:max(20px,env(safe-area-inset-top));box-shadow:0 20px 70px #16323d12}
.header{display:flex;align-items:center;justify-content:space-between;min-height:36px;gap:8px}.brand{font-size:15px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}.brand span{font-size:19px;margin:0 3px;font-weight:900}.edition{font-size:10px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 7px;white-space:nowrap}
.toolbar{display:flex;align-items:center;gap:5px;margin:5px 0 20px;min-height:38px}.step{margin-right:auto;font-size:11px;color:var(--muted);white-space:nowrap}.setting{border:0;border-radius:9px;color:#496675;background:transparent;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;min-height:38px;padding:4px 6px;white-space:nowrap}.setting:hover{background:#eaf2f2}.setting b{font-weight:700}.setting>span[aria-hidden]{font-size:17px;color:var(--teal)}.setting[aria-pressed=true]{color:var(--teal-dark);background:#e6f4f1}.motion-label{padding-right:0}.motion-label select{color:inherit;border:0;background:transparent;font-size:11px;max-width:126px;min-height:38px;cursor:pointer}
.chapter-row{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:11px;gap:5px}.chapter-row>span:first-child{color:var(--teal-dark);letter-spacing:.02em}.progress{height:6px;background:#deebee;border-radius:8px;margin:6px 0 23px;overflow:hidden}.progress i{display:block;height:100%;background:var(--teal);border-radius:8px;transition:width .3s ease}
.qnumber{display:block;font-size:22px;color:var(--teal);font-weight:850;margin-bottom:3px}h1{font-size:25px;line-height:1.37;letter-spacing:-.6px;font-weight:850}h1:focus{outline:none}.question-intro>p{font-size:11px;color:var(--muted);margin:6px 0 14px;line-height:1.6}
.stage{isolation:isolate;position:relative;aspect-ratio:1.94;background:#f0f3fb;border-radius:22px;overflow:hidden;margin-bottom:9px;box-shadow:0 4px 0 #e9f1f2}.stage[data-question="20"]{background:#fcf2e7}.stage[data-question="27"]{background:#eaf7f7}.stage-blob{position:absolute;width:49%;height:100%;left:53%;top:11%;border-radius:54% 50% 25% 44%;background:#dde8f4;transform:rotate(-12deg)}[data-question="20"] .stage-blob{background:#f6dfc3}[data-question="27"] .stage-blob{background:#d0efea}.stage-blob:after{content:"";position:absolute;inset:30% -9% -6% 15%;background:inherit;border-radius:50%}
#cat{position:absolute;left:46%;bottom:-9%;width:60%;height:109%;z-index:3;object-fit:contain}.scene-badge{position:absolute;right:10px;top:9px;z-index:6;background:#ffffffed;border:1px solid #cee1e5;border-radius:11px;padding:6px 10px;min-width:112px;text-align:center;color:#4d7481;font-size:10px;font-weight:800;line-height:1.35}.stage:not([data-answer=idle]) .scene-badge{color:var(--teal-dark);border-color:#a3dad3}.asset-status{position:absolute;inset:48% 0 auto 49%;font-size:11px;text-align:center;background:#fff9;z-index:10}.asset-status.error{inset:38% 6% auto;padding:12px;background:#fff;color:#90451a;line-height:1.7}
.chat-window{position:absolute;left:6%;top:14%;width:46%;height:77%;border:1.5px solid #d4deed;border-radius:17px;background:#fff;padding:7px;font-size:10px;color:#203d4f}.chat-header{height:21px;border-radius:7px;background:#eaf1fc;display:flex;gap:5px;align-items:center;padding:0 6px;font-weight:800}.avatar{width:13px;height:13px;background:#a0bad3;border-radius:50%}.bubble{padding:6px 8px;border-radius:10px;width:86%;margin-top:8px;background:#f0f3fb;font-size:10px;white-space:nowrap}.bubble.sent{background:#ddf5ef;margin-left:auto}.read{font-size:9px;text-align:right;color:#688294;margin-top:9px}.waiting{color:var(--teal);position:absolute;bottom:-1px;left:7px;letter-spacing:1px}
.thought{position:absolute;z-index:6;background:#fff;border:1px solid #c4d6e1;color:#476a82;border-radius:12px;padding:4px 6px;font-size:9px;font-weight:700;opacity:0}.t1{top:26%;left:51%}.t2{top:42%;left:39%}.t3{top:17%;left:26%}
.bag{position:absolute;left:8%;top:31%;width:33%;height:48%;border-radius:14px;background:#cba687;transform-origin:50% 100%}.bag:before{content:"";position:absolute;width:60%;height:49%;top:-36%;left:20%;border:8px solid #ae8769;border-bottom:0;border-radius:80px 80px 0 0}.bag>span{position:absolute;inset:27% 11% 17%;display:grid;place-items:center;background:#e9d2b9;border-radius:8px;color:#795642;font-size:11px;font-weight:800}.bag-label{position:absolute;left:6%;bottom:5%;font-size:13px;font-weight:800;color:#aa6336}.key{position:absolute;left:42%;top:19%;width:44px;height:47px;z-index:5;transform:rotate(-20deg);transform-origin:20% 18%}.key svg{width:100%;height:100%;overflow:visible}.item-card{position:absolute;left:7%;top:12%;width:36px;height:13px;border-radius:3px;background:#728f9e;z-index:2}.cable{position:absolute;left:39%;top:54%;width:30px;height:27px;border:3px solid #ad896d;border-top-color:transparent;border-radius:50%;opacity:0}.question-marks{position:absolute;left:51%;top:28%;font-size:20px;font-weight:800;line-height:.9;color:#aa7957;transform:rotate(10deg)}.route-dots{position:absolute;left:5%;bottom:8%;display:flex;gap:8px;opacity:0}.route-dots span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #4d9a92;background:#fff;border-radius:50%;font-size:9px;color:var(--teal-dark)}
.fork{position:absolute;left:9%;top:23%;width:42%;height:68%}.fork:before{content:"";position:absolute;width:5px;height:90%;background:#a0bec6;transform:rotate(42deg);left:50%;top:8%;border-radius:4px}.sign{position:absolute;left:0;top:0;background:white;border:1.5px solid #90b5bd;border-radius:7px;padding:5px 9px;font-size:11px;font-weight:800;color:var(--teal-dark);white-space:nowrap}.sign.intuition{top:31%;left:6%;padding-right:15px}.fork>p{position:absolute;bottom:0;font-size:12px;color:#577d85;font-weight:800;white-space:nowrap}.decision-arrow{position:absolute;left:24%;top:59%;width:42px;z-index:4;color:#168f88;font-size:33px;opacity:0}.calculation{position:absolute;left:37%;top:22%;padding:3px 6px;background:#fff;border-radius:7px;color:var(--teal-dark);font-size:10px;font-weight:700;z-index:5;opacity:0}
.answer-group{display:grid;gap:6px}.answer{width:100%;text-align:left;display:flex;align-items:center;gap:10px;min-height:62px;padding:9px 10px;border:1.3px solid var(--line);border-radius:15px;background:#fff;transition:background .18s,border-color .18s}.answer:hover{border-color:#8abfbc}.letter{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#e0ebef;color:#506c7b;font-weight:800;font-size:14px;flex:none}.answer-copy{flex:1;min-width:0}.answer-copy strong{font-size:13px;line-height:1.4;display:block;font-weight:800}.answer-copy small{font-size:10px;color:var(--muted);display:block;margin-top:3px;line-height:1.35}.answer-mark{font-size:23px;color:#738e9b;width:22px;text-align:center;flex:none}.answer[aria-pressed=true]{border-color:var(--teal);background:var(--mint)}.answer[aria-pressed=true] .letter,.answer[aria-pressed=true] .answer-mark{background:var(--teal);color:#fff}.answer[aria-pressed=true] .answer-mark{border-radius:50%;font-size:15px;height:22px;line-height:22px;font-weight:800}
.feedback{margin-top:8px;padding:8px 13px 13px;border:1px solid var(--line);border-radius:15px;background:#f0f8f8;min-height:96px}.feedback-heading{display:flex;align-items:center;justify-content:space-between;color:var(--teal-dark);font-size:10px;font-weight:800;min-height:26px;margin-bottom:3px}.replay{border:0;background:transparent;font-size:10px;color:var(--teal-dark);min-width:54px;min-height:32px;padding:4px}.replay>span{font-size:15px}.replay:disabled{color:#6b8790;visibility:hidden}#roast{font-weight:800;font-size:12px;line-height:1.5}#tip{font-size:12px;line-height:1.5;margin-top:1px}.navigation{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.primary,.secondary{border:1.3px solid var(--line);border-radius:17px;min-height:46px;padding:10px 12px;font-weight:750;font-size:13px;line-height:1.5}.primary{background:var(--teal);border-color:var(--teal);color:white}.primary:hover:not(:disabled){background:var(--teal-dark)}.secondary{background:#fff;color:#536f80}.secondary:hover:not(:disabled){background:#edf5f5}.primary:disabled{background:#dfe9ec;color:#617c8a;border-color:#dfe9ec}.secondary:disabled{color:#7d919a;background:#f5f9f9}
footer{display:flex;align-items:center;justify-content:center;gap:5px;font-size:9px;color:#6b818e;margin:15px 0 0;line-height:1.6}.footer-dot{height:4px;width:4px;border-radius:50%;background:#7eb4ad}.footer-divider{margin:0 2px}.notice{font-size:12px;background:#fff3db;color:#6b481c;border:1px solid #ecd5aa;border-radius:12px;padding:12px;line-height:1.6;margin-top:12px}.complete{padding:30px 3px 36px;min-height:580px}.complete-stamp{display:grid;place-items:center;width:60px;height:60px;color:white;background:var(--teal);border-radius:50%;font-size:27px;margin:8px 0 27px}.eyebrow{font-weight:800;font-size:12px;color:var(--teal-dark);margin-bottom:9px}.complete h1{font-size:35px;line-height:1.3}.complete-copy{font-size:14px;color:var(--muted);line-height:1.8;margin:18px 0 22px}#answer-summary{padding:0;margin:0;list-style:none;display:grid;gap:8px}#answer-summary li{border:1px solid var(--line);border-radius:13px;padding:12px;background:white;font-size:12px;line-height:1.6}#answer-summary b{display:block;color:var(--teal-dark);font-size:10px;margin-bottom:3px}.scope-note{font-size:11px;line-height:1.7;color:var(--muted);margin:19px 0}.complete-actions{display:grid;gap:9px}
[data-motion=reduced] *,[data-motion=reduced] *:before,[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:700px){body{padding:26px 0}.app{border:1px solid #d9e5e7;border-radius:26px;min-height:800px;padding:24px}.stage{aspect-ratio:1.88}.question-intro>p{margin-bottom:15px}h1{font-size:27px}.answer{min-height:65px}.answer-copy strong{font-size:14px}.answer-copy small{font-size:11px}.feedback{min-height:99px}#roast,#tip{font-size:13px}}
@media(max-width:370px){.app{padding-left:14px;padding-right:14px}.brand{font-size:13px}.edition{font-size:9px}.toolbar{gap:0}.setting,.motion-label select{font-size:10px}.setting{padding-left:4px;padding-right:4px}.step{font-size:10px}h1{font-size:22px}.answer-copy strong{font-size:12px}.chat-window{font-size:9px}.bubble{font-size:8px;padding:5px}.scene-badge{font-size:9px;min-width:95px}#roast,#tip{font-size:11px}}
@media(max-height:740px) and (max-width:699px){.app{padding-top:12px}.toolbar{margin-bottom:11px}.progress{margin-bottom:15px}.qnumber{font-size:19px}.question-intro>p{margin:4px 0 10px}.stage{aspect-ratio:2.05}.answer{min-height:57px}.feedback{min-height:87px;padding-bottom:10px}.navigation{margin-top:10px}footer{margin-top:10px}}
.setting,.motion-label select{min-height:44px}.toolbar{min-height:44px}.replay{min-height:44px}.feedback-heading{min-height:36px}
.app{padding-top:max(16px,env(safe-area-inset-top))}.header{min-height:32px}.toolbar{margin:0 0 8px}.progress{height:5px;margin:4px 0 14px}.qnumber{font-size:19px;line-height:1.25;margin-bottom:2px}h1{line-height:1.3}.question-intro>p{line-height:1.5;margin:4px 0 10px}.stage{aspect-ratio:2.05}.answer{min-height:60px}.feedback{position:relative;padding:12px 13px;min-height:86px}.feedback-heading{min-height:20px;margin:0 0 4px;padding-right:54px}.replay{position:absolute;right:8px;top:0}.navigation{margin-top:12px}footer{margin-top:10px}
@media(min-width:700px){.app{padding:20px;min-height:800px}h1{font-size:25px}.stage{aspect-ratio:2.05}.answer{min-height:60px}.feedback{min-height:86px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]) *{scroll-behavior:auto}}

/* v0.1.1: a fixed aspect ratio keeps the raster rig and its held props together. */
#cat{left:42%;bottom:0;width:60%;height:auto;aspect-ratio:6/5;object-fit:initial}
.t1{left:33%;top:28%}.t2{left:34%;top:49%}.t3{left:5%;top:4%}
.key{left:35%;top:19%;width:10%;height:auto;aspect-ratio:54/58}
[data-answer=B] .bag{width:42%}
.calculation{left:8%;top:7%}

.scene-badge{top:6px;padding:3px 9px}
.asset-panel{margin:10px 0;padding:12px;border:1px solid #ecd5aa;border-radius:12px;background:#fff3db;color:#6b481c;font-size:12px;line-height:1.7}
.asset-panel .secondary{display:block;margin-top:9px;min-height:44px}

/* Q14: reserve a chat area and a separate thought strip; never overlay messages. */
.stage{overflow:clip}
.stage[data-question="14"]{container-type:inline-size}
.stage[data-question="14"] .chat-window{left:5%;top:14%;width:45%;height:76%;padding:5px;font-size:clamp(7px,2.3cqw,10px);display:flex;flex-direction:column;gap:5%;overflow:hidden}
.stage[data-question="14"] .chat-header{height:19%;min-height:0;flex-shrink:0;font-size:1em;padding:0 5%;gap:4%}
.stage[data-question="14"] .avatar{width:8%;height:auto;aspect-ratio:1;flex-shrink:0}
.stage[data-question="14"] .bubble{width:86%;margin:0;padding:4% 5%;font-size:.9em;line-height:1.2;flex-shrink:0}
.stage[data-question="14"] .bubble.sent{margin-left:auto}
.stage[data-question="14"] .read{margin:0;font-size:.83em;line-height:1.2}
.stage[data-question="14"] .waiting{bottom:2%;left:6%;font-size:1em;line-height:1}
.stage[data-question="14"][data-answer="B"] .chat-window{top:12%;height:61%}
.stage[data-question="14"][data-answer="B"] .chat-header{height:20%}
.stage[data-question="14"][data-answer="B"] .waiting{display:none}
.stage[data-question="14"] .thought{font-size:clamp(6px,1.95cqw,9px);line-height:1.3;padding:3px 5px;white-space:nowrap;max-width:none;min-width:0;width:auto;height:auto;bottom:auto;right:auto}
.stage[data-question="14"] .t1{left:5%;top:77%}
.stage[data-question="14"] .t2{left:28%;top:77%}
.stage[data-question="14"] .t3{left:10%;top:91%;border:0;background:none;padding:0;font-size:clamp(6px,1.75cqw,8px)}
.stage[data-question="14"] .chat-window{font-size:clamp(8px,2.5cqw,11px)}
.stage[data-question="14"] .bubble{font-size:1em}
.stage[data-question="14"] .thought{font-size:clamp(8px,2.1cqw,10px)}
.stage[data-question="14"] .t3{font-size:8px}

/* Two thought bubbles carry the Q14 reaction without a tiny third caption. */
.stage[data-question="14"] .t3{display:none}