:root{--bg:#faf7ee;--card:#fffef9;--ink:#3e4d3b;--sub:#697362;--green:#63865b;--green2:#edf2df;--blue:#628d99;--gold:#bd8a29;--line:#dedfc9;--pink:#f6e4df}
body{background-color:var(--bg);background-image:radial-gradient(#c8cdb54d .8px,transparent .8px);background-size:16px 16px}
#app{max-width:600px;padding:20px 20px 44px}
button{transition:transform .15s,box-shadow .15s,background-color .15s}button:focus-visible{outline:3px solid #9a622c;outline-offset:4px}button:active:not(:disabled){transform:translateY(2px)}
.card{border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 5px 18px #5a673a08;margin:14px 0}
.top{margin:0 0 16px;gap:12px}.top .tt{font-size:17px;line-height:1.5}.ib{min-width:48px;min-height:48px;border-width:1px;border-radius:18px;font-size:21px}
.forest-hero{position:relative;overflow:hidden;border:1px solid #e2decb;border-radius:30px;background:#f4efda;margin:4px 0 20px;box-shadow:0 8px 24px #5c61380c}
.forest-hero img{display:block;width:100%;aspect-ratio:2.6;object-fit:cover;object-position:center bottom}
.forest-hero .hero-copy{padding:22px 24px 8px;background:#fffdf4;text-align:center}
.eyebrow{font-size:12px;letter-spacing:.16em;color:#6b8056;margin:0 0 8px;font-weight:bold}
.hero-copy h1{font-size:29px;line-height:1.45;letter-spacing:.06em;margin:0;color:#4f6b44}.hero-copy h1 span{font-size:20px;letter-spacing:.16em}.hero-copy p{font-size:14px;line-height:1.7;color:var(--sub);margin:10px 0 0}
.hero-mini .hero-copy{padding:16px 20px 6px}.hero-mini .hero-copy h1{font-size:25px}.hero-mini img{aspect-ratio:3.4}
.postmark{display:inline-block;border:1px solid #aa9675;border-radius:999px;padding:4px 12px;font-size:11px;color:#837457;transform:rotate(-5deg);margin:6px 0 8px;letter-spacing:.15em}
.snail{background:#f0f3e5;gap:16px}.snail .face{flex:0 0 88px;width:88px}.mascot{width:100%;height:86px;object-fit:contain}.snail .face .acc{right:0;top:0}
.bar{height:10px;background:#dce4cc}.bar i{background:linear-gradient(90deg,#9db881,#63865b)}
.small{color:var(--sub);line-height:1.6}.home-paths{display:grid;gap:12px;margin:18px 0}.path-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:1px solid #cfdcc1;border-radius:24px;padding:20px;background:#edf3e4;min-height:108px;box-shadow:0 4px 0 #d9e4ce}.path-card.blue{background:#edf3f3;border-color:#cddfdf;box-shadow:0 4px 0 #dbe6e5}.path-icon{flex:0 0 58px;height:58px;display:grid;place-items:center;background:#fffaf0;border-radius:20px;font-size:31px}.path-copy{flex:1}.path-copy b{font-size:22px;display:block;margin-bottom:6px}.path-copy small{display:block;color:#5f7355;font-size:13px;line-height:1.5}.path-copy .path-stars{font-size:13px;color:#7d744c;margin-top:5px}.path-arrow{font-size:24px;color:#8c9e79}.blue .path-copy small{color:#577980}
.big{font-size:19px;min-height:60px;border-radius:19px;box-shadow:0 3px 0 #344a3024}.b-w{background:#fffef9;border:1px solid var(--line);box-shadow:0 3px 0 #dfe2d0}.b-o{background:#bc834d}.b-p{background:#a87d95}.big:disabled{opacity:1;background:#efeee6;color:#75796c;box-shadow:none;border:1px dashed #d4d6c5;font-size:15px}
.home-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.home-tools .big{margin:0;font-size:16px;min-height:76px;line-height:1.6}.reading-note{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px dashed #cfceb7;border-radius:18px;color:#6b735d;font-size:14px;line-height:1.8;background:#fffdf5}.reading-note .note-icon{font-size:25px}.section-label{font-size:15px;color:#6d795e;margin:22px 4px 10px;letter-spacing:.05em}
.banbtn{border-width:1px;border-radius:18px;background:#fffef8}.banbtn:hover{background:#eef3e3;border-color:#91a879}.kumibtn{gap:12px}
.grid{gap:14px}.st{min-height:146px;border-width:1px;border-radius:22px;padding:18px;box-shadow:0 4px 0 #e2e5d6}.st .e{width:46px;height:46px;background:#f2f4e8;border-radius:16px;display:grid;place-items:center;font-size:27px}.st .n{margin:12px 0 6px;font-size:17px}.st.boss{background:#fff7df;border-color:#e5d49d}.st .cnt{font-size:11px}.st .s{font-size:17px}
.intro-art{display:flex;justify-content:center;margin:16px 0}.intro-art img{width:120px;height:120px;object-fit:contain}.intro-art .postmark{align-self:center}
.road{background:#eef2e2;border:1px solid #dce4ce;border-radius:22px;padding:12px 8px;margin:12px 0 18px}.road .sn img{width:43px;height:40px;object-fit:contain;vertical-align:middle}.hearts{margin-bottom:14px;font-size:21px}
.bt{background:#fffefb;border:1px solid #e0e2cf;border-radius:26px;padding:24px;margin:12px 0}.q{font-size:23px;line-height:1.9;margin-bottom:20px}.q.quote{background:#faf7eb}.opt{border-width:2px;border-radius:19px;box-shadow:0 3px 0 #e3e6d8;padding:15px 18px;font-size:20px}.opt:not(:disabled):hover{border-color:#9ab282;background:#f6f9ef}.opt.right{background:#e7f1dd}.opt.ng{background:#fae9e2}.opt.cut{opacity:.4}.opt.kj{padding:10px 4px}.opts{gap:13px}.hintbox{background:#fff8df;border:1px solid #e4d49c;border-radius:18px}.evbox{background:#edf4f2;border:1px solid #cadfd8;border-radius:18px}.after{background:#fbefea;border:1px solid #e7d0c5;border-radius:18px}
.fb{border:1px solid #dce4ce;box-shadow:0 -8px 30px #40573318;max-height:65vh;overflow:auto}.fb.okc{background:#f0f6e7}.fb.ngc{background:#fff3eb}.stamp{border-radius:4px;border-width:3px;background:#fffef7;box-shadow:0 3px 8px #58633d0b}.stamp.none{filter:grayscale(1);background:#f2f1e9;opacity:.6}.stamp .nm{font-size:11px;line-height:1.5}.stamp.r3{background:linear-gradient(135deg,#f7e9ef,#e9f4f1,#fff3d7)}.stamps{gap:12px}.tag{padding:6px 12px;background:#edf2e2}
.clear-art{width:180px;height:145px;object-fit:contain}.result-label{font-size:13px;letter-spacing:.2em;color:#75865c;margin-top:12px}
@media(min-width:900px){#app{max-width:1040px;padding:28px 32px 60px}.forest-hero:not(.hero-mini){display:grid;grid-template-columns:.9fr 1.4fr;align-items:stretch}.forest-hero:not(.hero-mini) img{height:100%;min-height:250px;aspect-ratio:auto;object-fit:cover}.forest-hero:not(.hero-mini) .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:32px 20px}.hero-mini{display:grid;grid-template-columns:.8fr 1.4fr;align-items:stretch}.hero-mini .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:24px}.hero-mini img{height:100%;min-height:200px;aspect-ratio:auto}.home-paths{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(3,1fr)}.home-tools{grid-template-columns:1fr 1fr}.bt{gap:30px;grid-template-columns:1fr 1fr;padding:30px}.fb{max-width:1000px}.stamps{grid-template-columns:repeat(8,1fr)}}
@media(max-width:380px){#app{padding:12px}.hero-copy h1{font-size:25px}.path-card{padding:16px;gap:12px}.path-copy b{font-size:19px}.bt{padding:18px}.q{font-size:21px}.opts.two{grid-template-columns:1fr}.opts.kjg{gap:6px}.opt.kj{font-size:36px}.home-tools{grid-template-columns:1fr}.stamps{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.walk,.pop{animation:none}button{transition:none}}