ivan-kalachikov · ivan-kalachikov · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026
diff --git a/docs/design/2026-03-06-orbital-concept-refined.md b/docs/design/2026-03-06-orbital-concept-refined.md
diff --git a/docs/plans/2026-03-06-orbital-implementation-plan.md b/docs/plans/2026-03-06-orbital-implementation-plan.md
diff --git a/index.html b/index.html
@@ -7,6 +7,10 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
+    <meta name="color-scheme" content="dark">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
     <title>Focused</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "vue": "^3.5.0",
-    "vue-audio-visual": "git+https://github.com/Ivankalachikov/vue-audio-visual.git",
     "vue-i18n": "^11.0.0",
     "vuex": "^4.1.0"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="layout">
+    <HeaderBar />
     <Main />
     <Footer />
     <transition name="fade">
@@ -12,12 +13,14 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex';
+import HeaderBar from './components/HeaderBar.vue';
 import Main from './components/Main.vue';
 import Footer from './components/Footer.vue';
 
 export default {
   name: 'App',
   components: {
+    HeaderBar,
     Main,
     Footer,
   },
@@ -34,160 +37,130 @@ export default {
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
+/* ── Orbital Design System ── */
+
+/* 1. CSS Variables (spec 1.1) */
+:root {
+  --bg: #080812;
+  --bg-gradient-from: #0D0B1A;
+  --bg-gradient-to: #0A1A1A;
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface-active: rgba(255, 255, 255, 0.10);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-active: rgba(255, 255, 255, 0.18);
+  --text-primary: #E8E8EC;
+  --text-dim: rgba(232, 232, 236, 0.5);
+  --text-muted: rgba(232, 232, 236, 0.25);
+  --accent-warm: #FFCC66;
+  --accent-warm-glow: rgba(255, 204, 102, 0.25);
+  --accent-cool: #44FFBB;
+  --accent-cool-glow: rgba(68, 255, 187, 0.25);
+  --accent-neutral: #AA88FF;
+  --accent-neutral-glow: rgba(170, 136, 255, 0.3);
+  --error: #FF6655;
+  --warning: #FFB844;
+  --star-color: rgba(255, 255, 255, 0.6);
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body: 'Inter', sans-serif;
+}
+
+/* 2. Global reset */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
-
 html, body {
   height: 100%;
-  background: #191921;
+  background: var(--bg);
 }
-
 #app {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #dadada;
+  color: var(--text-primary);
   height: 100%;
 }
+a { color: var(--text-primary); text-decoration: none; }
+a:hover { color: #fff; }
 
-a {
-  color: #bbb;
-  text-decoration: none;
-}
-
-a:hover, a:active {
-  color: #eee;
-}
-
+/* 3. Layout with aurora background (spec 1.4) */
 .layout {
   min-height: 100%;
   overflow: hidden;
   position: relative;
-  background: #191921;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Shared layout utilities */
-.row {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-/* Shared card styles */
-.card-col {
-  width: 100%;
-  max-width: 360px;
-}
-
-.card {
-  background: #23242B;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-/* Text utilities */
-.text-secondary {
-  color: #888;
-}
-
-/* Shared slider styles */
-.slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 6px;
-  background: #393744;
-  border-radius: 3px;
-  outline: none;
-  margin-top: 4px;
-}
-
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  background: #3949D3;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: #3949D3;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-
-.slider:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Shared icon wrapper */
-.icon-wrapper {
-  position: relative;
-  flex-shrink: 0;
-  width: 40px;
-}
-
-.icon-wrapper.error path {
-  fill: #6f2b39;
-}
-
-.icon-wrapper.error circle {
-  stroke: #6f2b39;
-}
-
-.spinner {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-}
-
-/* Toast notifications */
+  background-color: var(--bg);
+  background-image:
+    radial-gradient(ellipse at 20% 50%, rgba(13, 11, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 50%, rgba(10, 26, 26, 0.8) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 100%, rgba(68, 255, 187, 0.03) 0%, transparent 40%),
+    radial-gradient(ellipse at 50% 0%, rgba(170, 136, 255, 0.04) 0%, transparent 40%);
+  background-size: 200% 200%;
+  animation: aurora 20s ease-in-out infinite alternate;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+}
+@keyframes aurora {
+  0%, 100% { background-position: 40% 50%; }
+  50% { background-position: 60% 50%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .layout { animation: none; }
+}
+
+/* 4. Toast styles (spec 3.8) */
 .toast {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
-  padding: 10px 24px;
-  border-radius: 6px;
-  color: #dadada;
-  font-size: 14px;
+  padding: 12px 20px;
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 13px;
   z-index: 1000;
+  background: var(--surface-active);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border-active);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
-
 .toast--error {
-  background: #5E2551;
-  border: 1px solid #6f2b39;
+  border-color: var(--error);
+  color: var(--error);
 }
 
+/* 5. Transitions */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
+  transform: translateX(-50%) translateY(-20px);
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* 6. Focus states (spec 4.3) */
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-neutral), 0 0 12px var(--accent-neutral-glow);
+}
+
+/* 7. Backdrop-filter fallback (spec 11) */
+@supports not (backdrop-filter: blur(1px)) {
+  .panel, .header, .footer, .toast, .drawer {
+    background: rgba(15, 15, 25, 0.85) !important;
+  }
 }
 </style>
diff --git a/src/assets/christmas-hat.png b/src/assets/christmas-hat.png