/* ==========================================================================
   Paco Coursey (paco.me) - Complete Stylesheet Replica
   Milestone 3: Typography, CSS Design System & Theme Engine
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @font-face Declarations (Zero-CDN, Local WOFF2 Subsets)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: Sohne;
  font-display: block;
  src: url(/fonts/sohne-subset-0.woff2) format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: Inter;
  font-display: block;
  src: url(/fonts/inter-subset.woff2) format("woff2");
  font-weight: 100 900;
}

@font-face {
  font-family: Newsreader;
  font-display: block;
  src: url(/fonts/newsreader-subset-0.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   2. Design Tokens, CSS Custom Properties & Dual-Theme Engine (Zero-FOUC)
   -------------------------------------------------------------------------- */

:root {
  /* Logic toggles */
  --OFF: initial;
  --ON: ;

  /* Font Family Stacks */
  --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: "Sohne", "Inter", var(--font-fallback);
  --font-display: "Inter", var(--font-fallback);
  --font-ui: "Inter", var(--font-fallback);
  --font-serif: "Newsreader", "Signifier", "Times", serif;
  --font-mono: "Menlo", monospace;

  /* Layout Geometry & Grid Metrics */
  --page-width: 1072px;
  --content-width: 640px;
  --page-left: auto;
  --page-top: 128px;
  --header-height: 48px;
  --footer-height: 48px;
  --icon-primary: var(--mono11);
  --icon-secondary: transparent;
  --body-margin-left: max(24px, env(safe-area-inset-left));
  --body-margin-right: max(24px, env(safe-area-inset-right));

  /* Z-Index Layer Scale */
  --layer-above-sticky: 20;
  --layer-header: 10;
  --layer-sticky: 10;
  --layer-tooltip: 600;
  --layer-dialog: 500;
  --layer-popover: 400;
  --layer-toasts: 300;
  --layer-portal: 200;
  --layer-overlay: 100;

  /* Spacing Scale */
  --basics-gap: .5rem;
  --gap-s: 4px;
  --gap: 8px;
  --gap-2x: 16px;
  --gap-3x: 24px;
  --gap-4x: 32px;
  --gap-6x: 48px;
  --gap-8x: 64px;
  --gap-12x: 72px;
  --gap-16x: 128px;

  /* Typographic Scale */
  --text-2xl: 30px;
  --text-xl: 24px;
  --text-l: 20px;
  --text: 16px;
  --text-s: 14px;
  --text-xs: 12px;
  --text-xxs: 10px;

  --leading-xxl: 54px;
  --leading-xl: 40px;
  --leading-l: 32px;
  --leading: 28px;
  --leading-s: 20px;
  --leading-xs: 18px;

  --kerning-l: -.33px;
  --border-thin: 1px;

  /* Composite Typography Definitions */
  --type: var(--text) / var(--leading) var(--font-sans);
  --type-body: var(--type);
  --type-code: 13px / 1.7 var(--font-mono);
  --type-italic: 400 italic calc(1em + 1px) / normal var(--font-serif);
  --type-s: var(--text-s) / var(--leading-s) var(--font-sans);
  --type-l: var(--text-l) / var(--leading-l) var(--font-sans);
  --type-heading: 500 var(--text) / var(--leading) var(--font-display);
  --type-heading-l: 500 var(--text-l) / var(--leading-l) var(--font-display);
  --type-button: 400 14px / var(--height, normal) var(--font-sans);

  /* Animation & Transition Tokens */
  --transition-instant: 0s;
  --transition-fastest: 80ms;
  --transition-fast: .1s;
  --transition-med: .16s;
  --transition-xx: .24s;
  --transition-xxl: .32s;
  --transition-long: .48s;
  --transition-slow: 1.2s;

  /* Stagger Animation Settings */
  --stagger: 0;
  --delay: .12s;
  --start: 0s;

  /* Mask & Blur Defaults */
  --transparent: #0000;
  --transparent-white: #fff0;
  --mask-visible: black;
  --mask-hidden: transparent;
  --mask-invisible: transparent;

  /* Scrollbar Tokens */
  --scrollbar-size: 16px;
  --scrollbar-size-min: 44px;
  --scrollbar-color: var(--mono6);

  /* Light Theme Palette (Default) */
  color-scheme: light;
  --white: #ffffff;
  --black: #000000;

  --gray1: #fcfcfc;
  --gray2: #f9f9f9;
  --gray3: #f0f0f0;
  --gray4: #e8e8e8;
  --gray5: #e0e0e0;
  --gray6: #d9d9d9;
  --gray7: #cecece;
  --gray8: #bbbbbb;
  --gray9: #8d8d8d;
  --gray10: #838383;
  --gray11: #646464;
  --gray12: #202020;

  --gray-1: var(--gray1);
  --gray-2: var(--gray2);
  --gray-3: var(--gray3);
  --gray-4: var(--gray4);
  --gray-5: var(--gray5);
  --gray-6: var(--gray6);
  --gray-7: var(--gray7);
  --gray-8: var(--gray8);
  --gray-9: var(--gray9);
  --gray-10: var(--gray10);
  --gray-11: var(--gray11);
  --gray-12: var(--gray12);

  --mono1: var(--gray1);
  --mono2: var(--gray2);
  --mono3: var(--gray3);
  --mono4: var(--gray4);
  --mono5: var(--gray5);
  --mono6: var(--gray6);
  --mono7: var(--gray7);
  --mono8: var(--gray8);
  --mono9: var(--gray9);
  --mono10: var(--gray10);
  --mono11: var(--gray11);
  --mono12: var(--gray12);

  --grayA1: rgba(0, 0, 0, 0.02);
  --grayA2: rgba(0, 0, 0, 0.04);
  --grayA3: rgba(0, 0, 0, 0.06);
  --grayA4: rgba(0, 0, 0, 0.09);
  --grayA5: rgba(0, 0, 0, 0.12);
  --grayA6: rgba(0, 0, 0, 0.16);
  --grayA7: rgba(0, 0, 0, 0.22);
  --grayA8: rgba(0, 0, 0, 0.32);
  --grayA9: rgba(0, 0, 0, 0.55);
  --grayA10: rgba(0, 0, 0, 0.61);
  --grayA11: rgba(0, 0, 0, 0.73);
  --grayA12: rgba(0, 0, 0, 0.90);

  --bg: var(--white);
  --fg: var(--gray12);
  --text-color: #3a3a3a;
  --selection: var(--grayA4);
  --alpha: rgba(255, 255, 255, 0.9);
  --shadow-color: rgba(17, 15, 15, 0.05);
  --shadow-s: 0 2px 20px 1px var(--shadow-color);
  --indigo: #5856d6;
}

