/*
  トークン
  - 色は役割で名付ける。路線色（--line-*）は「どの系統の作品か」だけを表し、
    必ず W / R / M のコードと名前を併記する（色だけで区別させない）。
  - コントラスト（WCAG）: 本文 16.9:1（明）/ 14.4:1（暗）、補助文 6.6:1 / 7.2:1、
    リンク 6.3:1 / 7.7:1、状態 6.5:1 / 8.9:1。
*/
:root {
  --page: #f3f3f1;
  --plate: #ffffff;
  --content: #1b1d21;
  --secondary: #585d66;
  --rule: #dcdcd8;
  --link: #0b62a8;
  --live: #1d6b3a;
  --placeholder: #e7e7e3;

  --line-w: #c8471b; /* Web・ブラウザ */
  --line-r: #00866b; /* 鉄道ツール */
  --line-m: #5b46b8; /* Minecraft */
  --line-main: #25407a; /* 駅名標の本線 */

  --tile-0: #e8e8e4;
  --tile-1: #e1e1dc;
  --tile-2: #d8d8d3;
  --tile-3: #cececa;
  --tile-icon-opacity: .12;
  --switch-on: #34c759;
  --switch-off: #e9e9eb;
  --shadow-near: rgb(0 0 0 / .08);
  --shadow-far: rgb(30 30 40 / .32);
  color-scheme: light;

  --radius: 12px;
  --max: 1000px;

  /* 日本語も英字も LINE Seed JP に統一（角がわずかに丸く、駅の案内表示のような親しみがある） */
  --font-latin: "LINE Seed JP", "Helvetica Neue", Arial, sans-serif;
  /* 英語の添え書きは手書き風に */
  --font-hand: "Caveat", "Segoe Print", cursive;
  font-family: "LINE Seed JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  font-size: 100%;
}

/* 配色は OS の設定に従い、上部のスイッチで選んだときはそちらを優先する（data-theme） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #111316;
    --plate: #1b1e23;
    --content: #eceef1;
    --secondary: #a6abb3;
    --rule: #2c3036;
    --link: #6cb6f5;
    --live: #6fd193;
    --placeholder: #24282e;
    --tile-0: #181b1f;
    --tile-1: #1d2025;
    --tile-2: #23262c;
    --tile-3: #2a2e34;
    --tile-icon-opacity: .1;
    --switch-off: #39393d;
    --shadow-near: rgb(0 0 0 / .4);
    --shadow-far: rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #111316;
  --plate: #1b1e23;
  --content: #eceef1;
  --secondary: #a6abb3;
  --rule: #2c3036;
  --link: #6cb6f5;
  --live: #6fd193;
  --placeholder: #24282e;
  --tile-0: #181b1f;
  --tile-1: #1d2025;
  --tile-2: #23262c;
  --tile-3: #2a2e34;
  --switch-off: #39393d;
  --shadow-near: rgb(0 0 0 / .4);
  --shadow-far: rgb(0 0 0 / .7);
  color-scheme: dark;
}

@media (prefers-contrast: more) {
  :root { --secondary: var(--content); --rule: var(--content); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--content);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 12px;
  background: var(--plate);
  z-index: 20;
}
.skip:focus { top: 8px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(16px, calc((100% - var(--max)) / 2));
  min-height: 56px;
  background: var(--page);
  border-bottom: 1px solid var(--rule);
}
.brand { color: var(--content); font-weight: 700; text-decoration: none; padding: 10px 0; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* ダーク／ライトのスイッチ（iOS の UISwitch に寄せる：51×31、オンは緑） */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--secondary);
  font: inherit;
  font-size: .875rem;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-track {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--switch-off);
}
.ts-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 3px 1px rgb(0 0 0 / .06), 0 0 0 .5px rgb(0 0 0 / .04);
}
.theme-switch[aria-checked="true"] .ts-track { background: var(--switch-on); }
.theme-switch[aria-checked="true"] .ts-knob { left: 22px; }
/* 押している間は、つまみが少し横に伸びる */
.theme-switch:active .ts-knob { width: 33px; }
.theme-switch[aria-checked="true"]:active .ts-knob { left: 16px; }
.theme-switch.is-ready .ts-track { transition: background-color .25s ease; }
.theme-switch.is-ready .ts-knob { transition: left .32s cubic-bezier(.3, 1.3, .5, 1), width .2s ease; }
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .ts-track { outline: 3px solid var(--link); outline-offset: 2px; }

/* 配色の切り替え中だけ、色をなめらかに移す */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, box-shadow .45s ease !important;
}
.theme-anim .ts-knob { transition: left .32s cubic-bezier(.3, 1.3, .5, 1), width .2s ease, box-shadow .45s ease !important; }
.nav a {
  padding: 12px 10px;
  font-size: .9375rem;
  color: var(--secondary);
  text-decoration: none;
}
.nav a:hover { color: var(--content); }

main { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* ---------- 舞台：灰色の角丸の四角の上に nekr とキャッチコピー ---------- */
/* 舞台は画面の端から端まで広げる。はみ出しで横スクロールが出ないよう body で切る */
body { overflow-x: clip; }
.stage {
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: 0 16px 96px;
  overflow: hidden;
}
.stage-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }

/* 背景の四角（tiles.js が作って動かす） */
.tiles { position: absolute; inset: 0; pointer-events: none; }
.tile {
  position: absolute;
  background: var(--tile);
  will-change: transform;
}
/* 四角に薄く貼る作品のアイコン（色を抜いて、背景になじませる） */
.tile { display: grid; place-items: center; }
.tile-icon {
  width: 42%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 22%;
  filter: grayscale(1) contrast(.9);
  opacity: var(--tile-icon-opacity);
}
.tile.s0 { --tile: var(--tile-0); }
.tile.s1 { --tile: var(--tile-1); }
.tile.s2 { --tile: var(--tile-2); }
.tile.s3 { --tile: var(--tile-3); }

/* nekr を画面いっぱいに */
.wordmark-wrap {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: calc(100svh - 56px);
  padding: 48px 0;
  text-align: center;
}
.wordmark {
  margin: 0;
  /* 溶けたような極太の Climate Crisis */
  font-family: "Climate Crisis", var(--font-latin);
  font-weight: 400;
  font-size: clamp(4.5rem, 20vw, 16rem);
  line-height: .9;
  letter-spacing: -.02em;
}
.wordmark-sub {
  margin: 18px 0 0;
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: clamp(.875rem, 1.6vw, 1.125rem);
  letter-spacing: .5em;
  padding-left: .5em;
  color: var(--secondary);
}

/* 区切り線：両側の細い線と、真ん中の無限（∞）。画面に入ると引かれる（tiles.js が .is-drawn を付ける） */
.divider { display: flex; align-items: center; gap: 14px; margin: 0 0 56px; }
.divider-line { flex: 1; height: 1.5px; background: var(--content); opacity: .5; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.divider-line:first-child { transform-origin: right center; }
.divider-line:last-child { transform-origin: left center; }
.divider-loop { flex: none; width: 56px; height: 28px; overflow: visible; }
.divider-loop path { fill: none; stroke: var(--content); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) .2s; }
.divider.is-drawn .divider-line { transform: scaleX(1); }
.divider.is-drawn .divider-loop path { stroke-dashoffset: 0; }


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

/* 駅ナンバリング風の記号。白地＋路線色の枠＋黒文字なので、路線色に関係なく読める */
.code {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  background: #fff;
  color: #111;
  border: 3px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-latin);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding-top: .12em;
  flex: none;
}
/* 作品の番号（W01 など）は路線色の文字で */
.num { font-family: var(--font-latin); font-weight: 600; font-size: .9375rem; letter-spacing: .06em; color: var(--line); }
.g-count { font-family: var(--font-latin); }

