/* AFTERTONE tools-page integration theme. Loaded after the optical-transfer bundle. */
:root {
  color-scheme: light;
  --bg: #f6f3ea;
  --panel: #fffdf8;
  --panel-strong: #faf7ef;
  --line: #37363024;
  --line-bright: #3736303d;
  --text: #252521;
  --text-dim: #55554f;
  --muted: #77766e;
  --muted-dim: #918f86;
  --accent: #6f8369;
  --accent-hi: #586a53;
  --accent-ink: #fffdf8;
  --green: #627a5b;
  --red: #9a5549;
  --viewport-bg: #24241f;
  --accent-rgb: 130, 148, 123;
  --bg-rgb: 246, 243, 234;
}

html,
body.tool-page,
body.receiver-page {
  background: transparent;
}

body.tool-page,
body.receiver-page {
  min-height: 0;
  color: var(--text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

@media (hover: hover) and (pointer: fine) {
  html.aftert-parent-cursor,
  html.aftert-parent-cursor * {
    cursor: none !important;
  }
}

.send-shell,
.receiver-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 34px clamp(22px, 4vw, 48px) 42px;
}

.tool-intro,
.receiver-heading {
  margin-bottom: 18px;
}

.tool-intro h1,
.receiver-heading h1 {
  color: var(--text);
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 520;
  letter-spacing: -.045em;
}

.eyebrow {
  color: #73816d;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .14em;
}

.tool-intro > p:last-child,
.status-line,
.hint {
  color: var(--muted);
}

.mode-picker,
.file-picker,
.demo-picker,
.note-composer textarea,
details.settings,
.metric,
.received-note,
.unlock-card {
  background: #fbf9f3;
  border-color: var(--line);
  border-radius: 14px;
}

.mode-picker {
  padding: 5px;
}

.mode-picker input:checked + span {
  color: #53664d;
  background: #e5ebdf;
  box-shadow: inset 0 0 0 1px #667d5e38;
}

.file-picker {
  min-height: 76px;
  padding: 13px 16px;
}

button,
.file-picker-button,
a.download {
  color: #fffdf8;
  background: #24241f;
  border-radius: 11px;
}

button:hover,
.file-picker:hover .file-picker-button,
a.download:hover {
  background: #080808;
}

.secondary-button,
.demo-buttons button {
  color: #55554f;
  background: #faf7ef;
  border: 1px solid var(--line-strong);
}

.secondary-button:hover,
.demo-buttons button:hover {
  color: var(--text);
  background: #eee9dc;
}

.file-picker-text,
.note-composer,
details.settings summary,
.progress-status strong,
.metric .v.amber {
  color: #63765c;
}

details.settings {
  padding: 12px 14px;
}

details.settings select,
details.settings input[type="range"],
details.settings input[type="password"],
.unlock-card input[type="password"] {
  color: var(--text);
  background: #fffdf8;
  border-color: var(--line-strong);
}

.stage {
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px #50654817;
}

.preview {
  border-color: var(--line-strong);
  box-shadow: 0 18px 48px #2525211c;
}

.progress {
  background: #eee9dc;
  border-color: var(--line);
}

.progress > div {
  background: #82947b;
}

@media (max-width: 680px) {
  .send-shell,
  .receiver-shell {
    width: 100%;
    padding: 24px 16px 34px;
  }

  .tool-intro h1,
  .receiver-heading h1 {
    font-size: 36px;
  }
}