:root {
  --ink:        #141210;
  --paper:      #f2eee4;
  --white:      #ffffff;
  --red:        #d9362a;
  --gold:       #dda53c;
  --blue:       #3c6379;
  --ink-88:     rgba(20, 18, 16, 0.88);
  --ink-64:     rgba(20, 18, 16, 0.64);
  --ink-48:     rgba(20, 18, 16, 0.48);
  --ink-32:     rgba(20, 18, 16, 0.32);
  --ink-16:     rgba(20, 18, 16, 0.16);
  --ink-08:     rgba(20, 18, 16, 0.08);
  --ink-05:     rgba(20, 18, 16, 0.05);
  --paper-72:   rgba(242, 238, 228, 0.72);
  --paper-52:   rgba(242, 238, 228, 0.52);
  --paper-32:   rgba(242, 238, 228, 0.32);
  --paper-14:   rgba(242, 238, 228, 0.14);
  --paper-08:   rgba(242, 238, 228, 0.08);
  --bg:              var(--paper);
  --surface:         var(--paper);
  --surface-raised:  var(--white);
  --surface-pop:     var(--white);
  --surface-chip:    var(--ink-05);
  --surface-sunken:  var(--ink-05);
  --surface-inverse: var(--ink);

  --text:            var(--ink);
  --text-muted:      var(--ink-64);
  --text-faint:      var(--ink-48);
  --text-inverse:    var(--paper);

  --border:          var(--ink-16);
  --border-strong:   var(--ink-32);

  --accent-alert:    var(--red);
  --accent-pin:      var(--gold);
  --accent-action:   var(--blue);
  --role-owner:          #a67c14;
  --role-mod:            var(--blue);
  --mark-subscriber:     var(--text);
  --mark-subscriber-ink: var(--text-inverse);
  --mark-official:       var(--accent-action);
  --mark-official-ink:   var(--text-inverse);
  --btn-fill:        var(--ink);
  --btn-fill-text:   var(--paper);
  --btn-fill-hover:  #000000;
  --btn-ghost-hover: var(--ink-08);
  --btn-support-fill:       var(--gold);
  --btn-support-fill-hover: #c9922e;
  --btn-support-text:       var(--ink);
  --surface-selected:       rgba(60, 99, 121, 0.14);
  --surface-selected-hover: rgba(60, 99, 121, 0.07);
  --selection-bg:  var(--gold);
  --selection-fg:  var(--ink);
  --rail-bg:         #f2eee4;
  --rail-tile:       #ffffff;
  --rail-tile-hover: #efeadf;
  --rail-fg:         var(--ink);
  --rail-indicator:  var(--ink);
  --rail-divider:    rgba(20, 18, 16, 0.08);

  --status-online:   #46a35e;
  --surface-tint-blue: rgba(60, 99, 121, 0.13);
  --surface-tint-gold: rgba(221, 165, 60, 0.16);
  --surface-band: #dbdcd6;
  --badge-bg-pin:    rgba(221, 165, 60, 0.16);
  --badge-bg-action: rgba(60, 99, 121, 0.14);
  --badge-bg-alert:  rgba(217, 54, 42, 0.14);
  --badge-fg-alert:  #b02a20;

  --focus-ring:      var(--blue);
  --scrim:           rgba(20, 18, 16, 0.55);
  --scroll-thumb:    var(--ink-32);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:              var(--ink);
  --surface:         var(--ink);
  --surface-raised:  #1f1c19;
  --surface-pop:     #2b2721;
  --surface-chip:    #2e2a24;
  --surface-sunken:  #0d0c0b;
  --surface-inverse: var(--paper);

  --text:            var(--paper);
  --text-muted:      var(--paper-72);
  --text-faint:      var(--paper-52);
  --text-inverse:    var(--ink);
  --accent-action:   #7fb0c9;
  --focus-ring:      #7fb0c9;
  --accent-pin:      #e9c46a;
  --role-owner:      #e9c46a;
  --role-mod:        #7fb0c9;

  --border:          var(--paper-14);
  --border-strong:   var(--paper-32);

  --btn-fill:        var(--paper);
  --btn-fill-text:   var(--ink);
  --btn-fill-hover:  #ffffff;
  --btn-ghost-hover: var(--paper-08);
  --btn-support-fill:       #e9c46a;
  --btn-support-fill-hover: #f2d488;
  --btn-support-text:       var(--ink);
  --surface-selected:       rgba(124, 167, 189, 0.22);
  --surface-selected-hover: rgba(124, 167, 189, 0.11);
  --selection-bg:  #e9c46a;
  --selection-fg:  var(--ink);
  --rail-bg:         #1c1814;
  --rail-tile:       #2e2921;
  --rail-tile-hover: #3a342b;
  --rail-fg:         var(--paper);
  --rail-indicator:  var(--paper);
  --rail-divider:    rgba(242, 238, 228, 0.12);

  --status-online:   #52b06b;
  --surface-tint-blue: #294853;
  --surface-tint-gold: #766324;
  --badge-bg-pin:    rgba(233, 196, 106, 0.26);
  --badge-bg-action: rgba(127, 176, 201, 0.26);
  --badge-bg-alert:  rgba(232, 119, 107, 0.24);
  --badge-fg-alert:  #e8776b;

  --scroll-thumb:    var(--paper-32);
  color-scheme: dark;
}

