/*
 * KAS — Kick Ass Styles v0.4.0
 * A classless, drop-in stylesheet for semantic HTML.
 * License: MIT
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  color-scheme: light;
  accent-color: var(--kas-action);
  --kas-heading-foreground: #111522;
  --kas-contrast-background: #111522;
  --kas-contrast-foreground: #ffffff;
  --kas-foreground: #262b39;
  --kas-muted-foreground: #697184;
  --kas-page-background: #f7f5ef;
  --kas-surface: #ffffff;
  --kas-surface-raised: #eeece5;
  --kas-border: #d8d6cf;
  --kas-action: #e86f61;
  --kas-action-strong: #ad433d;
  --kas-support: #267d72;
  --kas-highlight: #f2c657;
  --kas-visited-link: #5869bd;
  --kas-action-subtle: #fae2dc;
  --kas-support-subtle: #d9eee8;
  --kas-highlight-subtle: #fff1c7;
  --kas-focus-ring: #4c62c5;
  --kas-radius: 14px;
  --kas-radius-small: 9px;
  --kas-layout-max-width: 76rem;
  --kas-readable-measure: 68ch;
  --kas-elevation-raised: 0 12px 30px rgb(17 21 34 / .08);
  --kas-elevation-subtle: 0 4px 12px rgb(17 21 34 / .08);
  --kas-font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --kas-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --kas-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --kas-motion-duration: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-kas-theme="light"]) {
    color-scheme: dark;
    --kas-heading-foreground: #f4f4f7;
    --kas-contrast-background: #0c0f17;
    --kas-contrast-foreground: #f4f4f7;
    --kas-foreground: #ececf0;
    --kas-muted-foreground: #a4a9b8;
    --kas-page-background: #141925;
    --kas-surface: #1c2231;
    --kas-surface-raised: #242b3c;
    --kas-border: #384054;
    --kas-action: #f18a78;
    --kas-action-strong: #ffad9b;
    --kas-support: #6ac8b6;
    --kas-highlight: #f7cb63;
    --kas-visited-link: #9caaf2;
    --kas-action-subtle: #452a31;
    --kas-support-subtle: #203b3a;
    --kas-highlight-subtle: #453a23;
    --kas-focus-ring: #aeb9ff;
    --kas-elevation-raised: 0 14px 34px rgb(0 0 0 / .24);
    --kas-elevation-subtle: 0 5px 14px rgb(0 0 0 / .22);
  }
}

:root[data-kas-theme="dark"] {
  color-scheme: dark;
  --kas-heading-foreground: #f4f4f7;
  --kas-contrast-background: #0c0f17;
  --kas-contrast-foreground: #f4f4f7;
  --kas-foreground: #ececf0;
  --kas-muted-foreground: #a4a9b8;
  --kas-page-background: #141925;
  --kas-surface: #1c2231;
  --kas-surface-raised: #242b3c;
  --kas-border: #384054;
  --kas-action: #f18a78;
  --kas-action-strong: #ffad9b;
  --kas-support: #6ac8b6;
  --kas-highlight: #f7cb63;
  --kas-visited-link: #9caaf2;
  --kas-action-subtle: #452a31;
  --kas-support-subtle: #203b3a;
  --kas-highlight-subtle: #453a23;
  --kas-focus-ring: #aeb9ff;
  --kas-elevation-raised: 0 14px 34px rgb(0 0 0 / .24);
  --kas-elevation-subtle: 0 5px 14px rgb(0 0 0 / .22);
}

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

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

body {
  max-width: var(--kas-layout-max-width);
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
  background: var(--kas-page-background);
  color: var(--kas-foreground);
  font: 400 1rem/1.65 var(--kas-font-body);
}

::selection { background: var(--kas-highlight); color: var(--kas-contrast-background); }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--kas-action) var(--kas-surface-raised); }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--kas-surface-raised); }
::-webkit-scrollbar-thumb { background: var(--kas-action); border: 3px solid var(--kas-surface-raised); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--kas-action-strong); }

h1, h2, h3, h4, h5, h6 {
  margin: 1.8em 0 .55em;
  color: var(--kas-heading-foreground);
  font-family: var(--kas-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

h1 { max-width: 22ch; margin-top: .55em; font-size: clamp(3.25rem, 7vw, 6.5rem); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4vw, 3.7rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { color: var(--kas-muted-foreground); font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; }
h1 em { color: var(--kas-action); font-style: normal; }

p, ul, ol, dl, blockquote, pre, table, figure, details, form, fieldset, address { max-width: var(--kas-readable-measure); }
p { margin: 0 0 1.15rem; text-wrap: pretty; }
strong, b { font-weight: 700; }
small { color: var(--kas-muted-foreground); font-size: .875em; }
mark { padding: .08em .28em; background: var(--kas-highlight); color: var(--kas-contrast-background); border-radius: 4px; }
abbr[title] { text-decoration: underline dotted var(--kas-action); text-underline-offset: .2em; cursor: help; }
del { color: var(--kas-action-strong); }
ins { color: var(--kas-support); text-decoration: underline wavy; text-underline-offset: .18em; }
sub, sup { position: relative; font-size: .72em; line-height: 0; }
q { quotes: "“" "”" "‘" "’"; }
address { color: var(--kas-muted-foreground); font-style: normal; }

a { color: var(--kas-action-strong); font-weight: 700; text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; transition: color var(--kas-motion-duration), background-color var(--kas-motion-duration); }
a:hover { color: var(--kas-foreground); background: var(--kas-highlight-subtle); }
a:visited { color: var(--kas-visited-link); }

hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--kas-border); }

ul, ol { margin: 0 0 1.35rem; padding-left: 1.5rem; }
li { padding-left: .3rem; }
li + li { margin-top: .35rem; }
ul li::marker { color: var(--kas-action); }
ol li::marker { color: var(--kas-support); font-weight: 700; }
dl { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; margin: 1.4rem 0; }
dt, dd { margin: 0; padding: .8rem 0; border-top: 1px solid var(--kas-border); }
dt { color: var(--kas-heading-foreground); font-weight: 700; }
dd { color: var(--kas-muted-foreground); }

blockquote { margin: 2rem 0; padding: 1rem 0 1rem 1.5rem; border-left: 4px solid var(--kas-action); color: var(--kas-heading-foreground); font-size: clamp(1.2rem, 2vw, 1.6rem); }
blockquote p { margin-bottom: .65rem; }
blockquote footer { color: var(--kas-muted-foreground); font-size: .75em; }

code, kbd, samp, pre { font-family: var(--kas-font-mono); }
code, kbd, samp { font-size: .9em; }
code { padding: .15em .38em; background: var(--kas-surface-raised); border-radius: 5px; }
kbd { padding: .18em .45em; border: 1px solid var(--kas-border); border-bottom-width: 3px; border-radius: 5px; background: var(--kas-surface); color: var(--kas-heading-foreground); box-shadow: var(--kas-elevation-subtle); }
pre { overflow: auto; margin: 1.5rem 0; padding: 1.2rem 1.35rem; background: var(--kas-contrast-background); color: var(--kas-contrast-foreground); border-radius: var(--kas-radius); line-height: 1.6; }
pre code { padding: 0; background: transparent; color: inherit; }

img, svg, video, canvas, iframe, embed, object { display: block; max-width: 100%; }
img, video { height: auto; border-radius: var(--kas-radius); }
svg { width: 100%; height: auto; }
canvas, iframe, embed, object { width: 100%; border: 1px solid var(--kas-border); border-radius: var(--kas-radius); background: var(--kas-surface-raised); }
iframe { min-height: 9rem; }
canvas { height: auto; }
audio { width: 100%; margin: .75rem 0; }
figure { margin: 1.75rem 0; }
figure figcaption { margin-top: .7rem; color: var(--kas-muted-foreground); font-size: .9rem; }
picture { display: block; }
picture img { width: 100%; }

table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; }
caption { margin-bottom: .7rem; color: var(--kas-muted-foreground); font-weight: 700; text-align: left; }
th, td { padding: .8rem .7rem; border-bottom: 1px solid var(--kas-border); text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--kas-heading-foreground); color: var(--kas-heading-foreground); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
tbody tr:hover { background: var(--kas-surface-raised); }
tfoot th, tfoot td { border-top: 2px solid var(--kas-heading-foreground); border-bottom: 0; }

form { margin: 1.5rem 0; }
fieldset { min-width: 0; margin: 0 0 1.4rem; padding: 1.25rem; border: 1px solid var(--kas-border); border-radius: var(--kas-radius); background: var(--kas-surface); }
legend { padding: 0 .5rem; color: var(--kas-heading-foreground); font-family: var(--kas-font-display); font-size: 1.15rem; font-weight: 700; }
label { display: block; margin-bottom: .35rem; color: var(--kas-heading-foreground); font-weight: 600; }
fieldset > p > label:not(:first-child), fieldset > p > span + label { display: inline-flex; width: auto; margin: .4rem 1.25rem .4rem 0; align-items: center; gap: .45rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; max-width: 34rem; padding: .72rem .8rem; border: 1px solid var(--kas-border); border-radius: var(--kas-radius-small); background: var(--kas-surface); color: var(--kas-foreground); transition: border-color var(--kas-motion-duration), box-shadow var(--kas-motion-duration), background-color var(--kas-motion-duration); }
input:hover, select:hover, textarea:hover { border-color: var(--kas-muted-foreground); }
input::placeholder, textarea::placeholder { color: var(--kas-muted-foreground); opacity: .8; }
textarea { min-height: 8rem; resize: vertical; }
[fieldset] > p > small { display: block; margin-top: .55rem; }
select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
  appearance: none;
  padding-right: 2.75rem;
  background-color: var(--kas-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--kas-muted-foreground) 50%), linear-gradient(135deg, var(--kas-muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
  background-repeat: no-repeat;
  background-size: .35rem .35rem, .35rem .35rem;
}
@supports (appearance: base-select) and selector(::picker(select)) {
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]),
  select:not([multiple]):not([size])::picker(select), select[size="1"]:not([multiple])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
    padding-right: .8rem;
    background-image: none;
  }
  select:not([multiple]):not([size])::picker(select), select[size="1"]:not([multiple])::picker(select) {
    min-width: anchor-size(width);
    max-height: 18rem;
    overflow: auto;
    margin-block-start: .4rem;
    padding: .35rem;
    border: 1px solid var(--kas-border);
    border-radius: var(--kas-radius-small);
    background: var(--kas-surface);
    box-shadow: var(--kas-elevation-raised);
    color: var(--kas-foreground);
  }
  select:not([multiple]):not([size])::picker-icon, select[size="1"]:not([multiple])::picker-icon {
    color: var(--kas-muted-foreground);
    transition: rotate var(--kas-motion-duration);
  }
  select:not([multiple]):not([size]):open::picker-icon, select[size="1"]:not([multiple]):open::picker-icon { rotate: 180deg; }
  select:not([multiple]):not([size]) option, select[size="1"]:not([multiple]) option {
    padding: .65rem .75rem;
    border-radius: calc(var(--kas-radius-small) - 3px);
    background: var(--kas-surface);
    color: var(--kas-foreground);
  }
  select:not([multiple]):not([size]) option:hover, select:not([multiple]):not([size]) option:focus,
  select[size="1"]:not([multiple]) option:hover, select[size="1"]:not([multiple]) option:focus { background: var(--kas-action-subtle); color: var(--kas-heading-foreground); }
  select:not([multiple]):not([size]) option:checked, select[size="1"]:not([multiple]) option:checked { font-weight: 700; }
}
select[multiple], select[size]:not([size="1"]) { min-height: 8rem; padding: .35rem; }
option, optgroup { padding: .25rem; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--kas-action); }
input[type="checkbox"], input[type="radio"] { display: inline-block; vertical-align: middle; }
input[type="checkbox"][role="switch"] { width: 2.8rem; height: 1.55rem; appearance: none; border: 0; border-radius: 99px; background: var(--kas-border); position: relative; cursor: pointer; }
input[type="checkbox"][role="switch"]::before { content: ""; position: absolute; top: .22rem; left: .22rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--kas-surface); transition: transform var(--kas-motion-duration); }
input[type="checkbox"][role="switch"]:checked { background: var(--kas-support); }
input[type="checkbox"][role="switch"]:checked::before { transform: translateX(1.25rem); }
input[type="range"] { padding: .3rem 0; border: 0; accent-color: var(--kas-action); }
input[type="color"] { width: 4rem; min-height: 2.8rem; padding: .25rem; }
input[type="file"] { padding: .45rem; }
input[type="file"]::file-selector-button { margin-right: .7rem; padding: .45rem .65rem; border: 0; border-radius: 6px; background: var(--kas-contrast-background); color: var(--kas-contrast-foreground); font: inherit; cursor: pointer; }
input[type="image"] { width: 2.8rem; max-width: none; height: 2.8rem; padding: 0; border: 0; border-radius: 50%; }
input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; opacity: .55; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--kas-focus-ring); outline-offset: 3px; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--kas-action-strong); box-shadow: 0 0 0 3px var(--kas-action-subtle); }
output { color: var(--kas-action-strong); font-weight: 700; }

button, input[type="button"], input[type="submit"], input[type="reset"] { display: inline-flex; width: auto; align-items: center; justify-content: center; gap: .4rem; min-height: 2.8rem; padding: .65rem 1rem; border: 1px solid var(--kas-contrast-background); border-radius: 999px; background: var(--kas-contrast-background); color: var(--kas-contrast-foreground); font-weight: 700; line-height: 1.2; vertical-align: middle; cursor: pointer; transition: transform var(--kas-motion-duration), background-color var(--kas-motion-duration), color var(--kas-motion-duration); }
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { background: var(--kas-action); border-color: var(--kas-action); color: var(--kas-contrast-background); transform: translateY(-2px); }
button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active { transform: translateY(0); }
button[type="button"], input[type="reset"] { border-color: var(--kas-border); background: transparent; color: var(--kas-foreground); }
button[type="button"]:hover, input[type="reset"]:hover { color: var(--kas-contrast-background); background: var(--kas-highlight); border-color: var(--kas-highlight); }

progress, meter { display: block; width: 100%; height: .8rem; margin: .35rem 0 1.2rem; accent-color: var(--kas-support); }
progress { appearance: none; border: 0; border-radius: 99px; background: var(--kas-surface-raised); }
progress::-webkit-progress-bar { background: var(--kas-surface-raised); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--kas-support); border-radius: 99px; }
progress::-moz-progress-bar { background: var(--kas-support); border-radius: 99px; }
progress:indeterminate::-webkit-progress-value { background: linear-gradient(90deg, transparent, var(--kas-action), transparent); background-size: 200% 100%; animation: kas-progress 1.2s infinite linear; }
meter { border-radius: 99px; }
meter::-webkit-meter-bar { background: var(--kas-surface-raised); border: 0; border-radius: 99px; }
meter::-webkit-meter-optimum-value { background: var(--kas-support); border-radius: 99px; }
meter::-webkit-meter-suboptimum-value { background: var(--kas-highlight); border-radius: 99px; }
meter::-webkit-meter-even-less-good-value { background: var(--kas-action); border-radius: 99px; }
@keyframes kas-progress { to { background-position: -200% 0; } }

details { margin: 1rem 0; border: 1px solid var(--kas-border); border-radius: var(--kas-radius-small); background: var(--kas-surface); }
summary { padding: .85rem 1rem; color: var(--kas-heading-foreground); font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: inline-grid; width: 1.4rem; height: 1.4rem; margin-right: .45rem; place-items: center; border-radius: 50%; background: var(--kas-action-subtle); color: var(--kas-action-strong); align-content: center; justify-content: space-evenly; }
details[open] summary::before { content: "−"; }
details > :not(summary) { margin-right: 1rem; margin-left: 1rem; }
details > :last-child { margin-bottom: 1rem; }

dialog { width: min(34rem, calc(100% - 2rem)); padding: 1.5rem; border: 1px solid var(--kas-border); border-radius: var(--kas-radius); background: var(--kas-surface); color: var(--kas-foreground); box-shadow: var(--kas-elevation-raised); }
dialog::backdrop { background: rgb(17 21 34 / .6); backdrop-filter: blur(4px); }
dialog h3 { margin-top: 0; }
[popover] { position: fixed; inset: 0; max-width: min(22rem, calc(100% - 2rem)); margin: auto; padding: 1.2rem; border: 1px solid var(--kas-border); border-radius: var(--kas-radius); background: var(--kas-surface); color: var(--kas-foreground); box-shadow: var(--kas-elevation-raised); overscroll-behavior: contain; }
[popover]:not(:popover-open) { display: none; }
[popover]:popover-open { display: block; z-index: 10; }
[popover] h3 { margin-top: 0; }

article { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--kas-border); border-radius: var(--kas-radius); background: var(--kas-surface-raised); }
article > header { margin-bottom: 1rem; }
article > header h3 { margin-top: 0; }
article > footer { color: var(--kas-muted-foreground); }
form > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

@media (max-width: 700px) {
  body { padding-top: 1rem; }
  h1 { font-size: clamp(3rem, 16vw, 5rem); }
  dl { display: block; }
  dt { padding-bottom: .2rem; border-bottom: 0; }
  dd { padding-top: .2rem; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  fieldset { padding: 1rem; }
}

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

@media print {
  *, *::before, *::after { background: transparent !important; box-shadow: none !important; color: #000 !important; }
  body { max-width: none; padding: 0; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  button, input, select, textarea, dialog, [popover] { display: none !important; }
}