v4.1.0: add the egui workspace member and the roulette style spike

Phase 3 of the GUI plan. gui/ is a separate package that depends on the core with default features off, so egui never enters the TUI or server build graph. It carries the theme tokens and two embedded fonts (Open Sans OFL, Hack MIT), paints the felt, chips, cursor and wheel from RouletteView, and composes the persistent header with the betting sidebar.

The reference screen runs on demo state: arrow keys move the shared Cursor, clicks place chips, and SPIN animates a 2.4 s wheel that settles with the winning pocket under the pointer. No network until Phase 4.

Verified x86_64-pc-windows-gnu cross-compile. Measured on Linux at 1080p with llvmpipe: 6.0 MB binary (4.7 MB on Windows), 52 ms to window, 137 MB idle RSS, 0% idle CPU.

5 files changed, 1354 insertions, 0 deletions

diff --git a/gui/src/app.rs b/gui/src/app.rs
new file mode 100644
index 0000000..fde117a
--- /dev/null
+++ b/gui/src/app.rs
@@ -0,0 +1,587 @@
+//! The desktop shell: header, roulette table, and betting sidebar.
+//!
+//! Phase 3 is a style spike. The table is painted from a demo `RouletteView`
+//! built with the core's own types, but no command is sent yet: Phase 4 wires
+//! the transport and replaces the demo state with `ClientCore`.
+
+use std::f32::consts::TAU;
+
+use eframe::egui::{
+    self, Align, Button, CentralPanel, Color32, Context, Frame, Key, Layout, Margin, Panel,
+    RichText, Sense, Stroke, Ui, Vec2, vec2,
+};
+use zagan_bet::client::games::roulette::{Cursor, Direction};
+use zagan_bet::client::view::{RoulettePhase, RouletteView};
+use zagan_bet::roulette::{BetTarget, Bets, Outside, WHEEL, color as wheel_color};
+use zagan_bet::version::VERSION;
+
+use crate::{roulette, theme};
+
+const HEADER_HEIGHT: f32 = 64.0;
+const SIDEBAR_WIDTH: f32 = 336.0;
+const SPIN_SECONDS: f64 = 2.4;
+/// Demo winners, cycled: a red, a zero, a red, a black, a black, a black.
+const DEMO_TARGETS: [u8; 6] = [17, 0, 32, 26, 8, 11];
+const CHIP_SIZES: [u64; 4] = [10, 25, 50, 100];
+
+pub struct ZaganApp {
+    demo: Demo,
+}
+
+impl ZaganApp {
+    pub fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        theme::install(&cc.egui_ctx);
+        Self { demo: Demo::new() }
+    }
+}
+
+impl eframe::App for ZaganApp {
+    fn ui(&mut self, ui: &mut Ui, _frame: &mut eframe::Frame) {
+        self.demo.tick(ui.ctx());
+        self.demo.keys(ui.ctx());
+
+        Panel::top("header")
+            .exact_size(HEADER_HEIGHT)
+            .frame(
+                Frame::new()
+                    .fill(theme::SURFACE)
+                    .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 0)),
+            )
+            .show(ui, |ui| header(ui, &self.demo));
+
+        Panel::right("sidebar")
+            .exact_size(SIDEBAR_WIDTH)
+            .frame(
+                Frame::new()
+                    .fill(theme::SURFACE)
+                    .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 20)),
+            )
+            .show(ui, |ui| {
+                egui::ScrollArea::vertical()
+                    .auto_shrink([false, false])
+                    .show(ui, |ui| sidebar(ui, &mut self.demo));
+            });
+
+        CentralPanel::default()
+            .frame(
+                Frame::new()
+                    .fill(theme::BG)
+                    .inner_margin(Margin::same(theme::SPACE_5 as i8)),
+            )
+            .show(ui, |ui| table(ui, &mut self.demo));
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Header
+// ---------------------------------------------------------------------------
+
+fn header(ui: &mut Ui, demo: &Demo) {
+    ui.with_layout(Layout::left_to_right(Align::Center), |ui| {
+        let (mark, _) = ui.allocate_exact_size(Vec2::splat(10.0), Sense::hover());
+        ui.painter().rect_filled(mark, theme::RADIUS_SM, theme::WIN);
+        ui.add_space(theme::SPACE_2);
+        ui.label(
+            RichText::new("ZAGAN")
+                .font(theme::mono(18.0))
+                .color(theme::TEXT),
+        );
+        ui.label(
+            RichText::new("BET")
+                .font(theme::mono(18.0))
+                .color(theme::WIN),
+        );
+        ui.add_space(theme::SPACE_3);
+        pill(ui, &format!("v{VERSION}"), theme::TEXT_FAINT);
+        ui.add_space(theme::SPACE_1);
+        pill(ui, "PREVIEW", theme::GOLD);
+        ui.add_space(theme::SPACE_5);
+        connection_pill(ui, demo);
+
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            stat_block(
+                ui,
+                150.0,
+                "Balance",
+                &theme::money(demo.balance),
+                theme::mono(20.0),
+                theme::TEXT,
+                None,
+            );
+            ui.add_space(theme::SPACE_5);
+            stat_block(
+                ui,
+                190.0,
+                "Account",
+                demo.user,
+                theme::sans(theme::FONT_BODY),
+                theme::TEXT,
+                Some(demo.account),
+            );
+        });
+    });
+}
+
+fn pill(ui: &mut Ui, text: &str, color: Color32) {
+    Frame::new()
+        .fill(theme::SURFACE_RAISED)
+        .corner_radius(theme::RADIUS_SM)
+        .inner_margin(Margin::symmetric(theme::SPACE_2 as i8, 3))
+        .show(ui, |ui| {
+            ui.label(RichText::new(text).font(theme::mono(10.0)).color(color));
+        });
+}
+
+fn connection_pill(ui: &mut Ui, demo: &Demo) {
+    Frame::new()
+        .fill(theme::SURFACE_RAISED)
+        .corner_radius(theme::RADIUS_SM)
+        .inner_margin(Margin::symmetric(theme::SPACE_3 as i8, 5))
+        .show(ui, |ui| {
+            ui.horizontal(|ui| {
+                let (dot, _) = ui.allocate_exact_size(Vec2::splat(8.0), Sense::hover());
+                ui.painter().circle_filled(dot.center(), 3.0, theme::WIN);
+                ui.label(
+                    RichText::new("ONLINE")
+                        .font(theme::mono(10.0))
+                        .color(theme::WIN),
+                );
+                ui.label(
+                    RichText::new(demo.host)
+                        .font(theme::mono(12.0))
+                        .color(theme::TEXT_DIM),
+                );
+                ui.label(
+                    RichText::new(format!("{} ms", demo.ping_ms))
+                        .font(theme::mono(12.0))
+                        .color(theme::TEXT_FAINT),
+                );
+            });
+        });
+}
+
+/// A label over a value, right-aligned in a fixed slot so the header's right
+/// edge stays put as the numbers change.
+fn stat_block(
+    ui: &mut Ui,
+    width: f32,
+    label: &str,
+    value: &str,
+    value_font: egui::FontId,
+    value_color: Color32,
+    detail: Option<&str>,
+) {
+    ui.allocate_ui_with_layout(vec2(width, 44.0), Layout::top_down(Align::Max), |ui| {
+        ui.spacing_mut().item_spacing.y = 0.0;
+        ui.label(theme::label(label));
+        ui.label(RichText::new(value).font(value_font).color(value_color));
+        if let Some(detail) = detail {
+            ui.label(
+                RichText::new(detail)
+                    .font(theme::mono(10.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar
+// ---------------------------------------------------------------------------
+
+fn sidebar(ui: &mut Ui, demo: &mut Demo) {
+    ui.label(
+        RichText::new("Roulette")
+            .font(theme::sans(22.0))
+            .color(theme::TEXT),
+    );
+    ui.label(
+        RichText::new("European  ·  single zero")
+            .font(theme::sans(12.0))
+            .color(theme::TEXT_DIM),
+    );
+
+    ui.add_space(theme::SPACE_4);
+    let view = demo.view();
+    let wheel_size = ui.available_width().min(210.0);
+    ui.horizontal(|ui| {
+        let pad = ((ui.available_width() - wheel_size) * 0.5).max(0.0);
+        ui.add_space(pad);
+        roulette::wheel(ui, wheel_size, &view, demo.rotation);
+    });
+    ui.add_space(theme::SPACE_1);
+    result_line(ui, demo);
+
+    ui.add_space(theme::SPACE_3);
+    ui.separator();
+    ui.add_space(theme::SPACE_3);
+
+    ui.label(theme::label("Chip"));
+    ui.add_space(theme::SPACE_2);
+    ui.horizontal(|ui| {
+        ui.spacing_mut().item_spacing.x = theme::SPACE_2;
+        for amount in CHIP_SIZES {
+            if chip_button(ui, amount, demo.chip == amount).clicked() {
+                demo.chip = amount;
+            }
+        }
+    });
+
+    ui.add_space(theme::SPACE_3);
+    ui.label(theme::label("Bets"));
+    ui.add_space(theme::SPACE_1);
+    if demo.bets.chips.is_empty() {
+        ui.label(
+            RichText::new("No chips on the felt")
+                .font(theme::sans(12.0))
+                .color(theme::TEXT_FAINT),
+        );
+    } else {
+        for chip in &demo.bets.chips {
+            bet_row(ui, &roulette::target_name(&chip.target), chip.amount);
+        }
+    }
+
+    ui.add_space(theme::SPACE_3);
+    ui.separator();
+    ui.add_space(theme::SPACE_2);
+    bet_row(ui, "Total", demo.bets.total());
+
+    ui.add_space(theme::SPACE_3);
+    let spinning = demo.phase == RoulettePhase::Spinning;
+    let spin = Button::new(
+        RichText::new("SPIN")
+            .font(theme::mono(theme::FONT_MONO))
+            .color(theme::BG),
+    )
+    .fill(if spinning {
+        theme::WIN.gamma_multiply(0.45)
+    } else {
+        theme::WIN
+    })
+    .corner_radius(theme::RADIUS_MD)
+    .min_size(vec2(ui.available_width(), 44.0));
+    if ui.add_enabled(!spinning, spin).clicked() {
+        demo.start_spin(ui.ctx());
+    }
+
+    ui.add_space(theme::SPACE_2);
+    let clear = Button::new(
+        RichText::new("Clear bets")
+            .font(theme::sans(12.0))
+            .color(theme::TEXT_DIM),
+    )
+    .frame(false);
+    if ui
+        .add_enabled(!demo.bets.is_empty() && !spinning, clear)
+        .clicked()
+    {
+        demo.bets = Bets::default();
+    }
+}
+
+fn result_line(ui: &mut Ui, demo: &Demo) {
+    ui.horizontal(|ui| {
+        match (demo.phase, demo.number) {
+            (RoulettePhase::Result, Some(number)) => {
+                ui.label(theme::label("Result"));
+                ui.label(
+                    RichText::new(number.to_string())
+                        .font(theme::mono(15.0))
+                        .color(color_of(number)),
+                );
+                ui.label(
+                    RichText::new(wheel_color(number).to_uppercase())
+                        .font(theme::mono(12.0))
+                        .color(theme::TEXT_DIM),
+                );
+            }
+            (RoulettePhase::Spinning, _) => {
+                ui.label(
+                    RichText::new("SPINNING…")
+                        .font(theme::mono(12.0))
+                        .color(theme::GOLD),
+                );
+            }
+            _ => {
+                ui.label(
+                    RichText::new("Place your bets")
+                        .font(theme::sans(12.0))
+                        .color(theme::TEXT_DIM),
+                );
+            }
+        }
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            ui.label(
+                RichText::new(format!("{} chips", demo.bets.chips.len()))
+                    .font(theme::mono(10.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        });
+    });
+}
+
+fn bet_row(ui: &mut Ui, name: &str, amount: u64) {
+    ui.horizontal(|ui| {
+        ui.label(
+            RichText::new(name)
+                .font(theme::sans(13.0))
+                .color(theme::TEXT_DIM),
+        );
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            ui.label(
+                RichText::new(theme::money(amount as i64))
+                    .font(theme::mono(13.0))
+                    .color(theme::GOLD),
+            );
+        });
+    });
+}
+
+fn chip_button(ui: &mut Ui, amount: u64, selected: bool) -> egui::Response {
+    let (rect, response) = ui.allocate_exact_size(Vec2::splat(46.0), Sense::click());
+    let center = rect.center();
+    let radius = 20.0;
+    let painter = ui.painter();
+    if selected || response.hovered() {
+        painter.circle_stroke(
+            center,
+            radius + 3.0,
+            Stroke::new(if selected { 2.0 } else { 1.0 }, theme::ACCENT),
+        );
+    }
+    roulette::paint_chip(painter, center, radius, amount);
+    response
+}
+
+fn color_of(number: u8) -> Color32 {
+    match wheel_color(number) {
+        "red" => theme::ROULETTE_RED,
+        "green" => theme::WIN,
+        _ => theme::TEXT,
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Table
+// ---------------------------------------------------------------------------
+
+fn table(ui: &mut Ui, demo: &mut Demo) {
+    ui.horizontal(|ui| {
+        ui.label(
+            RichText::new("Table 01")
+                .font(theme::sans(15.0))
+                .color(theme::TEXT),
+        );
+        ui.label(
+            RichText::new("European  ·  single zero")
+                .font(theme::sans(12.0))
+                .color(theme::TEXT_DIM),
+        );
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            ui.label(
+                RichText::new("Limits 10 – 500 Kr")
+                    .font(theme::mono(12.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        });
+    });
+    ui.add_space(theme::SPACE_4);
+
+    let view = demo.view();
+    let strip_height = 104.0;
+    let available = ui.available_size();
+    let size = roulette::size_for(vec2(available.x, (available.y - strip_height).max(220.0)));
+    let side_pad = ((available.x - size.x) * 0.5).max(0.0);
+    let top_pad = ((available.y - size.y - strip_height) * 0.5).max(0.0);
+    let chip = demo.chip;
+    ui.add_space(top_pad);
+    ui.horizontal(|ui| {
+        ui.add_space(side_pad);
+        if let Some(target) = roulette::felt(ui, size, &view) {
+            demo.bets.add(target, chip);
+        }
+    });
+
+    ui.add_space(theme::SPACE_4);
+    ui.horizontal(|ui| {
+        ui.label(theme::label("Last"));
+        if demo.last.is_empty() {
+            ui.label(
+                RichText::new("No spins yet")
+                    .font(theme::sans(12.0))
+                    .color(theme::TEXT_FAINT),
+            );
+        }
+        for number in &demo.last {
+            let (dot, _) = ui.allocate_exact_size(Vec2::splat(26.0), Sense::hover());
+            roulette::paint_result_dot(ui.painter(), dot.center(), 11.0, *number);
+            ui.add_space(theme::SPACE_1);
+        }
+    });
+    ui.add_space(theme::SPACE_2);
+    ui.label(
+        RichText::new(
+            "Click a pocket to place a chip  ·  arrow keys move the cursor  ·  space spins",
+        )
+        .font(theme::sans(12.0))
+        .color(theme::TEXT_FAINT),
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Demo state
+// ---------------------------------------------------------------------------
+
+struct Spin {
+    started: f64,
+    from: f32,
+    delta: f32,
+    target: u8,
+}
+
+struct Demo {
+    bets: Bets,
+    cursor: Cursor,
+    chip: u64,
+    phase: RoulettePhase,
+    number: Option<u8>,
+    rotation: f32,
+    spin: Option<Spin>,
+    spins: usize,
+    last: Vec<u8>,
+    balance: i64,
+    host: &'static str,
+    ping_ms: u32,
+    user: &'static str,
+    account: &'static str,
+}
+
+impl Demo {
+    fn new() -> Self {
+        let mut bets = Bets::default();
+        bets.add(BetTarget::Straight { number: 17 }, 50);
+        bets.add(
+            BetTarget::Corner {
+                numbers: [17, 18, 20, 21],
+            },
+            25,
+        );
+        bets.add(BetTarget::Outside { kind: Outside::Red }, 25);
+
+        Self {
+            bets,
+            // A split with no chip on it, so the fine lattice cursor shows.
+            cursor: Cursor::Lattice { x: 18, y: 3 },
+            chip: 25,
+            phase: RoulettePhase::Placing,
+            number: None,
+            rotation: 0.0,
+            spin: None,
+            spins: 0,
+            last: Vec::new(),
+            balance: 1000,
+            host: "127.0.0.1:11525",
+            ping_ms: 41,
+            user: "alice",
+            account: "#4161673306",
+        }
+    }
+
+    fn view(&self) -> RouletteView {
+        RouletteView {
+            bet_amount: 10,
+            balance: Some(self.balance),
+            chip: self.chip,
+            bets: self.bets.clone(),
+            cursor: self.cursor,
+            phase: self.phase,
+            number: self.number,
+            color: self.number.map(|number| wheel_color(number).to_string()),
+            winnings: None,
+            error: None,
+        }
+    }
+
+    fn tick(&mut self, ctx: &Context) {
+        let now = ctx.input(|input| input.time);
+        let mut finished = None;
+        if let Some(spin) = &self.spin {
+            let t = (((now - spin.started) / SPIN_SECONDS) as f32).clamp(0.0, 1.0);
+            let eased = 1.0 - (1.0 - t).powi(3);
+            self.rotation = spin.from + spin.delta * eased;
+            if t >= 1.0 {
+                finished = Some(spin.target);
+            }
+            ctx.request_repaint();
+        }
+        if let Some(number) = finished {
+            self.spin = None;
+            self.phase = RoulettePhase::Result;
+            self.number = Some(number);
+            self.last.insert(0, number);
+            self.last.truncate(12);
+        }
+    }
+
+    fn keys(&mut self, ctx: &Context) {
+        if self.phase == RoulettePhase::Spinning {
+            return;
+        }
+        let (left, right, up, down) = ctx.input(|input| {
+            (
+                input.key_pressed(Key::ArrowLeft),
+                input.key_pressed(Key::ArrowRight),
+                input.key_pressed(Key::ArrowUp),
+                input.key_pressed(Key::ArrowDown),
+            )
+        });
+        for (pressed, direction) in [
+            (left, Direction::Left),
+            (right, Direction::Right),
+            (up, Direction::Up),
+            (down, Direction::Down),
+        ] {
+            if pressed {
+                self.cursor = self.cursor.moved(direction);
+            }
+        }
+        if ctx.memory(|memory| memory.focused().is_none()) {
+            if ctx.input(|input| input.key_pressed(Key::Enter)) {
+                if let Some(target) = self.cursor.target() {
+                    let chip = self.chip;
+                    self.bets.add(target, chip);
+                }
+            }
+            if ctx.input(|input| input.key_pressed(Key::Space)) {
+                self.start_spin(ctx);
+            }
+        }
+    }
+
+    fn start_spin(&mut self, ctx: &Context) {
+        if self.phase == RoulettePhase::Spinning {
+            return;
+        }
+        let target = DEMO_TARGETS[self.spins % DEMO_TARGETS.len()];
+        self.spins += 1;
+
+        let segment = TAU / WHEEL.len() as f32;
+        let index = WHEEL
+            .iter()
+            .position(|number| *number == target)
+            .unwrap_or(0) as f32;
+        let desired = -index * segment;
+        let delta = (desired - self.rotation).rem_euclid(TAU) + 3.0 * TAU;
+
+        self.spin = Some(Spin {
+            started: ctx.input(|input| input.time),
+            from: self.rotation,
+            delta,
+            target,
+        });
+        self.phase = RoulettePhase::Spinning;
+        self.number = None;
+        ctx.request_repaint();
+    }
+}
diff --git a/gui/src/lib.rs b/gui/src/lib.rs
new file mode 100644
index 0000000..e0f5bc9
--- /dev/null
+++ b/gui/src/lib.rs
@@ -0,0 +1,9 @@
+//! Desktop frontend for zagan-bet.
+//!
+//! The window is a thin shell over the shared `ClientCore` (Phase 4). This
+//! crate holds only presentation: the theme, the roulette table, and the app
+//! layout. It never enters the TUI or server build graph.
+
+pub mod app;
+pub mod roulette;
+pub mod theme;
diff --git a/gui/src/main.rs b/gui/src/main.rs
new file mode 100644
index 0000000..cf1c67d
--- /dev/null
+++ b/gui/src/main.rs
@@ -0,0 +1,25 @@
+//! Desktop frontend for zagan-bet.
+//!
+//! Phase 3 of `docs/GUI-PLAN.md`: the style spike. It owns the window and the
+//! roulette reference screen; the shared core and transport are wired in
+//! Phase 4.
+
+use zagan_bet_gui::app::ZaganApp;
+
+fn main() -> eframe::Result {
+    let options = eframe::NativeOptions {
+        viewport: eframe::egui::ViewportBuilder::default()
+            .with_title("Zagan-Bet")
+            .with_app_id("zagan-bet")
+            .with_inner_size([1440.0, 900.0])
+            .with_min_inner_size([1100.0, 720.0]),
+        renderer: eframe::Renderer::Glow,
+        ..Default::default()
+    };
+
+    eframe::run_native(
+        "Zagan-Bet",
+        options,
+        Box::new(|cc| Ok(Box::new(ZaganApp::new(cc)))),
+    )
+}
diff --git a/gui/src/roulette.rs b/gui/src/roulette.rs
new file mode 100644
index 0000000..22c46d6
--- /dev/null
+++ b/gui/src/roulette.rs
@@ -0,0 +1,522 @@
+//! The roulette table and wheel, painted from `RouletteView`.
+//!
+//! Geometry is the GUI's business: the core only says which number or region a
+//! chip or the cursor is on. Everything here is derived from that, so the two
+//! frontends can lay the same table out differently.
+
+use std::f32::consts::{FRAC_PI_2, TAU};
+
+use eframe::egui::{
+    Align2, Color32, CornerRadius, Painter, Pos2, Rect, Sense, Shape, Stroke, StrokeKind, Ui, Vec2,
+    pos2, vec2,
+};
+use zagan_bet::client::games::roulette::Cursor;
+use zagan_bet::client::view::{RoulettePhase, RouletteView};
+use zagan_bet::roulette::{BetTarget, Outside, WHEEL, color as wheel_color, is_red};
+
+use crate::theme;
+
+const COLUMNS: usize = 12;
+const ROWS: usize = 3;
+const OUTSIDE_ORDER: [Outside; 6] = [
+    Outside::Low,
+    Outside::Even,
+    Outside::Red,
+    Outside::Black,
+    Outside::Odd,
+    Outside::High,
+];
+
+const DOZEN_ROW: f32 = 0.72;
+const COLUMN_ROW: f32 = 0.55;
+const OUTSIDE_ROW: f32 = 0.62;
+const HEIGHT_UNITS: f32 = ROWS as f32 + DOZEN_ROW + COLUMN_ROW + OUTSIDE_ROW;
+const BOARD_PAD: f32 = 6.0;
+
+/// Largest table that fits in `available`, including its felt border.
+pub fn size_for(available: Vec2) -> Vec2 {
+    let inner = (available - Vec2::splat(BOARD_PAD * 2.0)).max(Vec2::ZERO);
+    let cell = (inner.x / (COLUMNS as f32 + 1.0))
+        .min(inner.y / HEIGHT_UNITS)
+        .max(1.0);
+    vec2((COLUMNS as f32 + 1.0) * cell, HEIGHT_UNITS * cell) + Vec2::splat(BOARD_PAD * 2.0)
+}
+
+/// The table painted at `size`; returns the target clicked this frame.
+pub fn felt(ui: &mut Ui, size: Vec2, view: &RouletteView) -> Option<BetTarget> {
+    let (rect, response) = ui.allocate_exact_size(size, Sense::click());
+    let felt = Felt::new(rect);
+    let hovered = response.hover_pos().and_then(|pos| felt.hit(pos));
+    let painter = ui.painter();
+
+    painter.rect_filled(rect, theme::RADIUS_LG, theme::FELT_DARK);
+
+    for number in 0..=36u8 {
+        let highlighted = hovered == Some(BetTarget::Straight { number });
+        felt.paint_number(painter, number, highlighted);
+    }
+    for index in 0..3 {
+        felt.paint_dozen(
+            painter,
+            index,
+            hovered == Some(BetTarget::Dozen { index: index as u8 }),
+        );
+    }
+    for index in 0..3 {
+        felt.paint_column(
+            painter,
+            index,
+            hovered == Some(BetTarget::Column { index: index as u8 }),
+        );
+    }
+    for (index, kind) in OUTSIDE_ORDER.iter().enumerate() {
+        felt.paint_outside(
+            painter,
+            index,
+            *kind,
+            hovered == Some(BetTarget::Outside { kind: *kind }),
+        );
+    }
+
+    if view.phase == RoulettePhase::Result {
+        if let Some(number) = view.number {
+            painter.rect_stroke(
+                felt.number_rect(number).shrink(2.0),
+                theme::RADIUS_SM,
+                Stroke::new(2.0, theme::GOLD),
+                StrokeKind::Inside,
+            );
+        }
+    }
+
+    felt.paint_cursor(painter, &view.cursor);
+
+    for chip in &view.bets.chips {
+        if let Some(center) = felt.anchor(&chip.target) {
+            paint_chip(painter, center, felt.cell * 0.26, chip.amount);
+        }
+    }
+
+    if response.clicked() { hovered } else { None }
+}
+
+struct Felt {
+    cell: f32,
+    origin: Pos2,
+}
+
+impl Felt {
+    fn new(board: Rect) -> Self {
+        let inner = board.shrink(BOARD_PAD);
+        Self {
+            cell: inner.width() / (COLUMNS as f32 + 1.0),
+            origin: inner.min,
+        }
+    }
+
+    fn number_rect(&self, number: u8) -> Rect {
+        debug_assert!(number <= 36);
+        if number == 0 {
+            return Rect::from_min_size(self.origin, vec2(self.cell, self.cell * ROWS as f32));
+        }
+        let column = ((number - 1) / 3) as f32;
+        let row = (2 - (number - 1) % 3) as f32;
+        Rect::from_min_size(
+            self.origin + vec2(self.cell * (1.0 + column), self.cell * row),
+            Vec2::splat(self.cell),
+        )
+    }
+
+    fn dozen_rect(&self, index: usize) -> Rect {
+        let y = self.origin.y + self.cell * ROWS as f32;
+        Rect::from_min_size(
+            pos2(self.origin.x + self.cell * (1.0 + 4.0 * index as f32), y),
+            vec2(self.cell * 4.0, self.cell * DOZEN_ROW),
+        )
+    }
+
+    fn column_rect(&self, index: usize) -> Rect {
+        let y = self.origin.y + self.cell * (ROWS as f32 + DOZEN_ROW);
+        Rect::from_min_size(
+            pos2(self.origin.x + self.cell * (1.0 + index as f32), y),
+            vec2(self.cell, self.cell * COLUMN_ROW),
+        )
+    }
+
+    fn outside_rect(&self, index: usize) -> Rect {
+        let y = self.origin.y + self.cell * (ROWS as f32 + DOZEN_ROW + COLUMN_ROW);
+        Rect::from_min_size(
+            pos2(self.origin.x + self.cell * (1.0 + 2.0 * index as f32), y),
+            vec2(self.cell * 2.0, self.cell * OUTSIDE_ROW),
+        )
+    }
+
+    /// Where a chip sits for this target.
+    fn anchor(&self, target: &BetTarget) -> Option<Pos2> {
+        Some(match target {
+            BetTarget::Straight { number } => self.number_rect(*number).center(),
+            BetTarget::Split { a, b } => {
+                let a = self.number_rect(*a).center();
+                let b = self.number_rect(*b).center();
+                pos2((a.x + b.x) * 0.5, (a.y + b.y) * 0.5)
+            }
+            BetTarget::Corner { numbers } => {
+                let mut sum = Vec2::ZERO;
+                for number in numbers {
+                    sum += self.number_rect(*number).center().to_vec2();
+                }
+                (sum / numbers.len() as f32).to_pos2()
+            }
+            BetTarget::Dozen { index } => self.dozen_rect(*index as usize).center(),
+            BetTarget::Column { index } => self.column_rect(*index as usize).center(),
+            BetTarget::Outside { kind } => {
+                let index = OUTSIDE_ORDER
+                    .iter()
+                    .position(|candidate| candidate == kind)?;
+                self.outside_rect(index).center()
+            }
+        })
+    }
+
+    /// The fine-grid point the cursor occupies over the numbers.
+    fn lattice(&self, x: usize, y: usize) -> Pos2 {
+        pos2(
+            self.origin.x + self.cell * (1.0 + x as f32 * 0.5),
+            self.origin.y + self.cell * (y as f32 * 0.5),
+        )
+    }
+
+    fn hit(&self, pos: Pos2) -> Option<BetTarget> {
+        for number in 0..=36u8 {
+            if self.number_rect(number).contains(pos) {
+                return Some(BetTarget::Straight { number });
+            }
+        }
+        for index in 0..3usize {
+            if self.dozen_rect(index).contains(pos) {
+                return Some(BetTarget::Dozen { index: index as u8 });
+            }
+            if self.column_rect(index).contains(pos) {
+                return Some(BetTarget::Column { index: index as u8 });
+            }
+        }
+        for (index, kind) in OUTSIDE_ORDER.iter().enumerate() {
+            if self.outside_rect(index).contains(pos) {
+                return Some(BetTarget::Outside { kind: *kind });
+            }
+        }
+        None
+    }
+
+    fn paint_number(&self, painter: &Painter, number: u8, hovered: bool) {
+        let rect = self.number_rect(number);
+        let fill = if number == 0 {
+            theme::ROULETTE_ZERO
+        } else if is_red(number) {
+            theme::ROULETTE_RED
+        } else {
+            theme::ROULETTE_BLACK
+        };
+        painter.rect_filled(rect, CornerRadius::ZERO, fill);
+        painter.rect_stroke(
+            rect,
+            CornerRadius::ZERO,
+            Stroke::new(1.0, theme::FELT_LINE),
+            StrokeKind::Inside,
+        );
+        if hovered {
+            painter.rect_filled(
+                rect,
+                CornerRadius::ZERO,
+                Color32::WHITE.gamma_multiply(0.10),
+            );
+        }
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            number,
+            theme::mono(self.number_font()),
+            theme::FELT_TEXT,
+        );
+    }
+
+    fn paint_dozen(&self, painter: &Painter, index: usize, hovered: bool) {
+        let rect = self.dozen_rect(index);
+        self.paint_region(painter, rect, hovered);
+        let label = match index {
+            0 => "1st 12",
+            1 => "2nd 12",
+            _ => "3rd 12",
+        };
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            label,
+            theme::sans(self.label_font()),
+            theme::FELT_TEXT,
+        );
+    }
+
+    fn paint_column(&self, painter: &Painter, index: usize, hovered: bool) {
+        let rect = self.column_rect(index);
+        self.paint_region(painter, rect, hovered);
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            "2:1",
+            theme::sans(self.label_font()),
+            theme::FELT_TEXT,
+        );
+    }
+
+    fn paint_outside(&self, painter: &Painter, index: usize, kind: Outside, hovered: bool) {
+        let rect = self.outside_rect(index);
+        self.paint_region(painter, rect, hovered);
+        let color = match kind {
+            Outside::Red => theme::ROULETTE_RED,
+            Outside::Black => theme::TEXT_DIM,
+            _ => theme::FELT_TEXT,
+        };
+        painter.text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            kind.label(),
+            theme::sans(self.label_font()),
+            color,
+        );
+    }
+
+    fn paint_region(&self, painter: &Painter, rect: Rect, hovered: bool) {
+        painter.rect_filled(rect, CornerRadius::ZERO, theme::FELT);
+        painter.rect_stroke(
+            rect,
+            CornerRadius::ZERO,
+            Stroke::new(1.0, theme::FELT_LINE),
+            StrokeKind::Inside,
+        );
+        if hovered {
+            painter.rect_filled(
+                rect,
+                CornerRadius::ZERO,
+                Color32::WHITE.gamma_multiply(0.10),
+            );
+        }
+    }
+
+    fn paint_cursor(&self, painter: &Painter, cursor: &Cursor) {
+        let stroke = Stroke::new(2.0, theme::ACCENT);
+        match cursor {
+            Cursor::Zero => outline(painter, self.number_rect(0), stroke),
+            Cursor::Lattice { x, y } => {
+                for number in cursor.numbers() {
+                    painter.rect_filled(
+                        self.number_rect(number),
+                        CornerRadius::ZERO,
+                        theme::ACCENT.gamma_multiply(0.14),
+                    );
+                }
+                let point = self.lattice(*x, *y);
+                painter.circle_filled(point, self.cell * 0.05, theme::ACCENT);
+                painter.circle_stroke(point, self.cell * 0.14, stroke);
+            }
+            Cursor::Dozen(index) => outline(painter, self.dozen_rect(*index), stroke),
+            Cursor::Column(index) => outline(painter, self.column_rect(*index), stroke),
+            Cursor::Outside(index) => outline(painter, self.outside_rect(*index), stroke),
+        }
+    }
+
+    fn number_font(&self) -> f32 {
+        (self.cell * 0.40).clamp(12.0, 22.0)
+    }
+
+    fn label_font(&self) -> f32 {
+        (self.cell * 0.24).clamp(10.0, 15.0)
+    }
+}
+
+fn outline(painter: &Painter, rect: Rect, stroke: Stroke) {
+    painter.rect_stroke(
+        rect.shrink(1.0),
+        theme::RADIUS_SM,
+        stroke,
+        StrokeKind::Inside,
+    );
+}
+
+/// A single chip, also used by the sidebar's chip tray.
+pub fn paint_chip(painter: &Painter, center: Pos2, radius: f32, amount: u64) {
+    let fill = chip_color(amount);
+    painter.circle_filled(center, radius, fill);
+    painter.circle_stroke(
+        center,
+        radius - radius * 0.18,
+        Stroke::new(radius * 0.10, Color32::WHITE.gamma_multiply(0.55)),
+    );
+    let text_color = if amount <= 10 {
+        theme::BG
+    } else {
+        Color32::WHITE
+    };
+    painter.text(
+        center,
+        Align2::CENTER_CENTER,
+        amount,
+        theme::mono(radius * 0.85),
+        text_color,
+    );
+}
+
+/// Colour per denomination, as a chip tray would be stocked.
+pub fn chip_color(amount: u64) -> Color32 {
+    match amount {
+        0..=10 => Color32::from_rgb(0xd9, 0xd3, 0xc7),
+        11..=25 => Color32::from_rgb(0x3f, 0x7f, 0xd1),
+        26..=50 => Color32::from_rgb(0xc9, 0x4b, 0x4b),
+        _ => Color32::from_rgb(0x3a, 0x9d, 0x5d),
+    }
+}
+
+fn segment_color(number: u8) -> Color32 {
+    match wheel_color(number) {
+        "red" => theme::ROULETTE_RED,
+        "green" => theme::ROULETTE_ZERO,
+        _ => Color32::from_rgb(0x2b, 0x35, 0x3f),
+    }
+}
+
+/// Number currently under the pointer for this wheel rotation.
+pub fn number_under(rotation: f32) -> u8 {
+    let segment = TAU / WHEEL.len() as f32;
+    let index = (-rotation / segment).round() as i64;
+    WHEEL[index.rem_euclid(WHEEL.len() as i64) as usize]
+}
+
+/// The wheel dial: 37 coloured pockets, a fixed pointer, and the number under
+/// it. `rotation` is in radians.
+pub fn wheel(ui: &mut Ui, diameter: f32, view: &RouletteView, rotation: f32) {
+    let (rect, _) = ui.allocate_exact_size(Vec2::splat(diameter), Sense::hover());
+    let painter = ui.painter();
+    let center = rect.center();
+    let radius = diameter * 0.5;
+
+    painter.circle_filled(center, radius, theme::SURFACE_RAISED);
+    painter.circle_stroke(center, radius - 1.0, Stroke::new(1.0, theme::LINE));
+
+    let segment = TAU / WHEEL.len() as f32;
+    let ring = radius * 0.80;
+    let dot = (radius * 0.072).max(2.0);
+    painter.circle_stroke(
+        center,
+        ring,
+        Stroke::new(dot * 2.0, Color32::from_rgb(0x1f, 0x28, 0x31)),
+    );
+    for (index, number) in WHEEL.iter().enumerate() {
+        let angle = -FRAC_PI_2 + rotation + index as f32 * segment;
+        let pocket = center + vec2(angle.cos(), angle.sin()) * ring;
+        let winning = view.phase == RoulettePhase::Result && view.number == Some(*number);
+        let stroke = if winning {
+            Stroke::new(2.0, theme::GOLD)
+        } else {
+            Stroke::new(1.0, Color32::from_rgb(0x3a, 0x46, 0x52))
+        };
+        painter.circle(
+            pocket,
+            if winning { dot * 1.25 } else { dot },
+            segment_color(*number),
+            stroke,
+        );
+    }
+
+    // A fixed pointer at the top, marking the winning pocket.
+    let tip = center + vec2(0.0, -radius + dot * 0.30);
+    painter.add(Shape::convex_polygon(
+        vec![
+            tip,
+            tip + vec2(-dot * 0.9, -dot * 1.4),
+            tip + vec2(dot * 0.9, -dot * 1.4),
+        ],
+        theme::TEXT,
+        Stroke::NONE,
+    ));
+
+    let inner = radius * 0.52;
+    painter.circle_filled(center, inner, theme::SURFACE);
+    painter.circle_stroke(center, inner, Stroke::new(1.0, theme::LINE));
+
+    let displayed = match view.phase {
+        RoulettePhase::Result => view.number,
+        RoulettePhase::Spinning => Some(number_under(rotation)),
+        RoulettePhase::Placing => None,
+    };
+    match displayed {
+        Some(number) => {
+            let color = match wheel_color(number) {
+                "red" => theme::ROULETTE_RED,
+                "green" => theme::WIN,
+                _ => theme::TEXT,
+            };
+            painter.text(
+                center,
+                Align2::CENTER_CENTER,
+                number,
+                theme::mono(inner * 0.85),
+                color,
+            );
+        }
+        None => {
+            painter.text(
+                center,
+                Align2::CENTER_CENTER,
+                "—",
+                theme::mono(inner * 0.55),
+                theme::TEXT_FAINT,
+            );
+        }
+    }
+}
+
+/// "Straight 17", "Corner 17/18/20/21", "Red".
+pub fn target_name(target: &BetTarget) -> String {
+    match target {
+        BetTarget::Straight { number } => format!("Straight {number}"),
+        BetTarget::Split { a, b } => format!("Split {a}/{b}"),
+        BetTarget::Corner { numbers } => format!(
+            "Corner {}/{}/{}/{}",
+            numbers[0], numbers[1], numbers[2], numbers[3]
+        ),
+        BetTarget::Dozen { index } => match index {
+            0 => "1st 12".to_string(),
+            1 => "2nd 12".to_string(),
+            _ => "3rd 12".to_string(),
+        },
+        BetTarget::Column { index } => format!("Column {}", index + 1),
+        BetTarget::Outside { kind } => title_case(kind.label()),
+    }
+}
+
+fn title_case(text: &str) -> String {
+    let mut characters = text.chars();
+    match characters.next() {
+        Some(first) => {
+            first.to_uppercase().collect::<String>() + &characters.as_str().to_lowercase()
+        }
+        None => String::new(),
+    }
+}
+
+/// Small coloured dot for a result strip.
+pub fn paint_result_dot(painter: &Painter, center: Pos2, radius: f32, number: u8) {
+    let color = match wheel_color(number) {
+        "red" => theme::ROULETTE_RED,
+        "green" => theme::ROULETTE_ZERO,
+        _ => theme::ROULETTE_BLACK,
+    };
+    painter.circle_filled(center, radius, color);
+    painter.text(
+        center,
+        Align2::CENTER_CENTER,
+        number,
+        theme::mono(radius * 0.95),
+        theme::FELT_TEXT,
+    );
+}
diff --git a/gui/src/theme.rs b/gui/src/theme.rs
new file mode 100644
index 0000000..9270aa6
--- /dev/null
+++ b/gui/src/theme.rs
@@ -0,0 +1,211 @@
+//! Look and feel for the desktop frontend.
+//!
+//! The palette is derived from the terminal client's ANSI scheme so the two
+//! frontends read as the same product: near-black ground, low-contrast panels,
+//! cyan for focus, and the felt green reserved for the roulette table.
+//!
+//! egui's defaults are a debug tool's palette. Every colour, size and corner
+//! used by the app comes from this module; widgets never pick their own.
+
+use std::sync::Arc;
+
+use eframe::egui::style::WidgetVisuals;
+use eframe::egui::{
+    self, Color32, Context, CornerRadius, FontData, FontDefinitions, FontFamily, FontId, Margin,
+    RichText, Stroke, TextStyle, Theme, Visuals,
+};
+
+// ---------------------------------------------------------------------------
+// Colour tokens
+// ---------------------------------------------------------------------------
+
+/// Window ground. Everything else sits above this.
+pub const BG: Color32 = Color32::from_rgb(0x0a, 0x0e, 0x12);
+/// Cards, header, sidebar.
+pub const SURFACE: Color32 = Color32::from_rgb(0x11, 0x17, 0x1d);
+/// Inputs, pills, raised rows.
+pub const SURFACE_RAISED: Color32 = Color32::from_rgb(0x17, 0x1f, 0x27);
+/// Hover state.
+pub const SURFACE_HOVER: Color32 = Color32::from_rgb(0x1d, 0x27, 0x31);
+/// Hairlines and table borders.
+pub const LINE: Color32 = Color32::from_rgb(0x24, 0x2e, 0x38);
+/// Primary text.
+pub const TEXT: Color32 = Color32::from_rgb(0xd9, 0xe2, 0xea);
+/// Labels and secondary text.
+pub const TEXT_DIM: Color32 = Color32::from_rgb(0x8a, 0x98, 0xa6);
+/// Disabled text, captions.
+pub const TEXT_FAINT: Color32 = Color32::from_rgb(0x5b, 0x67, 0x73);
+/// Focus, cursor, selection.
+pub const ACCENT: Color32 = Color32::from_rgb(0x4f, 0xb8, 0xc9);
+/// Wins, "online", the spin button.
+pub const WIN: Color32 = Color32::from_rgb(0x4e, 0xc2, 0x7b);
+/// Losses and errors.
+pub const LOSS: Color32 = Color32::from_rgb(0xe0, 0x5a, 0x5a);
+/// Chips and pending bets.
+pub const GOLD: Color32 = Color32::from_rgb(0xe0, 0xb6, 0x4a);
+
+/// Roulette felt. Never used outside the table.
+pub const FELT: Color32 = Color32::from_rgb(0x0d, 0x5c, 0x39);
+pub const FELT_DARK: Color32 = Color32::from_rgb(0x09, 0x47, 0x2c);
+pub const FELT_LINE: Color32 = Color32::from_rgb(0x1f, 0x7d, 0x52);
+pub const FELT_TEXT: Color32 = Color32::from_rgb(0xec, 0xf7, 0xf0);
+pub const ROULETTE_RED: Color32 = Color32::from_rgb(0xb0, 0x31, 0x3a);
+pub const ROULETTE_BLACK: Color32 = Color32::from_rgb(0x15, 0x1b, 0x21);
+pub const ROULETTE_ZERO: Color32 = Color32::from_rgb(0x10, 0x6b, 0x45);
+
+// ---------------------------------------------------------------------------
+// Spacing, radius, type scale
+// ---------------------------------------------------------------------------
+
+pub const SPACE_1: f32 = 4.0;
+pub const SPACE_2: f32 = 8.0;
+pub const SPACE_3: f32 = 12.0;
+pub const SPACE_4: f32 = 16.0;
+pub const SPACE_5: f32 = 24.0;
+
+pub const RADIUS_SM: CornerRadius = CornerRadius::same(4);
+pub const RADIUS_MD: CornerRadius = CornerRadius::same(8);
+pub const RADIUS_LG: CornerRadius = CornerRadius::same(12);
+
+pub const FONT_BODY: f32 = 14.0;
+pub const FONT_SMALL: f32 = 12.0;
+pub const FONT_LABEL: f32 = 11.0;
+pub const FONT_TITLE: f32 = 24.0;
+pub const FONT_MONO: f32 = 16.0;
+
+// ---------------------------------------------------------------------------
+// Fonts
+// ---------------------------------------------------------------------------
+
+/// Open Sans, SIL OFL 1.1. See `assets/fonts/OFL-OpenSans.txt`.
+pub const FONT_SANS_BYTES: &[u8] = include_bytes!("../assets/fonts/OpenSans-Regular.ttf");
+/// Hack, MIT. See `assets/fonts/LICENSE-Hack.md`.
+pub const FONT_MONO_BYTES: &[u8] = include_bytes!("../assets/fonts/Hack-Regular.ttf");
+
+pub fn sans(size: f32) -> FontId {
+    FontId::new(size, FontFamily::Proportional)
+}
+
+pub fn mono(size: f32) -> FontId {
+    FontId::new(size, FontFamily::Monospace)
+}
+
+/// A small uppercase label, the terminal's dim section headers.
+pub fn label(text: &str) -> RichText {
+    RichText::new(text.to_uppercase())
+        .font(mono(FONT_LABEL))
+        .color(TEXT_DIM)
+}
+
+/// Group an amount in threes: 1234567 -> "1 234 567".
+pub fn group_digits(amount: i64) -> String {
+    let negative = amount < 0;
+    let digits = amount.unsigned_abs().to_string();
+    let mut grouped = String::with_capacity(digits.len() + digits.len() / 3);
+    for (index, character) in digits.chars().enumerate() {
+        if index > 0 && (digits.len() - index) % 3 == 0 {
+            grouped.push(' ');
+        }
+        grouped.push(character);
+    }
+    if negative {
+        format!("-{grouped}")
+    } else {
+        grouped
+    }
+}
+
+/// `1000` -> `"1 000 Kr"`.
+pub fn money(amount: i64) -> String {
+    format!("{} Kr", group_digits(amount))
+}
+
+// ---------------------------------------------------------------------------
+// Installation
+// ---------------------------------------------------------------------------
+
+/// Install the embedded fonts and the dark style. Call once, from the app
+/// constructor, before the first frame.
+pub fn install(ctx: &Context) {
+    let mut fonts = FontDefinitions::default();
+    fonts.font_data.insert(
+        "zagan-sans".to_owned(),
+        Arc::new(FontData::from_static(FONT_SANS_BYTES)),
+    );
+    fonts.font_data.insert(
+        "zagan-mono".to_owned(),
+        Arc::new(FontData::from_static(FONT_MONO_BYTES)),
+    );
+    fonts
+        .families
+        .get_mut(&FontFamily::Proportional)
+        .expect("proportional family exists")
+        .insert(0, "zagan-sans".to_owned());
+    fonts
+        .families
+        .get_mut(&FontFamily::Monospace)
+        .expect("monospace family exists")
+        .insert(0, "zagan-mono".to_owned());
+    ctx.set_fonts(fonts);
+
+    ctx.set_theme(Theme::Dark);
+    let mut style = (*ctx.global_style()).clone();
+    style.text_styles = [
+        (TextStyle::Heading, sans(FONT_TITLE)),
+        (TextStyle::Body, sans(FONT_BODY)),
+        (TextStyle::Button, sans(FONT_BODY)),
+        (TextStyle::Small, sans(FONT_SMALL)),
+        (TextStyle::Monospace, mono(FONT_MONO)),
+    ]
+    .into();
+    style.spacing.item_spacing = egui::vec2(SPACE_2, SPACE_2);
+    style.spacing.button_padding = egui::vec2(SPACE_3, SPACE_2);
+    style.spacing.interact_size = egui::vec2(36.0, 32.0);
+    style.spacing.window_margin = Margin::same(SPACE_3 as i8);
+    style.visuals = visuals();
+    ctx.set_global_style(style);
+}
+
+fn widget(
+    bg_fill: Color32,
+    bg_stroke: Color32,
+    fg: Color32,
+    corner_radius: CornerRadius,
+) -> WidgetVisuals {
+    WidgetVisuals {
+        bg_fill,
+        weak_bg_fill: bg_fill,
+        bg_stroke: Stroke::new(1.0, bg_stroke),
+        corner_radius,
+        fg_stroke: Stroke::new(1.0, fg),
+        expansion: 0.0,
+    }
+}
+
+fn visuals() -> Visuals {
+    let mut visuals = Visuals::dark();
+    visuals.override_text_color = Some(TEXT);
+    visuals.panel_fill = BG;
+    visuals.window_fill = SURFACE;
+    visuals.window_stroke = Stroke::new(1.0, LINE);
+    visuals.window_corner_radius = RADIUS_LG;
+    visuals.extreme_bg_color = BG;
+    visuals.faint_bg_color = SURFACE_RAISED;
+    visuals.code_bg_color = SURFACE_RAISED;
+    visuals.hyperlink_color = ACCENT;
+    visuals.warn_fg_color = GOLD;
+    visuals.error_fg_color = LOSS;
+    visuals.selection.bg_fill = ACCENT.gamma_multiply(0.30);
+    visuals.selection.stroke = Stroke::new(1.0, ACCENT);
+    visuals.widgets.noninteractive = widget(SURFACE, LINE, TEXT, RADIUS_MD);
+    visuals.widgets.inactive = widget(SURFACE_RAISED, LINE, TEXT, RADIUS_MD);
+    visuals.widgets.hovered = widget(SURFACE_HOVER, ACCENT.gamma_multiply(0.75), TEXT, RADIUS_MD);
+    visuals.widgets.active = widget(
+        ACCENT.gamma_multiply(0.25),
+        ACCENT,
+        Color32::WHITE,
+        RADIUS_MD,
+    );
+    visuals.widgets.open = visuals.widgets.active;
+    visuals
+}