:root{--ink:#183346;--muted:#526778;--blue:#244ce8;--mint:#c9f1df;--coral:#ffb69b;--paper:#f6f8fc;--line:#d7e0e8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.7 -apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif}a{color:inherit;text-underline-offset:4px}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:12px;padding:10px 18px}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}header{padding:18px 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:white;gap:20px}header>a{font-weight:800;text-decoration:none;letter-spacing:.03em}header span{font-weight:400;font-size:15px;margin-left:12px}header>div{display:flex;align-items:center;gap:20px;font-size:15px}main{max-width:1400px;margin:auto;padding:24px 4vw}.topline{display:flex;justify-content:space-between;font-size:15px;color:var(--muted)}.progress{height:4px;background:#e0e6ee;margin:14px 0 24px;border-radius:3px;overflow:hidden}#progress-bar{height:100%;background:var(--blue);transition:width .25s}#slide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;min-height:650px;padding:24px 0;outline:none}.copy-side{min-width:0}.kicker{display:inline-block;padding:4px 14px;background:var(--mint);border-radius:30px;font-size:15px;font-weight:600}h1{font-size:clamp(34px,3.3vw,52px);line-height:1.28;letter-spacing:-.03em;margin:20px 0}h3{font-size:19px;margin:0 0 8px}.lead{font-size:21px;line-height:1.65;color:var(--muted);margin:0 0 22px}.body p{margin:12px 0}.body li{margin:10px 0}.body ul,.body ol{padding-left:25px}.body blockquote{margin:24px 0;padding:18px 24px;background:white;border-left:5px solid var(--coral);font-size:24px;font-weight:600}.tags{display:flex;gap:10px;flex-wrap:wrap}.tags span{background:white;border:1px solid var(--line);padding:8px 12px;border-radius:10px}.checklist p{padding:9px 15px;background:white;border-radius:10px}.compare,.before-after{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}.compare>div,.before-after>div,.choices>div{background:white;border:1px solid var(--line);padding:16px;border-radius:14px}.before-after>div:last-child{background:#eaf6ef}.choices{display:grid;gap:10px}.choices>div p{margin:3px 0;font-size:16px}.callout{padding:12px 16px;border-left:4px solid var(--blue);background:#edf1ff}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.85 ui-monospace,"PingFang TC",monospace;background:var(--ink);color:white;border-radius:14px;padding:20px}.copy,.download{background:var(--blue);color:white;display:inline-block;border:0;text-decoration:none;padding:11px 18px;border-radius:12px}.copy-status{font-size:15px;color:#285a43;min-height:25px}.quiz{background:white;padding:18px;border-radius:14px}.quiz button{display:block;text-align:left;width:100%;margin:10px 0;font-size:16px}.quiz button[aria-pressed=true]{background:var(--mint);border-color:#418765}#quiz-feedback{font-size:16px}details{margin:18px 0}summary{cursor:pointer;font-weight:600}details p{font-size:16px}.art{position:relative;min-width:0;min-height:460px;align-self:center;background:radial-gradient(ellipse at 50% 62%,#dce9f3 0,transparent 65%);display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:30px;padding:24px;perspective:1000px}.art img{display:block;width:100%;border-radius:20px;box-shadow:0 20px 50px #18334610}.scene-caption{font-size:15px;color:var(--muted);text-align:center;line-height:1.6;margin:20px 0 0}.bubble{background:white;border:2px solid var(--ink);border-radius:20px;padding:15px 20px;box-shadow:5px 6px 0 var(--ink);max-width:90%;font-weight:600;text-align:center;position:relative}.bubble:after{content:"";position:absolute;bottom:-12px;left:25px;width:18px;height:18px;background:white;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}.robot{width:135px;height:130px;background:linear-gradient(135deg,#d9fff0,#87cdb5);border:2px solid #6aaf97;border-radius:36px;box-shadow:12px 18px 0 #18334612,inset -10px -10px 0 #5a9d8530;position:relative;margin:40px auto 24px;transform:rotate(-7deg);animation:bob 4s ease-in-out infinite}.robot:before{content:"";position:absolute;inset:32px 19px 40px;background:var(--ink);border-radius:18px}.eyes{position:absolute;z-index:1;left:43px;top:49px;width:11px;height:16px;background:#e1fff5;border-radius:50%;box-shadow:32px 0 0 #e1fff5}.robot:after{content:"";position:absolute;width:38px;height:9px;background:#6aaf97;bottom:20px;left:47px;border-radius:20px}.tiles{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;margin:20px 0;transform:rotateX(9deg)}.tile{background:white;min-width:95px;max-width:180px;padding:20px 15px;border:1px solid #d2dce7;border-radius:17px;box-shadow:0 9px 0 #b9c9da,0 18px 24px #18334610;text-align:center;font-weight:600;animation:appear .45s both}.tile:nth-child(2){animation-delay:.08s}.tile:nth-child(3){animation-delay:.16s}.tile:nth-child(4){animation-delay:.24s}.tile span{display:block;font-size:30px;margin-bottom:8px}.tile small{font-size:14px;font-weight:400;display:block}.tile.bad{background:#ffe4dc}.tile.good{background:var(--mint)}.arrow{font-size:36px;color:var(--blue);text-align:center;margin:12px}.flow{display:grid;gap:14px;width:90%}.flow .tile{max-width:none}.stamp{font-size:75px;font-weight:800;color:var(--blue);transform:rotate(-8deg);border:5px solid var(--blue);border-radius:20px;padding:4px 25px;background:white}.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px}#dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}#dots button{width:32px;height:32px;padding:0;border-radius:50%;font-size:13px;background:transparent;border:0}#dots button[aria-current=true]{background:var(--ink);color:white}.teacher{background:#edf1f6;padding:12px 18px;border-radius:12px}.teacher p{color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0;font-size:13px;color:var(--muted)}.skip{position:absolute;top:-100px;background:white;padding:12px;z-index:10}.skip:focus{top:0}.slide-enter{animation:appear .3s ease-out}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes bob{50%{transform:translateY(-9px) rotate(3deg)}}@media(max-width:850px){#slide{grid-template-columns:1fr;gap:12px;min-height:0;padding:12px 0 24px}.art{min-height:280px;order:2;padding:20px}.art img{max-height:330px;object-fit:contain}h1{font-size:38px}.lead{font-size:19px}.controls{gap:8px;flex-wrap:wrap}#dots{order:3;flex-basis:100%}footer{display:block}header{padding:14px 20px}header span{display:none}header>div{gap:12px}header button{font-size:13px;padding:6px 10px}.compare,.before-after{grid-template-columns:1fr}.stamp{font-size:50px}.body{font-size:17px}.tile{padding:12px;min-width:85px}.teacher{margin-top:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media print{header,.controls,.teacher,footer{display:none}#slide{display:block}.art{break-inside:avoid}body{background:white}}

.package-links{display:flex;gap:10px;flex-wrap:wrap}.package-links .download{font-size:15px;padding:9px 13px}.package-links>a:last-child{align-self:center;font-size:15px}.mini-game{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:40px 0;transform:rotate(-8deg) rotateX(15deg);width:100%;max-width:420px}.mini-card{display:grid;place-items:center;aspect-ratio:1;background:var(--mint);border-radius:16px;font-size:40px;box-shadow:0 7px 0 #71a994;animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.3s)}.hidden-card{background:var(--ink);color:white;box-shadow:0 7px 0 #0b2030}.mini-gallery{width:320px;height:300px;position:relative;perspective:700px;transform-style:preserve-3d}.mini-floor{position:absolute;inset:100px 0 -30px;transform:rotateX(60deg);background:repeating-linear-gradient(0deg,transparent 0 29px,#244ce825 30px),repeating-linear-gradient(90deg,#e6e9f3 0 29px,#244ce825 30px);border:1px solid #244ce830}.mini-cube{width:120px;height:120px;position:absolute;top:75px;left:100px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-30deg);animation:gallery-turn 14s linear infinite}.mini-cube i{position:absolute;inset:0;background:#efa477;border:2px solid #fff7}.mini-cube i:nth-child(1){transform:translateZ(60px)}.mini-cube i:nth-child(2){transform:rotateY(90deg) translateZ(60px);background:#df805e}.mini-cube i:nth-child(3){transform:rotateX(90deg) translateZ(60px);background:#ffcb9e}@keyframes gallery-turn{50%{transform:rotateX(-18deg) rotateY(35deg)}}@media(max-width:480px){.mini-gallery{width:260px}.mini-cube{left:70px}.mini-card{font-size:28px}.package-links .download{width:100%;text-align:center}}

/* 落下方塊：每頁對應不同設計層的立體圖解 */
.block-diagram{width:100%;max-width:470px}.bd-flow{display:grid;gap:13px;padding:20px 8px}.bd-box{border:1px solid #b8cadc;border-radius:16px;background:white;padding:22px;text-align:center;box-shadow:0 8px 0 #bbcbdc,0 16px 25px #1833460d}.bd-box b{display:block;font-size:21px}.bd-box small{display:block;font-size:15px;color:#526778;margin-top:6px}.bd-box.accent{background:#c9f1df;border-color:#8bc6aa;box-shadow:0 8px 0 #7cb198}.bd-box.warn{background:#ffe7da;box-shadow:0 8px 0 #d2aa90}.bd-arrow{text-align:center;font-size:29px;line-height:1;color:#244ce8}.bd-game-art{display:flex;align-items:center;gap:18px;padding:20px 4px;position:relative}.bd-board{width:230px;flex-shrink:0;display:grid;grid-template-columns:repeat(10,1fr);gap:3px;padding:10px;background:#101d38;border:8px solid #344765;border-radius:12px;box-shadow:12px 18px 0 #1833461a;transform:perspective(850px) rotateY(12deg) rotateX(5deg)}.bd-board i{aspect-ratio:1;background:#23314b;border-radius:2px}.bd-board .b1{background:#62dcec}.bd-board .b2{background:#f8d675}.bd-board .b3{background:#bc99ff}.bd-board .b4{background:#8cf0b4}.bd-board .b5{background:#ff839a}.bd-board .b6{background:#80a9ff}.bd-board .b7{background:#ffb26b}.bd-floating{background:white;border:1px solid #b8cadc;padding:18px;border-radius:15px;box-shadow:0 8px 0 #bbcbdc;transform:rotate(-5deg)}.bd-floating b{display:block;color:#244ce8;font-size:25px}.bd-floating small{font-size:14px}.bd-spec-labels{display:grid;gap:16px}.bd-spec-labels .bd-box{padding:15px 10px}.bd-spec-labels b{font-size:17px}.bd-spec-labels small{font-size:13px}@media(max-width:1100px){.bd-board{width:180px}.bd-floating{padding:12px}.bd-floating b{font-size:20px}}@media(max-width:480px){.bd-game-art{gap:10px}.bd-board{width:150px;gap:2px;padding:6px;border-width:5px}.bd-box{padding:16px 12px}.bd-box b{font-size:18px}.bd-box small{font-size:14px}.bd-floating{padding:9px;font-size:13px}.bd-floating b{font-size:18px}.bd-spec-labels .bd-box{padding:10px 7px}.bd-spec-labels b{font-size:14px}.bd-spec-labels small{font-size:12px}}