:root{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:#25354b;background:#fff9eb;font-synthesis:none;line-height:1.6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 3% 36%,#c9f0e280,transparent 32%),radial-gradient(circle at 95% 80%,#ffd5d480,transparent 32%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:700;background:#fff;border:2px solid #ddd6c8;border-radius:14px;padding:11px 19px;color:#25354b;cursor:pointer;transition:transform .15s,box-shadow .15s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 #25354b15}button:focus-visible,a:focus-visible{outline:4px solid #7757cd;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.primary{background:#6044ac;border-color:#6044ac;color:white;box-shadow:0 4px 0 #392571}header{max-width:1400px;margin:auto;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:24px;font-weight:900}.brand>span{font-size:42px}.brand small{display:block;font-size:13px;font-weight:500;color:#67716e}nav{display:flex;justify-content:center;gap:20px;padding:8px 24px 22px}nav span{display:flex;align-items:center;gap:9px;color:#77786c;font-weight:700}nav b{display:grid;place-items:center;width:32px;height:32px;background:#eae4d7;border-radius:50%;font-size:15px}nav .active{color:#6044ac}nav .active b{background:#6044ac;color:#fff}nav .passed b{background:#ccebdc;color:#245f4e}main{max-width:1320px;margin:auto;padding:0 32px 32px}.story{background:white;border:2px solid #eee4d3;border-radius:30px;display:grid;grid-template-columns:1fr 1.05fr;overflow:hidden;box-shadow:0 10px 0 #f1e8d7}.picture{position:relative;min-height:560px}.art{background-image:url('assets/rainbow-zoo.png');background-size:300% 100%;background-position:calc(var(--scene) * 50%) center;aspect-ratio:1/1;width:100%;border-radius:20px}.picture .art{border-radius:0;height:100%;aspect-ratio:auto;background-size:auto 100%;background-position:calc(var(--scene) * 50%) center}.sticker{position:absolute;bottom:22px;left:22px;background:#ffe47b;border:3px solid white;padding:8px 20px;border-radius:12px;font-weight:900;transform:rotate(-3deg);font-size:22px;box-shadow:0 4px 10px #0002}.story-copy{padding:28px 32px}.eyebrow{color:#87521f;font-size:15px;letter-spacing:1px;font-weight:800;margin:0 0 9px}h1{font-size:clamp(28px,3vw,42px);line-height:1.3;margin:0 0 20px;letter-spacing:-1px}.story-copy>p:not(.eyebrow){font-size:clamp(19px,1.8vw,24px);margin:0 0 19px}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:25px}.center{justify-content:center}.quiet{display:block;color:#78796d;margin-top:16px}.heading{text-align:center;margin:5px 0 20px}.heading h1{margin-bottom:8px}.heading>p:last-child{font-size:22px;margin:0}.instructions{display:flex;justify-content:center;align-items:center;gap:24px;background:#fff0bc;border-radius:18px;padding:12px 20px;margin:0 auto 24px;font-size:18px}.instructions button{font-size:15px;padding:7px 12px}.boards{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1060px;margin:auto}.board{border:3px solid #91cec9;background:#effbf9;border-radius:24px;padding:24px;box-shadow:0 7px 0 #b7ddd6}.board.pink{background:#fff1f0;border-color:#ecaca8;box-shadow:0 7px 0 #efd1c8}.person{display:flex;align-items:center;gap:16px;margin-bottom:18px}.person>span{font-size:42px;background:white;display:grid;place-items:center;border-radius:50%;width:74px;height:74px}.person h2{font-size:30px;margin:0}.person p{margin:0;font-size:16px}.cards{display:grid;gap:14px}.card{position:relative;display:block;text-align:left;background:#fffefa;border:2px solid #cfc5af;box-shadow:0 4px 0 #dfd4bb;padding:16px 20px;font-size:24px;line-height:1.5;min-height:100px}.card small{display:block;font-size:13px;color:#817559;margin-bottom:4px}.card.selected{border-color:#6044ac;box-shadow:0 0 0 4px #bea6ed;background:#f7f0ff}.card:disabled{opacity:1;border-color:#6eaa8c;box-shadow:none}.swap-tip{text-align:center;margin:22px 0 6px;font-size:17px}.feedback{text-align:center;min-height:30px;font-size:19px;font-weight:700;color:#9a4b22}.feedback.success{color:#2c775e}.final h3{font-size:16px;margin:18px 0 4px;color:#526261}.final .board>p{font-size:23px;margin:0}.evidence{background:#fffdf5;border-radius:14px;padding:16px;margin-top:18px}.evidence p{margin:5px 0 0;font-size:18px}.takeaway{text-align:center;font-size:21px;margin-top:26px}dialog{border:0;border-radius:24px;padding:32px;max-width:780px;width:calc(100% - 32px);max-height:88vh;box-shadow:0 20px 100px #18212944;color:#25354b;line-height:1.8}dialog::backdrop{background:#1d284866;backdrop-filter:blur(4px)}dialog h2{font-size:29px;margin-top:8px}dialog p,dialog li{font-size:19px}dialog li{margin-bottom:12px}.close{position:sticky;top:0;float:right;border:0;background:#f2eee5;font-size:25px;padding:0;width:42px;height:42px;z-index:1}.review{border-top:2px dashed #e4d8c0;padding:24px 0;overflow:auto}.review .art{width:220px;float:left;margin:0 22px 14px 0}.review h3{margin-top:0}@media(min-width:1500px){main{padding-top:16px}.picture{min-height:620px}}@media(max-width:900px){header{padding:15px 20px}.story{grid-template-columns:1fr}.picture{min-height:0;aspect-ratio:1.3}.picture .art{background-size:300% auto}.story-copy{padding:25px}.instructions{flex-wrap:wrap;gap:10px}.card{font-size:21px}.board{padding:18px}.brand{font-size:20px}nav{gap:12px;font-size:14px}main{padding:0 18px 30px}}@media(max-width:580px){.boards{grid-template-columns:1fr;gap:20px}.brand small{font-size:10px}header>button{font-size:13px;padding:9px}nav{gap:10px;padding:6px 10px 16px}nav span{gap:4px;font-size:12px}nav b{width:24px;height:24px;font-size:12px}.picture{aspect-ratio:1}.story-copy>p:not(.eyebrow){font-size:20px}.actions button{flex:1}.person{margin-bottom:12px}.card{min-height:80px}.review .art{float:none;width:100%;margin-right:0}.heading>p:last-child{font-size:18px}.instructions{font-size:16px}dialog{padding:24px}.final .board>p{font-size:21px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.chapter-nav{display:flex;justify-content:center;gap:10px;margin:0 16px 15px}.chapter-nav button{font-size:15px;padding:7px 16px;background:#fffdf8}.witnesses{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1060px;margin:auto}.witnesses section{background:#fff;border:2px solid #d9cdec;border-radius:22px;padding:20px 24px}.witnesses span{float:left;font-size:42px;margin-right:16px}.witnesses h2{font-size:23px;margin:0 0 5px}.witnesses p{font-size:22px;margin:0}.investigate-hint{text-align:center;font-size:19px;margin:24px 0 18px}.places{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1060px;margin:auto}.place{display:flex;flex-direction:column;align-items:center;background:#fff2b9;border-color:#e1bc55;padding:18px}.place:nth-child(2){background:#e4f3fa;border-color:#99c4d9}.place:nth-child(3){background:#ffe9e7;border-color:#e4aaa4}.place>span{font-size:46px}.place>b{font-size:24px}.place>small{font-size:14px;font-weight:500}.place.opened{border-style:dashed}.chosen{outline:3px solid #7350bb;outline-offset:3px}.clue-panel{max-width:1060px;margin:24px auto 0;background:#fff;border:3px solid #bea9de;border-radius:22px;padding:25px 30px}.clue-panel h2{font-size:28px;margin:0 0 10px}.clue-panel>p{font-size:21px;margin:8px 0}.clue-panel>p.eyebrow{font-size:15px}.clue-panel .clue-quote{font-size:25px;font-weight:700}.thinking-question{background:#fff3c6;border-radius:12px;padding:10px 16px;font-size:20px;margin-top:18px}.relay{border-top:2px dashed #ddd3ed;margin-top:20px;padding-top:18px}.relay>b{font-size:19px}.relay p{font-size:21px;margin:7px 0 15px}.relay small{margin-left:14px;color:#777}.thought{max-width:1060px;margin:24px auto 0;text-align:center}.thought h2{font-size:23px;margin:0}.thought p{font-size:17px}.thought-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.thought-note{min-height:28px;color:#6044ac}.finish-investigation{max-width:1060px;margin:24px auto;background:#e4f3e5;border:2px solid #a2c6a7;border-radius:20px;padding:24px;text-align:center}.finish-investigation h2{margin:0;font-size:26px}.finish-investigation p{font-size:21px}.center-text{text-align:center}@media(max-width:600px){.witnesses{grid-template-columns:1fr;gap:12px}.witnesses p{font-size:20px}.places{gap:10px}.place{padding:12px 5px}.place>b{font-size:17px}.place>small{font-size:11px}.place>span{font-size:36px}.clue-panel{padding:20px}.clue-panel .clue-quote{font-size:22px}.relay small{display:block;margin:10px 0 0}.chapter-nav button{font-size:13px}}
.chapter-nav{flex-wrap:wrap}.ticket-background,.context-note,.ending{max-width:1060px;margin:20px auto;background:#fff0bd;padding:20px 24px;border-radius:18px;font-size:20px}.ending p,.context-note p{margin:8px 0}.judge-how{text-align:center;font-size:22px;margin:28px auto}.judge-how h2{font-size:27px}.evidence-sheet{max-width:1000px;margin:24px auto 0;background:#fff;border:3px solid #8dbccf;border-radius:18px;padding:24px 30px;box-shadow:0 7px 0 #c5dee7}.evidence-text{font-size:26px;line-height:1.8;margin:10px 0}.claim-box{max-width:1000px;margin:25px auto;background:#ffefb2;border-radius:18px;padding:20px 26px}.claim-box h2{font-size:25px;margin:5px 0}.judgment-options{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:24px auto}.judgment-options button{font-size:23px;min-width:250px;padding:17px 25px}.judgment-options button:disabled{opacity:1}.standalone{text-align:center;border:0;margin-top:20px}.judge-result{max-width:1000px;margin:24px auto;background:#e4f2eb;border:2px solid #8fbea6;border-radius:18px;padding:20px 26px;font-size:21px}.judge-result h2{font-size:25px;margin:0 0 10px}.judge-result p{margin-bottom:0}.evidence-summary{max-width:1060px;margin:25px auto;background:#fff;border-radius:20px;padding:24px;font-size:20px}.evidence-summary dt{font-weight:bold;color:#6044ac;margin-top:17px}.evidence-summary dd{margin:4px 0 0}@media(max-width:600px){.evidence-text{font-size:22px}.evidence-sheet,.claim-box{padding:20px}.judgment-options{gap:15px}.judgment-options button{min-width:0;width:100%;font-size:21px}.ticket-background{font-size:18px}.claim-box h2{font-size:22px}.heading p{line-height:1.6}}

/* Large touch displays: size with the viewport, while preserving page scrolling. */
.toolbar{display:flex;gap:12px;align-items:center}button{touch-action:manipulation}.clue-panel{scroll-margin-top:18px}
@media(min-width:1000px){
 :root{font-size:clamp(18px,1.46vw,30px);line-height:1.5}
 header{max-width:none;padding:10px 2.5vw;gap:12px}
 .brand{font-size:1em}.brand>span{font-size:1.5em}.brand small{font-size:.66em}
 button{font-size:1em;min-height:54px;padding:10px 20px}
 .toolbar button{font-size:.8em;min-height:48px}
 .chapter-nav{margin:0 2vw 6px;gap:16px}.chapter-nav button{font-size:.85em;min-height:48px;padding:6px 20px}
 nav{font-size:.8em;gap:24px;padding:5px 16px 12px}nav b{font-size:.8em;width:1.65em;height:1.65em}
 main{max-width:1920px;width:100%;padding:0 2.5vw 24px}
 h1{font-size:1.7em;margin-bottom:14px}.eyebrow{font-size:.78em}
 .story{grid-template-columns:.9fr 1.1fr;min-height:calc(100dvh - 224px)}
 .picture{min-height:0}.picture .art{min-height:100%;background-size:auto 100%}
 .story-copy{padding:clamp(20px,2vw,40px);display:flex;flex-direction:column;justify-content:center}
 .story-copy>p:not(.eyebrow){font-size:1.08em;line-height:1.65;margin-bottom:16px}
 .story-copy .actions{margin-top:auto;padding-top:14px}.story-copy .quiet{font-size:.7em;margin-top:12px}
 .heading{margin:0 0 14px}.heading>p:last-child{font-size:1em}
 .instructions{font-size:.9em;padding:10px 18px;margin-bottom:16px}.instructions button{font-size:.85em;min-height:48px}
 .boards,.witnesses,.places,.clue-panel,.thought,.finish-investigation,.ticket-background,.context-note,.ending,.evidence-summary{max-width:1640px}
 .boards{gap:28px}.board{padding:20px 26px}.person{margin-bottom:12px}.person h2{font-size:1.3em}.person p{font-size:.8em}.person>span{width:60px;height:60px;font-size:1.6em}
 .card{font-size:1.15em;min-height:84px;padding:12px 20px}.card small{font-size:.65em}.cards{gap:12px}
 .actions{margin-top:16px}.swap-tip{font-size:.85em;margin-top:16px}.feedback{font-size:.9em;min-height:1.5em}
 .final h3{font-size:.85em;margin-top:14px}.final .board>p{font-size:1.08em}.evidence p{font-size:.92em}.evidence{padding:14px;margin-top:14px}.takeaway{font-size:1em;margin-top:20px}
 .witnesses h2{font-size:1.1em}.witnesses p{font-size:1em}.witnesses section{padding:16px 22px}
 .ticket-background,.context-note,.ending{font-size:1em;margin:16px auto;padding:16px 24px}
 .investigate-hint{font-size:.9em;margin:16px 0}.place{padding:12px}.place>span{font-size:1.5em}.place>b{font-size:1.05em}.place>small{font-size:.72em}
 .clue-panel{padding:22px 28px;margin-top:20px}.clue-panel h2{font-size:1.25em}.clue-panel>p{font-size:1em}.clue-panel>p.eyebrow{font-size:.8em}.clue-panel .clue-quote{font-size:1.14em}.thinking-question{font-size:1em;margin-top:12px}
 .relay{margin-top:16px;padding-top:12px}.relay>b{font-size:.9em}.relay p{font-size:1em;margin:8px 0 12px}.relay small{font-size:.75em}
 .thought h2,.finish-investigation h2{font-size:1.15em}.thought p{font-size:.85em}.finish-investigation p{font-size:1em}.quiet{font-size:.8em}
 .judge-how{font-size:1em;margin:18px auto}.judge-how h2{font-size:1.2em;margin:10px}.judge-how p{margin:12px}
 .evidence-sheet,.claim-box,.judge-result{max-width:1640px;margin:16px auto;padding:16px 24px}
 .evidence-text{font-size:1.15em;line-height:1.6;margin:8px 0}.claim-box h2{font-size:1.1em}.judgment-options{gap:24px;margin:16px auto}.judgment-options button{font-size:1.05em;min-width:300px;min-height:60px;padding:12px 24px}
 .judge-result{font-size:1em}.judge-result h2{font-size:1.1em}.judge-result p{margin:8px 0 0}.evidence-summary{font-size:1em}
 dialog{max-width:1300px;font-size:1em}dialog p,dialog li{font-size:1em}dialog h2{font-size:1.4em}.close{width:56px;height:56px;min-height:56px}
}
@media(min-width:1000px) and (max-height:800px){
 header{padding-top:6px;padding-bottom:6px}.brand small{display:none}.chapter-nav button{min-height:44px}nav{padding-bottom:8px}.story{min-height:calc(100dvh - 178px)}.story-copy{padding:20px 26px}.story-copy>p:not(.eyebrow){margin-bottom:12px}.story-copy .quiet{margin-top:8px}
}
@media(max-width:580px){.toolbar{gap:5px}.toolbar button{font-size:12px;padding:8px}.brand>span{font-size:30px}}

/* Storybook illustrations share the original zoo's painterly visual style. */
.painted{background-repeat:no-repeat;background-size:300% 200%;background-position:calc(var(--col)*50%) calc(var(--row)*100%);aspect-ratio:1;width:150px;flex-shrink:0;border-radius:18px;border:3px solid #fff;box-shadow:0 4px 12px #33442b18}
.painted.characters{background-image:url('assets/characters-atlas.png')}.painted.scenes{background-image:url('assets/scenes-atlas.png')}
.person .painted{width:clamp(120px,9vw,175px)}
.witnesses section{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}.witnesses .painted{grid-row:1/3;width:clamp(120px,10vw,190px)}.witnesses h2{align-self:end}.witnesses p{align-self:start}
.place .place-art{width:100%;max-width:160px;margin-bottom:8px}.place{overflow:hidden}
.clue-panel{display:flow-root}.clue-panel .clue-art{float:left;width:clamp(200px,23vw,400px);margin:0 28px 12px 0}.clue-panel .relay{clear:both}
.illustrated-evidence{display:grid;grid-template-columns:clamp(170px,17vw,300px) 1fr;gap:28px;align-items:center;padding:14px 24px 14px 14px}.illustrated-evidence>.painted{width:100%}
@media(min-width:1000px){.illustrated-evidence .evidence-text{font-size:1.12em}.illustrated-evidence{margin-top:12px}.person{gap:22px}.place{display:grid;grid-template-columns:clamp(75px,7vw,130px) 1fr;gap:4px 14px;text-align:left}.place .place-art{grid-row:1/3;margin:0;max-width:none}.place>small{align-self:start}.place>b{align-self:end}.judgment-options{margin:12px auto}.illustrated-evidence~.claim-box{margin:12px auto}.illustrated-evidence~.relay{margin-top:12px;padding-top:8px}}
@media(max-width:600px){.painted,.person .painted{width:95px}.witnesses .painted{width:100px}.witnesses section{column-gap:12px}.place .place-art{width:100%;max-width:110px}.clue-panel .clue-art{float:none;width:min(100%,300px);margin:0 auto 18px}.illustrated-evidence{grid-template-columns:1fr;padding:18px}.illustrated-evidence>.painted{width:min(100%,260px);margin:auto}}
@media(min-width:1000px){
 #app:has(.illustrated-evidence){display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.55fr);column-gap:26px;align-items:start}
 #app:has(.illustrated-evidence)>.heading{grid-column:1/-1}
 #app>.illustrated-evidence{grid-column:1;grid-row:2/6;display:block;width:100%;margin:0;padding:18px}
 #app>.illustrated-evidence>.painted{width:min(100%,32vh);margin:0 auto 16px}
 #app>.illustrated-evidence .evidence-text{font-size:1.04em}
 #app:has(.illustrated-evidence)>.claim-box,#app:has(.illustrated-evidence)>.judgment-options,#app:has(.illustrated-evidence)>.relay,#app:has(.illustrated-evidence)>.judge-result,#app:has(.illustrated-evidence)>.actions{grid-column:2;width:100%;margin:0 0 14px}
 #app:has(.illustrated-evidence)>.judgment-options{gap:12px;flex-wrap:nowrap}
 #app:has(.illustrated-evidence)>.judgment-options button{min-width:0;flex:1;padding:12px}
}