@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
  --bg: #090913;
  --bg-soft: #11111e;
  --bg-card: #131323;
  --ink: #f6f4ff;
  --muted: #aaa8bd;
  --faint: #6c6a80;
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .18);
  --lavender: #b9a5ff;
  --lavender-bright: #d2c5ff;
  --violet: #7056e6;
  --cyan: #72e4ff;
  --coral: #ff8775;
  --cream: #f2efe8;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Inter, Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; z-index: 0; width: 450px; height: 450px; left: var(--x, 65%); top: var(--y, 10%); transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(111, 83, 235, .13), transparent 67%); filter: blur(12px); transition: opacity .35s ease; }

.section-shell { width: min(1180px, calc(100% - 56px)); margin-inline: auto; position: relative; z-index: 1; }

.site-header { width: min(1248px, calc(100% - 56px)); margin: 0 auto; height: 92px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; font-weight: 700; letter-spacing: -.04em; }
.brand-logo { line-height: 0; }
.brand-logo img { display: block; width: 116px; height: auto; filter: drop-shadow(0 8px 18px rgba(185,165,255,.13)); }
.nav-links { display: flex; gap: 30px; margin-left: 102px; }
.nav-links a { color: #bab8c8; font-size: 14px; font-weight: 500; transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.header-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #f4f2fd; font-size: 13px; font-weight: 600; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.header-cta svg { width: 16px; }
.header-cta:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(185,165,255,.48); }

.hero { min-height: 710px; display: grid; grid-template-columns: 1fr 1.09fr; align-items: center; gap: 50px; padding: 54px 0 82px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--lavender); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #8ef0b4; box-shadow: 0 0 0 5px rgba(142,240,180,.1), 0 0 20px rgba(142,240,180,.7); animation: pulse 1.9s infinite ease-in-out; }
.hero h1, .section-heading h2, .workflow-copy h2, .source-copy h2, .launch-cta h2 { font-size: clamp(58px, 6.55vw, 92px); line-height: .96; letter-spacing: -.065em; margin: 19px 0 22px; font-weight: 700; }
.hero h1 span, .launch-cta h2 span { color: var(--lavender-bright); font-family: var(--serif); letter-spacing: -.085em; font-style: italic; font-weight: 600; }
.hero-lede { max-width: 500px; color: var(--muted); line-height: 1.65; font-size: 18px; margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 31px; }
.button { min-height: 51px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button svg { width: 18px; }
.button-primary { color: #15111f; background: var(--lavender-bright); box-shadow: 0 15px 36px rgba(115,86,234,.23); }
.button-primary:hover { transform: translateY(-3px); background: #ded6ff; box-shadow: 0 20px 46px rgba(115,86,234,.35); }
.button-quiet { color: #d7d4e4; background: transparent; padding-inline: 0; }
.button-quiet:hover { color: var(--ink); transform: translateX(3px); }
.play-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; }
.play-icon svg { width: 14px; margin-left: 1px; }
.product-hunt-badge { display: inline-block; width: 250px; max-width: 100%; margin-top: 21px; line-height: 0; border-radius: 7px; transition: transform .22s ease, filter .22s ease; }
.product-hunt-badge img { display: block; width: 250px; max-width: 100%; height: auto; border-radius: 7px; }
.product-hunt-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 12px 20px rgba(0,0,0,.26)); }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .03em; }
.hero-note i { height: 3px; width: 3px; border-radius: 50%; background: #4f4c60; }

.hero-visual { height: 480px; position: relative; display: grid; place-items: center; }
.hero-visual::before { content: ''; position: absolute; width: 500px; height: 300px; background: radial-gradient(ellipse at center, rgba(111, 83, 235, .37), transparent 66%); filter: blur(9px); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(185,165,255,.11); transform: rotate(-28deg); }
.orbit-one { width: 590px; height: 270px; }
.orbit-two { width: 440px; height: 198px; border-color: rgba(114,228,255,.1); }
.flare { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lavender-bright); box-shadow: 0 0 24px 8px rgba(185,165,255,.53); }
.flare-a { top: 64px; right: 88px; }
.flare-b { bottom: 72px; left: 73px; background: var(--cyan); box-shadow: 0 0 24px 8px rgba(114,228,255,.36); }
.now-playing-card { width: min(440px, 86%); position: relative; z-index: 2; border: 1px solid rgba(215,205,255,.29); border-radius: 19px; padding: 22px; background: linear-gradient(155deg, rgba(30,27,49,.96), rgba(14,14,27,.94)); box-shadow: 0 40px 90px rgba(0,0,0,.43), 0 0 0 1px rgba(255,255,255,.035) inset; transform: rotate(-3deg); }
.visual-card-topline, .visual-card-footer, .job-meter-text { display: flex; justify-content: space-between; align-items: center; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; color: #b9b2db; font-family: var(--mono); font-size: 9px; letter-spacing: .02em; }
.live-pill i { height: 6px; width: 6px; border-radius: 50%; background: #8cf4b4; box-shadow: 0 0 10px #8cf4b4; }
.timestamp { color: #727088; font-family: var(--mono); font-size: 9px; }
.book-and-meta { display: flex; gap: 18px; align-items: center; margin-top: 25px; }
.book-cover { width: 104px; aspect-ratio: 0.72; position: relative; overflow: hidden; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(155deg, #f0a971, #ad5e68 54%, #402f75); box-shadow: 9px 12px 19px rgba(0,0,0,.36); }
.book-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.72), transparent 18%), linear-gradient(32deg, transparent 47%, rgba(255,255,255,.25) 48%, transparent 49%); mix-blend-mode: soft-light; }
.book-cover span, .book-cover strong { position: relative; z-index: 1; }
.cover-kicker, .cover-author { font-size: 6px; color: rgba(20,12,25,.75); letter-spacing: .11em; font-weight: 700; }
.book-cover strong { color: #291a36; font-family: var(--serif); line-height: .82; letter-spacing: -.08em; font-size: 18px; }
.book-meta { min-width: 0; flex: 1; }
.book-title { color: #f0eff9; font-weight: 600; font-size: 18px; letter-spacing: -.04em; }
.book-subtitle { margin-top: 4px; color: #9692ad; font-size: 11px; }
.sound-bars { height: 50px; display: flex; align-items: center; gap: 3px; margin-top: 12px; }
.sound-bars span { width: 3px; min-height: 5px; background: linear-gradient(var(--cyan), var(--lavender)); border-radius: 3px; animation: bars 1s ease-in-out infinite alternate; }
.sound-bars span:nth-child(1) { height: 11px; animation-delay: -.1s; }.sound-bars span:nth-child(2) { height: 23px; animation-delay: -.65s; }.sound-bars span:nth-child(3) { height: 31px; animation-delay: -.2s; }.sound-bars span:nth-child(4) { height: 14px; animation-delay: -.85s; }.sound-bars span:nth-child(5) { height: 38px; animation-delay: -.4s; }.sound-bars span:nth-child(6) { height: 21px; animation-delay: -.2s; }.sound-bars span:nth-child(7) { height: 44px; animation-delay: -.71s; }.sound-bars span:nth-child(8) { height: 24px; animation-delay: -.34s; }.sound-bars span:nth-child(9) { height: 16px; animation-delay: -.86s; }.sound-bars span:nth-child(10) { height: 36px; animation-delay: -.43s; }.sound-bars span:nth-child(11) { height: 28px; animation-delay: -.14s; }.sound-bars span:nth-child(12) { height: 14px; animation-delay: -.67s; }.sound-bars span:nth-child(13) { height: 39px; animation-delay: -.32s; }.sound-bars span:nth-child(14) { height: 25px; animation-delay: -.76s; }.sound-bars span:nth-child(15) { height: 9px; animation-delay: -.12s; }.sound-bars span:nth-child(16) { height: 30px; animation-delay: -.52s; }.sound-bars span:nth-child(17) { height: 18px; animation-delay: -.28s; }.sound-bars span:nth-child(18) { height: 9px; animation-delay: -.92s; }
.job-meter { padding-top: 20px; }
.job-meter-text { color: #a8a4bb; font-size: 10px; }
.job-meter-text b { color: #e0dcf0; }.job-meter-text em { font-style: normal; color: var(--lavender); font-family: var(--mono); }
.track, .demo-track, .mini-job-track { height: 7px; overflow: hidden; margin-top: 9px; border-radius: 999px; background: rgba(255,255,255,.1); }
.track span { display: block; height: 100%; width: 69%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lavender), #ed91ff); box-shadow: 0 0 18px rgba(185,165,255,.75); animation: shimmer 2s linear infinite; }
.visual-card-footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 18px; padding-top: 14px; color: #8a879d; font-size: 9px; font-family: var(--mono); }
.footer-chunks { display: flex; gap: 3px; }.footer-chunks span { width: 7px; height: 7px; border-radius: 2px; background: var(--lavender); }.footer-chunks span:nth-child(n+7) { background: rgba(255,255,255,.17); }
.floating-annotation { display: flex; align-items: center; gap: 9px; position: absolute; z-index: 3; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(19,18,33,.84); backdrop-filter: blur(16px); box-shadow: 0 18px 36px rgba(0,0,0,.3); transform: rotate(2.5deg); }
.annotation-a { top: 30px; left: -6px; }.annotation-b { bottom: 31px; right: -9px; transform: rotate(-2.5deg); }
.annotation-icon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--lavender); border-radius: 7px; background: rgba(185,165,255,.1); }.annotation-icon svg { width: 16px; }
.floating-annotation b, .floating-annotation small { display: block; white-space: nowrap; }.floating-annotation b { color: #e2def5; font-size: 10px; }.floating-annotation small { color: #8c899e; margin-top: 3px; font-size: 8px; }

.social-proof { padding: 22px 0 84px; display: flex; gap: 30px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
.proof-statement { max-width: 315px; color: #cfccdb; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.28; letter-spacing: -.035em; }
.proof-tags { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.proof-tags span { color: #908da4; font-family: var(--mono); font-size: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 999px; }

.feature-intro { display: grid; grid-template-columns: 1fr .76fr; gap: 80px; align-items: end; padding: 93px 0 49px; border-top: 1px solid rgba(255,255,255,.08); }
.section-heading h2, .workflow-copy h2, .source-copy h2 { font-size: clamp(47px, 5.1vw, 72px); margin-bottom: 0; }
.section-heading h2 em, .workflow-copy h2 em, .source-copy h2 em { color: var(--lavender-bright); font-family: var(--serif); font-weight: 600; letter-spacing: -.085em; }
.section-side-copy { max-width: 430px; padding-bottom: 7px; }.section-side-copy p, .gallery-top > p { color: var(--muted); font-size: 16px; line-height: 1.72; margin: 0; }
.text-link { display: inline-flex; margin-top: 23px; gap: 9px; color: #dedbed; font-size: 14px; font-weight: 700; }.text-link span { color: var(--lavender); font-size: 20px; line-height: 11px; transition: transform .2s ease; }.text-link:hover span { transform: translate(2px, 2px); }

.benefit-grid { display: grid; grid-template-columns: 1.24fr .88fr .88fr; gap: 14px; }
.benefit-card { min-height: 448px; position: relative; overflow: hidden; padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(28,27,44,.75), rgba(16,16,28,.95)); transition: transform .3s ease, border-color .3s ease; }
.benefit-card:hover { transform: translateY(-5px); border-color: rgba(185,165,255,.35); }.card-number { position: absolute; top: 22px; left: 24px; color: #706d83; font-family: var(--mono); font-size: 10px; }
.benefit-card h3 { position: relative; z-index: 1; margin: 0; color: #f0eef8; font-size: 23px; letter-spacing: -.055em; line-height: 1.04; }.benefit-card p { position: relative; z-index: 1; margin: 15px 0 0; max-width: 315px; color: #9693a8; line-height: 1.58; font-size: 13px; }
.benefit-art { position: absolute; top: 58px; left: 0; width: 100%; height: 220px; }
.manuscript-art { background: radial-gradient(circle at 51% 27%, rgba(112,86,230,.24), transparent 48%); }.paper { position: absolute; width: 175px; height: 204px; border-radius: 4px; background: #e7e1dc; box-shadow: 0 18px 30px rgba(0,0,0,.27); }.paper-back { transform: rotate(-11deg); top: 9px; left: 25%; background: linear-gradient(140deg, #9e89be, #4a4468); }.paper-front { transform: rotate(7deg); top: 12px; left: 36%; padding: 24px 17px; background: linear-gradient(150deg, #efebe7 0%, #ded4ce 100%); }.paper-front::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: linear-gradient(transparent, rgba(97,78,69,.12)); }.paper-label { color: #82736f; font-family: var(--mono); font-size: 7px; letter-spacing: .16em; margin-bottom: 19px; }.paper span { display: block; width: 89%; height: 4px; margin-top: 10px; border-radius: 999px; background: rgba(77,55,66,.25); }.paper span:nth-child(3) { width: 76%; }.paper span:nth-child(4) { width: 84%; }.paper span:nth-child(5) { width: 55%; }.scan-line { position: absolute; width: 220px; height: 1px; top: 99px; left: 25%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); filter: drop-shadow(0 0 6px var(--cyan)); transform: rotate(6deg); }
.settings-art { padding: 30px 22px 0; }.setting-row { width: 78%; margin: 0 auto 10px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(12,12,23,.57); }.setting-row span { color: #89869b; font-size: 9px; }.setting-row b { display: inline-flex; align-items: center; gap: 7px; color: #dad6e9; font-size: 9px; font-weight: 500; }.setting-row i { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #aaa4c0; }
.job-art { padding: 46px 27px 0; }.job-art::before { content:''; position:absolute; inset: 20px 17px 0; border-radius: 12px; background: radial-gradient(circle at 50% 24%, rgba(112,86,230,.24), transparent 46%); }.mini-dots, .mini-job-title, .mini-job-track, .mini-job-label, .mini-waves { position: relative; z-index: 1; }.mini-dots { display:flex; gap:4px; }.mini-dots span { width: 5px; height: 5px; border-radius:50%; background:#6a667d; }.mini-dots span:first-child { background:#8df5b2; }.mini-job-title { margin-top:24px; color:#e7e4f3; font-size:10px; font-weight:700; letter-spacing:.04em; }.mini-job-track { margin-top:13px; height:6px; }.mini-job-track span { display:block; height:100%; width:74%; background:linear-gradient(90deg, var(--cyan), var(--lavender)); border-radius:inherit; }.mini-job-label { display:flex; justify-content:space-between; margin-top:8px; color:#a9a4bd; font-size:8px; }.mini-job-label span { color:var(--lavender); }.mini-waves { height:37px; margin-top:17px; display:flex; align-items:center; justify-content:center; gap:4px; }.mini-waves i { display:block; width:3px; border-radius:3px; background:var(--lavender); }.mini-waves i:nth-child(1){height:8px}.mini-waves i:nth-child(2){height:17px}.mini-waves i:nth-child(3){height:26px}.mini-waves i:nth-child(4){height:15px}.mini-waves i:nth-child(5){height:31px}.mini-waves i:nth-child(6){height:19px}.mini-waves i:nth-child(7){height:25px}.mini-waves i:nth-child(8){height:12px}.mini-waves i:nth-child(9){height:7px}

.workflow-section { margin-top: 112px; padding: 108px 0 105px; overflow: hidden; position: relative; background: linear-gradient(120deg, #17132a, #0d0e18 61%, #15102a); }.workflow-section::before { content: ''; position: absolute; width: 680px; height: 680px; top: -350px; right: -200px; border: 1px solid rgba(185,165,255,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(185,165,255,.025), 0 0 0 180px rgba(185,165,255,.018); }
.workflow-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; }
.workflow-copy h2 { margin-top: 17px; }.workflow-copy > p { max-width: 450px; margin: 23px 0 0; color: #aaa6ba; line-height: 1.66; font-size: 16px; }.workflow-points { margin-top: 39px; display: grid; gap: 20px; }.workflow-points div { display: grid; grid-template-columns: 128px 1fr; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid rgba(255,255,255,.1); }.workflow-points b { color:#e2dff0; font-size:12px; }.workflow-points span { color:#8d899f; font-size:12px; line-height:1.5; }

.interactive-demo { position: relative; width: min(430px, 100%); justify-self: end; padding: 12px; border: 1px solid rgba(216,204,255,.36); border-radius: 17px; background: linear-gradient(155deg, rgba(39,32,67,.91), rgba(14,14,25,.96)); box-shadow: 0 37px 80px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04) inset; }.interactive-demo::after { content: ''; position: absolute; width: 220px; height: 220px; bottom: -100px; right: -100px; z-index: -1; background: radial-gradient(circle, rgba(112,86,230,.44), transparent 70%); filter: blur(5px); }
.demo-head { height: 38px; padding: 0 9px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.09); }.demo-brand { font-size: 14px; font-weight: 700; letter-spacing: -.05em; }.demo-brand span { color: var(--lavender); }.demo-status { display: inline-flex; align-items:center; gap:5px; color:#817d92; font-family:var(--mono); font-size:8px; }.demo-status i { width:5px; height:5px; border-radius:50%; background:#91e9b2; box-shadow:0 0 8px #91e9b2; }.demo-body { padding: 22px 15px 16px; }.demo-label { color:#8e86ac; font-family:var(--mono); font-size:9px; letter-spacing:.1em; }.demo-body h3 { margin: 9px 0 18px; color:#f1effa; letter-spacing:-.055em; font-size:27px; line-height:.99; }.demo-field { padding:11px 0; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.08); }.demo-field > span { color:#9995aa; font-size:11px; }.picker { padding:0; display:inline-flex; gap:8px; align-items:center; color:#ded9f0; border:0; background:transparent; font-size:11px; cursor:pointer; }.picker i { border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid var(--lavender); }.estimate { padding: 13px 0; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.08); color:#a29db2; font-size:11px; }.estimate b { padding:3px 7px; color:var(--lavender-bright); font-family:var(--mono); font-size:10px; border-radius:4px; background:rgba(185,165,255,.11); }.demo-button { width:100%; height:43px; margin-top:5px; color:#171326; border:0; border-radius:8px; background:var(--lavender-bright); font-weight:700; font-size:12px; cursor:pointer; transition:transform .2s ease, background .2s ease; }.demo-button:hover { transform:translateY(-2px); background:#ded6ff; }.demo-button:disabled { cursor:default; opacity:.82; transform:none; }.demo-button span { margin-left:4px; font-size:16px; }.demo-progress { max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .35s ease, margin .4s ease; }.demo-progress.active { max-height:88px; opacity:1; margin-top:16px; }.progress-label, .progress-foot { display:flex; justify-content:space-between; align-items:center; }.progress-label { color:#aaa6b9; font-family:var(--mono); font-size:9px; }.progress-label span { color:#d9d4ec; }.progress-label i { display:inline-block; margin-right:5px; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 9px var(--cyan); }.progress-label b { color:var(--lavender); font-weight:500; }.demo-track { height:6px; }.demo-track span { display:block; width:0%; height:100%; background:linear-gradient(90deg, var(--cyan), var(--lavender), #ec90ff); border-radius:inherit; transition:width .35s ease; }.progress-foot { margin-top:7px; color:#807c91; font-size:8px; }.progress-foot button { padding:0; color:var(--lavender); border:0; background:transparent; font-size:8px; cursor:pointer; }.demo-toasts { position:absolute; z-index:2; top:-19px; right:-30px; font-size:10px; color:#e5def7; transform:rotate(3deg); }.demo-toasts div { padding:9px 12px; border:1px solid rgba(185,165,255,.22); border-radius:8px; background:rgba(25,21,42,.9); box-shadow:0 10px 30px rgba(0,0,0,.25); }.demo-toasts span { color:#93eaae; }

.gallery { padding: 112px 0 120px; }.gallery-top { display:grid; grid-template-columns:1fr .76fr; gap:76px; align-items:end; margin-bottom:47px; }.section-heading.compact h2 { font-size:clamp(45px, 4.7vw, 67px); }.gallery-top > p { padding-bottom:6px; }.screenshot-grid { display:grid; grid-template-columns:1.46fr 1fr 1fr; gap:15px; align-items:start; }.shot { margin:0; }.screen-frame { aspect-ratio: 1.34; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:11px; background: linear-gradient(130deg, #211b3a, #0a0a11); box-shadow: 0 23px 50px rgba(0,0,0,.3); }.screen-frame img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; transition:transform .55s ease; }.shot:hover img { transform:scale(1.04); }.shot-main .screen-frame { aspect-ratio:1.36; }.shot figcaption { display:flex; gap:9px; margin-top:13px; color:#b8b5c5; font-size:13px; font-weight:600; }.shot figcaption span { color:var(--faint); font-family:var(--mono); font-size:10px; padding-top:2px; }

.open-source-section { padding: 117px max(28px, calc((100vw - 1180px) / 2)) 109px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:112px; align-items:center; background:#eae4db; color:#18151d; }.source-visual { height:450px; position:relative; display:grid; place-items:center; }.source-blob { position:absolute; border-radius:50%; filter:blur(5px); }.blob-a { width:360px; height:360px; background:radial-gradient(circle at 35% 35%, #f8958d, #b498e7 44%, transparent 69%); }.blob-b { width:340px; height:190px; transform:rotate(-33deg); background:linear-gradient(90deg, transparent, rgba(116,229,242,.8), transparent); filter:blur(29px); }.source-card { position:relative; width:min(430px, 95%); border:1px solid rgba(30,21,38,.15); border-radius:12px; overflow:hidden; background:rgba(255,253,249,.82); box-shadow: 0 27px 50px rgba(72,49,95,.18); transform:rotate(-5deg); }.source-card-top { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid rgba(34,24,43,.11); color:#494050; font-family:var(--mono); font-size:10px; }.source-github { font-size:14px; }.source-card-top i { margin-left:auto; padding:3px 6px; color:#4b8f70; border-radius:4px; background:#e5f3e8; font-family:var(--sans); font-size:8px; font-style:normal; }.source-code { padding:20px 17px; display:grid; gap:10px; color:#716878; font-family:var(--mono); font-size:9px; }.source-code b { display:inline-block; width:20px; color:#b7adba; font-weight:400; }.source-code em { color:#7a52ac; font-style:normal; }.source-card-foot { display:flex; justify-content:space-between; padding:12px 16px; border-top:1px solid rgba(34,24,43,.1); color:#908794; font-family:var(--mono); font-size:9px; }.branch { display:inline-flex; align-items:center; gap:6px; }.branch i { width:6px; height:6px; border-radius:50%; background:#825fbe; }.source-copy { position:relative; z-index:1; }.source-copy h2 { color:#231b29; margin-top:16px; }.source-copy h2 em { color:#6e4d9d; }.source-copy p { max-width: 465px; margin:24px 0 26px; color:#625d67; font-size:16px; line-height:1.65; }.source-copy .eyebrow { color:#7755a9; }.terminal-block { max-width:464px; overflow:hidden; position:relative; margin-bottom:25px; border:1px solid rgba(34,23,44,.14); border-radius:10px; background:#25212d; box-shadow:0 12px 28px rgba(51,34,69,.16); }.terminal-head { display:flex; align-items:center; gap:4px; height:25px; padding:0 10px; background:#302b3b; }.terminal-head span { width:5px; height:5px; border-radius:50%; background:#c1bbc8; }.terminal-head small { margin-left:5px; color:#8d8695; font-family:var(--mono); font-size:7px; }.terminal-block code { display:block; padding:14px 54px 14px 13px; color:#ede9e5; font-family:var(--mono); font-size:10px; }.prompt { color:#b8e7bc; }.terminal-block button { position:absolute; right:9px; bottom:8px; color:#cac2d8; border:0; background:#494151; border-radius:4px; padding:5px 7px; font-size:8px; cursor:pointer; }.button-light { color:#f4eefb; background:#2b1f3a; }.button-light:hover { transform:translateY(-3px); background:#382849; }

.launch-cta { min-height: 475px; padding: 105px 30px 70px; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; }.launch-cta::before { content:''; position:absolute; inset:41px 0 0; border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); background: radial-gradient(ellipse at 50% 60%, rgba(112,86,230,.17), transparent 58%); }.launch-cta > * { position:relative; z-index:1; }.launch-cta h2 { font-size:clamp(52px, 6vw, 84px); margin:15px 0; }.launch-cta p { max-width:440px; margin:0; color:#aaa7ba; font-size:16px; }.centered-actions { margin-top:30px; }.cta-orb { position:absolute; z-index:0; width:180px; height:180px; top:120px; border-radius:50%; filter:blur(17px); }.orb-left { left:-95px; background:radial-gradient(circle, rgba(114,228,255,.35), transparent 70%); }.orb-right { right:-90px; background:radial-gradient(circle, rgba(230,123,250,.37), transparent 70%); }

.site-footer { min-height:133px; display:grid; grid-template-columns:auto 1fr auto auto; gap:25px; align-items:center; border-top:1px solid rgba(255,255,255,.08); }.site-footer > p { margin:0; color:#777388; font-size:12px; }.site-footer .brand-logo img { width:94px; }.footer-links { display:flex; gap:17px; color:#aaa6b8; font-size:11px; }.footer-links a:hover { color:#e6e2f0; }.site-footer small { color:#6e6a7c; font-size:10px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity:1; transform:none; }.delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.23s; }

@keyframes pulse { 50% { transform:scale(.75); opacity:.65; } }
@keyframes bars { to { transform:scaleY(.5); opacity:.56; } }
@keyframes shimmer { 0% { filter:brightness(1); } 50% { filter:brightness(1.37); } 100% { filter:brightness(1); } }

@media (max-width: 980px) {
  .site-header { height:78px; }.nav-links { display:none; }.header-cta { margin-left:auto; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:16px; padding:72px 0 65px; }.hero-copy { max-width:680px; }.hero-visual { height:440px; max-width:650px; width:100%; margin-inline:auto; }
  .social-proof { padding-bottom:65px; }.feature-intro, .gallery-top, .workflow-grid { grid-template-columns:1fr; gap:30px; }.feature-intro { padding-top:75px; }.section-side-copy { max-width:590px; }.benefit-grid { grid-template-columns:1.25fr 1fr; }.benefit-wide { grid-row:span 1; }.benefit-card:last-child { grid-column:1/-1; min-height:400px; }.job-art { width:45%; right:0; left:auto; }.workflow-section { margin-top:83px; }.workflow-grid { gap:56px; }.interactive-demo { justify-self:start; }.gallery { padding:86px 0 90px; }.gallery-top > p { max-width:560px; }.screenshot-grid { grid-template-columns:1.2fr 1fr; }.shot-main { grid-row:span 2; }.shot-main .screen-frame { height:100%; aspect-ratio:auto; }.open-source-section { grid-template-columns:1fr; gap:35px; padding-block:80px; }.source-visual { height:355px; }.source-copy { max-width:600px; margin-inline:auto; }.site-footer { grid-template-columns:auto 1fr; padding:30px 0; }.site-footer > p { text-align:right; }.footer-links, .site-footer small { grid-column:2; justify-self:end; }
}

@media (max-width: 640px) {
  .section-shell, .site-header { width:min(100% - 36px, 1180px); }.site-header { height:72px; }.header-cta { padding:8px 10px; font-size:11px; }.header-cta svg { width:14px; }.brand-logo img { width:98px; }
  .hero { padding-top:56px; }.hero h1 { font-size:clamp(51px, 16vw, 74px); }.hero-lede { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }.hero-note { margin-top:27px; }.hero-visual { height:360px; margin-top:9px; }.hero-visual::before { width:360px; height:250px; }.orbit-one { width:430px; height:188px; }.orbit-two { width:315px; height:138px; }.now-playing-card { width:88%; padding:16px; border-radius:15px; }.book-and-meta { margin-top:16px; gap:12px; }.book-cover { width:81px; }.book-cover strong { font-size:15px; }.book-title { font-size:16px; }.sound-bars { height:37px; }.annotation-a { left:-2px; top:18px; }.annotation-b { right:-5px; bottom:14px; }.floating-annotation { padding:8px 9px; }.floating-annotation small { display:none; }.visual-card-footer { font-size:7px; }.flare-a { right:22px; }.flare-b { left:16px; bottom:50px; }
  .social-proof { align-items:flex-start; flex-direction:column; gap:19px; padding:20px 0 58px; }.proof-tags { justify-content:flex-start; }.proof-statement { font-size:17px; }
  .feature-intro { padding:64px 0 38px; }.section-heading h2, .workflow-copy h2, .source-copy h2 { font-size:clamp(41px, 13vw, 59px); }.section-side-copy p, .gallery-top > p, .workflow-copy > p, .source-copy p { font-size:15px; }
  .benefit-grid { grid-template-columns:1fr; }.benefit-card, .benefit-card:last-child { min-height:406px; }.benefit-card:last-child { grid-column:auto; }.manuscript-art .paper-front { left:37%; }.job-art { width:100%; }
  .workflow-section { margin-top:72px; padding:73px 0; }.workflow-points div { grid-template-columns:1fr; gap:6px; }.interactive-demo { width:100%; }.demo-toasts { display:none; }
  .gallery { padding:75px 0; }.gallery-top { margin-bottom:33px; }.screenshot-grid { grid-template-columns:1fr; gap:29px; }.shot-main { grid-row:auto; }.shot-main .screen-frame { aspect-ratio:1.36; height:auto; }
  .open-source-section { padding:67px 18px; gap:18px; }.source-visual { height:290px; }.source-card { width:87%; }.source-copy h2 { margin-top:14px; }.source-copy p { margin:20px 0 22px; }
  .launch-cta { min-height:430px; padding:86px 17px 53px; }.launch-cta h2 { font-size:clamp(48px, 14vw, 70px); }.launch-cta p { font-size:15px; }
  .site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:17px; padding:28px 0; }.site-footer > p { width:100%; order:2; text-align:left; }.footer-links { order:3; width:100%; justify-content:flex-start; }.site-footer small { order:4; width:100%; }.site-footer .brand { margin-right:auto; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }