/* A dimensional model made of actual CSS 3D surfaces; no video or raster stand-in. */
.laundry-visual{position:relative;min-width:0;isolation:isolate;width:100%;height:550px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;perspective:1100px}
.model-stage{position:absolute;inset:0;perspective:1100px;touch-action:pan-y;cursor:grab;outline-offset:-4px}
.model-stage:active{cursor:grabbing}.scene-rig{position:absolute;left:50%;top:46%;width:300px;height:376px;margin-left:-150px;margin-top:-188px;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(-23deg);transition:transform 650ms cubic-bezier(.23,1,.32,1)}
.machine-float{width:100%;height:100%;transform-style:preserve-3d;animation:machine-breathe 10s ease-in-out infinite}
.machine{position:absolute;inset:0;transform-style:preserve-3d}
/* Brushed steel and commercial panel proportions follow the supplied store photograph. */
/* taste-skill-ignore: Material shading and surface grain are required for the user's 3D washer. */
.machine-face{position:absolute;backface-visibility:hidden;border:1px solid #e3e6e675}
.machine-front{width:300px;height:376px;transform:translateZ(90px);border-radius:3px;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,#1e292d12 1px 2px,transparent 2px 3px),linear-gradient(102deg,#747d80 0%,#bbc0c0 12%,#e2e4e1 26%,#b6bbba 43%,#969c9e 58%,#c4c9c8 76%,#f0f1ed 90%,#a4abad);box-shadow:inset 1px 0 0 #ffffffe0,inset -2px 0 3px #222b3240;transform-style:preserve-3d}
.machine-front::before{content:"";position:absolute;left:0;right:0;bottom:33px;height:1px;background:#53616a99;box-shadow:0 1px #f5f7f580}
.machine-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 9px 10px,#dbe1e1 0 1px,#4f5a60 1px 2px,transparent 2.5px),radial-gradient(circle at 289px 10px,#dbe1e1 0 1px,#4f5a60 1px 2px,transparent 2.5px),radial-gradient(circle at 9px 344px,#dbe1e1 0 1px,#4f5a60 1px 2px,transparent 2.5px),radial-gradient(circle at 289px 344px,#dbe1e1 0 1px,#4f5a60 1px 2px,transparent 2.5px)}
.machine-left{width:180px;height:376px;left:60px;transform:rotateY(-90deg) translateZ(150px);background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),linear-gradient(90deg,#515e65,#99a3a7 75%,#d0d5d5);border-radius:3px}
.machine-right{width:180px;height:376px;left:60px;transform:rotateY(90deg) translateZ(150px);background:repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 3px),linear-gradient(90deg,#b6bec1,#626f76);border-radius:3px}
.machine-back{width:300px;height:376px;transform:rotateY(180deg) translateZ(90px);background:#657178;border-radius:3px}
.machine-top{width:300px;height:180px;top:98px;transform:rotateX(90deg) translateZ(188px);background:repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 3px),linear-gradient(155deg,#e6e9e6,#939fa4 80%);border-radius:3px}
.machine-bottom{width:300px;height:180px;top:98px;transform:rotateX(-90deg) translateZ(188px);background:#515f68;border-radius:3px}
.machine-control{position:absolute;top:17px;left:15px;right:15px;height:58px;border-radius:2px;background:linear-gradient(110deg,#131c24,#26323b);border:1px solid #65727b;box-shadow:inset 0 1px #b9c1c833,0 1px #f4f6f6;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;transform:translateZ(2px)}
.model-brand{font-family:Oswald,sans-serif;font-size:16px;color:#fff;line-height:1.1;letter-spacing:.02em}.model-brand small{display:block;color:#5dd9f4;font:600 7px/1.7 "IBM Plex Sans",sans-serif;letter-spacing:.16em}
.machine-display{background:#06152d;color:#6be0ed;padding:5px 8px;border:1px solid #1c4763;border-radius:3px;font-size:10px;line-height:1.4;min-width:57px;text-align:center;font-variant-numeric:tabular-nums}.machine-display b{display:block;letter-spacing:.1em;font-size:13px} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
/* A recessed coin receiver replaces the domestic-style rotary dial. */
/* taste-skill-ignore: Metallic shading gives the commercial controls and drum their depth. */
.machine-dial{width:27px;height:36px;border-radius:2px;background:linear-gradient(95deg,#9da7aa,#e3e7e5 38%,#7c898f);border:1px solid #64727c;box-shadow:1px 2px 3px #0006;position:relative}
.machine-dial::before{content:"";position:absolute;left:10px;top:5px;width:4px;height:17px;border-radius:2px;background:#101a21;box-shadow:1px 0 #f6f8f9}
.machine-dial::after{content:"";position:absolute;left:6px;bottom:4px;width:13px;height:4px;background:#3f4b53;box-shadow:0 1px #e8edec}
.drawer{position:absolute;top:89px;left:22px;width:69px;height:12px;border-bottom:2px solid #6b777c;background:linear-gradient(#8e989b,#c1c8c8);border-radius:1px}.machine-capacity{position:absolute;top:89px;right:22px;color:#233640;font:600 9px/1 "IBM Plex Sans",sans-serif;letter-spacing:.04em}
.drum-chamber{position:absolute;width:211px;height:211px;left:43px;top:116px;border-radius:50%;background:#121b24;border:10px solid #1b232c;box-shadow:0 2px 0 2px #e6eceb,inset 0 0 0 3px #58656d,inset 0 0 22px #000;overflow:hidden;transform:translateZ(1px);perspective:390px;perspective-origin:62% 35%}
/* The 18 interior facets extend 92px behind the opening; the back is a separate plane. */
.drum{position:absolute;inset:2px;border-radius:50%;transform-style:preserve-3d;animation:drum-turn 7.2s linear infinite}
.drum-back{position:absolute;inset:7px;transform:translateZ(-92px);border-radius:50%;border:3px solid #78898f;background:radial-gradient(circle,#0c1920 1px,#a2adb155 1.2px,transparent 1.8px) 0 0/7px 7px,radial-gradient(circle at 42% 32%,#718089,#34444e 74%);box-shadow:inset 0 0 20px 6px #0b151be0}
.drum-back::after{content:"";position:absolute;inset:35%;border:3px solid #9aa7ac80;border-radius:50%;background:conic-gradient(#8e9a9d,#2e3b45,#859498,#394952,#8e9a9d);box-shadow:0 0 0 3px #1d2b34,0 2px 10px #09131b}
.drum-wall{position:absolute;width:33px;height:92px;left:calc(50% - 16.5px);top:calc(50% - 46px);transform:rotateZ(var(--a)) translateY(-88px) rotateX(90deg) translateY(-46px);background:radial-gradient(circle,#0c1821 1px,#b8c1c666 1.3px,transparent 1.8px) 0 0/7px 7px,linear-gradient(0deg,#b0b9bc,#7a8b94 38%,#293b48 100%);border-inline:1px solid #8b989a30}
.drum-wall:nth-of-type(6n+1)::after{content:"";position:absolute;inset:0 9px;background:linear-gradient(90deg,#2b414e,#b7c1c5 35%,#6c7c86 66%,#213542);box-shadow:3px 0 5px #08131c88;transform:translateZ(4px)}
.drum-lip{position:absolute;inset:0;border-radius:50%;box-shadow:inset 6px 10px 15px #06101ac9,inset -3px -3px 7px #c5d4da70;pointer-events:none;transform:translateZ(8px)}
/* Independent lift, release and settling keep the load weighted at the bottom. */
.laundry-load{position:absolute;inset:5px;transform:translateZ(-5px)}
.drum-cloth{--cloth-size:1;position:absolute;left:0;top:0;width:68px;height:55px;border-radius:40% 28% 36% 22% / 28% 36% 42% 32%;background:linear-gradient(135deg,transparent 30%,#fffffff0 32%,#899cae55 35%,transparent 40%),linear-gradient(65deg,#a3b3be,#e9eeec 38%,#a4b4bf 43%,#f3f7f4 65%,#b6c2c7);box-shadow:inset 3px 4px 6px #ffffff65,inset -6px -7px 8px #253a4c55,2px 4px 5px #07132080;transform:translate(53px,112px) rotate(15deg);animation:cloth-tumble 5.6s linear infinite}
.drum-cloth::after{content:"";position:absolute;inset:11% 17% 18% 24%;border-radius:36% 45% 24% 40%;border-left:3px solid #ffffff48;border-bottom:2px solid #1e3f5633;transform:rotate(-20deg)}
.drum-cloth.two{--cloth-size:1.05;width:72px;height:56px;background:linear-gradient(125deg,transparent 24%,#acdaf073 26%,#174e7370 31%,transparent 38%),linear-gradient(50deg,#244b68,#709eb8 40%,#294e6b 48%,#83b3c8 80%,#3e6680);animation-duration:6.1s;animation-delay:-2.2s;transform:translate(82px,102px) rotate(-27deg)}
.drum-cloth.three{--cloth-size:.87;height:49px;animation-duration:5.2s;animation-delay:-3.5s;transform:translate(21px,110px) rotate(24deg)}
.drum-cloth.four{--cloth-size:.78;width:63px;height:58px;background:linear-gradient(25deg,#799ca5,#bdd0cf 35%,#6f929e 43%,#d4e0da 70%,#8ba7af);animation-duration:6.6s;animation-delay:-1.2s;transform:translate(61px,87px) rotate(-15deg)}
.drum-cloth.five{--cloth-size:.7;width:61px;height:49px;animation-duration:5.8s;animation-delay:-4.6s;transform:translate(34px,121px) rotate(50deg)}
.door-hinge{position:absolute;width:231px;height:231px;left:33px;top:106px;transform:translateZ(17px);transform-style:preserve-3d;transform-origin:10px 50%;transition:transform 900ms cubic-bezier(.23,1,.32,1)}
.door-open .door-hinge{transform:translateZ(17px) rotateY(-84deg)}
.door-ring{position:absolute;inset:0;border-radius:50%;background:transparent;box-shadow:0 4px 6px #00173380,inset 0 0 0 2px #fcffff;transform-style:preserve-3d} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.door-ring::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 35deg,#d6e3ed,#fff 18%,#6685a1 29%,#e8f2fa 41%,#9fb6c8 48%,#f4faff 60%,#6a89a3 73%,#f4faff 87%,#d6e3ed);mask-image:radial-gradient(circle,transparent 60%,black 61%);-webkit-mask-image:radial-gradient(circle,transparent 60%,black 61%);pointer-events:none} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.door-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;border:5px solid #102c45;box-shadow:0 0 0 2px #738ea1,inset 0 0 0 2px #c7dfe9} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.door-glass{position:absolute;inset:23px;border-radius:50%;background:linear-gradient(125deg,#acdffa50 0%,#d8f8ff11 34%,#15518c30 53%,#b6e8ff30 75%,#14345d70);border:1px solid #c4e7f2a8;box-shadow:inset -10px -8px 18px #03162e55,inset 3px 5px 8px #e1f7ff50;transform:translateZ(2px)} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.door-glass::after{content:"";position:absolute;inset:12px 65px 80px 20px;border-radius:50%;background:linear-gradient(120deg,#f5ffff70,transparent);transform:rotate(-30deg)} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.door-handle{position:absolute;right:-2px;top:91px;width:20px;height:51px;background:linear-gradient(90deg,#1a3451,#04172d);border-radius:5px 8px 8px 5px;transform:translateZ(15px);box-shadow:4px 4px 5px #00132b50} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.machine-vent{position:absolute;bottom:17px;left:24px;width:78px;height:9px;background:repeating-linear-gradient(90deg,#4b6c87 0 2px,transparent 2px 5px);opacity:.7}.machine-foot{position:absolute;bottom:-9px;width:35px;height:12px;border-radius:0 0 4px 4px;background:#10263e;transform:translateZ(65px)}.machine-foot.left{left:25px}.machine-foot.right{right:25px} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.model-shadow{position:absolute;top:84%;left:50%;width:350px;height:55px;margin-left:-175px;background:radial-gradient(ellipse,#010b23b3,transparent 69%);transform:rotate(-5deg);opacity:.7} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.floating-towels{position:absolute;right:-34px;top:-36px;width:110px;height:63px;transform-style:preserve-3d;transform:translateZ(10px) rotateZ(10deg) rotateY(-6deg);animation:towel-float 11s ease-in-out infinite;pointer-events:none}
.towel{position:absolute;width:110px;height:27px;left:0;border-radius:8px;background:linear-gradient(#f5fcff,#b8d6e8);box-shadow:inset 0 -3px 3px #5388aa40,2px 5px 12px #03295840;transform:translateZ(0)}.towel::after{content:"";position:absolute;right:8px;top:5px;bottom:5px;border-left:2px solid #afcbda;border-right:1px solid #fff;width:5px}.towel:nth-child(1){top:36px;background:linear-gradient(#42c5ee,#007dad)}.towel:nth-child(2){top:18px;left:-5px;transform:rotate(-4deg)}.towel:nth-child(3){top:0;left:4px;transform:rotate(3deg)} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.soap-bubble{position:absolute;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 28% 24%,#fff9 0%,#c2eaff30 16%,#0987c805 45%,#8ee6ff20 66%,#c1fbff6e 78%,#96d9ff09 88%);border:1px solid #a4e0f566;box-shadow:inset -4px -4px 9px #0d58a02b;pointer-events:none;animation:bubble-drift 12s ease-in-out infinite}.soap-bubble::after{content:"";position:absolute;left:10px;top:8px;width:14px;height:8px;border-radius:50%;background:#e5faff80;transform:rotate(-35deg)}.soap-bubble.one{top:14%;left:7%;width:38px;height:38px;animation-delay:-3s}.soap-bubble.two{top:49%;right:0%;width:70px;height:70px;animation-delay:-6s}.soap-bubble.three{top:70%;left:5%;width:25px;height:25px;animation-delay:-1s} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
.model-caption{position:relative;z-index:4;text-align:center;width:100%;padding-top:5px}.model-caption>p{font-size:12px;color:#c9e3fb;line-height:1.4}.model-controls{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px}.model-control{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 13px;font-size:13px;color:white;background:#102e63;border:1px solid #7395bf66;border-radius:24px;transition:background-color 160ms ease,transform 160ms var(--ease)}.model-control svg{width:15px;height:15px}.model-control:hover{background:#17447d}.model-control:active{transform:scale(.97)}.model-control[aria-pressed=true]{background:#1b4c85}.motion-paused .drum-cloth,.motion-paused .drum,.motion-paused .machine-float,.motion-paused .floating-towels,.motion-paused .soap-bubble,.motion-offscreen .drum-cloth,.motion-offscreen .drum,.motion-offscreen .machine-float,.motion-offscreen .floating-towels,.motion-offscreen .soap-bubble,.door-open .drum,.door-open .drum-cloth{animation-play-state:paused} /* taste-skill-ignore: User-requested 3D geometry: material light, metallic edges, and depth. */
@keyframes drum-turn{to{transform:rotate(360deg)}}
@keyframes cloth-tumble{
  0%{transform:translate(53px,112px) rotate(15deg) scale(var(--cloth-size));animation-timing-function:cubic-bezier(.37,0,.63,1)}
  25%{transform:translate(8px,76px) rotate(65deg) scale(calc(var(--cloth-size) * .96),var(--cloth-size))}
  45%{transform:translate(2px,28px) rotate(126deg) scale(var(--cloth-size),calc(var(--cloth-size) * 1.05));animation-timing-function:cubic-bezier(.32,0,.67,.45)}
  60%{transform:translate(62px,98px) rotate(238deg) scale(var(--cloth-size))}
  66%{transform:translate(72px,117px) rotate(272deg) scale(calc(var(--cloth-size) * 1.09),calc(var(--cloth-size) * .86));animation-timing-function:cubic-bezier(.16,1,.3,1)}
  78%{transform:translate(65px,109px) rotate(330deg) scale(var(--cloth-size))}
  100%{transform:translate(53px,112px) rotate(375deg) scale(var(--cloth-size))}
}
@keyframes machine-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes towel-float{0%,100%{transform:translateZ(10px) translateY(0) rotateZ(10deg)}50%{transform:translateZ(13px) translateY(-4px) rotateZ(8deg)}}
@keyframes bubble-drift{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-8px) translateX(3px)}}
@media(max-width:1100px) and (min-width:821px){.laundry-visual{height:500px}.scene-rig{scale:.87}.model-stage{inset:-5px 0 0}.model-caption>p{font-size:11px}.model-control{font-size:12px;padding:8px 10px}}
@media(max-width:820px){.laundry-visual{height:450px;max-width:620px;justify-self:center;margin-top:14px}.scene-rig{scale:.84;top:44%}.soap-bubble.one{left:12%}.soap-bubble.two{right:8%}.model-shadow{top:80%}}
@media(max-width:580px){.laundry-visual{height:385px;margin-top:15px}.scene-rig{scale:.68;top:43%;margin-left:-155px}.floating-towels{right:-26px;top:-30px}.soap-bubble.one{left:5%;top:12%}.soap-bubble.two{right:0;top:40%;width:45px;height:45px}.soap-bubble.three{top:65%;left:2%}.model-caption{padding-top:0}.model-caption>p{font-size:11px}.model-controls{gap:6px;margin-top:10px}.model-control{font-size:12px;min-height:40px;padding:8px 10px}.model-shadow{top:76%;width:280px;margin-left:-140px}}
.model-control[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.machine-float,.drum,.drum-cloth,.floating-towels,.soap-bubble{animation:none!important}.scene-rig,.door-hinge{transition:none!important}}