@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Neumorphism pass: every raised-looking surface is carved out of the flat
   --bg/--panel behind it via a paired light/dark shadow
   (--neu-light/--neu-dark, themed per light/dark mode above) instead of a
   border. Text-entry-like elements get the same shadow pair inverted, so
   they read as pressed into the surface rather than sitting on top of it.
   ========================================================================== */

.site-icon,
.btn,
.block-btn,
.jump,
.theme-opt,
.font-opt,
.colormode-opt,
.fav-highlight-opt,
.art-subtab,
.pattern-mode-opt,
.mylist-select,
.block-search,
.plane-jump-btn,
.block-pop-close,
.block-search-clear,
.clear-circle-btn,
.nav-prev,
.nav-next,
.modal-close,
.drawer-close,
.block-item,
.legend-item:not(.legend-none) {
  border-color: transparent;
  box-shadow: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
  transition: box-shadow .12s, transform .05s, background .12s, color .12s;
}

/* Left menu's legend is just a static reference list (unlike the block
   picker's, which is clickable and uses the shadow as a button affordance)
   -- no shadow needed here. */
#attr-legend .legend-item {
  box-shadow: none;
}

/* Mobile top-bar buttons (hamburger menu triggers etc.) get the same raised
   neumorphic shadow as every other button, so they don't look flat/inert
   against the bar's own background. */
.mobile-bar-btn {
  border-color: transparent;
  box-shadow: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
  transition: box-shadow .12s, transform .05s, background .12s, color .12s;
}

/* recessed / pressed surfaces: the shadow direction flips inward so the
   element reads as carved-in rather than raised. Comes after the raised
   rule above on purpose -- .jump/.block-search/.mylist-select are meant to
   look like input wells, not buttons, so the recessed shadow (later in
   source order) wins for them. */
#output,
.art-edit-textarea,
.pattern-name-input,
.pattern-preview-sample,
.block-search,
.jump,
.mylist-select,
.fav-board,
.block-legend {
  box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
}

.btn:hover,
.block-btn:hover,
.plane-jump-btn:hover,
.block-pop-close:hover,
.nav-prev:hover,
.nav-next:hover {
  box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
}

.btn:active,
.block-item.active {
  box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
  transform: none;
}

/* colored toggle buttons (テーマ/フォント/色分け方式/お気に入り強調) get a flat
   accent fill instead -- the neumorphic dual-tone shadow's two
   differently-colored corners read as a gradient running across the solid
   color, which the left menu's flat look should avoid. */
.font-opt.active,
.colormode-opt.active,
.fav-highlight-opt.active,
.theme-opt.active {
  box-shadow: none;
  transform: none;
}

.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* floating overlays (modal/menu/toast) get a bigger, softer raised shadow --
   they sit above the flat page, not carved into it. The block picker modal
   is excluded: its dual-tone shadow (two differently-colored corners) read
   as a gradient running around the edge, so it keeps its own flat solid
   border + plain drop shadow instead (see .block-pop-box above). */
.modal-box,
.ctx-menu,
.toast {
  border-color: transparent;
  box-shadow: 6px 6px 13px var(--neu-dark), -6px -6px 13px var(--neu-light);
}