:root {
  color-scheme: light;
  --ink: #1f2933;
  --muted: #657184;
  --line: #d8d2c6;
  --surface: #fffdf8;
  --surface-alt: #f8fbfa;
  --accent: #006b68;
  --accent-strong: #00514f;
  --red: #9f3a38;
  --shadow: 0 18px 50px rgba(39, 45, 52, 0.11);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background: linear-gradient(135deg, #faf6ef 0%, #eef5f4 58%, #f7f1e7 100%);
  color: var(--ink);
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
}

button,
textarea,
select {
  font: inherit;
  max-width: 100%;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
}

.workspace {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cosmos-gateway {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(320px, 1.25fr) minmax(210px, 0.8fr);
  align-items: center;
  gap: 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(8, 16, 31, 0.96), rgba(12, 32, 49, 0.94) 46%, rgba(38, 26, 52, 0.96)),
    #07111d;
  color: white;
  box-shadow: 0 24px 70px rgba(7, 14, 29, 0.24);
  padding: 86px 28px 34px;
}

.tool-section {
  display: none;
  scroll-margin-top: 18px;
}

body.tool-transliterate .cosmos-gateway,
body.tool-capture .cosmos-gateway {
  display: none;
}

body.tool-transliterate .workspace,
body.tool-capture .workspace {
  width: 100%;
  max-width: 1380px;
  gap: 18px;
  padding: clamp(12px, 3vw, 26px);
}

body.tool-transliterate .topbar {
  display: flex;
}

body.tool-transliterate .composer {
  display: block;
}

body.tool-transliterate .target-panel {
  display: grid;
}

body.tool-transliterate .reference {
  display: grid;
}

body.tool-capture .ocr-panel {
  display: block;
}

body.tool-transliterate .site-footer,
body.tool-capture .site-footer {
  display: flex;
}

body:not(.tool-transliterate):not(.tool-capture) .tool-section {
  display: none !important;
}

.cosmos-gateway::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 24%, rgba(255, 246, 191, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 72%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 78%, rgba(207, 232, 255, 0.75) 0 1px, transparent 1.5px);
  background-size: 180px 180px, 260px 260px, 220px 220px, 310px 310px;
  opacity: 0.55;
  pointer-events: none;
}

.gateway-nav {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 36px);
}

.gateway-metrics {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: calc(100% - 36px);
}

