/* Shared main-site visual contract. Product screenshots keep their original pixels. */
:root {
  color-scheme: light;
  --site-bg: #fff;
  --site-surface: #fff;
  --site-ink: #1b1b1b;
  --site-muted: #646464;
  --site-blue: #202020;
  --site-line: #e1e1e1;
  --site-soft: #f3f3f3;
  --site-radius: 4px;
  --site-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --site-shadow: none;
}
body.site-unified {
  --bg: var(--site-bg);
  --background: var(--site-bg);
  --ink: var(--site-ink);
  --text: var(--site-ink);
  --muted: var(--site-muted);
  --text-muted: var(--site-muted);
  --blue: var(--site-blue);
  --accent: var(--site-blue);
  --brand: var(--site-blue);
  --brand-dark: #383838;
  --brand-light: var(--site-soft);
  --line: var(--site-line);
  --border: var(--site-line);
  --surface: var(--site-surface);
  --surface-2: var(--site-soft);
  --card: var(--site-surface);
  --radius: var(--site-radius);
  --shadow: var(--site-shadow);
  margin: 0;
  color: var(--site-ink);
  background: var(--site-bg);
  font-family: var(--site-font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.site-unified *, .site-unified *::before, .site-unified *::after { box-sizing: border-box; }
.site-unified h1, .site-unified h2, .site-unified h3 { overflow-wrap:anywhere; }
.site-unified :where(main, section, article, aside, form, fieldset) { min-width:0; }
.site-unified :where(img, video, canvas) { max-width:100%; }
.site-unified :where(p, li, dd) { overflow-wrap:anywhere; }
.site-unified > main.container, .site-unified > main.wrap, .site-unified main > .wrap { width:min(1180px,calc(100% - 56px)); max-width:none; margin-inline:auto; }
.site-unified > main.container, .site-unified > main.wrap { padding-inline:0; }
.site-unified [hidden] { display: none !important; }
.site-unified :focus-visible { outline: 3px solid var(--site-blue); outline-offset: 4px; }
.site-unified ::selection { background: #e2e2e2; color: var(--site-ink); }
.site-unified .unified-header {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: var(--site-surface);
  border: 0;
  border-bottom: 1px solid var(--site-line);
  border-radius: 0;
  box-shadow: none;
}
.unified-header .unified-nav {
  width: min(1180px, calc(100% - 56px));
  min-height: 86px;
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.site-unified .unified-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  color: var(--site-ink);
  text-decoration: none;
  font: 750 19px/1.4 var(--site-font);
  letter-spacing: -.025em;
}
.unified-brand span { min-width:0; overflow-wrap:anywhere; }
.unified-brand img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; }
.unified-brand img { flex-shrink:0; }
.site-unified .unified-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.site-unified .unified-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 13px;
  border: 0;
  border-radius: 0;
  color: var(--site-muted);
  background: transparent;
  font: 550 14px/1.6 var(--site-font);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.site-unified .unified-links a:hover { color: var(--site-blue); background: var(--site-soft); }
.site-unified .unified-links a[aria-current="page"] { color: var(--site-ink); box-shadow: inset 0 -2px var(--site-blue); }
.site-unified .unified-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width:100%; }
.unified-actions > * { min-width:0; max-width:100%; }
.site-unified .unified-primary, .site-unified .unified-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid #949494;
  border-radius: 4px;
  background: var(--site-surface);
  color: var(--site-blue);
  text-decoration: none;
  text-align: center;
  overflow-wrap: anywhere;
  font: 650 14px/1.6 var(--site-font);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.site-unified .unified-primary { background: var(--site-blue); border-color: var(--site-blue); color: #fff; }
.site-unified .unified-secondary:hover { background: var(--site-soft); border-color: var(--site-blue); }
.site-unified .unified-primary:hover { background: #383838; }
.site-unified .bug-report-link { min-height:44px; padding:9px 16px; border:1px solid #949494; border-radius:4px; background:var(--site-surface); color:var(--site-blue) !important; font:650 14px/1.6 var(--site-font); }
.site-unified .bug-report-link:hover { background:var(--site-soft); border-color:var(--site-blue); }
body.site-unified > .bug-report-bottom { width:min(1180px,calc(100% - 56px)); max-width:none; margin-inline:auto; }
.site-unified .unified-footer {
  width: min(1180px, calc(100% - 56px));
  max-width: none;
  margin: 48px auto 0;
  padding: 28px 0;
  color: var(--site-muted);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--site-line);
  font: 400 12px/1.9 var(--site-font);
  overflow-wrap: anywhere;
}
.site-unified .unified-footer a { color: inherit; text-underline-offset: 4px; }
.site-unified .unified-surface { background: var(--site-surface); border: 1px solid var(--site-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow); }

/* Studio system: flat surfaces and crisp rules, not decorative floating cards.
   These selectors target the site chrome; original screenshots and demos stay intact. */
body.site-unified :is(.card, .panel, .feature, .feature-card, .spec-card, .scenario-card,
  .work-card, .project-card, .article-card, .article-reader, .article-editor,
  .tutorial-directory, .tutorial-course-card, .tutorial-sidebar, .tutorial-login-wall,
  .tutorial-engagement, .report-item, .admin-card, .admin-identity, .admin-note,
  .auth-shell, .auth-card, .auth-aside, .news-card, .hw-panel, .hw-contact-card, .hw-new-code,
  .arch-section, .link-card, .pixel-display, .article-library, .article-preview) {
  border-color: var(--site-line);
  border-radius: var(--site-radius);
  background: var(--site-surface);
  box-shadow: none;
  backdrop-filter: none;
}
body.site-unified :is(.work-card, .project-card, .article-card, .feature-card, .spec-card, .link-card, .admin-card):hover {
  transform: none;
  box-shadow: none;
  border-color: #8b8b8b;
}
body.site-unified :is(.button, .action, .primary-link, .feedback-link, .hw-primary,
  .hw-secondary, .submit-button, .code-button, .profile-link, .download-btn,
  .small-button, .remote-button, .article-button, .primary-button, .secondary-button,
  .pagination button, .category-filters button, .tutorial-pager a, .copy-btn, .auth-btn) {
  border-radius: 4px;
  box-shadow: none;
  transition: background-color .18s, border-color .18s, color .18s;
}
body.site-unified .auth-btn { background: var(--site-blue); color: #fff; border-color: var(--site-blue); }
body.site-unified .auth-btn:hover { background: #383838; transform: none; }
body.site-unified .auth-btn.ghost { background: #fff; color: var(--site-ink); border-color: #949494; }
body.site-unified .auth-btn.ghost:hover { background: var(--site-soft); }
body.site-unified :is(.primary-link, .primary-action, .primary-button, .feedback-link, .hw-primary,
  .submit-button, .download-btn:not(.secondary), .remote-primary) {
  color: #fff;
  background: var(--site-blue);
  border-color: var(--site-blue);
}
body.site-unified :is(.primary-link, .primary-action, .primary-button, .feedback-link, .hw-primary,
  .submit-button, .download-btn:not(.secondary), .remote-primary):not(:disabled):hover {
  color: #fff;
  background: #383838;
  border-color: #383838;
  transform: none;
  box-shadow: none;
}
body.site-unified :is(.secondary-action, .secondary-button, .download-btn.secondary, .hw-secondary, .code-button, .profile-link) {
  background: var(--site-surface);
  color: var(--site-blue);
  border: 1px solid #949494;
}
body.site-unified :is(.secondary-action, .secondary-button, .download-btn.secondary, .hw-secondary, .code-button, .profile-link):not(:disabled):hover {
  background: var(--site-soft);
  color: var(--site-blue);
  border-color: var(--site-blue);
  transform: none;
  box-shadow: none;
}
body.site-unified :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  color: var(--site-ink);
  border-color: #949494;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none;
}
body.site-unified :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  border-color: var(--site-blue);
  box-shadow: 0 0 0 2px #20202018;
}
body.site-unified input:is([type=checkbox], [type=radio]) { accent-color: var(--site-blue); }
body.site-unified :is(.eyebrow, .section-kicker, .hw-eyebrow, .hw-dot,
  .hw-price strong, .hw-purchase .hw-lead strong, .hw-agreement summary) { color: var(--site-blue); }
body.site-unified :is(.badge, .pill, .tag, .version, .showcase-version, .tech-tags span,
  .preview-pill, .account-strip, .hw-tag, .admin-error-code, .remote-owner,
  .tutorial-pills span, .article-badge, .recommend-tag, .system-status,
  .history-count, .tutorial-lock-icon) {
  color: var(--site-blue);
  border-color: var(--site-line);
  border-radius: 3px;
  background: var(--site-soft);
  box-shadow: none;
}
body.site-unified :is(.feature-icon, .admin-card-icon, .card-icon) {
  color: var(--site-blue);
  background: var(--site-soft);
  border-color: var(--site-line);
  border-radius: 4px;
  box-shadow: none;
}
body.site-unified :is(.feature-card:nth-child(2), .feature-card:nth-child(3)) .feature-icon {
  color: var(--site-blue);
  background: var(--site-soft);
}
body.site-unified :is(.workflow-panel, .collection-outro, .tutorial-invite, .bug-report-bottom,
  .download, .news-hero, .attachment-picker, .article-state) {
  background: var(--site-soft);
  border-color: var(--site-line);
  border-radius: 4px;
  box-shadow: none;
}
body.site-unified .bug-report-link,
body.site-unified .bug-report-bottom .bug-report-link {
  border-radius: 4px;
  background: var(--site-surface);
  border-color: #949494;
}
body.site-unified .bug-report-link:hover { background: var(--site-soft); border-color: var(--site-blue); }
body.site-unified :is(.hash, .file-item, .report-account, .qr-box, .owner-info, .attachment-links a) {
  background: var(--site-soft);
  border-color: var(--site-line);
  border-radius: 4px;
}
body.site-unified :is(.hw-muted, .hw-small, .hw-lead, .hw-price, .hw-rate,
  .hw-footnote, .hw-purchase-steps span, .hw-purchase-note,
  .hw-contact-card figcaption span, .hw-pending, .hw-consent,
  .field-hint, .preview-label, .project-detail, .release-note) { color: var(--site-muted); }

/* Homepage: an open two-column introduction, then a compact directory. */
body.site-unified .hero[aria-labelledby="hero-heading"] {
  margin: 0;
  padding: 72px 0 56px;
  gap: 64px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.site-unified .hero[aria-labelledby="hero-heading"] h1 { font-size: clamp(40px, 4.8vw, 66px); font-weight: 720; line-height: 1.22; }
body.site-unified .hero-copy > .eyebrow { color: var(--site-muted); }
body.site-unified .hero-mark { background: #e35724; border-radius: 0; }
body.site-unified .hero-showcase {
  padding: 18px;
  border-radius: 4px;
  box-shadow: none;
  background: #fff;
}
body.site-unified .hero-showcase:hover { transform: none; border-color: #8b8b8b; box-shadow: none; }
body.site-unified :is(.showcase-screen, .preview-window, .app-preview, .shot) {
  border-radius: 3px;
  border-color: var(--site-line);
  box-shadow: none;
}
body.site-unified .window-bar { background: #f3f3f3; color: var(--site-muted); border-color: var(--site-line); }
body.site-unified .circle-arrow { background: none; border: 0; border-radius: 0; color: var(--site-blue); }
body.site-unified .hero-showcase:hover .circle-arrow { background: none; transform: translate(2px,-2px); }
body.site-unified .explore-strip { gap: 0; border-block: 1px solid var(--site-line); }
body.site-unified .explore-strip > a { padding: 24px 18px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.site-unified .explore-strip > a + a { border-left: 1px solid var(--site-line); }
body.site-unified .explore-strip > a:hover { background: var(--site-soft); transform: none; }
body.site-unified .path-number { color: var(--site-muted); background: none; border-radius: 0; font-family: ui-monospace,Consolas,monospace; }
body.site-unified :is(.snap-art, .paper-art) { background: #f1f1f1; }
body.site-unified .snap-art img { border-color: var(--site-line); border-radius: 3px 3px 0 0; box-shadow: none; }
body.site-unified .profile { background: #fff; }
body.site-unified .avatar { box-shadow: none; }
body.site-unified .quote { border-radius: 0; border-left-color: var(--site-blue); background: #f5f5f5; color: var(--site-muted); }
body.site-unified .chip { background: #fff; border: 1px solid var(--site-line); border-radius: 4px; color: var(--site-ink); box-shadow: none; }
body.site-unified .chip:hover { border-color: #8b8b8b; transform: none; }
body.site-unified .chip-art { background: transparent; border-radius: 0; }
body.site-unified .feedback-note { color: var(--site-muted); }
body.site-unified .article-home .article-card { padding: 24px 0; border: 0; border-top: 1px solid var(--site-line); background: transparent; border-radius: 0; }
body.site-unified .article-home .article-card:hover { background: transparent; transform: none; }
body.site-unified .tutorial-invite:hover { transform: none; }

/* Gallery: the previews carry the project identity, not seven pastel gradients. */
body.site-unified .gallery-intro h1 em { color: var(--site-blue); background: none; -webkit-text-fill-color: currentColor; }
body.site-unified .gallery-intro .eyebrow > span { background: #e35724; box-shadow: none; border-radius: 0; }
body.site-unified .intro-note { border: 0; border-left: 1px solid var(--site-line); border-radius: 0; background: transparent; box-shadow: none; }
body.site-unified .intro-note::after { content: none; }
body.site-unified :is(.summary-label, .download-count strong) { color: var(--site-muted); }
body.site-unified .note-index { color: var(--site-blue); background: none; border: 0; border-radius: 0; }
body.site-unified .project-preview { background: #f1f1f1; border-color: var(--site-line); }
body.site-unified .preview-downloads { color: var(--site-blue); }
body.site-unified .project-card:hover :is(.preview-window, .hardware-art) { transform: none; box-shadow: none; }
body.site-unified .project-search { border-color: #949494; border-radius: 4px; }
body.site-unified .project-search input { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.site-unified .project-search:focus-within { border-color: var(--site-blue); box-shadow: 0 0 0 2px #20202018; }
body.site-unified .category-filters button:hover { color: var(--site-blue); background: var(--site-soft); }
body.site-unified .category-filters button[aria-pressed="true"] { background: var(--site-blue); color: #fff; box-shadow: none; }
body.site-unified .collection-outro p:last-child { color: var(--site-muted); }

/* Homework: price, access, consent and actual QR stay legible and distinct. */
body.homework-site .hw-intro h1 { font-weight: 700; line-height: 1.16; }
body.homework-site .hw-purchase { background: #fff; border-top: 2px solid var(--site-ink); }
body.homework-site .hw-purchase-steps li::before { background: none; border: 0; border-radius: 0; color: var(--site-muted); font-family: ui-monospace,Consolas,monospace; }
body.homework-site .hw-contact-card { border-radius: 4px; }
body.homework-site .hw-contact-preview { border-radius: 0; }
body.homework-site .hw-package { border-top: 2px solid var(--site-blue); }
body.homework-site .hw-rate strong { color: var(--site-ink); }
body.homework-site .hw-important { color: var(--site-ink); }
body.homework-site .hw-agreement { background: #f6f6f6; }
body.homework-site .hw-subject { background: transparent; border: 0; border-top: 1px solid #a6a6a6; border-radius: 0; padding-inline: 0; }
body.homework-site .hw-subject-grid { column-gap: 28px; }
body.homework-site .hw-pending { border-color: var(--site-line); }
body.homework-site .hw-new-code { background: var(--site-soft); }
body.homework-site :is(th, td) { border-color: var(--site-line); }
body.homework-site th { color: var(--site-muted); background: #f3f3f3; }
body.homework-site .hw-used { color: var(--site-muted); }
body.homework-site .hw-message:not([data-error=true]) { color: var(--site-muted); }
body.homework-site :is(.hw-footnote, .hw-purchase-note, .hw-terms-text) a { color: var(--site-blue); }

/* Account and reports keep semantic validation/status colors and native controls. */
body.site-unified .auth-aside { background: var(--site-soft); }
body.site-unified .auth-aside { border-radius: 0; }
body.site-unified .auth-card { border-radius: 0; }
body.site-unified .password-requirements { border-radius: 4px; background: #f5f5f5; }
body.site-unified .auth-address { color: var(--site-blue); }
body.site-unified .arch-node { background: var(--site-soft); border-color: var(--site-line); border-radius: 4px; color: var(--site-blue); }
body.site-unified .arch-arrow { color: var(--site-muted); }
body.site-unified.product-paperreply .section { background: #fff; border-color: var(--site-line); border-radius: 4px; }
body.site-unified.product-paperreply :is(.pin-item, .flow-step) { background: var(--site-soft); border-color: var(--site-line); border-radius: 4px; color: var(--site-blue); }
body.site-unified :is(.button, .card, .feature):hover { transform: none; box-shadow: none; border-color: #8b8b8b; }
body.site-unified .button.primary:hover { background: #383838; color: #fff; }
body.site-unified .cover { box-shadow: none; }
body.site-unified .system-recommendation { border-radius: 4px; }
body.site-unified .system-recommendation[data-state="warning"] { border-color: #d2a849; background: #fffbeb; }
body.site-unified .system-recommendation[data-state="unsupported"] { border-color: #dc986c; background: #fff7ed; }
body.site-unified .download .button { background: #fff; border-color: #949494; }
body.site-unified .download .button.recommended { outline: 2px solid var(--site-blue); outline-offset: 3px; box-shadow: none; }
body.site-unified .article-markdown blockquote { border-left-color: var(--site-blue); border-radius: 0; background: var(--site-soft); color: var(--site-muted); }
body.site-unified .article-markdown pre { border-radius: 4px; }
body.site-unified .article-button:not(.article-secondary):not(.article-danger) { background: var(--site-blue); }
body.site-unified .article-button:not(.article-secondary):not(.article-danger):hover { background: #383838; }
body.site-unified .tutorial-chapter-list a { border-radius: 4px; }
body.site-unified input::file-selector-button { border-radius: 4px; background: var(--site-soft); color: var(--site-blue); border: 1px solid #949494; }
body.site-unified .account-strip { color: var(--site-blue); }
body.site-unified .report-item { border-color: var(--site-line); }
body.site-unified .article-markdown a { color: var(--site-blue); }
body.site-unified .news-hero { background: transparent; }
@media (max-width: 1024px) {
  body.site-unified .hero[aria-labelledby="hero-heading"] { padding-block: 48px; gap: 36px; }
  body.site-unified .explore-strip > a:nth-child(3) { border-left: 0; }
  body.site-unified .explore-strip > a:nth-child(n+3) { border-top: 1px solid var(--site-line); }
}
@media (max-width: 700px) {
  body.site-unified .hero[aria-labelledby="hero-heading"] { padding-block: 36px; gap: 28px; }
  body.site-unified .explore-strip > a { padding: 18px 6px; }
  body.site-unified .explore-strip > a + a { border-left: 0; border-top: 1px solid var(--site-line); }
  body.site-unified .hero-showcase { padding: 14px; }
}
@media (max-width: 1024px) {
  .unified-header .unified-nav { width: calc(100% - 40px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap: 8px 12px; padding: 12px 0 8px; }
  .site-unified .unified-actions { margin-left: auto; }
  .site-unified .unified-links { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; gap:4px; padding-top:6px; border-top:1px solid var(--site-line); }
  .site-unified .unified-links a { justify-content:center; padding-inline:6px; white-space:normal; text-align:center; overflow-wrap:anywhere; font-size:.875rem; }
  .site-unified .unified-footer { width: calc(100% - 40px); }
  body.site-unified > .bug-report-bottom, .site-unified > main.container, .site-unified > main.wrap, .site-unified main > .wrap { width:calc(100% - 40px); }
  .site-unified .unified-brand { min-height:44px; }
  .site-unified .unified-actions { max-width:min(100%,22rem); }
  .site-unified :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size:1rem; max-width:100%; min-width:0; }
  .site-unified :where(button, select) { min-height:44px; }
}
@media (max-width: 420px) {
  .unified-header .unified-nav { width: calc(100% - 32px); }
  .unified-header .unified-nav { grid-template-columns:minmax(0,1fr) minmax(0,auto); column-gap:8px; }
  .site-unified .unified-brand { font-size: 1rem; gap: 8px; }
  .unified-brand img { width: 28px; height: 28px; }
  .site-unified .unified-links a { font-size: .875rem; padding-inline: 6px; }
  .site-unified .unified-primary, .site-unified .unified-secondary { padding-inline: 10px; font-size: .875rem; }
  .site-unified .unified-footer { width: calc(100% - 32px); }
  body.site-unified > .bug-report-bottom, .site-unified > main.container, .site-unified > main.wrap, .site-unified main > .wrap { width:calc(100% - 32px); }
}
@media (pointer:coarse) {
  .site-unified :where(button, .unified-primary, .unified-secondary, .bug-report-link) { min-height:44px; }
}
@media (hover:none) {
  .site-unified .unified-primary:hover, .site-unified .unified-secondary:hover { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-unified *, .site-unified *::before, .site-unified *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .site-unified .unified-primary:hover, .site-unified .unified-secondary:hover { transform: none; }
  body.site-unified .hero-showcase:hover .circle-arrow { transform: none; }
}
@media (forced-colors: active) {
  .site-unified .unified-header, .site-unified .unified-surface { border-color: CanvasText; }
  .site-unified .unified-links a[aria-current="page"] { outline: 1px solid LinkText; outline-offset: -2px; }
  body.site-unified :is(input, select, textarea, .hw-panel, .project-card, .auth-shell) { border-color: CanvasText; }
}