/* Generated by assets/tiles/build.js — edit assets/tiles/<slug>.css instead. */

/* Base layer shared by every tile. */
.tile-art {
  position: absolute;
  inset: 0;
}

.tile-fallback {
  position: absolute;
  display: grid;
  inset: 0;
  place-items: center;
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  font-size: 4.6rem;
  font-weight: 800;
  letter-spacing: -.06em;
}

/* image-studio — Image Studio */
.art-image-studio .image-studio-scene {
  display: block;
  width: 100%;
  height: 100%;
}

/* photo: flat abstract scene behind the crop overlay */
.art-image-studio .image-studio-stop-a {
  stop-color: var(--white);
}
.art-image-studio .image-studio-stop-b {
  stop-color: color-mix(in srgb, var(--accent) 8%, var(--white));
}
.art-image-studio .image-studio-ground {
  fill: color-mix(in srgb, var(--accent) 14%, var(--paper-deep));
}
.art-image-studio .image-studio-hill-a {
  fill: color-mix(in srgb, var(--accent) 24%, var(--paper-deep));
}
.art-image-studio .image-studio-hill-b {
  fill: color-mix(in srgb, var(--accent) 40%, var(--paper-deep));
}
.art-image-studio .image-studio-sun {
  fill: color-mix(in srgb, var(--accent) 70%, var(--white));
}
.art-image-studio .image-studio-horizon {
  fill: color-mix(in srgb, var(--ink) 16%, transparent);
}

/* dimmed area outside the crop rectangle */
.art-image-studio .image-studio-dim {
  fill: color-mix(in srgb, var(--ink) 40%, transparent);
}

/* crop rectangle, thirds guides, corner handles */
.art-image-studio .image-studio-crop-rect {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 75%, transparent);
  stroke-width: 1.4;
}
.art-image-studio .image-studio-guide {
  fill: color-mix(in srgb, var(--white) 80%, transparent);
}
.art-image-studio .image-studio-handle {
  fill: var(--accent);
  stroke: var(--white);
  stroke-width: 0.8;
  rx: 1;
}

/*
 * Hover moves the crop tighter by scaling the whole crop group (rect,
 * guides, handles) as one rigid unit around the crop rectangle's own
 * centre (203, 121 in viewBox units) instead of animating each child's
 * geometry independently. A single shared transform makes it provable
 * that the handles stay glued to the rectangle's corners and the guides
 * stay glued to its thirds at every point of the transition, not just at
 * rest. The dim-mask hole gets the identical transform so the undimmed
 * region always matches the rectangle exactly.
 */
.art-image-studio .image-studio-crop-group,
.art-image-studio .image-studio-hole {
  transform-origin: 203px 121px;
  transition: transform 360ms ease-out;
}
.art-image-studio .image-studio-handle {
  /* counter-scaled on hover so the handles keep a constant on-screen
     size instead of shrinking along with the group */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 360ms ease-out;
}

.card:hover .art-image-studio .image-studio-crop-group,
.card:hover .art-image-studio .image-studio-hole {
  transform: scale(0.93);
}
.card:hover .art-image-studio .image-studio-handle {
  transform: scale(1.0753);
}

/* readout chip */
.art-image-studio .image-studio-readout-bg {
  fill: color-mix(in srgb, var(--white) 88%, transparent);
}
.art-image-studio .image-studio-readout {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .art-image-studio * { transition: none; animation: none; }
}

/* pdf-toolkit — PDF Toolkit */
.art-pdf-toolkit {
  width: 100%;
  height: 100%;
}

.art-pdf-toolkit .pdftk-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-pdf-toolkit .pdftk-page-bg {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1;
}

.art-pdf-toolkit .pdftk-heading {
  fill: color-mix(in srgb, var(--ink) 30%, transparent);
}

.art-pdf-toolkit .pdftk-line {
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
}

.art-pdf-toolkit .pdftk-num {
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.03em;
  fill: color-mix(in srgb, var(--muted) 85%, transparent);
}

.art-pdf-toolkit .pdftk-split {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, var(--ink) 10%);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}

.art-pdf-toolkit .pdftk-gap {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 50%, transparent);
  stroke-width: 1.3;
  stroke-dasharray: 3 3;
  transition: opacity 0.35s ease-out;
}

.art-pdf-toolkit .pdftk-drag-page {
  fill: color-mix(in srgb, var(--accent) 14%, var(--white));
  stroke: var(--accent);
  stroke-width: 1.4;
}

.art-pdf-toolkit .pdftk-heading-drag {
  fill: color-mix(in srgb, var(--accent) 55%, var(--ink) 20%);
}

