/* Padam — one motif: the round Telugu letter, born of palm-leaf writing. */
:root {
  --bg: #EFE6CF;
  --surface: #E3D6B4;
  --ink: #231C12;
  --muted: #5E5140;
  --accent: #1F6B4A;
  --accent-ink: #FFFFFF;
  --field: #1F6B4A;
  --field-ink: #F3EAD2;
  --marigold: #E9A825;
  --marigold-ink: #2B1E05;
  --night: #231C12;
  --night-ink: #EDE4CC;
  --leaf: #F3EAD2;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3rem, 1.6rem + 6vw, 7.25rem);

  --margin: clamp(16px, 3vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14120E; --surface: #221F19; --ink: #EDE4CC; --muted: #B3A688;
    --accent: #4FB286; --accent-ink: #0B1A12; --field: #1B4A35; --field-ink: #EDE4CC;
    --night: #0B0A08; --night-ink: #EDE4CC; --leaf: #2B271F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14120E; --surface: #221F19; --ink: #EDE4CC; --muted: #B3A688;
  --accent: #4FB286; --accent-ink: #0B1A12; --field: #1B4A35; --field-ink: #EDE4CC;
  --night: #0B0A08; --night-ink: #EDE4CC; --leaf: #2B271F;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Anek Telugu", system-ui, sans-serif; font-size: var(--step-body); line-height: 1.5;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
::selection { background: var(--marigold); color: var(--marigold-ink); }

.btn {
  display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.5em; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink); font: 600 var(--step-body)/1 "Anek Telugu", sans-serif;
  text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), background-color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.light { background: var(--field-ink); color: var(--field); }
.btn.small { padding: .6em 1.1em; font-size: var(--step-small); }

/* ---- Bar ---- */
.bar {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 28px;
  padding: 18px var(--margin);
}
.mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.mark b { font-size: 2rem; font-weight: 700; line-height: 1; }
.mark span { color: var(--muted); font-size: var(--step-body); }
.bar nav { display: flex; gap: 24px; margin-left: auto; }
.bar nav a { text-decoration: none; color: var(--ink); font-size: var(--step-body); }
.doc a, .credits a, address a { color: inherit; text-decoration-thickness: 1px; }
.bar nav a:hover { text-decoration: underline; }

/* ---- Hero ---- */
.hero {
  position: relative; min-height: min(100svh, 980px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 40px; padding: 0 var(--margin) 80px; margin-top: -76px; padding-top: 120px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; width: 125vh; height: 125vh; right: -38vh; top: 50%; translate: 0 -50%;
  border-radius: 50%; background: var(--field); z-index: 0;
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe { to { transform: scale(1.04); } }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: var(--step-display); max-width: 9ch; }
.hero .lead { margin-top: 22px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; color: var(--ink); }
.hero .act { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hero .act small { color: var(--muted); font-size: var(--step-small); }

/* The live demo, inside the circle */
.demo { color: var(--field-ink); max-width: 460px; justify-self: center; width: 100%; }
.demo label { display: block; font-size: var(--step-body); margin-bottom: 10px; }
.demo .out {
  min-height: 2.3em; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); font-weight: 600; line-height: 1.15;
  word-break: break-word; margin-bottom: 14px;
}
.demo .out i { font-style: normal; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.demo input {
  width: 100%; font: 500 1.375rem/1.2 "Anek Telugu", sans-serif; color: var(--ink); background: var(--leaf);
  border: 0; border-radius: 999px; padding: .75em 1.1em;
}
.demo input::placeholder { color: var(--muted); }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; min-height: 52px; }
.strip button {
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--field-ink) 14%, transparent); color: var(--field-ink);
  font: 500 1.25rem/1 "Anek Telugu", sans-serif; padding: .6em .4em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform .15s var(--ease), background-color .15s;
}
.strip button.best { background: var(--marigold); color: var(--marigold-ink); font-weight: 700; }
.strip button:hover { transform: translateY(-2px); }
.tries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: var(--step-small); }
.tries span { align-self: center; }
.tries button {
  border: 0; border-radius: 999px; padding: .45em .9em; background: var(--leaf); color: var(--ink); cursor: pointer;
  font: 500 var(--step-small)/1 "Anek Telugu", sans-serif; transition: transform .15s var(--ease);
}
.tries button:hover { transform: translateY(-2px); }

