* { margin:0; padding:0; box-sizing:border-box; }
body { background:#04040b; overflow:hidden; cursor:none; font-family:'DM Mono',monospace; }
html.view-2d, body.view-2d { overflow-y:auto !important; overflow-x:hidden !important; height:auto !important; }
body.view-2d { cursor:auto; }
canvas { display:block; }

#cursor {
  position:fixed; width:10px; height:10px; border-radius:50%;
  background:white; mix-blend-mode:difference; pointer-events:none;
  transform:translate(-50%,-50%); z-index:9999; transition:width .14s,height .14s;
}
#cursor.hov { width:22px; height:22px; }
@media (hover:none) { #cursor { display:none; } body { cursor:auto; } }

/* ── LOADER ── */
@property --la { syntax:"<angle>"; initial-value:0deg; inherits:false; }
#loader {
  position:fixed; inset:0; background:#04040b;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9000; transition:opacity .6s ease;
}
#loader.fade { opacity:0; pointer-events:none; }
#loader-ring {
  position:relative; width:96px; height:96px; --la:0deg;
}
#loader-ring::before {
  content:''; position:absolute; inset:-2px; border-radius:50%;
  background:conic-gradient(from var(--la),
    #ff2244,#ff6622,#ffbb11,#33ee55,#22ccee,#6644ff,#cc22ff,#ff2244);
  animation:loader-spin 1.8s linear infinite;
}
#loader-ring::after {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:#04040b;
}
@keyframes loader-spin { to { --la:360deg; } }
#loader-label {
  margin-top:24px; font-family:'DM Mono',monospace; font-size:14px;
  letter-spacing:.22em; color:rgba(255,255,255,.45);
  animation:loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse { 0%,100%{opacity:.28} 50%{opacity:.7} }

/* ── Explore / 3D loader overlay ── */
#explore-loader {
  position: fixed; inset: 0; background: rgba(4,4,11,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 8000; transition: opacity .5s ease;
}
#explore-loader.fade { opacity: 0; pointer-events: none; }
#explore-loader-ring {
  position: relative; width: 64px; height: 64px; --la: 0deg;
}
#explore-loader-ring::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from var(--la), #ff2244,#6644ff,#22ccee,#ff2244);
  animation: loader-spin 1.4s linear infinite;
}
#explore-loader-ring::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: #04040b;
}
#explore-loader-label {
  margin-top: 20px; font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .22em; color: rgba(255,255,255,.4);
  animation: loader-pulse 1.4s ease-in-out infinite;
}

/* ── HUD ── */
#hud-title {
  position:absolute; top:20px; left:24px; font-family:'Bebas Neue',sans-serif;
  font-size:clamp(21.6px,4vw,31.2px); letter-spacing:.28em; color:rgba(255,255,255,.82); pointer-events:none;
}
#hud-sub {
  position:absolute; top:58px; left:24px; font-size:clamp(9.6px,1.8vw,11.4px);
  color:rgba(255,255,255,.45); letter-spacing:.06em; pointer-events:none;
  line-height:1.85; max-width:min(380px,55vw);
}
#instr {
  position:absolute; top:20px; right:24px; text-align:right; font-size:11.9px;
  color:rgba(255,255,255,.45); letter-spacing:.08em; line-height:2.0; pointer-events:none;
  transition:opacity .4s; max-width:260px;
}
/* Globe-mode instr replaced by satellite/play instr */
#instr-sat {
  position:absolute; top:20px; right:24px; text-align:right; font-size:11.3px;
  color:rgba(255,255,255,.40); letter-spacing:.1em; line-height:2.2; pointer-events:none;
  opacity:0; transition:opacity .4s;
}
#instr-sat.show { opacity:1; }

/* ── FILTER BAR ── */
#filter-wrap {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:100; transition:opacity .35s; width:min(500px,90vw);
}
#filter-wrap.hidden { opacity:0; pointer-events:none; }
#filter-row { display:flex; align-items:center; gap:8px; width:100%; }
#filter-input {
  font-family:'DM Mono',monospace; font-size:11.9px; letter-spacing:.12em;
  background:rgba(4,4,11,.82); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85); padding:7px 14px; outline:none; flex:1;
  border-radius:2px; cursor:none; backdrop-filter:blur(14px); transition:border-color .2s;
}
#filter-input::placeholder { color:rgba(255,255,255,.45); }
#filter-input:focus { border-color:rgba(255,255,255,.45); }
#filter-add-btn {
  font-family:'DM Mono',monospace; font-size:11.9px; letter-spacing:.12em;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.6); padding:7px 14px; border-radius:2px;
  cursor:none; transition:background .2s, color .2s; white-space:nowrap;
}
#filter-add-btn:hover { background:rgba(255,255,255,.18); color:white; }
#filter-chips { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.fchip {
  font-size:10.6px; letter-spacing:.08em; padding:3px 9px;
  border-radius:1px; cursor:none; display:flex; align-items:center; gap:5px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:rgba(255,255,255,.7);
}
.fchip:hover { background:rgba(255,255,255,.15); }
.fchip-x { font-size:13.2px; opacity:.6; }

/* ── LEGEND (old — hidden, replaced by type-legend) ── */
#legend {
  position:absolute; bottom:60px; left:24px; pointer-events:none;
  display:none; flex-direction:column; gap:4px; transition:opacity .4s;
  max-height:calc(100vh - 200px); overflow:hidden;
}
#legend.hidden { opacity:0; pointer-events:none; }
.lr { display:flex; align-items:center; gap:8px; font-size:11.3px; color:rgba(255,255,255,.45); letter-spacing:.08em; }
.ld { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── TYPE LEGEND (persistent bottom-left) ── */
#type-legend {
  position:absolute; bottom:24px; left:24px; pointer-events:none;
  display:flex; flex-direction:column; gap:3px; z-index:90;
  transition:opacity .4s;
}
.tl-row { display:flex; align-items:center; gap:6px; font-size:9.8px; color:rgba(255,255,255,.56); letter-spacing:.08em; line-height:1; }
.tl-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; opacity:0.7; }

/* ── BOTTOM RIGHT CLUSTER ── */
/* Credits — always visible bottom-right, below toggle */
#credits {
  position:absolute; bottom:24px; right:24px;
  font-size:9.8px; color:rgba(255,255,255,.35); letter-spacing:.12em;
  pointer-events:none; text-align:right; line-height:1.9; z-index:200;
}
#credits a { color:rgba(255,255,255,.45); text-decoration:none; pointer-events:all; cursor:none; }
#credits a:hover { color:rgba(255,255,255,.6); }

/* br-cluster — hidden */
#br-cluster { display:none !important; }
/* Fix 3: toggle label matches DM Mono input style */
#legend-toggle-wrap {
  display:flex; align-items:center; gap:9px; cursor:none; pointer-events:all;
  user-select:none;
}
#legend-toggle-label {
  font-family:'DM Mono',monospace; font-size:11.9px; letter-spacing:.12em;
  color:rgba(255,255,255,.45); transition:color .2s;
}
#legend-toggle-wrap:hover #legend-toggle-label { color:rgba(255,255,255,.65); }
#legend-switch {
  width:30px; height:16px; border-radius:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  position:relative; transition:background .25s, border-color .25s; flex-shrink:0;
}
#legend-switch.on { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.45); }
#legend-switch::after {
  content:''; position:absolute; top:2px; left:2px;
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5);
  transition:transform .22s, background .22s;
}
#legend-switch.on::after { transform:translateX(14px); background:white; }

/* ── LEAD GEN BUTTON ── */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
#lead-btn {
  position:absolute;
  top:78px; left:24px;
  font-family:'DM Mono',monospace; font-size:12.1px; letter-spacing:.16em;
  color:rgba(255,255,255,.82); background:transparent;
  border:none;
  padding:10px 24px; border-radius:3px;
  cursor:none; z-index:400; pointer-events:none;
  opacity:0; transition:opacity .35s, color .2s;
  will-change:transform; white-space:nowrap;
  overflow:visible;
  --angle:0deg;
}
#lead-btn.show { opacity:1; pointer-events:all; }
#lead-btn:hover { color:white; }

/* Shared pseudo-element base — conic gradient border */
#lead-btn::before,
#lead-btn::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:calc(100% + 2px); height:calc(100% + 2px);
  translate: -50% -50%;
  border-radius:4px;
  background:conic-gradient(
    from var(--angle),
    #ff2244, #ff6622, #ffbb11, #33ee55,
    #22ccee, #6644ff, #cc22ff, #ff2244
  );
  opacity:0;
  transition:opacity .35s;
}
#lead-btn:hover::before,
#lead-btn:hover::after {
  opacity:1;
  animation:spin-border 2.4s linear infinite;
}

