:root {
  color-scheme: dark;
  --background: #242321;
  --foreground: #E8E5DE;
  --selection-background: #45423D;
  --translation-background: #262523;
  --translation-border: #45423D;
  --translation-foreground: #E8E5DE;
  --translation-shadow: 0 4px 20px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
  --text-size: clamp(20px, 1.7vw, 26px);
  --translation-text-size: var(--text-size);
  --translation-line-height: 1.5;
  --translation-height: calc(var(--translation-text-size) * var(--translation-line-height) * 3 + 2px);
  --translation-bottom: 36px;
  --reader-top: 98px;
  font-weight: 400;
  font-synthesis: none;
  background: var(--background);
  color: var(--foreground);
}

:root[data-theme="light"] {
  color-scheme: light;
  --background: #faf9f5;
  --foreground: #141413;
  --selection-background: #d3d2cd;
  --translation-background: #f5f4ed;
  --translation-border: #e8e6dc;
  --translation-foreground: #3d3d3a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  background: var(--background);
  color: var(--foreground);
}

html {
  scroll-padding-top: 24px;
  scroll-padding-bottom: calc(var(--translation-height) + var(--translation-bottom) + 32px);
}

.site-name {
  position: absolute;
  top: 12px;
  left: 18px;
  font-size: clamp(32px, 3.15vw, 48px);
  line-height: 1.4;
  white-space: nowrap;
}

.site-name a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.site-name a:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 4px;
}

.reader {
  width: min(58%, 900px);
  margin-inline: auto;
  padding-top: calc(var(--reader-top) + 12px);
  padding-bottom: calc(var(--translation-height) + var(--translation-bottom) + 48px);
  font-size: var(--text-size);
  line-height: 2;
}

.passage-title {
  margin: 0 0 0.83em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 2;
  text-align: left;
  line-break: strict;
  overflow-wrap: anywhere;
}

.passage p {
  margin: 0 0 1em;
  text-align: justify;
  text-align-last: start;
  text-justify: inter-character;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  hanging-punctuation: allow-end;
}

.word {
  cursor: pointer;
  border-radius: 1px;
  -webkit-tap-highlight-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.word:hover,
.word:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}

.word:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 4px;
}

ruby {
  ruby-align: space-around;
  ruby-position: over;
}

rt {
  font-size: 0.5em;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  user-select: none;
}

.translation {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: max(var(--translation-bottom), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% / 3);
  height: var(--translation-height);
  padding: calc(0.5em * var(--translation-line-height));
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid var(--translation-border);
  border-radius: 6px;
  box-shadow: var(--translation-shadow);
  background: var(--translation-background);
  color: var(--translation-foreground);
  font-size: var(--translation-text-size);
  line-height: var(--translation-line-height);
  text-align: left;
}

.translation p {
  margin: 0;
  overflow-wrap: anywhere;
}

.translation-meaning,
.translation-grammar {
  display: block;
}

.translation::-webkit-scrollbar,
.translation::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.theme-switch {
  position: absolute;
  z-index: 2;
  top: clamp(24px, 2.4vw, 36px);
  right: clamp(18px, 1.6vw, 26px);
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1;
  letter-spacing: 0.12em;
}

.theme-switch button {
  margin: 0;
  padding: 0.35em 0.1em;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.55;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch button[aria-pressed="true"] {
  opacity: 1;
}

.theme-switch button:hover,
.theme-switch button:focus-visible {
  opacity: 1;
}

.theme-switch button:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 3px;
}

.theme-switch .theme-space {
  white-space: pre;
  user-select: none;
}

::selection {
  color: var(--foreground);
  background: var(--selection-background);
}

@media (max-width: 900px) {
  :root {
    --reader-top: 100px;
    --translation-bottom: 24px;
  }

  .reader {
    width: calc(100% - 64px);
    max-width: 650px;
  }

  .translation {
    width: min(calc(100% - 80px), 634px);
  }
}

@media (max-width: 540px) {
  :root {
    --reader-top: 90px;
    --translation-bottom: 20px;
  }

  .site-name {
    top: 14px;
    left: 20px;
  }

  .theme-switch {
    top: 26px;
    right: 20px;
  }

  .reader {
    width: calc(100% - 40px);
  }

  .translation {
    width: calc(100% - 56px);
  }
}

@media (max-height: 560px) and (min-width: 541px) {
  :root {
    --reader-top: 72px;
    --translation-bottom: 16px;
  }
}

/* Lyrics retain the approved centered layout; all other rules are shared. */
.passage--lyrics .passage-title { text-align: center; }
.passage--lyrics p { text-align: center; text-align-last: center; }

/* Each independent annotation keeps its explicitly selected side. */
ruby.ruby-over { ruby-position: over; }
ruby.ruby-under { ruby-position: under; }
.editor-fragment { white-space: pre-wrap; }