/* fonts: sans-400 sans-700 */
/* The site's look, 暗室 in motion (30 Oct 2026, Ken: "cool and modern motion design. minimal vertical scrolling.
   minimal text. remove seal and name on top left and bottom left. find cooler ways to show the avatar/seal"): a dark
   room where the stills are the light, in the colours of 大唐名媛's avatar (her ink, her paper, her red). Every page
   is one screen and nothing scrolls down: a list is a reel of stills sideways, the one in the middle in focus, its
   title set large under it; a still grows into the work's view. Her round avatar sits in the middle of the top with
   the tabs after her and is About, where Ken's seal draws itself over the links; nothing stands at the back of the
   pages (Ken, 30 Oct: "actually remove the seal in bg"). One family, Noto Sans SC, sets every word (Ken, 2 Nov 2026:
   "unify fonts"; the titles were in Noto Serif SC Black until then, in git at 511c69e). The motion lives in
   site/site.js; here are its resting states and the entrances every page plays as it opens. */
:root {
  --bg: #0f0c0a; --raise: #1c1714; --ink: #f6e7d0; --soft: #c9b8a0; --muted: #85786b; --line: rgba(246, 231, 208, .16);
  --cream: #fde5c1; --seal: #c8414f;
  --sans: "DTM Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.7, 0, .2, 1); --out: cubic-bezier(.16, 1, .3, 1);
  --face: 48px; --pill: 36px; --bar: calc(var(--gut) * 2 + var(--face)); --cap: 136px; --gut: 18px; --side: 12px;
  /* a reel's slide: at most --bw wide and --boxh high, at its own shape (cq: the reel's size) */
  --bw-tall: 74cqw; --bw-wide: 90cqw; --boxh: 92cqh; --gap: 5cqw;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); height: 100%; }
body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; -webkit-user-drag: none; user-select: none; }
p, h1, h2, figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* the English beside its Chinese, everywhere: small capitals, spaced (the space after the last letter taken back) */
.en { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .18em; margin-right: -.18em; text-transform: uppercase; }
/* where a Chinese label and its English sit side by side (the tabs, the links out), the English is centred on the
   Chinese rather than set on its baseline (Ken, 2 Nov 2026: "vertically aligned translations"; stacked under it was
   tried, daa3523, and he kept this: "use the previous one (before stacking)") */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.magnet { translate: var(--mx, 0px) var(--my, 0px); }

/* ── the bar: the dock in the middle of the top (Ken, 2 Nov 2026: "try have the avatar and tabs in the middle on top.
   design new styles for tabs that match the avatar/rest of ui", then "make the tabs on one side since there will be
   more in the future" and "make the capsules concave on the left and convex on the right"). Her avatar heads a row
   of tabs, each a capsule hollowed on the left round whatever comes before it (her, or the tab before) and rounded
   on the right, a gap of --g between, ringed like the round buttons. Every tab has the one shape (Ken, 2 Nov 2026:
   "unify curvatures of tab capsules"): its round end a circle of --r, its hollow a circle of --r + --g, which is
   the tab before's end grown by the gap, and round her the same hollow, set --g from her on the middle line. The
   open tab is lit in her cream, its words dark on it as her hair is on hers, and the light glides from tab to tab
   (site.js), from page to page too, out of her when coming from About and back into her when going there; the words
   cut through it (difference), so they turn dark where it passes. On About her place is ringed in red. The bar is
   the avatar's height with a gutter above and below. While a work is open the tabs fold back under her and she
   fades, and they come out of her again on the way back (site.js sets body.is-open) ── */
@property --cx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--bar); display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); animation: drop .9s var(--out) .1s backwards; transition: visibility 0s; }
.dock { --r: calc(var(--pill) / 2); --g: 6px; position: relative; display: flex; align-items: center; }
/* the tabs run in a strip that starts under her middle; the light rides in it too */
.strip { position: relative; z-index: 1; display: flex; align-items: center; margin-left: calc(var(--face) / -2); transition: opacity .6s ease .5s, translate 1s var(--out) .5s; }
/* a tab's shape: square on the left but for the hollow, a circle of --cr round --cx (on the tab's middle line);
   round on the right */