/* ::before = glow layer (blurred, behind everything) */
#lead-btn::before {
  z-index:0;
  filter:blur(10px);
  opacity:0;
}
#lead-btn:hover::before { opacity:0.55; }

/* ::after = sharp border layer */
#lead-btn::after {
  z-index:1;
  opacity:0;
}
#lead-btn:hover::after { opacity:1; }

/* Inner background mask — covers the gradient except the 1px edge */
.btn-inner-bg {
  position:absolute;
  inset:1px;
  background:rgba(4,4,11,.94);
  border-radius:2px;
  border:1px solid rgba(255,255,255,.18);
  z-index:2;
  transition:border-color .3s;
}
#lead-btn:hover .btn-inner-bg { border-color:transparent; }

@keyframes spin-border {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}
.btn-text { position:relative; z-index:3; }





#tip {
  position:absolute; background:rgba(4,4,11,.97); border:1px solid rgba(255,255,255,.08);
  padding:13px 17px; max-width:260px; pointer-events:none;
  opacity:0; transition:opacity .13s; backdrop-filter:blur(18px); border-radius:2px; z-index:450;
}
#tip.show { opacity:1; }
.tn { font-family:'Bebas Neue',sans-serif; font-size:19.8px; letter-spacing:.08em; margin-bottom:3px; }
.tm { font-size:11.3px; color:rgba(255,255,255,.45); letter-spacing:.1em; margin-bottom:8px; }
.tg { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:7px; }
.tt { font-size:9.8px; padding:2px 6px; letter-spacing:.05em; border-radius:1px; }
.ta { font-size:11.9px; line-height:1.7; color:rgba(255,255,255,.56); }
.tlink { display:block; margin-top:8px; font-size:11.3px; letter-spacing:.12em; color:rgba(255,255,255,.35); text-decoration:none; }
.tlink:hover { color:rgba(255,255,255,.6); }

/* ── INFO PANEL ── */
#info-panel {
  position:absolute; bottom:20px; left:36px;
  width:min(340px,calc(50vw - 40px)); max-height:calc(100vh - 120px);
  overflow-y:auto; overflow-x:hidden;
  pointer-events:none; opacity:0; transform:translateY(10px);
  transition:opacity .45s, transform .45s;
  scrollbar-width:none; z-index:20;
}
#info-panel::-webkit-scrollbar { display:none; }
#info-panel.show { opacity:1; transform:translateY(0); }
#info-panel::before {
  content:''; position:absolute; left:-14px; top:0; bottom:0; width:2px; border-radius:1px;
  background:var(--panel-color,rgba(255,255,255,.25));
}
.ip-industry { font-family:'Bebas Neue',sans-serif; font-size:17.2px; letter-spacing:.22em; color:rgba(255,255,255,.55); margin-bottom:5px; }
.ip-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(19.2px,3vw,26.4px); letter-spacing:.1em; margin-bottom:4px; line-height:1.15; }
.ip-meta { font-size:11.3px; color:rgba(255,255,255,.45); letter-spacing:.1em; margin-bottom:10px; }
.ip-label { font-size:9.8px; letter-spacing:.18em; color:rgba(255,255,255,.45); margin-bottom:5px; text-transform:uppercase; }
.ip-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.ip-tag { font-size:9.8px; padding:2px 7px; letter-spacing:.05em; border-radius:1px; }
.ip-style-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:11px; }
.ip-style-tag { font-size:9.8px; padding:2px 7px; letter-spacing:.05em; border-radius:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); }
.ip-desc { font-size:11.9px; line-height:1.75; color:rgba(255,255,255,.56); margin-bottom:10px; }
.ip-link { font-size:11.3px; letter-spacing:.12em; color:rgba(255,255,255,.40); text-decoration:none; pointer-events:all; border:1px solid rgba(255,255,255,.12); padding:5px 12px; border-radius:2px; display:inline-block; transition:all .2s; }
.ip-link:hover { color:rgba(255,255,255,.65); border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.04); }


/* ── TAG TOOLTIP ── */
#tag-tip {
  position:fixed; background:rgba(4,4,11,.97); border:1px solid rgba(255,255,255,.1);
  padding:6px 12px 8px; max-width:240px; pointer-events:none;
  opacity:0; transition:opacity .15s; backdrop-filter:blur(18px); border-radius:2px; z-index:500;
}
#tag-tip.show { opacity:1; }
#tag-tip .tt-head { font-family:'Bebas Neue',sans-serif; font-size:17.2px; letter-spacing:.1em; margin-bottom:2px; }
#tag-tip .tt-body { font-size:11.3px; line-height:1.7; color:rgba(255,255,255,.48); }

/* ── BREADCRUMB — top-right, below the satellite instruction text ── */
#breadcrumb {
  position:absolute; top:62px; right:24px; font-size:10.6px; color:rgba(255,255,255,.2);
  letter-spacing:.10em; pointer-events:none; line-height:2.0; max-width:min(280px,40vw);
  opacity:0; transition:opacity .3s; text-align:right;
}
#breadcrumb.show { opacity:1; }

/* ── FOCUS BAR ── */
#fbar {
  position:absolute; bottom:20px; right:24px; font-size:10.6px;
  color:rgba(255,255,255,.40); letter-spacing:.1em; opacity:0;
  transition:opacity .3s; pointer-events:none; text-align:right; line-height:2.2;
}
#fbar.show { opacity:1; }

/* ── MEDIA OVERLAY — "View Source" button on focused card ── */
#media-overlay {
  position:absolute; pointer-events:all; cursor:none;
  opacity:0; transition:opacity .3s; transform:translate(-100%,-100%); z-index:10;
}
#media-overlay.show { opacity:1; }
#media-btn {
  height:26px; border-radius:2px;
  border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  cursor:none; transition:background .2s, border-color .2s; backdrop-filter:blur(6px);
  padding:0 13px; white-space:nowrap;
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.14em;
  color:rgba(255,255,255,.82);
}
#media-btn:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.8); color:white; }

/* Full-card play overlay — tracks focused card in 3D */
#card-play-overlay {
  position: fixed; z-index: 11; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
#card-play-btn { pointer-events: all; }

/* Full-card video player overlay in 3D explore */
#card-video-player {
  position: fixed; z-index: 50;
  background: #000; border-radius: 2px; overflow: hidden;
  display: none;
}
#card-video-player.show { display: block; }
#card-video-player iframe,
#card-video-player video { width:100%; height:100%; border:none; display:block; }
#card-video-player video { object-fit:contain; background:#000; }
#cvp-close-btn {
  position: fixed; z-index: 200;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.8); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s; padding: 0;
}
#cvp-close-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── MODAL OVERLAY ── */
#modal-overlay {
  position:fixed; inset:0; background:rgba(4,4,11,.88); backdrop-filter:blur(18px);
  z-index:600; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#modal-overlay.show { opacity:1; pointer-events:all; }
