* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:15px; line-height:1.6; } /* Grid and flex children default to min-width:auto, which lets a wide table push the whole page sideways. This is the rule the signed-in mockup was missing on all seventeen routes. */ .l-wrap > *, .l-sec > * { min-width:0; } .l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; } .l-sec { padding:38px 0; } .l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); } .l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2); margin:0; max-width:66ch; } /* A link in a lede had no colour and came out in the browser's own -webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on every page, so this was one page today and any page that adds a link to a lede tomorrow. Set here rather than on the page that happened to have one. */ .l-sub a { color:var(--gold-dk); text-underline-offset:2px; } /* A CENTRED SECTION, for pages whose head is centred too. Lives here rather than in a page's stylesheet because two clusters use it now — it was .ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without the rule, so its ledes rendered left under centred heads and looked like an oversight. margin-inline is not optional: .l-sub caps at 66ch, so centring the text without centring the box leaves a centred column sitting on the left of the wrap. Only the lede. Lists, tables and cards inside a .l-ctr stay left — centred body copy is ragged on both edges and a centred bulleted list stops forming a column to scan. */ .l-ctr .l-sub { text-align:center; margin-inline:auto; } /* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line readable and the grid or panel under it carries the width. Two of them stacked is not — they fill the left half of the band, the right half is empty, and under a full-width heading with a full-width panel below it the pair reads as a column that has been cut off rather than as air. Measured at 1280: 582px of a 1180px section, 49% of it, twice over. A track each, so both keep the SAME measure they had — this is a layout fix, not a wider line. Stretching one paragraph across 1180px would give 150 characters to a line that is already at 74. auto-fit rather than two fixed columns, because the home page has a pair inside a half-width column; there they stack again rather than becoming two forty-character ribbons. .l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px cap, so the track is what governs in two columns and the cap is what governs when it falls back to one — which is the width it has today. Overriding the cap to none looked tidier and gave a 736px tablet a 93-character line, which is the fault this rule exists to avoid. min(400px, 100%), NOT 400px. A minimum track wider than the container does not shrink — it overflows it, and at 320px the whole page scrolled sideways by 26px. min() caps the floor at whatever room there is. */ .l-lede { display:grid; gap:10px 44px; margin-bottom:20px; grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); } .l-mb { margin-bottom:20px; } .l-mt { margin-top:22px; } /* ── the header's two menus (language, account) ─────── */ .c-dd { position:relative; } .c-dd > summary { list-style:none; } .c-dd > summary::-webkit-details-marker { display:none; } /* The theme toggle's size and shape (ui .c-th-t), so the three read as one set: 34px under a mouse, 44px under a finger. */ .c-dd-b { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; } @media (pointer:coarse) { .c-dd-b { width:44px; height:44px; border-radius:12px; } } .c-dd-b:hover, .c-dd[open] > .c-dd-b { border-color:var(--gold); color:var(--gold-dk); } .c-dd-aa { font-size:13px; font-weight:700; letter-spacing:-.02em; } .c-dd-m { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:60; min-width:170px; padding:6px; border-radius:12px; border:1px solid var(--line); background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.14); display:flex; flex-direction:column; gap:2px; } .c-dd-r { left:auto; right:0; transform:none; } .c-dd-i { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; min-height:44px; box-sizing:border-box; font-size:14.5px; color:var(--ink); text-decoration:none; white-space:nowrap; } .c-dd-i i { font-style:normal; width:18px; text-align:center; color:var(--ink-3); } .c-dd-i:hover { background:var(--gold-bg); } .c-dd-i.c-on { color:var(--gold-dk); font-weight:650; } .c-dd-i.c-on i { color:var(--gold-dk); } .l-act-u { display:flex; align-items:center; gap:8px; } /* Theme, language, account and the menu at 320px ran the menu button to the screen's edge, into the 16px gutter every page keeps. */ @media (max-width:359px) { .l-act-u { gap:2px; } } /* The account in the drawer, only where it left the header. */ .c-drawer-acct { display:none; } @media (max-width:359px) { .c-top-r:has(.l-lang) .l-acct { display:none; } .c-drawer-acct { display:grid; gap:4px; padding:2px 0 12px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); } } /* Date and time are one question, asked once. Both values are short enough to sit side by side even at 360px, and pairing them stops the form reading as five separate chores. */ /* Date and time side by side, and STACKED on the narrowest phones. The two were always a 1fr 1fr grid; what changed is that the time trigger now reads 09:15 PM as four flex spans rather than one string, so its min-content is wider than half of a 288px card and the card grew to 311 — 7px of sideways scroll on the page the whole site links to. minmax(0,1fr) alone would have kept the row and clipped the readout instead. */ .l-dt { display:grid; grid-template-columns:1fr; gap:10px; } @media (min-width:360px) { .l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } /* Part of the hero's left column, not a band of its own. It anchors the bottom of that column so it finishes level with the form card. */ /* Inside the form card the list sits under the button, separated by a rule rather than by more whitespace — it is what pressing the button gets you, so it should read as part of the button's promise. */ .l-cardsub { margin:2px 0 14px; } .l-cardinc { margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); } .l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .l-inc li { display:flex; align-items:flex-start; gap:9px; } .l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); } .l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); } .l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .l-samp:hover { border-color:var(--gold); background:var(--gold-bg); } /* Between the two-column breakpoint and 1024 the left column runs 9px past the card, because the headline takes an extra line before the columns are wide enough. Four pixels off the padding and four off the stack gap close it without anyone being able to tell the difference. */ .l-samp > svg:first-child { flex:none; color:var(--gold-dk); } .l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; } .l-samp span { min-width:0; } .l-samp b { display:block; font-size:14.5px; font-weight:700; } .l-samp i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45; } .l-dt .c-pf { margin-bottom:0; } .l-dth { margin:6px 0 var(--space-3); } .l-mb2 { margin-bottom:16px; } .l-mark { display:block; width:34px; height:34px; flex:none; } .l-mark img { display:block; width:100%; height:100%; border-radius:19%; } /* proof row */ .l-proof { background:var(--gold-bg); border-block:1px solid var(--line); } .l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:4px 0; } .l-pf { padding:18px 4px 18px 18px; } /* Hairlines, not a colour change, do the separating — and only between cells that are actually side by side, which changes at each breakpoint. */ .l-pf:nth-child(2n) { border-left:1px solid var(--line); } .l-pf:nth-child(n+3) { border-top:1px solid var(--line); } .l-pf:first-child { padding-left:0; } .l-pf b { display:block; font-family:var(--font-serif); font-size:29px; line-height:1.05; font-weight:600; color:var(--gold-dk); letter-spacing:-.015em; } .l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px; color:var(--ink); } .l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; } @media (min-width:760px) { .l-pfr { grid-template-columns:repeat(4,1fr); } .l-pf:nth-child(n+3) { border-top:0; } .l-pf:nth-child(n+2) { border-left:1px solid var(--line); } } /* panchang */ .l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); } .l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); } .l-pc span { display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.13em; color:var(--ink-3); } .l-pc b { display:block; font-size:15px; margin-top:5px; } .l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); } .l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); } @media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } } @media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } } /* rashifal */ .l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); } .l-rs { display:flex; flex-direction:column; align-items:center; gap:1px; min-height:98px; justify-content:center; padding:12px 5px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); text-decoration:none; color:var(--ink); text-align:center; } .l-rs:hover { border-color:var(--gold); background:var(--gold-bg); } .l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; } .l-rs b { font-size:12.5px; font-weight:650; } .l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); } .l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); } @media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } } @media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } } /* tools */ .l-tools { display:grid; gap:12px; } .l-ti { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:var(--gold-dk); background:var(--gold-bg); margin-bottom:11px; } .l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; } .l-tl a { display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; font-weight:600; padding:0 14px; border-radius:var(--r-pill); color:var(--ink-2); border:1px solid var(--line); background:var(--surface); text-decoration:none; } .l-tl a:hover { color:var(--gold-dk); border-color:var(--gold); background:var(--gold-bg); } @media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } } /* The unknown-birth-time escape hatch belongs inside the time picker, where someone reaches it at the exact moment they realise they cannot answer. */ .l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); } .l-faq { margin-top:16px; } /* ── page head ────────────────────────────────────────── */ .s-crumb { padding-top:16px; } .s-top { padding:22px 0 6px; } .s-head { max-width:64ch; } /* With a form beside it the header is the full width and the two columns share it, so the reading underneath is not squeezed into a rail. */ .s-head-2 { max-width:none; display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:start; } .s-head-2 > * { min-width:0; } @media (min-width:960px) { .s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); } } .s-head-t { max-width:64ch; } .s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk); padding:5px 10px; border-radius:var(--r-pill); background:var(--gold-bg); margin-bottom:14px; } .s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px); line-height:1.08; letter-spacing:-.021em; font-weight:600; margin:0 0 13px; text-wrap:balance; } .s-h1 em { font-style:normal; color:var(--gold-dk); } .s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2); margin:0; max-width:58ch; } /* What the page gives back, named. See page_head() for why it is only on the fourteen with a full birth-details form. */ .s-ret { margin-top:18px; max-width:58ch; } .s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:5px; } .s-ret li { position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:var(--ink-2); } .s-ret li::before { content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--gold-solid); } @media (min-width:960px) { .s-head-fill { align-items:stretch; } .s-head-fill > .s-head-t { display:flex; flex-direction:column; } .s-head-fill .s-meta { margin-top:auto; padding-top:16px; } } /* The facts a dek would otherwise carry as adjectives. Mono, so they read as data rather than as more sentence. */ /* THE CENTRED HEAD, for pages that are not asking for a birth time. The default sits beside a form card and runs to 64ch down the left; a page whose top is a choice rather than a form leaves that whole right-hand column empty, and the text reads as the caption of something that failed to load. Two pages want this — the tarot hub, whose top half is six readings, and the astrologer pages, whose top half is a roster — so it lives here rather than being written twice. */ .s-head-c { max-width:700px; margin-inline:auto; text-align:center; } .s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700; border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; } .s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); } .s-head-c .s-dek { margin-inline:auto; max-width:62ch; } .s-head-c .s-meta { justify-content:center; } .s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); } .s-meta span { display:flex; align-items:center; gap:7px; } .s-meta span + span::before { content:''; width:3px; height:3px; flex:none; border-radius:50%; background:var(--line); margin-left:-11px; } /* A price the API could not give takes its chip, and the dot after it, away. */ .s-meta > span:has(> .c-px-gone) { display:none; } .s-meta > span:has(> .c-px-gone) + span::before { display:none; } /* ── related ──────────────────────────────────────────── */ .s-rel { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } } @media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } } .s-rel > * { min-width:0; } .s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; min-height:44px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); } .s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); } .s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); } .s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; } .s-rel-x b { font-size:14px; font-weight:650; } .s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; } /* ── closing CTA ──────────────────────────────────────── */ .s-cta { display:grid; gap:20px; align-items:center; padding:28px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background: radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%), var(--surface); } @media (min-width:820px) { .s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } } .s-cta > * { min-width:0; } .s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px); line-height:1.16; letter-spacing:-.018em; font-weight:600; margin:0 0 9px; text-wrap:balance; } .s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2); margin:0; max-width:52ch; } .s-cta-b { display:flex; flex-wrap:wrap; gap:10px; } .s-cta-b > * { flex:1 1 auto; } .s-cta-alt { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap; } .s-cta-alt svg { color:var(--gold-dk); } /* The banner: the page's line, then the astrologers and the reports. */ .s-cta.s-pro { display:block; position:relative; overflow:hidden; padding:36px 20px 26px; background:radial-gradient(120% 80% at 50% 0%, var(--gold-bg) 0%, transparent 70%), var(--cream); } @media (min-width:760px) { .s-cta.s-pro { padding:44px 40px 36px; } } /* The line art: faint, behind everything, never in the way. */ .s-pro-deco { position:absolute; top:0; pointer-events:none; display:block; background:var(--gold); opacity:.8; -webkit-mask:var(--m) no-repeat top / contain; mask:var(--m) no-repeat top / contain; } .s-pro-sun { left:0; width:340px; aspect-ratio:340 / 250; -webkit-mask-position:left top; mask-position:left top; } .s-pro-moon { right:0; width:404px; aspect-ratio:404 / 250; -webkit-mask-position:right top; mask-position:right top; } /* Smaller and fainter behind a narrower headline; on a phone, a corner of each, inside the edge. */ @media (max-width:1099px) { .s-pro-sun { width:250px; } .s-pro-moon { width:290px; } } @media (max-width:759px) { .s-pro-deco { opacity:.75; } .s-pro-sun { width:44%; left:-5%; } .s-pro-moon { width:48%; right:-4%; } /* The faces show at the edges, as in the mobile mock: the headline keeps to the middle. */ .s-cta.s-pro .s-pro-h h2 { max-width:78%; margin-inline:auto; } } .s-pro-h { position:relative; text-align:center; max-width:780px; margin:0 auto 28px; } .s-cta.s-pro .s-pro-h h2 { font-size:clamp(28px,4.6vw,46px); line-height:1.08; margin:0; } .s-cta.s-pro .s-pro-h p { margin:12px auto 0; max-width:60ch; font-size:17px; color:var(--ink-2); } .s-pro-go1 { margin-top:20px; display:inline-flex; gap:10px; align-items:center; padding:0 26px; min-height:52px; font-size:16px; box-shadow:0 8px 22px -12px rgba(90,55,10,.55); } .s-pro-g { position:relative; display:grid; gap:18px; grid-template-columns:minmax(0,1fr); } /* Side by side from 1000px: narrower, the covers shrink under the chat card and no amount of tightening makes the two end together. */ @media (min-width:1000px) { .s-pro-g { grid-template-columns:repeat(2,minmax(0,1fr)); } } .s-pro-c { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; padding:22px 20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:inherit; text-decoration:none; transition:border-color .15s; } @media (min-width:760px) { .s-pro-c { padding:26px 28px; } } .s-pro-c:hover { border-color:var(--gold-lt); } .s-pro-c h3 { font-family:var(--font-serif); font-size:clamp(24px,2.6vw,32px); font-weight:600; line-height:1.15; margin:6px 0 0; color:var(--ink); } .s-pro-t { font-size:15px; line-height:1.55; color:var(--ink-2); } .s-pro-p { font-size:15px; font-weight:600; color:var(--gold-dk); } .s-pro-fs { display:flex; text-decoration:none; } .s-pro-f { width:68px; height:68px; border-radius:50%; overflow:hidden; border:3px solid var(--surface); margin-left:-10px; background:var(--surface-2); box-shadow:0 0 0 1px var(--gold-lt); } .s-pro-f:first-child { margin-left:0; } /* Six across a phone's card: 44px at 320, 54 from 380. */ @media (max-width:759px) { .s-pro-f { width:44px; height:44px; margin-left:-10px; border-width:2px; } } @media (min-width:380px) and (max-width:759px) { .s-pro-f { width:54px; height:54px; margin-left:-8px; } } @media (min-width:760px) { .s-pro-f { width:76px; height:76px; margin-left:-12px; } } .s-pro-f img { width:100%; height:100%; object-fit:cover; display:block; } /* The four, as tiles with their subject's icon. */ .s-pro-rs { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:stretch; margin-top:4px; } @media (min-width:480px) { .s-pro-rs { gap:10px; } } .s-pro-r { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; border-radius:12px; background:var(--gold-bg); } .s-pro-r svg { flex:none; color:var(--gold-dk); } .s-pro-r > span { display:flex; flex-direction:column; min-width:0; } .s-pro-r b { font-size:15px; font-weight:650; color:var(--ink); } .s-pro-r i { font-style:normal; font-size:13.5px; color:var(--ink-2); } .s-pro-qs { display:flex; flex-direction:column; gap:8px; align-self:stretch; margin-top:4px; } .s-pro-qs > i { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .s-pro-q { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:12px; background:var(--gold-bg); color:var(--ink); font-size:14.5px; line-height:1.4; text-decoration:none; } .s-pro-q:hover { background:var(--gold-lt); } .s-pro-bs { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-self:stretch; margin-top:6px; } /* A price abroad is longer than ₹5 ("Chat from $0.10/min"), and at 320 the nowrap button ran past the screen. Wrap there instead. */ @media (max-width:374px) { .s-pro-bs .c-btn { white-space:normal; flex-wrap:wrap; text-align:center; } } @media (min-width:1000px) { .s-pro-bs { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* The rate sits beside its label, one line. */ .s-pro-bs .c-btn { display:flex; justify-content:center; align-items:center; gap:8px; white-space:nowrap; min-height:52px; font-size:16px; } .s-pro-bs .c-as-rate { font-weight:650; } .s-pro-fine { font-size:13px; color:var(--ink-3); } /* ── THE PHONE (Rohit's mobile mock, 28 Sep 2026) ── The chat card centred — faces, heading, the line under it — with the four as one-row tiles, icon beside the name; Chat and Call full width, one over the other. The reports card leads with its heading, then the covers, the words, and Explore full width. Everything a little closer. */ @media (max-width:759px) { .s-cta.s-pro { padding:24px 12px 14px; } .s-pro-h { margin-bottom:18px; } .s-cta.s-pro .s-pro-h p { margin-top:8px; font-size:16px; } .s-pro-go1 { margin-top:14px; width:100%; max-width:360px; justify-content:center; } .s-pro-g { gap:14px; } .s-pro-c { padding:18px 12px; gap:10px; border-radius:18px; } .s-pro-g > .s-pro-c:first-child { align-items:center; text-align:center; } .s-pro-g > .s-pro-c:first-child .s-pro-fs { justify-content:center; } .s-pro-c h3 { margin-top:2px; font-size:26px; } .s-pro-rs { gap:8px; } .s-pro-r { flex-direction:row; align-items:center; gap:7px; padding:9px 8px; text-align:left; } .s-pro-r svg { width:20px; height:20px; } .s-pro-r b { font-size:14px; white-space:nowrap; } .s-pro-r i { font-size:12.5px; line-height:1.3; } .s-pro-rs { gap:6px; } .s-pro-bs { gap:8px; margin-top:2px; } .s-pro-bs .c-btn { min-height:50px; } .s-pro-fine { text-align:center; } .s-pro-rep h3 { order:-1; margin:0; text-align:center; align-self:stretch; } .s-pro-rep .s-pro-cvs { gap:10px; } .s-pro-go { align-self:stretch; justify-content:center; margin-top:4px; } } /* The smallest phones: a 66px name column cannot hold "Astro Vaidya" beside an icon, so the icon goes above it there. */ @media (max-width:359px) { .s-pro-r { flex-direction:column; align-items:flex-start; gap:5px; } .s-pro-r b { white-space:normal; } } /* THE TWO CARDS END TOGETHER (Rohit, 28 Sep 2026: "the right card has empty space, shrink the left to match"). Side by side the covers set the height, and they shrink with the card: from 1280px the two already match to a few pixels; between 1000 and 1279 the chat card is tightened — smaller faces, slimmer tiles, closer rows — to fit under the covers. Both cards' buttons sit on the bottom edge, so what little is left over falls above them and the two rows of buttons line up. */ .s-pro-g > .s-pro-c:first-child .s-pro-bs { margin-top:auto; } @media (min-width:1000px) and (max-width:1279px) { .s-pro-g > .s-pro-c:first-child { gap:8px; } .s-pro-g > .s-pro-c:first-child .s-pro-f { width:58px; height:58px; margin-left:-10px; } .s-pro-g > .s-pro-c:first-child .s-pro-f:first-child { margin-left:0; } .s-pro-g > .s-pro-c:first-child h3 { margin-top:2px; font-size:clamp(22px,2.2vw,28px); } .s-pro-g > .s-pro-c:first-child .s-pro-t { font-size:14px; } .s-pro-rs { gap:8px; margin-top:2px; } .s-pro-r { padding:8px 12px; gap:10px; } .s-pro-r svg { width:22px; height:22px; } .s-pro-r b { font-size:14.5px; } .s-pro-r i { font-size:13px; } .s-pro-bs .c-btn { min-height:48px; } } /* The reports: the covers big, then the words, then the button. */ .s-pro-cvs { display:flex; gap:14px; align-items:flex-start; align-self:stretch; } .s-pro-cv { flex:1 1 0; max-width:190px; border-radius:6px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(60,30,5,.6); } .s-pro-cv img { width:100%; height:auto; display:block; } .s-pro-rep h3 { margin-top:10px; } .s-pro-go { margin-top:auto; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 24px; font-size:16px; } .s-pro-c .s-pro-p + .s-pro-go { margin-top:12px; } /* The four syllables of a nakshatra, one to a pada. This page's answer is the set, not the single letter — printing only yours hides that the rule picked one of four rather than invented it. */ .q-syl { padding:20px 22px; border:1px solid var(--gold-lt); border-radius:var(--r-card); background:var(--gold-bg); margin-bottom:14px; } .c-syls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 0; } .c-syl { padding:9px 6px 10px; border-radius:9px; text-align:center; border:1px solid var(--line); background:var(--surface); } .c-syl b { display:block; font-family:var(--font-serif); font-size:21px; font-weight:600; line-height:1.2; color:var(--ink-2); margin-top:3px; } /* The lit one is the pada's. --gold-bg is the card behind it, so the marked chip has to be the solid gold or it would vanish into its own background — the mistake this site has made five times. */ .c-syl-on { border-color:var(--gold); background:var(--gold-solid); } .c-syl-on b { color:var(--gold-solid-text); } .c-syl-on .h-f-l { color:var(--gold-solid-text); } @media (max-width:520px) { .c-syls { grid-template-columns:repeat(2,1fr); } } .q-mine td { background:var(--gold-bg); } .q-mine td b { color:var(--gold-dk); } .q-form .c-btn { margin-top:4px; } .q-err { margin-top:12px; padding:12px 14px; border-radius:11px; background:var(--bad-bg); color:var(--bad); font-size:13.5px; line-height:1.6; } .q-busy { margin-top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } .q-note { font-size:14px; line-height:1.65; color:var(--ink-2); max-width:74ch; margin:0 0 18px; } .ms-top { display:grid; gap:26px; grid-template-columns:1fr; align-items:center; padding:24px; border:1px solid var(--line); border-radius:22px; background:radial-gradient(120% 140% at 0% 0%, var(--gold-bg) 0%, var(--surface) 55%); } @media (min-width:860px) { .ms-top { grid-template-columns:340px minmax(0,1fr); padding:30px 34px; gap:36px; } } .ms-top .c-mw { justify-self:center; max-width:100%; } /* The centre's nakshatra line in sans, not mono: "Purva Ashadha · pada 4" ran past the inner circle. */ .ms-top .c-mw-t3 { font-family:var(--font-sans); } .ms-eye { font-size:12.5px; font-weight:650; letter-spacing:.04em; color:var(--gold-dk); } .ms-name { display:flex; align-items:center; gap:12px; margin:6px 0 4px; font-family:var(--font-serif); font-size:34px; line-height:1.15; color:var(--ink); } .ms-name small { font-size:.62em; color:var(--ink-3); font-weight:400; } .ms-name i { font-style:normal; font-family:var(--font-glyph); font-size:36px; color:var(--gold-dk); } .ms-line { margin:0 0 16px; font-size:15px; color:var(--ink-2); } .ms-fs { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:620px) { .ms-fs { grid-template-columns:repeat(3,minmax(0,1fr)); } } .ms-f { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); } .ms-f span { font-size:12px; color:var(--ink-3); } .ms-f b { font-size:15.5px; font-weight:650; color:var(--ink); } .ms-f i { font-style:normal; font-size:12.5px; color:var(--gold-dk); } .ms-nl { display:inline-block; margin-top:14px; font-weight:650; color:var(--gold-dk); } .bn-ak [data-bn-hi] { margin-left:14px; color:var(--gold-dk); } .c-syls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 10px; } .c-syl { display:grid; justify-items:center; gap:2px; padding:10px 6px; border:1px solid var(--line); border-radius:14px; background:var(--surface); } .c-syl span { font-size:12px; color:var(--ink-3); } .c-syl b { font-size:18px; color:var(--ink); } .c-syl i { font-style:normal; font-size:15px; color:var(--ink-2); } .c-syl-on { background:var(--gold-solid); border-color:var(--gold-solid); } .c-syl-on span, .c-syl-on b, .c-syl-on i { color:var(--gold-solid-text); } .bn-four { margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); } /* the names */ .bn-cols { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:760px) { .bn-cols { grid-template-columns:1fr 1fr; } } .bn-col { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .bn-g { margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dk); } .bn-col ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; } @media (min-width:1080px) { .bn-mine .bn-col ul { grid-template-columns:1fr 1fr; } } .bn-col li { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:baseline; } .bn-col li b { font-size:16px; color:var(--ink); } .bn-col li span { font-size:15px; color:var(--ink-2); } .bn-col li i { grid-column:1 / -1; font-style:normal; font-size:13px; color:var(--ink-3); } .bn-none { font-size:13.5px; color:var(--ink-3); } .bn-empty { margin:0; padding:14px 16px; border-radius:14px; background:var(--gold-bg); color:var(--gold-dk); font-size:15px; font-weight:600; } .bn-mine { margin-bottom:34px; } .bn-oh { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 14px; font-size:19px; color:var(--ink); } .bn-oh i { font-style:normal; font-size:13.5px; font-weight:400; color:var(--ink-3); } .bn-os { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:1000px) { .bn-os { grid-template-columns:repeat(3,1fr); } } .bn-o { padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .bn-o-h { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 10px; } .bn-o-h b { font-size:18px; color:var(--ink); } .bn-o-h span { font-size:12.5px; color:var(--ink-3); } .bn-cols-s { grid-template-columns:1fr 1fr !important; gap:10px; } .bn-cols-s .bn-col { padding:0; border:0; background:none; } .bn-cols-s li b { font-size:14.5px; } .bn-cols-s li span { font-size:13px; } .bn-cols-s li i { font-size:12px; } /* the namkaran */ .bn-cus { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:760px) { .bn-cus { grid-template-columns:1fr 1fr; } } @media (min-width:1080px) { .bn-cus { grid-template-columns:repeat(4,1fr); } } .bn-cus article { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .bn-cus span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--gold-bg); color:var(--gold-dk); font-weight:700; font-size:14px; } .bn-cus h3 { margin:12px 0 6px; font-size:17px; color:var(--ink); } .bn-cus p { margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); } /* the 108 */ .bn-note a { color:var(--gold-dk); font-weight:650; } .bn-tbl td.bn-t-on { background:var(--gold-solid); color:var(--gold-solid-text); font-weight:700; } .c-seo { display:grid; gap:16px; grid-template-columns:1fr; max-width:78ch; } @media (min-width:900px) { .c-seo { grid-template-columns:repeat(2,1fr); max-width:none; } } .c-seo-s h3 { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink); margin:0 0 7px; } .c-seo-s p { font-size:13.5px; line-height:1.7; color:var(--ink-2); margin:0; max-width:72ch; } #b-tob-h-1:checked ~ * label[for="b-tob-h-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-1:focus-visible ~ * label[for="b-tob-h-1"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-1:checked ~ * .c-tp-oh::after { content:"01"; opacity:1; } #b-tob-h-2:checked ~ * label[for="b-tob-h-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-2:focus-visible ~ * label[for="b-tob-h-2"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-2:checked ~ * .c-tp-oh::after { content:"02"; opacity:1; } #b-tob-h-3:checked ~ * label[for="b-tob-h-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-3:focus-visible ~ * label[for="b-tob-h-3"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-3:checked ~ * .c-tp-oh::after { content:"03"; opacity:1; } #b-tob-h-4:checked ~ * label[for="b-tob-h-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-4:focus-visible ~ * label[for="b-tob-h-4"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-4:checked ~ * .c-tp-oh::after { content:"04"; opacity:1; } #b-tob-h-5:checked ~ * label[for="b-tob-h-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-5:focus-visible ~ * label[for="b-tob-h-5"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-5:checked ~ * .c-tp-oh::after { content:"05"; opacity:1; } #b-tob-h-6:checked ~ * label[for="b-tob-h-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-6:focus-visible ~ * label[for="b-tob-h-6"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-6:checked ~ * .c-tp-oh::after { content:"06"; opacity:1; } #b-tob-h-7:checked ~ * label[for="b-tob-h-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-7:focus-visible ~ * label[for="b-tob-h-7"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-7:checked ~ * .c-tp-oh::after { content:"07"; opacity:1; } #b-tob-h-8:checked ~ * label[for="b-tob-h-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-8:focus-visible ~ * label[for="b-tob-h-8"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-8:checked ~ * .c-tp-oh::after { content:"08"; opacity:1; } #b-tob-h-9:checked ~ * label[for="b-tob-h-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-9:focus-visible ~ * label[for="b-tob-h-9"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-9:checked ~ * .c-tp-oh::after { content:"09"; opacity:1; } #b-tob-h-10:checked ~ * label[for="b-tob-h-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-10:focus-visible ~ * label[for="b-tob-h-10"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-10:checked ~ * .c-tp-oh::after { content:"10"; opacity:1; } #b-tob-h-11:checked ~ * label[for="b-tob-h-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-11:focus-visible ~ * label[for="b-tob-h-11"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-11:checked ~ * .c-tp-oh::after { content:"11"; opacity:1; } #b-tob-h-12:checked ~ * label[for="b-tob-h-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-12:focus-visible ~ * label[for="b-tob-h-12"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-12:checked ~ * .c-tp-oh::after { content:"12"; opacity:1; } #b-tob-t-0:checked ~ * label[for="b-tob-t-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-0:focus-visible ~ * label[for="b-tob-t-0"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-0:checked ~ * .c-tp-ot::after { content:"00"; opacity:1; } #b-tob-t-1:checked ~ * label[for="b-tob-t-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-1:focus-visible ~ * label[for="b-tob-t-1"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-1:checked ~ * .c-tp-ot::after { content:"01"; opacity:1; } #b-tob-t-2:checked ~ * label[for="b-tob-t-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-2:focus-visible ~ * label[for="b-tob-t-2"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-2:checked ~ * .c-tp-ot::after { content:"02"; opacity:1; } #b-tob-t-3:checked ~ * label[for="b-tob-t-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-3:focus-visible ~ * label[for="b-tob-t-3"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-3:checked ~ * .c-tp-ot::after { content:"03"; opacity:1; } #b-tob-t-4:checked ~ * label[for="b-tob-t-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-4:focus-visible ~ * label[for="b-tob-t-4"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-4:checked ~ * .c-tp-ot::after { content:"04"; opacity:1; } #b-tob-t-5:checked ~ * label[for="b-tob-t-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-5:focus-visible ~ * label[for="b-tob-t-5"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-5:checked ~ * .c-tp-ot::after { content:"05"; opacity:1; } #b-tob-t-6:checked ~ * label[for="b-tob-t-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-6:focus-visible ~ * label[for="b-tob-t-6"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-6:checked ~ * .c-tp-ot::after { content:"06"; opacity:1; } #b-tob-t-7:checked ~ * label[for="b-tob-t-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-7:focus-visible ~ * label[for="b-tob-t-7"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-7:checked ~ * .c-tp-ot::after { content:"07"; opacity:1; } #b-tob-t-8:checked ~ * label[for="b-tob-t-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-8:focus-visible ~ * label[for="b-tob-t-8"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-8:checked ~ * .c-tp-ot::after { content:"08"; opacity:1; } #b-tob-t-9:checked ~ * label[for="b-tob-t-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-9:focus-visible ~ * label[for="b-tob-t-9"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-9:checked ~ * .c-tp-ot::after { content:"09"; opacity:1; } #b-tob-t-10:checked ~ * label[for="b-tob-t-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-10:focus-visible ~ * label[for="b-tob-t-10"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-10:checked ~ * .c-tp-ot::after { content:"10"; opacity:1; } #b-tob-t-11:checked ~ * label[for="b-tob-t-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-11:focus-visible ~ * label[for="b-tob-t-11"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-11:checked ~ * .c-tp-ot::after { content:"11"; opacity:1; } #b-tob-t-12:checked ~ * label[for="b-tob-t-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-12:focus-visible ~ * label[for="b-tob-t-12"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-12:checked ~ * .c-tp-ot::after { content:"12"; opacity:1; } #b-tob-t-13:checked ~ * label[for="b-tob-t-13"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-13:focus-visible ~ * label[for="b-tob-t-13"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-13:checked ~ * .c-tp-ot::after { content:"13"; opacity:1; } #b-tob-t-14:checked ~ * label[for="b-tob-t-14"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-14:focus-visible ~ * label[for="b-tob-t-14"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-14:checked ~ * .c-tp-ot::after { content:"14"; opacity:1; } #b-tob-t-15:checked ~ * label[for="b-tob-t-15"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-15:focus-visible ~ * label[for="b-tob-t-15"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-15:checked ~ * .c-tp-ot::after { content:"15"; opacity:1; } #b-tob-t-16:checked ~ * label[for="b-tob-t-16"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-16:focus-visible ~ * label[for="b-tob-t-16"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-16:checked ~ * .c-tp-ot::after { content:"16"; opacity:1; } #b-tob-t-17:checked ~ * label[for="b-tob-t-17"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-17:focus-visible ~ * label[for="b-tob-t-17"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-17:checked ~ * .c-tp-ot::after { content:"17"; opacity:1; } #b-tob-t-18:checked ~ * label[for="b-tob-t-18"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-18:focus-visible ~ * label[for="b-tob-t-18"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-18:checked ~ * .c-tp-ot::after { content:"18"; opacity:1; } #b-tob-t-19:checked ~ * label[for="b-tob-t-19"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-19:focus-visible ~ * label[for="b-tob-t-19"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-19:checked ~ * .c-tp-ot::after { content:"19"; opacity:1; } #b-tob-t-20:checked ~ * label[for="b-tob-t-20"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-20:focus-visible ~ * label[for="b-tob-t-20"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-20:checked ~ * .c-tp-ot::after { content:"20"; opacity:1; } #b-tob-t-21:checked ~ * label[for="b-tob-t-21"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-21:focus-visible ~ * label[for="b-tob-t-21"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-21:checked ~ * .c-tp-ot::after { content:"21"; opacity:1; } #b-tob-t-22:checked ~ * label[for="b-tob-t-22"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-22:focus-visible ~ * label[for="b-tob-t-22"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-22:checked ~ * .c-tp-ot::after { content:"22"; opacity:1; } #b-tob-t-23:checked ~ * label[for="b-tob-t-23"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-23:focus-visible ~ * label[for="b-tob-t-23"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-23:checked ~ * .c-tp-ot::after { content:"23"; opacity:1; } #b-tob-t-24:checked ~ * label[for="b-tob-t-24"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-24:focus-visible ~ * label[for="b-tob-t-24"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-24:checked ~ * .c-tp-ot::after { content:"24"; opacity:1; } #b-tob-t-25:checked ~ * label[for="b-tob-t-25"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-25:focus-visible ~ * label[for="b-tob-t-25"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-25:checked ~ * .c-tp-ot::after { content:"25"; opacity:1; } #b-tob-t-26:checked ~ * label[for="b-tob-t-26"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-26:focus-visible ~ * label[for="b-tob-t-26"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-26:checked ~ * .c-tp-ot::after { content:"26"; opacity:1; } #b-tob-t-27:checked ~ * label[for="b-tob-t-27"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-27:focus-visible ~ * label[for="b-tob-t-27"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-27:checked ~ * .c-tp-ot::after { content:"27"; opacity:1; } #b-tob-t-28:checked ~ * label[for="b-tob-t-28"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-28:focus-visible ~ * label[for="b-tob-t-28"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-28:checked ~ * .c-tp-ot::after { content:"28"; opacity:1; } #b-tob-t-29:checked ~ * label[for="b-tob-t-29"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-29:focus-visible ~ * label[for="b-tob-t-29"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-29:checked ~ * .c-tp-ot::after { content:"29"; opacity:1; } #b-tob-t-30:checked ~ * label[for="b-tob-t-30"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-30:focus-visible ~ * label[for="b-tob-t-30"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-30:checked ~ * .c-tp-ot::after { content:"30"; opacity:1; } #b-tob-t-31:checked ~ * label[for="b-tob-t-31"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-31:focus-visible ~ * label[for="b-tob-t-31"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-31:checked ~ * .c-tp-ot::after { content:"31"; opacity:1; } #b-tob-t-32:checked ~ * label[for="b-tob-t-32"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-32:focus-visible ~ * label[for="b-tob-t-32"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-32:checked ~ * .c-tp-ot::after { content:"32"; opacity:1; } #b-tob-t-33:checked ~ * label[for="b-tob-t-33"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-33:focus-visible ~ * label[for="b-tob-t-33"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-33:checked ~ * .c-tp-ot::after { content:"33"; opacity:1; } #b-tob-t-34:checked ~ * label[for="b-tob-t-34"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-34:focus-visible ~ * label[for="b-tob-t-34"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-34:checked ~ * .c-tp-ot::after { content:"34"; opacity:1; } #b-tob-t-35:checked ~ * label[for="b-tob-t-35"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-35:focus-visible ~ * label[for="b-tob-t-35"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-35:checked ~ * .c-tp-ot::after { content:"35"; opacity:1; } #b-tob-t-36:checked ~ * label[for="b-tob-t-36"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-36:focus-visible ~ * label[for="b-tob-t-36"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-36:checked ~ * .c-tp-ot::after { content:"36"; opacity:1; } #b-tob-t-37:checked ~ * label[for="b-tob-t-37"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-37:focus-visible ~ * label[for="b-tob-t-37"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-37:checked ~ * .c-tp-ot::after { content:"37"; opacity:1; } #b-tob-t-38:checked ~ * label[for="b-tob-t-38"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-38:focus-visible ~ * label[for="b-tob-t-38"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-38:checked ~ * .c-tp-ot::after { content:"38"; opacity:1; } #b-tob-t-39:checked ~ * label[for="b-tob-t-39"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-39:focus-visible ~ * label[for="b-tob-t-39"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-39:checked ~ * .c-tp-ot::after { content:"39"; opacity:1; } #b-tob-t-40:checked ~ * label[for="b-tob-t-40"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-40:focus-visible ~ * label[for="b-tob-t-40"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-40:checked ~ * .c-tp-ot::after { content:"40"; opacity:1; } #b-tob-t-41:checked ~ * label[for="b-tob-t-41"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-41:focus-visible ~ * label[for="b-tob-t-41"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-41:checked ~ * .c-tp-ot::after { content:"41"; opacity:1; } #b-tob-t-42:checked ~ * label[for="b-tob-t-42"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-42:focus-visible ~ * label[for="b-tob-t-42"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-42:checked ~ * .c-tp-ot::after { content:"42"; opacity:1; } #b-tob-t-43:checked ~ * label[for="b-tob-t-43"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-43:focus-visible ~ * label[for="b-tob-t-43"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-43:checked ~ * .c-tp-ot::after { content:"43"; opacity:1; } #b-tob-t-44:checked ~ * label[for="b-tob-t-44"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-44:focus-visible ~ * label[for="b-tob-t-44"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-44:checked ~ * .c-tp-ot::after { content:"44"; opacity:1; } #b-tob-t-45:checked ~ * label[for="b-tob-t-45"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-45:focus-visible ~ * label[for="b-tob-t-45"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-45:checked ~ * .c-tp-ot::after { content:"45"; opacity:1; } #b-tob-t-46:checked ~ * label[for="b-tob-t-46"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-46:focus-visible ~ * label[for="b-tob-t-46"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-46:checked ~ * .c-tp-ot::after { content:"46"; opacity:1; } #b-tob-t-47:checked ~ * label[for="b-tob-t-47"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-47:focus-visible ~ * label[for="b-tob-t-47"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-47:checked ~ * .c-tp-ot::after { content:"47"; opacity:1; } #b-tob-t-48:checked ~ * label[for="b-tob-t-48"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-48:focus-visible ~ * label[for="b-tob-t-48"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-48:checked ~ * .c-tp-ot::after { content:"48"; opacity:1; } #b-tob-t-49:checked ~ * label[for="b-tob-t-49"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-49:focus-visible ~ * label[for="b-tob-t-49"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-49:checked ~ * .c-tp-ot::after { content:"49"; opacity:1; } #b-tob-t-50:checked ~ * label[for="b-tob-t-50"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-50:focus-visible ~ * label[for="b-tob-t-50"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-50:checked ~ * .c-tp-ot::after { content:"50"; opacity:1; } #b-tob-t-51:checked ~ * label[for="b-tob-t-51"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-51:focus-visible ~ * label[for="b-tob-t-51"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-51:checked ~ * .c-tp-ot::after { content:"51"; opacity:1; } #b-tob-t-52:checked ~ * label[for="b-tob-t-52"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-52:focus-visible ~ * label[for="b-tob-t-52"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-52:checked ~ * .c-tp-ot::after { content:"52"; opacity:1; } #b-tob-t-53:checked ~ * label[for="b-tob-t-53"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-53:focus-visible ~ * label[for="b-tob-t-53"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-53:checked ~ * .c-tp-ot::after { content:"53"; opacity:1; } #b-tob-t-54:checked ~ * label[for="b-tob-t-54"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-54:focus-visible ~ * label[for="b-tob-t-54"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-54:checked ~ * .c-tp-ot::after { content:"54"; opacity:1; } #b-tob-t-55:checked ~ * label[for="b-tob-t-55"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-55:focus-visible ~ * label[for="b-tob-t-55"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-55:checked ~ * .c-tp-ot::after { content:"55"; opacity:1; } #b-tob-t-56:checked ~ * label[for="b-tob-t-56"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-56:focus-visible ~ * label[for="b-tob-t-56"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-56:checked ~ * .c-tp-ot::after { content:"56"; opacity:1; } #b-tob-t-57:checked ~ * label[for="b-tob-t-57"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-57:focus-visible ~ * label[for="b-tob-t-57"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-57:checked ~ * .c-tp-ot::after { content:"57"; opacity:1; } #b-tob-t-58:checked ~ * label[for="b-tob-t-58"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-58:focus-visible ~ * label[for="b-tob-t-58"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-58:checked ~ * .c-tp-ot::after { content:"58"; opacity:1; } #b-tob-t-59:checked ~ * label[for="b-tob-t-59"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-59:focus-visible ~ * label[for="b-tob-t-59"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-59:checked ~ * .c-tp-ot::after { content:"59"; opacity:1; } #b-tob-t-0:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-1:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-2:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-3:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-4:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-5:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-6:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-7:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-8:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-9:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-10:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-11:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-12:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-13:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-14:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-15:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-16:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-17:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-18:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-19:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-20:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-21:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-22:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-23:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-24:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-25:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-26:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-27:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-28:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-29:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-30:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-31:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-32:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-33:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-34:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-35:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-36:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-37:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-38:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-39:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-40:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-41:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-42:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-43:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-44:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-45:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-46:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-47:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-48:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-49:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-50:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-51:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-52:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-53:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-54:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-55:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-56:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-57:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-58:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-59:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-1:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-2:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-3:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-4:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-6:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-7:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-8:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-9:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-11:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-12:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-13:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-14:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-16:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-17:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-18:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-19:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-21:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-22:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-23:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-24:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-26:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-27:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-28:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-29:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-31:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-32:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-33:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-34:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-36:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-37:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-38:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-39:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-41:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-42:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-43:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-44:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-46:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-47:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-48:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-49:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-51:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-52:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-53:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-54:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-56:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-57:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-58:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-59:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-m-am:checked ~ * label[for="b-tob-m-am"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-m-am:focus-visible ~ * label[for="b-tob-m-am"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-m-am:checked ~ * .c-tp-om::after { content:"AM"; opacity:1; } #b-tob-m-pm:checked ~ * label[for="b-tob-m-pm"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-m-pm:focus-visible ~ * label[for="b-tob-m-pm"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-m-pm:checked ~ * .c-tp-om::after { content:"PM"; opacity:1; } /* The clock's face is spans the component's :checked rules write into, so it cannot simply be replaced with a word — it is covered instead, and the hint drawn in its place. */ .b-clock .c-pf-t[data-empty] .c-pf-face { display:none; } .b-clock .c-pf-t[data-empty]::before { content:'Choose a time'; flex:1; min-width:0; font-size:var(--text-md); color:var(--ph); } /* ── the clock in two turns ── One dial carrying twelve hours on the outside and twelve five-minute marks inside it is two questions asked at once, and the inner ring is the smaller target of the two. So it asks one at a time: hours, and the moment one is chosen the same dial turns over to minutes. The readout above is the way back — tap the hour to change the hour, the minutes to return to them, which is the pattern every phone clock uses. Nothing is removed, only hidden: all sixty minute radios and all twelve hour radios are still in the group, so a keyboard arrows through the whole range whichever face is showing. */ .b-clock[data-step="hour"] .c-ck-m, .b-clock[data-step="hour"] .c-ck-fr { display:none; } .b-clock[data-step="min"] .c-ck-h { display:none; } /* THE MINUTES MOVE OUT TO THE RING THE HOURS LEFT. They are drawn at radius 88 because they used to share the face with the hours at 134 — one face at a time, that leaves the numbers huddled in the middle of a 320px circle with a wide dead band round them. `--r` is set inline per label, so this has to shout; the component's own responsive rules override it the same way. */ /* A SMALLER FACE. 320px was sized for two rings — hours outside, minutes inside. Showing one at a time leaves a lot of circle around a dozen numbers, so the whole dial comes in: the ring keeps the same margin from the edge it always had (chip half-width plus four), and the marks stay 55px apart, which is well clear of a fingertip. `--r` is inline per label and the component's own small-screen rules shout, so these do too. */ .b-clock .c-ck-face { width:264px; height:264px; } .b-clock .c-ck-h { --r:106px !important; } .b-clock[data-step="min"] .c-ck-m { --r:106px !important; } .b-clock .c-ck-face { --hand-r:106px; } /* A HAND, because the marks are every fifth minute and the answer is any of sixty. Pick 13 and the nearest label lights up — 10 — which says the wrong number unless something points at where 13 actually is. */ .b-clock .c-ck-face::before { content:''; position:absolute; left:50%; top:50%; width:2px; margin-left:-1px; background:var(--gold-solid); border-radius:2px; opacity:.85; transform-origin:50% 0; transform:rotate(calc(var(--hand,0deg) + 180deg)); height:var(--hand-r,106px); pointer-events:none; } .b-clock:not([data-hand]) .c-ck-face::before { display:none; } .b-clock .c-ck-face { transition:transform .2s ease, opacity .2s ease; } .b-clock[data-turn] .c-ck-face { transform:translateX(-18px); opacity:0; } @media (prefers-reduced-motion:reduce) { .b-clock .c-ck-face { transition:none; } .b-clock[data-turn] .c-ck-face { transform:none; opacity:1; } } /* The readout is the tab bar, so it has to look like one. */ .b-clock .c-tp-out .c-tp-oh, .b-clock .c-tp-out .c-tp-ot { cursor:pointer; border-radius:8px; padding:0 4px; } .b-clock .c-tp-out .c-tp-oh:focus-visible, .b-clock .c-tp-out .c-tp-ot:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .b-clock[data-step="hour"] .c-tp-out .c-tp-ot, .b-clock[data-step="min"] .c-tp-out .c-tp-oh { opacity:.45; } /* The wrapper t() puts round each Hindi string: no box, the parent's type. */ :root .l-hi { display:contents; font:inherit; color:inherit; } /* The same Hindi rules as the signed-in pages (CSS above): matras need the taller line; under 15px goes up by 2, never past 15; no tracking, caps or slant, which pull a conjunct apart. */ :root[lang^="hi"] body { line-height:1.6; } /* HEADINGS TOO. The display headings are set at ~1.1 for Latin, and in Devanagari that let one line's lower matra meet the next line's upper one: the ू of लो शू ग्रिड ran into the ी of "आपकी जन्म तिथि से". */ :root[lang^="hi"] :is(h1, h2, h3) { line-height:1.32; } /* NO TRACKING ANYWHERE ON A HINDI PAGE. Eyebrows, field labels, the "example" tag and section heads are letter-spaced for Latin capitals; in Devanagari the spacing splits a word at its conjuncts ("मु फ़्त"). One rule, and it wins, rather than a list that misses the next label. */ :root[lang^="hi"] body * { letter-spacing:0 !important; } :root[lang^="hi"] .l-hi { font-size:max(1em, min(calc(1em + 2px), 15px)); letter-spacing:0; text-transform:none; font-style:normal; } :root[lang^="hi"] .l-hi .l-hi { font-size:1em; } /* AND NOT MONO. The small labels are set in the mono face for English; Devanagari in it reads as a typewriter. On a Hindi page the mono face is the sans. */ :root[lang^="hi"] { --font-mono:var(--font-sans); } /* AND A DEVANAGARI FACE IN THE SERIF. The serif stack names Latin faces only, so a Hindi heading fell through to whatever the system had: on a Mac that is Devanagari MT, which sets पें apart from the next letter ("पें टाकल्स", /hi/tarot/ card names). The Latin in a heading keeps the serif; the Devanagari gets the face the body text already uses. */ :root[lang^="hi"] { --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia, "Kohinoor Devanagari","Nirmala UI","Noto Serif Devanagari","Noto Sans Devanagari",serif; } /* THE SHARED PARTS THAT CARRY HINDI WITHOUT t(): the header and drawer (common.chrome writes them in Hindi), the pickers, the report cards, the astrologer rate, the notes and the footer. The .l-hi rule above never reached them, so a /hi/ page had 9.5-13.5px Devanagari and tracked capitals in its menu (review, 28 Sep 2026: measured against the English twin, class by class). Each is its English size +2, never past 15. */ :root[lang^="hi"] .c-nav-i, :root[lang^="hi"] .c-nav-px b, :root[lang^="hi"] .c-dd-i, :root[lang^="hi"] .c-pf-done, :root[lang^="hi"] .c-unknown, :root[lang^="hi"] .c-btn .c-as-rate, :root[lang^="hi"] .rv-btn, :root[lang^="hi"] .c-nav-mi, :root[lang^="hi"] .c-nav-mm, :root[lang^="hi"] .rv-c-d { font-size:15px; } :root[lang^="hi"] .c-nav-px i, :root[lang^="hi"] .c-note, :root[lang^="hi"] .c-as-rate { font-size:14.5px; } :root[lang^="hi"] .rv-c-m, :root[lang^="hi"] .p-hb-k, :root[lang^="hi"] .p-hb-k > * { font-size:14px; } :root[lang^="hi"] .c-drawer-h > *, :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-dp-wd, :root[lang^="hi"] .c-nav-mh, :root[lang^="hi"] .c-field label { letter-spacing:0; text-transform:none; font-family:var(--font-sans); } :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-drawer-h > * { font-size:13px; } :root[lang^="hi"] .c-dp-wd { font-size:11px; } :root[lang^="hi"] .c-nav-mh { font-size:11.5px; }