.character-archive-dialog{width:calc(100vw - 40px);max-width:1600px;max-height:94dvh;border:0;padding:0;background:#020612;color:#edf4ff;overflow:auto}
.character-archive-dialog::backdrop{background:#020612cf;backdrop-filter:blur(7px)}
.archive-close{position:sticky;top:0;margin-left:auto;display:block;z-index:10;padding:12px 20px;color:#edc66a;background:#071126;border:0;font-size:12px;cursor:pointer}
.archive-close:focus-visible{outline:1px solid #edc66a;outline-offset:-3px}
.mini-orbit .portrait{z-index:5}.mini-ring-trace{position:absolute;left:50%;top:50%;width:var(--trace-width);height:var(--trace-height);transform:translate(-50%,-50%) rotate(var(--trace-angle));border:0;background:transparent;border-radius:50%;padding:0;transition:filter .2s,opacity .2s;z-index:4;cursor:pointer}
.mini-ring-trace i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,transparent 47%,var(--ring-color) 48% 49%,transparent 50%);filter:drop-shadow(0 0 5px var(--ring-color));pointer-events:none}
.mini-ring-trace:hover{filter:brightness(1.6);z-index:6}.mini-ring-trace:focus-visible{outline:1px solid var(--ring-color);outline-offset:5px}
body[data-page="archive"] #view{padding:0;min-width:0}body[data-page="archive"] .app-shell{min-width:0}
body[data-page="home"] #view,body[data-page="fate"] #view{position:relative}
.home-fate{position:absolute;right:clamp(25px,5vw,90px);bottom:70px;display:flex;gap:28px;align-items:center;max-width:470px;color:#c5d3e9}
.home-fate h2{font:500 24px/1.5 SimSun,serif;letter-spacing:.1em;color:#eee9d8;margin:12px 0}
.home-fate p:not(.eyebrow){font-size:12px;line-height:1.9;color:#98aaca}
.home-fate-orbit{position:relative;display:grid;place-content:center;justify-items:center;width:150px;height:150px;flex-shrink:0;text-decoration:none;color:#edc66a;transition:filter .2s,transform .2s}
.home-fate-orbit:before{content:'';position:absolute;inset:14px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#edc66a88 0 .5deg,transparent .5deg 30deg),radial-gradient(circle,transparent 61%,#77cdf344 62% 63%,transparent 64%);animation:home-fate-drift 70s linear infinite}
.home-fate-orbit i{position:absolute;inset:0;border:1px solid #edc66a50;border-radius:50%;transform:rotateX(55deg) rotateZ(-22deg)}.home-fate-orbit i:nth-child(2){inset:-5px;transform:rotateX(48deg) rotateZ(47deg);border-color:#80ccef44}
.home-fate-orbit span{font:500 35px SimSun,serif;text-shadow:0 0 28px #e9c66f55}.home-fate-orbit small{font-size:8px;letter-spacing:.3em;margin-top:8px}
.home-fate-orbit:hover{filter:brightness(1.4);transform:translateY(-4px)}.home-fate-orbit:focus-visible{outline:1px solid #edc66a;outline-offset:5px}
.home-fate-play{padding:18px 22px 35px;grid-column:1/-1}.home-fate-play>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px}
.home-fate-play .fate-frame{width:100%;height:calc(100dvh - 110px);min-height:690px;border:0;background:transparent}
body[data-page="fate"] .home-fate{position:static;margin:0 5vw 24px auto}body[data-page="fate"] .home{min-height:520px}
@keyframes home-fate-drift{to{transform:rotate(360deg)}}
@media(max-width:1200px){.home-fate{max-width:320px;gap:12px;right:30px}.home-fate-orbit{width:100px;height:100px}.home-fate h2{font-size:19px}}
@media(max-width:950px){.home-fate,body[data-page="fate"] .home-fate{position:static;margin:0 30px 40px;max-width:100%;gap:30px}.home{min-height:calc(80dvh - 70px)}.home-fate-orbit{width:135px;height:135px}.home-fate-play{padding:0 8px 24px}}
@media(max-width:520px){.character-archive-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh}.home-fate{margin:0 20px 35px;gap:18px}.home-fate-orbit{width:100px;height:100px}.home-fate h2{font-size:17px}.home-fate p:not(.eyebrow){font-size:11px}.home-fate-play .fate-frame{min-height:820px}.home-fate-play>header{padding:14px 5px}}
@media(prefers-reduced-motion:reduce){.home-fate-orbit:before{animation:none}.home-fate-orbit{transition:none}}
.has-account>a,.has-account #account-password,.has-account #account-logout{white-space:nowrap;flex-shrink:0}
.account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.has-account #connection-status,.has-account .header-slash,.has-account #route-label{display:none}.has-account .account-name{margin-left:auto;max-width:90px}.has-account #account-password,.has-account #account-logout{min-height:44px;padding:6px 4px;font-size:13px}}