/* One system runs through the site: a near-black blue ground with a slow field of blue-violet light behind it; panes of
   glass lit at their edges; and the yellow of the .AI mark kept for what is live and for a page's one main action.
   Only the bar, the phone's tabs and the sheet over them blur what is behind them; everything else is a translucent
   fill, so a long page stays cheap to scroll. Motion shows what has arrived or changed, and a page stands complete
   when motion is off. The names below are the whole kit: a page uses them, and does not invent a colour of its own. */
:root {
  --ground: #070a17; --solid: #0e1330; --panel: rgba(24, 31, 70, 0.6); --line: rgba(160, 178, 255, 0.17); --ink: #f1f3ff; --dim: #b1b8dc; --fill: #ffd400; --on-fill: #0b0b12;
  --alert: #ff6b78; --stamp: #9ab6ff; --good: #4ade9f; --paper: #e9ecff;
  --glow: 1; --radius: 18px; --type-scale: 1;                                                        /* with --fill and --ground, the five names the owner's Brain may change (/site design.tokens): how bright the light, how round the panes, how large the type */
  --fill-text: var(--fill);                                                                          /* the signal's colour for words on the ground: --ink instead when a chosen --fill would not read there */
  --blue: #6c9bff; --violet: #9a7bff; --orchid: #c9a0ff; --cyan: #7ee0ff;                            /* the light family: glows, lines, gradients */
  --glass-1: rgba(150, 168, 255, 0.055); --glass-2: rgba(150, 168, 255, 0.1); --glass-3: rgba(160, 178, 255, 0.17);      /* three heights of glass, as fills over the ground */
  --deep: rgba(8, 11, 28, 0.8);                                                                      /* the glass that long text is read on: dark whatever light is behind it */
  --edge: rgba(168, 186, 255, 0.16); --edge-lit: rgba(196, 210, 255, 0.44);                          /* a pane's border, at rest and lit */
  --grad-act: linear-gradient(135deg, #3f66f5, #7a44ee);                                             /* a button that does something: white reads on both ends */
  --grad-light: linear-gradient(100deg, #7fb2ff, #a48cff 55%, #dba6ff);                              /* lines of light: rules, data, lit borders */
  --grad-signal: linear-gradient(135deg, #ffe566, #ffd400 48%, #ffb300);                             /* the one warm signal: live, and the main action */
  --shine: 0 10px 34px -10px rgba(88, 116, 255, calc(0.62 * var(--glow))); --glow-signal: 0 6px 26px -8px rgba(255, 200, 0, calc(0.55 * var(--glow)));
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.1);                                                      /* the light on a pane's top edge */
  --lift: 0 20px 40px -24px rgba(0, 0, 0, 0.9);
  --blur: saturate(1.6) blur(20px);
  --r1: calc(var(--radius) * 8 / 18); --r2: calc(var(--radius) * 12 / 18); --r3: var(--radius); --r4: 999px;      /* corners: a control, a button or field, a pane, a pill */
  --t1: 140ms; --t2: 280ms; --t3: 640ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --display: "Bricolage Grotesque", "Anek Tamil", "Arial Black", sans-serif;
  --tamil: "Anek Tamil", "Bricolage Grotesque", "Nirmala UI", sans-serif;
  --body: "IBM Plex Sans", "Anek Tamil", "Segoe UI", system-ui, sans-serif;
  --f1: calc(12px * var(--type-scale)); --f2: calc(14px * var(--type-scale)); --f3: calc(16px * var(--type-scale)); --f4: calc(19px * var(--type-scale)); --f5: calc(24px * var(--type-scale));
  --f6: calc(clamp(26px, 3.1vw, 36px) * var(--type-scale)); --f7: calc(clamp(36px, 7vw, 84px) * var(--type-scale));      /* the sizes of type: small print, labels, reading text, a strong line, a heading inside a part, a part's heading, a page's name */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;      /* one scale for every gap on the site */
  --bar: 58px;                                                                                       /* the height of the bar at the top; what sticks under it starts here */
  --bar-bg: rgba(7, 10, 23, 0.84); --tabs-bg: rgba(7, 10, 23, 0.88); --sheet-bg: rgba(9, 12, 30, 0.92);      /* the ground, seen through the bar, the tabs and the sheet */
  color-scheme: dark;
}
/* Where the browser can mix colours, everything warm follows --fill, everything dark follows --ground, and every glow follows --glow (the same colours as above until they are changed) */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --grad-signal: linear-gradient(135deg, color-mix(in srgb, var(--fill), #fff 40%), var(--fill) 48%, color-mix(in srgb, var(--fill), #ff7a00 32%));
    --glow-signal: 0 6px 26px -8px color-mix(in srgb, var(--fill) calc(55% * var(--glow)), transparent); --fill-lit: color-mix(in srgb, var(--fill) calc(90% * var(--glow)), transparent);
    --bar-bg: color-mix(in srgb, var(--ground) 84%, transparent); --tabs-bg: color-mix(in srgb, var(--ground) 88%, transparent); --sheet-bg: color-mix(in srgb, var(--ground) 92%, transparent) }
  .stage, .banner { background: color-mix(in srgb, var(--fill) 7%, transparent); border-bottom-color: color-mix(in srgb, var(--fill) 26%, transparent) }
  .seek input { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fill) 12%, transparent) } .seek input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fill) 22%, transparent), 0 0 26px -8px color-mix(in srgb, var(--fill) 60%, transparent) }
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--ground); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 60px }      /* what the page scrolls to (a link's target, a field that takes the focus) stops below the bar, never under it */
body { color: var(--ink); font: 400 calc(15px * var(--type-scale))/1.55 var(--body); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent }
/* The light behind everything: one fixed sheet of three soft fields that drifts slowly. Only its transform changes, so
   it is moved by the graphics chip and never painted again. It stops while the tab is hidden, dims once the reader is
   past the head of the page and into its text, and does not move at all for a reader who has asked for less motion. */
