alienhospital/fic/dp/unstitch.html
2025-12-23 05:56:17 -05:00

751 lines
No EOL
18 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Change your site title: (It is shown in the tab) -->
<title>AL13NH0SP1T4L</title>
<!-- Change your site description: (It is shown in Google results) -->
<meta content="My personal website!" name="description" />
<!-- Setting character encoding and viewport size. Do not remove. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- FavIcon (small image in tab), change to any image you want: -->
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- CSS: -->
<!-- You will have to change this to "../style.css" if this HTML file is in a subfolder, to "../../style.css" if this HTML file is in 2 subfolders, etc. -->
<link href="./style.css" rel="stylesheet" />
<script>
// Template generated with petrapixel's layout generator.
// (Please do not remove this credit.)
console.log("%c Template generated with petrapixel's layout generator.", "font-size: 14pt;");
console.log("%c https://petrapixel.neocities.org/coding/layout-generator", "font-size: 14pt;");
</script>
</head>
<body>
<!-- The next line is a skip-to-content link for keyboard users. Do not remove it! -->
<a href="#content" id="skip-to-content-link">Skip to content</a>
<div class="layout">
<!-- =============================================== -->
<!-- HEADER -->
<!-- =============================================== -->
<header>
<div class="header-image">
<img src="https://i.ibb.co/d4wzWNJw/tumblr-9521a9fc973bc72adeebdf473bee6653-94ca1a4f-540.png" alt="" />
</div>
<div class="header-content">
<div class="header-title"></div>
<!-- NAVIGATION -->
<nav>
<ul>
<li><a href="/homepage">Home</a></li>
<li><a href="/about">About Me</a></li>
<li><a href="/shrines">Shrines</a></li>
<li><a href="/resources">Resources</a></li>
<li>
<strong>More</strong>
<ul>
<li><a href="/paint">Games - Paint</a></li>
<li><a href="/kidpix">Games - Kidpix</a></li>
<li><a href="/secrets">Well of Secrets</a></li>
<li><a href="/fanworks">Archive of My Fanworks</a></li>
<li><a href="/links">Even More Links!</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main id="content"> <!-- Do NOT remove the ID here -->
<!-- =============================================== -->
<!-- MAIN CONTENT -->
<!-- =============================================== -->
<section>
<h1>
<a href="/fic/directory">Back</a>
</h1>
<h2>unstitch that shed-off soul
</h2>
|| Cliff, as he makes the rat hat in 2x01. Serious animal death TW.
<hr>
.
<br>.<br>
<p>
<span>Cliff kills the rats and doesnt know why. </span>
</p><p> </p><p>
<span>Hes angry, his anger rusting him, cruelly covering the entirety of his (tiny) “body” —- this cannot be called a body. What he is now—--especially </span>
<em>
<span>now, </span>
</em>
<span>now that he is so small—-is something like a wraith, something with no attachment to impacting this world despite remaining in this world willingly; a victim of the universe. A ghost skipping through cycles of the past like a glitching vinyl record. Something that wants to spread out, to stretch its presence, but is tied down and limited. </span>
</p><p> </p><p>
<span>But he still doesnt know </span>
<em>
<span>why — </span>
</em>
<span>why he was fated to end up here in the first place. Hes not religious often, but he knows that God must hate him. If only he had been kinder, if only. If only he had been better, if only, maybe this wouldnt have happened to him.</span>
</p><p> </p><p>
<span>God. Niles Caulder took control from Gods gentle hands and placed them around Cliffs neck—-not only </span>
<em>
<span>his </span>
</em>
<span>neck but around Larrys neck, Ritas neck, Jane and Vic and Kate and Clara and</span>
</p><p> </p><p>
<span>and</span>
</p><p> </p><p>
<span>and.</span>
</p><p> </p><p>
<span>Niles Caulder manipulated fate, using Cliffs life with the same consideration to that of a chess piece. Niles Caulder falsely made himself God, dethroning his predecessor in unthinkable violence. Cliff wants to kill him. He deserves to die, to suffer like Kate and Clara and </span>
<em>
<span>he </span>
</em>
<span>did. It would be a balance of justice.</span>
</p><p> </p><p>
<span>Larry had somehow managed to craft him a tiny, sharpened dagger. To defend himself, he proposed, but Larry didnt care about the reason; he wanted to help, to feel useful. Cliff appreciates that. </span>
</p><p> </p><p>
<span>Cutting apart a rat is much easier when youre over six feet tall. But, he supposes, the robot fingers are less of a problem at this size; while the action is time-consuming, it is not necessarily </span>
<em>
<span>difficult. </span>
</em>
<span>Hes able to carve into its neck like its instinctual, like this kind of mutilation is in his nature, in the coding of his brain. Briefly, a flash-spark of cerebral activity: </span>
<em>
<span>Im just like him, </span>
</em>
<span>he thinks—-this is an acknowledgement, not a paranoia. His father. His goddamn father. The rat makes a splashing noise; hes pressing the knife in a bit deeper than he intended to. Sprays of blood tarnish his body. He has to do this.</span>
</p><p> </p><p>
<span>There isnt much of a difference between RJ Steele and Niles Caulder; the only contrast is the fact that Niles was capable of hiding his monstrosity. </span>
<em>
<span>I dont know what happened to us — </span>
</em>
<span>a snap! of fragile bone —- </span>
<em>
<span>Im going to — </span>
</em>
<span>more blood, only blood — </span>
<em>
<span>be better. </span>
</em>
</p><p> </p><p>
<span>The jaw of the rat should be removed, he decides, to give his head a place to rest. Bone is tough, but Cliff is harder, Cliffs intensity burns beyond recognition. So - he places the dagger at the right side of the jaw and slides it underneath the skin and pictures the jaw of Niles Caulder underneath his weapon in the rodents place. It is a horrible coping mechanism, but Cliff has never had a firm grasp on healthy coping mechanisms. He hasnt even touched it with his fingertips. Hes </span>
<em>
<span>just like—-</span>
</em>
</p><p> </p><p>
<span>He peels the skin off of Nile—-</span>
<em>
<span>the rat</span>
</em>
<span>s jaw slowly, like peeling back fruits that have been forbidden, like peeling back the same skin of an animal slaughtered for its meat. Its barely pink underneath the shreds; instead a deep, dry maroon. When animals are slaughtered, he thinks, they are slaughtered for a reason, and their bodies are used for nourishment.</span>
</p><p> </p><p>
<span>Why the fuck is he killing these rats? This is the first time hes thought of using any part of the rats body, and its simply for petty reasons. He could take the bone and fashion it into something useful — furniture, maybe, decoration for the dreariness of the plastic racetrack. He could use the fur to create blankets; hes heard Jane complain about the cold recently. He could have an excuse for killing the rats that goes beyond a flesh-shredding anger. </span>
</p><p> </p><p>
<span>But showing Niles that he can be fulfilled by cruelty is more important. He knows that this line of thinking is pathetic, renders him pitiful and sad, but hes never been able to reach past the label of </span>
<em>
<span>pathetic </span>
</em>
<span>(his actions, betraying Kate, repeating the cycle—-) and theres no way to start trying </span>
<em>
<span>now. </span>
</em>
</p><p> </p><p>
<span>He finishes removing one layer of skin and steps back to assess his work. Its grotesque. The state of this corpse is horrific; it should disgust him. </span>
</p><p> </p><p>
<span>He can only see Niles Caulders face in front of him, frozen on a head severed. He isnt that kind of person. He was always that kind of person. He—</span>
</p><p><br />
<br />
</p>
</section>
</main>
<!-- Closing .layout: -->
</div>
<!-- Add any additional Javascript code (<script></script>) here. -->
</body>
<style>
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */
/* Variables are used like this: var(--text-color) */
:root {
/* Background Colors: */
--background-color: #ffffff;
--content-background-color: #ffffff;
--sidebar-background-color: #ffffff;
/* Text Colors: */
--text-color: #000000;
--sidebar-text-color: #2500dd;
--link-color: #000d63;
--link-color-hover: #5e00ec;
/* Text: */
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, , Meiryo, ' Pゴシック', 'MS PGothic', ' ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, , Meiryo, ' Pゴシック', 'MS PGothic', ' ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--font-size: 18px;
/* Other Settings: */
--margin: 25px;
--padding: 24px;
--border: 10px inset #001457;
--round-borders: 0px;
--sidebar-width: 300px;
}
/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-size: var(--font-size);
margin: 0;
padding: var(--margin);
color: var(--text-color);
font-family: Times;
line-height: 1.2;
font-weight: 500;
background: var(--background-color);
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
}
::selection {
/* (Text highlighted by the user) */
background: rgba(0, 0, 0, 0.2);
}
mark {
/* Text highlighted by using the <mark> element */
text-shadow: 1px 1px 4px var(--link-color);
background-color: inherit;
color: var(--text-color);
}
/* Links: */
a {
text-decoration: underline;
}
a,
a:visited {
color: var(--link-color);
}
a:hover,
a:focus {
color: var(--link-color-hover);
text-decoration: none;
}
/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
.layout {
width: 1200px;
display: grid;
grid-gap: var(--margin);
grid-template: "header" auto "main" auto "footer" auto / auto;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
main {
grid-area: main;
overflow-y: auto;
padding: var(--padding);
background: var(--content-background-color);
border: var(--border);
border-radius: var(--round-borders);
}
/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
header {
grid-area: header;
font-size: 1.2em;
border: var(--border);
border-radius: var(--round-borders);
background: var(--content-background-color);
}
.header-content {
padding: var(--padding);
}
.header-title {
font-family: var(--heading-font);
font-size: 1.5em;
font-weight: bold;
}
.header-image img {
width: 100%;
height: auto;
}
/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */
aside {
grid-area: aside;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
background: var(--sidebar-background-color);
padding: var(--padding);
color: var(--sidebar-text-color);
}
.left-sidebar {
grid-area: leftSidebar;
}
.right-sidebar {
grid-area: rightSidebar;
}
.sidebar-title {
font-weight: bold;
font-size: 1.2em;
font-family: var(--heading-font);
}
.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}
.sidebar-section ul,
.sidebar-section ol {
padding-left: 1.5em;
}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
margin-top: 10px;
}
/* Sidebar Blockquote: */
.sidebar-section blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
overflow: hidden;
}
.sidebar-section blockquote > *:first-child {
margin-top: 0;
}
.sidebar-section blockquote > *:last-child {
margin-bottom: 0;
}
/* Site Button: */
.site-button {
display: flex;
flex-direction: column;
align-items: center;
}
.site-button textarea {
font-family: monospace;
font-size: 0.7em;
}
/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
nav {
margin-bottom: 3em;
}
nav .sidebar-title {
margin-bottom: 0.5em;
}
nav ul {
margin: 0 -5px;
padding: 0;
list-style: none;
user-select: none;
}
nav ul li {
margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
font-weight: bold;
}
nav ul summary {
cursor: pointer;
}
nav ul ul li > a {
padding-left: 30px;
}
/* NAVIGATION IN HEADER */
header nav {
margin-bottom: 0;
}
header nav ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
header nav ul li {
position: relative;
}
header nav ul li:first-child > a {
padding-left: 0;
}
header nav ul li:last-child > a {
padding-right: 0;
}
/* Subnavigation (Drop-Down): */
header nav ul ul {
background: var(--content-background-color);
display: none;
position: absolute;
top: 100%;
left: 10px;
padding: 0.5em;
z-index: 1;
border: var(--border);
min-width: 100%;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}
header nav ul li:hover ul,
header nav ul li:focus-within ul {
display: block;
}
header nav ul li strong {
color: var(--link-color);
text-decoration: underline;
font-weight: normal;
}
header nav ul ul li a {
display: block;
padding-left: 0;
padding-right: 0;
}
/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */
main {
line-height: 1.5;
}
main a,
main a:visited {
color: var(--link-color);
}
main a:hover,
main a:focus {
color: var(--link-color-hover);
text-decoration-style: wavy;
}
main p,
main .image,
main .full-width-image,
main .two-columns {
margin: 0.75em 0;
}
main ol,
main ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
main ol li,
main ul li {
margin-bottom: 0.2em;
line-height: 1.3;
}
main ol {
padding-left: 2em;
}
main blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
}
main pre {
margin: 1em 0 1.5em;
}
main code {
text-transform: none;
}
main center {
margin: 1em 0;
padding: 0 1em;
}
main hr {
border: 0;
border-top: var(--border);
margin: 1.5em 0;
}
/* HEADINGS: */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
font-family: var(--heading-font);
margin-bottom: 0;
line-height: 1.5;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
margin-top: 0;
}
main h1 {
font-size: 1.5em;
}
main h2 {
font-size: 1.4em;
}
main h3 {
font-size: 1.3em;
}
main h4 {
font-size: 1.2em;
}
main h5 {
font-size: 1.1em;
}
main h6 {
font-size: 1em;
}
/* COLUMNS: */
.two-columns {
display: flex;
}
.two-columns > * {
flex: 1 1 0;
margin: 0;
}
.two-columns > *:first-child {
padding-right: 0.75em;
}
.two-columns > *:last-child {
padding-left: 0.75em;
}
/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */
.image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.full-width-image {
display: block;
width: 100%;
height: auto;
}
.images {
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img {
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
}
/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */
/* please do not remove this. */
#skip-to-content-link {
position: fixed;
top: 0;
left: 0;
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1;
font-size: 1.25rem;
background-color: var(--content-background-color);
color: var(--text-color);
transform: translateY(-3rem);
transition: transform 0.1s ease-in;
z-index: 99999999999;
}
#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
transform: translateY(0);
}
/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */
/* CSS Code for devices < 800px */
@media (max-width: 800px) {
body {
font-size: 14px;
}
.layout {
width: 100%;
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
aside {
border-bottom: 1px solid;
padding: 9px;
font-size: 0.9em;
}
nav {
padding: 0;
}
nav > ul {
padding-top: 0.5em;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 0.5em;
}
main {
max-height: none;
padding: 15px;
}
.images {
flex-wrap: wrap;
}
.images img {
width: 100%;
}
#skip-to-content-link {
font-size: 1rem;
}
}
</style>
</html>