/* Burrow page: its accent, and the drawn window, columns and Drop Shelf used by the hero and the feature pictures. */
:root { --tint: #4c6191; --blue: var(--tint); }
@media (prefers-color-scheme: dark) { :root { --tint: #a8b8d8; } }

.b-hero-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--shadow); }
.feature .q { color: var(--tint); }
.privacy-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: var(--card); border: 1px solid var(--line);
                border-radius: 28px; padding: 40px; box-shadow: var(--shadow); }
.privacy-card h2 { margin-top: 10px; }
.privacy-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.privacy-card li { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--soft); font-size: 15px; }
.privacy-card li b { color: var(--ink); display: block; font-size: 15.5px; margin-bottom: 2px; }
.privacy-card .lead { margin-bottom: 18px; }
.privacy-card a.more { color: var(--tint); font-weight: 600; }
@media (max-width: 860px) { .privacy-card { grid-template-columns: 1fr; padding: 24px; } }

/* ---------- Why switch: Finder vs Burrow ---------- */
.vs-wrap { max-width: 980px; margin: 0 auto; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px;
      box-shadow: var(--shadow); overflow: hidden; text-align: left; font-size: 15.5px; }
.vs th, .vs td { padding: 18px 22px; vertical-align: top; border-top: 1px solid var(--line); }
.vs thead th { border-top: 0; padding-top: 20px; padding-bottom: 16px; font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); vertical-align: middle; }
.vs thead th.b { color: var(--tint); }
.vs thead th.b img { width: 22px; height: 22px; border-radius: 6px; vertical-align: -6px; margin-right: 9px; }
.vs tbody th { width: 26%; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.vs td { width: 28%; color: var(--soft); }
.vs td.b, .vs thead th.b { width: 46%; background: color-mix(in srgb, var(--tint) 7%, var(--card)); color: var(--ink); }
.vs .b b { font-weight: 650; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.same { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 20px auto 0; color: var(--soft); font-size: 15px; text-align: center; }
.same b { color: var(--ink); font-weight: 650; }
.same span + span::before { content: "·"; margin-right: 10px; }
@media (max-width: 720px) {
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs thead { display: none; }
  .vs tbody th, .vs td.b { width: auto; }
  .same b { flex-basis: 100%; }
  .same span + span::before { content: none; }
  .same span { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px; font-size: 14px; }
  .vs tr { border-top: 1px solid var(--line); padding: 18px 18px 16px; }
  .vs tbody tr:first-child { border-top: 0; }
  .vs th, .vs td { border: 0; padding: 0; }
  .vs tbody th { margin-bottom: 10px; }
  .vs td { padding: 10px 12px; font-size: 15px; }
  .vs td::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 600 11px/1.6 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
  .vs td.b { border-radius: 12px; margin-top: 4px; }
  .vs td.b::before { color: var(--tint); }
}

/* ---------- Make it your default ---------- */
.b-default { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; }
.b-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.b-facts li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 18px 54px; color: var(--soft); font-size: 15px; box-shadow: var(--shadow); }
.b-facts li b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 3px; letter-spacing: -.01em; }
.b-facts li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; border-radius: 99px; background: var(--dot) center / 12px no-repeat, var(--dbg); }
.b-facts .to { --dbg: var(--tint); --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.b-facts .stay { --dbg: var(--grey); --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.b-facts .ret { --dbg: #2fa84f; --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { .b-facts .to { --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } }
.b-remove { max-width: 820px; margin: 28px auto 0; }
.b-remove ol { color: var(--soft); padding-left: 20px; margin-top: 4px; }
.b-remove li { margin: 6px 0; }
.b-remove li b { color: var(--ink); }
.b-remove code { background: var(--line); padding: 1px 6px; border-radius: 6px; font-size: 13.5px; overflow-wrap: anywhere; }
@media (max-width: 860px) { .b-default { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- the drawn Mac (".bm") ---------- */
.bm {
  --win: #ffffff; --side: #eef0f4; --bar: #f6f6f8; --ink2: #1d1d1f; --muted: #6e6e76; --hair: rgba(0,0,0,.09); --hover: rgba(0,0,0,.05);
  --sel: #4f6ea8; --sel-dim: rgba(0,0,0,.08); --fc: #6b7d94; --card2: #ffffff;
  --wall: radial-gradient(70% 90% at 0% 0%, #cfd8ea 0, transparent 60%), radial-gradient(60% 80% at 100% 100%, #c3cfe6 0, transparent 60%), linear-gradient(160deg, #e4e9f3, #d1d9ea);
  position: relative; overflow: hidden; color: var(--ink2); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 12.5px;
}
@media (prefers-color-scheme: dark) {
  .bm { --win: #1e1f23; --side: #26272c; --bar: #2a2b30; --ink2: #f1f1f4; --muted: #9d9ea8; --hair: rgba(255,255,255,.09); --hover: rgba(255,255,255,.06);
        --sel: #4d6aa6; --sel-dim: rgba(255,255,255,.1); --fc: #7d8ea6; --card2: #2a2b31;
        --wall: radial-gradient(70% 90% at 0% 0%, #26324d 0, transparent 60%), radial-gradient(60% 80% at 100% 100%, #1d2a44 0, transparent 60%), linear-gradient(160deg, #141826, #0d1019); }
}
.bm .wall { position: absolute; inset: 0; background: var(--wall); }
.bm .g { display: inline-block; width: 15px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.bm {
  --home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9h-5v-6H9v6H4z'/%3E%3C/svg%3E");
  --desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M9 21h6M12 17v4'/%3E%3C/svg%3E");
  --doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E");
  --down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v9M8 12.5l4 4 4-4'/%3E%3C/svg%3E");
  --stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
  --clean: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E");
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-.5-8A6 6 0 0 1 18 9a4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
  --drive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='9' rx='2'/%3E%3Cpath d='M7 12.5h.01M11 12.5h.01'/%3E%3C/svg%3E");
  --left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
  --list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
  --cols: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E");
  --gal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='11' rx='2'/%3E%3Cpath d='M4 19h3M10.5 19h3M17 19h3'/%3E%3C/svg%3E");
  --search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
  --tray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 2h6l1-2h5'/%3E%3C/svg%3E");
  --split: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

/* folders: Burrow's glass folder (tinted back with its tab, a sheet of paper, a lighter front) */
.bm .fold { --s: 16px; position: relative; display: inline-block; flex: none; width: var(--s); height: calc(var(--s) * .8); border-radius: calc(var(--s) * .08);
            background: linear-gradient(var(--fc), var(--fc)) 0 0 / 44% 30% no-repeat, linear-gradient(var(--fc), color-mix(in srgb, var(--fc) 80%, transparent)) 0 14% / 100% 86% no-repeat; }
.bm .fold::before { content: ""; position: absolute; left: 10%; right: 10%; top: 18%; height: 44%; border-radius: calc(var(--s) * .04); background: rgba(255,255,255,.92); }
.bm .fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 66%; border-radius: calc(var(--s) * .09);
                   background: linear-gradient(color-mix(in srgb, var(--fc) 62%, white), var(--fc)); box-shadow: inset 0 0 0 max(.5px, calc(var(--s) * .012)) rgba(255,255,255,.35), 0 calc(var(--s) * .01) calc(var(--s) * .04) rgba(0,0,0,.14); }
.bm .fold > em { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 66%; display: grid; place-items: center; color: rgba(255,255,255,.92); }
/* files: a page with a coloured band, or a picture */
.bm .fi { position: relative; display: inline-block; flex: none; width: 13px; height: 16px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); overflow: hidden; }
.bm .fi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--c, #8a8f99); }
.bm .pic { display: inline-block; flex: none; width: 16px; height: 13px; border-radius: 2px; background: var(--c, linear-gradient(135deg, #8fb3e6, #e5b1c7)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

/* window */
.bm .bw { position: absolute; border-radius: 12px; background: var(--win); overflow: hidden; display: grid; grid-template-columns: 172px 1fr; grid-template-rows: 46px 1fr;
          box-shadow: 0 0 0 1px var(--hair), 0 28px 70px rgba(15,25,50,.22), 0 6px 16px rgba(15,25,50,.08); }
.bm .side { grid-row: 1 / 3; background: var(--side); padding: 46px 8px 0; border-right: 1px solid var(--hair); position: relative; }
.bm .lights { position: absolute; left: 16px; top: 17px; display: flex; gap: 8px; }
.bm .lights i { width: 12px; height: 12px; border-radius: 99px; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.bm .lights i:nth-child(2) { background: #febc2e; } .bm .lights i:nth-child(3) { background: #28c840; }
.bm .side h6 { margin: 12px 8px 4px; font-size: 10.5px; font-weight: 650; color: var(--muted); }
.bm .side p { margin: 0; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; }
.bm .side p .g { color: var(--sel); }
.bm .side p.on { background: var(--sel-dim); }
.bm .side p i.tag { width: 9px; height: 9px; border-radius: 99px; margin: 0 3px; }
.bm .tbar { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--win); border-bottom: 1px solid var(--hair); min-width: 0; }
.bm .tbar .navb { display: flex; gap: 2px; color: var(--muted); }
.bm .tbar .navb .g { width: 22px; height: 16px; }
.bm .tbar b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bm .tbar .sp { flex: 1; }
.bm .seg { display: flex; background: var(--hover); border-radius: 7px; padding: 2px; }
.bm .seg i { width: 30px; height: 20px; display: grid; place-items: center; border-radius: 5px; color: var(--muted); }
.bm .seg i.on { background: var(--win); color: var(--ink2); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.bm .seg .g { width: 13px; height: 13px; }
.bm .sfield { display: flex; align-items: center; gap: 6px; width: 150px; height: 26px; border-radius: 7px; background: var(--hover); padding: 0 8px; color: var(--muted); font-size: 12px; }
.bm .sfield .g { width: 12px; height: 12px; }
.bm .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--win); }
.bm .path { height: 30px; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--hair); color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.bm .path .fold { --s: 14px; }
.bm .path span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px; border-radius: 5px; }
.bm .path span.cur { color: var(--ink2); font-weight: 600; }
.bm .path .g { width: 9px; height: 9px; opacity: .6; }

/* columns */
.bm .cols { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.bm .col { width: 162px; flex: none; border-right: 1px solid var(--hair); padding: 4px 0; }
.bm .r { display: flex; align-items: center; gap: 7px; height: 24px; margin: 0 5px; padding: 0 7px; border-radius: 5px; white-space: nowrap; }
.bm .r span { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.bm .r .g { width: 8px; height: 8px; color: var(--muted); }
.bm .r.sel { background: var(--sel-dim); }
.bm .r.on { background: var(--sel); color: #fff; }
.bm .r.on .g { color: rgba(255,255,255,.85); }
.bm .prev { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.bm .prev .art { width: 150px; height: 100px; border-radius: 10px; box-shadow: 0 0 0 1px var(--hair), 0 6px 18px rgba(0,0,0,.12); background: var(--c); position: relative; overflow: hidden; }
.bm .prev h5 { margin: 0; font-size: 13px; font-weight: 650; }
.bm .prev small { color: var(--muted); font-size: 11px; text-align: center; line-height: 1.5; }

/* the Drop Shelf: always dark, like the app's */
.bm .shelf { position: absolute; display: flex; gap: 16px; padding: 14px 16px; border-radius: 20px; color: #fff;
             background: rgba(24,26,34,.86); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
             box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.35); }
.bm .shelf .pins h6 { margin: 0 0 8px; font-size: 9.5px; font-weight: 650; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.bm .shelf .pins h6 small { font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.4); margin-left: 6px; }
.bm .shelf .row { display: flex; gap: 8px; }
.bm .pin { position: relative; width: 78px; height: 82px; border-radius: 12px; background: rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 500; transition: background-color .25s ease, transform .3s ease; }
.bm .pin .fold { --s: 36px; }
.bm .pin b { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 9.5px; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.bm .pin.hit { background: color-mix(in srgb, var(--sel) 60%, transparent); transform: scale(1.04); }
.bm .pin.add { background: none; border: 1px dashed rgba(255,255,255,.22); color: rgba(255,255,255,.5); font-weight: 400; font-size: 10.5px; }
.bm .hold { width: 214px; height: 112px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); padding: 10px; transition: box-shadow .25s ease; align-self: flex-end; }
.bm .hold.hit { box-shadow: inset 0 0 0 1.5px #7f9ad6; }
.bm .hold header { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.bm .hold header > i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.bm .hold header .g { width: 14px; height: 14px; }
.bm .hold header small { font-weight: 400; color: rgba(255,255,255,.5); }
.bm .hold .empty { font-size: 10.5px; color: rgba(255,255,255,.45); padding: 8px 2px; }
.bm .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 11px; color: #fff; white-space: nowrap; }
.bm .chip.drag { background: var(--win); color: var(--ink2); box-shadow: 0 8px 22px rgba(0,0,0,.25), 0 0 0 1px var(--hair); }
.bm .hold .chips { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bm .cursor { width: 18px; height: 24px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* ---------- hero ---------- */
.stage-wrap { --k: 1; width: 100%; max-width: 920px; margin: 48px auto 0; height: calc(520px * var(--k)); }
.stage { width: 920px; height: 520px; border-radius: 26px; transform: scale(var(--k)); transform-origin: 0 0;
         box-shadow: 0 0 0 1px var(--line), 0 40px 90px rgba(15,25,50,.2), 0 8px 24px rgba(15,25,50,.08); }
.stage .bw { left: 40px; top: 32px; right: 40px; height: 340px; }
.stage .shelf { left: 50%; bottom: 22px; transform: translate(-50%, 30px) scale(.96); opacity: 0; transition: opacity .4s ease, transform .55s cubic-bezier(.2,.9,.25,1); }
.stage.shelf-on .shelf { opacity: 1; transform: translate(-50%, 0); }
.stage .col.c2, .stage .col.c3, .stage .prev { opacity: 0; transform: translateX(-14px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.stage.c2-on .col.c2, .stage.c3-on .col.c3, .stage.prev-on .prev { opacity: 1; transform: none; }
.stage .r { transition: background-color .2s ease, color .2s ease; }
.stage .c3 .r.new { opacity: 0; transform: translateY(-4px); transition: opacity .35s ease, transform .35s ease; }
.stage .c3 .r.new.in { opacity: 1; transform: none; }
.stage:not(.holding) .hold .chips { display: none; }
.stage .set-b { display: none; }
.stage.garden .set-a { display: none; } .stage.garden .set-b { display: block; }
.stage .fly { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 0; opacity: 0; pointer-events: none;
              transition: transform .8s cubic-bezier(.45,.05,.25,1), opacity .25s ease; }
.stage .fly .cursor { margin: 12px 0 0 -6px; }
.stage .fly.on { opacity: 1; }
.stage .hold .chip { opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.4,.5,1); }
.stage .hold .chip.in { opacity: 1; transform: none; }
.stage .hold .empty { transition: opacity .2s ease; }
.stage.holding .hold .empty { opacity: 0; height: 0; padding: 0; overflow: hidden; }
/* opening beat: another app's "Show in Finder" opens Burrow */
.stage .bw { transition: opacity .5s ease, transform .7s cubic-bezier(.2,.9,.25,1); }
.stage:not(.win-on) .bw { opacity: 0; transform: translateY(18px) scale(.95); }
.stage .ask { position: absolute; left: 270px; top: 120px; z-index: 3; transition: opacity .35s ease, transform .45s ease; }
.stage.win-on .ask { opacity: 0; transform: scale(.96); }
.bm .app { position: relative; width: 300px; padding: 38px 8px 8px; border-radius: 12px; background: var(--win);
           box-shadow: 0 0 0 1px var(--hair), 0 22px 50px rgba(15,25,50,.2); }
.bm .app .lights { left: 14px; top: 14px; gap: 7px; } .bm .app .lights i { width: 11px; height: 11px; }
.bm .app h6 { position: absolute; top: 12px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; font-weight: 650; color: var(--ink2); }
.bm .dl { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: 8px; }
.bm .dl .pic, .bm .dl .fi { transform: scale(1.5); margin: 0 4px; }
.bm .dl span { display: flex; flex-direction: column; font-weight: 550; line-height: 1.3; }
.bm .dl small { color: var(--muted); font-weight: 400; font-size: 11px; }
.bm .dl.on { background: var(--sel-dim); }
.bm .menu { position: absolute; left: 196px; top: 64px; width: 168px; padding: 5px; border-radius: 10px; font-size: 12.5px;
            background: color-mix(in srgb, var(--win) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 0 0 1px var(--hair), 0 14px 34px rgba(15,25,50,.22); }
.bm .menu p { margin: 0; height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 5px; transition: background-color .15s ease, color .15s ease; }
.bm .menu hr { border: 0; height: 1px; background: var(--hair); margin: 4px 6px; }
.bm .menu .go.hot { background: var(--sel); color: #fff; }
.stage .menu { opacity: 0; transform: scale(.96); transform-origin: 0 0; transition: opacity .2s ease, transform .25s ease; }
.stage.menu-on .menu { opacity: 1; transform: none; }
.stage .cap { position: absolute; left: 50%; bottom: 46px; z-index: 4; transform: translateX(-50%); height: 34px; min-width: 300px; display: grid; }
.stage .cap span { grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 99px; white-space: nowrap;
                   font-size: 13px; font-weight: 600; color: #fff; background: rgba(24,26,34,.84); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
                   box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.25); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .45s ease; }
.stage.cap1 .cap .c1, .stage.cap2 .cap .c2 { opacity: 1; transform: none; }
.stage .fly.bare .chip { display: none; }
.stage .fly.bare .cursor { margin: 0; }
.stage .fly.press .cursor { transform: scale(.88); transition: transform .12s ease; }
.stage .scene { transition: opacity .5s ease; }
.stage.fade .scene { opacity: 0; }
.stage.still, .stage.still * { transition: none !important; }
@media (max-width: 640px) {
  .stage { width: 480px; }
  .stage .bw { left: 14px; right: 14px; grid-template-columns: 0 1fr; }
  .stage .col { width: 140px; }
  .stage .hold { width: 170px; }
  .stage .shelf .pins h6 small { display: none; }
  .stage .side > :not(.lights) { display: none; }
  .stage .bw .sfield, .stage .bw .tbar b { display: none; }
  .stage .lights { left: 14px; }
  .stage .tbar { padding-left: 76px; }
  .stage .prev { display: none; }
  .stage .ask { left: 40px; top: 70px; }
  .bm .menu { left: 168px; }
}
@media (prefers-reduced-motion: reduce) { .stage, .stage * { transition: none !important; } }
@media (max-width: 640px) { .stage .pin.wide { display: none; } }
#more .grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }