:root{--sky1:#5aa9ee;--sky2:#c6e8ff;--grass:#5fae3c;--grass-d:#3f8a2a;--dirt:#8a5a35;--dirt-d:#5a3a1f;--stone:#8b8d91;--forest:#16351f;--nav-bg:rgba(255,255,255,.55);--nav-ink:#1c2a1f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky1:#142347;--sky2:#35568a;--nav-bg:rgba(20,30,24,.6);--nav-ink:#e8efe0}}
:root[data-theme="dark"]{--sky1:#142347;--sky2:#35568a;--nav-bg:rgba(20,30,24,.6);--nav-ink:#e8efe0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;background:var(--sky1);scroll-padding-top:calc(70px + env(safe-area-inset-top,0px))}
body{font:400 1rem/1.7 Manrope,system-ui,sans-serif;background:var(--forest);color:#f4f1e6;overflow-x:hidden}
.px{font-family:"Press Start 2P",ui-monospace,monospace;line-height:1.6;font-weight:400}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn{display:inline-block;font:400 .7rem/1.4 "Press Start 2P",ui-monospace,monospace;padding:.95rem 1.2rem;background:var(--grass);color:#10230f;border:3px solid #111;box-shadow:inset -4px -4px 0 rgba(0,0,0,.28),inset 4px 4px 0 rgba(255,255,255,.35);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-3px);background:#74c94b}.btn:active{transform:translateY(1px)}
.btn.alt{background:#c6c6c6}.btn.alt:hover{background:#e0e0e0}
#loader{position:fixed;inset:0;z-index:99;background:var(--dirt-d);display:grid;place-content:center;gap:1.2rem;text-align:center;transition:opacity .5s}
#loader.done{opacity:0;pointer-events:none}
#loader p{font-size:.8rem}
.bar{width:min(260px,70vw);height:22px;border:4px solid #111;background:#2b1a0c;padding:2px}
.bar i{display:block;height:100%;width:100%;background:var(--grass);animation:fill 1.1s steps(10) both}
@keyframes fill{from{width:0}}
nav{position:fixed;z-index:50;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);display:flex;gap:2px;overflow-x:auto;padding:6px;background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.45);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.18);scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{position:relative;z-index:1;white-space:nowrap;text-decoration:none;color:var(--nav-ink);font-weight:600;font-size:.85rem;padding:.55rem .95rem;border-radius:999px;transition:color .25s,transform .2s}
nav a:hover{transform:translateY(-1px)}nav a.on{color:#fff}
.pill{position:absolute;left:0;top:6px;height:calc(100% - 12px);width:0;background:var(--grass-d);border-radius:999px;transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s}
.hero{position:relative;min-height:100svh;overflow:hidden;background:linear-gradient(var(--sky1),var(--sky2));display:flex;align-items:center;padding:7rem 1.25rem 8rem}
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.cloud{position:absolute;width:40px;height:20px;background:#fff;opacity:.92;box-shadow:40px 0 #fff,80px 0 #fff,20px -20px #fff,60px -20px #fff;animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-300px) scale(var(--k))}to{transform:translateX(110vw) scale(var(--k))}}
.mtn{position:absolute;left:0;bottom:70px;width:100%;height:46%;min-height:220px}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tree{position:absolute;bottom:78px;width:64px;height:112px}
.tree::before{content:"";position:absolute;top:0;left:0;width:64px;height:64px;background:#2f7a2f;box-shadow:inset -8px -8px 0 #256425,inset 8px 8px 0 #3b8f3b}
.tree::after{content:"";position:absolute;left:24px;top:64px;width:16px;height:48px;background:#6b4423;box-shadow:inset -4px 0 #50321a}
.ground{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(90deg,rgba(0,0,0,.09) 50%,transparent 50%) 0 0/64px 100%,linear-gradient(var(--grass) 0 26px,var(--grass-d) 26px 34px,var(--dirt) 34px)}
#steve{position:absolute;right:max(4vw,12px);bottom:84px;width:72px;animation:bob 2.4s ease-in-out infinite}
#steve svg{width:100%;display:block}
@keyframes bob{50%{transform:translateY(-6px)}}
.hero-in{position:relative;z-index:2;max-width:1040px;margin:0 auto;width:100%}
.lbl{font-size:.7rem;color:#10230f;background:#fff;display:inline-block;padding:.5rem .7rem;border:3px solid #111}
.hero h1{font-size:clamp(3rem,13vw,7.5rem);color:#fff;text-shadow:6px 6px 0 #1c3a22;margin:1.2rem 0 1rem;letter-spacing:.02em}
.sub{font-weight:800;font-size:clamp(1rem,2.6vw,1.35rem);color:#10230f}
.hero p.d{max-width:34rem;margin:1rem 0 2rem;font-size:1.1rem;color:#10230f;font-weight:600}
.btns{display:flex;gap:.9rem;flex-wrap:wrap}
.rise{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.scroll{position:absolute;z-index:2;left:50%;bottom:100px;transform:translateX(-50%);font-size:.55rem;color:#fff;text-align:center;text-decoration:none;text-shadow:2px 2px 0 #1c3a22}
.scroll b{display:block;margin-top:.4rem;animation:nudge 1.2s steps(2) infinite}
@keyframes nudge{50%{transform:translateY(6px)}}
.sec{padding:clamp(4.5rem,9vw,7rem) 1.25rem;position:relative}
.wrap{max-width:1040px;margin:0 auto}
.sec h2{font-size:clamp(1rem,3vw,1.6rem);margin-bottom:.8rem}
.sec .sb{color:#e9d9b0;margin-bottom:2.2rem;max-width:36rem}
#about{background:var(--forest);border-top:8px solid var(--grass)}
#interests{background:#34363a;border-top:8px solid #55575c}
#projects{background:var(--dirt) linear-gradient(rgba(0,0,0,.14) 2px,transparent 2px) 0 0/32px 32px;border-top:8px solid var(--grass-d)}
#journey{background:#0f2616;border-top:8px solid #264d2f}
#contact{background:linear-gradient(#16351f,#102a18);border-top:8px solid #264d2f}
.about{display:grid;gap:2.5rem;grid-template-columns:1.1fr .9fr;align-items:start}
.about p{margin-bottom:1rem;max-width:34rem}
.inv{background:#c6c6c6;color:#2b2b2b;border:4px solid #111;box-shadow:inset 4px 4px 0 #fff,inset -4px -4px 0 #7b7b7b;padding:1.2rem}
.inv h3{font-size:.65rem;margin-bottom:1rem;color:#3a3a3a}
.slot{background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737,inset -3px -3px 0 #fff}
.me{display:grid;place-items:center;width:128px;height:128px;margin-bottom:1rem;overflow:hidden;text-align:center;font-size:.5rem;color:#2b2b2b}
.me img{width:100%;height:100%;object-fit:cover}
.inv dl{display:grid;gap:.5rem}
.inv .slot{padding:.55rem .8rem}
.inv dt{font:400 .5rem/1.4 "Press Start 2P",monospace;color:#2b2b2b}
.inv dd{font-weight:800;color:#111}
.hotbar{display:flex;gap:.5rem;background:#222;padding:.5rem;border:4px solid #111;width:fit-content;max-width:100%}
.hb{width:clamp(62px,17vw,100px);aspect-ratio:1;padding:12%;background:#8b8b8b;border:3px solid #373737;box-shadow:inset 3px 3px 0 #bdbdbd;cursor:pointer;transition:transform .2s,background .2s}
.hb svg{width:100%;display:block;image-rendering:pixelated}
.hb:hover{transform:translateY(-4px)}
.hb[aria-selected=true]{border-color:#fff;background:#a9a9a9;transform:translateY(-8px)}
.tip{margin-top:2rem;max-width:34rem;background:#100010;border:3px solid #2d0a63;box-shadow:inset 0 0 0 2px #1a0638;padding:1.1rem 1.3rem;min-height:9.5rem}
.tip h3{font-size:.75rem;color:#ffd75e;margin-bottom:.8rem}
.tip.sw{animation:rise .35s both}
.world{display:grid;grid-template-columns:150px 1fr auto;gap:1rem;align-items:center;background:rgba(0,0,0,.5);border:3px solid #111;padding:.7rem;margin-bottom:.8rem;transition:border-color .2s,transform .2s}
.world:hover{border-color:#fff;transform:translateX(6px)}
.th{width:150px;height:86px;object-fit:cover;display:block;border:2px solid #000;background:linear-gradient(var(--sky1) 0 55%,var(--grass) 55% 70%,var(--dirt) 70%)}
.world h3{font-size:.8rem;margin-bottom:.4rem}
.world p{font-size:.92rem;color:#eadfc3}
.st{display:inline-block;margin-top:.4rem;font:400 .5rem/1 "Press Start 2P",monospace;color:#0c240c;background:#7ddb50;padding:.35rem .5rem}
.sign{display:inline-block;max-width:30rem;background:#b98a52;color:#2a1a0a;border:4px solid #5b3b1b;box-shadow:inset 4px 4px 0 #d8ae77,inset -4px -4px 0 #946a38;padding:1.2rem 1.5rem;font-weight:800;position:relative;margin-bottom:34px}
.sign::after{content:"";position:absolute;left:calc(50% - 8px);top:100%;width:16px;height:30px;background:#6b4423;border:3px solid #3c2510;border-top:0}
.empty{text-align:center;padding:2.2rem 1rem;border:3px dashed #e9d9b0;background:rgba(0,0,0,.3)}
.empty .sign{font-size:1.05rem}
.add{margin-top:1.5rem}
#hint{margin-top:1rem;color:#fff;font-size:.9rem}
.tl{position:relative;padding-left:3.4rem;--p:0}
.tl::before,.tl::after{content:"";position:absolute;left:.95rem;top:0;width:6px;background:#ffffff22}
.tl::before{height:100%}
.tl::after{height:calc(var(--p)*100%);background:#7ddb50}
.ach{position:relative;display:flex;gap:1rem;align-items:center;background:#222;border:3px solid #000;box-shadow:inset 0 0 0 2px #555;padding:.9rem 1rem;margin-bottom:1.1rem;opacity:0;transform:translateX(-18px);transition:opacity .5s,transform .5s}
.ach.in{opacity:1;transform:none}
.ach::before{content:"";position:absolute;left:-2.9rem;top:50%;margin-top:-9px;width:18px;height:18px;background:#555;border:3px solid #111}
.ach.in::before{background:#7ddb50}
.ach .n{flex:none;display:grid;place-items:center;width:48px;height:48px;font-size:.7rem;color:#10230f;background:#7ddb50;border:3px solid #111}
.ach h3{font-size:.7rem;color:#ffd75e;margin-bottom:.35rem}
.ach p{font-size:.95rem}
.ctr{text-align:center}
.ctr .sign{font-size:1.1rem;max-width:34rem}
.links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
footer{background:var(--dirt-d);padding:2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom,0px));border-top:8px solid var(--grass-d)}
.fi{max-width:1040px;margin:0 auto;display:grid;gap:1.2rem;justify-items:start}
.logo{font-size:1.1rem;display:flex;gap:.7rem;align-items:center;text-decoration:none}
.logo i{width:22px;height:22px;background:linear-gradient(var(--grass) 0 40%,var(--dirt) 40%);border:3px solid #111}
.fn{display:flex;gap:1.2rem;flex-wrap:wrap;font-weight:600}
.fn a{text-decoration:none;border-bottom:2px solid transparent}.fn a:hover{border-color:var(--grass)}
footer small{color:#d9c9a5}
#top{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;padding:0;font-size:1rem;opacity:0;pointer-events:none;transform:translateY(12px)}
#top.show{opacity:1;pointer-events:auto;transform:none}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.rv.in{opacity:1;transform:none}

@keyframes pg{from{opacity:0}}
#snd{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;padding:.75rem .9rem;font-size:.55rem}
#snd[aria-pressed=true]{background:var(--grass)}
@media(max-width:760px){.about{grid-template-columns:1fr}.world{grid-template-columns:96px 1fr}.th{width:96px;height:64px}.world .btn{grid-column:1/-1;text-align:center}#steve{width:52px}.scroll{bottom:96px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rise,.rv,.ach{opacity:1;transform:none}}

html.seen #loader{display:none}
img.th{object-position:left center}