/* ---------- 環状線（メインのキャッチコピー） ---------- */
.loop {
  display: grid;
  grid-template-columns: 220px 1fr;
  /* 説明を開いて文が伸びても、環状線の図は上にとどまって動かない */
  align-items: start;
  gap: 40px;
  margin-top: 48px;
}
.loop-map { width: 100%; height: auto; color: var(--content); overflow: visible; }
.loop-half {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  pointer-events: none;
  transition: opacity .2s ease, stroke-width .2s ease;
}
.loop-half.is-hover { stroke-width: 13; }
/* 押せる範囲は見えない。半円の内側全体と、線の外側 14px ほどまで */
.loop-hit {
  fill: transparent;
  pointer-events: all;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
}
.loop-arrow, .loop-station, .loop-train, .loop-name, .loop-en { pointer-events: none; }
/* 片方だけ開いているときは、もう半周を薄くして「いまどの区間か」を示す */
.loop[data-open="r"] .loop-half[data-half="l"],
.loop[data-open="l"] .loop-half[data-half="r"] { opacity: .22; }
.loop-arrow { fill: none; stroke: var(--page); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.loop-station { fill: var(--plate); stroke: currentColor; stroke-width: 4; }
/* 環状線の上をぐるぐる回り続ける列車 */
.loop-train rect { fill: var(--plate); stroke: currentColor; stroke-width: 3; }
.loop-train { transform-origin: 120px 120px; animation: loop-run 14s linear infinite; }
@keyframes loop-run { to { transform: rotate(360deg); } }
.loop-name { fill: currentColor; font-size: 17px; font-weight: 700; text-anchor: middle; }
.loop-en { fill: var(--secondary); font-size: 12px; font-weight: 500; text-anchor: middle; letter-spacing: .06em; }

.catch-item + .catch-item { margin-top: 8px; }
.catch-item summary {
  position: relative;
  display: block;
  padding: 6px 48px 6px 0;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
  list-style: none;
  border-radius: 8px;
}
.catch-item summary::-webkit-details-marker { display: none; }
/* 開閉の目印（＋ が × に回る） */
.catch-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  color: var(--secondary);
  transition: transform .2s ease;
}
.catch-panel { overflow: hidden; }
.catch-item[open]:not(.is-closing) summary::after { transform: rotate(45deg); }
.catch-item summary:hover::after { border-color: var(--secondary); color: var(--content); }

.catch {
  display: block;
  text-wrap: balance;
  font-size: clamp(1.875rem, 5.6vw, 3rem);
  font-weight: 800;
  line-height: 1.3;
}
.catch-en {
  display: block;
  margin-top: 2px;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--secondary);
}
.catch-body { margin: 10px 0 8px; max-width: 34em; }
.catch-end { margin: 18px 0 0; font-size: 1.25rem; font-weight: 700; }
.catch-sub { margin: 6px 0 0; font-weight: 500; color: var(--secondary); }

