@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Poppins:wght@400;600;700&display=swap');

:root { --blue:#1b8fc4; --sky:#5bcbe8; --ink:#222; --muted:#666; --line:#e3e3e3; --brown:#6b3d12; --gold:#ffd84a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Poppins', system-ui, sans-serif; color:var(--ink); background:#fff; line-height:1.6; }
img.px { image-rendering:pixelated; }
a { color:var(--blue); }

/* top bar: sits on the hero on the home page, solid on the other pages */
.top { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; gap:12px; flex-wrap:wrap; }
.top.solid { background:var(--sky); }
.logo { font-family:'Lilita One', sans-serif; font-size:22px; color:var(--gold); -webkit-text-stroke:1px #5a3510; text-shadow:0 2px 0 #5a3510; text-decoration:none; }
.nav a { color:#fff; font-weight:600; font-size:14px; margin-left:18px; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.nav a:first-child { margin-left:0; }
.nav a:hover, .nav a[aria-current] { text-decoration:underline; }

/* hero */
.hero { position:relative; min-height:430px; background:url('assets/bg_sunny.jpg') center 30%/cover no-repeat; overflow:hidden; }
.hero .top { position:absolute; left:0; right:0; top:0; z-index:4; }
.hero-in { position:relative; z-index:4; padding:92px 34px 90px; max-width:1100px; margin:0 auto; }
.word { font-family:'Lilita One', sans-serif; font-size:clamp(46px, 9vw, 78px); line-height:.95; color:var(--gold); -webkit-text-stroke:2.5px var(--brown); text-shadow:0 5px 0 var(--brown), 0 8px 10px rgba(0,0,0,.25); }
.sub { font-family:'Lilita One', sans-serif; font-size:17px; letter-spacing:4px; color:#fff; -webkit-text-stroke:.7px #1b5d80; margin:6px 0 12px 4px; }
.desc { color:#fff; font-weight:700; font-size:15px; max-width:420px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.btns { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.btn { display:inline-block; border:2px solid #fff; color:#fff; font-size:14px; font-weight:600; padding:8px 20px; text-decoration:none; background:rgba(0,0,0,.12); }
.btn.solid { background:#fff; color:var(--blue); font-weight:700; }
.btn.blue { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.line { border-color:var(--blue); color:var(--blue); background:#fff; }
.btn:hover { filter:brightness(.95); }
.wotd { position:absolute; right:34px; top:78px; width:300px; border:6px solid #fff; box-shadow:0 8px 16px rgba(0,0,0,.35); z-index:3; background:#000; }
.wotd img { display:block; width:100%; height:170px; object-fit:cover; object-position:center 35%; }
.wotd .cap { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(0,0,0,.8)); color:#fff; font-weight:700; font-size:14px; padding:18px 10px 6px; }
.avatar { position:absolute; right:360px; bottom:44px; width:118px; z-index:4; filter:drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.ground { position:absolute; left:0; right:0; bottom:0; height:48px; z-index:3; background:url('assets/tile_dirt_top.png') 0 0/48px 48px repeat-x; image-rendering:pixelated; }
.ground2 { height:28px; background:url('assets/tile_dirt_top.png') 0 0/28px 28px repeat-x; image-rendering:pixelated; }

.bar { background:var(--sky); display:flex; align-items:center; gap:12px; padding:8px 18px; flex-wrap:wrap; }
.bar .in { flex:1; min-width:220px; background:#fff; color:#333; font-size:13px; padding:6px 10px; text-align:center; }
.bar a { color:#fff; font-weight:700; font-size:13px; }

/* sections */
.sec { padding:34px 24px; max-width:1000px; margin:0 auto; }
h1, h2 { line-height:1.15; margin:0 0 8px; }
h1 { font-size:clamp(28px, 6vw, 40px); }
h2 { font-size:clamp(22px, 4.5vw, 30px); margin-top:30px; }
h3 { font-size:18px; margin:22px 0 6px; }
.lead { color:var(--muted); margin:0 0 18px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:16px 0; }
.card { border:1px solid var(--line); padding:16px; background:#fff; }
.card img { width:44px; height:44px; }
.card b { display:block; font-size:16px; margin:6px 0 4px; }
.card p { margin:0 0 10px; color:var(--muted); font-size:14px; }

.dark { position:relative; color:#fff; background:#404040 url('assets/world_atmworld3122.jpg') center/cover; }
.dark::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.75); }
.dark > * { position:relative; }
.dark .sec h2 { color:#fff; margin-top:0; }
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; margin:14px 0 18px; font-size:14px; }
.steps .k { display:flex; gap:10px; align-items:flex-start; }
.steps img { width:40px; height:40px; flex:none; }

/* guide pages */
.tabs { position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--line); display:flex; gap:8px; padding:10px 24px; overflow-x:auto; }
.tabs a { white-space:nowrap; border:1.5px solid var(--blue); color:var(--blue); font-weight:700; font-size:14px; padding:6px 18px; text-decoration:none; }
.tabs a:hover { background:var(--blue); color:#fff; }
.guide { max-width:820px; margin:0 auto; padding:10px 24px 40px; }
.guide section { scroll-margin-top:70px; border-top:1px solid var(--line); padding:6px 0 30px; }
.guide section:last-child { padding-bottom:10px; }
ol.s { padding-left:0; list-style:none; counter-reset:s; margin:12px 0; }
ol.s > li { counter-increment:s; position:relative; padding:0 0 14px 46px; }
ol.s > li::before { content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; background:var(--blue); color:#fff; font-weight:700; text-align:center; line-height:32px; }
.note { background:#fff6e0; border-left:4px solid #e0a020; padding:10px 14px; margin:12px 0; font-size:14px; }
.ok { background:#e8f6ec; border-left-color:#2f9e55; }
code, pre { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; background:#f3f5f7; padding:1px 5px; }
pre { padding:10px 12px; overflow-x:auto; line-height:1.5; }
.guide { overflow-wrap:anywhere; }
.muted { color:var(--muted); font-size:14px; }
pre { white-space:pre-wrap; }
table { border-collapse:collapse; width:100%; font-size:14px; margin:12px 0; display:block; overflow-x:auto; }
th, td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:#f3f5f7; }
details { border:1px solid var(--line); margin:8px 0; padding:2px 14px; background:#fff; }
summary { cursor:pointer; font-weight:600; padding:10px 0; }
details p, details ul { margin:0 0 12px; color:#444; }

.foot { text-align:center; color:#777; font-size:12px; padding:14px 12px 20px; }
.foot .logo { font-size:22px; display:block; margin-bottom:4px; }
.foot a { color:#555; margin:0 6px; text-decoration:none; }

@media (max-width: 860px) {
  .wotd, .avatar { display:none; }
  .hero-in { padding:92px 20px 84px; }
  .nav a { margin-left:12px; font-size:13px; }
}