:root{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#292450;background:#f6f7fb;font-synthesis:none;--navy:#29215e;--red:#ce3035;--muted:#74788d;--border:#e1e3ed}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.3}button:focus-visible,a:focus-visible{outline:3px solid #ca454b;outline-offset:4px}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.school-header{height:100px;padding:0 clamp(24px,4.5vw,80px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-top:4px solid var(--navy);border-bottom:1px solid var(--border)}.school-brand{display:flex;align-items:center;gap:15px}.school-brand img{object-fit:contain}.school-name{font-weight:700;font-size:20px;letter-spacing:.09em;line-height:1.5}.school-name-en{font-size:11px;letter-spacing:.18em;color:#676580;margin-top:4px}.edition{display:flex;align-items:center;gap:12px;color:#6b6685;font-size:14px;letter-spacing:.12em}.edition-line{height:20px;width:3px;background:var(--red);border-radius:4px}.reader{max-width:1520px;margin:auto;padding:27px clamp(24px,4.5vw,80px) 0}.reader-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:#9b535e}h1{font-size:24px;letter-spacing:.08em;margin:7px 0 0;font-weight:650}h2{font-size:23px;margin:7px 0 0}.tools{display:flex;gap:8px}.tool{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 14px;border:1px solid var(--border);background:#fff;border-radius:10px;color:#4b456b;font-size:14px;transition:background .2s,border-color .2s}.tool:hover{background:#f0eef9;border-color:#bab5d4}.stage{height:clamp(390px,calc(100svh - 350px),850px);min-height:390px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:20px;background:radial-gradient(ellipse at 50% 45%,#fbfcff 0%,#edf0f8 57%,#e5eaf4 100%);border:1px solid #dfe4ef;overflow:hidden;isolation:isolate}.stage::after{content:"";position:absolute;height:40px;left:21%;right:21%;bottom:10px;background:#343657;filter:blur(28px);opacity:.12;border-radius:50%;z-index:-1;pointer-events:none}.stage-label{position:absolute;top:19px;left:23px;display:flex;gap:9px;align-items:center;color:#83879b;font-size:12px;letter-spacing:.12em}.stage-label svg{width:17px;height:17px}.book-position{position:relative;transition:transform .65s cubic-bezier(.22,.6,.25,1);filter:drop-shadow(0 12px 20px #22294c29);z-index:1}.book-position.cover-front:not(.portrait){transform:translateX(-25%)}.book-position.cover-back:not(.portrait){transform:translateX(25%)}#book{margin:auto}.book-page{background:white;overflow:hidden}.book-page img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.book-page:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 1px #1116;pointer-events:none}.book-page.--left:after{background:linear-gradient(to right,transparent 92%,#1a143312 100%)}.book-page.--right:after{background:linear-gradient(to left,transparent 92%,#1a143312 100%)}.page-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:47px;height:47px;border:1px solid #d8ddeb;background:#fffffff0;border-radius:50%;display:grid;place-items:center;color:var(--navy);box-shadow:0 4px 10px #24255308;transition:background .2s,box-shadow .2s}.page-arrow:not(:disabled):hover{background:var(--navy);color:white;box-shadow:0 5px 20px #29215e30}.previous{left:24px}.next{right:24px}.loading{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;gap:12px;background:#eef1f8;color:#555071;font-size:15px}.loading[hidden],.error[hidden]{display:none}.spinner{border:2px solid #dad7e6;border-top-color:var(--navy);width:22px;height:22px;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{position:absolute;z-index:20;background:#fff;padding:24px;border-radius:12px}.error button{border:0;padding:8px 14px;background:var(--navy);color:white;border-radius:8px;margin-left:10px}.reader-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px 4px 0}.page-description{display:flex;align-items:center;gap:16px;min-width:0}.current-number{font-family:Georgia,serif;font-size:34px;color:#3a306b;line-height:1}.description-divider{height:32px;width:1px;background:#d8d6e3}.page-description>div{font-size:15px;font-weight:600}.page-subtitle{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}.page-dots{display:flex;gap:2px;align-items:center}.page-dot{border:0;background:transparent;padding:12px 6px;width:28px;height:36px;display:grid;place-items:center}.page-dot::before{content:"";display:block;width:7px;height:7px;border-radius:8px;background:#c9c9da;transition:all .2s}.page-dot[aria-current="page"]::before{width:23px;background:var(--red)}.page-dot.is-visible::before{background:#81799c}.page-status{text-align:right;font-size:13px;color:#777386;font-variant-numeric:tabular-nums}.reading-tip{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:#878697;margin:18px 0 20px;letter-spacing:.025em}.mobile-tip{display:none}.tip-dot{color:#bab6c8}.footer{max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;padding:16px clamp(24px,4.5vw,80px);font-size:11px;letter-spacing:.07em;color:#9a98aa;border-top:1px solid #e9e8f0}.icon-button{display:grid;place-items:center;border:1px solid var(--border);background:white;color:var(--navy);border-radius:9px;width:40px;height:40px;flex:none}.icon-button:hover{background:#f1eff8}dialog{border:1px solid #d8d6e4;border-radius:20px;box-shadow:0 28px 100px #17132c45;padding:0;color:var(--navy)}dialog::backdrop{background:#15132f99;backdrop-filter:blur(6px)}.contents-dialog{width:min(920px,calc(100% - 40px));max-height:90svh;background:#fafaff}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:26px 30px 22px;position:sticky;top:0;z-index:1;background:#fafaff;border-bottom:1px solid var(--border)}.contents-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;padding:26px 30px 30px}.contents-item{display:block;min-width:0;border:0;background:transparent;text-align:left;color:var(--navy);padding:0}.contents-item img{width:100%;aspect-ratio:595.2/841.92;object-fit:contain;border-radius:4px;box-shadow:0 4px 12px #211b4720;border:3px solid transparent;transition:transform .2s,border-color .2s}.contents-item:hover img{transform:translateY(-4px)}.contents-item[aria-current="page"] img{border-color:var(--red)}.contents-item span{display:block;font-size:14px;margin-top:9px}.contents-item small{color:#9590a6;margin-right:8px;font-size:12px}.zoom-dialog{width:calc(100vw - 40px);height:calc(100svh - 40px);max-width:1400px;max-height:none;background:#eef0f6;overflow:hidden}.zoom-toolbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:white;padding:12px 22px;border-bottom:1px solid var(--border)}.zoom-toolbar h2{font-size:17px;margin:0}.zoom-controls{display:flex;gap:9px;align-items:center}.zoom-controls span{font-size:13px;text-align:center;min-width:43px;font-variant-numeric:tabular-nums}.zoom-controls .zoom-divider{min-width:0;width:1px;height:24px;background:var(--border);margin:0 7px}.zoom-viewport{overflow:auto;height:calc(100% - 110px);padding:22px;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}.zoom-viewport img{display:block;height:auto;width:min(100%,1000px);max-width:none;margin:auto;box-shadow:0 5px 25px #2420441c}.zoom-hint{height:38px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#787387;background:#fff}.reader:fullscreen,.reader.focus-mode{background:#f6f7fb;max-width:none;width:100%;padding:24px 40px 0}.reader:fullscreen .stage,.reader.focus-mode .stage{height:calc(100svh - 200px);max-height:none}.reader.focus-mode{position:fixed;inset:0;z-index:99;overflow:auto}.noscript{padding:30px;text-align:center}body.dialog-open{overflow:hidden}
@media(min-width:1500px){.reader{padding-top:30px}.stage{height:calc(100svh - 365px)}}
@media(max-width:800px){.school-header{height:88px;padding:0 22px}.school-name{font-size:17px}.school-name-en{font-size:10px}.edition{font-size:12px}.reader{padding:22px 20px 0}.reader-bottom{grid-template-columns:1fr auto}.page-dots{grid-column:1/-1;grid-row:2;justify-content:center;margin-top:-8px}.page-status{grid-column:2;grid-row:1}.reading-tip{margin-top:7px}.stage{height:calc(100svh - 375px);min-height:380px}.stage-label{display:none}.previous{left:12px}.next{right:12px}.page-arrow{width:39px;height:39px}.reader-heading{margin-bottom:18px}.full-label{display:none}.footer{padding:14px 22px}.contents-grid{gap:18px}.heading-copy h1{font-size:21px}}
@media(max-width:580px){.school-header{height:83px;padding:0 18px}.school-brand{gap:11px}.school-brand img{width:40px;height:46px}.school-name{font-size:16px;letter-spacing:.03em}.school-name-en{font-size:9px;letter-spacing:.07em}.edition{display:none}.reader{padding:18px 12px 0}.reader-heading{gap:12px;padding:0 5px;align-items:center}.eyebrow{font-size:10px;letter-spacing:.15em}.heading-copy h1{font-size:17px;letter-spacing:.025em;margin-top:5px}.tools{gap:6px}.tool{min-height:39px;padding:8px;border-radius:9px}.tool span{display:none}.tool svg{width:19px;height:19px}.stage{border-radius:14px;height:calc(100svh - 329px);min-height:330px}.page-arrow{width:32px;height:44px;border-radius:8px;border-color:#d9dce9;background:#ffffffe6}.previous{left:6px}.next{right:6px}.page-arrow svg{width:19px;height:19px}.reader-bottom{padding:16px 8px 0;gap:14px}.current-number{font-size:30px}.page-description{gap:10px}.page-description>div{font-size:14px}.page-subtitle{font-size:11px;max-width:205px}.page-status{font-size:11px}.page-dots{gap:4px}.reading-tip{font-size:11px;gap:7px;margin-bottom:17px}.desktop-tip{display:none}.mobile-tip{display:inline}.footer{font-size:10px;padding:14px 20px}.contents-dialog{width:calc(100% - 24px);border-radius:16px}.dialog-header{padding:20px}.dialog-header h2{font-size:21px}.contents-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px;gap:20px 15px}.contents-item span{font-size:13px}.zoom-dialog{width:100vw;height:100svh;max-width:none;border:0;border-radius:0;margin:0}.zoom-toolbar{height:100px;padding:12px;flex-wrap:wrap;gap:5px;align-content:center}.zoom-toolbar h2{font-size:14px;width:100%}.zoom-controls{width:100%;gap:6px;justify-content:space-between}.zoom-controls span{font-size:12px;min-width:37px}.zoom-controls .zoom-divider{margin:0}.zoom-controls .icon-button{width:34px;height:34px}.zoom-viewport{height:calc(100% - 138px);padding:12px}.reader:fullscreen,.reader.focus-mode{padding:17px 10px 0}.reader:fullscreen .stage,.reader.focus-mode .stage{height:calc(100svh - 218px)}.reader:fullscreen .reader-heading,.reader.focus-mode .reader-heading{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Keep reading controls in the school header and give the book the freed space. */
.reader{padding-top:16px}
.reader-heading{position:absolute;top:29px;right:clamp(24px,4.5vw,80px);margin:0;z-index:2}
.stage{height:calc(100svh - 270px);max-height:none}
.reader:fullscreen .reader-heading,.reader.focus-mode .reader-heading{position:static;justify-content:flex-end;margin:0 0 12px}
@media(max-width:800px){
  .reader{padding-top:14px}
  .reader-heading{top:25px;right:22px}
  .stage{height:calc(100svh - 290px)}
}
@media(max-width:580px){
  .school-header{padding-left:14px;padding-right:14px}
  .school-brand{gap:8px;max-width:calc(100% - 126px)}
  .school-brand img{width:32px;height:38px;flex:none}
  .school-name{font-size:14px;letter-spacing:0}
  .school-name-en{font-size:9px;letter-spacing:0;line-height:1.4}
  .reader-heading{top:24px;right:14px;padding:0}
  .tool{padding:8px}
  .stage{height:calc(100svh - 260px)}
}

@media(max-width:580px){.page-arrow{top:auto;bottom:7px;transform:none;width:36px;height:30px}.previous{left:12px}.next{right:12px}}