/* ---------- Profile：nekr のアイコンから吹き出しで話す形 ---------- */
.profile-section { max-width: 820px; padding-top: 24px; }
.profile-title {
  margin: 0 0 18px;
  font-family: var(--font-hand);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--secondary);
}
.speech { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; }
.speech-avatar { width: 96px; height: 96px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px var(--shadow-near), 0 10px 24px -12px var(--shadow-far); }
.speech-bubbles { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bubble {
  position: relative;
  margin-top: 18px;
  padding: 20px 26px;
  border-radius: 24px;
  background: var(--plate);
  font-size: 1.0625rem;
  line-height: 1.85;
  box-shadow: 0 1px 2px var(--shadow-near);
}
.bubble p { margin: 0 0 1em; }
.bubble p:last-child { margin-bottom: 0; }
/* アイコンを指すしっぽ */
.bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 22px;
  width: 22px;
  height: 18px;
  background: var(--plate);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.bubble-quote { margin: 1.3em 0 !important; font-size: 1.25rem; }
.speech-note { margin: 6px 0 0 8px; font-size: .9375rem; color: var(--secondary); }
.speech-note a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; vertical-align: middle; }
.speech-note a:hover { text-decoration: underline; }
/* 吹き出しの下に並べる各種リンク（Contact と同じボタン） */
.links { list-style: none; margin: 4px 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 現在位置（railnav.js）：ドア上の液晶の路線図のように ---------- */
.rail, .rail-strip { display: none; }
.rail {
  position: fixed;
  z-index: 5;
  right: 16px;
  top: 50%;
  width: 150px;
  opacity: 0;
  transform: translate(12px, -50%);
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.show-rail .rail { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.rail-line { list-style: none; margin: 0; padding: 0; }
.rail-line li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  font-size: .75rem;
  color: var(--secondary);
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
}
/* 駅と駅をつなぐ線 */
.rail-line li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c);
}
.rail-line li:first-child::before { top: 50%; }
.rail-line li:last-child::before { bottom: 50%; }
.rail-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--page);
  border: 3px solid var(--c);
  box-sizing: border-box;
  transition: transform .3s ease, background-color .3s ease;
}
.rail-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rail-line li:hover .rail-name { color: var(--content); }
/* 通り過ぎた駅は灰色に */
.rail-line li.is-passed::before { background: var(--rule); }
.rail-line li.is-passed .rail-dot { border-color: var(--rule); }
/* 今いる駅 */
.rail-line li.is-current .rail-dot { background: var(--c); transform: scale(1.3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.rail-line li.is-current .rail-name { color: var(--content); font-weight: 700; font-size: .8125rem; }
.rail-line li.is-current .rail-name::before {
  content: "ただいま";
  display: block;
  font-size: .625rem;
  font-weight: 700;
  color: var(--c);
  line-height: 1.2;
}
.rail-line li.is-current { height: 40px; }

/* 狭い画面：上部メニューの下の細い帯 */
.rail-strip {
  position: fixed;
  z-index: 9;
  top: 56px;
  left: 0;
  right: 0;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  background: var(--page);
  border-bottom: 1px solid var(--rule);
  font-size: .8125rem;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity .25s ease, transform .3s ease;
}
.show-rail .rail-strip { opacity: 1; transform: none; }
.rs-now {
  flex: none;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--c);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
}
.rs-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.rs-next { flex: none; max-width: 42%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--secondary); }

@media (min-width: 1360px) { .rail { display: block; } }
@media (max-width: 1359px) {
  .rail-strip { display: flex; }
  html { scroll-padding-top: 100px; }
}

/* ---------- 文字が1文字ずつ浮かび上がる演出（motion.js） ---------- */
.reveal .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.38em);
  filter: blur(6px);
  transition: opacity .5s ease, transform .75s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
  transition-delay: calc(var(--i) * 26ms);
}
/* 長い説明文は、全体が長くなりすぎないよう間隔を詰める */
.catch-body.reveal .ch { transition-delay: calc(var(--i) * 12ms); }
.reveal.is-in .ch { opacity: 1; transform: none; filter: none; }

/* ---------- 使ってきた言語・技術とAIが横に流れる帯 ---------- */
.ticker {
  margin-top: 64px;
  padding: 12px 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* 見出しは左右に分けて同じ行に */
.ticker-head { display: flex; justify-content: space-between; gap: 16px; padding: 0 20px 4px; }
.ticker-cap {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary);
}
.ticker-row {
  overflow: hidden;
  /* 両端をふわっと消す */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 48s linear infinite;
}
.ticker-row.is-rev .ticker-track { animation-direction: reverse; animation-duration: 36s; }
.ticker-row:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-track ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker-track li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-latin);
  font-size: clamp(1rem, 2.2vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--secondary);
}
/* 名前の間には、路線色の小さな駅の丸を順番に */
.ticker-track li::after {
  content: "";
  flex: none;
  width: .2em;
  height: .2em;
  margin: 0 .75em;
  border-radius: 50%;
  background: var(--dot, var(--line-w));
}
.ticker-track li:nth-child(3n+2) { --dot: var(--line-r); }
.ticker-track li:nth-child(3n) { --dot: var(--line-m); }

/* ---------- 路線セクション（路線図：縦の線の上に、作品を駅として並べる） ---------- */
.line { position: relative; padding: 64px 0 8px 64px; }
.line::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 92px;
  bottom: 0;
  width: 12px;
  border-radius: 6px;
  background: var(--line);
}
.line-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 36px -64px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
}
.line-title .code {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-width: 5px;
  border-radius: 10px;
  font-size: 1.625rem;
}
.line-lead { margin: -20px 0 36px; color: var(--secondary); }

