/* Independent About preview. The original site is not changed. */
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: 30px; align-items: center; width: min(1240px, 94vw); margin: 80px auto 24px; }
.crt-container { width: 100%; height: auto; min-height: min(78svh, 820px); margin: 0; padding: 0; display: flex; flex-direction: column; }
.terminal-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #287d28; font: 12px/1.5 monospace; color: #84bc84; }
.terminal-indicator { color: lime; font-size: 10px; }
.crt-screen { flex: 1; height: auto; gap: 18px; padding: 28px 28px 24px; border-radius: 0; }
.terminal-command { font: 13px/1.5 monospace; color: #6dba6d; text-align: left; overflow-wrap: anywhere; }
#bio-display { font: 16px/1.6 monospace; color: lime; text-align: left; width: 100%; flex: 0 0 auto; margin: 0; }
#bio-display p { margin: 0 0 1.2em; }
#bio-display p:last-child { margin-bottom: 0; }
.about-bottom { margin-top: auto; padding-top: 24px; width: 100%; }
.statement-corner { display: flex; align-items: flex-end; gap: 22px; width: min(100%, 610px); }
#ascii-sphere { flex: 0 0 auto; margin: 0 !important; }
.statement-box { border: 1px solid lime; border-radius: 8px; padding: 12px; min-width: 0; flex: 1; font-family: monospace; }
#statement-scroll { height: 132px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #00a600 black; font-size: 12px; line-height: 1.5; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
#statement-scroll:focus-visible { outline: 1px dashed lime; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cv-corner { width: 224px; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; font: 12px/1.5 monospace; text-align: center; }
#cv-preview-link { display: block; border: 1px solid #287d28; line-height: 0; }
#cv-preview-link img { width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: contain; background: white; display: block; }
#cv-preview-link:hover { border-color: lime; }
#cv-download-label { color: lime; text-underline-offset: 3px; }
.cv-updated { font-size: 10px; line-height: 1.6; color: #76a776; }
.cv-pagination { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cv-pagination button { background: black; color: lime; border: 1px solid #287d28; border-radius: 4px; font: 16px monospace; min-width: 40px; min-height: 32px; cursor: pointer; }
.cv-pagination button:hover:enabled { border-color: lime; }
.cv-pagination button:disabled { opacity: .3; cursor: default; }
.cv-corner :focus-visible { outline: 1px dashed lime; outline-offset: 4px; }
@media (max-width: 768px) {
 .about-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; width: 96vw; margin-top: 32px; }
 .crt-container { min-height: min(74svh, 720px); }
 .crt-screen { padding: 22px 18px; align-items: stretch; }
 .terminal-bar { padding: 12px 18px; }
 .terminal-command { font-size: 12px; }
 #bio-display { font-size: 14px; }
 .statement-corner { gap: 12px; }
 #ascii-sphere { font-size: 5px !important; }
 .statement-box { padding: 9px; }
 .cv-corner { justify-self: end; margin-right: 12px; }
}
@media (min-width: 769px) and (max-width: 1050px) {
 .about-layout { gap: 20px; }
 .crt-screen { padding: 24px 20px; }
 #ascii-sphere { font-size: 6px !important; }
 .statement-corner { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .statement-box .cursor { animation: none; } }

/* Desktop composition fits within the viewport, including PDF controls. */
@media (min-width: 769px) {
  #about-content { display: flex; align-items: center; padding: 88px 0 28px; }
  .about-layout {
    --panel-height: min(520px, calc(100svh - 250px));
    width: min(1360px, 94vw);
    grid-template-columns: minmax(0, 1fr) calc(var(--panel-height) * 595 / 842);
    align-items: start;
    gap: 26px;
    margin: 0 auto;
  }
  .crt-container { height: var(--panel-height); min-height: 0; }
  .terminal-bar { padding: 7px 18px; }
  .crt-screen { padding: 16px 20px; gap: 10px; min-height: 0; overflow: hidden; }
  .terminal-command { font-size: 12px; flex-shrink: 0; }
  #bio-display { font-size: 14px; line-height: 1.45; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-color: #00a600 black; }
  #bio-display p { margin-bottom: 12px; }
  #bio-display p:last-child { margin-bottom: 0; }
  .about-bottom { flex: 0 0 auto; margin-top: 0; padding-top: 8px; }
  .statement-corner { gap: 16px; }
  #ascii-sphere { font-size: 6px !important; }
  .statement-box { padding: 10px; }
  #statement-scroll { height: 104px; }
  .cv-corner { width: 100%; gap: 7px; }
  #cv-preview-link { height: var(--panel-height); }
  #cv-preview-link img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  .cv-pagination button { min-height: 28px; }
  footer { margin-top: 0 !important; padding: 12px 0 !important; }
}
@media (max-width: 768px) {
  .cv-corner { width: min(100%, 420px); margin-right: 0; }
}

/* Chinese pixel font; other language typography is unchanged. */
@font-face {
  font-family: 'Fusion Pixel Chinese';
  src: url('../fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
html[lang="zh"] #bio-display,
html[lang="zh"] #statement-scroll,
html[lang="zh"] #terminal-title,
html[lang="zh"] .cv-corner,
.language-selection #lang-zh {
  font-family: 'Fusion Pixel Chinese', monospace;
}