/* Mina Labs — homepage V3 "sci-fi one-piece", DESKTOP (>900px).
   Same design language as the mobile V3 (palette, beveled buttons, reactor,
   marquee model rail, ad stage, 3D lab) laid out for wide screens, plus
   pointer physics driven by home-command-center.js (cursor glow, parallax,
   reactive 3D, shockwaves, particle network). Pure redesign: every control
   keeps its original id/class and target. */

/* Sale label parts (set by home-command-center.js). "OFF" is the narrow-phone
   variant and must stay hidden everywhere else — the mobile sheet's copy of
   this rule lives inside a max-width media query and so never reaches desktop. */
.ccm-upg-off{display:none;}

#homeCommandCenter{
  position:fixed;
  inset:0;
  z-index:900;
  display:none;
  flex-direction:column;
  padding:0;
  box-sizing:border-box;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#f7faff;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,217,111,.08), transparent 24%),
    radial-gradient(circle at 10% 6%, rgba(108,90,255,.12), transparent 22%),
    radial-gradient(circle at 90% 14%, rgba(213,108,255,.10), transparent 20%),
    radial-gradient(circle at 50% 110%, rgba(100,233,255,.08), transparent 26%),
    linear-gradient(180deg,#03050a 0%,#07101a 55%,#03060b 100%);
  background-color:#03050a;
  overflow:hidden;
}

body.home-cc-active #homeCommandCenter{display:flex;}

/* Lock the underlying page while the command center is showing. */
body.home-cc-active{overflow:hidden!important;}

/* V2 is a clean base. The pure V1 landing chrome (old nav, hero showcase,
   model section, footer) is PERMANENTLY removed — no studio uses it, and it
   must never be reachable via any back/close path. */
.mina-header-v2,
.capability-grid,
#modelSection,
.mina-footer-credit,
.mina-header-studios,
.header-showcase{
  display:none!important;
}

/* The workspace/history DOM is reused inside studios, so it is hidden only
   while the command center itself is showing. */
body.home-cc-active #workbench,
body.home-cc-active #adminPanel,
body.home-cc-active #historyPanel{
  display:none!important;
}

