/* T85 · White product canvas with a small brand-colored response.
 * Loaded after the feature styles. Headlines, controls and large text
 * surfaces remain neutral; orange-red belongs to a few active details.
 * LED meaning is independent from branding. No asset or geometry changes. */
:root {
  --site-accent:#c85032;
  --site-brand-ink:#a54129;
  --site-link:#45474c;
  --site-ink:#202124;
  --site-muted:#6e7075;
  --site-paper:#fff;
  --site-control:#e9eaed;
  --site-line:#dedee3;
  --accent:var(--site-accent);
  --ink:var(--site-ink);
  --muted:var(--site-muted);
  --paper:var(--site-paper);
  --line:var(--site-line);
  --feature-accent:var(--site-ink);
  --feature-link:var(--site-link);
  --feature-control:var(--site-control);
}

/* Ordinary links are dark and quiet; focus provides the brand response. */
button:focus-visible,
a:focus-visible { outline-color:var(--site-accent); }
.text-link,
.more-link,
.info-links,
.hero-product figcaption a,
.hero-actions button { color:var(--site-link); }
.mast-nav a:hover,
.footer-links a:hover { color:var(--site-brand-ink); }

/* Keep the dark masthead and hero download actions as stable anchors. */
.hero, #keys, #agent { background:var(--site-paper); }
.hero-pillars svg { color:var(--site-muted); }
.hero-pillars a:hover { background:#fff; }
.diy-section { background:#fff; }
.diy-keycap-part { position:relative; }
.diy-keycap-part::before {
  content:"";
  position:absolute;
  z-index:0;
  top:28%;
  left:10%;
  width:80%;
  height:52%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(67,74,84,.16) 0%,rgba(67,74,84,.08) 34%,transparent 72%);
  filter:blur(18px);
  opacity:.7;
  pointer-events:none;
}
.diy-keycap-part .diy-keycap-image {
  position:relative;
  z-index:1;
  width:100%;
  margin-inline:auto;
  transform:scale(.76);
  transform-origin:center center;
  filter:drop-shadow(0 16px 18px rgba(36,40,47,.14));
}
.diy-keycap-part figcaption { position:relative; z-index:1; }
.download-section .primary { background:var(--site-ink); color:#fff; }
.download-section .primary:hover { background:#000; }
.download-section .secondary { background:#eceef2; color:var(--site-ink); }
.download-section .secondary:hover { background:#e2e5eb; }

/* Community shares the same paper; the multiplication sign supplies the
 * bright detail. The words, heading and button do not compete with it. */
.community-section { background:#fff; }
.community-word { color:var(--site-ink); }
.community-word .multiply { color:var(--site-accent); }
.community-copy h2 span,
.community-copy>p:not(.eyebrow) { color:var(--site-muted); }
/* The legacy shared stylesheet marks this caption !important. */
.community-copy .community-note { color:var(--site-muted)!important; }
footer { background:var(--site-paper); }

/* Keep the key overview and task headline on the neutral product canvas. */
#keys .section-heading h2 span { color:var(--site-muted); }
#agent h2 em { color:var(--site-ink); }

/* The original blue task signal used the old shared accent. Give it an
 * explicit semantic color so changing the brand cannot recolor a blue lamp.
 * The existing, more-specific yellow/green/red state rules still win. */
.signal-layout { --state-ink:#316df3; --state-paper:#316df3; }
#signal-running:focus-visible ~ .signal-controls [for=signal-running],
#signal-waiting:focus-visible ~ .signal-controls [for=signal-waiting],
#signal-completed:focus-visible ~ .signal-controls [for=signal-completed],
#signal-failed:focus-visible ~ .signal-controls [for=signal-failed],
.signal-play:focus-visible { outline-color:var(--site-accent); }