html {
      overflow-y: scroll;
      scroll-behavior: smooth;
    }

    :root {
      --bg-light: #EDEFF3;
    }

    .page-content {
      font-size: var(--type-body);

      transform: translateY(6px);

      transition:
        transform 0.12s ease-out;
    }

    .page-content.loaded {
      transform: translateY(0);
    }

    .header {
      display: flex;
      align-items: baseline;

      font-family: Georgia, serif;
      font-size: var(--type-body);
      font-weight: 300;

      letter-spacing: 0.16em;
      text-transform: uppercase;

      color: #555;
    }


    /* =========================
       Header
       ========================= */

    .log-header-block {
      margin-bottom: 5px;
      padding-bottom: 10px;

      border-bottom:
        1px solid rgba(0, 0, 0, 0.08);
    }

    .log-header {
      margin-bottom: 6px;

      font-size: var(--type-lead);
      font-weight: 500;
      letter-spacing: 0.08em;

      color: var(--research-blue);
    }

    .log-sub {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 30px;

      font-size: var(--type-small);
      letter-spacing: 0.05em;

      opacity: 0.5;
    }

    .log-sub-description {
      flex: 0 1 auto;
    }

    .log-affiliation-note {
      flex: 0 1 auto;

      max-width: 430px;

      font-size: var(--type-small);
      line-height: 1.4;
      letter-spacing: 0.025em;

      text-align: right;

      color: rgba(11, 31, 58, 0.72);
    }

    .log-back {
      margin: 0 0 18px;
    }

    .log-back a {
      display: inline-flex;
      align-items: center;
      gap: 7px;

      width: fit-content;

      font-size: var(--type-small);
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0.09em;

      color: rgba(11, 31, 58, 0.46);

      text-decoration: none;

      transition:
        color 0.18s ease,
        opacity 0.18s ease;
    }

    .log-back-arrow {
      display: inline-block;

      font-size: var(--type-lead);
      line-height: 1;

      color: rgba(11, 31, 58, 0.38);

      transform:
        translateY(-0.02em);

      transition:
        color 0.18s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .log-back a:hover {
      color: rgba(11, 31, 58, 0.82);
    }

    .log-back a:hover .log-back-arrow {
      color: rgba(11, 31, 58, 0.72);

      transform:
        translate(-3px, -0.02em);
    }

    .log-back a:focus-visible {
      color: rgba(11, 31, 58, 0.88);

      outline:
        1px solid rgba(11, 31, 58, 0.22);

      outline-offset: 5px;
    }

    html[data-lang="ja"] .log-back a {
      letter-spacing: 0.06em;
    }


    /* =========================
       Year navigation
       ========================= */

    .year-tabs {
      margin-bottom: 5px;
      padding: 6px 10px;

      font-size: var(--type-small);
      letter-spacing: 0.09em;

      background:
        rgba(255, 255, 255, 0.22);

      border:
        1px solid rgba(11, 31, 58, 0.035);

      border-radius: 3px;
    }

    .year-tabs span {
      margin-right: 25px;

      cursor: pointer;

      opacity: 0.45;

      transition:
        opacity 0.2s ease;
    }

    .year-tabs span.active {
      font-size: var(--type-small);
      font-weight: 500;

      color: var(--research-blue);

      opacity: 0.9;
    }

    .year-tabs span:hover {
      opacity: 0.75;
    }

    .divider {
      height: 0.5px;

      margin: 0;

      background: #dcdcdc;
    }


    /* =========================
       Year sections
       ========================= */

    .year-section {
      display: none;

      opacity: 0;

      transform:
        translateY(8px);

      transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    }

    .year-section.active {
      display: block;

      opacity: 1;

      transform:
        translateY(0);
    }

    .trace-year {
      margin: 22px 0 10px;

      font-size: var(--type-small);
      font-weight: 500;
      line-height: 1.4;

      letter-spacing: 0.14em;

      font-variant-numeric:
        tabular-nums;

      color: var(--research-blue);

      opacity: 0.82;
    }

    .year-section+.year-section .trace-year {
      margin-top: 34px;
    }


    /* =========================
       Affiliation groups
       ========================= */

    .trace-entry {
      display: grid;

      /* A compact but safe gap between affiliation and event rail. */
      grid-template-columns:
        180px minmax(0, 1fr);

      column-gap: 16px;

      width: 100%;

      margin: 12px 0 22px;
      padding-bottom: 20px;

      border-bottom:
        1px solid rgba(11, 31, 58, 0.07);
    }

    .year-section .trace-entry:last-child {
      padding-bottom: 26px;

      border-bottom-color:
        rgba(11, 31, 58, 0.13);
    }

    .trace-context {
      padding-top: 6px;
    }

    .trace-affiliation {
      margin: 0;

      font-size: var(--type-small);
      line-height: 1.35;
      letter-spacing: 0.06em;

      color: #666;

      opacity: 0.78;

      white-space: nowrap;
    }

    .trace-lines {
      width: 100%;
      min-width: 0;
    }


    /* =========================
       Timeline items
       ========================= */

    .trace-line,
    .trace-line.is-soft {
      display: grid;

      grid-template-columns:
        minmax(0, max-content) auto minmax(0, 1fr);

      align-items: baseline;

      position: relative;

      margin: 0 0 9px;
      padding: 0;

      color: #454b54;

      font-size: var(--type-body);
      line-height: 1.45;

      background: none;
      border: 0;
    }

    .trace-line:last-child,
    .trace-line.is-soft:last-child {
      margin-bottom: 0;
    }

    .trace-event,
    .trace-line.is-soft .trace-event {
      grid-column: 1;
      grid-row: 1;

      min-width: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #333333;

      font-size: var(--type-body);
      font-weight: 400;
      letter-spacing: -0.01em;

      opacity: 0.7;
    }

    .trace-dot,
    .trace-line.is-soft .trace-dot {
      grid-column: 2;

      display: inline;

      margin: 0 6px;

      color: var(--research-blue);

      opacity: 0.25;
    }

    .trace-tag,
    .trace-line.is-soft .trace-tag {
      grid-column: 3;

      min-width: 0;

      margin: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: var(--research-blue);

      font-size: var(--type-small);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;

      opacity: 0.65;
    }

    .trace-line:not(.is-highlight) .trace-detail {
      display: none;
    }

    .trace-line.is-soft {
      padding:
        3px 0 3px 9px;

      border-left:
        1px solid rgba(11, 31, 58, 0.2);
    }

    .trace-line.is-highlight {
      display: grid;

      grid-template-columns:
        minmax(0, max-content) auto minmax(0, 1fr);

      grid-template-rows:
        auto auto;

      align-items: baseline;

      margin: 4px 0 13px;
      padding: 3px 0 4px 9px;

      background: none;
      border: 0;

      border-left:
        1.5px solid rgba(11, 31, 58, 0.55);
    }

    .trace-line.is-highlight .trace-event {
      grid-column: 1;
      grid-row: 1;

      min-width: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #111111;

      font-size: var(--type-body);
      font-weight: 500;
      letter-spacing: 0;

      opacity: 1;
    }

    .trace-line.is-highlight .trace-dot {
      grid-column: 2;
      grid-row: 1;

      display: inline;

      margin: 0 6px;

      color: var(--research-blue);

      opacity: 0.3;
    }

    .trace-line.is-highlight .trace-tag {
      grid-column: 3;
      grid-row: 1;

      min-width: 0;

      margin: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: var(--research-blue);

      font-size: var(--type-small);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;

      opacity: 0.9;
    }

    .trace-line.is-highlight .trace-detail {
      grid-column: 1 / -1;
      grid-row: 2;

      display: block;

      width: 100%;
      min-width: 0;

      margin: 3px 0 0;
      padding: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #444444;

      font-size: var(--type-small);
      font-style: normal;
      font-weight: 400;
      line-height: 1.4;

      opacity: 0.91;
    }

    .trace-detail a {
      color: inherit;

      text-decoration-line: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;

      transition:
        color 0.15s ease,
        text-decoration-color 0.15s ease;
    }

    .trace-detail a:hover,
    .trace-detail a:focus-visible {
      color: var(--research-blue);

      text-decoration-color:
        rgba(11, 31, 58, 0.28);
    }

    .trace-detail a:focus-visible {
      outline:
        1px solid rgba(11, 31, 58, 0.22);

      outline-offset: 3px;
    }


    /* =========================
       Layout
       ========================= */

    .timeline-layout {
      display: block;

      width: 100%;
      max-width: none;

      overflow: visible;
    }

    .timeline-main {
      width: 100%;
      min-width: 0;
    }


    /* =========================
       Mobile
       ========================= */

    @media (max-width: 640px) {

      .page-content {
        font-size: inherit;
      }

      .log-header-block {
        margin-bottom: 12px;
        padding-bottom: 0;

        border-bottom: none;
      }

      .log-header {
        margin-bottom: 4px;

        font-size: var(--type-small);

        text-transform: uppercase;
        letter-spacing: 0.14em;

        opacity: 0.72;
      }

      .log-back {
        margin: -3px 0 13px;
      }

      .log-back a {
        gap: 6px;

        font-size: var(--type-caption);
        letter-spacing: 0.08em;
      }

      .log-back-arrow {
        font-size: var(--type-caption);
      }

      .log-sub {
        display: none;
      }

      .year-tabs {
        display: flex;

        gap: 15px;

        flex-wrap: nowrap;

        overflow-x: auto;

        margin-top: -3px;
        margin-bottom: 3px;

        padding: 3px 8px;

        font-size: var(--type-small);
        letter-spacing: 0.08em;

        background:
          rgba(255, 255, 255, 0.22);

        border:
          1px solid rgba(11, 31, 58, 0.035);

        border-radius: 3px;

        -webkit-overflow-scrolling: touch;
      }

      .year-tabs::-webkit-scrollbar {
        display: none;
      }

      .year-tabs span {
        flex: 0 0 auto;

        margin-right: 0;
        padding: 3px 2px;

        opacity: 0.38;
      }

      .year-tabs span.active {
        opacity: 0.85;
        font-size: var(--type-small);
      }

      .divider {
        margin: 5px 0;

        max-width: 400px;
      }

      .trace-year {
        margin: 17px 0 15px;

        font-size: var(--type-small);
        letter-spacing: 0.16em;

        opacity: 0.76;
      }

      .year-section+.year-section .trace-year {
        margin-top: 27px;
      }

      .trace-entry {
        display: block;

        position: relative;

        margin: 0;
        padding: 0 0 22px;

        border-bottom: 0;
      }

      .year-section .trace-entry:last-child {
        padding-bottom: 24px;

        border-bottom:
          1px solid rgba(11, 31, 58, 0.10);
      }

      .trace-entry+.trace-entry {
        margin-top: 5px;
      }

      .trace-context {
        margin-bottom: 10px;
        padding-top: 0;
      }

      .trace-affiliation {
        font-size: var(--type-small);
        line-height: 1.3;
        letter-spacing: 0.055em;

        color: rgba(11, 31, 58, 0.62);

        opacity: 1;
      }

      .trace-lines {
        width: 100%;
        min-width: 0;

        margin-top: 0;
        padding-left: 0;

        border-left: 0;
      }

      .trace-line,
      .trace-line.is-soft,
      .trace-line.is-highlight {
        margin: 0;
        padding-bottom: 0;
      }

      .trace-lines>.trace-line+.trace-line {
        margin-top: 12px;
      }

      .trace-line,
      .trace-line.is-soft {
        display: grid;

        grid-template-columns:
          minmax(0, 1fr);

        grid-template-rows:
          auto auto;

        row-gap: 2px;

        width: 100%;
        min-width: 0;

        box-sizing: border-box;

        font-size: var(--type-small);
        line-height: 1.4;

        background: none;
        border: 0;
      }

      .trace-line.is-soft {
        border-left:
          1px solid rgba(11, 31, 58, 0.14);
      }

      .trace-event,
      .trace-line.is-soft .trace-event {
        display: block;

        grid-column: 1;
        grid-row: 1;

        min-width: 0;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #424954;

        font-size: inherit;
        font-weight: 400;
        letter-spacing: 0.03em;

        opacity: 0.82;
      }

      .trace-dot,
      .trace-line.is-soft .trace-dot,
      .trace-line.is-highlight .trace-dot {
        display: none;
      }

      .trace-line.is-soft .trace-tag {
        display: block;

        grid-column: 1;
        grid-row: 2;

        min-width: 0;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: var(--research-blue);

        font-size: var(--type-caption);
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.02em;

        opacity: 0.55;
      }

      .trace-line:not(.is-highlight) .trace-detail {
        display: none;
      }

      .trace-line.is-highlight {
        display: grid;

        grid-template-columns:
          minmax(0, 1fr);

        grid-template-rows:
          auto auto auto;

        row-gap: 2px;

        width: 100%;
        min-width: 0;

        box-sizing: border-box;

        background: none;
        border: 0;

        border-left:
          1px solid rgba(11, 31, 58, 0.65);
      }

      .trace-line.is-highlight .trace-event {
        display: block;

        grid-column: 1;
        grid-row: 1;

        min-width: 0;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #111111;

        font-size: inherit;
        font-weight: 500;
        letter-spacing: 0.06em;

        opacity: 1;
      }

      .trace-line.is-highlight .trace-tag {
        display: block;

        grid-column: 1;
        grid-row: 2;

        min-width: 0;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: var(--research-blue);

        font-size: var(--type-caption);
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.02em;

        opacity: 0.85;
      }

      .trace-line.is-highlight .trace-detail {
        display: block;

        grid-column: 1;
        grid-row: 3;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #535b66;

        font-size: var(--type-small);
        font-style: italic;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.01em;

        opacity: 0.85;
      }
    }


    @media (prefers-reduced-motion: reduce) {

      .page-content,
      .year-section,
      .log-back a,
      .log-back-arrow {
        transition: none;
      }
    }