/* #/implant — three.js-native procedure (runtime CSG sockets) */
.implant-page { padding: 0; }
.implant-host { width: 100%; height: calc(100vh - 76px); min-height: 540px; }
.implant-view { position: relative; width: 100%; height: 100%; background: #ffffff; }
.implant-view canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.implant-fade { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, #ffffff, #e6ebf0); }
.implant-cap { position: absolute; left: 18px; top: 16px; color: #1b2414; pointer-events: none; }
.implant-cap b { display: block; font-size: 1.1rem; }
.implant-cap span { font-size: .7rem; color: #5a8a1f; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.implant-cap b { animation: capIn .55s ease both; }
/* cinematic: a centred "chapter title" that fades between beats */
.implant-view.is-cinematic .implant-cap { left: 50%; top: clamp(80px, 12vh, 110px); transform: translateX(-50%); text-align: center; }
.implant-view.is-cinematic .implant-cap b { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: #2a3b18; padding: .34rem 1rem; border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px; background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.implant-bar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem; width: min(520px, 80%);
  background: color-mix(in srgb, #1b1f24 88%, transparent); border: 1px solid #2a2f37;
  border-radius: 999px; padding: .4rem .7rem; backdrop-filter: blur(8px); }
.implant-bar button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #39414b;
  background: #7DBE37; color: #143312; font-weight: 700; cursor: pointer; }
.implant-bar input[type=range] { flex: 1; accent-color: #7DBE37; }