diff --git a/css/views/l9n.css b/css/views/l9n.css
new file mode 100644
index 0000000..ccfab0c
--- /dev/null
+++ b/css/views/l9n.css
@@ -0,0 +1,93 @@
+@media (orientation: landscape) {
+  :root {
+    --unit-size: 1vh;
+  }
+}
+
+@media (orientation: portrait) {
+  :root {
+    --unit-size: 1vw;
+  }
+}
+
+body {
+  background: black;
+  color: white;
+  font-family: "Arial", sans-serif;
+  font-weight: bold;
+
+  margin: 0;
+}
+
+#container {
+  width: 100%;
+}
+
+body.view-new #trains {
+  max-width: calc(85*var(--unit-size));
+}
+
+body.view-old #trains {
+  width: 100%;
+}
+
+.train {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  margin: calc(2*var(--unit-size));
+  /*margin-bottom: calc(5*var(--unit-size));*/
+}
+
+body.view-new .train {
+  margin-bottom: calc(8*var(--unit-size));
+}
+
+.train * {
+  align-self: center;
+}
+
+.train .logo {
+  text-align: center;
+}
+
+body.view-old .train .logo {
+  padding: calc(1*var(--unit-size));
+  margin-right: calc(2*var(--unit-size));
+
+  line-height: calc(11.5*var(--unit-size));
+  width: calc(11.5*var(--unit-size));
+  height: calc(11.5*var(--unit-size));
+}
+
+body.view-new .train .logo {
+  padding: calc(0.25*var(--unit-size));
+  margin: calc(1*var(--unit-size)) calc(1.5*var(--unit-size)) calc(1*var(--unit-size)) 0;
+
+  line-height: calc(11*var(--unit-size));
+  width: calc(11*var(--unit-size));
+  height: calc(11*var(--unit-size));
+}
+
+.train .destination {
+  flex-grow: 1;
+}
+
+body.view-old .train .destination {
+  font-size: calc(6.75*var(--unit-size));
+  margin-left: calc(2*var(--unit-size));
+}
+
+body.view-new .train .destination {
+  font-size: calc(5.5*var(--unit-size));
+  margin-bottom: calc(3*var(--unit-size));
+}
+
+.train .time {
+  min-width: calc(19.25*var(--unit-size));
+  margin: 0 calc(2*var(--unit-size));
+
+  font-size: calc(6.5*var(--unit-size));
+  text-align: left;
+}
diff --git a/css/views/l9n_deprecated2.css b/css/views/l9n_deprecated2.css
new file mode 100644
index 0000000..76103da
--- /dev/null
+++ b/css/views/l9n_deprecated2.css
@@ -0,0 +1,81 @@
+body {
+  background: black;
+  color: white;
+  font-family: "Arial", sans-serif;
+  font-weight: bold;
+
+  margin: 0;
+}
+
+#container {
+  width: 100%;
+}
+
+body.view-new #trains {
+  max-width: 680px;
+}
+
+body.view-old #trains {
+  width: 100%;
+}
+
+.train {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  margin: 16px;
+  /*margin-bottom: 5vh;*/
+}
+
+body.view-new .train {
+  margin-bottom: 64px;
+}
+
+.train * {
+  align-self: center;
+}
+
+.train .logo {
+  text-align: center;
+}
+
+body.view-old .train .logo {
+  padding: 8px;
+  margin-right: 16px;
+
+  line-height: 92px;
+  width: 92px;
+  height: 92px;
+}
+
+body.view-new .train .logo {
+  padding: 2px;
+  margin: 8px 12px 8px 0;
+
+  line-height: 88vh;
+  width: 88vh;
+  height: 88vh;
+}
+
+.train .destination {
+  flex-grow: 1;
+}
+
+body.view-old .train .destination {
+  font-size: 54px;
+  margin-left: 16px;
+}
+
+body.view-new .train .destination {
+  font-size: 44px;
+  margin-bottom: 24px;
+}
+
+.train .time {
+  min-width: 154px;
+  margin: 0 16px;
+
+  font-size: 52px;
+  text-align: left;
+}