@layer content{.aside_operations{z-index:10;user-select:none;height:0;display:none;position:sticky;top:75px}.aside_operations>.rail{background:var(--bg-page);box-shadow:var(--shadow);border-radius:24px;padding:6px;position:absolute;top:0;right:calc(100% + 22px);&>li{width:36px;height:36px;color:var(--text-regular);transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);border-radius:50%;position:relative;&+li{margin-top:4px}&>button{place-items:center;display:grid}& i{font-size:18px;line-height:1;display:block}& span{text-align:center;white-space:nowrap;color:#fff;background:var(--theme-solid,var(--theme));min-width:16px;height:16px;box-shadow:0 0 0 2px var(--bg-page);pointer-events:none;font-variant-numeric:tabular-nums;border-radius:8px;padding:0 4px;font-size:10.5px;font-weight:600;line-height:16px;display:none;position:absolute;top:-2px;left:24px;&.visible{display:block}}&>button:after{content:attr(aria-label);white-space:nowrap;color:var(--bg-page);background:var(--text-title);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);border-radius:4px;padding:3px 8px;font-size:12px;line-height:18px;position:absolute;top:50%;left:calc(100% + 12px);transform:translate(-4px,-50%)}&:hover,&:focus-within{color:var(--theme-text);background:color-mix(in srgb, var(--theme) 12%, transparent);&>button:after{opacity:1;transform:translateY(-50%)}& .joe-icon-like,& .joe-icon-share,& .joe-icon-comment,& .joe-icon-reward{animation:1s swing}}&.post-operate-share:hover>button:after,&.post-operate-donate:hover>button:after{opacity:0}}& .post-operate-like{&>button{position:relative}& .joe-font{opacity:0;transition:transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);place-items:center;display:grid;position:absolute;inset:0;transform:scale(.4);&.active{opacity:1;transform:scale(1)}}& .icon-unlike.active{color:#f56c6c}}& .post-operate-share{overflow:hidden;& .share-icon-list{pointer-events:none;opacity:0;z-index:1;background:var(--bg-raised);transition:all var(--dur-base) var(--ease-out);box-shadow:var(--glass-shadow);border-radius:50px;gap:2px;margin:-19px 0 0 14px;padding:4px;display:flex;position:absolute;top:50%;left:100%;& .share-action{width:30px;height:30px;color:var(--text-regular);transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);border-radius:50%;place-items:center;font-size:16px;display:grid;&:hover{color:var(--theme-text);background:color-mix(in srgb, var(--theme) 12%, transparent)}}}&:hover,&:focus-within{overflow:initial;& .share-icon-list{pointer-events:initial;opacity:1;transform:translate(15px)}}}& .post-operate-donate{overflow:hidden;& .joe_donate{opacity:0;z-index:1;background:var(--bg-muted);min-width:200px;min-height:100px;box-shadow:var(--shadow-block);border-radius:var(--radius-inner);transition:all var(--dur-base) var(--ease-out);margin:-34px 0 0 14px;padding:12px;position:absolute;top:0;left:100%;transform:translate(0,0);&:before{content:"";border:10px solid #0000;border-right-color:var(--border-faint);width:0;height:0;position:absolute;top:40px;left:-20px}}& .joe_donate_list{display:flex;& li{& img{width:200px;max-width:unset;border-radius:var(--radius-inner);display:block}& span{all:initial}& p{color:var(--text-secondary);margin:0 0 8px;font-size:13px;line-height:1.4}&:not(:last-child){margin-right:8px}}}&:hover{overflow:initial;& .joe_donate{opacity:1;transform:translate(15px)}}}}.aside_operations .rail>li>button,.aside_operations .post-operate-share>button{appearance:none;width:100%;height:100%;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:block}.aside_operations.is-visible{display:block}.joe_poster{width:min(420px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text-regular);background:var(--bg-page);border:0;border-radius:14px;margin:auto;padding:0;overflow:auto;box-shadow:0 24px 64px #00000047;&::backdrop{backdrop-filter:blur(4px);background:#0000008c}&[open]{animation:joe-poster-in .24s var(--ease-out)}}@keyframes joe-poster-in{0%{opacity:0;transform:translateY(12px)scale(.98)}}.joe_poster__body{gap:14px;padding:16px;display:grid;position:relative}.joe_poster__close{z-index:1;color:#fff;cursor:pointer;background:#00000073;border:0;border-radius:50%;place-items:center;width:32px;height:32px;padding:0;font-size:16px;display:grid;position:absolute;top:24px;right:24px;&:hover{background:#000000a6}}.joe_poster__preview{background:var(--fill-base);border-radius:10px;place-items:center;min-height:320px;display:grid;overflow:hidden;& img{width:100%;height:auto;display:block}}.joe_poster__loading{color:var(--text-secondary);margin:0;font-size:14px}.joe_poster__actions{gap:10px;display:flex;&[hidden]{display:none}}.joe_poster__btn{white-space:nowrap;border:1px solid var(--border-lighter);height:40px;font:inherit;color:var(--text-title);background:var(--bg-page);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);border-radius:10px;flex:1;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:14px;display:inline-flex;&[hidden]{display:none}&:hover{border-color:color-mix(in srgb, var(--theme) 50%, transparent)}&.is-primary{color:#fff;background:var(--theme-solid);border-color:#0000;&:hover{background:color-mix(in srgb, var(--theme-solid) 88%, #000)}}}.joe_poster__tip{text-align:center;color:var(--text-secondary);margin:-4px 0 0;font-size:12px;&[hidden]{display:none}}}@layer pages{.joe_post_hero{--hero-fg:#fff;isolation:isolate;color:var(--hero-fg);background:radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--theme) 85%, #fff) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--theme) 92%, #000) 0%, color-mix(in srgb, var(--theme) 70%, #000) 100%);margin-top:-72px;padding:128px 0 108px;position:relative;overflow:hidden;&:after{content:"";z-index:-1;background:linear-gradient(to bottom, transparent, var(--bg-page));opacity:.35;height:120px;position:absolute;inset:auto 0 0}}.joe_post_hero__bg{z-index:-2;filter:blur(28px)saturate(140%);background-position:50%;background-size:cover;position:absolute;inset:-40px;transform:scale(1.1);&:after{content:"";background:linear-gradient(#00000059,#0000008c);position:absolute;inset:0}}.joe_post_hero__inner{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.joe_post_hero__cats{flex-wrap:wrap;justify-content:center;gap:8px;display:flex;& .item{color:var(--hero-fg);backdrop-filter:blur(6px);transition:background var(--dur-base) var(--ease-out);background:#ffffff29;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;box-shadow:inset 0 0 0 1px #ffffff38;&:hover{background:#ffffff42}}}.joe_post_hero__title{letter-spacing:.01em;text-wrap:balance;word-break:break-word;max-width:880px;margin:0;font-size:clamp(26px,2.2vw + 14px,40px);font-weight:700;line-height:1.3;&.txt-shadow{text-shadow:0 2px 16px #00000059}}.joe_post_hero__meta{flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 0;padding:0;list-style:none;display:flex;& li{color:#ffffffeb;background:#0000002e;border-radius:999px;align-items:center;gap:6px;height:30px;padding:0 12px;font-size:13px;display:flex;box-shadow:inset 0 0 0 1px #ffffff24}& .author{padding-left:4px;& img{object-fit:cover;border-radius:50%;width:22px;height:22px}& a{color:inherit;font-weight:600}}}html:has(.joe_post_hero){& .joe_bread{display:none}& .page-post.joe_main_container{z-index:1;margin-top:-64px;position:relative}}@media (width<=768px){.joe_post_hero{margin-top:-64px;padding:100px 0 84px}.joe_post_hero__meta{gap:2px 0;& li{height:auto;box-shadow:none;background:0 0;padding:0;font-size:12.5px;&+li:before{content:"·";opacity:.7;margin:0 7px}}& .author{padding-left:0;& img{width:18px;height:18px}}}html:has(.joe_post_hero) .page-post.joe_main_container{margin-top:-48px}}}