data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHZSURBVHic7dq7alRRFMbxn2LlpbDyWtjkCcRCmconUARNYZqMj6CQx/A9AqKYJljYiK02irETQQUbu3hNLMKAaJy9I/sSz1l/WNWBs77vW/vsmX1m+D+Y4DE+4R3u4nhXRQ1Zwjds/1bPcLSjriYs4bs/zc/qdj9p9Vm0++R/rbVu6iqTmvysHvUSWJNc89tY6aSxGnsx/8LANsEb0s/8rF7jTB+ZdQjzwnyYD/N/qTDfR2YdwrwwH+ZHZf66MB/mR2d+Uf6RdgOn+8isw0V8NtLJn7XzynqUk4dVI508nMeWkZqH+0a67OEINs03/9ZAJw9XpKc/6aYuwcEC90iZW8eTAn2qUCKAU4nr9wr0qEaLADYK9KhGiQBSHGjQ458pEcCHxPWFAj2qUSKA94nrVwv02NdcM/8jcAuXuqlrwDF8MT+ENzjZS2AL1qS/DL3EiV4Ca3NB3mHolYGeB+CBvOPwYEM4h4/yQhjs4zCR3hAHvxKm8vaDQa+EKX6IlRAhRAgiBEQIiBAQISBCAMsihAiBCAERAiIERAjglvwQnuNwH5l12UsIdzpprE5uCOu9BLYgJ4TVbuoakQrhZj9p7Zja/Y+XD+3zX55LchlP8dXOi9QVHCpx45+ruFgL0iAiBAAAAABJRU5ErkJggg==

