:root {
  color-scheme: light;
  --ink: #172a3d;
  --ink-soft: #334b61;
  --muted: #718397;
  --line: rgba(115, 143, 170, .18);
  --line-strong: rgba(95, 127, 157, .27);
  --teal: #267a78;
  --teal-dark: #195d65;
  --mint: #c6f0df;
  --blue: #b8d9ff;
  --lilac: #ddc9ff;
  --surface: rgba(255, 255, 255, .76);
  --surface-solid: #fff;
  --shadow-card: 0 18px 52px rgba(33, 60, 85, .075), 0 2px 8px rgba(33, 60, 85, .035);
  --shadow-float: 0 28px 80px rgba(30, 58, 83, .16);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

html { scroll-behavior: smooth; }
body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 11% 3%, rgba(201, 236, 244, .76), transparent 33rem),
    radial-gradient(ellipse at 91% 18%, rgba(229, 218, 255, .53), transparent 34rem),
    radial-gradient(ellipse at 75% 88%, rgba(212, 245, 228, .58), transparent 34rem),
    linear-gradient(145deg, #f7fafc 0%, #f7f8fc 50%, #f5faf9 100%);
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .43;
  background-image:
    radial-gradient(circle, rgba(50, 104, 132, .3) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(89, 119, 174, .2) 1px, transparent 1.8px);
  background-size: 61px 61px, 97px 97px;
  background-position: 4px 8px, 33px 47px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  animation: particle-drift 36s linear infinite;
}
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 32rem;
  aspect-ratio: 1;
  right: -19rem;
  top: 33vh;
  border-radius: 50%;
  pointer-events: none;
  opacity: .48;
  filter: blur(2px);
  background: conic-gradient(from 210deg, rgba(123, 212, 204, .16), rgba(152, 178, 248, .24), rgba(232, 184, 233, .19), rgba(123, 212, 204, .16));
  box-shadow: inset -24px -28px 70px rgba(52, 88, 145, .15), inset 18px 18px 55px rgba(255,255,255,.8), 0 0 100px rgba(128, 166, 221, .1);
  animation: orb-float 14s ease-in-out infinite alternate;
}

@keyframes particle-drift { to { background-position: 65px 69px, -64px 144px; } }
@keyframes orb-float { to { transform: translate3d(-28px, 24px, 0) rotate(25deg) scale(1.04); } }

.topbar {
  position: sticky;
  z-index: 20;
  top: 12px;
  width: min(1320px, calc(100% - 36px));
  margin: 12px auto 0;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 19px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 8px 32px rgba(42, 66, 91, .07), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.brand { gap: 13px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  color: #dcfff1; background: linear-gradient(145deg, #245f75, #398e8a 75%, #60b4a0);
  box-shadow: 0 7px 17px rgba(38, 108, 122, .22), inset 0 1px rgba(255,255,255,.35);
  font-size: 22px;
}
.brand b { color: #21394d; letter-spacing: .045em; font-size: 17px; }
.brand small { color: #78899a; letter-spacing: .12em; font-size: 10px; }
.topbar nav { align-items: center; gap: 7px; color: #596e82; font-size: 13px; }
.topbar nav a { border: 1px solid transparent; border-radius: 11px; padding: 9px 13px; transition: background .2s var(--ease), color .2s, transform .2s; }
.topbar nav a:hover { color: var(--teal-dark); background: rgba(224, 244, 240, .72); transform: translateY(-1px); }

main { width: min(1240px, 100%); margin: 35px auto 72px; padding: 0 28px; }
.auth-layout { position: relative; gap: clamp(22px, 4vw, 54px); min-height: 680px; align-items: center; }
.welcome {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 610px; padding: clamp(38px, 6vw, 78px);
  border: 1px solid rgba(255,255,255,.35); border-radius: 34px;
  background:
    radial-gradient(ellipse at 76% 22%, rgba(124, 221, 201, .55), transparent 28%),
    radial-gradient(ellipse at 90% 84%, rgba(176, 179, 255, .43), transparent 38%),
    linear-gradient(135deg, rgba(18, 51, 74, .94), rgba(31, 96, 111, .88) 54%, rgba(50, 124, 129, .82)),
    url('/player-guide/assets/voxel-world.png') center/cover;
  box-shadow: 0 28px 80px rgba(19, 57, 83, .2), inset 0 1px rgba(255,255,255,.2);
}
.welcome::before {
  content: ""; position: absolute; z-index: -1; width: 340px; aspect-ratio: 1; right: -48px; top: 2%;
  border-radius: 50%; opacity: .76;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.92) 0 2%, transparent 10%),
    radial-gradient(circle at 38% 31%, rgba(218,255,243,.9), rgba(129,222,207,.48) 25%, rgba(106,159,208,.24) 50%, transparent 72%),
    conic-gradient(from 70deg, rgba(220,247,244,.25), rgba(183,192,255,.4), rgba(137,226,206,.32), rgba(220,247,244,.25));
  box-shadow: inset -24px -32px 65px rgba(7,37,67,.5), inset 16px 18px 50px rgba(255,255,255,.46), 0 20px 80px rgba(147,224,220,.16);
  filter: saturate(115%); animation: welcome-orb 11s ease-in-out infinite alternate;
}
.welcome::after {
  content: ""; position:absolute; inset:0; z-index:-1; opacity:.32; pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,.7) .8px, transparent 1.7px); background-size: 33px 33px;
  mask-image: linear-gradient(115deg, transparent 10%, #000 85%);
}
@keyframes welcome-orb { to { transform: translate(-14px, 17px) rotate(12deg); } }
.welcome .eyebrow { color: #b9f1df; }
.welcome h1 { max-width: 600px; margin: 23px 0 16px; font-size: clamp(43px, 5vw, 68px); letter-spacing: -.055em; text-wrap: balance; }
.welcome p, .welcome ol { color: rgba(235,248,250,.78); }
.welcome a { display: inline-flex; width: fit-content; margin-top: 27px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); transition: transform .2s var(--ease), background .2s; }
.welcome a:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); }

