:root{
 --cobalt:#2D4FB7;--ink:#253044;--ivory:#FFF9E8;--paper:#FFFEF8;--lime:#BFD94A;
 --coral:#F47F6B;--lilac:#B99AE8;--forest:#4F7E65;--choc:#7D563A;--sky:#D8E8FF;
 --muted:#6F7684;--line:#253044;--focus:#2D4FB7;--shadow:7px 8px 0 #253044
}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:linear-gradient(150deg,#FFF9E8,#EAF1FF);color:var(--ink);font-family:"Trebuchet MS","Segoe UI",sans-serif}
button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.top{position:sticky;top:0;z-index:50;background:#FFFEF8f1;border-bottom:4px solid var(--ink)}
.nav{width:min(1180px,calc(100% - 24px));margin:auto;min-height:68px;display:flex;align-items:center;gap:10px}
.logo{font-weight:1000;letter-spacing:.13em}.logo b{color:var(--coral)}.spacer{flex:1}
.nav a{padding:10px 12px;border-radius:14px;font-weight:1000;font-size:.77rem}.nav .play{background:var(--cobalt);color:white}
.shell{width:min(1180px,calc(100% - 24px));margin:auto;padding:34px 0 70px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:28px 0}
.badge{display:inline-block;background:var(--lime);border:4px solid var(--ink);border-radius:999px;padding:7px 11px;font-size:.68rem;font-weight:1000;letter-spacing:.08em;box-shadow:4px 5px 0 var(--ink)}
h1{font-size:clamp(3.2rem,7.3vw,6.8rem);line-height:.86;letter-spacing:-.06em;margin:14px 0}
h2{font-size:clamp(2rem,3.8vw,3.1rem);letter-spacing:-.04em;margin:0 0 10px}
p{line-height:1.58;color:var(--muted)}
.note{background:var(--paper);border:4px solid var(--ink);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:4px solid var(--ink);border-radius:16px;background:white;padding:12px 15px;font-weight:1000;box-shadow:4px 5px 0 var(--ink)}
.btn.coral{background:var(--coral)}.btn.lime{background:var(--lime)}.btn.lilac{background:var(--lilac)}.btn.dark{background:var(--ink);color:white}.btn.cobalt{background:var(--cobalt);color:white}
.courier-stage{min-height:500px;background:#D8E8FF;border:5px solid var(--ink);border-radius:42px;box-shadow:var(--shadow);position:relative;overflow:hidden;padding:24px}
.courier-stage:before{content:"";position:absolute;left:-8%;right:-8%;bottom:-96px;height:220px;background:#B6D98A;border:5px solid var(--ink);border-radius:50%}
.path{position:absolute;left:7%;right:7%;top:62%;border-top:8px dashed var(--choc);transform:rotate(-4deg)}
.couriers{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:28px}
.courier{border:4px solid var(--ink);border-radius:30px;background:var(--paper);padding:16px;text-align:center;box-shadow:5px 6px 0 var(--ink);font-weight:1000;min-height:320px;position:relative;overflow:hidden}
.courier:nth-child(1){background:#FFF0D7}.courier:nth-child(2){background:#EAF7FF}.courier:nth-child(3){background:#F1E9FF}
.courier.active{transform:translateY(-8px);box-shadow:8px 10px 0 var(--ink)}
.courier.travel{animation:travel .7s cubic-bezier(.2,.8,.2,1)}@keyframes travel{50%{transform:translateX(18px) translateY(-10px) rotate(2deg)}}
.pack{display:inline-block;margin-top:8px;border:3px solid var(--ink);border-radius:10px;padding:5px 8px;font-size:.64rem;background:var(--lime)}
/* DOG: long muzzle, floppy ears, upright body, wagging tail */
.animal{width:150px;height:200px;margin:0 auto 8px;position:relative}
.dog .head{position:absolute;left:35px;top:8px;width:84px;height:80px;border:5px solid var(--ink);border-radius:44% 44% 48% 48%;background:#DCA26D;z-index:3}
.dog .ear{position:absolute;top:16px;width:34px;height:72px;background:#8B5B3E;border:5px solid var(--ink);border-radius:60% 40% 60% 40%;z-index:2}
.dog .ear.l{left:14px;transform:rotate(18deg)}.dog .ear.r{right:4px;transform:rotate(-18deg)}
.dog .snout{position:absolute;left:50px;top:58px;width:56px;height:42px;background:#F0C99D;border:5px solid var(--ink);border-radius:45%;z-index:4}
.dog .nose{position:absolute;left:70px;top:64px;width:18px;height:14px;background:var(--ink);border-radius:50%;z-index:5}
.dog .body{position:absolute;left:48px;top:92px;width:68px;height:82px;background:#DCA26D;border:5px solid var(--ink);border-radius:34% 34% 26% 26%}
.dog .leg{position:absolute;top:158px;width:18px;height:38px;background:#DCA26D;border:5px solid var(--ink);border-radius:12px}.dog .leg.l{left:52px}.dog .leg.r{left:92px}
.dog .tail{position:absolute;right:5px;top:112px;width:58px;height:22px;border:8px solid #8B5B3E;border-left:0;border-bottom-color:transparent;border-radius:0 70% 0 0;transform:rotate(-18deg)}
/* CAT: triangle ears, narrow face, whiskers, curled tail */
.cat .head{position:absolute;left:38px;top:22px;width:78px;height:72px;border:5px solid var(--ink);border-radius:44% 44% 50% 50%;background:#77BED9;z-index:3}
.cat .ear{position:absolute;top:0;width:38px;height:42px;background:#77BED9;border:5px solid var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%);z-index:2}
.cat .ear.l{left:34px}.cat .ear.r{right:30px}
.cat .body{position:absolute;left:52px;top:92px;width:55px;height:86px;background:#77BED9;border:5px solid var(--ink);border-radius:48% 48% 28% 28%}
.cat .paw{position:absolute;top:159px;width:16px;height:34px;background:#77BED9;border:5px solid var(--ink);border-radius:12px}.cat .paw.l{left:56px}.cat .paw.r{left:88px}
.cat .whiskers{position:absolute;left:18px;top:58px;width:118px;height:44px;z-index:5}
.cat .whiskers:before,.cat .whiskers:after{content:"";position:absolute;top:12px;width:44px;border-top:3px solid var(--ink);box-shadow:0 10px 0 var(--ink)}
.cat .whiskers:before{left:0;transform:rotate(6deg)}.cat .whiskers:after{right:0;transform:rotate(-6deg)}
.cat .tail{position:absolute;right:0;top:104px;width:72px;height:82px;border:9px solid #4E91AA;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(28deg)}
/* MONKEY: large round ears, face patch, long arms, curled tail */
.monkey .ear{position:absolute;top:24px;width:48px;height:48px;background:#B77B4D;border:5px solid var(--ink);border-radius:50%;z-index:1}.monkey .ear.l{left:12px}.monkey .ear.r{right:8px}
.monkey .head{position:absolute;left:37px;top:16px;width:84px;height:86px;border:5px solid var(--ink);border-radius:50%;background:#9B6846;z-index:3}
.monkey .facepatch{position:absolute;left:49px;top:38px;width:62px;height:54px;background:#E3B27D;border:4px solid var(--ink);border-radius:50%;z-index:4}
.monkey .body{position:absolute;left:49px;top:101px;width:64px;height:78px;background:#9B6846;border:5px solid var(--ink);border-radius:45% 45% 30% 30%}
.monkey .arm{position:absolute;top:104px;width:18px;height:72px;background:#9B6846;border:5px solid var(--ink);border-radius:14px}.monkey .arm.l{left:31px;transform:rotate(14deg)}.monkey .arm.r{right:20px;transform:rotate(-14deg)}
.monkey .tail{position:absolute;right:-6px;top:107px;width:84px;height:84px;border:9px solid #9B6846;border-left-color:transparent;border-radius:50%;transform:rotate(14deg)}
.eye{position:absolute;top:34px;width:9px;height:9px;background:var(--ink);border-radius:50%;z-index:7}.dog .eye.l{left:51px}.dog .eye.r{right:42px}.cat .eye.l{left:51px}.cat .eye.r{right:43px}.monkey .eye.l{left:62px;top:54px}.monkey .eye.r{right:51px;top:54px}
.section{margin-top:42px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:17px;min-height:150px;box-shadow:4px 5px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.card:nth-child(5n+1){background:#EEF2FF}.card:nth-child(5n+2){background:#EFF8DF}.card:nth-child(5n+3){background:#FFF0EA}.card:nth-child(5n+4){background:#F4EDFF}.card:nth-child(5n){background:#EDF6F0}
.card:hover{transform:translateY(-3px)}.tag{display:inline-block;width:max-content;background:var(--lime);border:3px solid var(--ink);border-radius:999px;padding:5px 8px;font-size:.62rem;font-weight:1000}
.card strong{font-size:1.08rem}.card em{font-style:normal;color:var(--muted);font-size:.78rem}
.search{width:100%;border:4px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px 16px;box-shadow:4px 5px 0 var(--ink)}
.safe{background:#EDF6F0;border:4px solid var(--ink);border-radius:20px;padding:15px;box-shadow:4px 5px 0 var(--ink)}
.safe strong{display:block}.safe p{margin:4px 0 0;font-size:.86rem}
.location-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}.location-head h1{font-size:clamp(3rem,6vw,5.7rem)}
.destination{background:var(--lilac);border:4px solid var(--ink);border-radius:24px;padding:14px 16px;font-weight:1000;box-shadow:4px 5px 0 var(--ink);transform:rotate(2deg)}
.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.spot{border:4px solid var(--ink);border-radius:18px;background:#FFFEF8;min-height:96px;padding:15px;text-align:left;font-weight:1000;box-shadow:4px 5px 0 var(--ink)}
.spot:nth-child(4n+1){background:#EEF2FF}.spot:nth-child(4n+2){background:#EFF8DF}.spot:nth-child(4n+3){background:#FFF0EA}.spot:nth-child(4n){background:#F4EDFF}.spot.active{background:var(--coral);color:#1e2b3d;transform:translateY(-4px)}
.composer{margin-top:28px;background:#EEF2FF;border:5px solid var(--ink);border-radius:30px;padding:22px;box-shadow:var(--shadow)}
.selected{background:var(--lime);border:4px solid var(--ink);border-radius:14px;padding:12px;font-weight:1000}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.full{grid-column:1/-1}
label{display:block;font-size:.68rem;font-weight:1000;letter-spacing:.07em;margin-bottom:6px}
input,textarea,select{width:100%;border:4px solid var(--ink);border-radius:13px;background:var(--paper);padding:12px}textarea{min-height:96px;resize:vertical}
.trail{display:grid;gap:14px}.trail-item{background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:15px;box-shadow:4px 5px 0 var(--ink);display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center}
.trail-item:nth-child(odd){background:#EEF2FF}.trail-item:nth-child(even){background:#EFF8DF}.trail-num{width:50px;height:50px;border:4px solid var(--ink);border-radius:50%;background:var(--coral);display:grid;place-items:center;font-weight:1000}
.trail-item strong{display:block}.trail-item small{color:var(--muted)}
.empty{border:5px dashed var(--ink);border-radius:25px;padding:42px;text-align:center;background:#FFFEF8}
.runner{max-width:800px;margin:30px auto;background:var(--paper);border:5px solid var(--ink);border-radius:34px;padding:26px;box-shadow:var(--shadow);text-align:center}
.progress{display:inline-block;background:var(--cobalt);color:white;border:4px solid var(--ink);border-radius:999px;padding:8px 12px;font-weight:1000}
.clue{margin-top:20px;background:#FFF0EA;border:5px solid var(--ink);border-radius:24px;padding:32px;font-size:clamp(1.45rem,3vw,2.2rem);font-weight:1000;line-height:1.22}.hint{margin-top:14px;background:#EFF8DF;border:4px solid var(--ink);border-radius:18px;padding:14px}
.footer{margin-top:45px;padding-bottom:40px;color:var(--muted);font-size:.8rem}
@media(max-width:900px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.spot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.couriers{grid-template-columns:1fr}.nav a:not(.play){display:none}.grid,.spot-grid,.form-grid{grid-template-columns:1fr}.location-head{grid-template-columns:1fr}.trail-item{grid-template-columns:50px 1fr}.trail-item .actions{grid-column:2}}
@media(pointer:coarse){button,a,input,select{min-height:48px;min-width:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.actions,.footer,.safe{display:none!important}.shell{width:100%;padding:0}.trail-item{break-inside:avoid;box-shadow:none}}