/*! Shuyan Labs · 显影 Render · 字体 Recursive © 2020 The Recursive Project Authors (Arrow Type)，SIL OFL 1.1，许可见 /licenses/OFL-Recursive.txt；图标 Lucide（ISC）、Octicons（MIT），许可见 /licenses/ */
@font-face { font-family: "SL Recursive"; src: url("/assets/fonts/recursive.c8e0135704.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "SL Recursive Canvas"; src: url("/assets/fonts/recursive-canvas.f693117290.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: block; }
.dir-c {
  color-scheme: dark;
  --screen: oklch(0.165 0.004 270);
  --bg-1: oklch(0.210 0.005 270);
  --bg-2: oklch(0.240 0.006 270);
  --n-1: oklch(0.262 0.006 270);
  --n-2: oklch(0.292 0.007 270);
  --n-3: oklch(0.326 0.007 270);
  --n-4: oklch(0.338 0.007 270);
  --n-5: oklch(0.415 0.008 270);
  --n-6: oklch(0.575 0.009 270);
  --n-7: oklch(0.615 0.009 270);
  --n-8: oklch(0.680 0.009 270);
  --n-9: oklch(0.790 0.007 270);
  --n-10: oklch(0.972 0.003 270);
  --accent: #CDF450;
  --accent-hover: #DAFB84;
  --accent-active: #BDE33A;
  --accent-ink: var(--screen);
  --focus: var(--accent);
  --selection: var(--accent);
  --selection-ink: var(--accent-ink);
  --scrim: rgb(0 0 0 / .6);
  --brand-github: #FFFFFF;
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-sans: "SL Recursive", var(--font-cjk);
  --font-display: "SL Recursive", var(--font-cjk);
  --font-mono: "SL Recursive", ui-monospace, "SF Mono", Menlo, Consolas, var(--font-cjk), monospace;
  --font-ui: var(--font-mono);
  --t-display: 600 40px/1.2 var(--font-sans);
  --t-title-1: 600 44px/1.2 var(--font-sans);
  --t-title-2: 600 30px/1.3 var(--font-sans);
  --t-title-3: 600 18px/28px var(--font-sans);
  --t-lede: 400 19px/1.75 var(--font-sans);
  --t-body-l: 400 17px/1.75 var(--font-sans);
  --t-body: 400 15px/1.75 var(--font-sans);
  --t-body-s: 400 14px/1.7 var(--font-sans);
  --t-mono: 450 13px/20px var(--font-mono);
  --t-label: 500 13px/20px var(--font-mono);
  --t-label-s: 500 12px/16px var(--font-mono);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px;
  --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;
  --r-1: 2px; --r-2: 4px; --r-3: 4px; --r-pill: 2px;
  --stroke-hair: 1px; --stroke-control: 1px; --stroke-focus: 2px; --icon-stroke: 1.5px;
  --elev-1: var(--bg-2); --elev-2: var(--n-1); --elev-3: var(--n-1);
  --z-header: 10; --z-toolbar: 20; --z-sheet: 40; --z-dialog: 50; --z-toast: 60; --z-tooltip: 70;
  --d-instant: 80ms;
  --d-fast: 180ms;
  --d-base: 240ms;
  --d-enter: 400ms;
  --d-slow: 480ms;
  --d-expressive: 800ms;
  --d-lead: 80ms;
  --d-stagger: 70ms;
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --ease-step: steps(4, end);
  --ease-scan: steps(12, end);
  --gutter: 48px;
  --container: 1240px;
  --header-h: 64px;
  --t-hero: 600 60px/1.3 var(--font-sans);
  --t-hero-s: 600 40px/1.35 var(--font-sans);
  --surface-detail: var(--bg-2);
  --detail-w: 1040px;
  --d-morph: 520ms;
  --d-step: 40ms;
  --d-fade: 90ms;
  --ease-morph: cubic-bezier(.2, 0, 0, 1);
}
@media (max-width: 1023px) { .dir-c { --gutter: 32px; } }
@media (max-width: 599px) {
  .dir-c {
    --gutter: 20px;
    --header-h: 56px;
    --t-display: 600 32px/1.25 var(--font-sans);
    --t-title-1: 600 32px/1.25 var(--font-sans);
    --t-title-2: 600 24px/1.35 var(--font-sans);
    --t-lede: 400 17px/1.75 var(--font-sans);
    --t-body-l: 400 16px/1.75 var(--font-sans);
  }
}
.dir-c, .dir-c *, .dir-c *::before, .dir-c *::after { box-sizing: border-box; }
.dir-c {
  background: var(--bg-1);
  color: var(--n-10);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: 72px;
}
.dir-c body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-1);
  color: var(--n-10);
  font: var(--t-body);
  font-variation-settings: "MONO" 0;
  text-autospace: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.dir-c ::selection { background: var(--selection); color: var(--selection-ink); }
.dir-c :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.dir-c :where(ul, ol) { padding: 0; list-style: none; }
.dir-c :where(h1, h2, h3) { text-wrap: balance; }
.dir-c :where(p) { text-wrap: pretty; }
.dir-c :where(img, canvas, video, svg) { display: block; max-width: 100%; }
.dir-c :where(button, input, select, textarea) { font: inherit; color: inherit; }
.dir-c :where(a) { color: inherit; text-decoration: none; }
.dir-c :focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.dir-c :focus:not(:focus-visible) { outline: none; }
.dir-c .is-focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.dir-c .vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dir-c .skip {
  position: absolute; left: var(--gutter); top: 8px; z-index: 100; transform: translateY(-200%);
  background: var(--n-1); color: var(--n-10); border: var(--stroke-hair) solid var(--n-5); padding: 8px 12px; font: var(--t-label);
}
.dir-c .skip:focus { transform: none; }
:where(svg.icon) { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dir-c .icon {
  width: 16px; height: 16px; flex: none;
  stroke-width: var(--icon-stroke); stroke-linecap: square; stroke-linejoin: miter;
}
.dir-c .mono { font-family: var(--font-mono); font-variation-settings: "MONO" 1; }
.dir-c .cjk { font-family: var(--font-cjk); }
.dir-c .wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.dir-c .scr-ch { display: inline-block; text-align: center; overflow: hidden; vertical-align: bottom; white-space: pre; }
.dir-c .wordmark {
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 14px/20px var(--font-mono); font-variation-settings: "MONO" 1;
  color: var(--n-10); letter-spacing: 0; white-space: nowrap;
}
.dir-c .wordmark__cursor { display: inline-block; width: 8px; height: 16px; background: var(--accent); }
.dir-c .btn {
  --h: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 14px;
  font: var(--t-label); font-variation-settings: "MONO" 1;
  color: var(--n-10); background: transparent;
  border: var(--stroke-control) solid transparent; border-radius: var(--r-1);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.dir-c .btn:active { transition-duration: var(--d-instant); }
.dir-c .btn .cjk, .dir-c .btn :lang(zh) { font-family: var(--font-cjk); }
.dir-c .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.dir-c .btn--primary:hover, .dir-c .btn--primary.is-hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.dir-c .btn--primary:active, .dir-c .btn--primary.is-active { background: var(--accent-active); border-color: var(--accent-active); }
.dir-c .btn--secondary { border-color: var(--n-6); }
.dir-c .btn--secondary:hover, .dir-c .btn--secondary.is-hover { background: var(--n-1); border-color: var(--n-9); }
.dir-c .btn--secondary:active, .dir-c .btn--secondary.is-active { background: var(--n-2); }
.dir-c .btn--ghost { color: var(--n-9); padding: 0 10px; }
.dir-c .btn--ghost::before { content: "[" / ""; color: var(--n-8); }
.dir-c .btn--ghost::after { content: "]" / ""; color: var(--n-8); }
.dir-c .btn--ghost:hover, .dir-c .btn--ghost.is-hover { color: var(--n-10); background: var(--n-1); }
.dir-c .btn--ghost:active, .dir-c .btn--ghost.is-active { background: var(--n-2); }
.dir-c .btn--ghost[aria-pressed="true"], .dir-c .btn--ghost.is-selected { color: var(--n-10); font-weight: 600; }
.dir-c .btn--icon { --h: 36px; width: var(--h); padding: 0; color: var(--n-9); }
.dir-c .btn--icon .icon { width: 18px; height: 18px; }
.dir-c .btn--icon:hover, .dir-c .btn--icon.is-hover { color: var(--n-10); background: var(--n-1); }
.dir-c .btn--icon:active, .dir-c .btn--icon.is-active { background: var(--n-2); }
.dir-c .btn--icon[aria-pressed="true"], .dir-c .btn--icon.is-selected { background: var(--n-3); color: var(--n-10); }
.dir-c .btn--gh { color: var(--brand-github); }
.dir-c .btn--gh:hover, .dir-c .btn--gh.is-hover { color: var(--brand-github); }
.dir-c .btn--sm { --h: 32px; padding: 0 10px; font: var(--t-label-s); font-variation-settings: "MONO" 1; }
.dir-c .btn:disabled, .dir-c .btn.is-disabled, .dir-c .btn[aria-disabled="true"] {
  cursor: not-allowed; color: var(--n-7); background: transparent; border-color: var(--n-4);
}
.dir-c .btn--primary:disabled, .dir-c .btn--primary.is-disabled { background: var(--n-3); border-color: var(--n-3); color: var(--n-7); }
.dir-c .btn--ghost:disabled, .dir-c .btn--ghost.is-disabled, .dir-c .btn--icon:disabled, .dir-c .btn--icon.is-disabled { border-color: transparent; }
.dir-c .btn .icon { width: 15px; height: 15px; }
.dir-c .link {
  color: var(--n-10);
  text-decoration: underline; text-decoration-color: var(--n-6); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.dir-c .link:hover, .dir-c .link:focus-visible, .dir-c .link.is-hover { text-decoration-color: var(--accent); }
.dir-c .link:active, .dir-c .link.is-active { color: var(--n-9); }
.dir-c .link[aria-current="page"], .dir-c .link.is-selected { text-decoration: none; font-weight: 600; }
.dir-c .link .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; margin-left: 2px; }
.dir-c .tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 7px;
  font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-9);
  border: var(--stroke-hair) solid var(--n-5); border-radius: var(--r-1); white-space: nowrap;
}
.dir-c .mark { display: inline-flex; align-items: center; gap: 5px; font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-9); white-space: nowrap; }
.dir-c .mark .icon { width: 13px; height: 13px; }
.dir-c .status { display: inline-flex; align-items: center; gap: 8px; font: var(--t-mono); font-variation-settings: "MONO" 1; color: var(--n-10); white-space: nowrap; }
.dir-c .status__glyph { width: 14px; height: 14px; flex: none; display: inline-grid; place-items: center; color: var(--n-10); }
.dir-c .status__glyph .icon { width: 14px; height: 14px; }
.dir-c .status--public .status__glyph::before { content: ""; width: 8px; height: 8px; background: var(--n-10); }
.dir-c .status--local { color: var(--n-9); }
.dir-c .status--local .status__glyph { color: var(--n-9); }
.dir-c .status__sub { color: var(--n-9); }
.dir-c .kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: 500 12px/1 var(--font-mono); font-variation-settings: "MONO" 1; color: var(--n-9);
  border: var(--stroke-hair) solid var(--n-5); border-radius: var(--r-1); background: var(--bg-1);
}
.dir-c .kv { display: grid; grid-template-columns: 9ch 1fr; column-gap: 24px; font: var(--t-mono); font-variation-settings: "MONO" 1; }
.dir-c .kv dt { color: var(--n-8); font-family: var(--font-mono); padding-block: 6px; }
.dir-c .kv dd { color: var(--n-10); padding-block: 6px; min-width: 0; }
.dir-c .kv dt:lang(zh), .dir-c .kv dd .cjk { font-family: var(--font-cjk); font-size: 13px; }
.dir-c .field {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  background: var(--bg-2); border: var(--stroke-control) solid var(--n-6); border-radius: var(--r-1);
  color: var(--n-10); caret-color: var(--accent);
  transition: border-color var(--d-fast) var(--ease-out);
}
.dir-c .field:hover, .dir-c .field.is-hover { border-color: var(--n-9); }
.dir-c .field:focus-within, .dir-c .field.is-focus { border-color: var(--n-10); outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.dir-c .field.is-disabled { background: var(--n-1); color: var(--n-7); border-color: var(--n-4); }
.dir-c .field[data-invalid="true"], .dir-c .field.is-error { border: 1.5px solid var(--n-10); padding: 0 11.5px; }
.dir-c .field input {
  flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; outline: none;
  font: var(--t-mono); font-variation-settings: "MONO" 1; color: inherit; caret-color: var(--accent);
}
.dir-c .field input::placeholder { color: var(--n-8); }
.dir-c .field input:disabled { color: var(--n-7); cursor: not-allowed; }
.dir-c .field input:disabled::placeholder { color: var(--n-7); }
.dir-c .field .icon { color: var(--n-8); }
.dir-c .seg { display: inline-flex; align-items: stretch; border: var(--stroke-hair) solid var(--n-5); border-radius: var(--r-1); padding: 2px; gap: 2px; }
.dir-c .seg__btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px;
  border: 0; background: transparent; color: var(--n-9); cursor: pointer; border-radius: 1px;
  font: var(--t-label); font-variation-settings: "MONO" 1;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.dir-c .seg__btn:hover, .dir-c .seg__btn.is-hover { color: var(--n-10); }
.dir-c .seg__btn:active, .dir-c .seg__btn.is-active { background: var(--n-2); }
.dir-c .seg__btn[aria-pressed="true"], .dir-c .seg__btn[aria-checked="true"], .dir-c .seg__btn.is-selected { background: var(--n-3); color: var(--n-10); }
.dir-c .seg__btn[aria-pressed="true"]::after, .dir-c .seg__btn[aria-checked="true"]::after, .dir-c .seg__btn.is-selected::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: var(--n-10);
}
.dir-c .seg__btn:disabled, .dir-c .seg__btn.is-disabled { color: var(--n-7); cursor: not-allowed; }
.dir-c .seg__btn .icon { width: 15px; height: 15px; }
.dir-c .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dir-c .chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px;
  border: var(--stroke-hair) solid transparent; border-radius: var(--r-1); background: transparent; color: var(--n-9); cursor: pointer;
  font: 500 13px/20px var(--font-cjk); white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.dir-c .chip__n { font: 450 12px/16px var(--font-mono); font-variation-settings: "MONO" 1; color: inherit; }