body::before { content: ""; position: fixed; z-index: -1; inset: -20%; pointer-events: none; will-change: transform; transition: opacity var(--t3) linear; opacity: var(--glow); animation: drift 48s var(--ease-io) infinite alternate;
  background: radial-gradient(36% 32% at 76% 18%, rgba(124, 92, 255, 0.36), transparent 70%), radial-gradient(40% 36% at 16% 32%, rgba(56, 108, 255, 0.26), transparent 70%), radial-gradient(38% 34% at 58% 84%, rgba(164, 104, 255, 0.15), transparent 70%) }
html.dim body::before { opacity: calc(0.45 * var(--glow)) } html.asleep body::before, html.asleep .beat::after { animation-play-state: paused }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) rotate(-4deg) } 50% { transform: translate3d(4%, 2%, 0) rotate(5deg) scale(1.08) } to { transform: translate3d(-1%, 5%, 0) rotate(-2deg) scale(1.04) } }
::selection { background: var(--violet); color: #fff }
a { color: inherit; text-underline-offset: 3px }
:focus-visible { outline: 2px solid var(--fill); outline-offset: 2px; border-radius: 4px }
button, select, textarea, input { font: inherit; color: inherit }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)) }
/* What the server sends for a reader, or a machine, that runs no scripts: the page's real content as plain text. Where scripts run it is not shown. */
.js .ssr { display: none }
.ssr { max-width: 76ch; margin: 0 auto; padding: 20px 20px 40px; font: 500 17px/1.7 var(--tamil); overflow-wrap: anywhere } .ssr h1 { font: 800 30px/1.3 var(--tamil); margin: 0 0 12px; letter-spacing: 0; max-width: none } .ssr h2 { font: 800 22px/1.35 var(--tamil); margin: 28px 0 8px } .ssr h3 { font: 700 18px/1.4 var(--tamil); margin: 18px 0 4px }
.ssr a { color: var(--stamp) } .ssr ul, .ssr ol { padding-left: 22px } .ssr li { margin-block: 6px } .ssr small, .ssr time { color: var(--dim); font-size: 14px }
html:not(.js) main, html:not(.js) .head, html:not(.js) .mast, html:not(.js) .tabs, html:not(.js) .tools button, html:not(.js) .foot .wrap > div { display: none }
html:not(.js) [data-ta]:empty::before { content: attr(data-ta) }      /* the names of the foot's links are written by a script; without one they are read from the page itself */
.site { position: sticky; top: 0; z-index: 20; background: var(--bar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--edge); padding-top: env(safe-area-inset-top, 0px) }
.site::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 178, 255, 0.75) 22%, rgba(196, 150, 255, 0.75) 64%, transparent); pointer-events: none }      /* a line of light under the bar */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .site, .tabs, .site-more { background: rgba(8, 11, 26, 0.97) !important } }
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; min-height: 58px; padding-block: 10px }
.mark { font: 800 22px/1 var(--display); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em }
.mark b { background: var(--grad-signal); color: var(--on-fill); padding: 3px 6px 2px; margin-left: 3px; border-radius: 6px; box-shadow: var(--glow-signal) }
nav.main { display: flex; gap: 4px 20px; font: 600 14px/1.2 var(--body); align-items: center; min-width: 0 }
nav.main a { text-decoration: none; padding-block: 8px; white-space: nowrap; color: var(--dim); background: var(--grad-light) 0 100% / 0 2px no-repeat; transition: color var(--t1), background-size var(--t2) var(--ease) }
@media (max-width: 1139px) { nav.main { gap: 4px 13px; font-size: 13px } .top { gap: 10px 14px } nav.main a[data-go="/signin"], nav.main a[data-go="/desks"], .tool.in { display: none } }      /* a narrower bar keeps to one line: the desks and Sign in are under "More" and in the foot */
@media (max-width: 999px) { nav.main a[data-go="/record"], nav.main a[data-go="/claims"] { display: none } } @media (max-width: 879px) { nav.main a[data-go="/seat"] { display: none } }      /* the narrowest bar keeps Today, Promises, Stories and Daily Five; the rest are under "More" and in the foot */
/* The bar's Tamil words are longer than its English ones: in Tamil the mark alone leads home (Today is the first tab on a phone and the first link in the foot), the links sit closer, and below 1200px the desks wait in the foot, so nothing in the bar ever runs under the tools */
@media (min-width: 761px) { :lang(ta) nav.main a[data-go="/"] { display: none } }
@media (min-width: 1140px) { :lang(ta) nav.main { gap: 4px 14px; font-size: 13.5px } }
@media (min-width: 1140px) and (max-width: 1199px) { :lang(ta) nav.main a[data-go="/desks"] { display: none } }
nav.main a:hover { color: var(--ink); background-size: 100% 2px } nav.main a[aria-current] { color: var(--ink); background: linear-gradient(var(--fill), var(--fill)) 0 100% / 100% 2px no-repeat }
.tools { display: flex; gap: 8px; align-items: center }
.tool { border: 1px solid var(--edge); background: var(--glass-1); border-radius: var(--r2); padding: 0 13px; min-height: 36px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: 600 13px/1 var(--body); text-decoration: none; white-space: nowrap; transition: border-color var(--t1), background var(--t1) }
.tool:hover { border-color: var(--edge-lit); background: var(--glass-2) }
.tool[aria-expanded=true] { border-color: var(--fill); color: var(--fill-text) }
.tool.in { border-color: transparent; background: transparent; padding-inline: 6px } .tool.in:hover { border-color: transparent; background: transparent; text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px }
.tool.join { background: var(--grad-signal); color: var(--on-fill); border-color: transparent; font: 800 15px/1 var(--tamil); padding: 2px 15px 0; box-shadow: var(--glow-signal) }
.tool.join:hover { background: var(--grad-signal); filter: brightness(1.08) }
.tool .narrow { display: none } @media (max-width: 760px) { .tool .wide { display: none } .tool .narrow { display: inline } }      /* a signed-in reader's own page: its name in full on a wide screen, one short word on a phone */
/* search, on every page: the field opens under the bar and sends the reader to the home page's search */
.seek { display: flex; gap: 8px; padding-bottom: 10px }
.seek input { flex: 1 1 auto; min-width: 0; min-height: 46px; background: var(--deep); border: 1px solid var(--fill); border-radius: var(--r2); padding: 4px 14px 2px; font: 700 18px/1.2 var(--tamil); -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.12) }
.seek input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.22), 0 0 26px -8px rgba(255, 212, 0, 0.6) }
.seek button { flex: 0 0 auto; min-height: 46px; background: var(--grad-signal); color: var(--on-fill); border: 0; border-radius: var(--r2); padding: 3px 18px 0; font: 800 16px/1 var(--tamil); cursor: pointer } .seek button:hover { filter: brightness(1.08) }
/* the first stop for a keyboard: past the bar, to the page itself. Out of sight until it has the focus. */
.skip { position: absolute; left: 8px; top: -90px; z-index: 40; background: var(--grad-signal); color: var(--on-fill); padding: 14px 16px 11px; font: 800 16px/1.2 var(--tamil); text-decoration: none; border-radius: var(--r2) }
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)) }
main:focus { outline: 0 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
/* While a page waits for its data it shows the shape of what is coming: panes of glass, one slow pulse. A preview that
   carries its data never shows them. When a request fails the page says so in one sentence and offers to ask again. */
[data-sk], .sk-on { animation: sk 1.8s ease-in-out infinite }
html:not(.wait) [data-sk] { display: none !important }
.sk { display: block; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r2); min-width: 0 }
.sk.t { height: 14px; border: 0; border-radius: 7px; background: var(--glass-3) }
@keyframes sk { 50% { opacity: 0.45 } }
.oops { border: 1px solid rgba(255, 107, 120, 0.45); background: rgba(255, 107, 120, 0.07); border-radius: var(--r2); padding: 14px 16px; display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 76ch; margin: 0; min-width: 0 }
.oops p { margin: 0; flex: 1 1 22ch; min-width: 0; overflow-wrap: anywhere; font-size: 15px } :lang(ta) .oops p:not([lang]) { font: 500 16px/1.6 var(--tamil) }
.again { background: var(--grad-act); color: #fff; border: 0; border-radius: var(--r2); min-height: 44px; padding: 3px 18px 0; font: 800 16px/1 var(--tamil); cursor: pointer; white-space: nowrap; box-shadow: var(--hi), var(--shine); transition: filter var(--t1), transform var(--t1) } :lang(en) .again { font-family: var(--display); padding-top: 0 }
.again:hover { filter: brightness(1.15) } .again:active { transform: scale(0.97) }
/* when a page has nothing to show yet, it says so plainly, at the size of a heading, and offers somewhere to go from here */
.nil { display: grid; gap: 10px; justify-items: start; padding: 20px; max-width: 64ch; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi) }
.nil .big { font: 800 clamp(22px, 3vw, 30px)/1.3 var(--tamil); margin: 0; text-wrap: balance; color: var(--ink) } :lang(en) .nil .big { font-family: var(--display); line-height: 1.12; letter-spacing: -0.02em }
.nil .big::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--grad-light); box-shadow: 0 0 12px rgba(150, 150, 255, 0.7); margin-bottom: 12px }
.nil p { margin: 0; color: var(--dim) } :lang(ta) .nil p:not(.big) { font: 500 16px/1.65 var(--tamil) }
.nil .on { display: flex; gap: 0 22px; flex-wrap: wrap } .nil .on a { color: var(--stamp); font: 700 16px/1.3 var(--tamil); min-height: 44px; display: inline-flex; align-items: center } :lang(en) .nil .on a { font: 600 15px/1.3 var(--body) }
/* The head of a page: its name over light. Behind it, its own still glow and a faint graticule, as on an instrument, that fades out down the sheet. */
.head, .mast { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--edge) }
.head::before, .mast::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(64% 90% at 86% 0%, rgba(122, 96, 255, 0.3), transparent 70%), radial-gradient(52% 80% at 0% 30%, rgba(64, 120, 255, 0.22), transparent 70%),
    linear-gradient(rgba(160, 178, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(160, 178, 255, 0.05) 1px, transparent 1px) 50% 0 / 44px 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent) }
