/* Phase 4 — spatial visual engine. Effects are token-driven and remain separate from business data. */
:root{
  --spatial-glow-percent:65%;
  --spatial-depth-shadow:34px;
  --spatial-float-offset:-7px;
}
.spatial-stage{
  border-color:color-mix(in srgb,var(--spatial-accent,#2997ff) var(--spatial-glow-percent),rgba(255,255,255,.18));
  box-shadow:0 22px 60px rgba(0,20,55,.2),0 0 var(--spatial-depth-shadow) color-mix(in srgb,var(--spatial-accent,#2997ff) var(--spatial-glow-soft-percent,23%),transparent);
}
.spatial-backdrop{
  transition:opacity .25s ease,transform .35s ease,background-image .25s ease;
}
#spatialStage[data-bg="gradient"] .spatial-backdrop{
  background-image:radial-gradient(ellipse at 18% 12%,rgba(117,95,255,.65),transparent 42%),radial-gradient(ellipse at 85% 78%,rgba(0,208,190,.42),transparent 45%),linear-gradient(135deg,#08162e,#142c50 52%,#080d1c)!important;
  opacity:1;
}
#spatialStage[data-bg="solid"] .spatial-backdrop{
  background-image:linear-gradient(145deg,#07101f,#0d1d34)!important;
  opacity:1;
}
#spatialStage[data-card-style="solid"] .spatial-face{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-color:rgba(255,255,255,.28);
  box-shadow:0 12px 26px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);
}
#spatialStage[data-card-style="blur"] .spatial-face{
  backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);
  border-color:color-mix(in srgb,var(--spatial-accent,#2997ff) 42%,rgba(255,255,255,.45));
}
#spatialStage[data-motion="still"] .spatial-card{
  animation:none!important;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
#spatialStage[data-motion="orbit"] .spatial-card{
  animation-name:propertyOSSpatialOrbit;
}
#spatialStage[data-motion="lift"] .spatial-card{
  animation-name:propertyOSSpatialLift;
}
@keyframes propertyOSSpatialOrbit{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 var(--spatial-float-offset,-7px);rotate:.6deg}
}
@keyframes propertyOSSpatialLift{
  0%,100%{translate:0 0}
  50%{translate:0 var(--spatial-float-offset,-7px)}
}
#spatialStage .spatial-card.is-selected .spatial-face{
  box-shadow:0 28px var(--spatial-depth-shadow,34px) rgba(0,0,0,.42),
    0 0 var(--spatial-depth-shadow,34px) color-mix(in srgb,var(--spatial-accent,#2997ff) var(--spatial-glow-percent,65%),transparent),
    0 0 0 1px color-mix(in srgb,var(--spatial-accent,#2997ff) 70%,white);
}
:root[data-visual-effects="off"] .spatial-stage{
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
:root[data-visual-effects="off"] .spatial-stage .spatial-face,
:root[data-visual-effects="off"] .spatial-stage .spatial-card.is-selected .spatial-face{
  box-shadow:0 4px 12px rgba(0,0,0,.18)!important;
}
:root[data-visual-motion="off"] .spatial-stage .spatial-card,
:root[data-motion-override="off"] .spatial-stage .spatial-card{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  #spatialStage .spatial-card{animation:none!important;transition:none!important}
  #spatialStage .spatial-backdrop{transition:none!important;transform:none!important}
}
@media(prefers-reduced-transparency:reduce){
  #spatialStage .spatial-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(max-width:600px){
  .spatial-stage{box-shadow:0 10px 28px rgba(0,20,55,.18)}
}


.preset-swatch.warm{background:linear-gradient(135deg,#282522 0%,#51463c 50%,#d6a779 100%)}
.visual-commit-actions{align-items:center;padding:10px 0;border-bottom:1px solid var(--sep);margin-bottom:8px}
#visualDraftState{flex:1;min-width:160px}
#visualApplyChanges:disabled,#visualDiscardChanges:disabled{opacity:.48;cursor:not-allowed}
#visualApplyChanges:focus-visible,#visualDiscardChanges:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.visual-commit-actions{display:grid;grid-template-columns:1fr 1fr}.visual-commit-actions #visualDraftState{grid-column:1/-1}}


:root{--spx-blue:#4d8dff;--spx-cyan:#66e7ff;--spx-violet:#a78bfa;--spx-glass:color-mix(in srgb,var(--surface) 78%,transparent);--spx-line:color-mix(in srgb,var(--blue-fill) 28%,var(--sep));--spx-shadow:0 22px 65px rgba(25,80,180,.14)}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background-image:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--blue-fill) 10%,transparent),transparent 38rem),radial-gradient(ellipse at 0% 55%,rgba(133,91,255,.055),transparent 32rem),linear-gradient(180deg,color-mix(in srgb,var(--bg) 94%,#0b1732),var(--bg) 42%)}
.system-bar,.sidebar,.bar{backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.system-bar{border-bottom-color:var(--spx-line);box-shadow:0 10px 34px rgba(0,0,0,.045)}
.system-brand,.brand{letter-spacing:-.035em}
.brand-word,.brand b{font-weight:750}
.nav-item{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.nav-item[aria-current="page"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue-fill) 18%,transparent),0 5px 22px color-mix(in srgb,var(--blue-fill) 12%,transparent)}
.btn,.icon-btn,.system-icon,.row-btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
@media(hover:hover){.btn:hover,.icon-btn:hover,.system-icon:hover{transform:translateY(-1px)}.nav-item:hover{transform:translateX(2px)}}
.page.active{animation:spxPageIn .28s cubic-bezier(.2,.75,.25,1) both}
@keyframes spxPageIn{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.spatial-hub-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr);align-items:center;gap:22px;min-height:245px;padding:clamp(22px,4vw,38px);margin:4px 0 30px;border:1px solid var(--spx-line);border-radius:26px;background:radial-gradient(ellipse at 78% 20%,rgba(87,114,255,.22),transparent 42%),radial-gradient(ellipse at 100% 100%,rgba(64,220,255,.12),transparent 45%),linear-gradient(125deg,color-mix(in srgb,var(--surface) 95%,#182f62),color-mix(in srgb,var(--surface) 82%,#31245c));box-shadow:var(--spx-shadow)}
.spatial-hub-hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:linear-gradient(rgba(150,190,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,.18) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,transparent,black)}
.spatial-hub-copy{max-width:660px}.spatial-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--blue-fill);margin-bottom:12px}.spatial-live-dot{width:7px;height:7px;border-radius:50%;background:#43d7b2;box-shadow:0 0 14px #43d7b2}.spatial-hub-hero h1{font-size:clamp(28px,4.2vw,46px);line-height:1.04;letter-spacing:-.055em;margin:0 0 13px}.spatial-hub-hero h1 span{background:linear-gradient(100deg,var(--spx-blue),var(--spx-cyan),var(--spx-violet));-webkit-background-clip:text;background-clip:text;color:transparent}.spatial-hub-hero .lead{max-width:540px;margin:0 0 20px;line-height:1.65}.spatial-hub-actions{display:flex;flex-wrap:wrap;gap:9px}.spatial-orb-art{position:relative;min-height:190px;display:grid;place-items:center;overflow:hidden}.spatial-orb-core{width:98px;height:98px;border-radius:32px;display:grid;place-items:center;font-size:43px;color:white;background:radial-gradient(circle at 30% 20%,#8ae8ff,transparent 34%),linear-gradient(140deg,#316dff,#7955e8 65%,#263a91);box-shadow:0 0 0 9px rgba(108,143,255,.09),0 0 0 22px rgba(108,143,255,.05),0 0 65px rgba(65,138,255,.62),inset 0 1px 1px rgba(255,255,255,.7);transform:rotate(-8deg)}.spatial-orb-ring{position:absolute;width:190px;height:72px;border:1px solid rgba(120,187,255,.52);border-radius:50%;transform:rotate(-28deg);box-shadow:0 0 25px rgba(80,148,255,.12)}.ring-b{width:160px;height:120px;transform:rotate(48deg);border-color:rgba(177,134,255,.45)}.orb-star{position:absolute;color:#9eeeff;font-style:normal;text-shadow:0 0 14px currentColor}.star-a{top:22%;right:18%;font-size:23px}.star-b{bottom:20%;left:19%;font-size:28px}.star-c{top:17%;left:24%;font-size:30px}
.spatial-hub-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:26px 0 14px}.spatial-hub-section-head h2{font-size:19px;letter-spacing:-.035em;margin:0 0 5px}.spatial-hub-section-head p{font-size:13px;color:var(--label-2);margin:0}.spatial-section-tag{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--label-2);border:1px solid var(--sep);border-radius:999px;padding:7px 10px;white-space:nowrap}
.spatial-launch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.spatial-launch-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;padding:17px;border-radius:19px;border:1px solid var(--sep);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--blue-fill)),var(--surface));color:var(--label);box-shadow:var(--shadow-card);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.spatial-launch-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue-fill) 42%,var(--sep));box-shadow:0 14px 34px rgba(20,80,170,.11)}.spatial-launch-card b{font-size:14px;letter-spacing:-.02em}.spatial-launch-card small{font-size:11px;line-height:1.5;color:var(--label-2)}.spatial-launch-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:white;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 7px 18px rgba(0,0,0,.1)}.spatial-launch-icon [data-icon]{width:18px;height:18px}.icon-blue{background:linear-gradient(140deg,#399aff,#3157dc)}.icon-violet{background:linear-gradient(140deg,#b58bff,#7547df)}.icon-green{background:linear-gradient(140deg,#36d7ad,#168e73)}.icon-orange{background:linear-gradient(140deg,#ffb65c,#e86c37)}.icon-cyan{background:linear-gradient(140deg,#4adbf0,#1688c5)}.icon-pink{background:linear-gradient(140deg,#ff78b4,#cc3b83)}.spatial-launch-arrow{position:absolute;right:15px;top:16px;color:var(--label-3);font-size:15px}.customization-hub-heading{margin-top:34px}.preset-swatch.deep-space{background:radial-gradient(circle at 65% 35%,#6de9ff,transparent 15%),radial-gradient(circle at 35% 70%,#7665ff,transparent 32%),linear-gradient(135deg,#030816,#101f4d 58%,#34246c)}
#more .customization-lead{max-width:760px}#more .custom-grid{align-items:stretch}#more .custom-panel{box-shadow:var(--shadow-card)}
:focus-visible{outline-color:var(--blue-fill);outline-offset:3px}
@media(max-width:850px){.spatial-hub-hero{grid-template-columns:minmax(0,1fr) 160px}.spatial-launch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.spatial-hub-hero{grid-template-columns:1fr;padding:22px;min-height:0}.spatial-orb-art{position:absolute;right:-34px;top:10px;width:145px;min-height:140px;opacity:.35;pointer-events:none}.spatial-orb-core{width:68px;height:68px;border-radius:24px;font-size:30px}.spatial-orb-ring{width:130px;height:50px}.ring-b{width:110px;height:82px}.spatial-hub-copy{position:relative;z-index:1}.spatial-hub-hero .lead{max-width:95%}.spatial-hub-hero h1{max-width:380px;padding-right:12px}.spatial-launch-grid{gap:8px}.spatial-launch-card{padding:13px;border-radius:16px}.spatial-hub-section-head{align-items:flex-start}.spatial-section-tag{display:none}.spatial-hub-actions .btn{flex:1;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page.active{animation:none}.nav-item,.btn,.icon-btn,.system-icon,.row-btn,.spatial-launch-card{transition:none!important}.spatial-launch-card:hover,.nav-item:hover,.btn:hover,.icon-btn:hover,.system-icon:hover{transform:none}}
:root[data-visual-motion="off"] .page.active{animation:none}:root[data-visual-effects="off"] .spatial-hub-hero,:root[data-visual-effects="off"] .spatial-launch-card{box-shadow:none}:root[data-visual-hover="off"] .spatial-launch-card:hover{transform:none}

html[data-spx-hidden="true"] *{scroll-behavior:auto!important}