.art-pdf-toolkit .pdftk-line-drag {
  stroke: color-mix(in srgb, var(--accent) 40%, var(--ink) 15%);
  stroke-width: 1;
  stroke-linecap: round;
}

.art-pdf-toolkit .pdftk-num-drag {
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.03em;
  fill: color-mix(in srgb, var(--accent) 70%, var(--ink) 10%);
}

.art-pdf-toolkit .pdftk-drag-inner {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(-16px, -20px) rotate(-7deg) scale(1.04);
  transition: transform 0.35s ease-out;
}

.card:hover .art-pdf-toolkit .pdftk-drag-inner {
  transform: translate(0, 0) rotate(0deg) scale(1);
}

.card:hover .art-pdf-toolkit .pdftk-gap {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .art-pdf-toolkit * { transition: none; animation: none; }
}

/* background-remover — Background Remover */
.art-background-remover {
  background: var(--paper);
}

.art-background-remover .bgrm-checker {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, var(--paper-deep) 25%, transparent 25%, transparent 75%, var(--paper-deep) 75%),
    linear-gradient(45deg, var(--paper-deep) 25%, transparent 25%, transparent 75%, var(--paper-deep) 75%);
  background-size: 11px 11px;
  background-position: 0 0, 5.5px 5.5px;
}

.art-background-remover .bgrm-photo {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--accent) 14%, var(--paper));
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.35s ease-out;
  overflow: hidden;
}

.art-background-remover .bgrm-photo-disc {
  position: absolute;
  top: -8%;
  left: 14%;
  width: 55%;
  height: 55%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.art-background-remover .bgrm-photo-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 68%;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.art-background-remover .bgrm-subject {
  position: absolute;
  left: 25%;
  top: 27%;
  width: 48%;
  height: 88%;
  overflow: visible;
}

.art-background-remover .bgrm-subject-fill {
  fill: color-mix(in srgb, var(--ink) 62%, var(--accent));
}

.art-background-remover .bgrm-subject-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-dasharray: 3 3.5;
  opacity: 0.85;
}

.art-background-remover .bgrm-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--white) 70%, transparent);
  transition: left 0.35s ease-out;
}

.art-background-remover .bgrm-handle {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 20px;
  border-radius: 5px;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.art-background-remover .bgrm-handle-grip {
  width: 4px;
  height: 1.4px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--muted) 90%, transparent);
}

.card:hover .art-background-remover .bgrm-photo {
  clip-path: inset(0 58% 0 0);
}

.card:hover .art-background-remover .bgrm-divider {
  left: 42%;
}

@media (prefers-reduced-motion: reduce) {
  .art-background-remover * { transition: none; animation: none; }
}

/* file-converter — File Converter */
.art-file-converter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--paper)) 0%, color-mix(in srgb, var(--accent) 11%, var(--paper-deep)) 100%);
}

.art-file-converter svg {
  width: 92%;
  height: 88%;
  display: block;
  overflow: visible;
}

.art-file-converter .file-converter-chip {
  transition: transform 320ms ease-out;
}

.card:hover .art-file-converter .file-converter-chip-1 {
  transform: translateX(7px);
}

.card:hover .art-file-converter .file-converter-chip-2 {
  transform: translateX(8px);
}

.card:hover .art-file-converter .file-converter-chip-3 {
  transform: translateX(7px);
}

.card:hover .art-file-converter .file-converter-chip-4 {
  transform: translateX(8px);
}

@media (prefers-reduced-motion: reduce) {
  .art-file-converter * { transition: none; animation: none; }
}

/* chess-coach — Chess Coach */
.art-chess-coach svg {
  display: block;
  width: 100%;
  height: 100%;
}

.art-chess-coach .cc-sq-light {
  fill: var(--white);
}

.art-chess-coach .cc-sq-dark {
  fill: color-mix(in srgb, var(--accent) 55%, var(--paper-deep));
}

.art-chess-coach .cc-piece {
  text-anchor: middle;
  fill: var(--ink);
}

.art-chess-coach .cc-king {
  font-size: 24px;
  fill: color-mix(in srgb, var(--ink) 80%, var(--muted));
}

.art-chess-coach .cc-knight {
  font-size: 32px;
}

.art-chess-coach .cc-arrow {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-chess-coach .cc-arrowhead {
  fill: var(--accent);
}

.art-chess-coach .cc-badge {
  fill: var(--accent);
  stroke: var(--white);
  stroke-width: 1.5;
}

.art-chess-coach .cc-badge-text {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--white);
  letter-spacing: .02em;
}

