/* === 2000s web vibes === */
:root{
    --green:#1f7a3b; /* jungle green */
    --brown:#5a3a1a; /* monkey brown */
    --yellow:#f7c948; /* banana yellow */
    --cream:#fff8dc; /* old paper */
    --ink:#111;
}
html,body{height:100%}
body{
    margin:0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><rect width="28" height="28" fill="%23fff8dc"/><path d="M2 20c6 2 10-2 12-8" stroke="%23f7c948" stroke-width="2" fill="none"/><path d="M10 8c2 6 7 9 14 9" stroke="%231f7a3b" stroke-width="1" fill="none" opacity=".25"/></svg>') repeat fixed;
    color:var(--ink);
    font-family: Verdana, Tahoma, Arial, sans-serif;
}
.page{width:980px;margin:16px auto;border:3px double var(--brown);background:#fff;box-shadow:0 0 0 6px rgba(90,58,26,.08)}
/* Header banner */
.banner{background:linear-gradient(180deg,#fffbe0,#ffeaa0);border-bottom:3px solid var(--brown);position:relative}
.banner-inner{display:flex;align-items:center;gap:14px;padding:10px 14px}
.logo{display:flex;align-items:center;gap:10px}
.logo .disk{
    width:60px;
    height:60px;
    border-radius:8px;
}
.logo b{font-size:28px;letter-spacing:.3px;color:var(--green);text-shadow:1px 1px 0 #fff,2px 2px 0 #d2b48c}
.tag{font-size:12px;color:#333;background:#fff;border:1px solid #d4c19b;padding:4px 8px;border-radius:4px}
/* Nav bar 2003 style */
.nav{display:flex;gap:8px;padding:8px 12px;background:linear-gradient(180deg,#2fa15a,#1f7a3b);border-top:1px solid #e9ffec;border-bottom:2px solid #0c3a1b}
.nav a{color:#fff;font-weight:bold;padding:6px 10px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(0,0,0,.0));border-radius:3px;text-decoration:none}
.nav a:hover{background:#fff;color:var(--green)}
/* Ticker */
.ticker{background:#fdf5cf;border-top:2px dashed var(--brown);border-bottom:2px dashed var(--brown);padding:4px}
marquee{font-size:12px;color:#573b1c}
/* Layout: table-ish like early 2000s */
.layout{display:grid;grid-template-columns:220px 1fr;gap:0}
.sidebar{background:#fffbec;border-right:2px solid #e3d2ad;padding:10px}
.content{padding:14px 18px}
/* === Main only === */
h1{font-size:22px;color:var(--brown);margin:8px 0 6px;text-shadow:1px 1px 0 #fff}
h2{font-size:18px;color:var(--green);margin:16px 0 8px}
p{line-height:1.5}
img {display: block;max-width: 100%;height: auto;margin: 0 auto;}
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent);margin:10px 0}
/* Buttons */
.btn{display:inline-block;padding:8px 12px;border:2px outset var(--green);background:#e8ffe8;color:#083b17;font-weight:bold;text-decoration:none}
.btn:active{border-style:inset}
/* Cards */
.panel{border:2px groove #c8b894;background:#fffef6;padding:10px;margin-bottom:12px}
.panel h3{margin:0 0 6px;color:var(--brown)}
/* Footer */
footer{padding:12px;border-top:3px solid var(--brown);background:#fff7d6;text-align:center;font-size:12px;color:#5b4a2a}
.blinker{animation:blink 1.2s steps(2, start) infinite}
@keyframes blink{to{visibility:hidden}}
/* Inline SVG art styling */
/* removed drop-shadow filter for broader SVG support */
.caption{font-size:12px;color:#6b5a3a;text-align:center;margin-top:4px}