/* Layout: under the bar, one line that the site is being built and AI can make mistakes; the day's question over a row of glass cards,
   one per leader carried today, as tall as the attention it got, each a picture (photograph, else the party's flag, never a letter). Then,
   in the order the owner's Brain sets (C6; each part a data-block), the rest of the day. One system with play.html. */
:root {
  --ground: #070a17; --solid: #0e1330; --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; --fill-text: var(--fill);      /* with --fill and --ground, what the owner's Brain may change (/site design.tokens); see play.html */
  --blue: #6c9bff; --violet: #9a7bff; --orchid: #c9a0ff;                            /* the light family: glows, lines, gradients */
  --humour: #ffd400; --heat: #ff6b78; --tension: #8fb0ff; --calm: #a9b1d6;
  --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;
  --bar-bg: rgba(7, 10, 23, 0.84); --tabs-bg: rgba(7, 10, 23, 0.88); --sheet-bg: rgba(9, 12, 30, 0.92);
  --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;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;      /* one scale for every gap on the page */
  --gut: 20px;                                                                                       /* the page's side margin */
  --grat: 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%;      /* a faint graticule, as on an instrument */
  color-scheme: dark;
}
@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%));      /* everything warm follows --fill, everything dark --ground, every glow --glow */
  --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, .alertbar { background: color-mix(in srgb, var(--fill) 7%, transparent); border-bottom-color: color-mix(in srgb, var(--fill) 26%, 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 }      /* a link's target stops below the bar */
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, as in play.html */
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 .live i::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(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)) }
/* the server's plain copy of the page, for a reader or a machine that runs no scripts */
.js .ssr { display: none }
.ssr { max-width: 76ch; margin: 0 auto; padding: 20px var(--gut) 40px; font: 500 17px/1.7 var(--tamil); overflow-wrap: anywhere } .ssr h1 { font: 800 30px/1.3 var(--tamil); margin: 0 0 12px } .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) .tabs, html:not(.js) .tools button, html:not(.js) .foot > .wrap > :not(nav) { display: none }
/* 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, h1:focus, .th:focus { outline: 0 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
:is(.sky, .chips, .desks, .three, .vids, .ak-ex)::-webkit-scrollbar { display: none }      /* a row that scrolls sideways shows no bar */
/* while the day is on its way: its shape, so nothing jumps; a failure says so and offers to ask again */
[data-sk] { animation: sk 1.8s ease-in-out infinite }
html:not(.wait) [data-sk] { display: none !important }
@keyframes sk { 50% { opacity: 0.45 } }
.sky i[data-sk] { flex: 0 0 31%; min-width: 108px; height: calc(var(--h) * 1%); min-height: 168px; background: var(--glass-2); border: 1px solid var(--edge); border-radius: var(--r3) } .sky i[data-sk]:first-child { flex-basis: 44% }
.day .read i[data-sk] { display: block; height: 10px; margin-block: 5px 6px; background: var(--glass-3); border-radius: 5px; width: min(100%, 560px) } .day .read i[data-sk]:last-child { width: min(62%, 340px) }
.wait .day .read { min-height: 42px } @media (max-width: 760px) { .wait .day .read { min-height: 63px } }
.chips i[data-sk] { flex: 0 0 104px; height: 36px; background: var(--glass-2); border-radius: var(--r4) } @media (max-width: 760px) { .chips i[data-sk] { height: 44px } }
.w-list li[data-sk] i { display: block; height: 12px; background: var(--glass-3); border-radius: 6px; margin-top: 5px } .w-list li[data-sk] i:first-child { grid-row: span 2; width: 34px; height: 14px } .w-list li[data-sk] i:last-child { width: 46%; height: 9px; margin-bottom: 4px }
.feed > i[data-sk] { display: block; min-height: 76px; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r2) } .feed > i[data-sk]:first-child { min-height: 420px; border-radius: var(--r3) }
.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) } .again:hover { filter: brightness(1.15) } .again:active { transform: scale(0.97) }
.msg .again, .live .again, .said-guess .again { min-height: 44px; padding: 2px 12px 0; font-size: 14px; margin-left: 8px; vertical-align: baseline; box-shadow: none; border-radius: var(--r1) }
#feed-msg:empty { display: none } #feed-msg { margin-bottom: 14px }

/* the bar, the line under it, the owner's banner and notice */
.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, #fresh { 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); transition: box-shadow var(--t3) } html.arrived .mark b { box-shadow: 0 0 30px 3px rgba(255, 212, 0, 0.7) }
nav.main { display: flex; gap: 4px 20px; font: 600 14px/1.2 var(--body); align-items: center; min-width: 0 }
nav.main a, nav.main .explore { 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) }
/* the bar holds the five places a reader comes back to and Explore, which opens the rest of the site (as on every page that shares the bar) */
nav.main .explore { border: 0; margin: 0; padding-inline: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px }
nav.main .explore::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--t2) var(--ease) }
nav.main .explore[aria-expanded=true]::after { transform: translateY(2px) rotate(-135deg) }
@media (max-width: 1139px) { nav.main { gap: 4px 14px; font-size: 13px } .top { gap: 10px 14px } .tool.in { display: none } }      /* a narrower bar keeps to one line: Sign in waits in the foot and in Explore */
/* The bar's Tamil words are longer than its English ones: on a narrow bar the mark alone leads home in Tamil, and two names keep only their last word */
@media (min-width: 761px) and (max-width: 999px) { nav.main { gap: 4px 12px } :lang(ta) #nav-today, :lang(ta) nav.main .w { display: none } }
@media (min-width: 761px) and (max-width: 879px) { .top { gap: 10px } .top .mark { font-size: 19px } nav.main { gap: 4px 10px; font-size: 12.5px } header.site .wrap { padding-inline: 16px } }
@media (min-width: 1140px) { :lang(ta) nav.main { gap: 4px 18px; font-size: 13.5px } }
nav.main a:hover, nav.main .explore:hover, nav.main .explore[aria-expanded=true] { 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); white-space: nowrap; transition: border-color var(--t1), background var(--t1) }
.tool:hover { border-color: var(--edge-lit); background: var(--glass-2) }
a.tool { text-decoration: none }
.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 */
/* under the bar: the site is being built, AI can make mistakes; the owner's banner and notice */
.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; the line keeps its own height */
.alertbar { background: rgba(255, 212, 0, 0.07); border-bottom: 1px solid rgba(255, 212, 0, 0.26); color: var(--fill-text); margin: 0; padding: 9px var(--gut) 7px; font: 700 15px/1.5 var(--tamil); text-align: center; overflow-wrap: anywhere; text-wrap: balance }
.live i { position: relative; 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 }
.live:not(.off) i::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 } }
.w-list li.new { animation: arrive 0.5s var(--ease) both }
.w-list li.new::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(170, 190, 255, 0.3) 50%, transparent 75%); animation: sweep 1.2s 0.15s var(--ease-io) both; pointer-events: none }
@keyframes arrive { from { transform: translateY(-8px); opacity: 0 } }
@keyframes sweep { from { transform: translateX(-110%) } to { transform: translateX(110%) } }

