@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,800;0,900;1,800;1,900&family=Space+Mono:wght@400;700&display=swap');
:root{--cream:#fff6d7;--green:#bbed65;--dark:#102d23}*{box-sizing:border-box}body{margin:0;background:var(--dark);color:var(--cream);font-family:'Space Mono',monospace;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:7px}button:hover{color:var(--green)}[hidden]{display:none!important}.scene{position:fixed;inset:0;z-index:-2}.scene>img{height:100%;width:100%;object-fit:cover;object-position:center;transition:transform 1.6s,filter 1.6s}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#082a20d9 0%,#082a2090 28%,#082a2010 59%),linear-gradient(0deg,#082a20d9,transparent 30%)}.scanlines{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.13;background:repeating-linear-gradient(transparent 0 3px,#173b2d 3px 4px)}header{position:fixed;left:4%;right:4%;top:4%;display:flex;justify-content:space-between;align-items:flex-start;z-index:5}.wordmark{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-size:30px;line-height:1;text-align:left;font-weight:900;padding:0;text-shadow:2px 2px #153225}.wordmark span{display:block;font:10px 'Space Mono',monospace;letter-spacing:2px;margin-top:12px}#sound{font-size:10px;border:1px solid #fff6d755;background:#133e2c66;padding:12px 15px}.intro{position:absolute;left:8%;top:16%;transition:opacity .5s}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--green);line-height:1.8;margin:0 0 22px}h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;letter-spacing:-.025em;margin:0;line-height:.84}h1{font-size:clamp(100px,13vw,190px);font-style:italic;transform:rotate(-3deg);transform-origin:left;text-shadow:2px 3px #718762,4px 6px #536d50,6px 9px #1a3f2b}h1 span{color:var(--green)}.intro-copy{font-size:14px;line-height:1.8;margin:30px 0}.start{font-weight:700;font-size:23px;letter-spacing:3px;padding:10px 0;color:var(--green)}.start span{font-size:17px;margin-right:10px;display:inline-block;animation:nudge 1.5s infinite}.hint{font-size:9px;letter-spacing:1.7px;opacity:.65;margin-top:15px}.hero-copy{position:absolute;left:8%;top:25%;max-width:43%}.hero-copy h2{font-size:clamp(80px,8vw,130px);text-shadow:3px 4px #193e2b}em{color:var(--green);font-style:italic}.hero-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;margin:26px 0 16px}.text-link{font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 0;border-bottom:1px solid #e8f2cb66}#hello{position:absolute;left:56%;width:34%;top:21%;height:61%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.hello-label{background:var(--cream);color:#213e2a;font-size:12px;padding:12px 20px;transform:rotate(3deg);box-shadow:4px 5px #18322660}.hello-hint{font-size:9px;letter-spacing:2px;text-shadow:0 2px 4px #000}nav{position:absolute;bottom:9%;left:8%;right:8%;display:flex;gap:12px}nav button{display:flex;align-items:center;gap:18px;flex:1;background:#173d2ade;border:1px solid #eff9c666;box-shadow:4px 5px #09271966;padding:22px 18px;text-align:left;font-family:'Barlow Condensed',Impact,sans-serif;font-size:18px;font-weight:800;transition:background .2s,transform .2s}nav button:hover{background:#396143;transform:translateY(-4px)}nav small{font:9px 'Space Mono';opacity:.55}nav span{margin-left:auto;color:var(--green);font-size:24px}footer{position:fixed;left:4%;right:4%;bottom:3%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px}body[data-view=intro] header,body[data-view=intro] footer{opacity:0;pointer-events:none}body[data-view=intro] .scene>img{transform:scale(1.06);filter:brightness(.8)}body[data-view=intro]:before,body[data-view=intro]:after{content:'';position:fixed;left:0;right:0;height:5vh;background:#0d2018;z-index:4}body[data-view=intro]:before{top:0}body[data-view=intro]:after{bottom:0}#landing{animation:reveal .7s both}#leave-hang{position:fixed;bottom:5%;left:50%;transform:translateX(-50%);background:#173d2aee;padding:15px 22px;border:1px solid #fff6d766;font-size:11px}body[data-view=hang] header,body[data-view=hang] footer{display:none}body[data-view=hang] .shade{opacity:0}dialog{color:var(--cream);background:#173d2b;border:1px solid #f6efd27a;box-shadow:10px 12px #07190f66;padding:45px;width:min(650px,90vw);max-height:85svh}dialog::backdrop{background:#071c14bd;backdrop-filter:blur(7px)}dialog h2{font-size:70px;margin-bottom:26px}dialog>p:not(.eyebrow){font-size:13px;line-height:1.9}dialog .close{position:absolute;right:15px;top:10px;font-size:30px}.story-back{border:1px solid #fff6d766;background:#35613c;padding:14px 20px;margin-top:15px;font-size:11px}.art-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.art-grid a{color:var(--cream);text-decoration:none;font-size:10px;line-height:1.8}.art-grid img{width:100%;height:175px;object-fit:cover;margin-bottom:10px;border:1px solid #fff6d744}#toast{position:fixed;z-index:20;bottom:22%;left:50%;transform:translateX(-50%);background:var(--cream);color:#123321;padding:15px;opacity:0;pointer-events:none;font-size:12px}#toast.show{opacity:1}.no-js{position:fixed;bottom:0;background:#163c29;padding:20px}@keyframes nudge{50%{transform:translateX(5px)}}@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){header{top:3%;left:6%;right:6%}.wordmark{font-size:24px}.wordmark span{font-size:8px}#sound{padding:10px;font-size:8px}.scene>img{object-position:72% center}.shade{background:linear-gradient(180deg,#092c2199,transparent 35%,#092c2100 58%,#092c21e8 83%),linear-gradient(90deg,#092c2199,transparent 70%)}.intro{left:8%;top:19%}h1{font-size:25vw}.intro-copy{font-size:12px;margin:25px 0}.start{font-size:20px}.eyebrow{font-size:8px;letter-spacing:1.5px;max-width:250px}.hero-copy{top:15%;left:7%;max-width:72%;pointer-events:none}.hero-copy h2{font-size:21vw}.hero-copy .eyebrow{margin-bottom:14px;font-size:7px}.hero-copy>p:not(.eyebrow){font-size:10px;line-height:1.7;max-width:190px;margin-top:17px}.text-link{pointer-events:auto;font-size:8px}#hello{left:34%;width:60%;top:46%;height:22%;justify-content:flex-end;gap:10px}.hello-label{font-size:10px;padding:8px 12px}.hello-hint{font-size:8px}nav{bottom:8%;left:6%;right:6%;flex-wrap:wrap;gap:7px}nav button{min-width:100%;padding:12px 15px;font-size:14px;gap:15px}nav button span{font-size:18px}footer{left:6%;right:6%;bottom:3%;font-size:7px}footer span:last-child{display:none}dialog{padding:35px 25px}dialog h2{font-size:55px}.art-grid{grid-template-columns:1fr}.art-grid img{height:180px;object-fit:contain}.art-grid a{display:block}.hint{font-size:8px}body[data-view=intro] .shade{background:linear-gradient(90deg,#092c21df,#092c2160)}#toast{max-width:90vw;width:max-content}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
#landing{position:fixed;inset:0}
@media(min-width:701px){nav{bottom:7%}nav button{padding:17px 18px}#hello{height:57%}}
@media(max-width:700px){.scene{background:#153d2b}.scene>img{position:absolute;height:62%;top:17%;object-position:82% center}.shade{background:linear-gradient(180deg,#123725 0%,#123725dd 17%,#12372544 34%,transparent 49%,#12372500 60%,#123725 81%)}#hello{top:54%;height:13%;left:38%;width:56%}body[data-view=intro] .scene>img{height:100%;top:0;object-position:77% center}body[data-view=hang] .scene>img{height:100%;top:0;object-position:77% center}}
@media(max-width:700px){.scene>img{mask-image:linear-gradient(transparent,black 18%,black 85%,transparent)}.hero-copy p,.text-link{text-shadow:0 1px 4px #102d23,0 1px 8px #102d23}body[data-view=intro] .scene>img,body[data-view=hang] .scene>img{mask-image:none}}

.mascot-stage{position:absolute;left:72%;bottom:15%;height:58%;width:35%;transform:translateX(-50%);pointer-events:none;isolation:isolate}.mascot-reaction{width:100%;height:100%;transform-origin:50% 95%}.mascot-sprite{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 96%;animation:little-idle 4.8s ease-in-out infinite;will-change:transform}.mascot-shadow{position:absolute;left:24%;right:24%;height:6%;bottom:0%;border-radius:50%;background:#19301b66;filter:blur(7px);transform:scaleX(1.1);animation:little-shadow 4.8s ease-in-out infinite;z-index:-1}.mascot-reaction.booped{animation:little-boop .7s ease-in-out}body[data-view=intro] .mascot-stage{filter:brightness(.8)}body[data-view=hang] .mascot-stage{filter:none}.motion-paused .mascot-sprite,.motion-paused .mascot-shadow{animation-play-state:paused}
@keyframes little-idle{0%,100%{transform:translateY(0) rotate(-.8deg) scale(1,1)}30%{transform:translateY(-3px) rotate(.5deg) scale(1.006,1.008)}55%{transform:translateY(-5px) rotate(.9deg) scale(.994,1.014)}80%{transform:translateY(-1px) rotate(-.3deg) scale(1.003,1.003)}}
@keyframes little-shadow{0%,100%{opacity:.65;transform:scaleX(1.1)}55%{opacity:.5;transform:scaleX(1.04)}}
@keyframes little-boop{0%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(3px) scale(1.035,.96)}50%{transform:translateY(-18px) rotate(-3deg) scale(.98,1.03)}75%{transform:translateY(0) rotate(1.5deg) scale(1.025,.975)}}
@media(max-width:700px){.mascot-stage{left:58%;bottom:31%;width:76%;height:36%}body[data-view=intro] .mascot-stage{left:72%;bottom:18%;height:49%;width:100%;opacity:.8}body[data-view=hang] .mascot-stage{left:50%;bottom:19%;width:95%;height:56%;opacity:1}}
@media(prefers-reduced-motion:reduce){.mascot-sprite,.mascot-shadow,.mascot-reaction{animation:none!important;will-change:auto}}
.social-links a{flex:1;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:#173d2ade;border:1px solid #eff9c666;text-decoration:none;color:var(--cream);font:800 20px 'Barlow Condensed',sans-serif;box-shadow:4px 5px #09271966}.social-links a:hover{background:#396143;color:var(--green)}.social-links a[aria-disabled=true]{opacity:.65;cursor:default}.maker-launch{display:block;background:var(--green);color:#153d2b;padding:13px 18px;font:bold 12px 'Space Mono',monospace;box-shadow:4px 4px #072a1d80;margin:22px 0 12px}.maker-launch:hover{color:#153d2b;background:#d4f89c}
#maker{width:min(1000px,94vw);padding:30px;background:#133b2c;max-height:94svh}#maker h2{font-size:52px;margin:0 0 22px}.maker-heading .eyebrow{margin-bottom:12px;font-size:9px}.maker-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:30px}.maker-preview{min-width:0}#pfp-canvas{width:100%;height:auto;display:block;background:repeating-conic-gradient(#e5e7e5 0% 25%,#fff 0% 50%) 50%/20px 20px;border:1px solid #ffffff55}.maker-preview.circular canvas{border-radius:50%}#maker-status{font-size:10px;line-height:1.5;min-height:15px;color:#dae8d1}#maker-controls{display:flex;flex-direction:column;gap:12px}#maker-controls>label{font-size:10px;letter-spacing:1px;display:flex;align-items:center;justify-content:space-between;gap:12px}#maker-controls select{width:60%;background:#204f3c;border:1px solid #bbed6555;color:var(--cream);font:12px 'Space Mono',monospace;padding:9px;min-width:0}#maker-controls input[type=color]{border:1px solid #fff6d766;padding:2px;width:52px;height:30px;background:transparent;cursor:pointer}.swatches{display:flex;gap:9px}.swatches button{width:27px;height:27px;border-radius:50%;background:var(--swatch);border:2px solid #ffffff66}.swatches button:hover{transform:scale(1.1)}.circle-toggle,.transparent-toggle{font-size:10px!important;letter-spacing:0!important;justify-content:flex-start!important;display:flex;gap:8px;align-items:center}.maker-actions{display:flex;gap:10px;margin-top:6px}.maker-actions button{border:1px solid #fff6d755;padding:10px;font-size:10px;flex:1}#download-pfp{background:var(--green);color:#173c2b;padding:15px;font:bold 12px 'Space Mono',monospace}#download-pfp:disabled{opacity:.5;cursor:wait}.export-note{font-size:9px;text-align:center;margin:0;color:#c5d6b8}
@media(max-width:700px){.social-links{flex-wrap:nowrap;gap:5px}.social-links a{padding:14px 8px;font-size:13px;gap:5px}.social-links a span{font-size:16px}.maker-launch{font-size:9px;margin:14px 0 9px;padding:11px 12px;pointer-events:auto}.maker-layout{grid-template-columns:1fr;gap:18px}#maker{padding:28px 20px}#maker h2{font-size:41px}#pfp-canvas{max-width:340px;margin:auto}#maker-controls{gap:13px}.maker-heading .eyebrow{font-size:7px}.hero-copy>p:not(.eyebrow){margin-bottom:10px}nav.social-links{bottom:8%}}
.link-pending{display:block!important;font:8px "Space Mono",monospace!important;letter-spacing:1px;margin-top:4px;opacity:.7}
.header-actions{display:flex;align-items:center;gap:10px}.ca-box{display:flex;align-items:center;gap:12px;border:1px solid #bbed6577;background:#102d23e6;padding:12px 15px;font-size:10px;min-height:40px}.ca-label{color:var(--green);font-weight:700}.ca-box:disabled{cursor:default;color:#fff6d799}.ca-box:not(:disabled):hover{background:#294d35}#ca-value{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body[data-view=intro] header{opacity:1;pointer-events:auto}body[data-view=intro] .wordmark{visibility:hidden}@media(max-width:700px){.header-actions{gap:6px}.ca-box{font-size:8px;padding:10px;gap:7px;min-height:34px}#ca-value{max-width:100px}.wordmark{font-size:21px}.wordmark span{letter-spacing:1px}header{left:4%;right:4%}}