@font-face {
  font-family: HYYaKuHeiX;
  src: url('composition/fonts/HYYaKuHeiX-75W.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: FZVariable-LanTingHeiK;
  src: url('composition/fonts/FZVariable-LanTingHeiK-340.ttf') format('truetype');
  font-weight: 340;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f7f8fa; color: #18202d; font: 14px/1.6 system-ui, 'Microsoft YaHei', sans-serif; }
a { color: #315bd5; text-decoration: none; }
a:hover { text-decoration: underline; }
header { height: 64px; border-bottom: 1px solid #dfe3e9; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
header span { color: #6c7480; }
main { max-width: 1440px; margin: auto; padding: 30px 32px 48px; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.heading h1 { font-size: 28px; margin: 0 0 8px; }
.heading p { margin: 0; color: #5a6472; }
nav { display: flex; gap: 8px; margin: 28px 0 20px; }
button, select, textarea { font: inherit; }
button { cursor: pointer; background: #fff; border: 1px solid #d7dde5; border-radius: 6px; padding: 8px 14px; color: inherit; }
button[aria-pressed=true] { background: #182333; color: #fff; border-color: #182333; }
button:hover { border-color: #718197; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #8bb8ff; outline-offset: 2px; }
.workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
aside { padding: 20px; background: #fff; border: 1px solid #dfe3e9; border-radius: 8px; align-self: start; }
aside > label { display: block; margin: 0 0 8px; font-weight: 600; }
textarea, select { display: block; width: 100%; border: 1px solid #cdd4de; border-radius: 5px; padding: 9px 10px; margin-bottom: 20px; resize: vertical; background: #fff; color: #18202d; }
.samples { display: flex; flex-wrap: wrap; gap: 5px; margin: -7px 0 22px; }
.samples button { font-size: 12px; padding: 5px 8px; }
.check { display: flex; gap: 8px; align-items: center; }
.hint { font-size: 12px; color: #6a7481; margin: 16px 0; }
#fit-report { border-top: 1px solid #e2e6ec; padding-top: 12px; font-size: 12px; }
#fit-report p { margin: 5px 0; }
.preview { min-width: 0; background: #eef0f3; padding: 20px; display: flex; flex-direction: column; align-items: center; border-radius: 8px; }
canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px #18233312; }
canvas.portrait { max-width: 480px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 20px; font-size: 12px; }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--key); }
.title { --key: #7e914a; }
.subtitle { --key: #8c5db0; }
.outer { --key: #42a49b; }
.group { --key: #4367a5; }
.gap { --key: #b1763d; }
#source-note { font-size: 12px; color: #637083; text-align: center; }
details { margin-top: 24px; border-top: 1px solid #dfe3e9; padding-top: 16px; }
summary { cursor: pointer; }
pre { overflow: auto; font-size: 12px; background: #fff; padding: 20px; border: 1px solid #dfe3e9; }
.footer-note { font-size: 12px; color: #66707c; }
.error { color: #af3030; }

@media (max-width: 900px) {
  main { padding: 22px 16px; }
  .heading { display: block; }
  .heading > a { display: inline-block; margin-top: 12px; }
  .workspace { grid-template-columns: 1fr; }
  aside { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  aside > * { grid-column: 1 / -1; }
  aside .hint { margin: 0; }
  .preview { padding: 12px; }
  header { padding: 0 16px; }
  .legend { gap: 10px; }
  nav button { padding: 8px 10px; }
}