/* falakbin.ir: the public pages. Its own sheet, nothing shared with the panel.
   Dark (the night sky in deep teal) is the default; [data-theme="light"] on
   <html> is the reader's own choice, kept in localStorage. Orange is spent
   sparingly: one main action per section and the "live" mark. */
@font-face {
    font-family: "Vazirmatn";
    src: url("/a/vazirmatn.f7f9cf1a.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
    color-scheme: dark;
    /* A page's own picture is never taller than this: a tall one keeps its shape at its own width (width: auto), centred. */
    --pic-h: min(620px, 72vh);
    --bg: #03181c;
    --bg-2: #062429;
    --surface: #0a2e34;
    --surface-2: #0f3b42;
    --line: #1a4e56;
    --line-soft: #12424a;
    --fg: #e7f5f3;
    --muted: #93b8b6;
    --teal: #22b3ad;
    --teal-hi: #3fcac3;
    --teal-ink: #6fe0d8;
    --teal-soft: #0e3f45;
    --teal-deep: #04353d;
    --on-teal: #03181c;
    --orange: #ff8c1a;
    --orange-hi: #ffa040;
    --orange-ink: #ffb054;
    --orange-soft: #020e11; /* teal all but black, not darkened orange (which reads brown): the orange edge carries the accent */
    --on-orange: #1a0d00;
    --ok: #3ccf91;
    --warn: #ffc247;
    --bad: #ff6b5d;
    --glass: rgba(3, 24, 28, .94);
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .28);
    --glow: 0 0 0 1px rgba(34, 179, 173, .35), 0 10px 32px rgba(34, 179, 173, .14);
    /* Charts (validated with the dataviz checks on --surface, 2026-10-02): six
       series hues in this fixed order, never cycled; a one-hue teal ramp for
       amounts, low to high. Text never wears these; it stays in --fg/--muted. */
    --c1: #14a39d; --c2: #e0700a; --c3: #3987e5; --c4: #c98500; --c5: #d55181; --c6: #9085e9;
    --seq-1: #1a6f72; --seq-2: #1f938f; --seq-3: #33b8b1; --seq-4: #78dbd3; --seq-5: #c0f5ef;
    /* Names the older pages use. */
    --accent: var(--teal-ink);
    --accent-soft: var(--teal-soft);
    --gold: var(--orange-hi);
    --radius: 16px;
    --radius-sm: 10px;
    --frame: 1180px;
    /* The column beside inner pages, and the shell: header, location bar, page with its column, footer.
       On a big screen both grow, so a 1920 window is not two empty margins. */
    --side-w: 300px;
    --shell: calc(var(--frame) + var(--side-w) + 16px);
    --top-h: 68px;
    --tab-h: 62px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1700px) { :root { --frame: 1320px; --side-w: 340px; } }
@media (min-width: 1900px) { :root { --frame: 1460px; --side-w: 360px; } }
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f1e6;
    --bg-2: #efe7d6;
    --surface: #fffcf5;
    --surface-2: #ebe3d0;
    --line: #ddd2bc;
    --line-soft: #e9e0cd;
    --fg: #10262a;
    --muted: #5c5a4e;
    --teal: #0a5a66;
    --teal-hi: #0c6d7b;
    --teal-ink: #0a5a66;
    --teal-soft: #e6e7da;
    --on-teal: #ffffff;
    --orange: #ff8c1a;
    --orange-hi: #ff9d3a;
    --orange-ink: #9a4807;
    --orange-soft: #fff0df;
    --ok: #147a5b;
    --warn: #9a6208;
    --bad: #a8362f;
    --glass: rgba(246, 241, 230, .95);
    --shadow: 0 1px 2px rgba(4, 53, 61, .06), 0 6px 20px rgba(4, 53, 61, .06);
    --glow: 0 0 0 1px rgba(10, 90, 102, .25), 0 10px 28px rgba(10, 90, 102, .1);
    --c1: #008e8a; --c2: #e0700a; --c3: #2a78d6; --c4: #b88200; --c5: #d4507f; --c6: #4a3aa7;
    --seq-1: #7cbdbd; --seq-2: #4fa3a1; --seq-3: #1f8584; --seq-4: #0b5d68; --seq-5: #04353d;
    --gold: var(--orange-ink);
}

/* ---- Base ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: calc(var(--top-h) + 12px); }
body {
    margin: 0;
    color: var(--fg);
    font: 16px/1.9 "Vazirmatn", Tahoma, sans-serif;
    min-height: 100vh;
    position: relative;
}
/* A faint field of stars and a teal glow at the top: only at night. One small
   SVG tile that scrolls with the page; a fixed layer of gradients stalled painting. */
html {
    background-image:
        radial-gradient(1200px 520px at 70% -120px, rgba(34, 179, 173, .16), transparent 70%),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' fill='%23fff'><circle cx='170' cy='81' r='1.1' fill-opacity='0.25'/><circle cx='41' cy='278' r='0.7' fill-opacity='0.7'/><circle cx='34' cy='264' r='0.5' fill-opacity='0.25'/><circle cx='226' cy='40' r='0.5' fill-opacity='0.7'/><circle cx='221' cy='427' r='0.5' fill-opacity='0.35'/><circle cx='327' cy='302' r='0.5' fill-opacity='0.7'/><circle cx='304' cy='29' r='0.6' fill-opacity='0.25'/><circle cx='289' cy='72' r='0.8' fill-opacity='0.35'/><circle cx='281' cy='296' r='1' fill-opacity='0.35'/><circle cx='57' cy='296' r='0.6' fill-opacity='0.45'/><circle cx='54' cy='369' r='1' fill-opacity='0.25'/><circle cx='321' cy='258' r='1' fill-opacity='0.55'/><circle cx='402' cy='242' r='0.8' fill-opacity='0.45'/><circle cx='157' cy='411' r='1.1' fill-opacity='0.35'/><circle cx='46' cy='158' r='0.8' fill-opacity='0.45'/><circle cx='377' cy='151' r='0.5' fill-opacity='0.25'/><circle cx='266' cy='88' r='0.7' fill-opacity='0.35'/><circle cx='482' cy='220' r='1.1' fill-opacity='0.25'/><circle cx='395' cy='297' r='0.7' fill-opacity='0.45'/><circle cx='360' cy='308' r='1' fill-opacity='0.55'/><circle cx='39' cy='52' r='0.7' fill-opacity='0.55'/><circle cx='361' cy='37' r='1.1' fill-opacity='0.45'/><circle cx='335' cy='512' r='0.8' fill-opacity='0.45'/><circle cx='371' cy='458' r='0.7' fill-opacity='0.25'/><circle cx='486' cy='186' r='1' fill-opacity='0.25'/><circle cx='257' cy='116' r='0.7' fill-opacity='0.35'/><circle cx='300' cy='120' r='1' fill='%23ffdcb4' fill-opacity='.6'/></svg>");
    background-repeat: no-repeat, repeat;
    background-size: 100% 900px, 520px 520px;
}
:root[data-theme="light"] { background-image: none; }
a { color: var(--accent); }
a:hover { color: var(--teal-hi); }
h1, h2, h3 { line-height: 1.5; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(255, 140, 26, .35); }
.flk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flk-skip { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 50; background: var(--orange); color: var(--on-orange); padding: 6px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.flk-skip:focus { top: 8px; }
.flk-i { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.25em; }
.flk-mark { width: 36px; height: 36px; flex: none; }
.flk-muted { color: var(--muted); font-size: .9em; }
.flk-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Frame: header, menu, phone bar, footer -------------------------- */
.flk-top {
    position: sticky; top: 0; z-index: 30; height: var(--top-h);
    background: var(--glass);
    border-bottom: 1px solid var(--line-soft);
}
.flk-top-in { max-width: var(--shell); height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 22px; }
/* The brand stands apart from the menu. */
.flk-top .flk-brand { padding-inline-end: 22px; border-inline-end: 1px solid var(--line-soft); height: 40px; }
@media (max-width: 899px) { .flk-top .flk-brand { border: 0; padding: 0; } }
/* Between the phone menu and a wide screen the full menu only just fits: tighter spacing. */
@media (min-width: 900px) and (max-width: 1199px) {
    .flk-top-in { gap: 10px; }
    .flk-top .flk-brand { padding-inline-end: 10px; }
    .flk-top .flk-nav-label, .flk-top .flk-nav-link { padding-inline: 7px; }
    .flk-top-tools { gap: 0; }
}
/* Narrower still, the brand is its mark alone. */
@media (min-width: 900px) and (max-width: 1023px) { .flk-top .flk-brand-text { display: none; } }
.flk-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; flex: none; }
.flk-brand:hover { color: var(--fg); }
.flk-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.flk-brand-text b { font-size: 1.38rem; font-weight: 850; letter-spacing: -.01em; }
.flk-brand-text small { font-size: .7rem; color: var(--muted); }
.flk-brand .flk-mark { width: 46px; height: 46px; transition: transform .6s var(--ease); }
.flk-brand:hover .flk-mark { transform: rotate(-14deg) scale(1.05); }
/* The address under the name: the brand as a reader types it. */
.flk-brand-host { font-size: .64rem !important; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-ink) !important; opacity: .85; line-height: 1.4; }
.flk-brand-lg .flk-mark { width: 54px; height: 54px; }
.flk-brand-lg .flk-brand-text b { font-size: 1.5rem !important; }
.flk-foot-tag { color: var(--fg); font-weight: 700; margin: 10px 0 0 !important; }
.flk-nav { display: flex; align-items: center; gap: 2px; }
.flk-nav-group { position: relative; }
.flk-nav-label, .flk-nav-link {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 10px;
    font: inherit; font-size: .93rem; font-weight: 600; color: var(--fg); text-decoration: none;
    background: none; border: 0; cursor: pointer;
}
.flk-nav-label .flk-i { width: 1em; height: 1em; opacity: .7; transition: transform .2s var(--ease); }
.flk-nav-label:hover, .flk-nav-link:hover, .flk-nav-group:focus-within .flk-nav-label { background: var(--teal-soft); color: var(--fg); }
.flk-nav-on { color: var(--teal-ink) !important; }
.flk-nav-drop {
    position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: 300px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s var(--ease), visibility .15s;
}
.flk-nav-group:hover .flk-nav-drop, .flk-nav-group:focus-within .flk-nav-drop { opacity: 1; visibility: visible; transform: none; }
/* The last group sits near the far edge: its box opens back towards the brand. */
.flk-nav-group:last-child .flk-nav-drop { inset-inline-start: auto; inset-inline-end: 0; }
.flk-nav-group:hover .flk-nav-label .flk-i, .flk-nav-group:focus-within .flk-nav-label .flk-i { transform: rotate(180deg); }
/* The bridge over the gap between label and box, so the pointer can cross it. */
.flk-nav-drop::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }
.flk-nav-head { display: flex; align-items: center; gap: 6px; margin: 2px 6px 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); font-size: .78rem; font-weight: 700; color: var(--muted); }
.flk-nav-head .flk-i { width: 1.05em; height: 1.05em; color: var(--teal-ink); }
.flk-nav-drop a { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; color: var(--fg); text-decoration: none; font-size: .93rem; }
.flk-nav-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--teal-soft); color: var(--teal-ink); flex: none; }
.flk-nav-ic .flk-i { width: 19px; height: 19px; }
.flk-nav-tx { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.flk-nav-tx b { font-weight: 700; }
.flk-nav-tx small { color: var(--muted); font-size: .78rem; }
.flk-nav-drop a:hover { background: var(--teal-soft); }
.flk-nav-drop a:hover .flk-nav-ic, .flk-nav-drop a.flk-nav-on .flk-nav-ic { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.flk-nav-drop a.flk-nav-on b { color: var(--teal-ink); }
.flk-nav-label.flk-nav-on, .flk-nav-link.flk-nav-on { box-shadow: inset 0 -2px 0 var(--teal-ink); border-radius: 10px 10px 4px 4px; }
/* The labs: one wide box under the whole header, a column per group of /lab (PublicNav::lab). */
.flk-top-in { position: relative; }
.flk-nav-group-wide { position: static; }
.flk-nav-wide { inset-inline: 16px; width: auto; top: calc(100% - 2px); }
.flk-nav-wide::before { top: -26px; height: 26px; }
.flk-nav-all { margin-inline-start: auto; display: inline-flex !important; align-items: center; gap: 4px; padding: 2px 6px !important; font-size: .8rem !important; font-weight: 700; color: var(--teal-ink) !important; }
.flk-nav-all .flk-i { width: 1em; height: 1em; }
.flk-nav-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 6px 14px; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; }
.flk-nav-col { display: flex; flex-direction: column; min-width: 0; }
.flk-nav-wide .flk-nav-col a { gap: 8px; padding: 6px 8px; font-size: .9rem; line-height: 1.45; }
.flk-nav-wide .flk-nav-col a .flk-i { width: 17px; height: 17px; flex: none; color: var(--teal-ink); }
.flk-nav-wide .flk-nav-col a.flk-nav-on { color: var(--teal-ink); font-weight: 700; }
.flk-nav-wide a.flk-nav-col-head { font-size: .78rem; font-weight: 700; color: var(--muted); padding: 4px 8px 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft); border-radius: 8px 8px 0 0; }
.flk-nav-wide a.flk-nav-col-head:hover { color: var(--teal-ink); }

/* Home, first in the menu. */
.flk-nav-home .flk-i { width: 1.05em; height: 1.05em; color: var(--teal-ink); }
/* The one action in the header, on a wide screen only. */
.flk-top .flk-top-cta { display: none; margin-inline-end: 6px; white-space: nowrap; }
@media (min-width: 1240px) { .flk-top .flk-top-cta { display: inline-flex; } }

/* The location bar under the header on every inner page: home › section ›
   page on one side, the section's other pages on the other. On a phone the
   two stack and the pages scroll inside their own row. */
.flk-where { border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.flk-where-in { max-width: var(--shell); margin: 0 auto; padding: 0 16px; min-height: 46px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.flk-crumbs ol { list-style: none; margin: 0; padding: 7px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: .84rem; }
.flk-crumbs li { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.flk-crumbs a, .flk-crumbs-group { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; }
.flk-crumbs a:hover { color: var(--teal-ink); }
.flk-crumbs .flk-i { width: 1.05em; height: 1.05em; color: var(--teal-ink); }
.flk-crumbs .flk-crumbs-sep { width: .85em; height: .85em; margin: 0 6px; color: var(--muted); opacity: .6; }
.flk-crumbs [aria-current] { color: var(--fg); font-weight: 700; }
.flk-subnav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 6px 0; }
.flk-subnav::-webkit-scrollbar { display: none; }
.flk-subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; color: var(--fg); text-decoration: none; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.flk-subnav a .flk-i { width: 1.05em; height: 1.05em; color: var(--teal-ink); }
.flk-subnav a:hover { background: var(--teal-soft); }
.flk-subnav a.flk-nav-on { background: var(--teal-soft); border-color: var(--line); color: var(--teal-ink); }
@media (max-width: 899px) {
    .flk-where-in { padding: 0; gap: 0; }
    .flk-crumbs { padding: 0 16px; }
    .flk-subnav { margin: 0; padding: 4px 16px 8px; border-top: 1px solid var(--line-soft); width: 100%; }
}
.flk-top-tools { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
@media (max-width: 420px) {
    .flk-top-in { gap: 6px; padding-inline: 12px; }
    .flk-top .flk-brand { gap: 6px; }
    .flk-top .flk-mark { width: 36px; height: 36px; }
    .flk-top-tools { gap: 0; min-width: 0; }
    .flk-top .flk-city-btn { max-width: 5.5rem; }
}
.flk-icon-btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: none; border: 0; color: var(--fg); cursor: pointer; list-style: none;
}
.flk-icon-btn::-webkit-details-marker { display: none; }
.flk-icon-btn:hover { background: var(--teal-soft); }
.flk-icon-btn .flk-i { width: 22px; height: 22px; }
.flk-theme .flk-i-light { display: none; }
:root[data-theme="light"] .flk-theme .flk-i-dark { display: none; }
:root[data-theme="light"] .flk-theme .flk-i-light { display: block; }
.flk-menu { display: none; }
.flk-menu > summary { cursor: pointer; }
.flk-menu .flk-i-close { display: none; }
.flk-menu[open] .flk-i-open { display: none; }
.flk-menu[open] .flk-i-close { display: block; }
.flk-sheet {
    position: fixed; top: var(--top-h); inset-inline: 0; bottom: 0; z-index: 29; overflow-y: auto;
    background: var(--bg); padding: 18px 16px calc(var(--tab-h) + 24px);
}
.flk-sheet h2 { font-size: .82rem; color: var(--muted); font-weight: 700; margin: 14px 0 6px; display: flex; align-items: center; gap: 6px; }
.flk-sheet h3 { font-size: .78rem; font-weight: 700; margin: 10px 2px 6px; }
.flk-sheet h3 a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.flk-sheet h3 .flk-i { width: 1em; height: 1em; color: var(--teal-ink); }
.flk-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flk-sheet ul a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--fg); text-decoration: none; font-weight: 600; }
.flk-sheet ul a .flk-i { color: var(--teal-ink); }
.flk-sheet-cta { margin-top: 18px; }
.flk-sheet-home a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 700; text-decoration: none; }

.flk-main { max-width: var(--shell); margin: 0 auto; padding: 0 16px 40px; }

/* ---- The column beside every inner page (PublicSidebar) -------------------
   On a wide screen the frame grows by the column, so the page keeps its own width;
   narrower, the column follows the page as a band of cards. */
.flk-page { max-width: var(--shell); margin: 0 auto; }
.flk-page > .flk-main { max-width: none; margin: 0; }
/* The column's changing boxes (sidebar_live): a wrapper the grid does not see; a pass or launch that is over hides (fb-core.js). */
.flk-side-live { display: contents; }
.flk-side [hidden] { display: none !important; }
.flk-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-items: start; gap: 14px; padding: 0 16px 40px; }
@media (min-width: 1180px) {
    .flk-page { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); align-items: start; }
    /* Sticky beside the page, never a scroll box of its own: shorter than the window it stays under the header;
       taller, it scrolls with the page until its last box is in view, then stays (--side-top, fb-core.js pinSide). */
    .flk-side { position: sticky; top: var(--side-top, calc(var(--top-h) + 12px));
        display: flex; flex-direction: column; margin-top: 22px; padding: 0 0 16px; padding-inline-end: 16px; }
    /* Every box the column's full width, the live ones inside .flk-side-live too (display: contents keeps them out of «> *»). */
    .flk-side { align-items: stretch; }
    .flk-side > *, .flk-side-live > * { flex-shrink: 0; width: 100%; }
}
/* Every box the same: one width, one frame, one head (icon and name, and the way to its page). */
.flk-side-box { display: block; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); }
.flk-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.flk-side-head h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .9rem; font-weight: 850; }
.flk-side-head h2 .flk-i { width: 17px; height: 17px; color: var(--teal-ink); }
.flk-side-go { display: inline-flex; align-items: center; gap: 1px; flex: none; color: var(--teal-ink); font-size: .78rem; font-weight: 700; text-decoration: none; }
.flk-side-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.flk-side-go .flk-i { width: 1em; height: 1em; }
.flk-side-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.flk-side-tx b { font-weight: 800; font-size: .92rem; }
.flk-side-tx b small { font-weight: 600; color: var(--muted); font-size: .76rem; }
.flk-side-tx em { font-style: normal; color: var(--muted); font-size: .76rem; }
.flk-side-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flk-side-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .86rem !important; line-height: 1.55; }
/* A row that is a link: the whole row, with a quiet hover. */
.flk-side-astro, .flk-side-rows a { display: flex; align-items: center; gap: 11px; padding: 7px 8px; margin: 0 -8px; border-radius: 12px; color: var(--fg); text-decoration: none; }
.flk-side-astro:hover, .flk-side-rows a:hover { background: var(--surface-2); }
.flk-side-astro > .flk-i { flex: none; width: 16px; height: 16px; color: var(--muted); }
.flk-side-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
/* The Moon and the Sun as discs, the Sun's cut round its disc as on the home page. */
.flk-side-disc { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #000; }
.flk-side-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flk-side-disc-moon { box-shadow: 0 0 0 1px var(--line), 0 0 16px rgba(220, 230, 255, .12); }
.flk-side-disc-sun { background: #0b1530; box-shadow: 0 0 0 1px rgba(255, 170, 60, .35), 0 0 18px rgba(255, 170, 60, .25); }
.flk-side-disc-sun img { object-position: 50% 5%; transform: scale(1.64); }
.flk-side-astro + .flk-side-astro { margin-top: 2px; }
.flk-side-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); }
.flk-side-ic .flk-i { width: 19px; height: 19px; }
.flk-side-ic-launch { background: rgba(196, 181, 255, .14); color: #c4b5ff; }
:root[data-theme="light"] .flk-side-ic-launch { background: #efeaff; color: #5b46c9; }
.flk-side-count .flk-rel { color: var(--orange-ink); font-weight: 700; }
/* Quakes: the magnitude in a badge, warmer for stronger. */
.flk-side-mag { flex: none; display: grid; place-items: center; width: 40px; height: 32px; border-radius: 10px; font-weight: 900; font-size: .92rem; font-variant-numeric: tabular-nums; }
.flk-side-mag-lo { background: rgba(255, 194, 71, .16); color: var(--warn); }
.flk-side-mag-mid { background: rgba(255, 140, 26, .2); color: var(--orange-ink); }
.flk-side-mag-hi { background: rgba(255, 84, 72, .22); color: var(--bad); }
.flk-side-time { flex: none; width: 52px; text-align: center; padding: 5px 0; border-radius: 10px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.flk-side-sym { flex: none; width: 32px; text-align: center; font-size: 1.35rem; line-height: 1; color: var(--orange-ink); }
.flk-side-stars { color: var(--orange); font-size: .72rem; letter-spacing: 1px; }
.flk-side-note { margin: 8px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.7; }
.flk-side-event { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--fg); font-size: .8rem; }
.flk-side-event .flk-i { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--orange-ink); }
/* The picture of the day: the picture, rounded, its name under it. */
.flk-side-pic { display: block; color: var(--fg); text-decoration: none; }
.flk-side-pic img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.flk-side-pic b { display: block; margin-top: 8px; font-weight: 800; font-size: .9rem; line-height: 1.6; }
.flk-side-pic:hover b { color: var(--teal-ink); }
.flk-side-sci { display: block; color: var(--muted); font-size: .76rem; font-style: italic; text-align: left; overflow-wrap: anywhere; }
.flk-side-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* The bots: the one orange call in the column. */
.flk-side-bots { border-color: rgba(255, 140, 26, .5); }
.flk-side-bots p { margin: 0 0 10px; color: var(--muted); font-size: .82rem; line-height: 1.8; }
.flk-side-bots .flk-btn { width: 100%; justify-content: center; margin-bottom: 8px; }
/* Lists: news, today's reads. */
.flk-side-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.flk-side-list a { display: flex; flex-direction: column; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; color: var(--fg); text-decoration: none; line-height: 1.65; }
.flk-side-list a:hover { background: var(--surface-2); }
.flk-side-list small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; }
.flk-side-list small .flk-i { width: 1em; height: 1em; color: var(--teal-ink); }
.flk-side-list b { font-weight: 700; font-size: .88rem; }
/* The tools and simulations: a grid of small tiles. */
.flk-side-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.flk-side-tools a { display: flex; align-items: center; gap: 7px; height: 100%; padding: 8px 9px; border-radius: 10px; background: var(--surface-2); color: var(--fg); font-size: .8rem; font-weight: 700; line-height: 1.45; text-decoration: none; }
.flk-side-tools a:hover { background: var(--teal-soft); color: var(--teal-ink); }
.flk-side-tools .flk-i { flex: none; width: 16px; height: 16px; color: var(--teal-ink); }
/* Every lab and every tool, under the name of its group. */
.flk-side-sub { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.flk-side-sub .flk-i { width: 14px; height: 14px; color: var(--teal-ink); }
.flk-side-tools + .flk-side-sub { margin-top: 12px; }
/* Every section: its name, then its pages as a run of links. */
.flk-side-group + .flk-side-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.flk-side-group p { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.flk-side-group p .flk-i { width: 14px; height: 14px; color: var(--teal-ink); }
.flk-side-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.flk-side-group a { display: inline-block; padding: 2px 7px; border-radius: 7px; color: var(--fg); font-size: .82rem; text-decoration: none; }
.flk-side-group a:hover { background: var(--surface-2); color: var(--teal-ink); }
.flk-side-on, .flk-side-tools a.flk-side-on { background: var(--teal-soft); color: var(--teal-ink); }

.flk-tabbar {
    display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--glass);
    border-top: 1px solid var(--line-soft);
}
.flk-tabbar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; line-height: 1.3;
}
.flk-tabbar a .flk-i { width: 23px; height: 23px; }
.flk-tabbar a.flk-nav-on { color: var(--teal-ink); }

.flk-foot { border-top: 1px solid var(--line-soft); background: var(--bg-2); color: var(--muted); font-size: .88rem; margin-top: 24px; }
.flk-foot .flk-foot-maker { margin-top: 0; }
/* The maker's card, then what the site holds to: every page but the about page, which has both in full. */
.flk-foot-maker-band { max-width: var(--shell); margin: 0 auto; padding: 30px 16px 6px; }
.flk-maker-card { display: flex; gap: 20px; align-items: center; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--line);
    background: radial-gradient(600px 220px at 85% 0%, rgba(255, 140, 26, .1), transparent 70%), linear-gradient(160deg, var(--surface), var(--bg-2)); }
