:root{
  --paper:#f4f6f8;
  --white:#fff;
  --ink:#101522;
  --muted:#718096;
  --line:#d9e0e8;
  --blue:#0878f9;
  --cyan:#17d4e4;
  --yellow:#e5f46b;
  --display:"Syne",sans-serif;
  --body:"Space Grotesk",sans-serif;
  --mono:"DM Mono",monospace;
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  min-height:100%;
}

body{
  background:
    linear-gradient(rgba(16,21,34,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,21,34,.035) 1px,transparent 1px),
    var(--paper);
  background-size:32px 32px;
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

button,
input{
  font:inherit;
}

.gallery-shell{
  width:min(1720px,100%);
  margin:0 auto;
  padding:clamp(24px,4vw,56px);
}

.gallery-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
}

.brand-mark{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  background:var(--blue);
  color:#fff;
  font:700 14px var(--mono);
  border-radius:3px;
  letter-spacing:-.08em;
}

.brand strong,
.brand small{
  display:block;
}

.brand strong{
  font:800 15px var(--display);
  letter-spacing:.04em;
}

.brand small,
.top-links,
.eyebrow,
.gallery-meta,
.filters button,
.search-box span,
.project-chip,
.launch-link{
  font-family:var(--mono);
  letter-spacing:.08em;
}

.brand small{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}

.top-links{
  display:flex;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
}

.top-links a{
  text-decoration:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.68);
  padding:12px 14px;
}

.top-links a:hover{
  color:var(--blue);
  border-color:var(--blue);
}

.hero{
  min-height:min(620px,66vh);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,360px);
  gap:clamp(28px,7vw,90px);
  align-items:end;
  padding:clamp(44px,8vh,92px) 0 clamp(34px,7vh,70px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.eyebrow{
  margin:0 0 22px;
  color:var(--blue);
  font-size:12px;
  font-weight:700;
}

.hero h1{
  margin:0;
  max-width:11ch;
  font:900 clamp(64px,10vw,158px)/.82 var(--display);
  letter-spacing:-.07em;
}

.hero h1 em{
  color:var(--blue);
  font-style:normal;
}

.lede{
  max-width:760px;
  margin:34px 0 0;
  color:var(--muted);
  font-size:clamp(18px,2vw,28px);
  line-height:1.45;
}

.hero-stat{
  border-left:1px solid var(--line);
  padding-left:28px;
  display:grid;
  gap:12px;
}

.hero-stat span{
  color:var(--blue);
  font:900 clamp(72px,8vw,132px)/.8 var(--display);
  letter-spacing:-.08em;
}

.hero-stat strong{
  font:700 24px var(--display);
}

.hero-stat small{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}

.toolbar{
  position:sticky;
  top:12px;
  z-index:50;
  display:grid;
  grid-template-columns:minmax(260px,360px) minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:14px 20px;
  margin:20px 0 28px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 8px 30px rgba(16,21,34,.06);
}

.search-box{
  display:grid;
  gap:6px;
}

.search-box span{
  color:var(--muted);
  font:700 10px var(--mono);
  letter-spacing:.08em;
}

.search-box input{
  width:100%;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--white);
  color:var(--ink);
  padding:0 14px;
  outline:0;
  font-size:13px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.search-box input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(8,120,249,.15);
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}

.filters button{
  min-height:38px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.85);
  color:var(--ink);
  padding:0 14px;
  font-size:11px;
  font-weight:600;
  font-family:var(--mono);
  letter-spacing:.06em;
  cursor:pointer;
  transition:all .18s ease;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.filters button:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:#fff;
}

.filters button.is-active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 4px 14px rgba(8,120,249,.25);
}

.featured{
  margin:34px 0;
  background:#101522;
  border:1px solid #263144;
  color:#fff;
  box-shadow:0 28px 70px rgba(16,21,34,.16);
  overflow:hidden;
}

.featured-head{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 22px;
  border-bottom:1px solid #283144;
  min-width:0;
}

.featured-head .eyebrow{
  margin:0 0 7px;
  color:var(--cyan);
}

.featured-head h2{
  margin:0;
  max-width:min(100%,900px);
  font:800 clamp(24px,2.6vw,38px)/.95 var(--display);
  letter-spacing:-.04em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.featured-controls{
  flex:0 0 auto;
  display:flex;
  gap:8px;
}

.featured-controls button{
  width:44px;
  height:44px;
  border:1px solid #40516b;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font:700 20px var(--mono);
}

.featured-controls button:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

.featured-card{
  height:clamp(340px,32vw,430px);
  display:grid;
  grid-template-columns:minmax(240px,.58fr) minmax(360px,1.42fr);
  overflow:hidden;
  transition: all 0.3s ease;
}

.featured-card.is-winner-gold {
  background: linear-gradient(165deg, rgba(255, 215, 0, 0.12) 0%, rgba(24, 18, 6, 0.96) 45%, rgba(8, 6, 2, 0.99) 100%) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.5) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 35px rgba(255, 215, 0, 0.15) !important;
}
.featured-card.is-winner-gold .launch-link:not(.secondary) {
  background: #ffd700 !important;
  color: #050810 !important;
  font-weight: 800;
}

