:root { color-scheme: dark; --ink:#eef1f9; --muted:#9099b2; --line:rgba(174,185,225,.14); --panel:rgba(20,27,48,.72); --cyan:#7ce9ff; --violet:#9e87ff; --lime:#b1ff81; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#090d19; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.backdrop { position:fixed; inset:0; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse 65% 38% at 14% 4%,rgba(90,89,248,.19),transparent 72%),radial-gradient(ellipse 48% 30% at 91% 19%,rgba(32,187,205,.12),transparent 70%),linear-gradient(180deg,#0b1020 0%,#090d19 45%,#070a12 100%); z-index:-2; }
.backdrop:after { content:""; position:absolute; width:80vw; height:40vw; right:-24vw; top:41rem; background:radial-gradient(ellipse,rgba(104,91,255,.10),transparent 67%); filter:blur(28px); }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; }
.topbar { min-height:84px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:14px; letter-spacing:.16em; font-weight:500; }
.brand b { color:var(--cyan); font-weight:700; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; font-size:16px; font-weight:800; letter-spacing:0; background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#101329; border-radius:9px 3px 9px 3px; transform:rotate(-8deg); }
.live-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; letter-spacing:.05em; }
.live-status i { width:8px; height:8px; border-radius:50%; background:#788198; box-shadow:0 0 0 4px rgba(120,129,152,.12); }
.live-status.ok i { background:var(--lime); box-shadow:0 0 0 4px rgba(177,255,129,.12),0 0 15px rgba(177,255,129,.75); }
.hero { padding:104px 0 68px; max-width:760px; }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin:14px 0 21px; font-size:clamp(42px,7vw,80px); line-height:.98; letter-spacing:-.065em; font-weight:700; }
h1 em { color:#c4b8ff; font-family:Georgia,serif; font-weight:400; letter-spacing:-.07em; }
.hero p { max-width:620px; color:#aeb6cb; font-size:16px; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.button { display:inline-flex; gap:12px; align-items:center; min-height:45px; padding:0 17px; border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:650; }
.button.primary { border-color:transparent; color:#0c1020; background:linear-gradient(105deg,var(--cyan),#a7e7ff); box-shadow:0 12px 35px rgba(88,214,255,.15); }
.button.primary span { font-size:17px; }
.button.quiet:hover,.filter:hover,.page-button:hover,.text-button:hover { border-color:rgba(124,233,255,.52); color:var(--cyan); }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:rgba(16,22,40,.46); backdrop-filter:blur(12px); border-radius:11px; overflow:hidden; }
.stat-row article { padding:21px 25px; min-height:87px; border-right:1px solid var(--line); }.stat-row article:last-child{border:0;}
.stat-label { display:block; color:var(--muted); font-size:10px; letter-spacing:.13em; font-weight:700; margin-bottom:8px; }.stat-row strong { font-size:15px; font-weight:650; }
.section { padding-top:112px; }.section-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; }.section-heading h2 { margin:8px 0 0; font-size:29px; letter-spacing:-.035em; }.section-note { color:var(--muted); min-height:20px; margin:14px 0 24px; font-size:13px; }
.text-button { padding:6px 0; color:#bac3da; border:0; border-bottom:1px solid transparent; background:none; font-size:13px; }
.asset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }.featured-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.asset-card { position:relative; min-width:0; min-height:225px; overflow:hidden; display:flex; flex-direction:column; justify-content:end; border:1px solid var(--line); border-radius:10px; background:#101629; transition:transform .18s ease,border-color .18s ease; }.asset-card:hover { transform:translateY(-4px); border-color:rgba(124,233,255,.48); }
.media { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#202743,#101629); }.media img,.media video { width:100%; height:100%; object-fit:contain; transition:transform .25s ease; }.asset-card:hover .media img,.asset-card:hover .media video { transform:scale(1.035); }.media:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(8,11,21,.91)); pointer-events:none; }
.asset-info { position:relative; padding:15px; z-index:1; }.asset-info h3 { max-width:100%; margin:0 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:650; }.asset-info p { margin:0; color:#a9b2c7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.asset-badge { position:absolute; top:10px; left:10px; z-index:2; border:1px solid rgba(255,255,255,.16); border-radius:5px; padding:4px 7px; background:rgba(11,16,30,.72); backdrop-filter:blur(8px); color:#e4e8f5; font-size:9px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }.new-badge { left:auto; right:10px; color:#15200f; background:var(--lime); border-color:transparent; }
.copy-url { position:absolute; z-index:3; top:9px; right:9px; width:29px; height:29px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:6px; background:rgba(10,14,27,.71); color:white; opacity:0; transition:opacity .18s; }.asset-card:hover .copy-url,.copy-url:focus { opacity:1; }.copy-url.copied { color:var(--lime); }
.asset-browser-heading { align-items:center; }.search { width:min(290px,42vw); display:flex; align-items:center; gap:7px; height:41px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:rgba(15,21,39,.74); color:var(--muted); }.search:focus-within{border-color:rgba(124,233,255,.62);}.search input{ min-width:0; width:100%; outline:0; border:0; background:transparent; color:var(--ink); font-size:13px; }.search input::placeholder{color:#75809b;}
.filters { display:flex; gap:8px; overflow:auto; padding:24px 0 15px; scrollbar-width:none; }.filters::-webkit-scrollbar{display:none;}.filter,.page-button { flex:0 0 auto; border:1px solid var(--line); border-radius:7px; padding:8px 11px; background:rgba(20,27,48,.6); color:#adb6cd; font-size:12px; }.filter { text-decoration:none; }.filter.active { background:rgba(124,233,255,.14); border-color:rgba(124,233,255,.48); color:var(--cyan); }.browser-meta { display:flex; justify-content:space-between; color:var(--muted); padding-bottom:15px; font-size:12px; }.pager{display:flex; justify-content:center; gap:8px; padding-top:24px;}.page-button:disabled{opacity:.35;cursor:not-allowed;}.page-button:disabled:hover{color:#adb6cd;border-color:var(--line);}
.clothing-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:12px; border:1px solid rgba(124,233,255,.2); border-radius:8px; background:rgba(20,35,60,.38); color:var(--muted); font-size:12px; }.clothing-filters > span { color:var(--cyan); font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }.clothing-link { border:1px solid var(--line); border-radius:6px; padding:6px 8px; color:#b8c3dc; text-decoration:none; white-space:nowrap; }.clothing-link:hover,.clothing-link.active { border-color:rgba(124,233,255,.52); background:rgba(124,233,255,.1); color:var(--cyan); }.component-links { display:flex; flex-wrap:wrap; gap:6px; }
.clothing-card { cursor:pointer; }.clothing-card:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }.variant-count { position:absolute; z-index:2; right:10px; bottom:63px; border-radius:5px; padding:4px 7px; background:rgba(11,16,30,.78); color:var(--cyan); font-size:10px; font-weight:700; }.change-day { margin-bottom:36px; }.change-day-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:7px; }.change-day-heading h3 { margin:0; font-size:17px; letter-spacing:-.02em; }.change-day-heading span { color:var(--lime); font-size:11px; font-weight:700; }.state-line { margin:0 0 14px; color:#aeb8d1; font-size:12px; line-height:1.5; }
.variant-modal { width:min(920px,calc(100% - 28px)); max-height:calc(100vh - 46px); overflow:auto; border:1px solid rgba(124,233,255,.34); border-radius:13px; padding:22px; background:#10182d; color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.65); }.variant-modal::backdrop { background:rgba(3,6,14,.76); backdrop-filter:blur(4px); }.modal-top { display:flex; justify-content:space-between; gap:18px; align-items:start; }.modal-top h2 { margin:7px 0 0; font-size:24px; letter-spacing:-.035em; }.modal-close { width:34px; height:34px; border:1px solid var(--line); border-radius:7px; background:#18223b; color:var(--ink); font-size:24px; line-height:1; }.variant-modal > p { margin:14px 0 20px; color:var(--muted); font-size:13px; }.variant-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.variant-card { overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#0d1426; }.variant-media { display:grid; place-items:center; aspect-ratio:1; background:linear-gradient(135deg,#202743,#101629); }.variant-media img,.variant-media video { width:100%; height:100%; object-fit:contain; }.variant-info { display:flex; flex-direction:column; gap:4px; padding:10px; }.variant-info strong { font-size:12px; }.variant-info span { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.variant-copy { align-self:start; margin-top:4px; border:0; padding:0; background:none; color:var(--cyan); font-size:11px; }
.empty { grid-column:1/-1; padding:45px 18px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); text-align:center; font-size:14px; }.api-section { padding-bottom:88px; }.api-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px; }.api-grid article { border:1px solid var(--line); border-radius:9px; padding:19px; background:rgba(16,22,40,.44); }.api-grid code{color:var(--cyan);font-size:13px;}.api-grid p{margin:11px 0 0;color:#a3acc2;font-size:13px;line-height:1.5;}footer{border-top:1px solid var(--line);padding:24px 0 38px;color:#727c95;font-size:12px;}footer span{margin:0 8px;color:var(--cyan);}
@media (max-width:760px){.shell{width:min(100% - 28px,1180px);}.topbar{min-height:68px;}.hero{padding:72px 0 51px;}.stat-row{grid-template-columns:1fr;}.stat-row article{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:17px 19px;}.section{padding-top:75px;}.asset-grid,.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}.asset-card{min-height:192px;}.asset-browser-heading{align-items:end;}.search{width:165px;}.api-grid{grid-template-columns:1fr;}.section-heading h2{font-size:25px;}.copy-url{opacity:1;}.variant-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.clothing-filters{align-items:flex-start;}.component-links{width:100%;}}
@media (max-width:410px){.asset-grid,.featured-grid{grid-template-columns:1fr;}.asset-card{min-height:250px;}.brand{font-size:12px;}.live-status span{display:none;}.search{width:135px;}}