:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #5d6472;
  --faint: #f6f7fb;
  --panel: #ffffff;
  --line: #0f1117;
  --line-soft: #e4e6ee;
  --accent: #ff4d2e;
  --accent-dark: #d7371c;
  --blue: #0b84ff;
  --violet: #6d5dfc;
  --ok: #0d7a4f;
  --warn: #b25b00;
  --bad: #b91c1c;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
textarea,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .84);
  border-bottom: 1px solid rgba(15, 17, 23, .08);
  backdrop-filter: blur(22px);
}

.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -.02em;
}

.mark {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15, 17, 23, .14);
  border-radius: 11px;
  position: relative;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 17, 23, .1);
}

.mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 7px;
  background: var(--ink);
}

.mark::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  right: 3px;
  top: 3px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 3px #fff;
}

nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
}

nav a:hover {
  color: var(--ink);
  background: #f2f3f8;
  border-color: rgba(15, 17, 23, .08);
}

main {
  padding: 26px 0 58px;
}

.hero {
  position: relative;
  display: block;
  padding: 52px 0 34px;
}

.eyebrow,
.sectionLabel,
.mono {
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 13px;
  border: 1px solid rgba(15, 17, 23, .1);
  border-radius: 999px;
  background: #f7f8fb;
  color: #252935;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(54px, 8.6vw, 104px);
  line-height: .88;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.intro {
  max-width: 700px;
  margin: 22px 0 0;
  color: #303642;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.46;
  text-wrap: pretty;
}

.tool {
  border: 1px solid rgba(15, 17, 23, .09);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  min-height: 660px;
  box-shadow: 0 18px 54px rgba(15, 17, 23, .08);
}

.editor,
.inspector {
  padding: 24px;
}

.editor {
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto;
  gap: 16px;
  border-right: 1px solid var(--line-soft);
  background: #fff;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 12px;
}

.toolTitle {
  display: grid;
  gap: 5px;
}

.toolTitle strong {
  font-size: 24px;
  letter-spacing: -.025em;
}

.toolTitle span {
  color: var(--muted);
  font-size: 14px;
}

.actions,
.tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.actions {
  justify-content: flex-start;
}

.actions .btn,
.actions .switch {
  white-space: nowrap;
}

.btn,
.chip {
  min-height: 36px;
  border: 1px solid rgba(15, 17, 23, .12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font-weight: 850;
  font-size: 14px;
}

.btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.btn:hover,
.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 17, 23, .1);
}

.chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

textarea {
  width: 100%;
  height: 100%;
  min-height: 360px;
  resize: vertical;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(248, 249, 252, .9), #fff);
  color: var(--ink);
  padding: 20px;
  line-height: 1.6;
  font-size: 18px;
  outline: none;
}

textarea:focus {
  border-color: rgba(79, 112, 255, .45);
  box-shadow: 0 0 0 4px rgba(79, 112, 255, .12);
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}

.stat {
  min-height: 82px;
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 12px;
  border-right: 1px solid var(--line-soft);
}

.stat:last-child {
  border-right: 0;
}

.stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.stat strong {
  font-size: 24px;
}

.inspector {
  background:
    linear-gradient(180deg, #f8f9fc 0%, #f2f4f8 100%);
  display: grid;
  gap: 18px;
  align-content: start;
}

.resultCard,
.presetPanel,
.markdownPanel {
  border: 1px solid rgba(15, 17, 23, .09);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 17, 23, .05);
}

.resultCard {
  padding: 22px;
}

.selectedMeta {
  margin: 0 0 12px;
  color: var(--muted);
}

.selectedTitleRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.selectedTitleRow h2 {
  margin: 0;
  font-size: 36px;
  line-height: .96;
  letter-spacing: -.04em;
}

.typeBadge {
  border: 1px solid rgba(11, 132, 255, .18);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(11, 132, 255, .08);
  color: #0759b0;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.score {
  margin: 24px 0 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.score strong {
  font-size: 78px;
  line-height: .82;
  letter-spacing: -.055em;
}

.score span {
  color: var(--muted);
  font-weight: 750;
}

.meter {
  height: 12px;
  border-radius: 999px;
  background: #eceef6;
  overflow: hidden;
}

.bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--blue);
}

