html { background:#03070d; }
body { margin:0; }

#ss-space { position:relative; isolation:isolate; overflow:hidden; background:#03070d; color:#f2f3f5; min-height:760px; padding:32px 44px 22px; font:15px/1.5 Arial,Helvetica,sans-serif; color-scheme:dark; }
#ss-space * { box-sizing:border-box; }
#ss-space canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
#ss-space::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(2,5,10,.34),transparent 75%); }
#ss-space .ss-header { display:flex; align-items:center; justify-content:space-between; gap:24px; }
#ss-space .ss-brand { display:flex; align-items:center; gap:13px; color:#f2f3f5; font-size:23px; letter-spacing:-.6px; text-decoration:none; }
#ss-space .ss-mark { display:grid; grid-template-columns:repeat(2,6px); gap:5px; }
#ss-space .ss-mark b { width:6px; height:6px; border-radius:50%; background:#91a9c3; }
#ss-space .ss-mark b:nth-child(2) { opacity:.5; }
#ss-space .ss-mark b:nth-child(3) { opacity:.7; }
#ss-space .ss-nav { display:flex; align-items:center; gap:25px; }
#ss-space a { color:#e4e8ef; text-decoration:none; }
#ss-space a:hover { color:#fff; }
#ss-space a:focus-visible,#ss-space button:focus-visible { outline:2px solid #b5d6ff; outline-offset:5px; }
#ss-space .ss-login { border:1px solid #78808b; border-radius:4px; padding:8px 15px; }
#ss-space .ss-main { padding:100px 0 88px; }
#ss-space .ss-panel { width:510px; max-width:100%; background:#0a0e15; border:1px solid #38404d; border-radius:7px; box-shadow:0 20px 70px #0005; padding:5px 27px; }
#ss-space .ss-entry { display:grid; grid-template-columns:29px 1fr; gap:20px; padding:25px 0; }
#ss-space .ss-entry + .ss-entry { border-top:1px solid #2a323f; }
#ss-space .ss-entry i { display:block; margin-top:4px; color:#b9c5d6; }
#ss-space .ss-entry svg { width:26px; height:26px; stroke-width:1.35; }
#ss-space h2 { margin:0 0 6px; font:400 25px/1.2 Arial,Helvetica,sans-serif; letter-spacing:-.4px; color:#f2f3f5; }
#ss-space p { margin:0 0 16px; color:#bac2cf; font:400 14px/1.6 Arial,Helvetica,sans-serif; }
#ss-space .ss-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#ss-space .ss-button { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-height:40px; padding:8px 14px; border:1px solid #89929f; border-radius:4px; font:400 14px/1.5 Arial,Helvetica,sans-serif; color:#e9edf5; background:transparent; }
#ss-space .ss-button:hover { background:#1c2532; }
#ss-space .ss-primary { color:#10151d; background:#e2e7ed; border-color:#e2e7ed; }
#ss-space .ss-primary:hover { color:#10151d; background:#fff; }
#ss-space .ss-button:disabled { color:#9aa4b3; border-color:#445061; background:transparent; }
#ss-space .ss-title { display:flex; gap:12px; align-items:center; margin-bottom:6px; }
#ss-space .ss-title h2 { margin:0; }
#ss-space .ss-alpha { font:400 11px/1.5 Arial,Helvetica,sans-serif; letter-spacing:.6px; text-transform:uppercase; border:1px solid #80694b; border-radius:3px; padding:2px 6px; color:#e4c79d; }
#ss-space .ss-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#9eaabb; font-size:12px; }
#ss-space .ss-footer a { color:#aeb9c9; }
#ss-space .ss-motion { display:inline-flex; gap:8px; align-items:center; min-height:36px; padding:4px 0; color:#b7c3d3; background:none; border:0; font:400 12px/1.5 Arial,Helvetica,sans-serif; }
#ss-space .ss-motion i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#9db7d6; }
#ss-space .ss-motion[aria-pressed="true"] i { background:#687487; }
@media (max-width:700px) {
  #ss-space { padding:25px 23px 18px; min-height:730px; }
  #ss-space .ss-nav { gap:14px; font-size:13px; }
  #ss-space .ss-nav .ss-section-link { display:none; }
  #ss-space .ss-brand { font-size:21px; }
  #ss-space .ss-main { padding:78px 0 58px; }
  #ss-space .ss-panel { width:440px; }
}
@media (max-width:400px) {
  #ss-space { padding:20px 16px 14px; }
  #ss-space .ss-panel { padding:3px 19px; }
  #ss-space .ss-entry { grid-template-columns:20px 1fr; gap:12px; padding:24px 0; }
  #ss-space .ss-entry svg { width:20px; height:20px; }
  #ss-space h2 { font-size:23px; }
  #ss-space .ss-footer { gap:9px; flex-wrap:wrap; }
  #ss-space .ss-login { padding:7px 10px; }
}
@media (pointer:coarse) { #ss-space .ss-button,#ss-space .ss-login,#ss-space .ss-motion { min-height:44px; } }

#ss-space { min-height:100svh; display:flex; flex-direction:column; }
#ss-space .ss-main { flex:1; padding:clamp(40px,7vw,100px) 0 48px; }
#ss-space .ss-rpg-note { display:inline-block; color:#9da8b8; font-size:13px; }
#ss-space .ss-login-note { max-width:510px; background:#0a0e15; border:1px solid #38404d; padding:12px 16px; border-radius:4px; }
#ss-space .ss-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#ss-space .ss-skip { position:absolute; top:8px; left:16px; z-index:20; padding:10px 15px; background:#e2e7ed; color:#10151d; transform:translateY(-160%); }
#ss-space .ss-skip:focus { transform:none; }
#ss-space .ss-header { position:relative; z-index:3; }
#ss-space .account-menu { position:relative; min-width:0; }
#ss-space .account-menu summary { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #78808b; border-radius:4px; padding:8px 14px; cursor:pointer; }
#ss-space .account-menu summary:focus-visible { outline:2px solid #b5d6ff; outline-offset:4px; }
#ss-space .account-menu-panel { position:absolute; right:0; top:calc(100% + 10px); width:min(310px,calc(100vw - 32px)); max-height:70svh; overflow:auto; background:#0c121c; border:1px solid #414c5e; border-radius:6px; box-shadow:0 15px 40px #0008; padding:14px; }
#ss-space .account-menu-panel > a,#ss-space .ss-admin-links a { display:block; padding:10px 8px; border-radius:3px; }
#ss-space .account-menu-panel a:hover { background:#1c2532; }
#ss-space .account-provider { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 7px; }
#ss-space .account-provider > span { min-width:0; }
#ss-space .account-provider small { display:block; overflow-wrap:anywhere; color:#aeb9c9; font-size:12px; }
#ss-space .account-provider strong,#ss-space .account-provider em { font-size:12px; font-weight:400; color:#b4c8bc; }
#ss-space .ss-admin-links { border-top:1px solid #2a323f; border-bottom:1px solid #2a323f; margin:8px 0; padding:8px 0; }
#ss-space .ss-admin-links > span { display:block; color:#aeb9c9; padding:6px 8px; font-size:12px; }
@media(max-width:760px){ #ss-space .ss-nav .ss-section-link { display:none; } }
@media(max-width:400px){ #ss-space .account-menu summary { max-width:115px; } }
