@layer protokuda.base {
  :root {
    --pk-sans-font-family: "Antonio", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica", sans-serif;
    --pk-mono-font-family: Menlo, Monaco, "Courier New", monospace;
    --pk-frame-line: 3px;
    --pk-frame-bar: .5rem;
    --pk-frame-side: 1.1rem;
    --pk-frame-radius: 2rem;
    --pk-sidebar-width: 5rem;
    --pk-statusline-height: 2rem;
    --pk-inner-radius: 0rem;
    --pk-letter-spacing: .06em;
    --pk-backdrop: var(--pk-gray);
    --pk-backdrop-light: var(--pk-light-gray);
    --pk-backdrop-dark: var(--pk-dark-gray);
    --pk-text: var(--pk-black);
    --pk-primary: var(--pk-black);
    --pk-primary-light: var(--pk-gray);
    --pk-primary-dark: var(--pk-black);
    --pk-on-primary: var(--pk-white);
    --pk-secondary: var(--pk-white);
    --pk-secondary-light: var(--pk-white);
    --pk-secondary-dark: var(--pk-light-gray);
    --pk-on-secondary: var(--pk-black);
    --pk-accent: var(--pk-gray);
    --pk-accent-light: var(--pk-light-gray);
    --pk-accent-dark: var(--pk-dark-gray);
    --pk-on-accent: var(--pk-white);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-on-secondary);
    --pk-white: #fff;
    --pk-black: #000;
    --pk-gray: #789;
    --pk-light-gray: #d3d3d3;
    --pk-dark-gray: #a9a9a9;
    --pk-pale-canary: #ff9;
    --pk-golden-tanoi: #fc6;
    --pk-neon-carrot: #f93;
    --pk-eggplant: #646;
    --pk-lilac: #c9c;
    --pk-anakiwa: #9cf;
    --pk-mariner: #36c;
    --pk-bahama-blue: #069;
    --pk-red-alert: #e10;
    --pk-blue-bell: #99c;
    --pk-melrose: #99f;
    --pk-hopbush: #c69;
    --pk-chestnut-rose: #c66;
    --pk-orange-peel: #f96;
    --pk-atomic-tangerine: #f90;
    --pk-danube: #68c;
    --pk-indigo: #45b;
    --pk-lavender-purple: #97a;
    --pk-cosmic: #746;
    --pk-red-damask: #d64;
    --pk-medium-carmine: #a53;
    --pk-bourbon: #b62;
    --pk-sandy-brown: #e95;
    --pk-periwinkle: #cdf;
    --pk-dodger-blue: #59f;
    --pk-dodger-blue-alt: #36f;
    --pk-blue: #01e;
    --pk-navy-blue: #008;
    --pk-husk: #ba5;
    --pk-rust: #b41;
    --pk-tamarillo: #821;
  }

  .pk-gray-bg {
    background-color: var(--pk-gray);
  }

  .pk-white-bg {
    background-color: var(--pk-white);
  }

  .pk-black-bg {
    background-color: var(--pk-black);
  }

  .pk-pale-canary-bg {
    background-color: var(--pk-pale-canary);
  }

  .pk-golden-tanoi-bg {
    background-color: var(--pk-golden-tanoi);
  }

  .pk-neon-carrot-bg {
    background-color: var(--pk-neon-carrot);
  }

  .pk-eggplant-bg {
    background-color: var(--pk-eggplant);
  }

  .pk-lilac-bg {
    background-color: var(--pk-lilac);
  }

  .pk-anakiwa-bg {
    background-color: var(--pk-anakiwa);
  }

  .pk-mariner-bg {
    background-color: var(--pk-mariner);
  }

  .pk-bahama-blue-bg {
    background-color: var(--pk-bahama-blue);
  }

  .pk-red-alert-bg {
    background-color: var(--pk-red-alert);
  }

  .pk-blue-bell-bg {
    background-color: var(--pk-blue-bell);
  }

  .pk-melrose-bg {
    background-color: var(--pk-melrose);
  }

  .pk-hopbush-bg {
    background-color: var(--pk-hopbush);
  }

  .pk-chestnut-rose-bg {
    background-color: var(--pk-chestnut-rose);
  }

  .pk-orange-peel-bg {
    background-color: var(--pk-orange-peel);
  }

  .pk-atomic-tangerine-bg {
    background-color: var(--pk-atomic-tangerine);
  }

  .pk-danube-bg {
    background-color: var(--pk-danube);
  }

  .pk-indigo-bg {
    background-color: var(--pk-indigo);
  }

  .pk-lavender-purple-bg {
    background-color: var(--pk-lavender-purple);
  }

  .pk-cosmic-bg {
    background-color: var(--pk-cosmic);
  }

  .pk-red-damask-bg {
    background-color: var(--pk-red-damask);
  }

  .pk-medium-carmine-bg {
    background-color: var(--pk-medium-carmine);
  }

  .pk-bourbon-bg {
    background-color: var(--pk-bourbon);
  }

  .pk-sandy-brown-bg {
    background-color: var(--pk-sandy-brown);
  }

  .pk-periwinkle-bg {
    background-color: var(--pk-periwinkle);
  }

  .pk-dodger-blue-bg {
    background-color: var(--pk-dodger-blue);
  }

  .pk-dodger-blue-alt-bg {
    background-color: var(--pk-dodger-blue-alt);
  }

  .pk-blue-bg {
    background-color: var(--pk-blue);
  }

  .pk-navy-blue-bg {
    background-color: var(--pk-navy-blue);
  }

  .pk-husk-bg {
    background-color: var(--pk-husk);
  }

  .pk-rust-bg {
    background-color: var(--pk-rust);
  }

  .pk-tamarillo-bg {
    background-color: var(--pk-tamarillo);
  }

  .pk-gray-border {
    border-color: var(--pk-gray);
  }

  .pk-white-border {
    border-color: var(--pk-white);
  }

  .pk-black-border {
    border-color: var(--pk-black);
  }

  .pk-pale-canary-border {
    border-color: var(--pk-pale-canary);
  }

  .pk-golden-tanoi-border {
    border-color: var(--pk-golden-tanoi);
  }

  .pk-neon-carrot-border {
    border-color: var(--pk-neon-carrot);
  }

  .pk-eggplant-border {
    border-color: var(--pk-eggplant);
  }

  .pk-lilac-border {
    border-color: var(--pk-lilac);
  }

  .pk-anakiwa-border {
    border-color: var(--pk-anakiwa);
  }

  .pk-mariner-border {
    border-color: var(--pk-mariner);
  }

  .pk-bahama-blue-border {
    border-color: var(--pk-bahama-blue);
  }

  .pk-red-alert-border {
    border-color: var(--pk-red-alert);
  }

  .pk-blue-bell-border {
    border-color: var(--pk-blue-bell);
  }

  .pk-melrose-border {
    border-color: var(--pk-melrose);
  }

  .pk-hopbush-border {
    border-color: var(--pk-hopbush);
  }

  .pk-chestnut-rose-border {
    border-color: var(--pk-chestnut-rose);
  }

  .pk-orange-peel-border {
    border-color: var(--pk-orange-peel);
  }

  .pk-atomic-tangerine-border {
    border-color: var(--pk-atomic-tangerine);
  }

  .pk-danube-border {
    border-color: var(--pk-danube);
  }

  .pk-indigo-border {
    border-color: var(--pk-indigo);
  }

  .pk-lavender-purple-border {
    border-color: var(--pk-lavender-purple);
  }

  .pk-cosmic-border {
    border-color: var(--pk-cosmic);
  }

  .pk-red-damask-border {
    border-color: var(--pk-red-damask);
  }

  .pk-medium-carmine-border {
    border-color: var(--pk-medium-carmine);
  }

  .pk-bourbon-border {
    border-color: var(--pk-bourbon);
  }

  .pk-sandy-brown-border {
    border-color: var(--pk-sandy-brown);
  }

  .pk-periwinkle-border {
    border-color: var(--pk-periwinkle);
  }

  .pk-dodger-blue-border {
    border-color: var(--pk-dodger-blue);
  }

  .pk-dodger-blue-alt-border {
    border-color: var(--pk-dodger-blue-alt);
  }

  .pk-blue-border {
    border-color: var(--pk-blue);
  }

  .pk-navy-blue-border {
    border-color: var(--pk-navy-blue);
  }

  .pk-husk-border {
    border-color: var(--pk-husk);
  }

  .pk-rust-border {
    border-color: var(--pk-rust);
  }

  .pk-tamarillo-border {
    border-color: var(--pk-tamarillo);
  }

  .pk-gray-color {
    color: var(--pk-gray);
  }

  .pk-white-color {
    color: var(--pk-white);
  }

  .pk-black-color {
    color: var(--pk-black);
  }

  .pk-pale-canary-color {
    color: var(--pk-pale-canary);
  }

  .pk-golden-tanoi-color {
    color: var(--pk-golden-tanoi);
  }

  .pk-neon-carrot-color {
    color: var(--pk-neon-carrot);
  }

  .pk-eggplant-color {
    color: var(--pk-eggplant);
  }

  .pk-lilac-color {
    color: var(--pk-lilac);
  }

  .pk-anakiwa-color {
    color: var(--pk-anakiwa);
  }

  .pk-mariner-color {
    color: var(--pk-mariner);
  }

  .pk-bahama-blue-color {
    color: var(--pk-bahama-blue);
  }

  .pk-red-alert-color {
    color: var(--pk-red-alert);
  }

  .pk-blue-bell-color {
    color: var(--pk-blue-bell);
  }

  .pk-melrose-color {
    color: var(--pk-melrose);
  }

  .pk-hopbush-color {
    color: var(--pk-hopbush);
  }

  .pk-chestnut-rose-color {
    color: var(--pk-chestnut-rose);
  }

  .pk-orange-peel-color {
    color: var(--pk-orange-peel);
  }

  .pk-atomic-tangerine-color {
    color: var(--pk-atomic-tangerine);
  }

  .pk-danube-color {
    color: var(--pk-danube);
  }

  .pk-indigo-color {
    color: var(--pk-indigo);
  }

  .pk-lavender-purple-color {
    color: var(--pk-lavender-purple);
  }

  .pk-cosmic-color {
    color: var(--pk-cosmic);
  }

  .pk-red-damask-color {
    color: var(--pk-red-damask);
  }

  .pk-medium-carmine-color {
    color: var(--pk-medium-carmine);
  }

  .pk-bourbon-color {
    color: var(--pk-bourbon);
  }

  .pk-sandy-brown-color {
    color: var(--pk-sandy-brown);
  }

  .pk-periwinkle-color {
    color: var(--pk-periwinkle);
  }

  .pk-dodger-blue-color {
    color: var(--pk-dodger-blue);
  }

  .pk-dodger-blue-alt-color {
    color: var(--pk-dodger-blue-alt);
  }

  .pk-blue-color {
    color: var(--pk-blue);
  }

  .pk-navy-blue-color {
    color: var(--pk-navy-blue);
  }

  .pk-husk-color {
    color: var(--pk-husk);
  }

  .pk-rust-color {
    color: var(--pk-rust);
  }

  .pk-tamarillo-color {
    color: var(--pk-tamarillo);
  }

  body {
    font-family: var(--pk-sans-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--pk-backdrop);
    margin: 0;
  }

  code {
    font-family: var(--pk-mono-font-family);
  }

  :where(.pk-screen) :is(button, input, select) {
    font: inherit;
  }

  :where(.pk-screen) :is(input, select) {
    color: var(--pk-on-accent);
    background-color: var(--pk-accent);
    accent-color: var(--pk-accent);
    border: none;
  }

  :where(.pk-screen) input[type="number"] {
    text-align: center;
  }

  :where(.pk-screen) input[type="range"].pk-vertical {
    writing-mode: vertical-lr;
    direction: rtl;
  }

  :where(.pk-screen) :is(input[type="button"], .pk-button) {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--pk-letter-spacing);
    color: var(--pk-button-fg);
    background-color: var(--pk-button-bg);
    border: none;
    padding: .5rem;
  }

  :where(.pk-screen) .pk-button[data-code]:after {
    content: attr(data-code);
    text-align: right;
    opacity: .75;
    margin-top: .25rem;
    font-size: .75em;
    display: block;
  }

  :where(.pk-screen) :is(input[type="button"], .pk-button)::-moz-focus-inner {
    border: 0;
  }

  :where(.pk-screen) :is(input[type="button"], .pk-button):hover {
    color: var(--pk-button-hover-fg);
    background-color: var(--pk-button-hover-bg);
  }

  :where(.pk-screen) :is(button, input, select):focus {
    outline: none;
  }

  :where(.pk-screen) :is(button, input, select):focus-visible {
    outline: 2px solid var(--pk-accent);
    outline-offset: 2px;
  }

  .pk-frame {
    --_head: var(--pk-frame-line);
    --_foot: var(--pk-frame-line);
    --_start: var(--pk-frame-line);
    --_end: var(--pk-frame-line);
    --_top-bar: var(--_head);
    --_r-start: var(--pk-elbow-radius, var(--pk-frame-radius));
    --_r-end: var(--pk-end-radius, var(--pk-frame-radius));
    --_inset-end: max(var(--_r-end), var(--pk-frame-side));
    --_cl: 0;
    --_cr: auto;
    --_cx: 100%;
    --_head-t: 0;
    --_head-b: auto;
    --_head-y: 100%;
    --_foot-t: auto;
    --_foot-b: 0;
    --_foot-y: 0%;
    border-radius: var(--_r-start) var(--_r-end) var(--_r-end) var(--_r-start);
    border-style: solid;
    border-width: var(--_head) var(--_end) var(--_foot) var(--_start);
    background-color: var(--pk-backdrop-light);
    border-color: var(--pk-primary);
    position: relative;
  }

  .pk-frame.pk-mirror {
    --_cl: auto;
    --_cr: 0;
    --_cx: 0%;
    border-radius: var(--_r-end) var(--_r-start) var(--_r-start) var(--_r-end);
    border-width: var(--_head) var(--_start) var(--_foot) var(--_end);
  }

  .pk-frame.pk-flip {
    --_top-bar: var(--_foot);
    --_head-t: auto;
    --_head-b: 0;
    --_head-y: 0%;
    --_foot-t: 0;
    --_foot-b: auto;
    --_foot-y: 100%;
    border-width: var(--_foot) var(--_end) var(--_head) var(--_start);
  }

  .pk-frame.pk-mirror.pk-flip {
    border-width: var(--_foot) var(--_start) var(--_head) var(--_end);
  }

  .pk-frame.pk-std {
    --_head: var(--pk-frame-bar);
    --_foot: var(--pk-frame-bar);
    --_start: var(--pk-frame-side);
    --_end: 0rem;
  }

  .pk-frame.pk-partial {
    --_head: 0rem;
    --_foot: var(--pk-frame-bar);
    --_start: var(--pk-frame-side);
    --_end: 0rem;
  }

  .pk-frame.pk-bracket {
    --_head: 0rem;
    --_foot: 0rem;
    --_start: var(--pk-frame-side);
    --_end: var(--pk-frame-side);
  }

  .pk-frame.pk-sidebar {
    --_start: var(--pk-sidebar-width);
  }

  .pk-frame.pk-statusline {
    --_foot: var(--pk-statusline-height);
  }

  .pk-frame:is(.pk-std, .pk-partial):before, .pk-frame:is(.pk-std, .pk-partial):after {
    content: "";
    pointer-events: none;
    left: var(--_cl);
    right: var(--_cr);
    width: min(var(--pk-inner-radius), calc(var(--_start) * 1000));
    position: absolute;
  }

  .pk-frame:is(.pk-std, .pk-partial):before {
    top: var(--_head-t);
    bottom: var(--_head-b);
    height: min(var(--pk-inner-radius), calc(var(--_head) * 1000));
    background: radial-gradient(circle at var(--_cx) var(--_head-y),
      transparent calc(var(--pk-inner-radius) - .5px),
      var(--pk-primary) var(--pk-inner-radius));
  }

  .pk-frame:is(.pk-std, .pk-partial):after {
    top: var(--_foot-t);
    bottom: var(--_foot-b);
    height: min(var(--pk-inner-radius), calc(var(--_foot) * 1000));
    background: radial-gradient(circle at var(--_cx) var(--_foot-y),
      transparent calc(var(--pk-inner-radius) - .5px),
      var(--pk-primary) var(--pk-inner-radius));
  }

  .pk-frame > :is(.pk-title, .pk-label, .pk-status) {
    text-transform: uppercase;
    letter-spacing: var(--pk-letter-spacing);
  }

  .pk-frame > .pk-title, .pk-frame > .pk-label {
    right: var(--pk-frame-side);
    color: var(--pk-on-backdrop, var(--pk-primary));
    position: absolute;
  }

  .pk-frame > .pk-title {
    top: var(--pk-frame-bar);
  }

  .pk-frame > .pk-label {
    bottom: var(--pk-frame-bar);
    flex-flow: column;
    display: flex;
  }

  .pk-frame.pk-mirror > :is(.pk-title, .pk-label) {
    right: auto;
    left: var(--pk-frame-side);
  }

  .pk-frame:not(.pk-bracket, .pk-partial, .pk-statusline.pk-flip) > .pk-title, .pk-frame.pk-partial.pk-flip:not(.pk-statusline) > .pk-title {
    top: calc(var(--_top-bar) / -2);
    right: var(--_inset-end);
    white-space: nowrap;
    color: var(--pk-on-primary);
    background-color: var(--pk-primary);
    padding: .15em .4em;
    line-height: 1;
    transform: translateY(-50%);
  }

  .pk-frame.pk-mirror:not(.pk-bracket, .pk-partial, .pk-statusline.pk-flip) > .pk-title, .pk-frame.pk-partial.pk-flip.pk-mirror:not(.pk-statusline) > .pk-title {
    right: auto;
    left: var(--_inset-end);
  }

  .pk-frame > .pk-content {
    margin: 2.5rem var(--pk-frame-side) var(--pk-frame-side) var(--pk-frame-side);
    color: var(--pk-text);
  }

  .pk-frame > .pk-items {
    top: var(--_r-start);
    left: calc(-1 * var(--pk-sidebar-width));
    flex-flow: column;
    gap: .5rem;
    display: flex;
    position: absolute;
  }

  .pk-frame.pk-mirror > .pk-items {
    left: auto;
    right: calc(-1 * var(--pk-sidebar-width));
  }

  .pk-frame > .pk-items > .pk-button {
    width: var(--pk-sidebar-width);
    overflow: hidden;
  }

  .pk-frame > .pk-status {
    bottom: calc(-1 * var(--pk-statusline-height));
    height: var(--pk-statusline-height);
    right: var(--_inset-end);
    color: var(--pk-on-primary);
    flex-flow: row;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .pk-frame.pk-mirror > .pk-status {
    right: auto;
    left: var(--_inset-end);
  }

  .pk-frame.pk-flip > .pk-status {
    bottom: auto;
    top: calc(-1 * var(--pk-statusline-height));
  }

  .pk-screen {
    box-sizing: border-box;
    gap: 24px;
    min-height: 100dvh;
    padding: 24px;
    display: grid;
  }
}