/* the head of the page, over its own still light */
.poster { position: relative; isolation: isolate; overflow: hidden }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(64% 60% at 86% 0%, rgba(122, 96, 255, 0.3), transparent 70%), radial-gradient(52% 56% at 0% 22%, rgba(64, 120, 255, 0.22), transparent 70%), var(--grat);
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent) }
.poster .wrap { padding-top: var(--s4) }
/* early access: an invitation pane; a member sees their number instead */
.early { max-width: 1240px; margin: 0 auto; padding: var(--s6) max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)) } .e-box { max-width: 76ch }
.e-box .big i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--fill-text) }
.e-mine { margin: 0; font: 700 15px/1.3 var(--tamil); display: flex; gap: 0 10px; flex-wrap: wrap; align-items: baseline; color: var(--dim) } :lang(en) .e-mine { font: 600 14px/1.3 var(--body) }
.e-mine a { color: var(--fill-text); font-weight: 800; font-variant-numeric: tabular-nums; min-height: 44px; display: inline-flex; align-items: center }
.poster .date { font: 600 14px/1.2 var(--body); color: var(--dim); margin: 0; min-height: 1.2em; font-variant-numeric: tabular-nums }
h1 { font: 800 calc(clamp(35px, 9.8vw, 72px) * var(--type-scale))/1.18 var(--tamil); letter-spacing: -0.015em; margin: var(--s1) 0 0; text-wrap: balance; max-width: 16ch; text-shadow: 0 0 56px rgba(132, 140, 255, 0.5) }
:lang(en) h1 { font-family: var(--display); line-height: 1; letter-spacing: -0.035em; padding-bottom: 0.06em }
.poster .en { font: 500 15px/1.6 var(--tamil); color: var(--dim); margin: var(--s2) 0 0; max-width: 46ch; text-wrap: pretty }
:lang(en) .poster .en { font: 400 15px/1.55 var(--body) }
/* the head: a phone shows the cards before the words about the page, a wide screen after the question */
.poster .wrap { display: flex; flex-direction: column } .p-sky { order: 2 } .poster .en { order: 3 } .poster .credit { order: 4; margin-top: var(--s3) } .day .acts { display: flex; gap: var(--s2); flex-wrap: wrap }
/* the two kinds of button in the head: the one that opens the day, and the quieter ways on */
.black { background: var(--grad-act); color: #fff; border: 0; border-radius: var(--r2); padding: 4px 22px 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; font: 800 clamp(17px, 1.7vw, 20px)/1 var(--tamil); cursor: pointer; text-decoration: none; box-shadow: var(--hi), var(--shine); transition: filter var(--t1), transform var(--t1) }
.black:hover { filter: brightness(1.14) } .black:active { transform: scale(0.98) } .black[disabled] { opacity: 0.55; cursor: default; filter: none }
.hollow { background: var(--glass-1); color: var(--ink); border: 1px solid var(--edge-lit); border-radius: var(--r2); padding: 4px 18px 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; font: 800 clamp(17px, 1.7vw, 20px)/1 var(--tamil); cursor: pointer; text-decoration: none; transition: background var(--t1), border-color var(--t1) }
.hollow:hover { background: var(--glass-3); border-color: #fff }
:lang(en) .black, :lang(en) .hollow { font-family: var(--display); padding-top: 0 }
.poster .legend { margin: var(--s4) 0 0; font: 600 12.5px/1.4 var(--body); color: var(--dim) } :lang(ta) .poster .legend { font: 500 13.5px/1.5 var(--tamil) } .poster .legend + .sky { margin-top: var(--s1) }
.ph:not(.col) { --lit: rgba(196, 210, 255, 0.44) }
/* the cards: glass lit from behind in the party's colour; name and counts on a dark foot. They do not blur: up to nine scroll. */
.sky { display: flex; align-items: flex-end; gap: 10px; height: 262px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-block: 6px 2px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut) }
.stand { position: relative; isolation: isolate; flex: 0 0 31%; min-width: 108px; height: calc(var(--h) * 1%); min-height: 168px; display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: var(--r3); padding: 0; overflow: hidden; color: var(--ink); cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(168, 184, 255, 0.17), rgba(120, 140, 255, 0.06) 58%, rgba(8, 11, 28, 0.5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--lift);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--t2) var(--ease), border-color var(--t1) }
.stand:first-child { flex-basis: 44% }
.stand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(92% 56% at 50% 26%, var(--halo, rgba(154, 123, 255, 0.4)), transparent 74%); opacity: 0.85; transition: opacity var(--t2) }      /* the light behind the picture */
.stand::after { content: ""; position: absolute; inset: 0 14% auto; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--lit, var(--orchid)), transparent); box-shadow: 0 0 14px 1px var(--lit, var(--orchid)) }      /* whose card it is, as a light along the top edge */
@supports (color: color-mix(in srgb, red, blue)) { .stand, .say, .ph, .party, .guess button, .chips button, .ck { --halo: color-mix(in srgb, var(--pc, #9a7bff) 62%, transparent); --lit: color-mix(in srgb, var(--pc, #c9a0ff), #fff 30%) } }
.sky.first .stand { animation: rise 0.62s var(--ease) both; animation-delay: calc(var(--i) * 45ms) }      /* the cards rise once, when the day first arrives; a later refresh puts them in place without a show */
.sky.first .stand .glare { animation: sweep 0.9s calc(0.35s + var(--i) * 45ms) var(--ease-io) both }      /* and one light crosses them */
.stand .glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(210, 220, 255, 0.2) 50%, transparent 70%); transform: translateX(110%) }
.stand:hover, .stand:focus-visible { border-color: var(--edge-lit) } .stand:hover::before { opacity: 1 } .stand:active { transform: scale(0.97) }
/* a person: the photograph, or the party's flag, or a plain pane with nothing written on it */
.pic { position: relative; display: block; overflow: hidden }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; filter: saturate(0.96) contrast(1.04) drop-shadow(0 0 10px rgba(150, 170, 255, 0.5)) }
.pic.flag img { object-position: 50% 50%; filter: saturate(0.88) brightness(0.94); border-radius: inherit }
.pic.flag::after, .pic.none::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255, 255, 255, 0.22), transparent 38%, transparent 62%, rgba(8, 11, 28, 0.4)); pointer-events: none }      /* a sheen, as on glass */
.pic.none { background: radial-gradient(70% 60% at 30% 20%, rgba(160, 178, 255, 0.3), transparent 70%), radial-gradient(60% 60% at 80% 90%, rgba(154, 123, 255, 0.28), transparent 70%), var(--glass-2) }
.stand .pic { flex: 1 1 0; min-height: 0; width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent) }
.stand .pic.flag, .stand .pic.none { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent) }
.stand .no { position: absolute; left: 9px; top: 9px; z-index: 1; font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums; padding: 5px 7px 4px; border-radius: 7px; background: rgba(7, 10, 23, 0.62); border: 1px solid var(--edge) }
.stand:first-child .no { background: var(--grad-signal); color: var(--on-fill); border-color: transparent; box-shadow: var(--glow-signal) }
.stand .cap { flex: 0 0 auto; position: relative; z-index: 1; padding: 2px 10px 9px; display: grid; gap: 1px }
.stand .cap > * { min-width: 0 } .stand .cap b { font: 800 16px/1.3 var(--tamil); overflow-wrap: break-word; hyphens: manual; margin-bottom: 1px } .stand:first-child .cap b { font-size: 18px } :lang(en) .stand .cap b { font-family: var(--display); font-size: 15px; line-height: 1.12; letter-spacing: -0.01em } :lang(en) .stand:first-child .cap b { font-size: 18px }
.stand .cap .nums { font: 600 12px/1.35 var(--body); font-variant-numeric: tabular-nums; color: var(--dim) } :lang(ta) .stand .cap .nums { font: 500 12.5px/1.4 var(--tamil) }
.stand .cap .nums em { font-style: normal; color: var(--ink); font: 800 14px/1 var(--display) }
.stand .pl { height: 22px; margin-top: 4px }
/* a day as a line of light, hour by hour, drawn in by a sliding window so only transforms move */
.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.25s var(--ease-io) both } .draw .pl svg { animation: wipe-b 0.8s 0.25s var(--ease-io) both } .draw .pl > i { animation: fade 0.3s 0.95s both }
@keyframes wipe { from { transform: translateX(-101%) } } @keyframes wipe-b { from { transform: translateX(101%) } } @keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(46px); opacity: 0 } }
/* the day: the 60-second brief, its voice, the last 24 hours, what was read */
.day .wrap { display: grid; gap: var(--s3) var(--s6); padding-block: var(--s5) 0; align-items: center } .p-day { display: grid; gap: 6px; font-size: calc(13px * var(--type-scale)); line-height: 1.5; color: var(--dim) }
@media (min-width: 900px) { .day .wrap { grid-template-columns: auto minmax(0, 1fr) } .day .acts { flex-wrap: nowrap } }
/* the whole day as one line: everything that came in on today's topics, hour by hour */
.dayline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; margin: 0; font: 600 12px/1.3 var(--body); color: var(--dim) } :lang(ta) .dayline { font: 500 13px/1.4 var(--tamil) }
.dayline .pl { height: 46px } .dayline b { color: var(--fill); font-weight: inherit }
.day .read { margin: 0; max-width: 80ch }
/* the day's five: once they have come, the way to them, lit in the signal */
.today-go { margin: 2px 0 0; min-width: 0 }
.today-go a { display: flex; align-items: center; gap: 4px 10px; min-height: 48px; max-width: min(100%, 80ch); padding: 4px 16px 3px; border: 1px solid rgba(255, 212, 0, 0.45); border-radius: var(--r2); background: linear-gradient(100deg, rgba(255, 212, 0, 0.12), var(--glass-1) 62%); color: var(--dim); text-decoration: none; font: 500 13.5px/1.4 var(--body); transition: border-color var(--t1), background var(--t1) }
:lang(ta) .today-go a { font: 500 14px/1.45 var(--tamil); padding-top: 5px }
.today-go a:hover { border-color: var(--fill) } .today-go a::after { content: "→"; margin-left: auto; padding-left: 8px; color: var(--fill-text); font-weight: 800 }
.today-go i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); box-shadow: 0 0 10px var(--fill-lit, rgba(255, 212, 0, 0.9)) }
.today-go b { flex: none; color: var(--ink); font: 800 15px/1.3 var(--tamil) } :lang(en) .today-go b { font-family: var(--display) }
.today-go span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 760px) { .today-go a { flex-wrap: wrap; padding-block: 8px 7px } .today-go span { flex-basis: calc(100% - 40px); white-space: normal; padding-left: 18px } .today-go a::after { position: absolute; right: 16px } .today-go a { position: relative; padding-right: 36px } }
/* the desks at work: one line under the day, the newest thing an AI desk did, opening the desks' room */
.deskline { margin: 4px 0 0; min-width: 0 }
.deskline a { display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: min(100%, 80ch); padding: 3px 14px 2px; border: 1px solid var(--edge); border-radius: var(--r4); background: var(--glass-1); color: var(--dim); text-decoration: none; font: 500 13px/1.35 var(--body); transition: background var(--t1), border-color var(--t1) }
:lang(ta) .deskline a { font: 500 14px/1.45 var(--tamil); padding-top: 4px }
.deskline a:hover { background: var(--glass-2); border-color: var(--edge-lit) }
.deskline i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); box-shadow: 0 0 10px var(--fill-lit, rgba(255, 212, 0, 0.9)) }
.deskline i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--fill); animation: ping 2.4s var(--ease) infinite }
html.asleep .deskline i::after { animation-play-state: paused }
.deskline b { flex: none; color: var(--ink); font-weight: 700 }
.deskline span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.deskline time { flex: none; font-variant-numeric: tabular-nums }
@media (max-width: 760px) { .deskline b { display: none } .deskline a { border-radius: var(--r2) } .deskline span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2 } }      /* on a phone: the desk and what it did, in at most two lines */
.p-stand { margin: 0; font-weight: 600; color: var(--ink); font-size: calc(14px * var(--type-scale)) } :lang(ta) .p-stand { font: 600 calc(15px * var(--type-scale))/1.6 var(--tamil) } .p-stand a { color: var(--stamp); white-space: nowrap; font-weight: 800 }
:lang(ta) .p-day { font-size: calc(14px * var(--type-scale)); line-height: 1.6 }
/* the head comes in as one movement, once: the question, then what stands under it */
.poster .wrap > :is(.date, h1, .en) { animation: rise 0.6s var(--ease) both } .poster .wrap > h1 { animation-delay: 40ms } .poster .wrap > .en { animation-delay: 110ms }
@media (min-width: 900px) {                      /* a wide screen: the question across the sheet, a line under it, then the cards at full width */
  .poster .wrap { padding-top: var(--s6); padding-bottom: var(--s2) } .poster .en { order: 1; font-size: calc(16px * var(--type-scale)); max-width: 62ch }
  h1 { font-size: calc(clamp(46px, 5.4vw, 76px) * var(--type-scale)); max-width: none }
  .p-sky .legend { margin-top: var(--s5) } .sky { height: clamp(320px, 46vh, 420px); margin-inline: 0; padding-inline: 2px; gap: 12px; overflow: visible }
  .stand, .sky i[data-sk] { flex: 1 1 0; min-width: 104px; max-width: 184px } .stand:first-child, .sky i[data-sk]:first-child { flex: 1.7 1 0; min-width: 170px; max-width: 290px }
  .stand .cap { padding: 2px 12px 12px } .stand:first-child .cap { padding-inline: 14px } .stand:first-child .cap b { font-size: 20px } .stand .no { left: 12px; top: 12px; font-size: 15px } .stand .pl { height: 28px }
}
@media (min-width: 900px) and (max-width: 1100px) { .sky { overflow-x: auto; overflow-y: hidden } }
/* whose the pictures are, under the cards */
.credit { font-size: 12px; color: var(--dim) }
.credit summary { cursor: pointer } .credit p { margin: 4px 0 2px; max-width: 110ch } .credit a { color: var(--dim) }
.up { color: var(--good) } .down { color: var(--alert) }
/* Ask: one glowing field, marked as an AI desk's, with three example questions */
.askbox { padding-block: var(--s5) 0 } .ak { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) }
.ak-l { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; color: var(--dim); font-size: 14px; max-width: 80ch } :lang(ta) .ak-l { font: 500 15px/1.5 var(--tamil) }
.ak-l b { font: 800 clamp(22px, 2.6vw, 30px)/1.25 var(--tamil); color: var(--ink) } :lang(en) .ak-l b { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em }
.ak-l i, .wt-by i { font-style: normal; border: 1px solid var(--violet); border-radius: var(--r4); padding: 4px 9px 3px; color: var(--orchid); font: 800 12px/1 var(--tamil) } :lang(en) :is(.ak-l i, .wt-by i) { font: 800 11.5px/1 var(--display) }
.ak-row { display: flex; gap: 8px; max-width: 760px }
.ak-row input { flex: 1 1 auto; min-width: 0; min-height: 56px; background: var(--deep); border: 1px solid var(--edge-lit); border-radius: var(--r3); padding: 5px 18px 3px; font: 700 19px/1.3 var(--tamil); -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 4px rgba(154, 123, 255, 0.14), 0 0 40px -8px rgba(122, 96, 255, 0.9), var(--hi); transition: box-shadow var(--t2), border-color var(--t1) }
.ak-row input:focus { outline: 0; border-color: var(--fill); box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.16), 0 0 44px -8px rgba(255, 212, 0, 0.7) } :lang(en) .ak-row input { font: 600 17px/1.3 var(--body) }
.ak-row button { flex: 0 0 auto; min-height: 56px; background: var(--grad-signal); color: var(--on-fill); border: 0; border-radius: var(--r3); padding: 3px 22px 0; font: 800 18px/1 var(--tamil); cursor: pointer; box-shadow: var(--glow-signal) } :lang(en) .ak-row button { font-family: var(--display); padding-top: 0 } .ak-row button:hover { filter: brightness(1.08) }
.ak-ex { display: flex; gap: 8px; flex-wrap: wrap } .ak-ex a { border: 1px solid var(--edge-lit); border-radius: var(--r4); background: var(--glass-1); padding: 9px 14px 7px; font: 700 14px/1.3 var(--tamil); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: background var(--t1), border-color var(--t1) } .ak-ex a:hover { background: var(--glass-3); border-color: var(--orchid) } .ak-ex a:lang(en) { font: 600 13.5px/1.3 var(--body) }
/* the arrival of the day: one band of light down the page, once */
.arrive { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden } .arrive i { position: absolute; inset: -180px -10% auto; height: 180px; background: linear-gradient(180deg, transparent, rgba(150, 170, 255, 0.22) 45%, rgba(255, 212, 0, 0.16) 68%, transparent); animation: arrival 0.85s var(--ease-io) both }
@keyframes arrival { to { transform: translateY(calc(100vh + 200px)) } }

