/* ============================================================
   Chener · 终端 — macOS Terminal look
   零依赖。配色走经典终端调色，不做霓虹。
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  color: #d4d4d4;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
  background:
    radial-gradient(1200px 700px at 50% -10%, #232a32 0%, rgba(35, 42, 50, 0) 60%),
    linear-gradient(#16191d, #0c0e10);
  overflow-x: hidden;
}

::selection { background: #264f78; color: #fff; }

.desktop {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ---------- 窗口 ---------- */
.window {
  width: min(880px, 100%);
  background: #0e1114;
  border: 1px solid #2b3037;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* ---------- 标题栏 ---------- */
.titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(#3c4046, #2e3136);
  border-bottom: 1px solid #1a1c1f;
  user-select: none;
}

.lights { display: flex; gap: 8px; }
.lights span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 2px rgba(0,0,0,.35); }
.lights .r { background: #ff5f57; }
.lights .y { background: #febc2e; }
.lights .g { background: #28c840; }

.wtitle {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #cfd3d8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wname { font-weight: 700; }
.wsep { color: #8a8f98; }

.lang { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lang-btn {
  background: transparent;
  border: 1px solid #565b63;
  border-radius: 4px;
  color: #b9bec6;
  font: inherit;
  padding: 2px 8px;
  cursor: pointer;
}
.lang-btn[aria-pressed="true"] { background: #4a5058; color: #fff; border-color: #6a7078; }
.lang-sep { color: #6a7078; }

/* ---------- 终端正文 ---------- */
.term {
  padding: 22px 24px 28px;
  font-size: 14px;
  line-height: 1.8;
}

.line {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.line.pre { display: none; }          /* JS 动画逐行揭示 */
.line + .cmdline { margin-top: 0.9em; }

.boot { color: #b9bec6; }
.dim { color: #8a8f98; }
.cmt { color: #6a737d; }

.p-user { color: #7dd87d; font-weight: 700; }
.p-sep { color: #8a8f98; }
.p-path { color: #6aa9ff; font-weight: 700; }
.p-dollar { color: #d4d4d4; }
.cmd { color: #e8eaed; }

.out { color: #cccccc; padding-left: 0; }

/* 项目行：整行可点 */
.proj {
  display: flex;
  align-items: baseline;
  gap: 1.2ch;
  color: #cccccc;
  text-decoration: none;
  padding: 1px 4px;
  margin-left: -4px;
  border-radius: 4px;
}
.proj:hover { background: #1a2b3f; text-decoration: none; }
.proj:hover .phost { text-decoration: underline; }
.pname { color: #7dd87d; font-weight: 700; min-width: 9ch; }
.pdesc { flex: 1 1 auto; color: #b9bec6; }
.parrow { color: #6a7078; }
.phost { color: #6aa9ff; }

/* 联系行 */
.kv {
  display: inline-flex;
  gap: 2ch;
  color: #cccccc;
  text-decoration: none;
  padding: 1px 4px;
  margin-left: -4px;
  border-radius: 4px;
}
.kv:hover { background: #1a2b3f; }
.kv:hover .v { text-decoration: underline; }
.kv .k { color: #d29922; min-width: 10ch; }
.kv .v { color: #6aa9ff; }

/* 可交互命令行：真实输入框，保持终端外观 */
#shell { display: flex; align-items: baseline; }
.shell-input {
  flex: 1 1 auto; min-width: 0;
  margin-left: .35em;
  background: transparent; border: 0; outline: none;
  color: #e8eaed; caret-color: #d4d4d4;
  font: inherit; padding: 0;
}
.shell-input:focus { outline: none; }

/* 读屏用 live 区：视觉隐藏 */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 闪烁光标 */
.cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.15em;
  background: #d4d4d4;
  vertical-align: -0.2em;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 响应式 ---------- */
@media (max-width: 560px) {
  .desktop { padding: 14px 8px; align-items: flex-start; }
  .term { padding: 16px 14px 20px; font-size: 12.5px; line-height: 1.75; }
  .wtitle { font-size: 12px; }
  .proj { flex-wrap: wrap; gap: 0.6ch; }
  .pdesc { flex-basis: 100%; }
  .lang-btn { padding: 2px 6px; }
  .shell-input { font-size: 16px; }   /* iOS：小于 16px 聚焦会自动缩放 */
}

/* ---------- 减少动态偏好：全部动画停用 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}