
:root {
  color-scheme: light;

  
  --paper: #eef2ef; --white: #fbfcfb; --card: #fff;
  
  --ink: #0d1612; --ink2: #4a5751; --ink3: #69786f; --mut: #8a978f;
  --line: #e1ebe4; --line2: #d4e0d8; --line-card: #e6efe9;
  --g: #12b76a; --g-hi: #5ef0a8; --g-deep: #067647; --lime: #a3e635; --forest: #1f5f45;
  --short: #d6455d; --long: #067647;
  --sh: 20, 52, 38;

  
  --short-ink: #b8324a;
  --on-g: var(--ink);
  --fill-strong: var(--g-deep);

  
  --tint-hover: #f1f8f3; --tint-on: #e9f6ee; --tint-soft: #eef7f1; --cream: #f6faf7; --cream2: #ecf4ee; --hl: #d9f99d;
  
  --tint-on-paper: #dcf3e5;
  --grad-card: linear-gradient(150deg, #fbfdfb, #eef7f1);
  --grad-go: linear-gradient(95deg, var(--g-deep), var(--g) 45%, var(--lime));

  
  --glass: rgba(255, 255, 255, .94);
  --line-dot: rgba(13, 22, 18, .25);
  --seam: 2px dotted var(--line2);
  --ht-ink: rgba(31, 95, 69, .12); --ht-pitch: 19px; --ht-dot: 1.6px;
  --ink-dry: var(--forest); --ink-wet: var(--g);
  --sun: var(--lime); --sun-hi: #e2fbb0; --sun-deep: #7cb518;
  --bead-up: url(#up); --bead-dn-core: #f3c3cc;
  --orb-fill: radial-gradient(circle at 34% 30%, var(--g-hi), var(--g) 62%, var(--g-deep));
  --orb-shadow: 0 8px 22px rgba(18, 183, 106, .42);

  
  --c1: #12b76a; --c2: #067647; --c3: #5ee6a2; --c4: #8fd42a; --c5: #1f5f45; --c6: #c2e87f;

  
  --r-xs: 9px; --r-sm: 12px; --r-md: 16px; --r: 22px; --r-card: 26px; --r-xl: 36px; --r-pill: 999px;

  
  --shadow-card: 0 18px 48px rgba(var(--sh), .11);
  --shadow-soft: 0 8px 22px -12px rgba(var(--sh), .3);
  --shadow-pop: 0 30px 70px -24px rgba(var(--sh), .35), 0 4px 14px rgba(var(--sh), .08);
  --shadow-lift: 0 30px 60px -30px rgba(var(--sh), .4);
  --shadow-glass: 0 40px 90px -40px rgba(var(--sh), .45), 0 0 0 1px var(--line);
  --shadow-ink: 0 6px 16px rgba(13, 22, 18, .22);

  
  --font: "Albert Sans", "Albert Sans Fallback", Arial, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
  --display-wght: 700;
  --fs-xl: clamp(44px, 6.2vw, 88px);
  --fs-lg: clamp(32px, 4.2vw, 56px);
  --fs-md: clamp(20px, 2vw, 26px);
  --fs-lead: clamp(16.5px, 1.35vw, 19px);
  --fs-numeral: clamp(72px, 14vw, 160px);

  
  --wrap: 1220px;
  --gutter: clamp(16px, 4.5vw, 28px);
  --sec-pad: clamp(64px, 12vw, 120px);
  --tb-h: 60px;
  --nav-h: 76px;

  
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-glide: cubic-bezier(.3, .72, .2, 1);
  --ease-turn: cubic-bezier(.65, 0, .35, 1);
  --spring-snap: linear(0, .068 5%, .221 10%, .401 15%, .573 20%, .719 25%, .833 30%, .916 35%, .971 40%, 1.005 45%, 1.022 50%, 1.029 55%, 1.029 60%, 1.026 65%, 1.02 70%, 1.015 75%, 1.01 80%, 1.006 85%, 1.004 90%, 1.002 95%, 1);
  --spring-soft: linear(0, .049 3.3%, .169 6.7%, .326 10%, .493 13.3%, .652 16.7%, .79 20%, .902 23.3%, .986 26.7%, 1.044 30%, 1.078 33.3%, 1.094 36.7%, 1.096 40%, 1.089 43.3%, 1.076 46.7%, 1.06 50%, 1.044 53.3%, 1.029 56.7%, 1.016 60%, 1.006 63.3%, .999 66.7%, .994 70%, .992 73.3%, .991 76.7%, .991 80%, .992 83.3%, .993 86.7%, .995 90%, .996 93.3%, .998 96.7%, 1);
  --spring-heavy: linear(0, .058 5%, .182 10%, .324 15%, .46 20%, .579 25%, .677 30%, .756 35%, .818 40%, .866 45%, .902 50%, .928 55%, .948 60%, .963 65%, .973 70%, .981 75%, .987 80%, .99 85%, .993 90%, .995 95%, 1);
  --t-micro: 140ms; --t-ui: 420ms; --t-digit: 360ms; --t-tint: 600ms; --t-reveal: 800ms; --t-vt: 300ms; --t-sweep: 1200ms;
  --t-snap: 360ms; --t-soft: 750ms; --t-heavy: 480ms;

  
  --focus-ring: 0 0 0 2px var(--g-deep), 0 0 0 6px rgba(18, 183, 106, .25);
}

@media (max-width: 560px) {
  :root { --tb-h: 52px; --nav-h: 64px; }
}


.c1 { --cat: var(--c1); } .c2 { --cat: var(--c2); } .c3 { --cat: var(--c3); }
.c4 { --cat: var(--c4); } .c5 { --cat: var(--c5); } .c6 { --cat: var(--c6); }


@property --gl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --gr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --gt { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --gb { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
