@font-face { font-family: "Crimson Pro"; src: url("fonts/CrimsonPro-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Crimson Pro"; src: url("fonts/CrimsonPro-Italic.ttf"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Crimson Pro"; src: url("fonts/CrimsonPro-SemiBold.ttf"); font-weight: 600; }
@font-face { font-family: "Crimson Pro"; src: url("fonts/CrimsonPro-Bold.ttf"); font-weight: 700; }
@font-face { font-family: "Cinzel"; src: url("fonts/Cinzel-Regular.ttf"); font-weight: 400; }

:root {
  --bg: #faf7f1; --ink: #2a2118; --muted: #8a7b68; --accent: #8b6b2e; --sheet: #ffffff; --rule: #e6dfd2;
  --hl-yellow: #f6e7a5; --hl-green: #d5ebc9; --hl-blue: #d2e3f5; --hl-pink: #f5d5dd;
  --fs: 19px; --lh: 1.48; --mx: 22px; --mt: 44px; --mb: 40px; --font: "Crimson Pro", Georgia, serif; --align: justify;
  --pw: 360px; --gap: 44px; --page: 0;
}
[data-theme="sepia"] { --bg: #f2e7cf; --ink: #3b2f1e; --muted: #8a7255; --sheet: #f9f1e0; --rule: #e0d3b6; }
[data-theme="dark"] { --bg: #14161d; --ink: #e6e1d8; --muted: #8e8a80; --accent: #d4a574; --sheet: #1f2230; --rule: #2c3040;
  --hl-yellow: #5a4d12; --hl-green: #2c4a25; --hl-blue: #23395a; --hl-pink: #5a2a38; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); height: 100%; overflow: hidden;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
#viewport { position: fixed; inset: 0; overflow: hidden; }
#frame { position: absolute; top: var(--mt); bottom: var(--mb); left: var(--mx); right: var(--mx); overflow: hidden; }
#book { height: 100%; width: var(--pw); column-width: var(--pw); column-gap: var(--gap); column-fill: auto;
  font-family: var(--font); font-size: var(--fs); line-height: var(--lh);
  transform: translateX(calc(-1 * var(--page) * (var(--pw) + var(--gap)))); transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
#book.no-anim { transition: none; }
#book p { margin: 0 0 0.55em; text-align: var(--align); hyphens: auto; -webkit-hyphens: auto; orphans: 2; widows: 2; }
#book p.indent { text-indent: 1.3em; }
#book p.first::first-letter { float: left; font-family: "Cinzel", serif; font-size: 3.05em; line-height: 0.82; padding: 0.1em 0.1em 0 0; color: var(--accent); }
#book h1, #book h2 { font-weight: 400; text-align: center; margin: 0.6em 0 0.8em; break-after: avoid; }
#book h1 { font-family: "Cinzel", serif; font-size: 1.15em; letter-spacing: 0.06em; break-before: column; padding-top: 10%; }
#book h1::before { content: ""; display: block; width: 46px; height: 12px; margin: 0 auto 16px; background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M0 6h16M30 6h16' stroke='black' stroke-width='.9'/%3E%3Cpath d='M23 1c1.6 2 3 3 5 5-2 2-3.4 3-5 5-1.6-2-3-3-5-5 2-2 3.4-3 5-5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M0 6h16M30 6h16' stroke='black' stroke-width='.9'/%3E%3Cpath d='M23 1c1.6 2 3 3 5 5-2 2-3.4 3-5 5-1.6-2-3-3-5-5 2-2 3.4-3 5-5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
#book h2 { font-size: 0.84em; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 1.5em; }
#book h2::after { content: ""; display: block; width: 28px; height: 1px; background: var(--accent); margin: 0.7em auto 0; opacity: 0.7; }
#book .sub { display: block; font-style: italic; font-size: 0.92em; text-transform: none; letter-spacing: 0; margin-top: 0.3em; color: var(--muted); }
#book .s { border-radius: 3px; padding: 0 1px; }
#book .s.active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
#book .s[data-hl="yellow"] { background: var(--hl-yellow); }
#book .s[data-hl="green"] { background: var(--hl-green); }
#book .s[data-hl="blue"] { background: var(--hl-blue); }
#book .s[data-hl="pink"] { background: var(--hl-pink); }
#book .s.g { text-decoration: underline dotted var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#book .s[data-mark]::after { content: "†"; color: var(--accent); font-size: 0.66em; vertical-align: super; margin-left: 1px; line-height: 0; }
#book .vn { font-family: -apple-system, Roboto, system-ui, sans-serif; font-size: 0.58em; color: var(--accent); vertical-align: super; line-height: 0; margin-right: 0.18em; font-weight: 600; }
#book p.la { font-style: normal; }
#book p.tr { color: var(--ink); }
#book .pair p.la { border-left: 2px solid var(--accent); padding-left: 0.6em; margin-bottom: 0.3em; text-indent: 0; }
#book .pair { margin-bottom: 0.9em; break-inside: avoid; }
#book .pair.par { break-inside: auto; }
#book .pair p.tr { text-indent: 0; }
#book .pair.par { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4em; margin-bottom: 1em; }
#book .pair.par p.la { border-left: 0; padding-left: 0; font-size: 0.96em; }
#book .pair.par p.tr { margin-bottom: 0; }

#head, #foot { position: absolute; left: var(--mx); right: var(--mx); font-family: -apple-system, Roboto, system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; }
#head span, #foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#head { top: 14px; padding-bottom: 10px; } #foot { bottom: 12px; padding-top: 10px; }
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); }
#progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 200ms; }

#sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--sheet); color: var(--ink); border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18); padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(110%);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1); max-height: 64vh; overflow-y: auto; font-family: var(--font); font-size: calc(var(--fs) * 0.92); line-height: 1.42;
  user-select: text; -webkit-user-select: text; }
#sheet.open { transform: translateY(0); }
#sheet .lang { font-family: -apple-system, Roboto, system-ui, sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px; }
#sheet .lang:first-child { margin-top: 0; }
#sheet .la-words { font-style: italic; }
#sheet .w { border-radius: 3px; padding: 0 1px; cursor: pointer; }
#sheet .w.sel { background: color-mix(in srgb, var(--accent) 25%, transparent); font-style: normal; }
#sheet .wgloss { margin-top: 8px; font-size: 0.92em; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; padding: 8px 10px; }
#sheet .wgloss:empty { display: none; }
#sheet .wgloss button { margin-left: 8px; padding: 4px 10px; }
#sheet .actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
#sheet button { font: 600 13px -apple-system, Roboto, system-ui, sans-serif; border: 1px solid var(--rule); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 8px 14px; }
#sheet button.dot { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
#sheet button.mark { border-color: var(--accent); color: var(--accent); }
#sheet .gloss { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: 0.9em; }
#dev { position: fixed; top: 6px; right: 8px; font: 11px system-ui; color: var(--muted); z-index: 5; }