/* Dark Theme Engine (Zero-FOUC Native Media Query) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fg: #f2f2f2;
    --bg: var(--gray1);
    --text-color: #e5e5e5;
    --selection: rgba(255, 255, 255, 0.078);
    --alpha: rgba(28, 28, 28, 0.9);
    --shadow-color: rgba(0, 0, 0, 0.55);
    --shadow-s: 0 2px 20px 1px var(--shadow-color);

    --gray1: #1a1a1a;
    --gray2: #1c1c1c;
    --gray3: #232323;
    --gray4: #282828;
    --gray5: #2e2e2e;
    --gray6: #343434;
    --gray7: #3e3e3e;
    --gray8: #505050;
    --gray9: #707070;
    --gray10: #7e7e7e;
    --gray11: #a0a0a0;
    --gray12: #ededed;

    --gray-1: var(--gray1);
    --gray-2: var(--gray2);
    --gray-3: var(--gray3);
    --gray-4: var(--gray4);
    --gray-5: var(--gray5);
    --gray-6: var(--gray6);
    --gray-7: var(--gray7);
    --gray-8: var(--gray8);
    --gray-9: var(--gray9);
    --gray-10: var(--gray10);
    --gray-11: var(--gray11);
    --gray-12: var(--gray12);

    --mono1: var(--gray1);
    --mono2: var(--gray2);
    --mono3: var(--gray3);
    --mono4: var(--gray4);
    --mono5: var(--gray5);
    --mono6: var(--gray6);
    --mono7: var(--gray7);
    --mono8: var(--gray8);
    --mono9: var(--gray9);
    --mono10: var(--gray10);
    --mono11: var(--gray11);
    --mono12: var(--gray12);

    --grayA1: #fff0;
    --grayA2: #ffffff07;
    --grayA3: #ffffff0e;
    --grayA4: #ffffff14;
    --grayA5: #ffffff1a;
    --grayA6: #ffffff21;
    --grayA7: #ffffff2c;
    --grayA8: #ffffff3f;
    --grayA9: #ffffff62;
    --grayA10: #ffffff72;
    --grayA11: #ffffff97;
    --grayA12: #ffffffeb;

    --indigo: #5e5ce6;
  }
}

/* Explicit class-based dark override support */
[data-theme="dark"],
.dark {
  color-scheme: dark;
  --fg: #f2f2f2;
  --bg: var(--gray1);
  --text-color: #e5e5e5;
  --selection: rgba(255, 255, 255, 0.078);
  --alpha: rgba(28, 28, 28, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.55);

  --gray1: #1a1a1a;
  --gray2: #1c1c1c;
  --gray3: #232323;
  --gray4: #282828;
  --gray5: #2e2e2e;
  --gray6: #343434;
  --gray7: #3e3e3e;
  --gray8: #505050;
  --gray9: #707070;
  --gray10: #7e7e7e;
  --gray11: #a0a0a0;
  --gray12: #ededed;
}

