/* Creative Yadley Design System 2.3.0 — shared primitives */
:root {
  color-scheme: dark;
  --cy-brand-obsidian: #08090B;
  --cy-brand-surface-1: #111317;
  --cy-brand-surface-2: #16191F;
  --cy-brand-surface-3: #1E222A;
  --cy-brand-rail-dark: #0D0F14;
  --cy-brand-canvas-warm: #F4F5F2;
  --cy-brand-slate: #5E6463;
  --cy-brand-silver: #C4C6C1;
  --cy-brand-lime: #AFE139;
  --cy-brand-white: #FFFFFF;

  --cy-font-display: "Plus Jakarta Sans", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cy-font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cy-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --cy-weight-regular: 400;
  --cy-weight-medium: 500;
  --cy-weight-semibold: 600;
  --cy-weight-bold: 700;

  --cy-text-micro: 0.75rem;
  --cy-text-caption: 0.875rem;
  --cy-text-compact: 1rem;
  --cy-text-body: 1.125rem;
  --cy-text-intro: 1.3125rem;
  --cy-heading-4: 1.125rem;
  --cy-heading-3: 1.375rem;
  --cy-heading-2: clamp(1.75rem, 3vw, 2rem);
  --cy-heading-1: clamp(2.5rem, 4vw, 3rem);
  --cy-display-l: clamp(3rem, 6vw, 4rem);
  --cy-display-xl: clamp(4rem, 8vw, 6rem);

  --cy-rail-width: 256px;

  --cy-space-1: 4px; --cy-space-2: 8px; --cy-space-3: 12px;
  --cy-space-4: 16px; --cy-space-5: 20px; --cy-space-6: 24px;
  --cy-space-8: 32px; --cy-space-10: 40px; --cy-space-12: 48px;
  --cy-space-16: 64px; --cy-space-20: 80px; --cy-space-24: 96px;

  --cy-radius-sm: 8px; --cy-radius-md: 12px; --cy-radius-lg: 16px;
  --cy-radius-xl: 24px; --cy-radius-pill: 999px;

  --cy-border-width: 1px;
  --cy-border-width-emphasis: 2px;
  --cy-focus-width: 3px;
  --cy-focus-offset: 3px;

  --cy-duration-fast: 140ms; --cy-duration-normal: 220ms; --cy-duration-slow: 360ms;
  --cy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cy-content-max: 1200px;
}

