.ma-lab{--ma-stage:#16243a;--ma-fg:#f4f8ff;--ma-film:#28466480;--ma-neon:#a8ff62;--ma-cyan:#63edff;--ma-shadow:#02081655;scroll-margin-top:100px}
:root[data-theme=light] .ma-lab{--ma-stage:#dce8ef;--ma-fg:#15243e;--ma-film:#ffffff9c;--ma-neon:#b3ef66;--ma-cyan:#11677f;--ma-shadow:#2c5b7829}
.ma-lab *, .ma-lab *::before,.ma-lab *::after{box-sizing:border-box}.ma-lab [hidden]{display:none!important}.ma-lab button,.ma-lab input,.ma-lab select{font:inherit}.ma-tools{display:flex;flex-wrap:wrap;gap:18px;align-items:end;padding:25px 0}.ma-tools>label{display:grid;gap:9px;font-size:.85rem;font-weight:650;min-width:0}.ma-tools>label:first-child{flex:1 1 280px}.ma-tools input[type=search],.ma-tools select{color:var(--ink);background:var(--solid);border:1px solid var(--edge);border-radius:12px;padding:13px 14px;max-width:100%;width:100%;min-width:0}.ma-tools .ma-reduce-label{display:flex;align-items:center;gap:9px;padding:13px 0}.ma-reduce-label input{width:20px;height:20px;accent-color:var(--cyan)}.ma-summary{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.83rem;padding:0 0 22px}.ma-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:55px}.ma-map a{padding:17px;border-radius:15px;background:var(--solid);text-decoration:none;min-width:0;display:grid;gap:8px}.ma-map a>span{font-size:.72rem;color:var(--cyan);font-variant-numeric:tabular-nums}.ma-map strong{font-size:.94rem}.ma-map small{font-size:.76rem;line-height:1.5;color:var(--muted)}.ma-group{scroll-margin-top:100px;margin-bottom:55px}.ma-group-heading{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}.ma-group-heading>span{color:var(--cyan);font-size:.8rem}.ma-group-heading h3{font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.035em}.ma-group-heading p{font-size:.88rem;color:var(--muted);margin-left:auto}.ma-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.ma-card{min-width:0;border-radius:24px;background:var(--solid);overflow:hidden}.ma-stage{height:210px;display:flex;justify-content:center;align-items:center;padding:22px;position:relative;isolation:isolate;overflow:hidden;color:var(--ma-fg);background:radial-gradient(ellipse at 0 90%,#c481f94d,transparent 65%),radial-gradient(ellipse at 100% 0,#31cffc44,transparent 65%),var(--ma-stage);perspective:700px;font-size:.85rem}.ma-stage::before{content:'';position:absolute;z-index:-2;height:70px;width:150px;right:-45px;top:12px;border-radius:80px;background:linear-gradient(100deg,#66effd,#a6f766);transform:rotate(-35deg);opacity:.8}.ma-stage::after{content:'';position:absolute;z-index:-2;height:85px;width:85px;left:-22px;bottom:10px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f9d4ff,#b254e0 60%,#672996);opacity:.7}.ma-card-body{padding:22px}.ma-kicker{display:block;color:var(--muted);font-size:.72rem;font-weight:600}.ma-card h4{font-size:1.14rem;letter-spacing:-.025em;margin:10px 0}.ma-card-body>p{font-size:.86rem;line-height:1.65;color:var(--muted);min-height:4.9em;margin:0 0 18px}.ma-card .ma-play{font-size:.82rem;min-height:44px}.ma-recipe{margin-top:18px;font-size:.81rem;border:0;padding:0;background:none}.ma-recipe summary{cursor:pointer;padding:10px 0;min-height:44px;line-height:1.6;color:var(--cyan);font-weight:700}.ma-recipe dl{margin:10px 0 0;display:grid;gap:7px;line-height:1.6}.ma-recipe dt{font-weight:750}.ma-recipe dd{margin:0 0 10px;color:var(--muted);overflow-wrap:anywhere}.ma-footnote,.ma-empty{font-size:.88rem;color:var(--muted);line-height:1.7;margin-top:25px}.ma-pane{position:relative;display:flex;flex-direction:column;gap:13px;width:82%;max-width:220px;min-height:100px;padding:20px;border:0;border-radius:21px;background:var(--ma-film);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 17px 24px var(--ma-shadow);color:var(--ma-fg)}.ma-pane strong{font-size:1.3rem;letter-spacing:-.04em}.ma-pane small{font-size:.7rem}.ma-line{display:block;height:7px;border-radius:7px;background:currentColor;opacity:.3;width:100%;margin:3px 0}.ma-short{width:65%}.ma-press{display:flex;align-items:center;justify-content:center;gap:25px;border-radius:17px;padding:17px 25px;color:#17330e;background:linear-gradient(130deg,#d3ffa4,#96e456);box-shadow:inset 3px 4px 5px #f3ffd780,0 10px 20px #0b1a1422;font-weight:750;white-space:nowrap}.ma-press b{font-size:1.3rem}.ma-check{height:60px;width:100px;align-self:center}.ma-check path,.ma-svg path{fill:none;stroke:var(--ma-cyan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.ma-stage-check .ma-pane{align-items:center;gap:4px}.ma-field{display:block;background:var(--ma-stage);border-bottom:2px solid #ef91b5;padding:12px;border-radius:8px;min-width:130px}.ma-stage-error small{color:var(--ma-fg)}.ma-row{flex-direction:row;align-items:center;min-height:70px;width:auto}.ma-row strong{font-size:.9rem}.ma-dot{display:block;width:15px;height:15px;background:var(--ma-neon);border-radius:50%;flex-shrink:0}.ma-window{width:90%;height:155px;border-radius:20px;background:linear-gradient(120deg,#405f9b,#ad68c5);position:relative;overflow:hidden;color:#fff}.ma-window b{position:absolute;bottom:24px;left:22px;font-size:1.5rem}.ma-disc{display:block;width:75px;height:75px;border-radius:50%;background:linear-gradient(135deg,#dcffbd,#5bd5d7)}.ma-window .ma-disc{position:absolute;right:30px;top:20px}.ma-cells,.ma-stagger{display:flex;gap:14px;width:100%;justify-content:center}.ma-cell{display:grid;place-items:center;min-width:0;width:58px;height:78px;border-radius:17px;background:var(--ma-film);backdrop-filter:blur(9px);box-shadow:0 10px 14px var(--ma-shadow);font-weight:700}.ma-cell:nth-child(2){background:#8fe3e87a}.ma-cell:nth-child(3){background:#dba2e35c}.ma-expand{transform-origin:top;display:grid;gap:5px}.ma-stage-expand .ma-pane>b{display:flex;justify-content:space-between;gap:20px}.ma-shared{display:flex;gap:20px;align-items:center;width:160px;height:105px;border-radius:25px;background:var(--ma-film);backdrop-filter:blur(12px);padding:23px;box-shadow:0 15px 24px var(--ma-shadow);transform-origin:center}.ma-shared b{font-size:3rem}.ma-tabs{display:grid;grid-template-columns:repeat(3,1fr);position:relative;gap:15px;padding-bottom:15px;font-size:.72rem;white-space:nowrap}.ma-tabs>i{position:absolute;bottom:0;left:0;width:26%;height:3px;background:var(--ma-cyan);border-radius:3px;transform:translateX(140%)}.ma-stage-tab .ma-pane{width:95%;min-height:70px;justify-content:center;padding-inline:15px}.ma-crumb{display:flex;align-items:center;gap:10px;font-size:.85rem}.ma-crumb i{font-style:normal;color:var(--ma-cyan)}.ma-shell{position:relative;width:90%;height:145px;border-radius:18px;background:var(--ma-stage);padding:20px;overflow:hidden}.ma-drawer{position:absolute;right:0;top:0;bottom:0;width:65%;border-radius:0 18px 18px 0;background:var(--ma-film);padding:18px}.ma-scroll-wrap{width:94%;height:165px;display:flex;flex-direction:column;border-radius:14px;background:var(--ma-film);overflow:hidden}.ma-track{height:6px;width:100%;border-radius:8px;background:#7287a345;overflow:hidden}.ma-track i{display:block;background:var(--ma-cyan);height:100%;width:100%;transform-origin:left}.ma-scroll-fill{transform:scaleX(0)}.ma-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;height:150px;padding:14px 20px;font-size:.9rem;line-height:1.6}.ma-scroll p{padding:10px 0 18px;margin:0}.ma-landscape{position:relative;width:100%;height:160px;overflow:hidden;border-radius:15px;background:#293f5d}.ma-landscape .ma-disc{position:absolute;top:15px;left:20px;width:55px;height:55px}.ma-mountain{position:absolute;width:210px;height:140px;background:linear-gradient(140deg,#586a9e,#8368a5);border-radius:45%;bottom:-65px;right:-30px;transform:rotate(-20deg)}.ma-landscape .ma-pane{position:absolute;left:12%;top:65px;width:76%;font-size:.87rem;min-height:0;color:#fff;background:#31495d99}.ma-sticky-shell{position:relative;height:160px;width:90%;overflow:hidden;border-radius:16px;background:var(--ma-film);padding:15px}.ma-sticky-shell>.ma-a{position:relative;z-index:1;display:block;background:var(--ma-stage);padding:10px;border-radius:7px}.ma-sticky-shell>.ma-b{padding:15px 8px;display:grid;gap:10px}.ma-words{font-size:1.6rem;line-height:1.15;letter-spacing:-.05em;font-weight:700;display:grid;gap:4px;margin:0}.ma-words span{display:inline-block}.ma-word{font-size:1.2rem;letter-spacing:-.04em}.ma-word strong{position:relative}.ma-word i{position:absolute;left:0;right:0;bottom:-6px;height:4px;border-radius:4px;background:var(--ma-cyan);transform-origin:left}.ma-replace{position:relative;font-size:1.6rem;letter-spacing:-.05em;min-width:210px;height:50px;overflow:hidden}.ma-replace span,.ma-replace strong{position:absolute;inset:0;display:grid;place-items:center}.ma-replace .ma-a{opacity:0}.ma-svg{height:155px;width:100%;max-width:250px;overflow:visible}.ma-svg .ma-route{stroke:var(--ma-fg);opacity:.15;stroke-dasharray:none}.ma-orbit{position:relative;width:135px;height:135px;border-radius:50%;box-shadow:inset 1px 2px 3px #c3f5ff50,inset -3px -4px 5px #89aacb50;display:grid;place-items:center;background:var(--ma-film)}.ma-orbit b{font-size:2rem}.ma-orbit>span{position:absolute;inset:0;border-radius:inherit}.ma-orbit i{position:absolute;width:24px;height:24px;border-radius:50%;left:55px;top:-12px;background:var(--ma-neon)}.ma-shape{fill:#6ed4d6;transform-origin:center;transform-box:fill-box}.ma-bars{display:flex;align-items:end;gap:16px;height:125px;width:85%;padding:10px 0}.ma-bars i{height:var(--bar);background:linear-gradient(0deg,#318bba,#86f0db);flex:1;border-radius:9px 9px 3px 3px;transform-origin:bottom}.ma-metric>span{font-size:.75rem}.ma-number{height:73px;overflow:hidden;font-variant-numeric:tabular-nums;margin-top:8px}.ma-number .ma-target{transform:translateY(-73px)}.ma-number b{display:block;height:73px;line-height:73px;font-size:3.8rem;letter-spacing:-.06em}.ma-ring{width:140px;height:140px}.ma-ring circle{fill:none;stroke:var(--ma-cyan);stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:1;stroke-dashoffset:.25}.ma-ring .ma-route{stroke:var(--ma-fg);opacity:.15;stroke-dasharray:none;stroke-dashoffset:0}.ma-ring text{font-family:inherit;fill:var(--ma-fg);font-size:19px;font-weight:750;text-anchor:middle}.ma-loading{height:105px}.ma-skeleton,.ma-content{position:absolute;inset:22px;display:flex;flex-direction:column;gap:10px}.ma-skeleton{opacity:0}.ma-content b{font-size:.9rem}.ma-content span{font-size:.68rem}.ma-dots{display:flex;gap:15px}.ma-dots i{width:20px;height:20px;border-radius:50%;background:var(--ma-cyan)}.ma-stage-progress .ma-pane{font-size:.8rem}.ma-drag-wrap{width:86%;display:grid;gap:22px}.ma-drag-track{height:66px;border-radius:20px;background:var(--ma-film);position:relative}.ma-drag-knob{position:absolute;top:6px;left:0;width:54px;height:54px;display:grid;place-items:center;border-radius:16px;color:#17330e;background:#b9ff86;box-shadow:inset 3px 4px 5px #edffd299,inset -4px -4px 7px #6f9a5b70,0 8px 15px #05172c33;touch-action:pan-y;cursor:grab;user-select:none;font-size:1.5rem;transform:translateX(65px)}.ma-drag-knob:active{cursor:grabbing}.ma-drag-wrap small{font-size:.68rem;text-align:center}.ma-snap{display:flex;gap:18px;position:relative}.ma-snap>i{width:55px;height:70px;border-radius:15px;background:var(--ma-film)}.ma-snap>span{position:absolute;left:73px;top:-6px;width:55px;height:82px;border-radius:15px;background:var(--ma-neon);color:#17330e;display:grid;place-items:center;font-weight:750}.ma-swipe{width:90%;height:100px;position:relative;display:grid;place-items:center;color:var(--ma-cyan);font-size:.78rem}.ma-swipe .ma-pane{position:absolute;inset:0;max-width:none;width:100%;height:100%;min-height:0;justify-content:center;align-items:center;font-size:1rem;color:var(--ma-fg)}.ma-glass-3d{box-shadow:inset 3px 4px 5px #dcf7ff77,inset -5px -5px 8px #5e91b85c,0 17px 24px var(--ma-shadow);overflow:hidden}.ma-stage-light .ma-pane{height:120px;justify-content:center}.ma-shine{position:absolute;left:40%;top:-25%;height:150%;width:30px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0;transform:rotate(25deg)}.ma-optic-disc{position:absolute;width:95px;height:95px;left:20px;top:75px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#e8ffb9,#7ff369 50%,#28a6c6)}.ma-glass-2d{box-shadow:0 17px 24px var(--ma-shadow);height:125px;justify-content:center;background:var(--ma-film)}.ma-glass-2d strong,.ma-stage-light strong{align-self:start;padding:7px 9px;border-radius:10px;background:var(--ma-stage);font-size:1.1rem}.ma-prism{position:relative;width:83%;height:125px;display:grid;place-items:center}.ma-prism .ma-pane{width:100%;height:100%;min-height:0;display:grid;place-items:center;font-size:1.2rem;font-weight:700}.ma-prism>.ma-a,.ma-prism>.ma-b{position:absolute;inset:4px;border-radius:25px;background:#ff7fe095;transform:translateX(-9px)}.ma-prism>.ma-b{background:#53edff95;transform:translateX(9px)}.ma-stage-tilt .ma-pane{height:135px;transform:rotateY(-12deg) rotateX(6deg)}.ma-label{font-size:.6rem;font-weight:650;letter-spacing:.13em}.ma-stack{position:relative;width:180px;height:120px;transform:rotate(-8deg)}.ma-stack>span{position:absolute;width:140px;height:90px;border-radius:20px;background:#6edce970;box-shadow:inset 3px 4px 5px #d8ffff55,inset -4px -4px 7px #487f9c55,0 12px 15px #172c4333;backdrop-filter:blur(6px)}.ma-stack .ma-a{left:0;top:0}.ma-stack .ma-b{left:20px;top:15px;background:#bf8edb77}.ma-stack .ma-c{left:40px;top:30px;background:var(--ma-film);display:grid;place-items:center;font-size:1.3rem;font-weight:700}.ma-focus{position:relative;height:140px;width:95%}.ma-focus .ma-pane{position:absolute;width:150px;height:95px;min-height:0;display:grid;place-items:center;font-size:1rem;font-weight:700}.ma-focus .ma-a{top:0;left:0;opacity:.65}.ma-focus .ma-b{bottom:0;right:0;background:var(--ma-film)}.ma-stagger{align-items:end;gap:10px}.ma-stagger .ma-cell{height:90px}.ma-stagger .ma-b{height:115px}.ma-stagger .ma-c{height:140px}.ma-flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.ma-flow span{font-size:.7rem;background:var(--ma-film);padding:13px 9px;border-radius:12px}.ma-flow i{width:12px;height:2px;background:var(--ma-cyan)}.ma-hero{width:100%;height:165px;position:relative}.ma-hero .ma-disc{position:absolute;right:7%;top:0;width:105px;height:105px}.ma-hero .ma-b{position:absolute;left:7%;top:12px;font-size:1.65rem;line-height:1.1;letter-spacing:-.05em;background:var(--ma-film);backdrop-filter:blur(8px);border-radius:15px;padding:12px}.ma-hero .ma-c{position:absolute;bottom:0;left:7%;padding:10px 17px;font-size:.72rem;gap:8px}.ma-lab :focus-visible{outline:3px solid var(--ring);outline-offset:4px}.ma-stage :focus-visible{outline-color:var(--ma-cyan);outline-offset:-3px}
@media(max-width:1000px){.ma-map{grid-template-columns:repeat(3,minmax(0,1fr))}.ma-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-group-heading p{width:100%;margin-left:0}}
@media(max-width:650px){.ma-grid{grid-template-columns:1fr}.ma-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ma-map a{padding:14px}.ma-map small{display:none}.ma-map strong{font-size:.8rem}.ma-stage{height:225px}.ma-tools>label,.ma-tools>.btn{width:100%}.ma-tools>label:first-child{flex-basis:100%}.ma-card-body>p{min-height:0}.ma-replace{min-width:180px}.ma-lab{scroll-margin-top:90px}.ma-group{scroll-margin-top:90px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ma-pane,.ma-cell,.ma-shared,.ma-stack>span,.ma-hero .ma-b{background:var(--ma-stage)}}
.ma-lab[data-ma-reduced=true] *,.ma-lab[data-ma-reduced=true] *::before,.ma-lab[data-ma-reduced=true] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.ma-lab[data-ma-reduced=true] .btn:hover,.ma-lab[data-ma-reduced=true] .btn:active{transform:none}
:root[data-solid=true] .ma-pane,:root[data-solid=true] .ma-cell,:root[data-solid=true] .ma-shared,:root[data-solid=true] .ma-stack>span,:root[data-solid=true] .ma-hero .ma-b{background:var(--ma-stage);backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){.ma-pane,.ma-cell,.ma-shared,.ma-stack>span,.ma-hero .ma-b{background:var(--ma-stage);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){.ma-lab{--ma-stage:Canvas;--ma-fg:CanvasText;--ma-cyan:CanvasText;--ma-neon:Highlight;--ma-film:Canvas}.ma-stage::before,.ma-stage::after{display:none}.ma-pane,.ma-cell,.ma-shared,.ma-stack>span,.ma-card,.ma-map a,.ma-press,.ma-drag-knob,.ma-snap>span,.ma-orbit,.ma-hero .ma-b{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.ma-track,.ma-drag-track{border:1px solid CanvasText}.ma-track i,.ma-bars i,.ma-dots i{background:Highlight}.ma-stage,.ma-landscape{background:Canvas}.ma-shape{fill:Highlight}.ma-glass-3d{box-shadow:none}}

/* V4 motion library: the controls, routes and specimen frames share the glass
   shell. Each stage keeps its own substrate for unambiguous material demos. */
.ma-tools,.ma-map a,.ma-card{
  border:0;background:var(--glass-reflection),var(--glass-fill);
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);
}
.ma-tools{padding:25px 26px;border-radius:25px;gap:18px;margin-bottom:18px}
.ma-tools input[type=search],.ma-tools select{background:var(--glass-dense);border:0;min-height:48px;font-size:16px;border-radius:13px}
.ma-tools input[type=search]::placeholder{color:var(--muted);opacity:1}
.ma-summary{padding:0 5px 24px}
.ma-map{gap:10px;margin-bottom:50px}
.ma-map a{padding:20px;border-radius:20px;gap:8px;min-height:120px}
.ma-map a>span{font-size:.65rem;letter-spacing:.08em}.ma-map strong{font-size:.9rem;line-height:1.4}.ma-map small{font-size:.75rem}
.ma-group{margin-bottom:46px}
.ma-group-heading{gap:14px;margin-bottom:18px}
.ma-group-heading>span{font-size:.68rem;background:var(--glass-reflection),var(--glass-fill);border-radius:10px;padding:8px 10px}
.ma-group-heading h3{font-size:clamp(1.25rem,2.1vw,1.8rem);letter-spacing:-.035em}
.ma-grid{gap:20px}
.ma-card{padding:9px;border-radius:28px}
.ma-stage{border-radius:20px}
.ma-card-body{padding:21px 17px 17px}
.ma-card h4{font-size:1.12rem;line-height:1.35}
.ma-card-body>p{font-size:.84rem}
.ma-recipe[open]{padding:14px 16px 7px;margin-top:17px;border-radius:15px;background:var(--glass-dense)}
.ma-recipe[open] summary{padding-top:0}
.ma-footnote{font-size:.8rem;max-width:78ch}
@media(hover:hover) and (pointer:fine){.ma-map a:hover{background-color:var(--glass-highlight)}}
@media(max-width:650px){.ma-tools{padding:20px;gap:16px}.ma-map{gap:9px}.ma-map a{padding:16px;min-height:93px;border-radius:17px}.ma-map strong{font-size:.81rem}.ma-grid{gap:15px}.ma-card-body{padding:20px 16px 17px}.ma-summary{font-size:.77rem;padding-inline:2px}.ma-group-heading h3{font-size:1.3rem}.ma-group-heading p{font-size:.83rem}}
@media(forced-colors:active){.ma-tools,.ma-map a,.ma-card,.ma-recipe[open],.ma-group-heading>span{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.ma-tools input[type=search],.ma-tools select{background:Canvas;border:1px solid CanvasText}}