/* --------------------------------------------------------------------------
   3. Document Resets & Base Elements
   -------------------------------------------------------------------------- */

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-height) + var(--gap-2x));
  font-size: 16px;
  height: 100%;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  overflow-x: hidden;
}

body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--selection);
  text-shadow: none;
  -webkit-text-decoration-color: var(--mono9);
  text-decoration-color: var(--mono9);
}

[basics-prose]::selection {
  background: var(--transparent);
}

b, strong {
  font-weight: 500;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 1em;
}

sub, sup {
  vertical-align: baseline;
  font-size: 60%;
  line-height: 0;
  position: relative;
}

sub { bottom: -.25em; }
sup { top: -.5em; }

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

svg {
  shape-rendering: auto;
  vertical-align: middle;
}

figure, blockquote {
  margin: 0;
}

a {
  color: inherit;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-thumb {
  min-height: var(--scrollbar-size-min);
  min-width: var(--scrollbar-size-min);
  background-color: var(--scrollbar-color);
  border-radius: var(--scrollbar-size);
  background-clip: padding-box;
  border: 5px solid #0000;
}

::-webkit-scrollbar-thumb:hover {
  --scrollbar-color: var(--mono7);
}

::-webkit-scrollbar-thumb:active {
  --scrollbar-color: var(--mono9);
}

::-webkit-scrollbar-track {
  background: 0 0;
}

/* --------------------------------------------------------------------------
   4. Typographic System & Optical Height Compensation
   -------------------------------------------------------------------------- */

[basics-text],
[basics-prose] p {
  font: var(--type);
  letter-spacing: 0;
  font-size: var(--text);
  line-height: var(--leading);
  font-feature-settings: "kern", "frac", "kern", "ss02";
  margin: 0;
}

[basics-text]:where(h1, h2, h3, h4, h5, h6, p, li),
[basics-prose] :where(h1, h2, h3, h4, h5, h6, p, li) {
  font: var(--type);
}

/* Same-Size Hierarchy: Headings share 16px/28px in Inter 500 */
[basics-heading],
[basics-prose] :where(h1, h2, h3, h4, h5, h6) {
  font: var(--type-heading);
  font-feature-settings: "kern", "calt", "case";
}

/* Optical Height Compensation: calc(1em + 1px) resolves to 17px */
[basics-text]:where(em, i),
[basics-text] :where(em, i),
[basics-prose] :where(em, i) {
  font: var(--type-italic);
  color: var(--fg);
}

/* Column Titles & Small Sized Typography */
[basics-text][basics-size="small"],
[basics-heading][basics-size="small"] {
  font: var(--type-s);
}

/* Text Colors */
[basics-text][basics-color="dim"] {
  color: var(--mono11);
}

[basics-text][basics-color="lowcontrast"],
[basics-text][basics-color="lowcontrast"] * {
  color: var(--mono9);
}

/* Tabular Numerals */
[basics-text][basics-variant~="tnum"],
[basics-variant~="tnum"] {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Prose Block Rules & Spacing Hierarchy */
[basics-prose] {
  width: 100%;
  max-width: var(--content-width);
  color: var(--text-color);
}

article[basics-prose] {
  position: relative;
}

[basics-prose] > :first-child {
  margin-top: 0;
}

[basics-prose] > :not(:last-child),
[basics-prose] > [basics-codeblock] {
  margin-bottom: 28px;
}

[basics-prose] > :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 56px;
  margin-bottom: 28px;
}

[basics-prose] > :where([basics-scroller]) {
  margin-top: 64px;
}

/* --------------------------------------------------------------------------
   5. Link Styling & Micro-Interactions
   -------------------------------------------------------------------------- */

[basics-link] {
  cursor: pointer;
  outline-offset: 2px;
  line-height: normal;
  text-decoration: none;
}

[basics-prose] :where(p, li) a,
[basics-link][basics-variant~="text"] {
  transition: var(--transition-xx);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--mono8);
  text-decoration-color: var(--mono8);
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1px;
  transition-property: text-decoration-color;
  position: relative;
}

