/* A sheet of squared paper: blue grid, double red margin, ink and pencil. In dark mode a blueprint. */

@font-face {
  font-family: "Kalam";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/kalam-400.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/kalam-700.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/literata.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/literata-italic.woff2") format("woff2");
}

:root {
  --desk: #e3e6df;
  --paper: #f1f3ee;
  --grid: rgb(64 96 176 / 0.16);
  --ink: #1c2230;
  --text: #272b33;
  --red: #c23b2e;
  --green: #2f9a52;
  --pencil: #3f58ae;
  --blue: #2f62c8;
  --yellow: #efb43c;
  --graphite: #5b5e66;

  --hand: "Kalam", "Bradley Hand", "Comic Sans MS", cursive;
  --serif: "Literata", Georgia, serif;
  --unit: 24px;
  --pad: 56px;
  --margin: 11rem;
  --gutter: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #16325c;
    --paper: #1d3f73;
    --grid: rgb(190 215 255 / 0.13);
    --ink: #eef3ff;
    --text: #dbe5fa;
    --red: #ff9a8c;
    --green: #8fdcb0;
    --pencil: #a9c2ff;
    --blue: #9dbcff;
    --yellow: #ffd27a;
    --graphite: #c9d6f2;
  }
}

/* strokes:start (generated by tools/strokes.py) */
:root {
  --h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M0.00 1.83L4.00 1.91L8.00 2.06L12.00 2.22L16.00 2.34L20.00 2.39L24.00 2.39L28.00 2.39L32.00 2.43L36.00 2.52L40.00 2.64L44.00 2.76L48.00 2.84L52.00 2.88L56.00 2.88L60.00 2.88L64.00 2.89L68.00 2.89L72.00 2.87L76.00 2.82L80.00 2.73L84.00 2.67L88.00 2.66L92.00 2.75L96.00 2.92L100.00 3.12L104.00 3.30L108.00 3.40L112.00 3.41L116.00 3.37L120.00 3.31L124.00 3.28L128.00 3.27L132.00 3.28L136.00 3.29L140.00 3.30L144.00 3.32L148.00 3.37L152.00 3.48L156.00 3.61L160.00 3.75L164.00 3.83L168.00 3.84L172.00 3.79L176.00 3.72L180.00 3.69L184.00 3.72L188.00 3.78L192.00 3.84L196.00 3.83L200.00 3.74L204.00 3.56L208.00 3.32L212.00 3.08L216.00 2.84L220.00 2.62L224.00 2.39L228.00 2.16L232.00 1.97L236.00 1.85L240.00 1.83' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --h2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M0.00 2.70L4.00 2.82L8.00 2.98L12.00 3.14L16.00 3.26L20.00 3.31L24.00 3.28L28.00 3.24L32.00 3.23L36.00 3.29L40.00 3.42L44.00 3.59L48.00 3.73L52.00 3.82L56.00 3.85L60.00 3.83L64.00 3.78L68.00 3.73L72.00 3.64L76.00 3.51L80.00 3.35L84.00 3.16L88.00 3.01L92.00 2.93L96.00 2.96L100.00 3.07L104.00 3.20L108.00 3.31L112.00 3.35L116.00 3.34L120.00 3.32L124.00 3.31L128.00 3.35L132.00 3.42L136.00 3.48L140.00 3.51L144.00 3.48L148.00 3.41L152.00 3.32L156.00 3.22L160.00 3.11L164.00 2.95L168.00 2.72L172.00 2.44L176.00 2.16L180.00 1.92L184.00 1.80L188.00 1.79L192.00 1.88L196.00 2.00L200.00 2.11L204.00 2.17L208.00 2.20L212.00 2.23L216.00 2.29L220.00 2.37L224.00 2.46L228.00 2.53L232.00 2.58L236.00 2.62L240.00 2.70' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='240' viewBox='0 0 6 240'%3E%3Cpath d='M3.02 0.00L2.99 4.00L2.97 8.00L2.96 12.00L2.98 16.00L3.00 20.00L3.01 24.00L3.03 28.00L3.09 32.00L3.20 36.00L3.36 40.00L3.54 44.00L3.66 48.00L3.70 52.00L3.64 56.00L3.52 60.00L3.39 64.00L3.31 68.00L3.29 72.00L3.31 76.00L3.34 80.00L3.36 84.00L3.34 88.00L3.31 92.00L3.30 96.00L3.32 100.00L3.37 104.00L3.40 108.00L3.42 112.00L3.41 116.00L3.41 120.00L3.45 124.00L3.55 128.00L3.69 132.00L3.81 136.00L3.85 140.00L3.77 144.00L3.58 148.00L3.31 152.00L3.03 156.00L2.77 160.00L2.57 164.00L2.39 168.00L2.23 172.00L2.09 176.00L1.97 180.00L1.91 184.00L1.91 188.00L1.96 192.00L2.04 196.00L2.09 200.00L2.10 204.00L2.09 208.00L2.10 212.00L2.18 216.00L2.34 220.00L2.55 224.00L2.77 228.00L2.93 232.00L3.01 236.00L3.02 240.00' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --v2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='240' viewBox='0 0 6 240'%3E%3Cpath d='M3.07 0.00L3.12 4.00L3.09 8.00L2.99 12.00L2.82 16.00L2.65 20.00L2.53 24.00L2.48 28.00L2.50 32.00L2.55 36.00L2.57 40.00L2.53 44.00L2.45 48.00L2.35 52.00L2.29 56.00L2.27 60.00L2.29 64.00L2.34 68.00L2.38 72.00L2.42 76.00L2.46 80.00L2.54 84.00L2.65 88.00L2.78 92.00L2.87 96.00L2.90 100.00L2.85 104.00L2.78 108.00L2.74 112.00L2.77 116.00L2.91 120.00L3.13 124.00L3.38 128.00L3.61 132.00L3.79 136.00L3.93 140.00L4.03 144.00L4.12 148.00L4.19 152.00L4.21 156.00L4.17 160.00L4.06 164.00L3.91 168.00L3.77 172.00L3.66 176.00L3.60 180.00L3.54 184.00L3.45 188.00L3.28 192.00L3.06 196.00L2.81 200.00L2.62 204.00L2.51 208.00L2.50 212.00L2.56 216.00L2.66 220.00L2.75 224.00L2.83 228.00L2.91 232.00L3.00 236.00L3.07 240.00' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='360' viewBox='0 0 10 360'%3E%3Cpath d='M2.20 0.00L2.23 4.00L2.27 8.00L2.31 12.00L2.35 16.00L2.39 20.00L2.41 24.00L2.43 28.00L2.42 32.00L2.41 36.00L2.39 40.00L2.38 44.00L2.38 48.00L2.39 52.00L2.42 56.00L2.46 60.00L2.49 64.00L2.52 68.00L2.53 72.00L2.52 76.00L2.48 80.00L2.43 84.00L2.38 88.00L2.32 92.00L2.27 96.00L2.25 100.00L2.24 104.00L2.25 108.00L2.28 112.00L2.32 116.00L2.37 120.00L2.42 124.00L2.48 128.00L2.54 132.00L2.62 136.00L2.71 140.00L2.80 144.00L2.90 148.00L3.00 152.00L3.08 156.00L3.14 160.00L3.17 164.00L3.18 168.00L3.16 172.00L3.13 176.00L3.10 180.00L3.07 184.00L3.06 188.00L3.05 192.00L3.06 196.00L3.06 200.00L3.06 204.00L3.04 208.00L3.01 212.00L2.95 216.00L2.89 220.00L2.81 224.00L2.73 228.00L2.66 232.00L2.59 236.00L2.54 240.00L2.49 244.00L2.44 248.00L2.40 252.00L2.35 256.00L2.31 260.00L2.28 264.00L2.25 268.00L2.24 272.00L2.25 276.00L2.27 280.00L2.30 284.00L2.34 288.00L2.36 292.00L2.36 296.00L2.34 300.00L2.30 304.00L2.24 308.00L2.17 312.00L2.10 316.00L2.05 320.00L2.01 324.00L2.00 328.00L2.01 332.00L2.03 336.00L2.06 340.00L2.09 344.00L2.12 348.00L2.15 352.00L2.17 356.00L2.20 360.00' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.50 0.00L7.57 4.00L7.62 8.00L7.65 12.00L7.67 16.00L7.69 20.00L7.71 24.00L7.75 28.00L7.78 32.00L7.83 36.00L7.87 40.00L7.90 44.00L7.91 48.00L7.91 52.00L7.89 56.00L7.86 60.00L7.82 64.00L7.78 68.00L7.73 72.00L7.68 76.00L7.62 80.00L7.56 84.00L7.48 88.00L7.38 92.00L7.28 96.00L7.18 100.00L7.08 104.00L7.00 108.00L6.94 112.00L6.92 116.00L6.92 120.00L6.95 124.00L6.99 128.00L7.04 132.00L7.07 136.00L7.10 140.00L7.10 144.00L7.09 148.00L7.07 152.00L7.05 156.00L7.03 160.00L7.01 164.00L7.01 168.00L7.00 172.00L7.00 176.00L6.99 180.00L6.97 184.00L6.95 188.00L6.93 192.00L6.92 196.00L6.91 200.00L6.92 204.00L6.93 208.00L6.96 212.00L6.98 216.00L7.00 220.00L7.00 224.00L6.99 228.00L6.96 232.00L6.91 236.00L6.87 240.00L6.84 244.00L6.83 248.00L6.84 252.00L6.87 256.00L6.91 260.00L6.97 264.00L7.02 268.00L7.07 272.00L7.09 276.00L7.11 280.00L7.11 284.00L7.10 288.00L7.08 292.00L7.07 296.00L7.05 300.00L7.04 304.00L7.03 308.00L7.01 312.00L6.99 316.00L6.97 320.00L6.94 324.00L6.93 328.00L6.94 332.00L6.97 336.00L7.02 340.00L7.10 344.00L7.20 348.00L7.31 352.00L7.41 356.00L7.50 360.00' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ruler-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cpath d='M0.75 0.5L1.27 12.96M13.21 0.5L13.27 6.90M25.23 0.5L25.85 5.01M36.76 0.5L37.31 6.92M48.57 0.5L48.11 5.40' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ruler-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='60' viewBox='0 0 14 60'%3E%3Cpath d='M0.5 1.12L11.13 0.85M0.5 12.81L4.51 13.05M0.5 24.98L5.27 25.42M0.5 37.25L5.29 37.22M0.5 48.43L4.64 49.09' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10.53 3.38L11.70 3.05L12.92 2.87L14.15 2.85L15.37 2.99L16.55 3.29L17.67 3.72L18.72 4.27L19.68 4.93L20.56 5.66L21.36 6.46L22.07 7.31L22.70 8.20L23.26 9.13L23.76 10.09L24.18 11.09L24.52 12.12L24.78 13.19L24.94 14.29L24.99 15.42L24.91 16.55L24.70 17.69L24.35 18.81L23.85 19.88L23.21 20.89L22.44 21.82L21.55 22.65L20.56 23.37L19.49 23.98L18.35 24.45L17.17 24.80L15.96 25.03L14.73 25.13L13.51 25.12L12.29 24.98L11.10 24.73L9.94 24.36L8.83 23.88L7.77 23.30L6.79 22.61L5.90 21.82L5.10 20.94L4.42 19.98L3.84 18.96L3.39 17.90L3.05 16.79L2.84 15.66L2.74 14.52L2.74 13.38L2.86 12.24L3.07 11.11L3.39 9.99L3.80 8.90L4.32 7.83L4.95 6.80L5.69 5.83L6.55 4.92L7.52 4.11L8.59 3.40L9.75 2.83L10.99 2.40L12.27 2.13L13.59 2.04L14.90 2.12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.12 9.71L11.55 9.36L12.04 9.05L12.56 8.79L13.13 8.59L13.72 8.46L14.32 8.41L14.94 8.44L15.54 8.55L16.12 8.74L16.67 9.00L17.18 9.33L17.65 9.70L18.06 10.13L18.42 10.58L18.73 11.07L18.99 11.58L19.20 12.10L19.35 12.64L19.46 13.19L19.51 13.74L19.51 14.29L19.45 14.84L19.33 15.39L19.15 15.92L18.92 16.43L18.63 16.91L18.29 17.36L17.90 17.77L17.47 18.14L17.01 18.47L16.51 18.76L15.98 19.01L15.44 19.21L14.87 19.36L14.28 19.47L13.68 19.52L13.07 19.52L12.46 19.46L11.85 19.34L11.25 19.15L10.67 18.88L10.14 18.55L9.65 18.15L9.23 17.69L8.87 17.18L8.59 16.62L8.40 16.05L8.28 15.45L8.24 14.86L8.27 14.27L8.36 13.70L8.49 13.15L8.68 12.61L8.90 12.10L9.15 11.61L9.43 11.13L9.74 10.67L10.08 10.22L10.47 9.79L10.90 9.39L11.37 9.01L11.90 8.69L12.46 8.42L13.06 8.21L13.70 8.08L14.35 8.03' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath d='M2.5 5c3.5-1.6 8-1.9 13-0.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' preserveAspectRatio='none'%3E%3Cpath d='M24.70 8.41L26.86 8.11L29.05 7.97L31.27 8.01L33.50 8.25L35.72 8.72L37.89 9.42L39.98 10.36L41.96 11.54L43.80 12.94L45.46 14.54L46.93 16.33L48.18 18.27L49.22 20.33L50.03 22.50L50.62 24.74L50.96 27.04L51.07 29.37L50.92 31.72L50.52 34.05L49.84 36.33L48.88 38.53L47.65 40.61L46.15 42.52L44.41 44.23L42.45 45.70L40.33 46.89L38.07 47.81L35.74 48.44L33.37 48.80L31.02 48.91L28.70 48.80L26.43 48.50L24.22 48.06L22.07 47.48L19.96 46.78L17.88 45.98L15.83 45.05L13.81 43.97L11.83 42.73L9.92 41.29L8.12 39.65L6.50 37.78L5.11 35.70L4.01 33.43L3.24 31.01L2.85 28.50L2.86 25.95L3.27 23.43L4.06 21.00L5.20 18.71L6.63 16.61L8.31 14.72L10.17 13.05L12.16 11.60L14.26 10.35L16.41 9.30L18.62 8.41L20.86 7.69L23.13 7.11L25.45 6.70L27.80 6.45L30.18 6.40L32.57 6.55L34.97 6.93' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' preserveAspectRatio='none'%3E%3Cpath d='M16.42 11.32L18.43 10.50L20.48 9.83L22.53 9.29L24.61 8.85L26.71 8.52L28.85 8.29L31.04 8.18L33.29 8.22L35.58 8.43L37.90 8.87L40.20 9.56L42.44 10.53L44.56 11.79L46.49 13.35L48.17 15.17L49.56 17.22L50.61 19.44L51.30 21.80L51.63 24.21L51.63 26.62L51.30 28.99L50.70 31.27L49.87 33.45L48.84 35.50L47.65 37.43L46.32 39.24L44.88 40.93L43.33 42.51L41.67 43.98L39.89 45.32L37.99 46.53L35.97 47.57L33.84 48.43L31.61 49.08L29.30 49.50L26.94 49.67L24.56 49.58L22.19 49.23L19.87 48.63L17.62 47.78L15.47 46.71L13.43 45.42L11.53 43.94L9.78 42.27L8.20 40.44L6.81 38.46L5.63 36.33L4.69 34.07L4.01 31.72L3.62 29.29L3.55 26.83L3.81 24.38L4.41 21.99L5.33 19.70L6.55 17.56L8.04 15.60L9.76 13.86L11.65 12.35L13.68 11.06L15.79 9.98L17.95 9.09L20.14 8.37L22.35 7.80L24.59 7.34L26.85 7.01L29.16 6.79L31.52 6.71L33.93 6.79' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' preserveAspectRatio='none'%3E%3Cpath d='M21.05 6.84L23.34 5.99L25.75 5.42L28.22 5.18L30.72 5.28L33.17 5.74L35.52 6.53L37.71 7.63L39.70 9.01L41.46 10.60L42.99 12.36L44.28 14.23L45.36 16.17L46.25 18.15L46.98 20.14L47.58 22.14L48.07 24.14L48.46 26.18L48.75 28.25L48.91 30.36L48.91 32.53L48.72 34.75L48.29 36.98L47.60 39.20L46.62 41.36L45.34 43.40L43.76 45.28L41.91 46.93L39.82 48.33L37.55 49.43L35.15 50.22L32.66 50.70L30.14 50.87L27.64 50.76L25.18 50.39L22.80 49.79L20.52 48.97L18.34 47.97L16.28 46.79L14.34 45.44L12.55 43.93L10.92 42.27L9.47 40.47L8.21 38.54L7.17 36.49L6.37 34.35L5.81 32.13L5.50 29.88L5.45 27.61L5.63 25.34L6.04 23.11L6.67 20.92L7.49 18.78L8.51 16.71L9.71 14.72L11.09 12.80L12.66 10.98L14.41 9.28L16.37 7.72L18.51 6.36L20.82 5.22L23.30 4.36L25.88 3.80L28.54 3.59L31.20 3.75' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' preserveAspectRatio='none'%3E%3Cpath d='M13.27 13.28L15.19 12.17L17.16 11.24L19.16 10.45L21.17 9.78L23.20 9.21L25.26 8.73L27.37 8.34L29.54 8.07L31.78 7.95L34.08 8.01L36.41 8.29L38.75 8.84L41.03 9.67L43.21 10.79L45.22 12.22L47.01 13.91L48.53 15.85L49.74 17.99L50.62 20.26L51.17 22.62L51.40 25.00L51.33 27.38L50.99 29.71L50.40 31.96L49.61 34.13L48.63 36.19L47.49 38.15L46.19 40.00L44.74 41.72L43.14 43.32L41.40 44.78L39.52 46.07L37.51 47.19L35.38 48.09L33.16 48.78L30.88 49.23L28.54 49.45L26.20 49.43L23.86 49.17L21.56 48.69L19.30 48.01L17.11 47.12L15.00 46.04L12.97 44.78L11.06 43.33L9.27 41.69L7.63 39.87L6.19 37.88L4.98 35.72L4.05 33.41L3.42 30.99L3.13 28.50L3.20 26.00L3.64 23.53L4.44 21.16L5.57 18.93L6.98 16.88L8.63 15.05L10.47 13.44L12.44 12.05L14.50 10.86L16.61 9.86L18.75 9.02L20.91 8.30L23.10 7.70L25.32 7.20L27.60 6.82L29.95 6.57' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --u-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='5' viewBox='0 0 160 5'%3E%3Cpath d='M0.00 2.76L4.00 2.66L8.00 2.56L12.00 2.55L16.00 2.61L20.00 2.68L24.00 2.72L28.00 2.73L32.00 2.72L36.00 2.67L40.00 2.53L44.00 2.33L48.00 2.16L52.00 2.07L56.00 2.05L60.00 2.01L64.00 1.94L68.00 1.88L72.00 1.90L76.00 2.00L80.00 2.14L84.00 2.27L88.00 2.42L92.00 2.58L96.00 2.69L100.00 2.71L104.00 2.63L108.00 2.56L112.00 2.56L116.00 2.64L120.00 2.70L124.00 2.72L128.00 2.72L132.00 2.73L136.00 2.74L140.00 2.73L144.00 2.70L148.00 2.70L152.00 2.74L156.00 2.79L160.00 2.76' fill='none' stroke='%233f58ae' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --u-link-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='5' viewBox='0 0 160 5'%3E%3Cpath d='M0.00 2.76L4.00 2.66L8.00 2.56L12.00 2.55L16.00 2.61L20.00 2.68L24.00 2.72L28.00 2.73L32.00 2.72L36.00 2.67L40.00 2.53L44.00 2.33L48.00 2.16L52.00 2.07L56.00 2.05L60.00 2.01L64.00 1.94L68.00 1.88L72.00 1.90L76.00 2.00L80.00 2.14L84.00 2.27L88.00 2.42L92.00 2.58L96.00 2.69L100.00 2.71L104.00 2.63L108.00 2.56L112.00 2.56L116.00 2.64L120.00 2.70L124.00 2.72L128.00 2.72L132.00 2.73L136.00 2.74L140.00 2.73L144.00 2.70L148.00 2.70L152.00 2.74L156.00 2.79L160.00 2.76' fill='none' stroke='%23c23b2e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --u-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='24' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.1L5.0 5.4L10.0 5.6L15.0 5.6L20.0 5.5L25.0 5.4L30.0 5.1L35.0 4.6L40.0 4.1L45.0 3.9L50.0 3.9L55.0 4.0L60.0 4.0L65.0 3.9L70.0 3.7L75.0 3.5L80.0 3.4L85.0 3.3L90.0 3.2L95.0 3.2L100.0 3.4L105.0 3.5L110.0 3.4L115.0 3.2L120.0 3.2L125.0 3.5L130.0 3.8L135.0 3.9L140.0 3.9L145.0 3.8L150.0 3.6L155.0 3.5L160.0 3.2L165.0 3.1L170.0 3.2L175.0 3.6L180.0 4.1L185.0 4.4L190.0 4.6L195.0 4.8L200.0 5.1L200.0 21.9L195.0 21.7L190.0 21.3L185.0 20.9L180.0 20.6L175.0 20.5L170.0 20.4L165.0 20.4L160.0 20.5L155.0 20.7L150.0 21.0L145.0 21.0L140.0 20.7L135.0 20.4L130.0 20.2L125.0 20.2L120.0 20.3L115.0 20.4L110.0 20.4L105.0 20.4L100.0 20.5L95.0 20.5L90.0 20.4L85.0 20.3L80.0 20.5L75.0 20.7L70.0 20.8L65.0 20.7L60.0 20.6L55.0 20.6L50.0 20.9L45.0 21.2L40.0 21.6L35.0 22.0L30.0 22.5L25.0 22.8L20.0 22.8L15.0 22.5L10.0 22.2L5.0 22.0L0.0 21.9Z' fill='%23ffd632' fill-opacity='0.55'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --u-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='5' viewBox='0 0 160 5'%3E%3Cpath d='M0.00 2.76L4.00 2.66L8.00 2.56L12.00 2.55L16.00 2.61L20.00 2.68L24.00 2.72L28.00 2.73L32.00 2.72L36.00 2.67L40.00 2.53L44.00 2.33L48.00 2.16L52.00 2.07L56.00 2.05L60.00 2.01L64.00 1.94L68.00 1.88L72.00 1.90L76.00 2.00L80.00 2.14L84.00 2.27L88.00 2.42L92.00 2.58L96.00 2.69L100.00 2.71L104.00 2.63L108.00 2.56L112.00 2.56L116.00 2.64L120.00 2.70L124.00 2.72L128.00 2.72L132.00 2.73L136.00 2.74L140.00 2.73L144.00 2.70L148.00 2.70L152.00 2.74L156.00 2.79L160.00 2.76' fill='none' stroke='%23a9c2ff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --u-link-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='5' viewBox='0 0 160 5'%3E%3Cpath d='M0.00 2.76L4.00 2.66L8.00 2.56L12.00 2.55L16.00 2.61L20.00 2.68L24.00 2.72L28.00 2.73L32.00 2.72L36.00 2.67L40.00 2.53L44.00 2.33L48.00 2.16L52.00 2.07L56.00 2.05L60.00 2.01L64.00 1.94L68.00 1.88L72.00 1.90L76.00 2.00L80.00 2.14L84.00 2.27L88.00 2.42L92.00 2.58L96.00 2.69L100.00 2.71L104.00 2.63L108.00 2.56L112.00 2.56L116.00 2.64L120.00 2.70L124.00 2.72L128.00 2.72L132.00 2.73L136.00 2.74L140.00 2.73L144.00 2.70L148.00 2.70L152.00 2.74L156.00 2.79L160.00 2.76' fill='none' stroke='%23ff9a8c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --u-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='24' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.1L5.0 5.4L10.0 5.6L15.0 5.6L20.0 5.5L25.0 5.4L30.0 5.1L35.0 4.6L40.0 4.1L45.0 3.9L50.0 3.9L55.0 4.0L60.0 4.0L65.0 3.9L70.0 3.7L75.0 3.5L80.0 3.4L85.0 3.3L90.0 3.2L95.0 3.2L100.0 3.4L105.0 3.5L110.0 3.4L115.0 3.2L120.0 3.2L125.0 3.5L130.0 3.8L135.0 3.9L140.0 3.9L145.0 3.8L150.0 3.6L155.0 3.5L160.0 3.2L165.0 3.1L170.0 3.2L175.0 3.6L180.0 4.1L185.0 4.4L190.0 4.6L195.0 4.8L200.0 5.1L200.0 21.9L195.0 21.7L190.0 21.3L185.0 20.9L180.0 20.6L175.0 20.5L170.0 20.4L165.0 20.4L160.0 20.5L155.0 20.7L150.0 21.0L145.0 21.0L140.0 20.7L135.0 20.4L130.0 20.2L125.0 20.2L120.0 20.3L115.0 20.4L110.0 20.4L105.0 20.4L100.0 20.5L95.0 20.5L90.0 20.4L85.0 20.3L80.0 20.5L75.0 20.7L70.0 20.8L65.0 20.7L60.0 20.6L55.0 20.6L50.0 20.9L45.0 21.2L40.0 21.6L35.0 22.0L30.0 22.5L25.0 22.8L20.0 22.8L15.0 22.5L10.0 22.2L5.0 22.0L0.0 21.9Z' fill='%23ffd632' fill-opacity='0.3'/%3E%3C/svg%3E");
  }
}
/* strokes:end */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--text);
  font: 400 17px/var(--unit) var(--serif);
  font-optical-sizing: auto;
}

