:root { --bg:#0b0d11; --panel:#13161d; --line:#292d36; --muted:#a3a8b4; --text:#f1f3f5; --acid:#d9ff47; --orange:#ff724c; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,Arial,sans-serif; min-height:100vh; } .noise { inset:0; position:fixed; opacity:.08; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } .shell { width:min(1240px,calc(100% - 48px)); margin:auto; position:relative; } .topbar { height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:#fff; font:800 28px/ .85 "Barlow Condensed"; letter-spacing:-.5px; text-decoration:none; } .brand span { color:var(--acid); } .brand small { display:block; font:600 9px Inter; letter-spacing:2.4px; margin-top:7px; } .account { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:13px; } button { font:inherit; cursor:pointer; } .text-button { border:0; background:none; color:var(--acid); font-weight:700; }
.login-view { width:min(670px,100%); padding:130px 0 90px; } .eyebrow { margin:0 0 15px; font:700 11px Inter; letter-spacing:2px; color:var(--acid); } h1,h2 { font-family:"Barlow Condensed"; margin:0; text-transform:uppercase; } h1 { font-size:clamp(62px,10vw,122px); line-height:.82; letter-spacing:-2.5px; } h1 em { color:var(--acid); font-style:normal; } .intro { color:var(--muted); max-width:540px; font-size:16px; line-height:1.7; margin:35px 0; } .google-button { display:flex; align-items:center; gap:12px; border:1px solid #eef0f3; background:#fff; color:#1f2024; padding:13px 18px; border-radius:4px; font-weight:700; } .google-mark { color:#4285f4; font-size:21px; font-weight:800; }.hint { font-size:12px; color:var(--muted); margin-top:17px; }
.hero { padding:92px 0 53px; display:flex; align-items:end; justify-content:space-between; gap:20px; } .hero h1 { font-size:clamp(52px,7.4vw,92px); } .hero-copy { color:var(--muted); max-width:260px; line-height:1.55; margin:0 0 8px; }.controls { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:17px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }.search { display:flex; align-items:center; gap:10px; color:var(--acid); min-width:290px; }.search span { font-size:26px; line-height:0; }.search input { background:transparent; border:0; outline:0; color:var(--text); width:100%; font:14px Inter; }.search input::placeholder { color:#787e8b; }.categories { display:flex; gap:8px; flex-wrap:wrap; justify-content:end; }.category { border:1px solid var(--line); background:transparent; border-radius:99px; color:var(--muted); padding:7px 12px; text-transform:uppercase; font:700 10px Inter; letter-spacing:.7px; }.category.active,.category:hover { color:#0d0e10; background:var(--acid); border-color:var(--acid); }.result-count { color:var(--muted); font-size:12px; margin:26px 0 15px; }.mod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:70px; }.mod-card { min-height:296px; position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); text-align:left; color:white; padding:0; transition:transform .2s,border-color .2s; }.mod-card:hover { transform:translateY(-4px); border-color:var(--acid); }.art { height:184px; padding:14px; background:linear-gradient(135deg,var(--art1),var(--art2)); position:relative; overflow:hidden; }.art:after { content:""; position:absolute; width:170%; height:45%; background:rgba(0,0,0,.15); transform:rotate(-20deg); left:-30%; top:30%; }.art-type { position:relative; z-index:1; display:inline-block; padding:5px 7px; background:rgba(10,10,12,.77); font:700 9px Inter; letter-spacing:1px; }.card-body { padding:15px; }.card-title { display:block; text-transform:uppercase; font:700 26px/1 "Barlow Condensed"; letter-spacing:.1px; }.card-meta,.meta { display:block; font-size:11px; color:var(--muted); margin-top:8px; }.tags { display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; }.tag { border:1px solid var(--line); color:#bfc4ce; padding:5px 7px; text-transform:uppercase; font-size:9px; font-weight:700; letter-spacing:.6px; }.empty { text-align:center; color:var(--muted); padding:70px 0; }
.mod-dialog { width:min(850px,calc(100% - 30px)); padding:0; background:var(--panel); color:var(--text); border:1px solid #3b404a; } .mod-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }.dialog-art { height:245px; }.dialog-content { padding:32px; }.dialog-content h2 { font-size:50px; line-height:.9; }.dialog-content p:not(.eyebrow):not(.meta) { color:#c2c7d0; line-height:1.6; max-width:650px; }.close { position:absolute; right:16px; top:12px; z-index:2; background:#0c0e12; border:0; color:white; height:34px; width:34px; font-size:27px; }.download { display:inline-flex; gap:20px; align-items:center; background:var(--acid); padding:13px 16px; color:#111; text-decoration:none; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }.download span { font-size:20px; }.download:hover { background:white; }
@media (max-width:720px) { .shell { width:min(100% - 30px,1240px); }.topbar { height:76px; }.hero { padding:58px 0 35px; align-items:start; flex-direction:column; }.controls { align-items:stretch; flex-direction:column; }.categories { justify-content:start; }.mod-grid { grid-template-columns:1fr; }.login-view { padding:95px 0; }.dialog-art { height:170px; } }