:root{
  --bg:#0d0d11; --surface:#17171e; --surface-hi:#1f1f28;
  --fg:#f4f4f7; --muted:#8a8a99; --line:#262630;
  --tint:#8B3FEB; --tint-deep:#712BD2; --tint-text:#af4bff; --on-tint:#fff;
  --warn:#f5a524;
  --danger:#e5484d; --danger-deep:#c2333a; --danger-text:#e07a6f;
  --success:#34a866; --success-deep:#248049; --success-text:#6ddc99;
  --sileo:#30C2BF; --zebra:#333333;
  --tint-soft:color-mix(in srgb,var(--tint) 16%,transparent);
  --tint-edge:color-mix(in srgb,var(--tint) 55%,transparent);
  --press:color-mix(in srgb,var(--fg) 5%,transparent);
  --scrim:rgba(0,0,0,.62);
  --pop-shadow:0 4px 14px rgba(0,0,0,.45);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-label:.66rem; --t-caption:.78rem; --t-small:.87rem; --t-body:.95rem;
  --t-title:1.1rem; --t-h2:1.3rem; --t-h1:1.75rem; --t-display:2.05rem;
  --r-xs:6px; --r-sm:10px; --r-md:13px; --r-lg:18px; --r-xl:20px; --r-pill:999px; --r-icon:22.5%;
  --ease-sheet:cubic-bezier(.32,.72,0,1); --rise:.2s var(--ease-sheet); --rise-delay:.3s;
  --row-h:78px; --list-row:calc(52px + 1.2rem); --page:1040px; --prose:680px; --nest:1.15rem; --shell-h:4rem; --ledge:5px; --ledge-color:var(--line);
  --lift:0 20px 44px -16px rgba(0,0,0,.85), 0 3px 8px rgba(0,0,0,.5);
  --ledge-plain:#3a3a46; --ledge-sileo:#259795; --ledge-zebra:#888888; --ledge-tint:#BC55FF;
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 18.5v9M18.5 23h9' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='6' r='1' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
a.btn, .nav a, .brand, .get a, .mget, .minj, .mclose, .smore, .grp > summary, .grab, .btt, .act, .door, .copy, .jb, .na,
.badge, .icon, .micon, .ic, .i, .chev{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none; user-drag:none}
img, svg{-webkit-user-drag:none; user-drag:none; pointer-events:none}
a.btn img, a.btn svg, .nav a svg, .brand img{pointer-events:none}

html{height:100%; scrollbar-gutter:stable both-edges}
body{margin:0; background:var(--bg); color:var(--fg); padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
  font:16px/1.5 var(--font);
  -webkit-font-smoothing:antialiased}
body.catalog{height:100%; overflow-y:auto; overscroll-behavior-y:contain; min-width:320px}
html.locked body.catalog{overflow:hidden}
body.install{height:100%; overflow-y:auto; overscroll-behavior-y:contain; min-width:320px;
  scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ body.install{scroll-behavior:auto} }

code{font:500 var(--t-caption)/1 var(--mono);
  background:var(--surface-hi); border:1px solid var(--line); border-radius:var(--r-xs);
  padding:.12rem .4rem; color:var(--fg); white-space:nowrap}

a{color:var(--tint-text); text-decoration:none}
p a, li a, dd a, .tx a{text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--tint-text) 35%,transparent);
  text-underline-offset:2px; text-decoration-thickness:1px}
@media (hover: hover){ p a:hover, li a:hover, dd a:hover, .tx a:hover{text-decoration-color:var(--tint-text)} }

h1{margin:0; font-size:var(--t-display); font-weight:700; letter-spacing:-.03em}

.hide{display:none !important}
html:not(.ready) *, html:not(.ready) *::before, html:not(.ready) *::after{transition:none !important}
:focus-visible{outline:2px solid var(--tint-text); outline-offset:2px}

.i-copy, .i-check{fill:currentColor}
.copy .i-check, .bid .i-check, .info dd button .i-check{display:none}
.copy.done .i-copy, .bid.done .i-copy, .info dd button.done .i-copy{display:none}
.copy.done .i-check, .bid.done .i-check, .info dd button.done .i-check{display:inline-flex}
.lock{width:16px; height:16px; fill:currentColor}

.home .lbl, .cmb .card > .lbl{font-size:var(--t-label); text-transform:uppercase; letter-spacing:.13em;
  color:var(--muted); font-weight:700; margin-bottom:.85rem; padding-left:.15rem}
.flbl{font-size:var(--t-label); text-transform:uppercase; letter-spacing:.13em; color:var(--muted);
  font-weight:700; margin:0 0 .55rem}
.eyebrow{font-size:var(--t-label); text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  font-weight:700; margin:.15rem 0 .3rem}

:is(a.btn, .act, .pick, .bup){--ledge-color:var(--ledge-plain); --glow:0 0 0 0 transparent; --d:var(--ledge);
  position:relative; top:0;
  box-shadow:0 var(--ledge) 0 0 var(--ledge-color), var(--glow);
  transition:top var(--rise), box-shadow var(--rise), background .15s ease, border-color .15s ease}
:is(a.btn, .act, .pick, .bup):is(.press, .busy, .down, [disabled], .on, .drag, .done), .btt:is(.press, .busy, :not(.on)) .bup{
  top:var(--ledge); --d:0px; box-shadow:0 0 0 0 var(--ledge-color), var(--glow);
  transition:top .08s ease, box-shadow .08s ease, background .15s ease, border-color .15s ease}
@media (hover: hover){
  :is(a.btn, .act, .pick, .bup):hover:not(.press, .busy, .down, [disabled], .on, .drag, .done, .nohover){
    top:-1px; --d:calc(var(--ledge) + 1px); box-shadow:0 calc(var(--ledge) + 1px) 0 0 var(--ledge-color), var(--glow);
    transition:top .08s ease, box-shadow .08s ease, background .15s ease, border-color .15s ease}
}
@media (prefers-reduced-motion: reduce){ :is(a.btn, .act, .pick, .bup){transition:none !important} }
@media (prefers-reduced-motion: no-preference){
  html:not(.ready) :is(a.btn, .act, .pick, .bup){top:var(--ledge); --d:0px; box-shadow:0 0 0 0 var(--ledge-color), var(--glow)}
  html:not(.settled) :is(a.btn, .act, .pick, .bup):not(.press){transition-delay:var(--rise-delay), var(--rise-delay), 0s, 0s}
}