.art-chess-coach .cc-eval-black {
  fill: color-mix(in srgb, var(--ink) 82%, var(--accent));
}

.art-chess-coach .cc-eval-white {
  fill: var(--white);
  transition: height .35s ease-out;
}

.art-chess-coach .cc-eval-border {
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1;
}

.card:hover .art-chess-coach .cc-eval-white {
  height: 132px;
}

@media (prefers-reduced-motion: reduce) {
  .art-chess-coach * { transition: none; animation: none; }
}

/* dictation — Whisper Dictation */
.art-dictation .dict-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-dictation .dict-dot {
  fill: var(--accent);
}

.art-dictation .dict-timer {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  fill: var(--muted);
  dominant-baseline: middle;
}

.art-dictation .dict-word {
  fill: color-mix(in srgb, var(--ink) 68%, transparent);
}

.art-dictation .dict-word-hover {
  fill: color-mix(in srgb, var(--accent) 65%, var(--ink));
  opacity: 0;
  transition: opacity .3s ease-out;
}

.art-dictation .dict-caret line {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.art-dictation .dict-caret {
  transition: transform .3s ease-out;
}

.art-dictation .dict-baseline {
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1;
}

.art-dictation .dict-bar {
  fill: var(--accent);
}

.art-dictation .dict-bar-0 {
  transition: opacity .3s ease-out, transform .3s ease-out;
  transform-box: fill-box;
  transform-origin: bottom center;
}

.art-dictation .dict-bars-rest {
  transition: transform .3s ease-out;
}

.card:hover .art-dictation .dict-caret {
  transform: translateX(16px);
}

.card:hover .art-dictation .dict-bar-0 {
  opacity: 0;
  transform: scaleY(.2);
}

.card:hover .art-dictation .dict-bars-rest {
  transform: translateX(-15px);
}

.card:hover .art-dictation .dict-word-hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .art-dictation * { transition: none; animation: none; }
}

/* ocr — OCR Reader */
.art-ocr {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--paper)) 0%, color-mix(in srgb, var(--accent) 9%, var(--paper)) 100%);
}

.art-ocr .ocr-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-ocr .ocr-page-shadow {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
}

.art-ocr .ocr-page {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--ink) 12%, transparent);
  stroke-width: 1;
}

/* The photographed text: soft grey, as ink on paper reads in a photo. */
.art-ocr .ocr-ink rect {
  fill: color-mix(in srgb, var(--ink) 42%, var(--paper-deep));
}

.art-ocr .ocr-boxes rect {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--accent);
  stroke-width: 1;
}

.art-ocr .ocr-beam-stop-top {
  stop-color: var(--accent);
  stop-opacity: 0;
}

.art-ocr .ocr-beam-stop-bottom {
  stop-color: var(--accent);
  stop-opacity: .22;
}

.art-ocr .ocr-beam-glow {
  fill: url(#ocr-beam-grad);
}

.art-ocr .ocr-beam-line {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.art-ocr .ocr-card {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--accent) 24%, transparent);
  stroke-width: 1;
}

.art-ocr .ocr-text rect {
  fill: color-mix(in srgb, var(--accent) 58%, var(--ink));
}

.art-ocr .ocr-caret {
  fill: var(--accent);
}

/* On hover the scan moves two lines further down: its words are boxed as the
   beam passes, their text lands in the card, and the caret follows. */
.art-ocr .ocr-beam,
.art-ocr .ocr-caret {
  transition: transform .6s ease-out;
}

.art-ocr .ocr-late {
  opacity: 0;
  transition: opacity .2s ease-out;
}

.art-ocr .ocr-late-1 { transition-delay: .12s; }
.art-ocr .ocr-late-2 { transition-delay: .32s; }

.card:hover .art-ocr .ocr-beam {
  transform: translateY(36px);
}

.card:hover .art-ocr .ocr-late {
  opacity: 1;
}

.card:hover .art-ocr .ocr-caret {
  transform: translate(4px, 28px);
  transition-delay: .32s;
  transition-duration: .2s;
}

@media (prefers-reduced-motion: reduce) {
  .art-ocr * { transition: none; animation: none; }
}

/* quick-view — Quick View */
.art-quick-view svg { display: block; width: 100%; height: 100%; }

.art-quick-view .qv-sheet {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--accent) 26%, transparent);
  stroke-width: 1.2;
}

.art-quick-view .qv-sheet-c { fill: color-mix(in srgb, var(--accent) 9%, var(--white)); opacity: .55; }
.art-quick-view .qv-sheet-b { fill: color-mix(in srgb, var(--accent) 5%, var(--white)); opacity: .8; }

