*{box-sizing:border-box}
:root{
  --bg:#050815;--text:#f6f8ff;--muted:#aab4cf;
  --line:rgba(255,255,255,.12);--glass:rgba(10,16,35,.64);
  --soft:rgba(255,255,255,.055);--accent:#dce6ff;
}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif;background:#050815;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

.bg-video-wrap{position:fixed;inset:0;overflow:hidden;z-index:-1;background:#040713}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.48) contrast(1.04);transform:scale(1.08)}
.bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,18,.52),rgba(3,6,18,.88)),radial-gradient(circle at 18% 78%,rgba(0,163,255,.12),transparent 24%),radial-gradient(circle at 86% 12%,rgba(110,74,255,.14),transparent 25%)}

.wrap{width:min(1120px,calc(100% - 28px));margin:auto;padding:22px 0 42px}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.brand-lockup{display:flex;align-items:center;gap:15px}
.logo-box{width:58px;height:58px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(225,232,249,.93));border:1px solid rgba(255,255,255,.70);box-shadow:0 18px 46px rgba(0,0,0,.30);overflow:hidden;flex:0 0 58px}
.logo-box img{width:72%;height:72%;object-fit:contain}
.micro{font-size:9px;font-weight:700;letter-spacing:.19em;color:#bdc8e7}
.brandname{font-size:34px;font-weight:800;letter-spacing:-.055em;line-height:.95;margin:4px 0}
.handle{color:var(--muted);font-size:13px}
.back-link{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);color:#dce5ff;font-size:13px;font-weight:650}

.glass{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 28px 74px rgba(0,0,0,.34)}
.hero{border-radius:32px;padding:30px;margin-bottom:14px}
.hero-tag{font-size:10px;font-weight:700;letter-spacing:.16em;color:#aebde7}
.hero h1{margin:10px 0 12px;font-size:clamp(42px,7vw,76px);line-height:.95;letter-spacing:-.065em}
.hero p{margin:0;max-width:760px;color:#b9c3df;font-size:16px;line-height:1.7}

.toolbar{display:flex;gap:10px;align-items:center;margin:14px 0}
.search{width:100%;min-height:52px;border:1px solid var(--line);border-radius:16px;background:rgba(7,12,28,.70);color:var(--text);padding:0 16px;outline:none}
.search:focus{border-color:rgba(160,184,255,.45);box-shadow:0 0 0 3px rgba(92,126,255,.10)}

.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.project-card{overflow:hidden;border-radius:26px;transition:.2s transform,.2s border-color}
.project-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.20)}
.cover{aspect-ratio:16/10;background:radial-gradient(circle at 50% 30%,rgba(93,125,255,.23),transparent 30%),#091020;overflow:hidden;position:relative}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#8492bb;font-weight:700;letter-spacing:.14em;font-size:12px}
.card-body{padding:19px}
.card-meta{display:flex;justify-content:space-between;gap:10px;color:#91a1cd;font-size:10px;font-weight:700;letter-spacing:.13em}
.card-body h2{font-size:25px;letter-spacing:-.045em;margin:10px 0 8px}
.card-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-arrow{margin-top:18px;color:#e4ebff;font-size:13px;font-weight:700}

.empty,.loading,.error{padding:28px;border:1px solid var(--line);border-radius:24px;background:rgba(7,12,28,.60);color:var(--muted);text-align:center;grid-column:1/-1}

.detail-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:14px;margin-bottom:14px}
.detail-copy,.detail-cover{border-radius:30px;overflow:hidden}
.detail-copy{padding:28px}
.detail-copy h1{margin:10px 0 12px;font-size:clamp(38px,6vw,66px);line-height:.96;letter-spacing:-.06em}
.detail-copy p{margin:0;color:#b9c3df;line-height:1.7}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{min-height:46px;padding:0 15px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.055);font-size:13px;font-weight:700}
.btn.primary{background:linear-gradient(145deg,#fff,#d8e3ff);color:#081020}
.detail-cover{min-height:340px;background:#091020}
.detail-cover img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}

.resources-list{display:grid;gap:12px}
.resource-item{display:grid;grid-template-columns:94px 1fr auto;gap:16px;align-items:center;padding:14px;border-radius:22px}
.resource-preview{width:94px;height:74px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center}
.resource-preview img{width:100%;height:100%;object-fit:cover}
.resource-kind{font-size:9px;font-weight:800;letter-spacing:.15em;color:#8fa2d1}
.resource-copy h3{margin:6px 0 5px;font-size:18px}
.resource-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.resource-action{white-space:nowrap}

footer{display:flex;justify-content:space-between;gap:14px;color:#7f8baa;font-size:11px;padding:24px 4px 0}

@media(max-width:900px){
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-hero{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap{width:min(100% - 18px,1120px);padding-top:16px}
  .brandbar{align-items:flex-start}
  .logo-box{width:52px;height:52px;flex-basis:52px;border-radius:17px}
  .brandname{font-size:31px}
  .micro{font-size:7.5px}
  .hero{padding:22px}
  .projects{grid-template-columns:1fr}
  .detail-copy{padding:22px}
  .detail-cover,.detail-cover img{min-height:260px}
  .resource-item{grid-template-columns:72px 1fr;gap:12px}
  .resource-preview{width:72px;height:62px}
  .resource-action{grid-column:1/-1}
  .resource-action .btn{width:100%}
  footer{flex-direction:column;gap:5px}
  .bg-video{display:none}
  .bg-video-wrap{background:linear-gradient(180deg,rgba(3,6,18,.55),rgba(3,6,18,.86)),url("/assets/space-mobile.jpg") center/cover no-repeat}
}


.image-resource{
  grid-template-columns:minmax(220px,360px) 1fr auto;
  align-items:center;
}
.image-resource .resource-preview{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
}
.image-resource .resource-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:rgba(0,0,0,.25);
}
@media(max-width:760px){
  .image-resource{grid-template-columns:1fr}
  .image-resource .resource-preview{width:100%;height:auto;aspect-ratio:16/10}
  .image-resource .resource-action{grid-column:1}
}

a.resource-preview{cursor:pointer;transition:.18s transform,.18s border-color}
a.resource-preview:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28)}


/* V8.8 — every material is its own distinct card */
.resources-list{
  gap:16px;
}
.material-card{
  position:relative;
  width:100%;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(255,255,255,.12);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.material-card + .material-card{
  margin-top:0;
}
.material-card.material-product,
.material-card.material-makerworld,
.material-card.material-link{
  cursor:pointer;
  grid-template-columns:78px minmax(0,1fr) auto;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
}
.material-card.material-product:hover,
.material-card.material-makerworld:hover,
.material-card.material-link:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.26);
  background:
    linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
}
.material-card.material-product .resource-preview,
.material-card.material-makerworld .resource-preview,
.material-card.material-link .resource-preview{
  width:64px;
  height:64px;
  border-radius:18px;
}
.resource-icon{
  font-size:25px;
  line-height:1;
  color:#dce6ff;
}
.resource-description{
  margin:7px 0 0!important;
  max-width:700px;
  color:#aeb8d2!important;
  font-size:12px!important;
  line-height:1.6!important;
}
.material-card .resource-copy h3{
  margin-bottom:0;
}
.link-cta{
  pointer-events:none;
}
@media(max-width:760px){
  .material-card.material-product,
  .material-card.material-makerworld,
  .material-card.material-link{
    grid-template-columns:64px minmax(0,1fr);
  }
  .material-card.material-product .resource-action,
  .material-card.material-makerworld .resource-action,
  .material-card.material-link .resource-action{
    grid-column:1/-1;
  }
  .material-card.material-product .resource-action .btn,
  .material-card.material-makerworld .resource-action .btn,
  .material-card.material-link .resource-action .btn{
    width:100%;
  }
}