/* 首頁（中文 / 英文共用）：與投影片相同的 1920×1080 版面，等比縮放 */
.home { background: #ebe6dc; }
.home .slide { opacity: 1; visibility: visible; }
.home__bg { position: absolute; inset: 0; background: url("../media/home-hero.jpg") 70% 26% / cover no-repeat; }
.home__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(241, 238, 231, .97) 0%, rgba(241, 238, 231, .84) 30%, rgba(241, 238, 231, .12) 58%, rgba(241, 238, 231, 0) 75%),
              linear-gradient(0deg, rgba(235, 230, 220, .78) 0%, rgba(235, 230, 220, 0) 48%); }
.home__head { position: absolute; left: 120px; top: 86px; width: 900px; }
.home__head .kicker { font-size: 21px; letter-spacing: .2em; color: #8a4f12; }
.home__head h1 { font-size: 118px; margin: 4px 0 8px; letter-spacing: .08em; color: #12171a; }
.home__head p { font-size: 27px; color: #2f383d; margin: 0; line-height: 1.6; }
.home__how { margin-top: 24px !important; font-size: 19px !important; color: #4a535a !important; display: flex; gap: 24px; }
.home__how kbd { font-family: var(--mono); font-size: 16px; border: 1px solid rgba(255,255,255,.9); border-bottom-width: 2px; border-radius: 6px; padding: 1px 8px; background: rgba(255,255,255,.75); margin: 0 3px; }
.chapters { position: absolute; left: 120px; right: 120px; bottom: 76px; display: grid; grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr 1fr; grid-auto-rows: 200px; gap: 20px; }
.ch { position: relative; padding: 18px 22px 16px; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.44)); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 16px 44px rgba(28,38,48,.14), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.ch.is-open { grid-row: span 2; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); }
.ch.is-open::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--accent); }
.ch__no { font-family: var(--mono); font-size: 16px; color: #8a4f12; letter-spacing: .12em; }
.ch__t { font-family: var(--serif); font-size: 28px; font-weight: 800; margin: 2px 0 0; line-height: 1.3; color: #12171a; }
.ch.is-open .ch__t { font-size: 34px; }
.ch__p { font-family: var(--mono); font-size: 15px; color: #59616a; }
.ch ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; font-size: 21px; }
.ch li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #59616a; }
.ch li a { color: #0b557b; font-weight: 700; text-decoration: none; }
.ch li a:hover { text-decoration: underline; }
.ch li .st { font-size: 14px; font-family: var(--mono); color: #6b737a; white-space: nowrap; }
.ch li .st.ok { color: #23804a; }
.ch li:has(.quick) { flex-direction: column; align-items: flex-start; gap: 6px; }
.ch .quick { display: flex; gap: 6px; }
.ch .quick a { font-size: 15px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: rgba(15,108,155,.1); color: #0b557b; text-decoration: none; white-space: nowrap; }
.ch .quick a:hover { background: rgba(15,108,155,.2); text-decoration: none; }
.ch__soon { margin-top: auto; font-size: 16px; color: #6b737a; }
.home__foot { position: absolute; left: 120px; right: 120px; bottom: 26px; display: flex; justify-content: space-between; gap: 24px; font-size: 15px; color: #59616a; }
.home__foot a { color: #0b557b; }
/* 語言切換（右上角） */
.lang { position: absolute; right: 120px; top: 92px; display: flex; gap: 2px; padding: 4px; border-radius: 999px; font-size: 19px;
  background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 6px 20px rgba(28,38,48,.14);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }
.lang a { padding: 6px 20px; border-radius: 999px; color: #23292d; text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.lang a[aria-current] { background: #0f6c9b; color: #fff; }
.lang a:not([aria-current]):hover { background: rgba(255,255,255,.85); color: #0b557b; }