/* The "Preview in 3D" popup (assets/preview3d.js). Everything is scoped to .pv so it
   drops into any page: the library card, the concept page. */
/* The popup is dark over the 3D view in both site themes: it keeps the dark palette. */
.pv{--chalk:#E8E6E0;--contour:#2A2E36;--gravel:#8A919D;--basalt-2:#1B1E24;--sodium:#FFA43B}
.pv{position:fixed;inset:0;z-index:50;background:rgba(6,7,9,.86);display:none;align-items:center;justify-content:center;padding:24px;font-family:var(--body);color:var(--chalk)}
.pv.open{display:flex}
.pv-box{position:relative;width:min(1280px,100%);height:min(780px,100%);border-radius:16px;overflow:hidden;border:1px solid var(--contour);background:#0b0c0f;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.pv canvas{display:block;width:100%;height:100%;touch-action:none}
.pv-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;background:linear-gradient(rgba(8,9,11,.75),transparent);pointer-events:none}
.pv-top .nm{font:600 18px/1.2 var(--display)}
.pv-top .wh{font-size:13px;color:#b9bdc5;margin-top:3px}
.pv-x{pointer-events:auto;appearance:none;background:rgba(22,24,29,.85);border:1px solid var(--contour);color:var(--chalk);width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer;flex:none}
.pv-bot{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;background:linear-gradient(transparent,rgba(8,9,11,.85));display:flex;flex-direction:column;gap:12px}
.pv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pv .seg{display:inline-flex;border:1px solid var(--contour);border-radius:10px;overflow:hidden;background:rgba(22,24,29,.85)}
.pv .seg button{appearance:none;border:0;background:transparent;color:var(--chalk);font:500 13px/1 var(--body);padding:10px 12px;cursor:pointer}
.pv .seg button[aria-pressed="true"]{background:var(--sodium);color:#141414;font-weight:600}
.pv .ico{appearance:none;border:1px solid var(--contour);background:rgba(22,24,29,.85);color:var(--chalk);height:36px;min-width:40px;border-radius:10px;cursor:pointer;font:600 14px/1 var(--body)}
.pv .pv-cta{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:var(--sodium);color:#141414;font:700 14px/1 var(--display);padding:12px 16px;border-radius:10px;text-decoration:none}
.pv .pv-cta:hover{background:#ffb35c;text-decoration:none}
.pv .scrub{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);color:#b9bdc5}
.pv .scrub input{flex:1;accent-color:var(--sodium)}
.pv .hint{font-size:12px;color:var(--gravel)}
.pv-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0b0c0f;font:500 14px/1.4 var(--body);color:#b9bdc5;text-align:center;padding:20px}
.pv-load .bar{width:min(320px,70%);height:6px;border-radius:99px;background:var(--basalt-2);overflow:hidden}
.pv-load .bar i{display:block;height:100%;width:0;background:var(--sodium);transition:width .2s}
.pv-load.gone{display:none}
.pv .stat{position:absolute;right:16px;top:64px;font:500 11px/1.5 var(--mono);color:#8a919d;background:rgba(8,9,11,.6);border-radius:8px;padding:6px 8px;pointer-events:none}
@media (max-width:640px){
  .pv{padding:0}
  .pv-box{height:100%;border-radius:0;border:0}
  .pv .pv-cta{width:100%}
  .pv .hint,.pv .stat{display:none}
}