:root{--ink:#0b0c0b;--yellow:#ffda3d;--muted:#535b62}*{box-sizing:border-box}body{margin:0;background:#faf9f5;color:var(--ink);font-family:Arial,"Noto Sans TC",sans-serif}button,a{touch-action:manipulation}button{font:inherit;font-weight:700;color:var(--ink);background:white;border:2px solid var(--ink);border-radius:24px;padding:10px 18px;min-height:44px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #287bea;outline-offset:4px}header{height:80px;display:flex;align-items:center;padding:16px 30px;gap:24px;border-bottom:3px solid var(--ink);background:white}.brand{font-weight:800;font-size:28px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand i{width:27px;height:27px;border:2px solid var(--ink);background:var(--yellow);border-radius:50%}.site-title{font-weight:700;color:var(--muted)}header button{margin-left:auto}main{max-width:1500px;margin:auto;padding:20px 30px}.course-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:16px}.badge{background:#eee8d7;padding:6px 12px;border-radius:20px;color:#665b37}.lesson{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr);background:white;border:3px solid var(--ink);border-radius:24px;overflow:hidden;min-height:420px}figure{position:relative;display:flex;flex-direction:column;justify-content:center;background:#eaf2f9;border-right:3px solid var(--ink);margin:0;padding:20px;gap:15px}figure img{width:100%;height:auto;max-height:340px;object-fit:contain;border:1px solid #cbd4dc;border-radius:10px;background:white}figcaption{font-size:12px;color:#475569;line-height:1.5;padding-right:110px}.zoom{position:absolute;bottom:14px;right:14px;font-size:12px;padding:6px 12px}.copy{padding:28px;align-self:center;min-width:0}.eyebrow{font-size:13px;font-weight:800;color:#475569}h1{font-size:clamp(24px,2.4vw,34px);line-height:1.25;margin:12px 0}#intro{color:var(--muted);font-size:16px;line-height:1.6}ul{padding-left:23px;font-size:16px;line-height:1.65}li+li{margin-top:8px}details{font-size:14px;color:var(--muted)}summary{cursor:pointer;font-weight:700;min-height:32px}#script{max-height:130px;overflow:auto;line-height:1.8;margin:8px 0}footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px}.audio{display:flex;align-items:center;gap:12px}.audio small{max-width:240px;color:var(--muted);line-height:1.5;font-size:11px}.navigation{display:flex;align-items:center;gap:16px}.primary,.practice{background:var(--yellow);box-shadow:0 3px 0 var(--ink)}progress{width:100%;height:5px;accent-color:var(--ink)}.diagram{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;min-height:270px}.diagram>div{display:grid;place-items:center;gap:18px;width:140px;background:white;border:2px solid var(--ink);border-radius:22px;padding:25px 12px;box-shadow:0 5px 0 var(--ink)}.diagram b{font-size:52px}.diagram span{font-size:14px;font-weight:700}.practice{display:inline-block;color:var(--ink);text-decoration:none;border:2px solid;border-radius:20px;padding:10px 14px;margin-top:15px;font-weight:700}[hidden]{display:none!important}dialog{border:3px solid var(--ink);border-radius:22px;max-width:760px;width:calc(100% - 32px);max-height:90dvh;padding:24px}dialog::backdrop{background:#17203399}.dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:center}dialog p{color:var(--muted);line-height:1.6;font-size:14px}#chapters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}#chapters button{text-align:left;border-radius:12px;display:flex;gap:12px;font-size:14px}#chapters button[aria-current=step]{background:var(--yellow)}#chapters span{min-width:20px}#imageDialog{max-width:1250px}#zoomImage{display:block;width:100%;margin-top:14px}.upcoming{border-top:1px solid #ddd;padding-top:16px}@media(max-width:1000px) and (orientation:landscape){header{height:65px}main{padding:12px 20px}.lesson{min-height:360px}.copy{padding:18px}h1{font-size:24px}ul,#intro{font-size:14px}figure{padding:12px}figure img{max-height:270px}footer{padding-top:12px}.audio small{max-width:170px}}@media(max-width:700px) and (orientation:portrait){header{padding:14px;gap:12px;height:auto}.site-title{display:none}.brand{font-size:24px}main{padding:16px}.lesson{grid-template-columns:1fr}figure{border-right:0;border-bottom:3px solid}.copy{padding:22px}.audio{width:100%}.navigation{width:100%;justify-content:space-between}#chapters{grid-template-columns:1fr}.badge{font-size:10px}.course-line{font-size:12px}}
.screenshot{position:relative;width:100%}.screenshot img{display:block;max-height:none}.highlight{position:absolute;border:3px solid #e83232;border-radius:14px;box-shadow:0 0 0 3px #fff9;pointer-events:none}
@media(orientation:landscape) and (max-height:760px){header{height:64px;padding:10px 24px}main{padding:12px 24px}.course-line{margin-bottom:10px}.lesson{min-height:360px}.copy{padding:20px}h1{font-size:25px}#intro,ul{font-size:14px;line-height:1.5}li+li{margin-top:7px}figure{padding:16px}.screenshot{max-width:490px;margin:auto}.audio small{max-width:210px}footer{padding-top:12px}#script{max-height:85px}.diagram{min-height:250px}}
.audio{flex-wrap:wrap;gap:8px}.audio audio{width:260px;height:44px}.audio small{max-width:170px}.audio #replay{min-width:58px;padding:8px 12px;font-size:13px}
@media(orientation:landscape) and (max-width:1100px){.audio audio{width:205px}.audio small{max-width:140px;font-size:10px}.navigation{gap:10px}}
@media(max-width:700px) and (orientation:portrait){.audio audio{flex:1;min-width:200px}.audio small{max-width:none;width:100%}}
.audio{flex-direction:column;align-items:flex-start;gap:4px}.speech-controls{display:flex;align-items:center;gap:7px}.voice-label{display:grid;gap:2px;font-size:10px;color:var(--muted)}#voiceSelect{max-width:180px;font:inherit;font-size:12px;border:1px solid #9099a2;border-radius:8px;background:white;min-height:32px;padding:4px}.audio small{max-width:490px;font-size:10px;line-height:1.35}#speak{min-width:126px}.audio #replay{min-width:52px}
@media(orientation:landscape) and (max-width:1100px){#voiceSelect{max-width:145px}.audio small{max-width:400px}}
@media(max-width:700px) and (orientation:portrait){.speech-controls{flex-wrap:wrap}.audio small{max-width:100%}}

.chapter-heading{grid-column:1/-1;margin:16px 0 2px;padding:12px 14px;border-left:5px solid var(--ink);background:#fff3b6;font-size:16px;line-height:1.5}.chapter-heading:first-child{margin-top:0}

.photo-switch{display:flex;justify-content:center;gap:8px}.photo-switch button{font-size:12px;padding:7px 12px}.photo-switch button[aria-pressed="true"]{background:var(--yellow)}
@media(orientation:landscape) and (max-height:760px){.screenshot img{max-height:320px;object-fit:contain}}

#reportDialog{width:min(1100px,96vw);max-width:96vw;height:94dvh;max-height:94dvh;padding:14px;box-sizing:border-box;overflow:hidden}#reportDialog[open]{display:flex;flex-direction:column;gap:12px}.report-toolbar,.report-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.report-toolbar strong{font-size:16px}.report-controls{justify-content:center}.report-toolbar button,.report-controls button{font-size:14px;padding:10px 14px}#reportCanvas{flex:1;min-height:0;overflow:auto;background:#e8edf3;text-align:center}#reportPageImage{height:100%;width:auto;max-width:100%;object-fit:contain}#reportCanvas.enlarged #reportPageImage{height:auto;width:100%;max-width:none}@media(max-width:500px){.report-toolbar strong{font-size:12px}.report-controls{gap:5px}.report-controls button{padding:8px;font-size:12px}}