.mq-bcrp-samples { background:var(--color-surface-muted); border-bottom:1px solid var(--color-border); scroll-margin-top:2rem; }
.mq-bcrp-samples__heading { max-width:780px; margin-bottom:2rem; }
.mq-bcrp-samples__heading h2 { font-size:clamp(2.1rem,4vw,3.5rem); line-height:1.1; }
.mq-bcrp-samples__heading > p:last-child { color:var(--color-text-soft); }
.mq-source-carousel { border:1px solid var(--color-border); background:var(--color-canvas); padding:clamp(1rem,3vw,2rem); }
.mq-source-carousel:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.mq-source-slide { margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.mq-source-slide[hidden],.mq-source-navigation[hidden] { display:none; }
.mq-source-slide__image { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; min-width:0; padding:1rem; background:var(--color-surface); border:1px solid var(--color-border); text-decoration:none; }
.mq-source-slide__image img { display:block; width:100%; height:clamp(280px,32vw,420px); object-fit:contain; }
.mq-source-slide__image span { color:var(--color-heading); font-size:.8rem; }
.mq-source-slide__image:hover span { text-decoration:underline; }
.mq-source-slide__caption { min-width:0; }
.mq-source-slide__caption h3 { font-size:clamp(1.8rem,3vw,2.65rem); line-height:1.12; margin-block:.8rem 1.2rem; }
.mq-source-slide__note { color:var(--color-text-soft); font-size:.85rem; border-left:2px solid var(--color-accent); padding-left:1rem; margin-top:1.5rem; }
.mq-source-navigation { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--color-border); }
.mq-source-counter { margin:0; color:var(--color-text-soft); font-size:.85rem; text-align:center; }
.mq-source-control { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.55rem .9rem; background:transparent; color:inherit; border:1px solid currentColor; border-radius:3px; font:inherit; font-size:.82rem; text-decoration:none; cursor:pointer; }
.mq-source-control:disabled { opacity:.4; cursor:default; }
.mq-source-control:focus-visible,.mq-source-slide__image:focus-visible,.mq-source-thumb:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.mq-source-thumbnails { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-top:1.25rem; max-width:490px; }
.mq-source-thumb { position:relative; display:block; border:1px solid var(--color-border); padding:.5rem; background:var(--color-surface); text-decoration:none; }
.mq-source-thumb[aria-current] { border:2px solid var(--color-accent); padding:calc(.5rem - 1px); box-shadow:0 0 0 1px var(--color-accent); }
.mq-source-thumb img { display:block; width:100%; height:90px; object-fit:contain; }
.mq-source-thumb span { position:absolute; right:5px; bottom:5px; padding:.1rem .4rem; background:var(--color-hero); color:var(--color-hero-text); font-size:.65rem; }
.mq-source-hint { font-size:.78rem; color:var(--color-text-soft); margin:1rem 0 0; }
.mq-source-dialog { width:min(1240px,calc(100vw - 2rem)); max-width:none; max-height:calc(100dvh - 2rem); margin:auto; padding:0; border:1px solid var(--color-border-dark); background:var(--color-hero); color:var(--color-hero-text); overflow:hidden; }
.mq-source-dialog[open] { display:flex; flex-direction:column; }
.mq-source-dialog::backdrop { background:rgb(0 0 0 / .85); }
.mq-source-dialog__header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border-bottom:1px solid var(--color-border-dark); }
.mq-source-dialog__header h2 { color:inherit; font-size:clamp(1.15rem,2vw,1.7rem); margin:0; line-height:1.2; }
.mq-source-dialog__header button { flex-shrink:0; }
.mq-source-dialog__canvas { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:1rem; text-align:center; }
.mq-source-dialog__canvas img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 230px); margin:auto; }
.mq-source-dialog__canvas.is-zoomed { text-align:left; }
.mq-source-dialog__canvas.is-zoomed img { max-width:none; max-height:none; margin:0; }
.mq-source-dialog__footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid var(--color-border-dark); padding:1rem; }
.mq-source-dialog__arrows,.mq-source-dialog__tools { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
.mq-source-dialog__arrows > span { font-size:.8rem; white-space:nowrap; }
@media(max-width:700px) { .mq-source-slide { grid-template-columns:minmax(0,1fr); gap:1.5rem; } .mq-source-slide__image img { height:330px; } .mq-source-thumbnails { max-width:none; } .mq-source-thumb img { height:66px; } .mq-source-dialog { width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem); } .mq-source-dialog__footer { gap:.75rem; } .mq-source-dialog__arrows,.mq-source-dialog__tools { width:100%; } .mq-source-dialog__canvas img { max-height:calc(100dvh - 300px); } }
@media(max-width:380px) { .mq-source-navigation .mq-source-counter { order:3; width:100%; } .mq-source-thumb img { height:55px; } .mq-source-dialog__header { gap:.5rem; padding:.7rem; } .mq-source-dialog__footer { padding:.7rem; } }