/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · base.css
   Tokens, reset, typography defaults, layout primitives, section rhythm, focus.

   Cascade layers, lowest to highest:
     reset → base → layout → components → lang → utilities
   bloom.css (the signature pieces) and page CSS (src/css/pages/<page>.css) are NOT
   layered, so they always win over the design system without !important and
   without specificity games.

   Rules of the house (DIRECTION 2, 3, 5): logical properties only (no left/right),
   no uppercase, no gradients, no glass, no glow, no near-black ground, nothing under
   16px, colours from tokens only. tools/build.mjs lints every CSS file for these.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset, base, layout, components, lang, utilities;

/* ─────────────────────────────────────────────────────────────── tokens ──
   In the base layer on purpose: tones (components layer) and languages (lang layer)
   must be able to re-point these on the same element. An unlayered :root would beat them. */

@layer base {

:root {
  /* Colour (DIRECTION 2). The palette is the logo: six petals and the gold core, on v6's bone
     ground with deep forest ink. The six logo colours never change; the deep and mist values
     were set by measurement so that text passes WCAG AA on every ground it is allowed on
     (the ratios are in tools/README.md, section 7). */
  --bone: #F5F6F1;          /* page ground */
  --bone-deep: #ECEFE7;     /* rows and quiet fields on white and bone */
  --white: #FFFFFF;         /* panels and cards on bone */
  --ink: #1B2A23;           /* text: 13.8 on bone, 15 on white */
  --ink-deep: #0F1A15;      /* text on clay only (4.6): ink itself is 3.9 there */
  --slate: #48584F;         /* secondary text: 6.0 or better on bone, white and every mist */
  --line: #D3DACD;          /* hairlines */
  --line-strong: #738279;   /* field borders: 3:1 against white and bone */

  --forest: #2F5D50;        /* logo · seniors · primary button, dark sections. White text 7.5 */
  --forest-deep: #1E4338;   /* hover, the footer ground. White text 11 */
  --forest-mist: #DFECE5;
  --gold: #E8B54D;          /* logo core · youth · the one action colour. Ink text 8.0, never white */
  --gold-deep: #76560F;     /* gold for text and small type on light grounds */
  --gold-hover: #F0C669;
  --gold-mist: #FAEDCB;
  --clay: #C4694B;          /* logo · ethnic minorities. Ink-deep text 4.6; white only for large type (3.8) */
  --clay-deep: #964630;     /* clay for text and small type on light grounds */
  --clay-mist: #F7E2D9;
  --blue: #47789E;          /* logo · refugees. White text 4.7 */
  --blue-deep: #335C80;
  --blue-mist: #DEE9F2;
  --plum: #8C5B84;          /* logo · partners. White text 5.3 */
  --plum-deep: #6F4368;
  --plum-mist: #EFE2EC;
  --sage: #77A06F;          /* logo · volunteers. Ink text 5.0, never white */
  --sage-deep: #3B6636;
  --sage-mist: #E2EDDC;

  /* Tints of the same hues, for text and surfaces on colour */
  --on-forest-muted: #CFE0D8;                 /* secondary text on forest (5.5) and forest-deep (8.0) */
  --white-a10: rgb(255 255 255 / .1);
  --white-a16: rgb(255 255 255 / .16);
  --white-a24: rgb(255 255 255 / .24);
  --white-a40: rgb(255 255 255 / .4);
  --ink-a08: rgb(27 42 35 / .08);
  --ink-a16: rgb(15 26 21 / .16);
  --ink-a24: rgb(15 26 21 / .24);

  /* The one shadow: soft, forest-tinted, only for things that float */
  --shadow: 0 18px 40px -18px rgb(30 67 56 / .3);

  /* Semantic colours. Tones (.section--forest, .panel--mist-clay …) re-point these;
     components read these and never the raw palette, so they work on any ground. */
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-muted: var(--slate);
  --heading: var(--ink);
  --link: var(--forest);
  --accent: var(--forest);
  --rule: var(--line);
  --focus: var(--forest-deep);
  --row: var(--white);                /* tinted rows, chips, quiet fields */
  --field: var(--white);              /* form fields */
  --ghost: var(--bone-deep);          /* ghost numerals */
  --error: var(--clay-deep);          /* what a form says when a field is wrong */
  --btn-bg: var(--forest);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--forest-deep);
  --btn-line: var(--forest);          /* secondary (outlined) button */
  --donate-line: transparent;         /* the gold button's edge, only where it stands on gold */
  /* The six petals in order. Lists, rows and markers cycle through these; a solid tone points
     them all at the one colour that shows on it. */
  --p1: var(--forest);
  --p2: var(--gold);
  --p3: var(--clay);
  --p4: var(--blue);
  --p5: var(--plum);
  --p6: var(--sage);

  /* One petal colour for one thing: the c-forest … c-sage classes set these (components.css).
     --c-on is the colour of large type and icons on --c; --c-deep is --c as text on a light ground. */
  --c: var(--forest);
  --c-deep: var(--forest-deep);
  --c-mist: var(--forest-mist);
  --c-on: var(--white);

  /* The petal itself, as a mask for small things (markers, bullets, underlines). It is the logo's
     own outline: the path of the mark, cropped to its box. The large masks for photographs are
     files (src/img/art/mask-*.svg). */
  --petal-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='89.676 38 20.648 45.125' preserveAspectRatio='none'%3E%3Cpath d='M100,38 C89,52 87,68 93,79 C96,84.5 104,84.5 107,79 C113,68 111,52 100,38 Z'/%3E%3C/svg%3E");
  /* The same petal lying down, its tip towards the inline end (lang.css swaps the two in RTL). */
  --petal-mask-ltr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.125 20.648' preserveAspectRatio='none'%3E%3Cpath transform='matrix(0 1 -1 0 83.125 -89.676)' d='M100,38 C89,52 87,68 93,79 C96,84.5 104,84.5 107,79 C113,68 111,52 100,38 Z'/%3E%3C/svg%3E");
  --petal-mask-rtl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.125 20.648' preserveAspectRatio='none'%3E%3Cpath transform='matrix(0 1 1 0 -38 -89.676)' d='M100,38 C89,52 87,68 93,79 C96,84.5 104,84.5 107,79 C113,68 111,52 100,38 Z'/%3E%3C/svg%3E");
  --petal-mask-flat: var(--petal-mask-ltr);

  /* Type families. lang.css swaps these per language (generated from languages.json). */
  --font-latin: "Gabarito", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;   /* the wordmark, Western digits */
  --font-latin-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-latin);
  --font-text: var(--font-latin-text);

  /* Weights */
  --fw-text: 400;
  --fw-medium: 500;
  --fw-strong: 600;
  --fw-sub: 700;
  --fw-display: 700;
  --fw-hero: 800;

  /* Per-script metrics. Defaults are Latin; lang.css sets the rest (DIRECTION 3). */
  --lh-display: 1.04;
  --lh-sub: 1.18;
  --lh-text: 1.6;
  --lh-ui: 1.25;                     /* buttons, nav, labels: one or two lines */
  --tracking-display: -0.022em;
  --tracking-sub: -0.012em;
  --tracking-ui: 0em;
  --display-scale: 1;
  --text-scale: 1;
  --measure: 34em;                   /* about 66 characters of Hanken Grotesk */
  --mask-pad: .2em;                  /* how far a line mask reaches past its line box */
  --underline-offset: .22em;
  --hyphens-display: auto;           /* long German, Russian and Filipino words in headings */
  --hyphens-text: manual;

  /* Space */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 2.6rem + 6.2vw, 8.5rem);
  --seam-h: clamp(2.25rem, 7.2vw, 7rem);
  --container: 76rem;
  --container-wide: 90rem;
  --container-narrow: 50rem;

  /* Shape */
  --r-panel: 28px;
  --r-row: 16px;
  --r-field: 14px;
  --r-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);         /* anything entering or answering */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);     /* anything moving while it stays on screen */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);      /* a slight overshoot: medallions, the core */
  --ease-bloom: cubic-bezier(.22, .8, .2, 1);       /* things that open from a centre */
  --dur-1: 140ms;                    /* press */
  --dur-2: 220ms;                    /* hover, focus, small changes */
  --dur-3: 360ms;                    /* header, rows, toasts */
  --dur-4: 560ms;                    /* panels, cascades */
  --dur-5: 900ms;                    /* reveals */
  --dur-6: 1200ms;                   /* once-only scenes */
  --dir: 1;                          /* 1 in LTR, -1 in RTL: multiply an x translation by it */

  /* Layout facts */
  --header-h: 4.75rem;               /* core.js keeps this equal to the real header height */
  --dock-h: 0px;                     /* core.js: the room the language suggestion bar takes at the bottom of the viewport, while it is there */
  --target: 44px;                    /* minimum touch target */
  --btn-h: 3rem;                     /* buttons: 48px at least */

  /* Stacking */
  --z-header: 50;
  --z-suggest: 55;
  --z-progress: 60;
  --z-toast: 70;
  --z-preloader: 90;
  --z-skip: 100;
}

