/* NeoMate content surfaces; shared navigation and tokens live in site-theme.css. */
:root{
  --bg:var(--site-bg,#f5f7fc);--surface:var(--site-surface,#fff);--surface-2:var(--site-soft,#edf2ff);
  --border:var(--site-line,#dce3f0);--text:var(--site-ink,#101b35);--text-muted:var(--site-muted,#5f6d86);
  --brand:var(--site-blue,#315efb);--brand-light:var(--site-blue,#315efb);--accent:#5a7cf6;--accent-light:#7b96ff;--pixel-glow:#00ffaa;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px/1.75 var(--site-font,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--brand);outline-offset:5px}
.skip-link{position:fixed;top:12px;left:16px;z-index:20;padding:10px 16px;background:var(--text);color:#fff;border-radius:10px;transform:translateY(-170%)}
.skip-link:focus{transform:none}
.container{width:min(1180px,calc(100% - 56px));max-width:none;margin:0 auto;padding:62px 0 22px;min-width:0}
.hero{text-align:center;margin:0 0 64px}
h1{margin:0 0 13px;color:var(--brand);font-size:clamp(40px,6.5vw,72px);font-weight:800;line-height:1.12;letter-spacing:-.055em;overflow-wrap:anywhere}
.hero-sub{font-size:18px;color:var(--text-muted);margin:0 0 36px;line-height:1.7}
.pixel-display{display:flex;justify-content:center;border:1px solid #dce6fb;border-radius:24px;padding:42px 24px;background:linear-gradient(135deg,#edf3ff,#f7faff);max-width:760px;margin:0 auto}
.pixel-canvas{width:min(466px,100%);background:#06101a;border:1px solid #203846;padding:20px;border-radius:16px;box-shadow:0 18px 35px -18px #17395466,0 0 20px #00ffaa0d}
.pixel-row{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:6px;margin-bottom:6px}
.pixel-row:last-child{margin-bottom:0}
.pixel{width:100%;aspect-ratio:1;border-radius:3px;transition:opacity .3s,transform .3s,background .3s;min-width:0}
.pixel.on{background:var(--pixel-glow);box-shadow:0 0 8px var(--pixel-glow);opacity:1}
.pixel.off{background:#0d1720;border:1px solid #21313d;box-shadow:inset 0 1px 2px #0005;opacity:1}
.pixel.fading{opacity:.3;transform:scale(.8)}
.specs-section{margin-bottom:28px}
.section-title{font-size:25px;font-weight:720;line-height:1.4;margin:0 0 24px;color:var(--text);letter-spacing:-.03em;overflow-wrap:anywhere}
.specs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.spec-card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:25px 18px;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.spec-card:hover{border-color:#b5c7fb;transform:translateY(-3px);box-shadow:0 14px 28px -18px #315efb42}
.spec-value{font-size:34px;font-weight:750;color:var(--brand);line-height:1.3;letter-spacing:-.05em;margin-bottom:8px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.spec-label{font-size:14px;color:var(--text-muted);overflow-wrap:anywhere}
.features-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 38px}
.feature-card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;transition:transform .25s,border-color .25s,box-shadow .25s}
.feature-card:hover{transform:translateY(-4px);border-color:#b5c7fb;box-shadow:0 14px 30px -17px #315efb35}
.feature-icon{font-size:25px;line-height:1;width:49px;height:49px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand);border-radius:14px;margin-bottom:22px}
.feature-icon svg{width:27px;height:27px}
.feature-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.45;overflow-wrap:anywhere}
.feature-desc{font-size:15px;color:var(--text-muted);line-height:1.85;overflow-wrap:anywhere}
.arch-section{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;margin-bottom:44px}
.arch-flow{display:flex;flex-wrap:wrap;gap:11px;align-items:center;justify-content:center}
.arch-node{background:#f4f7ff;border:1px solid #e0e8fb;border-radius:11px;padding:13px 16px;font-size:14px;color:#34589e;min-width:0;overflow-wrap:anywhere;transition:border-color .2s}
.arch-node:hover{border-color:#9db5ff}
.arch-arrow{color:#8da6d7;font-size:20px;flex-shrink:0}
.links-section{margin-bottom:36px}
.links-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.link-card{min-width:0;display:flex;align-items:center;gap:16px;padding:23px;background:var(--surface);border:1px solid var(--border);border-radius:20px;transition:transform .25s,border-color .25s,box-shadow .25s}
.link-card:hover{border-color:#adc3fc;transform:translateY(-3px);box-shadow:0 13px 25px -17px #315efb40}
.link-icon{font-size:24px;flex-shrink:0}
.link-info{flex:1;min-width:0}
.link-title{font-size:16px;font-weight:650;color:var(--text);line-height:1.6;margin-bottom:3px;overflow-wrap:anywhere}
.link-url{font-size:13px;color:var(--text-muted);overflow-wrap:anywhere}
.bug-report-bottom{max-width:1124px;margin:0 auto 42px;padding:24px;border:1px solid var(--border);border-radius:20px;background:#edf2ff;text-align:center}
.bug-report-bottom .bug-report-link{font:600 14px/1.5 var(--site-font,"Segoe UI",system-ui,sans-serif);min-height:46px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#315efb;border:1px solid #c9d8ff;border-radius:11px;padding:12px 20px}
.page-footer{text-align:center;max-width:1124px;margin:0 auto;padding:25px 20px 32px;color:var(--text-muted);font-size:12px;line-height:2;border-top:1px solid var(--border);overflow-wrap:anywhere}
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.links-grid{grid-template-columns:1fr}.container{padding-top:48px}.hero{margin-bottom:48px}.bug-report-bottom,.page-footer{margin-inline:28px}}
@media(max-width:640px){.container{padding:36px 18px 18px}.hero-sub{font-size:16px;margin-bottom:26px}.pixel-display{padding:30px 18px;border-radius:20px}.pixel-canvas{padding:14px;border-radius:12px}.pixel-row{gap:3px;margin-bottom:3px}.pixel{border-radius:2px}.specs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spec-value{font-size:30px}.spec-card{padding:22px 12px}.features-grid{grid-template-columns:minmax(0,1fr);gap:16px}.feature-card{padding:25px}.section-title{font-size:23px}.arch-section{padding:25px 20px}.arch-node{padding:10px 12px;font-size:13px}.link-card{padding:22px}.bug-report-bottom,.page-footer{margin-inline:18px}.bug-report-bottom{padding:20px;margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.pixel{transform:none!important}.spec-card:hover,.feature-card:hover,.link-card:hover{transform:none}}
@media(max-width:820px){.container{width:calc(100% - 40px);padding-inline:0}}
@media(max-width:420px){.container{width:calc(100% - 32px);padding-inline:0}}

/* Keep the 24-column LED demo intact while allowing surrounding copy to reflow. */
.container{overflow-wrap:anywhere}
.pixel-display,.pixel-canvas{min-width:0}
.arch-node,.link-card,.bug-report-bottom .bug-report-link{max-width:100%}
.bug-report-bottom .bug-report-link{min-width:0;overflow-wrap:anywhere;text-align:center}
.page-footer a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
@media(max-width:1024px){
  .specs-grid,.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .arch-flow{flex-direction:column;gap:8px}
  .arch-node{width:100%;text-align:center;font-size:15px}
  .arch-arrow{display:grid;place-items:center;width:24px;height:24px;line-height:1;transform:rotate(90deg)}
  .feature-desc{font-size:16px}
}
@media(max-width:680px){
  .features-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .feature-card,.arch-section{padding:24px 20px}
  .link-card{padding:22px 20px}
  .link-url{font-size:14px}
}
@media(max-width:420px){
  .pixel-display{padding:24px 12px}
  .pixel-canvas{padding:12px}
  .spec-card{padding:20px 10px}
  .spec-value{font-size:28px}
  .hero{margin-bottom:38px}
}
@media(hover:none){.spec-card:hover,.feature-card:hover,.link-card:hover{transform:none}}