/* Server-rendered content remains readable while JS loads or is unavailable. */
html[data-ui=maple] body { color: var(--mx-ink); font-family: var(--mx-font); }
.mx-initial { min-height: 100vh; overflow-wrap: anywhere; }
.mx-initial-header {
  padding: 16px max(20px, calc((100vw - 1200px)/2));
  background: repeating-linear-gradient(0deg,#ffffff10 0 2px,transparent 2px 7px),linear-gradient(180deg,var(--mx-wood-1),var(--mx-wood-2));
  border-bottom: 4px solid var(--mx-wood-3); box-shadow: 0 3px 0 #0002;
}
.mx-initial-brand { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; font-size: 25px; font-weight: 900; text-shadow: 0 2px 2px #3d1f08; text-decoration: none; }
.mx-initial-brand img { border-radius: 50%; border: 3px solid #ffd54a; object-fit: cover; }
.mx-initial-header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; font-size: 0; }
.mx-initial-header nav a { padding: 9px 14px; border: 2px solid var(--mx-rim-dark); border-radius: 10px; background: var(--mx-paper); box-shadow: 0 3px 0 var(--mx-wood-3); color: var(--mx-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.mx-initial-content { width: min(1200px,calc(100% - 32px)); margin: 24px auto; padding: 24px; border: 3px solid var(--mx-rim); border-radius: 14px; background: var(--mx-paper); box-shadow: inset 0 0 0 2px var(--mx-paper-2),0 4px 0 #0002; line-height: 1.8; }
.mx-initial-content h1 { margin: 0 0 12px; font-size: clamp(22px,3vw,30px); }
.mx-initial-content h2 { margin: 24px 0 12px; font-size: 20px; border-bottom: 2px solid var(--mx-rim); }
.mx-initial-content p,.mx-initial-content footer { margin: 12px 0; }
.mx-initial-content a { text-decoration: underline; text-underline-offset: 3px; }
.mx-initial-content ul,.mx-initial-content ol { padding-left: 24px; }
.mx-initial-content dl { display: grid; grid-template-columns: minmax(90px,1fr) minmax(0,2fr); gap: 6px 16px; }
.mx-initial-content dt { font-weight: 700; }
.mx-initial-content dd { margin: 0; }
.mx-initial-content .ec-player-hub nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 12px; }
.mx-initial-content .ec-player-hub a { display: block; padding: 12px; background: var(--mx-paper-2); border: 1px solid var(--mx-rim); border-radius: 8px; }
@media(max-width:600px) { .mx-initial-header { padding: 14px 12px; } .mx-initial-header nav { gap: 8px; } .mx-initial-header nav a { padding: 7px 10px; } .mx-initial-content { padding: 16px; margin: 16px auto; } }