/* 看见 — one question at a time, a lot of empty paper. Same paper, ink and cinnabar as dongyidong.cn. */
:root {
  --paper: #ecebe7; --paper-2: #e2e1dc; --ink: #111; --ink-2: #333331; --ink-3: #6b6a65;
  --line-soft: #c9c8c2; --red: #c23a22;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #141413; --paper-2: #1c1c1a; --ink: #ecebe7; --ink-2: #c9c8c2; --ink-3: #8b8a85; --line-soft: #3a3a37; --red: #e2644c; }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  font: 400 17px/1.8 var(--serif); -webkit-font-smoothing: antialiased; }
p { margin: 0; }
button, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.page { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: max(12vh, 56px) 28px 40px; }
.step { display: grid; gap: 26px; justify-items: start; animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* the door */
.title { margin: 0; display: flex; gap: .12em; font: 900 clamp(56px, 17vw, 92px)/1 var(--serif); letter-spacing: .04em; }
.title span:nth-child(2) { color: var(--red); }
.lede { font-size: 20px; line-height: 1.9; }
.fine { font: 12.5px/1.9 var(--sans); color: var(--ink-3); letter-spacing: .04em; }

/* questions */
.ask { font: 700 clamp(26px, 7.4vw, 34px)/1.55 var(--serif); text-wrap: balance; }
.echo { font-size: 16px; color: var(--ink-3); line-height: 1.9; }
.echo b, .say b { font-weight: 700; color: var(--ink); }
.hint { font: 13.5px/1.8 var(--sans); color: var(--ink-3); }
.body { font-size: 19px; line-height: 1.95; }
.body em, .say em { font-style: normal; color: var(--red); }

/* fill in the blank */
.fill { display: grid; gap: 4px; width: 100%; }
.fill__pre { font: 700 22px/1.6 var(--serif); color: var(--red); }
.fill textarea { width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent;
  font: 400 22px/1.6 var(--serif); resize: none; overflow: hidden; }
.fill textarea:focus { outline: none; border-bottom: 2px solid var(--red); padding-bottom: 9px; }
.fill textarea::placeholder { color: var(--line-soft); }

.btn { min-height: 48px; padding: 0 30px; border: 1px solid var(--ink); background: transparent; font: 15px/1 var(--sans); letter-spacing: .3em; cursor: pointer;
  transition: background .2s, color .2s, opacity .3s; }
.btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: .25; cursor: default; }
.btn--quiet { border-color: var(--line-soft); color: var(--ink-3); }
.btn--late { animation: late 1s 5.2s both; }           /* appears after the sentence has had its silence */
@keyframes late { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.choices { display: flex; flex-wrap: wrap; gap: 12px; }
.linkish { border: 0; background: none; padding: 6px 0; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font: inherit; }

/* the sentence, said slowly */
.step--say { gap: 34px; padding-top: 4vh; }
.say { display: grid; gap: .25em; font: 400 clamp(27px, 8vw, 38px)/1.6 var(--serif); }
.say__line { opacity: 0; animation: speak 1.4s var(--d) both; }
.say em { font-weight: 900; }
@keyframes speak { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.say__after { animation: late 1s 4.4s both; }

/* the end: almost nothing */
.step--end { min-height: 46vh; align-content: end; }
.end__fine { animation: late 1.2s 2.5s both; }

.foot { padding: 20px 28px calc(env(safe-area-inset-bottom, 0px) + 22px); text-align: center; font: 11px/1 var(--mono); letter-spacing: .12em; }
.foot a { color: var(--ink-3); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .step, .say__line, .btn--late, .say__after, .end__fine { animation-duration: .01s; animation-delay: 0s; } }