/* The sheet: printed squares; the frame, rulers, margin and holes are drawn by hand. */
.sheet {
  position: relative;
  max-width: 1240px;
  margin: 32px auto;
  padding: 88px var(--pad) 56px;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--unit) var(--unit);
}

/* A drawn line or shape: the colour is the background, the stroke is the mask. */
.frame,
.ruler,
.margin-rule,
.hole,
.sketch::before,
.sketch::after,
.steps li::after,
.title-block th::before,
.title-block td::before,
.title-block th::after,
.title-block td::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--ink);
}

/* A rectangle of four lines that overrun at the corners, as when drawn with a ruler. */
.frame,
.sketch::before,
.sketch::after {
  -webkit-mask:
    var(--h) 0 1px / 240px 6px repeat-x,
    var(--h2) -97px calc(100% - 1px) / 240px 6px repeat-x,
    var(--v) 3px 0 / 6px 240px repeat-y,
    var(--v2) calc(100% - 3px) -61px / 6px 240px repeat-y;
  mask:
    var(--h) 0 1px / 240px 6px repeat-x,
    var(--h2) -97px calc(100% - 1px) / 240px 6px repeat-x,
    var(--v) 3px 0 / 6px 240px repeat-y,
    var(--v2) calc(100% - 3px) -61px / 6px 240px repeat-y;
}