a.btn{display:flex; align-items:center; gap:.7rem; text-decoration:none;
  font-weight:600; font-size:var(--t-body); padding:.85rem 1rem; border-radius:var(--r-md);
  margin-bottom:calc(.5rem + var(--ledge)); background:var(--surface-hi); color:var(--fg);
  border:1px solid var(--line)}
a.btn:last-child{margin-bottom:calc(1.15rem + var(--ledge))}
a.btn.sileo{--ledge-color:var(--ledge-sileo)}
a.btn.zebra{--ledge-color:var(--ledge-zebra)}
a.btn.primary{--ledge-color:var(--ledge-tint)}
@media (hover: hover){
  a.btn:hover:not(.press){background:color-mix(in srgb,var(--fg) 4%,var(--surface-hi))}
}
a.btn .ic{width:26px;height:26px;border-radius:var(--r-sm);flex:none}
a.btn .ic.tile{display:grid; place-items:center; background:var(--tint); color:var(--on-tint)}
.btn:not(.primary) .ic.tile{background:color-mix(in srgb,var(--fg) 13%,transparent); color:var(--fg)}
a.btn .ic.tile .i{width:16px; height:16px; fill:currentColor}
a.btn .chev.i{width:15px; height:15px; fill:currentColor}
a.btn .chev{margin-left:auto; opacity:.42; flex:none}

.get a, .get .na, .mget, .pick.done .end.save{
  --pill-bg:var(--surface-hi); --pill-fg:var(--tint-text);
  --pill-bg-on:var(--pill-bg); --pill-fg-on:var(--pill-fg); --pill-min:0;
  box-sizing:border-box; flex:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-width:var(--pill-min); min-height:2rem;
  font:700 var(--t-caption)/1 var(--font);
  border:0; border-radius:var(--r-pill); padding:0 1.1rem;
  text-decoration:none; cursor:pointer;
  background:var(--pill-bg); color:var(--pill-fg);
  transition:background .14s, color .14s}
.get a.press, .mget.press, .pick.done .end.save.press{
  background:var(--pill-bg-on); color:var(--pill-fg-on)}
@media (hover: hover){
  .get a:hover, .mget:hover, .pick.done .end.save:hover{
    background:var(--pill-bg-on); color:var(--pill-fg-on); text-decoration:none}
}
.mget.busy, .get a.busy{position:relative; pointer-events:none;
  background:none; box-shadow:none; color:transparent}
.mget.busy::after, .get a.busy::after{
  content:""; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid color-mix(in srgb,var(--muted) 40%,transparent); border-top-color:var(--tint-text);
  border-radius:50%; animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .mget.busy::after, .get a.busy::after{animation:none; border-top-color:transparent}
}

.na, .hint{--tip:""; --tip-w:max-content; --tip-wrap:nowrap; --tip-align:left; --tip-size:var(--t-label)}
.na::after, .hint::after{content:var(--tip); position:absolute; z-index:4;
  width:var(--tip-w); max-width:14rem; white-space:var(--tip-wrap); text-align:var(--tip-align);
  font:500 var(--tip-size)/1.45 var(--font); letter-spacing:0; text-transform:none;
  color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xs);
  padding:.32rem .48rem; box-shadow:var(--pop-shadow);
  opacity:0; pointer-events:none; transition:opacity .14s ease}
.na::after{right:0; top:calc(100% + .3rem)}
.hint::after{right:0; bottom:calc(100% + .35rem)}
.na.show::after, .hint.show::after,
.na:focus-visible::after, .hint:focus-visible::after{opacity:1}
@media (hover: hover){ .na:hover::after, .hint:hover::after{opacity:1} }
.na:focus:not(:focus-visible), .hint:focus:not(:focus-visible){outline:none}

.copy{display:flex; align-items:center; gap:.55rem; width:calc(100% + 2.3rem);
  margin:.35rem -1.15rem 0; padding:.8rem 1.15rem;
  background:none; border:0; border-top:1px solid var(--line);
  color:var(--muted); cursor:pointer; text-align:left;
  font:500 var(--t-caption)/1 var(--mono);
  transition:background .15s,color .15s}
@media (hover: hover){ .copy:hover{background:var(--surface-hi); color:var(--fg)} }
.copy.press{background:var(--surface-hi); color:var(--fg)}
.copy .u{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.copy.done{color:var(--tint-text)}
.copy .i-check{flex:none}
.copy .i{width:14px; height:14px; flex:none}

.nav a.press{color:var(--fg)}
.brand.press{opacity:.82}
footer a.press{color:var(--tint-text)}
.door.press{background:var(--surface-hi); border-color:var(--tint-edge)}

.note{--edge:var(--line); display:flex; gap:.6rem; align-items:flex-start;
  background:var(--surface); border:0; border-left:2px solid var(--edge);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:.6rem .8rem; color:var(--muted)}
.note.caution{--edge:var(--warn)}
.note .ic{flex:none; color:var(--muted); margin-top:.1rem}
.note.caution .ic{color:var(--warn)}
.note .ic .i{width:17px; height:17px; fill:currentColor}
.note .tx{flex:1; min-width:0; font-size:var(--t-small); line-height:1.55; color:var(--muted)}
.note .tx b{color:var(--fg)}
.note .also:not(:empty){display:block; margin-top:.75rem}
.note .also b{display:block; margin-bottom:.3rem}
.mnote{margin:0 0 1.15rem}
.note.bad{--edge:var(--danger); --chip:var(--bg); margin:0 0 1.15rem}
.note.bad .ic{color:var(--danger-text)}
.note.bad.caution{--edge:var(--warn)}
.note.bad.caution .ic{color:var(--warn)}
.note.bad .tx{display:grid; gap:.3rem}
.note.bad .gd{white-space:nowrap}
.note.bad .det{line-height:1.5; overflow-wrap:anywhere}

.chip{justify-self:start; width:fit-content; max-width:100%;
  font:400 var(--t-caption)/1.3 var(--mono); padding:.2rem .45rem;
  border-radius:var(--r-xs); background:var(--chip); color:var(--muted)}

.info{margin:0 0 1.1rem}
.info>div{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.62rem .15rem; border-bottom:1px solid var(--line); font-size:var(--t-small)}
.info dt{color:var(--muted); margin:0; flex:none}
.info dd{margin:0; color:var(--fg); text-align:right; min-width:0; white-space:nowrap}
.info dd button{background:none;border:0;padding:0;margin:0;cursor:pointer; max-width:100%;
  color:var(--fg); display:inline-flex; align-items:center; gap:.35rem}
.info dd button .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 var(--t-caption)/1 var(--mono)}
.info dd .hint{display:inline-grid; place-items:center; position:relative; margin-right:.4rem;
  width:15px; height:15px; cursor:help; vertical-align:-.12em; color:var(--muted); font-size:0;
  --tip:"This is the release or version number of the bundle. It may not match the App Store version.";
  --tip-w:13rem; --tip-wrap:normal; --tip-size:var(--t-caption)}