/* ---- Story band: why the letters are round ---- */
.story {
  background: var(--night); color: var(--night-ink); padding: clamp(80px, 12vw, 180px) var(--margin);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.story .discs { position: relative; aspect-ratio: 1; }
.story .disc { position: absolute; border-radius: 50%; overflow: hidden; }
.story .disc img { width: 100%; height: 100%; object-fit: cover; animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.16) translateX(2%); } }
.story .disc.one { inset: 0 18% 18% 0; }
.story .disc.two { width: 46%; aspect-ratio: 1; right: 0; bottom: 0; outline: 10px solid var(--night); }
.story h2 { font-size: var(--step-head); max-width: 14ch; }
.story p { margin-top: 24px; font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.story .leaf {
  margin-top: 40px; width: 100%; aspect-ratio: 1920 / 533; border-radius: 999px; overflow: hidden;
}
.story .leaf img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Showcase: the తె key, blown up ---- */
.switch {
  position: relative; min-height: 92svh; overflow: hidden; padding: clamp(72px, 10vw, 140px) var(--margin);
  background: var(--field); color: var(--field-ink); transition: background-color .4s var(--ease), color .4s var(--ease);
}
.switch.en { background: var(--marigold); color: var(--marigold-ink); }
.switch h2 { font-size: var(--step-head); max-width: 12ch; }
.switch p { margin-top: 16px; max-width: 34ch; font-size: var(--step-body); }
.bigkey {
  position: absolute; right: -6vw; bottom: -8vh; font-size: clamp(56px, 12vw, 190px);
  width: 3.4em; height: 3.4em; border: 0; border-radius: .42em; cursor: pointer;
  background: var(--leaf); color: var(--ink); font-family: "Anek Telugu", sans-serif; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
  transition: transform .2s var(--ease), background-color .3s;
}
.bigkey:hover { transform: translateY(-.06em) rotate(-2deg); }
.bigkey:active { transform: translateY(.04em) scale(.98); }
.bigkey small { position: absolute; top: .45em; right: .55em; font-size: .28em; font-weight: 500; color: var(--muted); }
.switch .hint { position: absolute; left: var(--margin); bottom: clamp(32px, 6vw, 72px); font-size: var(--step-small); max-width: 26ch; }

/* ---- Features mosaic ---- */
.board {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 8px; padding: 10px;
  margin-top: clamp(80px, 10vw, 160px);
}
.tile { position: relative; overflow: hidden; padding: 20px; background: var(--surface); color: var(--ink); }
.tile.g { background: var(--field); color: var(--field-ink); }
.tile.m { background: var(--marigold); color: var(--marigold-ink); }
.tile.n { background: var(--night); color: var(--night-ink); }
.tile .cap { position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 2; }
.tile .cap b { display: block; font-size: 1.125rem; font-weight: 600; }
.tile .cap span { display: block; font-size: var(--step-small); line-height: 1.35; }
.tile h2 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); max-width: 10ch; }
.w6h2 { grid-column: span 6; grid-row: span 2; }
.w6h4 { grid-column: span 6; grid-row: span 4; }
.w3h4 { grid-column: span 3; grid-row: span 4; }
.w3h2 { grid-column: span 3; grid-row: span 2; }
.tile .shot { position: absolute; inset: 0; }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 74%; transform: scale(1.15); transform-origin: 50% 74%; }
.tile .shot.themes img { object-position: center 30%; transform: scale(1.7); transform-origin: 50% 30%; }
.tile .shot.emoji img { object-position: center 80%; transform: scale(1.5); transform-origin: 50% 80%; }
.tile .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .62)); } /* taste-skill-ignore: neutral scrim under caption on a screenshot */
.tile .shot + .cap { color: #fff; }
[data-ui].key { position: absolute; font-size: 64px; width: 1.9em; height: 2.1em; right: -.3em; top: 18px; border-radius: .2em;
  background: var(--leaf); color: var(--ink); display: grid; place-items: center; font-family: system-ui, sans-serif; }
[data-ui].key small { position: absolute; top: .18em; right: .28em; font: 600 .36em/1 "Anek Telugu"; color: var(--muted); }
[data-ui].pill { position: absolute; right: -10px; top: 22px; font-size: 34px; padding: .25em .7em; border-radius: 999px; background: var(--leaf); color: var(--ink); font-weight: 600; }
[data-ui].pw { position: absolute; right: -24px; top: 20px; font-size: 30px; padding: .35em .8em; border-radius: 999px; background: var(--leaf); color: var(--ink); letter-spacing: .12em; display: flex; gap: .6em; align-items: center; }
[data-ui].pw em { font-style: normal; letter-spacing: 0; font-size: .6em; padding: .25em .7em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
[data-ui].forget { position: absolute; right: -30px; top: 22px; font-size: 30px; padding: .4em 1em; border-radius: 999px; background: var(--leaf); color: var(--ink); font-weight: 600; }

/* ---- Themes: index with preview ---- */
.themes {
  --kb-bg: #D9CBA3; --kb-key: #F3EAD2; --kb-alt: #C6B487; --kb-text: #231C12; --kb-hint: #8A7348; --kb-accent: #1F6B4A; --kb-accent-ink: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: clamp(80px, 12vw, 180px) var(--margin);
}
.themes h2 { font-size: var(--step-head); max-width: 12ch; margin-bottom: 28px; }
.themes ul { list-style: none; margin: 0; padding: 0; }
.themes li button {
  width: 100%; display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border: 0; background: none; color: var(--ink);
  font-family: inherit; text-align: left; cursor: pointer; transition: opacity .24s, transform .24s var(--ease);
}
.themes li button b { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 600; line-height: 1.1; }
.themes li button span { font-size: var(--step-body); color: var(--muted); }
.themes li button i { margin-left: auto; font-style: normal; font-size: var(--step-small); color: var(--muted); }
.themes ul:hover button, .themes ul:focus-within button { opacity: .4; }
.themes ul button:hover, .themes ul button:focus-visible, .themes ul button[aria-pressed="true"] { opacity: 1; transform: translateX(8px); }
.themes .note { margin-top: 24px; color: var(--muted); max-width: 40ch; }
.frame {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--kb-bg); transition: background-color .24s;
}
[data-ui].kb { width: 74%; background: var(--kb-bg); padding: 2%; transition: background-color .24s; }
.kb .row { display: flex; justify-content: center; }
.kb .k { flex: 0 0 9.4%; margin: .3%; aspect-ratio: .78; border-radius: 12%; background: var(--kb-key); color: var(--kb-text);
  display: grid; place-items: center; font: 400 clamp(11px, 1.5vw, 20px)/1 system-ui, sans-serif; transition: background-color .24s, color .24s; }
.kb .k.alt { background: var(--kb-alt); flex-basis: 14.4%; aspect-ratio: auto; }
.kb .k.space { flex-basis: 38.6%; aspect-ratio: auto; background: var(--kb-alt); color: var(--kb-text); font-family: "Anek Telugu"; }
.kb .k.go { flex-basis: 14.4%; aspect-ratio: auto; background: var(--kb-accent); color: var(--kb-accent-ink); }
.kb .sug { display: flex; justify-content: space-around; padding: 3% 0 4%; font: 500 clamp(14px, 1.9vw, 26px)/1 "Anek Telugu"; color: var(--kb-text); }
.kb .sug b { color: var(--kb-accent); }

/* ---- How it types: one card, four fields ---- */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { position: relative; min-height: 84svh; padding: 28px; display: flex; flex-direction: column; }
.field:nth-child(1) { background: var(--surface); }
.field:nth-child(2) { background: var(--field); color: var(--field-ink); }
.field:nth-child(3) { background: var(--marigold); color: var(--marigold-ink); }
.field:nth-child(4) { background: var(--night); color: var(--night-ink); }
.field h2 { font-size: var(--step-lead); font-weight: 700; }
.field .card { margin: 38svh auto 0; width: min(260px, 100%); transition: transform .15s var(--ease); }
.field:hover .card { transform: translateY(-6px); }
.field p { margin-top: auto; padding-top: 40px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 2rem); line-height: 1.15; max-width: 14ch; }
[data-ui].card { background: var(--leaf); color: var(--ink); border-radius: 22px; padding: 16px; font-size: 1.125rem; }
[data-ui].card .t { min-height: 1.6em; font-size: 1.25rem; }
[data-ui].card .t u { text-decoration-thickness: 2px; }
[data-ui].card .s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; font-size: 1rem; text-align: center; }
[data-ui].card .s span { padding: .35em 0; border-radius: 999px; background: var(--surface); }
[data-ui].card .s span.b { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
[data-ui].card .latin { font-family: system-ui, sans-serif; letter-spacing: .02em; }

/* ---- FAQ: tabbed cards ---- */
.faq { padding: clamp(80px, 12vw, 180px) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.faq > * { grid-column: 3 / 11; }
.faq h2 { font-size: var(--step-head); margin-bottom: 64px; }
.faq details { position: relative; margin-top: 54px; padding: 26px 28px 30px; background: var(--surface); }
.faq details:nth-of-type(3n+2) { background: var(--field); color: var(--field-ink); }
.faq details:nth-of-type(3n) { background: var(--marigold); color: var(--marigold-ink); }
.faq details::before {
  content: attr(data-tab); position: absolute; bottom: 100%; left: calc(var(--i) * (100% - 200px) / 5); width: 200px; height: 40px;
  display: grid; place-items: center; background: inherit; border-radius: 999px 999px 0 0; font-size: 1rem;
}
.faq summary { cursor: pointer; list-style: none; font-size: 1.25rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: 14px; max-width: 50ch; font-size: 1.0625rem; }

/* ---- Close ---- */
.close {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center;
  padding: 0 var(--margin) clamp(80px, 12vw, 180px);
}
.close h2 { font-size: var(--step-display); max-width: 9ch; }
.close .act { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.close .act small { color: var(--muted); font-size: var(--step-small); }
.close .disc { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--night); }
.close .disc img { width: 100%; height: auto; transform: translateY(-48%); }

/* ---- Footer: the mark built large ---- */
footer { overflow: hidden; background: var(--field); color: var(--field-ink); padding: 48px var(--margin) 32px; }
.built { display: flex; gap: 4px; height: min(34svh, 27vw); min-height: 120px; align-items: flex-end; }
.built span {
  height: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--field-ink); color: var(--field);
  display: grid; place-items: center; font-weight: 700; font-size: min(20svh, 16vw); line-height: 1; padding-top: .12em;
}
.built span:nth-child(2) { height: 78%; font-size: min(15svh, 12vw); }
.built span:nth-child(3) { height: 60%; font-size: min(12svh, 9.5vw); }
.foot { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.foot nav { grid-column: 1 / 9; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.foot nav a { font-size: 15px; }
.foot address { grid-column: 9 / 13; font-style: normal; font-size: 15px; }
.credits { margin-top: 40px; font-size: 15px; max-width: 75ch; }
.last { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; }

/* ---- Docs (privacy, 404) ---- */
.doc { max-width: 720px; padding: 48px var(--margin) 120px; margin: 0 auto; }
.doc h1 { font-size: var(--step-head); margin-bottom: 18px; }
.doc h2 { font-size: var(--step-lead); margin: 44px 0 10px; letter-spacing: -0.01em; line-height: 1.2; }
.doc p, .doc li { font-size: var(--step-body); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; }
.doc ul li::marker { content: "● "; color: var(--accent); font-size: .7em; }
.doc .meta { color: var(--muted); }

/* ---- Entrances ---- */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-rise].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .js [data-rise] { opacity: 1; transform: none; }
}

/* ---- Phone ---- */
@media (max-width: 760px) {
  .bar { gap: 12px; }
  .bar nav { display: none; }
  .bar .btn { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 104px; gap: 0; align-items: start; min-height: 0; }
  .hero::before { width: 150vw; height: 150vw; right: -25vw; top: auto; bottom: -62vw; translate: none; }
  .hero h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .demo { margin-top: 64px; padding: 0 2px 8px; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story .discs { width: 86%; }
  .switch { min-height: 86svh; }
  .bigkey { font-size: 34vw; right: -14vw; bottom: -6vh; left: auto; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 28vw; gap: 6px; padding: 6px; }
  .w6h2, .w6h4 { grid-column: span 2; grid-row: span 3; }
  .w6h2.head { grid-row: span 2; }
  .w3h4, .w3h2 { grid-column: span 1; grid-row: span 2; }
  .tile h2 { font-size: 9vw; }
  [data-ui].key { font-size: 40px; top: 12px; }
  .tile .shot img { object-position: center 72%; transform: scale(1.6); transform-origin: 50% 72%; }
  .tile .shot.themes img { object-position: center 22%; transform: scale(2.4); transform-origin: 50% 30%; }
  .tile .shot.emoji img { object-position: center 82%; transform: scale(2.2); transform-origin: 50% 80%; }
  .themes { grid-template-columns: minmax(0, 1fr); }
  .themes .frame { order: -1; width: 86%; justify-self: center; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .field { min-height: 64svh; padding: 20px; }
  .field h2 { order: -2; }
  .field p { order: -1; margin-top: 12px; padding-top: 0; font-size: 1.25rem; }
  .field .card { margin: 32px 0 0; }
  .faq > * { grid-column: 1 / -1; }
  .faq h2 { font-size: 9vw; }
  .faq details::before { width: 120px; left: calc(var(--i) * (100% - 120px) / 5); }
  .close { grid-template-columns: minmax(0, 1fr); }
  .close h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .close .disc { width: 80%; justify-self: center; }
  .built { height: 22svh; min-height: 120px; }
  .built span { font-size: 13svh; }
  .built span:nth-child(2) { font-size: 10svh; }
  .built span:nth-child(3) { font-size: 8svh; }
  .foot nav, .foot address { grid-column: 1 / -1; }
}