/* 運指道場と同じ Solarized Dark の配色 */
:root {
  --base03: #002b36;
  --base02: #073642;
  --base01: #586e75;
  --base0: #839496;
  --base1: #93a1a1;
  --base2: #eee8d5;
  --cyan: #2aa198;
  --blue: #268bd2;
  --magenta: #d33682;
  --yellow: #b58900;
  --violet: #6c71c4;
  --green: #859900;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* 縦のスクロールバーの場所をいつも空けておく（短いページ〈作品の無い Photo など〉に切り替えても、左右にずれないように。#187） */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--base03);
  color: var(--base0);
  font-family:
    system-ui,
    -apple-system,
    'Hiragino Sans',
    'Noto Sans JP',
    sans-serif;
  line-height: 1.7;
}

main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 16px 48px;
}

header h1 {
  margin: 0;
  font-size: clamp(44px, 9vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--base2);
}

.title-link {
  color: inherit;
  text-decoration: none;
}

header h1 span {
  color: var(--cyan);
}

header p {
  margin: 8px 0 0;
  font-size: 15px;
}

h2 {
  margin: 56px 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--base01);
}

/* 作品の分類の見出し */
.category {
  margin: 28px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--base1);
}

h2 + .category {
  margin-top: 0;
}

.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--base02);
  border-radius: 12px;
  background: var(--base02);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s,
    transform 0.15s;
}

.work:hover,
.work:focus-visible {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.work img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.work h4 {
  margin: 0;
  font-size: 17px;
  color: var(--base2);
}

.work p {
  margin: 4px 0 6px;
  font-size: 13.5px;
}

.work .url {
  font-size: 12px;
  color: var(--cyan);
}

/* 支援（寄付） */
.support {
  padding: 18px;
  border-radius: 12px;
  background: var(--base02);
  font-size: 14px;
}

.support p {
  margin: 0 0 14px;
}

footer {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--base01);
}

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

/* プライバシーポリシーのページ */
.policy p {
  line-height: 1.8;
}

.policy__date {
  margin-top: 32px;
  color: var(--base01);
  font-size: 13px;
}

footer a {
  margin-left: 0.5em;
  color: inherit;
}

/* ABOUT のアイコンと紹介文 */
.about__intro {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about__intro p {
  margin: 0;
}

.about__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* ABOUT の SNS などへのリンク（アイコンはブランドの色） */
.profile-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 用途を 2 行で出すボタン（#206）があっても、全部のボタンを同じ高さにそろえる */
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px 16px;
  border: 1px solid var(--base02);
  border-radius: 12px;
  background: var(--base02);
  color: var(--base2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.15s,
    transform 0.15s;
}

.profile-link:hover,
.profile-link:focus-visible {
  border-color: var(--icon);
  transform: translateY(-2px);
}

.profile-link svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--icon);
}

/* 同じサービスが 2 つあるときの用途（「音楽」「ライブ配信」）は、名前の下に小さく出す（#206。狭い幅で全角かっこの途中から折り返して崩れていた） */
.profile-link small {
  display: block;
  color: var(--base1);
  font-size: 12px;
  font-weight: 400;
}

.profile-link--x {
  --icon: var(--base2);
}
.profile-link--bluesky {
  --icon: #1185fe;
}
.profile-link--pixiv {
  --icon: #0096fa;
}
.profile-link--youtube {
  --icon: #ff0000;
}
.profile-link--soundcloud {
  --icon: #ff5500;
}
.profile-link--mail {
  --icon: var(--cyan);
}

@media (max-width: 560px) {
  .profile-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* 読みもの（DOCUMENTS）の並べ替え・絞り込み（JavaScript が動くときだけ出る） */
.doc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.doc-tools[hidden] {
  display: none;
}

.doc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doc-filter button {
  padding: 4px 12px;
  border: 1px solid var(--base02);
  border-radius: 999px;
  background: none;
  color: var(--base1);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.doc-filter button:hover,
.doc-filter button:focus-visible {
  border-color: var(--cyan);
}

.doc-filter button[aria-pressed='true'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--base03);
  font-weight: 700;
}

.doc-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.doc-sort select {
  padding: 4px 8px;
  border: 1px solid var(--base02);
  border-radius: 8px;
  background: var(--base02);
  color: var(--base2);
  font: inherit;
}

/* 読みもの（DOCUMENTS）の一覧 */
.doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--base02);
}

.doc-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--base02);
}

/* 絞り込みで外れた記事（display: flex が hidden に勝つので消し直す） */
.doc-list li[hidden] {
  display: none;
}

.doc-list a {
  color: var(--base2);
  font-weight: 700;
  text-decoration: none;
}

