:root {
    --bg: #000;
    --ink: #ece7db;
    --dim: rgba(236, 231, 219, .52);
    --faint: rgba(236, 231, 219, .16);
    --gold: #d9c48f;
    --serif: "Songti TC", "PMingLiU", "MingLiU", "Noto Serif CJK TC", serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--serif); }
  #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
  #stage:active { cursor: grabbing; }

  .brand { position: fixed; top: 32px; left: 36px; pointer-events: none; }
  .brand h1 { font-weight: 900; font-size: 30px; letter-spacing: .42em; }
  .brand p { margin-top: 10px; font-size: 13px; letter-spacing: .3em; color: var(--dim); }
  .brand .seal { display: inline-block; margin-top: 14px; padding: 3px 7px; border: 1px solid var(--gold); color: var(--gold); font-size: 11px; letter-spacing: .2em; }

  .meter { position: fixed; right: 36px; top: 168px; text-align: right; pointer-events: none; }
  .meter .num { font-size: 40px; font-weight: 900; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
  .meter .cap { font-size: 12px; letter-spacing: .3em; color: var(--dim); }
  .meter .bar { margin: 10px 0 0 auto; width: 140px; height: 1px; background: var(--faint); position: relative; }
  .meter .bar i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); width: 0; box-shadow: 0 0 10px rgba(255,255,255,.6); }

  .labels { position: fixed; inset: 0; pointer-events: none; }
  .lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13px; letter-spacing: .22em; display: flex; align-items: center; gap: 10px; opacity: 0; will-change: transform, opacity; }
  .lbl::before { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.15)); }
  .lbl em { font-style: normal; color: var(--gold); font-size: 11px; }

  .labels, .meter, .cal { transition: opacity .5s; }
  body.reading .labels, body.reading .meter, body.reading .cal { opacity: 0; }

  .cal { position: fixed; right: 36px; top: 32px; text-align: right; pointer-events: none; }
  .cal-d { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; font-size: 22px; font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
  .cal-d b { font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: .3em; }
  .cal-l { margin-top: 8px; font-size: 14px; letter-spacing: .3em; }
  .cal-g { margin-top: 6px; font-size: 12px; letter-spacing: .32em; color: var(--dim); }
  .cal-t { margin-top: 6px; font-size: 12px; letter-spacing: .2em; color: var(--dim); font-variant-numeric: tabular-nums; }
  .slip .when { white-space: pre-line; margin-top: 10px; font-size: 11px; line-height: 1.7; letter-spacing: .12em; color: var(--dim); }
  .slip .formula { margin-top: 6px; font-size: 12px !important; line-height: 1.7 !important; color: var(--dim); letter-spacing: .04em !important; }

  .slip { position: fixed; right: 36px; top: 50%; width: 380px; max-height: calc(100vh - 120px); overflow-y: auto; transform: translate(24px, -50%); opacity: 0; pointer-events: none; transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); z-index: 3;
    padding: 30px 30px 26px; background: linear-gradient(180deg, rgba(14,13,11,.86), rgba(6,6,5,.9)); border: 1px solid rgba(217,196,143,.35); box-shadow: 0 0 60px rgba(0,0,0,.8), inset 0 0 40px rgba(217,196,143,.05); backdrop-filter: blur(6px); scrollbar-width: none; }
  .slip::-webkit-scrollbar { display: none; }
  .slip.show { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
  .slip .close { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--dim); font-size: 20px; cursor: pointer; font-family: var(--serif); }
  .slip .close:hover { color: var(--ink); }
  .slip .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .24em; color: var(--dim); }
  .slip .rank { color: #000; background: var(--gold); padding: 3px 10px 3px 12px; font-weight: 900; letter-spacing: .3em; }
  .slip .rank.low { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
  .slip .head { display: flex; align-items: center; gap: 22px; margin: 14px 0 10px; }
  .slip .gua { display: grid; gap: 7px; width: 64px; flex: none; }
  .slip .gua i { display: flex; justify-content: space-between; height: 8px; }
  .slip .gua i::before, .slip .gua i::after { content: ""; background: var(--ink); height: 100%; width: 42%; box-shadow: 0 0 8px rgba(255,255,255,.35); }
  .slip .gua i.yang::before { width: 100%; }
  .slip .gua i.yang::after { display: none; }
  .slip .gua i.move::before, .slip .gua i.move::after { background: var(--gold); box-shadow: 0 0 12px rgba(217,196,143,.8); }
  .slip .name { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: .06em; }
  .slip .full { margin-top: 8px; font-size: 13px; letter-spacing: .3em; color: var(--gold); }
  .slip .sec { border-top: 1px solid var(--faint); padding: 10px 0; }
  .slip .sec h4 { font-size: 11px; font-weight: 400; letter-spacing: .32em; color: var(--dim); margin-bottom: 7px; }
  .slip .sec p { font-size: 14px; line-height: 1.75; letter-spacing: .06em; }
  .slip .sec p.orig { font-weight: 700; }
  .slip .sec p small { color: var(--dim); font-size: 13px; }
  .slip .chg { display: flex; align-items: baseline; gap: 10px; }
  .slip .chg b { font-size: 22px; font-weight: 900; color: var(--gold); }
  .slip .plate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
  .slip .plate div { font-size: 11px; color: var(--dim); letter-spacing: .14em; }
  .slip .plate div b { display: block; margin-top: 3px; font-size: 14px; color: var(--ink); font-weight: 700; letter-spacing: .1em; }
  .slip .foot { margin-top: 6px; font-size: 11px; letter-spacing: .24em; color: var(--dim); text-align: center; }
  .phase { position: fixed; left: 36px; top: 226px; font-size: 12px; letter-spacing: .4em; color: var(--gold); opacity: 0; transition: opacity .4s; pointer-events: none; }
  .phase.on { opacity: 1; }

  @media (max-width: 760px) {
    .slip { right: 12px; left: 12px; width: auto; top: auto; bottom: 12px; transform: translateY(24px); max-height: 62vh; padding: 22px 20px; }
    .slip.show { transform: translateY(0); }
    .slip .name { font-size: 40px; }
    .phase { top: 170px; left: 18px; }
    .brand { top: 18px; left: 18px; }
    .brand h1 { font-size: 22px; }
    .meter { display: none; }
    .cal { top: 18px; right: 18px; }
    .cal-g, .cal-t { display: none; }
    .meter .num { font-size: 28px; }
    .lbl { font-size: 11px; }
    .lbl::before { width: 22px; }
  }

:root{color-scheme:dark}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,#stage:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.work-nav{position:fixed;z-index:7;top:max(12px,env(safe-area-inset-top));left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;font:13px system-ui,sans-serif;gap:8px}
.work-nav a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;white-space:nowrap}
.work-nav .nav-actions{display:flex;align-items:center;gap:4px}
.work-nav button{font:inherit;min-height:44px;min-width:44px;padding:0 8px;border:1px solid var(--faint);background:rgba(0,0,0,.72);color:var(--ink);cursor:pointer}
.work-nav button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.brand{top:80px}.brand h1{font-size:28px;letter-spacing:.24em}.brand p{font-size:12px;letter-spacing:.12em;line-height:1.6;max-width:260px}.brand .seal{display:none}
.cal{top:80px}.cal-d{font-size:19px;gap:10px}.cal-l{font-size:12px}.cal-g,.cal-t{font-size:11px}
.meter{top:218px}.meter .num{font-size:30px}
.controls{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px;padding:8px;background:rgba(0,0,0,.86);border:1px solid var(--faint)}
.controls button{min-width:96px;min-height:46px;padding:8px 16px;font:15px var(--serif);letter-spacing:.15em;color:var(--ink);border:1px solid rgba(217,196,143,.55);background:#090909;cursor:pointer}
.controls button:first-child{color:var(--gold)}.controls button:disabled{opacity:.45;cursor:wait}
.hint{position:fixed;bottom:96px;left:30px;right:30px;color:var(--dim);font-size:12px;letter-spacing:.06em;pointer-events:none;line-height:1.6;text-align:center}
.phase{top:auto;left:0;right:0;bottom:126px;text-align:center;font-size:12px;letter-spacing:.1em}
.slip{max-height:calc(100dvh - 190px);top:50%;padding-top:44px;overscroll-behavior:contain}
.slip .close{width:44px;height:44px;right:2px;top:2px;font-size:26px}.slip .when{overflow-wrap:anywhere}.slip .full{letter-spacing:.14em}.slip .chg{flex-wrap:wrap}
dialog{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;background:#100f0c;color:var(--ink);padding:28px;border:1px solid var(--gold);line-height:1.8;font:15px/1.8 var(--serif)}
dialog::backdrop{background:rgba(0,0,0,.8)}dialog h2{font-size:24px;margin-bottom:18px}dialog p{margin:12px 0}dialog a{color:var(--gold);overflow-wrap:anywhere}dialog .info-close{float:right;min-width:44px;min-height:44px;font:22px serif;background:none;border:1px solid var(--faint);color:var(--ink)}
#loadStatus{position:fixed;left:20px;right:20px;top:48%;text-align:center;z-index:4;background:#000;padding:18px;line-height:1.8}
@media(max-width:760px){
 .work-nav{left:10px;right:10px;font-size:12px}.work-nav a{padding:0 4px}.work-nav .nav-actions{gap:2px}.work-nav button{padding:0 6px}
 .brand{top:76px;left:18px}.brand h1{font-size:24px}.brand p{max-width:calc(100vw - 36px);font-size:11px;letter-spacing:.05em;margin-top:5px}
 .cal{top:137px;left:18px;right:18px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;text-align:left}.cal-d{font-size:14px;gap:6px;white-space:nowrap}.cal-d b{font-size:10px;letter-spacing:.08em}.cal-l{font-size:10px;letter-spacing:.04em;margin-top:0;white-space:nowrap}.cal-g,.cal-t{display:none}
 .labels{position:fixed;inset:auto 16px auto 16px;top:175px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:center}
 .lbl{position:static;transform:none!important;opacity:1!important;font-size:10px;letter-spacing:.04em;white-space:nowrap;line-height:1.5;padding:3px 5px;background:rgba(0,0,0,.8);border:1px solid var(--faint);gap:0}.lbl::before,.lbl em{display:none}
 body.reading .labels{visibility:hidden}.controls{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);max-width:390px;gap:6px;padding:6px}.controls button{min-width:0;flex:1;padding:8px 6px;font-size:14px;min-height:46px}
 .hint{bottom:87px;left:16px;right:16px;font-size:10px}.phase{bottom:115px;padding:0 12px;font-size:11px}
 .slip{left:12px;right:12px;top:auto;bottom:86px;max-height:calc(100dvh - 164px);padding:44px 18px 18px;transform:translateY(24px)}.slip.show{transform:translateY(0)}.slip .name{font-size:36px}.slip .plate{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:761px) and (max-width:1100px){
 .labels{position:fixed;inset:auto 16px auto 16px;top:175px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
 .lbl{position:static;transform:none!important;opacity:1!important;font-size:11px;letter-spacing:.04em;white-space:nowrap;line-height:1.5;padding:3px 6px;background:rgba(0,0,0,.8);border:1px solid var(--faint);gap:0}.lbl::before,.lbl em{display:none}.meter{display:none}body.reading .labels{visibility:hidden}
}
@media(max-width:359px){.cal{gap:4px}.cal-d{font-size:12px;gap:4px}.cal-l{font-size:9px}.brand p{font-size:10px}.work-nav a{font-size:11px}}
@media(max-height:560px) and (min-width:761px){.brand{top:65px}.brand p{display:none}.cal{top:65px}.meter{display:none}.hint{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}