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

  :root {
    --bg:        #f5f4f0;
    --surface:   #ffffff;
    --surface-2: #f0efe9;
    --border:    rgba(0,0,0,0.10);
    --border-md: rgba(0,0,0,0.18);
    --text:      #1a1a18;
    --text-2:    #5a5a54;
    --text-3:    #9a9a90;
    --blue-bg:   #e6f1fb;
    --blue-text: #0c447c;
    --green-bg:  #97c459;
    --green-text:#3b6d11;
    --amber-bg:  #ef9f27;
    --amber-text:#854f0b;
    --radius:    10px;
    --radius-sm: 6px;
    --mono:      'IBM Plex Mono', monospace;
    --sans:      'IBM Plex Sans', sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:        #1a1a18;
      --surface:   #242422;
      --surface-2: #2e2e2b;
      --border:    rgba(255,255,255,0.08);
      --border-md: rgba(255,255,255,0.16);
      --text:      #f0efe9;
      --text-2:    #a0a098;
      --text-3:    #606058;
      --blue-bg:   #0c447c;
      --blue-text: #b5d4f4;
      --green-bg:  #27500a;
      --green-text:#c0dd97;
      --amber-bg:  #633806;
      --amber-text:#fac775;
    }
  }

  body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    padding: 2rem 1.5rem;
    min-height: 100vh;
  }

  header {
    margin-bottom: 2.5rem;
  }

  header h1 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: .35rem;
  }

  header p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    max-width: 520px;
  }

  .section {
    margin-bottom: 2.25rem;
  }

  .section-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: .5px solid var(--border);
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }

  .card {
    background: var(--surface);
    border: .5px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
  }

  .fn-name {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: .35rem;
  }

  .fn-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: .75rem;
  }

  .demo {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: .75rem;
    font-size: 13px;
  }

  .demo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: .5rem;
    flex-wrap: wrap;
  }

  .demo-row:last-child { margin-bottom: 0; }

  .lbl {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    width: 20px;
    flex-shrink: 0;
  }

  .val {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    min-width: 40px;
    text-align: right;
  }

  .code-out {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
    margin-top: 6px;
    line-height: 1.5;
  }

  input[type="range"] {
    flex: 1;
    min-width: 80px;
    accent-color: var(--blue-text);
  }

  .swatch-bar {
    height: 28px;
    border-radius: var(--radius-sm);
    width: 100%;
    margin-top: 4px;
    border: .5px solid var(--border);
  }

  .gradient-block {
    width: 100%;
    height: 60px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #4a9eff 0%, #7c4dff 50%, #ff4d8d 100%);
    transition: filter .15s;
  }

  .info-block {
    width: 100%;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--blue-bg);
    transition: width .15s;
  }

  .success-block {
    height: 24px;
    border-radius: 4px;
    background: var(--green-bg);
    transition: width .15s;
  }

  .warning-block {
    height: 24px;
    border-radius: 4px;
    background: var(--amber-bg);
    transition: width .15s;
  }

  .transform-box {
    width: 48px;
    height: 48px;
    background: var(--blue-bg);
    border: .5px solid var(--border-md);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--blue-text);
    font-family: var(--mono);
    transition: transform .15s;
  }

  .transform-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .75rem 0;
    height: 84px;
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 48px solid var(--blue-bg);
    transition: filter .15s;
  }

  .url-examples .code-out {
    display: block;
    margin-bottom: 4px;
  }