@media (min-width:901px){

  /* ── Ambient FX layers (behind the shell; JS pauses them off-home) ── */
  .hcp3-fx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
  .hcp3-net{position:absolute;inset:0;width:100%;height:100%;opacity:.9;}
  .hcp3-aurora{
    position:absolute;inset:-12%;opacity:.5;filter:blur(60px) saturate(150%);
    will-change:transform;transform:translateZ(0);
    background:
      radial-gradient(circle at 18% 28%,rgba(105,88,255,.30),transparent 27%),
      radial-gradient(circle at 80% 20%,rgba(213,103,255,.22),transparent 24%),
      radial-gradient(circle at 52% 74%,rgba(76,229,255,.15),transparent 24%);
    animation:ccm3Aurora 16s ease-in-out infinite alternate;
  }
  .hcp3-beam,.hcp3-beam2{
    position:absolute;opacity:.10;filter:blur(9px);
    will-change:transform;transform:translateZ(0);
    background:linear-gradient(90deg,transparent,rgba(255,216,111,.38),rgba(100,233,255,.20),transparent);
  }
  .hcp3-beam{inset:-8% 12% auto -18%;height:34vh;transform:rotate(-12deg);animation:ccm3Beam 13s linear infinite;}
  .hcp3-beam2{inset:20% -20% auto 56%;height:28vh;transform:rotate(19deg);animation:ccm3Beam2 15s linear infinite;}
  .hcp3-grain{
    position:absolute;inset:0;opacity:.035;mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  }
  .hcp3-cursor{
    position:absolute;width:340px;height:340px;border-radius:50%;opacity:0;
    transform:translate(-50%,-50%);transition:opacity .4s ease;
    background:radial-gradient(circle,rgba(45,255,155,.10),rgba(100,233,255,.07) 28%,rgba(141,124,255,.05) 52%,transparent 72%);
  }
  @keyframes ccm3Aurora{0%{transform:translate3d(-2%,-2%,0) scale(1.02)}50%{transform:translate3d(2%,2%,0) scale(1.1)}100%{transform:translate3d(-1%,3%,0) scale(1.04)}}
  @keyframes ccm3Beam{0%{transform:translateX(-6%) rotate(-12deg)}50%{transform:translateX(8%) rotate(-9deg)}100%{transform:translateX(-1%) rotate(-12deg)}}
  @keyframes ccm3Beam2{0%{transform:translateX(0) rotate(19deg)}50%{transform:translateX(-8%) rotate(15deg)}100%{transform:translateX(1%) rotate(19deg)}}
  @keyframes ccm3Spin{to{transform:rotate(360deg)}}
  @keyframes ccm3Marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
  @keyframes ccm3Pulse{0%,100%{opacity:.45}50%{opacity:1}}
  @keyframes ccm3Scan{0%{transform:translateY(-120%)}100%{transform:translateY(260%)}}
  @keyframes ccm3Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes ccm3Float2{0%,100%{transform:translate3d(-50%,-50%,54px) rotate(-3deg)}50%{transform:translate3d(-50%,-54%,54px) rotate(3deg)}}
  @keyframes ccm3AdZoom{0%,100%{transform:scale(1) translateX(0)}50%{transform:scale(1.06) translateX(-8px)}}
  @keyframes ccm3Sweep{0%{transform:translateX(-120%) skewX(-22deg)}100%{transform:translateX(260%) skewX(-22deg)}}
  @keyframes ccm3Load{0%{transform:translateX(-38%)}50%{transform:translateX(54%)}100%{transform:translateX(-38%)}}
  @keyframes ccm3Scene{0%{transform:rotateX(-18deg) rotateY(0)}100%{transform:rotateX(-18deg) rotateY(360deg)}}
  @keyframes ccm3Orbit{0%,100%{opacity:.35}50%{opacity:1}}
  @keyframes hcp3Shimmer{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

  /* ── Shell ── */
  .home-cc-shell{
    width:min(1536px, calc(100% - 24px));
    height:calc(100% - 24px);
    margin:12px auto;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(10,15,23,.88),rgba(5,9,15,.92));
    box-shadow:0 34px 110px rgba(0,0,0,.58);
    position:relative;
    z-index:2;
    will-change:transform;
  }
  .home-cc-shell::after{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:5;
    background:linear-gradient(90deg,transparent,rgba(45,255,155,.72),rgba(100,233,255,.62),transparent);
    box-shadow:0 0 20px rgba(45,255,155,.2);
    animation:ccm3Pulse 2.4s ease-in-out infinite;
  }

  /* ── Top bar ── */
  .home-cc-topbar{
    height:72px;
    flex:0 0 72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px 0 20px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:rgba(4,8,14,.7);
  }
  .hcp-brand{display:flex;align-items:center;height:100%;overflow:hidden}
  .hcp-logo{
    height:118px;width:auto;object-fit:contain;object-position:left center;
    margin:-38px -14px -38px -18px;
    mix-blend-mode:screen;-webkit-user-drag:none;user-select:none;pointer-events:none;
  }
  .hcp-top-actions{display:flex;align-items:center;gap:10px}
  .hcp3-link{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;
    min-height:42px;padding:0 20px;
    border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
    color:#c9b8ff;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    transition:border-color .2s ease,color .2s ease,background .2s ease;
  }
  .hcp3-link:hover{border-color:rgba(255,216,111,.4);color:#ffd96f;}
  .hcp-upgrade{
    height:42px;padding:0 18px;
    display:inline-flex;align-items:center;gap:9px;
    font-weight:800;font-size:14px;color:#ffd96f;cursor:pointer;
    border:1px solid rgba(255,200,60,.5);
    background:linear-gradient(160deg,rgba(120,85,10,.55),rgba(60,40,5,.6));
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    box-shadow:0 0 18px rgba(255,190,40,.2);
    transition:180ms ease;
  }
  .hcp-upgrade svg{width:16px;height:16px}
  .hcp-upgrade:hover{border-color:rgba(255,215,94,.85);box-shadow:0 0 26px rgba(255,190,40,.35)}
  .hcp-profile{
    width:44px;height:44px;border-radius:50%;display:grid;place-items:center;position:relative;
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#f7faff;
    cursor:pointer;transition:180ms ease;
  }
  .hcp-profile svg{width:22px;height:22px}
  .hcp-profile:hover{border-color:rgba(100,233,255,.6);box-shadow:0 0 22px rgba(100,233,255,.25)}
  .hcp-profile:after{content:"";position:absolute;width:10px;height:10px;right:0;bottom:0;border-radius:50%;background:#2dff9b;border:2px solid #071021}

  /* ── Layout: left ad rail + main. The old model menu's column now hosts
     poster links to the /compare pages (model discovery lives in the top
     marquee, Explore Models and the studio rails). ── */
  .home-cc-body{
    flex:1 1 auto;min-height:0;
    display:grid;
    grid-template-columns:284px minmax(0,1fr);
  }

  /* ── Left ad rail: compare-page poster links ── */
  .hcp-adrail{
    border-right:1px solid rgba(255,255,255,.10);
    padding:16px 14px 18px;
    overflow-y:auto;
    display:flex;flex-direction:column;gap:14px;
    background:linear-gradient(180deg,rgba(8,12,20,.85),rgba(5,9,15,.8));
    scrollbar-width:thin;scrollbar-color:rgba(138,164,255,.25) transparent;
  }
  .hcp-adrail-head h3{margin:0 0 3px;font-size:12px;font-weight:800;letter-spacing:.18em;color:#f4f7ff;text-transform:uppercase}
  .hcp-adrail-head p{margin:0;font-size:11px;color:#94a3b8}
  .hcp-adrail-card{
    position:relative;display:block;flex:0 0 auto;overflow:hidden;
    border:1px solid rgba(255,255,255,.10);text-decoration:none;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    background:linear-gradient(160deg,rgba(17,22,42,.94),rgba(8,12,26,.97));
    transition:180ms ease;
  }
  /* Cards with real posters size to the art's own proportions — no fixed
     aspect box, so nothing gets cropped. Only the text-fallback cards keep a
     fixed shape (they have no natural height). */
  .hcp-adrail-card.no-img{aspect-ratio:1170/1000}
  .hcp-adrail-card:hover{transform:translateY(-2px);border-color:rgba(255,216,111,.5);box-shadow:0 12px 26px rgba(0,0,0,.35),0 0 18px rgba(255,216,111,.14)}
  .hcp-adrail-card img{width:100%;height:auto;display:block;-webkit-user-drag:none}
  .hcp-adrail-fallback{display:none}
  .hcp-adrail-card.no-img .hcp-adrail-fallback{
    display:flex;flex-direction:column;justify-content:center;gap:8px;
    position:absolute;inset:0;padding:16px 14px;text-align:center;color:#f7faff;
    background:
      radial-gradient(circle at 18% 12%,rgba(255,216,111,.12),transparent 42%),
      radial-gradient(circle at 84% 88%,rgba(100,233,255,.12),transparent 42%);
  }
  .hcp-adrail-fallback i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9fb1d8}
  .hcp-adrail-fallback b{display:flex;flex-direction:column;gap:2px;font-size:17px;line-height:1.2;font-weight:800}
  .hcp-adrail-fallback b em{font-style:normal;font-size:12px;font-weight:900;color:#ffd96f;letter-spacing:.2em}
  .hcp-adrail-fallback small{font-size:11.5px;line-height:1.45;color:#c7d0e4}
  .hcp-adrail-cta{font-size:11px;font-weight:800;color:#ffd96f;letter-spacing:.04em}
  .hcp-adrail-card:hover .hcp-adrail-cta{color:#ffe9ad}

  /* ── Main column ── */
  .hcp-main{position:relative;padding:0 28px 26px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(138,164,255,.25) transparent}

  /* Marquee model rail — full-bleed strip at the top of main; buttons live. */
  .hcp3-rail{
    height:100px;display:flex;align-items:center;overflow:hidden;
    margin:0 -28px 26px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(90deg,rgba(255,216,111,.035),rgba(255,255,255,.01),rgba(141,124,255,.035)),
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 48%);
    position:relative;
  }
  .hcp3-rail::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  }
  .hcp3-rail:active .ccm3-logoTrack{animation-play-state:paused;}
  .ccm3-logoTrack{display:flex;align-items:center;width:max-content;animation:ccm3Marquee 26s linear infinite;padding-left:14px;}
  .ccm3-logoBtn{
    width:168px;height:72px;flex:0 0 auto;margin-right:14px;position:relative;
    display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;padding:0 14px 0 10px;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    border:1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 18%,rgba(255,255,255,.015) 60%,rgba(0,0,0,.18)),
      linear-gradient(145deg,rgba(16,20,28,.96),rgba(8,12,18,.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -16px 28px rgba(0,0,0,.24),0 14px 32px rgba(0,0,0,.20);
    overflow:hidden;font:inherit;text-align:left;cursor:pointer;
    transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease;
  }
  .ccm3-logoBtn:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px);}
  .ccm3-logoBtn:active{transform:scale(.96);}
  .ccm3-edge{
    position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,currentColor,transparent 22%,transparent 78%,currentColor);
    opacity:.9;filter:drop-shadow(0 0 8px currentColor);
  }
  .ccm3-logoIcon{
    width:40px;height:40px;position:relative;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.11);
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    background:
      linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 34%,rgba(0,0,0,.18)),
      radial-gradient(circle at 32% 22%,rgba(255,255,255,.16),transparent 34%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  }
  .ccm3-logoIcon svg{width:20px;height:20px;position:relative;z-index:1;}
  .ccm3-glyph{position:relative;z-index:1;font-size:13px;font-weight:900;letter-spacing:.04em;font-style:normal;}
  .ccm3-logoInfo{position:relative;z-index:1;min-width:0;padding-right:2px;}
  .ccm3-logoInfo strong{display:block;font-size:11.5px;line-height:1.12;color:#f7faff;}
  .ccm3-logoInfo small{display:block;margin-top:5px;font-size:8px;line-height:1.15;letter-spacing:.10em;text-transform:uppercase;color:#aeb9d4;}
  .ccm3-logoBtn.gold{color:#ffd96f;} .ccm3-logoBtn.blue{color:#8fcaff;}
  .ccm3-logoBtn.purple{color:#dc96ff;} .ccm3-logoBtn.green{color:#96ffd2;} .ccm3-logoBtn.cyan{color:#64e9ff;}

  /* ── Hero: copy left, reactor right ── */
  .hcp3-hero{
    position:relative;z-index:1;max-width:1120px;margin:6px auto 30px;
    display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;text-align:left;
  }
  .ccm3-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:830;letter-spacing:.16em;text-transform:uppercase;color:#dce5fb;}
  .ccm3-kicker i{width:8px;height:8px;background:radial-gradient(circle,#fff,#2dff9b 58%,transparent 72%);box-shadow:0 0 12px rgba(45,255,155,.72);}
  .hcp-h1{margin:12px 0 0;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(44px,4.6vw,68px);line-height:1;letter-spacing:-.05em;font-weight:700;color:#fff}
  .hcp-h1 .grad{
    background:linear-gradient(90deg,#fff 0%,#f8ddb2 18%,#ffd86f 38%,#a5d2ff 58%,#8d7cff 78%,#d56cff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hcp-sub{margin:16px 0 0;max-width:520px;color:#ccd4e7;font-size:16px;line-height:1.6}
  .hcp3-heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .ccm3-tagRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .ccm3-tag{
    padding:8px 11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);
    font-size:10px;font-weight:780;letter-spacing:.08em;text-transform:uppercase;color:#dce5f8;
  }

  /* Shared beveled buttons + hover shimmer + press flash */
  .ccm3-btn,.ccm3-tool{
    position:relative;overflow:hidden;
    min-height:48px;padding:12px 22px;border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.025);display:inline-flex;align-items:center;justify-content:center;
    gap:9px;font-size:13px;font-weight:850;letter-spacing:.03em;color:#f7faff;cursor:pointer;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background .22s ease,color .22s ease;
    text-align:center;text-decoration:none;
  }
  .ccm3-btn::before,.ccm3-tool::before,.ccm3-logoBtn::before,.hcp-studio-btn::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(112deg,transparent 16%,rgba(255,255,255,.16) 46%,transparent 74%);
    transform:translateX(-130%);
  }
  .ccm3-btn:hover::before,.ccm3-tool:hover::before,.ccm3-logoBtn:hover::before,.hcp-studio-btn:hover::before{animation:hcp3Shimmer .82s cubic-bezier(.2,.8,.2,1) forwards}
  .ccm3-btn.primary{background:linear-gradient(135deg,rgba(255,205,105,.18),rgba(141,124,255,.22) 54%,rgba(213,108,255,.18));border-color:rgba(255,216,111,.24);}
  .ccm3-btn:hover{border-color:rgba(255,255,255,.28);}
  .ccm3-tool{border-color:rgba(45,255,155,.28);background:linear-gradient(135deg,rgba(18,140,88,.44),rgba(7,55,33,.44));box-shadow:0 0 20px rgba(45,255,155,.14),inset 0 1px 0 rgba(255,255,255,.05);}
  .ccm3-btn:active,.ccm3-tool:active,.ccm3-node:active,.ccm3-ad:active{transform:scale(.985);}
  .is-pressed{
    color:#07130d!important;
    background:linear-gradient(135deg,#76ffc2,#28ff98)!important;
    border-color:rgba(186,255,222,.98)!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 0 24px rgba(45,255,155,.58)!important;
  }
  .is-pressed *{color:#07130d!important;}

  /* ── Reactor visual (larger for desktop) ── */
  .hcp3-heroVisual{position:relative;height:380px;display:flex;align-items:center;justify-content:center;}
  .ccm3-reactor{position:relative;width:280px;height:280px;}
  .ccm3-ringA,.ccm3-ringB,.ccm3-ringC{position:absolute;left:50%;top:50%;translate:-50% -50%;border:1px solid rgba(255,255,255,.08);}
  .ccm3-ringA{width:276px;height:108px;border-color:rgba(255,216,111,.44);animation:ccm3Spin 10s linear infinite;}
  .ccm3-ringB{width:238px;height:238px;border-style:dashed;border-color:rgba(141,124,255,.22);animation:ccm3Spin 16s linear infinite reverse;}
  .ccm3-ringC{width:312px;height:312px;border-color:rgba(255,255,255,.05);}
  .ccm3-core{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);
    width:184px;height:184px;border:1px solid rgba(255,255,255,.13);
    background:linear-gradient(180deg,rgba(18,22,31,.99),rgba(8,11,18,.97));
    box-shadow:0 0 50px rgba(255,216,111,.11),0 0 100px rgba(141,124,255,.15);
  }
  .ccm3-core::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.07);}
  .ccm3-coreInner{
    position:absolute;inset:38px;display:grid;place-items:center;transform:rotate(-45deg);
    border:1px solid rgba(255,255,255,.11);overflow:hidden;
    background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.24),rgba(255,216,111,.16) 18%,rgba(119,91,255,.2) 40%,rgba(8,10,18,.97) 68%);
  }
  .ccm3-coreInner::after{
    content:"";position:absolute;left:0;right:0;top:-80%;height:48%;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);
    filter:blur(10px);animation:ccm3Scan 3.8s ease-in-out infinite;
  }
  .ccm3-coreInner svg{width:76px;height:76px;position:relative;z-index:1;color:#fff;}
  .ccm3-node{
    position:absolute;width:56px;height:56px;display:grid;place-items:center;cursor:pointer;
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
    border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    animation:ccm3Float 5.8s ease-in-out infinite;
    font-size:13px;font-weight:900;transition:border-color .2s ease;
  }
  .ccm3-node:hover{border-color:currentColor;}
  .ccm3-node.n1{left:-18px;top:28px;color:#ffd96f;animation-delay:.2s;}
  .ccm3-node.n2{right:-18px;top:12px;color:#8fcaff;animation-delay:1.2s;}
  .ccm3-node.n3{left:0;bottom:16px;color:#dc96ff;animation-delay:1.8s;}
  .ccm3-node.n4{right:-4px;bottom:20px;color:#96ffd2;animation-delay:2.4s;}

  /* ── Studio cards (same grid + bindings, V3 skin) ── */
  .hcp-studio-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1120px;margin:0 auto}
  .hcp-studio-card{
    --accent:#8d7cff;position:relative;min-height:350px;
    border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
    background:
      radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 40%),
      linear-gradient(180deg,rgba(16,20,37,.94),rgba(8,11,20,.97));
    box-shadow:0 24px 58px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.05);
    padding:22px 20px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;cursor:pointer;transition:220ms ease;
  }
  .hcp-studio-card::after{
    content:"";position:absolute;left:0;right:0;top:-80%;height:40%;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.05),transparent);
    filter:blur(8px);transform:translateY(-120%);
  }
  .hcp-studio-card:hover::after{animation:ccm3Scan 1.4s ease-out;}
  .hcp-studio-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 75%,transparent);box-shadow:0 30px 78px rgba(0,0,0,.46),0 0 34px color-mix(in srgb,var(--accent) 26%,transparent)}
  .hcp-studio-card.image{--accent:#8fcaff}
  .hcp-studio-card.video{--accent:#8d7cff}
  .hcp-studio-card.music{--accent:#ffd96f}
  .hcp-studio-card.gpt{--accent:#2dff9b}
  .hcp-studio-visual{
    width:140px;height:140px;margin:6px auto 12px;display:grid;place-items:center;
    border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 34px color-mix(in srgb,var(--accent) 24%,transparent);
  }
  .hcp-studio-visual svg{width:66px;height:66px;color:#fff;stroke-width:1.4;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 65%,transparent))}
  .hcp-studio-card h2{margin:8px 0 7px;font-family:"Space Grotesk",Inter,sans-serif;font-size:23px;letter-spacing:-.02em;color:#fff;font-weight:700}
  .hcp-studio-card p{margin:0;min-height:48px;color:#c7d0e4;font-size:13.5px;line-height:1.5}
  .hcp-studio-btn{
    position:relative;overflow:hidden;
    width:100%;height:46px;margin-top:auto;color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 26%,transparent),rgba(255,255,255,.03));
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:180ms ease;
  }
  .hcp-studio-btn:hover{border-color:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 30%,transparent)}
  .hcp-studio-btn .arrow{font-size:15px;line-height:1}

  /* ── Ad stage + 3D lab side by side ── */
  .hcp3-duo{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1120px;margin:26px auto 0;align-items:stretch;}
  .ccm3-ad{
    position:relative;display:block;width:100%;overflow:hidden;cursor:pointer;
    border:1px solid rgba(255,255,255,.08);padding:14px 16px 18px;text-align:left;color:#f7faff;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
    background:linear-gradient(135deg,rgba(17,22,42,.94),rgba(8,12,26,.97));
    transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease;
  }
  .ccm3-ad:hover{border-color:rgba(100,233,255,.4);}
  .ccm3-adBackdrop{
    position:absolute;inset:0;
    background:
      radial-gradient(circle at 20% 20%,rgba(84,215,255,.28),transparent 22%),
      radial-gradient(circle at 78% 72%,rgba(255,92,113,.28),transparent 20%),
      linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.04) 35%,transparent 37%,transparent 62%,rgba(255,255,255,.04) 63%,transparent 65%);
    animation:ccm3AdZoom 8.8s ease-in-out infinite;
  }
  .ccm3-adHUD{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;z-index:2;}
  .ccm3-hudTag,.ccm3-hudLive{
    min-height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.08);display:inline-flex;align-items:center;
    background:rgba(0,0,0,.24);font-size:10px;font-weight:820;letter-spacing:.15em;text-transform:uppercase;color:#f4f7ff;
  }
  .ccm3-hudLive i{width:8px;height:8px;margin-right:8px;background:radial-gradient(circle,#fff,#ff5970 58%,transparent 72%);box-shadow:0 0 10px rgba(255,92,113,.68);}
  .ccm3-adContent{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:16px;align-items:end;margin-top:22px;z-index:2;}
  .ccm3-adText b{display:block;font-size:28px;line-height:1;font-weight:900;letter-spacing:-.035em;}
  .ccm3-adText b .g{background:linear-gradient(90deg,#fff,#ffd86f,#8fcaff);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .ccm3-adText small{display:block;margin-top:11px;font-size:12px;line-height:1.58;color:#d7dff2;max-width:230px;}
  .ccm3-adPreview{position:relative;display:block;height:150px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.012));}
  .ccm3-adPreview::before{
    content:"";position:absolute;inset:0;opacity:.45;
    background:
      linear-gradient(transparent 94%,rgba(255,255,255,.08) 94%),
      linear-gradient(90deg,transparent 94%,rgba(255,255,255,.08) 94%);
    background-size:100% 22px,22px 100%;
  }
  .ccm3-adPreview::after{
    content:"";position:absolute;left:-46%;top:0;bottom:0;width:48%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    animation:ccm3Sweep 3.8s linear infinite;
  }
  .ccm3-adPlay{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
    width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  }
  .ccm3-adPlay::before{content:"";margin-left:4px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;}
  .ccm3-adProgress{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.14);}
  .ccm3-adProgress span{position:absolute;left:0;top:0;bottom:0;width:36%;background:linear-gradient(90deg,#2dff9b,#afffda);box-shadow:0 0 16px rgba(45,255,155,.48);animation:ccm3Load 4.1s ease-in-out infinite;}

  .hcp3-lab{min-width:0;}
  .ccm3-viewer{
    position:relative;height:100%;overflow:hidden;perspective:1200px;padding-top:14px;
    border:1px solid rgba(255,255,255,.08);
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
    background:
      radial-gradient(circle at 50% 30%,rgba(255,216,111,.055),transparent 20%),
      radial-gradient(circle at 50% 62%,rgba(45,255,155,.05),transparent 24%),
      linear-gradient(180deg,rgba(17,22,34,.95),rgba(7,11,17,.99));
    display:flex;flex-direction:column;
  }
  .ccm3-viewer::before{
    content:"";position:absolute;inset:0;opacity:.28;pointer-events:none;
    background:
      linear-gradient(transparent 95%,rgba(255,255,255,.06) 95%),
      linear-gradient(90deg,transparent 95%,rgba(255,255,255,.05) 95%);
    background-size:100% 24px,24px 100%;
  }
  .ccm3-viewerHUD{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:0 14px;z-index:6;}
  .ccm3-viewerStage{
    position:relative;flex:1 1 auto;min-height:250px;margin-top:4px;
    display:flex;align-items:center;justify-content:center;
    transform-style:preserve-3d;
  }
  .ccm3-scene{
    position:relative;width:230px;height:230px;transform-style:preserve-3d;
    animation:ccm3Scene 18s linear infinite;
  }
  .ccm3-platform{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(90deg);
    width:226px;height:226px;border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 22px rgba(100,233,255,.12),inset 0 0 34px rgba(141,124,255,.08);
  }
  .ccm3-platform::before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.05);}
  .ccm3-platform::after{content:"";position:absolute;inset:42px;border:1px solid rgba(45,255,155,.10);}
  .ccm3-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.14);border-radius:50%;animation:ccm3Orbit 2.8s ease-in-out infinite;}
  .ccm3-orbit.o1{width:186px;height:186px;transform:translate3d(-50%,-50%,0) rotateX(70deg);}
  .ccm3-orbit.o2{width:156px;height:156px;transform:translate3d(-50%,-50%,0) rotateY(70deg);animation-delay:.7s;}
  .ccm3-orbit.o3{width:202px;height:88px;transform:translate3d(-50%,-50%,34px) rotateZ(24deg);animation-delay:1.2s;}
  .ccm3-cube{
    position:absolute;left:50%;top:50%;width:100px;height:100px;transform-style:preserve-3d;
    transform:translate3d(-50%,-50%,54px);animation:ccm3Float2 3.8s ease-in-out infinite;
  }
  .ccm3-cube i{
    position:absolute;inset:0;border:2px solid rgba(183,196,255,.96);
    background:rgba(141,124,255,.08);box-shadow:inset 0 0 34px rgba(100,233,255,.08);
  }
  .ccm3-cube .f1{transform:translateZ(50px);} .ccm3-cube .f2{transform:rotateY(180deg) translateZ(50px);}
  .ccm3-cube .f3{transform:rotateY(90deg) translateZ(50px);} .ccm3-cube .f4{transform:rotateY(-90deg) translateZ(50px);}
  .ccm3-cube .f5{transform:rotateX(90deg) translateZ(50px);} .ccm3-cube .f6{transform:rotateX(-90deg) translateZ(50px);}
  .ccm3-sat{
    position:absolute;width:42px;height:42px;display:grid;place-items:center;z-index:5;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
    box-shadow:0 0 20px rgba(100,233,255,.12);
    animation:ccm3Float 4.6s ease-in-out infinite;
  }
  .ccm3-sat svg{width:18px;height:18px;}
  .ccm3-sat.s1{left:34px;top:64px;color:#ffd96f;}
  .ccm3-sat.s2{right:32px;top:92px;color:#64e9ff;animation-delay:1.1s;}
  .ccm3-sat.s3{left:64px;bottom:64px;color:#d56cff;animation-delay:1.8s;}
  .ccm3-sat.s4{right:52px;bottom:78px;color:#2dff9b;animation-delay:2.4s;}
  .ccm3-particle{
    position:absolute;width:10px;height:10px;border-radius:50%;z-index:5;
    background:radial-gradient(circle,#fff,#64e9ff 58%,transparent 72%);box-shadow:0 0 14px rgba(100,233,255,.72);
  }
  .ccm3-particle.p1{left:12%;top:26%;}
  .ccm3-particle.p2{right:16%;top:16%;background:radial-gradient(circle,#fff,#ffd96f 58%,transparent 72%);box-shadow:0 0 14px rgba(255,216,111,.7);}
  .ccm3-particle.p3{left:18%;bottom:16%;background:radial-gradient(circle,#fff,#d56cff 58%,transparent 72%);box-shadow:0 0 14px rgba(213,108,255,.66);}
  .ccm3-particle.p4{right:12%;bottom:22%;}
  .ccm3-viewerText{
    position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:15px 16px 17px;border-top:1px solid rgba(255,255,255,.055);
    background:linear-gradient(180deg,rgba(4,8,14,.26),rgba(4,8,14,.7));z-index:6;
  }
  .ccm3-viewerText strong{display:block;font-size:15px;line-height:1.25;letter-spacing:-.02em;}
  .ccm3-viewerText small{display:block;margin-top:6px;color:#c7d0e4;font-size:11px;line-height:1.48;max-width:245px;}

  /* ── Trust band / CTA / footer ── */
  .hcp-trust{
    position:relative;z-index:1;max-width:1120px;margin:26px auto 0;min-height:104px;
    border:1px solid rgba(255,255,255,.08);
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
    background:rgba(13,17,30,.72);padding:20px 24px;
    display:grid;grid-template-columns:1.6fr repeat(4,minmax(90px,.55fr));align-items:center;gap:18px;
  }
  .hcp-trust-copy h3{margin:0 0 7px;font-size:18px;color:#fff}
  .hcp-trust-copy p{margin:0;color:#8a94b0;font-size:13px}
  .hcp-metric{padding-left:18px;border-left:1px solid rgba(255,255,255,.08)}
  .hcp-metric strong{display:block;font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;line-height:1;margin-bottom:7px;color:#fff}
  .hcp-metric strong.gold{color:#ffd96f}
  .hcp-metric span{color:#8a94b0;font-size:12px}

  .hcp3-cta{
    position:relative;z-index:1;max-width:1120px;margin:18px auto 0;
    border:1px solid rgba(255,255,255,.08);
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
    background:rgba(13,17,30,.72);padding:18px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .hcp3-ctaCopy strong{display:block;font-size:16px;color:#fff}
  .hcp3-ctaCopy small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:#bcc5dc}

  .hcp3-footer{
    position:relative;z-index:1;max-width:1120px;margin:20px auto 0;
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
  }
  .ccm-domain{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 22px;border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(16,16,38,.8);
    color:#c9cde0;font-size:12px;font-weight:700;
  }
  .ccm-domain svg{width:12px;height:12px;}
  .hcp3-copyright{font-size:11px;color:#8a90a8;font-weight:600;}

  /* Keyboard focus (accessibility) */
  #homeCommandCenter .home-cc-shell button:focus-visible,
  #homeCommandCenter .home-cc-shell a:focus-visible{outline:2px solid rgba(106,142,255,.72);outline-offset:2px}

  /* Adaptive lite mode: applied by JS when the machine can't hold the frame
     rate — drops the heavy ambient layers, keeps the design + interactions. */
  #homeCommandCenter.hcp3-lite .hcp3-aurora,
  #homeCommandCenter.hcp3-lite .hcp3-beam,
  #homeCommandCenter.hcp3-lite .hcp3-beam2,
  #homeCommandCenter.hcp3-lite .hcp3-net{display:none!important;}
  #homeCommandCenter.hcp3-lite .ccm3-adBackdrop{animation:none!important;}

  /* Reduced motion: kill every decorative animation on the PC home. */
  @media (prefers-reduced-motion:reduce){
    #homeCommandCenter *,#homeCommandCenter *::before,#homeCommandCenter *::after{animation:none!important;transition:none!important;}
  }
}

/* Mobile uses its own FX stack inside #homeCcMobile. */
@media (max-width:900px){
  .hcp3-fx{display:none!important;}
}

/* Narrower desktops */
@media (max-width:1240px) and (min-width:901px){
  .home-cc-body{grid-template-columns:248px minmax(0,1fr)}
  .hcp-studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hcp-studio-card{min-height:320px}
  .hcp3-hero{grid-template-columns:1fr;text-align:left}
  .hcp3-heroVisual{height:320px}
  .hcp3-duo{grid-template-columns:1fr}
  .hcp-trust{grid-template-columns:1fr 1fr 1fr}
  .hcp-trust-copy{grid-column:1/-1}
}

/* The account drawer/modals live at z 190-240 and have to clear whatever
   overlay is on screen. That used to be the command center at z 900, so this
   ladder sat at 1900-2400. The Developer Studio workspace is ALSO fixed
   inset:0, at 2147483000 with !important in four stylesheets — so from inside
   the studio every one of these opened underneath it. Asking a guest to sign
   in did nothing visible: the modal was there, painted below the studio.
   Raised above the studio, still below the accessibility button (…210) and
   the share modal (…300), with the internal order unchanged. */
.ml-dash-backdrop{z-index:2147483010!important;}
.ml-drawer{z-index:2147483020!important;}
.ml-modal{z-index:2147483030!important;}
.ml-center-modal{z-index:2147483030!important;}
.mh-gallery-modal{z-index:2147483040!important;}
.mh-lightbox{z-index:2147483050!important;}
.ml-login-modal{z-index:2147483060!important;}

/* V2 user menu: the account drawer opens from the RIGHT (under the
   top-right profile button) with the dark neon look. Same drawer, same
   data — balance, credits used, history, billing, support, sign out. */
.ml-drawer{
  left:auto!important;
  right:0!important;
  transform:translateX(105%)!important;
  background:
    radial-gradient(500px 300px at 90% -5%, rgba(90,70,200,.25), transparent 60%),
    linear-gradient(180deg,#0c0d1e 0%,#0a0b18 100%)!important;
  color:#e8eaf3!important;
  border-left:1px solid rgba(140,120,255,.25)!important;
  box-shadow:-28px 0 70px rgba(0,0,0,.55)!important;
}
.ml-drawer.open{transform:translateX(0)!important;}
.ml-drawer .ml-panel{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.07);}
.ml-drawer .ml-stat{background:rgba(10,10,26,.6)!important;border:1px solid rgba(255,255,255,.06);}
.ml-drawer .ml-stat span{color:#9aa0b5!important;}
.ml-drawer .ml-row{border-bottom-color:rgba(255,255,255,.08)!important;}
.ml-drawer .ml-user h3{color:#fff!important;}
.ml-drawer .ml-user p{color:#9aa0b5!important;}
.ml-drawer .ml-click:hover b{color:#8b7cff!important;}
.ml-drawer .ml-avatar{background:#101223!important;border:1px solid rgba(140,120,255,.3);}

/* ── V2 desktop tool cluster (studios) ─────────────────────────────────
   Replaces the old V1 floating icons (burger / balance chip / Upgrade) on
   PC with V2-level styling. Burger opens My Library; balance mirrors the
   live credit amount; Upgrade opens checkout; profile opens the account
   drawer. Hidden on the V2 home (it has its own header) and on mobile
   (the mobile top bar has its own controls). */
@media (min-width:901px){
  .ml-top-tools{display:none!important;}
  #homeCcTools{
    position:fixed;top:14px;left:16px;right:16px;z-index:1600;
    display:flex;justify-content:space-between;align-items:flex-start;
    pointer-events:none;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  #homeCcTools>*{pointer-events:auto;}
  body.home-cc-active #homeCcTools{display:none!important;}
  .ccp-btn{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,11,22,.74);
    backdrop-filter:blur(14px);
    color:#dfe2ee;cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    transition:border-color .18s ease,background .18s ease;
  }
  .ccp-btn:hover{border-color:rgba(255,255,255,.3);background:rgba(22,24,44,.85);}
  .ccp-btn svg{width:19px;height:19px;}
  .ccp-profile{border-radius:50%;}
  .ccp-right{display:flex;align-items:center;gap:10px;}
  /* Studio-look pills: dark glass + violet accent, matching the V2/V3 studio
     panels (the old green-money / gold-crown look clashed inside studios). */
  .ccp-balance{
    height:42px;
    display:inline-flex;align-items:center;gap:8px;
    padding:0 16px;border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(15,17,27,.82);
    backdrop-filter:blur(14px);
    color:#e7ebff;font-weight:800;font-size:14px;
    cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);
    transition:border-color .18s ease;
  }
  .ccp-balance:hover{border-color:rgba(139,92,246,.55);}
  .ccp-balance .flame{font-size:13px;}
  .ccp-upgrade{
    height:42px;
    display:inline-flex;align-items:center;gap:7px;
    padding:0 18px;border-radius:999px;
    border:1px solid rgba(139,92,246,.55);
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    backdrop-filter:blur(14px);
    color:#fff;font-weight:800;font-size:13.5px;
    cursor:pointer;box-shadow:0 8px 24px rgba(109,40,217,.35);
    transition:border-color .18s ease,box-shadow .18s ease;
  }
  .ccp-upgrade:hover{border-color:rgba(196,167,255,.9);box-shadow:0 10px 28px rgba(139,92,246,.45);}
  .ccp-upgrade svg{width:15px;height:15px;}
}
@media (max-width:900px){
  #homeCcTools{display:none!important;}
}