/* /resources/developers (partials/dev-resources.hbs, dev-card.hbs; loaded by dev-assets.hbs): the hero's code window
   and the link cards. */
.dev-code { width: 100%; max-width: 34rem; margin: 0 auto; border-radius: 1rem; overflow: hidden; background: #10131f; border: 1px solid #2a3150; box-shadow: 0 2rem 4rem rgba(10, 12, 24, .35); font-family: "Lexend Deca", sans-serif; }
.dev-code_bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: #181c2c; border-bottom: 1px solid #2a3150; }
.dev-code_bar i { width: .7rem; height: .7rem; border-radius: 50%; background: #f15851; }
.dev-code_bar i:nth-child(2) { background: #f9c440; }
.dev-code_bar i:nth-child(3) { background: #3ddc84; }
.dev-code_bar span { margin-left: .6rem; font-size: .75rem; color: #8d93b0; }
.dev-code_pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; font: .82rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9cee3; white-space: pre; }
.dev-code_pre .c { color: #6b7194; }
.dev-code_pre .k { color: #b56cff; }
.dev-code_pre .f { color: #11ced7; }
.dev-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dev-card a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--sp-line, #e3e6f0); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.dev-card a:hover { border-color: #f6b1ad; box-shadow: 0 .75rem 1.875rem rgba(24, 27, 43, .08); transform: translateY(-2px); }
.dev-card_ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: linear-gradient(135deg, #2a3150, #10131f); color: #fff; font: 700 1rem/1 -apple-system, "Lexend Deca", sans-serif; }
.dev-card b { font-weight: 600; }
.dev-card_d { font-size: .9375rem; line-height: 1.5; color: #4a5068; }
.dev-card em { margin-top: auto; font-style: normal; font-size: .8125rem; font-weight: 600; color: #f15851; }
@media screen and (max-width: 991px) { .dev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 600px) { .dev-cards { grid-template-columns: minmax(0, 1fr); } }