:root {
  color-scheme: light;
  --navigation-accent-color: #72573b;
}

html {
  min-height: 100%;
  background-color: #fffaf0;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(255, 214, 170, 0.85), transparent 38%),
    linear-gradient(180deg, #fffaf0 0%, #f8f2e6 52%, #efe4d2 100%);
}

#app-root {
  min-height: 100vh;
}

.page {
  min-height: 100vh;
  padding:
    calc(2rem + env(safe-area-inset-top, 0px))
    0
    calc(2rem + env(safe-area-inset-bottom, 0px))
    0;
  background:
    radial-gradient(circle at top, rgba(255, 214, 170, 0.85), transparent 38%),
    linear-gradient(180deg, #fffaf0 0%, #f8f2e6 52%, #efe4d2 100%);
  color: #1e1a16;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.safe-area-top-fill,
.safe-area-bottom-fill {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fffaf0;
  pointer-events: none;
  z-index: 10;
}

.safe-area-top-fill {
  top: 0;
  height: env(safe-area-inset-top, 0px);
}

.safe-area-bottom-fill {
  bottom: 0;
  height: env(safe-area-inset-bottom, 0px);
}

.content-column {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.card {
  background: rgba(255, 252, 247, 0.82);
  border: 1px solid rgba(70, 49, 27, 0.12);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 1rem 3rem rgba(70, 49, 27, 0.08);
  backdrop-filter: blur(12px);
}

.hero {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1.25rem 0 0.5rem 0;
}

.page-title {
  margin: 0;
  line-height: 0.95;
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  letter-spacing: -0.05em;
  text-align: center;
}

.section-title {
  margin: 0 0 0.75rem 0;
  line-height: 0.95;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  white-space: pre-line;
}

.section-description {
  margin: 0;
  max-width: 48rem;
  line-height: 1.35;
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--navigation-accent-color);
}

.hero-image {
  display: block;
  width: min(14rem, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(70, 49, 27, 0.16);
}

.blob-heading {
  margin: 0;
  line-height: 0.95;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #2f2a26;
  white-space: pre-line;
}

.paragraph {
  margin: 0;
  max-width: 42rem;
  font-size: 1.05rem;
}

.deployment-index {
  margin: 0;
  padding: 0 0 0.25rem 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(114, 87, 59, 0.52);
}

.blob-list {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.blob-card {
  padding: 1.25rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(114, 87, 59, 0.14);
  background: rgba(255, 248, 239, 0.92);
  box-shadow: 0 0.8rem 1.8rem rgba(70, 49, 27, 0.08);
}

.blob-body {
  margin-top: 0.75rem;
  max-width: none;
  white-space: pre-wrap;
}

.tip-content-stack {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.75rem;
}

.tip-content-text {
  max-width: none;
  white-space: pre-wrap;
}

.tip-image-wrapper {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.tip-image {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: 0.8rem;
  border: 1px solid rgba(70, 49, 27, 0.16);
  box-shadow: 0 0.75rem 1.8rem rgba(70, 49, 27, 0.12);
}

.tip-image-caption {
  margin: 0;
  max-width: 32rem;
  font-size: 0.94rem;
  line-height: 1.35;
  text-align: center;
  color: rgba(47, 42, 38, 0.88);
}

.grid-of-six-wrapper {
  display: flex;
  justify-content: center;
}

.grid-of-six-viewport-fit-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
}

.grid-of-48-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding-inline: 0.25rem;
  box-sizing: border-box;
}

.grid-of-48 {
  display: grid;
  row-gap: 0.6rem;
  width: 100%;
  max-width: 40rem;
  min-width: 0;
}

.grid-of-48-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  width: 100%;
  min-width: 0;
}

.grid-of-48-tense {
  display: grid;
  row-gap: 0.35rem;
  width: 100%;
  min-width: 0;
  padding: 0.3rem;
  box-sizing: border-box;
  border-radius: 1.3rem;
}

.grid-of-48-title-highlight {
  box-shadow: inset 0 0 0 4px rgba(220, 38, 38, 0.9);
}

.grid-of-48-tense-title-slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 1.6rem;
  margin: 0;
}

.grid-of-48-hidden-title {
  visibility: hidden;
}

.grid-of-48-title-pill {
  display: inline-block;
  padding: 0.44rem 1rem;
  border-radius: 0.75rem;
  box-sizing: border-box;
}

.grid-of-48-tense-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 0;
  width: 100%;
  min-width: 0;
}

.grid-of-48-cell {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 3rem;
  padding: 0.3rem 0.28rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.2;
  background: rgba(255, 252, 247, 0.92);
}

.grid-of-48-column-1 {
  grid-column: 1;
}

.grid-of-48-column-2 {
  grid-column: 2;
}

.grid-of-48-border-top {
  border-top: 2px solid #000;
}

.grid-of-48-border-bottom {
  border-bottom: 2px solid #000;
}

.grid-of-48-border-left {
  border-left: 2px solid #000;
}

.grid-of-48-border-right {
  border-right: 2px solid #000;
}

.grid-of-48-top-left-corner {
  border-top-left-radius: 1rem;
}

.grid-of-48-top-right-corner {
  border-top-right-radius: 1rem;
}

.grid-of-48-bottom-left-corner {
  border-bottom-left-radius: 1rem;
}

.grid-of-48-bottom-right-corner {
  border-bottom-right-radius: 1rem;
}

.grid-of-six-viewport-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid #000;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 252, 247, 0.92);
  width: 100%;
  max-width: 100%;
}

.grid-of-six-viewport-fit-cell {
  min-width: 0;
  padding: 0.35rem 0.45rem;
  font-size: 0.95rem;
}

.grid-of-six-viewport-fit-cell-text {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  overflow: hidden;
}

.verb-chart-wrapper {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
}

.verb-chart-pyramid {
  display: grid;
  justify-items: center;
  row-gap: 0.45rem;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
}

.verb-chart-apex-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.verb-chart-base-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.verb-chart-base-row-spacer {
  flex: 1 1 0;
  min-width: 0;
}

.verb-chart-cell-stack {
  display: grid;
  justify-items: center;
  row-gap: 0.2rem;
}

.verb-chart-title-slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 1.6rem;
}

.verb-chart-cell-title {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(47, 42, 38, 0.62);
  white-space: pre-line;
}

.question-marks-title {
  font-size: 1.3rem;
}

.verb-chart-value-cell {
  display: grid;
  place-items: center;
  min-width: 6rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.2;
  border: 2px solid #000;
  border-radius: 1rem;
  background: rgba(255, 252, 247, 0.92);
}

.verb-chart-auto-fit-text {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.grid-of-six-titled-stack {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.grid-of-six-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: pre-line;
}

.conjugation-recipe-wrapper,
.conjugation-with-recipe-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.grid-of-six {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  border: 2px solid #000;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 252, 247, 0.92);
}

.conjugation-recipe,
.conjugation-with-recipe {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  border: 2px solid #000;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 252, 247, 0.92);
}

.grid-of-six-cell {
  display: grid;
  place-items: center;
  min-width: 6rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.2;
}

.conjugation-recipe-cell {
  display: grid;
  box-sizing: border-box;
  place-items: center;
  row-gap: 0.2rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.2;
}

.conjugation-recipe-min-width {
  min-width: min(7rem, calc((100vw - 5rem) / 3));
}

.conjugation-with-recipe-top-cell {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.8rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.2;
  border-bottom: 2px solid #000;
}

.grid-of-six-top-divider {
  border-top: 2px solid #000;
}

.grid-of-six-leading-divider {
  border-left: 2px solid #000;
}

.grid-of-six-cell-sizer-text {
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: pre-wrap;
}

.grid-of-six-cell-text {
  grid-area: 1 / 1;
  white-space: pre-wrap;
}

.conjugation-recipe-cell-text {
  white-space: pre-wrap;
}

.verb-chart-auto-fit-text {
  white-space: nowrap;
  overflow: hidden;
}

.conjugation-recipe-cell-label {
  font-size: 0.65rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 42, 38, 0.62);
}

.tip-link {
  color: var(--navigation-accent-color);
  text-decoration: none;
}

.tip-card-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  cursor: pointer;
  color: #2f2a26;
}

.tip-number {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navigation-accent-color);
  white-space: nowrap;
}

.tip-pager-number {
  display: inline-block;
  font-size: 1.27rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navigation-accent-color);
  white-space: nowrap;
}

.navigation-link-row {
  margin: 0 0 1rem 0;
}

.navigation-bar {
  margin: 0 0 1rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.75rem;
}

.bottom-tip-navigation {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--navigation-accent-color);
}

.supporting-project-link-row {
  margin: 0.75rem 0 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--navigation-accent-color);
  text-align: center;
}

.tip-pager {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.75rem;
}

.navigation-link {
  color: var(--navigation-accent-color);
  font-weight: 600;
  text-decoration: none;
}

.navigation-button-placeholder {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.footer {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem 0 0 0;
  justify-items: center;
}

.legal-notice {
  margin: 0;
  max-width: 48rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(114, 87, 59, 0.8);
}