/* AKARI Video — はじめかた（start.html）
 * base.css のトークン・ボタン・ナビ・フッター・リビールの上に、このページの部品を積む。
 * 図解モック（.mock / .app / .pin …）はアプリ実画面の構成に合わせて描いている:
 *   左端の列（素材・検索・拡張・設定・メニュー）/ 左の素材パネル / 中央タブ + プレビュー / 下タイムライン / 右パートナー / 右端の列
 * 押す場所は .pin（オレンジの輪 + 番号）。番号は figcaption の .presses li[data-n] と対応し、JS が順番に光らせる。
 */

:root {
  --m-bg: #0f0d0c;
  --m-panel: #141110;
  --m-raised: #1c1816;
  --m-raised-2: #262019;
  --m-line: rgba(255, 236, 214, 0.08);
  --m-line-2: rgba(255, 236, 214, 0.14);
  --m-text: #ece5dc;
  --m-dim: #9a9087;
  --m-accent: #ee8236;
  --m-accent-ink: #1d0e02;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 999px;
  background: var(--orange); color: #140a00; font-weight: 700; transform: translateY(-160%); transition: transform 0.3s var(--ease-out);
}
.skip:focus { transform: none; }
.btn--xl { min-height: 64px; padding: 0 34px; font-size: 17px; }
.btn--xl svg { width: 20px; height: 20px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-2); font-weight: 700; font-size: 14.5px; }
.textlink .ico { transition: transform 0.4s var(--ease-out); }
.textlink:hover .ico { transform: translateX(4px); }
strong { font-weight: 700; color: var(--text); }
.page-start h1, .page-start h2, .page-start h3, .step__lead, .step__aside, .s-hero__lead, .fig__text, .presses li, .flow__d, .lead, .gift__sub, .faq__item p, .legend dd, .fork__text {
  word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere;
}
.mock, .mini, .form-mini, .ss, .rel { word-break: normal; }
.nw { display: inline-block; }
/* 横からのリビール（translateX）や図の小窓がレイアウト幅を広げないように。
   body の overflow-x: clip だけでは、スマホのレイアウトビューポートが広がってしまう */
.start-main { overflow-x: clip; }
/* base のリビールは .is-in で clip-path: inset(0) を付けるため、図からはみ出す小窓や輪が切れる。このページでは外す */
html.js .page-start [data-reveal]:not([data-reveal="clip"]).is-in { clip-path: none; }

/* ───────────────── ヒーロー ───────────────── */
.s-hero {
  position: relative; overflow: clip;
  padding: calc(var(--nav-h) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px);
}
.s-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 78% 22%, rgba(255, 138, 0, 0.2), transparent 70%),
    radial-gradient(30% 40% at 8% 0%, rgba(255, 90, 31, 0.1), transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--ink));
}
.s-hero__glow::after { /* HUD の細い罫線グリッド */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: 0.35;
  mask-image: radial-gradient(60% 60% at 70% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 60% at 70% 30%, #000, transparent 75%);
}
/* 立体アイコン（部品は base.css の .icon3d）。太陽のような発光は付けない（オーナー判断） */
.s-icon {
  position: absolute; right: max(var(--gutter), calc(50% - 600px)); top: calc(var(--nav-h) + 64px);
  width: clamp(120px, 13vw, 180px); pointer-events: none;
}
.s-hero__inner { position: relative; z-index: 1; }
.s-hero__title { font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 1.08; margin-top: 18px; letter-spacing: -0.005em; max-width: 12em; }
.s-hero__title em { font-style: normal; color: var(--orange); text-shadow: 0 0 40px rgba(255, 138, 0, 0.35); }
.s-hero__lead { margin-top: 22px; max-width: 34em; font-size: var(--fs-lead); color: var(--text-2); line-height: 1.9; }
.ring-word { position: relative; display: inline-block; padding: 0 0.25em; color: var(--text); font-weight: 700; }
.ring-word::after {
  content: ""; position: absolute; inset: -0.1em -0.05em; border: 2px solid var(--orange); border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 138, 0, 0.45);
}

/* スマホで開いた人への一言 */
.m-note {
  display: none; position: relative; z-index: 2; gap: 14px; align-items: flex-start; margin-bottom: 28px; padding: 16px 16px 18px;
  border-radius: var(--radius); border: 1px solid rgba(255, 138, 0, 0.45);
  background: linear-gradient(180deg, rgba(255, 138, 0, 0.14), rgba(255, 138, 0, 0.05)), rgba(20, 17, 15, 0.94);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
html[data-os="mobile"] .m-note { display: flex; }
.m-note > .ico { width: 26px; height: 26px; color: var(--orange-2); margin-top: 2px; }
.m-note__title { font-weight: 900; font-size: 16px; }
.m-note p:not(.m-note__title) { color: var(--text-2); font-size: 14px; margin-top: 4px; line-height: 1.7; }
.m-note__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 分岐カード */
.fork { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(36px, 5vw, 56px); align-items: stretch; }
.fork__card { position: relative; border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); background: rgba(255, 236, 214, 0.02); }
.fork__card--main {
  border-color: rgba(255, 138, 0, 0.5);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 138, 0, 0.2), transparent 55%),
    linear-gradient(180deg, #1a1411, #110e0c);
  box-shadow: 0 40px 100px -40px rgba(255, 110, 0, 0.55), inset 0 1px 0 rgba(255, 200, 140, 0.16);
}
.fork__card--main::before { /* 上辺の光の走査 */
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-2), transparent);
  box-shadow: 0 0 18px var(--orange);
}
.fork__card--sub { display: flex; flex-direction: column; background: rgba(255, 236, 214, 0.015); }
.fork__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--orange-2); letter-spacing: 0.06em; }
.fork__tag--muted { color: var(--muted); font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.12em; }
.fork__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-top: 12px; }
.fork__card--sub .fork__title { font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--text-2); }
.fork__text { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.fork__card--sub .fork__text { font-size: 14px; color: var(--muted); }
.fork__card--sub::after { /* 控えめな HUD の番号 */
  content: "›_"; position: absolute; right: 24px; top: 20px; font: 500 13px/1 var(--font-mono); color: var(--muted); opacity: 0.8;
}
.fork__cta { margin-top: 26px; }
.fork__agents { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fork__agents li { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line); font: 500 12px/1.6 var(--font-mono); letter-spacing: 0; color: var(--muted); }
.fork__link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.fork__link:hover { color: var(--orange-2); }
.fork__link .ico { transition: transform 0.4s var(--ease-out); }
.fork__link:hover .ico { transform: translateX(4px); }

.route { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.route::before { content: ""; position: absolute; left: 13px; right: 13px; top: 13px; height: 1px; background: linear-gradient(90deg, var(--orange), rgba(255, 138, 0, 0.15)); }
.route li { position: relative; display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text-2); line-height: 1.35; padding-right: 6px; }
.route span {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  font: 700 10.5px/1 var(--font-en); color: var(--orange-2); background: var(--ink-2); border: 1px solid rgba(255, 138, 0, 0.5);
}
.route li:first-child span { background: var(--orange); color: #160b00; border-color: transparent; box-shadow: 0 0 16px var(--orange-glow); }

/* ───────────────── レイアウト + ステップナビ ───────────────── */
.s-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.stepnav { position: sticky; top: calc(var(--nav-h) + 24px); padding-top: clamp(64px, 8vw, 112px); z-index: 20; }
.stepnav__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 14px; }
.stepnav__list, .stepnav__more { list-style: none; margin: 0; padding: 0; }
.stepnav__list { position: relative; }
.stepnav__list::before, .stepnav__list::after { content: ""; position: absolute; left: 12px; top: 16px; bottom: 16px; width: 1px; background: var(--line-2); }
.stepnav__list::after { background: linear-gradient(var(--orange-2), var(--orange)); box-shadow: 0 0 10px var(--orange); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 0.25s linear; }
.stepnav a { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--muted); font-size: 14px; transition: color 0.3s; }
.stepnav a:hover { color: var(--text); }
.stepnav__n {
  position: relative; z-index: 1; flex: none; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font: 600 10.5px/1 var(--font-en); letter-spacing: 0; border: 1px solid var(--line-2); background: var(--ink); color: var(--muted);
  transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.stepnav a.is-done .stepnav__n { border-color: rgba(255, 138, 0, 0.55); color: var(--orange-2); }
.stepnav a.is-current { color: var(--text); font-weight: 700; }
.stepnav a.is-current .stepnav__n { background: var(--orange); color: #160b00; border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.16), 0 0 18px var(--orange-glow); }
.stepnav__more { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.stepnav__more .stepnav__n { font-size: 11px; border-style: dashed; }
.stepnav__bar { display: none; }

/* ───────────────── ステップ共通 ───────────────── */
.s-steps { min-width: 0; }
.step {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 56px); padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); align-items: start;
}
.step:first-child { border-top: 0; }
.step--wide { grid-template-columns: minmax(0, 1fr); }
.step__num {
  position: absolute; left: -0.04em; top: clamp(20px, 3vw, 44px); z-index: -1; pointer-events: none;
  font: 800 clamp(6rem, 11vw, 10rem)/1 var(--font-en); letter-spacing: -0.05em; color: transparent;
  -webkit-text-stroke: 1px rgba(255, 138, 0, 0.14);
}
.step__text { position: relative; }
.hud {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--orange-2);
}
.hud::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.hud i { font-style: normal; color: var(--muted); }
.step__title { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin-top: 14px; }
.step__lead { margin-top: 14px; color: var(--text-2); font-size: 16px; line-height: 1.9; }
.step__aside { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.agents { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.agents li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 13px/1.5 var(--font-en); color: var(--text-2); background: rgba(255, 236, 214, 0.02); }
.agents li.agents__rec { border-color: rgba(255, 138, 0, 0.6); color: var(--text); background: rgba(255, 138, 0, 0.1); font-weight: 700; }
.agents li small { margin-left: 6px; font: 700 10.5px/1 var(--font-jp); color: var(--orange-2); }
.step__note { margin-top: 12px; font-size: 13.5px; color: var(--text-2); padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line-2); }
.step__text--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; }
.step__text--wide .step__lead { margin-top: 0; }

