:root{--ink:#152943;--blue:#145bbc;--muted:#5d6c7e;--line:#dce5ef;--coral:#e98378}*{box-sizing:border-box}body{margin:0;background:#f3f6fb;color:var(--ink);font-family:Arial,"PingFang HK","Noto Sans TC",sans-serif}button,a{touch-action:manipulation}button{font:inherit;font-weight:700;color:var(--ink);background:white;border:1px solid var(--line);border-radius:12px;padding:11px 16px;min-height:46px;cursor:pointer}button:hover{border-color:var(--blue);background:#f0f6ff}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f19b61;outline-offset:3px}header{height:76px;display:flex;align-items:center;padding:14px 30px;gap:24px;border-bottom:1px solid var(--line);background:white}.brand{font-weight:800;font-size:25px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand-mark{display:grid;place-items:center;border-radius:12px;width:37px;height:37px;background:var(--blue);color:#fff}.site-title{font-weight:700;color:var(--muted)}header button{margin-left:auto}main{max-width:1400px;margin:auto;padding:20px 30px}.course-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;margin-bottom:15px;gap:12px}.badge{background:#e7effc;padding:7px 12px;border-radius:20px;color:var(--blue);white-space:nowrap}.lesson{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-height:420px;box-shadow:0 8px 30px #203d6410}figure{position:relative;display:flex;flex-direction:column;justify-content:center;background:#edf3fb;border-right:1px solid var(--line);margin:0;padding:22px;gap:12px;min-width:0}.screenshot img{display:block;width:100%;height:320px;object-fit:contain;border-radius:10px;background:white}figcaption{font-size:12px;color:#506178;line-height:1.6;padding-right:100px;min-height:40px}.zoom{position:absolute;bottom:20px;right:20px;font-size:12px;padding:7px 12px}.copy{padding:28px;align-self:center;min-width:0}.eyebrow{font-size:13px;font-weight:800;color:var(--blue)}h1{font-size:clamp(24px,2.3vw,32px);line-height:1.3;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:9px}details{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-weight:700;min-height:32px}#script{max-height:135px;overflow:auto;line-height:1.85;margin:8px 0}footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:17px}.audio{display:flex;flex-direction:column;gap:5px;max-width:48%}.audio small{color:var(--muted);font-size:12px;line-height:1.5}.navigation{display:flex;align-items:center;gap:14px}.primary,.practice,#openReport{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover,#openReport:hover{background:#104ca0}progress{width:100%;height:6px;accent-color:var(--blue)}.practice{display:inline-block;text-decoration:none;border-radius:12px;padding:12px 16px;margin-top:15px;font-weight:700}[hidden]{display:none!important}dialog{border:1px solid var(--line);border-radius:20px;max-width:800px;width:calc(100% - 28px);max-height:90dvh;padding:24px;color:var(--ink)}dialog::backdrop{background:#152943aa}.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;display:flex;gap:10px;font-size:14px}#chapters button[aria-current=step]{background:#e7effc;border-color:var(--blue)}.chapter-heading{grid-column:1/-1;margin:14px 0 2px;padding:10px 12px;border-left:4px solid var(--coral);background:#f5f8fc;font-size:16px}.chapter-heading:first-child{margin-top:0}#imageDialog{max-width:1250px}#zoomImage{display:block;width:100%;margin-top:14px}.photo-switch{display:flex;justify-content:center;gap:8px}.photo-switch button{font-size:12px}.photo-switch button[aria-pressed=true]{background:#dbeafe;border-color:var(--blue)}#reportDialog{width:min(1100px,96vw);max-width:96vw;height:94dvh;max-height:94dvh;padding:14px;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;flex-wrap:wrap}#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:140%;max-width:none}#loadError{padding:20px;background:#fff1e5;border:1px solid #edb389;border-radius:12px;margin-bottom:16px}#loadError button{margin:8px}#openReport{margin-top:14px}#imageError{font-size:13px;color:#9a3412}
@media(max-height:760px) and (min-width:701px){header{height:64px}main{padding:12px 24px}.lesson{min-height:365px}.copy{padding:20px}h1{font-size:25px}#intro,ul{font-size:14px}.screenshot img{height:280px}figure{padding:16px}.zoom{bottom:14px;right:14px}footer{padding-top:12px}#script{max-height:90px}}
@media(max-width:700px){header{padding:12px 14px;gap:8px;height:auto}.site-title{display:none}.brand{font-size:21px}header button{font-size:13px;padding:8px 12px}main{padding:14px}.course-line{font-size:11px}.lesson{grid-template-columns:1fr}figure{border-right:0;border-bottom:1px solid var(--line);padding:16px}.screenshot img{height:225px}.copy{padding:22px}h1{font-size:25px}.audio{max-width:none;width:100%}.navigation{width:100%;justify-content:space-between;gap:6px}.navigation button{padding:10px 13px}#chapters{grid-template-columns:1fr}dialog{padding:16px}.report-toolbar strong{font-size:12px}.report-controls button{padding:8px;font-size:12px}.report-controls{gap:5px}#reportCounter{font-size:12px}figcaption{padding-right:90px}.zoom{bottom:16px;right:16px}}

/* Real screenshots retain their aspect ratio. Tall staff forms scroll instead of shrinking. */
.screenshot{height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:white;scrollbar-gutter:stable}
.screenshot img{height:auto;min-height:0;width:100%;border-radius:0;object-fit:contain}
.screenshot[data-layout="portrait"]{background:#e3ebf5;display:flex;justify-content:center}
.screenshot[data-layout="portrait"] img{width:auto;max-width:100%;height:100%;object-fit:contain}
.photo-switch{flex-wrap:wrap}.photo-switch button{font-size:12px;padding:8px 10px}
@media(max-height:760px) and (min-width:701px){.screenshot{height:300px}}
@media(max-width:700px){.screenshot{height:270px}.screenshot[data-layout="portrait"]{height:380px}.photo-switch{gap:6px}}

/* Non-destructive screenshot focus: original files remain available. */
.crop-frame{position:relative;width:100%;overflow:hidden;flex:none;background:white}
#imageDialog .crop-frame{margin-top:14px}
.screenshot:has(.crop-frame){scrollbar-gutter:auto}

/* Chapter and feature covers use a distinct title-card layout. */
.lesson[data-kind$="cover"]{min-height:440px}
.lesson[data-kind$="cover"] figure{background:linear-gradient(140deg,#104c9f,#187fab);color:white;border:0}
.lesson[data-kind="feature-cover"] figure{background:linear-gradient(140deg,#106a74,#23988e)}
.cover-art{padding:32px;display:flex;flex-direction:column;gap:22px}
.cover-art span{font-size:64px;font-weight:800;letter-spacing:2px;color:#ffffffa6}
.cover-art strong{font-size:34px}.cover-art p{font-size:16px;line-height:1.6}
.lesson[data-kind$="cover"] h1{font-size:clamp(28px,3vw,42px)}
@media(max-width:700px){.cover-art{padding:14px;gap:10px}.cover-art span{font-size:36px}.cover-art strong{font-size:26px}.lesson[data-kind$="cover"]{min-height:0}}

/* Fit each image instead of leaving unused space in a fixed-height viewport. */
.screenshot{height:auto;max-height:420px;scrollbar-gutter:auto}
.screenshot[data-layout="portrait"]{height:auto;max-height:none;width:min(100%,230px);align-self:center;background:transparent}
.screenshot[data-layout="portrait"] img{width:100%;height:auto;max-width:100%}
@media(max-height:760px) and (min-width:701px){.screenshot{height:auto;max-height:340px}.screenshot[data-layout="portrait"]{height:auto;max-height:none;width:min(100%,190px)}}
@media(max-width:700px){.screenshot{height:auto;max-height:380px}.screenshot[data-layout="portrait"]{height:auto;max-height:none;width:min(100%,230px)}}

.lesson[data-kind="feature-cover"] figcaption { color: #fff; }