:root {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
      --text-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
      --text-2xl: clamp(2.6rem, 1.4rem + 3vw, 4.5rem);

      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;

      --font-body: 'LINE Seed JP', 'LINE Seed Sans JP', 'Helvetica Neue', Arial, sans-serif;
      --font-display: 'LINE Seed JP', 'LINE Seed Sans JP', 'Helvetica Neue', Arial, sans-serif;

      --color-bg: #ffffff;
      --color-text: #111111;
      --color-text-muted: #6a6a6a;
      --color-border: rgba(17, 17, 17, 0.12);
      --color-track: #f3f3f3;
      --color-thumb: #ffffff;
      --shadow-soft: 0 1px 2px rgba(0,0,0,0.06), 0 8px 18px rgba(0,0,0,0.06);
      --radius-full: 999px;
      --content: 760px;
      --transition: 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; }
    button { font: inherit; }

    .skip-link {
      position: absolute;
      left: var(--space-4);
      top: -44px;
      background: #111;
      color: #fff;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-full);
    }
    .skip-link:focus { top: var(--space-4); }

    .page {
      width: min(calc(100% - 2rem), var(--content));
      margin: 0 auto;
      padding: var(--space-5) 0 var(--space-16);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: clamp(var(--space-12), 10vw, var(--space-20));
    }

    .menu-switcher {
      position: relative;
      display: inline-grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      align-items: center;
      gap: 0;
      padding: 0.25rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      background: var(--color-track);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
      isolation: isolate;
    }

    .menu-thumb {
      position: absolute;
      top: 0.25rem;
      left: 0.25rem;
      width: calc(33.333% - 0.166rem);
      height: calc(100% - 0.5rem);
      border-radius: var(--radius-full);
      background: var(--color-thumb);
      box-shadow: var(--shadow-soft);
      transform: translateX(calc(var(--active-index, 0) * 100%));
      transition: transform var(--transition), width var(--transition), box-shadow var(--transition);
      z-index: 0;
      will-change: transform;
    }

    .menu-item {
      position: relative;
      z-index: 1;
      min-height: 44px;
      padding: 0 var(--space-4);
      border: 0;
      background: transparent;
      color: var(--color-text-muted);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: color 240ms ease;
      white-space: nowrap;
    }

    .menu-item.is-active {
      color: var(--color-text);
    }

    .menu-item:focus-visible {
      outline: none;
      color: var(--color-text);
    }

    main { display: block; }

    h1 {
      margin: 0 0 var(--space-2) 0;
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      line-height: 0.96;
      font-weight: 700;
      letter-spacing: -0.04em;
    }

    .role {
      margin: 0 0 var(--space-8) 0;
      font-size: var(--text-lg);
      color: var(--color-text);
      font-weight: 500;
    }

    .body-copy {
      display: grid;
      gap: var(--space-5);
    }

    .body-copy p {
      margin: 0;
      max-width: 66ch;
    }

    .body-copy a,
    .social-links a {
      color: var(--color-text);
      text-underline-offset: 0.16em;
      text-decoration-thickness: 1px;
    }

    .social-links {
      margin-top: var(--space-2);
    }

    .updated {
      margin-top: var(--space-8);
      color: var(--color-text-muted);
      font-size: var(--text-sm);
    }

    @media (max-width: 640px) {
      .page { width: min(calc(100% - 1.5rem), var(--content)); }
      .menu-switcher {
        width: 100%;
        overflow-x: auto;
      }
      .menu-item {
        padding: 0 var(--space-3);
        font-size: var(--text-sm);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: 0.01ms !important; }
    }