:root {
      color-scheme: dark;
      --background: #222225;
      --navigation: #18181b;
      --surface: #28282d;
      --border: #323237;
      --accent: #ff0026;
      --text: #f1f1f4;
      --muted: #a6a6b0;
      --icon: #a5a5af;
      --hover: #242428;
      --rail-width: 80px;
      --menu-width: 264px;
      --header-height: 76px;
      --radius: 9px;
      --space: 8px;
      --font: 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;
      --transition: 180ms ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { min-width: 320px; background: var(--background); }
    body { margin: 0; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
    body.menu-open { overflow: hidden; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    a { color: inherit; text-decoration: none; }
    button { color: inherit; }
    svg { display: block; flex-shrink: 0; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
    .skip-link { position: fixed; top: 12px; left: 94px; z-index: 100; padding: 13px 18px; border-radius: var(--radius); background: var(--text); color: var(--navigation); transform: translateY(-180%); }
    .skip-link:focus { transform: translateY(0); }

    /* The rail has a constant reserved width. Expansion never moves the page. */
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: var(--rail-width); background: var(--navigation); border-right: 1px solid var(--border); transition: width var(--transition), box-shadow var(--transition); }
    .sidebar:is(:hover, :has(:focus-visible)) { width: var(--menu-width); box-shadow: 18px 0 36px #00000020; }
    .brand-area { flex: 0 0 132px; display: flex; justify-content: center; padding-top: 24px; overflow: hidden; }
    .brand-link { display: flex; align-items: center; flex-direction: column; gap: 13px; width: 100%; height: fit-content; border-radius: var(--radius); }
    .brand-link:focus-visible { outline-offset: -6px; }
    .brand-logo { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
    .brand-label { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.55px; white-space: nowrap; opacity: 0; transition: opacity 110ms ease; }
    .sidebar:is(:hover, :has(:focus-visible)) .brand-label { opacity: 1; transition-delay: 65ms; }

    .primary-navigation { flex: 1; min-height: 0; padding: 0 14px 16px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #414147 transparent; }
    .nav-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .nav-link { position: relative; display: flex; align-items: center; gap: 19px; min-height: 48px; width: 100%; padding: 0 15px; border-radius: var(--radius); color: var(--icon); transition: background var(--transition), color var(--transition); }
    .nav-link:hover { background: var(--hover); color: var(--text); }
    .nav-link:focus-visible { outline-offset: -2px; }
    .nav-link svg { width: 22px; height: 22px; }
    .nav-label { font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 100ms ease; }
    .sidebar:is(:hover, :has(:focus-visible)) .nav-label { opacity: 1; transition-delay: 65ms; }
    .nav-link[aria-current="page"] { color: var(--text); }
    .nav-link[aria-current="page"] svg { color: var(--accent); }
    .settings-navigation { flex: 0 0 auto; padding: 16px 14px 20px; border-top: 1px solid var(--border); }

    .topbar { position: fixed; inset: 0 0 auto var(--rail-width); z-index: 20; display: flex; align-items: center; gap: 16px; height: var(--header-height); padding: 0 clamp(24px, 3.1vw, 48px); background: var(--navigation); border-bottom: 1px solid var(--border); }
    .topbar-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.25px; overflow-wrap: anywhere; }
    .topbar-icon { width: 18px; height: 18px; color: var(--icon); }
    .install-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-width: 44px; min-height: 44px; margin-left: auto; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: background var(--transition); }
    .install-button:hover { background: var(--hover); }
    .install-button svg { width: 17px; height: 17px; }
    .install-button[hidden] { display: none; }
    .menu-button, .close-button { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
    .menu-button:hover, .close-button:hover { background: var(--hover); }

    .workspace { margin-left: var(--rail-width); padding-top: var(--header-height); min-width: 0; }
    .page-content { display: grid; place-items: center; min-height: calc(100svh - var(--header-height)); padding: clamp(24px, 5vw, 72px); }
    .page-content:focus { outline: none; }
    .empty-state { width: 100%; max-width: 540px; text-align: center; padding: 20px 0 50px; }
    .empty-symbol { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 28px; background: var(--surface); border: 1px solid #39393f; border-radius: 15px; box-shadow: 0 8px 24px #0000000c; }
    .empty-symbol svg { width: 32px; height: 32px; color: var(--muted); stroke-width: 1.35; }
    .empty-state h1 { margin: 0 0 14px; font-size: clamp(23px, 2.25vw, 30px); font-weight: 700; line-height: 1.35; letter-spacing: -1.05px; overflow-wrap: anywhere; }
    .empty-state p { max-width: 43ch; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.9; text-wrap: pretty; }

    /* Native modal dialog supplies focus containment and Escape support. */
    .mobile-menu { position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100vw - 24px)); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; color: var(--text); background: var(--navigation); border: 0; border-right: 1px solid var(--border); }
    .mobile-menu::backdrop { background: #00000099; backdrop-filter: blur(3px); }
    .mobile-menu[open] { display: flex; flex-direction: column; animation: enter-menu 180ms ease-out; }
    .mobile-menu .brand-area { position: relative; flex-basis: 144px; padding-top: 28px; }
    .mobile-menu .brand-logo { width: 44px; height: 44px; }
    .mobile-menu .brand-label, .mobile-menu .nav-label { opacity: 1; }
    .mobile-menu .nav-link { gap: 19px; }
    .mobile-menu .close-button { position: absolute; display: flex; top: 10px; right: 8px; color: var(--muted); }
    .mobile-menu .settings-navigation { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    @keyframes enter-menu { from { transform: translateX(-100%); } to { transform: translateX(0); } }

    @media (max-width: 1023px) {
      :root { --header-height: 68px; }
      .sidebar { display: none; }
      .topbar { left: 0; padding: 0 16px; gap: 14px; }
      .topbar-icon { display: none; }
      .menu-button { display: flex; margin-left: -4px; }
      .workspace { margin-left: 0; }
      .skip-link { left: 16px; }
      .empty-state { padding-bottom: 32px; }
    }
    @media (max-width: 479px) {
      .topbar { gap: 10px; }
      .install-button { padding: 0 10px; }
      .install-button span { display: none; }
      .empty-symbol { width: 72px; height: 72px; margin-bottom: 24px; border-radius: 13px; }
      .empty-symbol svg { width: 29px; height: 29px; }
      .empty-state h1 { letter-spacing: -.75px; }
      .empty-state p { font-size: 13px; line-height: 1.9; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }