/* ═══════════════════════════════════════════════════
   hairline 插画系统——原站 adoptedStyleSheets 构造样式 1:1 移植
   来源: index-C9light7X.js wa() 函数
   调色板: light #fff/#232327/#a4a4ac/#c3c3c9/#e0e0e4
           dark  #08090a/#d0d6e0/#5b5d64/#3e3e44/#29292d
   (实际取值优先走 --hairline-* 变量, 由 original.css 定义)
   ═══════════════════════════════════════════════════ */

:where([data-hairline]) {
  display: block;
  position: relative;
  aspect-ratio: 5/4;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  --hl-sw: var(--hairline-stroke, 0.9);
  --hl-plate: var(--hairline-plate, #ffffff);
  --hl-hi: var(--hairline-hi, #232327);
  --hl-edge: var(--hairline-edge, #a4a4ac);
  --hl-mid: var(--hairline-mid, #c3c3c9);
  --hl-lo: var(--hairline-lo, #e0e0e4);
}

:where(.dark, [data-theme="dark"]) :where([data-hairline]) {
  --hl-plate: var(--hairline-plate, #08090a);
  --hl-hi: var(--hairline-hi, #d0d6e0);
  --hl-edge: var(--hairline-edge, #5b5d64);
  --hl-mid: var(--hairline-mid, #3e3e44);
  --hl-lo: var(--hairline-lo, #29292d);
}

:where([data-hairline][data-hairline-theme="light"]) {
  --hl-plate: #ffffff; --hl-hi: #232327; --hl-edge: #a4a4ac; --hl-mid: #c3c3c9; --hl-lo: #e0e0e4;
}

:where([data-hairline][data-hairline-theme="dark"]) {
  --hl-plate: #08090a; --hl-hi: #d0d6e0; --hl-edge: #5b5d64; --hl-mid: #3e3e44; --hl-lo: #29292d;
}

:where([data-hairline]:focus-visible) {
  outline: 1.5px solid var(--hl-hi);
  outline-offset: 2px;
}

:where([data-hairline] > svg) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

:where([data-hairline] > [data-hairline-live]) {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where([data-hairline] > svg) :where(path, polygon, ellipse, line) {
  fill: var(--hl-plate);
  stroke: var(--hl-mid);
  stroke-width: var(--hl-sw);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 260ms cubic-bezier(0.5, 0, 0.1, 1);
}

:where([data-hairline] > svg) :where(.nf) { fill: none; }
:where([data-hairline] > svg) :where(.fo) { stroke: none; }
:where([data-hairline] > svg) :where(.sil) { stroke: var(--hl-edge); }
:where([data-hairline] > svg) :where(.hi) { stroke: var(--hl-hi); }
:where([data-hairline] > svg) :where(.lo) { stroke: var(--hl-lo); }
:where([data-hairline] > svg) :where(.dash) { stroke-dasharray: 1 3; }
:where([data-hairline] > svg) :where(.dot) {
  stroke: none;
  fill: var(--hl-hi);
  transition: fill 260ms cubic-bezier(0.5, 0, 0.1, 1);
}
:where([data-hairline] > svg) :where(.dot.m) { fill: var(--hl-edge); }
:where([data-hairline] > svg) :where(.dot.off) { fill: var(--hl-lo); }
:where([data-hairline] > svg) :where(.ghost path) { fill: none; stroke: var(--hl-mid); }