:root {
  color-scheme: light;
  --background: #f4f4f1;
  --foreground: #111111;
  --card: #ffffff;
  --card-muted: #eeeeea;
  --muted: #5f5f58;
  --muted-foreground: #74746c;
  --border: #151515;
  --ring: #111111;
  --sound: #f4c430;
  --context: #d7d7d0;
  --vowels: #f3d6bf;
  --varga: #dfe9c9;
  --extras: #cbdfee;
  --accent: #ef4444;
  --radius: 0px;
  --line: 2px;
  --pad: clamp(6px, 0.58vw, 12px);
  --header-h: clamp(70px, 7.8vh, 96px);
  --inspector-w: clamp(188px, 20vw, 320px);
  --grid-min-w: 960px;
  --grid-min-h: 640px;
  --app-min-w: calc(var(--inspector-w) + var(--grid-min-w) + (var(--pad) * 3));
  --app-min-h: calc(var(--grid-min-h) + var(--header-h) + 58px + (var(--pad) * 2));
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-devanagari: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  overflow: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border-radius: var(--radius);
}

.table-app {
  width: max(100vw, var(--app-min-w));
  height: max(100dvh, var(--app-min-h));
  min-width: var(--app-min-w);
  min-height: var(--app-min-h);
  display: grid;
  grid-template-columns: var(--inspector-w) minmax(0, 1fr);
  gap: var(--pad);
  padding: var(--pad);
  overflow: visible;
}

.details-pane,
.table-pane {
  min-width: 0;
  min-height: 0;
  border: var(--line) solid var(--border);
  background: var(--card);
}

.details-pane {
  height: calc(100% - (var(--pad) * 2));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.details-hero,
.details-block {
  min-width: 0;
  border-bottom: var(--line) solid var(--border);
  background: var(--card);
}

.details-hero {
  padding: clamp(8px, 1vw, 16px);
  display: grid;
  gap: clamp(5px, 0.7vh, 10px);
}

.details-block {
  padding: clamp(7px, 0.9vw, 12px);
  overflow: hidden;
}

.details-context-block {
  border-bottom: 0;
}

.details-kicker,
.eyebrow,
.surface-kicker,
.details-label,
.tile-code,
.tile-state,
.details-facts dt {
  margin: 0;
  color: var(--muted);
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.details-title,
.details-code,
.details-status,
.details-roman,
.details-ipa,
.details-example-hi,
.details-example-roman,
.details-copy,
.details-facts dd,
.glyph,
.tile-pronunciation,
.tile-meta,
.label-title,
.label-note,
.app-header h1,
.surface-heading h2 {
  margin: 0;
}

.details-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.details-code,
.details-status {
  border: var(--line) solid var(--border);
  background: var(--card-muted);
  padding: 4px 6px;
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 800;
  line-height: 1;
}

.details-status {
  background: var(--sound);
}

.details-status[data-status="context"] {
  background: var(--context);
}

.details-glyph {
  font-family: var(--font-devanagari);
  font-size: clamp(58px, min(13vw, 12vh), 128px);
  font-weight: 700;
  line-height: 0.82;
}

.details-title {
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 900;
  line-height: 1;
}

.details-pronunciation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}

.details-roman {
  font-size: clamp(15px, 1.25vw, 22px);
  font-weight: 900;
  line-height: 1;
}

.details-ipa,
.details-example-roman,
.details-copy {
  color: var(--muted);
  font-size: clamp(11px, 0.86vw, 14px);
  line-height: 1.25;
}

.details-play {
  width: 100%;
  min-height: clamp(30px, 4vh, 42px);
  border: var(--line) solid var(--border);
  background: var(--foreground);
  color: var(--card);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.details-play:hover,
.details-play:focus-visible {
  background: var(--accent);
  outline: 3px solid var(--ring);
  outline-offset: -5px;
}

.details-play[hidden] {
  display: none;
}

.details-play:disabled {
  background: var(--context);
  color: var(--muted);
  cursor: default;
}

.details-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.details-facts div {
  display: grid;
  gap: 2px;
}

.details-facts dd {
  font-size: clamp(11px, 0.88vw, 14px);
  font-weight: 800;
  line-height: 1.15;
}

.details-example-hi {
  font-family: var(--font-devanagari);
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1;
}

.table-pane {
  height: calc(100% - (var(--pad) * 2));
  display: grid;
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  overflow: hidden;
}

.app-header {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px clamp(8px, 1vw, 16px) 6px;
  border-bottom: var(--line) solid var(--border);
  background: var(--card-muted);
}

.app-header > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.app-header h1 {
  font-family: var(--font-devanagari);
  font-size: clamp(24px, min(3.2vw, 4.5vh), 56px);
  font-weight: 700;
  line-height: 1;
}

.app-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: clamp(10px, 0.84vw, 14px);
  font-weight: 800;
  white-space: nowrap;
}

.app-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--border);
}

