:root {
      --indigo:        oklch(42% 0.20 275);
      --indigo-light:  oklch(55% 0.18 275);
      --indigo-dark:   oklch(24% 0.18 275);
      --indigo-deeper: oklch(16% 0.14 278);
      --amber:         oklch(70% 0.18 72);
      --bg:        oklch(98.5% 0.005 80);
      --bg-2:      oklch(96.5% 0.008 80);
      --surface:   oklch(100% 0 0);
      --border:    oklch(90% 0.008 90);
      --text:      oklch(18% 0.015 270);
      --text-2:    oklch(38% 0.012 270);
      --text-3:    oklch(56% 0.008 270);
      --r: 10px;
      --ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--ui);
      font-size: 16px;
      line-height: 1.7;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
    }
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: oklch(16% 0.14 278 / 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid oklch(100% 0 0 / 0.08);
    }
    .nav-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 24px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-brand {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
      font-size: 17px; font-weight: 700;
      color: oklch(100% 0 0);
      letter-spacing: -0.02em;
    }
    .logo-mark {
      width: 28px; height: 28px; border-radius: 7px;
      background: var(--amber);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .nav-brand span { color: var(--amber); }
    .nav-back {
      font-size: 13.5px; font-weight: 500;
      color: oklch(100% 0 0 / 0.6);
      text-decoration: none;
      transition: color .15s;
    }
    .nav-back:hover { color: oklch(100% 0 0); }

    main {
      max-width: 720px;
      margin: 0 auto;
      padding: 100px 24px 80px;
    }
    .page-header {
      margin-bottom: 40px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .page-header h1 {
      font-size: 2rem; font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0 0 8px;
      color: var(--text);
    }
    .page-header .meta {
      font-size: 14px;
      color: var(--text-3);
    }
    h2 {
      font-size: 1.1rem; font-weight: 600;
      margin: 36px 0 10px;
      color: var(--text);
    }
    p, li {
      font-size: 15px;
      color: var(--text-2);
      margin: 0 0 12px;
    }
    ul { padding-left: 20px; margin: 0 0 12px; }
    li { margin-bottom: 6px; }
    a { color: var(--indigo); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .highlight-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--amber);
      border-radius: var(--r);
      padding: 16px 20px;
      margin: 24px 0;
      font-size: 14px;
      color: var(--text-2);
    }
    footer {
      background: var(--indigo-deeper);
      padding: 20px 24px;
      text-align: center;
      font-size: 13px;
      color: oklch(100% 0 0 / 0.4);
    }
    footer a { color: oklch(100% 0 0 / 0.55); }
    footer a:hover { color: oklch(100% 0 0 / 0.85); }
    @media (max-width: 600px) {
      .nav-inner { padding: 0 16px; height: 54px; }
      .nav-brand { font-size: 15.5px; }
      .nav-back { font-size: 12.5px; }
      main { padding: 84px 18px 56px; }
      .page-header h1 { font-size: 1.625rem; }
      h2 { font-size: 1rem; margin: 28px 0 8px; }
      .highlight-box { padding: 14px 16px; }
    }