.gateway-metrics div {
  min-width: 128px;
  border: 1px solid rgba(255, 229, 143, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.gateway-metrics strong {
  display: block;
  color: #ffe58f;
  font-size: 1.5rem;
  line-height: 1;
}

.gateway-metrics span {
  display: block;
  margin-top: 4px;
  color: rgba(244, 248, 255, 0.74);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.gateway-nav a,
.path-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 224, 123, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffe58f;
  padding: 9px 13px;
  text-decoration: none;
  font-weight: 800;
}

.gateway-nav a:hover,
.path-button:hover {
  background: rgba(255, 224, 123, 0.16);
}

.gateway-choice {
  position: relative;
  z-index: 2;
  max-width: 320px;
  width: 100%;
  border: 1px solid rgba(255, 229, 143, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

.gateway-choice-right {
  justify-self: end;
  text-align: right;
}

.gateway-choice .eyebrow {
  color: #ffe58f;
}

.gateway-choice-left {
  border-color: rgba(255, 229, 143, 0.54);
  background: linear-gradient(145deg, rgba(255, 229, 143, 0.18), rgba(255, 255, 255, 0.07));
}

.gateway-choice h2 {
  color: white;
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.gateway-choice p:not(.eyebrow) {
  color: rgba(244, 248, 255, 0.82);
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.path-button {
  margin-top: 10px;
  background: #ffe58f;
  color: #1f2933;
  box-shadow: 0 12px 34px rgba(255, 203, 61, 0.24);
}

.cosmos-stage {
  position: relative;
  z-index: 1;
  min-height: 510px;
  width: 100%;
  max-width: 620px;
  justify-self: center;
  display: grid;
  place-items: center;
}

.cosmos-stage::before,
.cosmos-stage::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 229, 143, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.cosmos-stage::before {
  width: min(92vw, 560px);
  aspect-ratio: 1;
}

.cosmos-stage::after {
  width: min(74vw, 440px);
  aspect-ratio: 1;
}

.language-stars {
  position: absolute;
  inset: 0;
  animation: starDrift 36s linear infinite;
}

.language-star {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(var(--angle) * -1));
  color: #fff4ba;
  font-family: "Noto Serif Devanagari", "Noto Serif Telugu", "Noto Serif Kannada", "Noto Serif Tamil", "Noto Serif Malayalam", "Noto Serif Bengali", "Noto Serif Gujarati", "Noto Serif Gurmukhi", "Noto Serif Odia", "Noto Serif Sinhala", "Noto Serif Khmer", "Noto Serif Myanmar", "Segoe UI", serif;
  font-size: clamp(0.78rem, 1.1vw, 1.06rem);
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 229, 143, 0.52);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-sun {
  position: relative;
  z-index: 2;
  width: min(310px, 58vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: sunTravel 10s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(255, 205, 50, 0.48));
}

.logo-sun img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gateway-title {
  position: absolute;
  left: 34px;
  bottom: 28px;
  z-index: 3;
}

.gateway-title .eyebrow {
  color: #ffe58f;
}

.gateway-title h1 {
  color: white;
  font-size: clamp(2rem, 5vw, 4.8rem);
}

@keyframes starDrift {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sunTravel {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(10px, -14px, 0) scale(1.025);
  }
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 4px;
  font-size: 1.02rem;
}

.stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.86rem;
}

.stats span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.66);
}

.composer,
.target-panel,
.ocr-panel,
.reference {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pane-header,
.ocr-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.pane-header p,
.ocr-head p,
.reference p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.button-row,
.ocr-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon-button,
.target-panel button,
.ocr-actions button,
.home-link,
.file-picker span,
.target-count {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--accent-strong);
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 700;
}

.icon-button {
  width: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.target-panel .button-row button,
.ocr-actions button,
.home-link {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 107, 104, 0.28);
  outline-offset: 2px;
}

textarea {
  width: 100%;
  min-height: 168px;
  resize: vertical;
  border: 0;
  padding: 18px;
  background: transparent;
  color: var(--ink);
  line-height: 1.8;
  font-family: "Noto Serif Devanagari", "Noto Serif Telugu", "Noto Serif Kannada", "Noto Serif Tamil", "Noto Serif Malayalam", "Noto Serif Bengali", "Noto Serif Gujarati", "Noto Serif Gurmukhi", "Noto Serif Odia", "Noto Serif Sinhala", "Noto Serif Khmer", "Noto Serif Myanmar", "Segoe UI", serif;
}

textarea::placeholder {
  color: #9aa2af;
}

.typing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
  border-top: 1px solid var(--line);
}

.live-sanskrit,
.english-mirror {
  min-width: 0;
}

.live-sanskrit {
  border-right: 1px solid var(--line);
}

.live-sanskrit label,
.mirror-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 251, 250, 0.68);
}

.live-sanskrit label,
.mirror-header h2 {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.mirror-header {
  justify-content: space-between;
  gap: 10px;
}

.mirror-header h2 {
  margin: 0;
}

#sourceText {
  min-height: 220px;
  font-size: clamp(1.25rem, 2vw, 1.72rem);
}

#englishMirror {
  min-height: 220px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}

.target-panel {
  display: grid;
}

.target-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.target-head label {
  width: min(440px, 100%);
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.target-output {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 18px 12px;
  align-items: start;
}

.target-output p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

#mainOutput {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  font-size: 1.35rem;
}

.letter-panel {
  border-top: 1px solid var(--line);
  background: rgba(248, 251, 250, 0.68);
}

.letter-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 10px;
}

.letter-head p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

#letterCount {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: white;
  padding: 5px 9px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.letter-table-wrap {
  max-height: 290px;
  overflow: auto;
  padding: 0 18px 18px;
}

.letter-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.95rem;
}

.letter-table th,
.letter-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
}

.letter-table th {
  position: sticky;
  top: 0;
  background: #f5f7f5;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 1;
}

.letter-table td:nth-child(2),
.letter-table td:nth-child(4),
.letter-table td:nth-child(5) {
  font-family: "Noto Serif Devanagari", "Noto Serif Telugu", "Noto Serif Kannada", "Noto Serif Tamil", "Noto Serif Malayalam", "Noto Serif Bengali", "Noto Serif Gujarati", "Noto Serif Gurmukhi", "Noto Serif Odia", "Noto Serif Sinhala", "Noto Serif Khmer", "Noto Serif Myanmar", "Segoe UI", serif;
  font-size: 1.08rem;
}

.ocr-panel {
  padding-bottom: 16px;
}

.ocr-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.3fr);
  gap: 14px;
  padding: 16px 18px;
}

.ocr-drop {
  display: grid;
  gap: 10px;
}

.file-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#ocrImagePreview {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

#ocrSanskrit,
#ocrEnglish,
#ocrFinal {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.ocr-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 10px;
}

.ocr-edit label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.ocr-edit label:first-child,
.ocr-edit label:last-child {
  grid-column: 1 / -1;
}

select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 8px 10px;
}

.ocr-status {
  margin: 0;
  padding: 0 18px;
  color: var(--muted);
  min-height: 24px;
  font-size: 0.92rem;
}

.reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #eee7db;
  color: var(--red);
}

.site-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.target-count {
  border-color: var(--line);
  background: white;
  color: var(--muted);
  cursor: default;
  font-size: 0.86rem;
}

@media (max-width: 1060px) {
  .cosmos-gateway {
    grid-template-columns: 1fr;
    min-height: 100svh;
    padding: 96px 22px 28px;
    gap: 14px;
  }

  .gateway-choice,
  .gateway-choice-right {
    max-width: none;
    text-align: left;
    justify-self: stretch;
  }

  .gateway-choice-left {
    order: 2;
  }

  .cosmos-stage {
    order: 1;
    min-height: 380px;
    max-width: 520px;
  }

  .cosmos-stage::before {
    width: min(86vw, 430px);
  }

  .cosmos-stage::after {
    width: min(68vw, 330px);
  }

  .language-star {
    font-size: 0.84rem;
    max-width: 104px;
  }

  .gateway-choice-right {
    order: 3;
  }

  .gateway-title {
    position: relative;
    left: auto;
    bottom: auto;
    order: 0;
  }

  .target-output {
    grid-template-columns: 1fr;
  }

  .typing-grid {
    grid-template-columns: 1fr;
  }

  .live-sanskrit {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .letter-head {
    display: grid;
  }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 0;
  }

  body.tool-transliterate .workspace,
  body.tool-capture .workspace {
    padding: 12px;
  }

  .gateway-nav {
    position: relative;
    inset: auto;
    order: -1;
    justify-content: flex-start;
    max-width: 100%;
  }

  .gateway-nav a {
    flex: 1 1 132px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .gateway-metrics {
    position: relative;
    inset: auto;
    order: -1;
    max-width: 100%;
  }

  .gateway-metrics div {
    flex: 1 1 130px;
    min-width: 0;
  }

  .gateway-metrics strong {
    font-size: 1.25rem;
  }

  .gateway-metrics span {
    font-size: 0.66rem;
  }

  .cosmos-stage {
    min-height: 300px;
    max-width: 360px;
  }

  .logo-sun {
    width: min(210px, 58vw);
  }

  .cosmos-stage::before {
    width: min(90vw, 320px);
  }

  .cosmos-stage::after {
    width: min(70vw, 250px);
  }

  .language-star {
    font-size: 0.72rem;
    max-width: 74px;
  }

  .topbar,
  .pane-header,
  .ocr-head,
  .ocr-grid,
  .ocr-edit,
  .target-head,
  .reference {
    display: grid;
    grid-template-columns: 1fr;
  }

  .stats,
  .button-row,
  .ocr-actions,
  .site-footer {
    justify-content: flex-start;
  }

}

@media (max-width: 520px) {
  .cosmos-gateway {
    padding: 14px;
    align-content: start;
  }

  .gateway-title h1 {
    font-size: clamp(2.1rem, 15vw, 3.2rem);
  }

  .gateway-choice {
    padding: 16px;
  }

  .gateway-choice h2 {
    font-size: 1.65rem;
  }

  .gateway-choice p:not(.eyebrow) {
    font-size: 0.95rem;
  }

  .path-button {
    width: 100%;
  }

  .cosmos-stage {
    min-height: 250px;
  }

  .logo-sun {
    width: min(180px, 54vw);
  }

  .language-stars {
    animation-duration: 44s;
  }

  .language-star {
    font-size: 0.66rem;
    max-width: 58px;
  }

  .pane-header,
  .ocr-head,
  .target-head,
  .target-output,
  .ocr-grid,
  .reference,
  textarea {
    padding-left: 12px;
    padding-right: 12px;
  }

  h1 {
    font-size: clamp(1.9rem, 12vw, 2.7rem);
  }

  #sourceText,
  #mainOutput,
  #englishMirror {
    min-height: 170px;
    font-size: 1.08rem;
  }

  .letter-table {
    min-width: 620px;
  }
}

@media (max-width: 380px) {
  .cosmos-gateway {
    padding: 12px;
    gap: 10px;
  }

  .gateway-nav,
  .gateway-metrics {
    gap: 6px;
  }

  .gateway-nav a {
    flex-basis: 124px;
    font-size: 0.88rem;
  }

  .gateway-choice {
    padding: 14px;
  }

  .cosmos-stage {
    min-height: 205px;
  }

  .logo-sun {
    width: min(158px, 52vw);
  }

  .language-star {
    max-width: 48px;
  }

  body.tool-transliterate .workspace,
  body.tool-capture .workspace {
    padding: 8px;
  }
}