/* Midx Responsive Creator Instrument v8 — persistent client route shell, symmetric RAF tilt, clean lead, aligned dashboard rails, synchronized cursor. */
:root{
  --midx-pointer-x:50vw;
  --midx-pointer-y:42vh;
  --midx-signal:rgba(53,200,255,.26);
  --midx-signal-strong:rgba(126,229,255,.58);
  --midx-instrument-ease:cubic-bezier(.22,1,.36,1);
}

/* Visible graphite/navy depth. The body fill stays transparent so the route field
   and orbit renderer are composited above the base instead of buried under it. */
html{background:#06111c!important}
html[data-midx-route] body{background:transparent!important;isolation:isolate}
html[data-midx-route] body::before{
  z-index:-3!important;
  background:
    radial-gradient(ellipse at 78% 18%,rgba(0,144,255,.28),transparent 36%),
    radial-gradient(ellipse at 14% 76%,rgba(18,112,174,.18),transparent 40%),
    linear-gradient(145deg,#071522 0%,#081a29 46%,#040b13 100%)!important;
}
html[data-midx-route="public-home"] body::before,
html[data-midx-route="dashboard"] body::before{
  background:
    radial-gradient(ellipse at 77% 27%,rgba(0,159,255,.34),transparent 34%),
    radial-gradient(ellipse at 23% 72%,rgba(20,125,187,.16),transparent 38%),
    linear-gradient(145deg,#071421 0%,#091b2a 50%,#040a12 100%)!important;
}
html[data-midx-route="upload"] body::before{
  background:
    radial-gradient(ellipse at 50% 45%,rgba(0,156,255,.27),transparent 32%),
    radial-gradient(ellipse at 88% 12%,rgba(22,105,178,.18),transparent 35%),
    linear-gradient(150deg,#06131f 0%,#0a1d2c 48%,#040b13 100%)!important;
}
html[data-midx-route="account"] body::before{
  background:
    radial-gradient(ellipse at 72% 30%,rgba(0,151,255,.3),transparent 34%),
    radial-gradient(ellipse at 12% 82%,rgba(29,107,161,.15),transparent 38%),
    linear-gradient(145deg,#06131f 0%,#091a29 48%,#040b13 100%)!important;
}
html[data-midx-route] body>.bg{
  z-index:-2!important;
  background:
    radial-gradient(circle at 76% 0%,rgba(0,153,255,.18),transparent 35%),
    radial-gradient(circle at 10% 78%,rgba(35,146,207,.1),transparent 36%),
    linear-gradient(180deg,rgba(5,15,25,.32),rgba(6,20,32,.2) 52%,rgba(3,10,17,.36))!important;
}
html[data-midx-route="dashboard"] body>.bg{
  z-index:-3!important;
  background:linear-gradient(90deg,rgba(3,6,10,.91) 0%,rgba(3,6,10,.66) 46%,rgba(3,6,10,.36) 100%)!important;
}
html[data-midx-route="dashboard"] body>.grain{
  position:fixed;z-index:-2;inset:0;pointer-events:none;opacity:.035;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

/* Static technical field: the existing Canvas remains the only RAF engine. */
html[data-midx-route] body::after{
  content:""!important;position:fixed!important;inset:0!important;z-index:-2!important;pointer-events:none!important;opacity:.42!important;
  background-image:linear-gradient(rgba(103,204,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(103,204,255,.09) 1px,transparent 1px),linear-gradient(rgba(103,204,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(103,204,255,.032) 1px,transparent 1px)!important;
  background-size:72px 72px,72px 72px,18px 18px,18px 18px!important;background-position:calc(50% - 1px) calc(50% - 1px)!important;
  -webkit-mask-image:radial-gradient(ellipse 82% 76% at 58% 44%,#000 12%,rgba(0,0,0,.84) 48%,transparent 100%)!important;mask-image:radial-gradient(ellipse 82% 76% at 58% 44%,#000 12%,rgba(0,0,0,.84) 48%,transparent 100%)!important;
}
/* Keep the workspace landing grid composited exactly like the public home grid. */
html[data-midx-route="public-home"] body::after,
html[data-midx-route="dashboard"] body::after,
html[data-midx-route="upload"] body::after{mix-blend-mode:normal!important}


.midx-ambient-canvas,.ambient-canvas{
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  width:100vw!important;
  height:100dvh!important;
  pointer-events:none!important;
  opacity:.96;
  mix-blend-mode:screen;
}

/* Approved compact cursor. Position is written directly from each pointer event. */
.midx-cursor-dot,.midx-cursor-ring{position:fixed;z-index:2147483000;left:0;top:0;display:none;pointer-events:none;opacity:0;will-change:transform,opacity}
.midx-cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#effcff;box-shadow:0 0 10px rgba(80,213,255,.9),0 0 22px rgba(0,153,255,.35)}
.midx-cursor-ring{width:26px;height:26px;margin:-13px 0 0 -13px;transition:width .2s var(--midx-instrument-ease),height .2s var(--midx-instrument-ease),margin .2s var(--midx-instrument-ease),opacity .15s ease}
.midx-cursor-ring::before{content:"";position:absolute;inset:0;border:1px solid rgba(146,228,255,.62);border-radius:9px;transform:rotate(45deg);background:rgba(6,24,36,.055);box-shadow:0 0 18px rgba(0,153,255,.1),inset 0 0 14px rgba(75,211,255,.035);transition:border-radius .2s var(--midx-instrument-ease),border-color .18s ease,background .18s ease}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 html.midx-cursor-ready,html.midx-cursor-ready body,html.midx-cursor-ready a,html.midx-cursor-ready button,html.midx-cursor-ready [role="button"],html.midx-cursor-ready label{cursor:none!important}
 html.midx-cursor-ready textarea,html.midx-cursor-ready select,html.midx-cursor-ready input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]){cursor:auto!important}
 .midx-cursor-dot,.midx-cursor-ring{display:block}
 html.midx-cursor-active .midx-cursor-dot,html.midx-cursor-active .midx-cursor-ring{opacity:1}
 /* The persistent top document becomes the shell after the first route click.
    Its cursor must never sit above the active same-origin iframe. */
 html.midx-shell-active > body > .midx-cursor-dot,html.midx-shell-active > body > .midx-cursor-ring{display:none!important;opacity:0!important}
 html.midx-cursor-suspended .midx-cursor-dot,html.midx-cursor-suspended .midx-cursor-ring{opacity:0!important;transition:none!important}
 html.midx-cursor-native .midx-cursor-dot,html.midx-cursor-native .midx-cursor-ring{opacity:0!important}
 html[data-midx-cursor="interactive"] .midx-cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px}
 html[data-midx-cursor="interactive"] .midx-cursor-ring::before{border-radius:50%;border-color:rgba(174,239,255,.86);background:rgba(7,31,45,.15)}
 html.midx-cursor-down .midx-cursor-ring{width:20px;height:20px;margin:-10px 0 0 -10px}
 html.midx-cursor-down .midx-cursor-ring::before{border-radius:7px}
}

.midx-pointer-light{
  position:absolute;
  z-index:4;
  left:0;
  top:0;
  width:340px;
  height:340px;
  margin:-170px 0 0 -170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(98,218,255,.13),rgba(0,140,255,.045) 34%,transparent 70%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transform:translate3d(var(--midx-light-x,50%),var(--midx-light-y,50%),0);
  transition:opacity .28s ease;
  will-change:transform;
}
.midx-reactive-surface:hover>.midx-pointer-light,
.midx-reactive-surface:focus-within>.midx-pointer-light{opacity:1}
.select-panel>.midx-pointer-light,.launch-panel>.midx-pointer-light{
  background:radial-gradient(circle,rgba(0,153,255,.11),rgba(13,126,161,.035) 38%,transparent 70%);
  mix-blend-mode:multiply;
}

.midx-magnetic{
  translate:none;
}
.midx-tilt{
  --midx-rx:0deg;
  --midx-ry:0deg;
  --midx-lift:0px;
  transform:perspective(1100px) translate3d(0,var(--midx-lift),0) rotateX(var(--midx-rx)) rotateY(var(--midx-ry))!important;
  transform-style:preserve-3d;
  will-change:transform;
}
.midx-magnetic:focus-visible,.midx-tilt:focus-within{
  --midx-mx:0px;--midx-my:0px;--midx-rx:0deg;--midx-ry:0deg;--midx-lift:0px;
}

/* One fixed desktop header contract across every product route. */
@media(min-width:761px){
 body.home-page>header.nav,body.upload-page>header.nav,body.account-page>.app>header.nav,html[data-midx-route="public-home"] body>header.site-header{position:fixed!important;z-index:120!important;top:18px!important;left:50%!important;right:auto!important;width:min(1240px,calc(100vw - 48px))!important;height:68px!important;min-height:68px!important;margin:0!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;transform:translateX(-50%)!important;border:1px solid rgba(137,208,255,.17)!important;border-radius:24px!important;background:rgba(4,13,21,.82)!important;box-shadow:0 18px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055)!important;backdrop-filter:blur(24px) saturate(135%)!important;-webkit-backdrop-filter:blur(24px) saturate(135%)!important}
 body.home-page>header.nav>.brand,body.upload-page>header.nav>.brand,body.account-page>.app>header.nav>.brand,html[data-midx-route="public-home"] body>header.site-header>.brand{width:86px!important;min-width:86px!important;height:44px!important;display:flex!important;align-items:center!important}
 html[data-midx-route="public-home"] .site-header .header-nav{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}
 html[data-midx-route="public-home"] .site-header .workspace-link{margin-left:auto!important}
 body.home-page .wrap{margin:86px auto 0!important}body.upload-page .shell{margin:86px auto 0!important}body.account-page>.app{padding-top:86px!important}
 body.home-page .hero-inner{grid-template-rows:none!important}
 body.home-page .hero-inner>h1{position:absolute!important;left:0!important;top:90px!important;width:min(100%,410px)!important;max-width:410px!important;margin:0!important;padding:42px 0 0!important;font-size:clamp(78px,6.6vw,102px)!important;line-height:.8!important;letter-spacing:-.088em!important;font-weight:850!important}
 body.home-page .hero-inner>h1::before{content:"CREATOR WORKSPACE  /  01";position:absolute;left:2px;top:0;color:rgba(126,224,255,.78);font:700 9px/1 "Azeret Mono",ui-monospace,monospace;letter-spacing:.18em}
 body.home-page .hero-inner>h1::after{display:none!important;content:none!important}
 body.home-page .desktop-title{display:inline-block!important;max-width:none!important;background:linear-gradient(110deg,#f7fbff 4%,#f7fbff 62%,#74ddff 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:0 0 42px rgba(0,153,255,.11)}
 body.home-page .desktop-title::after{display:none!important;content:none!important}
 body.home-page .lead{position:absolute!important;left:0!important;top:230px!important;width:min(100%,342px)!important;max-width:342px!important;margin:0!important;padding:0!important;border:0!important;color:rgba(222,234,242,.68)!important;font-size:15px!important;line-height:1.65!important}
 body.home-page .workspace-brief{position:absolute!important;left:0!important;top:auto!important;bottom:100px!important;width:min(100%,342px)!important;height:auto!important;margin:0!important;padding:8px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;border:1px solid rgba(130,216,255,.13)!important;border-radius:22px!important;background:rgba(5,18,28,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;backdrop-filter:blur(14px)!important}
 body.home-page .workspace-brief>div{min-height:72px;padding:14px!important;align-content:space-between!important;border:1px solid rgba(137,208,255,.09)!important;border-radius:15px!important;background:rgba(126,224,255,.025)!important}body.home-page .workspace-brief span{color:rgba(126,224,255,.58)!important;font-size:8px!important;letter-spacing:.13em!important}body.home-page .workspace-brief strong{font-size:11px!important;line-height:1.42!important;color:rgba(244,248,251,.88)!important}
 body.home-page .actions{position:absolute!important;left:0!important;top:auto!important;bottom:204px!important;width:min(100%,342px)!important;margin:0!important}
 body.home-page .site-info-footer{height:54px!important;padding:0 24px!important;border:0!important;background:transparent!important;backdrop-filter:none!important}body.home-page .site-info-inner{width:min(1240px,100%)!important;height:54px!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.site-info-nav{display:flex;align-items:center;gap:10px;color:rgba(222,238,247,.34)}.site-info-nav a{min-height:30px;padding:0!important;display:inline-flex;align-items:center;border:0!important;border-radius:0!important;background:transparent!important;color:rgba(222,238,247,.48)!important;font-size:10px!important;transition:color .2s ease!important}.site-info-nav a:hover,.site-info-nav a:focus-visible{background:transparent!important;color:rgba(255,255,255,.88)!important}
}

@media(min-width:761px) and (max-width:1100px){
 body.home-page .lead,body.home-page .workspace-brief,body.home-page .actions{width:min(100%,316px)!important;max-width:316px!important}
}

.midx-sound-toggle{position:absolute;z-index:3;left:116px;top:50%;right:auto;bottom:auto;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid rgba(138,218,255,.19);border-radius:14px;background:rgba(6,18,28,.74);color:rgba(220,243,253,.68);backdrop-filter:blur(16px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer;transform:translateY(-50%);transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
.midx-sound-toggle:hover,.midx-sound-toggle:focus-visible{border-color:rgba(91,214,255,.42);background:rgba(8,27,40,.94);color:#e8faff;box-shadow:0 0 0 3px rgba(83,211,255,.055),inset 0 1px 0 rgba(255,255,255,.07)}
.midx-sound-toggle:focus-visible{outline:2px solid rgba(126,224,255,.55);outline-offset:3px}.midx-sound-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.midx-sound-toggle .midx-sound-off{display:block}.midx-sound-toggle .midx-sound-on{display:none}.midx-sound-toggle[aria-pressed="true"]{color:#9ceaff;border-color:rgba(91,214,255,.36);box-shadow:0 0 28px rgba(0,153,255,.1),inset 0 1px 0 rgba(255,255,255,.06)}.midx-sound-toggle[aria-pressed="true"] .midx-sound-off{display:none}.midx-sound-toggle[aria-pressed="true"] .midx-sound-on{display:block}
.midx-signal-pulse{animation:midxSignalPulse .58s var(--midx-instrument-ease)}
@keyframes midxSignalPulse{0%{box-shadow:0 0 0 0 rgba(53,200,255,.24)}70%{box-shadow:0 0 0 14px rgba(53,200,255,0)}100%{box-shadow:0 0 0 0 rgba(53,200,255,0)}}

@media(max-width:760px), (hover:none), (pointer:coarse){
  .midx-cursor-dot,.midx-cursor-ring,.midx-sound-toggle,.midx-pointer-light{display:none!important}
  .midx-tilt{transform:none!important;will-change:auto}
  .midx-ambient-canvas,.ambient-canvas{opacity:.72}
}
@media(prefers-reduced-motion:reduce){
  .midx-cursor-dot,.midx-cursor-ring,.midx-pointer-light{display:none!important}
  .midx-tilt{transform:none!important;will-change:auto}
  .midx-signal-pulse{animation:none!important}
  .midx-ambient-canvas,.ambient-canvas{opacity:.64}
}

/* Navigation stays native. Never fade the current document before the next
   document has committed; this keeps slow, interrupted, and repeated route
   changes visually fail-safe. */