attached to (injected by common.js), NOT a pseudo-element: pinned to the VIEWPORT and centered on the PARENT, with the spin isolated to the child — so the centering translate and the rotation never share a transform chain (that combo is what clipped/orbited it before). pointer-events:none so it never intercepts a click. */ .shredbg{position:fixed;top:50%;left:50%;width:85vmin;height:85vmin; transform:translate(-50%,-50%);z-index:-1;pointer-events:none;opacity:.055;overflow:visible} .shredbg img{display:block;width:100%;height:100%;object-fit:contain; animation:shredspin 150s linear infinite;will-change:transform} @keyframes shredspin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.shredbg img{animation:none}} a{color:var(--accent);text-decoration:none} a:hover{color:var(--bright)} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,textarea,select{font:inherit;color:var(--ink);background:var(--sunk);border:1px solid var(--hair);padding:7px 9px;width:100%} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)} :focus-visible{outline:1px solid var(--accent);outline-offset:2px} img,video{max-width:100%;display:block} .wrap{max-width:1200px;margin:0 auto;padding:0 14px} .narrow{max-width:760px} .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .tnum{font-variant-numeric:tabular-nums} .hint{font-size:11px;color:var(--faint);margin:6px 0} .banner{margin:8px 0;font-size:12px;color:var(--dim)} .banner.bad{color:var(--bad)} .banner.ok{color:var(--good)} .foot{padding:26px 2px;color:var(--faint);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center} .btn{border:1px solid var(--hair);color:var(--accent);padding:7px 12px;letter-spacing:.1em;text-transform:uppercase;font-size:11px;display:inline-block} .btn:hover{border-color:var(--accent)} .btn.ghost{color:var(--dim)} .btn.danger{color:var(--bad)} /* ---- masthead / nav ---- */ .masthead{display:flex;align-items:center;gap:12px;padding:12px 0 10px;border-bottom:1px solid var(--hair);flex-wrap:wrap} .brand{display:flex;align-items:center;gap:9px} .brand svg{width:26px;height:26px;display:block} /* brand-logo.png is black art; invert(1) makes it read on the dark theme without touching the pristine asset. */ .brand img.brandlogo{width:28px;height:28px;display:block;filter:invert(1)} .brand h1{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--bright);font-weight:400} .brand h1 b{color:var(--accent)} .nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap} .nav a,.nav button{padding:5px 10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);position:relative} .nav a:hover,.nav button:hover{color:var(--bright)} .nav a.on{color:var(--accent)} .nav .who{color:var(--faint)} .navbadge{margin-left:5px;font-size:9px;letter-spacing:.04em;background:var(--accent);color:var(--void); padding:0 4px;border-radius:0;font-variant-numeric:tabular-nums;vertical-align:middle} /* ---- search bar (the product IS this bar) ---- */ .searchwrap{padding:22px 0 8px} .searchbar{display:flex;gap:8px;align-items:stretch} .searchbar input{font-size:16px;padding:11px 13px;border-color:var(--hair-hi);background:var(--sunk)} .searchbar .btn{white-space:nowrap;display:flex;align-items:center} .qhelp{font-size:11px;color:var(--faint);margin:8px 0 2px;display:flex;flex-wrap:wrap;gap:4px 12px} .qhelp code{color:var(--dim);background:var(--sunk);padding:1px 5px;border:1px solid var(--hair)} .resultbar{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap} /* ---- grid (CSS columns masonry, no JS) ---- */ .grid{columns:5 200px;column-gap:10px;padding:14px 0} .tile{break-inside:avoid;margin:0 0 10px;position:relative;display:block;border:1px solid var(--hair);background:var(--sunk)} .tile:hover{border-color:var(--hair-hi)} .tile img{width:100%;height:auto;display:block} .tile .badge{position:absolute;top:6px;right:6px;font-size:9px;letter-spacing:.12em;text-transform:uppercase; padding:2px 6px;background:rgba(10,11,13,.82);border:1px solid var(--hair-hi);color:var(--accent)} .tile .tdist{position:absolute;bottom:6px;left:6px;font-size:9px;letter-spacing:.1em;text-transform:uppercase; padding:1px 5px;background:rgba(10,11,13,.82);color:var(--dim)} .center{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 0;color:var(--faint)} .center forager-loader{width:150px;--fl-ink:var(--navy);--fl-accent:var(--accent)} /* ---- post page ---- */ .postgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;padding:16px 0} @media(max-width:820px){.postgrid{grid-template-columns:1fr}} .stage{border:1px solid var(--hair);background:var(--sunk);padding:10px;display:flex;justify-content:center} .stage img,.stage video{max-height:78vh;width:auto;max-width:100%} .stage img.zoomable{cursor:zoom-in} /* reading mode = magnifier. Base layer is fit-to-width; JS drives a transform-origin:0 0 scale()+translateX() for cursor-anchored zoom (up to 4x native) and horizontal drag-pan. Vertical navigation stays as normal page scroll (stage grows to the scaled height). */ .stage.reading{display:block;overflow-x:hidden} .stage.reading img.zoomable{max-height:none;width:100%;max-width:100%;height:auto;cursor:zoom-out;transform-origin:0 0;will-change:transform} .stage.reading.pannable img.zoomable{cursor:grab} .stage.reading.dragging img.zoomable{cursor:grabbing} .stagehint{margin-top:4px} .side section{border:1px solid var(--hair);background:var(--panel);padding:12px;margin:0 0 12px} .side h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:9px} .kv{font-size:12px;color:var(--dim);display:flex;flex-direction:column;gap:4px} .kv b{color:var(--ink);font-weight:600} .taglist{display:flex;flex-wrap:wrap;gap:6px} .tag{font-size:10.5px;letter-spacing:.06em;padding:2px 7px;border:1px solid var(--hair-hi);color:var(--accent);display:inline-flex;align-items:center;gap:6px} .tag a{color:inherit} .tag .x{color:var(--faint);cursor:pointer} .tag .x:hover{color:var(--bad)} /* AI-suggested tags read dimmer + provisional: hairline border, a leading '·', dotted underline on the name. confirm (✓ -> user) / remove (✕) on hover. */ .tag.ai{color:var(--dim);border-color:var(--hair);border-style:dashed} .tag.ai .aidot{color:var(--faint)} .tag.ai a{text-decoration:underline dotted;text-underline-offset:2px} .tag .ok{color:var(--faint);cursor:pointer} .tag .ok:hover{color:var(--good)} .confirmall{margin-top:8px} .confirmall .btn{font-size:10px;padding:4px 9px} /* AI caption under the media (dim, quiet — supplements, never a headline) */ .aicaption{margin-top:6px;font-size:12px;color:var(--dim);font-style:italic;max-width:70ch} .aicaption::before{content:"ai · ";font-style:normal;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-size:10px} .tagadd{position:relative;margin-top:8px} .ac{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--raised);border:1px solid var(--hair-hi);max-height:200px;overflow:auto} .ac div{padding:5px 9px;font-size:12px;cursor:pointer;display:flex;justify-content:space-between} .ac div:hover,.ac div.sel{background:var(--sunk);color:var(--bright)} .ac .c{color:var(--faint)} /* ---- family panel (parent/variant tree) ---- */ .fam{font-size:12px} .famnode{display:flex;align-items:center;gap:8px;padding:4px 0} .famnode .thumb{width:44px;height:44px;flex:none;border:1px solid var(--hair);object-fit:cover;background:var(--sunk)} .famnode.cur{outline:1px solid var(--accent);outline-offset:1px} .famnode a{color:var(--ink)} .famkids{margin-left:14px;padding-left:12px;border-left:2px solid var(--hair-hi)} .famroot{color:var(--faint);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px} /* ---- upload ---- */ .drop{border:1px dashed var(--hair-hi);background:var(--sunk);padding:44px 16px;text-align:center;color:var(--dim);margin:16px 0} .drop.over{border-color:var(--accent);color:var(--bright)} .drop b{color:var(--accent)} .queue{display:flex;flex-direction:column;gap:0} .qitem{display:flex;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--hair)} .qitem .qthumb{width:60px;height:60px;flex:none;border:1px solid var(--hair);object-fit:cover;background:var(--sunk)} .qitem .qmeta{flex:1;min-width:0;font-size:12px} .qitem .qname{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qitem .qstate{font-size:11px;color:var(--dim);margin-top:3px} .qitem .qstate.ok{color:var(--good)} .qitem .qstate.bad{color:var(--bad)} .qitem .qstate.dupe{color:var(--info)} .bar{height:4px;background:var(--sunk);margin-top:5px;border:1px solid var(--hair)} .bar span{display:block;height:100%;background:var(--accent);width:0;transition:width .2s} .bulktags{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap} .bulktags input{max-width:340px} .neardupes{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--info)} .neardupes img{width:40px;height:40px;object-fit:cover;border:1px solid var(--info)} /* ---- bulk intake ---- */ .bulk-intake{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair)} .bi-head{margin-bottom:12px} .bi-head .lbl{display:block;margin-bottom:4px} .bi-tags{display:flex;gap:10px;align-items:flex-start;margin:12px 0;flex-wrap:wrap} .bi-tags .lbl{padding-top:9px} .bi-tags .taglist{display:flex;gap:6px;flex-wrap:wrap} .bi-drop{margin:12px 0} .bi-picks{display:inline-flex;gap:8px;margin-top:10px} .bi-rollup{margin:14px 0 8px} .bi-bar{height:8px;background:var(--sunk);border:1px solid var(--hair);overflow:hidden} .bi-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease} .bi-nums{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px;letter-spacing:.04em} .bi-nums .bnum{color:var(--dim)} .bi-nums .bnum b{font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink);margin-right:2px} .bi-nums .done b{color:var(--good)} .bi-nums .dupe b{color:var(--info)} .bi-nums .failed b{color:var(--bad)} .bi-nums .left b{color:var(--accent)} .bi-actions{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap} .bi-note{font-size:11px;color:var(--faint)} .bi-list{max-height:340px;overflow:auto;border:1px solid var(--hair);background:var(--sunk);margin-top:6px} .brow{display:flex;align-items:center;gap:9px;padding:3px 9px;font-size:11.5px;border-bottom:1px solid var(--hair)} .brow:last-child{border-bottom:none} .brow .bdot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--faint)} .brow .bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .brow .bst{flex:none;color:var(--dim);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase} .brow.s-uploading .bdot{background:var(--accent);animation:bpulse 1s ease-in-out infinite} .brow.s-done .bdot{background:var(--good)} .brow.s-done .bst{color:var(--good)} .brow.s-dupe .bdot{background:var(--info)} .brow.s-dupe .bst{color:var(--info)} .brow.s-failed .bdot{background:var(--bad)} .brow.s-failed .bst{color:var(--bad)} .brow.s-unsupported{opacity:.55} .brow.s-unsupported .bdot{background:var(--faint)} @keyframes bpulse{0%,100%{opacity:.4}50%{opacity:1}} /* ---- tags page ---- */ .tagcloud{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0} .tagcloud a{border:1px solid var(--hair);padding:4px 9px;font-size:12px;color:var(--ink);display:inline-flex;gap:7px} .tagcloud a:hover{border-color:var(--accent);color:var(--bright)} .tagcloud a .c{color:var(--faint);font-variant-numeric:tabular-nums} /* ---- dupes review page (side-by-side compare) ---- */ .dupe{border:1px solid var(--hair);background:var(--panel);margin:0 0 16px;padding:12px} .dupe .dhead{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;flex-wrap:wrap} .dupe .dhead .dist{color:var(--accent)} .dupe .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:640px){.dupe .pair{grid-template-columns:1fr}} .dupe .cand{border:1px solid var(--hair);background:var(--sunk);padding:8px;display:flex;flex-direction:column;gap:6px} .dupe .cand.keep{border-color:var(--good)} .dupe .cand img{width:100%;height:auto;max-height:320px;object-fit:contain;background:var(--void)} .dupe .cand .cmeta{font-size:11px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px;align-items:center} .dupe .cand .keepflag{color:var(--good);font-size:9px;letter-spacing:.14em;text-transform:uppercase} .dupe .dactions{display:flex;gap:8px;margin-top:10px;align-items:center} .dupe .dnote{font-size:11px;color:var(--faint);margin-left:auto} /* ---- tables (admin) ---- */ table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0} th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair)} th{color:var(--dim);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase} td.code{color:var(--accent)} .statrow{display:flex;gap:22px;flex-wrap:wrap;padding:8px 0} .stat{border:1px solid var(--hair);background:var(--panel);padding:12px 16px;min-width:140px} .stat .n{font-size:22px;color:var(--bright);font-variant-numeric:tabular-nums} .stat .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:3px} /* ===================================================================== POINTS — the account rail + the juice. The rail floats in the blank right gutter on wide viewports; below ~1200px it is media-queried away and the header score chip takes over. NEVER over content: at the rail breakpoint the body reserves a right gutter so the centered 1200px column can never enter the rail's zone. All motion honors prefers-reduced-motion (instant number, no dot/floater/flash). ===================================================================== */ .rail{display:none} /* off by default; shown on wide only */ .scorechip{display:inline-flex;align-items:center;gap:5px;margin-left:6px; padding:2px 8px;border:1px solid var(--hair-hi);color:var(--accent); letter-spacing:.08em;font-size:11px;vertical-align:middle} .scorechip::before{content:"◈";color:var(--accent-deep);font-size:10px} .scorechip-n{color:var(--bright);font-variant-numeric:tabular-nums;display:inline-block} /* ---- the dossier (RAIL_W=260, GAP=16 -> body reserves 292px). The rail is flush-right (right:16 -> right edge 16px inside the viewport at ANY width: 1200/1440/1999/2560), top-anchored, and scrolls internally if it runs tall. The reserved gutter guarantees the centered 1200px column never overlaps. */ @media(min-width:1200px){ body{padding-right:292px} /* 260 rail + 16 right + 16 gap */ .scorechip{display:none} .rail{display:block;position:fixed;top:16px;right:16px;width:260px; max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;z-index:20; border:1px solid var(--hair-hi);background:var(--panel);padding:16px 15px 14px; box-shadow:0 0 0 1px var(--void),0 8px 30px rgba(0,0,0,.5)} body.is-profile .rail{display:none} /* the /profile page IS the dossier; no double */ } /* the dossier as a full page (narrow home of the rail) */ .dossier-page{max-width:340px;margin:6vh auto 0;border:1px solid var(--hair-hi); background:var(--panel);padding:20px 18px 16px; box-shadow:0 0 0 1px var(--void),0 8px 30px rgba(0,0,0,.5)} /* avatar — a live post's thumb, center-cropped square; fallback = shred mark */ .dsr-avatar{width:96px;height:96px;border:1px solid var(--hair-hi);background:var(--sunk); margin:2px auto 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative} .dsr-avimg{width:100%;height:100%;object-fit:cover} .dsr-avfallback{width:58%;height:58%;object-fit:contain;filter:invert(1);opacity:.16} .dsr-id{text-align:center;margin-bottom:4px} .rail-user{font-size:12px;letter-spacing:.1em;color:var(--bright); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rail-rank{display:inline-block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);border:1px dotted var(--hair-hi);padding:2px 8px;margin-top:6px;min-height:14px} .rail-rank.typing::after{content:"_";color:var(--accent);animation:railcursor .7s steps(1) infinite} @keyframes railcursor{50%{opacity:0}} /* section idiom: a bordered lowercase header over each block */ .dsr-sec{margin-top:14px} .dsr-h{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint); padding-bottom:5px;margin-bottom:9px;border-bottom:1px solid var(--hair)} .dsr-sec .dsr-h::before{content:"◈ ";color:var(--accent-deep)} .rail-score{font-size:38px;line-height:1.05;color:var(--bright);font-variant-numeric:tabular-nums; margin:2px 0 10px;transform-origin:left center;will-change:transform} .rail-track{height:3px;background:var(--sunk);border:1px solid var(--hair);overflow:hidden} .rail-fill{height:100%;background:var(--accent);width:0;transition:width .3s ease-out} .rail-next{font-size:10px;letter-spacing:.06em;color:var(--dim);margin-top:7px} /* record — one stat per line, dim label / tabular value */ .dsr-stats{display:flex;flex-direction:column;gap:5px} .dsr-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px} .dsr-k{color:var(--dim);letter-spacing:.04em} .dsr-v{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right} /* awards — dotted-border chips (the AI-tag idiom), wrapping */ .dsr-awards{display:flex;flex-wrap:wrap;gap:6px} .dsr-award{font-size:10px;letter-spacing:.06em;padding:2px 8px; border:1px dotted var(--hair-hi);color:var(--accent);white-space:nowrap} /* recent — lowercase one-liners; the whole line links to the post */ .dsr-events{display:flex;flex-direction:column;gap:6px} .dsr-ev{display:flex;align-items:baseline;gap:7px;font-size:10.5px;color:var(--dim)} a.dsr-ev:hover{color:var(--bright)} .dsr-ev-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dsr-ev-d{color:var(--accent);font-variant-numeric:tabular-nums} .dsr-ev-a{color:var(--faint);white-space:nowrap} .avatarctl{margin-top:10px} /* the score scale-pop as the dot lands (1 -> 1.25 -> 1) */ .rail-score.pop,.scorechip-n.pop{animation:scorepop .2s ease-out} @keyframes scorepop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}} /* the flying dot (accent) — position:fixed, transform-driven from origin */ .pointdot{position:fixed;top:0;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px; border-radius:50%;background:var(--accent);z-index:60;pointer-events:none; box-shadow:0 0 8px 2px rgba(237,167,51,.7)} /* the "+N" floater that rises + fades at the interaction point */ .pointfloat{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%); color:var(--accent);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600; letter-spacing:.04em;text-shadow:0 1px 3px var(--void);animation:pointrise .75s ease-out forwards} @keyframes pointrise{0%{opacity:0;transform:translate(-50%,-40%)} 15%{opacity:1}100%{opacity:0;transform:translate(-50%,-190%)}} /* rank-up: a single rail flash (no confetti — deadpan) */ .rail.rankup{animation:railflash .6s ease-out} @keyframes railflash{0%{box-shadow:0 0 0 1px var(--void),0 8px 30px rgba(0,0,0,.5)} 30%{box-shadow:0 0 0 1px var(--accent),0 0 24px 4px rgba(237,167,51,.55)} 100%{box-shadow:0 0 0 1px var(--void),0 8px 30px rgba(0,0,0,.5)}} @media(prefers-reduced-motion:reduce){ .rail-score,.scorechip-n,.rail.rankup{animation:none} .rail-fill{transition:none} .pointdot,.pointfloat{display:none!important} } /* ---- auth cards ---- */ .authcard{max-width:380px;margin:8vh auto 0;border:1px solid var(--hair);background:var(--panel);padding:22px} .authcard h2{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bright);margin-bottom:4px;font-weight:400} .authcard .sub{font-size:11px;color:var(--dim);margin-bottom:16px} .authcard label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:12px 0 4px} .authcard button.go{width:100%;margin-top:18px;border:1px solid var(--accent);color:var(--accent);padding:9px;letter-spacing:.12em;text-transform:uppercase;font-size:11px} .authcard .alt{margin-top:14px;font-size:11px;color:var(--faint);text-align:center}