.info dd .hint .i{width:14px; height:14px; fill:var(--tint-text)}

.shell{position:fixed; top:0; left:0; right:0; z-index:30; padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line); transition:transform .2s ease}
.shell.up{transform:translateY(-100%)}
@media (prefers-reduced-motion: reduce){ .shell{transition:none} }
.shell .in{max-width:var(--page); margin:0 auto; padding:.7rem 1.25rem;
  min-height:calc(var(--shell-h) - 1px);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
body:has(> .shell){padding-top:var(--shell-h)}
.shell .brand{flex:none; margin-right:auto}
.shell .nav{flex:none}
.shell .brand b{display:none}
.nav{display:flex; align-items:center; gap:.15rem}
.nav a{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  color:var(--muted); font-size:var(--t-small); font-weight:600;
  padding:.4rem .7rem; border-radius:var(--r-pill)}
.nav a .i{display:none; width:17px; height:17px; flex:none; fill:currentColor}
.nav a.on{color:var(--tint-text); background:var(--tint-soft)}
@media (hover: hover){ .nav a:hover{color:var(--fg)} .nav a.on:hover{color:var(--tint-text)} }
@media(min-width:720px){
  .shell .brand b{display:inline}
  .nav a .i{display:block}
  .nav a{padding:.4rem .8rem}
}
.brandline{display:flex; align-items:center; gap:.55rem; align-self:flex-start}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg)}
.brand img{width:40px;height:40px;border-radius:var(--r-icon)}
.brand b{font-size:var(--t-title); letter-spacing:-.02em}
@media (hover: hover){ .brand:hover{opacity:.82; text-decoration:none} }

.band{position:relative; overflow:hidden}
.band .in{position:relative; max-width:var(--page); margin:0 auto; padding:1.6rem 1.25rem 1.2rem}
.band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--plus); background-size:46px 46px;
  -webkit-mask-image:linear-gradient(var(--bg) 35%, transparent);
          mask-image:linear-gradient(var(--bg) 35%, transparent)}
.band::after{content:""; position:absolute; left:50%; top:-55%; width:min(720px,110%); height:150%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--tint) 13%,transparent), transparent)}
.band h1{margin:0; font-size:var(--t-h1); font-weight:700; letter-spacing:-.03em; line-height:1.08}
.band .sub b{color:var(--fg); font-weight:700}
.band .sub{margin:.45rem 0 0; color:var(--muted); font-size:var(--t-small); line-height:1.55}
.rule{height:1px; border:0; margin:0 auto 1rem; max-width:var(--page);
  background:linear-gradient(90deg, transparent, var(--line) 28%, var(--line) 72%, transparent);
  transition:opacity .15s ease}

footer{max-width:var(--page); margin-top:var(--nest);
  padding:1.1rem 0 .4rem; border-top:1px solid var(--line);
  font-size:var(--t-caption); display:flex; flex-direction:column; align-items:flex-start; gap:.4rem}
footer a{color:var(--muted); text-decoration:none}
@media(min-width:561px){ footer{flex-direction:row; align-items:baseline; gap:1.5rem} }
footer .fnav{display:flex; gap:1.25rem}
footer .fnav a::after{content:"\203A"; margin-left:.35em; opacity:.6}
footer .cred{color:var(--muted)}
footer .here{color:var(--fg)}
footer .sep{color:color-mix(in srgb,var(--muted) 55%,transparent)}
@media (hover: hover){ footer a:hover{color:var(--tint-text)} }

body.home{min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:3rem 1.25rem; text-align:center; position:relative; overflow-x:hidden}
body.home::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 66% at 50% -8%, rgba(255,255,255,.05), transparent 56%),
    var(--plus);
  background-repeat:no-repeat, repeat; background-position:center top, center;
  -webkit-mask-image:radial-gradient(150% 88% at 50% 2%, #000 32%, transparent 76%);
          mask-image:radial-gradient(150% 88% at 50% 2%, #000 32%, transparent 76%);
}
body.home .wrap{position:relative; width:100%; max-width:372px}
.badge{display:block; position:relative; width:88px; height:88px; margin:0 auto 1.15rem; border-radius:var(--r-icon);
  box-shadow:var(--lift)}
.badge img{width:100%; height:100%; border-radius:inherit; display:block; object-fit:cover}
.badge::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.10),
             inset 0 -14px 22px -14px rgba(0,0,0,.55)}
.badge::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.30), rgba(255,255,255,.05) 30%, transparent 52%);
  mix-blend-mode:overlay}
.ecode{font-size:4.6rem; font-weight:800; letter-spacing:-.05em; line-height:.95}
.estate{margin:.1rem 0 .55rem; font-size:var(--t-small); font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--tint-text)}
.tag{margin:.3rem 0 2.5rem; color:var(--muted); font-size:var(--t-body)}
.tag .rep{color:var(--tint-text); font-weight:600;
  text-shadow:0 0 9px color-mix(in srgb,var(--tint-text) 40%,transparent)}
.card{background:color-mix(in srgb,var(--surface) 62%,transparent);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  padding:1.15rem 1.15rem 0; margin-bottom:1rem; text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -22px rgba(0,0,0,.9)}
.card .legal{margin:0; font-size:var(--t-caption); line-height:1.75; letter-spacing:.01em; color:var(--muted)}
.card .mark{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--muted)}
.card .about{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--muted)}

body.catalog .wrap{max-width:var(--page); margin:0 auto; padding:.2rem 1.25rem 1.5rem}
.count{color:var(--muted); font-size:var(--t-caption); font-weight:600; margin:0 0 .55rem .15rem}
.count:empty{display:none}
.search{width:100%; min-width:0; padding:.72rem 1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--fg); font-size:1rem}
.search::placeholder{color:var(--muted)}
.search{transition:border-color .2s ease}
.search:focus{outline:none; border-color:var(--tint-edge)}
.searchwrap{position:relative; margin-top:1rem}
.slash{display:none; position:absolute; right:.75rem; top:50%; transform:translateY(-50%); pointer-events:none;
  min-width:1.4rem; padding:.1rem .4rem; text-align:center; font:600 var(--t-caption)/1.3 var(--mono);
  color:var(--fg); border:1px solid color-mix(in srgb,var(--fg) 22%,transparent); border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--fg) 8%,var(--surface)); box-shadow:0 1px 0 color-mix(in srgb,var(--fg) 14%,transparent)}
