.playing-card[data-deck="syntax"] {
  --card: #f6f3ea;
  background: var(--card);
  color: #22383b;
  border: 1px solid #d8d6cc;
  box-shadow: 0 3px 0 #d4d1c4, 0 6px 12px #0002;
  isolation: isolate;
  container-type: inline-size;
}
.playing-card[data-deck="syntax"].red { color: #b43d43; }
.playing-card[data-deck="syntax"]::after { content: ''; position: absolute; inset: 4%; border: 1px solid #1f383b16; border-radius: 4px; pointer-events: none; }
.playing-card[data-deck="syntax"] .card-corner { z-index: 1; top: 6%; left: 7%; font-size: 14cqw; }
.playing-card[data-deck="syntax"] .card-corner b { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 22cqw; font-weight: 700; letter-spacing: -.08em; }
.playing-card[data-deck="syntax"] .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.syntax-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.syntax-art text { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
.syntax-file { font-size: 8px; fill: #666f6b; letter-spacing: .5px; }
.syntax-rule { fill: none; stroke: #203d3a; stroke-width: .65; opacity: .2; }
.syntax-brace { fill: none; stroke: #89958c; stroke-width: 1.5; opacity: .5; }
.syntax-art .syntax-monogram { font-size: 29px; font-weight: 700; fill: #fff9eb; letter-spacing: -1.7px; }
.syntax-art .syntax-monogram-wide { font-size: 23px; letter-spacing: -1.5px; }
.syntax-art .syntax-language { font-size: 12.5px; font-weight: 700; fill: #243b3c; letter-spacing: -.4px; }
.syntax-code { font-size: 6.5px; fill: #576b63; letter-spacing: -.3px; }
.syntax-art .syntax-bug-title { font-size: 7.5px; font-weight: 700; fill: #684ca4; }
.syntax-court image { mix-blend-mode: darken; }
.playing-card[data-deck="syntax"].joker-card { color: #684ca4; }
.playing-card[data-deck="syntax"] .joker-label { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 7cqw; }
.deck-choice:has([data-deck="syntax"]) .deck-preview { background: radial-gradient(ellipse at 50% 110%, #518d7966, transparent 80%), #162a2b; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) { background: #173436; color: #b4e8c7; border-color: #61817b; box-shadow: 0 3px 0 #0a2124, 0 5px 12px #0003; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-frame {
  position: absolute;
  inset: 7%;
  height: auto;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid #a6d7bc77;
  background: repeating-linear-gradient(0deg, transparent 0 11px, #abd6bd0b 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, #abd6bd0b 11px 12px);
}
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-mark { font-size: 0; display: grid; place-items: center; width: 78%; aspect-ratio: 1; container-type: inline-size; border: 1px solid #b8e5cd55; background: #173436; border-radius: 50%; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-mark > span { display: none; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-mark::before { content: '{ }'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 48cqw/1 'SFMono-Regular', Consolas, monospace; color: #c3edc9; letter-spacing: -.1em; padding-right: .1em; white-space: nowrap; }