/* App pages (/apps/<slug>): the colorful layout and the reviews and comments rail.
   Soft pastel cards, each in its own hue from the MacPip rainbow. Colors are mixed from the site tokens, so day, night and CRT follow.
   Mockups and the choice behind it: docs/mockups/comments/ (A2, Pastel). Comments: functions/_comments.js, public/comments.js. */
:root{--apx-t:12%;--apx-t2:5%;--cx-maker:#f3c63f;--cx-refuse:#fbe6d8;--cx-refuseline:#c8541f;--cx-hl:rgba(232,72,63,.22)}
:root[data-theme=night]{--apx-t:15%;--apx-t2:7%;--cx-maker:#d9ad2b;--cx-refuse:#3a2618;--cx-refuseline:#e08a4c;--cx-hl:rgba(232,72,63,.35)}
:root[data-theme=crt]{--apx-t:8%;--apx-t2:4%;--cx-maker:#8ef5ae;--cx-refuse:#132016;--cx-refuseline:#8ef5ae;--cx-hl:rgba(142,245,174,.25)}
[data-h=g]{--h:var(--g)}[data-h=y]{--h:var(--y)}[data-h=o]{--h:var(--o)}[data-h=r]{--h:var(--r)}[data-h=v]{--h:var(--v)}[data-h=b]{--h:var(--b)}
[data-h="0"]{--h:var(--g)}[data-h="1"]{--h:var(--y)}[data-h="2"]{--h:var(--o)}[data-h="3"]{--h:var(--r)}[data-h="4"]{--h:var(--v)}[data-h="5"]{--h:var(--b)}
:root[data-theme=crt] [data-h]{--h:#8ef5ae}

/* ---- Header ---- */
.apx-head .apx-ic{position:relative;flex:none;display:block;line-height:0}
.apx-head .apx-ic:before{content:"";position:absolute;inset:-16px;border-radius:32px;background:radial-gradient(closest-side,color-mix(in srgb,var(--o) 38%,transparent),transparent);z-index:-1;animation:apxglow 5s ease-in-out infinite;pointer-events:none}
.apx-head .icon{box-shadow:3px 3px 0 var(--ink)}
@keyframes apxglow{50%{transform:scale(1.08);opacity:.7}}
.apx-trow{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.apx-trow h1{min-width:0}
/* The maker, small and clean next to the name */
.apx-head .makercard{gap:8px;padding:4px 10px 4px 4px;border-radius:999px;box-shadow:2px 2px 0 color-mix(in srgb,var(--y) 55%,var(--box2));background:color-mix(in srgb,var(--y) var(--apx-t),var(--paper));transition:transform .3s var(--spring)}
.apx-head .makercard:hover{transform:translateY(-1px) rotate(-.5deg)}
.apx-head .makercard img,.apx-head .makercard .avl{width:28px!important;height:28px!important;font-size:13px}
.apx-head .makercard span{flex-direction:row;align-items:baseline;gap:5px;flex-wrap:wrap}
.apx-head .makercard small{font-size:8px;margin:0}
.apx-head .makercard a:not(.xlink),.apx-head .makercard strong{font:500 16px/1.1 var(--serif)}
.apx-head .makercard a.nbonlist{margin:0;align-self:center}
.apx-head .makercard .xlink{padding:4px}
.apx-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.apx-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.2;padding:3px 10px 3px 7px;border-radius:999px;border:1.5px solid var(--ink);background:color-mix(in srgb,var(--h) calc(var(--apx-t) + 8%),var(--paper));white-space:nowrap;animation:apxpop .5s var(--spring) both}
.apx-pill:nth-child(2){animation-delay:.05s}.apx-pill:nth-child(3){animation-delay:.1s}.apx-pill:nth-child(4){animation-delay:.15s}.apx-pill:nth-child(5){animation-delay:.2s}.apx-pill:nth-child(6){animation-delay:.25s}
.apx-pill i{width:8px;height:8px;border-radius:2px;background:var(--h);border:1px solid var(--ink)}
.apx-pill a{color:inherit;text-decoration:none}
.apx-pill:has(a):hover{transform:translateY(-1px)}
@keyframes apxpop{from{opacity:0;transform:translateY(4px) scale(.94)}}
.apx-jump:empty{display:none}
.apx-jump{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:2px;font-size:12.5px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:5px 12px 5px 9px;box-shadow:2px 2px 0 var(--box2);text-decoration:none;transition:transform .25s var(--spring)}
.apx-jump:hover{transform:translateY(-1px)}
.apx-jump svg.bub{width:16px;height:14px}
.apx-head .actions{max-width:330px;justify-content:flex-end}.apx-head .apx-jump{flex-basis:100%}
.apx-stripe{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--g) 0 16.6%,var(--y) 0 33.3%,var(--o) 0 50%,var(--r) 0 66.6%,var(--v) 0 83.3%,var(--b) 0);margin-top:4px;margin-bottom:22px;opacity:.9}

/* ---- Layout: the page on the left, comments on the right ---- */
.apx{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start;padding-bottom:56px;animation:rise .7s var(--ease) both}
.apx.norail{grid-template-columns:minmax(0,1fr)}
.apx-main{min-width:0;display:flex;flex-direction:column;gap:20px}
.apx-win .appleft{position:static;top:auto}
.apx-win .sitewin{margin:0;border-radius:12px;overflow:hidden}
.apx-win .framebox{width:100%!important}
.apx-win .framebox.scrollpic{height:clamp(280px,32vw,400px)}
.apx-win .shotgrid{margin:0}
.apx-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.apx.norail .apx-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.apx-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.apx-stack>*{margin:0}

/* Cards */
.apx-card{--h:var(--b);border:1.5px solid var(--ink);border-radius:14px;padding:15px 16px 14px;background:color-mix(in srgb,var(--h) var(--apx-t2),var(--paper));box-shadow:3px 4px 0 color-mix(in srgb,var(--h) 35%,var(--box2));transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.apx-card:hover{transform:translateY(-2px);box-shadow:4px 6px 0 color-mix(in srgb,var(--h) 45%,var(--box2))}
.apx-card.h-facts{--h:var(--g)}.apx-card.h-check{--h:var(--v)}
.apx-card>h2{display:flex;align-items:center;gap:8px;font:500 21px/1.1 var(--serif);margin:0 0 10px}
.apx-hi{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--h);border:1.5px solid var(--ink);flex:none}
.apx-hi svg{width:13px;height:13px;fill:#1d1b17}
.apx-card .appsum{font-size:14px;margin:0 0 10px;padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--h) var(--apx-t),var(--paper));border:1.5px dashed color-mix(in srgb,var(--h) 70%,var(--ink))}
.apx-card .body{font-size:14px;line-height:1.55;color:var(--mute);margin:0 0 9px}
.apx-does{list-style:none;margin:2px 0 10px;padding:0;display:grid;gap:7px}
.apx-does li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;animation:apxtick .5s var(--spring) both;animation-delay:calc(.25s + var(--i) * 70ms)}
.apx-does li b{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ink);background:var(--h);display:grid;place-items:center;margin-top:1px}
.apx-does li b svg{width:10px;height:10px;fill:none;stroke:#1d1b17;stroke-width:2}
@keyframes apxtick{from{opacity:0;transform:translateX(-6px)}}

/* Facts as small tiles */
.h-facts .facts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.h-facts .facts div{display:flex;flex-direction:column;gap:2px;padding:7px 9px 7px 30px;position:relative;border:1.5px solid color-mix(in srgb,var(--c,var(--g)) 55%,var(--ink));border-radius:10px;background:var(--paper);font-size:12.5px;line-height:1.3}
.h-facts .facts div:before{content:"";position:absolute;left:8px;top:9px;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--ink);background:color-mix(in srgb,var(--c,var(--g)) 75%,var(--paper))}
.h-facts .facts div:nth-child(6n+1){--c:var(--g)}.h-facts .facts div:nth-child(6n+2){--c:var(--b)}.h-facts .facts div:nth-child(6n+3){--c:var(--v)}.h-facts .facts div:nth-child(6n+4){--c:var(--y)}.h-facts .facts div:nth-child(6n+5){--c:var(--o)}.h-facts .facts div:nth-child(6n){--c:var(--r)}
.h-facts .facts dt{font:8px/1.3 var(--pixel);color:var(--mute);text-transform:uppercase}
.h-facts .facts dd{text-align:left;overflow-wrap:anywhere}
.h-facts .facts div:last-child:nth-child(odd){grid-column:1/-1}
:root[data-theme=crt] .h-facts .facts div{--c:#8ef5ae!important}
.apx-card.report h2{font:500 21px/1.1 var(--serif);margin:0 0 6px}
.apx-card.report h2:before{content:"";width:24px;height:24px;border-radius:7px;background:var(--h);border:1.5px solid var(--ink);flex:none}
.apx-stack .askai{max-width:none;margin:0;padding:0}

/* Screenshots below get the same soft card */
.apx~.appshots .shotgrid img{border-radius:10px;transition:transform .35s var(--spring)}
.apx~.appshots .shotgrid img:hover{transform:scale(1.015) rotate(-.3deg)}

/* ---- Reviews and comments rail ---- */
.cx-rail{--h:var(--o);position:sticky;top:14px;display:flex;flex-direction:column;max-height:calc(100vh - 28px);border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--cream);box-shadow:4px 5px 0 color-mix(in srgb,var(--h) 40%,var(--box2));scroll-margin-top:14px}
.cx-tb{display:flex;align-items:center;justify-content:center;position:relative;min-height:26px;flex:none;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--h) 70%,var(--ink)) 0 1px,var(--paper) 1px 3px);border-bottom:1.5px solid var(--ink);padding:0 30px}
.cx-tb i{position:absolute;left:8px;top:5px;width:14px;height:14px;background:var(--paper);border:1.5px solid var(--ink)}
.cx-tb span{background:var(--paper);padding:0 9px;font:10px/1.7 var(--pixel);white-space:nowrap}
.cx-pane{overflow:auto;overscroll-behavior:contain;padding:14px;background:color-mix(in srgb,var(--h) var(--apx-t2),var(--cream));font:14px/1.5 var(--sans)}
.cx-pane *{box-sizing:border-box}
.cx-rail.cx-flash{animation:cxflash .6s var(--spring)}
@keyframes cxflash{40%{transform:scale(1.012);box-shadow:4px 5px 0 var(--h)}}
.cx-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cx-head h2{font:500 22px/1.1 var(--serif);margin:0}
.cx-n{font:10px var(--pixel);background:var(--ink);color:var(--paper);border-radius:5px;padding:3px 6px}
.cx-sort{margin-left:auto;display:inline-flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)}
.cx-sort button{font:11px var(--sans);padding:5px 9px;border:0;background:transparent;color:var(--ink);cursor:pointer;min-height:30px}
.cx-sort button+button{border-left:1.5px solid var(--ink)}
.cx-sort button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

