:root {
  color-scheme:light;
  --ink:#111111;
  --muted:#5b5b60;
  --line:rgba(17,17,17,.12);
}
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:#ffffff; }
body {
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
a { color:inherit; text-decoration:none; }
.preview-header {
  position:sticky;
  z-index:2;
  top:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  min-height:4.5rem;
  padding:0 clamp(1rem,4vw,3rem);
  border-bottom:1px solid var(--line);
  background:#ffffff;
}
.preview-header a,
.preview-language {
  margin:0;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.preview-language {
  position:relative;
  justify-self:center;
}
.preview-language-toggle {
  width:2.65rem;
  height:2.65rem;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(17,17,17,.16);
  border-radius:999px;
  color:var(--ink);
  background:#ffffff;
  font:inherit;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 .7rem 2rem rgba(0,0,0,.08),inset 0 0 0 1px rgba(17,17,17,.03);
  transition:color .2s,background-color .2s,transform .2s;
}
.preview-language-toggle:hover,
.preview-language-toggle:focus-visible,
.preview-language-toggle[aria-expanded="true"] {
  color:#ffffff;
  background:#111111;
  outline:none;
  transform:translateY(-1px);
}
.preview-language-menu {
  position:absolute;
  z-index:4;
  top:calc(100% + .55rem);
  left:50%;
  min-width:9rem;
  display:grid;
  gap:.2rem;
  padding:.35rem;
  border:1px solid rgba(17,17,17,.14);
  border-radius:1rem;
  background:rgba(255,255,255,.98);
  box-shadow:0 1rem 3rem rgba(0,0,0,.14);
  transform:translateX(-50%);
}
.preview-language-menu[hidden] { display:none; }
.preview-language-menu button {
  min-height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 .8rem;
  border:0;
  border-radius:.7rem;
  color:var(--ink);
  background:transparent;
  font:inherit;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.preview-language-menu button:hover,
.preview-language-menu button:focus-visible,
.preview-language-menu button[aria-current="true"] {
  color:#ffffff;
  background:#111111;
  outline:none;
}
.preview-language-menu button span:last-child {
  opacity:.55;
}
.preview-header .download { justify-self:end; }
main {
  display:flex;
  justify-content:center;
  width:100%;
  padding:2rem 0 4rem;
  background:#ffffff;
}
main img {
  display:block;
  width:min(100%,210mm);
  height:auto;
  margin:0;
  border:0;
  outline:0;
  box-shadow:none;
  background:#ffffff;
}
@media (max-width:620px) {
  .preview-header {
    grid-template-columns:1fr 1fr;
  }
  .preview-language {
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    padding-bottom:.8rem;
  }
  main { padding-top:0; }
}