<div id="top">\n<<set $complete to $circle + $seat + $loop>>\n<<if $complete is 3>>\n\n<<done>>\n<<addclass ".macro-button" "pulse">>\n<</done>>\n\n<span class="pulse" id="final"><<button "FINAL WORDS">><<addclass ".circle" "hide">>\n<<addclass ".seat" "hide">><<addclass ".loop" "hide">>\n<<timed 3s>><<goto "End">><</timed>>\n<</button>>\n</span>\n<<else>>\n\n<span class="circle">\n<<if $circle is 1>><<done>><<addclass ".circle" "visited">><</done>><<else>><</if>><br>\n<<button "CENTRE CIRCLE">>\n<<addclass ".seat" "right">><<addclass ".loop" "right">><<addclass ".circlea" "topright">>\n<<timed 3s>><<goto "circle">><</timed>>\n<</button>></span>\n\n<span class="seat">\n<<if $seat is 1>><<done>><<addclass ".seat" "visited">><</done>><<else>><</if>><br>\n<<button "FIRST SEAT">>\n<<addclass ".circle" "left">><<addclass ".loop" "left">><<addclass ".seata" "topleft">>\n<<timed 3s>><<goto "seat">><</timed>><</button>></span>\n\n<span class="loop">\n<<if $loop is 1>><<done>><<addclass ".loop" "visited">><</done>><<else>><</if>><br>\n<<button "WIDE LOOP">>\n<<addclass ".seat" "hide">><<addclass ".circle" "hide">><<addclass ".loopa" "top">>\n<<timed 3s>><<goto "loop">><</timed>>\n<</button>></span>\n\n<</if>>\n\n</div>\n<div id="img">\n<img class="circle circlea" src="images/centre_circle_map.gif">\n<img class="loop loopa" src="images/WIDE LOOP_map.gif">\n<img class="seat seata" src="images/FIRST SEAT_map.gif">\n<img class="circle loop seat" src="images/BLACK AND WHITE FULL MAP.gif">\n</div>\n<div id="bottom"></div>

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAHYAAAB2AH6XKZyAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA/tJREFUeJzl21usHVMYB/Bfe5xWaB9Q19QD0h5vLpXoUTShbkHqgURIpCURQnLEo5A08SYhLk8ePLiF8OLStyIhJwhVQoJDECXSpASlSk7b42GZZnfss9fM7LVnz57zT76HPXvmu/xnrTXfWt9ai/SPxdiAy3A+Tscx+Ad78BXew1Z8mMBeYzCOKXyLuYKyAzdi0RD8TYpJfK544Hl5E2fU7nUi3CY076rBZ7IHN9fse9/YjIP6D75TnsGyOoOoiitwQNrgM/kSZ9cXSnkch58MJvhM9uFuDR0gHzHY4DvlVYHwxuBE4e3EHN+Lh7BG6NNHYx2exGyB5ztlJy6sI7gimBJ3+GOs6qHjPCEhKkPCLB7AWOqAyuIdvR39EacU0LMcz0Z0dZO3CuofCMaFpt3Lwc0ldd6CPyI687Ib1/QXSjWsijj2J46soHdC6DZlSDiIh7GkcjQVMBlx6tM+dC/FY8onVtv1Hm+S4tKIM28ksLERv0Ts5OV33JTAdhQbIo5sS2RnJd6O2OomA0+j6yKA8Lnbgv0Rm3kZaBpdJwEZ1guf1jIk/C3kK8nT6GEQACvwesR2N3kFx6Z0ZFgEEN7mlPB2y5CwExelcmKYBGRYg68jfuRlFvdJ0CWaQAAhjX4u4ks3eVGfiVNTCMiwScg+y5Dwsj4mVE0jgGpp9JaqxppIAGH+8YTiafQBYUpeGk0lIMN1iqfR01UMNJ0AOFV8zSKTC/IPL67NzcHhB1wifCViuDV/oQ0EEOYPm4QaZC9cnb/QFgIIA909kXtOErrMIbSJAPgA30Tumej80TYCYCby/2GTpTYSEMNc5482EnBm5P9fO3+0jYBsh0ovHNZF2kTAGB6N3LNLyBsOoS0EHIGnsTZy39ZuD446VuJ5XFzg3qfyF0a9BWzEJ4oFP433yxpo6mRoKR5XfDq8X1ha+x9GsQusFpa6zinxzIP4qIqxprWAKpXll7RgSWy5UAYrE/gcXhBK/JXRBALOVW13ycgviy/owsgKvBax3U1aURpbb4EWRxd0ebyxGyTq2CJzLX6O2MlLbVtk1kYc+awP3SOxSWoi4sxfOKqC3tVCalom8KFskxsXguzl2B0ldd6A3yI687JblzX9ujAdcW6X3Fr7PFgmLFqUHeiGulUW7u3iVLexYGI+BUJldqaAnk6Zxf0asGZxsmLp6F6hj07ihP/kSqFmV/akyfcatF2eMFqXbbpVJXk6mwLHC319kIHvw111BVQFVxncoakvcFZ9oVTHndIHPzLH5jLcLs3BydrS2UFgnTALqxr8NiN8dDbDEiFH+E7xwLfj+mE4Ox9SLCCMCXt0LheKk6cJR+YIzXwG7wplqR0J7CXFv4fMMLol7Sg5AAAAAElFTkSuQmCC

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAHYAAAB2AH6XKZyAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABNJJREFUeJzt212IVVUUB/DfHUsdp0ZJK0GjzwepyMCZJhuhHuopsnoKijLyoaIiCaKMvil0oiBfoqcegghT6DF6UKRvzEyHLIsizZxy+nDSPtTS6WHPRbvde84+59x7zzj1h/Vyz97rrv86+2PttdepaD3moGdMzsdsnIGTMBld+B3D+B67MYit+BBDbbCxqaigHwP4DKMFZQtWoK+dJPJgBpbhc8VJN5JB3IPpbeIUhW48if1aR7xWfsZyYRrF4lRhdDYNHbgbP6QY20rZg1tT7FyA7WPth3BVMdoB5+KtNpGMkTdxVh07+zBS0/YndBYhfzN+HQeka+UXLE4hX5UFeYhX8Pg4IJokR7ASvcI60ahd/7GkYjAZq3FdZPtafI0N2Cis5LuEPf/PseedjsYHPbgUCzE35/8dxqSE54vwbqyyE/G67G9jD57G/MzmH0UfXpD8NvNIv0hMwpqMyr/BUkzJSboepgj7/3BGWwo74LkMSg/gIUwtQDQN3XgKBzPYldsBSzIo/BgXFucXjR58mcG+zA44T3xk9yqmNYtZBnRjXaSNmRzQgfcjFQ1ocniZAUn7fCEH3B6pZKDJhLKgCPlEB8wQQsU0Ba8o781fohj5RAc8EdF5k9au9EnoxM4IG3M5YLp0z/4hZHXKQl8Du7LKwnrK743ouLwltOIxVwhzi5A/hFPqKU/L5OxU3tA/Fg8Lh5485A/jvmOVVReyHiEBmYSleKkZDJqACwSbs4TbB/ABvqj3cECy54Yz/tlxh0HJDlhRnmmtx2nS51SRI+24x7WSye9QXtDTcnTgopQ26wVHTEh0YF5Km83tMKQsdEh/uxvbYUiZuF7j+b9LcNKERoeQsa0XNV1dnlntRaew1+/EPiHTsqhUi/5HU3G5MMr3C9N6pYLXY8cTFqsf6G3wH1nfhjRe5PPedB03SEugvDzRh0BaWU3HRHdA2jX49rZYURIqwoqfNAUmdJzTI5n8EcyayFPghpTnW/FjOwwpA50CudQs1wl1Os8Tbl+yZIAPChcm23Kb3FzcgpkpbVbX+/F++fPuR/BIcdsLYxq+lWzrJ/U6zhRqdvKQr8pfQm1wmXhUup131eu4MKJjjPS2hFYc5kuvHtmLk+t17k/pGCM7lHd71CU9vT8qYZoWdcCIsHiWgQrWRtg4LFSW1EURB4wor5y9gucjbBzFbUmK8jqg7De/KsLGUbwt5X4jrwPWKad+v0vcsB8V6ojPSVNYZAp8pb2r/3whlI2178YYpUUXwYNCaWwrR0OXUMZzKINdz8Qqb8Y2OCp8QLFMc7fDTtwpOb1VT16TXDT9DzTLAVXZixdxWU7SFeFI+6y4yrVaWSsUeqf+SRX9eCehbVoJehKGhOqM94RD0258h9/Gnk8VQui5wmVtL64QyufzYA1ucrQcPwpJI2BEqOF/QPEipVbLKjnT3Y0yKLVBzjXCtlI20VrZL3K1b4Rp/j3XGkV4Z+KNcUC6KutxdhHyVVwpzM9R4avPtKzqEuHTl7KI78EdmlzBUsGsDO278KB8K3Ve2YfHZPtwsuXoFhINW7SO+DbhY82GJ7rxgl4hKvxI/qrOqgyO6WrJgasd1V+nCzvMxUIMP0cozZstxBUHxtrtE3J5u/GpEC9sEuZ5y/A3X/YJIXbrnLcAAAAASUVORK5CYII=