.doc-list a:hover,
.doc-list a:focus-visible {
  color: var(--cyan);
}

.doc-list span {
  font-size: 13px;
}

/* 記事の分類と公開日 */
.doc-list .doc-list__meta {
  font-size: 12px;
  color: var(--base01);
}

/* ページ送りで、いまのページに入らない記事（トップの script が付ける） */
.doc-list li.is-over {
  display: none;
}

/* DOCUMENTS のページ送り */
.doc-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.doc-pager[hidden] {
  display: none;
}

.doc-pager button {
  min-width: 36px;
  padding: 6px 12px;
  border: 1px solid var(--base02);
  border-radius: 999px;
  background: none;
  color: var(--base1);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.doc-pager button:hover:not(:disabled),
.doc-pager button:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.doc-pager button[aria-current='page'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--base03);
  font-weight: 700;
}

.doc-pager button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 段の見出しの下の説明（Music・Apps など） */
.section-lead {
  margin: -4px 0 12px;
  color: var(--base01);
  font-size: 13px;
}

/* カテゴリの記事の一覧のページ（#117） */
.category-page__back a {
  color: var(--cyan);
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 20px;
}

.category-nav a {
  padding: 4px 12px;
  border: 1px solid var(--base02);
  border-radius: 999px;
  color: var(--base1);
  font-size: 13px;
  text-decoration: none;
}

.category-nav a:hover,
.category-nav a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.category-nav a[aria-current='page'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--base03);
  font-weight: 700;
}

.doc-list__empty {
  color: var(--base01);
  font-size: 13px;
}

.category-page__back {
  margin-top: 24px;
  font-size: 13px;
}

/* 置き場のページ（Art・Photo・Music・Apps）は同じ幅にする（切り替えても見出しの位置がずれないように。#185） */
.illust-page,
.music-page,
.apps-page {
  max-width: 1080px;
}

/* イラスト置き場（/art。#121）: サムネイルの並びと、押すと大きく見る画面 */

.illust {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.illust__item {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--base02);
}

.illust__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.2s;
}

.illust__item:hover img,
.illust__item:focus-visible img {
  transform: scale(1.04);
}

.illust__caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 2px 0;
  color: var(--base1);
  font-size: 13px;
}

.illust__caption time {
  flex: none;
  color: var(--base01);
  font-size: 12px;
}

.illust__empty {
  color: var(--base01);
}

.illust-viewer {
  max-width: min(1200px, 96vw);
  max-height: 96vh;
  padding: 12px;
  border: 1px solid var(--base01);
  border-radius: 12px;
  background: var(--base03);
  color: var(--base1);
}

.illust-viewer::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.illust-viewer img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 6px;
  cursor: zoom-in;
}

/* 実際のサイズ（#174）: 画像だけを画面いっぱいの暗い背景に重ね、縮めずに出す。はみ出す分はスクロールで見る */
.illust-actual {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  overflow: auto;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}

.illust-actual::backdrop {
  background: rgba(0, 0, 0, 0.92);
}

/* 画面より小さい画像は真ん中に */
.illust-actual img {
  display: block;
  max-width: none;
  margin: auto;
  min-height: 0;
}

.illust-actual[open] {
  display: grid;
  place-items: center;
}

.illust-viewer__hint {
  margin: 6px 0 0;
  color: var(--base01);
  font-size: 12px;
  text-align: center;
}

/* 閉じるボタンは画像の右上に重ねる（場所を取ると画像が左に寄るので。#174） */
.illust-viewer__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(7, 54, 66, 0.85);
  color: var(--base2);
  font-size: 20px;
  cursor: pointer;
}

.illust-viewer__title {
  margin: 10px 0 0;
  color: var(--base2);
  font-weight: 700;
}

.illust-viewer__note {
  margin: 4px 0 0;
  font-size: 14px;
}

/* 音楽置き場（/music。#122） */
.tracks {
  display: grid;
  gap: 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.track__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--base2);
}

.track__head time {
  flex: none;
  color: var(--base01);
  font-size: 12px;
}

.track__player {
  display: block;
  width: 100%;
  height: 166px;
  border: 0;
  border-radius: 8px;
}

.track__note,
.track__article {
  margin: 6px 0 0;
  font-size: 13px;
}

/* 題の下のもの（開いたプレーヤー・一言・紹介の記事）は、題の文字の位置まで字下げする（#184）。
   一言（出展したイベント・収録アルバムなど）は左に細い線を付けて、題の補足だとわかるようにする */
.track__media > :not(summary),
.track__note,
.track__article {
  margin-left: 1em;
}

.track__note {
  padding-left: 10px;
  border-left: 2px solid var(--base02);
  color: var(--base0);
}

