/* naali 3D jar viewer. All classes prefixed j3- */
.j3{--j3-canvas:#EFDCCD;--j3-panel:#F8EEE6;--j3-ink:#1F1A15;--j3-accent:#D8622B}
.j3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:center}
.j3-copy{min-width:0}
.j3-h{margin:0 0 18px}
.j3-line{font-family:"DM Sans",system-ui,sans-serif;font-size:clamp(16px,1.5vw,19px);line-height:1.5;margin:0 0 28px;max-width:34ch;color:var(--j3-ink);opacity:.8}
.j3-swatches{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.j3-sw{appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 8px;border-radius:999px;border:1px solid rgba(31,26,21,.18);background:transparent;color:var(--j3-ink);font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.j3-sw:hover{transform:translateY(-2px);border-color:var(--j3-ink)}
.j3-sw:focus-visible,.j3-pop:focus-visible,.j3-stage:focus-visible{outline:2px solid var(--j3-accent);outline-offset:3px}
.j3-sw[aria-pressed="true"]{background:var(--j3-ink);color:var(--j3-canvas);border-color:var(--j3-ink)}
.j3-chip{width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 -4px 8px rgba(0,0,0,.18);flex:none}
.j3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.j3-hint{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.j3-panel{position:relative;width:100%;aspect-ratio:1/1;max-height:72vh;justify-self:center;border-radius:32px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#FBF4EE 0%,var(--j3-panel) 55%,#F0DFD2 100%);box-shadow:0 30px 60px -30px rgba(31,26,21,.28),inset 0 0 0 1px rgba(31,26,21,.06)}
.j3-stage{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline-offset:-4px}
.j3-stage.is-hot{cursor:pointer}
.j3-stage.is-grab{cursor:grabbing}
.j3-pop{min-width:10.5em;justify-content:center}
.j3-nogl .j3-name{opacity:.8}
.j3-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--j3-panel)}
.j3-fallback[hidden]{display:none}
.j3-name{position:absolute;left:22px;bottom:18px;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--j3-ink);opacity:.65;pointer-events:none}
@media (max-width:899px){
  .j3-grid{grid-template-columns:1fr;gap:36px}
  .j3-panel{max-width:min(100%,72vh)}
}
@media (pointer:coarse){.j3-sw,.j3-pop{min-height:44px}}