/* the headings: one size for a part, one inside a part; a part opens under a short rule of light */
.sh { font: 800 calc(22px * var(--type-scale))/1.3 var(--tamil); margin: 0 0 var(--s3); text-wrap: balance }
.sh small { display: block; font: 400 13px/1.55 var(--body); letter-spacing: 0; color: var(--dim); margin-top: var(--s1); max-width: 72ch; text-wrap: pretty }
:lang(ta) .sh small { font: 500 14px/1.65 var(--tamil) }
:lang(en) .sh { font-family: var(--display); line-height: 1.1; letter-spacing: -0.015em }
.heard .sh, .fl-head .sh, .bar .sh, .checked .sh, .tz .sh { font-size: calc(clamp(26px, 3.1vw, 36px) * var(--type-scale)); line-height: 1.25 } :lang(en) .heard .sh, :lang(en) .fl-head .sh, :lang(en) .bar .sh, :lang(en) .checked .sh, :lang(en) .tz .sh { line-height: 1.05; letter-spacing: -0.025em }
.heard .sh::before, .fl-head .sh::before, .bar .sh::before, .checked .sh::before, .tz .sh::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% }
/* what has numbers grows into place when first seen; what is drawn again later is simply there */
.g { transform-origin: 0 50% }
html.anim .grow:not(.seen) .g, html.anim .sh:not(.seen)::before { transform: scaleX(0) }
html.anim .grow.seen:not(.still) .g, html.anim .sh.seen:not(.still)::before { animation: grow 0.8s var(--ease) both }
@keyframes grow { from { transform: scaleX(0) } }

/* what was checked: the claim, who made it, what the record showed */
.checked { padding-block: var(--s6) var(--s2) }
.ck-head { display: flex; gap: 4px var(--s5); align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s4) } .ck-head .sh { margin: 0 }
.ck-all { font: 600 14px/1.3 var(--body); color: var(--stamp); white-space: nowrap } :lang(ta) .ck-all { font: 700 15px/1.3 var(--tamil) }
.ck-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s3) }
.ck { position: relative; min-width: 0; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); transition: border-color var(--t1), background var(--t1) } .ck:hover { border-color: var(--edge-lit); background: var(--glass-2) }
.ck a { display: grid; gap: var(--s2); padding: var(--s4); text-decoration: none; align-content: start; height: 100% }
.ck .res { margin: 0; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font: 600 12px/1.3 var(--body); color: var(--dim) }      /* every result wears the same stamp: the words say what the record showed, not a colour */
.ck .res b { background: var(--paper); color: #0b0b12; border-radius: 6px; font: 800 14px/1.2 var(--tamil); padding: 5px 8px 3px } :lang(en) .ck .res b { font: 800 13px/1.2 var(--display); padding: 5px 8px 4px }
.ck .res b.nv { background: transparent; color: var(--ink); border: 1px dashed var(--paper); padding: 4px 7px 2px }
.ck q { quotes: none; font: 800 clamp(19px, 1.9vw, 22px)/1.42 var(--tamil); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.ck q:lang(en) { font-family: var(--display); line-height: 1.2; letter-spacing: -0.01em }
.ck a:hover q { text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px }
.ck .gist { margin: 0 } .ck .by { font: 600 13px/1.4 var(--body); color: var(--dim); margin: 0 } :lang(ta) .ck .by { font: 500 14px/1.5 var(--tamil) }

/* who said what: the day in the speakers' own words */
.heard { padding-block: var(--s7) var(--s5) }
.says-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; margin-top: var(--s4) }
.say { position: relative; flex: 0 0 min(84vw, 372px); scroll-snap-align: start; background: linear-gradient(180deg, var(--glass-2), var(--glass-1)); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); padding: 16px 16px 0; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-height: 270px; min-width: 0; overflow: hidden }
.say::before { content: ""; position: absolute; inset: 0 16% auto; height: 2px; background: linear-gradient(90deg, transparent, var(--lit, var(--orchid)), transparent); box-shadow: 0 0 14px 1px var(--lit, var(--orchid)) }
.say .src { font: 600 12px/1.3 var(--body); color: var(--dim); margin: 0 }
.say blockquote { margin: 0; font: 800 clamp(21px, 2.3vw, 26px)/1.4 var(--tamil); overflow-wrap: anywhere }
.say.long blockquote { font: 700 18px/1.55 var(--tamil) }
.gist { font-size: 14px; color: var(--dim); margin: 0; max-width: 70ch }
.say .gist { margin-top: 10px }
.say footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px }
.say .who { padding-bottom: 14px; display: grid; gap: 8px; justify-items: start }
.say .who b { font: 800 19px/1.25 var(--tamil); overflow-wrap: anywhere }
.say .pic { width: 96px; height: 118px; border-radius: var(--r2) var(--r2) 0 0; background: radial-gradient(90% 70% at 50% 30%, var(--halo, rgba(154, 123, 255, 0.4)), transparent 76%) } .say .pic.flag { height: 64px; margin-bottom: 14px; border-radius: var(--r1) }
.hear { background: var(--glass-3); color: var(--ink); border: 1px solid var(--edge-lit); border-radius: var(--r1); padding: 9px 11px 7px; font: 800 14px/1 var(--tamil); cursor: pointer; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background var(--t1) }
.hear:hover { background: var(--violet); border-color: var(--violet); color: #fff }
.to { border: 0; background: transparent; padding: 0; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: 600 13px/1.2 var(--body) } .to:hover { color: var(--ink) }
.post p.raw { font: 400 12px/1.4 var(--body); color: var(--dim); border: 1px dashed var(--line); border-radius: var(--r1); padding: 6px 8px; justify-self: start }
.player { position: relative; aspect-ratio: 16 / 9; width: min(100%, 560px); background: var(--solid); border-radius: var(--r2); overflow: hidden }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.dock { margin-top: 14px; display: grid; gap: 8px } .dock p { margin: 0; display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--dim) } .dock p b { color: var(--ink); font: 800 17px/1.2 var(--tamil) }
.dock button { border: 1px solid var(--edge); background: var(--glass-1); border-radius: var(--r1); padding: 7px 10px 6px; cursor: pointer; font: 600 13px/1 var(--body) }
.vox { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s7) }
@media (min-width: 900px) { .vox { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) } }
.vox .msg { max-width: 60ch; margin-bottom: 14px }
:lang(ta) .vox .msg { font: 500 14px/1.65 var(--tamil) }
.split { display: grid; gap: 7px; margin-top: 10px } .split .h { font: 700 15px/1.4 var(--tamil); margin: 0 }
.bar3 { display: flex; gap: 3px; height: 10px } .bar3 i, .key i { display: block; border-radius: 5px } i.for { background: var(--good); box-shadow: 0 0 10px rgba(74, 222, 159, 0.5) } i.against { background: var(--alert); box-shadow: 0 0 10px rgba(255, 107, 120, 0.5) } i.neither { background: var(--calm) }
.key { display: flex; gap: 4px 16px; flex-wrap: wrap; font: 600 13px/1.3 var(--body); margin: 0; font-variant-numeric: tabular-nums } .key span { display: flex; gap: 6px; align-items: center } .key i { width: 10px; height: 10px; box-shadow: none }

/* the floor: members, in their own words */
.floor { padding-block: var(--s7) var(--s5); scroll-margin-top: 0 }
.fl-head { display: flex; gap: 6px 28px; align-items: baseline; flex-wrap: wrap; justify-content: space-between }
.fl-head .sh { margin: 0 } .fl-head .sh small { max-width: 60ch }
.fl-count { margin: 0; font: 600 14px/1.2 var(--body); color: var(--dim) } .fl-count b { color: var(--ink); font: 800 28px/1 var(--display); font-variant-numeric: tabular-nums; margin-right: 6px }
.fl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s7); margin-top: var(--s5); align-items: start }
@media (min-width: 900px) { .fl-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) } }
/* the invitation to join: glass with a warm edge, and the one yellow button */
.pitch { background: linear-gradient(140deg, rgba(255, 212, 0, 0.1), rgba(150, 168, 255, 0.08) 52%); border: 1px solid rgba(255, 212, 0, 0.32); border-radius: var(--r3); box-shadow: var(--hi) }
.pitch { padding: var(--s5); display: grid; gap: var(--s3); justify-items: start }
.pitch .big { font: 800 clamp(22px, 2.6vw, 30px)/1.3 var(--tamil); margin: 0; text-wrap: balance } :lang(en) .pitch .big { font-family: var(--display); line-height: 1.1; letter-spacing: -0.02em }
.pitch p { margin: 0 } .pitch p:not(.big) { color: var(--dim) } .pitch .cta { text-decoration: none }
.fl-form { display: grid; gap: 10px; border: 1px solid var(--edge); border-radius: var(--r3); padding: 16px; background: var(--glass-1); box-shadow: var(--hi) }
.fl-form label { font: 700 16px/1.4 var(--tamil) }
.fl-form textarea { width: 100%; min-height: 110px; background: var(--deep); border: 1px solid var(--edge-lit); border-radius: var(--r2); padding: 12px; resize: vertical; font: 500 18px/1.55 var(--tamil) }
.fl-form textarea:focus { border-color: var(--fill); outline: 0; box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.16) }
.fl-form .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.fl-form select { background: var(--solid); border: 1px solid var(--edge-lit); border-radius: var(--r2); padding: 11px 10px; font: 600 14px/1.2 var(--body); max-width: 100%; min-width: 0; flex: 1 1 160px }
.voices { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2) }
.voices > .voice { padding: var(--s4); display: grid; gap: 8px; min-width: 0; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3) }      /* a member's post; a desk's name line is .post .voice */
.voices:not(.all) > .voice:nth-child(n+4) { display: none }
.v-by { margin: 0; display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; font: 600 13px/1.3 var(--body); color: var(--dim) } .v-by b { color: var(--ink); font: 800 17px/1.3 var(--tamil) }
.v-mark { color: var(--good); font: 700 14px/1.3 var(--tamil) } :lang(en) .v-mark { font: 600 13px/1.3 var(--body) }      /* a paying member: plain words, not an agent's label */
.v-body { margin: 0; font: 500 18px/1.6 var(--tamil); white-space: pre-line; overflow-wrap: anywhere; max-width: 62ch }
.feel.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 420px } .feel.small button { padding: 6px 4px; display: flex; gap: 6px; justify-content: center; align-items: baseline } .feel.small button b { font-size: 15px } .feel.small button span { font-size: 13px }
.empty { color: var(--dim); margin: 0; border: 1px dashed var(--line); border-radius: var(--r2); padding: 16px 18px; max-width: 60ch }