.work {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 36px;
  padding: 0 0 64px;
}
.work > .gallery, .work > .thumb { order: 2; }
/* 駅の丸 */
.work::before, .note::before {
  content: "";
  position: absolute;
  left: -49px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--page);
  border: 5px solid var(--line);
  box-sizing: border-box;
}
.work h3, .note h3 { margin: 6px 0 14px; font-size: 1.75rem; font-weight: 800; line-height: 1.35; }
.work p { margin: 0 0 12px; }

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  font-size: .875rem;
  font-weight: 700;
  color: var(--secondary);
}
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--live); }
.contest { padding: 0 8px; border: 1px solid var(--rule); border-radius: 999px; font-weight: 500; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.thumb, .avatar {
  position: relative;
  align-self: start;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: var(--placeholder);
}
.thumb::after, .avatar::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: .875rem;
  color: var(--secondary);
}
.thumb img, .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar { overflow: hidden; }

/* ---------- 作品の画像・動画（複数あるときは切り替え） ---------- */
.gallery { align-self: start; min-width: 0; }
.g-frame, .thumb {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 10);
  border-radius: 8px;
  overflow: hidden;
  background: var(--placeholder);
  /* 写真が紙から少し浮いて見える影 */
  box-shadow: 0 1px 2px var(--shadow-near), 0 14px 32px -12px var(--shadow-far);
}
.g-slide { margin: 0; position: absolute; inset: 0; }
.g-slide[hidden] { display: none; }
.g-slide img, .g-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 動画の操作（video.js）。動画の上に重ねるので、テーマに関係なく暗い下地に白 */
.vp video { cursor: url("media/cursor-pointer.svg") 5 4, pointer; }
.vp.is-idle, .vp.is-idle video { cursor: none; }
.vp-big {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .92);
  color: #1b1d21;
  box-shadow: 0 6px 20px rgb(0 0 0 / .3);
  transition: opacity .2s ease, scale .2s ease;
}
.vp-big svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.vp-big .i-pause { display: none; }
.vp-big:hover { scale: 1.06; }
.vp.is-playing .vp-big { opacity: 0; scale: .8; pointer-events: none; }
.vp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 24px 8px 6px;
  background: linear-gradient(to top, rgb(0 0 0 / .62), transparent);
  color: #fff;
  transition: opacity .25s ease;
}
.vp:not(.is-playing) .vp-bar { opacity: 0; }
.vp:not(.is-playing):hover .vp-bar, .vp:focus-within .vp-bar { opacity: 1; }
.vp.is-idle .vp-bar { opacity: 0; }
.vp-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
}
.vp-btn:hover { background: rgb(255 255 255 / .16); }
.vp-btn svg { width: 22px; height: 22px; fill: currentColor; }
.vp-btn .i-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vp-btn .i-fill { fill: currentColor; }
.vp-play .i-pause, .vp.is-playing .vp-play .i-play { display: none; }
.vp.is-playing .vp-play .i-pause { display: block; }
.vp-mute .i-x, .vp.is-muted .vp-mute .i-wave { display: none; }
.vp.is-muted .vp-mute .i-x { display: inline; }
.vp-time { flex: none; padding: 0 6px; font-size: .75rem; font-variant-numeric: tabular-nums; }
/* 再生位置と音量のスライダー：Music ページの音量と同じ形 */
.vp-range {
  --v: 0%;
  height: 24px;
  margin: 0;
  background: none;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
  -webkit-appearance: none;
  appearance: none;
}
.vp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v), rgb(255 255 255 / .3) var(--v)); }
.vp-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .3); }
.vp-range::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.vp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.vp-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.vp-seek { flex: 1; min-width: 0; margin: 0 6px; }
/* 音量：ふだんはミュートボタンだけ。乗せるかキーで選ぶと、横にスライダーが伸びる */
.vp-vol { display: flex; align-items: center; flex: none; }
.vp-volume { width: 0; opacity: 0; transition: width .2s ease, opacity .2s ease, margin .2s ease; }
.vp-vol:hover .vp-volume, .vp-vol:focus-within .vp-volume { width: 72px; margin: 0 8px 0 2px; opacity: 1; }
.vp-big:focus-visible, .vp-btn:focus-visible, .vp-range:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vp:fullscreen { background: #000; }
@media (max-width: 480px) {
  .vp-time { display: none; }
}
.g-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.g-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--plate);
  color: var(--content);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
}
.g-btn:hover { border-color: var(--secondary); }
.g-count {
  min-width: 4.5em;
  text-align: center;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
}

