/* The guide pages (web/public/*.html): plain reading pages in रामसेतु's dusk palette, readable with no script. Unlike the app,
   they allow text selection and zoom, because people read them. */
@font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; src: url("/fonts/mukta-400-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; src: url("/fonts/mukta-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Mukta"; font-weight: 600; font-display: swap; src: url("/fonts/mukta-600-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-weight: 600; font-display: swap; src: url("/fonts/mukta-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --bg: #10306a;
  --card: #163b7a;
  --ink: #eef5fc;
  --dim: #b9cbe3;
  --flame: #8fd4ee;
  --line: rgba(238, 245, 252, .16);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.7 "Mukta", system-ui, sans-serif;
}
.top, main, .more, footer { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.top a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 20px; }
.top .go { font-size: 16px; font-weight: 600; color: var(--bg); background: var(--flame); border-radius: 999px; padding: 8px 16px; }
h1 { font-size: 30px; line-height: 1.3; margin: 18px 0 8px; font-weight: 600; }
.lead { color: var(--dim); font-size: 19px; margin: 0 0 24px; }
h2 { font-size: 22px; line-height: 1.4; margin: 34px 0 8px; font-weight: 600; color: var(--flame); }
p, li { overflow-wrap: anywhere; }
ul, ol { padding-left: 1.3em; }
li { margin: 6px 0; }
a { color: var(--flame); }
strong { font-weight: 600; }
.cta {
  display: block; text-align: center; margin: 30px 0; padding: 16px 20px;
  background: var(--flame); color: var(--bg); text-decoration: none;
  font-size: 21px; font-weight: 600; border-radius: 16px;
}
.cta:focus-visible, .top a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
dl.faq dt { font-weight: 600; margin-top: 18px; }
dl.faq dd { margin: 4px 0 0; color: var(--dim); }
.note { border-left: 3px solid var(--flame); padding: 4px 0 4px 14px; color: var(--dim); }
.more { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line); }
.more h2 { color: var(--ink); font-size: 19px; }
.more ul { list-style: none; padding: 0; }
.more a { text-decoration: none; }
footer { color: var(--dim); font-size: 15px; padding-top: 24px; padding-bottom: 40px; }
/* Diagrams (inline SVG, labels in the page font) and the demo loops. */
.fig { margin: 26px 0; }
.fig svg { display: block; width: 100%; height: auto; font-family: "Mukta", system-ui, sans-serif; }
.fig figcaption { color: var(--dim); font-size: 15px; line-height: 1.5; margin-top: 8px; }
.fig.demo video { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; border-radius: 22px; background: var(--card); }
.fig.demo figcaption { text-align: center; max-width: 360px; margin-left: auto; margin-right: auto; }