/* the wire: the news sites and channels, minute by minute */
.wire { display: grid; min-width: 0; scroll-margin-top: 10px; background: var(--deep); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); padding: 4px var(--s4) var(--s2); position: relative; overflow: hidden }
.wire::before { content: ""; position: absolute; inset: 0 12% auto; height: 2px; background: linear-gradient(90deg, transparent, var(--fill), transparent); box-shadow: 0 0 14px 1px rgba(255, 212, 0, 0.7) }      /* live: the wire's edge is lit in the signal */
.wire .sh { margin: 0; padding: var(--s3) 0 var(--s3); border-bottom: 1px solid var(--line) } .wire .sh small { margin-top: 4px }
.wire .empty { border: 0; margin: 0; padding-inline: 0 } .w-list li:has(.empty) { display: block }
.w-list { list-style: none; margin: 0; padding: 0; max-height: min(70vh, 720px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain }
.w-list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--line); overflow: hidden }
.w-list time { font: 800 13px/1.65 var(--display); color: var(--fill); font-variant-numeric: tabular-nums; grid-row: span 2 }
.w-list a { font: 700 16px/1.45 var(--tamil); text-decoration: none; overflow-wrap: anywhere; transition: color var(--t1) } .w-list a:hover { color: var(--orchid) }
.w-list a:lang(en) { font: 600 15px/1.4 var(--body) }
.w-list small { color: var(--dim); font: 600 12px/1.3 var(--body) }
.w-list.flat { max-height: none; overflow: visible } .w-list.flat li:last-child { border-bottom: 0 } .w-list.flat a { font-size: 17px }
.w-more { display: none; border: 0; background: transparent; padding: 12px 0; cursor: pointer; font: 700 14px/1.2 var(--tamil); text-align: left; color: var(--stamp); text-decoration: underline; text-underline-offset: 3px } .w-more:hover { color: #fff }
/* what Tamil Nadu watched: the day's paragraph, an AI desk's, and five videos */
.watched { position: relative; overflow: hidden; display: grid; gap: var(--s4) var(--s6); margin-top: var(--s7); background: linear-gradient(140deg, rgba(154, 123, 255, 0.16), rgba(108, 155, 255, 0.06) 60%); border: 1px solid var(--edge-lit); border-radius: var(--r3); box-shadow: var(--hi), var(--lift); padding: var(--s5) }
.watched > div { display: grid; gap: 8px; align-content: start; min-width: 0 } .watched .sh { margin: 0 }
@media (min-width: 900px) { .watched { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } } .wt-by { margin: 0; font: 600 12.5px/1.4 var(--body); color: var(--dim); display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center } :lang(ta) .wt-by { font: 500 13px/1.45 var(--tamil) }
.wt-t { margin: 0; font: 700 clamp(17px, 1.6vw, 20px)/1.55 var(--tamil); text-wrap: pretty; max-width: 60ch } .wt-t:lang(en) { font: 600 clamp(16px, 1.4vw, 18px)/1.5 var(--body) }
.wt-list { list-style: none; margin: 0; padding: 0 } .wt-list li { padding: 8px 0; border-top: 1px solid var(--line); display: grid; gap: 2px }
.wt-list a { font: 700 14.5px/1.45 var(--tamil); text-decoration: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .wt-list a:lang(en) { font: 600 14px/1.4 var(--body) } .wt-list a:hover { color: var(--orchid) } .wt-list small { font: 600 12px/1.3 var(--body); color: var(--dim) }
.wt-all { font: 700 14px/1.3 var(--tamil); color: var(--stamp); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center } :lang(en) .wt-all { font: 600 14px/1.3 var(--body) }

/* the site's own position: opinion, set apart from the desks on a pane of its own colour */
.post.stand { background: linear-gradient(140deg, rgba(154, 123, 255, 0.2), rgba(108, 155, 255, 0.08)); border-left: 3px solid var(--orchid) }
.post.stand .voice b { background: var(--paper); color: #0b0b12; padding: 5px 7px 3px; border-radius: 5px }
.post.stand h4 { font: 800 clamp(22px, 2.6vw, 28px)/1.3 var(--tamil); margin: 0; text-wrap: balance }
.post.stand p { white-space: pre-line } .post.stand .ta { font: 500 18px/1.65 var(--tamil) }
.post.stand .refs li { grid-template-columns: 1fr } .post.stand small { color: var(--dim); font-size: 12px }

/* the silence before a poll: the head says so and counts down; what stays open is laid out under it */
body.quiet .poster h1 { max-width: 22ch } body.quiet .p-sky, body.quiet #credit, body.quiet .bar, body.quiet .chips, body.quiet #c-troll, body.quiet #more-h, body.quiet .dayline { display: none }
body.quiet .day .read { font-size: 16px; line-height: 1.6; max-width: 64ch; color: var(--ink) }
.count { font: 800 clamp(44px, 9vw, 104px)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 14px 0 0; color: var(--fill); text-shadow: 0 0 40px rgba(255, 200, 0, 0.45) }
body.quiet .cols { display: none } body.quiet .morecards { padding-block: 30px 64px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; border: 0 }
body.quiet .morecards .card { padding: 24px } body.quiet .morecards .card strong { font-size: 32px }

/* on every page: what is written by AI here, and that it can be wrong */
.ainote { background: rgba(14, 19, 48, 0.86); border-top: 1px solid var(--edge-lit); margin-top: 0; 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: 15px; line-height: 1.55; max-width: 86ch } .ainote b { font: 800 19px/1.3 var(--tamil); margin-right: 6px; color: var(--fill) }
: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 .legal { border-top: 0; padding-top: 0; 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 }

/* the foot of the page */
.foot { position: relative; background: rgba(4, 6, 16, 0.82); padding-block: 36px 44px }
.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 .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 40px }
.foot nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 22px; font: 700 16px/1.3 var(--tamil); border-top: 1px solid var(--line); padding-top: 14px } .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: 860px) { .foot .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) } }
.foot h2 { font: 800 18px/1.3 var(--tamil); margin: 0 0 6px } .foot p { margin: 0; color: var(--dim); font-size: 14px; max-width: 46ch } :lang(ta) .foot p { line-height: 1.65 } .foot .mark { font-size: 26px; display: inline-block; margin-bottom: 10px; color: var(--ink) }
.foot a.cta { text-decoration: none; display: inline-block; margin-top: 12px }

