/* The preserved guide geometry uses the active semantic palette. */
.reference-page {
 --ground:var(--canvas); --surface-hi:var(--subtle); --soft:var(--muted);
 --gold:var(--accent); --gold-hover:var(--accent-hover); --cool:var(--muted);
 --sans:Inter,"Segoe UI",Arial,sans-serif; --shell:1240px;
 --line-strong:var(--line); --section-a:var(--canvas); --section-b:var(--subtle);
 --table-surface:var(--surface); --table-heading:var(--subtle); --table-rule:var(--line);
 --bg-primary:var(--canvas); --bg-secondary:var(--surface); --bg-tertiary:var(--subtle);
 --bg-card:var(--surface); --bg-card-hover:var(--subtle);
 --text-primary:var(--ink); --text-secondary:var(--muted); --text-muted:var(--muted); --text-body:var(--muted);
 --accent-gold:var(--accent); --accent-gold-light:var(--accent-hover); --accent-blue:#447995; --accent-blue-light:#447995;
 --border-color:var(--line); --border-light:var(--line);
}
[data-theme=dark] .reference-page {--accent-blue:#9bbdcd;--accent-blue-light:#9bbdcd}
.reference-page .shell {width:calc(100% - 96px);max-width:var(--content);margin-inline:auto}
.reference-page #main-content {padding-top:0;background:var(--canvas)}
.reference-page #main-content > :is(section,.doc-hero,.specs-hero) {border:0;background:var(--canvas)}
.reference-page #main-content > section:nth-of-type(even) {background:var(--subtle)}
.reference-page #main-content > :is(.doc-hero,.specs-hero,.support-hero,.blog-hero,.dac-hero) {padding-block:52px;margin:0}
.reference-page #main-content h1 {font-size:clamp(36px,4.1vw,58px);line-height:1.12;letter-spacing:-.04em;max-width:22ch}
.reference-page #main-content h2 {font-size:clamp(27px,3vw,40px);line-height:1.18}
.reference-page #main-content :is(h3,h4) {line-height:1.3}
.reference-page #main-content p {line-height:1.7}
.reference-page #main-content :is(.doc-hero,.specs-hero,.support-hero) p {max-width:68ch}
.reference-page #main-content :is(.feature-card,.sidebar-card,.callout-card,.faq-card,.callout-info,.deep-dive-card,.blog-conclusion,.blog-toc) {background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--shadow)}
.reference-page #main-content :is(.guide-group,.doc-content,.doc-layout,.requirements-main,.support-band) {border:0}
.reference-page #main-content :is(.eyebrow,.section-kicker,.gold,.accent-text) {color:var(--accent)}
.reference-page #main-content hr {height:0;border:0;margin-block:28px}
.reference-page #main-content :is(.button,.tier-btn,.download-btn,.btn-primary) {border-radius:10px;background:var(--accent);color:var(--on-accent);box-shadow:none;font:600 14px/1.4 var(--sans);padding:12px 18px;text-decoration:none;min-height:44px}
.reference-page #main-content :is(.button-ghost,.button-outline,.btn-secondary) {background:transparent;color:var(--ink);border:1px solid var(--line)}
.reference-page #main-content .text-link {color:var(--accent);font-size:15px}
.reference-page #main-content table {width:100%;background:var(--surface);border-radius:12px;table-layout:auto;color:var(--ink)}
.reference-page #main-content table :is(th,td) {background:transparent;color:var(--ink);border-color:var(--line);font-size:14px}
.reference-page #main-content table thead th {background:var(--subtle)}
.reference-page #main-content table th:first-child {width:auto}
.reference-page #main-content .tier-btn {white-space:nowrap}
.reference-page #main-content :is(.guide-art,.support-zaphod) img {max-width:290px}
.reference-page #main-content figure {max-width:100%}
/* The interactive guide scales the whole screenshot beyond its crop frame.
   Preserve that geometry so its controls and highlights stay aligned. */
.help-page #shot-frame img {max-width:none}
.reference-page #main-content figcaption {font-size:13px;color:var(--muted)}
.reference-page :is(.doc-sidebar,.pggb-sidebar) {top:100px}
.reference-page #main-content details:not(.expand-card) {background:var(--surface)}
.reference-page #main-content .blog-section-band:nth-child(even) {background:var(--subtle)}
.reference-page .site-header .brand {font-family:Inter,"Segoe UI",sans-serif}
.reference-page .site-header .button {min-width:0}
.reference-page footer h2 {font-size:14px}
.reference-page .theme-controls {justify-content:flex-start}
.reference-page .reading-progress {background:var(--accent)}
.reference-page .prose :is(.image-small,.image-med-sml) {margin-inline:auto}
.reference-page :is(pre,code) {background:var(--subtle);color:var(--ink)}
.reference-page #main-content :is(.btn,button,input,select) {font-family:var(--sans)}
@media(max-width:1050px){.reference-page .shell{width:calc(100% - 64px)}}
@media(max-width:760px){
 .reference-page .shell{width:calc(100% - 40px)}
 .reference-page #main-content > :is(.doc-hero,.specs-hero,.support-hero,.blog-hero,.dac-hero){padding-block:34px}
 .reference-page #main-content h1{font-size:36px}
 .reference-page #main-content h2{font-size:29px}
 .reference-page #main-content :is(.table-wrap,.table-scroll,.table-responsive){overflow:auto;max-width:100%}
 .reference-page #main-content :is(.guide-art,.support-zaphod) img{max-width:220px}
}
.reference-page{--blog-a:var(--canvas);--blog-b:var(--subtle);--blog-card:var(--surface)}
.reference-page #main-content .blog-index-band{background:var(--subtle)}
.reference-page #main-content .blog-index-band:nth-child(even){background:var(--canvas)}
[data-theme=light] .reference-page #main-content :is(.guide-art,.support-zaphod) img{mix-blend-mode:multiply}
.specifications-page #main-content .guide-art img{mix-blend-mode:normal;filter:none}

/* Retain legacy content, replace low-contrast presentation with active tokens. */
:root[data-theme=light] .reference-page{--accent-blue:#315d73;--accent-blue-light:#315d73}
.reference-page #main-content :is(.btn-blue,.support-v9-button){background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
:root[data-theme=light] .reference-page #main-content :is(input:not([type=checkbox]):not([type=radio]),select,.button-ghost,.button-outline,.btn-secondary){border-color:var(--control-line);background:var(--surface);color:var(--ink)}
.reference-page #main-content font[color="red"]{color:var(--error)}
.reference-page #main-content :is(font[color="orange"],font[color="goldenrod"]){color:var(--accent)}
.reference-page #main-content :is(font[color="aqua"],font[color="cyan"]){color:var(--ink)}
.reference-page #main-content :is(p,h5)[style*="opacity"]{opacity:1!important}
:root[data-theme=light] .reference-page #main-content .buy-option{background:var(--surface);border-color:var(--control-line)}
:root[data-theme=light] .reference-page #main-content .buy-option:has(:checked){background:var(--accent-soft);border-color:var(--accent)}

/* Reference content, active charcoal/ivory surfaces. Real UI captures stay intact. */
.reference-page #main-content :is(.dac-principle,.v9-welcome,.guide-keypoints,.support-primer,.callout-warning,.callout-note,.callout-success){background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.reference-page #main-content .dac-principle :is(p,li,dd){color:var(--muted)}
.reference-page #main-content .dac-principle :is(h2,h3,strong,dt){color:var(--ink)}
.reference-page #main-content :is(.v9-cards,.dac-benefits) .beta-badge{display:inline-flex;vertical-align:middle;position:static;width:auto;height:auto;min-height:0;padding:3px 6px;margin:0 0 0 5px;border:0;border-radius:5px;background:var(--accent-soft);color:var(--accent);font:600 10px/1.3 var(--sans);letter-spacing:.03em;box-shadow:none}
.reference-page #main-content .v7-upgrade-action{white-space:nowrap;min-height:38px;font-size:13px;padding:9px 12px}
.reference-page #main-content .v7-upgrade-table{border-collapse:separate;border-spacing:0;overflow:hidden}
.reference-page #main-content .v7-upgrade-table :is(th,td){padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.reference-page #main-content .v7-upgrade-table tbody tr:last-child td{border-bottom:0}
@media(max-width:700px){
 .reference-page #main-content .v7-upgrade-table{background:transparent;box-shadow:none}
 .reference-page #main-content .v7-upgrade-table thead{display:none}
 .reference-page #main-content .v7-upgrade-table tbody{display:grid;gap:16px}
 .reference-page #main-content .v7-upgrade-table tr{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:12px;padding:8px;border:1px solid var(--line)}
 .reference-page #main-content .v7-upgrade-table td{padding:10px;border:0;min-width:0;align-self:center}
 .reference-page #main-content .v7-upgrade-table td[data-label]:before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
 .reference-page #main-content .v7-upgrade-action{white-space:normal;min-height:42px;font-size:12px;padding:8px 10px}
}
:is(.guide-plus-page,.guide-live-page,.help-page) #main-content .guide-art img{mix-blend-mode:normal;filter:none;max-width:275px}
:is(.guide-plus-page,.guide-live-page,.help-page) #main-content :is(.callout,.callout-info,.callout-warning,.callout-note,.callout-success,.doc-search,.guide-nav-card,.guide-card){background:var(--surface);color:var(--ink);border-color:var(--line)}
:is(.guide-plus-page,.guide-live-page,.help-page) #main-content :is(.prose,.doc-content){color:var(--ink)}
.reference-page #main-content .specs-precision-visual{height:auto;box-shadow:none;border-radius:18px}

/* Requirements and activation share the current card, control and page surfaces. */
.requirements-page #main-content :is(.requirement-card,.requirement-callout,.requirement-details){background:var(--req-card-surface,var(--surface));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.requirements-page #main-content .requirements-laptop,.requirements-page #main-content .requirements-laptop .device-scene{background:transparent;border:0;box-shadow:none;mask-image:none}
.requirements-page #main-content .requirements-laptop .device-scene:before,.requirements-page #main-content .requirements-laptop .device-scene:after{display:none}
.requirements-page #main-content .requirements-laptop{width:100%;max-width:510px;justify-self:center}
.requirements-page #main-content .requirements-laptop .requirements-monitor-scene{aspect-ratio:3/2;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.requirements-page #main-content .requirements-monitor-scene>.device-frame{position:static;object-fit:contain;transform:scaleX(-1)}
.requirements-page #main-content .requirements-intro{padding-top:18px}
.install-activate-page #main-content .document-section{background:var(--section-alt)}
.install-activate-page #main-content :is(.sidebar-card,.callout-warning,.callout-info,.callout-note){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}
.install-activate-page #main-content .sidebar-sticky{top:150px}
.install-activate-page #main-content .doc-search{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.install-activate-page #main-content .doc-search input{border:1px solid var(--control-line);border-radius:9px;background:var(--canvas);color:var(--ink)}
.install-activate-page #main-content .doc-search button{border:1px solid var(--control-line);border-radius:9px;background:var(--surface);color:var(--ink)}
.install-activate-page #main-content .download-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.install-activate-page #main-content .btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 17px;border:1px solid var(--control-line);border-radius:10px;text-decoration:none;font-size:14px;line-height:1.4}
.install-activate-page #main-content :is(.btn-primary,.btn-blue){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.install-activate-page #main-content .btn-secondary{background:var(--surface);color:var(--ink)}
.install-activate-page #main-content .btn:hover{background:var(--subtle);color:var(--ink);border-color:var(--accent)}
.install-activate-page #main-content .prose h2{border-color:var(--line);color:var(--ink)}
.install-activate-page #main-content .activation-dialog-image{position:relative;display:block;width:min(480px,100%);border:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:transparent}
.install-activate-page #main-content .activation-dialog-image>img{position:absolute;display:block;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:fill}

/* Roon captures retain their full window; round only the outer corners. */
#roon-device-setup > a{display:block;overflow:hidden;border-radius:clamp(6px,1vw,12px);border:0;outline:0;box-shadow:0 0 0 .5px rgba(255,255,255,.2),0 10px 28px rgba(0,0,0,.38);background:transparent}
#roon-device-setup > a img{border:0;outline:0;box-shadow:none;border-radius:inherit}
[data-theme=light] #roon-device-setup > a{box-shadow:0 0 0 .5px rgba(57,49,36,.16),0 10px 26px rgba(47,39,27,.2)}
#roon-device-setup figcaption{margin-top:1rem}

/* Hide the captured macOS rim while preserving the image layout. */
#roon-device-setup > a img{transform:scaleY(1.014);transform-origin:center;border-radius:0}