/* src/components/MorphBar.module.css */
.MorphBar_bar {
  position: relative;
  height: 84px;
  border-radius: 42px;
  background:
    linear-gradient(
      180deg,
      var(--bar-from) 0%,
      var(--bar-to) 100%);
  box-shadow:
    inset 0 1px 0 var(--bar-sheen),
    0 0 0 0.5px var(--bar-edge),
    0 1px 2px rgba(0, 0, 0, calc(0.05 * var(--bar-lift, 1))),
    0 5px 12px rgba(0, 0, 0, calc(0.09 * var(--bar-lift, 1))),
    0 9px 20px rgba(0, 0, 0, calc(0.06 * var(--bar-lift, 1)));
  overflow: hidden;
  --ease-settle: cubic-bezier(0.22, 0.9, 0.16, 1);
  transform-origin: var(--fold-origin, center);
  transition:
    width 520ms var(--ease-settle),
    height 520ms var(--ease-settle),
    border-radius 440ms var(--ease-settle),
    translate 540ms var(--ease-settle),
    scale 540ms var(--ease-settle),
    transform 540ms var(--ease-settle),
    transform-origin 540ms var(--ease-settle);
}
.MorphBar_bar.MorphBar_collapsed {
  width: 84px;
  scale: 0.667;
  min-width: 0;
  overflow: hidden;
  clip-path: none;
  cursor: pointer;
}
.MorphBar_bar.MorphBar_vertical.MorphBar_collapsed {
  width: 66px;
  height: 66px;
  scale: 0.848;
}
.MorphBar_bar.MorphBar_collapsed .MorphBar_panel,
.MorphBar_bar.MorphBar_collapsed .MorphBar_collapsedContent {
  pointer-events: none;
}
.MorphBar_bar.MorphBar_collapsed .MorphBar_panel {
  transition:
    opacity 300ms ease-out,
    filter 260ms ease-out,
    transform 300ms ease-out;
  filter: blur(9px);
  transform: scale(0.94);
}
.MorphBar_expandHit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.MorphBar_collapsedContent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 200ms ease-out, filter 200ms ease-out;
}
.MorphBar_collapsedContent[data-shown] {
  opacity: 1;
  filter: blur(0);
  transition: opacity 140ms ease-in, filter 320ms var(--ease-smooth);
}
.MorphBar_clip {
  position: absolute;
  inset: 0;
}
.MorphBar_panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.125rem;
  padding: 0 2rem;
  width: max-content;
  transition:
    opacity 260ms var(--ease-smooth),
    filter 340ms var(--ease-smooth),
    transform 520ms var(--ease-settle);
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.86);
  pointer-events: none;
}
.MorphBar_panel[data-active] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  pointer-events: auto;
  transition-delay:
    60ms,
    60ms,
    0ms;
}
.MorphBar_vertical {
  width: 66px;
  height: auto;
  border-radius: 33px;
  overflow: visible;
}
.MorphBar_vertical[data-side=left] .MorphBar_clip,
.MorphBar_vertical[data-side=left] .MorphBar_collapsedContent {
  clip-path: inset(0 -160px 0 0);
}
.MorphBar_vertical[data-side=right] .MorphBar_clip,
.MorphBar_vertical[data-side=right] .MorphBar_collapsedContent {
  clip-path: inset(0 0 0 -160px);
}
.MorphBar_vertical .MorphBar_panel {
  width: 66px;
  height: max-content;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem 0;
}
.MorphBar_centered {
  align-items: center;
  gap: 0.5rem;
}

