:root[data-theme="paper"] {
  --surface: #fffbf4;
  --on-surface: #22223b;
  --on-surface-muted: #3f3f53;

  --surface-variant: #e9e8e6;
  --on-surface-variant: #22223b;

  --outline: #1717172c;      
  --outline-variant: #17171750;

  --primary: #2720a5;
  --on-primary: #f5f5f5;
  --secondary: #f9dd3b;
  --on-secondary: #22223b;

  --code-surface: #22223b;
  --on-code-surface: #f5f5f5;
  --code-inline-bg: rgba(0, 0, 0, 0.08);
  --code-inline-text: var(--on-surface);

  --info: #b1c6d3;
  --on-info: #08466d;
  --warning: #ec9d0b;
  --on-warning: #7f5c1b;
  --danger: #891010;
  --on-danger: #de8181;
  --success: #b1c491;
  --on-success: #304d01;

  --border-radius: 15px;
  --box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  --icon-size-default: 1.2em;
  --icon-color-default: var(--primary);
}

:root[data-theme="paper"] body {
  background-size: 15px 15px;
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.18'/%3E%3C/svg%3E"),
    radial-gradient(circle, color-mix(in srgb, var(--on-surface-muted) 15%, transparent) 1px, rgba(0, 0, 0, 0) 1px);

  font-size: 20px;
  line-height: 1.3em;
  color: #454545;
  /*
  background-image:
  linear-gradient(to right, color-mix(in srgb, var(--on-surface-muted) 5%, transparent) 1px, transparent 1px),
  linear-gradient(to bottom, color-mix(in srgb, var(--on-surface-muted) 5%, transparent) 1px, transparent 1px);
  */
}



/* Highlight tests */

:root[data-theme="paper"] p a {
  font-weight: 500;
  background: linear-gradient(
    104deg, 
    color-mix(in srgb, var(--secondary) 0%, transparent 100%) 2.9%,
    color-mix(in srgb, var(--secondary) 100%, transparent 100%) 3.4%,
    color-mix(in srgb, var(--secondary) 50%, transparent 100%) 5.8%,
    color-mix(in srgb, var(--secondary) 10%, transparent 100%) 93%,
    color-mix(in srgb, var(--secondary) 70%, transparent 100%) 96%,
    color-mix(in srgb, var(--secondary) 0%, transparent 100%) 98%
    /*
    rgba(130, 255, 173, 0) 2.9%, 
    rgba(130, 255, 173, 1.25) 3.4%, 
    rgba(130, 255, 173, 0.5) 5.8%, 
    rgba(130, 255, 173, 0.1) 93%, 
    rgba(130, 255, 173, 0.7) 96%, 
    rgba(130, 255, 1732, 0) 98%
    */
    ), 
    
    linear-gradient(183deg, 
    color-mix(in srgb, var(--secondary) 0%, transparent 100%) 0%,
    color-mix(in srgb, var(--secondary) 30%, transparent 100%) 7.9%,
    color-mix(in srgb, var(--secondary) 0%, transparent 100%) 15%
    /*
    rgba(130, 255, 173,0) 0%, 
    rgba(130, 255, 173,0.3) 7.9%, 
    rgba(130, 255, 173,0) 15%
    */
  );

  padding: 0.1em 0.5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 0;
  border-radius: 7.5px;
  color: var(--on-surface);

  text-shadow: 
  -12px 12px 9.8px color-mix(in srgb, var(--secondary) 70%, transparent 100%),
  21px -18.1px 7.3px color-mix(in srgb, var(--secondary) 70%, transparent 100%),
  -18.1px -27.3px 30px color-mix(in srgb, var(--secondary) 70%, transparent 100%);

  /*
    -12px 12px 9.8px rgba(130, 255, 173,0.7), 
    21px -18.1px 7.3px rgba(255, 255, 255,1),
    -18.1px -27.3px 30px rgba(255, 255, 255,1);
  */
}

:root[data-theme="paper"] p a .icon {
  color: var(--on-surface);
}


:root[data-theme="paper"] mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    /*color-mix(in srgb, var(--primary) 10%, transparent),
    color-mix(in srgb, var(--primary) 70%, transparent) 4%,
    color-mix(in srgb, var(--primary) 20%, transparent)*/
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.2)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


:root[data-theme="paper"] .highlight1 {
  font-weight: 900;
  background: linear-gradient(
    104deg, 
    rgba(130, 255, 173, 0) 2.9%, 
    rgba(130, 255, 173, 1.25) 3.4%, 
    rgba(130, 255, 173, 0.5) 5.8%, 
    rgba(130, 255, 173, 0.1) 93%, 
    rgba(130, 255, 173, 0.7) 96%, 
    rgba(130, 255, 1732, 0) 98%
    ), 
    
    linear-gradient(183deg, 
    rgba(130, 255, 173,0) 0%, 
    rgba(130, 255, 173,0.3) 7.9%, 
    rgba(130, 255, 173,0) 15%
  );

  padding: 0.6em 13.7px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 0;
  border-radius: 7.5px;
  text-shadow: 
    -12px 12px 9.8px rgba(130, 255, 173,0.7), 
    21px -18.1px 7.3px rgba(255, 255, 255,1),
    -18.1px -27.3px 30px rgba(255, 255, 255,1);
}

:root[data-theme="paper"] .highlight2 {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
  margin: -2px -6px;
  padding:  2px  6px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}



:root[data-theme="paper"] mark.hl {
  background-color: transparent;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='34' viewBox='0 0 140 34'><path d='M0,7 C18,2 30,11 46,5 C64,-1 80,10 96,4 C112,-1 128,9 140,6 L140,28 C124,33 110,24 94,30 C78,35 62,25 46,31 C30,36 16,26 0,29 Z' fill='rgb(255,220,40)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='34' viewBox='0 0 140 34'><path d='M0,7 C18,2 30,11 46,5 C64,-1 80,10 96,4 C112,-1 128,9 140,6 L140,28 C124,33 110,24 94,30 C78,35 62,25 46,31 C30,36 16,26 0,29 Z' fill='rgb(255,220,40)'/></svg>");
  background-repeat: repeat-x, repeat-x;
  background-size: auto 1.5em, auto 1.5em;
  background-position: 0 0.2em, 63px 0.2em;   /* offset ≈ 45% of tile width — deliberately not exact half, avoids a mechanical look */
  background-blend-mode: multiply;             /* blends the two tile layers into each other */
  mix-blend-mode: multiply;                    /* blends the result into the page/text below */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.15em;
}


:root[data-theme="paper"] mark.hl2 {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}




:root[data-theme="paper"] code:not(pre code) {
  font-size: 0.65em;
}

:root[data-theme="paper"] pre {
  font-size: 0.9rem;
}


:root[data-theme="paper"] .highlight-gradient-animated {
	place-self: center;
	background: linear-gradient(90deg, var(--on-warning), var(--warning), var(--on-warning)) -100%/ 200%;
	/* being excessively careful with compat, 
	 * though this has been supported unprefixed and 
	 * in the shorthand across major browsers for a while;
	 * but it catches the latest browser versions supported 
	 * on Wndows XP, 7 and 8; yeah, they exist in 2025 */
	-webkit-background-clip: text;
	        background-clip: text;
	/* use color, don't use -webkit-text-fill-color anymore, 
	 * was meant to solve a problem we haven't had in years */
	color: transparent;
	animation: shimmer 5s linear infinite
}

@keyframes shimmer { to { background-position: 100% } }

.highlight-gradient-static {
  place-self: center;
  background: linear-gradient(
    90deg, 
    rgba(94,114,235,1) 0%, 
    rgba(255,145,144,1) 36%, 
    rgba(254,193,149,1) 50%, 
    rgba(255,145,144,1) 76%, 
    rgba(94,114,235,1) 100%
  ) -100%/ 200%;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  
  animation: shimmer 10s linear infinite
}

@keyframes shimmer { to { background-position: 100% } }


:root[data-theme="paper"] .site-title {
  font-size: 35px;
  font-family: "permanent-marker";
  font-weight: bold;
}