.flk-foot .flk-maker-card h2 { margin: 2px 0 6px; font-size: 1.35rem; font-weight: 900; }
.flk-maker-text { margin: 0 0 12px; color: var(--muted); font-size: .95rem; line-height: 2; max-width: 52rem; text-wrap: pretty; }
.flk-maker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.flk-foot .flk-maker-actions .flk-btn-soft { color: var(--teal-ink); }
.flk-foot .flk-maker-actions .flk-btn-ghost { color: var(--fg); }
.flk-maker-role { margin: 0 0 8px; color: var(--teal-ink); font-size: .9rem; font-weight: 700; }
.flk-maker-mark { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--teal-soft); box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px var(--orange); }
.flk-maker-mark img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.flk-maker-mark .flk-mark { position: absolute; width: 32px; height: 32px; bottom: -4px; inset-inline-start: -4px; background: var(--bg-2); border-radius: 50%; padding: 3px; }
.flk-foot-band { border-bottom: 1px solid var(--line-soft); }
.flk-foot-values { max-width: var(--shell); margin: 0 auto; padding: 30px 16px 32px; }
.flk-foot-values-head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 22px; }
.flk-foot .flk-foot-values h2 { font-size: 1.15rem; font-weight: 900; margin: 0; }
.flk-foot .flk-foot-values h2 a { color: var(--fg); }
.flk-foot .flk-foot-values h2 a:hover { color: var(--teal-ink); }
.flk-foot-values ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flk-foot .flk-foot-values li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line-soft); transition: border-color .2s var(--ease); }
.flk-foot .flk-foot-values li:hover { border-color: var(--line); }
.flk-foot-vicon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); flex: none; }
.flk-foot-vicon .flk-i { width: 20px; height: 20px; }
.flk-foot-values li > span:last-child { display: flex; flex-direction: column; gap: 3px; line-height: 1.7; }
.flk-foot-values b { color: var(--fg); font-size: .92rem; font-weight: 800; }
.flk-foot-values small { font-size: .8rem; }
.flk-foot-in { max-width: var(--shell); margin: 0 auto; padding: 28px 16px 8px; display: flex; flex-wrap: wrap; gap: 22px 28px; }
.flk-foot-in > div { flex: 1 1 120px; }
.flk-foot-in > .flk-foot-brand { flex: 2 1 260px; }
.flk-foot-brand p { margin: 8px 0 12px; max-width: 26rem; }
.flk-foot-brand .flk-brand-text b { font-size: 1.1rem; }
.flk-foot h2 { font-size: .85rem; color: var(--fg); margin: 2px 0 6px; }
.flk-foot ul { list-style: none; margin: 0; padding: 0; }
.flk-foot li { margin: 3px 0; }
.flk-foot a { color: var(--muted); text-decoration: none; }
.flk-foot a:hover { color: var(--teal-ink); }
.flk-foot-more { margin-top: 4px; }
.flk-foot-more summary { cursor: pointer; color: var(--teal-ink); font-size: .85rem; list-style: none; }
.flk-foot-more summary::-webkit-details-marker { display: none; }
.flk-foot-more summary::after { content: " ▾"; }
.flk-foot-more[open] summary { display: none; }
.flk-foot-line { max-width: var(--shell); margin: 0 auto; padding: 12px 16px 26px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }
.flk-foot-line p { margin: 0; }

@media (max-width: 899px) {
    .flk-nav { display: none; }
    .flk-menu { display: block; }
    .flk-tabbar { display: flex; }
    body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
    .flk-foot-in > div { flex-basis: 40%; }
    .flk-foot-in > .flk-foot-brand { flex-basis: 100%; }
    .flk-foot-values ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a phone the six titles alone, two by two; the about page has the lines. */
@media (max-width: 560px) {
    .flk-foot-values ul { gap: 10px; }
    .flk-foot-values small { display: none; }
    .flk-foot .flk-foot-values li { align-items: center; padding: 10px 12px; gap: 10px; }
    .flk-foot-vicon { width: 32px; height: 32px; border-radius: 10px; }
    .flk-foot-values-head { margin-bottom: 16px; }
    .flk-maker-card { flex-direction: column; text-align: center; padding: 22px 18px; }
    .flk-maker-mark { width: 80px; height: 80px; }
    .flk-maker-actions { justify-content: center; }
    .flk-foot-values b { font-size: .82rem; line-height: 1.5; }
}
@media (max-width: 360px) { .flk-brand-text small { display: none; } }

/* ---- Components ------------------------------------------------------ */
.flk-btn {
    display: inline-flex; align-items: center; gap: 6px; direction: ltr; background: var(--teal); color: var(--on-teal);
    border: 0; border-radius: var(--radius-sm); padding: 5px 14px; font: inherit; font-size: .86rem; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: background .15s, transform .15s var(--ease);
}
.flk-btn:hover { background: var(--teal-hi); color: var(--on-teal); }
.flk-btn:active { transform: translateY(1px); }
.flk-btn-soft { background: var(--teal-soft); color: var(--teal-ink); direction: rtl; }
.flk-btn-soft:hover { background: var(--surface-2); color: var(--teal-ink); }
.flk-btn-primary { background: var(--orange); color: var(--on-orange); direction: rtl; }
.flk-btn-primary:hover { background: var(--orange-hi); color: var(--on-orange); }
.flk-btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); direction: rtl; }
.flk-btn-ghost:hover { background: var(--teal-soft); color: var(--fg); }
.flk-btn-lg { padding: 9px 20px; font-size: .95rem; border-radius: 12px; }
.flk-btn .flk-i { width: 1.1em; height: 1.1em; }

.flk-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; font-size: .86rem; white-space: nowrap;
}
a.flk-chip:hover, .flk-chip-on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); }
.flk-chip .flk-i { width: 1em; height: 1em; color: var(--teal-ink); }
.flk-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* «گام بعد» (fb-next.js): at most two quiet links, under what a lab has chosen, to the lab that does what this one does not. */
.flk-next { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; padding-top: 6px; border-top: 1px dashed var(--line); }
.flk-next[hidden] { display: none; }
/* On a page of the site's own (Views/public/next): the wrapper fb-core watches has no size of its own. */
.flk-next-page > .flk-next { margin: 14px 0; }
/* Discovery trails (fb-trail.js, /lab/trails): the bar above a step's lab, the trails' cards, and /lab's way in. */
.flk-trail-bar { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--teal); border-radius: var(--radius); background: var(--teal-soft); display: flex; flex-direction: column; gap: 8px; }
.flk-trail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flk-trail-head .flk-kicker { flex: 1 1 auto; }
.flk-trail-head .flk-kicker a { color: inherit; }
.flk-trail-count { color: var(--muted); font-size: .84rem; font-weight: 700; }
.flk-trail-close { display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.flk-trail-close:hover, .flk-trail-close:focus-visible { color: var(--fg); background: var(--surface); }
.flk-trail-step { margin: 0; line-height: 1.9; }
.flk-trail-step b { display: block; font-size: 1.02rem; }
.flk-trail-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flk-trail-nav .flk-btn-primary { margin-inline-start: auto; }
.flk-trail-prev .flk-i { transform: scaleX(-1); }
.flk-trail-dots { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.flk-trail-dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.flk-trail-dots .flk-trail-done { background: var(--teal); }
.flk-trail-dots .flk-trail-now { background: var(--orange); width: 18px; border-radius: 4px; }
.flk-trails { display: grid; gap: 14px; margin-top: 18px; }
.flk-trail-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.flk-trail-card h2 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.flk-trail-card h2 .flk-i { color: var(--teal-ink); }
.flk-trail-card p { margin: 0 0 10px; line-height: 1.9; }
.flk-trail-steps { margin: 0 0 12px; padding-inline-start: 1.4em; line-height: 2; list-style-type: persian; }
.flk-trail-go { margin: 0; }
.flk-trail-promo { display: flex; align-items: center; gap: 10px; margin: 16px 0; padding: 12px 16px; border: 1px dashed var(--teal); border-radius: var(--radius); color: var(--fg); text-decoration: none; line-height: 1.9; }
.flk-trail-promo .flk-i { color: var(--teal-ink); flex: none; }
.flk-trail-promo b { color: var(--teal-ink); margin-inline-end: 6px; }
.flk-trail-promo:hover { background: var(--teal-soft); }
/* What a lab's search did not find, where the site has it (fb-next.js showElsewhere); and the site search's labs for its best entry. */
.flk-elsewhere { display: block; color: var(--muted); font-size: .86rem; }
.flk-elsewhere-go { display: flex; flex-wrap: wrap; gap: 0 14px; }
.flk-tel-elsewhere { flex-direction: column; align-items: flex-start; }
.flk-sg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; font-size: .86rem; }
.flk-sg-acts[hidden] { display: none; }
.flk-sg-acts b { color: var(--muted); font-weight: 700; }
.flk-sg-acts a { color: var(--teal-ink); font-weight: 700; text-decoration: none; }
.flk-sg-acts a:hover, .flk-sg-acts a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.flk-next-go { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--teal-ink); font-weight: 700; font-size: .86rem; text-decoration: none; }
.flk-next-go .flk-i { width: 1.05em; height: 1.05em; flex: none; }
.flk-next-go .flk-i:last-child { width: .8em; height: .8em; opacity: .65; }
.flk-next-go:hover span, .flk-next-go:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
/* A lab readout with a unit (fb-next.js unitLink): a small ruler beside its name, to the converter with that value. */
.flk-conv { display: inline-flex; vertical-align: middle; padding: 4px; margin: -4px 0 -4px -2px; margin-inline-start: 2px; border-radius: 6px; color: var(--muted); opacity: .7; }
.flk-conv[hidden] { display: none; }
.flk-conv .flk-i { width: .95em; height: .95em; }
.flk-conv:hover, .flk-conv:focus-visible { color: var(--teal-ink); opacity: 1; }

.flk-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-ink); font-weight: 800; font-size: .8rem; letter-spacing: .02em; margin: 0; }
.flk-sec { margin: 34px 0 0; }
.flk-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.flk-sec-head h2 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 850; margin: 0; line-height: 1.4; }
.flk-sec-head p:not(.flk-kicker) { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.flk-sec-all { display: inline-flex; align-items: center; gap: 2px; font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }

.flk-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 16px; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
a.flk-card { color: var(--fg); text-decoration: none; }
a.flk-card:hover, .flk-card-hover:hover { transform: translateY(-2px); box-shadow: var(--glow); border-color: transparent; }
.flk-card h3 { font-size: 1rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.flk-card-icon { font-size: 1.25rem; }
.flk-card-icon .flk-i { color: var(--teal-ink); width: 22px; height: 22px; }
.flk-card p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.8; flex: 1; }
.flk-card-links { display: flex; flex-wrap: wrap; gap: 8px; }
.flk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.flk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .flk-grid-3 { grid-template-columns: 1fr; } }

/* A figure tile: a big number, its label, an optional note. */
.flk-tile {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--fg); text-decoration: none; position: relative;
}
a.flk-tile:hover { border-color: var(--teal); color: var(--fg); }
.flk-tile-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.flk-tile-label .flk-i { color: var(--teal-ink); width: 18px; height: 18px; }
.flk-tile-value { font-size: 1.45rem; font-weight: 850; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flk-tile-note { color: var(--muted); font-size: .78rem; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flk-tile-live { border-color: rgba(255, 140, 26, .55); }
.flk-tile-live .flk-tile-value { color: var(--orange-ink); }
.flk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
/* On a phone the "now" strip is one row that scrolls sideways. */
@media (max-width: 640px) {
    .flk-tiles-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
    .flk-tiles-strip::-webkit-scrollbar { display: none; }
    .flk-tiles-strip > * { flex: 0 0 64%; scroll-snap-align: start; }
}

/* "Live": the orange dot; still when the reader asks for less motion. */
.flk-live { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-ink); font-size: .78rem; font-weight: 800; }
.flk-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 140, 26, .6); animation: flk-pulse 2s infinite; }
@keyframes flk-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 140, 26, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 140, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 140, 26, 0); } }

/* A countdown: equal-width figures, Persian units below. */
.flk-count { display: inline-flex; gap: 10px; direction: rtl; }
.flk-count span { display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; padding: 6px 4px; background: var(--surface-2); border-radius: 12px; }
.flk-count b { font-size: 1.5rem; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.3; }
.flk-count small { font-size: .7rem; color: var(--muted); }

.flk-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.flk-tabs::-webkit-scrollbar { display: none; }
.flk-tab { flex: none; padding: 5px 14px; border-radius: 10px; font: inherit; font-size: .88rem; font-weight: 700; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.flk-tab:hover { color: var(--fg); }
.flk-tab-on, .flk-tab[aria-selected="true"] { background: var(--teal-soft); color: var(--teal-ink); }

.flk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-2); outline: none; accent-color: var(--teal); }
.flk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--orange); cursor: pointer; }
.flk-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 3px solid var(--bg); cursor: pointer; }

/* Loading and nothing-to-show: the same size as what will be there. */
.flk-skel { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: flk-shine 1.4s linear infinite; min-height: 1em; }
@keyframes flk-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.flk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.flk-empty .flk-i { width: 30px; height: 30px; color: var(--teal-ink); opacity: .8; }
.flk-empty p { margin: 0; }

/* Text over a picture or the hero. */
.flk-glass { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius); }

/* The reader's city: the header chip and the picker (fb-core.js). */
.flk-city-btn { cursor: pointer; font: inherit; font-size: .84rem; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
.flk-city-btn[hidden] { display: none; }
.flk-noscroll, .flk-noscroll body { overflow: hidden; }
.flk-cityp { position: fixed; inset: 0; z-index: 60; background: rgba(1, 10, 12, .62); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 12px 12px; }
.flk-cityp[hidden] { display: none; }
.flk-cityp-box { width: min(560px, 100%); max-height: 84vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.flk-cityp-head { display: flex; align-items: center; justify-content: space-between; }
.flk-cityp-head h2 { margin: 0; font-size: 1.1rem; font-weight: 850; }
.flk-cityp-note { margin: -6px 0 0; color: var(--muted); font-size: .8rem; }
.flk-cityp-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.flk-cityp-search:focus-within { border-color: var(--teal); }
.flk-cityp-search .flk-i { color: var(--muted); }
.flk-cityp-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: inherit; padding: 10px 0; outline: none; }
.flk-cityp-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flk-cityp-results:empty { display: none; }
.flk-cityp-results button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--fg); font: inherit; cursor: pointer; text-align: start; }
.flk-cityp-results button:hover { background: var(--teal-soft); }
.flk-cityp-results small { color: var(--muted); }
.flk-cityp-none { color: var(--muted); font-size: .85rem; padding: 4px 2px; }
.flk-cityp-here { align-self: flex-start; }
.flk-cityp-list button { cursor: pointer; font: inherit; font-size: .85rem; }
.flk-rel { white-space: nowrap; }
@media (max-width: 560px) { .flk-city-btn { max-width: 6.5rem; padding-inline: 9px; } .flk-cityp { padding-top: 4vh; } }

