#works[data-real-portfolio]{position:relative;padding-top:90px;padding-bottom:90px}
#works .pf-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;margin-bottom:36px}
#works .pf-heading h2{font-size:clamp(34px,3.8vw,58px);line-height:1.02;margin-bottom:0;max-width:720px}
#works .pf-intro{color:#aeb3c7;max-width:350px;font-size:13px;line-height:1.85;margin:0 0 4px}
#works .pf-toolbar{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:24px 0;border-top:1px solid #ffffff18;margin-bottom:12px}
#works .pf-search{display:flex;gap:14px;align-items:center;color:#aeb3c7;font-size:11px;min-width:0}
#works .pf-search span{white-space:nowrap}
#works .pf-search input{width:280px;max-width:100%;min-height:44px;border:1px solid #ffffff24;border-radius:100px;background:#0a0f1b;padding:11px 18px;color:#fff;font:inherit;font-size:12px;outline-offset:4px}
#works .pf-search input::placeholder{color:#6e778f}
#works .pf-search input:focus{outline:2px solid #a996ef}
#works .pf-status{font-size:10px;color:#778199;margin:0;white-space:nowrap}
#works .pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
#works .pf-card{display:block;min-width:0;border:1px solid #ffffff1b;background:#080d17;border-radius:12px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
#works .pf-card:hover{transform:translateY(-5px);border-color:#b19bff88;box-shadow:0 18px 45px #0004}
#works .pf-card:focus-visible{outline:2px solid #c7b3ff;outline-offset:5px}
#works .pf-art{position:relative;min-height:220px;display:grid;place-items:center;padding:36px 28px;background:radial-gradient(ellipse at 25% 0%,color-mix(in srgb,var(--pf-brand) 11%,transparent),transparent 70%),linear-gradient(140deg,#111827,#070b14)}
#works .pf-index{position:absolute;top:17px;left:19px;color:#62718d;font-size:9px;letter-spacing:.15em}
#works .pf-archive{position:absolute;top:16px;right:16px;z-index:2;max-width:calc(100% - 72px);padding:6px 10px;border:1px solid #94876277;border-radius:20px;background:#171a22eb;color:#e4d7b8;font-size:9px;line-height:1.5;letter-spacing:.01em}
#works .pf-screenshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
#works .pf-art-has-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#020610d9,transparent 60%);pointer-events:none}
#works .pf-art-has-preview .pf-mark{position:absolute;z-index:1;bottom:18px;left:20px;width:150px;height:66px;padding:11px 16px;box-shadow:0 8px 22px #0006}
#works .pf-art-has-preview .pf-index{z-index:1;background:#070c16d9;color:#bbc2d3;padding:5px 8px;border-radius:20px}
#works .pf-mark{width:100%;height:134px;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:8px;background:#f2f3f6;box-shadow:0 12px 35px #0003}
#works .pf-mark[data-tone=dark]{background:#10141d;border:1px solid #ffffff14}
#works .pf-mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:none}
#works .pf-mark-missing{font-size:23px;font-weight:700;letter-spacing:-.04em;overflow-wrap:anywhere;color:#172138}
#works .pf-meta{padding:23px 24px 20px;border-top:1px solid #ffffff0c}
#works .pf-meta h3{font-size:clamp(17px,1.5vw,23px);line-height:1.3;letter-spacing:-.03em;overflow-wrap:anywhere;margin:0 0 17px;font-weight:600}
#works .pf-foot{display:flex;align-items:center;justify-content:space-between;color:#8d97ae;font-size:10px}
#works .pf-arrow{width:31px;height:31px;display:grid;place-items:center;border:1px solid #ffffff2b;border-radius:50%;font-size:16px;color:#c9c7de;transition:background .2s,transform .2s}
#works .pf-card:hover .pf-arrow{background:#6e46c6;transform:rotate(45deg);color:#fff}
#works .pf-bottom{display:flex;justify-content:center;margin-top:34px}
#works .pf-more{min-width:205px;justify-content:center;background:#111725;border:1px solid #ffffff30;color:#e7e5f3;font-size:11px;padding:14px 25px;min-height:48px;border-radius:100px}
#works .pf-more:hover{background:#29203f;border-color:#b69bf1}
#works .pf-empty{grid-column:1/-1;padding:40px 0;font-size:14px;color:#9ba5bb}
@media(max-width:1000px){#works .pf-heading{gap:30px;grid-template-columns:1.2fr .8fr}#works .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#works .pf-art{min-height:210px}}
@media(max-width:600px){#works[data-real-portfolio]{padding-block:50px}#works .pf-heading{display:block;margin-bottom:26px}#works .pf-heading h2{font-size:clamp(31px,8.8vw,44px);margin-bottom:22px}#works .pf-intro{font-size:12px;max-width:100%}#works .pf-toolbar{display:block;padding-block:18px}#works .pf-search{display:block}#works .pf-search span{display:block;margin-bottom:10px;font-size:10px}#works .pf-search input{width:100%}#works .pf-status{margin-top:13px}#works .pf-grid{grid-template-columns:1fr;gap:16px}#works .pf-art{min-height:210px;padding:34px 24px}#works .pf-mark{max-width:310px;height:130px}#works .pf-meta{padding:20px 23px}#works .pf-meta h3{font-size:23px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#works .pf-card,#works .pf-arrow{transition:none}#works .pf-card:hover{transform:none}}
#works .pf-art{aspect-ratio:16/11;min-height:260px;padding:0;background:#0b1020;overflow:hidden}
#works .pf-browser{position:absolute;z-index:4;left:0;right:0;top:0;height:27px;display:flex;align-items:center;gap:13px;padding:0 12px;background:#111827;border-bottom:1px solid #ffffff18}
#works .pf-browser-dots{display:flex;gap:5px;flex:none}#works .pf-browser-dots i{width:5px;height:5px;border-radius:50%;background:#566278}#works .pf-browser-dots i:first-child{background:#a65c73}#works .pf-browser-dots i:nth-child(2){background:#9c8959}#works .pf-browser-dots i:last-child{background:#598879}
#works .pf-browser-address{font-size:9px;color:#a8b2c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#works .pf-screenshot{inset:27px 0 0;height:calc(100% - 27px);object-fit:cover;object-position:top center;transition:transform .5s ease}
#works .pf-card:hover .pf-screenshot{transform:scale(1.025)}
#works .pf-art-has-preview:after{background:linear-gradient(0deg,#02061060,transparent 27%)}
#works .pf-art-has-preview .pf-mark{bottom:12px;left:12px;width:75px;height:36px;padding:7px 9px;border-radius:5px;box-shadow:0 3px 12px #0005}
#works .pf-art-has-preview .pf-index{top:auto;left:auto;bottom:12px;right:12px;font-size:8px;padding:4px 6px}
#works .pf-archive{top:37px;right:10px;font-size:8px;padding:5px 8px}
@media(max-width:600px){#works .pf-art{aspect-ratio:16/11;min-height:230px}#works .pf-art-has-preview .pf-mark{width:65px;height:32px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){#works .pf-screenshot{transition:none}#works .pf-card:hover .pf-screenshot{transform:none}}
#works .pf-art-no-preview .pf-mark{position:absolute;bottom:12px;left:12px;width:75px;height:36px;padding:7px 9px;border-radius:5px}
#works .pf-preview-missing{margin:35px;text-align:center;font-size:14px;line-height:1.8;max-width:210px;color:#929bb1}