@font-face{font-family:'Bricolage Grotesque';src:url(fonts/bricolage-grotesque.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(fonts/hanken-grotesk.woff2) format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root{--bg:#0B0D2A;--bg-2:#0E1033;--ink:#E8E9F6;--ink-2:#C9CCEB;--ink-3:#A3A8EC;--accent:#F07A2E;--accent-ink:#1A0B02;
  --gold:#E7B45A;--gold-2:#FFD08A;--line:#1E2258;--card:#14173F;color-scheme:dark}
html{background:var(--bg)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#0B0D2A}
a{color:#E7B45A}a:hover{color:#FFD08A}
.page{font-family:'Hanken Grotesk','Avenir Next','Helvetica Neue',system-ui,sans-serif;color:#E8E9F6;background:#0B0D2A;-webkit-font-smoothing:antialiased}
.display{font-family:'Bricolage Grotesque','Avenir Next Condensed','Avenir Next',system-ui,sans-serif;font-variation-settings:'opsz' 96;letter-spacing:-0.04em}
.mono{font-family:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace}
.stage{container-type:inline-size}
.navlink{color:#C9CCEB;text-decoration:none}.navlink:hover{color:#FFFFFF}
.btn-primary{transition:transform .2s ease,box-shadow .2s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(240,122,46,.45),0 0 0 1px rgba(255,208,138,.6) inset;color:#1A0B02}
.ghost:hover{color:#FFFFFF}
.idx-row{transition:background .25s ease}
.idx-row:hover{background:rgba(163,168,236,.06)}
.idx-row:hover .idx-num{color:#F07A2E}

@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.tw1{animation:twinkle 3.2s ease-in-out infinite}
.tw2{animation:twinkle 4.7s ease-in-out infinite 1.1s}
.tw3{animation:twinkle 6.1s ease-in-out infinite 2.3s}

@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.in1{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both .05s}
.in2{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both .18s}
.in3{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both .32s}
.in4{animation:heroIn 1.2s cubic-bezier(.2,.7,.2,1) both .45s}


/* layout morph: 12s loop */
@keyframes p1{0%,22%{left:0;top:0;width:50%;height:100%}25%,47%{left:0;top:0;width:50%;height:100%}50%,72%{left:0;top:0;width:50%;height:50%}75%,97%{left:0;top:0;width:33.33%;height:100%}100%{left:0;top:0;width:50%;height:100%}}
@keyframes p2{0%,22%{left:50%;top:0;width:50%;height:100%}25%,47%{left:50%;top:0;width:50%;height:50%}50%,72%{left:50%;top:0;width:50%;height:50%}75%,97%{left:33.33%;top:0;width:33.33%;height:100%}100%{left:50%;top:0;width:50%;height:100%}}
@keyframes p3{0%,22%{left:100%;top:50%;width:0;height:50%;opacity:0}25%,47%{left:50%;top:50%;width:50%;height:50%;opacity:1}50%,72%{left:50%;top:50%;width:50%;height:50%;opacity:1}75%,97%{left:66.66%;top:0;width:33.34%;height:100%;opacity:1}100%{left:100%;top:0;width:0;height:100%;opacity:0}}
@keyframes p4{0%,47%{left:0;top:100%;width:50%;height:0;opacity:0}50%,72%{left:0;top:50%;width:50%;height:50%;opacity:1}75%,100%{left:0;top:100%;width:33.33%;height:0;opacity:0}}
.p1{animation:p1 12s cubic-bezier(.7,0,.2,1) infinite}
.p2{animation:p2 12s cubic-bezier(.7,0,.2,1) infinite}
.p3{animation:p3 12s cubic-bezier(.7,0,.2,1) infinite}
.p4{animation:p4 12s cubic-bezier(.7,0,.2,1) infinite}
@keyframes lab{0%,2%{opacity:0;transform:translateY(8px)}5%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-8px)}}
.lab1{animation:lab 12s ease infinite}
.lab2{animation:lab 12s ease infinite 3s;opacity:0}
.lab3{animation:lab 12s ease infinite 6s;opacity:0}
.lab4{animation:lab 12s ease infinite 9s;opacity:0}

/* connections orbit */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
.spin60{animation:spin 70s linear infinite}
.rev60{animation:spinrev 70s linear infinite}
.spin90{animation:spin 110s linear infinite}
.rev90{animation:spinrev 110s linear infinite}

/* keyboard */
@keyframes press{0%,9%,100%{transform:translateY(0);border-bottom-width:5px;box-shadow:0 0 0 rgba(240,122,46,0)}
 3%,6%{transform:translateY(3px);border-bottom-width:2px;box-shadow:0 0 28px rgba(240,122,46,.55)}}
.kc{animation:press 5.4s ease infinite}
@keyframes caret{50%{opacity:0}}
.caret{animation:caret 1s steps(1) infinite}

/* rename + sync */
@keyframes nameIn{0%,8%{opacity:0;transform:translateX(-10px)}14%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.nm{animation:nameIn 7s ease infinite both}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.sweep{animation:sweep 3.6s ease-in-out infinite}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bob{animation:bob 6s ease-in-out infinite}

@supports (animation-timeline: view()){
 @keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
 /* Done once half the element is in view: the last section can never scroll far enough to cover more. */
 .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
}
@media (prefers-reduced-motion: reduce){.page *{animation:none !important}}

/* download page */
@keyframes dmg{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
.dmg{animation:dmg 4s ease-in-out infinite}
@keyframes drag{0%,12%{left:8%;top:30%;transform:scale(1);opacity:1}
 55%{left:62%;top:22%;transform:scale(.85);opacity:1}
 66%{left:66%;top:34%;transform:scale(.35);opacity:0}
 67%,100%{left:8%;top:30%;transform:scale(1);opacity:0}}
.drag{animation:drag 4.5s cubic-bezier(.55,.05,.3,1) infinite}
@keyframes ghostIn{0%,62%{opacity:0}70%,100%{opacity:1}}
@keyframes folderPop{0%,58%,74%,100%{transform:scale(1)}64%{transform:scale(1.08)}}
.folder{animation:folderPop 4.5s ease infinite}
@keyframes knob{0%,25%{transform:translateX(0)}35%,85%{transform:translateX(22px)}95%,100%{transform:translateX(0)}}
@keyframes track{0%,25%{background:#3A3E86}35%,85%{background:#3FB36B}95%,100%{background:#3A3E86}}
.knob{animation:knob 5s ease infinite}
.track{animation:track 5s ease infinite}

.preset-btn{min-height:44px;padding:0 22px;border:0;border-radius:999px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;background:transparent;color:var(--ink-2)}
.preset-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.preset-btn:focus-visible,.btn-primary:focus-visible,.navlink:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.is-disabled{opacity:.6;pointer-events:none;cursor:default}
.sha{overflow-wrap:anywhere}
.replica{position:relative;width:100%;aspect-ratio:var(--w)/var(--h);overflow:hidden}
.replica--contain{aspect-ratio:auto;height:100%}
.replica-stage{position:absolute;left:0;top:0;transform-origin:0 0;transform:translateX(var(--dx,0px)) scale(var(--s,1))}
.rp{font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;white-space:nowrap;letter-spacing:0;color:#FFFFFFD9}
.rp div,.rp span,.rp i{position:absolute;box-sizing:border-box;margin:0}
.rp [data-t]{overflow:hidden;text-overflow:ellipsis;white-space:pre}
.rp i{-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.prose{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:24px 32px 110px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.prose h1{margin:0 0 28px;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:#FFF}
.prose h2{margin:44px 0 12px;font-size:28px;color:#FFF}
.prose h3,.prose h4{margin:26px 0 8px;color:#FFF}
.prose code{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:.9em;color:var(--gold-2)}
.release{padding:36px 0;border-bottom:1px solid var(--line)}
.release-date{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
@keyframes dragDmg{0%,12%{transform:translate(0,0) scale(1);opacity:1}55%{transform:translate(264px,1px) scale(.9);opacity:1}
 66%{transform:translate(264px,1px) scale(.4);opacity:0}67%,100%{transform:translate(0,0) scale(1);opacity:0}}
.drag-dmg{animation:dragDmg 4.5s cubic-bezier(.55,.05,.3,1) infinite}

/* hero replica: the mockup's 8 s copy loop on the real UI (website/README.md: Replicas). The new row appears when the
   copy starts, as in the app; the progress is linear so dev/compare.html can freeze it at the captured 52 %. */
@keyframes heroFly{0%,19%{transform:translate(var(--fx),var(--fy)) scale(.8);opacity:0}
 21%{transform:translate(var(--fx),var(--fy)) scale(1);opacity:1}
 46%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:1}
 49%,100%{transform:translate(var(--tx),var(--ty)) scale(.7);opacity:0}}
.hero-fly{left:0;top:0;animation:heroFly 8s cubic-bezier(.55,.05,.3,1) infinite}
@keyframes heroKey{0%,14%,26%,100%{filter:none}17%,22%{filter:brightness(1.6) drop-shadow(0 0 6px var(--accent))}}
.hero-f5{animation:heroKey 8s ease infinite}
@keyframes heroOps{0%,19%{opacity:0}21%,48%{opacity:1}52%,100%{opacity:0}}
.hero-ops{animation:heroOps 8s ease infinite}
@keyframes heroLift{0%,19%{transform:none}21%,48%{transform:translateY(-28px)}52%,100%{transform:none}}
.hero-lift{animation:heroLift 8s ease infinite}
@keyframes heroProg{0%,20%{transform:scaleX(0)}48%,100%{transform:scaleX(1)}}
.hero-prog{transform-origin:0 50%;animation:heroProg 8s linear infinite}
@keyframes heroRow{0%,22%{opacity:0}26%,90%{opacity:1}96%,100%{opacity:0}}
.hero-row{animation:heroRow 8s ease infinite}
@keyframes heroRowOut{0%,22%{opacity:1}26%,90%{opacity:0}96%,100%{opacity:1}}
.hero-count-old{animation:heroRowOut 8s ease infinite}
@keyframes heroShift{0%,22%{transform:none}26%,90%{transform:translateY(22px)}96%,100%{transform:none}}
.hero-shift{animation:heroShift 8s ease infinite}

/* Batch cards: Orbit's Multi-Rename and Synchronize Folders windows in dark mode (colours from website/reference). */
.mw{border-radius:12px;overflow:hidden;background:#1E2226;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.45);font:13px/1.35 -apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;color:rgba(255,255,255,.85);-webkit-font-smoothing:antialiased;text-align:left}
.mw-bar{position:relative;height:30px;display:flex;align-items:center;padding:0 12px}
.mw-lights{display:flex;gap:8px}.mw-lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.mw-lights i:nth-child(2){background:#FEBC2E}.mw-lights i:nth-child(3){background:#28C840}
.mw-title{position:absolute;left:0;right:0;text-align:center;font-weight:600;color:rgba(255,255,255,.55);pointer-events:none}
.mw-body{display:flex;flex-direction:column;gap:10px;padding:4px 14px 14px}
.mw-group{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;padding:10px 12px;border-radius:10px;background:#272B2F}
.mw-label{text-align:right}
.mw-field{position:relative;min-width:0;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);white-space:nowrap;overflow:hidden}
.mw-caret{display:inline-block;width:1px;height:14px;margin-left:1px;vertical-align:-2px;background:var(--accent)}
.mw-note{margin:0;color:rgba(255,255,255,.55)}.mw-note b{color:rgba(255,255,255,.85);font-weight:600}
.mw-scroll{overflow-x:auto}
.mw-table{min-width:420px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 .5px rgba(255,255,255,.12)}
.mw-th,.mw-tr{display:grid;grid-template-columns:var(--cols);gap:8px;align-items:center;padding:0 10px;white-space:nowrap}
.mw-th{height:26px;font-weight:600;border-bottom:.5px solid rgba(255,255,255,.12)}
.mw-tr{height:24px}.mw-tr:nth-child(odd){background:#2C3032}
.mw-tr span{overflow:hidden;text-overflow:ellipsis}
.mw-num{text-align:right}.mw-act{text-align:center}
.mw-dim{color:rgba(255,255,255,.55)}.mw-red{color:#FF4245}.mw-blue{color:#0091FF}.mw-green{color:#30D158}
.mw-icon{display:inline-block;width:14px;height:13px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mw-paths{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;overflow:hidden;border-radius:6px}
.mw-swap{color:#0A84FF;font-size:15px}
.mw-sweep{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(231,180,90,.16),transparent);pointer-events:none}
.mw-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mw-foot-end{display:flex;gap:8px}
.mw-btn{padding:3px 14px;border-radius:7px;background:rgba(255,255,255,.12);box-shadow:inset 0 .5px 0 rgba(255,255,255,.18);white-space:nowrap}
.mw-btn--default{background:#0A84FF;color:#FFF}