/* Project-only styles imported from the known-working later project build. Public v220 layout is untouched. */

@keyframes shimmer { to { transform: translateX(100%); } }

.project-card-v4 {
  align-self:start;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(157,70,255,.08),transparent 44%),var(--panel);
  box-shadow:var(--shadow);
  transition:transform .16s ease,border-color .16s ease;
}

.project-card-v4:hover { transform:translateY(-3px); border-color:var(--line-strong); }

.project-preview-v4 {
  display:block;
  width:100%;
  aspect-ratio:16/8.6;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#07050d;
}

.project-preview-v4 img { display:block; width:100%; height:100%; object-fit:cover; }


.real-project {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 5%, rgba(155, 62, 255, .13), transparent 30%),
    var(--panel);
  box-shadow: var(--shadow);
}


.real-project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(22px, 4vw, 42px);
  border-bottom: 1px solid var(--line);
}


.real-project-header > div:first-child {
  max-width: 900px;
}


.real-project-header h2 {
  margin: 5px 0 12px;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: .98;
}


.real-project-lead {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.6;
}


.real-project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}


.real-project-badges span {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(145, 55, 255, .09);
  color: #ead9ff;
  font-size: .76rem;
  font-weight: 700;
}


.real-project-main-actions {
  display: flex;
  width: min(310px, 100%);
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9px;
}


.project-download {
  min-height: 50px;
}


.wasd-live-demo {
  margin: clamp(16px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #07040d;
  outline: none;
}


.wasd-live-demo:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(155, 62, 255, .18);
}


.wasd-demo-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}


.wasd-demo-heading h3 {
  margin: 3px 0 5px;
  font-size: 1.45rem;
}


.wasd-demo-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}


.wasd-demo-status {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d8c6e9;
  font-size: .78rem;
  font-weight: 700;
}


.wasd-demo-frame {
  height: clamp(430px, 48vw, 720px);
  background:
    radial-gradient(circle at 50% 44%, rgba(133, 51, 239, .14), transparent 46%),
    #050209;
}


.wasd-demo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}


.wasd-demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 15px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}


.wasd-demo-controls button {
  min-width: 58px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(153, 56, 255, .2), rgba(153, 56, 255, .08));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}


.wasd-demo-controls button:hover,
.wasd-demo-controls button:focus-visible {
  border-color: #cf8dff;
  box-shadow: 0 0 16px rgba(157, 70, 255, .3);
}


.wasd-demo-controls .demo-control-secondary {
  background: rgba(255, 255, 255, .025);
  color: #ded1ed;
}


.real-project-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 clamp(16px, 3vw, 28px) 12px;
}


.project-info-panel,
.project-package-panel,
.project-verification-panel {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .015);
}


.project-info-panel {
  padding: clamp(18px, 2.5vw, 26px);
}


.project-info-panel h3,
.project-package-panel h3,
.project-verification-panel h3 {
  margin: 4px 0 12px;
  font-size: 1.35rem;
}


.project-info-panel ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}


.project-info-panel > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}


.real-project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}


.real-project-footer strong,
.real-project-footer span {
  display: block;
}


.real-project-footer span {
  margin-top: 4px;
  color: var(--soft);
}




.project-jump-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}


.project-jump-nav a {
  display: block;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(157,70,255,.095), transparent 60%),
    var(--panel);
  color: var(--text);
  text-decoration: none;
}


.project-jump-nav a:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}


.project-jump-nav strong,
.project-jump-nav span {
  display: block;
}


.project-jump-nav span {
  margin-top: 5px;
  color: var(--soft);
  line-height: 1.4;
}


.real-project + .real-project {
  margin-top: 18px;
}


.project-download-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, rgba(157,70,255,.2), transparent 36%),
    #100b18;
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.72);
}


.project-download-dialog::backdrop {
  background: rgba(3, 2, 7, .78);
  backdrop-filter: blur(5px);
}


.project-download-dialog form {
  position: relative;
  padding: 28px;
}


.project-download-dialog h2 {
  margin: 5px 36px 10px 0;
  font-size: 1.75rem;
}


.project-download-dialog p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}




.wasd-media-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  align-items: center;
  gap: 24px;
  margin: clamp(16px, 3vw, 28px);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 40%, rgba(255, 0, 224, .12), transparent 35%),
    rgba(255, 255, 255, .015);
}


.wasd-media-copy h3 {
  margin: 4px 0 9px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}


.wasd-media-copy p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}


.wasd-media-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 300px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #020104;
  box-shadow: inset 0 0 40px rgba(255, 0, 225, .045);
}


.wasd-media-shell video {
  display: block;
  width: min(100%, 340px);
  height: auto;
  max-height: 360px;
  border-radius: 9px;
  background: #000;
  object-fit: contain;
}




.wasd-media-shell {
  position: relative;
  overflow: hidden;
}


.wasd-media-shell video {
  position: relative;
  z-index: 1;
}


.wasd-video-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 154px;
  min-height: 52px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 0, 225, .72);
  border-radius: 999px;
  background: rgba(9, 4, 14, .9);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 4px rgba(255, 0, 225, .08),
    0 0 26px rgba(255, 0, 225, .25);
}


.wasd-video-play:hover,
.wasd-video-play:focus-visible {
  border-color: #ff67ec;
  box-shadow:
    0 0 0 4px rgba(255, 0, 225, .13),
    0 0 34px rgba(255, 0, 225, .38);
}


.wasd-video-play span {
  font-size: 1.15rem;
}


.wasd-media-shell.is-playing .wasd-video-play {
  top: 15px;
  left: auto;
  right: 15px;
  min-width: 44px;
  min-height: 36px;
  padding: 7px 10px;
  opacity: .18;
  transform: none;
}


.wasd-media-shell.is-playing .wasd-video-play strong {
  display: none;
}


.wasd-media-shell.is-playing .wasd-video-play:hover,
.wasd-media-shell.is-playing .wasd-video-play:focus-visible {
  opacity: 1;
}


.wasd-video-message {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  left: 12px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(5, 2, 8, .82);
  color: #d6cadf;
  font-size: .76rem;
  text-align: center;
  pointer-events: none;
}


.wasd-video-message[hidden] {
  display: none;
}




.catmint-preview-actions .wasd-demo-status {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}


.catmint-preview-actions .wasd-demo-status .status-dot {
  width: 10px;
  height: 10px;
  margin: 0;
}




.project-engagement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}


.project-engagement > .button {
  grid-column: 1 / -1;
  width: 100%;
}


.project-heart,
.project-download-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
  color: #ded3e8;
  font: inherit;
}


.project-engagement strong {
  color: #fff;
}


.project-engagement.is-unavailable strong {
  color: var(--soft);
}


.project-qa-tools label,
.project-question-fields label,
.project-admin-login label,
.project-admin-controls label,
.project-admin-question label {
  display: grid;
  gap: 6px;
}


.project-qa-tools label > span,
.project-question-fields label > span,
.project-admin-login label > span,
.project-admin-controls label > span,
.project-admin-question label > span {
  color: #cfc1da;
  font-size: .78rem;
  font-weight: 700;
}


.project-qa-tools input,
.project-qa-tools select,
.project-question-fields input,
.project-question-fields select,
.project-question-fields textarea,
.project-admin-login input,
.project-admin-controls select,
.project-admin-question textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0711;
  color: #fff;
  font: inherit;
}


.project-qa-tools input,
.project-qa-tools select,
.project-question-fields input,
.project-question-fields select,
.project-admin-login input,
.project-admin-controls select {
  min-height: 43px;
  padding: 9px 11px;
}


.project-question-fields textarea,
.project-admin-question textarea {
  resize: vertical;
  padding: 11px;
  line-height: 1.5;
}


.project-question-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(3, 2, 7, .38);
}


.project-question-card.is-pinned {
  border-color: rgba(189, 108, 255, .54);
  box-shadow: inset 3px 0 0 rgba(189, 108, 255, .65);
}


.project-question-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}


.project-question-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}


.project-question-badges span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d9cae6;
  font-size: .7rem;
  font-weight: 700;
}


.project-question-text {
  margin: 12px 0;
  color: #fff;
  line-height: 1.55;
  white-space: pre-wrap;
}


.project-question-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 0, rgba(157,70,255,.18), transparent 35%),
    #100b18;
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.72);
}


.project-question-dialog::backdrop {
  background: rgba(3,2,7,.8);
  backdrop-filter: blur(5px);
}


.project-question-form {
  position: relative;
  padding: 28px;
}


.project-question-form h2 {
  margin: 5px 38px 10px 0;
}


.project-question-intro {
  color: var(--muted);
  line-height: 1.55;
}


.project-question-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}


.project-question-wide {
  grid-column: 1 / -1;
}


.project-question-status {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--soft);
}


.project-question-status[data-type="error"],
.project-admin-status[data-type="error"] {
  color: #ff8ba8;
}


.project-question-status[data-type="success"],
.project-admin-status[data-type="success"] {
  color: #8dffc2;
}




.project-engagement {
  position: relative;
  align-items: stretch;
  overflow: visible;
  row-gap: 10px;
}


.project-engagement > .compact-button {
  min-height: 44px;
  padding: 8px 12px;
  line-height: 1.25;
  white-space: normal;
}


.project-heart,
.project-download-stat {
  min-width: 0;
}


.project-heart span:last-child,
.project-download-stat span:last-child {
  white-space: nowrap;
}


.project-engagement.is-unavailable .project-heart,
.project-engagement.is-unavailable .project-download-stat {
  opacity: .62;
}

.project-jump-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.project-jump-nav .project-overview-card{display:flex;flex-direction:column;min-height:100%;padding:0 0 18px;overflow:hidden}
.project-overview-card>img{display:block;width:100%;height:220px;padding:14px;object-fit:contain;background:rgba(5,2,12,.82);border-bottom:1px solid var(--line)}
.project-overview-card>strong,.project-overview-card>span:not(.project-overview-badges),.project-overview-card>b{margin-left:18px;margin-right:18px}
.project-overview-card>strong{margin-top:14px;font-size:1.1rem}
.project-overview-card>b{align-self:flex-start;margin-top:auto;padding-top:16px;color:#fff}
.project-overview-badges{display:flex!important;flex-wrap:wrap;gap:6px;margin:14px 18px 0!important}
.project-overview-badges em{padding:4px 8px;border:1px solid rgba(226,66,255,.55);border-radius:999px;color:#f5d7ff;font-size:.72rem;font-style:normal}
.paws-preview .wasd-media-copy ul{margin:18px 0;padding-left:20px;color:var(--muted);line-height:1.55}
.paws-preview .wasd-media-copy li+li{margin-top:8px}
.paws-preview .wasd-media-copy p:not(.eyebrow){margin-top:12px}
.paws-preview .wasd-media-shell{min-height:0}
.paws-preview .wasd-media-shell img{display:block;width:100%;max-width:310px;max-height:540px;object-fit:contain;border-radius:10px}

.project-jump-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.project-jump-nav .project-overview-card>img{height:170px!important;max-height:170px!important;min-height:0!important}
.project-jump-nav .project-overview-card{min-height:430px!important;max-height:430px!important}
.project-overview-card>span:not(.project-overview-badges){display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}



.project-jump-nav .project-overview-live{
  position:relative;
  display:block!important;
  width:100%;
  height:170px;
  min-height:170px;
  margin:0!important;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:rgba(5,2,12,.82);
  -webkit-line-clamp:unset!important;
}

.project-jump-nav .project-overview-live iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
  background:#080510;
}



body[data-page="projects"] .real-project{display:none}

body.project-catalogue-view .real-project{display:none}

body.project-detail-view .project-jump-nav,body.project-detail-view .projects-made-note{display:none!important}

body.project-detail-view .real-project{display:none}

body.project-detail-view .real-project.is-active-project{display:block}

body[data-page="projects"] .real-project:target{display:block}

body[data-page="projects"]:has(.real-project:target) .real-project:not(:target){display:none}

body[data-page="projects"]:has(.real-project:target) .project-jump-nav,
body[data-page="projects"]:has(.real-project:target) .projects-made-note{display:none!important}



.project-overview-card>.project-card-stats{display:flex!important;flex-wrap:wrap;gap:8px;margin:12px 18px 0!important;-webkit-line-clamp:unset!important;overflow:visible!important}

.project-card-stats>span{display:inline-flex!important;align-items:center;gap:4px;margin:0!important;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem;line-height:1}

.project-card-stats strong{color:#fff}

.project-overview-card>.project-card-author{display:block;margin:4px 18px 0;color:#dca6ff;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.project-overview-card>.project-card-open{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:38px;margin:16px 18px 0!important;padding:0 13px!important;border:1px solid rgba(197,91,255,.72);border-radius:8px;background:linear-gradient(135deg,rgba(154,48,232,.32),rgba(87,39,161,.22));box-shadow:0 0 18px rgba(174,49,255,.08);color:#fff!important;font-size:.86rem}

.project-overview-card:hover>.project-card-open{border-color:#d767ff;background:linear-gradient(135deg,rgba(176,54,255,.48),rgba(95,44,177,.32));box-shadow:0 0 22px rgba(174,49,255,.2)}

.paws-preview .wasd-media-shell iframe{display:block;width:100%;height:540px;border:0;border-radius:10px;background:#080510}



.project-overview-live-ticker,
.project-overview-live-popups {
  background:
    radial-gradient(circle at 50% 50%, rgba(143,53,234,.15), transparent 58%),
    #15111d;
}


.project-overview-live-popups iframe {
  background: transparent;
}


.ticker-project-preview {
  margin: 0 clamp(16px, 3vw, 28px) 18px;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 12%, rgba(143,53,234,.16), transparent 36%),
    rgba(255,255,255,.015);
}


.project-info-panel ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.65;
}


.project-info-panel li + li {
  margin-top: 5px;
}




.project-engagement-error {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255, 104, 150, .32);
  border-radius: 8px;
  background: rgba(255, 62, 118, .07);
  color: #ffb5cf;
  font-size: .72rem;
  line-height: 1.35;
}



body[data-page] .dashboard-top,
body[data-page] .dashboard-columns,
body[data-page] .dashboard-column,
body[data-page] .page-grid,
body[data-page] .copy-grid,
body[data-page] .column-stack,
body[data-page] .media-grid,
body[data-page] .playlist-grid,
body[data-page] .recommendations-grid,
body[data-page] .tool-link-grid,
body[data-page] .support-link-grid,
body[data-page] .tools-board,
body[data-page] .project-grid,
body[data-page] .project-grid-v4,
body[data-page] .project-showcase,
body[data-page] .support-action-grid,
body[data-page] .medal-grid,
body[data-page] .gallery-grid,
body[data-page] .cs2-link-card-grid,
body[data-page] .cs2-tool-grid,
body[data-page] .real-project-information,
body[data-page] .project-package-grid,
body[data-page] .project-verification-stats,
body[data-page] .cms-screenshot-grid {
  gap: var(--section-gap) !important;
}



body[data-page] :is(
  .metric,
  .metric-tab,
  .info-pairs > div,
  .copy-card,
  .recommendation-card,
  .tool-link-card,
  .support-link-card,
  .tool-card-pro,
  .project-grid > article,
  .project-card-v4,
  .project-feature,
  .project-overview-card,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel,
  .project-engagement,
  .project-qa,
  .support-action,
  .cs2-service-card,
  .cs2-link-card,
  .crosshair-card,
  .code-card,
  .real-project,
  .gallery-grid figure,
  .site-screenshot-gallery,
  .cms-screenshot-grid figure
) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-color: rgba(202,174,255,.27) !important;
  background-clip: padding-box !important;
}


body[data-page] :is(
  .metric,
  .metric-tab,
  .info-pairs > div,
  .copy-card,
  .recommendation-card,
  .tool-link-card,
  .support-link-card,
  .tool-card-pro,
  .project-grid > article,
  .project-feature,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel,
  .project-engagement,
  .project-qa,
  .support-action,
  .cs2-service-card,
  .cs2-link-card,
  .crosshair-card,
  .code-card
) {
  padding: var(--inner-pad) !important;
}



body[data-page] .media-card,
body[data-page] .playlist-card,
body[data-page] .youtube-card,
body[data-page] .project-card-v4,
body[data-page] .project-overview-card,
body[data-page] .gallery-grid figure,
body[data-page] .cms-screenshot-grid figure {
  overflow: hidden !important;
}



body[data-page] :is(
  .panel,
  .panel-body,
  .copy-card,
  .tool-card-copy,
  .project-body-v4,
  .media-card-copy,
  .playlist-card-copy,
  .youtube-card > div,
  .project-info-panel,
  .project-package-panel,
  .project-verification-panel
) :is(h1,h2,h3,h4,p,span,strong,small,li) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body[data-page] :is(
  .button-row,
  .tool-actions,
  .project-actions-v4,
  .real-project-main-actions,
  .project-footer-actions,
  .project-qa-tools,
  .dialog-actions,
  .dashboard-steam-buttons
) {
  gap: var(--inner-gap) !important;
}




.wasd-family-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; margin:24px 0; padding:22px; border:1px solid rgba(181,120,255,.34); border-radius:22px; background:rgba(65,35,91,.38); }

.wasd-family-intro h3,.wasd-family-intro p { margin-top:0; }

.wasd-selected-status { grid-column:1/-1; min-height:1.4em; margin:0; color:#f0dfff; font-weight:700; }

.wasd-variant-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:22px 0 30px; }

.wasd-variant-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:17px; border:1px solid rgba(185,123,255,.3); border-radius:24px; background:linear-gradient(165deg,rgba(47,28,68,.94),rgba(21,14,34,.96)); box-shadow:0 18px 42px rgba(0,0,0,.24); }

.wasd-variant-card > img { width:100%; aspect-ratio:5/3; object-fit:contain; background:#080510; border-radius:17px; border:1px solid rgba(255,255,255,.1); }

.wasd-variant-select { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:rgba(157,88,211,.16); cursor:pointer; }

.wasd-variant-select input { width:20px; height:20px; accent-color:#c477ff; }

.wasd-variant-copy { flex:1; }

.wasd-variant-copy h3 { margin:.2rem 0 .55rem; }

.wasd-variant-copy p:last-child { margin-bottom:0; }

.wasd-variant-actions { display:grid; gap:12px; }

.wasd-variant-actions .project-engagement { align-items:center; }

.wasd-variant-actions .compact-button { display:none; }

.catmint-wheel-preview { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr); gap:24px; align-items:center; margin:24px 0 30px; padding:18px; border:1px solid rgba(181,120,255,.3); border-radius:24px; background:rgba(39,23,57,.66); }

.catmint-wheel-preview img { width:100%; border-radius:18px; border:1px solid rgba(255,255,255,.1); }




.project-jump-nav .project-overview-live-wasd video {
  display:block; width:100%; height:100%; object-fit:contain; background:#080510; pointer-events:none;
}

.wasd-variant-card > img[data-full-key-preview] { object-fit:contain!important; background:#080510; }

.wasd-variant-actions > .button { justify-self:start; }




.project-overview-live-wasd { display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:#080510; }

.project-overview-live-wasd video { display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; background:#080510; }

.wasd-variant-card [data-project-qa],
.wasd-variant-card [data-project-ask] { display:none!important; }

.wasd-shared-engagement .project-engagement-error { display:none!important; }




.project-overview-card.project-overview-card-static,
.project-jump-nav article.project-overview-card { color:inherit; text-decoration:none; }

.project-jump-nav article.project-overview-card:hover { transform:translateY(-2px); border-color:rgba(199,101,255,.58); }

.project-overview-live { position:relative; }

.project-jump-nav .project-overview-live-wasd video { pointer-events:auto!important; }

.project-jump-nav .project-overview-live-wheel iframe { transform:scale(.34); transform-origin:top left; width:294%!important; height:294%!important; pointer-events:none; }

.project-overview-card>.project-card-open { text-decoration:none; }


.wasd-real-video-section { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(320px,1.28fr); gap:24px; align-items:center; margin:24px 0 30px; padding:20px; border:1px solid rgba(181,120,255,.34); border-radius:24px; background:linear-gradient(150deg,rgba(62,34,88,.62),rgba(15,9,25,.9)); }

.wasd-real-video-copy h3 { margin:.2rem 0 .7rem; }

.wasd-real-video-copy p:last-child { margin-bottom:0; color:var(--muted); line-height:1.6; }

.wasd-real-video-frame { display:flex; align-items:center; justify-content:center; min-height:330px; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden; background:#050209; }

.wasd-real-video-frame video { display:block; width:100%; max-width:620px; max-height:520px; object-fit:contain; background:#050209; }


.wasd-actual-key-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:100%; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:#080510; }

.wasd-actual-key-tile { position:relative; display:flex; align-items:center; justify-content:center; min-height:126px; overflow:hidden; border:1px solid rgba(184,104,255,.42); border-radius:14px; background:radial-gradient(circle at 50% 42%,rgba(102,71,127,.24),rgba(8,5,16,.96) 66%); }

.wasd-actual-key-tile:nth-child(n/**/+5) { grid-column:span 2; }

.wasd-actual-key-tile img { position:absolute; inset:18px 12px 10px; width:calc(100% - 24px); height:calc(100% - 28px); object-fit:contain; transition:opacity .16s ease,transform .16s ease; }

.wasd-actual-key-label { position:absolute; z-index:3; top:7px; left:8px; padding:3px 7px; border-radius:7px; background:#793eb0; color:#fff; font-size:.72rem; }

.wasd-key-active { opacity:0; }

.wasd-actual-key-tile:hover .wasd-key-active,.wasd-actual-key-tile:focus .wasd-key-active { opacity:1; transform:scale(1.035); }

.wasd-actual-key-tile:hover .wasd-key-idle,.wasd-actual-key-tile:focus .wasd-key-idle { opacity:0; }

.wasd-variant-actions>.button { width:100%; justify-content:center; min-height:46px; }


.catmint-wheel-real-preview { display:block!important; }

.catmint-wheel-real-copy { max-width:900px; margin:0 0 18px; }

.catmint-wheel-real-copy h3 { margin:.2rem 0 .6rem; }

.catmint-wheel-real-copy p:last-child { color:var(--muted); }

.catmint-wheel-real-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:20px; align-items:start; }

.catmint-wheel-real-frame { margin:0; overflow:hidden; border:1px solid rgba(190,116,255,.4); border-radius:18px; background:#080510; }

.catmint-wheel-real-frame iframe { display:block; width:100%; border:0; background:#080510; }

.catmint-wheel-real-frame-wheel iframe { height:720px; }

.catmint-wheel-real-frame-dock iframe { height:760px; }

.catmint-wheel-real-frame figcaption { padding:10px 13px; border-top:1px solid rgba(255,255,255,.1); color:#f3ddff; font-weight:800; text-align:center; }




.wasd-paw-video-preview {
  display:flex; align-items:center; justify-content:center; width:100%; min-height:260px;
  overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:#050209;
}

.wasd-paw-video-preview video {
  display:block; width:100%; height:auto; max-height:480px; object-fit:contain; background:#050209;
}




.project-overview-live-wheel-pair { min-height: 250px; padding: 12px; background: #0c0914; }

.wheel-card-preview-pair { width:100%; min-height:220px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:stretch; }

.wheel-card-preview-pair > span { min-width:0; border:1px solid rgba(169,112,255,.38); border-radius:12px; overflow:hidden; background:#15111f; display:grid; place-items:center; }

.wheel-card-preview-pair iframe { width:100%; height:100%; border:0; display:block; background:#15111f; pointer-events:none; }

.wheel-card-preview-pair .wheel-card-wheel { aspect-ratio:1/1; }

.wheel-card-preview-pair .wheel-card-dock { aspect-ratio:520/760; }

.wasd-family-engagement { width:100%; }

.wasd-family-stat { cursor:default; }

.wasd-variant-engagement { margin-top:auto; }

.wasd-license-panel { margin:24px 0; border-color:rgba(255,0,245,.42); }

.wasd-variant-card { display:flex; flex-direction:column; }

.wasd-paw-video-preview video { width:100%; aspect-ratio:16/10; object-fit:contain; background:#050309; border-radius:12px; }

.project-heart,.project-download-stat{gap:8px!important;min-height:56px!important;padding:8px 14px!important;}

.project-heart strong,.project-download-stat strong,.project-card-stats strong{font-size:1rem!important;color:#fff!important;}

.project-heart>span:last-child,.project-download-stat>span:last-child{display:none!important;}

.project-card-stats>span{min-width:66px;justify-content:center!important;padding:6px 10px!important;border-radius:12px!important;}

.project-card-stats .project-stat-icon{width:30px!important;height:30px!important;min-width:30px!important;}

.real-project-main-actions .project-engagement{margin-top:12px;}

.real-project-main-actions{gap:10px!important;}

.wasd-family-engagement{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:14px!important;}

.wasd-family-engagement .project-heart,.wasd-family-engagement .project-download-stat{min-width:0!important;}

.project-engagement-error{display:none!important;}

.project-overview-live-frame-pair{min-height:250px;padding:12px;background:#0c0914;}

.frame-card-preview-pair{width:100%;min-height:220px;display:grid;grid-template-columns:1fr .72fr;gap:10px;align-items:stretch;}

.frame-card-preview-pair>span{min-width:0;border:1px solid rgba(169,112,255,.38);border-radius:12px;overflow:hidden;background:#090610;display:grid;place-items:center;}

.frame-card-preview-pair iframe{width:100%;height:100%;border:0;display:block;background:#090610;pointer-events:none;}

.frame-card-preview-pair .frame-card-frame{aspect-ratio:16/9;}

.frame-card-preview-pair .frame-card-dock{aspect-ratio:520/760;}

.project-card-stats .project-stat-icon{width:17px!important;height:17px!important;min-width:17px!important;max-width:17px!important;max-height:17px!important;flex-basis:17px!important}

.project-heart,.project-download-stat{gap:6px!important;min-height:42px!important;padding:6px 10px!important}

.project-card-stats>span{min-width:52px!important;gap:5px!important;padding:5px 8px!important}

.project-heart strong,.project-download-stat strong,.project-card-stats strong{font-size:.95rem!important;line-height:1!important}

.project-overview-live-frame-pair{min-height:220px!important}

.frame-card-preview-pair{grid-template-columns:minmax(0,1.35fr) minmax(125px,.65fr)!important;min-height:195px!important}

.frame-card-preview-pair .frame-card-frame{aspect-ratio:16/9!important}
.frame-card-preview-pair .frame-card-dock{aspect-ratio:3/4!important}



.frame-card-preview-pair .frame-card-frame{background:#000!important;padding:12px!important;}

.frame-card-preview-pair .frame-card-frame iframe{width:88%!important;height:88%!important;margin:auto!important;background:#000!important;border-radius:8px;}

.project-card-stats .project-stat-icon{
  width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;
  max-height:18px!important;flex-basis:18px!important;
}

.project-heart,.project-download-stat{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:58px!important;min-height:38px!important;padding:5px 9px!important;
  gap:5px!important;border-radius:999px!important;
}

.project-card-stats>span{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:50px!important;min-height:32px!important;padding:4px 8px!important;
  gap:4px!important;border-radius:999px!important;
}

.project-heart strong,.project-download-stat strong,.project-card-stats strong{
  font-size:.92rem!important;line-height:1!important;font-variant-numeric:tabular-nums!important;
}

.project-engagement{gap:8px!important;align-items:center!important;}



.project-static-preview{display:block;width:100%;height:100%;object-fit:contain;background:#080510;border:0;}

.project-overview-live>.project-static-preview{width:100%;height:100%;object-fit:cover;}

.project-overview-live-ticker>.project-static-preview,
.project-overview-live-popups>.project-static-preview{object-fit:contain;background:#080510;}

.wheel-card-preview-pair img,.frame-card-preview-pair img{width:100%;height:100%;object-fit:contain;background:#080510;display:block;}

.wheel-card-preview-pair .wheel-card-wheel img{object-fit:contain;background:#000;}

.wheel-card-preview-pair .wheel-card-dock img{object-fit:cover;object-position:top;background:#15111f;}

.frame-card-preview-pair .frame-card-frame{background:#000!important;padding:10px!important;}

.frame-card-preview-pair .frame-card-frame img{width:90%!important;height:auto!important;aspect-ratio:16/9;object-fit:contain;background:#000;margin:auto;}

.frame-card-preview-pair .frame-card-dock img{object-fit:cover;object-position:top;background:#15111f;}

.catmint-demo-stage>.project-static-preview{width:min(100%,560px);height:auto;max-height:900px;object-fit:cover;object-position:top;margin:0 auto;border-radius:14px;}

.catmint-wheel-preview-grid img,.wheel-live-preview-grid img{display:block;width:100%;height:auto;object-fit:contain;object-position:top;background:#15111f;}

.real-project-main-actions>a[href*="ko-fi.com"]{display:none!important;}




.frame-card-preview-pair .frame-card-frame{background:#000!important;padding:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;}

.frame-card-preview-pair .frame-card-frame img{width:78%!important;height:auto!important;max-height:145px!important;object-fit:contain!important;background:#000!important;margin:auto!important;}


/* v238: actual uploaded buttons, compact counters, real lazy previews, faster rendering. */
.project-card-stats,.project-engagement{align-items:center!important}

.project-card-stats>span,.project-heart,.project-download-stat{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:64px!important;min-height:44px!important;
  padding:5px 10px!important;gap:7px!important;border-radius:14px!important;
}

.project-card-stats .project-stat-icon{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;flex:0 0 28px!important}

.project-heart .project-stat-icon,.project-download-stat .project-stat-icon{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;flex:0 0 32px!important}

.project-card-stats strong,.project-heart strong,.project-download-stat strong{font-size:1rem!important;line-height:1!important;color:#fff!important}

.project-overview-live iframe.actual-project-preview-frame,.actual-project-preview-frame{
 display:block;width:100%;height:100%;min-height:220px;border:0;background:#0b0712;
}

.project-overview-live-pos iframe{min-height:260px}

.project-overview-live-asi iframe{min-height:260px}

.project-overview-live-ticker iframe{min-height:120px}

.project-overview-live-popups iframe{min-height:245px}

.actual-project-preview-shell{position:relative;width:100%;min-height:220px;background:#0b0712;overflow:hidden}

.actual-project-preview-shell::before{content:'Loading actual project preview…';position:absolute;inset:0;display:grid;place-items:center;color:#bbaad7;font-size:.82rem;z-index:0}

.actual-project-preview-shell iframe{position:relative;z-index:1}

.tool-card-pro,.project-overview-card,.project-info-panel,.media-card,.game-card,.recommendation-card{content-visibility:auto;contain-intrinsic-size:300px}

.project-card-stats .project-stat-icon{
  width:17px!important;height:17px!important;min-width:17px!important;max-width:17px!important;
  max-height:17px!important;flex:0 0 17px!important;
}

.project-heart,.project-download-stat{
  width:auto!important;min-width:48px!important;min-height:34px!important;
  padding:4px 7px!important;gap:5px!important;border-radius:999px!important;
}

.project-card-stats>span{
  width:auto!important;min-width:43px!important;min-height:29px!important;
  padding:3px 6px!important;gap:4px!important;border-radius:999px!important;
}

.project-heart strong,.project-download-stat strong,.project-card-stats strong{
  font-size:.92rem!important;line-height:1!important;
}

.wasd-family-stat{cursor:default!important;}



/* v244: working WASD selection state only */
.wasd-variant-card.is-selected {
  border-color: rgba(211, 113, 255, .92) !important;
  box-shadow: 0 0 0 2px rgba(192, 83, 255, .22), 0 18px 42px rgba(0,0,0,.3) !important;
}

.wasd-variant-card.is-selected .wasd-variant-select {
  background: linear-gradient(135deg, rgba(133, 48, 188, .5), rgba(80, 30, 119, .55)) !important;
}

.wasd-variant-card.is-selected .wasd-variant-select span::after {
  content: " ✓";
  color: #f3c6ff;
  font-weight: 900;
}


/* v249 — visible WASD variant engagement, responsive cards, black Wheel preview, roomier dashboard */
.wasd-variant-card [data-project-engagement]{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:9px!important;margin-top:auto!important;padding-top:10px!important;
  border-top:1px solid rgba(202,174,255,.14)!important;
}

.wasd-variant-card .project-engagement-error{display:block!important;flex-basis:100%;font-size:.72rem;color:#d9b7ef}

.wasd-variant-card [data-project-qa],.wasd-variant-card [data-project-ask]{display:none!important}

.wasd-variant-grid{grid-template-columns:repeat(3,minmax(250px,1fr))!important;gap:18px!important;align-items:stretch!important}

.wasd-variant-card{height:100%!important;min-width:0!important;padding:14px!important;gap:12px!important}

.wasd-variant-card>img{aspect-ratio:16/10!important;max-height:290px!important}

.wasd-family-intro{padding:20px!important;min-height:0!important}

.wasd-family-intro .button[data-wasd-download-selected]{align-self:center!important}

.wheel-card-preview-pair .wheel-card-wheel,
.wheel-card-preview-pair .wheel-card-wheel img,
.catmint-wheel-preview-grid,
.catmint-wheel-preview-grid img,
.wheel-live-preview-grid,
.wheel-live-preview-grid img{background:#000!important}


/* v251 final fixes */
.wasd-variant-card [data-project-engagement]{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important;margin-top:auto!important;padding-top:10px!important;border-top:1px solid rgba(202,174,255,.14)!important}

.wasd-variant-card [data-project-heart]{display:inline-flex!important;align-items:center!important;cursor:pointer!important}

.wasd-variant-card [data-project-download-count]{display:inline!important}

.wheel-card-preview-pair .wheel-card-wheel,.wheel-card-preview-pair .wheel-card-wheel img,.catmint-wheel-real-frame-wheel,.catmint-wheel-real-frame-wheel img{background:#000!important}

.project-overview-live-frame-pair .frame-card-preview-pair>span,.project-overview-live-wheel-pair .wheel-card-preview-pair>span{background:#080510!important}


/* v252: actual clickable WASD per-variant heart and download controls */
.wasd-variant-engagement{display:flex!important;position:relative!important;z-index:5!important;pointer-events:auto!important}

.wasd-variant-engagement button{pointer-events:auto!important;position:relative!important;z-index:6!important}

.wasd-variant-engagement .project-heart,.wasd-variant-engagement .project-download-stat{cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important}

.wasd-variant-engagement .project-heart:hover,.wasd-variant-engagement .project-download-stat:hover{border-color:rgba(255,91,207,.8)!important;box-shadow:0 0 18px rgba(255,63,198,.16)!important;transform:translateY(-1px)}


/* v253: unmistakable per-variant heart and download controls */
.wasd-variant-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:auto!important}

.wasd-visible-counters{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:30!important;pointer-events:auto!important}

.wasd-visible-counters>button{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:44px!important;width:100%!important;padding:9px 12px!important;border:1px solid rgba(172,93,255,.75)!important;border-radius:10px!important;background:#120b1e!important;color:#fff!important;font:inherit!important;font-weight:800!important;cursor:pointer!important;pointer-events:auto!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:31!important}

.wasd-visible-counters>button:hover{border-color:#ff55d6!important;box-shadow:0 0 16px rgba(255,61,200,.2)!important;transform:translateY(-1px)}

.wasd-visible-counters>button:focus-visible{outline:3px solid rgba(255,90,220,.8)!important;outline-offset:2px!important}

.wasd-visible-counters img{display:block!important;width:18px!important;height:18px!important;object-fit:contain!important;flex:0 0 18px!important}

.wasd-visible-counters span{display:inline!important;font-size:.78rem!important;text-transform:uppercase!important;letter-spacing:.04em!important}

.wasd-visible-counters strong{display:inline!important;min-width:1.2em!important;text-align:center!important;font-size:.92rem!important;color:#fff!important}

.wasd-visible-heart.is-hearted{background:rgba(117,29,104,.65)!important;border-color:#ff55d6!important}
/* v329 — mobile project cards: one readable card per row */
@media screen and (max-width: 820px) {
  body[data-page="projects"] .project-jump-nav,
  body[data-page="projects"] .project-grid,
  body[data-page="projects"] .project-grid-v4,
  body[data-page="projects"] .projects-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  body[data-page="projects"] .project-overview-card,
  body[data-page="projects"] .project-card-v4,
  body[data-page="projects"] .project-grid > article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}