/* The fluid type scale (360px to 1440px). Declared on every element that carries a lang attribute as
   well, so a Hindi or Urdu passage inside an English page gets its own --display-scale. */
:root,
[lang] {
  --fs-hero: calc(clamp(2.75rem, 1.75rem + 4.45vw, 5.75rem) * var(--display-scale));
  --fs-page: calc(clamp(2.5rem, 1.83rem + 2.96vw, 4.5rem) * var(--display-scale));
  --fs-section: calc(clamp(2rem, 1.5rem + 2.22vw, 3.5rem) * var(--display-scale));
  --fs-sub: calc(clamp(1.375rem, 1.25rem + .56vw, 1.75rem) * var(--display-scale));
  --fs-lead: calc(clamp(1.1875rem, 1.1rem + .37vw, 1.4375rem) * var(--text-scale));
  --fs-body: calc(1.125rem * var(--text-scale));
  --fs-small: calc(1rem * var(--text-scale));
  --fs-stat: clamp(3.5rem, 2.33rem + 5.19vw, 7rem);
  --fs-ghost: clamp(6.5rem, 4rem + 12vw, 14rem);
}

@media (max-width: 40rem) {
  :root { --r-panel: 20px; --r-row: 14px; }
}

}   /* end of the token part of @layer base */

