/* Public guides: a reading page with a download card, a closing panel and a list of other guides. */
.qr-guide-main { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 var(--q-16); }
.qr-guide-glow { position: absolute; inset: 0 0 auto; z-index: -1; height: 28rem; pointer-events: none; background: radial-gradient(50% 70% at 15% 0%, rgba(31, 116, 255, 0.14), transparent 70%), radial-gradient(40% 60% at 85% 10%, rgba(18, 194, 255, 0.1), transparent 70%); }
.qr-guide-progress { position: fixed; top: var(--q-header-h); left: 0; right: 0; z-index: 90; height: 3px; background: var(--q-grad-vivid); transform: scaleX(var(--mk-p, 0)); transform-origin: left; pointer-events: none; }

/* One guide */
.qr-guide-layout { display: grid; grid-template-columns: minmax(0, 52rem) 16rem; justify-content: center; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.qr-guide-article { min-width: 0; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border: 1px solid var(--q-line); border-radius: var(--q-r-xl); background: var(--q-surface); box-shadow: var(--q-shadow-card); }
.qr-guide-crumbs a { color: var(--q-accent-text); font-size: var(--q-fs-sm); font-weight: 600; text-decoration: none; }
.qr-guide-crumbs a::before { content: "\2190\00a0"; }
.qr-guide-article h1 { margin-top: var(--q-3); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
.qr-guide-lead { margin-top: var(--q-4); color: var(--q-text-2); font-size: 1.125rem; line-height: var(--q-lh-relaxed); }
.qr-guide-updated { margin: var(--q-4) 0 var(--q-6); color: var(--q-text-3); font-size: var(--q-fs-sm); }
.qr-guide-section { padding: var(--q-6) 0; border-top: 1px solid var(--q-line); }
.qr-guide-section h2 { margin-bottom: var(--q-3); font-size: var(--q-fs-lg); letter-spacing: -0.02em; }
.qr-guide-section p, .qr-guide-section li { color: var(--q-text-2); line-height: var(--q-lh-relaxed); }
.qr-guide-section > * + * { margin-top: var(--q-3); }
.qr-guide-section :is(ul, ol) { display: grid; gap: var(--q-2); padding-left: 1.25rem; }
.qr-guide-section li::marker { color: var(--q-accent); font-weight: 700; }
.qr-guide-note { padding: var(--q-3) var(--q-4); border-left: 3px solid var(--q-accent); border-radius: var(--q-r); background: var(--q-accent-soft); }
.qr-guide-copy { position: relative; }
.qr-guide-copy pre { overflow-x: auto; padding: var(--q-4); border: 1px solid var(--q-line); border-radius: var(--q-r-lg); background: var(--q-surface-2); color: var(--q-text); font-family: inherit; font-size: var(--q-fs-sm); line-height: 1.6; white-space: pre-wrap; }
.qr-guide-copy [data-qr-copy] { position: absolute; top: var(--q-2); right: var(--q-2); }

.qr-guide-download { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--q-4); align-items: center; margin-bottom: var(--q-6); padding: var(--q-4) var(--q-5); border: 1px solid var(--q-line); border-radius: var(--q-r-lg); background: var(--q-surface-2); }
.qr-guide-download__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--q-r); background: var(--q-match-bg); color: var(--q-match); }
.qr-guide-download strong { display: block; }
.qr-guide-download span { color: var(--q-text-3); font-size: var(--q-fs-sm); }

.qr-guide-aside { position: sticky; top: calc(var(--q-header-h) + var(--q-6)); padding: var(--q-5); border: 1px solid var(--q-line); border-radius: var(--q-r-xl); background: var(--q-glass); box-shadow: var(--q-shadow-card); font-size: var(--q-fs-sm); }
.qr-guide-aside h2 { margin-bottom: var(--q-3); color: var(--q-text-3); font-size: var(--q-fs-xs); font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; }
.qr-guide-aside ul { display: grid; gap: var(--q-2); margin: 0; padding: 0; list-style: none; }
.qr-guide-aside a { display: block; padding: var(--q-2) var(--q-3); border-radius: var(--q-r); color: var(--q-text-2); line-height: 1.45; text-decoration: none; }
.qr-guide-aside a:hover { background: var(--q-surface-3); color: var(--q-text); }

/* Index */
.qr-guide-index__head { max-width: 44rem; margin-bottom: var(--q-8); }
.qr-guide-index__head h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
.qr-guide-index__head p { margin-top: var(--q-3); color: var(--q-text-2); font-size: 1.125rem; }
.qr-guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--q-4); margin: 0 0 var(--q-12); padding: 0; list-style: none; }
.qr-guide-card { position: relative; display: grid; align-content: start; gap: var(--q-3); padding: var(--q-6); border: 1px solid var(--q-line); border-radius: var(--q-r-xl); background: var(--q-surface); box-shadow: var(--q-shadow-card); transition: border-color var(--q-dur-2), transform var(--q-dur-2); }
.qr-guide-card:hover { border-color: var(--q-accent); transform: translateY(-2px); }
.qr-guide-card h2 { font-size: var(--q-fs-lg); letter-spacing: -0.02em; line-height: 1.3; }
.qr-guide-card h2 a { color: var(--q-text); text-decoration: none; }
.qr-guide-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.qr-guide-card p { color: var(--q-text-2); line-height: var(--q-lh-relaxed); }
.qr-guide-card .qr-tag { justify-self: start; }

/* Closing panel */
.qr-guide-cta { display: grid; gap: var(--q-3); margin-top: var(--q-8); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--q-r-xl); background: radial-gradient(90% 120% at 50% -20%, #2461ff 0%, #0c2a78 45%, #060b1d 100%); color: #fff; }
.qr-guide-cta h2 { color: #fff; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.03em; }
.qr-guide-cta p { max-width: 40rem; color: #c8d6f7; line-height: var(--q-lh-relaxed); }
.qr-guide-cta__actions { display: flex; flex-wrap: wrap; gap: var(--q-3); margin-top: var(--q-2); }
.qr-guide-cta .qr-btn--primary { background: #fff; color: #0a1f52; }
.qr-guide-cta__ghost { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #fff; }
.qr-guide-cta__ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

@media (max-width: 63.99rem) {
	.qr-guide-layout { grid-template-columns: 1fr; }
	.qr-guide-aside { position: static; }
}
@media (max-width: 39.99rem) {
	.qr-guide-article { padding: 1.25rem; border-radius: var(--q-r-lg); }
	.qr-guide-download { grid-template-columns: auto minmax(0, 1fr); }
	.qr-guide-download .qr-btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .qr-guide-card { transition: none; } .qr-guide-card:hover { transform: none; } }