.tab { position: relative; height: var(--pill); display: inline-flex; align-items: center; gap: 7px; padding: 0 calc(var(--r) * .9) 0 calc(var(--cx) + var(--cr) + 14px); font-size: 15px; white-space: nowrap; color: var(--muted); transition: color .35s ease; }
.tab:first-child { --cr: calc(var(--r) + var(--g)); --cx: calc(var(--face) / 2 - var(--r)); }
.tab + .tab { margin-left: calc(var(--g) - var(--r)); --cx: calc(var(--g) * -1); --cr: calc(var(--r) + var(--g)); }
.tab::before, .tab::after, .dock-light { -webkit-mask: radial-gradient(circle var(--cr) at var(--cx) 50%, #0000 calc(var(--cr) - .5px), #000 var(--cr)); mask: radial-gradient(circle var(--cr) at var(--cx) 50%, #0000 calc(var(--cr) - .5px), #000 var(--cr)); }
.tab::before, .tab::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--line); }
.tab::after { inset: 1px; border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0; background: var(--raise); --cx: inherit; --cr: inherit; transition: background .35s ease; }
.tab::after { -webkit-mask: radial-gradient(circle calc(var(--cr) + 1px) at calc(var(--cx) - 1px) 50%, #0000 calc(var(--cr) + .5px), #000 calc(var(--cr) + 1px)); mask: radial-gradient(circle calc(var(--cr) + 1px) at calc(var(--cx) - 1px) 50%, #0000 calc(var(--cr) + .5px), #000 calc(var(--cr) + 1px)); }
.tab::before { --cx: inherit; --cr: inherit; }
.tab > span { position: relative; z-index: 2; mix-blend-mode: difference; }
.tab .en { display: none; color: inherit; opacity: .8; }
.tab[aria-current] { color: var(--cream); }
/* the dock's hovers only where there is a pointer that hovers: on a phone a tap would leave them on */
@media (hover: hover) {
  .tab:hover { color: var(--cream); }
  .tab:hover::after { background: #241e1a; }
  .me:hover .me-face { transform: scale(1.1) rotate(-10deg); box-shadow: 0 0 0 1px var(--cream), 0 0 28px rgba(253, 229, 193, .35); }
  .me:hover .me-words { opacity: 1; translate: -50% 0; }
}
.dock-light { position: absolute; z-index: 1; left: 0; top: calc(50% - var(--pill) / 2); width: 0; height: var(--pill); border-radius: 0 var(--r) var(--r) 0; background: var(--cream); transition: transform .75s var(--ease), width .75s var(--ease), --cx .75s var(--ease), --cr .75s var(--ease), opacity .4s ease; }
/* without the script the open tab is simply lit */
.dock:not(.glide) .tab[aria-current]::after { background: var(--cream); }
.dock:not(.glide) .tab[aria-current] > span { mix-blend-mode: normal; color: var(--bg); }
.me { position: relative; z-index: 3; flex: none; width: var(--face); height: var(--face); border-radius: 50%; transition: translate .6s var(--out), box-shadow .4s ease, opacity .6s ease .36s, scale .9s var(--out) .36s; }
.me[aria-current] { box-shadow: 0 0 0 1px var(--seal); }
.me-face { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(253, 229, 193, .22); transition: transform .7s var(--out), box-shadow .4s ease, opacity .4s ease; }
/* About's words wait under her and come up on hover */
.me-words { position: absolute; left: 50%; top: calc(100% + 16px); display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--soft); opacity: 0; translate: -50% -6px; pointer-events: none; transition: opacity .3s ease, translate .5s var(--out); }
.me:focus-visible .me-words { opacity: 1; translate: -50% 0; }


/* ── a list: the reel and its caption ───────────────────────────────────── */
.room { position: fixed; inset: var(--bar) 0 0 0; display: flex; flex-direction: column; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.reel { flex: 1; min-height: 0; container-type: size; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; outline: none; transition: opacity .6s var(--ease); }
.reel::-webkit-scrollbar { display: none; }
.reel.free { scroll-snap-type: none; }
.track { position: relative; list-style: none; margin: 0; height: 100%; width: max-content; display: flex; align-items: center; gap: var(--gap);
  --w0: min(var(--bw0), calc(var(--boxh) * var(--ar0))); --wn: min(var(--bwn), calc(var(--boxh) * var(--arn)));
  padding: 0 calc(50cqw - var(--wn) / 2) 0 calc(50cqw - var(--w0) / 2); }
.slide { --bw: var(--bw-tall); flex: none; width: min(var(--bw), calc(var(--boxh) * var(--ar))); aspect-ratio: var(--ar); scroll-snap-align: center; transform: scale(calc(1 - var(--a, 0) * .12)); }
.slide.wide { --bw: var(--bw-wide); }
.frame { position: relative; display: block; width: 100%; height: 100%; animation: rise 1.2s var(--out) both; animation-delay: calc(.12s + var(--i) * .07s); }
.pic { position: absolute; inset: 0; overflow: hidden; background: var(--raise); animation: wipe 1.3s var(--ease) both; animation-delay: calc(.05s + var(--i) * .07s); }
/* the still drifts against the reel and comes forward as it nears the middle (--d, --a: site.js) */
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(calc(var(--d, 0) * -6%)) scale(calc(1 + var(--a, 0) * .14)); }
.pic::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: calc(var(--a, 0) * .6); pointer-events: none; }
.list { justify-content: center; }
.list .reel { flex: 0 1 122vw; }
.caption { flex: none; height: var(--cap); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px var(--gut) 0; transition: opacity .5s var(--ease); }
.caption > * { animation: rise .9s var(--out) .45s both; --rise: 24px; }
/* a title, large: the Chinese in bold, the English small and spaced under it; a new one rolls up into place
   (site.js) */
.headline { display: grid; overflow: hidden; min-width: 0; font-weight: 400; }
.headline .rl { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 5px; }
.headline .zh { font: 700 24px/1.2 var(--sans); letter-spacing: .04em; color: var(--ink); }
.headline .en { line-height: 1.5; }
.count { flex: none; display: flex; align-items: center; gap: 12px; margin-top: 9px; font: 400 11px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--muted); }
.count-i { display: grid; overflow: hidden; color: var(--ink); }
.count-i .rl { grid-area: 1 / 1; }
.count-bar { position: relative; width: 56px; height: 1px; background: var(--line); }
.count-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 1) * 100%); background: var(--ink); }

