.roxgain-showcase {
  --roxgain-red: #ff2929;
  --roxgain-magenta: #f221dc;
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #63354e;
  background: radial-gradient(ellipse at 4% 80%, #6c14142e, transparent 58%), radial-gradient(ellipse at 90% 15%, #820d7926, transparent 60%), #0c0b0d;
  box-shadow: 0 16px 50px #0005;
}
.roxgain-showcase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--roxgain-red), #7a263a 45%, var(--roxgain-magenta));
}
.roxgain-copy {padding: clamp(26px, 3.3vw, 48px)}
.roxgain-copy > .eyebrow {color: #d6bbc9; font-size: 9px; letter-spacing: 2px}
.roxgain-copy .creation-status {color: #e2b8db; border-color: #7d3a72; background: #f221dc0a}
.roxgain-copy h3 {font-size: clamp(40px, 4.1vw, 66px); letter-spacing: -1px; margin-bottom: 20px}
.roxgain-copy h3 span {display: inline-block; font: 10px/1 monospace; color: #ff66e8; border: 1px solid #94467f; padding: 7px 8px; vertical-align: middle; letter-spacing: 1.5px}
.roxgain-copy p.creation-tagline {font: italic clamp(23px, 2.3vw, 32px)/1.25 Georgia, serif; color: #f2e8ec; margin-bottom: 20px}
.roxgain-copy p.roxgain-intro {color: #c9bdc7}
.roxgain-states {display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 25px 0}
.roxgain-state {display: inline-flex; gap: 8px; align-items: center; font: 9px/1.6 monospace; letter-spacing: .5px; color: #e0d6dd}
.roxgain-state i {display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%}
.roxgain-state-off i {background: var(--roxgain-red); box-shadow: 0 0 10px #ff292966}
.roxgain-state-on i {background: var(--roxgain-magenta); box-shadow: 0 0 10px #f221dc66}
.roxgain-copy p.roxgain-development {font-size: 11px; color: #a99da8; border-top: 1px solid #42303c; padding-top: 18px}
.roxgain-preview-link {margin-top: 10px; padding: 14px 18px; border: 1px solid #e443bd; color: #fff0fc; background: #f221dc12; font-size: 11px; text-transform: none}
.roxgain-preview-link:hover {background: #f221dc25; box-shadow: 0 0 22px #f221dc18}
.roxgain-enquiry {display: flex; width: fit-content; margin-top: 23px; color: #ddc0d6}
.roxgain-copy p.future-concepts {font-size: 10px; margin-top: 28px; color: #998b96}
.roxgain-art {min-width: 0; margin: 0; padding: 24px 24px 24px 0}
.roxgain-art > a {display: block; border: 1px solid #503344; background: #080709; outline-offset: 5px}
.roxgain-art img {display: block; width: 100%; height: auto; object-fit: contain}
.roxgain-art figcaption {display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font: 7px/1.8 monospace; letter-spacing: 1px; color: #a991a3; margin-top: 12px}
@media (max-width: 1100px) {
  .roxgain-showcase {grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr)}
  .roxgain-copy {padding: 28px}
}
@media (max-width: 760px) {
  .roxgain-showcase {grid-template-columns: minmax(0, 1fr)}
  .roxgain-copy {padding: 28px 24px 12px}
  .roxgain-copy h3 {font-size: 46px}
  .roxgain-art {padding: 12px 14px 20px}
  .roxgain-preview-link {width: 100%; justify-content: space-between}
  .roxgain-art figcaption {font-size: 6px; letter-spacing: .6px}
}

/* DEMONGAIN 0.4.0 official compiled editor presentation. */
.roxgain-state-amber i{background:#ffb641;box-shadow:0 0 10px #ffb64166}
.demongain-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.demongain-pair figure{margin:0;min-width:0}.demongain-pair figure>a{display:block;outline-offset:5px}
.demongain-pair figcaption{display:block;text-align:center;font-size:8px;letter-spacing:.6px}
.demongain-pair>p{grid-column:1/-1;text-align:center;font:8px/1.7 monospace;color:#b8aab5;letter-spacing:1px;margin:0}
.store-artefacts{margin:0 0 30px}.store-artefacts .artefacts-concept{width:100%}
@media(max-width:420px){.demongain-pair{gap:10px}.demongain-pair figcaption{font-size:7px;letter-spacing:0}}