/*
  kiki-revival.css
  A sharp, information-dense semantic stylesheet for pages that refuse
  to become another beige SaaS landing page with four words per acre.

  Design goals:
  - Semantic HTML first.
  - No rounded corners.
  - No fancy animations.
  - Dense, legible, textured layouts.
  - Angular “kiki” feel: hard edges, rule lines, diagonals, hatching.

  Optional classes included near the end:
  .cluster, .stack, .grid, .switcher, .panel, .callout, .warning,
  .danger, .success, .muted, .lede, .visually-hidden
*/

@layer reset, tokens, base, blocks, forms, tables, utilities, print;

/* ----------------------------- */
/* reset                         */
/* ----------------------------- */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-radius: 0 !important;
  }

  * {
    margin: 0;
  }

  html {
    color-scheme: light dark;
    hanging-punctuation: first last;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-height: 100svh;
    line-height: 1.45;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  button,
  input,
  textarea,
  select {
    color: inherit;
    background: inherit;
  }

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

  :target {
    scroll-margin-block: 5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
    }
  }
}

/* ----------------------------- */
/* tokens                        */
/* ----------------------------- */

@layer tokens {
  :root {
    --font-sans:
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    --font-serif:
      "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-mono:
      "Berkeley Mono", "JetBrains Mono", "SFMono-Regular", Consolas,
      "Liberation Mono", monospace;

    --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
    --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.90rem);
    --step-0: clamp(0.96rem, 0.91rem + 0.20vw, 1.08rem);
    --step-1: clamp(1.12rem, 1.04rem + 0.34vw, 1.34rem);
    --step-2: clamp(1.34rem, 1.20rem + 0.62vw, 1.76rem);
    --step-3: clamp(1.62rem, 1.38rem + 1.03vw, 2.32rem);
    --step-4: clamp(1.96rem, 1.58rem + 1.64vw, 3.10rem);

    --measure: 78ch;
    --measure-tight: 58ch;

    --space-4xs: 0.050rem;
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.375rem;
    --space-s: 0.5rem;
    --space-m: 0.75rem;
    --space-l: 1rem;
    --space-xl: 1.5rem;

    --space-2xl: 2rem;
    --space-3xl: 3rem;

    --line-thin: 1px;
    --line: 2px;
    --line-heavy: 4px;
    --line-max: 7px;

    --ink: light-dark(#111111, #f2f2ef);
    --ink-soft: light-dark(#333333, #d6d6cf);
    --paper: light-dark(#f3f0df, #101114);
    --paper-2: light-dark(#fffbe6, #18191e);
    --paper-3: light-dark(#e8e1bc, #24262d);
    --accent: light-dark(#b41414, #ff5a4f);
    --accent-2: light-dark(#064f9e, #69a7ff);
    --accent-3: light-dark(#4b6113, #c4e36a);
    --warning: light-dark(#8b4a00, #ffb84a);
    --danger: light-dark(#8f1010, #ff6767);
    --success: light-dark(#1f641e, #8ee681);

    --shadow-hard: 0.32rem 0.32rem 0 0 var(--ink);
    --shadow-small: 0.18rem 0.18rem 0 0 var(--ink);
    --shadow-soft: 0.32rem 0.32rem 0 0 var(--ink-soft);
    --shadow-small-soft: 0.18rem 0.18rem 0 0 var(--ink-soft);
    --outline: var(--line) solid var(--ink);

    --hatch:
      repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 6px,
        color-mix(in oklab, var(--ink) 10%, transparent) 6px,
        color-mix(in oklab, var(--ink) 10%, transparent) 7px
      );

    --grid-paper:
      linear-gradient(
        color-mix(in oklab, var(--ink) 10%, transparent) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        color-mix(in oklab, var(--ink) 10%, transparent) 1px,
        transparent 1px
      );

    --saw:
      linear-gradient(
        135deg,
        transparent 0 14px,
        color-mix(in oklab, var(--accent) 55%, transparent) 14px 16px,
        transparent 16px 30px
      );
  }
}

/* ----------------------------- */
/* base                          */
/* ----------------------------- */

@layer base {
  html {
    background: var(--paper);
  }

  body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    color: var(--ink);
    background:
      radial-gradient(
        circle at 1px 1px,
        color-mix(in oklab, var(--ink) 12%, transparent) 1px,
        transparent 0
      ) 0 0 / 18px 18px,
      var(--grid-paper) 0 0 / 36px 36px,
      var(--paper);
    text-rendering: optimizeLegibility;
  }

  body > header,
  body > main,
  body > footer {
    inline-size: min(100% - 2rem, 118rem);
    margin-inline: auto;
  }

  body > header {
    display: inline;
    margin-block-start: var(--space-xl);
    border: var(--line-heavy) solid var(--ink);
    border-inline-start-width: var(--line-max);
    background:
      var(--saw) 0 100% / 32px 32px repeat-x,
      linear-gradient(90deg, var(--paper-2), var(--paper));
    /*box-shadow: var(--shadow-hard);*/
  }

  body > header > * {
    padding-inline: var(--space-l);
  }

  body > header > :first-child {
    padding-block-start: var(--space-l);
  }

  body > header > :last-child {
    padding-block-end: var(--space-l);
  }

  body > main {
    /*flex: 1 0 auto;*/
    margin-bottom: auto;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(min(100%, var(--measure)), 5fr)
      minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
  }

  body > main > * {
    grid-column: 2;
  }

  body > main > aside,
  body > main > nav,
  body > main > figure,
  body > main > table,
  body > main > .bleed {
    grid-column: 1 / -1;
  }

  body > footer {
    /*flex-shrink: 0;*/
    width: 100%;
    margin: 0;
    margin-block-start: var(--space-xl);
    padding-inline: var(--space-l);
    padding-block: var(--space-m);
    border-block-start: var(--line-heavy) double var(--ink);
    font-size: var(--step--1);
    background: var(--hatch), var(--paper-2);
  }

  body > footer > b {
      float: right;
  }

  ::selection {
    color: var(--paper);
    background: var(--accent);
  }

  a {
    color: var(--accent-2);
    font-weight: 700;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.16em;
  }

  a:hover {
    color: var(--accent);
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible {
    outline: var(--line-heavy) solid var(--accent);
    outline-offset: var(--space-4xs);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-sans);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  h1 {
    margin-block-start: var(--space-m);
    /*max-inline-size: 24ch;*/
    font-size: var(--step-4);
    text-transform: uppercase;
  }

  h2 {
    margin-block-start: var(--space-2xl);
    padding-block-end: var(--space-xs);
    border-block-end: var(--line-heavy) solid var(--ink);
    font-size: var(--step-3);
    text-transform: uppercase;
  }

  h2::before {
    content: "/// ";
    color: var(--accent);
    letter-spacing: -0.18em;
    margin-right: 0.5rem;
  }

  h3 {
    margin-block-start: var(--space-2xl);
    padding-inline-start: var(--space-s);
    border-inline-start: var(--line-heavy) solid var(--accent);
    font-size: var(--step-2);
  }

  h4 {
    margin-block-start: var(--space-xl);
    font-size: var(--step-1);
    text-transform: uppercase;
  }

  h5,
  h6 {
    margin-block-start: var(--space-l);
    font-size: var(--step-0);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.055em;
  }

  :where(p, ul, ol, dl, blockquote, pre, table, figure, form, details) {
    margin-block-start: var(--space-l);
  }

  p {
    max-inline-size: var(--measure);
  }

  p + p {
    margin-block-start: var(--space-m);
  }

  strong {
    font-weight: 850;
  }

  small {
    font-size: var(--step--1);
  }

  hr {
    margin-block: var(--space-2xl);
    border: 0;
    block-size: var(--line-heavy);
    background:
      linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 42%, var(--accent) 42% 66%, transparent 66% 72%, var(--ink) 72%);
  }

  mark {
    padding-inline: 0.12em;
    color: var(--ink);
    background:
      linear-gradient(
        100deg,
        color-mix(in oklab, var(--warning) 35%, transparent),
        color-mix(in oklab, var(--warning) 70%, transparent)
      );
    box-decoration-break: clone;
  }

  abbr[title] {
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.14em;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  :not(pre) > code,
  kbd,
  samp {
    padding: 0.05em 0.25em;
    border: var(--line-thin) solid var(--ink);
    background: var(--paper-2);
  }

  kbd {
    border-block-end-width: var(--line);
    box-shadow: 0 0.12em 0 var(--ink);
    font-weight: 800;
  }

  pre {
    overflow-x: auto;
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    border-inline-start-width: var(--line-heavy);
    background:
     /* linear-gradient(
        90deg,
        color-mix(in oklab, var(--accent-2) 12%, transparent),
        transparent 12rem
      ),*/
      /*color-mix(in oklab, var(--accent-3) 15%, var(--paper-3));*/
      var(--paper-3);
    box-shadow: var(--shadow-small-soft);
    line-height: 1.45;
    tab-size: 2;
  }

  pre code {
    display: block;
    min-inline-size: max-content;
  }

  ul,
  ol {
    /*padding-inline-start: 1.35em;*/
      padding-inline-start: var(--space-l);
  }

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

  li::marker {
    content: "· ";
    font-weight: bold;
    color: var(--accent);
  }

  ol li::marker {
    color: var(--accent);
    font-weight: 900;
  }

  dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-xs) var(--space-l);
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    background: var(--paper-2);
  }

  dt {
    font-weight: 900;
  }

  dd {
    min-inline-size: 0;
  }

  blockquote {
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    border-inline-start-width: var(--line-max);
    background:
      color-mix(in oklab, var(--accent-2) 15%, var(--paper-2));
      /*linear-gradient(
        135deg,
        color-mix(in oklab, var(--accent) 13%, transparent) 0 25%,
        transparent 25% 100%
      ),
      var(--paper-2);*/
    box-shadow: var(--shadow-small-soft);
  }

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

  cite {
    display: block;
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  figure {
    padding: var(--space-s);
    border: var(--line) solid var(--ink);
    background: var(--paper-2);
  }

  figure > img,
  figure > picture,
  figure > video,
  figure > canvas,
  figure > svg {
    border: var(--line) solid var(--ink);
  }

  figcaption {
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-xs);
    border-block-start: var(--line-thin) solid var(--ink);
    font-size: var(--step--1);
    color: var(--ink-soft);
  }
}

/* ----------------------------- */
/* blocks                        */
/* ----------------------------- */

@layer blocks {
  article,
  section,
  aside {
    position: relative;
  }

  article {
    display: inline;
    padding: var(--space-m);
    /*padding-block-start: var(--space-m);*/
    border: var(--line-heavy) solid var(--ink);
    background: var(--paper);
    /*
      linear-gradient(
        90deg,
        transparent 0,
        transparent calc(100% - 0.7rem),
        color-mix(in oklab, var(--accent) 32%, transparent) calc(100% - 0.7rem),
        color-mix(in oklab, var(--accent) 32%, transparent) 100%
      ),
      var(--paper);
    /*box-shadow: var(--shadow-hard);*/
  }

  article > :first-child,
  section > :first-child,
  aside > :first-child {
    margin-block-start: 0;
  }

  section {
    padding-block: var(--space-l);
  }

  aside {
    margin-block-start: var(--space-s);
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    border-block-start-width: var(--line-heavy);
    background:
      var(--hatch),
      color-mix(in oklab, var(--paper-3) 65%, var(--paper));
  }

  nav {
    display: flex;
    border-block: var(--line) solid var(--ink);
    background: var(--paper-2);
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-self: center;
    gap: 0;
    padding: 0;
    list-style: none;
  }

  nav li {
    margin: 0;
  }

  nav li::marker {
    content: "";
  }

  nav a {
    display: block;
    padding: var(--space-s) var(--space-m);
    border-inline-end: var(--line-thin) solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  nav a:hover,
  nav a[aria-current="page"] {
    color: var(--paper);
    background:
      linear-gradient(135deg, transparent 0 20%, color-mix(in oklab, var(--paper) 16%, transparent) 20% 26%, transparent 26%),
      var(--ink);
  }

  header nav {
    margin-block-start: var(--space-l);
    /*margin-inline: calc(var(--space-l) * -1);*/
    border-block-end: 0;
  }

  details {
    border: var(--line) solid var(--ink);
    background: var(--paper-2);
  }

  summary {
    cursor: pointer;
    padding: var(--space-s) var(--space-l);
    border-block-end: var(--line-thin) solid var(--ink);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  details[open] summary {
    border-block-end-width: var(--line);
    background: var(--hatch), var(--paper-3);
  }

  details > :not(summary) {
    margin: var(--space-l);
  }

  address {
    font-style: normal;
  }

  dialog {
    max-inline-size: min(44rem, calc(100vw - 2rem));
    margin: auto;
    padding: var(--space-xl);
    border: var(--line-heavy) solid var(--ink);
    color: var(--ink);
    background: var(--paper-2);
    box-shadow: var(--shadow-hard);
  }

  dialog::backdrop {
    background:
      repeating-linear-gradient(
        45deg,
        rgb(0 0 0 / 0.50) 0 8px,
        rgb(0 0 0 / 0.65) 8px 16px
      );
  }
}

/* ----------------------------- */
/* forms                         */
/* ----------------------------- */

@layer forms {
  form {
    display: grid;
    gap: var(--space-l);
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    background: var(--paper-2);
  }

  fieldset {
    min-inline-size: 0;
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
  }

  legend {
    padding-inline: var(--space-s);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  label {
    display: block;
    font-weight: 800;
  }

  label + input,
  label + select,
  label + textarea {
    margin-block-start: var(--space-xs);
  }

  input,
  select,
  textarea {
    inline-size: 100%;
    padding: var(--space-s) var(--space-m);
    border: var(--line) solid var(--ink);
    background: var(--paper);
    /*box-shadow: inset 0 0 0 var(--line-thin) color-mix(in oklab, var(--ink) 24%, transparent);*/
  }

  textarea {
    min-block-size: 8lh;
    resize: vertical;
  }

  input[type="checkbox"],
  input[type="radio"] {
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: var(--space-xs);
    vertical-align: -0.12em;
    accent-color: var(--accent);
  }

  input[type="color"] {
    max-inline-size: 4rem;
    min-block-size: 2.5rem;
    padding: var(--space-2xs);
  }

  input:disabled,
  select:disabled,
  textarea:disabled,
  button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
  }


  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    margin-block-start: var(--space-2xs);
    inline-size: auto;
    justify-self: start;
    cursor: pointer;
    padding: var(--space-s) var(--space-l);
    border: var(--line) solid var(--ink);
    color: var(--ink);
    background:
      /*linear-gradient(135deg, transparent 0 72%, color-mix(in oklab, var(--accent) 35%, transparent) 72%),*/
      var(--paper-2);
    box-shadow: var(--shadow-small-soft);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  button:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover,
  input[type="submit"]:hover {
    translate: 0.06rem 0.06rem;
    box-shadow: 0.12rem 0.12rem 0 0 var(--ink);
  }

  button:active,
  input[type="button"]:active,
  input[type="reset"]:active,
  input[type="submit"]:active {
    translate: 0.16rem 0.16rem;
    box-shadow: none;
  }

  button#btn-toggle-theme {
      margin-block-start: var(--space-m);
      margin-left: auto;
  }

  ::placeholder {
    color: color-mix(in oklab, var(--ink) 58%, transparent);
  }

  output {
    display: inline-block;
    padding: var(--space-2xs) var(--space-s);
    border: var(--line-thin) solid var(--ink);
    background: var(--paper-3);
    font-family: var(--font-mono);
  }
}

/* ----------------------------- */
/* tables                        */
/* ----------------------------- */

@layer tables {
  table {
    inline-size: 100%;
    border: var(--line) solid var(--ink);
    background: var(--paper);
    font-variant-numeric: tabular-nums;
  }

  caption {
    caption-side: top;
    padding: var(--space-s);
    border: var(--line) solid var(--ink);
    border-block-end: 0;
    background: var(--hatch), var(--paper-3);
    font-weight: 900;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  th,
  td {
    padding: var(--space-s) var(--space-m);
    border: var(--line-thin) solid var(--ink);
    vertical-align: top;
    text-align: start;
  }

  th {
    background:
      linear-gradient(
        135deg,
        color-mix(in oklab, var(--ink) 9%, transparent) 0 50%,
        transparent 50%
      ),
      var(--paper-3);
    font-weight: 900;
  }

  thead th {
    border-block-end-width: var(--line-heavy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  tbody tr:nth-child(even) {
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0 10px,
        color-mix(in oklab, var(--ink) 5%, transparent) 10px 11px
      );
  }

  tbody tr:hover {
    background:
      linear-gradient(
        90deg,
        color-mix(in oklab, var(--accent-2) 15%, transparent),
        transparent
      );
  }

  tfoot {
    border-block-start: var(--line-heavy) double var(--ink);
    font-weight: 900;
  }
}

/* ----------------------------- */
/* utilities                     */
/* ----------------------------- */

@layer utilities {
  /*
    These classes are intentionally sparse.
    Semantic HTML handles meaning; these handle layout and status.
    Classes exist where semantics alone cannot describe visual grouping.
  */
  .mono {
      font-family: var(--font-mono);
  }

  .doc-meta {
      display: flow;
      width: fit-content;
      margin-block-start: var(--space-4xs);
      margin-right: var(--space-4xs);
      padding: var(--space-2xs) var(--space-s);
      border: var(--line) solid var(--ink);
      background: var(--paper-2);
      font-family: var(--font-mono);
      /*font-size: var(--step--1);*/
      font-weight: 800;
      text-transform: uppercase;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-l);
  }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
  }

  .switcher > * {
    flex: 1 1 24rem;
  }

  .panel {
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    background: var(--paper-2);
    box-shadow: var(--shadow-small);
  }

  .callout {
    padding: var(--space-l);
    border: var(--line) solid var(--ink);
    border-inline-start-width: var(--line-max);
    background:
      /*var(--hatch),*/
      color-mix(in oklab, var(--accent-2) 15%, var(--paper-2));
  }

  .warning {
    border-inline-start-color: var(--warning);
    background:
      var(--hatch),
      color-mix(in oklab, var(--warning) 15%, var(--paper-2));
  }

  .danger {
    border-inline-start-color: var(--danger);
    background:
      var(--hatch),
      color-mix(in oklab, var(--danger) 15%, var(--paper-2));
  }

  .success {
    border-inline-start-color: var(--success);
    background:
      var(--hatch),
      color-mix(in oklab, var(--success) 15%, var(--paper-2));
  }

  .muted {
    color: var(--ink-soft);
  }

  .lede {
    max-inline-size: var(--measure-tight);
    font-size: var(--step-1);
    line-height: 1.32;
    font-weight: 550;
  }

  .compact {
    font-size: var(--step--1);
    line-height: 1.32;
  }

  .compact :where(p, ul, ol, dl, blockquote, pre, table, figure, form, details) {
    margin-block-start: var(--space-s);
  }

  .measure {
    max-inline-size: var(--measure);
  }

  .measure-tight {
    max-inline-size: var(--measure-tight);
  }

  .full-bleed {
    grid-column: 1 / -1;
  }

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

/* ----------------------------- */
/* print                         */
/* ----------------------------- */

@layer print {
  @media print {
    :root {
      --ink: #000;
      --ink-soft: #222;
      --paper: #fff;
      --paper-2: #fff;
      --paper-3: #eee;
      --accent: #000;
      --accent-2: #000;
      --shadow-hard: none;
      --shadow-small: none;
    }

    body {
      background: #fff;
      font-size: 10.5pt;
    }

    body > header,
    body > main,
    body > footer {
      inline-size: 100%;
      margin: 0;
    }

    body > main {
      display: block;
      padding-block: 1rem;
    }

    body > header,
    article,
    aside,
    blockquote,
    pre,
    table,
    form,
    details,
    figure {
      box-shadow: none !important;
      break-inside: avoid;
    }

    nav,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
      display: none !important;
    }

    a {
      color: #000;
      text-decoration: underline;
    }

    a[href^="http"]::after {
      content: " <" attr(href) ">";
      font-family: var(--font-mono);
      font-size: 0.82em;
      font-weight: 400;
    }
  }
}