* { box-sizing: border-box; }
html { font-family: var(--cy-font-sans); text-rendering: optimizeLegibility; }
body {
  margin: 0; background: var(--cy-bg); color: var(--cy-text);
  font: var(--cy-weight-regular) var(--cy-text-body)/1.55 var(--cy-font-sans);
}
p { margin: 0 0 1em; }
.cy-intro {
  font: 400 var(--cy-text-intro)/1.381 var(--cy-font-sans);
  letter-spacing: 0.011em;
}
:where(h1,h2,h3,h4,.cy-display) {
  font-family: var(--cy-font-display); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
:where(button,input,select,textarea) { font: inherit; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: var(--cy-focus-width) solid var(--cy-focus);
  outline-offset: var(--cy-focus-offset);
}
.cy-container { width: min(100% - 2rem, var(--cy-content-max)); margin-inline: auto; }
.cy-card {
  color: var(--cy-text); background: var(--cy-surface-1);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg); box-shadow: var(--cy-shadow-1);
}
.cy-divider { height: 1px; border: 0; background: var(--cy-border); }
.cy-divider--strong { height: 2px; background: var(--cy-border-strong); }
.cy-button {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  gap: 8px; padding: 0 24px; border: 1px solid transparent;
  border-radius: var(--cy-radius-pill); font-size: 16px; font-weight: 600;
  line-height: 1; cursor: pointer;
  transition: background-color 220ms var(--cy-ease-out), color 220ms var(--cy-ease-out),
    border-color 220ms var(--cy-ease-out), transform 140ms var(--cy-ease-out), box-shadow 220ms var(--cy-ease-out);
}
.cy-button:active { transform: translateY(1px); }
.cy-button:disabled { cursor: not-allowed; opacity: .55; }
.cy-button--primary {
  color: var(--cy-action-text); background: var(--cy-action); border-color: var(--cy-action);
  box-shadow: 0 0 16px var(--cy-action-glow);
}
.cy-button--primary:hover:not(:disabled) {
  background: var(--cy-action-hover); border-color: var(--cy-action-hover);
  box-shadow: 0 0 24px var(--cy-action-glow);
}
.cy-button--secondary { color: var(--cy-text); background: var(--cy-surface-2); border-color: var(--cy-border-strong); }
.cy-button--secondary:hover:not(:disabled) { background: var(--cy-surface-hover); }
.cy-input {
  width: 100%; min-height: 52px; padding: 12px 24px; color: var(--cy-text);
  background: var(--cy-field); border: 1px solid var(--cy-border-strong);
  border-radius: var(--cy-radius-pill); font-size: 16px;
}
.cy-input::placeholder { color: var(--cy-text-muted); }
.cy-input[aria-invalid="true"] { border: 2px solid var(--cy-danger); }
.cy-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.cy-badge--success { color: var(--cy-success-text); background: var(--cy-success-bg); border-color: var(--cy-success-border); }
.cy-badge--info { color: var(--cy-info-text); background: var(--cy-info-bg); border-color: var(--cy-info-border); }
.cy-badge--warning { color: var(--cy-warning-text); background: var(--cy-warning-bg); border-color: var(--cy-warning-border); }
.cy-badge--danger { color: var(--cy-danger-text); background: var(--cy-danger-bg); border-color: var(--cy-danger-border); }
.cy-badge--in-progress { color: var(--cy-in-progress-text); background: var(--cy-in-progress-bg); border-color: var(--cy-in-progress-border); }
.cy-badge--neutral { color: var(--cy-neutral-text); background: var(--cy-neutral-bg); border-color: var(--cy-neutral-border); }