#modal-box {
  background:rgba(8,8,20,.98); border:1px solid rgba(255,255,255,.1);
  padding:40px 44px; width:min(560px,90vw); border-radius:3px;
  position:relative; max-height:85vh; overflow-y:auto; scrollbar-width:none;
}
#modal-box::-webkit-scrollbar { display:none; }
#modal-box h2 {
  font-family:'Bebas Neue',sans-serif; font-size:34.3px; letter-spacing:.22em;
  color:white; margin-bottom:6px;
}
#modal-box .modal-sub {
  font-size:11.9px; color:rgba(255,255,255,.35); letter-spacing:.1em; margin-bottom:28px; line-height:1.8;
}
#modal-box .modal-context {
  font-size:10.6px; color:rgba(255,255,255,.40); letter-spacing:.1em; margin-bottom:18px; line-height:1.8;
  padding:8px 12px; border-left:2px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02);
}
#modal-close {
  position:absolute; top:18px; right:22px; font-size:23.8px; color:rgba(255,255,255,.45);
  cursor:none; pointer-events:all; transition:color .2s; line-height:1;
}
#modal-close:hover { color:white; }
.mfield {
  margin-bottom:16px;
}
.mfield label {
  display:block; font-size:10.6px; letter-spacing:.2em; color:rgba(255,255,255,.45);
  margin-bottom:6px; text-transform:uppercase;
}
.mfield input, .mfield textarea, .mfield select {
  width:100%; font-family:'DM Mono',monospace; font-size:12.6px; letter-spacing:.08em;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85); padding:10px 14px; outline:none; border-radius:2px;
  transition:border-color .2s; cursor:auto;
}
.mfield input:focus, .mfield textarea:focus, .mfield select:focus { border-color:rgba(255,255,255,.4); }
.mfield textarea { height:72px; resize:none; }
.mfield select option { background:#08081e; color:white; }
#modal-submit {
  width:100%; font-family:'Bebas Neue',sans-serif; font-size:19.8px; letter-spacing:.22em;
  background:white; color:#04040b; padding:12px; border:none; border-radius:2px;
  cursor:none; pointer-events:all; transition:background .2s, opacity .2s; margin-top:4px;
}
#modal-submit:hover { background:rgba(255,255,255,.88); }
#modal-thanks {
  display:none; padding:8px 0;
}
#modal-thanks .ai-loading {
  text-align:center; padding:20px 0;
  font-family:'DM Mono',monospace; font-size:11.9px; letter-spacing:.12em;
  color:rgba(255,255,255,.4);
}
#modal-thanks .ai-loading .dots::after { content:''; animation:dots-anim 1.4s steps(4,end) infinite; }
@keyframes dots-anim { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
#ai-result {
  font-family:'DM Mono',monospace; font-size:12.6px; line-height:2.0;
  color:rgba(255,255,255,.7); letter-spacing:.04em;
}
#ai-result h3 {
  font-family:'Bebas Neue',sans-serif; font-size:21.1px; letter-spacing:.18em;
  color:rgba(255,255,255,.85); margin:18px 0 6px; line-height:1.4;
}
#ai-result h3:first-child { margin-top:0; }
#ai-result strong { color:rgba(255,255,255,.9); }
#ai-result ul { padding-left:16px; margin:4px 0 10px; }
#ai-result li { margin-bottom:4px; }
#modal-reset {
  display:none; width:100%; font-family:'Bebas Neue',sans-serif; font-size:17.2px; letter-spacing:.18em;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); padding:10px; border:1px solid rgba(255,255,255,.15);
  border-radius:2px; cursor:none; pointer-events:all; transition:background .2s; margin-top:16px;
}
#modal-reset:hover { background:rgba(255,255,255,.15); color:white; }

/* ── LEGAL MODAL ── */
#legal-box {
  background:rgba(8,8,20,.98); border:1px solid rgba(255,255,255,.1);
  padding:36px 40px; width:min(520px,90vw); border-radius:3px;
  position:relative; max-height:80vh; overflow-y:auto; scrollbar-width:none;
}
#legal-box::-webkit-scrollbar { display:none; }
#legal-box h2 { font-family:'Bebas Neue',sans-serif; font-size:26.4px; letter-spacing:.2em; color:white; margin-bottom:16px; }
#legal-box p { font-size:11.3px; color:rgba(255,255,255,.52); line-height:1.9; margin-bottom:12px; }

/* ── MOBILE ── */
/* ── MOBILE CREDITS — center bottom ── */
#mobile-credits {
  display:none;
  position:fixed; bottom:env(safe-area-inset-bottom, 16px);
  left:0; right:0;
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  text-align:center;
  font-size:9px; color:rgba(255,255,255,.40); letter-spacing:.10em;
  line-height:2.0; z-index:200; pointer-events:none;
  transition:opacity .3s;
}
#mobile-credits a { color:rgba(255,255,255,.48); text-decoration:none; pointer-events:all; cursor:auto; }
#mobile-credits a:hover { color:rgba(255,255,255,.6); }
#mobile-credits.hide { opacity:0; pointer-events:none; }

@media (max-width:600px) {
  #hud-title { font-size:23.8px; top:14px; left:14px; }
  #hud-sub { top:46px; left:14px; font-size:10.6px; max-width:calc(100vw - 100px); display:none; }
  #instr { display:none; }
  #instr-sat { right:14px; top:14px; font-size:10.6px; }
  #legend { display:none; }
  #type-legend { display:none; }
  #br-cluster { display:none; }
  #credits { display:none; }
  #mobile-credits { display:block; }
  #filter-wrap { bottom:64px; width:calc(100vw - 28px); }
  #info-panel { left:14px; width:calc(100vw - 28px); bottom:10px; max-height:32vh;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
    overflow-y:auto; }
  #info-panel::-webkit-scrollbar { display:block; width:3px; }
  #info-panel::-webkit-scrollbar-track { background:transparent; }
  #info-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:2px; }
  #info-panel::before { display:block; left:-10px; }
  .ip-industry { font-size:11px; margin-bottom:2px; }
  .ip-name { font-size:16px !important; margin-bottom:2px; line-height:1.1; }
  .ip-meta { font-size:9px; margin-bottom:6px; }
  .ip-label { font-size:8px; margin-bottom:2px; }
  .ip-tags { gap:3px; margin-bottom:4px; }
  .ip-tag { font-size:8px; padding:1px 5px; }
  .ip-style-tags { gap:3px; margin-bottom:6px; }
  .ip-style-tag { font-size:8px; padding:1px 5px; }
  .ip-desc { font-size:9.5px; line-height:1.55; margin-bottom:6px; }
  .ip-link { font-size:9px; }
  #breadcrumb { display:none; }
  #fbar { display:none; }
  #lead-btn { top:70px; left:14px; font-size:11.9px; padding:8px 18px; }
  #modal-box, #legal-box { padding:28px 22px; }
  #cursor { display:none; }
  body { cursor:auto; }
  .ip-name { font-size:21.1px; }
  #instr-sat { display:none; }
}
@media (max-width:600px) and (orientation:portrait) {
  #info-panel { max-height:33vh; }
}

/* ── NAVIGATION BAR ── */
#nav-bar {
  position:fixed; top:0; left:0; right:0; height:48px;
  background:rgba(4,4,11,.92); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; gap:0;
  z-index:800; transition:transform .4s;
  -webkit-backdrop-filter:blur(18px);
}
#nav-bar.hide { transform:translateY(-100%); pointer-events:none; }
.nav-tab {
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.18em;
  color:rgba(255,255,255,.45); padding:14px 28px;
  cursor:pointer; transition:color .2s, background .2s; text-transform:uppercase;
  border-bottom:2px solid transparent; user-select:none;
  text-decoration:none; display:block;
}
body:not(.view-2d) .nav-tab { cursor:none; }
.nav-tab:hover { color:rgba(255,255,255,.6); background:rgba(255,255,255,.03); }
.nav-tab.active { color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.5); }
@media (max-width:600px) {
  .nav-tab { font-size:10px; padding:14px 16px; letter-spacing:.12em; }
}

/* ── 2D VIEW CONTAINERS ── */
.view-2d-container {
  display:none; min-height:100vh; padding:80px 24px 40px;
  background:#04040b; position:relative; z-index:100;
}
.view-2d-container.active { display:block; }

/* ── RECENTS VIEW ── */
/* ── RECENTS LAYOUT — cards centered, newsletter fixed right ── */
#recents-layout {
  position:relative; max-width:700px; margin:0 auto;
  display:flex; flex-direction:column;
}
#recents-main { width:100%; }
#recents-sidebar {
  position:fixed; top:220px; right:40px; width:340px; z-index:90;
}
@media (max-width:1440px) {
  /* When viewport can't fit both card + sidebar without overlap */
  #recents-layout { max-width:700px; }
  #recents-sidebar {
    position:static; width:100%; margin-top:28px; margin-bottom:8px;
    order:2; /* move below the cards, above load-more */
  }
  #recents-main { order:1; }
  #load-more-btn { order:3; }
}
#view-recents .recents-header { max-width:none; margin:0 0 32px; }