.head h1, .mast h1 { text-shadow: 0 0 56px rgba(132, 140, 255, calc(0.5 * var(--glow))) }
:is(.head, .mast) .wrap > * { animation: rise 0.6s var(--ease) both } :is(.head, .mast) .wrap > :nth-child(2) { animation-delay: 50ms } :is(.head, .mast) .wrap > :nth-child(n+3) { animation-delay: 110ms }      /* the head comes in as one movement, once */
@keyframes rise { from { transform: translateY(26px); opacity: 0 } }
/* The kit a page builds with. A pane of glass; the three kinds of button (the page's one main action in the signal, a
   button that does something, a quiet way on); a pill; a short rule of light over a heading; a mark that beats while
   something is live; a line of light for a row of numbers; a bar that grows when it is first seen. */
.pane { background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi) }
.pane.lit { border-color: var(--edge-lit); box-shadow: var(--hi), var(--lift) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 3px 20px 0; border: 0; border-radius: var(--r2); background: var(--grad-act); color: #fff; font: 800 17px/1 var(--tamil); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--hi), var(--shine); transition: filter var(--t1), transform var(--t1), background var(--t1), border-color var(--t1) } :lang(en) .btn { font-family: var(--display); padding-top: 0 }
.btn:hover { filter: brightness(1.14) } .btn:active { transform: scale(0.98) } .btn[disabled] { opacity: 0.55; cursor: default; filter: none }
.btn.main { background: var(--grad-signal); color: var(--on-fill); box-shadow: var(--glow-signal) }
.btn.quiet { background: var(--glass-1); color: var(--ink); border: 1px solid var(--edge-lit); box-shadow: none } .btn.quiet:hover { background: var(--glass-3); filter: none }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--edge-lit); border-radius: var(--r4); background: var(--glass-1); padding: 5px 10px 4px; font: 600 12px/1.2 var(--body); white-space: nowrap } :lang(ta) .pill { font: 700 13px/1.25 var(--tamil); padding: 6px 10px 3px }
.rule::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--grad-light); box-shadow: 0 0 12px rgba(150, 150, 255, 0.7); margin-bottom: 12px; transform-origin: 0 50% }
.beat { position: relative; display: inline-block; width: 8px; height: 8px; background: var(--fill); border-radius: 50%; box-shadow: 0 0 10px var(--fill-lit, rgba(255, 212, 0, 0.9)); flex: none }
.beat::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--fill); animation: ping 2.4s var(--ease) infinite }
@keyframes ping { from { transform: scale(1); opacity: 0.9 } 70%, to { transform: scale(3.2); opacity: 0 } }
.pl { position: relative; display: block } .pl > span { display: block; height: 100%; overflow: hidden } .pl svg { display: block; width: 100%; height: 100%; overflow: visible }
.pl .l { fill: none; stroke: url(#pl-s); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round } .pl .a { fill: url(#pl-a); stroke: none }
.pl > i { position: absolute; right: -2px; top: var(--e, 50%); width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--fill); box-shadow: 0 0 8px 1px rgba(255, 212, 0, 0.85) }
.draw .pl > span { animation: wipe 0.8s 0.2s var(--ease-io) both } .draw .pl svg { animation: wipe-b 0.8s 0.2s var(--ease-io) both } .draw .pl > i { animation: fade 0.3s 0.9s both }
@keyframes wipe { from { transform: translateX(-101%) } } @keyframes wipe-b { from { transform: translateX(101%) } } @keyframes fade { from { opacity: 0 } }
.g { transform-origin: 0 50% }
html.anim .grow:not(.seen) .g, html.anim .rule.grow:not(.seen)::before { transform: scaleX(0) }
html.anim .grow.seen:not(.still) .g, html.anim .rule.grow.seen:not(.still)::before { animation: grow 0.8s var(--ease) both }
@keyframes grow { from { transform: scaleX(0) } }
.ainote { background: rgba(14, 19, 48, 0.86); border-top: 1px solid var(--edge-lit); margin-top: 56px; padding-block: 16px 15px }
.ainote .wrap { display: flex; gap: 8px 28px; flex-wrap: wrap; align-items: baseline; justify-content: space-between }
.ainote p { margin: 0; font-size: calc(15px * var(--type-scale)); line-height: 1.55; max-width: 86ch } .ainote b { font: 800 calc(19px * var(--type-scale))/1.3 var(--tamil); margin-right: 6px; color: var(--fill-text) }
:lang(ta) .ainote p:not(.l) { line-height: 1.65 }
.ainote .l { display: flex; gap: 6px 20px; flex-wrap: wrap; font: 700 15px/1.3 var(--tamil) } .ainote a { color: var(--stamp) }
.foot { position: relative; background: rgba(4, 6, 16, 0.82); padding-block: 28px 34px }
.foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 178, 255, 0.75) 22%, rgba(196, 150, 255, 0.75) 64%, transparent) }
.foot .legal { grid-column: 1 / -1; justify-content: flex-start; max-width: none; border-top: 1px solid var(--line); padding-top: 12px; font: 600 14px/1.3 var(--body); gap: 0 20px } .foot .legal a { color: var(--dim) } .foot .legal a:hover { color: var(--ink) }
.foot .fine { grid-column: 1 / -1; font-size: 12px; max-width: none }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 48px; align-items: start }
.foot .mark { display: inline-block; margin-bottom: 10px }
.foot p { margin: 0; color: var(--dim); font-size: calc(14px * var(--type-scale)); max-width: 56ch } :lang(ta) .foot p { line-height: 1.65 }
.foot nav { display: flex; flex-wrap: wrap; gap: 2px 22px; font: 700 calc(16px * var(--type-scale))/1.3 var(--tamil) }
.foot nav a { text-decoration: none; padding-block: 8px }
.foot nav a:hover { text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px }
@media (min-width: 761px) { .foot .wrap { grid-template-columns: minmax(0, 1fr) auto } .foot nav { justify-content: flex-end; max-width: 620px } }
.tabs, .site-more { display: none }
@media (max-width: 760px) {
  nav.main { display: none }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) } html { scroll-padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) }
  .wrap { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)) } .ssr { padding-inline: 14px }
  .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset: auto 0 0 0; background: var(--tabs-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--edge-lit); z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0px) }
  .tabs a, .tabs button { border: 0; background: transparent; cursor: pointer; padding: 3px 1px 0; min-height: 50px; display: grid; place-items: center; text-align: center; text-decoration: none; font: 800 14px/1.25 var(--tamil); color: var(--dim); white-space: nowrap; overflow: hidden; position: relative }
  .tabs [aria-current]::before { content: ""; position: absolute; inset: -1px 22% auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--fill); box-shadow: 0 0 12px var(--fill-lit, rgba(255, 212, 0, 0.9)) }      /* where the reader is: a light on the bar's own edge, as well as the colour */
  .tool { min-height: 44px } .top { padding-block: 6px; gap: 10px; min-height: 56px } .top .mark { min-height: 44px; display: inline-flex; align-items: center }
  .tools { gap: 6px } .tool { padding-inline: 10px } .tool.join { padding-inline: 11px }
  .ainote .l { gap: 0 20px } .ainote .l a { padding-block: 12px } .foot .legal a { padding-block: 13px; min-width: 44px } .foot a.mark { padding-block: 11px; margin: -11px 0 0 }      /* what a thumb presses is at least 44px tall */
  .foot nav:not(.legal) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px } .foot nav:not(.legal) a { padding-block: 12px; min-width: 44px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere }
  .foot .legal { border-top: 0; padding-top: 0 }
  .tabs [aria-current] { color: var(--fill-text) }
  /* the rest of the site's pages, as a sheet that opens over the bar from its last tab */
  .site-more { display: block; position: fixed; inset: auto 0 calc(51px + env(safe-area-inset-bottom, 0px)) 0; z-index: 19; background: var(--sheet-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--edge-lit); border-radius: var(--r3) var(--r3) 0 0; padding: 8px max(14px, env(safe-area-inset-right, 0px)) 14px max(14px, env(safe-area-inset-left, 0px)); max-height: min(72vh, 520px); overflow: auto; overscroll-behavior: contain; box-shadow: 0 -40px 0 100vh rgba(3, 5, 14, 0.66); animation: sheet 0.2s var(--ease) }
  .site-more nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px }
  .site-more a { min-height: 50px; display: flex; align-items: center; padding-top: 3px; font: 800 calc(17px * var(--type-scale))/1.25 var(--tamil); text-decoration: none; border-bottom: 1px solid var(--line); overflow-wrap: anywhere } :lang(en) .site-more a { font-family: var(--display); padding-top: 0 }
  .site-more a[aria-current] { color: var(--fill-text) }
}
@keyframes sheet { from { transform: translateY(16px); opacity: 0 } }
@media (max-width: 420px) { .top .mark { font-size: 19px } .tabs a, .tabs button { font-size: 13px } }
@media (max-width: 380px) { .top { gap: 6px } .tools { gap: 4px } .tool, .tool.join { padding-inline: 8px } }
@media (max-width: 339px) { #seek-open { display: none } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }
/* The line under the bar says the site is being built and that AI can make mistakes; on a phone it is one line (a long wording the owner set opens to its whole on a tap). Under it, the owner's banner. */
.stage, .banner { margin: 0; padding: 7px var(--gut, 16px) 6px; text-align: center; font: 600 calc(13px * var(--type-scale))/1.5 var(--tamil); color: var(--fill-text); background: rgba(255, 212, 0, 0.07); border-bottom: 1px solid rgba(255, 212, 0, 0.26) } :is(.stage, .banner) a { color: inherit; text-decoration: underline; text-underline-offset: 2px } :lang(en) :is(.stage, .banner) { font-family: var(--body) }
.stage .short { display: none }
:is(.stage, .banner) a { padding-block: 13px; margin-block: -13px }      /* the link is a thumb's height to press, and the line keeps its own height */
@media (max-width: 760px) { .stage, .banner { display: flex; justify-content: center; gap: 0 6px; white-space: nowrap; padding-block: 8px 7px } :is(.stage, .banner) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis } :is(.stage, .banner) > a { flex: none }
  .stage:not(.own) .long { display: none } .stage .short { display: inline } .stage.open { display: block; white-space: normal } .stage.open .long { display: inline } .stage.open .short { display: none } }
