/* Shiwen pixel evolution, 2026-09-15.
   Reading: an airy B2B website for optical-store owners, with youthful black/orange
   voxel branding. Preserve the selected Doubao Work rhythm, content and original logo.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 4 / VISUAL_DENSITY 3.
   Light theme remains intentional. Orange is the sole accent; dark orange is its
   accessible text companion. --blue aliases bridge the preserved original stylesheet.
   Shape rule: black rounded buttons, 12px content surfaces, 16px photographic frames.
   Small geometric squares extend the supplied logo; they are not status indicators.
   No game assets, game fonts, fake product screenshots or new dependencies. */

:root {
  --ink: #202020;
  --muted: #646464;
  --accent: #ff6b12;
  --accent-text: #a33b00;
  --blue: var(--accent-text);
  --blue-dark: var(--accent-text);
  --soft: #fff2e9;
  --paper: #fff;
  --line: #e8e8e6;
  --radius: 12px;
}

::selection { background: #ffdbc2; color: var(--ink); }
.header { border-color: #efefed; }
.desktop-nav a:hover { color: var(--accent-text); }
.button {
  border: 0;
  border-radius: 999px;
  background: #252525;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  transition: background .16s,transform .16s;
}
.button::before { content: none; }
.button:hover { background: #3a3a3a; color: #fff; transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-secondary,.button-small { background: #252525; color: #fff; }
.button-secondary:hover,.button-small:hover { background: #3a3a3a; color: #fff; }
.button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 5px; }
.text-link { color: var(--accent-text); }
.skip-link { border-radius: 0; }

.hero-copy { position: relative; isolation: isolate; }
.hero h1 { letter-spacing: -2.4px; font-weight: 650; }
.hero h1 span {
  color: var(--ink);
  background: linear-gradient(var(--accent),var(--accent)) left 96%/100% 8px no-repeat;
  padding-bottom: 5px;
}
.hero-copy::before,.hero-copy::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--accent);
  pointer-events: none;
  z-index: -1;
}
.hero-copy::before {
  left: 5%; top: 60px;
  box-shadow: 16px -16px 0 var(--accent),32px -32px 0 #272727,32px -48px 0 #272727;
}
.hero-copy::after {
  right: 8%; top: 105px;
  box-shadow: 16px 0 0 #272727,16px 16px 0 #272727,32px 16px 0 #e9e9e6;
}
.hero-art { position: relative; height: auto; aspect-ratio: 2.5; background: #fff; border-radius: 0; }
.hero-art img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
.hero-art::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 16px; height: 16px; background: var(--paper);
  box-shadow: 16px 0 0 var(--paper),0 -16px 0 var(--paper);
  pointer-events: none;
}

.scenario-tabs { border-radius: 4px; background: #f1f1ef; padding: 6px; gap: 6px; }
.scenario-tabs button { position: relative; border-radius: 2px; color: #626262; }
.scenario-tabs button[aria-selected=true] { background: #252525; color: #fff; box-shadow: none; }
.scenario-tabs button[aria-selected=true]::after {
  content: ""; position: absolute; bottom: -6px; left: calc(50% - 4px);
  width: 8px; height: 8px; background: var(--accent);
}
.scenario-tabs button:hover { color: var(--ink); background: #e6e6e2; }
.scenario-tabs button[aria-selected=true]:hover { background: #353535; color: #fff; }
.scenario-panel { background: #f4f4f2; border-radius: var(--radius); }
.scene-visual { border-radius: 8px; box-shadow: none; background: #fff; }
.scene-copy h3 { color: var(--ink); }
.status { color: var(--accent-text); }
.status-planned { color: #626262; }
.flow-caption { border-radius: 2px; background: #fff0e5; color: #963600; }
.flow-caption::before,.flow-caption::after { width: 2px; background: #dfc9b8; }
.geo-knowledge,.analysis-outputs,.decision-steps { color: #515151; }
.geo-knowledge span,.input-types span,.decision-steps span { border-radius: 3px; background: #f4f4f2; }
.analysis-center { color: var(--accent-text); }
.analysis-center::before,.analysis-center::after { background: #decab9; width: 2px; }
.service-flow li { border-color: #eeeeeb; }
.visual-footnote,.scenario-note,.disclaimer { color: #676767; }

.icare-photo img { border-radius: 16px; }
.icare-photo figcaption { color: #707070; }
.product-label { color: var(--ink); }
.capability-list > div { position: relative; padding-left: 21px; }
.capability-list > div::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--accent); }
.availability { color: var(--accent-text); }
.lifetime { background: #f5f5f3; border-radius: var(--radius); }
.age-groups article { border-color: #ffd0af; }

.geo-section { background: #f6f6f4; }
.geo-services article { border-radius: var(--radius); background: #fff; }
.service-symbol {
  color: var(--ink);
  font: 500 14px/1.4 ui-monospace,"SFMono-Regular",Consolas,monospace;
  display: inline-flex; align-items: center; gap: 12px;
}
.service-symbol::before { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 8px -8px 0 #242424; }
.geo-services h3 { color: var(--ink); }
.os-architecture { background: #f3f3f0; border-radius: var(--radius); }
.architecture-top,.architecture-base { border-radius: 6px; background: #fff; }
.architecture-top strong,.architecture-base strong { color: var(--ink); }
.agent-names>span { color: #353535!important; }
.agent-names small,.os-modules small { color: var(--accent-text); }
.agent-names .future small,.os-modules>span:not(.live-module) small { color: #666; }
.architecture-connector { color: #646464; }
.architecture-connector span::before { width: 2px; background: #d6d6cf; }
.os-modules>span { border-radius: 3px; background: #f3f3f0; color: #525252!important; }
.os-modules .live-module { background: #fff0e5; color: #963600!important; }
.os-modules .live-module small { color: #963600; }
.about-section { background: #f6f6f4; }
.experience strong { color: var(--ink); }
.experience strong span { color: var(--accent-text); }
.contact-section { position: relative; }
.contact-section::before {
  content: ""; display: block; width: 12px; height: 12px; margin: 0 auto 30px;
  background: var(--accent); box-shadow: 12px -12px 0 #262626,24px -12px 0 #262626;
}
.footer small { color: #717171; }
dialog { border-color: var(--line); border-radius: var(--radius); box-shadow: 0 30px 120px #20202020; }
dialog::backdrop { background: #20202066; }
.dialog-close { border-radius: 999px; background: #252525; color: #fff; }
.dialog-close:hover { background: #3a3a3a; }
.dialog-links a { border-radius: 3px; background: #fff1e6; color: var(--accent-text); }

/* A short assembly entrance extends the stepped logo without continuous motion. */
@media(prefers-reduced-motion:no-preference) {
  .hero-copy::before { animation: pixel-assemble .45s .15s steps(4,end) both; }
  .hero-copy::after { animation: pixel-assemble .45s .3s steps(4,end) both; }
  @keyframes pixel-assemble { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media(max-width:1100px) {
  .hero-copy::before { left: 2%; top: 65px; width: 12px; height: 12px; }
  .hero-copy::after { right: 3%; width: 12px; height: 12px; }
}
@media(max-width:767px) {
  .hero-copy::before { left: 0; top: 18px; width: 8px; height: 8px; box-shadow: 8px -8px 0 var(--accent),16px -16px 0 #272727; }
  .hero-copy::after { display: none; }
  .hero h1 span { display: table; margin-inline: auto; padding-bottom: 3px; background-size: 100% 6px; }
  .hero-art { height: auto; aspect-ratio: 2; border-radius: 0; }
  .hero-art::after { width: 8px; height: 8px; box-shadow: 8px 0 0 var(--paper),0 -8px 0 var(--paper); }
  .scenario-tabs { gap: 3px; border-radius: 3px; padding: 5px; }
  .scenario-tabs button { padding: 13px 5px; font-size: 14px; }
  .scenario-tabs button[aria-selected=true]::after { bottom: -5px; }
  .scenario-panel,.lifetime,.os-architecture { border-radius: var(--radius); }
  .scene-visual { border-radius: 6px; }
  .icare-photo img { border-radius: 16px; }
  .age-groups article { border-left-color: #ffcaa6; }
  .button-small { font-size: 14px; }
}
@media(max-width:359px) {
  .scenario-tabs button { font-size: 13px; padding-inline: 3px; }
  .hero-copy::before { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .button:hover,.button:active { transform: none; }
}