:root { color-scheme: light; background: #eeece4; color: #302f29; font-family: "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { max-width: 1060px; margin: 0 auto; padding: 54px 56px 100px; }
a { cursor: default; color: #646459; text-decoration: none; font-size: 12px; letter-spacing: .08em; }
a:hover { color: #27271f; }
header { padding-bottom: 48px; border-bottom: 1px solid #c9c8ba; }
h1 { margin: 64px 0 16px; font: 400 clamp(34px,5vw,54px)/1.3 "Songti SC", "STSong", Georgia, serif; letter-spacing: .08em; }
header p, .meta { color: #797b6d; font-size: 11px; line-height: 1.9; letter-spacing: .04em; }
#wall { display: grid; grid-template-columns: 1fr 1fr; column-gap: 66px; }
.receipt { padding: 42px 0 28px; border-bottom: 1px solid #cfcec2; break-inside: avoid; display: flex; flex-direction: column; align-items: flex-start; }
.sentence { margin: 0 0 20px; font-family: "Songti SC", "STSong", Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.8; overflow-wrap: break-word; }
.sentence[lang="en"] { font-size: 19px; line-height: 1.7; color: #595a50; }
.system { font-family: "PingFang SC", ui-monospace, monospace; font-weight: 300; color: #898d84; }
.meta { margin-top: auto; padding-top: 16px; }
.marks { display: flex; gap: 8px; margin: 6px 0 16px; color: #868578; }
.sigil { width: 30px; height: 30px; stroke: currentColor; stroke-width: .9; }
button { background: none; color: #737367; border: 0; border-bottom: 1px solid #c4c4b6; font: 11px/1.6 system-ui,sans-serif; padding: 4px 0; cursor: default; }
button:hover { color: #25271e; border-color: #737367; }
a:focus-visible, button:focus-visible { outline: 1px solid #686b58; outline-offset: 5px; }
@media (max-width:680px) {
  body { padding: 28px 28px 70px; }
  h1 { margin-top: 42px; }
  header { padding-bottom: 28px; }
  #wall { grid-template-columns: 1fr; }
  .receipt { padding-top: 32px; }
  .sentence { font-size: 25px; }
}
@media print {
  :root { background: white; color: black; }
  body { padding: 0; max-width: 600px; }
  #wall { display: block; }
  header, button, .receipt:not(.printing) { display: none; }
  .receipt { border: none; padding: 16px; }
  .system { color: #777; }
}

.sentence[lang="en"] .voice + .system { margin-inline-start: .12em; }

.wall-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.language-switch { display: flex; align-items: center; gap: 2px; font: 11px/1 system-ui,sans-serif; color: #9c9e92; }
.language-switch button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; color: #818477; letter-spacing: .06em; }
.language-switch button[aria-pressed="true"] { color: #302f29; }
.language-switch button:hover { color: #15160f; }
html[lang="en"] .sentence[lang="en"] { font-size: 28px; color: #302f29; }
html[lang="en"] .sentence[lang="zh"] { font-size: 19px; color: #595a50; }
@media (max-width:680px) { html[lang="en"] .sentence[lang="en"] { font-size: 25px; } }