/* Option 2a: ROC / US flags (version B: no underline; active full color, inactive dimmed) */
.site-header .langtg.lflag{all:unset;box-sizing:border-box;position:relative;display:inline-flex!important;align-items:center;gap:8px;height:28px;padding:0!important;margin-left:auto;cursor:pointer;background:none!important;border:0!important;box-shadow:none!important}
.lflag .fl{display:block;flex:none;width:24px;height:16px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 .6px #0000002e;transition:filter .2s,opacity .2s;padding:0!important;background:none!important}
.lflag .fl svg{width:100%;height:100%;display:block}
html:not([data-lang=en]) .lflag .fl.us,html[data-lang=en] .lflag .fl.roc{filter:grayscale(1);opacity:.42}
.lflag .sep{all:unset;font:400 16px/1 "Noto Serif TC",serif;color:#b3a99f}
.lflag .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header .langtg.lflag:focus-visible{outline:2px solid #8f4a42;outline-offset:3px;border-radius:3px}
@media(max-width:820px){.site-header .langtg.lflag{gap:7px;height:24px}.lflag .fl{width:21px;height:14px}.lflag .sep{font-size:14px}}
@media(prefers-reduced-motion:reduce){.lflag .fl{transition:none}}
html body .site-header .langtg.lflag>span.vh{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;padding:0!important;margin:-1px!important;display:block!important;font-size:1px!important}

/* Hover / focus-visible: light up the inactive flag (active flag unchanged) */
.lflag .fl{transition:filter .15s,opacity .15s}

html:not([data-lang=en]) .lflag:focus-visible .fl.us,
html[data-lang=en] .lflag:focus-visible .fl.roc{filter:grayscale(.25);opacity:.75}
@media (hover:hover) and (pointer:fine){html:not([data-lang=en]) .lflag:hover .fl.us,
html[data-lang=en] .lflag:hover .fl.roc{filter:grayscale(.25);opacity:.75}}