/* Selective Low-Contrast Micro-Grid */
.cy-bg-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Creative Yadley Design System 2.3.0 — Dark theme
 * Obsidian canvas (#08090B), elevated surfaces (#111317, #16191F, #1E222A),
 * 11% white hairlines, lime-tinted borders, 256px rail (#0D0F14), and signature lime accent. */
:root, [data-cy-theme="dark"] {
  color-scheme: dark;
  --cy-bg: #08090B;
  --cy-bg-deep: #111317;
  --cy-rail-bg: #0D0F14;
  --cy-surface-1: #111317;
  --cy-surface-2: #16191F;
  --cy-surface-3: #1E222A;
  --cy-surface-hover: #1E222A;
  --cy-field: #16191F;
  --cy-text: #FFFFFF;
  --cy-text-secondary: #C4C6C1;
  --cy-text-muted: #9BA09D;
  --cy-text-disabled: #6E7472;
  --cy-border: rgba(255, 255, 255, 0.11);
  --cy-border-strong: rgba(255, 255, 255, 0.22);
  --cy-border-lime: rgba(175, 225, 57, 0.24);
  --cy-action: #AFE139;
  --cy-action-hover: #C4F052;
  --cy-action-text: #0B0D0E;
  --cy-action-glow: rgba(175, 225, 57, 0.45);
  --cy-focus: #AFE139;
  --cy-link: #FFFFFF;
  --cy-shadow-1: 0 3px 16px rgba(0, 0, 0, 0.36);
  --cy-shadow-2: 0 18px 48px rgba(0, 0, 0, 0.55);
  --cy-danger: #E06A6A;
  --cy-success-text: #4ADE80; --cy-success-bg: #123B2B; --cy-success-border: rgba(22, 134, 91, 0.35);
  --cy-info-text: #60A5FA; --cy-info-bg: #172D49; --cy-info-border: rgba(37, 99, 166, 0.35);
  --cy-warning-text: #FBBF24; --cy-warning-bg: #422F12; --cy-warning-border: rgba(217, 154, 36, 0.35);
  --cy-danger-text: #F87171; --cy-danger-bg: #431C24; --cy-danger-border: rgba(196, 61, 77, 0.35);
  --cy-in-progress-text: #A78BFA; --cy-in-progress-bg: #2C2144; --cy-in-progress-border: rgba(118, 83, 181, 0.35);
  --cy-neutral-text: #9CA3AF; --cy-neutral-bg: #2C3231; --cy-neutral-border: rgba(100, 112, 109, 0.35);
}

/* Creative Yadley Design System 2.3.0 — Light theme
 * Warm architectural canvas (#F4F5F2), white surfaces (#FFFFFF), soft surfaces (#ECEEE9, #E2E5DF),
 * architectural borders (#D2D6D0, #C6CBC4), and signature lime accent. */
[data-cy-theme="light"] {
  color-scheme: light;
  --cy-bg: #F4F5F2;
  --cy-bg-deep: #FFFFFF;
  --cy-rail-bg: #FFFFFF;
  --cy-surface-1: #FFFFFF;
  --cy-surface-2: #ECEEE9;
  --cy-surface-3: #E2E5DF;
  --cy-surface-hover: #E2E5DF;
  --cy-field: #F4F5F2;
  --cy-text: #111214;
  --cy-text-secondary: #434745;
  --cy-text-muted: #5E6463;
  --cy-text-disabled: #8A8F8C;
  --cy-border: #D2D6D0;
  --cy-border-strong: #C6CBC4;
  --cy-border-lime: rgba(175, 225, 57, 0.5);
  --cy-action: #AFE139;
  --cy-action-hover: #9ED128;
  --cy-action-text: #0B0D0E;
  --cy-action-glow: rgba(175, 225, 57, 0.55);
  --cy-focus: #365D0A;
  --cy-link: #111214;
  --cy-shadow-1: 0 3px 16px rgba(17, 18, 20, 0.06);
  --cy-shadow-2: 0 18px 48px rgba(17, 18, 20, 0.12);
  --cy-danger: #B83232;
  --cy-success-text: #16865B; --cy-success-bg: #E8F5EE; --cy-success-border: rgba(22, 134, 91, 0.35);
  --cy-info-text: #2563A6; --cy-info-bg: #EAF2FC; --cy-info-border: rgba(37, 99, 166, 0.35);
  --cy-warning-text: #B47B10; --cy-warning-bg: #FFF4D6; --cy-warning-border: rgba(217, 154, 36, 0.35);
  --cy-danger-text: #C43D4D; --cy-danger-bg: #FCEBED; --cy-danger-border: rgba(196, 61, 77, 0.35);
  --cy-in-progress-text: #7653B5; --cy-in-progress-bg: #F1ECFA; --cy-in-progress-border: rgba(118, 83, 181, 0.35);
  --cy-neutral-text: #64706D; --cy-neutral-bg: #EEF0EF; --cy-neutral-border: rgba(100, 112, 109, 0.35);
}

:root {
  --site-gutter: clamp(1.25rem, 4vw, 4rem);
  --site-reading-width: 48rem;
  --site-grid: rgb(255 255 255 / 2%);
}
[data-cy-theme="light"] { --site-grid: rgb(8 9 11 / 2%); }
[hidden] { display: none !important; }
a { color: var(--cy-link); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; }
h1 { font-size: var(--cy-heading-1); }
h2 { font-size: var(--cy-heading-2); }
h3 { font-size: var(--cy-heading-3); }
h4 { font-size: var(--cy-heading-4); }
img { display: block; max-width: 100%; }
button { cursor: pointer; }
p, li, td, th { overflow-wrap: anywhere; }
.skip-link {
  position: fixed;
  z-index: 5;
  top: 16px;
  left: 16px;
  transform: translateY(-200%);
  padding: 12px 20px;
  color: var(--cy-text);
  background: var(--cy-surface-1);
  border-radius: var(--cy-radius-md);
}
.skip-link:focus { transform: none; }
.layout { min-height: 100vh; }
.rail {
  background: var(--cy-rail-bg);
  padding: 24px 10px;
  display: none;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--cy-text);
  font: 700 1rem/1.15 var(--cy-font-display);
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand__mark { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: contain; }
.brand__mark--light, [data-cy-theme="light"] .brand__mark--dark { display: none; }
[data-cy-theme="light"] .brand__mark--light { display: block; }
.rail .brand { padding: 0 10px 24px; }
.rail ul, .drawer ul { margin: 0; padding: 0; list-style: none; }
.nav-link {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  margin: 4px 0;
  padding: 10px 14px;
  color: var(--cy-text-secondary);
  border-radius: var(--cy-radius-md);
  font-size: .84375rem;
  text-decoration: none;
}
.nav-link:hover { background: var(--cy-surface-hover); color: var(--cy-text); }
.nav-link[aria-current] {
  background: var(--cy-action);
  color: var(--cy-action-text);
  font-weight: 700;
  border-radius: var(--cy-radius-pill);
  box-shadow: 0 0 20px var(--cy-action-glow);
}
.nav-code { font: 400 .75rem/1 var(--cy-font-mono); }
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--site-gutter);
  min-height: 64px;
  border-bottom: 1px solid var(--cy-border);
  background: var(--cy-bg);
}
.topbar-title { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.control {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--cy-text);
  background: var(--cy-surface-1);
  border: 1px solid var(--cy-border-strong);
  border-radius: var(--cy-radius-pill);
  font-size: var(--cy-text-caption);
  text-decoration: none;
}
.control:hover { background: var(--cy-surface-hover); }
.control[aria-pressed="true"] { background: var(--cy-surface-2); }
.icon { width: 18px; height: 18px; flex: none; }
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(20rem, calc(100% - 32px));
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px;
  background: var(--cy-rail-bg);
  color: var(--cy-text);
  border: 0;
  border-right: 1px solid var(--cy-border);
}
.drawer::backdrop { background: rgb(8 9 11 / 64%); }
.drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cy-border);
  margin-bottom: 12px;
}
.noscript-nav { padding: 12px var(--site-gutter); }

main, .site-footer { max-width: 88rem; margin: 0 auto; padding-inline: var(--site-gutter); }
main { padding-block: clamp(1.5rem, 4.5vw, 4rem) 3rem; }
main:focus { outline: 0; }
.hero {
  container-type: inline-size;
  position: relative;
  padding: clamp(1.5rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-xl);
  background-color: var(--cy-surface-1);
  background-image: linear-gradient(to right, var(--site-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--site-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.5rem, 9.5cqi, 6rem);
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero p { max-width: 34rem; color: var(--cy-text-secondary); }
.hero p:first-child {
  font: 400 var(--cy-text-intro)/1.381 var(--cy-font-sans);
  letter-spacing: .011em;
  color: var(--cy-text);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .cy-button { text-decoration: none; line-height: 1.25; }
.hero-art { display: none; }
.home-section { margin-top: clamp(2.5rem, 7vw, 5rem); scroll-margin-top: 16px; }
.home-section h2 { margin-bottom: 20px; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: baseline;
  height: 100%;
  gap: 12px;
  padding: 20px;
  color: var(--cy-text);
  text-decoration: none;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-1);
  transition: background-color var(--cy-duration-normal) var(--cy-ease-out),
    transform var(--cy-duration-fast) var(--cy-ease-out);
}
.card:hover { background: var(--cy-surface-hover); transform: translateY(-2px); }
.card strong { display: block; font: 700 var(--cy-heading-4)/1.25 var(--cy-font-display); }
.card p { margin: 6px 0 0; color: var(--cy-text-secondary); font-size: var(--cy-text-compact); line-height: 1.45; }
.card .nav-code, .card > .icon { color: var(--cy-text-muted); }
.downloads { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cy-border); }
.downloads li { border-bottom: 1px solid var(--cy-border); }
.downloads a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 4px;
}
.downloads .icon { margin-left: auto; }
.downloads span { color: var(--cy-text-muted); font: 400 var(--cy-text-caption)/1 var(--cy-font-mono); }