.legend-dot-active {
  background: var(--sound);
}

.legend-dot-muted {
  background: var(--context);
}

.table-surface {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(28px, 4.4vh, 48px) minmax(0, 1fr);
  overflow: hidden;
}

.surface-heading {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 clamp(8px, 1vw, 16px);
  border-bottom: var(--line) solid var(--border);
}

.surface-heading h2 {
  font-size: clamp(13px, 1.2vw, 20px);
  font-weight: 900;
  line-height: 1;
}

.grid-frame {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: start;
  padding: clamp(4px, 0.6vw, 10px);
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    var(--background);
  background-size: 20px 20px;
}

.script-grid {
  width: max(
    var(--grid-min-w),
    min(100%, calc((100dvh - var(--header-h) - (var(--pad) * 2) - 54px) * 1.5))
  );
  height: max(
    var(--grid-min-h),
    min(100%, calc((100vw - var(--inspector-w) - (var(--pad) * 3) - 22px) * 0.666667))
  );
  max-height: 100%;
  aspect-ratio: 12 / 8;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(2px, 0.32vw, 6px);
}

.table-label,
.letter-tile,
.matra-tile,
.sign-tile {
  min-width: 0;
  min-height: 0;
  box-shadow: none;
}

.table-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  padding: clamp(3px, 0.45vw, 8px);
  border: 1px dashed #73736c;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(17, 17, 17, 0.035) 0,
      rgba(17, 17, 17, 0.035) 5px,
      transparent 5px,
      transparent 10px
    ),
    rgba(244, 244, 241, 0.76);
  color: var(--muted);
  overflow: hidden;
}

.table-label-guide {
  border-color: #44443e;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(17, 17, 17, 0.08) 0,
      rgba(17, 17, 17, 0.08) 5px,
      transparent 5px,
      transparent 10px
    ),
    #e9e9e3;
  color: var(--foreground);
}

.table-label-guide .label-note {
  color: var(--muted);
}

.table-label-side {
  border-color: #6f8da1;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(68, 114, 143, 0.13) 0,
      rgba(68, 114, 143, 0.13) 5px,
      transparent 5px,
      transparent 10px
    ),
    #e7f1f7;
}

.table-label-column,
.table-label-row,
.table-label-corner {
  border-color: #8a816f;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(117, 95, 57, 0.13) 0,
      rgba(117, 95, 57, 0.13) 5px,
      transparent 5px,
      transparent 10px
    ),
    #f2ead8;
}