.slash::before{content:"F"}
.search:focus + .slash::before{content:"Esc"}
@media (hover: hover) and (pointer: fine){ .slash{display:block} .search{padding-right:3.6rem} }

.byo{display:flex; gap:.85rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:.9rem 1.05rem; margin-bottom:.55rem}
.byo .tx{min-width:0; font-size:var(--t-small); line-height:1.5; color:var(--muted); overflow-wrap:break-word}
.byo .tx b{display:block; margin-bottom:.12rem; color:var(--fg); font-weight:700; font-size:var(--t-body)}
.doors{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
@media (max-width:560px){ .doors{grid-template-columns:1fr} }
a.door{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--fg);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:.7rem .85rem}
.byo .ic, .door .ic{flex:none; width:34px; height:34px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--tint-soft); color:var(--tint-text)}
.door .lbl{min-width:0; line-height:1.3}
.door .lbl b{display:block; font-weight:700; font-size:var(--t-body)}
.door .chev{flex:none; margin-left:auto; color:var(--muted)}
@media (hover: hover){ a.door:hover{border-color:var(--tint-edge)} }

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr)); gap:0 1.75rem}
@media(max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
.grid:not(.live){min-height:calc(var(--n, 0) * var(--list-row)); align-content:start}
@media(min-width:901px){.grid:not(.live){min-height:calc(round(up, var(--n, 0) / 2, 1) * var(--list-row))}}
.grid .row:last-child::after,
.grid .row:nth-last-child(2):nth-child(odd)::after{display:none}
@media(max-width:900px){
  .grid .row:nth-last-child(2):nth-child(odd)::after{display:block}
  .grid .row:last-child::after{display:none}}
.empty{grid-column:1/-1; color:var(--muted); text-align:center; padding:3rem 0}

.row{position:relative; display:flex; align-items:center; gap:.85rem; padding:.6rem .55rem; min-width:0; min-height:var(--list-row);
  cursor:pointer; transition:background .12s}
.row::after, .skel::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line); pointer-events:none}
@media (hover: hover){ .row:hover{background:var(--press)} }
.row.press{background:var(--press)}
.row.off{cursor:default}
.row.off .mid{opacity:.4}
.row.off .icon, .row.shelved .icon{opacity:.3; filter:grayscale(1)}
@media (hover: hover){ .row.off:hover{background:none} }
.row.off.press{background:none}
.icon{width:52px;height:52px;border-radius:var(--r-icon);flex:none; object-fit:cover; overflow:hidden;
  background:var(--surface-hi); display:grid;place-items:center;font-weight:700;font-size:var(--t-title);color:var(--fg)}
.up{position:absolute; top:calc(.6rem - 5px); left:calc(.55rem - 5px);
  width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  background:var(--tint); color:var(--on-tint); border:2px solid var(--bg);
  pointer-events:none}
