@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

:root{font-family:'DM Sans',system-ui,sans-serif;color:#173c3b;background:#b7e0d1;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#a9dacd}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.hud{position:fixed;z-index:3;inset:22px 28px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none}.brand{display:flex;flex-direction:column;width:max-content;font-size:10px;letter-spacing:.25em;font-weight:800;line-height:1.15;color:#174747;text-shadow:0 1px #fff8}.brand strong{font-family:'DM Serif Display',serif;font-size:23px;letter-spacing:.04em}.brand .leaf{position:absolute;margin-left:-19px;margin-top:7px;font-size:20px;color:#db7d5d}.quest{justify-self:center;min-width:315px;padding:10px 28px 12px;text-align:center;border:1px solid #fff8;border-radius:18px;background:#fffcebe8;box-shadow:0 9px 30px #1f555225,0 2px 0 #fff inset;backdrop-filter:blur(8px)}.quest>span{display:block;font-size:9px;font-weight:800;letter-spacing:.18em;color:#b45d49}.quest>strong{display:block;margin:3px;font-family:'DM Serif Display',serif;font-size:19px;font-weight:400;color:#214645}.progress{height:7px;display:flex;gap:5px;justify-content:center;margin-top:7px}.progress i{display:block;width:25px;height:5px;background:#d5ded0;border-radius:9px;box-shadow:0 1px 2px #526b6533 inset}.progress i.done{background:#e9965f}.satchel{justify-self:end;width:145px;padding:9px 12px 9px 48px;border:1px solid #fff8;border-radius:15px;background:#fffcebdc;box-shadow:0 8px 28px #1f55521c;position:relative;opacity:.65;transition:.3s}.satchel.active{opacity:1;transform:translateY(3px)}.satchel>span{position:absolute;left:11px;top:9px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;font-size:22px;background:#e8ad68;color:white}.satchel small,.satchel b{display:block}.satchel small{font-size:7px;letter-spacing:.13em;color:#a15f4f;text-transform:uppercase}.satchel b{font-family:'DM Serif Display';font-size:14px;font-weight:400}.sound{position:fixed;z-index:4;right:28px;bottom:27px;width:43px;height:43px;border:1px solid #fff9;border-radius:50%;background:#fffcebdc;color:#28534f;font-size:22px;box-shadow:0 7px 22px #17443a28;cursor:pointer}.card{position:fixed;z-index:8;left:50%;top:50%;width:min(480px,calc(100vw - 34px));padding:36px 52px 34px;transform:translate(-50%,-46%) scale(.96);text-align:center;border:1px solid #fff8;border-radius:4px 40px 4px 40px;background:#fffcedf2;box-shadow:0 35px 100px #173e3970,0 0 0 8px #fff4 inset;opacity:0;visibility:hidden;transition:.65s ease;backdrop-filter:blur(15px)}.card.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.card:before,.card:after{content:'✦';position:absolute;color:#d98966;font-size:12px}.card:before{left:18px;top:18px}.card:after{right:18px;bottom:18px}.card-art{display:flex;align-items:center;justify-content:center;gap:12px;color:#d67c5e;font-size:22px}.card-art i{width:54px;height:1px;background:#d9a489}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.23em;color:#b6614e;margin:15px 0 7px}h1{font-family:'DM Serif Display',serif;font-size:61px;line-height:.72;font-weight:400;margin:15px 0 25px;color:#1d4945}h1 em{font-size:48px;color:#d77758}.intro{font-family:'DM Serif Display',serif;font-size:17px;line-height:1.45;color:#53706a}.card button{border:0;border-radius:99px;padding:14px 22px 14px 26px;background:#1e5751;color:#fff8e9;font:800 10px 'DM Sans';letter-spacing:.13em;cursor:pointer;box-shadow:0 7px 17px #19453a3d;transition:.2s}.card button:hover{transform:translateY(-2px);background:#287066}.card button span{font-size:16px;margin-left:12px}.card>small{display:block;margin-top:13px;color:#71847d;font-size:9px}.story-card{position:fixed;z-index:7;left:50%;top:50%;width:min(450px,calc(100vw - 40px));padding:28px 38px;transform:translate(-50%,-40%);text-align:center;border-radius:3px 32px;background:#fffcedec;box-shadow:0 25px 100px #1a494477;opacity:0;visibility:hidden;transition:.6s}.story-card.show{opacity:1;visibility:visible;transform:translate(-50%,-50%)}.story-card p:first-child{font-size:9px;letter-spacing:.22em;font-weight:800;color:#c06950}.story-card h2{font:italic 35px 'DM Serif Display';color:#214b47;margin:8px}.story-card p:last-child{font:16px 'DM Serif Display';color:#617771}.finish{z-index:9}.finish h1{line-height:.8}.touch{display:none;position:fixed;z-index:5;left:18px;bottom:18px;gap:5px;align-items:center}.touch div{display:flex;flex-direction:column;gap:5px}.touch button{width:50px;height:50px;border:1px solid #fff9;border-radius:16px;background:#fffcebc9;color:#25534e;font-size:22px;box-shadow:0 7px 20px #244b4430;touch-action:none}.touch button:active{background:#fff}.touch button[data-key=ArrowDown]{height:39px}@media(pointer:coarse),(max-width:700px){.touch{display:flex}.sound{bottom:21px}.hud{inset:11px 12px auto;grid-template-columns:1fr 1fr}.brand{transform:scale(.84);transform-origin:left top}.quest{grid-row:2;grid-column:1/3;justify-self:center;min-width:270px;padding:7px 20px}.quest>strong{font-size:16px}.satchel{transform:scale(.83);transform-origin:right top}.satchel.active{transform:scale(.83) translateY(3px)}.card{padding:29px 30px}.card h1{font-size:48px}.card h1 em{font-size:40px}.card .intro{font-size:15px}}@media(max-height:610px){.card{padding:20px 35px}.card h1{font-size:43px;margin:8px 0 16px}.card h1 em{font-size:34px}.card .intro{font-size:14px;margin:8px}.card-art,.card>small{display:none}.hud{top:8px}.quest{padding:5px 18px}.progress{margin-top:3px}}