/* ダウンロード */
.dl { margin-top: 26px; }
.dl__main { width: 100%; max-width: 380px; }
.dl__sub { margin-top: 10px; font-size: 13px; color: var(--muted); }
.dl__alt { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.dl__alt-link { font-size: 14px; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(255, 236, 214, 0.25); text-underline-offset: 4px; }
.dl__alt-link:hover { color: var(--orange-2); text-decoration-color: currentColor; }
html[data-os="win"] .dl__alt-link--win, html[data-os="mac"] .dl__alt-link--mac { display: none; }
.dl__fine { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.dl__fine a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.dl__mobile { display: none; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--ink-2); }
.dl__mobile p { font-size: 14px; color: var(--text-2); margin-bottom: 12px; }
.dl__mobile b { color: var(--text); }
html[data-os="mobile"] .dl__mobile { display: block; }
html[data-os="mobile"] .dl__main, html[data-os="mobile"] .dl__sub, html[data-os="mobile"] .dl__alt { display: none; }

/* 図（figure） */
.fig { margin: 0; min-width: 0; }
.fig__title { font-size: 18px; margin-top: 18px; }
.fig__text { font-size: 14px; color: var(--text-2); margin-top: 6px; line-height: 1.8; }
.fig__note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 236, 214, 0.03); }
.seg__btn { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; color: var(--text-2); transition: background 0.3s, color 0.3s; }
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-selected="true"] { background: var(--text); color: var(--ink); font-weight: 700; }
.seg--sm .seg__btn { padding: 6px 14px; font-size: 12.5px; }

/* 押す順（figcaption） */
.presses { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.presses li {
  position: relative; display: block; padding: 9px 12px 9px 47px; border-radius: 12px; min-height: 42px;
  font-size: 14.5px; color: var(--text-2); line-height: 1.6; border: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.presses li::before {
  content: attr(data-n); position: absolute; left: 12px; top: 10px; width: 23px; height: 23px; border-radius: 50%;
  border: 1.5px solid var(--orange); color: var(--orange-2); font: 800 11.5px/20px var(--font-en); text-align: center;
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.presses li.is-on { color: var(--text); border-color: rgba(255, 138, 0, 0.3); background: rgba(255, 138, 0, 0.07); }
.presses li.is-on::before { background: var(--orange); color: #160b00; box-shadow: 0 0 14px var(--orange-glow); }
.presses b { color: var(--text); font-weight: 700; }
.presses a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; }
.presses--lg li { font-size: 15.5px; }

/* ───────────────── 押す場所（オレンジの輪 + 番号） ───────────────── */
.pin { position: relative; --pin-r: 9px; }
.pin::after {
  content: ""; position: absolute; inset: -5px; border-radius: var(--pin-r); pointer-events: none; z-index: 4;
  border: 2px solid var(--orange); box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14), 0 0 16px 2px rgba(255, 138, 0, 0.5);
}
.pin::before {
  content: attr(data-pin); position: absolute; z-index: 5; top: -11px; right: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: #160b00; font: 800 11px/20px var(--font-en); text-align: center; letter-spacing: 0; font-style: normal;
  box-shadow: 0 0 0 2.5px #0b0908, 0 0 14px rgba(255, 138, 0, 0.8); pointer-events: none;
}
.pin[data-pin-pos="l"]::before { right: auto; left: -11px; }
.pin[data-pin-pos="r"]::before { top: 50%; right: -32px; margin-top: -10px; }
html.js [data-pins] .pin::after, html.js [data-pins] .pin::before {
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 180ms + 150ms);
}
html.js [data-pins].is-live .pin::before { opacity: 1; transform: none; }
html.js [data-pins].is-live .pin::after { opacity: 0.4; transform: none; }
html.js [data-pins].is-live .pin.is-on::after { opacity: 1; animation: pinPulse 1.5s var(--ease-out) infinite; }
html.js [data-pins].is-live .pin.is-on::before { background: #ffb257; }
@keyframes pinPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.55), 0 0 16px 2px rgba(255, 138, 0, 0.55); }
  75% { box-shadow: 0 0 0 12px rgba(255, 138, 0, 0), 0 0 16px 2px rgba(255, 138, 0, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0), 0 0 16px 2px rgba(255, 138, 0, 0.55); }
}
html.reduced [data-pins] .pin::after, html.reduced [data-pins] .pin::before { opacity: 1 !important; transform: none !important; }

/* ───────────────── モック共通 ───────────────── */
.mock {
  container: mock / inline-size;
  position: relative; margin-top: 18px; border-radius: 14px; background: var(--m-bg); border: 1px solid var(--m-line-2);
  font-family: var(--font-jp); font-size: 11px; line-height: 1.45; letter-spacing: 0.01em; color: var(--m-text);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.95), 0 30px 90px -60px rgba(255, 120, 0, 0.55), inset 0 1px 0 rgba(255, 236, 214, 0.06);
  text-align: left;
}
.mock__bar {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--m-line);
  background: #0b0a09; border-radius: 13px 13px 0 0; color: var(--m-dim); font-size: 10.5px;
}
.mock__bar > i { width: 8px; height: 8px; border-radius: 50%; background: #3a322c; }
.mock__bar > span { margin-left: 8px; }
.mock__x { margin-left: auto; font-style: normal; color: var(--m-dim); }
.mbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 24px; padding: 3px 10px; border-radius: 6px;
  background: var(--m-raised-2); color: var(--m-text); font-size: 10.5px; font-weight: 700; white-space: nowrap; border: 1px solid var(--m-line);
}
.mbtn--main { background: var(--m-accent); color: var(--m-accent-ink); border-color: transparent; }
.mbtn--block { display: flex; width: 100%; }
.sk-list { display: grid; gap: 8px; padding: 10px; }
.sk-list i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 236, 214, 0.07); }
.sk-list i:nth-child(2n) { width: 72%; }
.sk-list i:nth-child(3n) { width: 86%; }

