/* 导览、易典与弹层的原版式，采用天文仪色值。 */
  /* ---------- 关于 ---------- */
  #about,#shot{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
       opacity:0;visibility:hidden;transition:.45s;background:rgba(5,7,11,.9);
       backdrop--webkit-backdrop-padding:24px}
  body.about-on #about,body.shot-on #shot{opacity:1;visibility:visible}
  .aboutIn{width:min(460px,92vw);padding:40px 36px 30px;text-align:center;
           background:linear-gradient(160deg,rgba(13,22,38,.96),rgba(5,7,11,.98));
           border:1px solid rgba(236,229,214,.34);}
  .aboutIn .seal{margin-bottom:22px}
  .aboutT{font-family:var(--kai);font-size:30px;letter-spacing:.3em;text-indent:.3em;color:var(--ivory)}
  .aboutE{margin-top:9px;font-size:9.5px;letter-spacing:.5em;color:rgba(236,229,214,.4)}
  .aboutRule{width:80px;height:1px;margin:22px auto;
             background:linear-gradient(90deg,transparent,rgba(236,229,214,.5),transparent)}
  #aboutText{font-size:12.5px;line-height:2.2;color:rgba(236,229,214,.66);white-space:pre-line}
  .aboutSign{margin-top:24px;display:flex;align-items:baseline;justify-content:center;gap:12px}
  .aboutSign em{font-style:normal;font-size:13px;letter-spacing:.4em;color:rgba(236,229,214,.85)}
  .aboutSign b{font-weight:400;font-family:Georgia,serif;font-size:12px;letter-spacing:.16em;
               color:rgba(236,229,214,.5)}
  #aboutDate{margin-top:10px;font-size:10.5px;letter-spacing:.22em;color:rgba(236,229,214,.32)}
  #aboutClose{margin-top:26px;background:transparent;border:1px solid rgba(236,229,214,.3);
              color:rgba(236,229,214,.78);font-family:var(--song);font-size:12px;
              letter-spacing:.42em;text-indent:.42em;padding:9px 26px;cursor:pointer;transition:.35s}
  #aboutClose:hover{background:rgba(236,229,214,.1);border-color:rgba(236,229,214,.7)}

  /* ---------- 出图 ---------- */
  .shotIn{display:flex;flex-direction:column;align-items:center;gap:16px;max-height:94vh}
  #shotImg{max-height:78vh;max-width:min(430px,88vw);border:1px solid rgba(236,229,214,.3);}
  .shotBar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
  #shotTip{font-size:11px;letter-spacing:.34em;color:rgba(236,229,214,.5)}
  .shotBar a,.shotBar button{background:transparent;border:1px solid rgba(236,229,214,.32);
       color:rgba(236,229,214,.82);font-family:var(--song);font-size:11.5px;text-decoration:none;
       letter-spacing:.38em;text-indent:.38em;padding:8px 20px;cursor:pointer;transition:.35s}
  .shotBar a:hover,.shotBar button:hover{background:rgba(236,229,214,.1);border-color:rgba(236,229,214,.72)}

  /* ---------- 桌面 App（Mac 壳注入 html.app） ---------- */
  #shotCopy{display:none}
  html.app #shotCopy{display:inline-block}
  html.app #link{display:none}                 /* 本机地址发给别人打不开，部署后再放出来 */
  html.app #codexBar{padding-top:34px}         /* 让出窗口左上角的红黄绿三个按钮 */


  /* ---------- 导览（左字幕 + 右罗盘，录屏即成片） ---------- */
  #tourShade{position:fixed;inset:0;z-index:24;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
             background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.34) 34%,transparent 56%)}
  #tour{position:fixed;left:7vw;top:50%;transform:translateY(-50%);z-index:25;width:min(37vw,560px);
        pointer-events:none}
  #tour > *{opacity:0;transform:translateY(14px);
            transition:opacity .45s ease,transform .45s ease}
  #tour.show > *{opacity:1;transform:none;
                 transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.3,1)}
  #tour.show h2{transition-delay:.08s}
  #tour.show .num,#tour.show .sign{transition-delay:.3s}
  #tour.show .sub{transition-delay:.55s}
  #tour .ttag{display:flex;align-items:center;gap:14px;margin-bottom:30px}
  #tour .ttag b{font-weight:400;font-size:12px;letter-spacing:.32em;text-indent:.32em;padding:5px 10px;
              color:#f7e6cd;background:var(--cinnabar);}
  #tour .ttag i{font-style:normal;font-size:11px;letter-spacing:.42em;color:rgba(236,229,214,.48)}
  #tour h2{font-family:var(--song);font-weight:600;font-size:clamp(28px,3.1vw,48px);line-height:1.52;
           letter-spacing:.05em;color:var(--ivory);}
  #tour h2 em{font-style:normal;color:var(--cinnabar);}
  #tour .num{margin-top:34px;font-family:var(--mono);font-size:clamp(46px,5.3vw,84px);line-height:1;
             letter-spacing:-.01em;color:var(--ivory);font-variant-numeric:tabular-nums;}
  #tour .num.cjk{font-family:var(--kai);letter-spacing:.06em}
  #tour .num small{font-family:var(--song);font-size:max(15px,.27em);letter-spacing:.3em;margin-left:16px;
                   color:rgba(236,229,214,.78);vertical-align:.35em}
  #tour .sub{margin-top:22px;font-size:13px;line-height:2.05;letter-spacing:.1em;color:rgba(236,229,214,.56)}
  #tour .sub b{font-weight:400;color:var(--ivory)}
  #tour .sub .live{color:rgba(236,229,214,.86)}
  #tour .sign{margin-top:38px;display:flex;align-items:center;gap:16px}
  #tour .sign em{display:block;font-style:normal;font-size:14px;letter-spacing:.42em;color:rgba(236,229,214,.85)}
  #tour .sign b{display:block;margin-top:6px;font-weight:400;font-family:Georgia,serif;font-size:13px;
                letter-spacing:.16em;color:rgba(236,229,214,.5)}
  #tourExit{position:fixed;right:24px;bottom:20px;z-index:26;display:none;background:transparent;
            border:1px solid rgba(236,229,214,.22);color:rgba(236,229,214,.6);font-family:var(--song);
            font-size:11px;letter-spacing:.3em;text-indent:.3em;padding:7px 14px;cursor:pointer;transition:.4s}
  #tourExit:hover{border-color:rgba(236,229,214,.6);color:var(--gold)}
  body.tour-on #tourShade{opacity:1}
  body.tour-on #tourExit{display:block}
  body.tour-on.tour-idle #tourExit{opacity:0;pointer-events:none}
  body.tour-on.tour-idle,body.tour-on.tour-idle #stage canvas{cursor:none}
  body.tour-on #hud,body.tour-on #cast,body.tour-on #cardWrap{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
  /* 导览沿用横屏分镜；统一导航与落地页按钮在窄屏也保留。 */

  /* ================= 易典 ================= */
  #codex{position:fixed;inset:0;z-index:60;overflow-y:auto;opacity:0;visibility:hidden;
         background:radial-gradient(ellipse at 50% -8%,rgba(13,22,38,.34),rgba(96,66,18,0) 58%),
                    linear-gradient(180deg,rgba(5,7,11,.96),rgba(5,7,11,.98));
         backdrop-
         -webkit-backdrop-
         transition:opacity .55s ease,visibility .55s;
         scrollbar-width:thin;scrollbar-color:rgba(236,229,214,.3) transparent}
  #codex::-webkit-scrollbar{width:6px}
  #codex::-webkit-scrollbar-thumb{background:rgba(236,229,214,.26)}
  body.codex-on #codex{opacity:1;visibility:visible}
  #codexBar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
            padding:18px 34px;backdrop-
            background:linear-gradient(180deg,rgba(6,5,3,.94),rgba(6,5,3,.62));
            border-bottom:1px solid rgba(236,229,214,.16)}
  #codexBar .t{font-size:14px;letter-spacing:.6em;text-indent:.6em;color:var(--gold)}
  #codexClose{background:transparent;border:1px solid rgba(236,229,214,.32);color:rgba(236,229,214,.8);
              font-family:var(--song);font-size:11.5px;letter-spacing:.34em;text-indent:.34em;
              padding:8px 18px;cursor:pointer;transition:.35s}
  #codexClose:hover{background:rgba(236,229,214,.1);border-color:rgba(236,229,214,.75);color:var(--ivory)}
  #codexBody{max-width:960px;margin:0 auto;padding:56px 34px 110px}

  .cx-lead{position:relative;padding:0 0 8px;margin-bottom:64px}
  .cx-leadline{width:1px;height:56px;margin:0 auto 26px;
               background:linear-gradient(180deg,rgba(236,229,214,.6),transparent)}
  .cx-lead p{font-size:15px;line-height:2.35;text-align:center;color:rgba(236,229,214,.80);
             letter-spacing:.05em;max-width:660px;margin:0 auto}
  .cx-sec{margin-bottom:78px}
  .cx-eyebrow{font-size:10.5px;letter-spacing:.5em;color:rgba(236,229,214,.34);margin-bottom:12px}
  .cx-h{font-family:var(--kai);font-size:30px;font-weight:400;letter-spacing:.16em;color:var(--ivory);
        margin-bottom:26px;padding-bottom:16px;position:relative;}
  .cx-h::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
               background:linear-gradient(90deg,rgba(236,229,214,.55),rgba(236,229,214,.05))}
  .cx-p{font-size:13.5px;line-height:2.25;color:rgba(236,229,214,.72);letter-spacing:.03em;
        margin-bottom:20px;text-align:justify}
  .cx-p b{color:var(--ivory);font-weight:400}
  .cx-note{margin-top:22px;padding:16px 20px;font-size:12.5px;line-height:2;
           color:rgba(236,229,214,.5);border-left:2px solid rgba(236,229,214,.35);
           background:linear-gradient(90deg,rgba(236,229,214,.06),transparent)}

  /* 三爻符号 */
  .tg{display:flex;flex-direction:column;gap:4px;align-items:center}
  .tg u{display:flex;gap:5px;text-decoration:none}
  .tg u.y{width:52px;height:6px;background:var(--ivory);border-radius:1px}
  .tg u.n{width:52px;height:6px;background:none}
  .tg u.n s{display:block;width:23.5px;height:6px;text-decoration:none;border-radius:1px;
            background:var(--ivory)}
  .tg.mini u.y{width:26px;height:3.5px}
  .tg.mini u.n{width:26px;height:3.5px}
  .tg.mini u.n s{width:11px;height:3.5px}
  .tg.mini{gap:2.5px}

  /* 源流 */
  .cx-flow{margin:0 auto 26px;max-width:520px}
  .cx-step{border:1px solid rgba(236,229,214,.18);padding:16px 22px;display:flex;align-items:center;gap:20px;
           background:linear-gradient(160deg,rgba(236,229,214,.05),transparent)}
  .cx-num{font-family:var(--kai);font-size:22px;color:rgba(236,229,214,.55);min-width:56px;letter-spacing:.05em}
  .cx-stitle{font-size:15px;letter-spacing:.3em;color:var(--ivory);min-width:112px}
  .cx-sdesc{font-size:12px;line-height:1.9;color:rgba(236,229,214,.5);flex:1}
  .cx-arrow{text-align:center;color:rgba(236,229,214,.32);font-size:13px;line-height:1;padding:7px 0}

  /* 八卦卡 */
  .cx-grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
  .cx-tri{border:1px solid rgba(236,229,214,.18);padding:20px 14px 16px;text-align:center;
          background:linear-gradient(170deg,rgba(236,229,214,.055),transparent);transition:.4s}
  .cx-tri:hover{border-color:rgba(236,229,214,.5);background:linear-gradient(170deg,rgba(236,229,214,.11),transparent)}
  .cx-tname{font-family:var(--kai);font-size:27px;color:var(--ivory);margin-top:14px;letter-spacing:.05em}
  .cx-tnat{font-size:11px;letter-spacing:.4em;text-indent:.4em;color:rgba(236,229,214,.5);margin-top:2px}
  .cx-tmeta{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin-top:14px;
            padding-top:12px;border-top:1px solid rgba(236,229,214,.14);
            font-size:11px;line-height:1.8;text-align:left}
  .cx-tmeta dt{color:rgba(236,229,214,.36)}
  .cx-tmeta dd{color:rgba(236,229,214,.66)}

  /* 表格 */
  .cx-scroll{overflow-x:auto;margin-bottom:20px;scrollbar-width:thin}
  .cx-scroll table{border-collapse:collapse;width:100%;min-width:640px}
  .cx-scroll th,.cx-scroll td{border:1px solid rgba(236,229,214,.14);padding:9px 6px;text-align:center}
  .cx-scroll thead th{background:rgba(236,229,214,.06);color:rgba(236,229,214,.7);font-weight:400;font-size:11px}
  .cx-scroll thead th span{display:block;margin-top:5px;font-size:12px;letter-spacing:.1em}
  .cx-t64 tbody th{background:rgba(236,229,214,.05);color:rgba(236,229,214,.7);font-weight:400;width:76px}
  .cx-t64 tbody th span{display:block;margin-top:5px;font-size:12px}
  .cx-t64 thead th .tg,.cx-t64 tbody th .tg{align-items:center}
  .cx-t64 .cnr{width:76px;font-size:11px;color:rgba(236,229,214,.42)}
  .cx-cell{cursor:pointer;transition:.28s;position:relative}
  .cx-cell:hover{background:rgba(236,229,214,.13);}
  .cx-cell b{display:block;font-weight:400;font-size:13.5px;color:var(--ivory);letter-spacing:.04em}
  .cx-cell i{display:block;font-style:normal;font-size:10px;margin-top:3px;color:rgba(236,229,214,.4)}
  .cx-cell .lk-吉{color:#dfae63}
  .cx-cell .lk-凶{color:#c07460}
  .cx-tsm td,.cx-tsm th{font-size:12.5px;color:rgba(236,229,214,.66)}
  .cx-tsm .mono{font-family:var(--song);letter-spacing:.06em;color:var(--ivory)}
  .cx-tsm .hot{color:#e0a34e}
  .cx-tpal tbody th{background:rgba(236,229,214,.05);color:var(--ivory);font-weight:400;
                    font-family:var(--kai);font-size:19px;width:64px}
  .cx-tpal tbody th span{display:block;font-family:var(--song);font-size:10px;
                         color:rgba(236,229,214,.38);margin-top:3px;letter-spacing:.1em}
  .cx-end{margin-top:70px;text-align:center;font-size:11.5px;letter-spacing:.42em;
          color:rgba(236,229,214,.3)}



/* ---------- 主画面与落地页 ---------- */
html,body{height:100%;overflow:hidden}body{--gx:38%;--gy:52%;overscroll-behavior:none}
#wxThumb{position:fixed;left:-9999px;top:0;width:500px;height:500px;pointer-events:none;opacity:.01}
#stage{position:fixed;inset:0}#stage canvas{display:block;touch-action:none}
#gate{position:fixed;inset:0;z-index:40;background:radial-gradient(900px 760px at 72% 52%,#0d1626 0%,#080c15 46%,#04060a 100%);
  transition:opacity 1.1s,visibility 1.1s}
#gate.hide{opacity:0;visibility:hidden;pointer-events:none}
#gateDial{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero{position:absolute;left:8.3333%;top:0;bottom:0;width:32.5%;display:flex;flex-direction:column;justify-content:center;z-index:2}
.hero .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:34px;white-space:nowrap}
.hero .eyebrow i{display:block;width:34px;height:1px;background:var(--gold)}
.hero h1{font-weight:300;font-size:clamp(64px,7.2222vw,120px);line-height:1;letter-spacing:.14em;color:var(--ivory);white-space:nowrap}
.hero .sub{margin-top:30px;font-size:20px;letter-spacing:.24em;color:var(--i90);white-space:nowrap}
.hero .desc{margin-top:18px;font-size:14px;line-height:2.1;letter-spacing:.12em;color:var(--i55)}
.gateBtns{display:flex;gap:16px;margin-top:44px}.gateBtns .btn{white-space:nowrap}
.reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--i12)}
.reads>div{padding:20px 0 0 20px;border-left:1px solid var(--i12);min-width:0}
.reads>div:first-child{border-left:0;padding-left:0}
.reads .v{margin-top:12px;font-size:24px;letter-spacing:.08em;color:var(--ivory);white-space:nowrap}
.reads .v.mono{font-size:23px;letter-spacing:0;font-weight:300}
.reads .s{margin-top:8px;font-size:11.5px;letter-spacing:.06em;color:var(--i40);line-height:1.8}
.gateSign{position:absolute;left:8.3333%;bottom:40px;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.34em;color:var(--i40)}
.gateSign em{font-style:normal}.gateSign b{font-weight:400;font-family:var(--latin);letter-spacing:.16em;font-size:12px}
#hud{position:fixed;left:56px;top:104px;z-index:20;pointer-events:none}
#status{margin-top:10px;font-size:15px;letter-spacing:.3em;color:var(--i90)}
#dialRead{position:fixed;left:56px;bottom:96px;z-index:20;font-size:11.5px;line-height:2;letter-spacing:.06em;color:var(--i55);pointer-events:none}
#dialRead b{color:var(--i90);font-weight:400}
#dialControls{position:fixed;left:56px;bottom:40px;display:flex;align-items:center;gap:10px;z-index:32}
html.muted #mSound{color:var(--i22)}html.muted #mSound .waves{display:none}
#cast{opacity:0;visibility:hidden}
#cast.on{opacity:1;visibility:visible}#cast:disabled{opacity:.3}
body.card-on #cast{opacity:0;visibility:hidden}
body:not(.awakened) #hud,body:not(.awakened) #dialRead,body:not(.awakened) #dialControls{visibility:hidden;opacity:0}
#shortcutPanel{position:fixed;left:56px;bottom:86px;z-index:56;width:300px;max-width:calc(100vw - 40px);padding:22px 24px;background:#090f19;border:1px solid var(--i22)}
#shortcutPanel[hidden]{display:none}.helpHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.helpHead button{border:0;font-size:20px;color:var(--i55)}
#shortcutPanel dl{display:grid;grid-template-columns:88px 1fr;gap:12px;font-size:12px;color:var(--i70)}
#shortcutPanel dt{color:var(--i40)}
/* 六爻按原节拍逐爻出现 */
#pillar{position:fixed;left:78%;top:45%;transform:translate(-50%,-50%);z-index:20;text-align:center;opacity:0;transition:opacity .8s;pointer-events:none}
#pillar.on{opacity:1}body.card-on #pillar{opacity:0}
#pcap{font-size:11px;letter-spacing:.5em;color:var(--i40);margin-bottom:18px}
#yao{display:flex;flex-direction:column-reverse;gap:11px;align-items:center}
.yao{position:relative;display:flex;gap:9px;align-items:center;justify-content:center;width:150px;height:13px;opacity:0;transform:translateY(9px);animation:yaoIn .55s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes yaoIn{to{opacity:1;transform:none}}
.yao i{display:block;height:13px;background:var(--ivory)}.yao.yang i{width:96px}.yao.yin i{width:41px}
.yao .mk{position:absolute;right:0;font-size:11px;color:var(--gold-hi)}.yao.moving i{background:var(--gold-hi)}
/* ---------- 卦成：右侧停靠 ---------- */
#cardWrap{position:fixed;right:3.8889%;top:104px;bottom:40px;width:25.4167%;z-index:30;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s,visibility .65s}
#cardWrap.on{opacity:1;visibility:visible}
#card{height:100%;padding-left:34px;border-left:1px solid rgba(212,181,122,.22);display:flex;flex-direction:column;min-height:0;pointer-events:auto}
.cardHead{display:flex;align-items:center;gap:14px;position:relative;min-height:24px}.cardHead .eyebrow{flex:1}
#luck{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cinnabar);color:#e0826c;font-size:12.5px;flex:none}
#close{flex:none;width:28px;height:28px;border:0;color:var(--i40);font-size:20px;padding:4px;line-height:1}
.cardScroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--i22) transparent;padding-right:1px}
.cardScroll::-webkit-scrollbar{width:3px}.cardScroll::-webkit-scrollbar-thumb{background:var(--i22)}
.cardTop{display:flex;align-items:center;gap:26px;margin-top:26px}
#glyph,#bianGlyph{display:flex;flex-direction:column-reverse;gap:6px;flex:none}
.g{display:flex;gap:7px;height:6px}.g i{display:block;height:6px;background:var(--gold)}
.g.yang i{width:64px}.g.yin i{width:28.5px}.g.moving i{background:var(--gold-hi);outline:1px solid rgba(236,215,168,.25)}
#gname{font-weight:300;font-size:clamp(30px,3.19vw,48px);letter-spacing:.08em;line-height:1.15;color:var(--ivory)}
#gpin{margin-top:10px;font-family:var(--latin);font-style:italic;font-size:13px;letter-spacing:.06em;color:var(--i40);line-height:1.5}
.cardMeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:28px;padding:20px 0;border-top:1px solid var(--i12);border-bottom:1px solid var(--i12)}
.cardMeta .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--i40);margin-bottom:5px}
.cardMeta>div>div+div{font-size:14px;letter-spacing:.1em;line-height:1.6;color:var(--i90)}
#txt{margin-top:22px;font-size:17px;line-height:1.85;letter-spacing:.06em;color:var(--ivory);text-wrap:balance}
.line{display:flex;gap:14px;margin-top:14px;font-size:13.5px;line-height:1.85;color:var(--i70);letter-spacing:.03em}
.line .tag{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold);padding-top:3px}
#en{margin-top:14px;font-family:var(--latin);font-style:italic;font-size:13px;line-height:1.8;color:var(--i40)}
.changed{margin-top:22px;padding:18px 0;border-top:1px solid var(--i12);display:flex;gap:18px;align-items:center}
#bianGlyph{gap:4px}#bianGlyph .g{height:4px;gap:5px}#bianGlyph .g i{height:4px;background:var(--gold-dim)}
#bianGlyph .g.yang i{width:36px}#bianGlyph .g.yin i{width:15.5px}
#moving{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--i40);line-height:1.8}
#bian b{display:block;margin-top:6px;font-size:19px;letter-spacing:.14em;font-weight:400;color:var(--ivory)}
#bian p{margin-top:5px;font-size:12.5px;line-height:1.7;color:var(--i55)}
.cardActions{display:flex;gap:12px;padding-top:16px}.cardActions .btn{flex:1;padding:0;white-space:nowrap;font-size:12px;letter-spacing:.25em}
.cardActions .key{margin-left:8px}.cardFoot{display:flex;align-items:center;justify-content:space-between;padding-top:11px;color:var(--i40);font-size:10px;letter-spacing:.2em;min-height:26px}
#link{font-size:10px;border:0;color:var(--i40);letter-spacing:.2em}.cardSign{display:flex;align-items:center;gap:8px}.cardSign .seal{width:15px;height:15px;font-size:9px}.cardSign em{font-style:normal}
body.tour-on #dialControls,body.tour-on #dialRead,body.tour-on #shortcutPanel{opacity:0;visibility:hidden;pointer-events:none}
body.tour-on .top{opacity:0;pointer-events:none}body.tour-on #pillar{left:auto;right:12%;transform:translateY(-50%)}
#aboutText{color:var(--i70)}.aboutIn{box-shadow:none}.aboutRule{background:var(--i22)}
#pwaBar{background:#090f19!important;border-color:var(--i22)!important;color:var(--i70)!important;box-shadow:none!important}
#pwaBar b{color:var(--ivory)!important}#pwaBar button{color:var(--i70)!important;border-color:var(--i22)!important}
@media(max-width:1100px) and (min-width:761px){
  .hero .sub{font-size:16px}.hero .desc{font-size:12px}.gateBtns{gap:10px}.gateBtns .btn{padding:0 22px;font-size:13px}
  .reads>div{padding-left:12px}.reads .v,.reads .v.mono{font-size:20px}.reads .label{font-size:10px;letter-spacing:.15em}
  #card{padding-left:22px}.cardTop{gap:16px}#glyph .g.yang i{width:44px}#glyph .g.yin i{width:18.5px}
  .cardMeta{gap:12px}.cardActions{gap:8px}.cardActions .btn{font-size:10px;letter-spacing:.15em}.cardActions .key{display:none}
}
@media(max-width:760px){
  #gate{overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center}
  .hero{position:relative;left:auto;top:auto;bottom:auto;width:calc(100% - 48px);margin-top:152px;order:0;flex:none}
  .hero .eyebrow{font-size:9px;letter-spacing:.23em;margin-bottom:28px}.hero .eyebrow i{width:24px}
  .hero h1{font-size:68px;letter-spacing:.12em}.hero .sub{font-size:15px;letter-spacing:.16em;margin-top:24px}
  .hero .desc{font-size:12px;line-height:2.1;letter-spacing:.04em;margin-top:16px}
  .gateBtns{margin-top:28px;gap:12px}.gateBtns .btn{padding:0 22px;font-size:12px}
  .reads{margin-top:34px}.reads>div{padding-top:16px;padding-left:10px}
  .reads .label{font-size:10px;letter-spacing:.15em}.reads .v,.reads .v.mono{font-size:19px;margin-top:10px}.reads .s{font-size:9px;letter-spacing:0}
  #gateDial{position:relative;inset:auto;order:1;width:100%;height:100vw;max-height:500px;flex:none;margin-top:16px}
  .gateSign{position:relative;left:auto;bottom:auto;order:2;align-self:flex-start;margin:22px 24px 32px}
  #hud{left:20px;top:128px}#hud .eyebrow{font-size:9px}#status{font-size:13px;letter-spacing:.18em}
  #dialRead{left:20px;bottom:92px;font-size:10px}#dialControls{left:20px;bottom:32px}
  #shortcutPanel{left:20px;bottom:78px}#cast{padding:0 18px}
  #pillar{left:50%;top:27%;transform:translate(-50%,-50%)}
  #cardWrap{top:auto;bottom:0;left:0;right:0;width:100%;height:min(72vh,730px)}
  #card{border:1px solid var(--i22);border-bottom:0;border-radius:14px 14px 0 0;background:rgba(7,11,18,.98);padding:22px 24px 16px}
  .cardTop{margin-top:22px}#gname{font-size:36px}.cardHead .eyebrow{font-size:9px}
  .cardMeta{margin-top:22px;padding:18px 0;gap:12px 18px}.cardMeta>div>div+div{font-size:13px}
  #txt{font-size:16px;margin-top:18px}.line{font-size:12.5px}#en{font-size:12px}
  .cardActions .btn{height:40px;font-size:12px}.changed{margin-top:18px}
  body.card-on #dialRead,body.card-on #dialControls{visibility:hidden}
  #codexBody{padding:34px 18px 80px}.cx-grid8{grid-template-columns:repeat(2,1fr)}.cx-h{font-size:24px}.cx-step{padding:14px 12px;gap:12px}.cx-stitle{min-width:84px}
  #shotImg{max-height:66vh}.aboutIn{padding:32px 24px 24px}#about,#shot{padding:18px}
}