/* 版式：一张纸居中。做题页左边是题目，右边是讲解的人物。 */
:root {
  --paper: #efe7d8;        /* 桌面上的底色 */
  --sheet: #fbf7ef;        /* 纸 */
  --ink: #26211b;          /* 墨 */
  --ink-soft: #6c6256;
  --rule: #d9c9a8;         /* 金色细线 */
  --rule-soft: #e9dfca;
  --orange: #d5622a;       /* 主题色 */
  --orange-deep: #b24c1b;  /* 用在文字上 */
  --orange-wash: #f7e4d4;
  --wrong: #8f2f22;
  --wrong-wash: #f3e1da;
  --serif-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Noto Serif SC", serif;
  --serif-zh: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .18  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 56px max(20px, env(safe-area-inset-left, 0px));
}
a { color: inherit; }
ruby rt { font-size: .46em; color: var(--ink-soft); font-weight: 500; letter-spacing: .04em; user-select: none; }
[hidden] { display: none !important; }

/* 顶栏 */
.top { max-width: 1120px; margin: 0 auto; padding: 22px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-seal { width: 34px; height: 34px; display: grid; place-items: center; background: var(--orange); color: var(--sheet); font-family: var(--serif-ja); font-weight: 700; font-size: 1.15rem; border-radius: 5px; }
.brand-name { font-family: var(--serif-zh); font-weight: 700; font-size: 1.25rem; letter-spacing: .12em; }
.brand-level { font-size: .72rem; letter-spacing: .14em; color: var(--orange-deep); border: 1px solid var(--rule); border-radius: 3px; padding: 0 6px; line-height: 1.6; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 6px 14px; font-size: .95rem; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }
.nav-count { margin-left: 5px; font-size: .78rem; color: var(--orange-deep); font-variant-numeric: tabular-nums; }

/* 纸 */
#app { max-width: 1120px; margin: 0 auto; }
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 34px 38px 30px; box-shadow: 0 1px 0 #fff inset, 0 18px 40px -28px rgba(70, 50, 20, .45), 0 2px 6px -3px rgba(70, 50, 20, .25); position: relative; }
.sheet::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--rule-soft); border-radius: 2px; pointer-events: none; }
.sheet > * { position: relative; }
h1 { font-family: var(--serif-zh); font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; margin: 0; line-height: 1.3; }
h2 { font-family: var(--serif-zh); font-weight: 700; font-size: 1.08rem; letter-spacing: .08em; margin: 0; }
.eyebrow { font-size: .8rem; letter-spacing: .16em; color: var(--orange-deep); margin: 0 0 4px; }
.sub { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }

.btn { font: inherit; cursor: pointer; border-radius: 3px; padding: 9px 22px; border: 1px solid var(--rule); background: transparent; color: var(--ink); text-decoration: none; display: inline-block; letter-spacing: .06em; }
.btn:hover { border-color: var(--orange); color: var(--orange-deep); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fffaf3; font-weight: 600; }
.btn.primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fffaf3; }
.btn.small { padding: 4px 12px; font-size: .86rem; }
.btn.text { border-color: transparent; padding: 4px 8px; color: var(--ink-soft); font-size: .86rem; }
.btn.text:hover { color: var(--orange-deep); border-color: transparent; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* 两栏：左边内容，右边人物 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.guide { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bubble { align-self: stretch; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 12px 16px; font-family: var(--serif-zh); font-size: .98rem; line-height: 1.75; position: relative; min-height: 3.6em; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--sheet); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: translateX(-50%) rotate(45deg); }
.bubble[data-tone="ok"] { border-color: var(--orange); }
.bubble[data-tone="ok"]::after { border-color: var(--orange); }
.figure { position: relative; width: 100%; aspect-ratio: 705 / 1280; }
.figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; mix-blend-mode: multiply; opacity: 0; transition: opacity .25s ease; }
.guide[data-pose="warm"] .pose-warm, .guide[data-pose="calm"] .pose-calm { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .guide.hop .figure { animation: hop .42s ease-out; }
  .guide.sway .figure { animation: sway .5s ease-in-out; }
  @keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-12px); } 100% { transform: translateY(0); } }
  @keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 70% { transform: rotate(1.2deg); } }
}

