:root {
  --cc-blue-50:  #E8F0FE;
  --cc-blue-100: #D2E3FC;
  --cc-blue-200: #AECBFA;
  --cc-blue-300: #8AB4F8;
  --cc-blue-400: #669DF6;
  --cc-blue-500: #4285F4;
  --cc-blue-600: #1A73E8;
  --cc-blue-700: #1967D2;
  --cc-blue-800: #185ABC;
  --cc-blue-900: #174EA6;

  --cc-grey-50:  #F8F9FA;
  --cc-grey-100: #F1F3F4;
  --cc-grey-200: #E8EAED;
  --cc-grey-300: #DADCE0;
  --cc-grey-400: #BDC1C6;
  --cc-grey-500: #9AA0A6;
  --cc-grey-600: #80868B;
  --cc-grey-700: #5F6368;
  --cc-grey-800: #3C4043;
  --cc-grey-900: #202124;
  --cc-grey-950: #17181C;

  --cc-green-600: #137333;
  --cc-yellow-600: #E37400;
  --cc-red-600: #D93025;
  --cc-purple-600: #7627BB;

  --m3-primary: var(--cc-blue-600);
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: var(--cc-blue-50);
  --m3-on-primary-container: var(--cc-blue-900);
  --m3-secondary: var(--cc-grey-700);
  --m3-on-secondary: #FFFFFF;
  --m3-secondary-container: var(--cc-grey-100);
  --m3-on-secondary-container: var(--cc-grey-900);
  --m3-error: var(--cc-red-600);
  --m3-on-error: #FFFFFF;
  --m3-background: #FFFFFF;
  --m3-on-background: var(--cc-grey-900);
  --m3-surface: #FFFFFF;
  --m3-surface-low: var(--cc-grey-50);
  --m3-surface-container: var(--cc-grey-100);
  --m3-surface-high: var(--cc-grey-200);
  --m3-on-surface: var(--cc-grey-900);
  --m3-on-surface-variant: var(--cc-grey-700);
  --m3-outline: var(--cc-grey-300);
  --m3-outline-variant: var(--cc-grey-200);
  --m3-inverse-surface: var(--cc-grey-900);
  --m3-inverse-on-surface: var(--cc-grey-50);

  --m3-shape-xs: 4px;
  --m3-shape-sm: 8px;
  --m3-shape-md: 12px;
  --m3-shape-lg: 16px;
  --m3-shape-xl: 20px;
  --m3-shape-full: 9999px;

  --m3-elev-1: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.06);
  --m3-elev-2: 0 1px 2px rgba(60,64,67,.10), 0 2px 6px 2px rgba(60,64,67,.06);
  --m3-elev-3: 0 4px 8px 3px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.10);

  --m3-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --m3-motion-duration-short: 180ms;
  --m3-motion-duration-medium: 280ms;

  --cc-font-sans: 'Google Sans Flex', 'Google Sans', 'Roboto Flex', 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --cc-font-display: 'Google Sans Flex', 'Google Sans', 'Roboto Flex', 'Roboto', system-ui, sans-serif;
  --cc-font-mono: 'Google Sans Code', 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --cc-content-max: 768px;
  --cc-sidebar-w: 264px;
  --cc-toc-w: 232px;
  --cc-header-h: 64px;
}

:root[data-theme="dark"],
:root[data-theme="auto"].cc-system-dark {
  --m3-primary: var(--cc-blue-300);
  --m3-on-primary: var(--cc-blue-900);
  --m3-primary-container: rgba(138,180,248,.16);
  --m3-on-primary-container: var(--cc-blue-100);
  --m3-secondary: var(--cc-grey-300);
  --m3-on-secondary: var(--cc-grey-900);
  --m3-secondary-container: var(--cc-grey-800);
  --m3-on-secondary-container: var(--cc-grey-100);
  --m3-background: var(--cc-grey-950);
  --m3-on-background: var(--cc-grey-100);
  --m3-surface: var(--cc-grey-950);
  --m3-surface-low: var(--cc-grey-900);
  --m3-surface-container: #1F2024;
  --m3-surface-high: #2B2D32;
  --m3-on-surface: var(--cc-grey-100);
  --m3-on-surface-variant: var(--cc-grey-400);
  --m3-outline: var(--cc-grey-700);
  --m3-outline-variant: #2B2D32;
  --m3-inverse-surface: var(--cc-grey-100);
  --m3-inverse-on-surface: var(--cc-grey-900);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --m3-primary: var(--cc-blue-300);
    --m3-on-primary: var(--cc-blue-900);
    --m3-primary-container: rgba(138,180,248,.16);
    --m3-on-primary-container: var(--cc-blue-100);
    --m3-secondary: var(--cc-grey-300);
    --m3-on-secondary: var(--cc-grey-900);
    --m3-secondary-container: var(--cc-grey-800);
    --m3-on-secondary-container: var(--cc-grey-100);
    --m3-background: var(--cc-grey-950);
    --m3-on-background: var(--cc-grey-100);
    --m3-surface: var(--cc-grey-950);
    --m3-surface-low: var(--cc-grey-900);
    --m3-surface-container: #1F2024;
    --m3-surface-high: #2B2D32;
    --m3-on-surface: var(--cc-grey-100);
    --m3-on-surface-variant: var(--cc-grey-400);
    --m3-outline: var(--cc-grey-700);
    --m3-outline-variant: #2B2D32;
    --m3-inverse-surface: var(--cc-grey-100);
    --m3-inverse-on-surface: var(--cc-grey-900);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  background: var(--m3-background);
  color: var(--m3-on-background);
  font-family: var(--cc-font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-variation-settings: "opsz" 14, "wdth" 100;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cc-font-display);
  font-variation-settings: "opsz" 48, "wdth" 100, "wght" 500;
  color: var(--m3-on-surface);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.25;
}
h1 { font-size: 2.25rem; font-variation-settings: "opsz" 96, "wdth" 100, "wght" 500; letter-spacing: -.02em; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }

a {
  color: var(--m3-primary);
  text-decoration: none;
  transition: color var(--m3-motion-duration-short) var(--m3-motion-easing-standard);
}
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

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

pre {
  background: var(--cc-grey-900);
  color: var(--cc-grey-100);
  padding: 1.1rem 1.25rem;
  border-radius: var(--m3-shape-md);
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.55;
  position: relative;
  margin: 1.25rem 0;
}
:root[data-theme="dark"] pre { background: #0E0F12; }

code {
  background: var(--m3-surface-container);
  color: var(--m3-on-surface);
  padding: .12em .42em;
  border-radius: var(--m3-shape-xs);
  font-size: .88em;
  border: 1px solid var(--m3-outline-variant);
}
pre code { background: transparent; padding: 0; border: 0; color: inherit; font-size: 1em; }

kbd {
  display: inline-flex; align-items: center;
  padding: .12em .42em;
  font-size: .8em;
  background: var(--m3-surface-container);
  color: var(--m3-on-surface-variant);
  border: 1px solid var(--m3-outline);
  border-bottom-width: 2px;
  border-radius: var(--m3-shape-xs);
}

img, video { max-width: 100%; height: auto; border-radius: var(--m3-shape-sm); }

hr { border: 0; border-top: 1px solid var(--m3-outline-variant); margin: 2rem 0; }

::selection { background: var(--cc-blue-100); color: var(--cc-blue-900); }
:root[data-theme="dark"] ::selection { background: var(--cc-blue-800); color: var(--cc-blue-50); }

:focus-visible {
  outline: 2px solid var(--m3-primary);
  outline-offset: 2px;
  border-radius: var(--m3-shape-xs);
}

table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 1.25rem 0; }
th, td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--m3-outline-variant); }
th { font-weight: 500; color: var(--m3-on-surface-variant); background: var(--m3-surface-low); }

blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--m3-primary);
  background: var(--m3-surface-low);
  border-radius: 0 var(--m3-shape-sm) var(--m3-shape-sm) 0;
  color: var(--m3-on-surface-variant);
}
blockquote p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}