/* 作品のアイコン。画像とは別に、タイトルの横に置く */
.work-title { display: flex; align-items: center; gap: 12px; }
.app-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px var(--rule);
}

.points { margin: 0 0 14px; padding-left: 1.2em; font-size: 1rem; }
.points li { margin-bottom: 4px; }
.points li::marker { color: var(--line); }

.tech { font-size: .875rem; color: var(--secondary); }

/* 外部ページへのリンク（BOOTHで見る など）。枠で囲ってボタンとして見せる */
.go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--link);
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.go:hover { background: var(--link); color: var(--plate); }
.go:active { transform: scale(.98); }
.ext { font-size: .875em; }
/* リンク先のサービスのロゴ。X と GitHub は文字と同じ色、YouTube は赤い再生ボタン */
.go:has(.go-icon) { padding-left: 14px; }
.go-icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.go-icon-yt { width: 24px; fill: #ff0033; }
.go-icon-yt .go-icon-play { fill: #fff; }
.go.todo { color: var(--secondary); border-color: var(--rule); border-style: dashed; font-weight: 500; }
.go.todo:hover { background: none; color: var(--secondary); }

/* 小さい作品も、ほかと同じ駅として並べる */
.pair { display: contents; }
.work-title { overflow-wrap: anywhere; }
/* 店名・アプリ名など、途中で折り返さない部分 */
.nb { white-space: nowrap; }
.work-title .wt { min-width: 0; }
/* 見出しは文節で折り返し、行の長さをそろえる（「公式サイ／ト」のような泣き別れを防ぐ） */
.work h3, .note h3, .line-title, .catch, .profile-quote, .diary-title, .entry-head h2 {
  word-break: auto-phrase;
  text-wrap: balance;
}

.note { position: relative; max-width: 40em; padding: 0 0 24px; }
.note p { margin: 0; }

.note p + p { margin-top: 16px; }
.app-icon-sm { width: 24px; height: 24px; border-radius: 6px; }


/* 作品のその後（本文とは分けて、控えめに添える） */
.next-step {
  margin: 4px 0 0 !important;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: var(--placeholder);
  font-size: .9375rem;
}

/* ---------- 日記ページ ---------- */
.nav a[aria-current="page"] { color: var(--content); font-weight: 700; }
.diary { padding-top: 40px; max-width: 760px; }
.diary-title { margin: 0 0 20px; font-size: 2rem; line-height: 1.3; }
.diary-toc ul { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--rule); }
.diary-toc li { border-bottom: 1px solid var(--rule); }
.diary-toc a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  min-height: 44px;
  padding: 10px 2px;
  color: var(--content);
  text-decoration: none;
}
.diary-toc a:hover { text-decoration: underline; }
.diary-toc time, .entry-head time {
  flex: none;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
}
.entry {
  padding: 24px 28px;
  margin-bottom: 16px;
  background: var(--plate);
  border-radius: var(--radius);
  scroll-margin-top: 72px;
}
.entry-head h2 { margin: 2px 0 14px; font-size: 1.375rem; line-height: 1.4; }
.entry-body > :last-child { margin-bottom: 0; }
.entry-body p { margin: 0 0 1em; }
.entry-body h3 { margin: 1.4em 0 .5em; font-size: 1.125rem; }
.entry-body ul { margin: 0 0 1em; padding-left: 1.2em; }
.entry-body figure { margin: 0 0 1em; }
.entry-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.entry-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--placeholder);
  font-size: .9em;
}
.diary-empty { color: var(--secondary); }

