@import url('../../_shared/brand.css');
:root{color-scheme:light dark;--paper:#f5f2e9;--panel:#fffdf7;--ink:#142b28;--muted:#5c6f66;--line:#d7ddd2;--accent:#255d49;--lime:#d3ed85;--shadow:0 16px 50px #142b2810;--radius:22px;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button,input,select,a{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select,input{color:inherit}button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:11px 16px;font-weight:650;touch-action:manipulation}button:hover{border-color:var(--accent)}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #89b94e;outline-offset:3px}a{color:var(--accent)}[hidden]{display:none!important}.mast{height:66px;padding:0 max(20px,calc((100vw - 1340px)/2));display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:850;letter-spacing:.08em}.brand span{font-size:9px;color:var(--muted);letter-spacing:.14em;margin-left:10px}.back{margin-left:auto;font-size:13px;text-decoration:none}.mast button{padding:6px 12px}#nav{display:flex;gap:6px;overflow-x:auto;padding:11px max(18px,calc((100vw - 1340px)/2));position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);scrollbar-width:thin}#nav button{white-space:nowrap;background:transparent;border-color:transparent;font-size:13px;padding:8px 15px}#nav button[aria-current]{background:var(--ink);color:var(--paper)}#collection-meter{max-width:1280px;margin:12px auto 0;padding:0 22px;display:flex;gap:13px;align-items:center;font-size:12px;color:var(--muted)}progress{accent-color:var(--accent);height:6px;width:110px;border:0}#app{max-width:1300px;margin:0 auto;min-height:65vh;padding:22px 26px 60px}.eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:var(--muted);margin:0 0 14px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(33px,4.6vw,65px);line-height:1.15;letter-spacing:-.04em;margin-bottom:24px}h2{font-size:clamp(25px,3vw,38px);line-height:1.25;letter-spacing:-.025em;margin-bottom:16px}h3{font-size:20px;line-height:1.4}.lead{font-size:16px;line-height:1.9;color:var(--muted);max-width:800px}p{line-height:1.85}.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);display:inline-flex;justify-content:center;align-items:center;text-decoration:none}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}.tag{display:inline-flex;font-size:11px;letter-spacing:.04em;border:1px solid var(--line);padding:5px 10px;border-radius:30px;color:var(--muted);gap:5px}.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}.intro{display:grid;grid-template-columns:1fr 1.05fr;background:#101e1a;color:#f6f5e9;border-radius:28px;overflow:hidden;min-height:570px}.intro-copy{padding:46px 40px;display:flex;flex-direction:column;justify-content:center}.intro h1{font-weight:600}.intro .lead,.intro .eyebrow{color:#b6c9b8}.intro .primary{background:var(--lime);color:#132820}.intro-art{position:relative;min-height:350px;overflow:hidden;background:#172a22}.intro-art>img{height:100%;width:100%;object-fit:cover;opacity:.8}.intro-label{position:absolute;bottom:24px;left:24px;right:24px;color:#fff;font-size:12px;background:#101e1ac9;padding:12px;border:1px solid #ffffff26;border-radius:12px;pointer-events:none}.follow-eye{position:absolute;right:25px;top:25px;width:86px;height:52px;border-radius:65% 40%;background:#ddbd70;border:4px solid #0b160f;overflow:hidden;box-shadow:0 0 40px #d3ed8544;pointer-events:none}.follow-eye i{position:absolute;left:33px;top:3px;width:13px;height:40px;border-radius:80%;background:#0a110c;transform:translate(var(--ex,0px),var(--ey,0px))}.intro-stats{display:flex;gap:24px;margin-top:30px;color:#c5d9c5;font-size:12px}.intro-stats b{display:block;font-size:27px;color:#edf7d3;font-weight:500}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:5px 0 24px}.section-head .lead{margin:0}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:28px}.level-card{text-align:left;padding:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}.level-card img{width:100%;height:140px;object-fit:cover;display:block}.level-card>div{padding:18px}.level-card h3{font-size:18px;margin-bottom:8px}.level-card p{font-size:12px;margin:0;color:var(--muted)}.level-card .number{position:absolute;top:12px;left:12px;color:white;background:#122a24d9;border-radius:20px;padding:5px 10px;font-size:11px}.question-head{display:flex;align-items:center;gap:15px;margin-bottom:16px}.question-head progress{flex:1;width:auto}.question-head h2{font-size:16px;margin:0}.question-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:25px;align-items:start}.eye-stage{position:relative;border-radius:24px;overflow:hidden;background:#13221d;aspect-ratio:1}.eye-stage img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s,transform .5s}.eye-stage.reveal{animation:blink .5s}.stage-chip{position:absolute;bottom:16px;left:16px;right:16px;display:flex;gap:8px;align-items:center;pointer-events:none}.stage-chip span{border-radius:30px;background:#0d201bd9;color:#fff;padding:6px 12px;font-size:11px}.question-copy{padding:6px 0}.question-copy h2{font-size:clamp(23px,2.6vw,34px)}.help{font-size:13px;color:var(--muted);line-height:1.8}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 12px}.answer-grid button{min-height:64px;text-align:left;padding:12px;display:flex;gap:10px;align-items:center;font-size:14px}.answer-grid .key{font-size:10px;min-width:21px;text-align:center;padding:3px;background:var(--paper);border-radius:5px;color:var(--muted)}.answer-grid .correct{border:2px solid #4d8761;background:#dcebdc;color:#163420}.answer-grid .wrong{border:2px solid #bd775e;background:#f4e3d5;color:#5e3220}.feedback{margin-top:15px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}.feedback h3{margin-bottom:12px}.feedback p{font-size:14px}.status-good{color:#376e45}.status-wrong{color:#a1502d}.feedback .mechanism{margin-top:16px}.diagram{width:100%;height:auto;max-height:250px;border:1px solid var(--line);background:var(--paper);border-radius:15px;margin:12px 0}.diagram text{fill:var(--ink);font:12px sans-serif}.diagram .ray{stroke:#b3994a;stroke-width:2;fill:none}.diagram .tissue{fill:#a1bba3;stroke:#456c56;stroke-width:2}.diagram .photo{fill:#273f35}.diagram .accent{fill:#d3bd66}.diagram path,.diagram circle{vector-effect:non-scaling-stroke}details{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-size:13px;font-weight:750;line-height:1.7}details li{font-size:12px;line-height:1.8;margin-bottom:10px;overflow-wrap:anywhere}.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.compare>div{padding:12px;border:1px solid var(--line);border-radius:12px;font-size:12px}.pupil{height:95px;width:100%;color:var(--ink)}.pupil svg{width:100%;height:100%}.score-box{text-align:center;padding:40px 20px;background:var(--panel);border:1px solid var(--line);border-radius:24px}.score-big{font-size:72px;line-height:1;margin:20px 0}.score-big small{font-size:25px;color:var(--muted)}.badge{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime);color:#23422e;font-size:28px;border:3px double #42613f}.badges{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:30px 0}.badge-item{text-align:center;max-width:130px;font-size:12px}.badge-item.locked{opacity:.4}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.animal-card,.record-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.animal-card img{display:block;aspect-ratio:1;width:100%;object-fit:cover}.animal-card>div{padding:15px}.animal-card h3{font-size:16px;margin-bottom:3px}.animal-card .latin{font-size:10px;font-style:italic;color:var(--muted);overflow-wrap:anywhere}.animal-card button{width:100%;font-size:12px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.filters input,.filters select,.control select{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}.filters input{flex:1;min-width:180px}.pagination{display:flex;justify-content:center;gap:12px;margin:24px 0}.detail-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:22px}.detail-grid img{width:100%;border-radius:20px}.data-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0}.data-list>div{padding:12px;background:var(--panel);font-size:12px}.data-list dt{color:var(--muted);margin-bottom:6px}.data-list dd{margin:0;line-height:1.6}.credit{font-size:10px;color:var(--muted);line-height:1.6;margin:8px 0}.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.flip{height:340px;perspective:1400px;border:0;background:none;padding:0;cursor:pointer}.flip-inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.flip.flipped .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;backface-visibility:hidden;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-align:left}.flip-front img{width:100%;height:220px;object-fit:cover}.flip-front>div{padding:15px}.flip-front h3{font-size:17px;margin:0 0 4px}.flip-front p{font-size:11px;color:var(--muted)}.flip-back{transform:rotateY(180deg);padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.flip-back h3{font-size:19px}.flip-back p{font-size:14px}.record-wrap details{padding:0 12px 10px}.evo-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:25px}.panel-box{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:22px}.evo-layout .diagram{max-height:none}.steps{display:flex;justify-content:space-between;gap:5px;font-size:10px;color:var(--muted);margin:10px 0}.steps span{max-width:20%;text-align:center}.control{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;font-size:13px}.control input[type=range]{width:100%;accent-color:var(--accent)}input[type=range]{min-height:28px;cursor:pointer}.vision-work{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}.vision-stage{aspect-ratio:1.5;position:relative;border-radius:22px;overflow:hidden;background:#18251e}.vision-stage canvas{width:100%;height:100%;display:block;object-fit:contain}.vision-stage .canvas-labels{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none}.canvas-labels span{font-size:10px;background:#10231bd9;color:#fff;padding:5px 10px;border-radius:20px}.vision-stage input[type=range]{position:absolute;bottom:12px;left:5%;width:90%;accent-color:#d3ed85}.vision-options{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.switch{display:flex;align-items:center;gap:8px;margin:13px 0;font-size:12px}.switch input{accent-color:var(--accent)}.vision-stats{font-size:11px;line-height:1.8;color:var(--muted);margin-top:12px}.vision-foot{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.vision-foot canvas{width:100%;border-radius:12px}.notice{font-size:12px;color:var(--muted);border-left:3px solid #94aa58;padding-left:12px;line-height:1.8;margin:15px 0}.height-chart{height:280px;background:var(--paper);border:1px solid var(--line);position:relative;border-radius:15px;margin:18px 0 40px;touch-action:none}.height-chart .zone{position:absolute;inset:0 50% 0 0;border-right:1px dashed var(--muted)}.height-chart .zone+ .zone{left:50%;right:0;border:0}.zone span{position:absolute;bottom:-28px;left:10px;font-size:11px}.point{position:absolute;border-radius:30px;font-size:11px;padding:5px 8px;background:var(--panel);border:1px solid var(--line)}.prediction-token{display:inline-block;background:var(--lime);color:#25462e;padding:12px 18px;border-radius:12px;cursor:grab;touch-action:none;margin:12px 0}.chart-axes{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.result-line{font-size:12px;color:var(--accent);min-height:22px}.favourite{max-width:420px;width:100%;margin:15px auto;display:flex;gap:10px;flex-direction:column;text-align:left;font-size:13px}.favourite select{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.collection-list{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}.collection-list span{font-size:12px;border:1px solid var(--line);padding:6px 10px;border-radius:30px}.collection-list .new{background:var(--lime);color:#243f29}dialog{width:min(1000px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;padding:32px;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--ink)}dialog::backdrop{background:#071912ba;backdrop-filter:blur(5px)}.close{display:block;margin:0 0 18px auto;border-radius:50%;font-size:23px;padding:4px 13px}#poster-dialog{max-width:650px}#poster{width:100%;height:auto;border-radius:15px}footer{padding:25px 25px 80px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:11px;line-height:1.7}#toast{position:fixed;bottom:75px;left:50%;transform:translateX(-50%);max-width:90vw;border-radius:15px;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:100;pointer-events:none;opacity:0;transition:opacity .2s;font-size:13px}#toast.show{opacity:1}.paimm-language-switch{z-index:80!important}#time-canvas{background:var(--paper)}@keyframes blink{0%,100%{opacity:1}45%{opacity:.3}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#10201b;--panel:#172b23;--ink:#e9eedf;--muted:#b0bfae;--line:#344c3d;--accent:#bcda9b;--shadow:none}}:root[data-theme=dark]{--paper:#10201b;--panel:#172b23;--ink:#e9eedf;--muted:#b0bfae;--line:#344c3d;--accent:#bcda9b;--shadow:none}@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}.record-grid{grid-template-columns:repeat(2,1fr)}.intro-copy{padding:35px 28px}.vision-work{grid-template-columns:minmax(0,1fr) 235px}.intro{min-height:510px}}@media(max-width:640px){.mast{height:54px;padding:0 16px;gap:12px}.brand span{display:none}.brand img{width:25px;height:25px}.back{font-size:11px}#nav{padding:7px 12px;gap:3px}#nav button{font-size:12px;padding:7px 11px}#collection-meter{margin-top:9px;padding:0 16px;font-size:10px}#app{padding:18px 15px 40px}.intro{display:flex;flex-direction:column-reverse;min-height:0;border-radius:20px}.intro-art{height:255px;min-height:0}.intro-copy{padding:27px 23px}.intro-copy h1{font-size:36px;margin-bottom:17px}.intro .lead{font-size:14px}.intro-stats{margin-top:20px}.intro-label{bottom:13px;left:14px;right:14px;font-size:10px;padding:9px}.follow-eye{width:64px;height:40px;right:14px;top:14px}.follow-eye i{left:23px;top:2px;height:29px;width:10px}.section-head{flex-direction:column;gap:8px;margin-bottom:17px}.lead{font-size:14px;line-height:1.85}.level-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.level-card img{height:100px}.level-card>div{padding:13px}.level-card h3{font-size:14px}.level-card p{font-size:10px}.question-layout{grid-template-columns:1fr;gap:14px}.eye-stage{aspect-ratio:1.35;max-height:310px}.eye-stage img{object-fit:cover}.question-head h2{font-size:13px}.question-head{gap:8px;font-size:11px;margin-bottom:10px}.question-copy{padding:0}.question-copy h2{font-size:23px;margin-bottom:8px}.question-copy .help{font-size:11px;margin-bottom:8px}.answer-grid{margin:10px 0;gap:7px}.answer-grid button{min-height:49px;font-size:12px;padding:8px;gap:6px}.answer-grid .key{min-width:17px;font-size:9px}.question-copy .actions{margin-top:10px;gap:7px}.actions button{font-size:12px;padding:10px 13px}.feedback{padding:16px;margin-top:13px}.feedback p{font-size:13px}.grid{grid-template-columns:1fr 1fr;gap:10px}.animal-card>div{padding:12px}.animal-card h3{font-size:13px}.animal-card .latin{font-size:9px}.record-grid{grid-template-columns:1fr}.flip{height:360px}.flip-front img{height:250px}.detail-grid,.evo-layout{grid-template-columns:1fr}.detail-grid img{max-height:280px;object-fit:contain;background:var(--paper)}.evo-layout{gap:18px}.evo-layout .diagram{max-height:240px}.panel-box{padding:18px}.vision-work{display:flex;flex-direction:column;gap:12px}.vision-stage{width:100%;aspect-ratio:1.35}.vision-options{width:100%;padding:13px;display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.vision-options .control{font-size:11px;margin-bottom:8px}.vision-options .switch{font-size:10px;margin:7px 0}.vision-options .control select{font-size:11px;padding:7px}.vision-options .wide{grid-column:1/-1}.vision-stats{font-size:10px}.vision-foot{grid-template-columns:1fr;gap:14px}.vision-foot .panel-box{padding:16px}.filters{gap:7px}.filters input,.filters select{font-size:12px;padding:8px}.favourite{font-size:12px}dialog{padding:18px;border-radius:18px}.data-list>div{padding:10px;font-size:11px}.score-box{padding:25px 16px}.score-big{font-size:58px}.badge{height:54px;width:54px;font-size:24px}.badge-item{max-width:95px;font-size:10px}.badges{gap:12px}.steps{font-size:8px}.height-chart{height:270px}.point{font-size:9px;padding:4px 6px}footer{font-size:10px;padding:20px 18px 100px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.eye-stage.reveal img{object-fit:contain}.evo-layout>.panel-box>img{width:100%;height:300px;object-fit:cover;border-radius:16px}@media(max-width:640px){.evo-layout>.panel-box>img{height:200px}}

.vision-quick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}.vision-quick .control{font-size:12px;margin:0}.vision-quick select{width:100%;font-size:12px;padding:8px}
@media(max-width:640px){.game-active .eye-stage{height:clamp(150px,27dvh,185px);aspect-ratio:auto}.game-active .question-layout{gap:10px}.game-active .credit,.game-active .question-copy>.eyebrow{display:none}.game-active .question-copy h2{font-size:21px}.game-active .question-copy>.help{line-height:1.6}.game-active .question-head{margin-bottom:9px}.game-active .question-head button{padding:8px}.game-active .answer-grid{gap:6px}.game-active .answer-grid button{min-height:45px}.game-active .feedback{margin-top:13px}.vision-work>.vision-options{margin-top:10px}}
.flip{display:block;width:100%}

