/* Canonical control treatment. Geometry remains in each existing composition. */
@font-face {
  font-family: "Kretopia Material";
  src: url("/fonts/MaterialIcons-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
:root {
  --k-action-text: #F2EFEA;
  --k-action-muted: #AAA8B1;
  --k-action-ink: #0B0B10;
  --k-action-surface: #11141B;
  --k-action-hover: #1A1E28;
  --k-action-line: rgb(242 239 234 / .24);
  --k-action-focus: #F2EFEA;
  --k-action-signature: linear-gradient(135deg,#4012F8 0%,#A516C5 35%,#F62489 65%,#FFA722 100%);
  --k-action-disabled: #777D8B;
}
.kabout[data-theme="light"] {
  --k-action-text: #121216;
  --k-action-muted: #64616B;
  --k-action-ink: #FAF8F5;
  --k-action-surface: #FFFFFF;
  --k-action-hover: #F0ECE6;
  --k-action-line: rgb(18 18 22 / .24);
  --k-action-focus: #121216;
  --k-action-disabled: #706B75;
}
.k-icon[data-k-icon] {
  font-family: "Kretopia Material";
  font-style: normal;
  font-weight: 400;
  font-size: var(--k-icon-size,1em);
  font-feature-settings: "liga";
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  flex-shrink: 0;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
/* Explicit semantic hooks also cover static guides and the standalone demo. */
body .k-action[data-k-action][data-k-tone] {
  --action-bg: var(--k-action-surface);
  --action-fg: var(--k-action-text);
  --action-border: var(--k-action-line);
  background: var(--action-bg);
  color: var(--action-fg);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--action-border);
  font-weight: 600;
  text-decoration: none;
  text-shadow: none;
  opacity: 1;
  filter: none;
  transform: none;
  transition: background-color 160ms cubic-bezier(.2,.8,.2,1),color 160ms cubic-bezier(.2,.8,.2,1),box-shadow 160ms cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
body .k-action[data-k-action][data-k-tone][data-k-tone="primary"] {
  --action-bg: var(--k-action-text);
  --action-fg: var(--k-action-ink);
  --action-border: transparent;
  font-weight: 700;
}
body .k-action[data-k-action][data-k-tone][data-k-tone="signature"] {
  --action-bg: var(--k-action-surface);
  background: linear-gradient(var(--action-bg),var(--action-bg)) padding-box,var(--k-action-signature) border-box;
  box-shadow: none;
  font-weight: 700;
}
body .k-action[data-k-action][data-k-tone][data-k-tone="ghost"],
body .k-action[data-k-action][data-k-tone][data-k-tone="link"] {
  --action-bg: transparent;
  --action-border: transparent;
  box-shadow: none;
  font-weight: inherit;
}
body .k-action[data-k-action][data-k-tone]:is([data-k-tone="primary"],[data-k-tone="secondary"],[data-k-tone="signature"],[data-k-tone="ghost"]) { border-radius: var(--k-radius-control,8px); }
body .k-action[data-k-action][data-k-tone][data-k-pill] { border-radius: var(--k-radius-pill,999px); }
body .k-action[data-k-action][data-k-tone][data-k-tone="disclosure"],
body .k-action[data-k-action][data-k-tone][data-k-tone="card"] {
  background: transparent;
  color: inherit;
  border-radius: inherit;
  box-shadow: none;
  font-weight: inherit;
}
body .k-action[data-k-action][data-k-tone][data-k-tone="link"] { border-radius: 0; }
body .k-action[data-k-action][data-k-tone]:is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-active="true"],.is-active,.selected,.active)[data-k-tone="choice"] {
  --action-bg: var(--k-action-hover);
  --action-border: var(--k-action-text);
  color: var(--k-action-text);
}
body .k-action[data-k-action][data-k-tone][data-k-tone="link"][aria-current] {
  color: var(--k-action-text);
  box-shadow: none;
}
body .k-action[data-k-action][data-k-tone]:focus-visible {
  outline: 2px solid var(--k-action-focus);
  outline-offset: 4px;
}
body .k-action[data-k-action][data-k-tone][data-k-tone="choice"]:focus-visible,
body .k-action[data-k-action][data-k-tone][data-k-tone="disclosure"]:focus-visible { outline-offset: -3px; }
@media (hover:hover) {
  body .k-action[data-k-action][data-k-tone]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    --action-bg: var(--k-action-hover);
    --action-border: var(--k-action-text);
  }
  body .k-action[data-k-action][data-k-tone][data-k-tone="primary"]:not(:disabled):not([aria-disabled="true"]):hover {
    --action-bg: #FFFFFF;
    --action-fg: #0B0B10;
  }
  .kabout[data-theme="light"] .k-action[data-k-action][data-k-tone][data-k-tone="primary"]:not(:disabled):hover {
    --action-bg: #303038;
    --action-fg: #FAF8F5;
  }
  body .k-action[data-k-action][data-k-tone]:is([data-k-tone="link"],[data-k-tone="disclosure"],[data-k-tone="card"]):hover {
    background: transparent;
    color: var(--k-action-text);
  }
  body .k-action[data-k-action][data-k-tone][data-k-tone="link"]:hover { text-decoration: none; }
}
body .k-action[data-k-action][data-k-tone]:not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: inset 0 0 0 1px var(--k-action-text);
}
body .k-action[data-k-action][data-k-tone]:is(:disabled,[aria-disabled="true"]) {
  --action-bg: var(--k-action-hover);
  --action-fg: var(--k-action-disabled);
  --action-border: var(--k-action-line);
  background: var(--action-bg);
  color: var(--action-fg);
  box-shadow: inset 0 0 0 1px var(--action-border);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
body .k-action[data-k-action][data-k-tone][aria-busy="true"] { cursor: progress; transform: none; }
/* The existing Join wrapper is retained, including its padding and dimensions. */
.kabout .ab-join.k-action > span { background: transparent; color: inherit; }
.k-action .k-icon { color: inherit; text-decoration: none; }
.k-action .k-icon::before,.k-action .k-icon::after { content: none; }
@media (prefers-reduced-motion:reduce) {
  body .k-action[data-k-action][data-k-tone],body .k-action[data-k-action][data-k-tone] .k-icon { transition: none; animation: none; transform: none; }
}
@media (forced-colors:active) {
  body .k-action[data-k-action][data-k-tone] { background: ButtonFace; color: ButtonText; outline-color: Highlight; box-shadow: inset 0 0 0 1px ButtonText; }
  body .k-action[data-k-action][data-k-tone]:disabled { color: GrayText; }
}

body .k-action[data-k-action="illustrative"][data-k-tone]{cursor:default}