:root {
  --radius: 0.5rem;
  --background: oklch(0.985 0.003 85);
  --foreground: oklch(0.21 0.006 70);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.21 0.006 70);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.21 0.006 70);
  --primary: oklch(0.23 0.006 70);
  --primary-foreground: oklch(0.985 0.003 85);
  --secondary: oklch(0.955 0.004 85);
  --secondary-foreground: oklch(0.23 0.006 70);
  --muted: oklch(0.96 0.004 85);
  --muted-foreground: oklch(0.47 0.008 70);
  --accent: oklch(0.945 0.005 85);
  --accent-foreground: oklch(0.23 0.006 70);
  --destructive: oklch(0.53 0.2 27);
  --border: oklch(0.905 0.005 85);
  --input: oklch(0.85 0.006 85);
  --ring: oklch(0.6 0.2 35);
  --chart-1: oklch(0.6 0.2 35);
  --chart-2: oklch(0.48 0.09 250);
  --chart-3: oklch(0.7 0.13 85);
  --chart-4: oklch(0.56 0.08 150);
  --chart-5: oklch(0.52 0.06 330);
}
@media (prefers-color-scheme: dark) { :root {
  --background: oklch(0.135 0.003 70);
  --foreground: oklch(0.95 0.004 85);
  --card: oklch(0.165 0.003 70);
  --card-foreground: oklch(0.95 0.004 85);
  --popover: oklch(0.185 0.003 70);
  --popover-foreground: oklch(0.95 0.004 85);
  --primary: oklch(0.95 0.004 85);
  --primary-foreground: oklch(0.17 0.005 70);
  --secondary: oklch(0.22 0.003 70);
  --secondary-foreground: oklch(0.95 0.004 85);
  --muted: oklch(0.21 0.003 70);
  --muted-foreground: oklch(0.72 0.006 80);
  --accent: oklch(0.24 0.003 70);
  --accent-foreground: oklch(0.95 0.004 85);
  --destructive: oklch(0.7 0.18 25);
  --border: oklch(0.26 0.003 70);
  --input: oklch(0.34 0.003 70);
  --ring: oklch(0.7 0.17 38);
  --chart-1: oklch(0.7 0.17 38);
  --chart-2: oklch(0.7 0.1 250);
  --chart-3: oklch(0.8 0.12 85);
  --chart-4: oklch(0.72 0.1 150);
  --chart-5: oklch(0.72 0.07 330);
} }
/* Standalone component styles. Semantic color variables are supplied by the theme. */
.lathe-web,
.lathe-web *,
.lathe-web *::before,
.lathe-web *::after {
  box-sizing: border-box;
}
.lathe-web {
  color: var(--foreground);
  font:
    14px/1.5 system-ui,
    sans-serif;
}
.lathe-web h1 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.lathe-web p {
  color: var(--muted-foreground);
}
.lathe-web button,
.lathe-web input,
.lathe-web select {
  font: inherit;
  color: inherit;
}
.lathe-web button,
.lathe-web select {
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--background);
  padding: 7px 12px;
  cursor: pointer;
}
.lathe-web button:disabled,
.lathe-web input:disabled,
.lathe-web select:disabled {
  opacity: 0.5;
  cursor: default;
}
.lathe-web :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
.lathe-web input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}
.lathe-panel {
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  padding: 24px;
}
.lathe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.lathe-number {
  display: block;
  font:
    48px/1.2 ui-monospace,
    monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}
.lathe-compare {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--muted);
}
.lathe-compare img {
  display: block;
  width: 100%;
  height: auto;
}
.lathe-compare [data-compare-after] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 50% 0 0);
}
.lathe-compare [data-compare-handle] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--background);
  pointer-events: none;
}
.lathe-compare [data-compare-handle]::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 5px 10px;
}
.lathe-scrub-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.lathe-scrub-label button {
  font-size: 12px;
}
.lathe-scrub-row {
  display: flex;
  min-width: 0;
  border: 1px solid var(--input);
  border-radius: 8px;
}
.lathe-scrub-row input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px;
  font-family: ui-monospace, monospace;
}
.lathe-scrub-row select {
  max-width: 100px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
}
.lathe-scrub-row [data-scrub-handle] {
  touch-action: none;
  cursor: ew-resize;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
}
.lathe-drawing {
  display: block;
  width: 100%;
  height: 140px;
  color: var(--primary);
}
.lathe-marquee {
  overflow: hidden;
  padding-block: 16px;
}
.lathe-marquee [data-marquee-track] {
  display: flex;
  width: max-content;
  gap: 32px;
}
.lathe-marquee[data-marquee-active] [data-marquee-track] {
  animation: lathe-marquee var(--lathe-marquee-duration, 20s) linear infinite;
}
.lathe-marquee [data-marquee-group] {
  display: flex;
  gap: 32px;
  align-items: center;
  min-width: 640px;
  justify-content: space-around;
}
.lathe-marquee span {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.lathe-marquee:hover [data-marquee-track],
.lathe-marquee:focus-within [data-marquee-track] {
  animation-play-state: paused;
}
@keyframes lathe-marquee {
  to {
    transform: translateX(calc(-1 * var(--lathe-marquee-distance, 640px)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lathe-marquee {
    overflow-x: auto;
  }
  .lathe-marquee[data-marquee-active] [data-marquee-track] {
    animation: none;
  }
  .lathe-marquee [aria-hidden="true"] {
    display: none;
  }
}