/* The interactive capsule that stands in the hero.

   A replica of the application window, so its palette is the application's rather than
   the page's: it should read as the program, not as another section of the site.

   Without JavaScript it renders open on its first section, which is also what a crawler
   sees. The script folds it back into the collapsed pill, and because the js class is
   set in the document head there is no flash of the open state on the way. */

.dc {
  --dc-surface: #0d0f14;
  --dc-panel: #171a22;
  --dc-field: #1e2230;
  --dc-ink: #f5f7fa;
  --dc-muted: #a9b1bd;
  --dc-dim: #6b7280;
  --dc-accent: #7c5cfc;
  --dc-accent-soft: rgba(124, 92, 252, 0.16);

  max-width: 1000px;
  margin: 0 auto;
  font-size: 14px;
  text-align: left;
}

/* ---------- collapsed ---------- */

.dc-pill { display: none; }

.js .dc-pill {
  /* Flex with a fitted width rather than inline-flex, so the auto margins centre it the
     way the application centres the capsule against the top edge of the screen. */
  display: flex;
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--dc-surface);
  color: var(--dc-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.js .dc[data-state="open"] .dc-pill { display: none; }

.dc-pill-mark {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--dc-accent), #4b34c9);
}

.dc-pill-name { font-family: var(--display); font-weight: 700; }
.dc-pill-hint { color: var(--dc-dim); font-size: 12px; }
.js .dc-pill:hover { background: #12151c; }

/* ---------- the window ---------- */

.js .dc:not([data-state="open"]) .dc-window { display: none; }

.dc-window {
  background: var(--dc-surface);
  border-radius: 18px;
  overflow: hidden;
  color: var(--dc-ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  animation: dc-open 220ms cubic-bezier(0.16, 0.9, 0.28, 1) both;
}

@keyframes dc-open {
  from { transform: translateY(-10px) scale(0.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-window { animation: none; }
}

.dc-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px 0;
}

.dc-mark { font-family: var(--display); font-weight: 700; font-size: 16px; }

.dc-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.dc-tab {
  appearance: none;
  border: 0;
  background: none;
  color: var(--dc-muted);
  font: inherit;
  padding: 6px 10px 9px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dc-tab:hover { color: var(--dc-ink); }

.dc-tab[aria-selected="true"] {
  color: var(--dc-ink);
  font-weight: 600;
  border-bottom-color: var(--dc-accent);
}

.dc-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(124, 92, 252, 0.55);
  color: #b3a0ff;
}

.dc-top-right { display: flex; align-items: center; gap: 12px; }

.dc-gear {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--dc-field);
  display: grid;
  place-items: center;
  font-size: 15px;
}

.dc-body { padding: 20px 22px; min-height: 380px; }

.dc-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 0 22px 16px;
}

/* ---------- shared controls ---------- */

.dc-stack { display: flex; flex-direction: column; gap: 14px; }
.dc-subtle { color: var(--dc-dim); font-size: 13px; margin: 0; }
.dc-note { color: var(--ink-dim); font-size: 13px; margin: 12px 0 0; text-align: center; }

.dc-caption {
  color: var(--ink-muted);
  font-size: 14px;
  margin: 18px auto 0;
  max-width: 60ch;
  text-align: center;
}

.dc-field {
  background: var(--dc-field);
  border: 0;
  border-radius: 10px;
  color: var(--dc-ink);
  font: inherit;
  padding: 11px 14px;
  width: 100%;
}

.dc-field::placeholder { color: var(--dc-dim); }
.dc-field:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 1px; }
.dc-area { min-height: 118px; resize: none; line-height: 1.5; }
.dc-label { color: var(--dc-dim); font-size: 12px; }
.dc-field-row { display: flex; gap: 10px; align-items: stretch; }

.dc-cta {
  appearance: none;
  border: 1px solid rgba(124, 92, 252, 0.6);
  border-radius: 10px;
  background: var(--dc-accent-soft);
  color: var(--dc-ink);
  font: inherit;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.dc-cta:hover { background: rgba(124, 92, 252, 0.28); }

.dc-link {
  appearance: none;
  border: 0;
  background: none;
  color: var(--dc-ink);
  font: inherit;
  cursor: pointer;
  padding: 4px 2px;
}

.dc-link.is-muted { color: var(--dc-dim); cursor: default; }

.dc-icon {
  appearance: none;
  border: 0;
  background: none;
  color: var(--dc-dim);
  font-size: 14px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}

.dc-icon:hover { color: var(--dc-ink); background: rgba(255, 255, 255, 0.06); }
.dc-icon.is-on { color: var(--dc-accent); }

.dc-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-status { color: var(--dc-dim); font-size: 12px; }
.dc-pager { display: inline-flex; align-items: center; gap: 8px; color: var(--dc-dim); font-size: 12px; }

/* ---------- media ---------- */

.dc-media {
  display: flex;
  gap: 26px;
  align-items: center;
  background: linear-gradient(140deg, #141a28, #10131c);
  border-radius: 14px;
  padding: 30px;
}

.dc-art {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  background: #262b38;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
}

.dc-art span { width: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); }
.dc-art span:nth-child(1) { height: 18px; }
.dc-art span:nth-child(2) { height: 34px; }
.dc-art span:nth-child(3) { height: 12px; }
.dc-art span:nth-child(4) { height: 30px; }
.dc-art span:nth-child(5) { height: 20px; }

.dc-track { display: block; }
.dc-track-title { display: block; font-family: var(--display); font-size: 24px; font-weight: 600; }
.dc-track-artist { display: block; color: var(--dc-muted); margin-top: 4px; }
.dc-transport { display: flex; gap: 10px; margin-top: 20px; }

.dc-btn {
  appearance: none;
  border: 0;
  width: 42px;
  height: 38px;
  border-radius: 10px;
  background: #2a2f3c;
  color: var(--dc-ink);
  font-size: 13px;
  cursor: pointer;
}

.dc-btn:hover { background: #343a49; }
.dc-btn-accent { background: var(--dc-accent); }
.dc-btn-accent:hover { background: #8d70ff; }

/* ---------- clipboard ---------- */

.dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dc-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }

.dc-row-text {
  appearance: none;
  border: 0;
  background: none;
  color: var(--dc-ink);
  font: inherit;
  text-align: left;
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.dc-row-text:hover { background: rgba(255, 255, 255, 0.05); }

.dc-copied {
  position: absolute;
  right: 10px;
  color: var(--dc-accent);
  font-size: 12px;
  opacity: 0;
  transition: opacity 140ms ease;
}

.dc-row.is-copied .dc-copied { opacity: 1; }

/* ---------- screenshots ---------- */

.dc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.dc-card {
  appearance: none;
  border: 1px solid transparent;
  background: var(--dc-panel);
  border-radius: 12px;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  display: block;
  color: inherit;
  font: inherit;
}

.dc-card:hover, .dc-card.is-active { border-color: rgba(124, 92, 252, 0.55); }

.dc-card-image { display: block; height: 74px; border-radius: 8px; }
.dc-card-image[data-tone="0"] { background: linear-gradient(135deg, #263048, #1b2130); }
.dc-card-image[data-tone="1"] { background: linear-gradient(135deg, #2a2440, #1d1a2b); }
.dc-card-image[data-tone="2"] { background: linear-gradient(135deg, #1f3040, #17222c); }
.dc-card-time { display: block; color: var(--dc-dim); font-size: 12px; margin-top: 8px; }

/* ---------- notes ---------- */

.dc-notes { display: grid; grid-template-columns: 220px 1fr; gap: 22px; }

.dc-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dc-muted);
  margin-bottom: 6px;
}

.dc-notes-list ul { list-style: none; margin: 0; padding: 0; }

.dc-note-item {
  appearance: none;
  border: 0;
  background: none;
  color: var(--dc-muted);
  font: inherit;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.dc-note-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--dc-ink); }
.dc-note-item.is-active { background: var(--dc-accent-soft); color: var(--dc-ink); }
.dc-notes-editor { display: flex; flex-direction: column; gap: 8px; }

/* ---------- features ---------- */

.dc-features { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.dc-features-main { display: flex; flex-direction: column; gap: 16px; }
.dc-group h4 { font-family: var(--display); font-size: 14px; margin: 0 0 10px; }
.dc-switch { margin-bottom: 10px; }

.dc-check {
  appearance: none;
  border: 0;
  background: none;
  color: var(--dc-ink);
  font: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.dc-check-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  flex: none;
  position: relative;
}

.dc-check.is-on .dc-check-box { background: var(--dc-accent); border-color: var(--dc-accent); }

.dc-check.is-on .dc-check-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dc-switch-hint { display: block; color: var(--dc-dim); font-size: 12px; margin: 4px 0 0 32px; }

.dc-pro-card {
  border: 1px solid rgba(124, 92, 252, 0.55);
  background: rgba(124, 92, 252, 0.1);
  border-radius: 12px;
  padding: 16px 18px;
}

.dc-pro-card h4 { font-family: var(--display); font-size: 14px; margin: 0 0 8px; }
.dc-pro-card p { margin: 0 0 14px; color: var(--dc-muted); font-size: 13px; }
.dc-pro-cta { color: var(--dc-ink); font-size: 13px; }

/* ---------- chat ---------- */

.dc-chat { display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.dc-chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dc-chat-head strong { display: block; font-family: var(--display); }
.dc-chat-body { flex: 1; display: grid; place-items: center; }
.dc-empty { color: var(--dc-muted); margin: 0; }

.dc-answer {
  align-self: stretch;
  border: 1px solid rgba(124, 92, 252, 0.4);
  background: rgba(124, 92, 252, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--dc-muted);
  margin: 0;
}

.dc-answer strong { color: var(--dc-ink); }

/* ---------- translator ---------- */

.dc-lang-row { display: flex; align-items: center; gap: 10px; }

.dc-select {
  appearance: none;
  background: var(--dc-field);
  border: 0;
  border-radius: 10px;
  color: var(--dc-ink);
  font: inherit;
  padding: 10px 14px;
  flex: 1;
  cursor: pointer;
}

.dc-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- narrow screens ----------
   The application never reflows, because it owns its window. The replica has to,
   because it does not. */

@media (max-width: 760px) {
  .dc { font-size: 13px; }
  .dc-top { flex-wrap: wrap; gap: 10px; padding: 14px 14px 0; }
  .dc-tabs { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .dc-body { padding: 16px 14px; min-height: 0; }
  .dc-bottom { padding: 0 14px 14px; }
  .dc-media { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .dc-track-title { font-size: 19px; }
  .dc-notes, .dc-features, .dc-panes { grid-template-columns: 1fr; }
  .dc-notes-list ul { display: flex; gap: 6px; overflow-x: auto; }
  .dc-note-item { white-space: nowrap; }
}