.up .i{width:13px; height:13px; fill:currentColor}
.mid{min-width:0; flex:1}
.name{font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meta{display:flex; align-items:center; gap:.4rem; margin-top:.1rem; color:var(--muted); font-size:var(--t-caption); min-width:0}
.meta > span{flex:none}
@media(max-width:560px){.meta .bid, .meta .dot{display:none}}
.bid{display:inline-flex; flex:1 1 auto; align-items:center; gap:.3rem; background:none; border:0; padding:0;
  cursor:pointer; color:var(--muted); min-width:0; font:500 var(--t-caption)/1 var(--mono)}
.bid .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bid svg, .dbid svg{flex:none}
.bid, .info dd button{border-radius:var(--r-xs); transition:color .12s, background .12s, box-shadow .12s}
.bid.press, .info dd button.press{color:var(--fg); background:var(--press); box-shadow:0 0 0 .2rem var(--press)}
@media (hover: hover){ .bid:hover, .info dd button:hover{color:var(--fg); background:var(--press); box-shadow:0 0 0 .2rem var(--press)} }
.bid.done, .info dd button.done{color:var(--tint-text)}
.dot{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.get a, .get .na, .mget{--pill-min:4.25rem}
.get a{--pill-bg-on:var(--tint); --pill-fg-on:var(--on-tint)}
.get .na{--pill-fg:var(--muted); --tip:"Unavailable"; position:relative; cursor:help}

.skel{position:relative; display:flex; align-items:center; gap:.85rem; padding:.6rem .55rem; min-height:var(--list-row)}
.skel .s-ic{width:52px; height:52px; border-radius:var(--r-icon); flex:none}
.skel .s-mid{flex:1; display:flex; flex-direction:column; gap:.55rem; min-width:0}
.skel .s-l1{height:12px; width:42%; border-radius:var(--r-xs)}
.skel .s-l2{height:10px; width:66%; border-radius:var(--r-xs)}
.skel .s-get{width:62px; height:30px; border-radius:var(--r-pill); flex:none}
.sq{background:linear-gradient(90deg, var(--surface) 25%, var(--surface-hi) 37%, var(--surface) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite}
@keyframes shimmer{0%{background-position:100% 0} 100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.sq{animation:none}}

.modal{position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:50;
  padding:1.5rem max(1.5rem, env(safe-area-inset-right)) 1.5rem max(1.5rem, env(safe-area-inset-left));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .3s}
.modal.open{opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .22s ease}
.sheet{background:var(--bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -22px rgba(0,0,0,.9);
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:0; overflow:hidden; max-width:400px; width:100%; position:relative;
  display:flex; flex-direction:column;
  max-height:min(100dvh - 6rem, 80vh);
  transform:scale(.97); opacity:0;
  transition:transform .2s var(--ease-sheet), opacity .18s ease}
.modal.open .sheet{transform:none; opacity:1}
@media(prefers-reduced-motion:reduce){ .modal, .sheet{transition:none !important} }

.sheet .top{flex:none; display:flex; gap:.85rem; align-items:center; padding:1.05rem 1.15rem;
  background:var(--bg);
  position:relative; isolation:isolate; overflow:hidden}
.sheet .mbg{position:absolute; inset:0; width:100%; height:100%; z-index:-1; object-fit:cover; object-position:50% 30%;
  filter:blur(9px) brightness(.55) saturate(.9); transform:scale(1.04); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, #000 35%, transparent 95%); mask-image:linear-gradient(90deg, #000 35%, transparent 95%)}
.sheet .top::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--line) 28%, var(--line) 72%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, color-mix(in srgb,var(--bg) 55%,transparent), transparent 60%),
    linear-gradient(transparent 30%, var(--bg))}
.sheet .micon{width:88px;height:88px;border-radius:var(--r-icon);flex:none;object-fit:cover;
  background:var(--surface);display:grid;place-items:center;font-weight:700;font-size:var(--t-title);color:var(--fg)}
.hmeta{min-width:0; flex:1; align-self:stretch; display:flex; flex-direction:column}
.sheet .mname{flex:1; min-width:0; font-size:var(--t-title); font-weight:700; letter-spacing:-.02em;
  line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden}
.macts{display:flex; gap:.5rem; margin-top:auto; padding-top:.6rem}
.mget{--pill-bg:linear-gradient(180deg,var(--tint),var(--tint-deep)); --pill-fg:var(--on-tint);
  --pill-bg-on:linear-gradient(180deg,var(--tint-deep),var(--tint-deep))}
.minj{flex:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-width:4.25rem; min-height:2rem; padding:0 1.1rem; border-radius:var(--r-pill); text-decoration:none;
  font:700 var(--t-caption)/1 var(--font); color:color-mix(in srgb,var(--tint-text) 35%,var(--fg));
  background:color-mix(in srgb,var(--tint) 18%,var(--bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 14%,transparent)}
.minj{transition:background .14s, color .14s}
.minj.press{background:color-mix(in srgb,var(--tint) 30%,var(--bg))}
@media (hover: hover){ .minj:hover{background:color-mix(in srgb,var(--tint) 30%,var(--bg))} }
.mclose{margin-left:auto; align-self:flex-start; flex:none; width:30px; height:30px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%; background:var(--surface);
  color:var(--muted); cursor:pointer}
.mclose .i{width:14px; height:14px; fill:currentColor}
@media (hover: hover){ .mclose:hover{color:var(--fg)} }
.mclose.press{color:var(--fg); background:color-mix(in srgb,var(--fg) 8%,var(--surface))}
.grab{display:none}

.sheet .body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:none;
  padding:1.15rem 1.4rem 1.4rem; background:none}
.sheet .body .flbl:first-child{margin-top:0}

.feat{list-style:none; padding:0 0 1.15rem; margin:0 0 1.15rem;
  border-bottom:1px solid var(--line)}
.feat li{display:flex; gap:.55rem; align-items:flex-start; padding:.3rem 0; font-size:var(--t-body)}
.feat li svg{color:var(--tint-text); flex:none; margin-top:.2rem}
.feat li .jb{display:inline-block; margin-left:.2rem; font-size:var(--t-label); font-weight:800;
  letter-spacing:.05em;
  color:var(--tint-text); border:1px solid color-mix(in srgb,var(--tint-text) 45%,transparent);
  border-radius:var(--r-xs); padding:.03rem .3rem; vertical-align:.09em}
.feat + .flbl{margin-top:1.15rem}
.grp{border-bottom:1px solid var(--line)}
.grp > summary, .grp > .gh{display:flex; align-items:center; gap:.7rem; cursor:pointer; list-style:none;
  margin:0; padding:.95rem 0; font-weight:700; font-size:var(--t-body)}
.grp > .gh{cursor:default}
.grp > summary::-webkit-details-marker{display:none}
.grp > summary > .i, .grp > .gh > .i{width:19px; height:19px; fill:var(--tint-text); flex:none}
.grp .gn{min-width:0}
.grp .gc{color:var(--muted); font-weight:600; font-size:var(--t-small)}
.grp > summary > .i:last-child{margin-left:auto; fill:var(--muted); width:15px; height:15px; transition:transform .15s}
.grp[open] > summary > .i:last-child{transform:rotate(90deg)}
.grp > summary.press > .i:last-child{fill:var(--fg)}
@media (hover: hover){ .grp > summary:hover > .i:last-child{fill:var(--fg)} }
.grp .feat, .grp .info{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  margin:0 0 .9rem; padding:0; list-style:none}
.grp .feat li{display:block; padding:.7rem .85rem; font-size:var(--t-body); color:var(--fg);
  border-bottom:1px solid var(--line)}
.grp .feat li:last-child{border-bottom:0}
.grp .feat.clip > li:nth-child(n+5):not(.more){display:none}
.grp .feat li.more{padding:0}
.feat li.ann{padding:0}
.feat li.ann summary{display:flex; align-items:center; gap:.45rem; padding:.7rem .85rem;
  cursor:pointer; list-style:none}
.feat li.ann summary::-webkit-details-marker{display:none}
.feat li.ann .fn{min-width:0}
.feat li.ann summary > .i:last-child{margin:0 0 0 auto; flex:none; width:14px; height:14px;
  fill:var(--muted); transition:transform .15s}
.feat li.ann details[open] summary > .i:last-child{transform:rotate(180deg)}
.feat li.ann .wi{width:15px; height:15px; flex:none; margin:0; fill:var(--warn)}
.anote{margin:0; padding:0 .85rem .75rem; font-size:var(--t-small); line-height:1.5; color:var(--muted)}
.anote.warn{color:var(--warn)}
.smore{display:flex; align-items:center; gap:.4rem; width:100%; text-align:left;
  padding:.7rem .85rem; border:0; background:none; cursor:pointer;
  color:var(--tint-text); font:600 var(--t-body)/1.3 var(--font)}
.smore .i{width:14px; height:14px; fill:currentColor; flex:none}
.smore{transition:opacity .12s}
.smore.press{opacity:.5}
.feat li.ann summary.press > .i:last-child{fill:var(--fg)}
@media (hover: hover){ .smore:hover{opacity:.75} .feat li.ann summary:hover > .i:last-child{fill:var(--fg)} }
.sheet .info{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm)}
.sheet .info div{padding:.7rem .85rem}
.sheet .info div:last-child{border-bottom:0}
.sheet .side .grp{border-bottom:0}
.sheet .info dt, .sheet .info dd{padding:0}
.mstore{display:inline-block; margin-top:.1rem; color:var(--tint-text); text-decoration:none;
  font-size:var(--t-caption); font-weight:600}
@media (hover: hover){ .mstore:hover{text-decoration:underline} }

@media(max-width:719px){
  .mclose{display:none}
  .modal{align-items:flex-end; padding:0}
  .modal.open{transition:opacity .22s ease, background-color .3s var(--ease-sheet)}
  .modal.open:not(.full){background-color:color-mix(in srgb,var(--scrim) 50%,transparent)}
  .sheet{max-width:none; width:100%; border-radius:var(--r-xl) 20px 0 0;
    border-bottom:0; height:92dvh; min-height:0; max-height:none; --half:40.2%;
    transform:translateY(100%); opacity:1;
    transition:transform .24s var(--ease-sheet)}
  .modal.open .sheet{transform:translateY(var(--half)); transition-duration:.3s}
  .modal.open.full .sheet{transform:translateY(0)}
  .grab{display:block; position:absolute; z-index:2; top:0; left:50%; transform:translateX(-50%);
    width:6rem; height:1.5rem; padding:0; border:0; background:none; cursor:grab}
  .grab::before{content:""; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:var(--r-xs); background:var(--line)}
  .grab::after{content:""; position:absolute; left:0; right:0; top:0; bottom:-1.25rem}
  .grab:focus-visible{outline:2px solid var(--tint-text); outline-offset:-2px; border-radius:var(--r-xs)}
  .sheet .top{padding-top:1.5rem; touch-action:none}
  .sheet .body{padding-bottom:calc(1.3rem + env(safe-area-inset-bottom))}
}
@media(min-width:720px){
  .sheet{max-width:820px; height:min(100dvh - 6rem, 32.5rem);
    display:grid; grid-template-columns:minmax(0, 1fr) 21.25rem; grid-template-rows:auto auto minmax(0, 1fr)}
  .sheet .top{grid-column:1 / -1; grid-row:1}
  .sheet .body{display:contents}
  .sheet .fpane{grid-column:1; grid-row:3; min-height:0; overflow-y:auto; overscroll-behavior:none;
    padding:1.15rem 1.4rem 1.4rem}
  .sheet .body::before, .sheet .body::after{content:""; grid-column:1; grid-row:3; z-index:1; height:1.5rem;
    pointer-events:none; opacity:0; transition:opacity .15s}
  .sheet .body::before{align-self:start; background:linear-gradient(var(--bg), transparent)}
  .sheet .body::after{align-self:end; background:linear-gradient(transparent, var(--bg))}
  .sheet:has(.fpane.fade-top) .body::before, .sheet:has(.fpane.fade-end) .body::after{opacity:1}
  .sheet .side{grid-column:2; grid-row:2 / -1; min-height:0; overflow-y:auto; padding:1.15rem 1.4rem 1.4rem;
    background:linear-gradient(var(--line) 50%, transparent) left / 1px 100% no-repeat}
  .sheet .fpane .grp:last-child{border-bottom:0}
}

body.install .wrap{max-width:var(--page); margin:0 auto; padding:1.6rem 1.25rem 1.5rem}
body.install .wrap > *{max-width:var(--prose)}
body.install h2{margin:2.3rem 0 .8rem; font-size:var(--t-h2); font-weight:700; letter-spacing:-.02em}
body.install h2:first-child{margin-top:0}
body.install p{color:var(--muted); font-size:var(--t-body); line-height:1.65}
body.install p b, body.install li b{color:var(--fg); font-weight:700}
.gtitle{margin:.5rem 0 .35rem; font-size:var(--t-h1); font-weight:700; letter-spacing:-.025em}
.gsub{margin:0 0 1.9rem; color:var(--muted); font-size:var(--t-body); line-height:1.55; max-width:58ch}
.gsub b{color:var(--fg); font-weight:600}
.pintro{margin:-.35rem 0 1rem; color:var(--muted); font-size:var(--t-small); line-height:1.5}
.ghead{margin:2.1rem 0 .5rem; font-size:var(--t-h2); font-weight:700; letter-spacing:-.025em}
.grule{border:0; border-top:1px solid var(--line); margin:1.7rem 0 2rem}
.lead{max-width:var(--prose); margin:0 0 1.15rem}

.steps{list-style:none; counter-reset:s; padding:0; margin:.2rem 0 0}
.steps li{counter-increment:s; position:relative; padding:.44rem 0 .44rem 2.55rem;
  font-size:var(--t-body); line-height:1.5; color:var(--muted);
  scroll-margin-top:calc(var(--shell-h) + 1.5rem); border-radius:var(--r-sm)}
.steps li::before{content:counter(s); position:absolute; left:0; top:.32rem;
  width:1.65rem; height:1.65rem; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-hi); border:1px solid var(--line); color:var(--fg);
  font:600 var(--t-caption)/1 var(--mono)}
