/* WhatXlabs presentations: the studio's tokens, type and pencil-sketch layers, shared by the
   choice page and both decks (taken from the studio site, whatxlabs-studio/css/site.css). */
:root {
  --paper: #F4F4F1;
  --col: #E4E4DF;
  --ink: #141414;
  --mute: #5A5A56;
  --faint: rgba(20, 20, 20, .34);
  --line: rgba(20, 20, 20, .12);
  --pink: #DD4589;
  --pink-soft: #FBE3EC;
  --teal: #5CC7BE;
  --cyan: #0B9DA3;
  --plum: #46305A;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --hand: 'Architects Daughter', 'Segoe Print', cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* a little paper grain over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.hand { font-family: var(--hand); }

/* ---------- the studio mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--plum); text-decoration: none; font: 700 21px/1 var(--sans); letter-spacing: -.02em; }
.logo { display: block; width: 86px; height: auto; }
.logo-gap { stroke: var(--paper); }

/* ---------- sketches (pencil drawings that draw themselves in, see js/sketch.js) ---------- */
.sketch { position: relative; margin: 0; aspect-ratio: var(--ar, 1); }
.sketch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sketch path[data-a] { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sketch .ln-major { stroke: #222220; }
.sketch .ln-minor { stroke: #3B3B38; }
.sketch .gd { stroke: #8E8E89; stroke-width: 2.2; }
.sketch .dots circle { fill: #2A2A28; opacity: 0; transition: opacity .2s; }
.sketch .shade, .sketch .tone {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.sketch .shade { background: #8E8E88; filter: blur(9px); }
.sketch .tone { background: linear-gradient(135deg, rgba(120, 120, 114, 0) 30%, rgba(80, 80, 74, .13) 62%, rgba(46, 46, 42, .26) 100%); }
.sketch .sk-label { font-family: var(--hand); fill: #232321; letter-spacing: .04em; opacity: 0; }
.sketch .sk-arrow { fill: none; stroke: var(--pink); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }