.car-hero-visual-demo-host{--car-hero-design-w: 760px;--car-hero-stage-h: 360px;width:var(--car-hero-design-w);--window-dark: #46505f;--window-light: #eef4fb;--sky-top: #cfe8ff;--sky-bottom: #eef7ff;--mountain-back: #a9bfd2;--mountain-front: #7894aa;--green: var(--color-demo-sage);--green-soft: var(--color-demo-sage-soft);--green-muted: var(--color-demo-sage-muted);--green-hill: var(--color-demo-sage-hill);--green-mid: var(--color-demo-sage-mid);--green-ground: var(--color-demo-sage-ground);--tree-dark: var(--green-muted);--tree-light: var(--green);--grass: var(--green-mid);--road: #353943;--road-line: rgba(255,255,255,.62);--car-red: #ff4f5f;--car-dark: #1f2530;--car-glass: #c9f0ff;--shadow: rgba(14, 20, 30, .2)}.car-hero-visual-demo-host *{box-sizing:border-box}.car-hero-visual-demo-host .hero-card{width:var(--car-hero-design-w);padding:30px;border-radius:32px;background:#ffffffb8;border:1px solid rgba(16,24,40,.09);box-shadow:0 24px 60px #11182714}html.dark .car-hero-visual-demo-host .hero-card{background:#ffffff0d;border-color:#ffffff1a;box-shadow:none}.car-hero-visual-demo-host .browser{overflow:hidden;border-radius:18px;border:1px solid rgba(17,24,39,.14);background:#fff;box-shadow:0 18px 36px #1118271a}.car-hero-visual-demo-host .browser-bar{position:relative;height:52px;display:flex;align-items:center;gap:10px;padding:0 22px;background:linear-gradient(180deg,#4b5563,#404958);color:#ffffffc7;font-weight:700;font-size:14px;letter-spacing:-.01em}.car-hero-visual-demo-host .dot{width:13px;height:13px;border-radius:999px;background:#ffffffb8}.car-hero-visual-demo-host .browser-title{margin-left:auto}.car-hero-visual-demo-host .stage{position:relative;height:var(--car-hero-stage-h);overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 68%,var(--green-hill) 68%,var(--green-ground) 100%);isolation:isolate;cursor:pointer;user-select:none}.car-hero-visual-demo-host .stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 17% 20%,#ffffffd9 0 42px,#fff0 43px),radial-gradient(circle at 65% 28%,#ffffff8c,#fff0 18rem);z-index:0;pointer-events:none}.car-hero-visual-demo-host .sun{position:absolute;top:30px;right:62px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#fff6b3 0 38%,#ffd166 39% 70%,#ffd16600 72%);filter:drop-shadow(0 0 22px rgba(255,209,102,.55));z-index:1}.car-hero-visual-demo-host .cloud{position:absolute;width:118px;height:34px;border-radius:999px;background:#ffffffd6;box-shadow:26px -16px 0 4px #ffffffd6,58px -7px 0 8px #ffffffd6;opacity:.82;z-index:2;animation-play-state:paused}.car-hero-visual-demo-host .cloud.one{top:52px;left:-160px;animation:cloudDrift 16s linear infinite}.car-hero-visual-demo-host .cloud.two{top:88px;left:-240px;transform:scale(.72);opacity:.58;animation:cloudDrift 22s linear infinite;animation-delay:-7s}.car-hero-visual-demo-host .stage.playing .cloud{animation-play-state:running}@keyframes cloudDrift{to{transform:translate(calc(var(--car-hero-design-w) + 520px))}}.car-hero-visual-demo-host .mountain-layer{position:absolute;left:0;right:0;bottom:112px;height:145px;z-index:3;transform:translateZ(0)}.car-hero-visual-demo-host .mountain-layer.back{opacity:.72}.car-hero-visual-demo-host .mountain-layer.front{bottom:96px;height:155px}.car-hero-visual-demo-host .stage.playing .mountain-layer.back{animation:mountainsBack 7s cubic-bezier(.2,.75,.25,1) forwards}.car-hero-visual-demo-host .stage.playing .mountain-layer.front{animation:mountainsFront 7s cubic-bezier(.2,.75,.25,1) forwards}.car-hero-visual-demo-host .mountains{position:absolute;width:180%;inset:0 0 0 -40%}.car-hero-visual-demo-host .peak{position:absolute;bottom:0;width:260px;height:168px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(135deg,#ffffff59,#fff0 35%),var(--mountain-back)}.car-hero-visual-demo-host .front .peak{background:linear-gradient(135deg,#ffffff47,#fff0 34%),var(--mountain-front)}.car-hero-visual-demo-host .peak:nth-child(1){left:2%;transform:scale(.78)}.car-hero-visual-demo-host .peak:nth-child(2){left:17%;transform:scale(1.05)}.car-hero-visual-demo-host .peak:nth-child(3){left:34%;transform:scale(.88)}.car-hero-visual-demo-host .peak:nth-child(4){left:50%;transform:scale(1.15)}.car-hero-visual-demo-host .peak:nth-child(5){left:69%;transform:scale(.82)}@keyframes mountainsBack{0%{transform:translate(0)}to{transform:translate(-34px)}}@keyframes mountainsFront{0%{transform:translate(0)}to{transform:translate(-72px)}}.car-hero-visual-demo-host .forest{position:absolute;left:-18%;right:-18%;bottom:88px;height:92px;z-index:5;transform:translate(0)}.car-hero-visual-demo-host .stage.playing .forest{animation:forestMove 7s cubic-bezier(.2,.75,.25,1) forwards}@keyframes forestMove{0%{transform:translate(0)}to{transform:translate(-190px)}}.car-hero-visual-demo-host .tree{position:absolute;bottom:0;width:42px;height:86px}.car-hero-visual-demo-host .tree:before,.car-hero-visual-demo-host .tree:after{content:"";position:absolute;left:50%;transform:translate(-50%);clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(135deg,var(--tree-light),var(--tree-dark))}.car-hero-visual-demo-host .tree:before{bottom:20px;width:52px;height:72px}.car-hero-visual-demo-host .tree:after{bottom:44px;width:38px;height:52px;filter:brightness(1.08)}.car-hero-visual-demo-host .trunk{position:absolute;left:50%;bottom:0;width:10px;height:28px;transform:translate(-50%);border-radius:4px;background:#8b5a2b}.car-hero-visual-demo-host .tree:nth-child(1){left:2%;transform:scale(.74)}.car-hero-visual-demo-host .tree:nth-child(2){left:10%;transform:scale(.98)}.car-hero-visual-demo-host .tree:nth-child(3){left:18%;transform:scale(.66)}.car-hero-visual-demo-host .tree:nth-child(4){left:27%;transform:scale(1.12)}.car-hero-visual-demo-host .tree:nth-child(5){left:36%;transform:scale(.82)}.car-hero-visual-demo-host .tree:nth-child(6){left:46%;transform:scale(1.02)}.car-hero-visual-demo-host .tree:nth-child(7){left:57%;transform:scale(.7)}.car-hero-visual-demo-host .tree:nth-child(8){left:67%;transform:scale(1.16)}.car-hero-visual-demo-host .tree:nth-child(9){left:78%;transform:scale(.88)}.car-hero-visual-demo-host .tree:nth-child(10){left:88%;transform:scale(1.02)}.car-hero-visual-demo-host .tree:nth-child(11){left:100%;transform:scale(.74)}.car-hero-visual-demo-host .tree:nth-child(12){left:110%;transform:scale(1.08)}.car-hero-visual-demo-host .road-wrap{position:absolute;left:0;right:0;bottom:0;height:122px;z-index:9;background:linear-gradient(180deg,rgba(36,51,42,.35) 0 10px,transparent 10px),linear-gradient(180deg,var(--grass) 0 25px,var(--road) 26px 100%)}.car-hero-visual-demo-host .road-wrap:before{content:"";position:absolute;left:0;right:0;top:61px;height:5px;background:repeating-linear-gradient(90deg,var(--road-line) 0 48px,transparent 48px 88px);background-position-x:0;animation:roadLines .45s linear infinite paused}.car-hero-visual-demo-host .stage.playing .road-wrap:before{animation-play-state:running}@keyframes roadLines{to{background-position-x:-88px}}.car-hero-visual-demo-host .car-group{position:absolute;left:7%;bottom:69px;width:170px;height:76px;z-index:14;transform:translate(-220px) translateY(2px);will-change:transform}.car-hero-visual-demo-host .stage.playing .car-group{animation:carDrive 7s cubic-bezier(.12,.72,.24,1) forwards}@keyframes carDrive{0%{transform:translate(-220px) translateY(2px)}11%{transform:translate(154px) translateY(0)}28%{transform:translate(291px) translateY(-1px)}58%{transform:translate(463px) translateY(0)}78%{transform:translate(531px) translateY(-1px)}to{transform:translate(calc(var(--car-hero-design-w) + 240px)) translateY(1px)}}.car-hero-visual-demo-host .car-shadow{position:absolute;left:9px;right:14px;bottom:-7px;height:18px;border-radius:50%;background:#00000047;filter:blur(5px);animation:shadowPulse .22s linear infinite paused}.car-hero-visual-demo-host .stage.playing .car-shadow{animation-play-state:running}@keyframes shadowPulse{50%{transform:scaleX(.94);opacity:.75}}.car-hero-visual-demo-host .car{position:absolute;left:0;bottom:8px;width:170px;height:68px;animation:carBounce .28s linear infinite paused;transform-origin:50% 100%}.car-hero-visual-demo-host .stage.playing .car{animation-play-state:running}@keyframes carBounce{0%,to{transform:translateY(0) rotate(.15deg)}50%{transform:translateY(-2px) rotate(-.15deg)}}.car-hero-visual-demo-host .car-body{position:absolute;left:8px;bottom:8px;width:150px;height:42px;border-radius:28px 38px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 46%),linear-gradient(90deg,#ff6b77,var(--car-red));box-shadow:inset 0 -8px 12px #00000029,0 9px 16px #00000029}.car-hero-visual-demo-host .car-top{position:absolute;left:42px;bottom:41px;width:76px;height:35px;border-radius:34px 38px 4px 4px;background:linear-gradient(180deg,#ff7e89,#f04052);clip-path:polygon(13% 100%,25% 18%,70% 0,100% 100%);box-shadow:inset 0 -7px 9px #00000021}.car-hero-visual-demo-host .window{position:absolute;bottom:45px;height:24px;background:linear-gradient(135deg,#effcff,var(--car-glass));border:3px solid rgba(31,37,48,.92);box-shadow:inset 0 -5px 8px #27a4d22e}.car-hero-visual-demo-host .window.front{left:82px;width:32px;border-radius:2px 18px 2px 2px;transform:skew(12deg)}.car-hero-visual-demo-host .window.back{left:48px;width:34px;border-radius:18px 2px 2px;transform:skew(-12deg)}.car-hero-visual-demo-host .bumper{position:absolute;right:2px;bottom:18px;width:14px;height:10px;border-radius:10px;background:#f3f4f6}.car-hero-visual-demo-host .light{position:absolute;right:13px;bottom:32px;width:13px;height:9px;border-radius:999px;background:#ffe08a;box-shadow:0 0 16px #ffe08ae6}.car-hero-visual-demo-host .wheel{position:absolute;bottom:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#d9dee8 0 20%,#5b6472 21% 32%,var(--car-dark) 33% 100%);border:4px solid #171b22;box-shadow:inset 0 0 0 3px #ffffff14;animation:wheelSpin .42s linear infinite paused}.car-hero-visual-demo-host .wheel:before,.car-hero-visual-demo-host .wheel:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:24px;border-radius:4px;background:#ffffff57;transform:translate(-50%,-50%)}.car-hero-visual-demo-host .wheel:after{transform:translate(-50%,-50%) rotate(90deg)}.car-hero-visual-demo-host .wheel.left{left:32px}.car-hero-visual-demo-host .wheel.right{right:29px}.car-hero-visual-demo-host .stage.playing .wheel{animation-play-state:running}@keyframes wheelSpin{to{transform:rotate(360deg)}}.car-hero-visual-demo-host .dust{position:absolute;left:-6px;bottom:8px;width:20px;height:10px;border-radius:50%;background:#ffffff61;filter:blur(3px);opacity:0;animation:dustTrail .55s linear infinite paused}.car-hero-visual-demo-host .dust.two{bottom:16px;animation-delay:-.2s;transform:scale(.75)}.car-hero-visual-demo-host .stage.playing .dust{animation-play-state:running}@keyframes dustTrail{0%{opacity:0;transform:translate(0) scale(.6)}18%{opacity:.72}to{opacity:0;transform:translate(-52px) scale(1.7)}}.car-hero-visual-demo-host .finish-sign{position:absolute;right:24px;bottom:108px;width:150px;height:112px;z-index:7;transform:translateY(16px) scale(.92);opacity:0}.car-hero-visual-demo-host .stage.playing .finish-sign{animation:signReveal 7s ease forwards}.car-hero-visual-demo-host .finish-sign:before{content:"";position:absolute;left:71px;top:36px;width:7px;height:72px;border-radius:5px;background:#8b5a2b}.car-hero-visual-demo-host .sign-board{position:absolute;top:0;left:0;width:150px;height:52px;display:grid;place-items:center;border-radius:14px;background:#ffffffeb;border:1px solid rgba(17,24,39,.15);box-shadow:0 10px 22px #0000001f;color:#2f3a4a;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}@keyframes signReveal{0%,62%{opacity:0;transform:translateY(16px) scale(.92)}73%,to{opacity:1;transform:translateY(0) scale(1)}}.car-hero-visual-demo-host .stage:not(.playing){cursor:pointer}.car-hero-visual-demo-host .play-overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:20;background:radial-gradient(circle at center,#ffffff94,#fff3 42%,#0f172a1a);transition:opacity .28s ease,visibility .28s ease}.car-hero-visual-demo-host .play-callout{display:grid;justify-items:center;gap:12px}.car-hero-visual-demo-host .play-start-hint{margin:0;padding:12px 22px;border-radius:999px;background:#ffffffeb;border:1px solid rgba(17,24,39,.12);color:#2f3a4a;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.02em;box-shadow:0 12px 26px #11182724;pointer-events:none}.car-hero-visual-demo-host .stage.playing .play-overlay{opacity:0;visibility:hidden;pointer-events:none}.car-hero-visual-demo-host .play-button{width:82px;height:82px;display:grid;place-items:center;border:0;border-radius:999px;background:#ffffffeb;color:#3f4b8f;box-shadow:0 16px 34px #1118272e,0 0 #5867d847,inset 0 0 0 1px #1118271a;cursor:pointer;transform:scale(1);transition:transform .18s ease,box-shadow .18s ease}.car-hero-visual-demo-host .stage:not(.playing) .play-button{animation:carHeroPlayPulse 2.4s ease-in-out infinite}@keyframes carHeroPlayPulse{0%,to{transform:scale(1);box-shadow:0 16px 34px #1118272e,0 0 #5867d847,inset 0 0 0 1px #1118271a}50%{transform:scale(1.06);box-shadow:0 22px 42px #11182733,0 0 0 10px #5867d800,inset 0 0 0 1px #1118271f}}.car-hero-visual-demo-host .play-button:hover{animation:none;transform:scale(1.05);box-shadow:0 22px 42px #11182733,0 0 0 8px #5867d81f,inset 0 0 0 1px #1118271f}.car-hero-visual-demo-host .play-icon{width:0;height:0;margin-left:6px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:20px solid currentColor}@media(prefers-reduced-motion:reduce){.car-hero-visual-demo-host *,.car-hero-visual-demo-host *:before,.car-hero-visual-demo-host *:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.car-hero-visual-demo-host .stage:not(.playing) .play-button{animation:none}}.media-visual-demo-host{--media-visual-design-w: 512px;--media-visual-design-h: 170px;--bg: #f6f7fb;--card: #ffffff;--line: rgba(17, 24, 39, .1);--text: #111827;--muted: #4b5563;--blue-soft: var(--color-demo-blue-soft);--blue: var(--color-demo-blue);--indigo: #5867d8;--green: var(--color-demo-sage);--green-soft: var(--color-demo-sage-soft);--green-muted: var(--color-demo-sage-muted);--green-hill: var(--color-demo-sage-hill);--green-mid: var(--color-demo-sage-mid);--yellow: #ffd166;--pink: var(--color-demo-rose);--purple: #9b8cff;--shadow: 0 24px 60px rgba(17, 24, 39, .08);width:var(--media-visual-design-w)}.media-visual-demo-host *{box-sizing:border-box}.media-visual-demo-host .media-visual{position:relative;width:var(--media-visual-design-w);height:var(--media-visual-design-h);overflow:hidden;border-radius:18px;background:radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--color-demo-blue),transparent 82%),transparent 6.5rem),radial-gradient(circle at 82% 72%,color-mix(in srgb,var(--color-demo-sage-hill),transparent 48%),transparent 8rem),linear-gradient(140deg,var(--bg) 0%,color-mix(in srgb,var(--color-demo-blue-soft),var(--bg) 52%) 100%);border:1px solid rgba(17,24,39,.06);isolation:isolate}.media-visual-demo-host .media-visual:before{content:"";position:absolute;inset:14px;border-radius:14px;background:linear-gradient(90deg,#ffffffb8,#ffffff52),repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 18px),repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 18px);border:1px solid rgba(255,255,255,.75);opacity:.7;z-index:0}.media-visual-demo-host .asset-board{position:absolute;left:22px;top:20px;width:205px;height:128px;border-radius:16px;background:linear-gradient(180deg,#ffffffeb,#ffffffbd),linear-gradient(135deg,color-mix(in srgb,var(--color-demo-blue-soft),white 28%),#fff);border:1px solid rgba(17,24,39,.08);box-shadow:0 18px 32px #40576d1f;overflow:hidden;animation:mediaVisualBoardFloat 4.8s ease-in-out infinite;z-index:2}@keyframes mediaVisualBoardFloat{0%,to{transform:translateY(0) rotate(-.2deg)}50%{transform:translateY(-4px) rotate(.2deg)}}.media-visual-demo-host .asset-board:before{content:"";position:absolute;left:18px;top:18px;width:92px;height:68px;border-radius:14px;background:radial-gradient(circle at 74% 28%,#fff5a8 0 10px,transparent 11px),linear-gradient(135deg,color-mix(in srgb,var(--color-demo-blue-soft),white 12%) 0%,color-mix(in srgb,var(--color-demo-blue-soft),white 42%) 52%,var(--green-hill) 53% 100%);box-shadow:inset 0 0 0 1px #1118270f;animation:mediaVisualImageGlow 3s ease-in-out infinite}@keyframes mediaVisualImageGlow{50%{filter:saturate(1.18) brightness(1.04)}}.media-visual-demo-host .asset-board:after{content:"";position:absolute;left:30px;top:72px;width:72px;height:28px;background:linear-gradient(135deg,transparent 0 42%,var(--green-muted) 43% 100%),linear-gradient(45deg,var(--green-mid) 0 50%,transparent 51% 100%);clip-path:polygon(0 100%,34% 34%,53% 66%,72% 22%,100% 100%);opacity:.92}.media-visual-demo-host .crop-frame{position:absolute;left:12px;top:12px;width:106px;height:82px;border:2px solid rgba(88,103,216,.86);border-radius:14px;box-shadow:0 0 0 999px #ffffff1f;transform-origin:50% 50%;animation:mediaVisualCropResize 4.4s cubic-bezier(.42,0,.2,1) infinite}.media-visual-demo-host .crop-frame:before,.media-visual-demo-host .crop-frame:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 3px #5867d829}.media-visual-demo-host .crop-frame:before{left:-5px;top:-5px}.media-visual-demo-host .crop-frame:after{right:-5px;bottom:-5px}@keyframes mediaVisualCropResize{0%,to{transform:scale(1);border-color:#5867d8d1;box-shadow:0 0 0 999px #ffffff1f,0 0 #5867d833}38%,58%{transform:scale(.78);border-color:#5867d8;box-shadow:0 0 0 999px #ffffff29,0 0 0 8px #5867d800}74%{transform:scale(1.04);border-color:#5867d8eb}}.media-visual-demo-host .board-lines{position:absolute;right:18px;top:22px;width:56px;display:grid;gap:9px}.media-visual-demo-host .board-lines span{display:block;height:8px;border-radius:999px;background:#5867d824;overflow:hidden}.media-visual-demo-host .board-lines span:before{content:"";display:block;width:45%;height:100%;border-radius:inherit;background:#5867d873;animation:mediaVisualLineFill 3.4s ease-in-out infinite}.media-visual-demo-host .board-lines span:nth-child(2):before{animation-delay:.22s;width:72%}.media-visual-demo-host .board-lines span:nth-child(3):before{animation-delay:.44s;width:55%}@keyframes mediaVisualLineFill{0%,to{transform:translate(-102%)}42%,68%{transform:translate(0)}}.media-visual-demo-host .palette{position:absolute;right:23px;bottom:18px;display:flex;gap:7px}.media-visual-demo-host .swatch{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffffb8,0 4px 8px #1118271f;transform:scale(.82);animation:mediaVisualSwatchPop 2.8s ease-in-out infinite}.media-visual-demo-host .swatch:nth-child(1){background:var(--blue);animation-delay:0s}.media-visual-demo-host .swatch:nth-child(2){background:var(--green);animation-delay:.16s}.media-visual-demo-host .swatch:nth-child(3){background:var(--yellow);animation-delay:.32s}.media-visual-demo-host .swatch:nth-child(4){background:var(--pink);animation-delay:.48s}@keyframes mediaVisualSwatchPop{0%,76%,to{transform:scale(.82);opacity:.82}18%,44%{transform:scale(1.04);opacity:1}}.media-visual-demo-host .floating-icon{position:absolute;display:grid;place-items:center;border-radius:18px;background:#ffffffdb;border:1px solid rgba(17,24,39,.08);box-shadow:0 16px 28px #40576d1f;z-index:3;animation:mediaVisualIconFloat 4.2s ease-in-out infinite}.media-visual-demo-host .floating-icon svg{width:28px;height:28px}.media-visual-demo-host .icon-image{right:118px;top:24px;width:58px;height:58px;color:var(--indigo)}.media-visual-demo-host .icon-pen{right:34px;top:58px;width:66px;height:66px;color:var(--green);animation-delay:-.9s}.media-visual-demo-host .icon-logo{right:150px;bottom:22px;width:52px;height:52px;color:var(--pink);animation-delay:-1.7s}@keyframes mediaVisualIconFloat{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}.media-visual-demo-host .sparkle{position:absolute;width:8px;height:8px;z-index:4;color:var(--purple);animation:mediaVisualSparkle 2.6s ease-in-out infinite}.media-visual-demo-host .sparkle:before,.media-visual-demo-host .sparkle:after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;border-radius:999px}.media-visual-demo-host .sparkle:before{width:2px;height:12px}.media-visual-demo-host .sparkle:after{width:12px;height:2px}.media-visual-demo-host .sparkle.one{left:250px;top:24px;animation-delay:-.4s}.media-visual-demo-host .sparkle.two{right:94px;bottom:34px;color:var(--yellow);animation-delay:-1.2s}.media-visual-demo-host .sparkle.three{left:178px;bottom:18px;color:var(--green-soft);animation-delay:-2s}@keyframes mediaVisualSparkle{0%,to{opacity:0;transform:scale(.45) rotate(0)}45%,62%{opacity:1;transform:scale(1.1) rotate(90deg)}}.media-visual-demo-host .export-chip{position:absolute;right:30px;bottom:24px;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#ffffffe6;border:1px solid rgba(17,24,39,.08);box-shadow:0 14px 24px #40576d1f;color:#2f3a4a;font-size:12px;font-weight:800;letter-spacing:-.01em;transform:translateY(18px);opacity:0;animation:mediaVisualExportIn 4.8s ease-in-out infinite}.media-visual-demo-host .export-chip:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #589a8229}@keyframes mediaVisualExportIn{0%,42%,to{opacity:0;transform:translateY(18px)}58%,82%{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.media-visual-demo-host *,.media-visual-demo-host *:before,.media-visual-demo-host *:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}.media-benefits{margin:1.25rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem}.media-benefit{margin:0}.media-benefit-title{margin:0;font-size:.8125rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:#171717}.media-benefit-text{margin:2px 0 0;font-size:.8125rem;line-height:1.45;color:#525252;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}html.dark .media-benefit-title{color:#f5f5f5}html.dark .media-benefit-text{color:#a3a3a3}.interaction-drag-demo{--idd-accent: var(--color-primary-500);--idd-success: var(--color-demo-sage);--idd-success-soft: var(--color-demo-sage-success-soft);--idd-success-text: var(--color-demo-sage-muted);--idd-track-pad: .75rem;--idd-piece-size: 2.65rem;position:relative;overflow:hidden;min-height:8.5rem;border-radius:1.5rem;border:1px solid rgb(229 231 235);background:#fff;padding:.75rem}.interaction-drag-demo__glow{position:absolute;top:-2.5rem;right:-2.5rem;height:7rem;width:7rem;border-radius:999px;background:color-mix(in srgb,var(--color-primary-300),transparent 75%);filter:blur(24px);pointer-events:none}.interaction-drag-demo__panel{position:relative;height:100%;min-height:7rem;border-radius:1rem;border:1px solid rgb(229 231 235);background:linear-gradient(145deg,#f8fafcf5,#ffffffeb);padding:.85rem .9rem .75rem}.interaction-drag-demo__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.interaction-drag-demo__meta{display:grid;justify-items:start;gap:.2rem;min-width:0;text-align:left}.interaction-drag-demo__badge{display:inline-flex;border:1px solid color-mix(in srgb,var(--idd-accent),transparent 55%);border-radius:999px;background:color-mix(in srgb,var(--idd-accent),white 88%);color:var(--color-primary-800);font-size:.68rem;font-weight:800;letter-spacing:.06em;padding:.22rem .55rem;text-transform:uppercase}.interaction-drag-demo__meta-text{color:#737373;font-size:.68rem;font-weight:650}.interaction-drag-demo__hint{margin:.65rem 0 0;color:#525252;font-size:.72rem;font-weight:650;letter-spacing:.02em}.interaction-drag-demo__track{position:relative;margin-top:.55rem;height:3.1rem;touch-action:none}.interaction-drag-demo__lane{position:absolute;inset:50% var(--idd-track-pad) auto;height:0;transform:translateY(-50%);border-top:2px dashed color-mix(in srgb,var(--idd-accent),rgb(163 163 163) 45%);transition:border-color .2s ease}.interaction-drag-demo.is-complete .interaction-drag-demo__lane{border-top-color:color-mix(in srgb,var(--idd-success),rgb(163 163 163) 28%)}.interaction-drag-demo__drop{position:absolute;top:50%;right:var(--idd-track-pad);z-index:1;display:grid;place-items:center;width:var(--idd-piece-size);height:var(--idd-piece-size);box-sizing:border-box;transform:translateY(-50%);border:2px dashed color-mix(in srgb,var(--idd-accent),transparent 35%);border-radius:.75rem;background:#ffffffb8;color:#737373;transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.interaction-drag-demo__drop-icon{display:block;opacity:.72}.interaction-drag-demo__handle{position:absolute;top:50%;left:var(--idd-track-pad);z-index:2;display:grid;place-items:center;width:var(--idd-piece-size);height:var(--idd-piece-size);box-sizing:border-box;margin:0;padding:0;border:2px solid color-mix(in srgb,var(--idd-accent),white 20%);border-radius:.75rem;background:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--idd-accent),transparent 78%),inset 0 1px #ffffffe6;cursor:grab;touch-action:none;transform:translateY(-50%);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.interaction-drag-demo__handle:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.interaction-drag-demo.is-dragging .interaction-drag-demo__handle{cursor:grabbing;box-shadow:0 14px 30px color-mix(in srgb,var(--idd-accent),transparent 68%),inset 0 1px #ffffffe6}.interaction-drag-demo__shape{width:0;height:0;border-left:.62rem solid transparent;border-right:.62rem solid transparent;border-bottom:1.05rem solid var(--idd-accent);transition:border-bottom-color .2s ease}.interaction-drag-demo__grip{position:absolute;bottom:.28rem;display:flex;gap:.14rem;opacity:.55}.interaction-drag-demo__grip span{width:.18rem;height:.18rem;border-radius:999px;background:#737373}.interaction-drag-demo__status{margin:.45rem 0 0;min-height:1.25rem;line-height:1.25rem;color:var(--idd-success);font-size:.72rem;font-weight:700;visibility:hidden}.interaction-drag-demo.is-complete .interaction-drag-demo__status{visibility:visible}.interaction-drag-demo__reset{flex-shrink:0;border:1px solid rgb(212 212 212);border-radius:999px;background:#fff;color:#404040;font-size:.68rem;font-weight:700;padding:.28rem .62rem;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.interaction-drag-demo__reset:hover{border-color:color-mix(in srgb,var(--idd-accent),transparent 45%);color:var(--color-primary-700)}.interaction-drag-demo__reset:disabled{opacity:.42;cursor:not-allowed;border-color:#e5e7eb;background:#f8fafc;color:#a3a3a3}.interaction-drag-demo__reset:disabled:hover{border-color:#e5e7eb;color:#a3a3a3}.interaction-drag-demo.is-complete .interaction-drag-demo__reset:not(:disabled){border-color:color-mix(in srgb,var(--idd-success),transparent 35%);background:var(--idd-success-soft);color:var(--idd-success-text)}.interaction-drag-demo.is-complete .interaction-drag-demo__reset:not(:disabled):hover{border-color:var(--idd-success);color:var(--idd-success-text)}.interaction-drag-demo__reset:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.interaction-drag-demo.is-complete .interaction-drag-demo__drop{border-color:var(--idd-success);background:var(--idd-success-soft);color:transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--idd-success),transparent 82%)}.interaction-drag-demo.is-complete .interaction-drag-demo__handle{z-index:3;border-color:var(--idd-success);background:var(--idd-success-soft)}.interaction-drag-demo.is-complete .interaction-drag-demo__shape{border-bottom-color:var(--idd-success)}.interaction-drag-demo.is-complete .interaction-drag-demo__hint{visibility:hidden}@media(prefers-reduced-motion:no-preference){.interaction-drag-demo:not(.is-complete):not(.is-dragging) .interaction-drag-demo__handle{animation:interaction-drag-nudge 2.4s ease-in-out infinite}.interaction-drag-demo:not(.is-complete):not(.is-dragging) .interaction-drag-demo__drop{animation:interaction-drag-drop-pulse 2.4s ease-in-out infinite}.interaction-drag-demo:not(.is-complete):not(.is-dragging) .interaction-drag-demo__drop-icon{animation:interaction-drag-drop-icon-pulse 2.4s ease-in-out infinite}}@keyframes interaction-drag-nudge{0%,to{transform:translateY(-50%)}45%{transform:translate(.85rem,-50%)}}@keyframes interaction-drag-drop-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--idd-accent),transparent 72%)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--idd-accent),transparent 90%)}}@keyframes interaction-drag-drop-icon-pulse{0%,to{opacity:.58;transform:scale(1)}50%{opacity:.92;transform:scale(1.07)}}html.dark .interaction-drag-demo{border-color:#ffffff1a;background:#ffffff0d}html.dark .interaction-drag-demo__glow{background:color-mix(in srgb,var(--color-primary-400),transparent 88%)}html.dark .interaction-drag-demo__panel{border-color:#ffffff1a;background:linear-gradient(135deg,#111827eb,#020617e0)}html.dark .interaction-drag-demo__hint{color:#d4d4d4}html.dark .interaction-drag-demo__badge{border-color:color-mix(in srgb,var(--color-primary-400),transparent 55%);background:color-mix(in srgb,var(--color-primary-900),rgb(15 23 42) 35%);color:var(--color-primary-200)}html.dark .interaction-drag-demo__meta-text{color:#a3a3a3}html.dark .interaction-drag-demo__drop,html.dark .interaction-drag-demo__handle,html.dark .interaction-drag-demo__reset{background:#ffffff0f;border-color:#ffffff24;color:#d4d4d4}html.dark .interaction-drag-demo__reset:hover:not(:disabled){color:var(--color-primary-200)}html.dark .interaction-drag-demo__reset:disabled{border-color:#ffffff1a;background:#ffffff0a;color:#737373}html.dark .interaction-drag-demo.is-complete .interaction-drag-demo__reset:not(:disabled){border-color:#8eb5a473;background:#3f756259;color:var(--color-demo-sage-hill)}html.dark .interaction-drag-demo.is-complete .interaction-drag-demo__drop,html.dark .interaction-drag-demo.is-complete .interaction-drag-demo__handle{border-color:var(--color-demo-sage-soft);background:#3f756259}html.dark .interaction-drag-demo.is-complete .interaction-drag-demo__drop{color:transparent}html.dark .interaction-drag-demo.is-complete .interaction-drag-demo__shape{border-bottom-color:var(--color-demo-sage-soft)}html.dark .interaction-drag-demo.is-complete .interaction-drag-demo__status{color:var(--color-demo-sage-soft)}@media(prefers-reduced-motion:reduce){.interaction-drag-demo:not(.is-complete):not(.is-dragging) .interaction-drag-demo__handle,.interaction-drag-demo:not(.is-complete):not(.is-dragging) .interaction-drag-demo__drop,.interaction-drag-demo:not(.is-complete):not(.is-dragging) .interaction-drag-demo__drop-icon{animation:none}}.penguin-model-viewer model-viewer{--progress-bar-height: 0;--progress-bar-color: transparent;--progress-mask-height: 0}.penguin-model-viewer model-viewer::part(default-progress-bar){display:none}.dm-visual-palette{display:flex;flex-wrap:wrap;gap:.5rem}.dm-visual-palette__swatch{width:2.25rem;height:2.25rem;border-radius:999px}@media(min-width:640px){.dm-visual-palette__swatch{width:2.5rem;height:2.5rem}}.dm-visual-palette__swatch--accent{background-color:var(--color-primary-600)}.dm-visual-palette__swatch--sage{background-color:var(--color-demo-sage)}.dm-visual-palette__swatch--rose{background-color:var(--color-demo-rose)}.dm-visual-palette__swatch--surface{border:1px solid rgb(229 231 235);background-color:#fff}html.dark .dm-visual-palette__swatch--surface{border-color:#404040;background-color:#171717}.dm-visual-mock-tile--blue-soft{background-color:var(--color-demo-blue-soft)}html.dark .dm-visual-mock-tile--blue-soft{background-color:color-mix(in srgb,var(--color-demo-blue-muted),transparent 72%)}.dm-visual-direction-mock{background:#fff}html.dark .dm-visual-direction-mock{background:#0a0a0a}.dm-visual-mock-line--accent{background-color:var(--color-primary-600)}.dm-visual-pills{display:grid;gap:.75rem}@media(min-width:640px){.dm-visual-pills{grid-template-columns:repeat(3,minmax(0,1fr))}}.dm-visual-pill{--dm-pill-accent: var(--color-primary-500);position:relative;overflow:hidden;border:1px solid rgb(229 231 235);border-radius:1.25rem;background:#ffffffe0;padding:1rem 1rem .95rem}.dm-visual-pill:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--dm-pill-accent)}.dm-visual-pill__icon{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border-radius:.85rem;background:color-mix(in srgb,var(--dm-pill-accent),white 82%);color:color-mix(in srgb,var(--dm-pill-accent),rgb(15 23 42) 28%)}.dm-interact-panel .dm-visual-pills{margin-top:0}.dm-interact-intro{display:grid;gap:0;min-width:0}.dm-interact-body{display:grid;gap:1rem;min-width:0}.dm-interact-aside{display:grid;gap:1rem;min-width:0;align-content:start}@media(min-width:768px){.dm-interact-body{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:1.5rem}}.dm-visual-pill__title{margin-top:.75rem;color:#171717;font-size:.92rem;font-weight:780}.dm-visual-pill__text{margin-top:.35rem;color:#525252;font-size:.86rem;line-height:1.45}.dm-interaction-points{display:grid;gap:.85rem}@media(min-width:768px){.dm-interaction-points{grid-template-columns:repeat(3,minmax(0,1fr))}}.dm-interaction-point{--dm-point-accent: var(--color-primary-500);position:relative;overflow:hidden;display:grid;gap:.35rem;border:1px solid color-mix(in srgb,var(--dm-point-accent),rgb(229 231 235) 72%);border-radius:1.25rem;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--dm-point-accent),transparent 84%) 0%,transparent 58%),linear-gradient(155deg,color-mix(in srgb,var(--dm-point-accent),white 92%),#fffffff5 52%,#ffffffe0);padding:1.05rem 1.05rem 1rem;min-height:100%}.dm-interaction-point:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--dm-point-accent),color-mix(in srgb,var(--dm-point-accent),white 35%))}.dm-interaction-point__glow{position:absolute;top:-2.25rem;right:-1.75rem;width:5.5rem;height:5.5rem;border-radius:999px;background:color-mix(in srgb,var(--dm-point-accent),transparent 72%);filter:blur(18px);pointer-events:none}.dm-interaction-point__step{position:absolute;top:.35rem;right:.65rem;color:color-mix(in srgb,var(--dm-point-accent),transparent 78%);font-size:2.35rem;font-weight:800;letter-spacing:-.04em;line-height:1;pointer-events:none;user-select:none}.dm-interaction-point__icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.9rem;border:1px solid color-mix(in srgb,var(--dm-point-accent),white 55%);background:color-mix(in srgb,var(--dm-point-accent),white 82%);color:color-mix(in srgb,var(--dm-point-accent),rgb(15 23 42) 24%);box-shadow:0 10px 24px color-mix(in srgb,var(--dm-point-accent),transparent 78%)}.dm-interaction-point__title{position:relative;z-index:1;margin-top:.55rem;color:#0f172a;font-size:1rem;font-weight:780;line-height:1.25}.dm-interaction-point__text{position:relative;z-index:1;margin-top:.15rem;color:#404040;font-size:.86rem;line-height:1.5}.dm-boundary__cards{display:grid;gap:.75rem}@media(min-width:640px){.dm-boundary__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}.dm-boundary__card{display:grid;gap:.55rem;border-radius:1.25rem;padding:1.15rem 1.2rem}.dm-boundary__badge{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px}.dm-boundary__title{font-weight:780;line-height:1.25}.dm-boundary__text{font-size:.88rem;line-height:1.5}.dm-boundary__card--included{border:1px solid color-mix(in srgb,var(--color-primary-300),transparent 18%);background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary-50),white 35%),#ffffffeb)}.dm-boundary__card--included .dm-boundary__badge{background:color-mix(in srgb,var(--color-primary-500),white 70%);color:var(--color-primary-800)}.dm-boundary__card--included .dm-boundary__title{color:var(--color-primary-900)}.dm-boundary__card--included .dm-boundary__text{color:color-mix(in srgb,var(--color-primary-900),rgb(64 64 64) 55%)}.dm-boundary__card--excluded{border:1px solid rgb(214 211 209);background:linear-gradient(145deg,#fafaf9,#f5f5f4f2)}.dm-boundary__card--excluded .dm-boundary__badge{background:#e7e5e4;color:#44403c}.dm-boundary__card--excluded .dm-boundary__title{color:#292524}.dm-boundary__card--excluded .dm-boundary__text{color:#57534e}html.dark .dm-visual-pill{border-color:#ffffff1a;background:#ffffff0f}html.dark .dm-visual-pill__icon{background:color-mix(in srgb,var(--dm-pill-accent),rgb(15 23 42) 72%);color:color-mix(in srgb,var(--dm-pill-accent),white 55%)}html.dark .dm-visual-pill__title{color:#f5f5f5}html.dark .dm-visual-pill__text{color:#d4d4d4}html.dark .dm-interaction-point{border-color:color-mix(in srgb,var(--dm-point-accent),rgb(255 255 255 / .12) 58%);background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--dm-point-accent),transparent 86%) 0%,transparent 58%),linear-gradient(155deg,color-mix(in srgb,var(--dm-point-accent),rgb(15 23 42) 82%),#ffffff0f)}html.dark .dm-interaction-point__step{color:color-mix(in srgb,var(--dm-point-accent),transparent 68%)}html.dark .dm-interaction-point__icon{border-color:color-mix(in srgb,var(--dm-point-accent),rgb(255 255 255 / .12) 55%);background:color-mix(in srgb,var(--dm-point-accent),rgb(15 23 42) 72%);color:color-mix(in srgb,var(--dm-point-accent),white 55%);box-shadow:none}html.dark .dm-interaction-point__title{color:#f5f5f5}html.dark .dm-interaction-point__text{color:#d4d4d4}html.dark .dm-boundary__card--included{border-color:color-mix(in srgb,var(--color-primary-400),transparent 58%);background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary-900),rgb(15 23 42) 40%),#ffffff0d)}html.dark .dm-boundary__card--included .dm-boundary__badge{background:color-mix(in srgb,var(--color-primary-500),rgb(15 23 42) 55%);color:var(--color-primary-200)}html.dark .dm-boundary__card--included .dm-boundary__title{color:var(--color-primary-100)}html.dark .dm-boundary__card--included .dm-boundary__text{color:#d4d4d4}html.dark .dm-boundary__card--excluded{border-color:#ffffff1f;background:linear-gradient(145deg,#2626268c,#17171759)}html.dark .dm-boundary__card--excluded .dm-boundary__badge{background:#404040;color:#d4d4d4}html.dark .dm-boundary__card--excluded .dm-boundary__title{color:#f5f5f5}html.dark .dm-boundary__card--excluded .dm-boundary__text{color:#a3a3a3}@media(max-width:639px){.panel-stack .dm-visual-pills{gap:0}.panel-stack .dm-visual-pill{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "text text";column-gap:.75rem;row-gap:.35rem;align-items:center;border:none;border-radius:0;background:transparent;padding:.85rem 0}.panel-stack .dm-visual-pill__icon{grid-area:icon}.panel-stack .dm-visual-pill__title{grid-area:title;margin-top:0}.panel-stack .dm-visual-pill__text{grid-area:text;margin-top:0}.panel-stack .dm-visual-pill:before{display:none}.panel-stack .dm-visual-pill:not(:last-child){border-bottom:1px solid rgb(229 231 235)}.dm-interaction-section,.dm-boundary-section{padding:1rem}.dm-interaction-section .interaction-drag-demo{padding:.65rem}.dm-interaction-section .interaction-drag-demo__panel{border:none;background:transparent;padding:0;min-height:0}.dm-interaction-points{gap:0}.dm-interaction-point{min-height:0;border:none;border-radius:0;background:transparent;padding:.85rem 0}.dm-interaction-point:before,.dm-interaction-point__glow,.dm-interaction-point__step{display:none}.dm-interaction-point:not(:last-child){border-bottom:1px solid rgb(229 231 235)}.dm-media-feature-card{padding:1rem}}@media(max-width:639px){html.dark .panel-stack .dm-visual-pill,html.dark .dm-interaction-point{border:none;background:transparent}html.dark .panel-stack .dm-visual-pill:not(:last-child),html.dark .dm-interaction-point:not(:last-child){border-bottom:1px solid rgb(255 255 255 / .1)}}