/* ---------- Music ページ ---------- */
.music { padding-top: 48px; padding-bottom: 120px; }
.music-head { margin-bottom: 40px; }
.music-title {
  margin: 0;
  font-family: "Climate Crisis", var(--font-latin);
  font-weight: 400;
  font-size: clamp(3.5rem, 12vw, 7rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.music-lead { margin: 14px 0 0; color: var(--secondary); }

/* 見出しの横の音量つまみ */
.music-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.volume {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: var(--plate);
  box-shadow: 0 1px 2px var(--shadow-near), 0 10px 24px -16px var(--shadow-far);
}
.vol-mute {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--content);
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
}
.vol-mute:hover { background: var(--placeholder); }
.vol-mute svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vol-mute .vol-speaker { fill: currentColor; }
.vol-x { display: none; }
.volume[data-level="off"] .vol-w1, .volume[data-level="off"] .vol-w2 { display: none; }
.volume[data-level="off"] .vol-x { display: inline; }
.volume[data-level="low"] .vol-w2 { display: none; }
.vol-val { min-width: 3.2em; text-align: right; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--secondary); }

/* スライダー：塗られた部分が今の音量 */
.vol-range {
  --v: 80%;
  width: 140px;
  height: 24px;
  margin: 0;
  background: none;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
  -webkit-appearance: none;
  appearance: none;
}
.vol-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--content) var(--v), var(--rule) var(--v));
}
.vol-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rule); }
.vol-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--content); }
.vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 2px 6px rgb(0 0 0 / .25);
  transition: transform .15s ease;
}
.vol-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 2px 6px rgb(0 0 0 / .25); }
.vol-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.vol-range:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; border-radius: 4px; }

.tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: center; }
.track-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 22px 26px;
  border-radius: 24px;
  background: var(--plate);
  box-shadow: 0 1px 2px var(--shadow-near), 0 18px 40px -26px var(--shadow-far);
  transition: box-shadow .3s ease;
}
.track.is-current .track-card { box-shadow: 0 0 0 2px var(--content), 0 18px 40px -22px var(--shadow-far); }

/* 丸い再生ボタン */
.track-play, .now-play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--content);
  color: var(--page);
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.track-play:hover, .now-play:hover { transform: scale(1.06); }
.track-play:active, .now-play:active { transform: scale(.94); }
.track-play svg, .now-play svg { width: 26px; height: 26px; fill: currentColor; }
.i-pause { display: none; }
.is-playing > .track-card .i-play, .now.is-playing .i-play { display: none; }
.is-playing > .track-card .i-pause, .now.is-playing .i-pause { display: block; }

.track-title { margin: 0 0 10px; font-size: 1.375rem; font-weight: 800; line-height: 1.3; }

/* 波形。再生した部分（左側）だけ濃く塗る */
.track-wave {
  position: relative;
  height: 44px;
  cursor: url("media/cursor-pointer.svg") 5 4, pointer;
  touch-action: none;
  border-radius: 6px;
}
.track { --p: 0; }
.wave-base, .wave-done { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.wave-base i, .wave-done i { flex: 1; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--secondary) 38%, transparent); }
.wave-done { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.wave-done i { background: var(--content); }
.track-time { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--secondary); }

/* 曲に込めた思い：少し傾いて、ゆっくり上下に浮かぶカード */
.story {
  position: relative;
  min-height: 140px;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--plate);
  box-shadow: 0 2px 4px var(--shadow-near), 0 24px 48px -20px var(--shadow-far);
  transform: rotate(var(--tilt, 2deg));
  animation: story-float 6s ease-in-out infinite;
}
.track:nth-child(even) .story { --tilt: -2deg; animation-delay: -3s; }
@keyframes story-float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 2deg)); }
  50% { transform: translateY(-10px) rotate(calc(var(--tilt, 2deg) * -.5)); }
}
.story-label { margin: 0 0 6px; font-family: var(--font-hand); font-size: 1.375rem; font-weight: 700; line-height: 1; color: var(--secondary); }
.story-body { font-size: .9375rem; line-height: 1.8; }