.frame {
  inset: 12px;
}

.ruler {
  opacity: 0.6;
}
.ruler-top {
  top: 22px;
  left: 64px;
  right: 64px;
  height: 14px;
  -webkit-mask: var(--ruler-h) 0 0 / 60px 14px repeat-x;
  mask: var(--ruler-h) 0 0 / 60px 14px repeat-x;
}
.ruler-left {
  top: 64px;
  bottom: 64px;
  left: 22px;
  width: 14px;
  -webkit-mask: var(--ruler-v) 0 0 / 14px 60px repeat-y;
  mask: var(--ruler-v) 0 0 / 14px 60px repeat-y;
}

/* The double red margin, from top to bottom of the sheet */
.margin-rule {
  top: 0;
  bottom: 0;
  left: calc(var(--pad) + var(--margin) - 6px);
  width: 10px;
  background: var(--red);
  -webkit-mask: var(--rule) 0 0 / 10px 360px repeat-y;
  mask: var(--rule) 0 0 / 10px 360px repeat-y;
}

.hole {
  width: 28px;
  height: 28px;
  -webkit-mask: var(--hole) center / contain no-repeat;
  mask: var(--hole) center / contain no-repeat;
}
.hole-tl { top: 24px; left: 24px; }
.hole-tr { top: 24px; right: 24px; transform: rotate(90deg); }
.hole-bl { bottom: 24px; left: 24px; transform: rotate(-90deg); }
.hole-br { bottom: 24px; right: 24px; transform: rotate(180deg); }

/* Rows: the margin column on the left of the red line, the notes on its right. */
.row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
}

.main {
  grid-column: 2;
  padding: 0 0 72px var(--gutter);
}

/* Text */

p {
  margin: 0 0 var(--unit);
  max-width: 38rem;
}
/* No word left alone on the last line */
p,
li {
  text-wrap: pretty;
}

a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  background: var(--u-link) 0 100% / 160px 5px repeat-x;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
a:hover {
  color: var(--red);
  background-image: var(--u-link-hover);
}
a:focus-visible {
  outline: 2px dashed var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

code {
  font: 500 0.9em/1 ui-monospace, "SF Mono", Menlo, monospace;
  overflow-wrap: break-word;
}
/* The command breaks at its spaces, not after the dashes of an option */
.nobr {
  white-space: nowrap;
}

mark {
  color: inherit;
  margin: 0 -0.15em;
  padding: 0 0.15em;
  background: var(--u-mark) center / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h1,
h2,
h3 {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--ink);
}

/* The icon and the name stay on one line: the name is 2.48em wide, the icon 0.87em. */
h1 {
  --gap: 28px;
  --size: 7.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px var(--gap);
  margin: 0 0 var(--unit);
  font-size: var(--size);
  font-size: min(var(--size), (100cqi - var(--gap)) / 3.38);
  line-height: 1;
  letter-spacing: -0.01em;
}
h1 img {
  width: 0.87em;
  height: 0.87em;
  transform: rotate(-4deg);
}

h2 {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--unit);
  font-size: 2.25rem;
  line-height: 48px;
}
h2::after {
  content: "";
  display: block;
  width: calc(100% + 0.3em);
  height: 12px;
  margin: -4px 0 0 -0.1em;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C22 3 40 11 62 6s42-5 62 1 44 4 74-4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C22 3 40 11 62 6s42-5 62 1 44 4 74-4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.lead {
  max-width: 34rem;
  text-wrap: balance;
  font-size: 1.75rem;
  line-height: 40px;
  color: var(--ink);
}

/* Handwritten notes, in pencil */
.note {
  font-family: var(--hand);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--pencil);
}

/* Hero */
.hero-text {
  container-type: inline-size;
}
/* One sentence per line: a little smaller where the column is narrow, and a sentence
   that still has to wrap wraps on its own. */
.hero .lead {
  font-size: clamp(1.5rem, 100cqi / 18, 1.75rem);
}
.hero .lead > span {
  display: block;
  text-wrap: balance;
}
.hero,
.feature {
  grid-template-columns: var(--margin) minmax(0, 1fr) minmax(0, clamp(26rem, 34vw, 34rem));
  align-items: start;
}

.note-title {
  align-self: flex-start;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0;
  transform: rotate(-4deg);
}

/* The call to action: a yellow button, drawn around twice */
.get {
  margin-top: 40px;
}
.button.sketch {
  display: inline-block;
  padding: 10px 30px 8px;
  font: 700 1.625rem/1.3 var(--hand);
  color: #1c2230;
  background: var(--yellow);
}
@media (hover: hover) {
  .button:hover {
    color: #1c2230;
    transform: rotate(-1deg);
  }
}
/* Pressed: the paper goes down a little, at once */
.button:active {
  color: #1c2230;
  transform: rotate(-1deg) translateY(2px) scale(0.98);
}
@media (prefers-reduced-motion: no-preference) {
  .button.sketch { transition: transform 160ms ease-out; }
  .button.sketch:active { transition-duration: 40ms; }
}
/* Takku Credit's packs: three drawn boxes, the recommended one yellow like the download button */
.packs {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  max-width: 38rem;
  margin: 40px 0 calc(var(--unit) * 3);
}
.pack {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 12px 8px 10px;
  text-align: center;
  font: 700 1.625rem/1.2 var(--hand);
  color: var(--ink);
  background: var(--paper);
}
.pack > span:not(.note) {
  margin-top: 2px;
  font: 400 0.8125rem/1.3 var(--serif);
}
.pack.pack-recommended {
  padding: 18px 8px 14px;
  font-size: 2rem;
  color: #1c2230;
  background: var(--yellow);
}
.pack-recommended > span:not(.note) {
  color: #1c2230;
}
.pack .note {
  position: absolute;
  top: -1.6rem;
  left: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  white-space: nowrap;
  transform: rotate(-3deg);
}
/* A remark right under its box, as wide as the box: it wraps rather than run under the next one */
.pack .note-below {
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  white-space: normal;
  text-align: center;
  transform: rotate(1.5deg);
}
@media (hover: hover) {
  /* Not the link underline of a:hover, which would tile over the whole box */
  .pack:hover {
    color: var(--ink);
    background-image: none;
    transform: rotate(-1deg);
  }
  .pack-recommended:hover {
    color: #1c2230;
  }
}
.pack:active {
  transform: rotate(-1deg) translateY(2px) scale(0.98);
}
@media (prefers-reduced-motion: no-preference) {
  .pack { transition: transform 160ms ease-out; }
  .pack:active { transition-duration: 40ms; }
}

.get p {
  margin: 28px 0 0;
  font-size: 0.9375rem;
}
.get p + p {
  margin-top: 4px;
}

/* A box drawn twice, as around the formula to remember */
.sketch {
  position: relative;
  background: var(--paper);
}
.sketch::before {
  inset: -4px -6px;
}
.sketch::after {
  inset: -9px -3px -2px -10px;
  opacity: 0.45;
  transform: rotate(-0.5deg);
  -webkit-mask-position: -131px 1px, -23px calc(100% - 1px), 3px -170px, calc(100% - 3px) -12px;
  mask-position: -131px 1px, -23px calc(100% - 1px), 3px -170px, calc(100% - 3px) -12px;
}

/* The drawing: pencil outlines, coloured pencil fills */
.schematic {
  grid-column: 3;
  margin: -24px 0 48px;
}
.snap {
  grid-column: 3;
  margin: 0 0 72px;
}
.feature .note {
  transform: rotate(-2deg);
}
.schematic svg,
.snap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.boundary {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.8;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}
.outline {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.outline rect {
  fill: none;
}
.fill-red { fill: var(--red); }
.fill-blue { fill: var(--blue); }
.fill-green { fill: var(--green); }
.fill-graphite { fill: var(--graphite); opacity: 0.55; }
.fill-yellow { fill: var(--yellow); }

.sheet-paper {
  fill: var(--paper);
  stroke: var(--graphite);
  stroke-width: 1.5;
}
.tape {
  fill: var(--graphite);
  opacity: 0.2;
}
.scribbles path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribbles .ink-red { stroke: var(--red); }
.scribbles .ink-blue { stroke: var(--blue); }
.scribbles .ink-green { stroke: var(--green); }
.scribbles .ink-graphite { stroke: var(--graphite); }
.scribbles .light { opacity: 0.6; }
.scribbles .highlight {
  stroke: var(--yellow);
  stroke-width: 11;
  opacity: 0.75;
}
.sparkle {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
  stroke-linecap: round;
}
.scribbles .sparkle-red {
  fill: var(--red);
  stroke: var(--red);
  stroke-width: 1;
}
.arrow {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hand {
  font-family: var(--hand);
  font-size: 20px;
  fill: var(--ink);
  /* A halo of paper, so the lines underneath do not cross the words. */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.hand.small { font-size: 16px; }
.graphite-text { fill: var(--graphite); }
.red-text { fill: var(--red); }

/* Motion: the arrows are drawn when the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.7s cubic-bezier(0.55, 0.1, 0.35, 1) 0.3s forwards;
  }
  .trace.head {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: appear 0.15s linear 1s forwards;
  }
  .trace.late { animation-delay: 1.1s; }
  .trace.head.late { animation-delay: 1.8s; }
  .trace.later { animation-delay: 1.6s; }
  .trace.head.later { animation-delay: 2.3s; }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Screenshots: the flash of the camera; still, the drawing shows the picture already in the note. */
.burst {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
  stroke-linecap: round;
}
.flash {
  fill: #fff;
  opacity: 0;
}
/* Every 7 seconds, once the arrows above are drawn: the shutter goes down, the camera flashes,
   the screen goes white, and the picture lands in the note. */
@media (prefers-reduced-motion: no-preference) {
  .snap .shutter,
  .snap .burst,
  .snap .flash,
  .snap .snap-trace,
  .snap .photo {
    animation: 7s linear 2.6s infinite both;
  }
  .snap .shutter {
    transform-box: fill-box;
    animation-name: snap-shutter;
  }
  .snap .burst {
    transform-box: view-box;
    transform-origin: 312px 65px;
    animation-name: snap-burst;
  }
  .snap .flash { animation-name: snap-flash; }
  .snap .snap-trace {
    stroke-dasharray: 1;
    animation-name: snap-draw;
  }
  .snap .snap-trace.head {
    stroke-dasharray: none;
    animation-name: snap-head;
  }
  .snap .photo { animation-name: snap-photo; }
}
@keyframes snap-shutter {
  0%, 4% { transform: none; }
  1.5% { transform: translateY(3px); }
}
@keyframes snap-burst {
  0%, 1% { opacity: 0; transform: scale(0.5); }
  3% { opacity: 1; transform: scale(1); }
  10%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes snap-flash {
  0%, 1% { opacity: 0; }
  3% { opacity: 0.9; }
  14%, 100% { opacity: 0; }
}
@keyframes snap-draw {
  0%, 8% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.1, 0.35, 1); }
  18%, 88% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes snap-head {
  0%, 18% { opacity: 0; }
  19%, 88% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes snap-photo {
  0%, 16% { opacity: 0; transform: translateY(-10px); animation-timing-function: ease-out; }
  24%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}
@keyframes appear {
  to { opacity: 1; }
}

/* Lists */
.steps,
.benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 38rem;
}

/* What Takku is good at: four short notes, two by two */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--unit) 48px;
  max-width: 56rem;
}
.benefits h3 {
  margin: 0 0 8px;
  font-size: 1.375rem;
  line-height: 1.3;
}
.benefits p {
  margin: 0;
}

.steps {
  counter-reset: step;
}
.steps li {
  position: relative;
  min-height: 48px;
  margin-bottom: var(--unit);
  counter-increment: step;
}
.steps li::before,
.steps li::after {
  position: absolute;
  top: -12px;
  right: calc(100% + var(--gutter) + 20px);
  width: 52px;
  height: 52px;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  font: 700 1.75rem/1 var(--hand);
  color: var(--red);
  transform: rotate(-6deg);
}
.steps li::after {
  background: var(--red);
  -webkit-mask: var(--circle, var(--circle-1)) center / contain no-repeat;
  mask: var(--circle, var(--circle-1)) center / contain no-repeat;
}
.steps li:nth-child(4n + 2) { --circle: var(--circle-2); }
.steps li:nth-child(4n + 3) { --circle: var(--circle-3); }
.steps li:nth-child(4n + 4) { --circle: var(--circle-4); }
.steps li:nth-child(even)::before {
  transform: rotate(5deg);
}
.steps .note {
  display: block;
  margin-top: 4px;
  transform: rotate(-1deg);
  transform-origin: left;
}

.note-red {
  color: var(--red);
}

/* Other pages: the way home, the title, boxes of examples */
.home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0;
  font: 700 1.5rem/1 var(--hand);
  background: none;
}
.home:hover {
  background: none;
}
.home img {
  width: 44px;
  height: 44px;
  transform: rotate(-4deg);
}
/* Hovered, the notebook tilts towards you; pressed, it goes down a little */
@media (hover: hover) {
  .home:hover img { transform: rotate(-10deg) translateY(-2px); }
}
.home:active img { transform: rotate(-10deg) scale(0.94); }
@media (prefers-reduced-motion: no-preference) {
  .home img { transition: transform 180ms ease-out; }
  .home:active img { transition-duration: 40ms; }
}
h1.page-title {
  display: block;
  font-size: 4.5rem;
}
.examples {
  max-width: 42rem;
  margin-top: 48px;
  padding: 24px 28px 20px;
}
.examples h3 {
  margin: 0 0 16px;
  font-size: 1.375rem;
  line-height: 1.3;
}
.examples dl {
  margin: 0 0 16px;
}
.examples dt {
  font: 700 1.1875rem/var(--unit) var(--hand);
  color: var(--ink);
}
.examples dd {
  margin: 4px 0 16px;
}
.examples .note {
  margin: 0;
  transform: rotate(-1deg);
  transform-origin: left;
}
.benefits + .more {
  margin: 40px 0 0;
}