/* Cross-page view transitions: one cross-fade of the whole page. Old and new use the same duration
   and the same curve, so whatever is identical on both pages (the header, the mark, the wordmark)
   adds up to a constant picture: the mark is shared between pages by simply never moving.
   Do NOT give the header or the mark a view-transition-name. Measured here on 7 Oct 2026: in WebKit a
   named element's new picture is missing for the length of a cross-document transition, so the
   header goes blank and pops back. The opt-in rule (@view-transition) is inline in <head>
   (src/partials/head.html): from an external sheet that is being revalidated, Chromium can miss it. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
}

/* ──────────────────────────────────────────────────────────────── reset ── */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100vh; min-block-size: 100svh; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  a { color: inherit; -webkit-tap-highlight-color: transparent; }
  ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  address, em, i, cite { font-style: normal; }
  table { border-collapse: collapse; }
  fieldset { min-inline-size: 0; padding: 0; border: 0; }
  legend { padding: 0; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-inline-size: none; max-block-size: none; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  [hidden] { display: none !important; }
  /* Anchors stay clear of the header through scroll-padding on html (below), once. A scroll-margin on
     :target as well would count the header twice and land every anchor a header too low. */
}

/* ───────────────────────────────────────────────────────────────── base ── */

@layer base {
  html {
    font-size: 100%;
    color-scheme: light;
    font-synthesis: none;                 /* never a faux bold or a faux italic */
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
    scrollbar-gutter: stable;
    overflow-x: clip;
    background: var(--bone);
  }

  body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-text);
    line-height: var(--lh-text);
    color: var(--fg);
    background: var(--bone);
    overflow-x: clip;
    overflow-wrap: break-word;
    hyphens: var(--hyphens-text);
    -webkit-hyphens: var(--hyphens-text);
    /* Where running text hyphenates by itself (German, Russian, Filipino, Indonesian: lang.css) a break
       needs a word of ten letters with four on either side, and never comes three lines running.
       Without limits Safari leaves stubs ("äl-tere", "Ar-beit") down a narrow column. Inherited. */
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    -webkit-hyphenate-limit-lines: 2;
    text-wrap: pretty;
    accent-color: var(--forest);
    caret-color: var(--forest);
  }

  /* Display type: one colour, no accent words, never uppercase. */
  h1, h2, h3, h4, .h-hero, .h-page, .h-section, .h-sub, .display {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    color: var(--heading);
    text-wrap: balance;
    hyphens: var(--hyphens-display);
    -webkit-hyphens: var(--hyphens-display);
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    overflow-wrap: anywhere;
    text-rendering: optimizeLegibility;
  }
  h1, .h-hero { font-size: var(--fs-hero); font-weight: var(--fw-hero); }
  .h-page { font-size: var(--fs-page); font-weight: var(--fw-hero); }
  /* On wide screens a page title has room for its words: only a very long one may still be hyphenated
     (German "Minder-heiten" was cut in a title that had space for it, to balance the lines). */
  @media (min-width: 56rem) {
    h1, .h-hero, .h-page {
      hyphenate-limit-chars: 14 7 6;
      -webkit-hyphenate-limit-before: 7;
      -webkit-hyphenate-limit-after: 6;
    }
  }
  h2, .h-section { font-size: var(--fs-section); }
  h3, .h-sub {
    font-size: var(--fs-sub);
    font-weight: var(--fw-sub);
    line-height: var(--lh-sub);
    letter-spacing: var(--tracking-sub);
  }
  h4 {
    font-size: var(--fs-lead);
    font-weight: var(--fw-sub);
    line-height: var(--lh-sub);
    letter-spacing: var(--tracking-sub);
  }

  p { max-inline-size: var(--measure); }
  .lead { font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
  small, .small { font-size: var(--fs-small); }
  .muted { color: var(--fg-muted); }
  strong, b { font-weight: var(--fw-strong); }
  em, i, cite { font-weight: var(--fw-medium); }

  /* A link inside running text. Components give their links a class and their own look. */
  a:not([class]) {
    color: var(--link);
    font-weight: var(--fw-medium);
    text-decoration-line: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: var(--underline-offset);
    transition: text-decoration-thickness var(--dur-1) ease;
  }
  @media (hover: hover) and (pointer: fine) {
    a:not([class]):hover { text-decoration-thickness: .16em; }
  }

  /* Focus: 3px, 3px away, always visible. --focus changes with the ground:
     forest-deep on bone, white and the mists (10:1), gold on forest (4:1), ink or white on the other petals. */
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--gold); color: var(--ink); }

  .skip-link {
    position: fixed;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    z-index: var(--z-skip);
    display: inline-flex;
    align-items: center;
    min-block-size: var(--btn-h);
    padding-inline: 1.5rem;
    border-radius: var(--r-full);
    background: var(--forest);
    color: var(--white);
    font-weight: var(--fw-strong);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .skip-link:focus { transform: none; }

  /* Words kept whole in Chinese headings (the th() helper writes these). */
  .w { white-space: nowrap; }
  /* Names kept whole everywhere ("Fun-Tastic", 悠樂長有限公司 …): the build wraps them in the body's
     text. No box of its own, so a name inside a button, a petal row or any other flex or grid parent
     stays part of its sentence; only the line break inside the name is taken away. */
  .nb { display: contents !important; white-space: nowrap !important; }
  /* The email address is kept whole as well (a line could break at its hyphen), except on the very
     narrowest screens, where the whole address may not fit a line inside a padded panel. */
  @media (max-width: 23.49rem) { .nb--mail { white-space: normal !important; } }

  /* ── Motion ground rules ──────────────────────────────────────────────────
     Hidden-until-animated exists only when scripts run (html.js), only when the
     visitor has not asked for reduced motion, and never after the failsafe. */
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.dt-failsafe) [data-reveal]:not(.is-in) { opacity: 0; }
  }
  html.dt-failsafe [data-reveal],
  html.dt-failsafe [data-reveal] :is(picture, img) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Lenis (desktop fine pointers only; core.js decides) */
  html.lenis, html.lenis body { block-size: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  /* A locked page behind the menu or the language panel */
  html.is-locked, html.is-locked body { overflow: hidden; }
}

/* ─────────────────────────────────────────────────────────────── layout ── */

@layer layout {
  /* Fluid container: gutters shrink to 16px, width stops at 76rem. */
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--wide { --container: var(--container-wide); }
  .container--narrow { --container: var(--container-narrow); }

  /* Section rhythm. A tone class paints it (see "tones" in components.css). */
  .section {
    position: relative;
    padding-block: var(--section-pad);
    background: var(--bg);
    color: var(--fg);
  }
  .section--tight { --section-pad: clamp(2.5rem, 2rem + 3vw, 5rem); }
  .section--flush-start { padding-block-start: 0; }
  .section--flush-end { padding-block-end: 0; }
  .section__head { margin-block-end: clamp(2rem, 1.4rem + 2.6vw, 4rem); }
  .section__head > * + * { margin-block-start: var(--space-s); }

  /* Vertical stack with one gap. */
  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-m)); }
  .stack--xs { --gap: var(--space-xs); }
  .stack--s { --gap: var(--space-s); }
  .stack--l { --gap: var(--space-l); }
  .stack--xl { --gap: var(--space-xl); }
  .stack > :is(.btn, .tool-btn, .round-btn, .link-petal, .medallion, .monogram, .segmented) { align-self: flex-start; }   /* a column must not stretch a button */
  .stack > .btn--block { align-self: stretch; }

  /* Prose flow: space between siblings, more above a heading than below it. */
  .flow > * + * { margin-block-start: var(--flow, 1em); }
  .flow > :is(h2, h3, h4) { margin-block-start: 1.8em; }
  .flow > :is(h2, h3, h4) + * { margin-block-start: .6em; }

  /* Things in a row that wrap: buttons, tags, links. */
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-s)); }

  /* Even columns that fold by themselves; --min is the narrowest a column may be. */
  .grid-auto {
    display: grid;
    gap: var(--gap, var(--space-l));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 18rem), 100%), 1fr));
  }

  /* Twelve columns for deliberate compositions. Children place themselves with grid-column. */
  .grid {
    display: grid;
    gap: var(--gap, var(--space-l));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid > * { grid-column: 1 / -1; }

  /* Two sides. One column on phones, two from 56rem; ratios by modifier. */
  .split {
    display: grid;
    gap: var(--gap, clamp(2rem, 1rem + 4.5vw, 5.5rem));
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  .split--top { align-items: start; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: minmax(0, var(--a, 1fr)) minmax(0, var(--b, 1fr)); }
    .split--5-7 { --a: 5fr; --b: 7fr; }
    .split--7-5 { --a: 7fr; --b: 5fr; }
    .split--4-8 { --a: 4fr; --b: 8fr; }
    .split--8-4 { --a: 8fr; --b: 4fr; }
    .split--flip > :first-child { order: 2; }
  }

  .measure { max-inline-size: var(--measure); }
  .measure-none { max-inline-size: none; }
}

/* ──────────────────────────────────────────────────────────── utilities ── */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .nowrap { white-space: nowrap; }
  .text-center { text-align: center; }
  .text-start { text-align: start; }
  .mx-auto { margin-inline: auto; }
  .ltr { direction: ltr; unicode-bidi: isolate; }   /* phone numbers, emails, URLs inside RTL text */
  .tabular { font-variant-numeric: tabular-nums lining-nums; }
  @media (max-width: 55.99rem) { .wide-only { display: none !important; } }
  @media (min-width: 56rem) { .narrow-only { display: none !important; } }
}

/* ──────────────────────────────────────────────────────────────── print ── */

@media print {
  [data-reveal], [data-reveal] :is(picture, img) { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
  .site-header { position: static !important; }
  .progress, .preloader, .suggest, .skip-link, .site-menu, .lang-panel, .toast-region { display: none !important; }
}