/* 再生中の曲：画面の下に浮かぶ操作バー */
.now {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(520px, calc(100% - 32px));
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plate) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -16px var(--shadow-far);
  transform: translateX(-50%);
  animation: now-in .45s cubic-bezier(.2, .8, .2, 1);
}
.now[hidden] { display: none; }
@keyframes now-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.now-play { width: 44px; height: 44px; flex: none; }
.now-play svg { width: 18px; height: 18px; }
.now-info { flex: 1; min-width: 0; }
.now-title { margin: 0 0 6px; font-weight: 700; font-size: .9375rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now-bar { height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.now-bar span { display: block; height: 100%; background: var(--content); transform-origin: left; transform: scaleX(0); }
.now-time { margin: 0; flex: none; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--secondary); }

@media (max-width: 760px) {
  .track { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .track-card { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .track-play { width: 52px; height: 52px; }
  .story { margin: 0 12px; }
}

/* ---------- カーソル（cursor.js） ---------- */
/* 角の丸い矢印。押せる場所では白黒を反転した矢印にする */
html { cursor: url("media/cursor.svg") 5 4, auto; }
a, button, summary, label, .loop-hit, .track-wave, .vp-range, .vol-range, [role="switch"], [role="slider"], .rail-line li { cursor: url("media/cursor-pointer.svg") 5 4, pointer; }
input[type="text"], input[type="search"], textarea, [contenteditable="true"] { cursor: text; }
/* 矢印のあとを、角丸の枠が少し遅れてついてくる。押せる部品に乗ると、その形に広がって包む */
.cursor-ring {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--content);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, border-radius .25s ease, background-color .2s ease;
}
.cursor-ring.is-visible { opacity: .55; }
.cursor-ring.is-snapped { opacity: 1; background: color-mix(in srgb, var(--content) 7%, transparent); }
/* 押している間の縮みは cursor.js が大きさで付ける。ここでは少し濃くするだけ */
.cursor-ring.is-pressed { opacity: .85; }
.cursor-ring.is-snapped.is-pressed { opacity: 1; background: color-mix(in srgb, var(--content) 12%, transparent); }

/* ---------- contact ---------- */
.plain { padding: 56px 0 8px; }
.plain h2 { margin: 0 0 20px; font-size: 1.75rem; }
.avatar { aspect-ratio: 1; border-radius: 50%; }

.contact { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }

.footer {
  margin-top: 64px;
  padding: 24px 16px 40px;
  text-align: center;
  font-size: .875rem;
  color: var(--secondary);
  border-top: 1px solid var(--rule);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .work { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 52px; }
}
@media (max-width: 560px) {
  .brand { display: none; }
  .topbar { gap: 4px; }
  .nav {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
  .entry { padding: 20px; }
  .line { padding: 48px 0 8px 44px; }
  .line::before { left: 17px; top: 70px; width: 10px; }
  .line-title { margin-left: -44px; gap: 12px; font-size: 1.5rem; }
  .line-title .code { width: 44px; height: 44px; border-width: 4px; font-size: 1.25rem; }
  .work::before, .note::before { left: -33px; width: 22px; height: 22px; border-width: 4px; }
  .work h3, .note h3 { font-size: 1.4375rem; }
  .nav a { padding: 12px 6px; font-size: .8125rem; }
  .theme-switch { margin-left: auto; }
  .ts-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .loop { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .loop-map { width: 180px; justify-self: center; }
  .catch { font-size: 1.625rem; }
  .catch-item summary { padding-right: 44px; }
  .avatar { width: 96px; }
  .speech { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .speech-avatar { width: 56px; height: 56px; }
  .bubble { margin-top: 6px; padding: 16px 18px; }
  .bubble::before { top: 14px; }
}

@media (max-width: 560px) {
  /* 入りきらないときは横にスクロールできることを、右端のぼかしで示す */
  .nav { mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); padding-right: 12px; }
}
@media (max-width: 360px) {
  .nav a { padding: 12px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
    .loop-half, .catch-item summary::after { transition: none; }
  .rail, .rail-strip, .rail-dot { transition: none; }
  .ticker-track { animation: none; }
  .story, .now { animation: none; }
  .cursor-ring { transition: opacity .2s ease; }
  .divider-line, .divider-loop path { transition: none; }
  .loop-train { animation: none; }
  .reveal .ch { opacity: 1; transform: none; filter: none; transition: none; }
}