.card, .account-panel, .metric, .tile {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card), inset 0 1px rgba(255,255,255,.86);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.card { border-radius: var(--radius-xl); }
.auth-card { position: relative; padding: clamp(26px, 4vw, 43px); }
.auth-card h2 { color: #1c3449; letter-spacing: -.035em; font-size: 27px; }
.auth-card label { color: #40586d; font-size: 12px; letter-spacing: .01em; }
.auth-card input, .auth-card select, .security-form input {
  min-height: 47px; border: 1px solid rgba(105, 134, 162, .22); border-radius: 13px;
  background: rgba(249, 251, 253, .86); color: var(--ink); padding: 11px 14px;
  box-shadow: inset 0 1px 2px rgba(31, 60, 87, .025); transition: border .18s, box-shadow .18s, background .18s;
}
.auth-card input:hover, .auth-card select:hover, .security-form input:hover { border-color: rgba(73, 128, 149, .4); }
.auth-card input:focus, .auth-card select:focus, .security-form input:focus { border-color: #65aaa4; outline: 0; background: #fff; box-shadow: 0 0 0 4px rgba(90, 174, 164, .14); }
.captcha-line img { width: 126px; height: 47px; border: 1px solid var(--line); object-fit: cover; }
.primary, button, .verification button, #logout {
  border: 1px solid var(--line-strong); border-radius: 12px; font-weight: 720;
  transition: transform .18s var(--ease), box-shadow .18s, background .18s, border-color .18s, color .18s;
}
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(.985); }
button:disabled { cursor: not-allowed; opacity: .52; }
.primary { min-height: 46px; border-color: transparent; background: linear-gradient(110deg, #205f70, #277e7a 70%, #398f82); color: #fff; box-shadow: 0 9px 20px rgba(35, 112, 119, .18), inset 0 1px rgba(255,255,255,.17); }
.primary:hover { background: linear-gradient(110deg, #174e61, #216f70 70%, #2f7f76); box-shadow: 0 13px 27px rgba(35,112,119,.23); }
.verification { border-color: rgba(85, 161, 143, .28); border-radius: 18px; background: rgba(231, 248, 241, .82); }
.verification button, #logout { background: rgba(255,255,255,.8); color: #425b6c; }
.verification button:hover, #logout:hover { border-color: rgba(52,128,132,.38); color: var(--teal-dark); box-shadow: 0 7px 18px rgba(37,79,102,.09); }
.form-error { color: #b34f60; }
.switch-auth { font-size: 13px; }

.account-heading {
  position: relative; overflow: hidden; margin: 38px 0 19px; padding: 28px 31px;
  border: 1px solid rgba(255,255,255,.75); border-radius: 25px;
  background: linear-gradient(110deg, rgba(255,255,255,.8), rgba(246,251,252,.68) 65%, rgba(241,239,255,.7));
  box-shadow: var(--shadow-card), inset 0 1px #fff; backdrop-filter: blur(19px);
}
.account-heading::after { content:""; position:absolute; width:190px; height:190px; border-radius:50%; right:-56px; top:-94px; background: radial-gradient(circle at 35% 35%,rgba(255,255,255,.98),rgba(166,224,217,.55) 26%,rgba(172,186,245,.36) 55%,transparent 73%); box-shadow: inset -8px -12px 28px rgba(62,105,156,.18), 0 15px 50px rgba(117,163,204,.14); pointer-events:none; }
.account-heading h1 { color: #1b344a; letter-spacing: -.045em; font-size: clamp(29px, 4vw, 40px); }
.account-heading p { font-size: 13px; }
.tabs { gap: 7px; padding: 7px 2px 16px; scrollbar-width: thin; scrollbar-color: #c5d7df transparent; }
.tabs button { border: 1px solid rgba(112,143,167,.18); border-radius: 12px; background: rgba(255,255,255,.59); padding: 10px 14px; color: #667b8d; font-size: 13px; box-shadow: 0 2px 7px rgba(36,66,94,.025); backdrop-filter: blur(12px); }
.tabs button:hover { border-color: rgba(49,130,137,.32); color: #2f7078; background: rgba(255,255,255,.88); }
.tabs button.active { border-color: rgba(43,121,128,.12); color: white; background: linear-gradient(115deg,#245f70,#2c827e); box-shadow: 0 7px 16px rgba(35,112,119,.2); }
.account-content { gap: 17px; min-height: 250px; }
.metric-grid, .tile-grid { gap: 13px; }
.metric { position:relative; overflow:hidden; min-height:125px; border-radius:19px; padding:20px; transition: transform .24s var(--ease), box-shadow .24s; }
.metric::after { content:""; position:absolute; width:85px; height:85px; right:-28px; bottom:-36px; border-radius:50%; background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.94),rgba(134,210,199,.32) 46%,rgba(138,168,224,.12) 70%); }
.metric:hover, .tile:hover { transform: translateY(-3px); box-shadow: 0 22px 42px rgba(35,64,89,.12), inset 0 1px #fff; }
.metric small, .tile small { color: #718498; font-weight: 650; letter-spacing: .03em; }
.metric b { margin-top: 12px; color: #203d53; font-size: clamp(22px,2.4vw,28px); letter-spacing: -.035em; }
.tile { border-radius: 18px; padding: 18px; transition: transform .24s var(--ease), box-shadow .24s, border-color .2s; }
.tile b { color: #29485d; font-size: 15px; }
.tile p { color: #718397; line-height: 1.7; }
.account-panel { overflow: hidden; border-radius: 22px; padding: clamp(17px, 2.5vw, 25px); }
.account-panel h2 { color: #234258; font-size: 18px; letter-spacing: -.025em; }
.account-panel table { font-size: 13px; }
.account-panel th { color: #74889a; font-weight: 700; }
.account-panel th, .account-panel td { border-bottom-color: rgba(112,143,167,.14); padding: 13px 12px; }
.account-panel tbody tr { transition: background .16s; }
.account-panel tbody tr:hover { background: rgba(233,245,246,.52); }
.table-scroll { border: 1px solid rgba(112,143,167,.14); border-radius: 14px; background: rgba(255,255,255,.42); }
.table-scroll table { min-width: 560px; }
.empty-state { border: 1px dashed rgba(111,144,166,.24); border-radius: 15px; padding: 18px; background: rgba(249,252,253,.55); }
.security-form { gap: 14px; }
.security-form input { width:100%; }
.record-pages { justify-content: flex-end; color: #73879a; font-size: 13px; }
.record-pages button, .task-actions button:not(.primary) { padding: 9px 13px; border-color: var(--line); background: rgba(255,255,255,.82); color: #456176; }
.task-card { display:flex; flex-direction:column; gap:9px; }
.task-card .task-actions { display:flex; gap:8px; margin-top:auto; padding-top:7px; }
.task-card .task-actions button { width:100%; justify-content:center; }
.task-card small { line-height:1.6; }
.checkin-action { display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:16px; }
.checkin-action .empty-state { border:0; background:transparent; padding:0; }

dialog, .enterprise-editor-dialog {
  width: min(92vw, 560px); max-height: min(86vh, 800px); overflow:auto;
  border: 1px solid rgba(255,255,255,.76); border-radius: 24px; padding: 27px;
  color: var(--ink); background: rgba(250,252,254,.88);
  box-shadow: var(--shadow-float), inset 0 1px #fff;
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
}
dialog::backdrop, .enterprise-editor-dialog::backdrop { background: rgba(21,40,59,.38); backdrop-filter: blur(7px); }
dialog h2 { margin-top:0; color:#213c52; }
dialog button { min-height:40px; padding:8px 13px; background:rgba(255,255,255,.82); }

footer { border-top-color: rgba(111,143,165,.18); color:#8191a1; }
footer a { color:#347c7b; }
.enterprise-editor-dialog { background:rgba(250,252,254,.91); border-color:rgba(255,255,255,.8); }

.reveal-on-scroll { opacity: 0; transform: translateY(14px) scale(.992); transition: opacity .52s var(--ease), transform .52s var(--ease); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.reveal-on-scroll:nth-child(2) { transition-delay: 45ms; }
.reveal-on-scroll:nth-child(3) { transition-delay: 90ms; }
.reveal-on-scroll:nth-child(4) { transition-delay: 135ms; }

@media (max-width: 820px) {
  main { margin-top: 23px; padding: 0 18px; }
  .welcome { min-height: 390px; }
  .account-heading { margin-top:25px; }
}
@media (max-width: 560px) {
  .topbar { top:7px; width:calc(100% - 18px); margin-top:7px; padding:8px 10px; border-radius:15px; }
  .brand-mark { width:37px; height:37px; border-radius:12px; }
  .brand b { font-size:14px; }
  .brand small { font-size:9px; }
  .topbar nav { gap:2px; font-size:11px; }
  .topbar nav a { padding:8px 9px; }
  main { margin-top:17px; padding:0 12px; }
  .auth-layout { gap:14px; }
  .welcome { min-height:320px; padding:29px; border-radius:24px; }
  .welcome::before { width:225px; right:-60px; top:-20px; }
  .welcome h1 { font-size:39px; }
  .auth-card { padding:22px; border-radius:22px; }
  .account-heading { align-items:flex-start; flex-direction:column; padding:21px; border-radius:21px; }
  .account-heading::after { width:130px; height:130px; right:-44px; top:-70px; }
  .account-heading h1 { font-size:30px; }
  .metric-grid, .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .metric { min-height:105px; padding:14px; border-radius:16px; }
  .metric b { font-size:21px; }
  .tile { padding:14px; border-radius:16px; }
  .account-panel { padding:15px; border-radius:18px; }
  .tabs button { padding:9px 11px; }
}
@media (max-width: 370px) {
  .metric-grid, .tile-grid { grid-template-columns:1fr; }
  .captcha-line img { width:100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal-on-scroll { opacity:1; transform:none; }
}

/* Keep polished surfaces inexpensive to composite while the page scrolls. */
body::before { animation: none; opacity: .22; }
body::after { animation: none; filter: none; opacity: .34; }
.welcome::before { animation: none; }
.topbar { background: rgba(250,252,254,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card, .account-panel, .metric, .tile {
  background: rgba(255,255,255,.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 7px 24px rgba(33,60,85,.055), inset 0 1px rgba(255,255,255,.92);
}
.account-heading { background: rgba(250,252,254,.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tabs button { background: rgba(255,255,255,.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
.metric:hover, .tile:hover { box-shadow: 0 11px 27px rgba(35,64,89,.09), inset 0 1px #fff; }
@media (max-width: 700px) {
  .topbar { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .metric:hover, .tile:hover { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .welcome::before { animation:none!important; }
}