/* No backdrop blur anywhere: over the fixed star field it stalls painting on
   slow phones (and in testing), and a near-opaque bar reads just as well. */
/* Charts drawn on the server: shared classes. */
.flk-chart { display: block; width: 100%; height: auto; font-family: inherit; }
.flk-chart-grid { stroke: var(--line); stroke-width: 1; stroke-opacity: .7; }
.flk-chart-axis { fill: var(--muted); font-size: 12px; }
.flk-chart-s1 { fill: var(--c1); stroke: var(--c1); } .flk-chart-s2 { fill: var(--c2); stroke: var(--c2); } .flk-chart-s3 { fill: var(--c3); stroke: var(--c3); }
.flk-chart-s4 { fill: var(--c4); stroke: var(--c4); } .flk-chart-s5 { fill: var(--c5); stroke: var(--c5); } .flk-chart-s6 { fill: var(--c6); stroke: var(--c6); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- The mark alive (PublicIcons::logo): the world goes round its orbit --- */
.flk-logo { display: block; flex: none; overflow: visible; }
.flk-logo-still { display: none; }
.flk-logo-halo { animation: flk-logo-breathe 6s ease-in-out infinite; transform-origin: 32px 32px; transform-box: view-box; }
@keyframes flk-logo-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.flk-logo-world { filter: drop-shadow(0 0 2px rgba(255, 140, 26, .8)); }
/* The world on its orbit (PublicIcons::logo): one turn in 16 s, clockwise from the right, so near the first half. */
.flk-logo-orbit { animation: flk-logo-turn 16s linear infinite; }
.flk-logo-orbit-un { transform-box: fill-box; transform-origin: center; animation: flk-logo-turn 16s linear infinite reverse; }
.flk-logo-near { animation: flk-logo-turn 16s linear infinite, flk-logo-near 16s step-end infinite; }
.flk-logo-far { animation: flk-logo-turn 16s linear infinite, flk-logo-far 16s step-end infinite; }
@keyframes flk-logo-turn { to { transform: rotate(360deg); } }
@keyframes flk-logo-near { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flk-logo-far { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flk-logo-moving { display: none; } .flk-logo-still { display: inline; } }

/* A list row's two lines (the home cards, the bots, the earthquake lists). */
.flk-hm-li { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.flk-hm-li b { font-weight: 700; color: var(--fg); }
.flk-hm-li small { color: var(--muted); font-size: .8rem; }

/* ---- Running text and tables, for the site's own pages ---------------- */
.flk-prose { max-width: 46rem; }
.flk-prose h2 { font-size: 1.15rem; font-weight: 850; margin: 26px 0 6px; }
.flk-prose p, .flk-prose li { line-height: 2.05; }
.flk-prose p { margin: 0 0 .8rem; }
.flk-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.flk-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.flk-table th, .flk-table td { padding: 9px 14px; text-align: start; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.flk-table th { font-size: .78rem; color: var(--muted); font-weight: 700; background: var(--bg-2); }
.flk-table tr:last-child td { border-bottom: 0; }

/* ---- The labs: the curvature picture and the lead card (home and /lab) -- */
.flk-lab-feature {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; overflow: hidden; color: var(--fg); text-decoration: none;
    border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--surface), var(--bg-2)); box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.flk-lab-feature:hover { color: var(--fg); transform: translateY(-3px); box-shadow: var(--glow); border-color: transparent; }
.flk-lab-feature:hover .flk-btn-primary { background: var(--orange-hi); }
.flk-lab-stage { position: relative; background: radial-gradient(120% 90% at 60% 10%, #0d3940 0%, #041a1e 70%); display: flex; align-items: center; min-height: 240px; }
.flk-lab-art { display: block; width: 100%; height: auto; }
.flk-lab-copy { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; justify-content: center; }
.flk-lab-copy h2, .flk-lab-copy h3 { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 900; line-height: 1.55; }
.flk-lab-copy p:not(.flk-kicker) { margin: 0; color: var(--muted); font-size: .93rem; line-height: 2; }
.flk-lab-copy .flk-btn { align-self: flex-start; margin-top: 4px; }
.flk-lab-stars circle { fill: #e9f6ff; animation: flk-lab-twinkle 3.2s ease-in-out infinite; }
.flk-lab-stars circle:nth-child(2n) { animation-delay: 1.1s; } .flk-lab-stars circle:nth-child(3n) { animation-delay: 2s; }
@keyframes flk-lab-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.flk-lab-shore { fill: none; stroke: #6fe0d8; stroke-width: 2; stroke-opacity: .8; }
.flk-lab-seen { fill: #e7f5f3; }
.flk-lab-cap { fill: #ff8c1a; }
.flk-lab-beam { fill: #ffd29a; animation: flk-lab-twinkle 2s ease-in-out infinite; }
.flk-lab-hidden { stroke: #ff6b5d; stroke-width: 1.2; stroke-dasharray: 3 3; }
.flk-lab-sight { fill: none; stroke: #ffb054; stroke-width: 2; stroke-dasharray: 7 6; animation: flk-lab-flow 1.6s linear infinite; }
@keyframes flk-lab-flow { to { stroke-dashoffset: -26; } }
.flk-lab-horizon { fill: #ff8c1a; stroke: #041a1e; stroke-width: 2; }
.flk-lab-person { fill: none; stroke: #e7f5f3; stroke-width: 2.4; stroke-linecap: round; }
.flk-lab-eye { fill: #6fe0d8; stroke: #041a1e; stroke-width: 2; }
.flk-lab-label { fill: #cfe9e6; font-size: 13px; font-weight: 700; font-family: Vazirmatn, Tahoma, sans-serif; paint-order: stroke; stroke: #041a1e; stroke-width: 3px; }
.flk-lab-label-seen { fill: #e7f5f3; } .flk-lab-label-hid { fill: #ff9a8f; }
.flk-lab-soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.flk-lab-soon li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.flk-lab-soon b { font-weight: 800; }
.flk-lab-soon b a { color: var(--fg); text-decoration: none; } .flk-lab-soon b a:hover { color: var(--teal-ink); }
.flk-lab-soon p { margin: 2px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.85; }
@media (max-width: 820px) { .flk-lab-feature { grid-template-columns: minmax(0, 1fr); } .flk-lab-stage { min-height: 0; } }
/* /lab: the way to each group (PublicLabs::CATEGORIES). */
.flk-lab-cats { margin-top: 18px; }
.flk-lab-cats .flk-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.flk-lab-cats .flk-i { width: 16px; height: 16px; }
/* The labs as cards with a small moving picture each (lab_grid, lab_art): the home page, /lab and the foot of a simulator. */
.flk-lab-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.flk-lab-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--fg); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.flk-lab-card:hover { color: var(--fg); transform: translateY(-3px); box-shadow: var(--glow); border-color: transparent; }
.flk-lab-card-art { display: block; background: radial-gradient(120% 100% at 50% 0%, #0d3940 0%, #041a1e 75%); }
.flk-lab-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.flk-lab-card-body b { font-weight: 800; font-size: .93rem; line-height: 1.8; }
/* A day's photo from its bot (a quake's, the Sun's, the Moon's day): at most --pic-h tall, at its own width. */
.flk-qz-photo { margin: 4px 0 18px; }
.flk-qz-photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--pic-h); margin-inline: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.flk-qz-photo figcaption { margin-top: 6px; font-size: .82rem; color: var(--muted); }
/* Under every inner page (explore): where to go next, in the lab cards' frame; a picture or the card's icon on the labs' sky. */
.flk-xp { margin-top: 40px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.flk-xp-sec { margin-top: 26px; }
.flk-xp .flk-lab-grid { margin-top: 0; }
.flk-xp-art { display: block; aspect-ratio: 240 / 132; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #0d3940 0%, #041a1e 75%); }
.flk-xp-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flk-xp-ph { display: grid; place-items: center; height: 100%; color: var(--teal-hi); }
.flk-xp-ph .flk-i { width: 44px; height: 44px; opacity: .85; }
.flk-xp-card .flk-lab-card-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flk-xp-line { color: var(--muted); font-size: .84rem; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flk-art { display: block; width: 100%; height: auto; }
.flk-art-stars circle { fill: #e9f6ff; opacity: .7; }
.flk-art-path { fill: none; stroke: rgba(147, 184, 182, .38); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flk-art-glow { fill: rgba(255, 170, 60, .2); }
.flk-art-sun { fill: #ffd166; }
.flk-art-p1 { fill: #b9b2a8; } .flk-art-p2 { fill: #5aa6ff; } .flk-art-p3 { fill: #ff7a52; } .flk-art-p4 { fill: #e8b98a; }
.flk-art-earth { fill: #3987e5; }
.flk-art-night { fill: rgba(2, 10, 14, .72); }
.flk-art-moon { fill: #e6e2d6; }
.flk-art-axis { stroke: #e7f5f3; stroke-width: 1.4; }
.flk-art-rays path { stroke: rgba(255, 209, 102, .55); stroke-width: 1.4; fill: none; }
.flk-art-grid { fill: none; stroke: rgba(60, 207, 145, .55); stroke-width: 1; }
.flk-art-sat { fill: #fff; stroke: #ff8c1a; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.flk-art-track { fill: none; stroke: #ffb054; stroke-width: 1.6; stroke-dasharray: 5 5; animation: flk-lab-flow 1.6s linear infinite; opacity: .8; }
.flk-art-seis { fill: none; stroke: #6fe0d8; stroke-width: 1.4; stroke-dasharray: 300; stroke-dashoffset: 300; animation: flk-art-draw 3.6s ease-out infinite; }
.flk-art-epi { fill: #ff6b5d; }
.flk-art-ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: flk-art-wave 3.6s ease-out infinite; }
.flk-art-ring-p { stroke: #3fcac3; }
.flk-art-ring-s { stroke: #ff8c1a; animation-delay: .9s; }
.flk-art-sea { fill: rgba(57, 135, 229, .25); }
.flk-art-ship { fill: #e7f5f3; animation: flk-art-sink 4s ease-in-out infinite alternate; }
.flk-art-sight { fill: none; stroke: #ffb054; stroke-width: 1.6; stroke-dasharray: 6 5; animation: flk-lab-flow 1.6s linear infinite; }
.flk-art-spin { animation: flk-art-turn linear infinite; }
.flk-art-unspin { transform-box: fill-box; transform-origin: center; animation: flk-art-turn linear infinite reverse; }
.flk-art-t1 { animation-duration: 6s; } .flk-art-t2 { animation-duration: 11s; } .flk-art-t3 { animation-duration: 16s; } .flk-art-t4 { animation-duration: 28s; }
.flk-art-umbra { fill: #03141a; }
.flk-art-cline { fill: none; stroke: #ffb054; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: flk-art-draw 6s ease-in-out infinite; }
.flk-art-cstar { fill: #f2fbff; }
.flk-art-tw1 { animation: flk-art-twinkle 2.6s ease-in-out infinite; }
.flk-art-tw2 { animation: flk-art-twinkle 3.4s ease-in-out infinite .8s; }
@keyframes flk-art-twinkle { 50% { opacity: .45; } }
.flk-art-cross { animation: flk-art-cross 7s ease-in-out infinite alternate; }
@keyframes flk-art-cross { from { transform: translateX(-58px); } to { transform: translateX(58px); } }
@keyframes flk-art-turn { to { transform: rotate(-360deg); } }
@keyframes flk-art-wave { 0% { transform: scale(.05); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes flk-art-draw { 0% { stroke-dashoffset: 300; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes flk-art-sink { from { transform: translateY(0); } to { transform: translateY(14px); } }
/* The art of the six small labs (phase 6): worlds' balls hop by their gravity, a spectrum, a shadow, a sprout for Nowruz. */
.flk-art-hop1, .flk-art-hop2, .flk-art-hop3 { animation: flk-art-hop ease-out infinite alternate; }
.flk-art-hop1 { animation-duration: .6s; } .flk-art-hop2 { animation-duration: 1.5s; } .flk-art-hop3 { animation-duration: 1s; }
@keyframes flk-art-hop { from { transform: translateY(0); } to { transform: translateY(-46px); } }
.flk-art-band { fill: rgba(127, 182, 255, .18); stroke: rgba(147, 184, 182, .4); }
.flk-art-lines { stroke: #ffd166; stroke-width: 2.2; }
.flk-art-shadow { stroke: rgba(2, 10, 14, .9); stroke-width: 4; stroke-linecap: round; }
.flk-art-sprout { fill: none; stroke: #3ccf91; stroke-width: 2.4; stroke-linecap: round; }


/* ---- The news bot's subjects (news pages and the home page) ------------- */
/* One colour per subject, on a story's edge and its label: bright on the
   night default, deeper on the light page. */
.flk-nw-c-solar_system { --cat: #f0995a; }
.flk-nw-c-moon { --cat: #c3c8d8; }
.flk-nw-c-sun { --cat: #ffc94a; }
.flk-nw-c-small_bodies { --cat: #d4b08c; }
.flk-nw-c-stars { --cat: #f5d76e; }
.flk-nw-c-galaxies { --cat: #b99cff; }
.flk-nw-c-black_holes { --cat: #aab3d6; }
.flk-nw-c-cosmology { --cat: #a594f9; }
.flk-nw-c-exoplanets { --cat: #4fd1c5; }
.flk-nw-c-astrobiology { --cat: #7ddc8f; }
.flk-nw-c-telescopes { --cat: #8fb0ff; }
.flk-nw-c-missions { --cat: #6cc4f0; }
.flk-nw-c-spaceflight { --cat: #ff8a7a; }
.flk-nw-c-industry { --cat: #d9a388; }
.flk-nw-c-sky_events { --cat: #5fe0b7; }
.flk-nw-c-other_space { --cat: #a3b0cc; }
:root[data-theme="light"] .flk-nw-c-solar_system { --cat: #c2641f; }
:root[data-theme="light"] .flk-nw-c-moon { --cat: #7a7f95; }
:root[data-theme="light"] .flk-nw-c-sun { --cat: #b07c00; }
:root[data-theme="light"] .flk-nw-c-small_bodies { --cat: #8c6d4f; }
:root[data-theme="light"] .flk-nw-c-stars { --cat: #a68700; }
:root[data-theme="light"] .flk-nw-c-galaxies { --cat: #7b4cc9; }
:root[data-theme="light"] .flk-nw-c-black_holes { --cat: #3a3f58; }
:root[data-theme="light"] .flk-nw-c-cosmology { --cat: #5a3fb0; }
:root[data-theme="light"] .flk-nw-c-exoplanets { --cat: #1f8a84; }
:root[data-theme="light"] .flk-nw-c-astrobiology { --cat: #2f9147; }
:root[data-theme="light"] .flk-nw-c-telescopes { --cat: #2c55c9; }
:root[data-theme="light"] .flk-nw-c-missions { --cat: #1b7fb8; }
:root[data-theme="light"] .flk-nw-c-spaceflight { --cat: #d04a3a; }
:root[data-theme="light"] .flk-nw-c-industry { --cat: #8a5a44; }
:root[data-theme="light"] .flk-nw-c-sky_events { --cat: #0f8f6f; }
:root[data-theme="light"] .flk-nw-c-other_space { --cat: #52607e; }

/* ---- falakbin.ir/about: the maker -------------------------------------- */
.flk-about {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 20px 22px; margin: 22px 0 8px; max-width: 46rem;
}
.flk-about p { margin: 0 0 .7rem; }
.flk-about-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.flk-about-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-soft); display: grid; place-items: center; flex: none; }
.flk-about-mark .flk-mark { width: 46px; height: 46px; }
.flk-about h1 { font-size: clamp(1.3rem, 4vw, 1.7rem); margin: 0; }
.flk-about-role { color: var(--muted); margin: 0 !important; }
.flk-about-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0 !important; }
.flk-about-part { max-width: 46rem; }
.flk-about-bots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.flk-about-bots a { direction: ltr; unicode-bidi: isolate; text-decoration: none; font-size: .9rem; }

/* ---- The home page (until phase 3 rebuilds it) ------------------------ */
/* An older page's head (news, launches, Starlink, the planets' nights) in the frame of every other page's (pages.css .flk-pg-hero). */
.flk-hero, .flk-pl-head { margin: 22px 0 8px; padding: 22px 24px 18px; border-radius: 24px; border: 1px solid var(--line); overflow: hidden;
    background: radial-gradient(700px 260px at 15% 0%, rgba(255, 140, 26, .1), transparent 70%), radial-gradient(800px 300px at 90% 100%, rgba(34, 179, 173, .16), transparent 70%), linear-gradient(160deg, var(--surface), var(--bg-2)); }
.flk-hero h1, .flk-pl-head h1 { font-size: clamp(1.45rem, 3.6vw, 2.1rem); font-weight: 900; line-height: 1.3; margin: 6px 0 8px; }
.flk-hero p, .flk-pl-head p { margin: 0 0 .6rem; color: var(--muted); line-height: 2; }
.flk-hero > :last-child, .flk-pl-head > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .flk-hero, .flk-pl-head { padding: 20px 18px 16px; } }
.flk-hero .flk-stat { color: var(--fg); }
.flk-hero .flk-stat b { color: var(--orange-ink); }
.flk-hero .flk-kicker { margin-bottom: 2px; }
.flk-hero-links { justify-content: center; margin-top: 16px !important; gap: 10px !important; }

.flk-tonight {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 18px; margin: 0 0 24px;
}
.flk-tonight h2 { font-size: 1.05rem; margin: 0 0 6px; }
.flk-tonight ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.flk-stars { letter-spacing: 1px; }
.flk-h { font-size: 1.15rem; font-weight: 850; margin: 26px 0 12px; }

/* ---- falakbin.ir/starlink: the chart, the cities, a city's trains ------- */
.flk-sl-figure { margin: 0 auto 22px; max-width: 540px; text-align: center; }
.flk-sl-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #0b1530; }
.flk-sl-figure figcaption { color: var(--muted); font-size: .88rem; margin-top: 6px; }
.flk-sl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flk-sl-chip {
    display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--fg); text-decoration: none; font-size: .9rem;
}
a.flk-sl-chip:hover { border-color: var(--teal); color: var(--fg); }
.flk-sl-chip-on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); font-weight: 700; }
.flk-sl-trains { display: grid; gap: 12px; margin: 0 0 22px; }
.flk-sl-train ul, .flk-sl-tips { margin: 0; padding: 0 1.1rem 0 0; }
.flk-sl-train li, .flk-sl-tips li { margin: 2px 0; font-size: .95rem; }

/* ---- falakbin.ir/planets: one night over Tehran, and the archive. The
   timeline is inline SVG drawn on the server, so its classes live here. ---- */
.flk-pl-kicker { color: var(--orange-ink); font-weight: 800; font-size: .88rem; }
.flk-pl-nav { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; font-size: .92rem; }
.flk-pl-nav a { text-decoration: none; }
.flk-pl-quote {
    margin: 10px auto 16px; max-width: 46rem; padding: 10px 16px; border-inline-start: 4px solid var(--orange);
    background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 1.02rem;
}
.flk-pl-chart { margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 10px 8px; }
.flk-pl-chart figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; color: var(--muted); font-size: .85rem; padding-top: 4px; }
.flk-pl-caption { justify-content: flex-start !important; font-weight: 600; color: var(--fg) !important; padding: 0 4px 6px !important; }
.flk-chart-frame { stroke: var(--line); stroke-width: 1; }
.flk-chart-hour { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.flk-pl-chart .flk-chart-hour { stroke: var(--line); stroke-opacity: .6; }
.flk-chart-tick { fill: var(--muted); font-size: 12px; }
.flk-chart-sun { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 3 3; }
.flk-chart-sunlabel { fill: var(--fg); font-size: 12.5px; }
.flk-chart-label { fill: var(--fg); font-size: 14px; font-weight: 600; }
.flk-chart-faint { fill: var(--muted); font-weight: 400; }
.flk-chart-best { stroke: #03181c; stroke-width: 2; }
.flk-key { display: inline-block; width: 18px; height: 8px; border-radius: 4px; vertical-align: middle; margin-inline-end: 4px; background: var(--muted); }
.flk-key-line { height: 3px; opacity: .6; }
.flk-key-bar { background: #e8cf7a; }
.flk-key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.flk-key-sky { width: 30px; background: linear-gradient(to left, #8fb8e8, #5577b0, #2f4579, #1b2a52, #0d1733); }
.flk-key-0 { background: #b9a89a; } .flk-key-1 { background: #ffd36e; } .flk-key-2 { background: #ff7b54; } .flk-key-3 { background: #f2b880; }
.flk-key-4 { background: #e8cf7a; } .flk-key-5 { background: #7fd6d0; } .flk-key-6 { background: #7ea6ff; }
.flk-pl-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.flk-pl-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 18px; margin: 0 0 16px; }
.flk-pl-box h2 { font-size: 1.05rem; margin: 0 0 6px; }
.flk-pl-box h2 small { color: var(--muted); font-weight: 400; font-size: .85rem; }
/* Observing in daylight: for the experienced, so set apart. */
.flk-pl-day { border-inline-start: 3px solid var(--orange); }
.flk-pl-list { margin: 0; padding: 0 1.1rem 0 0; }
.flk-pl-list li { margin: 3px 0; }
.flk-pl-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flk-pl-days a { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); text-decoration: none; font-size: .9rem; }
.flk-pl-days a:hover { border-color: var(--teal); }
.flk-pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin: 0 0 18px; }
.flk-pl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; }
.flk-pl-card h3 { margin: 0 0 6px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.flk-pl-card h3 small { color: var(--muted); font-weight: 400; font-size: .85rem; }
.flk-pl-sym { font-size: 1.3rem; line-height: 1; }
.flk-pl-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: .93rem; }
.flk-pl-card dt { color: var(--muted); }
.flk-pl-card dd { margin: 0; }
.flk-pl-note, .flk-pl-tip, .flk-pl-warn { margin: 8px 0 0; font-size: .92rem; line-height: 1.8; }
.flk-pl-tip { background: var(--teal-soft); border-radius: 8px; padding: 6px 10px; }
.flk-pl-warn { color: #ff8a80; }
:root[data-theme="light"] .flk-pl-warn { color: #b3261e; }
.flk-pl-cta { text-align: center; padding: 10px 0 4px; }
.flk-pl-cta p { margin: 0 0 8px; color: var(--muted); }
/* SVG text scales with the chart: on a phone the chart keeps a readable width and scrolls inside its box. */
@media (max-width: 780px) { .flk-pl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .flk-pl-scroll .flk-chart { min-width: 760px; } }

/* ---- falakbin.ir/starlink/archive: a launch's fading, the nights ------- */
.flk-sl-fade { display: flex; align-items: center; gap: 10px; margin: 0; }
.flk-sl-spark { color: var(--orange); flex: none; }
.flk-sl-nights { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.flk-sl-nights li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.flk-sl-thumb { display: block; width: 180px; margin: 0 0 10px; }
.flk-sl-thumb img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #0b1530; }
.flk-sl-name { white-space: nowrap; }
.flk-dome-wrap { display: flex; justify-content: center; }
.flk-dome-wrap > div { width: 100%; max-width: 440px; }
.flk-dome { max-width: 420px; }
.flk-dome-disc { stroke: var(--line); stroke-width: 1.5; transition: fill .3s; }
.flk-dome-ring { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 4; }
.flk-dome-dir { fill: var(--muted); font-size: 13px; font-weight: 700; }
.flk-dome-body { stroke: #0d1733; stroke-width: 1.5; }
.flk-dome-name { fill: #f3f5fb; font-size: 12.5px; font-weight: 600; paint-order: stroke; stroke: rgba(8, 14, 32, .75); stroke-width: 3px; }
.flk-dome-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.flk-dome-controls input[type="range"] { flex: 1 1 220px; max-width: 420px; accent-color: var(--orange); }
.flk-dome-controls output { min-width: 11rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.flk-dome-controls .flk-btn { border: 0; cursor: pointer; font: inherit; font-size: .85rem; direction: rtl; }
.flk-dome-below { text-align: center; margin: 6px 0 0; }
.flk-dome-box:not(.flk-dome-ready) .flk-dome-controls, .flk-dome-box:not(.flk-dome-ready) .flk-dome-below { display: none; }

/* ---- falakbin.ir/launch: the launches, one launch, the stats. Bar and
   column lengths are data-l levels 0–10, since the policy allows no inline style. */
.flk-ln-launch { margin: 0 0 12px; }
.flk-ln-launch h1, .flk-ln-launch h3 { margin: 4px 0 6px; font-size: 1.1rem; }
.flk-ln-launch h1 { font-size: 1.35rem; }
.flk-ln-launch h1 a, .flk-ln-launch h3 a { color: var(--fg); text-decoration: none; }
.flk-ln-launch p { margin: 2px 0; color: var(--fg); flex: 0 0 auto; }
.flk-ln-launch .flk-card-links { margin-top: 8px; }
.flk-ln-photo { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 4px; }
.flk-ln-when time { display: inline-block; font-size: 1.3rem; font-weight: 850; color: var(--gold); font-variant-numeric: tabular-nums; }
.flk-ln-lead .flk-ln-when time { font-size: 1.7rem; }
.flk-ln-line { color: var(--muted) !important; font-style: italic; }
.flk-ln-pill { display: inline-block; font-size: .75rem; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.flk-ln-ok { color: var(--ok); border-color: var(--ok); }
.flk-ln-bad { color: var(--bad); border-color: var(--bad); }
.flk-ln-results { margin: 0; padding: 0 1.1rem 0 0; }
.flk-ln-results li { margin: 3px 0; }
.flk-ln-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.flk-ln-cards div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.flk-ln-cards b { display: block; font-size: 1.5rem; color: var(--gold); }
.flk-ln-cards span { color: var(--muted); font-size: .85rem; }
.flk-ln-bars div { display: grid; grid-template-columns: 9rem 1fr 3rem; gap: 8px; align-items: center; margin: 4px 0; }
.flk-ln-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flk-ln-bars i { display: block; height: 10px; border-radius: 6px; background: var(--teal); min-width: 3px; }
.flk-ln-bars b { font-weight: 600; color: var(--muted); }
.flk-ln-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 140px; align-items: end; direction: ltr; }
.flk-ln-hours div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.flk-ln-hours i { display: block; background: var(--teal); border-radius: 3px 3px 0 0; min-height: 2px; }
.flk-ln-hours span { font-size: .62rem; color: var(--muted); text-align: center; }
.flk-ln-bars i[data-l="0"] { width: 0; } .flk-ln-bars i[data-l="1"] { width: 10%; } .flk-ln-bars i[data-l="2"] { width: 20%; } .flk-ln-bars i[data-l="3"] { width: 30%; }
.flk-ln-bars i[data-l="4"] { width: 40%; } .flk-ln-bars i[data-l="5"] { width: 50%; } .flk-ln-bars i[data-l="6"] { width: 60%; } .flk-ln-bars i[data-l="7"] { width: 70%; }
.flk-ln-bars i[data-l="8"] { width: 80%; } .flk-ln-bars i[data-l="9"] { width: 90%; } .flk-ln-bars i[data-l="10"] { width: 100%; }
.flk-ln-hours i[data-l="0"] { height: 0; } .flk-ln-hours i[data-l="1"] { height: 10%; } .flk-ln-hours i[data-l="2"] { height: 20%; } .flk-ln-hours i[data-l="3"] { height: 30%; }
.flk-ln-hours i[data-l="4"] { height: 40%; } .flk-ln-hours i[data-l="5"] { height: 50%; } .flk-ln-hours i[data-l="6"] { height: 60%; } .flk-ln-hours i[data-l="7"] { height: 70%; }
.flk-ln-hours i[data-l="8"] { height: 80%; } .flk-ln-hours i[data-l="9"] { height: 90%; } .flk-ln-hours i[data-l="10"] { height: 100%; }
@media (max-width: 480px) { .flk-ln-bars div { grid-template-columns: 6rem 1fr 2.4rem; } .flk-ln-lead .flk-ln-when time { font-size: 1.45rem; } }

@media print {
    .flk-top, .flk-tabbar, .flk-foot-in, .flk-foot-band, .flk-foot-maker-band, .flk-where, .flk-skip { display: none !important; }
    body { padding-bottom: 0; }
}

/* ---- falakbin.ir/launch: the pads map (fb-pads.js) and the country filter -- */
.flk-ln-map { margin: 0 0 16px; }
.flk-ln-mapbox { position: relative; aspect-ratio: 2.6; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
    background: radial-gradient(120% 120% at 50% 40%, var(--bg-2), var(--bg)); }
.flk-ln-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flk-ln-filter { margin-top: 10px; }
.flk-ln-filter[hidden] { display: none; }
.flk-ln-filter .flk-chip { cursor: pointer; font: inherit; font-size: .84rem; }
.flk-ln-launch[hidden] { display: none; }
@media (max-width: 560px) { .flk-ln-mapbox { aspect-ratio: 1.7; } }

/* ---- The site-wide announcement (settings site_announcement…, SiteArticles::announcement) --------- */
.flk-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 16px; background: var(--orange-soft); border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 700; text-align: center; }
.flk-notice .flk-i { flex: none; color: var(--orange-ink); }
.flk-notice a { color: var(--fg); }

/* ---- The search (fb-search.js): the box on a page and in the header's dialog, its suggestions; a linked entity in a text (EntityLinker) ---- */
.flk-search-btn[hidden] { display: none; }
.flk-kb-search { position: relative; margin-top: 14px; max-width: 34rem; }
.flk-kb-search label { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; }
.flk-kb-search label:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.flk-kb-search .flk-i { width: 18px; height: 18px; color: var(--muted); flex: none; }
.flk-kb-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: 1rem; padding: 11px 0; outline: none; }
.flk-sg { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); max-height: 60vh; overflow-y: auto; }
.flk-sg[hidden] { display: none; }
.flk-sg a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--fg); text-decoration: none; }
.flk-sg a:hover, .flk-sg li[aria-selected="true"] a { background: var(--teal-soft); color: var(--teal-ink); }
.flk-sg b { font-weight: 700; }
.flk-sg small { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.flk-sgd .flk-cityp-box { overflow: visible; }
.flk-sgd .flk-kb-search { margin-top: 0; max-width: none; }
.flk-sgd .flk-sg { position: static; margin-top: 8px; box-shadow: none; }
/* A link EntityLinker made to an encyclopedia entry or a glossary term (Ashkan, 2026-10-24): the word itself in teal,
   no line under it, and a small raised question mark in a teal disc after it ("there is an explanation"), hanging half
   over what follows so a comma stays close (it sits
   above the line, where a comma never is). On a pointer that hovers, fb-peek.js shows a card of what the page says (.flk-peek). */
a.flk-kb-link { color: var(--teal-ink); text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a.flk-kb-link::after { content: ""; display: inline-block; width: .64em; height: .64em; margin-inline: -.12em -.34em; vertical-align: .62em; pointer-events: none;
    background: var(--teal); opacity: .8; transform: scaleX(-1); /* the Persian «؟», the Latin mark mirrored */
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><mask id='q'><rect width='24' height='24' fill='white'/><path d='M9 9.3a3 3 0 0 1 5.9.8c0 2.1-2.9 2.5-2.9 4.5' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12' cy='18.3' r='1.6' fill='black'/></mask><circle cx='12' cy='12' r='11.5' fill='black' mask='url(%23q)'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><mask id='q'><rect width='24' height='24' fill='white'/><path d='M9 9.3a3 3 0 0 1 5.9.8c0 2.1-2.9 2.5-2.9 4.5' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12' cy='18.3' r='1.6' fill='black'/></mask><circle cx='12' cy='12' r='11.5' fill='black' mask='url(%23q)'/></svg>") center / contain no-repeat; }
a.flk-kb-link:hover, a.flk-kb-link:focus-visible { text-decoration: underline; text-decoration-color: var(--teal); }
a.flk-kb-link:hover::after, a.flk-kb-link:focus-visible::after { opacity: 1; }
.flk-peek { position: absolute; z-index: 60; inset-inline-start: auto; left: var(--peek-x, 0); top: var(--peek-y, 0); width: min(320px, calc(100vw - 24px));
    min-height: 150px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); color: var(--fg); text-decoration: none; font-size: .86rem; line-height: 1.85;
    opacity: 0; transform: translateY(3px); transition: opacity .1s ease, transform .1s ease; }
.flk-peek.is-on { opacity: 1; transform: none; }
.flk-peek[hidden] { display: none; }
.flk-peek::after { content: ""; position: absolute; left: calc(var(--peek-tip, 50%) - 6px); bottom: -7px; width: 12px; height: 12px; background: var(--surface);
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.flk-peek.is-below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.flk-peek-kind { color: var(--teal-ink); font-size: .74rem; font-weight: 800; }
.flk-peek-name { font-weight: 850; font-size: .98rem; line-height: 1.6; }
/* Physical: the English runs left to right, so its own inline start is the wrong side. */
.flk-peek-en { margin-right: 8px; color: var(--muted); font-weight: 500; font-size: .8rem; }
.flk-peek-text { color: var(--muted); }
/* The ring while the words come, filling the card's height between the name and the way there. */
.flk-peek-wait { flex: 1; min-height: 0; }
.flk-peek-go { margin-top: auto; align-self: flex-end; color: var(--teal-ink); font-size: .78rem; font-weight: 700; }
.flk-peek-go::after { content: " ←"; }
.flk-peek:hover .flk-peek-go { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .flk-peek { transition: none; transform: none; } }

/* ---- «Get this every day in Telegram» above the footer of a bot's pages (daily_cta) ---- */
.flk-daily { margin-top: 40px; }
.flk-daily-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--surface), var(--bg-2)); }
.flk-daily-pic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--teal-soft); color: var(--teal-ink); }
.flk-daily-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flk-daily-pic .flk-i { width: 30px; height: 30px; }
.flk-daily-text { flex: 1 1 320px; min-width: 0; }
.flk-daily-text h2 { margin: 2px 0 4px; font-size: 1.15rem; font-weight: 850; }
.flk-daily-text p:not(.flk-kicker) { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.9; }
.flk-daily-go { display: flex; flex-wrap: wrap; gap: 8px; }
/* The offline page (/offline). */
.flk-offline { text-align: center; padding: 60px 16px; }
.flk-offline .flk-i { width: 48px; height: 48px; color: var(--teal-ink); }

/* Pointer and touch on the drawn scenes, as classes (a script's inline style is blocked by the CSP in Firefox). */
.flk-g-pan { touch-action: pan-y; } .flk-g-nopan { touch-action: none; }
.flk-g-grab { cursor: grab; } .flk-g-grabbing { cursor: grabbing; } .flk-g-point { cursor: pointer; } .flk-g-cross { cursor: crosshair; }

/* ---- The picture opened whole (fb-zoom.js): a dialog over everything, full screen where the browser allows ---- */
.flk-zoomable { cursor: zoom-in; }
.flk-zoom-open { overflow: hidden; }
.flk-zoom { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.flk-zoom[open] { display: grid; place-items: center; }
.flk-zoom::backdrop { background: #000; }
.flk-zoom img { display: block; max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; object-fit: contain; transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(var(--zs, 1)); transform-origin: center; will-change: transform; cursor: zoom-in; -webkit-user-drag: none; }
.flk-zoom img.is-anim { transition: transform .22s var(--ease); }
.flk-zoom.is-zoomed img { cursor: grab; }
.flk-zoom.is-zoomed img:active { cursor: grabbing; }
.flk-zoom-bar { position: absolute; top: max(10px, env(safe-area-inset-top)); inset-inline-end: 10px; z-index: 2; display: flex; gap: 6px; }
.flk-zoom-bar button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.flk-zoom-bar button:hover, .flk-zoom-bar button:focus-visible { background: rgba(0, 0, 0, .8); border-color: var(--orange); outline: none; }
.flk-zoom-bar .flk-i { width: 20px; height: 20px; }
.flk-zoom-hint { position: absolute; inset: auto 0 max(14px, env(safe-area-inset-bottom)); margin: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: .8rem; pointer-events: none; animation: flk-zoom-hint 4s forwards; }
.flk-zoom.is-zoomed .flk-zoom-hint { display: none; }
@keyframes flk-zoom-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flk-zoom img.is-anim { transition: none; } }

/* The message to the maker (fb-contact.js, SiteContact): a modal dialog with one form. */
.flk-contact-btn[hidden] { display: none; }
.flk-ct { width: min(600px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.flk-ct[open] { display: flex; }
.flk-ct::backdrop { background: rgba(1, 10, 12, .62); }
.flk-ct-box { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 26px); }
.flk-ct-box[hidden] { display: none; }
.flk-ct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 4px; }
.flk-ct-head h2 { margin: 0; font-size: 1.1rem; font-weight: 850; }
.flk-ct-body { display: flex; flex-direction: column; gap: 12px; padding: 6px 18px 12px; overflow-y: auto; }
.flk-ct-note { margin: 0; color: var(--muted); font-size: .88rem; }
.flk-ct-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.flk-ct-field > span { font-size: .85rem; font-weight: 700; }
.flk-ct-field i, .flk-ct-reach legend i { font-style: normal; font-weight: 400; color: var(--muted); }
.flk-ct-field input, .flk-ct-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--fg); font: inherit; padding: 9px 12px; outline: none; }
.flk-ct-field textarea { resize: vertical; min-height: 7.5em; line-height: 1.8; }
.flk-ct-field input:focus, .flk-ct-field textarea:focus { border-color: var(--teal); }
.flk-ct-field input[dir="ltr"] { text-align: left; }
.flk-ct-field input::placeholder { color: var(--muted); opacity: .7; }
.flk-ct-field small { color: var(--muted); font-size: .75rem; }
.flk-ct-count { align-self: flex-end; }
.flk-ct-count.is-short { color: var(--warn); }
.flk-ct-reach { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line-soft); border-radius: 14px; }
.flk-ct-reach legend { padding: 0 6px; font-size: .85rem; font-weight: 700; }
.flk-ct-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.flk-ct-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flk-ct-privacy { margin: 0; color: var(--muted); font-size: .78rem; }
.flk-ct-status { margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--muted); }
.flk-ct-status:empty { min-height: 0; }
.flk-ct-status.is-bad { color: var(--bad); }
.flk-ct-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); }
.flk-ct-actions .flk-btn:disabled { opacity: .6; cursor: progress; }
.flk-ct-ok { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 1.05rem; font-weight: 800; color: var(--ok); }
.flk-ct-ok .flk-i { width: 1.4em; height: 1.4em; }
@media (max-width: 560px) { .flk-ct-row { grid-template-columns: 1fr; } }
/* A reader's suggestion (fb-submit.js, SiteSubmissions; docs/plans/observe-and-almanac.md). Each phase's form brings its own layout. */
.flk-sub-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flk-sub-status { margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--muted); }
.flk-sub-status:empty { min-height: 0; }
.flk-sub-status.is-bad { color: var(--bad); }
.flk-sub-done { margin: 10px 0 0; font-weight: 800; color: var(--ok); }
[data-widget="submit"] [aria-invalid="true"] { border-color: var(--bad); }
/* A night's story (NightStory; docs/plans/falakbin-rich-pages.md, phase 2). */
.flk-pl-story { margin: 10px auto 18px; }
.flk-pl-story h2 { margin-top: 6px; }
.flk-pl-kicker .flk-i { width: 1.1em; height: 1.1em; margin-inline-end: 4px; vertical-align: -.15em; }
/* The third wave's lab cards (CosmosLabs; Views/public/lab_art_<slug>), each moved here from its lab-<slug>.css. */
/* dark-matter */
.flk-art-dark-matter-halo circle { fill: rgba(150, 135, 240, .075); }
.flk-art-dark-matter-glow { fill: rgba(255, 200, 140, .22); }
.flk-art-dark-matter-stars circle { fill: #cfe0ff; }
.flk-art-dark-matter-core { fill: rgba(255, 214, 150, .9); }
.flk-art-dark-matter-arm { fill: none; stroke: rgba(170, 200, 255, .55); stroke-width: 2.2; stroke-linecap: round; }
.flk-art-dark-matter-axis { fill: none; stroke: rgba(147, 184, 182, .4); stroke-width: 1; }
.flk-art-dark-matter-flat { fill: none; stroke: #ff8c1a; stroke-width: 2.2; stroke-linecap: round; }
.flk-art-dark-matter-fall { fill: none; stroke: #cfe9e6; stroke-width: 1.4; stroke-dasharray: 4 3; }
.flk-art-dark-matter-dot { fill: #ffffff; }
/* expansion */
.flk-art-expansion-gal { fill: #e9f6ff; }
.flk-art-expansion-arrow { fill: none; stroke: #3fcac3; stroke-width: 1.4; stroke-linecap: round; }
.flk-art-expansion-us { fill: none; stroke: #ff8c1a; stroke-width: 1.6; }
.flk-art-expansion-grow { transform-box: view-box; transform-origin: 120px 66px; animation: flk-art-expansion-grow 5s ease-in-out infinite alternate; }
.flk-art-expansion-curve { fill: none; stroke: #ffb054; stroke-width: 1.6; opacity: .6; stroke-dasharray: 300; stroke-dashoffset: 300; animation: flk-art-draw 5s ease-out infinite; }
@keyframes flk-art-expansion-grow { from { transform: scale(.72); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .flk-art-expansion-grow, .flk-art-expansion-curve { animation: none; stroke-dashoffset: 0; } }

/* «message to Ashkan» button while its form loads (fb-core.js): its icon turns into a spinner */
[data-contact-open].is-loading { cursor: progress; }
[data-contact-open].is-loading > svg { display: none; }
[data-contact-open].is-loading::before { content: ""; flex: none; width: 1em; height: 1em; box-sizing: border-box; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: flk-ct-spin .7s linear infinite; }
@keyframes flk-ct-spin { to { transform: rotate(360deg); } }

/* Waiting (Ashkan, 2026-10-23): whatever the reader waits for while the browser builds it (a lab's scene, a sky,
   a globe, a map, a tool) shows a turning ring, never a still sentence alone. A new placeholder is .flk-wait:
   fb-core hides it once its widget has mounted (data-ready) and stills it if the widget failed (data-failed).
   A stage's own placeholder (.flk-sim-wait and its kin) holds its icon inside the ring, its line under it,
   and goes when the scene is drawn; a script that turns it into an error adds .flk-wait-off. */
.flk-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; margin: 0; color: var(--muted); font-size: .9rem; text-align: center; }
.flk-wait::before, .flk-mn-map-wait::before, .flk-ch-list-wait::before, .flk-qz-wait::before {
    content: ""; flex: none; display: inline-block; width: 20px; height: 20px; box-sizing: border-box; vertical-align: middle; margin-inline-end: 8px;
    border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--teal); animation: flk-wait-turn .8s linear infinite; }
.flk-wait::before { margin: 0; }
.flk-sim-wait::before, .flk-sk-wait::before, .flk-hm-dome-wait::before {
    content: ""; grid-area: 1 / 1; width: 60px; height: 60px; box-sizing: border-box; border-radius: 50%;
    border: 3px solid rgba(147, 184, 182, .2); border-top-color: #6fe0d8; animation: flk-wait-turn .9s linear infinite; }
.flk-sim-wait > .flk-i, .flk-sk-wait > .flk-i, .flk-hm-dome-wait > .flk-i { grid-area: 1 / 1; place-self: center; width: 24px; height: 24px; }
[data-ready] .flk-wait, [data-ready].flk-wait { display: none; }
[data-failed] .flk-wait::before, .flk-wait-off::before { display: none; }
.flk-wait-retry { cursor: pointer; font: inherit; font-size: .84rem; }
@keyframes flk-wait-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .flk-wait::before, .flk-mn-map-wait::before, .flk-ch-list-wait::before, .flk-qz-wait::before,
    .flk-sim-wait::before, .flk-sk-wait::before, .flk-hm-dome-wait::before { animation-duration: 2.4s; }
}
@media (scripting: none) {
    .flk-wait::before, .flk-mn-map-wait::before, .flk-ch-list-wait::before, .flk-qz-wait::before,
    .flk-sim-wait::before, .flk-sk-wait::before, .flk-hm-dome-wait::before { display: none; }
}

/* Under every lab and tool (Ashkan, 2026-10-23): who made it, after the article's editor box (pages.css .flk-ln-editor). */
.flk-made { display: flex; gap: 16px; align-items: center; margin: 22px 0 0; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line);
    background: radial-gradient(420px 160px at 90% 0%, rgba(255, 140, 26, .08), transparent 70%), var(--surface); }
.flk-made img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--orange); }
.flk-made p { margin: 0; line-height: 1.9; }
.flk-made .flk-kicker { margin-bottom: 2px; }
.flk-made-who { font-size: 1.05rem; font-weight: 850; }
.flk-made-who a { color: inherit; }
.flk-made-what { color: var(--muted); font-size: .9rem; text-wrap: pretty; }
.flk-made-more { font-size: .88rem; }
@media (max-width: 540px) { .flk-made { align-items: flex-start; gap: 12px; padding: 14px; } .flk-made img { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { [data-contact-open].is-loading::before { animation-duration: 2s; } }
/* galaxies */
.flk-art-galaxies-glow-a { fill: rgba(63, 202, 195, .1); }
.flk-art-galaxies-glow-b { fill: rgba(255, 140, 26, .1); }
.flk-art-galaxies-arm-a { fill: none; stroke: #6fe0d8; stroke-width: 2; stroke-linecap: round; opacity: .9; vector-effect: non-scaling-stroke; }
.flk-art-galaxies-arm-b { fill: none; stroke: #ffb054; stroke-width: 1.8; stroke-linecap: round; opacity: .9; vector-effect: non-scaling-stroke; }
.flk-art-galaxies-tail-a { fill: none; stroke: rgba(111, 224, 216, .55); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 3.2; }
.flk-art-galaxies-tail-b { fill: none; stroke: rgba(255, 176, 84, .55); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 3.2; }
.flk-art-galaxies-core { fill: #fff3d6; }
.flk-art-galaxies-path { fill: none; stroke: rgba(207, 233, 230, .35); stroke-width: 1; stroke-dasharray: 3 4; animation: flk-lab-flow 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .flk-art-galaxies-path { animation: none; } }
/* gravitational-waves */
.flk-art-gravitational-waves-bh { fill: #000; stroke: #9ff0ea; stroke-width: 1.3; }
.flk-art-gravitational-waves-bh2 { fill: #000; stroke: #ffc27a; stroke-width: 1.3; }
.flk-art-gravitational-waves-ripple { fill: none; stroke: #3fcac3; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: flk-art-wave 3s ease-out infinite; }
.flk-art-gravitational-waves-ripple.flk-art-gravitational-waves-d2 { animation-delay: 1s; }
.flk-art-gravitational-waves-ripple.flk-art-gravitational-waves-d3 { animation-delay: 2s; }
.flk-art-gravitational-waves-chirp { fill: none; stroke: #ff8c1a; stroke-width: 1.5; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .flk-art-gravitational-waves-ripple { animation: none; opacity: .5; } }
/* elements */
.flk-art-elements-cell { fill: #0a2a30; stroke: rgba(147, 184, 182, .3); stroke-width: .6; }
.flk-art-elements-bb { fill: #a99ff6; } .flk-art-elements-cr { fill: #4fe3cc; } .flk-art-elements-lm { fill: #ffc93c; }
.flk-art-elements-ms { fill: #e07b2c; } .flk-art-elements-wd { fill: #5b6cf0; } .flk-art-elements-ns { fill: #d0459a; }
.flk-art-elements-pick { fill: #0a2a30; stroke: #ff8c1a; stroke-width: 1.6; }
.flk-art-elements-sym { fill: #ffffff; font: 800 13px Vazirmatn, Tahoma, sans-serif; text-anchor: middle; direction: ltr; }
.flk-art-elements-num { fill: #93b8b6; font: 700 5px Vazirmatn, Tahoma, sans-serif; direction: ltr; text-anchor: start; }
.flk-art-elements-glow { fill: rgba(208, 69, 154, .28); }
.flk-art-elements-on { animation: flk-art-elements-on 4.8s ease-in-out infinite; }
.flk-art-elements-d1 { animation-delay: .4s; } .flk-art-elements-d2 { animation-delay: .9s; } .flk-art-elements-d3 { animation-delay: 1.4s; }
.flk-art-elements-boom { transform-box: fill-box; transform-origin: center; animation: flk-art-wave 4.8s ease-out infinite; fill: none; stroke: #d0459a; stroke-width: 2; }
.flk-art-elements-star { fill: #fff; }
.flk-art-elements-trail { fill: none; stroke: #d0459a; stroke-width: 1.4; stroke-dasharray: 4 4; animation: flk-lab-flow 1.6s linear infinite; opacity: .85; }
@keyframes flk-art-elements-on { 0%, 100% { opacity: .35; } 40%, 70% { opacity: 1; } }
/* star-life */
.flk-art-star-life-ms { fill: none; stroke: rgba(63, 202, 195, .28); stroke-width: 9; stroke-linecap: round; }
.flk-art-star-life-o { fill: #9fc0ff; } .flk-art-star-life-a { fill: #e4ecff; } .flk-art-star-life-g { fill: #ffe9c7; }
.flk-art-star-life-k { fill: #ffc58f; } .flk-art-star-life-m { fill: #ff9d6b; }
.flk-art-star-life-giant { fill: #ff7a52; transform-box: fill-box; transform-origin: center; animation: flk-art-star-life-breathe 3.2s ease-in-out infinite alternate; }
.flk-art-star-life-glow { fill: rgba(255, 122, 82, .22); transform-box: fill-box; transform-origin: center; animation: flk-art-star-life-breathe 3.2s ease-in-out infinite alternate; }
.flk-art-star-life-wd { fill: #ffffff; }
.flk-art-star-life-neb { fill: none; stroke: rgba(180, 168, 255, .7); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: flk-art-wave 3.6s ease-out infinite; }
@keyframes flk-art-star-life-breathe { from { transform: scale(.9); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    .flk-art-star-life-giant, .flk-art-star-life-glow, .flk-art-star-life-neb { animation: none; }
}
/* cosmic-history: card (the card's picture, Views/public/lab_art_cosmic-history: the year as a band, its last moment under a lens with a clock). */
.flk-art-ch-tick { stroke: rgba(3, 20, 26, .55); stroke-width: 1; }
.flk-art-ch-bang { fill: rgba(255, 214, 140, .35); }
.flk-art-ch-core { fill: #fff3d6; }
.flk-art-ch-k { fill: #b4a8ff; } .flk-art-ch-e { fill: #ffd166; } .flk-art-ch-l { fill: #3ccf91; } .flk-art-ch-h { fill: #3fcac3; }
.flk-art-ch-cone { fill: rgba(63, 202, 195, .08); stroke: rgba(111, 224, 216, .45); stroke-width: 1; stroke-dasharray: 3 3; }
.flk-art-ch-lens { fill: #04161b; stroke: #6fe0d8; stroke-width: 1.6; }
.flk-art-ch-face { stroke: rgba(207, 233, 230, .6); stroke-width: 1.2; }
.flk-art-ch-hand { stroke: #e7f5f3; stroke-width: 2; stroke-linecap: round; }
.flk-art-ch-sec { stroke: #ff8c1a; stroke-width: 1.2; stroke-linecap: round; animation: flk-art-ch-turn 6s steps(60) infinite; }
.flk-art-ch-halo { fill: rgba(63, 202, 195, .08); }
.flk-art-ch-win { fill: #02090d; stroke: rgba(111, 224, 216, .5); stroke-width: 1.2; }
.flk-art-ch-gal { fill: none; stroke: #b2d0ff; stroke-width: 1.6; stroke-linecap: round; opacity: .85; animation: flk-art-ch-turn 24s linear infinite reverse; }
.flk-art-ch-cursor { fill: #ff8c1a; animation: flk-art-ch-run 9s cubic-bezier(.3, 0, .9, .6) infinite; }
@keyframes flk-art-ch-turn { to { transform: rotate(360deg); } }
@keyframes flk-art-ch-run { from { transform: translateX(0); } 92%, to { transform: translateX(-202px); } }
/* exoplanets */
.flk-art-exo-star { fill: url(#flk-art-exo-limb); }
.flk-art-exo-planet { fill: #04161c; stroke: #6fe0d8; stroke-width: 1; animation: flk-art-exo-cross 6s linear infinite; }
.flk-art-exo-base { fill: none; stroke: rgba(147, 184, 182, .2); stroke-width: 1; }
.flk-art-exo-curve { fill: none; stroke: #ff8c1a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: flk-art-exo-trace 6s linear infinite; }
@keyframes flk-art-exo-cross { from { transform: translateX(0); } to { transform: translateX(-200px); } }
@keyframes flk-art-exo-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .flk-art-exo-planet { animation: none; transform: translateX(-100px); }
    .flk-art-exo-curve { animation: none; stroke-dashoffset: 0; }
}
/* black-hole */
.flk-art-black-hole-near { fill: none; stroke-width: 6; stroke-linecap: round; }
.flk-art-black-hole-far { fill: none; stroke: #ffb054; stroke-width: 3.2; opacity: .85; }
.flk-art-black-hole-under { stroke-width: 2; opacity: .6; }
.flk-art-black-hole-ring { fill: none; stroke: #ffe6c4; stroke-width: 1.2; opacity: .9; }
.flk-art-black-hole-hole { fill: #000; }
.flk-art-black-hole-glow { fill: rgba(255, 140, 26, .12); }
.flk-art-black-hole-flow { fill: none; stroke: rgba(255, 244, 224, .75); stroke-width: 1.4; stroke-dasharray: 3 9; animation: flk-lab-flow 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .flk-art-black-hole-flow { animation: none; } }
/* spectra */
.flk-art-spectra-band { opacity: .95; }
.flk-art-spectra-line { stroke: #03141a; stroke-width: 2.2; }
.flk-art-spectra-curve { fill: none; stroke: #e7f5f3; stroke-width: 1.5; stroke-linejoin: round; }
.flk-art-spectra-fill { fill: rgba(63, 202, 195, .16); }
.flk-art-spectra-slide { animation: flk-art-spectra-slide 5s ease-in-out infinite alternate; }
.flk-art-spectra-mark { stroke: #ff8c1a; stroke-width: 1.4; stroke-dasharray: 3 3; }
.flk-art-spectra-tip { fill: #ff8c1a; }
@keyframes flk-art-spectra-slide { 0% { transform: translateX(-14px); } 45%, 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .flk-art-spectra-slide { animation: none; } }
/* relativity */
.flk-art-relativity-streak { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.flk-art-relativity-blue { stroke: #9fc4ff; }
.flk-art-relativity-red { stroke: #ff8a6a; opacity: .7; }
.flk-art-relativity-star { fill: #e9f6ff; }
.flk-art-relativity-hot { fill: #b9d3ff; }
.flk-art-relativity-cool { fill: #ffb08a; }
.flk-art-relativity-ring { fill: none; stroke: #ff8c1a; stroke-width: 1.4; }
.flk-art-relativity-guide { fill: none; stroke: rgba(63, 202, 195, .6); stroke-width: 1; stroke-dasharray: 3 3; }
.flk-art-relativity-pulse { transform-box: fill-box; transform-origin: center; animation: flk-art-relativity-in 3.2s ease-in infinite; }
.flk-art-relativity-pulse.flk-art-relativity-d2 { animation-delay: -1.1s; }
.flk-art-relativity-pulse.flk-art-relativity-d3 { animation-delay: -2.2s; }
@keyframes flk-art-relativity-in { 0% { transform: scale(1.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flk-art-relativity-pulse { animation: none; opacity: .8; transform: none; } }
/* system-builder */
.flk-art-sb-trail { fill: none; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.flk-art-sb-t1 { stroke: rgba(63, 202, 195, .7); }
.flk-art-sb-t2 { stroke: rgba(255, 176, 84, .75); stroke-dasharray: 5 4; animation: flk-lab-flow 1.6s linear infinite; }
.flk-art-sb-hz { fill: none; stroke: rgba(60, 207, 145, .22); stroke-width: 7; }
.flk-art-sb-arrow { stroke: #ffd8a8; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flk-art-sb-moon { fill: #e6e2d6; }
.flk-art-sb-ring { fill: none; stroke: rgba(63, 202, 195, .55); stroke-width: 1; stroke-dasharray: 2 3; }
@media (prefers-reduced-motion: reduce) { .flk-art-sb-t2 { animation: none; } }

/* The single catalogue footer, also on standalone tools and the curvature lab. */
.flk-recommendations .flk-lab-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.flk-recommend-tool-art { display: grid; place-items: center; min-height: 116px; background: var(--teal-soft); color: var(--teal-ink); }
.flk-recommend-tool-art .flk-i { width: 52px; height: 52px; }

/* ---- «پرسش‌های رایج» of every page (Views/public/faq; docs/plans/learn-articles.md 7.4): numbered cards, answers open, an anchor each ---- */
.flk-faq { counter-reset: faq; }
.flk-faq-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.25rem; font-weight: 900; scroll-margin-top: calc(var(--top-h, 64px) + 16px); }
.flk-faq-head .flk-i { width: 1.1em; height: 1.1em; color: var(--teal-ink); }
.flk-faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 52rem; }
.flk-faq-item { position: relative; padding: 12px 16px 2px 16px; padding-inline-start: 52px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); scroll-margin-top: calc(var(--top-h, 64px) + 16px); }
.flk-faq-item::before { counter-increment: faq; content: counter(faq, persian); position: absolute; inset-inline-start: 14px; top: 13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-ink); font-size: .82rem; font-weight: 900; }
.flk-faq-item:target { border-color: var(--teal); }
.flk-faq-item h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 850; line-height: 1.8; }
.flk-faq-item h3 a { color: var(--fg); text-decoration: none; }
.flk-faq-item h3 a:hover { color: var(--teal-ink); }
.flk-faq-a { max-width: none; font-size: .96rem; line-height: 2; }
.flk-faq-a p { margin: 0 0 .7rem; }

/* Wisdom: sourced thoughts, home and sidebar. */
.flk-wisdom-card{padding:24px;background:linear-gradient(140deg,color-mix(in srgb,var(--c3) 12%,transparent),transparent 70%);height:100%;display:flex;flex-direction:column;gap:14px}.flk-wisdom-card blockquote,.flk-wisdom-mini blockquote{margin:0;font-size:1.2rem;line-height:2;font-weight:500}.flk-wisdom-card cite{font-style:normal;opacity:.75}.flk-wisdom-card .flk-hm-actions{margin-top:auto}.flk-wisdom-mini{display:block;padding:16px}.flk-wisdom-mini blockquote{font-size:.95rem}.flk-wisdom-mini small{display:block;margin-top:8px;opacity:.7}.flk-wisdom-intro{padding:22px 24px 18px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(130deg,color-mix(in srgb,var(--c3) 10%,transparent),transparent);margin:22px 0 28px}.flk-wisdom-intro h1{font-size:clamp(1.6rem,4.2vw,2.5rem)}.flk-wisdom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}.flk-wisdom-entry{border:1px solid var(--line);border-radius:16px;padding:24px}.flk-wisdom-entry blockquote{font-size:1.2rem;line-height:2;margin:0 0 14px}.flk-wisdom-entry p{line-height:1.9}.flk-wisdom-quote{font-size:clamp(1.3rem,3vw,2rem);line-height:2;padding:24px;border-right:3px solid var(--c3);margin:24px 0}.flk-wisdom-principles{line-height:2;max-width:65ch}

/* Science or myth: evidence cards on home and in the sidebar. */
.flk-myth-card{padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius,18px);background:linear-gradient(135deg,var(--bg),var(--surface));position:relative;overflow:hidden}.flk-myth-card:before{content:"؟";position:absolute;left:1rem;top:-2rem;font-size:9rem;opacity:.07;pointer-events:none}.flk-myth-eyebrow{color:var(--accent);font-size:.85rem;font-weight:700}.flk-myth-card h3{font-size:1.45rem;line-height:1.8;margin:.6rem 0}.flk-myth-card p{color:var(--muted);line-height:1.9}.flk-myth-card details{border-top:1px solid var(--line);padding-top:1rem}.flk-myth-card summary{cursor:pointer;font-weight:700}.flk-myth-card .flk-btn{margin-top:1rem}.flk-myth-side{padding:1rem}.flk-myth-side p{font-size:.9rem;line-height:1.8;margin:.7rem 0}

/* Term bot: the full card and compact live sidebar remain distinct. */
.flk-hm-card[data-module="term"] { border-top: 3px solid var(--teal-ink); }
.flk-hm-card[data-module="term"] > p[lang="en"] { color: var(--teal-ink); font-size: 1.25rem; letter-spacing: .02em; margin-block: 6px 16px; }
.flk-hm-card[data-module="term"] details { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); margin-block: 12px 18px; }
.flk-hm-card[data-module="term"] summary { cursor: pointer; font-weight: 700; }
.flk-side-box[aria-labelledby="side-term"] { border-top: 2px solid var(--teal-ink); }
.flk-side-box[aria-labelledby="side-term"] .flk-side-tx b { font-size: 1.15rem; }

/* Microscope showcase: safe introduction until the first live round. */
.flk-micro-card-photo{display:block}.flk-micro-card-img{display:block;width:100%;height:240px;object-fit:contain;background:#080d18;border-radius:.8rem}.flk-micro-card-intro{display:grid;place-items:center;min-height:150px;background:radial-gradient(circle,rgba(34,179,173,.18),transparent 70%);border-radius:1rem}.flk-micro-card-intro .flk-i{width:70px;height:70px;color:var(--teal-hi)}.flk-micro-card-schedule{font-size:.85rem;line-height:1.9;color:var(--muted)}.flk-micro-side-content{display:grid;gap:.6rem;color:inherit;text-decoration:none}.flk-micro-side-content img{width:100%;height:160px;object-fit:contain;background:#080d18;border-radius:.6rem}.flk-micro-side-intro .flk-i{width:32px;height:32px;color:var(--teal-hi)}

/* Weather: dedicated forecast and measured-rain pages, home card and sidebar. */
.flk-weather-page { display:grid; gap:28px; min-width:0; }
.flk-weather-page>* { min-width:0; }
.flk-weather-page h1 { font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.5; margin:6px 0 14px; }
.flk-weather-page h2 { font-size:1.25rem; margin:0 0 14px; }
.flk-weather-page p { line-height:1.95; }
.flk-weather-hero { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.flk-weather-eyebrow,.flk-weather-date { color:var(--muted); font-size:.82rem; margin:0 0 10px; }
.flk-weather-tags { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.flk-weather-tags span,.flk-weather-badge { border:1px solid var(--line); border-radius:99px; padding:5px 12px; font-size:.78rem; color:var(--muted); }
.flk-weather-card { display:grid; grid-template-columns:minmax(100px,38%) minmax(0,1fr); gap:16px; }
.flk-weather-card:not(:has(.flk-weather-card-map)) { grid-template-columns:1fr; }
.flk-weather-card-map { display:block; align-self:start; background:var(--bg-2); border-radius:var(--radius-sm); overflow:hidden; }
.flk-weather-map { display:block; width:100%; height:auto; }
.flk-weather-copy { min-width:0; padding:4px; }
.flk-weather-copy p { line-height:1.85; font-size:.9rem; }
.flk-weather-copy .flk-hm-head { margin-bottom:10px; }
.flk-weather-mini-stats { display:grid; gap:8px; margin:14px 0; }
.flk-weather-mini-stats div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line-soft); padding-bottom:7px; font-size:.8rem; }
.flk-weather-mini-stats dt { color:var(--muted); }
.flk-weather-mini-stats dd { margin:0; text-align:end; }
.flk-weather-side-link { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:start; text-decoration:none; }
.flk-weather-side-link:not(:has(img)) { grid-template-columns:1fr; }
.flk-weather-side-link p { margin:0 0 8px; line-height:1.85; font-size:.8rem; }
.flk-weather-side-map { width:76px; height:auto; border-radius:8px; }
.flk-weather-explain { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.flk-weather-explain>div,.flk-weather-source { padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.flk-weather-archive { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.flk-weather-entry { display:block; padding:22px; border:1px solid var(--line); border-radius:var(--radius); color:var(--fg); text-decoration:none; }
.flk-weather-entry:hover { border-color:var(--teal); background:var(--surface); }
.flk-weather-entry h3 { font-size:1rem; margin:16px 0 8px; }
.flk-weather-entry p,.flk-weather-entry>span:last-child { color:var(--muted); font-size:.85rem; }
.flk-weather-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; }
.flk-weather-stats>div { padding:18px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.flk-weather-stats dt { color:var(--muted); font-size:.8rem; }
.flk-weather-stats dd { margin:10px 0 0; font-size:1.1rem; font-weight:700; }
.flk-weather-figure { margin:0; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); }
.flk-weather-figure .flk-weather-map { max-width:560px; margin:auto; }
.flk-weather-figure figcaption { margin:14px 0 0; font-size:.82rem; color:var(--muted); line-height:1.8; }
.flk-weather-table-scroll { max-width:100%; min-width:0; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.flk-weather-table { border-collapse:collapse; width:100%; min-width:530px; font-size:.9rem; }
.flk-weather-table caption { padding:16px; text-align:start; color:var(--muted); background:var(--surface); }
.flk-weather-table th,.flk-weather-table td { padding:13px 16px; text-align:start; border-bottom:1px solid var(--line-soft); line-height:1.7; }
.flk-weather-table thead { background:var(--surface); }
.flk-weather-table tbody tr:nth-child(even) { background:var(--bg-2); }
.flk-weather-provinces { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.flk-weather-provinces li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px; background:var(--surface); border-radius:8px; }
.flk-weather-pager { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
.flk-weather-empty { padding:22px; border:1px dashed var(--line); border-radius:var(--radius); color:var(--muted); }
@media(max-width:720px) {
 .flk-weather-hero { padding:20px; }
 .flk-weather-archive,.flk-weather-explain,.flk-weather-stats { grid-template-columns:1fr; }
 .flk-weather-stats>div { display:flex; justify-content:space-between; align-items:center; gap:14px; }
 .flk-weather-stats dd { margin:0; font-size:1rem; }
 .flk-weather-card { grid-template-columns:minmax(85px,32%) minmax(0,1fr); gap:12px; }
 .flk-weather-provinces { grid-template-columns:1fr; }
}