.dir-c .chip:hover, .dir-c .chip.is-hover { color: var(--n-10); background: var(--n-1); }
.dir-c .chip:active, .dir-c .chip.is-active { background: var(--n-2); }
.dir-c .chip[aria-pressed="true"], .dir-c .chip.is-selected { color: var(--n-10); background: var(--n-3); }
.dir-c .chip[aria-pressed="true"]::before, .dir-c .chip.is-selected::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--n-10); }
.dir-c .chip:disabled, .dir-c .chip.is-disabled { color: var(--n-7); cursor: not-allowed; background: transparent; }
.dir-c .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--t-label); font-variation-settings: "MONO" 1; color: var(--n-9); background: none; border: 0; padding: 4px 0; }
.dir-c .switch__track { position: relative; width: 32px; height: 18px; border: var(--stroke-control) solid var(--n-6); border-radius: var(--r-1); flex: none; }
.dir-c .switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; background: var(--n-9); }
.dir-c .switch:hover .switch__track, .dir-c .switch.is-hover .switch__track { border-color: var(--n-9); }
.dir-c .switch[aria-checked="true"] .switch__track, .dir-c .switch.is-selected .switch__track { background: var(--n-10); border-color: var(--n-10); }
.dir-c .switch[aria-checked="true"] .switch__track::after, .dir-c .switch.is-selected .switch__track::after { left: 17px; background: var(--bg-1); }
.dir-c .switch[aria-checked="true"], .dir-c .switch.is-selected { color: var(--n-10); }
.dir-c .switch:disabled, .dir-c .switch.is-disabled { color: var(--n-7); cursor: not-allowed; }
.dir-c .switch:disabled .switch__track, .dir-c .switch.is-disabled .switch__track { border-color: var(--n-4); }
.dir-c .switch:disabled .switch__track::after, .dir-c .switch.is-disabled .switch__track::after { background: var(--n-7); }
.dir-c .dialog {
  padding: 0; border: var(--stroke-hair) solid var(--n-5); border-radius: var(--r-2); background: var(--n-1); color: var(--n-10);
  max-width: min(960px, calc(100vw - 32px)); width: 100%;
}
.dir-c .dialog::backdrop { background: var(--scrim); }
.dir-c .dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 20px; border-bottom: var(--stroke-hair) solid var(--n-4); }
.dir-c .dialog__title { font: var(--t-label); font-variation-settings: "MONO" 1; color: var(--n-9); }
.dir-c .dialog__body { padding: 20px; }
.dir-c .dialog video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg-1); }
.dir-c .dialog__err { margin-top: 12px; font: var(--t-body-s); color: var(--n-10); }
.dir-c .toast-region {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast);
  width: max-content; max-width: min(480px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none;
}
@media (max-width: 599px) { .dir-c .toast-region { bottom: 76px; } }
.dir-c .toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 16px;
  background: var(--n-1); border: var(--stroke-hair) solid var(--n-5); border-radius: var(--r-1); color: var(--n-10);
  font: var(--t-body-s);
}
.dir-c .toast__glyph { font: 600 13px/22px var(--font-mono); font-variation-settings: "MONO" 1; color: var(--accent); flex: none; }
.dir-c .toast__text { flex: 1; min-width: 0; padding-top: 1px; }
.dir-c .toast__sub { display: block; color: var(--n-9); font: var(--t-label-s); font-variation-settings: "MONO" 1; margin-top: 2px; }
.dir-c .toast__close { margin: -6px -4px -6px 0; --h: 32px; }
.dir-c .tooltip {
  position: absolute; z-index: var(--z-tooltip); padding: 4px 8px; background: var(--n-10); color: var(--bg-1);
  font: var(--t-label-s); font-variation-settings: "MONO" 1; border-radius: var(--r-1); white-space: nowrap;
}
.dir-c .site-header { position: relative; z-index: var(--z-header); background: var(--bg-1); }
.dir-c .site-header__in { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dir-c .site-footer { border-top: var(--stroke-hair) solid var(--n-4); margin-top: var(--s-8); }
.dir-c .site-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 28px 40px; }
.dir-c .site-footer__note { font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-8); }
.dir-c .site-footer .link { font: var(--t-label-s); font-variation-settings: "MONO" 1; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
@media (forced-colors: active) {
  .dir-c .wordmark__cursor { background: CanvasText; }
  .dir-c .btn { border-color: ButtonText; }
}
.dir-c .intro { padding-block: var(--s-7) var(--s-10); }
.dir-c .intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.dir-c .intro__media { grid-column: 1 / span 4; }
.dir-c .intro__body { grid-column: 6 / span 7; display: flex; flex-direction: column; padding-top: 2px; }
.dir-c .ascii { position: relative; width: 360px; height: 360px; background: var(--screen); outline: var(--stroke-hair) solid var(--n-4); overflow: hidden; }
.dir-c .ascii canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dir-c .ascii__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); transform-origin: 83.3% 33.3%; }
.dir-c .ascii[data-ascii="fallback"] .ascii__photo { opacity: 1; }
.dir-c .ascii[data-ascii="fallback"] canvas { display: none; }
.dir-c:not(.js) .ascii__photo { opacity: 1; }
.dir-c:not(.js) .ascii__toggle { display: none; }
@keyframes c-photo-late { to { opacity: 1; } }
.dir-c.js .ascii[data-ascii="pending"] .ascii__photo { animation: c-photo-late 0s 4s both; }
.dir-c .ascii__toggle { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dir-c .ascii__toggle:focus-visible { outline: none; }
.dir-c .ascii:has(.ascii__toggle:focus-visible) { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.dir-c .sig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.dir-c .sig__zh { font: var(--t-display); letter-spacing: .02em; }
.dir-c .sig__en { font: 600 20px/28px var(--font-mono); font-variation-settings: "MONO" 1; text-transform: uppercase; letter-spacing: .06em; color: var(--n-9); }
.dir-c .intro__text { margin-block: var(--s-6); }
.dir-c .intro__lede, .dir-c .work__desc, .dir-c .work__facts { word-break: keep-all; overflow-wrap: anywhere; }
.dir-c .intro__lede { font: var(--t-lede); color: var(--n-10); max-width: 36em; text-wrap: balance; }
.dir-c .intro__key {
  background: var(--accent); color: var(--accent-ink); padding: 1px .24em; margin-inline: .08em; border-radius: var(--r-1);
  white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dir-c .intro__en { font: 400 15px/24px var(--font-sans); font-variation-settings: "MONO" 0; color: var(--n-9); max-width: 42em; margin-top: 12px; text-wrap: balance; }
.dir-c .contacts { margin-top: auto; padding-top: 14px; border-top: var(--stroke-hair) solid var(--n-4); max-width: 520px; font: var(--t-mono); font-variation-settings: "MONO" 1; }
.dir-c .contacts__row { display: grid; grid-template-columns: 9ch minmax(0, 1fr); column-gap: 24px; align-items: center; }
.dir-c .contacts dt { color: var(--n-8); padding-block: 4px; }
.dir-c .contacts dt:lang(zh) { font-family: var(--font-cjk); font-size: 13px; }
.dir-c .contacts dd { padding-block: 4px; min-width: 0; color: var(--n-10); }
.dir-c .contact {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--n-10); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--n-6); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--d-fast) var(--ease-out);
}
.dir-c .contact .cjk { font-family: var(--font-cjk); font-size: 13px; }
.dir-c .contact .icon { width: 13px; height: 13px; color: var(--n-9); transition: color var(--d-fast) var(--ease-out); }
.dir-c .contact:hover, .dir-c .contact:focus-visible, .dir-c .contact.is-hover { text-decoration-color: var(--accent); }
.dir-c .contact:hover .icon, .dir-c .contact:focus-visible .icon, .dir-c .contact.is-hover .icon, .dir-c .contact[data-copied] .icon { color: var(--accent); }
.dir-c .contact--empty { color: var(--n-8); text-decoration: none; cursor: default; }
.dir-c .contact--copy { flex-wrap: wrap; column-gap: 12px; row-gap: 0; text-align: left; text-decoration: none; }
.dir-c .contact--copy > .cjk {
  text-decoration: underline; text-decoration-color: var(--n-6); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--d-fast) var(--ease-out);
}
.dir-c .contact--copy:hover > .cjk, .dir-c .contact--copy:focus-visible > .cjk, .dir-c .contact--copy.is-hover > .cjk { text-decoration-color: var(--accent); }
.dir-c .contact__no { display: inline-flex; align-items: center; gap: 6px; }
.dir-c .contact__nov { font: 400 11px/16px var(--font-mono); font-variation-settings: "MONO" 1; letter-spacing: 0.02em; color: var(--n-8); }
@keyframes c-rise { from { opacity: 0; transform: translateY(6px); } }
.dir-c .intro [data-in] { animation: c-rise var(--d-enter) var(--ease-out) both; animation-delay: calc(var(--d-lead) + var(--in, 0) * var(--d-stagger)); }
.dir-c.is-return .intro [data-in] { animation: none; }
.dir-c .works { scroll-margin-top: 16px; }
.dir-c .works:focus { outline: none; }
.dir-c .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: var(--s-4); }
.dir-c .section-head__title { display: flex; align-items: baseline; gap: 12px; font: var(--t-title-3); }
.dir-c .section-head__title .en { font: 600 13px/20px var(--font-mono); font-variation-settings: "MONO" 1; text-transform: uppercase; letter-spacing: .06em; color: var(--n-9); }
.dir-c .work {
  --row-pad: var(--s-9); --shot-w: 620px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--shot-w)); column-gap: var(--s-12); align-items: stretch;
  padding-block: var(--row-pad); border-top: var(--stroke-hair) solid var(--n-4);
}
.dir-c .work__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dir-c .work__kicker { display: flex; align-items: baseline; gap: 14px; font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-8); }
.dir-c .work__no { color: var(--n-8); }
.dir-c .work__cat .cjk { font: 400 13px/16px var(--font-cjk); color: var(--n-9); }
.dir-c .work__cat .en { margin-left: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--n-8); }
.dir-c .work__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; }
.dir-c .work__name {
  font: var(--t-title-2); letter-spacing: .01em; color: var(--n-10);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: transparent;
  transition: text-decoration-color var(--d-fast) var(--ease-out);
}
.dir-c .work__name::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dir-c .work__name:focus-visible { outline: none; }
.dir-c .work__en { font: 600 13px/20px var(--font-mono); font-variation-settings: "MONO" 1; text-transform: uppercase; letter-spacing: .06em; color: var(--n-9); }
.dir-c .work__desc { margin-top: 16px; font: var(--t-body-l); color: var(--n-10); max-width: 30em; }
.dir-c .work__facts { margin-top: 14px; font: var(--t-body-s); color: var(--n-9); max-width: 38em; }
.dir-c .work__facts li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); padding-block: 2px; }
.dir-c .work__facts li::before { content: "–"; font-family: var(--font-mono); color: var(--n-8); }
.dir-c .work__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.dir-c .work__actions .icon--gh { width: 15px; height: 15px; color: var(--brand-github); }
.dir-c .work__shot {
  position: relative; align-self: start; margin: 0; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--n-1); border: var(--stroke-hair) solid var(--n-5);
  transition: border-color var(--d-fast) var(--ease-out);
}
.dir-c .work__shot img { width: 100%; height: 100%; object-fit: cover; }
.dir-c .work:hover .work__shot, .dir-c .work.is-hover .work__shot, .dir-c .work:has(.work__name:focus-visible) .work__shot { border-color: var(--accent); }
.dir-c .work:hover .work__name, .dir-c .work.is-hover .work__name, .dir-c .work:has(.work__name:focus-visible) .work__name { text-decoration-color: var(--accent); }
.dir-c .work:has(.work__name:focus-visible)::before {
  content: ""; position: absolute; inset: calc(var(--row-pad) - 16px) -16px; pointer-events: none;
  outline: var(--stroke-focus) solid var(--focus);
}
@media (max-width: 1279px) {
  .dir-c .intro__text { margin-block: var(--s-5); }
  .dir-c .intro__lede { font-size: 18px; line-height: 1.7; }
  .dir-c .intro__en { font-size: 14px; line-height: 22px; }
  .dir-c .contacts dt, .dir-c .contacts dd { padding-block: 3px; }
  .dir-c .work { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; }
}
@media (max-width: 1023px) {
  .dir-c .intro__media { grid-column: 1 / span 5; }
  .dir-c .intro__body { grid-column: 6 / span 7; }
  .dir-c .ascii { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; }
}
@media (max-width: 899px) {
  .dir-c .work { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .dir-c .work__actions { padding-top: 24px; }
  .dir-c .work__shot { width: 100%; max-width: 640px; }
}
@media (max-width: 599px) {
  .dir-c .intro { padding-block: 4px var(--s-9); }
  .dir-c .intro__grid { grid-template-columns: 168px minmax(0, 1fr); column-gap: 16px; row-gap: 0; }
  .dir-c .intro__media { grid-column: 1; grid-row: 1 / span 2; }
  .dir-c .ascii { width: 168px; max-width: none; height: 168px; }
  .dir-c .intro__body { display: contents; }
  .dir-c .sig { grid-column: 2; grid-row: 1; align-self: start; flex-direction: column; gap: 2px; min-width: 0; }
  .dir-c .sig__en { font-size: 14px; line-height: 20px; }
  .dir-c .contacts { grid-column: 2; grid-row: 2; align-self: end; margin-top: 12px; padding-top: 8px; font-size: 12px; }
  .dir-c .contacts__row { grid-template-columns: 6ch minmax(0, 1fr); column-gap: 8px; }
  .dir-c .contacts dt, .dir-c .contacts dd { padding-block: 2px; }
  .dir-c .contacts dt:lang(zh), .dir-c .contact .cjk { font-size: 12px; }
  .dir-c .contact--copy { column-gap: 6px; }
  .dir-c .contact__no { display: contents; }
  .dir-c .contact--copy .icon { order: 1; }
  .dir-c .contact__nov { order: 2; flex-basis: 100%; font-size: 10px; line-height: 14px; }
  .dir-c .intro__text { grid-column: 1 / -1; grid-row: 3; margin-block: 20px 0; }
  .dir-c .intro__en { font-size: 14px; line-height: 22px; }
  .dir-c .section-head { padding-bottom: var(--s-4); }
  .dir-c .work { --row-pad: var(--s-8); row-gap: 24px; }
  .dir-c .work__title { margin-top: 10px; }
  .dir-c .work__en { font-size: 12px; }
  .dir-c .work__desc { margin-top: 12px; }
  .dir-c .work__actions { padding-top: 20px; }
  .dir-c .work:has(.work__name:focus-visible)::before { inset: calc(var(--row-pad) - 12px) -12px; }
}
@supports not selector(:has(*)) {
  .dir-c .work__name:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 4px; }
  .dir-c .ascii__toggle:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .dir-c .intro [data-in] { animation: none; }
}
@media (forced-colors: active) {
  .dir-c .intro__key { background: Highlight; color: HighlightText; }
}
.dir-c[data-page="detail"],
.dir-c[data-page="detail"] body,
.dir-c[data-page="detail"] .site-header { background: var(--surface-detail); }
.dir-c .dt {
  width: 100%; max-width: calc(var(--detail-w) + var(--gutter) * 2); margin-inline: auto;
  padding-inline: var(--gutter); padding-bottom: var(--s-9);
}
.dir-c .dt-bar {
  display: flex; align-items: center; gap: var(--s-4); min-height: 44px;
  border-bottom: var(--stroke-hair) solid var(--n-4);
  font: var(--t-mono); font-variation-settings: "MONO" 1;
}
.dir-c .dt-bar__back {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding-right: var(--s-1);
  color: var(--n-9); transition: color var(--d-fast) var(--ease-out);
}
.dir-c .dt-bar__back .icon { width: 15px; height: 15px; }
.dir-c .dt-bar__back .cjk { font: 500 13px/20px var(--font-cjk); color: var(--n-10); }
.dir-c .dt-bar__back .en { font: var(--t-label-s); font-variation-settings: "MONO" 1; text-transform: uppercase; letter-spacing: .06em; }
.dir-c .dt-bar__back:hover, .dir-c .dt-bar__back:focus-visible { color: var(--n-10); }
.dir-c .dt-bar__back:hover .cjk { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.dir-c .dt-bar__sep { width: var(--stroke-hair); height: 16px; background: var(--n-5); flex: none; }
.dir-c .dt-bar__path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; color: var(--n-9); white-space: nowrap; overflow: hidden; }
.dir-c .dt-bar__cursor { width: 8px; height: 16px; background: var(--accent); flex: none; }
.dir-c .dt-bar__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-cjk); color: var(--n-8); white-space: nowrap; }
.dir-c .dt-bar__hint .kbd { background: transparent; }
.dir-c[data-page="detail"] .wordmark__cursor,
.dir-c[data-page="art"] .wordmark__cursor,
.dir-c[data-page="missing"] .wordmark__cursor { visibility: hidden; }
.dir-c .dt-hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: end;
  padding-top: var(--s-10);
}
.dir-c .dt-title { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.dir-c .dt-title:focus { outline: none; }
.dir-c .dt-title__zh { font: var(--t-hero); letter-spacing: .01em; color: var(--n-10); white-space: nowrap; }
.dir-c .dt-title__en {
  font: 600 20px/1.5385 var(--font-mono); font-variation-settings: "MONO" 1;
  text-transform: uppercase; letter-spacing: .06em; color: var(--n-9);
}
.dir-c .dt-hero__side { grid-column: 7 / span 6; padding-bottom: 5px; }
.dir-c .dt-lede { font: var(--t-body-l); color: var(--n-10); word-break: keep-all; overflow-wrap: anywhere; }
.dir-c .dt-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.dir-c .dt-actions .icon--gh { width: 15px; height: 15px; color: var(--brand-github); }
.dir-c .dt-note { margin-top: var(--s-3); font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-8); }
.dir-c .dt-media {
  position: relative; margin: var(--s-9) 0 0; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--n-1); border: var(--stroke-hair) solid var(--n-5);
}
.dir-c .dt-media img { width: 100%; height: 100%; object-fit: cover; }
.dir-c .dt-media--film { aspect-ratio: 16 / 9; background: var(--screen); }
.dir-c .dt-media--film video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--screen); }
.dir-c .dt-media__poster { position: absolute; inset: 0; }
.dir-c .dt-play {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-start;
  margin: 0; padding: var(--s-5); border: 0; background: transparent; cursor: pointer; color: var(--n-10);
}
.dir-c .dt-play__badge {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-5) 0 var(--s-2);
  background: var(--screen); border-radius: var(--r-1); font: 600 14px/20px var(--font-cjk);
  transition: background-color var(--d-fast) var(--ease-out);
}
.dir-c .dt-play__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-1); }
.dir-c .dt-play__icon .icon { width: 13px; height: 13px; fill: currentColor; }
.dir-c .dt-play:hover .dt-play__badge { background: var(--n-2); }
.dir-c .dt-play:active .dt-play__badge { background: var(--n-3); }
.dir-c .dt-play:focus-visible { outline: none; }
.dir-c .dt-play:focus-visible .dt-play__badge { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }
.dir-c .dt-media--film.is-playing .dt-media__poster,
.dir-c .dt-media--film.is-playing .dt-play { display: none; }
.dir-c .dt-media__err {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 2; padding: var(--s-3) var(--s-4);
  background: var(--n-1); border: var(--stroke-hair) solid var(--n-5); border-radius: var(--r-1); font: var(--t-body-s); color: var(--n-10);
}
.dir-c .dt-media__err[hidden] { display: none; }
.dir-c .dt-blocks { margin-top: var(--s-10); }
.dir-c .dt-block {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6);
  padding-block: var(--s-5) var(--s-8); border-top: var(--stroke-hair) solid var(--n-4);
}
.dir-c .dt-block__h {
  grid-column: 1 / span 3; display: flex; align-items: baseline; gap: 10px; padding-top: 3px;
  font: var(--t-label-s); font-variation-settings: "MONO" 1; text-transform: uppercase; letter-spacing: .08em; color: var(--n-8);
}
.dir-c .dt-block__h .cjk { font: 500 13px/20px var(--font-cjk); letter-spacing: 0; color: var(--n-10); }
.dir-c .dt-block__body { grid-column: 4 / span 9; min-width: 0; }
.dir-c .dt-about { font: var(--t-body-l); color: var(--n-10); max-width: 34em; word-break: keep-all; overflow-wrap: anywhere; }
.dir-c .dt-facts { font: var(--t-body); color: var(--n-10); word-break: keep-all; overflow-wrap: anywhere; }
.dir-c .dt-facts li { display: grid; grid-template-columns: 2.5ch minmax(0, 1fr); padding-block: 7px; border-top: var(--stroke-hair) solid var(--n-4); }
.dir-c .dt-facts li:first-child { border-top: 0; padding-top: 0; }
.dir-c .dt-facts li::before { content: "–"; font-family: var(--font-mono); color: var(--n-8); }
.dir-c .dt-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); }
.dir-c .dt-scene { display: flex; flex-direction: column; gap: 2px; padding-block: 9px; border-top: var(--stroke-hair) solid var(--n-4); }
.dir-c .dt-scenes li:nth-child(-n+2) .dt-scene { border-top: 0; padding-top: 0; }
.dir-c .dt-scene__name {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font: 600 15px/24px var(--font-sans); color: var(--n-10);
  text-decoration: underline; text-decoration-color: var(--n-6); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--d-fast) var(--ease-out);
}
.dir-c .dt-scene__name .icon { width: 13px; height: 13px; color: var(--n-9); }
.dir-c .dt-scene__desc { font: var(--t-body-s); color: var(--n-9); }
.dir-c .dt-scene:hover .dt-scene__name, .dir-c .dt-scene:focus-visible .dt-scene__name { text-decoration-color: var(--accent); }
.dir-c .dt-kv { grid-template-columns: 7ch minmax(0, 1fr); }
.dir-c .dt-kv dt, .dir-c .dt-kv dd { padding-block: 5px; }
.dir-c .dt-kv dt:first-of-type, .dir-c .dt-kv dt:first-of-type + dd { padding-top: 0; }
.dir-c .dt-kv dd { overflow-wrap: anywhere; }
.dir-c .dt-kv dd .cjk { font-family: var(--font-cjk); font-size: 13px; }
.dir-c .dt-kv__en { margin-left: 10px; color: var(--n-9); }
.dir-c .dt-kv__note { display: block; margin-top: 2px; color: var(--n-8); }
.dir-c .dt-kv .link { display: inline-block; min-height: 24px; max-width: 100%; vertical-align: top; font: inherit; font-variation-settings: "MONO" 1; }
.dir-c .dt-kv__copy { margin: -6px 0 -6px var(--s-3); vertical-align: middle; }
.dir-c:not(.js) .dt-kv__copy { display: none; }
.dir-c .dt-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6);
  padding-top: var(--s-6); border-top: var(--stroke-hair) solid var(--n-4);
}
.dir-c .dt-pager__item {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; column-gap: var(--s-5);
  min-width: 0; padding: var(--s-2) 0; color: var(--n-10);
}
.dir-c .dt-pager__item--next { grid-template-columns: minmax(0, 1fr) 168px; }
.dir-c .dt-pager__item--next .dt-pager__shot { grid-column: 2; grid-row: 1; }
.dir-c .dt-pager__item--next .dt-pager__text { grid-column: 1; grid-row: 1; align-items: flex-end; text-align: right; }
.dir-c .dt-pager__shot {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--n-1); border: var(--stroke-hair) solid var(--n-5);
  transition: border-color var(--d-fast) var(--ease-out);
}
.dir-c .dt-pager__shot img { width: 100%; height: 100%; object-fit: cover; }
.dir-c .dt-pager__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.dir-c .dt-pager__label { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-8); }
.dir-c .dt-pager__label .cjk { font: 400 12px/16px var(--font-cjk); color: var(--n-9); }
.dir-c .dt-pager__label .icon { width: 14px; height: 14px; color: var(--n-9); }
.dir-c .dt-pager__zh {
  font: 600 20px/1.3 var(--font-sans); letter-spacing: .01em; color: var(--n-10); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: transparent;
  transition: text-decoration-color var(--d-fast) var(--ease-out);
}
.dir-c .dt-pager__en { font: 600 12px/1.5385 var(--font-mono); font-variation-settings: "MONO" 1; text-transform: uppercase; letter-spacing: .06em; color: var(--n-9); }
.dir-c .dt-pager__item:hover .dt-pager__shot, .dir-c .dt-pager__item:focus-visible .dt-pager__shot { border-color: var(--accent); }
.dir-c .dt-pager__item:hover .dt-pager__zh, .dir-c .dt-pager__item:focus-visible .dt-pager__zh { text-decoration-color: var(--accent); }
.dir-c .dt-pager__item:focus-visible { outline-offset: 6px; }
@keyframes c-dt-in { from { opacity: 0; transform: translateY(8px); } }
.dir-c .dt.is-entering [data-step] {
  animation: c-dt-in var(--d-enter) var(--ease-out) both;
  animation-delay: calc(var(--d-lead) + min(var(--i, 0), 4) * var(--d-step));
}
@media (max-width: 1023px) {
  .dir-c .dt-hero { padding-top: var(--s-9); }
  .dir-c .dt-title { grid-column: 1 / -1; }
  .dir-c .dt-hero__side { grid-column: 1 / -1; margin-top: var(--s-5); padding-bottom: 0; max-width: 36em; }
  .dir-c .dt-block__h { grid-column: 1 / -1; padding: 0 0 var(--s-3); }
  .dir-c .dt-block__body { grid-column: 1 / -1; }
  .dir-c .dt-pager__item { grid-template-columns: 128px minmax(0, 1fr); }
  .dir-c .dt-pager__item--next { grid-template-columns: minmax(0, 1fr) 128px; }
}
@media (max-width: 599px) {
  .dir-c .dt-bar { gap: var(--s-3); }
  .dir-c .dt-bar__back .en, .dir-c .dt-bar__hint { display: none; }
  .dir-c .dt-hero { padding-top: var(--s-7); }
  .dir-c .dt-title__zh { font: var(--t-hero-s); }
  .dir-c .dt-title__en { font-size: 16px; line-height: 1.6667; }
  .dir-c .dt-media { margin-top: var(--s-7); }
  .dir-c .dt-play { padding: var(--s-3); }
  .dir-c .dt-play__badge { min-height: 36px; gap: var(--s-2); padding: 0 var(--s-3) 0 6px; font-size: 13px; }
  .dir-c .dt-play__icon { width: 24px; height: 24px; }
  .dir-c .dt-blocks { margin-top: var(--s-8); }
  .dir-c .dt-block { padding-block: var(--s-4) var(--s-7); }
  .dir-c .dt-scenes { grid-template-columns: minmax(0, 1fr); }
  .dir-c .dt-scenes li:nth-child(2) .dt-scene { border-top: var(--stroke-hair) solid var(--n-4); padding-top: 9px; }
  .dir-c .dt-pager { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
  .dir-c .dt-pager__item, .dir-c .dt-pager__item--next { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s-4); }
  .dir-c .dt-pager__item--next .dt-pager__shot { grid-column: 1; }
  .dir-c .dt-pager__item--next .dt-pager__text { grid-column: 2; align-items: flex-start; text-align: left; }
  .dir-c .dt-pager__zh { font-size: 18px; line-height: 1.35; }
  .dir-c .dt-pager__en { line-height: 1.6667; }
}
@media not ((hover: hover) and (pointer: fine)) { .dir-c .dt-bar__hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dir-c .dt.is-entering [data-step] { animation: none; }
}
@media (forced-colors: active) {
  .dir-c .dt-bar__cursor, .dir-c .dt-play__badge { background: CanvasText; }
}
.dir-c::view-transition-old(root),
.dir-c::view-transition-new(root) { animation-duration: var(--d-base); animation-timing-function: var(--ease-out); }
.dir-c::view-transition-group(c-vt-name),
.dir-c::view-transition-group(c-vt-en),
.dir-c::view-transition-group(c-vt-shot) { animation-duration: var(--d-morph); animation-timing-function: var(--ease-morph); }
.dir-c::view-transition-old(c-vt-name), .dir-c::view-transition-new(c-vt-name),
.dir-c::view-transition-old(c-vt-en), .dir-c::view-transition-new(c-vt-en) { height: 100%; width: auto; }
.dir-c::view-transition-old(c-vt-name) { animation: none; opacity: 0; }
.dir-c::view-transition-new(c-vt-name) { animation: none; }
.dir-c::view-transition-old(c-vt-en), .dir-c::view-transition-new(c-vt-en) { animation-duration: var(--d-base); }
.dir-c[data-vt="morph"]::view-transition-old(c-vt-en) { animation: c-vt-out var(--d-instant) var(--ease-out) both; }
.dir-c[data-vt="morph"]::view-transition-new(c-vt-en) { animation: c-vt-in var(--d-fast) var(--ease-out) both; animation-delay: calc(var(--d-morph) - var(--d-fast)); }
.dir-c[data-vt="morph-back"]::view-transition-group(c-vt-late) { animation-duration: var(--d-morph); }
.dir-c[data-vt="morph-back"]::view-transition-new(c-vt-late) { animation: c-vt-in var(--d-fast) var(--ease-out) both; animation-delay: calc(var(--d-morph) - var(--d-fast)); }
.dir-c[data-vt="morph-back"]::view-transition-old(c-vt-name) { opacity: 1; animation: c-vt-out calc(var(--d-morph) / 2) var(--ease-out) both; }
.dir-c[data-vt="morph-back"]::view-transition-new(c-vt-name) { animation: c-vt-in calc(var(--d-morph) / 2) var(--ease-out) both; }
.dir-c[data-vt="morph-back"]::view-transition-group(c-vt-en) { animation-duration: calc(var(--d-morph) - var(--d-base)); }
.dir-c[data-vt="morph-back"]::view-transition-old(c-vt-en) { animation: c-vt-out var(--d-instant) var(--ease-out) both; }
.dir-c[data-vt="morph-back"]::view-transition-new(c-vt-en) { animation: c-vt-in var(--d-fast) var(--ease-out) both; animation-delay: calc(var(--d-morph) - var(--d-fast)); }
.dir-c::view-transition-old(c-vt-shot), .dir-c::view-transition-new(c-vt-shot) {
  width: 100%; height: 100%; object-fit: cover; animation-duration: var(--d-base);
}
.dir-c[data-vt-shot="wait"]::view-transition-old(c-vt-shot) { animation: none; opacity: 1; }
.dir-c[data-vt-shot="wait"]::view-transition-new(c-vt-shot) { animation: none; opacity: 0; }
@keyframes c-vt-out { to { opacity: 0; } }
@keyframes c-vt-in { from { opacity: 0; } }
.dir-c::view-transition-old(c-vt-name):only-child { opacity: 1; animation: c-vt-out var(--d-fast) var(--ease-out) both; }
.dir-c::view-transition-new(c-vt-name):only-child { animation: c-vt-in var(--d-base) var(--ease-out) both; }
.dir-c[data-vt="fade"]::view-transition-old(root),
.dir-c[data-vt="fade"]::view-transition-new(root) { animation-duration: calc(var(--d-fade) * 2); }
.dir-c[data-page="art"],
.dir-c[data-page="art"] body,
.dir-c[data-page="art"] .site-header { background: var(--surface-detail); }
.dir-c .art-hero { padding-bottom: var(--s-2); }
.dir-c .art-scenes { margin-top: var(--s-10); border-top: var(--stroke-hair) solid var(--n-4); }
.dir-c .art-scene {
  position: relative; display: grid; grid-template-columns: 6ch minmax(0, 1fr) minmax(0, 1.2fr) 24px; column-gap: var(--s-6); align-items: baseline;
  padding-block: var(--s-6); border-bottom: var(--stroke-hair) solid var(--n-4); color: var(--n-10);
}
.dir-c .art-scene__no { font: var(--t-label-s); font-variation-settings: "MONO" 1; color: var(--n-8); }
.dir-c .art-scene__name {
  font: 600 24px/1.35 var(--font-sans); letter-spacing: .01em; color: var(--n-10);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: transparent;
  transition: text-decoration-color var(--d-fast) var(--ease-out);
}
.dir-c .art-scene__desc { font: var(--t-body); color: var(--n-9); word-break: keep-all; overflow-wrap: anywhere; }
.dir-c .art-scene__go { align-self: center; justify-self: end; color: var(--n-9); transition: color var(--d-fast) var(--ease-out); }
.dir-c .art-scene__go .icon { width: 18px; height: 18px; }
.dir-c .art-scene:hover .art-scene__name, .dir-c .art-scene:focus-visible .art-scene__name { text-decoration-color: var(--accent); }
.dir-c .art-scene:hover .art-scene__go, .dir-c .art-scene:focus-visible .art-scene__go { color: var(--accent); }
.dir-c .art-scene:focus-visible { outline-offset: -2px; }
.dir-c .art-about { margin-top: var(--s-10); }
@media (max-width: 899px) {
  .dir-c .art-scene { grid-template-columns: 4ch minmax(0, 1fr) 24px; row-gap: var(--s-1); }
  .dir-c .art-scene__desc { grid-column: 2; grid-row: 2; }
  .dir-c .art-scene__go { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 599px) {
  .dir-c .art-scenes { margin-top: var(--s-8); }
  .dir-c .art-scene { column-gap: var(--s-3); padding-block: var(--s-5); }
  .dir-c .art-scene__name { font-size: 20px; }
  .dir-c .art-about { margin-top: var(--s-8); }
}
.dir-c[data-page="missing"],
.dir-c[data-page="missing"] body,
.dir-c[data-page="missing"] .site-header { background: var(--surface-detail); }
.dir-c .missing { padding-bottom: var(--s-12); }
.dir-c .missing .dt-actions { margin-top: var(--s-6); }
.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.lesson-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;gap:14px}
.lesson-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:var(--bg-1);border:1px solid var(--n-4);transition:border-color .2s}
.lesson-card:hover img,.lesson-card:focus-visible img{border-color:var(--n-8)}
.lesson-card__name{display:flex;align-items:center;gap:10px;font-size:20px;line-height:1.5}
.lesson-card__name svg{margin-left:auto;flex:none}
.lesson-card__desc,.lesson-about{font-size:16px;line-height:1.9;color:var(--n-8)}
.lesson-about{max-width:68ch;margin:40px 0 0}
.dt--lessons .dt-hero{margin-bottom:32px}
@media(max-width:760px){.lesson-grid{grid-template-columns:1fr;gap:30px}.lesson-card{gap:12px}.lesson-about{margin-top:30px}}