/* ── a work's view: over the reel on a list (site.js), or a page of its own. It has the whole screen: the bar steps
   away while it is open (Ken, 2 Nov 2026: "when click on a work, hide the top avatar/tabs, so the images can be
   larger. remove cross and arrow buttons. add minus on cursor if on image to go back to gallery") ── */
.sheet { position: absolute; z-index: 20; inset: 0; touch-action: pinch-zoom; }
.list .sheet { position: fixed; }
.room.solo { inset: 0; }
.page-work .bar { display: none; }
body.is-open .bar { visibility: hidden; pointer-events: none; transition: visibility 0s .6s; }
body.is-open .strip { opacity: 0; translate: calc(var(--pill) * -.8) 0; transition: opacity .28s ease, translate .5s var(--ease); }
body.is-open .me { opacity: 0; scale: .7; transition: translate .6s var(--out), box-shadow .4s ease, opacity .3s ease .1s, scale .5s var(--ease) .1s; }
.sheet[hidden], .detail[hidden] { display: none; }
.detail { position: absolute; inset: 0; display: flex; flex-direction: column; }
.d-stage { flex: 1; min-height: 0; margin: calc(var(--gut) + env(safe-area-inset-top, 0px)) var(--side) 0; container-type: size; display: grid; place-items: center; }
.d-art { position: relative; width: min(100cqw, calc(100cqh * var(--ar))); aspect-ratio: var(--ar); overflow: hidden; background: var(--raise); }
.d-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-info { flex: none; min-height: var(--cap); display: flex; flex-direction: column; gap: 10px; padding: 16px var(--gut) 22px; }
.d-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: 12px; line-height: 1.5; color: var(--soft); }
.d-credits span + span::before { content: "·"; margin: 0 .55em; color: var(--muted); }
.d-out { display: inline-flex; gap: 14px; }
.d-out a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.d-out a .en { display: none; }
.d-out a:hover .zh { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.arrow { color: var(--muted); }
/* the still is the way back: pressing it closes the view (a minus on the cursor, site.js) */
.d-back { position: absolute; inset: 0; z-index: 1; cursor: zoom-out; }
html.has-cursor .d-back { cursor: none; }
.d-info .count { display: none; }
/* round buttons: close, the work before and after; only for the keyboard now, seen when it reaches them */
.x, .step { position: absolute; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(15, 12, 10, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: 16px; cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease, opacity .5s var(--ease), transform .6s var(--out), translate .6s var(--out); }
.x:hover, .step:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.x { top: 10px; right: var(--gut); }
.x::before, .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: currentColor; transform: rotate(45deg); transition: transform .6s var(--out); }
.x::after { transform: rotate(-45deg); }
.x:hover::before { transform: rotate(135deg); }
.x:hover::after { transform: rotate(45deg); }
.step { top: 10px; }
.step.prev { left: var(--gut); }
.step.next { left: calc(var(--gut) + 52px); }
.step[disabled] { opacity: .25; pointer-events: none; }
.x:not(:focus-visible), .step:not(:focus-visible) { opacity: 0 !important; pointer-events: none; }
/* the full video: a round button in the still's corner, off the face, which becomes Bilibili's player when pressed
   (site.js); its ring calls three times, then rests */
.play { position: absolute; z-index: 2; left: 16px; bottom: 16px; width: 64px; height: 64px; border-radius: 50%; background: rgba(15, 12, 10, .5); border: 1px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .35s ease, transform .6s var(--out), translate .6s var(--out), opacity .5s ease; }
.play::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); animation: ping 2.2s var(--out) 1.2s 3 both; pointer-events: none; }
.play:hover { background: var(--cream); transform: scale(1.08); }
.play-icon { position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; transition: border-color .35s ease; }
.play:hover .play-icon { border-left-color: var(--bg); }
.play .zh, .play .en { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-art .player { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
/* a still in flight between the reel and its view (site.js) */
.ghost { position: fixed; z-index: 25; overflow: hidden; transform-origin: 0 0; pointer-events: none; background: var(--raise); }
.ghost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* on a list, with the script: the view opens over the reel, which steps back */
body.is-open .reel { opacity: 0; pointer-events: none; }
body.is-open .caption .headline, body.is-open .caption .count { opacity: 0; transition: opacity .15s ease; }
html.js .list .detail .d-info > * { opacity: 0; transform: translateY(18px); transition: opacity .25s ease, transform .4s var(--ease); }
html.js .list .detail.on .d-info > * { opacity: 1; transform: none; transition: opacity .6s ease .3s, transform 1s var(--out) .3s; }
html.js .list .detail.on .d-info > .d-meta { transition-delay: .42s; }
html.js .list .detail .play { opacity: 0; transform: scale(.4); }
html.js .list .detail.on .play { opacity: 1; transform: none; transition: background .35s ease, transform .9s var(--out) .55s, translate .6s var(--out), opacity .4s ease .55s; }
html.js .list .detail.on .play:hover { transform: scale(1.08); transition-delay: 0s; }

/* a work's own page: the still unveils, the words rise */
.solo .d-art { animation: wipe 1.2s var(--ease) both; }
.solo .d-art img { animation: settle 1.8s var(--out) both; }
.solo .d-info > * { animation: rise 1s var(--out) .4s both; --rise: 18px; }
.solo .x, .solo .step { animation: pop .9s var(--out) .6s both; }

/* leaving for another page (site.js): the room steps back */
body.leaving .room { opacity: 0; transform: scale(.985); }
body.leaving .dock-light { opacity: .5; }
/* moving between the rooms in place (site.js): the one going takes no presses; a list opened in place comes in sideways
   (site.js) instead of playing the entrances again */
.room[hidden] { display: none; }
.room.away { pointer-events: none; }
.room.been .frame, .room.been .pic, .room.been .caption > * { animation: none; }

/* ── About: Ken's seal, drawing itself (site.js), and the links under it, in the middle of the screen (Ken, 2 Nov
   2026: "in about page, don't enlarge the avatar. just the seal, and urls below it") ── */
.aboutpage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 0 28px var(--bar); }
.sealmark { position: relative; flex: none; width: 128px; height: 128px; color: var(--seal); }
.sealmark svg, .sealmark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sealmark.drawing svg { opacity: 0; }
.out { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; }
.aboutpage .out { animation: rise 1s var(--out) 1.2s both; --rise: 12px; }
.out a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.out a:hover .zh { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nf { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.notfound .sealmark { width: 88px; height: 88px; }
.notfound .out { animation: rise 1s var(--out) .3s both; --rise: 12px; }

/* ── the cursor over the reel, on a computer (site.js) ──────────────────── */
html.has-cursor .reel, html.has-cursor .reel a { cursor: none; }
body.dragging, body.dragging .reel, body.dragging .reel a { cursor: grabbing; }
.cursor { position: fixed; z-index: 90; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.cursor i { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; background: var(--cream); transform: scale(0); transition: transform .5s var(--out), background .3s ease; }
.cursor b { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; display: grid; place-items: center; font: 400 22px/1 var(--sans); color: var(--bg); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .5s var(--out); }
.cursor.dot i { transform: scale(.1); }
.cursor.open i, .cursor.go i { transform: scale(1); }
.cursor.go i { transform: scale(.72); background: rgba(253, 229, 193, .85); }
.cursor.drag i { transform: scale(.5); }
.cursor.open b, .cursor.go b, .cursor.drag b { opacity: 1; transform: none; }
.cursor.drag b { font-size: 16px; }

/* ── the entrances ──────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 48px)); } }
@keyframes wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* ── wide screens ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --face: 64px; --pill: 44px; --cap: 140px; --gut: 40px; --side: 40px; --bw-tall: 76cqw; --bw-wide: 76cqw; --boxh: min(92cqh, calc(76cqw / 1.7778)); --gap: 3cqw; }
  .tab .en { display: inline; }
  .caption { padding-top: 22px; }
  .headline .zh { font-size: 40px; }
  .headline .en { font-size: 11px; }
  .count { margin-top: 18px; }
  .count-bar { width: 96px; }
  .d-info { flex-direction: row; align-items: flex-start; gap: 40px; padding-top: 22px; }
  .d-info .headline { flex: none; max-width: 52%; padding-right: 0; }
  .d-meta { flex-direction: column; gap: 6px; margin-top: 9px; max-width: 360px; font-size: 13px; }
  .d-out a .en { display: inline; }
  .solo .d-info .count { display: flex; margin-left: auto; }
  body.is-open .caption .count { opacity: 1; }
  .list { justify-content: flex-start; }
  .list .reel { flex: 1 1 0; }
  .d-info { height: var(--cap); min-height: 0; padding-bottom: 0; }
  .x, .step { width: 56px; height: 56px; font-size: 18px; }
  .x { top: 12px; right: var(--gut); }            /* under the avatar, as the arrows are in line with the bar */
  .step { top: calc((100% - var(--cap)) / 2); margin-top: -28px; }
  .step.prev { left: var(--gut); }
  .step.next { left: auto; right: var(--gut); }
  .play { left: 22px; bottom: 22px; width: 76px; height: 76px; }
  .play-icon { margin: -12px 0 0 -6px; border-width: 12px 0 12px 20px; }
  .aboutpage { gap: 36px; }
  .sealmark { width: 168px; height: 168px; }
  .out { font-size: 15px; }
  .notfound .sealmark { width: 112px; height: 112px; }
}
/* a phone on its side: the buttons by the still, About in a row */
@media (orientation: landscape) and (max-width: 899px) {
  :root { --cap: 100px; --side: 18px; }
  .headline .zh { font-size: 20px; }
  .step { top: calc((100% - var(--cap)) / 2); margin-top: -22px; }
  .step.prev { left: 14px; }
  .step.next { left: auto; right: 14px; }
  .aboutpage { gap: 20px; padding-bottom: calc(var(--bar) / 2); }
  .sealmark { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .slide, .pic img { transform: none !important; }
}