<div id="top"><span class="title">GOODBYE</span></div>\n<div id="img"><img src="images/LAST PAGE.gif"></div>\n<div id="bottom">\n<span class="play"><<link [img[play]]>>\n<<audio ":playing" stop>><<audio "goodbye" play>>\n<<done>><<addclass "span.play" "used">><</done>>\n<<removeclass ".repeat" "gone">>\n<</link>></span>\n<span class="repeat gone"><<link [img[repeat]]>><<audio ":playing" stop>><<audio "goodbye" play>><</link>></span>\n</div>

\n.left {animation-name:GoLeft;\nanimation-duration: 4s;\n animation-duration: 4s;\n transition-timing-function: ease-out;\nopacity: 0; }\n\n.topleft {position: absolute; \nz-index: 20; \n animation-name: GoOutLeft;\n animation-duration: 4s;\n transition-timing-function: ease-out;}\n\n.right {animation-name:GoRight;\nanimation-duration:4s;\n animation-duration: 4s;\n transition-timing-function: ease-out;\nopacity: 0; }\n\n.topright {position: absolute; \nz-index: 20; \n animation-name: GoOutRight;\n animation-duration: 4s;\n transition-timing-function: ease-out;}\n\n@keyframes GoOutLeft {\n 0% {\n scale: 1; \n }\n 100% {\n scale: 1.5;\n transform: translate(20%, 20%);\n }\n}\n\n\n\n@-webkit-keyframes GoOutLeft {\n 0% {\n scale: 1; \n }\n 100% {\n scale: 1.5;\n transform: translate(20%, 20%);\n }\n}\n\n\n\n@keyframes GoOutRight {\n0% {\n scale: 1; \n }\n 100% {\n scale: 1.5;\n transform: translate(-20%, -10%);\n }\n}\n\n\n\n@-webkit-keyframes GoOutRight {\n0% {\n scale: 1; \n }\n 100% {\n scale: 1.5;\n transform: translate(-20%, -10%);\n }\n}\n\n\n@keyframes GoLeft {\n 0% { opacity: 1;\n scale: 1; \n }\n 100% {\n scale: 1.5;\n opacity: 0;\n transform: translate(20%, 20%);\n }\n}\n\n\n\n@-webkit-keyframes GoLeft {\n 0% { opacity: 1;\n scale: 1; \n }\n 100% {\n opacity: 0;\n scale: 1.5;\n transform: translate(20%, 20%);\n }\n}\n\n\n\n@keyframes GoRight {\n0% { opacity: 1;\n scale: 1; \n }\n 100% {\n opacity: 0;\n scale: 1.5;\n transform: translate(-20%, -10%);\n }\n}\n\n\n\n@-webkit-keyframes GoRight {\n0% { opacity: 1;\n scale: 1; \n }\n 100% {\n opacity: 0;\n scale: 1.5;\n transform: translate(-20%, -10%);\n }\n}

<<cacheaudio "circle" "sound/Circle.m4a">>\n<<cacheaudio "seat" "sound/Seat.m4a">>\n<<cacheaudio "goodbye" "sound/Goodbye.m4a">>\n<<cacheaudio "intro" "sound/Intro.m4a">>\n<<cacheaudio "loop" "sound/Loop.m4a">>\n

/* twine-user-stylesheet-joiner */\n\n@import url('https://fonts.googleapis.com/css2?family=Abyssinica+SIL&family=Montserrat:wght@400;800&display=swap');\n\nbody {\n color: #000;\n background-color: #fff;\n overflow: hidden;\n font-family: 'Abyssinica SIL', serif;\n}\n\n#story {\n margin: 0;\n}\n\n#passages {\n max-width: 100vw;\n margin: 0 auto;\n}\n\n\n.passage { display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 75px 1fr 150px;\n gap: 2px 2px;\n grid-auto-flow: column dense;\n justify-content: center;\n justify-items: center;\n align-items: center;\n}\n\na {\n cursor: pointer;\n color: #000;\n text-decoration: none;\n -webkit-transition-duration: .2s;\n -o-transition-duration: .2s;\n transition-duration: .2s;\n}\n\na:hover {\n cursor: pointer;\n color: #333;\n text-decoration: underline;\n -webkit-transition-duration: .2s;\n -o-transition-duration: .2s;\n transition-duration: .2s;\n}\n\n#img {\n overflow: hidden;\nfont-size: 2em;\n\n}\n\n.play img\n{\nwidth: 90vw;\n}\n\nimg {\n display: block;\n margin: 0 auto;\nmax-width: 100%;\n max-height: calc(100vh - 175px);\n}\n\n\n\n#passage-map img, #passage-seat .macro-timed-insert img, #passage-loop .macro-timed-insert img, #passage-circle .macro-timed-insert img{\n position: absolute;\n top: 100px;\n left: calc(100vw - 100%);\nmax-height: unset;\n}\n\n\n\n#top {\n display: flex;\n align-content: end;\n justify-content: space-evenly;\n align-items: stretch;\n flex-direction: row;\n flex-wrap: nowrap;\nalign-self: baseline;\n}\n\n\n#top span {\n display: inline-block;\n text-align: center;\n}\n\n\n\n#bottom {\ndisplay: block;\nalign-self: start;\nposition: relative;\nbottom: 100px;\nfont-size: 36pt;\n\n}\n\n\nbutton {\n cursor: pointer;\n color: #000;\n background-color: #fff;\n border: 1px solid #000000;\n font-size: 12.9px;\n line-height: normal;\n padding: 0.3em 0.6em;\n -webkit-transition-duration: .2s;\n -o-transition-duration: .2s;\n transition-duration: .2s;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n width: 120px;\n height: 55px; \n}\n\nbutton:hover {\n background-color: #c4c4c4;\nborder-color: #c6c6c6;\n}\n\n.loop button {\n background: #f68135;\n}\n\n.seat button {\nbackground: #6c9e8f;}\n\n.circle button {\n background: #cf5fae;\n}\n\n@media all and (-ms-high-contrast:none) {\n .passage {\n display: -ms-grid;\n -ms-grid-columns: 1fr;\n -ms-grid-rows: minmax(10%, 100px) 1fr minmax(10%, 100px);\n }\n\n .img {\n -ms-grid-row: 1;\n -ms-grid-row-span: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n\n .top {\n -ms-grid-row: 1;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n\n .bottom {\n -ms-grid-row: 3;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n}\n\n\n#top span.title {\n position: relative;\n top: 25px;\n font-size: 24px;\n}\n\n.play #bottom a.macro-link {\n \nmargin: 0 auto;\nbackground: white;\n text-decoration: none; \n}\n\n.play #bottom a.macro-link:hover {\n opacity: 0.8;\n text-decoration: none; \n\n}\n\n.play div#bottom {\n border: solid 5px black;\n border-radius: 4px;\n background: white;\n top: -50px;\n width: 85%;\nfont-size: inherit; \npadding: 3px 10px;\n}\n\n\n.play #bottom a img {\n height: 40px;\n width: unset ;\n clear: none;\n max-width: unset;\n max-height: unset;\n margin: unset ;\n display: inline; \n border: 3px solid black;\nborder-radius: 6px;\npadding: 10px;\nmargin: 0 auto;\nbackground: white;\n text-decoration: none;\nposition: relative; \ntop: 5px;\n}\n\n.gone {display: none; }\n\n.top {position: absolute; \nz-index: 20; \n animation-name: ScaleOut;\n animation-duration: 4s;\n transition-timing-function: ease-out;}\n\nspan.hide, span.right, span.left {\n animation-name: FadeOut;\n animation-duration: 4s;\n transition-timing-function: ease-out;\nopacity: 0; \n}\n\n.hide {\n animation-name: ScaleFadeOut;\n animation-duration: 4s;\n transition-timing-function: ease-out;\nopacity: 0; \n}\n\n.used, .visited {\n opacity: 0.3 !important;\n pointer-events: none; \n\n}\n\nspan #final button {\n position: relative;\n top: 30px;\n}\n\n\n@keyframes ScaleOut {\n 0% {\n scale: 1; \n }\n 100% {\n scale: 1.3;\ntransform: translate(0, -20%);\n }\n}\n\n@keyframes ScaleFadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n scale: 1.3;\ntransform: translate(0, -20%);\n }\n}\n\n\n\n@-webkit-keyframes ScaleFadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n scale: 1.3;\ntransform: translate(0, -20%);\n }\n}\n\n\n@keyframes FadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n\n@-webkit-keyframes FadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n\n.pulse {\n font-size: 1em;\n animation: pulse-black 1.15s infinite !important;\n}\n\n@keyframes pulse-black {\n 0% {\n font-size: 0.97em;\n }\n \n 70% {\nfont-size: 1.02em;\n }\n \n 100% {\n font-size: 0.97em;\n }\n}\n\n.play .passage {\n\ttransition: unset;\n}\n.play .passage-in {\n\topacity: 1;\n}\n\n

<div id="top"><span class="title">FIRST SEAT</span></div>\n<div id="img"><img src="images/FIRST SEAT 1.gif">\n</div>\n<div id="bottom">\n<span class="play">\n<<link [img[play]]>>\n<<audio ":playing" stop>><<audio "seat" play>>\n<<done>><<addclass "span.play" "used">><</done>>\n<<removeclass ".repeat" "gone">>\n<<timed 300s>>\n<<replace "#img">><img src="images/FIRST SEAT 2.gif"><</replace>>\n<<set $seat to 1>><</timed>>\n<</link>>\n</span>\n<<link [img[back]]>><<audio ":playing" stop>><<goto "Map">><</link>>\n<span class="repeat gone"><<link [img[repeat]]>><<audio ":playing" stop>><<audio "seat" play>><</link>></span>\n</div>

<div id="top"></div>\n<div id="img"><img src="images/FIRST PAGE.gif"> \n</div>\n<div id="bottom"><<linkappend "Begin">><<audio "intro" play>>\n<<timed 200s>>\n<<link "Continue">><<goto "Map">><</link>>\n<<done>><<addclass ".link-internal.macro-link" "pulse">><</done>>\n<</timed>><<addclass ".macro-linkappend" "gone">>\n<</linkappend>>\n<<done>>\n<<addclass ".macro-linkappend" "pulse">>\n<</done>>\n\n</div>

Anonymous

UIBar.destroy();\n

Postman's Park

<div id="top"><span class="title">CENTRE CIRCLE</span></div>\n<div id="img"><img src="images/CENTRE CIRCLE 1.gif">\n\n\n</div>\n<div id="bottom">\n<span class="play"><<link [img[play]]>>\n<<audio ":playing" stop>><<audio "circle" play>>\n<<done>><<addclass "span.play" "used">><</done>>\n<<removeclass ".repeat" "gone">>\n<<timed 300s>>\n<<replace "#img">><img src="images/CENTRE CIRCLE 2.gif"><</replace>>\n<<set $circle to 1>><</timed>>\n<</link>></span>\n<<link [img[back]]>><<audio ":playing" stop>><<goto "Map">><</link>>\n<span class="repeat gone"><<link [img[repeat]]>><<audio ":playing" stop>><<audio "circle" play>><</link>></span>\n</div>

<div id="top"><span class="title">WIDE LOOP</span></div>\n<div id="img"><img src="images/WIDE LOOP 1.gif">\n\n</div>\n<div id="bottom">\n<span class="play">\n<<link [img[play]]>>\n<<audio ":playing" stop>><<audio "loop" play>>\n<<done>><<addclass "span.play" "used">><</done>>\n<<removeclass ".repeat" "gone">>\n<<timed 300s>>\n<<replace "#img">><img src="images/WIDE LOOP 2.gif"><</replace>>\n<<set $loop to 1>><</timed>>\n<</link>>\n</span>\n<<link [img[back]]>><<audio ":playing" stop>><<goto "Map">><</link>>\n<span class="repeat gone"><<link [img[repeat]]>><<audio ":playing" stop>><<audio "loop" play>><</link>></span>\n</div>