#def {
  display: inline-block;
  position: absolute;
  background-color: var(--white-light);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 7px;
  border: var(--border-medium);
  max-width: 55ch;
  height: fit-content;
  cursor: pointer; }

#def.active {
  display: block;
  z-index: var(--z-index-def); }

[data-lang=tib] {
  transition: background-color 0.1s ease; }
  [data-lang=tib] .tib:hover,
  [data-lang=tib] .tib:active {
    cursor: pointer;
    background: rgba(255, 220, 100, 0.9); }

/*
.tti {
    font-family: "BabelStone Tibetan Slim";
    font-weight: normal;
    font-size: 1.2rem;
    letter-spacing: 1.1px;
}
*/
.color-letter {
  color: brown; }

@font-face {
  font-family: "BabelStone Tibetan Slim";
  src: url("/fonts/BabelStoneTibetanSlim.ttf") format("truetype");
  unicode-range: U+0F00-0FFF;
  size-adjust: 140%;
  descent-override: 50%;
  letter-spacing: 1.1px;
  font-display: swap; }

@font-face {
  font-family: 'Noto Serif';
  src: url("/fonts/Noto_Serif/NotoSerif-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-feature-settings: "liga" 0;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Libre Baskerville';
  src: url("/fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf") format("truetype");
  font-feature-settings: "liga" 0;
  font-weight: bold;
  font-display: swap; }

@font-face {
  font-family: 'Libre Baskerville';
  src: url("/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap; }

:root {
  --font-heading: 'Libre Baskerville';
  --font-tibetan: 'BabelStone Tibetan Slim';
  --font-latin: 'Noto Serif';
  --font-body: --font-tibetan, --font-latin;
  --black-dark: #151515;
  --black-medium: #242424;
  --black-light: #363636;
  --color-dark-400: #363636;
  --color-dark-500: #363636;
  --white-dark: #E9E9E9;
  --white-medium: #F6F7F8;
  --white-light: #FFFFFF;
  --color-light: #f6f7f8;
  --color-accent: #b90808;
  --color-accent-2: #F6CD51;
  --line-height-base: 1.5;
  --measure-xs: 20ch;
  --measure-s: 35ch;
  --measure-m: 55ch;
  --measure-l: 75ch;
  --measure-xl: 96ch;
  --measure-2xl: 125ch;
  --content-s: 600px;
  --content-m: 900px;
  --content-l: 1200px;
  --content-xl: 1600px;
  --step--2: clamp(0.7901rem, 0.7558rem + 0.1718vw, 0.8889rem);
  --step--1: clamp(0.8889rem, 0.8502rem + 0.1932vw, 1rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0761rem + 0.2446vw, 1.2656rem);
  --step-2: clamp(1.2656rem, 1.2106rem + 0.2751vw, 1.4238rem);
  --step-3: clamp(1.4238rem, 1.3619rem + 0.3095vw, 1.6018rem);
  --step-4: clamp(1.6018rem, 1.5322rem + 0.3482vw, 1.802rem);
  --step-5: clamp(1.802rem, 1.7237rem + 0.3917vw, 2.0273rem);
  --step-900: calc(clamp(1.85em, 1.8395rem + 1.1704vw, 2.5rem));
  --step-1000: calc(clamp(2.3rem, 2.1597rem + 1.6433vw, 3rem));
  --step-2000: calc(clamp(3rem, 2.8691rem + 2.4507vw, 4rem));
  --space-3xs: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);
  --space-2xs: clamp(0.3125rem, 0.2473rem + 0.3261vw, 0.5rem);
  --space-xs: clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem);
  --space-s: clamp(0.625rem, 0.4946rem + 0.6522vw, 1rem);
  --space-m: clamp(0.9375rem, 0.7418rem + 0.9783vw, 1.5rem);
  --space-l: clamp(1.25rem, 0.9891rem + 1.3043vw, 2rem);
  --space-xl: clamp(1.875rem, 1.4837rem + 1.9565vw, 3rem);
  --space-2xl: clamp(2.5rem, 1.9783rem + 2.6087vw, 4rem);
  --space-3xl: clamp(3.75rem, 2.9674rem + 3.913vw, 6rem);
  --body-margin: var(--space-xs);
  --body-padding: var(--space-2xs);
  --media-medium: 1024px;
  --color-primary: #2d3436;
  --color-secondary: #636e72;
  --color-text: #2d3436;
  --color-hover: #f1f2f6;
  --color-focus: #74b9ff;
  --border-grid: #5d7782;
  --border-light: 1px solid rgba(0, 0, 0, 0.16);
  --border-medium: 1px solid rgba(0, 0, 0, 0.35);
  --border-dark: 1px solid rgba(0, 0, 0, 0.65);
  --card-background-color: #fff;
  --card-border-color: #ddd;
  --card-border-radius: 5px;
  --card-padding: 1rem;
  --card-gap: 0.5rem;
  --card-hover-transform: translateY(-2px);
  --card-hover-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --card-title-font-size: var(--step-1);
  --card-description-color: #333;
  --card-number-color: #555;
  --card-transition: transform 0.3s ease, box-shadow 0.3s ease;
  --card-vertical-height: 210px;
  --card-vertical-image-width: 180px;
  --card-vertical-image-height: 190px;
  --card-vertical-image-border-radius: 4px;
  --card-vertical-content-flex: 5;
  --card-vertical-image-flex: 2;
  --z-index-card: 1;
  --z-index-cloud: 1;
  --z-index-image: 3;
  --z-index-tooltip: 20;
  --z-index-def: 20;
  --z-index-toc: 98;
  --z-index-nav: 99;
  --z-index-logo: 100;
  --sidebar-main-width: 120rem;
  --sidebar-body-width: 65rem;
  --sidebar-toc-width: 25rem;
  --focus-outline: 3px solid var(--color-focus);
  --sidebar-width: 300px;
  --nav-height: 60px; }

.vocales {
  display: flex;
  justify-content: space-around; }

.vocales > span {
  display: flex;
  flex-direction: column; }

.simple-verse-example {
  margin: 25px 0 10px; }

.box-line {
  display: inline-block;
  margin-bottom: 16px; }

.component-square {
  border: 1px solid gray;
  padding: 6px 10px;
  margin: 3px; }

.main-word.mark-main, .part-word.mark-part {
  color: var(--primary-color) !important; }

@media only screen and (max-width: 450px) {
  .container {
    max-width: var(--max-width-mobile); }
  .ejemplo-text, .square-main-text {
    padding: var(--padding-small) 0.5rem; }
  .square-main-text {
    overflow: auto;
    white-space: nowrap; } }

.green-pass {
  background-color: #c1e1c1; }

.red-pass {
  background-color: #f4c1c1; }

table {
  margin-bottom: 20px;
  text-align: center;
  border-spacing: 0;
  width: 100%; }

table td {
  width: 200px;
  padding: 10px;
  border-right: 1px solid var(--border-grid);
  border-bottom: 1px solid var(--border-grid);
  text-align: center;
  align-content: center; }

table td:first-child {
  border-left: 1px solid var(--border-grid); }

table tr:first-child td {
  border-top: 1px solid var(--border-grid); }

table > div {
  padding: 0px; }

table .vocales {
  display: flex;
  justify-content: space-around; }

table .vocales > span {
  display: flex;
  flex-direction: column; }

table .meta-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

table .vertical-text {
  text-align: center; }

#table-alphabet-special td {
  height: 6rem;
  padding: 0px; }

#table-alphabet-special .td-container {
  display: flex;
  height: 100%; }

#table-alphabet-special .letter-container {
  display: flex;
  flex-direction: column;
  flex: 1; }

