.roxpad-card {
  --pad-red: #ff3036;
  --pad-magenta: #ef2bd4;
  position: relative;
  border-color: #63354e;
  background: radial-gradient(ellipse at 0 80%, #631b2026, transparent 65%), #0c0b0d;
  overflow: hidden;
}
.roxpad-card::before {content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--pad-red), #5f2c49, var(--pad-magenta))}
.roxpad-card > .creation-copy {align-self: center}
.roxpad-card .creation-status {border-color: #7d3a72; color: #e2b8db}
.roxpad-preview {min-width: 0; padding: clamp(20px, 3vw, 38px); border-color: #4f2e43; background: radial-gradient(ellipse at 100% 0, #b3159e16, transparent 60%), radial-gradient(ellipse at 0 100%, #92191f1c, transparent 65%), #0b0a0d; justify-content: center}
.roxpad-shell {width: 100%; max-width: 560px; margin: auto; padding: 2px; clip-path: polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%); background: linear-gradient(135deg, #f43b3d, #a7a0a6 15%, #2e282e 32%, #bd319f 65%, #dad0d7 85%, #5b3b55); box-shadow: 0 0 40px #f221dc12}
.roxpad-console {position: relative; padding: 28px 22px 24px; clip-path: inherit; background: repeating-linear-gradient(135deg, #ffffff03 0 1px, transparent 1px 10px), radial-gradient(ellipse at top left, #381b233b, transparent 60%), linear-gradient(145deg, #1d1b20, #09080b 65%); box-shadow: inset 0 0 35px #000}
.roxpad-bolt {position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #91878e; background: linear-gradient(135deg, #c0b6be, #171519 45%, #686168); box-shadow: 0 0 0 3px #050506, 0 3px 5px #000}
.roxpad-bolt::after {content: ""; position: absolute; inset: 3px 1px; background: #050506; transform: rotate(-35deg)}
.roxpad-bolt-tl {top: 14px; left: 16px}.roxpad-bolt-tr {top: 14px; right: 16px}.roxpad-bolt-bl {bottom: 14px; left: 16px}.roxpad-bolt-br {bottom: 14px; right: 16px}
.roxpad-console-head {display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0 20px}
.roxpad-console-head img {width: 88px; height: auto; display: block}
.roxpad-console-head strong {font: 42px/.95 var(--display); letter-spacing: 1px; color: #f3e8ee; text-shadow: 0 3px 0 #000}
.roxpad-console-head strong span {color: var(--pad-magenta)}
.roxpad-reference-tag {font: 7px/1.5 monospace; letter-spacing: 2.2px; color: #bda6b6}
.roxpad-profile {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; padding: 12px 0; margin-bottom: 14px; border-top: 1px solid #633347; border-bottom: 1px solid #4a2b42; color: #d4bfce; font: 8px/1.5 monospace; letter-spacing: .6px}
.roxpad-profile > span:last-child {color: #b79eaf}
.roxpad-naga-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0}
.roxpad-naga-grid > li {--slot-colour: var(--pad-red); position: relative; min-width: 0; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 7px 14px; border: 1px solid #853741; border-top-color: #d15f66; border-radius: 6px; background: radial-gradient(ellipse at top, #ff303610, transparent 80%), linear-gradient(145deg, #30232a, #100d12 75%); box-shadow: inset 0 1px 0 #ffffff0b, inset 0 -3px 0 #000, 0 4px 0 #030304}
.roxpad-naga-grid > li:nth-child(3n+2) {--slot-colour: #f76ba7; border-color: #884566; border-top-color: #d475a6}
.roxpad-naga-grid > li:nth-child(3n) {--slot-colour: var(--pad-magenta); border-color: #853879; border-top-color: #d264c4; background: radial-gradient(ellipse at top, #ef2bd412, transparent 80%), linear-gradient(145deg, #30202f, #100d12 75%)}
.roxpad-slot {position: absolute; top: 9px; left: 11px; font: 13px/1 monospace; letter-spacing: 1px; color: var(--slot-colour); text-shadow: 0 0 9px #ff3d771a}
.roxpad-naga-grid kbd {padding: 0; background: transparent; border: 0; box-shadow: none; color: #f6eaf2; font: 600 clamp(10px, .9vw, 13px)/1.5 ui-monospace, Consolas, monospace; text-align: center; white-space: nowrap}
.roxpad-command {font: 10px/1.4 Arial, sans-serif; color: #c2aeba; text-align: center; max-width: 100%}
.roxpad-console-foot {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 13px; border-top: 1px solid #593047; color: #b296a9; font: 7px/1.7 monospace; letter-spacing: .9px}
.roxpad-preview p.roxpad-preview-note {max-width: 560px; margin: 18px auto 0; color: #b39fab; font: 10px/1.8 Arial, sans-serif}
.roxpad-preview-caption {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; max-width: 560px; width: 100%; margin: 15px auto 0; color: #b99bae; font: 7px/1.7 monospace; letter-spacing: .6px}
.roxpad-preview-caption a {color: #dbb1cf; text-decoration: underline; text-underline-offset: 3px}
@media (max-width: 1100px) {
  .roxpad-preview {padding: 22px}
  .roxpad-console {padding: 26px 14px 24px}
  .roxpad-naga-grid {gap: 8px}
  .roxpad-naga-grid > li {min-height: 105px}
  .roxpad-naga-grid kbd {font-size: 10px}
  .roxpad-command {font-size: 9px}
}
@media (max-width: 760px) {
  .roxpad-preview {padding: 20px 14px 24px}
  .roxpad-console {padding-left: 12px; padding-right: 12px}
  .roxpad-naga-grid {gap: 7px}
  .roxpad-naga-grid > li {min-height: 102px; padding: 28px 4px 12px; gap: 9px}
  .roxpad-naga-grid kbd {font-size: clamp(8px, 2.4vw, 11px)}
  .roxpad-profile {font-size: 7px; letter-spacing: .2px}
  .roxpad-console-head strong {font-size: 40px}
}