/* Hand-drawn skin for the gallery site.
   Activated with <html data-theme="sketch"> (header toggle or ?theme=sketch).
   Same layout, rules and spacing as the clean theme — only the surface changes:
   paper instead of white, pencil rules instead of hairlines, marker type,
   wobbly frames, tape and a few pencil doodles. */

/* The two handwriting faces, self-hosted so no third-party request leaves the
   page — the same rule the app follows for its own fonts. */
@font-face {
  font-family: "Architects Daughter";
  src: url("fonts/architects-daughter-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Permanent Marker";
  src: url("fonts/permanent-marker-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

html[data-theme="sketch"] {
  --paper: #faf7f0;
  --surface: #fffdf7;
  --ink: #2f2a25;
  --ink-soft: #4b443c;
  --muted: #6f675c;
  --line: rgba(47, 42, 37, 0.28);
  --line-strong: rgba(47, 42, 37, 0.5);
  --price: #d93a1f;
  --marker: #2f6fb5;

  --sans: "Architects Daughter", "Comic Sans MS", "Segoe UI", cursive;
  --display: "Permanent Marker", "Architects Daughter", cursive;

  --wob-sm: 8px 6px 10px 7px / 7px 10px 6px 9px;
  --wob-md: 16px 12px 18px 13px / 13px 18px 12px 16px;
  --shadow-photo: 4px 5px 0 rgba(47, 42, 37, 0.14);
}

html[data-theme="sketch"] body {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(47, 42, 37, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: var(--sans);
  font-size: 1.09rem;
  line-height: 1.7;
}

html[data-theme="sketch"] h1,
html[data-theme="sketch"] h2,
html[data-theme="sketch"] h3,
html[data-theme="sketch"] .wordmark,
html[data-theme="sketch"] .foot-word {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

html[data-theme="sketch"] .lede,
html[data-theme="sketch"] .section-head p,
html[data-theme="sketch"] .dl p,
html[data-theme="sketch"] .qa p,
html[data-theme="sketch"] .facts li,
html[data-theme="sketch"] .qr p { color: var(--ink-soft); }

/* header ---------------------------------------------------------------- */
html[data-theme="sketch"] .top {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-block-end: 2px dashed var(--line);
}
html[data-theme="sketch"] .top.is-stuck { border-block-end-style: dashed; box-shadow: none; }
html[data-theme="sketch"] .wordmark-dot {
  border: 2.5px solid var(--ink);
  border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  rotate: -6deg;
}
html[data-theme="sketch"] .top-nav a {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: color-mix(in srgb, var(--marker) 55%, transparent);
  text-underline-offset: 4px;
}

/* toggle + buttons ------------------------------------------------------ */
html[data-theme="sketch"] .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--wob-sm);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
html[data-theme="sketch"] .theme-toggle-mark {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 50% 40% 55% 45%;
  background: var(--marker);
}
html[data-theme="sketch"] .theme-toggle:hover { background: #f1ece0; }

html[data-theme="sketch"] .btn {
  background: var(--surface);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: var(--wob-sm);
  box-shadow: 3px 4px 0 rgba(47, 42, 37, 0.16);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
}
html[data-theme="sketch"] .btn:hover {
  background: #fff;
  transform: translate(1px, 2px);
  box-shadow: 1px 1px 0 rgba(47, 42, 37, 0.16);
}
html[data-theme="sketch"] .btn-quiet { background: transparent; }
html[data-theme="sketch"] .cta-row-after .btn { border-style: dashed; }

/* hero ------------------------------------------------------------------ */
html[data-theme="sketch"] .hero h1 { letter-spacing: 0; line-height: 1.02; }
html[data-theme="sketch"] .hero h1::after {
  content: "";
  display: block;
  inline-size: 11rem;
  block-size: 12px;
  margin-block-start: 0.6rem;
  background-color: var(--marker);
  -webkit-mask: var(--doodle-squiggle) repeat-x left center / 140px 10px;
  mask: var(--doodle-squiggle) repeat-x left center / 140px 10px;
}
html[data-theme="sketch"] .hero-shot img {
  border: 3px solid var(--ink);
  border-radius: var(--wob-md);
  box-shadow: var(--shadow-photo);
  rotate: -0.8deg;
}
html[data-theme="sketch"] .hero-shot figcaption { rotate: 0.6deg; }

/* labels drawn like taped paper ---------------------------------------- */
html[data-theme="sketch"] .tag {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--wob-sm);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: none;
  padding: 0.45rem 0.75rem;
  rotate: -1deg;
}
html[data-theme="sketch"] .tag::before {
  content: "";
  position: absolute;
  inset-block-start: -11px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 42px;
  block-size: 14px;
  background: rgba(215, 189, 141, 0.85);
  rotate: -3deg;
}
html[data-theme="sketch"] .tag-price {
  background: var(--price);
  border-color: var(--ink);
  color: #fffdf7;
  rotate: 1.2deg;
}
html[data-theme="sketch"] .tag-price > span[aria-hidden] { color: #ffd9d0; }

/* band ------------------------------------------------------------------ */
html[data-theme="sketch"] .band { background: transparent; border-block-color: var(--line); }
html[data-theme="sketch"] .facts li { border-inline-start-style: dashed; }
html[data-theme="sketch"] .facts b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
}

/* sections -------------------------------------------------------------- */
html[data-theme="sketch"] .section { border-block-end: 2px dashed var(--line); }
html[data-theme="sketch"] .section-alt { background: rgba(47, 111, 181, 0.05); }
html[data-theme="sketch"] .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

/* QR + gallery ---------------------------------------------------------- */
html[data-theme="sketch"] .qr {
  background: var(--surface);
  border: 2.5px dashed var(--line-strong);
  border-radius: var(--wob-md);
  rotate: -0.5deg;
}
html[data-theme="sketch"] .qr img { rotate: 1deg; }
html[data-theme="sketch"] .shot img {
  border: 3px solid var(--ink);
  border-radius: var(--wob-md);
}
html[data-theme="sketch"] .shot:nth-child(odd) img { rotate: -0.7deg; }
html[data-theme="sketch"] .shot:nth-child(even) img { rotate: 0.6deg; }
html[data-theme="sketch"] .shot:hover img { transform: translateY(-2px); }
html[data-theme="sketch"] .shot figcaption { font-size: 0.9rem; }
html[data-theme="sketch"] .shot .tag { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
html[data-theme="sketch"] .shot .tag::before { inline-size: 30px; block-size: 11px; inset-block-start: -8px; }

/* steps ----------------------------------------------------------------- */
html[data-theme="sketch"] .steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--marker);
  border-block-end: 2px dashed var(--line);
  padding-block-end: var(--space-2);
}

/* downloads ------------------------------------------------------------- */
html[data-theme="sketch"] .downloads { border-block-start-style: dashed; border-block-start-width: 2px; }
html[data-theme="sketch"] .dl { border-block-end: 2px dashed var(--line); }
html[data-theme="sketch"] .dl h3 { font-size: 1.25rem; }
html[data-theme="sketch"] .install { font-size: 1rem; }

/* questions ------------------------------------------------------------- */
html[data-theme="sketch"] .qa { border-block-start: 2px dashed var(--line); }
html[data-theme="sketch"] .qa details { border-block-end: 2px dashed var(--line); }
html[data-theme="sketch"] .qa summary { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
html[data-theme="sketch"] .qa summary::before { color: var(--marker); }

/* footer ---------------------------------------------------------------- */
html[data-theme="sketch"] .foot {
  background: var(--paper);
  color: var(--ink);
  border-block-start: 3px solid var(--ink);
}
html[data-theme="sketch"] .foot-note,
html[data-theme="sketch"] .foot-cols h2,
html[data-theme="sketch"] .foot-bar { color: var(--muted); }
html[data-theme="sketch"] .foot-cols h2 { font-family: var(--display); font-size: 1rem; }
html[data-theme="sketch"] .foot-cols a { color: var(--ink); }
html[data-theme="sketch"] .foot-cols a:hover { text-decoration-style: wavy; text-decoration-color: var(--marker); }
html[data-theme="sketch"] .foot-bar { border-block-start: 2px dashed var(--line); }
html[data-theme="sketch"] .foot-bar span:last-child { color: var(--marker); }

/* a few pencil doodles, allowed to take the pen colour ------------------ */
html[data-theme="sketch"] .hero-shot::after {
  content: "";
  position: absolute;
  inset-block-end: -2.4rem;
  inset-inline-start: -2.6rem;
  inline-size: 5rem;
  block-size: 4rem;
  color: var(--marker);
  background-color: currentColor;
  -webkit-mask: var(--doodle-arrow) no-repeat center / contain;
  mask: var(--doodle-arrow) no-repeat center / contain;
  rotate: 8deg;
  pointer-events: none;
}
html[data-theme="sketch"] .section-head h2 { position: relative; }

@media (width < 60rem) {
  html[data-theme="sketch"] .hero-shot::after { display: none; }
}

/* background camera doodles: a touch more present on the paper skin ------ */
html[data-theme="sketch"] .bg-camera {
  opacity: 0.45;
  filter: blur(1.2px);
}

/* lines and star masks, shared by the skin */
html[data-theme="sketch"] {
  --doodle-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10' viewBox='0 0 140 10'%3E%3Cpath d='M3 6 C 25 1, 45 9, 70 5 S 115 1, 137 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* two more wave shapes so the section rules do not repeat one rhythm */
  --doodle-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='10' viewBox='0 0 230 10'%3E%3Cpath d='M4 6 C 40 2, 74 9, 112 5 S 190 1, 226 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --doodle-wave-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10' viewBox='0 0 140 10'%3E%3Cpath d='M2 5 C 16 1, 30 9, 46 6 S 74 1, 92 6 S 122 9, 138 4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --doodle-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M3 4 C 15 5, 28 10, 35 23 M35 23 l-8.5 -3.2 M35 23 l1.4 8.6' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- privacy claims */
html[data-theme="sketch"] .claims li {
  border-inline-start-style: dashed;
  border-inline-start-width: 3px;
}
html[data-theme="sketch"] .claims h3,
html[data-theme="sketch"] .claims-note { font-family: var(--display); font-weight: 400; }
html[data-theme="sketch"] .claims h3 { font-size: 1.35rem; }

/* ======================================================================
   More pencil: paper grain, colour washes, coloured leads and drawn props.
   ====================================================================== */

/* dull, coloured-pencil leads */
html[data-theme="sketch"] {
  --pencil-blue: #2f6fb5;
  --pencil-red: #d93a1f;
  --pencil-gold: #c08a1e;
  --pencil-green: #3f7d4f;
  --pencil-violet: #6f4fa8;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

/* grain over the paper, and a wash of coloured pencil behind everything */
html[data-theme="sketch"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: var(--paper-grain);
  background-size: 180px 180px;
  opacity: 0.32;
  mix-blend-mode: multiply;
}
html[data-theme="sketch"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 10% 6%, rgba(47, 111, 181, 0.13), transparent 62%),
    radial-gradient(46rem 34rem at 90% 22%, rgba(192, 138, 30, 0.12), transparent 60%),
    radial-gradient(44rem 32rem at 88% 94%, rgba(111, 79, 168, 0.11), transparent 62%);
}
@media (width < 48rem) {
  html[data-theme="sketch"] body::before { display: none; }
}

/* hatched shading on the raised sections */
html[data-theme="sketch"] .section-alt {
  background-image: repeating-linear-gradient(34deg, rgba(47, 42, 37, 0.05) 0 1px, transparent 1px 9px);
}

/* a coloured squiggle under every section heading */
html[data-theme="sketch"] .section-head h2::after {
  content: "";
  display: block;
  inline-size: min(9rem, 45%);
  block-size: 9px;
  margin-block-start: 0.55rem;
  background-color: var(--pencil-blue);
  -webkit-mask: var(--doodle-squiggle) repeat-x left center / 150px 9px;
  mask: var(--doodle-squiggle) repeat-x left center / 150px 9px;
  opacity: 0.7;
}
html[data-theme="sketch"] #privacy .section-head h2::after { background-color: var(--pencil-violet); }
html[data-theme="sketch"] #how .section-head h2::after { background-color: var(--pencil-green); }
html[data-theme="sketch"] #download .section-head h2::after { background-color: var(--pencil-gold); }
html[data-theme="sketch"] #questions .section-head h2::after { background-color: var(--pencil-red); }

/* numbered lists take the coloured leads too */
html[data-theme="sketch"] .steps li:nth-child(1)::before { color: var(--pencil-blue); }
html[data-theme="sketch"] .steps li:nth-child(2)::before { color: var(--pencil-gold); }
html[data-theme="sketch"] .steps li:nth-child(3)::before { color: var(--pencil-green); }
html[data-theme="sketch"] .facts li:nth-child(1) { border-inline-start-color: color-mix(in srgb, var(--pencil-blue) 60%, transparent); }
html[data-theme="sketch"] .facts li:nth-child(2) { border-inline-start-color: color-mix(in srgb, var(--pencil-gold) 60%, transparent); }
html[data-theme="sketch"] .facts li:nth-child(3) { border-inline-start-color: color-mix(in srgb, var(--pencil-green) 60%, transparent); }
html[data-theme="sketch"] .claims li:nth-child(1) { border-inline-start-color: var(--pencil-blue); }
html[data-theme="sketch"] .claims li:nth-child(2) { border-inline-start-color: var(--pencil-gold); }
html[data-theme="sketch"] .claims li:nth-child(3) { border-inline-start-color: var(--pencil-green); }
html[data-theme="sketch"] .claims li:nth-child(4) { border-inline-start-color: var(--pencil-violet); }
html[data-theme="sketch"] .qa details:nth-of-type(odd) summary::before { color: var(--pencil-violet); }
html[data-theme="sketch"] .qa details:nth-of-type(even) summary::before { color: var(--pencil-gold); }
html[data-theme="sketch"] .dl h3 { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px; }
html[data-theme="sketch"] .dl:nth-child(1) h3 { text-decoration-color: color-mix(in srgb, var(--pencil-green) 55%, transparent); }
html[data-theme="sketch"] .dl:nth-child(2) h3 { text-decoration-color: color-mix(in srgb, var(--pencil-blue) 55%, transparent); }
html[data-theme="sketch"] .dl:nth-child(3) h3 { text-decoration-color: color-mix(in srgb, var(--pencil-gold) 55%, transparent); }
html[data-theme="sketch"] .dl:nth-child(4) h3 { text-decoration-color: color-mix(in srgb, var(--pencil-violet) 55%, transparent); }

/* a free tag reads as green pencil, prices stay red */
html[data-theme="sketch"] .shot .tag:not(.tag-price) {
  background: rgba(63, 125, 79, 0.14);
  border-color: var(--pencil-green);
  color: #2f5f3d;
}

/* prints and frames sit on a pencil shadow */
html[data-theme="sketch"] .shot img { box-shadow: 3px 4px 0 rgba(47, 42, 37, 0.14); }
html[data-theme="sketch"] .qr { box-shadow: 3px 4px 0 rgba(47, 42, 37, 0.1); }
html[data-theme="sketch"] .foot {
  background-image: repeating-linear-gradient(34deg, rgba(47, 42, 37, 0.04) 0 1px, transparent 1px 10px);
}

/* ------------------------------------------------- three drawn props (sketch only) */
.doodle { display: none; }
html[data-theme="sketch"] .doodle {
  display: block;
  inline-size: clamp(8.5rem, 13vw, 12rem);
}
html[data-theme="sketch"] .doodle img { inline-size: 100%; block-size: auto; }
html[data-theme="sketch"] .doodle-album { justify-self: center; rotate: -3deg; }
html[data-theme="sketch"] .doodle-picture { margin-inline-start: auto; margin-block-start: var(--space-6); rotate: 2.5deg; }
html[data-theme="sketch"] .doodle-prints { margin-inline: auto; margin-block-start: var(--space-6); rotate: -1.5deg; }
@media (width < 60rem) {
  html[data-theme="sketch"] .doodle { display: none; }
}

/* ------------------------------------------------------- inline disclosure */
html[data-theme="sketch"] .more { border-block-start: 2px dashed var(--line); }
html[data-theme="sketch"] .more details { border-block-end: 2px dashed var(--line); }
html[data-theme="sketch"] .more summary {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
}
html[data-theme="sketch"] .more summary::before { color: var(--pencil-gold); }
html[data-theme="sketch"] .more details[open] summary::before { color: var(--pencil-red); }

/* ======================================================================
   Notebook props: a pinned instant print, a sold stamp, drawn step cards
   and wavy rules between sections.
   ====================================================================== */

/* the sold print, pinned over the hero photo */
.polaroid { display: none; }
html[data-theme="sketch"] .polaroid {
  display: block;
  position: absolute;
  inset-block-end: -1.6rem;
  inset-inline-start: -1.9rem;
  z-index: 2;
  inline-size: clamp(7rem, 11vw, 9.5rem);
  padding: 0.45rem 0.45rem 1.7rem;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: var(--wob-sm);
  rotate: -6deg;
  box-shadow: 4px 5px 0 rgba(47, 42, 37, 0.16);
}
html[data-theme="sketch"] .polaroid::before {
  content: "";
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 46px;
  block-size: 14px;
  background: rgba(215, 189, 141, 0.85);
  rotate: 4deg;
}
html[data-theme="sketch"] .polaroid img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
}
html[data-theme="sketch"] .polaroid span {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.35rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink);
}
@media (width < 60rem) {
  html[data-theme="sketch"] .polaroid { display: none; }
}

/* a stamped sold mark on one print in the gallery.
   Place it with a corner modifier so it lands away from the subject:
   --tl / --tr sit in the top band over the sky, --ml / --mr beside it. */
.stamp { display: none; }
html[data-theme="sketch"] .stamp {
  display: block;
  position: absolute;
  padding: 0.2rem 0.65rem;
  border: 3px solid var(--price);
  color: var(--price);
  border-radius: 8px 12px 9px 13px / 12px 8px 14px 9px;
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  rotate: -13deg;
  opacity: 0.82;
  pointer-events: none;
}
html[data-theme="sketch"] .stamp--tl { inset-block-start: 10%; inset-inline-start: 7%; }
html[data-theme="sketch"] .stamp--tr { inset-block-start: 10%; inset-inline-end: 7%; rotate: 11deg; }
html[data-theme="sketch"] .stamp--ml { inset-block-start: 36%; inset-inline-start: 5%; }
html[data-theme="sketch"] .stamp--mr { inset-block-start: 36%; inset-inline-end: 5%; rotate: 8deg; }

/* one drawn card per step, so the sequence reads like a storyboard */
.step-drawing { display: none; }
html[data-theme="sketch"] .step-drawing {
  display: block;
  inline-size: clamp(6.5rem, 10vw, 9rem);
  block-size: auto;
  rotate: -2.5deg;
}
html[data-theme="sketch"] .steps li:nth-child(2) .step-drawing { rotate: 2deg; }
html[data-theme="sketch"] .steps li:nth-child(3) .step-drawing { rotate: -1deg; }

/* sections are separated by a wavy pencil rule; each section brings its own
   lead colour and wave so the rules do not fall into a single rhythm */
html[data-theme="sketch"] .section { border-block-end: none; }
html[data-theme="sketch"] .section::after {
  content: "";
  position: absolute;
  inset-inline: clamp(1rem, 4vw, 2.5rem);
  inset-block-end: 0;
  block-size: 10px;
  background-color: color-mix(in srgb, var(--lead, var(--ink)) 45%, transparent);
  -webkit-mask: var(--rule, var(--doodle-squiggle)) repeat-x center / var(--rule-size, 170px 10px);
  mask: var(--rule, var(--doodle-squiggle)) repeat-x center / var(--rule-size, 170px 10px);
  pointer-events: none;
}
html[data-theme="sketch"] .section { position: relative; }
html[data-theme="sketch"] #selling { --lead: var(--pencil-blue); --rule: var(--doodle-wave-b); --rule-size: 230px 10px; }
html[data-theme="sketch"] #privacy { --lead: var(--pencil-violet); --rule: var(--doodle-wave-c); --rule-size: 140px 10px; }
html[data-theme="sketch"] #how { --lead: var(--pencil-green); --rule: var(--doodle-wave-b); --rule-size: 180px 10px; }
html[data-theme="sketch"] #download { --lead: var(--pencil-gold); --rule: var(--doodle-squiggle); --rule-size: 200px 10px; }
html[data-theme="sketch"] #questions { --lead: var(--pencil-red); --rule: var(--doodle-wave-c); --rule-size: 190px 10px; }