/* 做题 */
.qs { list-style: none; margin: 0; padding: 0; }
.q { border-bottom: 1px solid var(--rule-soft); padding: 16px 0; }
.q:last-child { border-bottom: 0; }
.q-line { display: grid; grid-template-columns: 34px minmax(0, 1fr) 210px 64px; align-items: center; gap: 12px; margin: 0; }
.q-no { font-family: var(--serif-ja); color: var(--ink-soft); font-size: .95rem; font-variant-numeric: tabular-nums; }
.q.follow .q-no { font-family: var(--sans); font-size: .72rem; color: var(--orange-deep); letter-spacing: .04em; }
.q.follow { background: linear-gradient(to right, var(--orange-wash) 0, var(--orange-wash) 3px, transparent 3px); padding-left: 0; }
.q-ask { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--serif-ja); min-width: 0; }
.q-verb { font-size: 1.75rem; font-weight: 700; line-height: 2; position: relative; cursor: help; border-bottom: 2px dotted var(--orange); padding-bottom: 0; }
.q-verb::after { content: attr(data-tip); position: absolute; left: 0; top: 100%; margin-top: 6px; white-space: nowrap; background: var(--ink); color: var(--sheet); font-family: var(--sans); font-size: .82rem; font-weight: 400; line-height: 1.5; padding: 3px 10px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.q-verb:hover::after, .q-verb:focus::after { opacity: 1; }
/* 句子里的重点单词：橙色，鼠标放上去显示意思 */
.kw { position: relative; color: var(--orange-deep); cursor: help; }
.kw::after { content: attr(data-tip); position: absolute; left: 0; top: 100%; margin-top: 2px; white-space: nowrap; background: var(--ink); color: var(--sheet); font-family: var(--sans); font-size: .82rem; font-weight: 400; line-height: 1.5; padding: 3px 10px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.kw:hover::after, .kw:focus::after { opacity: 1; }
.q-arrow { color: var(--ink-soft); }
.q-form { color: var(--orange-deep); font-size: 1.12rem; font-weight: 700; letter-spacing: .04em; }
.q-input { font-family: var(--serif-ja); font-size: 1.2rem; width: 100%; padding: 7px 10px; border: 0; border-bottom: 1.5px solid var(--ink-soft); background: transparent; color: var(--ink); border-radius: 0; }
.q-input:focus { outline: none; border-bottom-color: var(--orange); background: var(--orange-wash); }
.q-input[readonly] { border-bottom-style: dashed; color: var(--ink-soft); }
.q[data-state="bad"] .q-input { text-decoration: line-through; text-decoration-color: var(--wrong); }
.q-side { display: flex; justify-content: flex-end; align-items: center; min-height: 34px; }
.mark { width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--serif-ja); font-size: 1.5rem; line-height: 1; }
.mark.ok { width: 30px; height: 30px; border: 3px solid var(--orange); border-radius: 50%; }
.mark.bad { color: var(--wrong); font-weight: 700; }
.q-explain { margin: 12px 0 2px 46px; padding: 12px 16px; background: var(--wrong-wash); border-left: 3px solid var(--wrong); border-radius: 0 3px 3px 0; display: flex; flex-direction: column; gap: 6px; }
.q-explain .ans { font-family: var(--serif-ja); font-size: 1.35rem; font-weight: 700; line-height: 2; }
.q-explain p { margin: 0; font-size: .95rem; }
.tag { display: inline-block; font-family: var(--serif-ja); font-size: .86rem; font-weight: 700; color: var(--orange-deep); border: 1px solid var(--rule); background: var(--sheet); border-radius: 3px; padding: 0 9px; line-height: 1.7; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--rule); margin-top: 8px; }
.hint { color: var(--ink-soft); font-size: .86rem; margin: 0; }