.featured-card.is-winner-silver {
  background: linear-gradient(165deg, rgba(226, 232, 240, 0.12) 0%, rgba(18, 24, 34, 0.96) 45%, rgba(6, 10, 16, 0.99) 100%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.45) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 35px rgba(226, 232, 240, 0.15) !important;
}
.featured-card.is-winner-silver .launch-link:not(.secondary) {
  background: #e2e8f0 !important;
  color: #050810 !important;
  font-weight: 800;
}

.featured-card.is-winner-bronze {
  background: linear-gradient(165deg, rgba(245, 158, 11, 0.12) 0%, rgba(28, 16, 6, 0.96) 45%, rgba(10, 5, 2, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 35px rgba(245, 158, 11, 0.15) !important;
}
.featured-card.is-winner-bronze .launch-link:not(.secondary) {
  background: #f59e0b !important;
  color: #050810 !important;
  font-weight: 800;
}

.featured-card.is-mention-cyan {
  background: linear-gradient(165deg, rgba(56, 189, 248, 0.12) 0%, rgba(10, 20, 38, 0.96) 45%, rgba(4, 8, 18, 0.99) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 35px rgba(56, 189, 248, 0.15) !important;
}
.featured-card.is-mention-cyan .launch-link:not(.secondary) {
  background: var(--blue) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.gallery-kicker-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.gallery-kicker-tag.badge-gold {
  background: rgba(255, 215, 0, 0.14);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.15);
}

.gallery-kicker-tag.badge-silver {
  background: rgba(226, 232, 240, 0.14);
  color: #f1f5f9;
  border: 1px solid rgba(226, 232, 240, 0.4);
  box-shadow: 0 0 14px rgba(226, 232, 240, 0.15);
}

.gallery-kicker-tag.badge-bronze {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.15);
}

.gallery-kicker-tag.badge-mention {
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15);
}

.featured-visual{
  position:relative;
  min-height:0;
  height:100%;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  overflow:hidden;
  padding:0;
  cursor:pointer;
}

.featured-visual:after{
  display:none;
}

.featured-visual img{
  width:min(100%,300px);
  max-height:300px;
  aspect-ratio:1;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  position:relative;
  z-index:2;
}

.featured-visual .fallback-icon{
  position:relative;
  inset:auto;
  width:min(62%,360px);
  aspect-ratio:1;
  z-index:1;
}

.featured-visual img:not([src=""]) + .fallback-icon{
  display:none;
}

.featured-visual .initials{
  position:absolute;
  inset:50%;
  translate:-50% -50%;
  font:900 112px var(--display);
  color:#fff;
  z-index:0;
}

.featured-copy{
  padding:clamp(24px,3vw,40px);
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  align-content:stretch;
  gap:14px;
  overflow:hidden;
}

.featured-copy h2{
  margin:0;
  max-width:100%;
  overflow-wrap:anywhere;
  font:900 clamp(34px,3.8vw,58px)/.9 var(--display);
  letter-spacing:-.045em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.featured-copy p{
  margin:0;
  color:#c6d3e5;
  min-height:0;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.48;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.featured-team{
  display:grid;
  gap:8px;
  margin-top:0;
  padding-top:14px;
  border-top:1px solid #283144;
  min-width:0;
  overflow:hidden;
}

.featured-team b,
.team-name{
  color:var(--cyan);
  font:700 11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.featured-team span,
.card-members,
.dialog-content .team{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:center;
}

.featured-team span{
  max-height:48px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(255,255,255,.08);
}

.featured-team a,
.card-members a,
.dialog-content .team a{
  color:inherit;
  text-decoration-color:rgba(23,212,228,.7);
  text-underline-offset:3px;
}

.featured-team a:hover,
.card-members a:hover,
.dialog-content .team a:hover{
  color:var(--cyan);
}

.member-sep{
  color:#6f7c92;
}

.featured-actions,
.card-actions,
.dialog-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.share-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.share-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  min-height:34px;
  border:1px solid rgba(154,169,190,.72);
  background:rgba(255,255,255,.56);
  color:#101522;
  padding:0 10px;
  font:800 10px/1 var(--mono);
  letter-spacing:.08em;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

.share-link:hover,
.share-link:focus-visible{
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-1px);
}

.share-link.is-copied{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#06111f;
}

.share-actions.is-compact{
  gap:6px;
}

.share-actions.is-compact .share-link{
  min-width:100%;
  min-height:28px;
  padding:0 8px;
  font-size:9px;
}

.featured-actions{
  margin-top:0;
  padding:0;
  align-self:end;
}

.launch-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border:0;
  padding:0 18px;
  background:var(--blue);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  font:700 11px var(--mono);
  font-size:11px;
  font-weight:700;
}

.launch-link.secondary{
  background:transparent;
  border:1px solid #40516b;
}

.embedded-viewer[hidden]{
  display:none;
}

.embedded-viewer{
  margin:34px 0;
  display:grid;
  grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);
  height:clamp(680px,calc(100vh - 96px),780px);
  min-height:640px;
  background:#101522;
  border:1px solid #263144;
  color:#fff;
  box-shadow:0 28px 70px rgba(16,21,34,.16);
  overflow:hidden;
}

.viewer-project-panel,
.viewer-display-panel{
  min-width:0;
  min-height:0;
}

.viewer-project-panel{
  display:grid;
  grid-template-rows:132px 124px 70px 46px minmax(0,1fr);
  gap:14px;
  padding:clamp(20px,2.4vw,32px);
  border-right:1px solid #283144;
  background:
    radial-gradient(circle at 18% 22%,rgba(23,212,228,.12),transparent 28%),
    #0b101b;
}

.viewer-project-head .eyebrow{
  margin:0 0 7px;
  color:var(--cyan);
}

.viewer-project-head{
  min-height:0;
  overflow:hidden;
}

.viewer-project-head h2{
  margin:0;
  overflow-wrap:anywhere;
  font:900 clamp(34px,3.8vw,58px)/.88 var(--display);
  letter-spacing:-.045em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.viewer-project-head span{
  display:block;
  margin-top:10px;
  color:#aab7ca;
  font-size:14px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.viewer-project-card{
  height:124px;
  min-height:0;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:18px;
  align-items:center;
  border:1px solid #283144;
  background:
    linear-gradient(135deg,rgba(23,212,228,.09),rgba(8,120,249,.05) 48%,rgba(255,255,255,.03)),
    rgba(255,255,255,.035);
  padding:14px;
  overflow:hidden;
}

.viewer-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:78px;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid rgba(23,212,228,.45);
  background:#05070b;
}

.viewer-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:1;
}

.viewer-icon .fallback-icon{
  inset:0;
  font-size:30px;
}

.viewer-icon img:not([src=""]) + .fallback-icon{
  display:none;
}

.viewer-selector-label{
  display:block;
  color:var(--cyan);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

#viewerTeam{
  display:block;
  color:var(--cyan);
  font:800 15px/1.1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.viewer-project-card p{
  margin:13px 0 0;
  color:#eef6ff;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  max-height:62px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(255,255,255,.08);
}

#viewerMembers::before{
  content:"Built by ";
  flex:0 0 100%;
  margin-inline-start: 10px;
  color:#7f8ca1;
  font:700 10px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}

#viewerMembers a,
#viewerMembers > span:not(.member-sep){
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:10px 10px;
  border:1px solid rgba(23,212,228,.35);
  background:rgba(23,212,228,.08);
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

#viewerMembers a:hover{
  border-color:var(--cyan);
  background:rgba(23,212,228,.16);
}

#viewerMembers .member-sep{
  display:none;
}

.viewer-description{
  height:70px;
  margin:0;
  color:#d6e4f4;
  font-size:15px;
  line-height:1.42;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.viewer-actions{
  height:46px;
  min-height:0;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow:hidden;
}

.viewer-actions .launch-link,
.viewer-share .share-actions.is-compact .share-link{
  flex:1 1 0;
  min-width:0;
  min-height:46px;
  white-space:nowrap;
}

.viewer-share{
  flex:1 1 0;
  min-width:0;
  min-height:46px;
  overflow:hidden;
}

.viewer-share .share-actions{
  justify-content:flex-start;
}

.viewer-share .share-actions.is-compact .share-link{
  width:100%;
  background:rgba(8,120,249,.12);
  border-color:rgba(8,120,249,.78);
  color:#dce8f7;
}

.viewer-share .share-actions.is-compact .share-link:hover,
.viewer-share .share-actions.is-compact .share-link:focus-visible{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.viewer-selector-wrap{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
  overflow:hidden;
}

.viewer-project-list{
  min-height:0;
  height:100%;
  max-height:none;
  overflow:auto;
  display:grid;
  align-content:start;
  gap:8px;
  padding-right:4px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(255,255,255,.08);
}

.viewer-project-list::-webkit-scrollbar,
.featured-team span::-webkit-scrollbar{
  width:10px;
}

.viewer-project-list::-webkit-scrollbar-track,
.featured-team span::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-left:1px solid rgba(255,255,255,.08);
}

.viewer-project-list::-webkit-scrollbar-thumb,
.featured-team span::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  border:2px solid #0b101b;
  border-radius:999px;
}

.viewer-project-option{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  align-items:start;
  width:100%;
  min-height:58px;
  border:1px solid #283144;
  background:rgba(255,255,255,.035);
  color:#d6e4f4;
  padding:10px;
  text-align:left;
  cursor:pointer;
}

.viewer-project-option:hover,
.viewer-project-option.is-active{
  border-color:var(--cyan);
  background:rgba(23,212,228,.08);
}

.viewer-project-option b{
  color:var(--blue);
  font:700 11px var(--mono);
}

.viewer-project-option strong,
.viewer-project-option small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.viewer-project-option strong{
  color:#fff;
  font:700 15px/1.15 var(--body);
}

.viewer-project-option small{
  margin-top:4px;
  color:#91a0b5;
  font-size:12px;
}

.gallery-toast{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  background:rgba(11, 16, 27, 0.96);
  border:1.5px solid var(--cyan);
  box-shadow:0 14px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(23, 212, 228, 0.35);
  color:#ffffff;
  padding:12px 24px;
  border-radius:999px;
  font:700 12px var(--mono);
  letter-spacing:0.06em;
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:8px;
}

.gallery-toast.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

.viewer-display-panel{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  padding:clamp(18px,2.4vw,32px);
  background:
    radial-gradient(circle at 60% 42%,rgba(8,120,249,.12),transparent 34%),
    #101522;
}

.viewer-display-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#91a0b5;
  font:700 11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.viewer-display-top strong{
  color:var(--cyan);
}

.viewer-device{
  align-self:center;
  justify-self:center;
  width:min(100%,600px);
  max-height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;
  padding:16px;
  border:4px solid #1f2937;
  border-radius:28px;
  background:#070b12;
  box-shadow:0 32px 80px rgba(0,0,0,.36);
}

.viewer-lens{
  min-height:0;
  height:min(100%,600px);
  width:100%;
  align-self:center;
  position:relative;
  aspect-ratio:1;
  border:1px solid rgba(23,212,228,.7);
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 28px rgba(23,212,228,.12);
}

.viewer-lens.is-opaque{
  background:#000;
}

.viewer-backdrop{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.1),transparent 34%,rgba(8,120,249,.16)),
    #000;
}

.gallery-simulator-frame{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:600px;
  height:600px;
  border:0;
  transform-origin:top left;
  mix-blend-mode:screen;
  background:transparent;
}

.gallery-simulator-frame.is-opaque{
  mix-blend-mode:normal;
}

