@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
:root{font-family:'Noto Sans TC',sans-serif;background:#e8dfcc;color:#42352d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:repeating-linear-gradient(90deg,#e8dfcc 0 28px,#e3d9c6 28px 29px)}main{max-width:510px;margin:auto;background:#f6f0e4;min-height:100dvh;box-shadow:0 0 80px #55331e15}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:3px solid #b48145;outline-offset:2px}header{padding:18px 23px;display:flex;justify-content:space-between;align-items:center}header>button{display:flex;gap:10px;align-items:center;border:0;background:transparent;padding:0}header b{font-size:21px;letter-spacing:3px;text-align:left}header b span{display:block;font-size:8px;letter-spacing:1.5px;color:#97765c}.seal{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#993f32;color:#fff3d9;font-size:26px;font-weight:900}header div button{border:1px solid #dcd0bd;border-radius:50%;height:39px;min-width:39px;background:transparent;padding:6px;font-size:12px}#intro{padding:13px 25px 0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#a57857}h1{font-size:36px;font-weight:900;line-height:1.4;letter-spacing:-1px;margin:13px 0 8px}#intro p{font-size:12px;color:#8c7b68;margin:0}#scene{position:relative;height:280px;background:radial-gradient(ellipse at 50% 70%,#d3b49366,transparent 65%);overflow:hidden}#c{width:100%;height:100%;display:block;touch-action:none}#sceneTag{position:absolute;right:21px;bottom:25px;background:#f9f4e6d9;border:1px solid #d4c6ae;padding:7px 12px;border-radius:25px;font-size:10px;transform:rotate(-5deg);pointer-events:none}#selectedTag{position:absolute;left:20px;top:10px;background:#3c3930cc;border-radius:20px;padding:5px 10px;color:#fff3d9;font-size:11px;pointer-events:none}#menu{padding:0 23px}.sectionhead{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px}.sectionhead h2{font-size:19px;margin:0}.sectionhead span{font-size:10px;color:#988369}.lessons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card{border:1px solid #daceb8;border-radius:15px;background:#fcf8ee;padding:15px;text-align:left;min-height:100px;position:relative}.card.current{border:2px solid #9e493b;background:#f4e4d3}.card small{display:block;font-size:9px;letter-spacing:1px;color:#a58a69}.card strong{display:block;margin:10px 0 5px;font-size:14px}.card em{font-style:normal;color:#b07b38;font-size:10px}.card .arrow{position:absolute;right:15px;bottom:17px;color:#a3674c}.free{display:flex;align-items:center;gap:10px;border-top:1px dashed #c9b798;border-bottom:1px dashed #c9b798;padding:17px 0;margin:20px 0 12px}.free strong{font-size:13px}.free p{font-size:10px;color:#927d66;margin:4px 0}.free button{margin-left:auto;white-space:nowrap;border:0;background:#eee4d0;border-radius:10px;padding:12px;font-size:11px}.achieveBtn{display:flex;justify-content:space-between;width:100%;background:transparent;border:0;padding:12px 0;font-size:12px}footer{text-align:center;padding:25px 10px;color:#a18b72;font-size:9px;letter-spacing:1px}footer span{display:block;margin-top:5px;font-size:9px;letter-spacing:0}#status{display:flex;align-items:center;justify-content:space-between;padding:0 23px}#status #title{font-size:24px;margin:5px 0}#time{font-size:18px;font-variant-numeric:tabular-nums;color:#9e8065}body.play #scene{height:clamp(240px,34dvh,340px);background:radial-gradient(ellipse at 50% 70%,#c8ad8660,transparent 70%)}#controls{padding:0 18px}.steps{display:flex;gap:5px;justify-content:space-between;border-bottom:1px solid #deceb6;padding:0 0 9px;font-size:10px;color:#b6a18b}.steps .on{color:#984438;font-weight:900}.steps .done{color:#78865a}#guide{font-size:12px;line-height:1.6;min-height:38px;margin:11px 0 7px;color:#826c55}#inspector{font-size:10px;display:flex;justify-content:space-between;gap:5px;background:#ece3d1;border-radius:10px;padding:8px 10px;min-height:32px;color:#7b6249}#heat{display:flex;align-items:center;gap:6px;margin:10px 0;font-size:11px}#heat span{margin:0 8px}#heat button{flex:1;border:1px solid #d7c5ab;background:transparent;border-radius:8px;padding:7px;font-size:11px}#heat .on{background:#9b493b;color:#fff4dc;border-color:#9b493b}#tools{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}#tools button{border:1px solid #dbcbb3;background:#fcf8ee;border-radius:11px;min-height:57px;padding:5px 1px;font-size:10px}#tools button span{display:block;font-size:22px;line-height:1.3}#tools button.on{background:#f0d9b5;border:2px solid #a26543;padding:4px 0}.primary{background:#983e32;border:0;border-radius:12px;color:#fff4df;min-height:47px;padding:12px;width:100%;font-weight:700;font-size:13px;box-shadow:0 3px 0 #783327}.fine{font-size:10px;color:#a08468;text-align:center;margin:10px 0 0}.muted{color:#9c856e;font-size:12px;line-height:1.8}dialog{border:0;border-radius:22px;background:#fcf6e8;color:inherit;padding:26px 24px;width:min(380px,90vw);max-height:86dvh;overflow-y:auto;text-align:center;box-shadow:0 15px 80px #38221450}dialog::backdrop{background:#382b2299;backdrop-filter:blur(4px)}dialog h2{font-size:24px;margin:12px 0}dialog .big{font-size:63px;color:#9b4937;line-height:1.1;font-weight:900}.stars{font-size:25px;color:#bb873d;letter-spacing:6px}.row{display:flex;gap:8px;margin-top:10px}.row button{flex:1;border:1px solid #d8c9b1;border-radius:10px;background:transparent;min-height:43px;font-size:12px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left;margin:15px 0;font-size:11px}.stats span{background:#f0e7d4;border-radius:8px;padding:8px}.badge{text-align:left;display:flex;gap:10px;align-items:center;border-bottom:1px dashed #d8cbb4;padding:13px 0}.badge.off{opacity:.35}.badge b{font-size:12px}.badge small{display:block;font-size:10px;color:#9c866c;margin-top:3px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#463b2eea;color:#fff3da;border-radius:20px;padding:10px 18px;z-index:20;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;width:max-content}.error{padding:30px;text-align:center;color:#9b4937}[hidden]{display:none!important}@media(max-height:740px){body.play #scene{height:31dvh;min-height:220px}header{padding:10px 20px}#tools button{min-height:49px}footer{padding:14px}#guide{margin:8px 0;min-height:32px}}@media(min-width:700px){main{margin:20px auto;border-radius:25px;overflow:hidden;min-height:calc(100vh - 40px)}}