/* under the head: parties, the map, tomorrow's guess */
.three { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-block: var(--s6) }
@media (min-width: 900px) { .three { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s5); align-items: start } }
.three > section { position: relative; isolation: isolate; overflow: hidden; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); padding: var(--s4); min-width: 0 }
.three > section::before, .wire::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grat); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%) }
.three > section::after, .watched::before { content: ""; position: absolute; inset: 0 16% auto; height: 2px; background: linear-gradient(90deg, transparent, var(--orchid), transparent); box-shadow: 0 0 14px 1px var(--orchid) }
.parties { display: grid; border-top: 1px solid var(--line) }
.party { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 6px 12px; align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0 0 12px; cursor: pointer; text-align: left }
.party:hover b { text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px }
/* a party's colour, as a light on the edge of what is its own */
.party::before, .guess button::before, .ck::before, .topic.shut .ph::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--lit, var(--edge-lit)); box-shadow: 0 0 12px var(--lit, transparent); z-index: 1 } .party::before { bottom: 4px }
.chips button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lit, var(--edge-lit)); box-shadow: 0 0 8px var(--lit, transparent); align-self: center; flex: none }
.party img { width: 48px; height: 32px; object-fit: cover; display: block; border-radius: 5px; box-shadow: 0 0 0 1px var(--edge-lit), 0 0 18px -4px var(--lit, transparent) }
.party .nf { width: 48px; height: 32px; border-radius: 5px; background: var(--glass-2); box-shadow: 0 0 0 1px var(--edge) }
@media (max-width: 1100px) { .party { grid-template-columns: 48px minmax(0, 1fr) } .party img, .party .nf { grid-row: span 2 } .party > span:not(.pbar) { grid-column: 2; margin-top: -4px } }
.party b { font: 800 19px/1.25 var(--tamil) } :lang(en) .party b { font-family: var(--display) } .party > span { font: 600 13px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap }
.party .pbar { grid-column: 1 / -1; height: 4px; background: transparent; margin-top: 4px } .party .pbar i { display: block; height: 100%; border-radius: 2px; background: var(--lit, var(--orchid)); box-shadow: 0 0 12px var(--lit, var(--orchid)) }
.map { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-width: 300px; position: relative; overflow: hidden }
html.anim .map.seen:not(.still)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(210, 220, 255, 0.22) 50%, transparent 70%); animation: sweep 1.1s 0.2s var(--ease-io) both }      /* one light crosses the map when it is first seen */
.map button { aspect-ratio: 1; border: 1px solid var(--edge); border-radius: 5px; background: var(--glass-1); padding: 0; cursor: pointer; font: 800 12px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; transition: border-color var(--t1) }
.map button:hover, .map button:focus-visible { border-color: #fff }
.map button.l1 { background: rgba(108, 130, 255, 0.4); border-color: rgba(140, 160, 255, 0.5) } .map button.l2 { background: #5a57e6; border-color: #8a86ff; box-shadow: 0 0 10px rgba(110, 106, 255, 0.5) } .map button.l3 { background: var(--fill); border-color: var(--fill); color: var(--on-fill); box-shadow: 0 0 14px rgba(255, 212, 0, 0.6) }
.map button[aria-pressed=true] { outline: 2px solid #fff; outline-offset: 1px }
.where { margin: 10px 0 0; min-height: 3em; font-size: 14px; color: var(--dim) } .where b { color: var(--ink); font: 800 17px/1.3 var(--tamil) }
.where button { border: 0; background: transparent; padding: 0; text-decoration: underline; cursor: pointer; color: var(--stamp) }
.guess { display: grid; gap: 6px }
.guess button { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--edge); border-radius: var(--r2); background: var(--glass-1); padding: 0 12px 0 0; cursor: pointer; text-align: left; position: relative; overflow: hidden; min-height: 52px; transition: border-color var(--t1) } .guess button::before { inset: 8px auto 8px 0 }
.guess button:hover { border-color: var(--edge-lit) }
.guess button[aria-pressed=true] { border-color: var(--fill); box-shadow: inset 3px 0 0 var(--fill), 0 0 18px -6px rgba(255, 212, 0, 0.6) }
.guess .pic { width: 44px; height: 52px; background: radial-gradient(90% 70% at 50% 30%, rgba(154, 123, 255, 0.45), transparent 78%), var(--glass-2); z-index: 1 } .guess .pic img { filter: saturate(0.96) contrast(1.04) }
.guess b { font: 800 18px/1.25 var(--tamil); position: relative } :lang(en) .guess b { font-family: var(--display) } .guess button > span:last-child { font: 600 13px/1 var(--body); color: var(--dim); font-variant-numeric: tabular-nums; position: relative }
.guess .fillbar { position: absolute; inset: 0 auto 0 44px; background: linear-gradient(90deg, rgba(108, 155, 255, 0.3), rgba(154, 123, 255, 0.2)) }
.said-guess { font-size: 14px; color: var(--dim); margin: 4px 0 0; min-height: 1.5em } .said-guess b { color: var(--ink) }

/* the feed */
.bar { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding-block: var(--s7) var(--s2) }
.bar .sh { margin: 0; margin-right: auto } .pickd { display: inline-flex; gap: 12px; align-items: center; min-width: 0; max-width: 100% }
.bar select { background: var(--solid); border: 1px solid var(--edge-lit); border-radius: var(--r2); padding: 10px 12px; font: 600 14px/1.2 var(--body); max-width: 100% }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: var(--s6) }
@media (min-width: 1080px) { .cols { grid-template-columns: minmax(0, 1fr) 348px; gap: var(--s6); align-items: start } .cols > aside { position: sticky; top: 72px } .w-list { max-height: calc(100vh - 340px) } .cols:has(> aside:empty) { grid-template-columns: minmax(0, 1fr) } }
.feed { display: grid; gap: var(--s2); min-width: 0 }
/* live: asks every minute, says when, offers what is new instead of jumping */
.live { display: flex; gap: 2px 10px; align-items: center; flex-wrap: wrap; font: 600 13px/1.4 var(--body); color: var(--dim); margin: 0 0 var(--s3); font-variant-numeric: tabular-nums }
.live { min-height: 28px } .live b { color: var(--fill); font-weight: 600 } .live.off i { background: var(--dim); box-shadow: none } .live.off b { color: var(--ink) }
:lang(ta) .live { font: 500 14px/1.5 var(--tamil) } :lang(ta) .live b { font-weight: 700 }
#fresh { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 25; background: var(--grad-signal); color: var(--on-fill); border: 0; border-radius: var(--r4); box-shadow: var(--glow-signal), var(--lift); padding: 12px 18px 10px; font: 800 16px/1.2 var(--tamil); cursor: pointer; white-space: nowrap; animation: sheet 0.2s ease-out }
.nb { font: 800 11px/1 var(--display); font-style: normal; background: var(--fill); color: var(--on-fill); border-radius: 6px; padding: 3px 5px 2px; margin-left: 5px; vertical-align: 2px }
.latest { margin: 0; font: 600 15px/1.5 var(--tamil); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 64ch }
.latest time { font: 800 13px/1 var(--display); font-variant-numeric: tabular-nums; margin-right: 6px; color: var(--fill) } .latest a { text-decoration: none } .latest a:hover { text-decoration: underline } .latest span { font: 600 12px/1.3 var(--body); color: var(--dim); margin-left: 6px }
.spark { display: grid; grid-template-columns: auto minmax(0, 260px); gap: 12px; align-items: center; font: 600 12px/1.2 var(--body); color: var(--dim); margin: 0 } .spark .pl { height: 30px }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--s4); scrollbar-width: none }
.chips button { flex: 0 0 auto; border: 1px solid var(--edge); border-radius: var(--r4); background: var(--glass-1); padding: 8px 13px 6px; cursor: pointer; font: 700 15px/1.2 var(--tamil); display: flex; gap: 8px; align-items: baseline; white-space: nowrap; transition: border-color var(--t1), background var(--t1) }
.chips button:hover { border-color: var(--edge-lit); background: var(--glass-2) } .chips button i { font: 800 12px/1 var(--display); font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums }
.notice { border: 1px dashed var(--line); border-radius: var(--r2); padding: 16px 18px; color: var(--dim); max-width: 80ch; margin: 16px 0 0 }
/* a topic: open, under its own panel lit in its party's colour; shut, one line of the day's ranking. Plain fill: nothing here blurs. */
.topic { display: grid; gap: 0; min-width: 0; scroll-margin-top: 10px; border: 1px solid var(--edge); border-radius: var(--r3); overflow: hidden; background: var(--glass-1) }
.topic > * { min-width: 0 }
.topic:not(.shut) { margin-block: var(--s2) var(--s4); box-shadow: var(--hi), var(--lift); border-color: var(--edge-lit) } .topic:not(.shut):first-child { margin-top: 0 }
.ph { cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 176px; overflow: hidden; position: relative; background: linear-gradient(100deg, var(--wash, rgba(124, 110, 255, 0.2)), rgba(14, 19, 48, 0.72) 62%) }
@supports (color: color-mix(in srgb, red, blue)) { .ph.col { --wash: color-mix(in srgb, var(--pc) 26%, #0d1230) } }
.ph .txt { padding: var(--s4) 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-content: space-between; min-width: 0 }
.ph .txt > * { grid-column: 1 / -1 } .ph .txt > .rank { grid-column: 1 } .ph .txt > .tags { grid-column: 2; align-self: center; display: flex; gap: 6px; flex-wrap: wrap }
.ph .rank { font: 800 clamp(32px, 4vw, 44px)/0.85 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px rgba(210, 220, 255, 0.75) }
.th { font: 800 calc(clamp(28px, 4.2vw, 48px) * var(--type-scale))/1.22 var(--tamil); margin: 0; overflow-wrap: break-word; text-wrap: balance }
:lang(en) .th { font-family: var(--display); line-height: 1.02; letter-spacing: -0.03em }
.ph .sub { font-size: 14px; margin: 4px 0 0; color: var(--dim) }
.tnote { margin: 8px 0 4px; padding-left: 10px; border-left: 2px solid var(--fill); font: 600 15px/1.5 var(--tamil) }
.facts { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font: 600 14px/1.3 var(--body); margin: 0; font-variant-numeric: tabular-nums }
:lang(ta) .facts { font: 600 15px/1.4 var(--tamil) }
.tone { font: 600 12px/1 var(--body); border: 1px solid var(--edge-lit); border-radius: var(--r4); background: var(--glass-1); padding: 6px 10px 5px; white-space: nowrap } :lang(ta) .tone { font: 700 13px/1 var(--tamil); padding: 7px 10px 4px }
.ph .txt > .tg { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; border: 1px solid var(--edge-lit); border-radius: var(--r1); background: var(--glass-1); color: inherit; padding: 7px 10px 5px; font: 800 13px/1 var(--tamil); cursor: pointer; transition: background var(--t1) }
:lang(en) .ph .txt > .tg { font: 800 12px/1 var(--display); padding: 7px 10px }
.tg:hover { background: var(--glass-3) }
.ph .fig { display: flex; align-items: flex-end; padding: 12px 12px 0 0; gap: 0 }
.ph .fig.faces { padding: 0 6px 0 0; gap: 0; align-items: stretch } .ph .fig .pic { width: clamp(118px, 17vw, 184px); min-height: 176px; background: radial-gradient(86% 64% at 50% 34%, var(--halo, rgba(154, 123, 255, 0.36)), transparent 76%); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent) }
.ph .fig .pic + .pic { margin-left: -18px } .ph .fig .pic.flag + .pic, .ph .fig .pic.none + .pic { margin-left: 0 } .ph .fig .pic.flag, .ph .fig .pic.none { align-self: center; min-height: 0; height: 104px; width: clamp(110px, 14vw, 156px); margin: 0 12px 0 0; border-radius: var(--r2); -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px var(--edge-lit), var(--lift) }
.ph .fig.flag { align-items: center; padding: 16px; gap: 12px } .ph .fig.flag > img { width: clamp(110px, 14vw, 150px); height: auto; display: block; border-radius: var(--r1); box-shadow: 0 0 0 1px var(--edge-lit), 0 0 30px -6px var(--lit, var(--orchid)) } .ph .fig.flag > img.sym { width: clamp(54px, 7vw, 76px); background: #fff; padding: 6px; box-shadow: none }
.ph .fig.shot { padding: 0 } .ph .fig.shot img { height: 100%; min-height: 176px; width: clamp(160px, 26vw, 320px); object-fit: cover; display: block; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); opacity: 0.9 }
.by { font-size: 11px; color: var(--dim); margin: 0; padding: 4px 18px 5px; background: rgba(8, 11, 28, 0.5) } .by a { color: var(--dim) }
.topic.shut { border-radius: var(--r2); transition: border-color var(--t1), background var(--t1) } .topic.shut:hover { border-color: var(--edge-lit); background: var(--glass-2) }
.topic.shut .ph { min-height: 0; background: none }
.topic.shut .ph .txt { grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: baseline; align-content: start; gap: 2px 12px; padding: 12px 14px 11px 16px }
.topic.shut .rank { font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--dim); -webkit-text-stroke: 0; grid-row: span 3 }
.topic.shut .ph .txt > div { padding-right: 0; grid-column: 2 } .topic.shut .th { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.32 } :lang(en) .topic.shut .th { line-height: 1.15; letter-spacing: -0.02em }
.topic.shut .sub, .topic.shut .by, .topic.shut .fig, .topic.shut .tags { display: none }
.topic.shut .facts { grid-column: 2; font-size: 13px; color: var(--dim); gap: 2px 12px } :lang(ta) .topic.shut .facts { font-size: 14px }
.topic.shut .latest { grid-column: 2 / -1; -webkit-line-clamp: 1; font-size: 15px; font-weight: 500; margin-top: 2px }
.topic.shut .spark { grid-column: 3; grid-row: 1 / span 2; align-self: center; grid-template-columns: 92px } .topic.shut .spark > span:first-child { display: none } .topic.shut .spark .pl { height: 26px }
.topic.shut .ph .txt > .tg { grid-column: 4; grid-row: 1 / span 2; align-self: center }
/* how widely a topic is carried */
.reach { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) var(--s6); padding: var(--s4) 18px; background: rgba(8, 11, 28, 0.62); border-top: 1px solid var(--line) }
@media (min-width: 900px) { .reach { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) } }
.reach p, .reach ol { margin: 0; padding: 0 } .reach > div { display: grid; gap: 10px; align-content: start; min-width: 0 }
.r-n { display: flex; gap: 2px 12px; flex-wrap: wrap; align-items: baseline; font: 600 14px/1.4 var(--body) } :lang(ta) .r-n { font: 600 15px/1.5 var(--tamil) }
.r-n b { font: 800 clamp(34px, 4vw, 44px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em } .r-n small { font: inherit; color: var(--dim); flex-basis: 100% }
.r-bar { display: flex; gap: 3px; height: 10px } .r-bar i { display: block; border-radius: 5px; background: var(--c); box-shadow: 0 0 12px -1px var(--c); min-width: 4px }
.r-key { display: flex; gap: 3px 14px; flex-wrap: wrap; font: 600 12.5px/1.4 var(--body); color: var(--dim); font-variant-numeric: tabular-nums } :lang(ta) .r-key { font: 500 13.5px/1.45 var(--tamil) } .r-key span { display: inline-flex; gap: 6px; align-items: center } .r-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--c) } .r-key b { color: var(--ink); font-weight: 700 }
.r-first { font-size: 14px; color: var(--dim) } :lang(ta) .r-first { font: 500 15px/1.55 var(--tamil) } .r-first b { color: var(--ink); font-weight: 700 } .r-first a { color: var(--ink) }
.r-h { font: 700 13px/1.3 var(--body); color: var(--dim) } :lang(ta) .r-h { font: 700 14px/1.4 var(--tamil) }
.r-top { list-style: none; display: grid; gap: 0 } .r-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding-block: 8px; border-top: 1px solid var(--line) }
.r-top a { font: 700 15px/1.45 var(--tamil); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .r-top a:hover { color: var(--orchid) } .r-top a:lang(en) { font: 600 14px/1.4 var(--body) }
.r-top b { font: 800 15px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap } .r-top b small { font: 600 11.5px/1 var(--body); color: var(--dim); margin-left: 4px } .r-top span { grid-column: 1 / -1; font: 600 12px/1.3 var(--body); color: var(--dim) }
.r-note { font-size: 12px; color: var(--dim) } :lang(ta) .r-note { font: 500 13px/1.5 var(--tamil) }
/* a topic's briefing: what happened (a short timeline, the newest last and lit), what each side says, what is settled; every
   line with its numbered sources, which open where they were published; the sources, numbered, behind one press; the AI label */
.brf { display: grid; gap: 10px; padding: var(--s4) 18px var(--s3); background: var(--deep); border-top: 1px solid var(--line); min-width: 0 }
.brf-fresh { margin: 0; display: flex; gap: 8px; align-items: center; font: 600 12.5px/1.4 var(--body); color: var(--dim); font-variant-numeric: tabular-nums } :lang(ta) .brf-fresh { font: 500 13.5px/1.5 var(--tamil) }
.brf-fresh i { width: 7px; height: 7px; border-radius: 50%; background: var(--fill); box-shadow: 0 0 8px var(--fill-lit, rgba(255, 212, 0, 0.9)); flex: none }
.brf h4 { margin: 6px 0 0; font: 800 calc(14px * var(--type-scale))/1.3 var(--tamil); color: var(--orchid) } :lang(en) .brf h4 { font: 800 calc(13px * var(--type-scale))/1.3 var(--display); letter-spacing: 0 }
.brf ol, .brf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.brf p { margin: 0; overflow-wrap: anywhere; max-width: 72ch }
.brf .brf-hap { gap: 0 }      /* the lines as a timeline: a dot for each, joined by a thread, its time over it; the newest last, lit */
.brf-hap li { position: relative; display: grid; gap: 1px; padding: 0 0 12px 24px }
.brf-hap li::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: var(--edge) } .brf-hap li:last-child { padding-bottom: 0 } .brf-hap li:last-child::before { display: none }
.brf-hap li::after { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--deep); border: 1.5px solid var(--edge-lit) }
.brf-hap time { font: 700 12px/1.5 var(--body); color: var(--dim); font-variant-numeric: tabular-nums } :lang(ta) .brf-hap time { font: 600 12.5px/1.5 var(--tamil) }
.brf-hap p { font: 600 calc(16.5px * var(--type-scale))/1.6 var(--tamil) } :lang(en) .brf-hap p { font: 500 calc(15.5px * var(--type-scale))/1.55 var(--body) }
.brf-hap li:last-child time { color: var(--fill-text) } .brf-hap li:last-child p { font-weight: 800 } .brf-hap li:last-child::after { background: var(--fill); border-color: var(--fill); box-shadow: 0 0 10px var(--fill-lit, rgba(255, 212, 0, 0.9)) }
.brf-sides li { border-left: 3px solid var(--blue); padding-left: 12px; display: grid; gap: 2px } .brf-sides li.gov { border-left-color: var(--good) }
.brf-sides b { font: 800 15px/1.35 var(--tamil) } :lang(en) .brf-sides b { font-family: var(--display) }
.brf-sides p { font: 500 calc(15.5px * var(--type-scale))/1.6 var(--tamil) } :lang(en) .brf-sides p { font: 400 calc(15px * var(--type-scale))/1.55 var(--body) }
.brf-ver li { display: grid; gap: 4px; justify-items: start }
.brf-ver .st { background: var(--paper); color: #0b0b12; border-radius: 6px; font: 800 13px/1.2 var(--tamil); padding: 5px 8px 3px } :lang(en) .brf-ver .st { font: 800 12.5px/1.2 var(--display); padding: 5px 8px 4px }      /* every result wears the same stamp: the words say what the record showed, not a colour */
.brf-ver .st.nv { background: transparent; color: var(--ink); border: 1px dashed var(--paper); padding: 4px 7px 2px }
.brf-ver p { font: 500 15px/1.55 var(--tamil) } :lang(en) .brf-ver p { font: 400 14.5px/1.5 var(--body) } .brf-ver a { color: var(--stamp); font-weight: 700 }
.brf-none { font: 500 14px/1.6 var(--tamil); color: var(--dim) } :lang(en) .brf-none { font: 400 14px/1.5 var(--body) }
.cites { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; white-space: nowrap }
.cite { position: relative; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--edge-lit); border-radius: var(--r1); background: var(--glass-2); color: var(--stamp); font: 800 12px/1 var(--display); font-variant-numeric: tabular-nums; text-decoration: none }
a.cite::after { content: ""; position: absolute; inset: -10px -3px }      /* a source number is a thumb's height to press, and keeps its own size on the line */
a.cite:hover { background: var(--violet); border-color: var(--violet); color: #fff }
.brf-src summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 700 14px/1.3 var(--tamil); color: var(--stamp) } :lang(en) .brf-src summary { font: 600 14px/1.3 var(--body) }
.brf-src ol { gap: 0; margin-top: 2px } .brf-src li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 8px; padding: 7px 0; border-top: 1px solid var(--line) }
.brf-src li > b { font: 800 13px/1.5 var(--display); color: var(--dim); text-align: right; font-variant-numeric: tabular-nums }
.brf-src a, .brf-src span { font: 600 14px/1.5 var(--tamil); text-decoration: none; overflow-wrap: anywhere } .brf-src a:lang(en), .brf-src span:lang(en) { font: 500 13.5px/1.45 var(--body) } .brf-src a:hover { color: var(--orchid) }
.brf-src small { grid-column: 2; font: 600 12px/1.4 var(--body); color: var(--dim) } :lang(ta) .brf-src small { font: 500 12.5px/1.45 var(--tamil) }
.brf-ai { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; font: 600 12px/1.45 var(--body); color: var(--dim) } :lang(ta) .brf-ai { font: 500 13px/1.5 var(--tamil) }
.brf-ai 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) .brf-ai b { font: 800 12px/1 var(--tamil); padding-top: 5px }
.brf .kit-rm-row { justify-content: flex-start }
.latest .ai { font: 800 10.5px/1 var(--display); font-style: normal; border: 1px solid var(--violet); color: var(--orchid); border-radius: var(--r4); padding: 3px 6px 2px; margin-right: 7px; vertical-align: 2px }
.latest.brf-line span { font: inherit; color: var(--ink); margin-left: 0 }      /* the line itself, not a source's name */
.topic.shut .latest.brf-line { -webkit-line-clamp: 2; line-clamp: 2 }      /* a shut card's line from its briefing: two lines, it is the point of the card */
@media (max-width: 760px) { .brf { padding: 14px } .brf-hap p { font-size: calc(16px * var(--type-scale)) } }
/* the desks of a topic: the ones with the most to read first, the rest behind "more" */
.deskbar { display: flex; background: rgba(8, 11, 28, 0.78); border-block: 1px solid var(--line); min-width: 0; padding: 6px 8px; gap: 4px }
.desks { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto }
.desks button, .dmore { flex: 0 0 auto; border: 0; border-radius: var(--r1); background: transparent; padding: 10px 13px 7px; cursor: pointer; font: 800 15px/1.1 var(--tamil); color: var(--dim); display: flex; gap: 7px; align-items: baseline; white-space: nowrap; transition: background var(--t1), color var(--t1) }
:lang(en) .desks button, :lang(en) .dmore { font: 800 14px/1.1 var(--display); padding-block: 10px 9px }
.desks button i { font: 800 12px/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.8 }
.desks button:hover, .dmore:hover { background: var(--glass-2); color: var(--ink) } .desks button[aria-selected=true] { background: var(--grad-act); color: #fff; box-shadow: var(--hi) }
.desks button:focus-visible, .dmore:focus-visible { outline-offset: -3px } .thread:focus-visible { outline-offset: -3px }
.deskbar.all { flex-wrap: wrap } @media (min-width: 761px) { .deskbar.all .desks { flex-wrap: wrap } }
.post:not(.all) .lines > li:nth-child(n+4), .post:not(.all) .w-list.flat:not(.heads) > li:nth-child(n+5), .vox:not(.all) .lines > li:nth-child(n+5) { display: none }
.allbtn { justify-self: start; border: 1px solid var(--edge-lit); border-radius: var(--r1); background: var(--glass-1); padding: 9px 12px 7px; cursor: pointer; font: 700 14px/1.2 var(--tamil); transition: background var(--t1) } .allbtn:hover { background: var(--glass-3) }
.rest { border: 1px dashed var(--edge-lit); border-radius: var(--r2); background: transparent; padding: 14px; cursor: pointer; font: 800 16px/1.2 var(--tamil); width: 100%; margin-top: var(--s2); transition: border-color var(--t1), color var(--t1) } .rest:hover { border-color: var(--fill); color: var(--fill) }
.thread { display: grid; gap: 0; background: var(--deep) } .topic.fresh .thread { animation: open 0.24s var(--ease) }      /* moves only when the reader opened it, not on the minute's refresh */
@keyframes open { from { opacity: 0; transform: translateY(-6px) } }
.post { padding: var(--s4) 18px; display: grid; gap: 10px; min-width: 0; border-bottom: 1px solid var(--line) }
.post > .voice, .tally .voice { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 600 12px/1 var(--body); color: var(--dim) }
.post > .voice b, .tally .voice b { color: var(--ink); font: 800 14px/1 var(--tamil); padding-top: 2px } :lang(en) .post > .voice b, :lang(en) .tally .voice b { font: 800 13px/1 var(--display); padding-top: 0 }
.post > .voice i, .tally .voice i { font-style: normal; border: 1px solid var(--violet); border-radius: var(--r4); padding: 4px 8px 3px; color: var(--orchid) }
.post p { margin: 0; overflow-wrap: anywhere; max-width: 78ch }
.post .ta { font: 500 17px/1.65 var(--tamil) }
.post.troll .ta, .post.take .ta, .post.demand .ta { font: 700 20px/1.5 var(--tamil) }
.post.lead .heads { border-top: 0 } .post.lead .heads li:first-child { padding-top: 0 } .post.lead .heads li:first-child a { font-size: clamp(19px, 2vw, 22px); font-weight: 800; line-height: 1.4 }
.tally { display: grid; gap: 8px; padding-top: var(--s3); border-top: 1px solid var(--line) } .tally p { font-size: 13px; color: var(--dim); line-height: 1.55 } :lang(ta) .tally p { font: 500 14px/1.65 var(--tamil) }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px }
.line { border-left: 3px solid var(--violet); padding-left: 12px; display: grid; gap: 6px; min-width: 0 }
.line blockquote { margin: 0; font: 700 19px/1.55 var(--tamil); overflow-wrap: anywhere; max-width: 60ch }
.line .meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; font: 600 13px/1.3 var(--body); color: var(--dim); margin: 0 }
.line .meta b { color: var(--ink); font: 800 16px/1.3 var(--tamil) }
.argued .line { border-left-color: var(--blue) } .argued .line blockquote { font: 500 16px/1.6 var(--tamil); color: var(--dim) }
.told { font: 600 12px/1.3 var(--body); color: var(--dim); white-space: nowrap }
.argued .pt { font: 700 18px/1.55 var(--tamil); margin: 0; max-width: 64ch } .argued .pt.en { font: 600 16px/1.5 var(--body) }
.stance { font: 600 12px/1 var(--body); border: 1px solid currentColor; border-radius: var(--r4); padding: 5px 8px 4px }
.crowd .line { border-left-color: var(--line) } .crowd .line p.say-c { font: 500 17px/1.6 var(--tamil); margin: 0; overflow-wrap: anywhere; max-width: 64ch }
.likes { color: var(--ink); font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums }
/* what a desk wrote, in the brief: the AI agent's label and a way to its sources */
.b-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; font: 600 13px/1.4 var(--body); color: var(--dim) } :lang(ta) .b-src { font: 500 14px/1.5 var(--tamil) }
.b-src i { font: 800 11.5px/1 var(--display); font-style: normal; border: 1px solid var(--violet); color: var(--orchid); border-radius: var(--r4); padding: 4px 8px 3px; white-space: nowrap } :lang(ta) .b-src i { font: 800 12px/1 var(--tamil); padding-top: 5px }
.b-src button { min-height: 44px; border: 0; background: none; padding: 0 2px; color: var(--stamp); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
/* a take or a demand says what it was written from, beside the way to those reports */
.post .from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; font: 500 13px/1.45 var(--body); color: var(--dim) } :lang(ta) .post .from { font: 500 14px/1.55 var(--tamil) }
.b-quote { font: 800 19px/1.45 var(--tamil); border-left: 3px solid var(--violet); padding-left: 12px; margin: 0; overflow-wrap: anywhere } .b-quote span { display: block; font: 600 13px/1.3 var(--body); color: var(--dim); margin-top: 4px }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px }
.vid { display: grid; gap: 6px; align-content: start; min-width: 0 }
.vid .frame { position: relative; aspect-ratio: 16 / 9; background: var(--solid); border: 0; border-radius: var(--r2); padding: 0; cursor: pointer; overflow: hidden; display: block; width: 100%; box-shadow: 0 0 0 1px var(--edge) }
.vid .frame img, .vid .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover }
.vid .frame span { position: absolute; left: 8px; bottom: 8px; background: rgba(7, 10, 23, 0.78); color: #fff; border: 1px solid var(--edge-lit); border-radius: var(--r1); font: 800 13px/1 var(--tamil); padding: 7px 10px 5px } .vid .frame:hover span { background: var(--grad-act); border-color: transparent }
.vid .t { font: 700 15px/1.45 var(--tamil); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.vid .c { font-size: 12px; color: var(--dim) }
a.vid { border: 1px solid var(--edge); border-radius: var(--r2); padding: 12px; text-decoration: none } a.vid:hover { border-color: var(--edge-lit) }
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.refs li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 14px }
.refs time { color: var(--dim); font-variant-numeric: tabular-nums }
.refs a { color: var(--stamp) }
.you { padding: var(--s4) 18px 18px; display: grid; gap: 10px }
.you .q { font: 700 15px/1.4 var(--tamil); margin: 0; color: var(--dim) } :lang(en) .you .q { font: 600 14px/1.3 var(--body) }
.feel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 520px }
.feel button { border: 1px solid var(--edge); border-radius: var(--r2); background: var(--glass-1); padding: 8px 8px 6px; cursor: pointer; display: flex; gap: 8px; justify-content: center; align-items: baseline; min-width: 0; min-height: 44px; transition: border-color var(--t1), background var(--t1), transform var(--t1) }
.feel button:hover { border-color: var(--c) } .feel button:active { transform: scale(0.96) }
.feel button b { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums }
.feel button span { font: 700 14px/1.2 var(--tamil); overflow-wrap: anywhere }
.feel button[aria-pressed=true] { background: var(--c); border-color: var(--c); color: #0b0b12; box-shadow: 0 0 18px -4px var(--c) }
.meter { display: flex; gap: 2px; height: 4px; max-width: 520px }
.meter i { display: block; height: 100%; border-radius: 2px }
.says { display: grid; gap: 10px }
.you .acts2 { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center }
.says > button, .you .acts2 > button { justify-self: start; border: 0; background: transparent; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: 600 14px/1.2 var(--body); min-height: 44px } :lang(ta) .you .acts2 > button, :lang(ta) .share { font: 700 15px/1.2 var(--tamil) }
.says .none { color: var(--dim); border: 0; padding: 0; font-size: 14px }
.says .wl { display: block; height: 12px; background: var(--glass-3); border-radius: 6px; width: 70%; margin-bottom: 8px } .says .wl + .wl { width: 44% } .pulse { animation: sk 1.8s ease-in-out infinite }
.feed[aria-busy=true] { opacity: 0.5 }
.says ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.says li { border-left: 3px solid var(--line); padding-left: 10px; overflow-wrap: anywhere }
.says li small { color: var(--dim); display: block }
.says textarea { width: 100%; min-height: 70px; background: var(--deep); border: 1px solid var(--edge-lit); border-radius: var(--r2); padding: 10px; resize: vertical }
.says .send { background: var(--grad-act); color: #fff; border: 0; border-radius: var(--r1); padding: 11px 16px 10px; min-height: 44px; font: 600 13px/1 var(--body); cursor: pointer; justify-self: start } .send[disabled], .cta[disabled] { opacity: 0.55; cursor: default }
.msg { color: var(--dim); font-size: 13px; margin: 0; min-height: 1.4em } .msg:empty { min-height: 0 } .you > .msg:empty, .voice > .msg:empty { display: none } .msg.bad { color: var(--ink) }
.share { justify-self: start; font: 600 14px/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center }
.share:hover { color: var(--orchid) }
.b-acts .share { border: 1px solid var(--edge-lit); border-radius: var(--r2); padding: 0 14px; text-decoration: none } .b-acts .share:hover { background: var(--glass-2); color: inherit }
.cols > aside { display: grid; gap: var(--s5); align-content: start }      /* the column beside the topics (the foot's AI note keeps its own ground) */
/* the rest of the site, as a row of panes at the end of the page */
.more-h { font: 800 22px/1.3 var(--tamil); margin: 0; padding-top: var(--s5) } :lang(en) .more-h { font-family: var(--display); line-height: 1.1 }
.morecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); gap: var(--s3); padding-block: var(--s3) var(--s8) }
.card { padding: var(--s4); display: grid; gap: 4px; text-decoration: none; align-content: start; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); transition: border-color var(--t1), background var(--t1), transform var(--t2) var(--ease) }
a.card:hover { border-color: var(--edge-lit); background: var(--glass-2); transform: translateY(-2px) }
.card strong { font: 800 22px/1.3 var(--tamil) } :lang(en) .card strong { font-family: var(--display); line-height: 1.1 }
.card span { color: var(--dim); font-size: 14px } :lang(ta) .card span { line-height: 1.65 }

