/* NÜXGROW · "NÜX Ecology · วงดีเอ็นเอ" v0.1.1 — คู่กับ /qp/eco3d.js · ต้องมี quiet-precision.css ก่อน
   โครง: ภาพ 3 มิติซ้าย (ใหญ่) + รายการ 01–05 ขวา (ป้ายชี้ทีละจุดแบบแล็บ) · จอแคบ = เรียงลง · สีทั้งหมดจาก --qp-* */
.e3 { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr); gap: clamp(16px, 2.5vw, 36px); align-items: center; color: var(--qp-ink); font-family: var(--qp-font-sans); }
.e3 *, .e3 *::before, .e3 *::after { box-sizing: border-box; }
.e3__stage { position: relative; height: clamp(400px, 64svh, 660px); min-width: 0; }
.e3__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.e3__pill { position: absolute; left: 0; top: 0; z-index: 3; font-family: var(--qp-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--qp-muted); white-space: nowrap; pointer-events: none; }   /* v0.1.1: ป้ายคำโปรย (อังกฤษล้วน) แทนป้าย "แผนภาพจำลอง" · ป้ายจำลองยังอยู่ที่ aria-label ของแคนวาส + บรรทัด v-note ของหน้า */
.e3__node { position: absolute; left: 0; top: 0; z-index: 2; font: inherit; font-size: var(--qp-t-13, 13px); line-height: 1.3; padding: 3px 10px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-line-strong); background: color-mix(in srgb, var(--qp-surface) 86%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--qp-ink); white-space: nowrap; cursor: pointer; will-change: transform; transition: border-color .2s, color .2s; }
.e3__node b { font-family: var(--qp-font-mono); font-weight: 500; color: var(--qp-gold); margin-right: 4px; letter-spacing: .04em; }
.e3__node:hover, .e3__node.is-on { border-color: var(--qp-green); color: var(--qp-ink); }
.e3__node:focus-visible { outline: 2px solid var(--qp-green); outline-offset: 2px; }
.e3__side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.e3__h { margin: 0; font-size: var(--qp-t-13, 13px); color: var(--qp-muted); letter-spacing: 0; }
.e3__legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--qp-line); }
.e3__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding: 10px 6px; border-bottom: 1px solid var(--qp-line); cursor: pointer; transition: background .2s; }
.e3__item:hover, .e3__item.is-on { background: color-mix(in srgb, var(--qp-green) 7%, transparent); }
.e3__no { font-family: var(--qp-font-mono); font-size: 12px; color: var(--qp-gold); letter-spacing: .08em; padding-top: 3px; }
.e3__item b { display: block; font-size: var(--qp-t-15, 15px); font-weight: 600; line-height: 1.4; color: var(--qp-ink); }
.e3__st { display: inline-block; margin-top: 2px; font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-green); }
.e3__st.is-soon { color: var(--qp-muted); }
.e3__item p { margin: 4px 0 0; font-size: var(--qp-t-13, 13px); line-height: 1.5; color: var(--qp-ink-2); }
.e3__cap { margin: 0; min-height: 2.6em; font-size: var(--qp-t-13, 13px); line-height: 1.55; color: var(--qp-ink-2); }
.e3__cap b { color: var(--qp-ink); }
.e3__cap a { color: var(--qp-green); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) {
  .e3 { grid-template-columns: minmax(0, 1fr); }
  .e3__stage { height: clamp(320px, 88vw, 460px); }
  .e3__item p { display: none; }
}