/* アプリ全体の枠 */
.app {
  display: grid; height: 368px; border-radius: 0 0 13px 13px; background: var(--m-bg);
  grid-template-columns: 30px minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 1.34fr) 26px;
  grid-template-rows: 26px minmax(0, 1fr) 74px;
  grid-template-areas: "rail left tabs right rrail" "rail left stage right rrail" "rail left tl right rrail";
}
.app > * { min-width: 0; min-height: 0; overflow: clip; overflow-clip-margin: 18px; }
.app__rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 10px; background: #0b0a09; border-right: 1px solid var(--m-line); border-bottom-left-radius: 13px; overflow: visible; }
.app__rail span { position: relative; display: grid; place-items: center; width: 22px; height: 22px; color: #8a7f75; }
.app__rail span .ico { width: 15px; height: 15px; }
.app__rail span.is-active { color: var(--m-accent); }
.app__rail span.is-active::before { content: ""; position: absolute; left: -4px; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: var(--m-accent); }
.app__rail span.pin { --pin-r: 7px; color: var(--m-text); }
.app__rail--solo { grid-area: auto; border-radius: 0 0 0 13px; }
.app__left { grid-area: left; background: var(--m-panel); border-right: 1px solid var(--m-line); padding: 8px; }
.app__ph { color: var(--m-dim); font-size: 10px; padding: 2px 2px 8px; }
.ltabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 8px; background: #0f0d0c; border: 1px solid var(--m-line); }
.ltabs span { text-align: center; padding: 3px 0; border-radius: 6px; color: var(--m-dim); font-size: 9px; letter-spacing: 0; white-space: nowrap; }
.ltabs span.is-on { color: var(--m-text); border: 1px solid var(--m-accent); font-weight: 700; }
.ltabs--lg span { padding: 5px 0; font-size: 11px; letter-spacing: 0.02em; }
.app__tabs { grid-area: tabs; display: flex; align-items: stretch; background: #0b0a09; border-bottom: 1px solid var(--m-line); }
.app__tabs span { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; font-size: 10.5px; color: var(--m-dim); }
.app__tabs span.is-on { color: var(--m-text); background: var(--m-bg); box-shadow: inset 0 2px 0 var(--m-accent); }
.app__tabs .ico { width: 12px; height: 12px; }
.app__stage { grid-area: stage; padding: 12px; }
.home__h { font-size: 17px; font-weight: 900; }
.home__new { margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--m-raised); border: 1px solid var(--m-line); font-weight: 700; font-size: 11px; }
.sk-list--wide { padding: 10px 0 0; }
.app__tl { grid-area: tl; position: relative; border-top: 1px solid var(--m-line); background: var(--m-panel); padding: 6px 8px; overflow: visible; }
.tl__h { font-size: 9.5px; color: var(--m-dim); }
.tl__tracks { display: grid; gap: 5px; margin-top: 6px; }
.tl__tracks i { display: block; height: 10px; border-radius: 3px; background: rgba(255, 236, 214, 0.05); }
.tl__tracks--filled i:nth-child(1) { background: linear-gradient(90deg, #4a3a2c 0 30%, transparent 30% 33%, #4a3a2c 33% 62%, transparent 62% 64%, #4a3a2c 64% 90%, transparent 90%); }
.tl__tracks--filled i:nth-child(2) { background: linear-gradient(90deg, transparent 0 12%, #6a4a1e 12% 38%, transparent 38% 50%, #6a4a1e 50% 72%, transparent 72%); }
.tl__head { position: absolute; top: 20px; bottom: 6px; left: 38%; width: 1.5px; background: var(--m-accent); box-shadow: 0 0 8px var(--m-accent); }
.app__right { grid-area: right; background: var(--m-panel); border-left: 1px solid var(--m-line); padding: 8px 10px; }
.app__rrail { grid-area: rrail; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; background: #0b0a09; border-left: 1px solid var(--m-line); color: #8a7f75; border-bottom-right-radius: 13px; }
.app__rrail .ico { width: 13px; height: 13px; }

/* パートナー（右パネル） */
.partner { text-align: center; }
.partner__plus { color: var(--m-accent); font-size: 18px; line-height: 1; margin-top: 6px; }
.partner__h { font-size: 13.5px; font-weight: 900; margin-top: 6px; }
.partner__lead { color: var(--m-dim); font-size: 9.5px; margin-top: 4px; }
.partner__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.partner__list li { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 6px; background: var(--m-raised); border: 1px solid var(--m-line); font-size: 10.5px; }
.partner__list li b { font-weight: 700; }
.partner__list li span { margin-left: auto; color: var(--m-dim); font-size: 9.5px; }
.partner__list li em { font-style: normal; font-size: 8.5px; font-weight: 700; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.18); }
.partner__list li.is-rec { background: var(--m-accent); color: var(--m-accent-ink); border-color: transparent; }
.partner__list li.is-rec span { color: var(--m-accent-ink); }
.partner__list li.pin { --pin-r: 9px; }

/* ブラウザの小窓 */
.popup {
  position: absolute; width: 188px; z-index: 6; border-radius: 10px; background: #f4ede4; color: #1b1510;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4); overflow: visible;
}
.popup--br { right: -18px; bottom: -22px; }
.popup__bar { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 10px 10px 0 0; background: #e2d8cc; font-size: 9px; color: #5c5148; }
.popup__bar i { width: 6px; height: 6px; border-radius: 50%; background: #b9ab9c; }
.popup__bar span { margin-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup__body { padding: 12px 12px 14px; }
.popup__t { font-weight: 900; font-size: 12px; }
.popup__d { font-size: 9.5px; color: #6b5f55; margin: 3px 0 10px; }
.popup .mbtn--main { background: #1b1510; color: #fff; }

/* ───────── STEP 01: SmartScreen / リリースページ ───────── */
.os-tabs .seg { margin-bottom: 2px; }
.ss { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: stretch; gap: 8px; margin-top: 18px; }
.ss__dlg {
  display: flex; flex-direction: column; min-height: 226px; padding: 18px 16px 14px; border-radius: 3px;
  background: linear-gradient(180deg, #1d5fae, #1a549b); color: #fff; font-family: "Segoe UI", "Yu Gothic UI", var(--font-jp);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ss__title { font-size: 16.5px; font-weight: 400; line-height: 1.32; letter-spacing: 0; }
.ss__body { font-size: 10.5px; line-height: 1.6; opacity: 0.9; margin-top: 10px; }
.ss__more { margin-top: 10px; }
.ss__link { display: inline-block; font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; --pin-r: 4px; }
.ss__meta { margin: 14px 0 0; font-size: 11px; display: grid; gap: 3px; }
.ss__meta div { display: flex; gap: 8px; }
.ss__meta dt { opacity: 0.8; min-width: 3.6em; }
.ss__meta dd { margin: 0; }
.ss__btns { margin-top: auto; padding-top: 16px; display: flex; justify-content: flex-end; gap: 8px; }
.ss__btn { padding: 4px 16px; border: 2px solid rgba(255, 255, 255, 0.85); font-size: 11px; --pin-r: 3px; }
.ss__btn--run { background: rgba(255, 255, 255, 0.1); }
.ss__arrow { display: grid; place-items: center; color: var(--orange-2); }
.ss__arrow .ico { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .ss { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ss__arrow { transform: rotate(90deg); height: 22px; }
  .ss__dlg { min-height: 0; }
  .ss__dlg + .ss__arrow + .ss__dlg .ss__title { display: none; }
}
.rel { margin-top: 18px; border-radius: 12px; overflow: hidden; background: #0d1117; border: 1px solid #30363d; font-family: -apple-system, "Segoe UI", var(--font-jp); color: #e6edf3; font-size: 12px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.rel { overflow: visible; }
.rel__bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #161b22; border-bottom: 1px solid #30363d; border-radius: 12px 12px 0 0; font-size: 10.5px; color: #8d96a0; }
.rel__bar i { width: 7px; height: 7px; border-radius: 50%; background: #30363d; }
.rel__bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel__body { padding: 16px 18px 20px; }
.rel__h { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rel__tag { font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid #238636; color: #3fb950; }
.rel__assets { margin-top: 14px; font-weight: 600; font-size: 12.5px; }
.rel__list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid #30363d; border-radius: 8px; }
.rel__list li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid #21262d; color: #4493f8; font-size: 12px; overflow-wrap: anywhere; }
.rel__list li:first-child { border-top: 0; font-weight: 700; --pin-r: 8px; }
.rel__list li i { font-style: normal; color: #8d96a0; }
.rel__list .ico { width: 13px; height: 13px; color: #8d96a0; }

/* ───────── STEP 02: はじめる準備 ───────── */
.setup { padding: 16px 16px 18px; border-radius: 0 0 13px 13px; background: radial-gradient(80% 60% at 50% 0%, rgba(255, 138, 0, 0.06), transparent 70%), var(--m-bg); }
.setup__head { text-align: center; }
.setup__logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; }
.setup__logo img { border-radius: 3px; }
.setup__title { font-size: 19px; font-weight: 900; margin-top: 2px; }
.setup__lead { color: var(--m-dim); font-size: 10px; margin-top: 2px; }
.setup__pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.setup__pills span { padding: 3px 10px; border-radius: 999px; background: var(--m-raised); border: 1px solid transparent; color: var(--m-dim); font-size: 10px; transition: border-color 0.4s, color 0.4s; }
.setup__pills span.is-on { border-color: var(--m-accent); color: var(--m-text); font-weight: 700; }
.setup__grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.scard { display: flex; flex-direction: column; min-height: 128px; padding: 11px 12px 12px; border-radius: 10px; background: #1a1714; border: 1px solid var(--m-line); }
.scard__k { font-size: 9px; font-family: var(--font-mono); color: var(--m-dim); letter-spacing: 0.06em; }
.scard__t { font-size: 12.5px; font-weight: 900; margin-top: 2px; }
.scard__row { display: flex; align-items: center; gap: 6px; font-size: 10px; margin-top: 6px; }
.scard__row em { font-style: normal; color: var(--m-dim); font-size: 9px; }
.scard__row--dim { color: var(--m-dim); font-size: 9.5px; line-height: 1.5; }
.scard__ok { font-style: normal; color: var(--m-dim); }
.scard__box { font-style: normal; display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; background: var(--m-accent); color: var(--m-accent-ink); font-size: 9px; font-weight: 900; }
.scard__warn { color: var(--m-accent) !important; border: 1px solid var(--m-accent); border-radius: 999px; padding: 0 5px; }
.scard__path { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--m-line); color: var(--m-dim); font-size: 10px; }
.scard__path code { font-size: 10px; }
.scard__map { display: grid; grid-template-columns: 1.6fr 1fr; gap: 5px; margin-top: 8px; height: 30px; }
.scard__map span { display: grid; place-items: center; border-radius: 5px; background: #221e1a; color: var(--m-dim); font-size: 8.5px; }
.scard__map .scard__map-r { border: 1.5px solid var(--m-accent); color: var(--m-text); font-weight: 700; }
.scard__acts { margin-top: auto; padding-top: 12px; display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.scard__acts .mbtn { font-size: 9.5px; }
@container mock (max-width: 460px) {
  .setup__grid { grid-template-columns: minmax(0, 1fr); }
  .scard { min-height: 0; }
}

/* ───────── STEP 04: 設定ダイアログ ───────── */
.setwrap { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); min-height: 320px; border-radius: 0 0 13px 13px; background: repeating-linear-gradient(135deg, #0f0d0c 0 10px, #110f0d 10px 20px); }
.setdlg { margin: 16px 16px 44px 14px; border-radius: 10px; background: #161311; border: 1px solid var(--m-line-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85); overflow: visible; }
.setdlg__bar { display: flex; align-items: center; height: 24px; padding: 0 10px; border-bottom: 1px solid var(--m-line); color: var(--m-dim); font-size: 9.5px; }
.setdlg__body { display: grid; grid-template-columns: 118px minmax(0, 1fr); min-height: 250px; }
.setdlg__nav { padding: 10px 7px; border-right: 1px solid var(--m-line); background: #110f0e; border-bottom-left-radius: 10px; }
.setdlg__nh { font-weight: 900; font-size: 11px; padding: 0 6px 6px; }
.setdlg__nav p:not(.setdlg__nh) { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; color: var(--m-dim); font-size: 10px; }
.setdlg__nav p.is-on { background: #28221d; color: var(--m-text); font-weight: 700; --pin-r: 7px; }
.setdlg__nav p.is-on .ico { color: var(--m-accent); }
.setdlg__nav .ico { width: 11px; height: 11px; }
.setdlg__main { padding: 12px 14px; }
.setdlg__h { font-weight: 900; font-size: 14px; }
.setdlg__d { color: var(--m-dim); font-size: 9.5px; margin-top: 2px; }
.acct { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px; border-radius: 9px; border: 1px solid var(--m-line-2); background: #1b1815; }
.acct__av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #0e0c0b; color: var(--m-dim); }
.acct__av .ico { width: 14px; height: 14px; }
.acct__id { flex: 1; min-width: 0; }
.acct__id b { display: block; font-size: 11px; }
.acct__id small { display: block; color: var(--m-dim); font-size: 9px; }
.sgroup { margin-top: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--m-line); }
.sgroup__t { font-family: var(--font-mono); font-size: 8.5px; color: var(--m-dim); letter-spacing: 0.1em; }
.sgroup__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 10px; font-weight: 700; }
.sgroup__row small { display: block; color: var(--m-dim); font-weight: 400; font-size: 9px; }
.sgroup__row em { font-style: normal; font-weight: 400; font-size: 9px; color: var(--m-dim); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--m-line-2); white-space: nowrap; }
.sgroup__row em.is-btn { border-radius: 6px; color: var(--m-text); }
@container mock (max-width: 480px) {
  .setdlg { margin: 10px 8px 70px 8px; }
  .setdlg__body { grid-template-columns: 108px minmax(0, 1fr); }
  .setdlg__nav p:not(.setdlg__nh) { font-size: 9.5px; letter-spacing: 0; white-space: nowrap; }
  .setdlg__nav p:nth-child(n+6) { display: none; }
  .setdlg__d { display: none; }
  .acct { flex-wrap: wrap; }
  .acct__id { flex: 1 1 calc(100% - 40px); }
  .acct .mbtn { margin-left: 37px; }
  .sgroup { display: none; }
  .popup--br { right: 8px; bottom: -34px; }
}
.arrive {
  display: flex; align-items: center; gap: 12px; margin-top: 34px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 138, 0, 0.3); background: linear-gradient(90deg, rgba(255, 138, 0, 0.1), rgba(255, 138, 0, 0.02));
}
.arrive__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--orange); color: #160b00; flex: none; }
.arrive__icon .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.arrive__t { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.arrive__t b { display: block; font-size: 11px; font-family: var(--font-mono); color: var(--orange-2); font-weight: 500; letter-spacing: 0.08em; }
.arrive__bar { flex: 1; min-width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 236, 214, 0.08); overflow: hidden; }
.arrive__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-2)); box-shadow: 0 0 10px var(--orange); transform-origin: left; }
html.js .fig .arrive__bar i { transform: scaleX(0); }
html.js .fig.is-live .arrive__bar i { animation: fillBar 3.2s var(--ease-in-out) 0.8s forwards; }
.arrive__ok { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ok); color: var(--ok); flex: none; }
.arrive__ok .ico { width: 13px; height: 13px; stroke-width: 2.4; }
html.js .fig .arrive__ok { opacity: 0.2; transition: opacity 0.6s 4s; }
html.js .fig.is-live .arrive__ok { opacity: 1; }
@keyframes fillBar { to { transform: scaleX(1); } }
html.reduced .fig .arrive__bar i { transform: none; animation: none; }
html.reduced .fig .arrive__ok { opacity: 1; }

.gift {
  position: relative; margin-top: 26px; padding: 20px 20px 20px; border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 138, 0, 0.45);
  background: radial-gradient(100% 120% at 100% 0%, rgba(255, 138, 0, 0.22), transparent 60%), var(--ink-2);
  box-shadow: 0 30px 70px -40px rgba(255, 120, 0, 0.6);
}
.gift__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--orange-2); }
.gift__main { font-size: 17px; font-weight: 700; margin-top: 6px; }
.gift__main b { white-space: nowrap; font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--font-en); color: var(--orange); letter-spacing: -0.01em; text-shadow: 0 0 28px rgba(255, 138, 0, 0.4); }
.gift__main b span { font: inherit; }
.gift__sub { margin-top: 10px; font-size: 14.5px; color: var(--text-2); line-height: 1.8; }

/* ───────── スマホ用: 図を「関係する部分」だけに寄せる ───────── */
@container mock (max-width: 540px) {
  .app[data-focus="right"] {
    grid-template-columns: 30px minmax(0, 1fr) 26px; height: 380px;
    grid-template-areas: "rail right rrail" "rail right rrail" "rail right rrail";
  }
  .app[data-focus="right"] > .app__left, .app[data-focus="right"] > .app__tabs,
  .app[data-focus="right"] > .app__stage, .app[data-focus="right"] > .app__tl { display: none; }
  .popup--br { right: 10px; bottom: -30px; }
}

/* ───────── STEP 05: 最初の 1 本 ───────── */
.flow { margin-top: 36px; }
.flow__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.flow__card {
  position: relative; display: flex; flex-direction: column; padding: 14px 14px 18px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 236, 214, 0.03), rgba(255, 236, 214, 0.01));
  transition: border-color 0.5s, box-shadow 0.5s, background 0.5s;
}
.flow__card.is-on { border-color: rgba(255, 138, 0, 0.45); box-shadow: 0 24px 60px -36px rgba(255, 120, 0, 0.6); background: linear-gradient(180deg, rgba(255, 138, 0, 0.07), rgba(255, 236, 214, 0.01)); }
.flow__card--hero { border-color: rgba(255, 138, 0, 0.28); }
.flow__t { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-top: 16px; }
.flow__t span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--orange); color: var(--orange-2); font: 800 12px/1 var(--font-en); flex: none; transition: background 0.4s, color 0.4s; }
.flow__card.is-on .flow__t span { background: var(--orange); color: #160b00; box-shadow: 0 0 14px var(--orange-glow); }
.flow__d { margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 1.75; }

.mini {
  position: relative; height: 176px; padding: 12px; border-radius: 12px; background: var(--m-bg); border: 1px solid var(--m-line-2);
  font-size: 10.5px; line-height: 1.45; color: var(--m-text); box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.05);
}
.mini__h { font-size: 15px; font-weight: 900; margin-bottom: 8px; }
.mini__ph { color: var(--m-dim); font-size: 9.5px; margin-bottom: 8px; }
.mini .mbtn { font-size: 10.5px; }
/* いれる */
.drop { position: relative; margin-top: 12px; height: 84px; border-radius: 9px; border: 1.5px dashed rgba(238, 130, 54, 0.6); display: grid; place-items: end center; padding-bottom: 8px; background: rgba(238, 130, 54, 0.05); }
.drop p { color: var(--m-dim); font-size: 9.5px; }
.drop__file { position: absolute; width: 40px; height: 28px; border-radius: 4px; background: linear-gradient(135deg, #5a4636, #2c231c); border: 1px solid rgba(255, 236, 214, 0.2); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); }
.drop__file::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -3px; border: 4px solid transparent; border-left: 6px solid rgba(255, 236, 214, 0.7); border-right: 0; }
.drop__file--a { left: calc(50% - 46px); top: 16px; transform: rotate(-8deg); }
.drop__file--b { left: calc(50% + 4px); top: 12px; transform: rotate(6deg); }
html.js .fig.is-live .drop__file--a { animation: dropIn 3.6s var(--ease-out) infinite; }
html.js .fig.is-live .drop__file--b { animation: dropIn 3.6s var(--ease-out) 0.25s infinite; }
@keyframes dropIn {
  0% { opacity: 0; transform: translate(60px, -70px) rotate(14deg); }
  30%, 85% { opacity: 1; }
  30%, 100% { transform: translate(0, 0) rotate(var(--r, -6deg)); }
  100% { opacity: 1; }
}
/* 話しかける */
.sk-list--chat { padding: 4px 0 0; gap: 6px; }
.sk-list--chat i { width: 60% !important; }
.sk-list--chat i:last-child { width: 40% !important; margin-left: auto; background: rgba(238, 130, 54, 0.14); }
.chat__input { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; padding: 9px 9px 9px 11px; border-radius: 10px; background: var(--m-raised); border: 1px solid rgba(238, 130, 54, 0.55); box-shadow: 0 0 0 3px rgba(238, 130, 54, 0.08); }
.chat__typed { flex: 1; font-size: 11.5px; line-height: 1.55; color: var(--m-text); }
.chat__caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--m-accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat__send { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--m-accent); color: var(--m-accent-ink); --pin-r: 9px; }
.chat__send .ico { width: 14px; height: 14px; stroke-width: 2; }
/* 待つ */
.work { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.work li { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--m-dim); }
.work li i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--m-line-2); flex: none; position: relative; }
.work li:nth-child(-n+2) { color: var(--m-text); }
.work li:nth-child(-n+2) i { background: var(--ok); border-color: transparent; }
.work li:nth-child(3) i { border-color: var(--m-accent); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
html.js .fig.is-live .work li:nth-child(1) i, html.js .fig.is-live .work li:nth-child(2) i { animation: tickIn 0.6s var(--ease-spring) both; }
html.js .fig.is-live .work li:nth-child(2) i { animation-delay: 0.4s; }
@keyframes tickIn { from { transform: scale(0.2); opacity: 0; } }
.mini__tl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; padding: 7px; border-radius: 7px; background: var(--m-panel); border: 1px solid var(--m-line); }
.mini__tl i { display: block; height: 8px; border-radius: 3px; background: rgba(255, 236, 214, 0.05); position: relative; overflow: hidden; }
.mini__tl i::after { content: ""; position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #5a4331 0 28%, transparent 28% 31%, #5a4331 31% 58%, transparent 58% 61%, #5a4331 61% 100%); }
.mini__tl i:nth-child(2)::after { background: linear-gradient(90deg, transparent 0 8%, #7a531f 8% 40%, transparent 40% 48%, #7a531f 48% 80%, transparent 80%); }
.mini__tl i:nth-child(3)::after { background: linear-gradient(90deg, #3b4a36 0 100%); opacity: 0.8; }
html.js .fig .mini--wait .mini__tl i::after { transform: scaleX(0.15); }
html.js .fig.is-live .mini--wait .mini__tl i::after { animation: growX 4s var(--ease-in-out) infinite; }
html.js .fig.is-live .mini--wait .mini__tl i:nth-child(2)::after { animation-delay: 0.4s; }
html.js .fig.is-live .mini--wait .mini__tl i:nth-child(3)::after { animation-delay: 0.8s; }
@keyframes growX { 0% { transform: scaleX(0.1); } 70%, 100% { transform: scaleX(1); } }
/* 見る */
.view {
  position: relative; height: 104px; border-radius: 8px; overflow: visible;
  background: radial-gradient(60% 80% at 30% 30%, rgba(255, 170, 90, 0.35), transparent 70%), linear-gradient(135deg, #3a2a1f, #1a1411 60%, #231a14);
}
.view::before { content: ""; position: absolute; left: 18%; bottom: 0; width: 30%; height: 62%; border-radius: 40% 40% 0 0; background: rgba(12, 9, 7, 0.55); }
.view__tel { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-weight: 900; font-size: 11px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 170, 90, 0.4); }
.view__play { position: absolute; right: 44px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 236, 214, 0.9); color: #1b1510; --pin-r: 999px; }
.view__play .ico { width: 14px; height: 14px; margin-left: 2px; }
.mini__tl--full i::after { transform: none !important; }
/* 注釈で直す */
.view--note { height: 112px; }
.note__circle { position: absolute; left: 44%; top: 8px; width: 46%; height: 70px; overflow: visible; }
.note__circle path { fill: none; stroke: #ffd166; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(255, 209, 102, 0.6)); vector-effect: non-scaling-stroke; }
html.js .fig .note__circle path { stroke-dashoffset: 320; }
html.js .fig.is-live .note__circle path { animation: drawCircle 1.6s var(--ease-out) 0.4s forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
.note__bubble { position: absolute; left: 10px; top: 44px; padding: 5px 9px; border-radius: 8px 8px 8px 2px; background: #ffd166; color: #2a1b00; font-weight: 900; font-size: 11px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
.note__acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
/* 書き出す */
.exp { display: grid; gap: 4px; width: 58%; padding: 8px; border-radius: 9px; background: var(--m-panel); border: 1px solid var(--m-line); }
.exp__menu { display: flex; align-items: center; gap: 6px; color: var(--m-dim); font-size: 9.5px; }
.exp__item { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 6px; background: var(--m-raised-2); font-weight: 700; }
.exp .ico { width: 11px; height: 11px; }
.exp__dlg { position: absolute; right: 12px; bottom: 12px; width: 60%; padding: 10px; border-radius: 10px; background: #1d1916; border: 1px solid var(--m-line-2); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8); display: grid; gap: 10px; }
.exp__dlg p { font-size: 10px; color: var(--m-dim); }
.exp__dlg em { font-style: normal; color: var(--m-text); }
.exp__dlg .mbtn { --pin-r: 8px; }

/* 近道: 依頼フォーム */
.shortcut {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; margin-top: 28px;
  padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius-lg); border: 1px dashed var(--line-2); background: rgba(255, 236, 214, 0.015);
}
.shortcut__k { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink); background: var(--text-2); padding: 1px 8px; border-radius: 4px; }
.shortcut__t { font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-top: 10px; }
.shortcut__text p:not(.shortcut__k) { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.8; }
.form-mini { padding: 14px; border-radius: 12px; background: var(--m-bg); border: 1px solid var(--m-line-2); font-size: 10.5px; color: var(--m-text); }
.form-mini__g { font-size: 9.5px; color: var(--m-dim); margin-top: 8px; }
.form-mini__g:first-child { margin-top: 0; }
.form-mini__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.form-mini__chips span { padding: 3px 8px; border-radius: 6px; background: var(--m-raised); border: 1px solid var(--m-line); color: var(--m-dim); }
.form-mini__chips span.is-on { border-color: var(--m-accent); color: var(--m-text); font-weight: 700; background: rgba(238, 130, 54, 0.1); }
.form-mini .mbtn { margin-top: 12px; }

.step__done {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 28px; padding: 14px 18px; border-radius: 14px;
  background: rgba(123, 216, 143, 0.06); border: 1px solid rgba(123, 216, 143, 0.25); color: var(--text-2); font-size: 14.5px; line-height: 1.8;
}
.step__done .ico { width: 20px; height: 20px; color: var(--ok); stroke-width: 2.4; margin-top: 3px; }

/* ───────── Lab の素材を使う ───────── */
.lab {
  display: block; border-top: 0; margin-top: 24px; padding-inline: clamp(18px, 3vw, 44px); padding-bottom: clamp(36px, 4.5vw, 60px);
  border-radius: 28px; border: 1px solid rgba(255, 138, 0, 0.22);
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(255, 138, 0, 0.14), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(255, 90, 31, 0.08), transparent 70%),
    #100d0b;
  box-shadow: 0 60px 120px -80px rgba(255, 120, 0, 0.6);
}
.lab__head { max-width: 46em; }
.lab__title { font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
.lab__fig { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; margin-top: 36px; }
.lab__side .presses { margin-top: 18px; }
.side__h { font-size: 15px; margin-top: 26px; display: flex; align-items: center; gap: 10px; }
.side__h::before { content: ""; width: 14px; height: 1px; background: var(--orange); }
.app--lib {
  height: auto; min-height: 500px;
  grid-template-columns: 30px minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: 26px minmax(0, 1fr) 106px;
  grid-template-areas: "rail left tabs" "rail left stage" "rail left tl";
}
.app--lib .app__left { padding: 10px; border-bottom-left-radius: 0; }
.app--lib .app__tl { border-bottom-right-radius: 13px; }
.lfilter { display: flex; gap: 4px; margin-top: 8px; }
.lfilter span { flex: 1; text-align: center; padding: 4px 0; border-radius: 6px; font-size: 10px; color: var(--m-dim); white-space: nowrap; }
.lfilter span.is-on { background: var(--m-accent); color: var(--m-accent-ink); font-weight: 700; --pin-r: 8px; }
.lsearch { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: 7px; background: #1c1916; color: var(--m-dim); font-size: 10px; }
.lsearch .ico { width: 11px; height: 11px; }
.acards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.acard { padding: 6px; border-radius: 9px; background: #1a1714; border: 1px solid var(--m-line); }
.acard__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: visible; }
.acard__thumb--bgm { background: radial-gradient(circle at 50% 55%, #1b1512 0 18%, #d9772e 19% 21%, #2a1f18 22% 40%, #3b2a1e 41%), #3b2a1e; }
.acard__thumb--broll { background: linear-gradient(180deg, #f59e4b 0%, #b6503a 45%, #3a2231 70%, #1a1320 100%); }
.acard__thumb--broll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(90deg, #120d10 0 12%, transparent 12% 15%, #120d10 15% 30%, transparent 30% 36%, #120d10 36% 58%, transparent 58% 62%, #120d10 62% 82%, transparent 82% 86%, #120d10 86%); clip-path: polygon(0 40%, 12% 40%, 12% 10%, 30% 10%, 30% 55%, 36% 55%, 36% 0, 58% 0, 58% 35%, 62% 35%, 62% 20%, 82% 20%, 82% 45%, 86% 45%, 86% 15%, 100% 15%, 100% 100%, 0 100%); border-radius: 0 0 6px 6px; }
.acard__thumb--3d { background: radial-gradient(70% 70% at 50% 40%, #3a4a6a, #141a26); }
.acard__thumb--3d::after { content: ""; position: absolute; left: 50%; top: 14%; width: 22%; height: 72%; margin-left: -11%; border-radius: 5px; background: linear-gradient(160deg, #ff9d4d, #e0541c); box-shadow: 0 0 0 2px #0b0d12, 0 10px 18px rgba(0, 0, 0, 0.6); transform: perspective(80px) rotateY(-18deg) rotateX(6deg); }
.acard__thumb--text { display: grid; place-items: center; background: linear-gradient(135deg, #2b2320, #16110f); }
.acard__thumb--text::after { content: "テロップ"; font-weight: 900; font-size: 13px; color: #fff; padding: 1px 7px; background: #e0541c; border-radius: 3px; box-shadow: 3px 3px 0 #0b0908; }
.acard__badge {
  position: absolute; left: 5px; top: 5px; display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 5px;
  background: rgba(10, 8, 7, 0.78); color: #e9e2d9; font-size: 9px; font-weight: 700; white-space: nowrap; font-family: var(--font-jp); letter-spacing: 0; line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 236, 214, 0.15);
}
.acard__badge--ok { color: var(--ok); }
.acard__badge--buy { background: var(--m-accent); color: var(--m-accent-ink); box-shadow: none; }
.acard__badge--lock { color: #ffc27a; }
.acard__play { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--m-accent); color: var(--m-accent-ink); }
.acard__play .ico { width: 9px; height: 9px; margin-left: 1px; }
.acard__name { margin-top: 5px; font-weight: 700; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acard__tags { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.acard__tags span { font-size: 8px; padding: 0 4px; border-radius: 3px; background: rgba(238, 130, 54, 0.85); color: var(--m-accent-ink); }
.acard__acts { display: flex; gap: 4px; margin-top: 6px; }
.acard__plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--m-raised-2); font-weight: 700; --pin-r: 7px; }
.acard__use { flex: 1; display: grid; place-items: center; height: 22px; border-radius: 5px; background: var(--m-accent); color: var(--m-accent-ink); font-weight: 700; font-size: 10px; --pin-r: 8px; }
.acard__buy { flex: 1; display: grid; place-items: center; height: 22px; border-radius: 5px; background: var(--m-raised-2); color: #ffc27a; font-size: 9.5px; font-weight: 700; }
.app__stage--pv { display: grid; place-items: center; padding: 14px; }
.pv-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: radial-gradient(60% 70% at 30% 35%, rgba(255, 170, 90, 0.3), transparent 70%), linear-gradient(135deg, #332519, #15110e); }
.tl__drop { outline: 1.5px dashed rgba(238, 130, 54, 0.7); outline-offset: 2px; }
.ghost {
  position: absolute; left: 30%; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 5px;
  background: var(--m-accent); color: var(--m-accent-ink); font-weight: 700; font-size: 10px; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(238, 130, 54, 0.5); transform: rotate(-3deg);
}
.ghost .ico { width: 9px; height: 9px; }
.ghost::before { content: ""; position: absolute; left: -9px; top: -8px; width: 13px; height: 13px; background: #fff; clip-path: polygon(0 0, 100% 55%, 55% 60%, 40% 100%); filter: drop-shadow(0 1px 1px #000); }
html.js .fig.is-live .ghost { animation: dragIn 3.4s var(--ease-in-out) 1s infinite; }
@keyframes dragIn {
  0% { transform: translate(-150px, -150px) rotate(-8deg); opacity: 0; }
  12% { opacity: 1; }
  60%, 100% { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
}
html.reduced .ghost { animation: none; }
@container mock (max-width: 560px) {
  .app--lib { min-height: 0; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto 96px; grid-template-areas: "rail left" "rail tl"; }
  .app--lib > .app__tabs, .app--lib > .app__stage { display: none; }
  .app--lib .app__tl { border-bottom-left-radius: 0; }
  @keyframes dragIn { 0% { transform: translate(-40px, -120px) rotate(-8deg); opacity: 0; } 12% { opacity: 1; } 60%, 100% { transform: none; opacity: 1; } }
}
.legend { margin: 12px 0 0; display: grid; gap: 8px; }
.legend div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; }
.legend dt { position: relative; }
.legend dt .acard__badge { position: static; height: 22px; font-size: 11.5px; padding: 0 8px; }
.legend dd { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.legend dd b { color: var(--text); margin-right: 6px; }

.lab__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 30px; padding-top: 6px; border-top: 1px solid var(--line); }
.askai__chat { margin-top: 14px; display: grid; gap: 10px; }
.chat__me, .chat__ai { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.65; }
.chat__me { justify-self: end; background: var(--orange); color: #160b00; font-weight: 700; border-bottom-right-radius: 4px; }
.chat__ai { background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text-2); border-bottom-left-radius: 4px; }
.chat__who { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--orange-2); margin-bottom: 2px; }
.askai__note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cats__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cats__list li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); background: rgba(255, 236, 214, 0.02); }
.cats__web { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.cats__web .ico { margin-top: 4px; color: var(--muted); }
.cats .textlink { margin-top: 12px; }

/* ───────── 上級者（控えめ） ───────── */
.adv-wrap { padding-block: clamp(48px, 6vw, 80px) clamp(88px, 10vw, 140px); }
.adv { border-radius: var(--radius-lg); border: 1px dashed var(--line-2); background: rgba(255, 236, 214, 0.012); }
.adv[open] { border-style: solid; border-color: var(--line-2); background: #100e0c; }
.adv__sum {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k h chev" "k d chev";
  gap: 2px 16px; align-items: center; padding: 20px 22px; border-radius: inherit;
}
.adv__sum::-webkit-details-marker { display: none; }
.adv__k { grid-area: k; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 6px; align-self: center; }
.adv__h { grid-area: h; font-weight: 900; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text-2); }
.adv__d { grid-area: d; font-size: 13.5px; color: var(--muted); }
.adv__chev { grid-area: chev; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.adv__chev::before, .adv__chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; background: var(--text-2); transition: transform 0.4s var(--ease-out); }
.adv__chev::after { transform: rotate(90deg); }
.adv[open] .adv__chev::after { transform: rotate(0); }
.adv__sum:hover .adv__h { color: var(--text); }
.adv__body { padding: 0 22px 26px; }
.adv__lead { font-size: 14.5px; color: var(--text-2); line-height: 1.9; max-width: 50em; padding-top: 18px; border-top: 1px solid var(--line); }
.adv__lead b { color: var(--text); }
.adv__steps { list-style: none; counter-reset: adv; margin: 22px 0 0; padding: 0; display: grid; gap: 22px; }
.adv__steps > li { counter-increment: adv; position: relative; padding-left: 38px; }
.adv__steps > li::before { content: counter(adv); position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; font: 700 12px/1 var(--font-mono); color: var(--text-2); border: 1px solid var(--line-2); }
.adv__steps h3 { font-size: 15.5px; margin-bottom: 10px; line-height: 25px; }
.adv__p { margin-top: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.8; }
.adv__p a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; }
.adv__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.code { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 8px 8px 14px; border-radius: 10px; background: #0a0908; border: 1px solid var(--line-2); }
.code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 13px; color: #f3d7b5; padding: 4px 0; scrollbar-width: thin; }
.code code::before { content: "$ "; color: var(--muted); }
.code-tabs .code { margin-top: 10px; }
code.inline { font-size: 0.92em; padding: 1px 6px; border-radius: 5px; background: #0a0908; border: 1px solid var(--line); color: #f3d7b5; white-space: nowrap; }
.copy { flex: none; min-width: 84px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--text-2); transition: color 0.3s, border-color 0.3s, background 0.3s; }
.copy:hover { color: var(--text); border-color: var(--orange); }
.copy.is-done { color: var(--ok); border-color: rgba(123, 216, 143, 0.5); background: rgba(123, 216, 143, 0.06); }

/* ───────── つまずいたとき ───────── */
.help { padding-block: clamp(64px, 8vw, 112px) 0; }
.help__title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.faq { margin-top: 28px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative; padding: 18px 48px 18px 0; font-weight: 700; font-size: 16px; line-height: 1.6; transition: color 0.3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 13px; height: 1.5px; background: var(--orange-2); transition: transform 0.4s var(--ease-out); }
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0); }
.faq__item summary:hover { color: var(--orange-2); }
.faq__item p { padding: 0 48px 20px 0; color: var(--text-2); font-size: 15px; line-height: 1.9; }
.faq__item a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; }
.community { margin-top: 44px; }
.community__lead { font-weight: 700; font-size: 16px; }
.community__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ccard {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon t go" "icon d go"; gap: 2px 16px; align-items: center;
  padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: var(--ink-2); transition: border-color 0.4s, transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.ccard:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(255, 120, 0, 0.6); }
.ccard__icon { grid-area: icon; width: 40px; height: 40px; }
.ccard--discord .ccard__icon { color: #8b95ff; }
.ccard__icon--line { display: grid; place-items: center; border-radius: 11px; background: #06c755; color: #fff; font: 800 11px/1 var(--font-en); letter-spacing: 0.02em; }
.ccard__t { grid-area: t; font-weight: 900; font-size: 16px; }
.ccard__d { grid-area: d; font-size: 13px; color: var(--muted); }
.ccard__go { grid-area: go; width: 20px; height: 20px; color: var(--orange-2); transition: transform 0.4s var(--ease-out); }
.ccard:hover .ccard__go { transform: translateX(4px); }

/* トースト（コピー結果） */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300; padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--ink);
  font-weight: 700; font-size: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ───────────────── レスポンシブ ───────────────── */
@media (max-width: 1180px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__text { max-width: 40em; }
  .step__text--wide { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .lab__fig { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .s-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stepnav {
    position: sticky; top: var(--nav-h); z-index: 60; padding: 0; margin-inline: calc(-1 * var(--gutter));
    background: rgba(11, 9, 8, 0.9); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  .stepnav__label { display: none; }
  .stepnav__scroll { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 8px var(--gutter); scrollbar-width: none; }
  .stepnav__scroll::-webkit-scrollbar { display: none; }
  .stepnav__list, .stepnav__more { display: flex; gap: 4px; flex: none; }
  .stepnav__list::before, .stepnav__list::after { display: none; }
  .stepnav__more { margin: 0; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--line); }
  .stepnav a { padding: 5px 10px 5px 5px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; gap: 7px; }
  .stepnav a.is-current { background: rgba(255, 138, 0, 0.12); }
  .stepnav__n { width: 22px; height: 22px; font-size: 9.5px; }
  .stepnav__bar { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
  .stepnav__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-2)); box-shadow: 0 0 10px var(--orange); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.25s linear; }
  .step:first-child { border-top: 0; }
}
@media (max-width: 900px) {
  .fork { grid-template-columns: minmax(0, 1fr); }
  .fork__card--sub { align-self: stretch; }
  .flow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shortcut { grid-template-columns: minmax(0, 1fr); }
  .lab__more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .s-icon { right: var(--gutter); top: calc(var(--nav-h) + 26px); width: 64px; }
  .s-hero__title { font-size: clamp(2rem, 9.4vw, 3rem); }
  .route { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .route::before { left: 13px; right: auto; top: 13px; bottom: 13px; width: 1px; height: auto; background: linear-gradient(var(--orange), rgba(255, 138, 0, 0.15)); }
  .route li { flex-direction: row; align-items: center; }
  .fork__cta { width: 100%; }
  .flow__grid { grid-template-columns: minmax(0, 1fr); }
  .step__num { font-size: 5.6rem; }
  .step__title { font-size: 1.55rem; }
  .dl__main { max-width: none; }
  .btn--xl { min-height: 60px; font-size: 16px; }
  .presses li { font-size: 14px; padding: 8px 8px 8px 42px; }
  .presses li::before { left: 8px; top: 9px; }
  .lab { padding-inline: 16px; margin-inline: calc(-1 * var(--gutter) + 8px); border-radius: 22px; }
  .legend div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .community__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__item summary { font-size: 15px; }
  .faq__item p { padding-right: 0; }
  .adv__sum { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k chev" "h chev" "d chev"; padding: 18px 16px; }
  .adv__k { justify-self: start; margin-bottom: 6px; }
  .adv__body { padding: 0 16px 22px; }
  .adv__steps > li { padding-left: 0; }
  .adv__steps > li::before { position: static; margin-bottom: 8px; }
  .code { flex-wrap: wrap; }
  .code code { flex-basis: 100%; }
  .copy { margin-left: auto; }
  .popup { width: 164px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__caret { animation: none; }
  .work li:nth-child(3) i { animation: none; }
}

/* ═════════════════ v2（2026-09-27 オーナーフィードバック）═════════════════
 * 実ロゴ・実サムネイル・人物のコマで図を埋める / 無料で使える AI / 手でも直せる（台本・プレビュー）
 */

/* パートナーのロゴ（assets/img/partners・オーナー許可済み） */
.plogo { width: 14px; height: 14px; flex: none; object-fit: contain; }
.plogo--tile { border-radius: 3px; object-fit: cover; }
.plogo--text { display: inline-grid; place-items: center; font: 700 8px/1 var(--font-en); letter-spacing: 0; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; color: var(--text-2); }
.agents li { display: inline-flex; align-items: center; gap: 8px; }
.agents .plogo { width: 18px; height: 18px; }
.agents .plogo--text { width: 18px; height: 18px; font-size: 7.5px; }
.partner__list .plogo { width: 13px; height: 13px; }
.partner__list li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.step__link { margin-top: 18px; }
.home__new { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.setdlg__nav p:not(.setdlg__nh) { white-space: nowrap; letter-spacing: 0; }
.setdlg__body { grid-template-columns: 128px minmax(0, 1fr); }
@container mock (max-width: 480px) { .setdlg__body { grid-template-columns: 108px minmax(0, 1fr); } }

/* 実画像で埋めるモック */
.mthumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.mthumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.home__recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.home__recent img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; }
.rr-plus { color: var(--m-accent); font-weight: 700; font-size: 14px; line-height: 1; }
.rr-plus--mini { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border-radius: 5px; background: var(--m-raised-2); font-size: 13px; --pin-r: 7px; }
.mini__ph { display: flex; align-items: center; gap: 6px; }
.ss__body { margin-top: 12px; display: grid; gap: 6px; }
.ss__body i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.32); }
.ss__body i:nth-child(2) { width: 88%; }
.ss__body i:nth-child(3) { width: 58%; }
.sk-list--tight { padding: 8px 0 0; gap: 6px; }
.sk-inline { display: block; width: 70%; height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(255, 236, 214, 0.08); }
.acard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.acard__thumb .acard__badge, .acard__thumb .acard__play { z-index: 1; }
.pv-frame { object-fit: cover; }
.drop__file { width: 50px; height: 30px; object-fit: cover; }
.view::before { display: none; }
.view__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.view__tel, .note__circle, .note__bubble { z-index: 1; }
.view__play { z-index: 2; }
.exp { width: 50%; }
.exp__dlg { width: 54%; gap: 8px; }
.exp__thumb { width: 100%; height: 40px; object-fit: cover; border-radius: 5px; }

/* 無料で使える AI パートナー */
.step > .freeai { grid-column: 1 / -1; }
.freeai {
  margin-top: clamp(16px, 3vw, 36px); padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 216, 143, 0.28);
  background: radial-gradient(80% 90% at 100% 0%, rgba(123, 216, 143, 0.07), transparent 60%), rgba(255, 236, 214, 0.015);
  scroll-margin-top: calc(var(--nav-h) + 72px);
}
.freeai .eyebrow { color: var(--ok); }
.freeai__title { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-top: 12px; }
.freeai__lead { margin-top: 10px; color: var(--text-2); font-size: 15px; line-height: 1.9; max-width: 44em; }
.freeai__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.fcard { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--ink-2); }
.fcard--free { border-color: rgba(123, 216, 143, 0.4); background: linear-gradient(180deg, rgba(123, 216, 143, 0.08), transparent 70%), var(--ink-2); }
.fcard__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }
.fcard--free .fcard__k { color: var(--ok); }
.fcard__logos { display: flex; gap: 6px; margin-top: 10px; }
.fcard__logos .plogo { width: 22px; height: 22px; }
.fcard__t { font-weight: 700; font-size: 16px; margin-top: 8px; }
.fcard__d { margin-top: 4px; font-size: 13.5px; color: var(--text-2); line-height: 1.8; }
.freeai__fig { margin-top: 20px; }
.freeai__minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mini--pick, .mini--models { height: 156px; }
.partner__list--mini { margin-top: 4px; }
.partner__list--mini li { padding: 6px 8px; }
.models { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.models li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; background: var(--m-raised); border: 1px solid var(--m-line); font-size: 10.5px; }
.models li.pin { --pin-r: 8px; border-color: rgba(123, 216, 143, 0.5); }
.models li i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 236, 214, 0.08); }
.models__free { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: rgba(123, 216, 143, 0.18); color: var(--ok); }
.models__tag { width: 28px; height: 12px; border-radius: 4px; background: rgba(255, 236, 214, 0.08); }
.presses--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 手でも直せる（台本・プレビュー） */
.hand { margin: 28px 0 0; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: rgba(255, 236, 214, 0.015); }
.hand__k { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: #160b00; background: var(--orange-2); padding: 1px 8px; border-radius: 4px; }
.hand__t { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin-top: 10px; }
.hand__d { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.85; }
.hand__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.hand__ct { font-size: 16px; margin-top: 14px; }
.hand__cd { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.8; }
.mini--script, .mini--direct { height: 200px; }
.script { margin-top: 4px; }
.script p { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--m-line); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.script time { font-family: var(--font-mono); font-size: 9.5px; color: var(--m-dim); flex: none; }
.script__word { padding: 0 3px; border-radius: 3px; background: rgba(238, 130, 54, 0.25); outline: 1px solid var(--m-accent); }
.ctx { position: absolute; left: 96px; top: 126px; z-index: 2; display: grid; gap: 2px; padding: 5px; border-radius: 8px; background: #231e1a; border: 1px solid var(--m-line-2); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7); }
.ctx__item { padding: 5px 12px; border-radius: 5px; font-size: 11px; white-space: nowrap; }
.ctx__item.pin { background: rgba(238, 130, 54, 0.2); font-weight: 700; --pin-r: 7px; }
.mini--direct { padding: 10px; }
.direct { position: relative; height: 100%; border-radius: 8px; }
.direct__bg { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.direct__broll { position: absolute; right: 7%; top: 11%; width: 34%; aspect-ratio: 16 / 10; outline: 1.5px solid #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); --pin-r: 4px; }
.direct__broll img { width: 100%; height: 100%; object-fit: cover; }
.direct__sub {
  position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); padding: 3px 14px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.66); color: #fff; font-weight: 900; font-size: 11px; white-space: nowrap;
  outline: 1.5px dashed rgba(255, 255, 255, 0.9); outline-offset: 2px; --pin-r: 6px;
}
html.js .fig.is-live .direct__sub { animation: subWiden 3.4s var(--ease-in-out) infinite alternate; }
html.js .fig.is-live .direct__broll { animation: brollGrow 3.4s var(--ease-in-out) 0.8s infinite alternate; }
@keyframes subWiden { from { padding-inline: 14px; } to { padding-inline: 28px; } }
@keyframes brollGrow { from { width: 30%; } to { width: 38%; } }
.h { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid #2a2a2a; border-radius: 2px; }
.h--tl { left: -4px; top: -4px; }
.h--tr { right: -4px; top: -4px; }
.h--bl { left: -4px; bottom: -4px; }
.h--br { right: -4px; bottom: -4px; }
.h--l { left: -6px; top: 50%; margin-top: -4px; }
.h--r { right: -6px; top: 50%; margin-top: -4px; }
html.reduced .direct__sub, html.reduced .direct__broll { animation: none; }

@media (max-width: 760px) {
  .freeai__cards, .freeai__minis, .hand__grid { grid-template-columns: minmax(0, 1fr); }
  .presses--row { grid-template-columns: minmax(0, 1fr); }
}

/* Mac の dmg ウィンドウ（ドラッグで Applications へ） */
.dmg { margin-top: 18px; border-radius: 14px; border: 1px solid var(--line-2); background: #1b1714; overflow: hidden; max-width: 560px; }
.dmg__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #231e1a; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.dmg__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a322c; }
.dmg__bar span { margin-left: 8px; }
.dmg__body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 30px 24px; }
.dmg__app, .dmg__apps { display: grid; justify-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.dmg__app img { border-radius: 16px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }
.dmg__arrow { width: clamp(60px, 12vw, 120px); color: var(--orange); }
.dmg__folder { width: 72px; height: 58px; border-radius: 8px; background: linear-gradient(180deg, #6fb2ff, #3b82f6); position: relative; }
.dmg__folder::before { content: ""; position: absolute; left: 0; top: -8px; width: 30px; height: 12px; border-radius: 6px 6px 0 0; background: #6fb2ff; }

/* 上級者のコマンド欄: 長いコマンドで手順リストが画面より広がらないように（grid の子は min-width: auto で中身に合わせて伸びるため） */
.adv__body, .adv__steps, .adv__steps > li, .code-tabs { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  /* スマホは横スクロールではなく折り返して全文を見せる */
  .code { align-items: flex-start; }
  .code code { white-space: normal; overflow-wrap: anywhere; word-break: break-all; line-height: 1.6; }
}
/* タブで隠したコマンド欄は隠す（.code の display: flex が hidden 属性に勝ってしまうため） */
.code[hidden] { display: none; }

/* v4: 主なパートナー 3 つ + ほかのパートナー（控えめ） */
.agents--main li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; border-radius: 12px; font-size: 14px; }
.agents--main li .plogo { margin-bottom: 4px; }
.agents--main li small { margin: 0; font: 500 11px/1.4 var(--font-jp); color: var(--muted); }
.agents__more-k { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }
.agents--more { margin-top: 6px; gap: 4px; }
.agents--more li { padding: 2px 9px; font-size: 12px; color: var(--muted); border-color: var(--line); gap: 6px; }
.agents--more .plogo { width: 13px; height: 13px; opacity: 0.8; }
.freeai__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .freeai__cards { grid-template-columns: minmax(0, 1fr); } }
.agents--main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 480px; }
.agents--main li { min-width: 0; padding: 8px 10px; }
.agents--main li small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 10.5px; }