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

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

  body {
    margin: 0;
  }

  b,
  strong,
  optgroup {
    font-weight: bold;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }

  sup {
    inset-block-start: -0.5em;
  }

  sub {
    inset-block-end: -0.25em;
  }

  hr {
    box-sizing: content-box;
    block-size: 0;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    color: inherit;
    font: inherit;
  }

  button,
  select {
    text-transform: none;
  }

  :is(button, input[type='button'], input[type='reset'], input[type='submit']) {
    cursor: pointer;
  }

  :is(button, input, textarea, select):disabled {
    cursor: not-allowed;
  }

  input {
    line-height: normal;
  }

  input:is([type='checkbox'], [type='radio']) {
    padding: 0;
  }

  fieldset {
    margin: 0 2px;
    padding-block: 0.35em 0.75em;
    padding-inline: 0.625em;
    border: 1px solid var(--color-line);
  }

  legend {
    padding: 0;
    border: 0;
  }

  textarea {
    overflow: auto;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  td,
  th {
    padding: 0;
  }

  img {
    max-inline-size: 100%;
    border: 0;
  }

  :is(.post, .cms-page) img[width][height] {
    block-size: auto;
  }
}

@layer tokens {
  :root {
    --color-charcoal: oklch(32.1% 0.0036 92);
    --color-footer: oklch(37.15% 0.0036 92);
    --color-muted: oklch(51% 0.0045 92);
    --color-ink: oklch(20% 0.0031 92);
    --color-paper: oklch(99% 0.0045 92);
    --color-page: oklch(95% 0.0059 92);
    --color-line: oklch(79% 0.0054 92);
    --color-cyan: oklch(70.44754% 0.1425504 231.3243);
    --color-cyan-soft: oklch(91.36662% 0.0618569 219.57241);
    --color-cyan-light: oklch(85.95504% 0.0990832 221.41693);
    --color-cyan-hover: oklch(94.21948% 0.0407144 219.93513);
    --color-cyan-pressed: oklch(77.32978% 0.1473143 228.4731);
    --color-cyan-strong: oklch(81.24146% 0.1284595 224.10865);
    --color-focus: oklch(55.33688% 0.1120686 231.39521);
    --focus-color: var(--color-focus);
    --color-rule-dark: oklch(48.90564% 0 0);
    --color-on-dark-muted: oklch(79.83724% 0 0);
    --color-line-soft: oklch(91% 0.0059 92);
    --color-notice: oklch(98.7513% 0.0654089 107.53988);
    --color-input-focus: oklch(99.47003% 0.0261003 106.8648);
    --color-danger: oklch(49.56677% 0.159303 27.05618);
    --code-surface: oklch(98.11188% 0.0092679 286.22766 / 0.6);

    --green-50: oklch(95% 0.03 136);
    --green-100: oklch(90% 0.05 136);
    --green-200: oklch(85% 0.085 136);
    --green-300: oklch(81% 0.105 136);
    --green-400: oklch(76% 0.13 136);
    --green-500: oklch(72% 0.13 136);
    --green-600: oklch(69% 0.13 136);
    --green-700: oklch(59% 0.13 136);
    --green-800: oklch(48% 0.065 136);
    --green-900: oklch(25% 0.052 136);

    --syntax-comment: oklch(53.3739% 0.0227164 107.14513);
    --syntax-number: oklch(52.46878% 0.0895633 194.76895);
    --syntax-string: oklch(57.33451% 0.2236443 17.58763);
    --syntax-title: oklch(42.88642% 0.1759857 29.23389);
    --syntax-type: oklch(45.92978% 0.0860968 268.88144);
    --syntax-tag: oklch(27.11498% 0.1878882 264.05202);
    --syntax-attr: oklch(54.31226% 0.09271 194.76895);
    --syntax-regexp: oklch(51.94321% 0.1557702 146.67062);
    --syntax-symbol: oklch(45.74035% 0.1960831 343.05562);
    --syntax-builtin: oklch(51.0109% 0.1061866 233.59544);
    --syntax-meta: oklch(54.51691% 0 0);
    --syntax-deletion: oklch(92.57379% 0.037793 17.8549);
    --syntax-addition: oklch(96.6748% 0.0571466 145.1165);

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    --page-width: 1080px;
    --page-gutter: clamp(16px, calc(20vw - 80px), 40px);
    --logo-overlap: 74px;

    --radius-s: 2px;
    --radius-m: 3px;
    --radius-l: 5px;

    --shadow-ink: oklch(28% 0.012 70);
    --elevation-1:
      0 1px 1px color-mix(in oklch, var(--shadow-ink) 8%, transparent),
      0 1px 3px color-mix(in oklch, var(--shadow-ink) 10%, transparent);
    --elevation-2:
      0 1px 2px color-mix(in oklch, var(--shadow-ink) 12%, transparent),
      0 3px 6px -2px color-mix(in oklch, var(--shadow-ink) 12%, transparent),
      0 10px 20px -10px color-mix(in oklch, var(--shadow-ink) 24%, transparent);
    --shadow-well: inset 0 1px 2px color-mix(in oklch, var(--shadow-ink) 14%, transparent);

    --glow-color: var(--color-cyan-light);
    --glow-core: var(--color-cyan-soft);

    --transition-state: 120ms ease-out;

    --color-paper-warm: oklch(92.66608% 0.0080077 73.74086);
    --pattern-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3Cpath d='M0 9.5 7.5 3.5 15 9.5V12H0Z' fill='%23000' opacity='.45' filter='url(%23b)' transform='translate(0 -1)'/%3E%3Cpath d='M0 10 7.5 4 15 10V12H0Z' fill='%23eae6e1'/%3E%3C/svg%3E");
    --pattern-seam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.5' height='2'%3E%3Crect width='4' height='1' fill='%235a4f45' opacity='.16'/%3E%3Crect y='1' width='4' height='1' fill='%23fff' opacity='.7'/%3E%3C/svg%3E");
    --pattern-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --pattern-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cstyle%3E.v{fill:none;stroke-width:1;stroke-linecap:round}.f{stroke:none}%3C/style%3E%3Cdefs%3E%3Cg id='d'%3E%3Cpath class='v' d='M0 60C40 30 60 30 80 60S120 90 160 60'/%3E%3Cg transform='translate(18 46) rotate(-65) scale(0.8)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(42 37) rotate(205) scale(0.75)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(66 44) rotate(-25) scale(0.9)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(94 76) rotate(115) scale(0.8)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(120 82) rotate(25) scale(0.85)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(146 70) rotate(-120) scale(0.75)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cpath class='v' transform='translate(54 36) rotate(-30) scale(0.8)' d='M0 0c7-7 16-5 16 3s-8 8-10 3 2-6 5-3'/%3E%3Cpath class='v' transform='translate(108 86) rotate(150) scale(0.8)' d='M0 0c7-7 16-5 16 3s-8 8-10 3 2-6 5-3'/%3E%3Cg class='f'%3E%3Ccircle cx='80' cy='52' r='2'/%3E%3Ccircle cx='84' cy='49' r='1.6'/%3E%3Ccircle cx='85' cy='54' r='1.4'/%3E%3C/g%3E%3Cg transform='translate(80 0)'%3E%3Cpath class='v' d='M-80 0C-40-24-20-24 0 0S40 24 80 0'/%3E%3Cg transform='translate(-62 -12) rotate(-60) scale(0.7)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(-26 -18) rotate(200) scale(0.65)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(18 14) rotate(120) scale(0.7)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(52 16) rotate(20) scale(0.7)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cpath class='v' transform='translate(-8 -12) rotate(40) scale(0.7)' d='M0 0c7-7 16-5 16 3s-8 8-10 3 2-6 5-3'/%3E%3Cg class='f'%3E%3Ccircle cx='34' cy='4' r='2'/%3E%3Ccircle cx='38' cy='1' r='1.6'/%3E%3Ccircle cx='39' cy='6' r='1.4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(80 120)'%3E%3Cpath class='v' d='M-80 0C-40-24-20-24 0 0S40 24 80 0'/%3E%3Cg transform='translate(-62 -12) rotate(-60) scale(0.7)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(-26 -18) rotate(200) scale(0.65)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(18 14) rotate(120) scale(0.7)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cg transform='translate(52 16) rotate(20) scale(0.7)'%3E%3Cpath class='f' d='M0 0C6-9 22-10 32 0 22 10 6 9 0 0Z'/%3E%3Cpath class='v' d='M4 0Q16-1 27 0'/%3E%3C/g%3E%3Cpath class='v' transform='translate(-8 -12) rotate(40) scale(0.7)' d='M0 0c7-7 16-5 16 3s-8 8-10 3 2-6 5-3'/%3E%3Cg class='f'%3E%3Ccircle cx='34' cy='4' r='2'/%3E%3Ccircle cx='38' cy='1' r='1.6'/%3E%3Ccircle cx='39' cy='6' r='1.4'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23d' x='.5' y='.7' fill='%237d6e60' stroke='%237d6e60' opacity='0.144'/%3E%3Cuse href='%23d' fill='%23fff' stroke='%23fff' opacity='0.32'/%3E%3C/svg%3E");
    --pattern-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M-1 10 10 -1M-1 1 1 -1M8 10 10 8' stroke='%23a7a7a7' stroke-opacity='.07'/%3E%3C/svg%3E");
    --pattern-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .22'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    --icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
    --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
    --icon-twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 82'%3E%3Cpath d='M82.03 20.568c-3.018 1.338-6.26 2.243-9.662 2.649 3.473-2.082 6.141-5.379 7.396-9.308-3.25 1.929-6.851 3.329-10.684 4.083-3.068-3.27-7.44-5.312-12.279-5.312-9.291 0-16.823 7.533-16.823 16.824 0 1.318.149 2.602.436 3.833-13.982-.702-26.378-7.399-34.676-17.578-1.448 2.485-2.277 5.375-2.277 8.458 0 5.836 2.97 10.986 7.484 14.002-2.758-.087-5.352-.844-7.62-2.104l-.001.211c0 8.151 5.799 14.951 13.495 16.496-1.412.384-2.898.591-4.432.591-1.084 0-2.138-.106-3.166-.303 2.141 6.684 8.353 11.547 15.715 11.684-5.757 4.513-13.011 7.2-20.894 7.2-1.358 0-2.697-.079-4.013-.233 7.445 4.773 16.288 7.559 25.789 7.559 30.944 0 47.866-25.636 47.866-47.867 0-.729-.017-1.455-.049-2.176 3.288-2.372 6.139-5.335 8.395-8.709'/%3E%3C/svg%3E");
    --icon-pinterest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E");
    --icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
    --icon-foursquare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 82'%3E%3Cpath d='M81.831 9.321l-30.611 31.225-11.009-10.609-4.616 4.442c-2.452-6.988-9.284-12.018-17.312-12.018-10.09 0-18.283 7.944-18.283 17.741 0 9.714 8.034 17.6 18.003 17.734l22.129 21.495 25.425-24.696-2.428-2.516 18.701-14.473v-28.325zm-2.776 26.727l-40.975 32.247-15.429-13.665c-1.42.414-2.928.645-4.486.645-8.614 0-15.595-6.78-15.595-15.151 0-8.362 6.981-15.148 15.595-15.148 8.613 0 15.598 6.786 15.598 15.148 0 2.245-.517 4.371-1.419 6.288l6.309 10.212 40.431-41.678-.029 21.102z'/%3E%3C/svg%3E");
    --icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
    --icon-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z' /%3E%3C/svg%3E");
    --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6 4 12l6 6M4 12h10a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
    --icon-retweet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l3-3 3 3M7 6v9a2 2 0 0 0 2 2h6M20 15l-3 3-3-3M17 18V9a2 2 0 0 0-2-2H9'/%3E%3C/svg%3E");
    --icon-favorite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z'/%3E%3C/svg%3E");

    --icon-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath fill-rule='evenodd' d='M31.3 33.34c4.09-5.39 12.74-6 17.51-1.2 4.58 4.12 4.79 11.46 1.12 16.24 1.28 1.1 3 1.37 4.38 2.3 2.14 1.94 4.04 4.12 6.15 6.1-1.27 1.24-2.53 2.49-3.79 3.73-2.31-2.34-4.64-4.65-7.01-6.92 0-.58.01-1.75.02-2.34-.37-.26-1.1-.8-1.46-1.07-4.11 2.87-9.86 3.55-14.12.61-5.82-3.54-7.26-12.28-2.8-17.45zM36.39 33.51c4.19-2.61 10.2-.39 11.91 4.18 1.88 4.38-.82 9.9-5.41 11.13-4.65 1.6-10.09-1.94-10.65-6.79-.58-3.36 1.2-6.87 4.15-8.52z'/%3E%3C/svg%3E");
  }

  @supports (corner-shape: squircle) {
    :root {
      --radius-s: 3px;
      --radius-m: 5px;
      --radius-l: 8px;
    }
  }
}

