/* FrameSmoother の用途別ページの共通スタイル */
:root {
  color-scheme: dark;
  --bg: #0f1113;
  --surface: #171a1d;
  --surface-2: #1f2327;
  --line: #2c3137;
  --ink: #e8ebe6;
  --dim: #a3aba7;
  --faint: #7e8683;
  /* 元のコマは灰青、生成したコマは琥珀。図・表・写真の札で同じ色を使い、どちらの話かを色でも追えるようにする */
  --source: #93a0ad;
  --made: #f4b740;
  --made-ink: #17130a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
/* 等幅の札にも漢字が入る。等幅フォントに無い字が日本語の字形に落ちないようにする */
:root:lang(zh-Hans) { --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.7 system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans", sans-serif;
}
:lang(ja) body, body:lang(ja) { line-height: 1.85; }
/* 本文の既定は日本語の字形を先に探すので、簡体字のページでは中国語のフォントを先に置く */
:lang(zh-Hans) body, body:lang(zh-Hans) { line-height: 1.85; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
a { color: var(--made); text-underline-offset: 0.18em; }
img, video { display: block; max-width: 100%; height: auto; }
.num, .tc, td.n, th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 幅は 46rem まで。スマホ（390px）では左右 16px の余白を残す */
.bar, .sheet, .foot { max-width: 46rem; margin-inline: auto; padding-inline: 1rem; }

.bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem;
  padding-block: 0.9rem; border-bottom: 1px solid var(--line);
}
.brand { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.01em; }
.brand .tc { color: var(--faint); font-weight: 400; font-size: 0.78rem; margin-inline-start: 0.4rem; }
/* 言語の切り替えは区画の札にする */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-family: var(--mono); font-size: 0.78rem; }
/* 札が 3 つあるので、狭い画面では札の中の字を折り返さず、帯のほうを 2 行にする */
.lang a, .lang span { padding: 0.2rem 0.6rem; text-decoration: none; white-space: nowrap; }
.lang a { color: var(--dim); }
.lang span { background: var(--surface-2); color: var(--ink); }
/* en / ja のページにある簡体字の札も、中国語のフォントで描く */
.lang a:lang(zh-Hans) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }

.sheet { padding-block: 1.75rem 3rem; }

/* 冒頭: 数字の見出し → 題 → 答え。検索や AI の要約は冒頭を拾うので、答えを最初の段落に書く */
.kicker { margin: 0; font-family: var(--mono); color: var(--made); font-size: 1.05rem; letter-spacing: 0.02em; }
.kicker .from { color: var(--source); }
h1 { font-size: 1.65rem; line-height: 1.3; margin: 0.35rem 0 0.9rem; letter-spacing: -0.005em; }
.lead { margin: 0 0 1.25rem; font-size: 1.04rem; }

/* 3 項目の数字。スマホでは 2 列にして 3 つ目を横いっぱいに（空いた区画を残さない）、広い画面では 3 列 */
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 0.5rem; }
.readout div:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 36rem) {
  .readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readout div:nth-child(3) { grid-column: auto; }
}
.readout div { background: var(--surface); padding: 0.75rem 0.85rem; }
.readout b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--made); font-weight: 600; }
.readout span { display: block; color: var(--dim); font-size: 0.84rem; line-height: 1.45; margin-top: 0.15rem; }

/* 節の見出し: 番号と英字の札（タイムコード風）＋ 題 */
section { margin-top: 2.6rem; }
.cue { margin: 0 0 0.2rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.cue b { color: var(--made); font-weight: 600; margin-inline-end: 0.5rem; }
h2 { font-size: 1.22rem; line-height: 1.4; margin: 0 0 0.7rem; }
.note { color: var(--dim); font-size: 0.9rem; }
.src { color: var(--source); }
.made { color: var(--made); }

/* 実出力のコマを 3 枚並べ、橙の玉の中心に縦の線を引く（生成コマには前後のコマの位置も点線で重ねる） */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 0.5rem; }
.frames figure { margin: 0; }
.shot { position: relative; border: 1px solid var(--line); }
.shot.is-made { border-color: var(--made); }
.shot img { width: 100%; aspect-ratio: 320 / 400; object-fit: cover; }
.guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ink); opacity: 0.85; }
.guide.ghost { border-left: 1px dashed var(--source); opacity: 0.9; }
.frames figcaption { margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.4; }
.frames figcaption .tag { display: inline-block; font-family: var(--mono); font-size: 0.72rem; padding: 0 0.35rem; border: 1px solid var(--source); color: var(--source); border-radius: 2px; }
.frames .is-made + figcaption .tag { border-color: var(--made); background: var(--made); color: var(--made-ink); }
.frames figcaption .num { display: block; color: var(--dim); }

