:root{font-family:YaojingText,"KaiTi",serif;color:#d6d4c9;background:#010305;font-synthesis:none;--gold:#b69b6b;--muted:#aaa69a;--viewport-height:100vh}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010305}
body{min-height:100%;overscroll-behavior:none}
button,a{font:inherit;color:var(--gold);-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
iframe{position:absolute;inset:0;width:100%;height:100%;border:0;touch-action:none;background:#010305}
.connection{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:#010305;padding:24px;font-size:18px}
.connection p{margin:0;line-height:1.7;max-width:28em}
.recovery-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.recovery-actions button,.recovery-actions a,.update-banner button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;border:1px solid #75674b;border-radius:4px;background:#262521;padding:8px 16px;text-decoration:none}
.update-banner{position:fixed;z-index:3;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);padding:8px 12px;border:1px solid #75674b;border-radius:5px;background:#111916f2;font-size:16px}
.update-banner span{min-width:0;line-height:1.5}
.update-banner button{flex:none}
@media(max-width:480px){.update-banner{gap:8px;padding:6px 8px;font-size:14px}.update-banner button{padding:8px 10px;min-width:54px}}
@supports(height:100dvh){:root{--viewport-height:100dvh}}