:root{
  --paper:#f6f2e7; --ink:#231e16; --muted:#6f7a6c; --line:#272b23;
  --card:#fffdf5; --accent:#93d3b0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:ui-rounded,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:15px; line-height:1.65; padding:30px 24px 26px;
  -webkit-font-smoothing:antialiased;
}
header{max-width:980px;margin:0 auto 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header .brand{flex:1 1 auto}
.eyebrow{display:block;font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.18em;color:#6c8268;margin-bottom:5px}
h1{margin:0;font-size:26px;font-weight:850;letter-spacing:.01em}
header .hint{font-size:13px;color:#3c5a48;border:1px solid #a6b7a2;border-radius:30px;padding:5px 15px;background:#fbfaf1}
#snd{font:800 12px/1.4 inherit;border:1px solid #a6b7a2;background:#fffdf5;color:#2f4a3a;border-radius:30px;padding:7px 15px;cursor:pointer}
#snd[aria-pressed=false]{background:#efe9d8;color:#8a8272;border-color:#cfc7b4}
#snd:hover{background:#f3f7ec}

.version-tabs{display:flex;gap:9px;flex-wrap:wrap;max-width:980px;margin:0 auto 14px}
.version-tabs button{flex:1;border:1.5px solid var(--line);border-radius:12px;background:#fffdf5;font:800 14px/1.5 inherit;padding:10px 18px;cursor:pointer;box-shadow:2px 2px 0 #d4d9c1}
.version-tabs button[aria-pressed=true]{background:#b7dac1;box-shadow:3px 3px 0 #283025}
.version-tabs button:last-child[aria-pressed=true]{background:#f3c5a3}

.stage{
  max-width:980px;margin:0 auto;background:var(--card);border:1.5px solid var(--line);
  border-radius:24px;box-shadow:5px 6px 0 #d4d9c1;padding:16px 20px 12px;
  display:flex;flex-direction:column;gap:0;
}
.missionbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e4e3d4;padding:0 0 11px;margin-bottom:12px}
.missionbar b{font-size:15px}
.progress-pills{display:flex;gap:7px}
.progress-pills i{display:block;width:27px;height:8px;background:#dddccc;border-radius:12px;transition:background .3s}
.progress-pills i.on{background:#639c71}
.finish-badge{display:none;font-size:13px;background:#4d7e5a;color:#fff;padding:5px 14px;border-radius:22px}
.finish-badge.show{display:block;animation:pop .4s ease-out}
@keyframes pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.scene-wrap{position:relative;border-radius:16px;overflow:hidden;background:#f4efe3;border:1px solid #e2ddcb}
#scene{display:block;width:100%;aspect-ratio:4/3;touch-action:manipulation}
#scene-labels{position:absolute;inset:0;pointer-events:none;transition:opacity .25s}
#scene-labels.hidden{opacity:0}
.tagref{position:absolute;top:0;left:0;display:flex;align-items:center;gap:6px;transition:opacity .25s;white-space:nowrap;
  font:800 10px/1.4 ui-monospace,monospace;letter-spacing:.14em;color:var(--ink)}
.tagref::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.65)}
.tagref span{background:#fff4d6;border:1.2px solid var(--ink);border-radius:20px;padding:2px 9px;white-space:nowrap}
.tagref.on span{background:var(--accent)}

.actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:12px 0 4px}
.act{font:800 14px/1.5 inherit;padding:9px 17px;background:#f5f2e7;border:1.5px solid var(--line);border-radius:11px;
  box-shadow:2px 2px 0 var(--line);cursor:pointer;transition:transform .12s,box-shadow .12s,background .25s}
.act:nth-child(1){background:#e9eadb}
.act:nth-child(2){background:#b7dac1}
.act:nth-child(3){background:#a9d8e8}
.act:nth-child(4){background:#f1d27c}
.act:hover{transform:translateY(-1px)}
.act:active{transform:translateY(2px);box-shadow:none}
.act.done{background:#d4e5cb;box-shadow:none}
.act:disabled{opacity:.55;cursor:default}

.message{background:#edf2e4;border:1px solid #ced9c3;border-radius:12px;padding:11px 15px;margin-top:9px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px}
.message p{margin:0;font-size:15px;font-weight:700}
.clock{display:none;background:#fff7ce;border:1.5px solid #252b22;padding:2px 12px;border-radius:12px;
  font:800 24px/1.5 ui-monospace,monospace;white-space:nowrap}
.clock.show{display:block}
.scene-note{font-size:11px;color:#858272;text-align:center;margin:8px 0 0;letter-spacing:.03em}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);max-width:min(90vw,430px);
  background:#fff9d9;border:1.5px solid var(--line);border-radius:12px;padding:11px 17px;
  font-weight:700;font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}

.compare-panel{display:none;width:100%;padding-top:14px}
.compare-panel.visible{display:block}
.compare-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 0 12px}
.compare-steps button{font:700 12px/1.5 inherit;padding:8px;border:1.2px solid var(--line);border-radius:10px;background:#f9f1e2;cursor:pointer}
.compare-steps button[aria-pressed=true]{background:#efc19d;border-color:#985d35;font-weight:800;box-shadow:2px 2px 0 #985d35}
.compare-conditions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.compare-conditions span{font-size:12px;background:#eee5d1;border-radius:20px;padding:4px 10px}
.compare-copy{padding:14px 17px;border:1px solid #dac3a4;border-radius:13px;background:#fbf1df}
.compare-copy h2{font-size:17px;margin:0 0 6px}
.compare-copy p{margin:0;font-size:14px;line-height:1.8;color:#655642}
.compare-copy strong{display:block;margin-top:8px;font-size:14px;color:#875326}
.compare-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:13px}
.compare-controls button{padding:9px 16px;font:800 13px/1.5 inherit;background:#fff9e9;border:1.2px solid var(--line);border-radius:11px;cursor:pointer}
.compare-controls button:first-child{background:#efc19d}

.controls{max-width:980px;margin:18px auto 0;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.ctl{display:flex;align-items:center;gap:10px}
.ctl label{font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.1em;color:#787c6d}
#pals{display:flex;gap:9px}
.sw{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);cursor:pointer;transition:transform .12s}
.sw[aria-pressed=true]{transform:scale(1.18);box-shadow:0 0 0 2px #fffdf5,0 0 0 3.5px var(--line)}
#lbl{font:800 12px/1.4 inherit;border:1.5px solid var(--line);background:#fffdf5;border-radius:9px;padding:4px 12px;cursor:pointer}

.lessons{max-width:980px;margin:26px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.lesson{padding:17px 19px;border:1px solid #bfcbb7;border-radius:16px;background:#f0f1e3}
.lesson:nth-child(2){background:#e8eff0;border-color:#bfced0}
.lesson:nth-child(3){background:#f6edcf;border-color:#dbd0a8}
.lesson small{font:800 11px/1.4 ui-monospace,monospace;letter-spacing:.15em;color:#65806c}
.lesson h2{margin:6px 0;font-size:18px;line-height:1.4}
.lesson p{font-size:13px;margin:0;color:#526153;line-height:1.8}

.side-comparison{max-width:980px;margin:26px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side-comparison article{padding:17px 19px;border:1px solid #c5d5be;border-radius:15px;background:#eaf0e2}
.side-comparison article:last-child{background:#faecde;border-color:#dcbfa1}
.side-comparison h2{font-size:17px;margin:0 0 6px}
.side-comparison p{font-size:13px;line-height:1.8;margin:0;color:#56604f}

.parents{max-width:980px;margin:22px auto 0;font-size:12px;color:#6d7567}
.parents summary{cursor:pointer;font-weight:700}
.parents p{max-width:860px}
.parents a{color:#457a66}

footer.end{max-width:980px;margin:22px auto 0;border-top:1px solid #d8dccd;padding-top:14px;
  font:11px/1.5 ui-monospace,monospace;letter-spacing:.12em;color:#83927e;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

.compare-active .actions,.compare-active .progress-pills,.compare-active .finish-badge{display:none!important}
.compare-active .message{background:#faecde;border-color:#dcbfa1}
.compare-active #scene-labels{display:none}
button:focus-visible{outline:2px solid #3f6749;outline-offset:3px}

@media(max-width:620px){
  body{padding:18px 12px 22px}
  h1{font-size:23px}
  header{gap:9px}
  header .hint{display:none}
  #snd{font-size:11px;padding:5px 11px}
  .stage{padding:13px 12px 10px;border-radius:19px;box-shadow:3px 4px 0 #d4d9c1}
  #scene{aspect-ratio:1/1}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .act{width:100%;font-size:13px;padding:10px 8px}
  .message p{font-size:13px}
  .message{min-height:64px;padding:10px 12px}
  .clock{font-size:20px;padding:3px 9px}
  .lessons,.side-comparison{grid-template-columns:1fr;gap:10px}
  .lesson{padding:14px 16px}
  .compare-steps{grid-template-columns:1fr 1fr;gap:8px}
  .compare-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .compare-controls button{padding:9px 8px;font-size:12px}
  .controls{gap:10px 18px}
  .tagref{font-size:9px}
  footer.end{font-size:9px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}