.bot-message {
align-self:flex-start
}

.bot-message .message-content {
background:#ffffff14
}

.chat-container {
background:#ffffff0d;
border:1px solid #ffffff1a;
border-radius:12px;
display:flex;
flex-direction:column;
margin:0 auto;
max-width:1000px;
min-height:600px;
overflow:visible
}

.chat-demo-section {
margin:4rem 0;
padding:0 2rem
}

.chat-demo-section h2 {
color:#fff;
font-size:1.8rem;
margin-bottom:2rem;
text-align:center
}

.chat-input {
background:transparent;
border:none;
color:#fff;
flex:1;
font-family:'JetBrains Mono',monospace;
font-size:.9rem;
line-height:1.5;
min-width:200px;
outline:none;
padding:.25rem 0
}

.chat-input-container {
border-top:1px solid #ffffff1a;
padding:1.5rem;
position:relative
}

.chat-input-wrapper {
display:flex;
gap:.5rem;
margin-bottom:1rem;
position:relative
}

.chat-input::placeholder {
color:#ffffff80
}

.chat-message {
display:flex;
max-width:80%
}

.chat-message .loading-spinner {
animation:spin 1s linear infinite;
border:1px solid #ffffff4d;
border-radius:50%;
border-top-color:#fffc;
display:inline-block;
height:16px;
margin-left:.25rem;
vertical-align:middle;
width:16px
}

.chat-messages {
display:flex;
flex:1;
flex-direction:column;
gap:1rem;
margin-bottom:3rem;
overflow-y:auto;
padding:1.5rem
}

.chip-remove {
align-items:center;
background:none;
border:none;
border-radius:50%;
color:#fffc;
cursor:pointer;
display:flex;
font-size:1rem;
height:16px;
justify-content:center;
line-height:1;
margin-left:.25rem;
padding:0;
transition:all .2s ease;
width:16px
}

.chip-remove:hover {
background:#fff3;
color:#fff
}

.container {
margin:0 auto;
max-width:1200px
}

.input-with-chips {
background:#ffffff1a;
border:1px solid #fff3;
border-radius:8px;
cursor:text;
display:flex;
flex:1;
flex-direction:column;
gap:.5rem;
max-width:100%;
min-height:42px;
overflow:hidden;
padding:.5rem .75rem;
transition:all .2s ease;
width:100%
}

.input-with-chips .input-row {
align-items:flex-start;
display:flex;
flex-wrap:wrap;
gap:.5rem;
max-width:100%;
overflow:hidden;
width:100%
}

.input-with-chips:focus-within {
border-color:#ffd70080;
box-shadow:0 0 0 2px #ffd7001a
}

.message-content {
background:#ffffff1a;
border:1px solid #ffffff1a;
border-radius:12px;
padding:1rem
}

.message-content p {
margin:0 0 .5rem
}

.message-content p:last-child {
margin-bottom:0
}

.schema-display {
background:#0000004d;
border-radius:8px;
margin-top:1rem;
overflow:hidden
}

.schema-display code {
color:#0f8
}

.schema-display pre {
font-size:.8rem;
line-height:1.4;
margin:0;
overflow-x:auto;
padding:1rem
}

.selected-systems {
display:flex;
flex-wrap:wrap;
gap:.25rem
}

.send-button {
align-items:center;
background:#ffd70033;
border:1px solid #ffd7004d;
border-radius:8px;
color:#fff;
cursor:pointer;
display:flex;
justify-content:center;
padding:.75rem;
transition:all .3s ease
}

.send-button:disabled {
cursor:not-allowed;
opacity:.5
}

.send-button:hover:not(:disabled) {
background:#ffd7004d;
transform:translateY(-1px)
}

.suggestion-bubble {
background:#ffffff14;
border:1px solid #ffffff26;
border-radius:16px;
color:#ffffffe6;
cursor:pointer;
flex-shrink:0;
font-family:'JetBrains Mono',monospace;
padding:.5rem .75rem;
transition:all .3s ease;
white-space:nowrap
}

.suggestion-bubble:hover {
background:#ffffff1f;
color:#fff;
transform:translateY(-1px)
}

.suggestion-bubbles {
-ms-overflow-style:none;
display:flex;
flex-wrap:nowrap;
gap:.5rem;
margin-top:.25rem;
max-width:100%;
overflow-x:auto;
overflow-y:hidden;
padding-top:.5rem;
scrollbar-width:none;
width:100%
}

.suggestion-bubbles:empty,.suggestion-bubbles::-webkit-scrollbar {
display:none
}

.system-bubble {
align-items:center;
background:#ffffff1a;
border:1px solid #fff3;
border-radius:20px;
color:#fff;
cursor:pointer;
display:flex;
font-family:'JetBrains Mono',monospace;
font-size:.9rem;
gap:.5rem;
padding:.5rem 1rem;
text-decoration:none;
transition:all .3s ease
}

.system-bubble i.system-bubble-logo {
align-items:center;
display:flex;
height:20px;
justify-content:center;
width:20px
}

.system-bubble-logo {
height:20px;
object-fit:contain;
width:20px
}

.system-bubble.selected {
background:#ffd7004d;
border-color:#ffd70080
}

.system-bubble:hover {
background:#ffffff26;
border-color:#ffffff4d;
transform:translateY(-1px)
}

.system-bubble[data-system-id="github"] .system-bubble-logo,.system-link i.system-bubble-logo {
filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)
}

.system-bubble[data-system-id="hubspot"] .system-bubble-logo {
filter:brightness(0) saturate(100%) invert(42%) sepia(99%) saturate(1468%) hue-rotate(338deg) brightness(91%) contrast(89%)
}

.system-bubble[data-system-id="salesforce"] .system-bubble-logo {
filter:brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(7458%) hue-rotate(196deg) brightness(99%) contrast(98%)
}

