:root { color-scheme: light; --ink: #1c2522; --muted: #5f6c67; --line: #dce3df; --blue: #2d60d5; }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      @media (min-width: 601px) { html { scrollbar-gutter: stable both-edges; } }
      body { margin: 0; background: #f8faf9; color: var(--ink); font: 16px/1.8 -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
      a { color: inherit; text-underline-offset: 3px; }
      a:hover { color: var(--blue); }
      a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
      .wrap { width: min(100% - 40px, 860px); margin: 0 auto; }
      .skip { position: absolute; top: -60px; left: 20px; padding: 5px 12px; background: white; }
      .skip:focus { top: 8px; }
      header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
      .brand { font: 800 1.35rem/1 Arial, sans-serif; letter-spacing: -.06em; text-decoration: none; }
      .brand span { color: var(--blue); }
      .header-actions { display: flex; align-items: center; gap: 20px; }
      .lang-switch { display: flex; align-items: center; gap: 9px; }
      .lang-switch a { padding: 4px 0; color: var(--muted); font: 700 .82rem/1 Arial, sans-serif; text-decoration: none; }
      .lang-switch a[aria-current="page"] { color: var(--blue); border-bottom: 2px solid var(--blue); }
      .social-link { font-size: .9rem; font-weight: 700; text-decoration: none; }
      .intro { padding: clamp(48px, 8vw, 86px) 0 56px; }
      .eyebrow { margin: 0 0 13px; color: var(--blue); font: 700 .78rem/1.5 Arial, sans-serif; letter-spacing: .14em; }
      h1 { max-width: 750px; margin: 0; font-size: clamp(2.15rem, 5.5vw, 3.8rem); line-height: 1.3; letter-spacing: -.055em; }
      html[lang="ja"] h1 { font-size: clamp(2.15rem, 5.5vw, 3.2rem); }
      .no-break { white-space: nowrap; }
      .intro p:last-child { max-width: 650px; margin: 19px 0 0; color: var(--muted); }
      h2 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -.035em; }
      .project { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 32px 0 39px; border-top: 1px solid var(--line); }
      .number { padding-top: 5px; color: var(--blue); font: 700 .9rem/1.5 Arial, sans-serif; }
      .project h3 { margin: 0 0 10px; font: 800 clamp(1.8rem, 4vw, 2.45rem)/1.2 Arial, sans-serif; letter-spacing: -.055em; }
      .project-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
      .project-heading h3 { margin: 0; }
      .project-icon { display: block; width: 40px; height: 40px; flex: none; object-fit: contain; }
      .project p { max-width: 640px; margin: 0; }
      .detail { margin-top: 9px !important; color: var(--muted); }
      .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 23px; }
      .primary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 18px; border-radius: 5px; background: var(--blue); color: white; font-weight: 700; text-decoration: none; }
      .primary:hover { background: #1f4fbc; color: white; }
      .secondary { font-size: .92rem; }
      .helper { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
      .helper p { color: var(--muted); font-size: .92rem; }
      .helper a { display: inline-block; margin-top: 5px; font-size: .92rem; font-weight: 700; }
      .history { margin-top: 9px; color: var(--muted); }
      .history summary { width: fit-content; cursor: pointer; }
      .history summary:hover { color: var(--blue); }
      .history p { margin: 9px 0 0; font-size: .92rem; }
      .history a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-weight: 700; }
      .history a img { width: 18px; height: 18px; object-fit: contain; }
      .history small { display: block; margin-top: 5px; font-size: .82rem; }
      footer { display: flex; justify-content: space-between; gap: 16px; padding: 21px 0 35px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
      footer a { color: var(--muted); }
      @media (max-width: 600px) {
        .intro { padding: 49px 0 47px; }
        .project { grid-template-columns: 1fr; gap: 4px; padding: 26px 0 33px; }
        .number { padding: 0; }
        .actions { align-items: flex-start; flex-direction: column; gap: 13px; }
      }
      @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }