:root{
  --ink:#17191f; --mut:#686c75; --line:#e3e5e9; --bg:#fff; --wash:#f2f3f5;
  --acc:#2864ef; --r:14px; --max:1080px; --narrow:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--narrow)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:50}
.nav{position:sticky;top:0;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:20}
.nav-inner{display:flex;align-items:center;gap:28px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;text-decoration:none;color:inherit}
.brand-mark{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 40deg,#111,#555,#111);display:inline-block}
nav[aria-label="Primary"]{display:flex;gap:20px;margin-left:8px}
nav a{color:var(--mut);text-decoration:none;font-size:14.5px}
nav a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:8px 16px;font-size:14px}
.pill{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--mut);background:#fff}
.btn{display:inline-block;text-decoration:none;border-radius:999px;padding:11px 20px;font-weight:600;font-size:15px;border:1px solid transparent}
.btn-dark{background:#111;color:#fff}
.btn-dark:hover{background:#000}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.kicker{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
h1{font-size:clamp(40px,5.4vw,62px);line-height:1.02;letter-spacing:-.03em;margin:0 0 16px}
h2{font-size:30px;letter-spacing:-.02em;margin:0 0 14px}
.lede{font-size:19px;color:#333;max-width:34em;margin:0 0 22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ver{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mut)}
.vdot{width:9px;height:9px;border-radius:50%;background:#22a355;display:inline-block}
.vtag{font:700 12px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Helvetica,Arial,sans-serif;letter-spacing:.08em;color:#3a3d42;background:#edf0ed;border-radius:7px;padding:4px 10px}
.micro{font-size:13.5px;color:var(--mut)}
.code-row{display:flex;align-items:center;gap:10px;margin-top:14px;background:#0f0f10;color:#e8e8e8;border-radius:12px;padding:10px 8px 10px 14px;max-width:420px}
.code-row code{font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy{border:1px solid #333;background:#1d1d1f;color:#fff;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px}
/* app mock */
.shot-photo{margin:0;border:0;background:none;box-shadow:none;overflow:visible;position:relative}
.shot-photo::before{content:"";position:absolute;inset:8% -6% -8% -6%;background:radial-gradient(45% 55% at 30% 30%,rgba(45,113,245,.28),transparent 70%),radial-gradient(45% 55% at 75% 65%,rgba(53,169,255,.20),transparent 70%);filter:blur(38px);pointer-events:none}
.shot-photo img{position:relative;display:block;width:100%;height:auto;border-radius:18px;border:1px solid #d9d9de;box-shadow:0 40px 90px -32px rgba(60,50,140,.4),0 6px 20px rgba(0,0,0,.08)}
.img-ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--wash);border:1px dashed #c4c4c9;border-radius:18px;color:var(--mut);font-size:14px}
/* tour gallery */
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.gal-grid .gfig:first-child{grid-column:1/-1}
.gfig{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .25s ease-out,box-shadow .25s ease-out}
.gfig:hover{border-color:#c9c9cf;box-shadow:0 16px 40px -28px rgba(0,0,0,.35)}
.gfig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.gal-grid .gfig:first-child img{aspect-ratio:21/9}
.gfig:hover img{transform:scale(1.018)}
.gfig figcaption{padding:12px 16px 14px;font-size:13.5px;color:var(--mut);display:flex;gap:10px;align-items:baseline}
.gnum{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6e6e75;flex:none}
.gfig figcaption b{color:var(--ink)}
@media(max-width:680px){
.gal-grid{grid-template-columns:1fr}}
.shot{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -30px rgba(0,0,0,.25)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--wash);font-size:13px;color:var(--mut)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#d5d5d8;display:block}
.shot-bar span{margin-left:8px}
.shot-body{padding:14px;display:grid;gap:8px}
.shot-search{background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;color:#333}
.shot-search em{font-style:normal;color:var(--mut);margin-left:8px;font-size:12.5px}
.row{display:grid;grid-template-columns:12px 1fr auto 38px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.row.sel{border-color:#111;box-shadow:inset 0 0 0 1px #111}
.dot{width:9px;height:9px;border-radius:50%}
.d1{background:#2864ef}.d2{background:#2fa36b}.d3{background:#e09112}.d4{background:#55a8ff}
.row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave{display:flex;align-items:end;gap:2.5px;height:22px}
.wave i{width:3px;height:var(--h);background:#c9c9ce;border-radius:2px;display:block}
.sel .wave i{background:#111}
.time{color:var(--mut);font-variant-numeric:tabular-nums;font-size:13px}
.shot-foot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);padding:2px 4px}
.ae{font-weight:700;color:#111}
.section{padding:64px 0}
.section.alt{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.stats div{border:1px solid var(--line);background:#fff;border-radius:14px;padding:16px}
.stats b{display:block;font-size:24px;letter-spacing:-.02em}
.stats span{font-size:13.5px;color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
.cards article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.num{font-size:12.5px;color:var(--mut);letter-spacing:.08em}
.cards h3{margin:8px 0 8px;font-size:18px}
.cards p{margin:0;color:#3a3d42}
.steps{margin:18px 0;padding:0;list-style:none;display:grid;gap:12px}
.steps li{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px}
.steps li .sbody{display:block;margin-top:5px}
.steps li .sbody>span{display:block;color:#3a3d42}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 8px}
.tags span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600}
.rel{border:1px solid var(--line);background:#fff;border-radius:14px;padding:16px 18px;margin:12px 0}
.rel-head{display:flex;gap:10px;align-items:baseline;margin:0 0 6px}
.rel-head span{color:var(--mut);font-size:14px}
.sub{color:#3a3d42;max-width:44em}
code{font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.demo-box code,.fv-bin code,.feat-copy code{background:#fff}
kbd{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;background:#fff}
/* proof strip */
.proof{list-style:none;display:flex;gap:12px;margin:22px 0 0;padding:0}
.proof li{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;min-width:110px}
.proof b{display:block;font-size:19px;letter-spacing:-.02em}
.proof span{font-size:12.5px;color:var(--mut)}
/* demo */
.demo{background:#fff}
.demo-box{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--wash);margin-top:18px;position:relative;overflow:hidden}
.demo-box::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 15% 0%,rgba(45,113,245,.16),transparent 70%),radial-gradient(440px 220px at 88% 18%,rgba(53,169,255,.14),transparent 70%);pointer-events:none}
.demo-box>*{position:relative}
.demo-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.demo-search:focus-within{outline:2px solid var(--acc);outline-offset:3px}
.demo-search input{flex:1;border:0;outline:0;font-size:16px;background:transparent;color:var(--ink)}
.demo-count{font-size:12.5px;color:var(--mut);white-space:nowrap}
.demo-queries{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.demo-queries button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer;color:#333}
.demo-queries button.on{border-color:#2864ef;box-shadow:inset 0 0 0 1px #2864ef;color:#2054c5;background:#f2f6ff}
#demo-sound{margin-left:auto;color:var(--mut)}
#demo-sound[aria-pressed="false"]{color:#636a76;opacity:1}
.demo-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.demo-rows li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px;cursor:pointer;transition:border-color .25s ease-out,box-shadow .25s ease-out,transform .25s ease-out}
.demo-rows li>button{width:100%;display:flex;align-items:center;gap:10px;border:0;padding:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.demo-rows li>button:focus-visible{outline:2px solid #2864ef;outline-offset:4px;border-radius:5px}
.demo-rows li b{font-weight:600}
.demo-rows li .tag{margin-left:auto;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.demo-rows li.hit{border-color:#111;box-shadow:inset 0 0 0 1px #111}
.demo-rows li.dim{opacity:.55}
/* feature rows */
.feat{display:grid;gap:14px;margin-top:22px}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.feat-row:nth-child(even) .feat-copy{order:2}
.feat-row.ai{border:1px solid transparent;background:linear-gradient(#ffffff,#ffffff) padding-box,linear-gradient(135deg,#55a8ff,#2864ef 60%,#55a8ff) border-box;box-shadow:0 18px 44px -24px rgba(40,100,239,.3)}
.feat-row.ai .feat-vis{background:linear-gradient(180deg,#f1f6ff,#edf4ff)}
.ai-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,#55a8ff,#2864ef);border-radius:6px;padding:2px 7px;vertical-align:2px;margin-left:6px}
.feat-row.ai{transition:transform .3s ease-out;will-change:transform}
.feat-row.ai.tilting{transition:transform .06s linear}
.tilt{transition:transform .3s ease-out;will-change:transform}
.tilt.tilting{transition:transform .06s linear}
.feat-copy h3{margin:8px 0;font-size:21px;letter-spacing:-.015em}
.feat-copy p{margin:0 0 10px;color:#3a3d42}
.payoff{font-weight:600;color:var(--ink)}
.feat-foot{grid-column:1/-1;order:3;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:8px}
.feat-vis{background:var(--wash);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:8px;font-size:13.5px}
.fv-search{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:#333}
.fv-search b{color:var(--mut);font-weight:400;margin-left:8px;font-size:12px}
.fv-row{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:600;transition:border-color .3s ease-out,box-shadow .3s ease-out,transform .3s ease-out,background-color .3s ease-out}
.fv-live .fv-row{cursor:pointer}
.fv-live .fv-row.hit{transform:translateY(-1px)}
.fv-row em{margin-left:auto;font-style:normal;font-weight:400;font-size:11.5px;color:#2f7d4f;border:1px solid #cde6d6;background:#eef7f0;border-radius:999px;padding:2px 9px}
.fv-row.hit{border-color:#2864ef;box-shadow:inset 0 0 0 1px #2864ef}
.fv-crop{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px 12px 14px;overflow:hidden}
.fv-wave{display:flex;align-items:end;gap:3px;height:44px}
.fv-wave i{flex:1;background:#cfcfd4;border-radius:2px;display:block;height:40%}
.fv-wave i:nth-child(3n){height:70%}.fv-wave i:nth-child(4n){height:95%}.fv-wave i:nth-child(5n){height:55%}
.fv-region{position:absolute;left:calc(22% + 12px);right:30%;top:28px;bottom:14px;border-radius:8px;background:rgba(17,17,17,.06)}
.ants{position:absolute;left:calc(22% + 12px);right:30%;top:28px;bottom:14px;pointer-events:none;overflow:visible}
.ants rect{animation:ants 1.1s linear infinite}
@keyframes ants{to{stroke-dashoffset:-18}}
.fv-region span{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;background:#2864ef;color:#fff;border-radius:6px;padding:1px 8px;white-space:nowrap}
.fv-keys{font-size:12.5px;color:var(--mut)}
.fv-tl{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 12px 12px;overflow:hidden}
.fv-ph{position:absolute;top:0;bottom:0;left:38%;width:2px;background:#c8321e;animation:playhead 5s ease-in-out infinite alternate}
@keyframes playhead{from{left:8%}to{left:92%}}
.fv-clip{display:inline-block;background:#111;color:#fff;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;margin-left:12%}
.fv-bin{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--mut)}
.fv-bin b{color:var(--ink)}
.fv-apps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:2px}
.fv-app{display:grid;justify-items:center;gap:5px;font-size:10.5px;color:var(--mut);text-align:center;line-height:1.25}
.fv-app i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:13px;color:#fff}
.fv-app .aa{background:#00005b;color:#9999ff}
.fv-app .ap{background:#00005b;color:#ea77ff}
.fv-app .ar{background:#3a3a3f}
.fv-app .af{background:#1c1c1e}
.fv-app .ac{background:#111}
.fv-proj{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.fv-proj span{color:var(--mut);font-size:12.5px}
.fv-voice{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;align-items:baseline;gap:10px}
.fv-voice span{color:var(--mut);font-size:12px}
.fv-say{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-style:italic;color:#333}
.fv-sliders{display:flex;gap:8px}
.fv-sliders span{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:12.5px;color:var(--mut)}
.fv-gen{display:flex;align-items:center;gap:10px}
.fv-gen b{background:#2864ef;color:#fff;border-radius:999px;padding:7px 18px;font-size:13px}
.fv-gen span{color:var(--mut);font-size:12.5px}
details{border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 18px;margin:10px 0;background:#fff;overflow:hidden}
summary{font-weight:650;cursor:pointer}
.section h1{font-size:clamp(34px,4.5vw,48px);line-height:1.05;letter-spacing:-.025em;margin:0 0 12px}
.section h2{margin-top:30px}
.plain{margin:0 0 14px;padding-left:22px;color:#3a3d42;display:grid;gap:8px}
footer{padding:36px 0 28px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:24px;align-items:start}
.foot-links{display:flex;gap:18px}
.foot-links a{color:var(--mut);text-decoration:none;font-size:14px}
.center{text-align:center;margin-top:18px}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:34px}
.nav-inner{height:auto;min-height:60px;flex-wrap:wrap;gap:10px 20px;padding-top:10px;padding-bottom:10px}
nav[aria-label="Primary"]{order:3;width:100%;margin:0;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0}
nav[aria-label="Primary"]::-webkit-scrollbar{display:none}
.stats{grid-template-columns:repeat(2,1fr)}
.cards{grid-template-columns:1fr}
.feat-row{grid-template-columns:1fr}
.feat-row:nth-child(even) .feat-copy{order:0}
.proof{flex-wrap:wrap}
.hero{padding-top:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  details .a,details summary::after{transition:none}
  .ants rect,.fv-ph{animation:none}
  .hero h1{animation:none;background:none;color:var(--ink);-webkit-text-fill-color:currentcolor}
  .hero-grid>div:first-child>*{opacity:1;animation:none}
  .gfig img{transition:none}
}
/* ---- smoothness: scroll reveals + softer hovers (gated behind .js so no-JS stays visible) ---- */
[id]{scroll-margin-top:76px}
.btn{transition:background-color .25s ease-out,border-color .25s ease-out,color .25s ease-out}
nav[aria-label="Primary"] a,.foot-links a,.rel a{transition:color .2s ease-out}
.demo-queries button,.tags span{transition:border-color .2s ease-out,box-shadow .2s ease-out,color .2s ease-out}
details{transition:border-color .25s ease-out,box-shadow .25s ease-out}
details:hover{border-color:#cfcfd6}
details[open]{border-color:#111;box-shadow:inset 0 0 0 1px #111}
details summary{display:flex;align-items:center;gap:12px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";margin-left:auto;flex:none;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:17px;line-height:1;color:var(--mut);transition:transform .35s ease-out,background-color .25s ease-out,color .25s ease-out,border-color .25s ease-out}
details[open] summary::after{transform:rotate(45deg);background:#111;border-color:#111;color:#fff}
details .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease-out}
details[open] .a{grid-template-rows:1fr}
details .a>p{overflow:hidden;min-height:0;margin:0}
details[open] .a>p{margin:0 10px 12px 0;color:#3a3d42}
.js .feat-row,.js .rel,.js .demo-box,.js .shot,.js .gfig,.js .stats div,.js .tags{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out}
.js .feat-row.ai{transform:none;transition:opacity .55s ease-out,transform .3s ease-out}
.js .tilt{transition:opacity .55s ease-out,transform .3s ease-out}
.js .feat-row.ai.tilting,.js .tilt.tilting{transition:transform .06s linear}
.js .in{opacity:1;transform:none}
/* Hero entrance: staggered rise */
.hero-grid>div:first-child>*{opacity:0;animation:herorise .7s cubic-bezier(.2,.8,.3,1) forwards}
.hero-grid>div:first-child>*:nth-child(1){animation-delay:.05s}
.hero-grid>div:first-child>*:nth-child(2){animation-delay:.14s}
.hero-grid>div:first-child>*:nth-child(4){animation-delay:.5s}
.hero-grid>div:first-child>*:nth-child(5){animation-delay:.6s}
.hero-grid>div:first-child>*:nth-child(6){animation-delay:.68s}
.hero-grid>div:first-child>*:nth-child(7){animation-delay:.78s}
@keyframes herorise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .feat-row,.js .rel,.js .demo-box,.js .shot,.js .gfig,.js .stats div,.js .tags{opacity:1;transform:none;transition:none}
}

/* Small screens */
@media(max-width:600px){
.wrap{padding-left:18px;padding-right:18px}
.nav-inner{gap:10px 14px}
.brand{font-size:15px}
.nav-cta{gap:8px}
.nav-cta .btn{padding:8px 12px;font-size:13px}
.pill{font-size:11.5px;padding:4px 8px}
nav[aria-label="Primary"]{gap:18px}
nav a{font-size:13.5px}
.hero{padding:38px 0 42px}
h1{font-size:clamp(38px,11vw,54px)}
.lede{font-size:18px}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.proof li{min-width:0;padding:9px 10px}
.proof b{font-size:16px}
.proof span{font-size:11.5px;line-height:1.35;display:block}
.section{padding:48px 0}
.section h2{font-size:26px;margin-top:18px}
.feat-row{padding:20px;gap:18px}
.feat-copy h3{font-size:19px}
.feat-vis{padding:12px}
.fv-voice{align-items:flex-start;flex-direction:column;gap:2px}
.fv-apps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
.demo-box{padding:14px}
.demo-search{padding:9px 10px;gap:8px}
.demo-search input{min-width:0;font-size:15px}
.demo-count{font-size:11px}
.demo-queries button{padding:7px 11px}
#demo-sound{margin-left:0}
.demo-rows li{min-width:0;font-size:13px}
.demo-rows li .tag{font-size:10.5px;padding:2px 6px}
.rel{padding:14px}
.rel-head{align-items:flex-start;flex-direction:column;gap:2px}
.foot{flex-direction:column;gap:14px}
.foot-links{flex-wrap:wrap;gap:10px 16px}
.center{text-align:left}
}
@media(max-width:380px){
.wrap{padding-left:14px;padding-right:14px}
.pill{display:none}
.hero-actions .btn{padding:10px 14px;font-size:14px}
.proof li{padding:8px}
.demo-rows li .tag{display:none}
}

:focus-visible{outline:2px solid #2864ef;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .btn-dark:hover{box-shadow:0 5px 16px rgba(0,0,0,.15);transform:translateY(-1px)}
  .btn-ghost:hover{border-color:#bfc0c7;background:#fafafa}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Brand refresh */
:root{
  --ink:#17191f;
  --mut:#686c75;
  --line:#e3e5e9;
  --bg:#fff;
  --wash:#f2f3f5;
  --acc:#2864ef;
}
body{color:var(--ink);letter-spacing:-.006em}
.nav{background:rgba(255,255,255,.92);border-bottom-color:rgba(24,22,40,.08)}
.brand{letter-spacing:-.025em}
.brand-mark{width:26px;height:26px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:50%;background:linear-gradient(145deg,#42b5ff,#2673f0);box-shadow:0 5px 14px rgba(40,100,239,.24)}
.brand-mark i{width:2px;border-radius:2px;background:#fff;display:block}
.brand-mark i:nth-child(1),.brand-mark i:nth-child(4){height:7px;opacity:.78}
.brand-mark i:nth-child(2){height:13px}
.brand-mark i:nth-child(3){height:10px;opacity:.9}
/* Slowly drifting blue light behind the hero content. */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:78px 0 70px;background:linear-gradient(125deg,#15171b 0%,#151b29 38%,#14233d 72%,#162b4b 100%);border-bottom:0;color:#fff}
.hero::before,.hero::after{content:"";position:absolute;z-index:0;pointer-events:none;will-change:transform}
.hero::before{inset:-30%;background:radial-gradient(ellipse at 70% 30%,rgba(40,100,239,.32),transparent 55%),radial-gradient(ellipse at 28% 75%,rgba(85,168,255,.14),transparent 46%);animation:heroBlueDrift 28s ease-in-out infinite alternate}
.hero::after{inset:-20%;background:radial-gradient(ellipse at 78% 70%,rgba(139,193,255,.14),transparent 48%);animation:heroBlueShimmer 38s ease-in-out -12s infinite alternate}
@keyframes heroBlueDrift{from{transform:translate(-4%,-3%) rotate(-5deg) scale(1.02)}to{transform:translate(5%,4%) rotate(6deg) scale(1.1)}}
@keyframes heroBlueShimmer{from{transform:translate(4%,-4%) rotate(7deg) scale(1.05)}to{transform:translate(-5%,5%) rotate(-7deg) scale(1.12)}}
.hero-grid{position:relative;z-index:1;grid-template-columns:1.04fr .96fr;align-items:center;gap:52px}
.hero-grid>div:first-child{max-width:590px}
.hero .ver{color:#d0d6df;font-family:inherit;font-size:11px;font-weight:750;letter-spacing:.12em}
.hero .vdot,.live-dot{width:8px;height:8px;border-radius:50%;background:#8ae2ba;box-shadow:0 0 0 4px rgba(138,226,186,.13);display:inline-block;flex:none}
.hero .vtag{padding:4px 8px;color:#d8e7ff;background:rgba(54,123,245,.16);border:1px solid rgba(125,173,255,.22);letter-spacing:.08em}
.hero .kicker{color:#b8d5ff;font-weight:700}
.section .kicker{color:#2864c9;font-weight:700}
.hero h1{font-size:clamp(48px,5.4vw,70px);line-height:.99;letter-spacing:-.055em;margin-bottom:22px;background:none;animation:none;color:#fff;-webkit-text-fill-color:#fff}
.hero-grid>div:first-child>h1{animation:herorise .7s cubic-bezier(.2,.8,.3,1) .14s both}
.hero-title-accent{color:#87baff;-webkit-text-fill-color:#87baff}
.hero .lede{max-width:31em;color:#d9dde5;font-size:19px;line-height:1.65}
.hero .micro{color:#d0d6df}
.hero-actions{margin-top:26px;gap:10px}
.btn{transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease}
.btn-dark{background:var(--acc);color:#fff;box-shadow:0 8px 22px rgba(40,100,239,.28)}
.btn-dark:hover{background:#1e54d5}
.hero .btn-ghost{border-color:rgba(255,255,255,.2);color:#f7f6fb;background:rgba(255,255,255,.045)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.36)}
.proof{gap:9px;margin-top:26px}
.proof li{flex:1;min-width:0;padding:12px 13px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);border-radius:12px}
.proof b{font-size:15px;color:#fff;letter-spacing:-.015em}
.proof span{display:block;margin-top:3px;color:#dee3eb;font-size:11.5px;line-height:1.35}
.shot-photo::before{inset:5% -8% -10%;background:radial-gradient(48% 54% at 28% 32%,rgba(42,111,243,.42),transparent 70%),radial-gradient(48% 56% at 76% 65%,rgba(62,162,255,.22),transparent 70%);filter:blur(52px)}
.shot-photo img{border-radius:16px;border-color:rgba(255,255,255,.18);box-shadow:0 30px 90px -28px rgba(0,0,0,.8),0 0 0 7px rgba(255,255,255,.035)}
.live-dot{width:7px;height:7px}
.section{padding:76px 0}
.section h2{font-size:clamp(30px,3.3vw,42px);line-height:1.1;letter-spacing:-.045em;margin-top:0;margin-bottom:14px}
.section .kicker{margin-bottom:10px}
.section.alt{background:#f2f3f5;border-color:#e6e7ea}
.demo .wrap.narrow{max-width:850px}
.demo .sub{max-width:52em;color:#686777}
.demo-box{border-color:#e0e5ee;background:linear-gradient(140deg,#f5f8fd 0%,#f7f8fa 52%,#eef5ff 100%);box-shadow:0 24px 70px -48px rgba(40,77,145,.26)}
.demo-box::before{background:radial-gradient(440px 220px at 15% 0%,rgba(45,113,245,.12),transparent 70%),radial-gradient(440px 220px at 88% 18%,rgba(53,169,255,.10),transparent 70%)}
.demo-search{border-color:#e1e4e9;box-shadow:0 2px 8px rgba(28,35,50,.035)}
.demo-queries button.on{border-color:#2864ef;box-shadow:inset 0 0 0 1px #2864ef;color:#2054c5;background:#f2f6ff}
.demo-rows li.hit{border-color:#2864ef;box-shadow:inset 0 0 0 1px #2864ef,0 4px 14px rgba(40,100,239,.1)}
.feat{gap:16px;margin-top:30px}
.feat-row{border-color:#e5e6e9;border-radius:20px;padding:30px;box-shadow:0 10px 32px -28px rgba(24,29,38,.22);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.feat-row:not(.ai):hover{transform:translateY(-2px);border-color:#cfd4dc;box-shadow:0 18px 44px -32px rgba(24,29,38,.27)}
.feat-row.ai{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#65b8ff,#b8d7ff 55%,#2864ef) border-box;box-shadow:0 14px 42px -28px rgba(40,100,239,.26)}
.ai-tag{background:linear-gradient(135deg,#49adff,#2864ef)}
.num{font-weight:750;color:#326bd0;letter-spacing:.075em}
.feat-copy h3{font-size:clamp(20px,2.1vw,24px);line-height:1.2;letter-spacing:-.035em}
.feat-copy p{color:#5c5a67}
.payoff{color:#242232!important}
.feat-vis{border-color:#e4e6e9;border-radius:15px;background:#f5f6f7}
.feat-row.ai .feat-vis{background:linear-gradient(180deg,#f2f7ff,#f4f7fb);border-color:#deebfc}
.gfig{border-radius:18px;box-shadow:0 8px 24px -22px rgba(24,29,38,.32)}
.gfig:hover{border-color:#cfd4dc;box-shadow:0 20px 42px -28px rgba(24,29,38,.28)}
.gfig figcaption{padding:14px 17px 16px;min-height:54px}
.steps{gap:10px;margin-top:24px}
.steps li{border-color:#e5e6e9;border-radius:14px;padding:17px 19px}
.tags span{background:#fff;border-color:#e8e6ef;color:#484653}
.rel{border-color:#e0e5ee;border-radius:18px;background:linear-gradient(140deg,#fff,#f7f9fc);padding:22px 24px;box-shadow:0 10px 30px -26px rgba(45,74,122,.2)}
.rel-head b{color:#2864c9;font-size:18px}
details{border-color:#e8e7ee;border-radius:14px;padding:8px 10px 8px 18px}
details[open]{border-color:#bad1ff;box-shadow:inset 0 0 0 1px #bad1ff;background:#f9fbff}
details[open] summary::after{background:#2864ef;border-color:#2864ef}
footer{background:#15171b;color:#fff;border-top:0;padding:42px 0 28px}
footer .micro{color:#aaa7b8}
.foot-links a{color:#d0cedb}
.foot-links a:hover,footer .center a{color:#a9ceff}
.skip:focus{background:#2864ef}
@media(max-width:900px){
.hero{padding:58px 0 54px}
.hero-grid{grid-template-columns:1fr;gap:34px}
.hero-grid>div:first-child{max-width:700px}
.shot-photo{max-width:780px}
.feat-row{padding:25px}
}
@media(max-width:600px){
.hero{padding:42px 0 42px}
.hero-grid{gap:28px}
.hero h1{font-size:clamp(43px,12vw,60px);line-height:1.01}
.hero .lede{font-size:17px;line-height:1.6}
.hero-actions{margin-top:21px}
.proof{gap:6px;margin-top:23px}
.proof li{padding:9px 8px}
.proof b{font-size:13px}
.proof span{font-size:10px}
.section{padding:54px 0}
.section h2{font-size:30px}
.feat{gap:12px;margin-top:22px}
.feat-row{padding:19px;border-radius:17px}
.feat-row:not(.ai):hover{transform:none}
.gal-grid{gap:12px}
.gal-grid{grid-template-columns:1fr}
.gfig figcaption{padding:11px 13px 13px}
footer{padding-top:34px}
}
@media(max-width:380px){
.hero h1{font-size:clamp(34px,10vw,38px)}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none;transform:none;will-change:auto}
  .hero-grid>div:first-child>h1{opacity:1;animation:none}
}

/* transitions.dev: 21-accordion */
:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}

/* transitions.dev: 24-learn-more-hover */
:root {
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }

@media (prefers-reduced-motion: reduce) {
  .t-learn-chevron, .t-learn-arm { transition: none !important; }
}

/* Interaction skin: app blue, quiet surfaces, and clear touch feedback. */
.t-learn{display:inline-flex;align-items:center;gap:8px}
.t-learn-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:none}
.demo-search input{min-width:0;font-size:16px}
.demo-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--mut);cursor:pointer;transition:background-color 160ms ease,color 160ms ease,transform 160ms ease}
.demo-clear[hidden]{display:none}
.demo-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.demo-clear:active,.demo-queries button:active{transform:scale(.96)}
.demo-queries button{transition:border-color 180ms ease,box-shadow 180ms ease,color 180ms ease,background-color 180ms ease,transform 160ms ease;min-height:36px}
.demo-result{min-height:24px}
.demo-result b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-result .tag{flex-shrink:0}
.t-acc{border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 18px;background:#fff;overflow:hidden;transition:border-color 200ms ease,background-color 200ms ease,box-shadow 200ms ease}
.t-acc[data-open="true"]{border-color:#bad1ff;background:#f9fbff;box-shadow:inset 0 0 0 1px #bad1ff}
.t-acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:58px;padding:14px 0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:650;text-align:left;cursor:pointer}
.t-acc-head:focus-visible{outline-offset:-2px;border-radius:8px}
.t-acc-head>span:first-child{flex:1;min-width:0}
.t-acc-chevron{flex:none;color:var(--mut)}
.t-acc-chevron svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-acc[data-open="true"] .t-acc-chevron{color:var(--acc)}
.t-acc-panel-inner{min-height:0}
.t-acc-panel-inner p{margin:0 0 16px;color:#3a3d42}
@media(hover:hover) and (pointer:fine){
  .demo-clear:hover{color:var(--ink);background:#edf2fc}
  .demo-queries button:not(.on):hover{border-color:#b8c9eb;background:#f8faff}
  .t-acc:hover{border-color:#bad1ff}
}
@media(max-width:480px){
.demo-search{flex-wrap:wrap}
.demo-count{flex-basis:100%;margin-left:22px}
.t-acc{padding:0 14px}
}
@media(pointer:coarse){
  .demo-queries button,.demo-clear{min-height:44px}
  .demo-clear{width:36px}
}
@media(prefers-reduced-motion:reduce){
  .btn:active,.demo-clear:active,.demo-queries button:active{transform:none}
}

/* Product-led tour: full screenshots in a stable, app-like workspace. */
.tour-intro{margin-bottom:0;max-width:42em}
.tour-showcase{margin-top:28px;padding:12px;background:#edf0f5;border:1px solid #dce3ef;border-radius:24px;box-shadow:0 28px 68px -42px rgba(26,56,115,.36)}
.tour-tabs{position:relative;display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px;margin:0 0 10px;scrollbar-width:thin;scrollbar-color:#c4d1e9 transparent}
.tour-tab{flex:1 0 auto;min-height:44px;padding:10px 20px;border:1px solid transparent;border-radius:11px;background:transparent;color:#555f70;font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease,transform 160ms ease}
.tour-tab[aria-selected="true"]{background:var(--acc);color:#fff;box-shadow:0 5px 16px -6px rgba(40,100,239,.45)}
.tour-tab:active{transform:scale(.98)}
.gal-grid.has-tour-tabs{display:block;margin-top:0}
.gal-grid.has-tour-tabs .gfig{border:1px solid #d6deeb;border-radius:16px;background:#fff;box-shadow:none}
.gal-grid.has-tour-tabs .gfig[hidden]{display:none}
.gal-grid.has-tour-tabs .gfig img{display:block;width:100%;height:auto;aspect-ratio:14/10;object-fit:contain;object-position:center;background:#e8ecf2;transition:none}
.gal-grid.has-tour-tabs .gfig:hover img{transform:none}
.gal-grid.has-tour-tabs .gfig figcaption{min-height:64px;margin:0;padding:18px 22px;border-top:1px solid #e1e6ee;background:#fff;font-size:14px;line-height:1.5}
.gal-grid.has-tour-tabs .gnum{display:none}
@keyframes tourViewEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .gal-grid.has-tour-tabs .gfig.is-tour-active{animation:tourViewEnter 260ms cubic-bezier(.22,1,.36,1) both}
}
@media(hover:hover) and (pointer:fine){
  .tour-tab:not([aria-selected="true"]):hover{color:var(--ink);background:#e2e9f4}
}
@media(max-width:600px){
.tour-showcase{padding:8px;border-radius:18px;margin-top:22px}
.tour-tab{padding:9px 14px;font-size:13px}
.gal-grid.has-tour-tabs .gfig{border-radius:12px}
.gal-grid.has-tour-tabs .gfig figcaption{min-height:102px;padding:16px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .tour-tab{transition:none}
  .tour-tab:active{transform:none}
  .gal-grid.has-tour-tabs .gfig.is-tour-active{animation:none}
}


/* Product-led composition: larger preview, clear feature hierarchy. */
.hero-grid{max-width:1220px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
.hero h1{font-size:clamp(48px,4.8vw,64px)}
.hero .lede{max-width:29em;font-size:18px}
.workflow-summary{background:#fff;border-bottom:1px solid var(--line)}
.workflow-summary .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:25px 0}
.workflow-summary .proof li{padding:0;border:0;border-radius:0;background:none}
.workflow-summary .proof b{color:var(--ink);font-size:16px}
.workflow-summary .proof span{color:var(--mut);font-size:13px;line-height:1.5;margin-top:4px}
.feat{gap:24px}
.feat-primary{padding:42px;gap:42px;min-height:300px}
.feat-primary .feat-copy h3{font-size:clamp(26px,3vw,35px);line-height:1.13}
.feat-primary .feat-vis{padding:24px}
.feat-editor{background:transparent;border:0;box-shadow:none;padding:24px 0;border-radius:0}
.feat-editor:not(.ai):hover{transform:none;box-shadow:none;border-color:transparent}
.feat-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.feat-compact{display:block;padding:30px;align-self:stretch}
.feat-compact:nth-child(even) .feat-copy{order:0}
.feat-compact .feat-copy h3{font-size:23px;max-width:18em}
.feat-compact .feat-copy p{margin-bottom:14px}
.feat-compact .feat-copy .payoff{margin-bottom:0;color:var(--ink);font-size:14px}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:32px}
.hero h1{font-size:clamp(48px,7vw,64px)}
.hero .shot-photo{max-width:100%;width:100%}
.feat-primary{padding:30px;gap:24px;min-height:0}
.feat-editor{padding:18px 0}
}
@media(max-width:600px){
.hero h1{font-size:clamp(40px,10.5vw,56px)}
.hero .lede{font-size:17px}
.workflow-summary .proof{gap:16px;padding:22px 0}
.workflow-summary .proof b{font-size:14px}
.workflow-summary .proof span{font-size:12px}
.feat{gap:18px}
.feat-primary{padding:22px;gap:20px}
.feat-primary .feat-copy h3{font-size:27px}
.feat-primary .feat-vis{padding:14px}
.feat-support{grid-template-columns:1fr;gap:18px}
.feat-compact{padding:24px}
}
@media(max-width:380px){
.hero h1{font-size:clamp(34px,10vw,38px)}
.workflow-summary .proof{grid-template-columns:1fr;gap:15px}
}


/* Current native app screenshots: charcoal workspace, blue selections. */
.hero .shot-photo img{background:#000;border-color:#37373c;box-shadow:0 30px 90px -28px rgba(0,0,0,.8),0 0 0 7px rgba(255,255,255,.035)}
.tour-showcase{background:#1e1e20;border-color:#36363b;box-shadow:0 28px 68px -42px rgba(0,0,0,.5)}
.tour-tabs{scrollbar-color:#55555c transparent}
.tour-tab{color:#c9c9d0}
.gal .gfig,.gal-grid.has-tour-tabs .gfig{background:#141416;border-color:#36363b}
.gal .gfig img,.gal-grid.has-tour-tabs .gfig img{aspect-ratio:3014/2372;object-fit:contain;background:#000}
.gal .gfig figcaption,.gal-grid.has-tour-tabs .gfig figcaption{color:#d6d6dc;background:#212123;border-top-color:#36363b}
.gal .gfig figcaption b{color:#f4f4f6}
@media(hover:hover) and (pointer:fine){
  .tour-tab:not([aria-selected="true"]):hover{color:#fff;background:#303034}
}

/* Let the hero screenshot stand alone without the old caption frame. */
.hero .shot-photo{border:0;background:transparent;box-shadow:none;overflow:visible}


/* Current product story: Quick Search, productions, and local audio tools. */
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Helvetica,Arial,sans-serif}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
.brand{white-space:nowrap}
.hero .micro{line-height:1.6}
.hero-local{display:block;margin-top:3px}
.hero .hero-grid>div:first-child{min-width:0}
.hero h1{font-size:clamp(46px,4.6vw,62px);line-height:1.04}
.hero .shot-photo{align-self:center}
.hero-is-paused::before,.hero-is-paused::after{animation-play-state:paused}
.workflow-summary .proof span{max-width:25em}
.quick-section{background:#f7f8fa}
.quick-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.quick-copy .sub{font-size:18px;line-height:1.65;margin:18px 0}
.quick-copy kbd{font-size:14px;color:#20232b}
.quick-benefits{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px;color:#484e59}
.quick-benefits li{position:relative;padding-left:22px}
.quick-benefits li::before{content:"✓";position:absolute;left:0;color:#2864c9;font-size:14px;font-weight:700}
.text-link{display:inline-flex;gap:9px;align-items:center;min-height:44px;color:#2057c8;font-size:14px;font-weight:650;text-decoration-thickness:1px;text-underline-offset:5px}
.text-link span{transition:transform 180ms ease}
.quick-illustration{position:relative;min-width:0;margin:0;padding:44px 0 24px}
.quick-editor{position:absolute;inset:0 0 40px;border:1px solid #dce1e9;border-radius:18px;background:linear-gradient(150deg,#e7ebf2,#f0f2f7);padding:20px}
.quick-editor>span{font-size:10px;font-weight:700;letter-spacing:.12em;color:#69758a}
.edit-tracks{display:grid;gap:14px;margin-top:50px;opacity:.7}
.edit-tracks i{height:34px;border-radius:6px;background:#c2cee2;width:74%}
.edit-tracks i:nth-child(2){width:52%;margin-left:22%;background:#bbc8df}
.edit-tracks i:nth-child(3){width:66%;margin-left:10%;background:#d4dce9}
.quick-panel{position:relative;margin:0 16px;background:#1c1e24;border:1px solid #474e5d;border-radius:17px;padding:14px;box-shadow:0 22px 48px -18px rgba(21,36,67,.5);color:#eeeef4}
.quick-panel-head{display:flex;align-items:center;gap:9px;padding:5px 3px 17px;font-size:14px;min-width:0}
.quick-panel-head>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-lens{font-size:20px;color:#b9c9e5}
.quick-key{font-size:10px;white-space:nowrap;border:1px solid #4b5260;border-radius:5px;padding:3px 6px;color:#cfd7e7}
.quick-result{display:flex;align-items:center;gap:10px;padding:13px 10px;margin-top:7px;border:1px solid transparent;border-radius:10px;background:#262931;min-width:0}
.quick-result.selected{background:#263b65;border-color:#5f87d2}
.quick-result>span:nth-child(2){flex:1;min-width:0}
.quick-result b{display:block;font-size:12px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.quick-result small{display:block;color:#c5cddc;font-size:11px;margin-top:3px}
.quick-play{font-size:21px;color:#d9e5ff}
.quick-bars{display:flex;align-items:center;gap:3px;height:32px;flex:none}
.quick-bars i{width:3px;height:8px;background:#a2bdf2;border-radius:2px}
.quick-bars i:nth-child(2n){height:18px}
.quick-bars i:nth-child(3n){height:28px}
.quick-bars i:nth-child(5){height:23px}
.quick-panel-foot{display:flex;gap:12px;justify-content:space-between;color:#bac5d7;font-size:10px;padding:15px 3px 0}
.quick-illustration figcaption{position:relative;margin-top:34px;text-align:center;font-size:12px;line-height:1.5;color:var(--mut)}
.project-diagram{background:#f2f5fa;border:1px solid #dce4f0;border-radius:16px;padding:24px;min-width:0}
.project-diagram-head{display:grid;gap:5px}
.project-diagram-head>span{font-size:10px;font-weight:700;letter-spacing:.09em;color:#5c6b83}
.project-diagram-head b{font-size:21px;letter-spacing:-.025em}
.project-stages{list-style:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:6px}
.project-stages li{padding:5px 9px;border-radius:7px;background:#e5eaf3;color:#4b5970;font-size:11px}
.project-stages .current{background:#2864ef;color:#fff}
.project-cue{display:grid;gap:9px;text-align:center;padding:20px 12px;background:#fff;border:1px solid #dde4ef;border-radius:11px;font-size:13px;color:#586378}
.project-cue>span:nth-child(2){color:#2864ef;font-size:20px;line-height:1}
.project-cue b{color:#252c38;font-size:14px}
.project-fields{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;font-size:11px;color:#5c6b83}
.library-tools{padding:30px 0 12px}
.library-tools-heading{max-width:42em}
.library-tools-heading h3{font-size:30px;letter-spacing:-.04em;line-height:1.15;margin:0 0 12px}
.library-tools-heading p:last-child{color:#5b616d;margin-top:0}
.library-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:26px 0 0}
.library-tools-grid article{padding-top:18px;border-top:2px solid #d1d9e7}
.tool-label{font-size:12px;font-weight:700;color:#2856a6}
.library-tools-grid h4{font-size:20px;line-height:1.3;letter-spacing:-.025em;margin:11px 0}
.library-tools-grid p{color:#585f6c;font-size:14px;line-height:1.7;margin:0}
.fx-labels{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:10px}
.fx-labels span{font-size:11px;padding:4px 10px;border:1px solid #dce2ec;border-radius:7px;background:#fff;color:#52617a}
.editor-connections{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.editor-connections li{padding-left:18px;border-left:2px solid #c9d8f3;display:grid;gap:3px}
.editor-connections b{font-size:15px;line-height:1.4}
.editor-connections span{font-size:13px;color:#586378}
.voice-feature{background:linear-gradient(145deg,#fff,#f7f4fc)}
.voice-feature .num{color:#7544b2}
.activity-note{display:flex;align-items:flex-start;gap:14px;padding:22px 0;color:#484f5c}
.activity-note b{font-size:15px;color:#222833}
.activity-note p{font-size:14px;line-height:1.65;margin:5px 0 0;max-width:58em}
.activity-mark{width:12px;height:12px;border-radius:50%;border:3px solid #2864ef;background:#dce8ff;flex:none;margin-top:7px}
.demo-rows{min-height:270px;align-content:start}
.demo-rows li.dim{opacity:1;cursor:default;background:#f6f8fc;color:#626d7f;min-height:90px;line-height:1.6;padding:20px}
.demo-rows li:not(.dim):has(button:focus-visible){border-color:var(--acc)}
nav[aria-label="Primary"] a{min-height:36px;display:inline-flex;align-items:center;white-space:nowrap}
nav[aria-label="Primary"] a[aria-current="location"]{color:#2057c8;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.foot-links a{min-height:36px;display:inline-flex;align-items:center}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.text-link:hover span{transform:translate(2px,-2px)}}
@media(max-width:900px){
[id]{scroll-margin-top:124px}
.quick-grid{grid-template-columns:1fr;gap:22px}
.quick-copy{max-width:42em}
.quick-illustration{width:100%;max-width:620px;justify-self:center}
.library-tools-grid{gap:22px}
}
@media(max-width:600px){
.hero h1{font-size:clamp(38px,10vw,56px)}
.hero-actions .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.nav-cta .pill{display:none}
.quick-copy .sub{font-size:17px}
.quick-illustration{padding-top:35px}
.quick-illustration figcaption{font-size:11px;margin-top:30px}
.library-tools{padding-top:16px}
.library-tools-heading h3{font-size:27px}
.library-tools-grid{grid-template-columns:1fr;gap:24px;margin-top:20px}
.library-tools-grid article{padding-top:14px}
.library-tools-grid h4{font-size:21px;margin:8px 0}
.production-feature .feat-copy h3{font-size:27px}
.activity-note{padding:14px 0;gap:11px}
.demo-rows{min-height:268px}
nav[aria-label="Primary"] a,.foot-links a{min-height:44px}
}
@media(max-width:380px){
.hero h1{font-size:clamp(32px,9.8vw,37px)}
.hero-actions{gap:8px}
.hero-actions .btn{font-size:14px;padding:10px 16px}
}
@media(prefers-reduced-motion:reduce){
  .text-link span{transition:none}
  .text-link:hover span{transform:none}
}

.screenshot-link{display:block;border-radius:16px;text-decoration:none}
.screenshot-link:focus-visible{outline-color:#87baff;outline-offset:5px}
.gal .screenshot-link{border-radius:12px 12px 0 0}
.quick-illustration,.project-diagram,.library-tools-grid>article{min-width:0}
@media(pointer:coarse){.text-link{min-height:48px}}

/* transitions.dev: modal open / close for the illustrated Quick Search panel. */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}


/* A quiet, silent walkthrough over a simplified video editor. */
.quick-demo{padding:0;max-width:560px;width:100%;justify-self:center}
.quick-scene{position:relative;aspect-ratio:1.25;background:#e8ecf2;border:1px solid #d9e0ea;border-radius:19px;overflow:hidden;padding:17px}
.video-editor{position:relative;height:100%;background:#f9fafc;border:1px solid #cbd3df;border-radius:10px;overflow:hidden;box-shadow:0 12px 26px -22px #34405a}
.video-editor-bar{height:29px;display:flex;align-items:center;gap:10px;padding:0 10px;border-bottom:1px solid #dce2ec;font-size:9px;color:#667186}
.editor-dots{display:flex;gap:3px}
.editor-dots i{width:4px;height:4px;border-radius:50%;background:#adb6c5}
.editor-time{margin-left:auto;font-variant-numeric:tabular-nums}
.video-editor-workspace{display:flex;gap:9px;padding:12px;height:59%}
.editor-bin{width:19%;border-right:1px solid #e0e5ed;padding-right:10px;display:grid;align-content:start;gap:8px}
.editor-bin i{display:block;height:23px;background:#e5e9f0;border-radius:4px}
.editor-preview{position:relative;flex:1;background:#202731;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.editor-preview>span{position:absolute;bottom:8px;left:10px;font-size:7px;letter-spacing:.12em;color:#ced5df}
.preview-landscape{width:78%;height:73%;background:linear-gradient(160deg,#647386,#8492a2);border-radius:2px;position:relative;overflow:hidden}
.preview-landscape::after{content:"";position:absolute;inset:40% -10% -20%;background:#475463;clip-path:polygon(0 100%,0 60%,35% 5%,55% 45%,75% 0,100% 50%,100% 100%)}
.editor-timeline{position:absolute;inset:auto 12px 13px;height:29%;border-top:1px solid #dce2ec;padding-top:5px}
.timeline-ruler{display:flex;justify-content:space-between;font-size:7px;color:#8a93a3;margin-bottom:9px}
.timeline-video{height:22%;display:flex;gap:3px;margin-bottom:7px}
.timeline-video i{background:#bdc8d9;flex:1;border-radius:3px}
.timeline-video i:nth-child(2){flex:1.5;background:#aebbce}
.timeline-audio{height:25%;background:#eef1f6;border-radius:3px}
.timeline-playhead{position:absolute;top:3px;bottom:0;left:53%;width:1px;background:#647fba}
.timeline-playhead::before{content:"";position:absolute;left:-3px;top:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #647fba}
.timeline-added{position:absolute;left:53%;width:41%;height:24%;border-radius:3px;background:#c8dafa;border:1px solid #93b4ec;white-space:nowrap;overflow:hidden;font-size:7px;padding:2px 5px;color:#365c95;opacity:0;transform:scaleX(.8);transform-origin:left;transition:opacity 180ms ease,transform 250ms ease}
.quick-demo .quick-panel{position:absolute;left:7%;right:7%;top:20%;margin:0;padding:12px;border-radius:14px}
.quick-demo .quick-panel-head{padding-bottom:10px;font-size:12px;min-height:36px}
.quick-demo .quick-result{padding:10px 8px;margin-top:5px;transition:opacity 180ms ease}
.quick-demo .quick-result b{font-size:11px}
.quick-demo .quick-result small{font-size:10px}
.quick-demo .quick-panel-foot{font-size:9px;padding-top:12px}
.quick-typed{min-height:19px}
.quick-typed:empty::before{content:"Search your sounds…";color:#b0baca}
.quick-demo .quick-bars{position:relative;overflow:hidden}
.quick-bars em{position:absolute;top:0;bottom:0;left:0;width:1px;background:#fff;opacity:0}
.shortcut-press{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;transition:opacity 200ms ease}
.shortcut-press kbd{padding:6px 11px;background:#fff;border-color:#bac4d4;color:#5c6678;font-size:12px;box-shadow:0 2px 4px #d4dbe7;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease}
.quick-demo[data-stage="shortcut"] .shortcut-press kbd{background:#2864ef;border-color:#2864ef;color:#fff;transform:translateY(2px);box-shadow:none}
.quick-demo[data-stage="open"] .shortcut-press,.quick-demo[data-stage="typing"] .shortcut-press,.quick-demo[data-stage="results"] .shortcut-press,.quick-demo[data-stage="preview"] .shortcut-press,.quick-demo[data-stage="drag"] .shortcut-press,.quick-demo[data-stage="drop"] .shortcut-press{opacity:0}
.quick-demo[data-stage="open"] .quick-result,.quick-demo[data-stage="typing"] .quick-result{opacity:0}
.quick-demo[data-stage="preview"] .quick-bars em{opacity:1;animation:quickPreviewHead 1200ms linear forwards}
@keyframes quickPreviewHead{to{left:100%}}
.quick-drag-ghost{position:absolute;inset:0;opacity:0;pointer-events:none}
.quick-drag-item{position:absolute;left:13%;top:40%;font-size:10px;color:#fff;background:#2b4773;border:1px solid #6686bb;box-shadow:0 8px 20px #1b294d33;padding:8px 10px;border-radius:7px;white-space:nowrap}
.demo-cursor{position:absolute;right:-9px;bottom:-11px;width:13px;height:18px;background:#fff;clip-path:polygon(0 0,0 90%,36% 68%,60% 100%,76% 91%,52% 60%,94% 57%);filter:drop-shadow(0 1px 1px #222)}
.quick-demo[data-stage="drag"] .quick-drag-ghost{animation:quickDragToEditor 800ms cubic-bezier(.22,1,.36,1) forwards}
@keyframes quickDragToEditor{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}85%,100%{opacity:1;transform:translate(40%,38%)}}
.quick-demo[data-stage="drop"] .timeline-added,.quick-demo[data-stage="done"] .timeline-added{opacity:1;transform:scaleX(1)}
.quick-animation-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:10px 1px 0}
.quick-animation-step{font-size:12px;color:#4f5e75;line-height:1.4}
.quick-animation-controls{display:flex;flex:none;gap:4px}
.quick-animation-controls[hidden]{display:none}
.quick-animation-controls button{border:1px solid #d8dfeb;border-radius:7px;background:#fff;color:#4f5e75;font:inherit;font-size:11px;padding:5px 8px;min-height:32px;cursor:pointer}
.quick-demo figcaption{font-size:11px;margin:12px 0 0;text-align:left;max-width:45em;color:#6b7280;line-height:1.6}
.quick-demo.is-paused .quick-bars em,.quick-demo.is-paused .quick-drag-ghost{animation-play-state:paused}
@media(max-width:600px){
.quick-scene{padding:12px;aspect-ratio:1.2}
.quick-animation-toolbar{align-items:flex-start;min-height:50px}
.quick-animation-step{font-size:11px;max-width:16em;padding-top:5px}
.quick-animation-controls button{min-height:40px}
}
@media(prefers-reduced-motion:reduce){
  .quick-demo .quick-bars em,.quick-demo .quick-drag-ghost{animation:none}
  .shortcut-press,.shortcut-press kbd,.timeline-added,.quick-demo .quick-result{transition:none}
}


/* The header shares the hero background at the top, then becomes a quiet sticky bar. */
body:has(.nav-on-hero){--hero-nav-height:60px}
.nav-on-hero{margin-bottom:calc(-1 * var(--hero-nav-height));background:rgba(19,27,43,.95);border-bottom:1px solid transparent;color:#f4f7fd;transition:background-color 200ms ease,border-color 200ms ease}
.nav-on-hero.nav-at-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-on-hero:not(.nav-at-top){border-bottom-color:rgba(255,255,255,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-on-hero nav a{color:#d4deef}
.nav-on-hero nav a:hover,.nav-on-hero nav a[aria-current="location"]{color:#fff}
.nav-on-hero .pill{color:#d9e5f8;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.045)}
.nav-on-hero .brand-mark{box-shadow:none}
.nav-on-hero .btn-dark{box-shadow:none}
.nav-on-hero :focus-visible{outline-color:#9ac4ff}
.nav-on-hero + main .hero{padding-top:calc(78px + var(--hero-nav-height))}
.nav-blend-marker{position:absolute;left:0;top:0;width:1px;height:24px;pointer-events:none}
@media(max-width:900px){
body:has(.nav-on-hero){--hero-nav-height:116px}
.nav-on-hero + main .hero{padding-top:calc(58px + var(--hero-nav-height))}
}
@media(max-width:600px){
.nav-on-hero + main .hero{padding-top:calc(42px + var(--hero-nav-height))}
}
@media(prefers-reduced-motion:reduce){.nav-on-hero{transition:none}}


/* Editor marks share the native app's shapes, with readable labels beside them. */
.editor-connections{gap:16px}
.editor-connections li{display:flex;align-items:center;gap:14px;border:0;padding-left:0}
.editor-app-icon{display:block;width:32px;height:32px;flex:none;object-fit:contain}
.editor-connections li>div{display:grid;gap:3px;min-width:0}
.editor-connections b{font-size:15px}
.editor-connections span{font-size:13px;line-height:1.5}
@media(max-width:600px){
.editor-connections{gap:18px}
.editor-connections li{gap:13px}}


/* Centered hero with a larger app view emerging from the section edge. */
.hero .hero-grid{display:flex;flex-direction:column;gap:0;max-width:1220px;text-align:center}
.hero .hero-grid>div:first-child{width:100%;max-width:1100px;margin:0 auto}
.hero .ver{justify-content:center}
.hero h1{font-size:clamp(46px,4.5vw,68px);line-height:1.06;letter-spacing:-.05em;margin:0 auto 22px;max-width:1100px}
.hero-title-break{display:none}
.hero .lede{max-width:660px;margin:0 auto 24px;font-size:19px;line-height:1.65}
.hero-actions{justify-content:center;margin-top:24px}
.hero .micro{margin:15px auto 0}
.hero .shot-photo{position:relative;flex:none;width:100%;max-width:1080px;aspect-ratio:3014/1186;margin:52px auto 0;overflow:visible;align-self:center}
.hero .shot-photo .screenshot-link{position:absolute;inset:0;border-radius:18px 18px 0 0}
.hero .shot-photo img{position:absolute;top:0;left:0;width:100%;height:auto;border-radius:18px 18px 0 0;box-shadow:0 22px 80px -25px rgba(0,0,0,.65),0 0 0 7px rgba(255,255,255,.035)}
.hero .shot-photo::before{inset:-12% -6% -40%;pointer-events:none}
.nav-on-hero + main .hero{padding-top:calc(80px + var(--hero-nav-height));padding-bottom:0}
@media(max-width:900px){
.nav-on-hero + main .hero{padding-top:calc(58px + var(--hero-nav-height))}
.hero h1{font-size:clamp(46px,6.2vw,62px);max-width:760px}
.hero-title-break{display:block}
.hero .shot-photo{max-width:100%;margin-top:42px}
}
@media(max-width:600px){
.nav-on-hero + main .hero{padding-top:calc(40px + var(--hero-nav-height))}
.hero h1{font-size:clamp(38px,10vw,56px);margin-bottom:19px}
.hero .lede{font-size:17px;line-height:1.6;max-width:34em}
.hero-actions{margin-top:20px}
.hero .kicker{font-size:11px}
.hero .micro{font-size:12px}
.hero .shot-photo{margin-top:34px}
.hero .shot-photo img{border-radius:12px 12px 0 0;box-shadow:0 15px 45px -20px rgba(0,0,0,.65),0 0 0 4px rgba(255,255,255,.035)}
}
@media(max-width:380px){
.hero h1{font-size:clamp(32px,9.8vw,37px)}}


/* A larger centered stage makes the shortcut and handoff legible. */
.quick-section .quick-grid{display:flex;flex-direction:column;gap:34px;align-items:center}
.quick-section .quick-copy{width:100%;max-width:960px;text-align:center}
.quick-copy h2{font-size:clamp(32px,3.4vw,46px);line-height:1.12}
.quick-copy .sub{max-width:720px;margin:18px auto;font-size:18px}
.quick-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:940px;margin:26px auto 20px;font-size:14px}
.quick-benefits li{padding-left:0}
.quick-benefits li::before{position:static;display:inline-block;margin-right:7px}
.quick-copy .micro{max-width:720px;margin:0 auto 10px}
.quick-section .quick-demo{max-width:1000px;width:100%;padding:0}
.quick-demo .quick-scene{aspect-ratio:16/9;padding:24px;border-radius:22px;background:#e9edf3}
.quick-demo .video-editor{border-radius:12px}
.quick-demo .video-editor-bar{height:36px;padding:0 14px;font-size:11px}
.quick-demo .editor-dots{gap:5px}
.quick-demo .editor-dots i{width:5px;height:5px}
.quick-demo .video-editor-workspace{height:58%;padding:16px;gap:14px}
.quick-demo .editor-bin{width:18%;gap:11px;padding-right:14px}
.quick-demo .editor-bin i{height:36px;background:linear-gradient(130deg,#dce3ec,#e7ecf3)}
.quick-demo .editor-preview{border-radius:7px;background:#28313d}
.quick-demo .editor-preview>span{font-size:9px;bottom:11px;left:13px}
.quick-demo .preview-landscape{width:72%;height:78%;background:linear-gradient(155deg,#657b90,#9eafbd)}
.quick-demo .editor-timeline{left:16px;right:16px;bottom:18px;height:29%;padding-top:9px}
.quick-demo .timeline-ruler{font-size:9px;margin-bottom:12px}
.quick-demo .timeline-video{margin-bottom:9px}
.quick-demo .timeline-audio{height:27%}
.quick-demo .timeline-added{height:26%;font-size:10px;padding:5px 9px;display:flex;align-items:center;gap:8px}
.timeline-added i{display:block;flex:1;height:12px;opacity:.55;background:repeating-linear-gradient(90deg,#4f76af 0 2px,transparent 2px 4px);clip-path:polygon(0 40%,10% 25%,18% 45%,25% 0,33% 30%,50% 15%,60% 45%,75% 5%,85% 30%,100% 42%,100% 58%,85% 70%,75% 95%,60% 55%,50% 85%,33% 70%,25% 100%,18% 55%,10% 75%,0 60%)}
.quick-demo .quick-panel{left:28%;right:28%;top:18%;padding:16px;border-radius:17px;--modal-open-dur:340ms;--modal-close-dur:220ms;box-shadow:0 20px 55px -16px rgba(19,31,56,.6)}
.quick-demo .quick-panel-head{font-size:14px;padding-bottom:14px;min-height:43px}
.quick-demo .quick-key{font-size:10px}
.quick-demo .quick-result{padding:13px 11px;gap:11px;margin-top:7px}
.quick-demo .quick-result b{font-size:13px}
.quick-demo .quick-result small{font-size:11px;margin-top:4px}
.quick-demo .quick-panel-foot{font-size:10px;gap:10px;padding-top:17px}
.quick-demo .quick-play{width:17px;text-align:center;font-size:21px}
.quick-demo .quick-bars{gap:3px}
.quick-demo .quick-bars i{width:3px}
.quick-demo[data-stage="open"] .quick-typed::after,.quick-demo[data-stage="typing"] .quick-typed::after{content:"";display:inline-block;width:1px;height:14px;margin-left:3px;background:#9db8ed;vertical-align:-2px;animation:quickTypingCaret 900ms steps(1,end) infinite}
@keyframes quickTypingCaret{50%{opacity:0}}
.quick-demo[data-stage="preview"] .quick-bars em{animation-duration:1500ms}
.quick-demo[data-stage="preview"] .quick-result.selected{border-color:#8facdf;background:#294471}
.quick-demo .shortcut-press{bottom:24px;gap:8px}
.quick-demo .shortcut-press kbd{font-size:14px;padding:8px 14px;border-radius:8px}
.quick-demo .quick-drag-item{font-size:12px;padding:10px 13px;border-radius:8px}
@keyframes quickDragToEditor{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%,100%{opacity:1;transform:translate(var(--quick-drag-x,0px),var(--quick-drag-y,100px))}}
.quick-demo[data-stage="drag"] .quick-drag-ghost{animation-duration:1000ms}
.quick-demo[data-stage="drag"] .timeline-audio{outline:1px dashed #8ba9d7;outline-offset:2px;background:#e4edfc}
.quick-demo .quick-animation-toolbar{min-height:54px;padding:12px 2px 0}
.quick-demo .quick-animation-step{font-size:13px;max-width:none}
.quick-demo .quick-animation-controls button{font-size:12px;min-height:36px;padding:6px 11px}
.quick-demo figcaption{max-width:none;text-align:center;font-size:11px;margin-top:12px}
.quick-demo.is-paused .quick-typed::after{animation-play-state:paused}
@media(max-width:900px){
.quick-copy h2 span{display:block}
.quick-benefits{gap:16px;font-size:13px}
}
@media(max-width:600px){
.quick-section .quick-grid{gap:24px}
.quick-copy .sub{font-size:17px}
.quick-benefits{grid-template-columns:1fr;gap:11px;margin:22px auto 18px;font-size:14px}
.quick-copy .micro{font-size:12px;max-width:30em}
}
@media(prefers-reduced-motion:reduce){.quick-demo .quick-typed::after{animation:none}}


/* Fine layout pass: intentional hierarchy and dedicated product surfaces. */
.hero .ver{margin-bottom:20px}
.hero .kicker{margin-bottom:16px;letter-spacing:.09em;font-size:11px}
.hero h1{max-width:900px;font-size:clamp(48px,5.2vw,74px);line-height:1.02;letter-spacing:-.055em;margin-bottom:24px}
.hero-title-main,.hero-title-accent{display:block}
.hero-title-accent{margin-top:5px}
.hero .lede{max-width:620px;font-size:19px;line-height:1.6}
.hero-actions{gap:12px;margin-top:25px}
.hero .hero-requirements{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:19px;color:#d0d9e8;font-size:12px}
.hero-requirements>span+span{padding-left:20px;border-left:1px solid #ffffff30}
.hero .shot-photo{margin-top:48px}
.workflow-summary{background:linear-gradient(180deg,#fff,#f6f8fc);border-bottom:1px solid #e1e7f1}
.workflow-summary .proof{gap:0;padding:30px 0}
.workflow-summary .proof li{padding:0 25px;min-width:0}
.workflow-summary .proof li:first-child{padding-left:0}
.workflow-summary .proof li:last-child{padding-right:0}
.workflow-summary .proof li+li{border-left:1px solid #dfe6f1}
.workflow-summary .proof li>a{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;min-height:60px;border-radius:10px}
.workflow-summary .proof .proof-symbol{margin:0;display:flex;align-items:center;justify-content:center;width:43px;height:43px;flex:none;border:1px solid #d1e0f8;background:linear-gradient(145deg,#f1f6ff,#e5efff);border-radius:13px;color:#2864d1}
.proof-symbol svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.workflow-summary .proof .proof-copy{margin:0;min-width:0}
.workflow-summary .proof b{font-size:15px;line-height:1.4;letter-spacing:-.02em}
.workflow-summary .proof .proof-copy>span{font-size:12px;color:#647085;line-height:1.5;margin-top:4px}
.workflow-summary .proof .proof-arrow{margin:0 0 0 auto;font-size:15px;color:#8393ae;transition:transform 180ms ease,color 180ms ease}
.quick-section .quick-grid{gap:36px}
.quick-section .quick-copy{max-width:870px}
.quick-copy h2{font-size:clamp(34px,3.8vw,50px);letter-spacing:-.05em;line-height:1.08;margin-bottom:24px}
.quick-copy h2 span{display:block;margin-top:3px}
.quick-shortcut{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 auto 20px}
.quick-shortcut kbd{font-size:17px;padding:7px 13px;border-radius:8px;border-color:#cbd5e5;background:#fff;box-shadow:0 2px 5px #d9e1ed55}
.quick-shortcut>span{font-size:12px;color:#647085;margin-left:6px}
.quick-copy .sub{max-width:590px;font-size:18px;line-height:1.65;margin:0 auto}
.quick-benefits{max-width:810px;margin:27px auto 18px;gap:24px}
.quick-benefits li{padding:0;text-align:center}
.quick-benefits li::before{content:none}
.quick-benefits b{display:block;color:#252f3f;font-size:14px;font-weight:650}
.quick-benefits li>span{display:block;color:#647085;font-size:12px;margin-top:5px}
.quick-copy .micro{font-size:11px;line-height:1.6;max-width:580px;margin:0 auto}
.feat .feat-editor{display:grid;grid-template-columns:1fr;gap:27px;padding:38px;border:1px solid #e0e5ee;border-radius:22px;background:#fff;box-shadow:0 12px 32px -28px #172d5840}
.feat .feat-editor .feat-copy{order:0;text-align:center;max-width:660px;margin:0 auto}
.feat-editor .feat-copy h3{font-size:32px;line-height:1.15;letter-spacing:-.04em;margin:10px 0 13px}
.feat-editor .feat-copy p{font-size:15px;margin:0}
.feat-editor .editor-connections{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.feat-editor .editor-connections li{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;gap:15px;padding:23px 12px 19px;background:#f7f9fc;border:1px solid #e4e9f1;border-radius:14px;min-width:0}
.feat-editor .editor-app-icon{width:39px;height:39px}
.feat-editor .editor-connections li>div{gap:7px}
.feat-editor .editor-connections b{font-size:13px;line-height:1.4}
.feat-editor .editor-connections span{font-size:11px;line-height:1.5;color:#647085}
.editor-note{text-align:center;max-width:680px;margin:0 auto;font-size:11px;color:#69758a}
.feat .voice-spotlight{padding:42px;gap:40px;border-color:#e2dcef;background:linear-gradient(145deg,#fff 20%,#f8f5fc);border-radius:22px}
.feat .voice-spotlight .feat-copy{order:0}
.voice-spotlight .num{color:#7546ad}
.voice-spotlight .feat-copy h3{font-size:clamp(28px,3vw,36px);line-height:1.13;margin:12px 0 17px}
.voice-spotlight .feat-copy p{font-size:15px;line-height:1.7}
.voice-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.voice-facts span{font-size:11px;color:#684787;background:#f0eaf8;border:1px solid #e5dcf1;border-radius:7px;padding:5px 9px}
.voice-studio{margin:0;padding:21px;min-width:0;border-radius:17px;border:1px solid #484052;background:#212026;color:#ece9f3;box-shadow:0 20px 42px -22px #32204566}
.voice-studio-head{display:flex;align-items:center;gap:11px}
.voice-studio-head>div{display:grid;gap:3px}
.voice-studio-head b{font-size:14px}
.voice-studio-head>div>span{font-size:10px;color:#c1bace}
.voice-emblem{display:flex;align-items:center;justify-content:center;gap:3px;flex:none;width:36px;height:36px;background:linear-gradient(135deg,#7651ce,#b96ab5);border-radius:50%}
.voice-emblem i{display:block;width:2px;height:9px;background:#fff;border-radius:2px}
.voice-emblem i:nth-child(2n){height:17px}
.voice-emblem i:nth-child(3){height:22px}
.voice-private{font-size:9px;padding:4px 7px;border:1px solid #554567;border-radius:6px;color:#d5bce9;margin-left:auto}
.voice-script{margin:21px 0 17px;padding:15px;border:1px solid #433e4c;border-radius:10px;background:#29272f}
.voice-script>span{font-size:9px;letter-spacing:.09em;color:#b5a9c7;font-weight:650}
.voice-script p{font-size:17px;line-height:1.5;margin:11px 0 5px;color:#f1edf7}
.voice-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.voice-settings>span{padding:9px;background:#2b2832;border:1px solid #433c4f;border-radius:8px;display:grid;gap:5px}
.voice-settings small{font-size:9px;color:#b9aec9}
.voice-settings b{font-size:11px;font-weight:600}
.voice-output{display:grid;justify-items:center;gap:13px;margin-top:19px;padding:15px 5px 0;border-top:1px solid #433d4e}
.voice-output-wave{display:flex;align-items:center;gap:5px;height:34px}
.voice-output-wave i{width:3px;height:9px;border-radius:2px;background:#ae8ae0}
.voice-output-wave i:nth-child(2n){height:19px}
.voice-output-wave i:nth-child(3n){height:30px}
.voice-output>span:last-child{font-size:10px;color:#cfc2df;text-align:center}
.voice-studio figcaption{font-size:9px;color:#a99bb9;margin-top:14px;text-align:center}
.feat .sources-feature{background:transparent;border:0;border-radius:0;box-shadow:none;padding:24px 0;gap:40px}
.feat .sources-feature .feat-copy{order:0}
.sources-feature .feat-copy h3{font-size:26px;line-height:1.2}
.sources-note{padding:25px;border-left:2px solid #9bbcf2;background:#eaf0f9;color:#50617a;border-radius:0 13px 13px 0}
.sources-note b{color:#30435f;font-size:16px}
.sources-note p{font-size:14px;line-height:1.7;margin:8px 0 0}
@media(hover:hover) and (pointer:fine){
  .workflow-summary .proof a:hover .proof-arrow{transform:translate(2px,-2px);color:#2864ef}
  .feat .feat-editor:not(.ai):hover{transform:none;border-color:#d2ddea;box-shadow:0 12px 32px -28px #172d5840}
  .feat .sources-feature:not(.ai):hover{transform:none;border-color:transparent;box-shadow:none}
}
@media(max-width:900px){
.workflow-summary .proof li{padding:0 15px}
.workflow-summary .proof li>a{gap:10px;align-items:flex-start}
.workflow-summary .proof .proof-arrow{display:none}
.workflow-summary .proof .proof-symbol{width:35px;height:35px;border-radius:10px}
.workflow-summary .proof b{font-size:13px}
.feat .voice-spotlight{grid-template-columns:1fr;padding:32px;gap:27px}
.feat-editor .editor-connections{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
.hero h1{font-size:clamp(38px,10.5vw,56px);line-height:1.05;margin-bottom:22px}
.hero .kicker{font-size:10px;letter-spacing:.07em}
.hero .lede{font-size:17px;max-width:30em}
.hero .hero-requirements{gap:7px;font-size:11px;flex-direction:column}
.hero-requirements>span+span{border:0;padding:0}
.hero .shot-photo{margin-top:34px}
.workflow-summary .proof{grid-template-columns:1fr;padding:18px 0;gap:0}
.workflow-summary .proof li,.workflow-summary .proof li:first-child,.workflow-summary .proof li:last-child{padding:15px 0}
.workflow-summary .proof li+li{border-left:0;border-top:1px solid #e1e7f1}
.workflow-summary .proof li>a{align-items:center;min-height:44px;gap:14px}
.workflow-summary .proof .proof-symbol{width:40px;height:40px}
.workflow-summary .proof b{font-size:15px}
.workflow-summary .proof .proof-arrow{display:block}
.quick-section .quick-grid{gap:26px}
.quick-copy h2{font-size:32px;margin-bottom:21px}
.quick-shortcut{margin-bottom:17px}
.quick-shortcut kbd{font-size:15px;padding:6px 11px}
.quick-copy .sub{font-size:17px;max-width:29em}
.quick-benefits{grid-template-columns:1fr;gap:14px;margin:24px auto 19px}
.quick-benefits li{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.quick-benefits b{font-size:13px}
.quick-benefits li>span{margin:0;font-size:12px}
.quick-copy .micro{font-size:11px;max-width:29em}
.feat .feat-editor{padding:24px 19px;gap:23px;border-radius:18px}
.feat-editor .feat-copy h3{font-size:27px}
.feat-editor .editor-connections{grid-template-columns:1fr;gap:9px}
.feat-editor .editor-connections li{flex-direction:row;text-align:left;padding:14px;gap:15px;align-items:center}
.feat-editor .editor-app-icon{width:33px;height:33px}
.feat-editor .editor-connections li>div{gap:4px}
.feat-editor .editor-connections b{font-size:14px}
.feat-editor .editor-connections span{font-size:12px}
.feat .voice-spotlight{padding:24px 19px;border-radius:18px;gap:25px}
.voice-spotlight .feat-copy h3{font-size:29px}
.voice-facts{gap:6px;margin-top:19px}
.feat .sources-feature{grid-template-columns:1fr;gap:16px;padding:18px 0}
.sources-note{padding:20px}
}
@media(max-width:380px){
.hero h1{font-size:clamp(32px,9.8vw,38px)}}
@media(prefers-reduced-motion:reduce){.workflow-summary .proof .proof-arrow{transition:none;transform:none!important}}


/* Refined choreography: edit, summon, audition, drag, continue. */
.quick-demo .quick-scene{background:linear-gradient(145deg,#edf1f7,#e4eaf3);box-shadow:inset 0 1px 0 #fff,0 20px 60px -45px #3e537b55}
.editor-sequence-name{color:#9aa5b6;margin-left:3px}
.media-bin-title{font-size:8px;font-weight:700;letter-spacing:.12em;color:#8a97ab;margin-bottom:1px}
.quick-demo .editor-bin{gap:10px;align-content:start}
.media-thumbnail{display:grid;gap:4px;min-width:0}
.quick-demo .media-thumbnail i{position:relative;height:39px;margin:0;border-radius:4px;background:linear-gradient(145deg,#7c91a6,#b0bdc9);overflow:hidden}
.quick-demo .media-thumbnail i::after{content:"";position:absolute;inset:35% -5% -5%;background:#516679;clip-path:polygon(0 100%,0 55%,28% 13%,52% 48%,75% 5%,100% 50%,100% 100%)}
.quick-demo .media-thumbnail:nth-of-type(3) i{background:linear-gradient(30deg,#60788f,#bac6cf)}
.quick-demo .media-thumbnail:nth-of-type(4) i{background:linear-gradient(135deg,#96aab9,#6b8296)}
.media-thumbnail small{font-size:8px;color:#7f8da2;line-height:1.2}
.quick-demo .editor-preview{background:#242d39}
.quick-demo .preview-landscape{position:relative;background:linear-gradient(180deg,#8ea4b6 0%,#b8c8d2 64%,#829bad 65%,#617f96 100%);overflow:hidden;box-shadow:0 0 0 1px #ffffff08}
.quick-demo .preview-landscape::after{inset:42% -8% -20%;background:#466277;opacity:.85;clip-path:polygon(0 100%,0 30%,25% 5%,48% 52%,70% 25%,100% 62%,100% 100%)}
.landscape-sun{position:absolute;left:68%;top:17%;width:22px;height:22px;border-radius:50%;background:#d8e2e8;opacity:.8;box-shadow:0 0 20px #e7eff233}
.landscape-ridge{position:absolute;inset:40% -8% 10%;background:#718da1;clip-path:polygon(0 100%,0 60%,20% 12%,38% 50%,58% 0,83% 65%,100% 15%,100% 100%)}
.landscape-water{position:absolute;left:0;right:0;bottom:0;height:23%;opacity:.2;background:repeating-linear-gradient(0deg,#d2e1ec 0 1px,transparent 1px 6px)}
.monitor-play-state{position:absolute;right:12px;bottom:9px;font-size:10px;color:#c8d4e2;opacity:.6}
.quick-demo .timeline-video i{font-style:normal;font-size:8px;color:#5d7191;padding:5px 8px;white-space:nowrap;overflow:hidden;display:flex;align-items:center;background:linear-gradient(125deg,#bdcbe0,#cad5e5);border:1px solid #adbbd1}
.quick-demo .timeline-video i:nth-child(2){background:linear-gradient(125deg,#b4c3d9,#c4d0e2)}
.quick-panel-brand{display:flex;align-items:center;gap:7px;padding-bottom:12px;font-size:9px;color:#a9b7cc}
.quick-panel-brand>span:last-child{margin-left:auto;color:#8596b0;font-size:8px}
.mini-library-mark{display:inline-flex;align-items:center;justify-content:center;background:#3276e4;color:#fff;width:17px;height:17px;border-radius:50%;font-size:12px}
.quick-demo .quick-panel-head{border:1px solid #465267;background:#151b26;border-radius:8px;padding:9px 10px;margin-bottom:10px;min-height:39px}
.quick-demo .quick-panel{background:linear-gradient(150deg,#202733,#1b202a);border-color:#536075;transform-origin:50% 15%;--modal-open-dur:420ms;--modal-close-dur:220ms;--modal-ease:cubic-bezier(.18,1,.28,1)}
.quick-demo .quick-result{transition:opacity 180ms ease,background-color 180ms ease,border-color 180ms ease;position:relative}
.quick-demo[data-stage="results"] .quick-result{animation:quickResultsArrive 300ms cubic-bezier(.22,1,.36,1) both}
.quick-demo[data-stage="results"] .quick-result:nth-of-type(4){animation-delay:70ms}
@keyframes quickResultsArrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.quick-demo .quick-bars{width:72px;height:32px;display:block;flex:none}
.sound-wave{display:block;width:100%;height:100%;fill:none;stroke:#a6bee8;stroke-width:1.6;stroke-linecap:round}
.quick-demo[data-stage="preview"] .sound-wave{stroke:#d4e6ff}
.quick-demo[data-stage="preview"] .quick-bars em{height:26px;top:3px;background:#fff;box-shadow:0 0 6px #b9d5ff88;animation-duration:1800ms}
.preview-key-hint{border-radius:4px;padding:2px 4px;margin:-2px -4px;transition:background-color 160ms ease,color 160ms ease}
.quick-demo[data-stage="preview"] .preview-key-hint{background:#3b5277;color:#edf4ff}
.walkthrough-cursor{position:absolute;left:0;top:0;z-index:5;width:1px;height:1px;pointer-events:none;opacity:0;transform:translate(var(--quick-cursor-x,50px),var(--quick-cursor-y,50px));transition:transform 650ms cubic-bezier(.22,1,.36,1),opacity 180ms ease}
.walkthrough-cursor>.demo-cursor{right:auto;bottom:auto;left:0;top:0;width:14px;height:20px;background:#f8fbff;filter:drop-shadow(0 1px 2px #182a4a80)}
.quick-demo[data-stage="aim"] .walkthrough-cursor,.quick-demo[data-stage="preview"] .walkthrough-cursor{opacity:1}
.cursor-click-ring{position:absolute;width:26px;height:26px;border-radius:50%;border:1px solid #a9ceff;left:-13px;top:-13px;opacity:0}
.quick-demo[data-stage="preview"] .cursor-click-ring{animation:quickClickCue 500ms ease-out}
@keyframes quickClickCue{0%{opacity:.8;transform:scale(.25)}100%{opacity:0;transform:scale(1.3)}}
.quick-demo[data-stage="drag"] .quick-drag-ghost{animation-duration:1200ms}
.quick-demo .quick-drag-item{background:linear-gradient(145deg,#345789,#253c64);border-color:#95b8e8;display:flex;align-items:center;gap:7px;box-shadow:0 13px 24px -6px #20325255}
.ghost-sound-mark{font-size:16px;color:#bedaff}
@keyframes quickDragToEditor{0%{opacity:0;transform:translate(0,0) scale(.98)}12%{opacity:1;transform:translate(0,0) scale(1.02)}55%{opacity:1;transform:translate(var(--quick-drag-mid-x,40px),var(--quick-drag-mid-y,80px)) scale(1.01)}100%{opacity:1;transform:translate(var(--quick-drag-x,0px),var(--quick-drag-y,100px)) scale(1)}}
.quick-demo[data-stage="drop"] .timeline-added{animation:quickClipLand 420ms cubic-bezier(.22,1,.36,1) both}
@keyframes quickClipLand{from{opacity:0;transform:translateY(-3px) scaleX(.96)}to{opacity:1;transform:none}}
.quick-demo[data-stage="drop"] .timeline-audio{background:#e4edfc}
.quick-demo[data-stage="done"] .timeline-playhead{animation:quickTimelineContinue 2400ms linear both}
.quick-demo[data-stage="done"] .preview-landscape{animation:quickFootageContinue 2400ms linear both}
@keyframes quickTimelineContinue{from{transform:translateX(0)}to{transform:translateX(var(--quick-playhead-travel,120px))}}
@keyframes quickFootageContinue{from{transform:scale(1)}to{transform:scale(1.025) translateX(-.6%)}}
.quick-demo[data-stage="done"] .monitor-play-state{color:#e5eef9;opacity:1}
.quick-demo[data-stage="drop"] .shortcut-press,.quick-demo[data-stage="done"] .shortcut-press{opacity:0}
.quick-demo .quick-animation-toolbar{padding-top:14px;align-items:center}
.quick-demo .quick-animation-step{color:#4f6482;font-weight:500}
.quick-demo .quick-animation-controls button{background:#f8faff;border-color:#d1dceb;border-radius:8px}
.quick-demo.is-paused .quick-result,.quick-demo.is-paused .cursor-click-ring,.quick-demo.is-paused .timeline-added,.quick-demo.is-paused .timeline-playhead,.quick-demo.is-paused .preview-landscape{animation-play-state:paused}
@media(max-width:600px){
.editor-sequence-name{display:none}
.ghost-sound-mark{font-size:13px}
}
@media(max-width:380px){}
@media(prefers-reduced-motion:reduce){
  .walkthrough-cursor,.preview-key-hint{transition:none}
  .quick-demo .quick-result,.quick-demo .cursor-click-ring,.quick-demo .timeline-added,.quick-demo .timeline-playhead,.quick-demo .preview-landscape{animation:none!important}
}

.quick-demo .quick-bars{display:block}


/* Match the supplied native Quick Search panel: full-width search and quiet rows. */
.quick-demo .quick-scene{aspect-ratio:1.6;background:linear-gradient(145deg,#eef2f7,#e5ebf3);padding:25px}
.quick-demo .quick-panel{top:9%;left:17%;right:17%;padding:0;border-radius:19px;background:#1e1e20;border:1px solid #414145;box-shadow:0 30px 65px -15px #16213788,0 2px 8px #101a3044;--modal-open-dur:480ms;--modal-close-dur:220ms;--modal-scale:.97;--modal-ease:cubic-bezier(.16,1,.3,1)}
.quick-demo .quick-panel-head{margin:0;padding:14px 17px;min-height:59px;gap:11px;background:none;border:0;border-bottom:1px solid #353539;border-radius:0;font-size:17px}
.quick-demo .quick-lens{display:flex;color:#9999a2;width:19px;flex:none}
.quick-lens svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.quick-demo .quick-typed{color:#ededf1;min-height:23px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}
.quick-demo .quick-typed:empty::before{content:"Search sounds · / category · # project";color:#99999f;font-size:15px}
.quick-demo .quick-key{font-size:11px;color:#a6a6ae;border-color:#414145;padding:3px 6px;border-radius:5px;background:#262629}
.native-quick-results{padding:8px}
.quick-demo .quick-result{min-height:43px;margin:0 0 2px;padding:7px 13px;gap:13px;border:0;border-radius:11px;background:none;transition:background-color 160ms ease,opacity 180ms ease}
.quick-demo .quick-result:last-child{margin-bottom:0}
.quick-demo .quick-result.selected{background:#303033;border:0}
.quick-demo .quick-result .quick-play{width:18px;flex:none;font-size:14px;color:#b6b6bf;opacity:0}
.quick-demo .quick-result.selected .quick-play{opacity:1}
.quick-demo .quick-result .quick-sound-info{min-width:0;flex:1}
.quick-demo .quick-result b{font-size:14px;font-weight:650;line-height:1.25;color:#eeeef2}
.quick-demo .quick-result small{font-size:11px;color:#a3a3ad;margin-top:3px}
.quick-demo .quick-bars{display:block;width:145px;height:32px;flex:none}
.quick-demo .sound-wave{stroke:#76767f;stroke-width:1.4}
.quick-demo .quick-result:not(.selected) .quick-bars em{opacity:0;animation:none}
.quick-demo[data-stage="open"] .quick-result,.quick-demo[data-stage="typing"] .quick-result{opacity:1}
.quick-demo[data-stage="preview"] .quick-result.selected,.quick-demo[data-stage="browse"] .quick-result.selected{background:#333337;border:0}
.quick-demo[data-stage="preview"] .quick-result.selected .sound-wave,.quick-demo[data-stage="browse"] .quick-result.selected .sound-wave{stroke:#b7c8e3}
.quick-demo[data-stage="preview"] .quick-result:not(.selected) .sound-wave{stroke:#76767f}
.quick-demo[data-stage="preview"] .quick-result.selected .quick-bars em,.quick-demo[data-stage="browse"] .quick-result.selected .quick-bars em{opacity:1;animation:quickPreviewHead var(--quick-preview-duration,700ms) linear forwards;background:#c6daff;height:28px;top:2px;box-shadow:0 0 4px #bbd2ff55}
.quick-demo .quick-panel-foot{padding:11px 13px;border-top:1px solid #353539;margin:0;font-size:9px;color:#a3a3ac;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.quick-panel-foot>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.quick-panel-foot kbd{padding:1px 4px;background:#27272b;border-color:#44444a;border-bottom-width:1px;color:#a9a9b3;font-size:10px;border-radius:4px}
.quick-demo .preview-key-hint{background:none;margin:0;padding:0}
.quick-demo[data-stage="browse"] .browse-key-hint kbd,.quick-demo[data-stage="preview"] .preview-key-hint kbd{background:#46516a;border-color:#65738e;color:#edf3fc}
.native-auto-play{margin-left:auto}
.native-auto-play i{position:relative;display:block;width:25px;height:14px;background:#32c457;border-radius:20px}
.native-auto-play i::after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;background:#fff;border-radius:50%}
.quick-demo .shortcut-press{opacity:0}
.quick-demo[data-stage="idle"] .shortcut-press,.quick-demo[data-stage="shortcut"] .shortcut-press{opacity:1}
.quick-demo .quick-drag-item{background:#353c4b;border-color:#8fa4c3;border-radius:9px}
.quick-demo[data-stage="drag"] .quick-drag-ghost{animation-duration:1350ms}
.quick-demo[data-stage="idle"] .preview-landscape{animation:quickIdleFootage 1800ms linear both}
@keyframes quickIdleFootage{from{transform:scale(1)}to{transform:scale(1.018) translateX(-.3%)}}
.quick-demo.is-paused .preview-landscape,.quick-demo.is-paused .quick-result{animation-play-state:paused}
.quick-demo[data-stage="results"] .quick-result{animation:quickNativeResult 250ms ease both}
@keyframes quickNativeResult{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:none}}
.quick-demo .walkthrough-cursor{z-index:6}
@media(max-width:900px){
}
@media(max-width:600px){
.quick-lens svg{width:15px;height:15px}
.native-quick-results{padding:5px}
.native-auto-play{margin-left:0}
.native-auto-play i{width:22px;height:12px}
.native-auto-play i::after{width:8px;height:8px}
}
@media(prefers-reduced-motion:reduce){.quick-demo .quick-result{animation:none!important;transition:none}.quick-demo .preview-landscape{animation:none!important}}

/* Keep the native rows compact and the destination visible below the popup. */
.quick-demo .quick-panel{top:7%}
.quick-demo .quick-panel-head{min-height:54px;padding-top:12px;padding-bottom:12px}
.quick-demo .quick-result{padding-top:6px;padding-bottom:6px}
.quick-demo .quick-result small{line-height:1.1;margin-top:2px}
.quick-demo[data-stage="auditioned"] .walkthrough-cursor{opacity:1}
@media(max-width:900px){
}
@media(max-width:600px){
}
@media(max-width:380px){
}


/* Persistent scattered particles: quiet depth, with a local pointer response. */
.hero-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-particle{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#c3ddff;box-shadow:0 0 5px rgba(124,181,255,.2);pointer-events:none}

/* The editor remains an illustration, with the hierarchy of a real cutting room. */
.quick-demo .video-editor{background:#2c323c;border-color:#404957;box-shadow:0 18px 32px -20px #1c2a4580;color:#bec8d7}
.quick-demo .video-editor-bar{background:#343b47;border-bottom-color:#454e5d;color:#d4dce8;height:35px;font-size:10px}
.quick-demo .editor-dots i{background:#697587}
.editor-workspace-mode{margin-left:auto;font-size:8px;color:#9eafc7;letter-spacing:.04em;border-bottom:2px solid #79aafa;padding:10px 2px 8px}
.quick-demo .editor-time{margin-left:18px;color:#b7c7de;font-size:10px}
.quick-demo .video-editor-workspace{height:54%;padding:12px 13px 0;gap:12px}
.quick-demo .editor-bin{width:18%;padding-right:12px;border-color:#424b59;gap:9px}
.media-bin-title{color:#b8c5d8;font-size:7px;letter-spacing:.09em;display:flex;align-items:center;justify-content:space-between;white-space:nowrap}
.media-bin-title>span{color:#8697af;font-variant-numeric:tabular-nums}
.quick-demo .media-thumbnail i{height:clamp(25px,4.1vw,48px);border:1px solid #59677a;background-image:url("assets/editor-coast.svg");background-position:50% 52%;background-size:cover}
.quick-demo .media-thumbnail i::after{display:none}
.quick-demo .media-thumbnail:nth-of-type(3) i{background-image:url("assets/editor-coast.svg");background-size:160%;background-position:90% 40%}
.quick-demo .media-thumbnail:nth-of-type(4) i{background-image:url("assets/editor-coast.svg");background-size:190%;background-position:50% 90%}
.media-thumbnail small{font-size:7px;color:#b4c0d3;display:flex;justify-content:space-between;gap:4px;white-space:nowrap;overflow:hidden}
.media-thumbnail em{font-style:normal;color:#7f90a9;font-size:6px}
.media-bin-footer{margin-top:auto;font-size:7px;color:#7e8ea5}
.quick-demo .editor-preview{background:#1d232d;border:1px solid #3b4554;border-radius:5px;padding:24px 12px 27px}
.monitor-heading{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:23px;padding:0 10px;border-bottom:1px solid #35404f;font-size:7px;letter-spacing:.07em;color:#96a8c0}
.monitor-heading i{font-style:normal;letter-spacing:0;color:#687d98;margin-left:8px}
.quick-demo .preview-landscape{width:100%;height:auto;max-height:100%;aspect-ratio:16/9;flex:none;background:url("assets/editor-coast.svg") center/cover;box-shadow:0 0 20px #0003;border-radius:1px}
.quick-demo .preview-landscape::after,.quick-demo .landscape-sun,.quick-demo .landscape-ridge,.quick-demo .landscape-water{display:none}
.monitor-transport{position:absolute;inset:auto 0 0;height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:7px;color:#73869f}
.monitor-transport .monitor-play-state{position:static;font-size:10px;color:#c1d0e5;opacity:1;letter-spacing:2px}
.quick-demo .editor-timeline{left:13px;right:13px;bottom:12px;height:32%;padding-top:0;border-color:#46515f}
.timeline-heading{height:23px;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#c1ccdc;border-bottom:1px solid #46515f}
.timeline-heading>span:first-child{height:100%;display:flex;gap:14px;align-items:center;border-bottom:2px solid #6e9bdc}
.timeline-heading i{font-style:normal;color:#7688a1}
.timeline-tools{color:#8398b5;word-spacing:7px;font-size:9px}
.quick-demo .timeline-ruler{position:relative;margin:0 0 5px 27px;height:22px;padding:6px 0 0;font-size:7px;color:#8596b1;background:repeating-linear-gradient(90deg,#5c6f8a88 0 1px,transparent 1px 5%) bottom/100% 4px no-repeat}
.quick-demo .timeline-video{position:relative;height:27%;margin:0 0 6px 27px;gap:3px}
.quick-demo .timeline-video::before,.quick-demo .timeline-audio::before{position:absolute;left:-27px;top:0;bottom:0;width:22px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:600;border-radius:3px;color:#8fadd6;background:#354254}
.quick-demo .timeline-video::before{content:"V1"}
.quick-demo .timeline-video i,.quick-demo .timeline-video i:nth-child(2){position:relative;display:block;padding:0;border:1px solid #688ab2;border-radius:3px;background:linear-gradient(0deg,#30537da6,#30537d22),url("assets/editor-coast.svg") 50% 40%/auto 100% repeat-x;color:#edf4ff;font-size:7px}
.quick-demo .timeline-video i:nth-child(2){background-position:90% 40%;filter:saturate(.7)}
.quick-demo .timeline-video i:nth-child(3){background-position:50% 80%}
.timeline-video i>span{position:absolute;inset:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#355a80cf;padding:3px 5px;line-height:1.1}
.quick-demo .timeline-audio{position:relative;margin-left:27px;height:28%;border:1px solid #424f60;background:#26303d;border-radius:3px;transition:background-color 220ms ease,border-color 220ms ease}
.quick-demo .timeline-audio::before{content:"A1";color:#8db8bc;background:#34494e;left:-28px}
.audio-drop-hint{position:absolute;left:54%;top:50%;transform:translateY(-50%);font-size:7px;color:#718499;transition:opacity 150ms ease;white-space:nowrap}
.quick-demo .timeline-added{top:0;bottom:0;height:auto;left:53%;width:41%;background:linear-gradient(180deg,#477978,#386161);border-color:#8db6ac;color:#e6f3ec;font-size:9px;padding:3px 6px;border-radius:2px;box-shadow:0 2px 5px #0003}
.quick-demo .timeline-added i{background:repeating-linear-gradient(90deg,#c3e6d5 0 1px,transparent 1px 3px);height:18px;opacity:.75}
.quick-demo .timeline-playhead{left:calc(27px + (100% - 27px)*.53);top:27px;bottom:14px;z-index:2;background:#93bcfa;box-shadow:0 0 5px #93bcfa22}
.quick-demo .timeline-playhead::before{border-top-color:#93bcfa}
.timeline-status{display:flex;justify-content:space-between;margin-top:6px;color:#788aa3;font-size:6px}
.quick-demo[data-stage="drag"] .timeline-audio{background:#344a52;border-color:#8dc9c0;outline-color:#8dc9c0}
.quick-demo[data-stage="drag"] .audio-drop-hint{color:#bddbd3}
.quick-demo[data-stage="drop"] .timeline-audio{background:#2c4247}
.quick-demo[data-stage="drop"] .audio-drop-hint,.quick-demo[data-stage="done"] .audio-drop-hint{opacity:0}
.quick-demo .shortcut-press{bottom:22px}
@media(max-width:900px){
}
@media(max-width:600px){
.editor-workspace-mode{display:none}
.audio-drop-hint{font-size:5px}
}
@media(prefers-reduced-motion:reduce){.quick-demo .timeline-audio,.audio-drop-hint{transition:none}}

/* A silent, paced voice walkthrough. All stages retain the same card dimensions. */
.voice-script p{min-height:51px;margin-bottom:0}
.voice-caret{display:inline-block;width:1px;height:18px;background:#be96ee;vertical-align:-3px;margin-left:2px;opacity:0}
.voice-studio[data-voice-stage="write"] .voice-caret{opacity:1;animation:voiceCaret 850ms steps(1,end) infinite}
@keyframes voiceCaret{50%{opacity:0}}
.voice-studio .voice-output{display:block;padding:14px 0 0;margin-top:17px}
.voice-generation{display:flex;align-items:center;gap:7px;font-size:10px;color:#cfc2df;min-height:23px}
.voice-stage-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;border-radius:50%;background:#365449;color:#bce7d2;font-size:10px}
.voice-local-status{margin-left:auto;font-size:8px;color:#a79ab6}
.voice-progress{display:block;overflow:hidden;height:2px;margin:7px 0 12px;background:#3e354b;border-radius:2px}
.voice-progress>i{display:block;height:100%;background:linear-gradient(90deg,#8662c9,#cda2f0);transform:scaleX(1);transform-origin:left}
.voice-render{display:flex;align-items:center;gap:9px;padding:11px 10px;min-height:60px;border:1px solid #4b405b;background:#2c2635;border-radius:9px;opacity:1;transform:none;transition:opacity 220ms ease,transform 350ms cubic-bezier(.22,1,.36,1),border-color 250ms ease}
.voice-file-icon{display:flex;align-items:center;justify-content:center;width:25px;height:29px;border:1px solid #715486;border-radius:5px;color:#c3a0e6;font-size:18px;flex:none}
.voice-file{display:grid;gap:4px;min-width:0;flex:1}
.voice-file b{font-size:10px;font-weight:600;color:#e3d9ef;white-space:nowrap}
.voice-file small{font-size:8px;color:#ad9cbe}
.voice-studio .voice-output-wave{position:relative;width:82px;height:30px;gap:4px;flex:none;overflow:hidden}
.voice-output-wave i{flex:1;transform-origin:center;opacity:.8}
.voice-output-wave em{position:absolute;top:0;bottom:0;left:0;width:1px;background:#e4d1ff;opacity:0;box-shadow:0 0 4px #c6a4eb}
.voice-workflow-steps{display:flex;justify-content:space-between;gap:6px;margin-top:13px;font-size:8px;color:#8e819e}
.voice-workflow-steps>span{transition:color 220ms ease}
.voice-studio[data-voice-stage="write"] [data-voice-step="write"],.voice-studio[data-voice-stage="generate"] [data-voice-step="generate"],.voice-studio[data-voice-stage="saved"] [data-voice-step="save"],.voice-studio[data-voice-stage="preview"] [data-voice-step="save"],.voice-studio[data-voice-stage="done"] [data-voice-step="save"]{color:#d7b4fa}
.voice-studio[data-voice-stage="write"] .voice-stage-icon{background:#42334f;color:#d7b4fa}
.voice-studio[data-voice-stage="write"] .voice-progress>i{transform:scaleX(0)}
.voice-studio[data-voice-stage="write"] .voice-render,.voice-studio[data-voice-stage="generate"] .voice-render{opacity:.28;transform:translateY(3px)}
.voice-studio[data-voice-stage="generate"] .voice-stage-icon{background:none;color:transparent;border:1.5px solid #65506f;border-top-color:#cfabed;animation:voiceSpin 850ms linear infinite}
.voice-studio[data-voice-stage="generate"] .voice-progress>i{animation:voiceProgress 1700ms cubic-bezier(.2,.7,.3,1) both}
@keyframes voiceSpin{to{transform:rotate(360deg)}}
@keyframes voiceProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.voice-studio[data-voice-stage="generate"] .voice-emblem i{animation:voiceBar 700ms ease-in-out infinite alternate}
.voice-emblem i:nth-child(2){animation-delay:-.4s}.voice-emblem i:nth-child(3){animation-delay:-.2s}.voice-emblem i:nth-child(4){animation-delay:-.6s}
@keyframes voiceBar{from{transform:scaleY(.5);opacity:.6}to{transform:scaleY(1);opacity:1}}
.voice-studio[data-voice-stage="preview"] .voice-output-wave em{opacity:1;animation:voicePreview 1900ms linear both}
@keyframes voicePreview{from{left:0}to{left:100%}}
.voice-studio[data-voice-stage="preview"] .voice-render{border-color:#8763a5}
.voice-animation-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;margin-top:11px}
.voice-studio .voice-animation-footer figcaption{margin:0;text-align:left;font-size:8px}
.voice-animation-controls{display:flex;gap:4px}
.voice-animation-controls[hidden]{display:none}
.voice-animation-controls button{font:inherit;font-size:9px;color:#cfc1df;border:1px solid #564762;border-radius:5px;background:#2b2532;min-height:30px;padding:4px 7px;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease}
.voice-animation-controls button:hover{background:#42304f;border-color:#9c77bc}
.voice-animation-controls button:focus-visible{outline:2px solid #c6a0e9;outline-offset:3px}
.voice-studio.is-paused .voice-caret,.voice-studio.is-paused .voice-stage-icon,.voice-studio.is-paused .voice-progress>i,.voice-studio.is-paused .voice-emblem i,.voice-studio.is-paused .voice-output-wave em{animation-play-state:paused}
@media(max-width:600px){
.voice-animation-controls button{min-height:36px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){.voice-studio .voice-caret,.voice-studio .voice-stage-icon,.voice-studio .voice-progress>i,.voice-studio .voice-emblem i,.voice-studio .voice-output-wave em{animation:none!important}.voice-render,.voice-workflow-steps>span,.voice-animation-controls button{transition:none}}

/* Sliding tabs from transitions-dev; tour-specific skin follows. */
:root {
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.8);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
}

/* The bar is just a flex container with padding for the pill
   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
   so labels read above the pill background. */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}

/* The pill: width + transform are written inline by JS so
   the transition tweens between the previous and next
   measured positions. */
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

.tour-showcase{padding:10px;border-radius:20px;background:linear-gradient(145deg,#272930,#1e2026);border-color:#414651;box-shadow:0 26px 65px -34px #1a294c80}
.tour-showcase .tour-tabs{display:flex;align-items:center;margin:0 0 10px;padding:4px;gap:4px;border-radius:12px;background:#171b22;--tabs-pill-bg:#2864ef;--tabs-text-muted:#aeb7c7;--tabs-text-active:#fff;--tabs-dur:420ms}
.tour-showcase .tour-tab{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;min-height:42px;padding:9px 12px;border-radius:9px;font-size:12px;color:#aeb7c7}
.tour-showcase .tour-tab[aria-selected="true"]{color:#fff;background:transparent;box-shadow:none}
.tour-showcase .tour-tab:not([aria-selected="true"]):hover{color:#f0f5ff;background:#ffffff08}
.tour-showcase .t-tabs-pill{top:4px;height:42px;border-radius:9px;box-shadow:0 4px 14px -5px #1b65f988}
.tour-tab-number{font-size:9px;font-variant-numeric:tabular-nums;opacity:.55}
.tour-showcase .gal-grid{position:relative;isolation:isolate}
.tour-showcase .gal-grid .gfig{border-radius:12px;border-color:#424753;overflow:hidden;background:#16181e}
.tour-showcase .gal-grid .gfig img{aspect-ratio:3014/2372}
.tour-showcase .gal-grid .gfig figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;padding:20px 23px;background:#242831;border-color:#3c4351;font-size:12px;color:#aab6c9}
.tour-showcase .gfig figcaption b{display:block;margin-bottom:5px;color:#f3f6fc;font-size:18px;letter-spacing:-.02em;font-weight:600}
.tour-fullsize{flex:none;white-space:nowrap;color:#c5d8fa;font-size:10px;border:1px solid #50627f;border-radius:6px;padding:8px 10px;text-decoration:none;transition:background-color 180ms ease,border-color 180ms ease}
.tour-fullsize:hover{background:#354560;border-color:#88a8dc}
.tour-showcase .gfig.is-tour-active{animation:tourScreenEnter 500ms cubic-bezier(.22,1,.36,1) both}
.tour-showcase .gfig.tour-outgoing{position:absolute;inset:0;margin:0;z-index:2;pointer-events:none;animation:tourScreenExit 380ms ease both}
@keyframes tourScreenEnter{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes tourScreenExit{from{opacity:1}to{opacity:0}}
.tour-toolbar{display:flex;align-items:center;gap:15px;padding:13px 9px 3px;color:#9faec5;min-height:47px}
.tour-toolbar[hidden]{display:none}
.tour-count{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#bdcce2}
.tour-progress{height:2px;flex:1;max-width:200px;border-radius:2px;overflow:hidden;background:#485366}
.tour-progress i{display:block;height:100%;background:#83affb;transform-origin:left;animation:tourAdvance 7000ms linear both}
@keyframes tourAdvance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tour-held .tour-progress i{animation-play-state:paused}
.tour-play-label{font-size:9px;margin-left:auto;color:#7e8fa9}
.tour-play{font:inherit;font-size:10px;color:#d0ddf0;background:#303c51;border:1px solid #4b5c77;border-radius:6px;min-height:32px;padding:5px 11px;cursor:pointer}
.tour-play:hover{background:#3c5173}
.tour-tab:focus-visible,.tour-play:focus-visible,.tour-fullsize:focus-visible{outline:2px solid #9bc0ff;outline-offset:2px}
@media(max-width:600px){
.tour-showcase{padding:7px;border-radius:15px}
.tour-showcase .tour-tab{padding:8px 11px;font-size:11px;gap:6px}
.tour-showcase .gal-grid .gfig figcaption{min-height:142px;align-items:flex-start;flex-direction:column;gap:10px;padding:16px;font-size:11px}
.tour-showcase .gfig figcaption b{font-size:16px}
.tour-fullsize{font-size:9px;padding:7px 9px}
.tour-toolbar{gap:10px;padding:10px 4px 2px}
.tour-play{min-height:40px}
.tour-play-label{display:none}
}
@media(prefers-reduced-motion:reduce){.tour-showcase .gfig.is-tour-active,.tour-showcase .gfig.tour-outgoing,.tour-progress i{animation:none}.tour-fullsize{transition:none}}

/* FAQ: a quiet topic index beside a single, readable column of answers. */
.faq-section{background:linear-gradient(180deg,#fff,#f8faff);border-top:1px solid #e5eaf2}
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(40px,6vw,90px);align-items:start}
.faq-intro{position:sticky;top:calc(var(--hero-nav-height,60px) + 35px);padding-top:3px}
.faq-intro h2{font-size:clamp(34px,3.3vw,46px);line-height:1.09;letter-spacing:-.05em;margin:17px 0}
.faq-intro .sub{font-size:15px;line-height:1.65;max-width:23em;margin:0;color:#68758a}
.faq-index{display:grid;gap:0;margin:30px 0 27px;max-width:280px}
.faq-index a{display:flex;align-items:center;gap:12px;min-height:45px;padding:10px 0;border-bottom:1px solid #e4eaf3;text-decoration:none;color:#394b67;font-size:12px;font-weight:550}
.faq-index a>span{color:#8498b8;font-size:9px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.faq-index i{font-style:normal;margin-left:auto;color:#8299bb;transition:transform 180ms ease,color 180ms ease}
.faq-index a:hover{color:#2864ef}.faq-index a:hover i{color:#2864ef;transform:translate(2px,-2px)}
.faq-tour-link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#2864d1;font-size:11px;line-height:1.6}
.faq-tour-link:hover{text-decoration:underline;text-underline-offset:4px}
.faq-groups{display:grid;gap:34px;min-width:0}
.faq-group{scroll-margin-top:calc(var(--hero-nav-height,60px) + 24px);min-width:0}
.faq-group-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;padding:0 2px}
.faq-group-heading>span{display:flex;align-items:center;justify-content:center;flex:none;width:29px;height:29px;background:#edf3fe;border:1px solid #dbe7fa;border-radius:8px;color:#4274c0;font-size:9px;font-variant-numeric:tabular-nums}
.faq-group-heading h3{font-size:16px;letter-spacing:-.02em;line-height:1.4;margin:0;color:#243652;font-weight:600}
.faq-group-heading p{margin:4px 0 0;color:#7a879b;font-size:11px;line-height:1.5}
.faq-questions{overflow:hidden;border:1px solid #dfe6f1;border-radius:14px;background:#fff;box-shadow:0 8px 25px -18px #35578530}
#faq .t-acc,#faq details{position:relative;border:0;border-bottom:1px solid #e7ecf4;border-radius:0;margin:0;padding:0 21px;background:transparent;box-shadow:none;transition:background-color 200ms ease}
#faq .t-acc:last-child,#faq details:last-child{border-bottom:0}
#faq .t-acc[data-open="true"],#faq details[open]{background:#f3f7ff;border-color:#e0e8f6;box-shadow:none}
#faq .t-acc[data-open="true"]::before,#faq details[open]::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:#76a0f3}
#faq .t-acc-head,#faq summary{min-height:65px;padding:19px 0;line-height:1.5;font-size:14px;font-weight:600;gap:16px;color:#27354b}
#faq .t-acc-head>span:first-child{padding-right:6px}
#faq .t-acc-chevron{color:#8b9cb8;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#eff3f9;border-radius:50%}
#faq .t-acc-chevron svg{width:15px;height:15px;stroke-width:1.5}
#faq .t-acc[data-open="true"] .t-acc-chevron{color:#2864ef;background:#e1ecff}
#faq .t-acc-panel-inner p,#faq details[open] .a>p{font-size:13px;line-height:1.8;margin:0 30px 21px 0;color:#55647a;max-width:48em}
#faq .t-acc:hover,#faq details:hover{background:#f8faff}
#faq .t-acc[data-open="true"]:hover,#faq details[open]:hover{background:#f3f7ff}
#faq .t-acc-head:focus-visible{outline:2px solid #759fec;outline-offset:-3px;border-radius:6px}
.faq-index a:focus-visible,.faq-tour-link:focus-visible{outline:2px solid #759fec;outline-offset:4px;border-radius:3px}
@media(max-width:900px){
.faq-layout{grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);gap:35px}
.faq-intro h2{font-size:35px}
.faq-intro .sub{font-size:14px}}
@media(max-width:700px){
.faq-layout{grid-template-columns:1fr;gap:30px}
.faq-intro{position:static;padding:0}
.faq-intro h2{font-size:36px;margin:13px 0}
.faq-intro h2 br{display:none}
.faq-intro h2 br::after{content:" "}
.faq-intro .sub{max-width:none}
.faq-index{max-width:none;margin:21px 0 17px;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.faq-index a{flex-wrap:wrap;gap:5px;font-size:10px;align-content:center;align-items:center;padding:9px 0;min-height:49px;line-height:1.5}
.faq-index a>span{width:100%;font-size:8px}
.faq-index i{display:none}
.faq-tour-link{font-size:11px}
.faq-groups{gap:28px}
.faq-group-heading h3{font-size:15px}
#faq .t-acc,#faq details{padding:0 16px}
#faq .t-acc-head,#faq summary{font-size:13px;min-height:62px;padding:18px 0}
#faq .t-acc-panel-inner p,#faq details[open] .a>p{font-size:12px;margin-right:10px;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){.faq-index i,#faq .t-acc,#faq details{transition:none}}

/* Four connected milestones, with compact illustrations of the actual workflow. */
.workflow-section{background:linear-gradient(180deg,#fff,#f8faff);border-bottom:1px solid #e4eaf3}
.workflow-heading{max-width:740px;margin:0 auto 45px;text-align:center}
.workflow-heading h2{font-size:clamp(34px,3.7vw,48px);line-height:1.12;letter-spacing:-.05em;margin:13px 0 17px}
.workflow-heading .sub{font-size:15px;color:#69788f;margin:0}
.workflow-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;padding:0;margin:0;list-style:none}
.workflow-flow::before{content:"";position:absolute;top:21px;left:21px;right:21px;height:1px;background:linear-gradient(90deg,#ccdafa,#dfe7f3);z-index:0}
.workflow-flow>li{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.workflow-step-no{position:relative;display:flex;align-items:center;justify-content:center;width:43px;height:43px;flex:none;background:#f3f7ff;border:1px solid #cddcf4;border-radius:50%;color:#4071be;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 0 0 7px #fff;z-index:1;margin-bottom:23px}
.workflow-flow h3{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.025em;margin:0 0 11px;color:#22334d}
.workflow-flow p{font-size:12px;line-height:1.8;color:#66758a;margin:0 0 23px;flex:1}
.workflow-visual{align-self:stretch;min-height:111px;border-top:1px solid #dbe4f2;border-bottom:1px solid #dbe4f2;background:linear-gradient(180deg,#f1f5fc,#f8faff);padding:12px 10px;display:flex;flex-direction:column;justify-content:center;gap:9px;font-size:9px;color:#586f93;overflow:hidden}
.workflow-visual svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.workflow-folder{display:flex;align-items:center;gap:7px;color:#3f639e}
.workflow-folder b{font-weight:600;font-size:10px}
.workflow-file{display:flex;align-items:center;gap:6px;padding-left:5px;color:#88a3c9;font-size:12px}
.workflow-file i{font-size:8px;color:#7185a1;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workflow-file em{font:6px ui-monospace,SFMono-Regular,Menlo,monospace;margin-left:auto;border:1px solid #d2dfef;padding:1px 3px;border-radius:3px;color:#8298b7}
.workflow-project-title{display:flex;align-items:center;gap:6px;color:#365683;font-size:10px;font-weight:600}
.workflow-project-title i{width:5px;height:5px;background:#76a1d9;border-radius:50%}
.workflow-project-status{display:flex;align-items:center;gap:8px;font-size:8px;color:#8293ad}
.workflow-project-status b{margin-left:auto;font-size:7px;background:#dfeafa;color:#4978b9;border:1px solid #cdddf4;font-weight:500;border-radius:3px;padding:2px 5px}
.workflow-project-collect{display:flex;align-items:center;gap:5px;font-size:8px;color:#638477}
.workflow-project-collect svg{width:12px;height:12px}
.workflow-shortcut{display:flex;align-items:center;gap:4px}
.workflow-shortcut kbd{font-size:9px;background:#fff;border:1px solid #c8d8ef;border-bottom-width:2px;border-radius:4px;padding:3px 6px;color:#4b6c9a}
.workflow-shortcut i{font-size:7px;font-style:normal;margin-left:3px;color:#8394ad}
.workflow-mini-query{display:flex;align-items:center;gap:5px;font-size:8px;color:#8c9bb2;padding:5px 7px;background:#fff;border:1px solid #dae4f2;border-radius:5px}
.workflow-mini-query svg{width:12px;height:12px}
.workflow-search-hints{display:flex;align-items:center;gap:8px;font-size:6px;color:#8798b1;white-space:nowrap}
.workflow-search-hints i{font-style:normal}
.workflow-region{position:relative;display:flex;align-items:center;gap:3px;height:45px;padding:6px;border:1px solid #cfddf1;border-radius:5px;background:#fff;overflow:hidden}
.workflow-region::before{content:"";position:absolute;top:4px;bottom:4px;left:29%;width:40%;background:#e6efff;border-left:1px solid #91b0e7;border-right:1px solid #91b0e7}
.workflow-region i{position:relative;flex:1;height:6px;border-radius:1px;background:#a5bddf}
.workflow-region i:nth-child(2n){height:15px}.workflow-region i:nth-child(3n){height:27px}.workflow-region i:nth-child(5n){height:19px}
.workflow-fx-labels{display:flex;align-items:center;gap:8px;font-size:7px;color:#7c91af;white-space:nowrap}
.workflow-fx-labels i{font-style:normal}.workflow-fx-labels b{font-weight:500;color:#4076c5;margin-left:auto}
.workflow-formats{display:grid;grid-template-columns:1fr 2fr;gap:35px;align-items:center;margin-top:42px;padding-top:26px;border-top:1px solid #e0e7f1}
.workflow-format-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#7e90aa}
.workflow-formats h3{font-size:19px;letter-spacing:-.03em;font-weight:600;margin:5px 0 0;color:#304866}
.workflow-formats .tags{margin:0 0 9px;gap:6px}
.workflow-formats .tags span{border-radius:5px;padding:5px 9px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;color:#5d7394;border-color:#d9e3f1}
.workflow-formats .micro{font-size:11px;color:#8491a5;margin:0;line-height:1.6}
@media(max-width:900px){
.workflow-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.workflow-flow::before{display:none}
.workflow-step-no{margin-bottom:16px;box-shadow:none}
.workflow-flow h3{font-size:18px}
.workflow-flow p{font-size:13px;max-width:32em;margin-bottom:18px}
.workflow-visual{min-height:109px;padding:12px 15px}
.workflow-file i{font-size:9px}
.workflow-search-hints{font-size:8px}
.workflow-formats{grid-template-columns:1fr 1.6fr;gap:25px}
}
@media(max-width:600px){
.workflow-heading{margin-bottom:30px;text-align:left}
.workflow-heading h2{font-size:34px}
.workflow-heading .sub{font-size:14px;max-width:25em}
.workflow-flow{grid-template-columns:1fr;gap:27px}
.workflow-flow>li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 15px;align-items:start}
.workflow-step-no{width:34px;height:34px;font-size:10px;margin:0;grid-column:1;grid-row:1 / 4}
.workflow-flow h3{grid-column:2;font-size:17px;margin-top:4px;margin-bottom:9px}
.workflow-flow p{grid-column:2;font-size:12px;margin-bottom:16px;max-width:none}
.workflow-visual{grid-column:2;min-height:100px;padding:12px 15px;gap:8px}
.workflow-formats{grid-template-columns:1fr;gap:17px;margin-top:32px;padding-top:23px}
.workflow-formats h3{font-size:18px}
.workflow-formats .tags span{font-size:10px;padding:5px 8px}
}

/* A slightly smaller floating panel keeps the editor in view. */
.quick-demo .quick-panel{left:21%;right:21%;top:10%;border-radius:17px}
.quick-demo .quick-panel-head{min-height:48px;padding:10px 15px;font-size:15px;gap:9px}
.quick-demo .quick-typed:empty::before{font-size:13px}
.quick-demo .quick-result{min-height:38px;padding:4px 11px;gap:11px;border-radius:9px}
.quick-demo .quick-result b{font-size:12px}
.quick-demo .quick-result small{font-size:10px}
.quick-demo .quick-bars{width:125px;height:29px}
.quick-demo .quick-panel-foot{font-size:8px;padding:9px 11px;gap:8px}
.quick-demo .quick-panel-foot kbd{font-size:9px}
@media(max-width:900px){
}
@media(max-width:600px){
}
@media(max-width:380px){}

/* Center independently of the modal's opening scale, at every viewport size. */
.quick-demo .quick-panel{top:50%;translate:0 -50%;transform-origin:center}

/* Release status is a clear product sign-off, with honest availability. */
.release-section{background:#f4f7fc;padding:64px 0}
.release-banner{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:35px 60px;padding:46px 48px 0;border:1px solid #30466a;border-radius:23px;background:linear-gradient(125deg,#182333,#1c355b 72%,#244575);color:#edf4ff;box-shadow:0 22px 50px -35px #25497699}
.release-banner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 80% 0%,#3b7cd82b,transparent 55%)}
.release-copy .kicker{color:#98b9ea;font-size:10px;letter-spacing:.12em;margin:0 0 19px}
.release-copy h2{color:#f4f7ff;font-size:clamp(31px,3.3vw,44px);line-height:1.15;letter-spacing:-.045em;margin:0 0 21px}
.release-copy h2 span{color:#97bffc}
.release-copy>p:not(.kicker){font-size:13px;line-height:1.85;color:#b5c7e1;margin:0;max-width:37em}
.release-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 21px;margin-top:25px}
.release-actions a{display:inline-flex;align-items:center;gap:12px;color:#e6efff;font-size:11px;font-weight:550;text-decoration:none;min-height:40px}
.release-actions a:first-child{padding:7px 12px;border:1px solid #728eb6;border-radius:7px;background:#ffffff06}
.release-actions a>span{color:#aacbfc;transition:transform 180ms ease}
.release-actions a:hover>span{transform:translate(2px,-2px)}
.release-actions a:first-child:hover{background:#ffffff0d;border-color:#a2c2ed}
.release-actions a:focus-visible{outline:2px solid #b2d2ff;outline-offset:4px;border-radius:4px}
.release-specs{padding-left:28px;border-left:1px solid #88aee533;align-self:stretch}
.release-version>span:first-child{font-size:9px;color:#a9bfdf;letter-spacing:.06em;display:block}
.release-version>b{display:block;font:500 clamp(48px,5.5vw,70px)/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.065em;color:#eff6ff;margin:8px 0 13px}
.release-state{display:inline-flex;align-items:center;gap:7px;font-size:9px;color:#b8d2f9}
.release-state i{width:5px;height:5px;border-radius:50%;background:#83b5ff;box-shadow:0 0 0 4px #83b5ff10}
.release-requirements{margin:24px 0 0}
.release-requirements>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid #84a8dd26}
.release-requirements dt{font-size:9px;color:#8fa8cc}
.release-requirements dd{font-size:10px;color:#d4e2f6;margin:0;white-space:nowrap}
.release-availability{grid-column:1 / -1;display:flex;align-items:center;gap:13px;margin-top:2px;padding:21px 0 24px;border-top:1px solid #84a8dd30}
.release-availability-icon{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border:1px solid #6a8cbc55;border-radius:9px;color:#9fbee8;background:#91b9f007}
.release-availability-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.release-availability b{font-size:11px;font-weight:550;color:#dce8f8;display:block}
.release-availability p{font-size:10px;line-height:1.6;color:#8da6cb;margin:3px 0 0}
.release-platform{font-size:9px;color:#839fc8;margin-left:auto;white-space:nowrap}
@media(max-width:900px){
.release-banner{padding:35px 30px 0;gap:30px}
.release-specs{padding-left:22px}
.release-copy h2{font-size:33px}
.release-copy>p:not(.kicker){font-size:12px}
.release-actions{gap:7px 15px}}
@media(max-width:650px){
.release-section{padding:42px 0}
.release-banner{grid-template-columns:1fr;padding:28px 23px 0;gap:27px;border-radius:18px}
.release-copy h2{font-size:32px}
.release-copy .kicker{margin-bottom:15px}
.release-copy>p:not(.kicker){font-size:12px;max-width:none}
.release-actions{margin-top:19px;gap:7px 15px}
.release-specs{padding:23px 0 0;border-left:0;border-top:1px solid #84a8dd30;display:grid;grid-template-columns:.9fr 1.2fr;align-items:start;gap:15px}
.release-version>span:first-child{font-size:8px;letter-spacing:0}
.release-version>b{font-size:46px;margin-top:9px;margin-bottom:12px}
.release-state{font-size:8px}
.release-requirements{margin:0}
.release-requirements>div{padding:9px 0;gap:5px}
.release-requirements>div:first-child{border-top:0;padding-top:0}
.release-requirements dt{font-size:8px}
.release-requirements dd{font-size:9px}
.release-availability{margin-top:0;padding:18px 0 22px;gap:10px}
.release-platform{display:none}
.release-availability b{font-size:10px}
.release-availability p{font-size:9px}
}
@media(max-width:380px){
.release-banner{padding-left:18px;padding-right:18px}
.release-copy h2{font-size:29px}
.release-specs{grid-template-columns:1fr}
.release-version>b{font-size:48px}
.release-requirements{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.release-actions a>span{transition:none;transform:none!important}}

/* Silent FX walkthrough: stable geometry, visible selection, and gentle changes. */
.feat-primary .fx-demo{background:linear-gradient(145deg,#f3f6fb,#edf2fa);padding:20px;gap:10px}
.fx-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;color:#6e83a4;margin-bottom:13px}
.fx-demo-heading>span:first-child{font-weight:600;color:#45628f;letter-spacing:.03em}
.fx-demo-setting{font-size:8px;color:#8a9bb5}
.fx-demo .fv-crop{padding:24px 10px 16px;min-height:106px;border-color:#d6e1f1;background:#fff;box-shadow:inset 0 -16px 30px #f5f8fe;border-radius:10px}
.fx-demo .fv-wave{height:64px;align-items:center;gap:3px}
.fx-demo .fv-wave i{min-width:1px;height:var(--fx-height,30%);background:#9caeca;border-radius:2px;transition:height 550ms cubic-bezier(.22,1,.36,1),background-color 300ms ease}
.fx-demo .fv-region{left:25%;right:auto;width:50%;top:24px;bottom:13px;background:#d9e7ff66;border-radius:0;border-left:1px solid #6b98ef;border-right:1px solid #6b98ef;transition:left 900ms cubic-bezier(.22,1,.36,1),width 900ms cubic-bezier(.22,1,.36,1)}
.fx-demo .fv-region::before,.fx-demo .fv-region::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:3px;height:14px;background:#6695ed;border-radius:3px}
.fx-demo .fv-region::before{left:-2px}.fx-demo .fv-region::after{right:-2px}
.fx-demo .fv-region span{top:-12px;font-size:8px;padding:2px 7px;font-weight:500;line-height:1.6;border-radius:5px;background:#2864ef}
.fx-preview-head{position:absolute;left:25%;top:24px;bottom:13px;width:1px;background:#2a65d5;opacity:0;box-shadow:0 0 5px #2a65d533}
.fx-demo[data-fx-stage="preview"] .fx-preview-head{opacity:1;animation:fxRegionPreview 1900ms linear both}
@keyframes fxRegionPreview{from{left:25%}to{left:75%}}
.fx-demo .fx-labels{gap:5px;margin-top:14px;flex-wrap:nowrap}
.fx-demo .fx-labels span{padding:4px 7px;font-size:9px;line-height:1.5;border-color:#d2dff2;color:#6c83a6;transition:color 200ms ease,background-color 200ms ease,border-color 200ms ease}
.fx-demo[data-fx-stage="pitch"] [data-fx-effect="pitch"],.fx-demo[data-fx-stage="reverse"] [data-fx-effect="reverse"],.fx-demo[data-fx-stage="fade"] [data-fx-effect="fade"],.fx-demo[data-fx-stage="normalize"] [data-fx-effect="normalize"]{background:#2864ef;border-color:#2864ef;color:#fff}
.fx-demo[data-fx-stage="export"] .fv-wave i{background:#739eaa}
.fx-demo-status{margin:12px 0 0;text-align:center;font-size:10px;color:#627b9f;min-height:30px;line-height:1.5;display:flex;align-items:center;justify-content:center}
.fx-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #d9e3f1;padding-top:11px}
.fx-demo-footer>span{font-size:8px;color:#8b9bb2}
.fx-demo-controls{display:flex;gap:4px}.fx-demo-controls[hidden]{display:none}
.fx-demo-controls button{font:inherit;font-size:9px;color:#5e769b;background:#fff;border:1px solid #cddcf1;border-radius:5px;min-height:30px;padding:4px 7px;cursor:pointer}
.fx-demo-controls button:hover{background:#e8f0fe;border-color:#8cadde}
.fx-demo-controls button:focus-visible{outline:2px solid #729eec;outline-offset:3px}
.fx-demo.is-paused .fx-preview-head{animation-play-state:paused}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){.fx-demo .fv-wave i,.fx-demo .fv-region,.fx-demo .fx-labels span{transition:none}.fx-demo .fx-preview-head{animation:none!important}}

/* Release follows the light product sections, with a useful local compatibility check. */
.release-section{background:#f3f5f9}
.release-banner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px 45px;background:#fff;border-color:#dfe6f1;border-radius:21px;color:#26384f;box-shadow:0 12px 35px -28px #385a8b45}
.release-banner::before{display:none}
.release-copy .kicker{color:#2864ef}
.release-copy h2{color:#1d2636;font-size:clamp(31px,3.1vw,42px)}
.release-copy h2 span{color:#457fcf}
.release-copy>p:not(.kicker){color:#68768b}
.release-actions a{color:#3267b6}
.release-actions a:first-child{border-color:#d0def3;background:#eff5ff}
.release-actions a:first-child:hover{background:#e2edff;border-color:#9ebde8}
.release-actions a>span{color:#6d92c6}
.release-actions a:focus-visible{outline-color:#6697e6}
.release-specs{padding:21px 23px;border:1px solid #dae4f3;border-radius:13px;background:linear-gradient(145deg,#f7faff,#f1f5fc)}
.release-check-kicker{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#7992b5}
.release-specs h3{font-size:20px;line-height:1.3;letter-spacing:-.03em;margin:7px 0 9px;color:#2d4567;font-weight:600}
.release-check-intro{font-size:11px;line-height:1.7;color:#70829f;margin:0 0 17px}
.release-check-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.release-check-fields label{display:grid;gap:6px;font-size:9px;font-weight:550;color:#637d9f;min-width:0}
.release-check-fields select{width:100%;min-width:0;min-height:38px;padding:8px 24px 8px 9px;font:inherit;font-size:10px;font-weight:400;line-height:1.4;color:#3f597b;background:#fff;border:1px solid #cddcf0;border-radius:6px;cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease}
.release-check-fields select:hover{border-color:#94b4e2}
.release-check-fields select:focus-visible{outline:2px solid #81a6e4;outline-offset:2px}
.release-check-feedback{display:flex;align-items:flex-start;gap:8px;border:1px solid #dbe5f4;border-radius:7px;background:#edf3fd;margin:12px 0 0;padding:10px;min-height:72px;transition:background-color 200ms ease,border-color 200ms ease}
.release-check-mark{flex:none;width:16px;color:#7796c0;font-size:13px;line-height:1.5;text-align:center}
.release-check-result{margin:0;font-size:10px;line-height:1.7;color:#7287a4}
.release-check-feedback[data-result="supported"]{background:#e9f2ff;border-color:#bbd3f7}
.release-check-feedback[data-result="supported"] .release-check-mark{color:#2864cf}
.release-check-feedback[data-result="supported"] .release-check-result{color:#3c689f}
.release-check-feedback[data-result="unsupported"]{background:#f7f1e9;border-color:#e9d7ba}
.release-check-feedback[data-result="unsupported"] .release-check-mark,.release-check-feedback[data-result="unsupported"] .release-check-result{color:#967344}
.release-specs .release-mac-help{border:0;border-radius:0;box-shadow:none;background:transparent;margin:13px 0 0;padding:0}
.release-mac-help summary{font-size:10px;font-weight:500;min-height:28px;color:#557daf;gap:8px}
.release-mac-help summary::after{width:16px;height:16px;border:0;background:none!important;color:#6689b9!important;font-size:12px}
.release-specs .release-mac-help[open]{box-shadow:none;background:none}
.release-specs .release-mac-help[open] .a>p{font-size:10px;line-height:1.8;color:#7889a1;margin:8px 0 9px}
.release-check-note{display:block;margin-top:10px;font-size:8px;line-height:1.6;color:#91a0b6}
.release-availability{border-top-color:#e0e7f2}
.release-availability-icon{background:#edf4ff;border-color:#d1dff4;color:#7397c9}
.release-availability b{color:#4d668a}
.release-availability p{color:#8b9bb2}
.release-platform{color:#95a6bd}
@media(max-width:900px){
.release-banner{gap:26px}
.release-specs{padding:18px}
.release-copy h2{font-size:33px}
.release-check-fields{grid-template-columns:1fr}
.release-check-feedback{min-height:68px}}
@media(max-width:650px){
.release-banner{grid-template-columns:1fr;gap:24px}
.release-specs{display:block;padding:20px;border-left:1px solid #dae4f3;border-top:1px solid #dae4f3}
.release-check-fields{grid-template-columns:1fr 1fr}
.release-check-fields select{min-height:42px}
.release-check-feedback{min-height:75px}
.release-copy h2{font-size:32px}}
@media(max-width:380px){
.release-specs{padding:16px}
.release-check-fields{grid-template-columns:1fr}
.release-copy h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.release-check-fields select,.release-check-feedback{transition:none}}

/* Cohesive Quick Search motion: stable depth, continuous footage, and one path. */
.quick-demo .quick-scene{box-shadow:inset 0 1px 0 #fff,0 22px 65px -44px #34517f55}
.quick-demo .video-editor{z-index:0}
.quick-demo .video-editor::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#101a2d;opacity:0;transition:opacity 450ms cubic-bezier(.22,1,.36,1)}
.quick-demo .quick-scene:has(.quick-panel.is-open) .video-editor::after{opacity:.12}
.quick-demo .quick-panel{z-index:4;--modal-scale:.975;--modal-scale-close:.985;--modal-open-dur:500ms;--modal-close-dur:280ms;--modal-ease:cubic-bezier(.2,.85,.25,1);box-shadow:0 25px 50px -14px #0c152a99,0 4px 14px #08132840,inset 0 1px 0 #ffffff0a;transition:transform 500ms cubic-bezier(.2,.85,.25,1),opacity 220ms ease}
.quick-demo .quick-panel.is-closing{transition:transform 280ms cubic-bezier(.4,0,1,1),opacity 230ms ease}
.quick-demo .native-quick-results{position:relative;isolation:isolate}
.quick-selection{position:absolute;top:0;left:8px;right:8px;z-index:0;border-radius:9px;background:#303033;box-shadow:inset 0 1px 0 #ffffff04;pointer-events:none;transition:transform 360ms cubic-bezier(.22,1,.36,1),height 360ms cubic-bezier(.22,1,.36,1),background-color 240ms ease}
.quick-demo .quick-result{z-index:1}
.quick-demo[data-stage] .quick-result.selected{background:transparent}
.quick-demo[data-stage="browse"] .quick-selection,.quick-demo[data-stage="preview"] .quick-selection{background:#353539}
.quick-demo[data-stage="results"] .quick-result{animation:none}
.quick-demo[data-stage] .preview-landscape{animation:quickCameraDrift 24000ms ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes quickCameraDrift{from{transform:scale(1.025) translateX(.4%)}to{transform:scale(1.055) translateX(-.8%)}}
.quick-demo .walkthrough-cursor{z-index:9;transition:transform 580ms cubic-bezier(.22,1,.36,1),opacity 180ms ease}
.quick-demo[data-stage="grab"] .walkthrough-cursor{opacity:1}
.quick-demo .quick-drag-ghost{z-index:8}
.quick-demo .quick-drag-item{background:linear-gradient(145deg,#3a465b,#2b3446);border-color:#9dafca88;box-shadow:0 14px 24px -8px #111b3680,inset 0 1px 0 #ffffff10;border-radius:7px;padding:9px 12px;gap:8px}
.quick-demo .quick-drag-item .demo-cursor{left:14px;top:50%;right:auto;bottom:auto;width:14px;height:20px}
.quick-demo[data-stage="drag"] .quick-drag-ghost{animation:quickPremiumDrag 1280ms cubic-bezier(.4,0,.2,1) both}
@keyframes quickPremiumDrag{
  0%{opacity:0;transform:translate(0,0) scale(.99)}
  8%{opacity:1;transform:translate(0,0) scale(1.015)}
  48%{opacity:1;transform:translate(var(--quick-drag-mid-x),var(--quick-drag-mid-y)) scale(1.01)}
  100%{opacity:1;transform:translate(var(--quick-drag-x),var(--quick-drag-y)) scale(1)}
}
.quick-demo .timeline-added{transition:opacity 350ms ease,transform 450ms cubic-bezier(.22,1,.36,1)}
.quick-demo[data-stage="drop"] .timeline-added{animation:quickPremiumLand 450ms cubic-bezier(.22,1,.36,1) both}
@keyframes quickPremiumLand{from{opacity:.4;transform:translateY(-2px) scale(.985)}to{opacity:1;transform:none}}
.quick-demo[data-stage="drop"] .timeline-audio{animation:quickLandingAccent 650ms ease-out both}
@keyframes quickLandingAccent{from{box-shadow:inset 0 0 0 1px #99cbbacc}to{box-shadow:inset 0 0 0 1px #99cbba00}}
.quick-demo[data-stage="reset"] .timeline-playhead{animation:quickHeadReturn 800ms cubic-bezier(.4,0,.2,1) both}
@keyframes quickHeadReturn{from{transform:translateX(var(--quick-playhead-travel,120px))}to{transform:none}}
.quick-demo[data-stage="reset"] .shortcut-press{opacity:0}
.quick-demo .shortcut-press kbd{transition:background-color 200ms ease,color 200ms ease,transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease}
.quick-demo[data-stage="shortcut"] .shortcut-press kbd{transform:translateY(2px) scale(.97)}
.quick-demo.is-paused .preview-landscape,.quick-demo.is-paused .quick-drag-ghost,.quick-demo.is-paused .timeline-added,.quick-demo.is-paused .timeline-audio,.quick-demo.is-paused .timeline-playhead{animation-play-state:paused}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){
 .quick-demo .quick-panel,.quick-demo .quick-panel.is-closing,.quick-demo .video-editor::after,.quick-selection,.quick-demo .walkthrough-cursor,.quick-demo .timeline-added,.quick-demo .shortcut-press kbd{transition:none}
 .quick-demo[data-stage] .preview-landscape,.quick-demo .quick-drag-ghost,.quick-demo .timeline-added,.quick-demo .timeline-audio,.quick-demo .timeline-playhead{animation:none!important}
}

/* Finishing the silent walkthrough: restrained motion and readable playback. */
.quick-demo .quick-panel{transition:transform 560ms cubic-bezier(.16,1,.3,1),opacity 250ms ease;--modal-open-dur:560ms}
.quick-demo .quick-panel.is-closing{transition:transform 320ms cubic-bezier(.4,0,.2,1),opacity 280ms ease;--modal-close-dur:320ms}
.quick-demo .quick-bars{position:relative}
.quick-demo .sound-wave-played{position:absolute;inset:0;width:100%;height:100%;stroke:#d7e4fb!important;opacity:0;clip-path:inset(0 100% 0 0);pointer-events:none}
.quick-demo .quick-result.is-auditioning .sound-wave-played{opacity:1;animation:quickWaveFill var(--quick-preview-duration,700ms) linear both}
.quick-demo[data-stage="preview"] .quick-result.selected>.quick-bars>.sound-wave:not(.sound-wave-played),.quick-demo[data-stage="browse"] .quick-result.selected>.quick-bars>.sound-wave:not(.sound-wave-played){stroke:#85858f}
@keyframes quickWaveFill{to{clip-path:inset(0)}}
.quick-demo .quick-play{transition:opacity 200ms ease,color 200ms ease}
.quick-demo .quick-selection{transition:transform 420ms cubic-bezier(.16,1,.3,1),height 420ms cubic-bezier(.16,1,.3,1),background-color 300ms ease}
.quick-demo .video-editor::after{transition:opacity 560ms cubic-bezier(.16,1,.3,1)}
.quick-demo .walkthrough-cursor{transition:transform 680ms cubic-bezier(.16,1,.3,1),opacity 220ms ease}
.quick-demo .quick-drag-item{transition:background-color 240ms ease;transform-origin:left center}
.quick-demo[data-stage="drag"] .quick-drag-item{animation:quickDragSettle 1280ms cubic-bezier(.4,0,.2,1) both}
@keyframes quickDragSettle{0%,15%{transform:rotate(-1deg);box-shadow:0 14px 24px -8px #111b3680}60%{transform:rotate(.6deg)}100%{transform:rotate(0deg);box-shadow:0 3px 8px #111b3640}}
.quick-demo .timeline-added{transform-origin:left center}
.quick-demo[data-stage="drop"] .timeline-added{animation:quickClipResolve 520ms cubic-bezier(.16,1,.3,1) both}
@keyframes quickClipResolve{from{opacity:.65;transform:translateY(-1px) scaleX(.98);filter:brightness(1.25)}to{opacity:1;transform:none;filter:brightness(1)}}
.quick-demo[data-stage="reset"] .timeline-added{opacity:0;transition:opacity 650ms ease}
.quick-demo.is-paused .sound-wave-played,.quick-demo.is-paused .quick-drag-item{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .quick-demo .quick-panel,.quick-demo .quick-panel.is-closing,.quick-demo .quick-selection,.quick-demo .video-editor::after,.quick-demo .walkthrough-cursor,.quick-demo .timeline-added,.quick-demo[data-stage="reset"] .timeline-added{transition:none}
 .quick-demo .sound-wave-played,.quick-demo .quick-drag-item,.quick-demo .timeline-added{animation:none!important}
}

.hero-particles canvas{display:block;width:100%;height:100%;pointer-events:none}

/* Platform availability in the restored light release section. */
.release-copy .platform-status{display:flex;flex-wrap:wrap;gap:28px;margin:22px 0 0}
.release-copy .platform-status dt{font-size:14px;font-weight:600;color:#2d4567}
.release-copy .platform-status dd{font-size:12px;margin:3px 0 0;color:#68768b}

/* Keep optional audio controls readable at narrow widths. */
.quick-demo .quick-animation-controls{flex-wrap:wrap;justify-content:flex-end}
.quick-demo .quick-animation-sound[aria-pressed="true"]{background:#e8f0ff;color:#285da8;border-color:#8caee3}
@media(max-width:600px){}