.product-cycle-container { container-type:inline-size; container-name:product-cycle; width:100%; min-width:0; } #product-cycle-studio { --studio-ink:#202624; --studio-muted:#576775; --studio-accent:#507393; --studio-deep:#203342; --studio-soft:#e5edf3; --studio-paper:#ffffff; --studio-line:#dce3e9; --studio-gradient:linear-gradient(135deg,#5b80a2,var(--studio-deep)); color-scheme:light; background:transparent; color:var(--studio-ink); font-family:var(--product-cycle-font,'Roboto Condensed','Arial Narrow',Arial,sans-serif); position:relative; isolation:isolate; overflow:hidden; padding:28px 30px 24px; box-sizing:border-box; } #product-cycle-studio * { box-sizing:border-box; } #product-cycle-studio button { font:inherit; -webkit-tap-highlight-color:transparent; cursor:pointer; } #product-cycle-studio .studio-top { display:flex; justify-content:space-between; align-items:center; gap:12px; position:relative; z-index:2; } #product-cycle-studio .studio-eyebrow { color:#446588; background:#fff; padding:6px 15px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.6px; } #product-cycle-studio .studio-motion { display:flex; align-items:center; gap:7px; padding:8px 0 8px 9px; border:0; background:transparent; color:var(--studio-muted); font-size:12px; font-weight:500; } #product-cycle-studio .studio-motion svg { width:13px; height:13px; } #product-cycle-studio .studio-hero { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(190px,.8fr); align-items:center; min-height:310px; } #product-cycle-studio .studio-art { position:relative; height:310px; perspective:1100px; min-width:0; } #product-cycle-studio .studio-aura { position:absolute; width:82%; height:95%; left:9%; top:0; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--studio-accent) 13%,transparent),transparent 69%); filter:blur(15px); pointer-events:none; } #product-cycle-studio .studio-floor { position:absolute; width:69%; height:78px; left:15%; top:218px; background:radial-gradient(ellipse,#20334230,transparent 68%); filter:blur(12px); transform:rotate(-6deg); } #product-cycle-studio .studio-orbit { position:absolute; inset:6% 3% 3%; width:94%; height:91%; overflow:visible; pointer-events:none; } #product-cycle-studio .studio-orbit-base { fill:none; stroke:var(--studio-accent); stroke-width:1; opacity:.14; } #product-cycle-studio .studio-orbit-trail { fill:none; stroke:var(--studio-accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:24 1076; animation:studio-flow 16s linear infinite; opacity:.65; } #product-cycle-studio .studio-stack { position:absolute; width:70%; height:210px; left:14%; top:48px; transform-style:preserve-3d; transform:rotateX(11deg) rotateY(-12deg) rotateZ(-6deg); animation:studio-float 8s ease-in-out infinite; } #product-cycle-studio .studio-layer { position:absolute; inset:0; border:1px solid var(--studio-line); border-radius:20px; background:var(--studio-paper); } #product-cycle-studio .studio-back { transform:translate(31px,-29px) translateZ(-65px); background:linear-gradient(135deg,#e3ebf2,#c7d6e3); border-color:#cbd8e4; box-shadow:0 10px 16px #20334208; overflow:hidden; } #product-cycle-studio .studio-back::before { content:""; position:absolute; inset:14px; background:linear-gradient(90deg,#bfcee780 1px,transparent 1px),linear-gradient(#bfcee780 1px,transparent 1px); background-size:26px 26px; border-radius:8px; opacity:.65; } #product-cycle-studio .studio-middle { transform:translate(15px,-13px) translateZ(-30px); background:linear-gradient(135deg,#fafcfe,#e9eff5); border-color:#cad7e2; box-shadow:0 8px 20px #2033420c; } #product-cycle-studio .studio-main { background:var(--studio-gradient); border-color:#ffffff40; box-shadow:0 25px 35px -16px #20334266,0 5px 12px #20334210; overflow:hidden; } #product-cycle-studio .studio-window-bar { display:flex; align-items:center; justify-content:space-between; height:35px; padding:0 14px; border-bottom:1px solid #ffffff26; background:#ffffff0b; } #product-cycle-studio .studio-window-dots { display:flex; gap:4px; } #product-cycle-studio .studio-window-dots b { width:5px; height:5px; border-radius:50%; background:#dbe7f3a6; } #product-cycle-studio .studio-window-title { display:flex; gap:5px; align-items:center; color:#e1eaf2; font-size:11px; letter-spacing:.1px; } #product-cycle-studio .studio-window-title svg { width:10px; height:10px; } #product-cycle-studio .studio-window-mark { width:9px; height:9px; border-radius:3px; background:#b7cfdf; opacity:.8; } #product-cycle-studio .studio-workspace { display:grid; grid-template-columns:42px minmax(0,1fr); height:calc(100% - 35px); } #product-cycle-studio .studio-sidebar { padding:16px 0; border-right:1px solid #ffffff1a; display:flex; align-items:center; flex-direction:column; gap:17px; background:#ffffff08; } #product-cycle-studio .studio-sidebar i,#product-cycle-studio .studio-sidebar svg { width:12px; height:12px; color:#b6c9da; } #product-cycle-studio .studio-sidebar .studio-side-active { color:#fff; } #product-cycle-studio .studio-scene { position:relative; padding:18px 19px; min-width:0; } #product-cycle-studio .studio-scene-inner { height:100%; animation:studio-scene-in .55s cubic-bezier(.16,1,.3,1); } #product-cycle-studio .studio-scene-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; } #product-cycle-studio .studio-skeleton { height:5px; border-radius:5px; background:#c6d7e57a; } #product-cycle-studio .studio-skeleton.dark { background:#fff; } #product-cycle-studio .studio-skeleton.accent { background:#d8e8f5; opacity:.85; } #product-cycle-studio .studio-scene-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#fff; background:linear-gradient(135deg,#9eb8cc,#56728b); box-shadow:0 4px 8px #182b3c30; } #product-cycle-studio[data-stage="4"] .studio-scene-icon { background:linear-gradient(135deg,#08a061,#00532f); } #product-cycle-studio[data-stage="5"] .studio-scene-icon { background:linear-gradient(135deg,#dd7b06,#8f3100); } #product-cycle-studio .studio-scene-icon svg { width:12px; height:12px; } #product-cycle-studio .studio-task { display:flex; align-items:center; gap:10px; margin-top:8px; height:32px; padding:8px; border:1px solid #ffffff26; border-radius:8px; background:#ffffff0d; } #product-cycle-studio .studio-task-check { color:#dceaf4; display:flex; } #product-cycle-studio[data-stage="4"] .studio-task-check { color:#8ce0b6; } #product-cycle-studio .studio-task-check svg { width:13px; height:13px; } #product-cycle-studio .studio-task-lines { flex:1; display:flex; flex-direction:column; gap:5px; } #product-cycle-studio .studio-arch { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; position:relative; padding-top:49px; } #product-cycle-studio .studio-arch::before { content:""; position:absolute; left:16%; right:16%; top:32px; border:1px solid #c8d5f2; height:17px; border-bottom:0; } #product-cycle-studio .studio-arch-root { position:absolute; top:0; left:calc(50% - 28px); width:56px; height:33px; border:1px solid #ffffff45; border-radius:8px; background:#7390a8; display:grid; place-items:center; color:#fff; } #product-cycle-studio .studio-arch-root svg { width:16px; height:16px; } #product-cycle-studio .studio-arch-node { border:1px solid #ffffff35; border-radius:8px; background:#ffffff0a; display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px 7px; } #product-cycle-studio .studio-arch-node svg { width:16px; height:16px; color:#d2e3ef; } #product-cycle-studio .studio-ui-hero { display:grid; grid-template-columns:1fr .72fr; align-items:center; gap:13px; padding:15px; border:1px solid #ffffff26; border-radius:10px; background:#ffffff13; } #product-cycle-studio .studio-ui-copy { display:flex; flex-direction:column; gap:7px; } #product-cycle-studio .studio-ui-shape { height:57px; position:relative; } #product-cycle-studio .studio-ui-shape::before,#product-cycle-studio .studio-ui-shape::after { content:""; position:absolute; width:43px; height:43px; border-radius:12px; background:var(--studio-accent); transform:rotate(-17deg); opacity:.65; left:3px; top:0; } #product-cycle-studio .studio-ui-shape::after { top:15px; left:21px; background:#fff; opacity:.65; transform:rotate(13deg); box-shadow:0 5px 15px #365ac31a; } #product-cycle-studio .studio-ui-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; } #product-cycle-studio .studio-ui-card { padding:10px 7px; display:flex; flex-direction:column; gap:7px; border:1px solid #ffffff26; border-radius:8px; background:#ffffff0a; } #product-cycle-studio .studio-code { padding:13px 12px; border-radius:10px; background:#1b304880; display:flex; flex-direction:column; gap:8px; height:120px; border:1px solid #ffffff24; } #product-cycle-studio .studio-code-line { display:flex; align-items:center; gap:5px; height:8px; } #product-cycle-studio .studio-code-line::before { content:""; width:3px; height:3px; border-radius:1px; background:#c4d0df; margin-right:8px; } #product-cycle-studio .studio-code-bit { height:5px; border-radius:2px; background:#aabed4; } #product-cycle-studio .studio-code-bit.blue { background:#ddebf6; opacity:.9; } #product-cycle-studio .studio-code-bit.teal { background:#8dd1b7; } #product-cycle-studio .studio-cursor { height:10px; width:2px; background:#f3b763; animation:studio-blink 1.4s steps(2,start) infinite; } #product-cycle-studio .studio-pipeline { display:flex; align-items:center; justify-content:center; height:68px; } #product-cycle-studio .studio-pipe-item { width:44px; height:44px; border-radius:12px; background:#ffffff15; color:#fff; display:grid; place-items:center; border:1px solid #ffffff40; } #product-cycle-studio .studio-pipe-item svg { width:18px; height:18px; } #product-cycle-studio .studio-pipe-link { height:1px; background:#c8d5f2; flex:1; max-width:24px; } #product-cycle-studio .studio-pipe-progress { height:7px; background:#ffffff1a; border-radius:4px; margin-top:15px; overflow:hidden; } #product-cycle-studio .studio-pipe-progress::after { content:""; display:block; height:100%; width:65%; background:#a7d5bc; opacity:.8; border-radius:4px; animation:studio-build 4.5s ease-in-out infinite; } #product-cycle-studio .studio-servers { display:flex; gap:9px; height:108px; } #product-cycle-studio .studio-server { flex:1; border:1px solid #ffffff35; background:#ffffff10; border-radius:9px; padding:12px 8px; display:flex; flex-direction:column; gap:11px; } #product-cycle-studio .studio-server svg { width:17px; height:17px; color:#d7e8f5; margin-bottom:3px; } #product-cycle-studio .studio-server-row { display:flex; align-items:center; gap:5px; } #product-cycle-studio .studio-server-row::before { content:""; width:4px; height:4px; background:#75a9ad; border-radius:50%; } #product-cycle-studio .studio-server-row .studio-skeleton { flex:1; } #product-cycle-studio .studio-message { padding:12px; width:87%; display:flex; align-items:center; gap:10px; background:#ffffff12; border:1px solid #ffffff1a; border-radius:12px 12px 12px 3px; margin-bottom:12px; } #product-cycle-studio .studio-message.reply { background:#ffffff23; margin-left:auto; border-radius:12px 12px 3px 12px; } #product-cycle-studio .studio-message-avatar { width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center; color:var(--studio-accent); background:#ffffffb3; } #product-cycle-studio .studio-message-avatar svg { width:12px; height:12px; } #product-cycle-studio .studio-float-badge { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid #e4e7eb; border-radius:18px; background:#ffffff; box-shadow:0 12px 22px -10px #20334240; } #product-cycle-studio .studio-team-badge { left:0; top:217px; transform:rotate(-4deg); animation:studio-badge-float 8s ease-in-out infinite; } #product-cycle-studio .studio-team-symbol { width:37px; height:37px; border-radius:12px; color:#fff; display:grid; place-items:center; background:var(--studio-gradient); box-shadow:0 5px 9px #20334225; } #product-cycle-studio .studio-team-symbol svg { width:17px; height:17px; } #product-cycle-studio .studio-team-copy { display:flex; flex-direction:column; gap:3px; } #product-cycle-studio .studio-team-copy strong { font-size:22px; font-weight:800; letter-spacing:-.4px; line-height:1; } #product-cycle-studio .studio-team-copy span { font-size:12px; color:var(--studio-muted); } #product-cycle-studio .studio-phase-badge { right:0; top:82px; padding:11px 15px; gap:8px; color:var(--studio-accent); font-size:14px; font-weight:700; transform:rotate(5deg); border-radius:99px; } #product-cycle-studio .studio-phase-badge svg { width:16px; height:16px; } #product-cycle-studio .studio-spark { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--studio-accent); opacity:.4; } #product-cycle-studio .studio-spark.one { left:13%; top:91px; } #product-cycle-studio .studio-spark.two { right:12%; top:265px; width:4px; height:4px; } #product-cycle-studio .studio-caption { position:relative; text-align:left; padding:0 4px 0 23px; margin:0; } #product-cycle-studio .studio-caption h3 { color:var(--studio-ink); margin:0 0 12px; font-size:31px; line-height:1.1; font-weight:800; letter-spacing:-.7px; } #product-cycle-studio .studio-caption p { margin:0; min-height:66px; color:var(--studio-muted); font-size:15px; line-height:1.5; } #product-cycle-studio .studio-process { position:relative; padding:8px 6px 0; margin-top:4px; } #product-cycle-studio .studio-connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } #product-cycle-studio .studio-connection { fill:none; stroke:#b6c8de; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s; } #product-cycle-studio .studio-connection.is-before { stroke:var(--studio-accent); opacity:.55; } #product-cycle-studio .studio-stages { position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; } #product-cycle-studio .studio-stages li { min-width:0; margin:0; padding:0; } #product-cycle-studio .studio-stages li:nth-child(n) { grid-column:auto; grid-row:auto; } #product-cycle-studio .studio-stage { width:100%; min-height:79px; padding:4px 2px 0; display:flex; flex-direction:column; align-items:center; gap:9px; background:transparent; border:0; border-radius:12px; color:#42576a; font-size:12px; line-height:1.2; font-weight:600; position:relative; transition:color .2s; } #product-cycle-studio .studio-step-number { flex:none; width:37px; height:37px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid #dbe2e9; color:var(--studio-accent); font-size:14px; font-weight:700; box-shadow:0 4px 8px #20334208; transition:background .25s,color .25s,border-color .25s,box-shadow .25s; } #product-cycle-studio .studio-step-label { position:relative; max-width:100%; } #product-cycle-studio .studio-stage.is-before .studio-step-number { background:var(--studio-soft); border-color:color-mix(in srgb,var(--studio-accent) 30%,#dbe5ef); color:var(--studio-accent); } #product-cycle-studio .studio-stage:hover .studio-step-number { border-color:var(--studio-accent); color:var(--studio-accent); background:var(--studio-soft); } #product-cycle-studio .studio-stage[aria-pressed="true"] { color:var(--studio-ink); font-weight:800; } #product-cycle-studio .studio-stage[aria-pressed="true"] .studio-step-number { color:#fff; background:var(--studio-gradient); border-color:transparent; box-shadow:0 7px 12px #2033422a,0 0 0 4px #ffffff; } #product-cycle-studio .studio-stage[aria-pressed="true"] .studio-step-label::after { content:""; position:absolute; bottom:-6px; width:14px; height:2px; border-radius:2px; left:calc(50% - 7px); background:var(--studio-accent); } #product-cycle-studio .studio-entry { margin-top:19px; padding-top:16px; border-top:1px solid #dbe3ea; display:flex; align-items:center; justify-content:flex-start; gap:8px; color:#3c566d; font-size:14px; line-height:1.5; } #product-cycle-studio .studio-entry strong { font-weight:700; } #product-cycle-studio .studio-entry svg { width:16px; height:16px; color:var(--studio-accent); flex:none; } #product-cycle-studio .studio-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #product-cycle-studio[data-motion="off"] *,#product-cycle-studio[data-motion="off"] *::after { animation-play-state:paused!important; } #product-cycle-studio[data-motion="off"] .studio-scene-inner { animation:none!important; } @media (pointer:coarse) { #product-cycle-studio .studio-stage,#product-cycle-studio .studio-motion { min-height:44px; } } @keyframes studio-float { 0%,100% { transform:translateY(0) rotateX(11deg) rotateY(-12deg) rotateZ(-6deg); } 50% { transform:translateY(-9px) rotateX(9deg) rotateY(-9deg) rotateZ(-4deg); } } @keyframes studio-badge-float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-7px) rotate(-2deg); } } @keyframes studio-flow { to { stroke-dashoffset:-1100; } } @keyframes studio-blink { 50% { opacity:0; } } @keyframes studio-build { 0% { transform:translateX(-105%); } 70%,100% { transform:translateX(158%); } } @keyframes studio-scene-in { from { opacity:.3; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } } @container product-cycle (max-width:700px) { #product-cycle-studio .studio-hero { grid-template-columns:minmax(0,1fr); } #product-cycle-studio .studio-art { height:295px; } #product-cycle-studio .studio-stack { width:68%; left:16%; top:42px; height:205px; } #product-cycle-studio .studio-team-badge { top:211px; } #product-cycle-studio .studio-phase-badge { top:73px; } #product-cycle-studio .studio-caption { text-align:center; padding:5px 10% 16px; } #product-cycle-studio .studio-caption p { min-height:40px; } #product-cycle-studio .studio-caption .studio-entry { justify-content:center; } #product-cycle-studio .studio-stages { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px 0; } #product-cycle-studio .studio-stages li:nth-child(5) { grid-column:4; grid-row:2; } #product-cycle-studio .studio-stages li:nth-child(6) { grid-column:3; grid-row:2; } #product-cycle-studio .studio-stages li:nth-child(7) { grid-column:2; grid-row:2; } #product-cycle-studio .studio-stages li:nth-child(8) { grid-column:1; grid-row:2; } #product-cycle-studio .studio-stage { font-size:13px; } } @container product-cycle (max-width:520px) { #product-cycle-studio { padding:20px 19px; } #product-cycle-studio .studio-art { height:292px; } #product-cycle-studio .studio-stack { width:76%; left:9%; top:51px; height:207px; } #product-cycle-studio .studio-team-badge { top:224px; padding:9px 11px; } #product-cycle-studio .studio-phase-badge { top:73px; right:-3px; padding:9px 10px; font-size:13px; } #product-cycle-studio .studio-scene { padding:14px 13px; } #product-cycle-studio .studio-scene-heading { margin-bottom:11px; } #product-cycle-studio .studio-task { height:29px; margin-top:7px; } #product-cycle-studio .studio-code { height:107px; gap:6px; } #product-cycle-studio .studio-servers { height:98px; } #product-cycle-studio .studio-ui-hero { padding:10px; } #product-cycle-studio .studio-ui-cards { margin-top:8px; } #product-cycle-studio .studio-caption h3 { font-size:29px; min-height:68px; } #product-cycle-studio .studio-caption p { font-size:14px; min-height:44px; } #product-cycle-studio .studio-eyebrow { font-size:12px; letter-spacing:.4px; padding:6px 12px; } #product-cycle-studio .studio-entry { font-size:13px; } #product-cycle-studio .studio-process { padding:4px 10px 0; } #product-cycle-studio .studio-stages { grid-template-columns:minmax(0,1fr); gap:8px; } #product-cycle-studio .studio-stages li:nth-child(n) { grid-column:1; grid-row:auto; } #product-cycle-studio .studio-stage { flex-direction:row; min-height:50px; padding:6px 4px; gap:15px; text-align:left; font-size:15px; } #product-cycle-studio .studio-step-number { width:36px; height:36px; border-radius:11px; } #product-cycle-studio .studio-stage[aria-pressed="true"] .studio-step-label::after { left:0; bottom:-5px; } } @container product-cycle (max-width:370px) { #product-cycle-studio { padding:18px 14px; } #product-cycle-studio .studio-eyebrow { font-size:11px; } #product-cycle-studio .studio-art { height:278px; } #product-cycle-studio .studio-stack { width:81%; left:5%; height:198px; top:45px; } #product-cycle-studio .studio-workspace { grid-template-columns:31px minmax(0,1fr); } #product-cycle-studio .studio-scene { padding:11px; } #product-cycle-studio .studio-team-badge { top:216px; } #product-cycle-studio .studio-phase-badge { top:65px; } #product-cycle-studio .studio-caption { padding-left:2px; padding-right:2px; } #product-cycle-studio .studio-caption h3 { font-size:27px; } #product-cycle-studio .studio-entry { font-size:12px; } #product-cycle-studio .studio-code-line { gap:4px; } } @media (prefers-reduced-motion:reduce) { #product-cycle-studio *,#product-cycle-studio *::after { animation:none!important; transition:none!important; } } #product-cycle-studio .studio-caption h3 { font-family:var(--product-cycle-heading-font,var(--product-cycle-font,'Roboto Condensed','Arial Narrow',Arial,sans-serif)); }