.viewer-keyboard-hint{
  justify-self:center;
  margin:0;
  color:#91a0b5;
  font:700 10px/1.6 var(--mono);
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

.gallery-meta{
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:var(--muted);
  padding:12px 0 20px;
  font-size:11px;
  border-top:1px solid var(--line);
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.project-card{
  min-width:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  height:500px;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.project-card:hover,
.project-card:focus-within{
  transform:translateY(-3px);
  border-color:var(--blue);
  box-shadow:0 18px 46px rgba(16,21,34,.1);
}

.card-hit{
  display:grid;
  grid-template-rows:168px minmax(0,1fr);
  text-align:left;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
  min-height:0;
  overflow:hidden;
}

.card-hit:focus-visible,
.launch-link:focus-visible,
.share-link:focus-visible,
.featured-controls button:focus-visible,
.dialog-close:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

.card-media{
  position:relative;
  display:grid;
  place-items:center;
  height:168px;
  background:transparent;
  overflow:hidden;
  padding:0;
}

/* ==========================================================================
   WINNER & HONORABLE MENTIONS FULL-CARD THEMES
   ========================================================================== */

/* 🥇 1ST PLACE GOLD CARD */
.project-card.is-winner-gold {
  background: linear-gradient(165deg, rgba(255, 215, 0, 0.16) 0%, rgba(28, 20, 6, 0.95) 45%, rgba(10, 8, 2, 0.98) 100%) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.7) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.15) !important;
  color: #ffffff !important;
}
.project-card.is-winner-gold:hover {
  transform: translateY(-4px);
  border-color: #ffd700 !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 215, 0, 0.3) !important;
}
.project-card.is-winner-gold .card-kicker {
  color: #ffd700 !important;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.project-card.is-winner-gold .card-copy strong {
  color: #ffffff !important;
}
.project-card.is-winner-gold .card-members,
.project-card.is-winner-gold .card-copy small,
.project-card.is-winner-gold .card-summary {
  color: #d1d5db !important;
}
.project-card.is-winner-gold .card-actions .launch-link {
  background: linear-gradient(135deg, #ffd700, #b45309) !important;
  color: #000000 !important;
  font-weight: 800;
}
.project-card.is-winner-gold .card-actions .launch-link.secondary {
  background: rgba(255, 215, 0, 0.08) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  color: #ffd700 !important;
}

/* 🥈 2ND PLACE SILVER CARD */
.project-card.is-winner-silver {
  background: linear-gradient(165deg, rgba(226, 232, 240, 0.16) 0%, rgba(20, 26, 36, 0.95) 45%, rgba(8, 12, 18, 0.98) 100%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(226, 232, 240, 0.15) !important;
  color: #ffffff !important;
}
.project-card.is-winner-silver:hover {
  transform: translateY(-4px);
  border-color: #ffffff !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(226, 232, 240, 0.3) !important;
}
.project-card.is-winner-silver .card-kicker {
  color: #f1f5f9 !important;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.project-card.is-winner-silver .card-copy strong {
  color: #ffffff !important;
}
.project-card.is-winner-silver .card-members,
.project-card.is-winner-silver .card-copy small,
.project-card.is-winner-silver .card-summary {
  color: #cbd5e1 !important;
}
.project-card.is-winner-silver .card-actions .launch-link {
  background: linear-gradient(135deg, #ffffff, #94a3b8) !important;
  color: #000000 !important;
  font-weight: 800;
}
.project-card.is-winner-silver .card-actions .launch-link.secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(226, 232, 240, 0.4) !important;
  color: #f8fafc !important;
}

/* 🥉 3RD PLACE BRONZE CARD */
.project-card.is-winner-bronze {
  background: linear-gradient(165deg, rgba(245, 158, 11, 0.16) 0%, rgba(32, 18, 8, 0.95) 45%, rgba(12, 6, 2, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.15) !important;
  color: #ffffff !important;
}
.project-card.is-winner-bronze:hover {
  transform: translateY(-4px);
  border-color: #f59e0b !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(245, 158, 11, 0.3) !important;
}
.project-card.is-winner-bronze .card-kicker {
  color: #f59e0b !important;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.project-card.is-winner-bronze .card-copy strong {
  color: #ffffff !important;
}
.project-card.is-winner-bronze .card-members,
.project-card.is-winner-bronze .card-copy small,
.project-card.is-winner-bronze .card-summary {
  color: #d1d5db !important;
}
.project-card.is-winner-bronze .card-actions .launch-link {
  background: linear-gradient(135deg, #f59e0b, #78350f) !important;
  color: #ffffff !important;
  font-weight: 800;
}
.project-card.is-winner-bronze .card-actions .launch-link.secondary {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
}

/* 🎖️ HONORABLE MENTIONS BLUISH GRADIENT CARD */
.project-card.is-mention-cyan {
  background: linear-gradient(165deg, rgba(56, 189, 248, 0.16) 0%, rgba(12, 24, 44, 0.95) 45%, rgba(4, 10, 20, 0.98) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.15) !important;
  color: #ffffff !important;
}
.project-card.is-mention-cyan:hover {
  transform: translateY(-4px);
  border-color: #38bdf8 !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(56, 189, 248, 0.3) !important;
}
.project-card.is-mention-cyan .card-kicker {
  color: #38bdf8 !important;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.project-card.is-mention-cyan .card-copy strong {
  color: #ffffff !important;
}
.project-card.is-mention-cyan .card-members,
.project-card.is-mention-cyan .card-copy small,
.project-card.is-mention-cyan .card-summary {
  color: #cbd5e1 !important;
}
.project-card.is-mention-cyan .card-actions .launch-link {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.project-card.is-mention-cyan .card-actions .launch-link.secondary {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
}
  margin-left:4px;
}

.card-media:after{
  display:none;
}

.card-media img{
  width:132px;
  height:auto;
  max-width:132px;
  max-height:132px;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:0;
  display:block;
  position:relative;
  z-index:1;
  image-rendering:auto;
  box-shadow:none;
}

.dialog-icon img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:1;
  image-rendering:auto;
}

.fallback-icon{
  position:absolute;
  inset:22px;
  display:grid;
  place-items:center;
  color:#fff;
  font:900 56px var(--display);
  z-index:0;
  background:
    radial-gradient(circle at 25% 20%,rgba(23,212,228,.25),transparent 34%),
    radial-gradient(circle at 80% 80%,rgba(8,120,249,.35),transparent 32%),
    #101522;
}

.card-media .fallback-icon{
  inset:auto;
  width:min(100%,132px);
  max-width:132px;
  aspect-ratio:1;
  border-radius:0;
}

.card-media img:not([src=""]) + .fallback-icon{
  display:none;
}

.dialog-icon img:not([src=""]) + .fallback-icon{
  display:none;
}

.card-copy{
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr);
  gap:10px;
  padding:18px 18px 10px;
  min-height:0;
  overflow:hidden;
}

.card-kicker{
  color:var(--blue);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.card-copy strong{
  font:800 clamp(24px,1.7vw,30px)/.92 var(--display);
  letter-spacing:-.04em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}

.card-members{
  padding:0 18px 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  min-height:30px;
  max-height:48px;
  overflow:hidden;
}

.card-copy small{
  color:var(--muted);
  font-size:13px;
}

.card-summary{
  color:#46556b;
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-actions{
  padding:0 18px 18px;
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.card-actions .launch-link{
  min-height:38px;
  font-size:10px;
  padding:0 10px;
  white-space:nowrap;
}

.card-actions .launch-link.secondary{
  background:rgba(255,255,255,.64);
  border-color:#9aa9be;
  color:#101522;
}

.card-actions .launch-link.secondary:hover{
  border-color:var(--blue);
  color:var(--blue);
}

.card-actions .context-link{
  grid-column:1 / -1;
}

.dialog-action-stack{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
}

.dialog-action-stack .dialog-actions{
  flex:1 1 auto;
}

.dialog-action-stack .share-actions{
  flex:0 0 auto;
}

.dialog-actions .launch-link:first-child{
  min-width:236px;
  min-height:54px;
  box-shadow:0 24px 54px rgba(8,120,249,.2);
}

.dialog-actions .launch-link.secondary{
  min-width:172px;
  min-height:54px;
}

.dialog-media .share-link{
  min-width:172px;
  min-height:54px;
  background:rgba(8,120,249,.12);
  border-color:rgba(8,120,249,.88);
  color:#f6fbff;
  box-shadow:0 0 28px rgba(8,120,249,.12);
}

.dialog-media .share-link:hover,
.dialog-media .share-link:focus-visible{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.project-chip{
  display:inline-flex;
  width:max-content;
  align-items:center;
  min-height:28px;
  padding:0 9px;
  background:rgba(8,120,249,.1);
  color:var(--blue);
  font-size:10px;
  font-weight:700;
}

.project-dialog{
  width:min(1240px,calc(100vw - 32px),calc((100vh - 32px) * 4 / 3));
  aspect-ratio:4/3;
  max-height:none;
  padding:0;
  border:1px solid #283144;
  background:#101522;
  color:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
  overflow:hidden;
}

.project-dialog::backdrop{
  background:rgba(16,21,34,.58);
  backdrop-filter:blur(8px);
}

.dialog-close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  width:42px;
  height:42px;
  border:1px solid #40516b;
  background:#101522;
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

.dialog-body{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  width:100%;
  height:100%;
  min-height:0;
}

.dialog-media{
  min-height:0;
  background:
    radial-gradient(circle at 50% 35%,rgba(23,212,228,.18),transparent 34%),
    #05070b;
  padding:clamp(22px,3vw,34px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
}

.dialog-media > div:first-child{
  display:grid;
  gap:16px;
}

.dialog-media img{
  border:1px solid rgba(23,212,228,.5);
}

.dialog-icon{
  width:100%;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  padding:clamp(20px,4vw,44px);
  border:1px solid rgba(23,212,228,.5);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 34% 25%,rgba(23,212,228,.22),transparent 28%),
    radial-gradient(circle at 75% 78%,rgba(8,120,249,.28),transparent 32%),
    #070b12;
  background-size:24px 24px,24px 24px,auto,auto,auto;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.dialog-icon img{
  max-width:82%;
  max-height:82%;
  width:auto;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}

.dialog-icon .fallback-icon{
  position:static;
  width:82%;
  height:auto;
  aspect-ratio:1;
}

.dialog-video-shell{
  width:100%;
  aspect-ratio:4/3;
  display:block;
  border:1px solid rgba(23,212,228,.5);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 34% 25%,rgba(23,212,228,.22),transparent 28%),
    radial-gradient(circle at 75% 78%,rgba(8,120,249,.28),transparent 32%),
    #05070b;
  background-size:24px 24px,24px 24px,auto,auto,auto;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.dialog-video{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#05070b;
}

.dialog-content{
  min-height:0;
  padding:clamp(24px,3vw,38px);
  padding-right: clamp(36px, 4vw, 54px);
  overflow:auto;
}

.dialog-award-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  margin-right: 56px;
  gap: 10px;
}

.dialog-award-banner.badge-gold {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(180, 83, 9, 0.35));
  border: 1px solid rgba(255, 215, 0, 0.7);
}

.dialog-award-banner.badge-silver {
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.2), rgba(100, 116, 139, 0.35));
  border: 1px solid rgba(226, 232, 240, 0.7);
}

.dialog-award-banner.badge-bronze {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(120, 53, 15, 0.35));
  border: 1px solid rgba(245, 158, 11, 0.7);
}

.dialog-award-banner.badge-mention {
  background: rgba(23, 212, 228, 0.12);
  border: 1px solid rgba(23, 212, 228, 0.5);
}

.dialog-award-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.dialog-award-rank {
  font-family: var(--mono);
  font-size: 10px;
  color: #94a3b8;
  letter-spacing: 0.06em;
}

.dialog-title-group {
  margin-bottom: 12px;
}

.dialog-content h2{
  margin:6px 0 6px;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  font:900 clamp(26px,3.2vw,40px)/1.08 var(--display);
  letter-spacing:-.02em;
  color: #ffffff;
}

.dialog-content .team{
  color:#a7b1c1;
  font-size:14px;
  margin:0 0 16px;
}

.dialog-desc-lead {
  color: #e2e8f0;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:24px 0 0;
}

.detail-box{
  border-top:1px solid #283144;
  padding-top:14px;
}

.detail-box b{
  display:block;
  color:var(--cyan);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  margin-bottom:8px;
  text-transform:uppercase;
}

.detail-box p,
.dialog-content > p{
  color:#d6e4f4;
  line-height:1.55;
}

.empty-state{
  grid-column:1/-1;
  min-height:220px;
  display:grid;
  place-items:center;
  border:1px dashed var(--line);
  color:var(--muted);
}

.glance-cursor{
  position:fixed;
  left:0;
  top:0;
  width:32px;
  height:32px;
  pointer-events:none;
  z-index:2147483647;
  opacity:0;
  translate:-50% -50%;
  transition:opacity .15s ease;
}

.glance-cursor span{
  display:block;
  width:100%;
  height:100%;
  border:1px solid rgba(8,120,249,.7);
  border-radius:50%;
  box-shadow:0 0 0 10px rgba(8,120,249,.08),0 0 28px rgba(8,120,249,.3);
}

body.has-glance-cursor,
body.has-glance-cursor a,
body.has-glance-cursor button{
  cursor:none;
}

body.has-glance-cursor .glance-cursor.is-visible{
  opacity:1;
}

body.has-glance-cursor .glance-cursor.is-pinching span{
  background:var(--blue);
  border-color:var(--blue);
}

.project-dialog,
.project-dialog a,
.project-dialog button{
  cursor:none;
}

@media(max-width:1200px){
  .featured-card{
    grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  }

  .featured-copy h2{
    font-size:clamp(40px,5vw,64px);
  }

  .project-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .gallery-top,
  .hero,
  .toolbar,
  .featured-card,
  .dialog-body{
    grid-template-columns:1fr;
  }

  .gallery-top{
    align-items:flex-start;
  }

  .top-links,
  .filters{
    justify-content:flex-start;
  }

  .hero-stat{
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
    padding-top:24px;
  }

  .toolbar{
    position:relative;
  }

  .featured-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .embedded-viewer{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
  }

  .viewer-project-panel{
    border-right:0;
    border-bottom:1px solid #283144;
    grid-template-rows:auto auto auto auto auto 260px;
  }

  .viewer-project-head,
  .viewer-project-card,
  .viewer-description,
  .viewer-actions{
    height:auto;
  }

  .viewer-project-list{
    max-height:none;
  }

  .viewer-device{
    width:min(100%,560px);
  }

  .featured-copy{
    padding:28px;
  }

  .featured-card{
    height:auto;
    min-height:0;
  }

  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .project-dialog{
    width:calc(100vw - 24px);
    height:auto;
    aspect-ratio:auto;
    max-height:calc(100vh - 24px);
    overflow:auto;
  }

  .dialog-media{
    min-height:auto;
  }

  .dialog-body{
    height:auto;
    min-height:0;
  }
}

@media(max-width:620px){
  .gallery-shell{
    width:100%;
    padding:12px;
    overflow-x:hidden;
  }

  .featured{
    display:none;
  }

  .gallery-top{
    gap:14px;
    padding-bottom:16px;
  }

  .brand{
    width:100%;
    min-width:0;
  }

  .brand-mark{
    width:38px;
    height:38px;
    flex:0 0 auto;
  }

  .brand strong{
    max-width:calc(100vw - 82px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
  }

  .brand small{
    font-size:9px;
  }

  .top-links{
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .top-links::-webkit-scrollbar{
    display:none;
  }

  .top-links a{
    flex:1 0 auto;
    text-align:center;
    font-size:10px;
    padding:11px 12px;
  }

  .hero{
    min-height:0;
    padding:30px 0 34px;
    gap:24px;
  }

  .hero h1{
    max-width:10ch;
    font-size:clamp(54px,18vw,86px);
    letter-spacing:-.065em;
  }

  .lede{
    margin-top:22px;
    font-size:16px;
    line-height:1.48;
  }

  .hero-stat{
    gap:8px;
    padding-top:18px;
  }

  .hero-stat span{
    font-size:62px;
  }

  .hero-stat strong{
    font-size:19px;
  }

  .toolbar{
    display:grid;
    gap:14px;
    padding:14px 0;
  }

  .search-box input{
    min-height:48px;
    font-size:16px;
  }

  .filters{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    padding:0 0 6px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .filters::-webkit-scrollbar{
    display:none;
  }

  .filters button{
    flex:0 0 auto;
    min-height:36px;
    scroll-snap-align:start;
  }

  .project-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .gallery-meta{
    display:grid;
    gap:6px;
    padding:10px 0 14px;
  }

  .embedded-viewer{
    margin:20px 0 24px;
    width:100%;
    border-left:0;
    border-right:0;
    transform:translateX(-12px);
    width:calc(100% + 24px);
  }

  .viewer-project-panel,
  .viewer-display-panel{
    padding:16px 12px;
  }

  .viewer-project-head h2{
    font-size:clamp(30px,11vw,44px);
    line-height:.9;
  }

  .viewer-project-head span,
  .viewer-description{
    font-size:14px;
  }

  .viewer-project-card{
    grid-template-columns:62px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }

  .viewer-icon{
    width:62px;
  }

  #viewerTeam{
    font-size:12px;
    white-space:normal;
  }

  .viewer-project-card p{
    margin-top:9px;
    max-height:74px;
    font-size:13px;
  }

  #viewerMembers::before{
    margin-inline-start:0;
  }

  #viewerMembers a,
  #viewerMembers > span:not(.member-sep){
    min-height:28px;
    padding:8px;
    font-size:12px;
  }

  .viewer-actions,
  .viewer-share,
  .viewer-actions .launch-link,
  .viewer-share .share-actions,
  .viewer-share .share-actions.is-compact .share-link{
    width:100%;
  }

  .viewer-project-panel{
    grid-template-rows:auto auto auto auto minmax(180px,30svh);
    gap:12px;
  }

  .viewer-actions{
    height:auto;
    flex-wrap:wrap;
    overflow:visible;
  }

  .viewer-actions .launch-link,
  .viewer-share .share-actions.is-compact .share-link{
    flex:1 1 calc(50% - 5px);
  }

  .full-viewer-link,
  .sim-launch{
    display:none !important;
  }

  .viewer-selector-wrap{
    min-height:180px;
  }

  .viewer-project-list{
    max-height:30svh;
    padding-right:8px;
  }

  .viewer-project-option{
    grid-template-columns:30px minmax(0,1fr);
    min-height:56px;
    padding:9px;
  }

  .viewer-device{
    width:100%;
    max-width:min(100%,460px);
    padding:12px;
    border-width:3px;
    border-radius:20px;
  }

  .viewer-display-top{
    align-items:flex-start;
    font-size:9px;
  }

  .viewer-lens{
    width:100%;
    height:auto;
    max-height:none;
  }

  .detail-grid{
    grid-template-columns:1fr;
  }

  .dialog-content{
    padding:28px 22px;
  }

  .project-dialog{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border:0;
  }

  .dialog-media{
    padding:22px;
  }

  .dialog-actions .launch-link{
    width:100%;
  }

  .dialog-action-stack,
  .dialog-action-stack .dialog-actions,
  .dialog-action-stack .share-actions,
  .dialog-media .share-link{
    width:100%;
  }

  .dialog-close{
    right:10px;
    top:10px;
    width:40px;
    height:40px;
  }

  .dialog-icon{
    padding:18px;
  }

  .dialog-icon img{
    max-width:86%;
    max-height:86%;
  }

  .dialog-content h2{
    font-size:clamp(42px,15vw,68px);
  }

  .project-card{
    height:480px;
  }

  .card-hit{
    grid-template-rows:150px minmax(0,1fr);
  }

  .card-media{
    height:150px;
  }

  .card-media img{
    width:116px;
    max-width:116px;
    max-height:116px;
  }

  .card-copy{
    padding:16px 16px 8px;
    gap:9px;
  }

  .card-copy strong{
    font-size:clamp(26px,9vw,38px);
  }

  .card-members{
    padding:0 16px 12px;
    max-height:58px;
    font-size:13px;
  }

  .card-actions{
    padding:0 16px 16px;
    grid-template-columns:1fr;
  }

  .card-actions .launch-link{
    min-height:42px;
  }

  .project-dialog,
  .project-dialog a,
  .project-dialog button,
  body.has-glance-cursor,
  body.has-glance-cursor a,
  body.has-glance-cursor button{
    cursor:auto;
  }
}

@media(max-width:420px){
  .gallery-shell{
    padding:10px;
  }

  .embedded-viewer{
    transform:translateX(-10px);
    width:calc(100% + 20px);
  }

  .viewer-project-panel,
  .viewer-display-panel{
    padding-inline:10px;
  }

  .viewer-actions .launch-link,
  .viewer-share .share-actions.is-compact .share-link{
    flex-basis:100%;
  }

  .project-card{
    height:456px;
  }
}