/* Silver Ice 1.4.2: ice blue, brushed silver and deep blue text. */
:root {
  color-scheme: light;
  --hb-ink: #dceefb;
  --hb-iron: #dceefb;
  --hb-iron-2: #e8f3fb;
  --hb-bronze: #688da8;
  --hb-gold: #497c9f;
  --hb-gold-bright: #285e83;
  --hb-steel: #5b7285;
  --hb-parchment: #203c52;
  --hb-muted: #526d82;
  --hb-line: #b9cedd;
}
body, .wrap, .site-header { background: #f4faff; }
h1, h2, h3, h4 { color: #203c52; }
a:hover { color: #153f5e; }
.skip-link { background: #285e83; color: #fff; }
.navigation-strip { background: #f4faff; }
.navigation-strip a { color: #365a74; }
.navigation-strip a i { color: #467494; }
.navigation-strip a:hover, .navigation-strip a.active { color: #204f72; background: #deedf8; }
.title { background: #e4eff7; color: #2e516d; }
.box, .route-card, details { background: #f4faff; }
.sidebar .box li, .server-facts > div, .rank-row, .news-item { border-bottom-color: #c8dce9; }
.sidebar .box li, .partial-login label, .field label,
.server-facts dt, .sidebar-footer, .rank-row > span:last-child,
.news-meta, .news-item p, .page-heading p, .route-card p,
.feature-story p, details > div, .article-body,
.footer, .preview-note { color: #526b80; }
.sidebar .text, .server-facts dd, .rank-row strong, .news-item h3 a, td { color: #294b66; }
.news-meta .tag, .footer a, .footer-brand, summary, .form-message { color: #285e83; }
.feature-story { background: linear-gradient(115deg, #d8ebfa, #fff); border-color: #aec8db; }
.notice { background: #deedf8; color: #3d617e; }
th { background: #e4eff7; color: #416680; }
.login-input, input[type=text], input[type=password], input[type=email], select {
  background: #f4faff; color: #203c52; border-color: #a7c1d5;
  box-shadow: inset 0 1px 2px #28476308;
}
.login-input::placeholder, input::placeholder { color: #5d768b; }
.button.ghost { background: #f4faff; color: #285e83; border-color: #8dacc3; }
.button.ghost:hover { background: #deedf8; color: #153f5e; }
.hero h1 { color: #eaf6ff; }
.hero .button.ghost { background: #153955e6; color: #e9f6ff; border-color: #a6cce6; }
.hero .button.ghost:hover { background: #244d6b; }
.hero a:focus-visible { outline-color: #9bd6ff; }
.harbor-guide-group, .harbor-guide-article { background: #f4faff; }
.harbor-guide-toggle { background: #e4eff7; color: #35546c; }
.harbor-guide-toggle[aria-expanded=true] { background: #cce4f6; color: #204762; }
.harbor-guide-links button { background: #f4faff; color: #45637a; border-top-color: #c8dce9; }
.harbor-guide-links button:hover, .harbor-guide-links button[aria-current=page] { background: #deedf8; color: #204f72; }
.harbor-guide-copy, .harbor-guide-article li { color: #415f77; }
.harbor-guide-facts > div { border-bottom-color: #c8dce9; }
.harbor-guide-facts dt { color: #526b80; }
.harbor-guide-facts dd { color: #294b66; }
.harbor-user-panel-bar { background: #f4faff; border-bottom-color: #b9cedd; }
.harbor-user-panel-bar h2 { color: #203c52; }
.harbor-user-panel-bar a, .harbor-user-panel-bar button { color: #285e83; }
.harbor-panel-loading { background: #f4faff; color: #203c52; border-color: #b9cedd; }

body { background:#dceefb; }
.wrap { background:#eaf5fd; border-color:#bfd5e5; }
.site-header { background:linear-gradient(110deg,#eff8ff,#dcecf8); height:104px; }
.wordmark { flex:0 0 124px; width:124px; }
.wordmark img { display:block; width:124px; height:82px; object-fit:contain; border:1px solid #9ab9d0; border-radius:2px; }
.button.gold,.login-submit { background:linear-gradient(#f4fbff,#b6d3e9); color:#203e57; border-color:#93b5cd; box-shadow:inset 0 1px #fff,0 3px 10px #294c651a; }
.button.gold:hover,.login-submit:hover { background:#c9e5f8; color:#143953; }
.navigation-strip { background:linear-gradient(#eff8fe,#d8e9f6); }
.navigation-strip a.active { box-shadow:inset 0 1px #fff; }
.title { background:linear-gradient(110deg,#f4faff,#d8e8f4); }
.eyebrow,.section-kicker,.step-number { color:#4b7291; }
.harbor-guide-icon { filter:grayscale(1); }
.harbor-user-panel,.harbor-user-panel iframe { background:#e3f1fc; border-color:#93b4cd; color:#294b66; }
.harbor-user-panel::backdrop { background:#102b49b8; }
.hero { position:relative;display:block;height:auto;background:none;overflow:hidden; }
.hero-image { display:block;width:100%;height:auto;aspect-ratio:2.5;object-fit:cover;object-position:center top; }
.hero-copy { position:absolute;left:0;bottom:0;margin:0;width:100%;padding:20px 32px;background:linear-gradient(transparent,#081629a6);text-align:left; }
.hero-actions { justify-content:flex-start; }
.hero .button.ghost { background:#153955e6;color:#e9f6ff;border-color:#a6cce6; }
.hero .button.ghost:hover { background:#244d6b; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:720px) { .site-header { height:90px; }.wordmark,.wordmark img { width:104px;flex-basis:104px; }.wordmark img { height:70px; }.hero-image { aspect-ratio:16/9; }.hero-copy { position:static;padding:14px 18px;background:#d9eaf7; }.hero-actions { justify-content:center;flex-wrap:wrap; } }

/* Original Grand MU wordmark, remade in silver and ice blue. */
.site-header { height:84px;background:#e8f3fc; }
.wordmark { flex:0 0 270px;width:270px; }
.wordmark img { width:270px;height:58px;object-fit:cover;object-position:center;border:0;border-radius:0; }
@media(max-width:720px) { .site-header { height:74px; }.wordmark,.wordmark img { width:200px;flex-basis:200px; }.wordmark img { height:44px; } }
@media(max-width:380px) { .wordmark,.wordmark img { width:170px;flex-basis:170px; }.wordmark img { height:38px; } }

/* 1.5.0: compact 50% transparent menu and enlarged banner shortcuts. */
.navigation-strip { position:absolute;z-index:5;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:44px;padding:0 22px;gap:3px;background:rgba(8,24,43,.5);border:1px solid rgba(220,244,255,.82);box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(100,164,203,.62),inset 0 1px 0 rgba(255,255,255,.72),0 4px 16px rgba(7,30,53,.48); }
.navigation-strip a,.navigation-strip .navigation-account { min-height:44px;height:44px;padding:7px 9px;gap:8px;display:flex;justify-content:center;align-items:center;color:#edf8ff;font:500 14px/1.3 'Segoe UI',Arial,sans-serif;border:0;border-bottom:2px solid transparent;background:none;white-space:nowrap; }
.navigation-strip a i,.navigation-strip .navigation-account i { color:#b9dcf5; }
.navigation-strip a:hover,.navigation-strip a.active,.navigation-strip .navigation-account:hover { background:#c1e1fa26;color:#fff;border-bottom-color:#a3d8ff;box-shadow:none; }
.navigation-strip a:focus-visible,.navigation-strip button:focus-visible { outline-color:#b4e0ff;outline-offset:-4px; }
.hero { container-type:inline-size; }
.hero-copy { position:absolute;left:2.8%;top:22.5cqw;bottom:auto;width:35%;margin:0;padding:0;background:none;text-align:center; }
.hero-actions { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.hero-actions .button { min-height:92px;padding:16px 12px;font-size:22px;gap:9px;border-width:1px;box-shadow:inset 0 1px #ffffff66,0 6px 24px #00122866; }
.hero-actions .button span,.hero-actions .button i { font-size:22px; }
.hero .hero-steps { display:flex;justify-content:center;align-items:center;gap:13px;margin:18px 0 0;color:#e5f4ff;font-size:16px;font-weight:500;text-shadow:0 2px 5px #001126; }
.hero-steps a { color:#e5f4ff; }
.hero-steps a:hover { color:#fff;text-decoration:underline;text-underline-offset:4px; }
.hero-steps>span[aria-hidden] { color:#9cbfdc; }
.hero-online { position:absolute;right:22px;bottom:17px;width:144px;text-align:center;color:#effaff; }
.hero-online img { display:block;width:144px;height:144px;object-fit:contain;mix-blend-mode:screen;mask-image:radial-gradient(circle,#000 48%,transparent 72%); }
.online-caption { margin-top:-26px;position:relative;text-shadow:0 2px 5px #001126,0 0 12px #001126; }
.online-caption strong { display:block;font:500 28px/1 Georgia,serif; }
.online-caption>span { display:block;font-size:14px;margin-top:7px; }
.online-caption small { color:#d0e6f8;font-size:12px;display:block;margin-top:2px; }
@media(max-width:1100px) and (min-width:721px) { .hero-copy { width:38%;left:2%; }.hero-actions .button { font-size:18px;min-height:92px;padding:10px 6px;gap:5px; }.hero-actions { gap:10px; }.hero-online { width:120px;right:16px;bottom:12px; }.hero-online img { width:120px;height:120px; }.hero .hero-steps { gap:10px;font-size:14px; } }
@media(max-width:800px) { .navigation-strip { padding:0 8px;gap:0; }.navigation-strip a,.navigation-strip .navigation-account { font-size:12px;padding:7px 4px;gap:5px; }.navigation-strip a i,.navigation-strip .navigation-account i { display:none; } }
@media(max-width:720px) { .navigation-strip { position:relative;height:auto;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(8,24,43,.5); }.navigation-strip a,.navigation-strip .navigation-account { min-height:40px;height:40px;font-size:13px; }.navigation-strip .navigation-account { grid-column:span 2; }.hero-copy { position:static;width:100%;padding:20px 18px 14px;background:#0c2541; }.hero-actions .button { min-height:92px;font-size:22px;padding:14px 10px; }.hero .hero-steps { margin-top:17px;gap:13px;font-size:16px; }.hero-online { position:static;width:100%;display:flex;justify-content:center;align-items:center;gap:10px;padding:0 18px 18px;background:#0c2541;text-align:left; }.hero-online img { width:98px;height:98px; }.online-caption { margin-top:0; }.online-caption strong { font-size:25px; }.online-caption>span { margin-top:5px; } }
@media(max-width:380px) { .hero-actions .button { font-size:19px;padding:12px 6px; }.hero-actions { gap:10px; } }

/* 1.7.3: edge-anchored portraits with the website filling the space between. */
:root { --side-art-width:calc(100dvh / 3); }
body { position:relative;background:#dceefb; }
.site-wallpaper { position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;background:#dceefb; }
.site-wallpaper .wallpaper-scene { display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.3;clip-path:inset(0 var(--side-art-width)); }
.wallpaper-margin { position:absolute;top:0;bottom:0;width:var(--side-art-width);overflow:hidden; }
.wallpaper-left { left:0; }
.wallpaper-right { right:0; }
.site-wallpaper .wallpaper-margin img { display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;opacity:.3; }
.site-frame { margin-inline:var(--side-art-width); }
.wrap { position:relative;z-index:1;background:transparent;width:auto;max-width:none;margin:0;zoom:.9; }
@media(max-width:1199px),(max-aspect-ratio:4/3) { :root { --side-art-width:0px; }.wallpaper-margin { display:none; } }
.main { display:block;background:rgba(234,245,253,.78); }
.main>.content { width:100%;min-width:0; }
.footer { background:rgba(234,245,253,.78); }
.hero { isolation:isolate;background:#0c2541; }
.hero>.hero-image { transform:none;opacity:1; }
.hero-copy,.hero-online { z-index:1; }

/* One continuous information page, with all sections visible. */
.harbor-user-panel { inset:auto;margin:0;padding:0;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:20;overflow:hidden; }
.harbor-user-panel[open] { display:block; }
.harbor-user-panel iframe { display:block;width:100%;height:100%;border:0;background:#e3f1fc; }
.harbor-user-panel .harbor-panel-loading { z-index:1;background:#edf6fc;color:#284a62;border:1px solid #b4ccdc;border-radius:6px; }
.navigation-strip .navigation-account[aria-expanded="true"] { background:#c1e1fa26;color:#fff;border-bottom-color:#a3d8ff; }
.server-information-page { width:100%;min-width:0; }
.information-status { margin:0 0 24px;color:#49677d;font-size:14px;line-height:1.6; }
.information-section { padding:26px 0;border-top:1px solid #afcadd; }
.information-section h3 { margin:0 0 18px;color:#23465f;font-size:25px; }
.information-section .server-facts>div { padding:13px 0;gap:24px;font-size:16px;line-height:1.6; }
.information-section .server-facts dt { flex:1; }
.information-section .server-facts dd { flex:1.3; }
.information-progression { margin:0;padding:0 0 0 26px; }
.information-progression li { padding:0 0 22px 8px;color:#456b87; }
.information-progression li:last-child { padding-bottom:0; }
.information-progression h4 { margin:0 0 8px;color:#23465f;font:600 18px/1.4 'Segoe UI',Arial,sans-serif; }
.information-progression p { margin:0;font-size:16px;line-height:1.7;color:#34556d; }
@media(max-width:600px) { .information-section .server-facts>div { flex-direction:column;gap:4px; }.information-section .server-facts dd { text-align:left; }.information-section h3 { font-size:23px; } }
