/* Gradient Mesh — the living surface material, ported from the eden-effects skill's
   Morphing Gradient Lab (.claude/skills/eden-effects/labs/morphing-gradient.css and the
   material rules effects.mjs injects). The material rules and the inspector are verbatim;
   only the three Eden-chrome variables the old shell declared are bridged to Eden 2.1's own,
   and the lab is mounted as a right rail rather than a full-canvas Lab. */
.mgl{--studio-black:var(--rail);--studio-lift:var(--panel-2);--studio-milled:var(--panel-2)}

/* ── the lab (verbatim) ───────────────────────────────────────────────── */
.mgl{--mgl-c1:#ff9a5b;--mgl-c2:#ff477e;--mgl-c3:#6c52ff;--mgl-c4:#168cff;--mgl-c5:#20dba8;--mgl-speed:18s;--mgl-soft:62px;--mgl-grain:.13;--mgl-sat:1.18;--mgl-bright:.92;--mgl-contrast:1.08;--mgl-hue:0deg;--mgl-focus-x:50%;--mgl-focus-y:45%;--mgl-focus-size:38%;--mgl-focus-power:0;display:grid;grid-template-columns:minmax(0,1fr) 274px;height:100%;min-height:650px;background:var(--studio-black);color:var(--studio-ink);font:12px/1.45 var(--studio-sans)}
.mgl *{box-sizing:border-box}.mgl-stage{min-width:0;overflow:auto;padding:20px;background:radial-gradient(700px 430px at 50% -10%,var(--studio-lift),var(--studio-black) 72%)}
.mgl-stage-head,.mgl-gallery>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.mgl-stage-head strong,.mgl-inspector>header strong{display:block;color:var(--studio-ink);font-size:13px}.mgl-stage-head span,.mgl-inspector>header span,.mgl-gallery p{display:block;margin:3px 0 0;color:var(--studio-ink-dim);font-size:10px}.mgl button,.mgl select,.mgl input{font:inherit}.mgl button,.mgl select,.mgl input:not([type=range]):not([type=checkbox]){border:1px solid var(--studio-hairline);border-radius:6px;background:var(--studio-nb);color:var(--studio-ink);padding:7px 8px}.mgl button{cursor:pointer}.mgl button:hover{background:var(--studio-fill-hover)}
.mgl-preview{position:relative;height:460px;overflow:hidden;border:1px solid var(--studio-hairline);border-radius:12px;background:var(--studio-black);isolation:isolate;box-shadow:0 24px 60px rgba(0,0,0,.45)}.mgl-field{position:absolute;inset:-20%;filter:blur(var(--mgl-soft)) saturate(var(--mgl-sat));will-change:transform}.mgl-field i{position:absolute;width:64%;aspect-ratio:1;border-radius:45% 55% 63% 37%/55% 38% 62% 45%;opacity:.88;mix-blend-mode:screen}.mgl-field i:nth-child(3n+1){left:-8%;top:-22%;background:radial-gradient(circle at 38% 34%,var(--mgl-c1),var(--mgl-c2) 34%,var(--mgl-c3) 63%,transparent 73%)}.mgl-field i:nth-child(3n+2){right:-12%;top:-12%;background:radial-gradient(circle at 45% 48%,var(--mgl-c3),var(--mgl-c4) 43%,var(--mgl-c5) 68%,transparent 75%)}.mgl-field i:nth-child(3n){left:22%;bottom:-46%;background:radial-gradient(circle at 50% 42%,var(--mgl-c1),var(--mgl-c5) 40%,var(--mgl-c4) 67%,transparent 75%)}.mgl[data-shape=ribbons] .mgl-field i{width:95%;height:24%;aspect-ratio:auto;border-radius:50%;transform:rotate(-18deg)}.mgl[data-shape=aurora] .mgl-field i{width:34%;height:105%;aspect-ratio:auto;border-radius:48% 52% 30% 70%}.mgl[data-shape=halo] .mgl-field i{border-radius:50%;background:radial-gradient(circle,transparent 28%,var(--mgl-c2) 34%,var(--mgl-c4) 55%,transparent 72%)}.mgl[data-shape=clouds] .mgl-field i{border-radius:50%}.mgl[data-shape=rays] .mgl-field i{width:24%;height:120%;aspect-ratio:auto;border-radius:50%;transform-origin:50% 100%}
@keyframes mgl-drift1{to{transform:translate(34%,28%) scale(1.22) rotate(22deg);border-radius:64% 36% 42% 58%/35% 66% 34% 65%}}@keyframes mgl-drift2{to{transform:translate(-34%,32%) scale(1.16) rotate(-27deg)}}@keyframes mgl-breathe{50%{transform:scale(1.34);opacity:.68}to{transform:scale(.92);opacity:.94}}@keyframes mgl-spin{to{transform:rotate(360deg) scale(1.18)}}@keyframes mgl-tide{50%{transform:translateX(48%) skewX(-12deg)}to{transform:translateX(8%) skewX(8deg)}}
.mgl[data-motion=drift] .mgl-field i:nth-child(odd){animation:mgl-drift1 var(--mgl-speed) ease-in-out infinite alternate}.mgl[data-motion=drift] .mgl-field i:nth-child(even){animation:mgl-drift2 var(--mgl-speed) ease-in-out infinite alternate}.mgl[data-motion=orbit] .mgl-field{animation:mgl-spin var(--mgl-speed) linear infinite}.mgl[data-motion=breathe] .mgl-field i{animation:mgl-breathe var(--mgl-speed) ease-in-out infinite}.mgl[data-motion=tide] .mgl-field i,.mgl[data-motion=wave] .mgl-field i{animation:mgl-tide var(--mgl-speed) ease-in-out infinite alternate}.mgl[data-motion=swirl] .mgl-field,.mgl[data-motion=flow] .mgl-field{animation:mgl-spin var(--mgl-speed) linear infinite}.mgl[data-motion=still] .mgl-field,.mgl[data-motion=still] .mgl-field i,.mgl.is-paused .mgl-field,.mgl.is-paused .mgl-field i{animation-play-state:paused}.mgl.is-reverse .mgl-field,.mgl.is-reverse .mgl-field i{animation-direction:reverse}.mgl.is-bloom .mgl-field{filter:blur(var(--mgl-soft)) saturate(var(--mgl-sat)) drop-shadow(0 0 22px var(--mgl-c4))}
.mgl-grain,.mgl-shade{position:absolute;inset:0;pointer-events:none}.mgl-grain{z-index:2;opacity:var(--mgl-grain);mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.mgl.no-grain .mgl-grain{display:none}.mgl-shade{z-index:2;background:linear-gradient(180deg,transparent 30%,rgba(4,5,8,.72) 100%)}.mgl.is-vignette .mgl-shade{background:radial-gradient(circle,transparent 35%,rgba(0,0,0,.65)),linear-gradient(180deg,transparent 30%,rgba(4,5,8,.72))}.mgl-copy{position:absolute;z-index:3;left:42px;bottom:42px;max-width:570px}.mgl-copy>span{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.mgl-copy h2{max-width:8ch;margin:9px 0 15px;font-size:58px;line-height:.9;letter-spacing:-.055em;background:linear-gradient(105deg,#fff,var(--mgl-c2) 37%,var(--mgl-c5));background-clip:text;-webkit-background-clip:text;color:transparent}.mgl-copy p{max-width:500px;margin:0;color:rgba(255,255,255,.8);font-size:14px}
.mgl-inspector{overflow:auto;border-left:1px solid var(--studio-hairline);background:var(--studio-milled)}.mgl-inspector>header{padding:14px;border-bottom:1px solid var(--studio-hairline)}.mgl details{border-bottom:1px solid var(--studio-hairline)}.mgl summary{padding:12px 14px;cursor:pointer;color:var(--studio-ink-mid);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mgl-controls{display:grid;gap:10px;padding:0 14px 14px}.mgl-controls>label{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:8px;color:var(--studio-ink-mid);font-size:10px}.mgl-controls output{justify-self:end;color:var(--studio-ink-dim)}.mgl-controls label.has-out{grid-template-columns:70px 1fr 40px}.mgl-controls label.has-out input{grid-column:2/4;width:100%}.mgl-inline{display:grid;grid-template-columns:1fr auto;gap:5px}.mgl-stopbar{height:18px;border:1px solid var(--studio-hairline);border-radius:5px}.mgl-stop{display:grid;grid-template-columns:26px 1fr 42px 18px;gap:5px;align-items:center}.mgl-stop input[type=color]{width:26px;height:26px;padding:1px}.mgl-stop input[type=number]{min-width:0}.mgl-check{display:flex!important}.mgl-targets{display:grid;gap:5px}.mgl-targets label{display:flex;gap:6px}.mgl-save{width:100%}.mgl-status{min-height:14px;margin:0;color:var(--studio-ink-dim);font-size:10px}
.mgl-gallery{padding:36px 0}.mgl-gallery h3{margin:0;font-size:18px}.mgl-gallery>header>span{color:var(--studio-ink-dim);font-size:10px}.mgl-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mgl-card{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--studio-hairline);border-radius:8px;background:var(--studio-nb);cursor:pointer}.mgl-card-field{position:absolute;inset:-30%;filter:blur(19px);background:conic-gradient(from 20deg,var(--a),var(--b),var(--c),var(--d),var(--a));animation:mgl-spin var(--card-speed,18s) linear infinite}.mgl-card span:last-child{position:absolute;z-index:2;left:10px;bottom:8px;color:#fff;font-size:10px;font-weight:600;text-shadow:0 1px 6px #000}.mgl-card:hover{border-color:var(--studio-ink-mid)}
@media(max-width:780px){.mgl{grid-template-columns:1fr}.mgl-inspector{border-left:0;border-top:1px solid var(--studio-hairline)}.mgl-wall{grid-template-columns:repeat(2,1fr)}.mgl-copy h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){.mgl-field,.mgl-field i,.mgl-card-field{animation:none!important}}
.mgl-stop-hex{min-width:0}
.mgl-field{filter:blur(var(--mgl-soft)) saturate(var(--mgl-sat)) brightness(var(--mgl-bright)) contrast(var(--mgl-contrast)) hue-rotate(var(--mgl-hue))}
.mgl[data-motion=spiral] .mgl-field{animation:mgl-spin var(--mgl-speed) cubic-bezier(.45,.05,.55,.95) infinite}.mgl[data-motion=ripple] .mgl-field i{animation:mgl-breathe var(--mgl-speed) ease-in-out infinite}.mgl[data-motion=cascade] .mgl-field i{animation:mgl-cascade var(--mgl-speed) ease-in-out infinite}.mgl[data-motion=aurora] .mgl-field i{animation:mgl-aurora var(--mgl-speed) ease-in-out infinite alternate}@keyframes mgl-cascade{0%,100%{translate:0 -42%;scale:.85}55%{translate:0 32%;scale:1.22}}@keyframes mgl-aurora{0%{translate:-8% -2%;scale:1 .94}50%{translate:8% 3%;scale:1.04 1.06}100%{translate:-3% -1%;scale:.98 1}}
.mgl-focus,.mgl-caustics,.mgl-particles{position:absolute;inset:0;z-index:2;pointer-events:none}.mgl-focus{background:radial-gradient(circle var(--mgl-focus-size) at var(--mgl-focus-x) var(--mgl-focus-y),rgba(255,255,255,var(--mgl-focus-power)),transparent 70%);mix-blend-mode:soft-light}.mgl-caustics{inset:-25%;opacity:0;background:repeating-radial-gradient(ellipse at 60% 40%,transparent 0 32px,#ffffff12 38px,transparent 47px);filter:blur(8px);animation:mgl-spin 16s linear infinite}.mgl.has-caustics .mgl-caustics{opacity:.55}.mgl.is-mirrored .mgl-field{transform:scaleX(-1)}.mgl-particles{display:none;opacity:.65;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px);background-size:29px 31px;animation:mgl-particles 9s linear infinite}.mgl.has-particles .mgl-particles{display:block}@keyframes mgl-particles{to{background-position:17px -62px}}
.mgl-particles{opacity:var(--mgl-particle-opacity,.65);background-image:radial-gradient(circle,var(--mgl-particle-color,#fff) 0 var(--mgl-particle-dot,1px),transparent calc(var(--mgl-particle-dot,1px) + .8px));background-size:var(--mgl-particle-size,29px) var(--mgl-particle-size,31px);animation-duration:var(--mgl-particle-speed,9s)}.mgl[data-particle-shape=ring] .mgl-particles{background-image:radial-gradient(circle,transparent 0 var(--mgl-particle-dot,1px),var(--mgl-particle-color,#fff) calc(var(--mgl-particle-dot,1px) + .5px),transparent calc(var(--mgl-particle-dot,1px) + 1px))}.mgl.has-trails .mgl-particles{filter:blur(.6px);background-size:calc(var(--mgl-particle-size,29px) * 1.8) calc(var(--mgl-particle-size,31px) * .65)}.mgl.has-twinkle .mgl-particles{animation-name:mgl-particles,mgl-twinkle}@keyframes mgl-twinkle{50%{opacity:calc(var(--mgl-particle-opacity,.65) * .45)}}
.mgl-field{scale:var(--mgl-field-scale,1);rotate:var(--mgl-field-rotation,0deg)}.mgl.is-bloom .mgl-field{filter:blur(var(--mgl-soft)) saturate(var(--mgl-sat)) brightness(var(--mgl-bright)) contrast(var(--mgl-contrast)) hue-rotate(var(--mgl-hue)) drop-shadow(0 0 var(--mgl-bloom) var(--mgl-c4))}.mgl.is-vignette .mgl-shade{background:radial-gradient(circle,transparent 35%,rgba(0,0,0,var(--mgl-vignette))),linear-gradient(180deg,transparent 30%,rgba(4,5,8,.72))}.mgl.has-edge-energy .mgl-preview{box-shadow:inset 0 0 var(--mgl-bloom) var(--mgl-c5),0 24px 60px rgba(0,0,0,.45)}
.mgl-particles{background-image:radial-gradient(circle at var(--mgl-pointer-x,50%) var(--mgl-pointer-y,50%),var(--mgl-particle-color,#fff) 0 var(--mgl-particle-dot,1px),transparent calc(var(--mgl-particle-dot,1px) + .8px))}

/* ── the material, as it renders on a page (verbatim) ─────────────────── */
.eden-has-morphing-gradient>*:not([data-eden-morphing-gradient]){position:relative;z-index:1}.eden-morph-material{position:absolute!important;z-index:0!important;inset:0;display:block;overflow:hidden;pointer-events:none;border-radius:inherit;background:var(--morph-c1,#ff9a5b)}.eden-morph-material[data-target="border"]{padding:3px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.eden-morph-material>i{position:absolute;left:var(--x);top:var(--y);display:block;width:72%;aspect-ratio:1;border-radius:45% 55% 63% 37%/55% 38% 62% 45%;opacity:.9;mix-blend-mode:var(--morph-blend);background:radial-gradient(circle at 38% 34%,var(--a),var(--b) 38%,var(--c) 68%,transparent 76%);filter:blur(var(--morph-soft)) saturate(var(--morph-sat));transform:rotate(var(--rot)) scale(calc(var(--scale) * var(--morph-overlap)));animation:eden-morph-drift var(--morph-speed) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.7s)}.eden-morph-material.is-reverse>i{animation-direction:alternate-reverse}.eden-morph-material.is-bloom>i{filter:blur(var(--morph-soft)) saturate(var(--morph-sat)) brightness(1.28)}.eden-morph-material[data-shape="ribbons"]>i{width:105%;height:22%;aspect-ratio:auto;border-radius:50%}.eden-morph-material[data-shape="aurora"]>i{width:38%;height:115%;aspect-ratio:auto;border-radius:48% 52% 30% 70%}.eden-morph-material[data-shape="halo"]>i{border-radius:50%;background:radial-gradient(circle,transparent 25%,var(--a) 32%,var(--b) 54%,transparent 72%)}.eden-morph-material[data-shape="clouds"]>i{border-radius:50%}.eden-morph-material[data-shape="rays"]>i{width:25%;height:130%;aspect-ratio:auto;border-radius:50%;transform-origin:50% 100%}.eden-morph-material[data-relation="attract"]>i,.eden-morph-material[data-relation="merge"]>i{transform-origin:50% 50%}.eden-morph-material[data-relation="repel"]>i:nth-child(even){animation-direction:alternate-reverse}.eden-morph-material[data-relation="orbit"]>i{animation-name:eden-morph-orbit}.eden-morph-material[data-relation="weave"]>i:nth-child(even){mix-blend-mode:difference}.eden-morph-material[data-motion="orbit"]>i,.eden-morph-material[data-motion="swirl"]>i{animation-name:eden-morph-orbit;animation-timing-function:linear}.eden-morph-material[data-motion="breathe"]>i{animation-name:eden-morph-breathe}.eden-morph-material[data-motion="tide"]>i,.eden-morph-material[data-motion="wave"]>i{animation-name:eden-morph-tide}.eden-morph-material[data-motion="flow"]>i{animation-name:eden-morph-flow}.eden-morph-material[data-motion="still"]>i{animation:none}.eden-morph-grain,.eden-morph-shade{position:absolute!important;z-index:2!important;inset:0;display:block;pointer-events:none}.eden-morph-grain{opacity:0}.eden-morph-material.has-grain>.eden-morph-grain{opacity:var(--morph-grain);mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.eden-morph-shade{background:linear-gradient(180deg,transparent 35%,rgba(4,5,8,.24))}.eden-morph-material.is-vignette>.eden-morph-shade{background:radial-gradient(circle,transparent 35%,rgba(0,0,0,.62)),linear-gradient(180deg,transparent 35%,rgba(4,5,8,.28))}@keyframes eden-morph-drift{0%{translate:var(--morph-shift-neg-x) var(--morph-shift-neg-y)}50%{translate:var(--morph-shift-x) 4%}100%{translate:-3% var(--morph-shift-y)}}@keyframes eden-morph-orbit{to{rotate:1turn}}@keyframes eden-morph-breathe{50%{scale:1.18;opacity:.72}}@keyframes eden-morph-tide{50%{translate:var(--morph-shift-x) 0;scale:1.08}}@keyframes eden-morph-flow{to{translate:var(--morph-shift-x) var(--morph-shift-y);rotate:24deg}}.eden-morph-material>i{filter:blur(var(--morph-soft)) saturate(var(--morph-sat)) brightness(var(--morph-bright,1)) contrast(var(--morph-contrast,1)) hue-rotate(var(--morph-hue,0deg))}.eden-morph-material[data-motion="spiral"]>i{animation-name:eden-morph-orbit;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}.eden-morph-material[data-motion="ripple"]>i{animation-name:eden-morph-ripple}.eden-morph-material[data-motion="cascade"]>i{animation-name:eden-morph-cascade}.eden-morph-material[data-motion="aurora"]>i{animation-name:eden-morph-aurora}.eden-morph-material.is-mirrored>i{scale:-1 1}.eden-morph-focus,.eden-morph-caustics,.eden-morph-particles{position:absolute!important;z-index:2!important;inset:0;display:block;pointer-events:none}.eden-morph-focus{background:radial-gradient(circle var(--morph-focus-size) at var(--morph-focus-x) var(--morph-focus-y),rgba(255,255,255,var(--morph-focus-power)),transparent 70%);mix-blend-mode:soft-light}.eden-morph-caustics{inset:-25%;opacity:0;background:repeating-radial-gradient(ellipse at 60% 40%,transparent 0 32px,#ffffff12 38px,transparent 47px);filter:blur(8px);animation:eden-morph-orbit 16s linear infinite}.eden-morph-material.has-caustics>.eden-morph-caustics{opacity:.55}.eden-morph-particles{display:none;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px);background-size:var(--morph-particle-size) var(--morph-particle-size);opacity:var(--morph-particle-opacity);animation:eden-morph-particles 9s linear infinite}.eden-morph-material.has-particles>.eden-morph-particles{display:block}.eden-morph-material.has-edge-energy{box-shadow:inset 0 0 var(--morph-bloom) var(--morph-c5)}.eden-morph-material.is-vignette>.eden-morph-shade{background:radial-gradient(circle,transparent 35%,rgba(0,0,0,var(--morph-vignette))),linear-gradient(180deg,transparent 35%,rgba(4,5,8,.28))}@keyframes eden-morph-ripple{50%{scale:.72;opacity:.55}100%{scale:1.28;opacity:.92}}@keyframes eden-morph-cascade{0%,100%{translate:0 -42%;scale:.85}55%{translate:0 32%;scale:1.22}}@keyframes eden-morph-aurora{0%{translate:-8% -2%;scale:1 .94}50%{translate:8% 3%;scale:1.04 1.06}100%{translate:-3% -1%;scale:.98 1}}@keyframes eden-morph-particles{to{background-position:17px -62px}}.eden-morph-material>i{filter:blur(calc(var(--morph-soft) + var(--morph-cohesion,0px))) saturate(var(--morph-sat)) brightness(var(--morph-bright,1)) contrast(var(--morph-contrast,1)) hue-rotate(var(--morph-hue,0deg));transform:rotate(calc(var(--rot) + var(--morph-field-rotation,0deg))) scale(calc(var(--scale) * var(--morph-overlap) * var(--morph-field-scale,1)))}.eden-morph-material.has-polarity>i:nth-child(even){animation-direction:alternate-reverse!important}.eden-morph-particles{background-image:radial-gradient(circle at var(--morph-pointer-x,50%) var(--morph-pointer-y,50%),var(--morph-particle-color) 0 var(--morph-particle-dot),transparent calc(var(--morph-particle-dot) + .8px));background-size:var(--morph-particle-size) var(--morph-particle-size);animation-duration:var(--morph-particle-speed)}.eden-morph-material[data-particle-shape="ring"]>.eden-morph-particles{background-image:radial-gradient(circle at var(--morph-pointer-x,50%) var(--morph-pointer-y,50%),transparent 0 var(--morph-particle-dot),var(--morph-particle-color) calc(var(--morph-particle-dot) + .5px),transparent calc(var(--morph-particle-dot) + 1px))}.eden-morph-material.has-trails>.eden-morph-particles{filter:blur(.6px);background-size:calc(var(--morph-particle-size) * 1.8) calc(var(--morph-particle-size) * .65)}.eden-morph-material.has-twinkle>.eden-morph-particles{animation-name:eden-morph-particles,eden-morph-twinkle}@keyframes eden-morph-twinkle{50%{opacity:calc(var(--morph-particle-opacity) * .45)}}@keyframes eden-morph-drift{0%{translate:-12% -8%}50%{translate:24% 16%}100%{translate:-8% 28%}}@keyframes eden-morph-flow{0%{translate:-12% 18%;rotate:-9deg}50%{translate:20% -12%;rotate:16deg}100%{translate:-12% 18%;rotate:-9deg}}@keyframes eden-morph-tide{0%{translate:-18% 0;scale:.92}50%{translate:32% 0;scale:1.12}100%{translate:-18% 0;scale:.92}}

/* ── the lab mounted as Eden 2.1's right rail ─────────────────────────── */
.mgl.mgl-rail{display:block;height:auto;min-height:0;background:transparent;color:var(--ink)}
.mgl-rail .mgl-inspector{overflow:visible;border:0;background:transparent;padding:0}
.mgl-rail .mgl-inspector>header{display:none}
.mgl-rail details{border-color:var(--line)}
.mgl-rail summary{color:var(--ink-2)}
.mgl-rail .mgl-controls>label,.mgl-rail .mgl-targets{color:var(--ink-2)}
.mgl-rail .mgl-stop{grid-template-columns:34px minmax(0,1fr) 48px 28px;gap:6px}
.mgl-rail .mgl-stop input[type=color]{box-sizing:border-box;-webkit-appearance:none;appearance:none;width:34px;height:34px;padding:3px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.mgl-rail .mgl-stop input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.mgl-rail .mgl-stop input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}
.mgl-rail .mgl-stop button{width:28px;height:34px;padding:0}
/* the mesh lab rail — same chrome as Settings */
#meshLab{position:fixed;right:0;top:var(--bar);bottom:0;width:320px;background:var(--rail);border-left:1px solid var(--line);box-shadow:-10px 0 28px var(--shadow-rail);z-index:37;display:flex;flex-direction:column;clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .14s ease,visibility 0s linear .14s;color:var(--ink)}
#meshLab.open{clip-path:inset(0 0 0 -40px);visibility:visible;transition:clip-path .14s ease,visibility 0s}
#meshLab h4{display:flex;align-items:center;justify-content:space-between;height:44px;flex:none;margin:0;padding:0 8px 0 16px;border-bottom:1px solid var(--studio-hairline);font:600 12px var(--studio-sans);color:var(--studio-ink)}
#meshLab h4 em{font-style:normal;color:var(--studio-ink-dim);font-weight:500}
.mesh-body{flex:1;min-height:0;overflow:auto;padding:0 14px 20px}
.mesh-preview{height:118px;margin:12px 0;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--line)}
body:has(#meshLab.open) #instrumentBar{display:none}
/* a designer's own tool (renderDefinition) hides a control with the hidden attribute; the label rules above would otherwise show it */
.mgl [hidden]{display:none!important}
/* COLOUR CYCLE: the whole material turns round the colour wheel (render, hueCycle); the layer has no filter or animation of its own */
.eden-morph-material.has-hue-cycle{animation:eden-morph-hue var(--morph-hue-cycle) linear infinite}@keyframes eden-morph-hue{to{filter:hue-rotate(1turn)}}
/* ── THE CONTROLS, REPAIRED (2026-10-15; Josh: "i actually dont think many of the mesh gradient configs even work") ─────────────────
   Measured on screen pixels, 22 of the original's 79 settings changed nothing and 18 barely showed. Each repair below is a no-op at
   its control's default, so a mesh that never moved that control draws exactly as before (proof: mesh-controls-visible). */
/* FOCUS: `circle <percent>` is not a valid radial-gradient, so the spot drew nothing. An ellipse takes percentages. Power 0 is clear. */
.eden-morph-focus{background:radial-gradient(var(--morph-focus-size) var(--morph-focus-size) at var(--morph-focus-x) var(--morph-focus-y),rgba(255,255,255,var(--morph-focus-power)),transparent 75%);mix-blend-mode:overlay}
/* GRAIN: its size is Texture (100px at 160, as before) */
.eden-morph-grain{background-size:var(--morph-grain-size,auto)}
/* MAGNETISM: how far the shapes travel (1 at 40, the travel they always had) */
@keyframes eden-morph-drift{0%{translate:calc(-12% * var(--morph-mag,1)) calc(-8% * var(--morph-mag,1))}50%{translate:calc(24% * var(--morph-mag,1)) calc(16% * var(--morph-mag,1))}100%{translate:calc(-8% * var(--morph-mag,1)) calc(28% * var(--morph-mag,1))}}
@keyframes eden-morph-flow{0%{translate:calc(-12% * var(--morph-mag,1)) calc(18% * var(--morph-mag,1));rotate:-9deg}50%{translate:calc(20% * var(--morph-mag,1)) calc(-12% * var(--morph-mag,1));rotate:16deg}100%{translate:calc(-12% * var(--morph-mag,1)) calc(18% * var(--morph-mag,1));rotate:-9deg}}
@keyframes eden-morph-tide{0%{translate:calc(-18% * var(--morph-mag,1)) 0;scale:.92}50%{translate:calc(32% * var(--morph-mag,1)) 0;scale:1.12}100%{translate:calc(-18% * var(--morph-mag,1)) 0;scale:.92}}
/* DEPTH and LEVELS: each band of shapes further back (render sets --depth-*; absent, nothing changes) */
.eden-morph-material>i{opacity:calc(.9 * var(--depth-fade,1));filter:blur(calc(var(--morph-soft) + var(--morph-cohesion,0px) + var(--depth-blur,0px))) saturate(var(--morph-sat)) brightness(var(--morph-bright,1)) contrast(var(--morph-contrast,1)) hue-rotate(var(--morph-hue,0deg));transform:rotate(calc(var(--rot) + var(--morph-field-rotation,0deg))) scale(calc(var(--scale) * var(--morph-overlap) * var(--morph-field-scale,1) * var(--depth-scale,1)))}
.eden-morph-material.is-bloom>i{filter:blur(calc(var(--morph-soft) + var(--depth-blur,0px))) saturate(var(--morph-sat)) brightness(1.28)}
/* ATTRACT and MERGE: the shapes drawn together towards the middle (they drew as Independent) */
.eden-morph-material[data-relation="attract"]>i{left:calc(14% + (var(--x) - 14%) * .45);top:calc(14% + (var(--y) - 14%) * .45)}
.eden-morph-material[data-relation="merge"]>i{left:calc(14% + (var(--x) - 14%) * .12);top:calc(14% + (var(--y) - 14%) * .12)}
/* CLOUDS: billows of their own (they drew as a plain round blob) */
.eden-morph-material[data-shape="clouds"]>i{background:radial-gradient(circle at 30% 58%,var(--a) 0 20%,transparent 42%),radial-gradient(circle at 54% 40%,var(--b) 0 24%,transparent 48%),radial-gradient(circle at 74% 60%,var(--c) 0 18%,transparent 40%)}
/* LIGHT CAUSTICS: rings of light that show (they were 7% white) */
.eden-morph-caustics{background:repeating-radial-gradient(ellipse at 60% 40%,transparent 0 28px,rgba(255,255,255,.34) 36px,transparent 46px);mix-blend-mode:overlay}
.eden-morph-material.has-caustics>.eden-morph-caustics{opacity:.8}
/* EDGE ENERGY: a glow round the edge, above the shapes (it was drawn underneath them); Bloom is its blur, Edge depth how far it reaches */
.eden-morph-material.has-edge-energy>.eden-morph-shade{box-shadow:inset 0 0 calc(var(--morph-bloom) + 6px) var(--morph-edge-depth,11px) var(--morph-c5,#20dba8)}
/* PARTICLES THAT SHOW: a 1px dot tinted with the mesh's own colour, on a rigid grid, was invisible on it. Now a lit field of two staggered
   layers (screen), each particle with a halo as wide as Glow, each shape its own drawing, travelling at Flow towards Direction, wavering by
   Turbulence. The layer is twice the size so it turns freely. Particles draw only with Glowing particles on, so nothing else changes. */
.eden-morph-particles{inset:-50%!important;mix-blend-mode:screen;rotate:var(--morph-particle-angle,0deg);filter:none;
  --pc:var(--morph-particle-color);--pd:var(--morph-particle-dot);--ps:var(--morph-particle-size);--pp:var(--morph-pointer-x,50%) var(--morph-pointer-y,50%);
  --ph:color-mix(in srgb,var(--pc) 42%,transparent);--pg:calc(var(--morph-particle-glow,10px) * .55);
  --shape:radial-gradient(circle at var(--pp),var(--pc) 0 var(--pd),var(--ph) calc(var(--pd) + .6px),transparent calc(var(--pd) + var(--pg)));
  background-image:var(--shape),var(--shape);background-size:var(--ps) var(--ps),calc(var(--ps) * 1.41) calc(var(--ps) * 1.41);background-position:0 0,calc(var(--ps) * .37) calc(var(--ps) * .61)}
.eden-morph-material>.eden-morph-particles{background-image:var(--shape),var(--shape)}
.eden-morph-material[data-particle-shape="orb"]>.eden-morph-particles{--shape:radial-gradient(circle at var(--pp),var(--pc) 0,var(--ph) calc(var(--pd) * 1.6),transparent calc(var(--pd) * 3.4 + var(--pg)))}
.eden-morph-material[data-particle-shape="ring"]>.eden-morph-particles{--shape:radial-gradient(circle at var(--pp),transparent 0 calc(var(--pd) * 1.3),var(--pc) calc(var(--pd) * 1.3 + .5px) calc(var(--pd) * 2.2),var(--ph) calc(var(--pd) * 2.2 + .6px),transparent calc(var(--pd) * 2.2 + var(--pg)))}
.eden-morph-material[data-particle-shape="spark"]>.eden-morph-particles{--arm:min(calc(var(--pd) * 3 + var(--pg) * .5),calc(var(--ps) * .4));--shape:radial-gradient(calc(var(--pd) * .6) var(--arm) at var(--pp),var(--pc) 0 30%,transparent),radial-gradient(var(--arm) calc(var(--pd) * .6) at var(--pp),var(--pc) 0 30%,transparent);background-image:var(--shape)}
.eden-morph-material[data-particle-shape="cross"]>.eden-morph-particles{--arm:min(calc(var(--pd) * 3.2),calc(var(--ps) * .4));--shape:radial-gradient(calc(var(--pd) * .5) var(--arm) at var(--pp),var(--pc) 0 90%,transparent 100%),radial-gradient(var(--arm) calc(var(--pd) * .5) at var(--pp),var(--pc) 0 90%,transparent 100%);background-image:var(--shape)}
.eden-morph-material[data-particle-shape="diamond"]>.eden-morph-particles{--shape:conic-gradient(from 45deg at var(--pp),var(--pc) 0 3deg,transparent 3deg 87deg,var(--pc) 87deg 93deg,transparent 93deg 177deg,var(--pc) 177deg 183deg,transparent 183deg 267deg,var(--pc) 267deg 273deg,transparent 273deg);background-image:var(--shape)}
.eden-morph-material[data-particle-shape="streak"]>.eden-morph-particles{--shape:radial-gradient(min(calc(var(--pd) * 6 + var(--pg) * .5),calc(var(--ps) * .45)) calc(var(--pd) * .7) at var(--pp),var(--pc) 0 28%,var(--ph) 45%,transparent)}
.eden-morph-material[data-particle-shape="triangle"]>.eden-morph-particles{--shape:conic-gradient(from -30deg at var(--pp),var(--pc) 0 60deg,transparent 60deg);background-image:var(--shape)}
.eden-morph-material.has-particles>.eden-morph-particles{display:block;animation:eden-morph-particles var(--morph-particle-speed) linear infinite}
.eden-morph-material.has-particles.has-twinkle>.eden-morph-particles{animation:eden-morph-particles var(--morph-particle-speed) linear infinite,eden-morph-twinkle 2.4s ease-in-out infinite}
.eden-morph-material.has-particles.has-turbulence>.eden-morph-particles{animation:eden-morph-particles var(--morph-particle-speed) linear infinite,eden-morph-jitter 1.6s ease-in-out infinite alternate}
.eden-morph-material.has-particles.has-twinkle.has-turbulence>.eden-morph-particles{animation:eden-morph-particles var(--morph-particle-speed) linear infinite,eden-morph-twinkle 2.4s ease-in-out infinite,eden-morph-jitter 1.6s ease-in-out infinite alternate}
.eden-morph-material.has-trails>.eden-morph-particles{filter:blur(1.2px);background-size:calc(var(--ps) * 2.2) calc(var(--ps) * .55),calc(var(--ps) * 3.1) calc(var(--ps) * .78)}
@keyframes eden-morph-particles{to{background-position:var(--ps) calc(var(--ps) * -3),calc(var(--ps) * 1.78) calc(var(--ps) * -3.62)}}
@keyframes eden-morph-twinkle{0%,100%{opacity:var(--morph-particle-opacity)}50%{opacity:calc(var(--morph-particle-opacity) * .25)}}
@keyframes eden-morph-jitter{0%{translate:0 0}33%{translate:var(--morph-turbulence) calc(var(--morph-turbulence) * -.7)}66%{translate:calc(var(--morph-turbulence) * -.8) calc(var(--morph-turbulence) * .5)}100%{translate:calc(var(--morph-turbulence) * .5) var(--morph-turbulence)}}
/* ── THE MATERIAL, RE-DRAWN (2026-10-22; Josh: "all the mesh options seem to only produce a mesh that has horizontal bands of color...
   the differences in adjustments are almost non-existent") ────────────────────────────────────────────────────────────────────────────
   Measured: on a 1200×750 box the shapes were blurred by a fixed 124px and sat mostly off the surface, so the picture was the ground's
   straight gradient and most controls moved under 1% of it. Now every size is a share of the surface (cq units: the material is its
   own size container), every shape is centred on the surface in both directions (render: --x, --y), and Liquid folds each shape. */
.eden-morph-material{container-type:size}
.eden-morph-material>.eden-morph-liquid{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.eden-morph-material>i{--w:calc(var(--morph-d,1) * (50cqw + 50cqh));--h:var(--w);width:var(--w);height:var(--h);aspect-ratio:auto;left:calc(var(--x) - var(--w) / 2);top:calc(var(--y) - var(--h) / 2);
  filter:blur(calc((var(--morph-soft-k,.14) + var(--morph-coh-k,0) + var(--depth-blur-k,0)) * min(var(--w), var(--h)))) var(--liquid,) saturate(var(--morph-sat)) brightness(var(--morph-bright,1)) contrast(var(--morph-contrast,1)) hue-rotate(var(--morph-hue,0deg))}
.eden-morph-material.is-bloom>i{filter:blur(calc((var(--morph-soft-k,.14) + var(--depth-blur-k,0)) * min(var(--w), var(--h)))) var(--liquid,) saturate(var(--morph-sat)) brightness(calc(var(--morph-bright,1) * 1.28)) contrast(var(--morph-contrast,1)) hue-rotate(var(--morph-hue,0deg))}
.eden-morph-material[data-shape="ribbons"]>i{--w:calc(var(--morph-d,1) * (100cqw + 100cqh) * 1.1);--h:calc(var(--morph-d,1) * (50cqw + 50cqh) * .38)}
.eden-morph-material[data-shape="aurora"]>i{--w:calc(var(--morph-d,1) * (50cqw + 50cqh) * .45);--h:calc(var(--morph-d,1) * (100cqw + 100cqh) * .95)}
.eden-morph-material[data-shape="rays"]>i{--w:calc(var(--morph-d,1) * (50cqw + 50cqh) * .26);--h:calc(var(--morph-d,1) * (100cqw + 100cqh) * 1.1)}
.eden-morph-material[data-relation="attract"]>i{left:calc(50% + (var(--x) - 50%) * .45 - var(--w) / 2);top:calc(50% + (var(--y) - 50%) * .45 - var(--h) / 2)}
.eden-morph-material[data-relation="merge"]>i{left:calc(50% + (var(--x) - 50%) * .12 - var(--w) / 2);top:calc(50% + (var(--y) - 50%) * .12 - var(--h) / 2)}
.eden-morph-ground{position:absolute!important;z-index:-1!important;inset:-62cqmin;display:block;pointer-events:none;filter:var(--liquid,) saturate(var(--morph-sat)) brightness(var(--morph-bright,1)) contrast(var(--morph-contrast,1)) hue-rotate(var(--morph-hue,0deg))}
/* STILL RUNS NOTHING: the caustics turned all the time, drawn or not; they turn only when drawn. Still holds everything in the material
   (shapes, caustics, particles); only Colour cycle, a control of its own and off unless set, still turns the colours of a still mesh. */
.eden-morph-caustics{animation:none}
.eden-morph-material.has-caustics>.eden-morph-caustics{animation:eden-morph-orbit 16s linear infinite}
.eden-morph-material.is-reverse.has-caustics>.eden-morph-caustics{animation-direction:reverse}
.eden-morph-material[data-motion="still"]>*{animation:none!important}