/* Routine chart pages (/quests/) — generated by pinmachine/build_site.py */
.q-media { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 28px; align-items: start; margin: 0 0 40px; }
.q-pin { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--border2); }
.q-media-side h2 { margin-top: 0; }
.q-download { display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; transition: background .15s; }
.q-download:hover { background: var(--accent); }
.q-small { font-size: 13px !important; color: var(--text3) !important; }
.q-steps { list-style: none; margin: 0 0 30px !important; padding: 0; counter-reset: qstep; }
.q-steps li { counter-increment: qstep; position: relative; border: 1px solid var(--border); background: var(--bg2); border-radius: var(--r-lg); padding: 16px 18px 16px 62px !important; margin: 0 0 10px !important; }
.q-steps li::before { content: counter(qstep); position: absolute; left: 18px; top: 15px; width: 28px; height: 28px; border-radius: 50%; background: rgba(185,162,255,.16); color: #b9a2ff; font-family: var(--mono); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.q-step-title { display: block; color: var(--text); font-size: 16px; font-weight: 500; }
.q-emoji { margin-right: 8px; }
.q-tip { display: block; color: var(--text2); font-size: 14px; margin-top: 4px; }
.q-grid { grid-template-columns: repeat(4, 1fr) !important; margin-bottom: 44px; }
.q-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.q-card img { width: 100%; height: auto; border-radius: var(--r-md); }
.q-card h3 { font-size: 16px !important; margin: 0 !important; }
.q-card .tag { margin-bottom: 4px; }
.content-main .q-grid + h2, .content-main h2 + .q-grid { margin-top: 18px; }
@media (max-width: 900px) {
  .q-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .q-related { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
  .q-media { grid-template-columns: 1fr; }
  .q-pin { max-width: 320px; }
}