*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { line-height: 1.5; -webkit-text-size-adjust: 100%; overflow-y: scroll; }

    :root {
      --background: #ffffff;
      --foreground: #171717;
      --highlight: #fef08a;
      --muted: #6b7280;
      --border: #e5e7eb;
      --card: #f9fafb;
      --notice-bg: #eff6ff;
      --notice-border: #bfdbfe;
      --notice-code: #dbeafe;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background: #0a0a0a;
        --foreground: #ededed;
        --highlight: #854d0e;
        --muted: #9ca3af;
        --border: #374151;
        --card: #111827;
        --notice-bg: #1e293b;
        --notice-border: #334155;
        --notice-code: #1e3a5f;
      }
    }

    body {
      font-family: 'Geist', system-ui, -apple-system, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      color: var(--foreground);
      background: var(--background);
    }

    nav {
      border-bottom: 1px solid var(--border);
      padding: 1rem 1.5rem;
    }

    .nav-inner {
      max-width: 64rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    nav a {
      color: var(--muted);
      text-decoration: none;
    }

    nav a.nav-brand {
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.75rem;
      color: var(--foreground);
    }

    nav a:hover { text-decoration: underline; }

    main {
      flex: 1;
      max-width: 64rem;
      margin: 0 auto;
      padding: 2.5rem 1.5rem;
      width: 100%;
    }

    h1 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }

    h1 code {
      font-size: 1.25rem;
      background: var(--border);
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
    }

    .notice {
      background: var(--notice-bg);
      border: 1px solid var(--notice-border);
      border-radius: 0.5rem;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      line-height: 1.6;
      font-size: 0.875rem;
    }

    .notice code {
      background: var(--notice-code);
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      font-size: 0.85em;
    }

    .aside {
      background: var(--card);
      border-radius: 0.375rem;
      padding: 0.625rem 0.75rem;
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      color: var(--muted);
      line-height: 1.5;
    }

    .meta {
      color: var(--muted);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    .meta code {
      background: var(--border);
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      font-size: 0.875em;
    }

    details {
      margin-bottom: 1.5rem;
    }

    summary {
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--muted);
    }

    summary code {
      background: var(--border);
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      font-size: 0.85em;
    }

    details pre {
      margin-top: 0.75rem;
      background: var(--card);
      padding: 1rem;
      border-radius: 0.5rem;
      overflow-x: auto;
    }

    details code {
      font-size: 0.8125rem;
    }

    .chunk {
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      padding: 1rem;
      margin-bottom: 1rem;
      animation: flash 1.5s ease-out;
    }

    .chunk .label {
      display: inline-block;
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: var(--foreground);
      color: var(--background);
      padding: 0.125rem 0.5rem;
      border-radius: 0.25rem;
      margin-bottom: 0.5rem;
      margin-right: 0.5rem;
    }

    @keyframes flash {
      from { background-color: var(--highlight); }
      to { background-color: transparent; }
    }