/* Questions and answers */
.qa {
  max-width: 38rem;
  margin: 0;
}
.qa dt {
  margin-bottom: 4px;
  font: 700 1.375rem/1.3 var(--hand);
  color: var(--ink);
}
.qa dd {
  margin: 0 0 32px;
}

/* Code to copy, in a box drawn twice */
pre.sketch {
  max-width: 38rem;
  margin: 0 0 var(--unit);
  padding: 16px 20px;
  white-space: pre-wrap;
}
pre code {
  line-height: 1.6;
}
/* Code inside a step: room for the drawn box below the step's text */
.steps pre.sketch {
  margin: 14px 0 6px;
}

.main > ol + p {
  margin-top: var(--unit);
}

/* A comparison, ruled by hand like the title block */
.compare-wrap {
  max-width: 46rem;
  padding: 6px 4px;
}
.compare {
  width: 100%;
  border-collapse: collapse;
}
.compare th,
.compare td {
  position: relative;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  font: 700 1.375rem/1.2 var(--hand);
  color: var(--ink);
}
.compare tbody th {
  width: 8.5rem;
  font: 400 1rem/var(--unit) var(--hand);
  color: var(--pencil);
}
.compare tbody tr > *::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 6px;
  background: var(--ink);
  opacity: 0.6;
  -webkit-mask: var(--h2) var(--shift, 0) 0 / 240px 6px repeat-x;
  mask: var(--h2) var(--shift, 0) 0 / 240px 6px repeat-x;
  pointer-events: none;
}
.compare tbody td { --shift: -71px; }

