:root { color-scheme: light; font-family: "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #e9e9e9; color: #222; }
main { width: 100%; max-width: 1800px; margin: 0 auto; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.page { position: relative; margin: 0 0 8px; aspect-ratio: 841.85 / 595.25; background: #fff; }
.page img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.hotspot { position: absolute; display: block; border-radius: 3px; color: transparent; text-decoration: none; }
.hotspot:hover { background: rgb(0 0 0 / .035); outline: 1px solid rgb(0 0 0 / .18); }
.hotspot:focus-visible { outline: 3px solid #306bd9; outline-offset: -3px; background: rgb(48 107 217 / .08); }
.reader-controls { position: fixed; z-index: 10; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 1px solid #ddd; border-radius: 28px; background: rgb(255 255 255 / .94); box-shadow: 0 2px 14px rgb(0 0 0 / .08); font-size: 12px; }
#page-status { min-width: 45px; text-align: center; font-variant-numeric: tabular-nums; }
.contents-button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 22px; color: #fff; background: #222; text-decoration: none; }
.contents-button:focus-visible { outline: 3px solid #306bd9; outline-offset: 3px; }
.web-watermark {
  --tile-width: 480px;
  --tile-height: 255.221px;
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='255.221'%3E%3Ctext x='240' y='127.6105' text-anchor='middle' dominant-baseline='middle' transform='rotate(-28 240 127.6105)' font-family='Microsoft YaHei,sans-serif' font-size='44' fill='%23555555' fill-opacity='0.07'%3E%E8%8E%AB%E5%AE%87%E8%B1%AA%E8%AE%BE%E8%AE%A1%E4%BD%9C%E5%93%81%E9%9B%86%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: var(--tile-width) var(--tile-height);
  background-position: 0 0;
  animation: watermark-drift 60s linear infinite;
}
@keyframes watermark-drift {
  from { background-position: 0 0; }
  to { background-position: var(--tile-width) calc(0px - var(--tile-height)); }
}
@media (max-width: 600px) {
  .web-watermark { --tile-width: 346.667px; --tile-height: 184.326px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .web-watermark { animation: none; }
}
@media (max-width: 600px) { .page { margin-bottom: 4px; } .reader-controls { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); } }
@media print {
  main, .reader-controls, noscript, .web-watermark { display: none !important; }
  body { background: #fff; }
  body::after { content: '莫宇豪设计作品集 · 请在线浏览'; display: block; text-align: center; margin-top: 40px; font-size: 38px; }
}