--- /dev/null
+<(../common.inc.plp)><:
+
+Html({
+ raw => <<'EOT',
+<script src="/word/put.js"></script>
+<script src="/word/memory.js"></script>
+<style>
+/* cards */
+figure {
+ display: inline-block;
+ background: #224;
+ border: 1px solid #888;
+ margin: 2px;
+ perspective: 100em;
+ height: 300px;
+ position: relative;
+}
+figure:not(.turn):hover {
+ cursor: pointer;
+}
+figure, img {
+ transition: all .5s ease-in;
+}
+
+/* card faces */
+figure img {
+ height: 100%;
+ width: auto;
+ backface-visibility: hidden;
+ transform: rotateY(180deg); /* back */
+ transform-style: preserve-3d;
+ float: left; /* ff workaround to prevent click selection */
+}
+
+/* turn results */
+figure.turn img {
+ transform: rotateY(0deg);
+}
+figure.bad img {
+ filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
+}
+figure.good {
+ opacity: .8;
+}
+</style>
+EOT
+});
+say '<h1>memory</h1><p id="quiz"></p>';