/* 3D hat viewer: lives inside the Hat Lab preview panel */
.h3i-stage{
  position:relative; overflow:hidden; cursor:grab; touch-action:pan-y; outline:none; width:100%; aspect-ratio:1/1; max-height:460px;
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(18,232,251,.16), transparent 70%),
    radial-gradient(40% 40% at 78% 24%, rgba(243,12,254,.12), transparent 70%),
    linear-gradient(rgba(18,232,251,.05) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(18,232,251,.05) 1px, transparent 1px) 0 0/44px 44px,
    #060a12;
}
.h3i-stage.grab{ cursor:grabbing; }
.h3i-stage:focus-visible{ box-shadow:inset 0 0 0 2px var(--cyan); }
.h3d-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.h3i-ctl{ padding:14px 16px 6px; display:flex; flex-direction:column; gap:12px; }
.h3d-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:7px 12px; border:1px solid var(--line); background:rgba(7,12,20,.82); color:var(--text);
  font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  pointer-events:none; transition:opacity .4s ease;
}
.h3d-hint svg{ color:var(--cyan); }
.h3d-hint.gone{ opacity:0; }
.h3d-loading{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#060a12; color:var(--muted); font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
}
.h3d-spin{ width:42px; height:42px; border-radius:50%; border:2px solid rgba(18,232,251,.2); border-top-color:var(--cyan); border-right-color:var(--magenta); animation:h3dspin .9s linear infinite; }
@keyframes h3dspin{ to{ transform:rotate(360deg); } }
.h3d-error{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; gap:6px; background:#060a12; color:#B4CAD2; line-height:1.55; font-size:.9rem; }
.h3d-error b{ color:var(--text); font-size:1rem; }

.h3d-block{ padding:12px 14px 10px; border:1px solid var(--line-soft); background:rgba(5,10,17,.7); }
.h3d-label{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.h3d-label label{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.h3d-label output{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:1.3rem; color:var(--cyan); font-variant-numeric:tabular-nums; }
.h3d-ticks{ display:flex; justify-content:space-between; margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.h3i-rot{ --p:8%; -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; cursor:pointer; margin:0; }
.h3i-rot::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--cyan), var(--magenta)) 0 0/var(--p) 100% no-repeat, rgba(18,232,251,.16); }
.h3i-rot::-moz-range-track{ height:6px; border-radius:3px; background:rgba(18,232,251,.16); }
.h3i-rot::-moz-range-progress{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--cyan), var(--magenta)); }
.h3i-rot::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%; background:#fff; border:3px solid var(--cyan); box-shadow:0 0 0 4px rgba(18,232,251,.18), 0 4px 12px rgba(0,0,0,.6); transition:transform .12s; }
.h3i-rot::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--cyan); box-shadow:0 0 0 4px rgba(18,232,251,.18); }
.h3i-rot:active::-webkit-slider-thumb{ transform:scale(1.12); }
.h3i-rot:focus-visible{ outline:none; }
.h3i-rot:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(243,12,254,.45); }

.h3d-presets{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.h3d-presets button, .h3d-chip, .h3d-zoom button{
  font-family:"Chakra Petch",sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.74rem; color:var(--text);
  background:var(--panel); border:1px solid var(--line); cursor:pointer; padding:9px 4px; transition:border-color .15s, background .15s, color .15s;
}
.h3d-presets button:hover, .h3d-chip:hover, .h3d-zoom button:hover{ border-color:var(--cyan); background:rgba(18,232,251,.1); }
.h3d-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.h3d-chip{ padding:9px 12px; display:inline-flex; align-items:center; gap:8px; }
.h3d-dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); transition:background .2s, box-shadow .2s; }
.h3d-chip[aria-pressed="true"]{ border-color:var(--cyan); color:var(--cyan); }
.h3d-chip[aria-pressed="true"] .h3d-dot{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.h3d-zoom{ display:inline-flex; margin-left:auto; }
.h3d-zoom button{ width:38px; padding:8px 0; font-size:1.05rem; }
.h3d-zoom button + button{ border-left:0; }

/* red flashing alert above the hat */
.h3d-warn{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:4; pointer-events:none;
  display:flex; align-items:center; gap:10px; width:max-content; max-width:92%;
  padding:8px 14px 8px 12px; border:1px solid #FF2D55; border-left-width:4px;
  background:rgba(32,5,12,.88); color:#FF4D6D;
  box-shadow:0 0 0 1px rgba(255,45,85,.22), 0 0 28px rgba(255,45,85,.38);
  animation:h3dwarn 1.15s ease-in-out infinite;
}
.h3d-warn[hidden]{ display:none; }
.h3d-warn-ico{ flex:none; display:flex; filter:drop-shadow(0 0 6px rgba(255,45,85,.7)); }
.h3d-warn-ico svg{ width:22px; height:22px; }
.h3d-warn b{ display:block; font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:.98rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.1; color:#FF4D6D; text-shadow:0 0 12px rgba(255,45,85,.55); }
.h3d-warn small{ display:block; margin-top:4px; font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.06em; color:#E8A6B4; line-height:1.4; }
@keyframes h3dwarn{
  0%,100%{ opacity:1; box-shadow:0 0 0 1px rgba(255,45,85,.3), 0 0 34px rgba(255,45,85,.55); }
  50%{ opacity:.34; box-shadow:0 0 0 1px rgba(255,45,85,.1), 0 0 10px rgba(255,45,85,.15); }
}
@media (max-width:560px){ .h3i-stage{ aspect-ratio:4/3.6; } }
@media (prefers-reduced-motion:reduce){ .h3d-warn{ animation:none; } .h3d-hint{ transition:none; } .h3d-spin{ animation-duration:2.4s; } }