/* ── NEWSLETTER BOX ── */
#newsletter-box {
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-areas:"nl"; place-items:center;
  border:1px solid rgba(255,255,255,.08); border-radius:3px;
  transition:border-color 400ms cubic-bezier(0.5,1,0.89,1);
  user-select:none; background:#09090b;
}
#newsletter-box:hover,
#newsletter-box:focus-within {
  border-color:rgba(255,255,255,.40);
  transition:border-color 800ms cubic-bezier(0.45,0,0.55,1);
}
#newsletter-box > * { grid-area:nl; }
#newsletter-box::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at bottom left, transparent 55%, #101012);
  pointer-events:none; z-index:3;
  transition:opacity 900ms cubic-bezier(0.5,1,0.89,1);
}
#newsletter-box:hover::before { opacity:0; }
#newsletter-box::after {
  content:''; position:absolute; inset:0; margin:auto; aspect-ratio:1;
  background:radial-gradient(circle, #09090b, transparent 65%);
  opacity:0; pointer-events:none; z-index:3;
  transition:opacity 800ms cubic-bezier(0.5,1,0.89,1);
}
#newsletter-box:hover::after { opacity:1; }
#newsletter-box pixel-canvas {
  z-index:1; pointer-events:none;
}
.nl-content {
  position:relative; z-index:4; padding:32px 28px; width:100%;
}
.nl-title {
  font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:.08em;
  color:rgba(255,255,255,.88); line-height:1.15; margin-bottom:12px;
}
.nl-sub {
  font-size:11.5px; color:rgba(255,255,255,.35); line-height:1.8;
  letter-spacing:.04em; margin-bottom:18px;
}
.nl-sub strong { color:rgba(255,255,255,.55); }
.nl-form {
  display:flex; border:1px solid rgba(255,255,255,.2); border-radius:2px;
  overflow:hidden; transition:border-color .2s;
}
.nl-form:focus-within { border-color:rgba(255,255,255,.4); }
#nl-email {
  flex:1; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.06em;
  background:#09090b; border:none; color:rgba(255,255,255,.8);
  padding:11px 18px; outline:none; min-width:0;
}
#nl-email::placeholder { color:rgba(255,255,255,.40); }
#nl-submit {
  font-family:'DM Mono',monospace; font-size:11px; font-weight:bold;
  letter-spacing:.1em; background:rgba(255,255,255,.9); color:#04040b;
  border:none; padding:11px 22px; cursor:pointer; transition:background .2s;
  white-space:nowrap;
}
#nl-submit:hover { background:white; }
.nl-fine {
  font-size:9.5px; color:rgba(255,255,255,.35); letter-spacing:.06em;
  margin-top:10px;
}
.nl-thanks-text {
  font-size:12px; color:rgba(255,255,255,.55); letter-spacing:.08em; text-align:center;
  padding:8px 0;
}

#view-recents .recents-header {
  max-width:900px; margin:0 auto 32px;
}
#view-recents .recents-header h1 {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,5vw,42px);
  letter-spacing:.2em; color:rgba(255,255,255,.82); margin-bottom:6px;
}
#view-recents .recents-header p {
  font-size:12px; color:rgba(255,255,255,.45); letter-spacing:.08em; line-height:1.8;
}

/* ── ARCHIVE VIEW ── */
#view-archive { padding-top:80px; overflow:hidden; height:100vh; }
#archive-layout {
  display:flex; flex-direction:row; max-width:1100px; margin:0 auto; gap:24px;
  height:calc(100vh - 100px);
}
#archive-sidebar {
  width:310px; flex-shrink:0; padding-right:0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
#archive-sidebar::-webkit-scrollbar { width:3px; }
#archive-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:2px; }
#archive-main {
  flex:1; min-width:0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
#archive-main::-webkit-scrollbar { width:4px; }
#archive-main::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:2px; }
.sidebar-section { margin-bottom:16px; }
.sidebar-section h3 {
  font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:.2em;
  color:rgba(255,255,255,.45); margin-bottom:8px;
}
.sidebar-filter {
  display:inline-flex; align-items:center; gap:0; padding:4px 12px;
  cursor:pointer !important; user-select:none; font-size:10px; letter-spacing:.06em;
  color:rgba(255,255,255,.4); transition:all .18s;
  border:1px solid rgba(255,255,255,.15); border-radius:2px;
  margin:0 5px 5px 0; background:transparent;
}
.sidebar-filter:hover { border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.6); }
.sidebar-filter.selected { color:rgba(255,255,255,.95); border-color:currentColor; }
.sidebar-filter .sf-check { display:none; }
.sidebar-filter .sf-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0; opacity:.55;
  margin-right:6px;
}
.sidebar-filter.selected .sf-dot { opacity:1; }
/* Color-filled state — set via JS with data-color attribute */
.sidebar-filter.selected[data-color] {
  background:var(--sf-bg); border-color:var(--sf-border); color:var(--sf-color);
}
#archive-search {
  width:100%; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.1em;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8); padding:9px 12px; outline:none;
  border-radius:2px; margin-bottom:16px; transition:border-color .2s;
}
#archive-search::placeholder { color:rgba(255,255,255,.2); }
#archive-search:focus { border-color:rgba(255,255,255,.35); }
.archive-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.archive-count {
  font-size:10px; color:rgba(255,255,255,.2); letter-spacing:.12em;
}
/* Sort toggle — matches sidebar-filter pill exactly */
.archive-sort-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .06em;
  color: rgba(255,255,255,.4); background: transparent;
  border: 1px solid rgba(255,255,255,.15); border-radius: 2px;
  padding: 4px 12px; cursor: pointer; white-space: nowrap;
  transition: color .18s, border-color .18s;
  user-select: none;
}
.archive-sort-btn:hover { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.4); }
.archive-sort-btn.active { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.45); }
@media (max-width:768px) {
  #view-archive { height:auto; overflow:visible; padding-top:48px; }
  #archive-layout { flex-direction:column; height:auto; gap:0; }
  #archive-sidebar {
    width:100%; overflow:visible;
    position:fixed; top:48px; left:0; right:0;
    background:#04040b; z-index:50;
    padding:10px 24px 8px; box-sizing:border-box;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  #archive-main { overflow:visible; max-height:none; padding-top:120px; }
  .sidebar-section { margin-bottom:0; }
}

/* ── VIDEO GRID (shared by recents & archive) ── */
.video-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px; max-width:900px; margin:0 auto;
}
#recents-grid {
  grid-template-columns:1fr; max-width:700px;
}
#view-archive .video-grid { max-width:none; }
@media (max-width:400px) { .video-grid { grid-template-columns:1fr; } }

/* ── VIDEO CARD (2D) ── */
/* ── Top shade gradient on 2D cards ── */
.vcard-top-shade {
  position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(to bottom, rgba(4,4,15,0.6) 0%, rgba(4,4,15,0.2) 50%, transparent 100%);
  pointer-events:none; z-index:0;
}
.vcard-header { position:relative; z-index:1; }
.vcard-title-area { position:relative; z-index:1; }
.vcard-accent { z-index:1; }

.vcard {
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:3px; overflow:hidden; cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  text-decoration:none; display:block; color:white;
}
body.view-2d .vcard { cursor:pointer; }
.vcard:hover {
  border-color:rgba(255,255,255,.2); transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.vcard-thumb {
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:#07071e;
}
.vcard-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.85; transition:opacity .2s;
}
.vcard:hover .vcard-thumb img { opacity:1; }
.vcard-thumb-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; pointer-events:none;
}
.vcard-header {
  padding:8px 12px; display:flex; align-items:center; justify-content:space-between;
}
.vcard-type-label {
  font-size:9px; font-weight:bold; letter-spacing:.1em; text-transform:uppercase;
}
.vcard-dots { display:flex; gap:6px; }
.vcard-dot { width:8px; height:8px; border-radius:50%; }
.vcard-title-area {
  padding:10px 12px;
  background:linear-gradient(transparent,rgba(4,4,15,.85));
}
.vcard-title {
  font-family:'Courier New',monospace; font-weight:bold; font-size:13px;
  line-height:1.35; color:rgba(255,255,255,.95);
}
.vcard-accent {
  position:absolute; left:0; top:0; bottom:0; width:3px;
}
.vcard-body {
  padding:10px 14px 14px;
}
.vcard-meta {
  font-size:9.5px; color:rgba(255,255,255,.56); letter-spacing:.1em; margin-bottom:8px;
}
.vcard-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.vcard-tag {
  font-size:8.5px; padding:2px 6px; border-radius:1px; letter-spacing:.04em;
}
.vcard-desc {
  font-size:10.5px; line-height:1.7; color:rgba(255,255,255,.48);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── LOAD MORE BUTTON ── */
#load-more-btn {
  display:block; margin:32px auto 0; font-family:'DM Mono',monospace; order:3;
  font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  padding:12px 36px; border-radius:2px; cursor:pointer; transition:all .2s;
}
#load-more-btn:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.56); }
#load-more-btn:disabled { opacity:.3; pointer-events:none; }

