/* Local-only base layer for tool.html.  It intentionally avoids remote font imports. */

:root {
  --paper: #fff8f3;
  --paper-warm: #fff1f2;
  --paper-glass: rgba(255, 248, 249, .82);
  --paper-soft: rgba(255, 255, 255, .72);
  --ink: #34292c;
  --ink-soft: #5c4a4f;
  --muted: #927c82;
  --muted-light: #b9a7ad;
  --sakura: #ea6f91;
  --sakura-soft: #ffb6c8;
  --sakura-pale: #ffe5ed;
  --gold: #e9bc55;
  --shadow-rose: rgba(205, 129, 151, .25);
  --shadow-ink: rgba(46, 35, 38, .12);
  --line: rgba(100, 69, 75, .12);
  --glass-border: rgba(255, 255, 255, .72);
  --shadow-flat: 14px 16px 38px var(--shadow-rose), -10px -10px 26px rgba(255, 255, 255, .78);
  --shadow-hover: 18px 22px 46px rgba(205, 129, 151, .32), -12px -12px 30px rgba(255, 255, 255, .82);
  --shadow-active: inset 6px 6px 16px rgba(205, 129, 151, .25), inset -6px -6px 16px rgba(255, 255, 255, .85);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  --transition-bouncy: all .34s cubic-bezier(.2, 0, 0, 1);
  --transition-smooth: all .24s cubic-bezier(.2, 0, 0, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-sans);
}

body::before {
  position: fixed;
  z-index: -3;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(80, 66, 58, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 66, 58, .03) 1px, transparent 1px);
  background-size: 38px 38px;
  content: '';
  mix-blend-mode: multiply;
}

button,
input,
textarea { font: inherit; }

button { border: 0; }
a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 238, 243, .8); }
::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 247, 249, .92);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sakura), var(--sakura-soft));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}