diff --git a/cmunci.eot b/cmunci.eot
new file mode 100644
index 0000000..ee70212
Binary files /dev/null and b/cmunci.eot differ
diff --git a/cmunci.ttf b/cmunci.ttf
new file mode 100644
index 0000000..4d41d1f
Binary files /dev/null and b/cmunci.ttf differ
diff --git a/cmunci.woff b/cmunci.woff
new file mode 100644
index 0000000..08554bb
Binary files /dev/null and b/cmunci.woff differ
diff --git a/narrowcast-playground.html b/narrowcast-playground.html
new file mode 100644
index 0000000..603cf90
--- /dev/null
+++ b/narrowcast-playground.html
@@ -0,0 +1,154 @@
+
+
+
+
+ NARROWCAST
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/narrowstyle.css b/narrowstyle.css
new file mode 100644
index 0000000..ef088fb
--- /dev/null
+++ b/narrowstyle.css
@@ -0,0 +1,155 @@
+@font-face {
+ font-family: 'Computer Modern Classical Serif Italic';
+ src: url('ClassicalSerifItalic/cmunci.eot');
+ src: url('ClassicalSerifItalic/cmunci.eot?#iefix') format('embedded-opentype'),
+ url('ClassicalSerifItalic/cmunci.woff') format('woff'),
+ url('ClassicalSerifItalic/cmunci.ttf') format('truetype'),
+ url('ClassicalSerifItalic/cmunci.svg#cmunci') format('svg');
+ font-weight: normal;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Computer Modern Typewriter Light';
+ src: url('TypewriterLight/cmunbtl.eot');
+ src: url('TypewriterLight/cmunbtl.eot?#iefix') format('embedded-opentype'),
+ url('TypewriterLight/cmunbtl.woff') format('woff'),
+ url('TypewriterLight/cmunbtl.ttf') format('truetype'),
+ url('TypewriterLight/cmunbtl.svg#cmuntt') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Computer Modern Typewriter Light';
+ src: url('TypewriterLight/cmunbto.eot');
+ src: url('TypewriterLight/cmunbto.eot?#iefix') format('embedded-opentype'),
+ url('TypewriterLight/cmunbto.woff') format('woff'),
+ url('TypewriterLight/cmunbto.ttf') format('truetype'),
+ url('TypewriterLight/cmunbto.svg#cmunbto') format('svg');
+ font-weight: normal;
+ font-style: italic;
+}
+html {
+ box-sizing: border-box;
+ height: 100%;
+ font-size: 14pt;
+ line-height: 16pt;
+}
+*, *:before, *:after {
+ -webkit-box-sizing: inherit;
+ -moz-box-sizing: inherit;
+ box-sizing: inherit;
+}
+body{
+ margin: 0rem;
+ font-family: 'Computer Modern Typewriter Light';
+ background-color: #393c56;
+ color: #ffe4fd;;
+}
+iframe {
+ border: none;
+}
+a {
+ cursor: pointer;
+}
+.about {
+ font-family: 'Computer Modern Classical Serif Italic';
+ font-size: 1.6rem;
+ line-height: 0.6rem;
+ position: fixed;
+ top: 0;
+ right: 0;
+ margin: 1rem;
+ color: #ffffe5;
+}
+.about a {
+ font-size: 1rem;
+}
+.sidebar {
+ height: 100%;
+ width: 300px;
+ padding: 1rem;
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ box-shadow: 0.2rem -0.2rem 1rem #ffe4fd;
+ overflow-x: hidden;
+}
+.sidetop, .sidebottom {
+overflow-y: scroll;
+scrollbar-width: none;
+overflow: -moz-scrollbars-none;
+-ms-overflow-style: none;
+-ms-overflow-style: -ms-autohiding-scrollbar;
+overflow: -ms-autohiding-scrollbar;
+display: flex;
+flex-direction: column;
+}
+.sidetop {
+ height: 45vh;
+ font-size: 1.2rem;
+}
+.sidetop a {
+ color: #ffe4fd;
+ margin-top: auto;
+}
+.middle {
+ height: 10vh;
+ font-size: 0.8rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.middle p{
+ margin: 0px;
+}
+#livetitle {
+ font-size: 2rem;
+ animation: glow 1.6s infinite alternate;
+ -webkit-animation: glow 1.6s infinite alternate;
+}
+@-webkit-keyframes glow {
+ to {
+ text-shadow: 0 0 8px #ff029c;
+ }
+}
+@-webkit-keyframes glowbutton {
+ to {
+ box-shadow: 0 0 8px #ff029c;
+ }
+}
+.sidebottom {
+ height: 45vh;
+}
+.sidebottom a {
+ color: #aec7ea;
+}
+.live {
+ margin-left: 300px;
+ display: inline-block;
+ height: 100%;
+}
+.live > *{
+/* touch-action: none;*/
+}
+
+.resize-drag {
+ width: 620px;
+ border-radius: 2rem 0.2rem 2rem 0.6rem;
+ padding: 2rem 0.4rem 0.4rem 2rem;
+ margin: 1rem;
+ touch-action: none;
+ /* This makes things *much* easier */
+ box-sizing: border-box;
+ box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd;
+}
+.resize-drag::before {
+ content: "◉ ➫ drag";
+ font-size: 2rem;
+ width: 1rem;
+ height: 1rem;
+ color: #ff029c;
+ background-color: #ff029c;
+ position: absolute;
+ z-index: 999;
+}