:root{
  --win-gray:#c0c0c0;
  --win-light:#ffffff;
  --win-mid:#dfdfdf;
  --win-shadow:#808080;
  --win-dark:#000000;
  --win-blue:#000080;
  --link-blue:#0000ee;
  --green:#00b51a;
  --ink:#111;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#02050a}
body{
  margin:0;
  color:var(--ink);
  font:12px/1.35 "MS Sans Serif",Tahoma,Verdana,Arial,sans-serif;
  background-color:#02050a;
  background-image:
    radial-gradient(circle at 17px 31px,#fff 0 1px,transparent 1.3px),
    radial-gradient(circle at 74px 88px,#8aa2b0 0 1px,transparent 1.3px),
    radial-gradient(circle at 131px 52px,#c18a22 0 1px,transparent 1.2px),
    radial-gradient(circle at 189px 139px,#fff 0 1px,transparent 1.2px);
  background-size:213px 173px,281px 211px,347px 263px,419px 311px;
}

a{color:var(--link-blue)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px dotted #000;outline-offset:-4px}
button,input{font:inherit}

.skip-link{position:fixed;left:8px;top:-60px;z-index:99;background:#fff;color:#000;padding:6px;border:2px solid #000}
.skip-link:focus{top:8px}

.desktop{min-height:100vh;padding:7px 10px 28px}
.browser-window{
  width:min(1032px,100%);
  margin:0 auto;
  padding:3px;
  background:var(--win-gray);
  border-top:2px solid var(--win-light);
  border-left:2px solid var(--win-light);
  border-right:2px solid #404040;
  border-bottom:2px solid #404040;
  box-shadow:0 0 0 1px #000,0 14px 50px rgba(0,0,0,.78);
}
.win95-raised,
.win-button,
.tab{
  border-top:2px solid var(--win-light);
  border-left:2px solid var(--win-light);
  border-right:2px solid var(--win-shadow);
  border-bottom:2px solid var(--win-shadow);
}
.win95-sunken{
  border-top:2px solid var(--win-shadow);
  border-left:2px solid var(--win-shadow);
  border-right:2px solid var(--win-light);
  border-bottom:2px solid var(--win-light);
}

.status-strip{min-height:31px;display:flex;align-items:center;background:var(--win-gray);padding:3px 6px;gap:8px;overflow:hidden}
.status-block{display:flex;align-items:center;white-space:nowrap}.separator{height:18px;width:2px;border-left:1px solid var(--win-shadow);border-right:1px solid #fff}
.led{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:6px;border:1px solid #003600;box-shadow:inset 2px 2px 1px rgba(255,255,255,.6),inset -2px -2px 1px rgba(0,0,0,.45)}
.led.online{background:#19d22c}.led.offline{background:#d11}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.tabbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;padding:3px 1px 4px;background:var(--win-gray);border-bottom:1px solid #808080}
.tab{display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:4px 4px;background:#c0c0c0;color:#111;text-decoration:none;font-size:10px;font-weight:bold;text-align:center}
.tab:hover{background:#d0d0d0}.tab:active,.tab.active{border-top:2px solid var(--win-shadow);border-left:2px solid var(--win-shadow);border-right:2px solid #fff;border-bottom:2px solid #fff;background:#b8b8b8}

.page-grid{display:grid;grid-template-columns:182px minmax(0,1fr) 214px;gap:10px;padding:7px 5px 4px;background:var(--win-gray)}
.panel{margin:0 0 10px;padding:2px;background:var(--win-gray);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #808080;border-bottom:2px solid #808080}
.panel-title{width:100%;min-height:25px;padding:3px 4px;display:flex;align-items:center;justify-content:space-between;background:var(--win-blue);color:#fff;border:0;text-align:left;font-weight:bold;cursor:pointer}
.static-title{cursor:default}
.panel-title a{color:#fff;text-decoration:none}.panel-title a:hover{text-decoration:underline}
.panel-glyph{width:18px;height:18px;display:grid;place-items:center;background:var(--win-gray);color:#000;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;font:bold 15px/12px Arial}
.panel-body{padding:8px;background:#c0c0c0}.no-pad{padding:0}.panel.collapsed .panel-body{display:none}

.tree-nav a{display:flex;align-items:center;gap:6px;padding:5px 7px;color:#111;text-decoration:none;border-bottom:1px dotted #808080}
.tree-nav a:hover{background:#d4d4d4}.tree-nav a.selected{background:#000080;color:#fff}.tree-nav span{font-size:14px}.folder-icon{display:inline-grid;place-items:center;width:8px;flex:0 0 8px;color:inherit;line-height:1}.folder-icon::before{content:"-";font-size:14px}
.community-list a{display:flex;gap:9px;align-items:center;padding:6px 1px;color:#111;text-decoration:none;border-bottom:1px solid #999;border-top:1px solid #eee}.community-list a:first-child{border-top:0}.community-list a:last-child{border-bottom:0}.community-list strong,.community-list small{display:block}.community-list small{font-size:10px}.big-icon{width:8px;flex:0 0 8px;display:grid;place-items:center;color:inherit;font:14px/1 Arial}
.counter-row{display:flex;align-items:center;gap:7px}.counter-icon{width:35px;height:33px;display:grid;place-items:center;background:#d7d7d7;border:2px inset #fff;font-size:20px}.counter{flex:1;background:#000;color:#00ff69;padding:5px 4px;text-align:center;font:bold 17px/1.1 "Courier New",monospace;letter-spacing:2px;border:2px inset #eee;text-shadow:0 0 5px #0f6}

.news-list{padding:5px}.news-item{padding:6px 7px 8px;border-top:2px solid #888;border-left:2px solid #888;border-right:2px solid #fff;border-bottom:2px solid #fff;background:#c9c9c9;margin-bottom:5px}.news-item:last-child{margin-bottom:0}.news-meta{display:flex;justify-content:space-between;font:10px/1.1 "Courier New",monospace}.news-item h2{margin:5px 0 2px;font:bold 12px/1.2 Tahoma,Arial}.news-item p{margin:0}

.server-online{display:flex;align-items:center;font-size:17px;margin-bottom:7px}.tiny-note{font-size:9px;color:#444;border-top:1px solid #888;margin:8px 0 0;padding-top:7px}.tiny-note code{font-size:9px}
.patch-head{display:flex;gap:8px;align-items:center}.patch-head strong,.patch-head small{display:block}.patch-head small{font-size:9px}.doc-icon{font-size:14px;color:inherit;line-height:1}.patch-box ul{list-style:none;padding:6px 0 0;margin:8px 0;border-top:1px solid #888}.patch-box li{padding:2px 0;border-bottom:1px solid #eee}.patch-box li:before{content:"• ";}.retro-link{font-weight:bold}.poll-panel fieldset{border:0;padding:0;margin:0 0 8px}.poll-panel legend{font-weight:bold;margin-bottom:4px}.poll-panel label{display:block;padding:2px 0}.poll-result{display:block;margin-top:6px;font-size:10px;min-height:14px}
.site-footer{text-align:center;padding:10px 8px 8px;border-top:2px solid #808080;background:#c0c0c0;font-size:10px}.site-footer p{margin:2px}

@media (max-width:860px){
  .page-grid{grid-template-columns:165px 1fr}.right-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.right-rail .panel{margin-bottom:0}.tabbar{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:650px){
  .desktop{padding:0}.browser-window{width:100%;border-left:0;border-right:0}.page-grid{grid-template-columns:1fr}.left-rail,.right-rail{grid-column:auto}.left-rail{display:grid;grid-template-columns:1fr 1fr;gap:8px}.right-rail{display:grid;grid-template-columns:1fr 1fr}.tabbar{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:430px){
  .left-rail,.right-rail{display:block}.status-strip{font-size:10px}
}

/* Transparency / availability states */
.led.pending{background:#d7bf00;box-shadow:inset 1px 1px #fff6a8,inset -1px -1px #6f6500}
.status-explainer{margin:7px 0 8px;line-height:1.35}
.download-info strong{display:block;margin-bottom:5px}
.download-info p{margin:4px 0;line-height:1.35}
.ip-label{font-size:9px;font-weight:bold;letter-spacing:1px;margin-bottom:4px}
.server-ip{background:#fff;padding:8px 7px;text-align:center;font:bold 12px/1.35 "Courier New",monospace;letter-spacing:.2px;user-select:all}
.connection-screenshot{display:block;max-width:100%;height:auto;margin:8px auto}

/* Long-form progression pages */
.article-copy { font-size: 13px; line-height: 1.38; }
.article-copy h2 { font-size: 14px; margin: 14px 0 5px; border-bottom: 1px dotted #808080; padding-bottom: 3px; }
.article-copy p { margin: 7px 0; }
.article-copy ul, .article-copy ol { margin: 6px 0 8px 26px; padding: 0; }
.article-copy li { margin: 3px 0; }
.waypoint-command { white-space: nowrap; user-select: all; }
.retro-notice, .tldr-box { background: #ffffe1; border: 1px solid #808080; padding: 8px 10px; margin: 10px 0; }
.tldr-box { background: #fff; }
.system-table { background: #fff; padding: 5px; margin: 8px 0; }
.system-table > div { display: grid; grid-template-columns: 180px 1fr; gap: 8px; padding: 5px; border-bottom: 1px dotted #aaa; }
.system-table > div:last-child { border-bottom: 0; }
.retro-table { border-collapse: collapse; width: min(430px,100%); background: #fff; margin: 8px 0; }
.retro-table th, .retro-table td { border: 1px solid #808080; padding: 4px 7px; text-align: left; }
.retro-table th { background: #c0c0c0; }
@media (max-width: 700px) { .system-table > div { grid-template-columns: 1fr; gap: 2px; } }

.standalone-page { margin: 8px 6px 0; }
.standalone-page .feature-page { max-width: none; }

/* official Elder Haven banner */
.official-masthead{
  margin:3px 0 4px;
  padding:2px 0 1px;
  background:#c0c0c0;
  overflow:hidden;
  line-height:0;
  text-align:center;
}
.official-banner-link{display:block;text-decoration:none;background:#c0c0c0}
.official-banner{
  display:block;
  width:min(62%, 620px);
  margin:0 auto;
  height:auto;
  aspect-ratio:3/1;
  object-fit:contain;
  background:#c0c0c0;
}
@media (max-width:650px){
  .official-masthead{margin-top:1px;padding:2px 0}
  .official-banner{width:100%;height:auto}
}

/* feature breakdown */
.feature-breakdown{padding:10px 12px 12px}
.feature-intro{margin:0 0 10px;padding:8px 9px;background:#e8e8e8;border:1px solid #808080;box-shadow:inset 1px 1px #fff,inset -1px -1px #b0b0b0}
.feature-row{display:block;padding:8px 2px;border-top:1px dotted #808080}
.feature-row:first-of-type{border-top:0}
.feature-row h3{display:inline-block;max-width:100%;margin:0 0 7px;padding:4px 7px;background:#d7d7d7;border:1px solid #808080;border-top-color:#fff;border-left-color:#fff;box-shadow:1px 1px 0 #aaa;font-size:13px;font-weight:bold;line-height:1.2;color:#000080}
.feature-row h3 a{color:#000080}
.feature-row p{margin:0;line-height:1.45}
@media (max-width:650px){.feature-breakdown{padding:8px}}