/* 下地：文字の決まり・背景（オーロラと粒子の層）・スクロールバー・選択色・画面の入り・並べ方の道具。
   部品の見た目は components.css、画面ごとの見た目は css/screens/<画面>.css に書く。 */

/* ───── リセット ───── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* 下地のグラデーションは html に敷く（スクロールバーの溝まで同じ色にして、右端の継ぎ目を出さない） */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -10%, #142042 0%, rgba(14, 22, 42, 0) 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(40, 30, 14, 0.5) 0%, rgba(6, 10, 22, 0) 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink-1) 55%, var(--ink-0) 100%);
  background-attachment: fixed;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 0;
  /* 日本語は句の切れ目で折り返し、最後の行に1字だけ落ちないようにする（html の lang=ja が前提） */
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 入力欄と AI の原稿（そのままの形で読む物）は、句の折り返しを掛けない */
textarea,
input,
pre,
code,
.st-pre,
.st-quote,
.st-mono {
  word-break: normal;
  text-wrap: wrap;
}
img,
svg,
video,
canvas,
audio {
  display: block;
  max-width: 100%;
}
audio {
  width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}

/* ───── 文字 ───── */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  letter-spacing: 0.02em;
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-body);
}
p {
  margin: 0;
  text-wrap: pretty;
}
p + p {
  margin-top: var(--s-3);
}
small,
.st-small {
  font-size: var(--fs-sm);
}
strong,
b {
  font-weight: var(--fw-head);
}
a {
  color: var(--gold-2);
  text-decoration: underline;
  text-decoration-color: rgba(231, 200, 119, 0.4);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--d1) var(--ease-out), text-decoration-color var(--d1) var(--ease-out);
}
a:hover {
  color: var(--gold-3);
  text-decoration-color: currentColor;
}
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
hr {
  border: 0;
  height: 1px;
  margin: var(--s-6) 0;
  background: linear-gradient(90deg, rgba(230, 214, 170, 0), var(--line-3) 20%, var(--line-3) 80%, rgba(230, 214, 170, 0));
}
::selection {
  background: rgba(216, 180, 92, 0.38);
  color: var(--champagne);
}

/* ───── キーボードで動かす時の印（マウスでは出さない） ───── */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ───── スクロールバー（細く、金の気配） ───── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 180, 92, 0.28) transparent;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
/* 溝は画面の四隅の陰りと同じ暗さにして、右端に継ぎ目を見せない */
::-webkit-scrollbar-track {
  background: #04070f;
}
::-webkit-scrollbar-thumb {
  background: rgba(216, 180, 92, 0.22);
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 180, 92, 0.42);
  background-clip: padding-box;
}

/* ───── 背景の層（motion.js が #st-ambient を足す。無くても下地のグラデーションだけで成り立つ） ───── */
.st-ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.st-ambient__aurora {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  opacity: 0.85;
}
.st-ambient__aurora--navy {
  width: 80vmax;
  height: 80vmax;
  top: -46vmax;
  left: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(56, 84, 160, 0.34), rgba(56, 84, 160, 0) 62%);
}
/* 金の照明：画面の右上から、主役の面の後ろへ光が溜まるように落ちる */
.st-ambient__aurora--gold {
  width: 74vmax;
  height: 74vmax;
  top: -30vmax;
  right: -28vmax;
  background: radial-gradient(circle at 50% 50%, rgba(222, 176, 84, 0.27) 0%, rgba(216, 168, 78, 0.12) 34%, rgba(216, 160, 70, 0) 62%);
}
/* 録音中は照明を落とす（カンペを読む邪魔をしない） */
body[data-recording] .st-ambient__aurora--gold {
  opacity: 0.45;
}
.st-ambient__aurora--deep {
  width: 78vmax;
  height: 78vmax;
  bottom: -52vmax;
  left: 14vw;
  background: radial-gradient(circle at 50% 50%, rgba(33, 56, 110, 0.3), rgba(33, 56, 110, 0) 62%);
}
.st-ambient__spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 223, 166, 0.07) 0%, rgba(243, 223, 166, 0.025) 30%, rgba(243, 223, 166, 0) 62%);
  opacity: 0;
  transition: opacity var(--d4) var(--ease-out);
  will-change: transform;
}
.st-ambient.is-pointer .st-ambient__spot {
  opacity: 1;
}
.st-ambient__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0.9;
}
.st-ambient__grain {
  position: absolute;
  inset: -50%;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
}
.st-ambient__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 40%, rgba(3, 6, 13, 0) 55%, rgba(3, 6, 13, 0.55) 100%);
}