.art-quick-view .qv-node { fill: var(--accent); }
.art-quick-view .qv-node-2 { opacity: .45; }
.art-quick-view .qv-node-3 { opacity: .72; }

.art-quick-view .qv-wire {
  stroke: color-mix(in srgb, var(--ink) 26%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* the corner brackets say "this fills the screen" */
.art-quick-view .qv-marks path {
  stroke: color-mix(in srgb, var(--accent) 60%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.art-quick-view .qv-sheet-b,
.art-quick-view .qv-sheet-c,
.art-quick-view .qv-front {
  transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}

.card:hover .art-quick-view .qv-front { transform: translate(-7px, 5px); }
.card:hover .art-quick-view .qv-sheet-b { transform: translate(4px, -3px); }
.card:hover .art-quick-view .qv-sheet-c { transform: translate(9px, -7px); }

@media (prefers-reduced-motion: reduce) {
  .art-quick-view * { transition: none; animation: none; }
}

/* thumbnail-editor — Thumbnail Studio */
.art-thumbnail-editor .tea-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}

.art-thumbnail-editor .tea-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.art-thumbnail-editor .tea-canvas-bg {
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
  stroke-width: 1.25;
}

.art-thumbnail-editor .tea-text {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-size: 70px;
  letter-spacing: -0.01em;
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linejoin: round;
}

.art-thumbnail-editor .tea-selected {
  transition: transform 0.32s ease-out;
}

.art-thumbnail-editor .tea-subject-head,
.art-thumbnail-editor .tea-subject-body {
  fill: color-mix(in srgb, var(--accent) 88%, var(--ink));
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-opacity: 0.85;
}

.art-thumbnail-editor .tea-select-box {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4.5 3.5;
}

.art-thumbnail-editor .tea-handle {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 1.25;
}

.art-thumbnail-editor .tea-layer-chip {
  stroke: color-mix(in srgb, var(--ink) 30%, transparent);
  stroke-width: 1;
}

.art-thumbnail-editor .tea-layer-back {
  fill: var(--paper);
}

.art-thumbnail-editor .tea-layer-mid {
  fill: color-mix(in srgb, var(--accent) 22%, var(--white));
}

.art-thumbnail-editor .tea-layer-front {
  fill: color-mix(in srgb, var(--accent) 55%, var(--white));
}

.card:hover .art-thumbnail-editor .tea-selected {
  transform: translate(7px, -6px);
}

@media (prefers-reduced-motion: reduce) {
  .art-thumbnail-editor * {
    transition: none;
    animation: none;
  }
}

/* video-gif — Video & GIF Tool */
.art-video-gif .vg-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.art-video-gif .vg-bg {
  opacity: .6;
}

.art-video-gif .vg-frame-border {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1;
}

.art-video-gif .vg-frame {
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1;
}

.art-video-gif .vg-frame-a {
  fill: color-mix(in srgb, var(--accent) 6%, var(--white));
}

.art-video-gif .vg-frame-b {
  fill: color-mix(in srgb, var(--accent) 11%, var(--white));
}

.art-video-gif .vg-frame-in {
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
}

.art-video-gif .vg-ball {
  fill: var(--accent);
}

.art-video-gif .vg-hole {
  fill: var(--paper);
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
  stroke-width: .75;
}

/*
 * Each trim boundary (left, right) is one <g> holding its dim rect and its
 * handle together. Both are positioned in the group's own local space, so
 * translating the group is the ONLY thing that moves either of them -
 * there is no second, independently-animated value that can drift out of
 * sync with the handle.
 */
.art-video-gif .vg-trim-left {
  transform: translateX(110px);
}

.art-video-gif .vg-trim-right {
  transform: translateX(290px);
  transition: transform .32s ease-out;
}

.card:hover .art-video-gif .vg-trim-right {
  transform: translateX(245px);
}

.art-video-gif .vg-dim {
  fill: color-mix(in srgb, var(--ink) 42%, transparent);
}

.art-video-gif .vg-handle-bar {
  fill: color-mix(in srgb, var(--ink) 88%, var(--accent));
}

.art-video-gif .vg-grip {
  stroke: color-mix(in srgb, var(--white) 80%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
}

.art-video-gif .vg-playhead-line {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.art-video-gif .vg-playhead-tip {
  fill: var(--ink);
}

.art-video-gif .vg-chip {
  fill: var(--white);
  stroke: var(--accent);
  stroke-width: 1;
}

.art-video-gif .vg-chip-text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  fill: var(--accent);
}

.art-video-gif .vg-duration {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  fill: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .art-video-gif * {
    transition: none;
    animation: none;
  }
}

/* subtitles — Subtitle Studio */
.art-subtitles {
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-subtitles .subtitles-scene {
  width: 100%;
  height: 100%;
  display: block;
}

.art-subtitles .subtitles-frame {
  fill: color-mix(in srgb, var(--ink) 88%, var(--accent) 12%);
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1;
}

.art-subtitles .subtitles-moon {
  fill: color-mix(in srgb, var(--paper) 82%, var(--accent) 18%);
  opacity: 0.85;
}

.art-subtitles .subtitles-ridge-back {
  fill: color-mix(in srgb, var(--ink) 55%, var(--accent) 45%);
  opacity: 0.45;
}

.art-subtitles .subtitles-ridge-front {
  fill: color-mix(in srgb, var(--ink) 42%, var(--accent) 58%);
  opacity: 0.8;
}

.art-subtitles .subtitles-caption-box {
  fill: color-mix(in srgb, var(--ink) 68%, transparent);
}

.art-subtitles .subtitles-caption-a rect,
.art-subtitles .subtitles-caption-b rect {
  fill: var(--white);
}

.art-subtitles .subtitles-caption-a {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.art-subtitles .subtitles-caption-b {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.art-subtitles .subtitles-seg {
  fill: var(--paper-deep);
  stroke: color-mix(in srgb, var(--ink) 12%, transparent);
  stroke-width: 1;
}

.art-subtitles .subtitles-current {
  transition: transform 0.35s ease-out;
}

.art-subtitles .subtitles-current-block {
  fill: var(--accent);
}

.art-subtitles .subtitles-tc {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  fill: var(--muted);
  text-transform: uppercase;
  transition: opacity 0.3s ease-out;
}

.art-subtitles .subtitles-tc-a {
  opacity: 1;
}

.art-subtitles .subtitles-tc-b {
  opacity: 0;
}

/* hover: the current segment advances to the next block, its timecode
   swaps with it, and the caption lines re-wrap to a different shape */
.card:hover .art-subtitles .subtitles-current {
  transform: translateX(51px);
}

.card:hover .art-subtitles .subtitles-tc-a {
  opacity: 0;
}

.card:hover .art-subtitles .subtitles-tc-b {
  opacity: 1;
}

.card:hover .art-subtitles .subtitles-caption-a {
  opacity: 0;
}

.card:hover .art-subtitles .subtitles-caption-b {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .art-subtitles * { transition: none; animation: none; }
}

/* audio-trimmer — Audio Trimmer */
.art-audio-trimmer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-audio-trimmer .aut-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-audio-trimmer .aut-bg-stop-a {
  stop-color: color-mix(in srgb, var(--accent) 6%, var(--white));
}

.art-audio-trimmer .aut-bg-stop-b {
  stop-color: var(--white);
}

.art-audio-trimmer .aut-bg {
  fill: url(#audio-trimmer-bg);
}

.art-audio-trimmer .aut-centerline {
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
  stroke-width: 0.8;
}

.art-audio-trimmer .aut-selbg {
  fill: color-mix(in srgb, var(--accent) 15%, var(--white));
  stroke: color-mix(in srgb, var(--accent) 32%, transparent);
  stroke-width: 0.8;
}

.art-audio-trimmer .aut-bar-dim {
  fill: color-mix(in srgb, var(--muted) 60%, transparent);
}

.art-audio-trimmer .aut-bar-bright {
  fill: var(--accent);
}

.art-audio-trimmer .aut-fade-shade {
  fill: color-mix(in srgb, var(--white) 62%, transparent);
}

.art-audio-trimmer .aut-fade-line {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 45%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
}

.art-audio-trimmer .aut-handle-body {
  fill: var(--ink);
}

.art-audio-trimmer .aut-handle-grip {
  stroke: color-mix(in srgb, var(--white) 65%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
}

.art-audio-trimmer .aut-badge-bg {
  fill: color-mix(in srgb, var(--ink) 88%, transparent);
}

.art-audio-trimmer .aut-badge-text {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  fill: var(--white);
}

.art-audio-trimmer .aut-fadeout-group {
  transition: transform 0.32s ease-out;
}

.card:hover .art-audio-trimmer .aut-fadeout-group {
  transform: translateX(-11px);
}

@media (prefers-reduced-motion: reduce) {
  .art-audio-trimmer * { transition: none; animation: none; }
}

/* palette — Palette Extractor */
.art-palette .pal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.art-palette .pal-imgframe {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 32%, transparent);
  stroke-width: 0.8;
}

.art-palette .pal-leadline {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 24%, transparent);
  stroke-width: 0.6;
}

.art-palette .pal-chip {
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 0.5;
}

.art-palette .pal-track {
  fill: color-mix(in srgb, var(--ink) 10%, transparent);
}

.art-palette .pal-pct {
  font-family: var(--mono);
  font-size: 4px;
  letter-spacing: 0.03em;
  fill: var(--muted);
  text-anchor: middle;
}

.art-palette .pal-pill rect {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--ink) 18%, transparent);
  stroke-width: 0.6;
}

.art-palette .pal-pill path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 65%, var(--ink));
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-palette .pal-pill text {
  font-family: var(--mono);
  font-size: 4.3px;
  letter-spacing: 0.05em;
  fill: var(--ink);
  text-anchor: middle;
  opacity: 0.82;
}

.art-palette .pal-reveal {
  opacity: 0;
  transform: translateY(5px) scale(0.55);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}

.card:hover .art-palette .pal-reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .art-palette * {
    transition: none;
    animation: none;
  }
}

/* theme-gallery — Theme Gallery */
.art-theme-gallery .tgt-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.art-theme-gallery .tgt-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 26%, transparent);
  stroke-width: 0.6;
}

.art-theme-gallery .tgt-grid {
  fill: none;
  stroke: #d23b2a;
  stroke-width: 0.35;
  opacity: 0.45;
}

/* Each card is drawn around its own centre, so a CSS transform on it turns and
   slides the whole card as one piece. The fan opening is the hover gesture. */
.art-theme-gallery .tgt-card {
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.art-theme-gallery .tgt-l { transform: rotate(-9deg); }
.art-theme-gallery .tgt-r { transform: rotate(9deg); }
.art-theme-gallery .tgt-c { transform: translateY(0); }

.card:hover .art-theme-gallery .tgt-l { transform: translate(-9px, 2px) rotate(-15deg); }
.card:hover .art-theme-gallery .tgt-r { transform: translate(9px, 2px) rotate(15deg); }
.card:hover .art-theme-gallery .tgt-c { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .art-theme-gallery * {
    transition: none;
    animation: none;
  }
}

/* qr-studio — QR Studio */
.art-qr-studio {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 7%, var(--white));
}

.art-qr-studio .qrs-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.art-qr-studio .qrs-bg-stop0 {
  stop-color: var(--white);
}

.art-qr-studio .qrs-bg-stop1 {
  stop-color: color-mix(in srgb, var(--accent) 9%, var(--white));
}

.art-qr-studio .qrs-eye-outer,
.art-qr-studio .qrs-eye-center,
.art-qr-studio .qrs-align-outer,
.art-qr-studio .qrs-align-center,
.art-qr-studio .qrs-timing rect,
.art-qr-studio .qrs-modules rect {
  fill: color-mix(in srgb, var(--ink) 78%, var(--accent));
}

.art-qr-studio .qrs-eye-gap,
.art-qr-studio .qrs-align-gap {
  fill: color-mix(in srgb, var(--white) 92%, var(--accent) 8%);
}

.art-qr-studio .qrs-logo-plate {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1;
}

.art-qr-studio .qrs-logo-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.art-qr-studio .qrs-logo-dot {
  fill: var(--accent);
}

.art-qr-studio .qrs-scan {
  opacity: 0.85;
  transform: translateY(0);
  transition: transform 0.38s ease-out;
}

.card:hover .art-qr-studio .qrs-scan {
  transform: translateY(90px);
}

.art-qr-studio .qrs-scan-stop0 {
  stop-color: var(--accent);
  stop-opacity: 0;
}

.art-qr-studio .qrs-scan-stop1 {
  stop-color: var(--accent);
  stop-opacity: 0.9;
}

.art-qr-studio .qrs-scan-stop2 {
  stop-color: var(--accent);
  stop-opacity: 0;
}

.art-qr-studio .qrs-chip-bg {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
  stroke-width: 1;
}

.art-qr-studio .qrs-chip-badge {
  fill: var(--accent);
}

.art-qr-studio .qrs-chip-tick {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-qr-studio .qrs-chip-text {
  font-family: var(--mono);
  font-size: 4.2px;
  letter-spacing: 0.06em;
  fill: var(--muted);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .art-qr-studio * {
    transition: none;
    animation: none;
  }
}

/* voice-studio — Voice Studio */
.art-voice-studio .vs-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.art-voice-studio .vs-baseline {
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1;
}

.art-voice-studio .vs-label {
  font-family: var(--mono, "DM Mono", monospace);
  font-size: 7px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}

.art-voice-studio .vs-ref rect {
  rx: 1;
  fill: color-mix(in srgb, var(--muted) 78%, var(--paper));
}

.art-voice-studio .vs-curve {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 55%, var(--muted));
  stroke-width: 1.3;
  stroke-linecap: round;
}

.art-voice-studio .vs-node {
  rx: 2;
  fill: var(--white);
  stroke: var(--accent);
  stroke-width: 1.2;
}

.art-voice-studio .vs-node-dot {
  fill: var(--accent);
}

.art-voice-studio .vs-gen rect {
  rx: 1;
  fill: var(--accent);
}

.art-voice-studio .vs-gen-extra rect {
  rx: 1;
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0.3);
  transition: transform 0.3s ease-out, opacity 0.25s ease-out;
}

.art-voice-studio .vs-gen-extra rect:nth-child(1) { transition-delay: 0ms; }
.art-voice-studio .vs-gen-extra rect:nth-child(2) { transition-delay: 30ms; }
.art-voice-studio .vs-gen-extra rect:nth-child(3) { transition-delay: 60ms; }
.art-voice-studio .vs-gen-extra rect:nth-child(4) { transition-delay: 90ms; }
.art-voice-studio .vs-gen-extra rect:nth-child(5) { transition-delay: 120ms; }

.card:hover .art-voice-studio .vs-gen-extra rect {
  opacity: 1;
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .art-voice-studio * { transition: none; animation: none; }
}

/* minerva — Minerva Game Finder */
/*
 * Minerva Game Finder tile — an archive listing with the one wanted file
 * picked out of it. The tool's signature moment is exactly that ratio:
 * 225 GB in the header, 106 MB on the row that is ticked.
 */

.art-minerva {
  width: 100%;
  height: 100%;
}

.art-minerva .mvt-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-minerva .mvt-panel {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
  stroke-width: 1;
}

.art-minerva .mvt-head-name {
  fill: color-mix(in srgb, var(--ink) 34%, transparent);
}

.art-minerva .mvt-head-size {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  fill: color-mix(in srgb, var(--muted) 90%, transparent);
}

.art-minerva .mvt-rule {
  stroke: color-mix(in srgb, var(--ink) 12%, transparent);
  stroke-width: 1;
}

.art-minerva .mvt-box {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1.1;
}

.art-minerva .mvt-name {
  fill: color-mix(in srgb, var(--ink) 15%, transparent);
}

.art-minerva .mvt-size {
  fill: color-mix(in srgb, var(--ink) 10%, transparent);
}

/* The list runs past the bottom edge rather than stopping neatly: there are
   always more files than fit. */
.art-minerva .mvt-row-fade {
  opacity: 0.45;
}

/* --- the picked row --- */
.art-minerva .mvt-hit-bg {
  fill: color-mix(in srgb, var(--accent) 13%, var(--white));
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.3;
}

.art-minerva .mvt-hit-box {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1.1;
}

.art-minerva .mvt-tick {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-minerva .mvt-hit-name {
  fill: color-mix(in srgb, var(--accent) 72%, var(--ink) 12%);
}

.art-minerva .mvt-hit-size {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: color-mix(in srgb, var(--accent) 78%, var(--ink) 10%);
}

/* One thing moves, and it moves as a transform on one group — the whole row
   eases out of the list, the way the tool pulls one file out of the set.
   The outer group carries the position as an attribute and the inner one does
   the moving, so the CSS transform never has to restate where the row sits. */
.art-minerva .mvt-hit {
  transition: transform 0.36s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.card:hover .art-minerva .mvt-hit {
  transform: translateX(11px);
}

@media (prefers-reduced-motion: reduce) {
  .art-minerva * { transition: none; animation: none; }
}

/* repetition-checker — Essay Repetition Checker */
.art-repetition-checker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.art-repetition-checker .rc-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.art-repetition-checker .rc-word {
  fill: color-mix(in srgb, var(--ink) 24%, transparent);
}

.art-repetition-checker .rc-pill {
  fill: var(--accent);
}

.art-repetition-checker .rc-hover-word {
  fill: color-mix(in srgb, var(--ink) 24%, transparent);
  transition: fill 0.32s ease-out;
}

.art-repetition-checker .rc-chip-bg {
  fill: color-mix(in srgb, var(--accent) 14%, var(--white));
  stroke: color-mix(in srgb, var(--accent) 30%, transparent);
  stroke-width: 1;
}

.art-repetition-checker .rc-chip-text {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}

.card:hover .art-repetition-checker .rc-hover-word {
  fill: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .art-repetition-checker * {
    transition: none;
    animation: none;
  }
}

/* exif — EXIF Inspector */
.art-exif .exif-scene {
  width: 100%;
  height: 100%;
  display: block;
}

.art-exif .exif-brackets path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .3;
}

.art-exif .exif-sun {
  fill: color-mix(in srgb, var(--accent) 30%, var(--white));
}

.art-exif .exif-mtn-back {
  fill: color-mix(in srgb, var(--accent) 16%, var(--paper-deep));
}

.art-exif .exif-mtn-front {
  fill: color-mix(in srgb, var(--accent) 36%, var(--paper-deep));
}

.art-exif .exif-photo-frame {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1.2;
}

.art-exif .exif-pin path {
  fill: var(--accent);
}

.art-exif .exif-pin-hole {
  fill: color-mix(in srgb, var(--accent) 7%, var(--white));
}

.art-exif .exif-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--muted);
  transition: fill .25s ease-out, opacity .25s ease-out;
}