/* 位置の目盛り（実測の x 座標を 1 本の線の上に並べる） */
.track { position: relative; height: 4.6rem; margin: 1.1rem 0.6rem 0.4rem; }
.track .axis { position: absolute; left: 0; right: 0; top: 2.1rem; border-top: 1px solid var(--line); }
/* 両端の目盛りは線の内側に寄せる（中央寄せだと右端の値が画面からはみ出す） */
.track .end { position: absolute; top: 2.45rem; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); white-space: nowrap; }
.track .end + .end { transform: translateX(-100%); }
.track .pt { position: absolute; top: 1.75rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; transform: translateX(-50%); background: var(--source); }
.track .pt.made { background: var(--made); }
.track .mid { position: absolute; top: 1.4rem; height: 1.5rem; border-left: 1px dashed var(--ink); }
.track .lbl { position: absolute; font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; transform: translateX(-50%); }
.track .lbl.up { top: 0; }
.track .lbl.down { top: 3.3rem; }

/* 比較の表。左に項目、右に「元」「後」を等幅の数字で並べる */
.wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin: 0.9rem 0 0.4rem; font-size: 0.92rem; }
th, td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
thead th { font-size: 0.78rem; font-weight: 600; color: var(--dim); border-bottom-color: var(--faint); }
td.n, th.n { text-align: end; white-space: nowrap; }
/* 列の見出しは折り返してよい（折り返さないと、スマホで右端の列が横にはみ出して見えなくなる） */
thead th.n { white-space: normal; }
.wrap + h2 { margin-top: 1.8rem; }
thead th.src { color: var(--source); }
thead th.made { color: var(--made); }
tbody th { font-weight: 400; color: var(--ink); }
td.n.made { color: var(--made); font-weight: 600; }

/* 上下に並べた動画。札は HTML の文字で重ねる（言語ごとに動画を作り分けないため） */
.clip { position: relative; margin: 1rem 0 0.4rem; border: 1px solid var(--line); background: #000; }
.clip video { width: 100%; aspect-ratio: 640 / 720; }
.clip .tag { position: absolute; left: 0.5rem; font-family: var(--mono); font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 2px; }
.clip .tag.top { top: 0.5rem; background: var(--surface-2); color: var(--source); border: 1px solid var(--source); }
.clip .tag.bottom { top: calc(50% + 0.5rem); background: var(--made); color: var(--made-ink); }

/* 模式図: 1 マス = 1 コマ。点の位置で、動いているか止まっているかを見せる */
.diagram { margin: 1rem 0 0.4rem; padding: 0.8rem; background: var(--surface); border: 1px solid var(--line); }
.row + .row { margin-top: 0.85rem; }
.row p { margin: 0 0 0.3rem; font-size: 0.84rem; color: var(--dim); }
.row p b { color: var(--ink); font-weight: 600; }
.strip { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 2px; }
.strip i { position: relative; display: block; height: 1.9rem; background: var(--surface-2); }
.strip i::after { content: ""; position: absolute; top: 50%; left: var(--x, 0%); width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; border-radius: 50%; background: var(--source); }
.strip i.k { outline: 1px solid var(--source); outline-offset: -1px; }
.strip i.g::after { background: var(--made); }
.strip i.h::after { background: var(--faint); }
.legend { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.legend span::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-inline-end: 0.35rem; vertical-align: 0.05rem; background: var(--source); }
.legend .g::before { background: var(--made); }
.legend .h::before { background: var(--faint); }

/* 操作: 画面の名前（左）と、そこで押すもの（右）の 2 列 */
ol.ops { list-style: none; margin: 0.9rem 0 0; padding: 0; counter-reset: op; border-top: 1px solid var(--line); }
ol.ops li { counter-increment: op; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
ol.ops li::before { content: counter(op, decimal-leading-zero); font-family: var(--mono); color: var(--made); font-size: 0.86rem; padding-top: 0.12rem; grid-row: span 2; }
ol.ops .where { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); letter-spacing: 0.02em; }
ol.ops .do { margin: 0; }
/* 画面の文言。アプリの表示と一字一句そろえ、画面で探せるようにする */
.ui { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--faint); white-space: nowrap; }

/* App Store への導線は線で囲んだ 1 行。価格や課金の形・対応 iOS は書かない（対応 iOS はサポートのページに書く） */
.store { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; padding: 0.95rem 1.1rem; border: 1px solid var(--made); color: var(--ink); text-decoration: none; }
.store b { display: block; font-size: 1.02rem; }
.store small { display: block; color: var(--dim); font-size: 0.82rem; }
.store .go { font-family: var(--mono); color: var(--made); font-size: 1.3rem; }
.store:hover, .store:focus-visible { background: var(--surface); }

.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; margin-top: 0.9rem; }
.next a { display: block; padding: 0.8rem 0.9rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.next a:hover, .next a:focus-visible { border-color: var(--made); }
.next .tc { display: block; color: var(--made); font-size: 1.05rem; }
.next span { font-size: 0.9rem; color: var(--dim); }

.foot { border-top: 1px solid var(--line); padding-block: 1rem 2.5rem; font-size: 0.82rem; color: var(--faint); }
.foot a { color: var(--dim); white-space: nowrap; }