/* ============================================================================= Waidrn v2 — page-specific styles, lane a (design pack PR #354). Loaded only by the v2 pages in lane a, after /static/v2-pages.css (the shared page kit). Every selector is scoped under `html[data-design="v2"] .pg-body` so it cannot leak into other lanes, the /works shell or the v1 site. Ported from the design pack page-css blocks (home, search, suggestions, creators) — no inline styles, no external assets. ============================================================================= */ /* --------------------------------------------------------------------------- HOME / DISCOVER (home.html) --------------------------------------------------------------------------- */ html[data-design="v2"] .pg-body .home{max-width:1360px;padding-top:14px;padding-bottom:16px} html[data-design="v2"] .pg-body .home .home-sec{margin:0} html[data-design="v2"] .pg-body .home .sec-head{margin:0 0 8px} html[data-design="v2"] .pg-body .home .sec-head h2{font-size:15px} html[data-design="v2"] .pg-body .home .sec-head .meta{font-size:10px} html[data-design="v2"] .pg-body .home-hero{padding:13px 22px 12px;margin-bottom:10px} html[data-design="v2"] .pg-body .home-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:24px;align-items:center} html[data-design="v2"] .pg-body .home-hero-copy{min-width:0} html[data-design="v2"] .pg-body .home-hero .land-kicker{font-size:9px} html[data-design="v2"] .pg-body .home-hero h1{font-size:clamp(25px,2.15vw,31px);line-height:1.08;margin:7px 0 7px;max-width:26ch} html[data-design="v2"] .pg-body .home-sub{font-size:12px!important;line-height:1.55!important;max-width:74ch!important} html[data-design="v2"] .pg-body .home-hero .land-actions{margin-top:11px;align-items:center} html[data-design="v2"] .pg-body .home-note{font-family:var(--font-mono);font-size:9px;color:var(--faint)} html[data-design="v2"] .pg-body .home-live{margin-top:10px;border-top:1px solid rgba(255,255,255,.055);padding-top:8px} html[data-design="v2"] .pg-body .home-live-head{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} html[data-design="v2"] .pg-body .home-live-head b{color:var(--ink-3);font-weight:500;letter-spacing:0;text-transform:none;font-size:9px} html[data-design="v2"] .pg-body .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(91,211,160,.8);flex:0 0 auto} html[data-design="v2"] .pg-body .home-stats{margin-top:7px;gap:19px} html[data-design="v2"] .pg-body .home-stats .s .v{font-size:14px;line-height:1.1} html[data-design="v2"] .pg-body .home-stats .s .k{font-size:8px;margin-top:2px} html[data-design="v2"] .pg-body .home-art{position:relative;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:#08090C;box-shadow:var(--shadow-sm);min-width:0} html[data-design="v2"] .pg-body .home-art img{width:100%;height:136px;object-fit:cover;display:block;opacity:.95} html[data-design="v2"] .pg-body .home-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(7,8,10,.9));pointer-events:none} html[data-design="v2"] .pg-body .home-art-cap{position:absolute;left:10px;right:10px;bottom:7px;z-index:2;display:flex;justify-content:space-between;gap:8px;font-family:var(--font-mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} html[data-design="v2"] .pg-body .home-threads .sec-head{margin-bottom:7px} html[data-design="v2"] .pg-body .thr-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html[data-design="v2"] .pg-body .thr-item{display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);transition:border-color .12s} html[data-design="v2"] .pg-body .thr-item:hover{border-color:var(--line-2)} html[data-design="v2"] .pg-body .thr-t{min-width:0;font-size:9.5px;line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .thr-m{font-family:var(--font-mono);font-size:8px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:12px;align-items:stretch} html[data-design="v2"] .pg-body .home-main{min-width:0;display:flex;flex-direction:column;gap:12px} html[data-design="v2"] .pg-body .home-side{min-width:0;display:flex;flex-direction:column;gap:12px} html[data-design="v2"] .pg-body .home-realms{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html[data-design="v2"] .pg-body .home-realms .land-realm{padding:8px 10px;gap:3px;border-radius:8px} html[data-design="v2"] .pg-body .home-realms .land-realm .g{font-size:13px;line-height:1} html[data-design="v2"] .pg-body .home-realms .land-realm .t{font-size:11.5px;line-height:1.2} html[data-design="v2"] .pg-body .home-realms .land-realm .d{font-size:9.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[data-design="v2"] .pg-body .home-realms .land-realm .m{font-size:8.5px;line-height:1.3;margin-top:1px} html[data-design="v2"] .pg-body .soon-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:9.5px;color:var(--faint)} html[data-design="v2"] .pg-body .soon-label{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-right:2px} html[data-design="v2"] .pg-body .soon-chip{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--line-2);border-radius:999px;padding:2px 8px;font-size:9.5px;color:var(--ink-3)} html[data-design="v2"] .pg-body .soon-chip span{color:var(--gold-dim);font-size:9px} html[data-design="v2"] .pg-body .soon-more{margin-left:auto;font-family:var(--font-mono);font-size:8px;color:var(--faint)} html[data-design="v2"] .pg-body .feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} html[data-design="v2"] .pg-body .feat-card{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);min-width:0;transition:border-color .12s} html[data-design="v2"] .pg-body .feat-card:hover{border-color:var(--gold-dim)} html[data-design="v2"] .pg-body .feat-cover{width:82px;height:118px;object-fit:cover;border-radius:5px;border:1px solid var(--line-2)} html[data-design="v2"] .pg-body .feat-tx{display:flex;flex-direction:column;min-width:0;padding:1px 2px 0} html[data-design="v2"] .pg-body .feat-kicker{font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} html[data-design="v2"] .pg-body .feat-t{font-family:var(--font-display);font-size:13.5px;line-height:1.15;margin-top:3px;color:var(--ink)} html[data-design="v2"] .pg-body .feat-by{font-size:9.5px;color:var(--ink-3);margin-top:2px} html[data-design="v2"] .pg-body .feat-d{font-size:9.5px;line-height:1.4;color:var(--ink-3);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[data-design="v2"] .pg-body .feat-m{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:4px;font-family:var(--font-mono);font-size:8.5px;color:var(--faint)} html[data-design="v2"] .pg-body .feat-read{margin-left:auto;color:var(--accent);font-family:var(--font-ui);font-size:9.5px;white-space:nowrap} html[data-design="v2"] .pg-body .home-steps{grid-template-columns:1fr;gap:7px} html[data-design="v2"] .pg-body .home-steps .land-step{padding:8px 11px;border-radius:8px} html[data-design="v2"] .pg-body .home-steps .land-step .n{font-size:8.5px} html[data-design="v2"] .pg-body .home-steps .land-step .t{font-size:11px;margin:3px 0 2px} html[data-design="v2"] .pg-body .home-steps .land-step .d{font-size:9.5px;line-height:1.42} html[data-design="v2"] .pg-body .leave-inline{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;color:var(--gold);border:1px solid var(--gold-dim);border-radius:3px;padding:0 4px;background:#151003} html[data-design="v2"] .pg-body .home-econ{flex:1;display:flex;flex-direction:column} html[data-design="v2"] .pg-body .econ-card{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,#17130A,var(--panel));border:1px solid var(--gold-dim);border-radius:10px;padding:10px 13px 11px} html[data-design="v2"] .pg-body .home-econ .sec-head{margin-bottom:4px} html[data-design="v2"] .pg-body .home-econ .sec-head h2{color:var(--gold)} html[data-design="v2"] .pg-body .home-econ .sec-head .meta{color:var(--gold);opacity:.7;font-family:var(--font-mono)} html[data-design="v2"] .pg-body .econ-lede{font-size:9.5px;line-height:1.5;color:var(--ink-3)} html[data-design="v2"] .pg-body .econ-lede b{color:var(--gold);font-weight:600} html[data-design="v2"] .pg-body .econ-stats{display:grid;grid-template-columns:1fr;gap:4px;margin-top:7px} html[data-design="v2"] .pg-body .econ-stats > div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(232,177,76,.1);padding-bottom:2px} html[data-design="v2"] .pg-body .econ-stats .k{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);white-space:nowrap} html[data-design="v2"] .pg-body .econ-stats .v{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-2);white-space:nowrap} html[data-design="v2"] .pg-body .econ-stats .v.gold{color:var(--gold)} html[data-design="v2"] .pg-body .econ-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px} html[data-design="v2"] .pg-body .econ-foot .btn{height:23px;padding:0 8px;font-size:10px} html[data-design="v2"] .pg-body .econ-foot .hint{font-family:var(--font-mono);font-size:7.5px;color:var(--faint);line-height:1.3} @media(max-width:1180px){ html[data-design="v2"] .pg-body .home-hero-in{grid-template-columns:minmax(0,1fr) 320px} html[data-design="v2"] .pg-body .home-grid{grid-template-columns:minmax(0,1fr) 310px} } @media(max-width:1020px){ html[data-design="v2"] .pg-body .home-realms{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-design="v2"] .pg-body .home-grid{grid-template-columns:1fr} html[data-design="v2"] .pg-body .home-side{flex-direction:row;flex-wrap:wrap;gap:12px} html[data-design="v2"] .pg-body .home-side .home-sec{flex:1 1 300px} } @media(max-width:900px){ html[data-design="v2"] .pg-body .home{max-width:none} html[data-design="v2"] .pg-body .home-hero{padding:14px 15px 15px} html[data-design="v2"] .pg-body .home-hero-in{grid-template-columns:1fr;gap:12px} html[data-design="v2"] .pg-body .home-hero h1{font-size:25px;max-width:none} html[data-design="v2"] .pg-body .home-art img{height:104px} html[data-design="v2"] .pg-body .home-side{flex-direction:column} html[data-design="v2"] .pg-body .feat-grid{grid-template-columns:1fr} html[data-design="v2"] .pg-body .feat-card{grid-template-columns:72px minmax(0,1fr);padding:8px} html[data-design="v2"] .pg-body .feat-cover{width:72px;height:108px} html[data-design="v2"] .pg-body .feat-d{-webkit-line-clamp:3} html[data-design="v2"] .pg-body .thr-strip{grid-template-columns:1fr} html[data-design="v2"] .pg-body .home-stats{gap:15px} } @media(max-width:560px){ html[data-design="v2"] .pg-body .home-realms{grid-template-columns:1fr 1fr} html[data-design="v2"] .pg-body .home .sec-head{flex-wrap:wrap;row-gap:2px} html[data-design="v2"] .pg-body .home .sec-head .meta{display:none} html[data-design="v2"] .pg-body .home .sec-head a{white-space:nowrap} html[data-design="v2"] .pg-body .home .sec-head .spacer{flex:1 1 auto} html[data-design="v2"] .pg-body .home-stats{gap:12px} html[data-design="v2"] .pg-body .home-stats .s .v{font-size:13px} html[data-design="v2"] .pg-body .home-stats .s .k{font-size:7.5px} html[data-design="v2"] .pg-body .home-hero .land-actions .home-note{flex:1 1 100%} html[data-design="v2"] .pg-body .home-side .home-sec{flex:1 1 100%} html[data-design="v2"] .pg-body .soon-more{display:none} } /* --------------------------------------------------------------------------- SEARCH (search.html) --------------------------------------------------------------------------- */ html[data-design="v2"] .pg-body .srch-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 128px)} html[data-design="v2"] .pg-body .srch-rail{border-right:1px solid var(--line);background:var(--bg-2);padding:13px 11px 20px;min-width:0} html[data-design="v2"] .pg-body .rail-head{display:flex;align-items:center;gap:8px;padding:0 3px 6px;border-bottom:1px solid var(--line);margin-bottom:8px} html[data-design="v2"] .pg-body .rail-head h2{font-family:var(--font-display);font-size:14px} html[data-design="v2"] .pg-body .rail-head .active-n{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);border:1px solid var(--gold-dim);border-radius:4px;padding:1px 5px} html[data-design="v2"] .pg-body .rail-hint{font-size:9.5px;line-height:1.5;color:var(--faint);padding:0 3px 4px} html[data-design="v2"] .pg-body .srch-rail .panel-sec{padding:8px 2px 7px;margin-bottom:2px} html[data-design="v2"] .pg-body .srch-rail .panel-sec h3{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0 0 5px;font-weight:600} html[data-design="v2"] .pg-body .srch-rail .panel-sec h3 .caret{margin-left:auto;font-size:8px;color:var(--faint)} html[data-design="v2"] .pg-body .srch-rail .fval{padding:4px 6px;font-size:11px;border-radius:5px} html[data-design="v2"] .pg-body .srch-rail .fval .n{font-size:9.5px} html[data-design="v2"] .pg-body .rail-actions{display:flex;gap:6px;margin-top:9px} html[data-design="v2"] .pg-body .rail-actions .btn{flex:1;justify-content:center;height:26px;font-size:10.5px;padding:0 8px} html[data-design="v2"] .pg-body .rail-foot-hint{font-size:9px;line-height:1.5;color:var(--faint);margin-top:8px;padding:0 3px} html[data-design="v2"] .pg-body .rail-foot-hint b{color:var(--ink-3);font-family:var(--font-mono)} html[data-design="v2"] .pg-body .saved-searches{margin-top:12px;padding:9px 2px 0;border-top:1px solid var(--line)} html[data-design="v2"] .pg-body .saved-searches h3{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:5px} html[data-design="v2"] .pg-body .saved{display:flex;flex-direction:column;gap:1px;padding:5px 6px;border-radius:5px} html[data-design="v2"] .pg-body .saved:hover{background:var(--panel)} html[data-design="v2"] .pg-body .saved .s-t{font-size:10.5px;color:var(--ink-3)} html[data-design="v2"] .pg-body .saved .s-m{font-family:var(--font-mono);font-size:8px;color:var(--faint)} html[data-design="v2"] .pg-body .saved.add .s-t{color:var(--accent)} html[data-design="v2"] .pg-body .related{flex:1;margin-top:2px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)} html[data-design="v2"] .pg-body .related h3{font-family:var(--font-display);font-size:11px;margin-bottom:7px;color:var(--ink-2)} html[data-design="v2"] .pg-body .rel-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px} html[data-design="v2"] .pg-body .rel-chip{font-size:10px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;background:var(--panel)} html[data-design="v2"] .pg-body .rel-chip:hover{color:var(--gold);border-color:var(--gold-dim)} html[data-design="v2"] .pg-body .related .note{font-size:9px;line-height:1.5;color:var(--faint);border-top:1px solid var(--line);padding-top:6px} html[data-design="v2"] .pg-body .related .note b{color:var(--ink-3);font-family:var(--font-mono);font-weight:500} html[data-design="v2"] .pg-body .tip-list{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px} html[data-design="v2"] .pg-body .tip-list li{font-size:9px;color:var(--faint);line-height:1.4;display:flex;gap:5px} html[data-design="v2"] .pg-body .tip-list li::before{content:"·";color:var(--gold);font-family:var(--font-mono)} html[data-design="v2"] .pg-body .tip-list b{color:var(--ink-3);font-weight:500} html[data-design="v2"] .pg-body .scope-note{margin-top:12px;padding:9px 10px;border:1px dashed var(--line-2);border-radius:8px;font-size:9px;line-height:1.5;color:var(--faint)} html[data-design="v2"] .pg-body .scope-note b{color:var(--ink-3);font-weight:500} html[data-design="v2"] .pg-body .srch-main{min-width:0;padding:13px 20px 22px} html[data-design="v2"] .pg-body .srch-title-row{display:flex;align-items:baseline;gap:10px;margin:2px 0 2px} html[data-design="v2"] .pg-body .srch-title{font-family:var(--font-display);font-size:22px;line-height:1.1} html[data-design="v2"] .pg-body .srch-scope{font-family:var(--font-mono);font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em} html[data-design="v2"] .pg-body .srch-lede{font-size:10.5px;line-height:1.45;color:var(--ink-3);margin-top:1px;max-width:110ch} html[data-design="v2"] .pg-body .qbig{display:flex;align-items:center;gap:9px;height:40px;margin-top:9px;padding:0 5px 0 12px;background:var(--panel);border:1px solid var(--line-2);border-radius:9px;box-shadow:inset 0 0 0 1px rgba(232,177,76,.13)} html[data-design="v2"] .pg-body .qico{color:var(--faint);flex:0 0 auto} html[data-design="v2"] .pg-body .qbig input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:inherit;font-size:14px;letter-spacing:.01em} html[data-design="v2"] .pg-body .qbig input::placeholder{color:var(--faint)} html[data-design="v2"] .pg-body .qclear{font-family:var(--font-mono);font-size:14px;color:var(--faint);width:22px;height:22px;display:grid;place-items:center;border-radius:4px} html[data-design="v2"] .pg-body .qclear:hover{color:var(--ink-2);background:var(--panel-2)} html[data-design="v2"] .pg-body .qbig .btn{height:30px;font-size:11px;padding:0 13px} html[data-design="v2"] .pg-body .srch-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:10.5px;color:var(--faint)} html[data-design="v2"] .pg-body .srch-meta b{color:var(--ink-2);font-weight:600} html[data-design="v2"] .pg-body .srch-meta .qword{color:var(--gold)} html[data-design="v2"] .pg-body .srch-meta .mono{font-family:var(--font-mono);font-size:9px} html[data-design="v2"] .pg-body .srch-meta .live{display:flex;align-items:center;gap:5px;color:var(--green);font-family:var(--font-mono);font-size:9px} html[data-design="v2"] .pg-body .srch-meta .pulse{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(91,211,160,.8)} html[data-design="v2"] .pg-body .srch-main .active-filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px} html[data-design="v2"] .pg-body .srch-main .fchip{height:23px;font-size:10px;gap:5px;padding:0 8px} html[data-design="v2"] .pg-body .srch-main .fchip .lab{font-size:9px} html[data-design="v2"] .pg-body .srch-main .fchip.add{border-style:dashed} html[data-design="v2"] .pg-body .srch-main .active-filters .clear{margin-left:4px;font-size:9.5px;color:var(--faint)} html[data-design="v2"] .pg-body .srch-main .active-filters .clear:hover{color:var(--ink-2)} html[data-design="v2"] .pg-body .srch-mobile-bar{display:none} html[data-design="v2"] .pg-body .srch-tabs{margin-top:8px;border-bottom:1px solid var(--line)} html[data-design="v2"] .pg-body .srch-tabs .tab{padding:7px 10px;font-size:11px} html[data-design="v2"] .pg-body .srch-tabs .tab .count{font-size:9px;padding:0 4px} html[data-design="v2"] .pg-body .grp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin-top:9px} html[data-design="v2"] .pg-body .grp-col{min-width:0;display:flex;flex-direction:column;gap:10px} html[data-design="v2"] .pg-body .grp-cols .grp{margin-top:0} html[data-design="v2"] .pg-body .grp-cols .res-row{grid-template-columns:40px minmax(0,1fr) auto;gap:9px} html[data-design="v2"] .pg-body .grp-cols .res-side{display:none} html[data-design="v2"] .pg-body .grp-cols .res-act .btn{height:23px} html[data-design="v2"] .pg-body .grp-cols .res-t{font-size:11.5px} html[data-design="v2"] .pg-body .grp-cols .res-path{font-size:8px} html[data-design="v2"] .pg-body .grp-cols .res-m{font-size:8.5px} html[data-design="v2"] .pg-body .grp-cols .res-snip{font-size:9.5px} html[data-design="v2"] .pg-body .grp-cols .res-bar{max-width:180px} html[data-design="v2"] .pg-body .grp-cols .grp-head{margin-bottom:0} html[data-design="v2"] .pg-body .grp{display:flex;flex-direction:column;gap:3px;margin-top:10px} html[data-design="v2"] .pg-body .grp-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding-bottom:5px;border-bottom:1px solid var(--line-2);margin-bottom:2px} html[data-design="v2"] .pg-body .grp-head h2{font-family:var(--font-display);font-size:13px;display:flex;align-items:center;gap:7px} html[data-design="v2"] .pg-body .grp-head h2 .count{font-family:var(--font-mono);font-size:9px;color:var(--faint);border:1px solid var(--line-2);border-radius:999px;padding:0 5px} html[data-design="v2"] .pg-body .grp-head .mono{font-family:var(--font-mono);font-size:8.5px;color:var(--faint)} html[data-design="v2"] .pg-body .grp-head .spacer{flex:1} html[data-design="v2"] .pg-body .grp-head a{font-size:9.5px;color:var(--accent)} html[data-design="v2"] .pg-body .res-list{display:flex;flex-direction:column} html[data-design="v2"] .pg-body .res-row{display:grid;grid-template-columns:42px minmax(0,1fr) 122px 82px;gap:10px;align-items:center;padding:6px 7px;border-bottom:1px solid var(--line);border-radius:6px;min-width:0} html[data-design="v2"] .pg-body .res-row:hover{background:var(--panel)} html[data-design="v2"] .pg-body .res-row:last-child{border-bottom:0} html[data-design="v2"] .pg-body .res-cover{width:38px;height:57px;border-radius:3px;overflow:hidden;border:1px solid var(--line-2);display:block} html[data-design="v2"] .pg-body .res-cover img{width:100%;height:100%;object-fit:cover} html[data-design="v2"] .pg-body .res-ic{width:36px;height:36px;border-radius:7px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-3);background:var(--bg-2);font-size:13px} html[data-design="v2"] .pg-body .res-ic.proj{color:var(--gold);border-color:var(--gold-dim);background:#151003} html[data-design="v2"] .pg-body .res-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:10px;color:#1A1409;background:linear-gradient(135deg,var(--gold),#B98A3E);border:1px solid rgba(255,255,255,.12)} html[data-design="v2"] .pg-body .res-avatar.alt1{background:linear-gradient(135deg,#8EC5E8,#4D7FA6);color:#0B1620} html[data-design="v2"] .pg-body .res-b{display:flex;flex-direction:column;gap:2px;min-width:0} html[data-design="v2"] .pg-body .res-t{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px} html[data-design="v2"] .pg-body .res-t .mono{font-weight:400} html[data-design="v2"] .pg-body .res-path{font-family:var(--font-mono);font-size:8.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .res-m{font-family:var(--font-mono);font-size:9px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .res-m b{color:var(--ink-2);font-weight:500} html[data-design="v2"] .pg-body .res-m .gold{color:var(--gold)} html[data-design="v2"] .pg-body .res-m .green{color:var(--green)} html[data-design="v2"] .pg-body .res-snip{font-size:10px;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[data-design="v2"] .pg-body .res-snip mark{background:rgba(232,177,76,.15);color:var(--gold);border-radius:2px;padding:0 2px} html[data-design="v2"] .pg-body .res-tags{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;margin-top:1px} html[data-design="v2"] .pg-body .res-tags .mtag{font-size:8.5px;padding:0 5px;height:15px} html[data-design="v2"] .pg-body .res-tags .mtag .sw{width:5px;height:5px} html[data-design="v2"] .pg-body .res-bar{display:block;height:3px;border-radius:2px;background:#231E12;overflow:hidden;margin-top:2px;max-width:240px} html[data-design="v2"] .pg-body .res-bar i{display:block;height:100%;background:var(--gold)} html[data-design="v2"] .pg-body .res-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;min-width:0} html[data-design="v2"] .pg-body .res-side .top{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-2);white-space:nowrap} html[data-design="v2"] .pg-body .res-side .sub{font-family:var(--font-mono);font-size:8px;color:var(--faint);white-space:nowrap} html[data-design="v2"] .pg-body .res-act{display:flex;justify-content:flex-end} html[data-design="v2"] .pg-body .res-act .btn{height:23px;font-size:9.5px;padding:0 8px;border-radius:5px;white-space:nowrap} html[data-design="v2"] .pg-body .mark.rating{color:var(--ink-3);border:1px solid var(--line-2);background:var(--bg-2)} html[data-design="v2"] .pg-body .sealed-note{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:9.5px;color:var(--faint);font-family:var(--font-mono)} html[data-design="v2"] .pg-body .sealed-note span{color:var(--gold)} html[data-design="v2"] .pg-body .sealed-note a{color:var(--accent)} html[data-design="v2"] .pg-body .empty.recovery{border-style:dashed;padding:13px 16px;text-align:center;margin-top:4px} html[data-design="v2"] .pg-body .recovery .ico{font-size:17px} html[data-design="v2"] .pg-body .recovery .t{font-size:13px;margin:4px 0 2px} html[data-design="v2"] .pg-body .recovery .d{font-size:10.5px;max-width:62ch} html[data-design="v2"] .pg-body .recovery .d b{color:var(--ink-2);font-family:var(--font-mono);font-weight:500} html[data-design="v2"] .pg-body .recovery .a{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:9px} html[data-design="v2"] .pg-body .recovery .a .btn{height:24px;font-size:10px;padding:0 9px} html[data-design="v2"] .pg-body .recovery-hint{margin-top:7px;font-size:9.5px;color:var(--faint)} html[data-design="v2"] .pg-body .recovery-hint a{color:var(--accent)} html[data-design="v2"] .pg-body .srch-foot{display:flex;align-items:center;gap:12px;margin-top:11px;padding-top:8px;border-top:1px solid var(--line);font-size:9.5px;color:var(--faint)} html[data-design="v2"] .pg-body .srch-foot .mono{font-family:var(--font-mono);font-size:8.5px} html[data-design="v2"] .pg-body .srch-foot a{margin-left:auto;color:var(--accent);font-size:9.5px} @media(max-width:1020px){ html[data-design="v2"] .pg-body .srch-shell{grid-template-columns:224px minmax(0,1fr)} html[data-design="v2"] .pg-body .srch-main{padding:12px 14px 20px} } @media(max-width:1200px){ html[data-design="v2"] .pg-body .grp-cols{grid-template-columns:1fr} html[data-design="v2"] .pg-body .grp-cols .grp-col{width:100%} html[data-design="v2"] .pg-body .grp-cols .grp-col + .grp-col{margin-top:10px} } @media(max-width:900px){ html[data-design="v2"] .pg-body .srch-shell{grid-template-columns:1fr;min-height:0} html[data-design="v2"] .pg-body .srch-rail{display:none} html[data-design="v2"] .pg-body .srch-main{padding:12px 14px 24px} html[data-design="v2"] .pg-body .srch-mobile-bar{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap} html[data-design="v2"] .pg-body .srch-mobile-bar .btn{height:24px;font-size:10px;padding:0 9px} html[data-design="v2"] .pg-body .srch-mobile-bar .sortlink{font-size:10px;padding:0} html[data-design="v2"] .pg-body .srch-tabs .tab{padding:7px 9px} html[data-design="v2"] .pg-body .srch-meta .live{display:none} html[data-design="v2"] .pg-body .res-row{grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:7px 6px} html[data-design="v2"] .pg-body .res-cover{width:32px;height:48px} html[data-design="v2"] .pg-body .res-ic{width:32px;height:32px;font-size:12px} html[data-design="v2"] .pg-body .res-side{display:none} html[data-design="v2"] .pg-body .res-act .btn{height:22px;font-size:9px;padding:0 7px} html[data-design="v2"] .pg-body .res-t{font-size:11.5px} html[data-design="v2"] .pg-body .res-t .mono{display:none} html[data-design="v2"] .pg-body .res-path{display:none} html[data-design="v2"] .pg-body .res-tags{display:none} html[data-design="v2"] .pg-body .res-snip{-webkit-line-clamp:2;font-size:9.5px} html[data-design="v2"] .pg-body .res-m{font-size:8.5px;white-space:normal} html[data-design="v2"] .pg-body .srch-title{font-size:21px} html[data-design="v2"] .pg-body .qbig{height:44px} html[data-design="v2"] .pg-body .recovery .a .btn{flex:1 1 auto;justify-content:center} } @media(max-width:560px){ html[data-design="v2"] .pg-body .srch-main{overflow-x:hidden} html[data-design="v2"] .pg-body .res-row{grid-template-columns:32px minmax(0,1fr)} html[data-design="v2"] .pg-body .res-act{display:none} html[data-design="v2"] .pg-body .res-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35} html[data-design="v2"] .pg-body .res-t .mark{display:none} html[data-design="v2"] .pg-body .res-m{white-space:normal;overflow:visible;text-overflow:clip} html[data-design="v2"] .pg-body .srch-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:22px} html[data-design="v2"] .pg-body .grp-head .mono{display:none} html[data-design="v2"] .pg-body .srch-foot{flex-wrap:wrap} html[data-design="v2"] .pg-body .srch-foot a{margin-left:0} html[data-design="v2"] .pg-body .sealed-note{display:block;line-height:1.5} html[data-design="v2"] .pg-body .sealed-note span{margin-right:4px} } /* --------------------------------------------------------------------------- SUGGESTIONS (suggestions.html) --------------------------------------------------------------------------- */ html[data-design="v2"] .pg-body .sug{max-width:1360px;padding-top:14px;padding-bottom:18px} html[data-design="v2"] .pg-body .sug-head{display:flex;align-items:flex-start;gap:12px;margin:2px 0 10px} html[data-design="v2"] .pg-body .sug-glyph{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:18px;color:var(--violet);background:#120E1C;border:1px solid #3A3348;flex:0 0 auto} html[data-design="v2"] .pg-body .sug-who{min-width:0;flex:1} html[data-design="v2"] .pg-body .sug-head h1{font-family:var(--font-display);font-size:24px;line-height:1.1;display:flex;align-items:center;gap:8px;flex-wrap:wrap} html[data-design="v2"] .pg-body .sug-path{font-family:var(--font-mono);font-size:9.5px;color:var(--faint);margin-top:3px} html[data-design="v2"] .pg-body .sug-desc{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:5px;max-width:104ch} html[data-design="v2"] .pg-body .sug-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-family:var(--font-mono);font-size:9px;color:var(--faint)} html[data-design="v2"] .pg-body .sug-facts b{color:var(--ink-2);font-weight:500} html[data-design="v2"] .pg-body .sug-actions{display:flex;gap:7px;flex-wrap:wrap;padding-top:2px} html[data-design="v2"] .pg-body .sug-actions .btn{height:27px;font-size:11px} html[data-design="v2"] .pg-body .sug-band{border:1px solid var(--line-2);border-left:3px solid var(--violet);border-radius:0 8px 8px 0;background:linear-gradient(90deg,#120E1C,var(--panel) 70%);padding:8px 12px;margin-bottom:8px;font-size:10.5px;line-height:1.5;color:var(--ink-3)} html[data-design="v2"] .pg-body .sug-band b{color:var(--ink-2)} html[data-design="v2"] .pg-body .sug-band .violet{color:var(--violet)} html[data-design="v2"] .pg-body .sug-band a{color:var(--accent);white-space:nowrap} html[data-design="v2"] .pg-body .sug-band a:hover{color:var(--ink)} html[data-design="v2"] .pg-body .sug-signin{display:flex;align-items:center;gap:9px;border:1px solid var(--gold-dim);border-radius:8px;background:linear-gradient(90deg,#151003,var(--panel) 65%);padding:7px 11px;margin-bottom:9px;flex-wrap:wrap} html[data-design="v2"] .pg-body .sug-signin-ico{color:var(--gold);font-size:13px} html[data-design="v2"] .pg-body .sug-signin p{font-size:10.5px;line-height:1.4;color:var(--ink-3);flex:1 1 420px;margin:0} html[data-design="v2"] .pg-body .sug-signin p b{color:var(--gold);font-weight:600} html[data-design="v2"] .pg-body .sug-signin .btn{height:24px;font-size:10px;padding:0 9px} html[data-design="v2"] .pg-body .sug-controls{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:9px;padding-bottom:1px} html[data-design="v2"] .pg-body .sug-tabs{border-bottom:0;gap:1px;flex:1 1 auto} html[data-design="v2"] .pg-body .sug-tabs .tab{padding:7px 9px;font-size:11px} html[data-design="v2"] .pg-body .sug-views{display:flex;align-items:center;gap:7px} html[data-design="v2"] .pg-body .sug-views .views-label{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} html[data-design="v2"] .pg-body .sug-views .seg .on{background:#151003;color:var(--gold)} html[data-design="v2"] .pg-body .sug-views .seg a{padding:5px 9px;font-size:10.5px} html[data-design="v2"] .pg-body .sug-controls .rescount{font-family:var(--font-mono);font-size:8.5px;color:var(--faint);white-space:nowrap;margin-left:auto;padding-bottom:6px} html[data-design="v2"] .pg-body .sug-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} html[data-design="v2"] .pg-body .sug .sug-card{padding:11px 12px;gap:6px;border-radius:9px;position:relative;min-width:0} html[data-design="v2"] .pg-body .sug .sug-card h3{font-size:12.5px;line-height:1.25;margin-top:1px} html[data-design="v2"] .pg-body .sug-top{display:flex;align-items:center;gap:4px;flex-wrap:wrap} html[data-design="v2"] .pg-body .sug-kind{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.03em;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:0 4px;background:var(--bg-2)} html[data-design="v2"] .pg-body .sug-kind.film{color:var(--violet);border-color:#3A3348} html[data-design="v2"] .pg-body .sug-kind.art{color:var(--gold);border-color:var(--gold-dim)} html[data-design="v2"] .pg-body .sug-kind.audio{color:var(--green);border-color:#2E4A33} html[data-design="v2"] .pg-body .sug-kind.tool{color:var(--accent);border-color:#2E3A48} html[data-design="v2"] .pg-body .sug-kind.fan{color:var(--rose);border-color:#4A3038} html[data-design="v2"] .pg-body .sug-top .mark{margin-left:auto;font-size:7.5px} html[data-design="v2"] .pg-body .sug .sug-card .desc{font-size:10px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:43px} html[data-design="v2"] .pg-body .sug .sug-card .desc i{color:var(--ink-2)} html[data-design="v2"] .pg-body .sug .stake-meter{gap:7px;font-size:9.5px;color:var(--ink-3);margin-top:1px} html[data-design="v2"] .pg-body .sug .stake-meter .num{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);font-weight:500;white-space:nowrap} html[data-design="v2"] .pg-body .sug .stake-meter .num.gold{color:var(--gold)} html[data-design="v2"] .pg-body .sug .stake-meter .bar{height:4px} html[data-design="v2"] .pg-body .sug .stake-meter .floor{font-family:var(--font-mono);font-size:8px;color:var(--faint);white-space:nowrap} html[data-design="v2"] .pg-body .sug-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-family:var(--font-mono);font-size:8px;color:var(--faint)} html[data-design="v2"] .pg-body .sug-meta span + span:before{content:"·";margin-right:5px;color:var(--line-2)} html[data-design="v2"] .pg-body .sug-meta .gold{color:var(--gold)} html[data-design="v2"] .pg-body .sug-meta .green{color:var(--green)} html[data-design="v2"] .pg-body .sug-meta .rose{color:var(--rose)} html[data-design="v2"] .pg-body .sug .sug-foot{gap:6px;padding-top:2px;margin-top:auto} html[data-design="v2"] .pg-body .sug .sug-foot .btn{height:24px;padding:0 9px;font-size:10px;border-radius:5px} html[data-design="v2"] .pg-body .sug .sug-foot .claim{margin-left:auto} html[data-design="v2"] .pg-body .sug-card.ready{border-color:var(--gold-dim);background:linear-gradient(180deg,#14110B,var(--panel))} /* sealed copyright card */ html[data-design="v2"] .pg-body .sug-card.sealed{border-color:#4A3038;background:linear-gradient(180deg,#150B0F,var(--panel) 60%)} html[data-design="v2"] .pg-body .wax-seal{position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#E8B14C,#8A6A2F 65%,#4A3510);box-shadow:0 2px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.16);transform:rotate(-8deg)} html[data-design="v2"] .pg-body .wax-seal span{font-family:var(--font-display);font-size:15px;font-weight:700;color:#231704;transform:rotate(8deg)} html[data-design="v2"] .pg-body .sug-card.sealed .sug-top{padding-right:38px} html[data-design="v2"] .pg-body .seal-state{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--font-mono);font-size:8px;color:var(--faint)} html[data-design="v2"] .pg-body .seal-state .seal-l b{color:var(--ink-2);font-weight:500} html[data-design="v2"] .pg-body .seal-state .seal-l + .seal-l:before{content:"·";margin-right:6px;color:var(--line-2)} html[data-design="v2"] .pg-body .seal-state .rose{color:var(--rose)} html[data-design="v2"] .pg-body .wax-decay{position:relative;height:5px;border-radius:3px;background:#231E12;overflow:visible;margin:2px 0 1px} html[data-design="v2"] .pg-body .wax-decay i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#8A6A2F,#E8B14C)} html[data-design="v2"] .pg-body .wax-mark{position:absolute;top:-2px;width:2px;height:9px;background:var(--rose);opacity:.8} html[data-design="v2"] .pg-body .seal-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:2px} html[data-design="v2"] .pg-body .seal-foot .mono{font-family:var(--font-mono);font-size:8px;color:var(--faint)} html[data-design="v2"] .pg-body .seal-foot .btn{height:22px;padding:0 8px;font-size:9px;margin-left:auto} html[data-design="v2"] .pg-body .sug-pickup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);padding:9px 12px;margin-top:10px} html[data-design="v2"] .pg-body .pickup-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1 1 420px} html[data-design="v2"] .pg-body .pickup-k{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);border:1px solid #2E4A33;border-radius:3px;padding:0 4px} html[data-design="v2"] .pg-body .pickup-t{font-size:12px;font-weight:600} html[data-design="v2"] .pg-body .pickup-m{font-family:var(--font-mono);font-size:8.5px;color:var(--faint)} html[data-design="v2"] .pg-body .pickup-bar{width:90px;height:4px;border-radius:2px;background:#231E12;overflow:hidden} html[data-design="v2"] .pg-body .pickup-bar i{display:block;height:100%;background:var(--gold)} html[data-design="v2"] .pg-body .sug-pickup .btn{height:23px;padding:0 8px;font-size:9.5px} html[data-design="v2"] .pg-body .pickup-done{font-size:9.5px;color:var(--accent);white-space:nowrap} html[data-design="v2"] .pg-body .sug-footline{display:flex;align-items:center;gap:12px;margin-top:9px;padding-top:7px;border-top:1px solid var(--line);font-size:9px;color:var(--faint)} html[data-design="v2"] .pg-body .sug-footline .mono{font-family:var(--font-mono);font-size:8.5px} html[data-design="v2"] .pg-body .sug-footline a{margin-left:auto;color:var(--accent);font-size:9.5px} @media(max-width:1180px){ html[data-design="v2"] .pg-body .sug-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ html[data-design="v2"] .pg-body .sug{max-width:none} html[data-design="v2"] .pg-body .sug-head{flex-wrap:wrap} html[data-design="v2"] .pg-body .sug-actions{width:100%} html[data-design="v2"] .pg-body .sug-controls{gap:8px} html[data-design="v2"] .pg-body .sug-controls .rescount{display:none} html[data-design="v2"] .pg-body .sug-tabs{flex:1 1 100%;order:1} html[data-design="v2"] .pg-body .sug-views{order:2;flex-wrap:wrap} html[data-design="v2"] .pg-body .sug-grid{grid-template-columns:1fr} html[data-design="v2"] .pg-body .sug .sug-card .desc{min-height:0} html[data-design="v2"] .pg-body .sug-band{font-size:10px} html[data-design="v2"] .pg-body .sug-signin p{flex:1 1 100%} } @media(max-width:560px){ html[data-design="v2"] .pg-body .sug-head h1{font-size:20px} html[data-design="v2"] .pg-body .sug-views{width:100%} html[data-design="v2"] .pg-body .sug-views .seg{flex:1;display:flex;overflow-x:auto} html[data-design="v2"] .pg-body .sug-views .seg a{flex:1;text-align:center;white-space:nowrap} html[data-design="v2"] .pg-body .sug-signin .btn{flex:1 1 auto;justify-content:center} html[data-design="v2"] .pg-body .sug-pickup .pickup-bar{display:none} html[data-design="v2"] .pg-body .pickup-main{flex:1 1 100%} html[data-design="v2"] .pg-body .sug-pickup .btn{margin-left:auto} html[data-design="v2"] .pg-body .sug-footline{flex-wrap:wrap} html[data-design="v2"] .pg-body .sug-footline a{margin-left:0} } /* --------------------------------------------------------------------------- CREATORS (creators.html) --------------------------------------------------------------------------- */ html[data-design="v2"] .pg-body .pg-title .pill{margin-left:2px} html[data-design="v2"] .pg-body .cr-expl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px} html[data-design="v2"] .pg-body .cr-expl-item{display:flex;gap:10px;align-items:flex-start;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:11px;line-height:1.5;color:var(--ink-3)} html[data-design="v2"] .pg-body .cr-expl-item .n{flex:0 0 auto;font-family:var(--font-mono);font-size:9.5px;color:var(--gold);padding-top:1px} html[data-design="v2"] .pg-body .cr-expl-item b{display:block;color:var(--ink-2);font-weight:600;font-size:11.5px;margin-bottom:1px} html[data-design="v2"] .pg-body .cr-expl-item .mono{font-family:var(--font-mono);font-size:10px;color:var(--ink-2)} html[data-design="v2"] .pg-body .tabs{margin-top:14px} html[data-design="v2"] .pg-body .tabs .spacer{flex:1} html[data-design="v2"] .pg-body .tabs .rescount{font-family:var(--font-mono);font-size:10px;color:var(--faint);padding:0 7px 9px;white-space:nowrap} html[data-design="v2"] .pg-body .cr-search{margin:10px 0 0;padding:10px 12px} html[data-design="v2"] .pg-body .cr-search .realm-filter > span{font-size:9.5px} html[data-design="v2"] .pg-body .cr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px} html[data-design="v2"] .pg-body .cr-card{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:13px 14px 12px;min-width:0;transition:border-color .12s,transform .12s} html[data-design="v2"] .pg-body .cr-card:hover{border-color:var(--line-2);transform:translateY(-1px)} html[data-design="v2"] .pg-body .cr-top{display:flex;align-items:center;gap:10px;min-width:0} html[data-design="v2"] .pg-body .cr-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-family:var(--font-display);font-size:16px;color:#12181D;background:linear-gradient(135deg,var(--gold),#B98A3E);border:1px solid rgba(255,255,255,.14)} html[data-design="v2"] .pg-body .cr-avatar.alt1{background:linear-gradient(135deg,#8EC5E8,#4D7FA6)} html[data-design="v2"] .pg-body .cr-avatar.alt2{background:linear-gradient(135deg,#C7A8E8,#7C5FA6)} html[data-design="v2"] .pg-body .cr-avatar.alt3{background:linear-gradient(135deg,#9AD8B4,#4E8F68)} html[data-design="v2"] .pg-body .cr-id{flex:1;min-width:0} html[data-design="v2"] .pg-body .cr-name{font-family:var(--font-display);font-size:16.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .cr-name a:hover{color:var(--gold)} html[data-design="v2"] .pg-body .cr-handle{font-family:var(--font-mono);font-size:9px;color:var(--faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .cr-follow{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:13px;color:var(--faint)} html[data-design="v2"] .pg-body .cr-follow:hover{color:var(--gold);border-color:var(--gold-dim);background:#151003} html[data-design="v2"] .pg-body .cr-bio{font-size:11.5px;line-height:1.55;color:var(--ink-3);min-height:2.9em} html[data-design="v2"] .pg-body .cr-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg-2)} html[data-design="v2"] .pg-body .cr-stats > div{padding:6px 10px;border-right:1px solid var(--line);min-width:0} html[data-design="v2"] .pg-body .cr-stats > div:last-child{border-right:0} html[data-design="v2"] .pg-body .cr-stats .v{font-family:var(--font-mono);font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .cr-stats .k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:1px} html[data-design="v2"] .pg-body .cr-work{display:flex;align-items:center;gap:9px;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg-2)} html[data-design="v2"] .pg-body .cr-work:hover{border-color:var(--line-2)} html[data-design="v2"] .pg-body .cr-work img{width:25px;height:37px;border-radius:3px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line-2)} html[data-design="v2"] .pg-body .cr-work-tx{flex:1;min-width:0} html[data-design="v2"] .pg-body .cr-work .t{display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .cr-work .m{display:block;font-family:var(--font-mono);font-size:8.5px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-design="v2"] .pg-body .cr-work-r{flex:0 0 auto;font-family:var(--font-mono);font-size:8.5px;line-height:1.45;color:var(--faint);text-align:right} html[data-design="v2"] .pg-body .cr-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:2px;min-width:0} html[data-design="v2"] .pg-body .cr-fee{margin-right:auto;font-family:var(--font-mono);font-size:8.5px;color:var(--faint);white-space:nowrap;letter-spacing:.02em} html[data-design="v2"] .pg-body .btn.support{color:var(--gold);border-color:var(--gold-dim);background:#151003} html[data-design="v2"] .pg-body .btn.support:hover{color:var(--gold);border-color:var(--gold);background:#1B160A} html[data-design="v2"] .pg-body .cr-signin{display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 14px;border:1px dashed var(--line-2);border-radius:10px;background:var(--bg-2)} html[data-design="v2"] .pg-body .cr-signin-ico{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--gold-dim);border-radius:7px;color:var(--gold);background:#17130A;font-size:12px} html[data-design="v2"] .pg-body .cr-signin-tx{flex:1;min-width:0;font-size:11.5px;line-height:1.55;color:var(--ink-3)} html[data-design="v2"] .pg-body .cr-signin-tx b{color:var(--ink-2)} html[data-design="v2"] .pg-body .cr-signin-tx .mono{font-family:var(--font-mono);font-size:10px;color:var(--ink-2)} html[data-design="v2"] .pg-body .cr-signin-a{display:flex;gap:7px;flex:0 0 auto} html[data-design="v2"] .pg-body .cr-pager{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} html[data-design="v2"] .pg-body .cr-pager > .mono{font-family:var(--font-mono);font-size:10px;color:var(--faint)} html[data-design="v2"] .pg-body .cr-pgnav{margin-left:auto;display:flex;align-items:center;gap:5px} html[data-design="v2"] .pg-body .cr-pgnav .pgn[disabled]{opacity:.35;cursor:not-allowed} html[data-design="v2"] .pg-body .cr-pgnav .page-meta{font-family:var(--font-mono);font-size:9.5px;color:var(--faint);margin-left:6px;white-space:nowrap} html[data-design="v2"] .pg-body .cr-closed{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9.5px;color:var(--faint);padding:10px 0 4px} @media(max-width:1100px){ html[data-design="v2"] .pg-body .cr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-design="v2"] .pg-body .cr-expl{grid-template-columns:1fr} } @media(max-width:820px){ html[data-design="v2"] .pg-body .cr-grid{grid-template-columns:1fr} html[data-design="v2"] .pg-body .cr-signin{flex-wrap:wrap} html[data-design="v2"] .pg-body .cr-signin-tx{flex:1 1 100%} html[data-design="v2"] .pg-body .tabs .rescount{display:none} } @media(max-width:640px){ html[data-design="v2"] .pg-body .cr-expl{display:none} html[data-design="v2"] .pg-body .cr-search{padding:10px} html[data-design="v2"] .pg-body .cr-signin-a{width:100%} html[data-design="v2"] .pg-body .cr-signin-a .btn{flex:1 1 auto;justify-content:center} html[data-design="v2"] .pg-body .cr-pager{flex-wrap:wrap;gap:8px} html[data-design="v2"] .pg-body .cr-pgnav{margin-left:0} html[data-design="v2"] .pg-body .cr-foot{flex-wrap:wrap} html[data-design="v2"] .pg-body .cr-fee{width:100%;margin-right:0} html[data-design="v2"] .pg-body .cr-bio{min-height:0} } /* --- pass 2 refinements --- */ html[data-design="v2"] .pg-body .cr-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:-2px;min-height:18px} html[data-design="v2"] .pg-body .cr-clock{display:inline} @media(max-width:560px){html[data-design="v2"] .pg-body .cr-clock{display:none}} html[data-design="v2"] .pg-body .cr-band{margin:0 0 8px;align-items:flex-start} html[data-design="v2"] .pg-body .cr-band-ico{font-size:15px;color:var(--gold);line-height:1} /* --------------------------------------------------------------------------- LANE-A BRIDGES Rules the design pack spells with inline `style=""` in the static mockups (progress widths, cover slots) and the few v2-native pieces our real markup adds on top of the ported page-css. Everything stays CSP-safe (`style-src 'self'`): widths are native `` values, art slots are sized here. --------------------------------------------------------------------------- */ /* stake meter: native instead of the mockup's inline width */ html[data-design="v2"] .pg-body .sug .stake-meter progress{ appearance:none;-webkit-appearance:none;flex:1 1 auto;min-width:0;height:4px; border:0;border-radius:3px;background:#231E12;overflow:hidden;display:block;margin:0; } html[data-design="v2"] .pg-body .sug .stake-meter progress::-webkit-progress-bar{background:#231E12;border-radius:3px} html[data-design="v2"] .pg-body .sug .stake-meter progress::-webkit-progress-value{background:var(--gold);border-radius:3px} html[data-design="v2"] .pg-body .sug .stake-meter progress::-moz-progress-bar{background:var(--gold);border-radius:3px} /* art slots: generated SVG art / uploaded covers fill the design's img boxes */ html[data-design="v2"] .pg-body .home-art .cover-art{width:100%;height:136px;display:block;opacity:.95} html[data-design="v2"] .pg-body .feat-cover .cover-art, html[data-design="v2"] .pg-body .feat-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:5px} html[data-design="v2"] .pg-body .res-cover .cover-art, html[data-design="v2"] .pg-body .res-cover img{width:100%;height:100%;object-fit:cover;display:block} /* search: landing has no facet rail, so the canvas is one column */ html[data-design="v2"] .pg-body .srch-shell-solo{grid-template-columns:minmax(0,1fr)} /* search rows are
(a row may carry a mod report/hide form), not */ html[data-design="v2"] .pg-body .res-t a{color:inherit} html[data-design="v2"] .pg-body .res-t .mono.faint{color:var(--faint);font-weight:400} html[data-design="v2"] .pg-body .res-mod{display:flex;align-items:center;gap:4px;margin-left:2px;position:relative} html[data-design="v2"] .pg-body .res-mod .report-link, html[data-design="v2"] .pg-body .res-mod .mod-hide summary{ font-family:var(--font-mono);font-size:8px;color:var(--faint);cursor:pointer;list-style:none; } html[data-design="v2"] .pg-body .res-mod .mod-hide summary::-webkit-details-marker{display:none} html[data-design="v2"] .pg-body .res-mod .report-link:hover, html[data-design="v2"] .pg-body .res-mod .mod-hide summary:hover{color:var(--ink-2)} html[data-design="v2"] .pg-body .res-mod .mod-hide-form{ position:absolute;right:0;top:16px;z-index:40;width:220px;display:flex;flex-direction:column;gap:6px; padding:9px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);box-shadow:var(--shadow-sm); } html[data-design="v2"] .pg-body .res-mod .mod-hide-form label{display:flex;flex-direction:column;gap:3px;font-size:9px;color:var(--faint)} html[data-design="v2"] .pg-body .res-mod .mod-hide-form input{ width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px; color:var(--ink);font:inherit;font-size:10px;padding:4px 6px;outline:none; } /* search anchor lines keep their spacing */ html[data-design="v2"] .pg-body .active-filters .clear a{color:inherit} html[data-design="v2"] .pg-body .active-filters .clear a:hover{color:var(--ink-2)} html[data-design="v2"] .pg-body .srch-foot .pgn{margin-left:0} html[data-design="v2"] .pg-body .srch-foot a:last-child{margin-left:auto} /* suggestions: pagination links share the footline with the counts */ html[data-design="v2"] .pg-body .sug-footline a{margin-left:0} html[data-design="v2"] .pg-body .sug-footline a:last-child{margin-left:auto} /* creators: sort tabs share the page kit .tabs; the count stays quiet */ html[data-design="v2"] .pg-body .tabs .rescount{ font-family:var(--font-mono);font-size:10px;color:var(--faint);padding:0 7px 9px;white-space:nowrap; } /* phone: 390 px — keep the new pages inside the viewport */ @media(max-width:560px){ html[data-design="v2"] .pg-body .srch-title-row{flex-wrap:wrap;gap:4px} html[data-design="v2"] .pg-body .home-live-head b{font-size:8px} html[data-design="v2"] .pg-body .cr-stats .v{font-size:13px} } /* ============================================================================= #485 — home rails + suggestions cards (lane A). The #40 personal rails / #166 editors' picks were ported with v1 home class names (realm-strip / realm-item / strip-*), and the suggestions claim/rights state used v1 helper classes. These rules turn that markup into page-kit surfaces; no markup, data or behaviour changes. ============================================================================= */ /* ---- personal home rails: continue reading, for you, because… ---------- */ html[data-design="v2"] .pg-body .realm-strip, html[data-design="v2"] .pg-body .home-curated { margin: 14px 0; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); } html[data-design="v2"] .pg-body .realm-strip .strip-head, html[data-design="v2"] .pg-body .home-curated .sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } html[data-design="v2"] .pg-body .realm-strip .strip-title, html[data-design="v2"] .pg-body .home-curated .sec-head h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; } html[data-design="v2"] .pg-body .realm-strip .strip-more, html[data-design="v2"] .pg-body .home-curated .sec-head a { margin-left: auto; font-size: 12px; color: var(--accent); white-space: nowrap; } html[data-design="v2"] .pg-body .realm-strip .strip-desc { color: var(--ink-3); font-size: 11.5px; margin: 4px 0 12px; max-width: 90ch; } html[data-design="v2"] .pg-body .realm-strip .realm-items, html[data-design="v2"] .pg-body .home-curated .realm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } html[data-design="v2"] .pg-body .realm-item { min-width: 0; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); transition: border-color .12s ease, background .12s ease; } html[data-design="v2"] .pg-body .realm-item:hover { border-color: var(--line-2); background: var(--panel-3); } html[data-design="v2"] .pg-body .realm-item-title { display: block; color: var(--ink); font-weight: 600; font-size: 13px; overflow-wrap: anywhere; line-height: 1.35; } html[data-design="v2"] .pg-body .realm-item-title:hover { color: var(--gold); } html[data-design="v2"] .pg-body .realm-item-meta { margin: 4px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; } html[data-design="v2"] .pg-body .rec-reason { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--faint); font-size: 11px; line-height: 1.5; } html[data-design="v2"] .pg-body .personal-rail .realm-items, html[data-design="v2"] .pg-body .continue-reading .realm-items { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } html[data-design="v2"] .pg-body .personal-cold-start { border-style: dashed; background: var(--bg-2); } html[data-design="v2"] .pg-body .personal-cold-start .strip-title { font-size: 15px; } html[data-design="v2"] .pg-body .personal-cold-start p { margin: 6px 0 0; } /* editors' picks read as curated, not algorithmic */ html[data-design="v2"] .pg-body .home-curated { border-color: var(--line-2); background: linear-gradient(180deg, var(--panel-2), var(--panel)); } html[data-design="v2"] .pg-body .home-curated .sec-head .meta { font-size: 11px; color: var(--faint); max-width: 90ch; } html[data-design="v2"] .pg-body .curated-item { border-left: 2px solid var(--gold); } html[data-design="v2"] .pg-body .curated-item .realm-item-meta { font-family: var(--font-mono); } /* search anchors (#485): the compact jump list uses v1 chip names */ html[data-design="v2"] .pg-body .srch-anchors { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 0; list-style: none; } html[data-design="v2"] .pg-body .srch-anchor, html[data-design="v2"] .pg-body a.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink-2); font-size: 11.5px; } html[data-design="v2"] .pg-body .srch-anchor:hover, html[data-design="v2"] .pg-body a.chip:hover { border-color: var(--gold-dim); color: var(--gold); } /* ---- suggestions claim / rights state (#485) --------------------------- */ html[data-design="v2"] .pg-body .sug-claim-state { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; line-height: 1.5; } html[data-design="v2"] .pg-body .sug-card .sug-top .badge { align-self: center; } html[data-design="v2"] .pg-body .sug-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; } html[data-design="v2"] .pg-body .sug-card .mark { margin-left: auto; } html[data-design="v2"] .pg-body .prj-rights-manage, html[data-design="v2"] .pg-body .prj-rights-claim, html[data-design="v2"] .pg-body .prj-claim-vote { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); font-size: 12px; color: var(--ink-2); } html[data-design="v2"] .pg-body .prj-claim-vote { border-color: var(--violet); } @media (max-width: 640px) { html[data-design="v2"] .pg-body .realm-strip, html[data-design="v2"] .pg-body .home-curated { padding: 13px 14px; } html[data-design="v2"] .pg-body .realm-strip .realm-items, html[data-design="v2"] .pg-body .home-curated .realm-items, html[data-design="v2"] .pg-body .personal-rail .realm-items, html[data-design="v2"] .pg-body .continue-reading .realm-items { grid-template-columns: 1fr; } html[data-design="v2"] .pg-body .realm-strip .strip-more, html[data-design="v2"] .pg-body .home-curated .sec-head a { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { html[data-design="v2"] .pg-body .realm-item { transition: none; } } @media (forced-colors: active) { html[data-design="v2"] .pg-body .realm-strip, html[data-design="v2"] .pg-body .home-curated, html[data-design="v2"] .pg-body .realm-item, html[data-design="v2"] .pg-body .prj-rights-manage, html[data-design="v2"] .pg-body .prj-rights-claim, html[data-design="v2"] .pg-body .prj-claim-vote { border: 1px solid CanvasText; } }