.meter[data-state="warn"] .bar { background: var(--warn); }
.meter[data-state="bad"] .bar { background: var(--bad); }

.hint {
  margin: 16px 0 0;
  color: #36363b;
  line-height: 1.55;
}

.source {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(15, 17, 23, .12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
}

.source:hover {
  background: var(--ink);
  color: #fff;
}

.presetPanel {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panelHead h2 {
  margin: 0;
  font-size: 20px;
}

.presetGrid {
  display: grid;
  gap: 10px;
}

.preset {
  border: 1px solid rgba(15, 17, 23, .09);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  padding: 13px;
  text-align: left;
  display: grid;
  gap: 8px;
}

.preset.active {
  background: #090b10;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 36px rgba(15, 17, 23, .14);
}

.presetTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  opacity: .72;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.preset strong {
  font-size: 18px;
}

.preset small {
  color: inherit;
  opacity: .72;
  font-weight: 750;
}

.markdownPanel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.miniStat {
  min-height: 72px;
  display: grid;
  gap: 5px;
  align-content: center;
  padding: 12px;
  border-right: 1px solid var(--line-soft);
}

.miniStat:last-child {
  border-right: 0;
}

.miniStat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.miniStat strong {
  font-size: 20px;
}

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 28px;
  padding: 54px 0 20px;
}

.copyBlock,
.faq {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
}

.copyBlock h2,
.faq h2 {
  margin: 0 0 14px;
  font-size: 28px;
}

.copyBlock p,
.faq p {
  color: #3d3d43;
  font-size: 16px;
  line-height: 1.7;
}

.faqItem {
  border-top: 1px solid var(--line-soft);
  padding: 18px 0;
}

.faqItem h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

footer {
  border-top: 1px solid var(--line-soft);
  padding: 22px 0 32px;
  color: var(--muted);
  font-size: 14px;
}

.footerRow {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footerRow a {
  color: var(--ink);
  font-weight: 750;
}

/* Remotion reference pass: dark developer-product surface. */
:root {
  --bg: #05070d;
  --ink: #f7f9ff;
  --muted: #a4adbd;
  --faint: #111722;
  --panel: #0c111a;
  --line: #f7f9ff;
  --line-soft: #273142;
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(11, 132, 255, .24), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(255, 77, 46, .16), transparent 26%),
    linear-gradient(180deg, #05070d 0%, #070a12 46%, #0b0f17 100%);
  color: var(--ink);
}

header {
  background: rgba(5, 7, 13, .82);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.mark {
  background: #0b1018;
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
}

.mark::before {
  background: #fff;
}

.mark::after {
  box-shadow: 0 0 0 3px #0b1018;
}

nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}

.eyebrow {
  color: #dce7ff;
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}

.intro,
.hint,
.copyBlock p,
.faq p {
  color: #d0d7e6;
}

.tool {
  background: #0b1018;
  border-color: #3a4559;
  box-shadow: 0 30px 96px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.editor {
  background: #080d15;
}

.inspector {
  background: linear-gradient(180deg, #121a27 0%, #0d141f 100%);
}

.btn,
.chip,
.source {
  color: #f7f9ff;
  background: #182233;
  border-color: #526078;
}

.btn.primary,
.chip.active {
  color: #05070d;
  background: #fff;
  border-color: #fff;
}

.btn:hover,
.chip:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

textarea {
  color: #f7f9ff;
  background: linear-gradient(180deg, #0d1420, #0a1019);
  border-color: #334055;
}

textarea::placeholder {
  color: #8792a5;
}

.stats,
.resultCard,
.presetPanel,
.markdownPanel {
  background: #0a1019;
  border-color: #334055;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

.typeBadge {
  color: #8cc8ff;
}

.meter {
  background: #1b2432;
}

.source:hover {
  color: #05070d;
  background: #fff;
}

.preset {
  color: #f7f9ff;
  background: #111827;
  border-color: #40506a;
}

.preset.active {
  color: #05070d;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.presetGrid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}

.preset {
  min-height: 96px;
  padding: 12px;
  align-content: space-between;
}

.presetTop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  align-items: start;
}

.presetTop span:last-child {
  opacity: .72;
  font-size: 10px;
}

.preset strong {
  font-size: 15px;
  line-height: 1.08;
}

.preset small {
  font-size: 12px;
}

.footerRow a {
  color: #fff;
}

/* Laptop workbench: keep the real tool inside one MacBook Air viewport. */
@media (min-width: 641px) {
  main {
    padding: 18px 0 34px;
  }

  .hero {
    padding: 28px 0 20px;
  }

  .eyebrow {
    min-height: 28px;
    margin-bottom: 12px;
    padding: 0 10px;
    font-size: 11px;
  }

  h1 {
    max-width: 760px;
    font-size: clamp(46px, 6.8vw, 78px);
    line-height: .9;
  }

  .intro {
    max-width: 660px;
    margin-top: 14px;
    font-size: 18px;
    line-height: 1.42;
  }

  .tool {
    height: min(620px, calc(100vh - 112px));
    min-height: 520px;
  }

  .editor,
  .inspector {
    min-height: 0;
    padding: 16px;
  }

  .editor {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .toolTitle {
    gap: 2px;
  }

  .toolTitle strong {
    font-size: 20px;
  }

  .toolTitle span {
    font-size: 12px;
  }

  .btn,
  .chip {
    min-height: 32px;
    padding: 0 11px;
    font-size: 13px;
  }

  .switch {
    font-size: 13px;
  }

  .switch input {
    width: 15px;
    height: 15px;
  }

  textarea {
    min-height: 0;
    resize: none;
    padding: 15px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 18px;
  }

  .stats {
    border-radius: 18px;
  }

  .stat {
    min-height: 54px;
    padding: 8px 10px;
    gap: 2px;
  }

  .stat span {
    font-size: 10px;
  }

  .stat strong {
    font-size: 20px;
  }

  .inspector {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
  }

  .resultCard {
    padding: 16px;
  }

  .selectedMeta {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .selectedTitleRow h2 {
    font-size: 28px;
  }

  .typeBadge {
    padding: 5px 8px;
    font-size: 11px;
  }

  .score {
    margin: 14px 0 6px;
  }

  .score strong {
    font-size: 56px;
  }

  .meter {
    height: 9px;
  }

  .hint {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.42;
  }

  .source {
    min-height: 30px;
    margin-top: 10px;
    font-size: 12px;
  }

  .presetPanel {
    min-height: 0;
    padding: 14px;
    gap: 10px;
    overflow: hidden;
  }

  .panelHead h2 {
    font-size: 18px;
  }

  .tabs {
    gap: 6px;
  }

  .presetGrid {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
  }

  .preset {
    min-height: 78px;
    padding: 10px;
    border-radius: 14px;
    gap: 5px;
  }

  .presetTop {
    font-size: 9px;
  }

  .presetTop span:last-child {
    font-size: 9px;
  }

  .preset strong {
    font-size: 13px;
  }

  .preset small {
    font-size: 11px;
  }

  .markdownPanel {
    min-height: 46px;
  }

  .miniStat {
    min-height: 46px;
    padding: 8px 10px;
  }

  .miniStat span {
    font-size: 9px;
  }

  .miniStat strong {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .hero,
  .tool,
  .content {
    grid-template-columns: 1fr;
  }

  .editor {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    grid-template-rows: auto 260px auto;
  }

  .tool {
    min-height: 0;
  }

  .inspector {
    order: -1;
  }

  textarea {
    min-height: 0;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    border-bottom: 1px solid var(--line-soft);
  }

  .markdownPanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .shell {
    width: min(100vw - 20px, 1180px);
  }

  nav {
    display: none;
  }

  main {
    padding-top: 18px;
  }

  h1 {
    font-size: clamp(46px, 15vw, 74px);
  }

  .intro {
    font-size: 17px;
  }

  .toolbar,
  .selectedTitleRow,
  .panelHead {
    align-items: stretch;
    flex-direction: column;
  }

  .editor,
  .inspector {
    padding: 14px;
  }

  textarea {
    min-height: 0;
  }

  .score strong {
    font-size: 54px;
  }
}