/* the brief */
.cta { background: var(--grad-signal); color: var(--on-fill); border: 0; border-radius: var(--r2); padding: 16px 20px 14px; font: 800 clamp(16px, 3vw, 20px)/1 var(--tamil); cursor: pointer; box-shadow: var(--glow-signal); transition: filter var(--t1), transform var(--t1) } .cta:hover { filter: brightness(1.08) } .cta:active { transform: scale(0.98) }
.brief, .find { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; overflow: auto; padding-top: env(safe-area-inset-top, 0px);      /* the one column is never wider than the screen, whatever a card holds */
  background: radial-gradient(70% 46% at 80% 0%, rgba(124, 92, 255, 0.3), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(56, 108, 255, 0.22), transparent 70%), var(--ground) }
.b-col { width: min(100%, 480px); min-height: 100%; display: flex; flex-direction: column; padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)) }
.b-col > * { flex: 0 0 auto } .b-col > .b-body { flex: 1 0 auto }
.b-prog { display: flex; gap: 4px; padding-block: 4px 10px }
.b-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--glass-3) } .b-prog i.done { background: var(--orchid) } .b-prog i.at { background: var(--fill); box-shadow: 0 0 10px rgba(255, 212, 0, 0.8) }
.b-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; font: 600 13px/1 var(--body); color: var(--dim) }
.b-head button { border: 1px solid var(--edge-lit); border-radius: var(--r1); background: var(--glass-1); padding: 8px 12px; cursor: pointer; font: 600 13px/1 var(--body); color: var(--ink) }
.b-img { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r3); border: 1px solid var(--edge); background: radial-gradient(70% 90% at 50% 30%, var(--halo, rgba(154, 123, 255, 0.45)), transparent 78%), var(--glass-2); overflow: hidden; display: flex; justify-content: center; align-items: flex-end; gap: 0 }
@supports (color: color-mix(in srgb, red, blue)) { .b-img { --halo: color-mix(in srgb, var(--pc, #9a7bff) 58%, transparent) } }
.b-img > img { width: 100%; height: 100%; object-fit: cover; display: block } .b-img .pic { flex: 0 1 46%; height: 98%; overflow: visible } .b-img .pic img { object-fit: contain; object-position: 50% 100% }
.b-img .pic.flag, .b-img .pic.none { flex: 0 0 auto; align-self: center; height: 62%; aspect-ratio: 3 / 2; margin-inline: 8px; border-radius: var(--r2); overflow: hidden; box-shadow: 0 0 0 1px var(--edge-lit), var(--lift) } .b-img .pic.flag img { object-fit: cover }
.b-img > img.flagimg { width: 46%; height: auto; align-self: center; border-radius: var(--r2); box-shadow: 0 0 0 1px var(--edge-lit), var(--lift) }
.b-body { display: grid; gap: 10px; align-content: start; padding-block: 16px }
.b-body .th { font-size: clamp(34px, 9vw, 48px) }
.b-line { font: 500 18px/1.6 var(--tamil); margin: 0; overflow-wrap: anywhere }
.b-ask { font: 700 15px/1.4 var(--tamil); margin: 0 0 8px; color: var(--dim) }
.brief .feel { max-width: none } .brief .feel button { display: grid; gap: 2px; justify-items: center; padding: 10px 4px 8px } .brief .feel button b { font-size: 22px }
.b-nav { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px }
.b-nav button { border: 1px solid var(--edge-lit); border-radius: var(--r2); background: var(--glass-1); padding: 12px 18px 11px; cursor: pointer; font: 600 13px/1 var(--body); transition: background var(--t1) }
.b-nav button:hover { background: var(--glass-3) } .b-nav button[disabled] { opacity: 0.3; cursor: default } .b-nav button[data-b=next] { background: var(--grad-act); border-color: transparent; color: #fff }
.b-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.b-tiles div { background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r2); padding: 14px; display: grid; gap: 4px }
.b-tiles b { font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums } .b-tiles span { color: var(--dim); font-size: 13px }
.b-mood { display: grid; gap: 6px } .b-mood div { display: grid; grid-template-columns: 84px 1fr 44px; gap: 10px; align-items: center; font: 700 14px/1.2 var(--tamil) }
.b-mood i { display: block; height: 10px; min-width: 2px; border-radius: 5px } .b-mood span:last-child { font: 600 13px/1 var(--body); font-variant-numeric: tabular-nums; text-align: right }
.b-acts { display: flex; gap: 8px; flex-wrap: wrap }
/* the voice: the browser's own speech; a waveform while it speaks; labelled an AI voice */
.b-voice { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 8px }
#b-listen, .hollow.voice { display: inline-flex; gap: 10px; align-items: center } .hollow.voice .wave { color: var(--fill) }
#b-listen { border: 1px solid var(--edge-lit); border-radius: var(--r2); background: var(--glass-1); padding: 3px 16px 0 12px; min-height: 48px; cursor: pointer; font: 800 16px/1 var(--tamil); transition: background var(--t1) } #b-listen:hover { background: var(--glass-3) } #b-listen[aria-pressed=true] { border-color: var(--fill); color: var(--fill) } :lang(en) #b-listen { font-family: var(--display); padding-top: 0 }
.wave { display: inline-flex; gap: 2px; align-items: center; height: 18px } .wave i { display: block; width: 3px; height: 6px; border-radius: 2px; background: currentColor; opacity: 0.85 }
.speaking .wave i { animation: wave 0.7s var(--ease-io) infinite alternate } .speaking .wave i:nth-child(2) { animation-delay: 0.1s } .speaking .wave i:nth-child(3) { animation-delay: 0.2s } .speaking .wave i:nth-child(4) { animation-delay: 0.3s } .speaking .wave i:nth-child(5) { animation-delay: 0.15s }
@keyframes wave { from { height: 4px } to { height: 18px } }
.b-ai { font: 700 12px/1 var(--tamil); border: 1px solid var(--violet); border-radius: var(--r4); padding: 5px 9px 4px; color: var(--orchid) } :lang(en) .b-ai { font: 800 11.5px/1 var(--display) }
.b-vnote { margin: 0; flex-basis: 100%; font-size: 13px; color: var(--dim) } .b-vnote:empty { display: none } :lang(ta) .b-vnote { font: 500 14px/1.5 var(--tamil) }

/* search */
.f-col { width: min(100%, 680px); padding: 16px 16px 40px; display: grid; gap: 14px; align-content: start }
.f-col input { width: 100%; background: var(--deep); border: 1px solid var(--fill); border-radius: var(--r3); padding: 16px 16px 13px; font: 800 22px/1.25 var(--tamil); -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.12), 0 0 34px -8px rgba(255, 212, 0, 0.5) } .f-col input:focus { outline: 0 }
.f-list { display: grid; border-top: 1px solid var(--line) }
.f-list a { padding: 12px 8px; text-decoration: none; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--line); min-height: 48px; border-radius: var(--r1) }
.f-list a:hover, .f-list a:focus-visible { background: var(--glass-2) }
.f-list b { font: 800 18px/1.35 var(--tamil); overflow-wrap: anywhere } .f-list span { font-size: 13px; color: var(--dim); white-space: nowrap }
.f-list b small { display: block; font: 500 13px/1.4 var(--body); color: var(--dim) }
.f-list p, .f-list .oops { margin: 0; padding: 12px 2px; color: var(--dim); border: 0; max-width: none; background: none }
.f-list a.echo { grid-template-columns: minmax(0, 1fr); gap: 2px } .f-list a.echo b { color: var(--stamp) }

/* a phone: tabs under the thumb. Explore, the rest of the site: on a wide screen a panel that drops under the bar, each page with
   one line on what it holds; on a phone a sheet over the tabs, the names alone. With the bar and the tabs it is all that blurs. */
.tabs { display: none }
.site-more { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur) }
@media (min-width: 761px) {
  .site-more { position: fixed; inset: var(--drop, 59px) 0 auto; z-index: 19; max-height: calc(100vh - var(--drop, 59px)); overflow: auto; overscroll-behavior: contain; background: var(--sheet-bg); border-bottom: 1px solid var(--edge-lit); box-shadow: 0 0 0 100vh rgba(3, 5, 14, 0.55); animation: drop 0.2s var(--ease) }
  .site-more .x { max-width: 1240px; margin: 0 auto; padding: 18px max(20px, env(safe-area-inset-left, 0px)) 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 4px 12px }
  .site-more .x a { display: grid; gap: 3px; align-content: start; padding: 12px 14px 11px; border: 1px solid transparent; border-radius: var(--r2); text-decoration: none; transition: background var(--t1), border-color var(--t1) }
  .site-more .x a:hover, .site-more .x a:focus-visible { background: var(--glass-2); border-color: var(--edge) }
  .site-more .x b { font: 800 calc(17px * var(--type-scale))/1.3 var(--tamil) } :lang(en) .site-more .x b { font-family: var(--display); line-height: 1.15; letter-spacing: -0.01em }
  .site-more .x small { font: 500 calc(13.5px * var(--type-scale))/1.5 var(--tamil); color: var(--dim) } :lang(en) .site-more .x small { font: 400 calc(13px * var(--type-scale))/1.45 var(--body) }
  .site-more .also { max-width: 1240px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)) 14px; display: flex; flex-wrap: wrap; gap: 0 8px }
  .site-more .also a { color: var(--dim); font: 600 13.5px/1.3 var(--body); padding: 10px 14px; text-decoration: none } .site-more .also a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--violet) }
}
@keyframes drop { from { transform: translateY(-10px); opacity: 0 } }
@keyframes sheet { from { transform: translateY(16px); opacity: 0 } }
@media (max-width: 760px) {
  :root { --gut: 14px }
  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)) }
  .tabs { display: flex; 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 { flex: 1 1 auto; min-width: 44px; border: 0; background: transparent; padding: 3px 3px 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); cursor: pointer; white-space: nowrap; overflow: hidden; position: relative }
  .tabs a[hidden] { display: none }
  .tabs [aria-current] { color: var(--fill-text) } .tabs button[aria-expanded=true] { color: var(--ink) } .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 */
  .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); 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)) 10px 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 .x { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px }
  .site-more .x a { min-height: 50px; display: flex; align-items: center; padding-top: 3px; text-decoration: none; border-bottom: 1px solid var(--line); overflow-wrap: anywhere } :lang(en) .site-more .x a { padding-top: 0 }
  .site-more .x b { font: 800 17px/1.25 var(--tamil) } :lang(en) .site-more .x b { font-family: var(--display) } .site-more .x small { display: none }
  .site-more .also { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 0 } .site-more .also a { min-height: 44px; display: inline-flex; align-items: center; color: var(--dim); font: 600 14px/1.3 var(--body); text-decoration: none }
  .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 }      /* search stays in the bar on a phone: the three tools sit closer */
  .ainote .l { gap: 0 20px } .ainote .l a { padding-block: 12px } .foot .legal a { padding-block: 13px; min-width: 44px }
  .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 }
  .alertbar { font-size: 14px }
  .stage, .banner, .alertbar { white-space: nowrap; padding-block: 8px 7px } .stage, .banner { display: flex; justify-content: center; gap: 0 6px } :is(.stage, .banner) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis } :is(.stage, .banner) > a { flex: none } .alertbar { overflow: hidden; text-overflow: ellipsis; cursor: pointer }
  .stage:not(.own) .long { display: none } .stage .short { display: inline } .stage.open, .alertbar.open { display: block; white-space: normal } .stage.open .long { display: inline } .stage.open .short { display: none }      /* one line each on a phone: a tap shows all of it */
  .poster .wrap { padding-top: var(--s3) } .day .acts > * { flex: 1 1 auto; text-align: center }
  .p-sky { display: flex; flex-direction: column } .p-sky .legend { order: 1; margin-top: 6px } .poster .en { margin-top: var(--s3) }      /* a phone: the question, then the people who answer it; under them what the page is */
  .p-sky .sky { margin-top: var(--s3) }
  .dayline .pl { height: 38px }
  .hear, .tg, .allbtn, .to, .dock button, .b-head button, .chips button, .w-more, .where button, .ck-all { min-height: 44px; display: inline-flex; align-items: center }
  .ph .txt > .tg { padding-block: 2px 0 }
  .desks button, .dmore { min-height: 44px; align-items: center } .chips button { align-items: center } .b-nav button { min-height: 48px } .feel.small button { min-height: 44px; align-items: center }
  .bar select, .fl-form select { min-height: 44px } .map { max-width: 340px } .credit summary { padding-block: 13px }
  .checked { padding-block: var(--s5) 0 } .ck-head { margin-bottom: var(--s2) } .ck q { font-size: 19px; -webkit-line-clamp: 3 }
  .heard, .floor { padding-block: var(--s6) var(--s4) } .bar { padding-block: var(--s6) var(--s1) }
  .vox:not(.all) .lines > li:nth-child(n+3) { display: none }
  .three { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-block: var(--s5) var(--s4); scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut) }
  .three > section { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; align-self: flex-start } .three > section:only-child { flex-basis: 100% }      /* each pane is its own height: the parties are not stretched to the map's */
  .pitch { padding: var(--s4); gap: var(--s2) } .pitch .big { font-size: 22px } .pitch .cta { padding: 3px 16px 0; min-height: 46px; display: inline-flex; align-items: center; font-size: 16px }
  .voices:not(.all) > .voice:nth-child(n+3) { display: none } .voices > .voice { padding: 14px }
  .feed > i[data-sk]:first-child { min-height: 380px }
  .refs li { grid-template-columns: 1fr; gap: 0 }
  .feel { gap: 5px } .feel button { padding: 8px 2px 6px; gap: 5px } .feel button b { font-size: 16px } .feel button span { font-size: 13px }
  .ph { min-height: 140px } .ph .fig .pic { min-height: 140px; width: 104px } .ph .fig .pic + .pic { display: none } .ph .txt { padding: 12px 14px }
  .ph .fig .pic.flag, .ph .fig .pic.none { width: 84px; height: 56px; margin-right: 10px; border-radius: var(--r1) }
  .ph .fig.flag { padding: 10px } .ph .fig.flag > img { width: 84px } .ph .fig.flag > img.sym { display: none }
  .ph .fig.shot { display: none }                      /* a frame from a video takes the room the topic's own words need on a phone */
  .topic.shut .ph .txt { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 1px 10px; padding: 9px 10px 10px 14px } .topic.shut .rank { font-size: 17px; line-height: 1.5 }
  .topic.shut .spark { display: none } .topic.shut .ph .txt > .tg { grid-column: 3; min-height: 44px; min-width: 44px; justify-content: center; padding-inline: 10px }
  .post, .you, .reach { padding: 14px } .post .ta { font-size: 17px } .by { padding-inline: 14px }
  .vids { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px } .vids > * { flex: 0 0 68%; scroll-snap-align: start }
  .morecards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); padding-bottom: var(--s6) } .card { padding: var(--s3) } .card strong { font-size: 19px } .card span { font-size: 13px }
  body.quiet .morecards { grid-template-columns: minmax(0, 1fr) }
  .wire { padding-inline: var(--s3) } .watched { padding: var(--s4); margin-top: var(--s6); gap: var(--s3) } .wt-list li:nth-child(n+4) { display: none }
  .askbox { padding-top: var(--s4) } .ak-row input { min-height: 50px; font-size: 17px; padding-inline: 14px } .ak-row button { min-height: 50px; padding-inline: 16px }
  .ak-ex { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut) } .ak-ex a { flex: 0 0 auto; max-width: 80vw; display: block; line-height: 38px; padding-block: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
}
@media (max-width: 420px) { .top .mark { font-size: 19px } .tabs a, .tabs button { font-size: 12.5px } } @media (max-width: 374px) { .tabs a, .tabs button { font-size: 12px; padding-inline: 2px } }      /* six tabs, each as wide as its word */
@media (max-width: 380px) { .top { gap: 6px } .tools { gap: 4px } .tool, .tool.join { padding-inline: 8px } .stage, .banner { font-size: 12px; padding-inline: 10px } }
@media (max-width: 339px) { #open-find { display: none } }
@media (max-width: 1079px) {                      /* one column: the wire comes before the topics, and shows its newest five until asked for more */
  .cols { display: flex; flex-direction: column; gap: var(--s5) } .cols > aside { display: contents } .feed { margin-bottom: var(--s5) }
  .w-list { max-height: none; overflow: visible } .w-list li:nth-child(n+6) { display: none } .wire.open .w-list li { display: grid } .w-more { display: block }
}
@media (max-width: 760px) { #fresh { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) } }
@media (max-width: 400px) { .feel.small { gap: 4px } .feel.small button { gap: 4px; padding-inline: 2px } .feel.small button span, .feel button span { font-size: 12px; overflow-wrap: normal } .feel.small button b { font-size: 14px } }
@media (hover: none) { .stand { transition: transform var(--t1) } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } .stand .glare { display: none } }

/* the parts in the owner's order (C6); a part put away is not drawn */
[data-off] { display: none !important } #side .wrap { padding: 0; max-width: none } #wire-block { padding-top: var(--s6) } #side #wire-block { padding-top: 0 } .standard .wrap { display: grid; gap: var(--s4); padding-block: var(--s6) var(--s2) } .standard .checked { padding: 0 }
.dblock { max-width: 1240px; margin: var(--s5) auto; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), 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 calc(19px * var(--type-scale))/1.3 var(--tamil) } .dblock p { margin: 0; overflow-wrap: anywhere; font: 500 calc(16px * var(--type-scale))/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 12px/1.45 var(--body); color: var(--dim) } :lang(ta) .aitag { font: 500 13px/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 }
/* promises and running stories: a row of panes each, the rest on their own pages */
.tz { padding-block: var(--s6) 0 } .tz-head { display: flex; gap: 4px var(--s5); align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s4) } .tz-head .sh { margin: 0 }
.tz-all { font: 700 15px/1.3 var(--tamil); color: var(--stamp); min-height: 44px; display: inline-flex; align-items: center }
.tz-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s3) }
.tz-row a { position: relative; display: grid; gap: 6px; align-content: start; height: 100%; padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px); text-decoration: none; background: var(--glass-1); border: 1px solid var(--edge); border-radius: var(--r3); box-shadow: var(--hi); transition: border-color var(--t1), background var(--t1) }
.tz-row a:hover { border-color: var(--edge-lit); background: var(--glass-2) } .tz-row a::before { content: ""; position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--lit, var(--edge-lit)); box-shadow: 0 0 12px var(--lit, transparent) }
.tz-row b { font: 800 calc(20px * var(--type-scale))/1.3 var(--tamil); text-wrap: balance } :lang(en) .tz-row b { font-family: var(--display); line-height: 1.15 } .tz-row :is(small, span) { font: 500 14px/1.5 var(--tamil); color: var(--dim) }
.tz-row em { font: 800 15px/1 var(--display); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums } .tz-row em.act { color: var(--fill-text) } .tz-row i { justify-self: start; font: 800 11.5px/1 var(--display); font-style: normal; background: var(--grad-signal); color: var(--on-fill); border-radius: var(--r4); padding: 5px 8px 4px }
@supports (color: color-mix(in srgb, red, blue)) { .tz-row a { --lit: color-mix(in srgb, var(--pc, #c9a0ff), #fff 28%) } }
@media (max-width: 760px) { .tz { padding-top: var(--s5) } .tz-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2) } .tz-row a { padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 4px) } .tz-row b { font-size: calc(18px * var(--type-scale)) } }

/* What lies below the first screens is laid out only as the reader nears it (the browser keeps each part's last height,
   so the page does not jump); the wire is left alone where it stands beside the topics on a wide screen */
main > #wire-block, main > .band, main > .heard, main > .floor, main > .standard, main > .more, main > .tz, main > [data-block="watched"], #ai-note, .foot { content-visibility: auto; contain-intrinsic-size: auto 640px }