diff --git a/www/css/tty_intro.css b/www/css/tty_intro.css
new file mode 100644
index 0000000..724505e
--- /dev/null
+++ b/www/css/tty_intro.css
@@ -0,0 +1,80 @@
+/* background */
+/* text       */
+/* #ac4aed */
+html, body {
+  height: 100%;
+  margin: 0;
+  background-color: #0e0d14; }
+
+.centered {
+  position: absolute;
+  inset: 0 0 0 0;
+  margin: auto;
+  display: flex; }
+
+.heading {
+  font-family: monospace;
+  font-size: 2em;
+  font-weight: bold;
+  color: #ffc0cb;
+}
+
+/* =========================================================== *
+ *                      Type Writer Effect                     *
+/* =========================================================== */
+/* ==================
+ * Graphical Container
+ */
+/* ==================
+ * TTY Prompt
+ */
+@keyframes cursor-blink {
+  50% {
+    border-color: transparent; } }
+/* =====================
+ * TTY Output
+ */
+@keyframes unhide-result {
+  to {
+    visibility: visible; } }
+/* =========================
+ * Intended Public Interface
+ */
+.typing-wrapper-2ch-36ch {
+  margin: auto auto;
+  width: 39ch;
+  text-align: start;
+
+  border: 0.5ch solid #ffc0cb;
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: start;
+}
+
+.typing-prompt-2ch-36ch-3s-0_6s {
+  width: 38ch;
+  /* XXX: fix scss leaves typing as a function! */
+  animation: kfs-typing-2ch 3s steps(36ch), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 1ch solid;
+}
+
+.typing-result-3s-0_8s {
+  animation: unhide-result 1s 3.8s forwards;
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+
+/* XXX: NAME CHANGED TO GENERIC */
+@keyframes kfs-typing-2ch {
+  from {
+    width: 2ch /* ignore prompt width */
+  }
+}
+
+/*# sourceMappingURL=tty_intro.css.map */
diff --git a/www/css/tty_intro.css.map b/www/css/tty_intro.css.map
new file mode 100644
index 0000000..7928813
--- /dev/null
+++ b/www/css/tty_intro.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAqB,gBAAgB;AAChB,gBAAgB;AAAE,aAAa;AAEpD,UAAW;EACT,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,gBAAgB,EANN,OAAO;;AASnB,SAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,IAAI;EAEZ,OAAO,EAAE,IAAI;;AAGf,QAAS;EACP,WAAW,EAAE,SAAS;EACtB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,IAAI;EACjB,KAAK,EApBK,OAAO;;ACDnB;;iEAEiE;AAsBjE;;GAEG;AAsBH;;GAEG;AA2BH,uBAIC;EAHC,GAAI;IACF,YAAY,EAAE,WAAW;AAI7B;;GAEG;AAcH,wBAIC;EAHC,EAAG;IACD,UAAU,EAAE,OAAO;AAIvB;;GAEG;AA/ED,wBAAmD;EAEjD,MAAM,EAAE,SAAS;EACjB,KAAK,EAAE,IAAoC;EAG3C,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,aAAa,EAAE,MAAM;EACrB,WAAW,EAAE,KAAK;EAClB,UAAU,EAAE,KAAK;EAGjB,0CAA0C;EAC1C,MAAM,EAAE,mBAAmB;EAC3B,OAAO,EAAE,IAAI;;AAUf,+BAAqG;EACnG,KAAK,EAAE,IAA8B;EACrC,YAAY,EAAE,SAAS;EAGvB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,MAAM;EAGhB,SAAS,EACP,mFAC8E;;AAwBlF,sBAAkE;EAChE,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,QAAQ;EAGrB,SAAS,EACP,8BAA4D",
+"sources": ["../scss/_base.scss","../scss/_tty.scss"],
+"names": [],
+"file": "tty_intro.css"
+}
\ No newline at end of file
diff --git a/www/scss/_tty.scss b/www/scss/_tty.scss
index bfff2ac..1634bae 100644
--- a/www/scss/_tty.scss
+++ b/www/scss/_tty.scss
@@ -2,7 +2,25 @@
  *                      Type Writer Effect                     *
 /* =========================================================== */
 
-@use 'base';
+/// Replace `$search` with `$replace` in `$string`
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
+
+@function sanitize-int($int) {
+  @return str-replace(#{$int}, '.', '_')
+}
 
 /* ==================
  * Graphical Container
@@ -21,7 +39,9 @@
     align-items: start;
     text-align: start;
 
-    border: 0.5ch solid base.$color-txt;
+    // XXX: TODO: for some reason this causes an error??
+    /* border: 0.5ch solid base.$color-txt; */
+    border: 0.5ch solid #ffc0cb;
     padding: 20px;
   }
 }
@@ -30,7 +50,9 @@
  * TTY Prompt
  */
 @mixin typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period) {
-  .typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{$blink-period} {
+  // XXX: TODO: relearn SCSS cause the thing below will break whenever an input is given as a float
+  // XXX: TODO: (period character interpretted as sub-attribute)
+  .typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{sanitize-int($blink-period)} {
     width: $prompt-width + $command-width; // ignore cursor (right border)
     border-right: 1ch solid; // cursor
 
@@ -40,7 +62,7 @@
 
     // typing animation then start cursor blink
     animation:
-      typing $typing-duration steps($command-width),
+      typing($prompt-width) $typing-duration steps($command-width),
       cursor-blink $blink-period steps(1, start) $typing-duration infinite alternate;
   }
 }
@@ -63,7 +85,9 @@
  * TTY Output
  */
 @mixin typing-result($typing-duration, $reveal-delay) {
-  .typing-result-#{$typing-duration}-#{$reveal-delay} {
+  // XXX: TODO: relearn SCSS cause the thing below will break whenever an input is given as a float
+  // XXX: TODO: (period character interpretted as sub-attribute)
+  .typing-result-#{$typing-duration}-#{sanitize-int($reveal-delay)} {
     visibility: hidden;
     white-space: pre-wrap; // preserve linebreaks
 
diff --git a/www/scss/tty_intro.scss b/www/scss/tty_intro.scss
index 65f58a6..31abc48 100644
--- a/www/scss/tty_intro.scss
+++ b/www/scss/tty_intro.scss
@@ -1,3 +1,4 @@
+@import "base";
 @import "tty";
 @include tty(2ch, 36ch, 3s, 0.6s, 0.8s);