html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#252522;color:#e7e5df;font:14px system-ui,sans-serif}body{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#loading{position:fixed;inset:0;display:grid;place-items:center;background:#252522;padding:32px;text-align:center}[hidden]{display:none!important}
.loading-content{width:min(320px,100%)}progress{width:100%;height:6px;accent-color:#b8c791}.loading-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}button{font:inherit;color:inherit;background:#393a32;border:1px solid #77796a;border-radius:6px;padding:10px 14px;cursor:pointer}button:focus-visible{outline:2px solid #d4e5a7;outline-offset:3px}

/* A compositor-animated spinner remains live during synchronous WASM work. */
#document-loading{position:fixed;inset:0;z-index:10;display:grid;place-items:center;cursor:progress}
.document-loading-card{box-sizing:border-box;max-width:min(380px,calc(100vw - 48px));padding:18px;background:#27262b;color:#ebe8ee;border:1px solid #454046;border-radius:10px;box-shadow:0 8px 28px #0003}
.document-loading-heading{display:flex;align-items:center;gap:12px;overflow-wrap:anywhere}
.document-loading-card p{margin:8px 0 0;color:#b9b3bf;font-size:12px}
progress.document-spinner{appearance:none;flex:none;width:20px;height:20px;box-sizing:border-box;border:2px solid #635158;border-top-color:#cc7769;border-right-color:#cc7769;border-radius:50%;background:none;animation:document-spin .8s linear infinite;will-change:transform}
progress.document-spinner::-webkit-progress-bar{display:none}
progress.document-spinner::-moz-progress-bar{background:none}
@keyframes document-spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){progress.document-spinner{animation-duration:6s}}

.clipboard-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:#27262b;color:#ebe8ee;border:1px solid #635158;border-radius:12px;padding:24px;box-shadow:0 12px 48px #0006;line-height:1.5}
.clipboard-dialog::backdrop{background:#0007}
.clipboard-dialog h2{margin:0 0 16px;font-size:20px}
.clipboard-dialog p{margin:12px 0}
.clipboard-message{color:#e6baad}
.clipboard-message:empty{display:none}
.clipboard-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* Match the homepage account dialog around the shared /v1/accounts/ui forms. */
.account-dialog{box-sizing:border-box;padding:0;border:1px solid #373c3e;border-radius:14px;background:#17191b;color:#f1f2ef;box-shadow:0 20px 100px #0008;width:540px;height:min(850px,calc(100dvh - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:hidden}
.account-dialog::backdrop{background:#06080999;backdrop-filter:blur(3px)}
.account-dialog.account-wide{width:760px}
.account-dialog iframe{border:0;display:block;width:100%;height:100%;background:#17191b}
.account-close{box-sizing:border-box;position:absolute;right:14px;top:14px;z-index:3;border:1px solid #fff3;border-radius:50%;width:36px;height:36px;display:inline-grid;place-items:center;background:#17191bbb;color:white;padding:0}
.account-close svg{height:20px;width:20px}
.account-close:focus-visible{outline:2px solid #72c6bc;outline-offset:5px}
@media(max-width:650px){.account-dialog,.account-dialog.account-wide{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-width:100vw;max-height:100dvh;border-radius:12px}}

#account-status{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100vw - 32px);padding:12px 18px;border:1px solid #41494b;border-radius:8px;background:#17191b;color:#f1f2ef;font:14px/1.5 system-ui;pointer-events:none}