:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #deddda; color: #1f1d1b; }
a { color: inherit; }
.doc-toolbar { position: sticky; top: 0; z-index: 10; min-height: 4.5rem; padding: .75rem clamp(1rem,3vw,3rem); display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; background: #1f1d1b; color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.16); }
.doc-toolbar a { text-decoration: none; }
.doc-toolbar a:hover { color: #f15a29; }
.doc-back { justify-self: start; white-space: nowrap; font-size: .95rem; }
.doc-identity { max-width: 24rem; text-align: center; }
.doc-type { font-size: clamp(.85rem,1vw,1rem); font-weight: 600; line-height: 1.2; }
.doc-tools { display: flex; justify-self: end; align-items: center; gap: .35rem; }
.doc-tools button { width: 2.3rem; height: 2.3rem; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; color: white; font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.doc-tools button:hover,
.doc-tools button:focus-visible { background: #f15a29; border-color: #f15a29; }
.doc-tools output { min-width: 3.4rem; text-align: center; font-size: .85rem; }
.doc-tools a { margin-left: .7rem; padding: .65rem .85rem; border-radius: 2rem; background: #f15a29; font-size: .85rem; white-space: nowrap; }
.doc-tools a:hover { color: #fff; background: #c93f16; }
.doc-stage { width: 100%; min-height: calc(100vh - 4.5rem); overflow-x: auto; }
.doc-reading { min-width: 0; padding: clamp(1rem,3vw,3rem) clamp(.7rem,3vw,3rem) 5rem; }
.doc-heading { max-width: 1100px; margin: 0 auto 2rem; }
.doc-heading > span { color: #c94219; font-size: .9rem; }
.doc-heading h1 { max-width: 22ch; margin: .7rem 0; font-size: clamp(2rem,3.5vw,4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; }
.doc-heading p { margin: 0; max-width: 65ch; line-height: 1.4; font-size: 1rem; }
.doc-pages { width: min(100%,1100px); margin: 0 auto; }
.doc-page { margin: 0 0 2.5rem; }
.doc-page img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 8px 35px rgba(0,0,0,.15); }
.doc-page figcaption { padding-top: .6rem; font-size: .8rem; opacity: .6; text-align: right; }
.doc-end { max-width: 1100px; margin: 3rem auto 0; font-size: .9rem; }
.doc-end a { color: #c94219; text-decoration: none; }
.doc-end a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .doc-toolbar { grid-template-columns: 1fr auto; gap: .5rem; }
  .doc-identity { display: none; }
  .doc-tools { grid-column: 2; }
  .doc-tools a { margin-left: .25rem; }
  .doc-back span { display: none; }
  .doc-heading h1 { font-size: clamp(1.8rem,7vw,3rem); }
}
@media (max-width: 390px) {
  .doc-tools { gap: .2rem; }
  .doc-tools button { width: 2rem; height: 2rem; }
  .doc-tools output { min-width: 2.7rem; font-size: .75rem; }
  .doc-tools a { padding: .55rem .65rem; font-size: .75rem; }
}