.track__article a {
  color: var(--cyan);
}

.track__empty {
  color: var(--base01);
}

/* 置き場のページの並べ替え・絞り込み（#136。public/portfolio.js が中身を作る）。ボタンはトップの DOCUMENTS と同じ見た目で、色はページの色 */
.portfolio-tools {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.portfolio-tools[hidden],
.portfolio-empty[hidden],
[data-portfolio-group][hidden] {
  display: none;
}

.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.portfolio-filter__label {
  min-width: 3em;
  color: var(--base01);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.portfolio-filter button {
  padding: 4px 12px;
  border: 1px solid var(--base02);
  border-radius: 999px;
  background: none;
  color: var(--base1);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.portfolio-filter button:hover,
.portfolio-filter button:focus-visible {
  border-color: var(--page-color, var(--cyan));
}

.portfolio-filter button[aria-pressed='true'] {
  border-color: var(--page-color, var(--cyan));
  background: var(--page-color, var(--cyan));
  color: var(--base03);
  font-weight: 700;
}

.portfolio-sort {
  justify-self: start;
}

.portfolio-empty {
  margin: 12px 2px;
  color: var(--base01);
  font-size: 13px;
}

/* イラスト置き場の並べ方の切り替え（タイル・一列） */
.illust-layout {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.illust-layout[hidden] {
  display: none;
}

.illust-layout button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--base02);
  border-radius: 8px;
  background: none;
  color: var(--base1);
  cursor: pointer;
}

.illust-layout button svg {
  fill: currentColor;
}

.illust-layout button:hover,
.illust-layout button:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.illust-layout button[aria-pressed='true'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--base03);
}

/* タイルのボタンには、いまの列の数を小さく添える（#137） */
.illust-layout button[data-layout='tile'] {
  position: relative;
}

.illust-layout__count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* タイルの列の数（#137）。スマホでは画像が小さくなるので、3・4 列のときは題を隠して間を詰める */
.illust--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.illust--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.illust--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .illust--cols-4,
  .illust--cols-3 {
    gap: 6px;
  }

  .illust--cols-4 .illust__caption,
  .illust--cols-3 .illust__caption {
    display: none;
  }

  .illust--cols-2 {
    gap: 10px;
  }
}

/* 一列: 大きい画像を、切り取らずに横幅いっぱいで縦に並べる */
.illust--single {
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.illust--single .illust__item img {
  aspect-ratio: auto;
  object-fit: contain;
}

.illust--single .illust__item:hover img,
.illust--single .illust__item:focus-visible img {
  transform: none;
}

/* サイトの中のページへの並び（見出しの下。#125・#131）: 4 つを同じ幅で 1 行に並べる（スマホでも） */
.site-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 440px;
  margin: 14px 0 24px;
}

.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid var(--base01);
  border-radius: 999px;
  color: var(--base1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.site-nav a[aria-current='page'] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--base03);
}

/* トップの WORKS: 作ったものの置き場へのボタン（#125・#132）。ページの色の四角にアイコン、名前、日本語、右下に矢印 */
.works-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.works-nav a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 16px 18px;
  border: 1px solid var(--base02);
  border-radius: 16px;
  background: var(--base02);
  color: var(--base1);
  text-decoration: none;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    transform 0.15s;
}

.works-nav__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--page-color) 18%, transparent);
  transition:
    background-color 0.15s,
    color 0.15s;
}

.works-nav strong {
  font-size: 15px;
  letter-spacing: 0.1em;
}

.works-nav a > span:not(.works-nav__icon) {
  color: var(--base01);
  font-size: 12px;
}

.works-nav__arrow {
  position: absolute;
  top: 18px;
  right: 16px;
  opacity: 0.35;
  transition:
    opacity 0.15s,
    transform 0.15s;
}

