diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b299cb1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ Why is the DLR shut today?
+
+
+
+
+
+
+
+
+ Why is the DLR shut today?
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..36d33aa
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,141 @@
+/* Why is the DLR shut today?
+ Two colour schemes selected via the [data-theme] attribute on :
+ - modern: current DLR turquoise/teal branding
+ - original: 1987 DLR red-and-blue livery */
+
+:root {
+ --font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Modern DLR — turquoise/teal */
+[data-theme="modern"] {
+ --bg: #00afaa;
+ --bg-accent: #007e7a;
+ --surface: #ffffff;
+ --text: #ffffff;
+ --message: #ffffff;
+ --button-bg: #ffffff;
+ --button-text: #007e7a;
+ --button-active-bg: #00302e;
+ --button-active-text: #ffffff;
+}
+
+/* Original DLR — 1987 red and blue */
+[data-theme="original"] {
+ --bg: #002b5c;
+ --bg-accent: #c8102e;
+ --surface: #f5f0e1;
+ --text: #f5f0e1;
+ --message: #f5f0e1;
+ --button-bg: #c8102e;
+ --button-text: #f5f0e1;
+ --button-active-bg: #f5f0e1;
+ --button-active-text: #002b5c;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ font-family: var(--font-stack);
+ color: var(--text);
+ background: linear-gradient(135deg, var(--bg) 0%, var(--bg-accent) 100%);
+ transition: background 0.4s ease, color 0.4s ease;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+
+.controls {
+ display: flex;
+ justify-content: flex-end;
+ padding: 1.5rem;
+}
+
+.theme-toggle {
+ display: flex;
+ gap: 0.5rem;
+ border: none;
+ margin: 0;
+ padding: 0;
+}
+
+.theme-button {
+ font-family: inherit;
+ font-size: 0.9rem;
+ font-weight: 600;
+ padding: 0.5rem 1rem;
+ border: 2px solid var(--button-bg);
+ border-radius: 999px;
+ background: transparent;
+ color: var(--text);
+ cursor: pointer;
+ transition: background 0.2s ease, color 0.2s ease;
+}
+
+.theme-button[aria-pressed="true"] {
+ background: var(--button-active-bg);
+ color: var(--button-active-text);
+ border-color: var(--button-active-bg);
+}
+
+.stage {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem;
+ gap: 2rem;
+}
+
+.title {
+ font-size: clamp(1.5rem, 4vw, 2.5rem);
+ font-weight: 700;
+ margin: 0;
+ letter-spacing: 0.02em;
+}
+
+.message {
+ font-size: clamp(1.75rem, 6vw, 4rem);
+ font-weight: 800;
+ line-height: 1.2;
+ margin: 0;
+ max-width: 22ch;
+ color: var(--message);
+}
+
+.refresh-button {
+ font-family: inherit;
+ font-size: 1rem;
+ font-weight: 600;
+ padding: 0.75rem 1.75rem;
+ border: 2px solid var(--button-bg);
+ border-radius: 999px;
+ background: var(--button-bg);
+ color: var(--button-text);
+ cursor: pointer;
+ transition: transform 0.1s ease, opacity 0.2s ease;
+}
+
+.refresh-button:hover {
+ opacity: 0.9;
+}
+
+.refresh-button:active {
+ transform: scale(0.97);
+}