#app{scroll-margin-top:65px}
.intro button:not(.primary){background:transparent;color:#f0f4df;border-color:#8f9f87}.intro-art>img{object-fit:contain}

.ecology-cases{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.ecology-cases button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.ecology-task{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}.ecology-thumb img{width:100%;height:115px;object-fit:contain;border-radius:12px;background:var(--paper)}.ecology-grid{position:relative;height:275px;margin:24px 0 16px;background:var(--paper);border:1px solid var(--line);border-radius:15px;overflow:hidden}.ecology-column{position:absolute;inset:0 50% 0 0;border-right:1px dashed var(--line)}.ecology-column+ .ecology-column{left:50%;right:0;border:0}.ecology-column>span{display:block;text-align:center;padding-top:10px;font-size:12px;color:var(--muted)}.ecology-row-label{position:absolute;left:8px;top:28%;font-size:11px;color:var(--muted)}.ecology-row-label.second{top:70%}.ecology-grid .prediction-result{z-index:2;font-weight:750}.ecology-grid .placed-correct{background:#dcebdc;color:#163420;border-color:#4d8761}.ecology-grid .placed-wrong{background:#f4e3d5;color:#5e3220;border-color:#bd775e}#ecology-lab .prediction-token{position:relative;z-index:3}#ecology-lab .help{font-size:12px}@media(max-width:640px){.ecology-task{grid-template-columns:75px 1fr;gap:12px}.ecology-thumb img{height:80px}.ecology-task p{font-size:12px;margin:0}.ecology-task .prediction-token{padding:10px;font-size:12px}.ecology-grid{height:240px}.ecology-grid .point{font-size:10px}.ecology-row-label{font-size:9px;max-width:55px}.ecology-cases button{font-size:12px;padding:8px 11px}}

.level-new{position:absolute;right:12px;top:12px;background:var(--lime);color:#23422e;font-size:10px;border-radius:20px;padding:5px 9px}
