.original-paper-dialog {
  box-sizing: border-box;
  width: 96vw;
  max-width: 1500px;
  height: 94dvh;
  max-height: 94dvh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #8f9dac;
  border-radius: 14px;
  color: #17212b;
  background: #cfd6dc;
}
.original-paper-dialog[open] { display: flex; flex-direction: column; }
.original-paper-dialog::backdrop { background: #132336b8; }
.original-paper-toolbar {
  display: flex;
  flex: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #a4b0ba;
  background: #fcfcfa;
  font: 14px/1.4 system-ui, sans-serif;
}
.original-paper-toolbar strong { margin-right: auto; }
.original-paper-toolbar select,
.original-paper-toolbar button {
  padding: 8px;
  border: 1px solid #b0bec6;
  border-radius: 7px;
  color: #23364a;
  background: white;
  cursor: pointer;
  font: inherit;
}
.original-paper-toolbar p { flex-basis: 100%; margin: 0; font-size: 12px; }
.original-paper-toolbar audio { height: 36px; max-width: 100%; }
.original-paper-toolbar button:focus-visible { outline: 3px solid #1567ad; }
.original-paper-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.original-paper-pages {
  --paper-zoom: 1;
  box-sizing: border-box;
  width: calc(100% * var(--paper-zoom));
  min-width: calc(780px * var(--paper-zoom));
  padding: 18px;
}
.digital-paper-page {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(900px * var(--paper-zoom));
  min-height: calc(1273px * var(--paper-zoom));
  margin: 0 auto 24px;
  padding: calc(72px * var(--paper-zoom)) calc(82px * var(--paper-zoom)) calc(68px * var(--paper-zoom));
  overflow: hidden;
  color: #111;
  background: #fff;
  box-shadow: 0 4px 20px #1d2c3d45;
  scroll-margin-top: 12px;
  font: calc(16px * var(--paper-zoom))/1.35 "Times New Roman", Times, serif;
}
.digital-paper-sheet { min-height: calc(1080px * var(--paper-zoom)); }
.digital-paper-page h1,
.digital-paper-page h2,
.digital-paper-page h3,
.digital-paper-page h4,
.digital-paper-page p { margin-top: 0; }
.digital-paper-page h2 { font-size: 1.15em; }
.digital-paper-page h3 { margin-bottom: .55em; font-size: 1em; }
.digital-paper-page h4 { margin: .85em 0 .25em; font-size: .98em; }
.digital-paper-page p { margin-bottom: .75em; }
.digital-paper-translation {
  display: block;
  margin: .25em 0 .7em;
  padding-left: 10px;
  border-left: 2px solid #cee1d8;
  color: #3c6a69;
  font: 400 .78em/1.75 "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  text-align: left;
}
.digital-paper-page :is(p,li,h2,h3,h4) > .digital-paper-translation { margin-bottom: .25em; }
.original-paper-pages[data-show-translation="false"] .digital-paper-translation { display:none; }
.digital-paper-page em { font-weight: 400; }
.digital-paper-page hr { margin: .75em 0; border: 0; border-top: 1px solid #111; }
.digital-paper-page footer {
  position: absolute;
  right: calc(82px * var(--paper-zoom));
  bottom: calc(35px * var(--paper-zoom));
  left: calc(82px * var(--paper-zoom));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  font-size: .75em;
}
.digital-paper-page footer strong { grid-column: 2; font-weight: 400; }
.digital-paper-cover { text-align: center; }
.digital-paper-cover > p { text-align: left; font-size: 1.15em; font-weight: 700; }
.digital-paper-cover h1 { margin: 1.8em 0 .2em; font-size: 3.2em; line-height: 1.05; }
.digital-paper-cover h1 span { font-size: .62em; }
.digital-paper-cover > strong { display: block; margin-bottom: 2.3em; font-size: 1.05em; }
.digital-paper-cover h2 { margin: .65em 0; font-size: 1.05em; }
.digital-paper-cover h3 { margin: .6em 0 1.2em; font-size: 1em; }
.digital-paper-instructions { margin-top: 2em; text-align: left; }
.digital-paper-instructions h4 { text-align: center; }
.digital-paper-instructions li { margin-bottom: .65em; padding-left: .5em; }
.digital-paper-barcode {
  width: 40%;
  min-height: 85px;
  margin: -25px 0 65px auto;
  padding: 10px;
  border: 1px solid #111;
  font-size: 1.05em;
}
.digital-paper-situation { margin-top: 80px; padding: 12px; border: 1px solid #111; }
.digital-paper-situation h2 { margin-bottom: 1.5em; }
.digital-paper-situation h3 { margin-bottom: 1.3em; }
.digital-paper-situation p { margin-bottom: 1.2em; }
.digital-paper-task-header { margin-bottom: 1.1em; }
.digital-paper-task-header h2 { margin-bottom: .7em; }
.digital-paper-task-header p { text-align: justify; }
.digital-paper-box { padding: 12px; border: 1px solid #111; }
.digital-paper-task-end { margin: 1.25em 0 0; text-align: right; font-weight: 700; }
.digital-paper-margin {
  position: absolute;
  top: 34%;
  color: #222;
  font-size: .68em;
  writing-mode: vertical-rl;
}
.digital-paper-margin-left { left: calc(36px * var(--paper-zoom)); transform: rotate(180deg); }
.digital-paper-margin-right { right: calc(36px * var(--paper-zoom)); }
.digital-paper-answer {
  display: inline-flex;
  min-width: 180px;
  align-items: baseline;
  gap: 5px;
  vertical-align: baseline;
}
.digital-paper-answer > span { flex: none; }
.digital-paper-answer input,
.digital-paper-answer textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 4px 2px;
  border: 0;
  border-bottom: 1px solid #111;
  border-radius: 0;
  outline: 0;
  color: #07529c;
  background: linear-gradient(#eaf6ff80, #eaf6ff80) padding-box;
  box-shadow: none;
  font: 600 1em/1.3 system-ui, sans-serif;
}
.digital-paper-answer input:focus,
.digital-paper-answer textarea:focus { border-bottom: 3px solid #1478c9; background: #e6f5ff; }
.digital-paper-answer-long { display: flex; width: 100%; margin: .2em 0 .9em; align-items: flex-start; }
.digital-paper-answer-long textarea { min-height: 3.5em; resize: vertical; }
.digital-paper-box > p > .digital-paper-answer { width: min(70%, 520px); }
.digital-paper-pair { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; }
.digital-paper-pair p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.digital-paper-pair p .digital-paper-translation { flex-basis: 100%; }
.digital-paper-pair .digital-paper-answer { flex: 1; min-width: 80px; }
.digital-paper-choice-row { display: grid; grid-template-columns: 1fr 240px; align-items: center; margin: .55em 0; }
.digital-paper-choices { display: flex; flex-direction: column; gap: .55em; margin: .45em 0 .7em 2em; }
.digital-paper-choice-row .digital-paper-choices { flex-direction: row; justify-content: space-around; margin: 0; }
.digital-paper-choices label { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.digital-paper-choices input { width: 22px; height: 22px; margin: 0; accent-color: #126aab; }
.digital-paper-choice-row .digital-paper-choices input { appearance: none; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 50%; }
.digital-paper-choice-row .digital-paper-choices input:checked { border: 3px solid #126aab; }
.digital-paper-choice-row .digital-paper-choices input:focus-visible,
.digital-paper-choices input:focus-visible { outline: 3px solid #f0a62e; outline-offset: 2px; }
.digital-paper-answer-list { padding-left: 1.5em; }
.digital-paper-answer-list li { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; margin: .65em 0; }
.digital-paper-answer-list li > span:not(.digital-paper-translation) { display: flex; align-items: baseline; gap: 5px; }
.digital-paper-answer-list li > .digital-paper-translation { grid-column: 1 / -1; }
.digital-paper-answer-list .digital-paper-answer { width: 100%; min-width: 100px; }
.digital-paper-exhibit-table { display: grid; grid-template-columns: 38% 62%; border-top: 1px solid #111; border-left: 1px solid #111; }
.digital-paper-exhibit-table > div { padding: 8px; border-right: 1px solid #111; border-bottom: 1px solid #111; }
.digital-paper-exhibit-title { text-align: center; font-weight: 700; }
.digital-paper-exhibit-table img { display: block; width: 78%; max-height: 210px; margin: 10px auto 0; object-fit: contain; }
.digital-paper-exhibit-table .digital-paper-answer { display: flex; width: 100%; margin-bottom: .45em; }
.digital-paper-flow { list-style-position: inside; margin: .4em 0 1em; padding: 0; }
.digital-paper-flow li { position: relative; margin: 0 0 24px; padding: 12px 18px; border: 1px solid #111; }
.digital-paper-flow li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -25px; font-size: 1.3em; font-weight: 700; }
.digital-paper-flow .digital-paper-answer { width: 65%; }
.digital-paper-page-six { margin-top: 45px; padding: 22px; }
.digital-paper-james > img { display: block; width: 34%; max-height: 340px; margin: 0 auto; object-fit: contain; }
.digital-paper-example { text-align: center; }
.digital-paper-james > .digital-paper-answer:not(.digital-paper-answer-long),
.digital-paper-task-four-end > .digital-paper-answer:not(.digital-paper-answer-long) { display: flex; width: 100%; margin-bottom: .75em; }
.digital-paper-task-four-end { margin-top: 35px; padding: 28px; }
.digital-paper-task-four-end > p { margin-top: 1.35em; }
.digital-paper-part-end { margin: 2.8em 0 .8em 52%; line-height: 1.8; }
.digital-paper-part-end span { margin-left: 1.4em; }
.digital-paper-source-note { margin-top: 2.2em; font-size: .78em; }
.archive-digital-paper-page {
  min-height: calc(1080px * var(--paper-zoom));
  overflow: visible;
}
.archive-paper-content { padding: calc(18px * var(--paper-zoom)); }
.archive-paper-block { margin: 0 0 1.05em; break-inside: avoid; }
.archive-paper-block > :last-child { margin-bottom: 0; }
.archive-digital-paper-page .dse-question-block {
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: #111;
  background: transparent;
  line-height: 1.65;
}
.archive-digital-paper-page :is(.dse-question-heading,.dse-native-table caption) { color: #111; font-family: inherit; }
.archive-digital-paper-page .dse-question-heading { margin: .9em 0 .45em; padding-bottom: .2em; border-bottom: 1px solid #111; }
.archive-digital-paper-page .dse-native-table { min-width: 0; color: #111; font: inherit; }
.archive-digital-paper-page .dse-native-table :is(th,td) { padding: .65em; border-color: #111; }
.archive-digital-paper-page .dse-native-table thead th { color: #111; background: #f2f2f0; }
.archive-digital-paper-page .dse-native-table tbody th { color: #111; background: #f7f7f5; }
.archive-digital-paper-page .dse-answer-gap { min-width: 10em; }
.archive-digital-paper-page .dse-answer-gap input,
.archive-digital-paper-page .dse-answer-gap select { border-color: #777; border-radius: 3px; color: #07529c; background: #eff8ff; }
.archive-digital-paper-page .dse-question-image img { max-height: calc(520px * var(--paper-zoom)); object-fit: contain; }
.archive-paper-translation { margin-top: .5em; }
.archive-digital-paper-page .single-answer-tools { font-size: .8em; }
.archive-digital-paper-page [data-state="correct"] { outline: 2px solid #27935c; outline-offset: 2px; }
.archive-digital-paper-page [data-state="wrong"] { outline: 2px solid #c84747; outline-offset: 2px; }
.dse-2022-map {
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 1.25fr 1.1fr;
  grid-template-areas: ". a a ." "market garden garden b" "mall school rich rich" "c station carpark d";
  margin: .7em auto;
  border: 2px solid #111;
}
.dse-2022-map .place { display:grid; min-height:3.3em; place-items:center; padding:.35em; border:1px solid #111; text-align:center; }
.dse-2022-map .a{grid-area:a}.dse-2022-map .market{grid-area:market}.dse-2022-map .garden{grid-area:garden}.dse-2022-map .b{grid-area:b}.dse-2022-map .mall{grid-area:mall}.dse-2022-map .school{grid-area:school}.dse-2022-map .rich{grid-area:rich}.dse-2022-map .c{grid-area:c}.dse-2022-map .station{grid-area:station}.dse-2022-map .carpark{grid-area:carpark}.dse-2022-map .d{grid-area:d}
.dse-2024-map { display:grid; grid-template-columns:1fr 2fr 1fr; margin:.7em auto; border:2px solid #111; }
.dse-2024-map span { display:grid; min-height:3em; place-items:center; padding:.3em; border:1px solid #111; text-align:center; }
.dse-2024-map .wide { grid-column:1/-1; }
.dse-boat-diagram { position:relative; width:min(100%,420px); height:180px; margin:1em auto; border-bottom:4px solid #111; }
.dse-boat-diagram::before { content:""; position:absolute; right:12%; bottom:0; width:65%; height:46%; border:2px solid #111; border-top:0; transform:skew(-12deg); }
.dse-boat-diagram::after { content:""; position:absolute; left:49%; bottom:45%; width:3px; height:48%; background:#111; }
.dse-boat-diagram .sail { position:absolute; left:50%; bottom:52%; width:0; height:0; border-bottom:70px solid #cfd4d8; border-right:95px solid transparent; }
.dse-boat-diagram .height { position:absolute; left:8%; bottom:16%; }
.dse-boat-diagram .length { position:absolute; right:25%; bottom:-1.8em; }
.dse-speech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1em; }
.dse-speech-grid section { position:relative; min-height:9em; padding:1em; border:1px solid #111; border-radius:20px; }
.dse-speech-grid strong { display:block; margin-bottom:.5em; text-align:center; }
@media (max-width: 600px) {
  .original-paper-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .original-paper-toolbar { gap: 7px; padding: 9px; }
  .original-paper-toolbar strong { font-size: 13px; }
  .original-paper-toolbar p { font-size: 11px; }
  .dse-speech-grid { grid-template-columns:1fr; }
}
@media print {
  .original-paper-toolbar { display: none; }
  .original-paper-dialog,
  .original-paper-scroll { width: auto; height: auto; max-height: none; overflow: visible; border: 0; background: white; }
  .original-paper-pages { min-width: 0; padding: 0; }
  .digital-paper-page { break-after: page; margin: 0; box-shadow: none; }
}