:root{--paper:#fbf4e2;--paper2:#f3e8cc;--ink:#1f1b16;--ink2:#4a4238;--pink:#ff7aa8;--yellow:#f7d046;--red:#e8563a;--blue:#2f5fb3;--line:#d9ccab}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.6 "Courier Prime",ui-monospace,monospace;
  background:#efe4c6;background-image:linear-gradient(#e2d5b3 1px,transparent 1px),linear-gradient(90deg,#e2d5b3 1px,transparent 1px);background-size:28px 28px}
a{color:var(--ink)}
.sheet{max-width:980px;margin:14px auto 40px;background:var(--paper);border:2.5px solid var(--ink);box-shadow:8px 8px 0 #cdbf9b;position:relative}
@media (max-width:640px){.sheet{margin:0;border-left:0;border-right:0;box-shadow:none}}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;border-bottom:2.5px solid var(--ink);
  background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(0,0,0,.035) 10px 20px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:22px "Permanent Marker",cursive}
.brand b{background:var(--ink);color:var(--yellow);font:700 12px "Courier Prime",monospace;padding:3px 6px;letter-spacing:1px}
.top nav{display:flex;gap:8px}
.btn-s{font:700 12px "Courier Prime",monospace;text-transform:uppercase;letter-spacing:1px;border:2px solid var(--ink);padding:5px 10px;text-decoration:none;background:#fff;box-shadow:3px 3px 0 var(--ink)}
main{padding:28px 24px 36px}
@media (max-width:640px){main{padding:22px 16px 30px}}
.kick{font:12px "Special Elite",monospace;letter-spacing:2px;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:10px}
.kick:before{content:"";width:26px;height:4px;background:var(--blue)}
h1{font:clamp(54px,13vw,120px)/.9 "Permanent Marker",cursive;margin:16px 0 4px;letter-spacing:-1px}
h1 .hl{background:var(--pink);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scrawl{font:clamp(18px,4vw,24px) "Permanent Marker",cursive;color:var(--red);transform:rotate(-2deg);display:inline-block;margin:4px 0 10px}
.lede{max-width:620px;font-size:17px}
hr.dash{border:0;border-top:2.5px dashed #a79a7c;margin:30px 0}
h2{font:26px/1.1 "Permanent Marker",cursive;margin:0 0 6px}
.step{display:flex;gap:10px;align-items:baseline;margin:26px 0 10px}
.step span{font:700 13px "Courier Prime",monospace;background:var(--ink);color:var(--paper);padding:2px 7px}
label.f{display:block;font:12px "Special Elite",monospace;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink2);margin:0 0 4px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
input.t{width:100%;font:18px "Courier Prime",monospace;padding:10px 12px;border:2px solid var(--ink);background:#fff;border-radius:0;color:var(--ink)}
input.t:focus,textarea:focus{outline:3px solid var(--yellow);outline-offset:0}
.paper{position:relative;background:#fffdf6;border:2px solid var(--ink);box-shadow:5px 5px 0 #d8caa6;transform:rotate(-.4deg)}
.paper:before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:24px;margin-left:-55px;background:rgba(247,208,70,.85);transform:rotate(-3deg)}
textarea{display:block;width:100%;min-height:260px;border:0;resize:vertical;background:transparent;padding:26px 18px 14px 44px;
  font:19px/32px "Special Elite","Courier Prime",monospace;color:var(--ink);
  background-image:linear-gradient(90deg,transparent 32px,#f2a3a3 32px,#f2a3a3 34px,transparent 34px),repeating-linear-gradient(transparent 0 31px,#cfdcef 31px 32px);background-position:0 26px;background-attachment:local}
.count{font-size:12px;color:var(--ink2);text-align:right;padding:0 12px 8px}
.pick{position:relative}
.sugg{position:absolute;z-index:5;left:0;right:0;top:100%;background:#fff;border:2px solid var(--ink);border-top:0;max-height:240px;overflow:auto;display:none}
.sugg button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;font:15px "Courier Prime",monospace;border-bottom:1px dashed var(--line);cursor:pointer;color:var(--ink)}
.sugg button:hover,.sugg button.on{background:var(--yellow)}
.sugg small{color:var(--ink2)}
.dist{font:15px "Special Elite",monospace;margin:10px 0 0;min-height:24px}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.stamp{position:relative;text-align:left;cursor:pointer;background:#fff;border:2px solid var(--ink);padding:14px 14px 12px;font:inherit;color:var(--ink);box-shadow:4px 4px 0 #d8caa6;transition:transform .12s}
.stamp:before{content:"";position:absolute;inset:5px;border:1.5px dashed #b3a37d;pointer-events:none}
.stamp:nth-child(odd){transform:rotate(-.6deg)}.stamp:nth-child(even){transform:rotate(.5deg)}
.stamp:hover{transform:rotate(0) translateY(-2px)}
.stamp .sn{font:19px/1.15 "Permanent Marker",cursive;display:block;margin:6px 4px 2px}
.stamp .se{font:11px "Special Elite",monospace;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);margin:0 4px}
.stamp .sl{font-size:13px;line-height:1.4;margin:6px 4px;color:var(--ink2)}
.stamp .eta{display:block;margin:8px 4px 4px;font:700 15px "Courier Prime",monospace}
.stamp .spd{position:absolute;right:14px;top:14px;font:11px "Courier Prime",monospace;color:var(--ink2)}
.stamp[aria-pressed=true]{background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}
.stamp[aria-pressed=true] .sn:after{content:" \2713"}
.go{margin-top:26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{font:700 15px "Courier Prime",monospace;text-transform:uppercase;letter-spacing:1px;border:2.5px solid var(--ink);padding:13px 20px;background:var(--yellow);box-shadow:5px 5px 0 var(--ink);cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.w{background:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.err{color:var(--red);font-weight:700}
.card{background:var(--ink);color:var(--paper);padding:22px;border:2.5px solid var(--ink);box-shadow:6px 6px 0 #cdbf9b}
.card h2{color:var(--yellow)}
.linkbox{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.linkbox input{flex:1 1 240px;font:14px "Courier Prime",monospace;padding:10px;border:2px solid var(--paper);background:#2b261f;color:var(--paper);min-width:0}
.card .btn{box-shadow:4px 4px 0 #000}
.warn{font-size:14px;color:#f3d9a0}
.mapwrap{position:relative;border:2.5px solid var(--ink);background:#f6edd5;overflow:hidden}
.mapwrap svg{display:block;width:100%;height:auto}
.maplabel{position:absolute;left:10px;top:8px;font:11px "Special Elite",monospace;letter-spacing:1.5px;text-transform:uppercase;background:var(--paper);border:1.5px solid var(--ink);padding:2px 6px}
.cap{font-size:14px;color:var(--ink2);margin:8px 0 0}
footer{border-top:2.5px solid var(--ink);padding:14px 20px;font-size:13px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.muted{color:var(--ink2)}
.env{background:#fffdf6;border:2px solid var(--ink);padding:18px 20px;box-shadow:5px 5px 0 #d8caa6;transform:rotate(.5deg);position:relative;max-width:560px}
.env .to{font:clamp(26px,6vw,36px)/1.1 "Permanent Marker",cursive}
.env .pm{position:absolute;right:14px;top:10px;width:78px;height:78px;border:2.5px double var(--red);border-radius:50%;color:var(--red);font:10px/1.2 "Special Elite",monospace;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-14deg);opacity:.85;padding:6px}
.big{font:clamp(30px,8vw,52px)/1 "Permanent Marker",cursive;margin:8px 0}
.trail{height:16px;border:2px solid var(--ink);background:#fff;position:relative;margin:12px 0 4px}
.trail i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 13px)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.facts div{border:2px solid var(--ink);background:#fff;padding:8px 10px}
.facts b{display:block;font:11px "Special Elite",monospace;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);font-weight:400}
.seal{width:120px;height:120px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#e86a5a,#a3261a 70%);color:#ffe1d6;font:20px "Permanent Marker",cursive;box-shadow:0 6px 0 #6d160d,inset 0 0 0 8px rgba(0,0,0,.12)}
.letter{background:#fffdf6;border:2px solid var(--ink);box-shadow:6px 6px 0 #d8caa6;padding:28px 24px;font:19px/1.7 "Special Elite","Courier Prime",monospace;white-space:pre-wrap;word-wrap:break-word;max-width:640px}
.letter .sig{font:26px "Permanent Marker",cursive;margin-top:18px;white-space:normal}
.src li{margin:0 0 12px}
table.sp{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
table.sp td,table.sp th{border:2px solid var(--ink);padding:8px 10px;text-align:left;vertical-align:top}
table.sp th{font:12px "Special Elite",monospace;text-transform:uppercase;letter-spacing:1px;background:var(--paper2)}
.hide{display:none!important}
.env{padding-right:104px}
@media (max-width:560px){.env{padding-right:18px;padding-top:70px}.env .pm{width:66px;height:66px;font-size:9px}}
.maplabel{top:auto;bottom:8px}
.stamp .se{display:block;margin-right:74px}
.scene{position:relative;overflow:hidden;border:2.5px solid var(--ink);background:#efe4c6;margin:0 0 14px;box-shadow:5px 5px 0 #d8caa6;aspect-ratio:16/9}
.scene .bg{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;animation:drift 70s ease-in-out infinite alternate}
.scene.west .bg{animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(-100% + var(--sw,100cqw)))}}
.scene{container-type:inline-size}
.scene .msg{position:absolute;left:50%;transform:translateX(-50%);width:auto;filter:drop-shadow(0 3px 0 rgba(31,27,22,.12))}
.scene.west .msg{transform:translateX(-50%) scaleX(-1)}
.scene.ink .bg{filter:sepia(.08) contrast(1.02)}
.scene.px .bg,.scene.px .msg{image-rendering:pixelated}
.msg[data-bob=gallop]{animation:bob .45s ease-in-out infinite alternate}
.msg[data-bob=run]{animation:bob .35s ease-in-out infinite alternate}
.msg[data-bob=walk]{animation:bob .9s ease-in-out infinite alternate}
.msg[data-bob=fly]{animation:fly 2.2s ease-in-out infinite alternate}
.msg[data-bob=sail]{animation:sail 3s ease-in-out infinite alternate}
@keyframes bob{to{margin-bottom:1.2%}}
@keyframes fly{to{margin-bottom:4%}}
@keyframes sail{from{rotate:-2deg}to{rotate:2deg;margin-bottom:1%}}
@media (prefers-reduced-motion:reduce){.scene .bg,.scene .msg{animation:none!important}}
.sceneTag{position:absolute;left:8px;bottom:8px;font:12px "Special Elite",monospace;background:var(--paper);border:1.5px solid var(--ink);padding:2px 7px;z-index:2}