*{box-sizing:border-box}
:root{color-scheme:dark}
body{margin:0;min-height:100vh;word-break:keep-all;overflow-wrap:anywhere;color:#e7e5f0;font:16px/1.65 "Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%,#4a3c8c66 0%,#2d265a40 38%,transparent 72%),
    radial-gradient(ellipse 45% 35% at 85% 18%,#6b4f9a1f 0%,transparent 70%),
    radial-gradient(ellipse 40% 30% at 12% 30%,#3c5a9a14 0%,transparent 70%),
    #11121d;
  background-repeat:no-repeat;background-attachment:fixed}
/* The logo's windmill, large and faint, hanging off the bottom-right corner. */
body::after{content:"";position:fixed;right:-14vmin;bottom:-18vmin;width:min(78vmin,760px);aspect-ratio:897/816;
  background:url(/emblem.png) no-repeat center/contain;opacity:.055;transform:rotate(-12deg);pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:56px 20px 72px;display:flex;flex-direction:column;align-items:center;gap:32px}
header{display:flex;flex-direction:column;align-items:center;gap:22px}
.logo{width:190px;height:auto;display:block}
.card{width:100%;background:#ffffff0a;border:1px solid #ffffff17;border-radius:14px;padding:28px 26px}
.card h2{margin:0 0 16px;font-size:18px;color:#f2f0f8}
.btn{display:inline-block;padding:13px 30px;border:0;border-radius:10px;background:#7d72c4;color:#fff;font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.btn:hover{background:#8e84d4}
.btn.sub{background:transparent;color:#cfc8f5;box-shadow:inset 0 0 0 1.5px #7d72c4aa}
.btn.sub:hover{background:#7d72c41f}
.btn.off,.btn:disabled{background:#ffffff14;color:#8d8aa3;box-shadow:none;pointer-events:none}
.muted{color:#a19eb6;font-size:14px}
a{color:#b9b0f0}
b{color:#f4f2fb}
[hidden]{display:none!important}
@media(max-width:520px){main{padding:36px 16px 56px;gap:24px}.logo{width:150px}.card{padding:22px 18px}}