/* The title block of a technical drawing, aligned with the notes */
footer .main {
  padding-bottom: 8px;
}
.title-block-wrap {
  width: min(100%, 42rem);
}
.title-block {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.title-block th,
.title-block td {
  position: relative;
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
/* The list of sheets, the current one circled */
.sheets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.sheet-link {
  white-space: nowrap;
}
.sheet-link[aria-current] {
  position: relative;
  display: inline-block;
  color: var(--ink);
}
.sheet-link[aria-current]::after {
  content: "";
  position: absolute;
  inset: -7px -12px;
  background: var(--red);
  -webkit-mask: var(--circle-2) center / 100% 100% no-repeat;
  mask: var(--circle-2) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Rules: one on the right of each cell, one under it */
.title-block th::before,
.title-block td::before {
  top: -3px;
  bottom: -3px;
  right: -3px;
  width: 6px;
  opacity: 0.8;
  -webkit-mask: var(--v) 0 var(--shift, 0) / 6px 240px repeat-y;
  mask: var(--v) 0 var(--shift, 0) / 6px 240px repeat-y;
}
.title-block th::after,
.title-block td::after {
  left: -3px;
  right: -3px;
  bottom: -3px;
  height: 6px;
  opacity: 0.8;
  -webkit-mask: var(--h2) var(--shift, 0) 0 / 240px 6px repeat-x;
  mask: var(--h2) var(--shift, 0) 0 / 240px 6px repeat-x;
}
.title-block td { --shift: -71px; }
.title-block tr > :last-child::before,
.title-block tr:last-child > *::after {
  display: none;
}
.title-block th {
  width: 7rem;
  font: 400 0.9375rem/var(--unit) var(--hand);
  color: var(--pencil);
}

/* Narrower screens: the schematic goes under the text. */
@media (max-width: 1080px) {
  .hero,
  .feature {
    grid-template-columns: var(--margin) minmax(0, 1fr);
  }
  .schematic,
  .snap {
    grid-column: 2;
    width: min(100%, 30rem);
    margin: 0 0 56px var(--gutter);
  }
  .feature .main { padding-bottom: 32px; }

  /* The title block in two columns */
  .title-block-wrap { width: min(100%, 26rem); }
  .title-block,
  .title-block tbody { display: block; }
  .title-block tr {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
  .title-block th { width: auto; }
  .title-block td::before { display: none; }
  .title-block tr:last-child > *::after { display: block; }
  .title-block tr:last-child > :nth-child(n + 3)::after { display: none; }
}

@media (max-width: 760px) {
  :root {
    --pad: 18px;
    --margin: 26px;
    --gutter: 18px;
  }
  .sheet {
    margin: 0;
    padding-top: 64px;
    padding-bottom: 48px;
  }
  .frame { inset: 8px; }
  .ruler-top { top: 16px; left: 44px; right: 44px; }
  .ruler-left { display: none; }
  .hole { width: 22px; height: 22px; }
  .hole-tl, .hole-tr { top: 14px; }
  .hole-bl, .hole-br { bottom: 14px; }
  .hole-tl, .hole-bl { left: 14px; }
  .hole-tr, .hole-br { right: 14px; }

  .main { padding-bottom: 56px; }
  h1 { --size: 4.5rem; --gap: 18px; row-gap: 4px; }
  .note-title { flex-basis: 100%; margin-top: 8px; transform: rotate(-2deg); }
  h2 { font-size: 2rem; line-height: 44px; }
  .lead { font-size: 1.5rem; line-height: 34px; }
  .schematic,
  .snap { grid-column: 2; width: auto; margin: 0 4px 48px 8px; }

  .benefits { grid-template-columns: 1fr; }
  h1.page-title { font-size: 3rem; }
  .examples { padding: 20px 18px 16px; }
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; width: auto; }
  .compare tr { position: relative; padding: 12px 0 8px; }
  .compare tbody tr > *::before { display: none; }
  .compare tbody tr::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--ink);
    opacity: 0.6;
    -webkit-mask: var(--h2) 0 0 / 240px 6px repeat-x;
    mask: var(--h2) 0 0 / 240px 6px repeat-x;
  }
  .compare tbody tr:first-child::before { display: none; }
  .compare th,
  .compare td { padding: 2px 12px; }
  /* Each answer says whose it is: the column headers are hidden */
  .compare tbody tr > td::before {
    content: attr(data-label) ": ";
    display: inline;
    position: static;
    height: auto;
    opacity: 1;
    background: none;
    -webkit-mask: none;
    mask: none;
    font-family: var(--hand);
    font-weight: 700;
    color: var(--ink);
  }
  .steps li { padding-left: 46px; }
  .steps li::before,
  .steps li::after {
    right: auto;
    left: -4px;
    top: -8px;
    width: 40px;
    height: 40px;
  }
  .steps li::before { font-size: 1.3rem; }

}