@font-face{font-family:'Hind Guntur';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hindguntur-telugu.woff2') format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;}
@font-face{font-family:'Hind Mysuru';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hindmysuru-kannada.woff2') format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/hind-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hind-600-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hind-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hind';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/hind-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/notosans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/notosansdeva-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face{font-family:'Noto Sans Telugu';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/notosanstelugu-telugu.woff2') format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;}
@font-face{font-family:'Noto Sans Kannada';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/notosanskannada-kannada.woff2') format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/firacode-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Hello Beta - hellobeta.co
   Palette and light-only are mirrored from monorepo/packages/ui/src/tokens.ts.
   `orange` is used for fills and marks only; `orangeText` is the text accent,
   because #f5820b fails AA on cream at body size. */

:root{
  color-scheme:light;
  --page:#f4e9d6;
  --screen:#fdf7ea;
  --white:#ffffff;
  --her:#f9e3c6;
  --track:#f1eae0;
  --ink:#2e2117;
  --ink-soft:#6b5645;
  --orange:#f5820b;
  --orange-text:#a6520a;
  --orange-hover:#8e4508;
  --rule:rgba(46,33,23,0.20);
  --rule-soft:rgba(46,33,23,0.11);
  --flag:#8c2f14;
  --flag-bg:#f7e4dc;

  --display:'Hind',ui-sans-serif,system-ui,sans-serif;
  --body:'Noto Sans','Noto Sans Devanagari','Noto Sans Telugu','Noto Sans Kannada',ui-sans-serif,system-ui,sans-serif;
  --mono:'Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* The Hind superfamily has a face per Indian script drawn to one
     skeleton: Hind for Latin and Devanagari, Guntur for Telugu, Mysuru
     for Kannada. unicode-range picks each one, so all four tab labels
     are the same typeface rather than a sans next to two serifs. */
  --display-i:'Hind','Hind Guntur','Hind Mysuru',ui-sans-serif,system-ui,sans-serif;

  --s-2:0.75rem;
  --s-1:0.875rem;
  --s0:1rem;
  --s1:1.25rem;
  --s2:1.5rem;
  --s3:clamp(2rem,6vw,3.1rem);

  --measure:44rem;
  --card:20px;
  --pad:clamp(1.25rem,5vw,2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--s0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:0.5rem;z-index:10;background:var(--ink);color:var(--page);padding:0.5rem 0.75rem;border-radius:8px}

a{color:var(--orange-text);text-underline-offset:0.16em;text-decoration-thickness:from-font}
a:hover{color:var(--orange-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--orange-text);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--pad)}

/* masthead */
.nav{border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;flex-wrap:wrap;gap:0.35rem 1.25rem;align-items:baseline;padding-block:0.9rem}
.mark{
  font-family:var(--display);
  font-weight:700;font-size:var(--s1);
  letter-spacing:-0.008em;
  color:var(--ink);text-decoration:none;margin-right:auto;
}
.nav a:not(.mark){
  font-family:var(--display);
  font-size:var(--s-1);font-weight:500;
  color:var(--ink-soft);text-decoration:none;padding-block:0.15rem;
}
.nav a:not(.mark):hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
@media (max-width:30rem){
  .nav .wrap{gap:0 1rem;padding-block:0.8rem}
  .mark{flex:0 0 100%;margin:0 0 0.55rem}
  .nav a:not(.mark){font-size:var(--s-2)}
}

/* type */
main{padding-block:clamp(2.25rem,7vw,3.75rem) 3rem}
h1{
  font-family:var(--display);
  font-size:var(--s3);font-weight:600;
  line-height:1.1;letter-spacing:-0.012em;
  margin:0 0 1.75rem;max-width:16ch;text-wrap:balance;
}
h2{
  font-family:var(--display);
  font-size:var(--s2);font-weight:600;
  line-height:1.25;letter-spacing:-0.008em;
  margin:3rem 0 0.85rem;text-wrap:balance;
}
h3{font-family:var(--display);font-size:var(--s1);font-weight:600;letter-spacing:-0.005em;margin:2rem 0 0.5rem}
p{margin:0 0 1.05rem;max-width:38rem}
.lede{font-size:var(--s1);line-height:1.5}
ul,ol{margin:0 0 1.05rem;padding-left:1.2rem;max-width:38rem}
li{margin-bottom:0.45rem}
strong{font-weight:600}

/* panels: the conversation and the status block share one treatment */
.panel{
  position:relative;
  background:var(--screen);
  border:1px solid var(--rule-soft);
  border-radius:var(--card);
  padding:1.25rem;
  margin:0 0 1rem;
}

/* language switch.
   Radio inputs, not JavaScript: the CSP on this site is default-src 'none',
   so no script runs here at all. The radios stay in the accessibility tree
   and arrow keys move between them; only their boxes are clipped away. */
.langs{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tabs{
  display:flex;gap:0.25rem;
  background:var(--track);
  border-radius:999px;
  padding:0.25rem;
  margin:0 0 1.1rem;
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
}
.tabs label{
  display:inline-flex;
  align-items:center;
  min-height:2.15rem;
  font-family:var(--display-i);
  font-size:var(--s-1);font-weight:600;
  color:var(--ink-soft);
  padding:0 0.9rem;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  line-height:1.65;
}
/* Indic scripts read optically smaller than Latin at the same em size, so
   the four tabs only look like one set if the Indic ones are set larger. */
.tabs label[lang]{font-size:0.97rem}
/* Indic glyphs carry more detail per em than Latin, so they read smaller at
   the same point size. Nudge the non-Latin labels up so the four tabs look
   like one row rather than one large tab and three faint ones. */
.tabs label[lang]{font-size:0.97rem}
.tabs label:hover{color:var(--ink)}
#lang-en:checked ~ .tabs label[for="lang-en"],
#lang-hi:checked ~ .tabs label[for="lang-hi"],
#lang-te:checked ~ .tabs label[for="lang-te"],
#lang-kn:checked ~ .tabs label[for="lang-kn"]{
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(46,33,23,0.10);
}
#lang-en:focus-visible ~ .tabs label[for="lang-en"],
#lang-hi:focus-visible ~ .tabs label[for="lang-hi"],
#lang-te:focus-visible ~ .tabs label[for="lang-te"],
#lang-kn:focus-visible ~ .tabs label[for="lang-kn"]{
  outline:2px solid var(--orange-text);
  outline-offset:2px;
}

/* the conversation */
.thread{display:none;flex-direction:column}
#lang-en:checked ~ .thread[data-lang="en"],
#lang-hi:checked ~ .thread[data-lang="hi"],
#lang-te:checked ~ .thread[data-lang="te"],
#lang-kn:checked ~ .thread[data-lang="kn"]{display:flex}
.speaker{
  font-family:var(--display);
  font-size:var(--s-2);font-weight:600;
  color:var(--ink-soft);
  margin:0.75rem 0 0.2rem;
}
.speaker:first-child{margin-top:0}
.speaker-her{text-align:right}

.msg{
  max-width:86%;
  padding:0.7rem 1rem;
  border-radius:18px;
  margin:0;
  box-shadow:0 1px 0 rgba(46,33,23,0.05);
}
.msg + .msg{margin-top:0.3rem}
.msg-app{
  align-self:flex-start;
  background:var(--white);
  border-bottom-left-radius:6px;
}
.msg-her{
  align-self:flex-end;
  background:var(--her);
  border-bottom-right-radius:6px;
}
.msg p{margin:0;max-width:none}
/* Indic scripts need more vertical room than Latin at the same point size:
   Devanagari matras hang above the shirorekha, and Telugu and Kannada stack
   vowel signs below the baseline. Same reasoning as LEADING in tokens.ts. */
.msg .indic{
  font-family:var(--body);
  font-size:clamp(1.1rem,3.7vw,1.25rem);
  line-height:1.8;font-weight:500;
}
.msg-app > p{color:var(--ink)}

.sysline{text-align:center;margin:1.1rem 0 0}
.sysline span{
  display:inline-block;
  font-family:var(--display-i);
  line-height:1.6;
  font-size:var(--s-1);font-weight:600;
  color:var(--orange-text);
  background:var(--page);
  border-radius:999px;
  padding:0.4rem 1rem;
}

@media (prefers-reduced-motion:no-preference){
  /* Kept under a second end to end: the reader this page is for scans it
     fast, and a hero that is still assembling reads as a broken page. */
  .thread > *{animation:arrive 0.34s cubic-bezier(0.2,0.7,0.3,1) backwards}
  .thread > *:nth-child(1){animation-delay:0.04s}
  .thread > *:nth-child(2){animation-delay:0.10s}
  .thread > *:nth-child(3){animation-delay:0.24s}
  .thread > *:nth-child(4){animation-delay:0.30s}
  .thread > *:nth-child(5){animation-delay:0.44s}
  .thread > *:nth-child(6){animation-delay:0.50s}
  .thread > *:nth-child(7){animation-delay:0.62s}
}
@keyframes arrive{from{opacity:0;transform:translateY(0.4rem)}to{opacity:1;transform:none}}

/* the basket, sent as an attachment inside the reply */
.basket{
  width:100%;
  margin:0.75rem 0 0;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--s-1);text-align:left;
}
.basket caption{
  font-family:var(--display);
  font-size:var(--s-2);font-weight:600;
  color:var(--ink-soft);text-align:left;
  padding:0 0 0.45rem;
}
.basket th,.basket td{padding:0.42rem 0;font-weight:400;border-bottom:1px solid var(--rule-soft)}
.basket th{font-family:var(--body);font-size:1rem;line-height:1.7;font-weight:500;color:var(--ink)}
.basket .qty{font-family:var(--body);color:var(--ink-soft);white-space:nowrap;width:1%;text-align:right;padding-inline:0.6rem}
.basket .amt{font-family:var(--body);text-align:right;white-space:nowrap;width:1%;color:var(--ink)}
.basket .sum th,.basket .sum td{border-top:1px solid var(--ink);border-bottom:0;padding-top:0.55rem}
.basket .sum th{font-family:var(--display-i);font-weight:600;font-size:var(--s-1)}
.basket .sum .amt{font-size:var(--s1);font-weight:600;line-height:1}

.note{
  font-family:var(--body);font-size:var(--s-1);
  color:var(--ink-soft);margin:0.9rem 0 2.25rem;max-width:38rem;
}

/* status block: same panel, label/value rows */
.facts{margin:0 0 1.25rem}
.facts div{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:0.15rem 1.5rem;padding-block:0.7rem;
  border-bottom:1px solid var(--rule-soft);
}
.facts div:first-child{padding-top:0}
.facts div:last-child{padding-bottom:0;border-bottom:0}
.facts dt{
  font-family:var(--display);
  font-size:var(--s-2);font-weight:600;
  letter-spacing:0.03em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:0.2rem;
}
.facts dd{margin:0}
@media (min-width:40rem){.facts div{grid-template-columns:8.5rem minmax(0,1fr)}}

/* code. The security note quotes real policy lines out of the migrations,
   so they should look like what they are quoted from rather than like prose. */
pre.code{
  font-family:var(--mono);
  font-size:0.8125rem;
  line-height:1.7;
  background:var(--white);
  border:1px solid var(--rule-soft);
  border-radius:10px;
  padding:0.85rem 1rem;
  margin:0 0 1.15rem;
  max-width:38rem;
  overflow-x:auto;
  color:var(--ink);
  tab-size:2;
}
pre.code .cmt{color:var(--ink-soft)}
code{
  font-family:var(--mono);
  font-size:0.875em;
  background:var(--track);
  border-radius:4px;
  padding:0.1em 0.35em;
  overflow-wrap:break-word;
}
pre.code code{background:none;padding:0;font-size:1em}

/* placeholders */
.todo{
  font-family:var(--display);
  font-size:0.88em;font-weight:600;
  color:var(--flag);background:var(--flag-bg);
  padding:0.05em 0.35em;border-radius:4px;
  overflow-wrap:break-word;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* colophon */
.foot{border-top:1px solid var(--rule);margin-top:3.5rem}
.foot .wrap{padding-block:1.5rem 2.5rem}
.foot p{font-size:var(--s-1);color:var(--ink-soft);margin:0 0 0.35rem;line-height:1.55;max-width:38rem}
.foot nav{display:flex;flex-wrap:wrap;gap:0.35rem 1.15rem;margin-bottom:0.85rem}
.foot nav a{font-family:var(--display);font-size:var(--s-1);font-weight:500;color:var(--ink-soft);text-decoration:none}
.foot nav a:hover{color:var(--orange-hover);text-decoration:underline}

/* legal */
.doc h2{font-size:var(--s1);margin-top:2.5rem}
.doc .updated{font-family:var(--display);font-size:var(--s-1);color:var(--ink-soft);margin-bottom:2rem}