/* ── 2D VIDEO DETAIL VIEW ── */
#view-video {
  display:none; min-height:100vh; padding:80px 24px 60px;
  background:#04040b; position:relative; z-index:100;
}
#view-video.active { display:block; }
#video-detail {
  max-width:820px; margin:0 auto;
}
#video-detail-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
#video-back {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.14em;
  color:rgba(255,255,255,.45); cursor:pointer;
  display:inline-block; transition:color .2s; text-decoration:none;
}
#video-back:hover { color:rgba(255,255,255,.6); }
#video-source-btn {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.14em;
  color:rgba(255,255,255,.45); cursor:pointer;
  display:inline-block; transition:color .2s, border-color .2s; text-decoration:none;
  border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:5px 10px;
}
#video-source-btn:hover { color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.45); }
#video-card-2d {
  width:100%; aspect-ratio:16/9; border-radius:3px; overflow:hidden;
  position:relative; background:#07071e; margin-bottom:24px;
  border:1px solid rgba(255,255,255,.1);
}
#video-card-2d img {
  width:100%; height:100%; object-fit:cover; display:block;
}
#video-card-2d .vcard-thumb-overlay { position:absolute; inset:0; }
/* The big detail card doubles as the player: this element fills it */
.vd-card-embed {
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center;
}
.vd-card-embed.vd-embed-thumb { cursor:pointer; }
.vd-card-embed iframe,
.vd-card-embed video {
  width:100%; height:100%; border:none; display:block;
}
.vd-card-embed video { object-fit:contain; background:#000; }
.vd-card-embed.playing { background:#000; position: relative; }

/* Loading spinner shown between play-click and first frame */
.vd-embed-spinner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 10;
}
.vd-embed-spinner-ring {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.75);
  border-radius: 50%;
  animation: vd-spin .75s linear infinite;
}
@keyframes vd-spin { to { transform: rotate(360deg); } }
/* Title overlay sits above the thumbnail but must not eat play-button clicks */
.vd-card-title-overlay { pointer-events:none; }
#video-detail-info {
  display:grid; grid-template-columns:1fr 280px; gap:32px;
}
@media (max-width:700px) {
  #video-detail-info { grid-template-columns:1fr; }
}
.vd-main {}
.vd-industry {
  font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:.22em;
  color:rgba(255,255,255,.45); margin-bottom:4px;
}
/* ── Video embed player ──────────────────────────────────── */
.vd-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: #050512;
  border: 1px solid rgba(255,255,255,.07);
}
.vd-embed iframe,
.vd-embed video {
  width: 100%; height: 100%;
  border: none; display: block;
}
.vd-embed video { object-fit: contain; background: #000; }

/* Thumbnail state shared by click-to-play and external-watch layouts */
.vd-embed-thumb { background-size: cover; background-position: center; cursor: pointer; }
.vd-embed-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
  transition: background .2s;
}
.vd-embed-thumb:hover .vd-embed-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 100%); }

/* Large play button (click-to-load) */
.vd-play-btn-large {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: background .18s, transform .15s, border-color .18s;
}
.vd-play-btn-large:hover { background: rgba(255,255,255,.32); border-color: #fff; transform: scale(1.08); }
.vd-play-icon { font-size: 28px; line-height: 1; margin-left: 4px; }

.vd-embed-note {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em;
  color: rgba(255,255,255,.45);
}

/* Fallback "Watch on Platform ↗" link below play button */
.vd-watch-fallback {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em;
  color: rgba(255,255,255,.55); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.vd-watch-fallback:hover { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.7); }

/* External watch button (X, Instagram — no embed available) */
.vd-watch-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 50px;
  color: #fff; text-decoration: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .1em;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s, transform .15s;
}
.vd-watch-btn:hover { background: rgba(255,255,255,.22); border-color: #fff; transform: scale(1.04); }
.vd-watch-icon { font-size: 20px; line-height: 1; }


/* ── Play button on video cards ──────────────────────────── */
.vcard-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.vcard:hover .vcard-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vd-name {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(22px,4vw,34px);
  letter-spacing:.1em; line-height:1.15; margin-bottom:6px;
}
.vd-meta {
  font-size:11px; color:rgba(255,255,255,.56); letter-spacing:.1em; margin-bottom:16px;
}
.vd-desc {
  font-size:12px; line-height:1.8; color:rgba(255,255,255,.4); margin-bottom:16px;
}
.vd-source {
  font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.56);
  text-decoration:none; transition:all .2s; display:inline-block;
  border:1px solid rgba(255,255,255,.12); padding:6px 14px; border-radius:2px;
  margin-top:4px;
}
.vd-source:hover { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.04); }
.vd-sidebar {}
.vd-label {
  font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,.56);
  margin-bottom:6px; text-transform:uppercase;
}
.vd-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:14px; }
.vd-tag {
  font-size:9.5px; padding:3px 8px; border-radius:1px; letter-spacing:.05em;
  cursor:pointer; transition:opacity .15s; text-decoration:none; display:inline-block;
}
.vd-tag:hover { opacity:.8; }
.vd-style-tag {
  font-size:9.5px; padding:3px 8px; border-radius:1px; letter-spacing:.05em;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5); cursor:pointer; text-decoration:none; display:inline-block;
  transition:opacity .15s;
}
.vd-style-tag:hover { opacity:.8; }

/* ── 2D FOOTER ── */
.view-footer {
  text-align:center; padding:40px 0 20px;
  font-size:9px; color:rgba(255,255,255,.40); letter-spacing:.12em;
}
.view-footer a { color:rgba(255,255,255,.40); text-decoration:none; }
.view-footer a:hover { color:rgba(255,255,255,.5); }

/* ── Explore view wrapper — offset for nav ── */
#view-explore { position:relative; }
#view-explore.active canvas { display:block; }
body.view-explore #cursor { display:block; }
body.view-2d #cursor { display:none !important; }

/* ── Offset existing HUD elements when nav is visible ── */
body:not(.nav-hidden) #hud-title { top:68px; }
body:not(.nav-hidden) #hud-sub { top:75px; }
body:not(.nav-hidden) #instr { top:68px; }
body:not(.nav-hidden) #instr-sat { top:68px; }
body:not(.nav-hidden) #breadcrumb { top:110px; }

/* ── No results ── */
.no-results {
  text-align:center; padding:60px 20px;
  font-size:12px; color:rgba(255,255,255,.2); letter-spacing:.1em;
}


/* ── V32: Force-hide 3D UI in 2D mode (safety net) ── */
body.view-2d canvas,
body.view-2d #hud-title,
body.view-2d #hud-sub,
body.view-2d #instr,
body.view-2d #instr-sat,
body.view-2d #filter-wrap,
body.view-2d #type-legend,
body.view-2d #credits,
body.view-2d #mobile-credits,
body.view-2d #tip,
body.view-2d #info-panel,
body.view-2d #tag-tip,
body.view-2d #breadcrumb,
body.view-2d #fbar,
body.view-2d #media-overlay,
body.view-2d #legend,
body.view-2d #br-cluster { display:none !important; }
body.view-2d #cursor { display:none !important; }
body.view-2d, body.view-2d * { cursor:auto !important; }
body.view-2d .vcard, body.view-2d .vcard * { cursor:pointer !important; }
body.view-2d .sidebar-filter, body.view-2d .sidebar-filter * { cursor:pointer !important; user-select:none !important; }
body.view-2d a, body.view-2d button, body.view-2d input { cursor:pointer !important; }
body.view-2d input[type=text], body.view-2d input[type=email], body.view-2d textarea { cursor:text !important; }


@media (max-width:768px) {
  #newsletter-box { margin:0 -4px; }
  .nl-form {
    border-radius:2px;
    transform:scale(0.8); transform-origin:top left; width:116% !important;
  }
  #nl-email { font-size:16px !important; padding:10px 14px !important; }
  #nl-submit { font-size:12px !important; padding:10px 18px !important; letter-spacing:.08em !important; white-space:nowrap; flex-shrink:0; }
  .nl-content { padding:18px 16px !important; overflow:hidden !important; }
  .nl-title { font-size:36px !important; line-height:1.25 !important; margin-bottom:8px !important; }
  .nl-sub { font-size:12px !important; line-height:1.65 !important; margin-bottom:12px !important; word-wrap:break-word !important; }
  .nl-fine { font-size:7.5px !important; margin-top:8px !important; }
}

@media (max-width:768px) {
  #video-card-2d { aspect-ratio:16/9; }
  #video-card-2d .vcard-type-label { font-size:9px !important; }
  #video-card-2d .vcard-title { font-size:13px !important; }
  #video-card-2d .vcard-header { padding:8px 12px !important; }
  #video-card-2d .vcard-title-area { padding:10px 12px !important; }
  #video-card-2d .vcard-dot { width:8px !important; height:8px !important; }
  .vd-name { font-size:20px !important; }
  .vd-industry { font-size:12px !important; }
  .vd-meta { font-size:10px !important; }
  .vd-desc { font-size:11px !important; }
  .vd-label { font-size:8px !important; }
  .vd-tag, .vd-style-tag { font-size:8.5px !important; }
}
/* ── Prevent iOS zoom on input focus (16px minimum) ── */
@media (max-width:768px) {
  #archive-search {
    font-size:16px !important; padding:8px 12px !important;
    height:40px !important; letter-spacing:.06em !important;
    transform:scale(0.8); transform-origin:top left; width:116% !important;
    margin-bottom:4px !important;
  }
  
}

