diff --git a/src/components/schedule/break.astro b/src/components/schedule/break.astro
index b5ec0d0a6..fef0be4ab 100644
--- a/src/components/schedule/break.astro
+++ b/src/components/schedule/break.astro
@@ -10,18 +10,32 @@ const { time, title, style, className }: Props = Astro.props;
 const label = [time, title].filter(Boolean).join(" ");
 ---
 
-<div class={className? className: "break"} style={style} aria-label={label} >
+<div class={className ? className : "break ep-break"} style={style} aria-label={label} >
   {time && `${time} `}
   {title}
 </div>
 
 <style>
-  .break {
+  .ep-break {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    justify-content: center;
     text-align: center;
-    justify-items: center;
-    padding-left: 8px;
-    background-color: #FCFBFA;
+    padding: 0.4rem 0.8rem;
+    font-family: 'Inter Tight', system-ui, sans-serif;
+    font-size: 0.85rem;
+    color: var(--ep-text-secondary);
+    font-weight: 500;
+    background: rgba(255,150,0,0.06);
+    border: 2px solid rgba(255,150,0,0.18);
+    border-radius: 6px;
+  }
+
+  .ep-break.room-change {
+    background: var(--ep-surface-subtle);
+    border: 1px dashed var(--ep-border);
+    color: var(--ep-text-muted);
+    font-weight: 400;
+    font-size: 0.75rem;
   }
 </style>
diff --git a/src/components/schedule/day.astro b/src/components/schedule/day.astro
index 696327f9d..7f9b2bd9a 100644
--- a/src/components/schedule/day.astro
+++ b/src/components/schedule/day.astro
@@ -4,7 +4,6 @@ import { type CollectionEntry, getCollection } from "astro:content";
 import Break from "@components/schedule/break.astro";
 import Session from "@components/schedule/session.astro";
 import { addMinutes, differenceInMinutes, parseISO } from "date-fns";
-import Headline from "@components/ui/Headline.astro";
 import { formatInTimeZone } from "date-fns-tz";
 
 
@@ -380,9 +379,8 @@ const dateText = format(date, "eeee - do MMMM");
 
 ---
 
-<div class="day"
->
-<Headline as="h3" id=`day-${dayName}` title={dateText} />
+<div class="day">
+<h3 class="ep-sched-day-title" id={`day-${dayName}`}><a href={`#day-${dayName}`} aria-label={`Jump to ${dateText}`}>{dateText}</a></h3>
 
   <div class="schedule-wrapper">
     <header class="schedule-container header">
@@ -479,7 +477,7 @@ const dateText = format(date, "eeee - do MMMM");
       <Break
         title="End of the Day"
         time={endStart}
-        className="day-end"
+        className="ep-break day-end"
       />
     </div>
     <div class="h-12"></div>
@@ -487,19 +485,17 @@ const dateText = format(date, "eeee - do MMMM");
 </div>
 
 <style is:global>
-
 .layout-wrapper {
   display: grid;
   grid-template-columns: 1fr minmax(0, 100%) 1fr !important;
 }
-
 </style>
+
 <style>
-  .schedule-wrapper
-{
-  width: 100%;
-  margin-top: 0.75rem;
-}
+  .schedule-wrapper {
+    width: 100%;
+    margin-top: 0.75rem;
+  }
 
   .day {
     margin-block: 2rem 3rem;
@@ -509,50 +505,39 @@ const dateText = format(date, "eeee - do MMMM");
     margin-top: 0;
   }
 
-
-  :global(.day-end) {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  justify-items: center;
-  background-color: #FCFBFA;
-  border-radius: 10px;
-  margin: 10px 1.5rem;
-  padding:2px 8px;
-  font-size: 0.8rem;
-}
-  :global(body) {
-  }
-
-  :global(select) {
-  }
-
-  :global(.schedule *)  {
-
-    font-family: "Inter Tight", sans-serif;
+  :global(.ep-break.day-end) {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-items: center;
+    background: #2d3548;
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 4px;
+    margin: 0.5rem 0;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    color: rgba(255,255,255,0.55);
+  }
+
+  :global(.schedule *) {
+    font-family: 'Inter Tight', system-ui, sans-serif;
     font-weight: 400;
     font-style: normal;
-    font-size:0.8rem;
-
+    font-size: 0.8rem;
   }
-  .schedule {
 
+  .schedule {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    padding-left: 1.5rem; /* 24px */
-    padding-right: 1.5rem; /* 24px */
+    gap: 4px;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .slot {
     display: contents;
   }
 
-  header,
-  .time {
-    /*display: none;*/
-  }
-
   :global(.session) {
     position: relative;
     z-index: 10;
@@ -563,32 +548,30 @@ const dateText = format(date, "eeee - do MMMM");
   :global(.break),
   header,
   header > div > div {
-    /*outline: 2px solid var(--color-primary);*/
-    background-color: #F7EEE5;
-    border-radius: 10px;
-    margin:2px;
-    padding:2px 0;
+    background-color: transparent;
+    border-radius: 6px;
+    margin: 0;
+    padding: 0;
   }
 
   :global(.room-change) {
     align-items: center;
-    background-color: #FCFBFA;
-    border-radius: 10px;
-    box-sizing: border-box;
-    color: var(--color-text);
     display: flex;
     font-weight: 400;
     justify-content: center;
     line-height: 1.2;
-    margin: 2px;
     min-height: 0;
     overflow: hidden;
-    padding: 0 8px;
     white-space: nowrap;
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 4px;
+    background: #151f38;
+    color: rgba(255,255,255,0.55);
+    font-size: 0.75rem;
+    padding: 0 8px;
   }
 
   :global(.break:not(.room-change)) {
-    background-color: #FFFCF7;
     font-weight: 600;
     letter-spacing: 0;
   }
@@ -596,33 +579,35 @@ const dateText = format(date, "eeee - do MMMM");
   .posters {
     text-align: center;
     display: none;
-    border:2px solid #bb7332;
-    border-radius: 10px;
   }
 
-
   .schedule-container.header {
-    display:none;
+    display: none;
   }
 
   @media screen and (max-width: 799px) {
     .time {
-      background:transparent;
+      background: transparent;
+      border: 1px solid var(--ep-border);
+      border-radius: 4px;
+      padding: 0.3rem 0.5rem;
+      margin: 2px 0;
     }
     .time h2 {
-      text-align:center;
-      color:#333332;
-      font-size:2rem;
+      text-align: center;
+      color: var(--ep-text-secondary);
+      font-size: 1.2rem;
     }
     .room-info {
-      text-align:center;
+      text-align: center;
     }
   }
+
   @media screen and (min-width: 800px) {
+    .schedule-container.header {
+      display: inherit;
+    }
 
-  .schedule-container.header {
-    display: inherit;
-  }
     .schedule-container {
       padding-bottom: 2px;
     }
@@ -641,16 +626,27 @@ const dateText = format(date, "eeee - do MMMM");
       display: block;
     }
 
-    header {
+    /* Header = room headers row */
+    header.schedule-container.header {
       position: sticky;
       top: 0;
-      background: var(--color-body-background);
+      background: #151f38;
       z-index: 20;
+    }
 
-      > div > div {
-        padding: 8px;
-      font-weight: bold;
-      }
+    header.schedule-container.header > div > div {
+      padding: 0.5rem 0.3rem;
+      font-weight: 700;
+      font-size: 0.85rem;
+      color: var(--ep-text-primary);
+      background: var(--ep-sched-room-bg);
+      border-radius: 4px;
+      text-align: center;
+    }
+
+    header.schedule-container.header > div > div:first-child {
+      background: transparent;
+      color: var(--ep-accent);
     }
 
     .schedule {
@@ -658,11 +654,12 @@ const dateText = format(date, "eeee - do MMMM");
       --room-change: 52px;
 
       display: grid;
-      gap: 2px;
+      gap: 4px;
       padding: 0;
     }
 
     :global(.session),
+    :global(.ep-session),
     .time,
     .posters,
     :global(.room-change),
@@ -671,22 +668,35 @@ const dateText = format(date, "eeee - do MMMM");
       grid-column: var(--col-start) / var(--col-end);
     }
 
-    :global(.day-end){
+    :global(.ep-break.day-end) {
       font-size: 1.2rem;
       margin: 2px;
       padding: 8px;
+      background: #2d3548;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 4px;
+      color: rgba(255,255,255,0.55);
     }
 
-
     .time {
-      padding: 8px;
+      padding: 0.4rem 0.5rem;
       grid-column: 1 / 2;
       outline: none;
+      text-align: right;
+      border: 1px solid var(--ep-border);
+      border-radius: 4px;
     }
+
     .time h2 {
+      font-family: 'Inter Tight', system-ui, sans-serif;
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: var(--ep-accent);
+      margin: 0;
     }
 
-    :global(.session.poster) {
+    :global(.session.poster),
+    :global(.ep-session.poster) {
       display: none;
     }
 
@@ -694,34 +704,34 @@ const dateText = format(date, "eeee - do MMMM");
       grid-column: 3 / 6;
       position: relative;
       display: block;
+      border: 2px solid var(--ep-accent);
+      border-radius: 6px;
+      background: #151f38;
+      z-index: 5;
     }
-    .posters::after {
-        content: "";
-        display: block;
-        /*padding: 4px 8px;*/
-      }
 
-      .posters h2
-      {
-        background: linear-gradient(#F8F7F6, #F2E2D3 );
-        padding: 4px 8px;
-        margin-top:8px;
-        border-radius: 10px;
-        font-weight: bold;
-        font-size: 0.8em;
-      }
+    .posters h2 {
+      font-family: 'Inter Tight', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 0.8rem;
+      color: var(--ep-accent);
+      padding: 0.4rem 0.5rem;
+      margin: 0;
+      background: transparent;
+    }
 
-      .posters > div {
-        display: flex;
+    .posters > div {
+      display: flex;
+    }
 
-        & > :global(*) {
-          flex: 1;
-        }
-      }
+    .posters > div > :global(*) {
+      flex: 1;
+    }
 
-      .posters :global(.session.poster) {
-        display: flex;
-      }
+    .posters :global(.session.poster),
+    .posters :global(.ep-session.poster) {
+      display: flex;
+    }
   }
 </style>
 
diff --git a/src/components/schedule/session.astro b/src/components/schedule/session.astro
index 6e62b7f2c..bcd55cbaa 100644
--- a/src/components/schedule/session.astro
+++ b/src/components/schedule/session.astro
@@ -28,29 +28,9 @@ const hasFooter = true;
 ---
 
 <div
-  class:list={["session", session.level, slugify(session.sessionType)]}
+  class:list={["ep-session", session.level, slugify(session.sessionType)]}
   style={style}
 >
-  <!--
-  <header>
-    {
-      session.sessionType === "poster" && (
-        <>
-          <span class="sr-only">Session type:</span>
-          Poster
-        </>
-      )
-    }
-    {
-      session.sessionType !== "poster" && session.level && (
-        <>
-          <span class="sr-only">Session level:</span>
-          {session.level}
-        </>
-      )
-    }
-    </header>
-    -->
   <header>
     {
       session.rooms.length === 1 && (
@@ -62,18 +42,6 @@ const hasFooter = true;
     }
   </header>
 
-  <!--   <div class="time">
-    <span class="sr-only">Session start:</span>
-    <time>
-      {formatInTimeZone(session.start, "Europe/Warsaw", "HH:mm")}
-    </time>
-
-    <span class="minus">-</span>
-    <span class="sr-only">Session end:</span>
-    <time>{formatInTimeZone(session.end, "Europe/Warsaw", "HH:mm")}</time>
-  </div>
-  -->
-
   <CodeHeart
     client:load
     mini={true}
@@ -97,45 +65,51 @@ const hasFooter = true;
     )
   }
 
-  <a href={session.slug && `/session/${session.slug}`} class="read-more">
+  <a href={session.slug ? `/session/${session.slug}` : '#'} class="read-more">
     <span class="sr-only">Read more</span>
   </a>
 </div>
 
 <style>
-  .session {
-
-    border: 1px solid transparent;
-    font-weight: bold;
+  .ep-session {
+    border: 1px solid var(--ep-border);
+    font-weight: 600;
     display: flex;
     flex-direction: column;
-
-    background-color: color-mix(
-      in srgb,
-      var(--color-body-background),
-      white 30%
-    );
+    background: var(--ep-surface-subtle);
     position: relative;
-
-    grid-template-areas:
-      "header header"
-      "time title"
-      "time footer";
-
-    grid-template-columns: 60px 1fr;
+    padding: 0.5rem 0.6rem;
+    gap: 0.15rem;
+    transition: border-color 0.2s, background 0.2s;
   }
 
   .room-info {
     display: block;
     text-align: center;
+    font-size: 0.72rem;
+    color: var(--ep-text-muted);
+    font-weight: 500;
 
     @media screen and (min-width: 800px) {
       display: none;
     }
   }
 
-  .session > header {
-    grid-area: header;
+  .ep-session > header {
+    padding: 0;
+    margin-bottom: 0.1rem;
+  }
+
+  .ep-session h2 {
+    font-family: 'Inter Tight', system-ui, sans-serif;
+    font-size: 0.82rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--ep-white);
+    margin: 0;
+    padding: 0;
+    height: auto;
+    margin-bottom: 0;
   }
 
   .read-more {
@@ -145,7 +119,12 @@ const hasFooter = true;
     bottom: 0;
     left: 0;
     z-index: 1;
+  }
 
+  .read-more:focus {
+    outline: 2px solid var(--ep-accent);
+    outline-offset: 2px;
+    border-radius: 6px;
   }
 
   footer :global(a) {
@@ -153,100 +132,64 @@ const hasFooter = true;
     z-index: 2;
   }
 
-  @media screen and (max-width: 800px) {
-    header {
-      /*text-align:right;*/
-    }
-    .session h2 {
-      padding: 0 8px;
-      margin: 0;
-    }
-
-    .session > .time {
-      grid-area: time;
-      padding-block: 8px;
-
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      /*border-right: 1px solid var(--color-text);*/
-      gap: 4px;
-
-      & .minus {
-        display: none;
-      }
-    }
-
-    .session > h2 {
-      grid-area: title;
-      padding-block: 0;
-    }
-
-    .session > footer {
-      grid-area: footer;
-    }
-
-    .session > div {
-      display: flex;
-    }
-  }
-
-  .session:has(.read-more[href]:focus) {
-    background-color: color-mix(
-      in srgb,
-      var(--color-body-background),
-      white 70%
-    );
-    border: 1px solid #33333366;
-  }
-
-  .session:hover {
-    background-color: color-mix(
-      in srgb,
-      var(--color-body-background),
-      white 50%
-    );
-    border: 1px solid #e9714d;
-  }
-
-
-  .time,
   footer {
-    font-size: 0.9em;
+    font-size: 0.75rem;
+    color: var(--ep-text-secondary);
+    margin-top: 0.2rem;
+    padding: 0;
   }
 
-  header,
-  .time,
-  footer,
-  h2 {
-    padding: 0.2em 0.5em;
+  @media screen and (max-width: 800px) {
+    .ep-session h2 {
+      padding: 0 0.5rem;
+      margin: 0;
+      font-size: 0.9rem;
+    }
   }
 
-  h2 {
-    margin-bottom: 1em;
-    height:100%;
+  .ep-session:has(.read-more[href]:focus) {
+    border-color: var(--ep-accent);
+    background: var(--ep-surface-medium);
   }
 
-  footer.has-speakers {
-    margin-top: 5px;
+  .ep-session:hover {
+    border-color: var(--ep-accent);
+    background: var(--ep-surface-medium);
   }
 
   header {
     text-transform: capitalize;
-    font-size: 0.8em;
+    font-size: 0.75em;
     font-weight: 500;
-  }
-
-  .beginner header {
-  }
-
-  .intermediate header {
-  }
-
-  .advanced header {
+    color: var(--ep-text-muted);
+    padding: 0;
+  }
+
+  .beginner {
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 4px,
+        rgba(50,180,50,0.2) 4px,
+        rgba(50,180,50,0.2) 6px
+      ),
+      var(--ep-surface-subtle);
+  }
+
+  .advanced {
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 4px,
+        rgba(200,50,50,0.2) 4px,
+        rgba(200,50,50,0.2) 6px
+      ),
+      var(--ep-surface-subtle);
   }
 
   .poster header {
-    text-align:center
+    text-align: center;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9652187d6..7be86dd8b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -11,6 +11,8 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
 import "@styles/tailwind.css";
 import "@styles/global.css";
 import "@styles/search.css";
+import "@styles/ep2026-theme.css";
+import "@styles/markdown.css";
 
 
 export interface Props {
@@ -39,6 +41,7 @@ const hideFooter = Astro.props.hideFooter ?? false;
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+
     </Fragment>
   </head>
   <body>
@@ -48,7 +51,7 @@ const hideFooter = Astro.props.hideFooter ?? false;
         </header>
       }
 
-      <main class="main" role="main">
+      <main class="main pt-28" role="main">
       <Offline />
         {currentPath !== "/" && (
           <Breadcrumbs
@@ -107,7 +110,6 @@ header {
 
 main {
   background-color: transparent;
-  padding-top: 0;
 }
 
 footer {
diff --git a/src/layouts/ScheduleLayout.astro b/src/layouts/ScheduleLayout.astro
index db744b309..8c7d204bd 100644
--- a/src/layouts/ScheduleLayout.astro
+++ b/src/layouts/ScheduleLayout.astro
@@ -1,8 +1,6 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import Section from "@ui/Section.astro";
-import Note from "@ui/Note.astro";
-import Headline from "@ui/Headline.astro"
 import { slugify } from '@utils/content';
 import InstallPWA from "@components/InstallPWA.astro";
 
@@ -18,61 +16,108 @@ const { title, description, headline } = Astro.props;
   <Fragment slot="head">
     <link rel="manifest" href="/manifest.json" />
     <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
-    <link rel="mask-icon" href="/maskable_icon.png" color="#f5e5d6">
-    <meta name="msapplication-TileColor" content="#f5e5d6">
-    <meta name="theme-color" content="#f5e5d6">
+    <link rel="mask-icon" href="/maskable_icon.png" color="#d4003a">
+    <meta name="msapplication-TileColor" content="#d4003a">
+    <meta name="theme-color" content="#080002">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=block" rel="stylesheet">
   </Fragment>
 
+  <div class="ep-sched-section">
+  <div class="ep-sched-inner">
   <InstallPWA />
   <Section>
-    <Headline as="h1"id={slugify(headline)} title={headline} />
+    <h1 class="ep-headline" id={slugify(headline)}><a href={`#${slugify(headline)}`} aria-label={`Jump to ${headline}`}>{headline}</a></h1>
 
-  <Note type="info" >Mark talks as favorites by opening their details and tapping the ❤️ icon. Your selections are saved locally and will only be visible on this device.</Note>
+  <div class="ep-note">💚 Mark talks as favorites by opening their details and tapping the ❤️ icon. Your selections are saved locally and will only be visible on this device.</div>
 
     <div class="layout-wrapper2">
       <slot />
     </div>
   </Section>
+  </div>
+  </div>
 </Layout>
 
 <style is:global>
+/* Dark theme for schedule pages */
+body {
+  background: var(--ep-bg) !important;
+  color: var(--ep-white);
+}
+
 .layout-wrapper2 > * {
   grid-column: 2;
 }
 
+/* Remove light theme background from body on schedule pages */
+body {
+  background-color: var(--color-primary) !important;
+}
+
+main {
+  background-color: transparent !important;
+}
+
+
+/* Unset Tailwind light theme on schedule pages */
+.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900,
+.text-gray-500, .text-gray-400 {
+  color: var(--ep-text-secondary) !important;
+}
+
+/* Nav items on dark background */
+header#navbar .text-primary {
+  color: var(--ep-text-primary) !important;
+}
+
+header#navbar .bg-\[\#1c294b\] {
+  background: var(--ep-surface-medium) !important;
+}
+
+/* Breadcrumbs dark theme */
+nav[aria-label="Breadcrumb"] .text-gray-900 {
+  color: var(--ep-white) !important;
+}
+
+nav[aria-label="Breadcrumb"] a {
+  color: var(--ep-link-color) !important;
+}
+
+/* Improve select appearance on dark */
+select {
+  background: var(--ep-surface-subtle);
+  color: var(--ep-white);
+  border: 1px solid var(--ep-border);
+  border-radius: 4px;
+  padding: 0.5rem;
+}
 
 @media screen and (min-width: 1281px) {
-  .layout-wrapper2 .schedule *{
-    font-size:1.2rem;
+  .schedule * {
+    font-size: 1.2rem;
     --header-height: 40px !important;
     --break: 10px !important;
   }
 
-  .layout-wrapper2 {
-    h2, .break {
-    font-size:1.2rem;
-    }
+  h2, .break {
+    font-size: 1.2rem;
   }
 }
 
 @media screen and (min-width: 1201px) {
-
-  .layout-wrapper2.scaled-up .schedule *{
-    font-size:1.4rem;
+  .layout-wrapper2.scaled-up .schedule * {
+    font-size: 1.4rem;
     --header-height: 60px !important;
     --break: 14px !important;
   }
-  .layout-wrapper2.scaled-up {
-    h2, .break {
-    font-size:1.4rem;
-    }
+  .layout-wrapper2.scaled-up h2, .layout-wrapper2.scaled-up .break {
+    font-size: 1.4rem;
   }
 }
 @media screen and (min-width: 1601px) {
   .maximize-btn {
-    visibility:initial;
+    visibility: initial;
   }
 }
 </style>
diff --git a/src/styles/ep2026-theme.css b/src/styles/ep2026-theme.css
new file mode 100644
index 000000000..bd5bef058
--- /dev/null
+++ b/src/styles/ep2026-theme.css
@@ -0,0 +1,474 @@
+/* ============================================================
+   EP2026 Design Theme
+   Ported from website-ep2026-new design system
+   ============================================================ */
+
+/* RESET & BASE */
+/* ============ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  /* Core brand */
+  /* ========== */
+  --ep-bg: #080002;
+  --ep-red: #d4003a;
+  --ep-red-on-dark: #ff1a4a;
+  --ep-indigo: #4a0018;
+  --ep-magenta: #800020;
+  --ep-accent: #f0c040;
+  --ep-white: #ffffff;
+  --ep-cream: #fff5f0;
+  --ep-dark2: #0e0004;
+  --ep-dark3: #0a0003;
+
+  /* RGB channel triples (for composable rgba) */
+  /* ========================================= */
+  --ep-accent-rgb: 240, 192, 64;
+  --ep-info: #5ab0e0;
+  --ep-info-rgb: 90, 176, 224;
+  --ep-w: 255, 255, 255;
+
+  /* White text levels */
+  /* ================= */
+  --ep-text-primary: rgba(255, 255, 255, 0.93);
+  --ep-text-secondary: rgba(255, 255, 255, 0.78);
+  --ep-text-muted: rgba(255, 255, 255, 0.7);
+  --ep-text-faint: rgba(255, 255, 255, 0.6);
+
+  /* White decorative (borders, surfaces) */
+  /* ==================================== */
+  --ep-border: rgba(255, 255, 255, 0.1);
+  --ep-border-strong: rgba(255, 255, 255, 0.15);
+  --ep-border-bright: rgba(255, 255, 255, 0.25);
+  --ep-surface-faint: rgba(255, 255, 255, 0.03);
+  --ep-surface-subtle: rgba(255, 255, 255, 0.05);
+  --ep-surface-medium: rgba(255, 255, 255, 0.08);
+
+  /* Black shadows */
+  /* ============= */
+  --ep-black-75: rgba(0, 0, 0, 0.75);
+  --ep-black-70: rgba(0, 0, 0, 0.7);
+  --ep-black-50: rgba(0, 0, 0, 0.5);
+  --ep-black-40: rgba(0, 0, 0, 0.4);
+  --ep-black-30: rgba(0, 0, 0, 0.3);
+  --ep-black-15: rgba(0, 0, 0, 0.15);
+
+  /* CTA red gradient */
+  /* ================ */
+  --ep-cta-red: #d62020;
+  --ep-cta-red-dark: #8a0020;
+  --ep-cta-mid: #a8002d;
+  --ep-cta-end: #700020;
+
+  /* CTA text on colored buttons */
+  /* =========================== */
+  --ep-cta-text: #0d1a2a;
+  --ep-cta-text-warm: #f0ede8;
+
+  /* Grays */
+  /* ===== */
+  --ep-gray-ee: #eeeeee;
+  --ep-gray-88: #888888;
+  --ep-gray-37: #374151;
+  --ep-gray-22: #222222;
+
+  /* Red / green accents */
+  /* =================== */
+  --ep-red-f0: #f04040;
+  --ep-red-cc: #cc3030;
+  --ep-green-2e: #2ecc71;
+  --ep-green-25: #25a85d;
+  --ep-green-light: #6fd66f;
+  --ep-red-light: #e07070;
+  --ep-green-1a: #1a5c2a;
+
+  /* Schedule room bg */
+  /* ================ */
+  --ep-sched-room-bg: #1e3456;
+
+  /* Section backgrounds */
+  /* =================== */
+  --ep-bg-section: #080f1a;
+  --ep-bg-section-alt: #070b14;
+  --ep-bg-dark: #0a0a1a;
+  --ep-bg-card: #3d1a2a;
+
+  /* Footer gradient */
+  /* =============== */
+  --ep-footer-g1: #0c1628;
+  --ep-footer-g2: #142744;
+  --ep-footer-g3: #1a1a3a;
+  --ep-footer-g4: #0f1a2e;
+
+  /* Overlay */
+  /* ======= */
+  --ep-overlay-dark: rgba(10, 10, 20, 0.95);
+
+  /* Links */
+  /* ===== */
+  --ep-link-color: var(--ep-accent);
+  --ep-link-hover: var(--ep-white);
+}
+
+/* Dark theme base styles */
+/* ====================== */
+body.ep2026-theme {
+  background: var(--ep-bg);
+  color: var(--ep-white);
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-size: 18px;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+.ep2026-theme h1,
+.ep2026-theme h2,
+.ep2026-theme h3 {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.ep2026-theme a {
+  color: var(--ep-link-color);
+  text-decoration: underline;
+}
+
+.ep2026-theme a:hover {
+  color: var(--ep-link-hover);
+}
+
+/* ============================================================
+   SCHEDULE DARK THEME
+   ============================================================ */
+
+/* Schedule section wrapper */
+.ep-sched-section {
+  background:
+    radial-gradient(circle, var(--ep-surface-medium) 1px, transparent 1px),
+    linear-gradient(
+      135deg,
+      var(--ep-footer-g1) 0%,
+      var(--ep-footer-g2) 40%,
+      var(--ep-footer-g3) 70%,
+      var(--ep-footer-g4) 100%
+    );
+  background-size:
+    24px 24px,
+    100% 100%;
+  color: var(--ep-white);
+}
+
+.ep-sched-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+/* Day title */
+.ep-sched-day-title {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-weight: 500;
+  font-size: clamp(
+    1.75rem,
+    1.75rem + (100vw - 20rem) * (2.25 - 1.75) / (45 - 20),
+    2.25rem
+  );
+  line-height: 1.25;
+  color: var(--ep-white);
+  margin-bottom: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* Room headers row */
+.ep-sched-room-headers {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.ep-sched-room-header {
+  background: var(--ep-sched-room-bg);
+  color: var(--ep-text-primary);
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-align: center;
+  padding: 0.5rem 0.3rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Schedule grid container */
+.ep-sched-grid {
+  display: grid;
+  gap: 4px;
+}
+
+/* Time slots */
+.ep-sched-time {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--ep-accent);
+  padding: 0.4rem 0.4rem 0.4rem 0;
+  text-align: right;
+  align-self: start;
+}
+
+.ep-sched-time h2 {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--ep-accent);
+  margin: 0;
+}
+
+/* Session cards */
+.ep-session {
+  background: var(--ep-surface-subtle);
+  border: 1px solid var(--ep-border);
+  border-radius: 6px;
+  padding: 0.5rem 0.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+  color: var(--ep-white);
+  font-family: "Inter Tight", system-ui, sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.ep-session:hover {
+  border-color: var(--ep-accent);
+  background: #0f1a2e !important;
+  z-index: 10;
+  transition:
+    border-color 0.1s ease-in-out,
+    background 0.1s ease-in-out;
+}
+
+.ep-session h2 {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--ep-white);
+  margin: 0;
+  padding: 0;
+}
+
+.ep-session header {
+  padding: 0;
+  margin-bottom: 0.1rem;
+}
+
+.ep-session .room-info {
+  font-size: 0.72rem;
+  color: var(--ep-text-muted);
+  font-weight: 500;
+  text-align: left;
+}
+
+.ep-session footer {
+  font-size: 0.75rem;
+  color: var(--ep-text-secondary);
+  margin-top: 0.2rem;
+  padding: 0;
+}
+
+.ep-session .read-more {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.ep-session .read-more:focus {
+  outline: 2px solid var(--ep-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* Session levels */
+.ep-session.beginner {
+  background:
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 4px,
+      rgba(50, 180, 50, 0.2) 4px,
+      rgba(50, 180, 50, 0.2) 6px
+    ),
+    var(--ep-surface-subtle);
+}
+
+.ep-session.advanced {
+  background:
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 4px,
+      rgba(200, 50, 50, 0.2) 4px,
+      rgba(200, 50, 50, 0.2) 6px
+    ),
+    var(--ep-surface-subtle);
+}
+
+/* Breaks */
+.ep-break {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: rgba(255, 150, 0, 0.06);
+  border: 2px solid rgba(255, 150, 0, 0.18);
+  border-radius: 6px;
+  padding: 0.4rem 0.8rem;
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-size: 0.85rem;
+  color: var(--ep-text-secondary);
+  font-weight: 500;
+}
+
+.ep-break.room-change {
+  background: var(--ep-surface-subtle);
+  border: 1px dashed var(--ep-border);
+  color: var(--ep-text-muted);
+  font-weight: 400;
+  font-size: 0.75rem;
+}
+
+.ep-break.day-end {
+  background: #2d3548;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 0.9rem;
+  margin: 0.5rem 0;
+  padding: 0.5rem 1rem;
+  text-align: center;
+}
+
+/* Posters section */
+.ep-posters {
+  text-align: center;
+  border: 2px solid var(--ep-accent);
+  border-radius: 6px;
+  background: rgba(var(--ep-accent-rgb), 0.04);
+}
+
+.ep-posters h2 {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 0.8rem;
+  color: var(--ep-accent);
+  padding: 0.4rem 0.5rem;
+  margin: 0;
+}
+
+/* Header sticky bar */
+.ep-sched-header {
+  position: sticky;
+  top: 0;
+  background: var(--ep-bg);
+  z-index: 20;
+}
+
+.ep-sched-header > div > div {
+  padding: 8px;
+  font-weight: 700;
+  font-size: 0.85rem;
+  color: var(--ep-white);
+  font-family: "Inter Tight", system-ui, sans-serif;
+}
+
+/* Scrollbar styling for dark theme */
+.ep2026-theme ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.ep2026-theme ::-webkit-scrollbar-track {
+  background: var(--ep-dark2);
+}
+
+.ep2026-theme ::-webkit-scrollbar-thumb {
+  background: var(--ep-surface-medium);
+  border-radius: 4px;
+}
+
+.ep2026-theme ::-webkit-scrollbar-thumb:hover {
+  background: var(--ep-border-strong);
+}
+
+/* Note / info box */
+.ep-note {
+  background: rgba(var(--ep-accent-rgb), 0.08);
+  border: 1px solid rgba(var(--ep-accent-rgb), 0.2);
+  border-radius: 6px;
+  padding: 0.8rem 1rem;
+  color: var(--ep-text-secondary);
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-size: 0.95rem;
+}
+
+/* Headline styles */
+.ep-headline {
+  font-family: "Inter Tight", system-ui, sans-serif;
+  font-weight: 500;
+  font-size: clamp(
+    2.25rem,
+    2.25rem + (100vw - 20rem) * (3 - 2.25) / (45 - 20),
+    3rem
+  );
+  line-height: 1.25;
+  color: var(--ep-white);
+  margin-bottom: 1.5rem;
+}
+
+.ep-headline a,
+.ep-sched-day-title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ep-headline a:hover,
+.ep-sched-day-title a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive adjustments */
+@media (max-width: 800px) {
+  .ep-sched-time h2 {
+    font-size: 1rem;
+    text-align: center;
+    color: var(--ep-text-secondary);
+  }
+
+  .ep-session h2 {
+    font-size: 0.9rem;
+  }
+
+  .ep-session .room-info {
+    font-size: 0.8rem;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ep-session {
+    transition: none;
+  }
+}