/* src/components/BarSlider.module.css */
.BarSlider_field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: var(--field-w, 148px);
  flex: none;
}
.BarSlider_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.003rem;
}
.BarSlider_label {
  color: var(--ink-faint);
}
.BarSlider_value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.BarSlider_track {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.BarSlider_groove {
  position: absolute;
  inset: 2px 0;
  border-radius: 6px;
  background: var(--sunk);
  overflow: hidden;
}
.BarSlider_track::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}
.BarSlider_checker {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(rgba(0, 0, 0, 0.1) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
}
.BarSlider_fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  transition: width 340ms var(--ease-smooth);
}
.BarSlider_track[data-dragging=true] .BarSlider_fill {
  transition: none;
}
.BarSlider_knob {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.22);
  translate: -50% -50%;
  transition: left 340ms var(--ease-smooth), transform 160ms var(--ease-smooth);
  pointer-events: none;
}
.BarSlider_track[data-dragging=true] .BarSlider_knob {
  transition: transform 160ms var(--ease-smooth);
}
.BarSlider_track:hover .BarSlider_knob,
.BarSlider_track[data-dragging=true] .BarSlider_knob {
  transform: scale(1.14);
}
.BarSlider_track[data-dragging=true] .BarSlider_knob {
  transition: transform 160ms var(--ease-smooth);
}
.BarSlider_fieldVertical {
  width: auto;
  align-items: center;
  gap: 0.5rem;
}
.BarSlider_fieldVertical .BarSlider_head {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.BarSlider_trackVertical {
  width: 16px;
  height: 120px;
}
.BarSlider_trackVertical::before {
  inset: -4px -10px;
}
.BarSlider_trackVertical .BarSlider_groove {
  inset: 0 2px;
}
.BarSlider_trackVertical .BarSlider_fill {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  transition: height 340ms var(--ease-smooth);
}
.BarSlider_trackVertical[data-dragging=true] .BarSlider_fill {
  transition: none;
}
.BarSlider_trackVertical .BarSlider_knob {
  top: auto;
  left: 50%;
  transition: bottom 340ms var(--ease-smooth), transform 160ms var(--ease-smooth);
  translate: -50% 50%;
}
.BarSlider_trackVertical[data-dragging=true] .BarSlider_knob {
  transition: transform 160ms var(--ease-smooth);
}

/* src/components/Toolbar.module.css */
.Toolbar_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}
.Toolbar_seated {
  display: flex;
  align-items: center;
  height: 100%;
  padding-bottom: 0;
  flex: none;
}
.Toolbar_round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink-soft);
  background: transparent;
  transition:
    background-color 160ms var(--ease-smooth),
    color 160ms var(--ease-smooth),
    transform 140ms var(--ease-smooth),
    opacity 200ms var(--ease-smooth);
}
.Toolbar_round:active:not(:disabled) {
  transform: scale(0.9);
}
.Toolbar_round:disabled {
  opacity: 0.28;
}
.Toolbar_divider {
  flex: none;
  width: 1px;
  height: 22px;
  align-self: center;
  background: var(--hairline);
  margin: 0 0.625rem;
}
.Toolbar_tool {
  position: relative;
  flex: none;
  display: block;
  width: 34px;
  margin-bottom: -20px;
  transform: translateY(6px);
  transition: transform 380ms var(--ease-snappy), filter 380ms var(--ease-snappy);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
.Toolbar_tool[data-active] {
  transform: translateY(-12px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
}
.Toolbar_wheel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    conic-gradient(
      #ff383c,
      #ff8d28,
      #ffcc00,
      #34c759,
      #00c3d0,
      #0088ff,
      #6155f5,
      #d6336c,
      #ff383c);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.Toolbar_wheelInk {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bar-from), 0 0 0 3.5px var(--hairline);
  transition: background-color 240ms var(--ease-smooth);
}
.Toolbar_brushDot {
  border-radius: 50%;
  transition:
    width 260ms var(--ease-smooth),
    height 260ms var(--ease-smooth),
    background-color 240ms var(--ease-smooth),
    opacity 240ms var(--ease-smooth);
}
.Toolbar_row[data-open-end] {
  padding-right: 0.75rem;
}
.Toolbar_vertical .Toolbar_row[data-open-end] {
  padding-right: 0.5rem;
}
.Toolbar_vertical .Toolbar_row.Toolbar_inkRow {
  padding-bottom: 0.75rem;
}
.Toolbar_swatches {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex: none;
}
.Toolbar_chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 200ms var(--ease-smooth), box-shadow 200ms var(--ease-smooth);
}
.Toolbar_chip[data-active] {
  transform: scale(1.08) translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.24);
}
.Toolbar_tick {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 140ms ease-out, transform 240ms var(--ease-snappy);
  pointer-events: none;
}
.Toolbar_chip[data-active] .Toolbar_tick {
  opacity: 1;
  transform: scale(1);
}
.Toolbar_custom {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 220ms var(--ease-snappy);
}
.Toolbar_custom span {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px var(--bar-from);
  background-image:
    conic-gradient(
      #ff383c,
      #ffcc00,
      #34c759,
      #0088ff,
      #6155f5,
      #ff383c);
}
@media (pointer: coarse) {
  .Toolbar_round {
    width: 42px;
    height: 42px;
  }
  .Toolbar_tool {
    width: 38px;
  }
  .Toolbar_chip,
  .Toolbar_custom {
    width: 30px;
    height: 30px;
  }
}
.Toolbar_preview {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: background-color 120ms linear;
}
.Toolbar_row > .Toolbar_round:first-child,
.Toolbar_seated:first-child {
  margin-left: -7px;
}
.Toolbar_row > .Toolbar_round:last-child,
.Toolbar_seated:last-child {
  margin-right: -7px;
}
.Toolbar_vertical .Toolbar_row > .Toolbar_round:first-child,
.Toolbar_vertical .Toolbar_seated:first-child,
.Toolbar_vertical .Toolbar_row > .Toolbar_round:last-child,
.Toolbar_vertical .Toolbar_seated:last-child {
  margin-left: 0;
  margin-right: 0;
}
.Toolbar_peek {
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}
.Toolbar_vertical .Toolbar_peek {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  width: max-content;
}
.Toolbar_vertical .Toolbar_peek svg {
  width: 33px;
  height: auto;
}
.Toolbar_left .Toolbar_peek {
  transform: translate(-50%, -50%) rotate(90deg) translateY(21%);
  filter: drop-shadow(1px 0 2px rgba(0, 0, 0, 0.16));
}
.Toolbar_right .Toolbar_peek {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(21%);
  filter: drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.16));
}
.Toolbar_vertical .Toolbar_tool,
.Toolbar_vertical .Toolbar_tool:hover,
.Toolbar_vertical .Toolbar_tool[data-active] {
  filter: none;
  width: 34px;
  height: 34px;
  margin: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.Toolbar_vertical .Toolbar_tool svg {
  transform-origin: center;
  transition: transform 380ms var(--ease-snappy), filter 380ms var(--ease-snappy);
}
.Toolbar_left .Toolbar_tool svg {
  transform: rotate(90deg) translateY(30px);
  filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.12));
}
.Toolbar_left .Toolbar_tool[data-active] svg {
  transform: rotate(90deg) translateY(14px);
  filter: drop-shadow(4px 0 6px rgba(0, 0, 0, 0.18));
}
.Toolbar_right .Toolbar_tool svg {
  transform: rotate(-90deg) translateY(30px);
  filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.12));
}
.Toolbar_right .Toolbar_tool[data-active] svg {
  transform: rotate(-90deg) translateY(14px);
  filter: drop-shadow(-4px 0 6px rgba(0, 0, 0, 0.18));
}
.Toolbar_vertical .Toolbar_divider {
  width: 22px;
  height: 1px;
  margin: 0.375rem 0;
}
.Toolbar_vertical .Toolbar_seated {
  height: auto;
  margin: 0;
}
.Toolbar_vertical .Toolbar_row {
  flex-direction: column;
  height: auto;
  gap: 0.625rem;
}
.Toolbar_vertical .Toolbar_swatches {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.Toolbar_vertical .Toolbar_row {
  padding: 0 0.5rem;
}
.Toolbar_hex {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sunk) 42%, transparent);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 450;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: background 180ms var(--ease-snappy);
}
.Toolbar_hex:focus-within {
  background: color-mix(in srgb, var(--sunk) 70%, transparent);
}
.Toolbar_hex::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 160ms var(--ease-snappy), transform 220ms var(--ease-snappy);
  pointer-events: none;
}
.Toolbar_hex:focus-within::after {
  opacity: 1;
  transform: scale(1);
}
.Toolbar_hex input {
  width: 6.35ch;
  min-width: 6.35ch;
  text-align: left;
  border: 0;
  padding: 0;
  background: none;
  color: color-mix(in srgb, var(--ink-1) 82%, transparent);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  outline: none;
}
.Toolbar_hex input::selection {
  background: color-mix(in srgb, var(--accent, #4263eb) 28%, transparent);
}
.Toolbar_brushDot,
.Toolbar_preview {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.22);
}
.sd[data-theme=dark] .Toolbar_brushDot,
.sd[data-theme=dark] .Toolbar_preview {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
}
.Toolbar_wheelInk {
  box-shadow: 0 0 0 3px var(--bar-from), 0 0 0 3.5px var(--hairline);
}
.Toolbar_tail {
  padding-right: 7px;
}
.sd[data-placement=left] .Toolbar_tail,
.sd[data-placement=right] .Toolbar_tail {
  padding-bottom: 7px;
}
@media (hover: hover) {
  .Toolbar_round:hover:not(:disabled) {
    background: var(--sunk);
    color: var(--ink);
  }
  .Toolbar_round[data-tone=danger]:hover:not(:disabled) {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
  }
  .Toolbar_tool:not([data-active]):hover {
    transform: translateY(-1px);
  }
  .Toolbar_chip:hover {
    transform: scale(1.1);
  }
  .Toolbar_custom:hover {
    transform: scale(1.14);
  }
  .Toolbar_left .Toolbar_tool:not([data-active]):hover svg {
    transform: rotate(90deg) translateY(26px);
  }
  .Toolbar_right .Toolbar_tool:not([data-active]):hover svg {
    transform: rotate(-90deg) translateY(26px);
  }
}

/* src/components/ToolMenu.module.css */
.ToolMenu_menu {
  position: fixed;
  z-index: 2147482000;
  transform: translate(-50%, -100%);
  --field-w: 196px;
  padding: 13px 15px 14px;
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      var(--bar-from) 0%,
      var(--bar-to) 100%);
  box-shadow:
    inset 0 1px 0 var(--bar-sheen),
    0 0 0 0.5px var(--bar-edge),
    0 2px 6px rgb(0 0 0 / 0.07),
    0 10px 28px rgb(0 0 0 / 0.14);
  font-family: var(--font);
  color: var(--ink);
  animation: ToolMenu_rise 220ms cubic-bezier(0.2, 1.1, 0.36, 1) both;
}
.ToolMenu_menu[data-closing] {
  animation: ToolMenu_sink 150ms cubic-bezier(0.4, 0, 0.9, 0.5) both;
}
.ToolMenu_rows {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ToolMenu_beak {
  position: absolute;
  left: var(--beak-x, 50%);
  bottom: -8px;
  width: 20px;
  height: 9px;
  translate: -50% 0;
  background: var(--bar-to);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@keyframes ToolMenu_rise {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.9) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1) translateY(0);
  }
}
@keyframes ToolMenu_sink {
  from {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.92) translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ToolMenu_menu {
    animation-duration: 100ms;
    animation-timing-function: linear;
  }
}

