/* Generated from design/tokens.json. Do not edit. */
:root {
  color-scheme: light;
  --color-bg: #fafbfc;
  --color-surface: #f1f3f5;
  --color-surface-raised: #ffffff;
  --color-surface-hover: #e7eaee;
  --color-border: #d9dee4;
  --color-text: #14171c;
  --color-text-muted: #4a5260;
  --color-text-subtle: #667085;
  --color-accent: #0b7a6f;
  --color-accent-hover: #096a61;
  --color-on-accent: #ffffff;
  --color-focus-ring: #0e8a7e;
  --color-danger: #c4311f;
  --color-success: #1a7f4b;
  --color-warning: #a15c07;
  --color-player-bar: #ffffff;
  --color-overlay: #14171c66;
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 23, 28, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 23, 28, 0.14);

  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 360ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0f1115;
    --color-surface: #16191f;
    --color-surface-raised: #1d2128;
    --color-surface-hover: #262b34;
    --color-border: #2c323c;
    --color-text: #eceff4;
    --color-text-muted: #a5aebb;
    --color-text-subtle: #818b99;
    --color-accent: #2fb8a9;
    --color-accent-hover: #4ccabc;
    --color-on-accent: #04201c;
    --color-focus-ring: #4ccabc;
    --color-danger: #f0766a;
    --color-success: #4cc38a;
    --color-warning: #e5a643;
    --color-player-bar: #13161b;
    --color-overlay: #000000a6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f1115;
  --color-surface: #16191f;
  --color-surface-raised: #1d2128;
  --color-surface-hover: #262b34;
  --color-border: #2c323c;
  --color-text: #eceff4;
  --color-text-muted: #a5aebb;
  --color-text-subtle: #818b99;
  --color-accent: #2fb8a9;
  --color-accent-hover: #4ccabc;
  --color-on-accent: #04201c;
  --color-focus-ring: #4ccabc;
  --color-danger: #f0766a;
  --color-success: #4cc38a;
  --color-warning: #e5a643;
  --color-player-bar: #13161b;
  --color-overlay: #000000a6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60);
}

/* ---- Site styles ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-md);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--color-accent)}
a:hover{color:var(--color-accent-hover)}
:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px;border-radius:var(--radius-sm)}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--space-16)}
.skip{position:absolute;left:-999px;top:0;background:var(--color-accent);color:var(--color-on-accent);padding:var(--space-8) var(--space-16);z-index:10}
.skip:focus{left:var(--space-8);top:var(--space-8)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-16) 0}
.brand{display:flex;align-items:center;gap:var(--space-12);font-weight:var(--font-weight-bold);font-size:var(--font-size-xl);color:var(--color-text);text-decoration:none}
.brand img{width:40px;height:40px;border-radius:var(--radius-md)}
.toggle{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-full);width:44px;height:44px;font-size:20px;cursor:pointer;line-height:1}
.toggle:hover{background:var(--color-surface-hover)}
.hero{text-align:center;padding:var(--space-48) 0 var(--space-32);background:radial-gradient(ellipse at top,color-mix(in srgb,var(--color-accent) 18%,transparent),transparent 70%)}
.hero img.cat{width:128px;height:128px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
h1{font-size:clamp(2rem,8vw,3.75rem);line-height:1.1;margin:var(--space-24) 0 var(--space-16);font-weight:var(--font-weight-bold);overflow-wrap:break-word}
.lede{color:var(--color-text-muted);font-size:var(--font-size-lg);max-width:36rem;margin:0 auto var(--space-32)}
.downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12)}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px;min-height:56px;padding:var(--space-8) var(--space-24);border-radius:var(--radius-lg);background:var(--color-accent);color:var(--color-on-accent);font-weight:var(--font-weight-semibold);text-decoration:none;border:2px solid var(--color-accent)}
.btn:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
.btn small{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs)}
.btn.soon{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border);cursor:default}
.btn.soon:hover{background:var(--color-surface-hover);color:var(--color-text)}
.btn.soon small{color:var(--color-text-muted)}
.secondary{margin-top:var(--space-24)}
.secondary a{font-weight:var(--font-weight-medium)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-16);padding:var(--space-32) 0}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-24)}
.card h2{margin:0 0 var(--space-8);font-size:var(--font-size-xl)}
.card p{margin:0;color:var(--color-text-muted)}
.privacy{background:var(--color-surface-raised);border-color:var(--color-accent)}
.privacy ul{margin:var(--space-12) 0 0;padding-left:var(--space-24);color:var(--color-text-muted)}
.community{text-align:center;padding:var(--space-32) 0}
.community h2{font-size:var(--font-size-2xl);margin:0 0 var(--space-16)}
.community .links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12)}
.community .btn{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border);flex-direction:row}
.community .btn:hover{background:var(--color-surface-hover);color:var(--color-text)}
footer{border-top:1px solid var(--color-border);padding:var(--space-24) 0;text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.prose{max-width:42rem;padding-bottom:var(--space-32)}
.prose h2{font-size:var(--font-size-xl);margin:var(--space-24) 0 var(--space-8)}
.prose p,.prose li{color:var(--color-text-muted)}
.prose ul{padding-left:var(--space-24)}