.steps b{font-weight:700}
.steps li b{color:var(--fg); font-weight:600}
.steps .muted{color:var(--muted)}
.steps li.jump, .steps li.jump::before{animation:stepland 2s ease-out}
@keyframes stepland{
  0%,15%{background:var(--tint-soft)}
  100%{background:transparent}
}
@media(prefers-reduced-motion:reduce){
  .steps li.jump, .steps li.jump::before{animation:none; background:var(--tint-soft)}
}
.steps .note{margin:.6rem 0 .25rem var(--nest)}
.steps .shot{margin:.85rem 0 .2rem var(--nest); max-width:none; background:none; border:0;
  border-radius:var(--r-sm); overflow:hidden}
.note.routes{margin:-1.4rem 0 2.6rem}
.note.routes .tx{display:grid; gap:.3rem}

.need{list-style:none; padding:0; margin:.2rem 0 1.15rem; display:grid; gap:.42rem}
.need li{position:relative; padding-left:1.35rem; font-size:var(--t-body); color:var(--muted); line-height:1.5}
.need li::before{content:""; position:absolute; left:.1rem; top:.52rem; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--muted)}
.need b{color:var(--fg); font-weight:600}

.shot{margin:2rem 0; max-width:606px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{padding:.65rem .9rem; border-top:1px solid var(--line);
  font-size:var(--t-caption); color:var(--muted)}
.shot figcaption b{color:var(--fg); font-weight:600}

.gotchas-box{display:grid}
.gotcha + .gotcha{border-top:1px solid var(--line)}
.gotcha summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.8rem;
  padding:.85rem .15rem .5rem; color:var(--fg); font-weight:600; font-size:var(--t-body)}
.gotcha summary::-webkit-details-marker{display:none}
.gotcha summary .chev{margin-left:auto; flex:none; width:14px; height:14px;
  fill:var(--muted); transition:transform .18s ease}
