:root{color-scheme: dark; --bg: #080b0a; --surface: #101411; --line: #252c27; --text: #f0f1ec; --muted: #a4ada5; --green: #bbf77a; --font: 'Forma Sans',Inter,Arial,sans-serif; --mono: ui-monospace,SFMono-Regular,Consolas,monospace;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; scroll-padding-top: 95px;}
body{margin: 0px; background: var(--bg); color: var(--text); font: 15px/1.65 var(--font); -webkit-font-smoothing: antialiased;}
::selection{background: var(--green); color: var(--bg);}
a{color: inherit; text-decoration: none;}
button{font: inherit; cursor: pointer;}
a, button, summary{-webkit-tap-highlight-color: transparent;}
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible{outline: 2px solid var(--green); outline-offset: 5px;}
button{color: inherit;}
svg{flex-shrink: 0;}
h1, h2, h3, p{margin: 0px;}
h1, h2, h3{text-wrap: balance;}
p{text-wrap: pretty;}
button, a, summary{touch-action: manipulation;}
[hidden]{display: none !important;}
.icon-library{position: absolute; width: 0px; height: 0px; overflow: hidden;}
.icon{width: 21px; height: 21px; fill: none; stroke: currentcolor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.wrap{width: min(1240px, 100% - 112px); margin-inline: auto;}
.section{padding-block: 110px;}
.eyebrow{font: 12px/1.5 var(--mono); letter-spacing: 0.13em; display: flex; align-items: center; gap: 10px;}
.soon-tag{display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 7px; font: 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); border: 1px solid rgb(61, 92, 43); border-radius: 3px; background: rgba(180, 234, 117, 0.047); white-space: nowrap;}
.soon-line{display: block; margin-top: 12px;}
.soon-line .soon-tag{margin-left: 0px; margin-right: 8px;}
.status-dot{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0;}
.index{color: var(--green); margin-right: 5px;}
.skip-link{position: fixed; left: 20px; top: -100px; z-index: 100; background: var(--green); color: var(--bg); padding: 12px 20px;}
.skip-link:focus{top: 12px;}
.header{position: sticky; top: 0px; z-index: 30; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(8, 11, 10, 0.937); backdrop-filter: blur(16px);}
.nav{height: 87px; display: flex; align-items: center; justify-content: space-between; gap: 25px;}
.brand{display: inline-flex; gap: 13px; align-items: center; font-size: 25px; line-height: 1.2; letter-spacing: -1.1px; font-weight: 650; white-space: nowrap;}
.brand-light{font-weight: 380;}
.brand-period{color: var(--green);}
.brand-icon{width: 26px; height: 29px; position: relative; display: block;}
.brand-icon::before{content: ""; position: absolute; left: 5px; top: 5px; height: 21px; width: 2px; background: var(--green);}
.brand-icon::after{content: ""; position: absolute; left: 6px; top: 3px; width: 17px; height: 17px; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 0px; border-left: 0px; border-radius: 0px 0px 13px;}
.brand-icon i{position: absolute; z-index: 1; width: 7px; height: 7px; background: var(--green); border: 2px solid var(--bg); outline: 1px solid var(--green); border-radius: 50%; left: 2.5px; top: 1px;}
.brand-icon i:nth-child(2){top: 23px;}
.brand-icon i:nth-child(3){left: 19px; top: 0px;}
.nav-links{display: flex; align-items: center; gap: 30px; font-size: 12px; color: rgb(189, 197, 189);}
.nav-links > a{padding-block: 14px;}
.nav-links > a:hover, .text-link:hover{color: var(--green);}
.button{min-height: 53px; padding: 14px 23px; background: var(--green); color: rgb(16, 32, 8); display: inline-flex; gap: 24px; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 1px solid var(--green); border-radius: 5px; transition: background 0.2s, transform 0.2s;}
.button:hover{background: rgb(209, 255, 159); border-color: rgb(209, 255, 159); transform: translateY(-2px);}
.button-small{min-height: 40px; padding: 9px 14px; gap: 16px; font-size: 12px;}
.button-small .icon{width: 16px; height: 16px;}
.menu-toggle, .mobile-access{display: none !important;}
.hero{position: relative; display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 18px; padding-top: 87px;}
.hero-copy{position: relative; z-index: 2;}
.hero-copy > .eyebrow{font-size: 12px; letter-spacing: 0.11em;}
h1{font-size: clamp(49px, 5.4vw, 78px); line-height: 1.07; letter-spacing: -0.065em; font-weight: 500; margin-top: 30px;}
h1 > span{color: var(--green);}
.hero-description{color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 405px; margin-top: 26px;}
.hero-actions{display: flex; align-items: center; gap: 27px; margin-top: 33px;}
.text-link{display: inline-flex; align-items: center; gap: 10px; font-size: 12px; min-height: 44px;}
.play-icon{font-size: 25px; line-height: 1;}
.hero-note{display: flex; gap: 15px; margin-top: 23px; color: rgb(154, 164, 155); font-size: 12px;}
.hero-note span + span::before{content: "·"; margin-right: 15px; color: rgb(95, 113, 95);}
.hero-art{position: relative; min-width: 0px; margin-top: -20px; height: 490px; isolation: isolate; overflow: hidden; background-image: radial-gradient(rgba(185, 236, 123, 0.137) 0.65px, transparent 0.65px); background-size: 23px 23px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent);}
.hero-art::before{content: ""; position: absolute; inset: 8%; background: radial-gradient(rgba(158, 232, 96, 0.04), transparent 70%); z-index: -1;}
#form-canvas{display: block; width: 100%; height: 100%; position: absolute; inset: 0px;}
.art-orbit{position: absolute; inset: 10%; border: 1px solid rgba(185, 236, 123, 0.07); border-radius: 50%;}
.art-orbit::before, .art-orbit::after{content: ""; position: absolute; left: -13%; right: -13%; top: 50%; border-top: 1px solid rgba(185, 236, 123, 0.07);}
.art-orbit::after{transform: rotate(90deg);}
.art-label{position: absolute; bottom: 49px; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 1px solid rgb(60, 77, 55); background: rgba(11, 17, 12, 0.93); display: flex; gap: 10px; align-items: center; font: 12px var(--mono); padding: 10px 13px; border-radius: 4px; color: rgb(199, 211, 186);}
.hero-baseline{grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 70px; padding-block: 22px; display: flex; justify-content: space-between; font: 12px var(--mono); letter-spacing: 0.08em; color: rgb(155, 165, 154);}
.hero-baseline a{display: flex; gap: 26px;}
.hero-baseline a:hover{color: var(--green);}
.hero-baseline > a > span{color: var(--green);}
.section-top{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px;}
.section-aside{font-size: 12px; color: rgb(150, 161, 148);}
h2{font-size: clamp(34px, 3.5vw, 48px); line-height: 1.16; letter-spacing: -0.055em; font-weight: 480;}
h2 span{color: rgb(155, 167, 155);}
.section-heading{display: flex; align-items: end; justify-content: space-between; gap: 65px; margin-bottom: 46px;}
.section-heading > p{max-width: 315px; font-size: 13px; color: var(--muted); line-height: 1.8;}
.platform{padding-top: 83px;}
.workspace{border: 1px solid rgb(53, 64, 51); border-radius: 9px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.333) 0px 28px 80px; scroll-margin-top: 110px;}
.workspace-bar{height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0px 22px; background: rgb(20, 26, 22); border-bottom: 1px solid var(--line);}
.workspace-brand{display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 550;}
.mini-mark{font-size: 22px; color: var(--green); font-weight: 750;}
.slash{color: rgb(119, 134, 117);}
.project-name{color: rgb(174, 184, 173); font-weight: 400;}
.demo-badge{font: 12px var(--mono); letter-spacing: 0.1em; color: rgb(171, 184, 169); border: 1px solid rgb(53, 67, 51); border-radius: 3px; padding: 5px 7px;}
.workspace-body{display: grid; grid-template-columns: 182px 1fr; min-height: 465px; background: rgb(15, 19, 16);}
.workspace-sidebar{padding: 23px 12px; display: flex; flex-direction: column; border-right: 1px solid var(--line);}
.sidebar-label{display: flex; justify-content: space-between; padding: 0px 10px; font: 12px var(--mono); letter-spacing: 0.12em; color: rgb(157, 168, 151); margin-bottom: 18px;}
.sidebar-label > span{color: rgb(99, 115, 94);}
.page-buttons{display: grid; gap: 3px;}
.page-button{display: flex; align-items: center; gap: 9px; background: transparent; border: 1px solid transparent; min-height: 38px; padding: 8px 10px; font-size: 12px; text-align: left; border-radius: 4px; color: rgb(163, 173, 160);}
.page-button .icon{width: 14px; height: 14px;}
.page-button > span{margin-left: auto; color: rgb(123, 140, 114);}
.page-button.active{background: rgba(194, 250, 123, 0.043); border-color: rgba(194, 250, 123, 0.086); color: var(--green);}
.page-button:hover{background: rgba(194, 250, 123, 0.05);}
.sidebar-bottom{margin-top: auto; display: flex; gap: 9px; align-items: start; color: rgb(153, 165, 147); font-size: 12px; padding: 15px 10px 0px; line-height: 1.8;}
.sidebar-bottom .status-dot{margin-top: 5px; width: 4px; height: 4px;}
.sidebar-bottom strong{font-weight: 450; color: rgb(198, 210, 189);}
.workspace-main{min-width: 0px;}
.workspace-toolbar{display: flex; align-items: center; justify-content: space-between; padding: 0px 17px; gap: 12px; height: 51px; border-bottom: 1px solid var(--line); background: rgb(18, 23, 19);}
.editor-tabs{display: flex; gap: 20px; height: 100%;}
.editor-tabs button{background: none; border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; display: flex; align-items: center; gap: 6px; color: rgb(157, 170, 151); font-size: 12px; padding: 0px 2px; white-space: nowrap;}
.editor-tabs .icon{width: 13px; height: 13px;}
.editor-tabs button[aria-selected="true"]{color: var(--green); border-bottom-color: var(--green);}
.draft-state{display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgb(178, 189, 170); white-space: nowrap;}
.draft-state .status-dot{width: 4px; height: 4px;}
.preview-panel{padding: 18px; background: rgb(25, 31, 25);}
.sample-site{background: rgb(236, 235, 227); color: rgb(36, 40, 31); padding: 23px 28px 17px; overflow: hidden; min-height: 380px;}
.sample-nav{display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 650; letter-spacing: -0.05em;}
.sample-star{color: rgb(91, 95, 76); margin-left: 6px; font-size: 20px;}
.sample-nav-caption{font: 12px var(--mono); letter-spacing: 0.12em; color: rgb(85, 91, 75);}
.sample-content{display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 275px; gap: 10px;}
.sample-copy{padding-block: 23px; position: relative; z-index: 1;}
.sample-kicker{font: 12px var(--mono); letter-spacing: 0.13em; color: rgb(95, 101, 87);}
.sample-copy h3{font-size: clamp(31px, 3.25vw, 47px); letter-spacing: -0.065em; line-height: 1.05; font-weight: 500; margin-top: 16px;}
.sample-copy > p{max-width: 245px; color: rgb(88, 94, 80); font-size: 12px; line-height: 1.8; margin-top: 14px;}
.sample-cta{display: flex; gap: 22px; align-items: center; min-height: 33px; background: rgb(43, 53, 40); color: rgb(239, 241, 231); border: 0px; padding: 8px 11px; font-size: 12px; margin-top: 20px;}
.sample-cta:focus-visible{outline-color: rgb(55, 73, 42);}
.sample-cta > span{font-size: 12px;}
.sample-sculpture{position: relative; height: 240px; min-width: 0px;}
.sculpture-inner{position: absolute; left: 50%; top: 45%; width: 165px; height: 170px; transform: translate(-50%, -50%) rotate(-30deg);}
.sculpture-inner i{position: absolute; inset: 0px; border: 15px solid rgb(165, 181, 139); border-radius: 48% 48% 20% 20%; transform: translateY(calc(var(--n)*7px)) scaleX(calc(1 - var(--n)*.035)); box-shadow: rgba(64, 84, 56, 0.5) 1px 2px 1px, rgb(247, 255, 208) 1px 1px 1px inset; background: rgba(165, 181, 139, 0.024);}
.sculpture-inner i:nth-child(1){--n: 8;}
.sculpture-inner i:nth-child(2){--n: 7;}
.sculpture-inner i:nth-child(3){--n: 6;}
.sculpture-inner i:nth-child(4){--n: 5;}
.sculpture-inner i:nth-child(5){--n: 4;}
.sculpture-inner i:nth-child(6){--n: 3;}
.sculpture-inner i:nth-child(7){--n: 2;}
.sculpture-inner i:nth-child(8){--n: 1;}
.sculpture-inner i:nth-child(9){--n: 0;}
.sample-sculpture > span{position: absolute; bottom: 0px; left: 0px; right: 0px; text-align: center; color: rgb(104, 115, 94); font: 12px var(--mono); letter-spacing: 0.09em;}
.sample-footer{border-top: 1px solid rgba(59, 68, 49, 0.18); display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; font: 12px var(--mono); letter-spacing: 0.07em; color: rgb(99, 106, 89);}
.workspace-foot{display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; gap: 15px; background: rgb(18, 23, 19); border-top: 1px solid var(--line); font-size: 12px; color: rgb(164, 176, 155);}
.workspace-foot > span:first-child{display: flex; align-items: center; gap: 7px;}
.workspace-foot .status-dot{width: 4px; height: 4px;}
.code-panel, .history-panel{min-height: 416px; padding: 25px 32px; background: rgb(16, 24, 16);}
.code-filename{display: flex; gap: 10px; align-items: center; font: 12px var(--mono); color: rgb(215, 225, 204);}
.code-filename span:last-child{margin-left: auto; font-size: 12px; color: rgb(143, 161, 126);}
.code-panel pre{margin: 24px 0px; overflow: auto; color: rgb(194, 237, 154); font: 12px/1.95 var(--mono); tab-size: 2;}
.code-note{font-size: 12px; color: rgb(153, 171, 140); border-top: 1px solid var(--line); padding-top: 16px;}
.history-heading{font-size: 20px; letter-spacing: -0.04em;}
.history-description{font-size: 12px; color: var(--muted); margin-top: 5px; margin-bottom: 18px;}
.history-item{display: flex; gap: 17px; align-items: center; position: relative; padding: 14px 0px;}
.history-node{width: 8px; height: 8px; border-radius: 50%; background: rgb(81, 96, 72); outline: rgb(38, 53, 33) solid 4px; flex-shrink: 0;}
.history-item:first-of-type .history-node{background: var(--green);}
.history-item strong{font-size: 12px; font-weight: 450;}
.history-item p{color: rgb(153, 170, 143); font-size: 12px; margin-top: 3px;}
.current-badge, .revision-number{margin-left: auto; font: 12px var(--mono); color: var(--green);}
.current-badge{padding: 4px 7px; background: rgba(180, 234, 117, 0.047); border: 1px solid rgba(180, 234, 117, 0.165); border-radius: 3px;}
.history-footnote{display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(167, 179, 154); margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px;}
.history-footnote .icon{width: 15px;}
.feature-grid{display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 54px; column-gap: 48px;}
.feature{border-top: 1px solid var(--line); padding-top: 26px; padding-bottom: 30px;}
.feature-icon{color: var(--green); width: 22px; height: 22px; margin-bottom: 16px;}
.feature h3{font-size: 16px; letter-spacing: -0.025em; font-weight: 500; margin-bottom: 11px;}
.feature p{font-size: 12px; color: var(--muted); line-height: 1.85; max-width: 330px;}
.feature-detail{display: block; margin-top: 19px; color: rgb(182, 194, 171); font-size: 12px;}
.ai-section{background: rgb(17, 24, 16); border-block: 1px solid rgba(44, 57, 39, 0.17);}
.ai-section .section{padding-block: 90px;}
.protocol-tag{display: flex; align-items: center; gap: 9px; color: rgb(191, 210, 172); font: 12px var(--mono); letter-spacing: 0.1em;}
.ai-layout{display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center;}
.ai-copy > p{max-width: 410px; color: rgb(169, 183, 161); font-size: 13px; line-height: 1.85; margin-top: 23px;}
.integrations{display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0px;}
.integrations > span{display: flex; align-items: center; gap: 9px; border: 1px solid rgb(59, 73, 51); padding: 8px 11px; font-size: 12px; border-radius: 4px;}
.integrations b{font-size: 21px; line-height: 1; font-weight: 400; color: rgb(217, 233, 200);}
.integrations .codex-mark{font: 17px var(--mono);}
.integrations .mcp-integration{font-size: 12px; border-color: transparent; color: rgb(170, 189, 157); padding-inline: 4px;}
.connection-benefits{display: grid; gap: 12px; margin-top: 25px;}
.connection-benefits > div{display: flex; gap: 10px; font-size: 12px; color: rgb(194, 206, 185);}
.connection-benefits .icon{color: var(--green); width: 15px; height: 18px;}
.ai-copy > .text-link{margin-top: 28px; color: var(--green);}
.conversation{background: rgb(10, 15, 10); border: 1px solid rgb(64, 84, 53); border-radius: 8px; overflow: hidden; box-shadow: rgba(6, 10, 8, 0.25) 0px 28px 60px; transform: rotate(-1deg);}
.conversation-top{display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgb(44, 56, 38); padding: 17px 21px; font: 12px var(--mono); color: rgb(187, 203, 174); letter-spacing: 0.04em;}
.conversation-top > span:first-child{display: flex; align-items: center; gap: 8px;}
.conversation-top .icon{width: 15px; height: 15px; color: var(--green);}
.example-label{font: 12px var(--mono); color: rgb(154, 173, 138); letter-spacing: 0.04em;}
.prompt{display: flex; gap: 13px; margin: 26px 22px;}
.avatar{width: 25px; height: 25px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.human-avatar{background: rgb(44, 56, 39); color: rgb(206, 221, 193); font-size: 12px; border: 1px solid rgb(72, 91, 61);}
.prompt > p{font-size: 12px; color: rgb(209, 219, 201); background: rgb(27, 37, 25); border: 1px solid rgb(49, 64, 43); border-radius: 0px 7px 7px; padding: 13px 15px; line-height: 1.85;}
.assistant-message{display: flex; gap: 13px; margin: 0px 22px 23px;}
.ai-avatar{background: var(--green); color: rgb(34, 55, 25);}
.ai-avatar .icon{width: 15px;}
.assistant-message > div{flex: 1 1 0%; min-width: 0px;}
.assistant-label{font-size: 12px; font-weight: 500; color: rgb(203, 226, 181);}
.assistant-message p{font-size: 12px; color: rgb(170, 188, 160); line-height: 1.8; margin: 6px 0px 16px;}
.tool-action{display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(181, 197, 169); padding-block: 8px; border-bottom: 1px solid rgb(32, 45, 29);}
.tool-action .icon{width: 13px; height: 13px; color: var(--green);}
.tool-action code{margin-left: auto; font-size: 12px; color: rgb(140, 158, 127);}
.result-card{display: flex; gap: 10px; align-items: center; border: 1px solid rgb(78, 102, 60); border-radius: 5px; padding: 13px 11px; margin-top: 19px; background: rgb(23, 34, 18);}
.result-icon{width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgb(83, 109, 65); border-radius: 4px; color: var(--green);}
.result-icon .icon{width: 18px;}
.result-card strong{display: block; font-size: 12px; font-weight: 450;}
.result-card small{display: block; font-size: 12px; color: rgb(169, 190, 151); margin-top: 2px;}
.result-card > .icon{margin-left: auto; width: 15px; color: var(--green);}
.conversation-bottom{display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid rgb(44, 56, 38); padding: 13px 17px; font-size: 12px; color: rgb(153, 173, 138);}
.conversation-bottom .icon{width: 13px; height: 13px;}
.publish-grid{display: grid; grid-template-columns: 1.12fr 1fr; gap: 65px; align-items: center;}
.domain-card{padding: 31px; background: rgb(19, 24, 19); border: 1px solid rgb(54, 66, 47); border-radius: 7px; overflow: hidden;}
.card-label{display: flex; align-items: center; gap: 9px; font: 12px var(--mono); color: rgb(193, 207, 181); letter-spacing: 0.06em;}
.card-label .icon{width: 16px; height: 16px; color: var(--green);}
.domain-visual{display: flex; align-items: center; margin-top: 53px; gap: 3px; white-space: nowrap; font-size: clamp(20px, 2.05vw, 30px); letter-spacing: -0.045em;}
.domain-prefix{color: rgb(130, 147, 114);}
.domain-address{color: rgb(216, 239, 196);}
.domain-cursor{margin-left: 5px; background: var(--green); width: 2px; height: 30px; animation: 1.2s step-end 0s infinite normal none running blink;}
.domain-status{display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 12px var(--mono); letter-spacing: 0.06em; color: rgb(182, 200, 164);}
.domain-status > .example-label{margin-left: auto;}
.domain-status .status-dot{width: 4px; height: 4px;}
.domain-card h3{font-size: 19px; font-weight: 480; letter-spacing: -0.035em; margin-top: 45px;}
.domain-card > p{font-size: 12px; color: var(--muted); line-height: 1.85; margin-top: 13px; overflow-wrap: anywhere;}
.domain-card strong{font-weight: 450; color: rgb(208, 217, 198);}
.domain-steps{display: flex; justify-content: space-between; gap: 10px; margin-top: 29px; padding-top: 19px; border-top: 1px solid rgb(54, 66, 47); color: rgb(189, 208, 171); font: 12px var(--mono);}
.publish-features{display: grid; gap: 29px;}
.publish-features > article{display: flex; gap: 20px;}
.small-number{color: rgb(166, 182, 145); font: 12px var(--mono); padding-top: 6px;}
.publish-features h3{font-weight: 480; font-size: 17px; letter-spacing: -0.035em;}
.publish-features p{color: var(--muted); font-size: 12px; line-height: 1.85; margin-top: 10px;}
.security-strip{display: flex; align-items: center; gap: 22px; margin-top: 38px; padding: 24px 0px; border-block: 1px solid var(--line);}
.security-icon{color: var(--green); width: 45px; height: 45px; border: 1px solid rgb(51, 67, 43); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;}
.security-icon .icon{width: 22px; height: 22px;}
.security-strip h3{font-size: 13px; font-weight: 500;}
.security-strip p{font-size: 12px; color: var(--muted); max-width: 500px; line-height: 1.8; margin-top: 4px;}
.security-tags{display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; margin-left: auto; max-width: 270px; flex-shrink: 0;}
.security-tags > span{font: 12px var(--mono); color: rgb(172, 185, 159); border: 1px solid rgb(49, 60, 44); border-radius: 3px; padding: 5px 7px;}
.workflow{padding-top: 0px;}
.workflow h2{font-size: 38px;}
.workflow-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 45px;}
.workflow-number{display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 17px; font: 12px var(--mono); color: var(--green);}
.workflow-number > span{color: rgb(97, 113, 87); font-size: 18px;}
.workflow-grid h3{font-size: 18px; letter-spacing: -0.03em; font-weight: 480; margin-top: 25px;}
.workflow-grid p{font-size: 12px; color: var(--muted); margin-top: 11px; line-height: 1.85; max-width: 290px;}
.faq-section{border-top: 1px solid var(--line); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; padding-top: 80px;}
.faq-intro h2{margin-top: 25px;}
.faq-list details{border-bottom: 1px solid var(--line);}
.faq-list details:first-child{border-top: 1px solid var(--line);}
.faq-list summary{cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0px; font-size: 13px; line-height: 1.6;}
.faq-list summary::-webkit-details-marker{display: none;}
.faq-list summary > span{font-family: var(--mono); font-size: 18px; color: rgb(169, 191, 152); transition: transform 0.2s;}
.faq-list details[open] summary > span{transform: rotate(45deg);}
.faq-list details[open] summary{color: var(--green);}
.faq-list details > p{color: var(--muted); font-size: 12px; line-height: 1.9; padding: 0px 25px 22px 0px;}
.closing{text-align: center; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgb(53, 72, 43); background: rgb(17, 26, 15); border-radius: 8px; padding: 68px 24px 58px;}
.closing-grid{position: absolute; inset: 0px; z-index: -1; background-image: linear-gradient(rgba(191, 250, 136, 0.063) 1px, transparent 1px), linear-gradient(90deg, rgba(191, 250, 136, 0.063) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 40%, transparent 60%, rgb(0, 0, 0));}
.closing > .eyebrow{justify-content: center; font-size: 12px; color: rgb(193, 213, 175);}
.closing h2{font-size: clamp(41px, 4.8vw, 66px); margin-top: 22px; letter-spacing: -0.06em; line-height: 1.05;}
.closing h2 span{color: var(--green);}
.closing > p{font-size: 13px; color: rgb(170, 191, 153); margin-top: 20px;}
.closing > .button{margin-top: 27px;}
.closing-login{display: block; width: fit-content; margin: 20px auto 0px; font-size: 12px; color: rgb(166, 183, 151); min-height: 30px;}
.closing-login > span{color: rgb(208, 227, 189);}
.closing-login:hover > span{color: var(--green);}
.closing-coordinate{position: absolute; bottom: 18px; right: 20px; font: 12px var(--mono); color: rgb(137, 158, 119); letter-spacing: 0.1em;}
@keyframes blink { 
  50% { opacity: 0; }
}
@media (min-width: 1550px) {.hero{padding-top: 100px;}
h1{font-size: 85px;}
.hero-art{height: 520px;}
.hero-baseline{margin-top: 80px;}
.hero-description{font-size: 17px;}}
@media (max-width: 1100px) {.wrap{width: calc(100% - 72px);}
.nav-links{gap: 20px;}
.nav{gap: 20px;}
.brand{font-size: 23px;}
.hero{padding-top: 65px;}
.hero-art{height: 455px;}
.hero-copy > .eyebrow{font-size: 12px;}
.hero-actions{gap: 19px;}
.hero-actions .button{gap: 16px; padding-inline: 18px;}
.hero-actions .text-link{font-size: 12px;}
.section-heading{gap: 40px;}
.section-heading > p{max-width: 280px;}
.ai-layout{gap: 45px;}
.feature-grid{column-gap: 28px;}
.workspace-body{grid-template-columns: 152px 1fr;}
.sample-site{padding-inline: 23px;}
.sample-nav-caption{font-size: 12px;}
.publish-grid{gap: 40px;}
.domain-card{padding: 25px;}
.security-tags{max-width: 200px;}
.workflow-grid{gap: 30px;}
.faq-section{gap: 40px;}}
@media (max-width: 850px) {.wrap{width: calc(100% - 48px);}
.section{padding-block: 80px;}
.nav{height: 74px;}
.nav-links{gap: 16px; font-size: 12px;}
.nav-cta{display: none;}
.hero{padding-top: 55px; grid-template-columns: 1.16fr 1fr; gap: 0px;}
h1{font-size: clamp(40px, 6.1vw, 55px);}
.hero-description{font-size: 13px; max-width: 330px;}
.hero-copy > .eyebrow{font-size: 12px;}
.hero-art{height: 395px; margin-top: -13px; margin-right: -12px;}
.hero-actions{gap: 15px; flex-wrap: wrap;}
.hero-actions .button{font-size: 12px; min-height: 46px;}
.hero-note{font-size: 12px; gap: 10px;}
.hero-note span + span::before{margin-right: 10px;}
.art-label{font-size: 12px; bottom: 65px; padding: 8px; gap: 5px;}
.art-label .status-dot{width: 4px; height: 4px;}
.hero-baseline{margin-top: 48px; font-size: 12px;}
.section-aside{font-size: 12px;}
.section-heading{gap: 30px;}
.section-heading > p{max-width: 235px; font-size: 12px;}
h2{font-size: 33px;}
.workspace-body{grid-template-columns: 127px 1fr;}
.workspace-bar{padding-inline: 15px; height: 48px;}
.workspace-brand{font-size: 12px; gap: 9px;}
.demo-badge{font-size: 12px;}
.workspace-sidebar{padding-inline: 6px;}
.sidebar-label{font-size: 12px;}
.page-button{font-size: 12px; gap: 6px;}
.page-button .icon{width: 12px;}
.sidebar-bottom{font-size: 12px; padding-inline: 7px; gap: 5px;}
.workspace-toolbar{padding-inline: 12px;}
.editor-tabs{gap: 13px;}
.editor-tabs button{font-size: 12px;}
.editor-tabs .icon{width: 11px;}
.draft-state{font-size: 12px;}
.sample-site{padding-inline: 18px; min-height: 350px;}
.sample-content{min-height: 250px;}
.preview-panel{padding: 12px;}
.sample-copy h3{font-size: 32px;}
.sample-copy > p{font-size: 12px; max-width: 170px;}
.sample-nav-caption{display: none;}
.sample-kicker{font-size: 12px;}
.sample-cta{font-size: 12px;}
.sample-sculpture{height: 205px;}
.sculpture-inner{width: 117px; height: 126px; left: 48%;}
.sculpture-inner i{border-width: 11px;}
.workspace-body{min-height: 425px;}
.code-panel, .history-panel{min-height: 375px; padding: 24px;}
.code-panel pre{font-size: 12px;}
.history-heading{font-size: 18px;}
.history-item strong{font-size: 12px;}
.history-description, .history-item p{font-size: 12px;}
.feature h3{font-size: 14px;}
.feature p{font-size: 12px;}
.feature-detail{font-size: 12px;}
.feature-grid{gap: 0px 24px;}
.ai-layout{gap: 30px;}
.ai-copy > p{font-size: 12px;}
.integrations{gap: 6px;}
.integrations > span{font-size: 12px; gap: 5px; padding: 8px;}
.integrations .mcp-integration{font-size: 12px;}
.connection-benefits > div{font-size: 12px;}
.conversation-top{padding-inline: 15px; font-size: 12px;}
.conversation-top .example-label{font-size: 12px;}
.prompt{margin: 20px 14px; gap: 8px;}
.prompt p{font-size: 12px; padding: 11px;}
.assistant-message{margin-inline: 14px; gap: 8px;}
.assistant-label{font-size: 12px;}
.assistant-message p{font-size: 12px;}
.tool-action{font-size: 12px;}
.tool-action code{font-size: 12px;}
.conversation-bottom{font-size: 12px;}
.publish-grid{gap: 30px;}
.domain-card{padding: 21px;}
.domain-visual{font-size: 20px; letter-spacing: -0.06em; margin-top: 40px;}
.domain-cursor{height: 23px; width: 1px;}
.domain-card h3{font-size: 17px; margin-top: 35px;}
.domain-card > p{font-size: 12px;}
.card-label{font-size: 12px;}
.domain-status{font-size: 12px;}
.domain-status .example-label{font-size: 12px;}
.domain-steps{font-size: 12px;}
.publish-features h3{font-size: 15px;}
.publish-features p{font-size: 12px;}
.publish-features > article{gap: 13px;}
.publish-features{gap: 24px;}
.security-strip{gap: 15px; flex-wrap: wrap;}
.security-strip > div:not(.security-tags){flex: 1 1 0%;}
.security-tags{max-width: none; width: 100%; justify-content: start; padding-left: 60px;}
.workflow{padding-top: 0px;}
.workflow h2{font-size: 33px;}
.workflow-grid h3{font-size: 16px;}
.workflow-grid p{font-size: 12px;}
.faq-section{grid-template-columns: 0.75fr 1.25fr; gap: 32px;}
.faq-list summary{font-size: 12px;}
.faq-list details > p{font-size: 12px;}}
@media (max-width: 620px) {html{scroll-padding-top: 85px;}
.wrap{width: calc(100% - 40px);}
.section{padding-block: 63px;}
.nav{height: 72px;}
.brand{font-size: 25px; gap: 12px;}
.nav-cta{display: none;}
.menu-toggle{flex-direction: column; justify-content: center; gap: 6px; width: 42px; height: 42px; padding: 10px; background: transparent; border: 1px solid rgb(53, 65, 46); border-radius: 4px; display: flex !important;}
.menu-toggle > span{height: 1px; width: 20px; background: rgb(218, 228, 206); transition: transform 0.2s;}
.menu-toggle[aria-expanded="true"] > span:first-child{transform: translateY(3.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] > span:last-child{transform: translateY(-3.5px) rotate(-45deg);}
.nav-links{display: none; position: absolute; top: 72px; left: 0px; right: 0px; flex-direction: column; align-items: stretch; padding: 16px 20px 24px; gap: 0px; background: rgb(13, 19, 12); border-bottom: 1px solid rgb(65, 83, 51); box-shadow: rgba(0, 0, 0, 0.467) 0px 20px 30px;}
.nav-links.open{display: flex;}
.nav-links > a{font-size: 14px; border-bottom: 1px solid rgb(39, 51, 33); padding: 13px 0px; min-height: 46px;}
.nav-links > .mobile-access{color: var(--green); border-bottom: 0px; display: block !important;}
.hero{grid-template-columns: 1fr; padding-top: 42px;}
.hero-copy > .eyebrow{font-size: 12px; letter-spacing: 0.06em; gap: 7px;}
h1{font-size: clamp(44px, 10.9vw, 66px); line-height: 1.07; margin-top: 26px; letter-spacing: -0.062em;}
.hero-description{font-size: 14px; max-width: 350px; margin-top: 24px; line-height: 1.8;}
.hero-actions{margin-top: 27px; gap: 19px;}
.hero-actions .button{font-size: 12px; min-height: 49px; padding-inline: 18px; gap: 18px;}
.hero-actions .text-link{font-size: 12px; gap: 6px;}
.hero-note{font-size: 12px; margin-top: 19px; gap: 12px;}
.hero-note span + span::before{margin-right: 12px;}
.hero-art{height: 340px; width: 100%; margin: 28px auto -4px; max-width: 410px;}
.art-label{font-size: 12px; bottom: 29px; gap: 7px; padding: 8px 10px;}
.hero-baseline{margin-top: 25px; gap: 15px; align-items: center; padding-block: 19px; font-size: 12px; letter-spacing: 0.01em;}
.hero-baseline > span{max-width: 150px; line-height: 1.8;}
.hero-baseline a{gap: 12px; line-height: 1.8;}
.section-top{margin-bottom: 25px;}
.section-aside{display: none;}
.eyebrow{font-size: 12px; letter-spacing: 0.1em;}
.section-heading{display: block; margin-bottom: 29px;}
h2{font-size: clamp(29px, 7.45vw, 41px); letter-spacing: -0.05em;}
.section-heading > p{font-size: 12px; max-width: 330px; margin-top: 19px;}
.platform{padding-top: 50px;}
.workspace{border-radius: 6px;}
.workspace-bar{height: 48px; padding-inline: 12px;}
.workspace-brand{font-size: 12px; gap: 8px;}
.mini-mark{font-size: 20px;}
.demo-badge{font-size: 12px; padding: 4px; letter-spacing: 0.03em;}
.workspace-body{display: block; min-height: 0px;}
.workspace-sidebar{display: block; padding: 8px 9px; border-right: 0px; border-bottom: 1px solid var(--line);}
.sidebar-label, .sidebar-bottom{display: none;}
.page-buttons{display: flex; gap: 5px;}
.page-button{font-size: 12px; padding: 7px 9px; min-height: 34px; gap: 6px;}
.page-button > span{display: none;}
.workspace-toolbar{padding-inline: 12px; height: 47px;}
.editor-tabs{gap: 20px; width: 100%; justify-content: space-between;}
.editor-tabs button{font-size: 12px; gap: 5px;}
.editor-tabs .icon{width: 12px;}
.draft-state{display: none;}
.preview-panel{padding: 9px;}
.sample-site{padding: 18px 16px 13px; min-height: 425px;}
.sample-nav{font-size: 17px;}
.sample-content{grid-template-columns: 1fr 1fr; min-height: 332px; gap: 0px; align-items: start; position: relative;}
.sample-copy{grid-column: 1 / -1; max-width: 225px; padding-top: 24px; padding-bottom: 0px;}
.sample-copy h3{font-size: 38px; line-height: 1.02; max-width: 220px; margin-top: 11px;}
.sample-kicker{font-size: 12px;}
.sample-copy > p{font-size: 12px; max-width: 170px; margin-top: 14px;}
.sample-cta{font-size: 12px; min-height: 33px; margin-top: 15px; gap: 16px;}
.sample-sculpture{position: absolute; right: -18px; bottom: 4px; width: 135px; height: 153px; opacity: 0.92;}
.sculpture-inner{width: 95px; height: 110px; left: 49%; top: 38%;}
.sculpture-inner i{border-width: 9px; transform: translateY(calc(var(--n)*4.5px)) scaleX(calc(1 - var(--n)*.035));}
.sample-sculpture > span{font-size: 12px; bottom: -5px; white-space: nowrap;}
.sample-footer{font-size: 12px; padding-top: 13px; gap: 7px;}
.workspace-foot{padding: 11px 12px; font-size: 12px;}
.workspace-foot > span:last-child{display: none;}
.code-panel, .history-panel{min-height: 443px; padding: 22px 18px;}
.code-panel pre{font-size: 12px; line-height: 2.1; margin-top: 29px;}
.code-filename{font-size: 12px;}
.code-filename span:last-child{font-size: 12px;}
.code-note{font-size: 12px;}
.history-heading{font-size: 22px;}
.history-description{font-size: 12px; line-height: 1.8; margin-top: 9px; margin-bottom: 21px;}
.history-item{gap: 12px; padding-block: 18px;}
.history-item strong{font-size: 12px;}
.history-item p{font-size: 12px;}
.current-badge{font-size: 12px;}
.history-footnote{font-size: 12px; align-items: start; margin-top: 22px;}
.feature-grid{grid-template-columns: 1fr 1fr; gap: 0px 22px; margin-top: 35px;}
.feature{padding-top: 23px; padding-bottom: 26px;}
.feature h3{font-size: 14px; line-height: 1.4; text-wrap: pretty;}
.feature p{font-size: 12px; line-height: 1.8;}
.feature-detail{font-size: 12px; line-height: 1.7; margin-top: 13px;}
.feature-icon{margin-bottom: 13px; width: 21px;}
.ai-section .section{padding-block: 60px;}
.protocol-tag{font-size: 12px; gap: 6px;}
.ai-layout{grid-template-columns: 1fr; gap: 32px;}
.ai-copy > p{font-size: 12px; max-width: none; margin-top: 18px;}
.integrations{margin-block: 22px; gap: 7px;}
.integrations > span{font-size: 12px; padding: 9px 10px; gap: 7px;}
.integrations .mcp-integration{font-size: 12px;}
.connection-benefits > div{font-size: 12px; gap: 9px;}
.ai-copy > .text-link{margin-top: 19px; font-size: 12px;}
.conversation{transform: none;}
.conversation-top{font-size: 12px; padding: 15px 17px;}
.conversation-top .example-label{font-size: 12px;}
.prompt{margin: 23px 18px; gap: 12px;}
.prompt > p{font-size: 12px; padding: 13px;}
.assistant-message{margin: 0px 18px 23px; gap: 12px;}
.assistant-label{font-size: 12px;}
.assistant-message p{font-size: 12px;}
.tool-action{font-size: 12px;}
.tool-action code{font-size: 12px;}
.result-card{margin-top: 18px; padding: 13px 12px;}
.result-card strong{font-size: 12px;}
.result-card small{font-size: 12px;}
.conversation-bottom{font-size: 12px; padding: 13px 8px;}
.publish-grid{grid-template-columns: 1fr; gap: 32px;}
.domain-card{padding: 24px;}
.card-label{font-size: 12px;}
.domain-visual{font-size: clamp(22px, 6.3vw, 32px); margin-top: 45px;}
.domain-status{font-size: 12px; margin-top: 11px;}
.domain-card h3{font-size: 19px; margin-top: 35px;}
.domain-card > p{font-size: 12px; margin-top: 15px;}
.domain-steps{font-size: 12px; margin-top: 26px;}
.publish-features{gap: 27px;}
.publish-features > article{gap: 18px;}
.publish-features h3{font-size: 17px;}
.publish-features p{font-size: 12px;}
.security-strip{margin-top: 33px; gap: 16px; padding-block: 22px; align-items: start;}
.security-icon{width: 38px; height: 38px;}
.security-icon .icon{width: 20px;}
.security-strip h3{font-size: 13px;}
.security-strip p{font-size: 12px; margin-top: 7px;}
.security-tags{padding-left: 54px; gap: 6px;}
.security-tags > span{font-size: 12px; padding: 5px 6px;}
.workflow{padding-top: 0px;}
.workflow h2{font-size: 31px;}
.workflow-grid{grid-template-columns: 1fr; gap: 26px; margin-top: 31px;}
.workflow-grid article{display: grid; grid-template-columns: 35px 1fr; column-gap: 15px; border-top: 1px solid var(--line); padding-top: 21px;}
.workflow-number{grid-row: 1 / 3; border: 0px; padding-top: 4px; display: block; font-size: 12px;}
.workflow-number > span{display: none;}
.workflow-grid h3{margin: 0px; font-size: 17px;}
.workflow-grid p{font-size: 12px; margin-top: 9px; max-width: none;}
.faq-section{grid-template-columns: 1fr; gap: 29px; padding-top: 49px;}
.faq-intro h2{margin-top: 17px; font-size: 35px;}
.faq-intro h2 br{display: none;}
.faq-intro h2 br::after{content: " ";}
.faq-list summary{font-size: 12px; padding: 19px 0px;}
.faq-list details > p{font-size: 12px; padding-right: 10px;}
.closing{padding: 48px 19px;}
.closing > .eyebrow{font-size: 12px;}
.closing h2{font-size: clamp(36px, 8.8vw, 47px); margin-top: 22px;}
.closing > p{font-size: 12px; max-width: 230px; margin: 20px auto 0px;}
.closing > .button{margin-top: 23px; font-size: 12px; min-height: 49px;}
.closing-login{font-size: 12px; margin-top: 17px;}
.closing-coordinate{font-size: 12px; right: 14px; bottom: 13px;}
.closing-grid{background-size: 37px 37px;}}
@media (max-width: 359px) {.wrap{width: calc(100% - 32px);}
.hero-actions{gap: 10px;}
.hero-actions .button{font-size: 12px; padding-inline: 13px; gap: 12px;}
.hero-actions .text-link{font-size: 12px;}
.hero-copy > .eyebrow{font-size: 12px;}
.feature-grid{gap: 0px 16px;}
.feature h3{font-size: 13px;}
.sample-sculpture{width: 105px; right: -23px;}
.demo-badge{font-size: 12px;}
.workspace-brand{font-size: 12px;}
.domain-card{padding: 20px;}
.domain-visual{font-size: 21px;}
.integrations{gap: 4px;}
.integrations > span{font-size: 12px; padding: 8px;}}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior: auto;}
*, ::before, ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}}
.hero-art{perspective: 1000px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 3%, rgb(0, 0, 0) 97%, transparent); background-size: 25px 25px; height: 525px; margin-top: -18px;}
.hero-art::before{inset: 10% -5% 8%; background: radial-gradient(at 54% 53%, rgba(158, 232, 96, 0.055), transparent 67%);}
.art-label{bottom: 35px; background: rgba(13, 22, 12, 0.91); border-color: rgb(80, 106, 59); font-size: 9px; padding: 10px 15px; z-index: 12;}
@keyframes route-flow { 
  100% { stroke-dashoffset: -1120; }
}
@keyframes float-home { 
  0%, 100% { transform: rotateX(13deg) rotateY(-24deg) rotateZ(-9deg) translateZ(35px) translateY(0px); }
  50% { transform: rotateX(10deg) rotateY(-19deg) rotateZ(-7deg) translateZ(45px) translateY(-9px); }
}
@keyframes float-projects { 
  0%, 100% { transform: rotateX(10deg) rotateY(-24deg) rotateZ(8deg) translateZ(-45px) translateY(0px); }
  50% { transform: rotateX(14deg) rotateY(-21deg) rotateZ(6deg) translateZ(-35px) translateY(7px); }
}
@keyframes float-contact { 
  0%, 100% { transform: rotateX(11deg) rotateY(-19deg) rotateZ(10deg) translateZ(55px) translateY(0px); }
  50% { transform: rotateX(14deg) rotateY(-24deg) rotateZ(8deg) translateZ(65px) translateY(-7px); }
}
@keyframes assemble-slab { 
  0%, 100% { transform: rotateX(38deg) rotateY(-17deg) rotateZ(-30deg) translateZ(calc(var(--slab)*9px)); }
  50% { transform: rotateX(44deg) rotateY(-12deg) rotateZ(-24deg) translateZ(calc(var(--slab)*13px)); }
}
@keyframes float-code { 
  0%, 100% { transform: rotateX(12deg) rotateY(-20deg) rotateZ(-13deg) translateY(0px); }
  50% { transform: rotateX(18deg) rotateY(-16deg) rotateZ(-9deg) translateY(8px); }
}
@keyframes float-type { 
  0%, 100% { transform: rotateX(14deg) rotateY(-20deg) rotateZ(-8deg) translateZ(55px) translateY(0px); }
  50% { transform: rotateX(10deg) rotateY(-15deg) rotateZ(-12deg) translateZ(65px) translateY(-8px); }
}
@keyframes cursor-drift { 
  0%, 100% { transform: translateZ(75px) translate(0px, 0px); }
  40%, 60% { transform: translateZ(75px) translate(-16px, -14px); }
}
@media (min-width: 1550px) {.hero-art{height: 555px;}}
@media (max-width: 1100px) {.hero-art{height: 490px;}}
@media (max-width: 850px) {.hero-art{height: 420px; margin-top: -6px;}
.art-label{font-size: 7px; padding: 9px 11px; bottom: 34px; gap: 7px;}}
@media (max-width: 620px) {.hero-art{height: 410px; margin: 30px auto 0px; width: 100%; max-width: 410px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 2%, rgb(0, 0, 0) 98%, transparent);}
.art-label{bottom: 31px; font-size: 8px; padding: 8px 12px;}
.hero-art .art-label .status-dot{width: 4px; height: 4px;}}
@media (max-width: 359px) {.hero-art{height: 365px;}
.art-label{font-size: 7px;}}
.brand{gap: 11px; font-weight: 560; letter-spacing: -1.1px;}
.brand-light{font-weight: 560; color: var(--green);}
.brand-period{color: rgb(139, 168, 120);}
.brand-icon{width: 34px; height: 37px; perspective: 180px;}
.brand-icon::before, .brand-icon::after{display: none;}
.brand-symbol{width: 34px; height: 37px; overflow: visible;}
.mark-back{fill: rgb(18, 32, 15); stroke: rgb(165, 212, 118); stroke-width: 1.1; transform-origin: 24px 31px; transition: transform 0.5s;}
.mark-middle{fill: rgb(54, 83, 39); stroke: rgb(185, 229, 143); stroke-width: 1.1; transform-origin: 22px 33px; transition: transform 0.5s;}
.mark-front{fill: rgb(196, 247, 143); stroke: rgb(196, 247, 143); stroke-width: 1;}
.mark-bar{stroke: rgb(75, 109, 49); stroke-width: 0.6;}
.mark-dot{fill: rgb(62, 99, 37); stroke: none;}
.mark-letter{fill: rgb(40, 71, 26); stroke: none;}
.brand:hover .mark-back, .brand:focus-visible .mark-back{transform: translate(3px, -2px) rotate(12deg);}
.brand:hover .mark-middle, .brand:focus-visible .mark-middle{transform: translate(1px, -1px) rotate(5deg);}
.hero-wordmark{display: flex; align-items: baseline; white-space: nowrap; font-size: clamp(51px, 5.9vw, 83px); letter-spacing: -0.069em; font-weight: 550; line-height: 1.1; margin-top: 30px;}
.hero-wordmark > span:first-child{color: rgb(240, 241, 236);}
.hero-wordmark > span:nth-child(2){color: var(--green);}
.title-cursor{display: inline-block; width: 4px; height: 0.7em; background: var(--green); margin-left: 9px; transform: translateY(0.025em); animation: 2.6s step-end 0s infinite normal none running title-cursor;}
.hero-statement{font-size: clamp(28px, 3.2vw, 45px); line-height: 1.15; letter-spacing: -0.05em; margin-top: 19px; font-weight: 420; color: rgb(225, 231, 219);}
.hero-description{margin-top: 24px; max-width: 410px;}
.hero-note{margin-top: 22px;}
.art-controls{position: absolute; bottom: 33px; left: 0px; right: 0px; display: flex; align-items: center; justify-content: center; gap: 14px; z-index: 15;}
.art-remix{display: flex; align-items: center; gap: 8px; min-height: 39px; border: 1px solid rgb(82, 107, 61); border-radius: 4px; background: rgb(23, 35, 18); color: rgb(214, 237, 193); padding: 8px 11px; font-size: 9px; transition: background 0.2s, transform 0.2s;}
.art-remix > .icon{width: 13px; height: 13px; color: var(--green);}
.art-remix > span{font-size: 15px; margin-left: 3px;}
.art-remix:hover{background: rgb(37, 56, 28); transform: translateY(-2px);}
.art-remix:active{transform: translateY(0px);}
@keyframes title-cursor { 
  0%, 65%, 100% { opacity: 1; }
  66%, 99% { opacity: 0.15; }
}
@media (min-width: 1550px) {.hero-wordmark{font-size: 86px;}
.hero-statement{font-size: 46px;}}
@media (max-width: 1100px) {.hero-wordmark{font-size: clamp(49px, 5.8vw, 67px);}
.hero-statement{font-size: 36px;}
.art-controls{gap: 9px;}
.art-remix{font-size: 8px; min-height: 36px; padding-inline: 9px;}}
@media (max-width: 850px) {.hero-wordmark{font-size: clamp(39px, 6.15vw, 53px);}
.hero-statement{font-size: 29px; margin-top: 16px;}
.hero-description{font-size: 13px;}
.title-cursor{width: 3px; margin-left: 6px;}
.art-controls{bottom: 29px; gap: 8px;}
.art-remix{font-size: 7px; min-height: 32px; gap: 5px; padding-inline: 8px;}
.art-remix > .icon{width: 10px; height: 10px;}
.art-remix > span{font-size: 12px; margin-left: 0px;}}
@media (max-width: 620px) {.brand{font-size: 25px; gap: 9px;}
.brand-icon, .brand-symbol{width: 31px; height: 34px;}
.hero-wordmark{font-size: clamp(41px, 11.2vw, 62px); margin-top: 25px; letter-spacing: -0.072em;}
.title-cursor{width: 2px; margin-left: 5px;}
.hero-statement{font-size: clamp(27px, 7.4vw, 38px); margin-top: 17px; line-height: 1.14; letter-spacing: -0.04em;}
.hero-description{font-size: 14px; margin-top: 20px;}
.hero-art{margin-top: 28px; height: 420px;}
.art-controls{bottom: 29px; gap: 11px;}
.art-remix{font-size: 9px; min-height: 38px; padding: 7px 10px; gap: 7px;}
.art-remix > .icon{width: 12px; height: 12px;}
.art-remix > span{font-size: 14px; margin-left: 2px;}}
@media (max-width: 359px) {.hero-wordmark{font-size: 38px;}
.hero-statement{font-size: 26px;}
.hero-art{height: 375px;}
.art-remix{font-size: 8px; padding-inline: 8px; gap: 5px;}
.art-controls{gap: 8px;}}
@media (prefers-reduced-motion: reduce) {.title-cursor{animation: auto ease 0s 1 normal none running none;}
.brand *{transition: none !important;}}
.art-controls{justify-content: flex-end; left: auto; right: 5%; bottom: 20px;}
@media (max-width: 1100px) {.art-controls{right: 4%; bottom: 19px;}}
@media (max-width: 850px) {.art-controls{right: 4%; bottom: 19px;}}
@media (max-width: 620px) {.art-controls{right: 4%; bottom: 18px; gap: 8px;}
.art-remix{font-size: 8px; min-height: 36px; padding-inline: 8px; gap: 6px;}
.art-remix > .icon{width: 11px; height: 11px;}
.art-remix > span{font-size: 13px;}}
@media (max-width: 359px) {.art-remix{font-size: 7px; gap: 5px; padding-inline: 7px;}
.art-controls{right: 4%; gap: 6px;}}
.art-controls{left: 7%; right: 4%; bottom: 10px; justify-content: space-between; gap: 12px;}
.art-remix{font-size: 10px; min-height: 44px; padding: 8px 12px; flex-shrink: 0;}
.art-remix > .icon{width: 13px; height: 13px;}
.hero-art:has(.scene-arriving) .art-remix > span{transform: rotate(180deg); transition: transform 0.6s;}
@keyframes concept-float { 
  0%, 100% { transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) translateZ(var(--tz)); }
  50% { transform: translateY(-1.3cqw) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) translateZ(var(--tz)); }
}
@keyframes scene-arrive { 
  0% { opacity: 0; transform: translateY(24px) scale(0.89) rotateY(-10deg); }
  100% { opacity: 1; transform: translateY(0px) scale(1) rotateY(0deg); }
}
@keyframes building-float { 
  0%, 100% { transform: translateZ(45px) translateY(0px) rotate(-4deg); }
  50% { transform: translateZ(45px) translateY(-1.4cqw) rotate(-1deg); }
}
@keyframes vinyl-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes wave-beat { 
  100% { transform: scaleY(0.3); }
}
@keyframes data-orbit { 
  100% { transform: rotateX(65deg) rotateZ(380deg); }
}
@keyframes steam-rise { 
  0% { opacity: 0; transform: translateY(1cqw) translateZ(4cqw); }
  35% { opacity: 0.65; }
  100% { opacity: 0; transform: translateY(-5cqw) translateZ(4cqw); }
}
@media (max-width: 1100px) {.art-remix{font-size: 9px;}}
@media (max-width: 850px) {.art-controls{left: 5%; right: 4%; gap: 7px;}
.art-remix{font-size: 8px; gap: 6px; min-height: 40px; padding-inline: 9px;}}
@media (max-width: 620px) {.hero-art{height: 430px;}
.art-controls{left: 6%; right: 4%; bottom: 10px;}
.art-remix{font-size: 9px; min-height: 44px; padding-inline: 10px;}}
@media (max-width: 359px) {.hero-art{height: 390px;}
.art-remix{font-size: 8px; padding-inline: 8px;}}
:root{--muted: #b6beb6; --reading: 1rem; --ui-text: .875rem; --caption: .75rem;}
body{font-size: var(--reading);}
.hero-description, .section-heading > p, .feature p, .ai-copy > p, .prompt > p, .assistant-message p, .domain-card > p, .publish-features p, .security-strip p, .workflow-grid p, .faq-list summary, .faq-list details > p, .closing > p{font-size: var(--reading); line-height: 1.75;}
.feature h3, .publish-features h3, .security-strip h3, .workflow-grid h3{font-size: 1.125rem; line-height: 1.4;}
.section-heading > p{max-width: 360px;}
.hero-description{max-width: 440px;}
.feature p{max-width: none;}
.section-heading{align-items: start;}
.nav-links, .nav-links > a, .button, .button-small, .hero-actions .button, .hero-actions .text-link, .closing > .button, .text-link, .ai-copy > .text-link, .hero-note, .section-aside, .feature-detail, .integrations > span, .integrations .mcp-integration, .connection-benefits > div, .closing-login{font-size: var(--ui-text);}
.button-small{min-height: 44px;}
.hero-actions{flex-wrap: wrap; gap: 16px 24px;}
.hero-note{flex-wrap: wrap; gap: 8px 15px;}
.hero-copy > .eyebrow, .eyebrow, .closing > .eyebrow{font-size: var(--caption); line-height: 1.6; letter-spacing: 0.075em;}
.hero-baseline{font-size: var(--caption); line-height: 1.7; flex-wrap: wrap; gap: 16px;}
.hero-baseline a{font-size: var(--ui-text); min-height: 44px; align-items: center;}
.hero-baseline > span{max-width: none;}
.section-top{flex-wrap: wrap; gap: 16px 24px;}
.protocol-tag{font-size: var(--ui-text); line-height: 1.5; color: rgb(218, 243, 197); letter-spacing: 0.04em;}
.integrations{gap: 10px;}
.integrations > span{padding: 10px 13px; gap: 9px;}
.integrations .mcp-integration{padding: 10px 13px; color: rgb(218, 243, 197); border-color: rgb(82, 104, 67); background: rgba(180, 239, 116, 0.063);}
.connection-benefits > div{line-height: 1.7; align-items: start;}
.connection-benefits .icon{margin-top: 3px; flex-shrink: 0;}
.ai-layout{gap: 64px;}
.ai-copy > p{max-width: 470px;}
.workspace-body{grid-template-columns: 190px minmax(0px, 1fr);}
.workspace-brand, .page-button, .editor-tabs button, .sidebar-bottom, .code-filename, .code-note, .history-description, .history-item strong, .history-item p, .history-footnote{font-size: var(--ui-text);}
.workspace-bar{height: auto; min-height: 64px; padding-block: 14px; gap: 12px; flex-wrap: wrap;}
.workspace-brand{flex-wrap: wrap; gap: 8px;}
.demo-badge, .sidebar-label, .draft-state, .workspace-foot, .code-filename span:last-child, .current-badge, .revision-number{font-size: var(--caption); line-height: 1.5;}
.demo-badge{letter-spacing: 0.04em;}
.sidebar-label > span, .page-button > span, .slash{color: rgb(170, 187, 159);}
.page-button{min-height: 44px;}
.workspace-toolbar{height: auto; min-height: 56px; flex-wrap: wrap;}
.editor-tabs{min-height: 56px; gap: 20px;}
.editor-tabs .icon, .page-button .icon{width: 16px; height: 16px;}
.editor-tabs button{min-height: 44px;}
.workspace-foot{flex-wrap: wrap;}
.sample-nav-caption, .sample-kicker, .sample-footer{font-size: var(--caption); line-height: 1.6; letter-spacing: 0.03em;}
.sample-nav{flex-wrap: wrap; gap: 12px;}
.sample-copy > p{font-size: var(--reading); line-height: 1.7; max-width: 320px;}
.sample-cta{font-size: var(--ui-text); min-height: 44px; padding: 10px 14px;}
.sample-cta > span{font-size: 16px;}
.sample-footer{flex-wrap: wrap; gap: 10px 20px; color: rgb(83, 91, 73);}
.sample-content{grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr); min-height: 330px;}
.sample-sculpture > span{display: none;}
.code-panel pre{font-size: var(--ui-text); line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere;}
.code-filename{flex-wrap: wrap;}
.history-item{align-items: start;}
.history-node{margin-top: 7px;}
.history-item > div{min-width: 0px;}
.history-item p{line-height: 1.7;}
.current-badge, .revision-number{flex-shrink: 0;}
.conversation-top, .conversation-top .example-label, .example-label, .tool-action code, .card-label, .domain-status, .domain-status .example-label, .domain-steps, .security-tags > span{font-size: var(--caption); line-height: 1.6;}
.conversation-top{flex-wrap: wrap;}
.prompt > p{min-width: 0px;}
.avatar{width: 30px; height: 30px;}
.human-avatar{font-size: var(--caption);}
.assistant-label, .tool-action, .result-card small, .conversation-bottom{font-size: var(--ui-text); line-height: 1.65;}
.tool-action{flex-wrap: wrap; column-gap: 8px;}
.tool-action code{color: rgb(178, 196, 165); overflow-wrap: anywhere;}
.result-card strong{font-size: var(--reading);}
.result-card > span:not(.result-icon){min-width: 0px;}
.conversation-bottom{align-items: start; justify-content: start; padding: 16px 22px;}
.conversation-bottom .icon{margin-top: 4px; flex-shrink: 0;}
.domain-status{flex-wrap: wrap;}
.domain-steps{flex-wrap: wrap; gap: 14px 20px;}
.security-tags{max-width: 250px;}
.security-tags > span{padding: 7px 9px;}
.small-number{font-size: var(--ui-text);}
.workflow-number{font-size: var(--ui-text);}
.closing-login{line-height: 1.8;}
.closing-coordinate{position: static; display: block; margin-top: 28px; font-size: var(--caption);}
.art-controls{left: 5%; right: 5%; bottom: 10px; gap: 8px; flex-wrap: wrap;}
.art-remix{font-size: var(--ui-text); min-height: 44px; padding: 9px 13px; gap: 8px;}
.art-remix > .icon{width: 16px; height: 16px;}
.art-remix > span{font-size: 18px;}
@media (max-width: 1100px) {.nav-links{gap: 18px;}
.ai-layout{gap: 36px;}
.workspace-body{grid-template-columns: 170px minmax(0px, 1fr);}}
@media (max-width: 900px) {.hero{grid-template-columns: 1fr;}
.hero-copy{max-width: 620px;}
.hero-wordmark{font-size: clamp(41px, 9vw, 72px);}
.hero-description{max-width: 520px;}
.hero-art{width: 100%; max-width: 560px; height: 520px; margin: 36px auto 0px;}
.hero-baseline{margin-top: 30px;}
.feature-grid{grid-template-columns: 1fr 1fr; gap: 0px 32px;}
.ai-layout, .publish-grid{grid-template-columns: 1fr; gap: 40px;}
.ai-copy > p{max-width: 600px;}
.conversation{transform: none;}
.security-strip{flex-wrap: wrap;}
.security-tags{max-width: none; width: 100%; padding-left: 60px; justify-content: start;}
.faq-section{grid-template-columns: 1fr; gap: 32px;}
.faq-intro h2 br{display: none;}}
@media (max-width: 760px) {.nav{height: 72px;}
.nav-cta{display: none;}
.menu-toggle{flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid rgb(82, 104, 67); border-radius: 4px; display: flex !important;}
.menu-toggle > span{height: 1px; width: 20px; background: rgb(218, 228, 206); transition: transform 0.2s;}
.menu-toggle[aria-expanded="true"] > span:first-child{transform: translateY(3.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] > span:last-child{transform: translateY(-3.5px) rotate(-45deg);}
.nav-links{display: none; position: absolute; top: 72px; left: 0px; right: 0px; flex-direction: column; align-items: stretch; padding: 16px 20px 24px; gap: 0px; background: rgb(13, 19, 12); border-bottom: 1px solid rgb(65, 83, 51);}
.nav-links.open{display: flex;}
.nav-links > a{font-size: var(--reading); padding: 13px 0px; border-bottom: 1px solid rgb(39, 51, 33);}
.nav-links > .mobile-access{color: var(--green); display: block !important;}
.section-heading{display: block;}
.section-heading > p{margin-top: 22px; max-width: 550px;}
.workspace-body{display: block;}
.workspace-sidebar{padding: 10px 12px; border-right: 0px; border-bottom: 1px solid var(--line);}
.sidebar-label, .sidebar-bottom{display: none;}
.page-buttons{display: flex; flex-wrap: wrap; gap: 4px;}
.page-button{padding: 8px;}
.page-button > span{display: none;}
.draft-state{display: none;}
.workspace-foot > span:last-child{display: block;}
.security-strip > div:not(.security-tags){flex: 1 1 0%; min-width: 0px;}
.workflow-grid{grid-template-columns: 1fr;}
.workflow-grid p{max-width: none;}}
@media (max-width: 620px) {.hero-art{height: 460px; max-width: 440px;}
.art-controls{justify-content: center; flex-direction: column; gap: 8px;}
.hero-note{gap: 6px 10px;}
.hero-note span + span::before{margin-right: 10px;}
.feature-grid{grid-template-columns: 1fr;}
.feature{padding-block: 26px;}
.feature-detail{margin-top: 14px;}
.workspace-brand .project-name{flex-basis: 100%; margin-left: 0px;}
.workspace-brand .slash{display: none;}
.workspace-bar{align-items: start;}
.editor-tabs{width: 100%; gap: 8px; justify-content: space-between;}
.editor-tabs button{gap: 5px;}
.editor-tabs .icon{display: none;}
.sample-content{display: flex; flex-direction: column; min-height: 0px;}
.sample-copy{max-width: none; padding-block: 24px 0px;}
.sample-copy > p{max-width: 100%;}
.sample-copy h3{max-width: none;}
.sample-sculpture{position: relative; width: 100%; height: 170px; right: auto; bottom: auto; margin-top: 10px; opacity: 1;}
.sculpture-inner{left: 50%; top: 43%;}
.preview-panel{padding: 8px;}
.sample-site{padding-inline: 16px;}
.history-item{gap: 12px; flex-wrap: wrap;}
.history-item > div{flex: 1 1 0%;}
.history-item > .current-badge, .history-item > .revision-number{margin-left: 24px;}
.prompt, .assistant-message{margin-inline: 16px; gap: 10px;}
.prompt > p{padding: 12px;}
.tool-action{display: grid; grid-template-columns: 16px minmax(0px, 1fr);}
.tool-action code{grid-column: 2; margin-left: 0px;}
.result-card{gap: 8px; padding: 12px 10px;}
.result-icon{display: none;}
.conversation-bottom{padding-inline: 16px;}
.domain-status{gap: 10px 8px;}
.domain-status > .example-label{margin-left: 0px;}
.domain-steps{flex-direction: column;}
.security-tags{padding-left: 0px;}
.closing > p{max-width: none;}
.closing-login > span{display: block; margin-top: 6px;}
.footer-main{grid-template-columns: 1fr;}
.back-top{grid-area: 3 / 1; margin-left: 0px;}
.footer-bottom > div{margin-left: 0px; gap: 14px;}}