/* AptaLoom / material in motion */
:root{--studio:#b8e86b;--studio-rgb:184,232,107}body{overflow-x:clip}header{height:82px}.preview-bar{background:#102b22}.hero{background:#102b22;color:#f5f4ec;min-height:740px;grid-template-columns:1fr 1.04fr;position:relative}.hero-copy{padding:85px 6% 35px 10%;position:relative;z-index:2}.hero h1{font-size:clamp(52px,5.6vw,88px);letter-spacing:-.065em;line-height:1.04;margin:32px 0}.hero h1 em{color:#d0e6a5;display:inline-block}.hero-copy>.eyebrow{color:#bed1b6;font-size:9px}.hero-copy>p{color:#b4c5b9;font-size:15px;max-width:350px}.hero .dark{background:#d0e6a5;color:#163a2d;border-radius:0}.hero-foot{color:#8da697;border-top:1px solid #ffffff24;margin-top:65px;padding-top:20px}.hero-art{background:#102b22;isolation:isolate;min-height:650px;perspective:1100px;--tilt-x:0deg;--tilt-y:0deg}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#a1c18f0b 1px,transparent 1px),linear-gradient(90deg,#a1c18f0b 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(ellipse,black,transparent 70%)}.stage-glow{position:absolute;inset:5% -10% 15%;background:radial-gradient(ellipse,rgba(var(--studio-rgb),.2),transparent 65%);transition:background .7s}.stage-kicker{position:absolute;top:37px;left:8%;font-size:8px;letter-spacing:.2em;color:#afc2ac}.spool-stage{position:relative;width:340px;height:390px;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .4s ease-out;margin-top:-20px}.hero-spool{position:absolute;left:28px;top:60px;transform:rotate(-19deg) scale(1.32);animation:spool-float 7s ease-in-out infinite;filter:drop-shadow(24px 40px 18px #0006)}.hero-spool .spool-front{background:radial-gradient(ellipse at 20% 20%,#536c53,#173124 75%);border:5px solid #6e8760;box-shadow:inset 4px 0 3px #d2e4bd55,10px 0 0 #102719}.hero-spool .spool-back{border:5px solid #69845a;background:#1d3828;left:88px}.hero-spool .spool-core{left:106px;width:158px;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 2px),linear-gradient(90deg,#324b22,var(--filament) 50%,#698246);transition:background .7s}.hero-spool .spool-label{inset:55px 35px;background:#e5ebd4;box-shadow:0 0 0 1px #afbd91,0 0 0 5px #143122;z-index:2;padding-top:15px}.hero-spool .spool-label strong{font-size:25px}.hero-spool .spool-hole{z-index:3}.rotor{position:absolute;inset:12px;border-radius:50%;animation:rotor-turn 28s linear infinite;transform-origin:50% 50%}.rotor i{position:absolute;left:calc(50% - 10px);top:7px;width:20px;height:35px;border-radius:50%;background:#081d15;box-shadow:inset 0 2px 3px #000,0 1px 1px #94a681;transform-origin:10px 106px}.rotor i:nth-child(2){transform:rotate(60deg)}.rotor i:nth-child(3){transform:rotate(120deg)}.rotor i:nth-child(4){transform:rotate(180deg)}.rotor i:nth-child(5){transform:rotate(240deg)}.rotor i:nth-child(6){transform:rotate(300deg)}.filament-flow{position:absolute;inset:3% 0 0;width:100%;height:90%;pointer-events:none;overflow:visible;z-index:1}.filament-flow path{fill:none;stroke-linecap:round;stroke-width:3}.flow-base{stroke:var(--studio);opacity:.6;transition:stroke .6s}.flow-light{stroke:#efffcf;stroke-dasharray:80 700;animation:filament-run 5s linear infinite;filter:drop-shadow(0 0 5px var(--studio))}.studio-label{position:absolute;bottom:140px;left:8%;right:8%;display:flex;justify-content:space-between;color:#c4d5ba;font-size:8px;letter-spacing:.12em}.studio-label span:last-child{font-size:6px;align-self:center;color:#96ac94}.studio-controls{position:absolute;left:8%;right:8%;bottom:34px;display:flex;align-items:end;justify-content:space-between;gap:15px;border-top:1px solid #ffffff26;padding-top:20px;z-index:5}.control-label{font-size:7px;letter-spacing:.17em;color:#a9bea4}.material-dial{display:flex;gap:9px;margin-top:13px}.material-dial button{width:30px;height:30px;border:1px solid transparent;border-radius:50%;padding:4px;background:transparent;transition:transform .2s,border-color .2s}.material-dial button:before{content:'';display:block;width:100%;height:100%;border-radius:50%;background:var(--chip);box-shadow:inset 0 0 0 1px #ffffff30}.material-dial button:hover{transform:translateY(-4px)}.material-dial button[aria-pressed=true]{border-color:#e4efcf;transform:scale(1.13)}.motion-toggle{background:none;border:1px solid #839b7855;color:#cbdcc0;font-size:9px;padding:10px 12px;min-height:40px;white-space:nowrap}.marquee{background:#d0e6a5;padding:21px 0}.marquee .marquee-track{width:max-content;display:flex;justify-content:start;gap:45px;animation:ticker 35s linear infinite}.marquee-track span{font-size:12px}.marquee-track b{font-size:18px;font-weight:400}.process-story{padding:85px 5%;display:grid;grid-template-columns:1fr 1.35fr;gap:8%;border-bottom:1px solid var(--line)}.story-title h2{font-size:42px}.story-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.story-steps article{border-top:1px solid #b7c6a7;padding-top:18px;position:relative}.story-steps article:before{content:'';height:2px;background:#315b37;position:absolute;top:-1px;left:0;width:100%;transform:scaleX(var(--story-progress,0));transform-origin:left}.story-steps span{font-size:8px;letter-spacing:.12em;color:#708068}.story-steps h3{font-size:19px;line-height:1.25;letter-spacing:-.04em;margin:32px 0 12px;font-weight:500}.story-steps p{font-size:12px;color:var(--muted)}.card-art{border-radius:3px;transition:background .3s,box-shadow .3s}.card:hover .card-art{box-shadow:0 14px 28px #193a2d12}.card-art .spool{transition:transform .65s cubic-bezier(.2,.7,.2,1)}.card-art:hover .spool{transform:translateY(-9px) rotate(-5deg) scale(.76)}.card{animation:card-enter .5s both}.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}.card:nth-child(6){animation-delay:.25s}.add{transition:background .25s,transform .25s}.add:hover{transform:rotate(90deg)}.swatches i{transition:transform .2s}.card:hover .swatches i:nth-child(2){transform:translateY(-3px)}.card:hover .swatches i:nth-child(3){transform:translateY(-6px)}.bulk-art{background:#d5dfc4}.layer-object i{transition:transform .6s;transform:translateX(calc((1 - var(--build-progress,1))*var(--layer-shift,0px))) translateY(calc((1 - var(--build-progress,1))*-28px))}.layer-object i:nth-child(even){--layer-shift:60px}.layer-object i:nth-child(odd){--layer-shift:-60px}.layer-object{animation:object-float 9s ease-in-out infinite}.closing{position:relative;overflow:hidden}.closing:before{content:'';position:absolute;width:600px;height:600px;border:1px solid #b7cba460;border-radius:50%;left:calc(50% - 300px);top:-70px;pointer-events:none}.closing>*{position:relative}dialog[open]{animation:dialog-in .25s ease-out}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}.paused .spool-stage{transform:none!important}.paused .layer-object i{transform:none!important}@keyframes spool-float{0%,100%{transform:translateY(0) rotate(-19deg) scale(1.32)}50%{transform:translateY(-16px) rotate(-13deg) scale(1.32)}}@keyframes rotor-turn{to{transform:rotate(360deg)}}@keyframes filament-run{to{stroke-dashoffset:-780}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes card-enter{from{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes object-float{50%{translate:0 -12px}}
@media(max-width:1000px){.hero h1{font-size:60px}.hero-copy{padding-top:75px}.hero{min-height:670px}.spool-stage{scale:.9}.process-story{gap:5%;grid-template-columns:1fr 1.5fr}.story-title h2{font-size:34px}.story-steps{gap:15px}.studio-controls{left:5%;right:5%}.material-dial{gap:5px}.motion-toggle{font-size:8px;padding:8px}.hero-foot{font-size:7px}}
@media(max-width:640px){header{height:74px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:40px 6% 0}.hero h1{font-size:clamp(45px,12vw,65px);margin:24px 0}.hero-copy>p{font-size:13px;max-width:320px}.hero .button{padding:16px 20px}.hero-foot{display:none}.hero-art{min-height:490px;margin-top:12px}.spool-stage{scale:.85;margin-top:-20px}.stage-kicker{top:10px;font-size:7px;left:6%}.stage-glow{inset:0}.studio-label{left:6%;right:6%;bottom:114px;font-size:7px}.studio-label span:last-child{font-size:5px}.studio-controls{left:6%;right:6%;bottom:20px;padding-top:13px}.material-dial{gap:7px;margin-top:9px}.material-dial button{width:28px;height:28px}.motion-toggle{min-height:38px}.filament-flow{top:-15px;height:94%}.process-story{padding:50px 6%;grid-template-columns:1fr;gap:35px}.story-title h2{font-size:38px}.story-steps{gap:13px}.story-steps h3{font-size:17px;margin-top:22px}.story-steps p{font-size:10px}.story-steps span{font-size:6px}.marquee{padding:16px 0}.marquee .marquee-track{gap:28px}.marquee-track span{font-size:10px}.card-art:hover .spool{transform:translateY(-4px) rotate(-8deg) scale(.51)}.closing:before{width:380px;height:380px;left:calc(50% - 190px);top:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.spool-stage{transform:none!important}.layer-object i{transform:none!important}.story-steps article:before{transform:scaleX(1)}}

.motion-toggle:disabled{cursor:default;opacity:.8}.material-dial button{min-width:34px;min-height:34px}.material-dial{gap:5px}@media(max-width:640px){.material-dial{gap:4px}.studio-controls{gap:8px}.motion-toggle{padding:8px}.material-dial button{min-width:34px;min-height:34px}}