.gotcha[open] summary .chev{transform:rotate(180deg)}
@media (hover: hover){ .gotcha summary:hover .chev{fill:var(--fg)} }
.gotcha p{margin:.1rem 0 .85rem; padding:.75rem .9rem; font-size:var(--t-small); line-height:1.6;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm)}
@media (prefers-reduced-motion: reduce){ .gotcha summary .chev{transition:none} }

body.cmb .card{padding:1.15rem}
.cmb .info{margin-bottom:1.15rem}
.cmb .info dd{font:500 var(--t-caption)/1.3 var(--mono)}
.pick, .act{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  font:600 var(--t-body)/1.3 var(--font); color:var(--fg); padding:.8rem .9rem;
  border-radius:var(--r-md); margin-bottom:1.15rem; background:var(--surface-hi);
  border:1px solid transparent; cursor:pointer; overflow:hidden}
.pick{--chip:var(--surface); min-height:var(--row-h); margin-bottom:calc(1.15rem + var(--ledge))}
body.cmb .card .pick{margin-bottom:var(--ledge)}
.pick.on{cursor:default}
.pick.drag{border-color:var(--tint); background:color-mix(in srgb,var(--tint) 12%,var(--surface-hi))}
.pick.drag .ic{color:var(--tint-text); background:color-mix(in srgb,var(--tint) 18%,transparent)}
.pick input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.pick .ic{flex:none; width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); transition:.15s}
.pick.on .ic{color:var(--tint-text); background:color-mix(in srgb,var(--tint) 18%,transparent)}
.pick .ic .i{width:22px; height:22px; fill:currentColor}
.pick .end{margin:-.55rem -.35rem -.55rem auto; flex:none; width:44px; height:44px;
  display:grid; place-items:center; border-radius:var(--r-sm)}
.pick .end.chev{flex:none; display:grid; place-items:center; color:var(--muted); padding:.25rem}
.pick .end.chev .i{width:15px; height:15px; fill:currentColor}
.pick.on .end.chev{display:none}
.pick .x{position:relative; z-index:2; flex:none; border:0; padding:.25rem; background:none;
  color:var(--muted); cursor:pointer; display:grid; place-items:center}
.pick .x svg{flex:none}
.pick .x .i{width:15px; height:15px; fill:currentColor}
.pick .x.press{color:var(--fg); background:var(--surface)}
.pick:not(.on):not(.done).press{border-color:var(--tint-edge)}
@media (hover: hover){
  .pick:not(.on):not(.done):not(.drag):not(.nohover):hover{border-color:var(--tint-edge)}
  .pick .x:hover{color:var(--fg); background:var(--surface)}
  .pick:not(.on):hover .end.chev{color:var(--fg)}
}
.pick .txt{display:grid; gap:.15rem; min-width:0; flex:1}
.pick .t{display:flex; align-items:center; gap:.5rem; color:var(--fg); font-weight:600; min-width:0}
.pick .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pick.on .nm, .pick.bad .nm{font:500 var(--t-body)/1.3 var(--mono)}
.pick .s{margin-top:.28rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:none; padding:0; font-size:var(--t-caption); color:var(--muted)}
.pick .s.err{color:var(--danger-text)}
.pick:not(.on):not(.done) .s{background:var(--chip); padding:.2rem .45rem}
.st{margin-left:.5rem; padding:.18rem .36rem; border-radius:var(--r-xs);
  font-size:.92em; font-weight:700; letter-spacing:.06em; color:var(--muted);
  background:none; border:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.card:has(.pick.on) .st{visibility:hidden}
.pick.done{--chip:color-mix(in srgb,var(--success) 10%,var(--bg)); cursor:default;
  text-decoration:none; background:color-mix(in srgb,var(--success) 10%,var(--surface-hi));
  border-color:color-mix(in srgb,var(--success) 32%,transparent)}
.pick.done .ic{background:color-mix(in srgb,var(--success) 18%,transparent); color:var(--success)}
.pick.done .nm{font:500 var(--t-small)/1.4 var(--mono); color:var(--fg)}
.pick.done .end.save{--pill-bg:color-mix(in srgb,var(--success) 20%,transparent);
  --pill-fg:var(--success-text);
  --pill-bg-on:color-mix(in srgb,var(--success) 32%,transparent);
  width:auto; height:auto; min-height:40px; margin:0 0 0 auto;
  padding:0 .8rem; border-radius:var(--r-sm); font-weight:600}
.pick.done .end.save .i{width:15px; height:15px; fill:currentColor}
@media(max-width:560px){
  .pick.done .end.save{width:44px; height:44px; min-height:0; padding:0; gap:0}
  .pick.done .end.save .lbl{display:none}
}
.pick.bad{border-color:color-mix(in srgb,var(--danger) 42%,transparent)}
.pick.bad .ic{background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger-text)}
.pick.bad .nm{color:var(--muted)}
#go-txt{min-width:10ch; text-align:center}
.act{
  --glow:0 6px 16px -8px color-mix(in srgb,var(--tint) 42%,transparent);
  justify-content:center; border:0; color:var(--on-tint);
  background:linear-gradient(180deg,var(--tint),var(--tint-deep))}
body.cmb .act{margin-bottom:1rem}
.act .i{width:18px; height:18px; fill:currentColor; flex:none}
.act.warn{background:linear-gradient(180deg,var(--danger),var(--danger-deep))}
.act[disabled]:not(.busy){--glow:0 0 0 0 transparent; background:var(--surface-hi); color:var(--muted); cursor:default}
.act.busy{cursor:progress; opacity:.72}
.act.anyway{--glow:0 0 0 0 transparent; --ledge-color:var(--warn); background:var(--surface-hi); color:var(--fg)}
.go-row{display:flex; margin-bottom:calc(1rem + var(--ledge))}
.go-row .act{margin:0}
.go-row #go{flex:1 1 auto; min-width:0}
.mods-slot{display:flex; flex:none; max-width:0; margin-right:0; overflow-x:clip; overflow-y:visible;
  transition:max-width .34s cubic-bezier(.4,0,.2,1) .14s, margin-right .34s cubic-bezier(.4,0,.2,1) .14s}
.go-row.morph .mods-slot{max-width:6rem; margin-right:.6rem;
  transition:max-width .42s cubic-bezier(.4,0,.2,1), margin-right .42s cubic-bezier(.4,0,.2,1)}