@layer protokuda.theme {
  .pk-theme-greysmoke {
    --pk-backdrop: var(--pk-gray);
    --pk-backdrop-light: var(--pk-light-gray);
    --pk-backdrop-dark: var(--pk-dark-gray);
    --pk-text: var(--pk-black);
    --pk-primary: var(--pk-black);
    --pk-primary-light: var(--pk-gray);
    --pk-primary-dark: var(--pk-black);
    --pk-on-primary: var(--pk-white);
    --pk-secondary: var(--pk-white);
    --pk-secondary-light: var(--pk-white);
    --pk-secondary-dark: var(--pk-light-gray);
    --pk-on-secondary: var(--pk-black);
    --pk-accent: var(--pk-gray);
    --pk-accent-light: var(--pk-light-gray);
    --pk-accent-dark: var(--pk-dark-gray);
    --pk-on-accent: var(--pk-white);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-on-secondary);
  }

  .pk-theme-atomic {
    --pk-backdrop: var(--pk-black);
    --pk-backdrop-light: var(--pk-black);
    --pk-backdrop-dark: var(--pk-black);
    --pk-text: var(--pk-white);
    --pk-primary: #f90;
    --pk-primary-light: #ffc164;
    --pk-primary-dark: #9b5d00;
    --pk-on-primary: var(--pk-black);
    --pk-secondary: #2419b2;
    --pk-secondary-light: #655ec5;
    --pk-secondary-dark: #120b6c;
    --pk-on-secondary: var(--pk-white);
    --pk-accent: #00aa72;
    --pk-accent-light: #4bbf99;
    --pk-accent-dark: #006746;
    --pk-on-accent: var(--pk-secondary);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-primary);
  }

  .pk-theme-goldentanoi {
    --pk-backdrop: var(--pk-black);
    --pk-backdrop-light: var(--pk-black);
    --pk-backdrop-dark: var(--pk-black);
    --pk-text: var(--pk-periwinkle);
    --pk-primary: var(--pk-golden-tanoi);
    --pk-primary-light: var(--pk-pale-canary);
    --pk-primary-dark: var(--pk-neon-carrot);
    --pk-on-primary: var(--pk-black);
    --pk-secondary: var(--pk-lilac);
    --pk-secondary-light: var(--pk-lilac);
    --pk-secondary-dark: var(--pk-hopbush);
    --pk-on-secondary: var(--pk-black);
    --pk-accent: var(--pk-anakiwa);
    --pk-accent-light: var(--pk-periwinkle);
    --pk-accent-dark: var(--pk-danube);
    --pk-on-accent: var(--pk-black);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-on-secondary);
  }

  .pk-theme-anakiwa {
    --pk-backdrop: var(--pk-black);
    --pk-backdrop-light: var(--pk-black);
    --pk-backdrop-dark: var(--pk-black);
    --pk-text: var(--pk-white);
    --pk-primary: var(--pk-anakiwa);
    --pk-primary-light: var(--pk-periwinkle);
    --pk-primary-dark: var(--pk-danube);
    --pk-on-primary: var(--pk-black);
    --pk-secondary: var(--pk-danube);
    --pk-secondary-light: var(--pk-danube);
    --pk-secondary-dark: var(--pk-mariner);
    --pk-on-secondary: var(--pk-black);
    --pk-accent: var(--pk-golden-tanoi);
    --pk-accent-light: var(--pk-pale-canary);
    --pk-accent-dark: var(--pk-atomic-tangerine);
    --pk-on-accent: var(--pk-black);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-white);
  }

  .pk-theme-lilac {
    --pk-backdrop: var(--pk-black);
    --pk-backdrop-light: var(--pk-black);
    --pk-backdrop-dark: var(--pk-black);
    --pk-text: var(--pk-periwinkle);
    --pk-primary: var(--pk-lilac);
    --pk-primary-light: var(--pk-melrose);
    --pk-primary-dark: var(--pk-lavender-purple);
    --pk-on-primary: var(--pk-black);
    --pk-secondary: var(--pk-blue-bell);
    --pk-secondary-light: var(--pk-melrose);
    --pk-secondary-dark: var(--pk-blue-bell);
    --pk-on-secondary: var(--pk-black);
    --pk-accent: var(--pk-orange-peel);
    --pk-accent-light: var(--pk-golden-tanoi);
    --pk-accent-dark: var(--pk-red-damask);
    --pk-on-accent: var(--pk-black);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-hopbush);
    --pk-button-hover-fg: var(--pk-on-secondary);
  }

  .pk-theme-husk {
    --pk-backdrop: var(--pk-black);
    --pk-backdrop-light: var(--pk-black);
    --pk-backdrop-dark: var(--pk-black);
    --pk-text: var(--pk-pale-canary);
    --pk-primary: var(--pk-husk);
    --pk-primary-light: var(--pk-golden-tanoi);
    --pk-primary-dark: var(--pk-bourbon);
    --pk-on-primary: var(--pk-black);
    --pk-secondary: var(--pk-bourbon);
    --pk-secondary-light: var(--pk-sandy-brown);
    --pk-secondary-dark: var(--pk-bourbon);
    --pk-on-secondary: var(--pk-black);
    --pk-accent: var(--pk-anakiwa);
    --pk-accent-light: var(--pk-periwinkle);
    --pk-accent-dark: var(--pk-danube);
    --pk-on-accent: var(--pk-black);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-on-secondary);
  }

  .pk-theme-navy {
    --pk-backdrop: var(--pk-black);
    --pk-backdrop-light: var(--pk-navy-blue);
    --pk-backdrop-dark: var(--pk-black);
    --pk-text: var(--pk-periwinkle);
    --pk-primary: var(--pk-dodger-blue);
    --pk-primary-light: var(--pk-anakiwa);
    --pk-primary-dark: var(--pk-dodger-blue-alt);
    --pk-on-primary: var(--pk-black);
    --pk-secondary: var(--pk-anakiwa);
    --pk-secondary-light: var(--pk-periwinkle);
    --pk-secondary-dark: var(--pk-anakiwa);
    --pk-on-secondary: var(--pk-navy-blue);
    --pk-accent: var(--pk-golden-tanoi);
    --pk-accent-light: var(--pk-pale-canary);
    --pk-accent-dark: var(--pk-atomic-tangerine);
    --pk-on-accent: var(--pk-navy-blue);
    --pk-error: var(--pk-red-alert);
    --pk-on-error: var(--pk-black);
    --pk-button-bg: var(--pk-secondary-light);
    --pk-button-fg: var(--pk-on-secondary);
    --pk-button-hover-bg: var(--pk-secondary-dark);
    --pk-button-hover-fg: var(--pk-on-secondary);
  }
}

@layer protokuda.state {
  .pk-alert, .pk-alert [class*="pk-theme-"] {
    --pk-primary: color-mix(in srgb, var(--pk-error) var(--pk-alert-mix), var(--pk-backdrop));
  }

  .pk-alert {
    animation: 1.2s ease-in-out infinite alternate pk-alert-pulse;
  }

  @keyframes pk-alert-pulse {
    to {
      --pk-alert-mix: 55%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pk-alert {
      animation: none;
    }
  }
}

@property --pk-alert-mix {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}