.label-title {
  font-size: clamp(12px, min(0.86vw, 1.35vh), 16px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.label-note {
  color: var(--muted);
  font-size: clamp(10px, min(0.64vw, 1.05vh), 12px);
  font-weight: 700;
  line-height: 1.05;
}

.row-label-hindi {
  display: block;
  font-family: var(--font-devanagari);
  font-size: clamp(13px, min(1vw, 1.6vh), 18px);
  line-height: 1;
}

.letter-tile,
.matra-tile,
.sign-tile {
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(1px, 0.24vw, 4px);
  align-items: stretch;
  padding: clamp(3px, 0.45vw, 8px);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background 90ms linear, color 90ms linear, outline-color 90ms linear;
}

.letter-tile,
.matra-tile {
  border: var(--line) solid var(--border);
}

.letter-tile[data-zone="vowels"] {
  background: var(--vowels);
}

.matra-tile,
.sign-tile {
  background: #f7e4c9;
}

.sign-tile {
  border: 2px dotted var(--border);
  cursor: pointer;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.letter-tile[data-zone="varga"] {
  background: var(--varga);
}

.letter-tile[data-zone="extras"] {
  background: var(--extras);
}

.letter-tile:hover,
.letter-tile:focus-visible,
.letter-tile.is-previewed,
.matra-tile:hover,
.matra-tile:focus-visible,
.sign-tile:hover,
.sign-tile:focus-visible,
.sign-tile.is-previewed {
  background: #ffffff;
  outline: 3px solid var(--ring);
  outline-offset: -5px;
}

.letter-tile.is-selected,
.sign-tile.is-selected {
  outline: 4px solid var(--accent);
  outline-offset: -6px;
}

.letter-tile.is-playing {
  background: var(--sound);
  color: var(--foreground);
  outline: 4px solid var(--ring);
  outline-offset: -6px;
}

.letter-tile.is-inactive {
  background: var(--context);
  color: #575751;
}

.tile-topline {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 3px;
}

.tile-code,
.tile-state {
  color: currentColor;
  font-size: clamp(7px, min(0.58vw, 0.9vh), 11px);
  font-weight: 900;
}

.tile-state {
  border: 1px solid currentColor;
  padding: 1px 3px;
  background: rgba(255, 255, 255, 0.36);
}

.glyph {
  align-self: center;
  font-family: var(--font-devanagari);
  font-size: clamp(34px, min(3.1vw, 5vh), 64px);
  font-weight: 700;
  line-height: 1;
}

.matra-mark {
  align-self: center;
  margin: 0;
  font-family: var(--font-devanagari);
  font-size: clamp(28px, min(2.4vw, 3.8vh), 48px);
  font-weight: 700;
  line-height: 1;
}

.matra-form {
  margin: 0;
  font-family: var(--font-devanagari);
  font-size: clamp(16px, min(1.25vw, 2vh), 24px);
  font-weight: 700;
  line-height: 1;
}

.sign-stack {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0.18em;
  font-family: var(--font-devanagari);
  font-weight: 700;
  line-height: 1;
}

.sign-mark {
  font-size: clamp(18px, min(1.7vw, 2.7vh), 34px);
}

.sign-form {
  font-size: clamp(24px, min(2.2vw, 3.5vh), 44px);
}

.sign-tile .tile-code,
.sign-tile .tile-state {
  font-size: clamp(6px, min(0.52vw, 0.82vh), 10px);
}

.tile-pronunciation {
  font-size: clamp(11px, min(0.78vw, 1.2vh), 15px);
  font-weight: 900;
  line-height: 1;
}

.tile-meta {
  color: currentColor;
  font-size: clamp(9px, min(0.58vw, 0.9vh), 11px);
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 760px) {
  :root {
    --inspector-w: clamp(142px, 31vw, 188px);
    --pad: 4px;
    --line: 1px;
    --header-h: 58px;
    --grid-min-w: 900px;
    --grid-min-h: 600px;
  }

  .details-pane {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .details-context-block {
    display: none;
  }

  .details-note-block {
    border-bottom: 0;
  }

  .details-code,
  .details-status,
  .details-copy,
  .details-facts dd,
  .details-example-roman {
    font-size: 10px;
  }

  .details-glyph {
    font-size: clamp(46px, 13vw, 72px);
  }

  .details-label,
  .details-facts dt,
  .details-kicker,
  .eyebrow,
  .surface-kicker {
    font-size: 8px;
  }

  .app-legend {
    gap: 4px;
    font-size: 9px;
  }

  .surface-heading {
    padding-inline: 6px;
  }

  .glyph {
    font-size: 34px;
  }
}

@media (max-height: 760px) {
  .details-context-block {
    display: none;
  }

  .details-note-block {
    border-bottom: 0;
  }
}