.system-bubble[data-system-id="shopify"] .system-bubble-logo {
filter:brightness(0) saturate(100%) invert(42%) sepia(83%) saturate(423%) hue-rotate(120deg) brightness(119%) contrast(119%)
}

.system-bubble[data-system-id="stripe"] .system-bubble-logo {
filter:brightness(0) saturate(100%) invert(45%) sepia(95%) saturate(385%) hue-rotate(187deg) brightness(90%) contrast(94%)
}

.system-bubbles {
display:flex;
flex-wrap:wrap;
gap:.5rem;
margin-top:1rem
}

.system-chip {
align-items:center;
background:#ffd70033;
border:1px solid #ffd7004d;
border-radius:12px;
color:#fff;
display:flex;
font-size:.8rem;
gap:.25rem;
padding:.25rem .5rem;
white-space:nowrap
}

.system-chip-logo {
height:16px;
object-fit:contain;
width:16px
}

.system-selector {
bottom:100%;
display:block;
left:1rem;
margin-bottom:.5rem;
padding:1rem;
position:absolute;
right:1rem;
z-index:1000
}

.system-selector .system-bubbles {
justify-content:center;
margin-top:0
}

.typing-indicator .message-content {
background:#ffffff14;
padding:1rem
}

.user-message {
align-self:flex-end
}

.user-message .message-content {
background:#ffd70033;
border-color:#ffd7004d
}

body {
background-color:#0a0a0a;
color:#fff;
font-family:'JetBrains Mono',monospace;
margin:0;
min-height:100vh
}

@keyframes spin {
0% {
transform:rotate(0deg)
}

100% {
transform:rotate(360deg)
}
}

.chat-messages::-webkit-scrollbar {
width:6px
}

.chat-messages::-webkit-scrollbar-thumb {
background:#fff3;
border-radius:3px
}

.chat-messages::-webkit-scrollbar-thumb:hover {
background:#ffffff4d
}

.chat-messages::-webkit-scrollbar-track {
background:#ffffff0d
}

.external-icon {
height:14px;
margin-left:auto;
opacity:1;
width:14px
}

.integration-button {
align-items:center;
background:#ffffff14;
border:1px solid #ffffff26;
border-radius:8px;
color:#ffffffe6;
cursor:pointer;
display:flex;
font-family:'JetBrains Mono',monospace;
font-size:.85rem;
gap:.5rem;
padding:.5rem .75rem;
text-decoration:none;
transition:all .3s ease
}

.integration-button i {
height:16px;
width:16px
}

.integration-button:hover {
background:#ffffff1f;
border-color:#ffffff40;
color:#fff;
transform:translateY(-1px)
}

.integration-links {
display:flex;
gap:.75rem;
justify-content:start;
margin-bottom:1rem
}

.workflow-display {
border-radius:8px;
margin-top:1rem;
padding:1rem
}

.workflow-raw {
margin-top:1rem
}

.workflow-raw code {
color:#0f8
}

.workflow-raw pre {
background:#00000080;
border-radius:4px;
font-size:.8rem;
line-height:1.4;
margin:.5rem 0 0;
overflow-x:auto;
padding:1rem
}

.workflow-raw summary {
color:#ffffffb3;
cursor:pointer;
font-size:.9rem
}

.workflow-step {
background:#ffffff0d;
border-left:3px solid #f0f0f0;
border-radius:6px;
margin-bottom:.5rem;
padding:.75rem
}

.workflow-step h5 {
color:#f0f0f0;
margin:0 0 .5rem
}

.workflow-steps {
font-size:.9rem;
margin-bottom:1rem
}

.workflow-summary {
margin-bottom:1rem
}

.workflow-summary h4 {
color:#fff;
margin:0 0 .5rem
}

#schema-output-visual {
width:100%
}

.button-container {
align-items:center;
display:flex;
gap:1rem;
justify-content:flex-end;
margin-top:1rem
}

.contact-link {
align-items:center;
display:flex;
flex-direction:column;
margin:40px 0
}

.content {
padding:2rem
}