@property --glow-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 10px;
}

@property --glow-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --glow-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --glow-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@layer base {
  html {
    background: var(--pattern-noise), var(--color-charcoal);
  }

  body {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    color: var(--color-ink);
    font-family: var(--font-text);
    font-size: var(--text-ui);
    line-height: var(--leading-text);

    & > main {
      flex: 1;
      min-inline-size: 0;
    }

    & > :is(nav, footer) {
      flex-shrink: 0;
    }
  }

  main {
    overflow-wrap: anywhere;

    & pre {
      max-inline-size: 100%;
    }

    & pre:not(:has(.line-numbers)) {
      overflow: auto;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-subheading);
    line-height: 1.25;
    text-wrap: balance;
  }

  h1 {
    margin-block: 0.67em;
    font-size: var(--text-h1);
    font-weight: var(--weight-heading);
    line-height: var(--leading-h1);
  }

  h2 {
    margin-block: 0.83em;
    font-size: var(--text-h2);
    font-weight: var(--weight-heading);
    line-height: var(--leading-h2);
  }

  h3 {
    margin-block: 1em;
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  :is(section, div) :is(h1, h2):first-child {
    margin-block-start: 0;
  }

  a {
    color: var(--color-ink);
    text-underline-offset: 0.12em;
  }

  blockquote {
    position: relative;
    margin-block: var(--space-32);
    margin-inline: var(--space-32) 0;
    padding-inline-start: var(--space-20);
    font: italic 400 var(--text-lead) / var(--leading-lead) var(--font-display);

    & > :first-child {
      margin-block-start: 0;
    }

    & > :last-child {
      margin-block-end: 0;
    }

    &::before {
      content: '«';
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: calc(-1 * var(--space-12));
      color: var(--color-cyan);
      font-size: var(--leading-lead);
      font-weight: var(--weight-heading);
      line-height: 1;
    }

    @media (max-width: 600px) {
      margin-inline-start: var(--space-20);
    }
  }

  cite {
    display: block;
    text-align: end;
  }

  :is(abbr, span)[title] {
    text-decoration: underline dotted 1px;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  figure {
    margin-block: 1em;
    margin-inline: var(--space-40);
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    font-variant-ligatures: none;
  }

  :focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

  :is(input, textarea, select, [contenteditable]):focus-visible {
    outline-offset: 1px;
  }

  ::selection {
    background-color: var(--color-cyan);
    color: var(--color-ink);
    text-shadow: none;
  }

  @media (max-width: 600px) {
    img {
      block-size: auto;
    }
  }

  @supports (corner-shape: squircle) {
    *,
    ::before,
    ::after {
      corner-shape: squircle;
    }
  }
}

@layer layouts {
  .wrapper {
    min-inline-size: 0;
    max-inline-size: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-gutter);

    @media (max-width: 950px) {
      max-inline-size: 950px;
    }
  }

  :where(.site-navigation) + main > :where(article:first-child, section:first-child) {
    padding-block-start: calc(var(--logo-overlap) + var(--space-16));
  }

  body > main > .post:only-child {
    padding-block-end: var(--space-32);
  }

  body > main,
  .archive {
    background: var(--pattern-hatch), var(--color-page);
  }

  .span5 {
    inline-size: 39%;
  }

  .span6 {
    inline-size: 49%;
  }

  .span7 {
    inline-size: 59%;
  }

  :is(.span5, .span6, .span7) {
    display: inline-block;
    margin-block-end: var(--space-16);
    padding-inline-end: var(--space-32);
    vertical-align: top;

    & + :is(.span5, .span6, .span7) {
      padding-inline-end: 0;
    }

    @media (max-width: 950px) {
      display: block;
      inline-size: auto;
      margin-block-end: var(--space-20);
      padding-inline-end: 0;
    }
  }

  .left {
    float: inline-start;
  }

  .right {
    float: inline-end;
  }

  .nobr {
    white-space: nowrap;
  }
}

@layer components {
  .site-navigation {
    position: relative;
    z-index: 1;
    min-block-size: 120px;
    padding-block-start: 28px;
    border-block-end: 1px solid var(--color-page);
    box-shadow: var(--elevation-2);
    font-size: 1rem;
    line-height: 1.4;

    container-type: inline-size;

    &::before {
      --logo-x: calc(max(0px, (100cqi - var(--page-width)) / 2) + var(--page-gutter) + 83px);
      content: '';
      position: absolute;
      inset: 0 0 calc(-1 * var(--logo-overlap) - 1px);
      z-index: -1;
      background:
        var(--pattern-seam) repeat-x 0 22px,
        var(--pattern-teeth) repeat-x 0 0,
        var(--pattern-damask) repeat-x 0 10px,
        var(--pattern-damask) repeat-x 0 130px,
        var(--pattern-grain) repeat-x 0 10px,
        var(--pattern-grain) repeat-x 0 170px,
        linear-gradient(var(--color-paper-warm) 0 0) 0 10px / 100% 100% no-repeat;
      mask:
        linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--logo-overlap) - 1px) no-repeat,
        radial-gradient(circle at var(--logo-x) calc(100% - 83px), #000 82.5px, transparent 83.5px);
      pointer-events: none;
    }

    & > .wrapper {
      position: relative;
      display: grid;
      grid-template-columns: 166px minmax(0, 1fr);
      column-gap: var(--space-24);
      min-block-size: 91px;

      @media (max-width: 600px) {
        column-gap: var(--space-12);
      }
    }

    & a {
      text-decoration: none;
    }

    & .logo {
      --logo-sky-top: var(--color-focus);
      --logo-sky-bottom: var(--color-cyan-light);
      position: absolute;
      inset-inline-start: var(--page-gutter);
      inset-block-end: calc(-1 * var(--logo-overlap) - 1px);
      z-index: 1;
      display: block;
      inline-size: 166px;
      block-size: 166px;
      border: 1px solid transparent;
      border-radius: 50%;
      corner-shape: round;

      &::after {
        content: '';
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: inherit;
        corner-shape: round;
        box-shadow: var(--elevation-2);
        clip-path: inset(calc(100% - var(--logo-overlap)) -40px -40px -40px);
        pointer-events: none;
      }

      & svg {
        display: block;
        margin-inline: auto;
      }

      & .logo-sky-top {
        stop-color: var(--logo-sky-top);
      }

      & .logo-sky-bottom {
        stop-color: var(--logo-sky-bottom);
      }

      & :is(.logo-paper, .logo-bubbles) {
        fill: var(--color-paper);
      }

      & .logo-ink {
        fill: var(--color-charcoal);
      }

      & :is(.logo-liquid, .logo-drops) {
        fill: var(--green-400);
      }

      & .logo-liquid {
        transform-box: fill-box;
        transform-origin: 50% 100%;
      }

      & :is(.logo-bubbles, .logo-drops) > * {
        --rise: -70px;
        --pace: 1100ms;
        --wait: 60ms;
        transform-box: fill-box;
      }

      & :is(.logo-bubbles, .logo-drops) > :nth-child(2n) {
        --rise: -85px;
        --pace: 1350ms;
        --wait: 220ms;
      }

      & :is(.logo-bubbles, .logo-drops) > :nth-child(3n) {
        --rise: -60px;
        --pace: 950ms;
        --wait: 0ms;
      }

      & :is(.logo-bubbles, .logo-drops) > :nth-child(5n) {
        --pace: 1500ms;
        --wait: 360ms;
      }

      &:is(:hover, :focus-visible) {
        --logo-sky-top: color-mix(in oklch, var(--color-focus), var(--color-ink) 15%);
        --logo-sky-bottom: var(--color-cyan-strong);
      }

      @media (prefers-reduced-motion: no-preference) {
        & stop {
          transition: stop-color 400ms ease-out;
        }

        & .logo-liquid {
          transition: scale 600ms ease-in-out;
        }

        & :is(.logo-bubbles, .logo-drops) > * {
          transition:
            translate 0s,
            opacity 500ms ease-out calc(450ms + var(--wait));
        }

        &:is(:hover, :focus-visible) {
          & .logo-liquid {
            scale: 1 1.17;
            transition: scale 700ms cubic-bezier(0.3, 1.35, 0.5, 1);
          }

          & .logo-bubbles > * {
            opacity: 0;
            translate: 0 var(--rise);
            transition:
              translate var(--pace) cubic-bezier(0.4, 0, 0.6, 1) var(--wait),
              opacity calc(var(--pace) * 0.45) ease-in calc(var(--wait) + var(--pace) * 0.55);
          }

          & .logo-drops > * {
            opacity: 0;
            translate: 0 calc(var(--rise) * 0.8);
            transition:
              translate calc(var(--pace) * 0.75) ease-in var(--wait),
              opacity calc(var(--pace) * 0.55) ease-in calc(var(--wait) + var(--pace) * 0.2);
          }
        }
      }
    }

    & ul {
      grid-column: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--space-12) var(--space-20);
      margin-block: 33px 16px;
      margin-inline: 0 10px;
      padding: 0;

      @media (max-width: 790px) {
        margin-inline-end: 0;
      }

      @media (max-width: 650px) {
        column-gap: var(--space-12);
      }

      @media (max-width: 600px) {
        row-gap: var(--space-8);
        margin-block: var(--space-12) var(--space-16);
      }
    }

    & li {
      list-style: none;
    }

    & ul a {
      border-block-end: 2px solid var(--color-charcoal);

      &:hover {
        border-color: var(--color-cyan);
      }

      &:active {
        border-color: var(--color-cyan-pressed);
        color: var(--color-charcoal);
      }
    }

    & li.selected a {
      border-block-end-color: var(--color-cyan);
    }

    @media (max-width: 790px) {
      font-size: 0.9em;
    }

    @media (max-width: 650px) {
      font-size: 0.85em;
    }
  }

  .icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    overflow: hidden;
    background-color: currentColor;
    mask: var(--icon) center / contain no-repeat;
    white-space: nowrap;
    text-indent: 100%;
    vertical-align: middle;

    &.facebook {
      --icon: var(--icon-facebook);
    }

    &.github {
      --icon: var(--icon-github);
    }

    &.twitter {
      --icon: var(--icon-twitter);
    }

    &.pinterest {
      --icon: var(--icon-pinterest);
    }

    &.youtube {
      --icon: var(--icon-youtube);
    }

    &.foursquare {
      --icon: var(--icon-foursquare);
    }

    &.linkedin {
      --icon: var(--icon-linkedin);
    }

    &.telegram {
      --icon: var(--icon-telegram);
    }

    &.reply {
      --icon: var(--icon-reply);
    }

    &.retweet {
      --icon: var(--icon-retweet);
    }

    &.favorite {
      --icon: var(--icon-favorite);
    }
  }

  .button {
    display: inline-block;
    padding: var(--space-8) var(--space-16);
    border: 0;
    border-block-end: 1px solid var(--green-700);
    border-radius: var(--radius-m);
    background-color: var(--green-400);
    box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-paper) 35%, transparent);
    color: var(--green-900);
    font-size: 0.9em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;

    &:not(:disabled):hover {
      background-color: var(--green-500);
    }

    &:not(:disabled):active {
      background-color: var(--green-600);
      box-shadow: inset 0 1px 2px 0 color-mix(in srgb, var(--color-ink) 20%, transparent);
      translate: 0 1px;
    }

    &:disabled {
      border-block-end-color: transparent;
      background-color: var(--green-100);
      box-shadow: none;
      color: var(--green-800);
      cursor: not-allowed;
    }
  }

  .cross {
    display: inline-block;
    inline-size: 15px;
    block-size: 15px;
    color: var(--color-muted);
    line-height: 0.9em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    &:is(:hover, :focus-visible) {
      color: var(--color-charcoal);
    }

    &:active {
      color: var(--color-ink);
    }
  }

  .keywords {
    color: var(--color-charcoal);
    font-size: var(--text-small);
    line-height: calc(var(--leading-small) + var(--space-4));

    & a {
      padding-inline: var(--space-4);
      border-radius: var(--radius-s);
      background-color: color-mix(in srgb, var(--color-charcoal) 70%, transparent);
      color: var(--color-paper);
      line-height: 1.3em;
      text-decoration: none;
      text-transform: lowercase;
      text-shadow: none;

      &:is(:hover, :focus-visible) {
        background-color: color-mix(in srgb, var(--color-charcoal) 85%, transparent);
      }

      &:active {
        background-color: var(--color-charcoal);
      }
    }
  }

  :is(.pagination a, .main aside, .blog .filter) {
    --glow-tint: oklch(from var(--glow-color) l c calc(h + var(--glow-hue)));
    background: radial-gradient(
        circle at var(--glow-x) var(--glow-y),
        var(--glow-core),
        var(--glow-tint) 75%
      )
      no-repeat;
    box-shadow: 0 0 var(--glow-size) 0 var(--glow-tint);
  }

  @supports (width: random(1px, 2px)) {
    :is(.pagination a, .main aside, .blog .filter, .feed section) {
      --glow-size: random(5px, 16px);
      --glow-x: random(25%, 75%);
      --glow-y: random(20%, 70%);
      --glow-hue: random(-14, 14);
    }
  }

  .pagination {
    margin-block: var(--space-20) var(--space-40);
    padding-block-start: var(--space-20);
    border-block-start: 2px solid var(--color-line);

    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      margin: 0;
      padding-inline-start: 0;
    }

    & li {
      list-style: none;
    }

    & a {
      display: inline-grid;
      place-items: center;
      inline-size: 32px;
      block-size: 32px;
      border-radius: var(--radius-m);
      color: var(--color-charcoal);
      text-decoration: none;

      &:hover {
        --glow-core: var(--color-cyan-light);
        --glow-color: var(--color-cyan-strong);
      }

      &:active {
        --glow-core: var(--color-cyan-strong);
        --glow-color: var(--color-cyan-pressed);
        translate: 0 1px;
      }

      &.active {
        --glow-core: var(--color-cyan-pressed);
        --glow-color: var(--color-cyan);
        font-weight: bold;
      }
    }
  }

  .share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-12);
    min-block-size: 40px;

    & .share-action {
      display: inline-flex;
      align-items: center;
      min-block-size: 32px;
      padding: var(--space-4) var(--space-8);
      border: 0;
      border-radius: var(--radius-m);
      background-color: var(--color-cyan-soft);
      color: var(--color-ink);
      font: inherit;
      line-height: 1.4;
      text-decoration: none;
      cursor: pointer;

      &:not(:disabled):hover {
        background-color: var(--color-cyan-hover);
      }

      &:not(:disabled):active {
        background-color: var(--color-cyan-pressed);
        translate: 0 1px;
      }

      &:disabled {
        background-color: var(--color-line-soft);
        color: var(--color-muted);
        cursor: not-allowed;
      }
    }
  }

  .share-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .share-status {
    flex-basis: 100%;
    font-size: 0.9em;

    &:empty {
      position: absolute;
    }
  }

  :where(.post section) a {
    padding: 1px var(--space-4);
    border-radius: var(--radius-s);
    background-color: var(--color-cyan-soft);
    text-decoration: none;
    text-shadow: none;

    &:hover {
      background-color: var(--color-cyan-hover);
    }

    &:active {
      background-color: var(--color-cyan-pressed);
      color: var(--color-ink);
    }
  }

  a.link {
    display: inline-block;

    &,
    &:hover {
      padding: 0;
      background-color: transparent;
    }
  }

  .post {
    & :is(h1, h2) a {
      text-decoration: none;
    }

    & :is(ul, ol) {
      padding-inline-start: var(--space-24);
    }

    & section ul {
      list-style-type: '—\00a0';
    }

    & li + li {
      margin-block-start: var(--space-4);
    }

    & section > h2 {
      margin-block: var(--space-48) var(--space-12);
    }

    & section > :is(h3, h4) {
      margin-block: var(--space-32) var(--space-8);
    }

    & section > :is(h2, h3, h4):first-child,
    & section > :is(h2, h3, h4) + :is(p, ul, ol) {
      margin-block-start: 0;
    }

    & section > :is(p, ul, ol) {
      margin-block-end: var(--space-20);
    }

    & p:last-child {
      margin-block-end: 0;
    }

    & :is(iframe, video) {
      max-inline-size: 100%;
    }

    & figure {
      margin-block: var(--space-32);
      margin-inline: 0;
    }

    & figcaption {
      margin-block-start: var(--space-8);
      color: var(--color-muted);
      font-size: var(--text-small);
      line-height: var(--leading-small);
    }

    & hr {
      border: 0;
      border-block-start: 1px solid var(--color-line);
    }

    & img[align='left'] {
      float: inline-start;
      margin-block: 0 var(--space-4);
      margin-inline: 0 var(--space-16);
    }

    & img[align='right'] {
      float: inline-end;
      margin-block: 0 var(--space-4);
      margin-inline: var(--space-16) 0;
    }

    & img[width='500'] {
      @media (max-width: 950px) {
        inline-size: 55%;
        block-size: auto;
      }

      @media (max-width: 905px) {
        inline-size: 50%;
      }

      @media (max-width: 790px) {
        inline-size: 42%;
      }

      @media (max-width: 650px) {
        inline-size: auto;
      }
    }

    &:is(.featured) img[align='left'],
    & .introduction img[align='left'] {
      padding: 2px;
      border: 1px solid var(--color-line-soft);
      border-radius: var(--radius-m);
      background-color: var(--color-paper);
      box-shadow: var(--elevation-2);
    }

    & .introduction img[align='left'] {
      @media (max-width: 650px) {
        float: inline-end;
        margin: 0;
        margin-inline-start: var(--space-16);
      }
    }

    &:not(.featured) :is(img[align], img.frame.left, img.frame.right) {
      @media (max-width: 600px) {
        display: block;
        float: none;
        block-size: auto;
        margin-block: 0 var(--space-16);
        margin-inline: auto;
      }
    }

    &.featured img:is([align], .frame.left, .frame.right) {
      @media (max-width: 600px) {
        max-inline-size: 50%;
      }
    }

    & .introduction {
      &::after {
        content: '';
        display: block;
        clear: inline-start;
      }

      & iframe {
        margin-block-start: var(--space-20);
      }
    }

    & .quote {
      padding-block: var(--space-32);
      font-size: 1.5em;

      & section {
        float: inline-end;
        color: var(--color-charcoal);
        font-size: 0.65em;
        font-style: italic;
      }
    }

    & .pager {
      display: flex;
      justify-content: space-between;
      gap: var(--space-20);
      clear: both;
      padding-block: var(--space-24) var(--space-4);
      border-block-end: 2px solid var(--color-line);

      & :is(.left, .right) {
        float: none;
      }

      & .right {
        margin-inline-start: auto;
        text-align: end;
      }

      @media (max-width: 650px) {
        font-size: 0.9em;
      }

      @media (max-width: 600px) {
        flex-wrap: wrap;
      }
    }

    & :is(.similar, .pager) a {
      padding: 0;
      background-color: transparent;
      color: var(--color-charcoal);
      text-decoration: underline;
    }

    & .continue {
      clear: inline-start;
    }

    & .share {
      clear: inline-start;
      margin-block: var(--space-20);
      padding-block-end: var(--space-20);
      border-block-end: 1px dotted var(--color-line);
    }

    & .continue + .share {
      float: inline-end;
      margin: -26px 0 0;
      padding: 0;
      border-block-end: none;

      @media (max-width: 650px) {
        display: none;
      }
    }

    & > aside {
      float: inline-end;
      inline-size: 300px;
      margin-block: 0 var(--space-8);
      margin-inline: var(--space-24) 0;
      background-color: color-mix(in srgb, var(--color-paper) 80%, transparent);
      box-shadow: var(--elevation-1);
      color: var(--color-charcoal);

      & .info {
        position: relative;
        margin-inline: -6px;
        padding: var(--space-16) var(--space-16) var(--space-12);
        border: 1px solid var(--color-line-soft);
        border-radius: var(--radius-l);
        background-color: var(--color-paper);
        box-shadow: var(--elevation-2);
      }

      & .info time + .keywords {
        margin-block-start: var(--space-4);
      }

      & .twitter-feed {
        position: relative;
        padding: var(--space-12);
        border-block-start: 1px solid var(--color-page);
        font-size: 0.9em;
      }

      & .twitter-feed .actions a {
        margin-inline-start: 3px;
      }

      @media (max-width: 950px) {
        display: none;
      }
    }
  }

  .similar {
    margin-block-start: var(--space-20);

    & h2 {
      margin-block: 0 var(--space-12);
    }

    & ul {
      margin-block-end: 0;
      padding-inline-start: var(--space-24);
    }

    & li {
      list-style-type: lower-greek;
    }

    & li + li {
      margin-block-start: var(--space-4);
    }
  }

  .archive a,
  .post :is(.similar, .pager) a,
  .similar a,
  .talks a {
    &:is(:hover, :focus-visible) {
      background-color: transparent;
      color: var(--color-ink);
      text-decoration-thickness: 2px;
    }

    &:active {
      background-color: transparent;
      color: var(--color-focus);
    }
  }

  img.frame {
    padding: 2px;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-m);
    background-color: var(--color-paper);
    box-shadow: var(--elevation-2);

    &.left {
      margin-inline-end: var(--space-16);
    }

    &.right {
      margin-inline-start: var(--space-16);
    }
  }

  .twitter-feed {
    color: var(--color-charcoal);

    & a {
      color: var(--color-charcoal);
    }

    & ul {
      padding-inline-start: 0;
    }

    & li {
      margin-block: var(--space-12);
      list-style: none;
      line-height: 1.2em;
    }

    & .meta {
      margin-block-start: var(--space-4);
      font-size: 0.7em;

      & a {
        text-decoration: none;
      }
    }

    & .actions {
      float: inline-end;
    }

    & .icon {
      color: color-mix(in srgb, var(--color-charcoal) 65%, transparent);
      font-size: 16px;

      &:is(:hover, :focus-visible) {
        color: var(--color-charcoal);
      }

      &:active {
        color: var(--color-ink);
        scale: 0.94;
      }
    }
  }

  .notice {
    padding: var(--space-12);
    border-radius: var(--radius-l);
    background: var(--color-notice);
    text-shadow: none;

    & a {
      padding: 0;
      background-color: transparent;
      color: var(--color-ink);
      text-decoration: underline;
    }
  }

  pre {
    position: relative;
    display: block;
    clear: inline-end;
    margin-block: var(--space-32);
    padding-block: var(--space-16);
    border-radius: var(--radius-m);
    background: var(--code-surface);
    box-shadow: var(--elevation-2);
    color: var(--color-ink);
    font-size: var(--text-code);
    line-height: var(--leading-code);
    white-space: normal;
    counter-reset: code;

    &:not(:has(code)),
    &.empty {
      padding: var(--space-12) var(--space-16);
    }

    & code {
      position: relative;
      display: block;
      padding-inline: var(--space-20);
      font-size: inherit;
      white-space: pre-wrap;
    }

    & code:empty::after {
      content: ' ';
    }

    & .line-numbers {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: -35px;
      inline-size: 25px;
      user-select: none;
      pointer-events: none;

      & i {
        display: block;
        font-style: normal;
        counter-increment: code;
      }

      & i::before {
        content: counter(code, decimal-leading-zero);
        display: block;
        color: var(--color-line);
        text-align: end;
      }
    }

    @media (max-width: 600px) {
      &:has(.line-numbers) {
        padding-inline-start: 35px;
        overflow: auto;
      }

      &:has(.line-numbers) code {
        min-inline-size: max-content;
        white-space: pre;
      }
    }
  }

  .hljs-comment,
  .hljs-template_comment,
  .diff .hljs-header,
  .hljs-javadoc {
    color: var(--syntax-comment);
    font-style: italic;
  }

  .hljs-keyword,
  .css .rule .hljs-keyword,
  .hljs-winutils,
  .javascript .hljs-title,
  .nginx .hljs-title,
  .hljs-subst,
  .hljs-request,
  .hljs-status {
    color: var(--color-charcoal);
    font-weight: bold;
  }

  .hljs-number,
  .hljs-hexcolor,
  .ruby .hljs-constant {
    color: var(--syntax-number);
  }

  .hljs-string,
  .hljs-tag .hljs-value,
  .hljs-phpdoc,
  .tex .hljs-formula {
    color: var(--syntax-string);
  }

  .hljs-title,
  .hljs-id,
  .coffeescript .hljs-params,
  .scss .hljs-preprocessor {
    color: var(--syntax-title);
    font-weight: bold;
  }

  .javascript .hljs-title,
  .lisp .hljs-title,
  .clojure .hljs-title,
  .hljs-subst {
    font-weight: normal;
  }

  .hljs-class .hljs-title,
  .haskell .hljs-type,
  .vhdl .hljs-literal,
  .tex .hljs-command {
    color: var(--syntax-type);
    font-weight: bold;
  }

  .hljs-tag,
  .hljs-tag .hljs-title,
  .hljs-rules .hljs-property,
  .django .hljs-tag .hljs-keyword {
    color: var(--syntax-tag);
    font-weight: normal;
  }

  .hljs-attribute,
  .hljs-variable,
  .lisp .hljs-body {
    color: var(--syntax-attr);
  }

  .hljs-regexp {
    color: var(--syntax-regexp);
  }

  .hljs-symbol,
  .ruby .hljs-symbol .hljs-string,
  .lisp .hljs-keyword,
  .tex .hljs-special,
  .hljs-prompt {
    color: var(--syntax-symbol);
  }

  .hljs-built_in,
  .lisp .hljs-title,
  .clojure .hljs-built_in {
    color: var(--syntax-builtin);
  }

  .hljs-preprocessor,
  .hljs-pragma,
  .hljs-pi,
  .hljs-doctype,
  .hljs-shebang,
  .hljs-cdata {
    color: var(--syntax-meta);
    font-weight: bold;
  }

  .hljs-deletion {
    background: var(--syntax-deletion);
  }

  .hljs-addition {
    background: var(--syntax-addition);
  }

  .diff .hljs-change {
    background: var(--syntax-builtin);
  }

  .hljs-chunk {
    color: var(--color-line);
  }

  .announce {
    padding-block: var(--space-32);
    background-color: var(--color-paper);
    box-shadow: var(--elevation-1);

    & > .wrapper {
      display: grid;
      grid-template-columns: minmax(0, 59fr) minmax(0, 41fr);
      align-items: start;

      @media (max-width: 950px) {
        display: block;
      }
    }

    & .post.featured {
      grid-row: span 2;
      min-inline-size: 0;
      margin-block-end: var(--space-20);
      padding-inline-end: var(--space-32);
      line-height: 1.5em;

      & h2 {
        margin: 0 0 var(--space-12);
      }

      @media (max-width: 950px) {
        padding-inline-end: 0;
      }
    }

    & .post.older {
      min-inline-size: 0;
      font-size: 0.9em;
      line-height: 1.4em;

      & h2 {
        font-size: var(--text-h3);
        line-height: var(--leading-h3);
      }
    }

    & .older + .older h2 {
      margin-block-start: var(--space-20);
    }

    & .post .continue {
      padding-block-start: var(--space-12);
    }

    & .post + ul {
      clear: inline-start;
      padding-inline-start: 0;

      & li {
        padding-block: 3px;
        font-size: 1em;
      }
    }
  }

  .archive {
    padding-block: var(--space-32);
    background-color: var(--color-paper);

    & h2 {
      margin-block-start: 0;
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

    & ul {
      padding-inline-start: 0;

      @media (max-width: 600px) {
        padding-inline-start: var(--space-20);
      }
    }

    & li {
      padding-block: 3px;
      line-height: normal;
      list-style-type: lower-greek;
    }

    .announce + & {
      margin-block-start: calc(-1 * var(--space-32));
      padding-block-start: 0;
      background-image: none;
    }
  }

  .blog {
    padding-block-start: var(--space-48);

    &::after,
    & .post::after {
      content: '';
      display: block;
      clear: both;
    }

    & h1 {
      margin-block-end: var(--space-12);
    }

    & .promo {
      margin-block: calc(-1 * var(--space-32)) var(--space-48);
      font-size: 0.8125rem;
      font-style: italic;
      text-align: end;

      & a {
        color: var(--color-muted);
        text-decoration: none;
      }

      @media (max-width: 650px) {
        margin-block: 0 var(--space-24);
        font-size: 0.75rem;
        text-align: start;
      }
    }

    & .filter {
      margin-block-end: var(--space-20);
      padding: var(--space-4) var(--space-12);
      border-radius: var(--radius-l);
      color: var(--color-charcoal);
      font-size: 0.9em;
    }

    & .post {
      clear: inline-start;
      margin-block-end: var(--space-32);

      & + .post {
        padding-block-start: var(--space-20);
        border-block-start: 1px dotted var(--color-line);
      }

      & > header {
        display: flow-root;
        margin-block-end: var(--space-24);
      }

      & > header > h2 {
        margin: 0 0 var(--space-12);
        font-size: var(--text-h1);
        line-height: var(--leading-h1);
      }

      & header > aside {
        margin-block-start: var(--space-8);
      }

      & > section:not(.continue, .share, .similar) {
        font-size: var(--text-body);
        line-height: var(--leading-body);
      }

      & > section > :is(p, ul, ol, blockquote):not(:has(img, iframe, video)) {
        max-inline-size: 66ch;
      }

      & .continue {
        margin-block-start: var(--space-16);
      }
    }

    @media (max-width: 650px) {
      padding-block-start: calc(var(--logo-overlap) + var(--space-16));
    }
  }

  .support {
    float: inline-end;
    inline-size: 290px;
    max-inline-size: 100%;
    padding-block-end: var(--space-12);

    &::after {
      content: '';
      display: block;
      clear: both;
    }

    & header {
      margin-block: 0 var(--space-8);
      margin-inline: var(--space-16) 0;
      padding-block-end: var(--space-4);
      border-block-end: 1px solid var(--color-line);
    }

    & figure {
      display: inline-block;
      margin: 0;
      margin-inline-start: var(--space-16);
    }

    & figcaption {
      font: 400 0.875rem/1.45 var(--font-mono);
      text-align: center;
    }
  }

  .notes {
    position: relative;
    margin-block: 0 var(--space-40);
    margin-inline: auto;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-l);
    background: var(--color-paper);
    box-shadow: var(--elevation-1);

    &::before,
    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      inset-block-end: var(--space-12);
      inset-inline-start: var(--space-12);
      inline-size: 46%;
      max-inline-size: 320px;
      block-size: 30%;
      background: color-mix(in oklch, var(--shadow-ink) 45%, transparent);
      filter: blur(8px);
      rotate: -3deg;
      translate: 0 9px;
    }

    &::after {
      inset-inline: auto var(--space-12);
      rotate: 3deg;
    }

    & + section {
      line-height: var(--leading-text);
    }
  }

  footer {
    --focus-color: var(--color-cyan-light);
    padding-block: var(--space-20) var(--space-12);
    background: linear-gradient(var(--color-footer), transparent);
    box-shadow: 0 -6px 8px -6px var(--color-line);
    color: var(--color-page);
    font-size: var(--text-small);
    text-shadow: var(--color-charcoal) 0 1px 0;

    & a {
      color: var(--color-page);
    }

    & > .wrapper {
      display: grid;
      grid-template-columns: minmax(0, 310px) minmax(0, 400px);
      justify-content: space-between;

      @media (max-width: 820px) {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    & .info {
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr);
      align-content: start;
      column-gap: var(--space-16);
      min-block-size: 100px;
      margin-block-end: var(--space-16);
      line-height: var(--leading-small);

      & h2 {
        margin: 0 0 var(--space-8);
        color: inherit;
        font: 600 1.125rem/1.4 var(--font-text);
      }

      & dl {
        grid-column: 2;
        display: grid;
        grid-template-columns: 55px minmax(0, 1fr);
        margin: 0;
      }

      & dd {
        margin: 0;
        overflow-wrap: anywhere;
      }

      & picture {
        grid-row: span 2;
      }

      & img {
        inline-size: 90px;
        block-size: 90px;
        padding: 1px;
        border: 2px solid var(--color-paper);
        background-color: var(--color-line-soft);
        box-shadow: 0 0 8px 1px var(--color-charcoal);
        rotate: -2deg;

        @supports (rotate: random(-2deg, 2deg)) {
          rotate: random(-2.5deg, 2.5deg);
        }
      }

      @media (max-width: 820px) {
        max-inline-size: 310px;
      }
    }

    & .search {
      min-inline-size: 0;
      min-block-size: 100px;
      text-align: end;

      & form {
        margin-block: var(--space-8) var(--space-20);
      }

      & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-12) var(--space-20);
        padding: 0;
      }

      & li {
        list-style: none;
      }

      & .icon {
        font-size: 28px;

        &:is(:hover, :focus-visible) {
          color: var(--color-cyan-light);
        }

        &:active {
          color: var(--color-cyan);
          scale: 0.9;
        }
      }

      @media (max-width: 820px) {
        block-size: auto;
        min-block-size: 100px;
        margin-block-end: var(--space-16);
        padding-block-start: var(--space-16);
        border-block-start: 1px dotted var(--color-rule-dark);
        text-align: start;

        & form {
          margin-block-start: 0;
        }

        & ul {
          justify-content: flex-start;
        }
      }
    }

    & .copyright {
      grid-column: 1 / -1;
      clear: inline-start;
      min-block-size: 35px;
      padding-block-start: var(--space-16);
      border-block-start: 1px dotted var(--color-rule-dark);
      color: var(--color-on-dark-muted);
      font-size: var(--text-micro);
      text-align: start;
      text-shadow: none;

      & a {
        color: var(--color-on-dark-muted);
      }

      & .nobr {
        @media (max-width: 600px) {
          white-space: normal;
        }
      }
    }

    & .donate {
      float: inline-end;
      margin-block-start: -10px;
    }
  }

  .site-search {
    & input[name='text'] {
      -webkit-appearance: textfield;
      appearance: textfield;
      inline-size: 350px;
      min-inline-size: 0;
      max-inline-size: 100%;
      padding: var(--space-4) var(--space-8);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-m);
      background-color: var(--color-paper);
      box-shadow: var(--shadow-well);
      color: var(--color-charcoal);
      font-size: 0.9rem;

      &:hover {
        border-color: var(--color-muted);
      }

      &:focus {
        background-color: var(--color-input-focus);
      }
    }

    & input[type='search']::-webkit-search-decoration,
    & input[type='search']::-webkit-search-results-button,
    & input[type='search']::-webkit-search-results-decoration {
      display: none;
      -webkit-appearance: none;
    }
  }

  .skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 10;
    padding: var(--space-8) var(--space-12);
    background: var(--color-paper);
    color: var(--color-ink);
    translate: 0 calc(-100% - 10px);

    &:focus {
      translate: none;
    }
  }

  .search-heading {
    margin-block: 1em;
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  @media (prefers-reduced-motion: no-preference) {
    :is(
      .icon,
      .button,
      .share .share-action,
      .pagination a,
      .keywords a,
      :where(.post section) a,
      .site-navigation ul a,
      .site-search input,
      .cross
    ) {
      transition:
        color var(--transition-state),
        background-color var(--transition-state),
        border-color var(--transition-state),
        translate 80ms ease-out,
        scale 80ms ease-out;
    }
  }
}

@layer utilities {
  [hidden],
  .hidden {
    display: none;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scale: none;
    }
  }
}