/*!************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles.css ***! \************************************************************************************************************************************************************************************************************************************************************/ :root { --bg: #f5f8fc; --surface: #ffffff; --surface-2: #eef3f8; --line: #d9e2ec; --ink: #172235; --body: #526174; --faint: #7b899b; /* Brand accent. --accent-rgb carries the same colour as bare channels so every tint, glow and shadow below can be derived with rgb(... / alpha) instead of hardcoding the hue again — that way re-theming the product is a change to these few lines rather than ~70 scattered rgba(). */ --accent: #18b889; --accent-rgb: 47 214 163; --accent-strong: #0fa477; --accent-ink: #06231a; --accent-soft: rgb(var(--accent-rgb) / .1); --danger: #d94b5b; /* Success is intentionally its own token: it happens to match the brand today, but "this succeeded" and "this is our brand" are different meanings and shouldn't move together. */ --ok: #18b889; --ok-rgb: 47 214 163; /* Lighter end of the brand gradient (hero headline). */ --accent-lift: #60e8c0; /* Diff/checklist green. Deliberately NOT tied to --accent: "added lines" and "task done" read as green by convention in code tooling, whatever the brand colour happens to be. */ --added: #4ade80; --added-rgb: 74 222 128; /* Colour reserved for AI activity (assistant replies, thinking indicator, reasoning effort), deliberately distinct from --accent so "the AI is working" stays readable at a glance. */ --ai: #a78bfa; --ai-rgb: 167 139 250; /* Logo gradient stops. The mark keeps the same colours in both themes, so they live here once; re-theming the brand means editing these three alongside --accent rather than digging the hex values out of the inline SVG in site-chrome.tsx. */ --logo-blade-1: #9dffe0; --logo-blade-2: #2fd6a3; --logo-blade-3: #12a37f; --logo-plate-1: #16382f; --logo-plate-2: #061713; /* System stacks keep production builds independent of external font hosts. */ --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-cjk: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; --font-devanagari: "Noto Sans Devanagari", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --logo-contrast: #172235; font-family: var(--font-latin), var(--font-cjk); color: var(--ink); background: var(--bg); font-synthesis: none; -webkit-font-smoothing: antialiased; color-scheme: light; } /* Dark theme keeps the original deep navy palette and can be changed at runtime. */ :root[data-theme="dark"] { --bg: #0c1220; --surface: #151d2e; --surface-2: #1b2438; --line: #273350; --ink: #eef2f8; --body: #96a0b5; --faint: #64708a; --accent: #2fd6a3; --accent-rgb: 47 214 163; --accent-strong: #4ce6b6; --accent-ink: #06231a; --danger: #ff7b87; --ok: #2fd6a3; --ok-rgb: 47 214 163; --accent-lift: #60e8c0; --added: #4ade80; --added-rgb: 74 222 128; --ai: #a78bfa; --ai-rgb: 167 139 250; --logo-contrast: #0c1220; color-scheme: dark; } /* ---------- accent themes ---------- Layered on top of the light/dark palettes above via data-accent on . Each accent needs a light and a dark variant because a hue that reads well on white is usually too dark on navy. Selectors are written so they always beat the base blocks regardless of source order: :root:not([data-theme="dark"])[data-accent=…] and :root[data-theme="dark"][data-accent=…] are both (0,3,0), while the bases are (0,1,0) and (0,2,0). --ok / --added stay green everywhere on purpose (success and diff-added are conventions, not branding), and --ai is nudged away from the brand hue where the two would otherwise collide. */ :root:not([data-theme="dark"])[data-accent="violet"] { --accent: #7c5cf0; --accent-rgb: 139 108 250; --accent-strong: #6a48e0; --accent-ink: #ffffff; --accent-lift: #b9a4ff; --logo-blade-1: #d7c9ff; --logo-blade-2: #a78bfa; --logo-blade-3: #7c4fe0; --logo-plate-1: #241a44; --logo-plate-2: #0f0a1f; /* brand is violet now, so AI activity moves to sky blue to stay distinguishable */ --ai: #0ea5e9; --ai-rgb: 14 165 233; } :root[data-theme="dark"][data-accent="violet"] { --accent: #a78bfa; --accent-rgb: 167 139 250; --accent-strong: #bda4ff; --accent-ink: #180f33; --accent-lift: #d0bcff; --logo-blade-1: #d7c9ff; --logo-blade-2: #a78bfa; --logo-blade-3: #7c4fe0; --logo-plate-1: #241a44; --logo-plate-2: #0f0a1f; --ai: #38bdf8; --ai-rgb: 56 189 248; } :root:not([data-theme="dark"])[data-accent="indigo"] { --accent: #3b6ef0; --accent-rgb: 80 130 250; --accent-strong: #2f5cd8; --accent-ink: #ffffff; --accent-lift: #8fb6ff; --logo-blade-1: #c2d8ff; --logo-blade-2: #5b8cff; --logo-blade-3: #2f5cd8; --logo-plate-1: #14203f; --logo-plate-2: #070d1c; /* push AI purple towards magenta so it separates from the blue brand hue */ --ai: #c084fc; --ai-rgb: 192 132 252; } :root[data-theme="dark"][data-accent="indigo"] { --accent: #5b8cff; --accent-rgb: 91 140 255; --accent-strong: #7ba4ff; --accent-ink: #0a1430; --accent-lift: #8fb6ff; --logo-blade-1: #c2d8ff; --logo-blade-2: #5b8cff; --logo-blade-3: #2f5cd8; --logo-plate-1: #14203f; --logo-plate-2: #070d1c; --ai: #c084fc; --ai-rgb: 192 132 252; } :root:not([data-theme="dark"])[data-accent="amber"] { --accent: #e08a1e; --accent-rgb: 240 160 60; --accent-strong: #c9760f; --accent-ink: #241503; --accent-lift: #ffd08a; --logo-blade-1: #ffe0a8; --logo-blade-2: #f2a83c; --logo-blade-3: #c9760f; --logo-plate-1: #3a2609; --logo-plate-2: #1a1003; } :root[data-theme="dark"][data-accent="amber"] { --accent: #f2a83c; --accent-rgb: 242 168 60; --accent-strong: #ffc061; --accent-ink: #2a1a05; --accent-lift: #ffd08a; --logo-blade-1: #ffe0a8; --logo-blade-2: #f2a83c; --logo-blade-3: #c9760f; --logo-plate-1: #3a2609; --logo-plate-2: #1a1003; } :root[data-theme="dark"] .builder-editor { background: #080d18; } :root[data-theme="dark"] .builder-editor > header { background: #101827; } :root[data-theme="dark"] .builder-editor-body .cm-editor { color: var(--ink); background: #080d18; } :root[data-theme="dark"] .builder-editor-body .cm-gutters { background: #0b111d; border-color: #202a3c; } :root[data-theme="dark"] .builder-editor-body .cm-activeLine, :root[data-theme="dark"] .builder-editor-body .cm-activeLineGutter { background: #101827; } :root[data-theme="dark"] footer { background: #0a0f1b; } :root[data-theme="dark"] .preview-pane { background: repeating-linear-gradient(45deg, #111927 0 8px, #131c2c 8px 16px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: thin; } body { min-width: 320px; margin: 0; background: var(--bg); } /* Global page scrollbar. Several layouts (e.g. the builder's three-column view below its ~900px breakpoint) intentionally switch from an internal per-panel scroll to letting the whole page scroll, so the browser's own (much thicker, unstyled) scrollbar becomes the one that's visible — styling only the inner containers doesn't cover that case. */ html::-webkit-scrollbar { width: 6px; } html::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--faint) 55%, transparent); border-radius: 3px; } html::-webkit-scrollbar-thumb:hover { background: var(--faint); } html::-webkit-scrollbar-track { background: transparent; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } .theme-toggle { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--body); background: var(--surface); font-size: 11px; transition: color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); background: var(--surface-2); } .theme-toggle span { color: var(--accent); font-size: 15px; line-height: 1; } .theme-toggle em { font-style: normal; } .theme-toggle-floating { position: fixed; top: 16px; right: 18px; z-index: 100; box-shadow: 0 8px 24px rgba(23,34,53,.12); } /* Pages with a nav bar host the toggle inside it; the floating one would overlap the language select. */ body:has(.nav-bar) .theme-toggle-floating { display: none; } /* Account and admin pages also host their own toggle in their header; the global floating one would overlap it. */ body:has(.account-page) .theme-toggle-floating, body:has(.admin-page) .theme-toggle-floating { display: none; } :root[data-theme="dark"] .theme-toggle-floating { background: var(--surface-2); } :root[data-theme="dark"] .theme-toggle-floating { box-shadow: 0 8px 24px rgba(0,0,0,.3); } h1, h2, h3, p, blockquote { margin: 0; } .wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; } .mono, .kicker { font-family: var(--mono); } .locale-zh { font-family: var(--font-cjk), var(--font-latin); } .locale-hi { font-family: var(--font-devanagari), var(--font-latin); } /* ---------- buttons ---------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent-ink); background: var(--accent); font-size: 14px; font-weight: 600; transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; } .button:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 6px 24px rgb(var(--accent-rgb) / .25); } .button-secondary { border-color: var(--line); color: var(--ink); background: var(--surface); } .button-secondary:hover { border-color: #b8c7d8; background: var(--surface-2); box-shadow: none; } .button-lg { height: 48px; padding: 0 24px; } .button-small { height: 34px; padding: 0 14px; font-size: 13px; } .button-invert { border-color: var(--bg); color: var(--ink); background: var(--bg); } .button-invert:hover { background: #e8eef5; border-color: #e8eef5; box-shadow: none; } .text-link { color: var(--body); font-size: 14px; font-weight: 500; transition: color .15s; } .text-link:hover { color: var(--ink); } /* ---------- logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.045em; text-decoration: none; } .logo > span { color: var(--ink); } .logo > span i { color: var(--accent); font-style: normal; } .logo-mark { display: block; border-radius: 8.5px; box-shadow: 0 2px 10px rgb(var(--accent-rgb) / .35); transition: box-shadow .2s, transform .2s; } .logo:hover .logo-mark { box-shadow: 0 4px 18px rgb(var(--accent-rgb) / .5); transform: translateY(-1px); } /* ---------- nav ---------- */ .nav-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } :root[data-theme="dark"] .nav-bar { background: rgba(12,18,32,.82); } .nav { height: 64px; display: flex; align-items: center; gap: 40px; } .nav-links { display: flex; flex: 0 0 auto; gap: 26px; } .nav-links a { flex: 0 0 auto; color: var(--body); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .15s; } .nav-links a:hover { color: var(--ink); } .nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; margin-left: auto; white-space: nowrap; } :lang(ms) .nav, :lang(id) .nav { gap: 24px; } :lang(ms) .nav-links, :lang(id) .nav-links { gap: 18px; } :lang(ms) .nav-actions, :lang(id) .nav-actions { gap: 12px; } /* language picker */ .lang-picker { position: relative; } .lang-trigger { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--body); background: var(--surface); font-size: 12px; transition: color .15s, border-color .15s, background .15s; } .lang-trigger:hover, .lang-trigger[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); background: var(--surface-2); } .lang-trigger > svg { flex-shrink: 0; color: var(--faint); } .lang-trigger:hover > svg, .lang-trigger[aria-expanded="true"] > svg { color: var(--accent); } .lang-trigger > span { max-width: 116px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lang-caret { display: inline-flex; color: var(--faint); transition: transform .18s; } .lang-caret.open { transform: rotate(180deg); } .lang-menu { position: absolute; z-index: 60; min-width: 184px; margin: 0; padding: 5px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 48px -16px rgba(0,0,0,.5); } .lang-menu--right { right: 0; } .lang-menu--left { left: 0; } .lang-menu--down { top: calc(100% + 8px); } .lang-menu--up { bottom: calc(100% + 8px); } .lang-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--body); background: transparent; font-size: 13px; text-align: left; white-space: nowrap; transition: background .15s, color .15s; } .lang-menu button:hover { color: var(--ink); background: var(--surface-2); } .lang-menu button.active { color: var(--accent); font-weight: 600; } .lang-menu button svg { flex-shrink: 0; } /* accent picker — reuses .lang-menu for the dropdown, only the trigger differs */ .accent-picker { position: relative; } .accent-trigger { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); transition: border-color .15s, background .15s; } .accent-trigger:hover, .accent-trigger[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); } .accent-dot { flex-shrink: 0; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); } .accent-menu { min-width: 168px; } .accent-menu button { justify-content: flex-start; } .accent-menu button > span { margin-right: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .menu-button { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); } .nav-skeleton { width: 92px; height: 34px; border-radius: 8px; background: var(--surface); opacity: .3; } .nav-links-mobile-only { display: none; } /* ---------- account menu ---------- */ .account-menu { position: relative; } .account-trigger { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; color: var(--ink); background: transparent; font-size: 13.5px; font-weight: 500; transition: border-color .15s, background .15s; } .account-trigger:hover { border-color: var(--line); background: var(--surface); } .account-trigger svg { color: var(--faint); } .account-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 600; } .account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 220px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 48px -16px rgba(0,0,0,.5); } .account-dropdown-head { padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .account-dropdown-head b { display: block; font-size: 13px; } .account-dropdown-head small { display: block; margin-top: 3px; color: var(--faint); font-size: 11.5px; } .account-dropdown a, .account-dropdown button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 0; color: var(--body); background: transparent; font-size: 13px; text-align: left; transition: background .15s, color .15s; } .account-dropdown a:hover, .account-dropdown button:hover { color: var(--ink); background: var(--surface-2); } .account-dropdown svg { color: var(--faint); } /* ---------- hero ---------- */ .hero { --mx: 50%; --my: 30%; position: relative; padding: 92px 0 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 55% 45% at 50% -4%, rgb(var(--accent-rgb) / .18), transparent 70%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 620px; z-index: 0; opacity: .55; background: linear-gradient(to right, var(--line) 1px, transparent 1px) 50% 0 / 96px 100%; -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent); pointer-events: none; } /* mouse-tracking glow */ .hero-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s; } .hero:hover .hero-glow { opacity: 1; } .hero-glow::before { content: ""; position: absolute; width: 600px; height: 600px; left: var(--mx); top: var(--my); translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent-rgb) / .14) 0%, rgb(var(--accent-rgb) / .05) 40%, transparent 70%); filter: blur(20px); } .hero-glow::after { content: ""; position: absolute; width: 280px; height: 280px; left: var(--mx); top: var(--my); translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent-rgb) / .22) 0%, transparent 70%); filter: blur(30px); } .hero-inner { position: relative; z-index: 2; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--body); background: var(--surface); font-family: var(--mono); font-size: 12px; transition: border-color .25s, color .25s, box-shadow .25s, transform .25s; } .hero-badge:hover { border-color: rgb(var(--accent-rgb) / .4); color: var(--ink); box-shadow: 0 0 16px rgb(var(--accent-rgb) / .15); transform: translateY(-1px); } .hero-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: badge-pulse 2s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 8px var(--accent); } 50% { box-shadow: 0 0 16px var(--accent), 0 0 28px rgb(var(--accent-rgb) / .3); } } h1 { margin: 30px 0 22px; font-size: clamp(46px, 6.6vw, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; } /* CJK headlines are only a handful of glyphs wide, so they can carry a much larger size than the Latin clamp allows before they run out of room — and a tighter leading makes the two lines read as one block. */ .locale-zh h1 { font-size: clamp(52px, 7.6vw, 94px); font-weight: 700; line-height: 1.0; letter-spacing: -.02em; } h1 span, .hero h1 span { color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-lift)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .caret { display: inline-block; width: .09em; height: .82em; margin-left: .06em; vertical-align: -.06em; background: var(--accent); animation: caret-blink 1.1s steps(1) infinite; } /* Two levels rather than one flat grey paragraph: the headline is huge and everything under it used to drop straight to 17px grey, leaving no step in between. balance keeps each line off a one-word second row when it has to wrap on narrow screens. */ .hero-sub { max-width: 660px; margin: 0 auto 20px; text-wrap: balance; } .hero-sub b { display: block; color: var(--ink); font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.45; letter-spacing: -.015em; } .hero-sub span { display: block; margin-top: 9px; color: var(--body); font-size: 15px; line-height: 1.6; } .hero-sub em { color: var(--accent); font-style: normal; } .hero-model-claim { display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 28px; padding: 11px 18px; border: 1px solid rgb(var(--accent-rgb) / .38); border-radius: 11px; color: var(--ink); background: rgb(var(--accent-rgb) / .09); box-shadow: inset 0 0 24px rgb(var(--accent-rgb) / .06), 0 6px 20px -10px rgb(var(--accent-rgb) / .35); font-size: 14px; font-weight: 600; } .hero-model-claim svg { flex: 0 0 auto; color: var(--accent); } .hero-prompt { max-width: 640px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 50px -20px rgba(0,0,0,.5); text-align: left; transition: border-color .25s, box-shadow .25s, transform .25s; } .hero-prompt:hover { border-color: rgb(var(--accent-rgb) / .25); transform: translateY(-2px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgb(var(--accent-rgb) / .08); } .hero-prompt:focus-within { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 0 3px var(--accent-soft), 0 24px 60px -20px rgba(0,0,0,.5); } .hero-prompt textarea { width: 100%; padding: 17px 18px 8px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; line-height: 1.65; } .hero-prompt textarea::placeholder { color: var(--faint); } .hero-prompt-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; } .hero-prompt-bar > span { display: flex; align-items: center; gap: 6px; color: var(--faint); font-family: var(--mono); font-size: 11px; } .hero-prompt-bar > span svg { color: var(--accent); } .hero-prompt-bar button { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border: 0; border-radius: 9px; color: var(--accent-ink); background: var(--accent); font-size: 13.5px; font-weight: 600; transition: background .2s, box-shadow .2s, transform .2s; } .hero-prompt-bar button:hover { background: var(--accent-strong); box-shadow: 0 6px 24px rgb(var(--accent-rgb) / .35); transform: translateY(-1px); } .hero-proof { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; color: var(--faint); font-family: var(--mono); font-size: 12px; } .hero-proof p { margin: 0; transition: color .2s; } .hero-proof:hover p { color: var(--body); } .hero-proof b { color: var(--ink); font-weight: 600; } .hero-proof > em { width: 1px; height: 12px; background: var(--line); } /* ---------- hero product mock ---------- */ .hero-stage { position: relative; z-index: 2; margin-top: 68px; } .hero-product { margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px 14px 0 0; border-bottom: 0; background: var(--surface); box-shadow: 0 0 0 8px rgba(255,255,255,.02), 0 -20px 80px -20px rgb(var(--accent-rgb) / .12), 0 30px 60px -30px rgba(0,0,0,.6); transition: transform .3s, box-shadow .3s; } .hero-product:hover { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(255,255,255,.02), 0 -20px 80px -20px rgb(var(--accent-rgb) / .18), 0 40px 80px -30px rgba(0,0,0,.6); } .window-bar { height: 42px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .dots { display: flex; gap: 6px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: #2f3b58; } .dots i:first-child { background: #ff5f57; } .dots i:nth-child(2) { background: #febc2e; } .dots i:last-child { background: #28c840; } .window-url { flex: 1 1; max-width: 280px; margin-inline: auto; padding: 5px 0; border: 1px solid var(--line); border-radius: 7px; color: var(--faint); background: var(--surface); font-family: var(--mono); font-size: 11px; text-align: center; } .window-secure { display: flex; align-items: center; gap: 5px; color: var(--faint); font-family: var(--mono); font-size: 11px; } .product-body { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 440px; } .chat-pane { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-right: 1px solid var(--line); text-align: left; } .workspace-title { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .workspace-title > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); background: var(--surface-2); } .workspace-title b, .workspace-title small { display: block; } .workspace-title b { font-size: 12.5px; } .workspace-title small { margin-top: 3px; color: var(--faint); font-size: 10px; } .workspace-title em { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--accent); font-family: var(--mono); font-size: 10px; font-style: normal; } .workspace-title em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .msg { display: flex; gap: 11px; } .msg > span { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--body); background: var(--surface-2); font-size: 11px; font-weight: 600; } .ai-avatar { color: var(--accent-ink) !important; background: var(--accent) !important; } .msg p { padding-top: 4px; color: var(--ink); font-size: 13px; line-height: 1.7; } .msg-user p { color: var(--body); } .task-list { display: grid; grid-gap: 2px; gap: 2px; margin-top: 12px; } .task { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--faint); font-size: 12px; } .task i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: var(--mono); font-size: 9px; font-style: normal; } .task.done { color: var(--body); } .task.done i { border-color: transparent; color: var(--accent); background: var(--accent-soft); } .task.doing { color: var(--ink); background: var(--surface-2); font-weight: 500; } .task.doing i { border-color: var(--accent); color: var(--accent); background: transparent; } .task.doing em { margin-left: auto; color: var(--accent); font-family: var(--mono); font-size: 10px; font-style: normal; } .preview-pane { position: relative; display: grid; place-items: center; padding: 52px 42px 0; background: repeating-linear-gradient(45deg, #f1f5f9 0 8px, #eaf0f6 8px 16px); } .preview-label { position: absolute; top: 13px; left: 16px; right: 16px; display: flex; align-items: center; gap: 6px; color: var(--body); font-family: var(--mono); font-size: 11px; } .preview-label > i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .preview-label span { margin-left: auto; color: var(--faint); } .mini-site { width: 100%; max-width: 400px; align-self: end; overflow: hidden; border: 1px solid #495066; border-radius: 8px 8px 0 0; background: #faf7f2; box-shadow: 0 20px 50px -18px rgba(0,0,0,.55); } .mini-nav { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #eae5dc; } .mini-nav b { color: #44382e; font-family: Georgia, serif; font-size: 14px; } .mini-nav span { display: flex; gap: 10px; } .mini-nav span i { width: 22px; height: 5px; border-radius: 3px; background: #e3dcd0; } .mini-hero { padding: 30px 22px 24px; background: radial-gradient(circle at 82% 38%, #d3bba5 0 12%, transparent 12.5%); } .mini-hero small { display: block; color: #a89a87; font-size: 7px; letter-spacing: .14em; } .mini-hero b { display: block; max-width: 235px; margin: 9px 0 15px; color: #3c322a; font-family: Georgia, serif; font-size: 24px; font-weight: 500; line-height: 1.16; } .mini-cta { display: inline-block; padding: 8px 13px; border-radius: 5px; color: #f6f1e8; background: #55402f; font-size: 9px; } .mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; gap: 10px; padding: 0 18px 5px; } .mini-cards i { height: 58px; border-radius: 6px 6px 0 0; background: #ece5d8; } .mini-cards i:nth-child(2) { background: #e0d5c3; } /* ---------- impact + logos ---------- */ .impact-strip { border-bottom: 1px solid var(--line); background: var(--surface); } .impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .impact-grid > div { padding: 34px 30px; text-align: center; } .impact-grid > div:not(:last-child) { border-right: 1px solid var(--line); } .impact-grid b, .impact-grid span { display: block; } .impact-grid b { color: var(--accent); font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.03em; } .impact-grid span { margin-top: 8px; color: var(--faint); font-size: 12px; } /* These are audience categories, not logos, so every item gets the same treatment — the old strip varied serif/italic/tracking per position to fake distinct wordmarks, which would read as inconsistent styling once the items are plain labels. */ .audience-strip { padding: 48px 0; border-bottom: 1px solid var(--line); text-align: center; } .audience-strip p { margin-bottom: 26px; color: var(--faint); font-family: var(--mono); font-size: 12px; } .audience-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; } .audience-tags span { padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; color: var(--body); background: var(--surface); font-size: 13.5px; font-weight: 500; } /* ---------- sections ---------- */ .section { padding-top: 108px; padding-bottom: 108px; } .section-head { max-width: 620px; margin-bottom: 60px; } .section-head.center { margin-inline: auto; text-align: center; } .kicker { display: inline-block; margin-bottom: 18px; color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } .kicker::before { content: "// "; color: var(--faint); } h2 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; } .locale-zh h2 { font-weight: 700; letter-spacing: -.01em; } .section-head p { margin-top: 18px; color: var(--body); font-size: 15.5px; line-height: 1.8; } /* ---------- features ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; } .feature-card { padding: 28px 26px 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .2s, transform .2s, box-shadow .2s; } .feature-card:hover { border-color: #37456e; transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); } .feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); background: var(--surface-2); } .feature-card h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .feature-card p { color: var(--body); font-size: 14px; line-height: 1.75; } /* ---------- no-token ---------- */ .no-token-section { padding: 80px 0; } .no-token-inner { position: relative; padding: 48px 40px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; } .no-token-inner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 50% 60% at 0% 0%, rgb(var(--accent-rgb) / .1), transparent 70%); pointer-events: none; } .no-token-inner > * { position: relative; z-index: 1; } .no-token-head { max-width: 520px; margin-bottom: 36px; } .no-token-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgb(var(--accent-rgb) / .3); border-radius: 99px; color: var(--accent); background: rgb(var(--accent-rgb) / .08); font-size: 14px; font-weight: 700; letter-spacing: .02em; } .no-token-head p { margin-top: 16px; color: var(--body); font-size: 15px; line-height: 1.75; } .no-token-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; } .no-token-card { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .15s; } .no-token-card:hover { border-color: rgb(var(--accent-rgb) / .4); } .no-token-card h4 { margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); } .no-token-card p { color: var(--body); font-size: 13.5px; line-height: 1.7; } /* ---------- how ---------- */ .how-section { border-block: 1px solid var(--line); background: var(--surface); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; } .step { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } .step > span { display: inline-block; margin-bottom: 20px; color: var(--accent); font-family: var(--mono); font-size: 13px; } .step > span::before { content: "0"; } .step h3 { margin-bottom: 10px; font-size: 16.5px; font-weight: 600; } .step p { color: var(--body); font-size: 14px; line-height: 1.75; } /* ---------- quote ---------- */ /* A surface-backed card rather than a bare accent rule: the block is centred and therefore does not share the page's left content edge, so it needs its own boundary to read as a deliberate section instead of text spilling out of the band above it. The brand accent lives in the avatar rather than in a left bar, which a rounded card clips into an awkward tapered sliver. */ .quote-card { max-width: 760px; margin-inline: auto; padding: 44px 48px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } .quote-card blockquote { color: var(--ink); font-size: clamp(19px, 2.4vw, 25px); font-weight: 500; line-height: 1.65; letter-spacing: -.015em; } .quote-author { display: flex; align-items: center; gap: 13px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); } .quote-author > span { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 12px; font-weight: 600; } .quote-author b { display: block; font-size: 14.5px; } .quote-author small { display: block; margin-top: 3px; color: var(--faint); font-size: 12.5px; } /* ---------- pricing ---------- */ /* Cards share one row track set (4 header rows + up to 6 feature rows) and opt into it via subgrid, so every row is as tall as its tallest cell across all cards. That keeps matching features on the same line no matter how differently each plan's wording wraps — reserving a fixed number of lines can't work, since copy length varies by plan, locale and card width. */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 14px; column-gap: 14px; grid-row-gap: 0; row-gap: 0; grid-template-rows: auto auto auto auto repeat(6, auto); } .pricing-grid--five { grid-template-columns: repeat(5, 1fr); } .pricing-region-link { margin-top: 16px; border: 0; padding: 0; color: var(--accent); background: transparent; font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .price-card li a { color: var(--accent); font-weight: 600; } .pricing-note { max-width: 760px; margin: 36px auto 0; color: var(--body); font-size: 13.5px; line-height: 1.8; text-align: center; } .price-card { position: relative; display: grid; grid-row: span 10; grid-template-rows: subgrid; align-content: start; padding: 30px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px -28px rgb(var(--accent-rgb) / .35); } .popular { position: absolute; top: -12px; right: 20px; padding: 4px 11px; border-radius: 99px; color: var(--accent-ink); background: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 600; } .price-card h3 { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .price-desc { margin-top: 8px; color: var(--body); font-size: 13.5px; line-height: 1.5; } .price { display: flex; min-height: 50px; align-items: flex-end; gap: 8px; margin: 22px 0 24px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .price b { display: inline-flex; align-items: flex-start; color: var(--ink); font-weight: 700; line-height: .9; letter-spacing: -.045em; } .price b sup { margin: 4px 3px 0 0; color: var(--body); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; } .price b strong { font-size: 43px; font-weight: 720; line-height: .9; } .price > span { margin-bottom: 3px; color: var(--faint); font-size: 12px; line-height: 1.15; white-space: nowrap; } .price-button { width: 100%; align-self: start; } .featured .price-button { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); } .featured .price-button:hover { background: var(--accent-strong); border-color: var(--accent-strong); } /* display: contents lifts the individual
  • into the card's subgrid so they land on the shared feature rows; the divider the