.demo-button {
background:linear-gradient(90deg,#fff 0%,#eee 100%);
border:none;
border-radius:50px;
color:#000;
font-family:'JetBrains Mono',monospace;
font-size:16px;
font-weight:600;
padding:8px 16px;
text-decoration:none;
transition:all .3s ease
}

.example-button {
background:#ffffff1a;
border:1px solid #fff3;
border-radius:4px;
color:#fff;
cursor:pointer;
font-family:'JetBrains Mono',monospace;
font-size:.8rem;
padding:.5rem 1rem;
transition:background .3s ease
}

.example-button.active {
background:#ffffff4d;
border-color:#ffffff80;
box-shadow:0 0 10px #ffd7004d
}

.example-button:hover {
background:#fff3
}

.example-buttons {
display:flex;
flex-wrap:wrap;
gap:.5rem
}

.example-row {
align-items:center;
display:flex;
gap:1rem;
justify-content:space-between
}

.examples-container {
background:#ffffff0d;
border-radius:12px;
display:flex;
flex-direction:column;
gap:1rem;
margin-top:3rem;
padding:2rem
}

.github-stars {
align-items:center;
background:#000c;
background:#ffd7001a;
border:1px solid #ffffff1a;
border-radius:50px;
box-shadow:0 0 20px #ffd7001a;
color:#fff;
display:inline-flex;
font-size:.9rem;
font-weight:700;
gap:8px;
padding:6px 12px;
text-decoration:none;
transition:all .3s ease;
white-space:nowrap
}

.github-stars:hover {
background:#ffd70033;
border-color:#ffd7004d;
box-shadow:0 4px 15px #ffd7004d;
transform:translateY(-2px)
}

.header {
align-items:center;
display:flex;
flex-direction:column;
text-align:center
}

.info-box {
font-size:1.4rem;
line-height:1.8;
margin-bottom:6rem;
margin-top:2rem;
max-width:1200px;
text-align:left
}

.input-example {
max-height:1000px;
max-width:100%;
overflow:auto
}

.instruction-box {
display:flex;
flex-direction:column;
gap:1rem
}

.instruction-input {
background:#0000004d;
border:1px solid #fff3;
border-radius:8px;
color:#fff;
font-family:'JetBrains Mono',monospace;
height:1.6em;
max-width:100%;
overflow-y:hidden;
padding:1rem;
resize:none;
width:calc(100% - 2rem)
}

.loading-container {
align-items:center;
backdrop-filter:blur(5px);
background:#000000b3;
border-radius:12px;
bottom:0;
display:none;
justify-content:center;
left:0;
position:absolute;
right:0;
top:0;
z-index:100
}

.loading-content {
align-items:center;
display:flex;
flex-direction:column;
gap:2rem;
max-width:400px;
text-align:center
}

.loading-spinner {
animation:rotate 2s linear infinite;
border-radius:50%;
height:80px;
position:relative;
width:80px
}

.loading-spinner::before {
animation:prixClipFix 2s linear infinite;
border:4px solid transparent;
border-bottom-color:#fff;
border-radius:50%;
border-top-color:#aaa;
box-sizing:border-box;
content:"";
inset:0;
position:absolute
}

.loading-step {
align-items:center;
display:flex;
gap:1rem;
opacity:.5;
transition:all .3s ease
}

.loading-step.completed .step-indicator {
background:linear-gradient(90deg,#aaa 0%,#fff 100%)
}

.loading-step.completed .step-text {
color:#fff
}

.loading-steps {
display:flex;
flex-direction:column;
gap:1rem;
width:100%
}

.logo {
display:block;
margin-bottom:0;
width:200px
}

.nav-bar {
align-items:center;
backdrop-filter:blur(10px);
background:linear-gradient(180deg,#0a0a0a 0%,#0a0a0a88 100%);
display:grid;
gap:1rem;
grid-template-columns:1fr auto 1fr;
padding:.8rem 2rem;
position:sticky;
top:0;
z-index:1000
}

.nav-center {
justify-self:center
}

.nav-left {
display:flex;
justify-content:start;
justify-self:center;
width:100%
}

.nav-link {
color:#fff;
font-weight:500;
line-height:1;
opacity:.85;
padding:4px 0;
text-decoration:none;
transition:opacity .3s ease;
white-space:nowrap
}

.nav-link:hover,.yc:hover,.loading-step.active {
opacity:1
}

.nav-links {
align-items:center;
display:flex;
gap:1.5rem;
white-space:nowrap
}

.nav-right {
align-items:center;
display:flex;
gap:1rem;
justify-self:end
}

.output-box {
background:#ffffff1a;
border-radius:12px;
padding:2rem
}

.output-container {
display:grid;
gap:2rem;
grid-template-columns:1fr 1fr
}

.output-content {
background:#0000004d;
border-radius:8px;
font-family:monospace;
min-height:200px;
padding:1rem;
white-space:pre-wrap
}

.output-title {
color:#ffffffb3;
font-size:.9rem;
margin-bottom:1rem;
margin-top:0
}

.run-button {
background:linear-gradient(90deg,#fff 0%,#eee 100%);
border:none;
border-radius:8px;
color:#000;
cursor:pointer;
font-family:'JetBrains Mono',monospace;
font-weight:600;
margin-top:1rem;
padding:.8rem 2rem;
transition:all .3s ease
}

.run-button:hover,.demo-button:hover {
box-shadow:0 4px 15px #ffd7004d;
transform:translateY(-2px)
}

.schema-description {
color:#B5CEA8;
display:block;
font-size:.85em;
font-style:italic;
margin-left:10px
}

.schema-key {
color:#9CDCFE;
font-weight:700
}

.schema-key.required {
border-bottom:1px dotted #fff
}

.schema-key.required::after {
color:#fff;
content:'*';
font-size:.9em;
margin-left:2px;
vertical-align:super
}

.schema-node {
border-left:1px solid #fff3;
margin-bottom:5px;
margin-left:20px;
margin-top:5px;
padding-left:10px
}

.schema-object-start,.schema-array-start {
color:#ffffffb3
}

.schema-output-column .loading-container {
background:#0a0a0ad9;
border-radius:8px;
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
z-index:50
}

.schema-property {
margin-bottom:3px
}

.schema-type {
color:#4EC9B0;
margin-left:5px
}

.schema-visual-container {
box-sizing:border-box;
font-family:'JetBrains Mono',monospace;
font-size:.9rem;
height:350px;
line-height:1.6;
min-height:350px;
overflow-y:auto;
white-space:normal;
width:100%
}

.source-container {
background:#0000004d;
border-radius:8px;
display:flex;
flex-direction:column;
font-family:monospace;
gap:1rem;
height:500px;
overflow:auto;
padding:1rem;
white-space:pre
}

.source-container pre {
margin:0;
max-width:800px;
width:fit-content
}

.source-container,.tab-content,pre {
scrollbar-color:#fff3 #ffffff0d;
scrollbar-width:thin
}

.source-container::-webkit-scrollbar,.tab-content::-webkit-scrollbar,pre::-webkit-scrollbar {
height:8px;
width:8px
}

.source-container::-webkit-scrollbar-thumb,.tab-content::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb {
background:#fff3;
border-radius:4px
}

.source-container::-webkit-scrollbar-thumb:hover,.tab-content::-webkit-scrollbar-thumb:hover,pre::-webkit-scrollbar-thumb:hover {
background:#ffffff4d
}

.source-container::-webkit-scrollbar-track,.tab-content::-webkit-scrollbar-track,pre::-webkit-scrollbar-track {
background:#ffffff0d;
border-radius:4px
}

.step-indicator {
align-items:center;
background:#fff3;
border-radius:50%;
display:flex;
font-size:12px;
font-weight:700;
height:24px;
justify-content:center;
width:24px
}

.step-text {
font-size:16px
}

.tab-content {
display:flex;
height:100%;
overflow:auto;
width:100%
}

.tab-content.active {
display:flex
}

.workflow-cta-button {
align-items:center;
background:#ffd70033;
border:1px solid #ffd7004d;
border-radius:8px;
color:#fff;
cursor:pointer;
display:inline-flex;
font-family:'JetBrains Mono',monospace;
font-size:.9rem;
font-weight:600;
gap:.5rem;
padding:.75rem 1.5rem;
text-decoration:none;
transition:all .3s ease
}

.workflow-cta-button:hover {
background:#ffd7004d;
border-color:#ffd70080;
box-shadow:0 4px 12px #ffd70033;
transform:translateY(-1px)
}

.yc {
display:block;
margin:40px auto;
margin-top:40px;
transition:opacity .3s ease;
width:150px
}

@keyframes rotate {
100% {
transform:rotate(360deg)
}
}

@keyframes prixClipFix {
0% {
clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)
}

100% {
clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)
}

25% {
clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)
}

50% {
clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)
}

75% {
clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)
}
}

