/* 原理圖鑑 · 版面（接在 world.css 之後，沿用它的閱讀設定與色票） */
body{background:var(--zg-bg);margin:0;font-family:var(--zg-sans);color:var(--zg-ink);}
a{color:inherit;}
.pv{background:#2a2217;color:#f6ead6;font-size:12.5px;font-weight:700;padding:8px 16px;text-align:center;}
.pv a{color:#ffcc00;}

/* ── 鉤子：先猜，圖就是答案 ─────────────────────────────── */
.hw-hook{background:#fffaf0;border:2px solid var(--zg-egg);border-radius:20px;
  padding:22px 24px;margin:0 0 32px;}
.hk-q{font-size:calc(var(--wd-fs)*1.0);font-weight:900;line-height:1.9;margin:0 0 14px;}
.hk-opts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.hk-opt{flex:1 1 150px;background:#fff;border:2px solid var(--zg-line);border-radius:14px;
  padding:13px 14px;font:inherit;font-size:calc(var(--wd-fs)*.84);font-weight:800;
  cursor:pointer;min-height:48px;color:var(--zg-ink);}
.hk-opt:hover{border-color:var(--zg-brand);}
.hk-opt:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px;}
.hk-opt.ok{background:#e6f4de;border-color:var(--zg-leaf);color:#2f5a1c;}
.hk-opt.no{background:#fdeaea;border-color:#d98080;color:#8c2e2e;}
.hk-after{display:none;margin:14px 0 0;font-size:calc(var(--wd-fs)*.86);line-height:1.95;
  color:var(--zg-ink2);background:#fff;border-radius:12px;padding:14px 16px;}
.hk-after.on{display:block;}

/* ── 圖 ─────────────────────────────────────────────────── */
.hw-figure{margin:4px 0 26px;}
.hw-wrap{position:relative;display:block;line-height:0;}
.hw-svg,.hw-img{width:100%;height:auto;display:block;background:#fff;
  border-radius:14px;border:1px solid var(--zg-line);}
.hw-tall .hw-wrap{text-align:center;}
.hw-tall .hw-img{max-height:72vh;width:auto;max-width:100%;margin:0 auto;}
.hw-mk{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  background:var(--zg-brand-ink);color:#fff;border:2.5px solid #fff;font:700 14px/1 var(--zg-sans);
  font-style:normal;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);}
/* 停止＝回到第一格（animation:none），不是凍在半路，否則編號會對不上零件 */
.hw-figure.paused .anim{animation:none !important;}
@keyframes hw-spin{to{transform:rotate(360deg);}}
/* 颱風：北半球從上往下看是逆時針，所以是 -360，不能借用 hw-spin */
.a-ccw{transform-box:view-box;animation:hw-ccw 16s linear infinite;}
@keyframes hw-ccw{to{transform:rotate(-360deg);}}
.a-lever{animation:hw-lever 2.6s ease-in-out infinite alternate;}
@keyframes hw-lever{from{transform:rotate(0deg);}to{transform:rotate(-11deg);}}
.a-slide{animation:hw-slide 3s ease-in-out infinite alternate;}
@keyframes hw-slide{from{transform:translate(0,0);}to{transform:translate(88px,-38px);}}
.a-pin{animation:hw-pin 3s linear infinite;}
@keyframes hw-pin{0%{stroke-dashoffset:30;}45%{stroke-dashoffset:-230;}
                  45.01%,100%{stroke-dashoffset:-430;}}
.a-pout{animation:hw-pout 3s linear infinite;}
@keyframes hw-pout{0%,45%{stroke-dashoffset:30;}90%{stroke-dashoffset:-230;}
                   90.01%,100%{stroke-dashoffset:-430;}}
.a-wheel{transform-box:view-box;animation:hw-wheel 2.6s ease-in-out infinite alternate;}
@keyframes hw-wheel{from{transform:rotate(0deg);}to{transform:rotate(38deg);}}
.a-up{animation:hw-up 2.6s ease-in-out infinite alternate;}
@keyframes hw-up{from{transform:translateY(0);}to{transform:translateY(-40px);}}
.a-down{animation:hw-down 2.6s ease-in-out infinite alternate;}
@keyframes hw-down{from{transform:translateY(0);}to{transform:translateY(40px);}}
.a-flow{animation:hw-flow 1.6s linear infinite;}
@keyframes hw-flow{to{stroke-dashoffset:-46;}}
.a-heat{animation:hw-heat 1.6s ease-in-out infinite;}
@keyframes hw-heat{0%,100%{opacity:.25;}50%{opacity:1;}}
.a-slide2{animation:hw-slide2 2.2s linear infinite;opacity:0;}
@keyframes hw-slide2{0%{opacity:0;transform:translateX(-30px);}20%{opacity:.9;}
  100%{opacity:0;transform:translateX(34px);}}
/* 最上層石墨滑開：底圖停在「已經滑開」，所以按停止也看得到 */
.a-slide3{animation:hw-slide3 2.4s ease-in-out infinite;}
@keyframes hw-slide3{0%,12%{transform:translate(0,0);}70%,100%{transform:translate(24px,-5px);}}
/* 虹吸一開始，整碗水被帶走 */
.a-drain{animation:hw-drain 2.6s ease-in infinite;}
@keyframes hw-drain{0%,8%{transform:scaleY(1);}85%,100%{transform:scaleY(.04);}}
/* 從雲裡掉下來 */
.a-fall{animation:hw-fall 2.6s linear infinite;}
@keyframes hw-fall{0%{transform:translateY(0);opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{transform:translateY(190px);opacity:0;}}
/* 被包起來的油滴浮上來 */
.a-rise2b{animation:hw-rise2b 3s ease-in-out infinite alternate;}
@keyframes hw-rise2b{from{transform:translateY(16px);}to{transform:translateY(-16px);}}
/* 小水滴浮在空中 */
.a-float{animation:hw-float 3.2s ease-in-out infinite alternate;}
@keyframes hw-float{from{transform:translateY(-9px);}to{transform:translateY(9px);}}
.a-roll{animation:hw-spin 1.4s linear infinite;}
.a-beat{animation:hw-beat .8s ease-in-out infinite;}
@keyframes hw-beat{0%,100%{transform:scale(1);}18%{transform:scale(1.09);}36%{transform:scale(.97);}}
.a-bolt{animation:hw-bolt .9s steps(1) infinite;}
@keyframes hw-bolt{0%,55%{opacity:1;}56%,100%{opacity:0;}}
.a-wave{animation:hw-wavey 1s ease-in-out infinite;}
@keyframes hw-wavey{0%,100%{transform:translateY(-26px);}50%{transform:translateY(26px);}}
.a-field{animation:hw-flow 2.2s linear infinite;}
.a-rise2{animation:hw-rise2 2.4s ease-in infinite;}
@keyframes hw-rise2{0%{transform:translateY(18px);}100%{transform:translateY(-120px);opacity:.15;}}
.a-orbit{animation:hw-orbit 9s linear infinite;}
.a-ray{animation:hw-flow 1.4s linear infinite;}
.a-push{animation:hw-push 1.8s ease-in-out infinite;}
@keyframes hw-push{0%,100%{opacity:.35;transform:translateY(-4px);}50%{opacity:1;transform:translateY(2px);}}
.a-rise{animation:hw-rise 2.2s linear infinite;opacity:0;}
@keyframes hw-rise{0%{opacity:0;transform:translateY(0) scale(.5);}
  15%{opacity:.95;}100%{opacity:0;transform:translateY(-200px) scale(1.2);}}
.a-drop{animation:hw-drop 2.6s ease-in infinite;opacity:0;}
@keyframes hw-drop{0%,40%{opacity:0;transform:translateY(0) scale(.4);}
  55%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(190px) scale(1);}}
.a-climb{animation:hw-climb 2s linear infinite;}
@keyframes hw-climb{to{stroke-dashoffset:40;}}
.a-vap{animation:hw-vap 1.6s ease-out infinite;opacity:0;}
@keyframes hw-vap{0%{opacity:0;transform:translateY(0) scale(.6);}
                  25%{opacity:.9;}100%{opacity:0;transform:translateY(-52px) scale(1.5);}}
.a-flame{animation:hw-flame 1.1s ease-in-out infinite alternate;}
@keyframes hw-flame{from{transform:scaleY(1) scaleX(1);}to{transform:scaleY(1.07) scaleX(.95);}}
.a-glow{animation:hw-glow 1.6s ease-in-out infinite;}
@keyframes hw-glow{0%,100%{opacity:.45;}50%{opacity:1;}}

/* 滑桿：這是「可以玩」的那一塊 */
.hw-knobs{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.hw-knob{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--zg-line);
  border-radius:14px;padding:10px 16px;}
.hw-knob .k{font-size:14px;font-weight:800;color:var(--zg-ink2);flex:none;}
.hw-knob input[type=range]{flex:1;accent-color:var(--zg-brand);height:30px;}
.hw-knob output{flex:none;min-width:48px;text-align:right;font-weight:900;font-size:17px;
  color:var(--zg-brand-ink);font-variant-numeric:tabular-nums;}
.hw-readout{margin:12px 0 0;background:var(--zg-c-teal);color:#0f5f58;border-radius:12px;
  padding:12px 16px;font-size:calc(var(--wd-fs)*.84);line-height:1.9;font-weight:700;}
.hw-readout:empty{display:none;}
.hw-readout b{color:#0a3f3a;font-size:1.12em;}
.hw-readout .same{color:#2f7fc0;}

.hw-bar{display:flex;align-items:center;gap:10px;margin-top:10px;}
.hw-play{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--zg-line);
  background:#fff;color:var(--zg-ink2);font:inherit;font-size:13.5px;font-weight:800;
  padding:8px 15px;border-radius:999px;cursor:pointer;min-height:40px;flex:none;}
.hw-play:hover{border-color:var(--zg-brand);color:var(--zg-brand-ink);}
.hw-figure.paused .hw-play{background:var(--zg-brand-ink);color:#fff;border-color:transparent;}
.hw-cap{margin:0;flex:1;font-size:13.5px;color:var(--zg-muted);line-height:1.75;}
.hw-parts{list-style:none;margin:16px 0 0;padding:0;}
.hw-parts:empty{margin:0;}
.hw-parts li{display:flex;gap:11px;margin-bottom:9px;font-size:calc(var(--wd-fs)*.84);line-height:1.9;}
.hw-parts b{flex:none;width:25px;height:25px;border-radius:50%;background:var(--zg-brand-ink);
  color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:5px;}
.hw-parts strong{display:block;color:var(--zg-ink);}
.hw-parts span span{color:var(--zg-ink2);}

/* ── 內文 ───────────────────────────────────────────────── */
h2.hw-h{font-size:calc(var(--wd-fs)*1.05);font-weight:900;margin:34px 0 14px;line-height:1.85;}
h2.hw-h::before{content:"";display:inline-block;width:7px;height:19px;border-radius:3px;
  background:var(--zg-egg);margin-right:10px;vertical-align:-2px;}
.in-link{color:var(--zg-brand-ink);font-weight:800;text-decoration:none;
  border-bottom:2.5px solid var(--zg-egg);}
.in-link:hover{background:#fff6d8;}
.hw-try{background:#e9f4fb;border-radius:16px;padding:22px 24px;margin:30px 0;}
.hw-try .tl{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;
  color:#2f7fc0;margin-bottom:8px;}
.hw-try p{margin:0;font-size:var(--wd-fs);line-height:var(--wd-lh);color:#2c4557;}
details.hw-deep{background:#f7f3ec;border:1px solid var(--zg-line);border-radius:16px;margin:30px 0;}
details.hw-deep>summary{cursor:pointer;list-style:none;padding:18px 24px;font-weight:900;
  font-size:calc(var(--wd-fs)*.92);display:flex;align-items:center;gap:10px;}
details.hw-deep>summary::-webkit-details-marker{display:none;}
details.hw-deep>summary::before{content:"\25B8";color:var(--zg-brand-ink);font-size:17px;}
details.hw-deep[open]>summary::before{content:"\25BE";}
details.hw-deep>summary small{font-weight:400;color:var(--zg-muted);font-size:13px;}
.hw-deep .in{padding:0 24px 22px;}

/* ── 接下來看什麼：一個大的，其餘小的（不要三個一樣大造成選擇困難）── */
.hw-rel{margin:30px 0 0;}
.hw-next{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FFF4D1,#FFE89A);
  border:2px solid #FFC83D;border-radius:20px;padding:20px 24px;text-decoration:none;}
.hw-next .k{font-size:12px;font-weight:900;letter-spacing:.14em;color:#8a5a08;flex:none;}
.hw-next .tt{flex:1;font-size:calc(var(--wd-fs)*.95);font-weight:900;color:#3a2c08;line-height:1.7;}
.hw-next .go{font-size:30px;color:#8a5a08;line-height:1;flex:none;}
.hw-next.is-read{background:#f4efe4;border-color:var(--zg-line);}
.hw-more{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;}
.hw-more a,.hw-more .todo{flex:1 1 170px;background:#fff;border-radius:14px;padding:13px 16px;
  text-decoration:none;box-shadow:0 6px 18px -14px rgba(120,80,20,.5);
  display:flex;align-items:center;gap:8px;}
.hw-more .todo{background:#f2ece1;box-shadow:none;}
.hw-more .tt{font-size:15.5px;font-weight:800;line-height:1.7;}
.hw-more .todo .tt{color:var(--zg-muted);}
.hw-more em{font-style:normal;font-size:11.5px;color:var(--zg-muted);margin-left:auto;}
.hw-more a.is-read::after,.hw-next.is-read .go::after{content:"讀過";font-size:11.5px;
  font-weight:800;color:var(--zg-muted);margin-left:auto;}
.hw-next.is-read .go{font-size:0;}

/* ── 圖鑑（首頁）─────────────────────────────────────────
   場景 + 圖鑑格。不用知識圖譜：節點連線是大人的整理方式，
   題目一多就變毛線球，而且要小孩先讀二十個小標籤才知道有什麼。
   格子的好處是「加題目＝多幾格」，不會變亂。 */
.ix{max-width:1100px;margin:0 auto;padding:26px 20px 70px;}
.ix h1{font-size:30px;margin:0 0 6px;}
.ix .lead{color:var(--zg-muted);margin:0 0 20px;font-size:15.5px;line-height:1.9;}

/* 場景跳轉列：手指點得到的大小，不是文字連結 */
.jump{display:flex;gap:10px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch;}
.jump a{flex:none;display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1.5px solid var(--zg-line);border-radius:999px;padding:10px 18px;
  text-decoration:none;font-weight:800;font-size:15px;min-height:46px;}
.jump a span{font-size:20px;line-height:1;}
.jump a:hover{border-color:var(--zg-brand);}

.scene{margin:26px 0 0;scroll-margin-top:16px;}
.scene h2{display:flex;align-items:center;gap:10px;font-size:22px;margin:0 0 14px;}
.scene h2 .ic{font-size:28px;line-height:1;}
.scene h2 .cnt{margin-left:auto;font-style:normal;font-size:13.5px;font-weight:800;
  color:var(--zg-brand-ink);background:#fff;border-radius:999px;padding:6px 14px;}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.tile{background:#fff;border-radius:18px;padding:10px 12px 14px;text-decoration:none;
  box-shadow:0 10px 26px -20px rgba(120,80,20,.6);display:flex;flex-direction:column;gap:2px;
  position:relative;border:2px solid transparent;}
.tile:hover{border-color:var(--zg-egg);transform:translateY(-2px);}
.tile .th{aspect-ratio:4/3;border-radius:12px;background:var(--zg-bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.tile .th img{width:100%;height:100%;object-fit:cover;display:block;}
.tile .th svg{width:100%;height:100%;object-fit:contain;}
.tile b{font-size:17.5px;font-weight:900;line-height:1.5;color:var(--zg-ink);}
.tile span{font-size:13px;color:var(--zg-ink2);line-height:1.7;}
.tile .seen{display:none;position:absolute;top:8px;right:10px;font-style:normal;font-size:19px;
  color:var(--zg-brand);text-shadow:0 1px 3px rgba(0,0,0,.25);}
.tile.is-read .seen{display:block;}
.tile.is-read{border-color:var(--zg-egg);}

/* 還沒寫的格子：看得到有這一格，但不是待辦事項，所以不給任何催促的語氣 */
.tile.is-todo{background:#f4efe5;box-shadow:none;border:2px dashed #ddd2bd;}
.tile.is-todo .th{background:repeating-linear-gradient(45deg,#ece5d8 0 8px,#f2ece1 8px 16px);}
.tile.is-todo b{color:#a89a84;}
.tile.is-todo em{font-style:normal;font-size:12px;color:#b3a894;margin-top:2px;}

/* 文章頁：這裡用到的原理 —— 原理從物品進去，不是反過來 */
.hw-uses{margin:30px 0 0;background:#f3eefa;border-radius:18px;padding:16px 18px;}
.hw-uses .k{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;
  color:#6a46ad;margin-bottom:10px;}
.hw-uses .hw-more{margin:0;}

@media(max-width:620px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px;}
  .hk-opts{flex-direction:column;}
  .hw-knob{flex-wrap:wrap;}
  .hw-knob input[type=range]{flex:1 0 100%;order:3;}
}