.go-row.done #go{--glow:0 0 0 0 transparent; --ledge-color:var(--tint); background:var(--surface-hi); color:var(--fg)}
@media (prefers-reduced-motion: reduce){ .mods-slot{transition:none} }
.act.back{--glow:0 0 0 0 transparent; --ledge-color:transparent; --tip:1.375rem;
  flex:none; width:auto; margin:0; padding:.8rem .95rem .8rem calc(var(--tip) * .6 + .95rem);
  text-decoration:none; background:none; color:var(--fg); overflow:visible; isolation:isolate}
.act.back::before, .act.back::after{content:""; position:absolute; inset:0; z-index:-1;
  border-radius:0 var(--r-md) var(--r-md) 0; background-repeat:no-repeat;
  background-position:left top, right top; background-size:var(--tip) 100%, calc(100% - var(--tip) + 1px) 100%}
.act.back::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 48' preserveAspectRatio='none'%3E%3Cpath fill='%231f1f28' d='M22 0H20.6Q18.8 0 17.7 1.4L3.2 20.4Q0.4 24 3.2 27.6L17.7 46.6Q18.8 48 20.6 48H22Z'/%3E%3C/svg%3E"),
  linear-gradient(var(--surface-hi), var(--surface-hi))}
.act.back::before{transition:bottom var(--rise)}
.act.back:is(.press, .down)::before{opacity:0; transition:bottom .08s ease}
@media (hover: hover){ .act.back:hover:not(.press, .down)::before{transition:bottom .08s ease} }
@media (prefers-reduced-motion: reduce){ .act.back::before{transition:none !important} }
.act.back::before{bottom:calc(var(--d) * -1); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 53' preserveAspectRatio='none'%3E%3Cpath fill='%233a3a46' d='M22 0H20.6Q18.8 0 17.7 1.4L3.2 20.4Q0.4 24 0.4 26.5V26.5Q0.4 29 3.2 32.6L17.7 51.6Q18.8 53 20.6 53H22Z'/%3E%3C/svg%3E"),
  linear-gradient(var(--ledge-plain), var(--ledge-plain))}

.sg .ghead{margin-top:2.4rem}
.sg-gap{margin-top:1.1rem}
.sg-swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.55rem}
.sg-sw{display:grid; gap:.3rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:.6rem; font-size:var(--t-caption)}
.sg-sw .chip{height:46px; border-radius:var(--r-sm); border:1px solid var(--line)}
.sg-sw code{justify-self:start}
.sg-type{display:grid; gap:.2rem}
.sg-t{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.6rem 0;
  border-bottom:1px solid var(--line); font-weight:600; min-width:0}
.sg-t span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sg-radii{display:flex; flex-wrap:wrap; gap:1.1rem}
.sg-r{display:grid; justify-items:center; gap:.45rem}
.sg-r .box{width:64px; height:64px; background:var(--surface-hi); border:1px solid var(--line)}
.sg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:1rem}
.sg-pad{padding-bottom:.1rem}
.sg-inline{display:flex; align-items:center; gap:.8rem; margin-bottom:1.15rem}
.sg-case{margin:0 0 2rem}
.sg-frames{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start}
.sg-dev{margin:0}
.sg-vp{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg)}
.sg-vp iframe{display:block; border:0}
.sg-dev figcaption{margin-top:.45rem; font-size:var(--t-caption); color:var(--muted)}

.btt{position:fixed; z-index:25; right:env(safe-area-inset-right); bottom:calc(1.6rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  border-radius:var(--r-md) 0 0 var(--r-md);
  padding:calc(.6rem - var(--ledge) / 2) .6rem calc(.6rem + var(--ledge)) .6rem;
  background:var(--surface); box-shadow:var(--lift);
  border:1px solid var(--line); border-right:0;
  opacity:0; pointer-events:none; transform:translateX(100%);
  transition:transform .24s var(--ease-sheet), opacity .16s ease}
.btt.on{opacity:1; pointer-events:auto; transform:none; transition-duration:.3s, .2s}
.bup{display:grid; place-items:center; width:40px; height:40px; flex:none;
  border:0; border-radius:var(--r-sm); background:var(--bg); color:var(--muted);
  cursor:pointer}
.btt.on .bup{transition-delay:var(--rise-delay), var(--rise-delay), 0s, 0s}
.bup .i{width:18px; height:18px; fill:currentColor}
.btl{writing-mode:vertical-rl; flex:none; align-self:center;
  font-size:var(--t-label); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  margin-top:calc(var(--ledge) * 2)}
@media (hover: hover){ .btt:hover .bup{color:var(--fg)} }
@media (prefers-reduced-motion: reduce){
  .btt, .bup{transition:opacity .15s ease}
  .btt{transform:none}
  .bup{top:0; box-shadow:0 var(--ledge) 0 0 var(--ledge-color)}
}

.dev{position:fixed; z-index:99; right:1rem; bottom:1rem; width:min(16rem, calc(100vw - 2rem)); height:min(60vh, 26rem);
  display:flex; flex-direction:column; overflow:hidden;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -22px rgba(0,0,0,.9)}
.dev.min{height:auto}
.dev .dh{flex:none; position:relative; height:1.6rem; cursor:grab; touch-action:none; border-bottom:1px solid var(--line)}
.dev .dh::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:36px; height:4px; border-radius:var(--r-xs); background:var(--line)}
.dev.min .dh{border-bottom:0}
.dev.min .db{display:none}
.dev .db{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 0 .6rem}
.dev .dl{margin:0 .9rem .25rem; padding:.95rem 0 .45rem; border-bottom:1px solid var(--line);
  font-size:var(--t-label); font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--muted)}
.dev .dr{position:relative; display:block; width:100%; padding:.7rem .9rem; border:0; background:none; text-align:left;
  font:600 var(--t-body)/1.3 var(--font); color:var(--muted); cursor:pointer; transition:background .12s, color .12s}
.dev .dr.on{color:var(--tint-text); background:var(--tint-soft)}
.dev .dr:active{color:var(--fg); background:var(--press)}
@media (hover: hover){ .dev .dr:hover{color:var(--fg); background:var(--press)} .dev .dr.on:hover{color:var(--tint-text)} }
.dev .dz{position:absolute; right:0; bottom:0; width:24px; height:24px; cursor:nwse-resize; touch-action:none;
  background:var(--muted); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.1 9.1A15 15 0 0 1 9.1 18.1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.1 9.1A15 15 0 0 1 9.1 18.1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition:background .12s}
.dev .dz:active{background:var(--fg)}
@media (hover: hover){ .dev .dz:hover{background:var(--fg)} }
.dev.min .dz{display:none}