:root {
  --c-surface: 253 248 255;
  --c-surface-dim: 221 214 241;
  --c-surface-bright: 253 248 255;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 247 241 255;
  --c-surface-container: 241 235 255;
  --c-surface-container-high: 235 229 255;
  --c-surface-container-highest: 230 223 250;
  --c-on-surface: 28 25 44;
  --c-on-surface-variant: 92 64 58;
  --c-inverse-surface: 49 46 66;
  --c-inverse-on-surface: 244 238 255;
  --c-outline: 145 111 104;
  --c-outline-variant: 229 190 181;
  --c-surface-tint: 184 34 0;
  --c-primary: 179 33 0;
  --c-on-primary: 255 255 255;
  --c-primary-container: 220 50 13;
  --c-on-primary-container: 255 251 255;
  --c-inverse-primary: 255 180 164;
  --c-secondary: 118 91 0;
  --c-on-secondary: 255 255 255;
  --c-secondary-container: 255 199 3;
  --c-on-secondary-container: 110 84 0;
  --c-tertiary: 0 101 122;
  --c-on-tertiary: 255 255 255;
  --c-tertiary-container: 0 127 154;
  --c-on-tertiary-container: 250 253 255;
  --c-error: 186 26 26;
  --c-on-error: 255 255 255;
  --c-error-container: 255 218 214;
  --c-on-error-container: 147 0 10;
  --c-primary-fixed: 255 218 211;
  --c-primary-fixed-dim: 255 180 164;
  --c-on-primary-fixed: 62 5 0;
  --c-on-primary-fixed-variant: 140 23 0;
  --c-secondary-fixed: 255 223 148;
  --c-secondary-fixed-dim: 245 191 0;
  --c-on-secondary-fixed: 37 26 0;
  --c-on-secondary-fixed-variant: 89 68 0;
  --c-tertiary-fixed: 179 235 255;
  --c-tertiary-fixed-dim: 76 214 251;
  --c-on-tertiary-fixed: 0 31 39;
  --c-on-tertiary-fixed-variant: 0 78 95;
  --c-background: 253 248 255;
  --c-on-background: 28 25 44;
  --c-surface-variant: 230 223 250;
  --c-ink: 28 25 44;
  --c-white-fixed: 255 255 255;
  --c-lime: 5 150 105;
}
html { color-scheme: light; }
html.dark {
  --c-surface: 22 19 31;
  --c-background: 22 19 31;
  --c-surface-bright: 34 30 46;
  --c-surface-dim: 16 14 24;
  --c-surface-container-lowest: 29 26 40;
  --c-surface-container-low: 34 30 47;
  --c-surface-container: 41 37 55;
  --c-surface-container-high: 49 44 65;
  --c-surface-container-highest: 58 53 75;
  --c-surface-variant: 58 53 75;
  --c-on-surface: 238 232 251;
  --c-on-background: 238 232 251;
  --c-on-surface-variant: 220 195 189;
  --c-outline: 165 139 133;
  --c-outline-variant: 92 68 63;
  --c-primary: 255 138 112;
  --c-on-primary: 62 5 0;
  --c-primary-container: 220 50 13;
  --c-primary-fixed: 74 21 8;
  --c-primary-fixed-dim: 255 180 164;
  --c-on-primary-fixed: 255 218 211;
  --c-secondary: 245 191 0;
  --c-secondary-fixed: 63 49 0;
  --c-on-secondary-fixed: 255 223 148;
  --c-secondary-container: 255 199 3;
  --c-tertiary: 76 214 251;
  --c-tertiary-fixed: 0 56 69;
  --c-on-tertiary-fixed: 179 235 255;
  --c-tertiary-container: 0 127 154;
  --c-inverse-surface: 230 223 250;
  --c-inverse-on-surface: 49 46 66;
  --c-lime: 52 211 153;
}
html.dark { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { overscroll-behavior-x: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.above-stretch { position: relative; z-index: 2; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pop-shadow { box-shadow: 3px 3px 0 rgb(var(--c-ink)); }
.pop-shadow:hover { box-shadow: 5px 5px 0 rgb(var(--c-ink)); transform: translate(-1px,-1px); }
html.dark .pop-shadow { box-shadow: 3px 3px 0 rgb(0 0 0 / .8); }
details > summary::-webkit-details-marker { display: none; }
.prose-craft { font-size: 18px; line-height: 30px; }
.prose-craft > * + * { margin-top: 1.1em; }
.prose-craft h2 { font-family: Outfit, sans-serif; font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -0.02em; margin-top: 1.8em; scroll-margin-top: 6rem; }
.prose-craft h3 { font-family: Outfit, sans-serif; font-weight: 600; font-size: 21px; line-height: 28px; margin-top: 1.4em; }
.prose-craft ul { list-style: disc; padding-left: 1.4em; } .prose-craft ol { list-style: decimal; padding-left: 1.4em; }
.prose-craft li + li { margin-top: .4em; }
.prose-craft strong { color: rgb(var(--c-on-surface)); font-weight: 700; }
.prose-craft blockquote { border-left: 4px solid rgb(var(--c-primary)); background: rgb(var(--c-surface-container-low)); padding: 1rem 1.25rem; border-radius: .75rem; font-style: italic; }
@media (max-width: 640px) { .prose-craft { font-size: 17px; line-height: 28px; } .prose-craft h2 { font-size: 24px; line-height: 30px; } }
@keyframes ping2 { 75%,100% { transform: scale(2); opacity: 0; } }