@media (max-width: 640px) {
  .works-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 並びのアイコンは、選んでいないときはページの色で（#132） */
.site-nav .page-icon {
  flex-shrink: 0;
  color: var(--page-color);
}

.site-nav a[aria-current='page'] .page-icon {
  color: inherit;
}

/* ページごとの色（#125）: Solarized の落ち着いた色で、Art は青・Photo はシアン・Music は緑・Apps はバイオレット（#155・#158） */
[data-page='art'] {
  --page-color: var(--blue);
}

[data-page='photo'] {
  --page-color: var(--cyan);
}

[data-page='music'] {
  --page-color: var(--green);
}

[data-page='apps'] {
  --page-color: var(--violet);
}

.works-nav a {
  position: relative;
}

.works-nav__icon,
.works-nav strong {
  color: var(--page-color);
}

.works-nav a:hover,
.works-nav a:focus-visible {
  border-color: var(--page-color);
  background: color-mix(in srgb, var(--page-color) 10%, var(--base02));
  transform: translateY(-2px);
}

.works-nav a:hover .works-nav__icon,
.works-nav a:focus-visible .works-nav__icon {
  background: var(--page-color);
  color: var(--base03);
}

.works-nav a:hover .works-nav__arrow,
.works-nav a:focus-visible .works-nav__arrow {
  opacity: 1;
  transform: translateX(3px);
  color: var(--page-color);
}

@media (prefers-reduced-motion: reduce) {
  .works-nav a,
  .works-nav__arrow {
    transition: none;
    transform: none !important;
  }
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: var(--page-color);
  color: var(--page-color);
}

.site-nav a[aria-current='page'] {
  border-color: var(--page-color);
  background: var(--page-color);
  color: var(--base03);
}

/* DOCUMENTS で、記事がまだ無い分類を選んだとき */
.doc-empty {
  margin: 12px 2px;
  color: var(--base01);
  font-size: 13px;
}

.doc-empty[hidden] {
  display: none;
}

/* 404 ページ（#141） */
.notfound__code {
  /* 1 色（zplt.net の「.」と同じシアン） */
  margin: 40px 0 0;
  color: var(--cyan);
  font-size: clamp(72px, 22vw, 140px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.notfound__title {
  margin: 12px 0 8px;
  color: var(--base2);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
}

.notfound__lead {
  margin: 0 0 20px;
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notfound__links a {
  color: var(--cyan);
}

/* 読み上げにだけ出す文字（固定の印「（固定）」など。#147） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 固定（#147）したものは一番上に出るだけで、枠などの見た目は変えない（#159） */

/* 共有のボタン（#167・#168）: ページの下に「X でポスト」「リンクをコピー」を同じ形のボタンで並べる（中身は scripts/lib/share.mjs） */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 48px 0 0;
}

.share p {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--base01);
}

.share a,
.share button {
  padding: 6px 14px;
  border: 1px solid var(--base01);
  border-radius: 999px;
  background: none;
  color: var(--base1);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.share a:hover,
.share a:focus-visible,
.share button:hover,
.share button:focus-visible {
  border-color: var(--cyan);
  color: var(--base2);
}

.share button[hidden] {
  display: none;
}

/* YouTube・SoundCloud の押したら読む埋め込み（#170。中身は scripts/lib/video.mjs、押したらプレーヤーにするのは public/site.js）。
   プレーヤーと同じ大きさで出しておき、差し替えても周りがずれないようにする */
.embed {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 動画: サムネイルの真ん中に再生のしるし */
.embed--video {
  width: 100%;
  height: 100%;
}

.embed--video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.embed--video::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 68px;
  height: 48px;
  margin: auto;
  border-radius: 14px;
  background: rgba(0, 43, 54, 0.8)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23eee8d5' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    center / 26px no-repeat;
  transition: background-color 0.15s;
}

.embed--video:hover::after,
.embed--video:focus-visible::after {
  background-color: var(--cyan);
}

/* 曲: プレーヤーと同じ高さの帯に、再生ボタン・曲名・「SoundCloud で再生」 */
.embed--audio {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 166px;
  padding: 0 20px;
  border: 1px solid var(--base02);
  border-radius: 8px;
  background: var(--base02);
  color: var(--base2);
  font-weight: 700;
}

.embed--audio::before {
  content: '';
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cyan)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23002b36' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    center / 26px no-repeat;
}

.embed--audio::after {
  content: 'SoundCloud で再生';
  margin-left: auto;
  color: var(--base01);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.embed--audio:hover,
.embed--audio:focus-visible {
  border-color: var(--cyan);
}

/* Music の曲（#175）: 題をクリックすると YouTube・SoundCloud が開く（details）。題の横に、どこで聴けるかを出す */
.track__media > summary {
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.track__media > summary::-webkit-details-marker {
  display: none;
}

/* 開くしるし（閉じているとき ▸、開いているとき ▾） */
.track__media > summary strong::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--page-color, var(--cyan));
  transition: transform 0.15s;
}

.track__media[open] > summary strong::before {
  transform: rotate(90deg);
}

.track__media > summary:hover strong,
.track__media > summary:focus-visible strong {
  text-decoration: underline;
}

/* 題（一段大きく）と、その下の合作のアーティスト名・ジャンル（#188） */
.track__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.track__heading strong {
  font-size: 18px;
}

.track__credit {
  margin-left: 1em;
  color: var(--base0);
  font-size: 13px;
}

.track__media[open] > summary {
  margin-bottom: 10px;
}

/* 動画はプレーヤーと同じ 16:9 */
.track__video {
  margin: 0 0 10px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--base02);
}

.track__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}