/* Fourth pass: every draft is its own page. Only the reset, the download window and the draft label are shared. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: "Source Han Sans SC", "思源黑体", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; overflow-x: hidden; line-height: 1.5; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; border: 0; background: none; outline: 0; }
button { cursor: pointer; }
.num { font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }

/* parts come in as they are reached; a page may restyle .rv, the script only adds .on */
.rv { opacity: 0; translate: 0 40px; transition: opacity .9s, translate .9s cubic-bezier(.2, .8, .2, 1); }
.rv.on { opacity: 1; translate: 0 0; }

.mark { position: fixed; left: 16px; bottom: 16px; z-index: 999; display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, .78); color: #fff; padding: 8px 8px 8px 16px; border-radius: 999px; font-size: 13px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mark a { background: #fff; color: #000; padding: 5px 12px; border-radius: 999px; font-weight: 700; }

/* the download window; a page sets --dl-bg, --dl-fg, --dl-acc, --dl-r to match itself */
dialog.dl { border: 0; border-radius: var(--dl-r, 32px); padding: 40px; width: 440px; margin: auto; background: var(--dl-bg, #14161d); color: var(--dl-fg, #fff); text-align: center; }
dialog.dl::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
dialog.dl[open] { animation: dl-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dl-in { from { opacity: 0; scale: .94; } }
dialog.dl img { width: 76px; margin: 0 auto 16px; }
dialog.dl b { font-size: 24px; font-weight: 900; display: block; }
dialog.dl p { opacity: .6; margin-top: 8px; font-size: 14px; }
dialog.dl .pg { height: 8px; border-radius: 4px; background: rgba(128, 128, 128, .25); margin: 26px 0 12px; overflow: hidden; }
dialog.dl .pg i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--dl-acc, #7c8cff); transition: width 2.2s cubic-bezier(.3, .7, .2, 1); }
dialog.dl small { opacity: .6; display: block; min-height: 20px; font-size: 13px; }
dialog.dl .dlb { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
dialog.dl .dlb button { height: 46px; padding: 0 26px; border-radius: 23px; font-weight: 700; background: var(--dl-acc, #7c8cff); color: var(--dl-accfg, #000); }
dialog.dl .dlb button + button { background: rgba(128, 128, 128, .22); color: inherit; }