/* 选择题 */
.q { outline: none; }
.q.choice .q-line { grid-template-columns: 34px minmax(0, 1fr) 64px; align-items: start; row-gap: 10px; }
.q.choice .q-no { padding-top: 12px; }
.q.choice .q-side { grid-column: 3; grid-row: 1; padding-top: 6px; }
.q-body { display: contents; }
.q-sent { display: block; grid-column: 2; margin: 0; font-size: 1.32rem; font-weight: 500; line-height: 2.2; }
.q-sent .q-arrow, .q-sent .q-form, .q-sent .unchecked { margin-left: 12px; }
.opts { grid-column: 2 / 4; }
.q-sent .target { font-size: 1.75rem; font-weight: 700; line-height: 2; }
.q-sent .blank { color: var(--orange-deep); letter-spacing: -.1em; margin: 0 2px; }
.q-sent .fill, .q-explain .fill, .entry .fill { color: var(--orange-deep); font-weight: 700; border-bottom: 2px solid var(--orange); padding: 0 2px; margin: 0 2px; }
.unchecked { display: inline-block; vertical-align: middle; font-family: var(--sans); font-size: .7rem; font-weight: 400; color: var(--ink-soft); border: 1px dashed var(--rule); border-radius: 3px; padding: 0 6px; line-height: 1.7; cursor: help; }
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opt { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 4px 10px; font-family: var(--serif-ja); font-size: 1.12rem; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; text-align: left; line-height: 1.9; }
.opt kbd { flex: none; font-family: var(--sans); font-size: .72rem; color: var(--ink-soft); border: 1px solid var(--rule-soft); border-radius: 3px; width: 18px; height: 18px; display: grid; place-items: center; line-height: 1; }
.opt:hover:not(:disabled) { border-color: var(--orange); background: var(--orange-wash); }
.opt:disabled { cursor: default; color: var(--ink-soft); }
.opt.right { border-color: var(--orange); background: var(--orange-wash); color: var(--ink); font-weight: 700; }
.opt.wrong { border-color: var(--wrong); color: var(--wrong); text-decoration: line-through; }
.q.current .q-no { color: var(--orange-deep); font-weight: 700; }
.q-more { display: flex; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.q-acts { display: flex; gap: 4px; }
.reports { grid-template-columns: minmax(0, 1fr); }
.reports li span:first-child { white-space: normal; }
.btn.more { font-size: .78rem; padding: 0 6px; }
.q-explain .tags { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.section { margin-top: 34px; }
.section-head { display: flex; align-items: baseline; gap: 10px; }
.section-head .kind { font-size: .74rem; color: var(--orange-deep); border: 1px solid var(--orange); border-radius: 3px; padding: 0 7px; line-height: 1.6; }
.section > .note { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 0; }
.section .group { margin-top: 16px; }
.point.pending { color: var(--ink-soft); }
.point.pending .title { font-weight: 400; }
.point.pending .status { border-style: dashed; }
.entry .verbs { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* 今天 */
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 6px; border: 1px solid var(--rule); border-radius: 3px; }
.tally div { padding: 14px 18px; border-right: 1px solid var(--rule-soft); }
.tally div:last-child { border-right: 0; }
.tally dt { font-size: .82rem; color: var(--ink-soft); letter-spacing: .08em; }
.tally dd { margin: 2px 0 0; font-family: var(--serif-ja); font-size: 1.9rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tally dd small { font-family: var(--sans); font-size: .82rem; font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.block { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { font-family: var(--serif-ja); font-size: .9rem; border: 1px solid var(--rule); border-radius: 3px; padding: 1px 10px; background: var(--sheet); }
.chips li b { color: var(--orange-deep); margin-right: 6px; }

/* 目录 */
.group { margin-top: 26px; }
.group-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.group-head .count { font-size: .82rem; color: var(--ink-soft); }
.points { list-style: none; margin: 0; padding: 0; }
.point { display: grid; grid-template-columns: 76px minmax(0, 1.1fr) minmax(0, 1fr) 96px 68px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.point .title { font-family: var(--serif-ja); font-weight: 700; }
.point .eg { font-family: var(--serif-ja); color: var(--ink-soft); font-size: .95rem; }
.point .when { font-size: .82rem; color: var(--ink-soft); }
.status { font-size: .78rem; letter-spacing: .06em; border-radius: 3px; padding: 1px 0; text-align: center; border: 1px solid var(--rule); color: var(--ink-soft); }
.status.learning { border-color: var(--orange); color: var(--orange-deep); }
.status.mastered { background: var(--orange); border-color: var(--orange); color: #fffaf3; }
.locked { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); }
.locked .note { font-size: .82rem; color: var(--ink-soft); }
.plain { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 24px; }
.plain li { font-size: .9rem; padding: 4px 0; border-bottom: 1px dotted var(--rule-soft); display: flex; gap: 10px; justify-content: space-between; }
.plain li span:first-child { font-family: var(--serif-ja); font-weight: 500; white-space: nowrap; }
.plain li span:last-child { color: var(--ink-soft); font-size: .82rem; text-align: right; }

/* 错题清单、设置 */
.entry { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; }
.entry .verbs { font-family: var(--serif-ja); font-size: 1.15rem; line-height: 2.1; }
.entry .meta { font-size: .82rem; color: var(--ink-soft); }
.entry .acts { display: flex; gap: 6px; align-items: center; }
.empty { padding: 36px 0 20px; color: var(--ink-soft); text-align: center; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.row p { margin: 2px 0 0; color: var(--ink-soft); font-size: .9rem; }
.notice { font-size: .9rem; color: var(--orange-deep); min-height: 1.6em; margin: 12px 0 0; }

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .guide { position: static; flex-direction: row-reverse; align-items: flex-end; }
  .figure { width: 120px; flex: none; }
  .bubble::after { display: none; }
  .sheet { padding: 24px 20px; }
  .q-line, .q.choice .q-line { grid-template-columns: 28px minmax(0, 1fr) 44px; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-input { grid-column: 2 / 3; }
  .q-ask { grid-column: 2 / 4; }
  .q-explain { margin-left: 0; }
  .point { grid-template-columns: 70px minmax(0, 1fr) 64px; }
  .point .eg, .point .when { display: none; }
  .tally { grid-template-columns: minmax(0, 1fr); }
  .tally div { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
}