picturesque [remastered]

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 7s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/da614dae384702c23c5b69c4ec0f75b1/89944afea15b90d6-bb/s1280x1920/a362f4508f89c8bc65f682a9a91ce506d413517c.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <p class="fade">The life of an art student is filled to the brim with unease and turbulence. A creative block for the majority of the term forces you to be at the studio on an almost, well-deserved winter break, much to your dismay. Deadlines serve as the main source of this unwarranted stress, you presume. And let it be known, as a reminder for good measure, that your final project for the academic year is due tomorrow. </p> <p class="fade">Given the time constraints, you've envisioned a general idea of what you want to accomplish for this project. The creative flow remains dormant, but with a bit of push and pull, you are (almost) confident about achieving a desirable outcome for this project. By your standards, at least. </p> <p class="fade2"> Yet, instead of hurriedly scrambling to your designated work station to actually start on your project, you catch yourself intently looking around as though giving the desolate place [[a quick scan]].</p> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .menu { height: 50%; } .warning { background-color: #2a324b; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 7s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/da614dae384702c23c5b69c4ec0f75b1/89944afea15b90d6-bb/s1280x1920/a362f4508f89c8bc65f682a9a91ce506d413517c.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <b class="epsilon">picturesque.</b> is an interactive fiction (loosely based on Emily Short's <i>Galatea</i>) that delves into the clash between modern and traditional artistic worlds. Originally <a href="https://textadventures.co.uk/games/view/9usjzrlttewureauorkn7w/picturesque">published on Text Adventures sometime in 2019,</a> this was a first attempt at Twine as part of an end-of-term project for a media studies class. The story had a little over 3000 words in its beginning stages. In this remastered edition (complete with images and a revised layout), I've revisited one of the story branches, which now leads us to around 4000 words in this version! The themes introduced were meant to be a personal statement on specific topics introduced in class. These are strictly my own views on the kind of art and media I consume. <b class="warning">Content Warnings: This interactive narrative contains some depictions of self harm, as well as subtle allusions to suicide and physical abuse. </b> </td> </tr> </div> </table>  <table class="menu"> <tr> <td> [[MENU]] [[CREDITS]] </td> </tr> <br> <br> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 7s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/da614dae384702c23c5b69c4ec0f75b1/89944afea15b90d6-bb/s1280x1920/a362f4508f89c8bc65f682a9a91ce506d413517c.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <p>Part of the process of rectifying your temporary inability to pick up a paint brush, to make sense of a few colourful strokes, is to seek inspiration. A catalyst; for how can you stoke the flames if you cannot invoke a flicker? </p> <p>You absorb the essence of every piece you come across — a gallery of rough-draft sketches and sculptures, of canvases overflowing with discord and personal commentaries, of happily-ever-afters and tragic endings. You chance guess work after guess work behind the narratives that fueled such creative concepts, eager to find one that resonates with you. </p> <p><i>Keen</i> to find the one that sparked something akin to curiosity, to an unexpected form of inspiration, the first time your eyes beheld such a spectacle. </p> <p>And there it is. </p> <p>Despite being half-obscured by an opaque ebony veil, the familiar shape of the object is something you immediately recognize from habitually glancing at it every now and then during your almost daily visits to the workshop, curious about how the finished product will appear. </p> <p>The view from your work station unfortunately does not allow a complete visual access to the work-in-progress project since the artist tends to physically go in circles around their masterpiece, giving you an unwarranted view of their hunched figure instead. </p> <p> All you know is that the project resembles a humanlike figure. [[With realistic dimensions at that.]] <p> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Empty Workshop" class="act fade"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <p>The overall ambience emulates those timeless horror films, a somber moment of silence and stillness before a resounding noise that scares the living daylights out of the eager viewers. Your mind immediately wanders to morally-grey mad scientists and their monstrous creations given the somewhat dimmed lights in this part of the workshop. </p> <p>The unnamed artist seems to have a strange affinity for overcast spaces as you struggle to remember the last time you saw this area lit up with even a miniscule flicker of light, although further comprehending the situation, perhaps the artist's intentions were to [[hide their project from prying eyes and hands.]]</p> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <p>Despite being partly obscured, anyone can tell at first glance that this project is meant to be a robotic figure. </p> <p>Half of its face resembles a passable human facial structure, flesh and all, save for the dark, thin lines hacked in different directions which you assume were supposed to be imitations of scars that seem all too realistic. The other half of the face appears to still be a work in progress with its colourful wires and cogs exposed.</p> <p>From the neck down, you are unsure whether or not the piece itself is near-completion with perhaps functioning body parts since the humanlike machine is clothed in a sweatshirt (with sleeves long enough to purposefully cover where the hands should be resting on its lap), pants, and even has lightly-worn shoes. Perhaps the artist scoured the local thrift stores for these clothes. </p> <p>Beside the still model is a notebook. You assume it belongs to the unknown artist. </p> <p>[[You should read it,]] you coax yourself. Bare witness to the thought process and uncover the perplexity of everything that unfolded in this uncharted - and possibly forbidden - part of the workshop. </p> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <p>In retrospect, it is a bit intrusive to examine the contents of an individual's notebook. Formulating a loophole - say, wanting to find out information regarding the owner to potentially <i>return</i> the now-deemed missing item - makes it easier to flip through the pages worry-free.</p> <p>There's nothing particularly outstanding about the sketches and doodles which, admittedly, leave you a little disappointed. Their art style most definitely captivates you enough to maintain your attention towards the lifeless pages, despite the fact that most of them are blank. Judging from the leftover bits that hang around the spring coil, one can tell that the artist made it a habit to rip the papers out often.</p> <p>The final page is filled with several scrawls of text, and as you skim through the messy paragraphs of lead, the highlighted portion at the bottom of the page leaves you a little puzzled.</p> <p class="epsilon">UNPLUG INSTALLATION</p> <p>Even with limited perception, your eyes find and follow the length of a cord which is, in fact, currently connected to a socket. The request doesn't strike you as something you should heed at the moment, your hands swiftly closing the notebook before returning it to its previous position, turning towards the final product that further piques your curiosity.</p> <p>Your movements, slow and calculated as they are, somehow trigger the loosely-draped veil to completely fall away. An expanded array of twisted metal and wires, completing the entire image, meets your eyes. </p> <p>Is this an invitation? </p> <p>Do you dare [[touch its face?]]</p> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> You are still in awe, your mind still processing what is unfolding before you. The installation piece slowly blinks its profound eyes, a bright yellow glow swallowing the gloom. Its half-finished wired eyebrows furrow in confusion and what you perceive to be hurt. The clasp on your wrist loosens as its makeshift hand falls back on its side. Your gaze follows the somewhat troubled collapse of its hand which, now exposed, reveals more bundles of wires and metallic pieces of bronze and silver. <b class="epsilon">"Of course I am alive, unknown. If I wasn't alive, I wouldn't be capable of speech." </b> Their voice remains stern as though still upset at your valiant attempt for skin-to-skin (skin-to-metal?) contact and this show of emotion, this semblance of vulnerability, somehow eases you. For a mere work of art, they do hold a valid point. Astonishing as it is, it also seems harmless; at least, for now. If this unnamed robotic contraption was crafted <i>purely</i> to hold ill intent towards whoever disturbed its slumber, you figure you would have lost your fingers in the wrangle just seconds ago. Seeing as all your limbs and appendages are still very much intact, you decide it would be safe to hold a conversation - or two - with it. [[What are you?]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> The golden orbs that blankly stare at you begin to flicker. For a moment, you expect the lights to go out completely, although they seem to stabilize just as suddenly. A mere blip in the system, perhaps. <b class="epsilon">"I unfortunately cannot give you a response at this given time. I apologize for the inconvenience."</b> It would be for the best to switch subjects before your pseudo-robotic friend is hit with an existential crisis. The ghost of their final statement echoes against the two of you in a volley that starts to stir discomfort. You do nothing else but gawk at them, the neutrality in their expression transforming into one that's more expectant. The silence stretches out and tears into you. Focusing on the composition of odd shapes that served as their face, your mind registers the obvious blemishes in the form of glaring scratch marks. Out of desperation, you blurt out the one question about this observation. [[What happened to your face?]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> Bluntly-framed, but a bullet to dispel the discomfort, nonetheless. <b class="epsilon">"These?"</b> Epsilon nonchalantly gestures towards the faint outlandish marks etched on their makeshift skin. <b class="epsilon">"I made them myself." </b> All you do is stare. In bewilderment? Confusion? <i>What does that mean?</i> How do you even respond to what they had just said? <b class="epsilon">"Want to get a closer view?"</b> Their voice sounds less amplified now, the question barely a whisper, but it does successfully reel your attention back towards your newfound acquaintance. You quirk your head to the side, assuming this to be some form of practical joke as you anticipate for the punch line that never arrives. Epsilon merely chuckles at your reaction, the robotic vibration trembling across their incomplete shell. This reaction catches you off-guard, although undoubtedly they mean no ill harm, raising a hand to motion you forward in a come-hither manner. With another courageous step, you are able to properly scan the prominent traces of incisions on their somewhat finished skin. Under the dim fluorescent light, you can clearly point out the detailed lacerations, how almost wolf-like claws grazed and tore at their flesh. [[You touch the cuts.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> Epsilon gazes at your mesmerized self as your hand involuntarily moves towards the freshly-healed wounds, leaving behind permanent scars in its wake. Instead of resisting from your advances this time, they let you caress the exposed skin. They feel ... <p class="fade2">... unexpectedly warm to the touch? </p> <p class="fade2">You presume robotic entities would have a cold, metallic texture. </p> <p class="fade2"> Yet the feeling of your hand on the surface of their skin is anything but. </p> <p class="fade2"> It feels familiar. </p> <p class="fade2"> Humanlike almost. </p> [[Does it hurt?]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> It does seem rather outlandish to ask a machine, an invention made of synthetic parts, about physical pain. What would they know about pain in the first place? Epsilon slightly bows their head, eyeballs whirring towards the side as though deep in thought about the question. <b class="epsilon">"I think so. I don't remember."</b> How peculiar, you think. <b class="reader">"Why can't you remember?"</b> jumps out of your mouth almost unconsciously. There's a momentary surge of panic, of perhaps overstepping their boundaries. Yet you find yourself withdrawing slightly and crossing your arms across your chest, still wanting to uncover the mystery that surrounds Epsilon. Curiosity takes the reigns and is now [[in control.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> The written instructions inscribed in the notebook echo in the back of your mind, the haunting words consuming you like a command that you're compelled to obey. Epsilon notices the hesitation and, with a startling creak of a turning head, draws their attention to the power outlet. For a minute, the two of you just stare at the almost hidden plug and cord, the silence an unspoken sense of shared understanding. You imagine yourself bridging the gap with no warning, ceasing the contraption's existence with just one pull. How easy it all is. [[How quick.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> Lost in the cyclone of this predicament, you stumble backwards when the trembling voice speaks, shedding some much-needed light on this internal dilemma. <b class="epsilon">"I know what the artist intends to do with me, unknown. It is but a futile conquest to listen to what I have to say."</b> Before a firm rebuttal forces its way past your lips, Epsilon continues to address your own uneasiness. A voice so resigned yet so beholden startles you into halting [[your own conflicted train of thought]]. <b class="epsilon">"But I appreciate the sentiment all the same."</b> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/f31b7d2adcda53f2-2b/s1280x1920/176b7faf54cfd6275d417327485c8b93231e8111.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <b class="epsilon">"I'm afraid I won't be surviving here for long, unknown."</b> You peer at the machine, blinking your eyes in confusion. <b class="reader">"What do you mean by that?"</b> <b class="epsilon">"Look around you. Tell me what you see,"</b> they instruct, and with a creak, slowly turn their head towards the direction of where you had approached from. With a half a second scan, you respond back instantaneously. <b class="reader">"Art. All I see is art." </b> An obvious answer. You recall the art pieces that occupied the floor, the various mediums and materials melding into several colourful splotches. <b class="epsilon"><i>Abandoned</i> art. No one settles for [[the beauty of traditional artistic pieces anymore]], especially since the rise of the digital age. Everything traditional is fading. Just like me.</b> </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/f31b7d2adcda53f2-2b/s1280x1920/176b7faf54cfd6275d417327485c8b93231e8111.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> <b class="epsilon">"It would be best to put me out of my misery, unknown."</b> You don't to have a choice at this point. How can you argue with a machine, a contraption made of nuts and bolts? A <i>mere</i> machine that you suddenly developed empathy towards? A machine with the ability to understand the gravity of the situation more than you would've thought possible. Machines aren't capable of producing emotions, or at least that's what you've been told. That's what you've been made to believe. But Epsilon doesn't falter when they offer you reasons to unplug them. All of this said with [[no remorse, nor regret.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/f31b7d2adcda53f2-2b/s1280x1920/176b7faf54cfd6275d417327485c8b93231e8111.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> For a moment, your thoughts drift back to what Epsilon had said - that those marks across their face were self-inflicted, assumedly on purpose. Is it all a valiant attempt at dismantling oneself? Or is it an egregious task to continue from where the artist left off? <i>"They were unfinished! They had potential!"</i> you think. Though all thoughts unsaid hold no credible value. But they've ultimately come to a decision that their time, despite it being short-lived, should come to an end. And still, their fate is but a weak glow in the palm of your hand. [[The final decision is up to you.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> Epsilon merely shrugs at that question. <b class="epsilon">"I am unable to pinpoint the exact materials used to form my corporeal frame. According to my maker's project summary, the scraps and equipment you see before you were retrieved from old music boxes which, to my knowledge, no longer functioned as intended."</b> A part of you wants to peruse the artist's notebook once more, simply to verify if what the machine has said about their make holds some truth. But something you can't quite place about their remark compels you to believe it to be factual. To <i>trust</i> them on their word. [[Who created you?]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/a4dcc254d0f09aec2f3b9fa68cd274b8/89944afea15b90d6-08/s1280x1920/28a6499d1d97749a0b11380803495514fd1f2f4f.pnj" alt="Workshop" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> Before Epsilon can interject, you push past the aches and the trigger-happy temptation of obedience. A question forms as you dig through the history of the short-lived introduction to discover a point of interest. <b class="reader">"You mentioned you were built for the purpose of communication. Can you tell me more?" </b> The machine repositions itself in its neutral state, head facing your direction. <b class="epsilon"> "Of course. What would you like to know?" </b> <b class="reader">"It sounds rather vague. Were you created for your own maker's entertainment? Just someone they can talk to?" </b> It feels more profound than that, you think. There is a slight pause, one you chalk up to the lack of maintenance on this sentient installation piece all this time. <b class="epsilon"> "I am not <i>just</i> someone you can talk to, unknown. I am here to listen." </b> Your tone feels frantic. A claw desperately digs through all this muck in search of something coherent. Something that makes sense. [[Something.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 5s; } .fade2 { animation: fadeIn 15s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/b43eb0387987a42f44d92b49894a60c4/89944afea15b90d6-1d/s1280x1920/f2a3789ca9ed70b9fbe33eddcded3f1bb10413ba.pnj" alt="Painting" class="act fade"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> Your own submission, rushed as it was, beckons you even from afar. Memories of that day remain a blur. Inspiration struck as soon as you had left the building, electing to create a draft of your final project and seeing to its completion somewhere far and away from the workshop. You don't even recall the waking nightmare of a sleepless night, don't even recall how you managed to haul the filled canvas to your art professor's office just in time for submission, nor do you remember your own creative thought process behind the masterpiece you've devised. You suppose that was part of the purpose of it all — interpretation. The painting sits untouched on an easel. It feels familiar and unfamiliar all at once. Beholders must have glanced at this work of art and appreciated its message, whatever they assume it to be. Or they simply brushed past it without sparing it as much as a single thought. [[It doesn't matter much to you either way.]] </td> </tr> </div> </table> </center> </body> </html>

<!DOCTYPE HTML> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap" rel="stylesheet"> <style> a { color: #DDDDDD; } table { height: 150%; width: 150%; border: 1px white; border-style: groove; border-radius: 15px; text-align: center; table-layout: fixed; } table, tr { height: 150%; } .act { width: 100%; display: block; border: 1px solid white; border-radius: 10px; } .pass { padding-left: 15px; padding-right: 15px; } .epsilon { color: #F5BB00; } .ep-fade { color: #F5BB00; animation: fadeIn 5s; } .reader { color: #baa1a7; } .reader-fade { color: #baa1a7; animation: fadeIn 5s; } .fade { animation: fadeIn 10s; } .fade2 { animation: fadeIn 20s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }  .domine-p { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } </head> </style> <body> <center>  <br> <br> <table> <th> <center><img src="https://64.media.tumblr.com/b43eb0387987a42f44d92b49894a60c4/89944afea15b90d6-1d/s1280x1920/f2a3789ca9ed70b9fbe33eddcded3f1bb10413ba.pnj" alt="Painting" class="act"></center> </th> </table> <br> <br>  <table class="pass"> <tr> <td> <div style="overflow-y:auto; height: 250px;"> You regard it one more time. Perhaps the final time. It will cease to exist within the week or so, and the thought of it doesn't strike you as alarming at all. As you are about to turn away and leave this workshop and its ghosts behind for good, you catch a weak, fleeting glow in your periphery. What did you just see? You turn to face the canvas one more time, convinced that the flicker came from the illustrated screen of that television. A trick of the light, you assume, and wave it off. <p class="fade">Or perhaps a dying message, a reminder of what once was.</p> <p class="fade2">You force yourself to walk away and never look back. </p> [[MENU]] </td> </tr> </div> </table> </center> </body> </html>