.section-header {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-block: 0 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--cy-border);
}
.section-header p { color: var(--cy-text-secondary); margin: 0; }
.section-header .nav-code { color: var(--cy-text-muted); }
.prose { display: flow-root; }
.prose :is(p, ul, ol, blockquote) { max-width: var(--site-reading-width); }
.prose :is(h2, h3, h4) { margin: 1.6em 0 .65em; }
.prose > :first-child { margin-top: 0; }
.prose :is(ul, ol) { padding-left: 1.45rem; margin-block: 0 1.25rem; }
.prose li { margin-block: .35em; }
.prose li :is(ul, ol) { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--cy-border); margin: 2rem 0; }
.prose blockquote { margin: 0 0 1.25rem; padding-left: 16px; border-left: 2px solid var(--cy-border-strong); }
code {
  border-radius: 4px;
  padding: 2px 4px;
  font: 400 .88em/1.5 var(--cy-font-mono);
  background: var(--cy-surface-2);
  overflow-wrap: anywhere;
}
pre {
  margin: 1em 0 1.4em;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--cy-border);
  background: var(--cy-surface-1);
  border-radius: var(--cy-radius-md);
}
pre code { background: none; padding: 0; }
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-md);
  margin-block: 0 24px;
}
table { width: 100%; border-collapse: collapse; font-size: var(--cy-text-compact); }
td, th { padding: 10px 14px; min-width: 8ch; text-align: left; vertical-align: top; }
th { font-weight: 700; background: var(--cy-surface-2); }
td { border-top: 1px solid var(--cy-border); }
.swatch {
  display: block;
  width: 32px;
  height: 20px;
  margin-bottom: 6px;
  border-radius: 4px;
  border: 1px solid var(--cy-border-strong);
  background: var(--swatch);
}
.logo-samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.logo-samples figure {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
}
.logo-samples figcaption { margin-top: 12px; color: var(--cy-text-secondary); font-size: var(--cy-text-caption); }
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
}
.pagination a {
  display: grid;
  gap: 4px;
  flex: 0 1 18rem;
  padding: 14px 16px;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-md);
  background: var(--cy-surface-1);
  text-decoration: none;
}
.pagination a:hover { background: var(--cy-surface-hover); }
.pagination a[rel="next"] { margin-left: auto; text-align: right; }
.pagination small { font-size: var(--cy-text-caption); color: var(--cy-text-secondary); }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-block: 20px 32px;
  border-top: 1px solid var(--cy-border);
  color: var(--cy-text-muted);
  font-size: var(--cy-text-caption);
}
.site-footer p { margin: 0; }

@media (max-width: 420px) {
  .topbar { flex-wrap: nowrap; }
  .topbar > .brand { min-width: 0; }
  .topbar-actions { flex: none; margin-left: 0; }
  .hero-actions .cy-button { padding-inline: 16px; }
}
@media (min-width: 50rem) {
  .layout { display: grid; grid-template-columns: var(--cy-rail-width) minmax(0, 1fr); }
  .rail {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none;
    border-right: 1px solid var(--cy-border);
  }
  .topbar > .brand, [data-open-menu] { display: none; }
  .topbar-title { display: inline; color: var(--cy-text-secondary); font-size: var(--cy-text-caption); }
}
@media (min-width: 70rem) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 24px; }
  .hero h1 { font-size: clamp(2.5rem, 7.5cqi, 6rem); }
  .hero-art { display: grid; place-items: center; padding: 20px; }
  .hero-art .brand__mark { width: min(100%, 19rem); height: auto; border-radius: 50%; }
}