/* 首頁首屏下半與右欄（115.09.30 律師定案：左側採甲版「索引」、右欄採乙版「窗格」；提案 93_系統報告/115.09.30_首屏下半與右欄三版提案）。
   左：大標下 40px 短金線，說明句兩層（服務範圍／委任前說明），三詞三欄配頁首既有英文標語（aria-hidden），主按鈕實心香檳金加箭頭、次按鈕細框以細直線分隔。
   右：四個入口合成 2×2 窗格（晞：天剛亮的光），標題落定後依序透光，01 留一抹暖光，窗框十字出線；滑鼠移入或聚焦時窗框轉金、暖光亮起，其餘窗格含 01 暫退。
   進場接續 hero-intro.css 晴字落筆（標題約 1.0 秒落定），總長約 2.3 秒、只播一次；完成態＝各元素本身樣式。
   色碼只用站內既有色；動畫只動 transform／opacity／背景透明度；不新增 JS（指標光沿用 v4.js）。 */
.hero-a{--ld-gold:#e0c789;--ld-gold-hi:#f0d897;--ld-rule:#a8976a;--ld-frame:#a8976a73;--ld-frame-hi:#d4b774;--ld-text:#f8f5ef;--ld-soft:#c3cdd3;--ld-seal:#ddc488;--ld-ink:#203b4c}
html[data-theme="dark"] .hero-a{--ld-gold:#d8bf80;--ld-gold-hi:#d8bf80;--ld-rule:#80714d;--ld-frame:#80714d99;--ld-frame-hi:#a58b51;--ld-text:#dae3e7;--ld-seal:#d8bf80;--ld-ink:#172a35}

/* 1440×900 首屏折線落在深底 */
@media(min-width:1001px){.theme-a .hero-a{min-height:720px}}

/* ═══ 左下（甲版） ═══ */
.theme-a .hero-a .lx-lead{margin-top:30px;max-width:34em;font-size:16px;line-height:1.9;color:var(--ld-soft)}
.hero-a .lx-lead::before{content:'';display:block;width:40px;height:1px;margin-bottom:24px;background:var(--ld-gold);transform-origin:0 50%}
.hero-a .lx-scope{display:block;color:var(--ld-text);letter-spacing:.06em}
.hero-a .lx-promise{display:block}
/* 三詞：三欄，中英對照（英文沿用頁首標語，裝飾性、對螢幕閱讀器隱藏） */
.theme-a .hero-a .lx-triad{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin-top:30px;font-size:14px;letter-spacing:0}
.theme-a .hero-a .lx-triad span{display:block;padding:1px 26px 2px 16px;border-left:1px solid var(--ld-frame)}
.theme-a .hero-a .lx-triad span+span:before{content:none}
.hero-a .lx-triad b{display:block;font-weight:400;letter-spacing:3px;color:var(--ld-text);line-height:1.7}
.hero-a .lx-triad i{display:block;font-family:Cormorant,serif;font-style:italic;font-size:15px;letter-spacing:.02em;color:var(--ld-soft);line-height:1.5}
/* 行動：主按鈕為首屏唯一實心金塊；次按鈕維持方角細框小按鈕，以細直線隔開 */
.hero-a .lx-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;margin-top:38px}
.theme-a .hero-a .lx-cta .hero-actions,.theme-a .hero-a .lx-cta .hero-shortcuts{margin-top:0}
.hero-a .lx-cta .hero-shortcuts{align-items:center;gap:12px}
.hero-a .lx-cta .hero-shortcuts::before{content:'';width:1px;height:30px;margin-right:12px;background:var(--ld-frame)}
.theme-a .hero-a .lx-primary,html[data-theme="dark"] .theme-a .hero-a .lx-primary{background:var(--ld-seal);color:var(--ld-ink);min-width:0;min-height:54px;padding:0 20px 0 26px;gap:22px;font-size:15px;letter-spacing:.14em;font-weight:500;justify-content:space-between}
.theme-a .hero-a .lx-primary:hover,.theme-a .hero-a .lx-primary:focus-visible{background:var(--ld-gold-hi);color:var(--ld-ink)}
html[data-theme="dark"] .theme-a .hero-a .lx-primary:hover,html[data-theme="dark"] .theme-a .hero-a .lx-primary:focus-visible{background:var(--ld-seal);color:var(--ld-ink)}
.hero-a .lx-arrow{display:grid;place-items:center;transition:transform .5s cubic-bezier(.22,.7,.2,1)}
.hero-a .lx-primary:hover .lx-arrow,.hero-a .lx-primary:focus-visible .lx-arrow{transform:translateX(3px)}
.theme-a .hero-a .lx-primary:focus-visible{outline:2px solid var(--ld-gold-hi);outline-offset:4px}

/* ═══ 右欄（乙版窗格） ═══ */
.theme-a .hero-a .lx-panes{display:grid;grid-template-columns:1fr 1fr;align-self:end;max-width:460px;border-top:0;padding-top:0;color:var(--ld-text)}
.theme-a .hero-a .lx-panes .lx-head{grid-area:1/1/2/3;margin:0 0 16px;color:#cdd6db;font-size:12px;letter-spacing:2.5px}
.theme-a .hero-a .lx-panes>a.lx-item:nth-of-type(1){grid-area:2/1}
.theme-a .hero-a .lx-panes>a.lx-item:nth-of-type(2){grid-area:2/2;margin-left:-1px}
.theme-a .hero-a .lx-panes>a.lx-item:nth-of-type(3){grid-area:3/1;margin-top:-1px}
.theme-a .hero-a .lx-panes>a.lx-item:nth-of-type(4){grid-area:3/2;margin:-1px 0 0 -1px}
/* 左右呼應：右欄標題前一道 24px 短金線，與左側大標下的短金線同色、同時畫出 */
.hero-a .lx-panes .lx-head::before{content:'';display:inline-block;width:24px;height:1px;margin-right:12px;vertical-align:.35em;background:var(--ld-gold);transform-origin:0 50%}
/* 窗櫺：中央十字框線向外多伸 13px（只畫線、不影響點擊） */
.hero-a .lx-panes::before{content:'';grid-area:2/1/4/3;margin:-13px;pointer-events:none;background:linear-gradient(var(--ld-frame),var(--ld-frame)) 50% 0/1px 13px no-repeat,linear-gradient(var(--ld-frame),var(--ld-frame)) 50% 100%/1px 13px no-repeat,linear-gradient(var(--ld-frame),var(--ld-frame)) 0 50%/13px 1px no-repeat,linear-gradient(var(--ld-frame),var(--ld-frame)) 100% 50%/13px 1px no-repeat;transform:translate(-.5px,-.5px)}
.theme-a .hero-a .hero-directory>a.lx-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:0;min-height:172px;padding:20px 20px 20px 22px;border:1px solid var(--ld-frame);color:inherit;font-size:inherit;background:none;transition:border-color .5s}
.hero-a .hero-directory>a.lx-item>span{opacity:1}
.theme-a .hero-a .lx-panes .lx-num{grid-row:1;grid-column:1;font-family:var(--sans);font-size:13px;letter-spacing:1.5px;font-variant-numeric:tabular-nums;line-height:34px;color:var(--ld-soft);transition:color .5s}
.theme-a .hero-a .lx-panes .lx-seal{grid-row:1;grid-column:1;justify-self:end;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ld-frame);color:var(--ld-gold);transition:background-color .5s,color .5s,border-color .5s,transform .5s cubic-bezier(.22,.7,.2,1)}
.hero-a .lx-panes .lx-body{grid-row:3;grid-column:1;display:block;min-width:0;min-height:74px}
.theme-a .hero-a .lx-panes .lx-title{display:block;font-size:17px;line-height:1.5;letter-spacing:.05em;color:var(--ld-text);word-break:keep-all;transition:color .5s}
.theme-a .hero-a .lx-panes .lx-desc{display:block;margin-top:6px;font-size:12.5px;line-height:1.65;letter-spacing:.03em;color:var(--ld-soft);word-break:keep-all;overflow-wrap:anywhere}
/* 窗格裡的晨光（::after 取代站內下緣線）：01 常亮，其餘滑鼠移入或聚焦時亮起 */
.theme-a .hero-a .hero-directory>a.lx-item::after{inset:0;left:0;bottom:0;width:auto;height:auto;z-index:-1;background:radial-gradient(130% 95% at 0 100%,#c8a95c26,#c8a95c0d 55%,#c8a95c00 80%);opacity:0;transition:opacity .7s}
html[data-theme="dark"] .theme-a .hero-a .hero-directory>a.lx-item::after{background:radial-gradient(130% 95% at 0 100%,#a48b4738,#a48b4712 55%,#a48b4700 80%)}
/* 右欄不用站內指標光（會壓低說明字對比；本版主張「天亮透光」，不主張光隨指標） */
.theme-a .hero-a .lx-panes .lx-item::before{display:none}
.theme-a .hero-a .hero-directory>a.lx-item.is-featured::after,.theme-a .hero-a .hero-directory>a.lx-item:hover::after,.theme-a .hero-a .hero-directory>a.lx-item:focus-visible::after{opacity:1}
.theme-a .hero-a .hero-directory>a.lx-item:hover,.theme-a .hero-a .hero-directory>a.lx-item:focus-visible,.theme-a .hero-a .hero-directory>a.lx-item.is-featured{border-color:var(--ld-frame-hi);z-index:1}
.theme-a .hero-a .lx-panes .lx-item:hover .lx-num,.theme-a .hero-a .lx-panes .lx-item:focus-visible .lx-num,.theme-a .hero-a .lx-panes .is-featured .lx-num{color:var(--ld-gold)}
.theme-a .hero-a .lx-panes .lx-item:hover .lx-title,.theme-a .hero-a .lx-panes .lx-item:focus-visible .lx-title,.theme-a .hero-a .lx-panes .is-featured .lx-title{color:var(--ld-gold-hi)}
.theme-a .hero-a .lx-panes .is-featured .lx-desc{color:#dae3e7}
.theme-a .hero-a .lx-panes .is-featured .lx-seal{border-color:var(--ld-frame-hi)}
/* 方印：靜態金框，滑鼠移入或聚焦才填色（首屏唯一靜態實心金塊留給主按鈕） */
.theme-a .hero-a .lx-panes .lx-item:hover .lx-seal,.theme-a .hero-a .lx-panes .lx-item:focus-visible .lx-seal{background:var(--ld-seal);border-color:var(--ld-seal);color:var(--ld-ink);transform:translateX(3px)}
.theme-a .hero-a .hero-directory>a.lx-item:focus-visible{outline:2px solid var(--ld-gold-hi);outline-offset:3px;z-index:2}
/* 指到其他窗格時，01 暫退為一般窗格（:has 不支援時維持常亮，不影響使用） */
.theme-a .hero-a .lx-panes:has(.lx-item:is(:hover,:focus-visible)) .is-featured:not(:hover):not(:focus-visible){border-color:var(--ld-frame);z-index:0}
.theme-a .hero-a .lx-panes:has(.lx-item:is(:hover,:focus-visible)) .is-featured:not(:hover):not(:focus-visible)::after{opacity:0}
.theme-a .hero-a .lx-panes:has(.lx-item:is(:hover,:focus-visible)) .is-featured:not(:hover):not(:focus-visible) .lx-title{color:var(--ld-text)}
.theme-a .hero-a .lx-panes:has(.lx-item:is(:hover,:focus-visible)) .is-featured:not(:hover):not(:focus-visible) .lx-num{color:var(--ld-soft)}
.theme-a .hero-a .lx-panes:has(.lx-item:is(:hover,:focus-visible)) .is-featured:not(:hover):not(:focus-visible) .lx-desc{color:var(--ld-soft)}
.theme-a .hero-a .lx-panes:has(.lx-item:is(:hover,:focus-visible)) .is-featured:not(:hover):not(:focus-visible) .lx-seal{border-color:var(--ld-frame)}

/* ═══ 進場：左右交錯，接續晴字落筆 ═══
   0.88 短金線 → 0.95／1.07 說明兩層 → 1.00–1.30 窗格依序浮現（右）→ 1.10–1.34 各格短暫透光、01 留光
   → 1.25–1.49 三詞（hero-intro.css 既有）→ 1.50／1.60 按鈕（既有）→ 1.55 十字出線；約 2.25 秒全數落定 */
html:not(.hero-seen):not(.motion-off) .hero-a .lx-lead{animation:none}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-lead::before{animation:ldRule .6s .88s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-scope{animation:hxUp .6s .95s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-promise{animation:hxUp .6s 1.07s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-directory{animation:none}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes .lx-head{animation:hxUp .5s .9s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes .lx-head::before{animation:ldRule .6s .95s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes .lx-item{animation:ldPane .65s 1s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes .lx-item:nth-of-type(2){animation-delay:1.1s}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes .lx-item:nth-of-type(3){animation-delay:1.2s}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes .lx-item:nth-of-type(4){animation-delay:1.3s}
html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hero-directory>a.lx-item::after{animation:ldDawn .9s 1.1s ease-in-out both}
html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hero-directory>a.lx-item:nth-of-type(2)::after{animation-delay:1.18s}
html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hero-directory>a.lx-item:nth-of-type(3)::after{animation-delay:1.26s}
html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hero-directory>a.lx-item:nth-of-type(4)::after{animation-delay:1.34s}
html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hero-directory>a.lx-item.is-featured::after{animation:ldDawnStay .9s 1.1s ease-out both}
html:not(.hero-seen):not(.motion-off) .hero-a .lx-panes::before{animation:ldFade .6s 1.55s ease-out both}
@keyframes ldRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ldPane{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes ldDawn{0%{opacity:0}45%{opacity:.9}100%{opacity:0}}
@keyframes ldDawnStay{0%{opacity:0}45%{opacity:1}100%{opacity:1}}
@keyframes ldFade{from{opacity:0}to{opacity:1}}
/* 鍵盤聚焦：進場中途（含腳本尚未執行時）聚焦某個入口即呈現完成態 */
.hero-a .hero-directory>a:focus{opacity:1!important;transform:none!important}

/* ═══ 平板（621–900）：窗格說明收合，窗格貼合內容 ═══ */
/* 1001–1280：左右改等寬，窗格內距收窄，說明維持單行（C3 固定於「與」後斷行） */
@media(min-width:1001px) and (max-width:1280px){
  .theme-a .hero-a{grid-template-columns:1fr 1fr}
  .theme-a .hero-a .hero-directory>a.lx-item{padding:18px 18px 18px 18px}
  .theme-a .hero-a .lx-panes .lx-desc{font-size:12px}
  .theme-a .hero-a .lx-panes .lx-title{font-size:16px;letter-spacing:.03em}}
/* ═══ 寬螢幕（≥1441）：右欄隨寬度加寬，中間空檔不再隨螢幕拉開（115.09.30 律師裁示「甲＋乙」） ═══
   外框沿用全站內容框（與頁首、各區段同一條左右對齊線：左右留白至多 96px，≥1700 內容寬上限 1480px），不另設 1280 框，以免首屏左右緣偏離頁首字標與「聯繫晴晞」。
   右欄寬度以首屏內容寬（100%）計：內容寬 1267px（1440 寬）時 460px，每多 1px 內容寬加 0.846px；1600 寬為 579px（每格約 290px），≥1700（內容寬 1480）為 640px（每格 320px）；
   說明句右緣到窗格左緣全程約 263～300px，不再隨螢幕變寬（以內容寬而非 100vw 計，1646～1699 亦不爬升）。
   窗格名稱 17→19px、說明 12.5→14px、內距同步隨寬度放大（1600 起為定值）。
   垂直：右欄高度＝左欄高度（372px＋大標兩行 3×字級，大標字級沿用 style.css 之 min(4vw,61px)），兩欄同置中；
   注意：372px＝左欄除大標外之固定高度（字標、說明兩行、三詞、按鈕與間距）；左欄文案或間距一改即須重量，否則上下緣靜默失準；
   窗格框上緣＝大標「先」字頂（左欄上緣＋85px＋0.32 字級），下緣＝主按鈕底緣；右欄標題與所名同一中線。 */
@media(min-width:1441px){
  .theme-a .hero-a{grid-template-columns:minmax(0,1fr) clamp(460px,460px + (100% - 1267.2px) * .846,680px)}
  .theme-a .hero-a .lx-panes{align-self:center;max-width:none;height:calc(372px + 3 * min(4vw,61px));grid-template-rows:calc(85px + .32 * min(4vw,61px)) 1fr 1fr}
  .theme-a .hero-a .lx-panes .lx-head{align-self:start;margin:19px 0 0}
  .theme-a .hero-a .hero-directory>a.lx-item{min-height:0;padding:clamp(20px,20px + (100vw - 1440px) / 40,24px) clamp(20px,20px + (100vw - 1440px) / 40,24px) clamp(20px,20px + (100vw - 1440px) / 40,24px) clamp(22px,22px + (100vw - 1440px) / 40,26px)}
  .theme-a .hero-a .lx-panes .lx-title{font-size:clamp(17px,17px + (100vw - 1440px) / 80,19px)}
  .theme-a .hero-a .lx-panes .lx-desc{margin-top:clamp(6px,6px + (100vw - 1440px) / 80,8px);font-size:clamp(12.5px,12.5px + (100vw - 1440px) * .009375,14px)}}
/* ≤1000：窗格說明收合，窗格貼合內容（編號列下直接接名稱） */
@media(max-width:1000px){
  .theme-a .hero-a .lx-panes{max-width:380px;grid-template-rows:auto 1fr 1fr}
  .theme-a .hero-a .hero-directory>a.lx-item{grid-template-rows:auto auto;align-content:start;min-height:0;padding:14px 14px 18px 16px}
  .hero-a .lx-panes .lx-body{grid-row:2;align-self:start;min-height:0;margin-top:16px}
  .theme-a .hero-a .lx-panes .lx-title{font-size:15px}
  .theme-a .hero-a .lx-panes .lx-desc{display:none}
  .hero-a .lx-cta .hero-shortcuts::before{display:none}
  .theme-a .hero-a .lx-triad span{padding-right:16px}}

/* ═══ 手機（≤620）：堆疊；主按鈕滿欄、次按鈕並排；窗格 2×2 滿欄 ═══ */
@media(max-width:620px){
  .theme-a .hero-a .lx-lead{margin-top:24px;font-size:15px;line-height:1.85}
  .hero-a .lx-lead::before{margin-bottom:18px;width:32px}
  .theme-a .hero-a .lx-triad{grid-template-columns:repeat(3,1fr);margin-top:24px;font-size:13px}
  .theme-a .hero-a .lx-triad span{padding:0 6px 1px 10px}
  .hero-a .lx-triad b{letter-spacing:1.5px}
  .hero-a .lx-triad i{font-size:14px}
  .hero-a .lx-cta{flex-direction:column;align-items:stretch;gap:14px;margin-top:28px}
  .theme-a .hero-a .lx-cta .hero-actions{display:block}
  .theme-a .hero-a .lx-primary{display:flex;width:100%}
  .hero-a .lx-cta .hero-shortcuts{gap:10px}
  .theme-a .hero-a .lx-cta .hero-shortcuts>a{flex:1;justify-content:center;min-height:44px}
  .theme-a .hero-a .lx-panes{align-self:auto;max-width:none;margin:0}
  .theme-a .hero-a .lx-panes .lx-head{margin-bottom:12px}
  .theme-a .hero-a .lx-panes .lx-seal{width:30px;height:30px}
  .theme-a .hero-a .lx-panes .lx-num{line-height:30px}
  .theme-a .hero-a .lx-panes .lx-title{letter-spacing:.03em}}

/* 無障礙驗收必修 M-H（115.09.30）：滑鼠停在窗格時，站內首屏指標光暈（v4.js gold-aura）與窗格暖光疊加使說明對比低於 4.5；
   指標進入右欄即收起光暈（左側照常），停留窗格之說明改亮 */
.hero-a:has(.lx-panes:hover) .gold-aura{opacity:0;transition-duration:.25s}
.theme-a .hero-a .lx-panes .lx-item:is(:hover,:focus-visible) .lx-desc{color:#dae3e7}

/* ═══ 中縫（乙版）＋貓腳印（115.09.30 律師定案方向：金色貓腳印由左下按鈕列走到右欄窗格 01 左下角，腳印消失後才出現中縫細線與直排所名；預覽） ═══
   【中縫】兩欄正中立一條與窗框同色的細直線（上緣＝窗格框上緣、下緣＝窗格框下緣；頂端 24px 為金色，呼應大標下與右欄標題前的短金線），
   線右側直排英文所名「Qingxi Law Firm」（書寫體 Italianno，子集自行托管；首字大寫、一般字距），如書頁中縫。
   純裝飾：aria-hidden（中文所名已在首屏），不接收指標，不佔版面（absolute，不入格線）。
   位置：水平＝「大標右緣（7×大標字級；三詞列 374px 取大者）」與「窗格左緣」之中點；窗格寬度公式沿用上方 ≥1441 區段（改窗格寬須同步改 --pw，本段三處）；寬度 <1280 不顯示。
   垂直常數（窗格框上下緣、十字線高度、按鈕列中線）與按鈕列寬 388px、三詞列 374px 以首屏高 720px 與現行左欄文案為前提；左欄文案、間距或按鈕文字一改即須重量。
   【腳印】首播時（html 未帶 hero-seen、未帶 motion-off）才顯示：大標與窗格落定後（2.2 秒）起，左右腳交錯，每 0.46 秒一步，
   由「晴晞影音」右側 30px 沿略向下彎的弧線走到窗格 01 左下角；同時最多 3 個（新一步落下時最舊一個開始淡出、下一步落下前消失）。
   最後一步落在窗格 01 左下角時，窗格 01 框線自該角輕亮一下；腳印依序淡去後，停 0.35 秒，中縫細線由上往下畫出，所名沿線由上往下顯現。
   步數依距離：≥1441 八步、1366–1440 七步、1280–1365 六步（步距約 53～67px）。
   幾何以 CSS hypot()／atan2()／容器單位（cqw）即時計算；瀏覽器不支援時不顯示腳印，中縫照舊版時程（1.5 秒起）出現。
   完成態＝腳印不顯示（display:none）、中縫與所名為本身樣式；同分頁第二次進首頁、減少動態時直接呈現完成態（沿用 hero-intro 機制）。
   只動 opacity／transform（所名之由上往下顯現為遮罩位移，屬純繪製，依 115.09.30 追加指示），不影響版面。 */
@font-face{font-family:QxScript;src:url("/assets/fonts/Italianno-Regular.sub.woff2") format("woff2");font-display:block}
.hx-spine,.hx-paws{display:none}
@media(min-width:1280px){
  .theme-a .hero-a{--sp-at:1.5s}
  .theme-a .hero-a .hx-spine{
    --fs:min(4vw,61px);--pad:var(--gutter);--pw:460px;--lb:max(7 * var(--fs),374px);
    display:block;position:absolute;z-index:0;pointer-events:none;
    left:calc((100% + var(--lb) - var(--pw)) / 2);top:287px;width:1px;height:343px}
  .theme-a .hero-a .hx-spine::before{content:'';position:absolute;inset:0;transform-origin:50% 0;
    background:linear-gradient(var(--ld-gold) 0 0) 0 0/1px 24px no-repeat,linear-gradient(var(--ld-frame) 0 0) 0 0/1px 100% no-repeat}
  .theme-a .hero-a .hx-spine span{position:absolute;left:12px;top:-2px;writing-mode:vertical-rl;white-space:nowrap;font-family:QxScript,cursive;font-size:28px;font-weight:400;line-height:1;letter-spacing:.03em;color:#dae3e7}
  html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hx-spine::before{animation:hxRuleY 1.2s var(--sp-at) cubic-bezier(.22,.7,.2,1) both}
  html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hx-spine span{
    -webkit-mask:linear-gradient(#000 50%,#0000 calc(50% + 18px)) 0 0/100% 200% no-repeat;mask:linear-gradient(#000 50%,#0000 calc(50% + 18px)) 0 0/100% 200% no-repeat;
    animation:hxWrite 1.4s calc(var(--sp-at) + .25s) cubic-bezier(.3,.6,.25,1) both}}
@media(min-width:1441px){.theme-a .hero-a .hx-spine{--pw:clamp(460px,460px + (100% - 2 * var(--pad) - 1267.2px) * .846,680px);top:calc(251.5px - 1.18 * var(--fs));height:calc(287px + 2.68 * var(--fs))}}
@media(min-width:1700px){.theme-a .hero-a .hx-spine{--pad:max(var(--gutter),calc((100vw - 1480px) / 2))}}
@keyframes hxWrite{from{-webkit-mask-position:0 118%;mask-position:0 118%}to{-webkit-mask-position:0 0;mask-position:0 0}}

/* 腳印：.hx-paws 鋪滿首屏作為尺寸容器（cqw＝首屏寬 1%），.hx-trail 置於起點、長度＝起訖直線距離、轉向終點；各腳印沿弦長比例 --t 排列，
   往行進方向右側彎出弦長 5.5% 的弧（--k），左右腳各偏 7px、腳尖各外轉 5°；最後一步不側偏，腳尖正對窗格 01 左下角。 */
@supports (width:hypot(3px,4px)) and (transform:rotate(atan2(1px,2px))) and (container-type:size){
@media(min-width:1280px){
  .theme-a .hero-a{--p0:2.2s;--pn:6;--sp-at:calc(var(--p0) + (var(--pn) + 1) * .46s + .8s + .35s)}
  html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hx-paws{
    --fs:min(4vw,61px);--pad:var(--gutter);--pw:460px;--ey:466.5px;--k:.055;--sz:18px;
    --sx:calc(var(--pad) + 418px);--sy:calc(511.5px + 1.5 * var(--fs));
    --ex:calc(100cqw - var(--pad) - var(--pw) - 11px);
    --dx:calc(var(--ex) - var(--sx));--dy:calc(var(--ey) - var(--sy));--L:hypot(var(--dx),var(--dy));
    --gt:287px;--gh:172px;
    display:block;position:absolute;inset:0;z-index:3;pointer-events:none;container-type:size}
  .hx-trail{position:absolute;left:var(--sx);top:var(--sy);width:var(--L);height:0;transform-origin:0 0;transform:rotate(atan2(var(--dy),var(--dx)));opacity:.66}
  .hx-trail i{--t:calc(var(--i) / (var(--pn) - 1));--o:var(--s);position:absolute;left:calc(var(--t) * 100%);top:calc(4 * var(--k) * var(--t) * (1 - var(--t)) * var(--L) + var(--o) * 7px);
    width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
    transform:rotate(calc(90deg + atan(4 * var(--k) * (1 - 2 * var(--t))) + var(--s) * 5deg));
    background:var(--ld-gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.4 3.9 19.2 18.2'%3E%3Cpath d='M12 12.6c-2.8 0-6.1 3.2-6.1 6 0 2 1.6 3.1 3.3 3.1 1.2 0 2-.55 2.8-.55s1.6.55 2.8.55c1.7 0 3.3-1.1 3.3-3.1 0-2.8-3.3-6-6.1-6z'/%3E%3Cellipse cx='4.7' cy='11.2' rx='1.85' ry='2.35' transform='rotate(-26 4.7 11.2)'/%3E%3Cellipse cx='9' cy='6.9' rx='2' ry='2.6' transform='rotate(-9 9 6.9)'/%3E%3Cellipse cx='15' cy='6.9' rx='2' ry='2.6' transform='rotate(9 15 6.9)'/%3E%3Cellipse cx='19.3' cy='11.2' rx='1.85' ry='2.35' transform='rotate(26 19.3 11.2)'/%3E%3C/svg%3E") 50% 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.4 3.9 19.2 18.2'%3E%3Cpath d='M12 12.6c-2.8 0-6.1 3.2-6.1 6 0 2 1.6 3.1 3.3 3.1 1.2 0 2-.55 2.8-.55s1.6.55 2.8.55c1.7 0 3.3-1.1 3.3-3.1 0-2.8-3.3-6-6.1-6z'/%3E%3Cellipse cx='4.7' cy='11.2' rx='1.85' ry='2.35' transform='rotate(-26 4.7 11.2)'/%3E%3Cellipse cx='9' cy='6.9' rx='2' ry='2.6' transform='rotate(-9 9 6.9)'/%3E%3Cellipse cx='15' cy='6.9' rx='2' ry='2.6' transform='rotate(9 15 6.9)'/%3E%3Cellipse cx='19.3' cy='11.2' rx='1.85' ry='2.35' transform='rotate(26 19.3 11.2)'/%3E%3C/svg%3E") 50% 50%/contain no-repeat;
    opacity:0;animation:hxPaw 1.38s calc(var(--p0) + var(--i) * .46s) linear both}
  .hx-trail i:nth-child(1){--i:0;--s:-1}.hx-trail i:nth-child(2){--i:1;--s:1}.hx-trail i:nth-child(3){--i:2;--s:-1}.hx-trail i:nth-child(4){--i:3;--s:1}
  .hx-trail i:nth-child(5){--i:4;--s:-1}.hx-trail i:nth-child(6){--i:5;--s:1}.hx-trail i:nth-child(7){--i:6;--s:-1}.hx-trail i:nth-child(8){--i:7;--s:1}
  .hx-trail i:nth-child(n+7){display:none}
  .hx-trail i:nth-child(6){--o:0;animation-name:hxPawLast;animation-duration:1.72s}
  /* 窗格 01 框線自左下角輕亮：外層依窗格 01 位置外擴 12px，徑向遮罩由左下角向外淡出；內層畫金框與柔光 */
  .hx-glow{position:absolute;left:calc(100cqw - var(--pad) - var(--pw) - 12px);top:calc(var(--gt) - 12px);width:calc(var(--pw) / 2 + 24px);height:calc(var(--gh) + 24px);
    -webkit-mask:radial-gradient(circle at 12px calc(100% - 12px),#000 0 24%,#0000 80%);mask:radial-gradient(circle at 12px calc(100% - 12px),#000 0 24%,#0000 80%);
    opacity:0;animation:hxGlow 1.7s calc(var(--p0) + (var(--pn) - 1) * .46s + .06s) both}
  .hx-glow::before{content:'';position:absolute;inset:12px;border:1px solid var(--ld-gold-hi);box-shadow:0 0 14px #f0d89759,inset 0 0 12px #f0d89726}
  html[data-theme="dark"] .hx-trail{opacity:.56}
  html[data-theme="dark"] .hx-glow::before{box-shadow:0 0 14px #d8bf8047,inset 0 0 12px #d8bf801f}}
@media(min-width:1366px){
  .theme-a .hero-a{--pn:7}
  .hx-trail i:nth-child(7){display:block;--o:0;animation-name:hxPawLast;animation-duration:1.72s}
  .hx-trail i:nth-child(6){--o:var(--s);animation-name:hxPaw;animation-duration:1.38s}}
@media(min-width:1441px){
  .theme-a .hero-a{--pn:8}
  html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hx-paws{--pw:clamp(460px,460px + (100cqw - 2 * var(--pad) - 1267.2px) * .846,680px);--ey:calc(402.5px + .16 * var(--fs));--sz:20px;
    --gt:calc(251.5px - 1.18 * var(--fs));--gh:calc(143.5px + 1.34 * var(--fs))}
  .hx-trail i:nth-child(8){display:block;--o:0;animation-name:hxPawLast;animation-duration:1.72s}
  .hx-trail i:nth-child(7){--o:var(--s);animation-name:hxPaw;animation-duration:1.38s}}
@media(min-width:1700px){html:not(.hero-seen):not(.motion-off) .theme-a .hero-a .hx-paws{--pad:max(var(--gutter),calc((100vw - 1480px) / 2))}}
}
/* 每步 0.46 秒：0.18 秒按下（略放大回正）→ 停留至兩步之後 → 下一步落下前淡盡（像腳印慢慢乾掉）；最後一步多停、淡得更慢 */
@keyframes hxPaw{0%{opacity:0;scale:1.1;animation-timing-function:cubic-bezier(.2,.7,.3,1)}13%{opacity:1;scale:1}66.7%{opacity:1;animation-timing-function:cubic-bezier(.45,0,.7,1)}100%{opacity:0;scale:1}}
@keyframes hxPawLast{0%{opacity:0;scale:1.1;animation-timing-function:cubic-bezier(.2,.7,.3,1)}10.5%{opacity:1;scale:1}53.5%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}100%{opacity:0;scale:1}}
@keyframes hxGlow{0%{opacity:0;animation-timing-function:cubic-bezier(.3,.6,.3,1)}22%{opacity:.85;animation-timing-function:cubic-bezier(.5,0,.6,1)}100%{opacity:0}}