/* Mixed combines the dark repair sidebar with light content. */
:root{--page:#f7faf9;--surface:#fff;--surface-soft:#eff6f2;--field:#fff;--control-ring:#3dc9a4;--nav-edge:#071b26;--nav-surface:#19353fe0;--nav-hover:#28584feF;color-scheme:light}
html[data-theme="dark"]{--page:#0d1b23;--surface:#162b34;--surface-soft:#1b353c;--field:#10242d;--ink:#e7f1f0;--muted:#b4c9cb;--accent:#7de0c2;--line:#344d54;--soft:#203e43;--control-ring:#91f1d2;color-scheme:dark}
body{background:var(--page);color:var(--ink)}
.shortcut,.service-grid article,.systems-panel,.pricing-panel,.request-panel,.review-form,.review-card,.reviews-empty,#diagnostic-dialog,.antivirus-panel{background:var(--surface);border-color:var(--line)}
.about-panel,.quote-note,.contact-status,.diagnostic-note{background:var(--surface-soft);border-color:var(--line)}
.about-details,.about-details>div,.request-note,.os-tabs,#diagnostic-results div{border-color:var(--line)}
input,select,textarea{background:var(--field);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--muted)}
html[data-theme="dark"] .system-visual{background:#1b353e;border-color:#35545a}
html[data-theme="dark"] .badge{background:#203e3b;color:#acead8;border-color:#3b6157}
html[data-theme="dark"] .monitor-stand{background:#5e8588}
html[data-theme="dark"] .about-portrait img{border-color:var(--line)}
html[data-theme="dark"] .os-tabs button:not([aria-selected="true"]),html[data-theme="dark"] .button.secondary{background:#203941;color:var(--ink);border-color:#536f75;border-top-color:#719096;text-shadow:none;--button-edge:#071921;--button-shadow:#0006}
html[data-theme="dark"] .rating-choice>span[aria-hidden]{background:#203941;color:#adc5c6;border-color:#536f75;border-top-color:#719096;box-shadow:none}
html[data-theme="dark"] .rating-choice.selected>span[aria-hidden],html[data-theme="dark"] .rating-choice:hover>span[aria-hidden]{color:#b9ffe7;background:#244a43;border-color:#75c4aa}
html[data-theme="light"] aside{--nav-edge:#9db8b0;--nav-surface:#ffffffdf;--nav-hover:#e5f5ed;color:#23454c;background-color:#e5efea;background-image:linear-gradient(180deg,#f5faf8f5,#e6f1e9dd 50%,#eef6f0f5);border-right:1px solid #c6d9d0}
html[data-theme="light"] .brand,html[data-theme="light"] .brand-name,html[data-theme="light"] .aside-bottom strong{color:#173b40}
html[data-theme="light"] .brand-location,html[data-theme="light"] .sidebar-cta{color:#126a59}
html[data-theme="light"] aside>.eyebrow,html[data-theme="light"] .aside-bottom p,html[data-theme="light"] .aside-bottom small{color:#42645f}
html[data-theme="light"] .emblem{color:#157661;border-color:#a0c7b7;background:#fff}
html[data-theme="light"] .aside-bottom small{border-color:#bcd1c6}
html[data-theme="light"] .sidebar-repair-scene{filter:saturate(.7);mix-blend-mode:multiply}
html[data-theme="light"] #toggle-repair-animation{color:#214c42;background:#dfede4;border-color:#b3cdbc;--button-edge:#91b2a0;text-shadow:none}
.header-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.theme-control{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted);font-size:11px}
.theme-control select{margin:0;width:96px;padding:8px 10px;font-size:12px;font-weight:600;border:1px solid var(--line);border-bottom-width:1px;border-radius:8px;cursor:pointer}
.theme-control select:hover,.theme-control select:focus-visible{border-color:var(--accent)}
/* Flat controls retain clear pointer and keyboard selection states. */
.button,button:not(.diagnostic-trigger){border-width:1px;box-shadow:none;text-shadow:none;transform:none;transition:background .15s,border-color .15s,filter .15s}
.button:focus-visible,button:not(.diagnostic-trigger):focus-visible{outline:3px solid var(--control-ring);outline-offset:3px;box-shadow:none}
@media(hover:hover){.button:hover,button:not(.diagnostic-trigger):not(:disabled):hover{filter:brightness(1.05);transform:none;outline:2px solid var(--control-ring);outline-offset:2px;box-shadow:none}}
.button:active,button:not(.diagnostic-trigger):not(:disabled):active{transform:none;filter:brightness(.95);box-shadow:none}
.nav{background:var(--nav-surface);border:1px solid #7eaca62b;border-top-color:#ffffff23;box-shadow:none;color:#deeeeb}
.nav:hover,.nav:focus-visible{background:var(--nav-hover);border-color:#84d6bc;color:#c6ffed;outline:2px solid #7bd8b76b;outline-offset:2px}
.nav.active{background:#29564d;border-color:#8addbf;color:#e1fff3;box-shadow:inset 3px 0 0 #a1f4cd}
html[data-theme="light"] .nav{color:#234d45;border-color:#bfd6c9;border-top-color:#fff}
html[data-theme="light"] .nav.active{background:#d3eddf;border-color:#5caa8d;color:#104633;box-shadow:inset 3px 0 0 #147d70}
html[data-theme="light"] .nav:hover{color:#104633;background:#e2f5e8}
.shortcut:hover,.shortcut:focus-visible{border-color:var(--accent);outline:2px solid var(--control-ring);outline-offset:3px;box-shadow:none;background:var(--surface-soft)}
.rating-choice input:checked+span{outline:2px solid var(--accent);outline-offset:1px}
#toggle-repair-animation{margin-bottom:6px}
@media(max-width:850px){header{flex-wrap:wrap;gap:17px}.header-actions{gap:12px}.nav{background:var(--nav-surface)}}
@media(max-width:450px){.header-actions{width:100%;justify-content:space-between}.theme-control select{width:101px}.header-actions .button{font-size:12px}header .eyebrow{max-width:none}.theme-control{font-size:12px}}
@media(prefers-reduced-motion:reduce){.button,button:not(.diagnostic-trigger){transition:none}}

html[data-theme="light"] aside::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:#eef6efd9}
html[data-theme] .rating-choice>span[aria-hidden]{box-shadow:none;transform:none}
html[data-theme] .rating-choice:hover>span[aria-hidden]{outline:2px solid var(--control-ring);outline-offset:2px;transform:none;box-shadow:none}
html[data-theme] .rating-choice:active>span[aria-hidden]{transform:none;box-shadow:none}
#toggle-repair-animation,#toggle-repair-animation:hover,#toggle-repair-animation:focus-visible,#toggle-repair-animation:active{box-shadow:none;transform:none}
/* Keep moving slide edges inside the sidebar while allowing vertical menu scrolling. */
aside{overflow-x:hidden}

/* The supplied technology photo decorates the content area in Dark mode only. */
html[data-theme="dark"] main{position:relative;isolation:isolate}
html[data-theme="dark"] main::before{content:"";position:fixed;top:0;right:0;bottom:0;left:250px;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#0d1b23 0%,#0d1b23ef 25%,#0d1b2370 60%,#0d1b2338 100%),linear-gradient(0deg,#0d1b2390,#0d1b2320),url('assets/dark-mode-tech-background.jpg');background-size:cover;background-position:center,right center,right center;background-repeat:no-repeat}
@media(max-width:1180px){html[data-theme="dark"] main::before{left:220px}}
@media(max-width:850px){html[data-theme="dark"] main::before{left:0}}
@media(max-width:650px){html[data-theme="dark"] main::before{background-image:linear-gradient(90deg,#0d1b23ed,#0d1b23b0),url('assets/dark-mode-tech-background.jpg');background-position:center,right center}}

/* Pan and zoom the photo inside fixed bounds, keeping page edges stationary. */
html[data-theme="dark"] main::before{animation:dark-background-drift 10s ease-in-out infinite;animation-play-state:paused}
html[data-theme="dark"][data-motion="playing"] main::before{animation-play-state:running}
@keyframes dark-background-drift{0%,100%{background-size:cover,cover,110% auto;background-position:center,center,100% 50%}50%{background-size:cover,cover,125% auto;background-position:center,center,80% 50%}}
@keyframes dark-background-drift-mobile{0%,100%{background-size:cover,180% auto;background-position:center,100% 50%}50%{background-size:cover,205% auto;background-position:center,80% 50%}}
@media(max-width:650px){html[data-theme="dark"] main::before{animation-name:dark-background-drift-mobile}}

/* The moving card follows the navigation in normal layout flow. */
.sidebar-animation-panel{position:relative;z-index:0;flex-shrink:0;margin-top:22px;padding:10px;border:1px solid #52766f66;border-radius:12px;background:#102730;overflow:hidden;color:#d7e9e3}.sidebar-animation-panel .sidebar-repair-scene{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:360/450;z-index:auto;opacity:1;mask-image:none;overflow:hidden}.sidebar-animation-panel .sidebar-repair-scene img{position:absolute;top:-18%;left:0;width:100%;height:auto;max-width:none;object-fit:contain}.animation-panel-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;padding:7px 0 4px}.animation-panel-controls p{flex-basis:100%;margin:0;font-size:10px;color:#b9d9cd}.animation-panel-controls #toggle-repair-animation{margin:0;font-size:10px;padding:5px 7px}.animation-panel-controls .animation-preview-link{margin:0;font-size:10px;width:auto}.aside-bottom{padding-top:32px}
html[data-theme="light"] .sidebar-animation-panel .sidebar-repair-scene{filter:none;mix-blend-mode:normal}
@media(max-width:850px){.sidebar-animation-panel{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;width:100%;max-width:470px;margin-top:18px}.animation-panel-controls{align-content:center;gap:13px}.animation-panel-controls p{font-size:11px}.animation-panel-controls #toggle-repair-animation{margin:0;font-size:11px}.animation-panel-controls .animation-preview-link{font-size:11px}}

/* A separate copy on a plain surface, without the sidebar or photo background. */
.vga-demo{padding:30px;background:var(--surface);background-image:none;border:1px solid var(--line);border-radius:var(--radius)}.vga-demo-stage{display:grid;place-items:center;background:var(--surface);background-image:none;padding:0 12px}.vga-demo-stage img{display:block;width:100%;max-width:310px;height:auto}.vga-demo-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:22px;margin-top:22px;padding-bottom:6px}@media(max-width:650px){.vga-demo{padding:23px}.vga-demo-stage{padding:0}.vga-demo-controls{gap:20px}}

.repair-step-tabs{display:flex;flex-wrap:wrap;gap:16px;margin:5px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line)}.repair-step-tabs .button[aria-pressed="true"]{color:#fff;background:#147d70;border-color:#55b6a5;--button-edge:#0c5149;text-shadow:none;outline:2px solid var(--control-ring);outline-offset:3px}.repair-step-navigation{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:25px;border-top:1px solid var(--line)}#repair-step-count{font-size:12px;color:var(--muted)}@media(max-width:650px){.repair-step-tabs{gap:16px}.repair-step-tabs .button{font-size:12px;padding:10px 12px}.repair-step-navigation{justify-content:center}.repair-step-navigation .button{flex:1 0 100%;justify-content:center}#repair-step-count{order:-1;flex-basis:100%;text-align:center}}


/* The shared palette colors controls, links, badges and selected states in every theme. */
html[data-color] .button:not(.secondary),html[data-color] button:not(.diagnostic-trigger):not(.secondary):not([role="tab"]){background:var(--button-color);color:#fff;border-color:var(--button-color)}
html[data-color] .button:not(.secondary):hover,html[data-color] button:not(.diagnostic-trigger):not(.secondary):not([role="tab"]):hover{background:var(--button-hover)}
html[data-color] .os-tabs button[aria-selected="true"],html[data-color] .repair-step-tabs .button[aria-pressed="true"]{background:var(--button-color);color:#fff;border-color:var(--button-color)}
html[data-color] .button.secondary:hover{background:var(--palette-soft);border-color:var(--accent)}
html[data-color] .badge,html[data-color] .steps article>span{background:var(--palette-soft);color:var(--accent);border-color:var(--accent)}
html[data-color] .nav.active,html[data-color] .nav:hover,html[data-color] .nav:focus-visible{background:var(--palette-nav);color:var(--palette-light);border-color:var(--palette-light)}
html[data-color] .nav.active{box-shadow:inset 3px 0 0 var(--palette-light)}
html[data-theme="light"][data-color] .nav.active,html[data-theme="light"][data-color] .nav:hover,html[data-theme="light"][data-color] .nav:focus-visible{background:var(--palette-soft);color:var(--palette-deep);border-color:var(--palette-deep);box-shadow:inset 3px 0 0 var(--palette-deep)}
html[data-color] .mint,html[data-color] .brand-location,html[data-color] .sidebar-cta,html[data-color] .emblem{color:var(--palette-light)}
html[data-theme="light"][data-color] .brand-location,html[data-theme="light"][data-color] .sidebar-cta,html[data-theme="light"][data-color] .emblem{color:var(--palette-deep)}
html[data-color] .dot{background:var(--accent)}
html[data-color] aside .dot{background:var(--palette-light)}
html[data-color] .rating-choice.selected>span[aria-hidden],html[data-color] .rating-choice:hover>span[aria-hidden]{background:var(--palette-soft);color:var(--accent);border-color:var(--accent)}
html[data-color] :focus-visible{outline-color:var(--control-ring)}
html[data-color] input[type="checkbox"],html[data-color] input[type="radio"]{accent-color:var(--button-color)}
.header-actions{flex-wrap:wrap;justify-content:flex-end;flex-shrink:1}
.theme-control input[type="color"]{width:40px;height:34px;padding:3px;margin:0;border:1px solid var(--line);border-radius:6px;cursor:pointer}
@media(max-width:650px){.header-actions{justify-content:flex-start;gap:12px 16px}.theme-control{flex-shrink:0}.header-actions .button{margin-left:auto}}

/* Highlight service cards on hover without changing their links or click behavior. */
@media(hover:hover){.service-grid article:hover{border-color:var(--accent);outline:2px solid var(--control-ring);outline-offset:3px}}
.service-grid article:focus-within{border-color:var(--accent);outline:2px solid var(--control-ring);outline-offset:3px}

/* The existing service link covers the card without changing its appearance. */
.service-grid article{position:relative;cursor:pointer}
.service-grid a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}

.windows-checker{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);font-size:13px;line-height:1.7}.windows-checker h3{margin:0 0 10px;font-size:18px}.windows-checker .button{max-width:100%;text-align:center}.windows-checker .form-hint a{text-decoration:underline;text-underline-offset:3px}

/* Match the team section background throughout the assembly panel. */
#assembling-process,#assembling-process .vga-demo-stage{background:var(--surface-soft);background-image:none}

/* Shared restrained 3D treatment for buttons and sidebar menu buttons. */
html[data-theme] :is(button:not(.diagnostic-trigger),a.button,a.nav,#toggle-repair-animation){
 --button-depth-edge:color-mix(in srgb,var(--button-color),#102831 30%);
 border-radius:8px;
 box-shadow:0 3px 0 var(--button-depth-edge),0 5px 9px #10283120,inset 0 1px 0 #ffffff35;
 transform:translateY(0);text-shadow:none;
 transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
@media(hover:hover){html[data-theme] :is(button:not(.diagnostic-trigger),a.button,a.nav,#toggle-repair-animation):not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--button-depth-edge),0 7px 12px #10283126,inset 0 1px 0 #ffffff40}}
html[data-theme] :is(button:not(.diagnostic-trigger),a.button,a.nav,#toggle-repair-animation):not(:disabled):is(:active,.button-depth-pressed){transform:translateY(2px);box-shadow:0 1px 0 var(--button-depth-edge),0 2px 4px #10283120,inset 0 1px 3px #10283120}
html[data-theme] :is(button:not(.diagnostic-trigger),a.button,a.nav,#toggle-repair-animation):focus-visible{outline:3px solid var(--control-ring);outline-offset:5px}
html[data-theme] button:not(.diagnostic-trigger):disabled{transform:none;box-shadow:0 2px 0 var(--button-depth-edge),inset 0 1px #ffffff20;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){html[data-theme] :is(button:not(.diagnostic-trigger),a.button,a.nav,#toggle-repair-animation){transition:none}}

/* Turn the existing sidebar sideways without changing its visual styling. */
html{scroll-padding-top:calc(var(--horizontal-menu-height,180px) + 20px)}
body>aside{position:sticky;inset:auto;top:0;z-index:100;width:100%;height:auto;max-height:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px 30px;padding:20px clamp(20px,4vw,64px);overflow:visible;background-position:center 45%;border-right:0;border-bottom:1px solid var(--line)}
body>aside .brand{grid-column:1;grid-row:1}
body>aside>.eyebrow{grid-column:1;grid-row:2;margin:0;font-size:9px}
body>aside>nav{grid-column:2;grid-row:1 / span 2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
body>aside>nav .nav{flex:0 0 auto;text-align:center;padding:9px 13px}
body>aside .aside-bottom{grid-column:1 / -1;margin:0;padding:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;border-top:1px solid #ffffff26}
body>aside .aside-bottom strong{font-size:12px}
body>aside .aside-bottom p{margin:0;font-size:11px;line-height:1.6}
body>aside .aside-bottom p br{display:none}
body>aside .aside-bottom p br::after{content:" "}
body>aside .aside-bottom small{margin:0;padding:0;border:0;font-size:10px}
body>aside .sidebar-cta{margin-left:auto}
body>main{margin:0 auto;max-width:1540px;width:100%;padding:28px clamp(20px,4vw,64px) 20px}
html[data-theme="dark"] main::before{left:0}
.section{scroll-margin-top:12px}
@media(max-width:1050px){body>aside{gap:12px 22px}body>aside>nav .nav{font-size:12px;padding:8px 11px}body>aside .aside-bottom{gap:6px 16px}}
@media(max-width:850px){
 html{scroll-padding-top:20px}
 body>aside{position:relative;top:auto;grid-template-columns:1fr;gap:14px;padding:20px}
 body>aside .brand{grid-column:1;grid-row:1}
 body>aside>.eyebrow{grid-column:1;grid-row:2}
 body>aside>nav{grid-column:1;grid-row:3;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:10px}
 body>aside .aside-bottom{grid-column:1;gap:8px 16px}
 body>aside .sidebar-cta{margin-left:0}
 body>main{padding:24px 20px 20px}
}

/* Plain backgrounds in the Dark theme. */
html[data-theme="dark"] main::before{display:none}
html[data-theme="dark"] aside{background-image:none}

/* A subtle generated technology background behind the Dark theme content. */
.dynamic-tech-background{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html[data-theme="dark"] .dynamic-tech-background{display:block}
body>main{position:relative;z-index:1}
html[data-theme="dark"] body>main{isolation:auto}

/* A lighter top bar for the default Mixed theme. */
html[data-theme="mixed"] body>aside{background:#edf5f1;background-image:linear-gradient(115deg,#f6faf8,#e8f2ed);color:var(--ink);border-bottom-color:#cbded4}
html[data-theme="mixed"] .brand,html[data-theme="mixed"] .brand-name{color:#173b40}
html[data-theme="mixed"] .brand-location,html[data-theme="mixed"] .emblem{color:var(--palette-deep)}
html[data-theme="mixed"] .emblem{background:#fff;border-color:#b7d1c4}
html[data-theme="mixed"] aside>.eyebrow{color:#526e64}
html[data-theme="mixed"] aside .nav{background:#f9fcfa;color:#234d45;border-color:#bfd6c9;border-top-color:#fff}
html[data-theme="mixed"][data-color] aside .nav:hover,html[data-theme="mixed"][data-color] aside .nav:focus-visible,html[data-theme="mixed"][data-color] aside .nav.active{background:var(--palette-soft);color:var(--palette-deep);border-color:var(--palette-deep)}

/* Mixed blends the chosen palette color into the light page and navigation. */
html[data-theme="mixed"]{--page:color-mix(in srgb,var(--button-color) 3%,white);--surface:color-mix(in srgb,var(--button-color) 2%,white);--line:color-mix(in srgb,var(--button-color) 18%,white)}
html[data-theme="mixed"] body>aside{background:var(--surface-soft);background-image:linear-gradient(115deg,color-mix(in srgb,var(--button-color) 3%,white),color-mix(in srgb,var(--button-color) 12%,white));border-bottom-color:var(--line)}
html[data-theme="mixed"] .brand,html[data-theme="mixed"] .brand-name{color:var(--ink)}
html[data-theme="mixed"] .emblem{background:var(--surface);border-color:var(--line)}
html[data-theme="mixed"] aside>.eyebrow{color:var(--muted)}
html[data-theme="mixed"] aside .nav{background:var(--surface);color:var(--palette-deep);border-color:var(--line);border-top-color:#fff}
html[data-theme="mixed"] .system-visual{background:var(--surface-soft);border-color:var(--line)}

/* Mixed shows green and blue together across different parts of the page. */
html[data-theme="mixed"] :is(#overview,#services,#about,#process,#request,.shortcut:nth-child(odd)){
 --button-color:#147d70;--button-hover:#0e6258;--accent:#147d70;--accent-dark:#0e6258;--control-ring:#147d70;--palette-deep:#147d70;--palette-soft:#e3f3ed;--soft:#e3f3ed;--surface-soft:#edf8f2;--surface:#f7fcf9;--line:#c8e1d5;
}
html[data-theme="mixed"] :is(#systems,#pricing,#assembling-process,#reviews,.shortcut:nth-child(even)){
 --button-color:#2563b8;--button-hover:#1c4d91;--accent:#2563b8;--accent-dark:#1c4d91;--control-ring:#2563b8;--palette-deep:#2563b8;--palette-soft:#e5effc;--soft:#e5effc;--surface-soft:#edf4fd;--surface:#f7faff;--line:#c8d9ef;
}
html[data-theme="mixed"] #services .service-grid article{background:var(--surface-soft)}
html[data-theme="mixed"] #services .service-grid article:nth-child(even){--button-color:#2563b8;--button-hover:#1c4d91;--accent:#2563b8;--control-ring:#2563b8;--surface-soft:#edf4fd;--line:#c8d9ef;background:var(--surface-soft)}
html[data-theme="mixed"] body>aside{background:linear-gradient(110deg,#edf8f2 0%,#edf8f2 35%,#edf4fd 100%);border-bottom-color:#cadfdf}
html[data-theme="mixed"][data-color] aside .nav:nth-child(odd){--button-color:#147d70;--button-hover:#0e6258;background:#edf8f2;color:#146b5e;border-color:#b8d9cb;--control-ring:#147d70}
html[data-theme="mixed"][data-color] aside .nav:nth-child(even){--button-color:#2563b8;--button-hover:#1c4d91;background:#edf4fd;color:#205699;border-color:#baceeb;--control-ring:#2563b8}
html[data-theme="mixed"][data-color] aside .nav:is(:hover,.active){background:var(--button-color);color:#fff;border-color:var(--button-hover)}

/* A raised top bar with a lit upper edge and a shallow lower bevel. */
body>aside{border-bottom:1px solid color-mix(in srgb,var(--accent),#102831 35%);box-shadow:inset 0 1px 0 #ffffff65,inset 0 -2px 0 #10283116,0 4px 0 color-mix(in srgb,var(--surface-soft),#102831 17%),0 8px 12px #10283120,0 16px 28px #10283112}
html[data-theme="dark"] body>aside{border-bottom-color:#38565b;box-shadow:inset 0 1px 0 #ffffff20,inset 0 -2px 0 #0003,0 4px 0 #08171e,0 8px 14px #0005,0 16px 28px #0003}

/* One continuous background across the page, top bar, and content surfaces. */
html[data-theme="mixed"],html[data-theme="light"]{--site-background:#f3f7f5}
html[data-theme="dark"]{--site-background:#0d1b23}
html[data-theme] :is(body,body>aside,main,.shortcut,.service-grid article,.systems-panel,.about-panel,.pricing-panel,.request-panel,.review-form,.review-card,.reviews-empty,.quote-note,.antivirus-panel,#diagnostic-dialog,.windows-checker,.contact-status,.diagnostic-note,.system-visual,#assembling-process,#assembling-process .vga-demo-stage,#services .service-grid article){background-color:var(--site-background);background-image:none}

/* Pick several colors and scatter them across Mixed mode elements. */
header:has(#mixed-palette){flex-wrap:wrap}
#mixed-palette{flex-basis:100%;min-width:0;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
#mixed-palette legend{padding:0 6px;font-size:12px;font-weight:650;color:var(--ink)}
.mixed-color-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.mixed-color-options label{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;cursor:pointer}
.mixed-color-options input[type="checkbox"]{width:16px;height:16px;margin:0;padding:0}
#mixed-custom-color{width:36px;height:30px;margin:0;padding:2px;cursor:pointer}
#shuffle-mixed-colors{font-size:12px;padding:7px 12px}
html[data-theme="mixed"] .theme-control[for="site-color"],html[data-theme="mixed"] #custom-color-label{display:none!important}
html[data-theme="mixed"][data-color] aside .nav[data-mixed-paint]{background:var(--palette-soft);color:var(--accent);border-color:var(--line)}
html[data-theme="mixed"][data-color] aside .nav[data-mixed-paint]:is(:hover,.active){background:var(--button-color);color:#fff;border-color:var(--button-hover)}

/* Extend selected palette accents to all visible text and interactive elements. */
html[data-theme="mixed"] [data-mixed-paint]{border-color:var(--line)}
html[data-theme="mixed"] :is(h1,h2,h3,p,li,label,legend,figcaption,strong,small,dt,dd,span,a:not(.button):not(.nav))[data-mixed-paint]{color:var(--accent)}
html[data-theme="mixed"] :is(button,.button,.nav) [data-mixed-paint]{color:inherit!important}
html[data-theme="mixed"] :is(input,select,textarea)[data-mixed-paint]{border-color:var(--accent);color:var(--ink)}
html[data-theme="mixed"] .badge[data-mixed-paint]{background:var(--palette-soft);border-color:var(--accent);color:var(--accent)}
html[data-theme="mixed"] :is(.service-number,.text-link,.mint,.eyebrow)[data-mixed-paint]{color:var(--accent)}

/* Individual molded frames, with clear space between top-bar buttons. */
body>aside>nav{gap:22px;padding:6px}
body>aside>nav .nav{position:relative;isolation:isolate}
body>aside>nav .nav::before{content:"";position:absolute;inset:-5px;z-index:-1;pointer-events:none;border:3px double color-mix(in srgb,var(--button-color),var(--site-background) 65%);border-radius:13px;box-shadow:inset 0 1px 1px #ffffff80,0 1px 2px #10283130}
html[data-theme="dark"] body>aside>nav .nav::before{box-shadow:inset 0 1px 1px #ffffff30,0 1px 3px #0006}
@media(max-width:850px){body>aside>nav{gap:20px;padding:6px}}

/* Keep palette selection in the original compact dropdown. */
html[data-theme="mixed"] .theme-control[for="site-color"]{display:flex!important}
html[data-theme="mixed"] #custom-color-label:not([hidden]){display:flex!important}
#site-color{width:135px}

/* Keep every navigation button on one row, with room for molded frames. */
body>aside{grid-template-columns:auto minmax(0,1fr);column-gap:24px}
body>aside>nav{display:flex;flex-wrap:nowrap;justify-content:flex-start;min-width:0;gap:18px;overflow-x:auto;overflow-y:hidden;padding:10px 7px 14px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior-x:contain}
body>aside>nav .nav{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:9px 11px}
@media(max-width:850px){body>aside{grid-template-columns:1fr}body>aside>nav{flex-wrap:nowrap;gap:18px}}

/* Outline the entire top bar. */
html[data-theme] body>aside{border:1px solid color-mix(in srgb,var(--accent),var(--site-background) 40%)}

/* One shared molded frame encloses the complete navigation row. */
body>aside>nav{border:3px ridge color-mix(in srgb,var(--accent),var(--site-background) 55%);border-radius:14px;padding:12px 14px 16px;box-shadow:inset 0 1px 2px #ffffff80,inset 0 -1px 2px #10283120,0 2px 4px #10283125}
body>aside>nav .nav::before{content:none}
html[data-theme="dark"] body>aside>nav{box-shadow:inset 0 1px 2px #ffffff25,inset 0 -1px 2px #0005,0 2px 5px #0005}

/* Compact top bar: logo and framed menu share a single shallow row. */
body>aside{grid-template-columns:auto minmax(0,1fr);gap:0 18px;padding:7px clamp(12px,2vw,28px)}
body>aside .brand{grid-column:1;grid-row:1;gap:8px}
body>aside .brand-name{font-size:19px}
body>aside .brand-location{font-size:10px;margin-top:2px;letter-spacing:1px}
body>aside .emblem{width:32px;height:32px;border-radius:8px}
body>aside .emblem svg{width:22px;height:22px}
body>aside>nav{grid-column:2;grid-row:1;gap:12px;padding:6px 9px 9px;border-width:2px;border-radius:11px;scrollbar-width:thin}
body>aside>nav .nav{padding:7px 10px;font-size:12px}
@media(max-width:650px){body>aside{gap:0 12px;padding:7px 10px}body>aside .brand-name{font-size:16px}body>aside .brand-location{font-size:9px}body>aside .emblem{width:28px;height:28px}body>aside>nav{gap:10px}body>aside>nav .nav{padding:7px 9px}}

/* Keep buttons and their raised edges comfortably inside the rounded frame. */
body>aside>nav{align-items:center;gap:clamp(6px,.8vw,12px);padding:10px 12px 15px;min-height:62px;border-radius:14px;overflow-x:auto;overflow-y:hidden}
body>aside>nav .nav{flex:1 0 auto;min-height:34px;display:flex;align-items:center;justify-content:center;margin:0;padding:7px clamp(7px,.7vw,11px);line-height:1.4;border-radius:8px;font-size:clamp(11px,.9vw,12px);white-space:nowrap}
@media(max-width:650px){body>aside>nav{gap:8px;padding:9px 11px 14px;min-height:60px}body>aside>nav .nav{flex:0 0 auto;padding:7px 9px}}

/* Slightly deepen the top bar while retaining the existing palette. */
html[data-theme] body>aside{background-color:color-mix(in srgb,var(--site-background),#102831 7%)!important}

/* Raised monitor badge beside the PC Express / in Windsor wordmark. */
html[data-theme][data-color] body>aside .brand .emblem{
 position:relative;isolation:isolate;overflow:visible;
 background:linear-gradient(145deg,color-mix(in srgb,var(--site-background),white 75%),color-mix(in srgb,var(--site-background),var(--button-color) 16%));
 color:var(--palette-deep);border:1px solid color-mix(in srgb,var(--button-color),var(--site-background) 50%);border-top-color:#fff;
 border-radius:9px;box-shadow:inset 1px 1px 1px #ffffffc0,inset -1px -2px 2px #10283120,1px 3px 0 color-mix(in srgb,var(--button-color),var(--site-background) 55%),2px 5px 7px #10283130;
 transform:perspective(180px) rotateY(-10deg) rotateX(7deg);
}
html[data-theme][data-color] body>aside .brand .emblem svg{filter:drop-shadow(0 1px 0 #ffffffc0) drop-shadow(1px 2px 1px #10283135);transform:translateZ(3px)}
html[data-theme="dark"][data-color] body>aside .brand .emblem{color:var(--palette-light);border-top-color:#6a8e91;background:linear-gradient(145deg,#38545d,#152d35);box-shadow:inset 1px 1px 1px #ffffff30,inset -1px -2px 2px #0005,1px 3px 0 #081b23,2px 5px 7px #0006}
html[data-theme="dark"][data-color] body>aside .brand .emblem svg{filter:drop-shadow(0 1px 0 #0006) drop-shadow(1px 2px 1px #0005)}

/* Mobile: compact logo row above a full-width scrolling menu. */
@media(max-width:850px){
 body>aside{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px 12px}
 body>aside .brand{grid-column:1;grid-row:1;justify-self:start;gap:8px}
 body>aside .brand-name{font-size:18px}
 body>aside .brand-location{font-size:9px;margin-top:2px}
 body>aside .emblem{width:29px;height:29px}
 body>aside>nav{grid-column:1;grid-row:2;width:100%;min-width:0;min-height:0;margin-top:0;gap:10px;padding:8px 10px 12px;border-width:1px;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff65,0 1px 3px #10283118;scroll-padding-inline:10px}
 body>aside>nav .nav{flex:0 0 auto;min-height:38px;padding:8px 11px;font-size:12px}
 html[data-theme] body>aside{box-shadow:inset 0 1px 0 #ffffff35,0 2px 0 color-mix(in srgb,var(--site-background),#102831 12%),0 4px 9px #10283115}
 html[data-theme="dark"] body>aside>nav{box-shadow:inset 0 1px 0 #ffffff18,0 1px 3px #0004}
}

/* Keep the mobile navigation visible while the content scrolls. */
@media(max-width:850px){body>aside{position:sticky;top:0;z-index:100}html{scroll-padding-top:calc(var(--horizontal-menu-height,125px) + 16px)}}

/* Keep all five rating stars one color, including hover and selected states. */
html[data-theme][data-color] #review-form .review-rating .rating-choice>span[aria-hidden]{color:var(--accent)}

/* Live device readings inside the existing monitor illustration. */
.monitor-screen{min-height:255px}
.monitor-screen .monitor-data-heading{margin:10px 0;color:#e0efed;font-size:12px}
#monitor-device-data{margin:0;font:10px/1.6 monospace}
#monitor-device-data>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;padding:6px 0;border-bottom:1px solid #ffffff14}
#monitor-device-data dt{color:#b8d0d0}
#monitor-device-data dd{margin:0;text-align:right;color:#c3efdf;overflow-wrap:anywhere}
#monitor-device-status{margin:12px 0 0;font:10px/1.6 monospace;color:#9bd8c8}