/* Download — /download only. Loaded after landing.css, whose pieces it reuses. */
.appicon{display:block;width:96px;height:96px;margin:0 auto;border-radius:22px;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -16px rgba(0,0,0,.45)}
.appicon.sm{width:64px;height:64px;border-radius:15px;margin-bottom:28px}
.dl-hero h1{margin-top:28px}
.dl-hero .lede b{color:var(--text);font-weight:500}
.lp .meta{margin:18px 0 0;font-size:13px;color:var(--faint)}
.elsewhere{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* The desktop render. Without .live (no script, or reduced motion) it rests with the panel up. */
.desk{position:relative;max-width:1000px;height:560px;margin:72px auto 0;border-radius:28px;overflow:hidden;text-align:left;background:linear-gradient(160deg,#f7f7f9 0%,#ececf0 55%,#e4e4e9 100%);border:1px solid var(--line);box-shadow:0 30px 80px -40px rgba(0,0,0,.35)}
.menubar{display:flex;align-items:center;gap:18px;height:30px;padding:0 18px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12.5px;color:var(--text)}
.menubar .apple{width:12px;height:14px;fill:currentColor}
.menubar .right{display:flex;align-items:center;gap:14px;margin-left:auto}
.menubar .mark{width:8px;height:12px;fill:currentColor}
.window{position:absolute;left:7%;top:70px;width:52%;height:360px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 50px -24px rgba(0,0,0,.25);overflow:hidden}
.w-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--faint)}
.w-bar i{width:10px;height:10px;border-radius:50%;background:#e2e2e6}
.w-bar span{margin:0 auto;padding-right:42px}
.w-lines{padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.w-lines i{height:9px;border-radius:999px;background:#efeff2}
.keys-float{position:absolute;right:8%;top:78px;display:flex;gap:8px;z-index:3}
.keys-float kbd{height:44px;min-width:44px;border-radius:12px;font-size:16px;color:var(--text);transition:transform .15s,background .15s,border-bottom-width .15s}
.keys-float kbd.wide{min-width:120px}
.live.is-k1 .keys-float kbd,.live.is-k2 .keys-float kbd{transform:translateY(2px);border-bottom-width:1px;background:#f0f0f3}
.mini-panel{position:absolute;left:50%;top:124px;width:min(600px,86%);height:auto;margin:0;padding-bottom:10px;transform:translateX(-50%);z-index:2}
.live .mini-panel{opacity:0;transform:translateX(-50%) translateY(10px) scale(.97);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.live.is-open .mini-panel{opacity:1;transform:translateX(-50%)}
.mini-panel .p-search{position:relative}
.typed{display:none;overflow:hidden;white-space:nowrap;border-right:1.5px solid var(--ink);width:0;color:var(--text)}
.live.is-typing .ph{display:none}
.live.is-typing .typed{display:block;animation:typein 1.8s steps(27) forwards}
@keyframes typein{to{width:27ch}}
.enter{margin-left:auto;opacity:0;transition:opacity .2s}
.live.is-typing .enter{opacity:1}
.live.is-enter .enter{transform:translateY(2px);border-bottom-width:1px;background:#f0f0f3}
.mini-panel .p-list{padding:4px 12px 0}
.mini-panel .row .when{margin-left:auto}
.live .added{height:0;opacity:0}
.live .added,.live .added .txt{transition:height .45s var(--ease),opacity .4s var(--ease),background .6s}
.live.is-landed .added{height:40px;opacity:1;background:var(--soft)}
.live.is-landed.is-k2 .added,.live.is-landed:not(.is-open) .added{background:transparent}

/* Install */
.install{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.istep{padding:28px;border:1px solid var(--line);border-radius:28px;background:#fff}
.istep .n{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint)}
.istep h3{font-size:18px;letter-spacing:-.02em;font-weight:600;margin:12px 0 6px}
.istep p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.istep p b{color:var(--text);font-weight:500}
.iviz{height:170px;margin:-8px -8px 24px;border-radius:20px;background:var(--soft);display:flex;align-items:center;justify-content:center;gap:16px}
.v-dmg{flex-direction:column;gap:10px}
.v-dmg p{margin:0;font-size:13px;color:var(--text)}
.v-dmg em{font-style:normal;color:var(--faint)}
.dmg{width:58px;height:70px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:end center;padding-bottom:10px;box-shadow:0 10px 24px -14px rgba(0,0,0,.3);animation:bob 5s ease-in-out infinite}
.dmg span{font:600 10px/1 -apple-system,sans-serif;color:var(--muted);padding:3px 6px;border-radius:999px;background:var(--soft)}
.drag-icon{width:52px;height:52px;border-radius:12px;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);animation:dragit 3.4s var(--ease) infinite}
@keyframes dragit{0%,15%{transform:none;opacity:1}55%{transform:translateX(112px) scale(.7);opacity:.2}56%,100%{transform:none;opacity:1}}
.arrow{width:56px;height:12px;fill:none;stroke:#c8c8cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.folder{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.folder svg{width:54px;height:46px;fill:#fff;stroke:#c8c8cf;stroke-width:1.5;stroke-linejoin:round}
.folder .a{fill:none;stroke:var(--ink)}
.v-open .keys kbd{height:46px;min-width:46px;border-radius:13px;font-size:17px;color:var(--text);animation:tap 4s var(--ease) infinite}
.v-open .keys kbd.wide{min-width:132px;animation-delay:.08s}

/* Features */
.palette{width:min(420px,100%);border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px -20px rgba(0,0,0,.3);padding:6px;font-size:13px}
.pal-in{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-bottom:1px solid var(--line);margin-bottom:4px;color:var(--muted);white-space:nowrap;overflow:hidden}
.pal-row{display:flex;align-items:center;justify-content:space-between;height:32px;margin:0;padding:0 10px;border-radius:9px;color:var(--text);animation:pal 6s steps(1) infinite}
.pal-row:nth-of-type(2){animation-delay:1.5s}.pal-row:nth-of-type(3){animation-delay:3s}.pal-row:nth-of-type(4){animation-delay:4.5s}
.pal-row kbd{height:20px;min-width:20px;font-size:11px;padding:0 5px}
.pal-row .stack img{width:20px;height:20px;padding:3px;margin-left:-5px}
.pal-row .stack img:first-child{margin-left:0}
@keyframes pal{0%{background:var(--soft)}25%,100%{background:transparent}}
.a-short{align-items:stretch;padding:22px 28px;gap:8px}
.a-short p{display:flex;align-items:center;justify-content:space-between;margin:0;height:34px;padding:0 6px 0 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.a-short kbd{color:var(--text)}
.a-listen{justify-content:flex-start;align-items:flex-end;padding:0 18px 18px;gap:6px}
.mb-strip{display:flex;align-items:center;gap:12px;align-self:stretch;justify-content:flex-end;height:30px;margin:0 -18px;padding:0 18px;background:rgba(255,255,255,.7);border-bottom:1px solid var(--line);font-size:12px}
.mb-strip .mark{width:8px;height:12px;fill:var(--ink)}
.mb-strip .stack img{width:18px;height:18px;padding:3px;margin-left:-5px}
.mb-strip .stack img:first-child{margin-left:0}
.mb-menu{width:min(300px,100%);margin-top:4px;padding:6px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px -20px rgba(0,0,0,.35);font-size:12.5px}
.mb-menu p{display:flex;align-items:center;gap:8px;margin:0;height:30px;padding:0 8px;white-space:nowrap}
.mb-h{color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px!important}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:pulse2 1.8s infinite}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(10,10,11,.35)}100%{box-shadow:0 0 0 7px rgba(10,10,11,0)}}
.mb-row img{width:14px;height:14px}
.mb-row em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint)}
.upd{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px -20px rgba(0,0,0,.3);animation:drop2 5s var(--ease) infinite}
.upd img{width:36px;height:36px;border-radius:9px}
.upd p{margin:0;font-size:12px;line-height:1.4;color:var(--muted)}
.upd b{display:block;color:var(--text);font-weight:600}
@keyframes drop2{0%{transform:translateY(-14px);opacity:0}10%,85%{transform:none;opacity:1}100%{transform:translateY(-14px);opacity:0}}
.shield{width:64px;height:74px;fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.shield .tick{fill:none;stroke-linecap:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tick 4s var(--ease) infinite}
@keyframes tick{20%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
#beta .final .actions{margin-top:28px}

@media(max-width:980px){
  .install{grid-template-columns:1fr}
  .window{width:70%}
}
@media(max-width:720px){
  .desk{height:460px;border-radius:22px;margin-top:52px}
  .window{left:5%;width:90%;top:56px;height:300px}
  .keys-float{right:auto;left:50%;top:auto;bottom:22px;transform:translateX(-50%)}
  .mini-panel{top:74px;width:92%}
  .mini-panel .row .when,.mini-panel .row .by,.menubar>span:not(.right){display:none}
}
@media(prefers-reduced-motion:reduce){
  .typed{display:none}
}