/* A working miniature, staged as a dimensional software build. */
.hero-art.ai-showcase{--show-ink:#effaf7;--show-muted:#a9c2bd;--show-line:#34504d;--show-signal:#75edcc;--rx:5deg;--ry:-9deg;display:block;position:relative;min-height:0;max-width:610px;width:100%;isolation:isolate;scroll-margin-top:90px}
.showcase-world{position:relative;height:660px;perspective:1100px;perspective-origin:50% 40%;margin-top:2px}
.showcase-light{position:absolute;inset:8% -6% 0;background:radial-gradient(ellipse at 45% 44%,#33ba9c38 0%,#33ba9c12 40%,transparent 69%);filter:blur(14px);pointer-events:none}
.showcase-floor{position:absolute;left:2%;right:0;bottom:25px;height:180px;background-image:linear-gradient(#318d732c 1px,transparent 1px),linear-gradient(90deg,#318d732c 1px,transparent 1px);background-size:32px 32px;transform:rotateX(65deg) rotateZ(-14deg);mask-image:radial-gradient(ellipse,#000 10%,transparent 72%);pointer-events:none}
.showcase-streams{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.stream-base{stroke:var(--signal-text);stroke-width:1;opacity:.17}.stream-run{stroke:var(--signal-text);stroke-width:2;stroke-dasharray:12 230;stroke-linecap:round;animation:showcase-stream 6s linear infinite;opacity:.7}
.showcase-depth{position:relative;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .65s cubic-bezier(.16,1,.3,1)}
.showcase-window{position:absolute;top:92px;left:6%;width:85%;z-index:3;transform:translateZ(55px) rotateZ(-3deg);border:1px solid #6c9d9066;border-radius:16px;background:linear-gradient(145deg,#173b35,#0c2327 70%);color:var(--show-ink);border-right:3px solid #3c6558;border-bottom:3px solid #20483b;box-shadow:8px 14px 18px #00191233,15px 26px 35px #00191255;overflow:hidden;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.showcase-window::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,#e3fff909 45%,transparent 65%);pointer-events:none;z-index:5}
.showcase-chrome{height:34px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;border-bottom:1px solid #c0eee516;color:#a9c6bf;font-size:.75rem;background:#061e1e80}
.showcase-window-dots{display:flex;gap:4px}.showcase-window-dots i{height:4px;width:4px;border-radius:50%;background:#8caaa3}.showcase-window-dots i:first-child{background:#75edcc}
.showcase-app-head{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}.showcase-brand{font-weight:750;letter-spacing:-.04em;font-size:1.1rem;border:1px solid #94d2bf4a;padding:6px;border-radius:8px}.showcase-brand>span{color:var(--show-signal)}
.showcase-app-head>div{display:flex;flex-direction:column;gap:3px}.showcase-app-head b{font-size:.86rem;font-weight:600}.showcase-app-head>div>span{color:var(--show-muted);font-size:.75rem}.showcase-demo{margin-left:auto;font-size:.75rem;color:#b9d5cd;border:1px solid #587870;border-radius:4px;padding:2px 5px}
.showcase-panel{padding:0 18px 18px;min-height:302px}.showcase-panel:focus-visible{outline:2px solid var(--show-signal);outline-offset:-4px}
.showcase-job{display:flex;align-items:center;gap:10px;padding:12px 11px;background:#e2f5ed;color:#173e34;border-radius:8px;border:1px solid #d0f6e4}.showcase-job-icon{flex:none;color:#2b735f}.showcase-job>div:nth-child(2){display:flex;flex-direction:column;gap:2px}.showcase-job span{font-size:.75rem;color:#46645a}.showcase-job b{font-size:.78rem;font-weight:600}.job-dot{margin-left:auto;width:6px;height:6px;background:#2b8a70;border-radius:50%;flex:none;animation:showcase-pulse 3s ease-in-out infinite}
.showcase-flow{padding:12px 0 9px;margin:0;list-style:none;display:grid;gap:0}.showcase-flow li{position:relative;display:flex;align-items:center;gap:11px;min-height:51px;color:var(--show-muted)}
.flow-symbol{width:25px;height:25px;border:1px solid #526f66;border-radius:50%;display:grid;place-items:center;flex:none;font-size:.75rem;color:#c5ded5;transition:background .4s,border-color .4s,color .4s}
.showcase-flow li:not(:last-child)::after{content:'';position:absolute;width:1px;height:20px;top:38px;left:12px;background:#385a4d}
.showcase-flow li>div{display:flex;flex-direction:column;gap:3px}.showcase-flow b{font-size:.77rem;font-weight:550;color:var(--show-ink)}.showcase-flow li>div>span{font-size:.75rem}.flow-done{margin-left:auto;color:var(--show-signal);opacity:0;transform:scale(.5);transition:opacity .4s,transform .4s}
.showcase-flow li.is-done .flow-symbol{background:var(--show-signal);border-color:var(--show-signal);color:#092820}.showcase-flow li.is-done .flow-done{opacity:1;transform:scale(1)}.showcase-flow li.is-active .flow-symbol{border-color:var(--show-signal);color:var(--show-signal)}
.showcase-action{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid #38564b;padding-top:12px;margin-top:2px}.showcase-action>span{font-size:.75rem;line-height:1.4;color:#bcd5cc;max-width:55%}.showcase-action button{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;border:0;border-radius:6px;background:var(--show-signal);color:#0a3025;font:650 .75rem/1.2 var(--body);padding:10px 11px;cursor:pointer;transition:background .2s,transform .2s}.showcase-action button:hover{background:#afffe7;transform:translateY(-2px)}.showcase-action button:disabled{opacity:.7;cursor:wait;transform:none}
.showcase-satellite{position:absolute;z-index:1;border:1px solid #79bdaa5c;border-radius:12px;color:#daf8ec;background:linear-gradient(140deg,#17483d,#102d2d);box-shadow:0 15px 25px #00251b30;pointer-events:none}
.satellite-guide{width:190px;left:-6%;top:28px;padding:17px;transform:translateZ(-40px) rotateZ(-12deg);animation:showcase-float 8s ease-in-out infinite}.satellite-line{display:flex;align-items:center;gap:9px;font-size:.75rem;color:#c3e4d7}.satellite-guide>b{display:block;font:400 1.7rem/1.02 var(--display);margin-top:15px;letter-spacing:-.02em}.satellite-rule{width:40px;height:1px;background:#7aa38c;margin:13px 0 8px}.satellite-note{font-size:.75rem;color:#b6d9cb}
.satellite-data{width:204px;right:-7%;top:244px;padding:16px;transform:translateZ(-20px) rotateZ(10deg);animation:showcase-float-right 9s ease-in-out infinite}.satellite-chart{width:100%;height:80px;margin-top:8px;color:#75edcc;stroke-dasharray:230;animation:showcase-draw 7s ease-in-out infinite}.satellite-bottom{display:flex;justify-content:space-between;font-size:.75rem;color:#c3e4d7}
.showcase-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding:9px 8px 0;color:var(--ink-soft);font-size:.75rem;line-height:1.5}.showcase-footer a{color:var(--signal-text);text-underline-offset:4px;font-weight:550}
.ai-showcase.is-paused *{animation-play-state:paused!important}.ai-showcase.is-paused .showcase-depth{transform:rotateX(5deg) rotateY(-9deg)}
@keyframes showcase-stream{to{stroke-dashoffset:-484}}@keyframes showcase-pulse{50%{opacity:.45;transform:scale(.8)}}@keyframes showcase-draw{0%,12%{stroke-dashoffset:230}50%,100%{stroke-dashoffset:0}}@keyframes showcase-float{50%{transform:translateZ(-40px) translateY(-9px) rotateZ(-10deg)}}@keyframes showcase-float-right{50%{transform:translateZ(-20px) translateY(9px) rotateZ(12deg)}}
@media(max-width:960px){.hero-art.ai-showcase{max-width:550px}.showcase-satellite.satellite-guide{left:0}.satellite-data{right:0}}
@media(max-width:640px){.hero-art.ai-showcase{display:block;max-width:100%;margin:0}.showcase-world{height:590px;margin-top:6px;perspective:1500px}.showcase-depth{transform:none!important}.showcase-window{top:88px;left:0;width:100%;transform:rotateZ(-1deg);box-shadow:2px 3px 0 #497569,5px 7px 0 #193e31,10px 20px 28px #002b2230}.satellite-guide{top:19px;width:155px;padding:12px;left:0!important}.satellite-guide>b{font-size:1.3rem;margin-top:10px}.satellite-data{width:155px;top:310px;right:-7px;opacity:.7}.showcase-app-head{padding:16px 13px 12px}.showcase-panel{padding:0 13px 15px;min-height:308px}.showcase-footer{font-size:.75rem;padding-top:15px;gap:7px}.showcase-light{inset:10% 0 0}.showcase-streams{overflow:hidden}}
@media(prefers-reduced-motion:reduce){.ai-showcase *{animation:none!important;transition:none!important}.showcase-depth{transform:none!important}}
/* Let the phone composition grow with readable text instead of overlapping controls. */
@media(max-width:640px){.showcase-world{height:auto}.showcase-depth{height:auto;padding-top:88px;padding-bottom:8px}.showcase-window{position:relative;top:auto;left:auto}.showcase-panel{min-height:352px}.showcase-job>div:nth-child(2){min-width:0}.showcase-app-head>div{min-width:0}}
.showcase-atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.showcase-world{height:620px;margin-top:0}.showcase-depth{transition:transform 1s cubic-bezier(.16,1,.3,1)}.showcase-window{top:77px;left:7%;width:83%;transform:translateZ(55px) rotateZ(-3deg);transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .7s,filter .7s}.showcase-satellite{transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity .9s}.satellite-guide{top:18px}.satellite-data{top:245px}
.showcase-build-rail{position:absolute;z-index:5;bottom:15px;left:12%;right:4%;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);font-size:.68rem;letter-spacing:.01em;opacity:.8}.showcase-build-rail i{height:1px;flex:1;max-width:30px;background:var(--line)}.showcase-build-rail span{transition:color .4s}
.showcase-blueprint{position:absolute;top:72px;left:5%;width:87%;height:428px;transform:translateZ(-50px) rotateZ(-3deg);border:1px solid color-mix(in srgb,var(--signal-text) 28%,transparent);border-radius:14px;background-image:linear-gradient(color-mix(in srgb,var(--signal-text) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--signal-text) 7%,transparent) 1px,transparent 1px);background-size:21px 21px;opacity:.22;transition:opacity .8s,transform 1.1s}
.showcase-blueprint>span{position:absolute;left:14px;top:17px;font:500 .63rem var(--body);letter-spacing:.16em;color:var(--signal-text)}
.blueprint-corner{position:absolute;width:16px;height:16px;border-color:var(--signal-text);border-style:solid}.corner-tl{left:-1px;top:-1px;border-width:2px 0 0 2px;border-radius:13px 0 0 0}.corner-tr{right:-1px;top:-1px;border-width:2px 2px 0 0;border-radius:0 13px 0 0}.corner-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px;border-radius:0 0 0 13px}.corner-br{right:-1px;bottom:-1px;border-width:0 2px 2px 0;border-radius:0 0 13px 0}
@media(max-width:640px){.showcase-world{height:auto}.showcase-depth{padding-top:85px;padding-bottom:32px}.showcase-window{top:auto;left:auto;width:100%;transform:rotateZ(-1deg)}.showcase-build-rail{bottom:8px;left:0;right:0;font-size:.67rem;gap:6px}.showcase-blueprint{top:78px;left:2%;width:96%;height:440px}}

@media(min-width:641px){.showcase-world{height:620px}}
.showcase-build-rail{font-size:.75rem}.showcase-blueprint>span{font-size:.7rem}.showcase-blueprint{overflow:hidden}
@media(max-width:640px){.showcase-window{box-shadow:8px 16px 28px #002b2230}.showcase-build-rail{font-size:.75rem}}

@media(min-width:641px){.showcase-build-rail{bottom:10px}}