diff --git a/icon-branch.svg b/icon-branch.svg
new file mode 100644
index 0000000..9ad3de5
--- /dev/null
+++ b/icon-branch.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="icon" viewBox="0 0 16 16">
+    <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/icon-check.svg b/icon-check.svg
new file mode 100644
index 0000000..2062bb8
--- /dev/null
+++ b/icon-check.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="icon" viewBox="0 0 16 16">
+    <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/icon-chevron.svg b/icon-chevron.svg
new file mode 100644
index 0000000..acebda2
--- /dev/null
+++ b/icon-chevron.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="icon" viewBox="0 0 16 16">
+    <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"/>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/icon-dir.svg b/icon-dir.svg
new file mode 100644
index 0000000..f33db36
--- /dev/null
+++ b/icon-dir.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="icon" viewBox="0 0 16 16">
+    <path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1Z"/>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/icon-file.svg b/icon-file.svg
new file mode 100644
index 0000000..eab656c
--- /dev/null
+++ b/icon-file.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="icon" viewBox="0 0 16 16">
+    <path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914Z"/>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6c0f552..34ef053 100644
--- a/index.html
+++ b/index.html
@@ -8,287 +8,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>raw-content</title>
-<style>
-:root {
-  --color-fg: #1f2328;
-  --color-fg-muted: #59636e;
-  --color-fg-accent: #0969da;
-  --color-fg-danger: #d1242f;
-  --color-bg: #ffffff;
-  --color-bg-subtle: #f6f8fa;
-  --color-border: #d1d9e0;
-  --color-border-muted: #d8dee4;
-  --color-shadow: rgba(31, 35, 40, 0.12);
-  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-fg: #e6edf3;
-    --color-fg-muted: #8b949e;
-    --color-fg-accent: #4493f8;
-    --color-fg-danger: #f85149;
-    --color-bg: #0d1117;
-    --color-bg-subtle: #161b22;
-    --color-border: #30363d;
-    --color-border-muted: #21262d;
-    --color-shadow: rgba(0, 0, 0, 0.4);
-  }
-}
-*, *::before, *::after { box-sizing: border-box; margin: 0; }
-body {
-  font-family: var(--font);
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--color-fg);
-  background: var(--color-bg);
-  padding: 32px 16px;
-  -webkit-font-smoothing: antialiased;
-}
-a { color: var(--color-fg-accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-.container { max-width: 1012px; margin: 0 auto; }
-
-/* --- Repo header (immutable) --- */
-.repo-header {
-  font-size: 20px;
-  margin-bottom: 16px;
-  line-height: 1.5;
-}
-.repo-header a { color: var(--color-fg-accent); }
-.repo-header .repo { font-weight: 600; }
-.repo-header .sep { color: var(--color-fg-muted); padding: 0 4px; font-weight: 300; }
-
-/* --- Toolbar (branch + path) --- */
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: var(--color-bg-subtle);
-  border: 1px solid var(--color-border);
-  border-radius: 6px 6px 0 0;
-}
-
-/* --- Branch selector --- */
-.branch-selector { position: relative; }
-.branch-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 12px;
-  font-size: 14px;
-  font-family: var(--font);
-  color: var(--color-fg);
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  cursor: pointer;
-  white-space: nowrap;
-  line-height: 20px;
-}
-.branch-btn:hover { background: var(--color-bg-subtle); }
-.branch-btn svg { fill: var(--color-fg-muted); flex-shrink: 0; }
-
-/* --- Branch dropdown --- */
-.branch-dropdown {
-  display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 220px;
-  max-height: 300px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  box-shadow: 0 8px 24px var(--color-shadow);
-  z-index: 100;
-}
-.branch-dropdown.open { display: flex; flex-direction: column; }
-.dropdown-header {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-fg-muted);
-  border-bottom: 1px solid var(--color-border-muted);
-  flex-shrink: 0;
-}
-.dropdown-list {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  color: var(--color-fg);
-  text-decoration: none;
-  font-size: 14px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.dropdown-item:hover { background: var(--color-bg-subtle); text-decoration: none; }
-.dropdown-item.active { font-weight: 600; }
-.dropdown-item .check { width: 16px; flex-shrink: 0; display: flex; }
-.dropdown-item .check svg { fill: var(--color-fg); }
-.dropdown-item .branch-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.dropdown-loading {
-  padding: 16px;
-  text-align: center;
-  color: var(--color-fg-muted);
-  font-size: 13px;
-}
-
-/* --- Path breadcrumb --- */
-.path-crumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 2px;
-  min-width: 0;
-}
-.path-crumb .sep { color: var(--color-fg-muted); padding: 0 4px; }
-.path-crumb .cur { font-weight: 600; }
-
-/* --- Listing --- */
-.listing {
-  border: 1px solid var(--color-border);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  overflow: hidden;
-}
-.row {
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  border-top: 1px solid var(--color-border-muted);
-  gap: 8px;
-  color: var(--color-fg);
-  text-decoration: none;
-}
-.row:first-child { border-top: none; }
-.row:hover { background: var(--color-bg-subtle); }
-.row svg { flex-shrink: 0; fill: var(--color-fg-muted); }
-.row.dir svg { fill: var(--color-fg-accent); }
-.row .name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.row:hover .name { color: var(--color-fg-accent); }
-
-/* --- File viewer --- */
-.file-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--color-border-muted);
-}
-.file-info {
-  color: var(--color-fg-muted);
-  font-size: 12px;
-}
-.file-actions a {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 12px;
-  font-size: 12px;
-  color: var(--color-fg);
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-}
-.file-actions a:hover { background: var(--color-bg-subtle); text-decoration: none; }
-.file-content {
-  display: flex;
-  overflow-x: auto;
-}
-.file-content pre {
-  margin: 0;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 1.45;
-  tab-size: 4;
-  white-space: pre;
-  color: var(--color-fg);
-}
-.line-nums {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  flex-shrink: 0;
-  padding: 16px 12px 16px 16px;
-  text-align: right;
-  color: var(--color-fg-muted);
-  background: var(--color-bg);
-  border-right: 1px solid var(--color-border-muted);
-  user-select: none;
-  -webkit-user-select: none;
-}
-.line-code {
-  flex: 1;
-  padding: 16px;
-  min-width: 0;
-}
-.file-content.image {
-  display: block;
-}
-.file-content img {
-  display: block;
-  max-width: 100%;
-  margin: 16px auto;
-}
-.file-binary {
-  padding: 48px 16px;
-  text-align: center;
-  color: var(--color-fg-muted);
-}
-
-/* --- States --- */
-.state {
-  padding: 48px 16px;
-  text-align: center;
-  color: var(--color-fg-muted);
-}
-.state.error { color: var(--color-fg-danger); }
-.spinner {
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  border: 2px solid var(--color-border);
-  border-top-color: var(--color-fg-accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* --- Hint (landing) --- */
-.hint {
-  text-align: center;
-  padding: 80px 16px;
-  color: var(--color-fg-muted);
-}
-.hint h1 {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--color-fg);
-  margin-bottom: 8px;
-}
-.hint p { margin-top: 8px; }
-.hint code {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  padding: 2px 8px;
-  background: var(--color-bg-subtle);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-}
-</style>
+<link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div class="container">
@@ -296,9 +16,9 @@
   <div id="toolbar" class="toolbar">
     <div class="branch-selector">
       <button id="branch-btn" class="branch-btn" type="button">
-        <svg width="16" height="16" viewBox="0 0 16 16"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/></svg>
+        <svg width="16" height="16"><use href="icon-branch.svg#icon"></use></svg>
         <span id="branch-name"></span>
-        <svg width="16" height="16" viewBox="0 0 16 16"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"/></svg>
+        <svg width="16" height="16"><use href="icon-chevron.svg#icon"></use></svg>
       </button>
       <div id="branch-dropdown" class="branch-dropdown">
         <div class="dropdown-header">Switch branches</div>
@@ -312,9 +32,9 @@
   </div>
 </div>
 <script>
-var ICON_DIR = '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1Z"/></svg>';
-var ICON_FILE = '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914Z"/></svg>';
-var ICON_CHECK = '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>';
+var ICON_DIR = '<svg width="16" height="16"><use href="icon-dir.svg#icon"></use></svg>';
+var ICON_FILE = '<svg width="16" height="16"><use href="icon-file.svg#icon"></use></svg>';
+var ICON_CHECK = '<svg width="16" height="16"><use href="icon-check.svg#icon"></use></svg>';
 
 function esc(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2c61cc5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,279 @@
+:root {
+  --color-fg: #1f2328;
+  --color-fg-muted: #59636e;
+  --color-fg-accent: #0969da;
+  --color-fg-danger: #d1242f;
+  --color-bg: #ffffff;
+  --color-bg-subtle: #f6f8fa;
+  --color-border: #d1d9e0;
+  --color-border-muted: #d8dee4;
+  --color-shadow: rgba(31, 35, 40, 0.12);
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fg: #e6edf3;
+    --color-fg-muted: #8b949e;
+    --color-fg-accent: #4493f8;
+    --color-fg-danger: #f85149;
+    --color-bg: #0d1117;
+    --color-bg-subtle: #161b22;
+    --color-border: #30363d;
+    --color-border-muted: #21262d;
+    --color-shadow: rgba(0, 0, 0, 0.4);
+  }
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+body {
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-fg);
+  background: var(--color-bg);
+  padding: 32px 16px;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--color-fg-accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.container { max-width: 1012px; margin: 0 auto; }
+
+/* --- Repo header (immutable) --- */
+.repo-header {
+  font-size: 20px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+.repo-header a { color: var(--color-fg-accent); }
+.repo-header .repo { font-weight: 600; }
+.repo-header .sep { color: var(--color-fg-muted); padding: 0 4px; font-weight: 300; }
+
+/* --- Toolbar (branch + path) --- */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 6px 6px 0 0;
+}
+
+/* --- Branch selector --- */
+.branch-selector { position: relative; }
+.branch-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 12px;
+  font-size: 14px;
+  font-family: var(--font);
+  color: var(--color-fg);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 20px;
+}
+.branch-btn:hover { background: var(--color-bg-subtle); }
+.branch-btn svg { fill: var(--color-fg-muted); flex-shrink: 0; }
+
+/* --- Branch dropdown --- */
+.branch-dropdown {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 220px;
+  max-height: 300px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px var(--color-shadow);
+  z-index: 100;
+}
+.branch-dropdown.open { display: flex; flex-direction: column; }
+.dropdown-header {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-muted);
+  border-bottom: 1px solid var(--color-border-muted);
+  flex-shrink: 0;
+}
+.dropdown-list {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  color: var(--color-fg);
+  text-decoration: none;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dropdown-item:hover { background: var(--color-bg-subtle); text-decoration: none; }
+.dropdown-item.active { font-weight: 600; }
+.dropdown-item .check { width: 16px; flex-shrink: 0; display: flex; }
+.dropdown-item .check svg { fill: var(--color-fg); }
+.dropdown-item .branch-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dropdown-loading {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-fg-muted);
+  font-size: 13px;
+}
+
+/* --- Path breadcrumb --- */
+.path-crumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-width: 0;
+}
+.path-crumb .sep { color: var(--color-fg-muted); padding: 0 4px; }
+.path-crumb .cur { font-weight: 600; }
+
+/* --- Listing --- */
+.listing {
+  border: 1px solid var(--color-border);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  overflow: hidden;
+}
+.row {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border-muted);
+  gap: 8px;
+  color: var(--color-fg);
+  text-decoration: none;
+}
+.row:first-child { border-top: none; }
+.row:hover { background: var(--color-bg-subtle); }
+.row svg { flex-shrink: 0; fill: var(--color-fg-muted); }
+.row.dir svg { fill: var(--color-fg-accent); }
+.row .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.row:hover .name { color: var(--color-fg-accent); }
+
+/* --- File viewer --- */
+.file-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+.file-info {
+  color: var(--color-fg-muted);
+  font-size: 12px;
+}
+.file-actions a {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 12px;
+  font-size: 12px;
+  color: var(--color-fg);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+}
+.file-actions a:hover { background: var(--color-bg-subtle); text-decoration: none; }
+.file-content {
+  display: flex;
+  overflow-x: auto;
+}
+.file-content pre {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.45;
+  tab-size: 4;
+  white-space: pre;
+  color: var(--color-fg);
+}
+.line-nums {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  flex-shrink: 0;
+  padding: 16px 12px 16px 16px;
+  text-align: right;
+  color: var(--color-fg-muted);
+  background: var(--color-bg);
+  border-right: 1px solid var(--color-border-muted);
+  user-select: none;
+  -webkit-user-select: none;
+}
+.line-code {
+  flex: 1;
+  padding: 16px;
+  min-width: 0;
+}
+.file-content.image {
+  display: block;
+}
+.file-content img {
+  display: block;
+  max-width: 100%;
+  margin: 16px auto;
+}
+.file-binary {
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--color-fg-muted);
+}
+
+/* --- States --- */
+.state {
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--color-fg-muted);
+}
+.state.error { color: var(--color-fg-danger); }
+.spinner {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-fg-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* --- Hint (landing) --- */
+.hint {
+  text-align: center;
+  padding: 80px 16px;
+  color: var(--color-fg-muted);
+}
+.hint h1 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-fg);
+  margin-bottom: 8px;
+}
+.hint p { margin-top: 8px; }
+.hint code {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 2px 8px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+}