@layer tokens, reset, base, layout, components;

@layer tokens {
  :root {
    --ink: #16161a;
    --ink-weak: #5a5a63;
    --line: #d8d8de;
    --paper: #fdfdfc;
    --link: #1c3f94;
    --accent: #ffd54f;
    --header: #4f474e;
    --header-ink: #fdfdfc;
    --selection: #feefbe;
    --selection-ink: #16161a;

    --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
    --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo,
      system-ui, sans-serif;

    --measure: 64rem;
    --bleed: 150rem;
    --gutter: 1.25rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ink: #ececed;
      --ink-weak: #a1a1ab;
      --line: #35353e;
      --paper: #131316;
      --link: #bfceff;
      --accent: #ffd54f;
      --header: #4f474e;
      --header-ink: #ececed;
      --selection: #5f5128;
      --selection-ink: #ececed;
    }
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

@layer base {
  html {
    color-scheme: light dark;
    scroll-padding-top: 4rem;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.9;
    line-break: strict;
    hanging-punctuation: allow-end;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.04em;
    overflow-wrap: break-word;
    text-autospace: normal;
    text-autospace: ideograph-alpha ideograph-numeric replace;
    text-spacing-trim: trim-start;
    text-underline-offset: 0.2em;
  }

  ::selection {
    background-color: var(--selection);
    color: var(--selection-ink);
  }

  a {
    color: var(--link);

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  :lang(en) {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
  }

  @container main (width >= 32rem) {
    h1,
    h2,
    h3,
    h4,
    p,
    dd,
    figcaption {
      text-align: justify;
      text-justify: inter-character;
    }
  }

  h1 {
    margin: 0 0 0.4em;
    font-family: var(--serif);
    font-size: 1.9rem;
    line-height: 1.4;
  }

  h2 {
    margin: 2.5em 0 0.6em;
    padding-block-end: 0.3em;
    border-block-end: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.5;
  }

  h3 {
    margin: 2em 0 0.4em;
    font-size: 1.05rem;
  }

  p,
  address {
    margin: 0 0 1.2em;
  }

  address {
    font-style: inherit;
  }

  figure {
    margin: 2em 0;
  }

  figcaption {
    margin-block-start: 0.5em;
    color: var(--ink-weak);
    font-size: 0.9rem;
  }
}

@layer layout {
  .site-header {
    container-name: header;
    container-type: inline-size;
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: block flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    align-items: stretch;
    min-height: 56px;
    padding-block: 0;
    padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
    background-color: transparent;
    color: var(--header-ink);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--header);
      pointer-events: none;
    }

    @media (scripting: enabled) {
      flex-wrap: nowrap;
    }
  }

  .site-logo {
    display: block flex;
    align-items: center;
    color: inherit;
    line-height: 0;

    & svg {
      display: block flow;
      width: auto;
      height: 36px;
    }
  }

  .site-nav-featured {
    display: block flex;
    flex-shrink: 0;
    align-items: stretch;
    white-space: nowrap;
  }

  .site-header > nav a.site-live {
    margin-inline-start: 0.35rem;

    &:hover {
      text-decoration: none;
    }
  }

  .site-live-icon {
    display: block flow;
    width: 1.15rem;
    height: 1.15rem;
    animation: site-live-flash 2s ease infinite;
  }

  @keyframes site-live-flash {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-live-icon {
      animation: none;
    }
  }

  .site-nav-external {
    display: inline flow-root;
    width: 0.72em;
    height: 0.72em;
    margin-inline-start: 0.28em;
    vertical-align: -0.05em;
  }

  .site-header > nav {
    display: block flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
    font-size: 0.9rem;

    & a {
      position: relative;
      display: block flex;
      align-items: center;
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

      &[aria-current="page"] {
        font-weight: 700;
        text-decoration: none;

        &::after {
          content: "";
          position: absolute;
          inset-inline: 0;
          inset-block-end: 0;
          height: 7px;
          background: var(--accent);
        }

        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .site-nav-wrap {
    display: block flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
  }

  .site-nav {
    display: block flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.25rem 1.1rem;
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    list-style: none;

    & > li {
      display: block flex;
    }
  }

  .site-nav-toggle {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 0;
  }

  .site-nav-dismiss {
    position: fixed;
    inset: 0 0 5px;
    z-index: 19;
    background-color: transparent;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @container header (width < 60rem) {
    .site-nav-wrap {
      position: relative;
      flex: 1 0 auto;
    }

    .site-nav-toggle:focus-visible {
      outline: 2px solid var(--link);
      outline-offset: 2px;
    }

    @media (scripting: enabled) {
      .site-nav-toggle {
        display: block grid;
        place-items: center;
        align-self: stretch;
        width: 2.75rem;
        min-height: 2.75rem;
        margin-inline-start: auto;
      }

      .site-nav {
        display: none;
        margin-inline-start: 0;
      }

      .site-nav-wrap.is-open .site-nav-toggle {
        position: relative;
        z-index: 5;
      }

      .site-nav-wrap.is-open .site-nav {
        display: block flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: calc(100% + 0.35rem);
        z-index: 4;
        min-width: 11rem;
        padding-block: 0.4rem;
        background: var(--header);
        color: var(--header-ink);
        border: 1px solid color-mix(in srgb, var(--header-ink) 32%,
          transparent);

        & > li {
          display: block flow;
        }

        & a {
          display: block grid;
          grid-template-columns: max-content minmax(0, 1fr);
          padding: 0;

          & > span {
            padding-block: 0.5rem;
            padding-inline: 1rem 0;
          }

          &[aria-current="page"]::after {
            content: none;
          }

          &[aria-current="page"] > span {
            position: relative;

            &::after {
              content: "";
              position: absolute;
              inset-inline-start: 1rem;
              inset-inline-end: 0;
              inset-block-end: 0;
              height: 4px;
              background: var(--accent);
            }
          }
        }
      }
    }
  }

  .site-main {
    container-name: main;
    container-type: inline-size;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.5rem var(--gutter) 4rem;
  }

  .site-footer {
    padding-block: 2rem 3rem;
    padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
    border-block-start: 1px solid var(--line);
    color: var(--ink-weak);
    font-size: 0.85rem;
    text-align: center;
  }

  .hero {
    margin: 1rem 0 2.5rem;
    text-align: center;

    & svg {
      width: min(100%, 26rem);
      height: auto;
    }
  }
}

@layer components {
  .social {
    display: block flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1.2rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
  }

  .copyright {
    display: block flow;
    margin: 0;
    font-size: inherit;
  }

  .lead {
    font-family: var(--serif);
    font-size: 1.1rem;
  }

  .eyebrow {
    display: block flow;
    margin-block-end: 0.2em;
    color: var(--ink-weak);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
  }

  .meta {
    margin: 0 0 2em;
    color: var(--ink-weak);
    font-size: 0.9rem;
  }

  .empty {
    padding: 2rem 0;
    color: var(--ink-weak);
  }

  .contact-form {
    display: block grid;
    gap: 1rem;
    margin-block: 1.5rem 2rem;
    max-width: 40rem;

    & fieldset {
      display: block grid;
      gap: 1rem;
      margin: 0;
      padding: 0;
      border: 0;
      min-inline-size: 0;
    }

    & label {
      display: block grid;
      gap: 0.3rem;
      font-weight: 600;
    }

    & input,
    & textarea {
      width: 100%;
      padding: 0.4rem 0.5rem;
      font: inherit;
      color: inherit;
      background: var(--paper);
      border: 1px solid var(--line);
    }

    & button {
      justify-self: start;
      padding: 0.4rem 1.1rem;
      font: inherit;
      color: var(--paper);
      background: var(--ink);
      border: 0;
      cursor: pointer;
    }

    &:has(fieldset:disabled) button {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .contact-error {
    margin: 0;
    color: #b42318;
  }

  .contact-note {
    margin: 0;
    color: var(--ink-weak);
  }

  .video {
    display: block flow;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border: 0;
    background: var(--line);
  }

  .work {
    &:has(> picture, > .image-zoom) {
      @container main (width >= 32rem) {
        display: block grid;
        grid-template-columns: clamp(14rem, 30%, 20rem) minmax(0, 1fr);

        @container main (width >= 52rem) {
          grid-template-columns: clamp(20rem, 40%, 28rem) minmax(0, 1fr);
        }
        gap: 0 2rem;
        align-items: start;

        & > .work-head {
          grid-column: 1 / -1;
        }

        & > .work-body > :first-child {
          margin-block-start: 0;
        }
      }
    }
  }

  .hangout-entries {
    display: block grid;
    display: block grid-lanes;
    grid-template-columns: repeat(auto-fit, minmax(min(29rem, 100%), 1fr));
    justify-items: center;
    gap: 2.5rem 2rem;
    margin-block: 2.5rem;
    margin-inline: min(
      0px,
      calc((100% - min(100vw - 2 * var(--gutter), var(--bleed))) / 2)
    );

    &:has(> :only-child) {
      display: block flex;
      justify-content: center;
    }
  }

  .hangout-entry {
    width: min(100%, 42rem);
    max-width: 42rem;

    & > h3 {
      margin-block-start: 0;
    }

    & img {
      display: block flow;
      width: 100%;
    }

    & .video,
    & picture {
      margin: 0.8rem 0 0;
    }

    & .links {
      margin-block-start: 0.8rem;
    }
  }

  .work-title {
    margin: 0 0 0.2em;
    padding: 0;
    border: 0;
    font-size: 1.6rem;
  }

  .work {
    margin-block-start: 2rem;
  }

  .work + .work,
  .hangout {
    margin-block-start: 5rem;
  }

  article,
  :is(h2, h3, h4)[id] {
    scroll-margin-block-start: 1.5rem;
  }

  .self-link {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .photos {
    display: block flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;

    & > li {
      flex: 1 1 192px;
    }

    & img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
  }

  .credit-note {
    color: var(--ink-weak);
    font-size: 0.9rem;
  }

  .page-heading {
    display: block flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0 0.4em;

    & h1 {
      margin: 0;
    }
  }

  .rss {
    display: inline flex;
    color: var(--ink-weak);
    line-height: 0;
    text-decoration: none;

    &:hover {
      color: var(--link);
    }

    & svg {
      display: block flow;
      width: 1.4rem;
      height: 1.4rem;
    }
  }

  .news-pager {
    display: block grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.6rem 1.25rem;
    align-items: start;
    margin: 0 0 2.25rem;
    font-size: 0.9rem;

    & a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    @container main (width < 30rem) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .news-pager-next,
  .news-pager-prev {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .news-pager-next {
    justify-self: start;
  }

  .news-pager-index {
    justify-self: center;
    align-self: center;
    color: var(--ink-weak);
    white-space: nowrap;

    @container main (width < 30rem) {
      grid-column: 1 / -1;
      justify-self: start;
      order: -1;
    }
  }

  .news-pager-prev {
    justify-self: end;
    text-align: end;
  }

  .news-pager-label {
    display: block flow;
    color: var(--ink-weak);
    font-size: 0.8rem;
  }

  .news-pager-title {
    display: block flow;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .news-lead {
    padding-block-end: 2.5rem;
    border-block-end: 1px solid var(--line);

    & + .entry-list {
      margin-block-start: -1px;
    }
  }

  .news-images {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;

    & > li {
      flex: 0 1 auto;
      max-width: 100%;
    }

    & picture:has(> .news-cover) {
      margin: 0;
    }
  }

  picture:has(> .news-cover) {
    display: block flow;
    width: fit-content;
    max-width: 100%;
    margin: 1.5rem 0;
  }

  .news-cover {
    width: min(100%, 320px);
    height: auto;
  }

  .image-zoom:has(.news-cover) {
    max-width: min(100%, 320px);
  }

  .lead-title {
    margin: 0.1em 0 0.8em;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-size: 1.6rem;
    line-height: 1.5;

    & a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .entry-list {
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
      padding: 1.4rem 0;
      border-block-end: 1px solid var(--line);
    }

    &:has(.entry-excerpt) {
      display: block grid;
      grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
      gap: 0 2rem;

      & > li {
        border-block-start: 1px solid var(--line);
        border-block-end: 0;

        @supports (grid-template-rows: subgrid) {
          display: block grid;
          grid-template-rows: subgrid;
          grid-row: span 3;
        }
      }
    }
  }

  .entry-title {
    margin: 0.1em 0 0.3em;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-size: 1.2rem;

    & a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .entry-date {
    color: var(--ink-weak);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }

  .entry-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
    color: var(--ink-weak);
  }

  .promo {
    max-width: 448px;
    margin: 2.5rem auto;

    & a {
      display: block flow;
      color: inherit;
    }

    & img {
      display: block flow;
      width: 100%;
      height: auto;
    }
  }

  .carousel-wrap {
    max-width: 576px;
    margin: 2rem auto;
  }

  .carousel-stage {
    position: relative;
  }

  .carousel {
    display: block flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    & > li {
      flex: 0 0 100%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

    & figure {
      margin: 0;
    }

    & img {
      display: block flow;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
  }

  .carousel-nav {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .carousel-nav {
      position: absolute;
      inset-block: 0;
      z-index: 1;
      display: block grid;
      place-items: center;
      width: 2.4rem;
      height: 2.4rem;
      margin-block: auto;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: color-mix(in srgb, var(--paper) 82%, transparent);
      color: var(--ink);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s;

      &:hover {
        background: var(--paper);
      }
    }

    .carousel-nav-prev {
      inset-inline-start: 0.6rem;
    }

    .carousel-nav-next {
      inset-inline-end: 0.6rem;
    }

    .carousel-stage:hover .carousel-nav,
    .carousel-stage:focus-within .carousel-nav {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel-nav {
      transition: none;
    }
  }

  .carousel-dots {
    display: block flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
    margin-block-start: 0.65rem;

    & button {
      width: 1.15rem;
      height: 1.15rem;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;

      &::after {
        content: "";
        display: block flow;
        width: 0.45rem;
        height: 0.45rem;
        margin: auto;
        border-radius: 50%;
        background: var(--line);
      }

      &[aria-current="true"]::after {
        background: var(--accent);
      }
    }
  }

  .details {
    margin: 0 0 2em;

    & dt {
      margin-block-start: 1.2em;
      color: var(--ink-weak);
      font-size: 0.9rem;
      font-weight: 700;
    }

    & dd {
      margin: 0.2em 0 0;
    }

    & ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .performances {
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
      margin-block-end: 0.6em;
    }

    & .times {
      display: block flex;
      flex-wrap: wrap;
      gap: 0 1rem;
      margin: 0;
      padding: 0 0 0 1em;
      list-style: none;
      font-variant-numeric: tabular-nums;
    }
  }

  .prices {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;

    & th,
    & td {
      padding: 0.2em 1.2em 0.2em 0;
      font-weight: inherit;
      text-align: start;
    }

    & thead th {
      color: var(--ink-weak);
      font-size: 0.85rem;
      text-align: center;
    }

    & td {
      text-align: end;
    }
  }

  .members {
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
      padding: 1.5rem 0;
      border-block-start: 1px solid var(--line);

      &:first-child {
        border-block-start: 0;
      }

      &:has(> picture) {
        @container main (width >= 32rem) {
          display: block grid;
          grid-template-columns: clamp(144px, 24%, 288px) 1fr;
          gap: 0 1.5rem;
          align-items: start;

          & picture {
            grid-row: span 3;
            max-width: none;
            margin-block-end: 0;
          }

          & > *:not(picture) {
            grid-column: 2;
          }
        }
      }
    }

    & picture {
      display: block flow;
      max-width: 192px;
      margin-block-end: 0.75rem;
    }

    & img {
      border-radius: 2px;
    }
  }

  .member-name {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.2rem;
  }

  .members picture + .member-name[id] {
    scroll-margin-block-start: calc(192px * 4 / 3 + 0.75rem + 1.5rem);
    scroll-margin-block-start: calc(
      192px * attr(data-portrait-ratio type(<number>)) + 0.75rem + 1.5rem
    );

    @container main (width >= 32rem) {
      scroll-margin-block-start: 1.5rem;
    }
  }

  .member-role {
    color: var(--ink-weak);
    font-size: 0.85rem;
    font-weight: 400;
  }

  .links {
    margin: 1.5em 0 0;
    padding: 0;
    list-style: none;

    & > li {
      margin-block-end: 0.3em;
    }
  }

  .image-zoom {
    display: block flow;
    width: fit-content;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;

    & img {
      display: block flow;
    }

    @container main (width < 32rem) {
      cursor: auto;
      pointer-events: none;

      & img {
        pointer-events: auto;
      }
    }
  }

  .work > .image-zoom,
  .hangout-entry > .image-zoom {
    width: 100%;
  }

  .image-zoom-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: var(--gutter);
    border: 0;
    background: transparent;

    &[open] {
      display: block grid;
      place-items: center;
    }

    &::backdrop {
      background: rgb(0 0 0 / 0.92);
    }
  }

  .image-zoom-stage {
    display: block grid;
    place-items: center;
    max-width: 100%;
    max-height: 100%;

    & img {
      max-width: min(100%, var(--zoom-w, 100%));
      max-height: min(calc(100dvh - 2 * var(--gutter)), var(--zoom-h, 100%));
      width: auto;
      height: auto;
      object-fit: contain;
    }
  }

  .image-zoom-close {
    position: fixed;
    inset-block-start: var(--gutter);
    inset-inline-end: var(--gutter);
    display: block grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }

  ::view-transition-group(lightbox) {
    z-index: 1;
  }

  ::view-transition-old(lightbox),
  ::view-transition-new(lightbox) {
    animation-duration: 0.28s;
    height: 100%;
    object-fit: contain;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.2s;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(lightbox),
    ::view-transition-old(lightbox),
    ::view-transition-new(lightbox),
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
    }
  }

  .life {
    display: none;
    margin-block-start: 1.5rem;
  }

  .life[data-ready] {
    display: block flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .life-canvas {
    display: block flow;
    width: 100%;
    height: auto;
    aspect-ratio: 1847.33 / 519.58;
    outline: 1px solid var(--line);
    cursor: cell;
    touch-action: none;
  }

  .life-toolbar {
    display: block flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
  }

  .life-toolbar button {
    margin: 0;
    padding: 0.25rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    cursor: pointer;
  }

  .life-toolbar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .life-toolbar button:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
  }

  .life-gen {
    margin-inline-start: 0.3rem;
    color: var(--ink-weak);
    font-size: 0.85rem;
  }

  .retro-marquee,
  .retro-scroll {
    display: none;
  }

  html.retro {
    color-scheme: light;
    --ink: #000;
    --ink-weak: #333;
    --line: #000080;
    --paper: #fff;
    --link: #0000ee;
    --accent: #ff00ff;
    --header: #000080;
    --header-ink: #ffff33;
    --measure: 760px;
    --gutter: 16px;
    background-color: #120a4a;
    background-image:
      radial-gradient(circle, #fff 0 1.6px, transparent 2px),
      radial-gradient(circle, #ffe566 0 1.8px, transparent 2.3px),
      radial-gradient(circle, #ff9ad5 0 1.3px, transparent 1.8px);
    background-size: 97px 83px, 131px 107px, 73px 89px;
    background-position: 0 0, 40px 22px, 18px 50px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: none;

    & ::selection {
      background-color: #000080;
      color: #fff;
    }

    & body {
      width: 760px;
      margin: 18px auto 28px;
      background: #fff;
      color: #000;
      border: 8px ridge #ff66cc;
      font-family: "MS PGothic", "ＭＳ Ｐゴシック", Osaka,
        "Hiragino Maru Gothic ProN",
        sans-serif;
      font-size: 16px;
      line-height: 1.7;
      letter-spacing: 0;
      font-feature-settings: normal;
      text-autospace: normal;
    }

    & .site-header {
      position: relative;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      min-height: 0;
      padding: 0 0 8px;
      background-color: #000080;
      color: #ffff33;

      &::before {
        content: none;
      }

      & > nav {
        flex: 1 1 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 13px;

        & a,
        & a:visited {
          display: inline flow-root;
          padding: 1px 8px;
          background: #d4d0c8;
          color: #000;
          border: 2px outset #fff;
          font-weight: bold;
          text-decoration: none;
        }

        & a:active {
          border-style: inset;
        }

        & a[aria-current="page"],
        & a[aria-current="page"]:visited {
          background: #fff;
          color: #cc0000;

          &::after,
          & > span::after {
            content: none;
          }
        }
      }
    }

    & .retro-marquee {
      display: block flow;
      flex: 1 0 100%;
      order: -1;
      overflow: hidden;
      margin: 0;
      padding-block: 3px;
      background: #cc0000;
      color: #ffff00;
      font-weight: bold;
      font-size: 16px;
      line-height: 1.8;
    }

    & .retro-marquee-track {
      display: inline flow-root;
      white-space: nowrap;
      padding-inline-start: 100%;
      animation: retro-marquee 22s linear infinite;
    }

    & .retro-blink {
      color: #fff;
      animation: retro-blink 0.8s step-start infinite;
    }

    & .site-logo,
    & .site-logo:visited {
      margin-block-start: 8px;
      padding: 0;
      border: 0;
      background: none;
      color: #ffff33;
      text-decoration: none;
    }

    & .site-nav-toggle {
      display: none;
    }

    & .site-nav-wrap,
    & .site-nav-featured {
      flex: 0 1 auto;
    }

    & .site-nav,
    & .site-nav-wrap.is-open .site-nav {
      display: block flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      position: static;
      gap: 6px;
      margin: 0;
      min-width: 0;
      padding: 0;
      background: transparent;
      border: 0;
      color: #000;
    }

    & .site-main {
      max-width: none;
      padding: 12px 16px 8px;

      & img {
        border: 4px solid #000080;
        padding: 3px;
        background: #fff;
      }
    }

    & :is(h1, h2, h3, h4, p, dd, figcaption) {
      text-align: left;
      text-justify: auto;
    }

    & :is(h1, h2, h3, h4) {
      text-align: center;
      border: 0;
      font-family: "MS PGothic", "ＭＳ Ｐゴシック", Osaka,
        "Hiragino Maru Gothic ProN",
        sans-serif;
      letter-spacing: 0.08em;
    }

    & h1 {
      color: #ff0000;
      font-size: 28px;
    }

    & h2 {
      color: #0000cc;
      font-size: 20px;
    }

    & h3,
    & h4 {
      color: #cc0066;
    }

    & a {
      color: #0000ee;
    }

    & a:visited {
      color: #551a8b;
    }

    & .hangout-entries {
      margin-inline: 0;
    }

    & .site-footer {
      margin: 8px 12px 12px;
      padding: 8px;
      border: 4px ridge #c0c0c0;
      background: #fff;
      color: #000;
      font-size: 13px;
    }

    &::-webkit-scrollbar,
    & .carousel::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    @supports (scrollbar-gutter: stable) {
      @supports (-moz-appearance: none) {
        scrollbar-width: auto;
        scrollbar-color: #d4d0c8 #fff;
      }
    }

    & .carousel {
      scroll-snap-type: none;
      scrollbar-width: none;

      & > li {
        scroll-snap-align: none;
      }
    }

    & .retro-scroll {
      display: block flex;
      align-items: stretch;
      height: 17px;
      margin-top: 2px;
      user-select: none;
      touch-action: none;
    }

    & .retro-scroll-btn {
      flex: 0 0 17px;
      width: 17px;
      margin: 0;
      padding: 0;
      border: 2px outset #fff;
      background: #d4d0c8;
      cursor: pointer;

      &:active {
        border-style: inset;
      }

      &::before {
        content: "";
        display: block flow;
        width: 0;
        height: 0;
        margin: 3px auto 0;
        border-block: 4px solid transparent;
      }

      &.is-dec::before {
        border-inline-end: 5px solid #000;
      }

      &.is-inc::before {
        border-inline-start: 5px solid #000;
      }
    }

    & .retro-scroll-track {
      position: relative;
      flex: 1;
      background: #fff;
      border: 1px inset #808080;
    }

    & .retro-scroll-thumb {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      min-width: 17px;
      background: #d4d0c8;
      border: 2px outset #fff;
      box-sizing: border-box;
    }

    & .carousel-nav,
    & .carousel-dots {
      display: none;
    }

    @media (prefers-reduced-motion: reduce) {
      & .retro-marquee-track {
        padding-inline-start: 0;
        animation: none;
      }

      & .retro-blink {
        animation: none;
      }
    }
  }

  @keyframes retro-marquee {
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes retro-blink {
    50% {
      visibility: hidden;
    }
  }
}