@media (max-width: 380px) { .stage, .banner { font-size: calc(12px * var(--type-scale)); padding-inline: 10px } }
/* A block the owner or the Brain placed on this page (/site design.blocks): plain words in a pane. One the Brain wrote wears the AI label. */
.dblock { max-width: 1240px; margin: var(--s5) auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)) } .dblock > div { display: grid; gap: var(--s2); padding: var(--s4); background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); max-width: 76ch }
.dblock h2 { margin: 0; font: 800 var(--f4)/1.3 var(--tamil) } :lang(en) .dblock h2 { font-family: var(--display); line-height: 1.15 } .dblock p { margin: 0; overflow-wrap: anywhere } :lang(ta) .dblock p { font: 500 var(--f3)/1.65 var(--tamil) } .dblock a { color: var(--stamp); font-weight: 600; justify-self: start }
.aitag { margin: 0; display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; font: 600 var(--f1)/1.45 var(--body); color: var(--dim) } :lang(ta) .aitag { font: 500 calc(13px * var(--type-scale))/1.5 var(--tamil) }
.aitag b { font: 800 11.5px/1 var(--display); border: 1px solid var(--violet); color: var(--orchid); border-radius: var(--r4); padding: 4px 8px 3px; white-space: nowrap } :lang(ta) .aitag b { font: 800 12px/1 var(--tamil); padding-top: 5px }