/* ======================================================================
   aw-charfigs-0906.css · 0906 lill
   Character API 的图版（.av-*）。首页 Section B 的 tab 右栏和 avatar-api.html
   共用，所以从 aw-subpage-0906.css 里拆出来单放。
   素材源：refs/she-was-a-file/（原始视觉稿 + visual study）。
   图全部现画（SVG / DOM，紫系单色），无渐变无阴影无外描边。
   ====================================================================== */
/* ======================================================================
   avatar-api.html · 六个图版
   素材 refs/she-was-a-file/（原始视觉稿 + visual study）。图全部现画：
   白 .dv-plate 里的 SVG / DOM，紫系单色，线条走 currentColor 一族。
   ====================================================================== */
.av, .av-plate-in, .av-still { --av-pur: #7180ff; --av-ink: #241c4e; --av-ink6: rgba(36,28,78,.6); --av-ink4: rgba(36,28,78,.4); --av-lav: #e3e0ff; --av-ease: cubic-bezier(.22,1,.36,1); }
.av-lab { display: block; color: var(--av-ink4); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.av-cap { margin: 20px 0 0; color: var(--av-ink6); font-size: 14px; line-height: 1.55; }
.av-cap b { color: var(--av-pur); font-weight: 700; }

/* --- 01 file → rig → presence ------------------------------------------- */
.av-rig { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(12px,2vw,28px); }
.av-rig > * { min-width: 0; }
.av-rig-step { display: grid; justify-items: center; gap: 14px; min-width: 0; text-align: center; }
.av-rig-box {
  position: relative; box-sizing: border-box; display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; background: #f4f3ff; overflow: hidden;
}
.av-rig-box.is-drop { background: none; border: 1.5px dashed rgba(113,128,255,.55); }
.av-rig-box.is-live { background: var(--av-pur); }
.av-rig-box > svg:not(.av-drop-cursor) { width: 62%; height: auto; overflow: visible; }
.av-file { fill: none; stroke: var(--av-pur); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.av-file-txt { fill: var(--av-pur); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.av-bone { fill: none; stroke: var(--av-pur); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.av-joint { fill: var(--av-pur); }
.av-live { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.av-live-fill { fill: #fff; }
.av-rig-arrow { width: clamp(20px,3vw,46px); height: 10px; }
.av-rig-arrow path { fill: none; stroke: rgba(113,128,255,.55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av-plate-in.is-in .av-bone { animation: av-bone-in .7s var(--av-ease) both; }
.av-plate-in.is-in .av-bone:nth-of-type(2) { animation-delay: .08s; }
.av-plate-in.is-in .av-bone:nth-of-type(3) { animation-delay: .16s; }
.av-plate-in.is-in .av-joint { animation: av-pop .5s var(--av-ease) both .2s; }
@keyframes av-bone-in { from { opacity: 0; stroke-dasharray: 0 90; } to { opacity: .5; stroke-dasharray: 90 0; } }
@keyframes av-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.av-drop-cursor { position: absolute; left: 14%; top: 22%; width: 16px; height: 22px; flex: none; }
.av-plate-in.is-in .av-drop-cursor { animation: av-cursor 3.4s var(--av-ease) infinite; }
@keyframes av-cursor { 0% { transform: translate(0,0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(96%,88%); opacity: 1; } 72% { transform: translate(96%,88%) scale(.86); } 88%,100% { transform: translate(96%,88%); opacity: 0; } }

/* --- 02 whole body vs mouth only ---------------------------------------- */
.av-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,28px); }
.av-split > * { min-width: 0; }
.av-split-pane { display: grid; gap: 14px; min-width: 0; }
.av-fig-box { display: grid; place-items: center; box-sizing: border-box; min-width: 0; aspect-ratio: 5 / 4; border-radius: 18px; background: #f4f3ff; padding: 18px; }
.av-split-pane.is-flat .av-fig-box { background: #f6f6f8; }
.av-fig-box svg { width: 100%; max-width: 100%; height: 100%; overflow: visible; }
.av-body-part { transform-box: fill-box; transform-origin: center; }
.av-plate-in.is-in .av-split-pane:not(.is-flat) .av-body-part { animation: av-laugh 1.9s var(--av-ease) infinite; }
.av-plate-in.is-in .av-split-pane:not(.is-flat) .av-p2 { animation-delay: .08s; }
.av-plate-in.is-in .av-split-pane:not(.is-flat) .av-p3 { animation-delay: .16s; }
.av-plate-in.is-in .av-split-pane:not(.is-flat) .av-p4 { animation-delay: .24s; }
@keyframes av-laugh { 0%,100% { transform: translateY(0) rotate(0deg); } 46% { transform: translateY(-4px) rotate(-1.4deg); } 70% { transform: translateY(1.5px) rotate(.8deg); } }
.av-plate-in.is-in .av-split-pane.is-flat .av-mouth { animation: av-jaw 1.9s var(--av-ease) infinite; transform-box: fill-box; transform-origin: center top; }
@keyframes av-jaw { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1.35); } }

/* --- 03 hands know first ------------------------------------------------- */
.av-timeline { display: grid; gap: 18px; }
.av-tl-track { position: relative; height: 168px; border-radius: 16px; background: #f4f3ff; overflow: hidden; }
.av-tl-rule { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(36,28,78,.18); }
.av-tl-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--av-pur); }
.av-tl-mark.is-voice { border-left-style: dashed; border-left-color: rgba(36,28,78,.35); }
.av-tl-mark span { position: absolute; top: 14px; left: 10px; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--av-pur); }
.av-tl-mark.is-voice span { top: auto; bottom: 12px; color: var(--av-ink4); }
.av-tl-mark b { position: absolute; left: 10px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--av-ink); }
.av-tl-mark.is-hand b { top: 38px; }
.av-tl-mark.is-voice b { bottom: 38px; }
.av-tl-gap { position: absolute; top: 50%; height: 0; border-top: 2px solid var(--av-pur); translate: 0 -1px; }
.av-tl-gap i { position: absolute; left: 50%; top: -13px; translate: -50% 0; padding: 4px 10px; border-radius: 20px; background: var(--av-pur); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; font-style: normal; white-space: nowrap; }
.av-tl-dot { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--av-pur); }
.av-plate-in.is-in .av-tl-dot { animation: av-run 4.2s var(--av-ease) infinite; }
@keyframes av-run { 0% { left: 4%; opacity: 0; } 8% { opacity: 1; } 92% { left: 96%; opacity: 1; } 100% { left: 96%; opacity: 0; } }
.av-tl-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.av-tl-legend span { display: inline-flex; align-items: center; gap: 8px; font-style: normal; color: var(--av-ink6); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.av-tl-legend i { width: 14px; height: 0; border-top: 2px solid var(--av-pur); }
.av-tl-legend i.is-dim { border-top-style: dashed; border-top-color: rgba(36,28,78,.35); }

/* --- 04 her sentence can wait ---------------------------------------------
   这一段的交互换成了 iris 的 how-it-works Option C（手风琴 + 可打断），
   样式在 css/aw-hiw-0906.css。原来手写的 .av-wait 一套已撤。
   ------------------------------------------------------------------------ */

/* --- 05 never not there --------------------------------------------------- */
.av-lanes { display: grid; gap: 22px; }
.av-lane { display: grid; gap: 10px; }
.av-lane-rail { position: relative; height: 46px; border-radius: 14px; background: #f4f3ff; overflow: hidden; }
.av-lane.is-ours .av-lane-rail { background: #efedff; }
.av-lane-run { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: var(--av-pur); }
.av-plate-in.is-in .av-lane.is-ours .av-lane-run { animation: av-grow 6s linear infinite; }
@keyframes av-grow { 0% { width: 0; } 92%,100% { width: 100%; } }
.av-seg { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: rgba(36,28,78,.28); transform-origin: left center; }
.av-plate-in.is-in .av-seg { animation: av-seg 6s var(--av-ease) infinite both; animation-delay: var(--d,0s); }
@keyframes av-seg { 0% { transform: scaleX(0); opacity: .2; } 14%, 82% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 1; } }
.av-seam { position: absolute; top: 8px; bottom: 8px; width: 0; border-left: 1.5px dashed rgba(36,28,78,.35); }
.av-seam::after { content: "restart"; position: absolute; left: 4px; bottom: -2px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(36,28,78,.4); }

/* --- 06 nobody else has met her ------------------------------------------ */
.av-boundary { display: grid; place-items: center; }
.av-boundary svg { width: 100%; max-width: 720px; height: auto; overflow: visible; }
.av-bd-box { fill: none; stroke: var(--av-pur); stroke-width: 2; stroke-dasharray: 7 6; }
.av-bd-node { fill: #f4f3ff; }
.av-bd-lab { fill: var(--av-ink6); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.av-bd-lab.is-key { fill: var(--av-pur); }
.av-bd-link { fill: none; stroke: rgba(113,128,255,.5); stroke-width: 1.6; }
.av-bd-dot { fill: var(--av-pur); }
.av-bd-nox { fill: none; stroke: rgba(36,28,78,.22); stroke-width: 1.6; stroke-dasharray: 4 5; }

@media (max-width: 900px) {
  .av-rig { grid-template-columns: 1fr; }
  .av-rig-arrow { transform: rotate(90deg); justify-self: center; }
  .av-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* 窄屏三格竖排，方框放扁一点，免得一屏只装得下一步 */
  .av-rig-box { aspect-ratio: 16 / 9; }
  .av-rig-box > svg:not(.av-drop-cursor) { width: 40%; }
  .av-fig-box { aspect-ratio: 4 / 3; }
  .av-tl-track { height: 196px; }
  .av-tl-gap i { font-size: 10px; }
}

/* ======================================================================
   0906 lill · 子页 = 细节版：每个 panel 的注脚 + 诚实标注
   源：refs/script-for-a-voice/（Homepage copy · draft 2）与 refs/she-was-a-file/。
   「示意数据 / 占位音频 / 示意图 / 真数据」这类标注一律保留，别为了好看删。
   位置统一：白卡下面、毛玻璃块里（注脚退两级，不跟标题抢）。
   chip 走实底不描边（全站规矩）。
   ====================================================================== */
.aw-sub .o9-tile > .sub-proof { display: grid; gap: 12px; margin-top: 20px; }
.aw-sub .sub-proof-mark {
  width: max-content; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.aw-sub .sub-proof-note {
  margin: 0; max-width: 92ch; color: rgba(255,255,255,.78);
  font-size: 13.5px; line-height: 1.65; font-weight: 500;
}
.aw-sub .sub-proof-note strong { color: #fff; font-weight: 700; }
/* breath 的 mark / note 从白卡里提到毛玻璃块上，跟其他五段同一个位置 */

/* hero 上的方括号标记：紫地上白线白字（.dv-marker 的板内配色在这里够不到） */
.aw-sub .sub-hero .dv-marker {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 26px;
  padding: 0 11px; border: 1px solid rgba(255,255,255,.72); border-radius: 32px;
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}

/* --- 04 her sentence can wait · 静帧 --------------------------------------
   可玩的版本在 How it works 步骤 03（iris Option C）。这里只把原稿 SHOT 04
   的那一格定住：她停在半个字上，光标闪着，两个标记说明停在哪、从哪接。
   ------------------------------------------------------------------------ */
.av-still { display: grid; gap: 20px; }
.av-still-line {
  margin: 0; box-sizing: border-box; padding: 26px 28px; border-radius: 18px; background: #f4f3ff;
  color: var(--av-ink); font-size: clamp(19px,1.7vw,26px); line-height: 1.42; font-weight: 600; letter-spacing: -.015em;
}
.av-still-line .av-said { color: var(--av-ink); }
.av-still-line .av-rest { color: rgba(36,28,78,.24); }
.av-caret { display: inline-block; width: 2px; height: 1.02em; margin: 0 1px; vertical-align: -.14em; background: var(--av-pur); animation: av-blink 1s steps(2,end) infinite; }
@keyframes av-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.av-still-marks { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.av-still-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--av-ink6); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.av-still-mark i { width: 14px; height: 0; border-top: 2px dashed rgba(36,28,78,.35); }
.av-still-mark.is-stop { color: var(--av-pur); }
.av-still-mark.is-stop i { border-top: 2px solid var(--av-pur); }
@media (prefers-reduced-motion: reduce) { .av-caret { animation: none; } }