<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="robots" content="noindex, nofollow">
<title>Claude Code sessions</title>
<script>
// Runs before the first paint so the chosen theme does not flicker:
// the saved preference first, otherwise the system one.
(function () {
var saved = null;
try { saved = localStorage.getItem('cl-theme'); } catch (e) {}
var dark = saved ? saved === 'dark'
: matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = dark ? 'dark' : 'light';
})();
</script>
<style>
/* One palette per theme and nothing else: data-theme is set by the script
above before painting, so there is no need to repeat the values inside an
@media. The toolbar button toggles that same attribute. */
:root, :root[data-theme="light"] {
--ground: #EDEEF2;
--surface: #FFFFFF;
--raised: #F6F7F9;
--ink: #14161C;
--ink-soft: #3D4250;
--muted: #6A6F7E;
--faint: #9AA0AE;
--line: #DCDEE5;
--line-soft:#E7E9EE;
--amber: #A85A16;
--amber-lo: #C98A47;
--amber-bg: rgba(168, 90, 22, 0.09);
--scrim: rgba(20, 22, 28, .38);
--shadow: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px -12px rgba(20, 22, 28, .18);
--shadow-lg:0 24px 70px -20px rgba(20, 22, 28, .45);
--focus: #2C6FD1;
--sans: ui-sans-serif, system-ui,