/* ── Mobile filter buttons + fullscreen popup ── */
@media (min-width:769px) {
  .sf-toggle { display:none !important; }
  #archive-filter-buttons { display:none !important; }
  #filter-popup-overlay { display:none !important; }
}
@media (max-width:768px) {
  .sidebar-section { display:none; } /* hide inline sections on mobile */
  #archive-filter-buttons { display:flex !important; gap:4px; flex-wrap:nowrap; margin-bottom:0; width:100%; }

  .sf-toggle {
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:5px 0; font-family:'DM Mono',monospace; flex:1;
    font-size:8.5px; letter-spacing:.08em; color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
    border-radius:2px; cursor:pointer; text-transform:uppercase;
    transition:color .2s, border-color .2s; white-space:nowrap;
  }
  .sf-toggle:hover { color:rgba(255,255,255,.65); border-color:rgba(255,255,255,.56); }
  .sf-toggle .sf-arrow {
    font-size:9px; color:rgba(255,255,255,.56); transition:transform .2s;
  }
  .sf-toggle.active { color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.45); }
  .sf-toggle.active .sf-arrow { transform:rotate(90deg); }
.sf-reset { color:rgba(255,80,80,.5) !important; border-color:rgba(255,80,80,.2) !important; }
.sf-reset:hover { color:rgba(255,80,80,.8) !important; border-color:rgba(255,80,80,.4) !important; }

}

/* ── Filter popup overlay (mobile) ── */
#filter-popup-overlay {
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(4,4,11,.96); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  flex-direction:column; padding:20px;
  overflow-y:auto;
}
#filter-popup-overlay.show { display:flex; }
#filter-popup-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-shrink:0;
}
#filter-popup-title {
  font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.2em;
  color:rgba(255,255,255,.7);
}
#filter-popup-close {
  font-size:22px; color:rgba(255,255,255,.35); background:none; border:none;
  cursor:pointer; padding:4px 8px; transition:color .2s;
}
#filter-popup-close:hover { color:white; }
#filter-popup-tags {
  display:flex; flex-wrap:wrap; gap:6px;
}
#filter-popup-tags .sidebar-filter {
  display:inline-flex !important;
}


/* ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   EXPLORE VIEW OVERRIDES & PATCHES (v50+)
   These rules refine the base styles above for the 3D Explore
   view and apply incremental fixes (v52–v65).
───────────────────────────────────────────────────────────── */

#tip {
  position:absolute; background:rgba(4,4,11,.97); border:1px solid rgba(255,255,255,.08);
  padding:13px 17px; max-width:260px; pointer-events:none;
  opacity:0; transition:opacity .13s; backdrop-filter:blur(18px); border-radius:2px; z-index:450;
}
#tip.show { opacity:1; }
.tn { font-family:'Bebas Neue',sans-serif; font-size:19.8px; letter-spacing:.08em; margin-bottom:3px; }
.tm { font-size:11.3px; color:rgba(255,255,255,.45); letter-spacing:.1em; margin-bottom:8px; }
.tg { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:7px; }
.tt { font-size:9.8px; padding:2px 6px; letter-spacing:.05em; border-radius:1px; }
.ta { font-size:11.9px; line-height:1.7; color:rgba(255,255,255,.56); }
.tlink { display:block; margin-top:8px; font-size:11.3px; letter-spacing:.12em; color:rgba(255,255,255,.35); text-decoration:none; }
.tlink:hover { color:rgba(255,255,255,.6); }

/* ── INFO PANEL ── */
#info-panel {
  position:absolute; bottom:20px; left:36px;
  width:min(340px,calc(50vw - 40px)); max-height:calc(100vh - 120px);
  overflow-y:auto; overflow-x:hidden;
  pointer-events:none; opacity:0; transform:translateY(10px);
  transition:opacity .45s, transform .45s;
  scrollbar-width:none; z-index:20;
}
#info-panel::-webkit-scrollbar { display:none; }
#info-panel.show { opacity:1; transform:translateY(0); }
#info-panel::before {
  content:''; position:absolute; left:-14px; top:0; bottom:0; width:2px; border-radius:1px;
  background:var(--panel-color,rgba(255,255,255,.25));
}
.ip-industry { font-family:'Bebas Neue',sans-serif; font-size:17.2px; letter-spacing:.22em; color:rgba(255,255,255,.55); margin-bottom:5px; }
.ip-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(19.2px,3vw,26.4px); letter-spacing:.1em; margin-bottom:4px; line-height:1.15; }
.ip-meta { font-size:11.3px; color:rgba(255,255,255,.45); letter-spacing:.1em; margin-bottom:10px; }
.ip-label { font-size:9.8px; letter-spacing:.18em; color:rgba(255,255,255,.45); margin-bottom:5px; text-transform:uppercase; }
.ip-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.ip-tag { font-size:9.8px; padding:2px 7px; letter-spacing:.05em; border-radius:1px; }
.ip-style-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:11px; }
.ip-style-tag { font-size:9.8px; padding:2px 7px; letter-spacing:.05em; border-radius:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); }
.ip-desc { font-size:11.9px; line-height:1.75; color:rgba(255,255,255,.56); margin-bottom:10px; }
.ip-link { font-size:11.3px; letter-spacing:.12em; color:rgba(255,255,255,.35); text-decoration:none; pointer-events:all; }
.ip-link:hover { color:rgba(255,255,255,.65); }

/* ── TAG TOOLTIP ── */
#tag-tip {
  position:fixed; background:rgba(4,4,11,.97); border:1px solid rgba(255,255,255,.1);
  padding:6px 12px 8px; max-width:240px; pointer-events:none;
  opacity:0; transition:opacity .15s; backdrop-filter:blur(18px); border-radius:2px; z-index:500;
}
#tag-tip.show { opacity:1; }
#tag-tip .tt-head { font-family:'Bebas Neue',sans-serif; font-size:17.2px; letter-spacing:.1em; margin-bottom:2px; }
#tag-tip .tt-body { font-size:11.3px; line-height:1.7; color:rgba(255,255,255,.48); }

/* ── BREADCRUMB — top-right, below the satellite instruction text ── */
#breadcrumb {
  position:absolute; top:62px; right:24px; font-size:10.6px; color:rgba(255,255,255,.2);
  letter-spacing:.10em; pointer-events:none; line-height:2.0; max-width:min(280px,40vw);
  opacity:0; transition:opacity .3s; text-align:right;
}
#breadcrumb.show { opacity:1; }

/* ── FOCUS BAR ── */
#fbar {
  position:absolute; bottom:20px; right:24px; font-size:10.6px;
  color:rgba(255,255,255,.40); letter-spacing:.1em; opacity:0;
  transition:opacity .3s; pointer-events:none; text-align:right; line-height:2.2;
}
#fbar.show { opacity:1; }

/* ── MEDIA OVERLAY — "View Source" button on focused card ── */
#media-overlay {
  position:absolute; pointer-events:all; cursor:none;
  opacity:0; transition:opacity .3s; transform:translate(-100%,-100%); z-index:10;
}
#media-overlay.show { opacity:1; }
#media-btn {
  height:32px; border-radius:2px;
  border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  cursor:none; transition:background .2s, border-color .2s; backdrop-filter:blur(6px);
  padding:0 16px; white-space:nowrap;
  font-family:'DM Mono',monospace; font-size:11.3px; letter-spacing:.14em;
  color:rgba(255,255,255,.82);
}
#media-btn:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.8); color:white; }

/* ── MODAL OVERLAY ── */
#modal-overlay {
  position:fixed; inset:0; background:rgba(4,4,11,.88); backdrop-filter:blur(18px);
  z-index:600; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#modal-overlay.show { opacity:1; pointer-events:all; }