/* 常時の背景の動き：動きを減らす設定と録音中は出さない（CPU を録音に回す） */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-recording]) .st-ambient__aurora--navy {
    animation: st-aurora-a var(--d-ambient) var(--ease-in-out) infinite alternate;
  }
  body:not([data-recording]) .st-ambient__aurora--gold {
    animation: st-aurora-b calc(var(--d-ambient) * 1.25) var(--ease-in-out) infinite alternate;
  }
  body:not([data-recording]) .st-ambient__aurora--deep {
    animation: st-aurora-c calc(var(--d-ambient) * 1.45) var(--ease-in-out) infinite alternate;
  }
}
:root.is-hidden .st-ambient * {
  animation-play-state: paused !important;
}
body[data-recording] .st-ambient__spot,
body[data-recording] .st-ambient__dust {
  opacity: 0;
}
@keyframes st-aurora-a {
  to {
    transform: translate3d(14vmax, 9vmax, 0) scale(1.1);
  }
}
@keyframes st-aurora-b {
  to {
    transform: translate3d(-16vmax, 12vmax, 0) scale(0.9);
  }
}
@keyframes st-aurora-c {
  to {
    transform: translate3d(-9vmax, -14vmax, 0) scale(1.16);
  }
}

/* ───── 画面の枠 ───── */
.st-shell {
  position: relative;
  z-index: var(--z-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.st-screen {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-6) var(--page-pad) var(--s-8);
}
.st-screen:focus {
  outline: none;
}
.st-screen--wide {
  max-width: none;
}

/* 画面の入り：フェード＋わずかな上昇（並ぶ物は data-reveal で少しずつ遅らせる） */
@media (prefers-reduced-motion: no-preference) {
  .st-enter {
    animation: st-rise-in var(--d3) var(--ease-out) both;
  }
  .st-enter [data-reveal] {
    animation: st-rise-in var(--d3) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * var(--stagger) + 60ms);
  }
}
@keyframes st-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes st-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ───── 並べ方の道具 ───── */
.st-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--s-4));
}
.st-stack--lg {
  --gap: var(--s-6);
}
.st-stack--sm {
  --gap: var(--s-2);
}
.st-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--s-3));
}
.st-row--between {
  justify-content: space-between;
}
.st-row--end {
  justify-content: flex-end;
}
.st-row--nowrap {
  flex-wrap: nowrap;
}
.st-push {
  margin-left: auto;
}
.st-grid {
  display: grid;
  gap: var(--gap, var(--s-5));
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.st-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 280px), 1fr));
}
.st-span-all {
  grid-column: 1 / -1;
}

/* ───── 文字の道具 ───── */
.st-muted {
  color: var(--text-2);
}
.st-faint {
  color: var(--text-3);
}
.st-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "palt" 0;
}
.st-mono {
  font-family: var(--font-mono);
}
.st-lead {
  font-size: var(--fs-lead);
  color: var(--text-2);
}
.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold-2);
}
.st-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 180, 92, 0), var(--gold));
}
.st-gold-text {
  background: var(--band-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.st-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.st-break {
  overflow-wrap: anywhere;
}
.st-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───── 本文へ飛ぶリンク（キーボードの時だけ見える） ───── */
.st-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text);
  transform: translateY(-160%);
  transition: transform var(--d2) var(--ease-out);
}
.st-skip:focus-visible {
  transform: none;
}

/* ───── 動きを減らす設定：常時の動きを止め、移り変わりはすぐに ───── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}