/* Карточка «JS: первые шаги» на главной хаба — листок из тетради в клетку на тёмном хабе. */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Nunito:wght@400;700;800;900&display=swap");
.qc-jss { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px 22px 22px 34px; border-radius: 6px; color: #23305c; font-family: "Nunito", system-ui, sans-serif;
  background-color: #fdfcf7; background-image: linear-gradient(90deg, transparent 20px, rgba(224, 93, 93, .45) 20px, rgba(224, 93, 93, .45) 22px, transparent 22px), linear-gradient(#dde8f5 1px, transparent 1px), linear-gradient(90deg, #dde8f5 1px, transparent 1px);
  background-size: 100% 100%, 18px 18px, 18px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); transform: rotate(-.6deg); transition: transform .2s; }
.qc-jss:hover { transform: rotate(0) translateY(-3px); }
.qc-jss-head { display: flex; align-items: center; gap: 12px; }
.qc-jss-tile { flex: none; display: grid; place-items: end end; width: 46px; height: 46px; padding: 0 4px 2px 0; background: #f7df1e; color: #1d1d1b; font: 900 20px/1 "Nunito", sans-serif; transform: rotate(-5deg); box-shadow: 2px 2px 0 rgba(35, 48, 92, .3); }
.qc-jss-kicker { margin: 0; font: 700 11px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #6b7393; }
.qc-jss h3 { margin: 0; font: 700 30px/1 "Caveat", "Comic Sans MS", cursive; color: #1f45a0; }
.qc-jss-pic { border: 2px solid #c6cfe2; border-radius: 4px; overflow: hidden; background: #fffef9; line-height: 0; }
.qc-jss-pic svg { display: block; width: 100%; height: auto; }
.qc-jss-desc { margin: 0; font-size: 14px; line-height: 1.5; color: #2a345e; }
.qc-jss-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #6b7393; }
.qc-jss-stats b { color: #23305c; }
.qc-jss-mine { font-size: 13px; padding: 6px 10px; border: 2px dashed #2b59c3; border-radius: 8px; background: rgba(255, 255, 255, .7); }
.qc-jss-mine b { color: #1f45a0; }
.qc-jss-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.qc-jss-btn { padding: 9px 16px; border-radius: 10px; background: #2b59c3; border: 2px solid #1f45a0; color: #fff; font-weight: 800; text-decoration: none; box-shadow: 3px 3px 0 #1f45a0; }
.qc-jss-btn:hover { background: #3466d6; }
.qc-jss-link { color: #6b7393; font-size: 13px; text-decoration: none; }
.qc-jss-link:hover { color: #2b59c3; }