.art-exif .exif-label.is-accent {
  fill: var(--accent);
}

.art-exif .exif-bar {
  fill: var(--ink);
  opacity: .5;
  transition: fill .25s ease-out, opacity .25s ease-out;
}

.art-exif .exif-bar.is-accent {
  fill: var(--accent);
  opacity: .85;
}

.art-exif .exif-row.is-struck .exif-label {
  fill: var(--muted);
  opacity: .55;
}

.art-exif .exif-row.is-struck .exif-bar {
  fill: var(--muted);
  opacity: .35;
}

.art-exif .exif-strike {
  stroke: var(--muted);
  stroke-width: 1.1;
  opacity: 1;
  transition: opacity .25s ease-out;
}

.art-exif .exif-strike-hover {
  opacity: 0;
}

.card:hover .art-exif .exif-row-serial .exif-label {
  fill: var(--muted);
  opacity: .55;
}

.card:hover .art-exif .exif-row-serial .exif-bar {
  fill: var(--muted);
  opacity: .35;
}

.card:hover .art-exif .exif-strike-hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .art-exif * { transition: none; animation: none; }
}

/* instagram-check — Instagram Follow Check */
.art-instagram-check svg { display: block; width: 100%; height: 100%; }

.art-instagram-check .ic-head,
.art-instagram-check .ic-body {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.art-instagram-check .ic-them .ic-head,
.art-instagram-check .ic-them .ic-body { stroke: color-mix(in srgb, var(--ink) 34%, transparent); }

.art-instagram-check .ic-plate { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.art-instagram-check .ic-them .ic-plate { fill: color-mix(in srgb, var(--ink) 12%, transparent); }

.art-instagram-check .ic-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.art-instagram-check .ic-head-arrow { fill: var(--accent); }

.art-instagram-check .ic-dashed {
  stroke: color-mix(in srgb, var(--ink) 30%, transparent);
  stroke-dasharray: 5 5;
}

.art-instagram-check .ic-head-back { fill: color-mix(in srgb, var(--ink) 30%, transparent); }

.art-instagram-check .ic-break {
  fill: color-mix(in srgb, var(--accent) 7%, var(--white));
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1;
}

.art-instagram-check .ic-cross {
  stroke: #a3492f;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.art-instagram-check .ic-label,
.art-instagram-check .ic-tally {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .09em;
}

.art-instagram-check .ic-back,
.art-instagram-check .ic-break,
.art-instagram-check .ic-cross {
  transition: transform .3s ease-out, opacity .3s ease-out;
  transform-origin: 202px 142px;
}

.card:hover .art-instagram-check .ic-break,
.card:hover .art-instagram-check .ic-cross { transform: scale(1.16); }
.card:hover .art-instagram-check .ic-back { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .art-instagram-check * { transition: none; animation: none; }
}

/* anchor — Anchor Health */
.art-anchor svg { display: block; width: 100%; height: 100%; }

.art-anchor .an-board {
  fill: var(--white);
  stroke: color-mix(in srgb, var(--accent) 26%, transparent);
  stroke-width: 1.2;
}

.art-anchor .an-clip { fill: var(--accent); }

.art-anchor .an-highlight {
  fill: color-mix(in srgb, var(--accent) 15%, transparent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.art-anchor .an-dot { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.art-anchor .an-rule { fill: color-mix(in srgb, var(--ink) 13%, transparent); }

.art-anchor .an-dot-live { fill: var(--accent); }
.art-anchor .an-rule-live { fill: color-mix(in srgb, var(--accent) 55%, transparent); }

.art-anchor .an-ring,
.art-anchor .an-stem {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-anchor .an-tag {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.card:hover .art-anchor .an-highlight { transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  .art-anchor * { transition: none; animation: none; }
}