#modal-box {
  background:rgba(8,8,20,.98); border:1px solid rgba(255,255,255,.1);
  padding:40px 44px; width:min(560px,90vw); border-radius:3px;
  position:relative; max-height:85vh; overflow-y:auto; scrollbar-width:none;
}
#modal-box::-webkit-scrollbar { display:none; }
#modal-box h2 {
  font-family:'Bebas Neue',sans-serif; font-size:34.3px; letter-spacing:.22em;
  color:white; margin-bottom:6px;
}
#modal-box .modal-sub {
  font-size:11.9px; color:rgba(255,255,255,.35); letter-spacing:.1em; margin-bottom:28px; line-height:1.8;
}
#modal-box .modal-context {
  font-size:10.6px; color:rgba(255,255,255,.40); letter-spacing:.1em; margin-bottom:18px; line-height:1.8;
  padding:8px 12px; border-left:2px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02);
}
#modal-close {
  position:absolute; top:18px; right:22px; font-size:23.8px; color:rgba(255,255,255,.45);
  cursor:none; pointer-events:all; transition:color .2s; line-height:1;
}
#modal-close:hover { color:white; }
.mfield {
  margin-bottom:16px;
}
.mfield label {
  display:block; font-size:10.6px; letter-spacing:.2em; color:rgba(255,255,255,.45);
  margin-bottom:6px; text-transform:uppercase;
}
.mfield input, .mfield textarea, .mfield select {
  width:100%; font-family:'DM Mono',monospace; font-size:12.6px; letter-spacing:.08em;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85); padding:10px 14px; outline:none; border-radius:2px;
  transition:border-color .2s; cursor:auto;
}
.mfield input:focus, .mfield textarea:focus, .mfield select:focus { border-color:rgba(255,255,255,.4); }
.mfield textarea { height:72px; resize:none; }
.mfield select option { background:#08081e; color:white; }
#modal-submit {
  width:100%; font-family:'Bebas Neue',sans-serif; font-size:19.8px; letter-spacing:.22em;
  background:white; color:#04040b; padding:12px; border:none; border-radius:2px;
  cursor:none; pointer-events:all; transition:background .2s, opacity .2s; margin-top:4px;
}
#modal-submit:hover { background:rgba(255,255,255,.88); }
#modal-thanks {
  display:none; padding:8px 0;
}
#modal-thanks .ai-loading {
  text-align:center; padding:20px 0;
  font-family:'DM Mono',monospace; font-size:11.9px; letter-spacing:.12em;
  color:rgba(255,255,255,.4);
}
#modal-thanks .ai-loading .dots::after { content:''; animation:dots-anim 1.4s steps(4,end) infinite; }
@keyframes dots-anim { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
#ai-result {
  font-family:'DM Mono',monospace; font-size:12.6px; line-height:2.0;
  color:rgba(255,255,255,.7); letter-spacing:.04em;
}
#ai-result h3 {
  font-family:'Bebas Neue',sans-serif; font-size:21.1px; letter-spacing:.18em;
  color:rgba(255,255,255,.85); margin:18px 0 6px; line-height:1.4;
}
#ai-result h3:first-child { margin-top:0; }
#ai-result strong { color:rgba(255,255,255,.9); }
#ai-result ul { padding-left:16px; margin:4px 0 10px; }
#ai-result li { margin-bottom:4px; }
#modal-reset {
  display:none; width:100%; font-family:'Bebas Neue',sans-serif; font-size:17.2px; letter-spacing:.18em;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); padding:10px; border:1px solid rgba(255,255,255,.15);
  border-radius:2px; cursor:none; pointer-events:all; transition:background .2s; margin-top:16px;
}
#modal-reset:hover { background:rgba(255,255,255,.15); color:white; }

/* ── LEGAL MODAL ── */
#legal-box {
  background:rgba(8,8,20,.98); border:1px solid rgba(255,255,255,.1);
  padding:36px 40px; width:min(520px,90vw); border-radius:3px;
  position:relative; max-height:80vh; overflow-y:auto; scrollbar-width:none;
}
#legal-box::-webkit-scrollbar { display:none; }
#legal-box h2 { font-family:'Bebas Neue',sans-serif; font-size:26.4px; letter-spacing:.2em; color:white; margin-bottom:16px; }
#legal-box p { font-size:11.3px; color:rgba(255,255,255,.52); line-height:1.9; margin-bottom:12px; }

/* ── MOBILE ── */
/* ── MOBILE CREDITS — center bottom ── */
#mobile-credits {
  display:none;
  position:fixed; bottom:env(safe-area-inset-bottom, 16px);
  left:0; right:0;
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  text-align:center;
  font-size:9px; color:rgba(255,255,255,.40); letter-spacing:.10em;
  line-height:2.0; z-index:200; pointer-events:none;
  transition:opacity .3s;
}
#mobile-credits a { color:rgba(255,255,255,.48); text-decoration:none; pointer-events:all; cursor:auto; }
#mobile-credits a:hover { color:rgba(255,255,255,.6); }
#mobile-credits.hide { opacity:0; pointer-events:none; }

@media (max-width:600px) {
  #hud-title { font-size:23.8px; top:14px; left:14px; }
  #hud-sub { top:4px; left:14px; font-size:10.6px; max-width:calc(100vw - 28px); display:block; opacity:1; line-height:1.6; }
  #instr { display:none; }
  #instr-sat { right:14px; top:14px; font-size:10.6px; }
  #legend { display:none; }
  #type-legend { display:none; }
  #br-cluster { display:none; }
  #credits { display:none; }
  #mobile-credits { display:block; }
  #filter-wrap { bottom:64px; width:calc(100vw - 28px); }
  #info-panel { left:14px; width:calc(100vw - 28px); bottom:10px; max-height:32vh;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent;
    overflow-y:auto; }
  #info-panel::after {
    content:''; position:fixed; left:0; right:0;
    bottom:calc(32vh + 10px); height:48px;
    background:linear-gradient(to bottom, transparent, rgba(4,4,11,0.82));
    pointer-events:none; z-index:19;
  }
  #info-panel::-webkit-scrollbar { display:block; width:3px; }
  #info-panel::-webkit-scrollbar-track { background:transparent; }
  #info-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:2px; }
  #info-panel::before { display:block; left:-10px; }
  .ip-industry { font-size:11px; margin-bottom:2px; }
  .ip-name { font-size:16px !important; margin-bottom:2px; line-height:1.1; }
  .ip-meta { font-size:9px; margin-bottom:6px; }
  .ip-label { font-size:8px; margin-bottom:2px; }
  .ip-tags { gap:3px; margin-bottom:4px; }
  .ip-tag { font-size:8px; padding:1px 5px; }
  .ip-style-tags { gap:3px; margin-bottom:6px; }
  .ip-style-tag { font-size:8px; padding:1px 5px; }
  .ip-desc { font-size:9.5px; line-height:1.55; margin-bottom:6px; }
  .ip-link { font-size:9px; display:none; }
  #breadcrumb { display:none; }
  #fbar { display:none; }
  #lead-btn {
    position:fixed;
    bottom:auto; top:8px; left:50%; right:auto;
    transform:translateX(-50%) !important;
    font-size:11px; padding:13px 22px;
    white-space:nowrap; text-align:center;
    max-width:none; line-height:1.2;
    will-change:auto;
  }
  #modal-overlay { align-items:flex-end; padding-top:0; }
  #modal-box, #legal-box {
    padding:12px 18px 24px;
    width:100vw; border-radius:14px 14px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    max-height:100dvh;
    max-height:100vh;
    height:auto;
    overflow-y:hidden;
  }
  #cursor { display:none; }
  body { cursor:auto; }
  .ip-name { font-size:21.1px; }
  #instr-sat { display:none; }
  #modal-close { font-size:32px; top:12px; right:16px; cursor:auto; }
}
@media (max-width:600px) and (orientation:portrait) {
  #info-panel { max-height:33vh; }
}



/* ───────────────────────────────────────────────────────────── */
/*  v52 PATCHES — applied last, highest cascade priority         */
/* ───────────────────────────────────────────────────────────── */

/* FIX: Lead button — desktop uses idx3's natural bottom-anchored position.
   Reset any leftover top from earlier rules so it doesn't stretch. */
#lead-btn {
  top: auto !important;
  bottom: 90px;
  right: 60px;
  left: auto;
}

/* FIX: Lead button — mobile, position below the nav bar */
@media (max-width:600px) {
  #lead-btn {
    top: 115px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    font-size: 11px;
    padding: 13px 22px;
    white-space: nowrap;
  }
}