:root {
  --font-logo: 'Pacifico', cursive;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* @kind font */
  --fw-body:     500;   /* @kind font */
  --fw-caption:  600;   /* @kind font */
  --fw-heading:  700;   /* @kind font */
  --fw-display:  800;   /* @kind font */
  --fs-display-xl: 56px;
  --fs-display:    40px;
  --fs-h1:         30px;
  --fs-h2:         24px;
  --fs-h3:         19px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --lh-tight:   1.08;   /* @kind other */
  --lh-snug:    1.25;   /* @kind other */
  --lh-body:    1.55;   /* @kind other */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0em;
  --ls-caption:  0.08em;
  --text-display-font:   var(--font-sans);
  --text-display-weight: var(--fw-display);
  --text-heading-weight: var(--fw-heading);
  --text-body-weight:    var(--fw-body);
  --text-caption-weight: var(--fw-caption);
}
@media (max-width: 640px) {
  :root {
    --fs-display-xl: 36px;
    --fs-display:    30px;
    --fs-h1:         26px;
    --fs-h2:         21px;
  }
}

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(20, 18, 16, 0.06);
  --shadow-card:  0 1px 3px rgba(20, 18, 16, 0.07), 0 6px 20px rgba(20, 18, 16, 0.05);
  --shadow-pop:   0 8px 32px rgba(20, 18, 16, 0.14);
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   340ms;   /* @kind other */
  --container:      1120px;
  --sidebar-width:  248px;
  --page-pad-x:     40px;
  --touch-target:   44px;
}
@media (max-width: 640px) {
  :root {
    --page-pad-x: 16px;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0; }
a {
  color: var(--accent-action);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.72; }
.tb-caption {
  font-weight: var(--fw-caption);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-faint);
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}
.tb-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.tb-scroll:hover,
.tb-scroll:focus-within {
  scrollbar-color: var(--scroll-thumb) transparent;
}
.tb-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tb-scroll::-webkit-scrollbar-track { background: transparent; }
.tb-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.tb-scroll:hover::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
.tb-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.tb-noscrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
a { color: var(--text); }
a:hover { color: var(--text); }
.mk-nav-scrolled { background: var(--surface-raised); box-shadow: var(--shadow-card); }

.mk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.mk-btn:hover { background: var(--btn-fill-hover); color: var(--btn-fill-text); opacity: 1; }
.mk-btn:active { transform: scale(0.98); }
.mk-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
  border-radius: inherit;
}
.mk-btn-lg { padding: 13px 26px; font-size: 16px; }

.mk-link { font-size: var(--fs-body-sm); font-weight: var(--fw-caption); color: var(--text); }
.mk-link:hover { text-decoration: underline; }

.mk-footer-link { font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text-muted); }
.mk-footer-link:hover { color: var(--text); }

@media (max-width: 640px) {
  .mk-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .mk-wrap { flex-wrap: wrap !important; row-gap: 12px; }
}
.ab-t-hero { font-size: 84px; }
.ab-t-sect { font-size: 60px; }
@media (max-width: 640px) {
  .ab-t-hero { font-size: 42px; }
  .ab-t-sect { font-size: 32px; }
}
@media (max-width: 1100px) { .ab-hero-art { display: none; } }
@media (min-width: 1101px) { .ab-hero { padding-right: 520px !important; } }
.ab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 36px;
  margin-top: 36px;
  border: none;
  border-radius: 999px;
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  cursor: pointer;
}
.ab-cta:hover { background: #000000; color: var(--btn-fill-text); opacity: 1; }
.tb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; display: block; }
.tb-range:focus { outline: none; }
.tb-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: transparent; }
.tb-range::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.tb-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 999px; background: var(--text); border: 3px solid var(--surface-raised); box-shadow: var(--shadow-sm); }
.tb-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--text); border: 3px solid var(--surface-raised); box-shadow: var(--shadow-sm); }
.tb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 45%, transparent); }
.tb-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 45%, transparent); }
@media (max-width: 1000px) {
  .ab-money { grid-template-columns: 1fr !important; }
  .ab-feat { grid-template-columns: 1fr !important; }
}
@media (min-width: 1001px) {
  .ab-flip > .ab-media { order: -1; }
}
@media (max-width: 640px) {
  .ab-types { grid-template-columns: 1fr !important; gap: 64px !important; }
  .ab-hero { padding-top: 128px !important; }
  .ab-sect { margin-top: 100px !important; }
}
.lg-prose h2 {
  margin: 36px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 26px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
}
.lg-prose h3 {
  margin: 26px 0 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
}
.lg-prose p, .lg-prose ul, .lg-prose ol { margin: 12px 0 0; font-size: var(--fs-body); line-height: 1.65; text-wrap: pretty; }
.lg-prose ul, .lg-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.lg-prose ul { list-style: disc; }
.lg-prose ol { list-style: decimal; }
.lg-prose strong { font-weight: var(--fw-caption); }
.lg-prose a { font-weight: var(--fw-caption); }