.cx-sum{display:flex;gap:14px;align-items:center;padding:10px 12px;margin-bottom:12px;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:2px 2px 0 var(--box2)}
.cx-sum>div:first-child b{display:block;font:500 34px/1 var(--serif)}
.cx-sum small{display:block;font:9px var(--pixel);color:var(--mute);margin-top:4px}
.cx-bars{flex:1;display:grid;gap:3px;font:9px var(--pixel);color:var(--mute)}
.cx-bars div{display:grid;grid-template-columns:10px 1fr 16px;gap:6px;align-items:center}
.cx-bars i{display:block;height:7px;border:1px solid var(--ink);border-radius:2px;background:var(--box);overflow:hidden}
.cx-bars i b{display:block;height:100%;transform-origin:left;animation:cxbar .8s var(--spring) both}
.cx-bars div:nth-child(1) b{background:var(--g)}.cx-bars div:nth-child(2) b{background:var(--b)}.cx-bars div:nth-child(3) b{background:var(--y)}.cx-bars div:nth-child(4) b{background:var(--o)}.cx-bars div:nth-child(5) b{background:var(--r)}
@keyframes cxbar{from{transform:scaleX(0)}}

.cx-stars{display:inline-flex;gap:1px;line-height:0;align-items:center}
.cx-stars i{display:inline-block;width:13px;height:13px;color:var(--line)}
.cx-stars i.cx-on{color:var(--o)}
.cx-stars svg{width:100%;height:100%;fill:currentColor;stroke:var(--ink);stroke-width:1}
.cx-sum .cx-stars i{width:12px;height:12px}
:root[data-theme=crt] .cx-stars i.cx-on{color:#8ef5ae}

/* Composer */
.cx-box{margin-bottom:14px}
.cx-form{background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:2px 3px 0 var(--box2);padding:11px;transition:box-shadow .2s var(--ease)}
.cx-form:focus-within{box-shadow:2px 3px 0 var(--box2),var(--focus)}
.cx-who{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:12.5px;color:var(--mute);flex-wrap:wrap}
.cx-who strong{color:var(--ink);font-weight:normal}
.cx-form textarea,.cx-form input[type=text]{width:100%;border:1.5px solid var(--ink);border-radius:7px;background:var(--cream);color:var(--ink);font:14px/1.5 var(--sans);padding:8px 10px;outline:none}
.cx-form textarea{min-height:66px;resize:vertical}
.cx-form input[type=text]{min-height:36px;margin-bottom:8px}
.cx-form textarea::placeholder,.cx-form input::placeholder{color:var(--faint)}
.cx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.cx-row .cx-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.cx-row small,.cx-chars{font:9px var(--pixel);color:var(--mute)}
.cx-chars.cx-over{color:var(--err)}
.cx-form .btn{min-height:36px}
.cx-rule{font-size:11.5px;color:var(--mute);margin:8px 0 0}
.cx-form.cx-reply{margin:8px 0 2px;padding:9px;box-shadow:2px 2px 0 var(--box2)}
.cx-form.cx-reply textarea{min-height:52px}
.cx-rate{display:inline-flex;align-items:center;gap:1px}
.cx-rate button{width:25px;height:25px;padding:2px;border:0;background:none;cursor:pointer;color:var(--line);transition:transform .2s var(--spring)}
.cx-rate button svg{width:100%;height:100%;fill:currentColor;stroke:var(--ink);stroke-width:1}
.cx-rate button.cx-on{color:var(--o)}
.cx-rate button:hover{transform:translateY(-1px) scale(1.08)}
.cx-rate button.cx-pop{animation:cxstar .4s var(--spring)}
:root[data-theme=crt] .cx-rate button.cx-on{color:#8ef5ae}
@keyframes cxstar{40%{transform:scale(1.35) rotate(-8deg)}}
.cx-signin{display:flex;width:100%;margin-top:10px}
.cx-note{font-size:12.5px;color:var(--mute);margin:8px 0 0}

/* Refused, a friendly Mac alert */
.cx-refuse{display:flex;gap:10px;align-items:flex-start;margin-top:9px;padding:9px 11px;background:var(--cx-refuse);border:1.5px solid var(--cx-refuseline);border-radius:8px;font-size:13px;animation:cxshake .4s var(--ease)}
.cx-refuse svg{flex:none;width:26px;height:30px}
.cx-refuse strong{display:block;font:10px var(--pixel);margin-bottom:3px}
.cx-refuse p{margin:0}
.cx-refuse q{font-style:normal;quotes:none;display:block;margin-top:6px;padding:5px 8px;background:var(--paper);border-radius:5px;font-size:12.5px;overflow-wrap:anywhere}
.cx-refuse mark{background:var(--cx-hl);color:inherit;border-radius:3px;padding:0 2px;text-decoration:underline wavy var(--cx-refuseline);text-underline-offset:3px}
.cx-form.cx-bad textarea{border-color:var(--cx-refuseline)}
@keyframes cxshake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* One comment */
.cx-list{display:flex;flex-direction:column;gap:12px}
.cx-c{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:start;scroll-margin-top:80px}
.cx-av{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:inline-grid;place-items:center;font:11px var(--pixel);color:#1d1b17;background:color-mix(in srgb,var(--h,var(--o)) 55%,var(--paper));overflow:hidden;flex:none}
.cx-av[data-c="0"]{--h:var(--g)}.cx-av[data-c="1"]{--h:var(--y)}.cx-av[data-c="2"]{--h:var(--o)}.cx-av[data-c="3"]{--h:var(--r)}.cx-av[data-c="4"]{--h:var(--v)}.cx-av[data-c="5"]{--h:var(--b)}
:root[data-theme=crt] .cx-av{color:var(--ink);background:var(--box)}
.cx-av img{width:100%;height:100%;object-fit:cover}
.cx-av.cx-sm{width:22px;height:22px;font-size:9px}
.cx-c[data-c="0"]{--p:var(--g)}.cx-c[data-c="1"]{--p:var(--y)}.cx-c[data-c="2"]{--p:var(--o)}.cx-c[data-c="3"]{--p:var(--r)}.cx-c[data-c="4"]{--p:var(--v)}.cx-c[data-c="5"]{--p:var(--b)}
.cx-bub{position:relative;background:color-mix(in srgb,var(--p,var(--o)) var(--apx-t2),var(--paper));border:1.5px solid var(--ink);border-radius:10px;padding:8px 11px 7px;box-shadow:2px 2px 0 var(--box2)}
.cx-meta{display:flex;align-items:center;gap:5px 7px;flex-wrap:wrap;font-size:13px}
.cx-meta strong{font:500 15.5px/1.1 var(--serif)}
.cx-meta time{font:9px var(--pixel);color:var(--faint);margin-left:auto}
.cx-txt{margin:4px 0 0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.cx-acts{display:flex;align-items:center;gap:2px;margin:5px -6px -2px;flex-wrap:wrap}
.cx-acts button{display:inline-flex;align-items:center;gap:5px;font:12px var(--sans);color:var(--mute);background:none;border:1px solid transparent;border-radius:6px;padding:3px 6px;min-height:28px;cursor:pointer}
.cx-acts button:hover:not([disabled]){color:var(--ink);border-color:var(--line)}
.cx-acts button[disabled]{opacity:.55;cursor:default}
.cx-acts .cx-end{margin-left:auto;font-size:11.5px}
.cx-replies{margin-top:10px;display:flex;flex-direction:column;gap:9px;border-left:2px dotted var(--line);margin-left:-24px;padding-left:24px}
.cx-replies .cx-c{grid-template-columns:28px minmax(0,1fr)}
.cx-replies .cx-av{width:28px;height:28px;font-size:10px}

/* Helpful: a little heart, the count flips */
.cx-help svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.cx-help[aria-pressed=true]{color:var(--ink)!important;background:var(--box)!important;border-color:var(--ink)!important}
.cx-help[aria-pressed=true] svg{fill:var(--g);stroke:var(--ink)}
.cx-help.cx-boom svg{animation:cxheart .45s var(--spring)}
@keyframes cxheart{30%{transform:scale(1.5) rotate(-10deg)}60%{transform:scale(.9)}}
.cx-flip{display:inline-flex;flex-direction:column;height:1.2em;overflow:hidden;min-width:.7em;text-align:center;font:11px/1.2em var(--pixel)}
.cx-flip span{display:block;transition:transform .32s var(--spring)}
.cx-flip.cx-up span{transform:translateY(-100%)}
.cx-plus{position:absolute;left:4px;top:-8px;pointer-events:none;font:10px var(--pixel);color:var(--g);animation:cxplus .8s var(--ease) forwards}
@keyframes cxplus{to{opacity:0;transform:translateY(-22px)}}

/* The Maker mark: a sticker, not a tick */
.cx-mkr{display:inline-flex;align-items:center;gap:4px;font:9px/1 var(--pixel);letter-spacing:.03em;color:#1d1b17;background:var(--cx-maker);border:1.5px solid var(--ink);border-radius:999px;padding:3px 7px 3px 5px;transform:rotate(-3deg);box-shadow:1px 1.5px 0 var(--ink);position:relative;white-space:nowrap}
.cx-mkr svg{width:10px;height:12px}
.cx-mkr:hover{animation:cxwiggle .5s var(--spring)}
.cx-mkr:after{content:"";position:absolute;right:-6px;top:-6px;width:7px;height:7px;background:linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat;animation:cxtwinkle 2.4s infinite}
@keyframes cxwiggle{25%{transform:rotate(4deg) scale(1.08)}60%{transform:rotate(-6deg)}}
@keyframes cxtwinkle{0%,70%,100%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.3)}}
.cx-c.cx-mk>div>.cx-bub{background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(90deg,var(--g),var(--y),var(--o),var(--r),var(--v),var(--b)) border-box;border:2px solid transparent}
:root[data-theme=crt] .cx-c.cx-mk>div>.cx-bub{background:var(--paper);border:1.5px solid var(--ink);box-shadow:0 0 10px rgba(124,240,160,.25)}
.cx-c.cx-mk>.cx-av{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--cx-maker)}

/* Arrivals */
.cx-c.cx-new{animation:cxarrive .6s var(--spring) both}
.cx-c.cx-new>div>.cx-bub{animation:cxglow 1.8s var(--ease)}
@keyframes cxarrive{from{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes cxglow{0%{box-shadow:0 0 0 4px var(--cx-maker)}100%{box-shadow:2px 2px 0 var(--box2)}}
.cx-zoom{position:fixed;z-index:200;border:1.5px dotted var(--ink);pointer-events:none;border-radius:4px}
.cx-c.cx-bye{animation:cxbye .26s ease-in forwards}
@keyframes cxbye{to{opacity:0;transform:scale(.96) translateX(12px)}}

.cx-empty{text-align:center;padding:20px 12px 14px;background:var(--paper);border:1.5px dashed var(--ink);border-radius:12px}
.cx-empty svg{width:70px;height:63px;display:block;margin:0 auto 6px;animation:cxbob 3s ease-in-out infinite}
.cx-empty h3{font:500 22px/1.15 var(--serif);margin:0 0 3px}
.cx-empty p{margin:0;color:var(--mute);font-size:13px}
@keyframes cxbob{50%{transform:translateY(-4px)}}
.cx-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;z-index:300;background:var(--ink);color:var(--paper);font:12.5px var(--sans);padding:9px 14px;border-radius:9px;transition:.3s var(--spring);max-width:calc(100vw - 32px);pointer-events:none}
.cx-toast.cx-on{transform:translate(-50%,0);opacity:1}

/* ---- Smaller screens ---- */
@media (max-width:1060px){.apx{grid-template-columns:minmax(0,1fr)}.cx-rail{position:static;max-height:none}.cx-pane{overflow:visible}}
@media (max-width:760px){.apx-cols,.apx.norail .apx-cols{grid-template-columns:minmax(0,1fr)}.apx-head .actions{flex-direction:row;flex-wrap:wrap;width:100%}.apx-head .actions>*{flex:1 1 auto}.apx-win .framebox.scrollpic{height:300px}.apx-stripe{margin-bottom:16px}}
@media (max-width:420px){.h-facts .facts{grid-template-columns:1fr}.h-facts .facts div:last-child:nth-child(odd){grid-column:auto}.cx-pane{padding:11px}.cx-replies{margin-left:-20px;padding-left:14px}}
@media (prefers-reduced-motion:reduce){.apx *,.apx-head *,.cx-rail,.cx-rail *{animation:none!important;transition:none!important}.cx-zoom{display:none}}
/* The owner's badge kit and the claim box sit in the same column, as soft cards too */
.apx-stack>.ownbadge:not([hidden]),.apx-stack>.claimbox{--h:var(--y);border:1.5px solid var(--ink);border-radius:14px;padding:15px 16px 14px;background:color-mix(in srgb,var(--h) var(--apx-t2),var(--paper));box-shadow:3px 4px 0 color-mix(in srgb,var(--h) 35%,var(--box2))}
.apx-stack>.ownbadge h2{font:500 21px/1.1 var(--serif);margin:0 0 8px}
.apx-stack>.ownbadge .body{font-size:14px}