:root {
  --art: url("assets/tall-day.webp");
  --ink: #34465a;
  --paper: #fff;
  color-scheme: light dark;
  font: 112.5%/1.35 system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.art {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--art) right top / cover no-repeat;
}
main {
  margin: clamp(1.25rem, 5vw, 4rem) 0 2rem 5vw;
  width: 57vw;
  max-width: 32rem;
}
h1, strong { font-family: Georgia, serif; }
h1 {
  display: flex;
  align-items: center;
  gap: .2em;
  font-size: clamp(1.6rem, 9.5vw, 3.4rem);
  line-height: 1;
  margin: 0 0 1em;
}
picture { display: flex; }
picture img { width: 1.65em; height: 1.65em; object-fit: contain; }
p { margin: 0 0 1.55em; overflow-wrap: break-word; }
strong { display: block; font-size: 1.56em; line-height: 1.18; }
strong span { font-size: 1.14em; }
footer {
  margin: auto 0 0;
  align-self: flex-start;
  padding: .4rem 5vw max(.7rem, env(safe-area-inset-bottom));
  border-radius: 0 .8rem 0 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
header {
  align-self: flex-end;
  padding: max(.5rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) 0 0;
}
select {
  min-height: 44px;
  padding: .4em .7em;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: .65rem;
  background-color: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
small { display: block; font-size: .72rem; }
@media (orientation: landscape) {
  :root { --art: url("assets/wide-day.webp"); }
  .art { display: flex; background: var(--paper); }
  .art::before, .art::after { content: ""; background-image: var(--art); background-repeat: no-repeat; }
  .art::before { flex: 1; background-position: left; background-size: 123.45679% 100%; }
  .art::after { width: 57vh; background-position: right; background-size: 300vh 100%; }
  main { width: min(62vw, calc(92vw - 57vh)); }
}
@media (min-width: 900px) and (min-height: 600px) {
  main { margin-top: 8vh; font-size: clamp(1rem, 1.55vw, 1.4rem); }
}
@media (prefers-color-scheme: dark) {
  :root { --art: url("assets/tall-night.webp"); --ink: #dbe6f2; --paper: #11161d; }
}
@media (prefers-color-scheme: dark) and (orientation: landscape) {
  :root { --art: url("assets/wide-night.webp"); }
}