/* AceGPT Universal — v21: product-focused motion, coherent controls, mobile-safe layout. */
:root{--ace-warm-glow:rgba(247,196,111,.14)}
html{scroll-behavior:smooth}
body::after{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 420px 360px at 4% 30%,rgba(244,180,88,.042),transparent 85%),radial-gradient(ellipse 490px 430px at 94% 72%,rgba(233,184,94,.045),transparent 84%)}
.ace-workflow-stage{height:335px;margin:34px auto 0;max-width:1070px;perspective:1350px;isolation:isolate}
.ace-flow-perspective{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.8vw,42px);height:100%;transform-style:preserve-3d;transform:rotateX(var(--pointer-y,0deg)) rotateY(var(--pointer-x,0deg));transition:transform .6s cubic-bezier(.2,.85,.2,1)}
.ace-flow-rail{position:absolute;inset:auto 11% 50%;height:1px;background:linear-gradient(90deg,transparent,#aa7b38 24%,#f1cc7f 50%,#aa7b38 76%,transparent);transform:translateZ(-20px);box-shadow:0 0 28px rgba(232,187,97,.2)}
.ace-flow-rail span{position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;background:#ffe0a4;box-shadow:0 0 16px #f0b54d;animation:aceFlowTravel 7s ease-in-out infinite}
@keyframes aceFlowTravel{0%{left:5%;opacity:0}12%,88%{opacity:1}100%{left:95%;opacity:0}}
.ace-flow-card{width:clamp(175px,25%,250px);min-height:205px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;position:relative;background:linear-gradient(145deg,rgba(44,38,28,.98),rgba(15,15,14,.98) 64%);border:1px solid rgba(249,208,128,.22);border-radius:25px;padding:22px 22px 20px;box-shadow:0 15px 50px #0009,0 0 45px rgba(212,144,47,.048),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(15px);transform-style:preserve-3d;transition:transform .65s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.ace-flow-card:hover{transform:translateY(-12px) translateZ(52px)!important;border-color:rgba(255,218,143,.55);box-shadow:0 27px 70px #000a,0 0 48px rgba(226,164,69,.12)}
.ace-flow-first{transform:translateY(14px) rotateY(-9deg)}
.ace-flow-middle{transform:translateY(-9px) translateZ(34px);border-color:rgba(249,213,146,.42);box-shadow:0 25px 70px #000c,0 0 75px rgba(239,183,78,.14)}
.ace-flow-last{transform:translateY(14px) rotateY(9deg)}
.ace-flow-index{font-size:11px;letter-spacing:.09em;color:#e9c98b;font-weight:700}
.ace-flow-icon{width:47px;height:47px;background:rgba(244,197,110,.09);border:1px solid rgba(254,211,133,.15);border-radius:16px;display:grid;place-items:center;color:#f3d49a;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.ace-flow-icon svg{width:24px;height:24px}
.ace-flow-card strong{font-family:'Space Grotesk','DM Sans',sans-serif;font-size:17px;color:#f8eedc;letter-spacing:-.04em}
.ace-flow-card small{font-size:12px;color:#a99b86;margin-top:3px}
.ace-flow-card:nth-of-type(4){animation:aceFlowBreath 6s ease-in-out infinite}
@keyframes aceFlowBreath{50%{box-shadow:0 30px 75px #000c,0 0 90px rgba(239,183,78,.24)}}
/* Responsive graceful downgrade without clipping. */
@media(max-width:730px){.ace-workflow-stage{height:auto;min-height:260px;margin-top:16px}.ace-flow-perspective{padding:26px 6px;gap:9px}.ace-flow-card{min-height:170px;width:33%;padding:14px 12px;border-radius:17px;transform:none!important}.ace-flow-card strong{font-size:clamp(12px,2.7vw,16px)}.ace-flow-card small{font-size:11px;line-height:1.4}.ace-flow-index{font-size:9px}.ace-flow-icon{width:38px;height:38px;border-radius:12px}.ace-flow-icon svg{width:20px;height:20px}.ace-flow-rail{inset:auto 5% 50%}}
@media(max-width:420px){.ace-flow-perspective{gap:5px}.ace-flow-card{padding:12px 10px;min-height:160px}.ace-flow-icon{width:33px;height:33px}.ace-flow-card strong{font-size:12px}}
/* One family of quiet rounded studio navigation controls. */
.studio-side-item{border-radius:16px!important;border:1px solid transparent!important;transition:background .24s ease,border-color .24s ease,transform .28s cubic-bezier(.2,.8,.2,1)!important}
.studio-side-item:hover{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.065)!important;transform:translateX(2px)}
.studio-side-item svg{color:#e3e1db!important;transition:transform .3s ease!important}
.studio-side-item:hover svg{transform:scale(1.08)}
.studio-side-item.active{border-color:rgba(232,205,161,.13)!important}
.ace-top-control,.ace-top-upgrade,.studio-topbar .pill-button{border-radius:999px!important;border-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.04)!important;box-shadow:none!important;transition:background .25s,border-color .25s,transform .25s!important}
.ace-top-control:hover,.ace-top-upgrade:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;transform:translateY(-1px)!important}
.ace-universal-key-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 15px;margin:18px 0}
.ace-universal-key-form label{font-size:13px;line-height:1.6;color:#cfc6b8}
.ace-universal-key-form label input,.ace-universal-key-form label select{display:block;width:100%;margin-top:7px;background:#191816;color:#f3efea;border:1px solid #4c4435;border-radius:14px;padding:12px;min-height:44px}
.ace-universal-key-form .ace-check-row{display:flex;gap:10px;align-items:center;justify-content:center}
.ace-universal-key-form .ace-check-row input{width:auto;min-height:unset;margin:0;accent-color:#deb970}
.ace-universal-key-form button{grid-column:1/-1}
.ace-universal-key-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #ffffff12;color:#dfd7c8;font-size:12px;overflow-wrap:anywhere}
.ace-universal-key-row button{font-size:11px!important;min-width:90px;flex-shrink:0}
.ace-api-doc-link a{color:#edcc8b;text-decoration:underline;text-underline-offset:4px}
.ace-developer-docs{max-width:960px}.ace-developer-docs h2{font-size:24px}.ace-developer-docs h3{margin:22px 0 10px}.ace-developer-docs pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#0d0d0c;border:1px solid #ffffff18;border-radius:17px;padding:18px;font-size:13px;line-height:1.7;color:#efdfc8}
.ace-developer-docs code{color:#edd1a2}
@media(max-width:600px){.ace-universal-key-form{grid-template-columns:1fr}.ace-universal-key-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.ace-flow-rail span,.ace-flow-card{animation:none!important;transition:none!important}.ace-flow-perspective{transform:none!important}}