
/* October 2026 visual refinement. Content, tools and tutorial order are unchanged. */
:root{--v-paper:#fafbf6;--v-tint:#e8eee2;--v-accent:#173f31;--v-strong:#173f31;--v-rule:color-mix(in srgb,#173f31 22%,white)}
@media(prefers-color-scheme:dark){:root{--v-paper:#1c2428;--v-tint:#253238;--v-accent:#a9c5cb;--v-strong:#314b54;--v-rule:#4c5c62}}
body.vr-refined main p{overflow-wrap:break-word}body.vr-refined main a:focus-visible{outline:3px solid var(--v-accent);outline-offset:4px}
body.vr-refined [class$="-catalog-item"]{min-width:0}body.vr-refined [class$="-catalog-item"] img{height:auto}
body.vr-refined .vr-official-logo{display:block;width:100px;height:auto;max-width:100%;object-fit:contain}
body.vr-refined .vr-brand-mark{display:inline-flex;align-items:center;flex:none;background:#fff;padding:8px 10px;border-radius:2px}
body.vr-refined footer .vr-footer-brand{display:inline-flex;align-items:center;margin:0 0 18px}
body.vr-refined [class$="-guide-step"]{scroll-margin-top:28px}

.obz-hero{padding-block:52px!important}.obz-hero>.obz-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:0 64px}.obz-hero h1{grid-column:1;grid-row:1/5;font-size:clamp(38px,4.4vw,64px);max-width:24ch;line-height:1.04}.obz-hero .obz-lede,.obz-search,.obz-strip,.obz-status{grid-column:2}.obz-search{margin-top:22px;border-radius:0}.obz-catalog-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:24px 16px}.obz-catalog-heading{align-items:center}.obz-catalog-item span{font-family:var(--obz-head);font-size:21px}.obz-catalog-item img{background:var(--v-paper);border-radius:0}.obz-overview{background:var(--v-tint)}.obz-phase{border:0;background:var(--v-strong);padding:20px 26px;color:white}.obz-phase span,.obz-phase p{color:white}.obz-guide-step{padding-block:34px}.obz-guide-index{grid-template-columns:repeat(3,1fr);gap:8px 34px}.obz-guide-index a{border-bottom:1px solid var(--v-rule);text-decoration:none}.obz-service-note{border-left:0;padding:18px 0;background:transparent}

@media(max-width:1100px){
.obz-catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.swq-reading .category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.obz-hero h1{font-size:clamp(31px,4vw,46px)}
.byx-hero-grid{grid-template-columns:1fr 270px;gap:30px}
}
@media(max-width:800px){
.obz-hero>.obz-wrap,.lbq-hero-in,.chq-hero-in,.swq-glass{display:block}
.obz-hero h1{max-width:30ch;margin-bottom:22px;font-size:34px}
.prl-hero .prl-cta{display:block}.ccx-hero h1{padding-left:20px}.ccx-hero .ccx-lede,.ccx-search,.ccx-heronote,.ccx-strip{margin-left:0}
.byx-hero-grid{grid-template-columns:1fr}.byx-specimen{border-left:0;border-top:1px solid var(--v-rule);padding:22px 0;max-width:650px}
.obz-hero{padding-block:34px!important}.mdq-hero>.mdq-wrap{margin-inline:20px;padding-left:20px}
}
@media(max-width:600px){
.obz-catalog-grid,.alq-reading .category-grid,.byx-reading .category-grid,.swq-reading .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.obz-catalog-item{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;background:transparent}
.obz-catalog-item img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:0}
.obz-catalog-item span{font-size:16px;min-height:0;padding:0;text-align:left;border:0}
.obz-hero h1{font-size:32px;line-height:1.13;max-width:none}.obz-hero .obz-lede{font-size:18px;line-height:1.6}
.obz-catalog-heading{display:block;text-align:left}.obz-catalog-heading h2{margin-bottom:16px;font-size:27px}.obz-catalog-heading p{margin:0}
.alq-reading .category-grid a,.byx-reading .category-grid a{display:block;border:0;padding:0}.alq-reading .category-grid img,.byx-reading .category-grid img{width:100%;height:auto;aspect-ratio:1}.alq-reading .category-grid strong,.byx-reading .category-grid strong{font-size:16px;padding-top:12px}
.obz-guide-index{display:block;padding:18px 0}.obz-guide-index a{display:block;min-height:44px;padding:12px 8px}
.kps-hero,.srq-hero{text-align:left}.kps-status{padding:0}.kps-strip,.srq-striscia{justify-content:flex-start}
.vrp-hero .vrp-strip{justify-content:flex-start}.vrp-hero{text-align:left}.vrp-hero .vrp-search{padding:14px}
.lbq-guide-step .lbq-step-copy{gap:14px}.lbq-step-number{width:30px;height:34px;font-size:17px}
.obz-phase,.ccx-phase,.chq-phase{padding:18px}.obz-phase p,.ccx-phase p,.chq-phase p{font-size:22px}.srq-phase span,.vrp-phase span,.prl-phase span{font-size:40px}
.byx-hero h1,.swq-glass h1,.alq-hero h1{font-size:34px}.mdq-hero>.mdq-wrap{margin-inline:20px;border-width:6px;padding-left:16px;padding-right:0}
}

/* Compact navigation on phones; every original destination remains available. */
.vr-menu-toggle{display:none}
@media(max-width:650px){
 body.vr-refined>header{position:relative;min-height:84px}
 body.vr-refined>header [class$="-brand"],body.vr-refined>header [class$="-logo"]{max-width:calc(100% - 84px);white-space:normal;min-width:0}
 body.vr-refined>header [class$="-bname"]{white-space:normal}
 .vr-js .vr-menu-toggle{display:block;position:absolute;right:18px;top:18px;min-width:62px;min-height:44px;padding:8px 12px;background:var(--v-paper);color:var(--v-accent);border:1px solid var(--v-rule);border-radius:3px;font:600 15px/1.3 system-ui,sans-serif;cursor:pointer;z-index:5}
 .vr-js body.vr-refined>header nav[data-vr-navigation]{display:none!important}
 .vr-js body.vr-refined>header nav[data-vr-navigation].vr-menu-open{display:block!important;width:100%;overflow:visible;max-height:none;margin:12px 0 0;padding:12px 0;border-top:1px solid var(--v-rule)}
 body.vr-refined>header nav[data-vr-navigation] ul{display:flex;flex-wrap:wrap;gap:4px 10px;width:100%;overflow:visible}
 body.vr-refined>header nav[data-vr-navigation] li{min-width:0}
 body.vr-refined>header nav[data-vr-navigation] a{min-height:44px;white-space:normal;padding:10px 8px}
 body.vr-refined>header [class$="-topin"]{min-height:84px}
}

@media(min-width:601px) and (max-width:900px){.ccx-catalog-grid,.lbq-catalog-grid,.snc-catalog-grid,.mdq-catalog-grid,.chq-catalog-grid,.alq-reading .category-grid,.byx-reading .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Exact archived official CNFans paths, shown in their original 5207:1024 proportions. */
body.vr-refined .vr-site-brand{min-width:0;flex-shrink:1;gap:12px;text-decoration:none}
body.vr-refined .vr-site-brand>span:not(.vr-brand-mark){white-space:normal}
body.vr-refined .vr-brand-mark{display:inline-flex;flex:none;align-items:center;justify-content:center;background:#fff;padding:8px 10px;border-radius:2px}
body.vr-refined img.vr-official-logo{display:block;width:104px!important;height:20.45px!important;max-width:none;object-fit:fill;flex:none;border:0;border-radius:0;margin:0;padding:0;filter:none;opacity:1}
body.vr-refined footer .vr-footer-mark-wrap{max-width:1180px;margin:0 auto;padding:0 24px 20px}
@media(max-width:650px){
 body.vr-refined>header .vr-site-brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;max-width:calc(100% - 88px);width:auto;min-height:84px;padding-block:12px}
 body.vr-refined>header .vr-site-brand>.vr-brand-mark{padding:5px 7px}
 body.vr-refined>header .vr-site-brand>span:not(.vr-brand-mark){display:block!important;font-size:14px!important;line-height:1.3;white-space:normal}
 body.vr-refined>header .vr-site-brand small{font-size:11px;letter-spacing:0;line-height:1.3}
 body.vr-refined>header .vr-site-brand b{font-size:inherit}
}

/* Preserve light-only designs and repair inherited reading contrast. */
@media(prefers-color-scheme:dark){:root{color-scheme:light;--v-paper:#fafbf6;--v-tint:#e8eee2;--v-accent:#173f31;--v-strong:#173f31;--v-rule:#cbd5ca;--review-panel:#fff;--review-tint:#edf2f1;--review-muted:#49565b;--review-line:#cdd7d5}.obz-guide-kicker,.obz-step-number{color:#173f31}.obz-phase{background:#173f31;color:#fff}.obz-phase span,.obz-phase p{color:#fff}}

.vrp-brand__name b,.vrp-brand__name>span,.obz-brand__name b,.obz-brand__name>span{display:block}@media(max-width:650px){body.vr-refined>header .vrp-brand,body.vr-refined>header .mdq-brand{margin-left:16px}}