/* FIX: hud-sub on mobile — push below nav bar (idx3 default top:4px is hidden by nav) */
@media (max-width:600px) {
  #hud-sub {
    top: 60px !important;
    font-size: 9.5px !important;
    line-height: 1.55 !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* FIX: Hide cursor on mobile (touch devices) even on Explore */
@media (hover:none) {
  body.view-explore #cursor { display: none !important; }
}

/* FIX: Modal & legal overlays must sit ABOVE the nav bar (nav is z-index 800) */
#modal-overlay, #legal-overlay { z-index: 900 !important; }

/* FIX: Modal/Legal box on mobile — allow internal scrolling so the top doesn't get cut off,
   and leave room above for the nav bar */
@media (max-width:600px) {
  #modal-box, #legal-box {
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Re-pad the top of the modal so the close button isn't flush with screen edge */
  #modal-box { padding-top: 24px !important; }
  #legal-box { padding-top: 24px !important; }
}

/* FIX: Filter input — prevent iOS auto-zoom by using 16px font, scale down visually */
@media (max-width:600px) {
  #filter-input {
    font-size: 16px !important;
    transform: scale(0.74);
    transform-origin: left center;
    width: 135% !important;
    padding: 5px 10px !important;
  }
  #filter-row { overflow: hidden; }
}

/* FIX: Info panel on mobile — make it actually scrollable by enabling pointer events.
   The tag-tooltip code in JS sets pointer-events:none on the panel inline,
   so we override with !important here. */
@media (max-width:600px) {
  #info-panel {
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 38vh !important;
  }
  /* Make the bottom-fade gradient sit above the right offset */
  #info-panel::after { bottom: calc(38vh + 10px) !important; }
}



/* ───────────────────────────────────────────────────────────── */
/*  v53 PATCHES                                                  */
/* ───────────────────────────────────────────────────────────── */

/* FIX 4: Mobile lead button — right under nav bar */
@media (max-width:600px) {
  #lead-btn {
    top: 54px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    font-size: 10px !important;
    padding: 10px 18px !important;
    white-space: nowrap;
  }
}

/* FIX 7: Breadcrumb — wider, word-breaking, safe right inset */
#breadcrumb {
  max-width: min(420px, 55vw) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  right: 24px !important;
  line-height: 1.7 !important;
}

/* FIX 2: Mobile satellite info panel — scrollable with fade indicator,
   positioned below focused card. mask-image gives smooth fade at bottom
   that tells the user more content is below. */
@media (max-width:600px) {
  #info-panel {
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    max-height: 36vh !important;
    bottom: 8px !important;
    padding-bottom: 56px !important;
    padding-right: 4px;
  }
  /* v63: fade only when content overflows */
  #info-panel.scrollable {
    mask-image: linear-gradient(to bottom, black 0, black calc(100% - 44px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 44px), transparent 100%);
  }
  /* Kill the old ::after fade overlay */
  #info-panel::after { display: none !important; }
}



/* ───────────────────────────────────────────────────────────── */
/*  v54 PATCHES                                                  */
/* ───────────────────────────────────────────────────────────── */

/* FIX 3: Hide CTA "I want a video like this!" button (keep code for later use) */
#lead-btn { display: none !important; }

/* FIX 1: Hide the satellite nav-guide text (orange box in screenshot) */
#instr-sat { display: none !important; }

/* FIX 1: Desktop satellite info panel — top-left, narrow, safely below nav */
@media (min-width:601px) {
  #info-panel {
    top: 90px !important;
    bottom: auto !important;
    left: 28px !important;
    width: min(300px, 26vw) !important;
    max-width: min(300px, 26vw) !important;
    max-height: calc(100vh - 120px) !important;
    padding-right: 8px;
  }
  /* v49 ship added top offset for nav — override it to match new top position */
  body:not(.nav-hidden) #info-panel { top: 90px !important; }
}

/* FIX 5: Mobile satellite info panel — bump text sizes */
@media (max-width:600px) {
  #info-panel { max-height: 34vh !important; }
  .ip-industry { font-size: 12px !important; margin-bottom: 3px !important; }
  .ip-name { font-size: 19px !important; margin-bottom: 4px !important; line-height: 1.15 !important; }
  .ip-meta { font-size: 10.5px !important; margin-bottom: 8px !important; }
  .ip-label { font-size: 9.5px !important; margin-bottom: 3px !important; }
  .ip-tag { font-size: 9.5px !important; padding: 2px 7px !important; }
  .ip-style-tag { font-size: 9.5px !important; padding: 2px 7px !important; }
  .ip-desc { font-size: 11.5px !important; line-height: 1.6 !important; margin-bottom: 8px !important; }
  .ip-link { font-size: 10.5px !important; }
}

/* FIX 6: Mobile filter input — proper height + no iOS zoom (font>=16px)
   Remove the scale transform which was causing the mid-page cutoff. */
@media (max-width:600px) {
  #filter-wrap {
    bottom: 80px !important;
    width: calc(100vw - 28px) !important;
  }
  #filter-row {
    overflow: visible !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  #filter-input {
    font-size: 16px !important;
    padding: 0 12px !important;
    height: 34px !important;
    line-height: 1 !important;
    width: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #filter-add-btn {
    font-size: 11px !important;
    padding: 0 16px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
}



/* ───────────────────────────────────────────────────────────── */
/*  v55 PATCHES                                                  */
/* ───────────────────────────────────────────────────────────── */

/* Default: compact tag row hidden (desktop uses the detailed layout) */
.ip-all-tags { display: none; }

/* Desktop: wider, scrollable info panel */
@media (min-width:601px) {
  #info-panel {
    width: min(360px, 30vw) !important;
    max-width: min(360px, 30vw) !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    padding-right: 16px !important;
    /* Subtle scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
  }
  #info-panel::-webkit-scrollbar { display: block !important; width: 4px !important; }
  #info-panel::-webkit-scrollbar-track { background: transparent; }
  #info-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 2px; }
}

/* Mobile: compact info panel layout */
@media (max-width:600px) {
  /* Show compact single-row tags */
  .ip-all-tags {
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
    margin-top: 4px;
  }
  .ip-atag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.65);
    letter-spacing: .03em;
    line-height: 1.3;
    white-space: nowrap;
  }
  /* Industry tag: no background, colored border+text inline styled */
  .ip-atag-ind { background: transparent !important; }

  /* Hide the old detailed blocks on mobile */
  #info-panel .ip-industry,
  #info-panel .ip-meta,
  #info-panel .ip-label,
  #info-panel > .ip-tags,
  #info-panel > .ip-style-tags {
    display: none !important;
  }

  /* Mobile name — make it tighter since industry label is gone */
  #info-panel .ip-name {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
}



/* ───────────────────────────────────────────────────────────── */
/*  v61 PATCHES — hover tip cleanup                              */
/* ───────────────────────────────────────────────────────────── */

/* Clamp analysis text in hover tip to 4 lines with ellipsis */
#tip .ta {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Neutral tag style for industry / styles / budget in hover tip */
#tip .tt.tt-neutral {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.14);
}



/* ───────────────────────────────────────────────────────────── */
/*  v62 PATCHES — info panel fade + left-side scrollbar          */
/* ───────────────────────────────────────────────────────────── */

/* Desktop info panel: bottom fade indicator + scrollbar on left */
@media (min-width:601px) {
  #info-panel {
    /* Scrollbar on left via RTL trick — children flipped back to LTR */
    direction: rtl !important;
    padding-left: 16px !important;
    padding-right: 4px !important;
    padding-bottom: 56px !important;
  }
  /* v63: fade only when content overflows */
  #info-panel.scrollable {
    -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 44px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black 0, black calc(100% - 44px), transparent 100%) !important;
  }
  #info-panel > * { direction: ltr; }
  /* The ::before colored accent bar also needs to flip to the right side
     since we reversed direction — reposition it back to the visual left. */
  #info-panel::before {
    left: auto !important;
    right: -14px !important;
  }
}



/* ───────────────────────────────────────────────────────────── */
/*  v64 PATCHES                                                  */
/* ───────────────────────────────────────────────────────────── */

/* v65: Back button — same visual style as #video-back in Recents/Archive,
   positioned absolutely below the nav bar (off the nav itself). */
#explore-back-btn {
  position: fixed;
  top: 64px; left: 24px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.3);
  text-decoration: none;
  cursor: pointer;
  display: none;
  transition: color .2s;
  z-index: 700;
}
#explore-back-btn:hover { color: rgba(255,255,255,.6); }
#explore-back-btn.show { display: inline-block; }
body:not(.view-explore) #explore-back-btn { display: none !important; }
@media (max-width:600px) {
  #explore-back-btn { top: 60px; left: 14px; }
}

/* Desktop: GO TO SOURCE button on left side of info panel.
   The panel uses direction:rtl for left-side scrollbar, which makes
   inline-block children stick to the right. Float overrides that. */
@media (min-width:601px) {
  #info-panel .ip-link {
    float: left !important;
    clear: both !important;
    margin-top: 8px;
  }
}