/* The walkthrough reuses the app shell from preview.css; only what the shell lacks lives here. */
.demo-launch { margin-top: -6px; }
.demo-video { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.demo-thumb { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: var(--soft); }
.demo-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; transition: filter .3s; }
.demo-thumb img.blur { filter: blur(9px) saturate(.8); }
.demo-thumb figcaption { position: absolute; top: 8px; right: 6px; display: flex; flex-direction: row-reverse; gap: 2px; }
.demo-thumb b { writing-mode: vertical-rl; white-space: nowrap; color: #fff; font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: .04em; -webkit-text-stroke: 1px #c9328e; text-shadow: 0 2px 6px #0009; }
.demo-thumb span { position: absolute; right: 8px; bottom: 8px; padding: 1px 8px; font-size: 12px; color: #fff; background: #000a; border-radius: 8px; }
.demo-title { display: block; width: 100%; margin: 0; padding: 12px 14px; text-align: left; font: inherit; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; overflow-wrap: anywhere; }
.demo-title[aria-pressed="true"] { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-actions .button { min-height: 48px; padding: 12px 24px; }
#demo-draft { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.chat-head { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; align-items: center; }
.chat-head img { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.chat-head span { font-size: 12px; opacity: .8; margin: 0; }
.foot span { margin-left: auto; }
/* Stage labels (Owner 2026-11-09): the current screens say ベータ版, the ideas for later say 将来, in small type. */
.stage { display: inline-block; align-self: center; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.stage.future { border-color: var(--pink); color: var(--pink); background: transparent; }
.tabs small, .steps .ahead small, .future-card .label small { font-size: 10px; font-weight: 700; color: var(--pink); margin-left: 2px; }
.tabs a[aria-current="page"] small { color: inherit; }
.steps .ahead { margin-left: auto; background: transparent; border: 1px dashed var(--pink); color: var(--text); }
.steps .ahead[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.steps .ahead[aria-current="page"] small { color: inherit; }
/* The future screen: the same work column continues below the finished pack, framed so it reads as an idea. */
.future-block { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px dashed var(--pink); border-radius: 20px; background: linear-gradient(145deg, var(--surface), var(--soft)); min-width: 0; }
.future-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.future-head .stage { align-self: flex-start; }
.future-head h2 { font-size: 20px; }
/* The loop (Owner 2026-11-09: 「将来構想も視覚的にわかりやすく」). Six steps run around one ring: the upper row left to
   right, the lower row back right to left, a down arrow at the right end and an up arrow at the left end closing it.
   The arrows are CSS text on ::after, placed with offsets (no transform), so the ordered list reads the same without CSS. */
.future-loop { list-style: none; margin: 4px 0 0; padding: 0 0 2px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; }
.future-loop li { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 12px 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.future-loop li > b { font-size: 15px; line-height: 1.3; }
.future-loop li > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.future-loop .loop-num { position: absolute; top: -11px; left: -11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 12px; font-weight: 800; line-height: 1; }
.future-loop .loop-you { border-color: var(--pink); background: linear-gradient(135deg, var(--soft), var(--surface)); }
.future-loop .loop-you .loop-num { background: var(--pink); }
.future-loop .stage { align-self: flex-start; margin-top: 2px; }
.future-loop .loop-stages { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.future-loop .loop-stages .stage { margin-top: 0; }
.future-loop li:nth-child(4) { grid-area: 2 / 3; }
.future-loop li:nth-child(5) { grid-area: 2 / 2; }
.future-loop li:nth-child(6) { grid-area: 2 / 1; }
.future-loop li::after { position: absolute; width: 20px; height: 20px; color: var(--pink); font-size: 20px; font-weight: 700; line-height: 20px; text-align: center; pointer-events: none; }
.future-loop li:nth-child(1)::after, .future-loop li:nth-child(2)::after { content: "→"; right: -27px; top: calc(50% - 10px); }
.future-loop li:nth-child(3)::after { content: "↓"; bottom: -25px; left: calc(50% - 10px); }
.future-loop li:nth-child(4)::after, .future-loop li:nth-child(5)::after { content: "←"; left: -27px; top: calc(50% - 10px); }
.future-loop li:nth-child(6)::after { content: "↑"; top: -25px; left: calc(50% - 10px); }
.loop-return { margin: 0; }
.future-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.future-card { gap: 10px; }
/* 分析する: two small figures with invented numbers. Marks carry the colour (one hue, the highlight at full strength),
   every label and value stays in the text tokens, and the "架空の例" tag sits in each figure's own title. */
.future-stat { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.future-stat .stat-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.future-stat .stat-title .stage { font-size: 10px; padding: 0 6px; line-height: 1.5; }
.future-stat > small { font-size: 11px; color: var(--muted); }
.future-bars, .future-hours { list-style: none; margin: 0; padding: 0; }
.future-bars { display: flex; flex-direction: column; gap: 6px; }
.future-bars li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 2.4em; gap: 8px; align-items: center; font-size: 12px; }
.future-bars li > span { color: var(--muted); }
.future-bars li > b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.future-bars i { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--accent); opacity: .5; transform-origin: left center; }
.future-bars li:first-child i { opacity: 1; }
.future-bars li:first-child > span { color: var(--text); font-weight: 700; }
.future-bars .w100 { width: 100%; } .future-bars .w74 { width: 74%; } .future-bars .w52 { width: 52%; }
.future-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 72px; }
.future-hours li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; height: 100%; font-size: 11px; color: var(--muted); }
.future-hours i { display: block; width: min(100%, 22px); border-radius: 4px 4px 0 0; background: var(--accent); opacity: .5; transform-origin: center bottom; }
.future-hours li > span { width: 100%; padding-top: 3px; border-top: 1px solid var(--line); text-align: center; white-space: nowrap; }
.future-hours .peak i { opacity: 1; }
.future-hours .peak > span { color: var(--text); font-weight: 700; }
.future-hours .h1 { height: 18%; } .future-hours .h2 { height: 34%; } .future-hours .h3 { height: 50%; } .future-hours .h4 { height: 66%; } .future-hours .h5 { height: 82%; }
.future-insight { margin: 0; font-size: 13px; line-height: 1.6; }
.future-insight b { color: var(--pink); }
.future-card h3 { font-size: 15px; }
.future-tasks, .future-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.future-tasks li, .future-plan li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 10px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.future-tasks b, .future-plan b { font-size: 13px; }
.future-tasks span, .future-plan span { color: var(--muted); font-size: 12px; }
.future-tasks em, .future-plan em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--pink); white-space: nowrap; }
.future-chat { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--chat); color: var(--chat-text); }
.future-chat .msg { max-width: 100%; }
@media (max-width: 1100px) { .future-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  /* On a phone the ring unrolls into one column; every arrow points down and the closing line sits under step 6. */
  .future-loop { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 0 24px 8px; }
  .future-loop li:nth-child(n) { grid-area: auto; }
  .future-loop li:nth-child(n)::after { content: "↓"; top: auto; right: auto; bottom: -26px; left: calc(50% - 10px); }
  .demo-thumb b { font-size: 15px; -webkit-text-stroke: 0; }
  .demo-video { grid-template-columns: 110px minmax(0, 1fr); }
  .demo-video h2 { flex-wrap: wrap; }
  .demo-video h2 small { margin-left: 0; width: 100%; }
  .demo-actions .btn, .demo-actions .button { width: 100%; }
  .foot span { margin-left: 0; width: 100%; }
  /* Phone chat sheet (Owner 2026-11-08: no way to close the AI screen). The toggle rides above the open sheet. */
  .steps .ahead { margin-left: 0; }
  .chatfab { z-index: 21; }
  .chatfab[aria-expanded="true"] { bottom: calc(72vh + 12px); }
}
@media (max-width: 480px) { .demo-video { grid-template-columns: minmax(0, 1fr); } .demo-thumb { max-width: 180px; } }

/* Motion (Owner 2026-11-08). demo.js adds .motion, .is-reading and .pending only when motion is wanted,
   so without JavaScript or with reduced motion nothing below hides, delays or moves anything. */
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes dots { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes caret { 50% { opacity: 0; } }
.motion [data-view]:not([hidden]), .motion #p-video:not([hidden]), .motion #p-work:not([hidden]) { animation: view-in .45s ease-out both; }
/* The app shell holds the fixed phone chat and its toggle, so it fades without a transform. */
.motion #v-app:not([hidden]) { animation-name: fade-in; }
.demo-title { min-height: 48px; }
.motion .entry > div:first-child > *, .motion .entry .photo, .motion .u { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.motion .entry > div:first-child > :nth-child(2) { animation-delay: .1s; }
.motion .entry > div:first-child > :nth-child(3) { animation-delay: .2s; }
.motion .entry .photo { animation-delay: .15s; }
.motion .u:nth-child(2) { animation-delay: .1s; } .motion .u:nth-child(3) { animation-delay: .2s; } .motion .u:nth-child(4) { animation-delay: .3s; }
/* The future loop: the six steps rise in, then light up once in order around the ring (a finite run, no loop). The
   figures in 分析する grow from their baselines once the steps have settled. */
@keyframes loop-light { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px var(--pink), var(--shadow); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
.future-loop li:nth-child(2) { --i: 1; } .future-loop li:nth-child(3) { --i: 2; } .future-loop li:nth-child(4) { --i: 3; }
.future-loop li:nth-child(5) { --i: 4; } .future-loop li:nth-child(6) { --i: 5; }
.motion .future-loop li { animation: rise .7s cubic-bezier(.2,.7,.2,1) both, loop-light 1s ease-in-out both; animation-delay: calc(var(--i, 0) * .1s), calc(.9s + var(--i, 0) * .45s); }
.motion .future-bars i { animation: grow-x .9s cubic-bezier(.2,.7,.2,1) 1.2s both; }
.motion .future-hours i { animation: grow-y .9s cubic-bezier(.2,.7,.2,1) 1.4s both; }
/* The future cards rise in one after another when the work screen appears, like the entry cards. */
.motion .future-card { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.motion .future-card:nth-child(2) { animation-delay: .12s; } .motion .future-card:nth-child(3) { animation-delay: .24s; } .motion .future-card:nth-child(4) { animation-delay: .36s; }
.motion .msg.in { animation: msg-in .35s cubic-bezier(.2,.7,.2,1) both; }
.motion .msg.pending { opacity: 0; }
.msg.dots { display: inline-flex; gap: 5px; align-items: center; min-height: 38px; }
.msg.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-muted); animation: dots 1s ease-in-out infinite; }
.msg.dots i:nth-child(2) { animation-delay: .15s; } .msg.dots i:nth-child(3) { animation-delay: .3s; }
.motion .typing::after { content: "▍"; color: var(--pink); animation: caret .8s steps(1) infinite; }
/* Reading the video: a bar fills, then the facts, thumbnails and choices settle in one by one. */
.read-progress { display: none; }
.is-reading .read-progress { display: block; width: min(100%, 320px); height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; transition: opacity .4s .5s; }
.is-reading .read-progress i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--pink)); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.is-reading.is-busy .read-progress i { transform: scaleX(1); }
.is-reading.is-read .read-progress { opacity: 0; }
.is-reading .facts > div, .is-reading .frame, .is-reading .mosaic, .is-reading .next-step { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.is-reading.is-read .facts > div, .is-reading.is-read .frame, .is-reading.is-read .mosaic, .is-reading.is-read .next-step { opacity: 1; transform: none; }
.is-reading.is-read .facts > div:nth-child(2) { transition-delay: .1s; } .is-reading.is-read .facts > div:nth-child(3) { transition-delay: .2s; }
.is-reading.is-read .frame:nth-child(1) { transition-delay: .3s; } .is-reading.is-read .frame:nth-child(2) { transition-delay: .4s; }
.is-reading.is-read .frame:nth-child(3) { transition-delay: .5s; } .is-reading.is-read .frame:nth-child(4) { transition-delay: .6s; }
.is-reading.is-read .mosaic { transition-delay: .75s; } .is-reading.is-read .next-step { transition-delay: .9s; }
/* Light reactions to the pointer. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn, .u, .frame img, .photo img, .demo-title, .provider, .quick button { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, filter .3s ease; }
  .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px #bd3aab48; }
  .btn:active { transform: translateY(0) scale(.98); }
  .u:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .frame:hover img { transform: scale(1.05); }
  .photo:hover img { transform: scale(1.03); }
  .demo-title:hover, .provider:hover { transform: translateX(3px); }
  .quick button:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .motion [data-view]:not([hidden]), .motion #p-video:not([hidden]), .motion #p-work:not([hidden]), .motion .entry > div:first-child > *, .motion .entry .photo, .motion .u, .motion .future-card, .motion .future-loop li, .motion .future-bars i, .motion .future-hours i, .motion .msg.in, .msg.dots i, .motion .typing::after { animation: none; }
  .motion .msg.pending { opacity: 1; }
  .is-reading .read-progress { display: none; }
  .is-reading .facts > div, .is-reading .frame, .is-reading .mosaic, .is-reading .next-step { opacity: 1; transform: none; transition: none; }
}

/* ① 動画を編集 (Owner 2026-11-09: editing comes before reading). Static picture of the in-app editor. */
.edit-stage { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.edit-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-mosaic { position: absolute; left: 44%; top: 22%; width: 18%; height: 30%; border-radius: 50%; border: 2px dashed #ff94d1;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 11px 11px; backdrop-filter: blur(9px) saturate(1.05); -webkit-backdrop-filter: blur(9px) saturate(1.05); }
.edit-time { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; }
.edit-timeline { position: relative; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 6px; }
.edit-timeline .lane { position: relative; height: 16px; padding-left: 64px; }
.edit-timeline .lane b { position: absolute; left: 0; top: 0; font-size: 11px; color: var(--muted); font-weight: 600; }
.edit-timeline .bar { position: absolute; top: 3px; height: 10px; border-radius: 4px; }
.bar.sample { background: #78dc96; } .bar.cut { background: #ff6b8b; } .bar.mute { background: #7cc4ff; } .bar.mosaic { background: #f0c27a; }
.bar.s1 { left: calc(64px + 30%); width: 6%; } .bar.s2 { left: calc(64px + 62%); width: 5%; }
.bar.c1 { left: 64px; width: 7%; } .bar.c2 { left: calc(64px + 48%); width: 9%; }
.bar.m1 { left: calc(64px + 21%); width: 4%; }
.bar.z1 { left: calc(64px + 12%); width: 55%; }
.edit-timeline .playhead { position: absolute; top: 4px; bottom: 4px; left: calc(74px + 16%); width: 2px; background: #ff94d1; }
.edit-demo .edit-points { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.edit-demo .edit-points li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; color: var(--muted); display: grid; gap: 2px; }
.edit-demo .edit-points b { color: var(--text); font-size: 13.5px; }
.home-back { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }