:root {
  color-scheme: light;
  --table: #ffffff;
  --fg: #1a1c1f;
  --fg-soft: rgba(26, 28, 31, 0.55);
  --fg-faint: rgba(26, 28, 31, 0.14);
  --ink-rgb: 26, 28, 31;
  --surface: #ffffff;
  --surface-2: #fdfbf6;
  --panel: rgba(255, 255, 255, .92);
  --scrim: rgba(255, 255, 255, .5);
  --btn: #1a1c1f;
  --btn-fg: #ffffff;
  --lamp: none;
  --teal: #138a7a;
  --pink: #e0527a;
  --paper: #f8f4ea;
  --ink: #2b2420;
  --serif: Fraunces, "Iowan Old Style", Georgia, serif;
}
/* the dark table: a desk at night, one warm lamp over the book */
[data-theme="dark"] {
  color-scheme: dark;
  --table: #141416;
  --fg: #f1ede6;
  --fg-soft: rgba(241, 237, 230, 0.6);
  --fg-faint: rgba(241, 237, 230, 0.16);
  --ink-rgb: 241, 237, 230;
  --ink: #efe7dc;
  --surface: #1f1f23;
  --surface-2: #25252a;
  --panel: rgba(27, 27, 31, .92);
  --scrim: rgba(10, 10, 12, .55);
  --btn: #f1ede6;
  --btn-fg: #17171a;
  --lamp: radial-gradient(ellipse 62% 55% at 50% 44%, rgba(255, 214, 160, .11), rgba(255, 214, 160, .035) 45%, transparent 72%);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--lamp), var(--table);
  transition: background-color .4s ease, color .4s ease;
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#book {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; outline: none;
  transition: opacity .5s ease;
}
body:not(.ready) #book { opacity: 0; }

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px;
  padding-top: max(18px, env(safe-area-inset-top));
  pointer-events: none;
}
header > * { pointer-events: auto; }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.caption {
  margin: 0; min-height: 1.3em; text-align: center; max-width: min(720px, 92vw);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 19px; color: var(--fg-soft);
}
button:focus-visible, a:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.credits {
  position: fixed; left: 0; bottom: 0; z-index: 3;
  padding: 14px 22px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  font-size: 14px; color: var(--fg-soft);
}
.credits a { color: inherit; text-decoration: none; transition: opacity .15s; }
.credits a:hover, .credits a:focus-visible { opacity: .7; }

@media (max-width: 760px) {
  header { padding: 14px; padding-top: max(14px, env(safe-area-inset-top)); }
  .caption { font-size: 16px; }
  .credits { position: static; padding: 0; font-size: 13px; }
}
body.compact .caption { display: none; }
body.compact .dock { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
body.compact .credits { position: fixed; padding: 12px 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* the theme spreads from the switch like a lamp being turned on */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: lampOn .7s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes lampOn { from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 5%)); } to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 5%)); } }

/* ---------- Serpova, the name on the door ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
.brand .mark { flex: none; filter: drop-shadow(0 3px 8px rgba(224, 82, 122, .28)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.brand .mk-fold { transform-origin: 26px 6px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.brand .mk-s { stroke-dasharray: 1; stroke-dashoffset: 0; }
.brand:hover .mark { transform: rotate(-6deg) scale(1.06); }
.brand:hover .mk-fold { transform: scale(1.35); }
.brand:hover .mk-s { animation: redraw .9s cubic-bezier(.6, 0, .3, 1); }
@keyframes redraw { 0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: 1; } 46% { stroke-dashoffset: -1; } 100% { stroke-dashoffset: 0; } }
.brand .word { font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: -.02em; line-height: 1; font-variation-settings: "opsz" 72; }
.brand .tag { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 15px; color: var(--fg-soft); margin-left: 2px; padding-left: 11px; border-left: 1px solid var(--fg-faint); line-height: 1.1; }
@media (max-width: 980px) { .brand .tag { display: none; } }

/* light / dark */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; flex: none;
  color: var(--fg); background: rgba(var(--ink-rgb), .05); transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.theme-toggle:hover { background: rgba(var(--ink-rgb), .1); }
.theme-toggle:active { transform: scale(.9); }
.theme-toggle svg { overflow: visible; }
.theme-toggle .tm-sun { transition: r .5s cubic-bezier(.3, 1.4, .5, 1); }
.theme-toggle .tm-cut { transition: cx .5s cubic-bezier(.3, 1.2, .5, 1), cy .5s cubic-bezier(.3, 1.2, .5, 1); }
.theme-toggle .tm-rays { transform-origin: 12px 12px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
[data-theme="dark"] .theme-toggle .tm-sun { r: 8.5px; }
[data-theme="dark"] .theme-toggle .tm-cut { cx: 17px; cy: 7px; }
[data-theme="dark"] .theme-toggle .tm-rays { transform: rotate(45deg) scale(0); opacity: 0; }
[data-theme="dark"] .theme-toggle { color: #f5dfa8; }

/* the maker's mark */
.made-by {
  position: fixed; left: 22px; bottom: 16px; z-index: 3; bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fg-soft); text-decoration: none;
  opacity: .78; transition: opacity .2s, color .2s;
}
.made-by b { font-weight: 600; color: var(--fg); }
.made-by .heart { color: #e0527a; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.made-by:hover { opacity: 1; }
.made-by:hover .heart { animation: beat .9s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }