* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f6f6f6;
  color: #222;
  line-height: 1.6;
}
.container {
  max-width: 900px;
  margin: 20px auto;
  padding: 0;
  background: transparent;
}

/* ---------- Header / Banner ------------------------------------------ */
.promo-banner {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: 38px 24px 30px;
  border-radius: 18px;
  margin-bottom: 24px;
  box-shadow:
    0 10px 30px rgba(102,102,102,.25),
    0 2px 6px rgba(102,102,102,.15);
}
.promo-banner::after {
  /* Subtle inner highlight on the top edge so the banner reads as glossy. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  padding: 4px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.25);
}
.promo-banner h1 {
  margin: 0;
  font-size: 2.4em;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.promo-sub {
  margin: 6px 0 0;
  font-size: 1.15em;
  font-weight: 400;
  opacity: .9;
}
.banner-links {
  margin-top: 14px;
  display: inline-flex;
  gap: 8px;
}
.gh-link {
  display: inline-block;
  padding: 6px 18px;
  min-width: 92px;
  text-align: center;
  font-size: .8em;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.gh-link:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* ---------- Sections ------------------------------------------------- */
.section-title {
  font-size: .85em;
  font-weight: 700;
  color: #333;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ---------- How it works (legacy, currently unused) ------------------ */
.how-it-works {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
}
.steps li {
  background: #f8f8f8;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .85em;
}
.step-label { font-weight: 700; color: #292929; font-size: .95em; }
.step-desc { font-size: .85em; color: #696969; line-height: 1.4; }
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Form section --------------------------------------------- */
.form-section {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow:
    0 1px 3px rgba(41,41,41,.04),
    0 10px 30px rgba(41,41,41,.06);
  border: 1px solid #f1f1f1;
}
label { display: block; margin: 0 0 18px; font-weight: 600; font-size: .92em; color: #333; }
input, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  font: inherit;
  font-size: .95em;
  border: 1px solid #d9d9d9;
  border-radius: 9px;
  background: #fbfbfb;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(102,102,102,.15);
  background: #fff;
}
textarea { resize: vertical; }

/* File input — render as a soft dropzone */
input[type="file"] {
  padding: 18px 14px;
  border: 1.5px dashed #cccccc;
  background: #f9f9f9;
  cursor: pointer;
  text-align: center;
  font-size: .9em;
  color: #5a5a5a;
}
input[type="file"]:hover {
  border-color: var(--blue);
  background: #f3f3f3;
}

button[type="submit"] {
  display: block;
  width: 100%;
  background: var(--blue);
  color: #fff;
  border: 0;
  padding: 13px 20px;
  border-radius: 11px;
  font: inherit;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(102,102,102,.28);
  transition: transform .12s, box-shadow .15s, opacity .15s, background .15s;
  margin-top: 4px;
}
button[type="submit"]:hover {
  background: #5c5c5c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(102,102,102,.34);
}
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(102,102,102,.24);
}
button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.submit-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: .82em;
  font-weight: 400;
  color: #898989;
}

code {
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
  word-break: break-all;
}

/* ---------- Feature tabs --------------------------------------------- */
.feature-label {
  margin: 0 0 6px;
}
.feature-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.feature-stage:last-of-type {
  margin-bottom: 16px;
}
.feature-stage-tag {
  flex: none;
  min-width: 70px;
  padding: 6px 12px;
  background: #b3b3b3;
  color: #fff;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 2px 6px rgba(179,179,179,.22);
}
/* Three stages share a green palette, light → dark, signalling progression
   through the research workflow. Same hue (~145°), increasing depth.
   NOTE on selectors: nth-of-type counts by tag among siblings, and the form
   has a leading <div class="field-label"> before the three .feature-stage
   divs — so the three stages are the 2nd/3rd/4th divs in the form. */
.feature-stage:nth-of-type(3) .feature-stage-tag {
  background: #7e7e7e;
  box-shadow: 0 2px 6px rgba(126,126,126,.22);
}
.feature-stage:nth-of-type(4) .feature-stage-tag {
  background: #4e4e4e;
  box-shadow: 0 2px 6px rgba(78,78,78,.25);
}
.feature-stage .feature-tabs {
  flex: 1;
  margin: 0;
}
.feature-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 16px;
  background: #f2f2f2;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid #e7e7e7;
}
.feature-tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .82em;
  color: #696969;
  margin: 0;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.feature-tab input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.feature-tab:hover {
  background: rgba(255,255,255,.85);
  color: #292929;
}
.feature-tab.selected {
  background: #fff;
  color: #3b3b3b;
  box-shadow:
    0 2px 6px rgba(102,102,102,.18),
    inset 0 0 0 1px rgba(102,102,102,.18);
}
.feature-tab.disabled,
.feature-tab.disabled:hover {
  background: transparent;
  color: #aaaaaa;
  cursor: not-allowed;
  opacity: .65;
  box-shadow: none;
  transform: none;
}
@media (max-width: 600px) {
  .feature-tabs { flex-wrap: wrap; }
  .feature-tab { flex: none; width: 100%; }
}

/* ---------- Method dropdown ------------------------------------------ */
.field-label { display: block; margin: 0 0 16px; font-weight: 600; font-size: .92em; color: #333; }
.select-input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 36px 10px 12px;
  font: inherit;
  font-size: .95em;
  color: #292929;
  background: #fbfbfb
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234b5b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>")
    no-repeat right 12px center / 14px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.select-input:hover { border-color: #c1c1c1; }
.select-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(102,102,102,.12);
  background-color: #fff;
}

/* ---------- Submitted result panel (index page only) ----------------- */
section#result {
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 20px;
  box-shadow:
    0 1px 3px rgba(41,41,41,.04),
    0 10px 30px rgba(41,41,41,.06);
  border: 1px solid #f1f1f1;
  border-left: 4px solid var(--blue);
  animation: slide-up .35s ease;
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
section#result h2 {
  margin: 0 0 16px;
  font-size: 1.05em;
  color: #3b3b3b;
  display: flex;
  align-items: center;
  gap: 8px;
}
section#result h2::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.5 10.6 3.9 8l-1 1L6.5 12.6 13.1 6 12.1 5z'/></svg>") center/12px no-repeat;
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 12px;
  margin: 0;
}
.kv dt {
  font-weight: 600;
  color: #5a5a5a;
  font-size: .85em;
  letter-spacing: 0;
  text-transform: uppercase;
  align-self: center;
}
.kv dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.kv-value {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: #f8f8f8;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  padding: 7px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3b3b3b;
}
#meta-novelty {
  white-space: normal;
  max-height: 4.2em;          /* ~3 lines at line-height ~1.4 */
  overflow-y: auto;
  line-height: 1.6;
}
#meta-problem {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}
a.kv-value { text-decoration: none; }
a.kv-value:hover { text-decoration: underline; }

.copy-btn {
  flex: none;
  background: #fff;
  color: var(--blue);
  border: 1px solid #d9d9d9;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: .82em;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.copy-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.copy-btn.copied {
  background: #636363;
  border-color: #636363;
  color: #fff;
}

#result .hint {
  margin: 16px 0 0;
  font-size: .82em;
  color: #898989;
}

@media (max-width: 600px) {
  .container { margin: 16px; }
  .kv { grid-template-columns: 1fr; row-gap: 4px; }
  .kv dt { margin-top: 8px; }
  .brand { gap: 8px; }
  .brand-logo { width: 36px; height: 36px; }
  .promo-banner h1 { font-size: 2em; }
}

/* ---------- Result page: meta + report cards ------------------------- */
.meta-card {
  margin-top: 8px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(41,41,41,.04),
    0 10px 30px rgba(41,41,41,.06);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .82em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  background: #ededed;
  color: #5a5a5a;
  border: 1px solid #dcdcdc;
}
.status-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
/* Animate the dot while we're waiting on the job. */
.status-pill.status-loading::before,
.status-pill.status-pending::before,
.status-pill.status-running::before {
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
.status-pill.status-loading,
.status-pill.status-pending  { background: #f7f7f7; color: #6d6d6d; border-color: #dcdcdc; }
.status-pill.status-running  { background: #efefef; color: #505050; border-color: #cccccc; }
.status-pill.status-done     { background: #f1f1f1; color: #515151; border-color: #cfcfcf; }
.status-pill.status-error    { background: #eaeaea; color: #3f3f3f; border-color: #c7c7c7; }

.report-card {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(41,41,41,.04),
    0 10px 30px rgba(41,41,41,.06);
}
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f8f8;
}
.report-header h2 {
  margin: 0;
  font-size: 1em;
  color: #3b3b3b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-header h2::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M3 2h7l3 3v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm6 0v3h3'/></svg>") center/12px no-repeat;
}
.report-body {
  background: #fff;
  padding: 24px 28px;
  font-size: .96em;
  line-height: 1.7;
  color: #292929;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  word-wrap: break-word;
}
.report-body > *:first-child { margin-top: 0; }
.report-body > *:last-child  { margin-bottom: 0; }
.report-body p { margin: 0.6em 0; }

/* Headings — a clean hierarchy w/ subtle separators on h1/h2. */
.report-body h1,
.report-body h2,
.report-body h3,
.report-body h4,
.report-body h5,
.report-body h6 {
  margin: 1.4em 0 0.5em;
  line-height: 1.3;
  color: #3b3b3b;
  font-weight: 700;
  letter-spacing: 0;
}
.report-body h1 {
  font-size: 1.7em;
  padding-bottom: .3em;
  border-bottom: 1px solid #e7e7e7;
}
.report-body h2 {
  font-size: 1.35em;
  padding-bottom: .25em;
  border-bottom: 1px solid #f0f0f0;
}
.report-body h3 { font-size: 1.15em; }
.report-body h4 { font-size: 1.02em; }
.report-body h5 { font-size: .95em; color: #454545; }
.report-body h6 { font-size: .9em;  color: #5a5a5a; text-transform: uppercase; letter-spacing: 0; }

/* Lists */
.report-body ul,
.report-body ol {
  margin: 0.6em 0;
  padding-left: 1.6em;
}
.report-body li { margin: 0.25em 0; }
.report-body li > p { margin: 0.25em 0; }
.report-body li > ul,
.report-body li > ol { margin: 0.25em 0; }

/* GFM task lists */
.report-body li.task-list-item,
.report-body input[type="checkbox"][disabled] + * {
  list-style: none;
}
.report-body li.task-list-item { margin-left: -1.2em; }
.report-body input[type="checkbox"] {
  margin: 0 .4em 0 0;
  vertical-align: middle;
}

/* Inline code (NOT inside pre) */
.report-body :not(pre) > code {
  background: #f5f5f5;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .88em;
  color: #5e5e5e;
  white-space: nowrap;
}

/* Fenced code blocks */
.report-body pre {
  margin: 0.9em 0;
  padding: 14px 16px;
  background: #f8f8f8;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  overflow-x: auto;
  font-size: .88em;
  line-height: 1.55;
}
.report-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #292929;
  white-space: pre;
}

/* Blockquotes */
.report-body blockquote {
  margin: 0.9em 0;
  padding: 8px 16px;
  border-left: 4px solid var(--blue);
  background: #f8f8f8;
  color: #454545;
  border-radius: 0 8px 8px 0;
}
.report-body blockquote > *:first-child { margin-top: 0; }
.report-body blockquote > *:last-child  { margin-bottom: 0; }

/* Links */
.report-body a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(102,102,102,.25);
  transition: color .15s, border-color .15s;
}
.report-body a:hover {
  color: #474747;
  border-bottom-color: #474747;
}

/* Tables (GFM) */
.report-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  overflow-x: auto;
  font-size: .92em;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
}
.report-body table thead {
  background: #f8f8f8;
}
.report-body table th,
.report-body table td {
  border: 1px solid #ebebeb;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.report-body table th {
  font-weight: 700;
  color: #3b3b3b;
}
.report-body table tr:nth-child(even) td {
  background: #fbfbfb;
}

/* Horizontal rule */
.report-body hr {
  border: 0;
  border-top: 1px solid #e7e7e7;
  margin: 1.6em 0;
}

/* Keep linebreaks off by default — markdown handles paragraph spacing. */
.report-body br { display: initial; }

/* Math (KaTeX) — the \tag{n} label is nested deep inside .katex-html and
   KaTeX's own float-based right-alignment fights our display overrides.
   Fix: make .katex-display a positioning context (no overflow!), let the
   inner .katex handle horizontal scroll, then absolutely pin every .tag
   (regardless of nesting depth) to the far right. */
.report-body .katex-display {
  position: relative;
  margin: 1em 0;
  padding: 4px 44px 4px 4px;  /* right padding reserves space for the tag */
  overflow: visible;          /* MUST be visible — absolute .tag would clip otherwise */
  text-align: center;
}
.report-body .katex { font-size: 1.05em; }
.report-body .katex-display > .katex {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;           /* long formulas scroll inside the inner box */
  overflow-y: hidden;
  vertical-align: middle;
}
.report-body .katex-display > .katex > .katex-html { white-space: nowrap; position: static; }
/* Any .tag anywhere under .katex-display gets pinned to the outer right edge. */
.report-body .katex-display .tag {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  float: none !important;
  padding: 0 !important;
  color: var(--muted, #6b7280);
  font-size: .9em;
  white-space: nowrap;
}

/* Figure captions (when an <img> is followed by an em-italic line) */
.report-body figure { margin: 1em auto; text-align: center; }
.report-body figure figcaption {
  font-size: .85em;
  color: #696969;
  margin-top: .4em;
}

/* Remove the legacy override that forced pre-wrap whitespace on rendered
   markdown — it caused stray newlines from the source to break the layout. */
#result-wrap article {
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 24px 28px;
  white-space: normal;
}
.error {
  background: #eaeaea;
  color: #3f3f3f;
  border: 1px solid #c7c7c7;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 12px;
  font-size: .92em;
}
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  border: 2px solid #ddd;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Follow-up Q&A panel ------------------------------------- */
.qa-card { margin-top: 20px; }
.qa-body {
  padding: 18px 22px 22px;
  background: #fff;
}
.qa-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.qa-thread:empty { display: none; }
.qa-turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e7e7e7;
}
.qa-turn:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.qa-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qa-msg-body {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .94em;
  line-height: 1.6;
  word-wrap: break-word;
  max-width: 85%;
}
.qa-q .qa-msg-body {
  background: #f3f3f3;
  border: 1px solid #e1e1e1;
  color: #3b3b3b;
  align-self: flex-start;
  white-space: pre-wrap;
}
.qa-a .qa-msg-body {
  background: #fbfbfb;
  border: 1px solid #f1f1f1;
  color: #292929;
  align-self: flex-end;
}
.qa-a .qa-msg-body > *:first-child { margin-top: 0; }
.qa-a .qa-msg-body > *:last-child  { margin-bottom: 0; }

/* Animated "…" placeholder shown while the assistant is composing a reply.
   Three dots that fade in/out in sequence — mirrors common chat affordances. */
.qa-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px;
  min-height: 1em;
}
.qa-typing > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #898989;
  opacity: .35;
  animation: qa-typing-bounce 1.2s ease-in-out infinite;
}
.qa-typing > span:nth-child(2) { animation-delay: .15s; }
.qa-typing > span:nth-child(3) { animation-delay: .30s; }
@keyframes qa-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%           { transform: translateY(-3px); opacity: 1; }
}

.qa-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}
.qa-form textarea {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 11px 13px;
  font: inherit;
  font-size: .95em;
  border: 1px solid #d9d9d9;
  border-radius: 9px;
  background: #fbfbfb;
  transition: border-color .15s, box-shadow .15s, background .15s;
  resize: vertical;
}
.qa-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(102,102,102,.15);
  background: #fff;
}
.qa-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  flex: none;
}
#qa-submit {
  flex: 1;
  min-height: 100%;
  background: var(--blue);
  color: #fff;
  border: 0;
  padding: 9px 22px;
  border-radius: 8px;
  font: inherit;
  font-size: .92em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(102,102,102,.22);
  transition: background .15s, transform .12s, box-shadow .15s, opacity .15s;
  white-space: nowrap;
}
#qa-submit:hover { background: #5c5c5c; transform: translateY(-1px); }
#qa-submit:active { transform: translateY(0); }
#qa-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
#qa-spinner { align-self: center; margin-left: 0; }
.qa-error {
  color: #3f3f3f;
  font-size: .88em;
}
@media (max-width: 600px) {
  .qa-form { flex-direction: column; }
  .qa-actions { flex-direction: row; align-items: center; }
}


/* ---------- Visualization refresh ----------------------------------- */
body {
  background:
    linear-gradient(180deg, #f9f9f9 0%, #f2f2f2 48%, #f6f6f6 100%);
  color: #1f1f1f;
}
.container {
  max-width: 1040px;
  margin: 24px auto;
  padding: 0 18px;
}
.promo-banner,
.form-section,
.meta-card,
.report-card,
section#result {
  border-radius: 8px;
}
.promo-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
  align-items: center;
  gap: 26px;
  min-height: 230px;
  padding: 30px;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, #323232 0%, #323232 58%, #424242 100%);
  box-shadow:
    0 18px 42px rgba(40,40,40,.20),
    0 2px 8px rgba(40,40,40,.12);
}
.promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .35;
  pointer-events: none;
}
.promo-banner::after {
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.promo-copy,
.workflow-visual {
  position: relative;
  z-index: 1;
}
.brand {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #fff;
  padding: 5px;
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.55);
}
.promo-banner h1 {
  font-size: 2.75rem;
  letter-spacing: 0;
}
.promo-sub {
  max-width: 560px;
  margin-top: 8px;
  color: rgba(255,255,255,.88);
}
.banner-links {
  margin-top: 18px;
}
.gh-link {
  border-radius: 8px;
  background: rgba(255,255,255,.13);
}
.workflow-visual {
  min-height: 176px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)),
    rgba(16,16,16,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.visual-grid {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  opacity: .5;
}
.visual-grid span {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
}
.visual-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 4px;
}
.visual-pipeline::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, #9f9f9f, #e8e8e8 48%, #9f9f9f);
  transform: translateY(-50%);
  opacity: .9;
}
.visual-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(22,22,22,.74);
  color: rgba(255,255,255,.88);
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.visual-node-active {
  background: #f5f5f5;
  color: #383838;
  border-color: #c5c5c5;
}
.visual-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 72px;
  margin-top: 26px;
  padding: 0 6px;
}
.visual-chart span {
  flex: 1;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #d3d3d3, #9f9f9f);
  box-shadow: 0 -1px 0 rgba(255,255,255,.28) inset;
}
.visual-chart .bar-a { height: 38%; background: linear-gradient(180deg, #c3c3c3, #9f9f9f); }
.visual-chart .bar-b { height: 72%; }
.visual-chart .bar-c { height: 48%; background: linear-gradient(180deg, #e8e8e8, #cfcfcf); }
.visual-chart .bar-d { height: 86%; background: linear-gradient(180deg, #e8e8e8, #c3c3c3); }
.visual-chart .bar-e { height: 62%; background: linear-gradient(180deg, #e8e8e8, #9f9f9f); }
.form-section,
.meta-card,
.report-card,
section#result {
  border-color: #e5e5e5;
  box-shadow:
    0 1px 2px rgba(31,31,31,.04),
    0 14px 34px rgba(31,31,31,.07);
}
.form-section {
  position: relative;
  overflow: hidden;
  padding: 30px;
}
.form-section::before,
.meta-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tech-cyan), var(--muted) 48%, var(--tech-cyan));
}
.meta-card {
  position: relative;
  overflow: hidden;
}
.feature-stage {
  align-items: stretch;
}
.feature-stage-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.feature-tabs {
  border-radius: 8px;
  background: #f1f1f1;
}
.feature-tab {
  min-height: 40px;
  border-radius: 6px;
  text-align: center;
}
.feature-tab.selected {
  color: #383838;
  box-shadow:
    0 4px 12px rgba(102,102,102,.14),
    inset 0 0 0 1px rgba(102,102,102,.14);
}
input,
textarea,
.select-input,
button[type="submit"],
.copy-btn,
#qa-submit {
  border-radius: 8px;
}
button[type="submit"] {
  background: linear-gradient(135deg, #595959, #626262);
  box-shadow: 0 9px 22px rgba(89,89,89,.24);
}
button[type="submit"]:hover {
  background: linear-gradient(135deg, #4f4f4f, #545454);
}

/* ---------- Result visualization ------------------------------------ */
.job-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 8px 24px rgba(31,31,31,.05);
}
.job-timeline::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: calc(14px + 6.5px);   /* dot vertical center: padding-top + dot radius */
  transform: translateY(-50%);
  height: 2px;
  background: #dedede;
}
.timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #777777;
  font-size: .78em;
  font-weight: 700;
  text-align: center;
}
.timeline-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}
.timeline-step.is-complete,
.timeline-step.is-ready {
  color: var(--tech-cyan);
}
.timeline-step.is-complete .timeline-dot,
.timeline-step.is-ready .timeline-dot {
  border-color: var(--tech-cyan);
  background: var(--tech-cyan);
  box-shadow: 0 0 0 4px rgba(141,141,141,.16);
}
.timeline-step.is-active {
  color: #505050;
}
.timeline-step.is-active .timeline-dot {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(102,102,102,.14);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.timeline-step.is-error {
  color: #3f3f3f;
}
.timeline-step.is-error .timeline-dot {
  border-color: #767676;
  background: #767676;
  box-shadow: 0 0 0 4px rgba(118,118,118,.14);
}
.report-header {
  background:
    linear-gradient(90deg, #f9f9f9, #f8f8f8 55%, #f9f9f9);
}
.report-body {
  color: #242424;
}
.report-body h1,
.report-body h2,
.report-body h3,
.report-body h4,
.report-body h5,
.report-body h6 {
  letter-spacing: 0;
}
.media-frame {
  display: block;
  margin: 18px auto;
  padding: 14px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  box-shadow: 0 10px 26px rgba(31,31,31,.08);
  text-align: center;
}
.media-frame a {
  border-bottom: 0;
}
.media-frame img,
.report-body img,
.media-frame video,
.report-body video,
.media-frame iframe,
.report-body iframe {
  display: block;
  max-width: 100% !important;
  margin: 0 auto;
  border: 0 !important;
  border-radius: 6px !important;
  background: #fff;
}
.media-frame img,
.report-body img {
  width: auto !important;
  height: auto !important;
  max-height: 82vh !important;
  object-fit: contain;
}
.media-frame-hero img,
.report-body[data-mode="poster_generate"] img,
.report-body[data-mode="reel_generate"] img {
  width: 100% !important;
  max-height: 88vh !important;
}
.media-frame video,
.report-body video {
  width: 100% !important;
  background: #131313;
}
.media-frame video { aspect-ratio: 16 / 9; }
.report-body video {
  display: block;
  height: auto !important;
  aspect-ratio: auto;
}
.media-frame iframe,
.report-body iframe {
  width: 100% !important;
  min-height: 560px;
  max-height: 88vh;
}

/* --- Poster embed: real aspect-ratio + fullscreen button + mobile fit ------ */
/* The poster iframe carries its own aspect-ratio (seeded by orientation, then
   refined to the exact canvas by fitPosterFrame). Don't let the generic
   min-height:560px above override it — that would letterbox portrait posters
   and break the mobile fit. */
.poster-embed { position: relative; }
.poster-embed iframe,
.report-body .poster-embed iframe {
  min-height: 0 !important;
  height: auto !important;
}
/* In-flow button BELOW the poster — not an absolute overlay (which covered the
   title/logo/QR and, on iOS, couldn't fullscreen an iframe anyway). Centered
   pill under the frame; on tap it fullscreens where supported, else opens the
   poster in a new tab for native pinch-zoom. */
.poster-fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px auto 2px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 13px/1 inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.10));
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s cubic-bezier(.32,.72,0,1);
}
.poster-fs-btn:hover { background: var(--surface-soft); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); color: var(--ink); transform: translateY(-1px); }

/* One row under the poster: playful hint (left) + "Open full-size" (right). */
.poster-underbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: 10px 2px 2px;
}
.poster-egg {
  flex: 1 1 300px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .01em;
  line-height: 1.55;
}
.poster-underbar .poster-fs-btn { margin: 0; flex: 0 0 auto; }

@media (max-width: 640px) {
  .media-frame { padding: 6px; margin: 12px auto; }
  /* Full-width, finger-sized button — the primary way to read on a phone. */
  .poster-fs-btn {
    display: flex;
    width: 100%;
    margin: 10px 0 2px;
    padding: 12px 14px;
    min-height: 44px;
    font-size: 15px;
  }
  /* In the under-poster row, the hint stacks above a full-width button. */
  .poster-underbar { gap: 8px; }
  .poster-underbar .poster-fs-btn { flex: 1 1 100%; margin: 0; }
  /* Cap tall portrait posters so they don't run off-screen; opening full-size is
     the way to actually read them. */
  .poster-embed iframe,
  .report-body .poster-embed iframe { max-height: 78vh !important; }
}

.media-caption,
.media-frame figcaption {
  display: block;
  margin-top: 10px;
  color: #6f6f6f;
  font-size: .84em;
  line-height: 1.45;
}
.download-strip {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 4px !important;
  text-align: center !important;
}
.result-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px !important;
  margin: 0 !important;
  border: 1px solid #c6c6c6 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #474747 !important;
  font-size: .88em !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(31,31,31,.06);
}
.result-action:hover {
  border-color: var(--blue) !important;
  background: #f3f3f3 !important;
  color: #393939 !important;
}
.report-body article {
  max-width: 760px;
  margin: 0 auto;
}
.qa-a .media-frame {
  box-shadow: none;
}

@media (max-width: 760px) {
  .container {
    margin: 14px auto;
    padding: 0 14px;
  }
  .promo-banner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 24px 18px;
    gap: 18px;
  }
  .workflow-visual {
    min-height: 150px;
  }
  .visual-node {
    min-height: 38px;
    padding: 0 5px;
    font-size: .7em;
  }
  .visual-chart {
    height: 58px;
    margin-top: 18px;
  }
  .form-section,
  .meta-card,
  .report-body,
  #result-wrap article,
  .qa-body {
    padding: 18px;
  }
  .feature-stage {
    display: block;
  }
  .feature-stage-tag {
    margin-bottom: 8px;
  }
  .job-timeline {
    gap: 4px;
    padding: 12px 8px;
  }
  .timeline-label {
    font-size: .86em;
  }
  .media-frame {
    padding: 8px;
  }
  .media-frame iframe,
  .report-body iframe {
    min-height: 360px;
  }
  .qa-msg-body {
    max-width: 100%;
  }
}

@media (max-width: 460px) {
  .promo-banner h1 {
    font-size: 1.85rem;
  }
  .brand-logo {
    width: 36px;
    height: 36px;
  }
  .workflow-visual {
    display: none;
  }
  .job-timeline {
    grid-template-columns: 1fr 1fr;
  }
  .job-timeline::before {
    display: none;
  }
  .download-strip {
    justify-content: stretch;
  }
  .result-action {
    flex: 1 1 100%;
  }
}


/* ---------- Shared page region alignment ----------------------------- */
.index-page .container,
.result-page .container {
  max-width: 1040px;
  margin: 24px auto;
  padding: 0 18px;
}
.index-page .promo-banner,
.result-page .promo-banner {
  width: 100%;
  min-height: 230px;
  margin: 0 0 24px;
}
.index-page .primary-region,
.result-page .primary-region {
  width: 100%;
  margin: 0 0 20px;
  padding: 30px;
}
.result-page .meta-card.primary-region {
  padding-bottom: 18px;
}
.result-page .meta-card.primary-region .kv {
  margin-bottom: 18px;
}
.result-page .job-timeline {
  margin: 0;
}
.result-page #error,
.result-page #result-wrap,
.result-page #qa-wrap {
  width: 100%;
}

@media (max-width: 760px) {
  .index-page .container,
  .result-page .container {
    margin: 14px auto;
    padding: 0 14px;
  }
  .index-page .promo-banner,
  .result-page .promo-banner {
    min-height: 0;
    margin-bottom: 18px;
  }
  .index-page .primary-region,
  .result-page .primary-region {
    padding: 18px;
  }
}
/* ==========================================================================
   ResearchStudio — Studio UI v2
   A focused research-workspace layer shared by submission and result pages.
   ========================================================================== */
:root {
  --ink: #0d0d0f;
  --ink-2: #3a3a3f;
  --paper: #f5f5f6;
  --surface: #ffffff;
  --surface-soft: #f0f0f2;
  --line: rgba(17,17,20,.10);
  --muted: #6b6b72;
  --blue: #2b50f0;
  --blue-dark: #1e3fd0;
  --mint: #cfd9ff;
  --mint-strong: #2b50f0;
  --coral: #8a8a90;
  --amber: #b4b4ba;
  --shadow-sm: 0 1px 2px rgba(17,17,20, .06), 0 10px 30px rgba(17,17,20, .08);
  --shadow-lg: 0 28px 80px rgba(17,17,20, .16);
}

html { scroll-behavior: smooth; }
body[data-ui="studio"] {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(223,223,223, .38), transparent 30rem),
    radial-gradient(circle at 94% 22%, rgba(90,90,90, .10), transparent 32rem),
    var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-ui="studio"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(rgba(32,32,32, .22) .55px, transparent .55px);
  background-size: 6px 6px;
}
body[data-ui="studio"] .container {
  width: min(1120px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 28px 0 0;
}

/* Homepage hero */
.index-page .promo-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 1.22fr);
  align-items: center;
  gap: 40px;
  min-height: 510px;
  margin: 0 0 24px;
  padding: 58px 56px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255, .12);
  border-radius: 24px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 78% 14%, rgba(156,156,156, .24), transparent 28%),
    linear-gradient(145deg, #191919 0%, #272727 58%, #383838 100%);
  box-shadow: var(--shadow-lg);
}
.index-page .promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent, #000 52%);
}
.index-page .promo-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -110px;
  bottom: -150px;
  border: 68px solid rgba(173,173,173, .14);
  border-radius: 50%;
  box-shadow: none;
}
.index-page .promo-copy,
.index-page .workflow-visual { position: relative; z-index: 1; }

.promo-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: rgba(255,255,255,.68);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.promo-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint-strong);
  box-shadow: 0 0 0 5px rgba(156,156,156, .13);
}
.index-page .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 24px;
}
.index-page .brand-logo {
  width: 36px;
  height: 36px;
  padding: 3px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
}
.index-page .promo-banner .brand h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -.02em;
  text-shadow: none;
}
.index-page .promo-banner h2 {
  max-width: 610px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.7rem, 5.2vw, 4.35rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.055em;
}
.index-page .promo-banner h2 em {
  color: var(--mint);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.035em;
}
.index-page .promo-sub {
  max-width: 600px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.73);
  font-size: 1.02rem;
  line-height: 1.68;
}
.index-page .banner-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin-top: 28px;
}
.gh-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 7px;
  color: #fff;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  font-size: .55rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.gh-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.13);
}

/* Abstract workflow monitor */
.index-page .workflow-visual {
  min-height: 330px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(13,13,13, .42);
  box-shadow: 0 30px 60px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  transform: perspective(900px) rotateY(-3deg) rotateX(1deg);
}
.index-page .visual-header,
.index-page .visual-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.52);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.index-page .visual-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint);
}
.index-page .visual-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-strong);
  box-shadow: 0 0 0 4px rgba(156,156,156,.12);
  animation: pulse-dot 1.8s ease infinite;
}
.index-page .visual-grid {
  position: absolute;
  inset: 55px 18px 52px;
  opacity: .32;
}
.index-page .visual-pipeline {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 34px;
}
.index-page .visual-pipeline::before {
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, var(--mint), #929292 58%, var(--coral));
}
.index-page .visual-node {
  min-height: 72px;
  padding: 10px 5px;
  flex-direction: column;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: rgba(255,255,255,.76);
  background: rgba(24,24,24,.92);
  font-size: .7rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.index-page .visual-node small {
  color: rgba(255,255,255,.36);
  font-size: .57rem;
  letter-spacing: .12em;
}
.index-page .visual-node-active {
  border-color: rgba(223,223,223,.66);
  color: #212121;
  background: var(--mint);
  transform: translateY(-5px);
}
.index-page .visual-node-active small { color: #5f5f5f; }

/* ── First-visit onboarding: draw the eye to the clickable stage tabs ──────
   When the panel has .is-coaching, the two live stage tabs (Discover/Publish)
   glow-pulse and wear a "Step N" badge, and a hint bubble points at them.
   Cleared (class removed) the moment the user clicks any node, or after a few
   seconds — and never shown again (localStorage flag). */
@keyframes rs-coach-pulse {
  0%,100% { box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(120,231,196,.0); }
  50%     { box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 6px rgba(120,231,196,.34); }
}
.index-page .wf-stage-panel.is-coaching .visual-node.is-avail {
  animation: rs-coach-pulse 1.5s ease-in-out infinite;
  border-color: rgba(120,231,196,.85);
}
/* Phase 2 — after the bubble is gone (10s / first click): the loud pulse gives
   way to a soft flowing shimmer that sweeps the tab border. Always on, but
   gentle enough not to nag. */
@keyframes rs-coach-sheen {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
.index-page .wf-stage-panel.is-guiding .visual-node.is-avail {
  border-color: rgba(120,231,196,.42);
  position: relative;
  overflow: hidden;
}
.index-page .wf-stage-panel.is-guiding .visual-node.is-avail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(120,231,196,0) 38%,
    rgba(120,231,196,.28) 50%,
    rgba(120,231,196,0) 62%);
  background-size: 220% 100%;
  animation: rs-coach-sheen 3.6s linear infinite;
}
.rs-coach-hint {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,231,196,.42);
  background: linear-gradient(180deg, rgba(120,231,196,.16), rgba(120,231,196,.06));
  color: rgba(255,255,255,.9);
  font-size: .74rem;
  line-height: 1.4;
  animation: rs-coach-fade .35s ease both;
}
@keyframes rs-coach-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rs-coach-hint .rs-coach-emoji { font-size: 1em; }
.rs-coach-hint b { color: #b7f4dd; font-weight: 700; }
.rs-coach-hint .rs-coach-x {
  margin-left: auto;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  cursor: pointer;
}
.rs-coach-hint .rs-coach-x:hover { background: rgba(255,255,255,.2); color: #fff; }
/* Discover & Publish are the live stages -> a soft available highlight. Build is
   not open yet -> a clean disabled look + lock icon. Panel-scoped so it beats the
   .wf-stage-panel theme rules; NO opacity, so the pipeline connector line never
   shows through the button. Light-theme variants live near the light block. */
.index-page .wf-stage-panel .visual-node.is-avail {
  border-color: rgba(255,255,255,.42);
  color: #fff;
}
.index-page .wf-stage-panel .visual-node.is-avail small { color: rgba(255,255,255,.62); }
.index-page .wf-stage-panel .visual-node.is-locked {
  background: #1c1c20;
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.34);
  opacity: 1;   /* the `disabled` attr triggers a global button:disabled opacity;
                   force it back so the node stays OPAQUE and the connector line
                   can't show through. The greyed look comes from bg/color above. */
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.index-page .wf-stage-panel .visual-node.is-locked small { color: rgba(255,255,255,.2); }
/* Build node: lock sits INLINE before "Build", with a small "coming" label under it. */
.index-page .wf-stage-panel .visual-node .vn-buildline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.index-page .visual-node .vn-lock { font-size: .82em; line-height: 1; opacity: .8; }
.index-page .wf-stage-panel .visual-node .vn-soon {
  margin-top: 2px;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}
/* The panel sits in the RIGHT grid column of a banner with overflow:hidden and no
   right padding, so the 3deg Y-tilt used to push the panel's right edge ~3px past
   the banner and its right border got cropped. Pivot the tilt on the right edge
   (stays put) and pull the panel in a hair so the full frame is always visible. */
.index-page .workflow-visual.wf-stage-panel {
  transform-origin: right center;
  margin-right: 4px;
}
.index-page .visual-chart {
  z-index: 2;
  height: 113px;
  margin: 28px 8px 18px;
  gap: 11px;
}
.index-page .visual-chart span {
  border-radius: 5px 5px 2px 2px;
  opacity: .88;
}
.index-page .visual-footer {
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.1);
  letter-spacing: .08em;
}
.index-page .visual-footer strong {
  color: var(--mint);
  font-size: .72rem;
}

/* Main research form */
.index-page .form-section {
  margin: 0 0 20px;
  padding: 40px 44px 42px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.93);
  box-shadow: var(--shadow-sm);
}
.index-page .form-section::before { display: none; }
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 18px;
  padding: 0;
  border-bottom: none;
}
.section-heading p {
  margin: 0 0 7px;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.section-heading > span {
  max-width: 430px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.index-page label,
.index-page .field-label {
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .01em;
}
.field-note {
  float: right;
  margin-top: 2px;
  color: #919191;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
}
.index-page input,
.index-page textarea {
  margin-top: 9px;
  padding: 14px 15px;
  border: 1px solid #dadada;
  border-radius: 10px;
  color: var(--ink);
  background: #fbfbfb;
  font-size: .92rem;
}
.index-page input::placeholder,
.index-page textarea::placeholder { color: #a4a4a4; }
.index-page input:focus,
.index-page textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(29,29,29,.1);
}
.feature-label {
  margin: 26px 0 11px;
  color: #919191 !important;
  font-size: .68rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.index-page .feature-stage {
  position: relative;
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin: 0 0 10px;
}
.index-page .feature-stage-tag {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface-soft) !important;
  box-shadow: none !important;
  text-align: left;
  text-transform: none;
}
.index-page .feature-stage-tag b {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 7px;
  color: var(--blue);
  background: #eeeeee;
  font-size: .67rem;
  letter-spacing: .03em;
}
.index-page .feature-stage:nth-of-type(4) .feature-stage-tag b {
  color: #555555;
  background: #ededed;
}
.index-page .feature-stage-tag > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: .76rem;
  font-weight: 800;
}
.index-page .feature-stage-tag small {
  color: #939393;
  font-size: .6rem;
  font-weight: 500;
}
.index-page .feature-tabs {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f1f1f1;
}
.index-page .feature-tab {
  min-height: 43px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 7px;
  color: #727272;
  font-size: .76rem;
  font-weight: 700;
}
.index-page .feature-tab:hover {
  color: var(--ink);
  background: rgba(255,255,255,.72);
}
.index-page .feature-tab.selected {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 5px 14px rgba(32,32,32,.16);
}
.index-page .feature-tab.selected::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--mint-strong);
  box-shadow: 0 0 0 3px rgba(156,156,156,.15);
}
.index-page .feature-tab.disabled {
  color: #adadad;
  background: transparent;
  opacity: .65;
}
.index-page .feature-stage:nth-of-type(3)::after {
  content: "SOON";
  position: absolute;
  top: -6px;
  right: -7px;
  z-index: 2;
  padding: 3px 6px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  color: #6c6c6c;
  background: #f5f5f5;
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .09em;
}
#query-label,
#novelty-label,
#pdf-label {
  margin-top: 26px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}
.index-page textarea { min-height: 92px; resize: vertical; }
.index-page #novelty-input { min-height: 130px; }
.index-page input[type="file"] {
  position: relative;
  padding: 28px 18px;
  border: 1.5px dashed #c0c0c0;
  border-radius: 12px;
  color: #777777;
  background: #f7f7f7;
}
.index-page input[type="file"]:hover {
  border-color: var(--blue);
  background: #f4f4f4;
}
.index-page button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52px;
  margin-top: 26px;
  border-radius: 10px;
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(29,29,29,.22);
  font-size: .9rem;
  letter-spacing: .01em;
}
.index-page button[type="submit"] span { font-size: 1.05rem; }
.index-page button[type="submit"]:hover {
  background: var(--blue-dark);
  box-shadow: 0 14px 28px rgba(29,29,29,.27);
}
.index-page .submit-hint {
  margin-top: 13px;
  color: #868686;
}
.index-page .submit-hint i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--mint-strong);
}

/* ============ Poster studio: dark design-tool layout ============ */
#poster-controls { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
#video-controls { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
#blog-controls { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
#reel-controls { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.poster-studio { display: grid; grid-template-columns: minmax(250px, 296px) 1fr; gap: 18px; align-items: start; }

.poster-studio-panel {
  display: flex; flex-direction: column; gap: 17px; min-width: 0;
  padding: 17px 15px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.ps-group { display: flex; flex-direction: column; gap: 9px; }
.ps-group-name { font-size: .63rem; font-weight: 800; letter-spacing: .09em; color: var(--muted); text-transform: uppercase; }

.input-source-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.input-source-tabs .isrc-tab { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 32px; margin: 0; padding: 6px; border-radius: 8px; color: var(--muted); font-size: .72rem; font-weight: 650; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.input-source-tabs .isrc-tab input { position: absolute; opacity: 0; width: 0; height: 0; }
.input-source-tabs .isrc-tab:hover { color: var(--ink); }
.input-source-tabs .isrc-tab.selected { color: var(--blue); background: var(--surface); box-shadow: 0 1px 3px rgba(17,22,33,.14), 0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent); }
.poster-src-field { display: block; margin-top: 10px; }
.poster-src-field input[type="text"] { width: 100%; }
#poster-pdf-input { padding: 15px 14px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: .76rem; }
#poster-pdf-input:hover { border-color: var(--line-strong, rgba(178,178,178,.42)); }
#poster-pdf-input::file-selector-button { margin-right: 11px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-2); font-weight: 700; font-size: .72rem; cursor: pointer; transition: all .13s; }
#poster-pdf-input::file-selector-button:hover { border-color: var(--mint-strong); color: var(--mint-strong); }

.poster-opts { display: flex; gap: 6px; }
.poster-opts.wrap { flex-wrap: wrap; }
.poster-opt {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink-2); font-size: .7rem; font-weight: 600; cursor: pointer;
  line-height: 1.2; transition: transform .2s cubic-bezier(.32,.72,0,1), border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.poster-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.poster-opt:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--blue) 7%, var(--surface)); transform: translateY(-1px); }
.poster-opt.selected { border-color: color-mix(in srgb, var(--blue) 60%, transparent); color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--blue) 55%, transparent); }
.poster-size-note { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
.poster-size-spec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 8px; padding: 9px 10px; font-variant-numeric: tabular-nums; }
.poster-size-label { color: var(--muted); font-size: .61rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.poster-size-physical { color: var(--ink-2); font-size: .68rem; font-weight: 750; text-align: right; }
.poster-size-meta { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; color: var(--muted); font-size: .61rem; line-height: 1.35; }
.poster-size-meta > span + span::before { content: "·"; margin-right: 7px; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.poster-size-raster { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); color: var(--muted); font-size: .61rem; }
.poster-size-raster strong { color: var(--ink-2); font-size: .64rem; font-weight: 700; }
.poster-size-help { display: block; margin: 0; padding: 0 10px 9px; color: var(--muted); font-size: .58rem; line-height: 1.4; }
.pv-swatch { width: 13px; height: 13px; border-radius: 50%; background: var(--sw, #999); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.pv-swatch-auto { background: conic-gradient(from 0deg, #1d3a87, #0f6070, #2d5f3e, #a2521c, #8f2437, #7d2860, #4b2e83, #1d3a87); }
.swatch-opt.selected .pv-swatch { box-shadow: 0 0 0 2px var(--surface-soft), 0 0 0 3.4px var(--mint-strong); }

.poster-advanced { border-top: 1px dashed var(--line); padding-top: 12px; }
.poster-advanced summary { cursor: pointer; font-size: .63rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.poster-advanced summary:hover { color: var(--ink); }
.poster-advanced > .ps-group { margin-top: 14px; }
#poster-req-label textarea { width: 100%; }

.poster-studio-preview { position: sticky; top: clamp(16px, calc(50vh - 250px), 40vh); display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pv-surface { padding: 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(17,22,33,.04), 0 34px 72px -38px rgba(17,22,33,.42), 0 0 64px -42px color-mix(in srgb, var(--blue) 45%, transparent); overflow: visible; }
.poster-studio-preview:has(.pv-frame.port) { top: 16px; }
.pv-surface:has(.pv-frame.port) { width: 100%; max-width: min(560px, calc(70.73vh - 70px)); align-self: center; margin-inline: auto; }
.pv-toolbar { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: 14px 14px 0 0; }
.pv-chips { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; overflow: hidden; }
#poster-preview-chips { flex-wrap: wrap; overflow: visible; }
.pv-toolbar:has(#poster-preview-chips) { align-items: flex-start; }
.pv-chip { padding: 3px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-2); font-size: .62rem; font-weight: 650; white-space: nowrap; border: 1px solid var(--line); }
.pv-chip.auto { background: transparent; color: var(--muted); border-style: dashed; border-color: color-mix(in srgb, var(--blue) 32%, var(--line)); }
.pv-open { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; color: var(--blue); font-size: .7rem; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line)); transition: background .18s ease, transform .18s cubic-bezier(.32,.72,0,1); }
.pv-open:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); transform: translateY(-1px); }
.pv-frame { position: relative; width: 100%; overflow: hidden; background: var(--surface-soft); border-radius: 0 0 14px 14px; }
.pv-frame.land { aspect-ratio: 4494 / 3178; }
.pv-frame.port { aspect-ratio: 3178 / 4494; }
.pv-frame iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; opacity: 0; transition: none; transform-origin: top left; }
.pv-loading { position: absolute; top: 0; left: 0; right: 0; height: 4px; display: none; overflow: hidden; z-index: 6; background: rgba(141,141,141,.16); }
.pv-frame.is-loading .pv-loading { display: block; }
.pv-loading::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 8%, rgba(141,141,141,.95) 50%, transparent 92%); animation: pv-shimmer 1s linear infinite; }
.pv-preview-error { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface-soft); color: var(--muted); font-size: .72rem; }
.pv-preview-error[hidden] { display: none; }
.pv-preview-error button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--blue); font: inherit; font-weight: 750; cursor: pointer; }
.pv-open[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@keyframes pv-shimmer { to { transform: translateX(100%); } }
.pv-caption { margin: 0 2px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.pv-caption b { color: var(--ink-2); font-weight: 700; }

/* Video studio reuses the poster panel language but previews paper2video's
   narration-aligned focus treatments on a real generated slide frame. */
.video-upload-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
#video-pdf-input {
  width: 100%; padding: 15px 13px; border: 1.5px dashed var(--line); border-radius: 11px;
  background: var(--surface-soft); color: var(--muted); font-size: .72rem;
}
#video-pdf-input:hover { border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); }
#video-pdf-input::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink-2); font-size: .7rem; font-weight: 750; cursor: pointer;
}
.blog-studio-panel textarea { width: 100%; }
#blog-pdf-input,
#rednote-pdf-input,
#reel-pdf-input {
  width: 100%; padding: 15px 13px; border: 1.5px dashed var(--line); border-radius: 11px;
  background: var(--surface-soft); color: var(--muted); font-size: .72rem;
}
#blog-pdf-input:hover,
#rednote-pdf-input:hover,
#reel-pdf-input:hover { border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); }
#blog-pdf-input::file-selector-button,
#rednote-pdf-input::file-selector-button,
#reel-pdf-input::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink-2); font-size: .7rem; font-weight: 750; cursor: pointer;
}
.blog-option-note { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.blog-output-card {
  position: sticky; top: clamp(16px, calc(50vh - 250px), 40vh);
  padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 36%),
    var(--surface);
  box-shadow: 0 1px 2px rgba(17,22,33,.04), 0 32px 70px -42px rgba(17,22,33,.38);
}
.blog-output-kicker {
  margin-bottom: 8px; color: var(--blue); font-size: .64rem; font-weight: 850;
  letter-spacing: .11em; text-transform: uppercase;
}
.blog-output-card h3 { margin: 0; color: var(--ink); font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.blog-output-card > p { max-width: 660px; margin: 10px 0 20px; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.blog-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 21px; }
.blog-deliverable {
  display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft);
}
.blog-file-icon {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 42px;
  border-radius: 7px 7px 9px 9px; color: #fff; background: var(--blue);
  box-shadow: inset 0 -9px 18px rgba(0,0,0,.13); font-size: .66rem; font-weight: 850;
}
.blog-deliverable div { min-width: 0; }
.blog-deliverable b { display: block; color: var(--ink); font-size: .72rem; line-height: 1.35; }
.blog-deliverable small { display: block; margin-top: 3px; color: var(--muted); font-size: .62rem; }
.blog-deliverable code { color: inherit; font-size: inherit; }
.blog-output-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog-output-list li {
  position: relative; padding-left: 21px; color: var(--ink-2); font-size: .75rem; line-height: 1.5;
}
.blog-output-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--mint-strong); font-weight: 900;
}
.blog-output-note {
  display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding: 13px 14px;
  border-left: 3px solid var(--blue); border-radius: 4px 11px 11px 4px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-soft));
}
.blog-output-note b { color: var(--ink); font-size: .72rem; }
.blog-output-note span { color: var(--muted); font-size: .66rem; line-height: 1.5; }
.rednote-appearance-grid { margin-bottom: 4px; }
.rednote-preview-stack {
  position: relative; min-height: 250px; margin: 0 0 24px; perspective: 900px;
}
.rednote-preview-stack > div {
  position: absolute; inset: 0 auto auto 50%; width: 168px; height: 224px;
  padding: 18px; border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 16px; color: #20242d; background: #fff9f4;
  box-shadow: 0 20px 38px -24px rgba(30,35,48,.55); transform-origin: 50% 95%;
}
.rednote-preview-stack > div:nth-child(1) { z-index: 3; transform: translateX(-85%) rotate(-7deg); }
.rednote-preview-stack > div:nth-child(2) { z-index: 2; transform: translateX(-50%) translateY(7px); background: #f5f8ff; }
.rednote-preview-stack > div:nth-child(3) { z-index: 1; transform: translateX(-15%) rotate(7deg); background: #fff5f8; }
.rednote-preview-stack small { display: block; color: #687187; font-size: .52rem; font-weight: 850; letter-spacing: .08em; }
.rednote-preview-stack b { display: block; margin-top: 21px; font-size: 1.12rem; line-height: 1.18; letter-spacing: -.04em; }
.rednote-preview-stack i { display: block; height: 80px; margin-top: 20px; border-radius: 10px; background: linear-gradient(135deg,#596cff,#e68baa); }
.rednote-preview-stack span { display: block; width: 100%; height: 9px; margin-top: 11px; border-radius: 999px; background: #dce3f3; }
.rednote-preview-stack span:last-child { width: 66%; }
.rednote-preview-stack strong { display: block; margin-top: 40px; color: #d64f78; font-size: 1.55rem; }
.reel-options-stack { display: grid; gap: 9px; }
.reel-module-options {
  overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-soft);
}
.reel-module-options > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px;
  list-style: none; cursor: pointer; color: var(--ink-2); font-size: .7rem; font-weight: 800;
}
.reel-module-options > summary::-webkit-details-marker { display: none; }
.reel-module-options > summary > small {
  margin-left: auto; color: var(--muted); font-size: .56rem; font-weight: 650;
}
.reel-module-options > summary::after {
  content: "+"; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--blue); font-size: .76rem;
}
.reel-module-options[open] > summary {
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.reel-module-options[open] > summary::after { content: "−"; }
.reel-module-options-body {
  display: flex; flex-direction: column; gap: 13px; padding: 13px 12px;
  background: var(--surface);
}
.reel-module-options-body textarea { width: 100%; }
.reel-compact-switch {
  display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft);
  color: var(--ink-2); cursor: pointer;
}
.reel-compact-switch input { margin-top: 2px; accent-color: var(--blue); }
.reel-compact-switch span { display: flex; flex-direction: column; gap: 2px; }
.reel-compact-switch b { font-size: .65rem; }
.reel-compact-switch small { color: var(--muted); font-size: .57rem; line-height: 1.35; }
.reel-compact-switch[hidden] { display: none; }
.reel-inner-options { margin-top: 1px; }
.reel-video-ppt-options { margin-top: 2px; }
.reel-pipeline {
  display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: reel-step;
}
.reel-pipeline li {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 48px;
  padding: 9px 9px 9px 43px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface-soft); counter-increment: reel-step;
}
.reel-pipeline li::before {
  content: counter(reel-step); position: absolute; left: 10px; top: 10px;
  display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px;
  color: #fff; background: var(--blue); font-size: .62rem; font-weight: 850;
}
.reel-pipeline b { color: var(--ink); font-size: .7rem; }
.reel-pipeline span { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.reel-fixed-note {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 13px;
  border: 1px dashed color-mix(in srgb, var(--blue) 36%, var(--line)); border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-soft));
}
.reel-fixed-note b { color: var(--ink); font-size: .7rem; }
.reel-fixed-note span { color: var(--muted); font-size: .63rem; line-height: 1.5; }
.reel-interaction-map {
  display: grid; grid-template-columns: minmax(0, .88fr) auto minmax(0, 1.12fr);
  align-items: center; gap: 11px; margin: 3px 0 18px;
}
.reel-mini-poster,
.reel-mini-modal {
  position: relative; min-height: 168px; padding: 24px 13px 12px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--surface-soft);
}
.reel-mini-label {
  position: absolute; top: 0; left: 0; right: 0; padding: 6px 10px;
  color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface);
  font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.reel-mini-poster > b { display: block; margin: 17px 0 10px; color: var(--ink); font-size: .78rem; }
.reel-mini-poster > small {
  display: block; margin-top: 9px; color: var(--blue); font-size: .57rem; font-weight: 750;
}
.reel-mini-poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reel-mini-poster-grid i {
  height: 38px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 13%, var(--surface)), var(--surface));
}
.reel-mini-poster-grid i:nth-child(2),
.reel-mini-poster-grid i:nth-child(5) { background: color-mix(in srgb, var(--mint-strong) 10%, var(--surface)); }
.reel-map-arrow { color: var(--blue); font-size: 1.2rem; font-weight: 900; }
.reel-mini-modal {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 7px; padding-top: 39px;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface-soft));
}
.reel-mini-video {
  display: grid; place-items: center; min-width: 0; border-radius: 7px; color: #fff;
  background: linear-gradient(145deg, #18202f, #080b11);
}
.reel-mini-video i { font-style: normal; font-size: 1rem; }
.reel-mini-video small { color: #c9d4e9; font-size: .55rem; }
.reel-mini-article {
  display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px;
  border-radius: 7px; background: var(--surface);
}
.reel-mini-article b { color: var(--blue); font-size: .58rem; }
.reel-mini-article i { height: 5px; border-radius: 999px; background: var(--line); }
.reel-mini-article i:nth-of-type(2) { width: 78%; }
.reel-mini-article small { margin-top: auto; color: var(--muted); font-size: .52rem; }
.reel-deliverables {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px;
}
.reel-deliverables > div {
  min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-soft);
}
.reel-deliverables b { display: block; color: var(--ink); font-size: .67rem; }
.reel-deliverables small { display: block; margin-top: 3px; color: var(--muted); font-size: .54rem; overflow-wrap: anywhere; }
.reel-deliverables code { color: inherit; font-size: inherit; }
.reel-bundle-tree {
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); overflow: hidden;
}
.reel-bundle-tree summary {
  padding: 11px 13px; cursor: pointer; color: var(--ink-2); font-size: .68rem; font-weight: 750;
}
.reel-bundle-tree pre {
  margin: 0; padding: 0 13px 13px; color: var(--muted); background: transparent;
  font-size: .6rem; line-height: 1.55; white-space: pre-wrap;
}
.reel-output-note {
  display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 12px 13px;
  border-left: 3px solid var(--mint-strong); border-radius: 4px 11px 11px 4px;
  background: color-mix(in srgb, var(--mint-strong) 7%, var(--surface-soft));
}
.reel-output-note b { color: var(--ink); font-size: .7rem; }
.reel-output-note span { color: var(--muted); font-size: .63rem; line-height: 1.5; }
.blog-language-result {
  margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.blog-language-result > summary {
  padding: 13px 16px; cursor: pointer; color: var(--ink); background: var(--surface-soft);
  font-size: .82rem; font-weight: 750;
}
.blog-language-result > article { padding: 16px; line-height: 1.7; color: var(--ink-2); background: var(--surface); }
.blog-language-result > article > :first-child { margin-top: 0; }
.rednote-carousel {
  position: relative; width: min(100%, 520px); margin: 18px auto 22px; outline: none;
}
.rednote-carousel:focus-visible {
  border-radius: 16px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent);
}
.rednote-carousel-viewport {
  position: relative; display: grid; place-items: center; overflow: hidden; touch-action: pan-y;
}
.rednote-carousel-slide,
.result-page .rednote-carousel-slide {
  width: 100%; margin: 0 auto !important; padding: 8px !important;
}
.rednote-carousel-slide[hidden] { display: none !important; }
.rednote-carousel-slide > a {
  display: block; width: 100%; padding: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.rednote-carousel-slide img {
  display: block; width: auto !important; max-width: 100% !important;
  max-height: min(72vh, 760px); margin: 0 auto; object-fit: contain;
}
.rednote-carousel-controls {
  display: flex; align-items: center; justify-content: center; margin-top: 13px;
}
.rednote-carousel-button {
  position: absolute; z-index: 2; top: 50%; display: inline-grid;
  width: 36px; height: 36px; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 50%;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  cursor: pointer; opacity: .88;
  box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(11,16,32,.18));
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}
.rednote-carousel-button svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.rednote-carousel-button.is-previous { left: 6px; transform: translateY(-50%); }
.rednote-carousel-button.is-next { right: 6px; transform: translateY(-50%); }
.rednote-carousel-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent); opacity: 1;
}
.rednote-carousel-button.is-previous:hover:not(:disabled),
.rednote-carousel-button.is-next:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); }
.rednote-carousel-button:disabled { opacity: .32; cursor: default; box-shadow: none; }
.rednote-carousel-counter {
  min-width: 72px; color: var(--muted); text-align: center;
  font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.video-option-note { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.video-focus-card { transition: opacity .16s ease, filter .16s ease, border-color .16s ease; }
.video-focus-card.is-disabled {
  opacity: .5; filter: grayscale(.4); border-color: var(--line); background: var(--surface-soft);
}
.video-focus-card.is-disabled .poster-opts { pointer-events: none; }
.video-focus-card.is-disabled .poster-opt { cursor: not-allowed; }
.video-attention-conflict-note {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line)); border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-soft));
}
.video-attention-conflict-note[hidden] { display: none; }
.video-attention-conflict-note b { color: var(--ink-2); font-size: .68rem; }
.video-attention-conflict-note span { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.video-custom-duration {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; align-self: flex-start;
  margin: 1px 0 0; color: var(--muted); font-size: .7rem; font-weight: 650;
}
.video-custom-duration[hidden] { display: none; }
.video-custom-duration .duration-range-bound {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  color: var(--ink-2); font-size: .65rem; font-weight: 750;
}
.video-custom-duration input {
  width: 76px; min-height: 36px; margin: 0; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit;
}
.video-custom-duration input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.duration-range-separator { color: var(--muted); font-weight: 750; }
.duration-range-unit { white-space: nowrap; }
.video-duration-note {
  display: block; margin-top: 2px; color: var(--muted);
  font-size: .59rem; font-weight: 550; line-height: 1.4;
}
.video-studio-panel textarea { width: 100%; }
.video-ppt-options { margin-top: 1px; }
.video-ppt-options > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  list-style: none; cursor: pointer;
}
.video-ppt-options > summary::-webkit-details-marker { display: none; }
.video-ppt-options > summary::after {
  content: "+"; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--blue); font: 800 .86rem/1 system-ui, sans-serif;
}
.video-ppt-options[open] > summary::after { content: "−"; }
.video-ppt-options > summary > span { color: var(--ink-2); }
#video-ppt-options > summary > span {
  color: var(--muted); font-size: .63rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.reel-video-ppt-options > summary > span {
  color: var(--ink-2); font-size: .65rem; font-weight: 750;
  letter-spacing: .01em; text-transform: none;
}
.video-ppt-options > summary > small {
  margin-left: auto; color: var(--muted); font: 650 .57rem/1.25 system-ui, sans-serif;
  letter-spacing: 0; text-align: right; text-transform: none;
}
.video-ppt-options-body { display: flex; flex-direction: column; gap: 14px; padding-top: 15px; }
.video-ppt-fixed {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 8px;
  padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 11px; background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}
.video-ppt-fixed span { color: var(--muted); font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.video-ppt-fixed b { color: var(--ink); font-size: .7rem; font-weight: 750; text-align: right; }
.video-ppt-fixed em { grid-column: 1 / -1; color: var(--muted); font-size: .6rem; font-style: normal; text-align: right; }
.video-ppt-alignment-note {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 10px;
  border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-soft));
}
.video-ppt-alignment-note b { color: var(--ink-2); font-size: .63rem; }
.video-ppt-alignment-note span { color: var(--muted); font-size: .59rem; line-height: 1.4; }
.video-ppt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.video-ppt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.video-ppt-field > span,
.video-ppt-field > legend { color: var(--ink-2); font-size: .65rem; font-weight: 750; }
.video-ppt-field > small { color: var(--muted); font-size: .59rem; line-height: 1.35; }
.video-ppt-field input[type="text"],
.video-ppt-field input[type="number"],
.video-ppt-field select {
  width: 100%; min-height: 37px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--ink); font: 600 .67rem/1.25 system-ui, sans-serif;
}
.video-ppt-field input[type="text"]::placeholder,
.video-ppt-field input[type="number"]::placeholder { color: var(--muted); font-weight: 500; }
.video-ppt-field input[type="text"]:focus,
.video-ppt-field input[type="number"]:focus,
.video-ppt-field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.video-ppt-field select:disabled {
  color: var(--muted); background: var(--surface-soft); cursor: not-allowed; opacity: .78;
}
.video-ppt-field[hidden] { display: none; }
.duration-range-inputs {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: 8px;
}
.duration-range-inputs label {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0;
  color: var(--ink-2); font-size: .61rem; font-weight: 700;
}
.duration-range-inputs input[type="number"] { margin: 0; }
.duration-range-inputs .duration-range-separator { padding-bottom: 11px; }
.video-ppt-image-field { gap: 8px; }
.video-ppt-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.video-ppt-check {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-2); font-size: .61rem; font-weight: 650; cursor: pointer;
}
.video-ppt-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line)); color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}
.video-ppt-check.is-disabled { color: var(--muted); background: var(--surface-soft); cursor: not-allowed; opacity: .58; }
.video-ppt-check.is-disabled:has(input:checked) { border-color: var(--line); color: var(--muted); background: var(--surface-soft); }
.video-ppt-check input { width: 12px; height: 12px; margin: 0; accent-color: var(--blue); }
.video-ppt-secondary {
  padding-top: 12px; border-top: 1px dashed var(--line);
}
.video-ppt-secondary > summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  color: var(--ink-2); font-size: .65rem; font-weight: 800;
}
.video-ppt-secondary > summary::-webkit-details-marker { display: none; }
.video-ppt-secondary > summary::after {
  content: "+"; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 20px; height: 20px; margin-left: auto; border: 1px solid var(--line);
  border-radius: 50%; color: var(--blue); font-size: .76rem;
}
.video-ppt-secondary[open] > summary::after { content: "−"; }
.video-ppt-secondary > summary > small {
  margin-left: auto; color: var(--muted); font-size: .57rem; font-weight: 600;
}
.video-ppt-secondary > summary::after { margin-left: 0; }
.video-ppt-secondary-body {
  display: flex; flex-direction: column; gap: 13px; padding: 13px 10px 2px;
}
.video-ppt-export { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); }
.video-ppt-export-heading { display: flex; flex-direction: column; gap: 4px; }
.video-ppt-export-heading > span { color: var(--ink-2); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.video-ppt-export-heading > small { color: var(--muted); font-size: .6rem; line-height: 1.4; }
.video-ppt-editability-heading { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.video-ppt-editability-heading > span { color: var(--ink-2); font-size: .65rem; font-weight: 800; }
.video-ppt-editability-heading > small { color: var(--muted); font-size: .59rem; line-height: 1.4; }
.video-ppt-animation-toggle-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-soft);
}
.video-ppt-animation-toggle-field > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.video-ppt-animation-toggle-field > div > span { color: var(--ink-2); font-size: .65rem; font-weight: 750; }
.video-ppt-animation-toggle-field > div > small { color: var(--muted); font-size: .59rem; line-height: 1.35; }
.video-preview-surface { padding: 8px; }
.video-preview-surface .pv-toolbar { align-items: flex-start; }
.video-preview-surface .pv-chips { flex-wrap: wrap; overflow: visible; }
.video-preview-surface .video-preview-badge { margin-top: 1px; }
.video-preview-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.video-preview-icon-button {
  display: inline-grid; place-items: center; min-width: 31px; height: 27px; margin: 0; padding: 0 7px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-2);
  font: 750 .67rem/1 system-ui, sans-serif; cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.video-preview-icon-button:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.video-preview-icon-button.is-active { color: #fff; border-color: var(--blue); background: var(--blue); }
.video-preview-icon-button:disabled { opacity: .38; cursor: not-allowed; }
.video-cc-button { letter-spacing: .04em; }
.video-preview-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); font: 750 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.video-preview-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--apple-green, #30d158); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-green, #30d158) 18%, transparent); }
.video-preview-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: 0 0 14px 14px; background: #080b11; color: #fff;
}
.video-preview-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-output-details .local-run-body { padding: 13px 15px; }
.video-output-details .pv-caption { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .pv-loading::after { animation: none; background: rgba(141,141,141,.06); }
  .pv-frame iframe { transition: none; }
}

/* hover mini-preview of a single block style (single-element sample) */
.poster-opt.has-preview { position: relative; }
.ps-preview {
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(5px); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
  padding: 8px; border-radius: 11px; background: var(--surface-soft);
  border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.poster-opt.has-preview:hover .ps-preview { opacity: 1; transform: translateX(-50%) translateY(0); }
.ps-preview::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--surface-soft); }
#portrait-title-banner-options,
#landscape-title-banner-options { position: relative; }
#portrait-title-banner-options > .poster-opt.has-preview,
#landscape-title-banner-options > .poster-opt.has-preview { position: static; }
#portrait-title-banner-options > .poster-opt.has-preview:hover,
#landscape-title-banner-options > .poster-opt.has-preview:hover { transform: none; }
.ps-preview.portrait-banner-preview,
.ps-preview.landscape-banner-preview {
  left: 0;
  width: min(560px, calc(100vw - 48px));
  padding: 10px;
  transform: translateY(5px);
  border-color: rgba(22, 31, 46, .2);
  background: #fff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .42);
}
.poster-opt.has-preview:hover .ps-preview.portrait-banner-preview,
.poster-opt.has-preview:hover .ps-preview.landscape-banner-preview { transform: translateY(0); }
.ps-preview.portrait-banner-preview::after,
.ps-preview.landscape-banner-preview::after {
  display: none;
}
.portrait-banner-image,
.landscape-banner-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(22, 31, 46, .12);
  border-radius: 7px;
  background: #fff;
}
.pv-card { --pv-accent: #e8e8e8; position: relative; box-sizing: border-box; width: 152px; height: 100px; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 9px; border-radius: 6px; background: #fff; border: 1px solid #e6e6e6; }
.pv-card .pv-h { height: 16px; width: 82%; border-radius: 2px; background: var(--pv-accent); }
.pv-card .pv-l { height: 8px; width: 100%; border-radius: 2px; background: #e3e3e3; }
.pv-card .pv-l:last-child { width: 62%; }
.pv-solid { background: #f9f9f9; border-color: color-mix(in srgb, var(--pv-accent) 24%, #fff); }
.pv-solid::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--pv-accent), color-mix(in srgb, var(--pv-accent) 50%, #fff)); }
.pv-framed .pv-h { width: auto; margin: -9px -9px 4px; height: 22px; border-radius: 6px 6px 0 0; }
.pv-simple { border: none; border-top: 2px solid #e6e6e6; border-radius: 0; }
.pv-simple .pv-h { background: #333333; width: 66%; }
.pv-left-bar { border-left: 7px solid var(--pv-accent); border-radius: 0 6px 6px 0; }
.pv-elevated { box-shadow: 0 6px 14px rgba(31,31,31,.20); border-color: #eee; }
.pv-neo-brutal { border: 3px solid #111; border-radius: 0; box-shadow: 5px 5px 0 var(--pv-accent); }
.pv-neo-brutal .pv-h { background: #111; }
.pv-tag .pv-h { width: 44%; height: 14px; border-radius: 7px; }
.pv-underline .pv-h { background: #424242; box-shadow: 0 8px 0 -2px var(--pv-accent); margin-bottom: 9px; }
.pv-tinted { background: color-mix(in srgb, var(--pv-accent) 10%, #fff); border-color: color-mix(in srgb, var(--pv-accent) 24%, #fff); }
.pv-double-rule .pv-h { width: 60%; margin: 2px auto; height: 12px; border-top: 2px solid var(--pv-accent); border-bottom: 2px solid var(--pv-accent); border-radius: 0; background: color-mix(in srgb, var(--pv-accent) 14%, #fff); }
.pv-legend-frame { border: 2px solid var(--pv-accent); overflow: visible; margin-top: 7px; padding-top: 15px; }
.pv-legend-frame .pv-h { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 48%; height: 14px; margin: 0; border-radius: 999px; background: #fff; border: 2px solid var(--pv-accent); box-shadow: 0 0 0 3px #fff; }

@media (max-width: 760px) {
  .poster-studio { grid-template-columns: 1fr; }
  .poster-studio-preview { position: static; }
  .ps-preview.portrait-banner-preview,
  .ps-preview.landscape-banner-preview { width: 100%; }
  .blog-output-card { position: static; }
  .blog-deliverables { grid-template-columns: 1fr; }
  .reel-interaction-map { grid-template-columns: 1fr; }
  .reel-map-arrow { justify-self: center; transform: rotate(90deg); }
  .reel-deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Submission confirmation */
.index-page section#result {
  margin: 0 0 20px;
  padding: 27px 30px;
  border: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfbfb, #fff);
  box-shadow: var(--shadow-sm);
}
.index-page section#result h2 {
  color: #4b4b4b;
  font-size: 1.1rem;
}
.index-page section#result h2::before { background-color: #7b7b7b; }
.index-page section#result .hint { text-align: left; }
.site-footer {
  display: flex;
  justify-content: space-between;
  padding: 24px 4px 34px;
  color: #838383;
  font-size: .72rem;
}
.site-footer span { color: var(--ink); font-weight: 800; }
.site-footer p { margin: 0; }

/* Result workspace header */
.result-page .result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  margin: 0 0 18px;
  padding: 22px 25px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 80% -20%, rgba(156,156,156,.2), transparent 42%),
    var(--ink);
  box-shadow: 0 14px 36px rgba(32,32,32,.14);
}
.result-page .result-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.16) 50%, transparent 50.5%);
  background-size: 42px 100%;
  pointer-events: none;
}
.result-page .result-banner::after { display: none; }
.result-page .result-banner .promo-copy {
  display: flex;
  align-items: center;
  gap: 26px;
  z-index: 1;
}
.result-page .result-banner .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding-right: 26px;
  border-right: 1px solid rgba(255,255,255,.16);
  color: #fff;
  text-decoration: none;
}
.result-page .result-banner .brand-logo {
  width: 29px;
  height: 29px;
  padding: 3px;
  border-radius: 6px;
  background: #fff;
}
.result-page .result-banner .brand h1 {
  margin: 0;
  font-size: .94rem;
  text-shadow: none;
}
.result-intro p {
  margin: 0 0 3px;
  color: var(--mint);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .14em;
}
.result-intro h2 {
  margin: 0;
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.result-intro span {
  color: rgba(255,255,255,.55);
  font-size: .7rem;
}
.result-page .result-banner .banner-links {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin: 0;
}

/* Result metadata and progress */
.result-page .meta-card {
  position: relative;
  margin: 0 0 18px;
  padding: 27px 30px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.result-page .meta-card::before {
  height: 3px;
  background: linear-gradient(90deg, var(--mint-strong), var(--blue) 55%, var(--coral));
}
.result-page .kv {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px 18px;
}
.result-page .kv dt {
  color: #848484;
  font-size: .67rem;
  letter-spacing: .1em;
}
.result-page .kv-value {
  padding: 8px 11px;
  border-color: #e5e5e5;
  border-radius: 8px;
  color: var(--ink-2);
  background: #f7f7f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: .8rem;
}
.result-page .status-pill {
  padding: 5px 11px;
  font-size: .68rem;
  letter-spacing: .06em;
}
.result-page .job-timeline {
  margin: 20px 0 0;
  padding: 17px 18px 14px;
  border-color: var(--line);
  border-radius: 11px;
  background: #f7f7f7;
  box-shadow: none;
}
.result-page .job-timeline::before { top: calc(17px + 6.5px); transform: translateY(-50%); }  /* padding-top + dot radius = dot center */
.result-page .timeline-step { gap: 8px; font-size: .69rem; }
.result-page .timeline-dot { width: 13px; height: 13px; }

/* Reports */
.result-page .report-card {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.result-page .report-header {
  padding: 18px 24px;
  border-bottom-color: var(--line);
  background: #f7f7f7;
}
.result-page .report-header h2 {
  color: var(--ink);
  font-size: .92rem;
}
.result-page .report-header h2::before {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: var(--blue);
}
.result-page .copy-btn {
  border-color: #dbdbdb;
  border-radius: 8px;
  color: var(--ink-2);
  background: #fff;
}
.result-page .copy-btn:hover {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}
.result-page .report-body,
.result-page #result-wrap article {
  padding: 34px 38px;
  color: #333333;
  font-size: .94rem;
  line-height: 1.78;
}
.result-page .report-body h1,
.result-page .report-body h2,
.result-page .report-body h3,
.result-page .report-body h4,
.result-page .report-body h5,
.result-page .report-body h6 { color: var(--ink); }
.result-page .report-body h1 { letter-spacing: -.035em; }
.result-page .report-body a { color: var(--blue); }
.result-page .report-body blockquote {
  border-left-color: var(--mint-strong);
  color: #4b4b4b;
  background: #f7f7f7;
}
.result-page .report-body pre {
  border-color: #e2e2e2;
  background: #f6f6f6;
}
.result-page .media-frame {
  border-color: var(--line);
  border-radius: 12px;
  background: #f7f7f7;
  box-shadow: 0 14px 34px rgba(32,32,32,.08);
}
.result-page .result-action {
  border-color: #d3d3d3 !important;
  border-radius: 9px !important;
  color: var(--blue) !important;
}
.result-page .result-action:hover {
  border-color: var(--blue) !important;
  color: var(--blue-dark) !important;
  background: #f4f4f4 !important;
}

/* Follow-up conversation */
.result-page .qa-body { padding: 24px; }
.result-page .qa-thread { gap: 18px; }
.result-page .qa-turn {
  gap: 10px;
  padding-bottom: 18px;
  border-bottom-color: var(--line);
}
.result-page .qa-msg-body {
  max-width: min(86%, 760px);
  padding: 12px 15px;
  border-radius: 12px;
}
.result-page .qa-q .qa-msg-body {
  align-self: flex-end;
  border-color: #dedede;
  color: #3e3e3e;
  background: #f2f2f2;
}
.result-page .qa-a .qa-msg-body {
  align-self: flex-start;
  border-color: #e4e4e4;
  background: #f8f8f8;
}
.result-page .qa-form {
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f7f7;
}
.result-page .qa-form textarea {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.result-page #qa-submit {
  border-radius: 9px;
  background: var(--blue);
  box-shadow: none;
}
.result-page #qa-submit:hover { background: var(--blue-dark); }
.result-page .error {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

:focus-visible {
  outline: 3px solid rgba(29,29,29,.32);
  outline-offset: 2px;
}

/* Responsive refinements */
@media (max-width: 900px) {
  .index-page .promo-banner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 46px 40px;
  }
  .index-page .workflow-visual {
    width: 100%;
    max-width: 620px;
    min-height: 300px;
    transform: none;
  }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .index-page .feature-stage { grid-template-columns: 160px minmax(0, 1fr); }
  .result-page .result-banner { align-items: flex-start; gap: 18px; }
  .result-page .result-banner .promo-copy { align-items: flex-start; }
}

@media (max-width: 700px) {
  body[data-ui="studio"] .container {
    width: min(100% - 24px, 1120px);
    padding-top: 12px;
  }
  .index-page .promo-banner {
    gap: 34px;
    margin-bottom: 12px;
    padding: 36px 24px;
    border-radius: 18px;
  }
  .index-page .promo-banner h2 { font-size: clamp(2.35rem, 12vw, 3.2rem); }
  .index-page .promo-sub { font-size: .91rem; }
  .index-page .workflow-visual { min-height: 260px; padding: 14px; }
  .index-page .visual-pipeline { margin-top: 27px; }
  .index-page .visual-node { min-height: 60px; font-size: .62rem; }
  .index-page .visual-chart { height: 83px; margin-top: 20px; }
  .index-page .form-section { padding: 28px 20px; border-radius: 16px; }
  .section-heading { margin-bottom: 26px; padding-bottom: 20px; }
  .section-heading h2 { font-size: 1.55rem; }
  .section-heading > span { font-size: .82rem; }
  .field-note {
    display: block;
    float: none;
    margin-top: 4px;
  }
  .index-page .feature-stage { display: block; margin-bottom: 14px; }
  .index-page .feature-stage-tag { margin-bottom: 6px; }
  .index-page .feature-tabs { flex-wrap: wrap; }
  .index-page .feature-tab { flex: 1 1 calc(50% - 4px); width: auto; }
  .site-footer { flex-direction: column; gap: 5px; }
  .result-page .result-banner {
    flex-direction: column;
    padding: 20px;
  }
  .result-page .result-banner .promo-copy { flex-direction: column; gap: 14px; }
  .result-page .result-banner .brand {
    width: 100%;
    padding: 0 0 13px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .result-page .meta-card { padding: 22px 18px 18px; }
  .result-page .kv { grid-template-columns: 1fr; row-gap: 5px; }
  .result-page .kv dt { margin-top: 8px; }
  .result-page .report-body,
  .result-page #result-wrap article { padding: 25px 20px; }
  .result-page .qa-body { padding: 16px; }
  .result-page .qa-msg-body { max-width: 96%; }
}

@media (max-width: 460px) {
  .index-page .workflow-visual { display: block; }
  .index-page .visual-header,
  .index-page .visual-footer { font-size: .53rem; }
  .index-page .visual-node { min-height: 54px; padding: 7px 2px; }
  .index-page .visual-chart { height: 70px; }
  .index-page .banner-links { flex-direction: column; align-items: stretch; }
  .index-page .feature-tab { flex-basis: 100%; }
  .result-page .job-timeline { grid-template-columns: repeat(4, 1fr); }
  .result-page .timeline-label { font-size: .58rem; }
  .result-page .result-banner .banner-links { width: 100%; }
  .result-page .result-banner .gh-link { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* Explore arXiv paper menu */
.arxiv-menu {
  position: relative;
  margin: 0;
}
.arxiv-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.arxiv-menu > summary::-webkit-details-marker { display: none; }
.arxiv-menu > summary span {
  display: inline-block;
  transition: transform .18s ease;
}
.arxiv-menu[open] > summary {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.13);
}
.arxiv-menu[open] > summary span { transform: rotate(180deg); }
.arxiv-menu-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  right: 0;
  width: 270px;
  padding: 7px;
  border: 1px solid rgba(32,32,32,.12);
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(15,15,15,.25);
  backdrop-filter: blur(12px);
}
.arxiv-menu-panel::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 24px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(32,32,32,.12);
  border-left: 1px solid rgba(32,32,32,.12);
  background: #fff;
  transform: rotate(45deg);
}
.arxiv-menu-panel a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 10px;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.arxiv-menu-panel a:hover {
  color: var(--blue);
  background: #f3f3f3;
}
.arxiv-menu-panel a span {
  font-size: .78rem;
  font-weight: 750;
}
.arxiv-menu-panel a small {
  flex: none;
  color: #888888;
  font-size: .64rem;
}
@media (max-width: 460px) {
  .arxiv-menu,
  .arxiv-menu > summary { width: 100%; }
  .arxiv-menu-panel {
    right: auto;
    left: 0;
    width: min(270px, calc(100vw - 72px));
  }
  .arxiv-menu-panel::before { right: auto; left: 24px; }
}
/* Keep the complete paper menu inside the clipped hero artwork. */
.arxiv-menu-panel {
  top: auto;
  bottom: calc(100% + 9px);
}
.arxiv-menu-panel::before {
  top: auto;
  bottom: -5px;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid rgba(32,32,32,.12);
  border-bottom: 1px solid rgba(32,32,32,.12);
}
/* ==========================================================================
   ResearchStudio — Technology Research Theme
   Dark scientific workspace, cyan data signals, and paper-first reports.
   ========================================================================== */
:root {
  --tech-bg: #08090c;
  --tech-bg-2: #0d0e12;
  --tech-panel: #14151a;
  --tech-panel-2: #1b1d23;
  --tech-line: rgba(240,243,250, .11);
  --tech-line-strong: rgba(88,119,255, .5);
  --tech-cyan: #5877ff;
  --tech-cyan-2: #4463ff;
  --tech-blue: #9ba0ad;
  --tech-violet: #9ba0ad;
  --tech-text: #f4f6fa;
  --tech-muted: #9ba0ad;
  --tech-paper: #f4f6fa;
  --ink: #f4f6fa;
  --ink-2: #c7cad3;
  --paper: #08090c;
  --surface: #14151a;
  --surface-soft: #1b1d23;
  --line: rgba(240,243,250, .11);
  --muted: #9ba0ad;
  --blue: #5877ff;
  --blue-dark: #4463ff;
  --mint: #2a3a6e;
  --mint-strong: #5877ff;
  --shadow-sm: 0 14px 34px rgba(0,0,0,.5);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.62);
}

body[data-ui="studio"] {
  color: var(--tech-text);
  background: linear-gradient(180deg, #0a0b0f 0%, #08090c 100%);
}
body[data-ui="studio"]::before { background-image: none; opacity: 0; }
body[data-ui="studio"] .container { padding-top: 22px; }

/* Scientific hero */
.index-page .promo-banner {
  min-height: 500px;
  border-color: rgba(141,141,141,.18);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(141,141,141,.055) 1px, transparent 1px),
    linear-gradient(rgba(141,141,141,.055) 1px, transparent 1px),
    radial-gradient(circle at 76% 32%, rgba(141,141,141,.17), transparent 25%),
    linear-gradient(135deg, #101010 0%, #181818 56%, #1b1b1b 100%);
  background-size: 36px 36px, 36px 36px, auto, auto;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 34px 90px rgba(0,0,0,.4);
}
.index-page .promo-banner::before {
  background-image: none;
}
.index-page .promo-banner::after {
  top: -160px;
  right: -120px;
  bottom: auto;
  width: 440px;
  height: 440px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141,141,141,.05), transparent 62%);
  box-shadow: none;
}
.promo-kicker {
  color: #a5a5a5;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.promo-kicker span {
  border-radius: 1px;
  background: var(--tech-cyan);
  box-shadow: none;
  transform: rotate(45deg);
}
.index-page .brand-logo,
.result-page .result-banner .brand-logo {
  border: 1px solid rgba(141,141,141,.24);
  border-radius: 3px;
  box-shadow: 0 0 22px rgba(141,141,141,.12);
}
.index-page .promo-banner .brand h1,
.result-page .result-banner .brand h1 {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: -.035em;
}
.index-page .promo-banner h2 {
  max-width: 650px;
  font-weight: 620;
  letter-spacing: -.06em;
  text-shadow: 0 0 38px rgba(141,141,141,.12);
}
.index-page .promo-banner h2 em {
  color: var(--tech-cyan);
  font-family: inherit;
  font-style: normal;
  font-weight: 620;
  text-shadow: 0 0 26px rgba(141,141,141,.28);
}
.index-page .promo-sub { color: #adadad; }
.gh-link {
  border-color: rgba(155,155,155,.25);
  border-radius: 5px;
  color: #dddddd;
  background: rgba(21,21,21,.72);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: .01em;
}
.gh-link:hover,
.arxiv-menu[open] > summary {
  border-color: rgba(141,141,141,.65);
  color: #fff;
  background: rgba(83,83,83,.25);
  box-shadow: 0 0 22px rgba(141,141,141,.1);
}

/* Research pipeline monitor */
.index-page .workflow-visual {
  border-color: rgba(141,141,141,.25);
  border-radius: 8px;
  background:
    linear-gradient(rgba(141,141,141,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141,141,141,.035) 1px, transparent 1px),
    rgba(9,9,9,.78);
  background-size: 24px 24px;
  box-shadow:
    0 0 0 1px rgba(141,141,141,.045) inset,
    0 22px 65px rgba(0,0,0,.42),
    0 0 45px rgba(141,141,141,.07);
}
.index-page .visual-header,
.index-page .visual-footer {
  color: #868686;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.index-page .visual-live { color: var(--tech-cyan); }
.index-page .visual-live i {
  border-radius: 1px;
  background: var(--tech-cyan);
  box-shadow: 0 0 12px var(--tech-cyan);
}
.index-page .visual-grid { opacity: .16; }
.index-page .visual-grid span {
  border-color: rgba(141,141,141,.2);
  border-radius: 2px;
  background: rgba(141,141,141,.025);
}
.index-page .visual-pipeline::before {
  height: 1px;
  background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue), var(--tech-violet));
  box-shadow: 0 0 10px rgba(141,141,141,.3);
}
.index-page .visual-node {
  border-color: rgba(143,143,143,.2);
  border-radius: 5px;
  color: #a3a3a3;
  background: rgba(18,18,18,.94);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.index-page .visual-node small { color: #666666; }
.index-page .visual-node-active {
  border-color: var(--tech-cyan);
  color: #f6f6f6;
  background: linear-gradient(145deg, rgba(116,116,116,.46), rgba(61,61,61,.72));
  box-shadow:
    0 0 0 1px rgba(141,141,141,.16) inset,
    0 0 24px rgba(141,141,141,.14);
}
.index-page .visual-node-active small { color: #d4d4d4; }
.index-page .visual-chart span {
  border-radius: 2px 2px 0 0;
  filter: saturate(.9);
  box-shadow: 0 0 12px currentColor;
}
.index-page .visual-chart .bar-a { background: linear-gradient(#c3c3c3, #9f9f9f); }
.index-page .visual-chart .bar-b { background: linear-gradient(#e8e8e8, #cfcfcf); }
.index-page .visual-chart .bar-c { background: linear-gradient(#e8e8e8, #9f9f9f); }
.index-page .visual-chart .bar-d { background: linear-gradient(#e8e8e8, #c3c3c3); }
.index-page .visual-chart .bar-e { background: linear-gradient(#e8e8e8, #9f9f9f); }
.index-page .visual-footer {
  border-top-color: rgba(141,141,141,.16);
}
.index-page .visual-footer strong {
  color: var(--tech-cyan);
  text-shadow: 0 0 14px rgba(141,141,141,.32);
}

/* Dark research console form */
.index-page .form-section {
  border-color: var(--tech-line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(141,141,141,.025), transparent 38%),
    rgba(18,18,18,.93);
  box-shadow: 0 22px 60px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
}
.section-heading { border-bottom-color: var(--tech-line); }
.section-heading p {
  color: var(--tech-cyan);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.section-heading h2 { color: var(--tech-text); }
.section-heading > span { color: var(--tech-muted); }
.index-page label,
.index-page .field-label { color: #d9d9d9; }
.field-note { color: #7e7e7e; }
.feature-label { color: #7b7b7b !important; }
.index-page input,
.index-page textarea {
  border-color: rgba(151,151,151,.24);
  border-radius: 6px;
  color: var(--tech-text);
  background: rgba(10,10,10,.68);
  caret-color: var(--tech-cyan);
}
.index-page input::placeholder,
.index-page textarea::placeholder { color: #656565; }
.index-page input:focus,
.index-page textarea:focus {
  border-color: var(--tech-cyan);
  background: rgba(12,12,12,.9);
  box-shadow:
    0 0 0 3px rgba(141,141,141,.09),
    0 0 24px rgba(141,141,141,.05);
}
.index-page .feature-stage-tag {
  border-color: var(--tech-line);
  border-radius: 6px;
  color: #e3e3e3;
  background: rgba(25,25,25,.9) !important;
}
.index-page .feature-stage-tag b {
  border: 1px solid rgba(141,141,141,.24);
  border-radius: 3px;
  color: var(--tech-cyan);
  background: rgba(141,141,141,.08);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.index-page .feature-stage:nth-of-type(4) .feature-stage-tag b {
  border-color: rgba(141,141,141,.3);
  color: #b7b7b7;
  background: rgba(141,141,141,.1);
}
.index-page .feature-stage-tag small { color: #757575; }
.index-page .feature-tabs {
  border-color: var(--tech-line);
  border-radius: 6px;
  background: rgba(10,10,10,.66);
}
.index-page .feature-tab {
  border-radius: 3px;
  color: #898989;
}
.index-page .feature-tab:hover {
  color: #e9e9e9;
  background: rgba(141,141,141,.06);
}
.index-page .feature-tab.selected {
  color: #fcfcfc;
  background: linear-gradient(135deg, #2d2d2d, #474747);
  box-shadow:
    0 0 0 1px rgba(141,141,141,.28) inset,
    0 0 22px rgba(141,141,141,.08);
}
.index-page .feature-tab.selected::before {
  border-radius: 1px;
  background: var(--tech-cyan);
  box-shadow: 0 0 9px var(--tech-cyan);
  transform: rotate(45deg);
}
.index-page .feature-tab.disabled {
  color: #565656;
  background: rgba(255,255,255,.008);
}
.index-page .feature-stage:nth-of-type(3)::after {
  border-color: rgba(141,141,141,.32);
  border-radius: 2px;
  color: #a9a9a9;
  background: #1b1b1b;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
#query-label,
#novelty-label,
#pdf-label { border-top-color: var(--tech-line); }
.index-page input[type="file"] {
  border-color: rgba(141,141,141,.27);
  border-radius: 6px;
  color: #959595;
  background:
    linear-gradient(90deg, rgba(141,141,141,.035) 1px, transparent 1px),
    rgba(10,10,10,.62);
  background-size: 18px 100%;
}
.index-page input[type="file"]:hover {
  border-color: var(--tech-cyan);
  background-color: rgba(25,25,25,.82);
}
.index-page button[type="submit"] {
  border: 1px solid rgba(201,201,201,.5);
  border-radius: 5px;
  color: #0e0e0e;
  background: linear-gradient(100deg, #e8e8e8, #9f9f9f);
  box-shadow:
    0 12px 30px rgba(141,141,141,.2),
    0 0 0 1px rgba(255,255,255,.18) inset;
}
.index-page button[type="submit"]:hover {
  background: linear-gradient(100deg, #e8e8e8, #8d8d8d);
  box-shadow:
    0 16px 36px rgba(141,141,141,.27),
    0 0 28px rgba(141,141,141,.12);
}
.index-page .submit-hint { color: #7b7b7b; }
.index-page .submit-hint i {
  border-radius: 1px;
  background: var(--tech-cyan);
  box-shadow: 0 0 8px var(--tech-cyan);
}

/* Submitted state and footer */
.index-page section#result {
  border-color: rgba(141,141,141,.24);
  border-left-color: rgba(141,141,141,.24);
  border-radius: 8px;
  color: var(--tech-text);
  background:
    linear-gradient(90deg, rgba(141,141,141,.07), transparent 55%),
    rgba(19,19,19,.95);
  box-shadow: 0 18px 46px rgba(0,0,0,.27);
}
.index-page section#result h2 { color: #d1d1d1; }
.index-page section#result h2::before {
  border-radius: 2px;
  background-color: var(--tech-cyan);
}
.index-page .kv dt { color: #8c8c8c; }
.index-page .kv-value {
  border-color: var(--tech-line);
  color: #dcdcdc;
  background: rgba(9,9,9,.7);
}
.index-page .copy-btn {
  border-color: var(--tech-line);
  color: var(--tech-cyan);
  background: #181818;
}
.index-page .copy-btn:hover {
  border-color: var(--tech-cyan);
  color: #0e0e0e;
  background: var(--tech-cyan);
}
.site-footer {
  color: #646464;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.site-footer span { color: #a3a3a3; }

/* arXiv data menu */
.arxiv-menu-panel {
  border-color: rgba(141,141,141,.28);
  border-radius: 6px;
  color: var(--tech-text);
  background:
    linear-gradient(135deg, rgba(141,141,141,.045), transparent),
    rgba(14,14,14,.98);
  box-shadow:
    0 22px 50px rgba(0,0,0,.48),
    0 0 0 1px rgba(141,141,141,.04) inset;
}
.arxiv-menu-panel::before {
  border-color: rgba(141,141,141,.28);
  background: #131313;
}
.arxiv-menu-panel a {
  border-radius: 3px;
  color: #dbdbdb;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.arxiv-menu-panel a:hover {
  color: var(--tech-cyan);
  background: rgba(141,141,141,.08);
}
.arxiv-menu-panel a small { color: #7b7b7b; }

/* Result page: dark console chrome */
.result-page .result-banner {
  border-color: rgba(141,141,141,.2);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(141,141,141,.05) 1px, transparent 1px),
    radial-gradient(circle at 82% 10%, rgba(141,141,141,.18), transparent 30%),
    #131313;
  background-size: 38px 100%, auto, auto;
  box-shadow: 0 18px 48px rgba(0,0,0,.3);
}
.result-page .result-banner::before {
  opacity: .24;
  background-image: linear-gradient(90deg, transparent 49.7%, rgba(141,141,141,.22) 50%, transparent 50.3%);
}
.result-page .result-banner .brand { border-right-color: rgba(141,141,141,.18); }
.result-intro p {
  color: var(--tech-cyan);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.result-intro span { color: #929292; }

.result-page .meta-card {
  border-color: var(--tech-line);
  border-radius: 9px;
  color: var(--tech-text);
  background:
    linear-gradient(135deg, rgba(141,141,141,.025), transparent 32%),
    rgba(18,18,18,.95);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}
.result-page .meta-card::before {
  height: 2px;
  background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue), var(--tech-violet));
  box-shadow: 0 0 14px rgba(141,141,141,.2);
}
.result-page .kv dt {
  color: #828282;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.result-page .kv-value {
  border-color: rgba(143,143,143,.18);
  border-radius: 4px;
  color: #d7d7d7;
  background: rgba(9,9,9,.58);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.result-page .status-pill {
  border-radius: 3px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.result-page .status-pill.status-loading,
.result-page .status-pill.status-pending {
  border-color: rgba(202,202,202,.34);
  color: #d7d7d7;
  background: rgba(202,202,202,.09);
}
.result-page .status-pill.status-running {
  border-color: rgba(141,141,141,.36);
  color: var(--tech-cyan);
  background: rgba(141,141,141,.08);
}
.result-page .status-pill.status-done {
  border-color: rgba(164,164,164,.36);
  color: #c4c4c4;
  background: rgba(164,164,164,.08);
}
.result-page .status-pill.status-error {
  border-color: rgba(152,152,152,.36);
  color: #bbbbbb;
  background: rgba(152,152,152,.08);
}
.result-page .spinner { border-color: #3a3a3a; border-top-color: var(--tech-cyan); }
.result-page .job-timeline {
  border-color: var(--tech-line);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(141,141,141,.025) 1px, transparent 1px),
    rgba(9,9,9,.48);
  background-size: 32px 100%;
}
.result-page .job-timeline::before { background: #393939; }
.result-page .timeline-step { color: #747474; }
.result-page .timeline-dot {
  border-radius: 2px;
  border-color: #4c4c4c;
  background: #141414;
  transform: rotate(45deg);
}
.result-page .timeline-step.is-complete .timeline-dot,
.result-page .timeline-step.is-ready .timeline-dot {
  border-color: var(--tech-cyan-2);
  background: var(--tech-cyan-2);
  box-shadow: 0 0 0 4px rgba(141,141,141,.08), 0 0 12px rgba(141,141,141,.28);
}
.result-page .timeline-step.is-active .timeline-dot {
  border-color: var(--tech-cyan);
  box-shadow: 0 0 0 4px rgba(141,141,141,.08), 0 0 12px rgba(141,141,141,.25);
}
.result-page .timeline-step.is-complete,
.result-page .timeline-step.is-ready { color: #bababa; }
.result-page .timeline-step.is-active { color: var(--tech-cyan); }

/* Paper-first report surface */
.result-page .report-card {
  border-color: var(--tech-line);
  border-radius: 9px;
  background: #131313;
  box-shadow: 0 20px 52px rgba(0,0,0,.28);
}
.result-page .report-header {
  border-bottom-color: rgba(153,153,153,.18);
  background:
    linear-gradient(90deg, rgba(141,141,141,.045), transparent 38%),
    #171717;
}
.result-page .report-header h2 {
  color: #e9e9e9;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.result-page .report-header h2::before {
  border-radius: 2px;
  background-color: var(--tech-blue);
  box-shadow: 0 0 13px rgba(141,141,141,.28);
}
.result-page .copy-btn {
  border-color: rgba(151,151,151,.25);
  border-radius: 4px;
  color: #afafaf;
  background: #171717;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.result-page .copy-btn:hover {
  border-color: var(--tech-cyan);
  color: #0e0e0e;
  background: var(--tech-cyan);
}
.result-page .report-body,
.result-page #result-wrap article {
  color: #333333;
  background:
    linear-gradient(rgba(99,99,99,.035) 1px, transparent 1px),
    var(--tech-paper);
  background-size: 100% 32px;
}
.result-page .report-body h1,
.result-page .report-body h2,
.result-page .report-body h3,
.result-page .report-body h4,
.result-page .report-body h5,
.result-page .report-body h6 { color: #1f1f1f; }
.result-page .report-body h1,
.result-page .report-body h2 {
  border-bottom-color: #e1e1e1;
}
.result-page .report-body a { color: #5d5d5d; }
.result-page .report-body blockquote {
  border-left-color: #8d8d8d;
  color: #434343;
  background: #f3f3f3;
}
.result-page .report-body pre {
  border-color: #dbdbdb;
  color: #e9e9e9;
  background: #161616;
}
.result-page .report-body pre code { color: #e9e9e9; }
.result-page .report-body :not(pre) > code {
  border-color: #dcdcdc;
  color: #535353;
  background: #f1f1f1;
}
.result-page .report-body table { border-color: #dedede; }
.result-page .report-body table thead { background: #efefef; }
.result-page .report-body table th { color: #2e2e2e; }
.result-page .report-body table tr:nth-child(even) td { background: #f4f4f4; }
.result-page .media-frame {
  border-color: #d8d8d8;
  border-radius: 5px;
  background: #f2f2f2;
  box-shadow: 0 16px 36px rgba(33,33,33,.13);
}
.result-page .result-action {
  border-radius: 4px !important;
  color: #515151 !important;
}

/* Technical Q&A console */
.result-page .qa-card { background: #131313; }
.result-page .qa-body { background: #131313; }
.result-page .qa-turn { border-bottom-color: rgba(143,143,143,.17); }
.result-page .qa-msg-body { border-radius: 5px; }
.result-page .qa-q .qa-msg-body {
  border-color: rgba(141,141,141,.35);
  color: #dbdbdb;
  background: rgba(70,70,70,.34);
}
.result-page .qa-a .qa-msg-body {
  border-color: rgba(141,141,141,.2);
  color: #d9d9d9;
  background: rgba(29,29,29,.74);
}
.result-page .qa-a .report-body {
  color: #d9d9d9;
  background: rgba(29,29,29,.74);
}
.result-page .qa-a .report-body h1,
.result-page .qa-a .report-body h2,
.result-page .qa-a .report-body h3,
.result-page .qa-a .report-body h4 { color: #f3f3f3; }
.result-page .qa-a .report-body a { color: var(--tech-cyan); }
.result-page .qa-form {
  border-color: rgba(141,141,141,.18);
  border-radius: 6px;
  background: rgba(9,9,9,.7);
}
.result-page .qa-form textarea {
  color: #e5e5e5;
  background: transparent;
  caret-color: var(--tech-cyan);
}
.result-page .qa-form textarea::placeholder { color: #6b6b6b; }
.result-page #qa-submit {
  border: 1px solid rgba(141,141,141,.4);
  border-radius: 4px;
  color: #0e0e0e;
  background: var(--tech-cyan-2);
}
.result-page #qa-submit:hover { background: var(--tech-cyan); }
.result-page .qa-typing > span {
  border-radius: 1px;
  background: var(--tech-cyan);
}
.result-page .error {
  border-color: rgba(152,152,152,.32);
  border-radius: 5px;
  color: #cccccc;
  background: rgba(54,54,54,.34);
}

/* Tech focus and scrollbars */
body[data-ui="studio"] :focus-visible {
  outline-color: rgba(141,141,141,.7);
}
body[data-ui="studio"] ::selection {
  color: #0e0e0e;
  background: rgba(141,141,141,.82);
}
body[data-ui="studio"] * {
  scrollbar-color: #434343 #131313;
  scrollbar-width: thin;
}
body[data-ui="studio"] *::-webkit-scrollbar { width: 9px; height: 9px; }
body[data-ui="studio"] *::-webkit-scrollbar-track { background: #131313; }
body[data-ui="studio"] *::-webkit-scrollbar-thumb {
  border: 2px solid #131313;
  border-radius: 0;
  background: #434343;
}

/* Theme-specific responsive tuning */
@media (max-width: 900px) {
  .index-page .promo-banner { border-radius: 11px; }
  .index-page .workflow-visual { transform: none; }
}
@media (max-width: 700px) {
  .index-page .promo-banner,
  .index-page .form-section { border-radius: 8px; }
  .index-page .feature-stage-tag,
  .index-page .feature-tabs { border-radius: 5px; }
  .result-page .result-banner,
  .result-page .meta-card,
  .result-page .report-card { border-radius: 7px; }
}
/* Per-stage job timing */
.result-page .timeline-duration {
  min-height: 1.25em;
  color: #656565;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.25;
  white-space: nowrap;
}
.result-page .timeline-step.is-complete .timeline-duration {
  color: #898989;
}
.result-page .timeline-step.is-active .timeline-duration {
  color: var(--tech-cyan);
  text-shadow: 0 0 10px rgba(141,141,141,.18);
}
.result-page .timeline-step.is-ready .timeline-duration {
  color: #c4c4c4;
}
.result-page .timeline-step.is-error .timeline-duration {
  color: #bbbbbb;
}
@media (max-width: 460px) {
  .result-page .timeline-duration {
    font-size: .5rem;
    letter-spacing: -.01em;
  }
}

/* Expanded project footer */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand links" "notice notice" "meta meta";
  align-items: center;
  gap: 18px 28px;
  padding: 26px 4px 34px;
  border-top: 1px solid rgba(162,162,162,.14);
}
.footer-brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.footer-brand span {
  color: #c9c9c9;
  font-size: .78rem;
  font-weight: 800;
}
.footer-brand p { color: #737373; }
.footer-links {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}
.footer-links a {
  color: #909090;
  font-size: .66rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-links a:hover { color: var(--tech-cyan); }
.footer-notice {
  grid-area: notice;
  padding-top: 16px;
  border-top: 1px solid rgba(162,162,162,.1);
  color: #808080 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: .7rem !important;
  line-height: 1.55;
}
.footer-notice span {
  margin-right: 6px;
  color: var(--tech-cyan);
}
@media (max-width: 700px) {
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "links" "notice" "meta";
    align-items: flex-start;
  }
  .footer-links { justify-content: flex-start; }
}

.footer-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  color: #666666;
  font-size: .65rem;
}
.footer-meta a {
  color: #909090;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-meta a:hover { color: var(--tech-cyan); }
.footer-support { text-align: center; }
@media (max-width: 700px) {
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Align hero workflow with the three product stages. */
.index-page .visual-pipeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Per-report Q&A quota */
.qa-quota {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(141,141,141,.22);
  border-radius: 3px;
  color: #9f9f9f;
  background: rgba(141,141,141,.05);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .58rem;
  font-weight: 700;
  white-space: nowrap;
}
.qa-form:has(textarea:disabled) { opacity: .62; }
.qa-form textarea:disabled { cursor: not-allowed; }

/* Result feedback and mobile sharing */
.report-header-actions {
  position: relative;
  flex: none;
}
.report-body-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-right: -14px;
  margin-bottom: 18px;
}
.report-content > *:first-child { margin-top: 0; }
.report-content > *:last-child { margin-bottom: 0; }
.engagement-count {
  min-width: 1ch;
  color: #878787;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .61rem;
}
.engagement-actions { display: flex; gap: 7px; }
.engagement-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(151,151,151,.24);
  border-radius: 4px;
  color: #aeaeae;
  background: #171717;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.engagement-btn:hover {
  border-color: var(--tech-cyan);
  color: #f6f6f6;
  transform: translateY(-1px);
}
.engagement-btn.is-active {
  border-color: rgba(141,141,141,.48);
  color: var(--tech-cyan);
  background: rgba(141,141,141,.1);
}
.engagement-share {
  border-color: rgba(141,141,141,.42);
  color: #d0d0d0;
  background: rgba(141,141,141,.12);
}
.engagement-icon { font-size: .9rem; line-height: 1; }
svg.engagement-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: filter .15s, stroke-width .15s;
}
.engagement-icon-down { transform: rotate(180deg); }
.engagement-btn.is-active .engagement-icon {
  stroke-width: 2.15;
  filter: drop-shadow(0 0 4px rgba(141,141,141,.5));
}
.engagement-toast {
  position: absolute;
  right: 12px;
  z-index: 5;
  top: calc(100% + 8px);
  bottom: auto;
  padding: 7px 10px;
  border: 1px solid rgba(141,141,141,.2);
  border-radius: 4px;
  color: #cdcdcd;
  background: #131313;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  font-size: .62rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .15s, transform .15s;
}
.engagement-toast.is-visible { opacity: 1; transform: translateY(0); }
.wechat-share-guide {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: 76px 18px 18px;
  background: rgba(6,6,6,.8);
  backdrop-filter: blur(8px);
}
.wechat-share-guide[hidden] { display: none; }
.wechat-guide-card {
  position: relative;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid rgba(141,141,141,.3);
  border-radius: 8px;
  color: #e9e9e9;
  background: #161616;
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
.wechat-guide-card > p {
  margin: 0 0 8px;
  color: var(--tech-cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.wechat-guide-card h2 { margin: 0 0 12px; font-size: 1.25rem; }
.wechat-guide-card > span:not(.wechat-guide-arrow) {
  display: block;
  color: #a4a4a4;
  font-size: .84rem;
  line-height: 1.65;
}
.wechat-guide-arrow {
  position: absolute;
  top: -54px;
  right: 8px;
  color: var(--tech-cyan);
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(141,141,141,.35);
}
#wechat-guide-close {
  width: 100%;
  margin-top: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(141,141,141,.4);
  border-radius: 4px;
  color: #0e0e0e;
  background: var(--tech-cyan);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 600px) {
  .engagement-actions { width: 100%; }
  .engagement-btn { flex: 1; min-height: 40px; }
  .engagement-toast { right: 8px; }
}

@media (max-width: 600px) {
  .result-page #result-wrap .report-header { align-items: stretch; flex-direction: column; }
  .result-page #result-wrap .report-header-actions { width: 100%; }
}

/* Live GitHub stars beside the homepage title */
.github-stars-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 3px;
  padding: 4px 7px;
  border: 1px solid rgba(141,141,141,.25);
  border-radius: 4px;
  color: #cacaca;
  background: rgba(18,18,18,.72);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .62rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.github-stars-badge[hidden] { display: none; }
.github-stars-badge .gh-mark {
  width: 14px;
  height: 14px;
  color: currentColor;
  flex: none;
}
.github-stars-badge .gh-star {
  width: 13px;
  height: 13px;
  flex: none;
  fill: #ffd60a;
  stroke: #ff9f0a;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255,214,10,.7));
}
.github-stars-badge strong { display: inline-block; color: #f0f0f0; font-weight: 750; }
.github-stars-label { color: #bababa; font-weight: 700; }
.github-stars-badge strong.is-updated { animation: github-star-update .5s ease-out; }
@keyframes github-star-update {
  0% { color: #fff; text-shadow: 0 0 10px rgba(141,141,141,.35); transform: translateY(-1px); }
  100% { color: #f0f0f0; text-shadow: none; transform: translateY(0); }
}
.github-stars-badge:hover {
  border-color: var(--tech-cyan);
  color: #fff;
  background: rgba(141,141,141,.1);
  transform: translateY(-1px);
}
@media (max-width: 460px) {
  .github-stars-badge { margin-left: 0; padding: 4px 6px; }
}

/* Clearly labeled simulated activity indicator */
.github-stars-badge,
.mock-active-users {
  box-sizing: border-box;
  height: 23px;
}
.mock-active-users[hidden] { display: none !important; }
.mock-active-users {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(141,141,141,.18);
  border-radius: 4px;
  color: #a3a3a3;
  background: rgba(18,18,18,.58);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .55rem;
  line-height: 1;
  white-space: nowrap;
}
.mock-active-users i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #afafaf;
  box-shadow: 0 0 7px rgba(175,175,175,.75);
}
.mock-active-users strong { color: #ededed; font-size: .62rem; }

@media (max-width: 460px) {
  .index-page .brand-logo { width: 31px; height: 31px; }
  .index-page .promo-banner .brand h1 { font-size: 1.08rem; }
}

/* Keep brand identity and status signals grouped on small screens. */
.index-page .brand-identity,
.index-page .brand-signals {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
@media (max-width: 460px) {
  .index-page .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Report header: engagement actions stay separate from content actions. */
.result-page #result-wrap .report-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
.result-page #result-wrap .report-header-actions { justify-self: end; }
@media (max-width: 600px) {
  .result-page #result-wrap .report-header {
    grid-template-columns: 1fr;
  }
  .result-page #result-wrap .report-header-actions {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin-top: 4px;
  }
}

/* ResearchStudio-Reel author affiliations */
.collaborator-strip {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--tech-line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(141,141,141,.035), transparent 42%), #141414;
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.collaborator-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}
.collaborator-heading h2 {
  margin: 0;
  color: #eeeeee;
  font-size: 1rem;
  letter-spacing: -.02em;
}
.collaborator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.collaborator-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 122px;
  padding: 10px 11px;
  border: 1px solid rgba(151,151,151,.15);
  border-radius: 4px;
  color: #c6c6c6;
  background: rgba(24,24,24,.72);
}
.institution-logo {
  box-sizing: border-box;
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  max-width: 100%;
  height: 64px;
  padding: 6px;
  border: 1px solid rgba(151,151,151,.2);
  border-radius: 5px;
  color: #6c6c6c;
  background: #fff;
  overflow: hidden;
}
.institution-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.institution-logo.institution-monogram {
  color: var(--tech-cyan);
  background: rgba(141,141,141,.07);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.collaborator-grid li strong {
  text-align: center;
  font-size: .69rem;
  font-weight: 650;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .collaborator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .collaborator-strip { padding: 17px; }
  .collaborator-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .collaborator-grid { grid-template-columns: 1fr; }
}

/* Mobile workflow stage disclosure */
.index-page button.feature-stage-tag {
  width: 100%;
  border-style: solid;
  font: inherit;
  cursor: default;
}
.index-page button.feature-stage-tag::after {
  content: "";
  display: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
@media (max-width: 700px) {
  .index-page button.feature-stage-tag { cursor: pointer; }
  .index-page button.feature-stage-tag::after { display: block; }
  .index-page .feature-stage.is-collapsed-mobile button.feature-stage-tag::after { transform: rotate(-45deg); }
  .index-page .feature-stage.is-collapsed-mobile .feature-tabs { display: none; }
}

/* Keep the eight institution marks on one continuous row. */
.collaborator-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 1fr);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(141,141,141,.24) transparent;
}

@media (max-width: 700px) {
  .collaborator-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 6px;
    overflow-x: visible;
  }
  .collaborator-grid li {
    min-height: 96px;
    gap: 6px;
    padding: 7px 3px;
  }
  .institution-logo {
    width: 52px;
    height: 52px;
    padding: 5px;
  }
  .collaborator-grid li strong { font-size: .6rem; }
}


.language-menu {
  position: relative;
  flex: none;
  margin: 0;
}
.language-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.language-menu > summary::-webkit-details-marker { display: none; }
.language-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.language-menu-chevron {
  display: inline-block;
  transition: transform .18s ease;
}
.language-menu[open] .language-menu-chevron { transform: rotate(180deg); }
.language-menu-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  right: 0;
  min-width: 132px;
  padding: 6px;
  border: 1px solid rgba(141,141,141,.28);
  border-radius: 6px;
  background: rgba(14,14,14,.98);
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
}
.language-menu-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 3px;
  color: #cacaca;
  background: transparent;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .7rem;
  text-align: left;
  cursor: pointer;
}
.language-menu-panel button:hover,
.language-menu-panel button.is-active {
  color: var(--tech-cyan);
  background: rgba(141,141,141,.09);
}
.language-menu-panel button.is-active::after { content: "✓"; }
.index-page .brand-signals > .language-menu-compact {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 23px;
  line-height: 1;
  vertical-align: top;
}

.language-menu-compact > summary {
  width: 100%;
  line-height: 1;
  box-sizing: border-box;
  height: 23px;
  padding: 0 8px;
  border: 1px solid rgba(141,141,141,.22);
  border-radius: 4px;
  color: #cacaca;
  background: rgba(18,18,18,.65);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .58rem;
  font-weight: 750;
}
.language-menu-compact[open] > summary,
.language-menu-compact > summary:hover {
  border-color: var(--tech-cyan);
  color: #fff;
  background: rgba(141,141,141,.1);
}
.result-page .language-menu[open] > summary {
  border-color: rgba(141,141,141,.65);
  color: #fff;
  background: rgba(83,83,83,.25);
}

/* Preserve component geometry when switching between English and Chinese. */
.index-page .brand-signals > .github-stars-badge {
  width: 116px;
  justify-content: center;
}
.index-page .brand-signals > .mock-active-users {
  width: 75px;
  justify-content: center;
}
.index-page .brand-signals > .language-menu-compact { width: 78px; }
.index-page .promo-sub { min-height: 3.36em; }
.index-page .feature-stage-tag > span,
.index-page .feature-tab,
.index-page .banner-links .gh-link,
.index-page .arxiv-menu > summary { line-height: 1.3; }
.index-page .promo-banner .banner-links > .gh-link,
.index-page .promo-banner .arxiv-menu > summary {
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
  white-space: nowrap;
}
.index-page .promo-banner .banner-links > .arxiv-menu { height: 30px; }

@media (min-width: 461px) {
  .index-page .promo-banner .banner-links > .gh-link,
  .index-page .promo-banner .banner-links > .arxiv-menu {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
  }
  .index-page .promo-banner .arxiv-menu > summary {
    box-sizing: border-box;
    width: 100%;
  }
}
.result-page .result-banner .banner-links > .gh-link,
.result-page .result-banner .banner-links > .language-menu {
  box-sizing: border-box;
  width: 104px;
}
.result-page .result-banner .language-menu-trigger {
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 700px) {
  .index-page .promo-sub { min-height: 5.04em; }
  .result-page .result-intro span {
    display: block;
    min-height: 2.8em;
  }
}
@media (max-width: 460px) {
  .index-page .brand-signals > .github-stars-badge { width: 112px; }
  .index-page .promo-banner .banner-links > .gh-link,
  .index-page .promo-banner .banner-links > .arxiv-menu { width: 100%; }
  .result-page .result-banner .banner-links > .gh-link,
  .result-page .result-banner .banner-links > .language-menu {
    flex: 1 1 0;
    width: auto;
  }
}

/* Global language control shared by the homepage and result page. */
.global-language-menu {
  position: fixed;
  z-index: 200;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: inline-flex;
  width: 88px;
  height: 34px;
  line-height: 1;
}
.global-language-menu > summary {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
}
body[data-ui="studio"] .container { padding-top: 62px; }
@media (max-width: 700px) {
  .global-language-menu {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
  body[data-ui="studio"] .container { padding-top: 56px; }
}

/* Larger, still-aligned live status typography. */
.index-page .github-stars-badge,
.index-page .mock-active-users { height: 26px; }
.index-page .github-stars-badge {
  width: 124px;
  font-size: .68rem;
}
.index-page .github-stars-badge strong { font-size: .72rem; }
.index-page .mock-active-users {
  width: 82px;
  font-size: .62rem;
}
.index-page .mock-active-users strong { font-size: .7rem; }

/* Keep translated report actions identical in size. */
.result-page #copy-report {
  box-sizing: border-box;
  width: 92px;
  height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}
.result-page #share-report {
  box-sizing: border-box;
  flex: 0 0 92px;
  width: 92px;
  height: 36px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .result-page #share-report {
    flex: 1 1 0;
    width: auto;
    height: 40px;
  }
}

/* Frameless global language trigger. */
.global-language-menu > summary,
.global-language-menu[open] > summary,
.global-language-menu > summary:hover {
  border: 0;
  color: #b2b2b2;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.global-language-menu > summary:hover,
.global-language-menu[open] > summary { color: var(--tech-cyan); }

/* Stable box geometry across English and Chinese labels. */
.index-page #result .copy-btn {
  box-sizing: border-box;
  width: 72px;
  height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}
.index-page .feature-tab {
  box-sizing: border-box;
  height: 43px;
  min-height: 43px;
  white-space: nowrap;
}
.arxiv-menu-panel a {
  box-sizing: border-box;
  min-height: 44px;
}
.result-page .qa-actions { width: 92px; }
.result-page #qa-submit {
  box-sizing: border-box;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}
@media (max-width: 600px) {
  .result-page .qa-actions { width: 100%; }
  .result-page #qa-submit { min-height: 42px; }
}

/* Daily usage and repository recommendation dialog. */
.usage-prompt {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7,7,7,.76);
  backdrop-filter: blur(8px);
}
.usage-prompt[hidden] { display: none; }
body.has-usage-prompt { overflow: hidden; }
.usage-prompt-card {
  position: relative;
  box-sizing: border-box;
  width: min(460px, 100%);
  padding: 30px;
  border: 1px solid rgba(141,141,141,.3);
  border-radius: 8px;
  color: #e6e6e6;
  background:
    linear-gradient(135deg, rgba(141,141,141,.055), transparent 42%),
    #141414;
  box-shadow: 0 28px 80px rgba(0,0,0,.58);
}
.usage-prompt-x {
  position: absolute;
  top: 10px;
  right: 11px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: #8c8c8c;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
}
.usage-prompt-x:hover { color: var(--tech-cyan); }
.usage-prompt-kicker {
  margin: 0 0 12px;
  color: var(--tech-cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.usage-prompt-card h2 {
  margin: 0 36px 12px 0;
  color: #f5f5f5;
  font-size: 1.38rem;
  line-height: 1.25;
}
.usage-prompt-message {
  min-height: 3.3em;
  margin: 0;
  color: #aeaeae;
  font-size: .86rem;
  line-height: 1.65;
}
.usage-prompt-meta {
  margin: 14px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(151,151,151,.18);
  border-radius: 4px;
  color: #959595;
  background: rgba(11,11,11,.5);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .66rem;
}
.usage-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
}
.usage-prompt-actions a,
.usage-prompt-actions button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.usage-prompt-actions a {
  border: 1px solid rgba(141,141,141,.5);
  color: #0e0e0e;
  background: var(--tech-cyan);
}
.usage-prompt-actions button {
  border: 1px solid rgba(151,151,151,.28);
  color: #bababa;
  background: rgba(21,21,21,.8);
}
.usage-prompt-actions a:hover { background: #d5d5d5; }
.usage-prompt-actions button:hover {
  border-color: rgba(141,141,141,.5);
  color: #f6f6f6;
}
@media (max-width: 520px) {
  .usage-prompt-card { padding: 26px 20px 20px; }
  .usage-prompt-actions { flex-direction: column; }
  .usage-prompt-actions a,
  .usage-prompt-actions button { width: 100%; }
}

/* Match the initial Research Problem and Paper PDF control heights. */
.index-page .research-input-area {
  display: flow-root;
  margin: 0;
}
.index-page .research-input-area > label {
  box-sizing: border-box;
  margin-bottom: 0;
  padding-bottom: 26px;
}
.index-page #query-input,
.index-page #pdf-input {
  box-sizing: border-box;
  height: 76px;
  min-height: 76px;
}
.index-page #query-input { line-height: 1.4; }
.index-page #query-label,
.index-page #pdf-label { margin-bottom: 0; }
.index-page #query-input,
.index-page #pdf-input { margin-bottom: 0; }
.index-page #submit-btn { margin-top: 0; }
.index-page #pdf-input {
  padding: 15px 12px;
  line-height: 44px;
  text-align: left;
}
.index-page #pdf-input::-webkit-file-upload-button,
.index-page #pdf-input::file-selector-button {
  height: 44px;
  margin: 0 12px 0 0;
  padding: 0 14px;
  border: 1px solid rgba(141,141,141,.28);
  border-radius: 4px;
  color: #d0d0d0;
  background: rgba(28,28,28,.9);
  font: inherit;
  cursor: pointer;
}
.index-page #pdf-input::-webkit-file-upload-button:hover,
.index-page #pdf-input::file-selector-button:hover {
  border-color: var(--tech-cyan);
  color: var(--tech-cyan);
}

/* Shared top-right theme and language preferences. */
.global-preferences {
  position: fixed;
  z-index: 200;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
}
.global-preferences .global-theme-menu,
.global-preferences .global-language-menu {
  position: relative;
  top: auto;
  right: auto;
  display: inline-flex;
  height: 34px;
  line-height: 1;
}
.global-preferences .global-theme-menu { width: 78px; }
.global-preferences .global-language-menu { width: 88px; }
.global-preferences .global-theme-menu > summary,
.global-preferences .global-language-menu > summary,
.global-preferences .global-theme-menu[open] > summary,
.global-preferences .global-language-menu[open] > summary,
.global-preferences .global-theme-menu > summary:hover,
.global-preferences .global-language-menu > summary:hover {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  color: #b2b2b2;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.global-preferences .global-theme-menu > summary:hover,
.global-preferences .global-language-menu > summary:hover,
.global-preferences .global-theme-menu[open] > summary,
.global-preferences .global-language-menu[open] > summary { color: var(--tech-cyan); }
@media (max-width: 700px) {
  .global-preferences {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    gap: 8px;
  }
}

/* Light theme: palette-only overrides. Geometry remains shared with Dark. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --tech-bg: #f4f6fa;
  --tech-bg-2: #ffffff;
  --tech-panel: #ffffff;
  --tech-panel-2: #eef1f6;
  --tech-line: rgba(17,22,33,.11);
  --tech-line-strong: rgba(43,80,240,.5);
  --tech-cyan: #2b50f0;
  --tech-cyan-2: #1e3fd0;
  --tech-blue: #565c68;
  --tech-violet: #565c68;
  --tech-text: #0b0d12;
  --tech-muted: #565c68;
  --tech-paper: #ffffff;
  --ink: #0b0d12;
  --ink-2: #2b2f38;
  --paper: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #eef1f6;
  --line: rgba(17,22,33,.11);
  --muted: #565c68;
  --blue: #2b50f0;
  --blue-dark: #1e3fd0;
  --mint: #cfd9ff;
  --mint-strong: #2b50f0;
  --shadow-sm: 0 12px 30px rgba(17,22,33,.10);
  --shadow-lg: 0 26px 72px rgba(17,22,33,.14);
}
html[data-theme="light"] body[data-ui="studio"] {
  color: var(--tech-text);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
}
html[data-theme="light"] body[data-ui="studio"]::before { background-image: none; opacity: 0; }
html[data-theme="light"] .global-preferences summary { color: #676767; }
html[data-theme="light"] .global-preferences summary:hover,
html[data-theme="light"] .global-preferences details[open] > summary { color: var(--tech-cyan); }
html[data-theme="light"] .language-menu-panel {
  border-color: rgba(74,74,74,.2);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(61,61,61,.18);
}
html[data-theme="light"] .language-menu-panel button { color: #545454; }
html[data-theme="light"] .language-menu-panel button:hover,
html[data-theme="light"] .language-menu-panel button.is-active {
  color: var(--tech-cyan);
  background: rgba(112,112,112,.09);
}
html[data-theme="light"] .index-page .promo-banner {
  border-color: rgba(74,74,74,.18);
  color: #252525;
  background:
    linear-gradient(90deg, rgba(93,93,93,.055) 1px, transparent 1px),
    linear-gradient(rgba(93,93,93,.055) 1px, transparent 1px),
    radial-gradient(circle at 76% 32%, rgba(112,112,112,.13), transparent 25%),
    linear-gradient(135deg, #fbfbfb 0%, #f4f4f4 56%, #ededed 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 28px 72px rgba(61,61,61,.15);
}
html[data-theme="light"] .index-page .promo-banner::before {
  background-image: none;
}
html[data-theme="light"] .index-page .promo-banner::after {
  border: none;
  background: radial-gradient(circle, rgba(29,29,29,.06), transparent 62%);
  box-shadow: none;
}
html[data-theme="light"] .promo-kicker { color: #737373; }
html[data-theme="light"] .index-page .promo-banner .brand h1,
html[data-theme="light"] .index-page .promo-banner h2 { color: #242424; }
html[data-theme="light"] .index-page .promo-banner h2 em {
  color: var(--tech-cyan);
  text-shadow: 0 0 24px rgba(93,93,93,.13);
}
html[data-theme="light"] .index-page .promo-sub { color: #666666; }
html[data-theme="light"] .gh-link {
  border-color: rgba(74,74,74,.22);
  color: #404040;
  background: rgba(255,255,255,.72);
}
html[data-theme="light"] .gh-link:hover,
html[data-theme="light"] .arxiv-menu[open] > summary {
  border-color: rgba(93,93,93,.55);
  color: #464646;
  background: rgba(112,112,112,.1);
  box-shadow: 0 0 20px rgba(93,93,93,.08);
}
html[data-theme="light"] .github-stars-badge,
html[data-theme="light"] .mock-active-users {
  border-color: rgba(74,74,74,.2);
  color: #606060;
  background: rgba(255,255,255,.74);
}
html[data-theme="light"] .github-stars-badge strong { color: #373737; }
html[data-theme="light"] .github-stars-label { color: #666666; }
html[data-theme="light"] .mock-active-users strong { color: #4d4d4d; }
html[data-theme="light"] .index-page .workflow-visual {
  border-color: rgba(93,93,93,.2);
  background:
    linear-gradient(rgba(93,93,93,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,93,93,.035) 1px, transparent 1px),
    rgba(255,255,255,.74);
  box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset, 0 22px 56px rgba(61,61,61,.14);
}
html[data-theme="light"] .index-page .visual-header,
html[data-theme="light"] .index-page .visual-footer { color: #737373; }
html[data-theme="light"] .index-page .visual-grid span {
  border-color: rgba(93,93,93,.17);
  background: rgba(93,93,93,.025);
}
html[data-theme="light"] .index-page .visual-node {
  border-color: rgba(74,74,74,.18);
  color: #686868;
  background: rgba(248,248,248,.96);
}
html[data-theme="light"] .index-page .visual-node small { color: #828282; }
html[data-theme="light"] .index-page .visual-node-active {
  border-color: #1d1d1d;
  color: #3b3b3b;
  background: linear-gradient(145deg, rgba(176,176,176,.42), rgba(168,168,168,.42));
  box-shadow: 0 0 0 1px rgba(93,93,93,.12) inset, 0 10px 24px rgba(61,61,61,.1);
}
html[data-theme="light"] .index-page .visual-node-active small { color: #545454; }

html[data-theme="light"] .index-page .form-section {
  border-color: rgba(74,74,74,.18);
  background: linear-gradient(135deg, rgba(112,112,112,.025), transparent 38%), rgba(255,255,255,.94);
  box-shadow: 0 20px 52px rgba(61,61,61,.12);
}
html[data-theme="light"] .section-heading { border-bottom-color: rgba(74,74,74,.16); }
html[data-theme="light"] .section-heading h2 { color: #252525; }
html[data-theme="light"] .section-heading > span { color: #727272; }
html[data-theme="light"] .index-page label,
html[data-theme="light"] .index-page .field-label { color: #424242; }
html[data-theme="light"] .field-note,
html[data-theme="light"] .feature-label { color: #828282 !important; }
html[data-theme="light"] .index-page input,
html[data-theme="light"] .index-page textarea {
  border-color: rgba(74,74,74,.22);
  color: #252525;
  background: rgba(250,250,250,.96);
  caret-color: var(--tech-cyan);
}
html[data-theme="light"] .index-page input::placeholder,
html[data-theme="light"] .index-page textarea::placeholder { color: #959595; }
html[data-theme="light"] .index-page input:focus,
html[data-theme="light"] .index-page textarea:focus {
  border-color: var(--tech-cyan);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(93,93,93,.1), 0 0 20px rgba(93,93,93,.06);
}
html[data-theme="light"] .index-page .feature-stage-tag {
  border-color: rgba(74,74,74,.17);
  color: #3c3c3c;
  background: rgba(248,248,248,.96) !important;
}
html[data-theme="light"] .index-page .feature-stage-tag b {
  border-color: rgba(93,93,93,.25);
  color: #1d1d1d;
  background: rgba(112,112,112,.09);
}
html[data-theme="light"] .index-page .feature-stage:nth-of-type(4) .feature-stage-tag b {
  border-color: rgba(106,106,106,.25);
  color: #585858;
  background: rgba(106,106,106,.08);
}
html[data-theme="light"] .index-page .feature-stage-tag small { color: #848484; }
html[data-theme="light"] .index-page .feature-tabs {
  border-color: rgba(74,74,74,.17);
  background: rgba(243,243,243,.9);
}
html[data-theme="light"] .index-page .feature-tab { color: #737373; }
html[data-theme="light"] .index-page .feature-tab:hover {
  color: #3a3a3a;
  background: rgba(255,255,255,.82);
}
html[data-theme="light"] .index-page .feature-tab.selected {
  color: #333333;
  background: linear-gradient(135deg, rgba(198,198,198,.72), rgba(190,190,190,.72));
  box-shadow: 0 0 0 1px rgba(93,93,93,.2) inset, 0 8px 20px rgba(61,61,61,.08);
}
html[data-theme="light"] .index-page .feature-tab.disabled {
  color: #a5a5a5;
  background: rgba(74,74,74,.018);
}
html[data-theme="light"] .index-page .feature-stage:nth-of-type(3)::after {
  border-color: rgba(106,106,106,.26);
  color: #606060;
  background: #efefef;
}
html[data-theme="light"] #query-label,
html[data-theme="light"] #novelty-label,
html[data-theme="light"] #pdf-label { border-top-color: rgba(74,74,74,.16); }
html[data-theme="light"] .index-page input[type="file"] {
  border-color: rgba(93,93,93,.3);
  color: #666666;
  background: linear-gradient(90deg, rgba(93,93,93,.035) 1px, transparent 1px), rgba(249,249,249,.96);
}
html[data-theme="light"] .index-page input[type="file"]:hover {
  border-color: var(--tech-cyan);
  background-color: #f5f5f5;
}
html[data-theme="light"] .index-page #pdf-input::file-selector-button,
html[data-theme="light"] .index-page #pdf-input::-webkit-file-upload-button {
  border-color: rgba(93,93,93,.28);
  color: #494949;
  background: #f1f1f1;
}
html[data-theme="light"] .index-page button[type="submit"] {
  border-color: rgba(29,29,29,.42);
  color: #fff;
  background: linear-gradient(100deg, #1d1d1d, #343434);
  box-shadow: 0 12px 28px rgba(74,74,74,.18);
}
html[data-theme="light"] .index-page button[type="submit"]:hover {
  background: linear-gradient(100deg, #1d1d1d, #1d1d1d);
  box-shadow: 0 15px 32px rgba(74,74,74,.23);
}
html[data-theme="light"] .index-page .submit-hint { color: #7f7f7f; }
html[data-theme="light"] .index-page section#result {
  border-color: rgba(93,93,93,.23);
  color: #252525;
  background: linear-gradient(90deg, rgba(112,112,112,.07), transparent 55%), rgba(255,255,255,.96);
  box-shadow: 0 16px 40px rgba(61,61,61,.11);
}
html[data-theme="light"] .index-page section#result h2 { color: #1d1d1d; }
html[data-theme="light"] .index-page .kv dt { color: #767676; }
html[data-theme="light"] .index-page .kv-value {
  border-color: rgba(74,74,74,.17);
  color: #3c3c3c;
  background: #f9f9f9;
}
html[data-theme="light"] .index-page .copy-btn {
  border-color: rgba(74,74,74,.2);
  color: #1d1d1d;
  background: #fff;
}
html[data-theme="light"] .arxiv-menu-panel {
  border-color: rgba(74,74,74,.2);
  color: #252525;
  background: linear-gradient(135deg, rgba(112,112,112,.035), transparent), rgba(255,255,255,.99);
  box-shadow: 0 20px 44px rgba(61,61,61,.18);
}
html[data-theme="light"] .arxiv-menu-panel::before {
  border-color: rgba(74,74,74,.2);
  background: #fff;
}
html[data-theme="light"] .arxiv-menu-panel a { color: #424242; }
html[data-theme="light"] .arxiv-menu-panel a:hover {
  color: var(--tech-cyan);
  background: rgba(112,112,112,.08);
}
html[data-theme="light"] .arxiv-menu-panel a small { color: #858585; }
html[data-theme="light"] .collaborator-strip {
  border-color: rgba(74,74,74,.16);
  background: linear-gradient(135deg, rgba(112,112,112,.035), transparent 42%), #fbfbfb;
  box-shadow: 0 14px 36px rgba(61,61,61,.09);
}
html[data-theme="light"] .collaborator-heading h2 { color: #333333; }
html[data-theme="light"] .collaborator-grid li {
  border-color: rgba(74,74,74,.14);
  color: #585858;
  background: rgba(255,255,255,.82);
}
html[data-theme="light"] .site-footer {
  border-top-color: rgba(74,74,74,.14);
  color: #757575;
}
html[data-theme="light"] .footer-brand span { color: #454545; }
html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-notice,
html[data-theme="light"] .footer-meta { color: #7a7a7a !important; }
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-meta a { color: #6a6a6a; }

html[data-theme="light"] .result-page .result-banner {
  border-color: rgba(74,74,74,.2);
  color: #252525;
  background:
    linear-gradient(90deg, rgba(93,93,93,.045) 1px, transparent 1px),
    radial-gradient(circle at 82% 10%, rgba(93,93,93,.11), transparent 30%),
    #f9f9f9;
  box-shadow: 0 16px 42px rgba(61,61,61,.12);
}
html[data-theme="light"] .result-page .result-banner::before {
  background-image: linear-gradient(90deg, transparent 49.7%, rgba(93,93,93,.16) 50%, transparent 50.3%);
}
html[data-theme="light"] .result-page .result-banner .brand { border-right-color: rgba(74,74,74,.17); }
html[data-theme="light"] .result-page .result-banner .brand h1,
html[data-theme="light"] .result-intro h2 { color: #252525; }
html[data-theme="light"] .result-intro span { color: #767676; }
html[data-theme="light"] .result-page .meta-card {
  border-color: rgba(74,74,74,.17);
  color: #252525;
  background: linear-gradient(135deg, rgba(112,112,112,.025), transparent 32%), rgba(255,255,255,.96);
  box-shadow: 0 16px 40px rgba(61,61,61,.1);
}
html[data-theme="light"] .result-page .kv dt { color: #787878; }
html[data-theme="light"] .result-page .kv-value {
  border-color: rgba(74,74,74,.16);
  color: #3e3e3e;
  background: #f8f8f8;
}
html[data-theme="light"] .result-page .spinner { border-color: #d4d4d4; border-top-color: var(--tech-cyan); }
html[data-theme="light"] .result-page .job-timeline {
  border-color: rgba(74,74,74,.16);
  background: linear-gradient(90deg, rgba(93,93,93,.025) 1px, transparent 1px), #f8f8f8;
}
html[data-theme="light"] .result-page .job-timeline::before { background: #d5d5d5; }
html[data-theme="light"] .result-page .timeline-step { color: #828282; }
html[data-theme="light"] .result-page .timeline-dot {
  border-color: #9d9d9d;
  background: #fff;
}
html[data-theme="light"] .result-page .timeline-step.is-complete,
html[data-theme="light"] .result-page .timeline-step.is-ready { color: #1d1d1d; }
html[data-theme="light"] .result-page .timeline-duration { color: #747474; }
html[data-theme="light"] .result-page .timeline-step.is-complete .timeline-duration { color: #626262; }
html[data-theme="light"] .result-page .report-card {
  border-color: rgba(74,74,74,.17);
  background: #fff;
  box-shadow: 0 18px 46px rgba(61,61,61,.11);
}
html[data-theme="light"] .result-page .report-header {
  border-bottom-color: rgba(74,74,74,.16);
  background: linear-gradient(90deg, rgba(112,112,112,.045), transparent 38%), #f7f7f7;
}
html[data-theme="light"] .result-page .report-header h2 { color: #333333; }
html[data-theme="light"] .result-page .copy-btn {
  border-color: rgba(74,74,74,.2);
  color: #686868;
  background: #fff;
}
html[data-theme="light"] .result-page .copy-btn:hover {
  border-color: var(--tech-cyan);
  color: #fff;
  background: var(--tech-cyan);
}
html[data-theme="light"] .result-page .report-body,
html[data-theme="light"] .result-page #result-wrap article {
  color: #333333;
  background: linear-gradient(rgba(99,99,99,.035) 1px, transparent 1px), #fff;
}
html[data-theme="light"] .result-page .qa-card { background: #fff; }
html[data-theme="light"] .result-page .qa-body { background: #fafafa; }
html[data-theme="light"] .result-page .qa-turn { border-bottom-color: rgba(74,74,74,.14); }
html[data-theme="light"] .result-page .qa-q .qa-msg-body {
  border-color: rgba(93,93,93,.24);
  color: #474747;
  background: rgba(231,231,231,.72);
}
html[data-theme="light"] .result-page .qa-a .qa-msg-body,
html[data-theme="light"] .result-page .qa-a .report-body {
  border-color: rgba(93,93,93,.18);
  color: #414141;
  background: rgba(241,241,241,.82);
}
html[data-theme="light"] .result-page .qa-a .report-body h1,
html[data-theme="light"] .result-page .qa-a .report-body h2,
html[data-theme="light"] .result-page .qa-a .report-body h3,
html[data-theme="light"] .result-page .qa-a .report-body h4 { color: #2a2a2a; }
html[data-theme="light"] .result-page .qa-form {
  border-color: rgba(74,74,74,.16);
  background: #f7f7f7;
}
html[data-theme="light"] .result-page .qa-form textarea {
  color: #3a3a3a;
  background: transparent;
}
html[data-theme="light"] .result-page .qa-form textarea::placeholder { color: #909090; }
html[data-theme="light"] .result-page #qa-submit {
  border-color: transparent;
  color: #fff;
  background: var(--blue);
}
html[data-theme="light"] .result-page .error {
  border-color: rgba(100,100,100,.25);
  color: #515151;
  background: #f5f5f5;
}
html[data-theme="light"] .qa-quota {
  border-color: rgba(93,93,93,.2);
  color: #686868;
  background: rgba(112,112,112,.06);
}
html[data-theme="light"] .engagement-count { color: #757575; }
html[data-theme="light"] .engagement-btn {
  border-color: rgba(74,74,74,.2);
  color: #666666;
  background: #fff;
}
html[data-theme="light"] .engagement-btn:hover { color: #1d1d1d; }
html[data-theme="light"] .engagement-btn.is-active {
  border-color: rgba(93,93,93,.42);
  color: #1d1d1d;
  background: rgba(112,112,112,.09);
}
html[data-theme="light"] .engagement-share {
  border-color: rgba(93,93,93,.3);
  color: #595959;
  background: rgba(93,93,93,.07);
}
html[data-theme="light"] .engagement-toast {
  border-color: rgba(93,93,93,.18);
  color: #555555;
  background: #fff;
  box-shadow: 0 10px 26px rgba(61,61,61,.15);
}
html[data-theme="light"] .job-activity {
  border-color: rgba(74,74,74,.18);
  background: #f9f9f9;
}
html[data-theme="light"] .activity-head {
  color: #666666;
  border-bottom-color: rgba(74,74,74,.16);
  background: #f3f3f3;
}
html[data-theme="light"] .activity-log { color: #565656; }
html[data-theme="light"] .activity-line:last-child { color: #252525; }

html[data-theme="light"] .wechat-share-guide,
html[data-theme="light"] .usage-prompt { background: rgba(49,49,49,.46); }
html[data-theme="light"] .wechat-guide-card,
html[data-theme="light"] .usage-prompt-card {
  border-color: rgba(93,93,93,.24);
  color: #3a3a3a;
  background: linear-gradient(135deg, rgba(112,112,112,.045), transparent 42%), #fff;
  box-shadow: 0 26px 72px rgba(61,61,61,.24);
}
html[data-theme="light"] .wechat-guide-card h2,
html[data-theme="light"] .usage-prompt-card h2 { color: #252525; }
html[data-theme="light"] .wechat-guide-card > span:not(.wechat-guide-arrow),
html[data-theme="light"] .usage-prompt-message { color: #727272; }
html[data-theme="light"] .usage-prompt-x { color: #7f7f7f; }
html[data-theme="light"] .usage-prompt-meta {
  border-color: rgba(74,74,74,.16);
  color: #747474;
  background: #f7f7f7;
}
html[data-theme="light"] .usage-prompt-actions button {
  border-color: rgba(74,74,74,.22);
  color: #616161;
  background: #f8f8f8;
}
html[data-theme="light"] #wechat-guide-close,
html[data-theme="light"] .usage-prompt-actions a {
  border-color: rgba(93,93,93,.4);
  color: #fff;
  background: #1d1d1d;
}
html[data-theme="light"] body[data-ui="studio"] * { scrollbar-color: #ababab #f2f2f2; }
html[data-theme="light"] body[data-ui="studio"] *::-webkit-scrollbar-track { background: #f2f2f2; }
html[data-theme="light"] body[data-ui="studio"] *::-webkit-scrollbar-thumb {
  border-color: #f2f2f2;
  background: #ababab;
}
html[data-theme="light"] body[data-ui="studio"] ::selection {
  color: #242424;
  background: rgba(112,112,112,.3);
}

/* Spanish labels keep the same fixed control geometry. */
html[lang="es"] .index-page .feature-tab { font-size: .7rem; }
html[lang="es"] .result-page #share-report {
  gap: 4px;
  padding-right: 7px;
  padding-left: 7px;
  font-size: .6rem;
}
html[lang="es"] .index-page .feature-stage:nth-of-type(3)::after { content: "PRÓXIMO"; }

html[lang="zh-CN"] .index-page .feature-stage:nth-of-type(3)::after { content: "即将推出"; }

/* ===== Research workflow: 3 preview cards (replaces the old .feature-stage rows) ===== */
.workflow-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; margin: 2px 0 18px; }

/* Double-bezel: outer shell + inner core */
.wf-card { border: 1px solid var(--tech-line, rgba(162,162,162,.18)); border-radius: 18px; background: rgba(162,162,162,.045); padding: 5px; transition: border-color .35s cubic-bezier(.32,.72,0,1), background .35s cubic-bezier(.32,.72,0,1), box-shadow .35s cubic-bezier(.32,.72,0,1); }
.wf-card.is-open { border-color: rgba(141,141,141,.35); background: rgba(141,141,141,.05); box-shadow: 0 20px 46px -24px rgba(9,9,9,.95), 0 0 0 1px rgba(141,141,141,.1); }
.wf-card-in { border-radius: 14px; background: linear-gradient(180deg, rgba(24,24,24,.72), rgba(15,15,15,.72)); border: 1px solid rgba(162,162,162,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); padding: 15px 15px 13px; height: 100%; display: flex; flex-direction: column; }

/* header */
.wf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.wf-eyebrow { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 700 .72rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .03em; color: var(--tech-cyan, #e8e8e8); background: rgba(141,141,141,.08); border: 1px solid rgba(141,141,141,.22); }
.wf-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wf-titles b { font-size: .92rem; font-weight: 800; color: var(--ink, #f0f0f0); letter-spacing: -.01em; }
.wf-titles small { font-size: .64rem; color: #818181; font-weight: 500; }
.wf-soon { display: inline-block; font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9e9e9e; border: 1px solid rgba(158,158,158,.34); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.wf-soon.head { margin-left: auto; }

/* feature rows */
.wf-feats { display: flex; flex-direction: column; gap: 5px; }
.wf-feat { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; color: #c4c4c4; transition: background .22s cubic-bezier(.32,.72,0,1), color .2s, border-color .2s, transform .12s; }
.wf-feat input { position: absolute; opacity: 0; width: 0; height: 0; }
.wf-feat:hover { background: rgba(141,141,141,.05); color: var(--ink, #f0f0f0); }
.wf-feat:active { transform: scale(.985); }
.wf-fname { font-size: .8rem; font-weight: 700; }
.wf-fdesc { font-size: .63rem; color: #818181; margin-left: auto; }
.wf-feat.selected { background: linear-gradient(135deg, rgba(45,45,45,.92), rgba(60,60,60,.72)); border-color: rgba(141,141,141,.3); color: #fcfcfc; box-shadow: 0 7px 20px -9px rgba(141,141,141,.42); }
.wf-feat.selected .wf-fdesc { color: #dedede; }
.wf-feat.selected::before { content: ""; position: absolute; left: -1px; top: 24%; bottom: 24%; width: 2px; border-radius: 2px; background: var(--tech-cyan, #e8e8e8); box-shadow: 0 0 9px var(--tech-cyan, #e8e8e8); }
.wf-feat.is-disabled { cursor: not-allowed; color: #666666; opacity: .55; }
.wf-feat.is-disabled:hover { background: transparent; color: #666666; }
.wf-feat.is-disabled .wf-soon { margin-left: auto; }

/* locked (Build) card */
.wf-card.is-locked { opacity: .72; }
.wf-card.is-locked .wf-card-in { background: rgba(17,17,17,.6); }
.wf-card.is-locked .wf-feats { pointer-events: none; }

/* preview reveal */
.wf-preview { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .55s cubic-bezier(.32,.72,0,1), opacity .4s ease, margin-top .45s cubic-bezier(.32,.72,0,1); }
.wf-card.is-open .wf-preview { max-height: 340px; opacity: 1; margin-top: 13px; }
.wf-card.is-locked .wf-preview { max-height: none; opacity: .85; margin-top: 13px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.wf-mock { display: none; padding: 12px; border-radius: 11px; background: rgba(10,10,10,.5); border: 1px solid rgba(162,162,162,.1); }
.wf-card.is-open .wf-mock.is-active { display: block; animation: wf-mock-in .5s cubic-bezier(.32,.72,0,1) both; }
.wf-card.is-locked .wf-mock.m-locked { display: flex; }
@keyframes wf-mock-in { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* mock primitives */
.mk-bar { display: inline-block; height: 7px; border-radius: 4px; background: rgba(201,201,201,.32); }
.mk-bar.dim { background: rgba(201,201,201,.16); height: 6px; }
.w40{width:40%}.w45{width:45%}.w52{width:52%}.w58{width:58%}.w60{width:60%}.w64{width:64%}.w70{width:70%}.w72{width:72%}.w75{width:75%}.w76{width:76%}.w80{width:80%}.w85{width:85%}.w86{width:86%}.w90{width:90%}.w92{width:92%}
.mk-pill { display: inline-block; font-size: .56rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.mk-pill.ok { color: #bdbdbd; background: rgba(189,189,189,.12); border: 1px solid rgba(189,189,189,.3); }
.mk-pill.warn { color: #c3c3c3; background: rgba(195,195,195,.12); border: 1px solid rgba(195,195,195,.3); }
.mk-tag { display: inline-block; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tech-cyan,#e8e8e8); margin-bottom: 5px; }

/* paper-search mock: result rows */
.m-paper .mk-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title chips" "auth chips"; gap: 4px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(162,162,162,.08); }
.m-paper .mk-row:last-child { border-bottom: none; }
.m-paper .mk-row .mk-bar:nth-of-type(1) { grid-area: title; }
.m-paper .mk-row .mk-bar:nth-of-type(2) { grid-area: auth; }
.m-paper .mk-chips { grid-area: chips; display: flex; gap: 4px; }
.mk-chips i { width: 17px; height: 9px; border-radius: 3px; background: rgba(141,141,141,.18); display: inline-block; }

/* idea mock */
.m-idea .mk-idea-title { margin-bottom: 9px; }
.m-idea .mk-block { margin-bottom: 9px; }
.m-idea .mk-block .mk-bar { display: block; margin-bottom: 4px; }

/* scoop mock: gauge */
.m-scoop { text-align: center; }
.mk-gauge { position: relative; width: 92px; height: 50px; margin: 4px auto 12px; }
.mk-gauge-arc { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; border-radius: 92px 92px 0 0; background: conic-gradient(from -90deg at 50% 100%, var(--tech-cyan,#e8e8e8) 0 132deg, rgba(162,162,162,.16) 132deg 180deg); -webkit-mask: radial-gradient(circle at 50% 100%, transparent 29px, #000 30px); mask: radial-gradient(circle at 50% 100%, transparent 29px, #000 30px); }
.mk-gauge-val { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: 800 1.05rem/1 "SFMono-Regular", Consolas, monospace; color: var(--ink,#f0f0f0); }
.mk-verdicts { display: flex; gap: 6px; justify-content: center; margin-bottom: 11px; }
.m-scoop .mk-row.sm { padding: 4px 0; }
.m-scoop .mk-row.sm .mk-bar { display: block; margin: 0 auto; }

/* poster mock: mini light-poster */
.mk-poster { border-radius: 8px; background: #f6f6f6; border: 1px solid rgba(162,162,162,.2); padding: 9px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.7); }
.mk-p-title { height: 12px; border-radius: 3px; background: linear-gradient(90deg,#5c5c5c,#595959); margin: 2px auto 9px; width: 74%; }
.mk-p-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.mk-p-cols span { height: 46px; border-radius: 4px; background: #e7e7e7; box-shadow: inset 0 9px 0 rgba(89,89,89,.16); }
.mk-p-logos { display: flex; gap: 5px; justify-content: center; margin-top: 9px; }
.mk-p-logos i { width: 22px; height: 10px; border-radius: 2px; background: #d6d6d6; }

/* locked mock */
.m-locked { flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px 12px; color: #727272; }
.m-locked svg { width: 30px; height: 30px; opacity: .85; }
.m-locked span { font-size: .68rem; font-weight: 600; letter-spacing: .02em; }

@media (max-width: 860px) { .workflow-cards { grid-template-columns: 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .wf-card, .wf-feat, .wf-preview { transition: none; } .wf-card.is-open .wf-mock.is-active { animation: none; } }
/* Durable queue status and cancellation controls. */
.result-page .status-pill.status-queued {
  border-color: rgba(202,202,202,.34);
  color: #d7d7d7;
  background: rgba(202,202,202,.09);
}
.result-page .status-pill.status-queued::before { animation: pulse-dot 1.4s ease-in-out infinite; }
.result-page .status-pill.status-cancelled {
  border-color: rgba(161,161,161,.3);
  color: #b4b4b4;
  background: rgba(161,161,161,.08);
}
.queue-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(202,202,202,.28);
  border-radius: 5px;
  color: #ebebeb;
  background: rgba(202,202,202,.065);
}
.queue-info[hidden] { display: none; }
.queue-info > div { display: grid; gap: 3px; }
.queue-info strong { color: #d7d7d7; font-size: .78rem; }
.queue-info span { color: #a3a3a3; font-size: .68rem; }
.queue-info button {
  flex: none;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(202,202,202,.3);
  border-radius: 4px;
  color: #d7d7d7;
  background: rgba(202,202,202,.07);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
}
.queue-info button:hover { border-color: #d7d7d7; background: rgba(202,202,202,.12); }
.queue-info button:disabled { cursor: wait; opacity: .55; }
/* Terminate is IRREVERSIBLE — give it the danger look (solid red, white text)
   so it reads clearly as a destructive action. Cancel-queued stays neutral. */
.queue-info button#terminate-running-job {
  border-color: #c0392b;
  color: #fff;
  background: #d7392b;
}
.queue-info button#terminate-running-job:hover {
  border-color: #a5281c;
  background: #c0392b;
}
html[data-theme="light"] .result-page .status-pill.status-queued {
  border-color: #c6c6c6;
  color: #5d5d5d;
  background: #f7f7f7;
}
html[data-theme="light"] .queue-info {
  border-color: #c6c6c6;
  color: #383838;
  background: #fafafa;
}
html[data-theme="light"] .queue-info strong,
html[data-theme="light"] .queue-info button { color: #5d5d5d; }
html[data-theme="light"] .queue-info span { color: #777777; }
@media (max-width: 600px) {
  .queue-info { align-items: stretch; flex-direction: column; gap: 10px; }
  .queue-info button { width: 100%; min-height: 40px; }
}

/* Match ../docs/index.html top-right Theme and Language controls. */
.global-preferences {
  --preference-fg: #f0f0f0;
  --preference-muted: #b0b0b0;
  --preference-accent: #717171;
  --preference-bg: #1a1a1a;
  --preference-bg-soft: #151515;
  --preference-border: #2a2a2a;
  --preference-shadow: 0 10px 30px -12px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.35);
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  gap: 10px;
  font-family: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC",
    "Microsoft YaHei", sans-serif;
}
.global-preferences .global-theme-menu,
.global-preferences .global-language-menu {
  position: relative;
  inset: auto;
  width: auto;
  height: 40px;
  margin: 0;
  color: var(--preference-muted);
  background: transparent;
}
.global-preferences .global-theme-menu > summary,
.global-preferences .global-language-menu > summary,
.global-preferences .global-theme-menu[open] > summary,
.global-preferences .global-language-menu[open] > summary,
.global-preferences .global-theme-menu > summary:hover,
.global-preferences .global-language-menu > summary:hover {
  width: auto;
  height: 40px;
  gap: 6px;
  padding: 0;
  border: 0;
  color: var(--preference-muted);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
}
.global-preferences .language-menu-chevron {
  color: var(--preference-accent);
  font-size: .8em;
}
.global-preferences .global-theme-menu > summary:hover,
.global-preferences .global-language-menu > summary:hover,
.global-preferences .global-theme-menu[open] > summary,
.global-preferences .global-language-menu[open] > summary { color: var(--preference-fg); }
.global-preferences .language-menu-panel {
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  width: 108px;
  min-width: 108px;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--preference-border);
  border-radius: 10px;
  background: var(--preference-bg);
  box-shadow: var(--preference-shadow);
}
.global-preferences .language-menu-panel button {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: var(--preference-muted);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.global-preferences .language-menu-panel button:hover,
.global-preferences .language-menu-panel button.is-active {
  color: var(--preference-fg);
  background: var(--preference-bg-soft);
}
.global-preferences .language-menu-panel button.is-active { color: var(--preference-accent); }
.global-preferences .language-menu-panel button.is-active::after { content: none; }
html[data-theme="light"] .global-preferences {
  --preference-fg: #101010;
  --preference-muted: #5b5b5b;
  --preference-bg: #ffffff;
  --preference-bg-soft: #f8f8f8;
  --preference-border: #e8e8e8;
  --preference-shadow: 0 10px 30px -12px rgba(16,16,16,.18), 0 4px 10px -4px rgba(16,16,16,.08);
}
html[data-theme="light"] .global-preferences .language-menu-panel {
  border-color: var(--preference-border);
  background: var(--preference-bg);
  box-shadow: var(--preference-shadow);
}
html[data-theme="light"] .global-preferences .language-menu-panel button { color: var(--preference-muted); }
html[data-theme="light"] .global-preferences .language-menu-panel button:hover {
  color: var(--preference-fg);
  background: var(--preference-bg-soft);
}
html[data-theme="light"] .global-preferences .language-menu-panel button.is-active {
  color: var(--preference-accent);
  background: var(--preference-bg-soft);
}
@media (max-width: 760px) {
  .global-preferences {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    gap: 6px;
  }
  .global-preferences .global-theme-menu > summary,
  .global-preferences .global-language-menu > summary { font-size: 12px; }
}

/* Email field: hidden until the first "Start research run" click, then slides open */
.email-reveal { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .5s cubic-bezier(.32,.72,0,1), opacity .35s ease, margin-top .4s cubic-bezier(.32,.72,0,1); }
.email-reveal.is-open { max-height: 240px; opacity: 1; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .email-reveal { transition: none; } }

/* Light-theme overrides for the workflow cards (built dark-first) */
html[data-theme="light"] .wf-card { background: rgba(30,30,30,.028); }
html[data-theme="light"] .wf-card.is-open { border-color: rgba(29,29,29,.4); background: rgba(29,29,29,.045); box-shadow: 0 18px 42px -24px rgba(30,30,30,.28), 0 0 0 1px rgba(29,29,29,.08); }
html[data-theme="light"] .wf-card-in { background: linear-gradient(180deg,#ffffff,#fcfcfc); border-color: rgba(30,30,30,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
html[data-theme="light"] .wf-card.is-locked .wf-card-in { background: #f7f7f7; }
html[data-theme="light"] .wf-eyebrow { color: #1d1d1d; background: rgba(29,29,29,.08); border-color: rgba(29,29,29,.22); }
html[data-theme="light"] .wf-titles b { color: #1e1e1e; }
html[data-theme="light"] .wf-titles small { color: #818181; }
html[data-theme="light"] .wf-feat { color: #4a4a4a; }
html[data-theme="light"] .wf-feat:hover { background: rgba(29,29,29,.06); color: #1e1e1e; }
html[data-theme="light"] .wf-fdesc { color: #939393; }
html[data-theme="light"] .wf-feat.selected { background: linear-gradient(135deg, rgba(29,29,29,.15), rgba(29,29,29,.07)); border-color: rgba(29,29,29,.32); color: #2f2f2f; }
html[data-theme="light"] .wf-feat.selected .wf-fdesc { color: #343434; }
html[data-theme="light"] .wf-feat.is-disabled { color: #aaaaaa; }
html[data-theme="light"] .wf-mock { background: #f8f8f8; border-color: rgba(30,30,30,.08); }
html[data-theme="light"] .mk-bar { background: rgba(30,30,30,.16); }
html[data-theme="light"] .mk-bar.dim { background: rgba(30,30,30,.09); }
html[data-theme="light"] .m-locked { color: #949494; }
html[data-theme="light"] .wf-soon { color: #757575; border-color: rgba(117,117,117,.34); }

/* ==================================================================
   APPLE-STYLE WARM-MONO REFRESH  ·  DE-BOX + RESTYLE (final layer)
   De-boxes the outer hero + form wrappers, keeps the inner workflow
   cards as light warm cards, ink-as-accent. Uses !important to win
   over the deeply layered legacy studio/light rules.
   ================================================================== */

/* Wide, transparent content column with generous side gutters */
.index-page .container,
.result-page .container {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding-left: clamp(20px, 5vw, 48px) !important;
  padding-right: clamp(20px, 5vw, 48px) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hero: de-boxed, full-bleed. No card, grid, or glow. */
.index-page .promo-banner {
  min-height: 0 !important;
  overflow: visible !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: clamp(44px, 7vw, 92px) 0 clamp(30px, 4vw, 52px) !important;
}
.index-page .promo-banner .promo-copy { z-index: 3; }
.index-page .promo-banner .arxiv-menu[open] { z-index: 40; }
.index-page .promo-banner .banner-links {
  align-items: stretch;
}
.index-page .promo-banner .banner-links > .gh-link,
.index-page .promo-banner .banner-links > .arxiv-menu {
  align-self: stretch;
  height: 30px;
  margin-block: 0;
}
.index-page .promo-banner .arxiv-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}
.index-page .promo-banner::before,
.index-page .promo-banner::after {
  content: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* Start-research block: a RAISED, highlighted card that pops off the page
   (hero above stays de-boxed). Cobalt-tinted ring + soft cobalt glow + big lift. */
.index-page .form-section {
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line)) !important;
  border-radius: 24px !important;
  background: var(--surface) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent),
    0 0 72px -34px color-mix(in srgb, var(--blue) 60%, transparent) !important;
  padding: clamp(34px, 4.5vw, 60px) clamp(26px, 4vw, 56px) clamp(42px, 5vw, 66px) !important;
  margin-top: clamp(12px, 2.4vw, 34px) !important;
  position: relative !important;
}
.index-page .form-section::before,
.index-page .form-section::after { content: none !important; display: none !important; }

/* Hero visual = a dark warm "device" mock, identical in both themes */
.index-page .workflow-visual:not(.wf-stage-panel) {
  background: linear-gradient(180deg, #1e1e1e, #141414) !important;
  border: 1px solid rgba(232,232,232,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.55), inset 0 1px 0 rgba(232,232,232,.06) !important;
  color: #e8e8e8 !important;
  transform: none !important;
}
.index-page .workflow-visual:not(.wf-stage-panel)::before,
.index-page .workflow-visual:not(.wf-stage-panel)::after { display: none !important; }
.index-page .workflow-visual:not(.wf-stage-panel) .visual-header span,
.index-page .workflow-visual:not(.wf-stage-panel) .visual-footer span { color: #9f9f9f !important; }
.index-page .workflow-visual:not(.wf-stage-panel) .visual-footer strong { color: #e8e8e8 !important; }
.index-page .workflow-visual:not(.wf-stage-panel) .visual-node {
  color: #c3c3c3 !important;
  border-color: rgba(232,232,232,.14) !important;
  background: rgba(232,232,232,.03) !important;
}
.index-page .workflow-visual:not(.wf-stage-panel) .visual-node-active {
  color: #141414 !important;
  background: #e8e8e8 !important;
  border-color: #e8e8e8 !important;
}
.index-page .workflow-visual:not(.wf-stage-panel) .visual-grid span { border-color: rgba(232,232,232,.05) !important; background: none !important; }
.index-page .workflow-visual:not(.wf-stage-panel) .visual-live { color: #9f9f9f !important; }
.index-page .workflow-visual:not(.wf-stage-panel) .visual-live i { background: #e8e8e8 !important; }

/* Hero H2: Apple display; emphasis by ink weight, not color */
.index-page .promo-banner h2 {
  font-size: clamp(2.5rem, 5.6vw, 4.3rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.index-page .promo-banner h2 em {
  font-style: normal !important;
  color: var(--blue) !important;
}
.index-page .section-heading h2 { letter-spacing: -.025em; }

/* Workflow cards: recessed panels inside the raised card (flatter, so they
   don't compete with the outer lift). The open one gets a cobalt highlight. */
.index-page .wf-card { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.index-page .wf-card-in {
  background: var(--surface-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.index-page .wf-card.is-open .wf-card-in {
  background: var(--surface) !important;
  border-color: color-mix(in srgb, var(--blue) 55%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent),
    0 20px 44px -28px rgba(17,17,20,.34),
    0 0 40px -22px color-mix(in srgb, var(--blue) 55%, transparent) !important;
}
.index-page .wf-card.is-locked .wf-card-in { background: var(--surface-soft) !important; box-shadow: none !important; opacity: .82 !important; }

/* Cobalt on the selected feature (tasteful accent pop) */
.index-page .wf-feat.selected {
  background: color-mix(in srgb, var(--blue) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--blue) 40%, transparent) !important;
  color: var(--ink) !important;
}
.index-page .wf-feat.selected .wf-fname,
.index-page .wf-feat.selected .wf-fdesc { color: var(--blue) !important; }

/* Primary CTA: vivid cobalt (adds the accent pop the greyscale lacked) */
.index-page #submit-btn {
  background: var(--blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(17,22,33,.16), 0 18px 36px -16px color-mix(in srgb, var(--blue) 68%, transparent) !important;
  transition: transform .22s cubic-bezier(.32,.72,0,1), box-shadow .22s ease, filter .22s ease !important;
}
.index-page #submit-btn:hover { filter: brightness(1.06) !important; box-shadow: 0 1px 2px rgba(17,22,33,.18), 0 22px 44px -16px color-mix(in srgb, var(--blue) 78%, transparent) !important; }
.index-page #submit-btn:active { transform: translateY(1px) scale(.994) !important; }
.index-page #submit-btn span { color: inherit !important; }

/* Result page: de-box the header banner, keep content cards soft warm */
.result-page .promo-banner {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: clamp(32px,5vw,64px) 0 clamp(20px,3vw,36px) !important;
}
.result-page .promo-banner::before,
.result-page .promo-banner::after { content: none !important; background: none !important; box-shadow: none !important; opacity: 0 !important; }
.result-page .result-banner .brand-logo {
  width: 36px;
  height: 36px;
}
.result-page .result-banner .brand h1 { font-size: 1.05rem; }
.result-page .result-intro p { font-size: .65rem; }
.result-page .result-intro h2 { font-size: 1.35rem; }
.result-page .result-intro span { font-size: .78rem; }
.result-page .result-banner .banner-links > .gh-link {
  width: 120px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: .72rem;
}
@media (max-width: 700px) {
  .result-page .result-banner .brand-logo {
    width: 34px;
    height: 34px;
  }
  .result-page .result-intro h2 { font-size: 1.25rem; }
  .result-page .result-intro span { font-size: .75rem; }
}
.result-page .meta-card,
.result-page .report-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(29,29,29,.04), 0 22px 46px -32px rgba(29,29,29,.26) !important;
}

/* ---- Set the "random / auto" poster option apart from the concrete options ---- */
.poster-opts .poster-opt.is-random,
.poster-opts .poster-opt:has(> input[value="random"]) {
  color: var(--tech-cyan);
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--tech-cyan) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--tech-cyan) 8%, transparent) !important;
  margin-right: 14px;
  position: relative;
}
.poster-opts .poster-opt.is-random.selected,
.poster-opts .poster-opt.is-random:hover { color: var(--tech-cyan); }
.poster-opts .poster-opt.is-random::after,
.poster-opts .poster-opt:has(> input[value="random"])::after {
  content: ""; position: absolute; right: -8px; top: 18%; bottom: 18%;
  width: 1px; background: var(--line);
}

/* ---- Feature options: clear "selectable chip" look (more prominent, cobalt) ---- */
.index-page .wf-feat {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.index-page .wf-feat .wf-fname { color: var(--ink); }
.index-page .wf-feat:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  color: var(--ink);
  transform: translateY(-1px);
}
.index-page .wf-feat.selected {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--blue) 60%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--blue) 55%, transparent) !important;
  color: var(--ink) !important;
}
.index-page .wf-feat.selected .wf-fname { color: var(--ink) !important; }
.index-page .wf-feat.selected .wf-fdesc { color: var(--blue) !important; }
.index-page .wf-feat.selected::before { background: var(--blue) !important; box-shadow: 0 0 10px var(--blue) !important; }
.index-page .wf-feat.is-disabled {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---- Dark-theme support for the result report + Q&A (were built light-first) ---- */
html[data-theme="dark"] .result-page .report-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 18px 46px rgba(0,0,0,.5);
}
html[data-theme="dark"] .result-page .report-header {
  background: linear-gradient(90deg, rgba(88,119,255,.10), transparent 42%), var(--surface-soft);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .result-page .report-header h2 { color: var(--ink); }
html[data-theme="dark"] .result-page .report-body,
html[data-theme="dark"] .result-page #result-wrap article {
  background: var(--surface);
  color: var(--ink-2);
}
html[data-theme="dark"] .result-page .report-body h1,
html[data-theme="dark"] .result-page .report-body h2,
html[data-theme="dark"] .result-page .report-body h3,
html[data-theme="dark"] .result-page .report-body h4 { color: var(--ink); }
html[data-theme="dark"] .result-page .report-body h5 { color: var(--ink-2); }
html[data-theme="dark"] .result-page .report-body h6 { color: var(--muted); }
html[data-theme="dark"] .result-page .report-body :not(pre) > code {
  background: rgba(240,243,250,.06); border-color: var(--line); color: #cdd2e0;
}
html[data-theme="dark"] .result-page .report-body pre { background: #0e0f13; border-color: var(--line); }
html[data-theme="dark"] .result-page .report-body pre code { color: var(--ink-2); }
html[data-theme="dark"] .result-page .report-body blockquote {
  background: rgba(240,243,250,.04); color: var(--ink-2); border-left-color: var(--blue);
}
html[data-theme="dark"] .result-page .report-body a { color: var(--blue); border-bottom-color: rgba(88,119,255,.32); }
html[data-theme="dark"] .result-page .report-body a:hover { color: #8ba3ff; border-bottom-color: #8ba3ff; }
html[data-theme="dark"] .result-page .report-body table { border-color: var(--line); }
html[data-theme="dark"] .result-page .report-body table thead { background: var(--surface-soft); }
html[data-theme="dark"] .result-page .report-body table th { color: var(--ink); }
html[data-theme="dark"] .result-page .report-body table th,
html[data-theme="dark"] .result-page .report-body table td { border-color: var(--line); }
html[data-theme="dark"] .result-page .report-body table tr:nth-child(even) td { background: rgba(240,243,250,.03); }
html[data-theme="dark"] .result-page .report-body hr { border-top-color: var(--line); }
html[data-theme="dark"] .result-page .report-body figure figcaption { color: var(--muted); }
html[data-theme="dark"] .result-page .error { background: rgba(240,243,250,.06); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .result-page .copy-btn { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .result-page .copy-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-theme="dark"] .result-page .qa-card { background: var(--surface); }
html[data-theme="dark"] .result-page .qa-body { background: var(--paper); }
html[data-theme="dark"] .result-page .qa-q .qa-msg-body { background: rgba(240,243,250,.05); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .result-page .qa-a .qa-msg-body { background: rgba(240,243,250,.03); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .result-page .qa-form { background: var(--surface-soft); border-color: var(--line); }
html[data-theme="dark"] .result-page .qa-form textarea { color: var(--ink); background: transparent; }
html[data-theme="dark"] .result-page .qa-form textarea::placeholder { color: var(--muted); }

/* ---- Poster studio: premium refinements (Layout card, Method toggle, panel) ---- */
.index-page .poster-studio-panel { border-radius: 18px; padding: 18px 16px; box-shadow: 0 1px 2px rgba(17,22,33,.04), 0 26px 54px -34px rgba(17,22,33,.26); }
.index-page .layout-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 13px;
  background: var(--surface-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.index-page .title-banner-card { overflow: visible; }
.index-page .title-banner-card > .ps-group-name { margin-bottom: 0; }
.index-page .title-banner-card > .ps-group { gap: 9px; }
.index-page .title-banner-card .poster-opt[hidden] { display: none; }
.index-page .title-banner-branding-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.index-page .title-banner-branding-label {
  color: var(--ink-2);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
}
.index-page .title-banner-branding-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(46px, 1fr));
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.index-page .title-banner-branding-toggle button {
  appearance: none;
  min-width: 0;
  min-height: 30px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.index-page .title-banner-branding-toggle button:hover { color: var(--ink); }
.index-page .title-banner-branding-toggle button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--blue) 26%, transparent);
  background: var(--surface-soft);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(17,22,33,.12);
}
.index-page .title-banner-branding-toggle button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);
  outline-offset: 2px;
}
.index-page .md-switch-ui { background: color-mix(in srgb, var(--ink) 20%, var(--surface)); border-color: var(--line); }
.index-page .md-switch-ui::after { background: var(--surface); box-shadow: 0 1px 2px rgba(17,22,33,.28); }
.index-page .md-switch input:checked ~ .md-switch-ui { background: var(--blue); }
.index-page .md-switch input:checked ~ .md-switch-ui::after { background: #fff; }
/* Advanced disclosure + Special-requirements textarea polish */
.index-page .poster-advanced summary:hover { color: var(--blue); }

/* ---- Publish: "Preparing" group (Video/Blog/Reel) - quiet "not yet" state, label distinguishes it from Build ---- */
.index-page .wf-prep {
  margin-top: 12px; padding: 11px 10px 9px;
  border: 1px dashed color-mix(in srgb, var(--ink) 16%, var(--line));
  border-radius: 12px;
  background: transparent;
  display: flex; flex-direction: column; gap: 3px;
}
.index-page .wf-prep-tag {
  margin: 0 0 3px 2px;
  font: 800 .56rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.index-page .wf-prep .wf-feat.is-disabled { padding: 5px 9px; opacity: .72; }

/* ============================================================================
   Apple-inspired accent palette + dynamic three-stage preview panel
   ========================================================================== */
:root {
  --apple-blue:   #0a84ff;
  --apple-cyan:   #40c8e0;
  --apple-indigo: #5e5ce6;
  --apple-purple: #bf5af2;
  --apple-pink:   #ff375f;
  --apple-teal:   #30d1c4;
  --apple-green:  #30d158;
  --apple-orange: #ff9f0a;
  --apple-yellow: #ffd60a;
}

@keyframes apple-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Panel-scoped tokens. Each active stage swaps --stage-accent / --stage-accent-2,
   so the whole panel recolors per stage instead of a busy fixed rainbow.
   Defaults = DARK hero surface; light theme overrides further below. */
.index-page .wf-stage-panel {
  --stage-accent:   var(--apple-blue);
  --stage-accent-2: var(--apple-cyan);
  --stage-grad: linear-gradient(120deg, var(--stage-accent), var(--stage-accent-2));
  --sc-surface: rgba(255,255,255,.07);
  --sc-border: rgba(255,255,255,.16);
  --sc-text: rgba(255,255,255,.92);
  --sc-text-soft: rgba(255,255,255,.62);
  --sc-track: rgba(255,255,255,.20);
  --sc-glass: color-mix(in srgb, var(--stage-accent) 22%, transparent);
  transition: --stage-accent .6s ease;
}
.index-page .wf-stage-panel[data-active-stage="0"] { --stage-accent: var(--apple-blue);   --stage-accent-2: var(--apple-cyan); }
.index-page .wf-stage-panel[data-active-stage="1"] { --stage-accent: var(--apple-indigo); --stage-accent-2: var(--apple-purple); }
.index-page .wf-stage-panel[data-active-stage="2"] { --stage-accent: var(--apple-teal);   --stage-accent-2: var(--apple-green); }

/* Vertical flow so header → pipeline → scenes → footer never overlap. */
.index-page .wf-stage-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.index-page .wf-stage-panel .visual-pipeline {
  grid-template-columns: repeat(3, 1fr) !important;   /* 3 stages, not 4 */
  margin-top: 0 !important;
  margin-bottom: 6px;
}
.index-page .wf-stage-panel .stage-scenes { margin: 28px 0 0 !important; }
.index-page .wf-stage-panel .visual-footer { margin-top: auto; }

/* ---- "Try it" label: bigger, bolder, accent-colored ---------------------- */
.index-page .wf-stage-panel .vh-label {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
  background: var(--stage-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--stage-accent) 35%, transparent));
}

/* ---- Live dot + pipeline connector track the active stage ---------------- */
.index-page .wf-stage-panel .visual-live { color: var(--stage-accent-2); }
.index-page .wf-stage-panel .visual-live i {
  background: var(--stage-accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-accent-2) 20%, transparent);
}
.index-page .wf-stage-panel .visual-pipeline::before {
  background: var(--stage-grad) !important;
  opacity: .9;
}
.index-page .wf-stage-panel .visual-node {
  position: relative;
  z-index: 1;   /* sit ABOVE the ::before connector line so an opaque node covers
                   it -- otherwise the line paints over Build/Publish (only the
                   active node's transform used to lift it above the line). */
  cursor: pointer;
  appearance: none;
  font: inherit;
  transition: transform .32s cubic-bezier(.22,1,.36,1), background .32s ease, border-color .32s ease, color .32s ease, box-shadow .32s ease;
}
.index-page .wf-stage-panel .visual-node-active {
  color: #fff;
  border-color: transparent;
  background: var(--stage-grad);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--stage-accent) 40%, transparent);
}
.index-page .wf-stage-panel .visual-node-active small { color: rgba(255,255,255,.78); }

/* ---- Scene stage ---------------------------------------------------------- */
.stage-scenes {
  position: relative;
  z-index: 2;
  display: grid;                 /* all scenes share one grid cell → container
                                    sizes to the tallest scene, no fixed height,
                                    so choice cards never overflow/overlap */
  margin: 16px 2px 4px;
}
.stage-scene {
  grid-area: 1 / 1;              /* stack every scene in the same cell */
  opacity: 0;
  transform: translateY(10px) scale(.985);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.stage-scene.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* ---- 01 Discover: radar + streaming feed --------------------------------- */
.sc-discover { display: grid; grid-template-columns: 132px 1fr; gap: 16px; height: 100%; align-items: center; }
.sc-radar {
  position: relative;
  width: 124px; height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--stage-accent) 14%, transparent), transparent 70%);
  overflow: hidden;
}
.sc-radar > i {
  position: absolute; inset: 0; margin: auto;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 30%, transparent); border-radius: 50%;
}
.sc-radar > i:nth-child(1) { width: 40%; height: 40%; }
.sc-radar > i:nth-child(2) { width: 70%; height: 70%; }
.sc-radar > i:nth-child(3) { width: 100%; height: 100%; }
.sc-sweep {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--stage-accent) 48%, transparent), transparent 55%);
  border-radius: 50%;
  animation: sc-spin 3.4s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-blip {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--stage-accent-2);
  box-shadow: 0 0 10px var(--stage-accent-2);
  opacity: 0; animation: sc-blip 3.4s ease-in-out infinite;
}
.sc-blip.b1 { top: 26%; left: 60%; animation-delay: .2s; }
.sc-blip.b2 { top: 58%; left: 30%; animation-delay: 1.1s; }
.sc-blip.b3 { top: 40%; left: 72%; animation-delay: 1.9s; }
.sc-blip.b4 { top: 70%; left: 55%; animation-delay: 2.6s; }
@keyframes sc-blip { 0%,15% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1); } }
.sc-feed { display: flex; flex-direction: column; gap: 11px; }
.sc-feed-row { display: flex; align-items: center; gap: 9px; opacity: 0; animation: sc-in .5s ease forwards; }
.sc-feed-row:nth-child(1) { animation-delay: .15s; }
.sc-feed-row:nth-child(2) { animation-delay: .5s; }
.sc-feed-row:nth-child(3) { animation-delay: .85s; }
.sc-feed-row:nth-child(4) { animation-delay: 1.2s; }
@keyframes sc-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stage-accent); flex: none; box-shadow: 0 0 8px color-mix(in srgb, var(--stage-accent) 60%, transparent); }
.sc-line { height: 8px; border-radius: 5px; background: var(--stage-grad); opacity: .9; }
.sc-line.w82 { width: 82%; } .sc-line.w73 { width: 73%; } .sc-line.w64 { width: 64%; } .sc-line.w55 { width: 55%; }
.sc-feed-label {
  font-size: .74rem; font-weight: 700; color: var(--sc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-score {
  margin-left: auto; flex: none;
  font: 800 .6rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--stage-accent-2);
  padding: 3px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--stage-accent) 18%, transparent);
}
.sc-build-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-step {
  font-size: .64rem; font-weight: 700; color: var(--sc-text);
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--sc-border);
  background: var(--sc-surface);
}
.sc-canvas { position: relative; }
.sc-canvas-tag {
  position: absolute; top: 8px; right: 8px;
  font-size: .56rem; font-weight: 800; letter-spacing: .04em;
  color: var(--stage-accent-2);
  padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--stage-accent) 16%, transparent);
}

/* ---- 02 Build: engineering / assembly motif (Coming soon) ---------------- */
.sc-build { display: grid; grid-template-columns: 120px 1fr; gap: 18px; height: 100%; align-items: center; }
.sc-forge {
  position: relative;
  height: 108px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--stage-accent) 22%, transparent), transparent 62%),
    var(--sc-surface);
  border: 1px solid var(--sc-border);
  overflow: hidden;
}
.sc-gear { position: absolute; color: var(--stage-accent-2); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--stage-accent-2) 55%, transparent)); }
.sc-gear.g-lg { width: 52px; height: 52px; top: 24px; left: 26px; animation: sc-spin 5.5s linear infinite; }
.sc-gear.g-sm { width: 34px; height: 34px; top: 50px; left: 62px; color: var(--stage-accent); animation: sc-spin 4s linear infinite reverse; }
.sc-weld {
  position: absolute; left: 0; right: 0; top: -30%;
  height: 30%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--stage-accent-2) 42%, transparent), transparent);
  animation: sc-weld 2.8s ease-in-out infinite;
}
@keyframes sc-weld { 0% { top: -30%; } 100% { top: 100%; } }
.sc-soon { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.sc-soon-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .01em;
  color: #fff; background: var(--stage-grad);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--stage-accent) 40%, transparent);
}
.sc-soon-badge svg { width: 15px; height: 15px; }
.sc-soon small { color: var(--sc-text-soft); font-size: .68rem; letter-spacing: .02em; }

/* ---- 03 Publish: composing canvas + format chips ------------------------- */
.sc-publish { display: grid; grid-template-columns: 128px 1fr; gap: 18px; height: 100%; align-items: center; }
.sc-canvas {
  padding: 12px; border-radius: 12px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  animation: sc-float 4s ease-in-out infinite;
}
@keyframes sc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sc-c-title { display: block; height: 9px; width: 70%; border-radius: 5px; background: var(--stage-grad); }
.sc-c-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.sc-c-cols i { height: 34px; border-radius: 6px; background: var(--sc-glass); border: 1px solid var(--sc-border); }
.sc-c-foot { display: flex; gap: 6px; }
.sc-c-foot b { height: 7px; flex: 1; border-radius: 4px; background: var(--sc-track); }
.sc-formats { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-fmt {
  padding: 7px 14px; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  color: var(--sc-text-soft);
  border: 1px solid var(--sc-border);
  background: var(--sc-surface);
}
.sc-fmt.on {
  color: #fff; border-color: transparent;
  background: var(--stage-grad);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--stage-accent) 36%, transparent);
}

/* ---- Interactive tool picker inside the panel scenes --------------------- */
.sc-pick { display: flex; flex-direction: column; gap: 9px; height: 100%; justify-content: center; }
.sc-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--sc-border);
  background: var(--sc-surface);
  color: var(--sc-text);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.sc-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-choice:hover { border-color: color-mix(in srgb, var(--stage-accent) 55%, transparent); transform: translateY(-1px); }

/* ── Arcade "tap here" hand ─────────────────────────────────────────────
   A little pointing hand that hops toward the primary choice (Idea Spark /
   Poster Generate) like an old game tutorial. Lives inside the choice box so
   it shows/hides with its stage scene automatically. Fades out once the user
   picks a tool (.coach-done on the panel) so it stops nagging. */
.sc-choice { position: relative; }
.sc-tap-hand {
  position: absolute;
  bottom: -2px;
  left: 40%;
  z-index: 5;
  font-size: 1.4rem;
  line-height: 1;
  pointer-events: none;
  transform-origin: 50% 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  animation: rs-tap-hop 1.15s ease-in-out infinite;
  will-change: transform;
}
@keyframes rs-tap-hop {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  45%      { transform: translateY(-7px) rotate(2deg) scale(1.12); }
  60%      { transform: translateY(-7px) rotate(2deg) scale(1.12); }
}
.wf-stage-panel .sc-choice.coach-done .sc-tap-hand {
  opacity: 0;
  transition: opacity .35s ease;
  animation: none;
}
.sc-choice-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-choice-main .wf-fname { font-size: .82rem; font-weight: 750; color: var(--sc-text); }
.sc-fire {
  display: inline-block;
  margin-left: 3px;
  font-size: .82em;
  line-height: 1;
  vertical-align: baseline;
  animation: sc-fire-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,120,20,.6));
}
.sc-fire-count {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 6px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.3;
  vertical-align: middle;
  color: #ff9f0a;
  background: color-mix(in srgb, #ff9f0a 16%, transparent);
  border-radius: 999px;
  animation: none;
  filter: none;
}
@keyframes sc-fire-pulse {
  0%,100% { transform: scale(1) rotate(-2deg); }
  50%     { transform: scale(1.16) rotate(2deg); }
}
.sc-choice-main .wf-fdesc { font-size: .68rem; color: var(--sc-text-soft); }
.sc-choice.selected {
  border-color: transparent;
  background: color-mix(in srgb, var(--stage-accent) 14%, var(--sc-surface));
  box-shadow: 0 0 0 1px var(--stage-accent) inset, 0 8px 22px color-mix(in srgb, var(--stage-accent) 24%, transparent);
}
.sc-choice.is-disabled { opacity: .6; cursor: not-allowed; }
.sc-choice.is-disabled:hover { transform: none; border-color: var(--sc-border); }
.sc-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc-choice-sm {
  flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 11px;
}
.sc-choice-sm .wf-fname { font-size: .74rem; }
.rednote-choice-heading {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
}
.rednote-locked-choice.is-disabled {
  filter: grayscale(1); opacity: .46;
}
.rednote-locked-choice.is-disabled .wf-soon {
  margin-left: auto;
}
.sc-mini-soon {
  font-size: .54rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--stage-accent-2);
  padding: 1px 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--stage-accent) 16%, transparent);
}

/* ---- Footer metric tracks stage; chart bars stay a calm single-hue set ---- */
.index-page .wf-stage-panel .visual-footer strong.vf-metric {
  background: var(--stage-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.index-page .wf-stage-panel .visual-chart span {
  transform-origin: bottom;
  background: linear-gradient(180deg, var(--stage-accent), color-mix(in srgb, var(--stage-accent-2) 55%, transparent)) !important;
  animation: sc-bar 3.2s ease-in-out infinite;
}
.index-page .wf-stage-panel .visual-chart .bar-b { animation-delay: .3s; }
.index-page .wf-stage-panel .visual-chart .bar-c { animation-delay: .6s; }
.index-page .wf-stage-panel .visual-chart .bar-d { animation-delay: .9s; }
.index-page .wf-stage-panel .visual-chart .bar-e { animation-delay: 1.2s; }
@keyframes sc-bar { 0%,100% { transform: scaleY(.86); } 50% { transform: scaleY(1); } }

/* ---- ONLINE badge: green live dot + gold number -------------------------- */
.mock-active-users i {
  background: var(--apple-green) !important;
  box-shadow: 0 0 0 3px rgba(48,209,88,.18), 0 0 8px rgba(48,209,88,.7) !important;
}
.mock-active-users strong { color: var(--apple-green); }

/* ---- Accent lift for kicker dot ------------------------------------------ */
.index-page .promo-kicker span { background: linear-gradient(120deg, var(--apple-blue), var(--apple-purple)) !important; }

@media (max-width: 720px) {
  .sc-radar { width: 96px; height: 96px; }
  .sc-discover, .sc-build, .sc-publish { grid-template-columns: 96px 1fr; gap: 12px; }
}

/* ---- Panel is ALWAYS dark, regardless of the site theme -----------------
   The stage panel is a self-contained "device" screen: it keeps a solid dark
   surface in both light and dark site themes so the vivid per-stage accents
   read consistently. We hard-pin its background/tokens here and override the
   generic light-theme .workflow-visual rule below. */
.index-page .wf-stage-panel {
  --sc-surface: rgba(255,255,255,.07);
  --sc-border: rgba(255,255,255,.16);
  --sc-text: rgba(255,255,255,.92);
  --sc-text-soft: rgba(255,255,255,.62);
  --sc-track: rgba(255,255,255,.20);
  --sc-glass: color-mix(in srgb, var(--stage-accent) 24%, rgba(20,20,26,.6));
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 82% 6%, color-mix(in srgb, var(--stage-accent) 26%, transparent), transparent 46%),
    linear-gradient(165deg, #16171d 0%, #101116 60%, #0c0d11 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,.32),
    0 0 0 1px color-mix(in srgb, var(--stage-accent) 22%, transparent) inset,
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- Light site theme: the panel becomes a bright card (per-stage accents
   stay vivid). This makes the panel follow the theme like the rest of the UI. */
html[data-theme="light"] .index-page .wf-stage-panel {
  --sc-surface: #ffffff;
  --sc-border: color-mix(in srgb, var(--stage-accent) 26%, transparent);
  --sc-text: #1d1d1f;
  --sc-text-soft: #52555c;
  --sc-track: color-mix(in srgb, var(--stage-accent) 22%, transparent);
  --sc-glass: color-mix(in srgb, var(--stage-accent) 16%, #ffffff);
  color: #1d1d1f;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 22%, transparent);
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--stage-accent) 12%, transparent), transparent 44%),
    linear-gradient(180deg, #ffffff, #f4f6fa);
  box-shadow:
    0 22px 56px color-mix(in srgb, var(--stage-accent) 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--stage-accent) 14%, transparent) inset,
    inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .index-page .wf-stage-panel .visual-header,
html[data-theme="light"] .index-page .wf-stage-panel .visual-footer { color: #52555c; }
html[data-theme="light"] .index-page .wf-stage-panel .visual-node {
  color: #3b3f46;
  border-color: color-mix(in srgb, var(--stage-accent) 20%, transparent);
  background: #ffffff;
}
html[data-theme="light"] .index-page .wf-stage-panel .visual-node small { color: #82858c; }
html[data-theme="light"] .index-page .wf-stage-panel .visual-node-active {
  color: var(--stage-accent) !important;
  border-color: var(--stage-accent) !important;
  background: color-mix(in srgb, var(--stage-accent) 12%, #ffffff) !important;
  box-shadow: 0 0 0 1px var(--stage-accent) inset, 0 10px 24px color-mix(in srgb, var(--stage-accent) 22%, transparent) !important;
}
html[data-theme="light"] .index-page .wf-stage-panel .visual-node-active small { color: var(--stage-accent) !important; opacity: .85; }
/* Light theme: Discover & Publish get a visible accent-tinted available border;
   Build is a clean grey locked node (no see-through). */
html[data-theme="light"] .index-page .wf-stage-panel .visual-node.is-avail {
  border-color: color-mix(in srgb, var(--stage-accent) 42%, #c7cbd2);
  color: #2b2f36;
}
html[data-theme="light"] .index-page .wf-stage-panel .visual-node.is-avail small { color: #6a6e76; }
html[data-theme="light"] .index-page .wf-stage-panel .visual-node.is-locked {
  background: #f8f9fb;
  border-color: #edeff2;
  color: #b6bac1;
  opacity: 1;   /* stays opaque so the connector line can't peek through; the
                   faded look comes from the near-panel bg + soft muted text. */
}
html[data-theme="light"] .index-page .wf-stage-panel .visual-node.is-locked small { color: #bfc2c7; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-canvas { box-shadow: 0 12px 30px rgba(17,22,33,.10); }

/* Light theme: force scene text/chips to dark ink so they never blend into
   the bright card (the CSS-var cascade alone proved unreliable across nesting). */
html[data-theme="light"] .index-page .wf-stage-panel .sc-feed-label,
html[data-theme="light"] .index-page .wf-stage-panel .sc-step { color: #1d1d1f; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-step {
  border-color: color-mix(in srgb, var(--stage-accent) 30%, transparent);
  background: color-mix(in srgb, var(--stage-accent) 8%, #ffffff);
}
html[data-theme="light"] .index-page .wf-stage-panel .sc-soon small { color: #52555c; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-fmt {
  color: #3b3f46;
  border-color: color-mix(in srgb, var(--stage-accent) 26%, transparent);
  background: #ffffff;
}
html[data-theme="light"] .index-page .wf-stage-panel .sc-fmt.on { color: #fff; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-score {
  color: color-mix(in srgb, var(--stage-accent) 72%, #1d1d1f);
  background: color-mix(in srgb, var(--stage-accent) 14%, #ffffff);
}
html[data-theme="light"] .index-page .wf-stage-panel .sc-canvas-tag {
  color: color-mix(in srgb, var(--stage-accent) 72%, #1d1d1f);
  background: color-mix(in srgb, var(--stage-accent) 14%, #ffffff);
}
html[data-theme="light"] .index-page .wf-stage-panel .visual-footer strong.vf-metric { -webkit-text-fill-color: initial; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-choice {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--stage-accent) 24%, transparent);
}
html[data-theme="light"] .index-page .wf-stage-panel .sc-choice .wf-fname { color: #1d1d1f; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-choice .wf-fdesc { color: #52555c; }
html[data-theme="light"] .index-page .wf-stage-panel .sc-choice.selected {
  background: color-mix(in srgb, var(--stage-accent) 10%, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
  .sc-sweep, .sc-blip, .sc-brick, .sc-canvas, .visual-node-active, .sc-soon-badge, .sc-fmt.on, .wf-stage-panel .visual-chart span, .sc-feed-row, .sc-gear, .sc-weld, .sc-fire { animation: none !important; }
  .sc-feed-row { opacity: 1; }
}
/* Align the in-body Copy action with the Share action above. */
@media (max-width: 700px) {
  .result-page .report-body-toolbar { margin-right: 4px; }
}
@media (max-width: 600px) {
  .result-page #copy-report {
    width: calc((100% - 22px) / 3);
    height: 40px;
    padding-right: 7px;
    padding-left: 7px;
  }
}

/* ============================================================================
   Download pills appended beside Copy Result in the report toolbar.
   Themed via the shared Apple palette; tracks the site theme so pills stay
   readable in both dark and light modes.
   ========================================================================== */
#report-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 18px;
}
#report-toolbar[hidden] { display: none; }

/* Neutral glass surface + per-pill accent set via :nth-child so each button
   in the row picks a distinct Apple hue — cleaner than a single blue-purple
   gradient on every button. */
.dl-pill {
  --pill-accent: var(--apple-blue, #0a84ff);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  color: color-mix(in srgb, var(--pill-accent) 82%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--pill-accent) 42%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--pill-accent) 14%, transparent),
      color-mix(in srgb, var(--pill-accent) 6%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pill-accent) 22%, transparent);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.dl-pill::before {
  content: "↓";
  display: inline-block;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
  color: var(--pill-accent);
}
.dl-pill:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg,
    var(--pill-accent),
    color-mix(in srgb, var(--pill-accent) 78%, #ffffff));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pill-accent) 40%, transparent);
}
.dl-pill:hover::before { color: #fff; }
.dl-pill:active { transform: translateY(0); }
.dl-pill:focus-visible { outline: 2px solid var(--pill-accent); outline-offset: 2px; }

.download-more {
  position: relative;
  align-self: center;
}
.download-more > summary {
  padding: 7px 15px;
  border: 1px solid color-mix(in srgb, var(--apple-purple, #bf5af2) 42%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--apple-purple, #bf5af2) 82%, #ffffff);
  background: color-mix(in srgb, var(--apple-purple, #bf5af2) 10%, transparent);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.download-more > summary::-webkit-details-marker { display: none; }
.download-more > summary::after {
  content: "⌄";
  display: inline-block;
  margin-left: 6px;
  transition: transform .16s ease;
}
.download-more[open] > summary::after { transform: rotate(180deg); }
.download-more-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  min-width: 165px;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border, rgba(255, 255, 255, .14));
  border-radius: 14px;
  background: var(--panel, #16171a);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}
.download-more-panel .dl-pill {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}
html[data-theme="light"] .download-more > summary {
  color: color-mix(in srgb, var(--apple-purple, #bf5af2) 68%, #1d1d1f);
  background: color-mix(in srgb, var(--apple-purple, #bf5af2) 8%, #ffffff);
}
html[data-theme="light"] .download-more-panel {
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(28, 28, 30, .16);
}

/* Per-pill accent cycle through the Apple palette. */
.dl-pill:nth-child(1) { --pill-accent: var(--apple-blue,   #0a84ff); }
.dl-pill:nth-child(2) { --pill-accent: var(--apple-indigo, #5e5ce6); }
.dl-pill:nth-child(3) { --pill-accent: var(--apple-purple, #bf5af2); }
.dl-pill:nth-child(4) { --pill-accent: var(--apple-teal,   #30d1c4); }
.dl-pill:nth-child(5) { --pill-accent: var(--apple-green,  #30d158); }
.dl-pill:nth-child(6) { --pill-accent: var(--apple-orange, #ff9f0a); }
.dl-pill:nth-child(7) { --pill-accent: var(--apple-pink,   #ff375f); }
.dl-pill:nth-child(8) { --pill-accent: var(--apple-cyan,   #40c8e0); }

/* Light theme: same accent cycle on a white base with darker ink. */
html[data-theme="light"] .dl-pill {
  color: color-mix(in srgb, var(--pill-accent) 68%, #1d1d1f);
  border-color: color-mix(in srgb, var(--pill-accent) 40%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pill-accent) 12%, #ffffff),
    #ffffff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pill-accent) 10%, transparent);
}
html[data-theme="light"] .dl-pill:hover {
  color: #fff;
  background: linear-gradient(120deg,
    var(--pill-accent),
    color-mix(in srgb, var(--pill-accent) 78%, #ffffff));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pill-accent) 26%, transparent);
}
@media (max-width: 640px) {
  #report-toolbar { justify-content: flex-end; }
  .dl-pill { padding: 6px 11px; font-size: .72rem; }
  .download-more > summary { padding: 6px 11px; font-size: .72rem; }
}

/* Poster build timeline: compensate for half the thumb width so its center lands
   exactly on the visible track endpoints at 0% and 100%. */
.pv-range-shell {
  --pv-thumb-size: 16px;
  --pv-progress: 100%;
  position: relative;
  flex: 1;
  min-width: 120px;
  height: 30px;
}
.pv-range-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue) 0 var(--pv-progress), var(--line) var(--pv-progress) 100%);
  transform: translateY(-50%);
  pointer-events: none;
}
/* Running (job not done): the poster is STILL being built, so the newest frame
   is NOT "100% complete" — it's just the latest so far. Show an indeterminate
   flowing bar instead of a filled percentage so nobody mistakes it for done. */
.pv-range-shell.is-building::before {
  background: linear-gradient(90deg,
    var(--line) 0%, var(--line) 30%,
    color-mix(in srgb, var(--blue) 65%, transparent) 50%,
    var(--line) 70%, var(--line) 100%);
  background-size: 220% 100%;
  animation: pv-building-flow 1.4s linear infinite;
}
@keyframes pv-building-flow {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-range-shell.is-building::before { animation: none;
    background: linear-gradient(to right, var(--blue) 0 35%, var(--line) 35% 100%); }
}
#pv-range {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -8px;
  width: calc(100% + 16px);
  height: 30px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
}
#pv-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#pv-range::-webkit-slider-runnable-track { height: 4px; background: transparent; }
#pv-range::-moz-range-track { height: 4px; background: transparent; }
#pv-range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--pv-thumb-size);
  height: var(--pv-thumb-size);
  margin-top: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--blue);
  box-shadow: 0 1px 5px rgba(0,0,0,.32);
}
#pv-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--pv-thumb-size);
  height: var(--pv-thumb-size);
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 1px 5px rgba(0,0,0,.32);
}

/* ============================================================================
   Idea-Spark report visual sections (Apple-style callouts + coloured chips).
   Applied by enhanceIdeaReport() when mode === 'idea_spark'. Every rule is
   scoped under .report-body[data-mode="idea_spark"] so other modes are
   unaffected. Colours reference the shared --apple-* palette.
   ========================================================================== */
.report-body[data-mode="idea_spark"] h2 {
  position: relative;
  padding: 4px 0 8px 14px;
  margin: 32px 0 14px;
  border-left: 4px solid var(--apple-blue, #0a84ff);
  font-weight: 750;
  letter-spacing: -.01em;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--apple-blue, #0a84ff) 10%, transparent) 0%,
    transparent 55%);
  border-radius: 0 8px 8px 0;
}
/* Cycle heading accent so top-level sections read as a rhythm, not a wall. */
.report-body[data-mode="idea_spark"] h2:nth-of-type(2n)   { border-left-color: var(--apple-purple, #bf5af2); background: linear-gradient(90deg, color-mix(in srgb, var(--apple-purple, #bf5af2) 10%, transparent), transparent 55%); }
.report-body[data-mode="idea_spark"] h2:nth-of-type(3n)   { border-left-color: var(--apple-teal,   #30d1c4); background: linear-gradient(90deg, color-mix(in srgb, var(--apple-teal,   #30d1c4) 10%, transparent), transparent 55%); }
.report-body[data-mode="idea_spark"] h2:nth-of-type(4n)   { border-left-color: var(--apple-orange, #ff9f0a); background: linear-gradient(90deg, color-mix(in srgb, var(--apple-orange, #ff9f0a) 10%, transparent), transparent 55%); }

/* Run-in bold labels ("Method.", "Problem framing.", "Pipeline.", …) → chip */
.report-body[data-mode="idea_spark"] .idea-runin {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--apple-blue, #0a84ff);
  border: 1px solid color-mix(in srgb, var(--apple-blue, #0a84ff) 32%, transparent);
  background: color-mix(in srgb, var(--apple-blue, #0a84ff) 10%, transparent);
  vertical-align: baseline;
}

/* Stage headings (M0/M1/M2/…) get a numbered chip + separator line */
.report-body[data-mode="idea_spark"] .idea-stage-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--apple-indigo, #5e5ce6) 30%, var(--line));
  font-size: 1.05rem;
  font-weight: 700;
}
.report-body[data-mode="idea_spark"] .idea-stage-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 4px 10px;
  border-radius: 8px;
  font: 800 .82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(120deg, var(--apple-indigo, #5e5ce6), var(--apple-purple, #bf5af2));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--apple-indigo, #5e5ce6) 32%, transparent);
}
.report-body[data-mode="idea_spark"] .idea-stage-title {
  color: var(--ink);
}

/* "Why: …" rationale strip — a subtle green accent so readers can pattern-
   scan reasoning without it competing with the main prose. */
.report-body[data-mode="idea_spark"] .idea-why-callout {
  position: relative;
  padding: 8px 12px 8px 34px;
  margin: 6px 0;
  border-radius: 8px;
  border-left: 3px solid var(--apple-green, #30d158);
  background: color-mix(in srgb, var(--apple-green, #30d158) 7%, transparent);
  color: var(--ink-2);
  font-size: .93em;
}
.report-body[data-mode="idea_spark"] .idea-why-callout::before {
  content: "💡";
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: .95em;
  line-height: 1.35;
}
.report-body[data-mode="idea_spark"] .idea-why-callout em:first-child {
  color: var(--apple-green, #30d158);
  font-style: normal;
  font-weight: 700;
  margin-right: 6px;
}

/* Author decision inline callout — an orange/amber pill saying "hey, human,
   pick this before running the method." Rendered inline so it visually sits
   next to the sentence that triggered the decision. */
.report-body[data-mode="idea_spark"] .idea-author-decision {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  margin: 6px 2px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--apple-orange, #ff9f0a) 42%, transparent);
  background: color-mix(in srgb, var(--apple-orange, #ff9f0a) 10%, transparent);
  font-size: .92em;
  vertical-align: baseline;
}
.report-body[data-mode="idea_spark"] .idea-ad-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font: 800 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--apple-orange, #ff9f0a), var(--apple-pink, #ff375f));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--apple-orange, #ff9f0a) 30%, transparent);
}
.report-body[data-mode="idea_spark"] .idea-ad-body { color: var(--ink); }

/* Deeper-indented list items (the step body under each numbered step) get a
   slim ruled edge so nested Why/decision callouts nest visually. */
.report-body[data-mode="idea_spark"] ol > li,
.report-body[data-mode="idea_spark"] ul > li {
  margin-bottom: 10px;
}
.report-body[data-mode="idea_spark"] ol > li > ul,
.report-body[data-mode="idea_spark"] ol > li > p + ul {
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, var(--apple-indigo, #5e5ce6) 18%, var(--line));
  margin-top: 6px;
}

/* Dark theme: soften bright chip surfaces so they don't glow */
html[data-theme="dark"] .report-body[data-mode="idea_spark"] .idea-why-callout {
  background: color-mix(in srgb, var(--apple-green, #30d158) 12%, transparent);
}
html[data-theme="dark"] .report-body[data-mode="idea_spark"] .idea-author-decision {
  background: color-mix(in srgb, var(--apple-orange, #ff9f0a) 14%, transparent);
}

/* System-wide maintenance notice shown above the demo workspace. */
.maintenance-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 184, 77, .36);
  border-left: 4px solid #ffb84d;
  border-radius: 9px;
  color: #f3e5cc;
  background: linear-gradient(90deg, rgba(255, 184, 77, .14), rgba(255, 184, 77, .06));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.maintenance-banner-icon {
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 199, 102, .55);
  border-radius: 50%;
  color: #1b1408;
  background: #ffc766;
  font: 800 .83rem/1 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.maintenance-banner p {
  display: flex;
  gap: 9px;
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
}
.maintenance-banner time {
  flex: none;
  color: #ffc766;
  font: 750 .82rem/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
html[data-theme="light"] .maintenance-banner {
  border-color: rgba(159, 94, 0, .28);
  border-left-color: #b76b00;
  color: #4d3820;
  background: linear-gradient(90deg, rgba(255, 184, 77, .2), rgba(255, 213, 145, .13));
  box-shadow: 0 10px 26px rgba(74, 52, 20, .08);
}
html[data-theme="light"] .maintenance-banner-icon {
  border-color: rgba(135, 77, 0, .36);
  color: #fff;
  background: #a86000;
}
html[data-theme="light"] .maintenance-banner time { color: #8a5000; }

.index-page .maintenance-banner + .promo-banner,
.result-page .maintenance-banner + .promo-banner {
  padding-top: clamp(14px, 1.8vw, 24px) !important;
}

/* Keep the native maintenance-disabled button fail-closed while its wrapper
   receives the hidden three-click team unlock gesture on mouse and touch. */
.index-page .maintenance-submit-gate {
  display: flow-root;
  width: 100%;
}
.index-page .maintenance-submit-gate[data-maintenance-locked="true"] {
  cursor: not-allowed;
  touch-action: manipulation;
}
.index-page .maintenance-submit-gate[data-maintenance-locked="true"] > #submit-btn {
  pointer-events: none;
}

.index-page #submit-btn[data-maintenance-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .48 !important;
  filter: grayscale(.45) !important;
  transform: none !important;
  box-shadow: none !important;
}
.index-page #submit-btn[data-maintenance-disabled="true"]:hover,
.index-page #submit-btn[data-maintenance-disabled="true"]:active {
  filter: grayscale(.45) !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  .maintenance-banner {
    align-items: flex-start;
    padding: 11px 13px;
  }
  .maintenance-banner p {
    display: block;
    font-size: .82rem;
  }
  .maintenance-banner time {
    display: block;
    margin-bottom: 2px;
  }
}