@keyframes rocketTakeoff {
0% {
opacity:1;
transform:translateY(0) translateX(0) rotate(0deg) scale(1)
}

100% {
opacity:0;
transform:translateY(-300px) translateX(300px) rotate(45deg) scale(0.5)
}

20% {
transform:translateY(0) translateX(0) rotate(0deg) scale(1.1)
}
}

.rocket-emoji {
display:inline-block;
font-size:24px;
position:relative;
transition:all .3s ease;
z-index:2
}

.rocket-emoji.takeoff {
animation:rocketTakeoff 1.5s ease-in forwards
}

.rocket-emoji.takeoff + .rocket-trail {
animation:fadeOut 1.5s ease-in forwards;
height:30px;
opacity:1
}

@keyframes fadeOut {
0% {
height:30px;
opacity:1
}

100% {
height:60px;
opacity:0
}
}

.floating-get-started {
animation:fadeInUp .5s ease forwards;
background:linear-gradient(90deg,#fff 0%,#eee 100%);
border-radius:8px;
bottom:20px;
box-shadow:0 4px 15px #ffd7004d;
color:#000;
display:none;
font-family:'JetBrains Mono',monospace;
font-weight:600;
padding:10px 20px;
position:absolute;
right:20px;
text-decoration:none;
z-index:10
}

@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(20px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.connection-line {
animation:pulse-connection 2s infinite linear,dash-flow 1s infinite linear;
stroke:#fff6;
stroke-dasharray:5,5;
stroke-width:2
}

.menu-toggle {
display:none
}

.pipeline-connections-svg {
height:100%;
left:0;
overflow:visible;
pointer-events:none;
position:absolute;
top:0;
width:100%;
z-index:-1
}

.pipeline-layout {
position:relative
}

@keyframes pulse-connection {
0%,100% {
opacity:.5
}

50% {
opacity:1
}
}

@keyframes dash-flow {
to {
stroke-dashoffset:-10
}
}

.example-heading {
color:#fff;
margin-top:0;
text-align:left
}

.pipeline-column {
background:#ffffff0d;
border-radius:8px;
display:flex;
flex:1;
flex-direction:column;
gap:1rem;
padding:1.5rem
}

.pipeline-layout {
display:flex;
gap:2rem;
margin-top:2rem
}

.prompt-bubbles-info {
background:#0003;
border:1px solid #ffffff1a;
border-radius:4px;
font-size:.9em;
padding:1rem
}

.prompt-bubbles-info li {
margin-bottom:.5rem
}

.prompt-bubbles-info p {
margin-top:0
}

.prompt-bubbles-info ul {
list-style-type:'→ ';
margin:.5rem 0 0 1rem;
padding:0
}

.prompts-column .instruction-input {
background:#0000004d;
border:1px solid #fff3;
box-sizing:border-box;
font-size:.9rem;
height:100px;
margin-top:.5rem;
max-width:500px;
padding:1rem;
resize:vertical;
width:100%
}

.schema-output-column {
position:relative
}

.schema-output-column .loading-container {
background:#0a0a0ad9;
border-radius:8px;
bottom:0;
left:0;
position:absolute;
right:0;
top:0
}

.schema-output-column .tab-content {
height:350px
}

.schema-output-column .tab-content pre {
height:100%;
margin:0;
overflow:auto;
width:100%
}

.schema-output-column .tabs {
gap:1rem;
margin-bottom:1rem;
width:100%
}

.system-selection-column .example-button {
text-align:left;
width:100%
}

.system-selection-column .example-buttons {
display:flex;
flex-direction:column;
gap:.5rem
}

.tabs.show-tabs {
display:grid;
grid-template-columns:repeat(2,1fr)
}

@media (max-width: 1024px) {
.workflow-steps {
gap:3rem;
grid-template-columns:repeat(2,1fr)
}

.pipeline-connections-svg {
display:none
}

.pipeline-layout {
flex-direction:column;
position:static
}

.pipeline-column {
flex-basis:auto
}

.pipeline-layout {
flex-direction:column
}

.schema-output-column .tab-content {
height:250px
}
}

.bubble-placeholder {
display:block;
margin-bottom:.5rem
}

.bubble-placeholder.loading {
animation:pulse 1.5s infinite ease-in-out
}

.system-button {
align-items:center;
background:#ffffff1a;
border:1px solid #fff3;
border-radius:6px;
box-sizing:border-box;
color:#fff;
cursor:pointer;
display:flex;
font-family:'JetBrains Mono',monospace;
font-size:.9rem;
gap:.75rem;
padding:.75rem 1rem;
text-align:left;
transition:all .2s ease;
width:100%
}

.system-button.active {
background:#ffffff40;
border-color:#ffd70080;
box-shadow:0 0 8px #ffd7004d
}

.system-button:hover {
background:#ffffff26;
border-color:#ffffff4d
}

.system-buttons {
display:flex;
flex-direction:column;
gap:.75rem
}

.system-link {
text-decoration:none
}

.system-link:hover {
background:#ffffff1a
}

.system-logo {
flex-shrink:0;
height:24px;
object-fit:contain;
width:24px
}

.system-selection-column h3 {
margin-bottom:.5rem
}

@keyframes pulse {
0%,100% {
opacity:.5
}

50% {
opacity:1
}
}

.bubble-loading-spinner {
animation:rotate 1.5s linear infinite;
border-radius:50%;
height:30px;
margin:0 auto;
position:relative;
width:30px
}

.bubble-loading-spinner::before {
animation:prixClipFix 1.5s linear infinite;
border:3px solid transparent;
border-bottom-color:#fff;
border-radius:50%;
border-top-color:#aaa;
box-sizing:border-box;
content:"";
inset:0;
position:absolute
}

.feature-item h3 {
font-size:1.1rem;
margin-bottom:.5rem
}

.feature-item p {
color:#fffc;
font-size:.95rem;
line-height:1.7
}

.features-grid {
display:grid;
gap:2rem;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
margin-bottom:3rem
}

.features-list {
display:grid;
gap:1.5rem;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
list-style:none;
padding:0
}

.features-list h4 {
color:#B5CEA8;
font-size:1.05rem;
margin:0 0 .75rem
}

.features-list li {
background:#ffffff0d;
border:1px solid #ffffff1a;
border-radius:8px;
padding:1.5rem
}

.features-list p {
color:#ffffffb3;
font-size:.9rem;
line-height:1.6;
margin:0
}

.features-section {
border-top:1px solid #ffffff1a;
margin-top:4rem;
padding:2rem 0
}

.features-section h2 {
font-size:2rem;
margin-bottom:3rem;
text-align:center
}

.pipeline-layout .pipeline-column.prompts-column {
position:relative
}

.system-selection-column.loading {
opacity:.6;
pointer-events:none
}

.icon-button {
align-items:center;
background:#ffffff1a;
border:1px solid #fff3;
border-radius:8px;
color:#fff;
display:inline-flex;
height:36px;
justify-content:center;
text-decoration:none;
transition:all .3s ease;
width:36px
}

.icon-button:hover {
background:#ffffff26;
border-color:#ffffff4d;
transform:translateY(-1px)
}

.learn-more-link {
background:none;
color:#ffffffe6;
cursor:pointer;
display:inline-block;
font-family:'JetBrains Mono',monospace;
font-size:16px;
font-weight:600;
margin-left:1rem;
text-decoration:none;
transition:all .3s ease
}

.learn-more-link:hover {
background:#ffffff1a;
border-color:#fff;
box-shadow:0 4px 15px #ffd70033;
color:#fff;
transform:translateY(-2px)
}

.main-headline {
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background:linear-gradient(90deg,#fff 0%,#e0e0e0 100%);
background-clip:text;
font-size:3.5rem;
font-weight:700;
line-height:1.2;
margin-bottom:1.5rem;
text-align:left
}

.rotating-text {
-webkit-text-fill-color:#ffffffe6!important;
color:#ffffffe6!important;
display:block;
left:0;
position:absolute;
text-align:left;
top:0;
transition:transform .6s cubic-bezier(0.68,-0.55,0.265,1.55);
width:100%
}

.rotating-text-container {
display:inline-block;
height:1.2em;
overflow:hidden;
position:relative;
vertical-align:top;
width:520px
}

.rotating-text.slide-in {
transform:translateY(100%)
}

.rotating-text.slide-out {
transform:translateY(-100%)
}

@media (max-width: 480px) {
.main-headline {
font-size:2rem
}
}

.highlight-text {
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background:linear-gradient(90deg,#dbba00,#ffd900);
background-clip:text
}

.how-it-works-section {
background:#ffffff05;
border:1px solid #ffffff1a;
border-radius:20px;
margin:6rem 0;
padding:3rem;
text-align:center
}

.how-it-works-section h2 {
color:#fff;
font-size:2.5rem;
margin-bottom:1rem
}

.mode-btn {
align-items:center;
background:transparent;
border:none;
border-radius:50px;
color:#fff9;
cursor:pointer;
display:flex;
font-family:'JetBrains Mono',monospace;
gap:8px;
padding:10px 20px;
transition:all .3s ease;
white-space:nowrap
}

.mode-btn.active {
background:#ffd70080;
box-shadow:0 0 20px #ffd7004d;
color:#fff
}

.mode-btn:hover:not(.active) {
background:#ffffff0d;
color:#fffc
}

.mode-toggle {
background:#ffffff0d;
border-radius:50px;
display:flex;
justify-content:center;
margin:2rem auto 0;
padding:4px;
width:fit-content
}

.section-subtitle {
color:#fffc;
font-size:1.2rem;
line-height:1.6;
margin-bottom:3rem
}

.step-icon {
display:block;
font-size:3rem;
margin-bottom:1rem
}

.workflow-arrow {
display:none
}

.workflow-step {
align-items:center;
background:#ffffff0d;
border:1px solid #ffffff1a;
border-radius:15px;
box-sizing:border-box;
display:flex;
flex-direction:column;
height:250px;
min-height:0;
padding:2rem 1.5rem;
text-align:center;
transition:all .3s ease
}

.workflow-step h4 {
color:#fff;
font-size:1.2rem;
font-weight:600;
margin-bottom:.5rem
}

.workflow-step p {
color:#ffffffb3;
font-size:.95rem;
margin:0
}

.workflow-step:hover {
background:#ffffff14;
border-color:#ffffff4d;
box-shadow:0 10px 30px #00ffff1a;
transform:translateY(-5px)
}

.workflow-steps {
align-items:start;
box-sizing:border-box;
display:grid;
gap:3rem;
grid-template-columns:repeat(4,1fr);
margin:0 auto;
max-width:1200px;
width:100%
}

.build-button {
align-items:center;
align-self:flex-start;
background:linear-gradient(135deg,#ffffff26,#ffffff14);
border:1px solid #fff6;
border-radius:12px;
box-shadow:0 2px 8px #0003;
color:#fff;
cursor:pointer;
display:flex;
font-family:'JetBrains Mono',monospace;
font-weight:600;
gap:8px;
height:fit-content;
padding:1rem 2rem;
transition:all .3s ease;
white-space:nowrap
}

.build-button.loading {
cursor:not-allowed;
opacity:.8
}

.build-button:disabled {
cursor:not-allowed;
opacity:.6
}

.build-button:hover:not(:disabled) {
background:linear-gradient(135deg,#fff3,#ffffff1f);
border-color:#fff9;
box-shadow:0 4px 16px #0000004d;
transform:translateY(-2px)
}

.build-loading-spinner {
animation:spin 1s linear infinite;
border:2px solid #ffffff4d;
border-radius:50%;
border-top:2px solid #fff;
height:16px;
width:16px
}

.chip-remove {
align-items:center;
background:none;
border:none;
border-radius:50%;
color:#ffffffb3;
cursor:pointer;
display:flex;
font-size:14px;
height:16px;
justify-content:center;
margin-left:4px;
padding:0;
transition:all .2s ease;
width:16px
}

.chip-remove:hover {
background:#ffffff1a;
color:#fff
}

.input-row {
align-items:flex-start;
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:12px
}

.input-with-chips {
background:#0000004d;
border:1px solid #fff3;
border-radius:12px;
flex:1;
max-width:calc(100% - 2rem);
padding:1rem;
transition:all .3s ease
}

.input-with-chips:focus-within {
border-color:#ffd70080;
box-shadow:0 0 20px #ffd70033
}

.selected-systems,.suggestion-bubbles {
display:flex;
flex-wrap:wrap;
gap:8px
}

.suggestions-loading {
align-items:center;
color:#fff9;
display:flex;
font-family:'JetBrains Mono',monospace;
font-size:.8rem;
gap:8px
}

.suggestions-loading-spinner {
animation:spin 1s linear infinite;
border:1px solid #fff3;
border-radius:50%;
border-top:1px solid #0ff9;
height:12px;
width:12px
}

.system-chip {
align-items:center;
background:#ffd7001a;
border:1px solid #ffffff4d;
border-radius:20px;
color:#fff;
display:flex;
font-size:.75rem;
gap:6px;
padding:4px 8px
}

.workflow-demo-section {
font-size:1.5rem;
margin:4rem 0
}

.workflow-demo-section .system-bubble {
align-items:center;
background:#ffffff0d;
border:1px solid #ffffff1a;
border-radius:25px;
color:#fffc;
cursor:pointer;
display:flex;
font-family:'JetBrains Mono',monospace;
font-size:.85rem;
gap:8px;
padding:8px 16px;
text-decoration:none;
transition:all .3s ease
}

.workflow-demo-section .system-bubble-logo {
border-radius:50%;
height:16px;
width:16px
}

.workflow-demo-section .system-bubble.selected {
background:#ffd70033;
border-color:#ffd70080;
color:#fff
}

.workflow-demo-section .system-bubble:hover {
background:#ffffff1a;
border-color:#ffffff4d;
color:#fff;
transform:translateY(-2px)
}

.workflow-demo-section .system-bubbles {
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:center;
margin-bottom:1.5rem
}

.workflow-demo-section .system-link {
color:#fff9!important
}

.workflow-demo-section .system-link:hover {
color:#fff!important
}

.workflow-demo-section .system-selector {
bottom:auto;
left:auto;
margin-bottom:2rem;
padding:0;
position:static;
right:auto;
z-index:auto
}

.workflow-display {
background:#ffffff0d;
border-radius:12px;
margin-top:1rem;
padding:1.5rem;
text-align:left
}

.workflow-display h3 {
margin-bottom:2rem;
text-align:center
}

.workflow-input {
background:transparent;
border:none;
color:#fff;
flex:1;
font-family:'JetBrains Mono',monospace;
font-size:.9rem;
line-height:1.4;
min-height:30px;
min-width:200px;
outline:none;
resize:vertical
}

.workflow-input-container h3 {
color:#ffffffe6;
font-size:3.5rem;
font-weight:500;
margin-bottom:2rem
}

.workflow-input-wrapper {
align-items:flex-start;
display:flex;
gap:1rem;
margin:0;
max-width:100%
}

.workflow-input::placeholder {
color:#ffffff80
}

.workflow-results {
background:#0003;
border:1px solid #ffffff1a;
border-radius:15px;
margin-top:3rem;
padding:2rem;
text-align:left
}

.workflow-results .workflow-step {
background:#0000004d;
border-left:3px solid #fff;
border-radius:8px;
margin-bottom:0;
padding:1.5rem;
overflow:scroll;
}

.workflow-results .workflow-step h5 {
color:#fff;
font-size:1rem;
margin-bottom:.5rem
}

.workflow-results .workflow-step p {
color:#fffc;
font-size:.85rem;
line-height:1.4;
margin:.5rem 0
}

.workflow-results .workflow-steps {
display:flex;
flex-direction:column;
gap:1.5rem;
margin-top:2rem
}

.workflow-summary h4 {
color:#fff;
margin-bottom:1rem;
text-align:center
}

.automation-stack {
background:#ffffff0d;
border-radius:16px;
margin:3rem 0;
margin:3rem auto;
max-width:600px;
padding:2rem
}

.automation-stack h3 {
color:#ffffffe6;
font-size:1.4rem;
margin-bottom:2rem
}

.enterprise-features {
margin:3rem 0
}

.enterprise-grid {
display:grid;
gap:2rem;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
margin-top:2rem
}

.enterprise-icon {
font-size:2rem;
margin-bottom:1rem
}

.enterprise-item {
background:#ffffff0d;
border:1px solid #ffffff1a;
border-radius:12px;
padding:2rem;
text-align:center;
transition:all .3s ease
}

.enterprise-item h4 {
color:#fffffff2;
font-size:1.1rem;
margin:0 0 1rem
}

.enterprise-item p {
color:#ffffffb3;
font-size:.9rem;
line-height:1.5;
margin:0
}

.enterprise-item:hover {
background:#ffffff14;
border-color:#fff3;
transform:translateY(-2px)
}

.enterprise-section {
margin:4rem 0;
text-align:center
}

.enterprise-section h1 {
color:#fff;
font-size:2.5rem;
margin-bottom:1rem
}

.stack-layer {
background:#ffffff14;
border:1px solid #ffffff1a;
border-radius:8px;
margin:1rem 0;
padding:1.5rem
}

.stack-layer h4 {
color:#fffffff2;
font-size:1.1rem;
margin:0 0 .5rem
}

.stack-layer p {
color:#ffffffb3;
font-size:.9rem;
margin:0
}

.stack-layer.highlight {
background:#ffd7001a;
border:1px solid #ffffff4d
}

.bottom-cta-section {
background:#ffd7000d;
border:1px solid #ffffff1a;
border-radius:24px;
margin:4rem 0 2rem;
padding:4rem 0;
text-align:center
}

.bottom-cta-section h2 {
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background:linear-gradient(90deg,#fff 0%,#e0e0e0 100%);
background-clip:text;
font-size:2.5rem;
font-weight:700;
margin:0 0 1rem
}

.bottom-cta-section p {
color:#fffc;
font-size:1.2rem;
margin:0 0 2.5rem;
margin-left:auto;
margin-right:auto;
max-width:600px
}

.cta-button {
align-items:center;
border:2px solid transparent;
border-radius:12px;
display:inline-flex;
font-size:1rem;
font-weight:600;
gap:.5rem;
padding:1rem 2rem;
text-decoration:none;
transition:all .3s ease
}

.cta-button.primary {
background:linear-gradient(90deg,#fff 0%,#eee 100%);
color:#000
}

.cta-button.primary:hover {
background:linear-gradient(90deg,#f8f8f8 0%,#e8e8e8 100%);
box-shadow:0 8px 25px #fff3;
transform:translateY(-2px)
}

.cta-button.secondary {
background:transparent;
border:2px solid #ffffff4d;
color:#fff
}

.cta-button.secondary:hover {
background:#ffffff1a;
border-color:#fff9;
box-shadow:0 8px 25px #ffffff1a;
transform:translateY(-2px)
}

.cta-buttons {
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:center
}

.developer-content,.business-content {
max-height:none;
opacity:1;
overflow:visible;
transform:translateY(0)
}

.developer-demo.fade-out,.business-demo.fade-out,.developer-text.fade-out,.business-text.fade-out {
opacity:0;
transform:translateY(-5px)
}

.fade-in,.mode-content,.developer-demo,.business-demo,.developer-text,.business-text {
opacity:1;
transform:translateY(0)
}

.fade-out,.mode-content.fade-out,.developer-content.fade-out,.business-content.fade-out {
opacity:0;
transform:translateY(-10px)
}

.mode-content,.developer-content,.business-content,.developer-demo,.business-demo,.developer-text,.business-text {
transition:all .4s cubic-bezier(0.4,0.0,0.2,1)
}

.section-tag {
backdrop-filter:blur(10px);
background:#ffd70033;
border:1px solid #ffd70066;
border-radius:20px;
box-shadow:0 4px 15px #ffd7001a;
color:#ffffffe6;
display:inline-block;
font-size:.85rem;
font-weight:600;
letter-spacing:.5px;
padding:.5rem 1.5rem;
text-align:center;
text-transform:uppercase
}

.build-button [data-lucide],.demo-button [data-lucide],.cta-button [data-lucide] {
filter:contrast(1.3) saturate(1.2)
}

.enterprise-icon {
display:flex;
font-size:2rem;
justify-content:center;
margin-bottom:1rem
}

.enterprise-icon [data-lucide] {
color:#fff!important;
filter:contrast(1.5) saturate(1.5) drop-shadow(0 0 5px #ffd70080)
}

.external-icon {
color:#fff;
height:48px;
image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
image-rendering:crisp-edges;
margin-left:6px;
width:48px
}

.feature-icon {
display:flex;
justify-content:center;
margin-bottom:1rem
}

.feature-icon [data-lucide] {
color:#fff!important;
filter:contrast(1.5) saturate(1.5) drop-shadow(0 0 6px #ffd70066)
}

.icon-button {
background:#ffd7001a;
border:1px solid #ffd70033;
color:#fff
}

.icon-button [data-lucide] {
filter:contrast(1.3) saturate(1.2);
image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
image-rendering:crisp-edges
}

.icon-button:hover {
background:#ffd70026;
border-color:#ffd7004d
}

.step-icon {
align-items:center;
display:block;
display:flex;
font-size:3rem;
justify-content:center;
margin-bottom:1rem
}

.step-icon [data-lucide] {
color:#fff!important;
filter:contrast(1.5) saturate(1.5) drop-shadow(0 0 8px #ffd7004d)
}

.workflow-results .workflow-step {
align-items:start;
height:auto;
width:100%
}

.workflow-step .lucide,.feature-icon [data-lucide] {
height:48px;
width:48px
}

@media (max-width: 768px) {
.integration-button {
justify-content:center;
max-width:200px;
width:100%
}

.integration-links {
align-items:center;
flex-direction:column
}

.container {
padding:1rem
}

.content {
padding:0
}

.example-buttons {
display:flex;
flex-wrap:nowrap;
margin-bottom:1rem;
overflow-x:auto;
padding-bottom:.5rem;
width:100%
}

.example-row {
align-items:flex-start;
flex-direction:column
}

.examples-container {
background-color:#000;
padding:0
}

.floating-get-started {
bottom:10px;
font-size:14px;
padding:8px 16px;
right:10px
}

.header h1 {
font-size:1.5rem
}

.info-box {
font-size:16px;
line-height:1.5
}

.instruction-box {
padding:0 1rem
}

.instruction-bubble {
font-size:.75rem;
padding:.3rem .6rem
}

.instruction-bubbles-container {
gap:.4rem;
margin-top:.5rem
}

.instruction-input {
font-size:14px;
height:4em;
margin:0 auto;
padding:1rem;
width:calc(100% - 2rem)
}

.logo {
width:150px
}

.menu-toggle {
background:none;
border:none;
cursor:pointer;
display:block;
height:18px;
position:relative;
width:28px;
z-index:101
}

.menu-toggle span {
background:#fff;
border-radius:3px;
display:block;
height:3px;
left:0;
opacity:1;
position:absolute;
transform:rotate(0deg);
transition:.25s ease-in-out;
width:100%
}

.menu-toggle span:nth-child(1) {
top:0
}

.menu-toggle span:nth-child(2) {
top:8px
}

.menu-toggle span:nth-child(3) {
top:16px
}

.menu-toggle.active span:nth-child(1) {
top:8px;
transform:rotate(135deg)
}

.menu-toggle.active span:nth-child(2) {
left:-60px;
opacity:0
}

.menu-toggle.active span:nth-child(3) {
top:8px;
transform:rotate(-135deg)
}

.nav-bar {
grid-template-columns:1fr auto
}

.nav-center {
justify-self:start;
margin-right:auto
}

.nav-left {
display:none
}

.nav-links {
backdrop-filter:blur(20px);
background:#0a0a0af2;
border-top:1px solid #ffffff1a;
flex-direction:column;
gap:2rem;
left:0;
max-height:calc(100vh - 70px);
min-height:auto;
opacity:0;
overflow-y:auto;
padding:2rem;
position:fixed;
right:0;
top:70px;
transform:translateY(-100%);
transition:all .3s ease;
visibility:hidden;
z-index:100
}

.nav-links.active {
max-height:calc(100vh - 70px);
min-height:auto;
right:0;
opacity:1;
transform:translateY(0);
visibility:visible
}

.output-container {
grid-template-columns:1fr
}

.prompts-column .instruction-input {
font-size:.85rem;
height:80px
}

.run-button {
width:100%
}

.source-container {
height:400px
}

.tabs {
gap:.5rem;
grid-template-columns:1fr
}

.workflow-results .workflow-step {
padding:1rem
}

.workflow-results .workflow-steps {
gap:1rem;
grid-template-columns:1fr
}

.build-button {
align-self:stretch;
margin-top:0
}

.demo-title {
font-size:1.5rem
}

.workflow-demo-section {
padding:0
}

.workflow-demo-section .system-bubble {
font-size:.8rem;
padding:6px 12px
}

.workflow-demo-section .system-bubbles {
gap:.5rem;
justify-content:center
}

.workflow-input {
min-height:80px
}

.workflow-input-container h3 {
font-size:1.1rem
}

.workflow-input-wrapper {
align-items:stretch;
flex-direction:column;
gap:1rem
}

.automation-stack {
margin:2rem 1rem;
padding:1.5rem
}

.enterprise-grid {
gap:1.5rem;
grid-template-columns:1fr;
margin-bottom:2rem
}

.enterprise-item {
padding:1.5rem
}

.bottom-cta-section h2 {
font-size:2rem
}

.bottom-cta-section p {
font-size:1rem;
margin-bottom:2rem
}

.cta-button {
justify-content:center;
max-width:calc(100% - 4rem);
width:280px
}

.cta-buttons {
align-items:center;
flex-direction:column
}

.info-box {
font-size:16px;
line-height:1.5;
margin-bottom:0
}

.features-grid,.features-list {
grid-template-columns:1fr
}

.features-section h2 {
font-size:1.5rem
}

.how-it-works-section {
margin:4rem 0 2rem;
padding:2rem 1rem 0
}

.how-it-works-section h2 {
font-size:2rem
}

.section-subtitle {
font-size:1rem;
margin-bottom:2rem
}

.step-icon {
font-size:2.5rem
}

.workflow-step {
padding:1.5rem 1rem
}

.workflow-steps {
gap:2rem;
grid-template-columns:1fr;
margin-bottom:2rem
}

.section-tag {
font-size:.75rem;
margin-bottom:1.5rem;
padding:.4rem 1.2rem
}

.chat-container {
height:500px;
margin:0 1rem
}

.chat-message {
max-width:90%
}

.chat-messages,.chat-input-container {
padding:1rem
}

.input-with-chips {
align-items:flex-start;
min-height:38px
}

.system-bubble {
font-size:.8rem;
padding:.4rem .8rem
}

.system-bubbles {
justify-content:center
}

.system-chip {
font-size:.75rem
}

.system-selector {
left:1rem;
right:1rem
}

.enterprise-icon [data-lucide] {
height:1.8rem;
width:1.8rem
}

.feature-icon [data-lucide] {
height:2rem;
width:2rem
}

.step-icon [data-lucide] {
height:2.5rem;
width:2.5rem
}
}

@supports (image-rendering: pixelated) {
[data-lucide] {
image-rendering:pixelated;
transform:scale(1.02)
}
}

.icon {
filter:brightness(0) invert(1);
height:48px;
width:48px
}