/* NightKillerYT — Creator Tools: the /tools index, the frame around every tool page and the building blocks
   every tool uses (panels, fields, sliders, switches, segmented choices, drop zones, previews, code blocks,
   results). Loaded after site.css on /tools pages only. Tool-specific styles live in their own files.

   The look follows the home page: see-through glass on the dark grid, big Sora type, one pink accent (with the
   cyan-to-pink signature only as a highlight), thin lines instead of boxes inside boxes, no rainbow of colors.

   Building blocks (use these classes in a tool's markup):
     .tool-app            the tool's outer box (glass)
     .tool-layout         controls + preview side by side (stacks on small screens); children .tool-controls
                          and .tool-stage. Add .is-wide-controls for a wider controls column.
     .panel, .panel-head, .panel-title, .panel-body       grouped controls, as a light glass card with a Sora title
     .field, .field-label, .field-hint, .field-row        a labelled control; .field-row puts 2-3 side by side
     .input, .select, .textarea, .input-group + .input-addon
     input[type=range].range + <output for=id>            slider with filled track (kit.js fills it)
     .switch (label > input[type=checkbox] + span)         on/off toggle
     .segmented (label > input[type=radio] + span)         pick one of a few
     .tabs[role=tablist] > button[role=tab]               modes of a tool (kit.js bindTabs)
     .color-field > input[type=color] + input.input       color with hex text (kit.js keeps them in step)
     .dropzone (+ .dropzone-icon/-title/-hint)            drop or pick files (kit.js bindDropzone)
     .stage (+ .is-checker), .stage-toolbar               the preview area; checkerboard shows transparency
     .compare (+ --split)                                 before/after slider
     .tool-actions                                        the row of main buttons (download, copy)
     .code-block > .code-head + pre > code; [data-code-copy] button copies it
     .notice[data-tone=info|ok|warn|error]                a message in the tool
     .progress > .progress-bar (--progress: 0-100%); .progress.is-indeterminate
     .spinner, .skeleton
     .result-big, .result-label, .result-sub              one big answer (a price, an ID)
     .data-table                                          a small table of results
     .swatches > .swatch                                  color tiles
     .thumb-grid > .thumb                                 a grid of images with actions
     .kbd                                                 a keyboard key
   Every block works from 320 px wide phones to large screens and keeps touch targets at least 40 px. */

/* ---------- the drawings (src/site/tools/previews.js) ---------- */
.tp-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tp-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- the tools page (/tools) ---------- */
.tools-hero {
  padding-bottom: clamp(36px, 5vw, 64px);
}

.tools-hero .hero-lead {
  max-width: 56ch;
}

.tools-search {
  position: relative;
  width: min(100%, 560px);
  margin: clamp(24px, 3vw, 34px) auto 0;
}

.tools-search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  color: var(--text-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.tools-search-input {
  width: 100%;
  height: 58px;
  padding: 0 56px 0 52px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 18px;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font: 500 17px/1 var(--font-body);
  transition:
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.tools-search-input::placeholder {
  color: var(--text-3);
}

.tools-search-input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow:
    0 0 0 4px rgba(255, 92, 168, 0.12),
    var(--shadow-md);
}

.tools-search-input::-webkit-search-cancel-button {
  filter: invert(0.7);
}

.tools-search-key {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.kbd,
.tools-search-key {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 12.5px/1 var(--font-mono);
}

.tools-top {
  padding-top: 0;
}

.tools-filter {
  margin: 0 0 clamp(20px, 3vw, 30px);
}

.tools-filter .chip {
  background: var(--glass-1);
  cursor: var(--nc-hand, pointer);
}

/* Cards: the home page's game cards (.game-card, see site.css) with the tool's drawing as the picture. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.tool-grid-big {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

/* The new tool: a wide glass card with its drawing beside the pitch, a "New" label and two buttons. */
.tools-new-list {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}

.tool-spotlight {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(12px, 1.6vw, 18px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(255, 92, 168, 0.12), transparent 70%),
    radial-gradient(50% 80% at 100% 100%, rgba(185, 140, 255, 0.1), transparent 70%),
    var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  transition: border-color var(--medium) var(--ease-out), box-shadow var(--medium) var(--ease-out);
}

.tool-spotlight:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-lg);
}

.tool-spotlight > * {
  position: relative;
  z-index: 1;
}

.tool-spotlight-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 80% at 25% 15%, rgba(255, 92, 168, 0.16), transparent 65%),
    radial-gradient(60% 70% at 85% 95%, rgba(185, 140, 255, 0.14), transparent 65%),
    #0f0c15;
}

.tool-spotlight-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.001);
  backface-visibility: hidden;
  transition: transform 1100ms var(--ease-out);
}

@media (hover: hover) {
  .tool-spotlight:hover .tool-spotlight-art {
    transform: scale(1.04);
  }
}

.tool-spotlight-body {
  display: grid;
  gap: 12px;
  padding: clamp(4px, 1.2vw, 14px) clamp(4px, 1.6vw, 22px) clamp(8px, 1.2vw, 14px) 0;
}

.tool-spotlight-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-ink);
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tool-spotlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.tool-spotlight-title a {
  color: var(--text);
}

.tool-spotlight-text {
  max-width: 52ch;
  color: var(--text-2);
  font-size: 15.5px;
}

.tool-spotlight-points {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.tool-spotlight-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-2);
  font-size: 14.5px;
}

.tool-spotlight-points .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent-ink);
}

.tool-spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .tool-spotlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-spotlight-body {
    padding: 4px 8px 10px;
  }
}

@media (max-width: 480px) {
  .tool-spotlight-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-spotlight-art,
  .tool-spotlight:hover .tool-spotlight-art {
    transition: none;
    transform: none;
  }
}

/* "New" on the new tool's cards, in the site's pill style (pink, like the accent). */
.pill-new {
  height: 22px;
  padding: 0 9px;
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.tool-card-group .pill-new {
  margin-right: 8px;
  vertical-align: middle;
}

.tool-card-media {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 80% at 25% 15%, rgba(255, 92, 168, 0.14), transparent 65%),
    radial-gradient(60% 70% at 85% 95%, rgba(185, 140, 255, 0.12), transparent 65%),
    #0f0c15;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
}

.tool-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.001);
  backface-visibility: hidden;
  transition: transform 1100ms var(--ease-out);
}

@media (hover: hover) {
  .tool-card:hover .tool-card-art {
    transform: scale(1.05);
  }
}

/* Touch screens have no hover zoom, so the drawings need no layer of their own (like .art-image in site.css): far
   fewer layers on /tools while scrolling (about 150 down to about 50 on a phone). */
@media (hover: none) {
  .tool-card-art,
  .tool-spotlight-art {
    backface-visibility: visible;
  }
}

.tool-card-body {
  gap: 8px;
  padding: 0 20px 20px;
}

.tool-card-big .tool-card-body {
  gap: 10px;
  padding: 0 24px 24px;
}

.tool-card-group {
  color: var(--accent-ink);
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tool-card-title {
  font-size: 1.14rem;
}

.tool-card-big .tool-card-title {
  font-size: 1.38rem;
}

.tool-card .game-card-tagline {
  font-size: 14.5px;
}

.tool-card-big .game-card-tagline {
  font-size: 15px;
}

.tool-card .game-card-actions {
  padding-top: 6px;
}

.tools-empty {
  margin-top: 6px;
}

.tools-crosslink {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
  padding: clamp(22px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(92, 225, 245, 0.08), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(255, 92, 168, 0.08), transparent 60%),
    var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--medium) var(--ease-out),
    transform var(--medium) var(--ease-out);
}

.tools-crosslink > * {
  position: relative;
  z-index: 1;
}

.tools-crosslink:hover {
  border-color: var(--glass-border-hover);
}

.tools-crosslink-body {
  display: grid;
  gap: 6px;
}

.tools-crosslink-body .kicker {
  margin-bottom: 2px;
}

.tools-crosslink-title {
  font: 650 clamp(1.2rem, 2vw, 1.45rem) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.tools-crosslink-text {
  color: var(--text-2);
  font-size: 15px;
}

/* ---------- a tool's page frame ---------- */
.tool-hero {
  padding-bottom: clamp(18px, 3vw, 30px);
}

.tool-hero .back-link {
  display: flex;
  width: fit-content;
  margin-bottom: 22px;
}

.tool-kicker {
  display: flex;
  width: fit-content;
  margin-bottom: 12px;
  transition: color var(--medium) var(--ease-out);
}

.tool-kicker:hover {
  color: var(--text);
}

.tool-lead {
  margin-top: 14px;
  max-width: 60ch;
}

.tool-main {
  position: relative;
  padding-bottom: clamp(36px, 5vw, 64px);
}

.tool-about {
  padding-top: 0;
}

.tool-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.tool-about-grid .section-title-sm {
  margin-bottom: 14px;
}

.tool-about-note {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 14px;
}

/* How it works: numbered glass cards, like the home page's "About me" cards. */
.steps {
  display: grid;
  gap: 12px;
}

.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.step h3 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.step p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14.5px;
}

.step-num {
  color: var(--accent-ink);
  font: 600 13px/1.6 var(--font-mono);
}

/* Questions: glass cards; the answer opens inside its card. */
.faq {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--medium) var(--ease-out);
}

.faq-item[open] {
  border-color: var(--glass-border-hover);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 14px 20px;
  font-weight: 650;
  cursor: var(--nc-hand, pointer);
  list-style: none;
  transition: color var(--medium) var(--ease-out);
}

.faq-item summary:hover {
  color: var(--text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: none;
  color: var(--text-3);
  transition: transform var(--medium) var(--ease-out);
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--text-2);
  font-size: 15px;
}

.faq-answer p + p {
  margin-top: 10px;
}

.faq-answer a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Previous / next tool: the update pages' links, in glass. */
.tool-nav {
  margin-top: 0;
  padding-bottom: 0;
}

.tool-nav .article-nav-link {
  border-color: var(--glass-border);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.tool-nav .article-nav-link:hover {
  border-color: var(--glass-border-hover);
}

.tool-more-all {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* ---------- the tool itself ---------- */
.tool-app {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg);
  padding: clamp(14px, 2vw, 24px);
}

.tool-app > .empty-state {
  border: 0;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.tool-layout.is-wide-controls {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
}

.tool-layout.is-controls-right {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.tool-controls {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tool-stage {
  position: relative;
  min-width: 0;
}

/* On wide screens the preview stays in view while the controls scroll. */
@media (min-width: 961px) {
  .tool-stage.is-sticky {
    position: sticky;
    top: calc(var(--header-height) + 16px);
  }
}

.panel {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  padding: 16px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font: 650 15px/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.panel-title .icon {
  display: none;
}

.panel-body {
  display: grid;
  gap: 14px;
}

/* ---------- fields ---------- */
.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 650;
}

.field-label output,
.field-value {
  color: var(--text);
  font: 600 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.field-hint {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 12px;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(8, 7, 11, 0.6);
  color: var(--text);
  font: 500 15px/1.2 var(--font-body);
  transition:
    border-color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out);
}

.textarea {
  min-height: 110px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-hover);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(255, 92, 168, 0.14);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: rgba(255, 107, 107, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
}

.input.is-mono,
.textarea.is-mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Numbers line up and the spinner arrows stay out of the way. */
.input[type="number"] {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d879f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  cursor: var(--nc-hand, pointer);
}

.select option {
  background: var(--surface-2);
  color: var(--text);
}

.input-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.input-group > .input {
  flex: 1;
  min-width: 0;
}

.input-group > :not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > * + * {
  margin-left: -1px;
}

.input-addon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.input-group > .btn {
  min-height: 44px;
  border-radius: 12px;
}

/* ---------- slider ---------- */
.range {
  --range-fill: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: var(--nc-hand, pointer);
  touch-action: pan-y;
}

.range:focus {
  outline: none;
}

.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--range-fill), var(--surface-3) var(--range-fill) 100%);
}

.range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
}

.range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow:
    0 0 0 4px rgba(255, 92, 168, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--fast) var(--ease-out);
}

.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow:
    0 0 0 4px rgba(255, 92, 168, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(255, 92, 168, 0.35);
}

.range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(255, 92, 168, 0.35);
}

.range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

/* The number next to a slider: click it to type an exact value. */
output.range-value {
  margin: -4px -8px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: text;
  transition: background-color var(--fast) var(--ease-out);
}

output.range-value:hover {
  background: rgba(255, 255, 255, 0.07);
}

output.range-value:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

output.range-value:has(.range-edit) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -6px -4px;
  padding: 0;
  background: none;
}

.range-edit {
  width: 7ch;
  min-width: 58px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: rgba(8, 7, 11, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 92, 168, 0.14);
  color: var(--text);
  font: 600 13px/1 var(--font-mono);
  text-align: right;
}

.range-edit:focus {
  outline: none;
}

.range-edit-unit {
  color: var(--text-2);
  font: 600 13px/1 var(--font-mono);
}

@media (pointer: coarse) {
  output.range-value {
    margin: -9px -10px;
    padding: 9px 10px;
  }

  .range-edit {
    height: 38px;
    font-size: 16px;
  }
}

/* ---------- switch ---------- */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: var(--nc-hand, pointer);
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-3);
  transition:
    background-color var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out);
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition:
    transform var(--medium) cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--medium) var(--ease-out);
}

.switch input:checked + span {
  border-color: transparent;
  background: linear-gradient(135deg, #e3368b, var(--accent-strong));
}

.switch input:checked + span::after {
  background: #fff;
  transform: translateX(18px);
}

.switch input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.switch input:disabled + span {
  opacity: 0.45;
}

/* ---------- segmented choice ---------- */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: rgba(8, 7, 11, 0.6);
}

.segmented label {
  flex: 1 1 auto;
  min-width: 0;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition:
    background-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}

.segmented span:hover {
  color: var(--text);
}

.segmented input:checked + span {
  background: var(--surface-3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 8px rgba(0, 0, 0, 0.4);
  color: var(--text);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.segmented input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: rgba(8, 7, 11, 0.55);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 0 auto;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition:
    background-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.tabs [role="tab"]:hover {
  color: var(--text);
}

.tabs [role="tab"][aria-selected="true"] {
  background: linear-gradient(180deg, rgba(39, 34, 53, 0.95), rgba(28, 24, 38, 0.95));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px var(--glass-border-hover);
  color: var(--text);
}

.tabs [role="tab"] .icon {
  width: 17px;
  height: 17px;
}

/* ---------- color ---------- */
.color-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-field input[type="color"] {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(8, 7, 11, 0.6);
  cursor: var(--nc-hand, pointer);
}

.color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
}

.color-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 8px;
}

.color-field .input {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: lowercase;
}

/* ---------- drop zone ---------- */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 32px 20px;
  border: 1.5px dashed var(--border-hover);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 92, 168, 0.07), transparent 70%),
    rgba(8, 7, 11, 0.45);
  color: var(--text-2);
  text-align: center;
  cursor: var(--nc-hand, pointer);
  transition:
    border-color var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out),
    transform var(--medium) var(--ease-out);
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--accent-line);
}

.dropzone.is-dragover {
  border-color: var(--accent);
  background-color: rgba(255, 92, 168, 0.08);
  transform: scale(1.01);
}

.dropzone-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.dropzone-icon .icon {
  width: 28px;
  height: 28px;
}

.dropzone-title {
  color: var(--text);
  font: 650 1.1rem/1.3 var(--font-display);
}

.dropzone-hint {
  color: var(--text-3);
  font-size: 13.5px;
}

.dropzone .btn {
  margin-top: 6px;
}

/* ---------- preview ---------- */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(8, 7, 11, 0.6);
}

.stage.is-checker,
.checker {
  background-color: #2a2533;
  background-image:
    linear-gradient(45deg, #1d1925 25%, transparent 25%),
    linear-gradient(-45deg, #1d1925 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1d1925 75%),
    linear-gradient(-45deg, transparent 75%, #1d1925 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.stage.is-light {
  background-color: #f2f1f6;
}

.stage canvas,
.stage img,
.stage svg,
.stage video {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 720px);
  object-fit: contain;
}

.stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.stage-toolbar .segmented {
  flex: none;
}

.stage-meta {
  color: var(--text-3);
  font: 600 12.5px/1.4 var(--font-mono);
}

.stage-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-3);
  text-align: center;
}

/* Before/after: the after image is clipped at --split (0% to 100%); a handle shows where. */
.compare {
  --split: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  touch-action: none;
  user-select: none;
}

.compare-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--split));
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  transform: translateX(-1px);
  pointer-events: none;
}

.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6'/%3E%3Cpath d='m15 6 6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat,
    rgba(8, 7, 11, 0.7);
  transform: translate(-50%, -50%);
}

/* ---------- actions ---------- */
.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.tool-actions .btn {
  flex: 0 0 auto;
}

.tool-actions-note {
  color: var(--text-3);
  font-size: 13px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon {
  width: 44px;
  padding: 0;
}

.btn-sm.btn-icon {
  width: 36px;
}

/* ---------- code ---------- */
.code-block {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: #0a0910;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px 4px 14px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-3);
  font: 650 12px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  color: #e9e6f2;
  font: 500 13.5px/1.65 var(--font-mono);
  tab-size: 4;
}

.code-block code {
  font: inherit;
  white-space: pre;
}

.tok-k {
  color: #ff8cc4;
}

.tok-f {
  color: #7cc7ff;
}

.tok-n {
  color: #f6c453;
}

.tok-s {
  color: #3ddc97;
}

.tok-c {
  color: #6f6982;
  font-style: italic;
}

/* ---------- messages ---------- */
.notice {
  --notice: var(--info);
  --notice-soft: var(--info-soft);
  --notice-line: var(--info-line);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--notice-line);
  border-radius: var(--radius);
  background: var(--notice-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.notice > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--notice);
}

.notice[data-tone="ok"] {
  --notice: var(--ok);
  --notice-soft: var(--ok-soft);
  --notice-line: var(--ok-line);
}

.notice[data-tone="warn"] {
  --notice: var(--warn);
  --notice-soft: var(--warn-soft);
  --notice-line: var(--warn-line);
}

.notice[data-tone="error"] {
  --notice: #ff6b6b;
  --notice-soft: rgba(255, 107, 107, 0.1);
  --notice-line: rgba(255, 107, 107, 0.32);
}

.notice a {
  color: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toast[data-tone="warn"] .icon {
  color: var(--warn);
}

.toast[data-tone="error"] .icon {
  color: #ff6b6b;
}

.toast[data-tone="info"] .icon {
  color: var(--info);
}

/* ---------- progress ---------- */
.progress {
  --progress: 0%;
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  transition: width var(--medium) var(--ease-out);
}

.progress.is-indeterminate .progress-bar {
  width: 35%;
  animation: progress-slide 1.3s var(--ease-in-out) infinite;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
}

@keyframes progress-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(290%);
  }
}

.spinner {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* ---------- results ---------- */
.result-big {
  font: 700 clamp(2rem, 5vw, 3.2rem) / 1.05 var(--font-display);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.result-label {
  color: var(--text-3);
  font: 650 12.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.result-sub {
  color: var(--text-2);
  font-size: 15px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--glass-border);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data-table td.is-num,
.data-table th.is-num {
  text-align: right;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(8, 7, 11, 0.45);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.swatch {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface-1);
  text-align: left;
  cursor: var(--nc-hand, pointer);
  transition:
    transform var(--medium) var(--ease-out),
    border-color var(--medium) var(--ease-out);
}

.swatch-color {
  height: 72px;
}

.swatch-text {
  padding: 8px 10px;
  color: var(--text-2);
  font: 600 12.5px/1.3 var(--font-mono);
}

.swatch:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.thumb {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(8, 7, 11, 0.5);
}

.thumb-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.thumb-media.is-square {
  aspect-ratio: 1;
}

.thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumb-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}

.thumb-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- small screens ---------- */
@media (max-width: 1080px) {
  .tool-grid-big {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-grid-big > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .tool-grid-big > :last-child:nth-child(odd) .tool-card-media {
    aspect-ratio: 16 / 7;
  }
}

@media (max-width: 960px) {
  .tool-layout,
  .tool-layout.is-wide-controls,
  .tool-layout.is-controls-right {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On phones and tablets the preview comes first, the controls under it. */
  .tool-layout > .tool-stage {
    order: -1;
  }

  /* The preview comes after the controls in the page, so while a long page was still arriving the controls showed
     on top and then jumped down (a third of the screen on the Countdown Maker). The tool shows once the page has
     arrived past it (the "more tools" part after it is there); the title above it shows at once, as before. */
  .tool-main:not(:has(~ .tool-more)) .tool-layout:not(.is-controls-first) {
    visibility: hidden;
  }

  .tool-layout.is-controls-first > .tool-stage {
    order: 0;
  }
}

@media (max-width: 600px) {
  .tool-grid-big {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-grid-big > :last-child:nth-child(odd) .tool-card-media {
    aspect-ratio: 16 / 10;
  }

  .tools-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tools-filter::-webkit-scrollbar {
    display: none;
  }

  .tools-filter .chip {
    flex: none;
  }

  .tools-search-key {
    display: none;
  }

  .tools-search-input {
    height: 54px;
    padding-right: 18px;
    font-size: 16px;
  }

  .tool-app {
    padding: 12px;
    border-radius: var(--radius-lg);
  }

  .panel {
    padding: 14px;
  }

  .stage {
    min-height: 220px;
  }

  .dropzone {
    min-height: 210px;
  }

  .tool-actions .btn {
    flex: 1 1 auto;
  }

  /* 16px text stops iPhones from zooming in when a box gets focus. */
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress.is-indeterminate .progress-bar,
  .spinner,
  .skeleton {
    animation-duration: 2.5s;
  }
}