#table-alphabet-special .letter-one {
  flex: 1;
  justify-content: space-around;
  border-bottom: 1px solid gray;
  text-align: center; }

#table-alphabet-special .letter-one .tibetan-text {
  margin-right: 5px; }

#table-alphabet-special .letter-two {
  flex: 1;
  text-align: center; }

#table-alphabet-special .letter-two .tibetan-text {
  margin-right: 5px; }

#table-alphabet-special .sound-container {
  display: flex;
  flex: 1;
  justify-content: space-around;
  border-right: 1px solid gray; }

#table-alphabet-special .sound {
  align-self: center;
  text-align: center; }

.demostracion {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-height: 40dvh;
  margin: 0 0 20px 30px;
  width: var(--max-width-container);
  overflow: auto;
  padding: 0 30px;
  border: 1px solid grey;
  border-radius: 5px;
  white-space: nowrap; }

.extra::before {
  content: '|';
  font-style: normal; }

.extra {
  font-style: italic;
  color: var(--black-medium); }

.example-box {
  margin: var(--space-m) var(--space-m); }

.example-main {
  padding: var(--space-m) var(--space-l);
  border-radius: 7px;
  border: var(--border-medium);
  display: flex;
  flex-direction: column; }

.example-main > [data-lang="spa"] + [data-lang="tib"] {
  margin-block-start: 1em; }

.brown {
  color: brown; }

.extra-structure,
.extra-explanation {
  color: var(--color-dark-300);
  font-style: italic;
  color: var(--black-light);
  padding: var(--space-xs); }

.horizontal-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  text-align: center; }

@media (min-width: 500px) {
  .horizontal-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1em; }
  .extra-explanation {
    color: var(--color-dark-400);
    padding: 5px 4em; } }

.vertical-examples {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center; }

.vertical-examples > * {
  display: block; }

.tibetan-phonetics {
  font-style: italic;
  color: var(--color-dark-400); }

.tibetan-boxed-text {
  padding: 5px 5px 5px 0; }