:root {
  color-scheme:dark;
  --portal-bg:#101513;
  --portal-paper:#1a221e;
  --portal-ink:#f3f3e9;
  --portal-muted:#a6b1a8;
  --portal-lime:#c3ef86;
  --portal-line:#ffffff20
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--portal-bg);
  color:var(--portal-ink);
  font:15px/1.7 system-ui,-apple-system,"Microsoft YaHei",sans-serif
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 8% 0%,#73974418,transparent 50%)
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,a,input,summary {
  outline-offset:5px
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.55
}
[hidden] {
  display:none!important
}
.portal-shell {
  width:min(1180px,calc(100% - 72px));
  margin:auto
}
.portal-header {
  min-height:106px;
  display:flex;
  align-items:center;
  gap:24px;
  border-bottom:1px solid var(--portal-line)
}
.portal-brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:750;
  font-size:21px;
  line-height:1.2
}
.portal-brand small {
  display:block;
  margin-top:6px;
  font:9px/1.2 system-ui;
  letter-spacing:3px;
  color:var(--portal-muted)
}
.brand-symbol {
  display:grid;
  place-items:center;
  background:var(--portal-lime);
  color:#1e3023;
  width:42px;
  height:46px;
  border-radius:7px;
  font-size:25px
}
.header-caption {
  margin-left:auto;
  color:var(--portal-muted);
  font-size:13px;
  letter-spacing:2px
}
.quiet-button {
  background:transparent;
  color:var(--portal-ink);
  border:1px solid var(--portal-line);
  padding:8px 16px;
  border-radius:6px
}
main {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  padding:62px 0 50px
}
.portal-intro {
  padding-top:26px
}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--portal-lime);
  font-weight:650
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:clamp(50px,6vw,77px);
  line-height:1.2;
  letter-spacing:-4px;
  font-weight:800;
  margin:23px 0 25px
}
h1 span {
  color:var(--portal-lime)
}
.portal-intro>p {
  color:var(--portal-muted);
  line-height:2;
  font-size:16px
}
.intro-tags {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:32px
}
.intro-tags span {
  border:1px solid var(--portal-line);
  padding:5px 12px;
  border-radius:30px;
  font-size:11px;
  color:var(--portal-muted)
}
.account-card {
  padding:29px 32px;
  background:var(--portal-paper);
  border:1px solid var(--portal-line);
  border-radius:15px;
  box-shadow:0 20px 60px #0002
}
.card-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:23px
}
.tiny-status {
  font-size:10px;
  letter-spacing:1px;
  color:var(--portal-muted);
  padding:3px 8px;
  background:#ffffff07;
  border-radius:4px
}
.account-card h2 {
  font-size:27px;
  letter-spacing:-1px;
  margin-bottom:6px
}
.muted {
  color:var(--portal-muted);
  font-size:13px
}
.auth-tabs {
  display:flex;
  border-bottom:1px solid var(--portal-line);
  margin:22px 0
}
.auth-tabs button {
  background:none;
  color:var(--portal-muted);
  border:0;
  border-bottom:2px solid transparent;
  padding:10px 16px
}
.auth-tabs button[aria-pressed=true] {
  color:var(--portal-lime);
  border-color:var(--portal-lime)
}
form {
  display:grid;
  gap:15px
}
label {
  display:grid;
  gap:6px;
  font-size:12px;
  color:#dce3dc
}
input {
  min-width:0;
  width:100%;
  background:#101713;
  color:var(--portal-ink);
  padding:11px 13px;
  border:1px solid #ffffff25;
  border-radius:6px;
  transition:border-color .15s
}
input:focus {
  border-color:var(--portal-lime);
  outline:1px solid var(--portal-lime)
}
input::placeholder {
  color:#7c8a80;
  font-size:12px
}
.checkbox-label {
  display:flex;
  align-items:center;
  gap:8px
}
.checkbox-label input {
  width:auto
}
.primary-button,.secondary-button,.code-row>button {
  border:0;
  border-radius:6px;
  padding:11px 17px;
  font-weight:650;
  line-height:1.7
}
.primary-button {
  background:var(--portal-lime);
  color:#20301a
}
.primary-button:hover {
  background:#d3ffa0
}
.primary-button span {
  float:right;
  font-size:21px;
  line-height:1.2
}
.wide {
  width:100%;
  margin-top:3px;
  text-align:left
}
.secondary-button,.code-row>button {
  background:#ffffff0d;
  color:var(--portal-ink);
  border:1px solid var(--portal-line)
}
.code-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end
}
.code-row>button {
  font-size:12px;
  white-space:nowrap
}
.inline-link {
  font-size:11px;
  color:var(--portal-muted);
  text-decoration:underline;
  text-underline-offset:3px;
  background:none;
  border:0;
  padding:0;
  text-align:left
}
.form-message {
  font-size:12px;
  min-height:20px;
  margin:14px 0 0;
  color:var(--portal-lime);
  overflow-wrap:anywhere
}
.form-message[data-error=true] {
  color:#ffb9a7
}
.service-note {
  padding:10px 12px;
  background:#e3b06c12;
  color:#f0cb97;
  font-size:12px;
  border-radius:6px;
  margin:15px 0 0
}
.board-picker {
  grid-column:1/-1
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px
}
.section-heading h2 {
  font-size:31px;
  margin:8px 0 0
}
.board-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.board-card {
  overflow:hidden;
  border:1px solid var(--portal-line);
  border-radius:14px;
  background:var(--portal-paper);
  transition:transform .2s,border-color .2s
}
.board-card:hover {
  transform:translateY(-4px);
  border-color:#c3ef8680
}
.board-art {
  height:190px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:0 36px
}
.board-art>span {
  font-size:92px;
  font-weight:900;
  letter-spacing:-6px;
  line-height:1;
  z-index:1
}
.cs-art {
  background:linear-gradient(115deg,#543c27,#b28242);
  color:#ffefd7
}
.cs-art::after {
  content:"";
  position:absolute;
  right:-20px;
  bottom:-25px;
  width:220px;
  height:140px;
  background:#1b1f1c;
  transform:skewY(-18deg);
  box-shadow:-90px -30px 0 #d9ae6330
}
.cs-art i {
  position:absolute;
  width:94px;
  height:94px;
  right:80px;
  top:15px;
  border:1px solid #f2d3a975;
  transform:rotate(45deg)
}
.mc-art {
  background:linear-gradient(120deg,#254839,#6a9454);
  color:#e3f5cb
}
.mc-art i,.mc-art b {
  position:absolute;
  right:30px;
  bottom:0;
  width:120px;
  height:95px;
  background:#577342;
  border-top:30px solid #99be63;
  box-shadow:-80px 35px 0 #354a30
}
.mc-art b {
  right:110px;
  bottom:70px;
  width:70px;
  height:70px;
  border-top-width:23px;
  background:#47633e;
  box-shadow:none
}
.board-content {
  padding:28px 30px
}
.board-content h3 {
  font-size:30px;
  line-height:1.4;
  margin:8px 0 12px
}
.board-content h3 span {
  float:right;
  color:var(--portal-muted);
  font-weight:400
}
.board-content p {
  color:var(--portal-muted);
  font-size:13px;
  line-height:1.9
}
.card-link {
  display:block;
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid var(--portal-line);
  font-size:12px;
  color:var(--portal-lime)
}
.account-settings {
  margin-top:30px;
  border:1px solid var(--portal-line);
  border-radius:10px;
  background:#ffffff02
}
.account-settings summary {
  padding:18px 23px;
  cursor:pointer;
  list-style:none;
  font-size:13px
}
.account-settings summary>span {
  float:right;
  color:var(--portal-muted)
}
.settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:10px 24px 24px
}
.settings-grid h3 {
  font-size:17px
}
.small-note {
  font-size:11px;
  color:var(--portal-muted);
  margin-top:15px
}
.account-settings>.form-message {
  padding:0 24px 18px
}
.portal-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-top:1px solid var(--portal-line);
  padding:25px 0 32px;
  color:#7f8d83;
  font-size:11px
}
.portal-footer div {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
body.signed-in main {
  grid-template-columns:1fr;
  gap:30px;
  padding-top:42px
}
body.signed-in .portal-intro {
  display:none
}
.mc-main {
  display:block
}
.board-navigation {
  display:flex;
  gap:20px;
  align-items:center
}
.board-navigation a {
  font-size:13px;
  color:var(--portal-muted)
}
.board-navigation a[aria-current=page] {
  color:var(--portal-lime)
}
.mc-hero {
  padding:16px 0 40px
}
.mc-hero h1 {
  font-size:65px
}
.mc-hero p {
  max-width:630px;
  color:var(--portal-muted)
}
.content-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px
}
.content-card {
  background:var(--portal-paper);
  border:1px solid var(--portal-line);
  border-radius:12px;
  padding:28px
}
.content-card h2 {
  font-size:24px
}
.content-card h3 {
  font-size:17px
}
.content-card p,.content-card li {
  font-size:13px;
  color:var(--portal-muted)
}
.content-card ul,.content-card ol {
  padding-left:20px
}
.content-card li {
  margin-bottom:9px
}
.status-pill {
  display:inline-block;
  padding:3px 9px;
  border:1px solid #c3ef8650;
  color:var(--portal-lime);
  font-size:10px;
  border-radius:20px;
  margin-bottom:16px
}
.server-address {
  display:block;
  padding:14px;
  background:#101713;
  border:1px solid var(--portal-line);
  border-radius:6px;
  overflow-wrap:anywhere;
  user-select:all;
  margin:15px 0
}
.content-card .primary-button {
  display:inline-block
}
.mc-game-list {
  display:grid;
  gap:18px;
  margin-top:24px
}
.game-row {
  border-top:1px solid var(--portal-line);
  padding-top:18px
}
.game-row h3 {
  margin-bottom:6px
}
.content-card .small-note {
  font-size:11px
}
.content-card code {
  color:#dbeecb
}
.footer-note {
  color:var(--portal-muted);
  font-size:12px;
  margin:28px 0
}
a:hover {
  color:var(--portal-lime)
}
@media(max-width:800px) {
  .portal-shell {
    width:calc(100% - 36px)
  }
  .portal-header {
    min-height:85px
  }
  .header-caption {
    display:none
  }
  .portal-header>button {
    margin-left:auto
  }
  main {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:25px
  }
  .portal-intro {
    padding-top:10px
  }
  h1 {
    font-size:54px
  }
  .intro-tags {
    margin-top:18px
  }
  .account-card {
    padding:25px
  }
  .board-grid,.settings-grid,.content-grid {
    grid-template-columns:1fr
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:8px
  }
  .board-art {
    height:160px
  }
  .settings-grid {
    gap:25px
  }
  .portal-footer {
    gap:10px
  }
  .board-navigation {
    margin-left:auto;
    gap:12px
  }
  .board-navigation a {
    font-size:11px
  }
  .mc-hero h1 {
    font-size:45px
  }
  .mc-hero {
    padding-bottom:20px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}