/* src/components/Tooltip.module.css */
.Tooltip_anchor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none;
  will-change: transform;
  transition: transform 280ms cubic-bezier(0.33, 0.94, 0.24, 1);
}
.Tooltip_tip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  padding: 7px 12px 8px;
  border-radius: 999px;
  background: #26262b;
  color: #fff;
  white-space: nowrap;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-synthesis: none;
  transform-origin: 50% calc(100% + 4px);
  transform: translate(-50%, -100%);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.14), 0 8px 20px rgb(0 0 0 / 0.22);
  animation: Tooltip_pop 320ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
  transition: width 280ms cubic-bezier(0.33, 0.94, 0.24, 1);
  overflow: hidden;
  perspective: 190px;
  perspective-origin: 50% 50%;
}
.Tooltip_tip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.09) 0%,
      rgb(255 255 255 / 0.05) 34%,
      rgb(0 0 0 / 0) 60%,
      rgb(0 0 0 / 0.1) 100%);
}
.Tooltip_tip[data-at=right] {
  transform: translate(0, -50%);
  transform-origin: -4px 50%;
  animation-name: Tooltip_popRight;
}
.Tooltip_tip[data-at=left] {
  transform: translate(-100%, -50%);
  transform-origin: calc(100% + 4px) 50%;
  animation-name: Tooltip_popLeft;
}
.Tooltip_tip[data-closing] {
  animation: Tooltip_popOut 170ms cubic-bezier(0.4, 0, 0.9, 0.5) both;
}
.Tooltip_tip[data-at=right][data-closing] {
  animation-name: Tooltip_popOutRight;
}
.Tooltip_tip[data-at=left][data-closing] {
  animation-name: Tooltip_popOutLeft;
}
.Tooltip_face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: Tooltip_rollIn 300ms cubic-bezier(0.33, 0.94, 0.24, 1) both;
}
.Tooltip_face[data-leaving] {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: Tooltip_rollOut 300ms cubic-bezier(0.33, 0.94, 0.24, 1) both;
}
@keyframes Tooltip_rollIn {
  from {
    opacity: 0;
    transform: translateY(112%) rotateX(-78deg);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}
@keyframes Tooltip_rollOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(0deg);
  }
  45% {
    opacity: 0.75;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -162%) rotateX(78deg);
  }
}
.Tooltip_label {
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: 0.005em;
  line-height: 1;
}
.Tooltip_hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
@keyframes Tooltip_pop {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.72) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1) translateY(0);
  }
}
@keyframes Tooltip_popOut {
  from {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.82) translateY(4px);
  }
}
@keyframes Tooltip_popOutRight {
  from {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(0, -50%) scale(0.82) translateX(-4px);
  }
}
@keyframes Tooltip_popOutLeft {
  from {
    opacity: 1;
    transform: translate(-100%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-100%, -50%) scale(0.82) translateX(4px);
  }
}
@keyframes Tooltip_popRight {
  from {
    opacity: 0;
    transform: translate(0, -50%) scale(0.72) translateX(-5px);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%) scale(1) translateX(0);
  }
}
@keyframes Tooltip_popLeft {
  from {
    opacity: 0;
    transform: translate(-100%, -50%) scale(0.72) translateX(5px);
  }
  to {
    opacity: 1;
    transform: translate(-100%, -50%) scale(1) translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .Tooltip_anchor {
    transition: none;
  }
  .Tooltip_face,
  .Tooltip_face[data-leaving] {
    animation-duration: 100ms;
    animation-timing-function: linear;
  }
  .Tooltip_tip {
    animation: Tooltip_fade 120ms linear both;
  }
  @keyframes Tooltip_fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* src/components/TrashIcon.module.css */
.TrashIcon_icon {
  overflow: visible;
}
.TrashIcon_lid {
  transform-origin: 3.6px 5.6px;
  transform-box: view-box;
  transition: transform 360ms var(--ease-snappy);
}
button:hover:not(:disabled) .TrashIcon_lid {
  transform: rotate(-24deg) translate(0.6px, -1.1px);
}
button:active:not(:disabled) .TrashIcon_lid {
  transform: rotate(-12deg) translate(0.3px, -0.5px);
}
@media (prefers-reduced-motion: reduce) {
  .TrashIcon_lid {
    transition: none;
  }
}

/* src/components/Draw.module.css */
.Draw_root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--workspace);
  border-radius: inherit;
}
.Draw_root[data-background=none] {
  background: transparent;
}
.Draw_surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.Draw_toolbar {
  position: absolute;
  z-index: 30;
  --sd-motion: 360ms;
  --sd-motion-fade: calc(var(--sd-motion) * 0.75);
}
.Draw_toolbar[data-motion-in=rise] {
  animation: Draw_sdBarRise var(--sd-motion) var(--ease-snappy) backwards, Draw_sdBarFade var(--sd-motion-fade) ease-out backwards;
}
.Draw_toolbar[data-placement=left][data-motion-in=rise] {
  animation-name: Draw_sdBarRiseLeft, Draw_sdBarFade;
}
.Draw_toolbar[data-placement=right][data-motion-in=rise] {
  animation-name: Draw_sdBarRiseRight, Draw_sdBarFade;
}
.Draw_toolbar[data-leaving][data-motion-out=rise] {
  animation: Draw_sdBarFall calc(var(--sd-motion) * 0.58) var(--ease-settle, ease-in) forwards, Draw_sdBarFadeOut calc(var(--sd-motion) * 0.46) ease-in forwards;
}
.Draw_toolbar[data-placement=left][data-leaving][data-motion-out=rise] {
  animation-name: Draw_sdBarFallLeft, Draw_sdBarFadeOut;
}
.Draw_toolbar[data-placement=right][data-leaving][data-motion-out=rise] {
  animation-name: Draw_sdBarFallRight, Draw_sdBarFadeOut;
}
.Draw_toolbar[data-leaving][data-motion-out=none] {
  animation: Draw_sdBarFadeOut 1ms linear forwards;
}
.Draw_toolbar[data-motion-in=none] {
  animation: none;
}
.Draw_toolbar {
  --sd-inset: 1.25rem;
  --sd-room: calc(100% - var(--sd-inset) * 2);
}
.Draw_toolbar[data-placement=bottom] {
  bottom: var(--sd-inset);
  max-width: var(--sd-room);
}
.Draw_toolbar[data-placement=bottom][data-align=center] {
  left: 50%;
  translate: -50% 0;
}
.Draw_toolbar[data-placement=bottom][data-align=start] {
  left: var(--sd-inset);
}
.Draw_toolbar[data-placement=bottom][data-align=end] {
  right: var(--sd-inset);
}
.Draw_toolbar[data-placement=left] {
  left: var(--sd-inset);
  max-height: var(--sd-room);
}
.Draw_toolbar[data-placement=right] {
  right: var(--sd-inset);
  max-height: var(--sd-room);
}
.Draw_toolbar[data-placement=left][data-align=center],
.Draw_toolbar[data-placement=right][data-align=center] {
  top: 50%;
  translate: 0 -50%;
}
.Draw_toolbar[data-placement=left][data-align=start],
.Draw_toolbar[data-placement=right][data-align=start] {
  top: var(--sd-inset);
}
.Draw_toolbar[data-placement=left][data-align=end],
.Draw_toolbar[data-placement=right][data-align=end] {
  bottom: var(--sd-inset);
}
@keyframes Draw_sdBarRise {
  from {
    transform: translateY(13px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes Draw_sdBarRiseLeft {
  from {
    transform: translateX(-13px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes Draw_sdBarRiseRight {
  from {
    transform: translateX(13px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes Draw_sdBarFall {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
@keyframes Draw_sdBarFallLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes Draw_sdBarFallRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes Draw_sdBarFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Draw_sdBarFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .Draw_toolbar[data-motion-in=rise],
  .Draw_toolbar[data-leaving][data-motion-out=rise] {
    animation-name: Draw_sdBarFade;
    animation-duration: 120ms;
    animation-timing-function: linear;
  }
  .Draw_toolbar[data-leaving][data-motion-out=rise] {
    animation-name: Draw_sdBarFadeOut;
  }
}
.Draw_toolbar[data-draggable] {
  transition:
    rotate 260ms var(--ease-snappy),
    scale 260ms var(--ease-snappy),
    filter 260ms var(--ease-snappy);
}
.Draw_toolbar[data-draggable]:active,
.Draw_toolbar[data-held] {
  cursor: grabbing;
}
.Draw_toolbar[data-held] {
  rotate: -1.4deg;
  scale: 1.035;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.09));
  transition:
    rotate 220ms var(--ease-snappy),
    scale 220ms var(--ease-snappy),
    filter 220ms var(--ease-snappy);
}
.Draw_toolbar[data-held] * {
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  .Draw_toolbar[data-draggable],
  .Draw_toolbar[data-held] {
    rotate: none;
    scale: 1;
    transition: none;
  }
}

/* src/components/tokens.css */
.sd {
  --font:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --workspace: #edebe7;
  --ink: #111111;
  --ink-soft: #8a8a8e;
  --ink-faint: rgba(0, 0, 0, 0.28);
  --hairline: rgba(0, 0, 0, 0.1);
  --pill-bg: #1a1a1a;
  --accent: #0088ff;
  --red: #ff383c;
  --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --tool-1: #c6c4bf;
  --tool-2: #eeedea;
  --tool-3: #ffffff;
  --tool-4: #f3f2ef;
  --tool-5: #dedcd7;
  --tool-6: #c4c2bd;
  --metal-1: #6f6d68;
  --metal-2: #bab8b3;
  --metal-3: #e4e2de;
  --metal-4: #a6a49f;
  --metal-5: #6a6863;
  --smetal-1: #7d7a74;
  --smetal-2: #cbc7c0;
  --smetal-3: #fdfdfc;
  --smetal-4: #e2dfd9;
  --smetal-5: #b8b4ad;
  --smetal-6: #8d8a84;
  --smetal-7: #6e6b66;
  --smetal-8: #a5a29b;
  --pfacet-1: #ece8e2;
  --pfacet-2: #f8f6f2;
  --pfacet-3: #fdfcfa;
  --pfacet-4: #f8f5f1;
  --pfacet-5: #ebe7e0;
  --pfacet-6: #dad5cd;
  --studio-1: #dcd8d2;
  --studio-2: #f6f4f1;
  --studio-3: #ffffff;
  --studio-4: #fdfcfb;
  --studio-5: #f8f6f3;
  --studio-6: #eceae5;
  --studio-7: #dcd8d1;
  --studio-8: #e6e2dc;
  --tool-collar: #413e3a;
  --bar-from: #fbfaf9;
  --bar-to: #f1efec;
  --bar-edge: rgba(0, 0, 0, 0.07);
  --bar-sheen: rgba(255, 255, 255, 0.9);
  --sunk: rgba(0, 0, 0, 0.055);
  --raised: #ffffff;
}
@supports (color: color(display-p3 1 1 1)) {
  .sd {
    --accent: color(display-p3 0 0.53 1);
    --red: color(display-p3 1 0.22 0.24);
  }
}
.sd[data-theme=dark],
.sd[data-theme=auto] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .sd[data-theme=auto] {
    --workspace: #131315;
    --ink: #f4f3f1;
    --ink-soft: #b4b4bb;
    --ink-faint: rgba(255, 255, 255, 0.45);
    --hairline: rgba(255, 255, 255, 0.16);
    --bar-from: #35353b;
    --bar-to: #26262b;
    --bar-edge: rgba(0, 0, 0, 0.6);
    --bar-sheen: rgba(255, 255, 255, 0.11);
    --sunk: rgba(0, 0, 0, 0.34);
    --raised: #e9e8e6;
    --tool-1: #232327;
    --tool-2: #34343a;
    --tool-3: #47474f;
    --tool-4: #3a3a41;
    --tool-5: #2a2a2f;
    --tool-6: #1f1f23;
    --metal-1: #34343a;
    --metal-2: #63636d;
    --metal-3: #83838e;
    --metal-4: #51515a;
    --metal-5: #2e2e34;
    --smetal-1: #2b2b30;
    --smetal-2: #6e6e78;
    --smetal-3: #a9a9b4;
    --smetal-4: #85858f;
    --smetal-5: #63636d;
    --smetal-6: #45454d;
    --smetal-7: #2e2e34;
    --smetal-8: #56565f;
    --pfacet-1: #32323a;
    --pfacet-2: #3f3f48;
    --pfacet-3: #45454e;
    --pfacet-4: #414149;
    --pfacet-5: #37373f;
    --pfacet-6: #2b2b32;
    --studio-1: #202024;
    --studio-2: #45454e;
    --studio-3: #5a5a65;
    --studio-4: #4e4e57;
    --studio-5: #43434b;
    --studio-6: #33333a;
    --studio-7: #26262b;
    --studio-8: #35353c;
    --tool-collar: #101013;
    --accent: #3d9bff;
  }
}
.sd[data-theme=dark] {
  --workspace: #131315;
  --ink: #f4f3f1;
  --ink-soft: #b4b4bb;
  --ink-faint: rgba(255, 255, 255, 0.45);
  --hairline: rgba(255, 255, 255, 0.16);
  --bar-from: #35353b;
  --bar-to: #26262b;
  --bar-edge: rgba(0, 0, 0, 0.6);
  --bar-sheen: rgba(255, 255, 255, 0.11);
  --sunk: rgba(0, 0, 0, 0.34);
  --raised: #e9e8e6;
  --tool-1: #232327;
  --tool-2: #34343a;
  --tool-3: #47474f;
  --tool-4: #3a3a41;
  --tool-5: #2a2a2f;
  --tool-6: #1f1f23;
  --metal-1: #34343a;
  --metal-2: #63636d;
  --metal-3: #83838e;
  --metal-4: #51515a;
  --metal-5: #2e2e34;
  --smetal-1: #2b2b30;
  --smetal-2: #6e6e78;
  --smetal-3: #a9a9b4;
  --smetal-4: #85858f;
  --smetal-5: #63636d;
  --smetal-6: #45454d;
  --smetal-7: #2e2e34;
  --smetal-8: #56565f;
  --pfacet-1: #32323a;
  --pfacet-2: #3f3f48;
  --pfacet-3: #45454e;
  --pfacet-4: #414149;
  --pfacet-5: #37373f;
  --pfacet-6: #2b2b32;
  --studio-1: #202024;
  --studio-2: #45454e;
  --studio-3: #5a5a65;
  --studio-4: #4e4e57;
  --studio-5: #43434b;
  --studio-6: #33333a;
  --studio-7: #26262b;
  --studio-8: #35353c;
  --tool-collar: #101013;
  --accent: #3d9bff;
}
:where(.sd),
:where(.sd) *,
:where(.sd) *::before,
:where(.sd) *::after {
  box-sizing: border-box;
}
:where(.sd) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
:where(.sd) :where(button:disabled) {
  cursor: not-allowed;
}
.sd {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.sd[data-depth=flat] {
  --bar-lift: 0;
  --bar-to: var(--bar-from);
  --bar-sheen: transparent;
}
.sd[data-depth=soft] {
  --bar-lift: 0.5;
}
.sd[data-depth=regular] {
  --bar-lift: 1;
}
.sd[data-depth=strong] {
  --bar-lift: 1.28;
}