:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;color:#173b50;background:#edf4f3;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,.upload-button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid #f1b63b;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}h1,h2,p{margin-top:0}.topbar{background:#123b63;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(18px,calc((100vw - 1160px)/2))}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border:3px solid #65d6c5;border-radius:50%;font-size:1.5rem;color:#65d6c5}.brand strong{display:block;font-size:1.25rem}.brand small{display:block;font-size:.8rem;color:#c9e5ed}.topbar nav{display:flex;gap:8px}.topbar a{border:1px solid #a9c8da;border-radius:10px;color:#fff;padding:10px 13px;text-decoration:none;font-weight:700;white-space:nowrap}.shell{max-width:1160px;margin:auto;padding:20px 18px 36px}.intro{display:flex;justify-content:space-between;align-items:center;gap:14px}.eyebrow{display:block;font-size:.78rem;color:#22778c;font-weight:800;letter-spacing:.08em}.intro h1{font-size:clamp(1.65rem,3vw,2.3rem);margin:4px 0}.intro p{margin:0;color:#416879}.intro-badge{background:#d9eee9;border-radius:16px;padding:10px 20px;text-align:center;color:#2c5d69;white-space:nowrap}.intro-badge strong{font-size:1.35rem}.estimate{background:#fff5dd;border-left:5px solid #e7a936;padding:10px 13px;border-radius:8px;margin:16px 0;color:#654a1f}.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px;padding:0}.steps li{background:#e0e9ec;border:2px solid #d2e1e4;border-radius:12px;padding:10px;text-align:center;font-weight:800;color:#456773}.steps li span{display:inline-grid;place-items:center;width:27px;height:27px;background:#fff;border-radius:50%;margin-right:4px}.steps li.current{background:#d4efeb;border-color:#0c7489;color:#145163}.steps li.done{background:#edf8f2;border-color:#9dccbc}.work-card,.tips,.finish-panel,.after-card,.import-card{background:#fff;border:1px solid #d4e4e5;border-radius:22px;box-shadow:0 9px 28px #173c5510}.work-card{padding:20px}.stage-heading{display:flex;justify-content:space-between;align-items:center}.stage-heading h2{font-size:1.55rem;margin:4px 0 0}.stage-icon{font-size:2rem}.instruction{font-size:1.08rem;font-weight:700;color:#24566b;margin:10px 0 13px;min-height:1.5em}.tools{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;margin-bottom:12px}.tool,.minor-actions button,.stage-nav button,.finish-actions button,.upload-button{border:2px solid #a6c8ce;background:#fff;border-radius:12px;min-height:50px;padding:10px 16px;font-weight:800;color:#145369}.tool{flex:1;min-width:116px}.tool.selected{background:#d8f0ec;border-color:#0c7188}.band-prompt{background:#e7f4f3;border:2px dashed #5ca4ad;border-radius:14px;padding:8px 14px;display:flex;align-items:center;gap:10px;touch-action:none;cursor:grab;min-height:58px}.rubber-icon{font-size:2.2rem;color:#c47d39;line-height:1}.band-prompt small{color:#4b707a}.tools fieldset{border:0;display:flex;gap:6px;padding:0;margin:0 0 0 auto;align-items:center}.tools legend{font-size:.8rem;font-weight:800}.tools label{border:2px solid #bed6da;border-radius:10px;padding:8px 11px;font-weight:700;min-height:48px;display:flex;align-items:center}.tools input{width:19px;height:19px;accent-color:#0b7188}.bath-tools{margin-bottom:12px}.bath-tools>strong{display:block;margin-bottom:8px}.bath-tools p{margin:8px 0 0;font-weight:700;color:#426979}.bath-palette{display:flex;flex-wrap:wrap;gap:8px}.bath-palette button{border:2px solid #c4d7da;background:#fff;border-radius:11px;min-height:50px;min-width:82px;padding:7px 10px;display:flex;align-items:center;gap:7px;font-weight:800;color:#174e60}.bath-palette button[aria-pressed=true]{border-color:#0b7188;background:#def4ee}.bath-palette i{display:inline-block;width:25px;height:25px;border-radius:50%;border:1px solid #173b5033}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px}.canvas-wrap{position:relative;background:#eef5f4;border:2px solid #bcd7d9;border-radius:15px;overflow:hidden}#playCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.canvas-prompt{position:absolute;left:12px;bottom:10px;background:#ffffffea;border-radius:9px;padding:6px 11px;font-weight:800;font-size:.88rem;color:#23596b;pointer-events:none}.preview{border:1px solid #d8e6e6;border-radius:15px;padding:12px;background:#f8fbfa}.preview strong{display:block;font-size:.95rem;margin:3px 0 8px}.preview canvas{display:block;width:100%;height:auto;border:5px solid #fff;box-shadow:0 4px 13px #183a5030}.preview p{font-size:.82rem;line-height:1.45;color:#55727b;margin:9px 0 0}.minor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:61px;margin-top:8px}.minor-actions button{min-height:43px;padding:7px 12px;font-size:.9rem}.minor-actions span{font-weight:700;color:#4d707b}.stage-nav{display:flex;gap:10px;margin-top:4px}.stage-nav button{flex:1;font-size:1.08rem;min-height:56px}.stage-nav .primary{background:#0b6884;border-color:#0b6884;color:#fff}.stage-nav .secondary{background:#e7f1f0}.tips,.after-card,.import-card{margin-top:14px;padding:18px 20px}.tips summary,.after-card summary,.import-card summary{font-size:1.07rem;font-weight:800;cursor:pointer;color:#19586b}.tip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}.tip-grid article{background:#eef6f5;border-radius:10px;padding:10px}.tip-grid p{font-size:.86rem;margin:5px 0 0}.tip-note{font-size:.88rem;color:#496f78;margin:12px 0 0}.finish-panel{margin-top:18px;padding:22px}.finish-heading h2{margin:4px 0}.finish-heading p{margin-bottom:14px}.finish-grid{display:grid;grid-template-columns:280px 1fr;gap:18px}.finish-grid canvas{width:100%;border:6px solid #fff;box-shadow:0 5px 16px #173c5535}.finish-grid #recipe{line-height:1.55}.finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start}.finish-actions button{background:#e8f4f1}.finish-actions p{grid-column:1/-1;line-height:1.5;color:#496e79}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:550px;margin-top:16px}.compare-grid figure{margin:0;text-align:center;font-weight:700}.compare-grid canvas,.compare-grid #photoBox{width:100%;aspect-ratio:1;background:#eef5f4;border-radius:10px;display:grid;place-items:center}.compare-grid img{width:100%;height:100%;object-fit:contain}.compare-grid figcaption{margin:7px 0}.upload-button{display:inline-flex;position:relative;align-items:center;overflow:hidden;margin-top:10px}.upload-button input{position:absolute;inset:0;opacity:0;font-size:100px;cursor:pointer}.after-card p,.import-card p{line-height:1.55}.after-card fieldset{border:0;padding:0;margin:15px 0;display:flex;flex-wrap:wrap;gap:8px}.after-card legend{font-weight:800}.after-card fieldset label{border:2px solid #c7dce0;border-radius:10px;padding:8px}.after-card>details>div>label{font-weight:800}.after-card textarea{display:block;width:100%;max-width:600px;border:2px solid #b8d2d7;border-radius:10px;padding:10px;margin-top:8px}.import-card a{color:#0a6582}footer{background:#123b63;color:#e4f3f4;padding:20px max(18px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;font-size:.87rem}.print-sheet{display:none}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.preview{display:flex;align-items:center;gap:12px}.preview canvas{width:118px;flex:none}.preview p{margin:0}.tip-grid{grid-template-columns:repeat(2,1fr)}}
.tip-grid svg{display:block;width:100%;height:70px;margin:8px auto}.tip-grid ol{padding-left:18px;margin:6px 0 0;font-size:.83rem;line-height:1.5}.tip-grid li+li{margin-top:4px}
@media(max-width:550px){.topbar{padding:10px 12px}.brand strong{font-size:1.05rem}.brand small{font-size:.68rem}.brand-icon{width:34px;height:34px;font-size:1.15rem}.topbar nav a{padding:8px;font-size:.8rem}.shell{padding:12px 10px 22px}.intro h1{font-size:1.48rem}.intro p{font-size:.9rem}.intro-badge{padding:7px 10px;font-size:.75rem}.steps{gap:4px}.steps li{padding:7px 3px;font-size:.76rem}.steps li span{display:block;margin:0 auto 2px;width:23px;height:23px}.work-card{padding:13px;border-radius:16px}.stage-heading h2{font-size:1.25rem}.instruction{font-size:.98rem}.tool{min-width:0;padding:8px 4px}.tools fieldset{width:100%;margin:0}.band-prompt{width:100%;flex-wrap:wrap}.band-prompt small{width:100%;margin-left:38px}.preview canvas{width:91px}.preview p{font-size:.76rem}.preview strong{font-size:.85rem}.stage-nav button{min-height:54px;padding:8px}.tips,.after-card,.import-card{padding:15px}.tip-grid{grid-template-columns:1fr 1fr}.finish-grid{grid-template-columns:1fr}.finish-grid canvas{max-width:260px}.finish-actions{grid-template-columns:1fr}.finish-actions p{grid-column:1}footer{display:block}footer span{display:block;margin-top:5px}}
@media print{@page{size:A4;margin:15mm}body{background:#fff;color:#111}.topbar,.shell,footer{display:none!important}.print-sheet{display:block;font-family:"PingFang TC","Microsoft JhengHei",sans-serif}.print-sheet h1{font-size:28px;color:#123b63}.print-sheet img{display:block;width:90mm;height:90mm;object-fit:contain;margin:15mm auto}.print-sheet ol{font-size:16px;line-height:1.9}.print-sheet>p:last-child{border:2px solid #b58c41;padding:12px}}
@media print{.print-visuals{display:flex;gap:8mm;margin:6mm 0}.print-visuals figure{width:82mm;margin:0;text-align:center;font-weight:700}.print-visuals img{width:82mm;height:65mm;margin:0;object-fit:contain}.print-sheet ol{font-size:14px;line-height:1.55;columns:2;column-gap:8mm}.print-sheet li{break-inside:avoid}.print-sheet>p:last-child{font-size:14px}}

/* The classroom worktable: simple enough for older iPads, tactile enough to read. */
:root{color:#20384b;background:#f3efe5}
body{background:radial-gradient(circle at 15% 8%,#fffaf0 0,#f3efe5 45%,#e7eee9 100%)}
.topbar{background:#192e47;border-bottom:5px solid #e8ac61;box-shadow:0 4px 18px #192e4720}
.brand-icon{border-color:#f5c677;color:#f5c677;background:#ffffff12}
.topbar a{border-color:#ffffff59;background:#ffffff12}
.topbar a:hover{background:#ffffff2b}
.shell{padding-top:22px}
.intro{background:linear-gradient(115deg,#fffdf7 0%,#fcecd2 73%,#ecdbb9 100%);border:2px solid #e8d6b5;border-radius:24px;padding:18px 24px;box-shadow:0 6px 0 #cbbda44a;position:relative;overflow:hidden}
.intro:after{content:"✦";position:absolute;right:143px;top:-20px;color:#e9ad59;font-size:6rem;opacity:.33;transform:rotate(15deg);pointer-events:none}
.intro h1{color:#1c3e55;font-weight:900;letter-spacing:.02em}
.intro p{color:#486373}
.intro-badge{background:#192e47;color:#fff;box-shadow:4px 4px 0 #d2a978;transform:rotate(3deg);z-index:1}
.intro-badge strong{color:#fbdc9c}
.estimate{background:#fff8dc;border:2px solid #edcf80;border-left-width:8px;color:#654921;border-radius:13px;margin:18px 0;padding:12px 17px;font-size:.95rem}
.steps{gap:10px;margin-bottom:17px}
.steps li{background:#fffdf7;border:2px solid #d7d1c2;border-radius:15px;box-shadow:0 4px 0 #c3baab50;min-height:54px;display:flex;justify-content:center;align-items:center;gap:6px}
.steps li span{background:#ede4d1;color:#6b6658;box-shadow:inset 0 -2px 0 #ccbfa4;margin:0}
.steps li.current{background:#dcefe9;border-color:#328a83;color:#195a57;box-shadow:0 4px 0 #99c7b9}
.steps li.current span{background:#278b83;color:#fff;box-shadow:none}
.steps li.done{background:#eef4e6;border-color:#b2c99b;box-shadow:0 4px 0 #bccda7}
.work-card,.tips,.finish-panel,.after-card,.import-card{border-color:#d8d2c2;box-shadow:0 5px 0 #c7bfaf55,0 16px 28px #38425110}
.work-card{padding:24px;border-radius:25px}
.stage-heading{border-bottom:1px solid #e5dfd0;padding-bottom:10px}
.stage-heading h2{color:#183e52;font-size:1.7rem;font-weight:900}
.stage-icon{display:grid;place-items:center;background:#fff0d5;border:2px solid #eac88c;color:#815321;border-radius:17px;width:54px;height:54px;font-size:1.8rem;transform:rotate(5deg)}
.eyebrow{color:#29827d;font-size:.82rem}
.instruction{background:#eaf4ee;border-left:5px solid #53a094;border-radius:9px;padding:10px 14px;margin:14px 0 16px;min-height:48px;color:#27585a}
.method-picker{background:#fff9e9;border:2px solid #e8d6ae;border-radius:16px;padding:11px 13px;margin-bottom:13px}
.method-picker>strong{display:block;font-size:.95rem;color:#755326;margin-bottom:8px}
.method-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.method-options button{background:#fffdf7;border:2px solid #d5c8ac;border-radius:12px;color:#3c5360;font-weight:800;min-height:52px;cursor:pointer;box-shadow:0 3px 0 #d5c8ac;padding:5px 3px;white-space:nowrap}
.method-options button[aria-pressed=true]{background:#d5efe4;border-color:#408e7d;box-shadow:0 3px 0 #87baa3;color:#165d52}
.method-options span{display:block;color:#b27a3f;font-size:1.24rem;line-height:1.05}
.method-options button[aria-pressed=true] span{color:#1b8174}
.method-picker p{margin:10px 0 0;font-size:.9rem;color:#5f583f;line-height:1.45}
.method-visual{display:flex;align-items:center;gap:12px;background:#fffdf7;border:1px solid #e3d7bd;border-radius:10px;padding:6px 10px;margin-top:9px}
.method-visual svg{width:96px;height:58px;flex:none}
.method-visual ol{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding-left:22px;color:#54606a;font-size:.82rem;line-height:1.35}
.method-visual li{min-width:145px}
.tool,.minor-actions button,.stage-nav button,.finish-actions button,.upload-button{border-color:#b7c8c6;box-shadow:0 3px 0 #b6c5c1;transition:transform .12s,box-shadow .12s,background .12s}
.tool:active,.minor-actions button:active,.stage-nav button:active,.finish-actions button:active,.upload-button:active{transform:translateY(2px);box-shadow:0 1px 0 #b6c5c1}
.tool{background:#fffdf8;font-size:1.05rem;min-height:57px}
.tool.selected{background:#d4f0e4;border-color:#2b8d80;box-shadow:0 3px 0 #71ae9d;color:#145b54}
.band-prompt{background:#fff3dc;border-color:#bf8449;box-shadow:0 3px 0 #e3bd8d}
.tools input:checked{outline:2px solid #3b998c;outline-offset:2px}
.bath-palette button{border-radius:15px;min-height:57px;background:#fffdf8;box-shadow:0 3px 0 #cad2c7}
.bath-palette button[aria-pressed=true]{border-color:#217e78;background:#dbf0e9;box-shadow:0 3px 0 #7ebbae}
.bath-palette i{width:30px;height:30px;border:3px solid #fff;box-shadow:0 0 0 1px #57616b55,0 2px 3px #35434b33}
.workspace{grid-template-columns:minmax(0,1fr) 230px;gap:18px}
.canvas-wrap{background:#eee2cb;border:4px solid #d4c3a4;border-radius:19px;box-shadow:inset 0 0 0 1px #fff8e8,0 5px 0 #b9a480;align-self:start}
#playCanvas{cursor:grab}
#playCanvas:active{cursor:grabbing}
.canvas-prompt{left:14px;bottom:14px;border:2px solid #e2d3af;box-shadow:0 3px 0 #bca47d;color:#47545a;background:#fffdf6;max-width:calc(100% - 28px)}
.preview{background:#f8f4eb;border:2px solid #dfd5c2;border-radius:18px;padding:13px;box-shadow:0 5px 0 #c6b99e58}
.preview strong{font-size:1.05rem;color:#1e4354}
.preview canvas{border:7px solid #fffdf7;border-radius:4px;box-shadow:0 5px 10px #293b4429}
.preview p{font-size:.89rem;color:#45616c;line-height:1.55;background:#fffdf8;padding:8px;border-radius:8px}
.minor-actions{margin-top:15px}
.minor-actions button{background:#faf8ef}
.stage-nav{border-top:1px dashed #d8d1c1;padding-top:14px;margin-top:12px}
.stage-nav button{min-height:61px;font-size:1.13rem}
.stage-nav .primary{background:#147b80;border-color:#0e666b;box-shadow:0 4px 0 #0d5960;color:#fff}
.stage-nav .secondary{background:#f2eee2;border-color:#d0c5ae;box-shadow:0 4px 0 #c0b5a3}
.tips,.after-card,.import-card{background:#fffdf8}
.tips summary,.after-card summary,.import-card summary{color:#205465}
.tip-grid article{background:#f4f3e8;border:1px solid #dfdfc9;border-radius:13px}
.tip-grid article strong{color:#254e5e}
.finish-panel{background:#fffaf0}
.finish-actions button{background:#e2f3e9;border-color:#9bc8b6}
.after-card fieldset label{background:#fffaf0}
footer{background:#192e47}
@media(max-width:850px){
 .method-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .workspace{grid-template-columns:minmax(0,1fr) 142px;gap:11px}
 .bath-palette{gap:5px}
 .bath-palette button{min-width:66px;min-height:50px;padding:5px 7px;font-size:.87rem;gap:4px}
 .bath-palette i{width:24px;height:24px;flex:none}
 .preview{display:block;padding:8px}
 .preview canvas{width:100%;margin-top:8px}
 .preview p{font-size:.75rem;padding:5px;margin-top:8px}
 .stage-nav{position:sticky;bottom:0;z-index:5;background:#fffdf8;padding:12px 3px max(14px,env(safe-area-inset-bottom));box-shadow:0 -8px 15px #fffdf8e8}
}
@media(max-width:550px){
 .method-picker{padding:9px}
 .method-options{gap:5px}
 .method-options button{font-size:.82rem;min-height:47px}
 .intro{padding:13px;border-radius:17px}
 .intro:after{display:none}
 .intro h1{font-size:1.36rem}
 .intro-badge{padding:7px 9px}
 .estimate{font-size:.88rem;padding:9px 11px}
 .steps{gap:5px}
 .steps li{display:block;min-height:53px;padding:5px 2px;font-size:.72rem}
 .steps li span{display:block;margin:0 auto 3px}
 .work-card{padding:13px}
 .stage-heading h2{font-size:1.28rem}
 .stage-icon{width:42px;height:42px;font-size:1.35rem}
 .instruction{font-size:.94rem;min-height:46px;padding:8px 10px}
 .tool{font-size:.94rem;min-height:52px}
 .workspace{grid-template-columns:1fr}
 .preview{display:grid;grid-template-columns:1fr 86px;grid-template-rows:auto auto;align-items:center;gap:5px 10px}
 .preview canvas{grid-column:2;grid-row:1/3;width:86px;margin:0}
 .preview p{grid-column:1;grid-row:2;margin:0}
 .preview p{font-size:.78rem}
 .stage-nav button{font-size:1rem}
}
@media print{body{background:#fff}.print-sheet{color:#111}.print-sheet h1{color:#192e47}}