@media (hover: hover) {
  :is([basics-prose] :where(p, li) a, [basics-link][basics-variant~="text"]):hover:not([disabled]) {
    transition: var(--transition-fast);
    -webkit-text-decoration-color: var(--mono11);
    text-decoration-color: var(--mono11);
  }
}

/* --------------------------------------------------------------------------
   6. Anti-Scraping Email Injection
   -------------------------------------------------------------------------- */

.email:before {
  content: "p@paco.me";
}

/* --------------------------------------------------------------------------
   7. CSS Mask Icons & Spacers
   -------------------------------------------------------------------------- */

[basics-css-icon] {
  --mask: var(--ON);
  --icon: var(--mask, var(--icon));
  -webkit-mask: var(--mask, invalid) var(--icon);
  mask: var(--mask, invalid) var(--icon);
  background-color: var(--mask, invalid) currentColor;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  --size: 1.125em;
  height: var(--size);
  width: var(--size);
  vertical-align: text-top;
}

[data-icon="arrow-up-right"] {
  --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19 15.477-.02-9.672a.802.802 0 0 0-.218-.577c-.145-.152-.34-.228-.587-.228H8.499a.751.751 0 0 0-.777.76c0 .199.076.371.227.517.15.145.326.218.525.218h3.733l4.52-.129-1.728 1.54-9.767 9.783a.692.692 0 0 0-.232.518c0 .205.078.387.235.545a.74.74 0 0 0 .542.237.73.73 0 0 0 .527-.224l9.775-9.78 1.544-1.727-.143 4.188v4.065c0 .199.075.376.225.531.15.155.327.232.531.232.202 0 .38-.076.534-.228a.768.768 0 0 0 .23-.569Z' fill='%23000'/%3E%3C/svg%3E");
}

[basics-spacer] {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  width: 1px;
  min-width: 1px;
  height: 1px;
  min-height: 1px;
  display: block;
}

[basics-spacer][basics-spacer] {
  margin-left: calc(var(--basics-gap) * var(--basics-x, 1) - 1px);
  margin-top: calc(var(--basics-gap) * var(--basics-y, 1) - 1px);
}

[basics-spacer][basics-variant~="inline"] {
  margin-top: 0;
  display: inline-block;
}

[basics-spacer][basics-variant~="expand"] {
  flex: 1;
}

[basics-spacer][basics-variant~="padding"] {
  padding-left: calc(var(--basics-gap) * var(--basics-x, 1) - 1px);
  padding-top: calc(var(--basics-gap) * var(--basics-y, 1) - 1px);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Frosted Blur Header Overlay (.blur)
   -------------------------------------------------------------------------- */

.blur {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  --h: min(96px, var(--page-top));
  width: calc(100% + var(--body-margin-left) + var(--body-margin-right));
  margin-left: calc(-1 * var(--body-margin-left));
  height: var(--h);
  z-index: 10;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(var(--direction), var(--mask-visible) 25%, var(--mask-hidden));
  mask-image: linear-gradient(var(--direction), var(--mask-visible) 25%, var(--mask-hidden));
  position: sticky;
  top: 0;
}

.blur:first-child {
  margin-bottom: calc(-1 * var(--h));
  --direction: to bottom;
  top: 0;
}

.blur:after {
  content: "";
  background: linear-gradient(var(--direction), var(--bg), var(--transparent));
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   9. Layout & Responsive Geometry
   -------------------------------------------------------------------------- */

main {
  min-height: calc(100vh - var(--footer-height));
  padding: var(--page-top) 0;
  max-width: var(--page-width);
  margin: 0 auto;
  position: relative;
}

.main-grid {
  grid-template-columns: 192px var(--content-width) 192px;
  grid-column-gap: 24px;
  -moz-column-gap: 24px;
  column-gap: 24px;
  align-items: baseline;
  display: grid;
}

.main-grid > * {
  grid-column: 2;
}

/* Horizontal Scroller Carousel ([basics-scroller]) */
[basics-scroller] {
  --scrollbar-padding: 40px;
  --scrollbar-size: 6px;
  --gradient-size-start: var(--body-margin-left);
  --gradient-size-end: 0px;
  width: 100vw;
  padding-bottom: var(--scrollbar-padding);
  padding-left: var(--body-margin-left);
  padding-right: var(--body-margin-right);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--gradient-size-start), black calc(100% - var(--gradient-size-end)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black var(--gradient-size-start), black calc(100% - var(--gradient-size-end)), transparent 100%);
  margin-left: -50vw;
  display: flex;
  position: relative;
  left: 50%;
  overflow-x: auto;
}

[basics-scroller]:before {
  content: "";
  min-width: calc((100vw - var(--content-width)) / 2 - var(--body-margin-left));
}

[basics-scroller]:after {
  content: "";
  min-width: max(24px, calc((100vw - var(--content-width)) / 2 - var(--body-margin-right)));
}

.stack {
  display: flex;
}

.stack > * + * {
  margin-left: 32px;
}

.column {
  width: 192px;
  flex-shrink: 0;
}

.column > div {
  margin-top: 12px;
}

:is(.column > div) > * + * {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   10. Footer, Analog Clock & Secret Subfooter
   -------------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--mono5);
  height: var(--footer-height);
  width: calc(100% + var(--body-margin-right) + var(--body-margin-left));
  left: calc(-1 * var(--body-margin-left));
  background: var(--bg);
  z-index: var(--layer-header);
  padding: 0 var(--body-margin-left);
  position: relative;
}

footer > div {
  max-width: var(--content-width);
  white-space: nowrap;
  align-items: center;
  height: 100%;
  margin: 0 auto;
  display: flex;
}

footer > div > :first-child {
  margin-right: auto;
}

/* Analog Clock in Footer */
.footer-module__J82hAW__clock {
  --seconds-deg: calc((var(--now-s) / 60) * 360);
  --minutes-deg: calc(((var(--now-m) / 60) * 360) + ((var(--now-s) / 60) * 6));
  --hours-deg: calc(((var(--now-h) / 12) * 360) + ((var(--now-m) / 60) * 30));
  --width: 1px;
  --color: var(--mono9);
  border: 1px solid var(--mono8);
  width: 20px;
  height: 20px;
  margin: 0;
  margin-left: var(--gap-2x);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  transform: rotate(180deg);
  cursor: pointer;
}

.footer-module__J82hAW__clock > * {
  top: 50%;
  left: calc(50% - var(--width) / 2);
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  border-radius: calc(var(--width) / 2);
  transform-origin: 50% 0;
  position: absolute;
}

.footer-module__J82hAW__clock:before {
  content: "";
  background: var(--color);
  z-index: 1234;
  border-radius: 50%;
  width: .5px;
  height: .5px;
  position: absolute;
}

.footer-module__J82hAW__second {
  --height: 8px;
  --width: .5px;
  transform: rotate(calc(var(--seconds-deg) * 1deg));
}

.footer-module__J82hAW__minute {
  --height: 7px;
  transform: rotate(calc(var(--minutes-deg) * 1deg));
}

.footer-module__J82hAW__hour {
  --height: 5px;
  transform: rotate(calc(var(--hours-deg) * 1deg));
}

/* Secret Philosophy Subfooter (Toggled by Clock Click) */
.subfooter {
  display: none;
  width: calc(100% + var(--body-margin-right) + var(--body-margin-left));
  left: calc(-1 * var(--body-margin-left));
  border-top: 1px solid var(--mono5);
  padding: 0 var(--body-margin-left);
  position: relative;
}

.subfooter.visible,
.subfooter.open,
.subfooter[data-open="true"],
.subfooter[data-visible="true"] {
  display: block;
}

.subfooter section {
  max-width: var(--content-width);
  padding: var(--gap-8x) 0;
  margin: 0 auto;
}

/* Clock UTC Tooltip */
[basics-tooltip] {
  border: 1px solid var(--mono6);
  background: var(--bg);
  box-shadow: var(--shadow-s);
  font: var(--type-s);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: var(--layer-tooltip);
  color: var(--fg);
  white-space: nowrap;
  pointer-events: none;
}

[basics-tooltip] [basics-arrow] {
  fill: var(--mono2);
}

[basics-tooltip] {
  animation: tooltipIn var(--transition-fast) forwards;
}

[basics-tooltip][data-state="closed"] {
  animation: tooltipOut var(--transition-fast) forwards;
}

@keyframes tooltipIn {
  0% { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tooltipOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9); }
}

/* --------------------------------------------------------------------------
   11. Stagger Entrance Animation Engine
   -------------------------------------------------------------------------- */

[data-animation-controller="false"] [data-animate] {
  animation: none;
}

[data-animate] {
  --stagger: 0;
  --delay: .12s;
  --start: 0s;
}

@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    animation: .6s both enter;
    animation-delay: calc(var(--stagger) * var(--delay) + var(--start));
  }
}

@keyframes enter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet (<= 1024px) */
@media (max-width: 1024px) {
  :root {
    --page-top: 128px;
  }
  .main-grid {
    grid-template-columns: auto var(--content-width) auto;
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
  :root {
    --page-top: 64px;
  }
  main {
    max-width: var(--content-width);
    padding-left: var(--body-margin-left);
    padding-right: var(--body-margin-right);
  }
  .main-grid {
    align-items: unset;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
  }
}

/* Scroller gradient threshold */
@media (max-width: 688px) {
  [basics-scroller] {
    --gradient-size-start: 24px;
    --gradient-size-end: 20%;
  }
}